@letsprogram/ng-oat 0.1.1 → 0.1.3

package/fesm2022/letsprogram-ng-oat.mjs

@@ -1,35 +1,39 @@
 import * as i0 from '@angular/core';
-import { makeEnvironmentProviders, provideAppInitializer, inject, PLATFORM_ID, Injectable, ElementRef, DestroyRef, signal, output, afterNextRender, Directive, InjectionToken, Renderer2, ViewContainerRef, input, TemplateRef, effect, computed, Component, model, CUSTOM_ELEMENTS_SCHEMA, viewChild, viewChildren, contentChildren } from '@angular/core';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { makeEnvironmentProviders, provideAppInitializer, inject, PLATFORM_ID, Injectable, ElementRef, DestroyRef, signal, output, afterNextRender, Directive, InjectionToken, Renderer2, ViewContainerRef, input, TemplateRef, effect, computed, Component, model, CUSTOM_ELEMENTS_SCHEMA, viewChild, viewChildren, contentChildren, contentChild } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 
 const DEFAULT_OPTIONS = {
-    assets: { css: 'auto', js: 'auto' },
-    registerWebComponents: true,
+    assets: { css: false },
     basePath: 'assets/oat',
 };
-function injectTag(doc, tag, attrs, id) {
+function injectTag(doc, attrs, id) {
     return new Promise((resolve, reject) => {
         if (doc.getElementById(id)) {
             resolve();
             return;
         }
-        const el = doc.createElement(tag);
+        const el = doc.createElement('link');
         el.id = id;
         Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
         el.addEventListener('load', () => resolve());
-        el.addEventListener('error', () => reject(new Error(`Failed to load ${tag}: ${attrs['href'] || attrs['src']}`)));
+        el.addEventListener('error', () => reject(new Error(`Failed to load link: ${attrs['href']}`)));
         doc.head.appendChild(el);
     });
 }
 /**
- * Provides Oat UI assets and initialisation.
+ * Provides ng-oat core initialisation.
+ *
+ * By default, no runtime asset injection occurs — add CSS via
+ * `angular.json` `styles` array or `@import` in `styles.css` (recommended).
+ * Oat JS is no longer needed; all behavior is handled natively by Angular components.
  *
- * Include in your app config providers array:
  * ```ts
- * provideNgOat()                                  // auto-inject CSS + JS
- * provideNgOat({ assets: { css: false } })        // user imported CSS manually
- * provideNgOat({ basePath: '/custom/oat' })       // custom asset location
+ * provideNgOat()                              // recommended (CSS via angular.json / styles.css)
+ * provideNgOat({ assets: { css: 'link' } })   // opt-in runtime CSS injection *
  * ```
+ *
+ * \\* Runtime injection requires an assets glob in angular.json to copy files:
+ * `{ glob: '**\\/*', input: 'node_modules/@letsprogram/ng-oat/assets/oat', output: '/assets/oat' }`
  */
 function provideNgOat(options) {
     const opts = {
@@ -45,19 +49,12 @@ function provideNgOat(options) {
                 return;
             const base = opts.basePath.replace(/\/+$/, '');
             const promises = [];
-            // CSS
-            const cssMode = opts.assets.css === 'auto' ? 'link' : opts.assets.css;
-            if (cssMode === 'link') {
-                promises.push(injectTag(doc, 'link', { rel: 'stylesheet', href: `${base}/oat.min.css` }, 'ng-oat-css'));
-                // Also inject the token layer CSS
-                promises.push(injectTag(doc, 'link', { rel: 'stylesheet', href: `${base}/tokens.css` }, 'ng-oat-tokens-css'));
+            // CSS — only when explicitly opted in
+            if (opts.assets.css === 'link') {
+                promises.push(injectTag(doc, { rel: 'stylesheet', href: `${base}/oat.min.css` }, 'ng-oat-css'));
+                promises.push(injectTag(doc, { rel: 'stylesheet', href: `${base}/tokens.css` }, 'ng-oat-tokens-css'));
             }
-            // JS
-            const jsMode = opts.assets.js === 'auto' ? 'script' : opts.assets.js;
-            if (jsMode === 'script') {
-                promises.push(injectTag(doc, 'script', { src: `${base}/oat.min.js`, defer: '' }, 'ng-oat-js'));
-            }
-            return Promise.all(promises).then(() => { });
+            return promises.length ? Promise.all(promises).then(() => { }) : undefined;
         }),
     ]);
 }
@@ -679,7 +676,7 @@ class NgOatSidebar {
                     this.close();
                 }
             });
