@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/{navigation-drawer-CKl44Ef5.js → navigation-drawer-pGer0t4z.js}

@@ -1,10 +1,11 @@
-import { n as p, t as e } from "./decorate-DXuynaiA.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import "./icon-DrNqcNEL.js";
-import { css as m, html as a, nothing as s } from "lit";
-import { customElement as d, property as i } from "lit/decorators.js";
-var y = m`
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
+import "./icon-FvKeXi61.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/components/navigation-drawer/navigation-drawer.css.ts
+var s = n`
   :host {
     display: contents;
     font-family: var(--md-sys-typescale-font-family, inherit);
@@ -245,7 +246,7 @@ var y = m`
     box-sizing: border-box;
     gap: 8px;
   }
-`, b = m`
+`, c = n`
   :host {
     display: block;
     outline: none;
@@ -346,124 +347,115 @@ var y = m`
     background-color: var(--md-sys-color-primary, #6750A4);
     color: var(--md-sys-color-on-primary, #FFFFFF);
   }
-`, o = class extends p {
-  constructor(...t) {
-    super(...t), this.icon = "", this.label = "", this.headline = "", this.badge = "", this.active = !1, this.selected = !1, this.disabled = !1, this.href = "", this.target = "", this.handleClick = (n) => {
-      if (this.disabled) {
-        n.preventDefault(), n.stopImmediatePropagation();
-        return;
-      }
-      this.emitEvent("item-click", {
-        label: this.label || this.headline,
-        icon: this.icon,
-        active: this.active
-      });
-    };
-  }
-  static {
-    this.styles = [p.styles, b];
-  }
-  willUpdate(t) {
-    super.willUpdate(t), t.has("selected") && !t.has("active") ? this.active = this.selected : t.has("active") && !t.has("selected") && (this.selected = this.active);
-  }
-  render() {
-    const t = this.label || this.headline, n = a`
+`, l = class extends e {
+	constructor(...e) {
+		super(...e), this.icon = "", this.label = "", this.headline = "", this.badge = "", this.active = !1, this.selected = !1, this.disabled = !1, this.href = "", this.target = "", this.handleClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault(), e.stopImmediatePropagation();
+				return;
+			}
+			this.emitEvent("item-click", {
+				label: this.label || this.headline,
+				icon: this.icon,
+				active: this.active
+			});
+		};
+	}
+	static {
+		this.styles = [e.styles, c];
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("selected") && !e.has("active") ? this.active = this.selected : e.has("active") && !e.has("selected") && (this.selected = this.active);
+	}
+	render() {
+		let e = this.label || this.headline, t = r`
       <md-ripple ?disabled=${this.disabled}></md-ripple>
       <md-focus-ring></md-focus-ring>
 
       <div class="start">
-        ${this.icon ? a`<md-icon name=${this.icon}></md-icon>` : s}
+        ${this.icon ? r`<md-icon name=${this.icon}></md-icon>` : i}
         <slot name="icon"></slot>
       </div>
 
       <div class="label-container">
-        ${t ? a`<span class="label">${t}</span>` : s}
+        ${e ? r`<span class="label">${e}</span>` : i}
         <slot></slot>
       </div>
 
       <div class="end">
-        ${this.badge ? a`<span class="badge">${this.badge}</span>` : s}
+        ${this.badge ? r`<span class="badge">${this.badge}</span>` : i}
         <slot name="badge"></slot>
       </div>
     `;
-    return this.href ? a`
+		return this.href ? r`
         <a
           class="item"
-          href=${this.disabled ? s : this.href}
-          target=${this.target || s}
-          aria-disabled=${this.disabled ? "true" : s}
+          href=${this.disabled ? i : this.href}
+          target=${this.target || i}
+          aria-disabled=${this.disabled ? "true" : i}
           tabindex=${this.disabled ? "-1" : "0"}
           @click=${this.handleClick}
         >
-          ${n}
+          ${t}
         </a>
-      ` : a`
+      ` : r`
       <div
         class="item"
         role="button"
         tabindex=${this.disabled ? "-1" : "0"}
-        aria-disabled=${this.disabled ? "true" : s}
+        aria-disabled=${this.disabled ? "true" : i}
         @click=${this.handleClick}
       >
-        ${n}
+        ${t}
       </div>
     `;
-  }
+	}
 };
