scb-wc 0.1.2 → 0.1.4

package/scb-menu/scb-menu-item.js

@@ -0,0 +1,330 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-chevron/scb-chevron.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+//#region src/scb-test-components/scb-menu/scb-menu-item.ts
+var c, l = class extends t {
+	static {
+		c = this;
+	}
+	constructor(...e) {
+		super(...e), this.label = "", this.selected = !1, this.noHighlightSelected = !1, this.leadingIcon = "", this.itemHref = "", this.hasSlotContent = !1, this.expanded = !1, this.__submenuId = `sub-${Math.random().toString(36).slice(2)}`, this.__focusId = `f-${Math.random().toString(36).slice(2)}`, this._toggleExpand = (e) => {
+			e && e.stopPropagation(), this.hasSlotContent && this.__setExpanded(!this.expanded);
+		}, this._onButtonClick = (e) => {
+			e.stopPropagation(), this._dispatchSelect(), this._toggleExpand();
+		}, this._onLinkClick = () => {
+			this._dispatchSelect();
+		}, this._onKeyDown = (e) => {
+			let t = Array.from(this.closest("scb-sub-menu, scb-menu")?.querySelectorAll("scb-menu-item") || []), n = t.indexOf(this);
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), ((t[n + 1] || t[0]).shadowRoot?.querySelector(".scb-menu-label-text"))?.focus();
+					break;
+				case "ArrowUp":
+					e.preventDefault(), ((t[n - 1] || t[t.length - 1]).shadowRoot?.querySelector(".scb-menu-label-text"))?.focus();
+					break;
+				case "Home":
+					e.preventDefault(), (t[0].shadowRoot?.querySelector(".scb-menu-label-text"))?.focus();
+					break;
+				case "End":
+					e.preventDefault(), (t[t.length - 1].shadowRoot?.querySelector(".scb-menu-label-text"))?.focus();
+					break;
+			}
+		};
+	}
+	static {
+		this.__rippleLoaded = !1;
+	}
+	static {
+		this.__iconLoaded = !1;
+	}
+	static {
+		this.__focusRingLoaded = !1;
+	}
+	get __submenuEl() {
+		return this.renderRoot.querySelector(`#${this.__submenuId}`);
+	}
+	async __ensureDepsLoaded() {
+		c.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), c.__rippleLoaded = !0), c.__focusRingLoaded || (await import("@material/web/focus/md-focus-ring.js"), c.__focusRingLoaded = !0), this.leadingIcon && !c.__iconLoaded && (await import("@material/web/icon/icon.js"), c.__iconLoaded = !0);
+	}
+	static {
+		this.styles = n`
+    :host {
+      /* Animationtokens */
+      --scb-menu-sub-transition-duration: var(--scb-motion-duration-quick, 150ms);
+      --scb-menu-sub-transition-easing: var(--scb-motion-easing-standard, cubic-bezier(.69,.16,.2,.98));
+
+      --scb-menu-chevron-transition-duration: var(--motion-duration-medium, 150ms);
+      --scb-menu-chevron-transition-easing: var(
+        --motion-easing-emphasized-accelerate,
+        var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
+      );
+
+      --scb-menu-item-padding-y: 14px;
+      --scb-menu-item-padding-x: 20px;
+      --scb-menu-item-padding-x-has-icon: var(--spacing-4, 12px);
+      --scb-menu-item-radius: 28px;
+      --scb-menu-item-gap: var(--spacing-4, 12px);
+    }
+
+    :host([expanded]) {
+      --scb-menu-chevron-transition-easing: var(
+        --motion-easing-emphasized-decelerate,
+        var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
+      );
+    }
+
+    .scb-menu-item-label {
+      display: flex;
+      align-items: center;
+      position: relative;
+    }
+
+    .scb-menu-label-text {
+      width: 100%;
+      display: block;
+      background: transparent;
+      border: 0;
+      text-align: left;
+      font: inherit;
+      color: inherit;
+      text-decoration: none;
+      cursor: pointer;
+      padding: 0;
+      margin: 0;
+      appearance: none;
+      -webkit-appearance: none;
+      box-sizing: border-box;
+      outline: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+    .scb-menu-label-text:focus,
+    .scb-menu-label-text:focus-visible {
+      outline: none;
+    }
+    .scb-menu-label-text:-moz-focusring {
+      outline: none;
+    }
+
+    .scb-menu-click {
+      display: flex;
+      align-items: center;
+      gap: var(--scb-menu-item-gap);
+      padding-block: var(--scb-menu-item-padding-y);
+      padding-inline: var(--scb-menu-item-padding-x);
+      border-radius: var(--scb-menu-item-radius);
+      position: relative;
+      overflow: hidden;
+      color: var(--md-sys-color-on-surface);
+    }
+    .scb-menu-click.has-icon {
+      padding-inline: var(--scb-menu-item-padding-x-has-icon);
+      padding-block: var(--scb-menu-item-padding-y);
+    }
+
+    .scb-menu-click md-ripple {
+      --md-ripple-focus-opacity: 0;
+    }
+
+    .scb-menu-item-label[selected]:not([no-highlight-selected]) .scb-menu-click,
+    :host([selected]):not([no-highlight-selected]) .scb-menu-click {
+      color: var(--md-sys-color-on-secondary-container);
+      background: var(--md-sys-color-secondary-container);
+      font-weight: 600;
+    }
+
+    .menu-chevron-button {
+      margin-left: auto;
+      flex: 0 0 auto;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 48px;
+      block-size: 48px;
+      padding: 0;
+      border: 0;
+      border-radius: 999px;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .menu-chevron-button:focus {
+      outline: none;
+    }
+
+    .menu-chevron-button md-ripple {
+      border-radius: inherit;
+    }
+
+    .menu-chevron {
+      --scb-chevron-size: var(--icon-size-medium, 24px);
+    }
+
+    /* Undermeny: CSS-grid 0fr till 1fr för höjd-animation utan JS-mätningar */
+    .submenu {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition:
+        grid-template-rows var(--scb-menu-sub-transition-duration) var(--scb-menu-sub-transition-easing),
+        opacity var(--scb-menu-sub-transition-duration) var(--scb-menu-sub-transition-easing);
+      opacity: 0;
+      overflow: hidden;
+      padding-left: var(--spacing-5, 16px);
+    }
+    .submenu.expanded {
+      grid-template-rows: 1fr;
+      opacity: 1;
+    }
+    .submenu__inner {
+      overflow: hidden;
+    }
+
+    /* Minskar rörelse för användare som önskar det */
+    @media (prefers-reduced-motion: reduce) {
+      .submenu {
+        transition: none;
+      }
+    }
+  `;
+	}
+	__syncHasSlotContentFromLightDom() {
+		let e = Array.from(this.children);
+		this.hasSlotContent = e.length > 0 && e.every((e) => e.tagName === "SCB-SUB-MENU");
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.__syncHasSlotContentFromLightDom();
+	}
+	_onSlotChange(e) {
+		let t = e.target.assignedElements({ flatten: !0 });
+		this.hasSlotContent = t.length > 0 && t.every((e) => e.tagName === "SCB-SUB-MENU");
+	}
+	__setExpanded(e) {
+		this.hasSlotContent && (this.expanded = e, this.dispatchEvent(new CustomEvent("scb-menu-expand", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				item: this,
+				expanded: e
+			}
+		})), this.dispatchEvent(new CustomEvent("scbmenuexpand", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				item: this,
+				expanded: e
+			}
+		})));
+	}
+	_dispatchSelect() {
+		this.dispatchEvent(new CustomEvent("scb-menu-select", {
+			bubbles: !0,
+			composed: !0,
+			detail: { item: this }
+		})), this.dispatchEvent(new CustomEvent("scbmenuselect", {
+			bubbles: !0,
+			composed: !0,
+			detail: { item: this }
+		}));
+	}
+	async firstUpdated() {
+		await this.__ensureDepsLoaded();
+	}
+	updated(e) {
+		e.has("leadingIcon") && this.leadingIcon && this.__ensureDepsLoaded(), e.has("hasSlotContent") && this.hasSlotContent && this.__ensureDepsLoaded(), e.has("expanded") && this.__applyInert();
+	}
+	__applyInert() {
+		let e = this.__submenuEl;
+		e && (this.expanded ? (e.removeAttribute("inert"), e.setAttribute("aria-hidden", "false")) : (e.setAttribute("inert", ""), e.setAttribute("aria-hidden", "true")));
+	}
+	render() {
+		let e = !!this.leadingIcon, t = !!this.itemHref, n = this.hasSlotContent;
+		return r`
+      <div class="scb-menu-item">
+        <div class="scb-menu-item-label" ?selected=${this.selected} ?no-highlight-selected=${this.noHighlightSelected}>
+          ${t ? r`
+                <a
+                  id=${this.__focusId}
+                  class="scb-menu-label-text"
+                  aria-label="${this.label}"
+                  href="${this.itemHref}"
+                  aria-current=${this.selected ? "page" : i}
+                  @click=${this._onLinkClick}
+                  @keydown=${this._onKeyDown}
+                >
+                  <span class="scb-menu-click ${e ? "has-icon" : ""}">
+                    <md-ripple></md-ripple>
+                    ${e ? r`<md-icon>${this.leadingIcon}</md-icon>` : ""}
+                    ${this.label}
+                  </span>
+                </a>
+                <md-focus-ring for=${this.__focusId} inward></md-focus-ring>
+              ` : r`
+                <button
+                  id=${this.__focusId}
+                  type="button"
+                  class="scb-menu-label-text"
+                  @click=${this._onButtonClick}
+                  @keydown=${this._onKeyDown}
+                  aria-expanded=${n ? String(this.expanded) : i}
+                  aria-controls=${n ? this.__submenuId : i}
+                >
+                  <span class="scb-menu-click ${e ? "has-icon" : ""}">
+                    <md-ripple></md-ripple>
+                    ${e ? r`<md-icon>${this.leadingIcon}</md-icon>` : ""}
+                    ${this.label}
+                  </span>
+                </button>
+                <md-focus-ring for=${this.__focusId} inward></md-focus-ring>
+              `}
+          ${n ? r`
+                <button
+                  class="menu-chevron-button"
+                  type="button"
+                  role="presentation"
+                  tabindex="-1"
+                  @click=${(e) => {
+			e.stopPropagation(), this._toggleExpand(e);
+		}}
+                >
+                  <md-ripple></md-ripple>
+                  <scb-chevron class="menu-chevron" .open=${this.expanded}></scb-chevron>
+                </button>
+              ` : ""}
+        </div>
+
+        <div
+          id="${this.__submenuId}"
+          class="submenu ${this.expanded ? "expanded" : ""}"
+          role="region"
+          aria-hidden=${this.expanded ? "false" : "true"}
+        >
+          <div class="submenu__inner">
+            <slot @slotchange=${this._onSlotChange}></slot>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+e([o({ type: String })], l.prototype, "label", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "selected", void 0), e([o({
+	type: Boolean,
+	attribute: "no-highlight-selected",
+	reflect: !0
+})], l.prototype, "noHighlightSelected", void 0), e([o({
+	type: String,
+	attribute: "leading-icon"
+})], l.prototype, "leadingIcon", void 0), e([o({
+	type: String,
+	attribute: "item-href"
+})], l.prototype, "itemHref", void 0), e([s()], l.prototype, "hasSlotContent", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "expanded", void 0), l = c = e([a("scb-menu-item")], l);
+//#endregion
+export { l as ScbMenuItem };

package/scb-menu/scb-menu-section.js

@@ -0,0 +1,60 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-divider/scb-divider.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/scb-test-components/scb-menu/scb-menu-section.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "";
+	}
+	static {
+		this.styles = n`
+    :host {
+      color: var(--md-sys-color-on-surface);
+      font-family: var(--brand-font);
+    }
+
+    .scb-menu-section {
+      display: block;
+      width: 100%;
+
+      padding-block: var(--scb-menu-section-padding-block, 14px);
+      padding-inline: var(--spacing-4, 12px);
+      color: var(--md-sys-color-on-surface);
+      font-weight: var(--weight-semibold, 600);
+    }
+
+    .scb-menu-label {
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-label-medium-size);
+      line-height: var(--md-sys-typescale-label-medium-line-height);
+      font-weight: var(
+        --md-sys-typescale-label-medium-weight,
+        var(--weight-semibold)
+      );
+      letter-spacing: var(
+        --md-sys-typescale-label-medium-tracking
+      );
+      color: var(--md-sys-color-on-surface);
+    }
+
+    scb-divider {
+      margin-block: var(--spacing-2, 4px);
+      margin-inline: var(--spacing-4, 12px);
+    }
+  `;
+	}
+	render() {
+		return r`
+      <scb-divider></scb-divider>
+      ${this.label ? r`
+            <div class="scb-menu-section">
+              <div class="scb-menu-label">${this.label}</div>
+            </div>
+          ` : ""}
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "label", void 0), o = e([i("scb-menu-section")], o);
+//#endregion
+export { o as ScbmenuSection };

