scb-wc 0.1.78 → 0.1.80

package/scb-nav/scb-nav.js

@@ -1,13 +1,13 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { addLazyFocusRingListeners as e } from "../shared/lazy-focus-ring.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import "./scb-nav-item.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 { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
 import "@material/web/ripple/ripple.js";
 //#region src/scb-components/scb-nav/scb-nav.ts
-var o = { fromAttribute(e) {
+var s = { fromAttribute(e) {
 	return e === null ? !1 : e.toLowerCase() !== "false";
-} }, s = class extends t {
+} }, c = class extends n {
 	constructor(...e) {
 		super(...e), this.label = "", this.activeHref = "", this.activateOnClick = !0, this.sticky = !1, this.stickyTop = "0px", this.stickyZIndex = 5, this.stickyBackground = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.__autoAriaLabel = !1, this.__itemIdPrefix = `scb-nav-${Math.random().toString(36).slice(2)}`, this.__itemIdCounter = 0, this.__onSlotChange = async () => {
 			await this.__decorateItems(), this.__applyActiveHref();
@@ -33,7 +33,7 @@ var o = { fromAttribute(e) {
 		};
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
       display: block;
       color: var(--md-sys-color-on-surface);
@@ -161,7 +161,10 @@ var o = { fromAttribute(e) {
 		this.style.setProperty("--_scb-nav-sticky-background", r);
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "navigation"), this.__syncStickyStyles(), this.__syncAriaLabel();
+		super.connectedCallback(), this.__removeLazyFocusRingListeners = e(this, this.renderRoot), this.hasAttribute("role") || this.setAttribute("role", "navigation"), this.__syncStickyStyles(), this.__syncAriaLabel();
+	}
+	disconnectedCallback() {
+		this.__removeLazyFocusRingListeners?.(), this.__removeLazyFocusRingListeners = void 0, super.disconnectedCallback();
 	}
 	async firstUpdated() {
 		await this.__decorateItems(), this.__applyActiveHref(), this.__applySpacing();
@@ -216,7 +219,7 @@ var o = { fromAttribute(e) {
 		}
 	}
 	render() {
-		return r`
+		return i`
       <div class="scb-nav">
         <div class="scb-nav__items" @click=${this.__onClick}>
           <slot @slotchange=${this.__onSlotChange}></slot>
@@ -225,44 +228,44 @@ var o = { fromAttribute(e) {
     `;
 	}
 };
-e([a({ type: String })], s.prototype, "label", void 0), e([a({
+t([o({ type: String })], c.prototype, "label", void 0), t([o({
 	type: String,
 	attribute: "active-href"
-})], s.prototype, "activeHref", void 0), e([a({
+})], c.prototype, "activeHref", void 0), t([o({
 	type: Boolean,
 	attribute: "activate-on-click",
-	converter: o
-})], s.prototype, "activateOnClick", void 0), e([a({
+	converter: s
+})], c.prototype, "activateOnClick", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "sticky", void 0), e([a({
+})], c.prototype, "sticky", void 0), t([o({
 	type: String,
 	attribute: "sticky-top"
-})], s.prototype, "stickyTop", void 0), e([a({
+})], c.prototype, "stickyTop", void 0), t([o({
 	type: Number,
 	attribute: "sticky-z-index"
-})], s.prototype, "stickyZIndex", void 0), e([a({
+})], c.prototype, "stickyZIndex", void 0), t([o({
 	type: String,
 	attribute: "sticky-background"
-})], s.prototype, "stickyBackground", void 0), e([a({
+})], c.prototype, "stickyBackground", void 0), t([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "spacing", void 0), e([a({
+})], c.prototype, "spacing", void 0), t([o({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0
-})], s.prototype, "spacingTop", void 0), e([a({
+})], c.prototype, "spacingTop", void 0), t([o({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0
-})], s.prototype, "spacingBottom", void 0), e([a({
+})], c.prototype, "spacingBottom", void 0), t([o({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0
-})], s.prototype, "spacingLeft", void 0), e([a({
+})], c.prototype, "spacingLeft", void 0), t([o({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0
-})], s.prototype, "spacingRight", void 0), s = e([i("scb-nav")], s);
+})], c.prototype, "spacingRight", void 0), c = t([a("scb-nav")], c);
 //#endregion
-export { s as ScbNav };
+export { c as ScbNav };

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

@@ -2,7 +2,6 @@ import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpe
 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, state as o } from "lit/decorators.js";
-import "@material/web/focus/md-focus-ring.js";
 import "@material/web/icon/icon.js";
 //#region src/scb-components/scb-notification-card/scb-notification-card.ts
 var s = {
@@ -472,7 +471,6 @@ var s = {
               </div>
             ` : null}
       </div>
-      <md-focus-ring></md-focus-ring>
     `;
 	}
 };

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

@@ -1,12 +1,12 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { ensureFocusRingOnFocusVisible as e } from "../shared/lazy-focus-ring.js";
+import { __decorate as t } 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 { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
 //#region src/scb-components/scb-options-menu/scb-options-menu-item.ts
-var o = class extends t {
+var s = class extends n {
 	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"));
@@ -90,7 +90,7 @@ var o = class extends t {
 		};
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host { 
       display: block;
     }
@@ -151,21 +151,21 @@ var o = class extends t {
 		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">
+		return i`
+      ${this.divider ? i`<scb-divider></scb-divider>` : ""}
+  <li @click=${this.handleClick} @keydown=${this._onKeyDown} @blur=${this._onBlur} @focus=${this._onFocus} @focusin=${e} 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>` : ""}
+        ${this._effectiveHref ? i`<a href="${this._effectiveHref}">
+              ${this.leadingIcon ? i`<md-icon>${this.leadingIcon}</md-icon>` : ""}
               <div class="label">${this.label}</div>
-              ${this.trailingIcon ? r`<md-icon class="ti">${this.trailingIcon}</md-icon>` : ""}
+              ${this.trailingIcon ? i`<md-icon class="ti">${this.trailingIcon}</md-icon>` : ""}
               <md-ripple></md-ripple>
-            </a>` : r`
-              ${this.leadingIcon ? r`<md-icon>${this.leadingIcon}</md-icon>` : ""}
+            </a>` : i`
+              ${this.leadingIcon ? i`<md-icon>${this.leadingIcon}</md-icon>` : ""}
               <div class="label">${this.label}</div>
-              ${this.trailingIcon ? r`<md-icon class="ti">${this.trailingIcon}</md-icon>` : ""}
+              ${this.trailingIcon ? i`<md-icon class="ti">${this.trailingIcon}</md-icon>` : ""}
               <md-ripple></md-ripple>
             `}
       </li>
@@ -204,15 +204,15 @@ var o = class extends t {
 		}))));
 	}
 };
-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({
+t([o({ type: String })], s.prototype, "label", void 0), t([o({ type: Boolean })], s.prototype, "hasSubMenu", void 0), t([o({ type: Boolean })], s.prototype, "openLeft", void 0), t([o({ type: Boolean })], s.prototype, "divider", void 0), t([o({
 	type: String,
 	attribute: "leading-icon"
-})], o.prototype, "leadingIcon", void 0), e([a({
+})], s.prototype, "leadingIcon", void 0), t([o({
 	type: String,
 	attribute: "trailing-icon"
-})], o.prototype, "trailingIcon", void 0), e([a({
+})], s.prototype, "trailingIcon", void 0), t([o({
 	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);
+})], s.prototype, "itemHref", void 0), t([o({ type: String })], s.prototype, "href", void 0), s = t([a("scb-options-menu-item")], s);
 //#endregion
-export { o as ScbOptionsMenuItem };
+export { s as ScbOptionsMenuItem };

package/scb-pagination/scb-pagination.js

@@ -4,7 +4,6 @@ import "../scb-icon-button/scb-icon-button.js";
 import "../scb-link/scb-link.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-components/scb-pagination/scb-pagination.ts
 var o = class extends t {

package/scb-progress-stepper/scb-progress-step.js

@@ -1,15 +1,15 @@
-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, state as o } from "lit/decorators.js";
-import "@material/web/focus/md-focus-ring.js";
+import { ensureFocusRingOnFocusVisible as e } from "../shared/lazy-focus-ring.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
 import "@material/web/ripple/ripple.js";
 //#region src/scb-components/scb-progress-stepper/scb-progress-step.ts
-var s = class extends t {
+var c = class extends n {
 	constructor(...e) {
 		super(...e), this.width = "100%", this.active = !1, this.disabled = !1, this.href = "", this.label = "", this.position = "top", this._stepId = `scb-step-${Math.random().toString(36).slice(2)}`;
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
       display: block;
       width: var(--progress-step-width, 100%);
@@ -169,45 +169,47 @@ var s = class extends t {
 		t.right > window.innerWidth - 8 && (e.style.left = "auto", e.style.right = "8px", e.style.transform = "none", e.classList.add("tooltip-right")), t.left < 8 && (e.style.left = "8px", e.style.right = "auto", e.style.transform = "none", e.classList.add("tooltip-left"));
 	}
 	render() {
-		return r`
-      ${this.href && !this.disabled ? r`
+		return i`
+      ${this.href && !this.disabled ? i`
             <a
               id=${this._stepId}
               class="progress-step"
               href=${this.href}
               @click=${this._onClick}
+              @focusin=${e}
               tabindex="0"
               role="link"
               aria-disabled="false"
             >
               <md-ripple></md-ripple>
             </a>
-          ` : r`
+          ` : i`
             <div
               id=${this._stepId}
               class="progress-step"
               @click=${this._onClick}
+              @focusin=${e}
               tabindex=${this.disabled ? -1 : 0}
               role="button"
               aria-disabled=${this.disabled ? "true" : "false"}
             >
-              ${this.disabled ? "" : r`<md-ripple></md-ripple>`}
+              ${this.disabled ? "" : i`<md-ripple></md-ripple>`}
             </div>
           `}
-      ${this.disabled ? "" : r`<md-focus-ring for="${this._stepId}"></md-focus-ring>`}
-      ${this.label && !this.disabled ? r`<div class="tooltip ${this.position === "bottom" ? "bottom" : "top"}">${this.label}</div>` : ""}
+      ${this.disabled ? "" : i`<md-focus-ring for="${this._stepId}"></md-focus-ring>`}
+      ${this.label && !this.disabled ? i`<div class="tooltip ${this.position === "bottom" ? "bottom" : "top"}">${this.label}</div>` : ""}
     `;
 	}
 };
-e([a({ type: String })], s.prototype, "width", void 0), e([a({
+t([o({ type: String })], c.prototype, "width", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "active", void 0), e([a({
+})], c.prototype, "active", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "disabled", void 0), e([a({
+})], c.prototype, "disabled", void 0), t([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "href", void 0), e([a({ type: String })], s.prototype, "label", void 0), e([a({ type: String })], s.prototype, "position", void 0), e([o()], s.prototype, "_stepId", void 0), s = e([i("scb-progress-step")], s);
+})], c.prototype, "href", void 0), t([o({ type: String })], c.prototype, "label", void 0), t([o({ type: String })], c.prototype, "position", void 0), t([s()], c.prototype, "_stepId", void 0), c = t([a("scb-progress-step")], c);
 //#endregion
-export { s as ScbProgressStep };
+export { c as ScbProgressStep };

package/scb-radio-button/scb-radio-button.js

@@ -2,7 +2,6 @@ import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpe
 import "./scb-radio-group.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";
-import "@material/web/focus/md-focus-ring.js";
 import "@material/web/radio/radio.js";
 //#region src/scb-components/scb-radio-button/scb-radio-button.ts
 var s = !1, c = 0, l = (e) => {

package/scb-search/scb-search.js

@@ -1,11 +1,11 @@
-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, nothing as i } from "lit";
-import { customElement as a, property as o, state as s } from "lit/decorators.js";
-import "@material/web/focus/md-focus-ring.js";
+import { ensureFocusRingReady as e } from "../shared/lazy-focus-ring.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as n, css as r, html as i, nothing as a } from "lit";
+import { customElement as o, property as s, state as c } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
 //#region src/scb-components/scb-search/scb-search.ts
-var c = 0, l = class extends t {
+var l = 0, u = class extends n {
 	static {
 		this.formAssociated = !0;
 	}
@@ -19,8 +19,8 @@ var c = 0, l = class extends t {
 		!this._inputFocused || !e || !this._hasSuggestions || this._ensureListDepsLoaded().then(() => this.requestUpdate());
 	}
 	constructor() {
-		super(), this._internals = null, this.supportingText = "", this.value = "", this.name = "", this.disabled = !1, this.required = !1, this.autocomplete = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.size = "large", this.fullScreen = !1, this._inputFocused = !1, this._visibleSuggestions = 0, this._listDepsLoaded = !1, this._activeIndex = -1, this._listboxId = `scb-search-listbox-${++c}`, this._kbMode = !1, this._valueOnFocus = "", this._lastChangeValue = "", this._kbShouldShowRing = !1, this._onGlobalKeydown = (e) => {
-			e.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && this._updateInputRingVisibility());
+		super(), this._internals = null, this.supportingText = "", this.value = "", this.name = "", this.disabled = !1, this.required = !1, this.autocomplete = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.size = "large", this.fullScreen = !1, this._inputFocused = !1, this._visibleSuggestions = 0, this._listDepsLoaded = !1, this._activeIndex = -1, this._listboxId = `scb-search-listbox-${++l}`, this._kbMode = !1, this._valueOnFocus = "", this._lastChangeValue = "", this._kbShouldShowRing = !1, this._onGlobalKeydown = (t) => {
+			t.key === "Tab" && (e(), this._kbShouldShowRing = !0, this._inputFocused && this._updateInputRingVisibility());
 		}, this._onGlobalPointerDown = () => {
 			this._kbShouldShowRing = !1, this._inputFocused && this._updateInputRingVisibility();
 		}, this._form = null, this._formResetHandler = null, this._formSubmitHandler = null, this._initialValue = "", this._customValidationMessage = "", this._listScrollHandler = () => {
@@ -29,7 +29,7 @@ var c = 0, l = class extends t {
 		}, "attachInternals" in this && (this._internals = this.attachInternals());
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
       display: flex;
       flex-direction: column;
@@ -236,6 +236,7 @@ var c = 0, l = class extends t {
     }
 
     scb-list.suggestion-list {
+      --scb-list-container-padding-block: 0px;
       position: absolute;
       top: 100%;
       left: 0;
@@ -310,7 +311,7 @@ var c = 0, l = class extends t {
 	}
 	render() {
 		let e = (this.value ?? "").trim().length > 0, t = this._inputFocused && e && this._hasSuggestions && this._listDepsLoaded;
-		return r`
+		return i`
       <div class="ripple-wrapper">
         <md-icon class="leading">${e ? "arrow_back" : "search"}</md-icon>
 
@@ -330,7 +331,7 @@ var c = 0, l = class extends t {
           aria-label=${this.supportingText || "Sök"}
         />
 
-        ${e ? r`<button
+        ${e ? i`<button
               class="clear-btn"
               type="button"
               ?disabled=${this.disabled}
@@ -339,7 +340,7 @@ var c = 0, l = class extends t {
               aria-label="Rensa sökfält"
             >
               <md-icon>close</md-icon>
-            </button>` : this.trailingIcon ? r`<span class="trailing"><md-icon>${this.trailingIcon}</md-icon></span>` : i}
+            </button>` : this.trailingIcon ? i`<span class="trailing"><md-icon>${this.trailingIcon}</md-icon></span>` : a}
 
         <md-ripple></md-ripple>
         <md-focus-ring class="input-ring"></md-focus-ring>
@@ -347,12 +348,12 @@ var c = 0, l = class extends t {
 
       <div class="list-divider" aria-hidden=${String(!(this.fullScreen && t))}></div>
 
-      ${t ? r`
+      ${t ? i`
             <scb-list class="suggestion-list" id=${this._listboxId}>
               <slot @slotchange=${this._onSlotChange}></slot>
             </scb-list>
             <md-focus-ring id="optionRing" class="option-ring"></md-focus-ring>
-          ` : i}
+          ` : a}
     `;
 	}
 	formDisabledCallback(e) {
@@ -613,50 +614,50 @@ var c = 0, l = class extends t {
 		this._internals.setFormValue(e);
 	}
 };
-e([o({
+t([s({
 	type: String,
 	attribute: "trailing-icon"
-})], l.prototype, "trailingIcon", void 0), e([o({
+})], u.prototype, "trailingIcon", void 0), t([s({
 	type: String,
 	attribute: "supporting-text"
-})], l.prototype, "supportingText", void 0), e([o({ type: String })], l.prototype, "value", void 0), e([o({
+})], u.prototype, "supportingText", void 0), t([s({ type: String })], u.prototype, "value", void 0), t([s({
 	type: String,
 	reflect: !0
-})], l.prototype, "name", void 0), e([o({
+})], u.prototype, "name", void 0), t([s({
 	type: Boolean,
 	reflect: !0
-})], l.prototype, "disabled", void 0), e([o({
+})], u.prototype, "disabled", void 0), t([s({
 	type: Boolean,
 	reflect: !0
-})], l.prototype, "required", void 0), e([o({
+})], u.prototype, "required", void 0), t([s({
 	type: Boolean,
 	reflect: !0
-})], l.prototype, "autocomplete", void 0), e([o({
+})], u.prototype, "autocomplete", void 0), t([s({
 	type: String,
 	reflect: !0
-})], l.prototype, "spacing", void 0), e([o({
+})], u.prototype, "spacing", void 0), t([s({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0
-})], l.prototype, "spacingTop", void 0), e([o({
+})], u.prototype, "spacingTop", void 0), t([s({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0
-})], l.prototype, "spacingBottom", void 0), e([o({
+})], u.prototype, "spacingBottom", void 0), t([s({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0
-})], l.prototype, "spacingLeft", void 0), e([o({
+})], u.prototype, "spacingLeft", void 0), t([s({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0
-})], l.prototype, "spacingRight", void 0), e([o({
+})], u.prototype, "spacingRight", void 0), t([s({
 	type: String,
 	reflect: !0
-})], l.prototype, "size", void 0), e([o({
+})], u.prototype, "size", void 0), t([s({
 	type: Boolean,
 	attribute: "full-screen",
 	reflect: !0
-})], l.prototype, "fullScreen", void 0), e([s()], l.prototype, "_listDepsLoaded", void 0), l = e([a("scb-search")], l);
+})], u.prototype, "fullScreen", void 0), t([c()], u.prototype, "_listDepsLoaded", void 0), u = t([o("scb-search")], u);
 //#endregion
-export { l as ScbSearch };
+export { u as ScbSearch };

package/scb-segmented-button/scb-segmented-item.js

@@ -1,11 +1,11 @@
-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";
-import "@material/web/focus/md-focus-ring.js";
+import { ensureFocusRingOnFocusVisible as e } from "../shared/lazy-focus-ring.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
 //#region src/scb-components/scb-segmented-button/scb-segmented-item.ts
-var o = class extends t {
+var s = class extends n {
 	constructor(...e) {
 		super(...e), this.label = "", this.value = "", this.selected = !1, this.icon = "", this.href = "", this.disabled = !1, this.onHostKeydown = (e) => {
 			if (!this.href || this.isEffectivelyDisabled || e.code !== "Space" && e.code !== "Enter" && e.code !== "NumpadEnter") return;
@@ -20,8 +20,11 @@ var o = class extends t {
 	get hasDefaultSlotContent() {
 		return Array.from(this.childNodes).some((e) => e.nodeType === 1 ? !0 : e.nodeType === 3 ? (e.textContent ?? "").trim() !== "" : !1);
 	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("focusin", e);
+	}
 	static {
-		this.styles = n`
+		this.styles = r`
     .segmented-item {
         display: flex;
         gap: var(--spacing-3);
@@ -92,13 +95,13 @@ var o = class extends t {
   `;
 	}
 	render() {
-		let e = this.isEffectivelyDisabled, t = !!this.icon, n = !!this.label || this.hasDefaultSlotContent, i = this.label ? r`${this.label}` : r`<slot></slot>`, a = `segmented-item${t || this.selected ? " has-icon" : ""}${n ? "" : " no-label"}`, o = r`
+		let e = this.isEffectivelyDisabled, t = !!this.icon, n = !!this.label || this.hasDefaultSlotContent, r = this.label ? i`${this.label}` : i`<slot></slot>`, a = `segmented-item${t || this.selected ? " has-icon" : ""}${n ? "" : " no-label"}`, o = i`
       <md-ripple ?disabled="${e}"></md-ripple>
-      ${this.selected ? t && n ? r`<md-icon>check</md-icon>` : t ? r`<md-icon>check</md-icon><md-icon>${this.icon}</md-icon>` : r`<md-icon>check</md-icon>` : t ? r`<md-icon>${this.icon}</md-icon>` : ""}
-      ${n ? r`<span>${i}</span>` : ""}
+      ${this.selected ? t && n ? i`<md-icon>check</md-icon>` : t ? i`<md-icon>check</md-icon><md-icon>${this.icon}</md-icon>` : i`<md-icon>check</md-icon>` : t ? i`<md-icon>${this.icon}</md-icon>` : ""}
+      ${n ? i`<span>${r}</span>` : ""}
       <md-focus-ring inward></md-focus-ring>
     `;
-		return this.href ? r`<a class="${a}" href="${this.href}" aria-disabled="${e ? "true" : "false"}" tabindex="-1">${o}</a>` : r`<div class="${a}" aria-disabled="${e ? "true" : "false"}">${o}</div>`;
+		return this.href ? i`<a class="${a}" href="${this.href}" aria-disabled="${e ? "true" : "false"}" tabindex="-1">${o}</a>` : i`<div class="${a}" aria-disabled="${e ? "true" : "false"}">${o}</div>`;
 	}
 	updateInteractiveAttributes() {
 		this.setAttribute("tabindex", this.disabled ? "-1" : "0"), this.setAttribute("role", this.href ? "link" : "button");
@@ -107,30 +110,30 @@ var o = class extends t {
 		this.addEventListener("keydown", this.onHostKeydown), this.updateInteractiveAttributes();
 	}
 	disconnectedCallback() {
-		this.removeEventListener("keydown", this.onHostKeydown), super.disconnectedCallback();
+		this.removeEventListener("focusin", e), this.removeEventListener("keydown", this.onHostKeydown), super.disconnectedCallback();
 	}
 	updated(e) {
 		super.updated(e), (e.has("disabled") || e.has("href")) && this.updateInteractiveAttributes();
 	}
 };
-e([a({
+t([o({
 	type: String,
 	reflect: !0
-})], o.prototype, "label", void 0), e([a({
+})], s.prototype, "label", void 0), t([o({
 	type: String,
 	reflect: !0
-})], o.prototype, "value", void 0), e([a({
+})], s.prototype, "value", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], o.prototype, "selected", void 0), e([a({
+})], s.prototype, "selected", void 0), t([o({
 	type: String,
 	reflect: !0
-})], o.prototype, "icon", void 0), e([a({
+})], s.prototype, "icon", void 0), t([o({
 	type: String,
 	reflect: !0
-})], o.prototype, "href", void 0), e([a({
+})], s.prototype, "href", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], o.prototype, "disabled", void 0), o = e([i("scb-segmented-item")], o);
+})], s.prototype, "disabled", void 0), s = t([a("scb-segmented-item")], s);
 //#endregion
-export { o as ScbSegmentedItem };
+export { s as ScbSegmentedItem };

package/scb-select/scb-select-option.js

@@ -1,16 +1,22 @@
-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";
-import "@material/web/focus/md-focus-ring.js";
+import { ensureFocusRingOnFocusVisible as e } from "../shared/lazy-focus-ring.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
 //#region src/scb-components/scb-select/scb-select-option.ts
-var o = class extends t {
+var s = class extends n {
 	constructor(...e) {
 		super(...e), this.value = "", this.disabled = !1, this.showCheckbox = !1, this.checked = !1, this.showRadio = !1, this.label = "", this.noHighlightSelected = !1;
 	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("focusin", e);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("focusin", e), super.disconnectedCallback();
+	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
       display: block;
       outline: none;
@@ -65,24 +71,24 @@ var o = class extends t {
   `;
 	}
 	render() {
-		return r`
+		return i`
       <div class="item ${this.checked ? "checked" : ""}" ?aria-disabled=${this.disabled}>
         <md-ripple></md-ripple>
-        ${this.showCheckbox ? r`<md-icon class="${this.checked ? "checkbox-checked" : ""}" aria-hidden="true">${this.checked ? "check_box" : "check_box_outline_blank"}</md-icon>` : null}
-        ${this.showRadio ? r`<md-icon class="${this.checked ? "radio-checked" : ""}" aria-hidden="true">${this.checked ? "radio_button_checked" : "radio_button_unchecked"}</md-icon>` : null}
-        <div class="label">${this.label ? this.label : r`<slot></slot>`}</div>
+        ${this.showCheckbox ? i`<md-icon class="${this.checked ? "checkbox-checked" : ""}" aria-hidden="true">${this.checked ? "check_box" : "check_box_outline_blank"}</md-icon>` : null}
+        ${this.showRadio ? i`<md-icon class="${this.checked ? "radio-checked" : ""}" aria-hidden="true">${this.checked ? "radio_button_checked" : "radio_button_unchecked"}</md-icon>` : null}
+        <div class="label">${this.label ? this.label : i`<slot></slot>`}</div>
         <md-focus-ring inward></md-focus-ring>
       </div>
     `;
 	}
 };
-e([a({ type: String })], o.prototype, "value", void 0), e([a({
+t([o({ type: String })], s.prototype, "value", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], o.prototype, "disabled", void 0), e([a({ type: Boolean })], o.prototype, "showCheckbox", void 0), e([a({ type: Boolean })], o.prototype, "checked", void 0), e([a({ type: Boolean })], o.prototype, "showRadio", void 0), e([a({ type: String })], o.prototype, "label", void 0), e([a({
+})], s.prototype, "disabled", void 0), t([o({ type: Boolean })], s.prototype, "showCheckbox", void 0), t([o({ type: Boolean })], s.prototype, "checked", void 0), t([o({ type: Boolean })], s.prototype, "showRadio", void 0), t([o({ type: String })], s.prototype, "label", void 0), t([o({
 	type: Boolean,
 	attribute: "no-highlight-selected",
 	reflect: !0
-})], o.prototype, "noHighlightSelected", void 0), o = e([i("scb-select-option")], o);
+})], s.prototype, "noHighlightSelected", void 0), s = t([a("scb-select-option")], s);
 //#endregion
-export { o as ScbSelectOption };
+export { s as ScbSelectOption };