-            // Listen for toggle clicks within our layout (in case oat.js isn't loaded)
+            // Listen for toggle clicks within our layout
             this.listen(host, 'click', (e) => {
                 const toggle = e.target.closest('[data-sidebar-toggle]');
                 if (toggle) {
@@ -747,10 +744,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }], ctorParameters: () => [], propDecorators: { ngOatSidebarScrollLock: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngOatSidebarScrollLock", required: false }] }], ngOatSidebarChange: [{ type: i0.Output, args: ["ngOatSidebarChange"] }] } });
 
 /**
- * Angular integration for Oat's <ot-tabs> WebComponent.
+ * Angular directive that provides native tab behaviour on any element
+ * containing `role="tablist"` > `role="tab"` buttons and sibling
+ * `role="tabpanel"` containers.
  *
- * Oat's WC handles all ARIA, keyboard nav, and panel toggling.
- * This directive provides Angular-friendly signals and event binding.
+ * Works without oat.js — handles tab activation, ARIA attributes,
+ * panel visibility and full keyboard navigation internally.
  *
  * Usage:
  * ```html
@@ -775,36 +774,98 @@ class NgOatTabs {
     activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
     /** Emits on tab change with { index, tab } */
     ngOatTabChange = output();
-    tabChangeListener = null;
+    tabEls = [];
+    panelEls = [];
+    cleanupFns = [];
     constructor() {
         afterNextRender(() => {
             if (!isPlatformBrowser(this.platformId))
                 return;
             const host = this.el.nativeElement;
-            // Listen for ot-tab-change custom event emitted by the WebComponent
-            this.tabChangeListener = (e) => {
-                const detail = e.detail;
-                if (detail) {
-                    this.activeIndex.set(detail.index);
-                    this.ngOatTabChange.emit({ index: detail.index, tab: detail.tab });
+            // Discover tabs and panels
+            const tablist = host.querySelector(':scope > [role="tablist"]');
+            this.tabEls = tablist
+                ? Array.from(tablist.querySelectorAll('[role="tab"]'))
+                : [];
+            this.panelEls = Array.from(host.querySelectorAll(':scope > [role="tabpanel"]'));
+            // Wire ARIA ids
+            this.tabEls.forEach((tab, i) => {
+                const panel = this.panelEls[i];
+                if (!panel)
+                    return;
+                const tabId = tab.id || `ng-oat-tab-${crypto.randomUUID().slice(0, 8)}`;
+                const panelId = panel.id || `ng-oat-panel-${crypto.randomUUID().slice(0, 8)}`;
+                tab.id = tabId;
+                panel.id = panelId;
+                tab.setAttribute('aria-controls', panelId);
+                panel.setAttribute('aria-labelledby', tabId);
+            });
+            // Activate the initial tab
+            this.activate(this.activeIndex());
+            // Click handler
+            const onClick = (e) => {
+                const btn = e.target.closest?.('[role="tab"]');
+                if (!btn)
+                    return;
+                const idx = this.tabEls.indexOf(btn);
+                if (idx >= 0 && !btn.hasAttribute('disabled'))
+                    this.activate(idx);
+            };
+            // Keyboard navigation (ArrowLeft / ArrowRight / Home / End)
+            const onKeydown = (e) => {
+                if (!e.target.closest?.('[role="tab"]'))
+                    return;
+                const len = this.tabEls.length;
+                const current = this.activeIndex();
+                let next = -1;
+                if (e.key === 'ArrowRight')
+                    next = (current + 1) % len;
+                else if (e.key === 'ArrowLeft')
+                    next = (current - 1 + len) % len;
+                else if (e.key === 'Home')
+                    next = 0;
+                else if (e.key === 'End')
+                    next = len - 1;
+                if (next >= 0) {
+                    e.preventDefault();
+                    // Skip disabled tabs
+                    const orig = next;
+                    const dir = e.key === 'ArrowLeft' || e.key === 'End' ? -1 : 1;
+                    while (this.tabEls[next]?.hasAttribute('disabled')) {
+                        next = (next + dir + len) % len;
+                        if (next === orig)
+                            return; // all disabled
+                    }
+                    this.activate(next);
+                    this.tabEls[next]?.focus();
                 }
             };
-            host.addEventListener('ot-tab-change', this.tabChangeListener);
-            // Sync initial active index
-            if (typeof host.activeIndex === 'number') {
-                this.activeIndex.set(host.activeIndex);
-            }
+            tablist?.addEventListener('click', onClick);
+            tablist?.addEventListener('keydown', onKeydown);
+            this.cleanupFns.push(() => tablist?.removeEventListener('click', onClick), () => tablist?.removeEventListener('keydown', onKeydown));
             this.destroyRef.onDestroy(() => {
-                host.removeEventListener('ot-tab-change', this.tabChangeListener);
+                this.cleanupFns.forEach(fn => fn());
+                this.cleanupFns = [];
             });
         });
     }
     /** Programmatically select a tab by index */
     selectTab(index) {
-        const host = this.el.nativeElement;
-        if (typeof host.activeIndex === 'number') {
-            host.activeIndex = index;
-        }
+        this.activate(index);
+    }
+    activate(idx) {
+        if (idx < 0 || idx >= this.tabEls.length)
+            return;
+        this.tabEls.forEach((tab, i) => {
+            const isActive = i === idx;
+            tab.setAttribute('aria-selected', String(isActive));
+            tab.tabIndex = isActive ? 0 : -1;
+        });
+        this.panelEls.forEach((panel, i) => {
+            panel.hidden = i !== idx;
+        });
+        this.activeIndex.set(idx);
+        this.ngOatTabChange.emit({ index: idx, tab: this.tabEls[idx] });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatTabs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: NgOatTabs, isStandalone: true, selector: "ot-tabs[ngOatTabs], [ngOatTabs]", outputs: { ngOatTabChange: "ngOatTabChange" }, exportAs: ["ngOatTabs"], ngImport: i0 });
@@ -920,10 +981,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }], ctorParameters: () => [], propDecorators: { ngOatDialogClose: [{ type: i0.Output, args: ["ngOatDialogClose"] }] } });
 
 /**
- * Angular service wrapping Oat's toast notification system.
+ * Angular service for Oat-styled toast notifications.
  *
- * Delegates to `window.ot.toast()` (provided by oat.min.js).
- * Falls back to a no-op if Oat JS is not loaded.
+ * Fully native implementation — no dependency on oat.js.
+ * Uses the Oat CSS `.toast`, `.toast-container`, `data-entering/data-exiting`
+ * animation patterns, and popover API for stacking.
  *
  * Usage:
  * ```ts
@@ -937,11 +999,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class NgOatToast {
     platformId = inject(PLATFORM_ID);
     doc = inject(DOCUMENT);
-    get ot() {
-        if (!isPlatformBrowser(this.platformId))
-            return null;
-        return this.doc.defaultView?.ot ?? null;
-    }
+    /** Cache of toast containers keyed by placement */
+    containers = new Map();
+    // ── Convenience methods ─────────────────────────────────────────────
     success(message, title, options) {
         this.show(message, title, { ...options, variant: 'success' });
     }
