@mhmo91/schmancy 0.10.23 → 0.10.25

package/dist/mixins-DySzfmal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixins-DySzfmal.js","names":[],"sources":["../mixins/discovery.service.ts","../src/theme/context.ts","../mixins/baseElement.ts","../mixins/tailwind.css?inline","../mixins/tailwind.mixin.ts","../mixins/SchmancyElement.ts","../mixins/formField.mixin.ts","../mixins/litElement.mixin.ts","../src/surface/surface.styles.ts","../mixins/surface.mixin.ts"],"sourcesContent":["import { fromEvent, timer, race, Observable } from 'rxjs'\nimport { takeUntil, map, defaultIfEmpty, take } from 'rxjs/operators'\n\n/**\n * Global discovery event names\n */\nconst DISCOVER_EVENT = 'schmancy-discover'\nconst DISCOVER_RESPONSE_EVENT = 'schmancy-discover-response'\n\n/**\n * Discovery request detail\n */\ninterface DiscoverRequest {\n\tselector: string\n\trequestId: string\n}\n\n/**\n * Discovery response detail\n */\ninterface DiscoverResponse {\n\trequestId: string\n\telement: HTMLElement\n}\n\n/**\n * Discover a component in the DOM using the WhereAreYou/HereIAm pattern.\n *\n * @param componentTag - The tag name of the component to discover (e.g., 'schmancy-navigation-rail')\n * @param timeout - How long to wait for a response in milliseconds (default: 100)\n * @returns Observable that emits the discovered component or null if not found\n */\nexport function discoverComponent<T extends HTMLElement>(\n\tcomponentTag: string,\n\ttimeout = 100,\n): Observable<T | null> {\n\tconst whereAreYouEvent = `${componentTag}-where-are-you`\n\tconst hereIAmEvent = `${componentTag}-here-i-am`\n\n\treturn new Observable(subscriber => {\n\t\t// Listen for response first (you were right!)\n\t\tconst subscription = fromEvent<CustomEvent>(window, hereIAmEvent)\n\t\t\t.pipe(\n\t\t\t\ttakeUntil(timer(timeout)),\n\t\t\t\tmap(e => e.detail.component as T),\n\t\t\t\tdefaultIfEmpty(null),\n\t\t\t)\n\t\t\t.subscribe(component => {\n\t\t\t\tsubscriber.next(component)\n\t\t\t\tsubscriber.complete()\n\t\t\t})\n\n\t\t// Then dispatch discovery request\n\t\twindow.dispatchEvent(\n\t\t\tnew CustomEvent(whereAreYouEvent, {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Return cleanup function\n\t\treturn () => subscription.unsubscribe()\n\t})\n}\n\n/**\n * Discover any of multiple components using race.\n * Returns the first component that responds.\n *\n * @param componentTags - Array of component tag names to discover\n * @returns Observable that emits the first discovered component or null if none found\n */\nexport function discoverAnyComponent<T extends HTMLElement>(...componentTags: string[]): Observable<T | null> {\n\tif (componentTags.length === 0) {\n\t\treturn new Observable(subscriber => {\n\t\t\tsubscriber.next(null)\n\t\t\tsubscriber.complete()\n\t\t})\n\t}\n\n\treturn race(...componentTags.map(tag => discoverComponent<T>(tag)))\n}\n\n/**\n * Universal element discovery - finds ANY element by CSS selector across shadow DOM boundaries.\n * Uses event-based discovery pattern - no DOM traversal needed.\n *\n * How it works:\n * 1. Broadcasts a discovery request event on window\n * 2. All $LitElement components receive this event and check their shadow DOM\n * 3. If a match is found, they respond with the element\n *\n * @param selector - CSS selector (e.g., '#my-id', '.my-class', '[data-attr]')\n * @param timeout - How long to wait for a response in milliseconds (default: 150)\n * @returns Observable that emits the discovered element or null if not found\n *\n * @example\n * ```typescript\n * // Find element by ID across shadow boundaries\n * discoverElement('#app-card').subscribe(el => {\n *   if (el) console.log('Found:', el)\n * })\n *\n * // Find element by class\n * discoverElement('.special-button').subscribe(el => {...})\n * ```\n */\nexport function discoverElement<T extends HTMLElement>(\n\tselector: string,\n\ttimeout = 150,\n): Observable<T | null> {\n\tconst requestId = `discover-${Date.now()}-${Math.random().toString(36).slice(2)}`\n\n\treturn new Observable(subscriber => {\n\t\t// Listen for response first\n\t\tconst subscription = fromEvent<CustomEvent<DiscoverResponse>>(window, DISCOVER_RESPONSE_EVENT)\n\t\t\t.pipe(\n\t\t\t\ttakeUntil(timer(timeout)),\n\t\t\t\tmap(e => e.detail),\n\t\t\t\t// Filter for our specific request\n\t\t\t\tmap(detail => (detail.requestId === requestId ? (detail.element as T) : null)),\n\t\t\t\t// Only take the first non-null response\n\t\t\t\ttake(1),\n\t\t\t\tdefaultIfEmpty(null),\n\t\t\t)\n\t\t\t.subscribe(element => {\n\t\t\t\tsubscriber.next(element)\n\t\t\t\tsubscriber.complete()\n\t\t\t})\n\n\t\t// Broadcast discovery request\n\t\twindow.dispatchEvent(\n\t\t\tnew CustomEvent<DiscoverRequest>(DISCOVER_EVENT, {\n\t\t\t\tdetail: { selector, requestId },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\treturn () => subscription.unsubscribe()\n\t})\n}\n\n/**\n * Discover multiple elements matching a selector.\n * Collects all responses within the timeout period.\n *\n * @param selector - CSS selector\n * @param timeout - How long to collect responses (default: 150ms)\n * @returns Observable that emits array of discovered elements\n */\nexport function discoverAllElements<T extends HTMLElement>(\n\tselector: string,\n\ttimeout = 150,\n): Observable<T[]> {\n\tconst requestId = `discover-all-${Date.now()}-${Math.random().toString(36).slice(2)}`\n\tconst elements: T[] = []\n\n\treturn new Observable(subscriber => {\n\t\t// Collect all responses\n\t\tconst subscription = fromEvent<CustomEvent<DiscoverResponse>>(window, DISCOVER_RESPONSE_EVENT)\n\t\t\t.pipe(takeUntil(timer(timeout)))\n\t\t\t.subscribe({\n\t\t\t\tnext: e => {\n\t\t\t\t\tif (e.detail.requestId === requestId) {\n\t\t\t\t\t\telements.push(e.detail.element as T)\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tcomplete: () => {\n\t\t\t\t\tsubscriber.next(elements)\n\t\t\t\t\tsubscriber.complete()\n\t\t\t\t},\n\t\t\t})\n\n\t\t// Broadcast discovery request\n\t\twindow.dispatchEvent(\n\t\t\tnew CustomEvent<DiscoverRequest>(DISCOVER_EVENT, {\n\t\t\t\tdetail: { selector, requestId },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\treturn () => subscription.unsubscribe()\n\t})\n}\n\n/**\n * Smart discovery - automatically detects if input is a CSS selector or component tag.\n *\n * @param query - CSS selector (starts with #, ., [) OR component tag name\n * @param timeout - How long to wait (default: 150ms)\n * @returns Observable that emits the discovered element or null\n *\n * @example\n * ```typescript\n * // CSS selector - uses discoverElement\n * discover('#my-element').subscribe(...)\n *\n * // Component tag - uses discoverComponent\n * discover('schmancy-fancy').subscribe(...)\n * ```\n */\nexport function discover<T extends HTMLElement>(\n\tquery: string,\n\ttimeout = 150,\n): Observable<T | null> {\n\t// Check if it's a CSS selector (starts with #, ., or [)\n\tconst isCssSelector = /^[#.\\[]/.test(query)\n\n\tif (isCssSelector) {\n\t\treturn discoverElement<T>(query, timeout)\n\t}\n\n\t// Otherwise treat as component tag name\n\treturn discoverComponent<T>(query, timeout)\n}\n\n// Export event names for use in baseElement\nexport { DISCOVER_EVENT, DISCOVER_RESPONSE_EVENT }\nexport type { DiscoverRequest, DiscoverResponse }\n","import { createContext } from '@lit/context'\nimport { TSchmancyTheme } from './theme.interface'\n\n/**\n * Lit Context for sharing theme configuration across components.\\n *\n * This context is provided by SchmancyThemeComponent and can be consumed\n * by any child component to access the current theme configuration.\n *\n * @type {Context<Partial<TSchmancyTheme>>}\n *\n * @example\n * ```typescript\n * import { consume } from '@lit/context'\n * import { themeContext } from '@schmancy/theme'\n *\n * class MyComponent extends LitElement {\n *   @consume({ context: themeContext })\n *   theme?: Partial<TSchmancyTheme>\n *\n *   render() {\n *     // Access theme variables\n *     const primaryColor = this.theme?.sys?.color?.primary?.default\n *     // ...\n *   }\n * }\n * ```\n */\nexport const themeContext = createContext<Partial<TSchmancyTheme>>('theme-context')\n","import type { Constructor } from './constructor'\nimport { LitElement } from 'lit'\nimport { Subject, fromEvent, Observable } from 'rxjs'\nimport { takeUntil } from 'rxjs/operators'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { discoverComponent, DISCOVER_EVENT, DISCOVER_RESPONSE_EVENT, type DiscoverRequest } from './discovery.service'\nimport { consume } from '@lit/context'\nimport { themeContext } from '../src/theme/context'\nimport type { TSchmancyTheme } from '../src/theme/theme.interface'\n\nexport declare class IBaseMixin {\n\tdisconnecting: Subject<boolean>\n\tclassMap: typeof classMap\n\tstyleMap: typeof styleMap\n\tdiscover<T extends HTMLElement>(tag: string): Observable<T | null>\n\treadonly stableId: string\n\tuid: string\n\t/**\n\t * Current locale from theme context. Use with Intl.NumberFormat/DateTimeFormat.\n\t * Defaults to navigator.language if no theme provider is found.\n\t * @example new Intl.NumberFormat(this.locale).format(1234.56)\n\t */\n\treadonly locale: string\n\tdispatchScopedEvent<T>(eventName: string, detail?: T, options?: { bubbles?: boolean; composed?: boolean }): void\n}\n\nexport const BaseElement = <T extends Constructor<LitElement>>(superClass: T) => {\n\tclass BaseElement extends superClass {\n\t\tdisconnecting = new Subject<boolean>()\n\t\tprivate _stableId?: string\n\t\tprivate _uid?: string\n\n\t\t@consume({ context: themeContext, subscribe: true })\n\t\tprivate _theme?: Partial<TSchmancyTheme>\n\n\t\t/** Current locale from theme context. Falls back to navigator.language. */\n\t\tget locale(): string {\n\t\t\treturn this._theme?.locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'de-DE')\n\t\t}\n\n\t\t/** Stable ID from DOM path - lazy, only computed on first access */\n\t\tget stableId(): string {\n\t\t\tif (this._stableId) return this._stableId\n\t\t\tconst path: string[] = []\n\t\t\tfor (let el: Element | null = this; el?.parentElement && path.length < 5; el = el.parentElement) {\n\t\t\t\tconst tag = el.tagName.toLowerCase()\n\t\t\t\tconst siblings = Array.from(el.parentElement.children).filter(c => c.tagName === el!.tagName)\n\t\t\t\tpath.unshift(siblings.length > 1 ? `${tag}:nth-of-type(${siblings.indexOf(el) + 1})` : tag)\n\t\t\t}\n\t\t\tconst hash = Array.from(path.join('>')).reduce((h, c) => Math.imul(31, h) + c.charCodeAt(0) | 0, 0)\n\t\t\treturn this._stableId = `el-${Math.abs(hash).toString(36)}`\n\t\t}\n\n\t\t/**\n\t\t * Unique instance ID - can be overridden via attribute, otherwise auto-generated.\n\t\t * Usage: <my-component uid=\"custom-id\"> or let it auto-generate\n\t\t */\n\t\tget uid(): string {\n\t\t\t// Check if uid was set via attribute\n\t\t\tconst attrUid = this.getAttribute('uid')\n\t\t\tif (attrUid) return attrUid\n\n\t\t\t// Auto-generate if not set\n\t\t\tif (!this._uid) {\n\t\t\t\tthis._uid = `el-${crypto.randomUUID()}`\n\t\t\t}\n\t\t\treturn this._uid\n\t\t}\n\n\t\tset uid(value: string) {\n\t\t\tif (value) {\n\t\t\t\tthis.setAttribute('uid', value)\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute('uid')\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Dispatch an event scoped to this component instance.\n\t\t * Emits BOTH scoped event (eventName::uid) and generic event for backward compatibility.\n\t\t * This prevents event collision between multiple instances of the same component.\n\t\t */\n\t\tdispatchScopedEvent<T>(eventName: string, detail?: T, options: { bubbles?: boolean; composed?: boolean } = {}): void {\n\t\t\tconst { bubbles = false, composed = true } = options\n\n\t\t\t// Emit scoped event for new code\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent(`${eventName}::${this.uid}`, {\n\t\t\t\t\tdetail,\n\t\t\t\t\tbubbles,\n\t\t\t\t\tcomposed,\n\t\t\t\t})\n\t\t\t)\n\n\t\t\t// Emit generic event for backward compatibility\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent(eventName, {\n\t\t\t\t\tdetail,\n\t\t\t\t\tbubbles,\n\t\t\t\t\tcomposed,\n\t\t\t\t})\n\t\t\t)\n\t\t}\n\n\t\tclassMap(classes: Record<string, boolean>) {\n\t\t\tconst newClasses: Record<string, boolean> = {}\n\t\t\tObject.keys(classes).forEach(key => {\n\t\t\t\tkey\n\t\t\t\t\t.trim()\n\t\t\t\t\t.split(' ')\n\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t.forEach(k => {\n\t\t\t\t\t\tnewClasses[k] = classes[key]\n\t\t\t\t\t})\n\t\t\t})\n\t\t\treturn classMap(newClasses)\n\t\t}\n\n\t\tstyleMap(styles: Record<string, string | number>) {\n\t\t\treturn styleMap(styles)\n\t\t}\n\n\t\tconnectedCallback() {\n\t\t\tsuper.connectedCallback()\n\t\t\tthis.setupDiscoveryResponse()\n\t\t}\n\n\t\tprivate setupDiscoveryResponse() {\n\t\t\tconst tagName = this.tagName.toLowerCase()\n\t\t\tconst whereAreYouEvent = `${tagName}-where-are-you`\n\t\t\tconst hereIAmEvent = `${tagName}-here-i-am`\n\n\t\t\t// 1. Component tag discovery (e.g., 'schmancy-fancy-where-are-you')\n\t\t\tfromEvent(window, whereAreYouEvent)\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(() => {\n\t\t\t\t\twindow.dispatchEvent(\n\t\t\t\t\t\tnew CustomEvent(hereIAmEvent, {\n\t\t\t\t\t\t\tdetail: { component: this },\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t}),\n\t\t\t\t\t)\n\t\t\t\t})\n\n\t\t\t// 2. CSS selector discovery (e.g., '#app-card', '.my-class', '[uid=\"xyz\"]')\n\t\t\tfromEvent<CustomEvent<DiscoverRequest>>(window, DISCOVER_EVENT)\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(({ detail: { selector, requestId } }) => {\n\t\t\t\t\tlet found: Element | null = null\n\n\t\t\t\t\t// Check if selector matches this component's id or uid\n\t\t\t\t\tif (selector.startsWith('#')) {\n\t\t\t\t\t\tconst id = selector.slice(1)\n\t\t\t\t\t\tif (this.id === id || this.uid === id) {\n\t\t\t\t\t\t\tfound = this\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// Check our shadow DOM for matching element\n\t\t\t\t\tif (!found && this.shadowRoot) {\n\t\t\t\t\t\tfound = this.shadowRoot.querySelector(selector)\n\t\t\t\t\t}\n\n\t\t\t\t\tif (found) {\n\t\t\t\t\t\twindow.dispatchEvent(\n\t\t\t\t\t\t\tnew CustomEvent(DISCOVER_RESPONSE_EVENT, {\n\t\t\t\t\t\t\t\tdetail: { requestId, element: found },\n\t\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t}\n\n\t\t// Make discover public to match the interface\n\t\tdiscover<T extends HTMLElement>(tag: string): Observable<T | null> {\n\t\t\treturn discoverComponent<T>(tag)\n\t\t}\n\n\t\tdisconnectedCallback() {\n\t\t\tthis.disconnecting.next(true)\n\t\t\tthis.disconnecting.complete()\n\t\t\tsuper.disconnectedCallback()\n\t\t}\n\t}\n\treturn BaseElement as Constructor<IBaseMixin> & T\n}\n","@import 'tailwindcss';\n\n/* Tell Tailwind's content scanner to also look at the library source,\n   which lives one level up from this file. Without this, consumers whose\n   Vite root sits outside the library (e.g. the demo at `/demo/`) only get\n   utilities for classes typed in their own source — library classes like\n   `bg-primary-default`, `border-outline`, `text-primary-on` silently no-op. */\n@source \"../src/**/*.{ts,tsx,js,jsx,html}\";\n\n/* Cascade-layer order contract. Consumer (unlayered) CSS always overrides\n   library styles regardless of specificity. Library-internal tokens and\n   components live in named layers so consumers can target them precisely. */\n@layer schmancy.tokens, schmancy.base, schmancy.components;\n\n@layer schmancy.base {\n:host,\n:root {\n\tfont-family: var(--schmancy-font-family);\n\t/* Advertise both schemes so UA form controls, scrollbars, and\n\t   `light-dark()` all render correctly until a theme resolves it. */\n\tcolor-scheme: light dark;\n}\n:host,\n:host *,\n* {\n\t/* pan-x pan-y allows scrolling but disables pinch-zoom */\n\ttouch-action: pan-x pan-y;\n}\n\n/* Interactive: luminous lift on hover, spring compress on active */\n.interactive {\n\ttransition:\n\t\ttransform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),\n\t\tbox-shadow 400ms ease,\n\t\tfilter 200ms ease;\n}\n.interactive:hover {\n\ttransform: translateY(-1px);\n\tfilter: brightness(1.03);\n\tbox-shadow: 0 4px 20px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 18%, transparent);\n}\n.interactive:active {\n\ttransform: scale(0.97);\n\tfilter: brightness(0.96);\n\tbox-shadow: none;\n\ttransition-duration: 100ms;\n}\n@media (prefers-reduced-motion: reduce) {\n\t.interactive { transition: filter 150ms ease; }\n\t.interactive:hover { transform: none; box-shadow: none; }\n\t.interactive:active { transform: none; }\n}\n@theme inline {\n\t--md-ref-typeface-brand: var(--schmancy-font-family);\n\t--md-ref-typeface-plain: var(--schmancy-font-family);\n\t--md-sys-color-primary: var(--schmancy-sys-color-primary-default);\n\t--md-sys-color-secondary: var(--schmancy-sys-color-secondary-default);\n\n\t--*: initial;\n\t--border-style: solid;\n\t--spacing: 4px;\n\t--color-scrim: var(--schmancy-sys-color-scrim);\n\t--color-outline-default: var(--schmancy-sys-color-outline);\n\t--color-outline-variant: var(--schmancy-sys-color-outlineVariant);\n\t/* Shorthand alias */\n\t--color-outline: var(--schmancy-sys-color-outline);\n\t--color-surface-default: var(--schmancy-sys-color-surface-default);\n\t--color-surface-dim: var(--schmancy-sys-color-surface-dim);\n\t--color-surface-bright: var(--schmancy-sys-color-surface-bright);\n\t--color-surface-container: var(--schmancy-sys-color-surface-container);\n\t--color-surface-low: var(--schmancy-sys-color-surface-low);\n\t--color-surface-high: var(--schmancy-sys-color-surface-high);\n\t--color-surface-highest: var(--schmancy-sys-color-surface-highest);\n\t--color-surface-lowest: var(--schmancy-sys-color-surface-lowest);\n\t/* CamelCase variants for Tailwind compatibility */\n\t--color-surface-containerLow: var(--schmancy-sys-color-surface-containerLow);\n\t--color-surface-containerHigh: var(--schmancy-sys-color-surface-containerHigh);\n\t--color-surface-containerLowest: var(--schmancy-sys-color-surface-containerLowest);\n\t--color-surface-containerHighest: var(--schmancy-sys-color-surface-containerHighest);\n\t--color-surface-on: var(--schmancy-sys-color-surface-on);\n\t--color-surface-on-variant: var(--schmancy-sys-color-surface-onVariant);\n\t--color-primary-default: var(--schmancy-sys-color-primary-default);\n\t--color-primary-on: var(--schmancy-sys-color-primary-on);\n\t--color-primary-container: var(--schmancy-sys-color-primary-container);\n\t--color-primary-on-container: var(--schmancy-sys-color-primary-onContainer);\n\t--color-secondary-default: var(--schmancy-sys-color-secondary-default);\n\t--color-secondary-on: var(--schmancy-sys-color-secondary-on);\n\t--color-secondary-container: var(--schmancy-sys-color-secondary-container);\n\t--color-secondary-on-container: var(--schmancy-sys-color-secondary-onContainer);\n\t--color-tertiary-default: var(--schmancy-sys-color-tertiary-default);\n\t--color-tertiary-on: var(--schmancy-sys-color-tertiary-on);\n\t--color-tertiary-container: var(--schmancy-sys-color-tertiary-container);\n\t--color-tertiary-on-container: var(--schmancy-sys-color-tertiary-onContainer);\n\t--color-error-default: var(--schmancy-sys-color-error-default);\n\t--color-error-on: var(--schmancy-sys-color-error-on);\n\t--color-error-container: var(--schmancy-sys-color-error-container);\n\t--color-error-on-container: var(--schmancy-sys-color-error-onContainer);\n\t--color-success-default: var(--schmancy-sys-color-success-default);\n\t--color-success-on: var(--schmancy-sys-color-success-on);\n\t--color-success-container: var(--schmancy-sys-color-success-container);\n\t--color-success-on-container: var(--schmancy-sys-color-success-onContainer);\n\t--color-warning-default: var(--schmancy-sys-color-warning-default);\n\t--color-warning-on: var(--schmancy-sys-color-warning-on);\n\t--color-warning-container: var(--schmancy-sys-color-warning-container);\n\t--color-warning-on-container: var(--schmancy-sys-color-warning-onContainer);\n\t--color-info-default: var(--schmancy-sys-color-info-default);\n\t--color-info-on: var(--schmancy-sys-color-info-on);\n\t--color-info-container: var(--schmancy-sys-color-info-container);\n\t--color-info-on-container: var(--schmancy-sys-color-info-onContainer);\n\n\t/* DEPRECATED: camelCase aliases for backward compatibility - use hyphenated format instead */\n\t--color-outlineVariant: var(--schmancy-sys-color-outlineVariant);\n\t--color-surface-onVariant: var(--schmancy-sys-color-surface-onVariant);\n\t--color-primary-onContainer: var(--schmancy-sys-color-primary-onContainer);\n\t--color-secondary-onContainer: var(--schmancy-sys-color-secondary-onContainer);\n\t--color-tertiary-onContainer: var(--schmancy-sys-color-tertiary-onContainer);\n\t--color-error-onContainer: var(--schmancy-sys-color-error-onContainer);\n\t--color-success-onContainer: var(--schmancy-sys-color-success-onContainer);\n\t--color-warning-onContainer: var(--schmancy-sys-color-warning-onContainer);\n\t--color-info-onContainer: var(--schmancy-sys-color-info-onContainer);\n\n\t/* Shorthand aliases (maps to -default variant) */\n\t--color-primary: var(--schmancy-sys-color-primary-default);\n\t--color-secondary: var(--schmancy-sys-color-secondary-default);\n\t--color-tertiary: var(--schmancy-sys-color-tertiary-default);\n\t--color-error: var(--schmancy-sys-color-error-default);\n\t--color-success: var(--schmancy-sys-color-success-default);\n\t--color-warning: var(--schmancy-sys-color-warning-default);\n\t--color-info: var(--schmancy-sys-color-info-default);\n\t--color-surface: var(--schmancy-sys-color-surface-default);\n\n\t--shadow-0: var(--schmancy-sys-elevation-0);\n\t--shadow-1: var(--schmancy-sys-elevation-1);\n\t--shadow-2: var(--schmancy-sys-elevation-2);\n\t--shadow-3: var(--schmancy-sys-elevation-3);\n\t--shadow-4: var(--schmancy-sys-elevation-4);\n\t--shadow-5: var(--schmancy-sys-elevation-5);\n\t--outline-1: var(--schmancy-sys-outline-1);\n\n\t/* Luminous glow elevation — light-based depth for futuristic UI\n\t   Use shadow-glow-{1-5} classes. Glow intensifies with level. */\n\t--shadow-glow-1: 0 2px 12px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);\n\t--shadow-glow-2: 0 4px 20px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 22%, transparent);\n\t--shadow-glow-3: 0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 28%, transparent);\n\t--shadow-glow-4: 0 12px 44px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 35%, transparent);\n\t--shadow-glow-5: 0 20px 60px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 42%, transparent);\n\t--font-sans:\n\t\tvar(--schmancy-font-family), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n\t\t'Segoe UI Symbol', 'Noto Color Emoji';\n\t--font-serif: var(--schmancy-font-family), ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;\n\t--font-mono:\n\t\tvar(--schmancy-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',\n\t\t'Courier New', monospace;\n\t--color-black: #000;\n\t--color-white: #fff;\n\t--spacing: 0.25rem;\n\t--breakpoint-sm: 40rem;\n\t--breakpoint-md: 48rem;\n\t--breakpoint-lg: 64rem;\n\t--breakpoint-xl: 80rem;\n\t--breakpoint-2xl: 96rem;\n\t--container-3xs: 16rem;\n\t--container-2xs: 18rem;\n\t--container-xs: 20rem;\n\t--container-sm: 24rem;\n\t--container-md: 28rem;\n\t--container-lg: 32rem;\n\t--container-xl: 36rem;\n\t--container-2xl: 42rem;\n\t--container-3xl: 48rem;\n\t--container-4xl: 56rem;\n\t--container-5xl: 64rem;\n\t--container-6xl: 72rem;\n\t--container-7xl: 80rem;\n\t--text-xs: 0.75rem;\n\t--text-xs--line-height: calc(1 / 0.75);\n\t--text-sm: 0.875rem;\n\t--text-sm--line-height: calc(1.25 / 0.875);\n\t--text-base: 1rem;\n\t--text-base--line-height: calc(1.5 / 1);\n\t--text-lg: 1.125rem;\n\t--text-lg--line-height: calc(1.75 / 1.125);\n\t--text-xl: 1.25rem;\n\t--text-xl--line-height: calc(1.75 / 1.25);\n\t--text-2xl: 1.5rem;\n\t--text-2xl--line-height: calc(2 / 1.5);\n\t--text-3xl: 1.875rem;\n\t--text-3xl--line-height: calc(2.25 / 1.875);\n\t--text-4xl: 2.25rem;\n\t--text-4xl--line-height: calc(2.5 / 2.25);\n\t--text-5xl: 3rem;\n\t--text-5xl--line-height: 1;\n\t--text-6xl: 3.75rem;\n\t--text-6xl--line-height: 1;\n\t--text-7xl: 4.5rem;\n\t--text-7xl--line-height: 1;\n\t--text-8xl: 6rem;\n\t--text-8xl--line-height: 1;\n\t--text-9xl: 8rem;\n\t--text-9xl--line-height: 1;\n\t--font-weight-thin: 100;\n\t--font-weight-extralight: 200;\n\t--font-weight-light: 300;\n\t--font-weight-normal: 400;\n\t--font-weight-medium: 500;\n\t--font-weight-semibold: 600;\n\t--font-weight-bold: 700;\n\t--font-weight-extrabold: 800;\n\t--font-weight-black: 900;\n\t--tracking-tighter: -0.05em;\n\t--tracking-tight: -0.025em;\n\t--tracking-normal: 0em;\n\t--tracking-wide: 0.025em;\n\t--tracking-wider: 0.05em;\n\t--tracking-widest: 0.1em;\n\t--leading-tight: 1.25;\n\t--leading-snug: 1.375;\n\t--leading-normal: 1.5;\n\t--leading-relaxed: 1.625;\n\t--leading-loose: 2;\n\t--radius-xs: 0.125rem;\n\t--radius-sm: 0.25rem;\n\t--radius-md: 0.375rem;\n\t--radius-lg: 0.5rem;\n\t--radius-xl: 0.75rem;\n\t--radius-2xl: 1rem;\n\t--radius-3xl: 1.5rem;\n\t--radius-4xl: 2rem;\n\t--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);\n\t--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n\t--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\t--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n\t--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n\t--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n\t--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\t--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);\n\t--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);\n\t--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);\n\t--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);\n\t--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);\n\t--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);\n\t--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);\n\t--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);\n\t--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);\n\t--blur-xs: 4px;\n\t--blur-sm: 8px;\n\t--blur-md: 12px;\n\t--blur-lg: 16px;\n\t--blur-xl: 24px;\n\t--blur-2xl: 40px;\n\t--blur-3xl: 64px;\n\t--perspective-dramatic: 100px;\n\t--perspective-near: 300px;\n\t--perspective-normal: 500px;\n\t--perspective-midrange: 800px;\n\t--perspective-distant: 1200px;\n\t--aspect-video: 16 / 9;\n\t--ease-in: cubic-bezier(0.4, 0, 1, 1);\n\t--ease-out: cubic-bezier(0, 0, 0.2, 1);\n\t--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n\t--animate-spin: spin 1s linear infinite;\n\t--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n\t--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n\t--animate-bounce: bounce 1s infinite;\n\t/* ========================================================================\n\t   ANIMATION SYSTEM\n\n\t   A comprehensive, reusable animation library organized by category.\n\t   All animations use CSS custom properties for easy customization.\n\n\t   NAMING CONVENTION:\n\t   - Entrance animations: *-in (fade-in, slide-in, pop-in)\n\t   - Exit animations: *-out (fade-out, slide-out)\n\t   - Looping animations: descriptive name (float, pulse, shimmer)\n\n\t   USAGE:\n\t   - Use `animate-{name}` class in Tailwind\n\t   - Combine with `opacity-0` for entrance animations\n\t   - Use `animation-delay` via style attribute for staggered effects\n\t   ======================================================================== */\n\n\t/* ------------------------------------------------------------------------\n\t   TAILWIND DEFAULT ANIMATIONS\n\t   Standard animations from Tailwind CSS\n\t   ------------------------------------------------------------------------ */\n\t@keyframes spin {\n\t\tto { transform: rotate(360deg); }\n\t}\n\t@keyframes ping {\n\t\t75%, 100% { transform: scale(2); opacity: 0; }\n\t}\n\t@keyframes pulse {\n\t\t50% { opacity: 0.5; }\n\t}\n\t@keyframes bounce {\n\t\t0%, 100% {\n\t\t\ttransform: translateY(-25%);\n\t\t\tanimation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n\t\t}\n\t\t50% {\n\t\t\ttransform: none;\n\t\t\tanimation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\t\t}\n\t}\n\n\t/* ------------------------------------------------------------------------\n\t   ENTRANCE ANIMATIONS\n\t   One-shot animations for elements entering the viewport.\n\t   All use `forwards` fill-mode to maintain end state.\n\t   ------------------------------------------------------------------------ */\n\n\t/* Fade In - Simple opacity transition */\n\t--animate-fade-in: fade-in 0.5s ease forwards;\n\t@keyframes fade-in {\n\t\tfrom { opacity: 0; }\n\t\tto { opacity: 1; }\n\t}\n\n\t/* Fade In Up - Fade with upward movement (subtle) */\n\t--animate-fade-in-up: fade-in-up 0.5s ease forwards;\n\t@keyframes fade-in-up {\n\t\tfrom { opacity: 0; transform: translateY(20px); }\n\t\tto { opacity: 1; transform: translateY(0); }\n\t}\n\n\t/* Fade In Up Large - Fade with larger upward movement + scale */\n\t--animate-fade-in-up-lg: fade-in-up-lg 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;\n\t@keyframes fade-in-up-lg {\n\t\tfrom { opacity: 0; transform: translateY(30px) scale(0.95); }\n\t\tto { opacity: 1; transform: translateY(0) scale(1); }\n\t}\n\n\t/* Slide In Left - Enter from left side */\n\t--animate-slide-in-left: slide-in-left 0.5s ease forwards;\n\t@keyframes slide-in-left {\n\t\tfrom { opacity: 0; transform: translateX(-30px); }\n\t\tto { opacity: 1; transform: translateX(0); }\n\t}\n\n\t/* Slide In Right - Enter from right side */\n\t--animate-slide-in-right: slide-in-right 0.5s ease forwards;\n\t@keyframes slide-in-right {\n\t\tfrom { opacity: 0; transform: translateX(30px); }\n\t\tto { opacity: 1; transform: translateX(0); }\n\t}\n\n\t/* Pop In - Scale up with bounce easing */\n\t--animate-pop-in: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n\t@keyframes pop-in {\n\t\tfrom { opacity: 0; transform: scale(0.8); }\n\t\tto { opacity: 1; transform: scale(1); }\n\t}\n\n\t/* Expand In - Subtle scale + translate entrance */\n\t--animate-expand-in: expand-in 0.5s ease forwards;\n\t@keyframes expand-in {\n\t\tfrom { opacity: 0; transform: scale(0.95) translateY(10px); }\n\t\tto { opacity: 1; transform: scale(1) translateY(0); }\n\t}\n\n\t/* Converge In - Dramatic entrance with overshoot */\n\t--animate-converge-in: converge-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n\t@keyframes converge-in {\n\t\t0% { opacity: 0; transform: scale(0) translateY(50px); }\n\t\t60% { opacity: 1; transform: scale(1.1) translateY(-10px); }\n\t\t100% { opacity: 1; transform: scale(1) translateY(0); }\n\t}\n\n\t/* Spin In - Rotate + scale entrance */\n\t--animate-spin-in: spin-in 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;\n\t@keyframes spin-in {\n\t\tfrom { opacity: 0; transform: scale(0) rotate(-180deg); }\n\t\tto { opacity: 1; transform: scale(1) rotate(0deg); }\n\t}\n\n\t/* Scatter In - Scale from 0 to partial opacity (for decorative elements) */\n\t--animate-scatter-in: scatter-in 1s ease forwards;\n\t@keyframes scatter-in {\n\t\tfrom { opacity: 0; transform: scale(0); }\n\t\tto { opacity: 0.2; transform: scale(1); }\n\t}\n\n\t/* ------------------------------------------------------------------------\n\t   LOOPING ANIMATIONS - PULSE VARIANTS\n\t   Continuous pulsing effects for attention/status indicators.\n\t   ------------------------------------------------------------------------ */\n\n\t/* Pulse Opacity - Simple opacity pulse */\n\t--animate-pulse-opacity: pulse-opacity 2s ease-in-out infinite;\n\t@keyframes pulse-opacity {\n\t\t0%, 100% { opacity: 1; }\n\t\t50% { opacity: 0.5; }\n\t}\n\n\t/* Pulse Scale - Scale + opacity pulse (for status dots) */\n\t--animate-pulse-scale: pulse-scale 1.5s ease infinite;\n\t@keyframes pulse-scale {\n\t\t0%, 100% { transform: scale(1); opacity: 1; }\n\t\t50% { transform: scale(1.3); opacity: 0.6; }\n\t}\n\n\t/* Pulse Glow - Scale + dynamic box-shadow (for highlighted elements) */\n\t--animate-pulse-glow: pulse-glow 2s ease infinite;\n\t@keyframes pulse-glow {\n\t\t0%, 100% {\n\t\t\ttransform: scale(1);\n\t\t\tbox-shadow: 0 0 20px var(--schmancy-sys-color-primary-default);\n\t\t}\n\t\t50% {\n\t\t\ttransform: scale(1.05);\n\t\t\tbox-shadow: 0 0 40px var(--schmancy-sys-color-primary-default);\n\t\t}\n\t}\n\n\t/* Pulse Ring - Expanding ring effect (for ripples) */\n\t--animate-pulse-ring: pulse-ring 2s ease-out infinite;\n\t@keyframes pulse-ring {\n\t\t0% { transform: scale(0.8); opacity: 0.6; }\n\t\t100% { transform: scale(2); opacity: 0; }\n\t}\n\n\t/* ------------------------------------------------------------------------\n\t   LOOPING ANIMATIONS - FLOAT VARIANTS\n\t   Gentle floating/hovering effects for ambient motion.\n\t   ------------------------------------------------------------------------ */\n\n\t/* Float - Simple vertical float */\n\t--animate-float: float 3s ease-in-out infinite;\n\t@keyframes float {\n\t\t0%, 100% { transform: translateY(0); }\n\t\t50% { transform: translateY(-8px); }\n\t}\n\n\t/* Float Particle - Vertical float with scale + opacity (for particles) */\n\t--animate-float-particle: float-particle 4s ease-in-out infinite;\n\t@keyframes float-particle {\n\t\t0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }\n\t\t50% { transform: translateY(-30px) scale(1.2); opacity: 0.3; }\n\t}\n\n\t/* Float Chaos - Multi-axis chaotic movement (for scattered elements) */\n\t--animate-float-chaos: float-chaos 8s ease-in-out infinite;\n\t@keyframes float-chaos {\n\t\t0% { transform: translateY(0) rotate(0deg) scale(1); }\n\t\t25% { transform: translateY(-30px) rotate(15deg) scale(1.1); }\n\t\t50% { transform: translateY(-10px) rotate(-10deg) scale(0.95); }\n\t\t75% { transform: translateY(-40px) rotate(8deg) scale(1.05); }\n\t\t100% { transform: translateY(0) rotate(0deg) scale(1); }\n\t}\n\n\t/* ------------------------------------------------------------------------\n\t   LOOPING ANIMATIONS - ROTATION\n\t   Continuous rotation effects.\n\t   ------------------------------------------------------------------------ */\n\n\t/* Rotate Orbit - Slow continuous rotation (for orbital elements) */\n\t--animate-rotate-orbit: rotate-orbit 20s linear infinite;\n\t@keyframes rotate-orbit {\n\t\tfrom { transform: rotate(0deg); }\n\t\tto { transform: rotate(360deg); }\n\t}\n\n\t/* ------------------------------------------------------------------------\n\t   LOOPING ANIMATIONS - MOVEMENT EFFECTS\n\t   Horizontal/directional movement for progress/flow indicators.\n\t   ------------------------------------------------------------------------ */\n\n\t/* Shimmer - Left-to-right shine effect (use with overflow:hidden) */\n\t--animate-shimmer: shimmer 2s ease-in-out infinite;\n\t@keyframes shimmer {\n\t\t0% { left: -100%; }\n\t\t50%, 100% { left: 100%; }\n\t}\n\n\t/* Scan Vertical - Top-to-bottom scanning line */\n\t--animate-scan-vertical: scan-vertical 2s ease-in-out infinite;\n\t@keyframes scan-vertical {\n\t\t0% { top: 0; opacity: 0; }\n\t\t10% { opacity: 1; }\n\t\t90% { opacity: 1; }\n\t\t100% { top: 100%; opacity: 0; }\n\t}\n\n\t/* Scan Horizontal - Left-to-right scanning */\n\t--animate-scan-horizontal: scan-horizontal 2s ease-in-out infinite;\n\t@keyframes scan-horizontal {\n\t\t0% { left: -100%; }\n\t\t100% { left: 100%; }\n\t}\n\n\t/* Flow - Continuous left-to-right flow (for progress connectors) */\n\t--animate-flow: flow 2s ease-in-out infinite;\n\t@keyframes flow {\n\t\t0% { left: -50%; }\n\t\t100% { left: 150%; }\n\t}\n\n\t/* Line Float - Horizontal line traversal with opacity (for decorative lines) */\n\t--animate-line-float: line-float 4s ease-in-out infinite;\n\t@keyframes line-float {\n\t\t0%, 100% { transform: translateX(-100%) scaleX(0.5); opacity: 0; }\n\t\t50% { transform: translateX(100%) scaleX(1); opacity: 0.3; }\n\t}\n\n\t/* ------------------------------------------------------------------------\n\t   KINETIC STATE — Physics-based feedback animations.\n\t   UI communicates through motion, not icons.\n\t   ------------------------------------------------------------------------ */\n\n\t/* Breathe — gentle living pulse for loading/active states */\n\t--animate-breathe: breathe 2.5s ease-in-out infinite;\n\t@keyframes breathe {\n\t\t0%, 100% { transform: scale(1); opacity: 1; }\n\t\t50% { transform: scale(1.015); opacity: 0.88; }\n\t}\n\n\t/* Glow Pulse — luminous throb for highlighted elements */\n\t--animate-glow-pulse: glow-pulse 2s ease-in-out infinite;\n\t@keyframes glow-pulse {\n\t\t0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--schmancy-sys-color-primary-default) 30%, transparent); }\n\t\t50% { box-shadow: 0 0 24px 4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent); }\n\t}\n\n\t/* Kinetic Shake — physics-damped error feedback */\n\t--animate-kinetic-shake: kinetic-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);\n\t@keyframes kinetic-shake {\n\t\t0%, 100% { transform: translateX(0); }\n\t\t10% { transform: translateX(-6px); }\n\t\t20% { transform: translateX(5px); }\n\t\t30% { transform: translateX(-4px); }\n\t\t40% { transform: translateX(3px); }\n\t\t50% { transform: translateX(-2px); }\n\t\t60% { transform: translateX(1px); }\n\t}\n\n\t/* Scale Tap — spring-physics tap response */\n\t--animate-scale-tap: scale-tap 250ms cubic-bezier(0.34, 1.56, 0.64, 1);\n\t@keyframes scale-tap {\n\t\t0% { transform: scale(1); }\n\t\t40% { transform: scale(0.94); }\n\t\t100% { transform: scale(1); }\n\t}\n\n\t/* Glow In — luminous entrance with depth */\n\t--animate-glow-in: glow-in 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;\n\t@keyframes glow-in {\n\t\tfrom {\n\t\t\tbox-shadow: 0 0 0 0 transparent;\n\t\t\topacity: 0;\n\t\t\ttransform: scale(0.96);\n\t\t}\n\t\tto {\n\t\t\tbox-shadow: 0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n\n\t/* ------------------------------------------------------------------------\n\t   CUSTOM EASING CURVES\n\t   Reusable timing functions for consistent animation feel.\n\t   ------------------------------------------------------------------------ */\n\t--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);\n\t--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);\n\t--ease-snap: cubic-bezier(0.34, 1.2, 0.64, 1);\n}\n}  /* end @layer schmancy.base */\n","import { CSSResult, LitElement, unsafeCSS } from 'lit'\n\nimport style from './tailwind.css?inline'\nimport { BaseElement, IBaseMixin } from './baseElement'\nimport { Constructor } from './constructor'\n\nexport declare class ITailwindElementMixin {\n\tstyles: (typeof CSSResult)[]\n}\n\nexport const tailwindStyles = unsafeCSS(style)\n\nconst TailwindElementBase = <T extends CSSResult>(componentStyle?: T) => {\n\tclass TailwindMixinClass extends LitElement {\n\t\tstatic styles = [unsafeCSS(componentStyle), tailwindStyles]\n\t}\n\treturn TailwindMixinClass as Constructor<LitElement> /* see \"typing the subclass\" below */\n}\n\nexport const TailwindElement = <T extends CSSResult>(componentStyle?: T) => {\n\tclass TailwindMixinClass extends BaseElement(TailwindElementBase(componentStyle)) {\n\t\tdisconnectedCallback = () => {\n\t\t\tsuper.disconnectedCallback()\n\t\t}\n\t}\n\treturn TailwindMixinClass as Constructor<CustomElementConstructor> &\n\t\tConstructor<ITailwindElementMixin> &\n\t\tConstructor<LitElement> &\n\t\tConstructor<IBaseMixin>\n}\n","import { LitElement, type CSSResultGroup, type CSSResultOrNative } from 'lit'\nimport { SignalWatcher } from '@lit-labs/signals'\nimport { BaseElement, type IBaseMixin } from './baseElement'\nimport { tailwindStyles } from './tailwind.mixin'\nimport type { Constructor } from './constructor'\nimport { _activeHost } from '../src/state/active-host'\n\n// Cast to instance-only Constructor + a narrow static surface for `finalizeStyles`.\n// Avoids exposing LitElement's full static side (which has `protected static\n// shadowRootOptions`); that would conflict with subclasses that declare their own\n// `protected static shadowRootOptions = { ..., delegatesFocus: true }` to widen\n// visibility — same shape TailwindElement uses.\ntype StaticFinalizeStyles = {\n\tfinalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[]\n}\nconst SchmancyElementBase = SignalWatcher(BaseElement(LitElement)) as unknown as\n\tCustomElementConstructor & Constructor<LitElement> & Constructor<IBaseMixin> & StaticFinalizeStyles\n\n// ---------------------------------------------------------------------------\n// Active-host integration. Two layers:\n//\n//   (1) Prototype-chain wrap. The first instance of every concrete subclass\n//       triggers a walk that wraps every function-typed descriptor on the\n//       chain (up to but not including HTMLElement.prototype) with\n//       `_activeHost.run(this, …)`. Catches `render()`, every Lit lifecycle\n//       hook, and every user-defined class method (sync or async — the host\n//       propagates across `await` via the Promise.then patch in\n//       `active-host.ts`). Idempotent: each prototype object is wrapped at\n//       most once, regardless of how many subclasses share it.\n//\n//   (2) `addEventListener` override. Listeners attached imperatively to\n//       the host run inside `_activeHost.run(this, …)`. We keep an\n//       `original→wrapped` map so `removeEventListener` finds the wrapped\n//       listener.\n//\n// Inline arrow handlers attached via Lit templates (`@click=${() => …}`)\n// are not wrapped at this layer — Lit attaches them to *child* elements,\n// not the host. They resolve correctly via the\n// `window.event.composedPath()` fallback in `resolveActiveHost()`: a\n// `context-request` dispatched from the click target bubbles (composed)\n// up to the enclosing `<schmancy-context>` provider.\n// ---------------------------------------------------------------------------\n\n// Lit's internal protocol methods (e.g. `_$attributeToProperty`) are\n// framework plumbing; wrapping them risks breaking Lit's update scheduling\n// for no semantic gain — the host is already on the stack from the wrap of\n// the public lifecycle methods that call them.\nfunction shouldSkipMethod(key: string): boolean {\n\tif (key === 'constructor') return true\n\tif (key.startsWith('_$')) return true\n\treturn false\n}\n\nconst wrappedProtos = new WeakSet<object>()\n\nfunction wrapPrototypeChain(ctor: { prototype: object }): void {\n\tlet proto: object | null = ctor.prototype\n\twhile (proto && proto !== HTMLElement.prototype) {\n\t\tif (wrappedProtos.has(proto)) break\n\t\twrappedProtos.add(proto)\n\t\tconst descs = Object.getOwnPropertyDescriptors(proto)\n\t\tfor (const [key, desc] of Object.entries(descs)) {\n\t\t\tif (shouldSkipMethod(key)) continue\n\t\t\tif (typeof desc.value !== 'function') continue\n\t\t\tif (!desc.configurable) continue\n\t\t\tconst original = desc.value as (...args: unknown[]) => unknown\n\t\t\tObject.defineProperty(proto, key, {\n\t\t\t\t...desc,\n\t\t\t\tvalue: function wrappedForActiveHost(this: HTMLElement, ...args: unknown[]) {\n\t\t\t\t\treturn _activeHost.run(this, () => original.apply(this, args))\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\t\tproto = Object.getPrototypeOf(proto) as object | null\n\t}\n}\n\ntype AnyListener = EventListener | EventListenerObject\nconst listenerWrapCache = new WeakMap<AnyListener, EventListener>()\n\nfunction wrapHostListener(host: HTMLElement, listener: AnyListener): EventListener {\n\tconst cached = listenerWrapCache.get(listener)\n\tif (cached) return cached\n\tconst wrapped: EventListener = function wrappedHostListener(this: unknown, evt: Event) {\n\t\t_activeHost.run(host, () => {\n\t\t\tif (typeof listener === 'function') {\n\t\t\t\t;(listener as EventListener).call(this, evt)\n\t\t\t} else {\n\t\t\t\tlistener.handleEvent(evt)\n\t\t\t}\n\t\t})\n\t}\n\tlistenerWrapCache.set(listener, wrapped)\n\treturn wrapped\n}\n\n/**\n * Base class for Schmancy components. A concrete named class — not a mixin\n * factory — so DevTools shows `SchmancyElement` in the prototype chain and\n * `extends SchmancyElement` reads like `extends LitElement` for new\n * contributors.\n *\n * Composes:\n *   1. `LitElement`            — Lit base\n *   2. `BaseElement`           — `disconnecting` Subject, classMap/styleMap,\n *                                 discovery, `stableId`, `uid`, `locale`\n *   3. `SignalWatcher`         — auto-tracks every signal read in `render()`\n *\n * Tailwind styles are injected automatically via `finalizeStyles` — subclasses\n * just declare their own component-local styles in `static styles`:\n *\n *   @customElement('my-card')\n *   class MyCard extends SchmancyElement {\n *     static styles = [css`:host { display: block }`]\n *     render() { return html`<slot></slot>` }\n *   }\n *\n * Cleanup primitives (both fire on disconnect):\n *   - `disconnecting: Subject<void>` — RxJS, used with `takeUntil`\n *   - `disconnectedSignal: AbortSignal` — native, used with `fetch`,\n *     `addEventListener`, or any AbortSignal-aware API\n *\n * Never wrap with `SignalWatcher` again — it is already part of the base.\n * `SignalWatcher(SchmancyElement)` creates two nested Computeds and panics\n * with \"Detected cycle in computations\" at runtime; the pre-edit lint\n * (`NO_SIGNAL_WATCHER_WRAP`) blocks it as belt-and-suspenders.\n */\nexport class SchmancyElement extends SchmancyElementBase {\n\tprivate _abortController = new AbortController()\n\n\t/** AbortSignal that fires when the element disconnects. */\n\treadonly disconnectedSignal: AbortSignal = this._abortController.signal\n\n\tconstructor() {\n\t\tsuper()\n\t\twrapPrototypeChain(this.constructor as { prototype: object })\n\t}\n\n\tstatic override finalizeStyles(\n\t\tstyles?: CSSResultGroup,\n\t): CSSResultOrNative[] {\n\t\treturn [...super.finalizeStyles(styles), tailwindStyles]\n\t}\n\n\toverride addEventListener(\n\t\ttype: string,\n\t\tlistener: EventListenerOrEventListenerObject | null,\n\t\toptions?: boolean | AddEventListenerOptions,\n\t): void {\n\t\tif (listener == null) {\n\t\t\tsuper.addEventListener(type, listener, options)\n\t\t\treturn\n\t\t}\n\t\tsuper.addEventListener(type, wrapHostListener(this, listener), options)\n\t}\n\n\toverride removeEventListener(\n\t\ttype: string,\n\t\tlistener: EventListenerOrEventListenerObject | null,\n\t\toptions?: boolean | EventListenerOptions,\n\t): void {\n\t\tif (listener == null) {\n\t\t\tsuper.removeEventListener(type, listener, options)\n\t\t\treturn\n\t\t}\n\t\tconst wrapped = listenerWrapCache.get(listener)\n\t\tsuper.removeEventListener(type, wrapped ?? (listener as EventListener), options)\n\t}\n\n\toverride disconnectedCallback() {\n\t\tthis._abortController.abort()\n\t\tsuper.disconnectedCallback()\n\t}\n}\n\n/**\n * Decorator: `@schmancyElement('tag-name')`. The standard way to register\n * a `SchmancyElement` subclass.\n *\n * Drop-in replacement for Lit's `@customElement`. The difference is\n * timing: this decorator wraps the prototype's methods with\n * `_activeHost.run` BEFORE calling `customElements.define`.\n *\n * Why this matters: the HTML spec captures the element's lifecycle\n * callback references (`connectedCallback`, `disconnectedCallback`, etc.)\n * off the prototype at `customElements.define` time, and the browser\n * invokes those cached references for the element's lifecycle — it does\n * NOT re-look-up the prototype each time. SchmancyElement's constructor\n * installs the active-host wrap on first instantiation, which is strictly\n * later than `define`, so the browser ends up calling unwrapped\n * lifecycle callbacks. Reads inside `connectedCallback` then fall through\n * to `document.activeElement`, miss the enclosing `<schmancy-context>`,\n * and resolve to the module-scoped global instead of the isolated copy.\n *\n * Use this decorator for any subclass that:\n *   - Reads or writes a state-singleton inside `connectedCallback` or\n *     `disconnectedCallback`, AND\n *   - May appear inside a `<schmancy-context>` subtree.\n *\n * For elements that never touch state in lifecycle callbacks, plain\n * `@customElement` from `lit/decorators.js` still works — the\n * constructor's wrap covers everything else (render, class methods,\n * event handlers attached via the prototype). The two decorators are\n * interchangeable for those cases.\n */\nexport function schmancyElement(tagName: string) {\n\treturn <T extends CustomElementConstructor>(cls: T): T => {\n\t\twrapPrototypeChain(cls as { prototype: object })\n\t\tcustomElements.define(tagName, cls)\n\t\treturn cls\n\t}\n}\n","import { CSSResult, LitElement, PropertyValueMap } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { IBaseMixin } from './baseElement'\nimport { Constructor } from './constructor'\nimport { ITailwindElementMixin } from './tailwind.mixin'\nimport { SchmancyElement } from './SchmancyElement'\n\n/**\n * Cross-realm brand used by `<schmancy-form>` to discover form fields by\n * inheritance rather than tag-name allowlists. `Symbol.for` puts the symbol in\n * the global registry so detection works across module realms/bundles.\n */\nexport const SCHMANCY_FORM_FIELD = Symbol.for('schmancy.form-field')\n\n/**\n * Composed event a field dispatches in `connectedCallback`. `<schmancy-form>`\n * subscribes via `fromEvent(this, FIELD_CONNECT_EVENT)` and adds the field to\n * its registry. No matching disconnect event — composed events from a\n * disconnected node have an empty composed path; cleanup is via `isConnected`\n * filter at iteration time.\n */\nexport const FIELD_CONNECT_EVENT = 'schmancy:field:connect'\n\n/**\n * Validation modes.\n * - `dirty` (default per Revolute) — show errors only after value diverged.\n * - `touched` — show errors after first blur, even if value unchanged.\n * - `always` — show errors immediately (live search).\n * - `submitted` — hold all errors until submit (wizard step).\n * - `length` — fire validation only when `value.length` reaches `maxlength`\n *   (Stripe pattern for predictable-length fields: ZIP, phone, card number).\n */\nexport type ValidateOn = 'always' | 'touched' | 'dirty' | 'submitted' | 'length'\n\n/**\n * Per-field error-message override map. Keys are `ValidityState` flag names;\n * values are the message to display when that flag is set. Unset flags fall\n * back to the mixin's hardcoded defaults (English).\n *\n * Use for i18n or domain-specific copy:\n * ```ts\n * <schmancy-input\n *   .errorMessages=${{ valueMissing: 'Adresse e-mail requise', typeMismatch: 'Format e-mail invalide' }}\n *   type=\"email\" required\n * ></schmancy-input>\n * ```\n */\nexport type ErrorMessages = Partial<Record<keyof ValidityState, string>>\n\n/**\n * Interface defining the properties and methods that the FormFieldMixin adds.\n */\nexport interface IFormFieldMixin extends Element {\n\tname: string\n\tvalue: string | string[] | boolean | number | undefined\n\tlabel: string\n\trequired: boolean\n\tdisabled: boolean\n\treadonly: boolean\n\terror: boolean\n\tvalidationMessage: string\n\thint?: string\n\tid: string\n\n\t/** Set to `true` once the user has blurred the field at least once. */\n\ttouched: boolean\n\t/** `true` when the current value differs from the captured default. */\n\tdirty: boolean\n\t/** Inverse of `dirty`. */\n\tpristine: boolean\n\t/** Set to `true` by `<schmancy-form>` on submit (forces error display). */\n\tsubmitted: boolean\n\t/** Validation mode — controls when errors display. Default `'dirty'`. */\n\tvalidateOn: ValidateOn\n\n\t/**\n\t * Per-field error-message override map (i18n hook). See `ErrorMessages`.\n\t * Unset keys fall back to the mixin's hardcoded English defaults.\n\t */\n\terrorMessages?: ErrorMessages\n\n\t/**\n\t * `ElementInternals` instance attached by the mixin. Exposed so subclasses\n\t * with non-standard validity semantics (date-range, multi-select) can\n\t * surface platform `ValidityStateFlags` directly via\n\t * `internals.setValidity({ valueMissing: true })` rather than rolling their\n\t * own `attachInternals` call.\n\t */\n\tinternals: ElementInternals | undefined\n\n\tform: HTMLFormElement | null\n\n\tcheckValidity(): boolean\n\treportValidity(): boolean\n\tsetCustomValidity(message: string): void\n\n\t/** Mark the field as touched (component should call on blur). */\n\tmarkTouched(): void\n\t/** Mark the field as submitted (called by `<schmancy-form>` on submit). */\n\tmarkSubmitted(): void\n\t/**\n\t * Clear the `submitted` flag without resetting value/touched/error.\n\t * Used by wizards: stepping back from step N to step N-1 should not\n\t * leave step N-1's fields in aggressive \"show all errors\" mode.\n\t */\n\tclearSubmitted(): void\n\n\t/**\n\t * `true` while an async validator is in flight. Broadcast as\n\t * `:state(validating)`. `<schmancy-form>` blocks submit until every\n\t * registered field's `isValidating` is back to `false`.\n\t */\n\tisValidating: boolean\n\n\t/**\n\t * Run an async validator. While the promise is pending, `isValidating` is\n\t * `true` and `:state(validating)` is broadcast. On resolve, the returned\n\t * string is passed to `setCustomValidity` — empty string clears any\n\t * existing custom error; non-empty marks the field invalid with that\n\t * message.\n\t *\n\t * Submitting the form while a validator is pending is queued — the form\n\t * waits for `Promise.all(pending validators)` to settle before proceeding.\n\t */\n\trunAsyncValidator(fn: () => Promise<string>): Promise<void>\n\n\t/**\n\t * Whether the gate for showing validation errors is open right now. Exposed\n\t * so subclasses with custom error-display channels (e.g. select renders\n\t * errors on a child input) can keep their gate consistent with the mixin's.\n\t * Subclasses should not override this — extend the truth table by changing\n\t * `validateOn` instead.\n\t */\n\t_shouldShowError(): boolean\n\n\ttoFormEntries(): Array<[string, FormDataEntryValue]>\n\tresetForm(): void\n\n\temitChange(detail: any): void\n}\n\n/** Predicate used by `<schmancy-form>` to detect mixin descendants. */\nexport function isSchmancyFormField(el: unknown): el is IFormFieldMixin {\n\treturn !!el && typeof el === 'object' && (el as any).constructor?.[SCHMANCY_FORM_FIELD] === true\n}\n\n/**\n * A mixin that adds form field capabilities to a LitElement class.\n * Components that extend this mixin are automatically discovered and\n * collected by `<schmancy-form>` — no tag-name registration needed.\n *\n * Subclasses may override `toFormEntries()` to contribute multiple\n * name/value pairs to FormData (e.g. date-range, tag-input).\n *\n * @example\n * ```ts\n * class MyInput extends FormFieldMixin(TailwindElement(css`...`)) {\n *   // Your component code here\n * }\n * ```\n */\nexport function FormFieldMixin<T extends Constructor<LitElement>>(superClass: T) {\n\tclass FormFieldMixinClass extends superClass {\n\t\tstatic formAssociated = true\n\n\t\t/** Brand for cross-realm detection by `<schmancy-form>`. */\n\t\tstatic readonly [SCHMANCY_FORM_FIELD] = true\n\n\t\t// Element internals for form association\n\t\tinternals: ElementInternals | undefined\n\n\t\t/** Value snapshot captured at first render, used by `resetForm()`. */\n\t\tprotected _defaultValue: string | string[] | boolean | number | undefined = undefined\n\n\t\t@property({ type: String })\n\t\tname: string = ''\n\n\t\t@property({ reflect: true })\n\t\tvalue: string | string[] | boolean | number | undefined = ''\n\n\t\t@property({ type: String })\n\t\tlabel: string = ''\n\n\t\t@property({ type: Boolean, reflect: true })\n\t\trequired: boolean = false\n\n\t\t@property({ type: Boolean, reflect: true })\n\t\tdisabled: boolean = false\n\n\t\t@property({ type: Boolean, reflect: true })\n\t\treadonly: boolean = false\n\n\t\t@property({ type: Boolean, reflect: true })\n\t\terror: boolean = false\n\n\t\t@property({ type: String })\n\t\tvalidationMessage: string = ''\n\n\t\t@property({ type: String })\n\t\thint?: string\n\n\t\t@property({ reflect: true })\n\t\toverride id: string = `schmancy-field-${Date.now()}-${Math.floor(Math.random() * 1000)}`\n\n\t\t// ----- Validation UX state (Revolute contract) -----\n\n\t\t/** True after the user has blurred the field at least once. */\n\t\t@state() touched: boolean = false\n\n\t\t/** Set by `<schmancy-form>` on submit; persists until `resetForm()`. */\n\t\t@state() submitted: boolean = false\n\n\t\t/**\n\t\t * When errors display. Default `'dirty'` — the autofocus+cancel anti-pattern\n\t\t * is avoided because pristine fields never show errors until submit.\n\t\t */\n\t\t@property({ type: String, reflect: true })\n\t\tvalidateOn: ValidateOn = 'dirty'\n\n\t\t/**\n\t\t * Optional override for the validity-flag → message map. See\n\t\t * `ErrorMessages`. Unset keys fall back to the mixin's defaults.\n\t\t */\n\t\t@property({ attribute: false })\n\t\terrorMessages?: ErrorMessages\n\n\t\t/** True when value has been changed from the captured default. */\n\t\tget dirty(): boolean {\n\t\t\treturn this._defaultValue !== undefined && this.value !== this._defaultValue\n\t\t}\n\n\t\tget pristine(): boolean {\n\t\t\treturn !this.dirty\n\t\t}\n\n\t\tmarkTouched(): void {\n\t\t\tif (!this.touched) this.touched = true\n\t\t}\n\n\t\tmarkSubmitted(): void {\n\t\t\tif (!this.submitted) this.submitted = true\n\t\t}\n\n\t\tclearSubmitted(): void {\n\t\t\tif (this.submitted) this.submitted = false\n\t\t}\n\n\t\t/**\n\t\t * Reactive flag set while an async validator is in flight. Read by\n\t\t * `<schmancy-form>` to gate submit; broadcast as `:state(validating)`\n\t\t * for CSS spinner targeting.\n\t\t */\n\t\t@state() isValidating: boolean = false\n\n\t\tasync runAsyncValidator(fn: () => Promise<string>): Promise<void> {\n\t\t\tif (this.isValidating) {\n\t\t\t\t// Cancel-by-supersede semantics — a new call wins; the previous\n\t\t\t\t// is best-effort and its result is dropped if it resolves later.\n\t\t\t\tthis._asyncValidatorEpoch++\n\t\t\t}\n\t\t\tconst epoch = ++this._asyncValidatorEpoch\n\t\t\tthis.isValidating = true\n\t\t\ttry {\n\t\t\t\tconst message = await fn()\n\t\t\t\tif (epoch !== this._asyncValidatorEpoch) return // superseded\n\t\t\t\tthis.setCustomValidity(message)\n\t\t\t} finally {\n\t\t\t\tif (epoch === this._asyncValidatorEpoch) {\n\t\t\t\t\tthis.isValidating = false\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tprivate _asyncValidatorEpoch: number = 0\n\n\t\t/**\n\t\t * Whether `checkValidity()` should display errors right now.\n\t\t * `submitted` overrides every mode — once a submit attempt happens, the\n\t\t * field stays in live-correction mode (Phase 3) for the rest of the\n\t\t * session, and `resetForm()` is the only way back. The leading\n\t\t * underscore marks this as an internal API: subclasses may call it but\n\t\t * should not override it (extend the truth table by changing\n\t\t * `validateOn` instead).\n\t\t */\n\t\t_shouldShowError(): boolean {\n\t\t\tif (this.submitted) return true\n\t\t\tswitch (this.validateOn) {\n\t\t\t\tcase 'always':\n\t\t\t\t\treturn true\n\t\t\t\tcase 'touched':\n\t\t\t\t\treturn this.touched\n\t\t\t\tcase 'dirty':\n\t\t\t\t\treturn this.dirty\n\t\t\t\tcase 'submitted':\n\t\t\t\t\treturn false\n\t\t\t\tcase 'length':\n\t\t\t\t\t// Predictable-length fields: validate once value reaches the\n\t\t\t\t\t// maxlength constraint. Stripe pattern. Falls back to dirty\n\t\t\t\t\t// if no maxlength is set.\n\t\t\t\t\tif (typeof this.value === 'string') {\n\t\t\t\t\t\tconst max = (this as unknown as { maxlength?: number }).maxlength\n\t\t\t\t\t\tif (typeof max === 'number' && max > 0) {\n\t\t\t\t\t\t\treturn this.value.length >= max\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn this.dirty\n\t\t\t}\n\t\t}\n\n\t\tconstructor(...args: any[]) {\n\t\t\tsuper(...args)\n\t\t\ttry {\n\t\t\t\tthis.internals = this.attachInternals()\n\t\t\t} catch {\n\t\t\t\tthis.internals = undefined\n\t\t\t}\n\t\t}\n\n\t\toverride connectedCallback(): void {\n\t\t\tsuper.connectedCallback()\n\t\t\t// Register with any ancestor <schmancy-form> via composed event.\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent(FIELD_CONNECT_EVENT, {\n\t\t\t\t\tdetail: this,\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\n\t\t/** The form this element is associated with (native FACE behavior). */\n\t\tget form(): HTMLFormElement | null {\n\t\t\treturn this.internals?.form ?? null\n\t\t}\n\n\t\tprotected firstUpdated(changedProps: PropertyValueMap<any>): void {\n\t\t\tsuper.firstUpdated?.(changedProps)\n\t\t\tif (this._defaultValue === undefined) this._defaultValue = this.value\n\t\t\t// Sync platform validity (`internals.setValidity`) once after first\n\t\t\t// render so `<form>.checkValidity()` and `:invalid` reflect truth\n\t\t\t// even when no property change has fired through `willUpdate` yet\n\t\t\t// (e.g. for required-empty fields with class-field-initialized\n\t\t\t// defaults that Lit doesn't see as \"changed\" on the first cycle).\n\t\t\tthis.checkValidity()\n\t\t}\n\n\t\tprotected willUpdate(changedProps: PropertyValueMap<any>): void {\n\t\t\tsuper.willUpdate(changedProps)\n\n\t\t\tif (changedProps.has('value')) {\n\t\t\t\tthis.internals?.setFormValue(this.value as string | File | FormData | null)\n\t\t\t\t// :state(dirty) tracks value-vs-default; recompute on every value change.\n\t\t\t\tif (this.dirty) this.internals?.states.add('dirty')\n\t\t\t\telse this.internals?.states.delete('dirty')\n\t\t\t\t// Always sync platform validity (internals.setValidity) so\n\t\t\t\t// `<form>.checkValidity()` and `:invalid` reflect truth, even\n\t\t\t\t// while the visual `error` gate stays closed for pristine\n\t\t\t\t// fields under `validateOn: 'dirty'`. The visibility gate is\n\t\t\t\t// inside checkValidity() itself.\n\t\t\t\tthis.checkValidity()\n\t\t\t}\n\n\t\t\tif (changedProps.has('required') || changedProps.has('disabled')) {\n\t\t\t\tthis.checkValidity()\n\t\t\t}\n\n\t\t\tif (changedProps.has('isValidating')) {\n\t\t\t\tif (this.isValidating) this.internals?.states.add('validating')\n\t\t\t\telse this.internals?.states.delete('validating')\n\t\t\t}\n\n\t\t\tif (changedProps.has('touched')) {\n\t\t\t\tif (this.touched) this.internals?.states.add('touched')\n\t\t\t\telse this.internals?.states.delete('touched')\n\t\t\t\t// Phase 2 — blur on a dirty field. Validate to surface the error.\n\t\t\t\tif (this.touched && this.dirty) this.checkValidity()\n\t\t\t}\n\n\t\t\tif (changedProps.has('submitted')) {\n\t\t\t\tif (this.submitted) {\n\t\t\t\t\tthis.internals?.states.add('submitted')\n\t\t\t\t\t// Phase 4 — submit forces error display regardless of dirty/touched.\n\t\t\t\t\tthis.checkValidity()\n\t\t\t\t} else {\n\t\t\t\t\tthis.internals?.states.delete('submitted')\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Note: we do not write to `internals.setValidity` from willUpdate\n\t\t\t// based on `error` / `validationMessage` changes. `checkValidity`\n\t\t\t// and `setCustomValidity` are the sole writers — overwriting the\n\t\t\t// validity flags from willUpdate would clobber structured flags\n\t\t\t// set by subclass overrides (e.g. input.ts surfaces typeMismatch /\n\t\t\t// patternMismatch / tooShort / etc.).\n\n\t\t\tif (changedProps.has('error')) {\n\t\t\t\tif (this.error) this.internals?.states.add('invalid')\n\t\t\t\telse this.internals?.states.delete('invalid')\n\t\t\t\t// ARIA reflection through ElementInternals reaches AT through shadow DOM.\n\t\t\t\tif (this.internals) this.internals.ariaInvalid = this.error ? 'true' : 'false'\n\t\t\t}\n\n\t\t\tif (changedProps.has('required') || changedProps.has('disabled')) {\n\t\t\t\tif (this.required) this.internals?.states.add('required')\n\t\t\t\telse this.internals?.states.delete('required')\n\t\t\t\t// Suppress aria-required when disabled — disabled fields shouldn't\n\t\t\t\t// announce as required to assistive tech.\n\t\t\t\tif (this.internals) {\n\t\t\t\t\tthis.internals.ariaRequired = this.required && !this.disabled ? 'true' : 'false'\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (changedProps.has('disabled')) {\n\t\t\t\tif (this.disabled) this.internals?.states.add('disabled')\n\t\t\t\telse this.internals?.states.delete('disabled')\n\t\t\t}\n\t\t\tif (changedProps.has('readonly')) {\n\t\t\t\tif (this.readonly) this.internals?.states.add('readonly')\n\t\t\t\telse this.internals?.states.delete('readonly')\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Native FACE lifecycle — called by the browser when the owning form\n\t\t * is reset. Delegates to `resetForm()` so subclasses have one\n\t\t * override point for both programmatic and user-initiated resets.\n\t\t */\n\t\tformResetCallback(): void {\n\t\t\tthis.resetForm()\n\t\t}\n\n\t\t/** Native FACE lifecycle — called when the form's disabled state changes. */\n\t\tformDisabledCallback(disabled: boolean): void {\n\t\t\tthis.disabled = disabled\n\t\t}\n\n\t\t/**\n\t\t * Native FACE lifecycle — restore value after bfcache / form autofill.\n\t\t */\n\t\tformStateRestoreCallback(state: string | File | FormData | null): void {\n\t\t\tif (state == null) return\n\t\t\tthis.value = state as any\n\t\t}\n\n\t\t/** Override to customize reset behavior; default restores `_defaultValue`. */\n\t\tresetForm(): void {\n\t\t\tthis.value = this._defaultValue ?? ''\n\t\t\tthis.error = false\n\t\t\tthis.validationMessage = ''\n\t\t\tthis.touched = false\n\t\t\tthis.submitted = false\n\t\t\tthis.internals?.setValidity({})\n\t\t}\n\n\t\t/**\n\t\t * Contribute entries to a parent FormData. Default: a single\n\t\t * `[name, value]` pair when `name` is set and value is meaningful.\n\t\t * Override for multi-entry controls (e.g. date range).\n\t\t */\n\t\ttoFormEntries(): Array<[string, FormDataEntryValue]> {\n\t\t\tif (!this.name || this.disabled) return []\n\t\t\tconst v = this.value\n\t\t\tif (v === undefined || v === null || v === '') return []\n\t\t\tif (Array.isArray(v)) return v.map(item => [this.name, String(item)] as [string, FormDataEntryValue])\n\t\t\tif (typeof v === 'boolean') return v ? [[this.name, 'on']] : []\n\t\t\treturn [[this.name, String(v)]]\n\t\t}\n\n\t\tcheckValidity(): boolean {\n\t\t\tif (this.disabled) {\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t\treturn true\n\t\t\t}\n\n\t\t\tconst requiredFailed =\n\t\t\t\tthis.required && (this.value === '' || this.value === undefined || this.value === null)\n\t\t\t// Custom errors set via setCustomValidity() are platform-truth too —\n\t\t\t// preserve them through re-validation cycles.\n\t\t\tconst customErrorSet = !!this.internals?.validity?.customError\n\t\t\tconst isValid = !requiredFailed && !customErrorSet\n\t\t\tconst requiredMessage =\n\t\t\t\tthis.errorMessages?.valueMissing ?? 'This field is required'\n\t\t\tconst defaultMessage = requiredFailed ? requiredMessage : 'Invalid value'\n\n\t\t\t// Platform validity (read by `form.checkValidity()` and `:invalid`)\n\t\t\t// is always set to the truth — independent of the visual gate.\n\t\t\tif (requiredFailed) {\n\t\t\t\tthis.internals?.setValidity(\n\t\t\t\t\t{ valueMissing: true },\n\t\t\t\t\tthis.validationMessage || defaultMessage,\n\t\t\t\t)\n\t\t\t} else if (!customErrorSet) {\n\t\t\t\t// No required failure, no custom error — clear flags.\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t}\n\t\t\t// (customErrorSet branch falls through — leave the custom validity intact.)\n\n\t\t\t// Visual `error` flag is gated. The returned boolean tells the caller\n\t\t\t// the truth; only the in-component error display is suppressed for\n\t\t\t// pristine fields under `validateOn: 'dirty'`.\n\t\t\tif (this._shouldShowError()) {\n\t\t\t\tthis.error = !isValid\n\t\t\t\tif (!isValid && !this.validationMessage) {\n\t\t\t\t\tthis.validationMessage = defaultMessage\n\t\t\t\t} else if (isValid) {\n\t\t\t\t\tthis.validationMessage = ''\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn isValid\n\t\t}\n\n\t\treportValidity(): boolean {\n\t\t\tconst isValid = this.checkValidity()\n\t\t\tif (!isValid) this.internals?.reportValidity()\n\t\t\treturn isValid\n\t\t}\n\n\t\tsetCustomValidity(message: string): void {\n\t\t\tthis.validationMessage = message\n\t\t\tthis.error = message !== ''\n\t\t\tif (message) {\n\t\t\t\tthis.internals?.setValidity({ customError: true }, message)\n\t\t\t} else {\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t}\n\t\t}\n\n\t\temitChange(detail: any): void {\n\t\t\tif ('dispatchScopedEvent' in this && typeof this.dispatchScopedEvent === 'function') {\n\t\t\t\tthis.dispatchScopedEvent('change', detail, { bubbles: true })\n\t\t\t} else {\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\t\tdetail,\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t}\n\n\treturn FormFieldMixinClass as Constructor<IFormFieldMixin> & T\n}\n\n/**\n * A convenience function that composes FormFieldMixin with SchmancyElement\n * to create a base class for Schmancy form components. Subclasses gain the\n * full SchmancyElement stack (SignalWatcher, _activeHost wrap, AbortSignal,\n * automatic Tailwind injection) plus the form-field semantics.\n */\nexport function SchmancyFormField<T extends CSSResult>(componentStyle?: T) {\n\tclass StyledSchmancyElement extends SchmancyElement {\n\t\tstatic styles = componentStyle ? [componentStyle] : []\n\t}\n\treturn FormFieldMixin(StyledSchmancyElement) as unknown as Constructor<IFormFieldMixin> &\n\t\tConstructor<ITailwindElementMixin> &\n\t\tConstructor<LitElement> &\n\t\tConstructor<IBaseMixin>\n}\n","import { CSSResult, LitElement } from 'lit'\nimport { IBaseMixin } from './baseElement'\nimport { Constructor } from './constructor'\nimport { SchmancyElement } from './SchmancyElement'\n\n/**\n * @deprecated Extend `SchmancyElement` directly and declare `static styles`.\n *\n *   Before: extends $LitElement(css`...`)\n *   After:  extends SchmancyElement { static styles = [css`...`] }\n *\n * Kept as a thin alias for the migration window; will be removed in the next\n * major Schmancy release. The returned class extends `SchmancyElement` so\n * runtime semantics (Tailwind injection, `disconnecting` Subject,\n * `disconnectedSignal` AbortSignal, SignalWatcher) match exactly.\n */\nexport const $LitElement = <T extends CSSResult>(componentStyle?: T) => {\n\tclass LegacyAlias extends SchmancyElement {\n\t\tstatic styles = componentStyle ? [componentStyle] : []\n\t}\n\treturn LegacyAlias as CustomElementConstructor &\n\t\tConstructor<LitElement> &\n\t\tConstructor<IBaseMixin>\n}\n","import { css } from 'lit'\n\n/**\n * Luminous Glass surface type styles.\n *\n * Depth model: blur intensity + opacity replaces M3 tonal hierarchy.\n * - solid:    opaque ground (0 blur, 100% opacity)\n * - subtle:   frosted panel (4px blur, ~72% opacity)\n * - glass:    full frosted glass (20px blur, ~55% opacity)\n * - luminous: glass + glow halo (24px blur, ~22% opacity)\n */\nexport const surfaceTypeStyles = css`\n\t/* ================================================================\n\t   STRUCTURAL TYPES — All-glass depth model.\n\t   Nothing is opaque. Every layer is translucent.\n\t   Blur creates readability. Light borders isolate layers.\n\t   Rule: text must ALWAYS be readable on every surface.\n\t   ================================================================ */\n\n\t/* Solid — dense glass, high readability ground layer (no blur — 92% opacity is enough) */\n\t:host([type='solid']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-lowest);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\t\tbackground: color-mix(in srgb, var(--glass-base) 92%, transparent);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\n\t/* Subtle — frosted glass, clearly readable */\n\t:host([type='subtle']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-container);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\t\tbackground: color-mix(in srgb, var(--glass-base) 78%, transparent);\n\t\tbackdrop-filter: blur(8px) saturate(130%);\n\t\t-webkit-backdrop-filter: blur(8px) saturate(130%);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\n\t/* Glass — frosted glass, blur ensures readability */\n\t:host([type='glass']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-lowest);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\n\t\tbackground: color-mix(in srgb, var(--glass-base) 55%, transparent);\n\t\tbackdrop-filter: blur(16px) saturate(180%) brightness(1.05);\n\t\t-webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.05);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tcontain: content;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tisolation: isolate;\n\t}\n\n\t/* Luminous — glass + glow halo, heavy blur keeps readability */\n\t:host([type='luminous']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-lowest);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\t\t--glow-color: var(--schmancy-sys-color-primary-default);\n\n\t\tbackground: color-mix(in srgb, var(--glass-base) 42%, transparent);\n\t\tbackdrop-filter: blur(20px) saturate(200%) brightness(1.08);\n\t\t-webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.08);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tcontain: content;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tisolation: isolate;\n\t}\n\n\t/* ================================================================\n\t   UTILITY TYPES\n\t   ================================================================ */\n\n\t/* Transparent — no background */\n\t:host([type='transparent']) {\n\t\tbackground-color: transparent;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\n\t/* Outlined — border with luminous hover potential */\n\t:host([type='outlined']) {\n\t\tbackground-color: transparent;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid var(--schmancy-sys-color-outlineVariant);\n\t\ttransition: border-color 300ms ease, box-shadow 300ms ease;\n\t}\n\n\t/* ================================================================\n\t   SEMANTIC TYPES — tinted glass for status/role\n\t   ================================================================ */\n\n\t:host([type='primary']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-primary-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-primary-default);\n\t}\n\t:host([type='secondary']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-secondary-default);\n\t}\n\t:host([type='tertiary']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-tertiary-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-tertiary-default);\n\t}\n\t:host([type='error']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-error-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-error-onContainer);\n\t}\n\t:host([type='success']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-success-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-success-onContainer);\n\t}\n\t:host([type='warning']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-warning-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-warning-onContainer);\n\t}\n\t:host([type='info']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-info-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-info-onContainer);\n\t}\n\n\t/* ================================================================\n\t   LEGACY M3 ALIASES — backward compatibility\n\t   Old type names render as their new Luminous Glass equivalents.\n\t   ================================================================ */\n\n\t/* solid aliases — dense glass */\n\t:host([type='surface']),\n\t:host([type='surfaceDim']),\n\t:host([type='surfaceBright']),\n\t:host([type='containerLowest']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-lowest);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\t\tbackground: color-mix(in srgb, var(--glass-base) 92%, transparent);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\n\t/* subtle aliases — frosted glass */\n\t:host([type='containerLow']),\n\t:host([type='container']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-container);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\t\tbackground: color-mix(in srgb, var(--glass-base) 78%, transparent);\n\t\tbackdrop-filter: blur(8px) saturate(130%);\n\t\t-webkit-backdrop-filter: blur(8px) saturate(130%);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\n\t/* glass aliases */\n\t:host([type='containerHigh']),\n\t:host([type='containerHighest']),\n\t:host([type='glassOforim']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-lowest);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\n\t\tbackground: color-mix(in srgb, var(--glass-base) 55%, transparent);\n\t\tbackdrop-filter: blur(16px) saturate(180%) brightness(1.05);\n\t\t-webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.05);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tisolation: isolate;\n\t}\n\n\t/* ================================================================\n\t   REDUCED MOTION — disable glass animations\n\t   ================================================================ */\n`\n\n/**\n * Surface fill styles - dimension control\n */\nexport const surfaceFillStyles = css`\n\t:host([fill='all']) {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t:host([fill='width']) {\n\t\twidth: 100%;\n\t}\n\t:host([fill='height']) {\n\t\theight: 100%;\n\t}\n`\n\n/**\n * Surface rounded corner styles\n */\nexport const surfaceRoundedStyles = css`\n\t:host([rounded='none']) {\n\t\tborder-radius: 0;\n\t}\n\t:host([rounded='top']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large) 0 0;\n\t}\n\t:host([rounded='left']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-large) 0 0 var(--schmancy-sys-shape-corner-large);\n\t}\n\t:host([rounded='right']) {\n\t\tborder-radius: 0 var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large) 0;\n\t}\n\t:host([rounded='bottom']) {\n\t\tborder-radius: 0 0 var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large);\n\t}\n\t:host([rounded='all']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-large);\n\t}\n`\n\n/**\n * Luminous glow elevation — replaces M3 dark drop shadows with primary-colored glow.\n * No ::after tint overlay — depth comes from glow intensity, not surface tint.\n */\nexport const surfaceElevationStyles = css`\n\t:host([elevation='1']) {\n\t\tbox-shadow: 0 2px 12px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);\n\t\tposition: relative;\n\t}\n\t:host([elevation='2']) {\n\t\tbox-shadow: 0 4px 20px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 22%, transparent);\n\t\tposition: relative;\n\t}\n\t:host([elevation='3']) {\n\t\tbox-shadow: 0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 28%, transparent);\n\t\tposition: relative;\n\t}\n\t:host([elevation='4']) {\n\t\tbox-shadow: 0 12px 44px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 35%, transparent);\n\t\tposition: relative;\n\t}\n\t:host([elevation='5']) {\n\t\tbox-shadow: 0 20px 60px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 42%, transparent);\n\t\tposition: relative;\n\t}\n`\n\n/**\n * Surface clickable styles - luminous hover, spring active\n */\nexport const surfaceClickableStyles = css`\n\t:host([clickable]) {\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\t-webkit-tap-highlight-color: transparent;\n\t\ttransition:\n\t\t\tfilter 200ms ease,\n\t\t\ttransform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),\n\t\t\tbox-shadow 400ms ease;\n\t}\n\t:host([clickable]:hover) {\n\t\tfilter: brightness(1.03);\n\t}\n\t:host([clickable]:active) {\n\t\tfilter: brightness(0.96);\n\t\ttransform: scale(0.98);\n\t\ttransition-duration: 100ms;\n\t}\n\t:host([clickable]:focus-visible) {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default);\n\t\toutline-offset: 2px;\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host([clickable]) { transition: filter 150ms ease; }\n\t\t:host([clickable]:hover) { transform: none; box-shadow: none; }\n\t\t:host([clickable]:active) { transform: none; }\n\t}\n`\n\n/**\n * Combined surface styles - includes all surface styling capabilities\n */\nexport const surfaceStyles = css`\n\t${surfaceTypeStyles}\n\t${surfaceFillStyles}\n\t${surfaceRoundedStyles}\n\t${surfaceElevationStyles}\n\t${surfaceClickableStyles}\n`\n","import type { Constructor } from './constructor'\nimport { CSSResultGroup, CSSResultOrNative, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport type { TSurfaceColor } from '../src/types/surface'\nimport { surfaceStyles } from '../src/surface/surface.styles'\n\nexport type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'\nexport type SchmancySurfaceRounded = 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all'\nexport type SchmancySurfaceElevation = 0 | 1 | 2 | 3 | 4 | 5\n\nexport declare class ISurfaceMixin {\n\tfill: SchmancySurfaceFill\n\trounded: SchmancySurfaceRounded\n\televation: SchmancySurfaceElevation\n\ttype: TSurfaceColor\n\tclickable: boolean\n}\n\n/**\n * SurfaceMixin - Adds surface styling properties AND styles to any LitElement\n *\n * Uses Lit's finalizeStyles hook to inject surfaceStyles CSS for all surface type selectors.\n * This is the recommended pattern for mixins that need to add styles.\n *\n * Provides these reflected properties:\n * - `fill`: 'all' | 'width' | 'height' | 'auto' - Controls element dimensions\n * - `rounded`: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' - Corner rounding\n * - `elevation`: 0-5 - Shadow depth level\n * - `type`: TSurfaceColor - Surface color variant (26+ options)\n *\n * Usage:\n * ```typescript\n * import { SurfaceMixin } from '@mixins/surface.mixin'\n *\n * @customElement('my-component')\n * class MyComponent extends SurfaceMixin(TailwindElement(css`\n *   :host { display: block; }\n * `)) {\n *   // Component now has type, fill, rounded, elevation properties\n *   // AND surfaceStyles are automatically included\n * }\n * ```\n */\nexport const SurfaceMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n\tclass SurfaceMixinClass extends superClass {\n\t\t/**\n\t\t * Override finalizeStyles to inject surfaceStyles.\n\t\t * This is the Lit-recommended way for mixins to add styles.\n\t\t */\n\t\tprotected static finalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[] {\n\t\t\t// Get parent's finalized styles using LitElement's method\n\t\t\tconst parentStyles = (superClass as unknown as typeof LitElement).finalizeStyles(styles)\n\t\t\t// Append surfaceStyles at the end (higher specificity)\n\t\t\treturn [...parentStyles, surfaceStyles as CSSResultOrNative]\n\t\t}\n\n\t\t/**\n\t\t * Fill the width and/or height of the parent container.\n\t\t * @default 'auto'\n\t\t */\n\t\t@property({ type: String, reflect: true })\n\t\tfill: SchmancySurfaceFill = 'auto'\n\n\t\t/**\n\t\t * Specifies the rounding style of the component's corners.\n\t\t * @default 'none'\n\t\t */\n\t\t@property({ reflect: true })\n\t\trounded: SchmancySurfaceRounded = 'none'\n\n\t\t/**\n\t\t * Defines the elevation level (shadow depth) of the surface.\n\t\t * @default 0\n\t\t */\n\t\t@property({ type: Number, reflect: true })\n\t\televation: SchmancySurfaceElevation = 0\n\n\t\t/**\n\t\t * Specifies the surface type for styling.\n\t\t * @default 'container'\n\t\t */\n\t\t@property({ reflect: true })\n\t\ttype: TSurfaceColor = 'subtle'\n\n\t\t/**\n\t\t * Makes the surface interactive with hover, active states and cursor pointer.\n\t\t * @default false\n\t\t */\n\t\t@property({ type: Boolean, reflect: true })\n\t\tclickable = false\n\t}\n\treturn SurfaceMixinClass as Constructor<ISurfaceMixin> & T\n}\n"],"mappings":"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"}

package/dist/mixins.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./mixins-DTCHPEd4.cjs`);exports.$LitElement=e.n,exports.BaseElement=e.d,exports.DISCOVER_EVENT=e.p,exports.DISCOVER_RESPONSE_EVENT=e.m,exports.FIELD_CONNECT_EVENT=e.r,exports.FormFieldMixin=e.i,exports.SCHMANCY_FORM_FIELD=e.a,exports.SchmancyElement=e.c,exports.SchmancyFormField=e.o,exports.SurfaceMixin=e.t,exports.TailwindElement=e.l,exports.discover=e.h,exports.discoverAllElements=e.g,exports.discoverAnyComponent=e._,exports.discoverComponent=e.v,exports.discoverElement=e.y,exports.isSchmancyFormField=e.s,exports.tailwindStyles=e.u;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./mixins-CsYsIJOI.cjs`);exports.$LitElement=e.n,exports.BaseElement=e.f,exports.DISCOVER_EVENT=e.m,exports.DISCOVER_RESPONSE_EVENT=e.h,exports.FIELD_CONNECT_EVENT=e.r,exports.FormFieldMixin=e.i,exports.SCHMANCY_FORM_FIELD=e.a,exports.SchmancyElement=e.c,exports.SchmancyFormField=e.o,exports.SurfaceMixin=e.t,exports.TailwindElement=e.u,exports.discover=e.g,exports.discoverAllElements=e._,exports.discoverAnyComponent=e.v,exports.discoverComponent=e.y,exports.discoverElement=e.b,exports.isSchmancyFormField=e.s,exports.schmancyElement=e.l,exports.tailwindStyles=e.d;

package/dist/mixins.js

@@ -1,2 +1,2 @@
-import { _ as e, a as t, c as n, d as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h, v as g, y as _ } from "./mixins-pU53qf6R.js";
-export { l as $LitElement, r as BaseElement, d as DISCOVER_EVENT, c as DISCOVER_RESPONSE_EVENT, f as FIELD_CONNECT_EVENT, o as FormFieldMixin, t as SCHMANCY_FORM_FIELD, n as SchmancyElement, u as SchmancyFormField, m as SurfaceMixin, s as TailwindElement, a as discover, i as discoverAllElements, e as discoverAnyComponent, g as discoverComponent, _ as discoverElement, p as isSchmancyFormField, h as tailwindStyles };
+import { _ as e, a as t, b as n, c as r, d as i, f as a, g as o, h as s, i as c, l, m as u, n as d, o as f, r as p, s as m, t as h, u as g, v as _, y as v } from "./mixins-DySzfmal.js";
+export { d as $LitElement, a as BaseElement, u as DISCOVER_EVENT, s as DISCOVER_RESPONSE_EVENT, p as FIELD_CONNECT_EVENT, c as FormFieldMixin, t as SCHMANCY_FORM_FIELD, r as SchmancyElement, f as SchmancyFormField, h as SurfaceMixin, g as TailwindElement, o as discover, e as discoverAllElements, _ as discoverAnyComponent, v as discoverComponent, n as discoverElement, m as isSchmancyFormField, l as schmancyElement, i as tailwindStyles };

package/dist/nav-drawer.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-BWQvtOOf.cjs`);exports.$drawer=e.p,Object.defineProperty(exports,`SchmancyDrawerAppbar`,{enumerable:!0,get:function(){return e.f}}),exports.SchmancyDrawerNavbarMode=e.l,exports.SchmancyDrawerNavbarState=e.u,Object.defineProperty(exports,`SchmancyNavigationDrawer`,{enumerable:!0,get:function(){return e.c}}),Object.defineProperty(exports,`SchmancyNavigationDrawerContent`,{enumerable:!0,get:function(){return e.d}}),Object.defineProperty(exports,`SchmancyNavigationDrawerSidebar`,{enumerable:!0,get:function(){return e.s}}),exports.schmancyNavDrawer=e.m;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-DQ4wr0qq.cjs`);exports.$drawer=e.p,Object.defineProperty(exports,`SchmancyDrawerAppbar`,{enumerable:!0,get:function(){return e.f}}),exports.SchmancyDrawerNavbarMode=e.l,exports.SchmancyDrawerNavbarState=e.u,Object.defineProperty(exports,`SchmancyNavigationDrawer`,{enumerable:!0,get:function(){return e.c}}),Object.defineProperty(exports,`SchmancyNavigationDrawerContent`,{enumerable:!0,get:function(){return e.d}}),Object.defineProperty(exports,`SchmancyNavigationDrawerSidebar`,{enumerable:!0,get:function(){return e.s}}),exports.schmancyNavDrawer=e.m;

package/dist/nav-drawer.js

@@ -1,2 +1,2 @@
-import { c as e, d as t, f as n, l as r, m as i, p as a, s as o, u as s } from "./src-B15R32Sp.js";
+import { c as e, d as t, f as n, l as r, m as i, p as a, s as o, u as s } from "./src-B1VkLX3l.js";
 export { a as $drawer, n as SchmancyDrawerAppbar, r as SchmancyDrawerNavbarMode, s as SchmancyDrawerNavbarState, e as SchmancyNavigationDrawer, t as SchmancyNavigationDrawerContent, o as SchmancyNavigationDrawerSidebar, i as schmancyNavDrawer };

package/dist/navigation-bar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-BWQvtOOf.cjs`);Object.defineProperty(exports,`SchmancyNavigationBar`,{enumerable:!0,get:function(){return e.a}}),Object.defineProperty(exports,`SchmancyNavigationBarItem`,{enumerable:!0,get:function(){return e.o}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-DQ4wr0qq.cjs`);Object.defineProperty(exports,`SchmancyNavigationBar`,{enumerable:!0,get:function(){return e.a}}),Object.defineProperty(exports,`SchmancyNavigationBarItem`,{enumerable:!0,get:function(){return e.o}});

