@francofantomius/material-components 0.1.0 → 1.0.0

package/dist/chunks/navigation-drawer-CKl44Ef5.js

@@ -0,0 +1,531 @@
+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`
+  :host {
+    display: contents;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+  }
+
+  .scrim {
+    position: fixed;
+    inset: 0;
+    background-color: var(--md-navigation-drawer-scrim-color, rgba(0, 0, 0, 0.32));
+    backdrop-filter: blur(1px);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),
+                visibility 250ms cubic-bezier(0.2, 0, 0, 1);
+    z-index: 999;
+  }
+
+  :host([open]) .scrim {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .drawer {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: var(--md-navigation-drawer-width, 360px);
+    max-width: calc(100vw - 56px);
+    background-color: var(--md-navigation-drawer-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));
+    color: var(--md-navigation-drawer-on-container-color, var(--md-sys-color-on-surface, #1D1B20));
+    overflow: hidden;
+    z-index: 1000;
+  }
+
+  /* Modal Variant (Default) */
+  :host(:not([type="standard"])) .drawer,
+  :host([type="modal"]) .drawer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    height: 100dvh;
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),
+                visibility 250ms cubic-bezier(0.2, 0, 0, 1);
+    visibility: hidden;
+  }
+
+  /* Left Pivot (Default) */
+  :host(:not([pivot="right"])) .drawer {
+    left: 0;
+    border-radius: 0 16px 16px 0;
+    transform: translateX(-100%);
+  }
+
+  :host([open]:not([pivot="right"])) .drawer {
+    transform: translateX(0);
+    visibility: visible;
+  }
+
+  /* Right Pivot */
+  :host([pivot="right"]) .drawer {
+    right: 0;
+    border-radius: 16px 0 0 16px;
+    transform: translateX(100%);
+  }
+
+  :host([pivot="right"][open]) .drawer {
+    transform: translateX(0);
+    visibility: visible;
+  }
+
+  /* Standard Variant */
+  :host([type="standard"]) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  :host([type="standard"]) .scrim {
+    display: none;
+  }
+
+  :host([type="standard"]) .drawer {
+    position: relative;
+    height: 100%;
+    border-right: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
+    border-radius: 0;
+    transform: none;
+    visibility: visible;
+  }
+
+  :host([type="standard"][pivot="right"]) .drawer {
+    border-right: none;
+    border-left: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
+  }
+
+  :host([type="standard"]:not([open])) {
+    display: none;
+  }
+
+  /* Responsive Variant (Docked standard drawer on large screens, modal on mobile) */
+  @media (min-width: 961px) {
+    :host([responsive]),
+    :host([type="responsive"]) {
+      display: block;
+      width: var(--md-navigation-drawer-width, 280px);
+      flex-shrink: 0;
+      height: calc(100vh - var(--md-top-app-bar-height, 64px));
+      position: sticky;
+      top: var(--md-top-app-bar-height, 64px);
+      z-index: 10;
+    }
+
+    :host([responsive][closed]),
+    :host([type="responsive"][closed]) {
+      display: none !important;
+    }
+
+    :host([responsive]) .scrim,
+    :host([type="responsive"]) .scrim {
+      display: none !important;
+    }
+
+    :host([responsive]) .drawer,
+    :host([type="responsive"]) .drawer {
+      position: relative;
+      top: auto;
+      left: auto;
+      right: auto;
+      bottom: auto;
+      height: 100%;
+      width: 100%;
+      max-width: none;
+      border-right: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
+      border-radius: 0;
+      transform: none !important;
+      visibility: visible !important;
+      box-shadow: none;
+      background-color: var(--md-navigation-drawer-container-color, var(--md-sys-color-surface, #FEF7FF));
+    }
+
+    :host([responsive][pivot="right"]) .drawer,
+    :host([type="responsive"][pivot="right"]) .drawer {
+      border-right: none;
+      border-left: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
+    }
+  }
+
+  @media (max-width: 960px) {
+    :host([responsive]),
+    :host([type="responsive"]) {
+      display: contents;
+    }
+
+    :host([responsive]) .drawer,
+    :host([type="responsive"]) .drawer {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      height: 100dvh;
+      box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+      transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),
+                  visibility 250ms cubic-bezier(0.2, 0, 0, 1);
+      visibility: hidden;
+    }
+
+    :host([responsive]:not([pivot="right"])) .drawer,
+    :host([type="responsive"]:not([pivot="right"])) .drawer {
+      left: 0;
+      border-radius: 0 16px 16px 0;
+      transform: translateX(-100%);
+    }
+
+    :host([responsive][open]:not([pivot="right"])) .drawer,
+    :host([type="responsive"][open]:not([pivot="right"])) .drawer {
+      transform: translateX(0);
+      visibility: visible;
+    }
+
+    :host([responsive][pivot="right"]) .drawer,
+    :host([type="responsive"][pivot="right"]) .drawer {
+      right: 0;
+      border-radius: 16px 0 0 16px;
+      transform: translateX(100%);
+    }
+
+    :host([responsive][pivot="right"][open]) .drawer,
+    :host([type="responsive"][pivot="right"][open]) .drawer {
+      transform: translateX(0);
+      visibility: visible;
+    }
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    padding: 24px 28px 16px 28px;
+    box-sizing: border-box;
+    gap: 4px;
+  }
+
+  .headline {
+    margin: 0;
+    font-size: var(--md-sys-typescale-title-small-size, 14px);
+    line-height: 20px;
+    font-weight: 500;
+    color: var(--md-navigation-drawer-headline-color, var(--md-sys-color-on-surface-variant, #49454F));
+    text-transform: uppercase;
+    letter-spacing: 0.1px;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0 12px;
+    box-sizing: border-box;
+    gap: 2px;
+  }
+
+  .content::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .content::-webkit-scrollbar-thumb {
+    background-color: var(--md-sys-color-outline-variant, #CAC4D0);
+    border-radius: 4px;
+  }
+
+  .footer {
+    display: flex;
+    flex-direction: column;
+    padding: 12px 16px 16px 16px;
+    box-sizing: border-box;
+    gap: 8px;
+  }
+`, b = m`
+  :host {
+    display: block;
+    outline: none;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    margin-bottom: 4px;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  .item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 56px;
+    padding: 0 24px 0 16px;
+    box-sizing: border-box;
+    border-radius: var(--md-navigation-drawer-item-shape, 28px);
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    text-decoration: none;
+    gap: 12px;
+    user-select: none;
+    cursor: pointer;
+    overflow: hidden;
+    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
+                color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .item:hover {
+    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);
+  }
+
+  /* Active / Selected State */
+  :host([active]) .item,
+  :host([selected]) .item {
+    background-color: var(--md-sys-color-secondary-container, #E8DEF8);
+    color: var(--md-sys-color-on-secondary-container, #1D192B);
+    font-weight: 500;
+  }
+
+  :host([active]) .start,
+  :host([selected]) .start {
+    color: var(--md-sys-color-on-secondary-container, #1D192B);
+  }
+
+  .start {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    flex-shrink: 0;
+  }
+
+  .label-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    justify-content: center;
+  }
+
+  .label {
+    font-size: var(--md-sys-typescale-label-large-size, 14px);
+    line-height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .end {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--md-sys-typescale-label-medium-size, 12px);
+    font-weight: 500;
+    color: inherit;
+    flex-shrink: 0;
+  }
+
+  .badge {
+    padding: 2px 8px;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 16px;
+    border-radius: 8px;
+    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    letter-spacing: 0.2px;
+  }
+
+  :host([active]) .badge,
+  :host([selected]) .badge {
+    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`
+      <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}
+        <slot name="icon"></slot>
+      </div>
+
+      <div class="label-container">
+        ${t ? a`<span class="label">${t}</span>` : s}
+        <slot></slot>
+      </div>
+
+      <div class="end">
+        ${this.badge ? a`<span class="badge">${this.badge}</span>` : s}
+        <slot name="badge"></slot>
+      </div>
+    `;
+    return this.href ? a`
+        <a
+          class="item"
+          href=${this.disabled ? s : this.href}
+          target=${this.target || s}
+          aria-disabled=${this.disabled ? "true" : s}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleClick}
+        >
+          ${n}
+        </a>
+      ` : a`
+      <div
+        class="item"
+        role="button"
+        tabindex=${this.disabled ? "-1" : "0"}
+        aria-disabled=${this.disabled ? "true" : s}
+        @click=${this.handleClick}
+      >
+        ${n}
+      </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`
+      <div class="scrim" @click=${this.handleScrimClick}></div>
+
+      <aside
+        class="drawer"
+        role="navigation"
+        aria-hidden=${this.open ? "false" : "true"}
+        aria-label=${this.headline || "Navigation menu"}
+      >
+        <div class="header">
+          <slot name="header">
+            ${t}
+          </slot>
+        </div>
+
+        <div class="content">
+          <slot></slot>
+        </div>
+
+        <div class="footer">
+          <slot name="footer"></slot>
+        </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

package/dist/chunks/navigation-drawer-CKl44Ef5.js.map

@@ -0,0 +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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"}