@jungherz-de/glasskit-elements 0.8.0

package/dist/glasskit-elements.esm.js

@@ -0,0 +1,1789 @@
+// GlassKit v1.3.3 – Constructable Stylesheet
+// Auto-generated by build-styles-js.mjs – do not edit manually.
+
+const css = "[class*=gl-],[class*=glass-],[class*=glass-]::after,[class*=glass-]::before{box-sizing:border-box}:root,[data-theme=dark]{--gl-color-primary:#f5a623;--gl-color-primary-dark:#d4692a;--gl-color-primary-mid:#e07a24;--gl-color-bg-dark:#0e2530;--gl-color-bg-mid:#1a3d4e;--gl-color-bg-light:#1b3e50;--gl-color-text:#ffffff;--gl-color-text-muted:rgba(255, 255, 255, 0.60);--gl-color-text-on-light:#1a3a4a;--gl-color-text-heading:#ffffff;--gl-color-success:#34c759;--gl-color-error:#ff3b30;--gl-color-warning:#ffcc00;--gl-surface-1:rgba(255, 255, 255, 0.08);--gl-surface-2:rgba(255, 255, 255, 0.10);--gl-surface-3:rgba(255, 255, 255, 0.14);--gl-surface-4:rgba(255, 255, 255, 0.16);--gl-surface-5:rgba(255, 255, 255, 0.22);--gl-surface-milk:rgba(255, 255, 255, 0.55);--gl-surface-milk-strong:rgba(255, 255, 255, 0.75);--gl-surface-overlay:rgba(0, 0, 0, 0.50);--gl-card-glow-top:rgba(255, 255, 255, 0.32);--gl-card-glow-mid:rgba(255, 255, 255, 0.22);--gl-card-glow-low:rgba(255, 255, 255, 0.14);--gl-card-glow-bottom:rgba(255, 255, 255, 0.08);--gl-card-icon-color:rgba(255, 255, 255, 0.8);--gl-card-text-color:rgba(255, 255, 255, 0.7);--gl-border-subtle:rgba(255, 255, 255, 0.18);--gl-border-medium:rgba(255, 255, 255, 0.30);--gl-border-strong:rgba(255, 255, 255, 0.40);--gl-border-milk:rgba(255, 255, 255, 0.60);--gl-border-warm:rgba(255, 200, 100, 0.35);--gl-border-focus:rgba(245, 166, 35, 0.60);--gl-icon-default:rgba(255, 255, 255, 0.6);--gl-icon-muted:rgba(255, 255, 255, 0.45);--gl-icon-strong:rgba(255, 255, 255, 0.8);--gl-icon-on-primary:#ffffff;--gl-icon-on-secondary:#1a3a4a;--gl-icon-on-tertiary:rgba(255, 255, 255, 0.6);--gl-blur:24px;--gl-blur-light:16px;--gl-blur-soft:12px;--gl-blur-heavy:40px;--gl-radius-pill:50%;--gl-radius-full:9999px;--gl-radius-card:24px;--gl-radius-btn:16px;--gl-radius-input:14px;--gl-radius-sm:12px;--gl-radius-xs:8px;--gl-shadow-card:0 8px 32px rgba(0, 0, 0, 0.18);--gl-shadow-btn:0 4px 16px rgba(0, 0, 0, 0.12);--gl-shadow-btn-primary:0 6px 24px rgba(230, 130, 40, 0.35),0 2px 8px rgba(0, 0, 0, 0.15);--gl-shadow-glow:0 2px 12px rgba(255, 255, 255, 0.08),0 4px 16px rgba(0, 0, 0, 0.15);--gl-shadow-modal:0 24px 80px rgba(0, 0, 0, 0.4),0 8px 32px rgba(0, 0, 0, 0.2);--gl-shadow-toast:0 8px 32px rgba(0, 0, 0, 0.25);--gl-shadow-focus:0 0 0 3px rgba(245, 166, 35, 0.3);--gl-inset-subtle:inset 0 1px 1px rgba(255, 255, 255, 0.10);--gl-inset-medium:inset 0 1px 1px rgba(255, 255, 255, 0.15);--gl-inset-strong:inset 0 1px 2px rgba(255, 255, 255, 0.25);--gl-inset-milk:inset 0 1px 2px rgba(255, 255, 255, 0.40);--gl-bg-aurora-1:rgba(60, 160, 160, 0.25);--gl-bg-aurora-2:rgba(200, 140, 60, 0.12);--gl-bg-aurora-3:rgba(80, 180, 200, 0.18);--gl-bg-light-streak-1:rgba(90, 210, 200, 0.14);--gl-bg-light-streak-2:rgba(110, 200, 190, 0.10);--gl-bg-warm-glow:rgba(220, 160, 70, 0.10);--gl-space-2xs:4px;--gl-space-xs:8px;--gl-space-sm:12px;--gl-space-md:16px;--gl-space-lg:20px;--gl-space-xl:24px;--gl-space-2xl:32px;--gl-space-3xl:40px;--gl-space-4xl:56px;--gl-font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif;--gl-font-size-xs:13px;--gl-font-size-sm:14px;--gl-font-size-base:15px;--gl-font-size-btn:16px;--gl-font-size-lg:18px;--gl-font-size-title:24px;--gl-font-size-modal:20px;--gl-font-weight-normal:400;--gl-font-weight-medium:500;--gl-font-weight-semibold:600;--gl-transition:all 0.25s ease;--gl-transition-fast:all 0.15s ease;--gl-transition-modal:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);--gl-tab-bar-height:82px;--gl-placeholder:rgba(255, 255, 255, 0.35);--gl-accordion-body-color:var(--gl-color-text-muted);--gl-toggle-thumb-bg:linear-gradient(to bottom,\n                               rgba(255,255,255,0.9) 0%,\n                               rgba(255,255,255,0.7) 100%);--gl-range-track-bg:var(--gl-surface-2);--gl-range-track-border:var(--gl-border-subtle)}[data-theme=light]{--gl-color-primary:#e8852d;--gl-color-primary-dark:#c96a1e;--gl-color-primary-mid:#d97826;--gl-color-bg-dark:#e8ecf1;--gl-color-bg-mid:#f0f4f8;--gl-color-bg-light:#f5f7fa;--gl-color-text:#1a2a36;--gl-color-text-muted:rgba(26, 42, 54, 0.55);--gl-color-text-on-light:#1a3a4a;--gl-color-text-heading:#0f1f2a;--gl-color-success:#28a745;--gl-color-error:#dc3545;--gl-color-warning:#e6a800;--gl-surface-1:rgba(255, 255, 255, 0.50);--gl-surface-2:rgba(255, 255, 255, 0.60);--gl-surface-3:rgba(255, 255, 255, 0.70);--gl-surface-4:rgba(255, 255, 255, 0.75);--gl-surface-5:rgba(255, 255, 255, 0.85);--gl-surface-milk:rgba(255, 255, 255, 0.85);--gl-surface-milk-strong:rgba(255, 255, 255, 0.92);--gl-surface-overlay:rgba(0, 0, 0, 0.25);--gl-card-glow-top:rgba(255, 255, 255, 0.90);--gl-card-glow-mid:rgba(255, 255, 255, 0.78);--gl-card-glow-low:rgba(255, 255, 255, 0.65);--gl-card-glow-bottom:rgba(255, 255, 255, 0.50);--gl-card-icon-color:rgba(26, 42, 54, 0.5);--gl-card-text-color:rgba(26, 42, 54, 0.6);--gl-border-subtle:rgba(0, 0, 0, 0.08);--gl-border-medium:rgba(0, 0, 0, 0.12);--gl-border-strong:rgba(0, 0, 0, 0.15);--gl-border-milk:rgba(0, 0, 0, 0.10);--gl-border-warm:rgba(232, 133, 45, 0.30);--gl-border-focus:rgba(232, 133, 45, 0.50);--gl-icon-default:rgba(26, 42, 54, 0.50);--gl-icon-muted:rgba(26, 42, 54, 0.35);--gl-icon-strong:rgba(26, 42, 54, 0.70);--gl-icon-on-primary:#ffffff;--gl-icon-on-secondary:#1a3a4a;--gl-icon-on-tertiary:rgba(26, 42, 54, 0.50);--gl-shadow-card:0 4px 20px rgba(0, 0, 0, 0.06);--gl-shadow-btn:0 2px 10px rgba(0, 0, 0, 0.06);--gl-shadow-btn-primary:0 4px 16px rgba(232, 133, 45, 0.25),0 2px 6px rgba(0, 0, 0, 0.08);--gl-shadow-glow:0 2px 8px rgba(0, 0, 0, 0.05),0 4px 12px rgba(0, 0, 0, 0.04);--gl-shadow-modal:0 16px 48px rgba(0, 0, 0, 0.12),0 4px 16px rgba(0, 0, 0, 0.08);--gl-shadow-toast:0 4px 20px rgba(0, 0, 0, 0.10);--gl-shadow-focus:0 0 0 3px rgba(232, 133, 45, 0.25);--gl-inset-subtle:inset 0 1px 1px rgba(255, 255, 255, 0.60);--gl-inset-medium:inset 0 1px 1px rgba(255, 255, 255, 0.70);--gl-inset-strong:inset 0 1px 2px rgba(255, 255, 255, 0.80);--gl-inset-milk:inset 0 1px 2px rgba(255, 255, 255, 0.90);--gl-bg-aurora-1:rgba(100, 200, 220, 0.15);--gl-bg-aurora-2:rgba(240, 180, 100, 0.10);--gl-bg-aurora-3:rgba(120, 200, 230, 0.12);--gl-bg-light-streak-1:rgba(140, 230, 220, 0.10);--gl-bg-light-streak-2:rgba(160, 220, 210, 0.08);--gl-bg-warm-glow:rgba(240, 180, 100, 0.08);--gl-placeholder:rgba(26, 42, 54, 0.30);--gl-accordion-body-color:var(--gl-color-text-muted);--gl-toggle-thumb-bg:linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);--gl-range-track-bg:var(--gl-surface-2);--gl-range-track-border:var(--gl-border-subtle)}.glass-bg{background:radial-gradient(ellipse at 20% 40%,var(--gl-bg-aurora-1) 0,transparent 55%),radial-gradient(ellipse at 80% 65%,var(--gl-bg-aurora-2) 0,transparent 50%),radial-gradient(ellipse at 50% 20%,var(--gl-bg-aurora-3) 0,transparent 50%),linear-gradient(170deg,var(--gl-color-bg-light) 0,var(--gl-color-bg-mid) 50%,var(--gl-color-bg-dark) 100%);position:relative;min-height:100vh;overflow-x:hidden;font-family:var(--gl-font-family);color:var(--gl-color-text);-webkit-font-smoothing:antialiased;transition:background .4s,color .3s}.glass-bg::before{content:'';position:absolute;top:20%;left:-30%;width:160%;height:55%;background:radial-gradient(ellipse at 35% 45%,var(--gl-bg-light-streak-1) 0,transparent 50%),radial-gradient(ellipse at 65% 55%,var(--gl-bg-light-streak-2) 0,transparent 45%);transform:rotate(-8deg);pointer-events:none;z-index:0}.glass-bg::after{content:'';position:absolute;top:40%;right:-20%;width:70%;height:50%;background:radial-gradient(ellipse at center,var(--gl-bg-warm-glow) 0,transparent 65%);pointer-events:none;z-index:0}.glass-bg>*{position:relative;z-index:1}.glass-bg--has-tab-bar{padding-bottom:var(--gl-tab-bar-height)}.glass-nav{display:flex;justify-content:space-between;align-items:center;padding:0 var(--gl-space-xs)}.glass-pill{width:46px;height:46px;border-radius:var(--gl-radius-pill);background:var(--gl-surface-3);backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));border:1.5px solid var(--gl-border-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--gl-transition);color:var(--gl-color-text);box-shadow:var(--gl-shadow-glow),var(--gl-inset-medium);outline:0;-webkit-tap-highlight-color:transparent}.glass-pill:hover{background:var(--gl-surface-5);transform:scale(1.05)}.glass-pill:active{transform:scale(.95)}.glass-pill svg{width:20px;height:20px;fill:none;stroke:var(--gl-color-text);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.glass-title{text-align:center;color:var(--gl-color-text-heading);font-size:var(--gl-font-size-title);font-weight:var(--gl-font-weight-semibold);line-height:1.3;text-shadow:0 2px 12px rgba(0,0,0,.15);letter-spacing:-.3px}.glass-card{background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));border:1.5px solid var(--gl-border-medium);border-radius:var(--gl-radius-card);padding:var(--gl-space-3xl) var(--gl-space-xl) var(--gl-space-2xl);box-shadow:var(--gl-shadow-card),var(--gl-inset-strong)}.glass-card--glow{position:relative;overflow:hidden;background:linear-gradient(to bottom,var(--gl-card-glow-top) 0,var(--gl-card-glow-mid) 25%,var(--gl-card-glow-low) 55%,var(--gl-card-glow-bottom) 100%)}.glass-card--glow::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.5) 30%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.5) 70%,transparent 100%);z-index:1}.glass-card__icon{display:flex;align-items:center;justify-content:center;margin:0 auto var(--gl-space-lg)}.glass-card__icon svg{width:64px;height:64px;stroke:var(--gl-card-icon-color);stroke-width:1.2;fill:none}.glass-card__text{color:var(--gl-card-text-color);font-size:var(--gl-font-size-base);font-weight:var(--gl-font-weight-normal);line-height:1.55;text-align:center}.glass-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border:none;border-radius:var(--gl-radius-btn);font-family:var(--gl-font-family);font-size:var(--gl-font-size-btn);font-weight:var(--gl-font-weight-semibold);cursor:pointer;transition:var(--gl-transition);outline:0;-webkit-tap-highlight-color:transparent}.glass-btn svg{width:20px;height:20px;flex-shrink:0}.glass-btn--primary{background:linear-gradient(135deg,var(--gl-color-primary) 0,var(--gl-color-primary-mid) 50%,var(--gl-color-primary-dark) 100%);color:#fff;border:1px solid var(--gl-border-warm);box-shadow:var(--gl-shadow-btn-primary),var(--gl-inset-strong)}.glass-btn--primary svg{fill:var(--gl-icon-on-primary);stroke:var(--gl-icon-on-primary);stroke-width:0}.glass-btn--primary:hover{transform:translateY(-1px)}.glass-btn--primary:active{transform:translateY(1px)}.glass-btn--secondary{background:linear-gradient(to bottom,var(--gl-surface-milk-strong) 0,var(--gl-surface-milk) 100%);backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));border:1.5px solid var(--gl-border-milk);color:var(--gl-color-text-on-light);box-shadow:var(--gl-shadow-btn),var(--gl-inset-milk)}.glass-btn--secondary svg{fill:none;stroke:var(--gl-icon-on-secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.glass-btn--secondary:hover{transform:translateY(-1px)}.glass-btn--secondary:active{transform:translateY(1px)}.glass-btn--tertiary{background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-light));-webkit-backdrop-filter:blur(var(--gl-blur-light));border:1px solid var(--gl-border-subtle);color:var(--gl-color-text-muted);box-shadow:0 4px 12px rgba(0,0,0,.1),var(--gl-inset-subtle)}.glass-btn--tertiary svg{fill:none;stroke:var(--gl-icon-on-tertiary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.glass-btn--tertiary:hover{background:var(--gl-surface-4);color:var(--gl-color-text);transform:translateY(-1px)}.glass-btn--tertiary:active{transform:translateY(1px)}.glass-btn--sm{height:44px;font-size:var(--gl-font-size-sm);border-radius:var(--gl-radius-sm)}.glass-btn--lg{height:64px;font-size:var(--gl-font-size-lg)}.glass-btn--auto{width:auto;padding:0 var(--gl-space-xl)}.glass-status{background:var(--gl-surface-1);backdrop-filter:blur(var(--gl-blur-light));-webkit-backdrop-filter:blur(var(--gl-blur-light));border:1px solid var(--gl-border-subtle);border-radius:var(--gl-radius-btn);padding:var(--gl-space-md) var(--gl-space-lg);display:flex;align-items:center;gap:var(--gl-space-sm);box-shadow:0 4px 12px rgba(0,0,0,.08),var(--gl-inset-subtle)}.glass-status svg{width:20px;height:20px;flex-shrink:0;stroke:var(--gl-icon-muted);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.glass-status p{color:var(--gl-color-text-muted);font-size:var(--gl-font-size-sm);font-weight:var(--gl-font-weight-normal);line-height:1.45}.glass-input-group{display:flex;flex-direction:column;gap:var(--gl-space-xs)}.glass-label{font-size:var(--gl-font-size-sm);font-weight:var(--gl-font-weight-medium);color:var(--gl-icon-strong);padding-left:var(--gl-space-2xs)}.glass-input{width:100%;height:52px;padding:0 var(--gl-space-md);background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-light));-webkit-backdrop-filter:blur(var(--gl-blur-light));border:1.5px solid var(--gl-border-medium);border-radius:var(--gl-radius-input);color:var(--gl-color-text);font-family:var(--gl-font-family);font-size:var(--gl-font-size-base);transition:var(--gl-transition);outline:0;box-shadow:var(--gl-inset-subtle);-webkit-tap-highlight-color:transparent}.glass-input::placeholder{color:var(--gl-placeholder)}.glass-input:focus{border-color:var(--gl-border-focus);background:var(--gl-surface-3);box-shadow:var(--gl-shadow-focus),var(--gl-inset-medium)}.glass-input:disabled{opacity:.4;cursor:not-allowed}.glass-input--error{border-color:var(--gl-color-error)}.glass-input--error:focus{box-shadow:0 0 0 3px rgba(255,59,48,.25),var(--gl-inset-medium)}.glass-hint{font-size:var(--gl-font-size-xs);color:var(--gl-color-text-muted);padding-left:var(--gl-space-2xs)}.glass-hint--error{color:var(--gl-color-error)}.glass-textarea{width:100%;min-height:120px;padding:var(--gl-space-md);background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-light));-webkit-backdrop-filter:blur(var(--gl-blur-light));border:1.5px solid var(--gl-border-medium);border-radius:var(--gl-radius-input);color:var(--gl-color-text);font-family:var(--gl-font-family);font-size:var(--gl-font-size-base);line-height:1.5;resize:vertical;transition:var(--gl-transition);outline:0;box-shadow:var(--gl-inset-subtle)}.glass-textarea::placeholder{color:var(--gl-placeholder)}.glass-textarea:focus{border-color:var(--gl-border-focus);background:var(--gl-surface-3);box-shadow:var(--gl-shadow-focus),var(--gl-inset-medium)}.glass-select{width:100%;height:52px;padding:0 var(--gl-space-3xl) 0 var(--gl-space-md);background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-light));-webkit-backdrop-filter:blur(var(--gl-blur-light));border:1.5px solid var(--gl-border-medium);border-radius:var(--gl-radius-input);color:var(--gl-color-text);font-family:var(--gl-font-family);font-size:var(--gl-font-size-base);transition:var(--gl-transition);outline:0;box-shadow:var(--gl-inset-subtle);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 16px center}.glass-select:focus{border-color:var(--gl-border-focus);box-shadow:var(--gl-shadow-focus),var(--gl-inset-medium)}.glass-select option{background:var(--gl-color-bg-mid);color:var(--gl-color-text)}.glass-search{position:relative;display:flex;align-items:center}.glass-search__icon{position:absolute;left:var(--gl-space-md);width:18px;height:18px;stroke:var(--gl-icon-muted)!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;fill:none!important;pointer-events:none;z-index:2}.glass-search .glass-input{padding-left:44px;border-radius:var(--gl-radius-full)}.glass-toggle{display:inline-flex;align-items:center;gap:var(--gl-space-sm);cursor:pointer;-webkit-tap-highlight-color:transparent}.glass-toggle__input{position:absolute;opacity:0;width:0;height:0}.glass-toggle__track{position:relative;width:52px;height:30px;background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-soft));-webkit-backdrop-filter:blur(var(--gl-blur-soft));border:1.5px solid var(--gl-border-medium);border-radius:var(--gl-radius-full);transition:var(--gl-transition);box-shadow:var(--gl-inset-subtle);flex-shrink:0}.glass-toggle__thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:var(--gl-radius-pill);background:var(--gl-toggle-thumb-bg);box-shadow:0 2px 6px rgba(0,0,0,.2),var(--gl-inset-milk);transition:var(--gl-transition)}.glass-toggle__input:checked+.glass-toggle__track{background:linear-gradient(135deg,var(--gl-color-primary) 0,var(--gl-color-primary-dark) 100%);border-color:var(--gl-border-warm)}.glass-toggle__input:checked+.glass-toggle__track .glass-toggle__thumb{transform:translateX(22px)}.glass-toggle__input:focus-visible+.glass-toggle__track{box-shadow:var(--gl-shadow-focus)}.glass-toggle__label{font-size:var(--gl-font-size-base);color:var(--gl-color-text);user-select:none}.glass-checkbox{display:inline-flex;align-items:center;gap:var(--gl-space-sm);cursor:pointer;-webkit-tap-highlight-color:transparent}.glass-checkbox__input{position:absolute;opacity:0;width:0;height:0}.glass-checkbox__box{width:24px;height:24px;border-radius:var(--gl-radius-xs);background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-soft));-webkit-backdrop-filter:blur(var(--gl-blur-soft));border:1.5px solid var(--gl-border-medium);display:flex;align-items:center;justify-content:center;transition:var(--gl-transition);box-shadow:var(--gl-inset-subtle);flex-shrink:0}.glass-checkbox__box svg{width:14px;height:14px;stroke:white;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:var(--gl-transition-fast)}.glass-checkbox__input:checked+.glass-checkbox__box{background:linear-gradient(135deg,var(--gl-color-primary) 0,var(--gl-color-primary-dark) 100%);border-color:var(--gl-border-warm)}.glass-checkbox__input:checked+.glass-checkbox__box svg{opacity:1;transform:scale(1)}.glass-checkbox__input:focus-visible+.glass-checkbox__box{box-shadow:var(--gl-shadow-focus)}.glass-checkbox__label{font-size:var(--gl-font-size-base);color:var(--gl-color-text);user-select:none}.glass-radio{display:inline-flex;align-items:center;gap:var(--gl-space-sm);cursor:pointer;-webkit-tap-highlight-color:transparent}.glass-radio__input{position:absolute;opacity:0;width:0;height:0}.glass-radio__circle{width:24px;height:24px;border-radius:var(--gl-radius-pill);background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-soft));border:1.5px solid var(--gl-border-medium);display:flex;align-items:center;justify-content:center;transition:var(--gl-transition);box-shadow:var(--gl-inset-subtle);flex-shrink:0}.glass-radio__dot{width:10px;height:10px;border-radius:var(--gl-radius-pill);background:#fff;opacity:0;transform:scale(0);transition:var(--gl-transition-fast)}.glass-radio__input:checked+.glass-radio__circle{background:linear-gradient(135deg,var(--gl-color-primary) 0,var(--gl-color-primary-dark) 100%);border-color:var(--gl-border-warm)}.glass-radio__input:checked+.glass-radio__circle .glass-radio__dot{opacity:1;transform:scale(1)}.glass-radio__input:focus-visible+.glass-radio__circle{box-shadow:var(--gl-shadow-focus)}.glass-radio__label{font-size:var(--gl-font-size-base);color:var(--gl-color-text);user-select:none}.glass-range-group{display:flex;flex-direction:column;gap:var(--gl-space-xs)}.glass-range-header{display:flex;justify-content:space-between;align-items:baseline}.glass-range-value{font-size:var(--gl-font-size-sm);font-weight:var(--gl-font-weight-semibold);color:var(--gl-color-primary);font-variant-numeric:tabular-nums}.glass-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--gl-radius-full);background:var(--gl-range-track-bg);border:1px solid var(--gl-range-track-border);outline:0;cursor:pointer}.glass-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:var(--gl-radius-pill);background:linear-gradient(135deg,var(--gl-color-primary) 0,var(--gl-color-primary-dark) 100%);border:2px solid rgba(255,255,255,.5);box-shadow:0 2px 8px rgba(230,130,40,.35),var(--gl-inset-strong);margin-top:-10px;cursor:pointer;transition:var(--gl-transition)}.glass-range::-webkit-slider-thumb:hover{transform:scale(1.1)}.glass-range::-moz-range-thumb{width:26px;height:26px;border-radius:var(--gl-radius-pill);background:linear-gradient(135deg,var(--gl-color-primary) 0,var(--gl-color-primary-dark) 100%);border:2px solid rgba(255,255,255,.5);box-shadow:0 2px 8px rgba(230,130,40,.35);cursor:pointer}.glass-range::-moz-range-track{height:6px;border-radius:var(--gl-radius-full);background:var(--gl-range-track-bg);border:1px solid var(--gl-range-track-border)}.glass-range:focus-visible{box-shadow:var(--gl-shadow-focus)}.glass-progress{width:100%;display:flex;flex-direction:column;gap:var(--gl-space-xs)}.glass-progress__header{display:flex;justify-content:space-between;align-items:baseline}.glass-progress__label{font-size:var(--gl-font-size-sm);font-weight:var(--gl-font-weight-medium);color:var(--gl-icon-strong)}.glass-progress__value{font-size:var(--gl-font-size-xs);font-weight:var(--gl-font-weight-semibold);color:var(--gl-color-text-muted);font-variant-numeric:tabular-nums}.glass-progress__track{width:100%;height:8px;border-radius:var(--gl-radius-full);background:var(--gl-surface-2);border:1px solid var(--gl-border-subtle);overflow:hidden;box-shadow:var(--gl-inset-subtle)}.glass-progress__fill{height:100%;border-radius:var(--gl-radius-full);background:linear-gradient(90deg,var(--gl-color-primary) 0,var(--gl-color-primary-dark) 100%);box-shadow:0 0 8px rgba(245,166,35,.3),var(--gl-inset-strong);transition:width .5s cubic-bezier(.4, 0, .2, 1);position:relative}.glass-progress__fill::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;border-radius:var(--gl-radius-full);background:linear-gradient(to bottom,rgba(255,255,255,.3) 0,transparent 100%)}.glass-progress--sm .glass-progress__track{height:4px}.glass-progress--lg .glass-progress__track{height:12px}.glass-progress--success .glass-progress__fill{background:linear-gradient(90deg,#34c759 0,#2da44e 100%);box-shadow:0 0 8px rgba(52,199,89,.3),var(--gl-inset-strong)}.glass-progress--error .glass-progress__fill{background:linear-gradient(90deg,#ff3b30 0,#d63027 100%);box-shadow:0 0 8px rgba(255,59,48,.3),var(--gl-inset-strong)}.glass-modal-overlay{position:fixed;inset:0;background:var(--gl-surface-overlay);backdrop-filter:blur(var(--gl-blur-soft));-webkit-backdrop-filter:blur(var(--gl-blur-soft));display:flex;align-items:center;justify-content:center;padding:var(--gl-space-lg);z-index:1000;opacity:0;pointer-events:none;transition:var(--gl-transition-modal);font-family:var(--gl-font-family);-webkit-font-smoothing:antialiased}.glass-modal-overlay.is-active{opacity:1;pointer-events:auto}.glass-modal{width:100%;max-width:340px;background:linear-gradient(to bottom,var(--gl-card-glow-top) 0,var(--gl-card-glow-bottom) 100%);backdrop-filter:blur(var(--gl-blur-heavy));-webkit-backdrop-filter:blur(var(--gl-blur-heavy));border:1.5px solid var(--gl-border-medium);border-radius:var(--gl-radius-card);overflow:hidden;box-shadow:var(--gl-shadow-modal);transform:scale(.9) translateY(20px);transition:var(--gl-transition-modal);position:relative}.glass-modal-overlay.is-active .glass-modal{transform:scale(1) translateY(0)}.glass-modal::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.4) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.4) 70%,transparent 100%)}.glass-modal__header{padding:var(--gl-space-xl) var(--gl-space-xl) var(--gl-space-sm);text-align:center}.glass-modal__title{font-size:var(--gl-font-size-modal);font-weight:var(--gl-font-weight-semibold);color:var(--gl-color-text)}.glass-modal__body{padding:var(--gl-space-sm) var(--gl-space-xl) var(--gl-space-xl);text-align:center}.glass-modal__body p{color:var(--gl-color-text-muted);font-size:var(--gl-font-size-base);line-height:1.55}.glass-modal__footer{display:flex;border-top:1px solid var(--gl-border-subtle)}.glass-modal__action{flex:1;height:52px;background:0 0;border:none;font-family:var(--gl-font-family);font-size:var(--gl-font-size-btn);font-weight:var(--gl-font-weight-medium);color:var(--gl-color-text-muted);cursor:pointer;transition:var(--gl-transition-fast);outline:0}.glass-modal__action:hover{background:var(--gl-surface-1)}.glass-modal__action+.glass-modal__action{border-left:1px solid var(--gl-border-subtle)}.glass-modal__action--primary{color:var(--gl-color-primary);font-weight:var(--gl-font-weight-semibold)}.glass-modal__action--danger{color:var(--gl-color-error);font-weight:var(--gl-font-weight-semibold)}.glass-toast{position:fixed;top:var(--gl-space-4xl);left:50%;transform:translateX(-50%) translateY(-20px);min-width:280px;max-width:340px;padding:var(--gl-space-md) var(--gl-space-lg);background:linear-gradient(to bottom,var(--gl-surface-4) 0,var(--gl-surface-2) 100%);backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));border:1px solid var(--gl-border-medium);border-radius:var(--gl-radius-btn);display:flex;align-items:center;gap:var(--gl-space-sm);box-shadow:var(--gl-shadow-toast),var(--gl-inset-medium);z-index:1100;opacity:0;pointer-events:none;transition:var(--gl-transition-modal);font-family:var(--gl-font-family);-webkit-font-smoothing:antialiased}.glass-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}.glass-toast__icon{width:22px;height:22px;flex-shrink:0;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.glass-toast--success .glass-toast__icon{stroke:var(--gl-color-success)}.glass-toast--error .glass-toast__icon{stroke:var(--gl-color-error)}.glass-toast--warning .glass-toast__icon{stroke:var(--gl-color-warning)}.glass-toast__text{font-size:var(--gl-font-size-sm);font-weight:var(--gl-font-weight-medium);color:var(--gl-color-text);line-height:1.4}.glass-tab-bar{position:fixed;bottom:0;left:0;right:0;height:var(--gl-tab-bar-height);background:linear-gradient(to bottom,var(--gl-surface-3) 0,var(--gl-surface-1) 100%);backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));border-top:1px solid var(--gl-border-subtle);display:flex;justify-content:space-around;align-items:flex-start;padding-top:var(--gl-space-xs);padding-bottom:env(safe-area-inset-bottom,8px);z-index:900;box-shadow:0 -4px 20px rgba(0,0,0,.08),var(--gl-inset-subtle)}.glass-tab-bar__item{display:flex;flex-direction:column;align-items:center;gap:var(--gl-space-2xs);padding:var(--gl-space-2xs) var(--gl-space-sm);background:0 0;border:none;cursor:pointer;transition:var(--gl-transition);outline:0;-webkit-tap-highlight-color:transparent;min-width:60px}.glass-tab-bar__icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;position:relative}.glass-tab-bar__icon svg{width:24px;height:24px;fill:none;stroke:var(--gl-icon-muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:var(--gl-transition)}.glass-tab-bar__label{font-size:10px;font-weight:var(--gl-font-weight-medium);color:var(--gl-icon-muted);transition:var(--gl-transition);letter-spacing:.2px}.glass-tab-bar__item.is-active .glass-tab-bar__icon svg{stroke:var(--gl-color-primary);filter:drop-shadow(0 0 6px rgba(245,166,35,.35))}.glass-tab-bar__item.is-active .glass-tab-bar__label{color:var(--gl-color-primary)}.glass-tab-bar__item.is-active .glass-tab-bar__icon::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:var(--gl-radius-pill);background:var(--gl-color-primary);box-shadow:0 0 6px rgba(245,166,35,.5)}.glass-tab-bar__item:not(.is-active):hover .glass-tab-bar__icon svg{stroke:var(--gl-icon-default)}.glass-tab-bar__item:not(.is-active):hover .glass-tab-bar__label{color:var(--gl-icon-default)}.glass-tab-bar__badge{position:absolute;top:-4px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--gl-radius-full);background:var(--gl-color-error);color:#fff;font-size:10px;font-weight:var(--gl-font-weight-semibold);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(255,59,48,.4)}.glass-accordion{display:flex;flex-direction:column;gap:var(--gl-space-xs)}.glass-accordion__item{background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-light));-webkit-backdrop-filter:blur(var(--gl-blur-light));border:1px solid var(--gl-border-subtle);border-radius:var(--gl-radius-btn);overflow:hidden;transition:var(--gl-transition);box-shadow:var(--gl-inset-subtle)}.glass-accordion__item.is-open{background:var(--gl-surface-3);border-color:var(--gl-border-medium);box-shadow:0 4px 16px rgba(0,0,0,.1),var(--gl-inset-medium)}.glass-accordion__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--gl-space-sm);padding:var(--gl-space-md) var(--gl-space-lg);background:0 0;border:none;cursor:pointer;font-family:var(--gl-font-family);font-size:var(--gl-font-size-base);font-weight:var(--gl-font-weight-semibold);color:var(--gl-color-text);text-align:left;outline:0;transition:var(--gl-transition);-webkit-tap-highlight-color:transparent}.glass-accordion__trigger:hover{color:var(--gl-color-primary)}.glass-accordion__trigger-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.glass-accordion__trigger-icon svg{width:18px;height:18px;fill:none;stroke:var(--gl-icon-default);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.glass-accordion__item.is-open .glass-accordion__trigger-icon svg{transform:rotate(180deg);stroke:var(--gl-color-primary)}.glass-accordion__content{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4, 0, .2, 1)}.glass-accordion__item.is-open .glass-accordion__content{max-height:500px}.glass-accordion__body{padding:0 var(--gl-space-lg) var(--gl-space-lg);color:var(--gl-accordion-body-color);font-size:var(--gl-font-size-sm);line-height:1.6}.glass-badge{display:inline-flex;align-items:center;gap:var(--gl-space-2xs);padding:var(--gl-space-2xs) var(--gl-space-sm);background:var(--gl-surface-3);backdrop-filter:blur(var(--gl-blur-soft));-webkit-backdrop-filter:blur(var(--gl-blur-soft));border:1px solid var(--gl-border-subtle);border-radius:var(--gl-radius-full);font-size:var(--gl-font-size-xs);font-weight:var(--gl-font-weight-medium);color:var(--gl-color-text);box-shadow:var(--gl-inset-subtle)}.glass-badge--primary{background:linear-gradient(135deg,rgba(245,166,35,.25) 0,rgba(212,105,42,.2) 100%);border-color:var(--gl-border-warm);color:var(--gl-color-primary)}.glass-badge--success{background:rgba(52,199,89,.15);border-color:rgba(52,199,89,.3);color:var(--gl-color-success)}.glass-badge--error{background:rgba(255,59,48,.15);border-color:rgba(255,59,48,.3);color:var(--gl-color-error)}.glass-divider{height:1px;border:none;background:linear-gradient(90deg,transparent 0,var(--gl-border-subtle) 20%,var(--gl-border-medium) 50%,var(--gl-border-subtle) 80%,transparent 100%)}.glass-avatar{width:44px;height:44px;border-radius:var(--gl-radius-pill);background:var(--gl-surface-3);backdrop-filter:blur(var(--gl-blur-soft));-webkit-backdrop-filter:blur(var(--gl-blur-soft));border:1.5px solid var(--gl-border-strong);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--gl-shadow-glow),var(--gl-inset-medium);flex-shrink:0;font-size:var(--gl-font-size-btn);font-weight:var(--gl-font-weight-semibold);color:var(--gl-color-text)}.glass-avatar img{width:100%;height:100%;object-fit:cover}.glass-avatar--sm{width:32px;height:32px;font-size:var(--gl-font-size-xs)}.glass-avatar--lg{width:56px;height:56px;font-size:var(--gl-font-size-lg)}.glass-theme-toggle{width:46px;height:46px;border-radius:var(--gl-radius-pill);background:var(--gl-surface-3);backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));border:1.5px solid var(--gl-border-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--gl-transition);box-shadow:var(--gl-shadow-glow),var(--gl-inset-medium);outline:0;-webkit-tap-highlight-color:transparent}.glass-theme-toggle:hover{background:var(--gl-surface-5);transform:scale(1.05)}.glass-theme-toggle:active{transform:scale(.95)}.glass-theme-toggle svg{width:20px;height:20px;fill:none;stroke:var(--gl-color-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.glass-theme-toggle .icon-sun{display:none}.glass-theme-toggle .icon-moon,[data-theme=light] .glass-theme-toggle .icon-sun{display:block}[data-theme=light] .glass-theme-toggle .icon-moon{display:none}.gl-stack{display:flex;flex-direction:column}.gl-row{display:flex;flex-direction:row;align-items:center}.gl-stack--2xs{gap:var(--gl-space-2xs)}.gl-stack--xs{gap:var(--gl-space-xs)}.gl-stack--sm{gap:var(--gl-space-sm)}.gl-stack--md{gap:var(--gl-space-md)}.gl-stack--lg{gap:var(--gl-space-lg)}.gl-stack--xl{gap:var(--gl-space-xl)}.gl-row--xs{gap:var(--gl-space-xs)}.gl-row--sm{gap:var(--gl-space-sm)}.gl-row--md{gap:var(--gl-space-md)}.gl-text-center{text-align:center}.gl-text-muted{color:var(--gl-color-text-muted)}.gl-text-sm{font-size:var(--gl-font-size-sm)}.gl-mt-sm{margin-top:var(--gl-space-sm)}.gl-mt-md{margin-top:var(--gl-space-md)}.gl-mt-lg{margin-top:var(--gl-space-lg)}.gl-mt-xl{margin-top:var(--gl-space-xl)}.gl-mb-sm{margin-bottom:var(--gl-space-sm)}.gl-mb-md{margin-bottom:var(--gl-space-md)}.gl-mb-lg{margin-bottom:var(--gl-space-lg)}.gl-mb-xl{margin-bottom:var(--gl-space-xl)}.gl-px{padding-left:var(--gl-space-lg);padding-right:var(--gl-space-lg)}.gl-w-full{width:100%}.gl-flex-1{flex:1}\n/*# sourceMappingURL=glasskit.min.css.map */";
+
+const glassSheet = new CSSStyleSheet();
+glassSheet.replaceSync(css);
+
+// ── Global Theme Sync ──
+// Single MutationObserver that watches data-theme on <html>
+// and notifies all GlkElement instances.
+
+const instances = new Set();
+
+function getCurrentTheme() {
+  return document.documentElement.getAttribute('data-theme') || 'dark';
+}
+
+function syncAllThemes() {
+  const theme = getCurrentTheme();
+  for (const instance of instances) {
+    instance._syncTheme(theme);
+  }
+}
+
+if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
+  const observer = new MutationObserver(syncAllThemes);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme']
+  });
+}
+
+// ── Host Stylesheet ──
+// Sets display:block on all custom elements by default.
+// Inline components (badge, avatar) override this.
+
+const hostSheet = new CSSStyleSheet();
+hostSheet.replaceSync(`
+  :host { display: block; }
+  :host([hidden]) { display: none; }
+  .glk-wrapper { display: contents; }
+`);
+
+const inlineHostSheet = new CSSStyleSheet();
+inlineHostSheet.replaceSync(`
+  :host { display: inline-block; }
+  :host([hidden]) { display: none; }
+  .glk-wrapper { display: contents; }
+`);
+
+// ── Base Class ──
+
+class GlkElement extends HTMLElement {
+
+  /** Override in subclass to use inline-block display */
+  static get displayInline() { return false; }
+
+  static get observedAttributes() {
+    return [];
+  }
+
+  constructor() {
+    super();
+    this._initialized = false;
+    this._shadow = this.attachShadow({ mode: 'open' });
+    const displaySheet = this.constructor.displayInline ? inlineHostSheet : hostSheet;
+    this._shadow.adoptedStyleSheets = [glassSheet, displaySheet];
+  }
+
+  connectedCallback() {
+    if (!this._initialized) {
+      this._initialized = true;
+
+      // Create theme wrapper (display:contents makes it layout-transparent)
+      this._wrapper = document.createElement('div');
+      this._wrapper.className = 'glk-wrapper';
+      this._wrapper.setAttribute('data-theme', getCurrentTheme());
+      this._shadow.appendChild(this._wrapper);
+
+      this.render();
+      this.setupEvents();
+
+      // Register for theme sync
+      instances.add(this);
+    }
+  }
+
+  disconnectedCallback() {
+    instances.delete(this);
+    this.teardownEvents();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this._initialized) return;
+    if (oldValue === newValue) return;
+    this.onAttributeChanged(name, oldValue, newValue);
+  }
+
+  _syncTheme(theme) {
+    if (this._wrapper) {
+      this._wrapper.setAttribute('data-theme', theme);
+    }
+  }
+
+  /** Subclasses override to build inner DOM inside this._wrapper. */
+  render() {}
+
+  /** Subclasses override to attach event listeners. */
+  setupEvents() {}
+
+  /** Subclasses override to remove event listeners. */
+  teardownEvents() {}
+
+  /** Subclasses override to react to attribute changes. */
+  onAttributeChanged(name, oldValue, newValue) {}
+
+  // ── Utility Methods ──
+
+  getBoolAttr(name) {
+    return this.hasAttribute(name);
+  }
+
+  setBoolAttr(name, value) {
+    if (value) {
+      this.setAttribute(name, '');
+    } else {
+      this.removeAttribute(name);
+    }
+  }
+
+  createElement(tag, classes = [], attrs = {}) {
+    const el = document.createElement(tag);
+    if (classes.length) el.classList.add(...classes);
+    for (const [key, val] of Object.entries(attrs)) {
+      el.setAttribute(key, val);
+    }
+    return el;
+  }
+
+  emit(eventName, detail = null) {
+    this.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      composed: true,
+      detail
+    }));
+  }
+}
+
+// ── Form-Associated Base Class ──
+
+class GlkFormElement extends GlkElement {
+
+  static formAssociated = true;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  get form() { return this._internals.form; }
+  get validationMessage() { return this._internals.validationMessage; }
+  get validity() { return this._internals.validity; }
+
+  checkValidity() { return this._internals.checkValidity(); }
+  reportValidity() { return this._internals.reportValidity(); }
+
+  formResetCallback() {
+    this.resetValue();
+  }
+
+  formStateRestoreCallback(state, mode) {
+    this.restoreValue(state);
+  }
+
+  /** Subclasses override. */
+  resetValue() {}
+  restoreValue(state) {}
+
+  setFormValue(value) {
+    this._internals.setFormValue(value);
+  }
+
+  setValidity(flags, message, anchor) {
+    this._internals.setValidity(flags, message, anchor);
+  }
+}
+
+class GlkNav extends GlkElement {
+  render() {
+    const nav = this.createElement('nav', ['glass-nav']);
+    nav.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(nav);
+  }
+}
+
+customElements.define('glk-nav', GlkNav);
+
+class GlkPill extends GlkElement {
+  static get observedAttributes() {
+    return ['label', 'disabled'];
+  }
+
+  render() {
+    this._btn = this.createElement('button', ['glass-pill']);
+
+    if (this.getBoolAttr('disabled')) this._btn.disabled = true;
+
+    const ariaLabel = this.getAttribute('label');
+    if (ariaLabel) this._btn.setAttribute('aria-label', ariaLabel);
+
+    // Slotted content (SVG icons, text)
+    this._btn.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._btn);
+  }
+
+  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;
+    }
+  }
+}
+
+customElements.define('glk-pill', GlkPill);
+
+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);
+
+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);
+
+class GlkCard extends GlkElement {
+  static get observedAttributes() {
+    return ['glow'];
+  }
+
+  render() {
+    this._card = this.createElement('div', this._computeClasses());
+    this._card.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._card);
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'glow' && this._card) {
+      this._card.className = this._computeClasses().join(' ');
+    }
+  }
+
+  _computeClasses() {
+    const classes = ['glass-card'];
+    if (this.getBoolAttr('glow')) {
+      classes.push('glass-card--glow');
+    }
+    return classes;
+  }
+
+  get glow() { return this.getBoolAttr('glow'); }
+  set glow(v) { this.setBoolAttr('glow', v); }
+}
+
+customElements.define('glk-card', GlkCard);
+
+const VARIANTS$3 = ['primary', 'success', 'error'];
+
+class GlkBadge extends GlkElement {
+  static get displayInline() { return true; }
+  static get observedAttributes() {
+    return ['variant'];
+  }
+
+  render() {
+    this._badge = this.createElement('span', this._computeClasses());
+    this._badge.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._badge);
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'variant' && this._badge) {
+      this._badge.className = this._computeClasses().join(' ');
+    }
+  }
+
+  _computeClasses() {
+    const classes = ['glass-badge'];
+    const variant = this.getAttribute('variant');
+    if (variant && VARIANTS$3.includes(variant)) {
+      classes.push(`glass-badge--${variant}`);
+    }
+    return classes;
+  }
+
+  get variant() { return this.getAttribute('variant'); }
+  set variant(v) { this.setAttribute('variant', v); }
+}
+
+customElements.define('glk-badge', GlkBadge);
+
+const SIZES$2 = ['sm', 'lg'];
+
+class GlkAvatar extends GlkElement {
+  static get displayInline() { return true; }
+  static get observedAttributes() {
+    return ['size', 'src', 'alt'];
+  }
+
+  render() {
+    this._avatar = this.createElement('div', this._computeClasses());
+    this._updateContent();
+    this._wrapper.appendChild(this._avatar);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._avatar) return;
+    if (name === 'size') {
+      this._avatar.className = this._computeClasses().join(' ');
+    } else if (name === 'src' || name === 'alt') {
+      this._updateContent();
+    }
+  }
+
+  _updateContent() {
+    const src = this.getAttribute('src');
+    this._avatar.innerHTML = '';
+    if (src) {
+      const img = this.createElement('img', [], {
+        src,
+        alt: this.getAttribute('alt') || ''
+      });
+      this._avatar.appendChild(img);
+    } else {
+      // Use slotted text content (initials)
+      this._avatar.appendChild(document.createElement('slot'));
+    }
+  }
+
+  _computeClasses() {
+    const classes = ['glass-avatar'];
+    const size = this.getAttribute('size');
+    if (size && SIZES$2.includes(size)) {
+      classes.push(`glass-avatar--${size}`);
+    }
+    return classes;
+  }
+
+  get size() { return this.getAttribute('size'); }
+  set size(v) { this.setAttribute('size', v); }
+
+  get src() { return this.getAttribute('src'); }
+  set src(v) { this.setAttribute('src', v); }
+}
+
+customElements.define('glk-avatar', GlkAvatar);
+
+class GlkTitle extends GlkElement {
+  static get observedAttributes() {
+    return [];
+  }
+
+  render() {
+    const el = this.createElement('div', ['glass-title']);
+    el.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(el);
+  }
+}
+
+customElements.define('glk-title', GlkTitle);
+
+class GlkDivider extends GlkElement {
+  render() {
+    const hr = this.createElement('div', ['glass-divider']);
+    this._wrapper.appendChild(hr);
+  }
+}
+
+customElements.define('glk-divider', GlkDivider);
+
+class GlkStatus extends GlkElement {
+  static get observedAttributes() {
+    return ['message'];
+  }
+
+  render() {
+    this._container = this.createElement('div', ['glass-status']);
+
+    // Icon via slot
+    this._iconSlot = this.createElement('span', []);
+    this._iconSlot.appendChild(this.createElement('slot', [], { name: 'icon' }));
+
+    // Message
+    this._messageEl = this.createElement('p', []);
+    this._messageEl.textContent = this.getAttribute('message') || '';
+
+    this._container.appendChild(this._iconSlot);
+    this._container.appendChild(this._messageEl);
+    this._wrapper.appendChild(this._container);
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'message' && this._messageEl) {
+      this._messageEl.textContent = this.getAttribute('message') || '';
+    }
+  }
+
+  get message() { return this.getAttribute('message'); }
+  set message(v) { this.setAttribute('message', v); }
+}
+
+customElements.define('glk-status', GlkStatus);
+
+const VARIANTS$2 = ['primary', 'secondary', 'tertiary'];
+const SIZES$1 = ['sm', 'md', 'lg', 'auto'];
+
+class GlkButton extends GlkElement {
+  static get observedAttributes() {
+    return ['variant', 'size', 'disabled', 'type'];
+  }
+
+  render() {
+    this._btn = this.createElement('button', this._computeClasses(), {
+      type: this.getAttribute('type') || 'button'
+    });
+
+    if (this.getBoolAttr('disabled')) {
+      this._btn.disabled = true;
+    }
+
+    this._btn.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._btn);
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      if (this.getBoolAttr('disabled')) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      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 'variant':
+      case 'size':
+        this._btn.className = this._computeClasses().join(' ');
+        break;
+      case 'disabled':
+        this._btn.disabled = this.getBoolAttr('disabled');
+        break;
+      case 'type':
+        this._btn.setAttribute('type', this.getAttribute('type') || 'button');
+        break;
+    }
+  }
+
+  _computeClasses() {
+    const classes = ['glass-btn'];
+    const variant = this.getAttribute('variant');
+    if (variant && VARIANTS$2.includes(variant)) {
+      classes.push(`glass-btn--${variant}`);
+    }
+    const size = this.getAttribute('size');
+    if (size && SIZES$1.includes(size)) {
+      classes.push(`glass-btn--${size}`);
+    }
+    return classes;
+  }
+
+  get variant() { return this.getAttribute('variant'); }
+  set variant(v) { this.setAttribute('variant', v); }
+
+  get size() { return this.getAttribute('size'); }
+  set size(v) { this.setAttribute('size', v); }
+
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+}
+
+customElements.define('glk-button', GlkButton);
+
+class GlkInput extends GlkFormElement {
+  static get observedAttributes() {
+    return ['label', 'type', 'placeholder', 'error', 'hint', 'disabled', 'name', 'value', 'required'];
+  }
+
+  render() {
+    const group = this.createElement('div', ['glass-input-group']);
+
+    // Label
+    this._labelEl = this.createElement('label', ['glass-label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    // Input
+    this._input = this.createElement('input', this._computeInputClasses(), {
+      type: this.getAttribute('type') || 'text'
+    });
+
+    const placeholder = this.getAttribute('placeholder');
+    if (placeholder) this._input.setAttribute('placeholder', placeholder);
+
+    const name = this.getAttribute('name');
+    if (name) this._input.setAttribute('name', name);
+
+    const value = this.getAttribute('value');
+    if (value) this._input.value = value;
+
+    if (this.getBoolAttr('disabled')) this._input.disabled = true;
+    if (this.getBoolAttr('required')) this._input.required = true;
+
+    // Hint
+    this._hintEl = this.createElement('span', this._computeHintClasses());
+    this._hintEl.textContent = this.getAttribute('hint') || '';
+
+    group.appendChild(this._labelEl);
+    group.appendChild(this._input);
+    if (this.getAttribute('hint')) group.appendChild(this._hintEl);
+
+    this._group = group;
+    this._wrapper.appendChild(group);
+
+    this._syncFormValue();
+  }
+
+  setupEvents() {
+    this._onInput = () => {
+      this._syncFormValue();
+      this.emit('glk-input', { value: this._input.value });
+      this.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    this._onChangeNative = () => {
+      this.emit('glk-change', { value: this._input.value });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._input.addEventListener('input', this._onInput);
+    this._input.addEventListener('change', this._onChangeNative);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('input', this._onInput);
+    this._input?.removeEventListener('change', this._onChangeNative);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._input) return;
+    switch (name) {
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'type':
+        this._input.setAttribute('type', this.getAttribute('type') || 'text');
+        break;
+      case 'placeholder':
+        this._input.setAttribute('placeholder', this.getAttribute('placeholder') || '');
+        break;
+      case 'error':
+        this._input.className = this._computeInputClasses().join(' ');
+        this._hintEl.className = this._computeHintClasses().join(' ');
+        break;
+      case 'hint':
+        this._hintEl.textContent = this.getAttribute('hint') || '';
+        if (this.getAttribute('hint') && !this._hintEl.parentNode) {
+          this._group.appendChild(this._hintEl);
+        }
+        break;
+      case 'disabled':
+        this._input.disabled = this.getBoolAttr('disabled');
+        break;
+      case 'name':
+        this._input.setAttribute('name', this.getAttribute('name') || '');
+        break;
+      case 'value':
+        this._input.value = this.getAttribute('value') || '';
+        this._syncFormValue();
+        break;
+      case 'required':
+        this._input.required = this.getBoolAttr('required');
+        break;
+    }
+  }
+
+  _computeInputClasses() {
+    const classes = ['glass-input'];
+    if (this.getBoolAttr('error')) classes.push('glass-input--error');
+    return classes;
+  }
+
+  _computeHintClasses() {
+    const classes = ['glass-hint'];
+    if (this.getBoolAttr('error')) classes.push('glass-hint--error');
+    return classes;
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._input.value);
+  }
+
+  resetValue() {
+    this._input.value = this.getAttribute('value') || '';
+    this._syncFormValue();
+  }
+
+  get value() { return this._input?.value ?? ''; }
+  set value(v) {
+    if (this._input) this._input.value = v;
+    this._syncFormValue();
+  }
+
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+}
+
+customElements.define('glk-input', GlkInput);
+
+class GlkTextarea extends GlkFormElement {
+  static get observedAttributes() {
+    return ['label', 'placeholder', 'rows', 'disabled', 'name', 'value', 'required'];
+  }
+
+  render() {
+    const group = this.createElement('div', ['glass-input-group']);
+
+    this._labelEl = this.createElement('label', ['glass-label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    this._textarea = this.createElement('textarea', ['glass-textarea']);
+    const placeholder = this.getAttribute('placeholder');
+    if (placeholder) this._textarea.setAttribute('placeholder', placeholder);
+
+    const rows = this.getAttribute('rows');
+    if (rows) this._textarea.setAttribute('rows', rows);
+
+    const name = this.getAttribute('name');
+    if (name) this._textarea.setAttribute('name', name);
+
+    const value = this.getAttribute('value');
+    if (value) this._textarea.value = value;
+
+    if (this.getBoolAttr('disabled')) this._textarea.disabled = true;
+    if (this.getBoolAttr('required')) this._textarea.required = true;
+
+    group.appendChild(this._labelEl);
+    group.appendChild(this._textarea);
+
+    this._wrapper.appendChild(group);
+    this._syncFormValue();
+  }
+
+  setupEvents() {
+    this._onInput = () => {
+      this._syncFormValue();
+      this.emit('glk-input', { value: this._textarea.value });
+      this.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    this._textarea.addEventListener('input', this._onInput);
+  }
+
+  teardownEvents() {
+    this._textarea?.removeEventListener('input', this._onInput);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._textarea) return;
+    switch (name) {
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'placeholder':
+        this._textarea.setAttribute('placeholder', this.getAttribute('placeholder') || '');
+        break;
+      case 'rows':
+        this._textarea.setAttribute('rows', this.getAttribute('rows') || '');
+        break;
+      case 'disabled':
+        this._textarea.disabled = this.getBoolAttr('disabled');
+        break;
+      case 'name':
+        this._textarea.setAttribute('name', this.getAttribute('name') || '');
+        break;
+      case 'value':
+        this._textarea.value = this.getAttribute('value') || '';
+        this._syncFormValue();
+        break;
+    }
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._textarea.value);
+  }
+
+  resetValue() {
+    this._textarea.value = this.getAttribute('value') || '';
+    this._syncFormValue();
+  }
+
+  get value() { return this._textarea?.value ?? ''; }
+  set value(v) {
+    if (this._textarea) this._textarea.value = v;
+    this._syncFormValue();
+  }
+
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+}
+
+customElements.define('glk-textarea', GlkTextarea);
+
+class GlkSelect extends GlkFormElement {
+  static get observedAttributes() {
+    return ['label', 'disabled', 'name', 'value', 'required'];
+  }
+
+  render() {
+    const group = this.createElement('div', ['glass-input-group']);
+
+    this._labelEl = this.createElement('label', ['glass-label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    this._select = this.createElement('select', ['glass-select']);
+
+    const name = this.getAttribute('name');
+    if (name) this._select.setAttribute('name', name);
+
+    if (this.getBoolAttr('disabled')) this._select.disabled = true;
+    if (this.getBoolAttr('required')) this._select.required = true;
+
+    // Move slotted <option> elements into the shadow select
+    this._moveOptions();
+
+    group.appendChild(this._labelEl);
+    group.appendChild(this._select);
+
+    this._wrapper.appendChild(group);
+
+    const value = this.getAttribute('value');
+    if (value) this._select.value = value;
+
+    this._syncFormValue();
+  }
+
+  _moveOptions() {
+    // Copy <option> children from the light DOM into the shadow <select>
+    const options = this.querySelectorAll('option');
+    options.forEach(opt => {
+      this._select.appendChild(opt.cloneNode(true));
+    });
+  }
+
+  setupEvents() {
+    this._onChange = () => {
+      this._syncFormValue();
+      this.emit('glk-change', { value: this._select.value });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._select.addEventListener('change', this._onChange);
+  }
+
+  teardownEvents() {
+    this._select?.removeEventListener('change', this._onChange);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._select) return;
+    switch (name) {
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'disabled':
+        this._select.disabled = this.getBoolAttr('disabled');
+        break;
+      case 'name':
+        this._select.setAttribute('name', this.getAttribute('name') || '');
+        break;
+      case 'value':
+        this._select.value = this.getAttribute('value') || '';
+        this._syncFormValue();
+        break;
+    }
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._select.value);
+  }
+
+  resetValue() {
+    this._select.selectedIndex = 0;
+    this._syncFormValue();
+  }
+
+  get value() { return this._select?.value ?? ''; }
+  set value(v) {
+    if (this._select) this._select.value = v;
+    this._syncFormValue();
+  }
+
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+}
+
+customElements.define('glk-select', GlkSelect);
+
+const SEARCH_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`;
+
+class GlkSearch extends GlkFormElement {
+  static get observedAttributes() {
+    return ['placeholder', 'name', 'value', 'disabled'];
+  }
+
+  render() {
+    const container = this.createElement('div', ['glass-search']);
+
+    const icon = this.createElement('span', ['glass-search__icon']);
+    icon.innerHTML = SEARCH_SVG;
+
+    this._input = this.createElement('input', ['glass-input'], {
+      type: 'search'
+    });
+
+    const placeholder = this.getAttribute('placeholder');
+    if (placeholder) this._input.setAttribute('placeholder', placeholder);
+
+    const name = this.getAttribute('name');
+    if (name) this._input.setAttribute('name', name);
+
+    const value = this.getAttribute('value');
+    if (value) this._input.value = value;
+
+    if (this.getBoolAttr('disabled')) this._input.disabled = true;
+
+    container.appendChild(icon);
+    container.appendChild(this._input);
+
+    this._wrapper.appendChild(container);
+    this._syncFormValue();
+  }
+
+  setupEvents() {
+    this._onInput = () => {
+      this._syncFormValue();
+      this.emit('glk-input', { value: this._input.value });
+      this.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    this._input.addEventListener('input', this._onInput);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('input', this._onInput);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._input) return;
+    switch (name) {
+      case 'placeholder':
+        this._input.setAttribute('placeholder', this.getAttribute('placeholder') || '');
+        break;
+      case 'name':
+        this._input.setAttribute('name', this.getAttribute('name') || '');
+        break;
+      case 'value':
+        this._input.value = this.getAttribute('value') || '';
+        this._syncFormValue();
+        break;
+      case 'disabled':
+        this._input.disabled = this.getBoolAttr('disabled');
+        break;
+    }
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._input.value);
+  }
+
+  resetValue() {
+    this._input.value = this.getAttribute('value') || '';
+    this._syncFormValue();
+  }
+
+  get value() { return this._input?.value ?? ''; }
+  set value(v) {
+    if (this._input) this._input.value = v;
+    this._syncFormValue();
+  }
+}
+
+customElements.define('glk-search', GlkSearch);
+
+class GlkToggle extends GlkFormElement {
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'label', 'name', 'value'];
+  }
+
+  render() {
+    const label = this.createElement('label', ['glass-toggle']);
+
+    this._input = this.createElement('input', ['glass-toggle__input'], {
+      type: 'checkbox'
+    });
+
+    const name = this.getAttribute('name');
+    if (name) this._input.setAttribute('name', name);
+
+    const track = this.createElement('span', ['glass-toggle__track']);
+    const thumb = this.createElement('span', ['glass-toggle__thumb']);
+    track.appendChild(thumb);
+
+    this._labelEl = this.createElement('span', ['glass-toggle__label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    label.appendChild(this._input);
+    label.appendChild(track);
+    label.appendChild(this._labelEl);
+
+    if (this.getBoolAttr('checked')) this._input.checked = true;
+    if (this.getBoolAttr('disabled')) this._input.disabled = true;
+
+    this._defaultChecked = this.getBoolAttr('checked');
+    this._wrapper.appendChild(label);
+
+    this._syncFormValue();
+    this.setAttribute('role', 'switch');
+    this.setAttribute('aria-checked', String(this._input.checked));
+    if (this.getBoolAttr('disabled')) this.setAttribute('aria-disabled', 'true');
+  }
+
+  setupEvents() {
+    this._onChange = () => {
+      this._syncing = true;
+      this.setBoolAttr('checked', this._input.checked);
+      this._syncing = false;
+      this.setAttribute('aria-checked', String(this._input.checked));
+      this._syncFormValue();
+      this.emit('glk-change', { checked: this._input.checked });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._input.addEventListener('change', this._onChange);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('change', this._onChange);
+  }
+
+  onAttributeChanged(name) {
+    if (this._syncing) return;
+    if (!this._input) return;
+    switch (name) {
+      case 'checked':
+        this._input.checked = this.getBoolAttr('checked');
+        this.setAttribute('aria-checked', String(this._input.checked));
+        this._syncFormValue();
+        break;
+      case 'disabled':
+        this._input.disabled = this.getBoolAttr('disabled');
+        this.setAttribute('aria-disabled', String(this.getBoolAttr('disabled')));
+        break;
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'name':
+        this._input.setAttribute('name', this.getAttribute('name') || '');
+        break;
+    }
+  }
+
+  _syncFormValue() {
+    const val = this.getAttribute('value') || 'on';
+    this.setFormValue(this._input.checked ? val : null);
+  }
+
+  resetValue() {
+    this._input.checked = this._defaultChecked;
+    this.setBoolAttr('checked', this._defaultChecked);
+    this.setAttribute('aria-checked', String(this._defaultChecked));
+    this._syncFormValue();
+  }
+
+  restoreValue(state) {
+    if (state) {
+      this._input.checked = true;
+      this.setBoolAttr('checked', true);
+    }
+  }
+
+  get checked() { return this._input?.checked ?? false; }
+  set checked(v) {
+    if (this._input) this._input.checked = v;
+    this.setBoolAttr('checked', v);
+    this.setAttribute('aria-checked', String(v));
+    this._syncFormValue();
+  }
+
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+
+  get value() { return this.getAttribute('value') || 'on'; }
+  set value(v) { this.setAttribute('value', v); }
+
+  get label() { return this.getAttribute('label'); }
+  set label(v) { this.setAttribute('label', v); }
+}
+
+customElements.define('glk-toggle', GlkToggle);
+
+const CHECKMARK_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
+
+class GlkCheckbox extends GlkFormElement {
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'label', 'name', 'value'];
+  }
+
+  render() {
+    const label = this.createElement('label', ['glass-checkbox']);
+
+    this._input = this.createElement('input', ['glass-checkbox__input'], {
+      type: 'checkbox'
+    });
+
+    const name = this.getAttribute('name');
+    if (name) this._input.setAttribute('name', name);
+
+    const box = this.createElement('span', ['glass-checkbox__box']);
+    box.innerHTML = CHECKMARK_SVG;
+
+    this._labelEl = this.createElement('span', ['glass-checkbox__label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    label.appendChild(this._input);
+    label.appendChild(box);
+    label.appendChild(this._labelEl);
+
+    if (this.getBoolAttr('checked')) this._input.checked = true;
+    if (this.getBoolAttr('disabled')) this._input.disabled = true;
+
+    this._defaultChecked = this.getBoolAttr('checked');
+    this._wrapper.appendChild(label);
+    this._syncFormValue();
+  }
+
+  setupEvents() {
+    this._onChange = () => {
+      this._syncing = true;
+      this.setBoolAttr('checked', this._input.checked);
+      this._syncing = false;
+      this._syncFormValue();
+      this.emit('glk-change', { checked: this._input.checked });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._input.addEventListener('change', this._onChange);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('change', this._onChange);
+  }
+
+  onAttributeChanged(name) {
+    if (this._syncing) return;
+    if (!this._input) return;
+    switch (name) {
+      case 'checked':
+        this._input.checked = this.getBoolAttr('checked');
+        this._syncFormValue();
+        break;
+      case 'disabled':
+        this._input.disabled = this.getBoolAttr('disabled');
+        break;
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'name':
+        this._input.setAttribute('name', this.getAttribute('name') || '');
+        break;
+    }
+  }
+
+  _syncFormValue() {
+    const val = this.getAttribute('value') || 'on';
+    this.setFormValue(this._input.checked ? val : null);
+  }
+
+  resetValue() {
+    this._input.checked = this._defaultChecked;
+    this.setBoolAttr('checked', this._defaultChecked);
+    this._syncFormValue();
+  }
+
+  get checked() { return this._input?.checked ?? false; }
+  set checked(v) {
+    if (this._input) this._input.checked = v;
+    this.setBoolAttr('checked', v);
+    this._syncFormValue();
+  }
+
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+
+  get value() { return this.getAttribute('value') || 'on'; }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('glk-checkbox', GlkCheckbox);
+
+class GlkRadio extends GlkFormElement {
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'label', 'name', 'value'];
+  }
+
+  render() {
+    const label = this.createElement('label', ['glass-radio']);
+
+    this._input = this.createElement('input', ['glass-radio__input'], {
+      type: 'radio'
+    });
+
+    const name = this.getAttribute('name');
+    if (name) this._input.setAttribute('name', name);
+
+    const val = this.getAttribute('value');
+    if (val) this._input.setAttribute('value', val);
+
+    const circle = this.createElement('span', ['glass-radio__circle']);
+    const dot = this.createElement('span', ['glass-radio__dot']);
+    circle.appendChild(dot);
+
+    this._labelEl = this.createElement('span', ['glass-radio__label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    label.appendChild(this._input);
+    label.appendChild(circle);
+    label.appendChild(this._labelEl);
+
+    if (this.getBoolAttr('checked')) this._input.checked = true;
+    if (this.getBoolAttr('disabled')) this._input.disabled = true;
+
+    this._defaultChecked = this.getBoolAttr('checked');
+    this._wrapper.appendChild(label);
+    this._syncFormValue();
+  }
+
+  setupEvents() {
+    this._onChange = () => {
+      this._syncing = true;
+      this.setBoolAttr('checked', this._input.checked);
+      this._syncing = false;
+      this._syncFormValue();
+      this.emit('glk-change', { checked: this._input.checked, value: this._input.value });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._input.addEventListener('change', this._onChange);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('change', this._onChange);
+  }
+
+  onAttributeChanged(name) {
+    if (this._syncing) return;
+    if (!this._input) return;
+    switch (name) {
+      case 'checked':
+        this._input.checked = this.getBoolAttr('checked');
+        this._syncFormValue();
+        break;
+      case 'disabled':
+        this._input.disabled = this.getBoolAttr('disabled');
+        break;
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'name':
+        this._input.setAttribute('name', this.getAttribute('name') || '');
+        break;
+      case 'value':
+        this._input.setAttribute('value', this.getAttribute('value') || '');
+        this._syncFormValue();
+        break;
+    }
+  }
+
+  _syncFormValue() {
+    const val = this.getAttribute('value') || '';
+    this.setFormValue(this._input.checked ? val : null);
+  }
+
+  resetValue() {
+    this._input.checked = this._defaultChecked;
+    this.setBoolAttr('checked', this._defaultChecked);
+    this._syncFormValue();
+  }
+
+  get checked() { return this._input?.checked ?? false; }
+  set checked(v) {
+    if (this._input) this._input.checked = v;
+    this.setBoolAttr('checked', v);
+    this._syncFormValue();
+  }
+
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+
+  get value() { return this.getAttribute('value'); }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('glk-radio', GlkRadio);
+
+class GlkRange extends GlkFormElement {
+  static get observedAttributes() {
+    return ['label', 'min', 'max', 'value', 'step', 'name', 'disabled'];
+  }
+
+  render() {
+    const group = this.createElement('div', ['glass-range-group']);
+
+    const header = this.createElement('div', ['glass-range-header']);
+
+    this._labelEl = this.createElement('label', []);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+
+    this._valueEl = this.createElement('span', ['glass-range-value']);
+
+    header.appendChild(this._labelEl);
+    header.appendChild(this._valueEl);
+
+    this._input = this.createElement('input', ['glass-range'], {
+      type: 'range',
+      min: this.getAttribute('min') || '0',
+      max: this.getAttribute('max') || '100',
+      value: this.getAttribute('value') || '50'
+    });
+
+    const step = this.getAttribute('step');
+    if (step) this._input.setAttribute('step', step);
+
+    const name = this.getAttribute('name');
+    if (name) this._input.setAttribute('name', name);
+
+    if (this.getBoolAttr('disabled')) this._input.disabled = true;
+
+    this._updateValueDisplay();
+
+    group.appendChild(header);
+    group.appendChild(this._input);
+
+    this._wrapper.appendChild(group);
+    this._defaultValue = this._input.value;
+    this._syncFormValue();
+  }
+
+  setupEvents() {
+    this._onInput = () => {
+      this._updateValueDisplay();
+      this._syncFormValue();
+      this.emit('glk-input', { value: this._input.value });
+      this.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    this._input.addEventListener('input', this._onInput);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('input', this._onInput);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._input) return;
+    switch (name) {
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'min':
+        this._input.min = this.getAttribute('min') || '0';
+        break;
+      case 'max':
+        this._input.max = this.getAttribute('max') || '100';
+        break;
+      case 'value':
+        this._input.value = this.getAttribute('value') || '50';
+        this._updateValueDisplay();
+        this._syncFormValue();
+        break;
+      case 'step':
+        this._input.step = this.getAttribute('step') || '';
+        break;
+      case 'name':
+        this._input.setAttribute('name', this.getAttribute('name') || '');
+        break;
+      case 'disabled':
+        this._input.disabled = this.getBoolAttr('disabled');
+        break;
+    }
+  }
+
+  _updateValueDisplay() {
+    this._valueEl.textContent = `${this._input.value}%`;
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._input.value);
+  }
+
+  resetValue() {
+    this._input.value = this._defaultValue;
+    this._updateValueDisplay();
+    this._syncFormValue();
+  }
+
+  get value() { return this._input?.value ?? ''; }
+  set value(v) {
+    if (this._input) this._input.value = v;
+    this._updateValueDisplay();
+    this._syncFormValue();
+  }
+}
+
+customElements.define('glk-range', GlkRange);
+
+const VARIANTS$1 = ['success', 'error'];
+const SIZES = ['sm', 'lg'];
+
+class GlkProgress extends GlkElement {
+  static get observedAttributes() {
+    return ['value', 'label', 'variant', 'size'];
+  }
+
+  render() {
+    this._container = this.createElement('div', this._computeClasses());
+
+    // Header
+    const header = this.createElement('div', ['glass-progress__header']);
+    this._labelEl = this.createElement('span', ['glass-progress__label']);
+    this._labelEl.textContent = this.getAttribute('label') || '';
+    this._valueEl = this.createElement('span', ['glass-progress__value']);
+
+    header.appendChild(this._labelEl);
+    header.appendChild(this._valueEl);
+
+    // Track
+    const track = this.createElement('div', ['glass-progress__track']);
+    this._fill = this.createElement('div', ['glass-progress__fill']);
+
+    track.appendChild(this._fill);
+
+    this._container.appendChild(header);
+    this._container.appendChild(track);
+
+    this._updateValue();
+
+    this._wrapper.appendChild(this._container);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._container) return;
+    switch (name) {
+      case 'value':
+        this._updateValue();
+        break;
+      case 'label':
+        this._labelEl.textContent = this.getAttribute('label') || '';
+        break;
+      case 'variant':
+      case 'size':
+        this._container.className = this._computeClasses().join(' ');
+        break;
+    }
+  }
+
+  _updateValue() {
+    const val = Math.min(100, Math.max(0, parseInt(this.getAttribute('value') || '0', 10)));
+    this._fill.style.width = `${val}%`;
+    this._valueEl.textContent = `${val}%`;
+  }
+
+  _computeClasses() {
+    const classes = ['glass-progress'];
+    const variant = this.getAttribute('variant');
+    if (variant && VARIANTS$1.includes(variant)) {
+      classes.push(`glass-progress--${variant}`);
+    }
+    const size = this.getAttribute('size');
+    if (size && SIZES.includes(size)) {
+      classes.push(`glass-progress--${size}`);
+    }
+    return classes;
+  }
+
+  get value() { return this.getAttribute('value'); }
+  set value(v) { this.setAttribute('value', String(v)); }
+}
+
+customElements.define('glk-progress', GlkProgress);
+
+class GlkModal extends GlkElement {
+  static get observedAttributes() {
+    return ['open', 'title'];
+  }
+
+  render() {
+    this._overlay = this.createElement('div', ['glass-modal-overlay']);
+
+    const modal = this.createElement('div', ['glass-modal']);
+
+    // Header
+    const header = this.createElement('div', ['glass-modal__header']);
+    this._titleEl = this.createElement('h2', ['glass-modal__title']);
+    this._titleEl.textContent = this.getAttribute('title') || '';
+    header.appendChild(this._titleEl);
+
+    // Body
+    const body = this.createElement('div', ['glass-modal__body']);
+    body.appendChild(document.createElement('slot'));
+
+    // Footer — clone action buttons from light DOM into shadow DOM
+    this._footer = this.createElement('div', ['glass-modal__footer']);
+    this._populateFooter();
+
+    modal.appendChild(header);
+    modal.appendChild(body);
+    modal.appendChild(this._footer);
+
+    this._overlay.appendChild(modal);
+    this._wrapper.appendChild(this._overlay);
+
+    if (this.getBoolAttr('open')) {
+      this._overlay.classList.add('is-active');
+    }
+  }
+
+  _populateFooter() {
+    this._footer.innerHTML = '';
+    const actionsSlot = this.querySelector('[slot="actions"]');
+    if (actionsSlot) {
+      const buttons = actionsSlot.querySelectorAll('button');
+      buttons.forEach(btn => {
+        const clone = btn.cloneNode(true);
+        // Forward click events to the original button
+        clone.addEventListener('click', () => btn.click());
+        this._footer.appendChild(clone);
+      });
+    }
+  }
+
+  setupEvents() {
+    // Close on overlay click (outside modal)
+    this._onOverlayClick = (e) => {
+      if (e.target === this._overlay) {
+        this.removeAttribute('open');
+        this.emit('glk-close');
+      }
+    };
+    this._overlay.addEventListener('click', this._onOverlayClick);
+
+    // Close on Escape
+    this._onKeydown = (e) => {
+      if (e.key === 'Escape' && this.getBoolAttr('open')) {
+        this.removeAttribute('open');
+        this.emit('glk-close');
+      }
+    };
+    document.addEventListener('keydown', this._onKeydown);
+  }
+
+  teardownEvents() {
+    this._overlay?.removeEventListener('click', this._onOverlayClick);
+    document.removeEventListener('keydown', this._onKeydown);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._overlay) return;
+    switch (name) {
+      case 'open':
+        this._overlay.classList.toggle('is-active', this.getBoolAttr('open'));
+        break;
+      case 'title':
+        this._titleEl.textContent = this.getAttribute('title') || '';
+        break;
+    }
+  }
+
+  show() { this.setAttribute('open', ''); }
+  close() { this.removeAttribute('open'); }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+}
+
+customElements.define('glk-modal', GlkModal);
+
+const VARIANTS = ['success', 'error', 'warning'];
+
+const ICONS = {
+  success: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`,
+  error: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`,
+  warning: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`
+};
+
+class GlkToast extends GlkElement {
+  static get observedAttributes() {
+    return ['message', 'variant', 'duration', 'visible'];
+  }
+
+  render() {
+    this._toast = this.createElement('div', this._computeClasses());
+
+    this._iconEl = this.createElement('span', ['glass-toast__icon']);
+    this._textEl = this.createElement('span', ['glass-toast__text']);
+    this._textEl.textContent = this.getAttribute('message') || '';
+
+    this._updateIcon();
+
+    this._toast.appendChild(this._iconEl);
+    this._toast.appendChild(this._textEl);
+    this._wrapper.appendChild(this._toast);
+
+    if (this.getBoolAttr('visible')) {
+      this._show();
+    }
+  }
+
+  onAttributeChanged(name) {
+    if (!this._toast) return;
+    switch (name) {
+      case 'message':
+        this._textEl.textContent = this.getAttribute('message') || '';
+        break;
+      case 'variant':
+        this._toast.className = this._computeClasses().join(' ');
+        this._updateIcon();
+        break;
+      case 'visible':
+        if (this.getBoolAttr('visible')) {
+          this._show();
+        } else {
+          this._hide();
+        }
+        break;
+    }
+  }
+
+  _computeClasses() {
+    const classes = ['glass-toast'];
+    const variant = this.getAttribute('variant');
+    if (variant && VARIANTS.includes(variant)) {
+      classes.push(`glass-toast--${variant}`);
+    }
+    return classes;
+  }
+
+  _updateIcon() {
+    const variant = this.getAttribute('variant');
+    this._iconEl.innerHTML = ICONS[variant] || ICONS.success;
+  }
+
+  _show() {
+    this._toast.classList.add('is-visible');
+    const duration = parseInt(this.getAttribute('duration') || '3000', 10);
+    if (duration > 0) {
+      clearTimeout(this._timer);
+      this._timer = setTimeout(() => {
+        this.removeAttribute('visible');
+        this.emit('glk-dismiss');
+      }, duration);
+    }
+  }
+
+  _hide() {
+    this._toast.classList.remove('is-visible');
+    clearTimeout(this._timer);
+  }
+
+  /** Programmatic show */
+  show(message, variant, duration) {
+    if (message) this.setAttribute('message', message);
+    if (variant) this.setAttribute('variant', variant);
+    if (duration) this.setAttribute('duration', String(duration));
+    this.setAttribute('visible', '');
+  }
+
+  dismiss() {
+    this.removeAttribute('visible');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this._timer);
+  }
+}
+
+customElements.define('glk-toast', GlkToast);
+
+class GlkAccordion extends GlkElement {
+  render() {
+    const container = this.createElement('div', ['glass-accordion']);
+    container.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(container);
+  }
+}
+
+customElements.define('glk-accordion', GlkAccordion);
+
+const CHEVRON_SVG = `<span class="glass-accordion__trigger-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg></span>`;
+
+class GlkAccordionItem extends GlkElement {
+  static get observedAttributes() {
+    return ['title', 'open'];
+  }
+
+  render() {
+    this._item = this.createElement('div', ['glass-accordion__item']);
+    if (this.getBoolAttr('open')) this._item.classList.add('is-open');
+
+    // Trigger button
+    this._trigger = this.createElement('button', ['glass-accordion__trigger']);
+    this._triggerText = document.createTextNode(this.getAttribute('title') || '');
+    this._trigger.appendChild(this._triggerText);
+    this._trigger.insertAdjacentHTML('beforeend', CHEVRON_SVG);
+
+    // Content
+    this._content = this.createElement('div', ['glass-accordion__content']);
+    const body = this.createElement('div', ['glass-accordion__body']);
+    body.appendChild(document.createElement('slot'));
+    this._content.appendChild(body);
+
+    this._item.appendChild(this._trigger);
+    this._item.appendChild(this._content);
+
+    this._wrapper.appendChild(this._item);
+  }
+
+  setupEvents() {
+    this._onClick = () => {
+      this.setBoolAttr('open', !this.getBoolAttr('open'));
+      this.emit('glk-toggle', { open: this.getBoolAttr('open') });
+    };
+    this._trigger.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._trigger?.removeEventListener('click', this._onClick);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._item) return;
+    switch (name) {
+      case 'open':
+        this._item.classList.toggle('is-open', this.getBoolAttr('open'));
+        break;
+      case 'title':
+        this._triggerText.textContent = this.getAttribute('title') || '';
+        break;
+    }
+  }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+}
+
+customElements.define('glk-accordion-item', GlkAccordionItem);
+
+export { GlkAccordion, GlkAccordionItem, GlkAvatar, GlkBadge, GlkButton, GlkCard, GlkCheckbox, GlkDivider, GlkInput, GlkModal, GlkNav, GlkPill, GlkProgress, GlkRadio, GlkRange, GlkSearch, GlkSelect, GlkStatus, GlkTabBar, GlkTabItem, GlkTextarea, GlkTitle, GlkToast, GlkToggle };