package/scb-menu/scb-menu.js

@@ -0,0 +1,154 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-divider/scb-divider.js";
+import "./scb-menu-item.js";
+import "./scb-menu-section.js";
+import "./scb-sub-menu.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/scb-test-components/scb-menu/scb-menu.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.subLabel = "", this.noHighlightSelected = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._onGlobalSelect = (e) => {
+			let t = e;
+			this.querySelectorAll("scb-menu-item").forEach((e) => {
+				e.selected = !1, this.noHighlightSelected ? e.setAttribute("no-highlight-selected", "") : e.removeAttribute("no-highlight-selected");
+			}), this.contains(t.detail.item) && (t.detail.item.selected = !0);
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      color: var(--md-sys-color-on-surface);
+      padding: var(--spacing-4, 12px);
+      background: var(--scb-menu-background, var(--md-sys-color-surface-container));
+      font-family: var(--brand-font);
+
+      margin-block-start: var(--scb-menu-spacing-block-start, 0);
+      margin-block-end: var(--scb-menu-spacing-block-end, 0);
+      margin-inline-start: var(--scb-menu-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-menu-spacing-inline-end, 0);
+    }
+    
+    .scb-menu-label {
+      font-size: var(--md-sys-typescale-label-large-size);
+      line-height: var(
+        --md-sys-typescale-label-large-line-height
+      );
+      font-weight: var(
+        --md-sys-typescale-label-large-weight,
+        var(--weight-semibold)
+      );
+      letter-spacing: var(
+        --md-sys-typescale-label-large-tracking
+      );
+      color: var(--md-sys-color-on-surface);
+    }
+
+    .scb-menu-sublabel {
+      font-size: var(--md-sys-typescale-body-small-size);
+      line-height: var(
+        --md-sys-typescale-body-small-line-height
+      );
+      font-weight: var(
+        --md-sys-typescale-body-small-weight,
+        var(--weight-regular)
+      );
+      letter-spacing: var(
+        --md-sys-typescale-body-small-tracking
+      );
+      color: var(--md-sys-color-on-surface);
+    }
+
+    .scb-menu-label-wrapper {
+      padding: var(--spacing-4, 12px);
+      color: inherit;
+    }
+
+    scb-divider {
+      margin-block: var(--spacing-2, 4px);
+    }
+
+    ::slotted(scb-search) {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      padding: var(--scb-menu-search-padding, var(--spacing-4, 12px));
+    }
+
+    .panel {
+      contain: layout paint style;
+    }
+  `;
+	}
+	render() {
+		return r`
+      <nav
+        aria-label="${this.label}"
+      >
+        ${this.label ? r`
+              <div class="scb-menu-label-wrapper">
+                <div class="scb-menu-label">${this.label}</div>
+                <div class="scb-menu-sublabel">
+                  ${this.subLabel}
+                </div>
+              </div>
+              <scb-divider></scb-divider>
+            ` : i}
+        <div class="panel">
+          <slot></slot>
+        </div>
+      </nav>
+    `;
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.#e();
+	}
+	updated(e) {
+		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	#e() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight);
+		t ? this.style.setProperty("--scb-menu-spacing-block-start", t) : this.style.removeProperty("--scb-menu-spacing-block-start"), n ? this.style.setProperty("--scb-menu-spacing-block-end", n) : this.style.removeProperty("--scb-menu-spacing-block-end"), r ? this.style.setProperty("--scb-menu-spacing-inline-start", r) : this.style.removeProperty("--scb-menu-spacing-inline-start"), i ? this.style.setProperty("--scb-menu-spacing-inline-end", i) : this.style.removeProperty("--scb-menu-spacing-inline-end");
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("scb-menu-select", this._onGlobalSelect);
+	}
+	disconnectedCallback() {
+		window.removeEventListener("scb-menu-select", this._onGlobalSelect), super.disconnectedCallback();
+	}
+};
+e([o({ type: String })], s.prototype, "label", void 0), e([o({
+	type: String,
+	attribute: "sub-label"
+})], s.prototype, "subLabel", void 0), e([o({
+	type: Boolean,
+	attribute: "no-highlight-selected",
+	reflect: !0
+})], s.prototype, "noHighlightSelected", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "spacing", void 0), e([o({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], s.prototype, "spacingTop", void 0), e([o({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], s.prototype, "spacingBottom", void 0), e([o({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], s.prototype, "spacingLeft", void 0), e([o({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], s.prototype, "spacingRight", void 0), s = e([a("scb-menu")], s);
+//#endregion
+export { s as ScbMenu };

package/scb-menu/scb-sub-menu.js

@@ -0,0 +1,36 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/scb-test-components/scb-menu/scb-sub-menu.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this._onGlobalSelect = (e) => {
+			let t = e;
+			this.querySelectorAll("scb-menu-item").forEach((e) => e.selected = !1), this.contains(t.detail.item) && (t.detail.item.selected = !0);
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("scb-menu-select", this._onGlobalSelect);
+	}
+	disconnectedCallback() {
+		window.removeEventListener("scb-menu-select", this._onGlobalSelect), super.disconnectedCallback();
+	}
+	render() {
+		return r`
+      <nav aria-label="${this.label}">
+        <slot></slot>
+      </nav>
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "label", void 0), o = e([i("scb-sub-menu")], o);
+//#endregion
+export { o as ScbSubmenu };

