@letsprogram/ng-oat 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@letsprogram/ng-oat",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Angular component library built on top of the Oat CSS framework — signals-first, lightweight, and accessible.",
   "license": "MIT",
   "author": "SashiKumar Yadav",
@@ -36,9 +36,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "module": "fesm2022/letsprogram-ng-oat.mjs",
-  "typings": "types/letsprogram-ng-oat.d.ts",
   "exports": {
+    "./assets/*": {
+      "default": "./assets/*"
+    },
+    "./src/lib/styles/*": {
+      "default": "./src/lib/styles/*"
+    },
+    "./src/lib/tokens/*": {
+      "default": "./src/lib/tokens/*"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -50,5 +57,7 @@
       "types": "./types/letsprogram-ng-oat-cdk.d.ts",
       "default": "./fesm2022/letsprogram-ng-oat-cdk.mjs"
     }
-  }
+  },
+  "module": "fesm2022/letsprogram-ng-oat.mjs",
+  "typings": "types/letsprogram-ng-oat.d.ts"
 }

package/types/letsprogram-ng-oat.d.ts

@@ -5,25 +5,35 @@ import { FormCheckboxControl, FormValueControl, ValidationError, FieldState } fr
 /** Configuration for provideNgOat() */
 interface NgOatOptions {
     assets?: {
-        /** How to load Oat CSS. 'auto' = 'link'. false = skip. */
-        css?: 'auto' | 'link' | 'import' | false;
-        /** How to load Oat JS. 'auto' = 'script'. false = skip. */
-        js?: 'auto' | 'script' | false;
+        /**
+         * How to load Oat CSS at runtime.
+         * - `false` (default) — CSS is loaded via angular.json styles array or styles.css import (recommended).
+         * - `'link'` — dynamically inject a `<link>` tag (requires assets glob in angular.json).
+         */
+        css?: 'link' | false;
     };
-    /** Register ot-tabs/ot-dropdown custom elements from Oat JS (default: true). */
-    registerWebComponents?: boolean;
-    /** Base path for vendored Oat assets (default: 'assets/oat'). */
+    /**
+     * Base path for vendored Oat assets when using dynamic CSS injection (`css: 'link'`).
+     * Only relevant if you opted into runtime injection AND configured an assets glob
+     * to copy files from `node_modules/@letsprogram/ng-oat/assets/oat` to this path.
+     * Default: `'assets/oat'`.
+     */
     basePath?: string;
 }
 /**
- * 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' }`
  */
 declare function provideNgOat(options?: NgOatOptions): EnvironmentProviders;
 
@@ -319,10 +329,12 @@ declare class NgOatSidebar {
 }
 
 /**
- * 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
@@ -350,10 +362,13 @@ declare class NgOatTabs {
         index: number;
         tab: HTMLElement;
     }>;
-    private tabChangeListener;
+    private tabEls;
+    private panelEls;
+    private cleanupFns;
     constructor();
     /** Programmatically select a tab by index */
     selectTab(index: number): void;
+    private activate;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatTabs, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgOatTabs, "ot-tabs[ngOatTabs], [ngOatTabs]", ["ngOatTabs"], {}, { "ngOatTabChange": "ngOatTabChange"; }, never, never, true, never>;
 }
@@ -403,9 +418,9 @@ declare class NgOatDialog {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgOatDialog, "dialog[ngOatDialog]", ["ngOatDialog"], {}, { "ngOatDialogClose": "ngOatDialogClose"; }, never, never, true, never>;
 }
 
-/** Toast placement positions (matches Oat's toast system) */
+/** Toast placement positions */
 type NgOatToastPlacement = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-/** Toast variants (matches Oat's toast system) */
