@mhmo91/schmancy 0.5.20 → 0.5.21

package/types/src/navigation-rail/navigation-rail-item.d.ts

@@ -1,44 +1,124 @@
-declare const SchmancyNavigationRailItem_base: import("../../mixins").Constructor<CustomElementConstructor> & import("../../mixins").Constructor<import("@mixins/tailwind.mixin").ITailwindElementMixin> & import("../../mixins").Constructor<import("lit").LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
+import { PropertyValues } from 'lit';
+export type NavigationRailItemClickEvent = CustomEvent<{
+    icon: string;
+    label: string;
+    value: string;
+    active: boolean;
+}>;
+declare const SchmancyNavigationRailItem_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
+ * Material Design 3 Navigation Rail Item Component
+ * @see https://m3.material.io/components/navigation-rail/overview
+ *
  * `<schmancy-navigation-rail-item>` component
  *
  * Individual navigation item for use within a navigation rail.
  * Represents a single destination or action with an icon and optional label.
  *
  * @element schmancy-navigation-rail-item
- * @slot icon - Slot for the navigation item icon
- * @slot - Default slot for custom content (takes precedence over icon/label props)
+ * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)
+ * @slot - Default slot for custom content
+ * @slot badge - Custom badge content
+ *
+ * @fires navigate - When the item is clicked
+ *
+ * @csspart container - The main item container
+ * @csspart indicator - The active indicator
+ * @csspart icon - The icon container
+ * @csspart label - The label text
+ * @csspart badge - The badge element
+ *
+ * @example
+ * <schmancy-navigation-rail-item
+ *   icon="home"
+ *   label="Home"
+ *   value="/home"
+ *   badge="3"
+ *   active>
+ * </schmancy-navigation-rail-item>
  *
  * @example