@@ -954,44 +1014,62 @@ class NgOatToast {
     error(message, title, options) {
         this.show(message, title, { ...options, variant: 'danger' });
     }
+    // ── Core show method ────────────────────────────────────────────────
     show(message, title, options = {}) {
-        const ot = this.ot;
-        if (!ot?.toast) {
-            console.warn('ng-oat: Oat JS not loaded. Toast not shown. Ensure oat.min.js is loaded via provideNgOat() or angular.json scripts.');
+        if (!isPlatformBrowser(this.platformId))
             return;
+        const { variant = 'info', dismissible, ...rest } = options;
+        const el = this.doc.createElement('output');
+        el.setAttribute('data-variant', variant);
+        if (title) {
+            const titleEl = this.doc.createElement('h6');
+            titleEl.className = 'toast-title';
+            titleEl.textContent = title;
+            el.appendChild(titleEl);
         }
-        const { dismissible, ...rest } = options;
-        const el = ot.toast(message, title, rest);
-        if (dismissible && el) {
+        const msgEl = this.doc.createElement('div');
+        msgEl.className = 'toast-message';
+        msgEl.textContent = message;
+        el.appendChild(msgEl);
+        if (dismissible) {
             this.addCloseButton(el);
         }
-        return el;
+        return this.showEl(el, rest);
     }
     /**
      * Show a toast from a DOM element or template element.
-     * For Angular TemplateRef, use showTemplate() instead.
      */
     showElement(element, options = {}) {
-        const ot = this.ot;
-        if (!ot?.toast?.el)
+        if (!isPlatformBrowser(this.platformId))
             return;
-        ot.toast.el(element, options);
+        let target;
+        if (element instanceof HTMLTemplateElement) {
+            target = element.content.firstElementChild?.cloneNode(true);
+        }
+        else {
+            target = element.cloneNode(true);
+        }
+        if (!target)
+            return;
+        target.removeAttribute('id');
+        this.showEl(target, options);
     }
     /**
      * Show a toast from an Angular TemplateRef.
      * Requires a ViewContainerRef to render the template.
      */
     showTemplate(templateRef, vcr, options = {}) {
-        const ot = this.ot;
-        if (!ot?.toast?.el)
+        if (!isPlatformBrowser(this.platformId))
             return;
         const view = vcr.createEmbeddedView(templateRef);
         view.detectChanges();
-        // Wrap template nodes in a container
         const container = this.doc.createElement('div');
         view.rootNodes.forEach((node) => container.appendChild(node));
-        ot.toast.el(container, options);
-        // Clean up the view after the toast duration
+        const { dismissible, ...rest } = options;
+        if (dismissible) {
+            this.addCloseButton(container);
+        }
+        this.showEl(container, rest);
         const duration = options.duration ?? 4000;
         if (duration > 0) {
             setTimeout(() => view.destroy(), duration + 500);
@@ -999,7 +1077,82 @@ class NgOatToast {
     }
     /** Dismiss toasts. If placement given, only that position; otherwise all. */
     dismiss(placement) {
-        this.ot?.toast?.clear(placement);
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        if (placement) {
+            const c = this.containers.get(placement);
+            if (c) {
+                c.innerHTML = '';
+                c.hidePopover();
+            }
+        }
+        else {
+            this.containers.forEach(c => {
+                c.innerHTML = '';
+                c.hidePopover();
+            });
+        }
+    }
+    // ── Internal helpers ────────────────────────────────────────────────
+    /** Get or create a toast container for the given placement */
+    getContainer(placement) {
+        let c = this.containers.get(placement);
+        if (!c) {
+            c = this.doc.createElement('div');
+            c.className = 'toast-container';
+            c.setAttribute('popover', 'manual');
+            c.setAttribute('data-placement', placement);
+            this.doc.body.appendChild(c);
+            this.containers.set(placement, c);
+        }
+        return c;
+    }
+    /** Show a prepared element as a toast */
+    showEl(el, options = {}) {
+        const { placement = 'top-right', duration = 4000 } = options;
+        const container = this.getContainer(placement);
+        el.classList.add('toast');
+        let timeout;
+        // Pause auto-dismiss on hover
+        el.onmouseenter = () => clearTimeout(timeout);
+        el.onmouseleave = () => {
+            if (duration > 0) {
+                timeout = setTimeout(() => this.removeToast(el, container), duration);
+            }
+        };
+        // Show with enter animation
+        el.setAttribute('data-entering', '');
+        container.appendChild(el);
+        container.showPopover();
+        // Double rAF so computed styles apply before transition starts
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                el.removeAttribute('data-entering');
+            });
+        });
+        // Auto-dismiss
+        if (duration > 0) {
+            timeout = setTimeout(() => this.removeToast(el, container), duration);
+        }
+        return el;
+    }
+    /** Remove a toast with exit animation */
+    removeToast(el, container) {
+        if (el.hasAttribute('data-exiting'))
+            return;
+        el.setAttribute('data-exiting', '');
+        const cleanup = () => {
+            el.remove();
+            if (!container.children.length) {
+                container.hidePopover();
+            }
+        };
+        el.addEventListener('transitionend', cleanup, { once: true });
+        // Fallback timeout for clients that disable animations
+        const t = getComputedStyle(el).getPropertyValue('--transition').trim();
+        const val = parseFloat(t) || 300;
+        const ms = t.endsWith('ms') ? val : val * 1000;
+        setTimeout(cleanup, ms > 0 ? ms : 350);
     }
     /** Add a close button to a toast element */
     addCloseButton(el) {
@@ -1011,10 +1164,8 @@ class NgOatToast {
         btn.addEventListener('mouseenter', () => { btn.style.opacity = '1'; });
         btn.addEventListener('mouseleave', () => { btn.style.opacity = '0.6'; });
         btn.addEventListener('click', () => {
-            el.setAttribute('data-exiting', '');
-            const cleanup = () => el.remove();
-            el.addEventListener('transitionend', cleanup, { once: true });
-            setTimeout(cleanup, 350);
+            const container = el.parentElement;
+            this.removeToast(el, container);
         });
         el.style.position = 'relative';
         el.style.paddingRight = '2rem';
@@ -1973,17 +2124,21 @@ class NgOatDropdownComponent {
                     const items = host.querySelectorAll('[role="menuitem"]');
                     items[0]?.focus();
                     this.triggerEl?.setAttribute('aria-expanded', 'true');
+                    // Add keyboard navigation
+                    this.popoverEl?.addEventListener('keydown', this.onKeydown);
                 }
                 else {
                     window.removeEventListener('scroll', this.positionFn, true);
                     window.removeEventListener('resize', this.positionFn);
                     this.triggerEl?.setAttribute('aria-expanded', 'false');
                     this.triggerEl?.focus();
+                    this.popoverEl?.removeEventListener('keydown', this.onKeydown);
                 }
             };
             this.popoverEl.addEventListener('toggle', onToggle);
             this.destroyRef.onDestroy(() => {
                 this.popoverEl?.removeEventListener('toggle', onToggle);
+                this.popoverEl?.removeEventListener('keydown', this.onKeydown);
                 window.removeEventListener('scroll', this.positionFn, true);
                 window.removeEventListener('resize', this.positionFn);
             });
@@ -1998,6 +2153,44 @@ class NgOatDropdownComponent {
     toggle() {
         this.popoverEl?.togglePopover?.();
     }
+    /** Keyboard navigation for menu items (ArrowDown/Up/Home/End/Escape) */
+    onKeydown = (e) => {
+        const host = this.elRef.nativeElement;
+        const items = Array.from(host.querySelectorAll('[role="menuitem"]:not([disabled])'));
+        if (!items.length)
+            return;
+        const current = items.indexOf(this.doc.activeElement);
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                const next = current < items.length - 1 ? current + 1 : 0;
+                items[next]?.focus();
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                const prev = current > 0 ? current - 1 : items.length - 1;
+                items[prev]?.focus();
+                break;
+            }
+            case 'Home': {
+                e.preventDefault();
+                items[0]?.focus();
+                break;
+            }
+            case 'End': {
+                e.preventDefault();
+                items[items.length - 1]?.focus();
+                break;
+            }
+            case 'Escape': {
+                e.preventDefault();
+                this.close();
+                break;
+            }
+        }
+    };
+    doc = inject(DOCUMENT);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: NgOatDropdownComponent, isStandalone: true, selector: "ng-oat-dropdown", outputs: { openChange: "openChange" }, ngImport: i0, template: `
     <ot-dropdown>
@@ -4324,6 +4517,455 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
   `, styles: [":host{display:block}\n"] }]
         }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], showSeeAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeeAll", required: false }] }], scrollAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollAmount", required: false }] }], seeAllClick: [{ type: i0.Output, args: ["seeAllClick"] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
 
+/**
+ * Angular toolbar component — like mat-toolbar, built on Oat CSS.
+ *
+ * Renders a fixed-position `<nav data-topnav>` that leverages Oat's built-in
+ * topnav styling (flex, border, shadow). Content-projected slots let you
+ * arrange Logo / nav-links / actions however you like.
+ *
+ * ## Slots
+ * - **`[toolbarStart]`** — Left-aligned content (logo, brand, hamburger)
+ * - **Default `<ng-content>`** — Center / free-form content (nav links, search)
+ * - **`[toolbarEnd]`** — Right-aligned content (user menu, theme toggle, actions)
+ *
+ * ## Layout
+ * The toolbar uses `display:flex; align-items:center` with a spacer between
+ * the default content and the end slot, so start items anchor left and end
+ * items anchor right automatically.
+ *
+ * Usage:
+ * ```html
+ * <ng-oat-toolbar>
+ *   <a toolbarStart routerLink="/" class="brand">🌾 MyApp</a>
+ *   <nav>
+ *     <a routerLink="/home">Home</a>
+ *     <a routerLink="/about">About</a>
+ *   </nav>
+ *   <ng-oat-dropdown toolbarEnd>
+ *     <button trigger class="ghost">👤 User ▾</button>
+ *     <a role="menuitem">Profile</a>
+ *     <a role="menuitem">Settings</a>
+ *     <hr />
+ *     <a role="menuitem">Logout</a>
+ *   </ng-oat-dropdown>
+ * </ng-oat-toolbar>
+ * ```
+ */
+class NgOatToolbar {
+    color = input('default', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    dense = input(false, ...(ngDevMode ? [{ debugName: "dense" }] : []));
+    fixed = input(true, ...(ngDevMode ? [{ debugName: "fixed" }] : []));
+    attrVariant = computed(() => {
+        const c = this.color();
+        return c === 'default' ? null : c;
+    }, ...(ngDevMode ? [{ debugName: "attrVariant" }] : []));
+    navClass = computed(() => {
+        const classes = [];
+        const c = this.color();
+        if (c !== 'default')
+            classes.push(`oat-toolbar-${c}`);
+        if (this.dense())
+            classes.push('oat-toolbar-dense');
+        if (!this.fixed())
+            classes.push('oat-toolbar-static');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "navClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgOatToolbar, isStandalone: true, selector: "ng-oat-toolbar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "attr.data-variant": "attrVariant()" } }, ngImport: i0, template: `
+    <nav data-topnav [class]="navClass()">
+      <ng-content select="[toolbarStart]" />
+      <ng-content />
+      <span class="oat-toolbar-spacer"></span>
+      <ng-content select="[toolbarEnd]" />
+    </nav>
+  `, isInline: true, styles: [":host{display:block}.oat-toolbar-spacer{flex:1 1 auto}nav[data-topnav].oat-toolbar-static{position:relative;inset:unset;z-index:auto}nav[data-topnav].oat-toolbar-dense{min-height:var(--space-10);padding-block:var(--space-1)}nav[data-topnav].oat-toolbar-primary{background-color:var(--primary);color:var(--primary-foreground);border-bottom-color:var(--primary)}nav[data-topnav].oat-toolbar-primary a{color:var(--primary-foreground)}nav[data-topnav].oat-toolbar-accent{background-color:var(--accent);color:var(--foreground);border-bottom-color:var(--accent)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatToolbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-oat-toolbar', host: {
+                        'role': 'toolbar',
+                        '[attr.data-variant]': 'attrVariant()',
+                    }, template: `
+    <nav data-topnav [class]="navClass()">
+      <ng-content select="[toolbarStart]" />
+      <ng-content />
+      <span class="oat-toolbar-spacer"></span>
+      <ng-content select="[toolbarEnd]" />
+    </nav>
+  `, styles: [":host{display:block}.oat-toolbar-spacer{flex:1 1 auto}nav[data-topnav].oat-toolbar-static{position:relative;inset:unset;z-index:auto}nav[data-topnav].oat-toolbar-dense{min-height:var(--space-10);padding-block:var(--space-1)}nav[data-topnav].oat-toolbar-primary{background-color:var(--primary);color:var(--primary-foreground);border-bottom-color:var(--primary)}nav[data-topnav].oat-toolbar-primary a{color:var(--primary-foreground)}nav[data-topnav].oat-toolbar-accent{background-color:var(--accent);color:var(--foreground);border-bottom-color:var(--accent)}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }] } });
+/**
+ * Toolbar row — use multiple rows stacked inside a toolbar.
+ *
+ * Usage:
+ * ```html
+ * <ng-oat-toolbar>
+ *   <ng-oat-toolbar-row>
+ *     <a toolbarStart>Brand</a>
+ *     <span toolbarEnd>Actions</span>
+ *   </ng-oat-toolbar-row>
+ *   <ng-oat-toolbar-row dense>
+ *     <nav>Sub-navigation tabs</nav>
+ *   </ng-oat-toolbar-row>
+ * </ng-oat-toolbar>
+ * ```
+ */
+class NgOatToolbarRow {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatToolbarRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: NgOatToolbarRow, isStandalone: true, selector: "ng-oat-toolbar-row", host: { classAttribute: "oat-toolbar-row" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:flex;align-items:center;gap:var(--space-3);width:100%}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatToolbarRow, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-oat-toolbar-row', host: { class: 'oat-toolbar-row' }, template: `<ng-content />`, styles: [":host{display:flex;align-items:center;gap:var(--space-3);width:100%}\n"] }]
+        }] });
+
+const DEFAULT_THEMES = [
+    { value: 'light', label: 'Light' },
+    { value: 'dark', label: 'Dark' },
+    { value: 'system', label: 'System' },
+];
+const STORAGE_KEY = 'ng-oat-theme';
+/**
+ * Structural directive for fully-custom icon rendering.
+ *
+ * Place inside `<ng-oat-theme-selector>` to replace the built-in SVG icons.
+ * The template context receives the current `NgOatThemeOption` as `$implicit`.
+ *
+ * ```html
+ * <ng-oat-theme-selector>
+ *   <ng-template ngOatThemeSelectorIcon let-opt>
+ *     <my-icon [name]="opt.value" />
+ *   </ng-template>
+ * </ng-oat-theme-selector>
+ * ```
+ */
+class NgOatThemeSelectorIcon {
+    tpl = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatThemeSelectorIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: NgOatThemeSelectorIcon, isStandalone: true, selector: "ng-template[ngOatThemeSelectorIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatThemeSelectorIcon, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ngOatThemeSelectorIcon]' }]
+        }] });
+/**
+ * Theme selector — shadcn-inspired light / dark / system toggle.
+ *
+ * Applies `colorScheme` on `<html>` and persists the choice to `localStorage`.
+ * When "system" is selected it respects `prefers-color-scheme`.
+ *
+ * Usage:
+ * ```html
+ * <!-- Dropdown-style (default) -->
+ * <ng-oat-theme-selector />
+ *
+ * <!-- Inline toggle group style -->
+ * <ng-oat-theme-selector mode="toggle" />
+ *
+ * <!-- Listen for changes -->
+ * <ng-oat-theme-selector (themeChange)="onTheme($event)" />
+ * ```
+ */
+class NgOatThemeSelector {
+    /** Display mode: dropdown menu or inline toggle group */
+    mode = input('dropdown', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Initial theme (overrides localStorage if set) */
+    initialTheme = input(undefined, ...(ngDevMode ? [{ debugName: "initialTheme" }] : []));
+    /**
+     * Custom theme options. Override labels, provide emoji icons, or
+     * change the set entirely.
+     *
+     * ```html
+     * <ng-oat-theme-selector
+     *   [themes]="[
+     *     { value: 'light', label: 'Day',    icon: '🌅' },
+     *     { value: 'dark',  label: 'Night',  icon: '🌃' },
+     *     { value: 'system', label: 'Auto',  icon: '🖥️' },
+     *   ]" />
+     * ```
+     */
+    themes = input(DEFAULT_THEMES, ...(ngDevMode ? [{ debugName: "themes" }] : []));
+    /** Emits when the user picks a theme */
+    themeChange = output();
+    /** Current active theme */
+    current = signal('system', ...(ngDevMode ? [{ debugName: "current" }] : []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /** Content-projected custom icon template */
+    iconTpl = contentChild(NgOatThemeSelectorIcon, ...(ngDevMode ? [{ debugName: "iconTpl" }] : []));
+    /** Resolved themes (input or defaults) */
+    resolvedThemes = computed(() => this.themes(), ...(ngDevMode ? [{ debugName: "resolvedThemes" }] : []));
+    /** The currently active option object */
+    activeOption = computed(() => this.resolvedThemes().find(t => t.value === this.current()) ?? this.resolvedThemes()[0], ...(ngDevMode ? [{ debugName: "activeOption" }] : []));
+    doc = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
+    mediaQuery = null;
+    mediaListener = (e) => this.applyResolved(e.matches ? 'dark' : 'light');
+    /** Toggle the dropdown open/closed */
+    toggleOpen() {
+        this.open.update(v => !v);
+    }
+    /** Pick a theme and close the dropdown */
+    pick(theme) {
+        this.setTheme(theme);
+        this.open.set(false);
+    }
+    /** Keyboard handler for Escape and arrow-key navigation inside the menu */
+    onHostKey(e) {
+        if (e.key === 'Escape' && this.open()) {
+            e.preventDefault();
+            this.open.set(false);
+            // Return focus to trigger
+            const trigger = e.target?.closest('.oat-ts-dropdown')?.querySelector('.oat-ts-trigger');
+            trigger?.focus();
+            return;
+        }
+        if (!this.open())
+            return;
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const menu = e.target?.closest('.oat-ts-dropdown')?.querySelector('.oat-ts-menu');
+            if (!menu)
+                return;
+            const items = Array.from(menu.querySelectorAll('button[role="option"]'));
+            const idx = items.indexOf(e.target);
+            const next = e.key === 'ArrowDown'
+                ? items[(idx + 1) % items.length]
+                : items[(idx - 1 + items.length) % items.length];
+            next?.focus();
+        }
+    }
+    ngOnInit() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        // Determine starting theme: explicit input > localStorage > system
+        const init = this.initialTheme();
+        if (init) {
+            this.setTheme(init);
+        }
+        else {
+            const stored = localStorage.getItem(STORAGE_KEY);
+            this.setTheme(stored ?? 'system');
+        }
+        // Close dropdown on outside click
+        this.doc.addEventListener('click', this.onDocClick);
+    }
+    setTheme(theme) {
+        this.current.set(theme);
+        this.themeChange.emit(theme);
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        localStorage.setItem(STORAGE_KEY, theme);
+        // Unsubscribe from previous media listener
+        this.mediaQuery?.removeEventListener('change', this.mediaListener);
+        if (theme === 'system') {
+            this.applyResolved(this.mediaQuery?.matches ? 'dark' : 'light');
+            this.mediaQuery?.addEventListener('change', this.mediaListener);
+        }
+        else {
+            this.applyResolved(theme);
+        }
+    }
+    applyResolved(resolved) {
+        this.doc.documentElement.style.colorScheme = resolved;
+    }
+    onDocClick = (e) => {
+        if (!e.target?.closest?.('.oat-ts-dropdown')) {
+            this.open.set(false);
+        }
+    };
+    /** @internal */
+    ngOnDestroy() {
+        this.mediaQuery?.removeEventListener('change', this.mediaListener);
+        if (isPlatformBrowser(this.platformId)) {
+            this.doc.removeEventListener('click', this.onDocClick);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatThemeSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatThemeSelector, isStandalone: true, selector: "ng-oat-theme-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, initialTheme: { classPropertyName: "initialTheme", publicName: "initialTheme", isSignal: true, isRequired: false, transformFunction: null }, themes: { classPropertyName: "themes", publicName: "themes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeChange: "themeChange" }, host: { listeners: { "keydown": "onHostKey($event)" }, properties: { "attr.data-mode": "mode()" }, classAttribute: "oat-theme-selector" }, queries: [{ propertyName: "iconTpl", first: true, predicate: NgOatThemeSelectorIcon, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (mode() === 'dropdown') {
+      <div class="oat-ts-dropdown">
+        <button
+          class="oat-ts-trigger"
+          type="button"
+          aria-haspopup="listbox"
+          [attr.aria-expanded]="open()"
+          aria-label="Theme: {{ current() }}"
+          (click)="toggleOpen()">
+          <ng-container *ngTemplateOutlet="iconTpl()?.tpl ?? null; context: { $implicit: activeOption() }" />
+          @if (!iconTpl()) {
+            @if (activeOption().icon) {
+              <span class="oat-ts-emoji" aria-hidden="true">{{ activeOption().icon }}</span>
+            } @else {
+              <ng-container [ngSwitch]="current()">
+                <svg *ngSwitchCase="'light'" class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+                <svg *ngSwitchCase="'dark'" class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+                <svg *ngSwitchDefault class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+              </ng-container>
+            }
+          }
+          <svg class="oat-ts-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="6 9 12 15 18 9"/>
+          </svg>
+        </button>
+        @if (open()) {
+          <div class="oat-ts-menu" role="listbox" aria-label="Select theme">
+            @for (t of resolvedThemes(); track t.value) {
+              <button
+                role="option"
+                type="button"
+                [attr.aria-selected]="current() === t.value"
+                [class.active]="current() === t.value"
+                (click)="pick(t.value)">
+                <ng-container *ngTemplateOutlet="iconTpl()?.tpl ?? null; context: { $implicit: t }" />
+                @if (!iconTpl()) {
+                  @if (t.icon) {
+                    <span class="oat-ts-emoji" aria-hidden="true">{{ t.icon }}</span>
+                  } @else {
+                    <ng-container [ngSwitch]="t.value">
+                      <svg *ngSwitchCase="'light'" class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+                      <svg *ngSwitchCase="'dark'" class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+                      <svg *ngSwitchDefault class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+                    </ng-container>
+                  }
+                }
+                <span>{{ t.label }}</span>
+                @if (current() === t.value) {
+                  <svg class="oat-ts-check" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                       stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <polyline points="20 6 9 17 4 12"/>
+                  </svg>
+                }
+              </button>
+            }
+          </div>
+        }
+      </div>
+    } @else {
+      <div class="oat-ts-toggle" role="radiogroup" aria-label="Theme">
+        @for (t of resolvedThemes(); track t.value) {
+          <button
+            type="button"
+            role="radio"
+            [attr.aria-checked]="current() === t.value"
+            [attr.aria-label]="t.label"
+            [class.active]="current() === t.value"
+            (click)="setTheme(t.value)">
+            <ng-container *ngTemplateOutlet="iconTpl()?.tpl ?? null; context: { $implicit: t }" />
+            @if (!iconTpl()) {
+              @if (t.icon) {
+                <span class="oat-ts-emoji" aria-hidden="true">{{ t.icon }}</span>
+              } @else {
+                <ng-container [ngSwitch]="t.value">
+                  <svg *ngSwitchCase="'light'" class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+                  <svg *ngSwitchCase="'dark'" class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+                  <svg *ngSwitchDefault class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+                </ng-container>
+              }
+            }
+          </button>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex}.oat-ts-svg{width:1rem;height:1rem;flex-shrink:0}.oat-ts-emoji{font-size:1rem;line-height:1;flex-shrink:0}.oat-ts-dropdown{position:relative}.oat-ts-trigger{display:inline-flex;align-items:center;gap:var(--space-1);cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-medium);border:1px solid var(--border);background:transparent;color:var(--foreground);transition:background .15s,border-color .15s;line-height:1}.oat-ts-trigger:hover{background:var(--accent)}.oat-ts-trigger:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.oat-ts-chevron{width:.75rem;height:.75rem;opacity:.5}.oat-ts-menu{position:absolute;top:calc(100% + var(--space-1));right:0;z-index:50;min-width:8rem;border:1px solid var(--border);border-radius:var(--radius-medium);background:var(--background);box-shadow:var(--shadow-small);padding:var(--space-1);display:flex;flex-direction:column;animation:oat-ts-fade-in .12s ease-out}@keyframes oat-ts-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.oat-ts-menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-small);cursor:pointer;font-size:var(--text-6);line-height:1.25;color:var(--foreground);transition:background .1s}.oat-ts-menu button:hover,.oat-ts-menu button:focus-visible{background:var(--accent)}.oat-ts-menu button:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}.oat-ts-menu button.active{font-weight:500}.oat-ts-check{width:.875rem;height:.875rem;margin-inline-start:auto;opacity:.7}.oat-ts-toggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-medium);overflow:hidden}.oat-ts-toggle button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:var(--space-1) var(--space-2);cursor:pointer;transition:background .15s;color:var(--muted-foreground, var(--foreground))}.oat-ts-toggle button:hover{background:var(--accent)}.oat-ts-toggle button:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}.oat-ts-toggle button.active{background:var(--accent);color:var(--foreground)}.oat-ts-toggle button+button{border-left:1px solid var(--border)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatThemeSelector, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-oat-theme-selector', imports: [NgTemplateOutlet, NgSwitch, NgSwitchCase, NgSwitchDefault], host: {
+                        'class': 'oat-theme-selector',
+                        '[attr.data-mode]': 'mode()',
+                        '(keydown)': 'onHostKey($event)',
+                    }, template: `
+    @if (mode() === 'dropdown') {
+      <div class="oat-ts-dropdown">
+        <button
+          class="oat-ts-trigger"
+          type="button"
+          aria-haspopup="listbox"
+          [attr.aria-expanded]="open()"
+          aria-label="Theme: {{ current() }}"
+          (click)="toggleOpen()">
+          <ng-container *ngTemplateOutlet="iconTpl()?.tpl ?? null; context: { $implicit: activeOption() }" />
+          @if (!iconTpl()) {
+            @if (activeOption().icon) {
+              <span class="oat-ts-emoji" aria-hidden="true">{{ activeOption().icon }}</span>
+            } @else {
+              <ng-container [ngSwitch]="current()">
+                <svg *ngSwitchCase="'light'" class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+                <svg *ngSwitchCase="'dark'" class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+                <svg *ngSwitchDefault class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+              </ng-container>
+            }
+          }
+          <svg class="oat-ts-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="6 9 12 15 18 9"/>
+          </svg>
+        </button>
+        @if (open()) {
+          <div class="oat-ts-menu" role="listbox" aria-label="Select theme">
+            @for (t of resolvedThemes(); track t.value) {
+              <button
+                role="option"
+                type="button"
+                [attr.aria-selected]="current() === t.value"
+                [class.active]="current() === t.value"
+                (click)="pick(t.value)">
+                <ng-container *ngTemplateOutlet="iconTpl()?.tpl ?? null; context: { $implicit: t }" />
+                @if (!iconTpl()) {
+                  @if (t.icon) {
+                    <span class="oat-ts-emoji" aria-hidden="true">{{ t.icon }}</span>
+                  } @else {
+                    <ng-container [ngSwitch]="t.value">
+                      <svg *ngSwitchCase="'light'" class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+                      <svg *ngSwitchCase="'dark'" class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+                      <svg *ngSwitchDefault class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+                    </ng-container>
+                  }
+                }
+                <span>{{ t.label }}</span>
+                @if (current() === t.value) {
+                  <svg class="oat-ts-check" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                       stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <polyline points="20 6 9 17 4 12"/>
+                  </svg>
+                }
+              </button>
+            }
+          </div>
+        }
+      </div>
+    } @else {
+      <div class="oat-ts-toggle" role="radiogroup" aria-label="Theme">
+        @for (t of resolvedThemes(); track t.value) {
+          <button
+            type="button"
+            role="radio"
+            [attr.aria-checked]="current() === t.value"
+            [attr.aria-label]="t.label"
+            [class.active]="current() === t.value"
+            (click)="setTheme(t.value)">
+            <ng-container *ngTemplateOutlet="iconTpl()?.tpl ?? null; context: { $implicit: t }" />
+            @if (!iconTpl()) {
+              @if (t.icon) {
+                <span class="oat-ts-emoji" aria-hidden="true">{{ t.icon }}</span>
+              } @else {
+                <ng-container [ngSwitch]="t.value">
+                  <svg *ngSwitchCase="'light'" class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+                  <svg *ngSwitchCase="'dark'" class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+                  <svg *ngSwitchDefault class="oat-ts-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+                </ng-container>
+              }
+            }
+          </button>
+        }
+      </div>
+    }
+  `, styles: [":host{display:inline-flex}.oat-ts-svg{width:1rem;height:1rem;flex-shrink:0}.oat-ts-emoji{font-size:1rem;line-height:1;flex-shrink:0}.oat-ts-dropdown{position:relative}.oat-ts-trigger{display:inline-flex;align-items:center;gap:var(--space-1);cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-medium);border:1px solid var(--border);background:transparent;color:var(--foreground);transition:background .15s,border-color .15s;line-height:1}.oat-ts-trigger:hover{background:var(--accent)}.oat-ts-trigger:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.oat-ts-chevron{width:.75rem;height:.75rem;opacity:.5}.oat-ts-menu{position:absolute;top:calc(100% + var(--space-1));right:0;z-index:50;min-width:8rem;border:1px solid var(--border);border-radius:var(--radius-medium);background:var(--background);box-shadow:var(--shadow-small);padding:var(--space-1);display:flex;flex-direction:column;animation:oat-ts-fade-in .12s ease-out}@keyframes oat-ts-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.oat-ts-menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-small);cursor:pointer;font-size:var(--text-6);line-height:1.25;color:var(--foreground);transition:background .1s}.oat-ts-menu button:hover,.oat-ts-menu button:focus-visible{background:var(--accent)}.oat-ts-menu button:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}.oat-ts-menu button.active{font-weight:500}.oat-ts-check{width:.875rem;height:.875rem;margin-inline-start:auto;opacity:.7}.oat-ts-toggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-medium);overflow:hidden}.oat-ts-toggle button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:var(--space-1) var(--space-2);cursor:pointer;transition:background .15s;color:var(--muted-foreground, var(--foreground))}.oat-ts-toggle button:hover{background:var(--accent)}.oat-ts-toggle button:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}.oat-ts-toggle button.active{background:var(--accent);color:var(--foreground)}.oat-ts-toggle button+button{border-left:1px solid var(--border)}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], initialTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialTheme", required: false }] }], themes: [{ type: i0.Input, args: [{ isSignal: true, alias: "themes", required: false }] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], iconTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOatThemeSelectorIcon), { isSignal: true }] }] } });
+
 /**
  * Oat-styled text input implementing `FormValueControl<string>`.
  * Works seamlessly with Signal Forms `[formField]` — no CVA needed.
@@ -4868,5 +5510,5 @@ const OAT_VERSION_TOKEN = new InjectionToken('OAT_VERSION', {
  * Generated bundle index. Do not edit.
  */
 
