npm - @mhmo91/schmancy - Versions diffs - 0.8.3 → 0.8.6 - Mend

@mhmo91/schmancy 0.8.3 → 0.8.6

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 (365) hide show

package/dist/{menu-vNrV-Nuq.cjs → menu-rX5RPAI2.cjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-"use strict";require("rxjs"),require("rxjs/operators"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const m=require("lit/decorators.js");require("./tailwind.mixin-UijsBrYW.cjs");const h=require("./litElement.mixin-BVBdv0GP.cjs"),l=require("lit"),d=require("./dialog-service-C86xTS8q.cjs");var p=Object.getOwnPropertyDescriptor;let u=class extends h.$LitElement(l.css`
+"use strict";require("rxjs"),require("rxjs/operators"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const m=require("lit/decorators.js");require("./tailwind.mixin-Cp4PyXok.cjs");const h=require("./litElement.mixin-CrpeGpZ7.cjs"),l=require("lit"),d=require("./dialog-service-C86xTS8q.cjs");var p=Object.getOwnPropertyDescriptor;let u=class extends h.$LitElement(l.css`
 	:host {
 		display: block;
 	}
@@ -21,4 +21,4 @@
 				<slot></slot>
 			</div>
 		`}};a([m.query("slot:not([name])")],c.prototype,"menuSlot",2),c=a([m.customElement("schmancy-menu")],c);
-//# sourceMappingURL=menu-vNrV-Nuq.cjs.map
+//# sourceMappingURL=menu-rX5RPAI2.cjs.map

package/dist/{menu-vNrV-Nuq.cjs.map → menu-rX5RPAI2.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-~~vNrV-Nuq~~.cjs","sources":["../src/menu/menu-item.ts","../src/menu/menu.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { $dialog } from '../dialog/dialog-service'\n\n@customElement('schmancy-menu-item')\nexport default class SchmancyMenuItem extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\n\tprotected render(): unknown {\n\t\treturn html`\n\t\t\t<schmancy-list-item @click=${() => $dialog.dismiss()}>\n\t\t\t\t<slot></slot>\n\t\t\t</schmancy-list-item>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-menu-item': SchmancyMenuItem\n\t}\n}\n","import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\nimport { $dialog } from '../dialog/dialog-service'\n\n/*\n Menu Component\n \n CRITICAL: The dialog ONLY renders the raw menu items passed via the default slot.\n * NO <ul> wrapper, NO classes, NO additional markup in the dialog call.\n * The dialog service handles positioning and display - we just pass the pure content.\n \n @example Basic menu with auto-dismiss\n * ```typescript\n * <schmancy-menu>\n * <schmancy-button slot=\"trigger\">Actions</schmancy-button>\n * <schmancy-menu-item @click=${() => editItem()}>Edit</schmancy-menu-item>\n * <schmancy-menu-item @click=${() => deleteItem()}>Delete</schmancy-menu-item>\n * </schmancy-menu>\n * ```\n * Note: Dialog auto-dismisses when schmancy-menu-item is clicked\n \n @example Custom component (manual dismiss)\n * ```typescript\n * <schmancy-menu>\n * <schmancy-icon-button slot=\"trigger\">settings</schmancy-icon-button>\n * <my-settings-form @submit=${() => $dialog.dismiss()}></my-settings-form>\n * </schmancy-menu>\n * ```\n * Note: Custom components must call $dialog.dismiss() manually\n \n @slot trigger - Button to open menu (new naming)\n * @slot button - Button to open menu (backward compatible)\n * @slot default - Menu items or any custom component to display in dialog\n */\n@customElement('schmancy-menu')\nexport default class SchmancyMenu extends $LitElement(css`\n\t:host {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t}\n`) {\n\t@query('slot:not([name])')\n\tprivate menuSlot!: HTMLSlotElement\n\n\tprivate showMenu(event: MouseEvent) {\n\t\tconst menuItems = this.menuSlot?.assignedElements() \|\| []\n\t\tif (menuItems.length === 0) return\n\n\t\t// Create container and move actual elements to preserve full functionality\n\t\tconst dialogContainer = document.createElement('div')\n\t\tmenuItems.forEach(item => dialogContainer.appendChild(item))\n\n\t\t$dialog\n\t\t\t.component(dialogContainer, {\n\t\t\t\tposition: event,\n\t\t\t\thideActions: true,\n\t\t})\n\t\t\t.finally(() => {\n\t\t\t\t// Restore elements as light DOM children (will be projected via slot)\n\t\t\t\tmenuItems.forEach(item => this.appendChild(item))\n\t\t\t})\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<slot name=\"trigger\" @click=${this.showMenu}>\n\t\t\t\t<slot name=\"button\" @click=${this.showMenu}>\n\t\t\t\t\t<schmancy-icon-button>more_vert</schmancy-icon-button>\n\t\t\t\t</slot>\n\t\t\t</slot>\n\t\t\t<div hidden>\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-menu': SchmancyMenu\n\t}\n}\n"],"names":["SchmancyMenuItem","$LitElement","css","render","html","$dialog","dismiss","customElement","SchmancyMenu","event","menuItems","this","menuSlot","assignedElements","length","dialogContainer","document","createElement","forEach","item","appendChild","component","position","hideActions","finally","showMenu","__decorateClass","query","prototype"],"mappings":"wWAMA,IAAqBA,EAArB,cAA8CC,EAAAA,YAAYC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAM/C,QAAAC,CACT,OAAOC,EAAAA;AAAAA,gCACuB,IAAMC,EAAAA,QAAQC,QAAAA,CAAAA;AAAAA;AAAAA;AAAAA,GAI7C,CAAA,EAZoBN,wGAArB,CADCO,EAAAA,cAAc,oBAAA,CAAA,EACMP,mMC8BrB,IAAqBQ,EAArB,cAA0CP,EAAAA,YAAYC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAS7C,SAASO,GAChB,MAAMC,EAAYC,KAAKC,UAAUC,iBAAAA,GAAsB,GACvD,GAAIH,EAAUI,SAAW,EAAG,OAG5B,MAAMC,EAAkBC,SAASC,cAAc,KAAA,EAC/CP,EAAUQ,QAAQC,GAAQJ,EAAgBK,YAAYD,IAEtDd,EAAAA,QACEgB,UAAUN,EAAiB,CAC3BO,SAAUb,EACVc,YAAAA,KAEAC,QAAQ,IAAA,CAERd,EAAUQ,QAAQC,GAAQR,KAAKS,YAAYD,CAAAA,CAAAA,CAAAA,CAAAA,CAE9C,CAEA,QAAAhB,CACC,OAAOC,EAAAA;AAAAA,iCACwBO,KAAKc,QAAAA;AAAAA,iCACLd,KAAKc,QAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAQrC,CAAA,EAhCQC,EAAA,CADPC,EAAAA,MAAM,qBANanB,EAOZoB,UAAA,WAAA,CAAA,EAPYpB,EAArBkB,EAAA,CADCnB,EAAAA,cAAc,eAAA,CAAA,EACMC,CAAAA"}
1	+ {"version":3,"file":"menu-rX5RPAI2.cjs","sources":["../src/menu/menu-item.ts","../src/menu/menu.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { $dialog } from '../dialog/dialog-service'\n\n@customElement('schmancy-menu-item')\nexport default class SchmancyMenuItem extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\n\tprotected render(): unknown {\n\t\treturn html`\n\t\t\t<schmancy-list-item @click=${() => $dialog.dismiss()}>\n\t\t\t\t<slot></slot>\n\t\t\t</schmancy-list-item>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-menu-item': SchmancyMenuItem\n\t}\n}\n","import { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\nimport { $dialog } from '../dialog/dialog-service'\n\n/*\n Menu Component\n \n CRITICAL: The dialog ONLY renders the raw menu items passed via the default slot.\n * NO <ul> wrapper, NO classes, NO additional markup in the dialog call.\n * The dialog service handles positioning and display - we just pass the pure content.\n \n @example Basic menu with auto-dismiss\n * ```typescript\n * <schmancy-menu>\n * <schmancy-button slot=\"trigger\">Actions</schmancy-button>\n * <schmancy-menu-item @click=${() => editItem()}>Edit</schmancy-menu-item>\n * <schmancy-menu-item @click=${() => deleteItem()}>Delete</schmancy-menu-item>\n * </schmancy-menu>\n * ```\n * Note: Dialog auto-dismisses when schmancy-menu-item is clicked\n \n @example Custom component (manual dismiss)\n * ```typescript\n * <schmancy-menu>\n * <schmancy-icon-button slot=\"trigger\">settings</schmancy-icon-button>\n * <my-settings-form @submit=${() => $dialog.dismiss()}></my-settings-form>\n * </schmancy-menu>\n * ```\n * Note: Custom components must call $dialog.dismiss() manually\n \n @slot trigger - Button to open menu (new naming)\n * @slot button - Button to open menu (backward compatible)\n * @slot default - Menu items or any custom component to display in dialog\n */\n@customElement('schmancy-menu')\nexport default class SchmancyMenu extends $LitElement(css`\n\t:host {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t}\n`) {\n\t@query('slot:not([name])')\n\tprivate menuSlot!: HTMLSlotElement\n\n\tprivate showMenu(event: MouseEvent) {\n\t\tconst menuItems = this.menuSlot?.assignedElements() \|\| []\n\t\tif (menuItems.length === 0) return\n\n\t\t// Create container and move actual elements to preserve full functionality\n\t\tconst dialogContainer = document.createElement('div')\n\t\tmenuItems.forEach(item => dialogContainer.appendChild(item))\n\n\t\t$dialog\n\t\t\t.component(dialogContainer, {\n\t\t\t\tposition: event,\n\t\t\t\thideActions: true,\n\t\t})\n\t\t\t.finally(() => {\n\t\t\t\t// Restore elements as light DOM children (will be projected via slot)\n\t\t\t\tmenuItems.forEach(item => this.appendChild(item))\n\t\t\t})\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<slot name=\"trigger\" @click=${this.showMenu}>\n\t\t\t\t<slot name=\"button\" @click=${this.showMenu}>\n\t\t\t\t\t<schmancy-icon-button>more_vert</schmancy-icon-button>\n\t\t\t\t</slot>\n\t\t\t</slot>\n\t\t\t<div hidden>\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-menu': SchmancyMenu\n\t}\n}\n"],"names":["SchmancyMenuItem","$LitElement","css","render","html","$dialog","dismiss","customElement","SchmancyMenu","event","menuItems","this","menuSlot","assignedElements","length","dialogContainer","document","createElement","forEach","item","appendChild","component","position","hideActions","finally","showMenu","__decorateClass","query","prototype"],"mappings":"wWAMA,IAAqBA,EAArB,cAA8CC,EAAAA,YAAYC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAM/C,QAAAC,CACT,OAAOC,EAAAA;AAAAA,gCACuB,IAAMC,EAAAA,QAAQC,QAAAA,CAAAA;AAAAA;AAAAA;AAAAA,GAI7C,CAAA,EAZoBN,wGAArB,CADCO,EAAAA,cAAc,oBAAA,CAAA,EACMP,mMC8BrB,IAAqBQ,EAArB,cAA0CP,EAAAA,YAAYC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAS7C,SAASO,GAChB,MAAMC,EAAYC,KAAKC,UAAUC,iBAAAA,GAAsB,GACvD,GAAIH,EAAUI,SAAW,EAAG,OAG5B,MAAMC,EAAkBC,SAASC,cAAc,KAAA,EAC/CP,EAAUQ,QAAQC,GAAQJ,EAAgBK,YAAYD,IAEtDd,EAAAA,QACEgB,UAAUN,EAAiB,CAC3BO,SAAUb,EACVc,YAAAA,KAEAC,QAAQ,IAAA,CAERd,EAAUQ,QAAQC,GAAQR,KAAKS,YAAYD,CAAAA,CAAAA,CAAAA,CAAAA,CAE9C,CAEA,QAAAhB,CACC,OAAOC,EAAAA;AAAAA,iCACwBO,KAAKc,QAAAA;AAAAA,iCACLd,KAAKc,QAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAQrC,CAAA,EAhCQC,EAAA,CADPC,EAAAA,MAAM,qBANanB,EAOZoB,UAAA,WAAA,CAAA,EAPYpB,EAArBkB,EAAA,CADCnB,EAAAA,cAAc,eAAA,CAAA,EACMC,CAAAA"}

package/dist/menu.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./menu-vNrV-Nuq.cjs");
+"use strict";require("./menu-rX5RPAI2.cjs");
 //# sourceMappingURL=menu.cjs.map

package/dist/menu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import "./menu-HKqlq99V.js";
+import "./menu-Caju5-zd.js";
 //# sourceMappingURL=menu.js.map

package/dist/mixins.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tailwind.mixin-UijsBrYW.cjs"),i=require("./formField.mixin-DkN2ufR_.cjs"),l=require("./litElement.mixin-BVBdv0GP.cjs");exports.BaseElement=e.BaseElement,exports.TailwindElement=e.TailwindElement,exports.tailwindStyles=e.tailwindStyles,exports.FormFieldMixin=i.FormFieldMixin,exports.SchmancyFormField=i.SchmancyFormField,exports.$LitElement=l.$LitElement;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tailwind.mixin-Cp4PyXok.cjs"),i=require("./formField.mixin-BfJMifU9.cjs"),l=require("./litElement.mixin-CrpeGpZ7.cjs");exports.BaseElement=e.BaseElement,exports.TailwindElement=e.TailwindElement,exports.tailwindStyles=e.tailwindStyles,exports.FormFieldMixin=i.FormFieldMixin,exports.SchmancyFormField=i.SchmancyFormField,exports.$LitElement=l.$LitElement;
 //# sourceMappingURL=mixins.cjs.map

