@francofantomius/material-components 1.0.1 → 1.1.0

package/dist/chunks/navigation-bar-item-C9DfOEzg.js

@@ -0,0 +1,397 @@
+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`
+  :host {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    width: 100%;
+    height: var(--md-navigation-bar-container-height, 80px);
+    min-height: 80px;
+    box-sizing: border-box;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    background-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #F3EDF7));
+    color: var(--md-navigation-bar-container-text-color, var(--md-sys-color-on-surface, #1D1B20));
+    box-shadow: var(--md-navigation-bar-elevation, none);
+    align-items: center;
+    justify-content: space-evenly;
+    user-select: none;
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  .nav-bar-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    height: 100%;
+    max-width: var(--md-navigation-bar-max-width, 100%);
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+
+  /* When hidden label mode is applied to bar */
+  :host([label-mode="hidden"]) ::slotted(md-navigation-bar-item),
+  :host([label-mode="none"]) ::slotted(md-navigation-bar-item) {
+    --md-navigation-bar-label-display: none;
+  }
+`, b = c`
+  :host {
+    display: flex;
+    flex: 1 1 0px;
+    min-width: 48px;
+    max-width: 168px;
+    height: 100%;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    outline: none;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    color: var(--md-navigation-bar-item-icon-color, var(--md-sys-color-on-surface-variant, #49454F));
+    font-family: var(--md-sys-typescale-font-family, inherit);
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+    cursor: default;
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 12px 0 16px 0;
+    box-sizing: border-box;
+    text-decoration: none;
+    color: inherit;
+    position: relative;
+    outline: none;
+    gap: 4px;
+  }
+
+  /* Active Indicator Pill */
+  .icon-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--md-navigation-bar-indicator-width, 64px);
+    height: var(--md-navigation-bar-indicator-height, 32px);
+    border-radius: var(--md-navigation-bar-indicator-shape, 16px);
+    position: relative;
+    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),
+                background-color 200ms cubic-bezier(0.2, 0, 0, 1),
+                color 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .indicator {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--md-navigation-bar-indicator-shape, 16px);
+    background-color: var(--md-navigation-bar-indicator-color, var(--md-sys-color-secondary-container, #E8DEF8));
+    opacity: 0;
+    transform: scaleX(0.5);
+    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),
+                opacity 200ms cubic-bezier(0.2, 0, 0, 1);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  :host([active]) .indicator,
+  :host([selected]) .indicator {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+
+  .icon {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    z-index: 1;
+    color: var(--md-navigation-bar-item-icon-color, var(--md-sys-color-on-surface-variant, #49454F));
+    transition: color 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([active]) .icon,
+  :host([selected]) .icon {
+    color: var(--md-navigation-bar-item-active-icon-color, var(--md-sys-color-on-secondary-container, #1D192B));
+  }
+
+  .active-icon {
+    display: none;
+  }
+
+  :host([active]) .inactive-icon,
+  :host([selected]) .inactive-icon {
+    display: none;
+  }
+
+  :host([active]) .active-icon,
+  :host([selected]) .active-icon {
+    display: inline-flex;
+  }
+
+  /* Badge */
+  .badge-slot {
+    position: absolute;
+    top: 2px;
+    right: calc(50% - 24px);
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .badge {
+    position: absolute;
+    top: 2px;
+    right: calc(50% - 24px);
+    z-index: 2;
+    pointer-events: none;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--md-sys-color-error, #B3261E);
+    color: var(--md-sys-color-on-error, #FFFFFF);
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0.2px;
+    border-radius: 8px;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+  }
+
+  .badge.dot {
+    min-width: 6px;
+    width: 6px;
+    height: 6px;
+    padding: 0;
+    border-radius: 50%;
+    top: 4px;
+    right: calc(50% - 16px);
+  }
+
+  /* Label */
+  .label-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    padding: 0 4px;
+    box-sizing: border-box;
+    transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1),
+                transform 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .label {
+    font-size: var(--md-sys-typescale-label-medium-size, 12px);
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: 0.5px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--md-navigation-bar-item-label-color, var(--md-sys-color-on-surface-variant, #49454F));
+    transition: color 200ms cubic-bezier(0.2, 0, 0, 1),
+                font-weight 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([active]) .label,
+  :host([selected]) .label {
+    color: var(--md-navigation-bar-item-active-label-color, var(--md-sys-color-on-surface, #1D1B20));
+    font-weight: 700;
+  }
+
+  /* Label Mode: hidden */
+  :host([label-mode="hidden"]) .label-container,
+  :host([label-mode="none"]) .label-container {
+    display: none;
+  }
+
+  /* Label Mode: selectedShow (only show label when active/selected) */
+  :host([label-mode="selectedShow"]:not([active]):not([selected])) .label-container,
+  :host([label-mode="selected-show"]:not([active]):not([selected])) .label-container,
+  :host([label-mode="selected"]:not([active]):not([selected])) .label-container,
+  :host([hide-inactive-labels]:not([active]):not([selected])) .label-container {
+    display: none;
+  }
+
+  /* Ripple and focus */
+  md-ripple {
+    border-radius: var(--md-navigation-bar-indicator-shape, 16px);
+  }
+
+  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`
+      <span class="badge ${e ? "dot" : ""}">
+        ${n}
+      </span>
+      <slot name="badge"></slot>
+    `;
+  }
+  renderIcon() {
+    const e = this.assignedActiveIcons && this.assignedActiveIcons.length > 0;
+    return this.activeIcon || e ? o`
+        <span class="icon inactive-icon">
+          <slot name="icon">
+            ${this.icon ? o`<md-icon name=${this.icon}></md-icon>` : s}
+          </slot>
+        </span>
+        <span class="icon active-icon">
+          <slot name="active-icon">
+            ${this.activeIcon ? o`<md-icon name=${this.activeIcon}></md-icon>` : s}
+          </slot>
+        </span>
+      ` : o`
+      <span class="icon">
+        <slot name="icon">
+          ${this.icon ? o`<md-icon name=${this.icon}></md-icon>` : s}
+        </slot>
+      </span>
+    `;
+  }
+  render() {
+    const e = this.active || this.selected, n = o`
+      <div class="icon-wrapper">
+        <div class="indicator"></div>
+        <md-ripple ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring></md-focus-ring>
+        ${this.renderIcon()}
+        ${this.renderBadge()}
+      </div>
+
+      <div class="label-container">
+        <span class="label">
+          <slot>${this.label}</slot>
+        </span>
+      </div>
+    `;
+    return this.href ? o`
+        <a
+          class="item"
+          href=${this.disabled ? s : this.href}
+          target=${this.target || s}
+          aria-selected=${e ? "true" : "false"}
+          tabindex=${this.disabled ? "-1" : s}
+          @click=${this.handleClick}
+        >
+          ${n}
+        </a>
+      ` : o`
+      <div
+        class="item"
+        tabindex=${this.disabled ? "-1" : s}
+        @click=${this.handleClick}
+      >
+        ${n}
+      </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
+};
+
+//# sourceMappingURL=navigation-bar-item-C9DfOEzg.js.map

package/dist/chunks/navigation-bar-item-C9DfOEzg.js.map

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