package/dist/navigation-bar.js

@@ -1,2 +1,2 @@
-import { a as e, o as t } from "./src-B15R32Sp.js";
+import { a as e, o as t } from "./src-B1VkLX3l.js";
 export { e as SchmancyNavigationBar, t as SchmancyNavigationBarItem };

package/dist/navigation-rail.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-DTCHPEd4.cjs`),t=require(`./active-host-jH3iloCR.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/when.js`);var s=class extends e.c{constructor(...e){super(...e),this.hovering$=new n.BehaviorSubject(!1),this.pressing$=new n.BehaviorSubject(!1),this.active$=new n.BehaviorSubject(!1),this.icon=``,this.label=``,this.value=``,this.badge=``,this.badgeVariant=`error`,this.showLabel=!1,this.disabled=!1,this.nested=!1,this.group=!1,this.showRipple=!1}get active(){return this.active$.value}set active(e){this.active$.next(e)}get selected(){return this.active}set selected(e){this.active=e}connectedCallback(){super.connectedCallback(),(0,n.merge)((0,n.fromEvent)(this,`mouseenter`).pipe((0,r.tap)(()=>this.hovering$.next(!0))),(0,n.fromEvent)(this,`mouseleave`).pipe((0,r.tap)(()=>this.hovering$.next(!1)))).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(),(0,n.merge)((0,n.fromEvent)(this,`mousedown`).pipe((0,r.tap)(()=>this.pressing$.next(!0))),(0,n.fromEvent)(this,`mouseup`).pipe((0,r.tap)(()=>this.pressing$.next(!1))),(0,n.fromEvent)(this,`mouseleave`).pipe((0,r.tap)(()=>this.pressing$.next(!1)))).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(),this.pressing$.pipe((0,r.tap)(e=>{e&&!this.disabled&&(this.showRipple=!0)}),(0,r.delay)(600),(0,r.tap)(()=>this.showRipple=!1),(0,n.takeUntil)(this.disconnecting)).subscribe(),this.active$.pipe((0,r.distinctUntilChanged)(),(0,r.tap)(e=>{this.requestUpdate(),this.setAttribute(`aria-selected`,String(e)),this.setAttribute(`tabindex`,e?`0`:`-1`)}),(0,n.takeUntil)(this.disconnecting)).subscribe(),this.setAttribute(`role`,`listitem`),this.hasAttribute(`tabindex`)||this.setAttribute(`tabindex`,this.active?`0`:`-1`)}updated(e){super.updated(e),e.has(`disabled`)&&this.setAttribute(`aria-disabled`,String(this.disabled)),e.has(`label`)&&this.setAttribute(`aria-label`,this.label)}handleClick(e){if(this.disabled)return e.preventDefault(),void e.stopPropagation();this.dispatchEvent(new CustomEvent(`navigate`,{detail:this.value||this.label,bubbles:!0,composed:!0}))}handleKeyDown(e){this.disabled||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),this.click())}render(){let e=!!this.querySelector(`[slot="icon"]`),t=this.querySelector(`[slot="badge"]`),n=this.classMap({"flex flex-col items-center justify-center":!0,"min-h-14 w-full":!0,"py-3":!0,"gap-1":!0,"rounded-lg":!0,"cursor-pointer":!0,relative:!0,"select-none":!0,"box-border":!0,"text-surface-onVariant":!this.active,"text-secondary-onContainer":this.active,"hover:bg-surface-containerHighest":!0,"transition-all duration-150 ease-out":!0,"pointer-events-none opacity-38":this.disabled,"[&>.ripple]:scale-100":this.showRipple,"min-h-12 pl-8":this.nested,"mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12":this.group}),r=this.classMap({"flex items-center justify-center":!0,"w-auto min-w-14 h-8":!0,"shrink-0 relative z-10":!0}),i=this.classMap({"absolute top-1/2 left-1/2 opacity-30":!0,"w-14 h-8":!0,"rounded-lg":!0,"bg-secondary-container":!0,"transition-transform duration-150 ease-out":!0,"scale-0 -translate-x-1/2 -translate-y-1/2":!this.active,"scale-100 -translate-x-1/2 -translate-y-1/2":this.active}),s=this.classMap({"relative z-100":!0,"text-2xl leading-none":!this.nested,"text-xl leading-none":this.nested}),c=this.classMap({"text-xs font-medium leading-4":!0,"text-center":!0,"overflow-hidden text-ellipsis whitespace-nowrap":!0,"z-10 max-w-14 px-1":!0,hidden:!this.showLabel&&!this.label}),l=this.classMap({"absolute top-2 right-3":!0,"min-w-4 h-4":!0,"rounded-sm":!0,"text-xs font-semibold":!0,"flex items-center justify-center":!0,"px-1 box-border z-20":!0,"animate-pulse":!0,"bg-error-default text-error-on":this.badgeVariant===`error`,"bg-primary-default text-primary-on":this.badgeVariant===`primary`,"bg-secondary-default text-secondary-on":this.badgeVariant===`secondary`}),u=this.classMap({"absolute inset-0 rounded-lg overflow-hidden z-0":!0,'before:content-[""] before:absolute before:top-1/2 before:left-1/2':!0,"before:w-0 before:h-0 before:rounded-full":!0,"before:bg-current before:opacity-0":!0,"before:-translate-x-1/2 before:-translate-y-1/2":!0,"before:transition-all before:duration-300":!0,"before:w-[200%] before:h-[200%] before:opacity-12":this.showRipple});return a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./mixins-CsYsIJOI.cjs`),t=require(`./active-host-jH3iloCR.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/when.js`);var s=class extends e.c{constructor(...e){super(...e),this.hovering$=new n.BehaviorSubject(!1),this.pressing$=new n.BehaviorSubject(!1),this.active$=new n.BehaviorSubject(!1),this.icon=``,this.label=``,this.value=``,this.badge=``,this.badgeVariant=`error`,this.showLabel=!1,this.disabled=!1,this.nested=!1,this.group=!1,this.showRipple=!1}get active(){return this.active$.value}set active(e){this.active$.next(e)}get selected(){return this.active}set selected(e){this.active=e}connectedCallback(){super.connectedCallback(),(0,n.merge)((0,n.fromEvent)(this,`mouseenter`).pipe((0,r.tap)(()=>this.hovering$.next(!0))),(0,n.fromEvent)(this,`mouseleave`).pipe((0,r.tap)(()=>this.hovering$.next(!1)))).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(),(0,n.merge)((0,n.fromEvent)(this,`mousedown`).pipe((0,r.tap)(()=>this.pressing$.next(!0))),(0,n.fromEvent)(this,`mouseup`).pipe((0,r.tap)(()=>this.pressing$.next(!1))),(0,n.fromEvent)(this,`mouseleave`).pipe((0,r.tap)(()=>this.pressing$.next(!1)))).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(),this.pressing$.pipe((0,r.tap)(e=>{e&&!this.disabled&&(this.showRipple=!0)}),(0,r.delay)(600),(0,r.tap)(()=>this.showRipple=!1),(0,n.takeUntil)(this.disconnecting)).subscribe(),this.active$.pipe((0,r.distinctUntilChanged)(),(0,r.tap)(e=>{this.requestUpdate(),this.setAttribute(`aria-selected`,String(e)),this.setAttribute(`tabindex`,e?`0`:`-1`)}),(0,n.takeUntil)(this.disconnecting)).subscribe(),this.setAttribute(`role`,`listitem`),this.hasAttribute(`tabindex`)||this.setAttribute(`tabindex`,this.active?`0`:`-1`)}updated(e){super.updated(e),e.has(`disabled`)&&this.setAttribute(`aria-disabled`,String(this.disabled)),e.has(`label`)&&this.setAttribute(`aria-label`,this.label)}handleClick(e){if(this.disabled)return e.preventDefault(),void e.stopPropagation();this.dispatchEvent(new CustomEvent(`navigate`,{detail:this.value||this.label,bubbles:!0,composed:!0}))}handleKeyDown(e){this.disabled||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),this.click())}render(){let e=!!this.querySelector(`[slot="icon"]`),t=this.querySelector(`[slot="badge"]`),n=this.classMap({"flex flex-col items-center justify-start":!0,"min-h-14 w-full":!0,"gap-1":!0,"rounded-lg":!0,"cursor-pointer":!0,relative:!0,"select-none":!0,"box-border":!0,"text-surface-onVariant":!this.active,"text-secondary-onContainer":this.active,"hover:bg-surface-containerHighest":!0,"transition-all duration-150 ease-out":!0,"pointer-events-none opacity-38":this.disabled,"[&>.ripple]:scale-100":this.showRipple,"min-h-12 pl-8":this.nested,"mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12":this.group}),r=this.classMap({"flex items-center justify-center":!0,"w-auto min-w-14 h-8":!0,"shrink-0 relative z-10":!0}),i=this.classMap({"absolute top-1/2 left-1/2 opacity-30":!0,"w-14 h-8":!0,"rounded-lg":!0,"bg-secondary-container":!0,"transition-transform duration-150 ease-out":!0,"scale-0 -translate-x-1/2 -translate-y-1/2":!this.active,"scale-100 -translate-x-1/2 -translate-y-1/2":this.active}),s=this.classMap({"relative z-100":!0,"text-2xl leading-none":!this.nested,"text-xl leading-none":this.nested}),c=this.classMap({"text-xs font-medium leading-4":!0,"text-center":!0,"overflow-hidden text-ellipsis whitespace-nowrap":!0,"z-10 max-w-14 px-1":!0,hidden:!this.showLabel&&!this.label}),l=this.classMap({"absolute top-2 right-3":!0,"min-w-4 h-4":!0,"rounded-sm":!0,"text-xs font-semibold":!0,"flex items-center justify-center":!0,"px-1 box-border z-20":!0,"animate-pulse":!0,"bg-error-default text-error-on":this.badgeVariant===`error`,"bg-primary-default text-primary-on":this.badgeVariant===`primary`,"bg-secondary-default text-secondary-on":this.badgeVariant===`secondary`}),u=this.classMap({"absolute inset-0 rounded-lg overflow-hidden z-0":!0,'before:content-[""] before:absolute before:top-1/2 before:left-1/2':!0,"before:w-0 before:h-0 before:rounded-full":!0,"before:bg-current before:opacity-0":!0,"before:-translate-x-1/2 before:-translate-y-1/2":!0,"before:transition-all before:duration-300":!0,"before:w-[200%] before:h-[200%] before:opacity-12":this.showRipple});return a.html`
 			<div
 				class=${n}
 				part="container"
@@ -11,13 +11,9 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 				<div class=${r} part="icon">
 					<span class=${i} part="indicator" aria-hidden="true"></span>
 					${(0,o.when)(e,()=>a.html`<slot class="relative" name="icon"></slot>`,()=>(0,o.when)(this.icon,()=>a.html`
-									<span
-										class=${s}
-										part="icon-text"
-										style="font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' ${this.active?`1`:`0`}, 'wght' 400, 'GRAD' 0, 'opsz' ${this.nested?`20`:`24`};"
-									>
-										${this.icon}
-									</span>
+									<schmancy-icon class=${s} part="icon-text">
+										${this.active?`${this.icon}-fill`:this.icon}
+									</schmancy-icon>
 								`))}
 				</div>
 
@@ -46,7 +42,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 						</div>
 					`)}
 			</div>
