scb-wc-test 0.1.105 → 0.1.107

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

@@ -1,56 +1,58 @@
-import { css as f, LitElement as b, html as m } from "lit";
-import { property as p, customElement as y } from "lit/decorators.js";
-var _ = Object.defineProperty, C = Object.getOwnPropertyDescriptor, v = (t) => {
+import { css as k, LitElement as S, html as C } from "lit";
+import { property as c, customElement as V } from "lit/decorators.js";
+var w = Object.defineProperty, E = Object.getOwnPropertyDescriptor, _ = (t) => {
   throw TypeError(t);
-}, n = (t, e, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? C(e, a) : e, s = t.length - 1, o; s >= 0; s--)
-    (o = t[s]) && (r = (i ? o(e, a, r) : o(r)) || r);
-  return i && r && _(e, a, r), r;
-}, S = (t, e, a) => e.has(t) || v("Cannot " + a), c = (t, e, a) => (S(t, e, "read from private field"), a ? a.call(t) : e.get(t)), u = (t, e, a) => e.has(t) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), g, d, h;
-let l = class extends b {
+}, l = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? E(e, i) : e, o = t.length - 1, n; o >= 0; o--)
+    (n = t[o]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  return s && a && w(e, i, a), a;
+}, y = (t, e, i) => e.has(t) || _("Cannot " + i), h = (t, e, i) => (y(t, e, "read from private field"), i ? i.call(t) : e.get(t)), g = (t, e, i) => e.has(t) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), d = (t, e, i) => (y(t, e, "access private method"), i), v, u, m, p, b, f;
+let r = class extends S {
   constructor() {
-    super(...arguments), this.name = "", this.orientation = "vertical", this.disabled = !1, this.ariaLabel = null, this.spacing = "item", this.value = "", u(this, g, () => {
+    super(), g(this, p), this.name = "", this.orientation = "vertical", this.disabled = !1, this.ariaLabel = null, this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this.value = "", this._internals = null, this._form = null, this._formResetHandler = null, this._initialValue = "", g(this, v, () => {
       var e;
       const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
-      return t ? t.assignedElements({ flatten: !0 }).filter((a) => a.tagName.toLowerCase() === "scb-radio-button") : [];
-    }), u(this, d, () => {
-      const t = c(this, g).call(this);
+      return t ? t.assignedElements({ flatten: !0 }).filter(
+        (i) => i.tagName.toLowerCase() === "scb-radio-button"
+      ) : [];
+    }), g(this, u, () => {
+      const t = h(this, v).call(this);
       if (!t.length) return;
       let e = null;
-      for (const a of t) {
-        const i = a;
-        this.name && a.setAttribute("name", this.name), this.disabled ? a.setAttribute("disabled", "") : a.removeAttribute("disabled"), this.orientation === "horizontal" ? a.setAttribute("orientation", "horizontal") : a.removeAttribute("orientation"), this.spacing === "group" ? a.style.setProperty("--scb-radio-gap", "0") : a.style.removeProperty("--scb-radio-gap");
-        const r = i.value ?? a.getAttribute("value") ?? "", s = typeof i.checked == "boolean" ? i.checked : a.hasAttribute("checked");
+      for (const i of t) {
+        const s = i;
+        this.name && i.setAttribute("name", this.name), this.disabled ? i.setAttribute("disabled", "") : i.removeAttribute("disabled"), this.orientation === "horizontal" ? i.setAttribute("orientation", "horizontal") : i.removeAttribute("orientation");
+        const a = s.value ?? i.getAttribute("value") ?? "", o = typeof s.checked == "boolean" ? s.checked : i.hasAttribute("checked");
         if (this.value) {
-          const o = String(r) === this.value;
-          o && !s ? i.checked = !0 : !o && s && (i.checked = !1);
+          const n = String(a) === this.value;
+          n && !o ? s.checked = !0 : !n && o && (s.checked = !1);
         } else
-          s && e === null && (e = String(r));
+          o && e === null && (e = String(a));
       }
       !this.value && e !== null && (this.value = e);
-    }), u(this, h, (t) => {
-      var i, r;
+    }), g(this, m, (t) => {
+      var s, a;
       const e = t.composedPath().find(
-        (s) => {
-          var o;
-          return ((o = s == null ? void 0 : s.tagName) == null ? void 0 : o.toLowerCase()) === "scb-radio-button";
+        (o) => {
+          var n;
+          return ((n = o == null ? void 0 : o.tagName) == null ? void 0 : n.toLowerCase()) === "scb-radio-button";
         }
-      ), a = (e == null ? void 0 : e.value) ?? ((i = e == null ? void 0 : e.getAttribute) == null ? void 0 : i.call(e, "value")) ?? ((r = t.target) == null ? void 0 : r.value) ?? "";
-      this.value = String(a ?? ""), this.dispatchEvent(
+      ), i = (e == null ? void 0 : e.value) ?? ((s = e == null ? void 0 : e.getAttribute) == null ? void 0 : s.call(e, "value")) ?? ((a = t.target) == null ? void 0 : a.value) ?? "";
+      this.value = String(i ?? ""), this.dispatchEvent(
         new CustomEvent("scb-change", {
           detail: {
-            value: String(a ?? ""),
+            value: String(i ?? ""),
             originalIsTrusted: (t == null ? void 0 : t.isTrusted) === !0
           },
           bubbles: !0,
           composed: !0
         })
       );
-    });
+    }), "attachInternals" in this && (this._internals = this.attachInternals());
   }
   render() {
     const t = this.orientation === "horizontal" ? "row" : "column";
-    return m`
+    return C`
       <div
         class="g"
         role="radiogroup"
@@ -58,62 +60,113 @@ let l = class extends b {
         aria-label=${this.ariaLabel ?? ""}
         style=${`--_dir:${t}`}
       >
-        <slot @slotchange=${c(this, d)}></slot>
+        <slot @slotchange=${h(this, u)}></slot>
       </div>
     `;
   }
   firstUpdated() {
-    c(this, d).call(this), this.addEventListener("change", c(this, h));
+    d(this, p, b).call(this), h(this, u).call(this), this.addEventListener("change", h(this, m)), this._initialValue = this.value, this._form = this.closest("form"), this._form && (this._formResetHandler = () => {
+      this.value = this._initialValue, this.requestUpdate(), h(this, u).call(this), this.__syncFormValue();
+    }, this._form.addEventListener("reset", this._formResetHandler, !0)), this.__syncFormValue();
   }
   disconnectedCallback() {
-    this.removeEventListener("change", c(this, h)), super.disconnectedCallback();
+    this.removeEventListener("change", h(this, m)), this._form && this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0), super.disconnectedCallback();
   }
   updated(t) {
-    (t.has("name") || t.has("disabled") || t.has("orientation") || t.has("spacing") || t.has("value")) && c(this, d).call(this);
+    (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && d(this, p, b).call(this), (t.has("name") || t.has("disabled") || t.has("orientation") || t.has("value")) && h(this, u).call(this), (t.has("value") || t.has("disabled") || t.has("name")) && this.__syncFormValue();
   }
+  // Körs av webbläsaren när formuläret sätter disabled
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
+  // Synkar gruppens value/disabled mot FormData
+  __syncFormValue() {
+    if (!this._internals) return;
+    const t = typeof this.name == "string" && this.name.trim() !== "", e = typeof this.value == "string" && this.value.trim() !== "", i = this.disabled || !t || !e ? null : this.value;
+    this._internals.setFormValue(i);
+  }
+};
+v = /* @__PURE__ */ new WeakMap();
+u = /* @__PURE__ */ new WeakMap();
+m = /* @__PURE__ */ new WeakMap();
+p = /* @__PURE__ */ new WeakSet();
+b = function() {
+  const t = d(this, p, f).call(this, this.spacing), e = d(this, p, f).call(this, this.spacingTop) ?? t, i = d(this, p, f).call(this, this.spacingBottom) ?? t;
+  e ? this.style.setProperty(
+    "--scb-radio-group-spacing-block-start",
+    e
+  ) : this.style.removeProperty(
+    "--scb-radio-group-spacing-block-start"
+  ), i ? this.style.setProperty(
+    "--scb-radio-group-spacing-block-end",
+    i
+  ) : this.style.removeProperty(
+    "--scb-radio-group-spacing-block-end"
+  );
 };
-g = /* @__PURE__ */ new WeakMap();
-d = /* @__PURE__ */ new WeakMap();
-h = /* @__PURE__ */ new WeakMap();
-l.styles = f`
-    :host { display: block; }
+f = function(t) {
+  if (!t) return;
+  const e = String(t).trim();
+  if (e)
+    return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
+};
+r.formAssociated = !0;
+r.styles = k`
+    :host {
+      display: block;
+
+      /* Vertikal standard-spacing mellan items i gruppen */
+      --scb-radio-gap: var(--spacing-4, 12px);
+
+      /* Vertikalt avstånd mot omgivande innehåll, styrs via spacing/spacing-top/spacing-bottom */
+      margin-block-start: var(--scb-radio-group-spacing-block-start, 0);
+      margin-block-end: var(--scb-radio-group-spacing-block-end, 0);
+    }
+
+    /* Horisontell standard-spacing mellan items om gap inte overrideas via CSS-variabel */
+    :host([orientation='horizontal']) {
+      --scb-radio-gap: var(--spacing-8, 32px);
+    }
 
     .g {
       display: flex;
       flex-direction: var(--_dir, column);
-      gap: 0; /* default: inget extra gap */
       align-items: flex-start;
+      gap: var(--scb-radio-gap);
     }
 
-    /* Om gruppen ska äga spacing: använder gap och nollar radios egen syskonmarginal */
-    :host([spacing="group"]) .g {
-      gap: var(--scb-radio-gap, 12px);
-    }
-    :host([spacing="group"]) ::slotted(scb-radio-button) {
+    /* När radioknappar ligger i en grupp ska spacing ägas av gruppen, inte av enskilda items */
+    ::slotted(scb-radio-button) {
       --scb-radio-gap: 0;
     }
   `;
-n([
-  p({ type: String })
-], l.prototype, "name", 2);
-n([
-  p({ type: String, reflect: !0 })
-], l.prototype, "orientation", 2);
-n([
-  p({ type: Boolean, reflect: !0 })
-], l.prototype, "disabled", 2);
-n([
-  p({ type: String, attribute: "aria-label" })
-], l.prototype, "ariaLabel", 2);
-n([
-  p({ type: String, reflect: !0 })
-], l.prototype, "spacing", 2);
-n([
-  p({ type: String, reflect: !0 })
-], l.prototype, "value", 2);
-l = n([
-  y("scb-radio-group")
-], l);
+l([
+  c({ type: String })
+], r.prototype, "name", 2);
+l([
+  c({ type: String, reflect: !0 })
+], r.prototype, "orientation", 2);
+l([
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+l([
+  c({ type: String, attribute: "aria-label" })
+], r.prototype, "ariaLabel", 2);
+l([
+  c({ type: String, reflect: !0 })
+], r.prototype, "spacing", 2);
+l([
+  c({ type: String, attribute: "spacing-top", reflect: !0 })
+], r.prototype, "spacingTop", 2);
+l([
+  c({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], r.prototype, "spacingBottom", 2);
+l([
+  c({ type: String, reflect: !0 })
+], r.prototype, "value", 2);
+r = l([
+  V("scb-radio-group")
+], r);
 export {
-  l as ScbRadioGroup
+  r as ScbRadioGroup
 };

package/scb-search/scb-search.d.ts

@@ -1,8 +1,14 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
 export declare class ScbSearch extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
     trailingIcon?: string;
     supportingText: string;
     value: string;
+    /** Namn för HTML-formulär (hamnar som nyckel i FormData när formuläret skickas) */
+    name: string;
+    /** Inaktiverat läge; speglas mot inre input och FormData (skickas inte när disabled). */
+    disabled: boolean;
     size: 'default' | 'compact';
     fullScreen: boolean;
     private _inputFocused;
@@ -14,12 +20,18 @@ export declare class ScbSearch extends LitElement {
     private _kbShouldShowRing;
     private _onGlobalKeydown;
     private _onGlobalPointerDown;
+    private _form;
+    private _formResetHandler;
+    private _initialValue;
+    constructor();
     static styles: import('lit').CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
-    updated(): void;
+    updated(changed: PropertyValues): void;
     render(): TemplateResult;
+    /** Gör så att native formulär kan sätta disabled på kontrollen. */
+    formDisabledCallback(disabled: boolean): void;
     submit(): void;
     private get _hasSuggestions();
     private _onSlotChange;
@@ -48,6 +60,7 @@ export declare class ScbSearch extends LitElement {
     private _listWithHandler?;
     private _attachListScrollListener;
     private _detachListScrollListener;
+    private _syncFormValue;
 }
 declare global {
     interface HTMLElementTagNameMap {