package/dist/mixins.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { B as t, T as i, t as m } from "./tailwind.mixin-Ddt05Frc.js";
-import { F as o, S as r } from "./formField.mixin-2jSL7WF_.js";
-import { $ as n } from "./litElement.mixin-Wcu4yIIs.js";
+import { B as t, T as i, t as m } from "./tailwind.mixin-Bp_PR6yc.js";
+import { F as o, S as r } from "./formField.mixin-BCGA7Ea3.js";
+import { $ as n } from "./litElement.mixin-DHZXtvYq.js";
 export {
   n as $LitElement,
   t as BaseElement,

package/dist/nav-drawer.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./avatar-DBfJucB9.cjs");exports.$drawer=e.$drawer,Object.defineProperty(exports,"SchmancyDrawerAppbar",{enumerable:!0,get:()=>e.SchmancyDrawerAppbar}),exports.SchmancyDrawerNavbarMode=e.SchmancyDrawerNavbarMode,exports.SchmancyDrawerNavbarState=e.SchmancyDrawerNavbarState,Object.defineProperty(exports,"SchmancyNavigationDrawer",{enumerable:!0,get:()=>e.SchmancyNavigationDrawer}),Object.defineProperty(exports,"SchmancyNavigationDrawerContent",{enumerable:!0,get:()=>e.SchmancyNavigationDrawerContent}),Object.defineProperty(exports,"SchmancyNavigationDrawerSidebar",{enumerable:!0,get:()=>e.SchmancyNavigationDrawerSidebar}),exports.schmancyNavDrawer=e.schmancyNavDrawer;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./avatar-nWOZXEsW.cjs");exports.$drawer=e.$drawer,Object.defineProperty(exports,"SchmancyDrawerAppbar",{enumerable:!0,get:()=>e.SchmancyDrawerAppbar}),exports.SchmancyDrawerNavbarMode=e.SchmancyDrawerNavbarMode,exports.SchmancyDrawerNavbarState=e.SchmancyDrawerNavbarState,Object.defineProperty(exports,"SchmancyNavigationDrawer",{enumerable:!0,get:()=>e.SchmancyNavigationDrawer}),Object.defineProperty(exports,"SchmancyNavigationDrawerContent",{enumerable:!0,get:()=>e.SchmancyNavigationDrawerContent}),Object.defineProperty(exports,"SchmancyNavigationDrawerSidebar",{enumerable:!0,get:()=>e.SchmancyNavigationDrawerSidebar}),exports.schmancyNavDrawer=e.schmancyNavDrawer;
 //# sourceMappingURL=nav-drawer.cjs.map

package/dist/nav-drawer.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { $ as c, k as e, m as n, n as m, o as s, l as o, p as t, j as w } from "./avatar-BdyuuIk7.js";
+import { $ as c, k as e, m as n, n as m, o as s, l as o, p as t, j as w } from "./avatar-rLCF6MSI.js";
 export {
   c as $drawer,
   e as SchmancyDrawerAppbar,

package/dist/navigation-bar.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./avatar-DBfJucB9.cjs");Object.defineProperty(exports,"SchmancyNavigationBar",{enumerable:!0,get:()=>e.SchmancyNavigationBar}),Object.defineProperty(exports,"SchmancyNavigationBarItem",{enumerable:!0,get:()=>e.SchmancyNavigationBarItem});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./avatar-nWOZXEsW.cjs");Object.defineProperty(exports,"SchmancyNavigationBar",{enumerable:!0,get:()=>e.SchmancyNavigationBar}),Object.defineProperty(exports,"SchmancyNavigationBarItem",{enumerable:!0,get:()=>e.SchmancyNavigationBarItem});
 //# sourceMappingURL=navigation-bar.cjs.map

