@mhmo91/schmancy 0.5.29 → 0.5.31

package/dist/navigation-rail-CjBw96pi.js

@@ -1,602 +0,0 @@
-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 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 v } from "lit/directives/when.js";
-import { tap as d, delay as I, distinctUntilChanged as A } from "rxjs/operators";
-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`
-	: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 y(!1), this.pressing$ = new y(!1), this.active$ = new y(!1), this.icon = "", this.label = "", this.value = "", this.badge = "", this.badgeVariant = "error", this.showLabel = !1, this.disabled = !1, this.nested = !1, this.group = !1, this.showRipple = !1;
-  }
-  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(), 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), m(this.disconnecting)).subscribe(), this.active$.pipe(A(), d((t) => {
-      this.requestUpdate(), this.setAttribute("aria-selected", String(t)), this.setAttribute("tabindex", t ? "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);
-  }
-  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"]'), 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)}
-				part="container"
-				@click=${this.handleClick}
-				@keydown=${this.handleKeyDown}
-			>
-				<span class="ripple" aria-hidden="true"></span>
-
-				${v(e, () => c`<slot></slot>`, () => c`
-						<div class="icon-container" part="icon">
-							<span class="indicator" part="indicator" aria-hidden="true"></span>
-							${v(t, () => c`<slot name="icon"></slot>`, () => v(this.icon, () => c`<span class="icon">${this.icon}</span>`))}
-						</div>
-
-						${v(this.label, () => c`<span class="label" part="label">${this.label}</span>`)}
-					`)}
-
-				${v(this.badge, () => c`
-						${v(i, () => c`<slot name="badge"></slot>`, () => c`
-								<span
-									class="badge"
-									part="badge"
-									style=${this.styleMap(h)}
-									aria-label="${this.badge} notifications"
-								>
-									${this.badge}
-								</span>
-							`)}
-					`)}
-			</div>
-		`;
-  }
-};
-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; /* 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 y(-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(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);
-  }
-  updateActiveStates(t) {
-    this.navigationItems.forEach((e, i) => {
-      const a = i === t;
-      e.active = a, e.setAttribute("aria-selected", String(a)), e.setAttribute("tabindex", a ? "0" : "-1"), a && (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 c`
-			<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((a) => a.value === e || a.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([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-CjBw96pi.js.map