@mhmo91/schmancy 0.9.16 → 0.9.18

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 { $LitElement } 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 $LitElement() {\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 { $LitElement } 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 $LitElement() {\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 { $LitElement } 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 * Single destination inside schmancy-navigation-rail — vertically-stacked icon + optional label. @see https://m3.material.io/components/navigation-rail/overview\n *\n * @element schmancy-navigation-rail-item\n * @summary Always nested inside schmancy-navigation-rail. Use `icon` attr for a Material Symbols glyph, or slot=icon for custom content. Supports a `badge` slot for notification dots / counts.\n * @platform button click - Styled vertical navigation target. Degrades to a plain `<button>` if the tag never registers.\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 $LitElement() {\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 { $LitElement } 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 * Vertical navigation rail — Material Design 3 compact left-side nav for desktop / tablet layouts with 3–7 primary destinations. Auto-hides in fullscreen mode. @see https://m3.material.io/components/navigation-rail/overview\r\n *\r\n * @element schmancy-navigation-rail\r\n * @summary Use as the desktop counterpart of schmancy-navigation-bar: same destinations, different form factor. Prefer schmancy-nav-drawer when you also want a drawer + app-bar combo.\r\n * @example\r\n * <schmancy-navigation-rail activeIndex=\"0\">\r\n *   <schmancy-icon-button slot=\"fab\" variant=\"filled\">\r\n *     <schmancy-icon>add</schmancy-icon>\r\n *   </schmancy-icon-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=\"settings\" label=\"Settings\"></schmancy-navigation-rail-item>\r\n * </schmancy-navigation-rail>\r\n * @platform nav - Vertical styled nav. Degrades to a plain vertical flex container if the tag never registers.\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 $LitElement() {\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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"}

package/dist/navigation-rail.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-rail.js","names":[],"sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { $LitElement } 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 $LitElement() {\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 { $LitElement } 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 $LitElement() {\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.js","names":[],"sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { $LitElement } 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 * Single destination inside schmancy-navigation-rail — vertically-stacked icon + optional label. @see https://m3.material.io/components/navigation-rail/overview\n *\n * @element schmancy-navigation-rail-item\n * @summary Always nested inside schmancy-navigation-rail. Use `icon` attr for a Material Symbols glyph, or slot=icon for custom content. Supports a `badge` slot for notification dots / counts.\n * @platform button click - Styled vertical navigation target. Degrades to a plain `<button>` if the tag never registers.\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 $LitElement() {\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 { $LitElement } 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 * Vertical navigation rail — Material Design 3 compact left-side nav for desktop / tablet layouts with 3–7 primary destinations. Auto-hides in fullscreen mode. @see https://m3.material.io/components/navigation-rail/overview\r\n *\r\n * @element schmancy-navigation-rail\r\n * @summary Use as the desktop counterpart of schmancy-navigation-bar: same destinations, different form factor. Prefer schmancy-nav-drawer when you also want a drawer + app-bar combo.\r\n * @example\r\n * <schmancy-navigation-rail activeIndex=\"0\">\r\n *   <schmancy-icon-button slot=\"fab\" variant=\"filled\">\r\n *     <schmancy-icon>add</schmancy-icon>\r\n *   </schmancy-icon-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=\"settings\" label=\"Settings\"></schmancy-navigation-rail-item>\r\n * </schmancy-navigation-rail>\r\n * @platform nav - Vertical styled nav. Degrades to a plain vertical flex container if the tag never registers.\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 $LitElement() {\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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"}

package/dist/page.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"page.cjs","names":[],"sources":["../src/page/page.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport '../layout/scroll/scroll'\nimport { Subject, fromEvent, merge, EMPTY, timer, combineLatest } from 'rxjs'\nimport { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith } from 'rxjs/operators'\nimport { theme } from '../theme/theme.service'\nimport { fromResizeObserver } from '../directives/layout'\n\n/**\n * Native mobile-like page container.\n * Prevents double-tap zoom, pull-to-refresh, rubber-banding.\n * Automatically fills remaining viewport height.\n *\n * @element schmancy-page\n *\n * @example\n * html`\n *   <schmancy-page rows=\"1fr_2fr_auto\">\n *     <header>App Bar</header>\n *     <main>Scrollable content</main>\n *     <footer>Navigation</footer>\n *   </schmancy-page>\n * `\n */\n@customElement('schmancy-page')\nexport class SchmancyPage extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t\ttouch-action: pan-x pan-y;\n\t\toverscroll-behavior: none;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n`) {\n\t/** Custom grid-template-rows using underscores (e.g. \"1fr_2fr_auto\") */\n\t@property({ type: String })\n\trows = 'auto_1fr_auto'\n\n\t@property({ type: Boolean, attribute: 'show-scrollbar' })\n\tshowScrollbar = false\n\n\t@property({ type: Boolean, attribute: 'no-select' })\n\tnoSelect = false\n\n\tprivate heightDisconnecting$ = new Subject<void>()\n\n\tprivate calculateHeight(): number {\n\t\tconst viewportHeight = window.visualViewport?.height ?? window.innerHeight\n\t\tconst topOffset = this.getBoundingClientRect().top\n\t\treturn Math.max(0, viewportHeight - topOffset)\n\t}\n\n\tprivate applyHeight(height: number, bottomPadding: number) {\n\t\tthis.style.height = `${height}px`\n\t\tthis.style.paddingBottom = `${bottomPadding}px`\n\t}\n\n\tprivate setupHeightStream() {\n\t\t// Shared resize stream\n\t\tconst windowResize$ = fromEvent(window, 'resize', { passive: true })\n\t\tconst viewportEvents$ = window.visualViewport\n\t\t\t? merge(\n\t\t\t\t\tfromEvent(window.visualViewport, 'resize', { passive: true }),\n\t\t\t\t\tfromEvent(window.visualViewport, 'scroll', { passive: true })\n\t\t\t\t)\n\t\t\t: windowResize$\n\t\tconst orientation$ = fromEvent(window, 'orientationchange')\n\t\tconst focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(\n\t\t\tswitchMap(() => timer(100))\n\t\t)\n\n\t\tconst globalEvents$ = merge(windowResize$, viewportEvents$, orientation$, focusOut$).pipe(\n\t\t\tdebounceTime(16)\n\t\t)\n\n\t\t// Parent resize detects layout shifts\n\t\tconst parentResize$ = this.parentElement\n\t\t\t? fromResizeObserver(this.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Combine all sources, calculate height and padding, dedupe, apply\n\t\tcombineLatest([\n\t\t\tmerge(parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.bottomOffset$,\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tmap(([, bottomOffset, isFullscreen]) => ({\n\t\t\t\theight: this.calculateHeight(),\n\t\t\t\tpadding: isFullscreen ? 0 : bottomOffset\n\t\t\t})),\n\t\t\tdistinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),\n\t\t\ttap(({ height, padding }) => this.applyHeight(height, padding)),\n\t\t\ttakeUntil(this.heightDisconnecting$)\n\t\t).subscribe()\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\t// Auto-assign semantic elements to slots\n\t\tthis.querySelectorAll(':scope > header').forEach(el => el.setAttribute('slot', 'header'))\n\t\tthis.querySelectorAll(':scope > footer').forEach(el => el.setAttribute('slot', 'footer'))\n\t\t// Setup fullHeight on host\n\t\tthis.setupHeightStream()\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.heightDisconnecting$.next()\n\t}\n\n\tprotected render() {\n\t\treturn html`\n\t\t\t<section\n\t\t\t\tclass=${this.classMap({\n\t\t\t\t\t'grid overflow-hidden h-full': true,\n\t\t\t\t\t'select-none': this.noSelect,\n\t\t\t\t})}\n\t\t\t\tstyle=\"grid-template-rows: ${this.rows.replace(/_/g, ' ')}\"\n\t\t\t>\n\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t<schmancy-scroll ?hide=${!this.showScrollbar}><slot></slot></schmancy-scroll>\n\t\t\t\t<schmancy-scroll ?hide=${!this.showScrollbar}>\n\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t</schmancy-scroll>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-page': SchmancyPage\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"page.cjs","names":[],"sources":["../src/page/page.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport '../layout/scroll/scroll'\nimport { Subject, fromEvent, merge, EMPTY, timer, combineLatest } from 'rxjs'\nimport { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith } from 'rxjs/operators'\nimport { theme } from '../theme/theme.service'\nimport { fromResizeObserver } from '../directives/layout'\n\n/**\n * Mobile-first page container — fills remaining viewport height, suppresses double-tap zoom / pull-to-refresh / rubber-banding. Lays children in a CSS grid whose row template is `rows`.\n *\n * @element schmancy-page\n * @summary The root of any app view — wraps header / main / footer children in a full-viewport grid. Use rows=\"auto_1fr_auto\" to make the middle child scroll while header/footer stay pinned.\n * @example\n * <schmancy-page rows=\"auto_1fr_auto\">\n *   <schmancy-nav-drawer-appbar>Title</schmancy-nav-drawer-appbar>\n *   <main>Scrollable content</main>\n *   <schmancy-navigation-bar></schmancy-navigation-bar>\n * </schmancy-page>\n * @platform div - Full-height CSS-grid container. Degrades to a plain div if the tag never registers — children still flow vertically but without the height fill and gesture suppression.\n */\n@customElement('schmancy-page')\nexport class SchmancyPage extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t\ttouch-action: pan-x pan-y;\n\t\toverscroll-behavior: none;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n`) {\n\t/** Custom grid-template-rows using underscores (e.g. \"1fr_2fr_auto\") */\n\t@property({ type: String })\n\trows = 'auto_1fr_auto'\n\n\t@property({ type: Boolean, attribute: 'show-scrollbar' })\n\tshowScrollbar = false\n\n\t@property({ type: Boolean, attribute: 'no-select' })\n\tnoSelect = false\n\n\tprivate heightDisconnecting$ = new Subject<void>()\n\n\tprivate calculateHeight(): number {\n\t\tconst viewportHeight = window.visualViewport?.height ?? window.innerHeight\n\t\tconst topOffset = this.getBoundingClientRect().top\n\t\treturn Math.max(0, viewportHeight - topOffset)\n\t}\n\n\tprivate applyHeight(height: number, bottomPadding: number) {\n\t\tthis.style.height = `${height}px`\n\t\tthis.style.paddingBottom = `${bottomPadding}px`\n\t}\n\n\tprivate setupHeightStream() {\n\t\t// Shared resize stream\n\t\tconst windowResize$ = fromEvent(window, 'resize', { passive: true })\n\t\tconst viewportEvents$ = window.visualViewport\n\t\t\t? merge(\n\t\t\t\t\tfromEvent(window.visualViewport, 'resize', { passive: true }),\n\t\t\t\t\tfromEvent(window.visualViewport, 'scroll', { passive: true })\n\t\t\t\t)\n\t\t\t: windowResize$\n\t\tconst orientation$ = fromEvent(window, 'orientationchange')\n\t\tconst focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(\n\t\t\tswitchMap(() => timer(100))\n\t\t)\n\n\t\tconst globalEvents$ = merge(windowResize$, viewportEvents$, orientation$, focusOut$).pipe(\n\t\t\tdebounceTime(16)\n\t\t)\n\n\t\t// Parent resize detects layout shifts\n\t\tconst parentResize$ = this.parentElement\n\t\t\t? fromResizeObserver(this.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Combine all sources, calculate height and padding, dedupe, apply\n\t\tcombineLatest([\n\t\t\tmerge(parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.bottomOffset$,\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tmap(([, bottomOffset, isFullscreen]) => ({\n\t\t\t\theight: this.calculateHeight(),\n\t\t\t\tpadding: isFullscreen ? 0 : bottomOffset\n\t\t\t})),\n\t\t\tdistinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),\n\t\t\ttap(({ height, padding }) => this.applyHeight(height, padding)),\n\t\t\ttakeUntil(this.heightDisconnecting$)\n\t\t).subscribe()\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\t// Auto-assign semantic elements to slots\n\t\tthis.querySelectorAll(':scope > header').forEach(el => el.setAttribute('slot', 'header'))\n\t\tthis.querySelectorAll(':scope > footer').forEach(el => el.setAttribute('slot', 'footer'))\n\t\t// Setup fullHeight on host\n\t\tthis.setupHeightStream()\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.heightDisconnecting$.next()\n\t}\n\n\tprotected render() {\n\t\treturn html`\n\t\t\t<section\n\t\t\t\tclass=${this.classMap({\n\t\t\t\t\t'grid overflow-hidden h-full': true,\n\t\t\t\t\t'select-none': this.noSelect,\n\t\t\t\t})}\n\t\t\t\tstyle=\"grid-template-rows: ${this.rows.replace(/_/g, ' ')}\"\n\t\t\t>\n\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t<schmancy-scroll ?hide=${!this.showScrollbar}><slot></slot></schmancy-scroll>\n\t\t\t\t<schmancy-scroll ?hide=${!this.showScrollbar}>\n\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t</schmancy-scroll>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-page': SchmancyPage\n\t}\n}\n"],"mappings":"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"}

package/dist/page.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.js","names":[],"sources":["../src/page/page.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport '../layout/scroll/scroll'\nimport { Subject, fromEvent, merge, EMPTY, timer, combineLatest } from 'rxjs'\nimport { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith } from 'rxjs/operators'\nimport { theme } from '../theme/theme.service'\nimport { fromResizeObserver } from '../directives/layout'\n\n/**\n * Native mobile-like page container.\n * Prevents double-tap zoom, pull-to-refresh, rubber-banding.\n * Automatically fills remaining viewport height.\n *\n * @element schmancy-page\n *\n * @example\n * html`\n *   <schmancy-page rows=\"1fr_2fr_auto\">\n *     <header>App Bar</header>\n *     <main>Scrollable content</main>\n *     <footer>Navigation</footer>\n *   </schmancy-page>\n * `\n */\n@customElement('schmancy-page')\nexport class SchmancyPage extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t\ttouch-action: pan-x pan-y;\n\t\toverscroll-behavior: none;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n`) {\n\t/** Custom grid-template-rows using underscores (e.g. \"1fr_2fr_auto\") */\n\t@property({ type: String })\n\trows = 'auto_1fr_auto'\n\n\t@property({ type: Boolean, attribute: 'show-scrollbar' })\n\tshowScrollbar = false\n\n\t@property({ type: Boolean, attribute: 'no-select' })\n\tnoSelect = false\n\n\tprivate heightDisconnecting$ = new Subject<void>()\n\n\tprivate calculateHeight(): number {\n\t\tconst viewportHeight = window.visualViewport?.height ?? window.innerHeight\n\t\tconst topOffset = this.getBoundingClientRect().top\n\t\treturn Math.max(0, viewportHeight - topOffset)\n\t}\n\n\tprivate applyHeight(height: number, bottomPadding: number) {\n\t\tthis.style.height = `${height}px`\n\t\tthis.style.paddingBottom = `${bottomPadding}px`\n\t}\n\n\tprivate setupHeightStream() {\n\t\t// Shared resize stream\n\t\tconst windowResize$ = fromEvent(window, 'resize', { passive: true })\n\t\tconst viewportEvents$ = window.visualViewport\n\t\t\t? merge(\n\t\t\t\t\tfromEvent(window.visualViewport, 'resize', { passive: true }),\n\t\t\t\t\tfromEvent(window.visualViewport, 'scroll', { passive: true })\n\t\t\t\t)\n\t\t\t: windowResize$\n\t\tconst orientation$ = fromEvent(window, 'orientationchange')\n\t\tconst focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(\n\t\t\tswitchMap(() => timer(100))\n\t\t)\n\n\t\tconst globalEvents$ = merge(windowResize$, viewportEvents$, orientation$, focusOut$).pipe(\n\t\t\tdebounceTime(16)\n\t\t)\n\n\t\t// Parent resize detects layout shifts\n\t\tconst parentResize$ = this.parentElement\n\t\t\t? fromResizeObserver(this.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Combine all sources, calculate height and padding, dedupe, apply\n\t\tcombineLatest([\n\t\t\tmerge(parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.bottomOffset$,\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tmap(([, bottomOffset, isFullscreen]) => ({\n\t\t\t\theight: this.calculateHeight(),\n\t\t\t\tpadding: isFullscreen ? 0 : bottomOffset\n\t\t\t})),\n\t\t\tdistinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),\n\t\t\ttap(({ height, padding }) => this.applyHeight(height, padding)),\n\t\t\ttakeUntil(this.heightDisconnecting$)\n\t\t).subscribe()\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\t// Auto-assign semantic elements to slots\n\t\tthis.querySelectorAll(':scope > header').forEach(el => el.setAttribute('slot', 'header'))\n\t\tthis.querySelectorAll(':scope > footer').forEach(el => el.setAttribute('slot', 'footer'))\n\t\t// Setup fullHeight on host\n\t\tthis.setupHeightStream()\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.heightDisconnecting$.next()\n\t}\n\n\tprotected render() {\n\t\treturn html`\n\t\t\t<section\n\t\t\t\tclass=${this.classMap({\n\t\t\t\t\t'grid overflow-hidden h-full': true,\n\t\t\t\t\t'select-none': this.noSelect,\n\t\t\t\t})}\n\t\t\t\tstyle=\"grid-template-rows: ${this.rows.replace(/_/g, ' ')}\"\n\t\t\t>\n\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t<schmancy-scroll ?hide=${!this.showScrollbar}><slot></slot></schmancy-scroll>\n\t\t\t\t<schmancy-scroll ?hide=${!this.showScrollbar}>\n\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t</schmancy-scroll>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-page': SchmancyPage\n\t}\n}\n"],"mappings":";;;;;;;;;;AA0BO,IAAA,IAAA,cAA2B,EAAY,CAAG;;;;;;;;;;2BAWzC,iBAAA,KAAA,gBAAA,CAGS,GAAA,KAAA,WAAA,CAGL,GAAA,KAAA,uBAEoB,IAAI,GAAA;;CAEnC,kBAAA;EACC,IAAM,IAAiB,OAAO,gBAAgB,UAAU,OAAO,aACzD,IAAY,KAAK,uBAAA,CAAwB;AAC/C,SAAO,KAAK,IAAI,GAAG,IAAiB,EAAA;;CAGrC,YAAoB,GAAgB,GAAA;AACnC,OAAK,MAAM,SAAS,GAAG,EAAA,KACvB,KAAK,MAAM,gBAAgB,GAAG,EAAA;;CAG/B,oBAAA;EAEC,IAAM,IAAgB,EAAU,QAAQ,UAAU,EAAE,SAAA,CAAS,GAAA,CAAA,EAYvD,IAAgB,EAAM,GAXJ,OAAO,iBAC5B,EACA,EAAU,OAAO,gBAAgB,UAAU,EAAE,SAAA,CAAS,GAAA,CAAA,EACtD,EAAU,OAAO,gBAAgB,UAAU,EAAE,SAAA,CAAS,GAAA,CAAA,CAAA,GAEtD,GACkB,EAAU,QAAQ,oBAAA,EACrB,EAAU,UAAU,YAAY,EAAE,SAAA,CAAS,GAAA,CAAA,CAAQ,KACpE,QAAgB,EAAM,IAAA,CAAA,CAAA,CAAA,CAG8D,KACpF,EAAa,GAAA,CAAA;AASd,IAAc;GACb,EANqB,KAAK,gBACxB,EAAmB,KAAK,cAAA,GACxB,GAImB,EAAA,CAAe,KAAK,EAAU,KAAA,CAAA;GACnD,EAAM;GACN,EAAM;GAAA,CAAA,CACJ,KACF,GAAA,GAAQ,GAAc,QAAA;GACrB,QAAQ,KAAK,iBAAA;GACb,SAAS,IAAe,IAAI;GAAA,EAAA,EAE7B,GAAsB,GAAG,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,QAAA,EACxE,GAAA,EAAO,QAAA,GAAQ,SAAA,QAAc,KAAK,YAAY,GAAQ,EAAA,CAAA,EACtD,EAAU,KAAK,qBAAA,CAAA,CACd,WAAA;;CAGH,oBAAA;AACC,QAAM,mBAAA,EAEN,KAAK,iBAAiB,kBAAA,CAAmB,SAAQ,MAAM,EAAG,aAAa,QAAQ,SAAA,CAAA,EAC/E,KAAK,iBAAiB,kBAAA,CAAmB,SAAQ,MAAM,EAAG,aAAa,QAAQ,SAAA,CAAA,EAE/E,KAAK,mBAAA;;CAGN,uBAAA;AACC,QAAM,sBAAA,EACN,KAAK,qBAAqB,MAAA;;CAG3B,SAAA;AACC,SAAO,CAAI;;YAED,KAAK,SAAS;GACrB,+BAAA,CAA+B;GAC/B,eAAe,KAAK;GAAA,CAAA,CAAA;iCAEQ,KAAK,KAAK,QAAQ,MAAM,IAAA,CAAA;;;8BAG3B,KAAK,cAAA;8BACL,KAAK,cAAA;;;;;;;GAtFjC,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAG1B,EAAS;CAAE,MAAM;CAAS,WAAW;CAAA,CAAA,CAAA,EAAmB,EAAA,WAAA,iBAAA,KAAA,EAAA,EAAA,EAAA,CAGxD,EAAS;CAAE,MAAM;CAAS,WAAW;CAAA,CAAA,CAAA,EAAc,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAjBpD,EAAc,gBAAA,CAAA,EAAgB,EAAA;AAAA,SAAA,KAAA"}
+{"version":3,"file":"page.js","names":[],"sources":["../src/page/page.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport '../layout/scroll/scroll'\nimport { Subject, fromEvent, merge, EMPTY, timer, combineLatest } from 'rxjs'\nimport { debounceTime, switchMap, takeUntil, distinctUntilChanged, map, tap, startWith } from 'rxjs/operators'\nimport { theme } from '../theme/theme.service'\nimport { fromResizeObserver } from '../directives/layout'\n\n/**\n * Mobile-first page container — fills remaining viewport height, suppresses double-tap zoom / pull-to-refresh / rubber-banding. Lays children in a CSS grid whose row template is `rows`.\n *\n * @element schmancy-page\n * @summary The root of any app view — wraps header / main / footer children in a full-viewport grid. Use rows=\"auto_1fr_auto\" to make the middle child scroll while header/footer stay pinned.\n * @example\n * <schmancy-page rows=\"auto_1fr_auto\">\n *   <schmancy-nav-drawer-appbar>Title</schmancy-nav-drawer-appbar>\n *   <main>Scrollable content</main>\n *   <schmancy-navigation-bar></schmancy-navigation-bar>\n * </schmancy-page>\n * @platform div - Full-height CSS-grid container. Degrades to a plain div if the tag never registers — children still flow vertically but without the height fill and gesture suppression.\n */\n@customElement('schmancy-page')\nexport class SchmancyPage extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t\ttouch-action: pan-x pan-y;\n\t\toverscroll-behavior: none;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n`) {\n\t/** Custom grid-template-rows using underscores (e.g. \"1fr_2fr_auto\") */\n\t@property({ type: String })\n\trows = 'auto_1fr_auto'\n\n\t@property({ type: Boolean, attribute: 'show-scrollbar' })\n\tshowScrollbar = false\n\n\t@property({ type: Boolean, attribute: 'no-select' })\n\tnoSelect = false\n\n\tprivate heightDisconnecting$ = new Subject<void>()\n\n\tprivate calculateHeight(): number {\n\t\tconst viewportHeight = window.visualViewport?.height ?? window.innerHeight\n\t\tconst topOffset = this.getBoundingClientRect().top\n\t\treturn Math.max(0, viewportHeight - topOffset)\n\t}\n\n\tprivate applyHeight(height: number, bottomPadding: number) {\n\t\tthis.style.height = `${height}px`\n\t\tthis.style.paddingBottom = `${bottomPadding}px`\n\t}\n\n\tprivate setupHeightStream() {\n\t\t// Shared resize stream\n\t\tconst windowResize$ = fromEvent(window, 'resize', { passive: true })\n\t\tconst viewportEvents$ = window.visualViewport\n\t\t\t? merge(\n\t\t\t\t\tfromEvent(window.visualViewport, 'resize', { passive: true }),\n\t\t\t\t\tfromEvent(window.visualViewport, 'scroll', { passive: true })\n\t\t\t\t)\n\t\t\t: windowResize$\n\t\tconst orientation$ = fromEvent(window, 'orientationchange')\n\t\tconst focusOut$ = fromEvent(document, 'focusout', { passive: true }).pipe(\n\t\t\tswitchMap(() => timer(100))\n\t\t)\n\n\t\tconst globalEvents$ = merge(windowResize$, viewportEvents$, orientation$, focusOut$).pipe(\n\t\t\tdebounceTime(16)\n\t\t)\n\n\t\t// Parent resize detects layout shifts\n\t\tconst parentResize$ = this.parentElement\n\t\t\t? fromResizeObserver(this.parentElement)\n\t\t\t: EMPTY\n\n\t\t// Combine all sources, calculate height and padding, dedupe, apply\n\t\tcombineLatest([\n\t\t\tmerge(parentResize$, globalEvents$).pipe(startWith(null)),\n\t\t\ttheme.bottomOffset$,\n\t\t\ttheme.fullscreen$\n\t\t]).pipe(\n\t\t\tmap(([, bottomOffset, isFullscreen]) => ({\n\t\t\t\theight: this.calculateHeight(),\n\t\t\t\tpadding: isFullscreen ? 0 : bottomOffset\n\t\t\t})),\n\t\t\tdistinctUntilChanged((a, b) => a.height === b.height && a.padding === b.padding),\n\t\t\ttap(({ height, padding }) => this.applyHeight(height, padding)),\n\t\t\ttakeUntil(this.heightDisconnecting$)\n\t\t).subscribe()\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\t// Auto-assign semantic elements to slots\n\t\tthis.querySelectorAll(':scope > header').forEach(el => el.setAttribute('slot', 'header'))\n\t\tthis.querySelectorAll(':scope > footer').forEach(el => el.setAttribute('slot', 'footer'))\n\t\t// Setup fullHeight on host\n\t\tthis.setupHeightStream()\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.heightDisconnecting$.next()\n\t}\n\n\tprotected render() {\n\t\treturn html`\n\t\t\t<section\n\t\t\t\tclass=${this.classMap({\n\t\t\t\t\t'grid overflow-hidden h-full': true,\n\t\t\t\t\t'select-none': this.noSelect,\n\t\t\t\t})}\n\t\t\t\tstyle=\"grid-template-rows: ${this.rows.replace(/_/g, ' ')}\"\n\t\t\t>\n\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t<schmancy-scroll ?hide=${!this.showScrollbar}><slot></slot></schmancy-scroll>\n\t\t\t\t<schmancy-scroll ?hide=${!this.showScrollbar}>\n\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t</schmancy-scroll>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-page': SchmancyPage\n\t}\n}\n"],"mappings":";;;;;;;;;;AAuBO,IAAA,IAAA,cAA2B,EAAY,CAAG;;;;;;;;;;2BAWzC,iBAAA,KAAA,gBAAA,CAGS,GAAA,KAAA,WAAA,CAGL,GAAA,KAAA,uBAEoB,IAAI,GAAA;;CAEnC,kBAAA;EACC,IAAM,IAAiB,OAAO,gBAAgB,UAAU,OAAO,aACzD,IAAY,KAAK,uBAAA,CAAwB;AAC/C,SAAO,KAAK,IAAI,GAAG,IAAiB,EAAA;;CAGrC,YAAoB,GAAgB,GAAA;AACnC,OAAK,MAAM,SAAS,GAAG,EAAA,KACvB,KAAK,MAAM,gBAAgB,GAAG,EAAA;;CAG/B,oBAAA;EAEC,IAAM,IAAgB,EAAU,QAAQ,UAAU,EAAE,SAAA,CAAS,GAAA,CAAA,EAYvD,IAAgB,EAAM,GAXJ,OAAO,iBAC5B,EACA,EAAU,OAAO,gBAAgB,UAAU,EAAE,SAAA,CAAS,GAAA,CAAA,EACtD,EAAU,OAAO,gBAAgB,UAAU,EAAE,SAAA,CAAS,GAAA,CAAA,CAAA,GAEtD,GACkB,EAAU,QAAQ,oBAAA,EACrB,EAAU,UAAU,YAAY,EAAE,SAAA,CAAS,GAAA,CAAA,CAAQ,KACpE,QAAgB,EAAM,IAAA,CAAA,CAAA,CAAA,CAG8D,KACpF,EAAa,GAAA,CAAA;AASd,IAAc;GACb,EANqB,KAAK,gBACxB,EAAmB,KAAK,cAAA,GACxB,GAImB,EAAA,CAAe,KAAK,EAAU,KAAA,CAAA;GACnD,EAAM;GACN,EAAM;GAAA,CAAA,CACJ,KACF,GAAA,GAAQ,GAAc,QAAA;GACrB,QAAQ,KAAK,iBAAA;GACb,SAAS,IAAe,IAAI;GAAA,EAAA,EAE7B,GAAsB,GAAG,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,QAAA,EACxE,GAAA,EAAO,QAAA,GAAQ,SAAA,QAAc,KAAK,YAAY,GAAQ,EAAA,CAAA,EACtD,EAAU,KAAK,qBAAA,CAAA,CACd,WAAA;;CAGH,oBAAA;AACC,QAAM,mBAAA,EAEN,KAAK,iBAAiB,kBAAA,CAAmB,SAAQ,MAAM,EAAG,aAAa,QAAQ,SAAA,CAAA,EAC/E,KAAK,iBAAiB,kBAAA,CAAmB,SAAQ,MAAM,EAAG,aAAa,QAAQ,SAAA,CAAA,EAE/E,KAAK,mBAAA;;CAGN,uBAAA;AACC,QAAM,sBAAA,EACN,KAAK,qBAAqB,MAAA;;CAG3B,SAAA;AACC,SAAO,CAAI;;YAED,KAAK,SAAS;GACrB,+BAAA,CAA+B;GAC/B,eAAe,KAAK;GAAA,CAAA,CAAA;iCAEQ,KAAK,KAAK,QAAQ,MAAM,IAAA,CAAA;;;8BAG3B,KAAK,cAAA;8BACL,KAAK,cAAA;;;;;;;GAtFjC,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAG1B,EAAS;CAAE,MAAM;CAAS,WAAW;CAAA,CAAA,CAAA,EAAmB,EAAA,WAAA,iBAAA,KAAA,EAAA,EAAA,EAAA,CAGxD,EAAS;CAAE,MAAM;CAAS,WAAW;CAAA,CAAA,CAAA,EAAc,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAjBpD,EAAc,gBAAA,CAAA,EAAgB,EAAA;AAAA,SAAA,KAAA"}

package/dist/scroll-CdmXRXh2.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-CdmXRXh2.js","names":[],"sources":["../src/layout/scroll/scroll.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { debounceTime, filter, fromEvent, takeUntil } from 'rxjs'\n\n/**\n * Custom scroll event interface for the SchmancyScroll component.\n * Contains detailed information about the scroll state.\n */\nexport interface SchmancyScrollEvent\n\textends CustomEvent<{\n\t\t/** Current scroll position from the top */\n\t\tscrollTop: number\n\t\t/** Total scrollable height of the content */\n\t\tscrollHeight: number\n\t\t/** Visible height of the container */\n\t\tclientHeight: number\n\t\t/** Original scroll event */\n\t\te: Event\n\t\t/** Current scroll position from the left (for horizontal scrolling) */\n\t\tscrollLeft?: number\n\t\t/** Total scrollable width of the content (for horizontal scrolling) */\n\t\tscrollWidth?: number\n\t\t/** Visible width of the container (for horizontal scrolling) */\n\t\tclientWidth?: number\n\t}> {}\n\n/**\n * Command event interface for controlling SchmancyScroll components\n */\nexport interface SchmancyScrollCommandEvent\n\textends CustomEvent<{\n\t\t/** Target component name */\n\t\tname: string\n\t\t/** Command action to perform */\n\t\taction: 'scrollTo'\n\t\t/** Scroll position for scrollTo action */\n\t\ttop: number\n\t\t/** Horizontal scroll position for scrollTo action (optional) */\n\t\tleft?: number\n\t}> {}\n\n// Augment the HTMLElementEventMap to include our custom events\ndeclare global {\n\tinterface HTMLElementEventMap {\n\t\tscroll: SchmancyScrollEvent\n\t\t'schmancy-scroll-command': SchmancyScrollCommandEvent\n\t}\n}\n\n/**\n * A custom scrollable container with enhanced features.\n *\n * @fires {SchmancyScrollEvent} scroll - Fired when scrolling occurs (with a configurable debounce)\n * @slot - Default slot for content to be scrolled\n * @csspart scroller - The inner scrollable div element\n *\n * @example\n * ```html\n * <schmancy-scroll hide name=\"main-content\">\n *   <div>Scrollable content goes here</div>\n * </schmancy-scroll>\n * ```\n *\n * @example\n * ```html\n * <schmancy-scroll direction=\"horizontal\" hide name=\"image-carousel\">\n *   <div class=\"flex\">\n *     <img src=\"image1.jpg\" alt=\"Image 1\">\n *     <img src=\"image2.jpg\" alt=\"Image 2\">\n *   </div>\n * </schmancy-scroll>\n * ```\n *\n * @example Programmatic scroll with Lit ref\n * ```typescript\n * private scrollRef = createRef<HTMLElement>()\n *\n * // In template:\n * html`<schmancy-scroll ${ref(this.scrollRef)}>...</schmancy-scroll>`\n *\n * // Scroll to top (smooth — host has scroll-behavior: smooth):\n * this.scrollRef.value?.scrollTo({ top: 0 })\n * ```\n */\n@customElement('schmancy-scroll')\nexport class SchmancyScroll extends TailwindElement(css`\n\t:host {\n\t\t/* Flexible sizing for different layout contexts */\n\t\twidth: 100%;\n\t\tmin-height: 0; /* Allow flex shrinking */\n\t\tflex: 1; /* Grow in flex containers */\n\t\tbox-sizing: border-box; /* Ensures proper sizing */\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tscroll-behavior: smooth;\n\t\toverscroll-behavior-x: contain;\n\t\toverscroll-behavior-y: auto;\n\t}\n\t/* Fallback for non-flex contexts */\n\t:host(.explicit-height) {\n\t\theight: 100%;\n\t\tflex: none;\n\t}\n\t:host([hide]) {\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n\t:host([hide])::-webkit-scrollbar {\n\t\tdisplay: none; /* Chrome, Safari, and Opera */\n\t}\n`) {\n\t/**\n\t * Determines whether the scrollbar is hidden.\n\t *\n\t * When `hide` is true, the host element's scrollbars are hidden\n\t * in supported browsers using CSS.\n\t *\n\t * @attr hide\n\t * @example <schmancy-scroll hide></schmancy-scroll>\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tpublic hide = false\n\n\t/**\n\t * Optional name identifier for the component.\n\t * Used for targeting this specific component with global events.\n\t *\n\t * @attr name\n\t * @example <schmancy-scroll name=\"main-content\"></schmancy-scroll>\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic name?: string\n\n\t/**\n\t * Direction of scrolling: vertical, horizontal, or both.\n\t * - vertical: Only allows vertical scrolling\n\t * - horizontal: Only allows horizontal scrolling\n\t * - both: Allows both horizontal and vertical scrolling (default)\n\t *\n\t * @attr direction\n\t * @example <schmancy-scroll direction=\"horizontal\"></schmancy-scroll>\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic direction: 'vertical' | 'horizontal' | 'both' = 'both'\n\n\t/**\n\t * Reference to the scrollable element (the host element itself)\n\t * @public\n\t */\n\tget scroller(): HTMLElement {\n\t\treturn this\n\t}\n\n\t/**\n\t * Debounce time in milliseconds for the scroll event.\n\t * Higher values reduce the frequency of scroll events being dispatched.\n\t *\n\t * @attr debounce\n\t * @example <schmancy-scroll debounce=\"50\"></schmancy-scroll>\n\t */\n\t@property({ type: Number })\n\tpublic debounce = 10\n\n\t/**\n\t * Scrolls the container to the specified position\n\t * @param options - ScrollToOptions or a number representing the top position\n\t * @param top - For backward compatibility, if options is a number, this is treated as \"behavior\"\n\t */\n\tpublic override scrollTo(options?: ScrollToOptions | number, top?: number): void {\n\t\tif (typeof options === 'number') {\n\t\t\tsuper.scrollTo({ top: options, behavior: top ? 'smooth' : 'auto' })\n\t\t} else if (options) {\n\t\t\tsuper.scrollTo(options)\n\t\t} else {\n\t\t\tsuper.scrollTo({ top: 0, left: 0, behavior: 'auto' })\n\t\t}\n\t}\n\n\t/**\n\t * Scrolls the container horizontally to the specified position\n\t * @param left - The horizontal position to scroll to (in pixels)\n\t * @param behavior - The scroll behavior ('auto' or 'smooth')\n\t */\n\tpublic scrollToLeft(left: number, behavior: ScrollBehavior = 'auto'): void {\n\t\tsuper.scrollTo({ left, behavior })\n\t}\n\n\t/**\n\t * Called when the component is connected to the DOM\n\t * Applies scrolling styles directly to the host element\n\t * @protected\n\t */\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.updateScrollingStyles()\n\t\tthis.updateLayoutContext()\n\t\t// Set the part attribute on the host element\n\t\tthis.setAttribute('part', 'scroller')\n\t}\n\n\t/**\n\t * Updates the overflow styles based on the direction property\n\t * @private\n\t */\n\tprivate updateScrollingStyles(): void {\n\t\t// Apply overflow styles based on direction\n\t\tif (this.direction === 'horizontal') {\n\t\t\tthis.style.setProperty('overflow-y', 'hidden')\n\t\t\tthis.style.setProperty('overflow-x', 'auto')\n\t\t} else if (this.direction === 'vertical') {\n\t\t\tthis.style.setProperty('overflow-y', 'auto')\n\t\t\tthis.style.setProperty('overflow-x', 'hidden')\n\t\t} else {\n\t\t\t// both\n\t\t\tthis.style.setProperty('overflow-y', 'auto')\n\t\t\tthis.style.setProperty('overflow-x', 'auto')\n\t\t}\n\t}\n\n\t/**\n\t * Updates the layout context based on parent container type\n\t * @private\n\t */\n\tprivate updateLayoutContext(): void {\n\t\t// Use requestAnimationFrame to ensure DOM is fully rendered\n\t\trequestAnimationFrame(() => {\n\t\t\t// Check if parent is a flex container\n\t\t\tconst parent = this.parentElement\n\t\t\tif (parent) {\n\t\t\t\tconst parentStyles = getComputedStyle(parent)\n\t\t\t\tconst isFlexParent = parentStyles.display === 'flex' || parentStyles.display === 'inline-flex'\n\n\t\t\t\t// For debugging - remove in production\n\t\t\t\tconsole.debug('schmancy-scroll parent detection:', {\n\t\t\t\t\tparent: parent.tagName,\n\t\t\t\t\tdisplay: parentStyles.display,\n\t\t\t\t\tisFlexParent,\n\t\t\t\t})\n\n\t\t\t\t// Apply appropriate class based on parent layout\n\t\t\t\tif (isFlexParent) {\n\t\t\t\t\tthis.classList.remove('explicit-height')\n\t\t\t\t} else {\n\t\t\t\t\tthis.classList.add('explicit-height')\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// Default to explicit height if no parent\n\t\t\t\tthis.classList.add('explicit-height')\n\t\t\t}\n\t\t})\n\t}\n\n\t/**\n\t * Called when properties change\n\t * @protected\n\t */\n\tprotected updated(changedProperties: Map<string | number | symbol, unknown>): void {\n\t\tsuper.updated(changedProperties)\n\t\t// Update styles if direction changes\n\t\tif (changedProperties.has('direction')) {\n\t\t\tthis.updateScrollingStyles()\n\t\t}\n\t\t// Always update layout context in case parent layout changed\n\t\tthis.updateLayoutContext()\n\t}\n\n\t/**\n\t * Called after the component's first update\n\t * Sets up the scroll event listener with debouncing\n\t * @protected\n\t */\n\tprotected firstUpdated(): void {\n\t\t// Set up scroll event listening with debounce\n\t\tfromEvent(this.scroller, 'scroll', {\n\t\t\tpassive: true,\n\t\t})\n\t\t\t.pipe(\n\t\t\t\tdebounceTime(this.debounce),\n\t\t\t\ttakeUntil(this.disconnecting), // Unsubscribe when the element is destroyed\n\t\t\t)\n\t\t\t.subscribe(e => {\n\t\t\t\t// Always include the original required properties for backward compatibility\n\t\t\t\tconst scrollTop = this.scroller.scrollTop\n\t\t\t\tconst scrollHeight = this.scroller.scrollHeight\n\t\t\t\tconst clientHeight = this.scroller.clientHeight\n\n\t\t\t\t// Include horizontal scroll information as optional properties\n\t\t\t\tconst scrollLeft = this.scroller.scrollLeft\n\t\t\t\tconst scrollWidth = this.scroller.scrollWidth\n\t\t\t\tconst clientWidth = this.scroller.clientWidth\n\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('scroll', {\n\t\t\t\t\t\tdetail: {\n\t\t\t\t\t\t\t// Original required properties first\n\t\t\t\t\t\t\tscrollTop,\n\t\t\t\t\t\t\tscrollHeight,\n\t\t\t\t\t\t\tclientHeight,\n\t\t\t\t\t\t\te,\n\t\t\t\t\t\t\t// New optional properties last\n\t\t\t\t\t\t\tscrollLeft,\n\t\t\t\t\t\t\tscrollWidth,\n\t\t\t\t\t\t\tclientWidth,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}) as SchmancyScrollEvent,\n\t\t\t\t)\n\t\t\t})\n\n\t\t// Set up global command event listener\n\t\tfromEvent<SchmancyScrollCommandEvent>(window, '@schmancy:scrollTo')\n\t\t\t.pipe(\n\t\t\t\t// Only process events targeting this component by name\n\t\t\t\tfilter(e => this.name !== undefined && e.detail.name === this.name),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(e => {\n\t\t\t\tif (e.detail.action === 'scrollTo' && typeof e.detail.top === 'number') {\n\t\t\t\t\tconst options: ScrollToOptions = {\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\ttop: e.detail.top, // Required for backward compatibility\n\t\t\t\t\t}\n\n\t\t\t\t\t// Add optional left position if provided\n\t\t\t\t\tif (typeof e.detail.left === 'number') {\n\t\t\t\t\t\toptions.left = e.detail.left\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.scrollTo(options)\n\t\t\t\t}\n\t\t\t})\n\t}\n\n\t/**\n\t * Renders the component template\n\t * @returns {TemplateResult} The template to render\n\t * @protected\n\t */\n\tprotected render() {\n\t\t// Only render the slot, all styling is applied to the host\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-scroll': SchmancyScroll\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"scroll-CdmXRXh2.js","names":[],"sources":["../src/layout/scroll/scroll.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { debounceTime, filter, fromEvent, takeUntil } from 'rxjs'\n\n/**\n * Custom scroll event interface for the SchmancyScroll component.\n * Contains detailed information about the scroll state.\n */\nexport interface SchmancyScrollEvent\n\textends CustomEvent<{\n\t\t/** Current scroll position from the top */\n\t\tscrollTop: number\n\t\t/** Total scrollable height of the content */\n\t\tscrollHeight: number\n\t\t/** Visible height of the container */\n\t\tclientHeight: number\n\t\t/** Original scroll event */\n\t\te: Event\n\t\t/** Current scroll position from the left (for horizontal scrolling) */\n\t\tscrollLeft?: number\n\t\t/** Total scrollable width of the content (for horizontal scrolling) */\n\t\tscrollWidth?: number\n\t\t/** Visible width of the container (for horizontal scrolling) */\n\t\tclientWidth?: number\n\t}> {}\n\n/**\n * Command event interface for controlling SchmancyScroll components\n */\nexport interface SchmancyScrollCommandEvent\n\textends CustomEvent<{\n\t\t/** Target component name */\n\t\tname: string\n\t\t/** Command action to perform */\n\t\taction: 'scrollTo'\n\t\t/** Scroll position for scrollTo action */\n\t\ttop: number\n\t\t/** Horizontal scroll position for scrollTo action (optional) */\n\t\tleft?: number\n\t}> {}\n\n// Augment the HTMLElementEventMap to include our custom events\ndeclare global {\n\tinterface HTMLElementEventMap {\n\t\tscroll: SchmancyScrollEvent\n\t\t'schmancy-scroll-command': SchmancyScrollCommandEvent\n\t}\n}\n\n/**\n * Scrollable container with debounced scroll events, horizontal/vertical direction, optional hidden scrollbar, and programmatic scrollTo via command events or refs.\n *\n * @element schmancy-scroll\n * @summary Use anywhere you'd reach for `overflow: auto` but also need debounced scroll events (for sticky headers, scroll spies, virtualization triggers) or the ability to drive scroll from elsewhere in the app by dispatching a schmancy-scroll-command event.\n * @platform div - Styled scrollable `<div>`. Degrades to a plain scrollable div if the tag never registers — loses the debounced scroll event and the command-bus integration.\n *\n * @fires {SchmancyScrollEvent} scroll - Fired when scrolling occurs (with a configurable debounce)\n * @slot - Default slot for content to be scrolled\n * @csspart scroller - The inner scrollable div element\n *\n * @example\n * ```html\n * <schmancy-scroll hide name=\"main-content\">\n *   <div>Scrollable content goes here</div>\n * </schmancy-scroll>\n * ```\n *\n * @example\n * ```html\n * <schmancy-scroll direction=\"horizontal\" hide name=\"image-carousel\">\n *   <div class=\"flex\">\n *     <img src=\"image1.jpg\" alt=\"Image 1\">\n *     <img src=\"image2.jpg\" alt=\"Image 2\">\n *   </div>\n * </schmancy-scroll>\n * ```\n *\n * @example Programmatic scroll with Lit ref\n * ```typescript\n * private scrollRef = createRef<HTMLElement>()\n *\n * // In template:\n * html`<schmancy-scroll ${ref(this.scrollRef)}>...</schmancy-scroll>`\n *\n * // Scroll to top (smooth — host has scroll-behavior: smooth):\n * this.scrollRef.value?.scrollTo({ top: 0 })\n * ```\n */\n@customElement('schmancy-scroll')\nexport class SchmancyScroll extends TailwindElement(css`\n\t:host {\n\t\t/* Flexible sizing for different layout contexts */\n\t\twidth: 100%;\n\t\tmin-height: 0; /* Allow flex shrinking */\n\t\tflex: 1; /* Grow in flex containers */\n\t\tbox-sizing: border-box; /* Ensures proper sizing */\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tscroll-behavior: smooth;\n\t\toverscroll-behavior-x: contain;\n\t\toverscroll-behavior-y: auto;\n\t}\n\t/* Fallback for non-flex contexts */\n\t:host(.explicit-height) {\n\t\theight: 100%;\n\t\tflex: none;\n\t}\n\t:host([hide]) {\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n\t:host([hide])::-webkit-scrollbar {\n\t\tdisplay: none; /* Chrome, Safari, and Opera */\n\t}\n`) {\n\t/**\n\t * Determines whether the scrollbar is hidden.\n\t *\n\t * When `hide` is true, the host element's scrollbars are hidden\n\t * in supported browsers using CSS.\n\t *\n\t * @attr hide\n\t * @example <schmancy-scroll hide></schmancy-scroll>\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tpublic hide = false\n\n\t/**\n\t * Optional name identifier for the component.\n\t * Used for targeting this specific component with global events.\n\t *\n\t * @attr name\n\t * @example <schmancy-scroll name=\"main-content\"></schmancy-scroll>\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic name?: string\n\n\t/**\n\t * Direction of scrolling: vertical, horizontal, or both.\n\t * - vertical: Only allows vertical scrolling\n\t * - horizontal: Only allows horizontal scrolling\n\t * - both: Allows both horizontal and vertical scrolling (default)\n\t *\n\t * @attr direction\n\t * @example <schmancy-scroll direction=\"horizontal\"></schmancy-scroll>\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic direction: 'vertical' | 'horizontal' | 'both' = 'both'\n\n\t/**\n\t * Reference to the scrollable element (the host element itself)\n\t * @public\n\t */\n\tget scroller(): HTMLElement {\n\t\treturn this\n\t}\n\n\t/**\n\t * Debounce time in milliseconds for the scroll event.\n\t * Higher values reduce the frequency of scroll events being dispatched.\n\t *\n\t * @attr debounce\n\t * @example <schmancy-scroll debounce=\"50\"></schmancy-scroll>\n\t */\n\t@property({ type: Number })\n\tpublic debounce = 10\n\n\t/**\n\t * Scrolls the container to the specified position\n\t * @param options - ScrollToOptions or a number representing the top position\n\t * @param top - For backward compatibility, if options is a number, this is treated as \"behavior\"\n\t */\n\tpublic override scrollTo(options?: ScrollToOptions | number, top?: number): void {\n\t\tif (typeof options === 'number') {\n\t\t\tsuper.scrollTo({ top: options, behavior: top ? 'smooth' : 'auto' })\n\t\t} else if (options) {\n\t\t\tsuper.scrollTo(options)\n\t\t} else {\n\t\t\tsuper.scrollTo({ top: 0, left: 0, behavior: 'auto' })\n\t\t}\n\t}\n\n\t/**\n\t * Scrolls the container horizontally to the specified position\n\t * @param left - The horizontal position to scroll to (in pixels)\n\t * @param behavior - The scroll behavior ('auto' or 'smooth')\n\t */\n\tpublic scrollToLeft(left: number, behavior: ScrollBehavior = 'auto'): void {\n\t\tsuper.scrollTo({ left, behavior })\n\t}\n\n\t/**\n\t * Called when the component is connected to the DOM\n\t * Applies scrolling styles directly to the host element\n\t * @protected\n\t */\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.updateScrollingStyles()\n\t\tthis.updateLayoutContext()\n\t\t// Set the part attribute on the host element\n\t\tthis.setAttribute('part', 'scroller')\n\t}\n\n\t/**\n\t * Updates the overflow styles based on the direction property\n\t * @private\n\t */\n\tprivate updateScrollingStyles(): void {\n\t\t// Apply overflow styles based on direction\n\t\tif (this.direction === 'horizontal') {\n\t\t\tthis.style.setProperty('overflow-y', 'hidden')\n\t\t\tthis.style.setProperty('overflow-x', 'auto')\n\t\t} else if (this.direction === 'vertical') {\n\t\t\tthis.style.setProperty('overflow-y', 'auto')\n\t\t\tthis.style.setProperty('overflow-x', 'hidden')\n\t\t} else {\n\t\t\t// both\n\t\t\tthis.style.setProperty('overflow-y', 'auto')\n\t\t\tthis.style.setProperty('overflow-x', 'auto')\n\t\t}\n\t}\n\n\t/**\n\t * Updates the layout context based on parent container type\n\t * @private\n\t */\n\tprivate updateLayoutContext(): void {\n\t\t// Use requestAnimationFrame to ensure DOM is fully rendered\n\t\trequestAnimationFrame(() => {\n\t\t\t// Check if parent is a flex container\n\t\t\tconst parent = this.parentElement\n\t\t\tif (parent) {\n\t\t\t\tconst parentStyles = getComputedStyle(parent)\n\t\t\t\tconst isFlexParent = parentStyles.display === 'flex' || parentStyles.display === 'inline-flex'\n\n\t\t\t\t// For debugging - remove in production\n\t\t\t\tconsole.debug('schmancy-scroll parent detection:', {\n\t\t\t\t\tparent: parent.tagName,\n\t\t\t\t\tdisplay: parentStyles.display,\n\t\t\t\t\tisFlexParent,\n\t\t\t\t})\n\n\t\t\t\t// Apply appropriate class based on parent layout\n\t\t\t\tif (isFlexParent) {\n\t\t\t\t\tthis.classList.remove('explicit-height')\n\t\t\t\t} else {\n\t\t\t\t\tthis.classList.add('explicit-height')\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// Default to explicit height if no parent\n\t\t\t\tthis.classList.add('explicit-height')\n\t\t\t}\n\t\t})\n\t}\n\n\t/**\n\t * Called when properties change\n\t * @protected\n\t */\n\tprotected updated(changedProperties: Map<string | number | symbol, unknown>): void {\n\t\tsuper.updated(changedProperties)\n\t\t// Update styles if direction changes\n\t\tif (changedProperties.has('direction')) {\n\t\t\tthis.updateScrollingStyles()\n\t\t}\n\t\t// Always update layout context in case parent layout changed\n\t\tthis.updateLayoutContext()\n\t}\n\n\t/**\n\t * Called after the component's first update\n\t * Sets up the scroll event listener with debouncing\n\t * @protected\n\t */\n\tprotected firstUpdated(): void {\n\t\t// Set up scroll event listening with debounce\n\t\tfromEvent(this.scroller, 'scroll', {\n\t\t\tpassive: true,\n\t\t})\n\t\t\t.pipe(\n\t\t\t\tdebounceTime(this.debounce),\n\t\t\t\ttakeUntil(this.disconnecting), // Unsubscribe when the element is destroyed\n\t\t\t)\n\t\t\t.subscribe(e => {\n\t\t\t\t// Always include the original required properties for backward compatibility\n\t\t\t\tconst scrollTop = this.scroller.scrollTop\n\t\t\t\tconst scrollHeight = this.scroller.scrollHeight\n\t\t\t\tconst clientHeight = this.scroller.clientHeight\n\n\t\t\t\t// Include horizontal scroll information as optional properties\n\t\t\t\tconst scrollLeft = this.scroller.scrollLeft\n\t\t\t\tconst scrollWidth = this.scroller.scrollWidth\n\t\t\t\tconst clientWidth = this.scroller.clientWidth\n\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('scroll', {\n\t\t\t\t\t\tdetail: {\n\t\t\t\t\t\t\t// Original required properties first\n\t\t\t\t\t\t\tscrollTop,\n\t\t\t\t\t\t\tscrollHeight,\n\t\t\t\t\t\t\tclientHeight,\n\t\t\t\t\t\t\te,\n\t\t\t\t\t\t\t// New optional properties last\n\t\t\t\t\t\t\tscrollLeft,\n\t\t\t\t\t\t\tscrollWidth,\n\t\t\t\t\t\t\tclientWidth,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}) as SchmancyScrollEvent,\n\t\t\t\t)\n\t\t\t})\n\n\t\t// Set up global command event listener\n\t\tfromEvent<SchmancyScrollCommandEvent>(window, '@schmancy:scrollTo')\n\t\t\t.pipe(\n\t\t\t\t// Only process events targeting this component by name\n\t\t\t\tfilter(e => this.name !== undefined && e.detail.name === this.name),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(e => {\n\t\t\t\tif (e.detail.action === 'scrollTo' && typeof e.detail.top === 'number') {\n\t\t\t\t\tconst options: ScrollToOptions = {\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\ttop: e.detail.top, // Required for backward compatibility\n\t\t\t\t\t}\n\n\t\t\t\t\t// Add optional left position if provided\n\t\t\t\t\tif (typeof e.detail.left === 'number') {\n\t\t\t\t\t\toptions.left = e.detail.left\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.scrollTo(options)\n\t\t\t\t}\n\t\t\t})\n\t}\n\n\t/**\n\t * Renders the component template\n\t * @returns {TemplateResult} The template to render\n\t * @protected\n\t */\n\tprotected render() {\n\t\t// Only render the slot, all styling is applied to the host\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-scroll': SchmancyScroll\n\t}\n}\n"],"mappings":";;;;;;AA0FO,IAAA,IAAA,cAA6B,EAAgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAoCxC,GAAA,KAAA,YAsByC,QAAA,KAAA,WAkBrC;;CAZlB,IAAA,WAAI;AACH,SAAO;;CAkBR,SAAyB,GAAoC,GAAA;AACrC,EAAA,OAAZ,KAAY,WACtB,MAAM,SAAS;GAAE,KAAK;GAAS,UAAU,IAAM,WAAW;GAAA,CAAA,GAChD,IACV,MAAM,SAAS,EAAA,GAEf,MAAM,SAAS;GAAE,KAAK;GAAG,MAAM;GAAG,UAAU;GAAA,CAAA;;CAS9C,aAAoB,GAAc,IAA2B,QAAA;AAC5D,QAAM,SAAS;GAAE,MAAA;GAAM,UAAA;GAAA,CAAA;;CAQxB,oBAAA;AACC,QAAM,mBAAA,EACN,KAAK,uBAAA,EACL,KAAK,qBAAA,EAEL,KAAK,aAAa,QAAQ,WAAA;;CAO3B,wBAAA;AAEwB,EAAnB,KAAK,cAAc,gBACtB,KAAK,MAAM,YAAY,cAAc,SAAA,EACrC,KAAK,MAAM,YAAY,cAAc,OAAA,IAC3B,KAAK,cAAc,cAC7B,KAAK,MAAM,YAAY,cAAc,OAAA,EACrC,KAAK,MAAM,YAAY,cAAc,SAAA,KAGrC,KAAK,MAAM,YAAY,cAAc,OAAA,EACrC,KAAK,MAAM,YAAY,cAAc,OAAA;;CAQvC,sBAAA;AAEC,8BAAA;GAEC,IAAM,IAAS,KAAK;AACpB,OAAI,GAAQ;IACX,IAAM,IAAe,iBAAiB,EAAA;AACQ,IAAzB,EAAa,YAAY,UAAU,EAAa,YAAY,gBAWhF,KAAK,UAAU,OAAO,kBAAA,GAEtB,KAAK,UAAU,IAAI,kBAAA;SAIpB,MAAK,UAAU,IAAI,kBAAA;IAAA;;CAStB,QAAkB,GAAA;AACjB,QAAM,QAAQ,EAAA,EAEV,EAAkB,IAAI,YAAA,IACzB,KAAK,uBAAA,EAGN,KAAK,qBAAA;;CAQN,eAAA;AAEC,IAAU,KAAK,UAAU,UAAU,EAClC,SAAA,CAAS,GAAA,CAAA,CAER,KACA,EAAa,KAAK,SAAA,EAClB,EAAU,KAAK,cAAA,CAAA,CAEf,WAAU,MAAA;GAEV,IAAM,IAAY,KAAK,SAAS,WAC1B,IAAe,KAAK,SAAS,cAC7B,IAAe,KAAK,SAAS,cAG7B,IAAa,KAAK,SAAS,YAC3B,IAAc,KAAK,SAAS,aAC5B,IAAc,KAAK,SAAS;AAElC,QAAK,cACJ,IAAI,YAAY,UAAU;IACzB,QAAQ;KAEP,WAAA;KACA,cAAA;KACA,cAAA;KACA;KAEA,YAAA;KACA,aAAA;KACA,aAAA;KAAA;IAED,SAAA,CAAS;IACT,UAAA,CAAU;IAAA,CAAA,CAAA;IAAA,EAMd,EAAsC,QAAQ,qBAAA,CAC5C,KAEA,GAAO,MAAK,KAAK,SAAV,KAAmB,KAAa,EAAE,OAAO,SAAS,KAAK,KAAA,EAC9D,EAAU,KAAK,cAAA,CAAA,CAEf,WAAU,MAAA;AACV,OAAI,EAAE,OAAO,WAAW,cAAsC,OAAjB,EAAE,OAAO,OAAQ,UAAU;IACvE,IAAM,IAA2B;KAChC,UAAU;KACV,KAAK,EAAE,OAAO;KAAA;AAIc,IAAA,OAAlB,EAAE,OAAO,QAAS,aAC5B,EAAQ,OAAO,EAAE,OAAO,OAGzB,KAAK,SAAS,EAAA;;IAAA;;CAUlB,SAAA;AAEC,SAAO,CAAI;;;AAAA,EAAA,CA7NX,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAU1C,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAYzC,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,aAAA,KAAA,EAAA,EAAA,EAAA,CAkBzC,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CA5E3B,EAAc,kBAAA,CAAA,EAAkB,EAAA;AAAA,SAAA,KAAA"}