scb-wc 0.1.2 → 0.1.4

package/scb-notification-card/scb-notification-card.js

@@ -0,0 +1,479 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-icon-button/scb-icon-button.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/icon/icon.js";
+//#region src/scb-test-components/scb-notification-card/scb-notification-card.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "success", this.direction = "horizontal", this.size = "large", this.title = "", this.notificationCardTitle = "", this.subtitle = "", this.supportingText = "", this.open = !1, this.linkText = "", this.linkHref = "#", this.href = "", this.showIcon = !1, this.showCloseButton = !1, this.sizing = "stretch", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.fullHeight = !1, this.fullWidth = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._closeNotification = () => {
+			this.open = !1;
+			let e = new CustomEvent("close", {
+				detail: { open: this.open },
+				bubbles: !0,
+				composed: !0
+			});
+			this.dispatchEvent(e);
+			let t = new CustomEvent("Close", {
+				detail: { open: this.open },
+				bubbles: !0,
+				composed: !0
+			});
+			this.dispatchEvent(t);
+		};
+	}
+	get #e() {
+		return this.notificationCardTitle || this.title;
+	}
+	static {
+		this.styles = [n`
+      :host {
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+        inline-size: 100%;
+        min-inline-size: 0;
+        /* Om det behövs kan maxbredd styras via css-variabel, samma idé som övriga kort */
+        max-inline-size: var(--scb-notification-card-max-w, none);
+        height: auto;
+        padding: var(--scb-notification-card-focus-ring-gap, 4px);
+
+        --scb-notification-card-padding: var(--spacing-5, 16px);
+        --scb-notification-card-column-gap: var(--spacing-4, 12px);
+        --scb-notification-card-row-gap: var(--spacing-3, 8px);
+
+        --scb-notification-main-horizontal-gap: var(--spacing-4, 12px);
+        --scb-notification-main-vertical-gap: var(--spacing-4, 12px);
+        --scb-notification-text-container-gap: var(--spacing-4, 12px);
+
+        --scb-notification-icon-size: var(--icon-size-small, 24px);
+
+        --scb-notification-title-size: var(--md-sys-typescale-headline-small-size, 24px);
+        --scb-notification-title-line-height: var(--md-sys-typescale-headline-small-line-height, 30px);
+        --scb-notification-title-letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
+
+        --scb-notification-subtitle-size: var(--md-sys-typescale-title-medium-size, 18px);
+        --scb-notification-subtitle-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+        --scb-notification-subtitle-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+        --scb-notification-text-size: var(--md-sys-typescale-body-medium-size, 16px);
+        --scb-notification-text-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+        --scb-notification-text-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+
+        --scb-notification-footer-size: 18px;
+        --scb-notification-footer-line-height: 26px;
+      }
+
+      :host([size='medium']) {
+        --scb-notification-card-padding: var(--spacing-4, 12px);
+        --scb-notification-card-column-gap: var(--spacing-3, 8px);
+        --scb-notification-card-row-gap: var(--spacing-2, 4px);
+
+        --scb-notification-main-horizontal-gap: var(--spacing-3, 8px);
+        --scb-notification-main-vertical-gap: var(--spacing-3, 8px);
+        --scb-notification-text-container-gap: var(--spacing-3, 8px);
+
+        --scb-notification-icon-size: var(--icon-size-medium, 20px);
+
+        --scb-notification-title-size: var(--md-sys-typescale-title-large-size, 20px);
+        --scb-notification-title-line-height: var(--md-sys-typescale-title-large-line-height, 28px);
+        --scb-notification-title-letter-spacing: var(--md-sys-typescale-title-large-tracking, -0.3px);
+
+        --scb-notification-subtitle-size: var(--md-sys-typescale-title-small-size, 16px);
+        --scb-notification-subtitle-line-height: var(--md-sys-typescale-title-small-line-height, 24px);
+        --scb-notification-subtitle-letter-spacing: var(--md-sys-typescale-title-small-tracking, -0.2px);
+
+        --scb-notification-text-size: var(--md-sys-typescale-body-small-size, 14px);
+        --scb-notification-text-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+        --scb-notification-text-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+
+        --scb-notification-footer-size: 16px;
+        --scb-notification-footer-line-height: 24px;
+      }
+
+      :host([size='small']) {
+        --scb-notification-card-padding: var(--spacing-3, 8px);
+        --scb-notification-card-column-gap: var(--spacing-2, 4px);
+        --scb-notification-card-row-gap: var(--spacing-1, 2px);
+
+        --scb-notification-main-horizontal-gap: var(--spacing-2, 4px);
+        --scb-notification-main-vertical-gap: var(--spacing-2, 4px);
+        --scb-notification-text-container-gap: var(--spacing-2, 4px);
+
+        --scb-notification-icon-size: var(--icon-size-medium, 20px);
+
+        --scb-notification-title-size: var(--md-sys-typescale-title-medium-size, 18px);
+        --scb-notification-title-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+        --scb-notification-title-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+        --scb-notification-subtitle-size: var(--md-sys-typescale-body-medium-size, 16px);
+        --scb-notification-subtitle-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+        --scb-notification-subtitle-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+
+        --scb-notification-text-size: var(--md-sys-typescale-body-small-size, 14px);
+        --scb-notification-text-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+        --scb-notification-text-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+
+        --scb-notification-footer-size: 14px;
+        --scb-notification-footer-line-height: 20px;
+      }
+
+      /* Stretch: fyller både bredd och höjd, som standard */
+      :host([sizing='stretch']) {
+        inline-size: 100%;
+        block-size: 100%;
+        max-inline-size: none;
+      }
+
+      /* Legacy full-width / full-height */
+      :host([full-width]) {
+        inline-size: 100%;
+      }
+
+      :host([full-height]) {
+        block-size: 100%;
+      }
+
+      /* content-width: samma upplägg som card / fact-card */
+      :host([sizing='content-width']) {
+        display: inline-block;
+        inline-size: auto;
+        block-size: auto;
+      }
+
+      :host([sizing='content-width']) .notification {
+        inline-size: max-content;
+      }
+
+      /* content-height: bredd fyller, höjd styrs av innehåll */
+      :host([sizing='content-height']) {
+        inline-size: 100%;
+        block-size: auto;
+        max-inline-size: none;
+      }
+
+      /* När värd-elementet fyller höjd ska själva kortet också göra det */
+      :host([height]) .notification,
+      :host([max-height]) .notification,
+      :host([sizing='stretch']) .notification,
+      :host([full-height]) .notification {
+        block-size: 100%;
+      }
+
+      /* Öppen / stängd */
+      :host([open]) .notification {
+        display: flex;
+      }
+
+      :host(:not([open])) .notification {
+        display: none;
+      }
+
+      .notification {
+        box-sizing: border-box;
+        border-radius: var(--md-sys-shape-corner-large, 16px);
+        padding: var(--scb-notification-card-padding);
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+        column-gap: var(--scb-notification-card-column-gap);
+        row-gap: var(--scb-notification-card-row-gap);
+        inline-size: 100%;
+        max-inline-size: 100%;
+        color: inherit;
+      }
+
+      /* Variantfärger */
+      :host([variant='success']) .notification {
+        background: var(--md-sys-color-success-container, #E7FEE9);
+        color: var(--md-sys-color-on-success-container, #007041);
+      }
+
+      :host([variant='error']) .notification {
+        background: var(--md-sys-color-error-container, #FFD7C7);
+        color: var(--md-sys-color-on-error-container, #942500);
+      }
+
+      :host([variant='warning']) .notification {
+        background: var(--md-sys-color-warning-container, #FEEEA0);
+        color: var(--md-sys-color-on-warning-container, #6B5600);
+      }
+
+      :host([variant='info']) .notification {
+        background: var(--md-sys-color-info-container, #D6F1FF);
+        color: var(--md-sys-color-on-info-container, #1E00BE);
+      }
+
+      .notification a {
+        text-decoration: underline;
+        text-decoration-thickness: 1px;
+        text-underline-offset: 0.1578em;
+      }
+
+      .notification a:hover {
+        text-decoration-thickness: 2px;
+      }
+
+      .notification-main {
+        display: flex;
+        flex: 1 1 auto;
+        min-width: 0;
+      }
+
+      .notification-main.horizontal {
+        flex-direction: row;
+        column-gap: var(--scb-notification-main-horizontal-gap);
+        row-gap: 0;
+        align-items: flex-start;
+      }
+
+      .notification-main.vertical {
+        flex-direction: column;
+        column-gap: 0;
+        row-gap: var(--scb-notification-main-vertical-gap);
+        align-items: flex-start;
+      }
+
+      .notification-leading-icon {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        flex: 0 0 auto;
+        margin-top: 2px;
+      }
+
+      .notification-leading-icon md-icon {
+        font-size: var(--scb-notification-icon-size);
+      }
+
+      .notification-text-container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--scb-notification-text-container-gap);
+        font-family: var(--brand-font, "Inter", sans-serif);
+        font-style: normal;
+        min-width: 0;
+      }
+
+      .notification-text-container.no-gap {
+        gap: 0;
+      }
+
+      .notification-title-container{
+        display: flex;
+        flex-direction: column;
+      }
+
+      .notification-title {
+        font-size: var(--scb-notification-title-size);
+        font-weight: var(--weight-bold, 700);
+        line-height: var(--scb-notification-title-line-height);
+        letter-spacing: var(--scb-notification-title-letter-spacing);
+        white-space: normal;
+        word-break: normal;
+        overflow-wrap: normal;
+        hyphens: auto;
+        overflow: visible;
+        text-overflow: clip;
+      }
+
+      .notification-subtitle {
+        font-size: var(--scb-notification-subtitle-size);
+        font-weight: var(--weight-semibold, 600);
+        line-height: var(--scb-notification-subtitle-line-height);
+        letter-spacing: var(--scb-notification-subtitle-letter-spacing);
+        white-space: normal;
+        word-break: normal;
+        overflow-wrap: normal;
+        hyphens: auto;
+        overflow: visible;
+        text-overflow: clip;
+      }
+
+      .notification-text {
+        font-size: var(--scb-notification-text-size);
+        font-weight: var(--weight-regular, 400);
+        line-height: var(--scb-notification-text-line-height);
+        letter-spacing: var(--scb-notification-text-letter-spacing);
+
+        white-space: normal;
+        word-break: normal;
+        overflow-wrap: normal;
+        hyphens: auto;
+        overflow: visible;
+        text-overflow: clip;
+      }
+
+      .notification-footer {
+        font-size: var(--scb-notification-footer-size);
+        margin-top: 4px;
+        line-height: var(--scb-notification-footer-line-height);
+      }
+
+      .footer-link {
+        display: inline-block;
+        vertical-align: middle;
+        transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .footer-link:focus-visible {
+        outline: none;
+        border-radius: 4px;
+        animation: growShrinkRing 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 0 0 2px var(--md-sys-color-primary, #1976d2);
+      }
+
+      .notification-close-button {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-end;
+      }
+
+      /* Justering så att krysset linjerar bättre med ikon / titel */
+      .notification-close-button scb-icon-button {
+        margin-top: -5px;
+      }
+
+      @keyframes growShrinkRing {
+        0% {
+          box-shadow: 0 0 0 2px var(--md-sys-color-primary, #1976d2);
+        }
+        50% {
+          box-shadow: 0 0 0 7px var(--md-sys-color-primary, #1976d2);
+        }
+        100% {
+          box-shadow: 0 0 0 2px var(--md-sys-color-primary, #1976d2);
+        }
+      }
+    `];
+	}
+	_iconForVariant() {
+		switch (this.variant) {
+			case "success": return "check_circle";
+			case "error": return "error";
+			case "warning": return "warning";
+			default: return "info";
+		}
+	}
+	__resolveSpacingToken(e) {
+		let t = (e ?? "").trim();
+		return t ? /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t : "";
+	}
+	__applySpacing() {
+		let e = this.__resolveSpacingToken(this.spacingTop || this.spacing), t = this.__resolveSpacingToken(this.spacingBottom || this.spacing), n = this.__resolveSpacingToken(this.spacingLeft || this.spacing), r = this.__resolveSpacingToken(this.spacingRight || this.spacing);
+		e ? this.style.marginBlockStart = e : this.style.removeProperty("margin-block-start"), t ? this.style.marginBlockEnd = t : this.style.removeProperty("margin-block-end"), n ? this.style.marginInlineStart = n : this.style.removeProperty("margin-inline-start"), r ? this.style.marginInlineEnd = r : this.style.removeProperty("margin-inline-end");
+	}
+	updated(e) {
+		super.updated(e), e.has("width") && (this.width && this.width.trim() !== "" ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), e.has("maxWidth") && (this.maxWidth && this.maxWidth.trim() !== "" ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), e.has("height") && (this.height && this.height.trim() !== "" ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), e.has("maxHeight") && (this.maxHeight && this.maxHeight.trim() !== "" ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.__applySpacing();
+	}
+	render() {
+		let e = this.direction === "vertical" ? "vertical" : "horizontal", t = !!(this.#e || this.subtitle), n = !!(this.supportingText && !this.#e && !this.subtitle && !this.linkText), i = this.variant === "success" ? "--_icon-color: var(--md-sys-color-on-success-container, #007041);" : this.variant === "error" ? "--_icon-color: var(--md-sys-color-on-error-container, #942500);" : this.variant === "warning" ? "--_icon-color: var(--md-sys-color-on-warning-container, #6B5600);" : "--_icon-color: var(--md-sys-color-on-info-container, #1E00BE);", a = this.linkHref && this.linkHref !== "#" ? this.linkHref : this.href || this.linkHref;
+		return r`
+      <div class="notification" type=${this.variant} role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="notification-main ${e}">
+          ${this.showIcon ? r`
+                <div class="notification-leading-icon">
+                  <md-icon aria-hidden="true">${this._iconForVariant()}</md-icon>
+                </div>
+              ` : null}
+          <div class="notification-text-container ${n ? "no-gap" : ""}">
+            ${t ? r`
+                  <div class="notification-title-container">
+                    ${this.#e ? r`<div class="notification-title">${this.#e}</div>` : null}
+                    ${this.subtitle ? r`<div class="notification-subtitle">${this.subtitle}</div>` : null}
+                  </div>
+                ` : null}
+            ${this.supportingText ? r`<div class="notification-text">${this.supportingText}</div>` : null}
+            ${this.linkText ? r`
+                  <div class="notification-footer">
+                    <a class="footer-link" href="${a}">${this.linkText}</a>
+                  </div>
+                ` : null}
+          </div>
+        </div>
+        ${this.showCloseButton ? r`
+              <div class="notification-close-button">
+                <scb-icon-button
+                  aria-label="Stäng meddelande"
+                  icon="close"
+                  style=${i}
+                  @click=${this._closeNotification}
+                >
+                </scb-icon-button>
+              </div>
+            ` : null}
+      </div>
+      <md-focus-ring></md-focus-ring>
+    `;
+	}
+};
+e([a({ type: String })], o.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "direction", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "size", void 0), e([a({ type: String })], o.prototype, "title", void 0), e([a({
+	type: String,
+	attribute: "notification-card-title"
+})], o.prototype, "notificationCardTitle", void 0), e([a({ type: String })], o.prototype, "subtitle", void 0), e([a({
+	type: String,
+	attribute: "supporting-text"
+})], o.prototype, "supportingText", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "open", void 0), e([a({
+	type: String,
+	attribute: "link-text"
+})], o.prototype, "linkText", void 0), e([a({
+	type: String,
+	attribute: "link-href"
+})], o.prototype, "linkHref", void 0), e([a({ type: String })], o.prototype, "href", void 0), e([a({
+	type: Boolean,
+	attribute: "show-icon"
+})], o.prototype, "showIcon", void 0), e([a({
+	type: Boolean,
+	attribute: "show-close-button"
+})], o.prototype, "showCloseButton", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "sizing", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "width", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "max-width"
+})], o.prototype, "maxWidth", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "height", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "max-height"
+})], o.prototype, "maxHeight", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "full-height"
+})], o.prototype, "fullHeight", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "full-width"
+})], o.prototype, "fullWidth", void 0), e([a({ type: String })], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top"
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom"
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left"
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right"
+})], o.prototype, "spacingRight", void 0), o = e([i("scb-notification-card")], o);
+//#endregion
+export { o as ScbNotificationCard };

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