-		`}};t.a([(0,i.property)({type:String})],s.prototype,`icon`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`label`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`value`,void 0),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`active`,null),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`selected`,null),t.a([(0,i.property)({type:String})],s.prototype,`badge`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`badgeVariant`,void 0),t.a([(0,i.property)({type:Boolean,attribute:`show-label`})],s.prototype,`showLabel`,void 0),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`nested`,void 0),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`group`,void 0),t.a([(0,i.state)()],s.prototype,`showRipple`,void 0),s=t.a([(0,i.customElement)(`schmancy-navigation-rail-item`)],s);var c=class extends e.c{constructor(...e){super(...e),this.activeIndex$=new n.BehaviorSubject(-1),this._activeValue=``,this.labelVisibility=`all`,this.alignment=`top`,this.showTooltips=!0,this.keyboardNavigation=!0,this.expanded=!1,this.focusedIndex=-1,this.hasHeaderContent=!1,this.isFullscreen=!1}get activeIndex(){return this.activeIndex$.value}set activeIndex(e){this.activeIndex$.next(e)}get activeValue(){return this._activeValue}set activeValue(e){this._activeValue=e,this.updateActiveByValue(e)}get navigationItems(){return this.allElements.filter(e=>e.tagName===`SCHMANCY-NAVIGATION-RAIL-ITEM`)}connectedCallback(){super.connectedCallback(),this.keyboardNavigation&&this.addEventListener(`keydown`,this.handleKeyDown),this.activeIndex$.pipe((0,r.distinctUntilChanged)(),(0,r.tap)(e=>this.updateActiveStates(e)),(0,n.takeUntil)(this.disconnecting)).subscribe(),(0,n.fromEvent)(window,`fullscreen`).pipe((0,r.tap)(e=>{let t=e;this.isFullscreen=t.detail}),(0,n.takeUntil)(this.disconnecting)).subscribe(),this.setupNavigateListener(),this.updateLabelVisibility(),this.setAttribute(`role`,`navigation`),this.setAttribute(`aria-label`,`Main navigation`)}updated(e){super.updated(e),e.has(`labelVisibility`)&&this.updateLabelVisibility(),e.has(`activeValue`)&&this.updateActiveByValue(this.activeValue),e.has(`expanded`)&&this.updateLabelVisibility()}updateActiveStates(e){this.navigationItems.forEach((t,n)=>{let r=n===e;t.active=r,t.setAttribute(`aria-selected`,String(r)),t.setAttribute(`tabindex`,r?`0`:`-1`),r&&(this._activeValue=t.value||t.label||``)})}updateActiveByValue(e){let t=this.navigationItems.findIndex(t=>t.getAttribute(`value`)===e||t.label===e);t>=0&&(this.activeIndex=t)}updateLabelVisibility(){this.navigationItems.forEach((e,t)=>{let n=!1;n=!!this.expanded||this.labelVisibility===`all`||this.labelVisibility===`selected`&&t===this.activeIndex,e.showLabel=n,this.showTooltips&&!n&&!this.expanded&&e.label?e.setAttribute(`title`,e.label):e.removeAttribute(`title`)})}expand(){this.expanded=!0}collapse(){this.expanded=!1}addBoatItem(e){let t=this.querySelector(`[value="${e.id}"]`);if(t)return t;let n=document.createElement(`schmancy-navigation-rail-item`);n.setAttribute(`value`,e.id),n.innerHTML=`\n\t\t\t<schmancy-icon slot="icon">${e.icon||`widgets`}</schmancy-icon>\n\t\t\t${e.title}\n\t\t`;let r=this.querySelector(`[slot="footer"]`);return r?this.insertBefore(n,r):this.appendChild(n),n}toggle(){this.expanded=!this.expanded}handleKeyDown(e){let t=this.navigationItems;if(t.length===0)return;let n=this.focusedIndex>=0?this.focusedIndex:this.activeIndex;switch(e.key){case`ArrowDown`:e.preventDefault(),n=(n+1)%t.length;break;case`ArrowUp`:e.preventDefault(),n=n<=0?t.length-1:n-1;break;case`Home`:e.preventDefault(),n=0;break;case`End`:e.preventDefault(),n=t.length-1;break;case`Enter`:case` `:e.preventDefault(),n>=0&&t[n].click();return;default:return}this.focusedIndex=n,t[n].focus()}handleFabClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`fab-click`,{bubbles:!0,composed:!0}))}handleMenuClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`menu-click`,{bubbles:!0,composed:!0}))}render(){let e=this.classMap({"flex flex-col":!0,"h-full":!0,"box-border relative overflow-visible":!0,"z-10 hover:z-[100]":!0,"w-20":!this.isFullscreen,"w-0":this.isFullscreen,"transition-all duration-300 ease-emphasized":!0,"opacity-100":!this.isFullscreen,"opacity-0 pointer-events-none":this.isFullscreen,"overflow-hidden":this.isFullscreen}),t=this.classMap({"flex flex-col h-full":!0,"box-border relative":!0,"py-2":!0,"bg-container-lowest text-surface-on":!0,"transition-all duration-300 ease-emphasized":!0,"w-20":!this.expanded,"px-3":!this.expanded,"w-60":this.expanded,"px-4":this.expanded,"shadow-lg":this.expanded}),n=this.classMap({"flex flex-col items-center gap-1":!0,hidden:!this.hasHeaderContent}),r=this.classMap({"flex-1 flex flex-col gap-3":!0,"min-h-0":!0,"justify-start":this.alignment===`top`,"justify-center":this.alignment===`center`,"justify-end":this.alignment===`bottom`}),i=this.classMap({"flex flex-col items-center gap-1 mt-auto pt-2":!0});return a.html`
+		`}};t.a([(0,i.property)({type:String})],s.prototype,`icon`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`label`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`value`,void 0),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`active`,null),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`selected`,null),t.a([(0,i.property)({type:String})],s.prototype,`badge`,void 0),t.a([(0,i.property)({type:String})],s.prototype,`badgeVariant`,void 0),t.a([(0,i.property)({type:Boolean,attribute:`show-label`})],s.prototype,`showLabel`,void 0),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`nested`,void 0),t.a([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`group`,void 0),t.a([(0,i.state)()],s.prototype,`showRipple`,void 0),s=t.a([(0,i.customElement)(`schmancy-navigation-rail-item`)],s);var c=class extends e.c{constructor(...e){super(...e),this.activeIndex$=new n.BehaviorSubject(-1),this._activeValue=``,this.labelVisibility=`all`,this.alignment=`top`,this.showTooltips=!0,this.keyboardNavigation=!0,this.expanded=!1,this.focusedIndex=-1,this.hasHeaderContent=!1,this.isFullscreen=!1}get activeIndex(){return this.activeIndex$.value}set activeIndex(e){this.activeIndex$.next(e)}get activeValue(){return this._activeValue}set activeValue(e){this._activeValue=e,this.updateActiveByValue(e)}get navigationItems(){return this.allElements.filter(e=>e.tagName===`SCHMANCY-NAVIGATION-RAIL-ITEM`)}connectedCallback(){super.connectedCallback(),this.keyboardNavigation&&this.addEventListener(`keydown`,this.handleKeyDown),this.activeIndex$.pipe((0,r.distinctUntilChanged)(),(0,r.tap)(e=>this.updateActiveStates(e)),(0,n.takeUntil)(this.disconnecting)).subscribe(),(0,n.fromEvent)(window,`fullscreen`).pipe((0,r.tap)(e=>{let t=e;this.isFullscreen=t.detail}),(0,n.takeUntil)(this.disconnecting)).subscribe(),this.setupNavigateListener(),this.updateLabelVisibility(),this.setAttribute(`role`,`navigation`),this.setAttribute(`aria-label`,`Main navigation`)}updated(e){super.updated(e),e.has(`labelVisibility`)&&this.updateLabelVisibility(),e.has(`activeValue`)&&this.updateActiveByValue(this.activeValue),e.has(`expanded`)&&this.updateLabelVisibility()}updateActiveStates(e){this.navigationItems.forEach((t,n)=>{let r=n===e;t.active=r,t.setAttribute(`aria-selected`,String(r)),t.setAttribute(`tabindex`,r?`0`:`-1`),r&&(this._activeValue=t.value||t.label||``)})}updateActiveByValue(e){let t=this.navigationItems.findIndex(t=>t.getAttribute(`value`)===e||t.label===e);t>=0&&(this.activeIndex=t)}updateLabelVisibility(){this.navigationItems.forEach((e,t)=>{let n=!1;n=!!this.expanded||this.labelVisibility===`all`||this.labelVisibility===`selected`&&t===this.activeIndex,e.showLabel=n,this.showTooltips&&!n&&!this.expanded&&e.label?e.setAttribute(`title`,e.label):e.removeAttribute(`title`)})}expand(){this.expanded=!0}collapse(){this.expanded=!1}addBoatItem(e){let t=this.querySelector(`[value="${e.id}"]`);if(t)return t;let n=document.createElement(`schmancy-navigation-rail-item`);n.setAttribute(`value`,e.id),n.innerHTML=`\n\t\t\t<schmancy-icon slot="icon">${e.icon||`widgets`}</schmancy-icon>\n\t\t\t${e.title}\n\t\t`;let r=this.querySelector(`[slot="footer"]`);return r?this.insertBefore(n,r):this.appendChild(n),n}toggle(){this.expanded=!this.expanded}handleKeyDown(e){let t=this.navigationItems;if(t.length===0)return;let n=this.focusedIndex>=0?this.focusedIndex:this.activeIndex;switch(e.key){case`ArrowDown`:e.preventDefault(),n=(n+1)%t.length;break;case`ArrowUp`:e.preventDefault(),n=n<=0?t.length-1:n-1;break;case`Home`:e.preventDefault(),n=0;break;case`End`:e.preventDefault(),n=t.length-1;break;case`Enter`:case` `:e.preventDefault(),n>=0&&t[n].click();return;default:return}this.focusedIndex=n,t[n].focus()}handleFabClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`fab-click`,{bubbles:!0,composed:!0}))}handleMenuClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`menu-click`,{bubbles:!0,composed:!0}))}render(){let e=this.classMap({"flex flex-col":!0,"h-full":!0,"box-border relative overflow-visible":!0,"z-10 hover:z-[100]":!0,"w-20":!this.isFullscreen,"w-0":this.isFullscreen,"transition-all duration-300 ease-emphasized":!0,"opacity-100":!this.isFullscreen,"opacity-0 pointer-events-none":this.isFullscreen,"overflow-hidden":this.isFullscreen}),t=this.classMap({"flex flex-col h-full":!0,"box-border relative":!0,"bg-container-lowest text-surface-on":!0,"transition-all duration-300 ease-emphasized":!0,"w-20":!this.expanded,"px-3":!this.expanded,"w-60":this.expanded,"px-4":this.expanded,"shadow-lg":this.expanded}),n=this.classMap({"flex flex-col items-center gap-1":!0,hidden:!this.hasHeaderContent}),r=this.classMap({"flex-1 flex flex-col gap-3":!0,"min-h-0":!0,"justify-start":this.alignment===`top`,"justify-center":this.alignment===`center`,"justify-end":this.alignment===`bottom`}),i=this.classMap({"flex flex-col items-center gap-1 mt-auto pt-2":!0});return a.html`
 			<div
 				class=${e}
 			>

