@francofantomius/material-components 1.0.1 → 1.1.0

package/dist/chunks/loading-indicator-CvWnZr9o.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-indicator-CvWnZr9o.js","names":[],"sources":["../../src/components/loading-indicator/loading-indicator.css.ts","../../src/components/loading-indicator/loading-indicator.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const loadingIndicatorStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    box-sizing: border-box;\n    --md-loading-indicator-color: var(--md-sys-color-primary, #6750A4);\n    --md-loading-indicator-container-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n    --md-loading-indicator-container-shape: var(--md-sys-shape-corner-medium, 16px);\n  }\n\n  :host([size=\"small\"]) {\n    --_size: var(--md-loading-indicator-size, 36px);\n    --_shape-size: var(--md-loading-indicator-shape-size, 18px);\n  }\n\n  :host(:not([size])),\n  :host([size=\"medium\"]) {\n    --_size: var(--md-loading-indicator-size, 48px);\n    --_shape-size: var(--md-loading-indicator-shape-size, 24px);\n  }\n\n  :host([size=\"large\"]) {\n    --_size: var(--md-loading-indicator-size, 64px);\n    --_shape-size: var(--md-loading-indicator-shape-size, 32px);\n  }\n\n  :host(:not([contained])) {\n    width: var(--_shape-size);\n    height: var(--_shape-size);\n  }\n\n  :host([contained]) {\n    width: var(--_size);\n    height: var(--_size);\n    background-color: var(--md-loading-indicator-container-color);\n    border-radius: var(--md-loading-indicator-container-shape);\n  }\n\n  :host([hidden]),\n  :host([active=\"false\"]) {\n    display: none;\n  }\n\n  .container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    position: relative;\n  }\n\n  .shape {\n    width: var(--_shape-size);\n    height: var(--_shape-size);\n    background-color: var(--md-loading-indicator-color);\n    transform-origin: center center;\n    will-change: transform, border-radius;\n  }\n\n  /* Morphing shape animation */\n  :host([shape=\"morph\"]:not([paused])) .shape,\n  :host(:not([shape]):not([paused])) .shape {\n    animation: md-loading-morph 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n\n  :host([shape=\"square\"]:not([paused])) .shape {\n    border-radius: 4px;\n    animation: md-loading-spin 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n\n  :host([shape=\"circle\"]:not([paused])) .shape {\n    border-radius: 50%;\n    animation: md-loading-pulse 1.4s ease-in-out infinite alternate;\n  }\n\n  :host([shape=\"clover\"]:not([paused])) .shape,\n  :host([shape=\"star\"]:not([paused])) .shape {\n    border-radius: 50% 15% 50% 15%;\n    animation: md-loading-spin 2s linear infinite;\n  }\n\n  :host([paused]) .shape {\n    animation-play-state: paused;\n  }\n\n  @keyframes md-loading-morph {\n    0% {\n      border-radius: 50%;\n      transform: rotate(0deg) scale(1);\n    }\n    20% {\n      border-radius: 12%;\n      transform: rotate(90deg) scale(0.85);\n    }\n    40% {\n      border-radius: 50% 15% 50% 15%;\n      transform: rotate(180deg) scale(1.05);\n    }\n    60% {\n      border-radius: 15% 50% 15% 50%;\n      transform: rotate(270deg) scale(0.85);\n    }\n    80% {\n      border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;\n      transform: rotate(315deg) scale(0.95);\n    }\n    100% {\n      border-radius: 50%;\n      transform: rotate(360deg) scale(1);\n    }\n  }\n\n  @keyframes md-loading-spin {\n    0% {\n      transform: rotate(0deg) scale(0.9);\n    }\n    50% {\n      transform: rotate(180deg) scale(1.05);\n    }\n    100% {\n      transform: rotate(360deg) scale(0.9);\n    }\n  }\n\n  @keyframes md-loading-pulse {\n    0% {\n      transform: scale(0.75);\n      opacity: 0.7;\n    }\n    100% {\n      transform: scale(1.05);\n      opacity: 1;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .shape {\n      animation: none !important;\n    }\n  }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { loadingIndicatorStyles } from './loading-indicator.css.js';\n\nexport type LoadingIndicatorSize = 'small' | 'medium' | 'large';\nexport type LoadingIndicatorShape = 'morph' | 'square' | 'circle' | 'clover' | 'star';\n\n/**\n * Material Design 3 Expressive Loading Indicator Component.\n * \n * Contained or uncontained loading indicator with animated morphing shape for short wait times.\n *\n * @element md-loading-indicator\n */\n@customElement('md-loading-indicator')\nexport class MdLoadingIndicator extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, loadingIndicatorStyles];\n\n  /**\n   * Visual size of the loading indicator.\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  size: LoadingIndicatorSize = 'medium';\n\n  /**\n   * Whether the loading indicator is enclosed in a contained surface container.\n   * @attr contained\n   */\n  @property({ type: Boolean, reflect: true })\n  contained = false;\n\n  /**\n   * The shape animation style.\n   * @attr shape\n   */\n  @property({ type: String, reflect: true })\n  shape: LoadingIndicatorShape = 'morph';\n\n  /**\n   * Whether the animation is paused.\n   * @attr paused\n   */\n  @property({ type: Boolean, reflect: true })\n  paused = false;\n\n  /**\n   * Accessible label for the loading indicator.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Loading';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'status');\n    }\n    if (!this.hasAttribute('aria-live')) {\n      this.setAttribute('aria-live', 'polite');\n    }\n    this.updateAriaLabel();\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('label')) {\n      this.updateAriaLabel();\n    }\n  }\n\n  private updateAriaLabel() {\n    if (this.label && !this.getAttribute('aria-label')) {\n      this.setAttribute('aria-label', this.label);\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        <div class=\"shape\" part=\"shape\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-loading-indicator': MdLoadingIndicator;\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,GCczB,IAAN,cAAiC,EAAc;AAAA;iBAQvB,KAAA,OAAA,UAOjB,KAAA,YAAA,IAOmB,KAAA,QAAA,SAOtB,KAAA,SAAA,IAOD,KAAA,QAAA;AAAA;;AAnCiB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAsB;AAAA;EAqCtE,oBAA6B;AAC3B,UAAM,kBAAkB,GACnB,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,QAAQ,GAE/B,KAAK,aAAa,WAAW,KAChC,KAAK,aAAa,aAAa,QAAQ,GAEzC,KAAK,gBAAgB;AAAA,EACvB;AAAA,EAEA,QAAiB,GAAyC;AACxD,UAAM,QAAQ,CAAiB,GAC3B,EAAkB,IAAI,OAAO,KAC/B,KAAK,gBAAgB;AAAA,EAEzB;AAAA,EAEA,kBAA0B;AACxB,IAAI,KAAK,SAAS,CAAC,KAAK,aAAa,YAAY,KAC/C,KAAK,aAAa,cAAc,KAAK,KAAK;AAAA,EAE9C;AAAA,EAEA,SAAkB;AAChB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AA9DG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAOxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,MAAA;AAOzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAOxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,MAAA;AAOzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AApC3B,IAAA,EAAA,CAAA,EAAc,sBAAsB,CAAA,GAAA,CAAA"}

package/dist/chunks/menu-item-BBSp5Cqc.js

@@ -0,0 +1,390 @@
+import { n as l, t } from "./decorate-DXuynaiA.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import "./icon-DrNqcNEL.js";
+import { css as c, html as n, nothing as s } from "lit";
+import { customElement as d, property as i, query as p } from "lit/decorators.js";
+var b = c`
+  :host {
+    display: inline-block;
+    position: relative;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    box-sizing: border-box;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .trigger-wrapper {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 998;
+    background-color: transparent;
+  }
+
+  :host([open]) .backdrop {
+    display: block;
+  }
+
+  .menu-surface {
+    display: none;
+    position: absolute;
+    z-index: 999;
+    min-width: var(--md-menu-min-width, 112px);
+    max-width: var(--md-menu-max-width, 280px);
+    max-height: var(--md-menu-max-height, calc(100vh - 32px));
+    box-sizing: border-box;
+    padding: 8px 0;
+    margin: 0;
+    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
+    background-color: var(--md-sys-color-surface-container, #F3EDF7);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30));
+    overflow-y: auto;
+    overflow-x: hidden;
+    overscroll-behavior: contain;
+    outline: none;
+    user-select: none;
+    -webkit-overflow-scrolling: touch;
+    transform-origin: top left;
+  }
+
+  :host([open]) .menu-surface {
+    display: flex;
+    flex-direction: column;
+    animation: md-menu-fade-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;
+  }
+
+  :host([quick]) .menu-surface {
+    animation: none;
+  }
+
+  :host([placement^='top']) .menu-surface {
+    transform-origin: bottom left;
+  }
+
+  :host([placement$='end']) .menu-surface,
+  :host([alignment='end']) .menu-surface {
+    transform-origin: top right;
+  }
+
+  :host([placement='top-end']) .menu-surface {
+    transform-origin: bottom right;
+  }
+
+  @keyframes md-menu-fade-in {
+    from {
+      opacity: 0;
+      transform: scale(0.92, 0.8);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1, 1);
+    }
+  }
+
+  /* Fixed positioning when anchored to external elements */
+  :host([positioning='fixed']) .menu-surface,
+  .menu-surface.is-fixed {
+    position: fixed;
+  }
+
+  /* Scrollbar styles */
+  .menu-surface::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .menu-surface::-webkit-scrollbar-thumb {
+    background-color: var(--md-sys-color-outline-variant, #CAC4D0);
+    border-radius: 3px;
+  }
+`, h = c`
+  :host {
+    display: flex;
+    outline: none;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 48px;
+    padding: 0 12px;
+    box-sizing: border-box;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-label-large-size, 14px);
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    background: transparent;
+    border: none;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    overflow: hidden;
+    gap: 12px;
+    transition: background-color 150ms ease, color 150ms ease;
+    outline: none;
+  }
+
+  :host([dense]) .item {
+    min-height: 36px;
+    font-size: 13px;
+    padding: 0 8px;
+    gap: 8px;
+  }
+
+  .item:hover {
+    background-color: var(--md-sys-color-surface-container-highest, rgba(29, 27, 32, 0.08));
+  }
+
+  :host([selected]) .item,
+  :host([active]) .item {
+    background-color: var(--md-sys-color-secondary-container, #E8DEF8);
+    color: var(--md-sys-color-on-secondary-container, #1D192B);
+    font-weight: 500;
+  }
+
+  :host(:focus-visible) .item,
+  .item:focus-visible {
+    background-color: var(--md-sys-color-surface-container-highest, rgba(29, 27, 32, 0.12));
+  }
+
+  .start {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    font-size: 24px;
+    --md-icon-size: 24px;
+    flex-shrink: 0;
+    min-width: 24px;
+  }
+
+  :host([dense]) .start {
+    font-size: 20px;
+    --md-icon-size: 20px;
+    min-width: 20px;
+  }
+
+  :host([selected]) .start,
+  :host([active]) .start {
+    color: var(--md-sys-color-on-secondary-container, #1D192B);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    justify-content: center;
+  }
+
+  .headline {
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+    color: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .supporting-text {
+    font-size: var(--md-sys-typescale-body-small-size, 12px);
+    line-height: 16px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :host([selected]) .supporting-text,
+  :host([active]) .supporting-text {
+    color: var(--md-sys-color-on-secondary-container, #1D192B);
+  }
+
+  .headline:empty,
+  .supporting-text:empty,
+  .trailing-supporting-text:empty {
+    display: none;
+  }
+
+  .end {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    font-size: var(--md-sys-typescale-label-small-size, 11px);
+    flex-shrink: 0;
+    gap: 8px;
+    margin-left: auto;
+  }
+
+  .trailing-supporting-text {
+    font-size: 11px;
+    letter-spacing: 0.5px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+  }
+
+  :host([selected]) .end,
+  :host([selected]) .trailing-supporting-text,
+  :host([active]) .end,
+  :host([active]) .trailing-supporting-text {
+    color: var(--md-sys-color-on-secondary-container, #1D192B);
+  }
+
+  .trailing-icon {
+    font-size: 20px;
+    --md-icon-size: 20px;
+  }
+
+  .check-icon {
+    font-size: 20px;
+    --md-icon-size: 20px;
+    color: var(--md-sys-color-primary, #6750A4);
+  }
+`, e = class extends l {
+  constructor(...r) {
+    super(...r), this.disabled = !1, this.selected = !1, this.headline = "", this.supportingText = "", this.trailingSupportingText = "", this.icon = "", this.trailingIcon = "", this.href = "", this.target = "", this.value = "", this.keepOpen = !1, this.dense = !1, this.handleClick = (o) => {
+      if (this.disabled) {
+        o.preventDefault(), o.stopImmediatePropagation();
+        return;
+      }
+      const a = {
+        item: this,
+        value: this.value,
+        keepOpen: this.keepOpen
+      };
+      this.emitEvent("item-click", a), this.emitEvent("menu-item-click", a), this.emitEvent("select", a);
+    }, this.handleKeyDown = (o) => {
+      this.disabled || (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this.itemElement?.click());
+    };
+  }
+  static {
+    this.styles = [l.styles, h];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "menuitem");
+  }
+  focus(r) {
+    this.itemElement ? this.itemElement.focus(r) : super.focus(r);
+  }
+  render() {
+    this.icon, this.trailingIcon || this.trailingSupportingText || this.selected;
+    const r = this.icon ? n`<md-icon name=${this.icon}></md-icon>` : s, o = this.selected ? n`<md-icon name="check" class="check-icon"></md-icon>` : this.trailingIcon ? n`<md-icon name=${this.trailingIcon} class="trailing-icon"></md-icon>` : s, a = n`
+      <md-ripple ?disabled=${this.disabled}></md-ripple>
+      <md-focus-ring></md-focus-ring>
+
+      <div class="start">
+        <slot name="start">
+          <slot name="icon">${r}</slot>
+        </slot>
+      </div>
+
+      <div class="content">
+        <span class="headline">
+          <slot>${this.headline}</slot>
+        </span>
+        ${this.supportingText ? n`<span class="supporting-text">${this.supportingText}</span>` : s}
+      </div>
+
+      <div class="end">
+        ${this.trailingSupportingText ? n`<span class="trailing-supporting-text">${this.trailingSupportingText}</span>` : s}
+        <slot name="end">
+          <slot name="trailing">${o}</slot>
+        </slot>
+      </div>
+    `;
+    return this.href ? n`
+        <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}
+          @keydown=${this.handleKeyDown}
+        >
+          ${a}
+        </a>
+      ` : n`
+      <button
+        type="button"
+        class="item"
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled ? "true" : s}
+        tabindex=${this.disabled ? "-1" : "0"}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        ${a}
+      </button>
+    `;
+  }
+};
+t([i({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "disabled", void 0);
+t([i({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "selected", void 0);
+t([i({ type: String })], e.prototype, "headline", void 0);
+t([i({
+  type: String,
+  attribute: "supporting-text"
+})], e.prototype, "supportingText", void 0);
+t([i({
+  type: String,
+  attribute: "trailing-supporting-text"
+})], e.prototype, "trailingSupportingText", void 0);
+t([i({ type: String })], e.prototype, "icon", void 0);
+t([i({
+  type: String,
+  attribute: "trailing-icon"
+})], e.prototype, "trailingIcon", void 0);
+t([i({ type: String })], e.prototype, "href", void 0);
+t([i({ type: String })], e.prototype, "target", void 0);
+t([i({ type: String })], e.prototype, "value", void 0);
+t([i({
+  type: Boolean,
+  attribute: "keep-open"
+})], e.prototype, "keepOpen", void 0);
+t([i({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "dense", void 0);
+t([p(".item")], e.prototype, "itemElement", void 0);
+e = t([d("md-menu-item")], e);
+export {
+  b as n,
+  e as t
+};
+
+//# sourceMappingURL=menu-item-BBSp5Cqc.js.map

package/dist/chunks/menu-item-BBSp5Cqc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-BBSp5Cqc.js","names":[],"sources":["../../src/components/menu/menu.css.ts","../../src/components/menu/menu-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const menuStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .trigger-wrapper {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .backdrop {\n    display: none;\n    position: fixed;\n    inset: 0;\n    z-index: 998;\n    background-color: transparent;\n  }\n\n  :host([open]) .backdrop {\n    display: block;\n  }\n\n  .menu-surface {\n    display: none;\n    position: absolute;\n    z-index: 999;\n    min-width: var(--md-menu-min-width, 112px);\n    max-width: var(--md-menu-max-width, 280px);\n    max-height: var(--md-menu-max-height, calc(100vh - 32px));\n    box-sizing: border-box;\n    padding: 8px 0;\n    margin: 0;\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n    background-color: var(--md-sys-color-surface-container, #F3EDF7);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30));\n    overflow-y: auto;\n    overflow-x: hidden;\n    overscroll-behavior: contain;\n    outline: none;\n    user-select: none;\n    -webkit-overflow-scrolling: touch;\n    transform-origin: top left;\n  }\n\n  :host([open]) .menu-surface {\n    display: flex;\n    flex-direction: column;\n    animation: md-menu-fade-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;\n  }\n\n  :host([quick]) .menu-surface {\n    animation: none;\n  }\n\n  :host([placement^='top']) .menu-surface {\n    transform-origin: bottom left;\n  }\n\n  :host([placement$='end']) .menu-surface,\n  :host([alignment='end']) .menu-surface {\n    transform-origin: top right;\n  }\n\n  :host([placement='top-end']) .menu-surface {\n    transform-origin: bottom right;\n  }\n\n  @keyframes md-menu-fade-in {\n    from {\n      opacity: 0;\n      transform: scale(0.92, 0.8);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1, 1);\n    }\n  }\n\n  /* Fixed positioning when anchored to external elements */\n  :host([positioning='fixed']) .menu-surface,\n  .menu-surface.is-fixed {\n    position: fixed;\n  }\n\n  /* Scrollbar styles */\n  .menu-surface::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .menu-surface::-webkit-scrollbar-thumb {\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: 3px;\n  }\n`;\n\nexport const menuItemStyles = css`\n  :host {\n    display: flex;\n    outline: none;\n    box-sizing: border-box;\n    width: 100%;\n    max-width: 100%;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n    cursor: not-allowed;\n  }\n\n  .item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-height: 48px;\n    padding: 0 12px;\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    background: transparent;\n    border: none;\n    text-align: left;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    overflow: hidden;\n    gap: 12px;\n    transition: background-color 150ms ease, color 150ms ease;\n    outline: none;\n  }\n\n  :host([dense]) .item {\n    min-height: 36px;\n    font-size: 13px;\n    padding: 0 8px;\n    gap: 8px;\n  }\n\n  .item:hover {\n    background-color: var(--md-sys-color-surface-container-highest, rgba(29, 27, 32, 0.08));\n  }\n\n  :host([selected]) .item,\n  :host([active]) .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(:focus-visible) .item,\n  .item:focus-visible {\n    background-color: var(--md-sys-color-surface-container-highest, rgba(29, 27, 32, 0.12));\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    font-size: 24px;\n    --md-icon-size: 24px;\n    flex-shrink: 0;\n    min-width: 24px;\n  }\n\n  :host([dense]) .start {\n    font-size: 20px;\n    --md-icon-size: 20px;\n    min-width: 20px;\n  }\n\n  :host([selected]) .start,\n  :host([active]) .start {\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n  }\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    justify-content: center;\n  }\n\n  .headline {\n    font-size: inherit;\n    line-height: inherit;\n    font-weight: inherit;\n    color: inherit;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .supporting-text {\n    font-size: var(--md-sys-typescale-body-small-size, 12px);\n    line-height: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  :host([selected]) .supporting-text,\n  :host([active]) .supporting-text {\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n  }\n\n  .headline:empty,\n  .supporting-text:empty,\n  .trailing-supporting-text:empty {\n    display: none;\n  }\n\n  .end {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    font-size: var(--md-sys-typescale-label-small-size, 11px);\n    flex-shrink: 0;\n    gap: 8px;\n    margin-left: auto;\n  }\n\n  .trailing-supporting-text {\n    font-size: 11px;\n    letter-spacing: 0.5px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  :host([selected]) .end,\n  :host([selected]) .trailing-supporting-text,\n  :host([active]) .end,\n  :host([active]) .trailing-supporting-text {\n    color: var(--md-sys-color-on-secondary-container, #1D192B);\n  }\n\n  .trailing-icon {\n    font-size: 20px;\n    --md-icon-size: 20px;\n  }\n\n  .check-icon {\n    font-size: 20px;\n    --md-icon-size: 20px;\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } 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 { menuItemStyles } from './menu.css.js';\n\n/**\n * Material Design 3 Menu Item component.\n * Represents an individual choice or action inside an `md-menu`.\n *\n * @element md-menu-item\n *\n * @slot start / icon - Leading icon or custom graphic.\n * @slot - Default slot for item headline / label text.\n * @slot end / trailing - Trailing content, shortcut text, or checkmark.\n *\n * @fires item-click - Dispatched when the menu item is clicked or activated.\n * @fires select - Dispatched when the menu item is selected.\n */\n@customElement('md-menu-item')\nexport class MdMenuItem extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, menuItemStyles];\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String, attribute: 'supporting-text' })\n  supportingText = '';\n\n  @property({ type: String, attribute: 'trailing-supporting-text' })\n  trailingSupportingText = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: Boolean, attribute: 'keep-open' })\n  keepOpen = false;\n\n  @property({ type: Boolean, reflect: true })\n  dense = false;\n\n  @query('.item')\n  private itemElement!: HTMLElement;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'menuitem');\n    }\n  }\n\n  override focus(options?: FocusOptions): void {\n    if (this.itemElement) {\n      this.itemElement.focus(options);\n    } else {\n      super.focus(options);\n    }\n  }\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    const detail = {\n      item: this,\n      value: this.value,\n      keepOpen: this.keepOpen,\n    };\n\n    this.emitEvent('item-click', detail);\n    this.emitEvent('menu-item-click', detail);\n    this.emitEvent('select', detail);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.itemElement?.click();\n    }\n  };\n\n  override render() {\n    const hasLeading = Boolean(this.icon);\n    const hasTrailing = Boolean(this.trailingIcon || this.trailingSupportingText || this.selected);\n\n    const leadingContent = this.icon\n      ? html`<md-icon name=${this.icon}></md-icon>`\n      : nothing;\n\n    const trailingContent = this.selected\n      ? html`<md-icon name=\"check\" class=\"check-icon\"></md-icon>`\n      : this.trailingIcon\n        ? html`<md-icon name=${this.trailingIcon} class=\"trailing-icon\"></md-icon>`\n        : nothing;\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        <slot name=\"start\">\n          <slot name=\"icon\">${leadingContent}</slot>\n        </slot>\n      </div>\n\n      <div class=\"content\">\n        <span class=\"headline\">\n          <slot>${this.headline}</slot>\n        </span>\n        ${this.supportingText ? html`<span class=\"supporting-text\">${this.supportingText}</span>` : nothing}\n      </div>\n\n      <div class=\"end\">\n        ${this.trailingSupportingText\n          ? html`<span class=\"trailing-supporting-text\">${this.trailingSupportingText}</span>`\n          : nothing}\n        <slot name=\"end\">\n          <slot name=\"trailing\">${trailingContent}</slot>\n        </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          @keydown=${this.handleKeyDown}\n        >\n          ${inner}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        type=\"button\"\n        class=\"item\"\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        ${inner}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu-item': MdMenuItem;\n  }\n}\n"],"mappings":";;;;;;AAEA,IAAa,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuGb,IAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}