package/dist/navigation-bar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as c, q as i } from "./avatar-BdyuuIk7.js";
+import { r as c, q as i } from "./avatar-rLCF6MSI.js";
 export {
   c as SchmancyNavigationBar,
   i as SchmancyNavigationBarItem

package/dist/{navigation-rail-DKXumnmt.js → navigation-rail-Ctketq5a.js} RENAMED Viewed

@@ -1,19 +1,19 @@
-import { BehaviorSubject as y, merge as m, fromEvent as v, takeUntil as f } from "rxjs";
-import { tap as p, delay as k, distinctUntilChanged as x } from "rxjs/operators";
+import { BehaviorSubject as g, merge as m, fromEvent as v, takeUntil as f } from "rxjs";
+import { tap as d, delay as k, distinctUntilChanged as x } from "rxjs/operators";
 import "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
-import { property as a, state as g, customElement as w, queryAssignedElements as V } from "lit/decorators.js";
-import "./tailwind.mixin-Ddt05Frc.js";
-import { $ } from "./litElement.mixin-Wcu4yIIs.js";
+import { property as a, state as y, customElement as w, queryAssignedElements as S } from "lit/decorators.js";
+import "./tailwind.mixin-Bp_PR6yc.js";
+import { $ } from "./litElement.mixin-DHZXtvYq.js";
 import { html as u } from "lit";
 import { when as b } from "lit/directives/when.js";
-var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (e, t, i, s) => {
-  for (var c, n = s > 1 ? void 0 : s ? E(t, i) : t, d = e.length - 1; d >= 0; d--) (c = e[d]) && (n = (s ? c(t, i, n) : c(n)) || n);
-  return s && n && S(t, i, n), n;
+var V = Object.defineProperty, C = Object.getOwnPropertyDescriptor, o = (e, t, i, s) => {
+  for (var c, n = s > 1 ? void 0 : s ? C(t, i) : t, p = e.length - 1; p >= 0; p--) (c = e[p]) && (n = (s ? c(t, i, n) : c(n)) || n);
+  return s && n && V(t, i, n), n;
 };
 let l = class extends $() {
   constructor() {
-    super(...arguments), this.hovering$ = new y(!1), this.pressing$ = new y(!1), this.active$ = new y(!1), this.icon = "", this.label = "", this.value = "", this.badge = "", this.badgeVariant = "error", this.showLabel = !1, this.disabled = !1, this.nested = !1, this.group = !1, this.showRipple = !1;
+    super(...arguments), this.hovering$ = new g(!1), this.pressing$ = new g(!1), this.active$ = new g(!1), this.icon = "", this.label = "", this.value = "", this.badge = "", this.badgeVariant = "error", this.showLabel = !1, this.disabled = !1, this.nested = !1, this.group = !1, this.showRipple = !1;
   }
   get active() {
     return this.active$.value;
@@ -28,9 +28,9 @@ let l = class extends $() {
     this.active = e;
   }
   connectedCallback() {
-    super.connectedCallback(), m(v(this, "mouseenter").pipe(p(() => this.hovering$.next(!0))), v(this, "mouseleave").pipe(p(() => this.hovering$.next(!1)))).pipe(f(this.disconnecting)).subscribe(), m(v(this, "mousedown").pipe(p(() => this.pressing$.next(!0))), v(this, "mouseup").pipe(p(() => this.pressing$.next(!1))), v(this, "mouseleave").pipe(p(() => this.pressing$.next(!1)))).pipe(f(this.disconnecting)).subscribe(), this.pressing$.pipe(p((e) => {
+    super.connectedCallback(), m(v(this, "mouseenter").pipe(d(() => this.hovering$.next(!0))), v(this, "mouseleave").pipe(d(() => this.hovering$.next(!1)))).pipe(f(this.disconnecting)).subscribe(), m(v(this, "mousedown").pipe(d(() => this.pressing$.next(!0))), v(this, "mouseup").pipe(d(() => this.pressing$.next(!1))), v(this, "mouseleave").pipe(d(() => this.pressing$.next(!1)))).pipe(f(this.disconnecting)).subscribe(), this.pressing$.pipe(d((e) => {
       e && !this.disabled && (this.showRipple = !0);
-    }), k(600), p(() => this.showRipple = !1), f(this.disconnecting)).subscribe(), this.active$.pipe(x(), p((e) => {
+    }), k(600), d(() => this.showRipple = !1), f(this.disconnecting)).subscribe(), this.active$.pipe(x(), d((e) => {
       this.requestUpdate(), this.setAttribute("aria-selected", String(e)), this.setAttribute("tabindex", e ? "0" : "-1");
     }), f(this.disconnecting)).subscribe(), this.setAttribute("role", "listitem"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", this.active ? "0" : "-1");
   }
@@ -45,7 +45,7 @@ let l = class extends $() {
     this.disabled || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this.click());
   }
   render() {
-    const e = !!this.querySelector('[slot="icon"]'), t = this.querySelector('[slot="badge"]'), i = this.classMap({ "flex flex-col items-center justify-center": !0, "min-h-14 w-full": !0, "py-3": !0, "gap-1": !0, "rounded-lg": !0, "cursor-pointer": !0, relative: !0, "select-none": !0, "box-border": !0, "text-surface-onVariant": !this.active, "text-secondary-onContainer": this.active, "hover:bg-surface-containerHighest": !0, "transition-all duration-150 ease-out": !0, "pointer-events-none opacity-38": this.disabled, "[&>.ripple]:scale-100": this.showRipple, "min-h-12 pl-8": this.nested, "mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12": this.group }), s = this.classMap({ "flex items-center justify-center": !0, "w-auto min-w-14 h-8": !0, "flex-shrink-0 relative z-10": !0 }), c = this.classMap({ "absolute top-1/2 left-1/2 opacity-50": !0, "w-14 h-8": !0, "rounded-lg": !0, "bg-secondary-container": !0, "transition-transform duration-150 ease-out": !0, "z-0": !0, "scale-0 -translate-x-1/2 -translate-y-1/2": !this.active, "scale-100 -translate-x-1/2 -translate-y-1/2": this.active }), n = this.classMap({ "text-2xl leading-none": !this.nested, "text-xl leading-none": this.nested, "relative z-10": !0 }), d = this.classMap({ "text-xs font-medium leading-4": !0, "text-center": !0, "overflow-hidden text-ellipsis whitespace-nowrap": !0, "z-10 max-w-14 px-1": !0, hidden: !this.showLabel && !this.label }), A = this.classMap({ "absolute top-2 right-3": !0, "min-w-4 h-4": !0, "rounded-sm": !0, "text-xs font-semibold": !0, "flex items-center justify-center": !0, "px-1 box-border z-20": !0, "animate-pulse": !0, "bg-error-default text-error-on": this.badgeVariant === "error", "bg-primary-default text-primary-on": this.badgeVariant === "primary", "bg-secondary-default text-secondary-on": this.badgeVariant === "secondary" }), I = this.classMap({ "absolute inset-0 rounded-lg overflow-hidden z-0": !0, 'before:content-[""] before:absolute before:top-1/2 before:left-1/2': !0, "before:w-0 before:h-0 before:rounded-full": !0, "before:bg-current before:opacity-0": !0, "before:-translate-x-1/2 before:-translate-y-1/2": !0, "before:transition-all before:duration-300": !0, "before:w-[200%] before:h-[200%] before:opacity-12": this.showRipple });
+    const e = !!this.querySelector('[slot="icon"]'), t = this.querySelector('[slot="badge"]'), i = this.classMap({ "flex flex-col items-center justify-center": !0, "min-h-14 w-full": !0, "py-3": !0, "gap-1": !0, "rounded-lg": !0, "cursor-pointer": !0, relative: !0, "select-none": !0, "box-border": !0, "text-surface-onVariant": !this.active, "text-secondary-onContainer": this.active, "hover:bg-surface-containerHighest": !0, "transition-all duration-150 ease-out": !0, "pointer-events-none opacity-38": this.disabled, "[&>.ripple]:scale-100": this.showRipple, "min-h-12 pl-8": this.nested, "mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12": this.group }), s = this.classMap({ "flex items-center justify-center": !0, "w-auto min-w-14 h-8": !0, "flex-shrink-0 relative z-10": !0 }), c = this.classMap({ "absolute top-1/2 left-1/2 opacity-50": !0, "w-14 h-8": !0, "rounded-lg": !0, "bg-secondary-container": !0, "transition-transform duration-150 ease-out": !0, "z-0": !0, "scale-0 -translate-x-1/2 -translate-y-1/2": !this.active, "scale-100 -translate-x-1/2 -translate-y-1/2": this.active }), n = this.classMap({ "text-2xl leading-none": !this.nested, "text-xl leading-none": this.nested, "relative z-10": !0 }), p = this.classMap({ "text-xs font-medium leading-4": !0, "text-center": !0, "overflow-hidden text-ellipsis whitespace-nowrap": !0, "z-10 max-w-14 px-1": !0, hidden: !this.showLabel && !this.label }), A = this.classMap({ "absolute top-2 right-3": !0, "min-w-4 h-4": !0, "rounded-sm": !0, "text-xs font-semibold": !0, "flex items-center justify-center": !0, "px-1 box-border z-20": !0, "animate-pulse": !0, "bg-error-default text-error-on": this.badgeVariant === "error", "bg-primary-default text-primary-on": this.badgeVariant === "primary", "bg-secondary-default text-secondary-on": this.badgeVariant === "secondary" }), I = this.classMap({ "absolute inset-0 rounded-lg overflow-hidden z-0": !0, 'before:content-[""] before:absolute before:top-1/2 before:left-1/2': !0, "before:w-0 before:h-0 before:rounded-full": !0, "before:bg-current before:opacity-0": !0, "before:-translate-x-1/2 before:-translate-y-1/2": !0, "before:transition-all before:duration-300": !0, "before:w-[200%] before:h-[200%] before:opacity-12": this.showRipple });
     return u`
 			<div
 				class=${i}
@@ -69,7 +69,7 @@ let l = class extends $() {
 									`))}
 						</div>
-						${b(this.label, () => u`<span class=${d} part="label">${this.label}</span>`)}
+						${b(this.label, () => u`<span class=${p} part="label">${this.label}</span>`)}
 				${b(this.badge, () => u`
 						${b(t, () => u`<slot name="badge"></slot>`, () => u`
@@ -101,14 +101,14 @@ let l = class extends $() {
 		`;
   }
 };
-o([a({ type: String })], l.prototype, "icon", 2), o([a({ type: String })], l.prototype, "label", 2), o([a({ type: String })], l.prototype, "value", 2), o([a({ type: Boolean, reflect: !0 })], l.prototype, "active", 1), o([a({ type: Boolean, reflect: !0 })], l.prototype, "selected", 1), o([a({ type: String })], l.prototype, "badge", 2), o([a({ type: String })], l.prototype, "badgeVariant", 2), o([a({ type: Boolean, attribute: "show-label" })], l.prototype, "showLabel", 2), o([a({ type: Boolean, reflect: !0 })], l.prototype, "disabled", 2), o([a({ type: Boolean, reflect: !0 })], l.prototype, "nested", 2), o([a({ type: Boolean, reflect: !0 })], l.prototype, "group", 2), o([g()], l.prototype, "showRipple", 2), l = o([w("schmancy-navigation-rail-item")], l);
-var C = Object.defineProperty, M = Object.getOwnPropertyDescriptor, h = (e, t, i, s) => {
-  for (var c, n = s > 1 ? void 0 : s ? M(t, i) : t, d = e.length - 1; d >= 0; d--) (c = e[d]) && (n = (s ? c(t, i, n) : c(n)) || n);
-  return s && n && C(t, i, n), n;
+o([a({ type: String })], l.prototype, "icon", 2), o([a({ type: String })], l.prototype, "label", 2), o([a({ type: String })], l.prototype, "value", 2), o([a({ type: Boolean, reflect: !0 })], l.prototype, "active", 1), o([a({ type: Boolean, reflect: !0 })], l.prototype, "selected", 1), o([a({ type: String })], l.prototype, "badge", 2), o([a({ type: String })], l.prototype, "badgeVariant", 2), o([a({ type: Boolean, attribute: "show-label" })], l.prototype, "showLabel", 2), o([a({ type: Boolean, reflect: !0 })], l.prototype, "disabled", 2), o([a({ type: Boolean, reflect: !0 })], l.prototype, "nested", 2), o([a({ type: Boolean, reflect: !0 })], l.prototype, "group", 2), o([y()], l.prototype, "showRipple", 2), l = o([w("schmancy-navigation-rail-item")], l);
+var E = Object.defineProperty, M = Object.getOwnPropertyDescriptor, h = (e, t, i, s) => {
+  for (var c, n = s > 1 ? void 0 : s ? M(t, i) : t, p = e.length - 1; p >= 0; p--) (c = e[p]) && (n = (s ? c(t, i, n) : c(n)) || n);
+  return s && n && E(t, i, n), n;
 };
 let r = class extends $() {
   constructor() {
-    super(...arguments), this.activeIndex$ = new y(-1), this._activeValue = "", this.labelVisibility = "all", this.alignment = "top", this.showTooltips = !0, this.keyboardNavigation = !0, this.expanded = !1, this.focusedIndex = -1, this.isFullscreen = !1;
+    super(...arguments), this.activeIndex$ = new g(-1), this._activeValue = "", this.labelVisibility = "all", this.alignment = "top", this.showTooltips = !0, this.keyboardNavigation = !0, this.expanded = !1, this.focusedIndex = -1, this.hasHeaderContent = !1, this.isFullscreen = !1;
   }
   get activeIndex() {
     return this.activeIndex$.value;
@@ -126,7 +126,7 @@ let r = class extends $() {
     return this.allElements.filter((e) => e.tagName === "SCHMANCY-NAVIGATION-RAIL-ITEM");
   }
   connectedCallback() {
-    super.connectedCallback(), this.keyboardNavigation && this.addEventListener("keydown", this.handleKeyDown), this.activeIndex$.pipe(x(), p((e) => this.updateActiveStates(e)), f(this.disconnecting)).subscribe(), v(window, "fullscreen").pipe(p((e) => {
+    super.connectedCallback(), this.keyboardNavigation && this.addEventListener("keydown", this.handleKeyDown), this.activeIndex$.pipe(x(), d((e) => this.updateActiveStates(e)), f(this.disconnecting)).subscribe(), v(window, "fullscreen").pipe(d((e) => {
       const t = e;
       this.isFullscreen = t.detail;
     }), f(this.disconnecting)).subscribe(), this.setupNavigateListener(), this.updateLabelVisibility(), this.setAttribute("role", "navigation"), this.setAttribute("aria-label", "Main navigation");
@@ -202,16 +202,16 @@ let r = class extends $() {
     e.stopPropagation(), this.dispatchEvent(new CustomEvent("menu-click", { bubbles: !0, composed: !0 }));
   }
   render() {
-    const e = this.classMap({ "flex flex-col": !0, "h-full": !0, "box-border relative overflow-visible": !0, "z-10 hover:z-[100]": !0, "w-20": !this.isFullscreen, "w-0": this.isFullscreen, "transition-all duration-300 ease-emphasized": !0, "opacity-100": !this.isFullscreen, "opacity-0 pointer-events-none": this.isFullscreen, "overflow-hidden": this.isFullscreen }), t = this.classMap({ "flex flex-col h-full": !0, "box-border relative": !0, "py-2": !0, "bg-surface-default text-surface-on": !0, "transition-all duration-300 ease-emphasized": !0, "w-20": !this.expanded, "px-3": !this.expanded, "w-60": this.expanded, "px-4": this.expanded, "shadow-lg": this.expanded }), i = this.classMap({ "flex flex-col items-center gap-1 mb-2": !0, '[&_[slot="fab"]]:mb-2': !0, '[&_[slot="menu"]]:mb-3': !0 }), s = this.classMap({ "flex-1 flex flex-col gap-3": !0, "min-h-0": !0, "justify-start": this.alignment === "top", "justify-center": this.alignment === "center", "justify-end": this.alignment === "bottom" }), c = this.classMap({ "flex flex-col items-center gap-1 mt-auto pt-2": !0 });
+    const e = this.classMap({ "flex flex-col": !0, "h-full": !0, "box-border relative overflow-visible": !0, "z-10 hover:z-[100]": !0, "w-20": !this.isFullscreen, "w-0": this.isFullscreen, "transition-all duration-300 ease-emphasized": !0, "opacity-100": !this.isFullscreen, "opacity-0 pointer-events-none": this.isFullscreen, "overflow-hidden": this.isFullscreen }), t = this.classMap({ "flex flex-col h-full": !0, "box-border relative": !0, "py-2": !0, "bg-surface-default text-surface-on": !0, "transition-all duration-300 ease-emphasized": !0, "w-20": !this.expanded, "px-3": !this.expanded, "w-60": this.expanded, "px-4": this.expanded, "shadow-lg": this.expanded }), i = this.classMap({ "flex flex-col items-center gap-1": !0, hidden: !this.hasHeaderContent }), s = this.classMap({ "flex-1 flex flex-col gap-3": !0, "min-h-0": !0, "justify-start": this.alignment === "top", "justify-center": this.alignment === "center", "justify-end": this.alignment === "bottom" }), c = this.classMap({ "flex flex-col items-center gap-1 mt-auto pt-2": !0 });
     return u`
 			<div
 				class=${e}
 			>
 				<div class=${t} part="rail">
 					<div class=${i} part="header">
-						<slot name="fab" @click=${this.handleFabClick}></slot>
-						<slot name="menu" @click=${this.handleMenuClick}></slot>
-						<slot name="header"></slot>
+						<slot name="fab" @click=${this.handleFabClick} @slotchange=${this.handleHeaderSlotChange}></slot>
+						<slot name="menu" @click=${this.handleMenuClick} @slotchange=${this.handleHeaderSlotChange}></slot>
+						<slot name="header" @slotchange=${this.handleHeaderSlotChange}></slot>
 					</div>
 					<nav class=${s} part="nav" role="list">
@@ -235,15 +235,22 @@ let r = class extends $() {
       }
     });
   }
+  handleHeaderSlotChange() {
+    const e = this.shadowRoot?.querySelector('[part="header"]');
+    if (e) {
+      const t = e.querySelectorAll("slot");
+      this.hasHeaderContent = Array.from(t).some((i) => i.assignedNodes({ flatten: !0 }).length > 0);
+    }
+  }
   handleSlotChange() {
     this.updateLabelVisibility(), this.updateActiveStates(this.activeIndex), this.navigationItems.forEach((e, t) => {
       e.setAttribute("role", "listitem"), e.hasAttribute("tabindex") || e.setAttribute("tabindex", t === this.activeIndex ? "0" : "-1");
     });
   }
 };
-h([a({ type: Number })], r.prototype, "activeIndex", 1), h([a({ type: String })], r.prototype, "activeValue", 1), h([a({ type: String, attribute: "label-visibility", reflect: !0 })], r.prototype, "labelVisibility", 2), h([a({ type: String, reflect: !0 })], r.prototype, "alignment", 2), h([a({ type: Boolean })], r.prototype, "showTooltips", 2), h([a({ type: Boolean })], r.prototype, "keyboardNavigation", 2), h([a({ type: Boolean, reflect: !0 })], r.prototype, "expanded", 2), h([g()], r.prototype, "focusedIndex", 2), h([g()], r.prototype, "isFullscreen", 2), h([V({ flatten: !0 })], r.prototype, "allElements", 2), r = h([w("schmancy-navigation-rail")], r);
+h([a({ type: Number })], r.prototype, "activeIndex", 1), h([a({ type: String })], r.prototype, "activeValue", 1), h([a({ type: String, attribute: "label-visibility", reflect: !0 })], r.prototype, "labelVisibility", 2), h([a({ type: String, reflect: !0 })], r.prototype, "alignment", 2), h([a({ type: Boolean })], r.prototype, "showTooltips", 2), h([a({ type: Boolean })], r.prototype, "keyboardNavigation", 2), h([a({ type: Boolean, reflect: !0 })], r.prototype, "expanded", 2), h([y()], r.prototype, "focusedIndex", 2), h([y()], r.prototype, "hasHeaderContent", 2), h([y()], r.prototype, "isFullscreen", 2), h([S({ flatten: !0 })], r.prototype, "allElements", 2), r = h([w("schmancy-navigation-rail")], r);
 export {
   l as S,
   r as a
 };
-//# sourceMappingURL=navigation-rail-DKXumnmt.js.map
+//# sourceMappingURL=navigation-rail-Ctketq5a.js.map

package/dist/navigation-rail-Ctketq5a.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"navigation-rail-Ctketq5a.js","sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\r\nimport { 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 { delay, distinctUntilChanged, tap } 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 * \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 * \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() {\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 with M3 timing\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\t// M3 standard ripple duration\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 hasCustomBadge = this.querySelector('[slot=\"badge\"]')\r\n\r\n\t\t// M3 Navigation Rail Item classes with theme integration\r\n\t\tconst containerClasses = this.classMap({\r\n\t\t\t// Layout & Spacing (M3 56px height, 12px vertical padding)\r\n\t\t\t'flex flex-col items-center justify-center': true,\r\n\t\t\t'min-h-14 w-full': true, // min-h-14 = 56px\r\n\t\t\t'py-3': true, // py-3 = 12px top/bottom\r\n\t\t\t'gap-1': true, // gap-1 = 4px\r\n\r\n\t\t\t// M3 Shape & Interaction\r\n\t\t\t'rounded-lg': true, // M3 large corner radius\r\n\t\t\t'cursor-pointer': true,\r\n\t\t\t'relative': true,\r\n\t\t\t'select-none': true,\r\n\t\t\t'box-border': true,\r\n\r\n\t\t\t// Colors & States\r\n\t\t\t'text-surface-onVariant': !this.active,\r\n\t\t\t'text-secondary-onContainer': this.active,\r\n\t\t\t'hover:bg-surface-containerHighest': true,\r\n\r\n\t\t\t// Transitions (M3 emphasized motion)\r\n\t\t\t'transition-all duration-150 ease-out': true,\r\n\r\n\t\t\t// Disabled state\r\n\t\t\t'pointer-events-none opacity-38': this.disabled,\r\n\r\n\t\t\t// Active ripple effect\r\n\t\t\t'[&>.ripple]:scale-100': this.showRipple,\r\n\r\n\t\t\t// Nested item adjustments\r\n\t\t\t'min-h-12 pl-8': this.nested, // 48px height, 32px left padding for nested\r\n\r\n\t\t\t// Group separator\r\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': this.group,\r\n\t\t})\r\n\r\n\t\t// Icon container with active indicator\r\n\t\tconst iconContainerClasses = this.classMap({\r\n\t\t\t'flex items-center justify-center': true,\r\n\t\t\t'w-auto min-w-14 h-8': true, // 56px min-width, 32px height\r\n\t\t\t'flex-shrink-0 relative z-10': true,\r\n\t\t})\r\n\r\n\t\t// Active indicator behind icon\r\n\t\tconst indicatorClasses = this.classMap({\r\n\t\t\t'absolute top-1/2 left-1/2 opacity-50': true,\r\n\t\t\t'w-14 h-8': true, // 56px x 32px\r\n\t\t\t'rounded-lg': true, // M3 large corner radius\r\n\t\t\t'bg-secondary-container': true,\r\n\t\t\t'transition-transform duration-150 ease-out': true,\r\n\t\t\t'z-0': true,\r\n\t\t\t// Transform based on active state\r\n\t\t\t'scale-0 -translate-x-1/2 -translate-y-1/2': !this.active,\r\n\t\t\t'scale-100 -translate-x-1/2 -translate-y-1/2': this.active,\r\n\t\t})\r\n\r\n\t\t// Icon styling\r\n\t\tconst iconClasses = this.classMap({\r\n\t\t\t'text-2xl leading-none': !this.nested, // 24px icon for normal\r\n\t\t\t'text-xl leading-none': this.nested, // 20px icon for nested\r\n\t\t\t'relative z-10': true,\r\n\t\t\t// Material Symbols font variations handled via CSS custom properties\r\n\t\t})\r\n\r\n\t\t// Label styling\r\n\t\tconst labelClasses = this.classMap({\r\n\t\t\t'text-xs font-medium leading-4': true, // 12px, medium weight, 16px line height\r\n\t\t\t'text-center': true,\r\n\t\t\t'overflow-hidden text-ellipsis whitespace-nowrap': true,\r\n\t\t\t'z-10 max-w-14 px-1': true, // max 56px width, 4px horizontal padding\r\n\t\t\t'hidden': !this.showLabel && !this.label, // Hide if not shown or no label\r\n\t\t})\r\n\r\n\t\t// Badge styling with dynamic colors\r\n\t\tconst badgeClasses = this.classMap({\r\n\t\t\t'absolute top-2 right-3': true, // 8px from top, 12px from right\r\n\t\t\t'min-w-4 h-4': true, // 16px min-width and height\r\n\t\t\t'rounded-sm': true, // M3 small corner radius\r\n\t\t\t'text-xs font-semibold': true, // 11px, 600 weight\r\n\t\t\t'flex items-center justify-center': true,\r\n\t\t\t'px-1 box-border z-20': true, // 4px padding\r\n\t\t\t'animate-pulse': true, // Pulse animation\r\n\t\t\t// Dynamic background based on variant\r\n\t\t\t'bg-error-default text-error-on': this.badgeVariant === 'error',\r\n\t\t\t'bg-primary-default text-primary-on': this.badgeVariant === 'primary',\r\n\t\t\t'bg-secondary-default text-secondary-on': this.badgeVariant === 'secondary',\r\n\t\t})\r\n\r\n\t\t// Ripple effect classes\r\n\t\tconst rippleClasses = this.classMap({\r\n\t\t\t'absolute inset-0 rounded-lg overflow-hidden z-0': true,\r\n\t\t\t'before:content-[\"\"] before:absolute before:top-1/2 before:left-1/2': true,\r\n\t\t\t'before:w-0 before:h-0 before:rounded-full': true,\r\n\t\t\t'before:bg-current before:opacity-0': true,\r\n\t\t\t'before:-translate-x-1/2 before:-translate-y-1/2': true,\r\n\t\t\t'before:transition-all before:duration-300': true,\r\n\t\t\t// Active state\r\n\t\t\t'before:w-[200%] before:h-[200%] before:opacity-12': this.showRipple,\r\n\t\t})\r\n\r\n\t\treturn html`\r\n\t\t\t<div\r\n\t\t\t\tclass=${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\tstyle=\"outline: ${this.matches(':focus-visible') ? '2px solid var(--schmancy-sys-color-primary-default)' : 'none'}; outline-offset: 2px;\"\r\n\t\t\t>\r\n\t\t\t\t<span class=${rippleClasses} aria-hidden=\"true\"></span>\r\n\r\n\t\t\t\t<div class=${iconContainerClasses} part=\"icon\">\r\n\t\t\t\t\t\t\t<span class=${indicatorClasses} 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`\r\n\t\t\t\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\t\t\t\tclass=${iconClasses}\r\n\t\t\t\t\t\t\t\t\t\t\tpart=\"icon-text\"\r\n\t\t\t\t\t\t\t\t\t\t\tstyle=\"font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' ${this.active ? '1' : '0'}, 'wght' 400, 'GRAD' 0, 'opsz' ${this.nested ? '20' : '24'};\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t${this.icon}\r\n\t\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t`\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=${labelClasses} part=\"label\">${this.label}</span>`\r\n\t\t\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=${badgeClasses}\r\n\t\t\t\t\t\t\t\t\tpart=\"badge\"\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\r\n\t\t\t\t\r\n\t\t\t\t${when(this.hasAttribute('title'),\r\n\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t<div class=\"\r\n\t\t\t\t\t\t\tabsolute left-[calc(100%+8px)] top-1/2 -translate-y-1/2\r\n\t\t\t\t\t\t\tbg-surface-inverse text-surface-inverseOn\r\n\t\t\t\t\t\t\tpx-2 py-1 rounded-sm text-xs whitespace-nowrap\r\n\t\t\t\t\t\t\tz-[1000] pointer-events-none opacity-0\r\n\t\t\t\t\t\t\thover:opacity-100 hover:translate-x-0\r\n\t\t\t\t\t\t\ttransition-all duration-150 ease-out\r\n\t\t\t\t\t\t\t-translate-x-1\r\n\t\t\t\t\t\t\" aria-hidden=\"true\">\r\n\t\t\t\t\t\t\t${this.getAttribute('title')}\r\n\t\t\t\t\t\t</div>\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 { 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-surface-default 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"],"names":["SchmancyNavigationRailItem","$LitElement","constructor","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","render","hasCustomIcon","querySelector","hasCustomBadge","containerClasses","classMap","relative","iconContainerClasses","indicatorClasses","iconClasses","labelClasses","hidden","badgeClasses","rippleClasses","html","handleClick","handleKeyDown","matches","when","getAttribute","__decorateClass","property","type","prototype","Boolean","reflect","attribute","state","customElement","SchmancyNavigationRail","activeIndex$","_activeValue","labelVisibility","alignment","showTooltips","keyboardNavigation","expanded","focusedIndex","hasHeaderContent","isFullscreen","activeIndex","activeValue","updateActiveByValue","allElements","filter","el","tagName","addEventListener","index","updateActiveStates","window","customEvent","setupNavigateListener","updateLabelVisibility","navigationItems","forEach","item","i","findIndex","shouldShowLabel","removeAttribute","collapse","config","existingItem","id","document","createElement","innerHTML","title","footer","insertBefore","appendChild","items","length","newIndex","focus","hostClasses","railClasses","headerClasses","navClasses","footerClasses","handleFabClick","handleHeaderSlotChange","handleMenuClick","handleSlotChange","e","itemIndex","headerDiv","shadowRoot","allSlots","querySelectorAll","Array","from","some","s","assignedNodes","flatten","Number","queryAssignedElements"],"mappings":"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"}

package/dist/{navigation-rail-D1o3qDe_.cjs → navigation-rail-DC9_oSIM.cjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-"use strict";const n=require("rxjs"),r=require("rxjs/operators");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const s=require("lit/decorators.js");require("./tailwind.mixin-UijsBrYW.cjs");const b=require("./litElement.mixin-BVBdv0GP.cjs"),d=require("lit"),u=require("lit/directives/when.js");var m=Object.defineProperty,g=Object.getOwnPropertyDescriptor,o=(e,t,i,a)=>{for(var c,l=a>1?void 0:a?g(t,i):t,p=e.length-1;p>=0;p--)(c=e[p])&&(l=(a?c(t,i,l):c(l))||l);return a&&l&&m(t,i,l),l};exports.SchmancyNavigationRailItem=class extends b.$LitElement(){constructor(){super(...arguments),this.hovering$=new n.BehaviorSubject(!1),this.pressing$=new n.BehaviorSubject(!1),this.active$=new n.BehaviorSubject(!1),this.icon="",this.label="",this.value="",this.badge="",this.badgeVariant="error",this.showLabel=!1,this.disabled=!1,this.nested=!1,this.group=!1,this.showRipple=!1}get active(){return this.active$.value}set active(e){this.active$.next(e)}get selected(){return this.active}set selected(e){this.active=e}connectedCallback(){super.connectedCallback(),n.merge(n.fromEvent(this,"mouseenter").pipe(r.tap(()=>this.hovering$.next(!0))),n.fromEvent(this,"mouseleave").pipe(r.tap(()=>this.hovering$.next(!1)))).pipe(n.takeUntil(this.disconnecting)).subscribe(),n.merge(n.fromEvent(this,"mousedown").pipe(r.tap(()=>this.pressing$.next(!0))),n.fromEvent(this,"mouseup").pipe(r.tap(()=>this.pressing$.next(!1))),n.fromEvent(this,"mouseleave").pipe(r.tap(()=>this.pressing$.next(!1)))).pipe(n.takeUntil(this.disconnecting)).subscribe(),this.pressing$.pipe(r.tap(e=>{e&&!this.disabled&&(this.showRipple=!0)}),r.delay(600),r.tap(()=>this.showRipple=!1),n.takeUntil(this.disconnecting)).subscribe(),this.active$.pipe(r.distinctUntilChanged(),r.tap(e=>{this.requestUpdate(),this.setAttribute("aria-selected",String(e)),this.setAttribute("tabindex",e?"0":"-1")}),n.takeUntil(this.disconnecting)).subscribe(),this.setAttribute("role","listitem"),this.hasAttribute("tabindex")||this.setAttribute("tabindex",this.active?"0":"-1")}updated(e){super.updated(e),e.has("disabled")&&this.setAttribute("aria-disabled",String(this.disabled)),e.has("label")&&this.setAttribute("aria-label",this.label)}handleClick(e){if(this.disabled)return e.preventDefault(),void e.stopPropagation();this.dispatchEvent(new CustomEvent("navigate",{detail:this.value||this.label,bubbles:!0,composed:!0}))}handleKeyDown(e){this.disabled||e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.click())}render(){const e=!!this.querySelector('[slot="icon"]'),t=this.querySelector('[slot="badge"]'),i=this.classMap({"flex flex-col items-center justify-center":!0,"min-h-14 w-full":!0,"py-3":!0,"gap-1":!0,"rounded-lg":!0,"cursor-pointer":!0,relative:!0,"select-none":!0,"box-border":!0,"text-surface-onVariant":!this.active,"text-secondary-onContainer":this.active,"hover:bg-surface-containerHighest":!0,"transition-all duration-150 ease-out":!0,"pointer-events-none opacity-38":this.disabled,"[&>.ripple]:scale-100":this.showRipple,"min-h-12 pl-8":this.nested,"mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12":this.group}),a=this.classMap({"flex items-center justify-center":!0,"w-auto min-w-14 h-8":!0,"flex-shrink-0 relative z-10":!0}),c=this.classMap({"absolute top-1/2 left-1/2 opacity-50":!0,"w-14 h-8":!0,"rounded-lg":!0,"bg-secondary-container":!0,"transition-transform duration-150 ease-out":!0,"z-0":!0,"scale-0 -translate-x-1/2 -translate-y-1/2":!this.active,"scale-100 -translate-x-1/2 -translate-y-1/2":this.active}),l=this.classMap({"text-2xl leading-none":!this.nested,"text-xl leading-none":this.nested,"relative z-10":!0}),p=this.classMap({"text-xs font-medium leading-4":!0,"text-center":!0,"overflow-hidden text-ellipsis whitespace-nowrap":!0,"z-10 max-w-14 px-1":!0,hidden:!this.showLabel&&!this.label}),v=this.classMap({"absolute top-2 right-3":!0,"min-w-4 h-4":!0,"rounded-sm":!0,"text-xs font-semibold":!0,"flex items-center justify-center":!0,"px-1 box-border z-20":!0,"animate-pulse":!0,"bg-error-default text-error-on":this.badgeVariant==="error","bg-primary-default text-primary-on":this.badgeVariant==="primary","bg-secondary-default text-secondary-on":this.badgeVariant==="secondary"}),y=this.classMap({"absolute inset-0 rounded-lg overflow-hidden z-0":!0,'before:content-[""] before:absolute before:top-1/2 before:left-1/2':!0,"before:w-0 before:h-0 before:rounded-full":!0,"before:bg-current before:opacity-0":!0,"before:-translate-x-1/2 before:-translate-y-1/2":!0,"before:transition-all before:duration-300":!0,"before:w-[200%] before:h-[200%] before:opacity-12":this.showRipple});return d.html`
+"use strict";const n=require("rxjs"),r=require("rxjs/operators");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const a=require("lit/decorators.js");require("./tailwind.mixin-Cp4PyXok.cjs");const b=require("./litElement.mixin-CrpeGpZ7.cjs"),d=require("lit"),u=require("lit/directives/when.js");var g=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(e,t,i,s)=>{for(var h,l=s>1?void 0:s?m(t,i):t,p=e.length-1;p>=0;p--)(h=e[p])&&(l=(s?h(t,i,l):h(l))||l);return s&&l&&g(t,i,l),l};exports.SchmancyNavigationRailItem=class extends b.$LitElement(){constructor(){super(...arguments),this.hovering$=new n.BehaviorSubject(!1),this.pressing$=new n.BehaviorSubject(!1),this.active$=new n.BehaviorSubject(!1),this.icon="",this.label="",this.value="",this.badge="",this.badgeVariant="error",this.showLabel=!1,this.disabled=!1,this.nested=!1,this.group=!1,this.showRipple=!1}get active(){return this.active$.value}set active(e){this.active$.next(e)}get selected(){return this.active}set selected(e){this.active=e}connectedCallback(){super.connectedCallback(),n.merge(n.fromEvent(this,"mouseenter").pipe(r.tap(()=>this.hovering$.next(!0))),n.fromEvent(this,"mouseleave").pipe(r.tap(()=>this.hovering$.next(!1)))).pipe(n.takeUntil(this.disconnecting)).subscribe(),n.merge(n.fromEvent(this,"mousedown").pipe(r.tap(()=>this.pressing$.next(!0))),n.fromEvent(this,"mouseup").pipe(r.tap(()=>this.pressing$.next(!1))),n.fromEvent(this,"mouseleave").pipe(r.tap(()=>this.pressing$.next(!1)))).pipe(n.takeUntil(this.disconnecting)).subscribe(),this.pressing$.pipe(r.tap(e=>{e&&!this.disabled&&(this.showRipple=!0)}),r.delay(600),r.tap(()=>this.showRipple=!1),n.takeUntil(this.disconnecting)).subscribe(),this.active$.pipe(r.distinctUntilChanged(),r.tap(e=>{this.requestUpdate(),this.setAttribute("aria-selected",String(e)),this.setAttribute("tabindex",e?"0":"-1")}),n.takeUntil(this.disconnecting)).subscribe(),this.setAttribute("role","listitem"),this.hasAttribute("tabindex")||this.setAttribute("tabindex",this.active?"0":"-1")}updated(e){super.updated(e),e.has("disabled")&&this.setAttribute("aria-disabled",String(this.disabled)),e.has("label")&&this.setAttribute("aria-label",this.label)}handleClick(e){if(this.disabled)return e.preventDefault(),void e.stopPropagation();this.dispatchEvent(new CustomEvent("navigate",{detail:this.value||this.label,bubbles:!0,composed:!0}))}handleKeyDown(e){this.disabled||e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.click())}render(){const e=!!this.querySelector('[slot="icon"]'),t=this.querySelector('[slot="badge"]'),i=this.classMap({"flex flex-col items-center justify-center":!0,"min-h-14 w-full":!0,"py-3":!0,"gap-1":!0,"rounded-lg":!0,"cursor-pointer":!0,relative:!0,"select-none":!0,"box-border":!0,"text-surface-onVariant":!this.active,"text-secondary-onContainer":this.active,"hover:bg-surface-containerHighest":!0,"transition-all duration-150 ease-out":!0,"pointer-events-none opacity-38":this.disabled,"[&>.ripple]:scale-100":this.showRipple,"min-h-12 pl-8":this.nested,"mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12":this.group}),s=this.classMap({"flex items-center justify-center":!0,"w-auto min-w-14 h-8":!0,"flex-shrink-0 relative z-10":!0}),h=this.classMap({"absolute top-1/2 left-1/2 opacity-50":!0,"w-14 h-8":!0,"rounded-lg":!0,"bg-secondary-container":!0,"transition-transform duration-150 ease-out":!0,"z-0":!0,"scale-0 -translate-x-1/2 -translate-y-1/2":!this.active,"scale-100 -translate-x-1/2 -translate-y-1/2":this.active}),l=this.classMap({"text-2xl leading-none":!this.nested,"text-xl leading-none":this.nested,"relative z-10":!0}),p=this.classMap({"text-xs font-medium leading-4":!0,"text-center":!0,"overflow-hidden text-ellipsis whitespace-nowrap":!0,"z-10 max-w-14 px-1":!0,hidden:!this.showLabel&&!this.label}),v=this.classMap({"absolute top-2 right-3":!0,"min-w-4 h-4":!0,"rounded-sm":!0,"text-xs font-semibold":!0,"flex items-center justify-center":!0,"px-1 box-border z-20":!0,"animate-pulse":!0,"bg-error-default text-error-on":this.badgeVariant==="error","bg-primary-default text-primary-on":this.badgeVariant==="primary","bg-secondary-default text-secondary-on":this.badgeVariant==="secondary"}),y=this.classMap({"absolute inset-0 rounded-lg overflow-hidden z-0":!0,'before:content-[""] before:absolute before:top-1/2 before:left-1/2':!0,"before:w-0 before:h-0 before:rounded-full":!0,"before:bg-current before:opacity-0":!0,"before:-translate-x-1/2 before:-translate-y-1/2":!0,"before:transition-all before:duration-300":!0,"before:w-[200%] before:h-[200%] before:opacity-12":this.showRipple});return d.html`
 			<div
 				class=${i}
 				part="container"
@@ -8,8 +8,8 @@
 			>
 				<span class=${y} aria-hidden="true"></span>
-				<div class=${a} part="icon">
-							<span class=${c} part="indicator" aria-hidden="true"></span>
+				<div class=${s} part="icon">
+							<span class=${h} part="indicator" aria-hidden="true"></span>
 							${u.when(e,()=>d.html`<slot name="icon"></slot>`,()=>u.when(this.icon,()=>d.html`
 										<span
 											class=${l}
@@ -50,30 +50,30 @@
 						</div>
 					`)}
 			</div>
-		`}},o([s.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"icon",2),o([s.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"label",2),o([s.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"value",2),o([s.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"active",1),o([s.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"selected",1),o([s.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"badge",2),o([s.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"badgeVariant",2),o([s.property({type:Boolean,attribute:"show-label"})],exports.SchmancyNavigationRailItem.prototype,"showLabel",2),o([s.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"disabled",2),o([s.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"nested",2),o([s.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"group",2),o([s.state()],exports.SchmancyNavigationRailItem.prototype,"showRipple",2),exports.SchmancyNavigationRailItem=o([s.customElement("schmancy-navigation-rail-item")],exports.SchmancyNavigationRailItem);var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,h=(e,t,i,a)=>{for(var c,l=a>1?void 0:a?x(t,i):t,p=e.length-1;p>=0;p--)(c=e[p])&&(l=(a?c(t,i,l):c(l))||l);return a&&l&&f(t,i,l),l};exports.SchmancyNavigationRail=class extends b.$LitElement(){constructor(){super(...arguments),this.activeIndex$=new n.BehaviorSubject(-1),this._activeValue="",this.labelVisibility="all",this.alignment="top",this.showTooltips=!0,this.keyboardNavigation=!0,this.expanded=!1,this.focusedIndex=-1,this.isFullscreen=!1}get activeIndex(){return this.activeIndex$.value}set activeIndex(e){this.activeIndex$.next(e)}get activeValue(){return this._activeValue}set activeValue(e){this._activeValue=e,this.updateActiveByValue(e)}get navigationItems(){return this.allElements.filter(e=>e.tagName==="SCHMANCY-NAVIGATION-RAIL-ITEM")}connectedCallback(){super.connectedCallback(),this.keyboardNavigation&&this.addEventListener("keydown",this.handleKeyDown),this.activeIndex$.pipe(r.distinctUntilChanged(),r.tap(e=>this.updateActiveStates(e)),n.takeUntil(this.disconnecting)).subscribe(),n.fromEvent(window,"fullscreen").pipe(r.tap(e=>{const t=e;this.isFullscreen=t.detail}),n.takeUntil(this.disconnecting)).subscribe(),this.setupNavigateListener(),this.updateLabelVisibility(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","Main navigation")}updated(e){super.updated(e),e.has("labelVisibility")&&this.updateLabelVisibility(),e.has("activeValue")&&this.updateActiveByValue(this.activeValue),e.has("expanded")&&this.updateLabelVisibility()}updateActiveStates(e){this.navigationItems.forEach((t,i)=>{const a=i===e;t.active=a,t.setAttribute("aria-selected",String(a)),t.setAttribute("tabindex",a?"0":"-1"),a&&(this._activeValue=t.value||t.label||"")})}updateActiveByValue(e){const t=this.navigationItems.findIndex(i=>i.getAttribute("value")===e||i.label===e);t>=0&&(this.activeIndex=t)}updateLabelVisibility(){this.navigationItems.forEach((e,t)=>{let i=!1;i=!!this.expanded||this.labelVisibility==="all"||this.labelVisibility==="selected"&&t===this.activeIndex,e.showLabel=i,this.showTooltips&&!i&&!this.expanded&&e.label?e.setAttribute("title",e.label):e.removeAttribute("title")})}expand(){this.expanded=!0}collapse(){this.expanded=!1}addBoatItem(e){const t=this.querySelector(`[value="${e.id}"]`);if(t)return t;const i=document.createElement("schmancy-navigation-rail-item");i.setAttribute("value",e.id),i.innerHTML=`
+		`}},o([a.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"icon",2),o([a.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"label",2),o([a.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"value",2),o([a.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"active",1),o([a.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"selected",1),o([a.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"badge",2),o([a.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"badgeVariant",2),o([a.property({type:Boolean,attribute:"show-label"})],exports.SchmancyNavigationRailItem.prototype,"showLabel",2),o([a.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"disabled",2),o([a.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"nested",2),o([a.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"group",2),o([a.state()],exports.SchmancyNavigationRailItem.prototype,"showRipple",2),exports.SchmancyNavigationRailItem=o([a.customElement("schmancy-navigation-rail-item")],exports.SchmancyNavigationRailItem);var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,c=(e,t,i,s)=>{for(var h,l=s>1?void 0:s?x(t,i):t,p=e.length-1;p>=0;p--)(h=e[p])&&(l=(s?h(t,i,l):h(l))||l);return s&&l&&f(t,i,l),l};exports.SchmancyNavigationRail=class extends b.$LitElement(){constructor(){super(...arguments),this.activeIndex$=new n.BehaviorSubject(-1),this._activeValue="",this.labelVisibility="all",this.alignment="top",this.showTooltips=!0,this.keyboardNavigation=!0,this.expanded=!1,this.focusedIndex=-1,this.hasHeaderContent=!1,this.isFullscreen=!1}get activeIndex(){return this.activeIndex$.value}set activeIndex(e){this.activeIndex$.next(e)}get activeValue(){return this._activeValue}set activeValue(e){this._activeValue=e,this.updateActiveByValue(e)}get navigationItems(){return this.allElements.filter(e=>e.tagName==="SCHMANCY-NAVIGATION-RAIL-ITEM")}connectedCallback(){super.connectedCallback(),this.keyboardNavigation&&this.addEventListener("keydown",this.handleKeyDown),this.activeIndex$.pipe(r.distinctUntilChanged(),r.tap(e=>this.updateActiveStates(e)),n.takeUntil(this.disconnecting)).subscribe(),n.fromEvent(window,"fullscreen").pipe(r.tap(e=>{const t=e;this.isFullscreen=t.detail}),n.takeUntil(this.disconnecting)).subscribe(),this.setupNavigateListener(),this.updateLabelVisibility(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","Main navigation")}updated(e){super.updated(e),e.has("labelVisibility")&&this.updateLabelVisibility(),e.has("activeValue")&&this.updateActiveByValue(this.activeValue),e.has("expanded")&&this.updateLabelVisibility()}updateActiveStates(e){this.navigationItems.forEach((t,i)=>{const s=i===e;t.active=s,t.setAttribute("aria-selected",String(s)),t.setAttribute("tabindex",s?"0":"-1"),s&&(this._activeValue=t.value||t.label||"")})}updateActiveByValue(e){const t=this.navigationItems.findIndex(i=>i.getAttribute("value")===e||i.label===e);t>=0&&(this.activeIndex=t)}updateLabelVisibility(){this.navigationItems.forEach((e,t)=>{let i=!1;i=!!this.expanded||this.labelVisibility==="all"||this.labelVisibility==="selected"&&t===this.activeIndex,e.showLabel=i,this.showTooltips&&!i&&!this.expanded&&e.label?e.setAttribute("title",e.label):e.removeAttribute("title")})}expand(){this.expanded=!0}collapse(){this.expanded=!1}addBoatItem(e){const t=this.querySelector(`[value="${e.id}"]`);if(t)return t;const i=document.createElement("schmancy-navigation-rail-item");i.setAttribute("value",e.id),i.innerHTML=`
 			<schmancy-icon slot="icon">${e.icon||"widgets"}</schmancy-icon>
 			${e.title}
-		`;const a=this.querySelector('[slot="footer"]');return a?this.insertBefore(i,a):this.appendChild(i),i}toggle(){this.expanded=!this.expanded}handleKeyDown(e){const t=this.navigationItems;if(t.length===0)return;let i=this.focusedIndex>=0?this.focusedIndex:this.activeIndex;switch(e.key){case"ArrowDown":e.preventDefault(),i=(i+1)%t.length;break;case"ArrowUp":e.preventDefault(),i=i<=0?t.length-1:i-1;break;case"Home":e.preventDefault(),i=0;break;case"End":e.preventDefault(),i=t.length-1;break;case"Enter":case" ":return e.preventDefault(),void(i>=0&&t[i].click());default:return}this.focusedIndex=i,t[i].focus()}handleFabClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("fab-click",{bubbles:!0,composed:!0}))}handleMenuClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("menu-click",{bubbles:!0,composed:!0}))}render(){const e=this.classMap({"flex flex-col":!0,"h-full":!0,"box-border relative overflow-visible":!0,"z-10 hover:z-[100]":!0,"w-20":!this.isFullscreen,"w-0":this.isFullscreen,"transition-all duration-300 ease-emphasized":!0,"opacity-100":!this.isFullscreen,"opacity-0 pointer-events-none":this.isFullscreen,"overflow-hidden":this.isFullscreen}),t=this.classMap({"flex flex-col h-full":!0,"box-border relative":!0,"py-2":!0,"bg-surface-default text-surface-on":!0,"transition-all duration-300 ease-emphasized":!0,"w-20":!this.expanded,"px-3":!this.expanded,"w-60":this.expanded,"px-4":this.expanded,"shadow-lg":this.expanded}),i=this.classMap({"flex flex-col items-center gap-1 mb-2":!0,'[&_[slot="fab"]]:mb-2':!0,'[&_[slot="menu"]]:mb-3':!0}),a=this.classMap({"flex-1 flex flex-col gap-3":!0,"min-h-0":!0,"justify-start":this.alignment==="top","justify-center":this.alignment==="center","justify-end":this.alignment==="bottom"}),c=this.classMap({"flex flex-col items-center gap-1 mt-auto pt-2":!0});return d.html`
+		`;const s=this.querySelector('[slot="footer"]');return s?this.insertBefore(i,s):this.appendChild(i),i}toggle(){this.expanded=!this.expanded}handleKeyDown(e){const t=this.navigationItems;if(t.length===0)return;let i=this.focusedIndex>=0?this.focusedIndex:this.activeIndex;switch(e.key){case"ArrowDown":e.preventDefault(),i=(i+1)%t.length;break;case"ArrowUp":e.preventDefault(),i=i<=0?t.length-1:i-1;break;case"Home":e.preventDefault(),i=0;break;case"End":e.preventDefault(),i=t.length-1;break;case"Enter":case" ":return e.preventDefault(),void(i>=0&&t[i].click());default:return}this.focusedIndex=i,t[i].focus()}handleFabClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("fab-click",{bubbles:!0,composed:!0}))}handleMenuClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("menu-click",{bubbles:!0,composed:!0}))}render(){const e=this.classMap({"flex flex-col":!0,"h-full":!0,"box-border relative overflow-visible":!0,"z-10 hover:z-[100]":!0,"w-20":!this.isFullscreen,"w-0":this.isFullscreen,"transition-all duration-300 ease-emphasized":!0,"opacity-100":!this.isFullscreen,"opacity-0 pointer-events-none":this.isFullscreen,"overflow-hidden":this.isFullscreen}),t=this.classMap({"flex flex-col h-full":!0,"box-border relative":!0,"py-2":!0,"bg-surface-default text-surface-on":!0,"transition-all duration-300 ease-emphasized":!0,"w-20":!this.expanded,"px-3":!this.expanded,"w-60":this.expanded,"px-4":this.expanded,"shadow-lg":this.expanded}),i=this.classMap({"flex flex-col items-center gap-1":!0,hidden:!this.hasHeaderContent}),s=this.classMap({"flex-1 flex flex-col gap-3":!0,"min-h-0":!0,"justify-start":this.alignment==="top","justify-center":this.alignment==="center","justify-end":this.alignment==="bottom"}),h=this.classMap({"flex flex-col items-center gap-1 mt-auto pt-2":!0});return d.html`
 			<div
 				class=${e}
 			>
 				<div class=${t} part="rail">
 					<div class=${i} part="header">
-						<slot name="fab" @click=${this.handleFabClick}></slot>
-						<slot name="menu" @click=${this.handleMenuClick}></slot>
-						<slot name="header"></slot>
+						<slot name="fab" @click=${this.handleFabClick} @slotchange=${this.handleHeaderSlotChange}></slot>
+						<slot name="menu" @click=${this.handleMenuClick} @slotchange=${this.handleHeaderSlotChange}></slot>
+						<slot name="header" @slotchange=${this.handleHeaderSlotChange}></slot>
 					</div>
-					<nav class=${a} part="nav" role="list">
+					<nav class=${s} part="nav" role="list">
 						<schmancy-scroll hide direction="vertical">
 							<slot @slotchange=${this.handleSlotChange}></slot>
 						</schmancy-scroll>
 					</nav>
-					<div class=${c} part="footer">
+					<div class=${h} part="footer">
 						<slot name="footer"></slot>
 					</div>
 				</div>
 			</div>
-		`}setupNavigateListener(){this.addEventListener("navigate",e=>{if(e instanceof CustomEvent){const t=e.detail,i=this.navigationItems.findIndex(a=>a.value===t||a.label===t);i>=0&&(this.activeIndex=i,this._activeValue=t)}})}handleSlotChange(){this.updateLabelVisibility(),this.updateActiveStates(this.activeIndex),this.navigationItems.forEach((e,t)=>{e.setAttribute("role","listitem"),e.hasAttribute("tabindex")||e.setAttribute("tabindex",t===this.activeIndex?"0":"-1")})}},h([s.property({type:Number})],exports.SchmancyNavigationRail.prototype,"activeIndex",1),h([s.property({type:String})],exports.SchmancyNavigationRail.prototype,"activeValue",1),h([s.property({type:String,attribute:"label-visibility",reflect:!0})],exports.SchmancyNavigationRail.prototype,"labelVisibility",2),h([s.property({type:String,reflect:!0})],exports.SchmancyNavigationRail.prototype,"alignment",2),h([s.property({type:Boolean})],exports.SchmancyNavigationRail.prototype,"showTooltips",2),h([s.property({type:Boolean})],exports.SchmancyNavigationRail.prototype,"keyboardNavigation",2),h([s.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRail.prototype,"expanded",2),h([s.state()],exports.SchmancyNavigationRail.prototype,"focusedIndex",2),h([s.state()],exports.SchmancyNavigationRail.prototype,"isFullscreen",2),h([s.queryAssignedElements({flatten:!0})],exports.SchmancyNavigationRail.prototype,"allElements",2),exports.SchmancyNavigationRail=h([s.customElement("schmancy-navigation-rail")],exports.SchmancyNavigationRail);
-//# sourceMappingURL=navigation-rail-D1o3qDe_.cjs.map
+		`}setupNavigateListener(){this.addEventListener("navigate",e=>{if(e instanceof CustomEvent){const t=e.detail,i=this.navigationItems.findIndex(s=>s.value===t||s.label===t);i>=0&&(this.activeIndex=i,this._activeValue=t)}})}handleHeaderSlotChange(){const e=this.shadowRoot?.querySelector('[part="header"]');if(e){const t=e.querySelectorAll("slot");this.hasHeaderContent=Array.from(t).some(i=>i.assignedNodes({flatten:!0}).length>0)}}handleSlotChange(){this.updateLabelVisibility(),this.updateActiveStates(this.activeIndex),this.navigationItems.forEach((e,t)=>{e.setAttribute("role","listitem"),e.hasAttribute("tabindex")||e.setAttribute("tabindex",t===this.activeIndex?"0":"-1")})}},c([a.property({type:Number})],exports.SchmancyNavigationRail.prototype,"activeIndex",1),c([a.property({type:String})],exports.SchmancyNavigationRail.prototype,"activeValue",1),c([a.property({type:String,attribute:"label-visibility",reflect:!0})],exports.SchmancyNavigationRail.prototype,"labelVisibility",2),c([a.property({type:String,reflect:!0})],exports.SchmancyNavigationRail.prototype,"alignment",2),c([a.property({type:Boolean})],exports.SchmancyNavigationRail.prototype,"showTooltips",2),c([a.property({type:Boolean})],exports.SchmancyNavigationRail.prototype,"keyboardNavigation",2),c([a.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRail.prototype,"expanded",2),c([a.state()],exports.SchmancyNavigationRail.prototype,"focusedIndex",2),c([a.state()],exports.SchmancyNavigationRail.prototype,"hasHeaderContent",2),c([a.state()],exports.SchmancyNavigationRail.prototype,"isFullscreen",2),c([a.queryAssignedElements({flatten:!0})],exports.SchmancyNavigationRail.prototype,"allElements",2),exports.SchmancyNavigationRail=c([a.customElement("schmancy-navigation-rail")],exports.SchmancyNavigationRail);
+//# sourceMappingURL=navigation-rail-DC9_oSIM.cjs.map