-export { NG_OAT_CHIP_GROUP, NG_OAT_TOGGLE_GROUP, NgOatAccordion, NgOatAlert, NgOatAvatar, NgOatBadge, NgOatBreadcrumb, NgOatButton, NgOatCard, NgOatCardCarousel, NgOatCardFooter, NgOatCardHeader, NgOatCarousel, NgOatCheckbox, NgOatChip, NgOatChipGroup, NgOatChipInput, NgOatDialog, NgOatDialogComponent, NgOatDropdown, NgOatDropdownComponent, NgOatFileUpload, NgOatFormError, NgOatInput, NgOatInputOtp, NgOatMeter, NgOatPagination, NgOatProgress, NgOatRadioGroup, NgOatSearchInput, NgOatSelect, NgOatSeparator, NgOatSidebar, NgOatSidebarComponent, NgOatSkeleton, NgOatSpinner, NgOatSplitButton, NgOatSwitch, NgOatTable, NgOatTabs, NgOatTabsComponent, NgOatTextarea, NgOatThemeRef, NgOatToast, NgOatToggle, NgOatToggleGroup, NgOatTooltip, NgOatTooltipComponent, OAT_TOKEN_MAP, OAT_VERSION, OAT_VERSION_TOKEN, TOOLTIP_POSITIONER, provideNgOat, provideNgOatTheme };
+export { NG_OAT_CHIP_GROUP, NG_OAT_TOGGLE_GROUP, NgOatAccordion, NgOatAlert, NgOatAvatar, NgOatBadge, NgOatBreadcrumb, NgOatButton, NgOatCard, NgOatCardCarousel, NgOatCardFooter, NgOatCardHeader, NgOatCarousel, NgOatCheckbox, NgOatChip, NgOatChipGroup, NgOatChipInput, NgOatDialog, NgOatDialogComponent, NgOatDropdown, NgOatDropdownComponent, NgOatFileUpload, NgOatFormError, NgOatInput, NgOatInputOtp, NgOatMeter, NgOatPagination, NgOatProgress, NgOatRadioGroup, NgOatSearchInput, NgOatSelect, NgOatSeparator, NgOatSidebar, NgOatSidebarComponent, NgOatSkeleton, NgOatSpinner, NgOatSplitButton, NgOatSwitch, NgOatTable, NgOatTabs, NgOatTabsComponent, NgOatTextarea, NgOatThemeRef, NgOatThemeSelector, NgOatThemeSelectorIcon, NgOatToast, NgOatToggle, NgOatToggleGroup, NgOatToolbar, NgOatToolbarRow, NgOatTooltip, NgOatTooltipComponent, OAT_TOKEN_MAP, OAT_VERSION, OAT_VERSION_TOKEN, TOOLTIP_POSITIONER, provideNgOat, provideNgOatTheme };
 //# sourceMappingURL=letsprogram-ng-oat.mjs.map