@jungherz-de/glasskit-elements 0.8.0

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

@@ -0,0 +1,31 @@
+import { GlkElement } from '../../base.js';
+
+class GlkTabBar extends GlkElement {
+  render() {
+    const nav = this.createElement('nav', ['glass-tab-bar']);
+    nav.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(nav);
+  }
+
+  setupEvents() {
+    // Listen for tab selection events from child glk-tab-item elements
+    this._onTabSelect = (e) => {
+      // Deactivate all other tabs
+      const items = this.querySelectorAll('glk-tab-item');
+      items.forEach(item => {
+        if (item !== e.target) {
+          item.removeAttribute('active');
+        }
+      });
+      this.emit('glk-tab-change', { tab: e.target });
+    };
+    this.addEventListener('glk-tab-select', this._onTabSelect);
+  }
+
+  teardownEvents() {
+    this.removeEventListener('glk-tab-select', this._onTabSelect);
+  }
+}
+
+customElements.define('glk-tab-bar', GlkTabBar);
+export { GlkTabBar };

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

@@ -0,0 +1,74 @@
+import { GlkElement } from '../../base.js';
+
+class GlkTabItem extends GlkElement {
+  static get observedAttributes() {
+    return ['label', 'active', 'badge'];
+  }
+
+  render() {
+    this._btn = this.createElement('button', ['glass-tab-bar__item']);
+    if (this.getBoolAttr('active')) this._btn.classList.add('is-active');
+
+    // Icon slot
+    this._iconEl = this.createElement('span', ['glass-tab-bar__icon']);
+    this._iconEl.appendChild(document.createElement('slot'));
+
+    // Label
+    this._labelEl = this.createElement('span', ['glass-tab-bar__label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    this._btn.appendChild(this._iconEl);
+    this._btn.appendChild(this._labelEl);
+
+    // Badge (optional)
+    const badge = this.getAttribute('badge');
+    if (badge) {
+      this._badgeEl = this.createElement('span', ['glass-tab-bar__badge']);
+      this._badgeEl.textContent = badge;
+      this._btn.appendChild(this._badgeEl);
+    }
+
+    this._wrapper.appendChild(this._btn);
+  }
+
+  setupEvents() {
+    this._onClick = () => {
+      this.setAttribute('active', '');
+      this.emit('glk-tab-select');
+    };
+    this._btn.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onClick);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._btn) return;
+    switch (name) {
+      case 'active':
+        this._btn.classList.toggle('is-active', this.getBoolAttr('active'));
+        break;
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'badge': {
+        const badge = this.getAttribute('badge');
+        if (badge) {
+          if (!this._badgeEl) {
+            this._badgeEl = this.createElement('span', ['glass-tab-bar__badge']);
+            this._btn.appendChild(this._badgeEl);
+          }
+          this._badgeEl.textContent = badge;
+        } else if (this._badgeEl) {
+          this._badgeEl.remove();
+          this._badgeEl = null;
+        }
+        break;
+      }
+    }
+  }
+}
+
+customElements.define('glk-tab-item', GlkTabItem);
+export { GlkTabItem };

package/src/index.js

@@ -0,0 +1,38 @@
+// GlassKit Elements — Web Components for GlassKit CSS
+// https://github.com/JUNGHERZ/GlassKit
+
+// Navigation
+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';
+
+// Content
+export { GlkCard } from './components/content/glk-card.js';
+export { GlkBadge } from './components/content/glk-badge.js';
+export { GlkAvatar } from './components/content/glk-avatar.js';
+export { GlkTitle } from './components/content/glk-title.js';
+export { GlkDivider } from './components/content/glk-divider.js';
+export { GlkStatus } from './components/content/glk-status.js';
+
+// Buttons
+export { GlkButton } from './components/buttons/glk-button.js';
+
+// Forms
+export { GlkInput } from './components/forms/glk-input.js';
+export { GlkTextarea } from './components/forms/glk-textarea.js';
+export { GlkSelect } from './components/forms/glk-select.js';
+export { GlkSearch } from './components/forms/glk-search.js';
+export { GlkToggle } from './components/forms/glk-toggle.js';
+export { GlkCheckbox } from './components/forms/glk-checkbox.js';
+export { GlkRadio } from './components/forms/glk-radio.js';
+export { GlkRange } from './components/forms/glk-range.js';
+
+// Feedback
+export { GlkProgress } from './components/feedback/glk-progress.js';
+export { GlkModal } from './components/feedback/glk-modal.js';
+export { GlkToast } from './components/feedback/glk-toast.js';
+
+// Containers
+export { GlkAccordion } from './components/containers/glk-accordion.js';
+export { GlkAccordionItem } from './components/containers/glk-accordion-item.js';