scb-wc 0.1.78 → 0.1.80

package/scb-header/scb-header.js

@@ -6,7 +6,7 @@ var c, l = 0;
 (() => {
 	if (typeof window > "u" || typeof document > "u" || !("customElements" in window) || document.head.querySelector("style[data-scb-header-pre-upgrade]")) return;
 	let e = document.createElement("style");
-	e.setAttribute("data-scb-header-pre-upgrade", ""), e.textContent = "\n    scb-header:not(:defined),\n    scb-header[data-upgrading] {\n      display: block;\n      margin-block-start: var(--scb-header-spacing-block-start, 0);\n      margin-block-end: var(--scb-header-spacing-block-end, 0);\n      background: var(--scb-header-background, transparent);\n      color: var(--md-sys-color-on-surface, #1b1b1f);\n\n      --scb-header-pre-logo-w: var(--icon-size-extra-extra-large, 48px);\n      --scb-header-pre-logo-h: var(\n        --scb-header-pre-logo-img-h,\n        calc(var(--scb-header-pre-logo-w) * 1.125)\n      );\n\n      --scb-header-pre-top-row: calc(\n        (var(--spacing-5, 16px) * 2) +\n          max(\n            calc(var(--scb-header-pre-logo-h) + var(--spacing-2, 4px)),\n            var(--scb-header-pre-control-size, 48px)\n          )\n      );\n      --scb-header-pre-divider: var(--stroke-border, 1px);\n      --scb-header-pre-tabs-row: var(--spacing-10, 40px);\n      --scb-header-pre-block-size: calc(\n        var(--scb-header-pre-top-row) + var(--scb-header-pre-divider)\n      );\n\n      min-block-size: var(--scb-header-pre-block-size);\n      visibility: hidden;\n    }\n\n    scb-header:not(:defined) > *,\n    scb-header[data-upgrading] > * {\n      display: none;\n    }\n\n    @media (min-width: 840px) {\n      scb-header:not(:defined)[data-pre-has-tabs],\n      scb-header:not(:defined)[reserve-tabs],\n      scb-header:not(:defined)[layout-pending],\n      scb-header[data-upgrading][data-pre-has-tabs],\n      scb-header[data-upgrading][reserve-tabs],\n      scb-header[data-upgrading][layout-pending] {\n        --scb-header-pre-block-size: calc(\n          var(--scb-header-pre-top-row) +\n            var(--scb-header-pre-tabs-row) +\n            var(--scb-header-pre-divider)\n        );\n      }\n    }\n  ", document.head.appendChild(e);
+	e.setAttribute("data-scb-header-pre-upgrade", ""), e.textContent = "\n    scb-header:not(:defined),\n    scb-header[data-upgrading] {\n      display: block;\n      margin-block-start: var(--scb-header-spacing-block-start, 0);\n      margin-block-end: var(--scb-header-spacing-block-end, 0);\n      background: var(--scb-header-background, transparent);\n      color: var(--md-sys-color-on-surface, #1b1b1f);\n\n      --scb-header-pre-logo-w: var(--icon-size-extra-extra-large, 48px);\n      --scb-header-pre-logo-h: var(\n        --scb-header-pre-logo-img-h,\n        calc(var(--scb-header-pre-logo-w) * 1.125)\n      );\n\n      --scb-header-pre-top-row: calc(\n        (var(--spacing-5, 16px) * 2) +\n          max(\n            calc(var(--scb-header-pre-logo-h) + var(--spacing-2, 4px)),\n            var(--scb-header-pre-control-size, 48px)\n          )\n      );\n      --scb-header-pre-divider: var(--stroke-border, 1px);\n      --scb-header-pre-tabs-row: var(--spacing-10, 40px);\n      --scb-header-pre-block-size: calc(\n        var(--scb-header-pre-top-row) + var(--scb-header-pre-divider) +\n          var(--spacing-2, 4px)\n      );\n\n      min-block-size: var(--scb-header-pre-block-size);\n      visibility: hidden;\n    }\n\n    scb-header:not(:defined) > *,\n    scb-header[data-upgrading] > * {\n      display: none;\n    }\n\n    @media (min-width: 840px) {\n      scb-header:not(:defined)[data-pre-has-tabs],\n      scb-header:not(:defined)[reserve-tabs],\n      scb-header:not(:defined)[layout-pending],\n      scb-header[data-upgrading][data-pre-has-tabs],\n      scb-header[data-upgrading][reserve-tabs],\n      scb-header[data-upgrading][layout-pending] {\n        --scb-header-pre-block-size: calc(\n          var(--scb-header-pre-top-row) +\n            var(--scb-header-pre-tabs-row) +\n            var(--scb-header-pre-divider) +\n            var(--spacing-2, 4px)\n        );\n      }\n    }\n  ", document.head.appendChild(e);
 	let t = (e) => {
 		let t = String(e ?? "").trim();
 		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
@@ -1130,6 +1130,7 @@ var u = {
     .header-symbol {
       display: inline-block;
       inline-size: 1em;
+      block-size: 1em;
       overflow: hidden;
       font-family: 'Material Symbols Outlined';
       font-size: var(--icon-size-medium, 24px);
@@ -1144,6 +1145,10 @@ var u = {
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
+    .header-symbol.scb-svg-icon {
+      fill: currentColor;
+      font: inherit;
+    }
 
     .header-search-icon.header-symbol {
       display: inline-flex;
@@ -1401,13 +1406,18 @@ var u = {
 		e && (e.open = !0);
 	}
 	_ensureFocusRingReady() {
-		customElements.get("md-focus-ring") || (this._focusRingImportPromise ??= import("@material/web/focus/md-focus-ring.js").then(() => void 0), this._focusRingImportPromise);
+		customElements.get("md-focus-ring") || (this._focusRingImportPromise ??= import("../shared/lazy-focus-ring.js"), this._focusRingImportPromise.then(({ ensureFocusRingReady: e }) => {
+			e();
+		}));
 	}
 	async _ensureDrawerReady() {
 		this._drawerReady || (this._drawerImportPromise ??= Promise.all([
 			import("../scb-drawer/scb-drawer.js"),
 			import("../scb-menu/scb-menu.js"),
 			import("../scb-search/scb-search.js"),
+			import("./scb-header-drawer.internal.js").then((e) => {
+				this._drawerRenderer = e;
+			}),
 			this._ensureDrawerSlotComponentsReady()
 		]).then(() => void 0), await this._drawerImportPromise, this._drawerReady = !0, this._syncDrawerCloseNodes());
 	}
@@ -1473,29 +1483,6 @@ var u = {
 			this.renderRoot.querySelector(`.tab-link[data-index="${e}"]`)?.focus?.();
 		}
 	}
-	_renderMenuNodes(e) {
-		return !e || e.length === 0 ? r`` : r`${e.map((e) => this._renderMenuNode(e))}`;
-	}
-	_renderMenuNode(e) {
-		let t = Array.isArray(e.children) && e.children.length > 0, n = (e.href ?? "").trim(), a = (e.icon ?? "").trim(), o = t ? r`
-          <scb-sub-menu label=${e.label}>
-            ${e.children.map((e) => this._renderMenuNode(e))}
-          </scb-sub-menu>
-        ` : i;
-		return a && n ? r`
-        <scb-menu-item label=${e.label} ?selected=${!1} leading-icon=${a} item-href=${n}>
-          ${o}
-        </scb-menu-item>
-      ` : a ? r`
-        <scb-menu-item label=${e.label} ?selected=${!1} leading-icon=${a}>
-          ${o}
-        </scb-menu-item>
-      ` : n ? r`
-        <scb-menu-item label=${e.label} ?selected=${!1} item-href=${n}>
-          ${o}
-        </scb-menu-item>
-      ` : r`<scb-menu-item label=${e.label} ?selected=${!1}>${o}</scb-menu-item>`;
-	}
 	_syncFlags(e, t) {
 		this.toggleAttribute("data-no-utility", e), this.toggleAttribute("data-no-search", t);
 	}
@@ -1612,7 +1599,7 @@ var u = {
 	render() {
 		let e = this._getNavItems(), t = this._slotUtils.length ? this._slotUtils : this.utilityItems, n = this._slotMenu.length ? this._slotMenu : this.menuData ?? [], a = this.logoText || this.logotypeText, o = this.logoAlt || a || "Gå till startsidan", s = this.querySelector("[slot=\"drawer-menu\"]") !== null, c = this.querySelector("[slot=\"drawer-close\"]") !== null;
 		this._syncFlags(t.length === 0, !this.showSearch);
-		let l = this.searchHeight && this.searchHeight.trim() ? `--scb-search-height:${this.searchHeight.trim()}` : "", u = e.length > 0 || this.reserveTabs || this.layoutPending, d = (this.reserveTabs || this.layoutPending) && (this.layoutPending || e.length === 0), f = this.showDrawer && (!this.deferDrawer || this._drawerReady), p = typeof window < "u" && window.innerWidth >= this.BP_MD, m = this.showDrawer && (p ? this.alwaysShowMenuButton || this._collapsed : !0), h = m && !p, g = m && p, _ = (this.searchButtonLabel ?? "").trim() || "Sök", v = this.showSearch && !this._mobileSearchOpen;
+		let l = this.searchHeight && this.searchHeight.trim() ? `--scb-search-height:${this.searchHeight.trim()}` : "", u = e.length > 0 || this.reserveTabs || this.layoutPending, d = (this.reserveTabs || this.layoutPending) && (this.layoutPending || e.length === 0), f = this._drawerRenderer, p = this.showDrawer && this._drawerReady && f, m = typeof window < "u" && window.innerWidth >= this.BP_MD, h = this.showDrawer && (m ? this.alwaysShowMenuButton || this._collapsed : !0), g = h && !m, _ = h && m, v = (this.searchButtonLabel ?? "").trim() || "Sök", y = this.showSearch && !this._mobileSearchOpen;
 		return r`
       <slot
         id="data-slot"
@@ -1658,27 +1645,27 @@ var u = {
 
                 ${this.showSearch ? r`
                       <div class="search" style=${l}>
-                        ${this._renderSearchForm(_, l)}
+                        ${this._renderSearchForm(v, l)}
                       </div>
                     ` : i}
-                ${v ? r`
+                ${y ? r`
                       <button
                         type="button"
                         class="mobile-search-trigger header-icon-button"
-                        aria-label=${_}
-                        title=${_}
+                        aria-label=${v}
+                        title=${v}
                         @click=${this._onMobileSearchToggle}
                       >
                         <span class="header-symbol" aria-hidden="true">search</span>
                         <md-focus-ring aria-hidden="true"></md-focus-ring>
                       </button>
                     ` : i}
-                ${h ? this._renderMenuButton("", !0) : i}
+                ${g ? this._renderMenuButton("", !0) : i}
               </div>
 
               ${this.showSearch && this._mobileSearchOpen ? r`
                     <div class="mobile-search-panel" style=${l}>
-                      ${this._renderSearchForm(_, l, !1, !0)}
+                      ${this._renderSearchForm(v, l, !1, !0)}
                       <button
                         type="button"
                         class="mobile-search-close header-icon-button"
@@ -1696,7 +1683,7 @@ var u = {
           </div>
 
           <div class="header-grid-item">
-            <div class=${u || g ? "tabs-row" : "tabs-row tabs-row--empty"}>
+            <div class=${u || _ ? "tabs-row" : "tabs-row tabs-row--empty"}>
               ${u ? d ? r`
                       <div class="tabs-inset">
                         <div class="tabs-nav tabs-nav--skeleton" aria-hidden="true">
@@ -1746,68 +1733,33 @@ var u = {
                         </div>
                       ` : i : i}
 
-              ${g ? this._renderMenuButton("menu-trigger--tabs-right") : i}
+              ${_ ? this._renderMenuButton("menu-trigger--tabs-right") : i}
             </div>
           </div>
         </div>
         <div class="divider" role="presentation"></div>
       </div>
 
-      ${f ? r`
-            <scb-drawer
-              id=${this._drawerId}
-              floating
-              right
-              ?overlay=${this.drawerOverlay}
-              ?lock-scroll=${this.drawerOverlay}
-              ?modal=${this.drawerOverlay}
-              style="--scb-drawer-padding: 0px;"
-              @scb-drawer-opened=${this._onDrawerOpened}
-              @scb-drawer-closed=${this._onDrawerClosed}
-              @scb-menu-select=${this._onMenuSelect}
-            >
-              ${c ? r`
-                    <div class="drawer-close">
-                      <slot
-                        name="drawer-close"
-                        @slotchange=${this._ensureDrawerSlotComponentsReady}
-                      ></slot>
-                    </div>
-                  ` : i}
-
-              <slot name="drawer-menu" @slotchange=${this._ensureDrawerSlotComponentsReady}></slot>
-
-              ${s ? i : r`
-                    <scb-menu
-              .label=${this.menuLabel ?? ""}
-              .subLabel=${this.menuSubLabel ?? ""}
-              >
-              <scb-search
-                  .size=${this.size}
-                  .supportingText=${this.menuSearchPlaceholder ?? ""}
-              ></scb-search>
-
-              ${this.menuSectionLabel ? r`
-                    <scb-menu-section
-                      .label=${this.menuSectionLabel}
-                    ></scb-menu-section>
-                  ` : i}
-
-              ${this._renderMenuNodes(n)}
-
-              ${this.includeUtilityInMenu && (t?.length ?? 0) > 0 ? r`
-                    <scb-menu-section label=''></scb-menu-section>
-                    ${t.map((e) => r`
-                        <scb-menu-item
-                          label=${e.label}
-                          item-href=${e.href}
-                        ></scb-menu-item>
-                      `)}
-                  ` : i}
-            </scb-menu>
-                  `}
-            </scb-drawer>
-          ` : i}
+      ${p ? f.renderHeaderDrawer({
+			drawerId: this._drawerId,
+			drawerOverlay: this.drawerOverlay,
+			size: this.size,
+			menuLabel: this.menuLabel,
+			menuSubLabel: this.menuSubLabel,
+			menuSearchPlaceholder: this.menuSearchPlaceholder,
+			menuSectionLabel: this.menuSectionLabel,
+			includeUtilityInMenu: this.includeUtilityInMenu,
+			menu: n,
+			utils: t,
+			hasDrawerCloseSlot: c,
+			hasDrawerMenuSlot: s,
+			onDrawerOpened: this._onDrawerOpened,
+			onDrawerClosed: this._onDrawerClosed,
+			onMenuSelect: this._onMenuSelect,
+			onDrawerSlotChange: () => {
+				this._ensureDrawerSlotComponentsReady();
+			}
+		}) : i}
     `;
 	}
 	_renderTabSkeletons() {

package/scb-horizontal-scroller/scb-horizontal-scroller.js

@@ -1,22 +1,32 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
-import "../scb-button/scb-button.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, state as o } from "lit/decorators.js";
-import "@material/web/focus/md-focus-ring.js";
+import { renderScbIcon as t } from "../shared/scb-icon-svg.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";
 //#region src/scb-components/scb-horizontal-scroller/scb-horizontal-scroller.ts
-var s = class extends t {
+var c;
+function l() {
+	return c ??= import("../shared/lazy-focus-ring.js"), c;
+}
+var u = class extends n {
 	constructor(...e) {
-		super(...e), this.variant = "standard", this.width = "100%", this.showScrollbar = !1, this.rightScrollButtonLabel = "Scrolla höger", this.leftScrollButtonLabel = "Scrolla vänster", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.contentFlex = !1, this.internalGap = "", this._canScrollLeft = !1, this._canScrollRight = !1, this.updateScrollButtons = () => {
+		super(...e), this.variant = "standard", this.width = "100%", this.showScrollbar = !1, this.rightScrollButtonLabel = "Scrolla höger", this.leftScrollButtonLabel = "Scrolla vänster", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.contentFlex = !1, this.internalGap = "", this._canScrollLeft = !1, this._canScrollRight = !1, this.__scrollLeft = () => {
+			this.doScrollBy(-this.getScrollStep());
+		}, this.__scrollRight = () => {
+			this.doScrollBy(this.getScrollStep());
+		}, this.updateScrollButtons = () => {
 			let e = this.scrollerEl || this.shadowRoot?.querySelector(".scb-horizontal-scroller");
 			if (!e) {
-				this._canScrollLeft &&= !1, this._canScrollRight &&= !1, this.removeAttribute("data-scroll-left"), this.removeAttribute("data-scroll-right");
+				this._canScrollLeft = !1, this._canScrollRight = !1, this.toggleAttribute("data-scroll-left", !1), this.toggleAttribute("data-scroll-right", !1);
 				return;
 			}
 			let t = e.scrollLeft > 0, n = e.scrollLeft + e.clientWidth < e.scrollWidth - 1;
-			this._canScrollLeft !== t && (this._canScrollLeft = t), this._canScrollRight !== n && (this._canScrollRight = n), t ? this.setAttribute("data-scroll-left", "") : this.removeAttribute("data-scroll-left"), n ? this.setAttribute("data-scroll-right", "") : this.removeAttribute("data-scroll-right");
-		}, this.lastScrollLeft = 0, this.isScrolling = !1, this.scrollEndTimeout = null, this.scrollerEl = null, this.slotEl = null, this.sizeObserver = null, this.resizeRaf = null, this.handleScroll = () => {
-			let e = this.shadowRoot?.querySelector(".scb-horizontal-scroller");
+			this._canScrollLeft = t, this._canScrollRight = n, this.toggleAttribute("data-scroll-left", t), this.toggleAttribute("data-scroll-right", n);
+		}, this.lastScrollLeft = 0, this.isScrolling = !1, this.scrollEndTimeout = null, this.scrollerEl = null, this.slotEl = null, this.sizeObserver = null, this.resizeRaf = null, this.__onFocusIn = () => {
+			l().then(({ ensureFocusRingReady: e }) => e());
+		}, this.__onLazyFocusRingKeydown = (e) => {
+			!(e instanceof KeyboardEvent) || e.key !== "Tab" || l().then(({ ensureFocusRingOnTab: t }) => t(e));
+		}, this.handleScroll = () => {
+			let e = this.scrollerEl;
 			e && (this.updateScrollButtons(), this.dispatchCustomEventWithAlias("scb-scroll", { scrollLeft: e.scrollLeft }), this.isScrolling || (this.isScrolling = !0, this.dispatchCustomEventWithAlias("scb-scroll-start", { scrollLeft: e.scrollLeft })), clearTimeout(this.scrollEndTimeout), this.scrollEndTimeout = setTimeout(() => {
 				this.isScrolling = !1, this.dispatchCustomEventWithAlias("scb-scroll-end", { scrollLeft: e.scrollLeft });
 			}, 120), e.scrollLeft > this.lastScrollLeft ? this.dispatchCustomEventWithAlias("scb-scroll-right", { scrollLeft: e.scrollLeft }) : e.scrollLeft < this.lastScrollLeft && this.dispatchCustomEventWithAlias("scb-scroll-left", { scrollLeft: e.scrollLeft }), this.lastScrollLeft = e.scrollLeft);
@@ -28,7 +38,7 @@ var s = class extends t {
 		};
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
       display: flex;
       position: relative;
@@ -102,6 +112,98 @@ var s = class extends t {
       position: absolute;
       z-index: 3;
     }
+    .scroll-control,
+    .scroll-text-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border: 0;
+      font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      font-weight: var(--weight-semibold, 600);
+      cursor: pointer;
+      appearance: none;
+      -webkit-appearance: none;
+      -webkit-tap-highlight-color: transparent;
+      touch-action: manipulation;
+    }
+    .scroll-control {
+      inline-size: var(--scb-icon-button-container-size, 40px);
+      block-size: var(--scb-icon-button-container-size, 40px);
+      padding: 0;
+      overflow: hidden;
+      border-radius: var(--radius-full, 1000px);
+      background: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, var(--p-90, #d6f1ff)));
+      color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, var(--p-30, #1e00be)));
+    }
+    .scroll-text-button {
+      position: relative;
+      min-block-size: calc(
+        var(--md-sys-typescale-label-small-line-height, 20px) +
+        calc(var(--spacing-4, 12px) - var(--spacing-1, 2px)) +
+        calc(var(--spacing-4, 12px) - var(--spacing-1, 2px))
+      );
+      gap: var(--spacing-3, 8px);
+      padding-block: calc(var(--spacing-4, 12px) - var(--spacing-1, 2px));
+      padding-inline: var(--spacing-5, 16px);
+      border-radius: var(--radius-full, 1000px);
+      background: transparent;
+      color: var(--md-text-button-label-text-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));
+      font-size: var(--md-sys-typescale-label-small-size, 16px);
+      line-height: var(--md-sys-typescale-label-small-line-height, 20px);
+      letter-spacing: var(--md-sys-typescale-label-small-tracking, 0);
+    }
+    .scroll-control::before,
+    .scroll-text-button::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: currentColor;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--motion-duration-short, 150ms) var(--motion-easing-standard, ease);
+    }
+    .scroll-control:hover::before,
+    .scroll-text-button:hover::before {
+      opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+    }
+    .scroll-control:active::before,
+    .scroll-text-button:active::before {
+      opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
+    }
+    .scroll-control:focus,
+    .scroll-text-button:focus {
+      outline: none;
+    }
+    .scroll-control:focus-visible,
+    .scroll-text-button:focus-visible {
+      outline: var(--stroke-border-m, 2px) solid var(--md-focus-ring-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));
+      outline-offset: var(--spacing-1, 2px);
+    }
+    .scroll-control-icon {
+      position: relative;
+      display: inline-block;
+      inline-size: var(--icon-size-medium, 24px);
+      block-size: var(--icon-size-medium, 24px);
+      overflow: hidden;
+      font-family: 'Material Symbols Outlined';
+      font-size: var(--icon-size-medium, 24px);
+      line-height: 1;
+      text-align: center;
+      white-space: nowrap;
+      text-transform: none;
+      word-wrap: normal;
+      direction: ltr;
+      font-feature-settings: 'liga' 1;
+      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    .scroll-control-icon.scb-svg-icon {
+      fill: currentColor;
+      font: inherit;
+    }
     .scroll-shadow-left,
     .scroll-shadow-right {
       position: absolute;
@@ -172,17 +274,16 @@ var s = class extends t {
 		return e ? Math.max(Math.round(e.clientWidth * .8), 120) : 200;
 	}
 	doScrollBy(e) {
-		let t = this.shadowRoot?.querySelector(".scb-horizontal-scroller");
-		t && t.scrollBy({
+		this.scrollerEl?.scrollBy({
 			left: e,
 			behavior: "smooth"
 		});
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.style.setProperty("--scb-horizontal-scroller-width", this.width);
+		super.connectedCallback(), this.addEventListener("focusin", this.__onFocusIn), this.addEventListener("keydown", this.__onLazyFocusRingKeydown), this.style.setProperty("--scb-horizontal-scroller-width", this.width);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.scrollerEl && (this.scrollerEl.removeEventListener("scroll", this.handleScroll), this.scrollerEl.removeEventListener("wheel", this.handleWheel)), this.sizeObserver &&= (this.sizeObserver.disconnect(), null), this.resizeRaf !== null && (cancelAnimationFrame(this.resizeRaf), this.resizeRaf = null), this.scrollEndTimeout &&= (clearTimeout(this.scrollEndTimeout), null), this.scrollerEl = null, this.slotEl = null;
+		this.removeEventListener("focusin", this.__onFocusIn), this.removeEventListener("keydown", this.__onLazyFocusRingKeydown), this.renderRoot.removeEventListener("focusin", this.__onFocusIn), this.renderRoot.removeEventListener("keydown", this.__onLazyFocusRingKeydown), super.disconnectedCallback(), this.scrollerEl && (this.scrollerEl.removeEventListener("scroll", this.handleScroll), this.scrollerEl.removeEventListener("wheel", this.handleWheel)), this.sizeObserver &&= (this.sizeObserver.disconnect(), null), this.resizeRaf !== null && (cancelAnimationFrame(this.resizeRaf), this.resizeRaf = null), this.scrollEndTimeout &&= (clearTimeout(this.scrollEndTimeout), null), this.scrollerEl = null, this.slotEl = null;
 	}
 	dispatchCustomEvent(e, t = {}) {
 		this.dispatchEvent(new CustomEvent(e, {
@@ -198,156 +299,148 @@ var s = class extends t {
 		}
 	}
 	firstUpdated() {
-		this.scrollerEl = this.shadowRoot?.querySelector(".scb-horizontal-scroller"), this.slotEl = this.shadowRoot?.querySelector("slot");
-		let e = this.shadowRoot?.querySelector(".scroll-shadow-left"), t = this.shadowRoot?.querySelector(".scroll-shadow-right");
-		this.scrollerEl && (this.scrollerEl.addEventListener("scroll", this.handleScroll), this.scrollerEl.addEventListener("wheel", this.handleWheel, { passive: !1 }));
-		let n = () => {
-			if (this.slotEl && e && t) {
-				let n = this.slotEl.getBoundingClientRect();
-				e.style.height = `${n.height}px`, t.style.height = `${n.height}px`;
-			}
-		}, r = () => {
-			n(), this.updateScrollButtons();
-		}, i = () => {
+		this.renderRoot.addEventListener("focusin", this.__onFocusIn), this.renderRoot.addEventListener("keydown", this.__onLazyFocusRingKeydown), this.scrollerEl = this.shadowRoot?.querySelector(".scb-horizontal-scroller"), this.slotEl = this.shadowRoot?.querySelector("slot"), this.scrollerEl && (this.scrollerEl.addEventListener("scroll", this.handleScroll), this.scrollerEl.addEventListener("wheel", this.handleWheel, { passive: !1 }));
+		let e = () => {
 			this.resizeRaf === null && (this.resizeRaf = requestAnimationFrame(() => {
-				this.resizeRaf = null, r();
+				this.resizeRaf = null, this.updateScrollButtons();
 			}));
 		};
 		requestAnimationFrame(() => {
-			r();
+			this.updateScrollButtons();
 		}), this.slotEl && this.slotEl.addEventListener("slotchange", () => {
-			i();
+			e();
 		}), this.sizeObserver = new ResizeObserver(() => {
-			i();
-		}), this.scrollerEl && this.sizeObserver.observe(this.scrollerEl), this.slotEl && this.sizeObserver.observe(this.slotEl), this.#e(), this.#t();
+			e();
+		}), this.scrollerEl && this.sizeObserver.observe(this.scrollerEl), this.slotEl && this.sizeObserver.observe(this.slotEl), this.__applySpacing(), this.__applyInternalGap();
 	}
 	updated(e) {
-		e.has("width") && this.style.setProperty("--scb-horizontal-scroller-width", this.width), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e(), (e.has("internalGap") || e.has("contentFlex")) && this.#t();
+		e.has("width") && this.style.setProperty("--scb-horizontal-scroller-width", this.width), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.__applySpacing(), (e.has("internalGap") || e.has("contentFlex")) && this.__applyInternalGap();
 	}
 	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() {
+	__applySpacing() {
 		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop), n = this.mapSpacingToken(this.spacingBottom), r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight), a = t ?? e, o = n ?? e;
 		a ? this.style.setProperty("--scb-horizontal-scroller-spacing-block-start", a) : this.style.removeProperty("--scb-horizontal-scroller-spacing-block-start"), o ? this.style.setProperty("--scb-horizontal-scroller-spacing-block-end", o) : this.style.removeProperty("--scb-horizontal-scroller-spacing-block-end"), r ? this.style.setProperty("--scb-horizontal-scroller-spacing-inline-start", r) : this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-start"), i ? this.style.setProperty("--scb-horizontal-scroller-spacing-inline-end", i) : this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-end");
 	}
-	#t() {
+	__applyInternalGap() {
 		let e = this.mapSpacingToken(this.internalGap);
 		this.contentFlex && e ? this.style.setProperty("--scb-horizontal-scroller-internal-gap", e) : this.style.removeProperty("--scb-horizontal-scroller-internal-gap");
 	}
 	render() {
-		let e = this.variant, t = this._canScrollLeft || this._canScrollRight;
+		let e = this.variant, n = this._canScrollLeft || this._canScrollRight;
 		switch (e) {
-			case "inline": return r`
-          <div class="scb-horizontal-scroller ${t ? "canScroll" : ""}" tabindex="0">
-            ${this.variant == "inline" ? "" : r`<div class="scroll-shadow-left"></div>`}
+			case "inline": return i`
+          <div class="scb-horizontal-scroller ${n ? "canScroll" : ""}" tabindex="0">
             <slot></slot>
             <md-focus-ring inward></md-focus-ring>
-            ${this.variant == "inline" ? "" : r`<div class="scroll-shadow-right"></div>`}
           </div>
-          ${t ? r`
+          ${n ? i`
                 <div class="scroll-buttons">
-                  ${this._canScrollLeft ? r`
-                        <scb-button
-                          class="scroll-button-left"
-                          variant="text"
-                          label="${this.leftScrollButtonLabel}"
+                  ${this._canScrollLeft ? i`
+                        <button
+                          class="scroll-text-button scroll-button-left"
+                          type="button"
                           aria-label="Scrolla vänster"
-                          icon="chevron_left"
-                          @click="${() => this.doScrollBy(-this.getScrollStep())}"
-                        ></scb-button>
+                          @click=${this.__scrollLeft}
+                        >
+                          ${t("chevron_left", "scroll-control-icon")}
+                          <span>${this.leftScrollButtonLabel}</span>
+                        </button>
                       ` : ""}
 
-                  ${this._canScrollRight ? r`
-                        <scb-button
-                          class="scroll-button-right"
-                          variant="text"
-                          label="${this.rightScrollButtonLabel}"
+                  ${this._canScrollRight ? i`
+                        <button
+                          class="scroll-text-button scroll-button-right"
+                          type="button"
                           aria-label="Scrolla höger"
-                          icon="chevron_right"
-                          trailing-icon
-                          @click="${() => this.doScrollBy(this.getScrollStep())}"
-                        ></scb-button>
+                          @click=${this.__scrollRight}
+                        >
+                          <span>${this.rightScrollButtonLabel}</span>
+                          ${t("chevron_right", "scroll-control-icon")}
+                        </button>
                       ` : ""}
                 </div>
               ` : ""}
         `;
-			default: return r`
-          ${this._canScrollLeft ? r`
-                <scb-icon-button
-                  class="scroll-button-left"
-                  icon="chevron_left"
+			default: return i`
+          ${this._canScrollLeft ? i`
+                <button
+                  class="scroll-control scroll-button-left"
+                  type="button"
                   aria-label="Scrolla vänster"
-                  variant="filled-tonal"
-                  @click="${() => this.doScrollBy(-this.getScrollStep())}"
-                ></scb-icon-button>
+                  @click=${this.__scrollLeft}
+                >
+                  ${t("chevron_left", "scroll-control-icon")}
+                </button>
               ` : ""}
           <div class="scroll-shadow-left"></div>
-          <div class="scb-horizontal-scroller ${t ? "canScroll" : ""}">
+          <div class="scb-horizontal-scroller ${n ? "canScroll" : ""}">
             <slot></slot>
             <md-focus-ring inward></md-focus-ring>
           </div>
           <div class="scroll-shadow-right"></div>
-          ${this._canScrollRight ? r`
-                <scb-icon-button
-                  class="scroll-button-right"
-                  icon="chevron_right"
+          ${this._canScrollRight ? i`
+                <button
+                  class="scroll-control scroll-button-right"
+                  type="button"
                   aria-label="Scrolla höger"
-                  variant="filled-tonal"
-                  @click="${() => this.doScrollBy(this.getScrollStep())}"
-                ></scb-icon-button>
+                  @click=${this.__scrollRight}
+                >
+                  ${t("chevron_right", "scroll-control-icon")}
+                </button>
               ` : ""}
         `;
 		}
 	}
 };
-e([a({
+e([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "variant", void 0), e([a({
+})], u.prototype, "variant", void 0), e([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "width", void 0), e([a({
+})], u.prototype, "width", void 0), e([o({
 	type: Boolean,
 	reflect: !0,
 	attribute: "show-scrollbar"
-})], s.prototype, "showScrollbar", void 0), e([a({
+})], u.prototype, "showScrollbar", void 0), e([o({
 	type: String,
 	reflect: !0,
 	attribute: "right-scroll-button-label"
-})], s.prototype, "rightScrollButtonLabel", void 0), e([a({
+})], u.prototype, "rightScrollButtonLabel", void 0), e([o({
 	type: String,
 	reflect: !0,
 	attribute: "left-scroll-button-label"
-})], s.prototype, "leftScrollButtonLabel", void 0), e([a({
+})], u.prototype, "leftScrollButtonLabel", void 0), e([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "spacing", void 0), e([a({
+})], u.prototype, "spacing", void 0), e([o({
 	type: String,
 	reflect: !0,
 	attribute: "spacing-top"
-})], s.prototype, "spacingTop", void 0), e([a({
+})], u.prototype, "spacingTop", void 0), e([o({
 	type: String,
 	reflect: !0,
 	attribute: "spacing-bottom"
-})], s.prototype, "spacingBottom", void 0), e([a({
+})], u.prototype, "spacingBottom", void 0), e([o({
 	type: String,
 	reflect: !0,
 	attribute: "spacing-left"
-})], s.prototype, "spacingLeft", void 0), e([a({
+})], u.prototype, "spacingLeft", void 0), e([o({
 	type: String,
 	reflect: !0,
 	attribute: "spacing-right"
-})], s.prototype, "spacingRight", void 0), e([a({
+})], u.prototype, "spacingRight", void 0), e([o({
 	type: Boolean,
 	reflect: !0,
 	attribute: "content-flex"
-})], s.prototype, "contentFlex", void 0), e([a({
+})], u.prototype, "contentFlex", void 0), e([o({
 	type: String,
 	reflect: !0,
 	attribute: "internal-gap"
-})], s.prototype, "internalGap", void 0), e([o()], s.prototype, "_canScrollLeft", void 0), e([o()], s.prototype, "_canScrollRight", void 0), s = e([i("scb-horizontal-scroller")], s);
+})], u.prototype, "internalGap", void 0), e([s()], u.prototype, "_canScrollLeft", void 0), e([s()], u.prototype, "_canScrollRight", void 0), u = e([a("scb-horizontal-scroller")], u);
 //#endregion
-export { s as ScbHorizontalScroller };
+export { u as ScbHorizontalScroller };