scb-wc-test 0.1.114 → 0.1.115

package/scb-toc/scb-toc-item.js

@@ -1,142 +1,226 @@
-import { css as p, LitElement as h, html as l } from "lit";
-import { property as d, customElement as b } from "lit/decorators.js";
-import "../scb-icon-button/scb-icon-button.js";
+import { css as m, LitElement as h, html as u } from "lit";
+import { property as p, customElement as f } from "lit/decorators.js";
 import "../scb-divider/scb-divider.js";
 import "@material/web/focus/md-focus-ring.js";
-var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (e, s, o, t) => {
-  for (var i = t > 1 ? void 0 : t ? u(s, o) : s, a = e.length - 1, n; a >= 0; a--)
-    (n = e[a]) && (i = (t ? n(s, o, i) : n(i)) || i);
-  return t && i && m(s, o, i), i;
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, c = (t, e, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? g(e, i) : e, d = t.length - 1, l; d >= 0; d--)
+    (l = t[d]) && (o = (s ? l(e, i, o) : l(o)) || o);
+  return s && o && v(e, i, o), o;
 };
-let r = class extends h {
+let a = class extends h {
   constructor() {
-    super(...arguments), this.expanded = !1, this.label = "", this.supportingText = "", this.itemHref = "#", this.divider = !0, this._unique = crypto.randomUUID(), this._slotHasContent = !1, this._onSlotChange = () => {
-      const e = this.renderRoot.querySelector("slot");
-      this._slotHasContent = !!e && e.assignedNodes().length > 0, this.requestUpdate(), this._updateTabbable();
-    }, this.toggleAccordion = () => {
-      const e = this.closest("scb-toc");
-      e != null && e.hasAttribute("detached") || e.querySelectorAll("scb-toc-item").forEach((t) => {
-        t !== this && t.expanded && (t.expanded = !1, this.toggleBottom(t), t.dispatchEvent(
-          new CustomEvent("expanded-changed", {
-            detail: { expanded: !1 },
-            bubbles: !0,
-            composed: !0
-          })
-        ));
-      });
-      const s = this.expanded;
-      this.expanded = !this.expanded, this.toggleBottom(this), s !== this.expanded && this.dispatchEvent(
-        new CustomEvent("expanded-changed", {
-          detail: { expanded: this.expanded },
-          bubbles: !0,
-          composed: !0
-        })
-      );
+    super(...arguments), this.expanded = !1, this.label = "", this.supportingText = "", this.itemHref = "#", this.divider = !0, this._unique = a._uid(), this._overflowVisibleTimer = null, this._slotHasContent = !1, this._onSlotChange = () => {
+      const t = this.renderRoot.querySelector("slot"), e = !!t && t.assignedElements({ flatten: !0 }).length > 0;
+      this._slotHasContent !== e && (this._slotHasContent = e, this.requestUpdate()), !this._slotHasContent && this.expanded && (this.expanded = !1), this._applyInertByExpanded();
+    }, this._toggleAccordion = () => {
+      if (!this._slotHasContent) return;
+      const t = !this.expanded;
+      t && this._collapseSiblingsIfNeeded(), this.expanded = t;
+    }, this._onKeyDown = (t) => {
+      var r;
+      const e = this.closest("scb-toc"), s = Array.from((e == null ? void 0 : e.querySelectorAll("scb-toc-item")) || []).map((n) => ({
+        host: n,
+        label: n.renderRoot.querySelector(".toc-item-label") || null
+      })).filter((n) => !!n.label), o = s.findIndex((n) => n.host === this);
+      if (o < 0) return;
+      const d = t.currentTarget, l = ((r = d == null ? void 0 : d.classList) == null ? void 0 : r.contains("toc-chevron-button")) ?? !1;
+      switch (t.key) {
+        case "Enter":
+        case " ":
+          if (!l) return;
+          t.preventDefault(), this._toggleAccordion();
+          break;
+        case "ArrowDown":
+          t.preventDefault(), o < s.length - 1 && s[o + 1].label.focus();
+          break;
+        case "ArrowUp":
+          t.preventDefault(), o > 0 && s[o - 1].label.focus();
+          break;
+        case "Home":
+          t.preventDefault(), s.length && s[0].label.focus();
+          break;
+        case "End":
+          t.preventDefault(), s.length && s[s.length - 1].label.focus();
+          break;
+      }
     };
   }
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("slotchange", this._onSlotChange);
+  // Privat hjälpfunktion för unik ID-generering till aria-controls
+  static _uid() {
+    var t, e;
+    return ((e = (t = globalThis.crypto) == null ? void 0 : t.randomUUID) == null ? void 0 : e.call(t)) ?? `${a._uidPrefix}-${++a._uidSeq}`;
+  }
+  firstUpdated() {
+    this._onSlotChange(), this._applyInertByExpanded(), this._syncOverflowVisibilityByExpanded();
+  }
+  updated(t) {
+    t.has("expanded") && (this._applyInertByExpanded(), this._syncOverflowVisibilityByExpanded(), this.dispatchEvent(
+      new CustomEvent("expanded-changed", {
+        detail: { expanded: this.expanded, label: this.label },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("slotchange", this._onSlotChange);
+    super.disconnectedCallback(), this._overflowVisibleTimer !== null && (window.clearTimeout(this._overflowVisibleTimer), this._overflowVisibleTimer = null);
+  }
+  _applyInertByExpanded() {
+    const t = this.renderRoot.querySelector(".scb-toc-item-bottom");
+    t && (this.expanded ? (t.removeAttribute("inert"), t.setAttribute("aria-hidden", "false"), this._restoreTabIndexesIfNeeded()) : (t.setAttribute("inert", ""), t.setAttribute("aria-hidden", "true"), this._removeTabIndexesIfNeeded()));
+  }
+  _syncOverflowVisibilityByExpanded() {
+    if (this._overflowVisibleTimer !== null && (window.clearTimeout(this._overflowVisibleTimer), this._overflowVisibleTimer = null), this.removeAttribute("data-expanded-settled"), !this.expanded) return;
+    const t = this.renderRoot.querySelector(".scb-toc-item-bottom");
+    if (!t) {
+      this.setAttribute("data-expanded-settled", "");
+      return;
+    }
+    const e = this._getTransitionMs(t);
+    if (e <= 0) {
+      this.setAttribute("data-expanded-settled", "");
+      return;
+    }
+    this._overflowVisibleTimer = window.setTimeout(() => {
+      this._overflowVisibleTimer = null, this.expanded && this.setAttribute("data-expanded-settled", "");
+    }, e);
+  }
+  _getTransitionMs(t) {
+    const e = getComputedStyle(t), i = e.transitionDuration.split(",").map((r) => r.trim()), s = e.transitionDelay.split(",").map((r) => r.trim()), o = (r) => {
+      const n = parseFloat(r);
+      return Number.isFinite(n) ? r.endsWith("ms") ? n : r.endsWith("s") ? n * 1e3 : n : 0;
+    }, d = Math.max(i.length, s.length);
+    let l = 0;
+    for (let r = 0; r < d; r += 1) {
+      const n = o(i[r] ?? i[i.length - 1] ?? "0s"), b = o(s[r] ?? s[s.length - 1] ?? "0s");
+      l = Math.max(l, n + b);
+    }
+    return Math.ceil(l);
   }
-  updated(e) {
-    e.has("expanded") && this._updateTabbable();
+  _supportsInert() {
+    return "inert" in HTMLElement.prototype;
   }
-  _updateTabbable() {
-    if (typeof window > "u") return;
-    const e = this.renderRoot.querySelector("slot");
-    if (!e) return;
-    e.assignedElements({ flatten: !0 }).forEach((o) => {
-      var t;
-      o.matches("a,button,input,select,textarea,[tabindex]") && (this.expanded ? o.removeAttribute("tabindex") : o.setAttribute("tabindex", "-1")), (t = o.querySelectorAll) == null || t.call(o, "a,button,input,select,textarea,[tabindex]").forEach((i) => {
-        const a = i;
-        this.expanded ? a.removeAttribute("tabindex") : a.setAttribute("tabindex", "-1");
-      });
+  _collectFocusableFromSlot() {
+    const t = this.renderRoot.querySelector("slot");
+    if (!t) return [];
+    const e = t.assignedElements({ flatten: !0 }), i = [], s = (o) => {
+      o instanceof HTMLElement && o.matches("a,button,input,select,textarea,[tabindex]") && i.push(o);
+    };
+    return e.forEach((o) => {
+      var d;
+      s(o), (d = o.querySelectorAll) == null || d.call(o, "a,button,input,select,textarea,[tabindex]").forEach((l) => s(l));
+    }), i;
+  }
+  _removeTabIndexesIfNeeded() {
+    if (this._supportsInert()) return;
+    this._collectFocusableFromSlot().forEach((e) => {
+      const i = e.getAttribute("tabindex");
+      i !== null && e.setAttribute("data-scb-prev-tabindex", i), e.setAttribute("tabindex", "-1");
     });
   }
-  // Animerar max-height vid öppning/stängning för snygg transition
-  toggleBottom(e) {
-    const s = e.renderRoot.querySelector(".scb-toc-item-bottom");
-    s && (e.expanded ? (s.style.maxHeight = `${s.scrollHeight}px`, setTimeout(() => s.style.maxHeight = "unset", 160)) : (s.style.maxHeight = `${s.scrollHeight}px`, requestAnimationFrame(() => s.style.maxHeight = "0")));
+  _restoreTabIndexesIfNeeded() {
+    if (this._supportsInert()) return;
+    this._collectFocusableFromSlot().forEach((e) => {
+      const i = e.getAttribute("data-scb-prev-tabindex");
+      i !== null ? (e.setAttribute("tabindex", i), e.removeAttribute("data-scb-prev-tabindex")) : e.removeAttribute("tabindex");
+    });
   }
-  /*
-    Tangentbordsnavigering:
-    Enter/Space togglar,
-    ArrowUp/Down flyttar fokus,
-    Home/End hoppar till första/sista item.
-  */
-  _onKeyDown(e) {
-    const s = this.closest("scb-toc"), t = Array.from((s == null ? void 0 : s.querySelectorAll("scb-toc-item")) || []).map((n) => n.renderRoot.querySelector(".scb-toc-item")).filter((n) => !!n), i = e.currentTarget, a = t.indexOf(i);
-    switch (e.key) {
-      case "Enter":
-      case " ":
-        e.preventDefault(), this.toggleAccordion();
-        break;
-      case "ArrowDown":
-        e.preventDefault(), a < t.length - 1 && t[a + 1].focus();
-        break;
-      case "ArrowUp":
-        e.preventDefault(), a > 0 && t[a - 1].focus();
-        break;
-      case "Home":
-        e.preventDefault(), t.length && t[0].focus();
-        break;
-      case "End":
-        e.preventDefault(), t.length && t[t.length - 1].focus();
-        break;
-    }
+  _collapseSiblingsIfNeeded() {
+    const t = this.closest("scb-toc");
+    if (!t || t.hasAttribute("detached")) return;
+    t.querySelectorAll("scb-toc-item").forEach((i) => {
+      i !== this && i.expanded && (i.expanded = !1);
+    });
   }
   render() {
-    const e = `bottom-${this._unique}`, s = `toc-label-${this._unique}`;
-    return l`
-      <div
-        class="scb-toc-item"
-        role="listitem"
-        aria-expanded=${this.expanded}
-        aria-controls=${e}
-      >
+    const t = `bottom-${this._unique}`, e = `toc-label-${this._unique}`, i = `toc-chevron-${this._unique}`;
+    return u`
+      <div class="scb-toc-item" role="listitem">
         <div class="scb-toc-item-top">
           <div>
             <div class="toc-item-label-wrapper">
-              <a id=${s} class="toc-item-label" href=${this.itemHref}>${this.label}</a>
-              <md-focus-ring for=${s} inward></md-focus-ring>
+              <a
+                id=${e}
+                class="toc-item-label"
+                href=${this.itemHref}
+                @keydown=${this._onKeyDown}
+              >
+                ${this.label}
+              </a>
+              <md-focus-ring for=${e} inward></md-focus-ring>
             </div>
             <div class="supporting-text">${this.supportingText}</div>
           </div>
-          ${this._slotHasContent ? l`
-                <scb-icon-button
-                  icon=${this.expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}
-                  ariaLabel=${this.expanded ? "Collapse section" : "Expand section"}
-                  @click=${this.toggleAccordion}
-                  @keydown=${this._onKeyDown}
-                ></scb-icon-button>
+
+          ${this._slotHasContent ? u`
+                <div class="toc-chevron-button-wrapper">
+                  <button
+                    id=${i}
+                    class="toc-chevron-button"
+                    type="button"
+                    aria-label=${this.expanded ? "Fäll ihop avsnitt" : "Fäll ut avsnitt"}
+                    aria-expanded=${this.expanded ? "true" : "false"}
+                    aria-controls=${t}
+                    @click=${this._toggleAccordion}
+                    @keydown=${this._onKeyDown}
+                  >
+                    <md-ripple></md-ripple>
+                    <md-icon class="toc-chevron-icon" aria-hidden="true">expand_more</md-icon>
+                  </button>
+                  <md-focus-ring for=${i} inward></md-focus-ring>
+                </div>
               ` : ""}
         </div>
-        <div
-          id=${e}
-          class="scb-toc-item-bottom ${this.expanded ? "expanded" : ""}"
-        >
-          <slot @slotchange=${this._onSlotChange}></slot>
+
+        <div id=${t} class="scb-toc-item-bottom" role="region" aria-labelledby=${e}>
+          <div class="bottom-inner">
+            <slot @slotchange=${this._onSlotChange}></slot>
+          </div>
         </div>
-        ${this.divider ? l`<scb-divider></scb-divider>` : ""}
+
+        ${this.divider ? u`<scb-divider></scb-divider>` : ""}
       </div>
     `;
   }
 };
-r.styles = [
-  p`
+a._uidPrefix = `uid-${Math.random().toString(36).slice(2)}`;
+a._uidSeq = 0;
+a.styles = [
+  m`
+      :host {
+        display: block;
+        --scb-toc-transition-duration: var(--motion-duration-medium, 150ms);
+        --scb-toc-transition-easing: var(
+          --motion-easing-emphasized-accelerate,
+          var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
+        );
+        --scb-toc-panel-padding-closed: var(--spacing-0, 0px);
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand-font, 'Inter', sans-serif);
+      }
+
+      :host([expanded]) {
+        --scb-toc-transition-easing: var(
+          --motion-easing-emphasized-decelerate,
+          var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
+        );
+      }
+
       .scb-toc-item-top {
-        padding: var(--spacing-5) var(--spacing-3);
+        padding: var(--spacing-5, 16px) var(--spacing-3, 8px);
         display: flex;
-        gap: var(--spacing-5);
+        gap: var(--spacing-5, 16px);
         flex-direction: row;
       }
+
       .toc-item-label-wrapper {
         position: relative;
         display: block;
         width: fit-content;
       }
+
       .toc-item-label {
         display: block;
         width: fit-content;
@@ -147,71 +231,155 @@ r.styles = [
         letter-spacing: var(--md-sys-typescale-body-large-tracking);
         text-decoration: underline;
         text-decoration-thickness: 1px;
-        text-underline-offset: .1578em;
-        margin-bottom: var(--spacing-3);
+        text-underline-offset: 0.1578em;
+        margin-bottom: var(--spacing-3, 8px);
       }
+
       .toc-item-label:hover {
         color: var(--md-sys-color-on-surface);
         text-decoration-thickness: 2px;
       }
+
       .toc-item-label:focus {
         color: var(--md-sys-color-on-surface);
         outline: none;
-
       }
+
       .toc-item-label-wrapper md-focus-ring {
         position: absolute;
         pointer-events: none;
-        border-radius: var(--md-sys-shape-corner-small);
+        border-radius: var(--md-sys-shape-corner-small, 8px);
         --md-focus-ring-inward-offset: -7px;
       }
-      scb-icon-button {
+
+      .supporting-text {
+        font-size: var(--md-sys-typescale-body-medium-size);
+        line-height: var(--md-sys-typescale-body-medium-line-height);
+        letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .toc-chevron-button-wrapper {
+        position: relative;
         margin-left: auto;
+        display: flex;
+        align-items: flex-start;
+      }
+
+      .toc-chevron-button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        inline-size: 40px;
+        block-size: 40px;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        border-radius: 999px;
+        cursor: pointer;
+        color: inherit;
+        -webkit-tap-highlight-color: transparent;
+      }
+
+      .toc-chevron-button:focus {
+        outline: none;
+      }
+
+      .toc-chevron-button md-ripple {
+        border-radius: inherit;
       }
+
+      .toc-chevron-button-wrapper md-focus-ring {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        border-radius: 999px;
+        --md-focus-ring-inward-offset: -7px;
+        height: var(--icon-size-large, 40px);
+      }
+
+      .toc-chevron-icon {
+        transform: rotate(0deg);
+        transition: transform var(--motion-duration-medium, var(--scb-toc-transition-duration))
+          var(--motion-easing-standard, var(--scb-toc-transition-easing));
+      }
+
+      :host([expanded]) .toc-chevron-icon {
+        transform: rotate(180deg);
+      }
+
       scb-divider {
-        margin: var(--spacing-0) var(--spacing-3);
+        margin: var(--spacing-0, 0px) var(--spacing-3, 8px);
       }
+
+      /* Animerar panelen utan JS genom grid-template-rows 0fr till 1fr */
       .scb-toc-item-bottom {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition:
+          grid-template-rows var(--scb-toc-transition-duration) var(--scb-toc-transition-easing),
+          opacity var(--scb-toc-transition-duration) var(--scb-toc-transition-easing),
+          padding var(--scb-toc-transition-duration) var(--scb-toc-transition-easing);
+        opacity: 0;
+        overflow: hidden;
+        padding-top: var(--spacing-0, 0px);
+        padding-right: var(--spacing-5, 16px);
+        padding-bottom: var(--scb-toc-panel-padding-closed);
+        padding-left: var(--spacing-9, 32px);
         font-size: var(--md-sys-typescale-body-medium-size);
         line-height: var(--md-sys-typescale-body-medium-line-height); /* 150% */
         letter-spacing: var(--md-sys-typescale-body-medium-tracking);
       }
-      .scb-toc-item-bottom {
-        padding: var(--spacing-0) var(--spacing-5) var(--spacing-0) var(--spacing-9);
-        max-height: var(--spacing-0);
+
+      :host([expanded]) .scb-toc-item-bottom {
+        grid-template-rows: 1fr;
+        opacity: 1;
+        padding-bottom: var(--spacing-5, 16px);
+      }
+
+      .bottom-inner {
         overflow: hidden;
-        transition: .15s cubic-bezier(.69,.16,.2,.98);
-        opacity: var(--spacing-0);
       }
-      .scb-toc-item-bottom.expanded {
-        opacity: 1;
-        padding: var(--spacing-0) var(--spacing-5) var(--spacing-5) var(--spacing-9);
-        max-height: 100%;
+
+      :host([expanded][data-expanded-settled]) .scb-toc-item-bottom {
+        overflow: visible;
       }
-      .scb-toc-item {
-        color: var(--md-sys-color-on-surface);
-        font-family: var(--brand-font, 'Inter', sans-serif);
+
+      :host([expanded][data-expanded-settled]) .bottom-inner {
+        overflow: visible;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .scb-toc-item-bottom,
+        .toc-chevron-icon {
+          transition: none;
+        }
+
+        md-ripple {
+          display: none;
+        }
       }
     `
 ];
 c([
-  d({ type: Boolean })
-], r.prototype, "expanded", 2);
+  p({ type: Boolean, reflect: !0 })
+], a.prototype, "expanded", 2);
 c([
-  d({ type: String, reflect: !0 })
-], r.prototype, "label", 2);
+  p({ type: String, reflect: !0 })
+], a.prototype, "label", 2);
 c([
-  d({ type: String, attribute: "supporting-text" })
-], r.prototype, "supportingText", 2);
+  p({ type: String, attribute: "supporting-text" })
+], a.prototype, "supportingText", 2);
 c([
-  d({ type: String, attribute: "item-href" })
-], r.prototype, "itemHref", 2);
+  p({ type: String, attribute: "item-href" })
+], a.prototype, "itemHref", 2);
 c([
-  d({ type: Boolean, attribute: "divider" })
-], r.prototype, "divider", 2);
-r = c([
-  b("scb-toc-item")
-], r);
+  p({ type: Boolean, attribute: "divider" })
+], a.prototype, "divider", 2);
+a = c([
+  f("scb-toc-item")
+], a);
 export {
-  r as ScbTocItem
+  a as ScbTocItem
 };