+/** Toast variants */
 type NgOatToastVariant = 'info' | 'success' | 'danger' | 'warning';
 /** Options for showing a toast */
 interface NgOatToastOptions {
@@ -419,10 +434,11 @@ interface NgOatToastOptions {
     dismissible?: boolean;
 }
 /**
- * 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
@@ -436,7 +452,8 @@ interface NgOatToastOptions {
 declare class NgOatToast {
     private platformId;
     private doc;
-    private get ot();
+    /** Cache of toast containers keyed by placement */
+    private containers;
     success(message: string, title?: string, options?: Omit<NgOatToastOptions, 'variant'>): void;
     info(message: string, title?: string, options?: Omit<NgOatToastOptions, 'variant'>): void;
     warning(message: string, title?: string, options?: Omit<NgOatToastOptions, 'variant'>): void;
@@ -444,7 +461,6 @@ declare class NgOatToast {
     show(message: string, title?: string, options?: NgOatToastOptions): HTMLElement | void;
     /**
      * Show a toast from a DOM element or template element.
-     * For Angular TemplateRef, use showTemplate() instead.
      */
     showElement(element: HTMLElement, options?: NgOatToastOptions): void;
     /**
@@ -454,6 +470,12 @@ declare class NgOatToast {
     showTemplate(templateRef: TemplateRef<any>, vcr: ViewContainerRef, options?: NgOatToastOptions): void;
     /** Dismiss toasts. If placement given, only that position; otherwise all. */
     dismiss(placement?: NgOatToastPlacement): void;
+    /** Get or create a toast container for the given placement */
+    private getContainer;
+    /** Show a prepared element as a toast */
+    private showEl;
+    /** Remove a toast with exit animation */
+    private removeToast;
     /** Add a close button to a toast element */
     private addCloseButton;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatToast, never>;
@@ -835,6 +857,9 @@ declare class NgOatDropdownComponent {
     open(): void;
     close(): void;
     toggle(): void;
+    /** Keyboard navigation for menu items (ArrowDown/Up/Home/End/Escape) */
+    private onKeydown;
+    private doc;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatDropdownComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatDropdownComponent, "ng-oat-dropdown", never, {}, { "openChange": "openChange"; }, never, ["[trigger]", "*"], true, never>;
 }
@@ -1504,6 +1529,169 @@ declare class NgOatCardCarousel implements AfterViewInit, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatCardCarousel, "ng-oat-card-carousel", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "showSeeAll": { "alias": "showSeeAll"; "required": false; "isSignal": true; }; "scrollAmount": { "alias": "scrollAmount"; "required": false; "isSignal": true; }; }, { "seeAllClick": "seeAllClick"; "cardClick": "cardClick"; }, never, never, true, never>;
 }
 
+type NgOatToolbarColor = 'default' | 'primary' | 'accent';
+/**
+ * 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>
+ * ```
+ */
+declare class NgOatToolbar {
+    readonly color: _angular_core.InputSignal<NgOatToolbarColor>;
+    readonly dense: _angular_core.InputSignal<boolean>;
+    readonly fixed: _angular_core.InputSignal<boolean>;
+    protected attrVariant: _angular_core.Signal<"primary" | "accent" | null>;
+    protected navClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatToolbar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatToolbar, "ng-oat-toolbar", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "fixed": { "alias": "fixed"; "required": false; "isSignal": true; }; }, {}, never, ["[toolbarStart]", "*", "[toolbarEnd]"], true, never>;
+}
+/**
+ * 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>
+ * ```
+ */
+declare class NgOatToolbarRow {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatToolbarRow, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatToolbarRow, "ng-oat-toolbar-row", never, {}, {}, never, ["*"], true, never>;
+}
+
+type NgOatTheme = 'light' | 'dark' | 'system';
+/** Describes one option in the theme selector. */
+interface NgOatThemeOption {
+    /** The theme value written to localStorage / emitted. */
+    value: NgOatTheme;
+    /** Human-readable label shown in dropdown items. */
+    label: string;
+    /** Optional text/emoji shown instead of the built-in SVG icon. */
+    icon?: string;
+}
+/**
+ * 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>
+ * ```
+ */
+declare class NgOatThemeSelectorIcon {
+    readonly tpl: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatThemeSelectorIcon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgOatThemeSelectorIcon, "ng-template[ngOatThemeSelectorIcon]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * 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)" />
+ * ```
+ */
+declare class NgOatThemeSelector implements OnInit {
+    /** Display mode: dropdown menu or inline toggle group */
+    readonly mode: _angular_core.InputSignal<"dropdown" | "toggle">;
+    /** Initial theme (overrides localStorage if set) */
+    readonly initialTheme: _angular_core.InputSignal<NgOatTheme | undefined>;
+    /**
+     * 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: '🖥️' },
+     *   ]" />
+     * ```
+     */
+    readonly themes: _angular_core.InputSignal<NgOatThemeOption[]>;
+    /** Emits when the user picks a theme */
+    readonly themeChange: _angular_core.OutputEmitterRef<NgOatTheme>;
+    /** Current active theme */
+    readonly current: _angular_core.WritableSignal<NgOatTheme>;
+    readonly open: _angular_core.WritableSignal<boolean>;
+    /** Content-projected custom icon template */
+    protected readonly iconTpl: _angular_core.Signal<NgOatThemeSelectorIcon | undefined>;
+    /** Resolved themes (input or defaults) */
+    protected resolvedThemes: _angular_core.Signal<NgOatThemeOption[]>;
+    /** The currently active option object */
+    protected activeOption: _angular_core.Signal<NgOatThemeOption>;
+    private doc;
+    private platformId;
+    private mediaQuery;
+    private mediaListener;
+    /** Toggle the dropdown open/closed */
+    toggleOpen(): void;
+    /** Pick a theme and close the dropdown */
+    pick(theme: NgOatTheme): void;
+    /** Keyboard handler for Escape and arrow-key navigation inside the menu */
+    onHostKey(e: KeyboardEvent): void;
+    ngOnInit(): void;
+    setTheme(theme: NgOatTheme): void;
+    private applyResolved;
+    private onDocClick;
+    /** @internal */
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatThemeSelector, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatThemeSelector, "ng-oat-theme-selector", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "initialTheme": { "alias": "initialTheme"; "required": false; "isSignal": true; }; "themes": { "alias": "themes"; "required": false; "isSignal": true; }; }, { "themeChange": "themeChange"; }, ["iconTpl"], never, true, never>;
+}
+
 type NgOatInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color';
 /**
  * Oat-styled text input implementing `FormValueControl<string>`.
@@ -1732,5 +1920,5 @@ interface TooltipPositioner {
 /** DI token for tooltip positioning strategy */
 declare const TOOLTIP_POSITIONER: InjectionToken<TooltipPositioner>;
 
