scb-wc-test 0.1.113 → 0.1.115

package/scb-accordion/scb-accordion-item.js

@@ -1,14 +1,14 @@
-import { css as v, LitElement as h, nothing as p, html as l } from "lit";
-import { property as o, customElement as m } from "lit/decorators.js";
+import { css as v, LitElement as m, nothing as p, html as l } from "lit";
+import { property as o, customElement as h } from "lit/decorators.js";
 import "@material/web/focus/md-focus-ring.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
-var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (t, e, s, r) => {
-  for (var n = r > 1 ? void 0 : r ? b(e, s) : e, c = t.length - 1, d; c >= 0; c--)
-    (d = t[c]) && (n = (r ? d(e, s, n) : d(n)) || n);
-  return r && n && u(e, s, n), n;
+var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (t, e, s, a) => {
+  for (var n = a > 1 ? void 0 : a ? b(e, s) : e, c = t.length - 1, d; c >= 0; c--)
+    (d = t[c]) && (n = (a ? d(e, s, n) : d(n)) || n);
+  return a && n && u(e, s, n), n;
 };
-let i = class extends h {
+let i = class extends m {
   constructor() {
     super(...arguments), this.open = !1, this.title = "", this.content = "", this.overline = "", this.supportingText = "", this.leading = !1, this.leadingVariant = "", this.leadingIcon = "", this.imgHrefImage = "", this.avatarLabel = "", this.avatarAlt = "", this.avatarVariant = "icon", this.avatarSrc = "", this.density = 0, this._unique = i._uid(), this._onToggle = (t) => {
       const e = t.currentTarget;
@@ -31,22 +31,22 @@ let i = class extends h {
     !t || !e || (e.open ? (t.removeAttribute("inert"), t.setAttribute("aria-hidden", "false")) : (t.setAttribute("inert", ""), t.setAttribute("aria-hidden", "true")));
   }
   _onKeyDown(t) {
-    const e = this.closest("scb-accordion"), r = Array.from((e == null ? void 0 : e.querySelectorAll("scb-accordion-item")) || []).map((d) => {
+    const e = this.closest("scb-accordion"), a = Array.from((e == null ? void 0 : e.querySelectorAll("scb-accordion-item")) || []).map((d) => {
       var g;
       return ((g = d.renderRoot.querySelector("details")) == null ? void 0 : g.querySelector(".scb-accordion-top")) || null;
-    }).filter((d) => !!d), n = t.currentTarget, c = r.indexOf(n);
+    }).filter((d) => !!d), n = t.currentTarget, c = a.indexOf(n);
     switch (t.key) {
       case "ArrowDown":
-        t.preventDefault(), c < r.length - 1 && r[c + 1].focus();
+        t.preventDefault(), c < a.length - 1 && a[c + 1].focus();
         break;
       case "ArrowUp":
-        t.preventDefault(), c > 0 && r[c - 1].focus();
+        t.preventDefault(), c > 0 && a[c - 1].focus();
         break;
       case "Home":
-        t.preventDefault(), r.length && r[0].focus();
+        t.preventDefault(), a.length && a[0].focus();
         break;
       case "End":
-        t.preventDefault(), r.length && r[r.length - 1].focus();
+        t.preventDefault(), a.length && a[a.length - 1].focus();
         break;
     }
   }
@@ -118,8 +118,8 @@ i.styles = [
         position: relative;
         --scb-accordion-hover-radius: var(--radius-none, 0px);
         --scb-accordion-chevron-nudge-y: 3px;
-        --scb-accordion-transition-duration: 150ms;
-        --scb-accordion-transition-easing: cubic-bezier(.69,.16,.2,.98);
+        --scb-accordion-transition-duration: var(--motion-duration-medium, 150ms);
+        --scb-accordion-transition-easing: var(--motion-easing-emphasized-accelerate, var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98)));
         --scb-accordion-panel-padding-closed: var(--spacing-0, 0px);
       }
 
@@ -166,7 +166,10 @@ i.styles = [
         padding-block: var(--spacing-4, 12px);
       }
 
-      /* Panelinnehåll + animationer (grid 0fr -> 1fr) */
+      details[open] {
+        --scb-accordion-transition-easing: var(--motion-easing-emphasized-decelerate, var(--motion-easing-standard, cubic-bezier(.69,.16,.2,.98)));
+      }
+
       .scb-accordion-bottom {
         display: grid;
         grid-template-rows: 0fr;
@@ -189,6 +192,40 @@ i.styles = [
       }
       .bottom-inner { overflow: hidden; }
 
+      /* Browsers med stöd för ::details-content och interpolate-size kan animera höjd till auto. */
+      @supports selector(::details-content) and (interpolate-size: allow-keywords) {
+        :host {
+          interpolate-size: allow-keywords;
+        }
+
+        details {
+          interpolate-size: allow-keywords;
+        }
+
+        details::details-content {
+          height: 0;
+          overflow: clip;
+          content-visibility: hidden;
+          transition:
+            height var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing),
+            content-visibility var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing)
+              allow-discrete;
+        }
+
+        details[open]::details-content {
+          height: auto;
+          content-visibility: visible;
+        }
+
+        .scb-accordion-bottom {
+          display: block;
+          grid-template-rows: unset;
+          transition:
+            opacity var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing),
+            padding var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing);
+        }
+      }
+
       .title {
         font-family: var(--brand-font);
         font-size: var(--md-sys-typescale-title-large-size);
@@ -227,8 +264,7 @@ i.styles = [
       .chevron {
         margin-left: auto;
         padding-top: var(--scb-accordion-chevron-nudge-y, 3px);
-        font-size: var(--icon-size-small, 24px);
-        transition: transform var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing);
+        transition: transform var(--motion-duration-medium, var(--scb-accordion-transition-duration)) var(--motion-easing-standard, var(--scb-accordion-transition-easing));
       }
       details[open] .chevron { transform: rotate(180deg); }
 
@@ -244,50 +280,50 @@ i.styles = [
       }
     `
 ];
-a([
+r([
   o({ type: Boolean, reflect: !0 })
 ], i.prototype, "open", 2);
-a([
+r([
   o({ type: String, reflect: !0 })
 ], i.prototype, "title", 2);
-a([
+r([
   o({ type: String })
 ], i.prototype, "content", 2);
-a([
+r([
   o({ type: String, attribute: "overline" })
 ], i.prototype, "overline", 2);
-a([
+r([
   o({ type: String, attribute: "supporting-text" })
 ], i.prototype, "supportingText", 2);
-a([
+r([
   o({ type: Boolean })
 ], i.prototype, "leading", 2);
-a([
+r([
   o({ type: String, attribute: "leading-variant", reflect: !0 })
 ], i.prototype, "leadingVariant", 2);
-a([
+r([
   o({ type: String, attribute: "leading-icon" })
 ], i.prototype, "leadingIcon", 2);
-a([
+r([
   o({ type: String, attribute: "img-href-image", reflect: !0 })
 ], i.prototype, "imgHrefImage", 2);
-a([
+r([
   o({ type: String, attribute: "avatar-label" })
 ], i.prototype, "avatarLabel", 2);
-a([
+r([
   o({ type: String, attribute: "avatar-alt" })
 ], i.prototype, "avatarAlt", 2);
-a([
+r([
   o({ type: String, attribute: "avatar-variant" })
 ], i.prototype, "avatarVariant", 2);
-a([
+r([
   o({ type: String, attribute: "avatar-src" })
 ], i.prototype, "avatarSrc", 2);
-a([
+r([
   o({ type: Number, reflect: !0 })
 ], i.prototype, "density", 2);
-i = a([
-  m("scb-accordion-item")
+i = r([
+  h("scb-accordion-item")
 ], i);
 export {
   i as ScbAccordionItem

package/scb-toc/scb-toc-item.d.ts

@@ -5,16 +5,26 @@ export declare class ScbTocItem extends LitElement {
     supportingText: string;
     itemHref: string;
     divider: boolean;
+    private static _uidPrefix;
+    private static _uidSeq;
+    private static _uid;
     private _unique;
+    private _overflowVisibleTimer;
     static styles: import('lit').CSSResult[];
     private _slotHasContent;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    protected firstUpdated(): void;
     protected updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _applyInertByExpanded;
+    private _syncOverflowVisibilityByExpanded;
+    private _getTransitionMs;
     private _onSlotChange;
-    private _updateTabbable;
-    private toggleAccordion;
-    private toggleBottom;
+    private _supportsInert;
+    private _collectFocusableFromSlot;
+    private _removeTabIndexesIfNeeded;
+    private _restoreTabIndexesIfNeeded;
+    private _collapseSiblingsIfNeeded;
+    private _toggleAccordion;
     private _onKeyDown;
     render(): import('lit-html').TemplateResult<1>;
 }