@mhmo91/schmancy 0.5.29 → 0.5.31

package/dist/navigation-rail-BzMOzaFm.cjs

@@ -1,453 +0,0 @@
-"use strict";const s=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const a=require("lit/decorators.js");require("./tailwind.mixin-CFrLBtkD.cjs");const m=require("./litElement.mixin-DUiUa087.cjs"),l=require("lit"),v=require("lit/directives/when.js"),c=require("rxjs/operators");var y=Object.defineProperty,u=Object.getOwnPropertyDescriptor,r=(t,e,i,o)=>{for(var h,n=o>1?void 0:o?u(e,i):e,d=t.length-1;d>=0;d--)(h=t[d])&&(n=(o?h(e,i,n):h(n))||n);return o&&n&&y(e,i,n),n};exports.SchmancyNavigationRailItem=class extends m.$LitElement(l.css`
-	:host {
-		display: block;
-		position: relative;
-		outline: none;
-		--rail-item-height: 56px;
-		--rail-item-icon-size: 24px;
-		--rail-item-show-label: block;
-	}
-
-	.container {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		min-height: var(--rail-item-height);
-		width: 100%;
-		/* 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 var(--schmancy-sys-motion-duration-short3) var(--schmancy-sys-motion-easing-emphasized);
-		padding: 12px 0;
-		gap: 4px;
-	}
-
-	/* Hover state */
-	.container:hover {
-		background-color: var(--schmancy-sys-color-surface-highest);
-	}
-
-	/* Focus state */
-	:host(:focus-visible) .container {
-		outline: 2px solid var(--schmancy-sys-color-primary-default);
-		outline-offset: 2px;
-	}
-
-	/* Active indicator - positioned behind icon only */
-	.icon-container {
-		position: relative;
-	}
-
-	.indicator {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%) scale(0);
-		width: 56px;
-		height: 32px;
-		/* M3 shape: large for active indicators */
-		border-radius: var(--schmancy-sys-shape-corner-large);
-		background-color: var(--schmancy-sys-color-secondary-container);
-		transition: transform var(--schmancy-sys-motion-duration-short3) var(--schmancy-sys-motion-easing-emphasized);
-		z-index: 0;
-	}
-
-	:host([active]) .indicator,
-	:host([selected]) .indicator {
-		transform: translate(-50%, -50%) scale(1);
-	}
-
-	:host([active]) .container,
-	:host([selected]) .container {
-		color: var(--schmancy-sys-color-secondary-onContainer);
-	}
-
-
-	/* Icon styles */
-	.icon-container {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: auto;
-		min-width: 56px;
-		height: 32px;
-		flex-shrink: 0;
-		position: relative;
-		z-index: 1;
-	}
-
-	.icon {
-		font-family: 'Material Symbols Outlined';
-		font-size: var(--rail-item-icon-size);
-		line-height: 1;
-		position: relative;
-		z-index: 1;
-		font-variation-settings:
-			'FILL' 0,
-			'wght' 400,
-			'GRAD' 0,
-			'opsz' 24;
-	}
-
-	:host([active]) .icon,
-	:host([selected]) .icon {
-		font-variation-settings:
-			'FILL' 1,
-			'wght' 400,
-			'GRAD' 0,
-			'opsz' 24;
-	}
-
-	/* Label styles */
-	.label {
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 16px;
-		text-align: center;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		z-index: 1;
-		display: var(--rail-item-show-label, block);
-		max-width: 56px;
-		padding: 0 4px;
-	}
-
-
-	/* Badge styles */
-	.badge {
-		position: absolute;
-		top: 8px;
-		right: 12px;
-		min-width: 16px;
-		height: 16px;
-		/* 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;
-		font-weight: 600;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0 4px;
-		box-sizing: border-box;
-		z-index: 2;
-		animation: badge-pulse 2s infinite;
-	}
-
-	@keyframes badge-pulse {
-		0%, 100% { transform: scale(1); }
-		50% { transform: scale(1.1); }
-	}
-
-	/* Nested items (for sub-navigation) */
-	:host([nested]) {
-		--rail-item-height: 48px;
-		--rail-item-icon-size: 20px;
-	}
-
-	:host([nested]) .container {
-		padding-left: 32px;
-	}
-
-	/* Disabled state */
-	:host([disabled]) {
-		pointer-events: none;
-		opacity: 0.38;
-	}
-
-	/* Ripple effect with M3 motion */
-	.ripple {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		border-radius: inherit;
-		overflow: hidden;
-		z-index: 0;
-	}
-
-	.ripple::before {
-		content: '';
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: 0;
-		height: 0;
-		border-radius: 50%;
-		background: currentColor;
-		opacity: 0;
-		transform: translate(-50%, -50%);
-		/* 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%;
-		/* M3 pressed state opacity */
-		opacity: var(--schmancy-sys-state-pressed-opacity);
-	}
-
-	/* Tooltip styles (shown via title attribute) */
-	:host([title]:hover)::after {
-		content: attr(title);
-		position: absolute;
-		left: calc(100% + 8px);
-		top: 50%;
-		transform: translateY(-50%);
-		background: var(--schmancy-sys-color-inverseSurface);
-		color: var(--schmancy-sys-color-inverseOnSurface);
-		padding: 4px 8px;
-		/* 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 var(--schmancy-sys-motion-duration-short3) var(--schmancy-sys-motion-easing-standard);
-	}
-
-	@keyframes tooltip-fade-in {
-		from {
-			opacity: 0;
-			transform: translateY(-50%) translateX(-4px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(-50%) translateX(0);
-		}
-	}
-
-	/* Group item styles */
-	:host([group]) {
-		margin-bottom: 8px;
-	}
-
-	:host([group])::after {
-		content: '';
-		position: absolute;
-		bottom: -4px;
-		left: 12px;
-		right: 12px;
-		height: 1px;
-		background: var(--schmancy-sys-color-outlineVariant);
-		opacity: 0.12;
-	}
-`){constructor(){super(...arguments),this.hovering$=new s.BehaviorSubject(!1),this.pressing$=new s.BehaviorSubject(!1),this.active$=new s.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(t){this.active$.next(t)}get selected(){return this.active}set selected(t){this.active=t}connectedCallback(){super.connectedCallback(),s.merge(s.fromEvent(this,"mouseenter").pipe(c.tap(()=>this.hovering$.next(!0))),s.fromEvent(this,"mouseleave").pipe(c.tap(()=>this.hovering$.next(!1)))).pipe(s.takeUntil(this.disconnecting)).subscribe(),s.merge(s.fromEvent(this,"mousedown").pipe(c.tap(()=>this.pressing$.next(!0))),s.fromEvent(this,"mouseup").pipe(c.tap(()=>this.pressing$.next(!1))),s.fromEvent(this,"mouseleave").pipe(c.tap(()=>this.pressing$.next(!1)))).pipe(s.takeUntil(this.disconnecting)).subscribe(),this.pressing$.pipe(c.tap(t=>{t&&!this.disabled&&(this.showRipple=!0)}),c.delay(600),c.tap(()=>this.showRipple=!1),s.takeUntil(this.disconnecting)).subscribe(),this.active$.pipe(c.distinctUntilChanged(),c.tap(t=>{this.requestUpdate(),this.setAttribute("aria-selected",String(t)),this.setAttribute("tabindex",t?"0":"-1")}),s.takeUntil(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)}handleClick(t){if(this.disabled)return t.preventDefault(),void t.stopPropagation();this.dispatchEvent(new CustomEvent("navigate",{detail:this.value||this.label,bubbles:!0,composed:!0}))}handleKeyDown(t){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"]'),o={container:!0,rippling:this.showRipple},h={"background-color":`var(--schmancy-sys-color-${this.badgeVariant}-default)`,color:`var(--schmancy-sys-color-${this.badgeVariant}-on)`};return l.html`
-			<div
-				class=${this.classMap(o)}
-				part="container"
-				@click=${this.handleClick}
-				@keydown=${this.handleKeyDown}
-			>
-				<span class="ripple" aria-hidden="true"></span>
-
-				${v.when(e,()=>l.html`<slot></slot>`,()=>l.html`
-						<div class="icon-container" part="icon">
-							<span class="indicator" part="indicator" aria-hidden="true"></span>
-							${v.when(t,()=>l.html`<slot name="icon"></slot>`,()=>v.when(this.icon,()=>l.html`<span class="icon">${this.icon}</span>`))}
-						</div>
-
-						${v.when(this.label,()=>l.html`<span class="label" part="label">${this.label}</span>`)}
-					`)}
-
-				${v.when(this.badge,()=>l.html`
-						${v.when(i,()=>l.html`<slot name="badge"></slot>`,()=>l.html`
-								<span
-									class="badge"
-									part="badge"
-									style=${this.styleMap(h)}
-									aria-label="${this.badge} notifications"
-								>
-									${this.badge}
-								</span>
-							`)}
-					`)}
-			</div>
-		`}},r([a.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"icon",2),r([a.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"label",2),r([a.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"value",2),r([a.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"active",1),r([a.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"selected",1),r([a.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"badge",2),r([a.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"badgeVariant",2),r([a.property({type:Boolean,attribute:"show-label"})],exports.SchmancyNavigationRailItem.prototype,"showLabel",2),r([a.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"disabled",2),r([a.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"nested",2),r([a.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"group",2),r([a.state()],exports.SchmancyNavigationRailItem.prototype,"showRipple",2),exports.SchmancyNavigationRailItem=r([a.customElement("schmancy-navigation-rail-item")],exports.SchmancyNavigationRailItem);var b=Object.defineProperty,g=Object.getOwnPropertyDescriptor,p=(t,e,i,o)=>{for(var h,n=o>1?void 0:o?g(e,i):e,d=t.length-1;d>=0;d--)(h=t[d])&&(n=(o?h(e,i,n):h(n))||n);return o&&n&&b(e,i,n),n};exports.SchmancyNavigationRail=class extends m.$LitElement(l.css`
-	:host {
-		display: flex;
-		flex-direction: column;
-		width: 80px; /* Fixed width - never changes to prevent layout shift */
-		height: 100%;
-		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 - 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 */
-	.header {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 4px;
-		margin-bottom: 8px;
-	}
-
-	/* Navigation container */
-	.nav {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-		overflow-y: auto;
-		overflow-x: hidden;
-		scrollbar-width: thin;
-		scrollbar-color: var(--schmancy-sys-color-outlineVariant) transparent;
-	}
-
-	.nav::-webkit-scrollbar {
-		width: 4px;
-	}
-
-	.nav::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	.nav::-webkit-scrollbar-thumb {
-		background-color: var(--schmancy-sys-color-outlineVariant);
-		border-radius: 2px;
-		opacity: 0.5;
-	}
-
-	/* Footer section */
-	.footer {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 4px;
-		margin-top: auto;
-		padding-top: 8px;
-	}
-
-	/* FAB styles */
-	::slotted([slot='fab']) {
-		margin-bottom: 8px;
-	}
-
-	/* Menu button styles */
-	::slotted([slot='menu']) {
-		margin-bottom: 12px;
-	}
-
-	/* Alignment variants */
-	:host([alignment='top']) .nav {
-		justify-content: flex-start;
-	}
-
-	:host([alignment='center']) .nav {
-		justify-content: center;
-	}
-
-	:host([alignment='bottom']) .nav {
-		justify-content: flex-end;
-	}
-
-	/* Label visibility states */
-	: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])) {
-		--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-outline);
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	/* Divider styles */
-	::slotted(schmancy-divider) {
-		margin: 8px 0;
-	}
-
-	/* Responsive behavior */
-	@media (max-width: 768px) {
-		:host {
-			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(){super(...arguments),this.activeIndex$=new s.BehaviorSubject(-1),this._activeValue="",this.labelVisibility="all",this.alignment="top",this.showTooltips=!0,this.keyboardNavigation=!0,this.focusedIndex=-1}get activeIndex(){return this.activeIndex$.value}set activeIndex(t){this.activeIndex$.next(t)}get activeValue(){return this._activeValue}set activeValue(t){this._activeValue=t,this.updateActiveByValue(t)}get navigationItems(){return this.allElements.filter(t=>t.tagName==="SCHMANCY-NAVIGATION-RAIL-ITEM")}connectedCallback(){super.connectedCallback(),this.keyboardNavigation&&this.addEventListener("keydown",this.handleKeyDown),this.activeIndex$.pipe(c.distinctUntilChanged(),c.tap(t=>this.updateActiveStates(t)),s.takeUntil(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)}updateActiveStates(t){this.navigationItems.forEach((e,i)=>{const o=i===t;e.active=o,e.setAttribute("aria-selected",String(o)),e.setAttribute("tabindex",o?"0":"-1"),o&&(this._activeValue=e.value||e.label||"")})}updateActiveByValue(t){const e=this.navigationItems.findIndex(i=>i.getAttribute("value")===t||i.label===t);e>=0&&(this.activeIndex=e)}updateLabelVisibility(){this.navigationItems.forEach((t,e)=>{const i=this.labelVisibility==="all"||this.labelVisibility==="selected"&&e===this.activeIndex;t.showLabel=i,this.showTooltips&&!i&&t.label?t.setAttribute("title",t.label):t.removeAttribute("title")})}handleKeyDown(t){const e=this.navigationItems;if(e.length===0)return;let i=this.focusedIndex>=0?this.focusedIndex:this.activeIndex;switch(t.key){case"ArrowDown":t.preventDefault(),i=(i+1)%e.length;break;case"ArrowUp":t.preventDefault(),i=i<=0?e.length-1:i-1;break;case"Home":t.preventDefault(),i=0;break;case"End":t.preventDefault(),i=e.length-1;break;case"Enter":case" ":return t.preventDefault(),void(i>=0&&e[i].click());default:return}this.focusedIndex=i,e[i].focus()}handleFabClick(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent("fab-click",{bubbles:!0,composed:!0}))}handleMenuClick(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent("menu-click",{bubbles:!0,composed:!0}))}render(){return l.html`
-			<div class="rail" part="rail">
-				<div class="header" part="header">
-					<slot name="fab" @click=${this.handleFabClick}></slot>
-					<slot name="menu" @click=${this.handleMenuClick}></slot>
-					<slot name="header"></slot>
-				</div>
-
-				<nav class="nav" part="nav" role="list">
-					<slot @slotchange=${this.handleSlotChange}></slot>
-				</nav>
-
-				<div class="footer" part="footer">
-					<slot name="footer"></slot>
-				</div>
-			</div>
-		`}setupNavigateListener(){this.addEventListener("navigate",t=>{if(t instanceof CustomEvent){const e=t.detail,i=this.navigationItems.findIndex(o=>o.value===e||o.label===e);i>=0&&(this.activeIndex=i,this._activeValue=e)}})}handleSlotChange(){this.updateLabelVisibility(),this.updateActiveStates(this.activeIndex),this.navigationItems.forEach((t,e)=>{t.setAttribute("role","listitem"),t.hasAttribute("tabindex")||t.setAttribute("tabindex",e===this.activeIndex?"0":"-1")})}},p([a.property({type:Number})],exports.SchmancyNavigationRail.prototype,"activeIndex",1),p([a.property({type:String})],exports.SchmancyNavigationRail.prototype,"activeValue",1),p([a.property({type:String,attribute:"label-visibility",reflect:!0})],exports.SchmancyNavigationRail.prototype,"labelVisibility",2),p([a.property({type:String,reflect:!0})],exports.SchmancyNavigationRail.prototype,"alignment",2),p([a.property({type:Boolean})],exports.SchmancyNavigationRail.prototype,"showTooltips",2),p([a.property({type:Boolean})],exports.SchmancyNavigationRail.prototype,"keyboardNavigation",2),p([a.state()],exports.SchmancyNavigationRail.prototype,"focusedIndex",2),p([a.queryAssignedElements({flatten:!0})],exports.SchmancyNavigationRail.prototype,"allElements",2),exports.SchmancyNavigationRail=p([a.customElement("schmancy-navigation-rail")],exports.SchmancyNavigationRail);
-//# sourceMappingURL=navigation-rail-BzMOzaFm.cjs.map

package/dist/navigation-rail-BzMOzaFm.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation-rail-BzMOzaFm.cjs","sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\r\nimport { css, html, PropertyValues } from 'lit'\r\nimport { customElement, property, state } from 'lit/decorators.js'\r\nimport { when } from 'lit/directives/when.js'\r\nimport { BehaviorSubject, fromEvent, merge, takeUntil } from 'rxjs'\r\nimport { tap, delay, distinctUntilChanged } from 'rxjs/operators'\r\n\r\nexport type NavigationRailItemClickEvent = CustomEvent<{\r\n\ticon: string\r\n\tlabel: string\r\n\tvalue: string\r\n\tactive: boolean\r\n}>\r\n\r\n/**\r\n * Material Design 3 Navigation Rail Item Component\r\n * @see https://m3.material.io/components/navigation-rail/overview\r\n *\r\n * `<schmancy-navigation-rail-item>` component\r\n *\r\n * Individual navigation item for use within a navigation rail.\r\n * Represents a single destination or action with an icon and optional label.\r\n *\r\n * @element schmancy-navigation-rail-item\r\n * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)\r\n * @slot - Default slot for custom content\r\n * @slot badge - Custom badge content\r\n *\r\n * @fires navigate - When the item is clicked\r\n *\r\n * @csspart container - The main item container\r\n * @csspart indicator - The active indicator\r\n * @csspart icon - The icon container\r\n * @csspart label - The label text\r\n * @csspart badge - The badge element\r\n *\r\n * @example\r\n * <schmancy-navigation-rail-item\r\n *   icon=\"home\"\r\n *   label=\"Home\"\r\n *   value=\"/home\"\r\n *   badge=\"3\"\r\n *   active>\r\n * </schmancy-navigation-rail-item>\r\n *\r\n * @example\r\n * <!-- Using 'selected' alias -->\r\n * <schmancy-navigation-rail-item\r\n *   icon=\"settings\"\r\n *   label=\"Settings\"\r\n *   value=\"/settings\"\r\n *   selected>\r\n * </schmancy-navigation-rail-item>\r\n *\r\n * @example\r\n * <!-- With custom icon -->\r\n * <schmancy-navigation-rail-item label=\"Dashboard\">\r\n *   <schmancy-icon slot=\"icon\">dashboard</schmancy-icon>\r\n * </schmancy-navigation-rail-item>\r\n */\r\n@customElement('schmancy-navigation-rail-item')\r\nexport class SchmancyNavigationRailItem extends $LitElement(css`\r\n\t:host {\r\n\t\tdisplay: block;\r\n\t\tposition: relative;\r\n\t\toutline: none;\r\n\t\t--rail-item-height: 56px;\r\n\t\t--rail-item-icon-size: 24px;\r\n\t\t--rail-item-show-label: block;\r\n\t}\r\n\r\n\t.container {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tmin-height: var(--rail-item-height);\r\n\t\twidth: 100%;\r\n\t\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","super","arguments","this","hovering$","BehaviorSubject","pressing$","active$","icon","label","value","badge","badgeVariant","showLabel","disabled","nested","group","showRipple","active","next","selected","connectedCallback","merge","fromEvent","pipe","tap","takeUntil","disconnecting","subscribe","pressing","delay","distinctUntilChanged","isActive","requestUpdate","setAttribute","String","hasAttribute","changedProperties","updated","has","event","preventDefault","stopPropagation","dispatchEvent","CustomEvent","detail","bubbles","composed","key","click","hasCustomIcon","querySelector","hasCustomContent","hasCustomBadge","containerClasses","container","rippling","badgeStyles","color","html","classMap","handleClick","handleKeyDown","when","styleMap","__decorateClass","property","type","prototype","Boolean","reflect","attribute","state","customElement","SchmancyNavigationRail","activeIndex$","_activeValue","labelVisibility","alignment","showTooltips","keyboardNavigation","focusedIndex","activeIndex","activeValue","updateActiveByValue","navigationItems","allElements","filter","el","tagName","addEventListener","index","updateActiveStates","setupNavigateListener","updateLabelVisibility","forEach","item","i","findIndex","getAttribute","shouldShowLabel","removeAttribute","items","length","newIndex","focus","render","handleFabClick","handleMenuClick","handleSlotChange","e","itemIndex","Number","queryAssignedElements","flatten"],"mappings":"qgBA6DaA,QAAAA,2BAAN,cAAyCC,EAAAA,YAAYC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA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"}