@mhmo91/schmancy 0.5.26 → 0.5.27

package/dist/{navigation-rail-Cwhii1Km.js → navigation-rail-CjBw96pi.js}

@@ -1,14 +1,14 @@
-import { BehaviorSubject as y, merge as m, fromEvent as v, takeUntil as g } from "rxjs";
+import { BehaviorSubject as y, merge as g, fromEvent as u, takeUntil as m } from "rxjs";
 import "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
-import { property as s, state as f, customElement as x, queryAssignedElements as $ } from "lit/decorators.js";
-import "./tailwind.mixin-DXMWx0zN.js";
-import { $ as w } from "./litElement.mixin-BjvDNbpd.js";
+import { property as s, state as x, customElement as f, queryAssignedElements as $ } from "lit/decorators.js";
+import "./tailwind.mixin-CZKT1dUr.js";
+import { $ as w } from "./litElement.mixin-B0Rsd4Km.js";
 import { css as k, html as c } from "lit";
-import { when as u } from "lit/directives/when.js";
+import { when as v } from "lit/directives/when.js";
 import { tap as d, delay as I, distinctUntilChanged as A } from "rxjs/operators";
-var V = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (t, e, i, a) => {
-  for (var p, o = a > 1 ? void 0 : a ? S(e, i) : e, b = t.length - 1; b >= 0; b--) (p = t[b]) && (o = (a ? p(e, i, o) : p(o)) || o);
+var V = Object.defineProperty, z = Object.getOwnPropertyDescriptor, r = (t, e, i, a) => {
+  for (var h, o = a > 1 ? void 0 : a ? z(e, i) : e, b = t.length - 1; b >= 0; b--) (h = t[b]) && (o = (a ? h(e, i, o) : h(o)) || o);
   return a && o && V(e, i, o), o;
 };
 let n = class extends w(k`
@@ -28,13 +28,14 @@ let n = class extends w(k`
 		justify-content: center;
 		min-height: var(--rail-item-height);
 		width: 100%;
-		border-radius: 16px;
+		/* M3 shape: large for navigation rail items */
+		border-radius: var(--schmancy-sys-shape-corner-large);
 		cursor: pointer;
 		position: relative;
 		box-sizing: border-box;
 		color: var(--schmancy-sys-color-surface-onVariant);
 		user-select: none;
-		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		transition: all var(--schmancy-sys-motion-duration-short3) var(--schmancy-sys-motion-easing-emphasized);
 		padding: 12px 0;
 		gap: 4px;
 	}
@@ -62,9 +63,10 @@ let n = class extends w(k`
 		transform: translate(-50%, -50%) scale(0);
 		width: 56px;
 		height: 32px;
-		border-radius: 16px;
+		/* M3 shape: large for active indicators */
+		border-radius: var(--schmancy-sys-shape-corner-large);
 		background-color: var(--schmancy-sys-color-secondary-container);
-		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		transition: transform var(--schmancy-sys-motion-duration-short3) var(--schmancy-sys-motion-easing-emphasized);
 		z-index: 0;
 	}
 
@@ -137,7 +139,8 @@ let n = class extends w(k`
 		right: 12px;
 		min-width: 16px;
 		height: 16px;
-		border-radius: 8px;
+		/* M3 shape: small for badges */
+		border-radius: var(--schmancy-sys-shape-corner-small);
 		background-color: var(--schmancy-sys-color-error-default);
 		color: var(--schmancy-sys-color-error-on);
 		font-size: 11px;
@@ -172,7 +175,7 @@ let n = class extends w(k`
 		opacity: 0.38;
 	}
 
-	/* Ripple effect */
+	/* Ripple effect with M3 motion */
 	.ripple {
 		position: absolute;
 		top: 0;
@@ -195,13 +198,15 @@ let n = class extends w(k`
 		background: currentColor;
 		opacity: 0;
 		transform: translate(-50%, -50%);
-		transition: width 0.6s, height 0.6s, opacity 0.6s;
+		/* M3 motion: medium duration for ripple effect */
+		transition: width var(--schmancy-sys-motion-duration-medium2), height var(--schmancy-sys-motion-duration-medium2), opacity var(--schmancy-sys-motion-duration-medium2);
 	}
 
 	:host(:active) .ripple::before {
 		width: 200%;
 		height: 200%;
-		opacity: 0.12;
+		/* M3 pressed state opacity */
+		opacity: var(--schmancy-sys-state-pressed-opacity);
 	}
 
 	/* Tooltip styles (shown via title attribute) */
@@ -214,12 +219,13 @@ let n = class extends w(k`
 		background: var(--schmancy-sys-color-inverseSurface);
 		color: var(--schmancy-sys-color-inverseOnSurface);
 		padding: 4px 8px;
-		border-radius: 4px;
+		/* M3 shape: extra small for tooltips */
+		border-radius: var(--schmancy-sys-shape-corner-extraSmall);
 		font-size: 12px;
 		white-space: nowrap;
 		z-index: 1000;
 		pointer-events: none;
-		animation: tooltip-fade-in 0.2s ease;
+		animation: tooltip-fade-in var(--schmancy-sys-motion-duration-short3) var(--schmancy-sys-motion-easing-standard);
 	}
 
 	@keyframes tooltip-fade-in {
@@ -265,11 +271,11 @@ let n = class extends w(k`
     this.active = t;
   }
   connectedCallback() {
-    super.connectedCallback(), m(v(this, "mouseenter").pipe(d(() => this.hovering$.next(!0))), v(this, "mouseleave").pipe(d(() => this.hovering$.next(!1)))).pipe(g(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(g(this.disconnecting)).subscribe(), this.pressing$.pipe(d((t) => {
+    super.connectedCallback(), g(u(this, "mouseenter").pipe(d(() => this.hovering$.next(!0))), u(this, "mouseleave").pipe(d(() => this.hovering$.next(!1)))).pipe(m(this.disconnecting)).subscribe(), g(u(this, "mousedown").pipe(d(() => this.pressing$.next(!0))), u(this, "mouseup").pipe(d(() => this.pressing$.next(!1))), u(this, "mouseleave").pipe(d(() => this.pressing$.next(!1)))).pipe(m(this.disconnecting)).subscribe(), this.pressing$.pipe(d((t) => {
       t && !this.disabled && (this.showRipple = !0);
-    }), I(600), d(() => this.showRipple = !1), g(this.disconnecting)).subscribe(), this.active$.pipe(A(), d((t) => {
+    }), I(600), d(() => this.showRipple = !1), m(this.disconnecting)).subscribe(), this.active$.pipe(A(), d((t) => {
       this.requestUpdate(), this.setAttribute("aria-selected", String(t)), this.setAttribute("tabindex", t ? "0" : "-1");
-    }), g(this.disconnecting)).subscribe(), this.setAttribute("role", "listitem"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", this.active ? "0" : "-1");
+    }), m(this.disconnecting)).subscribe(), this.setAttribute("role", "listitem"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", this.active ? "0" : "-1");
   }
   updated(t) {
     super.updated(t), t.has("disabled") && this.setAttribute("aria-disabled", String(this.disabled)), t.has("label") && this.setAttribute("aria-label", this.label);
@@ -282,7 +288,7 @@ let n = class extends w(k`
     this.disabled || t.key !== "Enter" && t.key !== " " || (t.preventDefault(), this.click());
   }
   render() {
-    const t = this.querySelector('[slot="icon"]'), e = this.querySelector(":not([slot])"), i = this.querySelector('[slot="badge"]'), a = { container: !0, rippling: this.showRipple }, p = { "background-color": `var(--schmancy-sys-color-${this.badgeVariant}-default)`, color: `var(--schmancy-sys-color-${this.badgeVariant}-on)` };
+    const t = this.querySelector('[slot="icon"]'), e = this.querySelector(":not([slot])"), i = this.querySelector('[slot="badge"]'), a = { container: !0, rippling: this.showRipple }, h = { "background-color": `var(--schmancy-sys-color-${this.badgeVariant}-default)`, color: `var(--schmancy-sys-color-${this.badgeVariant}-on)` };
     return c`
 			<div
 				class=${this.classMap(a)}
@@ -292,21 +298,21 @@ let n = class extends w(k`
 			>
 				<span class="ripple" aria-hidden="true"></span>
 
-				${u(e, () => c`<slot></slot>`, () => c`
+				${v(e, () => c`<slot></slot>`, () => c`
 						<div class="icon-container" part="icon">
 							<span class="indicator" part="indicator" aria-hidden="true"></span>
-							${u(t, () => c`<slot name="icon"></slot>`, () => u(this.icon, () => c`<span class="icon">${this.icon}</span>`))}
+							${v(t, () => c`<slot name="icon"></slot>`, () => v(this.icon, () => c`<span class="icon">${this.icon}</span>`))}
 						</div>
 
-						${u(this.label, () => c`<span class="label" part="label">${this.label}</span>`)}
+						${v(this.label, () => c`<span class="label" part="label">${this.label}</span>`)}
 					`)}
 
-				${u(this.badge, () => c`
-						${u(i, () => c`<slot name="badge"></slot>`, () => c`
+				${v(this.badge, () => c`
+						${v(i, () => c`<slot name="badge"></slot>`, () => c`
 								<span
 									class="badge"
 									part="badge"
-									style=${this.styleMap(p)}
+									style=${this.styleMap(h)}
 									aria-label="${this.badge} notifications"
 								>
 									${this.badge}
@@ -317,32 +323,59 @@ let n = class extends w(k`
 		`;
   }
 };
-r([s({ type: String })], n.prototype, "icon", 2), r([s({ type: String })], n.prototype, "label", 2), r([s({ type: String })], n.prototype, "value", 2), r([s({ type: Boolean, reflect: !0 })], n.prototype, "active", 1), r([s({ type: Boolean, reflect: !0 })], n.prototype, "selected", 1), r([s({ type: String })], n.prototype, "badge", 2), r([s({ type: String })], n.prototype, "badgeVariant", 2), r([s({ type: Boolean, attribute: "show-label" })], n.prototype, "showLabel", 2), r([s({ type: Boolean, reflect: !0 })], n.prototype, "disabled", 2), r([s({ type: Boolean, reflect: !0 })], n.prototype, "nested", 2), r([s({ type: Boolean, reflect: !0 })], n.prototype, "group", 2), r([f()], n.prototype, "showRipple", 2), n = r([x("schmancy-navigation-rail-item")], n);
-var z = Object.defineProperty, C = Object.getOwnPropertyDescriptor, h = (t, e, i, a) => {
-  for (var p, o = a > 1 ? void 0 : a ? C(e, i) : e, b = t.length - 1; b >= 0; b--) (p = t[b]) && (o = (a ? p(e, i, o) : p(o)) || o);
-  return a && o && z(e, i, o), o;
+r([s({ type: String })], n.prototype, "icon", 2), r([s({ type: String })], n.prototype, "label", 2), r([s({ type: String })], n.prototype, "value", 2), r([s({ type: Boolean, reflect: !0 })], n.prototype, "active", 1), r([s({ type: Boolean, reflect: !0 })], n.prototype, "selected", 1), r([s({ type: String })], n.prototype, "badge", 2), r([s({ type: String })], n.prototype, "badgeVariant", 2), r([s({ type: Boolean, attribute: "show-label" })], n.prototype, "showLabel", 2), r([s({ type: Boolean, reflect: !0 })], n.prototype, "disabled", 2), r([s({ type: Boolean, reflect: !0 })], n.prototype, "nested", 2), r([s({ type: Boolean, reflect: !0 })], n.prototype, "group", 2), r([x()], n.prototype, "showRipple", 2), n = r([f("schmancy-navigation-rail-item")], n);
+var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, p = (t, e, i, a) => {
+  for (var h, o = a > 1 ? void 0 : a ? C(e, i) : e, b = t.length - 1; b >= 0; b--) (h = t[b]) && (o = (a ? h(e, i, o) : h(o)) || o);
+  return a && o && S(e, i, o), o;
 };
 let l = class extends w(k`
 	:host {
 		display: flex;
 		flex-direction: column;
-		width: 80px;
+		width: 80px; /* Fixed width - never changes to prevent layout shift */
 		height: 100%;
-		background-color: var(--schmancy-sys-color-surface-container);
-		color: var(--schmancy-sys-color-surface-on);
 		box-sizing: border-box;
 		position: relative;
 		overflow: visible;
+		z-index: 1; /* Base z-index */
+	}
+
+	/* Hover state: elevate and show expanded content */
+	:host(:hover) {
+		z-index: 100; /* Higher z-index to overlay content */
 	}
 
-	/* Rail container */
+	/* Rail container - this is what expands */
 	.rail {
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		width: 80px; /* Base width */
 		padding: 8px 12px;
 		gap: 4px;
 		box-sizing: border-box;
+		background-color: var(--schmancy-sys-color-surface-default);
+		color: var(--schmancy-sys-color-surface-on);
+		position: relative;
+		/* M3 motion: smooth transition for width and shadow */
+		transition:
+			width 300ms cubic-bezier(0.2, 0, 0, 1),
+			box-shadow 300ms cubic-bezier(0.2, 0, 0, 1);
+	}
+
+	/* Hover state: expand rail with shadow to show overlay */
+	:host(:hover) .rail {
+		width: 240px;
+		/* M3 elevation 3 shadow for overlay effect */
+		box-shadow:
+			0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+			0px 1px 18px 0px rgba(0, 0, 0, 0.12),
+			0px 3px 5px -1px rgba(0, 0, 0, 0.2);
+	}
+
+	/* Force label visibility when hovered */
+	:host(:hover) ::slotted(schmancy-navigation-rail-item) {
+		--rail-item-show-label: flex !important;
 	}
 
 	/* Header section */
@@ -363,7 +396,7 @@ let l = class extends w(k`
 		overflow-y: auto;
 		overflow-x: hidden;
 		scrollbar-width: thin;
-		scrollbar-color: var(--schmancy-sys-color-surface-onVariant) transparent;
+		scrollbar-color: var(--schmancy-sys-color-outlineVariant) transparent;
 	}
 
 	.nav::-webkit-scrollbar {
@@ -375,7 +408,7 @@ let l = class extends w(k`
 	}
 
 	.nav::-webkit-scrollbar-thumb {
-		background-color: var(--schmancy-sys-color-surface-onVariant);
+		background-color: var(--schmancy-sys-color-outlineVariant);
 		border-radius: 2px;
 		opacity: 0.5;
 	}
@@ -391,44 +424,43 @@ let l = class extends w(k`
 	}
 
 	/* FAB styles */
-	::slotted([slot="fab"]) {
+	::slotted([slot='fab']) {
 		margin-bottom: 8px;
 	}
 
 	/* Menu button styles */
-	::slotted([slot="menu"]) {
+	::slotted([slot='menu']) {
 		margin-bottom: 12px;
 	}
 
 	/* Alignment variants */
-	:host([alignment="top"]) .nav {
+	:host([alignment='top']) .nav {
 		justify-content: flex-start;
 	}
 
-	:host([alignment="center"]) .nav {
+	:host([alignment='center']) .nav {
 		justify-content: center;
 	}
 
-	:host([alignment="bottom"]) .nav {
+	:host([alignment='bottom']) .nav {
 		justify-content: flex-end;
 	}
 
 	/* Label visibility states */
-	:host([label-visibility="none"]) ::slotted(schmancy-navigation-rail-item) {
+	:host([label-visibility='none']) ::slotted(schmancy-navigation-rail-item) {
 		--rail-item-show-label: none;
 	}
 
-	:host([label-visibility="selected"]) ::slotted(schmancy-navigation-rail-item:not([active])) {
+	:host([label-visibility='selected']) ::slotted(schmancy-navigation-rail-item:not([active])) {
 		--rail-item-show-label: none;
 	}
 
-
 	/* Group header styles */
 	::slotted(.group-header) {
 		padding: 8px 12px;
 		font-size: 12px;
 		font-weight: 500;
-		color: var(--schmancy-sys-color-surface-onVariant);
+		color: var(--schmancy-sys-color-outline);
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		white-space: nowrap;
@@ -444,12 +476,18 @@ let l = class extends w(k`
 	/* Responsive behavior */
 	@media (max-width: 768px) {
 		:host {
-			width: 56px;
+			width: 56px; /* Smaller fixed width on mobile */
 		}
 
 		.rail {
+			width: 56px; /* Match host width */
 			padding: 8px;
 		}
+
+		/* On mobile, expand to a smaller width */
+		:host(:hover) .rail {
+			width: 200px;
+		}
 	}
 `) {
   constructor() {
@@ -471,7 +509,7 @@ let l = class extends w(k`
     return this.allElements.filter((t) => t.tagName === "SCHMANCY-NAVIGATION-RAIL-ITEM");
   }
   connectedCallback() {
-    super.connectedCallback(), this.keyboardNavigation && this.addEventListener("keydown", this.handleKeyDown), this.activeIndex$.pipe(A(), d((t) => this.updateActiveStates(t)), g(this.disconnecting)).subscribe(), this.setupNavigateListener(), this.updateLabelVisibility(), this.setAttribute("role", "navigation"), this.setAttribute("aria-label", "Main navigation");
+    super.connectedCallback(), this.keyboardNavigation && this.addEventListener("keydown", this.handleKeyDown), this.activeIndex$.pipe(A(), d((t) => this.updateActiveStates(t)), m(this.disconnecting)).subscribe(), this.setupNavigateListener(), this.updateLabelVisibility(), this.setAttribute("role", "navigation"), this.setAttribute("aria-label", "Main navigation");
   }
   updated(t) {
     super.updated(t), t.has("labelVisibility") && this.updateLabelVisibility(), t.has("activeValue") && this.updateActiveByValue(this.activeValue);
@@ -556,9 +594,9 @@ let l = class extends w(k`
     });
   }
 };
-h([s({ type: Number })], l.prototype, "activeIndex", 1), h([s({ type: String })], l.prototype, "activeValue", 1), h([s({ type: String, attribute: "label-visibility", reflect: !0 })], l.prototype, "labelVisibility", 2), h([s({ type: String, reflect: !0 })], l.prototype, "alignment", 2), h([s({ type: Boolean })], l.prototype, "showTooltips", 2), h([s({ type: Boolean })], l.prototype, "keyboardNavigation", 2), h([f()], l.prototype, "focusedIndex", 2), h([$({ flatten: !0 })], l.prototype, "allElements", 2), l = h([x("schmancy-navigation-rail")], l);
+p([s({ type: Number })], l.prototype, "activeIndex", 1), p([s({ type: String })], l.prototype, "activeValue", 1), p([s({ type: String, attribute: "label-visibility", reflect: !0 })], l.prototype, "labelVisibility", 2), p([s({ type: String, reflect: !0 })], l.prototype, "alignment", 2), p([s({ type: Boolean })], l.prototype, "showTooltips", 2), p([s({ type: Boolean })], l.prototype, "keyboardNavigation", 2), p([x()], l.prototype, "focusedIndex", 2), p([$({ flatten: !0 })], l.prototype, "allElements", 2), l = p([f("schmancy-navigation-rail")], l);
 export {
   n as S,
   l as a
 };
-//# sourceMappingURL=navigation-rail-Cwhii1Km.js.map
+//# sourceMappingURL=navigation-rail-CjBw96pi.js.map

package/dist/navigation-rail-CjBw96pi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-CjBw96pi.js","sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\r\nimport { css, html, PropertyValues } from 'lit'\r\nimport { customElement, property, state } from 'lit/decorators.js'\r\nimport { when } from 'lit/directives/when.js'\r\nimport { BehaviorSubject, fromEvent, merge, takeUntil } from 'rxjs'\r\nimport { tap, delay, distinctUntilChanged } from 'rxjs/operators'\r\n\r\nexport type NavigationRailItemClickEvent = CustomEvent<{\r\n\ticon: string\r\n\tlabel: string\r\n\tvalue: string\r\n\tactive: boolean\r\n}>\r\n\r\n/**\r\n * Material Design 3 Navigation Rail Item Component\r\n * @see https://m3.material.io/components/navigation-rail/overview\r\n *\r\n * `<schmancy-navigation-rail-item>` component\r\n *\r\n * Individual navigation item for use within a navigation rail.\r\n * Represents a single destination or action with an icon and optional label.\r\n *\r\n * @element schmancy-navigation-rail-item\r\n * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)\r\n * @slot - Default slot for custom content\r\n * @slot badge - Custom badge content\r\n *\r\n * @fires navigate - When the item is clicked\r\n *\r\n * @csspart container - The main item container\r\n * @csspart indicator - The active indicator\r\n * @csspart icon - The icon container\r\n * @csspart label - The label text\r\n * @csspart badge - The badge element\r\n *\r\n * @example\r\n * <schmancy-navigation-rail-item\r\n *   icon=\"home\"\r\n *   label=\"Home\"\r\n *   value=\"/home\"\r\n *   badge=\"3\"\r\n *   active>\r\n * </schmancy-navigation-rail-item>\r\n *\r\n * @example\r\n * <!-- Using 'selected' alias -->\r\n * <schmancy-navigation-rail-item\r\n *   icon=\"settings\"\r\n *   label=\"Settings\"\r\n *   value=\"/settings\"\r\n *   selected>\r\n * </schmancy-navigation-rail-item>\r\n *\r\n * @example\r\n * <!-- With custom icon -->\r\n * <schmancy-navigation-rail-item label=\"Dashboard\">\r\n *   <schmancy-icon slot=\"icon\">dashboard</schmancy-icon>\r\n * </schmancy-navigation-rail-item>\r\n */\r\n@customElement('schmancy-navigation-rail-item')\r\nexport class SchmancyNavigationRailItem extends $LitElement(css`\r\n\t:host {\r\n\t\tdisplay: block;\r\n\t\tposition: relative;\r\n\t\toutline: none;\r\n\t\t--rail-item-height: 56px;\r\n\t\t--rail-item-icon-size: 24px;\r\n\t\t--rail-item-show-label: block;\r\n\t}\r\n\r\n\t.container {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tmin-height: var(--rail-item-height);\r\n\t\twidth: 100%;\r\n\t\t/* M3 shape: large for navigation rail items */\r\n\t\tborder-radius: var(--schmancy-sys-shape-corner-large);\r\n\t\tcursor: pointer;\r\n\t\tposition: relative;\r\n\t\tbox-sizing: border-box;\r\n\t\tcolor: var(--schmancy-sys-color-surface-onVariant);\r\n\t\tuser-select: none;\r\n\t\ttransition: all var(--schmancy-sys-motion-duration-short3) var(--schmancy-sys-motion-easing-emphasized);\r\n\t\tpadding: 12px 0;\r\n\t\tgap: 4px;\r\n\t}\r\n\r\n\t/* Hover state */\r\n\t.container:hover {\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\r\n\t}\r\n\r\n\t/* Focus state */\r\n\t:host(:focus-visible) .container {\r\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default);\r\n\t\toutline-offset: 2px;\r\n\t}\r\n\r\n\t/* Active indicator - positioned behind icon only */\r\n\t.icon-container {\r\n\t\tposition: relative;\r\n\t}\r\n\r\n\t.indicator {\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tleft: 50%;\r\n\t\ttransform: translate(-50%, -50%) scale(0);\r\n\t\twidth: 56px;\r\n\t\theight: 32px;\r\n\t\t/* M3 shape: large for active indicators */\r\n\t\tborder-radius: var(--schmancy-sys-shape-corner-large);\r\n\t\tbackground-color: var(--schmancy-sys-color-secondary-container);\r\n\t\ttransition: transform var(--schmancy-sys-motion-duration-short3) var(--schmancy-sys-motion-easing-emphasized);\r\n\t\tz-index: 0;\r\n\t}\r\n\r\n\t:host([active]) .indicator,\r\n\t:host([selected]) .indicator {\r\n\t\ttransform: translate(-50%, -50%) scale(1);\r\n\t}\r\n\r\n\t:host([active]) .container,\r\n\t:host([selected]) .container {\r\n\t\tcolor: var(--schmancy-sys-color-secondary-onContainer);\r\n\t}\r\n\r\n\r\n\t/* Icon styles */\r\n\t.icon-container {\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\twidth: auto;\r\n\t\tmin-width: 56px;\r\n\t\theight: 32px;\r\n\t\tflex-shrink: 0;\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n\t}\r\n\r\n\t.icon {\r\n\t\tfont-family: 'Material Symbols Outlined';\r\n\t\tfont-size: var(--rail-item-icon-size);\r\n\t\tline-height: 1;\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n\t\tfont-variation-settings:\r\n\t\t\t'FILL' 0,\r\n\t\t\t'wght' 400,\r\n\t\t\t'GRAD' 0,\r\n\t\t\t'opsz' 24;\r\n\t}\r\n\r\n\t:host([active]) .icon,\r\n\t:host([selected]) .icon {\r\n\t\tfont-variation-settings:\r\n\t\t\t'FILL' 1,\r\n\t\t\t'wght' 400,\r\n\t\t\t'GRAD' 0,\r\n\t\t\t'opsz' 24;\r\n\t}\r\n\r\n\t/* Label styles */\r\n\t.label {\r\n\t\tfont-size: 12px;\r\n\t\tfont-weight: 500;\r\n\t\tline-height: 16px;\r\n\t\ttext-align: center;\r\n\t\toverflow: hidden;\r\n\t\ttext-overflow: ellipsis;\r\n\t\twhite-space: nowrap;\r\n\t\tz-index: 1;\r\n\t\tdisplay: var(--rail-item-show-label, block);\r\n\t\tmax-width: 56px;\r\n\t\tpadding: 0 4px;\r\n\t}\r\n\r\n\r\n\t/* Badge styles */\r\n\t.badge {\r\n\t\tposition: absolute;\r\n\t\ttop: 8px;\r\n\t\tright: 12px;\r\n\t\tmin-width: 16px;\r\n\t\theight: 16px;\r\n\t\t/* M3 shape: small for badges */\r\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small);\r\n\t\tbackground-color: var(--schmancy-sys-color-error-default);\r\n\t\tcolor: var(--schmancy-sys-color-error-on);\r\n\t\tfont-size: 11px;\r\n\t\tfont-weight: 600;\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tpadding: 0 4px;\r\n\t\tbox-sizing: border-box;\r\n\t\tz-index: 2;\r\n\t\tanimation: badge-pulse 2s infinite;\r\n\t}\r\n\r\n\t@keyframes badge-pulse {\r\n\t\t0%, 100% { transform: scale(1); }\r\n\t\t50% { transform: scale(1.1); }\r\n\t}\r\n\r\n\t/* Nested items (for sub-navigation) */\r\n\t:host([nested]) {\r\n\t\t--rail-item-height: 48px;\r\n\t\t--rail-item-icon-size: 20px;\r\n\t}\r\n\r\n\t:host([nested]) .container {\r\n\t\tpadding-left: 32px;\r\n\t}\r\n\r\n\t/* Disabled state */\r\n\t:host([disabled]) {\r\n\t\tpointer-events: none;\r\n\t\topacity: 0.38;\r\n\t}\r\n\r\n\t/* Ripple effect with M3 motion */\r\n\t.ripple {\r\n\t\tposition: absolute;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\tright: 0;\r\n\t\tbottom: 0;\r\n\t\tborder-radius: inherit;\r\n\t\toverflow: hidden;\r\n\t\tz-index: 0;\r\n\t}\r\n\r\n\t.ripple::before {\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tleft: 50%;\r\n\t\twidth: 0;\r\n\t\theight: 0;\r\n\t\tborder-radius: 50%;\r\n\t\tbackground: currentColor;\r\n\t\topacity: 0;\r\n\t\ttransform: translate(-50%, -50%);\r\n\t\t/* M3 motion: medium duration for ripple effect */\r\n\t\ttransition: width var(--schmancy-sys-motion-duration-medium2), height var(--schmancy-sys-motion-duration-medium2), opacity var(--schmancy-sys-motion-duration-medium2);\r\n\t}\r\n\r\n\t:host(:active) .ripple::before {\r\n\t\twidth: 200%;\r\n\t\theight: 200%;\r\n\t\t/* M3 pressed state opacity */\r\n\t\topacity: var(--schmancy-sys-state-pressed-opacity);\r\n\t}\r\n\r\n\t/* Tooltip styles (shown via title attribute) */\r\n\t:host([title]:hover)::after {\r\n\t\tcontent: attr(title);\r\n\t\tposition: absolute;\r\n\t\tleft: calc(100% + 8px);\r\n\t\ttop: 50%;\r\n\t\ttransform: translateY(-50%);\r\n\t\tbackground: var(--schmancy-sys-color-inverseSurface);\r\n\t\tcolor: var(--schmancy-sys-color-inverseOnSurface);\r\n\t\tpadding: 4px 8px;\r\n\t\t/* M3 shape: extra small for tooltips */\r\n\t\tborder-radius: var(--schmancy-sys-shape-corner-extraSmall);\r\n\t\tfont-size: 12px;\r\n\t\twhite-space: nowrap;\r\n\t\tz-index: 1000;\r\n\t\tpointer-events: none;\r\n\t\tanimation: tooltip-fade-in var(--schmancy-sys-motion-duration-short3) var(--schmancy-sys-motion-easing-standard);\r\n\t}\r\n\r\n\t@keyframes tooltip-fade-in {\r\n\t\tfrom {\r\n\t\t\topacity: 0;\r\n\t\t\ttransform: translateY(-50%) translateX(-4px);\r\n\t\t}\r\n\t\tto {\r\n\t\t\topacity: 1;\r\n\t\t\ttransform: translateY(-50%) translateX(0);\r\n\t\t}\r\n\t}\r\n\r\n\t/* Group item styles */\r\n\t:host([group]) {\r\n\t\tmargin-bottom: 8px;\r\n\t}\r\n\r\n\t:host([group])::after {\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\tbottom: -4px;\r\n\t\tleft: 12px;\r\n\t\tright: 12px;\r\n\t\theight: 1px;\r\n\t\tbackground: var(--schmancy-sys-color-outlineVariant);\r\n\t\topacity: 0.12;\r\n\t}\r\n`) {\r\n\t// Observable state\r\n\tprivate hovering$ = new BehaviorSubject<boolean>(false)\r\n\tprivate pressing$ = new BehaviorSubject<boolean>(false)\r\n\tprivate active$ = new BehaviorSubject<boolean>(false)\r\n\r\n\t// Properties\r\n\t/**\r\n\t * Icon name (Material Symbols icon)\r\n\t */\r\n\t@property({ type: String })\r\n\ticon = ''\r\n\r\n\t/**\r\n\t * Label text for the navigation item\r\n\t */\r\n\t@property({ type: String })\r\n\tlabel = ''\r\n\r\n\t/**\r\n\t * Value associated with this item (useful for routing)\r\n\t */\r\n\t@property({ type: String })\r\n\tvalue = ''\r\n\r\n\t/**\r\n\t * Whether this item is currently active/selected\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\tget active() { return this.active$.value }\r\n\tset active(value: boolean) {\r\n\t\tthis.active$.next(value)\r\n\t}\r\n\r\n\t/**\r\n\t * Whether this item is currently selected (alias for active)\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\tget selected() { return this.active }\r\n\tset selected(value: boolean) { this.active = value }\r\n\r\n\t/**\r\n\t * Badge text or number to display\r\n\t */\r\n\t@property({ type: String })\r\n\tbadge = ''\r\n\r\n\t/**\r\n\t * Badge variant\r\n\t */\r\n\t@property({ type: String })\r\n\tbadgeVariant: 'error' | 'primary' | 'secondary' = 'error'\r\n\r\n\t/**\r\n\t * Whether to show the label (controlled by parent rail)\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, attribute: 'show-label' })\r\n\tshowLabel = false\r\n\r\n\t/**\r\n\t * Whether this item is disabled\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\tdisabled = false\r\n\r\n\t/**\r\n\t * Whether this is a nested item (sub-navigation)\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\tnested = false\r\n\r\n\t/**\r\n\t * Whether this item represents a group separator\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\tgroup = false\r\n\r\n\t// State\r\n\t@state()\r\n\tprivate showRipple = false\r\n\r\n\r\n\tconnectedCallback() {\r\n\t\tsuper.connectedCallback()\r\n\r\n\t\t// Set up hover tracking\r\n\t\tmerge(\r\n\t\t\tfromEvent(this, 'mouseenter').pipe(tap(() => this.hovering$.next(true))),\r\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.hovering$.next(false)))\r\n\t\t).pipe(takeUntil(this.disconnecting)).subscribe()\r\n\r\n\t\t// Set up press tracking\r\n\t\tmerge(\r\n\t\t\tfromEvent(this, 'mousedown').pipe(tap(() => this.pressing$.next(true))),\r\n\t\t\tfromEvent(this, 'mouseup').pipe(tap(() => this.pressing$.next(false))),\r\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.pressing$.next(false)))\r\n\t\t).pipe(takeUntil(this.disconnecting)).subscribe()\r\n\r\n\r\n\t\t// Ripple effect 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 hasCustomContent = this.querySelector(':not([slot])')\r\n\t\tconst hasCustomBadge = this.querySelector('[slot=\"badge\"]')\r\n\r\n\t\tconst containerClasses = {\r\n\t\t\tcontainer: true,\r\n\t\t\trippling: this.showRipple\r\n\t\t}\r\n\r\n\t\tconst badgeStyles = {\r\n\t\t\t'background-color': `var(--schmancy-sys-color-${this.badgeVariant}-default)`,\r\n\t\t\t'color': `var(--schmancy-sys-color-${this.badgeVariant}-on)`\r\n\t\t}\r\n\r\n\t\treturn html`\r\n\t\t\t<div\r\n\t\t\t\tclass=${this.classMap(containerClasses)}\r\n\t\t\t\tpart=\"container\"\r\n\t\t\t\t@click=${this.handleClick}\r\n\t\t\t\t@keydown=${this.handleKeyDown}\r\n\t\t\t>\r\n\t\t\t\t<span class=\"ripple\" aria-hidden=\"true\"></span>\r\n\r\n\t\t\t\t${when(hasCustomContent,\r\n\t\t\t\t\t() => html`<slot></slot>`,\r\n\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t<div class=\"icon-container\" part=\"icon\">\r\n\t\t\t\t\t\t\t<span class=\"indicator\" part=\"indicator\" aria-hidden=\"true\"></span>\r\n\t\t\t\t\t\t\t${when(hasCustomIcon,\r\n\t\t\t\t\t\t\t\t() => html`<slot name=\"icon\"></slot>`,\r\n\t\t\t\t\t\t\t\t() => when(this.icon,\r\n\t\t\t\t\t\t\t\t\t() => html`<span class=\"icon\">${this.icon}</span>`\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t${when(this.label,\r\n\t\t\t\t\t\t\t() => html`<span class=\"label\" part=\"label\">${this.label}</span>`\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t`\r\n\t\t\t\t)}\r\n\r\n\t\t\t\t${when(this.badge,\r\n\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t${when(hasCustomBadge,\r\n\t\t\t\t\t\t\t() => html`<slot name=\"badge\"></slot>`,\r\n\t\t\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\t\tclass=\"badge\"\r\n\t\t\t\t\t\t\t\t\tpart=\"badge\"\r\n\t\t\t\t\t\t\t\t\tstyle=${this.styleMap(badgeStyles)}\r\n\t\t\t\t\t\t\t\t\taria-label=\"${this.badge} notifications\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t${this.badge}\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t`\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t`\r\n\t\t\t\t)}\r\n\t\t\t</div>\r\n\t\t`\r\n\t}\r\n}\r\n\r\ndeclare global {\r\n\tinterface HTMLElementTagNameMap {\r\n\t\t'schmancy-navigation-rail-item': SchmancyNavigationRailItem\r\n\t}\r\n}","import { $LitElement } from '@mixins/index'\r\nimport { css, html, PropertyValues } from 'lit'\r\nimport { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'\r\nimport { BehaviorSubject, takeUntil } from 'rxjs'\r\nimport { distinctUntilChanged, tap } from 'rxjs/operators'\r\nimport { SchmancyNavigationRailItem } from './navigation-rail-item'\r\n\r\nexport type NavigateEvent = CustomEvent<string>\r\n\r\nexport type NavigationRailMenuClickEvent = CustomEvent<void>\r\n\r\nexport type NavigationRailFabClickEvent = CustomEvent<void>\r\n\r\nexport type LabelVisibility = 'all' | 'selected' | 'none'\r\n\r\n/**\r\n * Material Design 3 Navigation Rail Component\r\n * @see https://m3.material.io/components/navigation-rail/overview\r\n *\r\n * `<schmancy-navigation-rail>` component\r\n *\r\n * A Material Design 3 vertical navigation component positioned on the left side of an application.\r\n * Navigation rails provide access to between 3-7 primary destinations with a compact footprint.\r\n *\r\n * @element schmancy-navigation-rail\r\n * @slot fab - Slot for a floating action button at the top\r\n * @slot menu - Slot for a menu icon or button below the FAB\r\n * @slot header - Custom header content slot\r\n * @slot footer - Custom footer content slot\r\n * @slot - Default slot for navigation rail items\r\n *\r\n * @fires navigate - When a navigation item is selected\r\n * @fires menu-click - When the menu button is clicked\r\n * @fires fab-click - When the FAB is clicked\r\n *\r\n * @csspart rail - The main rail container\r\n * @csspart header - The header section\r\n * @csspart nav - The navigation items container\r\n * @csspart footer - The footer section\r\n *\r\n * @example\r\n * <schmancy-navigation-rail activeIndex=\"0\">\r\n *   <schmancy-button slot=\"fab\" variant=\"filled\" aria-label=\"Compose\">\r\n *     <schmancy-icon>add</schmancy-icon>\r\n *   </schmancy-button>\r\n *   <schmancy-button slot=\"menu\" variant=\"text\" aria-label=\"Menu\">\r\n *     <schmancy-icon>menu</schmancy-icon>\r\n *   </schmancy-button>\r\n *   <schmancy-navigation-rail-item icon=\"home\" label=\"Home\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"search\" label=\"Search\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"favorite\" label=\"Favorites\" badge=\"3\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"settings\" label=\"Settings\"></schmancy-navigation-rail-item>\r\n * </schmancy-navigation-rail>\r\n */\r\n@customElement('schmancy-navigation-rail')\r\nexport class SchmancyNavigationRail extends $LitElement(css`\r\n\t:host {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\twidth: 80px; /* Fixed width - never changes to prevent layout shift */\r\n\t\theight: 100%;\r\n\t\tbox-sizing: border-box;\r\n\t\tposition: relative;\r\n\t\toverflow: visible;\r\n\t\tz-index: 1; /* Base z-index */\r\n\t}\r\n\r\n\t/* Hover state: elevate and show expanded content */\r\n\t:host(:hover) {\r\n\t\tz-index: 100; /* Higher z-index to overlay content */\r\n\t}\r\n\r\n\t/* Rail container - this is what expands */\r\n\t.rail {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\theight: 100%;\r\n\t\twidth: 80px; /* Base width */\r\n\t\tpadding: 8px 12px;\r\n\t\tgap: 4px;\r\n\t\tbox-sizing: border-box;\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-default);\r\n\t\tcolor: var(--schmancy-sys-color-surface-on);\r\n\t\tposition: relative;\r\n\t\t/* M3 motion: smooth transition for width and shadow */\r\n\t\ttransition:\r\n\t\t\twidth 300ms cubic-bezier(0.2, 0, 0, 1),\r\n\t\t\tbox-shadow 300ms cubic-bezier(0.2, 0, 0, 1);\r\n\t}\r\n\r\n\t/* Hover state: expand rail with shadow to show overlay */\r\n\t:host(:hover) .rail {\r\n\t\twidth: 240px;\r\n\t\t/* M3 elevation 3 shadow for overlay effect */\r\n\t\tbox-shadow:\r\n\t\t\t0px 6px 10px 0px rgba(0, 0, 0, 0.14),\r\n\t\t\t0px 1px 18px 0px rgba(0, 0, 0, 0.12),\r\n\t\t\t0px 3px 5px -1px rgba(0, 0, 0, 0.2);\r\n\t}\r\n\r\n\t/* Force label visibility when hovered */\r\n\t:host(:hover) ::slotted(schmancy-navigation-rail-item) {\r\n\t\t--rail-item-show-label: flex !important;\r\n\t}\r\n\r\n\t/* Header section */\r\n\t.header {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tgap: 4px;\r\n\t\tmargin-bottom: 8px;\r\n\t}\r\n\r\n\t/* Navigation container */\r\n\t.nav {\r\n\t\tflex: 1;\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\tgap: 4px;\r\n\t\toverflow-y: auto;\r\n\t\toverflow-x: hidden;\r\n\t\tscrollbar-width: thin;\r\n\t\tscrollbar-color: var(--schmancy-sys-color-outlineVariant) transparent;\r\n\t}\r\n\r\n\t.nav::-webkit-scrollbar {\r\n\t\twidth: 4px;\r\n\t}\r\n\r\n\t.nav::-webkit-scrollbar-track {\r\n\t\tbackground: transparent;\r\n\t}\r\n\r\n\t.nav::-webkit-scrollbar-thumb {\r\n\t\tbackground-color: var(--schmancy-sys-color-outlineVariant);\r\n\t\tborder-radius: 2px;\r\n\t\topacity: 0.5;\r\n\t}\r\n\r\n\t/* Footer section */\r\n\t.footer {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tgap: 4px;\r\n\t\tmargin-top: auto;\r\n\t\tpadding-top: 8px;\r\n\t}\r\n\r\n\t/* FAB styles */\r\n\t::slotted([slot='fab']) {\r\n\t\tmargin-bottom: 8px;\r\n\t}\r\n\r\n\t/* Menu button styles */\r\n\t::slotted([slot='menu']) {\r\n\t\tmargin-bottom: 12px;\r\n\t}\r\n\r\n\t/* Alignment variants */\r\n\t:host([alignment='top']) .nav {\r\n\t\tjustify-content: flex-start;\r\n\t}\r\n\r\n\t:host([alignment='center']) .nav {\r\n\t\tjustify-content: center;\r\n\t}\r\n\r\n\t:host([alignment='bottom']) .nav {\r\n\t\tjustify-content: flex-end;\r\n\t}\r\n\r\n\t/* Label visibility states */\r\n\t:host([label-visibility='none']) ::slotted(schmancy-navigation-rail-item) {\r\n\t\t--rail-item-show-label: none;\r\n\t}\r\n\r\n\t:host([label-visibility='selected']) ::slotted(schmancy-navigation-rail-item:not([active])) {\r\n\t\t--rail-item-show-label: none;\r\n\t}\r\n\r\n\t/* Group header styles */\r\n\t::slotted(.group-header) {\r\n\t\tpadding: 8px 12px;\r\n\t\tfont-size: 12px;\r\n\t\tfont-weight: 500;\r\n\t\tcolor: var(--schmancy-sys-color-outline);\r\n\t\ttext-transform: uppercase;\r\n\t\tletter-spacing: 0.1em;\r\n\t\twhite-space: nowrap;\r\n\t\toverflow: hidden;\r\n\t\ttext-overflow: ellipsis;\r\n\t}\r\n\r\n\t/* Divider styles */\r\n\t::slotted(schmancy-divider) {\r\n\t\tmargin: 8px 0;\r\n\t}\r\n\r\n\t/* Responsive behavior */\r\n\t@media (max-width: 768px) {\r\n\t\t:host {\r\n\t\t\twidth: 56px; /* Smaller fixed width on mobile */\r\n\t\t}\r\n\r\n\t\t.rail {\r\n\t\t\twidth: 56px; /* Match host width */\r\n\t\t\tpadding: 8px;\r\n\t\t}\r\n\r\n\t\t/* On mobile, expand to a smaller width */\r\n\t\t:host(:hover) .rail {\r\n\t\t\twidth: 200px;\r\n\t\t}\r\n\t}\r\n`) {\r\n\t// Observable state\r\n\tprivate activeIndex$ = new BehaviorSubject<number>(-1)\r\n\r\n\t// Properties\r\n\t/**\r\n\t * The currently active item index\r\n\t * @default -1\r\n\t */\r\n\t@property({ type: Number })\r\n\tget activeIndex() {\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// State\r\n\t@state()\r\n\tprivate focusedIndex = -1\r\n\r\n\t// Queries\r\n\r\n\t@queryAssignedElements({ flatten: true })\r\n\tprivate allElements!: Element[]\r\n\r\n\tprivate get navigationItems(): SchmancyNavigationRailItem[] {\r\n\t\treturn this.allElements.filter(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 for navigate events from child items\r\n\t\tthis.setupNavigateListener()\r\n\r\n\t\t// Set up label visibility\r\n\t\tthis.updateLabelVisibility()\r\n\r\n\t\t// Update ARIA attributes\r\n\t\tthis.setAttribute('role', 'navigation')\r\n\t\tthis.setAttribute('aria-label', 'Main navigation')\r\n\t}\r\n\r\n\tupdated(changedProperties: PropertyValues) {\r\n\t\tsuper.updated(changedProperties)\r\n\r\n\t\tif (changedProperties.has('labelVisibility')) {\r\n\t\t\tthis.updateLabelVisibility()\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('activeValue')) {\r\n\t\t\tthis.updateActiveByValue(this.activeValue)\r\n\t\t}\r\n\t}\r\n\r\n\tprivate updateActiveStates(index: number) {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tconst isActive = i === index\r\n\t\t\titem.active = isActive\r\n\t\t\titem.setAttribute('aria-selected', String(isActive))\r\n\t\t\titem.setAttribute('tabindex', isActive ? '0' : '-1')\r\n\r\n\t\t\t// Update activeValue when index changes\r\n\t\t\tif (isActive) {\r\n\t\t\t\tthis._activeValue = item.value || item.label || ''\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tprivate updateActiveByValue(value: string) {\r\n\t\tconst index = this.navigationItems.findIndex(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\tconst shouldShowLabel =\r\n\t\t\t\tthis.labelVisibility === 'all' || (this.labelVisibility === 'selected' && i === this.activeIndex)\r\n\r\n\t\t\titem.showLabel = shouldShowLabel\r\n\r\n\t\t\t// Add tooltips when labels are hidden\r\n\t\t\tif (this.showTooltips && !shouldShowLabel && item.label) {\r\n\t\t\t\titem.setAttribute('title', item.label)\r\n\t\t\t} else {\r\n\t\t\t\titem.removeAttribute('title')\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\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\treturn html`\r\n\t\t\t<div class=\"rail\" part=\"rail\">\r\n\t\t\t\t<div class=\"header\" part=\"header\">\r\n\t\t\t\t\t<slot name=\"fab\" @click=${this.handleFabClick}></slot>\r\n\t\t\t\t\t<slot name=\"menu\" @click=${this.handleMenuClick}></slot>\r\n\t\t\t\t\t<slot name=\"header\"></slot>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<nav class=\"nav\" part=\"nav\" role=\"list\">\r\n\t\t\t\t\t<slot @slotchange=${this.handleSlotChange}></slot>\r\n\t\t\t\t</nav>\r\n\r\n\t\t\t\t<div class=\"footer\" part=\"footer\">\r\n\t\t\t\t\t<slot name=\"footer\"></slot>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t`\r\n\t}\r\n\r\n\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 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","css","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","hasCustomContent","hasCustomBadge","containerClasses","container","rippling","badgeStyles","color","html","classMap","handleClick","handleKeyDown","when","styleMap","__decorateClass","property","type","prototype","Boolean","reflect","attribute","state","customElement","SchmancyNavigationRail","activeIndex$","_activeValue","labelVisibility","alignment","showTooltips","keyboardNavigation","focusedIndex","activeIndex","activeValue","updateActiveByValue","navigationItems","allElements","filter","el","tagName","addEventListener","index","updateActiveStates","setupNavigateListener","updateLabelVisibility","forEach","item","i","findIndex","getAttribute","shouldShowLabel","removeAttribute","items","length","newIndex","focus","handleFabClick","handleMenuClick","handleSlotChange","e","itemIndex","Number","queryAssignedElements","flatten"],"mappings":";;;;;;;;;;;;;AA6DO,IAAMA,IAAN,cAAyCC,EAAYC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA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"}

package/dist/navigation-rail.cjs

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

package/dist/navigation-rail.js

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

package/dist/{notification-service-CiS9cxNM.cjs → notification-service-DCmDSvc-.cjs}

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