- * <schmancy-navigation-rail-item icon="home" label="Home" active></schmancy-navigation-rail-item>
+ * <!-- Using 'selected' alias -->
+ * <schmancy-navigation-rail-item
+ *   icon="settings"
+ *   label="Settings"
+ *   value="/settings"
+ *   selected>
+ * </schmancy-navigation-rail-item>
+ *
+ * @example
+ * <!-- With custom icon -->
+ * <schmancy-navigation-rail-item label="Dashboard">
+ *   <schmancy-icon slot="icon">dashboard</schmancy-icon>
+ * </schmancy-navigation-rail-item>
  */
 export declare class SchmancyNavigationRailItem extends SchmancyNavigationRailItem_base {
+    private hovering$;
+    private pressing$;
+    private active$;
     /**
-     * Icon name for the navigation item
+     * Icon name (Material Symbols icon)
      */
     icon: string;
     /**
      * Label text for the navigation item
      */
     label: string;
+    /**
+     * Value associated with this item (useful for routing)
+     */
+    value: string;
     /**
      * Whether this item is currently active/selected
      * @default false
      */
-    active: boolean;
+    get active(): boolean;
+    set active(value: boolean);
     /**
-     * Badge text to display (e.g., notification count)
+     * Whether this item is currently selected (alias for active)
+     * @default false
+     */
+    get selected(): boolean;
+    set selected(value: boolean);
+    /**
+     * Badge text or number to display
      */
     badge: string;
     /**
-     * Whether the parent rail is extended
+     * Badge variant
+     */
+    badgeVariant: 'error' | 'primary' | 'secondary';
+    /**
+     * Whether to show the label (controlled by parent rail)
+     * @default false
+     */
+    showLabel: boolean;
+    /**
+     * Whether this item is disabled
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether this is a nested item (sub-navigation)
      * @default false
      */
-    extended: boolean;
+    nested: boolean;
+    /**
+     * Whether this item represents a group separator
+     * @default false
+     */
+    group: boolean;
+    private showRipple;
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
     /**
      * Handle click events
      */
     private handleClick;
+    /**
+     * Handle keyboard events
+     */
+    private handleKeyDown;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/types/src/navigation-rail/navigation-rail.d.ts

@@ -1,31 +1,99 @@
-declare const SchmancyNavigationRail_base: import("../../mixins").Constructor<CustomElementConstructor> & import("../../mixins").Constructor<import("@mixins/tailwind.mixin").ITailwindElementMixin> & import("../../mixins").Constructor<import("lit").LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
+import { PropertyValues } from 'lit';
+export type NavigateEvent = CustomEvent<string>;
+export type NavigationRailMenuClickEvent = CustomEvent<void>;
+export type NavigationRailFabClickEvent = CustomEvent<void>;
+export type LabelVisibility = 'all' | 'selected' | 'none';
+declare const SchmancyNavigationRail_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
+ * Material Design 3 Navigation Rail Component
+ * @see https://m3.material.io/components/navigation-rail/overview
+ *
  * `<schmancy-navigation-rail>` component
  *
- * A vertical navigation component typically positioned on the left side of an application.
+ * A Material Design 3 vertical navigation component positioned on the left side of an application.
  * Navigation rails provide access to between 3-7 primary destinations with a compact footprint.
  *
  * @element schmancy-navigation-rail
+ * @slot fab - Slot for a floating action button at the top
+ * @slot menu - Slot for a menu icon or button below the FAB
+ * @slot header - Custom header content slot
+ * @slot footer - Custom footer content slot
  * @slot - Default slot for navigation rail items
  *
+ * @fires navigate - When a navigation item is selected
+ * @fires menu-click - When the menu button is clicked
+ * @fires fab-click - When the FAB is clicked
+ *
+ * @csspart rail - The main rail container
+ * @csspart header - The header section
+ * @csspart nav - The navigation items container
+ * @csspart footer - The footer section
+ *
  * @example
- * <schmancy-navigation-rail>
+ * <schmancy-navigation-rail activeIndex="0">
+ *   <schmancy-button slot="fab" variant="filled" aria-label="Compose">
+ *     <schmancy-icon>add</schmancy-icon>
+ *   </schmancy-button>
+ *   <schmancy-button slot="menu" variant="text" aria-label="Menu">
+ *     <schmancy-icon>menu</schmancy-icon>
+ *   </schmancy-button>
  *   <schmancy-navigation-rail-item icon="home" label="Home"></schmancy-navigation-rail-item>
  *   <schmancy-navigation-rail-item icon="search" label="Search"></schmancy-navigation-rail-item>
+ *   <schmancy-navigation-rail-item icon="favorite" label="Favorites" badge="3"></schmancy-navigation-rail-item>
+ *   <schmancy-navigation-rail-item icon="settings" label="Settings"></schmancy-navigation-rail-item>
  * </schmancy-navigation-rail>
  */
 export declare class SchmancyNavigationRail extends SchmancyNavigationRail_base {
+    private activeIndex$;
+    /**
+     * The currently active item index
+     * @default -1
+     */
+    get activeIndex(): number;
+    set activeIndex(value: number);
+    /**
+     * The currently active item value (for programmatic selection)
+     */
+    get activeValue(): string;
+    set activeValue(value: string);
+    private _activeValue;
+    /**
+     * When to show labels for navigation items
+     * 'all' - Always show labels for all items
+     * 'selected' - Only show label for selected item
+     * 'none' - Never show labels
+     * @default 'all'
+     */
+    labelVisibility: LabelVisibility;
+    /**
+     * Alignment of navigation items
+     * @default 'top'
+     */
+    alignment: 'top' | 'center' | 'bottom';
     /**
-     * Whether the navigation rail is extended to show labels
-     * @default false
+     * Show tooltips when labels are hidden
+     * @default true
      */
-    extended: boolean;
+    showTooltips: boolean;
     /**
-     * Alignment of items within the rail
-     * @default 'center'
+     * Enable keyboard navigation
+     * @default true
      */
-    align: 'start' | 'center' | 'end';
+    keyboardNavigation: boolean;
+    private focusedIndex;
+    private allElements;
+    private get navigationItems();
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    private updateActiveStates;
+    private updateActiveByValue;
+    private updateLabelVisibility;
+    private handleKeyDown;
+    private handleFabClick;
+    private handleMenuClick;
     protected render(): import("lit-html").TemplateResult<1>;
+    private setupNavigateListener;
+    private handleSlotChange;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/navigation-rail-item-CIg6-B2G.js

@@ -1,151 +0,0 @@
-import { T as g } from "./tailwind.mixin-Dq8FD_xN.js";
-import { css as x, html as l } from "lit";
-import { property as a, customElement as y } from "lit/decorators.js";
-var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, h = (p, t, i, o) => {
-  for (var n, e = o > 1 ? void 0 : o ? b(t, i) : t, r = p.length - 1; r >= 0; r--) (n = p[r]) && (e = (o ? n(t, i, e) : n(e)) || e);
-  return o && e && m(t, i, e), e;
-};
-let d = class extends g(x`
-	:host {
-		display: flex;
-		flex-direction: column;
-		width: 80px;
-		height: 100%;
-		background-color: var(--schmancy-sys-color-surface-container);
-		color: var(--schmancy-sys-color-surface-on);
-		box-sizing: border-box;
-	}
-
-	:host([extended]) {
-		width: 192px;
-	}
-
-	/* Alignment options */
-	:host([align='start']) {
-		align-items: flex-start;
-		padding: 16px 12px;
-	}
-
-	:host([align='center']) {
-		align-items: center;
-		justify-content: center;
-		padding: 16px 12px;
-	}
-
-	:host([align='end']) {
-		align-items: flex-end;
-		padding: 16px 12px;
-	}
-
-	/* Default center alignment */
-	:host {
-		align-items: center;
-		padding: 16px 12px;
-		gap: 12px;
-	}
-`) {
-  constructor() {
-    super(...arguments), this.extended = !1, this.align = "center";
-  }
-  render() {
-    return l`<slot></slot>`;
-  }
-};
-h([a({ type: Boolean, reflect: !0 })], d.prototype, "extended", 2), h([a({ reflect: !0 })], d.prototype, "align", 2), d = h([y("schmancy-navigation-rail")], d);
-var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (p, t, i, o) => {
-  for (var n, e = o > 1 ? void 0 : o ? u(t, i) : t, r = p.length - 1; r >= 0; r--) (n = p[r]) && (e = (o ? n(t, i, e) : n(e)) || e);
-  return o && e && f(t, i, e), e;
-};
-let s = class extends g(x`
-	:host {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 56px;
-		min-height: 56px;
-		border-radius: 16px;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		position: relative;
-		box-sizing: border-box;
-		color: var(--schmancy-sys-color-surface-on-variant);
-		user-select: none;
-	}
-
-	:host(:hover) {
-		background-color: var(--schmancy-sys-color-surface-container-high);
-	}
-
-	:host([active]) {
-		background-color: var(--schmancy-sys-color-secondary-container);
-		color: var(--schmancy-sys-color-secondary-container-on);
-	}
-
-	:host([extended]) {
-		width: 168px;
-		justify-content: flex-start;
-		padding: 0 16px;
-		gap: 12px;
-	}
-
-	.icon {
-		font-family: 'Material Symbols Outlined';
-		font-size: 24px;
-		line-height: 1;
-		flex-shrink: 0;
-	}
-
-	.label {
-		font-size: 14px;
-		font-weight: 500;
-		line-height: 1.2;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.badge {
-		position: absolute;
-		top: 4px;
-		right: 4px;
-		min-width: 16px;
-		height: 16px;
-		border-radius: 8px;
-		background-color: var(--schmancy-sys-color-error);
-		color: var(--schmancy-sys-color-error-on);
-		font-size: 11px;
-		font-weight: 500;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0 4px;
-		box-sizing: border-box;
-	}
-
-	:host([extended]) .badge {
-		position: static;
-		margin-left: auto;
-	}
-`) {
-  constructor() {
-    super(...arguments), this.icon = "", this.label = "", this.active = !1, this.badge = "", this.extended = !1;
-  }
-  handleClick() {
-    this.dispatchEvent(new CustomEvent("rail-item-click", { detail: { icon: this.icon, label: this.label, active: this.active }, bubbles: !0, composed: !0 }));
-  }
-  render() {
-    return this.querySelector("[slot]") || this.textContent?.trim() ? l`<slot @click=${this.handleClick}></slot>` : l`
-			<div @click=${this.handleClick}>
-				${this.icon ? l`<span class="icon">${this.icon}</span>` : ""}
-				${this.extended && this.label ? l`<span class="label">${this.label}</span>` : ""}
-				${this.badge ? l`<span class="badge">${this.badge}</span>` : ""}
-			</div>
-		`;
-  }
-};
-c([a({ type: String })], s.prototype, "icon", 2), c([a({ type: String })], s.prototype, "label", 2), c([a({ type: Boolean, reflect: !0 })], s.prototype, "active", 2), c([a({ type: String })], s.prototype, "badge", 2), c([a({ type: Boolean, reflect: !0 })], s.prototype, "extended", 2), s = c([y("schmancy-navigation-rail-item")], s);
-export {
-  d as S,
-  s as a
-};
-//# sourceMappingURL=navigation-rail-item-CIg6-B2G.js.map

package/dist/navigation-rail-item-CIg6-B2G.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation-rail-item-CIg6-B2G.js","sources":["../src/navigation-rail/navigation-rail.ts","../src/navigation-rail/navigation-rail-item.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/tailwind.mixin'\r\nimport { css, html } from 'lit'\r\nimport { customElement, property } from 'lit/decorators.js'\r\n\r\n/**\r\n * `<schmancy-navigation-rail>` component\r\n *\r\n * A vertical navigation component typically 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 - Default slot for navigation rail items\r\n *\r\n * @example\r\n * <schmancy-navigation-rail>\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>\r\n */\r\n@customElement('schmancy-navigation-rail')\r\nexport class SchmancyNavigationRail extends TailwindElement(css`\r\n\t:host {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\twidth: 80px;\r\n\t\theight: 100%;\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-container);\r\n\t\tcolor: var(--schmancy-sys-color-surface-on);\r\n\t\tbox-sizing: border-box;\r\n\t}\r\n\r\n\t:host([extended]) {\r\n\t\twidth: 192px;\r\n\t}\r\n\r\n\t/* Alignment options */\r\n\t:host([align='start']) {\r\n\t\talign-items: flex-start;\r\n\t\tpadding: 16px 12px;\r\n\t}\r\n\r\n\t:host([align='center']) {\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tpadding: 16px 12px;\r\n\t}\r\n\r\n\t:host([align='end']) {\r\n\t\talign-items: flex-end;\r\n\t\tpadding: 16px 12px;\r\n\t}\r\n\r\n\t/* Default center alignment */\r\n\t:host {\r\n\t\talign-items: center;\r\n\t\tpadding: 16px 12px;\r\n\t\tgap: 12px;\r\n\t}\r\n`) {\r\n\t/**\r\n\t * Whether the navigation rail is extended to show labels\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\textended = false\r\n\r\n\t/**\r\n\t * Alignment of items within the rail\r\n\t * @default 'center'\r\n\t */\r\n\t@property({ reflect: true })\r\n\talign: 'start' | 'center' | 'end' = 'center'\r\n\r\n\tprotected render() {\r\n\t\treturn html`<slot></slot>`\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}","import { TailwindElement } from '@mixins/tailwind.mixin'\r\nimport { css, html } from 'lit'\r\nimport { customElement, property } from 'lit/decorators.js'\r\n\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\r\n * @slot - Default slot for custom content (takes precedence over icon/label props)\r\n *\r\n * @example\r\n * <schmancy-navigation-rail-item icon=\"home\" label=\"Home\" active></schmancy-navigation-rail-item>\r\n */\r\n@customElement('schmancy-navigation-rail-item')\r\nexport class SchmancyNavigationRailItem extends TailwindElement(css`\r\n\t:host {\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tmin-width: 56px;\r\n\t\tmin-height: 56px;\r\n\t\tborder-radius: 16px;\r\n\t\tcursor: pointer;\r\n\t\ttransition: all 0.2s ease;\r\n\t\tposition: relative;\r\n\t\tbox-sizing: border-box;\r\n\t\tcolor: var(--schmancy-sys-color-surface-on-variant);\r\n\t\tuser-select: none;\r\n\t}\r\n\r\n\t:host(:hover) {\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-container-high);\r\n\t}\r\n\r\n\t:host([active]) {\r\n\t\tbackground-color: var(--schmancy-sys-color-secondary-container);\r\n\t\tcolor: var(--schmancy-sys-color-secondary-container-on);\r\n\t}\r\n\r\n\t:host([extended]) {\r\n\t\twidth: 168px;\r\n\t\tjustify-content: flex-start;\r\n\t\tpadding: 0 16px;\r\n\t\tgap: 12px;\r\n\t}\r\n\r\n\t.icon {\r\n\t\tfont-family: 'Material Symbols Outlined';\r\n\t\tfont-size: 24px;\r\n\t\tline-height: 1;\r\n\t\tflex-shrink: 0;\r\n\t}\r\n\r\n\t.label {\r\n\t\tfont-size: 14px;\r\n\t\tfont-weight: 500;\r\n\t\tline-height: 1.2;\r\n\t\toverflow: hidden;\r\n\t\ttext-overflow: ellipsis;\r\n\t\twhite-space: nowrap;\r\n\t}\r\n\r\n\t.badge {\r\n\t\tposition: absolute;\r\n\t\ttop: 4px;\r\n\t\tright: 4px;\r\n\t\tmin-width: 16px;\r\n\t\theight: 16px;\r\n\t\tborder-radius: 8px;\r\n\t\tbackground-color: var(--schmancy-sys-color-error);\r\n\t\tcolor: var(--schmancy-sys-color-error-on);\r\n\t\tfont-size: 11px;\r\n\t\tfont-weight: 500;\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}\r\n\r\n\t:host([extended]) .badge {\r\n\t\tposition: static;\r\n\t\tmargin-left: auto;\r\n\t}\r\n`) {\r\n\t/**\r\n\t * Icon name for the navigation item\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 * 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\tactive = false\r\n\r\n\t/**\r\n\t * Badge text to display (e.g., notification count)\r\n\t */\r\n\t@property({ type: String })\r\n\tbadge = ''\r\n\r\n\t/**\r\n\t * Whether the parent rail is extended\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\textended = false\r\n\r\n\t/**\r\n\t * Handle click events\r\n\t */\r\n\tprivate handleClick() {\r\n\t\tthis.dispatchEvent(new CustomEvent('rail-item-click', {\r\n\t\t\tdetail: {\r\n\t\t\t\ticon: this.icon,\r\n\t\t\t\tlabel: this.label,\r\n\t\t\t\tactive: this.active\r\n\t\t\t},\r\n\t\t\tbubbles: true,\r\n\t\t\tcomposed: true\r\n\t\t}))\r\n\t}\r\n\r\n\tprotected render() {\r\n\t\tconst hasSlotContent = this.querySelector('[slot]') || this.textContent?.trim()\r\n\r\n\t\tif (hasSlotContent) {\r\n\t\t\treturn html`<slot @click=${this.handleClick}></slot>`\r\n\t\t}\r\n\r\n\t\treturn html`\r\n\t\t\t<div @click=${this.handleClick}>\r\n\t\t\t\t${this.icon ? html`<span class=\"icon\">${this.icon}</span>` : ''}\r\n\t\t\t\t${this.extended && this.label ? html`<span class=\"label\">${this.label}</span>` : ''}\r\n\t\t\t\t${this.badge ? html`<span class=\"badge\">${this.badge}</span>` : ''}\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}"],"names":["SchmancyNavigationRail","TailwindElement","css","constructor","super","arguments","this","extended","align","html","__decorateClass","property","type","Boolean","reflect","prototype","customElement","SchmancyNavigationRailItem","icon","label","active","badge","handleClick","dispatchEvent","CustomEvent","detail","bubbles","composed","render","querySelector","textContent","trim","String"],"mappings":";;;;;;;AAoBO,IAAMA,IAAN,cAAqCC,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;EAArD,cAAAC;AAAAC,aAAAC,SAAAA,GA4CNC,KAAAC,eAOAD,KAAAE,QAAoC;AAAA,EAAA;AAAA,EAE1B;AACT,WAAOC;AAAAA,EACR;AAAA;AAXAC,EAAA,CADCC,EAAS,EAAEC,MAAMC,SAASC,SAAAA,GAAS,CAAA,CAAA,GA3CxBd,EA4CZe,WAAA,YAAA,IAOAL,EAAA,CADCC,EAAS,EAAEG,SAAAA,GAAS,CAAA,CAAA,GAlDTd,EAmDZe,WAAA,SAAA,IAnDYf,IAANU,EAAA,CADNM,EAAc,0BAAA,CAAA,GACFhB;;;;;ACFN,IAAMiB,IAAN,cAAyChB,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;EAAzD,cAAAC;AAAAC,UAAAA,GAAAC,SAAAA,GA2ENC,KAAAY,OAAO,IAMPZ,KAAAa,QAAQ,IAORb,KAAAc,SAAAA,IAMAd,KAAAe,QAAQ,IAORf,KAAAC,WAAAA;AAAAA,EAAW;AAAA,EAKH,cAAAe;AACPhB,SAAKiB,cAAc,IAAIC,YAAY,mBAAmB,EACrDC,QAAQ,EACPP,MAAMZ,KAAKY,MACXC,OAAOb,KAAKa,OACZC,QAAQd,KAAKc,OAAAA,GAEdM,SAAAA,IACAC,UAAAA,GAAU,CAAA,CAAA;AAAA,EAEZ;AAAA,EAEU,SAAAC;AAGT,WAFuBtB,KAAKuB,cAAc,QAAA,KAAavB,KAAKwB,aAAaC,KAAAA,IAGjEtB,iBAAoBH,KAAKgB,WAAAA,aAG1Bb;AAAAA,iBACQH,KAAKgB,WAAAA;AAAAA,MAChBhB,KAAKY,OAAOT,uBAA0BH,KAAKY,IAAAA,YAAgB,EAAA;AAAA,MAC3DZ,KAAKC,YAAYD,KAAKa,QAAQV,wBAA2BH,KAAKa,KAAAA,YAAiB,EAAA;AAAA,MAC/Eb,KAAKe,QAAQZ,wBAA2BH,KAAKe,KAAAA,YAAiB,EAAA;AAAA;AAAA;AAAA,EAGnE;AAAA;AAzDAX,EAAA,CADCC,EAAS,EAAEC,MAAMoB,OAAAA,CAAAA,CAAAA,GA1ENf,EA2EZF,WAAA,QAAA,CAAA,GAMAL,EAAA,CADCC,EAAS,EAAEC,MAAMoB,OAAAA,CAAAA,CAAAA,GAhFNf,EAiFZF,WAAA,SAAA,CAAA,GAOAL,EAAA,CADCC,EAAS,EAAEC,MAAMC,SAASC,SAAAA,GAAS,CAAA,CAAA,GAvFxBG,EAwFZF,WAAA,UAAA,CAAA,GAMAL,EAAA,CADCC,EAAS,EAAEC,MAAMoB,OAAAA,CAAAA,CAAAA,GA7FNf,EA8FZF,WAAA,SAAA,CAAA,GAOAL,EAAA,CADCC,EAAS,EAAEC,MAAMC,SAASC,SAAAA,GAAS,CAAA,CAAA,GApGxBG,EAqGZF,WAAA,YAAA,CAAA,GArGYE,IAANP,EAAA,CADNM,EAAc,+BAAA,CAAA,GACFC,CAAAA;"}

package/dist/navigation-rail-item-DA7eqAg3.cjs

@@ -1,116 +0,0 @@
-"use strict";const h=require("./tailwind.mixin-B_-9TcsC.cjs"),o=require("lit"),n=require("lit/decorators.js");var d=Object.defineProperty,g=Object.getOwnPropertyDescriptor,p=(l,t,a,i)=>{for(var r,e=i>1?void 0:i?g(t,a):t,s=l.length-1;s>=0;s--)(r=l[s])&&(e=(i?r(t,a,e):r(e))||e);return i&&e&&d(t,a,e),e};exports.SchmancyNavigationRail=class extends h.TailwindElement(o.css`
-	:host {
-		display: flex;
-		flex-direction: column;
-		width: 80px;
-		height: 100%;
-		background-color: var(--schmancy-sys-color-surface-container);
-		color: var(--schmancy-sys-color-surface-on);
-		box-sizing: border-box;
-	}
-
-	:host([extended]) {
-		width: 192px;
-	}
-
-	/* Alignment options */
-	:host([align='start']) {
-		align-items: flex-start;
-		padding: 16px 12px;
-	}
-
-	:host([align='center']) {
-		align-items: center;
-		justify-content: center;
-		padding: 16px 12px;
-	}
-
-	:host([align='end']) {
-		align-items: flex-end;
-		padding: 16px 12px;
-	}
-
-	/* Default center alignment */
-	:host {
-		align-items: center;
-		padding: 16px 12px;
-		gap: 12px;
-	}
-`){constructor(){super(...arguments),this.extended=!1,this.align="center"}render(){return o.html`<slot></slot>`}},p([n.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRail.prototype,"extended",2),p([n.property({reflect:!0})],exports.SchmancyNavigationRail.prototype,"align",2),exports.SchmancyNavigationRail=p([n.customElement("schmancy-navigation-rail")],exports.SchmancyNavigationRail);var y=Object.defineProperty,m=Object.getOwnPropertyDescriptor,c=(l,t,a,i)=>{for(var r,e=i>1?void 0:i?m(t,a):t,s=l.length-1;s>=0;s--)(r=l[s])&&(e=(i?r(t,a,e):r(e))||e);return i&&e&&y(t,a,e),e};exports.SchmancyNavigationRailItem=class extends h.TailwindElement(o.css`
-	:host {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 56px;
-		min-height: 56px;
-		border-radius: 16px;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		position: relative;
-		box-sizing: border-box;
-		color: var(--schmancy-sys-color-surface-on-variant);
-		user-select: none;
-	}
-
-	:host(:hover) {
-		background-color: var(--schmancy-sys-color-surface-container-high);
-	}
-
-	:host([active]) {
-		background-color: var(--schmancy-sys-color-secondary-container);
-		color: var(--schmancy-sys-color-secondary-container-on);
-	}
-
-	:host([extended]) {
-		width: 168px;
-		justify-content: flex-start;
-		padding: 0 16px;
-		gap: 12px;
-	}
-
-	.icon {
-		font-family: 'Material Symbols Outlined';
-		font-size: 24px;
-		line-height: 1;
-		flex-shrink: 0;
-	}
-
-	.label {
-		font-size: 14px;
-		font-weight: 500;
-		line-height: 1.2;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.badge {
-		position: absolute;
-		top: 4px;
-		right: 4px;
-		min-width: 16px;
-		height: 16px;
-		border-radius: 8px;
-		background-color: var(--schmancy-sys-color-error);
-		color: var(--schmancy-sys-color-error-on);
-		font-size: 11px;
-		font-weight: 500;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0 4px;
-		box-sizing: border-box;
-	}
-
-	:host([extended]) .badge {
-		position: static;
-		margin-left: auto;
-	}
-`){constructor(){super(...arguments),this.icon="",this.label="",this.active=!1,this.badge="",this.extended=!1}handleClick(){this.dispatchEvent(new CustomEvent("rail-item-click",{detail:{icon:this.icon,label:this.label,active:this.active},bubbles:!0,composed:!0}))}render(){return this.querySelector("[slot]")||this.textContent?.trim()?o.html`<slot @click=${this.handleClick}></slot>`:o.html`
-			<div @click=${this.handleClick}>
-				${this.icon?o.html`<span class="icon">${this.icon}</span>`:""}
-				${this.extended&&this.label?o.html`<span class="label">${this.label}</span>`:""}
-				${this.badge?o.html`<span class="badge">${this.badge}</span>`:""}
-			</div>
-		`}},c([n.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"icon",2),c([n.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"label",2),c([n.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"active",2),c([n.property({type:String})],exports.SchmancyNavigationRailItem.prototype,"badge",2),c([n.property({type:Boolean,reflect:!0})],exports.SchmancyNavigationRailItem.prototype,"extended",2),exports.SchmancyNavigationRailItem=c([n.customElement("schmancy-navigation-rail-item")],exports.SchmancyNavigationRailItem);
-//# sourceMappingURL=navigation-rail-item-DA7eqAg3.cjs.map

package/dist/navigation-rail-item-DA7eqAg3.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation-rail-item-DA7eqAg3.cjs","sources":["../src/navigation-rail/navigation-rail.ts","../src/navigation-rail/navigation-rail-item.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/tailwind.mixin'\r\nimport { css, html } from 'lit'\r\nimport { customElement, property } from 'lit/decorators.js'\r\n\r\n/**\r\n * `<schmancy-navigation-rail>` component\r\n *\r\n * A vertical navigation component typically 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 - Default slot for navigation rail items\r\n *\r\n * @example\r\n * <schmancy-navigation-rail>\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>\r\n */\r\n@customElement('schmancy-navigation-rail')\r\nexport class SchmancyNavigationRail extends TailwindElement(css`\r\n\t:host {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\twidth: 80px;\r\n\t\theight: 100%;\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-container);\r\n\t\tcolor: var(--schmancy-sys-color-surface-on);\r\n\t\tbox-sizing: border-box;\r\n\t}\r\n\r\n\t:host([extended]) {\r\n\t\twidth: 192px;\r\n\t}\r\n\r\n\t/* Alignment options */\r\n\t:host([align='start']) {\r\n\t\talign-items: flex-start;\r\n\t\tpadding: 16px 12px;\r\n\t}\r\n\r\n\t:host([align='center']) {\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tpadding: 16px 12px;\r\n\t}\r\n\r\n\t:host([align='end']) {\r\n\t\talign-items: flex-end;\r\n\t\tpadding: 16px 12px;\r\n\t}\r\n\r\n\t/* Default center alignment */\r\n\t:host {\r\n\t\talign-items: center;\r\n\t\tpadding: 16px 12px;\r\n\t\tgap: 12px;\r\n\t}\r\n`) {\r\n\t/**\r\n\t * Whether the navigation rail is extended to show labels\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\textended = false\r\n\r\n\t/**\r\n\t * Alignment of items within the rail\r\n\t * @default 'center'\r\n\t */\r\n\t@property({ reflect: true })\r\n\talign: 'start' | 'center' | 'end' = 'center'\r\n\r\n\tprotected render() {\r\n\t\treturn html`<slot></slot>`\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}","import { TailwindElement } from '@mixins/tailwind.mixin'\r\nimport { css, html } from 'lit'\r\nimport { customElement, property } from 'lit/decorators.js'\r\n\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\r\n * @slot - Default slot for custom content (takes precedence over icon/label props)\r\n *\r\n * @example\r\n * <schmancy-navigation-rail-item icon=\"home\" label=\"Home\" active></schmancy-navigation-rail-item>\r\n */\r\n@customElement('schmancy-navigation-rail-item')\r\nexport class SchmancyNavigationRailItem extends TailwindElement(css`\r\n\t:host {\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tmin-width: 56px;\r\n\t\tmin-height: 56px;\r\n\t\tborder-radius: 16px;\r\n\t\tcursor: pointer;\r\n\t\ttransition: all 0.2s ease;\r\n\t\tposition: relative;\r\n\t\tbox-sizing: border-box;\r\n\t\tcolor: var(--schmancy-sys-color-surface-on-variant);\r\n\t\tuser-select: none;\r\n\t}\r\n\r\n\t:host(:hover) {\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-container-high);\r\n\t}\r\n\r\n\t:host([active]) {\r\n\t\tbackground-color: var(--schmancy-sys-color-secondary-container);\r\n\t\tcolor: var(--schmancy-sys-color-secondary-container-on);\r\n\t}\r\n\r\n\t:host([extended]) {\r\n\t\twidth: 168px;\r\n\t\tjustify-content: flex-start;\r\n\t\tpadding: 0 16px;\r\n\t\tgap: 12px;\r\n\t}\r\n\r\n\t.icon {\r\n\t\tfont-family: 'Material Symbols Outlined';\r\n\t\tfont-size: 24px;\r\n\t\tline-height: 1;\r\n\t\tflex-shrink: 0;\r\n\t}\r\n\r\n\t.label {\r\n\t\tfont-size: 14px;\r\n\t\tfont-weight: 500;\r\n\t\tline-height: 1.2;\r\n\t\toverflow: hidden;\r\n\t\ttext-overflow: ellipsis;\r\n\t\twhite-space: nowrap;\r\n\t}\r\n\r\n\t.badge {\r\n\t\tposition: absolute;\r\n\t\ttop: 4px;\r\n\t\tright: 4px;\r\n\t\tmin-width: 16px;\r\n\t\theight: 16px;\r\n\t\tborder-radius: 8px;\r\n\t\tbackground-color: var(--schmancy-sys-color-error);\r\n\t\tcolor: var(--schmancy-sys-color-error-on);\r\n\t\tfont-size: 11px;\r\n\t\tfont-weight: 500;\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}\r\n\r\n\t:host([extended]) .badge {\r\n\t\tposition: static;\r\n\t\tmargin-left: auto;\r\n\t}\r\n`) {\r\n\t/**\r\n\t * Icon name for the navigation item\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 * 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\tactive = false\r\n\r\n\t/**\r\n\t * Badge text to display (e.g., notification count)\r\n\t */\r\n\t@property({ type: String })\r\n\tbadge = ''\r\n\r\n\t/**\r\n\t * Whether the parent rail is extended\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\textended = false\r\n\r\n\t/**\r\n\t * Handle click events\r\n\t */\r\n\tprivate handleClick() {\r\n\t\tthis.dispatchEvent(new CustomEvent('rail-item-click', {\r\n\t\t\tdetail: {\r\n\t\t\t\ticon: this.icon,\r\n\t\t\t\tlabel: this.label,\r\n\t\t\t\tactive: this.active\r\n\t\t\t},\r\n\t\t\tbubbles: true,\r\n\t\t\tcomposed: true\r\n\t\t}))\r\n\t}\r\n\r\n\tprotected render() {\r\n\t\tconst hasSlotContent = this.querySelector('[slot]') || this.textContent?.trim()\r\n\r\n\t\tif (hasSlotContent) {\r\n\t\t\treturn html`<slot @click=${this.handleClick}></slot>`\r\n\t\t}\r\n\r\n\t\treturn html`\r\n\t\t\t<div @click=${this.handleClick}>\r\n\t\t\t\t${this.icon ? html`<span class=\"icon\">${this.icon}</span>` : ''}\r\n\t\t\t\t${this.extended && this.label ? html`<span class=\"label\">${this.label}</span>` : ''}\r\n\t\t\t\t${this.badge ? html`<span class=\"badge\">${this.badge}</span>` : ''}\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}"],"names":["SchmancyNavigationRail","TailwindElement","css","constructor","super","arguments","this","extended","align","render","html","__decorateClass","property","type","Boolean","reflect","prototype","customElement","SchmancyNavigationRailItem","icon","label","active","badge","handleClick","dispatchEvent","CustomEvent","detail","bubbles","composed","querySelector","textContent","trim","String"],"mappings":"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"}