npm - @mhmo91/schmancy - Versions diffs - 0.5.24 → 0.5.26 - Mend

@mhmo91/schmancy 0.5.24 → 0.5.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (341) hide show

package/dist/{navigation-rail-B8P5mauT.cjs.map → navigation-rail-DpffIkNR.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-rail-B8P5mauT.cjs","sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\r\nimport { css, html, PropertyValues } from 'lit'\r\nimport { customElement, property, state } from 'lit/decorators.js'\r\nimport { when } from 'lit/directives/when.js'\r\nimport { BehaviorSubject, fromEvent, merge, takeUntil } from 'rxjs'\r\nimport { tap, delay, distinctUntilChanged } from 'rxjs/operators'\r\n\r\nexport type NavigationRailItemClickEvent = CustomEvent<{\r\n\ticon: string\r\n\tlabel: string\r\n\tvalue: string\r\n\tactive: boolean\r\n}>\r\n\r\n/*\r\n Material Design 3 Navigation Rail Item Component\r\n * @see https://m3.material.io/components/navigation-rail/overview\r\n \r\n `<schmancy-navigation-rail-item>` component\r\n \r\n Individual navigation item for use within a navigation rail.\r\n * Represents a single destination or action with an icon and optional label.\r\n \r\n @element schmancy-navigation-rail-item\r\n * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)\r\n * @slot - Default slot for custom content\r\n * @slot badge - Custom badge content\r\n \r\n @fires navigate - When the item is clicked\r\n \r\n @csspart container - The main item container\r\n * @csspart indicator - The active indicator\r\n * @csspart icon - The icon container\r\n * @csspart label - The label text\r\n * @csspart badge - The badge element\r\n \r\n @example\r\n * <schmancy-navigation-rail-item\r\n * icon=\"home\"\r\n * label=\"Home\"\r\n * value=\"/home\"\r\n * badge=\"3\"\r\n * active>\r\n * </schmancy-navigation-rail-item>\r\n \r\n @example\r\n * <!-- Using 'selected' alias -->\r\n * <schmancy-navigation-rail-item\r\n * icon=\"settings\"\r\n * label=\"Settings\"\r\n * value=\"/settings\"\r\n * selected>\r\n * </schmancy-navigation-rail-item>\r\n \r\n @example\r\n * <!-- With custom icon -->\r\n * <schmancy-navigation-rail-item label=\"Dashboard\">\r\n * <schmancy-icon slot=\"icon\">dashboard</schmancy-icon>\r\n * </schmancy-navigation-rail-item>\r\n /\r\n@customElement('schmancy-navigation-rail-item')\r\nexport class SchmancyNavigationRailItem extends $LitElement(css`\r\n\t:host {\r\n\t\tdisplay: block;\r\n\t\tposition: relative;\r\n\t\toutline: none;\r\n\t\t--rail-item-height: 56px;\r\n\t\t--rail-item-icon-size: 24px;\r\n\t\t--rail-item-show-label: block;\r\n\t}\r\n\r\n\t.container {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tmin-height: var(--rail-item-height);\r\n\t\twidth: 100%;\r\n\t\tborder-radius: 16px;\r\n\t\tcursor: pointer;\r\n\t\tposition: relative;\r\n\t\tbox-sizing: border-box;\r\n\t\tcolor: var(--schmancy-sys-color-surface-onVariant);\r\n\t\tuser-select: none;\r\n\t\ttransition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n\t\tpadding: 12px 0;\r\n\t\tgap: 4px;\r\n\t}\r\n\r\n\t/ Hover state /\r\n\t.container:hover {\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\r\n\t}\r\n\r\n\t/ Focus state /\r\n\t:host(:focus-visible) .container {\r\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default);\r\n\t\toutline-offset: 2px;\r\n\t}\r\n\r\n\t/ Active indicator - positioned behind icon only /\r\n\t.icon-container {\r\n\t\tposition: relative;\r\n\t}\r\n\r\n\t.indicator {\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tleft: 50%;\r\n\t\ttransform: translate(-50%, -50%) scale(0);\r\n\t\twidth: 56px;\r\n\t\theight: 32px;\r\n\t\tborder-radius: 16px;\r\n\t\tbackground-color: var(--schmancy-sys-color-secondary-container);\r\n\t\ttransition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n\t\tz-index: 0;\r\n\t}\r\n\r\n\t:host([active]) .indicator,\r\n\t:host([selected]) .indicator {\r\n\t\ttransform: translate(-50%, -50%) scale(1);\r\n\t}\r\n\r\n\t:host([active]) .container,\r\n\t:host([selected]) .container {\r\n\t\tcolor: var(--schmancy-sys-color-secondary-onContainer);\r\n\t}\r\n\r\n\r\n\t/ Icon styles /\r\n\t.icon-container {\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\twidth: auto;\r\n\t\tmin-width: 56px;\r\n\t\theight: 32px;\r\n\t\tflex-shrink: 0;\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n\t}\r\n\r\n\t.icon {\r\n\t\tfont-family: 'Material Symbols Outlined';\r\n\t\tfont-size: var(--rail-item-icon-size);\r\n\t\tline-height: 1;\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n\t\tfont-variation-settings:\r\n\t\t\t'FILL' 0,\r\n\t\t\t'wght' 400,\r\n\t\t\t'GRAD' 0,\r\n\t\t\t'opsz' 24;\r\n\t}\r\n\r\n\t:host([active]) .icon,\r\n\t:host([selected]) .icon {\r\n\t\tfont-variation-settings:\r\n\t\t\t'FILL' 1,\r\n\t\t\t'wght' 400,\r\n\t\t\t'GRAD' 0,\r\n\t\t\t'opsz' 24;\r\n\t}\r\n\r\n\t/ Label styles /\r\n\t.label {\r\n\t\tfont-size: 12px;\r\n\t\tfont-weight: 500;\r\n\t\tline-height: 16px;\r\n\t\ttext-align: center;\r\n\t\toverflow: hidden;\r\n\t\ttext-overflow: ellipsis;\r\n\t\twhite-space: nowrap;\r\n\t\tz-index: 1;\r\n\t\tdisplay: var(--rail-item-show-label, block);\r\n\t\tmax-width: 56px;\r\n\t\tpadding: 0 4px;\r\n\t}\r\n\r\n\r\n\t/ Badge styles /\r\n\t.badge {\r\n\t\tposition: absolute;\r\n\t\ttop: 8px;\r\n\t\tright: 12px;\r\n\t\tmin-width: 16px;\r\n\t\theight: 16px;\r\n\t\tborder-radius: 8px;\r\n\t\tbackground-color: var(--schmancy-sys-color-error-default);\r\n\t\tcolor: var(--schmancy-sys-color-error-on);\r\n\t\tfont-size: 11px;\r\n\t\tfont-weight: 600;\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tpadding: 0 4px;\r\n\t\tbox-sizing: border-box;\r\n\t\tz-index: 2;\r\n\t\tanimation: badge-pulse 2s infinite;\r\n\t}\r\n\r\n\t@keyframes badge-pulse {\r\n\t\t0%, 100% { transform: scale(1); }\r\n\t\t50% { transform: scale(1.1); }\r\n\t}\r\n\r\n\t/ Nested items (for sub-navigation) /\r\n\t:host([nested]) {\r\n\t\t--rail-item-height: 48px;\r\n\t\t--rail-item-icon-size: 20px;\r\n\t}\r\n\r\n\t:host([nested]) .container {\r\n\t\tpadding-left: 32px;\r\n\t}\r\n\r\n\t/ Disabled state /\r\n\t:host([disabled]) {\r\n\t\tpointer-events: none;\r\n\t\topacity: 0.38;\r\n\t}\r\n\r\n\t/ Ripple effect /\r\n\t.ripple {\r\n\t\tposition: absolute;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\tright: 0;\r\n\t\tbottom: 0;\r\n\t\tborder-radius: inherit;\r\n\t\toverflow: hidden;\r\n\t\tz-index: 0;\r\n\t}\r\n\r\n\t.ripple::before {\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tleft: 50%;\r\n\t\twidth: 0;\r\n\t\theight: 0;\r\n\t\tborder-radius: 50%;\r\n\t\tbackground: currentColor;\r\n\t\topacity: 0;\r\n\t\ttransform: translate(-50%, -50%);\r\n\t\ttransition: width 0.6s, height 0.6s, opacity 0.6s;\r\n\t}\r\n\r\n\t:host(:active) .ripple::before {\r\n\t\twidth: 200%;\r\n\t\theight: 200%;\r\n\t\topacity: 0.12;\r\n\t}\r\n\r\n\t/ Tooltip styles (shown via title attribute) /\r\n\t:host([title]:hover)::after {\r\n\t\tcontent: attr(title);\r\n\t\tposition: absolute;\r\n\t\tleft: calc(100% + 8px);\r\n\t\ttop: 50%;\r\n\t\ttransform: translateY(-50%);\r\n\t\tbackground: var(--schmancy-sys-color-inverseSurface);\r\n\t\tcolor: var(--schmancy-sys-color-inverseOnSurface);\r\n\t\tpadding: 4px 8px;\r\n\t\tborder-radius: 4px;\r\n\t\tfont-size: 12px;\r\n\t\twhite-space: nowrap;\r\n\t\tz-index: 1000;\r\n\t\tpointer-events: none;\r\n\t\tanimation: tooltip-fade-in 0.2s ease;\r\n\t}\r\n\r\n\t@keyframes tooltip-fade-in {\r\n\t\tfrom {\r\n\t\t\topacity: 0;\r\n\t\t\ttransform: translateY(-50%) translateX(-4px);\r\n\t\t}\r\n\t\tto {\r\n\t\t\topacity: 1;\r\n\t\t\ttransform: translateY(-50%) translateX(0);\r\n\t\t}\r\n\t}\r\n\r\n\t/ Group item styles /\r\n\t:host([group]) {\r\n\t\tmargin-bottom: 8px;\r\n\t}\r\n\r\n\t:host([group])::after {\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\tbottom: -4px;\r\n\t\tleft: 12px;\r\n\t\tright: 12px;\r\n\t\theight: 1px;\r\n\t\tbackground: var(--schmancy-sys-color-outlineVariant);\r\n\t\topacity: 0.12;\r\n\t}\r\n`) {\r\n\t// Observable state\r\n\tprivate hovering$ = new BehaviorSubject<boolean>(false)\r\n\tprivate pressing$ = new BehaviorSubject<boolean>(false)\r\n\tprivate active$ = new BehaviorSubject<boolean>(false)\r\n\r\n\t// Properties\r\n\t/\r\n\t Icon name (Material Symbols icon)\r\n\t /\r\n\t@property({ type: String })\r\n\ticon = ''\r\n\r\n\t/\r\n\t Label text for the navigation item\r\n\t /\r\n\t@property({ type: String })\r\n\tlabel = ''\r\n\r\n\t/\r\n\t Value associated with this item (useful for routing)\r\n\t /\r\n\t@property({ type: String })\r\n\tvalue = ''\r\n\r\n\t/\r\n\t Whether this item is currently active/selected\r\n\t * @default false\r\n\t /\r\n\t@property({ type: Boolean, reflect: true })\r\n\tget active() { return this.active$.value }\r\n\tset active(value: boolean) {\r\n\t\tthis.active$.next(value)\r\n\t}\r\n\r\n\t/\r\n\t Whether this item is currently selected (alias for active)\r\n\t * @default false\r\n\t /\r\n\t@property({ type: Boolean, reflect: true })\r\n\tget selected() { return this.active }\r\n\tset selected(value: boolean) { this.active = value }\r\n\r\n\t/\r\n\t Badge text or number to display\r\n\t /\r\n\t@property({ type: String })\r\n\tbadge = ''\r\n\r\n\t/\r\n\t Badge variant\r\n\t /\r\n\t@property({ type: String })\r\n\tbadgeVariant: 'error' \| 'primary' \| 'secondary' = 'error'\r\n\r\n\t/\r\n\t Whether to show the label (controlled by parent rail)\r\n\t * @default false\r\n\t /\r\n\t@property({ type: Boolean, attribute: 'show-label' })\r\n\tshowLabel = false\r\n\r\n\t/\r\n\t Whether this item is disabled\r\n\t * @default false\r\n\t /\r\n\t@property({ type: Boolean, reflect: true })\r\n\tdisabled = false\r\n\r\n\t/\r\n\t Whether this is a nested item (sub-navigation)\r\n\t * @default false\r\n\t /\r\n\t@property({ type: Boolean, reflect: true })\r\n\tnested = false\r\n\r\n\t/\r\n\t Whether this item represents a group separator\r\n\t * @default false\r\n\t /\r\n\t@property({ type: Boolean, reflect: true })\r\n\tgroup = false\r\n\r\n\t// State\r\n\t@state()\r\n\tprivate showRipple = false\r\n\r\n\r\n\tconnectedCallback() {\r\n\t\tsuper.connectedCallback()\r\n\r\n\t\t// Set up hover tracking\r\n\t\tmerge(\r\n\t\t\tfromEvent(this, 'mouseenter').pipe(tap(() => this.hovering$.next(true))),\r\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.hovering$.next(false)))\r\n\t\t).pipe(takeUntil(this.disconnecting)).subscribe()\r\n\r\n\t\t// Set up press tracking\r\n\t\tmerge(\r\n\t\t\tfromEvent(this, 'mousedown').pipe(tap(() => this.pressing$.next(true))),\r\n\t\t\tfromEvent(this, 'mouseup').pipe(tap(() => this.pressing$.next(false))),\r\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.pressing$.next(false)))\r\n\t\t).pipe(takeUntil(this.disconnecting)).subscribe()\r\n\r\n\r\n\t\t// Ripple effect\r\n\t\tthis.pressing$.pipe(\r\n\t\t\ttap(pressing => {\r\n\t\t\t\tif (pressing && !this.disabled) {\r\n\t\t\t\t\tthis.showRipple = true\r\n\t\t\t\t}\r\n\t\t\t}),\r\n\t\t\tdelay(600),\r\n\t\t\ttap(() => this.showRipple = false),\r\n\t\t\ttakeUntil(this.disconnecting)\r\n\t\t).subscribe()\r\n\r\n\t\t// Subscribe to active state changes for reactive updates\r\n\t\tthis.active$.pipe(\r\n\t\t\tdistinctUntilChanged(),\r\n\t\t\ttap((isActive) => {\r\n\t\t\t\tthis.requestUpdate()\r\n\t\t\t\t// Update ARIA attributes reactively\r\n\t\t\t\tthis.setAttribute('aria-selected', String(isActive))\r\n\t\t\t\tthis.setAttribute('tabindex', isActive ? '0' : '-1')\r\n\t\t\t}),\r\n\t\t\ttakeUntil(this.disconnecting)\r\n\t\t).subscribe()\r\n\r\n\t\t// Set ARIA attributes\r\n\t\tthis.setAttribute('role', 'listitem')\r\n\t\tif (!this.hasAttribute('tabindex')) {\r\n\t\t\tthis.setAttribute('tabindex', this.active ? '0' : '-1')\r\n\t\t}\r\n\t}\r\n\r\n\tupdated(changedProperties: PropertyValues) {\r\n\t\tsuper.updated(changedProperties)\r\n\r\n\t\t// Active state is now handled by the BehaviorSubject subscription\r\n\t\t// So we don't need to duplicate it here\r\n\r\n\t\tif (changedProperties.has('disabled')) {\r\n\t\t\tthis.setAttribute('aria-disabled', String(this.disabled))\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('label')) {\r\n\t\t\tthis.setAttribute('aria-label', this.label)\r\n\t\t}\r\n\t}\r\n\r\n\t/\r\n\t Handle click events\r\n\t /\r\n\tprivate handleClick(event: Event) {\r\n\t\tif (this.disabled) {\r\n\t\t\tevent.preventDefault()\r\n\t\t\tevent.stopPropagation()\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\t// Emit navigate event with the value\r\n\t\tthis.dispatchEvent(new CustomEvent('navigate', {\r\n\t\t\tdetail: this.value \|\| this.label,\r\n\t\t\tbubbles: true,\r\n\t\t\tcomposed: true\r\n\t\t}))\r\n\r\n\t\t// Visual feedback is handled by the ripple effect in connectedCallback\r\n\t\t// The parent rail will confirm and update via activeIndex\r\n\t}\r\n\r\n\t/\r\n\t Handle keyboard events\r\n\t /\r\n\tprivate handleKeyDown(event: KeyboardEvent) {\r\n\t\tif (this.disabled) return\r\n\r\n\t\tif (event.key === 'Enter' \|\| event.key === ' ') {\r\n\t\t\tevent.preventDefault()\r\n\t\t\tthis.click()\r\n\t\t}\r\n\t}\r\n\r\n\tprotected render() {\r\n\t\tconst hasCustomIcon = this.querySelector('[slot=\"icon\"]')\r\n\t\tconst hasCustomContent = this.querySelector(':not([slot])')\r\n\t\tconst hasCustomBadge = this.querySelector('[slot=\"badge\"]')\r\n\r\n\t\tconst containerClasses = {\r\n\t\t\tcontainer: true,\r\n\t\t\trippling: this.showRipple\r\n\t\t}\r\n\r\n\t\tconst badgeStyles = {\r\n\t\t\t'background-color': `var(--schmancy-sys-color-${this.badgeVariant}-default)`,\r\n\t\t\t'color': `var(--schmancy-sys-color-${this.badgeVariant}-on)`\r\n\t\t}\r\n\r\n\t\treturn html`\r\n\t\t\t<div\r\n\t\t\t\tclass=${this.classMap(containerClasses)}\r\n\t\t\t\tpart=\"container\"\r\n\t\t\t\t@click=${this.handleClick}\r\n\t\t\t\t@keydown=${this.handleKeyDown}\r\n\t\t\t>\r\n\t\t\t\t<span class=\"ripple\" aria-hidden=\"true\"></span>\r\n\r\n\t\t\t\t${when(hasCustomContent,\r\n\t\t\t\t\t() => html`<slot></slot>`,\r\n\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t<div class=\"icon-container\" part=\"icon\">\r\n\t\t\t\t\t\t\t<span class=\"indicator\" part=\"indicator\" aria-hidden=\"true\"></span>\r\n\t\t\t\t\t\t\t${when(hasCustomIcon,\r\n\t\t\t\t\t\t\t\t() => html`<slot name=\"icon\"></slot>`,\r\n\t\t\t\t\t\t\t\t() => when(this.icon,\r\n\t\t\t\t\t\t\t\t\t() => html`<span class=\"icon\">${this.icon}</span>`\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t${when(this.label,\r\n\t\t\t\t\t\t\t() => html`<span class=\"label\" part=\"label\">${this.label}</span>`\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t`\r\n\t\t\t\t)}\r\n\r\n\t\t\t\t${when(this.badge,\r\n\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t${when(hasCustomBadge,\r\n\t\t\t\t\t\t\t() => html`<slot name=\"badge\"></slot>`,\r\n\t\t\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\t\tclass=\"badge\"\r\n\t\t\t\t\t\t\t\t\tpart=\"badge\"\r\n\t\t\t\t\t\t\t\t\tstyle=${this.styleMap(badgeStyles)}\r\n\t\t\t\t\t\t\t\t\taria-label=\"${this.badge} notifications\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t${this.badge}\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t`\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t`\r\n\t\t\t\t)}\r\n\t\t\t</div>\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-item': SchmancyNavigationRailItem\r\n\t}\r\n}","import { $LitElement } from '@mixins/index'\r\nimport { css, html, PropertyValues } from 'lit'\r\nimport { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'\r\nimport { BehaviorSubject, 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\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 \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(css`\r\n\t:host {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\twidth: 80px;\r\n\t\theight: 100%;\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-container);\r\n\t\tcolor: var(--schmancy-sys-color-surface-on);\r\n\t\tbox-sizing: border-box;\r\n\t\tposition: relative;\r\n\t\toverflow: visible;\r\n\t}\r\n\r\n\t/ Rail container /\r\n\t.rail {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\theight: 100%;\r\n\t\tpadding: 8px 12px;\r\n\t\tgap: 4px;\r\n\t\tbox-sizing: border-box;\r\n\t}\r\n\r\n\t/ Header section /\r\n\t.header {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tgap: 4px;\r\n\t\tmargin-bottom: 8px;\r\n\t}\r\n\r\n\t/ Navigation container /\r\n\t.nav {\r\n\t\tflex: 1;\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\tgap: 4px;\r\n\t\toverflow-y: auto;\r\n\t\toverflow-x: hidden;\r\n\t\tscrollbar-width: thin;\r\n\t\tscrollbar-color: var(--schmancy-sys-color-surface-onVariant) transparent;\r\n\t}\r\n\r\n\t.nav::-webkit-scrollbar {\r\n\t\twidth: 4px;\r\n\t}\r\n\r\n\t.nav::-webkit-scrollbar-track {\r\n\t\tbackground: transparent;\r\n\t}\r\n\r\n\t.nav::-webkit-scrollbar-thumb {\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-onVariant);\r\n\t\tborder-radius: 2px;\r\n\t\topacity: 0.5;\r\n\t}\r\n\r\n\t/ Footer section /\r\n\t.footer {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tgap: 4px;\r\n\t\tmargin-top: auto;\r\n\t\tpadding-top: 8px;\r\n\t}\r\n\r\n\t/ FAB styles /\r\n\t::slotted([slot=\"fab\"]) {\r\n\t\tmargin-bottom: 8px;\r\n\t}\r\n\r\n\t/ Menu button styles /\r\n\t::slotted([slot=\"menu\"]) {\r\n\t\tmargin-bottom: 12px;\r\n\t}\r\n\r\n\t/ Alignment variants /\r\n\t:host([alignment=\"top\"]) .nav {\r\n\t\tjustify-content: flex-start;\r\n\t}\r\n\r\n\t:host([alignment=\"center\"]) .nav {\r\n\t\tjustify-content: center;\r\n\t}\r\n\r\n\t:host([alignment=\"bottom\"]) .nav {\r\n\t\tjustify-content: flex-end;\r\n\t}\r\n\r\n\t/ Label visibility states /\r\n\t:host([label-visibility=\"none\"]) ::slotted(schmancy-navigation-rail-item) {\r\n\t\t--rail-item-show-label: none;\r\n\t}\r\n\r\n\t:host([label-visibility=\"selected\"]) ::slotted(schmancy-navigation-rail-item:not([active])) {\r\n\t\t--rail-item-show-label: none;\r\n\t}\r\n\r\n\r\n\t/ Group header styles /\r\n\t::slotted(.group-header) {\r\n\t\tpadding: 8px 12px;\r\n\t\tfont-size: 12px;\r\n\t\tfont-weight: 500;\r\n\t\tcolor: var(--schmancy-sys-color-surface-onVariant);\r\n\t\ttext-transform: uppercase;\r\n\t\tletter-spacing: 0.1em;\r\n\t\twhite-space: nowrap;\r\n\t\toverflow: hidden;\r\n\t\ttext-overflow: ellipsis;\r\n\t}\r\n\r\n\t/ Divider styles /\r\n\t::slotted(schmancy-divider) {\r\n\t\tmargin: 8px 0;\r\n\t}\r\n\r\n\t/ Responsive behavior /\r\n\t@media (max-width: 768px) {\r\n\t\t:host {\r\n\t\t\twidth: 56px;\r\n\t\t}\r\n\r\n\t\t.rail {\r\n\t\t\tpadding: 8px;\r\n\t\t}\r\n\t}\r\n`) {\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() { return this.activeIndex$.value }\r\n\tset activeIndex(value: number) { this.activeIndex$.next(value) }\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() { return this._activeValue }\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// State\r\n\t@state()\r\n\tprivate focusedIndex = -1\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(\r\n\t\t\tel => el.tagName === 'SCHMANCY-NAVIGATION-RAIL-ITEM'\r\n\t\t) 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$.pipe(\r\n\t\t\tdistinctUntilChanged(),\r\n\t\t\ttap(index => this.updateActiveStates(index)),\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\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(\r\n\t\t\titem => item.getAttribute('value') === value \|\| item.label === value\r\n\t\t)\r\n\t\tif (index >= 0) {\r\n\t\t\tthis.activeIndex = index\r\n\t\t}\r\n\t}\r\n\r\n\r\n\tprivate updateLabelVisibility() {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tconst shouldShowLabel =\r\n\t\t\t\tthis.labelVisibility === 'all' \|\|\r\n\t\t\t\t(this.labelVisibility === 'selected' && i === this.activeIndex)\r\n\r\n\t\t\titem.showLabel = shouldShowLabel\r\n\r\n\t\t\t// Add tooltips when labels are hidden\r\n\t\t\tif (this.showTooltips && !shouldShowLabel && 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\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(new CustomEvent('fab-click', {\r\n\t\t\tbubbles: true,\r\n\t\t\tcomposed: true\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(new CustomEvent('menu-click', {\r\n\t\t\tbubbles: true,\r\n\t\t\tcomposed: true\r\n\t\t}))\r\n\t}\r\n\r\n\tprotected render() {\r\n\t\treturn html`\r\n\t\t\t<div class=\"rail\" part=\"rail\">\r\n\t\t\t\t<div class=\"header\" part=\"header\">\r\n\t\t\t\t\t<slot name=\"fab\" @click=${this.handleFabClick}></slot>\r\n\t\t\t\t\t<slot name=\"menu\" @click=${this.handleMenuClick}></slot>\r\n\t\t\t\t\t<slot name=\"header\"></slot>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<nav class=\"nav\" part=\"nav\" role=\"list\">\r\n\t\t\t\t\t<slot @slotchange=${this.handleSlotChange}></slot>\r\n\t\t\t\t</nav>\r\n\r\n\t\t\t\t<div class=\"footer\" part=\"footer\">\r\n\t\t\t\t\t<slot name=\"footer\"></slot>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t`\r\n\t}\r\n\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(\r\n\t\t\t\t\titem => item.value === value \|\| item.label === value\r\n\t\t\t\t)\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 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}"],"names":["SchmancyNavigationRailItem","$LitElement","css","super","arguments","this","hovering$","BehaviorSubject","pressing$","active$","icon","label","value","badge","badgeVariant","showLabel","disabled","nested","group","showRipple","active","next","selected","connectedCallback","merge","fromEvent","pipe","tap","takeUntil","disconnecting","subscribe","pressing","delay","distinctUntilChanged","isActive","requestUpdate","setAttribute","String","hasAttribute","changedProperties","updated","has","event","preventDefault","stopPropagation","dispatchEvent","CustomEvent","detail","bubbles","composed","key","click","hasCustomIcon","querySelector","hasCustomContent","hasCustomBadge","containerClasses","container","rippling","badgeStyles","color","html","classMap","handleClick","handleKeyDown","when","styleMap","__decorateClass","property","type","prototype","Boolean","reflect","attribute","state","customElement","SchmancyNavigationRail","activeIndex$","_activeValue","labelVisibility","alignment","showTooltips","keyboardNavigation","focusedIndex","activeIndex","activeValue","updateActiveByValue","navigationItems","allElements","filter","el","tagName","addEventListener","index","updateActiveStates","setupNavigateListener","updateLabelVisibility","forEach","item","i","findIndex","getAttribute","shouldShowLabel","removeAttribute","items","length","newIndex","focus","render","handleFabClick","handleMenuClick","handleSlotChange","e","itemIndex","Number","queryAssignedElements","flatten"],"mappings":"qgBA6DaA,QAAAA,2BAAN,cAAyCC,EAAAA,YAAYC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA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"}
1	+ {"version":3,"file":"navigation-rail-DpffIkNR.cjs","sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\r\nimport { css, html, PropertyValues } from 'lit'\r\nimport { customElement, property, state } from 'lit/decorators.js'\r\nimport { when } from 'lit/directives/when.js'\r\nimport { BehaviorSubject, fromEvent, merge, takeUntil } from 'rxjs'\r\nimport { tap, delay, distinctUntilChanged } from 'rxjs/operators'\r\n\r\nexport type NavigationRailItemClickEvent = CustomEvent<{\r\n\ticon: string\r\n\tlabel: string\r\n\tvalue: string\r\n\tactive: boolean\r\n}>\r\n\r\n/*\r\n Material Design 3 Navigation Rail Item Component\r\n * @see https://m3.material.io/components/navigation-rail/overview\r\n \r\n `<schmancy-navigation-rail-item>` component\r\n \r\n Individual navigation item for use within a navigation rail.\r\n * Represents a single destination or action with an icon and optional label.\r\n \r\n @element schmancy-navigation-rail-item\r\n * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)\r\n * @slot - Default slot for custom content\r\n * @slot badge - Custom badge content\r\n \r\n @fires navigate - When the item is clicked\r\n \r\n @csspart container - The main item container\r\n * @csspart indicator - The active indicator\r\n * @csspart icon - The icon container\r\n * @csspart label - The label text\r\n * @csspart badge - The badge element\r\n \r\n @example\r\n * <schmancy-navigation-rail-item\r\n * icon=\"home\"\r\n * label=\"Home\"\r\n * value=\"/home\"\r\n * badge=\"3\"\r\n * active>\r\n * </schmancy-navigation-rail-item>\r\n \r\n @example\r\n * <!-- Using 'selected' alias -->\r\n * <schmancy-navigation-rail-item\r\n * icon=\"settings\"\r\n * label=\"Settings\"\r\n * value=\"/settings\"\r\n * selected>\r\n * </schmancy-navigation-rail-item>\r\n \r\n @example\r\n * <!-- With custom icon -->\r\n * <schmancy-navigation-rail-item label=\"Dashboard\">\r\n * <schmancy-icon slot=\"icon\">dashboard</schmancy-icon>\r\n * </schmancy-navigation-rail-item>\r\n /\r\n@customElement('schmancy-navigation-rail-item')\r\nexport class SchmancyNavigationRailItem extends $LitElement(css`\r\n\t:host {\r\n\t\tdisplay: block;\r\n\t\tposition: relative;\r\n\t\toutline: none;\r\n\t\t--rail-item-height: 56px;\r\n\t\t--rail-item-icon-size: 24px;\r\n\t\t--rail-item-show-label: block;\r\n\t}\r\n\r\n\t.container {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tmin-height: var(--rail-item-height);\r\n\t\twidth: 100%;\r\n\t\tborder-radius: 16px;\r\n\t\tcursor: pointer;\r\n\t\tposition: relative;\r\n\t\tbox-sizing: border-box;\r\n\t\tcolor: var(--schmancy-sys-color-surface-onVariant);\r\n\t\tuser-select: none;\r\n\t\ttransition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n\t\tpadding: 12px 0;\r\n\t\tgap: 4px;\r\n\t}\r\n\r\n\t/ Hover state /\r\n\t.container:hover {\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\r\n\t}\r\n\r\n\t/ Focus state /\r\n\t:host(:focus-visible) .container {\r\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default);\r\n\t\toutline-offset: 2px;\r\n\t}\r\n\r\n\t/ Active indicator - positioned behind icon only /\r\n\t.icon-container {\r\n\t\tposition: relative;\r\n\t}\r\n\r\n\t.indicator {\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tleft: 50%;\r\n\t\ttransform: translate(-50%, -50%) scale(0);\r\n\t\twidth: 56px;\r\n\t\theight: 32px;\r\n\t\tborder-radius: 16px;\r\n\t\tbackground-color: var(--schmancy-sys-color-secondary-container);\r\n\t\ttransition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n\t\tz-index: 0;\r\n\t}\r\n\r\n\t:host([active]) .indicator,\r\n\t:host([selected]) .indicator {\r\n\t\ttransform: translate(-50%, -50%) scale(1);\r\n\t}\r\n\r\n\t:host([active]) .container,\r\n\t:host([selected]) .container {\r\n\t\tcolor: var(--schmancy-sys-color-secondary-onContainer);\r\n\t}\r\n\r\n\r\n\t/ Icon styles /\r\n\t.icon-container {\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\twidth: auto;\r\n\t\tmin-width: 56px;\r\n\t\theight: 32px;\r\n\t\tflex-shrink: 0;\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n\t}\r\n\r\n\t.icon {\r\n\t\tfont-family: 'Material Symbols Outlined';\r\n\t\tfont-size: var(--rail-item-icon-size);\r\n\t\tline-height: 1;\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n\t\tfont-variation-settings:\r\n\t\t\t'FILL' 0,\r\n\t\t\t'wght' 400,\r\n\t\t\t'GRAD' 0,\r\n\t\t\t'opsz' 24;\r\n\t}\r\n\r\n\t:host([active]) .icon,\r\n\t:host([selected]) .icon {\r\n\t\tfont-variation-settings:\r\n\t\t\t'FILL' 1,\r\n\t\t\t'wght' 400,\r\n\t\t\t'GRAD' 0,\r\n\t\t\t'opsz' 24;\r\n\t}\r\n\r\n\t/ Label styles /\r\n\t.label {\r\n\t\tfont-size: 12px;\r\n\t\tfont-weight: 500;\r\n\t\tline-height: 16px;\r\n\t\ttext-align: center;\r\n\t\toverflow: hidden;\r\n\t\ttext-overflow: ellipsis;\r\n\t\twhite-space: nowrap;\r\n\t\tz-index: 1;\r\n\t\tdisplay: var(--rail-item-show-label, block);\r\n\t\tmax-width: 56px;\r\n\t\tpadding: 0 4px;\r\n\t}\r\n\r\n\r\n\t/ Badge styles /\r\n\t.badge {\r\n\t\tposition: absolute;\r\n\t\ttop: 8px;\r\n\t\tright: 12px;\r\n\t\tmin-width: 16px;\r\n\t\theight: 16px;\r\n\t\tborder-radius: 8px;\r\n\t\tbackground-color: var(--schmancy-sys-color-error-default);\r\n\t\tcolor: var(--schmancy-sys-color-error-on);\r\n\t\tfont-size: 11px;\r\n\t\tfont-weight: 600;\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tpadding: 0 4px;\r\n\t\tbox-sizing: border-box;\r\n\t\tz-index: 2;\r\n\t\tanimation: badge-pulse 2s infinite;\r\n\t}\r\n\r\n\t@keyframes badge-pulse {\r\n\t\t0%, 100% { transform: scale(1); }\r\n\t\t50% { transform: scale(1.1); }\r\n\t}\r\n\r\n\t/ Nested items (for sub-navigation) /\r\n\t:host([nested]) {\r\n\t\t--rail-item-height: 48px;\r\n\t\t--rail-item-icon-size: 20px;\r\n\t}\r\n\r\n\t:host([nested]) .container {\r\n\t\tpadding-left: 32px;\r\n\t}\r\n\r\n\t/ Disabled state /\r\n\t:host([disabled]) {\r\n\t\tpointer-events: none;\r\n\t\topacity: 0.38;\r\n\t}\r\n\r\n\t/ Ripple effect /\r\n\t.ripple {\r\n\t\tposition: absolute;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\tright: 0;\r\n\t\tbottom: 0;\r\n\t\tborder-radius: inherit;\r\n\t\toverflow: hidden;\r\n\t\tz-index: 0;\r\n\t}\r\n\r\n\t.ripple::before {\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tleft: 50%;\r\n\t\twidth: 0;\r\n\t\theight: 0;\r\n\t\tborder-radius: 50%;\r\n\t\tbackground: currentColor;\r\n\t\topacity: 0;\r\n\t\ttransform: translate(-50%, -50%);\r\n\t\ttransition: width 0.6s, height 0.6s, opacity 0.6s;\r\n\t}\r\n\r\n\t:host(:active) .ripple::before {\r\n\t\twidth: 200%;\r\n\t\theight: 200%;\r\n\t\topacity: 0.12;\r\n\t}\r\n\r\n\t/ Tooltip styles (shown via title attribute) /\r\n\t:host([title]:hover)::after {\r\n\t\tcontent: attr(title);\r\n\t\tposition: absolute;\r\n\t\tleft: calc(100% + 8px);\r\n\t\ttop: 50%;\r\n\t\ttransform: translateY(-50%);\r\n\t\tbackground: var(--schmancy-sys-color-inverseSurface);\r\n\t\tcolor: var(--schmancy-sys-color-inverseOnSurface);\r\n\t\tpadding: 4px 8px;\r\n\t\tborder-radius: 4px;\r\n\t\tfont-size: 12px;\r\n\t\twhite-space: nowrap;\r\n\t\tz-index: 1000;\r\n\t\tpointer-events: none;\r\n\t\tanimation: tooltip-fade-in 0.2s ease;\r\n\t}\r\n\r\n\t@keyframes tooltip-fade-in {\r\n\t\tfrom {\r\n\t\t\topacity: 0;\r\n\t\t\ttransform: translateY(-50%) translateX(-4px);\r\n\t\t}\r\n\t\tto {\r\n\t\t\topacity: 1;\r\n\t\t\ttransform: translateY(-50%) translateX(0);\r\n\t\t}\r\n\t}\r\n\r\n\t/ Group item styles /\r\n\t:host([group]) {\r\n\t\tmargin-bottom: 8px;\r\n\t}\r\n\r\n\t:host([group])::after {\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\tbottom: -4px;\r\n\t\tleft: 12px;\r\n\t\tright: 12px;\r\n\t\theight: 1px;\r\n\t\tbackground: var(--schmancy-sys-color-outlineVariant);\r\n\t\topacity: 0.12;\r\n\t}\r\n`) {\r\n\t// Observable state\r\n\tprivate hovering$ = new BehaviorSubject<boolean>(false)\r\n\tprivate pressing$ = new BehaviorSubject<boolean>(false)\r\n\tprivate active$ = new BehaviorSubject<boolean>(false)\r\n\r\n\t// Properties\r\n\t/\r\n\t Icon name (Material Symbols icon)\r\n\t /\r\n\t@property({ type: String })\r\n\ticon = ''\r\n\r\n\t/\r\n\t Label text for the navigation item\r\n\t /\r\n\t@property({ type: String })\r\n\tlabel = ''\r\n\r\n\t/\r\n\t Value associated with this item (useful for routing)\r\n\t /\r\n\t@property({ type: String })\r\n\tvalue = ''\r\n\r\n\t/\r\n\t Whether this item is currently active/selected\r\n\t * @default false\r\n\t /\r\n\t@property({ type: Boolean, reflect: true })\r\n\tget active() { return this.active$.value }\r\n\tset active(value: boolean) {\r\n\t\tthis.active$.next(value)\r\n\t}\r\n\r\n\t/\r\n\t Whether this item is currently selected (alias for active)\r\n\t * @default false\r\n\t /\r\n\t@property({ type: Boolean, reflect: true })\r\n\tget selected() { return this.active }\r\n\tset selected(value: boolean) { this.active = value }\r\n\r\n\t/\r\n\t Badge text or number to display\r\n\t /\r\n\t@property({ type: String })\r\n\tbadge = ''\r\n\r\n\t/\r\n\t Badge variant\r\n\t /\r\n\t@property({ type: String })\r\n\tbadgeVariant: 'error' \| 'primary' \| 'secondary' = 'error'\r\n\r\n\t/\r\n\t Whether to show the label (controlled by parent rail)\r\n\t * @default false\r\n\t /\r\n\t@property({ type: Boolean, attribute: 'show-label' })\r\n\tshowLabel = false\r\n\r\n\t/\r\n\t Whether this item is disabled\r\n\t * @default false\r\n\t /\r\n\t@property({ type: Boolean, reflect: true })\r\n\tdisabled = false\r\n\r\n\t/\r\n\t Whether this is a nested item (sub-navigation)\r\n\t * @default false\r\n\t /\r\n\t@property({ type: Boolean, reflect: true })\r\n\tnested = false\r\n\r\n\t/\r\n\t Whether this item represents a group separator\r\n\t * @default false\r\n\t /\r\n\t@property({ type: Boolean, reflect: true })\r\n\tgroup = false\r\n\r\n\t// State\r\n\t@state()\r\n\tprivate showRipple = false\r\n\r\n\r\n\tconnectedCallback() {\r\n\t\tsuper.connectedCallback()\r\n\r\n\t\t// Set up hover tracking\r\n\t\tmerge(\r\n\t\t\tfromEvent(this, 'mouseenter').pipe(tap(() => this.hovering$.next(true))),\r\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.hovering$.next(false)))\r\n\t\t).pipe(takeUntil(this.disconnecting)).subscribe()\r\n\r\n\t\t// Set up press tracking\r\n\t\tmerge(\r\n\t\t\tfromEvent(this, 'mousedown').pipe(tap(() => this.pressing$.next(true))),\r\n\t\t\tfromEvent(this, 'mouseup').pipe(tap(() => this.pressing$.next(false))),\r\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.pressing$.next(false)))\r\n\t\t).pipe(takeUntil(this.disconnecting)).subscribe()\r\n\r\n\r\n\t\t// Ripple effect\r\n\t\tthis.pressing$.pipe(\r\n\t\t\ttap(pressing => {\r\n\t\t\t\tif (pressing && !this.disabled) {\r\n\t\t\t\t\tthis.showRipple = true\r\n\t\t\t\t}\r\n\t\t\t}),\r\n\t\t\tdelay(600),\r\n\t\t\ttap(() => this.showRipple = false),\r\n\t\t\ttakeUntil(this.disconnecting)\r\n\t\t).subscribe()\r\n\r\n\t\t// Subscribe to active state changes for reactive updates\r\n\t\tthis.active$.pipe(\r\n\t\t\tdistinctUntilChanged(),\r\n\t\t\ttap((isActive) => {\r\n\t\t\t\tthis.requestUpdate()\r\n\t\t\t\t// Update ARIA attributes reactively\r\n\t\t\t\tthis.setAttribute('aria-selected', String(isActive))\r\n\t\t\t\tthis.setAttribute('tabindex', isActive ? '0' : '-1')\r\n\t\t\t}),\r\n\t\t\ttakeUntil(this.disconnecting)\r\n\t\t).subscribe()\r\n\r\n\t\t// Set ARIA attributes\r\n\t\tthis.setAttribute('role', 'listitem')\r\n\t\tif (!this.hasAttribute('tabindex')) {\r\n\t\t\tthis.setAttribute('tabindex', this.active ? '0' : '-1')\r\n\t\t}\r\n\t}\r\n\r\n\tupdated(changedProperties: PropertyValues) {\r\n\t\tsuper.updated(changedProperties)\r\n\r\n\t\t// Active state is now handled by the BehaviorSubject subscription\r\n\t\t// So we don't need to duplicate it here\r\n\r\n\t\tif (changedProperties.has('disabled')) {\r\n\t\t\tthis.setAttribute('aria-disabled', String(this.disabled))\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('label')) {\r\n\t\t\tthis.setAttribute('aria-label', this.label)\r\n\t\t}\r\n\t}\r\n\r\n\t/\r\n\t Handle click events\r\n\t /\r\n\tprivate handleClick(event: Event) {\r\n\t\tif (this.disabled) {\r\n\t\t\tevent.preventDefault()\r\n\t\t\tevent.stopPropagation()\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\t// Emit navigate event with the value\r\n\t\tthis.dispatchEvent(new CustomEvent('navigate', {\r\n\t\t\tdetail: this.value \|\| this.label,\r\n\t\t\tbubbles: true,\r\n\t\t\tcomposed: true\r\n\t\t}))\r\n\r\n\t\t// Visual feedback is handled by the ripple effect in connectedCallback\r\n\t\t// The parent rail will confirm and update via activeIndex\r\n\t}\r\n\r\n\t/\r\n\t Handle keyboard events\r\n\t /\r\n\tprivate handleKeyDown(event: KeyboardEvent) {\r\n\t\tif (this.disabled) return\r\n\r\n\t\tif (event.key === 'Enter' \|\| event.key === ' ') {\r\n\t\t\tevent.preventDefault()\r\n\t\t\tthis.click()\r\n\t\t}\r\n\t}\r\n\r\n\tprotected render() {\r\n\t\tconst hasCustomIcon = this.querySelector('[slot=\"icon\"]')\r\n\t\tconst hasCustomContent = this.querySelector(':not([slot])')\r\n\t\tconst hasCustomBadge = this.querySelector('[slot=\"badge\"]')\r\n\r\n\t\tconst containerClasses = {\r\n\t\t\tcontainer: true,\r\n\t\t\trippling: this.showRipple\r\n\t\t}\r\n\r\n\t\tconst badgeStyles = {\r\n\t\t\t'background-color': `var(--schmancy-sys-color-${this.badgeVariant}-default)`,\r\n\t\t\t'color': `var(--schmancy-sys-color-${this.badgeVariant}-on)`\r\n\t\t}\r\n\r\n\t\treturn html`\r\n\t\t\t<div\r\n\t\t\t\tclass=${this.classMap(containerClasses)}\r\n\t\t\t\tpart=\"container\"\r\n\t\t\t\t@click=${this.handleClick}\r\n\t\t\t\t@keydown=${this.handleKeyDown}\r\n\t\t\t>\r\n\t\t\t\t<span class=\"ripple\" aria-hidden=\"true\"></span>\r\n\r\n\t\t\t\t${when(hasCustomContent,\r\n\t\t\t\t\t() => html`<slot></slot>`,\r\n\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t<div class=\"icon-container\" part=\"icon\">\r\n\t\t\t\t\t\t\t<span class=\"indicator\" part=\"indicator\" aria-hidden=\"true\"></span>\r\n\t\t\t\t\t\t\t${when(hasCustomIcon,\r\n\t\t\t\t\t\t\t\t() => html`<slot name=\"icon\"></slot>`,\r\n\t\t\t\t\t\t\t\t() => when(this.icon,\r\n\t\t\t\t\t\t\t\t\t() => html`<span class=\"icon\">${this.icon}</span>`\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t${when(this.label,\r\n\t\t\t\t\t\t\t() => html`<span class=\"label\" part=\"label\">${this.label}</span>`\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t`\r\n\t\t\t\t)}\r\n\r\n\t\t\t\t${when(this.badge,\r\n\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t${when(hasCustomBadge,\r\n\t\t\t\t\t\t\t() => html`<slot name=\"badge\"></slot>`,\r\n\t\t\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\t\tclass=\"badge\"\r\n\t\t\t\t\t\t\t\t\tpart=\"badge\"\r\n\t\t\t\t\t\t\t\t\tstyle=${this.styleMap(badgeStyles)}\r\n\t\t\t\t\t\t\t\t\taria-label=\"${this.badge} notifications\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t${this.badge}\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t`\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t`\r\n\t\t\t\t)}\r\n\t\t\t</div>\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-item': SchmancyNavigationRailItem\r\n\t}\r\n}","import { $LitElement } from '@mixins/index'\r\nimport { css, html, PropertyValues } from 'lit'\r\nimport { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'\r\nimport { BehaviorSubject, 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\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 \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(css`\r\n\t:host {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\twidth: 80px;\r\n\t\theight: 100%;\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-container);\r\n\t\tcolor: var(--schmancy-sys-color-surface-on);\r\n\t\tbox-sizing: border-box;\r\n\t\tposition: relative;\r\n\t\toverflow: visible;\r\n\t}\r\n\r\n\t/ Rail container /\r\n\t.rail {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\theight: 100%;\r\n\t\tpadding: 8px 12px;\r\n\t\tgap: 4px;\r\n\t\tbox-sizing: border-box;\r\n\t}\r\n\r\n\t/ Header section /\r\n\t.header {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tgap: 4px;\r\n\t\tmargin-bottom: 8px;\r\n\t}\r\n\r\n\t/ Navigation container /\r\n\t.nav {\r\n\t\tflex: 1;\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\tgap: 4px;\r\n\t\toverflow-y: auto;\r\n\t\toverflow-x: hidden;\r\n\t\tscrollbar-width: thin;\r\n\t\tscrollbar-color: var(--schmancy-sys-color-surface-onVariant) transparent;\r\n\t}\r\n\r\n\t.nav::-webkit-scrollbar {\r\n\t\twidth: 4px;\r\n\t}\r\n\r\n\t.nav::-webkit-scrollbar-track {\r\n\t\tbackground: transparent;\r\n\t}\r\n\r\n\t.nav::-webkit-scrollbar-thumb {\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-onVariant);\r\n\t\tborder-radius: 2px;\r\n\t\topacity: 0.5;\r\n\t}\r\n\r\n\t/ Footer section /\r\n\t.footer {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tgap: 4px;\r\n\t\tmargin-top: auto;\r\n\t\tpadding-top: 8px;\r\n\t}\r\n\r\n\t/ FAB styles /\r\n\t::slotted([slot=\"fab\"]) {\r\n\t\tmargin-bottom: 8px;\r\n\t}\r\n\r\n\t/ Menu button styles /\r\n\t::slotted([slot=\"menu\"]) {\r\n\t\tmargin-bottom: 12px;\r\n\t}\r\n\r\n\t/ Alignment variants /\r\n\t:host([alignment=\"top\"]) .nav {\r\n\t\tjustify-content: flex-start;\r\n\t}\r\n\r\n\t:host([alignment=\"center\"]) .nav {\r\n\t\tjustify-content: center;\r\n\t}\r\n\r\n\t:host([alignment=\"bottom\"]) .nav {\r\n\t\tjustify-content: flex-end;\r\n\t}\r\n\r\n\t/ Label visibility states /\r\n\t:host([label-visibility=\"none\"]) ::slotted(schmancy-navigation-rail-item) {\r\n\t\t--rail-item-show-label: none;\r\n\t}\r\n\r\n\t:host([label-visibility=\"selected\"]) ::slotted(schmancy-navigation-rail-item:not([active])) {\r\n\t\t--rail-item-show-label: none;\r\n\t}\r\n\r\n\r\n\t/ Group header styles /\r\n\t::slotted(.group-header) {\r\n\t\tpadding: 8px 12px;\r\n\t\tfont-size: 12px;\r\n\t\tfont-weight: 500;\r\n\t\tcolor: var(--schmancy-sys-color-surface-onVariant);\r\n\t\ttext-transform: uppercase;\r\n\t\tletter-spacing: 0.1em;\r\n\t\twhite-space: nowrap;\r\n\t\toverflow: hidden;\r\n\t\ttext-overflow: ellipsis;\r\n\t}\r\n\r\n\t/ Divider styles /\r\n\t::slotted(schmancy-divider) {\r\n\t\tmargin: 8px 0;\r\n\t}\r\n\r\n\t/ Responsive behavior /\r\n\t@media (max-width: 768px) {\r\n\t\t:host {\r\n\t\t\twidth: 56px;\r\n\t\t}\r\n\r\n\t\t.rail {\r\n\t\t\tpadding: 8px;\r\n\t\t}\r\n\t}\r\n`) {\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() { return this.activeIndex$.value }\r\n\tset activeIndex(value: number) { this.activeIndex$.next(value) }\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() { return this._activeValue }\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// State\r\n\t@state()\r\n\tprivate focusedIndex = -1\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(\r\n\t\t\tel => el.tagName === 'SCHMANCY-NAVIGATION-RAIL-ITEM'\r\n\t\t) 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$.pipe(\r\n\t\t\tdistinctUntilChanged(),\r\n\t\t\ttap(index => this.updateActiveStates(index)),\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\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(\r\n\t\t\titem => item.getAttribute('value') === value \|\| item.label === value\r\n\t\t)\r\n\t\tif (index >= 0) {\r\n\t\t\tthis.activeIndex = index\r\n\t\t}\r\n\t}\r\n\r\n\r\n\tprivate updateLabelVisibility() {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tconst shouldShowLabel =\r\n\t\t\t\tthis.labelVisibility === 'all' \|\|\r\n\t\t\t\t(this.labelVisibility === 'selected' && i === this.activeIndex)\r\n\r\n\t\t\titem.showLabel = shouldShowLabel\r\n\r\n\t\t\t// Add tooltips when labels are hidden\r\n\t\t\tif (this.showTooltips && !shouldShowLabel && 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\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(new CustomEvent('fab-click', {\r\n\t\t\tbubbles: true,\r\n\t\t\tcomposed: true\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(new CustomEvent('menu-click', {\r\n\t\t\tbubbles: true,\r\n\t\t\tcomposed: true\r\n\t\t}))\r\n\t}\r\n\r\n\tprotected render() {\r\n\t\treturn html`\r\n\t\t\t<div class=\"rail\" part=\"rail\">\r\n\t\t\t\t<div class=\"header\" part=\"header\">\r\n\t\t\t\t\t<slot name=\"fab\" @click=${this.handleFabClick}></slot>\r\n\t\t\t\t\t<slot name=\"menu\" @click=${this.handleMenuClick}></slot>\r\n\t\t\t\t\t<slot name=\"header\"></slot>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<nav class=\"nav\" part=\"nav\" role=\"list\">\r\n\t\t\t\t\t<slot @slotchange=${this.handleSlotChange}></slot>\r\n\t\t\t\t</nav>\r\n\r\n\t\t\t\t<div class=\"footer\" part=\"footer\">\r\n\t\t\t\t\t<slot name=\"footer\"></slot>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t`\r\n\t}\r\n\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(\r\n\t\t\t\t\titem => item.value === value \|\| item.label === value\r\n\t\t\t\t)\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 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}"],"names":["SchmancyNavigationRailItem","$LitElement","css","super","arguments","this","hovering$","BehaviorSubject","pressing$","active$","icon","label","value","badge","badgeVariant","showLabel","disabled","nested","group","showRipple","active","next","selected","connectedCallback","merge","fromEvent","pipe","tap","takeUntil","disconnecting","subscribe","pressing","delay","distinctUntilChanged","isActive","requestUpdate","setAttribute","String","hasAttribute","changedProperties","updated","has","event","preventDefault","stopPropagation","dispatchEvent","CustomEvent","detail","bubbles","composed","key","click","hasCustomIcon","querySelector","hasCustomContent","hasCustomBadge","containerClasses","container","rippling","badgeStyles","color","html","classMap","handleClick","handleKeyDown","when","styleMap","__decorateClass","property","type","prototype","Boolean","reflect","attribute","state","customElement","SchmancyNavigationRail","activeIndex$","_activeValue","labelVisibility","alignment","showTooltips","keyboardNavigation","focusedIndex","activeIndex","activeValue","updateActiveByValue","navigationItems","allElements","filter","el","tagName","addEventListener","index","updateActiveStates","setupNavigateListener","updateLabelVisibility","forEach","item","i","findIndex","getAttribute","shouldShowLabel","removeAttribute","items","length","newIndex","focus","render","handleFabClick","handleMenuClick","handleSlotChange","e","itemIndex","Number","queryAssignedElements","flatten"],"mappings":"qgBA6DaA,QAAAA,2BAAN,cAAyCC,EAAAA,YAAYC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA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"}

package/dist/navigation-rail.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./navigation-rail-B8P5mauT.cjs");Object.defineProperty(exports,"SchmancyNavigationRail",{enumerable:!0,get:()=>e.SchmancyNavigationRail}),Object.defineProperty(exports,"SchmancyNavigationRailItem",{enumerable:!0,get:()=>e.SchmancyNavigationRailItem});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./navigation-rail-DpffIkNR.cjs");Object.defineProperty(exports,"SchmancyNavigationRail",{enumerable:!0,get:()=>e.SchmancyNavigationRail}),Object.defineProperty(exports,"SchmancyNavigationRailItem",{enumerable:!0,get:()=>e.SchmancyNavigationRailItem});
 //# sourceMappingURL=navigation-rail.cjs.map

package/dist/navigation-rail.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { a as c, S as m } from "./navigation-rail-BdV-lakC.js";
+import { a as c, S as m } from "./navigation-rail-Cwhii1Km.js";
 export {
   c as SchmancyNavigationRail,
   m as SchmancyNavigationRailItem

package/dist/{notification-service-Dnfci5v7.cjs → notification-service-CiS9cxNM.cjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-"use strict";const p=require("rxjs"),b=require("lit/directives/class-map.js"),w=require("lit/directives/style-map.js"),u=require("lit/decorators.js");require("./tailwind.mixin-B5ggvnsv.cjs");const x=require("./litElement.mixin-BOqWtWD7.cjs"),S=require("./ripple-DqQrvaTe.cjs");require("lit/directives/guard.js");const l=require("./theme.interface-Xg5Zi46a.cjs"),d=require("lit");require("./progress-D5HItcIt.cjs");const A=require("lit/directives/repeat.js");var C=Object.defineProperty,_=Object.getOwnPropertyDescriptor,h=(o,t,e,i)=>{for(var n,s=i>1?void 0:i?_(t,e):t,a=o.length-1;a>=0;a--)(n=o[a])&&(s=(i?n(t,e,s):n(s))||s);return i&&s&&C(t,e,s),s};exports.SchmancyNotification=class extends x.$LitElement(':host{display:block;margin-bottom:10px}:host:last-child{margin-bottom:0}.notification{width:100%;max-width:400px;box-shadow:var(--schmancy-sys-elevation-2);overflow:hidden;transform:translate(0);opacity:1;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);background-color:var(--schmancy-sys-color-surface-container);color:var(--schmancy-sys-color-surface-on);border-radius:16px;position:relative}.notification:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,#ffffff14,#fff0);z-index:1}.notification.info{border-left:4px solid var(--schmancy-sys-color-primary-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-primary-container) 10%)}.notification.success{border-left:4px solid var(--schmancy-sys-color-success-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-success-container) 10%)}.notification.warning{border-left:4px solid var(--schmancy-sys-color-tertiary-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-tertiary-container) 10%)}.notification.error{border-left:4px solid var(--schmancy-sys-color-error-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-error-container) 10%)}.notification.closing{transform:translate(120%);opacity:0}.notification .notification-content{display:flex;padding:18px 20px;align-items:flex-start;position:relative;z-index:2}.notification .icon-container{flex-shrink:0;margin-right:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;width:28px;height:28px;position:relative}.notification .content{flex:1;min-width:0;display:flex;flex-direction:column}.notification .title{font-weight:500;font-size:16px;line-height:1.5;margin-bottom:2px;word-break:break-word;letter-spacing:.15px}.notification .message{font-size:14px;line-height:1.5;word-break:break-word;letter-spacing:.25px;opacity:.92}.notification .close-button{background:transparent;border:none;cursor:pointer;color:var(--schmancy-sys-color-surface-onVariant);padding:8px;margin-left:8px;margin-right:-4px;margin-top:-4px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .2s ease}.notification .close-button:hover{background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-onVariant) 8%,transparent);transform:scale(1.05)}.notification .close-button:active{transform:scale(.95)}.notification .close-button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--schmancy-sys-color-primary-default)}'){constructor(){super(...arguments),this.title="",this.message="",this.type="info",this.closable=!0,this.duration=5e3,this.id=`notification-${Date.now()}-${Math.floor(1e4*Math.random())}`,this.playSound=!0,this.showProgress=!1,this._visible=!0,this._progress=100,this._hovered=!1,this._closing=!1}connectedCallback(){super.connectedCallback(),this.duration>0&&this._startAutoCloseTimer(),this.playSound&&this._playSound()}disconnectedCallback(){this._clearTimers(),super.disconnectedCallback()}updated(o){super.updated(o),o.has("duration")&&this.duration>0&&(this._clearTimers(),this._startAutoCloseTimer())}_startAutoCloseTimer(){if(this.duration<=0)return;const o=Date.now()+this.duration;this._autoCloseTimer=window.setTimeout(()=>{this.close()},this.duration),this._progressTimer=window.setInterval(()=>{if(this._hovered)return;const t=Date.now(),e=Math.max(0,o-t);this._progress=e/this.duration*100,e<=0&&this._clearTimers()},16)}_clearTimers(){this._autoCloseTimer&&(clearTimeout(this._autoCloseTimer),this._autoCloseTimer=void 0),this._progressTimer&&(clearInterval(this._progressTimer),this._progressTimer=void 0)}_pauseTimers(){this._clearTimers()}_resumeTimers(){if(this.duration>0){const o=this._progress/100*this.duration;if(o>0){this._autoCloseTimer=window.setTimeout(()=>{this.close()},o);const t=Date.now()+o;this._progressTimer=window.setInterval(()=>{if(this._hovered)return;const e=Date.now(),i=Math.max(0,t-e);this._progress=i/o*100,i<=0&&this._clearTimers()},16)}}}_playSound(){this.dispatchEvent(new CustomEvent("playsound",{detail:{type:this.type},bubbles:!0,composed:!0}))}_handleMouseEnter(){this._hovered=!0,this._pauseTimers()}_handleMouseLeave(){this._hovered=!1,this._resumeTimers()}close(){this._closing||(this._closing=!0,this._clearTimers(),this._visible=!1,setTimeout(()=>{this.dispatchEvent(new CustomEvent("close",{detail:{id:this.id},bubbles:!0,composed:!0}))},300))}render(){if(!this._visible&&this._closing)return d.html``;const o=this._getTypeStyles(),t=this._hovered?"3":"2";return d.html`
+"use strict";const p=require("rxjs"),b=require("lit/directives/class-map.js"),w=require("lit/directives/style-map.js"),u=require("lit/decorators.js");require("./tailwind.mixin-CvLC4LGm.cjs");const x=require("./litElement.mixin-wU3TW8NU.cjs"),S=require("./ripple-DqQrvaTe.cjs");require("lit/directives/guard.js");const l=require("./theme.interface-BMeNadVb.cjs"),d=require("lit");require("./progress-DDWci51w.cjs");const A=require("lit/directives/repeat.js");var C=Object.defineProperty,_=Object.getOwnPropertyDescriptor,h=(o,t,e,i)=>{for(var n,s=i>1?void 0:i?_(t,e):t,a=o.length-1;a>=0;a--)(n=o[a])&&(s=(i?n(t,e,s):n(s))||s);return i&&s&&C(t,e,s),s};exports.SchmancyNotification=class extends x.$LitElement(':host{display:block;margin-bottom:10px}:host:last-child{margin-bottom:0}.notification{width:100%;max-width:400px;box-shadow:var(--schmancy-sys-elevation-2);overflow:hidden;transform:translate(0);opacity:1;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);background-color:var(--schmancy-sys-color-surface-container);color:var(--schmancy-sys-color-surface-on);border-radius:16px;position:relative}.notification:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,#ffffff14,#fff0);z-index:1}.notification.info{border-left:4px solid var(--schmancy-sys-color-primary-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-primary-container) 10%)}.notification.success{border-left:4px solid var(--schmancy-sys-color-success-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-success-container) 10%)}.notification.warning{border-left:4px solid var(--schmancy-sys-color-tertiary-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-tertiary-container) 10%)}.notification.error{border-left:4px solid var(--schmancy-sys-color-error-default);background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-container) 90%,var(--schmancy-sys-color-error-container) 10%)}.notification.closing{transform:translate(120%);opacity:0}.notification .notification-content{display:flex;padding:18px 20px;align-items:flex-start;position:relative;z-index:2}.notification .icon-container{flex-shrink:0;margin-right:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;width:28px;height:28px;position:relative}.notification .content{flex:1;min-width:0;display:flex;flex-direction:column}.notification .title{font-weight:500;font-size:16px;line-height:1.5;margin-bottom:2px;word-break:break-word;letter-spacing:.15px}.notification .message{font-size:14px;line-height:1.5;word-break:break-word;letter-spacing:.25px;opacity:.92}.notification .close-button{background:transparent;border:none;cursor:pointer;color:var(--schmancy-sys-color-surface-onVariant);padding:8px;margin-left:8px;margin-right:-4px;margin-top:-4px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .2s ease}.notification .close-button:hover{background-color:color-mix(in srgb,var(--schmancy-sys-color-surface-onVariant) 8%,transparent);transform:scale(1.05)}.notification .close-button:active{transform:scale(.95)}.notification .close-button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--schmancy-sys-color-primary-default)}'){constructor(){super(...arguments),this.title="",this.message="",this.type="info",this.closable=!0,this.duration=5e3,this.id=`notification-${Date.now()}-${Math.floor(1e4*Math.random())}`,this.playSound=!0,this.showProgress=!1,this._visible=!0,this._progress=100,this._hovered=!1,this._closing=!1}connectedCallback(){super.connectedCallback(),this.duration>0&&this._startAutoCloseTimer(),this.playSound&&this._playSound()}disconnectedCallback(){this._clearTimers(),super.disconnectedCallback()}updated(o){super.updated(o),o.has("duration")&&this.duration>0&&(this._clearTimers(),this._startAutoCloseTimer())}_startAutoCloseTimer(){if(this.duration<=0)return;const o=Date.now()+this.duration;this._autoCloseTimer=window.setTimeout(()=>{this.close()},this.duration),this._progressTimer=window.setInterval(()=>{if(this._hovered)return;const t=Date.now(),e=Math.max(0,o-t);this._progress=e/this.duration*100,e<=0&&this._clearTimers()},16)}_clearTimers(){this._autoCloseTimer&&(clearTimeout(this._autoCloseTimer),this._autoCloseTimer=void 0),this._progressTimer&&(clearInterval(this._progressTimer),this._progressTimer=void 0)}_pauseTimers(){this._clearTimers()}_resumeTimers(){if(this.duration>0){const o=this._progress/100*this.duration;if(o>0){this._autoCloseTimer=window.setTimeout(()=>{this.close()},o);const t=Date.now()+o;this._progressTimer=window.setInterval(()=>{if(this._hovered)return;const e=Date.now(),i=Math.max(0,t-e);this._progress=i/o*100,i<=0&&this._clearTimers()},16)}}}_playSound(){this.dispatchEvent(new CustomEvent("playsound",{detail:{type:this.type},bubbles:!0,composed:!0}))}_handleMouseEnter(){this._hovered=!0,this._pauseTimers()}_handleMouseLeave(){this._hovered=!1,this._resumeTimers()}close(){this._closing||(this._closing=!0,this._clearTimers(),this._visible=!1,setTimeout(()=>{this.dispatchEvent(new CustomEvent("close",{detail:{id:this.id},bubbles:!0,composed:!0}))},300))}render(){if(!this._visible&&this._closing)return d.html``;const o=this._getTypeStyles(),t=this._hovered?"3":"2";return d.html`
 			<div
 				class=${b.classMap({notification:!0,closing:this._closing,[this.type]:!0})}
 				role="alert"
@@ -140,4 +140,4 @@
           `)}
 			</div>
 		`}},g([u.property({type:String})],exports.SchmancyNotificationContainer.prototype,"position",2),g([u.property({type:Number})],exports.SchmancyNotificationContainer.prototype,"maxVisibleNotifications",2),g([u.property({type:Boolean})],exports.SchmancyNotificationContainer.prototype,"playSound",2),g([u.property({type:Number})],exports.SchmancyNotificationContainer.prototype,"audioVolume",2),g([u.state()],exports.SchmancyNotificationContainer.prototype,"_notifications",2),exports.SchmancyNotificationContainer=g([u.customElement("sch-notification-container")],exports.SchmancyNotificationContainer);const y=class y{constructor(){this.notificationStack=[]}static getInstance(){return y.instance||(y.instance=new y),y.instance}notify(t){const e={...y.DEFAULT_OPTIONS,...t,duration:t.duration??y.DEFAULT_OPTIONS.duration},i=e.id||`notification-${Date.now()}-${Math.floor(1e4*Math.random())}`;this.notificationStack.push(i);const n=new CustomEvent("schmancy-notification",{bubbles:!0,composed:!0,detail:{...e,id:i}});return window.dispatchEvent(n),i}dismiss(t){let e;if(t){const i=this.notificationStack.indexOf(t);i>-1&&(this.notificationStack.splice(i,1),e=t)}else e=this.notificationStack.pop();if(e){const i=new CustomEvent("schmancy-notification-dismiss",{bubbles:!0,composed:!0,detail:{id:e}});window.dispatchEvent(i)}}update(t,e){const i=new CustomEvent("schmancy-notification-update",{bubbles:!0,composed:!0,detail:{id:t,...e}});window.dispatchEvent(i)}info(t,e={}){return this.notify({message:t??"",type:"info",duration:t?e.duration:1,...e})}success(t,e={}){return this.notify({message:t??"",type:"success",duration:t?e.duration:1,...e})}warning(t,e={}){return this.notify({message:t??"",type:"warning",duration:t?e.duration:1,...e})}error(t,e={}){return this.notify({message:t??"",type:"error",duration:t?e.duration:1,...e})}customDuration(t,e,i={}){return this.notify({message:t,duration:e,...i})}persistent(t,e={}){return this.notify({message:t,duration:0,...e})}};y.DEFAULT_OPTIONS={duration:1e3,closable:!0,playSound:!0};let m=y;const N={show:o=>m.getInstance().notify(o),info:(o,t={})=>m.getInstance().info(o,t),success:(o,t={})=>m.getInstance().success(o,t),warning:(o,t={})=>m.getInstance().warning(o,t),error:(o,t={})=>m.getInstance().error(o,t),customDuration:(o,t,e={})=>m.getInstance().customDuration(o,t,e),persistent:(o,t={})=>m.getInstance().persistent(o,t),dismiss:o=>m.getInstance().dismiss(o),update:(o,t)=>m.getInstance().update(o,t)};exports.$notify=N,exports.NotificationAudioService=T;
-//# sourceMappingURL=notification-service-Dnfci5v7.cjs.map
+//# sourceMappingURL=notification-service-CiS9cxNM.cjs.map