-e([i({ type: String })], o.prototype, "icon", void 0);
-e([i({ type: String })], o.prototype, "label", void 0);
-e([i({ type: String })], o.prototype, "headline", void 0);
-e([i({ type: String })], o.prototype, "badge", void 0);
-e([i({
-  type: Boolean,
-  reflect: !0
-})], o.prototype, "active", void 0);
-e([i({
-  type: Boolean,
-  reflect: !0
-})], o.prototype, "selected", void 0);
-e([i({
-  type: Boolean,
-  reflect: !0
-})], o.prototype, "disabled", void 0);
-e([i({ type: String })], o.prototype, "href", void 0);
-e([i({ type: String })], o.prototype, "target", void 0);
-o = e([d("md-navigation-drawer-item")], o);
-var r = class extends p {
-  constructor(...t) {
-    super(...t), this.open = !1, this.type = "modal", this.responsive = !1, this.closed = !1, this.pivot = "left", this.headline = "", this.handleKeyDown = (n) => {
-      n.key === "Escape" && this.open && this.isModalMode() && this.close();
-    }, this.handleScrimClick = () => {
-      this.close(), this.emitEvent("scrim-click");
-    };
-  }
-  static {
-    this.styles = [p.styles, y];
-  }
-  connectedCallback() {
-    super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown);
-  }
-  updated(t) {
-    super.updated(t), t.has("open") && (this.open ? this.emitEvent("open") : this.emitEvent("close")), t.has("closed") && !t.has("open") && (this.closed ? this.emitEvent("close") : this.emitEvent("open"));
-  }
-  isModalMode() {
-    return this.responsive || this.type === "responsive" ? typeof window < "u" && window.innerWidth <= 960 : this.type !== "standard";
-  }
-  show() {
-    this.isModalMode() ? this.open = !0 : (this.closed = !1, this.open = !0);
-  }
-  close() {
-    this.isModalMode() ? this.open = !1 : (this.closed = !0, this.open = !1);
-  }
-  toggle() {
-    this.isModalMode() ? this.open = !this.open : this.closed = !this.closed;
-  }
-  render() {
-    const t = this.headline ? a`<h2 class="headline">${this.headline}</h2>` : s;
-    return a`
+t([o({ type: String })], l.prototype, "icon", void 0), t([o({ type: String })], l.prototype, "label", void 0), t([o({ type: String })], l.prototype, "headline", void 0), t([o({ type: String })], l.prototype, "badge", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "active", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "selected", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), t([o({ type: String })], l.prototype, "href", void 0), t([o({ type: String })], l.prototype, "target", void 0), l = t([a("md-navigation-drawer-item")], l);
+var u = class extends e {
+	constructor(...e) {
+		super(...e), this.open = !1, this.type = "modal", this.responsive = !1, this.closed = !1, this.pivot = "left", this.headline = "", this.handleKeyDown = (e) => {
+			e.key === "Escape" && this.open && this.isModalMode() && this.close();
+		}, this.handleScrimClick = () => {
+			this.close(), this.emitEvent("scrim-click");
+		};
+	}
+	static {
+		this.styles = [e.styles, s];
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown);
+	}
+	updated(e) {
+		super.updated(e), e.has("open") && (this.open ? this.emitEvent("open") : this.emitEvent("close")), e.has("closed") && !e.has("open") && (this.closed ? this.emitEvent("close") : this.emitEvent("open"));
+	}
+	isModalMode() {
+		return this.responsive || this.type === "responsive" ? typeof window < "u" && window.innerWidth <= 960 : this.type !== "standard";
+	}
+	show() {
+		this.isModalMode() || (this.closed = !1), this.open = !0;
+	}
+	close() {
+		this.isModalMode() || (this.closed = !0), this.open = !1;
+	}
+	toggle() {
+		this.isModalMode() ? this.open = !this.open : this.closed = !this.closed;
+	}
+	render() {
+		let e = this.headline ? r`<h2 class="headline">${this.headline}</h2>` : i;
+		return r`
       <div class="scrim" @click=${this.handleScrimClick}></div>
 
       <aside
@@ -474,7 +466,7 @@ var r = class extends p {
       >
         <div class="header">
           <slot name="header">
-            ${t}
+            ${e}
           </slot>
         </div>
 
@@ -487,45 +479,31 @@ var r = class extends p {
         </div>
       </aside>
     `;
-  }
-};
-e([i({
-  type: Boolean,
-  reflect: !0
-})], r.prototype, "open", void 0);
-e([i({
-  type: String,
-  reflect: !0
-})], r.prototype, "type", void 0);
-e([i({
-  type: Boolean,
-  reflect: !0
-})], r.prototype, "responsive", void 0);
-e([i({
-  type: Boolean,
-  reflect: !0
-})], r.prototype, "closed", void 0);
-e([i({
-  type: String,
-  reflect: !0
-})], r.prototype, "pivot", void 0);
-e([i({ type: String })], r.prototype, "headline", void 0);
-r = e([d("md-navigation-drawer")], r);
-var c = class extends r {
-};
-c = e([d("md-drawer")], c);
-var h = class extends r {
+	}
 };
-h = e([d("md-menu-bar")], h);
-var v = class extends o {
-};
-v = e([d("md-drawer-item")], v);
-export {
-  o as a,
-  r as i,
-  v as n,
-  h as r,
-  c as t
-};
-
-//# sourceMappingURL=navigation-drawer-CKl44Ef5.js.map
+t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "open", void 0), t([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "type", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "responsive", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "closed", void 0), t([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "pivot", void 0), t([o({ type: String })], u.prototype, "headline", void 0), u = t([a("md-navigation-drawer")], u);
+var d = class extends u {};
+d = t([a("md-drawer")], d);
+var f = class extends u {};
+f = t([a("md-menu-bar")], f);
+var p = class extends l {};
+p = t([a("md-drawer-item")], p);
+//#endregion
+export { l as a, u as i, p as n, f as r, d as t };
+
+//# sourceMappingURL=navigation-drawer-pGer0t4z.js.map

package/dist/chunks/{navigation-drawer-CKl44Ef5.js.map → navigation-drawer-pGer0t4z.js.map}

@@ -1 +1 @@
-{"version":3,"file":"navigation-drawer-CKl44Ef5.js","names":[],"sources":["../../src/components/navigation-drawer/navigation-drawer.css.ts","../../src/components/navigation-drawer/navigation-drawer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const navigationDrawerStyles = css`\n  :host {\n    display: contents;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n  }\n\n  .scrim {\n    position: fixed;\n    inset: 0;\n    background-color: var(--md-navigation-drawer-scrim-color, rgba(0, 0, 0, 0.32));\n    backdrop-filter: blur(1px);\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n    z-index: 999;\n  }\n\n  :host([open]) .scrim {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  .drawer {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: var(--md-navigation-drawer-width, 360px);\n    max-width: calc(100vw - 56px);\n    background-color: var(--md-navigation-drawer-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));\n    color: var(--md-navigation-drawer-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n    overflow: hidden;\n    z-index: 1000;\n  }\n\n  /* Modal Variant (Default) */\n  :host(:not([type=\"standard\"])) .drawer,\n  :host([type=\"modal\"]) .drawer {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    height: 100dvh;\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n    visibility: hidden;\n  }\n\n  /* Left Pivot (Default) */\n  :host(:not([pivot=\"right\"])) .drawer {\n    left: 0;\n    border-radius: 0 16px 16px 0;\n    transform: translateX(-100%);\n  }\n\n  :host([open]:not([pivot=\"right\"])) .drawer {\n    transform: translateX(0);\n    visibility: visible;\n  }\n\n  /* Right Pivot */\n  :host([pivot=\"right\"]) .drawer {\n    right: 0;\n    border-radius: 16px 0 0 16px;\n    transform: translateX(100%);\n  }\n\n  :host([pivot=\"right\"][open]) .drawer {\n    transform: translateX(0);\n    visibility: visible;\n  }\n\n  /* Standard Variant */\n  :host([type=\"standard\"]) {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n  }\n\n  :host([type=\"standard\"]) .scrim {\n    display: none;\n  }\n\n  :host([type=\"standard\"]) .drawer {\n    position: relative;\n    height: 100%;\n    border-right: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: 0;\n    transform: none;\n    visibility: visible;\n  }\n\n  :host([type=\"standard\"][pivot=\"right\"]) .drawer {\n    border-right: none;\n    border-left: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n  }\n\n  :host([type=\"standard\"]:not([open])) {\n    display: none;\n  }\n\n  /* Responsive Variant (Docked standard drawer on large screens, modal on mobile) */\n  @media (min-width: 961px) {\n    :host([responsive]),\n    :host([type=\"responsive\"]) {\n      display: block;\n      width: var(--md-navigation-drawer-width, 280px);\n      flex-shrink: 0;\n      height: calc(100vh - var(--md-top-app-bar-height, 64px));\n      position: sticky;\n      top: var(--md-top-app-bar-height, 64px);\n      z-index: 10;\n    }\n\n    :host([responsive][closed]),\n    :host([type=\"responsive\"][closed]) {\n      display: none !important;\n    }\n\n    :host([responsive]) .scrim,\n    :host([type=\"responsive\"]) .scrim {\n      display: none !important;\n    }\n\n    :host([responsive]) .drawer,\n    :host([type=\"responsive\"]) .drawer {\n      position: relative;\n      top: auto;\n      left: auto;\n      right: auto;\n      bottom: auto;\n      height: 100%;\n      width: 100%;\n      max-width: none;\n      border-right: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n      border-radius: 0;\n      transform: none !important;\n      visibility: visible !important;\n      box-shadow: none;\n      background-color: var(--md-navigation-drawer-container-color, var(--md-sys-color-surface, #FEF7FF));\n    }\n\n    :host([responsive][pivot=\"right\"]) .drawer,\n    :host([type=\"responsive\"][pivot=\"right\"]) .drawer {\n      border-right: none;\n      border-left: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    }\n  }\n\n  @media (max-width: 960px) {\n    :host([responsive]),\n    :host([type=\"responsive\"]) {\n      display: contents;\n    }\n\n    :host([responsive]) .drawer,\n    :host([type=\"responsive\"]) .drawer {\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      height: 100dvh;\n      box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n      transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),\n                  visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n      visibility: hidden;\n    }\n\n    :host([responsive]:not([pivot=\"right\"])) .drawer,\n    :host([type=\"responsive\"]:not([pivot=\"right\"])) .drawer {\n      left: 0;\n      border-radius: 0 16px 16px 0;\n      transform: translateX(-100%);\n    }\n\n    :host([responsive][open]:not([pivot=\"right\"])) .drawer,\n    :host([type=\"responsive\"][open]:not([pivot=\"right\"])) .drawer {\n      transform: translateX(0);\n      visibility: visible;\n    }\n\n    :host([responsive][pivot=\"right\"]) .drawer,\n    :host([type=\"responsive\"][pivot=\"right\"]) .drawer {\n      right: 0;\n      border-radius: 16px 0 0 16px;\n      transform: translateX(100%);\n    }\n\n    :host([responsive][pivot=\"right\"][open]) .drawer,\n    :host([type=\"responsive\"][pivot=\"right\"][open]) .drawer {\n      transform: translateX(0);\n      visibility: visible;\n    }\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    padding: 24px 28px 16px 28px;\n    box-sizing: border-box;\n    gap: 4px;\n  }\n\n  .headline {\n    margin: 0;\n    font-size: var(--md-sys-typescale-title-small-size, 14px);\n    line-height: 20px;\n    font-weight: 500;\n    color: var(--md-navigation-drawer-headline-color, var(--md-sys-color-on-surface-variant, #49454F));\n    text-transform: uppercase;\n    letter-spacing: 0.1px;\n  }\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 0 12px;\n    box-sizing: border-box;\n    gap: 2px;\n  }\n\n  .content::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .content::-webkit-scrollbar-thumb {\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: 4px;\n  }\n\n  .footer {\n    display: flex;\n    flex-direction: column;\n    padding: 12px 16px 16px 16px;\n    box-sizing: border-box;\n    gap: 8px;\n  }\n`;\n\nexport const navigationDrawerItemStyles = css`\n  :host {\n    display: block;\n    outline: none;\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: transparent;\n    margin-bottom: 4px;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-height: 56px;\n    padding: 0 24px 0 16px;\n    box-sizing: border-box;\n    border-radius: var(--md-navigation-drawer-item-shape, 28px);\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    text-decoration: none;\n    gap: 12px;\n    user-select: none;\n    cursor: pointer;\n    overflow: hidden;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .item:hover {\n    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n  }\n\n  /* Active / Selected State */\n  :host([active]) .item,\n  :host([selected]) .item {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n    font-weight: 500;\n  }\n\n  :host([active]) .start,\n  :host([selected]) .start {\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n  }\n\n  .start {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .label-container {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    justify-content: center;\n  }\n\n  .label {\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    line-height: 20px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .end {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--md-sys-typescale-label-medium-size, 12px);\n    font-weight: 500;\n    color: inherit;\n    flex-shrink: 0;\n  }\n\n  .badge {\n    padding: 2px 8px;\n    font-size: 11px;\n    font-weight: 500;\n    line-height: 16px;\n    border-radius: 8px;\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    letter-spacing: 0.2px;\n  }\n\n  :host([active]) .badge,\n  :host([selected]) .badge {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { navigationDrawerStyles, navigationDrawerItemStyles } from './navigation-drawer.css.js';\n\nexport type NavigationDrawerType = 'modal' | 'standard' | 'responsive';\nexport type NavigationDrawerPivot = 'left' | 'right';\n\n/**\n * Material Design 3 Navigation Drawer Item component.\n *\n * @slot icon - Custom leading icon.\n * @slot - Default slot for item label / headline.\n * @slot badge - Custom trailing badge or indicator.\n */\n@customElement('md-navigation-drawer-item')\nexport class MdNavigationDrawerItem extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, navigationDrawerItemStyles];\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String })\n  badge = '';\n\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('selected') && !changedProperties.has('active')) {\n      this.active = this.selected;\n    } else if (changedProperties.has('active') && !changedProperties.has('selected')) {\n      this.selected = this.active;\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n    this.emitEvent('item-click', {\n      label: this.label || this.headline,\n      icon: this.icon,\n      active: this.active,\n    });\n  };\n\n  override render() {\n    const text = this.label || this.headline;\n\n    const inner = html`\n      <md-ripple ?disabled=${this.disabled}></md-ripple>\n      <md-focus-ring></md-focus-ring>\n\n      <div class=\"start\">\n        ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n        <slot name=\"icon\"></slot>\n      </div>\n\n      <div class=\"label-container\">\n        ${text ? html`<span class=\"label\">${text}</span>` : nothing}\n        <slot></slot>\n      </div>\n\n      <div class=\"end\">\n        ${this.badge ? html`<span class=\"badge\">${this.badge}</span>` : nothing}\n        <slot name=\"badge\"></slot>\n      </div>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          class=\"item\"\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.handleClick}\n        >\n          ${inner}\n        </a>\n      `;\n    }\n\n    return html`\n      <div\n        class=\"item\"\n        role=\"button\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        @click=${this.handleClick}\n      >\n        ${inner}\n      </div>\n    `;\n  }\n}\n\n/**\n * Material Design 3 Navigation Drawer (Side Menu / Menu Bar) component.\n *\n * @slot header - Top drawer header area (profile, app title, etc.).\n * @slot - Default slot for drawer navigation items.\n * @slot footer - Bottom drawer section.\n */\n@customElement('md-navigation-drawer')\nexport class MdNavigationDrawer extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, navigationDrawerStyles];\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String, reflect: true })\n  type: NavigationDrawerType = 'modal';\n\n  @property({ type: Boolean, reflect: true })\n  responsive = false;\n\n  @property({ type: Boolean, reflect: true })\n  closed = false;\n\n  @property({ type: String, reflect: true })\n  pivot: NavigationDrawerPivot = 'left';\n\n  @property({ type: String })\n  headline = '';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.emitEvent('open');\n      } else {\n        this.emitEvent('close');\n      }\n    }\n    if (changedProperties.has('closed') && !changedProperties.has('open')) {\n      if (this.closed) {\n        this.emitEvent('close');\n      } else {\n        this.emitEvent('open');\n      }\n    }\n  }\n\n  private isModalMode(): boolean {\n    if (this.responsive || this.type === 'responsive') {\n      return typeof window !== 'undefined' && window.innerWidth <= 960;\n    }\n    if (this.type === 'standard') return false;\n    return true;\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.open && this.isModalMode()) {\n      this.close();\n    }\n  };\n\n  private handleScrimClick = () => {\n    this.close();\n    this.emitEvent('scrim-click');\n  };\n\n  /**\n   * Opens the navigation drawer.\n   */\n  show() {\n    if (this.isModalMode()) {\n      this.open = true;\n    } else {\n      this.closed = false;\n      this.open = true;\n    }\n  }\n\n  /**\n   * Closes the navigation drawer.\n   */\n  close() {\n    if (this.isModalMode()) {\n      this.open = false;\n    } else {\n      this.closed = true;\n      this.open = false;\n    }\n  }\n\n  /**\n   * Toggles open / closed state of the navigation drawer.\n   */\n  toggle() {\n    if (this.isModalMode()) {\n      this.open = !this.open;\n    } else {\n      this.closed = !this.closed;\n    }\n  }\n\n  override render() {\n    const headlineContent = this.headline\n      ? html`<h2 class=\"headline\">${this.headline}</h2>`\n      : nothing;\n\n    return html`\n      <div class=\"scrim\" @click=${this.handleScrimClick}></div>\n\n      <aside\n        class=\"drawer\"\n        role=\"navigation\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        aria-label=${this.headline || 'Navigation menu'}\n      >\n        <div class=\"header\">\n          <slot name=\"header\">\n            ${headlineContent}\n          </slot>\n        </div>\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n\n        <div class=\"footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </aside>\n    `;\n  }\n}\n\n// Aliases\n@customElement('md-drawer')\nexport class MdDrawer extends MdNavigationDrawer {}\n\n@customElement('md-menu-bar')\nexport class MdMenuBar extends MdNavigationDrawer {}\n\n@customElement('md-drawer-item')\nexport class MdDrawerItem extends MdNavigationDrawerItem {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer': MdNavigationDrawer;\n    'md-drawer': MdDrawer;\n    'md-menu-bar': MdMenuBar;\n    'md-navigation-drawer-item': MdNavigationDrawerItem;\n    'md-drawer-item': MdDrawerItem;\n  }\n}\n"],"mappings":";;;;;;AAEA,IAAa,IAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}
+{"version":3,"file":"navigation-drawer-pGer0t4z.js","names":[],"sources":["../../src/components/navigation-drawer/navigation-drawer.css.ts","../../src/components/navigation-drawer/navigation-drawer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const navigationDrawerStyles = css`\n  :host {\n    display: contents;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n  }\n\n  .scrim {\n    position: fixed;\n    inset: 0;\n    background-color: var(--md-navigation-drawer-scrim-color, rgba(0, 0, 0, 0.32));\n    backdrop-filter: blur(1px);\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n    z-index: 999;\n  }\n\n  :host([open]) .scrim {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  .drawer {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: var(--md-navigation-drawer-width, 360px);\n    max-width: calc(100vw - 56px);\n    background-color: var(--md-navigation-drawer-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));\n    color: var(--md-navigation-drawer-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n    overflow: hidden;\n    z-index: 1000;\n  }\n\n  /* Modal Variant (Default) */\n  :host(:not([type=\"standard\"])) .drawer,\n  :host([type=\"modal\"]) .drawer {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    height: 100dvh;\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n    visibility: hidden;\n  }\n\n  /* Left Pivot (Default) */\n  :host(:not([pivot=\"right\"])) .drawer {\n    left: 0;\n    border-radius: 0 16px 16px 0;\n    transform: translateX(-100%);\n  }\n\n  :host([open]:not([pivot=\"right\"])) .drawer {\n    transform: translateX(0);\n    visibility: visible;\n  }\n\n  /* Right Pivot */\n  :host([pivot=\"right\"]) .drawer {\n    right: 0;\n    border-radius: 16px 0 0 16px;\n    transform: translateX(100%);\n  }\n\n  :host([pivot=\"right\"][open]) .drawer {\n    transform: translateX(0);\n    visibility: visible;\n  }\n\n  /* Standard Variant */\n  :host([type=\"standard\"]) {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n  }\n\n  :host([type=\"standard\"]) .scrim {\n    display: none;\n  }\n\n  :host([type=\"standard\"]) .drawer {\n    position: relative;\n    height: 100%;\n    border-right: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: 0;\n    transform: none;\n    visibility: visible;\n  }\n\n  :host([type=\"standard\"][pivot=\"right\"]) .drawer {\n    border-right: none;\n    border-left: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n  }\n\n  :host([type=\"standard\"]:not([open])) {\n    display: none;\n  }\n\n  /* Responsive Variant (Docked standard drawer on large screens, modal on mobile) */\n  @media (min-width: 961px) {\n    :host([responsive]),\n    :host([type=\"responsive\"]) {\n      display: block;\n      width: var(--md-navigation-drawer-width, 280px);\n      flex-shrink: 0;\n      height: calc(100vh - var(--md-top-app-bar-height, 64px));\n      position: sticky;\n      top: var(--md-top-app-bar-height, 64px);\n      z-index: 10;\n    }\n\n    :host([responsive][closed]),\n    :host([type=\"responsive\"][closed]) {\n      display: none !important;\n    }\n\n    :host([responsive]) .scrim,\n    :host([type=\"responsive\"]) .scrim {\n      display: none !important;\n    }\n\n    :host([responsive]) .drawer,\n    :host([type=\"responsive\"]) .drawer {\n      position: relative;\n      top: auto;\n      left: auto;\n      right: auto;\n      bottom: auto;\n      height: 100%;\n      width: 100%;\n      max-width: none;\n      border-right: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n      border-radius: 0;\n      transform: none !important;\n      visibility: visible !important;\n      box-shadow: none;\n      background-color: var(--md-navigation-drawer-container-color, var(--md-sys-color-surface, #FEF7FF));\n    }\n\n    :host([responsive][pivot=\"right\"]) .drawer,\n    :host([type=\"responsive\"][pivot=\"right\"]) .drawer {\n      border-right: none;\n      border-left: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    }\n  }\n\n  @media (max-width: 960px) {\n    :host([responsive]),\n    :host([type=\"responsive\"]) {\n      display: contents;\n    }\n\n    :host([responsive]) .drawer,\n    :host([type=\"responsive\"]) .drawer {\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      height: 100dvh;\n      box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n      transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),\n                  visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n      visibility: hidden;\n    }\n\n    :host([responsive]:not([pivot=\"right\"])) .drawer,\n    :host([type=\"responsive\"]:not([pivot=\"right\"])) .drawer {\n      left: 0;\n      border-radius: 0 16px 16px 0;\n      transform: translateX(-100%);\n    }\n\n    :host([responsive][open]:not([pivot=\"right\"])) .drawer,\n    :host([type=\"responsive\"][open]:not([pivot=\"right\"])) .drawer {\n      transform: translateX(0);\n      visibility: visible;\n    }\n\n    :host([responsive][pivot=\"right\"]) .drawer,\n    :host([type=\"responsive\"][pivot=\"right\"]) .drawer {\n      right: 0;\n      border-radius: 16px 0 0 16px;\n      transform: translateX(100%);\n    }\n\n    :host([responsive][pivot=\"right\"][open]) .drawer,\n    :host([type=\"responsive\"][pivot=\"right\"][open]) .drawer {\n      transform: translateX(0);\n      visibility: visible;\n    }\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    padding: 24px 28px 16px 28px;\n    box-sizing: border-box;\n    gap: 4px;\n  }\n\n  .headline {\n    margin: 0;\n    font-size: var(--md-sys-typescale-title-small-size, 14px);\n    line-height: 20px;\n    font-weight: 500;\n    color: var(--md-navigation-drawer-headline-color, var(--md-sys-color-on-surface-variant, #49454F));\n    text-transform: uppercase;\n    letter-spacing: 0.1px;\n  }\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 0 12px;\n    box-sizing: border-box;\n    gap: 2px;\n  }\n\n  .content::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .content::-webkit-scrollbar-thumb {\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: 4px;\n  }\n\n  .footer {\n    display: flex;\n    flex-direction: column;\n    padding: 12px 16px 16px 16px;\n    box-sizing: border-box;\n    gap: 8px;\n  }\n`;\n\nexport const navigationDrawerItemStyles = css`\n  :host {\n    display: block;\n    outline: none;\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: transparent;\n    margin-bottom: 4px;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-height: 56px;\n    padding: 0 24px 0 16px;\n    box-sizing: border-box;\n    border-radius: var(--md-navigation-drawer-item-shape, 28px);\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    text-decoration: none;\n    gap: 12px;\n    user-select: none;\n    cursor: pointer;\n    overflow: hidden;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .item:hover {\n    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n  }\n\n  /* Active / Selected State */\n  :host([active]) .item,\n  :host([selected]) .item {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n    font-weight: 500;\n  }\n\n  :host([active]) .start,\n  :host([selected]) .start {\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n  }\n\n  .start {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .label-container {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    justify-content: center;\n  }\n\n  .label {\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    line-height: 20px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .end {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--md-sys-typescale-label-medium-size, 12px);\n    font-weight: 500;\n    color: inherit;\n    flex-shrink: 0;\n  }\n\n  .badge {\n    padding: 2px 8px;\n    font-size: 11px;\n    font-weight: 500;\n    line-height: 16px;\n    border-radius: 8px;\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    letter-spacing: 0.2px;\n  }\n\n  :host([active]) .badge,\n  :host([selected]) .badge {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { navigationDrawerStyles, navigationDrawerItemStyles } from './navigation-drawer.css.js';\n\nexport type NavigationDrawerType = 'modal' | 'standard' | 'responsive';\nexport type NavigationDrawerPivot = 'left' | 'right';\n\n/**\n * Material Design 3 Navigation Drawer Item component.\n *\n * @slot icon - Custom leading icon.\n * @slot - Default slot for item label / headline.\n * @slot badge - Custom trailing badge or indicator.\n */\n@customElement('md-navigation-drawer-item')\nexport class MdNavigationDrawerItem extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, navigationDrawerItemStyles];\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String })\n  badge = '';\n\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('selected') && !changedProperties.has('active')) {\n      this.active = this.selected;\n    } else if (changedProperties.has('active') && !changedProperties.has('selected')) {\n      this.selected = this.active;\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n    this.emitEvent('item-click', {\n      label: this.label || this.headline,\n      icon: this.icon,\n      active: this.active,\n    });\n  };\n\n  override render() {\n    const text = this.label || this.headline;\n\n    const inner = html`\n      <md-ripple ?disabled=${this.disabled}></md-ripple>\n      <md-focus-ring></md-focus-ring>\n\n      <div class=\"start\">\n        ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n        <slot name=\"icon\"></slot>\n      </div>\n\n      <div class=\"label-container\">\n        ${text ? html`<span class=\"label\">${text}</span>` : nothing}\n        <slot></slot>\n      </div>\n\n      <div class=\"end\">\n        ${this.badge ? html`<span class=\"badge\">${this.badge}</span>` : nothing}\n        <slot name=\"badge\"></slot>\n      </div>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          class=\"item\"\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.handleClick}\n        >\n          ${inner}\n        </a>\n      `;\n    }\n\n    return html`\n      <div\n        class=\"item\"\n        role=\"button\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        @click=${this.handleClick}\n      >\n        ${inner}\n      </div>\n    `;\n  }\n}\n\n/**\n * Material Design 3 Navigation Drawer (Side Menu / Menu Bar) component.\n *\n * @slot header - Top drawer header area (profile, app title, etc.).\n * @slot - Default slot for drawer navigation items.\n * @slot footer - Bottom drawer section.\n */\n@customElement('md-navigation-drawer')\nexport class MdNavigationDrawer extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, navigationDrawerStyles];\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String, reflect: true })\n  type: NavigationDrawerType = 'modal';\n\n  @property({ type: Boolean, reflect: true })\n  responsive = false;\n\n  @property({ type: Boolean, reflect: true })\n  closed = false;\n\n  @property({ type: String, reflect: true })\n  pivot: NavigationDrawerPivot = 'left';\n\n  @property({ type: String })\n  headline = '';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.emitEvent('open');\n      } else {\n        this.emitEvent('close');\n      }\n    }\n    if (changedProperties.has('closed') && !changedProperties.has('open')) {\n      if (this.closed) {\n        this.emitEvent('close');\n      } else {\n        this.emitEvent('open');\n      }\n    }\n  }\n\n  private isModalMode(): boolean {\n    if (this.responsive || this.type === 'responsive') {\n      return typeof window !== 'undefined' && window.innerWidth <= 960;\n    }\n    if (this.type === 'standard') return false;\n    return true;\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.open && this.isModalMode()) {\n      this.close();\n    }\n  };\n\n  private handleScrimClick = () => {\n    this.close();\n    this.emitEvent('scrim-click');\n  };\n\n  /**\n   * Opens the navigation drawer.\n   */\n  show() {\n    if (this.isModalMode()) {\n      this.open = true;\n    } else {\n      this.closed = false;\n      this.open = true;\n    }\n  }\n\n  /**\n   * Closes the navigation drawer.\n   */\n  close() {\n    if (this.isModalMode()) {\n      this.open = false;\n    } else {\n      this.closed = true;\n      this.open = false;\n    }\n  }\n\n  /**\n   * Toggles open / closed state of the navigation drawer.\n   */\n  toggle() {\n    if (this.isModalMode()) {\n      this.open = !this.open;\n    } else {\n      this.closed = !this.closed;\n    }\n  }\n\n  override render() {\n    const headlineContent = this.headline\n      ? html`<h2 class=\"headline\">${this.headline}</h2>`\n      : nothing;\n\n    return html`\n      <div class=\"scrim\" @click=${this.handleScrimClick}></div>\n\n      <aside\n        class=\"drawer\"\n        role=\"navigation\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        aria-label=${this.headline || 'Navigation menu'}\n      >\n        <div class=\"header\">\n          <slot name=\"header\">\n            ${headlineContent}\n          </slot>\n        </div>\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n\n        <div class=\"footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </aside>\n    `;\n  }\n}\n\n// Aliases\n@customElement('md-drawer')\nexport class MdDrawer extends MdNavigationDrawer {}\n\n@customElement('md-menu-bar')\nexport class MdMenuBar extends MdNavigationDrawer {}\n\n@customElement('md-drawer-item')\nexport class MdDrawerItem extends MdNavigationDrawerItem {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer': MdNavigationDrawer;\n    'md-drawer': MdDrawer;\n    'md-menu-bar': MdMenuBar;\n    'md-navigation-drawer-item': MdNavigationDrawerItem;\n    'md-drawer-item': MdDrawerItem;\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/{navigation-rail-item-6pdhNHJK.js → navigation-rail-item-CWvGjLjC.js}

@@ -1,10 +1,11 @@
-import { n as l, t as e } from "./decorate-DXuynaiA.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import "./icon-DrNqcNEL.js";
-import { css as c, html as r, nothing as o } from "lit";
-import { customElement as h, property as t } from "lit/decorators.js";
-var w = c`
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
+import "./icon-FvKeXi61.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/components/navigation-rail/navigation-rail.css.ts
+var s = n`
   :host {
     display: inline-flex;
     flex-direction: column;
@@ -84,7 +85,7 @@ var w = c`
     padding-top: 12px;
     flex-shrink: 0;
   }
-`, m = c`
+`, c = n`
   :host {
     display: block;
     width: 100%;
@@ -238,120 +239,103 @@ var w = c`
     background-color: var(--md-sys-color-error, #B3261E);
     color: var(--md-sys-color-on-error, #FFFFFF);
   }
-`, i = class extends l {
-  constructor(...a) {
-    super(...a), this.icon = "", this.activeIcon = "", this.label = "", this.headline = "", this.badge = "", this.badgeDot = !1, this.active = !1, this.selected = !1, this.disabled = !1, this.hideLabel = !1, this.href = "", this.target = "", this.value = "", this.handleClick = (n) => {
-      if (this.disabled) {
-        n.preventDefault(), n.stopImmediatePropagation();
-        return;
-      }
-      this.emitEvent("item-click", {
-        label: this.label || this.headline,
-        icon: this.icon,
-        active: this.active,
-        value: this.value,
-        item: this
-      });
-    };
-  }
-  static {
-    this.styles = [l.styles, m];
-  }
-  willUpdate(a) {
-    super.willUpdate(a), a.has("active") && !a.has("selected") ? this.selected = this.active : a.has("selected") && !a.has("active") ? this.active = this.selected : a.has("active") && a.has("selected") && (this.active ? this.selected = !0 : this.selected && (this.active = !0));
-  }
-  render() {
-    const a = this.label || this.headline, n = this.active && this.activeIcon ? this.activeIcon : this.icon, v = () => this.badgeDot ? r`<span class="badge dot"></span>` : this.badge ? r`<span class="badge">${this.badge}</span>` : o, s = r`
+`, l = class extends e {
+	constructor(...e) {
+		super(...e), this.icon = "", this.activeIcon = "", this.label = "", this.headline = "", this.badge = "", this.badgeDot = !1, this.active = !1, this.selected = !1, this.disabled = !1, this.hideLabel = !1, this.href = "", this.target = "", this.value = "", this.handleClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault(), e.stopImmediatePropagation();
+				return;
+			}
+			this.emitEvent("item-click", {
+				label: this.label || this.headline,
+				icon: this.icon,
+				active: this.active,
+				value: this.value,
+				item: this
+			});
+		};
+	}
+	static {
+		this.styles = [e.styles, c];
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("active") && !e.has("selected") ? this.selected = this.active : e.has("selected") && !e.has("active") ? this.active = this.selected : e.has("active") && e.has("selected") && (this.active ? this.selected = !0 : this.selected && (this.active = !0));
+	}
+	render() {
+		let e = this.label || this.headline, t = this.active && this.activeIcon ? this.activeIcon : this.icon, n = r`
       <div class="indicator-wrapper">
         <div class="active-indicator">
           <md-ripple ?disabled=${this.disabled}></md-ripple>
           <md-focus-ring></md-focus-ring>
           <span class="icon-slot">
             <slot name="icon">
-              ${n ? r`<md-icon name=${n}></md-icon>` : o}
+              ${t ? r`<md-icon name=${t}></md-icon>` : i}
             </slot>
           </span>
         </div>
 
         <div class="badge-slot">
           <slot name="badge">
-            ${v()}
+            ${this.badgeDot ? r`<span class="badge dot"></span>` : this.badge ? r`<span class="badge">${this.badge}</span>` : i}
           </slot>
         </div>
       </div>
 
       <div class="label-container">
         <slot>
-          ${a ? r`<span class="label">${a}</span>` : o}
+          ${e ? r`<span class="label">${e}</span>` : i}
         </slot>
       </div>
     `;
-    return this.href ? r`
+		return this.href ? r`
         <a
           class="item"
-          href=${this.disabled ? o : this.href}
-          target=${this.target || o}
-          aria-disabled=${this.disabled ? "true" : o}
-          aria-current=${this.active ? "page" : o}
+          href=${this.disabled ? i : this.href}
+          target=${this.target || i}
+          aria-disabled=${this.disabled ? "true" : i}
+          aria-current=${this.active ? "page" : i}
           tabindex=${this.disabled ? "-1" : "0"}
           @click=${this.handleClick}
         >
-          ${s}
+          ${n}
         </a>
       ` : r`
       <div
         class="item"
         role="button"
         tabindex=${this.disabled ? "-1" : "0"}
-        aria-disabled=${this.disabled ? "true" : o}
+        aria-disabled=${this.disabled ? "true" : i}
         aria-pressed=${this.active ? "true" : "false"}
         @click=${this.handleClick}
       >
-        ${s}
+        ${n}
       </div>
     `;
-  }
-};
-e([t({ type: String })], i.prototype, "icon", void 0);
-e([t({
-  type: String,
-  attribute: "active-icon"
-})], i.prototype, "activeIcon", void 0);
-e([t({ type: String })], i.prototype, "label", void 0);
-e([t({ type: String })], i.prototype, "headline", void 0);
-e([t({ type: String })], i.prototype, "badge", void 0);
-e([t({
-  type: Boolean,
-  attribute: "badge-dot"
-})], i.prototype, "badgeDot", void 0);
-e([t({
-  type: Boolean,
-  reflect: !0
-})], i.prototype, "active", void 0);
-e([t({
-  type: Boolean,
-  reflect: !0
-})], i.prototype, "selected", void 0);
-e([t({
-  type: Boolean,
-  reflect: !0
-})], i.prototype, "disabled", void 0);
-e([t({
-  type: Boolean,
-  reflect: !0,
-  attribute: "hide-label"
-})], i.prototype, "hideLabel", void 0);
-e([t({ type: String })], i.prototype, "href", void 0);
-e([t({ type: String })], i.prototype, "target", void 0);
-e([t({ type: String })], i.prototype, "value", void 0);
-i = e([h("md-navigation-rail-item")], i);
-var d = class extends i {
-};
-d = e([h("md-nav-rail-item")], d);
-export {
-  i as n,
-  w as r,
-  d as t
+	}
 };
+t([o({ type: String })], l.prototype, "icon", void 0), t([o({
+	type: String,
+	attribute: "active-icon"
+})], l.prototype, "activeIcon", void 0), t([o({ type: String })], l.prototype, "label", void 0), t([o({ type: String })], l.prototype, "headline", void 0), t([o({ type: String })], l.prototype, "badge", void 0), t([o({
+	type: Boolean,
+	attribute: "badge-dot"
+})], l.prototype, "badgeDot", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "active", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "selected", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), t([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-label"
+})], l.prototype, "hideLabel", void 0), t([o({ type: String })], l.prototype, "href", void 0), t([o({ type: String })], l.prototype, "target", void 0), t([o({ type: String })], l.prototype, "value", void 0), l = t([a("md-navigation-rail-item")], l);
+var u = class extends l {};
+u = t([a("md-nav-rail-item")], u);
+//#endregion
+export { l as n, s as r, u as t };
 
-//# sourceMappingURL=navigation-rail-item-6pdhNHJK.js.map
+//# sourceMappingURL=navigation-rail-item-CWvGjLjC.js.map