-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 type { NgOatAccordionItem, NgOatAlertVariant, NgOatAvatarSize, NgOatBadgeVariant, NgOatButtonSize, NgOatButtonStyle, NgOatButtonVariant, NgOatCarouselAspectRatio, NgOatCarouselOrientation, NgOatCarouselSlide, NgOatChipGroupHost, NgOatChipSize, NgOatChipVariant, NgOatInputType, NgOatOptions, NgOatProductCard, NgOatRadioOption, NgOatSelectOption, NgOatSeparatorOrientation, NgOatSkeletonType, NgOatSpinnerSize, NgOatTabItem, NgOatTableColumn, NgOatThemeConfig, NgOatToastOptions, NgOatToastPlacement, NgOatToastVariant, NgOatToggleGroupHost, NgOatToggleGroupSize, NgOatToggleGroupVariant, NgOatToggleSize, NgOatToggleVariant, OatBreadcrumbItem, OatTokens, Placement, TooltipPositioner };
+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 };
+export type { NgOatAccordionItem, NgOatAlertVariant, NgOatAvatarSize, NgOatBadgeVariant, NgOatButtonSize, NgOatButtonStyle, NgOatButtonVariant, NgOatCarouselAspectRatio, NgOatCarouselOrientation, NgOatCarouselSlide, NgOatChipGroupHost, NgOatChipSize, NgOatChipVariant, NgOatInputType, NgOatOptions, NgOatProductCard, NgOatRadioOption, NgOatSelectOption, NgOatSeparatorOrientation, NgOatSkeletonType, NgOatSpinnerSize, NgOatTabItem, NgOatTableColumn, NgOatTheme, NgOatThemeConfig, NgOatThemeOption, NgOatToastOptions, NgOatToastPlacement, NgOatToastVariant, NgOatToggleGroupHost, NgOatToggleGroupSize, NgOatToggleGroupVariant, NgOatToggleSize, NgOatToggleVariant, NgOatToolbarColor, OatBreadcrumbItem, OatTokens, Placement, TooltipPositioner };

package/assets/oat/js/base.js

