@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/{menu-item-BBSp5Cqc.js.map → menu-item-C3entPo7.js.map}

@@ -1 +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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"}
+{"version":3,"file":"menu-item-C3entPo7.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":"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"}

package/dist/chunks/{navigation-bar-item-C9DfOEzg.js → navigation-bar-item-CWHCQeNw.js}

@@ -1,10 +1,11 @@
-import { n as r, t as i } from "./decorate-DXuynaiA.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import "./icon-DrNqcNEL.js";
-import { css as c, html as o, nothing as s } from "lit";
-import { customElement as d, property as a, queryAssignedElements as h } from "lit/decorators.js";
-var x = 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, queryAssignedElements as s } from "lit/decorators.js";
+//#region src/components/navigation-bar/navigation-bar.css.ts
+var c = n`
   :host {
     display: flex;
     flex-direction: row;
@@ -41,7 +42,7 @@ var x = c`
   :host([label-mode="none"]) ::slotted(md-navigation-bar-item) {
     --md-navigation-bar-label-display: none;
   }
-`, b = c`
+`, l = n`
   :host {
     display: flex;
     flex: 1 1 0px;
@@ -243,71 +244,71 @@ var x = c`
   md-focus-ring {
     --md-focus-ring-shape: var(--md-navigation-bar-indicator-shape, 16px);
   }
-`, t = class extends r {
-  constructor(...e) {
-    super(...e), this.active = !1, this.selected = !1, this.disabled = !1, this.icon = "", this.activeIcon = "", this.label = "", this.badge = "", this.value = "", this.href = "", this.target = "", this.labelMode = "alwaysShow", this.hideInactiveLabels = !1, this.handleClick = (n) => {
-      if (this.disabled) {
-        n.preventDefault(), n.stopImmediatePropagation();
-        return;
-      }
-      this.emitEvent("item-click", {
-        item: this,
-        value: this.value || this.label,
-        label: this.label,
-        active: this.active
-      });
-    };
-  }
-  static {
-    this.styles = [r.styles, b];
-  }
-  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));
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "tab"), this.updateAriaAttributes();
-  }
-  updated(e) {
-    super.updated(e), (e.has("active") || e.has("selected") || e.has("disabled")) && this.updateAriaAttributes();
-  }
-  updateAriaAttributes() {
-    const e = this.active || this.selected;
-    this.setAttribute("aria-selected", e ? "true" : "false"), this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
-  }
-  renderBadge() {
-    if (this.assignedBadges && this.assignedBadges.length > 0) return o`<span class="badge-slot"><slot name="badge"></slot></span>`;
-    if (this.badge === "" || this.badge === null || this.badge === void 0) return o`<slot name="badge"></slot>`;
-    const e = this.badge === "dot" || this.badge === "true" || this.badge === "", n = e ? "" : this.badge;
-    return o`
+`, u = class extends e {
+	constructor(...e) {
+		super(...e), this.active = !1, this.selected = !1, this.disabled = !1, this.icon = "", this.activeIcon = "", this.label = "", this.badge = "", this.value = "", this.href = "", this.target = "", this.labelMode = "alwaysShow", this.hideInactiveLabels = !1, this.handleClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault(), e.stopImmediatePropagation();
+				return;
+			}
+			this.emitEvent("item-click", {
+				item: this,
+				value: this.value || this.label,
+				label: this.label,
+				active: this.active
+			});
+		};
+	}
+	static {
+		this.styles = [e.styles, l];
+	}
+	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));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "tab"), this.updateAriaAttributes();
+	}
+	updated(e) {
+		super.updated(e), (e.has("active") || e.has("selected") || e.has("disabled")) && this.updateAriaAttributes();
+	}
+	updateAriaAttributes() {
+		let e = this.active || this.selected;
+		this.setAttribute("aria-selected", e ? "true" : "false"), this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
+	}
+	renderBadge() {
+		if (this.assignedBadges && this.assignedBadges.length > 0) return r`<span class="badge-slot"><slot name="badge"></slot></span>`;
+		if (this.badge === "" || this.badge === null || this.badge === void 0) return r`<slot name="badge"></slot>`;
+		let e = this.badge === "dot" || this.badge === "true" || this.badge === "", t = e ? "" : this.badge;
+		return r`
       <span class="badge ${e ? "dot" : ""}">
-        ${n}
+        ${t}
       </span>
       <slot name="badge"></slot>
     `;
-  }
-  renderIcon() {
-    const e = this.assignedActiveIcons && this.assignedActiveIcons.length > 0;
-    return this.activeIcon || e ? o`
+	}
+	renderIcon() {
+		let e = this.assignedActiveIcons && this.assignedActiveIcons.length > 0;
+		return this.activeIcon || e ? r`
         <span class="icon inactive-icon">
           <slot name="icon">
-            ${this.icon ? o`<md-icon name=${this.icon}></md-icon>` : s}
+            ${this.icon ? r`<md-icon name=${this.icon}></md-icon>` : i}
           </slot>
         </span>
         <span class="icon active-icon">
           <slot name="active-icon">
-            ${this.activeIcon ? o`<md-icon name=${this.activeIcon}></md-icon>` : s}
+            ${this.activeIcon ? r`<md-icon name=${this.activeIcon}></md-icon>` : i}
           </slot>
         </span>
-      ` : o`
+      ` : r`
       <span class="icon">
         <slot name="icon">
-          ${this.icon ? o`<md-icon name=${this.icon}></md-icon>` : s}
+          ${this.icon ? r`<md-icon name=${this.icon}></md-icon>` : i}
         </slot>
       </span>
     `;
-  }
-  render() {
-    const e = this.active || this.selected, n = o`
+	}
+	render() {
+		let e = this.active || this.selected, t = r`
       <div class="icon-wrapper">
         <div class="indicator"></div>
         <md-ripple ?disabled=${this.disabled}></md-ripple>
@@ -322,76 +323,58 @@ var x = c`
         </span>
       </div>
     `;
-    return this.href ? o`
+		return this.href ? r`
         <a
           class="item"
-          href=${this.disabled ? s : this.href}
-          target=${this.target || s}
+          href=${this.disabled ? i : this.href}
+          target=${this.target || i}
           aria-selected=${e ? "true" : "false"}
-          tabindex=${this.disabled ? "-1" : s}
+          tabindex=${this.disabled ? "-1" : i}
           @click=${this.handleClick}
         >
-          ${n}
+          ${t}
         </a>
-      ` : o`
+      ` : r`
       <div
         class="item"
-        tabindex=${this.disabled ? "-1" : s}
+        tabindex=${this.disabled ? "-1" : i}
         @click=${this.handleClick}
       >
-        ${n}
+        ${t}
       </div>
     `;
-  }
-};
-i([a({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "active", void 0);
-i([a({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "selected", void 0);
-i([a({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "disabled", void 0);
-i([a({ type: String })], t.prototype, "icon", void 0);
-i([a({
-  type: String,
-  attribute: "active-icon"
-})], t.prototype, "activeIcon", void 0);
-i([a({ type: String })], t.prototype, "label", void 0);
-i([a({
-  type: String,
-  reflect: !0
-})], t.prototype, "badge", void 0);
-i([a({
-  type: String,
-  reflect: !0
-})], t.prototype, "value", void 0);
-i([a({ type: String })], t.prototype, "href", void 0);
-i([a({ type: String })], t.prototype, "target", void 0);
-i([a({
-  type: String,
-  reflect: !0,
-  attribute: "label-mode"
-})], t.prototype, "labelMode", void 0);
-i([a({
-  type: Boolean,
-  reflect: !0,
-  attribute: "hide-inactive-labels"
-})], t.prototype, "hideInactiveLabels", void 0);
-i([h({ slot: "active-icon" })], t.prototype, "assignedActiveIcons", void 0);
-i([h({ slot: "badge" })], t.prototype, "assignedBadges", void 0);
-t = i([d("md-navigation-bar-item")], t);
-var l = class extends t {
-};
-l = i([d("md-nav-bar-item")], l);
-export {
-  t as n,
-  x as r,
-  l as t
+	}
 };
+t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "active", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "selected", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), t([o({ type: String })], u.prototype, "icon", void 0), t([o({
+	type: String,
+	attribute: "active-icon"
+})], u.prototype, "activeIcon", void 0), t([o({ type: String })], u.prototype, "label", void 0), t([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "badge", void 0), t([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "value", void 0), t([o({ type: String })], u.prototype, "href", void 0), t([o({ type: String })], u.prototype, "target", void 0), t([o({
+	type: String,
+	reflect: !0,
+	attribute: "label-mode"
+})], u.prototype, "labelMode", void 0), t([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-inactive-labels"
+})], u.prototype, "hideInactiveLabels", void 0), t([s({ slot: "active-icon" })], u.prototype, "assignedActiveIcons", void 0), t([s({ slot: "badge" })], u.prototype, "assignedBadges", void 0), u = t([a("md-navigation-bar-item")], u);
+var d = class extends u {};
+d = t([a("md-nav-bar-item")], d);
+//#endregion
+export { u as n, c as r, d as t };
 
-//# sourceMappingURL=navigation-bar-item-C9DfOEzg.js.map
+//# sourceMappingURL=navigation-bar-item-CWHCQeNw.js.map

package/dist/chunks/{navigation-bar-item-C9DfOEzg.js.map → navigation-bar-item-CWHCQeNw.js.map}

@@ -1 +1 @@
-{"version":3,"file":"navigation-bar-item-C9DfOEzg.js","names":[],"sources":["../../src/components/navigation-bar/navigation-bar.css.ts","../../src/components/navigation-bar/navigation-bar-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const navigationBarStyles = css`\n  :host {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    width: 100%;\n    height: var(--md-navigation-bar-container-height, 80px);\n    min-height: 80px;\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    background-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #F3EDF7));\n    color: var(--md-navigation-bar-container-text-color, var(--md-sys-color-on-surface, #1D1B20));\n    box-shadow: var(--md-navigation-bar-elevation, none);\n    align-items: center;\n    justify-content: space-evenly;\n    user-select: none;\n    overflow: hidden;\n    z-index: 1;\n  }\n\n  .nav-bar-container {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-around;\n    width: 100%;\n    height: 100%;\n    max-width: var(--md-navigation-bar-max-width, 100%);\n    margin: 0 auto;\n    box-sizing: border-box;\n  }\n\n  /* When hidden label mode is applied to bar */\n  :host([label-mode=\"hidden\"]) ::slotted(md-navigation-bar-item),\n  :host([label-mode=\"none\"]) ::slotted(md-navigation-bar-item) {\n    --md-navigation-bar-label-display: none;\n  }\n`;\n\nexport const navigationBarItemStyles = css`\n  :host {\n    display: flex;\n    flex: 1 1 0px;\n    min-width: 48px;\n    max-width: 168px;\n    height: 100%;\n    box-sizing: border-box;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    outline: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    color: var(--md-navigation-bar-item-icon-color, var(--md-sys-color-on-surface-variant, #49454F));\n    font-family: var(--md-sys-typescale-font-family, inherit);\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n    cursor: default;\n  }\n\n  .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    padding: 12px 0 16px 0;\n    box-sizing: border-box;\n    text-decoration: none;\n    color: inherit;\n    position: relative;\n    outline: none;\n    gap: 4px;\n  }\n\n  /* Active Indicator Pill */\n  .icon-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--md-navigation-bar-indicator-width, 64px);\n    height: var(--md-navigation-bar-indicator-height, 32px);\n    border-radius: var(--md-navigation-bar-indicator-shape, 16px);\n    position: relative;\n    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .indicator {\n    position: absolute;\n    inset: 0;\n    border-radius: var(--md-navigation-bar-indicator-shape, 16px);\n    background-color: var(--md-navigation-bar-indicator-color, var(--md-sys-color-secondary-container, #E8DEF8));\n    opacity: 0;\n    transform: scaleX(0.5);\n    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),\n                opacity 200ms cubic-bezier(0.2, 0, 0, 1);\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  :host([active]) .indicator,\n  :host([selected]) .indicator {\n    opacity: 1;\n    transform: scaleX(1);\n  }\n\n  .icon {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    font-size: 24px;\n    z-index: 1;\n    color: var(--md-navigation-bar-item-icon-color, var(--md-sys-color-on-surface-variant, #49454F));\n    transition: color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([active]) .icon,\n  :host([selected]) .icon {\n    color: var(--md-navigation-bar-item-active-icon-color, var(--md-sys-color-on-secondary-container, #1D192B));\n  }\n\n  .active-icon {\n    display: none;\n  }\n\n  :host([active]) .inactive-icon,\n  :host([selected]) .inactive-icon {\n    display: none;\n  }\n\n  :host([active]) .active-icon,\n  :host([selected]) .active-icon {\n    display: inline-flex;\n  }\n\n  /* Badge */\n  .badge-slot {\n    position: absolute;\n    top: 2px;\n    right: calc(50% - 24px);\n    z-index: 2;\n    pointer-events: none;\n  }\n\n  .badge {\n    position: absolute;\n    top: 2px;\n    right: calc(50% - 24px);\n    z-index: 2;\n    pointer-events: none;\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--md-sys-color-error, #B3261E);\n    color: var(--md-sys-color-on-error, #FFFFFF);\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: 11px;\n    font-weight: 600;\n    line-height: 16px;\n    letter-spacing: 0.2px;\n    border-radius: 8px;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 4px;\n  }\n\n  .badge.dot {\n    min-width: 6px;\n    width: 6px;\n    height: 6px;\n    padding: 0;\n    border-radius: 50%;\n    top: 4px;\n    right: calc(50% - 16px);\n  }\n\n  /* Label */\n  .label-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    max-width: 100%;\n    padding: 0 4px;\n    box-sizing: border-box;\n    transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1),\n                transform 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .label {\n    font-size: var(--md-sys-typescale-label-medium-size, 12px);\n    font-weight: 500;\n    line-height: 16px;\n    letter-spacing: 0.5px;\n    text-align: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: var(--md-navigation-bar-item-label-color, var(--md-sys-color-on-surface-variant, #49454F));\n    transition: color 200ms cubic-bezier(0.2, 0, 0, 1),\n                font-weight 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([active]) .label,\n  :host([selected]) .label {\n    color: var(--md-navigation-bar-item-active-label-color, var(--md-sys-color-on-surface, #1D1B20));\n    font-weight: 700;\n  }\n\n  /* Label Mode: hidden */\n  :host([label-mode=\"hidden\"]) .label-container,\n  :host([label-mode=\"none\"]) .label-container {\n    display: none;\n  }\n\n  /* Label Mode: selectedShow (only show label when active/selected) */\n  :host([label-mode=\"selectedShow\"]:not([active]):not([selected])) .label-container,\n  :host([label-mode=\"selected-show\"]:not([active]):not([selected])) .label-container,\n  :host([label-mode=\"selected\"]:not([active]):not([selected])) .label-container,\n  :host([hide-inactive-labels]:not([active]):not([selected])) .label-container {\n    display: none;\n  }\n\n  /* Ripple and focus */\n  md-ripple {\n    border-radius: var(--md-navigation-bar-indicator-shape, 16px);\n  }\n\n  md-focus-ring {\n    --md-focus-ring-shape: var(--md-navigation-bar-indicator-shape, 16px);\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements } 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 { navigationBarItemStyles } from './navigation-bar.css.js';\n\nexport type NavigationBarLabelMode = 'alwaysShow' | 'selectedShow' | 'hidden' | 'always' | 'selected' | 'none';\n\n/**\n * Material Design 3 Navigation Bar Item Component.\n *\n * Represents an individual destination in a navigation bar with an icon,\n * active indicator pill, badge, and label.\n *\n * @slot icon - Leading/inactive icon.\n * @slot active-icon - Custom icon shown when the item is active.\n * @slot badge - Custom badge indicator or element.\n * @slot - Default slot for item label text.\n *\n * @fires item-click - Dispatched when the item is clicked.\n */\n@customElement('md-navigation-bar-item')\nexport class MdNavigationBarItem extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, navigationBarItemStyles];\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  icon = '';\n\n  @property({ type: String, attribute: 'active-icon' })\n  activeIcon = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String, reflect: true })\n  badge = '';\n\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  @property({ type: String, reflect: true, attribute: 'label-mode' })\n  labelMode: NavigationBarLabelMode = 'alwaysShow';\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-inactive-labels' })\n  hideInactiveLabels = false;\n\n  @queryAssignedElements({ slot: 'active-icon' })\n  private assignedActiveIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'badge' })\n  private assignedBadges!: HTMLElement[];\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('active') && !changedProperties.has('selected')) {\n      this.selected = this.active;\n    } else if (changedProperties.has('selected') && !changedProperties.has('active')) {\n      this.active = this.selected;\n    } else if (changedProperties.has('active') && changedProperties.has('selected')) {\n      if (this.active) {\n        this.selected = true;\n      } else if (this.selected) {\n        this.active = true;\n      }\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'tab');\n    this.updateAriaAttributes();\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('active') || changedProperties.has('selected') || changedProperties.has('disabled')) {\n      this.updateAriaAttributes();\n    }\n  }\n\n  private updateAriaAttributes() {\n    const isSelected = this.active || this.selected;\n    this.setAttribute('aria-selected', isSelected ? 'true' : 'false');\n    if (this.disabled) {\n      this.setAttribute('aria-disabled', 'true');\n    } else {\n      this.removeAttribute('aria-disabled');\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    this.emitEvent('item-click', {\n      item: this,\n      value: this.value || this.label,\n      label: this.label,\n      active: this.active,\n    });\n  };\n\n  private renderBadge() {\n    if (this.assignedBadges && this.assignedBadges.length > 0) {\n      return html`<span class=\"badge-slot\"><slot name=\"badge\"></slot></span>`;\n    }\n\n    if (this.badge === '' || this.badge === null || this.badge === undefined) {\n      return html`<slot name=\"badge\"></slot>`;\n    }\n\n    const isDot = this.badge === 'dot' || this.badge === 'true' || this.badge === '';\n    const badgeText = isDot ? '' : this.badge;\n\n    return html`\n      <span class=\"badge ${isDot ? 'dot' : ''}\">\n        ${badgeText}\n      </span>\n      <slot name=\"badge\"></slot>\n    `;\n  }\n\n  private renderIcon() {\n    const hasCustomActiveIconSlot = this.assignedActiveIcons && this.assignedActiveIcons.length > 0;\n    const hasActiveIconProp = Boolean(this.activeIcon);\n\n    if (hasActiveIconProp || hasCustomActiveIconSlot) {\n      return html`\n        <span class=\"icon inactive-icon\">\n          <slot name=\"icon\">\n            ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n          </slot>\n        </span>\n        <span class=\"icon active-icon\">\n          <slot name=\"active-icon\">\n            ${this.activeIcon ? html`<md-icon name=${this.activeIcon}></md-icon>` : nothing}\n          </slot>\n        </span>\n      `;\n    }\n\n    return html`\n      <span class=\"icon\">\n        <slot name=\"icon\">\n          ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n        </slot>\n      </span>\n    `;\n  }\n\n  override render() {\n    const isSelected = this.active || this.selected;\n\n    const content = html`\n      <div class=\"icon-wrapper\">\n        <div class=\"indicator\"></div>\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring></md-focus-ring>\n        ${this.renderIcon()}\n        ${this.renderBadge()}\n      </div>\n\n      <div class=\"label-container\">\n        <span class=\"label\">\n          <slot>${this.label}</slot>\n        </span>\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-selected=${isSelected ? 'true' : 'false'}\n          tabindex=${this.disabled ? '-1' : nothing}\n          @click=${this.handleClick}\n        >\n          ${content}\n        </a>\n      `;\n    }\n\n    return html`\n      <div\n        class=\"item\"\n        tabindex=${this.disabled ? '-1' : nothing}\n        @click=${this.handleClick}\n      >\n        ${content}\n      </div>\n    `;\n  }\n}\n\n// Aliases\n@customElement('md-nav-bar-item')\nexport class MdNavBarItem extends MdNavigationBarItem {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-bar-item': MdNavigationBarItem;\n    'md-nav-bar-item': MdNavBarItem;\n  }\n}\n"],"mappings":";;;;;;AAEA,IAAa,IAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuCtB,IAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCjB1B,IAAN,cAAkC,EAAc;AAAA;iBAI5C,KAAA,SAAA,IAGE,KAAA,WAAA,IAGA,KAAA,WAAA,IAGJ,KAAA,OAAA,IAGM,KAAA,aAAA,IAGL,KAAA,QAAA,IAGA,KAAA,QAAA,IAGA,KAAA,QAAA,IAGD,KAAA,OAAA,IAGE,KAAA,SAAA,IAG2B,KAAA,YAAA,cAGf,KAAA,qBAAA,IA8CE,KAAA,cAAA,CAAA,MAAsB;AAC3C,UAAI,KAAK,UAAU;AACjB,QAAA,EAAM,eAAe,GACrB,EAAM,yBAAyB;AAC/B;AAAA,MACF;AAEA,WAAK,UAAU,cAAc;AAAA,QAC3B,MAAM;AAAA,QACN,OAAO,KAAK,SAAS,KAAK;AAAA,QAC1B,OAAO,KAAK;AAAA,QACZ,QAAQ,KAAK;AAAA,MACf,CAAC;AAAA,IACH;AAAA;;AA/FyB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAuB;AAAA;EA4CvE,WAAoB,GAAyC;AAC3D,UAAM,WAAW,CAAiB,GAC9B,EAAkB,IAAI,QAAQ,KAAK,CAAC,EAAkB,IAAI,UAAU,IACtE,KAAK,WAAW,KAAK,SACZ,EAAkB,IAAI,UAAU,KAAK,CAAC,EAAkB,IAAI,QAAQ,IAC7E,KAAK,SAAS,KAAK,WACV,EAAkB,IAAI,QAAQ,KAAK,EAAkB,IAAI,UAAU,MACxE,KAAK,SACP,KAAK,WAAW,KACP,KAAK,aACd,KAAK,SAAS;AAAA,EAGpB;AAAA,EAEA,oBAA6B;AAC3B,UAAM,kBAAkB,GACxB,KAAK,aAAa,QAAQ,KAAK,GAC/B,KAAK,qBAAqB;AAAA,EAC5B;AAAA,EAEA,QAAiB,GAAyC;AACxD,UAAM,QAAQ,CAAiB,IAC3B,EAAkB,IAAI,QAAQ,KAAK,EAAkB,IAAI,UAAU,KAAK,EAAkB,IAAI,UAAU,MAC1G,KAAK,qBAAqB;AAAA,EAE9B;AAAA,EAEA,uBAA+B;AAC7B,UAAM,IAAa,KAAK,UAAU,KAAK;AACvC,SAAK,aAAa,iBAAiB,IAAa,SAAS,OAAO,GAC5D,KAAK,WACP,KAAK,aAAa,iBAAiB,MAAM,IAEzC,KAAK,gBAAgB,eAAe;AAAA,EAExC;AAAA,EAiBA,cAAsB;AACpB,QAAI,KAAK,kBAAkB,KAAK,eAAe,SAAS,EACtD,QAAO;AAGT,QAAI,KAAK,UAAU,MAAM,KAAK,UAAU,QAAQ,KAAK,UAAU,OAC7D,QAAO;AAGT,UAAM,IAAQ,KAAK,UAAU,SAAS,KAAK,UAAU,UAAU,KAAK,UAAU,IACxE,IAAY,IAAQ,KAAK,KAAK;AAEpC,WAAO;AAAA,2BACgB,IAAQ,QAAQ,EAAA;AAAA,UACjC,CAAA;AAAA;AAAA;AAAA;AAAA,EAIR;AAAA,EAEA,aAAqB;AACnB,UAAM,IAA0B,KAAK,uBAAuB,KAAK,oBAAoB,SAAS;AAG9F,WAFkC,KAAK,cAEd,IAChB;AAAA;AAAA;AAAA,cAGC,KAAK,OAAO,kBAAqB,KAAK,IAAA,gBAAoB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAK1D,KAAK,aAAa,kBAAqB,KAAK,UAAA,gBAA0B,CAAA;AAAA;AAAA;AAAA,UAMzE;AAAA;AAAA;AAAA,YAGC,KAAK,OAAO,kBAAqB,KAAK,IAAA,gBAAoB,CAAA;AAAA;AAAA;AAAA;AAAA,EAIpE;AAAA,EAEA,SAAkB;AAChB,UAAM,IAAa,KAAK,UAAU,KAAK,UAEjC,IAAU;AAAA;AAAA;AAAA,+BAGW,KAAK,QAAA;AAAA;AAAA,UAE1B,KAAK,WAAW,CAAA;AAAA,UAChB,KAAK,YAAY,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKT,KAAK,KAAA;AAAA;AAAA;AAAA;AAKnB,WAAI,KAAK,OACA;AAAA;AAAA;AAAA,iBAGI,KAAK,WAAW,IAAU,KAAK,IAAA;AAAA,mBAC7B,KAAK,UAAU,CAAA;AAAA,0BACR,IAAa,SAAS,OAAA;AAAA,qBAC3B,KAAK,WAAW,OAAO,CAAA;AAAA,mBACzB,KAAK,WAAA;AAAA;AAAA,YAEZ,CAAA;AAAA;AAAA,UAKD;AAAA;AAAA;AAAA,mBAGQ,KAAK,WAAW,OAAO,CAAA;AAAA,iBACzB,KAAK,WAAA;AAAA;AAAA,UAEZ,CAAA;AAAA;AAAA;AAAA,EAGR;AACF;AA3LG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,WAAW;AAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,MAAA;AAGnD,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAGxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAGxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAA,EAAM,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,MAAA;AAGjE,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAA,EAAM,WAAW;AAAuB,CAAC,CAAA,GAAA,EAAA,WAAA,sBAAA,MAAA;AAG5E,EAAA,CAAA,EAAsB,EAAE,MAAM,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,uBAAA,MAAA;AAG7C,EAAA,CAAA,EAAsB,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,MAAA;AA3CzC,IAAA,EAAA,CAAA,EAAc,wBAAwB,CAAA,GAAA,CAAA;AAmMhC,IAAM,IAAN,cAA2B,EAAoB;AAAC;AADtD,IAAA,EAAA,CAAA,EAAc,iBAAiB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"navigation-bar-item-CWHCQeNw.js","names":[],"sources":["../../src/components/navigation-bar/navigation-bar.css.ts","../../src/components/navigation-bar/navigation-bar-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const navigationBarStyles = css`\n  :host {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    width: 100%;\n    height: var(--md-navigation-bar-container-height, 80px);\n    min-height: 80px;\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    background-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #F3EDF7));\n    color: var(--md-navigation-bar-container-text-color, var(--md-sys-color-on-surface, #1D1B20));\n    box-shadow: var(--md-navigation-bar-elevation, none);\n    align-items: center;\n    justify-content: space-evenly;\n    user-select: none;\n    overflow: hidden;\n    z-index: 1;\n  }\n\n  .nav-bar-container {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-around;\n    width: 100%;\n    height: 100%;\n    max-width: var(--md-navigation-bar-max-width, 100%);\n    margin: 0 auto;\n    box-sizing: border-box;\n  }\n\n  /* When hidden label mode is applied to bar */\n  :host([label-mode=\"hidden\"]) ::slotted(md-navigation-bar-item),\n  :host([label-mode=\"none\"]) ::slotted(md-navigation-bar-item) {\n    --md-navigation-bar-label-display: none;\n  }\n`;\n\nexport const navigationBarItemStyles = css`\n  :host {\n    display: flex;\n    flex: 1 1 0px;\n    min-width: 48px;\n    max-width: 168px;\n    height: 100%;\n    box-sizing: border-box;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    outline: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    color: var(--md-navigation-bar-item-icon-color, var(--md-sys-color-on-surface-variant, #49454F));\n    font-family: var(--md-sys-typescale-font-family, inherit);\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n    cursor: default;\n  }\n\n  .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    padding: 12px 0 16px 0;\n    box-sizing: border-box;\n    text-decoration: none;\n    color: inherit;\n    position: relative;\n    outline: none;\n    gap: 4px;\n  }\n\n  /* Active Indicator Pill */\n  .icon-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--md-navigation-bar-indicator-width, 64px);\n    height: var(--md-navigation-bar-indicator-height, 32px);\n    border-radius: var(--md-navigation-bar-indicator-shape, 16px);\n    position: relative;\n    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .indicator {\n    position: absolute;\n    inset: 0;\n    border-radius: var(--md-navigation-bar-indicator-shape, 16px);\n    background-color: var(--md-navigation-bar-indicator-color, var(--md-sys-color-secondary-container, #E8DEF8));\n    opacity: 0;\n    transform: scaleX(0.5);\n    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),\n                opacity 200ms cubic-bezier(0.2, 0, 0, 1);\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  :host([active]) .indicator,\n  :host([selected]) .indicator {\n    opacity: 1;\n    transform: scaleX(1);\n  }\n\n  .icon {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    font-size: 24px;\n    z-index: 1;\n    color: var(--md-navigation-bar-item-icon-color, var(--md-sys-color-on-surface-variant, #49454F));\n    transition: color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([active]) .icon,\n  :host([selected]) .icon {\n    color: var(--md-navigation-bar-item-active-icon-color, var(--md-sys-color-on-secondary-container, #1D192B));\n  }\n\n  .active-icon {\n    display: none;\n  }\n\n  :host([active]) .inactive-icon,\n  :host([selected]) .inactive-icon {\n    display: none;\n  }\n\n  :host([active]) .active-icon,\n  :host([selected]) .active-icon {\n    display: inline-flex;\n  }\n\n  /* Badge */\n  .badge-slot {\n    position: absolute;\n    top: 2px;\n    right: calc(50% - 24px);\n    z-index: 2;\n    pointer-events: none;\n  }\n\n  .badge {\n    position: absolute;\n    top: 2px;\n    right: calc(50% - 24px);\n    z-index: 2;\n    pointer-events: none;\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--md-sys-color-error, #B3261E);\n    color: var(--md-sys-color-on-error, #FFFFFF);\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: 11px;\n    font-weight: 600;\n    line-height: 16px;\n    letter-spacing: 0.2px;\n    border-radius: 8px;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 4px;\n  }\n\n  .badge.dot {\n    min-width: 6px;\n    width: 6px;\n    height: 6px;\n    padding: 0;\n    border-radius: 50%;\n    top: 4px;\n    right: calc(50% - 16px);\n  }\n\n  /* Label */\n  .label-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    max-width: 100%;\n    padding: 0 4px;\n    box-sizing: border-box;\n    transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1),\n                transform 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .label {\n    font-size: var(--md-sys-typescale-label-medium-size, 12px);\n    font-weight: 500;\n    line-height: 16px;\n    letter-spacing: 0.5px;\n    text-align: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: var(--md-navigation-bar-item-label-color, var(--md-sys-color-on-surface-variant, #49454F));\n    transition: color 200ms cubic-bezier(0.2, 0, 0, 1),\n                font-weight 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([active]) .label,\n  :host([selected]) .label {\n    color: var(--md-navigation-bar-item-active-label-color, var(--md-sys-color-on-surface, #1D1B20));\n    font-weight: 700;\n  }\n\n  /* Label Mode: hidden */\n  :host([label-mode=\"hidden\"]) .label-container,\n  :host([label-mode=\"none\"]) .label-container {\n    display: none;\n  }\n\n  /* Label Mode: selectedShow (only show label when active/selected) */\n  :host([label-mode=\"selectedShow\"]:not([active]):not([selected])) .label-container,\n  :host([label-mode=\"selected-show\"]:not([active]):not([selected])) .label-container,\n  :host([label-mode=\"selected\"]:not([active]):not([selected])) .label-container,\n  :host([hide-inactive-labels]:not([active]):not([selected])) .label-container {\n    display: none;\n  }\n\n  /* Ripple and focus */\n  md-ripple {\n    border-radius: var(--md-navigation-bar-indicator-shape, 16px);\n  }\n\n  md-focus-ring {\n    --md-focus-ring-shape: var(--md-navigation-bar-indicator-shape, 16px);\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements } 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 { navigationBarItemStyles } from './navigation-bar.css.js';\n\nexport type NavigationBarLabelMode = 'alwaysShow' | 'selectedShow' | 'hidden' | 'always' | 'selected' | 'none';\n\n/**\n * Material Design 3 Navigation Bar Item Component.\n *\n * Represents an individual destination in a navigation bar with an icon,\n * active indicator pill, badge, and label.\n *\n * @slot icon - Leading/inactive icon.\n * @slot active-icon - Custom icon shown when the item is active.\n * @slot badge - Custom badge indicator or element.\n * @slot - Default slot for item label text.\n *\n * @fires item-click - Dispatched when the item is clicked.\n */\n@customElement('md-navigation-bar-item')\nexport class MdNavigationBarItem extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, navigationBarItemStyles];\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  icon = '';\n\n  @property({ type: String, attribute: 'active-icon' })\n  activeIcon = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String, reflect: true })\n  badge = '';\n\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  @property({ type: String, reflect: true, attribute: 'label-mode' })\n  labelMode: NavigationBarLabelMode = 'alwaysShow';\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-inactive-labels' })\n  hideInactiveLabels = false;\n\n  @queryAssignedElements({ slot: 'active-icon' })\n  private assignedActiveIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'badge' })\n  private assignedBadges!: HTMLElement[];\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('active') && !changedProperties.has('selected')) {\n      this.selected = this.active;\n    } else if (changedProperties.has('selected') && !changedProperties.has('active')) {\n      this.active = this.selected;\n    } else if (changedProperties.has('active') && changedProperties.has('selected')) {\n      if (this.active) {\n        this.selected = true;\n      } else if (this.selected) {\n        this.active = true;\n      }\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'tab');\n    this.updateAriaAttributes();\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('active') || changedProperties.has('selected') || changedProperties.has('disabled')) {\n      this.updateAriaAttributes();\n    }\n  }\n\n  private updateAriaAttributes() {\n    const isSelected = this.active || this.selected;\n    this.setAttribute('aria-selected', isSelected ? 'true' : 'false');\n    if (this.disabled) {\n      this.setAttribute('aria-disabled', 'true');\n    } else {\n      this.removeAttribute('aria-disabled');\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    this.emitEvent('item-click', {\n      item: this,\n      value: this.value || this.label,\n      label: this.label,\n      active: this.active,\n    });\n  };\n\n  private renderBadge() {\n    if (this.assignedBadges && this.assignedBadges.length > 0) {\n      return html`<span class=\"badge-slot\"><slot name=\"badge\"></slot></span>`;\n    }\n\n    if (this.badge === '' || this.badge === null || this.badge === undefined) {\n      return html`<slot name=\"badge\"></slot>`;\n    }\n\n    const isDot = this.badge === 'dot' || this.badge === 'true' || this.badge === '';\n    const badgeText = isDot ? '' : this.badge;\n\n    return html`\n      <span class=\"badge ${isDot ? 'dot' : ''}\">\n        ${badgeText}\n      </span>\n      <slot name=\"badge\"></slot>\n    `;\n  }\n\n  private renderIcon() {\n    const hasCustomActiveIconSlot = this.assignedActiveIcons && this.assignedActiveIcons.length > 0;\n    const hasActiveIconProp = Boolean(this.activeIcon);\n\n    if (hasActiveIconProp || hasCustomActiveIconSlot) {\n      return html`\n        <span class=\"icon inactive-icon\">\n          <slot name=\"icon\">\n            ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n          </slot>\n        </span>\n        <span class=\"icon active-icon\">\n          <slot name=\"active-icon\">\n            ${this.activeIcon ? html`<md-icon name=${this.activeIcon}></md-icon>` : nothing}\n          </slot>\n        </span>\n      `;\n    }\n\n    return html`\n      <span class=\"icon\">\n        <slot name=\"icon\">\n          ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n        </slot>\n      </span>\n    `;\n  }\n\n  override render() {\n    const isSelected = this.active || this.selected;\n\n    const content = html`\n      <div class=\"icon-wrapper\">\n        <div class=\"indicator\"></div>\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring></md-focus-ring>\n        ${this.renderIcon()}\n        ${this.renderBadge()}\n      </div>\n\n      <div class=\"label-container\">\n        <span class=\"label\">\n          <slot>${this.label}</slot>\n        </span>\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-selected=${isSelected ? 'true' : 'false'}\n          tabindex=${this.disabled ? '-1' : nothing}\n          @click=${this.handleClick}\n        >\n          ${content}\n        </a>\n      `;\n    }\n\n    return html`\n      <div\n        class=\"item\"\n        tabindex=${this.disabled ? '-1' : nothing}\n        @click=${this.handleClick}\n      >\n        ${content}\n      </div>\n    `;\n  }\n}\n\n// Aliases\n@customElement('md-nav-bar-item')\nexport class MdNavBarItem extends MdNavigationBarItem {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-bar-item': MdNavigationBarItem;\n    'md-nav-bar-item': MdNavBarItem;\n  }\n}\n"],"mappings":";;;;;;;AAEA,IAAa,IAAsB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCzB,IAA0B,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCjB7B,IAAN,cAAkC,EAAc;;EAmF9B,aA/Ed,KAAA,SAAA,IAGE,KAAA,WAAA,IAGA,KAAA,WAAA,IAGJ,KAAA,OAAA,IAGM,KAAA,aAAA,IAGL,KAAA,QAAA,IAGA,KAAA,QAAA,IAGA,KAAA,QAAA,IAGD,KAAA,OAAA,IAGE,KAAA,SAAA,IAG2B,KAAA,YAAA,cAGf,KAAA,qBAAA,IA8CE,KAAA,eAAA,MAAsB;GAC3C,IAAI,KAAK,UAAU;IAEjB,AADA,EAAM,eAAe,GACrB,EAAM,yBAAyB;IAC/B;GACF;GAEA,KAAK,UAAU,cAAc;IAC3B,MAAM;IACN,OAAO,KAAK,SAAS,KAAK;IAC1B,OAAO,KAAK;IACZ,QAAQ,KAAK;GACf,CAAC;EACH;;;EA/FyB,KAAA,SAAA,CAAC,EAAc,QAAQ,CAAuB;;CA4CvE,WAAoB,GAAyC;EAE3D,AADA,MAAM,WAAW,CAAiB,GAC9B,EAAkB,IAAI,QAAQ,KAAK,CAAC,EAAkB,IAAI,UAAU,IACtE,KAAK,WAAW,KAAK,SACZ,EAAkB,IAAI,UAAU,KAAK,CAAC,EAAkB,IAAI,QAAQ,IAC7E,KAAK,SAAS,KAAK,WACV,EAAkB,IAAI,QAAQ,KAAK,EAAkB,IAAI,UAAU,MACxE,KAAK,SACP,KAAK,WAAW,KACP,KAAK,aACd,KAAK,SAAS;CAGpB;CAEA,oBAA6B;EAG3B,AAFA,MAAM,kBAAkB,GACxB,KAAK,aAAa,QAAQ,KAAK,GAC/B,KAAK,qBAAqB;CAC5B;CAEA,QAAiB,GAAyC;EAExD,AADA,MAAM,QAAQ,CAAiB,IAC3B,EAAkB,IAAI,QAAQ,KAAK,EAAkB,IAAI,UAAU,KAAK,EAAkB,IAAI,UAAU,MAC1G,KAAK,qBAAqB;CAE9B;CAEA,uBAA+B;EAC7B,IAAM,IAAa,KAAK,UAAU,KAAK;EAEvC,AADA,KAAK,aAAa,iBAAiB,IAAa,SAAS,OAAO,GAC5D,KAAK,WACP,KAAK,aAAa,iBAAiB,MAAM,IAEzC,KAAK,gBAAgB,eAAe;CAExC;CAiBA,cAAsB;EACpB,IAAI,KAAK,kBAAkB,KAAK,eAAe,SAAS,GACtD,OAAO,CAAI;EAGb,IAAI,KAAK,UAAU,MAAM,KAAK,UAAU,QAAQ,KAAK,UAAU,KAAA,GAC7D,OAAO,CAAI;EAGb,IAAM,IAAQ,KAAK,UAAU,SAAS,KAAK,UAAU,UAAU,KAAK,UAAU,IACxE,IAAY,IAAQ,KAAK,KAAK;EAEpC,OAAO,CAAI;2BACY,IAAQ,QAAQ,GAAG;UACpC,EAAU;;;;CAIlB;CAEA,aAAqB;EACnB,IAAM,IAA0B,KAAK,uBAAuB,KAAK,oBAAoB,SAAS;EAkB9F,OAjBkC,KAAK,cAEd,IAChB,CAAI;;;cAGH,KAAK,OAAO,CAAI,iBAAiB,KAAK,KAAK,eAAe,EAAQ;;;;;cAKlE,KAAK,aAAa,CAAI,iBAAiB,KAAK,WAAW,eAAe,EAAQ;;;UAMjF,CAAI;;;YAGH,KAAK,OAAO,CAAI,iBAAiB,KAAK,KAAK,eAAe,EAAQ;;;;CAI5E;CAEA,SAAkB;EAChB,IAAM,IAAa,KAAK,UAAU,KAAK,UAEjC,IAAU,CAAI;;;+BAGO,KAAK,SAAS;;UAEnC,KAAK,WAAW,EAAE;UAClB,KAAK,YAAY,EAAE;;;;;kBAKX,KAAK,MAAM;;;;EAoBzB,OAfI,KAAK,OACA,CAAI;;;iBAGA,KAAK,WAAW,IAAU,KAAK,KAAK;mBAClC,KAAK,UAAU,EAAQ;0BAChB,IAAa,SAAS,QAAQ;qBACnC,KAAK,WAAW,OAAO,EAAQ;mBACjC,KAAK,YAAY;;YAExB,EAAQ;;UAKT,CAAI;;;mBAGI,KAAK,WAAW,OAAO,EAAQ;iBACjC,KAAK,YAAY;;UAExB,EAAQ;;;CAGhB;AACF;AA3LG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAGnD,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGjE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAuB,CAAC,CAAA,GAAA,EAAA,WAAA,sBAAA,KAAA,CAAA,GAG5E,EAAA,CAAA,EAAsB,EAAE,MAAM,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,uBAAA,KAAA,CAAA,GAG7C,EAAA,CAAA,EAAsB,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GA3CzC,IAAA,EAAA,CAAA,EAAc,wBAAwB,CAAA,GAAA,CAAA;AAmMhC,IAAM,IAAN,cAA2B,EAAoB,CAAC;AADtD,IAAA,EAAA,CAAA,EAAc,iBAAiB,CAAA,GAAA,CAAA"}