@jungherz-de/glasskit-elements 0.9.0 → 1.6.0

package/src/components/containers/glk-list.js

@@ -2,10 +2,17 @@ import { GlkElement } from '../../base.js';
 
 class GlkList extends GlkElement {
   static get observedAttributes() {
-    return ['flush', 'bare'];
+    return ['flush', 'bare', 'header'];
   }
 
   render() {
+    // Optional section header — sits before the <ul>.
+    this._header = this.createElement('div', ['glass-list__section-header']);
+    const initialHeader = this.getAttribute('header') || '';
+    this._header.textContent = initialHeader;
+    this._header.hidden = !initialHeader;
+    this._wrapper.appendChild(this._header);
+
     this._ul = this.createElement('ul', ['glass-list']);
     if (this.getBoolAttr('flush')) this._ul.classList.add('glass-list--flush');
     if (this.getBoolAttr('bare')) this._ul.classList.add('glass-list--bare');
@@ -41,6 +48,12 @@ class GlkList extends GlkElement {
       case 'bare':
         this._ul.classList.toggle('glass-list--bare', this.getBoolAttr('bare'));
         break;
+      case 'header': {
+        const value = this.getAttribute('header') || '';
+        this._header.textContent = value;
+        this._header.hidden = !value;
+        break;
+      }
     }
   }
 
@@ -49,6 +62,12 @@ class GlkList extends GlkElement {
 
   get bare() { return this.getBoolAttr('bare'); }
   set bare(v) { this.setBoolAttr('bare', v); }
+
+  get header() { return this.getAttribute('header') || ''; }
+  set header(v) {
+    if (v) this.setAttribute('header', v);
+    else this.removeAttribute('header');
+  }
 }
 
 customElements.define('glk-list', GlkList);

package/src/components/navigation/glk-tab-accessory.js

@@ -0,0 +1,65 @@
+import { GlkElement } from '../../base.js';
+
+const VARIANTS = ['accent', 'success', 'error'];
+
+class GlkTabAccessory extends GlkElement {
+  static get observedAttributes() {
+    return ['label', 'disabled', 'variant'];
+  }
+
+  render() {
+    this._btn = this.createElement('button', ['glass-tab-bar__accessory']);
+
+    if (this.getBoolAttr('disabled')) this._btn.disabled = true;
+
+    const ariaLabel = this.getAttribute('label');
+    if (ariaLabel) this._btn.setAttribute('aria-label', ariaLabel);
+
+    this._applyVariant();
+
+    this._btn.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._btn);
+  }
+
+  _applyVariant() {
+    if (!this._btn) return;
+    for (const v of VARIANTS) {
+      this._btn.classList.remove(`glass-tab-bar__accessory--${v}`);
+    }
+    const variant = this.getAttribute('variant');
+    if (variant && VARIANTS.includes(variant)) {
+      this._btn.classList.add(`glass-tab-bar__accessory--${variant}`);
+    }
+  }
+
+  setupEvents() {
+    this._onClick = () => {
+      if (!this.getBoolAttr('disabled')) {
+        this.emit('glk-click');
+      }
+    };
+    this._btn.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onClick);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._btn) return;
+    switch (name) {
+      case 'label':
+        this._btn.setAttribute('aria-label', this.getAttribute('label') || '');
+        break;
+      case 'disabled':
+        this._btn.disabled = this.getBoolAttr('disabled');
+        break;
+      case 'variant':
+        this._applyVariant();
+        break;
+    }
+  }
+}
+
+customElements.define('glk-tab-accessory', GlkTabAccessory);
+export { GlkTabAccessory };

package/src/components/navigation/glk-tab-bar.js

@@ -2,7 +2,7 @@ import { GlkElement } from '../../base.js';
 
 class GlkTabBar extends GlkElement {
   static get observedAttributes() {
-    return ['static'];
+    return ['static', 'floating'];
   }
 
   render() {
@@ -11,14 +11,21 @@ class GlkTabBar extends GlkElement {
     this._wrapper.appendChild(nav);
     this._nav = nav;
 
+    if (this.getBoolAttr('floating')) {
+      nav.classList.add('glass-tab-bar--floating');
+    }
+
     if (this.getBoolAttr('static')) {
       this._applyStatic();
     }
   }
 
   onAttributeChanged(name) {
-    if (name === 'static' && this._nav) {
+    if (!this._nav) return;
+    if (name === 'static') {
       this._applyStatic();
+    } else if (name === 'floating') {
+      this._nav.classList.toggle('glass-tab-bar--floating', this.getBoolAttr('floating'));
     }
   }
 

package/src/components/navigation/glk-tab-dock.js

@@ -0,0 +1,51 @@
+import { GlkElement } from '../../base.js';
+
+class GlkTabDock extends GlkElement {
+  static get observedAttributes() {
+    return ['accessory-left', 'static'];
+  }
+
+  render() {
+    this._dock = this.createElement('div', ['glass-tab-bar-dock']);
+    if (this.getBoolAttr('accessory-left')) {
+      this._dock.classList.add('glass-tab-bar-dock--accessory-left');
+    }
+    this._dock.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._dock);
+
+    if (this.getBoolAttr('static')) {
+      this._applyStatic();
+    }
+  }
+
+  onAttributeChanged(name) {
+    if (!this._dock) return;
+    if (name === 'accessory-left') {
+      this._dock.classList.toggle(
+        'glass-tab-bar-dock--accessory-left',
+        this.getBoolAttr('accessory-left')
+      );
+    } else if (name === 'static') {
+      this._applyStatic();
+    }
+  }
+
+  _applyStatic() {
+    if (this.getBoolAttr('static')) {
+      this._dock.style.position = 'relative';
+      this._dock.style.left = 'auto';
+      this._dock.style.bottom = 'auto';
+      this._dock.style.transform = 'none';
+      this._dock.style.justifyContent = 'center';
+    } else {
+      this._dock.style.position = '';
+      this._dock.style.left = '';
+      this._dock.style.bottom = '';
+      this._dock.style.transform = '';
+      this._dock.style.justifyContent = '';
+    }
+  }
+}
+
+customElements.define('glk-tab-dock', GlkTabDock);
+export { GlkTabDock };

package/src/index.js

@@ -6,6 +6,8 @@ export { GlkNav } from './components/navigation/glk-nav.js';
 export { GlkPill } from './components/navigation/glk-pill.js';
 export { GlkTabBar } from './components/navigation/glk-tab-bar.js';
 export { GlkTabItem } from './components/navigation/glk-tab-item.js';
+export { GlkTabDock } from './components/navigation/glk-tab-dock.js';
+export { GlkTabAccessory } from './components/navigation/glk-tab-accessory.js';
 
 // Content
 export { GlkCard } from './components/content/glk-card.js';