package/dist/navigation-rail.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-rail.cjs","names":[],"sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { BehaviorSubject, fromEvent, merge, takeUntil } from 'rxjs'\nimport { delay, distinctUntilChanged, tap } from 'rxjs/operators'\n\nexport type NavigationRailItemClickEvent = CustomEvent<{\n\ticon: string\n\tlabel: string\n\tvalue: string\n\tactive: boolean\n}>\n\n/**\n * Material Design 3 Navigation Rail Item Component\n * @see https://m3.material.io/components/navigation-rail/overview\n *\n * `<schmancy-navigation-rail-item>` component\n *\n * Individual navigation item for use within a navigation rail.\n * Represents a single destination or action with an icon and optional label.\n *\n * @element schmancy-navigation-rail-item\n * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)\n * @slot - Default slot for custom content\n * @slot badge - Custom badge content\n *\n * @fires navigate - When the item is clicked\n *\n * @csspart container - The main item container\n * @csspart indicator - The active indicator\n * @csspart icon - The icon container\n * @csspart label - The label text\n * @csspart badge - The badge element\n *\n * @example\n * <schmancy-navigation-rail-item\n *   icon=\"home\"\n *   label=\"Home\"\n *   value=\"/home\"\n *   badge=\"3\"\n *   active>\n * </schmancy-navigation-rail-item>\n *\n * @example\n * <!-- Using 'selected' alias -->\n * <schmancy-navigation-rail-item\n *   icon=\"settings\"\n *   label=\"Settings\"\n *   value=\"/settings\"\n *   selected>\n * </schmancy-navigation-rail-item>\n *\n * @example\n * <!-- With custom icon -->\n * <schmancy-navigation-rail-item label=\"Dashboard\">\n *   <schmancy-icon slot=\"icon\">dashboard</schmancy-icon>\n * </schmancy-navigation-rail-item>\n */\n@customElement('schmancy-navigation-rail-item')\nexport class SchmancyNavigationRailItem extends SchmancyElement {\n\t// Observable state\n\tprivate hovering$ = new BehaviorSubject<boolean>(false)\n\tprivate pressing$ = new BehaviorSubject<boolean>(false)\n\tprivate active$ = new BehaviorSubject<boolean>(false)\n\n\t// Properties\n\t/**\n\t * Icon name (Material Symbols icon)\n\t */\n\t@property({ type: String })\n\ticon = ''\n\n\t/**\n\t * Label text for the navigation item\n\t */\n\t@property({ type: String })\n\tlabel = ''\n\n\t/**\n\t * Value associated with this item (useful for routing)\n\t */\n\t@property({ type: String })\n\tvalue = ''\n\n\t/**\n\t * Whether this item is currently active/selected\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget active() {\n\t\treturn this.active$.value\n\t}\n\tset active(value: boolean) {\n\t\tthis.active$.next(value)\n\t}\n\n\t/**\n\t * Whether this item is currently selected (alias for active)\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget selected() {\n\t\treturn this.active\n\t}\n\tset selected(value: boolean) {\n\t\tthis.active = value\n\t}\n\n\t/**\n\t * Badge text or number to display\n\t */\n\t@property({ type: String })\n\tbadge = ''\n\n\t/**\n\t * Badge variant\n\t */\n\t@property({ type: String })\n\tbadgeVariant: 'error' | 'primary' | 'secondary' = 'error'\n\n\t/**\n\t * Whether to show the label (controlled by parent rail)\n\t * @default false\n\t */\n\t@property({ type: Boolean, attribute: 'show-label' })\n\tshowLabel = false\n\n\t/**\n\t * Whether this item is disabled\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false\n\n\t/**\n\t * Whether this is a nested item (sub-navigation)\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tnested = false\n\n\t/**\n\t * Whether this item represents a group separator\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tgroup = false\n\n\t// State\n\t@state()\n\tprivate showRipple = false\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Set up hover tracking\n\t\tmerge(\n\t\t\tfromEvent(this, 'mouseenter').pipe(tap(() => this.hovering$.next(true))),\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.hovering$.next(false))),\n\t\t)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe()\n\n\t\t// Set up press tracking\n\t\tmerge(\n\t\t\tfromEvent(this, 'mousedown').pipe(tap(() => this.pressing$.next(true))),\n\t\t\tfromEvent(this, 'mouseup').pipe(tap(() => this.pressing$.next(false))),\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.pressing$.next(false))),\n\t\t)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe()\n\n\t\t// Ripple effect with M3 timing\n\t\tthis.pressing$\n\t\t\t.pipe(\n\t\t\t\ttap(pressing => {\n\t\t\t\t\tif (pressing && !this.disabled) {\n\t\t\t\t\t\tthis.showRipple = true\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\t// M3 standard ripple duration\n\t\t\t\tdelay(600),\n\t\t\t\ttap(() => (this.showRipple = false)),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Subscribe to active state changes for reactive updates\n\t\tthis.active$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(isActive => {\n\t\t\t\t\tthis.requestUpdate()\n\t\t\t\t\t// Update ARIA attributes reactively\n\t\t\t\t\tthis.setAttribute('aria-selected', String(isActive))\n\t\t\t\t\tthis.setAttribute('tabindex', isActive ? '0' : '-1')\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Set ARIA attributes\n\t\tthis.setAttribute('role', 'listitem')\n\t\tif (!this.hasAttribute('tabindex')) {\n\t\t\tthis.setAttribute('tabindex', this.active ? '0' : '-1')\n\t\t}\n\t}\n\n\tupdated(changedProperties: PropertyValues) {\n\t\tsuper.updated(changedProperties)\n\n\t\t// Active state is now handled by the BehaviorSubject subscription\n\t\t// So we don't need to duplicate it here\n\n\t\tif (changedProperties.has('disabled')) {\n\t\t\tthis.setAttribute('aria-disabled', String(this.disabled))\n\t\t}\n\n\t\tif (changedProperties.has('label')) {\n\t\t\tthis.setAttribute('aria-label', this.label)\n\t\t}\n\t}\n\n\t/**\n\t * Handle click events\n\t */\n\tprivate handleClick(event: Event) {\n\t\tif (this.disabled) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\treturn\n\t\t}\n\n\t\t// Emit navigate event with the value\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('navigate', {\n\t\t\t\tdetail: this.value || this.label,\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Visual feedback is handled by the ripple effect in connectedCallback\n\t\t// The parent rail will confirm and update via activeIndex\n\t}\n\n\t/**\n\t * Handle keyboard events\n\t */\n\tprivate handleKeyDown(event: KeyboardEvent) {\n\t\tif (this.disabled) return\n\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tevent.preventDefault()\n\t\t\tthis.click()\n\t\t}\n\t}\n\n\tprotected render() {\n\t\tconst hasCustomIcon = !!this.querySelector('[slot=\"icon\"]')\n\t\tconst hasCustomBadge = this.querySelector('[slot=\"badge\"]')\n\n\t\t// M3 Navigation Rail Item classes with theme integration\n\t\tconst containerClasses = this.classMap({\n\t\t\t// Layout & Spacing (M3 56px height, 12px vertical padding)\n\t\t\t'flex flex-col items-center justify-center': true,\n\t\t\t'min-h-14 w-full': true, // min-h-14 = 56px\n\t\t\t'py-3': true, // py-3 = 12px top/bottom\n\t\t\t'gap-1': true, // gap-1 = 4px\n\n\t\t\t// M3 Shape & Interaction\n\t\t\t'rounded-lg': true, // M3 large corner radius\n\t\t\t'cursor-pointer': true,\n\t\t\trelative: true,\n\t\t\t'select-none': true,\n\t\t\t'box-border': true,\n\n\t\t\t// Colors & States\n\t\t\t'text-surface-onVariant': !this.active,\n\t\t\t'text-secondary-onContainer': this.active,\n\t\t\t'hover:bg-surface-containerHighest': true,\n\n\t\t\t// Transitions (M3 emphasized motion)\n\t\t\t'transition-all duration-150 ease-out': true,\n\n\t\t\t// Disabled state\n\t\t\t'pointer-events-none opacity-38': this.disabled,\n\n\t\t\t// Active ripple effect\n\t\t\t'[&>.ripple]:scale-100': this.showRipple,\n\n\t\t\t// Nested item adjustments\n\t\t\t'min-h-12 pl-8': this.nested, // 48px height, 32px left padding for nested\n\n\t\t\t// Group separator\n\t\t\t'mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12':\n\t\t\t\tthis.group,\n\t\t})\n\n\t\t// Icon container with active indicator\n\t\tconst iconContainerClasses = this.classMap({\n\t\t\t'flex items-center justify-center': true,\n\t\t\t'w-auto min-w-14 h-8': true, // 56px min-width, 32px height\n\t\t\t'shrink-0 relative z-10': true,\n\t\t})\n\n\t\t// Active indicator behind icon\n\t\tconst indicatorClasses = this.classMap({\n\t\t\t'absolute top-1/2 left-1/2 opacity-30': true,\n\t\t\t'w-14 h-8': true, // 56px x 32px\n\t\t\t'rounded-lg': true, // M3 large corner radius\n\t\t\t'bg-secondary-container': true,\n\t\t\t'transition-transform duration-150 ease-out': true,\n\t\t\t// Transform based on active state\n\t\t\t'scale-0 -translate-x-1/2 -translate-y-1/2': !this.active,\n\t\t\t'scale-100 -translate-x-1/2 -translate-y-1/2': this.active,\n\t\t})\n\n\t\t// Icon styling\n\t\tconst iconClasses = this.classMap({\n\t\t\t'relative z-100': true,\n\t\t\t'text-2xl leading-none': !this.nested, // 24px icon for normal\n\t\t\t'text-xl leading-none': this.nested, // 20px icon for nested\n\t\t\t// Material Symbols font variations handled via CSS custom properties\n\t\t})\n\n\t\t// Label styling\n\t\tconst labelClasses = this.classMap({\n\t\t\t'text-xs font-medium leading-4': true, // 12px, medium weight, 16px line height\n\t\t\t'text-center': true,\n\t\t\t'overflow-hidden text-ellipsis whitespace-nowrap': true,\n\t\t\t'z-10 max-w-14 px-1': true, // max 56px width, 4px horizontal padding\n\t\t\thidden: !this.showLabel && !this.label, // Hide if not shown or no label\n\t\t})\n\n\t\t// Badge styling with dynamic colors\n\t\tconst badgeClasses = this.classMap({\n\t\t\t'absolute top-2 right-3': true, // 8px from top, 12px from right\n\t\t\t'min-w-4 h-4': true, // 16px min-width and height\n\t\t\t'rounded-sm': true, // M3 small corner radius\n\t\t\t'text-xs font-semibold': true, // 11px, 600 weight\n\t\t\t'flex items-center justify-center': true,\n\t\t\t'px-1 box-border z-20': true, // 4px padding\n\t\t\t'animate-pulse': true, // Pulse animation\n\t\t\t// Dynamic background based on variant\n\t\t\t'bg-error-default text-error-on': this.badgeVariant === 'error',\n\t\t\t'bg-primary-default text-primary-on': this.badgeVariant === 'primary',\n\t\t\t'bg-secondary-default text-secondary-on': this.badgeVariant === 'secondary',\n\t\t})\n\n\t\t// Ripple effect classes\n\t\tconst rippleClasses = this.classMap({\n\t\t\t'absolute inset-0 rounded-lg overflow-hidden z-0': true,\n\t\t\t'before:content-[\"\"] before:absolute before:top-1/2 before:left-1/2': true,\n\t\t\t'before:w-0 before:h-0 before:rounded-full': true,\n\t\t\t'before:bg-current before:opacity-0': true,\n\t\t\t'before:-translate-x-1/2 before:-translate-y-1/2': true,\n\t\t\t'before:transition-all before:duration-300': true,\n\t\t\t// Active state\n\t\t\t'before:w-[200%] before:h-[200%] before:opacity-12': this.showRipple,\n\t\t})\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${containerClasses}\n\t\t\t\tpart=\"container\"\n\t\t\t\t@click=${this.handleClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\tstyle=\"outline: ${this.matches(':focus-visible')\n\t\t\t\t\t? '2px solid var(--schmancy-sys-color-primary-default)'\n\t\t\t\t\t: 'none'}; outline-offset: 2px;\"\n\t\t\t>\n\t\t\t\t<span class=${rippleClasses} aria-hidden=\"true\"></span>\n\n\t\t\t\t<div class=${iconContainerClasses} part=\"icon\">\n\t\t\t\t\t<span class=${indicatorClasses} part=\"indicator\" aria-hidden=\"true\"></span>\n\t\t\t\t\t${when(\n\t\t\t\t\t\thasCustomIcon,\n\t\t\t\t\t\t() => html`<slot class=\"relative\" name=\"icon\"></slot>`,\n\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\twhen(\n\t\t\t\t\t\t\t\tthis.icon,\n\t\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=${iconClasses}\n\t\t\t\t\t\t\t\t\t\tpart=\"icon-text\"\n\t\t\t\t\t\t\t\t\t\tstyle=\"font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' ${this.active\n\t\t\t\t\t\t\t\t\t\t\t? '1'\n\t\t\t\t\t\t\t\t\t\t\t: '0'}, 'wght' 400, 'GRAD' 0, 'opsz' ${this.nested ? '20' : '24'};\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t),\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t${when(this.label, () => html`<span class=${labelClasses} part=\"label\">${this.label}</span>`)}\n\t\t\t\t${when(\n\t\t\t\t\tthis.badge,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\thasCustomBadge,\n\t\t\t\t\t\t\t() => html`<slot name=\"badge\"></slot>`,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<span class=${badgeClasses} part=\"badge\" aria-label=\"${this.badge} notifications\"> ${this.badge} </span>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t`,\n\t\t\t\t)}\n\n\t\t\t\t<!-- Tooltip shown via title attribute -->\n\t\t\t\t${when(\n\t\t\t\t\tthis.hasAttribute('title'),\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"\n\t\t\t\t\t\t\tabsolute left-[calc(100%+8px)] top-1/2 -translate-y-1/2\n\t\t\t\t\t\t\tbg-surface-inverse text-surface-inverseOn\n\t\t\t\t\t\t\tpx-2 py-1 rounded-sm text-xs whitespace-nowrap\n\t\t\t\t\t\t\tz-1000 pointer-events-none opacity-0\n\t\t\t\t\t\t\thover:opacity-100 hover:translate-x-0\n\t\t\t\t\t\t\ttransition-all duration-150 ease-out\n\t\t\t\t\t\t\t-translate-x-1\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${this.getAttribute('title')}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-navigation-rail-item': SchmancyNavigationRailItem\n\t}\n}\n","import { SchmancyElement } from '@mixins/index'\r\nimport { html, PropertyValues } from 'lit'\r\nimport { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'\r\nimport { BehaviorSubject, fromEvent, takeUntil } from 'rxjs'\r\nimport { distinctUntilChanged, tap } from 'rxjs/operators'\r\nimport { SchmancyNavigationRailItem } from './navigation-rail-item'\r\n\r\nexport type NavigateEvent = CustomEvent<string>\r\n\r\nexport type NavigationRailMenuClickEvent = CustomEvent<void>\r\n\r\nexport type NavigationRailFabClickEvent = CustomEvent<void>\r\n\r\n\r\nexport type LabelVisibility = 'all' | 'selected' | 'none'\r\n\r\n/**\r\n * Material Design 3 Navigation Rail Component\r\n * @see https://m3.material.io/components/navigation-rail/overview\r\n *\r\n * `<schmancy-navigation-rail>` component\r\n *\r\n * A Material Design 3 vertical navigation component positioned on the left side of an application.\r\n * Navigation rails provide access to between 3-7 primary destinations with a compact footprint.\r\n * Automatically hides in fullscreen mode when triggered via schmancyTheme.next({ fullscreen: true }).\r\n *\r\n * @element schmancy-navigation-rail\r\n * @slot fab - Slot for a floating action button at the top\r\n * @slot menu - Slot for a menu icon or button below the FAB\r\n * @slot header - Custom header content slot\r\n * @slot footer - Custom footer content slot\r\n * @slot - Default slot for navigation rail items\r\n *\r\n * @fires navigate - When a navigation item is selected\r\n * @fires menu-click - When the menu button is clicked\r\n * @fires fab-click - When the FAB is clicked\r\n *\r\n * @csspart rail - The main rail container\r\n * @csspart header - The header section\r\n * @csspart nav - The navigation items container\r\n * @csspart footer - The footer section\r\n *\r\n * @example\r\n * <schmancy-navigation-rail activeIndex=\"0\">\r\n *   <schmancy-button slot=\"fab\" variant=\"filled\" aria-label=\"Compose\">\r\n *     <schmancy-icon>add</schmancy-icon>\r\n *   </schmancy-button>\r\n *   <schmancy-button slot=\"menu\" variant=\"text\" aria-label=\"Menu\">\r\n *     <schmancy-icon>menu</schmancy-icon>\r\n *   </schmancy-button>\r\n *   <schmancy-navigation-rail-item icon=\"home\" label=\"Home\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"search\" label=\"Search\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"favorite\" label=\"Favorites\" badge=\"3\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"settings\" label=\"Settings\"></schmancy-navigation-rail-item>\r\n * </schmancy-navigation-rail>\r\n */\r\n@customElement('schmancy-navigation-rail')\r\nexport class SchmancyNavigationRail extends SchmancyElement {\r\n\t// Observable state\r\n\tprivate activeIndex$ = new BehaviorSubject<number>(-1)\r\n\r\n\t// Properties\r\n\t/**\r\n\t * The currently active item index\r\n\t * @default -1\r\n\t */\r\n\t@property({ type: Number })\r\n\tget activeIndex() {\r\n\t\treturn this.activeIndex$.value\r\n\t}\r\n\tset activeIndex(value: number) {\r\n\t\tthis.activeIndex$.next(value)\r\n\t}\r\n\r\n\t/**\r\n\t * The currently active item value (for programmatic selection)\r\n\t */\r\n\t@property({ type: String })\r\n\tget activeValue() {\r\n\t\treturn this._activeValue\r\n\t}\r\n\tset activeValue(value: string) {\r\n\t\tthis._activeValue = value\r\n\t\tthis.updateActiveByValue(value)\r\n\t}\r\n\tprivate _activeValue = ''\r\n\r\n\t/**\r\n\t * When to show labels for navigation items\r\n\t * 'all' - Always show labels for all items\r\n\t * 'selected' - Only show label for selected item\r\n\t * 'none' - Never show labels\r\n\t * @default 'all'\r\n\t */\r\n\t@property({ type: String, attribute: 'label-visibility', reflect: true })\r\n\tlabelVisibility: LabelVisibility = 'all'\r\n\r\n\t/**\r\n\t * Alignment of navigation items\r\n\t * @default 'top'\r\n\t */\r\n\t@property({ type: String, reflect: true })\r\n\talignment: 'top' | 'center' | 'bottom' = 'top'\r\n\r\n\t/**\r\n\t * Show tooltips when labels are hidden\r\n\t * @default true\r\n\t */\r\n\t@property({ type: Boolean })\r\n\tshowTooltips = true\r\n\r\n\t/**\r\n\t * Enable keyboard navigation\r\n\t * @default true\r\n\t */\r\n\t@property({ type: Boolean })\r\n\tkeyboardNavigation = true\r\n\r\n\t/**\r\n\t * Whether the navigation rail is expanded\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\texpanded = false\r\n\r\n\r\n\t// State\r\n\t@state()\r\n\tprivate focusedIndex = -1\r\n\r\n\t@state()\r\n\tprivate hasHeaderContent = false\r\n\r\n\t@state()\r\n\tprivate isFullscreen = false\r\n\r\n\t// Queries\r\n\r\n\t@queryAssignedElements({ flatten: true })\r\n\tprivate allElements!: Element[]\r\n\r\n\tprivate get navigationItems(): SchmancyNavigationRailItem[] {\r\n\t\treturn this.allElements.filter(el => el.tagName === 'SCHMANCY-NAVIGATION-RAIL-ITEM') as SchmancyNavigationRailItem[]\r\n\t}\r\n\r\n\tconnectedCallback() {\r\n\t\tsuper.connectedCallback()\r\n\r\n\t\t// Set up keyboard navigation if enabled\r\n\t\tif (this.keyboardNavigation) {\r\n\t\t\tthis.addEventListener('keydown', this.handleKeyDown)\r\n\t\t}\r\n\r\n\t\t// Subscribe to active index changes with distinct values only\r\n\t\tthis.activeIndex$\r\n\t\t\t.pipe(\r\n\t\t\t\tdistinctUntilChanged(),\r\n\t\t\t\ttap(index => this.updateActiveStates(index)),\r\n\t\t\t\ttakeUntil(this.disconnecting),\r\n\t\t\t)\r\n\t\t\t.subscribe()\r\n\r\n\t\t// Listen to fullscreen events\r\n\t\tfromEvent(window, 'fullscreen').pipe(\r\n\t\t\ttap((event: Event) => {\r\n\t\t\t\tconst customEvent = event as CustomEvent\r\n\t\t\t\tthis.isFullscreen = customEvent.detail\r\n\t\t\t}),\r\n\t\t\ttakeUntil(this.disconnecting)\r\n\t\t).subscribe()\r\n\r\n\t\t// Listen for navigate events from child items\r\n\t\tthis.setupNavigateListener()\r\n\r\n\t\t// Set up label visibility\r\n\t\tthis.updateLabelVisibility()\r\n\r\n\t\t// Update ARIA attributes\r\n\t\tthis.setAttribute('role', 'navigation')\r\n\t\tthis.setAttribute('aria-label', 'Main navigation')\r\n\t}\r\n\r\n\tupdated(changedProperties: PropertyValues) {\r\n\t\tsuper.updated(changedProperties)\r\n\r\n\t\tif (changedProperties.has('labelVisibility')) {\r\n\t\t\tthis.updateLabelVisibility()\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('activeValue')) {\r\n\t\t\tthis.updateActiveByValue(this.activeValue)\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('expanded')) {\r\n\t\t\tthis.updateLabelVisibility()\r\n\t\t}\r\n\t}\r\n\r\n\tprivate updateActiveStates(index: number) {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tconst isActive = i === index\r\n\t\t\titem.active = isActive\r\n\t\t\titem.setAttribute('aria-selected', String(isActive))\r\n\t\t\titem.setAttribute('tabindex', isActive ? '0' : '-1')\r\n\r\n\t\t\t// Update activeValue when index changes\r\n\t\t\tif (isActive) {\r\n\t\t\t\tthis._activeValue = item.value || item.label || ''\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tprivate updateActiveByValue(value: string) {\r\n\t\tconst index = this.navigationItems.findIndex(item => item.getAttribute('value') === value || item.label === value)\r\n\t\tif (index >= 0) {\r\n\t\t\tthis.activeIndex = index\r\n\t\t}\r\n\t}\r\n\r\n\tprivate updateLabelVisibility() {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tlet shouldShowLabel = false\r\n\r\n\t\t\t// M3 Spec: In expanded state, always show all labels\r\n\t\t\tif (this.expanded) {\r\n\t\t\t\tshouldShowLabel = true\r\n\t\t\t} else {\r\n\t\t\t\t// In collapsed state, respect labelVisibility setting\r\n\t\t\t\tshouldShowLabel =\r\n\t\t\t\t\tthis.labelVisibility === 'all' || (this.labelVisibility === 'selected' && i === this.activeIndex)\r\n\t\t\t}\r\n\r\n\t\t\titem.showLabel = shouldShowLabel\r\n\r\n\t\t\t// Add tooltips when labels are hidden (only in collapsed state)\r\n\t\t\tif (this.showTooltips && !shouldShowLabel && !this.expanded && item.label) {\r\n\t\t\t\titem.setAttribute('title', item.label)\r\n\t\t\t} else {\r\n\t\t\t\titem.removeAttribute('title')\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\t// Note: Hover-based label showing removed for M3 compliance\r\n\t// Labels are now controlled via labelVisibility property and expanded state\r\n\r\n\t/**\r\n\t * Programmatically expand the navigation rail\r\n\t */\r\n\texpand() {\r\n\t\tthis.expanded = true\r\n\t}\r\n\r\n\t/**\r\n\t * Programmatically collapse the navigation rail\r\n\t */\r\n\tcollapse() {\r\n\t\tthis.expanded = false\r\n\t}\r\n\r\n\t/**\r\n\t * Add a boat item to the navigation rail\r\n\t * @param config Configuration for the boat item\r\n\t * @returns The created or existing navigation rail item element\r\n\t */\r\n\tpublic addBoatItem(config: { id: string; title: string; icon?: string }) {\r\n\t\t// Check if item already exists\r\n\t\tconst existingItem = this.querySelector(`[value=\"${config.id}\"]`) as HTMLElement\r\n\t\tif (existingItem) {\r\n\t\t\t// Item already exists, just return it\r\n\t\t\treturn existingItem\r\n\t\t}\r\n\r\n\t\t// Create new item\r\n\t\tconst item = document.createElement('schmancy-navigation-rail-item')\r\n\t\titem.setAttribute('value', config.id)\r\n\t\titem.innerHTML = `\r\n\t\t\t<schmancy-icon slot=\"icon\">${config.icon || 'widgets'}</schmancy-icon>\r\n\t\t\t${config.title}\r\n\t\t`\r\n\t\t// Add to the rail before any footer content\r\n\t\tconst footer = this.querySelector('[slot=\"footer\"]')\r\n\t\tif (footer) {\r\n\t\t\tthis.insertBefore(item, footer)\r\n\t\t} else {\r\n\t\t\tthis.appendChild(item)\r\n\t\t}\r\n\t\treturn item\r\n\t}\r\n\r\n\t/**\r\n\t * Toggle the navigation rail between expanded and collapsed states\r\n\t */\r\n\ttoggle() {\r\n\t\tthis.expanded = !this.expanded\r\n\t}\r\n\r\n\r\n\tprivate handleKeyDown(event: KeyboardEvent) {\r\n\t\tconst items = this.navigationItems\r\n\t\tif (items.length === 0) return\r\n\r\n\t\tlet newIndex = this.focusedIndex >= 0 ? this.focusedIndex : this.activeIndex\r\n\r\n\t\tswitch (event.key) {\r\n\t\t\tcase 'ArrowDown':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = (newIndex + 1) % items.length\r\n\t\t\t\tbreak\r\n\t\t\tcase 'ArrowUp':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = newIndex <= 0 ? items.length - 1 : newIndex - 1\r\n\t\t\t\tbreak\r\n\t\t\tcase 'Home':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = 0\r\n\t\t\t\tbreak\r\n\t\t\tcase 'End':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = items.length - 1\r\n\t\t\t\tbreak\r\n\t\t\tcase 'Enter':\r\n\t\t\tcase ' ':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tif (newIndex >= 0) {\r\n\t\t\t\t\titems[newIndex].click()\r\n\t\t\t\t}\r\n\t\t\t\treturn\r\n\t\t\tdefault:\r\n\t\t\t\treturn\r\n\t\t}\r\n\r\n\t\tthis.focusedIndex = newIndex\r\n\t\titems[newIndex].focus()\r\n\t}\r\n\r\n\tprivate handleFabClick(event: Event) {\r\n\t\tevent.stopPropagation()\r\n\t\tthis.dispatchEvent(\r\n\t\t\tnew CustomEvent('fab-click', {\r\n\t\t\t\tbubbles: true,\r\n\t\t\t\tcomposed: true,\r\n\t\t\t}),\r\n\t\t)\r\n\t}\r\n\r\n\tprivate handleMenuClick(event: Event) {\r\n\t\tevent.stopPropagation()\r\n\t\tthis.dispatchEvent(\r\n\t\t\tnew CustomEvent('menu-click', {\r\n\t\t\t\tbubbles: true,\r\n\t\t\t\tcomposed: true,\r\n\t\t\t}),\r\n\t\t)\r\n\t}\r\n\r\n\tprotected render() {\r\n\t\t// Host-level classes for the navigation rail\r\n\t\tconst hostClasses = this.classMap({\r\n\t\t\t// Layout & Structure - Fixed width to prevent layout shift\r\n\t\t\t'flex flex-col': true,\r\n\t\t\t'h-full': true,\r\n\t\t\t'box-border relative overflow-visible': true,\r\n\t\t\t'z-10 hover:z-[100]': true, // Base z-index, elevated on hover for overlay\r\n\r\n\t\t\t// Width - collapses to 0 when fullscreen\r\n\t\t\t'w-20': !this.isFullscreen, // w-20 = 80px fixed width (M3 spec: 80dp)\r\n\t\t\t'w-0': this.isFullscreen, // Collapse width to 0 in fullscreen\r\n\r\n\t\t\t// Visibility and transition\r\n\t\t\t'transition-all duration-300 ease-emphasized': true,\r\n\t\t\t'opacity-100': !this.isFullscreen,\r\n\t\t\t'opacity-0 pointer-events-none': this.isFullscreen,\r\n\t\t\t'overflow-hidden': this.isFullscreen, // Hide overflow when collapsed\r\n\t\t})\r\n\r\n\t\t// Rail container - programmatically controlled width\r\n\t\tconst railClasses = this.classMap({\r\n\t\t\t// Layout & Structure\r\n\t\t\t'flex flex-col h-full': true,\r\n\t\t\t'box-border relative': true,\r\n\t\t\t'py-2': true,\r\n\r\n\r\n\t\t\t// M3 Colors & Theme\r\n\t\t\t'bg-container-lowest text-surface-on': true,\r\n\r\n\t\t\t// M3 Motion - smooth transitions for width and shadow\r\n\t\t\t'transition-all duration-300 ease-emphasized': true,\r\n\r\n\t\t\t// Collapsed state (default) - M3 standard 80px width\r\n\t\t\t'w-20': !this.expanded, // w-20 = 80px (M3 spec: 80dp)\r\n\t\t\t'px-3': !this.expanded, // px-3 = 12px (M3 spec: 12px to center 56px items)\r\n\r\n\t\t\t// Expanded state - M3 expanded width with shadow\r\n\t\t\t'w-60': this.expanded, // w-60 = 240px expanded width\r\n\t\t\t'px-4': this.expanded, // Larger padding when expanded\r\n\t\t\t'shadow-lg': this.expanded, // M3 elevation 3 shadow when expanded\r\n\t\t})\r\n\r\n\t\t// Header section classes - hidden when no content\r\n\t\tconst headerClasses = this.classMap({\r\n\t\t\t'flex flex-col items-center gap-1': true,\r\n\t\t\t'hidden': !this.hasHeaderContent,\r\n\t\t})\r\n\r\n\t\t// Navigation container classes with alignment\r\n\t\tconst navClasses = this.classMap({\r\n\t\t\t'flex-1 flex flex-col gap-3': true, // gap-3 = 12px (M3 spec: 12px item spacing)\r\n\t\t\t'min-h-0': true, // Allow flex shrinking and proper scroll container height calculation\r\n\t\t\t// Alignment variants\r\n\t\t\t'justify-start': this.alignment === 'top',\r\n\t\t\t'justify-center': this.alignment === 'center',\r\n\t\t\t'justify-end': this.alignment === 'bottom',\r\n\t\t})\r\n\r\n\t\t// Footer section classes\r\n\t\tconst footerClasses = this.classMap({\r\n\t\t\t'flex flex-col items-center gap-1 mt-auto pt-2': true,\r\n\t\t})\r\n\r\n\t\treturn html`\r\n\t\t\t<div\r\n\t\t\t\tclass=${hostClasses}\r\n\t\t\t>\r\n\t\t\t\t<div class=${railClasses} part=\"rail\">\r\n\t\t\t\t\t<div class=${headerClasses} part=\"header\">\r\n\t\t\t\t\t\t<slot name=\"fab\" @click=${this.handleFabClick} @slotchange=${this.handleHeaderSlotChange}></slot>\r\n\t\t\t\t\t\t<slot name=\"menu\" @click=${this.handleMenuClick} @slotchange=${this.handleHeaderSlotChange}></slot>\r\n\t\t\t\t\t\t<slot name=\"header\" @slotchange=${this.handleHeaderSlotChange}></slot>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<nav class=${navClasses} part=\"nav\" role=\"list\">\r\n\t\t\t\t\t\t<schmancy-scroll hide direction=\"vertical\">\r\n\t\t\t\t\t\t\t<slot @slotchange=${this.handleSlotChange}></slot>\r\n\t\t\t\t\t\t</schmancy-scroll>\r\n\t\t\t\t\t</nav>\r\n\r\n\t\t\t\t\t<div class=${footerClasses} part=\"footer\">\r\n\t\t\t\t\t\t<slot name=\"footer\"></slot>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t`\r\n\t}\r\n\r\n\tprivate setupNavigateListener() {\r\n\t\t// Listen for navigate events from child items\r\n\t\tthis.addEventListener('navigate', (e: Event) => {\r\n\t\t\tif (e instanceof CustomEvent) {\r\n\t\t\t\tconst value = e.detail\r\n\t\t\t\t// Find the item that dispatched the event and update active state\r\n\t\t\t\tconst itemIndex = this.navigationItems.findIndex(item => item.value === value || item.label === value)\r\n\t\t\t\tif (itemIndex >= 0) {\r\n\t\t\t\t\tthis.activeIndex = itemIndex\r\n\t\t\t\t\tthis._activeValue = value\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tprivate handleHeaderSlotChange() {\r\n\t\t// Check if any header slot has content\r\n\t\tconst headerDiv = this.shadowRoot?.querySelector('[part=\"header\"]')\r\n\t\tif (headerDiv) {\r\n\t\t\tconst allSlots = headerDiv.querySelectorAll('slot')\r\n\t\t\tthis.hasHeaderContent = Array.from(allSlots).some(s =>\r\n\t\t\t\ts.assignedNodes({ flatten: true }).length > 0\r\n\t\t\t)\r\n\t\t}\r\n\t}\r\n\r\n\tprivate handleSlotChange() {\r\n\t\t// Update items when slot content changes\r\n\t\tthis.updateLabelVisibility()\r\n\t\tthis.updateActiveStates(this.activeIndex)\r\n\r\n\t\t// Set ARIA attributes on items\r\n\t\tthis.navigationItems.forEach((item, index) => {\r\n\t\t\titem.setAttribute('role', 'listitem')\r\n\t\t\tif (!item.hasAttribute('tabindex')) {\r\n\t\t\t\titem.setAttribute('tabindex', index === this.activeIndex ? '0' : '-1')\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n}\r\n\r\ndeclare global {\r\n\tinterface HTMLElementTagNameMap {\r\n\t\t'schmancy-navigation-rail': SchmancyNavigationRail\r\n\t}\r\n}\r\n"],"mappings":"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"}
+{"version":3,"file":"navigation-rail.cjs","names":[],"sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { BehaviorSubject, fromEvent, merge, takeUntil } from 'rxjs'\nimport { delay, distinctUntilChanged, tap } from 'rxjs/operators'\n\nexport type NavigationRailItemClickEvent = CustomEvent<{\n\ticon: string\n\tlabel: string\n\tvalue: string\n\tactive: boolean\n}>\n\n/**\n * Material Design 3 Navigation Rail Item Component\n * @see https://m3.material.io/components/navigation-rail/overview\n *\n * `<schmancy-navigation-rail-item>` component\n *\n * Individual navigation item for use within a navigation rail.\n * Represents a single destination or action with an icon and optional label.\n *\n * @element schmancy-navigation-rail-item\n * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)\n * @slot - Default slot for custom content\n * @slot badge - Custom badge content\n *\n * @fires navigate - When the item is clicked\n *\n * @csspart container - The main item container\n * @csspart indicator - The active indicator\n * @csspart icon - The icon container\n * @csspart label - The label text\n * @csspart badge - The badge element\n *\n * @example\n * <schmancy-navigation-rail-item\n *   icon=\"home\"\n *   label=\"Home\"\n *   value=\"/home\"\n *   badge=\"3\"\n *   active>\n * </schmancy-navigation-rail-item>\n *\n * @example\n * <!-- Using 'selected' alias -->\n * <schmancy-navigation-rail-item\n *   icon=\"settings\"\n *   label=\"Settings\"\n *   value=\"/settings\"\n *   selected>\n * </schmancy-navigation-rail-item>\n *\n * @example\n * <!-- With custom icon -->\n * <schmancy-navigation-rail-item label=\"Dashboard\">\n *   <schmancy-icon slot=\"icon\">dashboard</schmancy-icon>\n * </schmancy-navigation-rail-item>\n */\n@customElement('schmancy-navigation-rail-item')\nexport class SchmancyNavigationRailItem extends SchmancyElement {\n\t// Observable state\n\tprivate hovering$ = new BehaviorSubject<boolean>(false)\n\tprivate pressing$ = new BehaviorSubject<boolean>(false)\n\tprivate active$ = new BehaviorSubject<boolean>(false)\n\n\t// Properties\n\t/**\n\t * Icon name (Material Symbols icon)\n\t */\n\t@property({ type: String })\n\ticon = ''\n\n\t/**\n\t * Label text for the navigation item\n\t */\n\t@property({ type: String })\n\tlabel = ''\n\n\t/**\n\t * Value associated with this item (useful for routing)\n\t */\n\t@property({ type: String })\n\tvalue = ''\n\n\t/**\n\t * Whether this item is currently active/selected\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget active() {\n\t\treturn this.active$.value\n\t}\n\tset active(value: boolean) {\n\t\tthis.active$.next(value)\n\t}\n\n\t/**\n\t * Whether this item is currently selected (alias for active)\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget selected() {\n\t\treturn this.active\n\t}\n\tset selected(value: boolean) {\n\t\tthis.active = value\n\t}\n\n\t/**\n\t * Badge text or number to display\n\t */\n\t@property({ type: String })\n\tbadge = ''\n\n\t/**\n\t * Badge variant\n\t */\n\t@property({ type: String })\n\tbadgeVariant: 'error' | 'primary' | 'secondary' = 'error'\n\n\t/**\n\t * Whether to show the label (controlled by parent rail)\n\t * @default false\n\t */\n\t@property({ type: Boolean, attribute: 'show-label' })\n\tshowLabel = false\n\n\t/**\n\t * Whether this item is disabled\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false\n\n\t/**\n\t * Whether this is a nested item (sub-navigation)\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tnested = false\n\n\t/**\n\t * Whether this item represents a group separator\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tgroup = false\n\n\t// State\n\t@state()\n\tprivate showRipple = false\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Set up hover tracking\n\t\tmerge(\n\t\t\tfromEvent(this, 'mouseenter').pipe(tap(() => this.hovering$.next(true))),\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.hovering$.next(false))),\n\t\t)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe()\n\n\t\t// Set up press tracking\n\t\tmerge(\n\t\t\tfromEvent(this, 'mousedown').pipe(tap(() => this.pressing$.next(true))),\n\t\t\tfromEvent(this, 'mouseup').pipe(tap(() => this.pressing$.next(false))),\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.pressing$.next(false))),\n\t\t)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe()\n\n\t\t// Ripple effect with M3 timing\n\t\tthis.pressing$\n\t\t\t.pipe(\n\t\t\t\ttap(pressing => {\n\t\t\t\t\tif (pressing && !this.disabled) {\n\t\t\t\t\t\tthis.showRipple = true\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\t// M3 standard ripple duration\n\t\t\t\tdelay(600),\n\t\t\t\ttap(() => (this.showRipple = false)),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Subscribe to active state changes for reactive updates\n\t\tthis.active$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(isActive => {\n\t\t\t\t\tthis.requestUpdate()\n\t\t\t\t\t// Update ARIA attributes reactively\n\t\t\t\t\tthis.setAttribute('aria-selected', String(isActive))\n\t\t\t\t\tthis.setAttribute('tabindex', isActive ? '0' : '-1')\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Set ARIA attributes\n\t\tthis.setAttribute('role', 'listitem')\n\t\tif (!this.hasAttribute('tabindex')) {\n\t\t\tthis.setAttribute('tabindex', this.active ? '0' : '-1')\n\t\t}\n\t}\n\n\tupdated(changedProperties: PropertyValues) {\n\t\tsuper.updated(changedProperties)\n\n\t\t// Active state is now handled by the BehaviorSubject subscription\n\t\t// So we don't need to duplicate it here\n\n\t\tif (changedProperties.has('disabled')) {\n\t\t\tthis.setAttribute('aria-disabled', String(this.disabled))\n\t\t}\n\n\t\tif (changedProperties.has('label')) {\n\t\t\tthis.setAttribute('aria-label', this.label)\n\t\t}\n\t}\n\n\t/**\n\t * Handle click events\n\t */\n\tprivate handleClick(event: Event) {\n\t\tif (this.disabled) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\treturn\n\t\t}\n\n\t\t// Emit navigate event with the value\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('navigate', {\n\t\t\t\tdetail: this.value || this.label,\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Visual feedback is handled by the ripple effect in connectedCallback\n\t\t// The parent rail will confirm and update via activeIndex\n\t}\n\n\t/**\n\t * Handle keyboard events\n\t */\n\tprivate handleKeyDown(event: KeyboardEvent) {\n\t\tif (this.disabled) return\n\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tevent.preventDefault()\n\t\t\tthis.click()\n\t\t}\n\t}\n\n\tprotected render() {\n\t\tconst hasCustomIcon = !!this.querySelector('[slot=\"icon\"]')\n\t\tconst hasCustomBadge = this.querySelector('[slot=\"badge\"]')\n\n\t\t// M3 Navigation Rail Item classes with theme integration\n\t\tconst containerClasses = this.classMap({\n\t\t\t// Layout & Spacing (M3 56px minimum hit target; vertical padding is consumer-controlled)\n\t\t\t// justify-start pins the icon to the row top so its vertical center is invariant\n\t\t\t// across label-visibility states — consumer rows can align siblings to it.\n\t\t\t'flex flex-col items-center justify-start': true,\n\t\t\t'min-h-14 w-full': true, // min-h-14 = 56px\n\t\t\t'gap-1': true, // gap-1 = 4px\n\n\t\t\t// M3 Shape & Interaction\n\t\t\t'rounded-lg': true, // M3 large corner radius\n\t\t\t'cursor-pointer': true,\n\t\t\trelative: true,\n\t\t\t'select-none': true,\n\t\t\t'box-border': true,\n\n\t\t\t// Colors & States\n\t\t\t'text-surface-onVariant': !this.active,\n\t\t\t'text-secondary-onContainer': this.active,\n\t\t\t'hover:bg-surface-containerHighest': true,\n\n\t\t\t// Transitions (M3 emphasized motion)\n\t\t\t'transition-all duration-150 ease-out': true,\n\n\t\t\t// Disabled state\n\t\t\t'pointer-events-none opacity-38': this.disabled,\n\n\t\t\t// Active ripple effect\n\t\t\t'[&>.ripple]:scale-100': this.showRipple,\n\n\t\t\t// Nested item adjustments\n\t\t\t'min-h-12 pl-8': this.nested, // 48px height, 32px left padding for nested\n\n\t\t\t// Group separator\n\t\t\t'mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12':\n\t\t\t\tthis.group,\n\t\t})\n\n\t\t// Icon container with active indicator\n\t\tconst iconContainerClasses = this.classMap({\n\t\t\t'flex items-center justify-center': true,\n\t\t\t'w-auto min-w-14 h-8': true, // 56px min-width, 32px height\n\t\t\t'shrink-0 relative z-10': true,\n\t\t})\n\n\t\t// Active indicator behind icon\n\t\tconst indicatorClasses = this.classMap({\n\t\t\t'absolute top-1/2 left-1/2 opacity-30': true,\n\t\t\t'w-14 h-8': true, // 56px x 32px\n\t\t\t'rounded-lg': true, // M3 large corner radius\n\t\t\t'bg-secondary-container': true,\n\t\t\t'transition-transform duration-150 ease-out': true,\n\t\t\t// Transform based on active state\n\t\t\t'scale-0 -translate-x-1/2 -translate-y-1/2': !this.active,\n\t\t\t'scale-100 -translate-x-1/2 -translate-y-1/2': this.active,\n\t\t})\n\n\t\t// Icon styling\n\t\tconst iconClasses = this.classMap({\n\t\t\t'relative z-100': true,\n\t\t\t'text-2xl leading-none': !this.nested, // 24px icon for normal\n\t\t\t'text-xl leading-none': this.nested, // 20px icon for nested\n\t\t\t// Material Symbols font variations handled via CSS custom properties\n\t\t})\n\n\t\t// Label styling\n\t\tconst labelClasses = this.classMap({\n\t\t\t'text-xs font-medium leading-4': true, // 12px, medium weight, 16px line height\n\t\t\t'text-center': true,\n\t\t\t'overflow-hidden text-ellipsis whitespace-nowrap': true,\n\t\t\t'z-10 max-w-14 px-1': true, // max 56px width, 4px horizontal padding\n\t\t\thidden: !this.showLabel && !this.label, // Hide if not shown or no label\n\t\t})\n\n\t\t// Badge styling with dynamic colors\n\t\tconst badgeClasses = this.classMap({\n\t\t\t'absolute top-2 right-3': true, // 8px from top, 12px from right\n\t\t\t'min-w-4 h-4': true, // 16px min-width and height\n\t\t\t'rounded-sm': true, // M3 small corner radius\n\t\t\t'text-xs font-semibold': true, // 11px, 600 weight\n\t\t\t'flex items-center justify-center': true,\n\t\t\t'px-1 box-border z-20': true, // 4px padding\n\t\t\t'animate-pulse': true, // Pulse animation\n\t\t\t// Dynamic background based on variant\n\t\t\t'bg-error-default text-error-on': this.badgeVariant === 'error',\n\t\t\t'bg-primary-default text-primary-on': this.badgeVariant === 'primary',\n\t\t\t'bg-secondary-default text-secondary-on': this.badgeVariant === 'secondary',\n\t\t})\n\n\t\t// Ripple effect classes\n\t\tconst rippleClasses = this.classMap({\n\t\t\t'absolute inset-0 rounded-lg overflow-hidden z-0': true,\n\t\t\t'before:content-[\"\"] before:absolute before:top-1/2 before:left-1/2': true,\n\t\t\t'before:w-0 before:h-0 before:rounded-full': true,\n\t\t\t'before:bg-current before:opacity-0': true,\n\t\t\t'before:-translate-x-1/2 before:-translate-y-1/2': true,\n\t\t\t'before:transition-all before:duration-300': true,\n\t\t\t// Active state\n\t\t\t'before:w-[200%] before:h-[200%] before:opacity-12': this.showRipple,\n\t\t})\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${containerClasses}\n\t\t\t\tpart=\"container\"\n\t\t\t\t@click=${this.handleClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\tstyle=\"outline: ${this.matches(':focus-visible')\n\t\t\t\t\t? '2px solid var(--schmancy-sys-color-primary-default)'\n\t\t\t\t\t: 'none'}; outline-offset: 2px;\"\n\t\t\t>\n\t\t\t\t<span class=${rippleClasses} aria-hidden=\"true\"></span>\n\n\t\t\t\t<div class=${iconContainerClasses} part=\"icon\">\n\t\t\t\t\t<span class=${indicatorClasses} part=\"indicator\" aria-hidden=\"true\"></span>\n\t\t\t\t\t${when(\n\t\t\t\t\t\thasCustomIcon,\n\t\t\t\t\t\t() => html`<slot class=\"relative\" name=\"icon\"></slot>`,\n\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\twhen(\n\t\t\t\t\t\t\t\tthis.icon,\n\t\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t\t<schmancy-icon class=${iconClasses} part=\"icon-text\">\n\t\t\t\t\t\t\t\t\t\t${this.active ? `${this.icon}-fill` : this.icon}\n\t\t\t\t\t\t\t\t\t</schmancy-icon>\n\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t),\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t${when(this.label, () => html`<span class=${labelClasses} part=\"label\">${this.label}</span>`)}\n\t\t\t\t${when(\n\t\t\t\t\tthis.badge,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\thasCustomBadge,\n\t\t\t\t\t\t\t() => html`<slot name=\"badge\"></slot>`,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<span class=${badgeClasses} part=\"badge\" aria-label=\"${this.badge} notifications\"> ${this.badge} </span>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t`,\n\t\t\t\t)}\n\n\t\t\t\t<!-- Tooltip shown via title attribute -->\n\t\t\t\t${when(\n\t\t\t\t\tthis.hasAttribute('title'),\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"\n\t\t\t\t\t\t\tabsolute left-[calc(100%+8px)] top-1/2 -translate-y-1/2\n\t\t\t\t\t\t\tbg-surface-inverse text-surface-inverseOn\n\t\t\t\t\t\t\tpx-2 py-1 rounded-sm text-xs whitespace-nowrap\n\t\t\t\t\t\t\tz-1000 pointer-events-none opacity-0\n\t\t\t\t\t\t\thover:opacity-100 hover:translate-x-0\n\t\t\t\t\t\t\ttransition-all duration-150 ease-out\n\t\t\t\t\t\t\t-translate-x-1\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${this.getAttribute('title')}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-navigation-rail-item': SchmancyNavigationRailItem\n\t}\n}\n","import { SchmancyElement } from '@mixins/index'\r\nimport { html, PropertyValues } from 'lit'\r\nimport { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'\r\nimport { BehaviorSubject, fromEvent, takeUntil } from 'rxjs'\r\nimport { distinctUntilChanged, tap } from 'rxjs/operators'\r\nimport { SchmancyNavigationRailItem } from './navigation-rail-item'\r\n\r\nexport type NavigateEvent = CustomEvent<string>\r\n\r\nexport type NavigationRailMenuClickEvent = CustomEvent<void>\r\n\r\nexport type NavigationRailFabClickEvent = CustomEvent<void>\r\n\r\n\r\nexport type LabelVisibility = 'all' | 'selected' | 'none'\r\n\r\n/**\r\n * Material Design 3 Navigation Rail Component\r\n * @see https://m3.material.io/components/navigation-rail/overview\r\n *\r\n * `<schmancy-navigation-rail>` component\r\n *\r\n * A Material Design 3 vertical navigation component positioned on the left side of an application.\r\n * Navigation rails provide access to between 3-7 primary destinations with a compact footprint.\r\n * Automatically hides in fullscreen mode when triggered via schmancyTheme.next({ fullscreen: true }).\r\n *\r\n * @element schmancy-navigation-rail\r\n * @slot fab - Slot for a floating action button at the top\r\n * @slot menu - Slot for a menu icon or button below the FAB\r\n * @slot header - Custom header content slot\r\n * @slot footer - Custom footer content slot\r\n * @slot - Default slot for navigation rail items\r\n *\r\n * @fires navigate - When a navigation item is selected\r\n * @fires menu-click - When the menu button is clicked\r\n * @fires fab-click - When the FAB is clicked\r\n *\r\n * @csspart rail - The main rail container\r\n * @csspart header - The header section\r\n * @csspart nav - The navigation items container\r\n * @csspart footer - The footer section\r\n *\r\n * @example\r\n * <schmancy-navigation-rail activeIndex=\"0\">\r\n *   <schmancy-button slot=\"fab\" variant=\"filled\" aria-label=\"Compose\">\r\n *     <schmancy-icon>add</schmancy-icon>\r\n *   </schmancy-button>\r\n *   <schmancy-button slot=\"menu\" variant=\"text\" aria-label=\"Menu\">\r\n *     <schmancy-icon>menu</schmancy-icon>\r\n *   </schmancy-button>\r\n *   <schmancy-navigation-rail-item icon=\"home\" label=\"Home\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"search\" label=\"Search\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"favorite\" label=\"Favorites\" badge=\"3\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"settings\" label=\"Settings\"></schmancy-navigation-rail-item>\r\n * </schmancy-navigation-rail>\r\n */\r\n@customElement('schmancy-navigation-rail')\r\nexport class SchmancyNavigationRail extends SchmancyElement {\r\n\t// Observable state\r\n\tprivate activeIndex$ = new BehaviorSubject<number>(-1)\r\n\r\n\t// Properties\r\n\t/**\r\n\t * The currently active item index\r\n\t * @default -1\r\n\t */\r\n\t@property({ type: Number })\r\n\tget activeIndex() {\r\n\t\treturn this.activeIndex$.value\r\n\t}\r\n\tset activeIndex(value: number) {\r\n\t\tthis.activeIndex$.next(value)\r\n\t}\r\n\r\n\t/**\r\n\t * The currently active item value (for programmatic selection)\r\n\t */\r\n\t@property({ type: String })\r\n\tget activeValue() {\r\n\t\treturn this._activeValue\r\n\t}\r\n\tset activeValue(value: string) {\r\n\t\tthis._activeValue = value\r\n\t\tthis.updateActiveByValue(value)\r\n\t}\r\n\tprivate _activeValue = ''\r\n\r\n\t/**\r\n\t * When to show labels for navigation items\r\n\t * 'all' - Always show labels for all items\r\n\t * 'selected' - Only show label for selected item\r\n\t * 'none' - Never show labels\r\n\t * @default 'all'\r\n\t */\r\n\t@property({ type: String, attribute: 'label-visibility', reflect: true })\r\n\tlabelVisibility: LabelVisibility = 'all'\r\n\r\n\t/**\r\n\t * Alignment of navigation items\r\n\t * @default 'top'\r\n\t */\r\n\t@property({ type: String, reflect: true })\r\n\talignment: 'top' | 'center' | 'bottom' = 'top'\r\n\r\n\t/**\r\n\t * Show tooltips when labels are hidden\r\n\t * @default true\r\n\t */\r\n\t@property({ type: Boolean })\r\n\tshowTooltips = true\r\n\r\n\t/**\r\n\t * Enable keyboard navigation\r\n\t * @default true\r\n\t */\r\n\t@property({ type: Boolean })\r\n\tkeyboardNavigation = true\r\n\r\n\t/**\r\n\t * Whether the navigation rail is expanded\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\texpanded = false\r\n\r\n\r\n\t// State\r\n\t@state()\r\n\tprivate focusedIndex = -1\r\n\r\n\t@state()\r\n\tprivate hasHeaderContent = false\r\n\r\n\t@state()\r\n\tprivate isFullscreen = false\r\n\r\n\t// Queries\r\n\r\n\t@queryAssignedElements({ flatten: true })\r\n\tprivate allElements!: Element[]\r\n\r\n\tprivate get navigationItems(): SchmancyNavigationRailItem[] {\r\n\t\treturn this.allElements.filter(el => el.tagName === 'SCHMANCY-NAVIGATION-RAIL-ITEM') as SchmancyNavigationRailItem[]\r\n\t}\r\n\r\n\tconnectedCallback() {\r\n\t\tsuper.connectedCallback()\r\n\r\n\t\t// Set up keyboard navigation if enabled\r\n\t\tif (this.keyboardNavigation) {\r\n\t\t\tthis.addEventListener('keydown', this.handleKeyDown)\r\n\t\t}\r\n\r\n\t\t// Subscribe to active index changes with distinct values only\r\n\t\tthis.activeIndex$\r\n\t\t\t.pipe(\r\n\t\t\t\tdistinctUntilChanged(),\r\n\t\t\t\ttap(index => this.updateActiveStates(index)),\r\n\t\t\t\ttakeUntil(this.disconnecting),\r\n\t\t\t)\r\n\t\t\t.subscribe()\r\n\r\n\t\t// Listen to fullscreen events\r\n\t\tfromEvent(window, 'fullscreen').pipe(\r\n\t\t\ttap((event: Event) => {\r\n\t\t\t\tconst customEvent = event as CustomEvent\r\n\t\t\t\tthis.isFullscreen = customEvent.detail\r\n\t\t\t}),\r\n\t\t\ttakeUntil(this.disconnecting)\r\n\t\t).subscribe()\r\n\r\n\t\t// Listen for navigate events from child items\r\n\t\tthis.setupNavigateListener()\r\n\r\n\t\t// Set up label visibility\r\n\t\tthis.updateLabelVisibility()\r\n\r\n\t\t// Update ARIA attributes\r\n\t\tthis.setAttribute('role', 'navigation')\r\n\t\tthis.setAttribute('aria-label', 'Main navigation')\r\n\t}\r\n\r\n\tupdated(changedProperties: PropertyValues) {\r\n\t\tsuper.updated(changedProperties)\r\n\r\n\t\tif (changedProperties.has('labelVisibility')) {\r\n\t\t\tthis.updateLabelVisibility()\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('activeValue')) {\r\n\t\t\tthis.updateActiveByValue(this.activeValue)\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('expanded')) {\r\n\t\t\tthis.updateLabelVisibility()\r\n\t\t}\r\n\t}\r\n\r\n\tprivate updateActiveStates(index: number) {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tconst isActive = i === index\r\n\t\t\titem.active = isActive\r\n\t\t\titem.setAttribute('aria-selected', String(isActive))\r\n\t\t\titem.setAttribute('tabindex', isActive ? '0' : '-1')\r\n\r\n\t\t\t// Update activeValue when index changes\r\n\t\t\tif (isActive) {\r\n\t\t\t\tthis._activeValue = item.value || item.label || ''\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tprivate updateActiveByValue(value: string) {\r\n\t\tconst index = this.navigationItems.findIndex(item => item.getAttribute('value') === value || item.label === value)\r\n\t\tif (index >= 0) {\r\n\t\t\tthis.activeIndex = index\r\n\t\t}\r\n\t}\r\n\r\n\tprivate updateLabelVisibility() {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tlet shouldShowLabel = false\r\n\r\n\t\t\t// M3 Spec: In expanded state, always show all labels\r\n\t\t\tif (this.expanded) {\r\n\t\t\t\tshouldShowLabel = true\r\n\t\t\t} else {\r\n\t\t\t\t// In collapsed state, respect labelVisibility setting\r\n\t\t\t\tshouldShowLabel =\r\n\t\t\t\t\tthis.labelVisibility === 'all' || (this.labelVisibility === 'selected' && i === this.activeIndex)\r\n\t\t\t}\r\n\r\n\t\t\titem.showLabel = shouldShowLabel\r\n\r\n\t\t\t// Add tooltips when labels are hidden (only in collapsed state)\r\n\t\t\tif (this.showTooltips && !shouldShowLabel && !this.expanded && item.label) {\r\n\t\t\t\titem.setAttribute('title', item.label)\r\n\t\t\t} else {\r\n\t\t\t\titem.removeAttribute('title')\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\t// Note: Hover-based label showing removed for M3 compliance\r\n\t// Labels are now controlled via labelVisibility property and expanded state\r\n\r\n\t/**\r\n\t * Programmatically expand the navigation rail\r\n\t */\r\n\texpand() {\r\n\t\tthis.expanded = true\r\n\t}\r\n\r\n\t/**\r\n\t * Programmatically collapse the navigation rail\r\n\t */\r\n\tcollapse() {\r\n\t\tthis.expanded = false\r\n\t}\r\n\r\n\t/**\r\n\t * Add a boat item to the navigation rail\r\n\t * @param config Configuration for the boat item\r\n\t * @returns The created or existing navigation rail item element\r\n\t */\r\n\tpublic addBoatItem(config: { id: string; title: string; icon?: string }) {\r\n\t\t// Check if item already exists\r\n\t\tconst existingItem = this.querySelector(`[value=\"${config.id}\"]`) as HTMLElement\r\n\t\tif (existingItem) {\r\n\t\t\t// Item already exists, just return it\r\n\t\t\treturn existingItem\r\n\t\t}\r\n\r\n\t\t// Create new item\r\n\t\tconst item = document.createElement('schmancy-navigation-rail-item')\r\n\t\titem.setAttribute('value', config.id)\r\n\t\titem.innerHTML = `\r\n\t\t\t<schmancy-icon slot=\"icon\">${config.icon || 'widgets'}</schmancy-icon>\r\n\t\t\t${config.title}\r\n\t\t`\r\n\t\t// Add to the rail before any footer content\r\n\t\tconst footer = this.querySelector('[slot=\"footer\"]')\r\n\t\tif (footer) {\r\n\t\t\tthis.insertBefore(item, footer)\r\n\t\t} else {\r\n\t\t\tthis.appendChild(item)\r\n\t\t}\r\n\t\treturn item\r\n\t}\r\n\r\n\t/**\r\n\t * Toggle the navigation rail between expanded and collapsed states\r\n\t */\r\n\ttoggle() {\r\n\t\tthis.expanded = !this.expanded\r\n\t}\r\n\r\n\r\n\tprivate handleKeyDown(event: KeyboardEvent) {\r\n\t\tconst items = this.navigationItems\r\n\t\tif (items.length === 0) return\r\n\r\n\t\tlet newIndex = this.focusedIndex >= 0 ? this.focusedIndex : this.activeIndex\r\n\r\n\t\tswitch (event.key) {\r\n\t\t\tcase 'ArrowDown':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = (newIndex + 1) % items.length\r\n\t\t\t\tbreak\r\n\t\t\tcase 'ArrowUp':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = newIndex <= 0 ? items.length - 1 : newIndex - 1\r\n\t\t\t\tbreak\r\n\t\t\tcase 'Home':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = 0\r\n\t\t\t\tbreak\r\n\t\t\tcase 'End':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = items.length - 1\r\n\t\t\t\tbreak\r\n\t\t\tcase 'Enter':\r\n\t\t\tcase ' ':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tif (newIndex >= 0) {\r\n\t\t\t\t\titems[newIndex].click()\r\n\t\t\t\t}\r\n\t\t\t\treturn\r\n\t\t\tdefault:\r\n\t\t\t\treturn\r\n\t\t}\r\n\r\n\t\tthis.focusedIndex = newIndex\r\n\t\titems[newIndex].focus()\r\n\t}\r\n\r\n\tprivate handleFabClick(event: Event) {\r\n\t\tevent.stopPropagation()\r\n\t\tthis.dispatchEvent(\r\n\t\t\tnew CustomEvent('fab-click', {\r\n\t\t\t\tbubbles: true,\r\n\t\t\t\tcomposed: true,\r\n\t\t\t}),\r\n\t\t)\r\n\t}\r\n\r\n\tprivate handleMenuClick(event: Event) {\r\n\t\tevent.stopPropagation()\r\n\t\tthis.dispatchEvent(\r\n\t\t\tnew CustomEvent('menu-click', {\r\n\t\t\t\tbubbles: true,\r\n\t\t\t\tcomposed: true,\r\n\t\t\t}),\r\n\t\t)\r\n\t}\r\n\r\n\tprotected render() {\r\n\t\t// Host-level classes for the navigation rail\r\n\t\tconst hostClasses = this.classMap({\r\n\t\t\t// Layout & Structure - Fixed width to prevent layout shift\r\n\t\t\t'flex flex-col': true,\r\n\t\t\t'h-full': true,\r\n\t\t\t'box-border relative overflow-visible': true,\r\n\t\t\t'z-10 hover:z-[100]': true, // Base z-index, elevated on hover for overlay\r\n\r\n\t\t\t// Width - collapses to 0 when fullscreen\r\n\t\t\t'w-20': !this.isFullscreen, // w-20 = 80px fixed width (M3 spec: 80dp)\r\n\t\t\t'w-0': this.isFullscreen, // Collapse width to 0 in fullscreen\r\n\r\n\t\t\t// Visibility and transition\r\n\t\t\t'transition-all duration-300 ease-emphasized': true,\r\n\t\t\t'opacity-100': !this.isFullscreen,\r\n\t\t\t'opacity-0 pointer-events-none': this.isFullscreen,\r\n\t\t\t'overflow-hidden': this.isFullscreen, // Hide overflow when collapsed\r\n\t\t})\r\n\r\n\t\t// Rail container - programmatically controlled width\r\n\t\tconst railClasses = this.classMap({\r\n\t\t\t// Layout & Structure\r\n\t\t\t'flex flex-col h-full': true,\r\n\t\t\t'box-border relative': true,\r\n\r\n\t\t\t// M3 Colors & Theme\r\n\t\t\t'bg-container-lowest text-surface-on': true,\r\n\r\n\t\t\t// M3 Motion - smooth transitions for width and shadow\r\n\t\t\t'transition-all duration-300 ease-emphasized': true,\r\n\r\n\t\t\t// Collapsed state (default) - M3 standard 80px width\r\n\t\t\t'w-20': !this.expanded, // w-20 = 80px (M3 spec: 80dp)\r\n\t\t\t'px-3': !this.expanded, // px-3 = 12px (M3 spec: 12px to center 56px items)\r\n\r\n\t\t\t// Expanded state - M3 expanded width with shadow\r\n\t\t\t'w-60': this.expanded, // w-60 = 240px expanded width\r\n\t\t\t'px-4': this.expanded, // Larger padding when expanded\r\n\t\t\t'shadow-lg': this.expanded, // M3 elevation 3 shadow when expanded\r\n\t\t})\r\n\r\n\t\t// Header section classes - hidden when no content\r\n\t\tconst headerClasses = this.classMap({\r\n\t\t\t'flex flex-col items-center gap-1': true,\r\n\t\t\t'hidden': !this.hasHeaderContent,\r\n\t\t})\r\n\r\n\t\t// Navigation container classes with alignment\r\n\t\tconst navClasses = this.classMap({\r\n\t\t\t'flex-1 flex flex-col gap-3': true, // gap-3 = 12px (M3 spec: 12px item spacing)\r\n\t\t\t'min-h-0': true, // Allow flex shrinking and proper scroll container height calculation\r\n\t\t\t// Alignment variants\r\n\t\t\t'justify-start': this.alignment === 'top',\r\n\t\t\t'justify-center': this.alignment === 'center',\r\n\t\t\t'justify-end': this.alignment === 'bottom',\r\n\t\t})\r\n\r\n\t\t// Footer section classes\r\n\t\tconst footerClasses = this.classMap({\r\n\t\t\t'flex flex-col items-center gap-1 mt-auto pt-2': true,\r\n\t\t})\r\n\r\n\t\treturn html`\r\n\t\t\t<div\r\n\t\t\t\tclass=${hostClasses}\r\n\t\t\t>\r\n\t\t\t\t<div class=${railClasses} part=\"rail\">\r\n\t\t\t\t\t<div class=${headerClasses} part=\"header\">\r\n\t\t\t\t\t\t<slot name=\"fab\" @click=${this.handleFabClick} @slotchange=${this.handleHeaderSlotChange}></slot>\r\n\t\t\t\t\t\t<slot name=\"menu\" @click=${this.handleMenuClick} @slotchange=${this.handleHeaderSlotChange}></slot>\r\n\t\t\t\t\t\t<slot name=\"header\" @slotchange=${this.handleHeaderSlotChange}></slot>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<nav class=${navClasses} part=\"nav\" role=\"list\">\r\n\t\t\t\t\t\t<schmancy-scroll hide direction=\"vertical\">\r\n\t\t\t\t\t\t\t<slot @slotchange=${this.handleSlotChange}></slot>\r\n\t\t\t\t\t\t</schmancy-scroll>\r\n\t\t\t\t\t</nav>\r\n\r\n\t\t\t\t\t<div class=${footerClasses} part=\"footer\">\r\n\t\t\t\t\t\t<slot name=\"footer\"></slot>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t`\r\n\t}\r\n\r\n\tprivate setupNavigateListener() {\r\n\t\t// Listen for navigate events from child items\r\n\t\tthis.addEventListener('navigate', (e: Event) => {\r\n\t\t\tif (e instanceof CustomEvent) {\r\n\t\t\t\tconst value = e.detail\r\n\t\t\t\t// Find the item that dispatched the event and update active state\r\n\t\t\t\tconst itemIndex = this.navigationItems.findIndex(item => item.value === value || item.label === value)\r\n\t\t\t\tif (itemIndex >= 0) {\r\n\t\t\t\t\tthis.activeIndex = itemIndex\r\n\t\t\t\t\tthis._activeValue = value\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tprivate handleHeaderSlotChange() {\r\n\t\t// Check if any header slot has content\r\n\t\tconst headerDiv = this.shadowRoot?.querySelector('[part=\"header\"]')\r\n\t\tif (headerDiv) {\r\n\t\t\tconst allSlots = headerDiv.querySelectorAll('slot')\r\n\t\t\tthis.hasHeaderContent = Array.from(allSlots).some(s =>\r\n\t\t\t\ts.assignedNodes({ flatten: true }).length > 0\r\n\t\t\t)\r\n\t\t}\r\n\t}\r\n\r\n\tprivate handleSlotChange() {\r\n\t\t// Update items when slot content changes\r\n\t\tthis.updateLabelVisibility()\r\n\t\tthis.updateActiveStates(this.activeIndex)\r\n\r\n\t\t// Set ARIA attributes on items\r\n\t\tthis.navigationItems.forEach((item, index) => {\r\n\t\t\titem.setAttribute('role', 'listitem')\r\n\t\t\tif (!item.hasAttribute('tabindex')) {\r\n\t\t\t\titem.setAttribute('tabindex', index === this.activeIndex ? '0' : '-1')\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n}\r\n\r\ndeclare global {\r\n\tinterface HTMLElementTagNameMap {\r\n\t\t'schmancy-navigation-rail': SchmancyNavigationRail\r\n\t}\r\n}\r\n"],"mappings":"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"}