lega911

// file: /usr/share/X11/xkb/symbols/se

default partial alphanumeric_keys
xkb_symbols "basic" {
    include "latin(type2)"
    include "se(se)"
};

partial alphanumeric_keys

lega911

<script>
  import Button from './button.xht';

  // able to create a component/block by JS
  function Custom($option) {
    return document.createTextNode('Custom JS-component');
  }

</script>

lega911

<script type="typescript">
    let name: string  = 'bar';
</script>

<h1>Hello {name}!</h1>

lega911

<script>
  let name = '';
  let todos = [{name: 'Linux'}, {name: 'Ubuntu', done: true}];
  let active;

  function add() {
    if(!name) return;
    todos.push({name});
    name = '';
  }

lega911

<script>
    const styleDiv = el => {
        el.style.border = '2px dotted red';
        el.style.padding = '8px';
    }
</script>

<div {* styleDiv($element) }>
    {* $element.textContent = 'inserted text' }
</div>

lega911

diff --git a/dist/static/index.html b/dist/static/index.html
index 889ce60..66c9f93 100644
--- a/dist/static/index.html
+++ b/dist/static/index.html
@@ -4,10 +4,10 @@
    <meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
    <title>Malina.js - import ES modules</title>
-   <link rel="shortcut icon" href="./malinajs.svg">
-	<link rel='stylesheet' href='./global.css'>

lega911

<script>
  import Box from './Box.xht';
</script>

<Box class="purple">Purple class</Box>

<Box class="green">Green</Box>

<style>
  .purple {

lega911

<script>
  import Child from './Child.xht';
  let value = 'text';
  const action = (el) => {
    el.style.backgroundColor = '#b1daf8';
  }
</script>

Value: {value}

lega911

<script>
    import Icon from './Icon.xht';
    let name = 'world';
</script>

<Icon />
<Icon class="green bold" />
<br/>
<Icon class="aqua big" />

lega911

<script>
  import Child from './Child.xht';
  let forChild = 'glob bold hovered subtext';
  let checked = false;

  $runtime.addStyles('glob-css', `.glob {color:deeppink}`);
</script>


<div class="box">