scb-wc-test 0.1.105 → 0.1.107

package/scb-search/scb-search.js

@@ -1,5 +1,5 @@
 import { css as y, LitElement as x, nothing as b, html as u } from "lit";
-import { property as h, customElement as w } from "lit/decorators.js";
+import { property as c, customElement as w } from "lit/decorators.js";
 import "../scb-list/scb-list.js";
 import "@material/web/ripple/ripple.js";
 import "@material/web/icon/icon.js";
@@ -11,29 +11,37 @@ var A = Object.defineProperty, I = Object.getOwnPropertyDescriptor, l = (t, e, s
 };
 let S = 0, a = class extends x {
   constructor() {
-    super(...arguments), this.supportingText = "Hinted search text", this.value = "", this.size = "default", this.fullScreen = !1, this._inputFocused = !1, this._visibleSuggestions = 0, this._activeIndex = -1, this._listboxId = `scb-search-listbox-${++S}`, this._kbMode = !1, this._kbShouldShowRing = !1, this._onGlobalKeydown = (t) => {
+    super(), this._internals = null, this.supportingText = "Hinted search text", this.value = "", this.name = "", this.disabled = !1, this.size = "default", this.fullScreen = !1, this._inputFocused = !1, this._visibleSuggestions = 0, this._activeIndex = -1, this._listboxId = `scb-search-listbox-${++S}`, this._kbMode = !1, this._kbShouldShowRing = !1, this._onGlobalKeydown = (t) => {
       t.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && this._updateInputRingVisibility());
     }, this._onGlobalPointerDown = () => {
       this._kbShouldShowRing = !1, this._inputFocused && this._updateInputRingVisibility();
-    }, this._listScrollHandler = () => {
+    }, this._form = null, this._formResetHandler = null, this._initialValue = "", this._listScrollHandler = () => {
       const t = this._getActiveItem();
       this._kbMode && t && this._positionOptionRing(t);
-    };
+    }, "attachInternals" in this && (this._internals = this.attachInternals());
   }
   connectedCallback() {
-    super.connectedCallback(), this._onWindowResize = this._onWindowResize.bind(this), window.addEventListener("resize", this._onWindowResize, { passive: !0 }), window.addEventListener("keydown", this._onGlobalKeydown, !0), window.addEventListener("pointerdown", this._onGlobalPointerDown, !0);
+    super.connectedCallback(), this._onWindowResize = this._onWindowResize.bind(this), window.addEventListener("resize", this._onWindowResize, { passive: !0 }), window.addEventListener("keydown", this._onGlobalKeydown, !0), window.addEventListener("pointerdown", this._onGlobalPointerDown, !0), this._initialValue = this.value ?? "", this._form = this.closest("form"), this._form && (this._formResetHandler = () => {
+      this.value = this._initialValue;
+      const t = this._inputEl();
+      t && (t.value = this._initialValue), this._syncFormValue(), this._filterSuggestions(this.value), this._activeIndex = -1, this._kbMode = !1, this._updateComboboxA11y();
+    }, this._form.addEventListener("reset", this._formResetHandler, !0)), this._syncFormValue();
   }
   disconnectedCallback() {
     const t = this._inputEl();
-    t && this._boundNativeKeydown && t.removeEventListener("keydown", this._boundNativeKeydown, !0), this._detachListScrollListener(), window.removeEventListener("resize", this._onWindowResize), window.removeEventListener("keydown", this._onGlobalKeydown, !0), window.removeEventListener("pointerdown", this._onGlobalPointerDown, !0), super.disconnectedCallback();
+    t && this._boundNativeKeydown && t.removeEventListener("keydown", this._boundNativeKeydown, !0), this._detachListScrollListener(), window.removeEventListener("resize", this._onWindowResize), window.removeEventListener("keydown", this._onGlobalKeydown, !0), window.removeEventListener("pointerdown", this._onGlobalPointerDown, !0), this._form && this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0), super.disconnectedCallback();
   }
   firstUpdated() {
     this._ensureListboxA11y(), this._updateComboboxA11y();
     const t = this._inputEl();
-    t && (this._boundNativeKeydown = (e) => this._handleKey(e), t.addEventListener("keydown", this._boundNativeKeydown, !0));
+    t && (this._boundNativeKeydown = (e) => this._handleKey(e), t.addEventListener("keydown", this._boundNativeKeydown, !0), t.disabled = this.disabled);
   }