@@ -0,0 +1,218 @@
+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";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+//#region src/scb-test-components/scb-options-menu/scb-options-menu-item.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.hasSubMenu = !1, this.openLeft = !1, this.divider = !1, this.leadingIcon = "", this.trailingIcon = "", this.itemHref = "", this.href = "", this._observedSubMenu = null, this._syncSubMenuFlags = () => {
+			let e = this.nextElementSibling, t = !!(e && e.tagName === "SCB-OPTIONS-SUB-MENU"), n = !!(t && e.hasAttribute("open-left"));
+			t !== this.hasSubMenu && (this.hasSubMenu = t), n !== this.openLeft && (this.openLeft = n);
+			let r = t ? e : null;
+			r !== this._observedSubMenu && (this._subMenuAttrObserver?.disconnect(), this._subMenuAttrObserver = void 0, this._observedSubMenu = r, r && (this._subMenuAttrObserver = new MutationObserver(() => this._syncSubMenuFlags()), this._subMenuAttrObserver.observe(r, {
+				attributes: !0,
+				attributeFilter: ["open-left"]
+			})));
+		}, this.handleClick = (e) => {
+			this._effectiveHref ? this._navigateToHref(e) : this._toggleSubMenu();
+		}, this._onBlur = (e) => {
+			let t = this.closest("scb-options-sub-menu");
+			if (t && t.open) {
+				let n = e.relatedTarget;
+				(!n || !t.contains(n)) && (t.dispatchEvent(new CustomEvent("hide-submenu", {
+					bubbles: !0,
+					composed: !0
+				})), t.dispatchEvent(new CustomEvent("hidesubmenu", {
+					bubbles: !0,
+					composed: !0
+				})));
+			}
+		}, this._onFocus = () => {
+			let e = this.nextElementSibling;
+			this.classList.contains("open-submenu") && (e && e.tagName === "SCB-OPTIONS-SUB-MENU" && e.hasAttribute("open") || this.classList.remove("open-submenu"));
+		}, this._onKeyDown = (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), this.handleClick(e);
+				return;
+			}
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				let t = this.nextElementSibling;
+				for (; t && t.tagName !== "SCB-OPTIONS-MENU-ITEM";) t = t.nextElementSibling;
+				t && (t.shadowRoot?.querySelector("li"))?.focus();
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault();
+				let t = this.previousElementSibling;
+				for (; t && t.tagName !== "SCB-OPTIONS-MENU-ITEM";) t = t.previousElementSibling;
+				t && (t.shadowRoot?.querySelector("li"))?.focus();
+				return;
+			}
+			if (e.key === "ArrowRight") {
+				e.preventDefault();
+				let t = this.nextElementSibling;
+				t && t.tagName === "SCB-OPTIONS-SUB-MENU" && (t.hasAttribute("open") || (this._toggleSubMenu(), t.dispatchEvent(new CustomEvent("show-submenu", {
+					bubbles: !0,
+					composed: !0
+				})), t.dispatchEvent(new CustomEvent("showsubmenu", {
+					bubbles: !0,
+					composed: !0
+				}))), setTimeout(() => {
+					let e = t.querySelector("scb-options-menu-item");
+					e && (e.shadowRoot?.querySelector("li"))?.focus();
+				}, 0));
+				return;
+			}
+			if (e.key === "ArrowLeft") {
+				e.preventDefault();
+				let t = this.nextElementSibling;
+				if (t && t.tagName === "SCB-OPTIONS-SUB-MENU" && t.hasAttribute("open")) {
+					this._toggleSubMenu(), t.dispatchEvent(new CustomEvent("hide-submenu", {
+						bubbles: !0,
+						composed: !0
+					})), t.dispatchEvent(new CustomEvent("hidesubmenu", {
+						bubbles: !0,
+						composed: !0
+					}));
+					return;
+				}
+				let n = this.closest("scb-options-sub-menu");
+				if (n) {
+					let e = n.previousElementSibling;
+					e && e.tagName === "SCB-OPTIONS-MENU-ITEM" && (e.shadowRoot?.querySelector("li"))?.focus();
+				}
+				return;
+			}
+		};
+	}
+	static {
+		this.styles = n`
+    :host { 
+      display: block;
+    }
+    :host li{
+      position: relative;
+      list-style: none;
+      padding: var(--scb-options-menu-item-padding-block, var(--spacing-3, 8px)) var(--scb-options-menu-item-padding-inline, var(--spacing-5, 16px));
+      cursor: pointer;
+      min-height: var(--scb-options-menu-item-min-height, 56px);
+      display: flex;
+      gap: var(--scb-options-menu-item-gap, var(--spacing-4, 12px));
+      align-items: center;
+      
+    }
+    :host li .label {
+      font-size: var(--scb-options-menu-label-font-size, var(--md-sys-typescale-body-large-size));
+      line-height: var(--scb-options-menu-label-line-height, var(--md-sys-typescale-body-large-line-height));
+      letter-spacing: var(--scb-options-menu-label-letter-spacing, var(--md-sys-typescale-body-large-tracking));
+    }
+      :host li md-focus-ring {
+        border-radius: var(--md-sys-shape-corner-small);
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 1;
+      }
+      :host li md-icon {
+        --md-icon-size: var(--scb-options-menu-icon-size, 24px);
+      }
+      :host li md-icon.ti {
+        margin-left: auto;
+      }
+    :host li a {
+      display: flex;
+      gap: var(--scb-options-menu-item-gap, var(--spacing-4, 12px));
+      align-items: center;
+      color: var(--md-sys-color-on-surface);
+      text-decoration: none;
+      width: 100%;
+    }
+    :host(.open-submenu) li { 
+      background: var(--md-sys-color-secondary-container); 
+    }
+    :host li:focus {
+      outline: none;
+    }
+  `;
+	}
+	get _effectiveHref() {
+		return this.itemHref || this.href;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._syncSubMenuFlags(), this._subMenuChildObserver ??= new MutationObserver(() => this._syncSubMenuFlags()), this._subMenuChildObserver.disconnect();
+		let e = this.parentElement;
+		e && this._subMenuChildObserver.observe(e, { childList: !0 });
+	}
+	disconnectedCallback() {
+		this._subMenuChildObserver?.disconnect(), this._subMenuAttrObserver?.disconnect(), this._subMenuChildObserver = void 0, this._subMenuAttrObserver = void 0, this._observedSubMenu = null, super.disconnectedCallback();
+	}
+	render() {
+		return r`
+      ${this.divider ? r`<scb-divider></scb-divider>` : ""}
+  <li @click=${this.handleClick} @keydown=${this._onKeyDown} @blur=${this._onBlur} @focus=${this._onFocus} role="menuitem" tabindex="0">
+ 
+
+        <md-focus-ring inward></md-focus-ring>
+        ${this._effectiveHref ? r`<a href="${this._effectiveHref}">
+              ${this.leadingIcon ? r`<md-icon>${this.leadingIcon}</md-icon>` : ""}
+              <div class="label">${this.label}</div>
+              ${this.trailingIcon ? r`<md-icon class="ti">${this.trailingIcon}</md-icon>` : ""}
+              <md-ripple></md-ripple>
+            </a>` : r`
+              ${this.leadingIcon ? r`<md-icon>${this.leadingIcon}</md-icon>` : ""}
+              <div class="label">${this.label}</div>
+              ${this.trailingIcon ? r`<md-icon class="ti">${this.trailingIcon}</md-icon>` : ""}
+              <md-ripple></md-ripple>
+            `}
+      </li>
+    `;
+	}
+	_navigateToHref(e) {
+		let t = this._effectiveHref;
+		if (!t) return;
+		let n = { href: t }, r = !this.dispatchEvent(new CustomEvent("item-navigate", {
+			detail: n,
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		})) || !this.dispatchEvent(new CustomEvent("itemnavigate", {
+			detail: n,
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		}));
+		e.preventDefault(), e.stopPropagation(), r || (window.location.href = t);
+	}
+	_toggleSubMenu() {
+		let e = this.nextElementSibling;
+		e && e.tagName === "SCB-OPTIONS-SUB-MENU" && (this.classList.toggle("open-submenu"), e.hasAttribute("open") ? (e.dispatchEvent(new CustomEvent("hide-submenu", {
+			bubbles: !0,
+			composed: !0
+		})), e.dispatchEvent(new CustomEvent("hidesubmenu", {
+			bubbles: !0,
+			composed: !0
+		}))) : (e.dispatchEvent(new CustomEvent("show-submenu", {
+			bubbles: !0,
+			composed: !0
+		})), e.dispatchEvent(new CustomEvent("showsubmenu", {
+			bubbles: !0,
+			composed: !0
+		}))));
+	}
+};
+e([a({ type: String })], o.prototype, "label", void 0), e([a({ type: Boolean })], o.prototype, "hasSubMenu", void 0), e([a({ type: Boolean })], o.prototype, "openLeft", void 0), e([a({ type: Boolean })], o.prototype, "divider", void 0), e([a({
+	type: String,
+	attribute: "leading-icon"
+})], o.prototype, "leadingIcon", void 0), e([a({
+	type: String,
+	attribute: "trailing-icon"
+})], o.prototype, "trailingIcon", void 0), e([a({
+	type: String,
+	attribute: "item-href"
+})], o.prototype, "itemHref", void 0), e([a({ type: String })], o.prototype, "href", void 0), o = e([i("scb-options-menu-item")], o);
+//#endregion
+export { o as ScbOptionsMenuItem };