@@ -1,107 +0,0 @@
-// oat - Base Web Component Class
-// Provides lifecycle management, event handling, and utilities.
-
-export class OtBase extends HTMLElement {
-  #initialized = false;
-
-  // Called when element is added to DOM.
-  connectedCallback() {
-    if (this.#initialized) return;
-
-    // Wait for DOM to be ready.
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => this.#setup(), { once: true });
-    } else {
-      this.#setup();
-    }
-  }
-
-  // Private setup to ensure that init() is only called once.
-  #setup() {
-    if (this.#initialized) return;
-    this.#initialized = true;
-    this.init();
-  }
-
-  // Called when element is removed from DOM.
-  disconnectedCallback() {
-    this.cleanup();
-  }
-
-  // Override in subclass for cleanup logic.
-  cleanup() {}
-
-  // Central event handler - enables automatic cleanup.
-  // Usage: element.addEventListener('click', this)
-  handleEvent(event) {
-    const handler = this[`on${event.type}`];
-    if (handler) handler.call(this, event);
-  }
-
-  // Given a keyboard event (left, right, home, end), the current selection idx
-  // total items in a list, return 0-n index of the next/previous item
-  // for doing a roving keyboard nav.
-  keyNav(event, idx, len, prevKey, nextKey, homeEnd = false) {
-    const { key } = event;
-    let next = -1;
-
-    if (key === nextKey) {
-      next = (idx + 1) % len;
-    } else if (key === prevKey) {
-      next = (idx - 1 + len) % len;
-    } else if (homeEnd) {
-      if (key === 'Home') {
-        next = 0;
-      } else if (key === 'End') {
-        next = len - 1;
-      }
-    }
-
-    if (next >= 0) event.preventDefault();
-    return next;
-  }
-
-  // Emit a custom event.
-  emit(name, detail = null) {
-    return this.dispatchEvent(new CustomEvent(name, {
-      bubbles: true,
-      composed: true,
-      cancelable: true,
-      detail
-    }));
-  }
-
-  // Query selector within this element.
-  $(selector) {
-    return this.querySelector(selector);
-  }
-
-  // Query selector all within this element.
-  $$(selector) {
-    return Array.from(this.querySelectorAll(selector));
-  }
-
-  // Generate a unique ID string.
-  uid() {
-    return Math.random().toString(36).slice(2, 10);
-  }
-}
-
-// Polyfill for command/commandfor (Safari)
-if (!('commandForElement' in HTMLButtonElement.prototype)) {
-  document.addEventListener('click', e => {
-    const btn = e.target.closest('button[commandfor]');
-    if (!btn) return;
-
-    const target = document.getElementById(btn.getAttribute('commandfor'));
-    if (!target) return;
-
-    const command = btn.getAttribute('command') || 'toggle';
-
-    if (target instanceof HTMLDialogElement) {
-      if (command === 'show-modal') target.showModal();
-      else if (command === 'close') target.close();
-      else target.open ? target.close() : target.showModal();
-    }
-  });
-}

package/assets/oat/js/dropdown.js