-  updated() {
-    this._ensureListboxA11y(), this._updateComboboxA11y(), this._attachListScrollListener();
+  updated(t) {
+    if (super.updated(t), this._ensureListboxA11y(), this._updateComboboxA11y(), this._attachListScrollListener(), (t.has("value") || t.has("disabled")) && this._syncFormValue(), t.has("disabled")) {
+      this.toggleAttribute("aria-disabled", this.disabled);
+      const e = this._inputEl();
+      e && (e.disabled = this.disabled);
+    }
   }
   render() {
     const t = (this.value ?? "").trim().length > 0, e = this._inputFocused && t && this._hasSuggestions;
@@ -44,20 +52,28 @@ let S = 0, a = class extends x {
         <input
           id="searchInput"
           type="search"
-          name="textfield"
+          name=${this.name || "textfield"}
           class=${e ? "with-list" : ""}
           .value=${this.value}
           placeholder=${this.supportingText}
           autocomplete="off"
+          ?disabled=${this.disabled}
           @input=${this._onInput}
           @focus=${this._onFocus}
           @blur=${this._onBlur}
           aria-label=${this.supportingText || "Sök"}
         />
 
-        ${t ? u`<button class="clear-btn" @click=${this._clearInput} tabindex="-1" aria-label="Rensa sökfält">
-                   <md-icon>close</md-icon>
-                 </button>` : this.trailingIcon ? u`<span class="trailing"><md-icon>${this.trailingIcon}</md-icon></span>` : b}
+        ${t ? u`<button
+              class="clear-btn"
+              type="button"
+              ?disabled=${this.disabled}
+              @click=${this._clearInput}
+              tabindex="-1"
+              aria-label="Rensa sökfält"
+            >
+              <md-icon>close</md-icon>
+            </button>` : this.trailingIcon ? u`<span class="trailing"><md-icon>${this.trailingIcon}</md-icon></span>` : b}
 
         <md-ripple></md-ripple>
         <md-focus-ring class="input-ring"></md-focus-ring>
@@ -73,13 +89,19 @@ let S = 0, a = class extends x {
           ` : b}
     `;
   }
+  /** Gör så att native formulär kan sätta disabled på kontrollen. */
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
   submit() {
     const t = this._getActiveItem(), e = { value: this.value };
-    t && (e.active = this._itemPayload(t)), this.dispatchEvent(new CustomEvent("scb-search-submit", {
-      detail: e,
-      bubbles: !0,
-      composed: !0
-    }));
+    t && (e.active = this._itemPayload(t)), this.dispatchEvent(
+      new CustomEvent("scb-search-submit", {
+        detail: e,
+        bubbles: !0,
+        composed: !0
+      })
+    );
   }
   get _hasSuggestions() {
     return this._visibleSuggestions >= 0 ? this._visibleSuggestions > 0 : Array.from(this.getElementsByTagName("scb-list-item")).some((e) => !e.hasAttribute("hidden") && e.style.display !== "none");
@@ -89,14 +111,16 @@ let S = 0, a = class extends x {
   }
   _onInput(t) {
     const e = t.target;
-    this.value = e.value, this._filterSuggestions(this.value), this._activeIndex = -1, this._kbMode = !1, this._updateComboboxA11y(), this.dispatchEvent(new CustomEvent("scb-search-input", {
-      detail: { value: this.value },
-      bubbles: !0,
-      composed: !0
-    }));
+    this.value = e.value, this._syncFormValue(), this._filterSuggestions(this.value), this._activeIndex = -1, this._kbMode = !1, this._updateComboboxA11y(), this.dispatchEvent(
+      new CustomEvent("scb-search-input", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
   }
   _onFocus() {
-    this._inputFocused = !0, this._updateInputRingVisibility(), this._filterSuggestions(this.value), this._updateComboboxA11y(), this.requestUpdate();
+    this.disabled || (this._inputFocused = !0, this._updateInputRingVisibility(), this._filterSuggestions(this.value), this._updateComboboxA11y(), this.requestUpdate());
   }
   _onBlur() {
     setTimeout(() => {
@@ -109,9 +133,9 @@ let S = 0, a = class extends x {
     t && (this._inputFocused && this._kbShouldShowRing ? t.setAttribute("data-kb-focus", "true") : t.removeAttribute("data-kb-focus"));
   }
   _handleKey(t) {
-    if (!this._inputEl()) return;
-    const s = this._getVisibleItems(), r = (this.value ?? "").trim().length > 0, i = this._inputFocused && r && s.length > 0, n = t.key, o = t.keyCode, c = n === "ArrowDown" || n === "Down" || o === 40, d = n === "ArrowUp" || n === "Up" || o === 38, g = n === "Home" || o === 36, v = n === "End" || o === 35, _ = n === "Enter" || o === 13, m = n === "Escape" || n === "Esc" || o === 27;
-    if (c) {
+    if (this.disabled || !this._inputEl()) return;
+    const s = this._getVisibleItems(), r = (this.value ?? "").trim().length > 0, i = this._inputFocused && r && s.length > 0, n = t.key, o = t.keyCode, h = n === "ArrowDown" || n === "Down" || o === 40, d = n === "ArrowUp" || n === "Up" || o === 38, g = n === "Home" || o === 36, v = n === "End" || o === 35, _ = n === "Enter" || o === 13, f = n === "Escape" || n === "Esc" || o === 27;
+    if (h) {
       if (!i) return;
       t.preventDefault(), this._kbMode = !0, this._moveActive(s, 1);
       return;
@@ -139,32 +163,35 @@ let S = 0, a = class extends x {
       t.preventDefault();
       const p = this._getActiveItem();
       if (p) {
-        const f = p.getAttribute("label") || "";
-        this.value = f, this.dispatchEvent(new CustomEvent("scb-search-submit", {
-          detail: { value: this.value, active: this._itemPayload(p) },
-          bubbles: !0,
-          composed: !0
-        })), this._visibleSuggestions = 0, this._activeIndex = -1, this._kbMode = !1, this._hideOptionRing(), this.requestUpdate();
+        const m = p.getAttribute("label") || "";
+        this.value = m, this._syncFormValue(), this.dispatchEvent(
+          new CustomEvent("scb-search-submit", {
+            detail: { value: this.value, active: this._itemPayload(p) },
+            bubbles: !0,
+            composed: !0
+          })
+        ), this._visibleSuggestions = 0, this._activeIndex = -1, this._kbMode = !1, this._hideOptionRing(), this.requestUpdate();
       } else
         this.submit();
       return;
     }
-    if (m) {
+    if (f) {
       t.preventDefault(), this._clearInput();
       return;
     }
   }
   _clearInput() {
+    if (this.disabled) return;
     this.value = "", this._activeIndex = -1, this._kbMode = !1;
     const t = this._inputEl();
-    t == null || t.focus(), t && (t.value = ""), this._filterSuggestions(""), this._updateComboboxA11y(), this._hideOptionRing(), this.dispatchEvent(new CustomEvent("scb-search-clear", { bubbles: !0, composed: !0 }));
+    t && (t.value = "", t.focus()), this._filterSuggestions(""), this._updateComboboxA11y(), this._hideOptionRing(), this._syncFormValue(), this.dispatchEvent(new CustomEvent("scb-search-clear", { bubbles: !0, composed: !0 }));
   }
   _filterSuggestions(t) {
     const e = (t ?? "").trim().toLowerCase(), s = Array.from(this.querySelectorAll("scb-list-item"));
     let r = 0;
     for (const i of s) {
-      const n = (i.getAttribute("label") || "").toLowerCase(), o = (i.getAttribute("supporting-text") || "").toLowerCase(), c = `${n} ${o}`.trim();
-      e !== "" && c.includes(e) ? (i.removeAttribute("hidden"), r++) : i.setAttribute("hidden", ""), this._ensureOptionA11y(i);
+      const n = (i.getAttribute("label") || "").toLowerCase(), o = (i.getAttribute("supporting-text") || "").toLowerCase(), h = `${n} ${o}`.trim();
+      e !== "" && h.includes(e) ? (i.removeAttribute("hidden"), r++) : i.setAttribute("hidden", ""), this._ensureOptionA11y(i);
     }
     this._visibleSuggestions = r, this._activeIndex >= r && (this._activeIndex = -1), this._updateComboboxA11y(), this.requestUpdate();
   }
@@ -226,8 +253,8 @@ let S = 0, a = class extends x {
   _positionOptionRing(t) {
     const e = this._ringEl(), s = this._listEl();
     if (!e || !s) return;
-    const r = this.getBoundingClientRect(), i = t.getBoundingClientRect(), n = i.top - r.top, o = i.left - r.left, c = i.width, d = i.height;
-    e.style.top = `${n}px`, e.style.left = `${o}px`, e.style.width = `${c}px`, e.style.height = `${d}px`, e.setAttribute("data-show", "true");
+    const r = this.getBoundingClientRect(), i = t.getBoundingClientRect(), n = i.top - r.top, o = i.left - r.left, h = i.width, d = i.height;
+    e.style.top = `${n}px`, e.style.left = `${o}px`, e.style.width = `${h}px`, e.style.height = `${d}px`, e.setAttribute("data-show", "true");
   }
   _hideOptionRing() {
     const t = this._ringEl();
@@ -244,7 +271,13 @@ let S = 0, a = class extends x {
   _detachListScrollListener() {
     this._listWithHandler && (this._listWithHandler.removeEventListener("scroll", this._listScrollHandler), this._listWithHandler = void 0);
   }
+  _syncFormValue() {
+    if (!this._internals) return;
+    const t = this.disabled ? null : this.value;
+    this._internals.setFormValue(t);
+  }
 };
+a.formAssociated = !0;
 a.styles = y`
     :host {
       display: flex;
@@ -278,7 +311,7 @@ a.styles = y`
       --scb-search-icon-size: var(--icon-size-small, 24px);
     }
 
-    :host([size="compact"]) {
+    :host([size='compact']) {
       --scb-search-height: var(--scale-11, 40px);
       --scb-search-padding-x: var(--spacing-4, 12px);
       --scb-search-padding-y: var(--spacing-3, 8px);
@@ -287,6 +320,11 @@ a.styles = y`
       --scb-search-line-height: var(--md-sys-typescale-body-medium-line-height, 20px);
     }
 
+    :host([disabled]) {
+      opacity: 0.38;
+      cursor: default;
+    }
+
     .ripple-wrapper {
       position: relative;
       display: flex;
@@ -302,7 +340,9 @@ a.styles = y`
       border-radius: var(--scb-search-radius);
       z-index: 4;
     }
-    .ripple-wrapper[data-kb-focus="true"] md-focus-ring.input-ring { display: block; }
+    .ripple-wrapper[data-kb-focus='true'] md-focus-ring.input-ring {
+      display: block;
+    }
     input.with-list ~ md-focus-ring.input-ring {
       border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
     }
@@ -317,7 +357,9 @@ a.styles = y`
       z-index: 11;
       border-radius: var(--md-sys-shape-corner-small, 8px);
     }
-    md-focus-ring.option-ring[data-show="true"] { display: block; }
+    md-focus-ring.option-ring[data-show='true'] {
+      display: block;
+    }
 
     .leading {
       position: absolute;
@@ -333,9 +375,13 @@ a.styles = y`
       color: var(--md-sys-color-on-surface-variant);
       z-index: 2;
     }
-    .leading md-icon { font-size: var(--scb-search-icon-size); line-height: 1; }
+    .leading md-icon {
+      font-size: var(--scb-search-icon-size);
+      line-height: 1;
+    }
 
-    .trailing, .clear-btn {
+    .trailing,
+    .clear-btn {
       position: absolute;
       right: var(--scb-search-padding-x);
       top: 50%;
@@ -348,17 +394,27 @@ a.styles = y`
       color: var(--md-sys-color-on-surface-variant);
       z-index: 3;
     }
-    .trailing md-icon { pointer-events: none; font-size: var(--scb-search-icon-size); }
+    .trailing md-icon {
+      pointer-events: none;
+      font-size: var(--scb-search-icon-size);
+    }
 
-    .clear-btn { background: none; border: 0; padding: 0; cursor: pointer; }
-    .clear-btn[hidden] { display: none; }
+    .clear-btn {
+      background: none;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+    }
+    .clear-btn[hidden] {
+      display: none;
+    }
+    .clear-btn:disabled {
+      cursor: default;
+    }
 
-    input[type="search"] {
-      padding:
-        var(--scb-search-padding-y)
-        var(--scb-search-trailing-gap)
-        var(--scb-search-padding-y)
-        var(--scb-search-leading-gap);
+    input[type='search'] {
+      padding: var(--scb-search-padding-y) var(--scb-search-trailing-gap)
+        var(--scb-search-padding-y) var(--scb-search-leading-gap);
       min-height: var(--scb-search-height);
       width: 100%;
       box-sizing: border-box;
@@ -376,13 +432,17 @@ a.styles = y`
       position: relative;
       z-index: 1;
     }
-    input[type="search"]::placeholder {
+    input[type='search']::placeholder {
       color: var(--md-sys-color-on-surface-variant);
       font-size: var(--scb-search-font-size);
       line-height: var(--scb-search-line-height);
     }
-    input[type="search"]:hover { outline: var(--md-sys-color-outline) auto var(--stroke-border, 1px); }
-    input[type="search"]:focus { outline: none; }
+    input[type='search']:hover {
+      outline: var(--md-sys-color-outline) auto var(--stroke-border, 1px);
+    }
+    input[type='search']:focus {
+      outline: none;
+    }
 
     md-ripple {
       border-radius: var(--scb-search-radius);
@@ -394,10 +454,18 @@ a.styles = y`
       --md-ripple-hover-opacity: 0;
     }
 
-    input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
+    input[type='search']::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      appearance: none;
+      display: none;
+    }
 
-    input.with-list     { border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0; }
-    input.with-list ~ md-ripple { border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0; }
+    input.with-list {
+      border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
+    }
+    input.with-list ~ md-ripple {
+      border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
+    }
 
     scb-list.suggestion-list {
       position: absolute;
@@ -414,11 +482,16 @@ a.styles = y`
       max-height: var(--scb-search-suggestions-max-h, 60vh);
     }
 
-    :host([full-screen]) input[type="search"],
+    :host([full-screen]) input[type='search'],
     :host([full-screen]) input.with-list,
-    :host([full-screen]) input.with-list ~ md-ripple { border-radius: var(--radius-none, 0px) !important; }
+    :host([full-screen]) input.with-list ~ md-ripple {
+      border-radius: var(--radius-none, 0px) !important;
+    }
     :host([full-screen]) scb-list.suggestion-list {
-      position: static; border: 0; border-radius: 0; background: transparent;
+      position: static;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
     }
 
     .list-divider {
@@ -427,26 +500,36 @@ a.styles = y`
       background: var(--md-sys-color-outline);
       width: 100%;
     }
-    :host([full-screen]) .list-divider[aria-hidden="false"] { display: block; }
+    :host([full-screen]) .list-divider[aria-hidden='false'] {
+      display: block;
+    }
 
     @media (prefers-color-scheme: dark) {
-      :host { color: var(--md-sys-color-on-surface); }
+      :host {
+        color: var(--md-sys-color-on-surface);
+      }
     }
   `;
 l([
-  h({ type: String, attribute: "trailing-icon" })
+  c({ type: String, attribute: "trailing-icon" })
 ], a.prototype, "trailingIcon", 2);
 l([
-  h({ type: String, attribute: "supporting-text" })
+  c({ type: String, attribute: "supporting-text" })
 ], a.prototype, "supportingText", 2);
 l([
-  h({ type: String })
+  c({ type: String })
 ], a.prototype, "value", 2);
 l([
-  h({ type: String, reflect: !0 })
+  c({ type: String, reflect: !0 })
+], a.prototype, "name", 2);
+l([
+  c({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+l([
+  c({ type: String, reflect: !0 })
 ], a.prototype, "size", 2);
 l([
-  h({ type: Boolean, attribute: "full-screen", reflect: !0 })
+  c({ type: Boolean, attribute: "full-screen", reflect: !0 })
 ], a.prototype, "fullScreen", 2);
 a = l([
   w("scb-search")

package/scb-segmented-button/scb-segmented-button.d.ts

@@ -1,11 +1,14 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 /**
  * En komponent för segmenterade knappar (segmented button).
  *
  * @slot - Plats för knappar eller segment.
- * @fires change - När valt segment ändras (detail: { value })
+ * @fires change - När valt segment ändras (detail: { value } eller { values })
  */
 export declare class ScbSegmentedButton extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    private _internals;
     /**
      * Variant: 'single-select' (default) eller 'multi-select'.
      */
@@ -16,10 +19,48 @@ export declare class ScbSegmentedButton extends LitElement {
     value: string;
     values: string[];
     disabled: boolean;
+    /**
+     * Namn för HTML-formulär (FormData-nyckel).
+     * single-select: FormData.get(name) → string
+     * multi-select:  FormData.getAll(name) → string[]
+     */
+    name: string;
+    /**
+     * Vertikalt avstånd till omgivande innehåll.
+     * "N" (0–14) mappar till var(--spacing-N), annars valfritt CSS-värde.
+     */
+    spacing: string;
+    /** Överkantens avstånd. Om satt går före spacing. 0–14 mappar till var(--spacing-N), annars valfritt CSS-värde. */
+    spacingTop: string;
+    /** Nederkantens avstånd. Om satt går före spacing. 0–14 mappar till var(--spacing-N), annars valfritt CSS-värde. */
+    spacingBottom: string;
+    private _form;
+    private _formResetHandler;
+    private _initialValue;
+    private _initialValues;
+    constructor();
     static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: PropertyValues): void;
     private onSlotClick;
     private updateSegments;
-    firstUpdated(): void;
-    updated(): void;
+    /**
+     * Gör så att native formulär kan sätta disabled på kontrollen.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Synkar value/values → FormData via ElementInternals.
+     * single-select: FormData.get(name) → string
+     * multi-select:  FormData.getAll(name) → string[]
+     */
+    private _syncFormValue;
+    private mapSpacingToken;
     render(): import('lit-html').TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-segmented-button': ScbSegmentedButton;
+    }
+}