package/scb-nav/scb-nav-item.js

@@ -0,0 +1,96 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/scb-test-components/scb-nav/scb-nav-item.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.href = "", this.dataHref = "", this.disabled = !1, this.__onClick = (e) => {
+			if (e.defaultPrevented) return;
+			if (this.disabled) {
+				e.preventDefault(), e.stopImmediatePropagation();
+				return;
+			}
+			let t = (this.href || "").trim();
+			if (t) {
+				if (t.startsWith("#")) {
+					typeof window < "u" && (window.location.hash = t.slice(1));
+					return;
+				}
+				if ((this.getAttribute("target") || "").trim() === "_blank") {
+					window.open(t, "_blank", "noopener,noreferrer");
+					return;
+				}
+				window.location.href = t;
+			}
+		}, this.__onKeyDown = (e) => {
+			if (!this.disabled) {
+				if (e.key === "Enter") {
+					e.preventDefault(), this.click();
+					return;
+				}
+				e.key === " " && e.preventDefault();
+			}
+		}, this.__onKeyUp = (e) => {
+			this.disabled || e.key === " " && (e.preventDefault(), this.click());
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      outline: none;
+      position: relative;
+      overflow: hidden;
+    }
+
+    :host([disabled]) {
+      cursor: default;
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+    :host(:focus-visible) {
+      outline: none;
+    }
+
+    :host(:focus) {
+      outline: none;
+    }
+
+    .label {
+      pointer-events: none;
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("click", this.__onClick), this.addEventListener("keydown", this.__onKeyDown), this.addEventListener("keyup", this.__onKeyUp), this.__syncA11y();
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.__onClick), this.removeEventListener("keydown", this.__onKeyDown), this.removeEventListener("keyup", this.__onKeyUp), super.disconnectedCallback();
+	}
+	updated() {
+		this.__syncA11y();
+	}
+	__syncA11y() {
+		let e = !!(this.href || "").trim();
+		if (this.disabled) {
+			this.setAttribute("aria-disabled", "true"), this.tabIndex = -1, this.removeAttribute("role");
+			return;
+		}
+		this.removeAttribute("aria-disabled"), this.tabIndex = 0, this.setAttribute("role", e ? "link" : "button");
+	}
+	render() {
+		return r`<span class="label"><slot></slot></span>`;
+	}
+};
+e([a({ type: String })], o.prototype, "href", void 0), e([a({
+	type: String,
+	attribute: "data-href"
+})], o.prototype, "dataHref", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "disabled", void 0), o = e([i("scb-nav-item")], o);
+//#endregion
+export { o as ScbNavItem };