@@ -1,74 +0,0 @@
-/**
- * oat - Dropdown Component
- * Provides positioning, keyboard navigation, and ARIA state management.
- *
- * Usage:
- * <ot-dropdown>
- *   <button popovertarget="menu-id">Options</button>
- *   <menu popover id="menu-id">
- *     <button role="menuitem">Item 1</button>
- *     <button role="menuitem">Item 2</button>
- *   </menu>
- * </ot-dropdown>
- */
-
-import { OtBase } from './base.js';
-
-class OtDropdown extends OtBase {
-  #menu;
-  #trigger;
-  #position;
-  #items;
-
-  init() {
-    this.#menu = this.$('[popover]');
-    this.#trigger = this.$('[popovertarget]');
-
-    if (!this.#menu || !this.#trigger) return;
-
-    this.#menu.addEventListener('toggle', this);
-    this.#menu.addEventListener('keydown', this);
-
-    this.#position = () => {
-      // Position has to be calculated and applied manually because
-      // popover positioning is like fixed, relative to the window.
-      const r = this.#trigger.getBoundingClientRect();
-      const m = this.#menu.getBoundingClientRect();
-
-      // Flip if menu overflows viewport.
-      this.#menu.style.top = `${r.bottom + m.height > window.innerHeight ? r.top - m.height : r.bottom}px`;
-      this.#menu.style.left = `${r.left + m.width > window.innerWidth ? r.right - m.width : r.left}px`;
-    };
-  }
-
-  ontoggle(e) {
-    if (e.newState === 'open') {
-      this.#position();
-      window.addEventListener('scroll', this.#position, true);
-      window.addEventListener('resize', this.#position);
-      this.#items = this.$$('[role="menuitem"]');
-      this.#items[0]?.focus();
-      this.#trigger.ariaExpanded = 'true';
-    } else {
-      this.cleanup();
-      this.#items = null;
-      this.#trigger.ariaExpanded = 'false';
-      this.#trigger.focus();
-    }
-  }
-
-  onkeydown(e) {
-    if (!e.target.matches('[role="menuitem"]')) return;
-
-    const idx = this.#items.indexOf(e.target);
-    const next = this.keyNav(e, idx, this.#items.length, 'ArrowUp', 'ArrowDown', true);
-    if (next >= 0) this.#items[next].focus();
-  }
-
-  cleanup() {
-    window.removeEventListener('scroll', this.#position, true);
-    window.removeEventListener('resize', this.#position);
-  }
-}
-
-customElements.define('ot-dropdown', OtDropdown);

package/assets/oat/js/index.js

@@ -1,12 +0,0 @@
-import './base.js';
-import './tabs.js';
-import './dropdown.js';
-import './tooltip.js';
-import './sidebar.js';
-import { toast, toastEl, toastClear } from './toast.js';
-
-// Register the global window.ot.* APIs.
-const ot = window.ot || (window.ot = {});
-ot.toast = toast;
-ot.toast.el = toastEl;
-ot.toast.clear = toastClear;

package/assets/oat/js/sidebar.js

@@ -1,22 +0,0 @@
-/**
- * Sidebar toggle handler
- * Toggles data-sidebar-open on layout when toggle button is clicked
- */
-document.addEventListener('click', (e) => {
-  const toggle = e.target.closest('[data-sidebar-toggle]');
-  if (toggle) {
-    const layout = toggle.closest('[data-sidebar-layout]');
-    layout?.toggleAttribute('data-sidebar-open');
-    return;
-  }
-
-  // Dismiss sidebar when clicking outside (when sidebar is not an overlay).
-  if (!e.target.closest('[data-sidebar]')) {
-    const layout = document.querySelector('[data-sidebar-layout][data-sidebar-open]');
-    // Hardcode breakpoint (for now) as there's no way to use a CSS variable in
-    // the @media{} query which could've been picked up here.
-    if (layout && window.matchMedia('(max-width: 768px)').matches) {
-      layout.removeAttribute('data-sidebar-open');
-    }
-  }
-});

package/assets/oat/js/tabs.js

@@ -1,94 +0,0 @@
-/**
- * oat - Tabs Component
- * Provides keyboard navigation and ARIA state management.
- *
- * Usage:
- * <ot-tabs>
- *   <div role="tablist">
- *     <button role="tab">Tab 1</button>
- *     <button role="tab">Tab 2</button>
- *   </div>
- *   <div role="tabpanel">Content 1</div>
- *   <div role="tabpanel">Content 2</div>
- * </ot-tabs>
- */
-
-import { OtBase } from './base.js';
-
-class OtTabs extends OtBase {
-  #tabs = [];
-  #panels = [];
-
-  init() {
-    const tablist = this.$(':scope > [role="tablist"]');
-    this.#tabs = tablist ? [...tablist.querySelectorAll('[role="tab"]')] : [];
-    this.#panels = this.$$(':scope > [role="tabpanel"]');
-
-    if (this.#tabs.length === 0 || this.#panels.length === 0) {
-      console.warn('ot-tabs: Missing tab or tabpanel elements');
-      return;
-    }
-
-    // Generate IDs and set up ARIA.
-    this.#tabs.forEach((tab, i) => {
-      const panel = this.#panels[i];
-      if (!panel) return;
-
-      const tabId = tab.id || `ot-tab-${this.uid()}`;
-      const panelId = panel.id || `ot-panel-${this.uid()}`;
-
-      tab.id = tabId;
-      panel.id = panelId;
-      tab.setAttribute('aria-controls', panelId);
-      panel.setAttribute('aria-labelledby', tabId);
-    });
-
-    tablist.addEventListener('click', this);
-    tablist.addEventListener('keydown', this);
-
-    // Find initially active tab or default to first.
-    const activeTab = this.#tabs.findIndex(t => t.ariaSelected === 'true');
-    this.#activate(activeTab >= 0 ? activeTab : 0);
-  }
-
-  onclick(e) {
-    const index = this.#tabs.indexOf(e.target.closest('[role="tab"]'));
-    if (index >= 0) this.#activate(index);
-  }
-
-  onkeydown(e) {
-    if (!e.target.closest('[role="tab"]')) return;
-
-    const next = this.keyNav(e, this.activeIndex, this.#tabs.length, 'ArrowLeft', 'ArrowRight');
-    if (next >= 0) {
-      this.#activate(next);
-      this.#tabs[next].focus();
-    }
-  }
-
-  #activate(idx) {
-    this.#tabs.forEach((tab, i) => {
-      const isActive = i === idx;
-      tab.ariaSelected = String(isActive);
-      tab.tabIndex = isActive ? 0 : -1;
-    });
-
-    this.#panels.forEach((panel, i) => {
-      panel.hidden = i !== idx;
-    });
-
-    this.emit('ot-tab-change', { index: idx, tab: this.#tabs[idx] });
-  }
-
-  get activeIndex() {
-    return this.#tabs.findIndex(t => t.ariaSelected === 'true');
-  }
-
-  set activeIndex(value) {
-    if (value >= 0 && value < this.#tabs.length) {
-      this.#activate(value);
-    }
-  }
-}
-
-customElements.define('ot-tabs', OtTabs);