scb-wc 0.1.129 → 0.1.131

package/mvc/components/scb-checkbox/scb-checkbox-group.js

@@ -1,5 +1,20 @@
-import{h as m,m as v,p as c,v as y,y as k}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as a}from"../../vendor/decorate.js";import{n as x,t as n}from"../../vendor/assertClassBrand.js";import{n as _,r as S,t as g}from"../../vendor/classPrivateFieldGet2.js";(function(){try{var s=typeof globalThis<"u"?globalThis:window;if(!s.__scb_ce_guard_installed__){s.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(o,p,e){try{customElements.get(o)||t(o,p,e)}catch(u){var h=String(u||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var l,r,d,i=(l=new WeakMap,r=new WeakSet,d=class extends m{constructor(...t){super(...t),x(this,r),S(this,l,void 0),this.orientation="vertical",this.disabled=!1,this.size="medium",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,_(l,this,()=>{const o=this.shadowRoot?.querySelector("slot");if(!o)return;const p=o.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-checkbox");for(const e of p){this.disabled?e.setAttribute("disabled",""):e.removeAttribute("disabled"),this.orientation==="horizontal"?e.setAttribute("orientation","horizontal"):e.removeAttribute("orientation");const h=e.hasAttribute("data-size-from-group");this.size==="medium"?h&&(e.removeAttribute("size"),e.removeAttribute("data-size-from-group")):(!e.hasAttribute("size")||h)&&(e.setAttribute("size",this.size),e.setAttribute("data-size-from-group",""))}})}render(){const t=this.orientation==="horizontal"?"row":"column";return y`
-      <div class="g" role="group" aria-disabled=${String(this.disabled)} style=${`--_dir:${t}`}>
-        <slot @slotchange=${g(l,this)}></slot>
+import{g as f,h as V,m as M,p as n,v as y,y as C}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import"../../vendor/icon.js";import{t as a}from"../../vendor/decorate.js";import{n as A,t as s}from"../../vendor/assertClassBrand.js";import{n as x,r as k,t as c}from"../../vendor/classPrivateFieldGet2.js";(function(){try{var r=typeof globalThis<"u"?globalThis:window;if(!r.__scb_ce_guard_installed__){r.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,l,g){try{customElements.get(e)||t(e,l,g)}catch(S){var _=String(S||"");if(_.indexOf("already been used")===-1&&_.indexOf("NotSupportedError")===-1)throw S}}}}catch{}})();var p,u,i,d,v,o=(p=new WeakMap,u=new WeakMap,i=new WeakSet,d=new WeakMap,v=class extends V{constructor(){super(),A(this,i),k(this,p,void 0),k(this,u,void 0),k(this,d,void 0),this.name="",this.orientation="vertical",this.disabled=!1,this.required=!1,this.error=!1,this.ariaLabel=null,this.supportingText="",this.errorText="",this.size="medium",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._internals=null,this._form=null,this._formResetHandler=null,this._formSubmitHandler=null,this._initialChecked=new WeakMap,this._customValidationMessage="",this._validationMessage="",this._hasValidationBeenReported=!1,this._supportingTextId=`scb-checkbox-group-supporting-${Math.random().toString(36).slice(2,11)}`,x(p,this,()=>{const t=c(u,this).call(this);for(const e of t){s(i,this,T).call(this,e),this.disabled?e.setAttribute("disabled",""):e.removeAttribute("disabled"),this.orientation==="horizontal"?e.setAttribute("orientation","horizontal"):e.removeAttribute("orientation");const l=e.hasAttribute("data-size-from-group");this.size==="medium"?l&&(e.removeAttribute("size"),e.removeAttribute("data-size-from-group")):(!e.hasAttribute("size")||l)&&(e.setAttribute("size",this.size),e.setAttribute("data-size-from-group",""))}s(i,this,z).call(this),s(i,this,b).call(this),s(i,this,h).call(this)}),x(u,this,()=>{const t=this.shadowRoot?.querySelector("slot");return t?t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-checkbox"):[]}),x(d,this,t=>{t.target!==this&&t.composedPath().find(e=>e?.tagName?.toLowerCase()==="scb-checkbox")&&(s(i,this,b).call(this),s(i,this,h).call(this))}),"attachInternals"in this&&(this._internals=this.attachInternals())}render(){const t=this.orientation==="horizontal"?"row":"column",e=s(i,this,L).call(this);return y`
+      <div
+        class="g"
+        role="group"
+        aria-disabled=${String(this.disabled)}
+        aria-required=${String(this.required)}
+        aria-invalid=${this.error?"true":"false"}
+        aria-describedby=${e?this._supportingTextId:f}
+        aria-label=${this.ariaLabel??f}
+        style=${`--_dir:${t}`}
+      >
+        <slot @slotchange=${c(p,this)}></slot>
       </div>
-    `}firstUpdated(){n(r,this,f).call(this),g(l,this).call(this)}updated(t){(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&n(r,this,f).call(this),(t.has("disabled")||t.has("orientation")||t.has("size"))&&g(l,this).call(this)}},d.styles=k`:host{display:block;--scb-checkbox-gap:var(--spacing-4, 12px);margin-block-start:var(--scb-checkbox-group-spacing-block-start, 0);margin-block-end:var(--scb-checkbox-group-spacing-block-end, 0);margin-inline-start:var(--scb-checkbox-group-spacing-inline-start, 0);margin-inline-end:var(--scb-checkbox-group-spacing-inline-end, 0)}:host([orientation='horizontal']){--scb-checkbox-gap:var(--spacing-8, 32px)}.g{display:flex;flex-direction:var(--_dir, column);align-items:flex-start;gap:var(--scb-checkbox-gap)}::slotted(scb-checkbox){--scb-checkbox-gap:0}`,d);function f(){const s=n(r,this,b).call(this,this.spacing),t=n(r,this,b).call(this,this.spacingTop)??s,o=n(r,this,b).call(this,this.spacingBottom)??s,p=n(r,this,b).call(this,this.spacingLeft),e=n(r,this,b).call(this,this.spacingRight);t?this.style.setProperty("--scb-checkbox-group-spacing-block-start",t):this.style.removeProperty("--scb-checkbox-group-spacing-block-start"),o?this.style.setProperty("--scb-checkbox-group-spacing-block-end",o):this.style.removeProperty("--scb-checkbox-group-spacing-block-end"),p?this.style.setProperty("--scb-checkbox-group-spacing-inline-start",p):this.style.removeProperty("--scb-checkbox-group-spacing-inline-start"),e?this.style.setProperty("--scb-checkbox-group-spacing-inline-end",e):this.style.removeProperty("--scb-checkbox-group-spacing-inline-end")}function b(s){if(!s)return;const t=String(s).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}a([c({type:String,reflect:!0})],i.prototype,"orientation",void 0);a([c({type:Boolean,reflect:!0})],i.prototype,"disabled",void 0);a([c({type:String,reflect:!0})],i.prototype,"size",void 0);a([c({type:String,reflect:!0})],i.prototype,"spacing",void 0);a([c({type:String,attribute:"spacing-top",reflect:!0})],i.prototype,"spacingTop",void 0);a([c({type:String,attribute:"spacing-bottom",reflect:!0})],i.prototype,"spacingBottom",void 0);a([c({type:String,attribute:"spacing-left",reflect:!0})],i.prototype,"spacingLeft",void 0);a([c({type:String,attribute:"spacing-right",reflect:!0})],i.prototype,"spacingRight",void 0);i=a([v("scb-checkbox-group")],i);
+      ${e?y`
+            <div id=${this._supportingTextId} class="supporting-text">
+              <span>${e}</span>
+              ${this.error?y`<md-icon aria-hidden="true">error</md-icon>`:f}
+            </div>
+          `:f}
+    `}firstUpdated(){s(i,this,w).call(this),c(p,this).call(this),s(i,this,z).call(this),this.addEventListener("input",c(d,this)),this.addEventListener("change",c(d,this)),this._form=this.closest("form"),this._form&&(this._formResetHandler=()=>{for(const t of c(u,this).call(this))t.checked=this._initialChecked.get(t)??t.hasAttribute("checked");this.error=!1,this._hasValidationBeenReported=!1,c(p,this).call(this),s(i,this,b).call(this),s(i,this,h).call(this)},this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form.addEventListener("reset",this._formResetHandler,!0),this._form.addEventListener("submit",this._formSubmitHandler,!0)),s(i,this,b).call(this),s(i,this,h).call(this)}disconnectedCallback(){this.removeEventListener("input",c(d,this)),this.removeEventListener("change",c(d,this)),this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0),this._form&&this._formSubmitHandler&&this._form.removeEventListener("submit",this._formSubmitHandler,!0),super.disconnectedCallback()}updated(t){(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&s(i,this,w).call(this),(t.has("name")||t.has("disabled")||t.has("orientation")||t.has("size")||t.has("required"))&&c(p,this).call(this),(t.has("disabled")||t.has("name"))&&s(i,this,b).call(this),(t.has("disabled")||t.has("required")||t.has("errorText"))&&s(i,this,h).call(this)}get form(){return this._internals?.form??this._form}get validity(){return this._internals?.validity}get validationMessage(){return this._internals?.validationMessage||this._validationMessage}get willValidate(){return this._internals?.willValidate??!this.disabled}get labels(){return this._internals?.labels}checkValidity(){return s(i,this,h).call(this),this._internals?.checkValidity()??!this.error}reportValidity(){return this._hasValidationBeenReported=!0,s(i,this,h).call(this),this._internals?.reportValidity()??!this.error}setCustomValidity(t){this._customValidationMessage=String(t??""),s(i,this,h).call(this)}formDisabledCallback(t){this.disabled=t,t&&(this._hasValidationBeenReported=!1),s(i,this,h).call(this)}},v.formAssociated=!0,v.styles=C`:host{display:block;--scb-checkbox-gap:var(--spacing-4, 12px);margin-block-start:var(--scb-checkbox-group-spacing-block-start, 0);margin-block-end:var(--scb-checkbox-group-spacing-block-end, 0);margin-inline-start:var(--scb-checkbox-group-spacing-inline-start, 0);margin-inline-end:var(--scb-checkbox-group-spacing-inline-end, 0);--scb-checkbox-group-supporting-font-size:var(--md-sys-typescale-body-medium-size, 16px);--scb-checkbox-group-supporting-line-height:var(--md-sys-typescale-body-medium-line-height, 24px);--scb-checkbox-group-supporting-tracking:var(--md-sys-typescale-body-medium-tracking, 0);--scb-checkbox-group-supporting-weight:var(--md-sys-typescale-body-medium-weight, var(--weight-regular, 400));--scb-checkbox-group-error-icon-size:var(--icon-size-small, 20px)}:host([orientation='horizontal']){--scb-checkbox-gap:var(--spacing-8, 32px)}:host([size='small']){--scb-checkbox-group-supporting-font-size:var(--md-sys-typescale-body-small-size, 14px);--scb-checkbox-group-supporting-line-height:var(--md-sys-typescale-body-small-line-height, 20px);--scb-checkbox-group-supporting-tracking:var(--md-sys-typescale-body-small-tracking, 0);--scb-checkbox-group-supporting-weight:var(--md-sys-typescale-body-small-weight, var(--weight-regular, 400));--scb-checkbox-group-error-icon-size:var(--icon-size-extra-small, 16px)}:host([size='large']){--scb-checkbox-group-supporting-font-size:var(--md-sys-typescale-body-large-size, 18px);--scb-checkbox-group-supporting-line-height:var(--md-sys-typescale-body-large-line-height, 26px);--scb-checkbox-group-supporting-tracking:var(--md-sys-typescale-body-large-tracking, 0);--scb-checkbox-group-supporting-weight:var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400));--scb-checkbox-group-error-icon-size:var(--icon-size-medium, 24px)}.g{display:flex;flex-direction:var(--_dir, column);align-items:flex-start;gap:var(--scb-checkbox-gap)}.supporting-text{display:block;margin-block-start:var(--spacing-3, 8px);color:var(--md-sys-color-on-surface-variant);font-family:var(--brand-font, 'Inter', sans-serif);font-size:var(--scb-checkbox-group-supporting-font-size);line-height:var(--scb-checkbox-group-supporting-line-height);font-weight:var(--scb-checkbox-group-supporting-weight);letter-spacing:var(--scb-checkbox-group-supporting-tracking)}.supporting-text md-icon{display:inline-flex;color:var(--md-sys-color-error);--md-icon-size:var(--scb-checkbox-group-error-icon-size);font-size:var(--scb-checkbox-group-error-icon-size);line-height:1;margin-inline-start:var(--spacing-2, 4px);vertical-align:-.18em}:host([error]) .supporting-text{color:var(--md-sys-color-error)}::slotted(scb-checkbox){--scb-checkbox-gap:0}:host([error]) ::slotted(scb-checkbox){--md-checkbox-outline-color:var(--md-sys-color-error);--md-checkbox-hover-outline-color:var(--md-sys-color-error);--md-checkbox-focus-outline-color:var(--md-sys-color-error);--md-checkbox-pressed-outline-color:var(--md-sys-color-error)}`,v);function T(r){const t=r.hasAttribute("data-name-from-group");this.name?(!r.hasAttribute("name")||t)&&(r.setAttribute("name",this.name),r.setAttribute("data-name-from-group","")):t&&(r.removeAttribute("name"),r.removeAttribute("data-name-from-group"))}function z(){for(const r of c(u,this).call(this))this._initialChecked.has(r)||this._initialChecked.set(r,r.checked===!0||r.hasAttribute("checked"))}function E(){return c(u,this).call(this).some(r=>r.checked===!0)}function h(){const r=!this.disabled&&this.required&&!s(i,this,E).call(this),t=this.disabled?"":this._customValidationMessage||(r?this.errorText||"Välj minst ett alternativ.":""),e=this.error,l=this._validationMessage;if(this._internals){const g=t?this._customValidationMessage?{customError:!0}:{valueMissing:!0}:{};this._internals.setValidity(g,t,this.shadowRoot?.querySelector(".g")??void 0)}this._validationMessage=t,this.error=this.disabled?!1:t?this._hasValidationBeenReported||e:e&&!this._hasValidationBeenReported&&!l,this.toggleAttribute("aria-invalid",this.error),(e!==this.error||l!==this._validationMessage)&&this.requestUpdate()}function L(){return this.error?this._validationMessage||this.errorText||"Ogiltigt val.":this.supportingText}function b(){this._internals&&this._internals.setFormValue(null)}function w(){const r=s(i,this,m).call(this,this.spacing),t=s(i,this,m).call(this,this.spacingTop)??r,e=s(i,this,m).call(this,this.spacingBottom)??r,l=s(i,this,m).call(this,this.spacingLeft),g=s(i,this,m).call(this,this.spacingRight);t?this.style.setProperty("--scb-checkbox-group-spacing-block-start",t):this.style.removeProperty("--scb-checkbox-group-spacing-block-start"),e?this.style.setProperty("--scb-checkbox-group-spacing-block-end",e):this.style.removeProperty("--scb-checkbox-group-spacing-block-end"),l?this.style.setProperty("--scb-checkbox-group-spacing-inline-start",l):this.style.removeProperty("--scb-checkbox-group-spacing-inline-start"),g?this.style.setProperty("--scb-checkbox-group-spacing-inline-end",g):this.style.removeProperty("--scb-checkbox-group-spacing-inline-end")}function m(r){if(!r)return;const t=String(r).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}a([n({type:String})],o.prototype,"name",void 0);a([n({type:String,reflect:!0})],o.prototype,"orientation",void 0);a([n({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0);a([n({type:Boolean,reflect:!0})],o.prototype,"required",void 0);a([n({type:Boolean,reflect:!0})],o.prototype,"error",void 0);a([n({type:String,attribute:"aria-label"})],o.prototype,"ariaLabel",void 0);a([n({type:String,attribute:"supporting-text"})],o.prototype,"supportingText",void 0);a([n({type:String,attribute:"error-text"})],o.prototype,"errorText",void 0);a([n({type:String,reflect:!0})],o.prototype,"size",void 0);a([n({type:String,reflect:!0})],o.prototype,"spacing",void 0);a([n({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",void 0);a([n({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",void 0);a([n({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",void 0);a([n({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",void 0);o=a([M("scb-checkbox-group")],o);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc",
-    "version":  "0.1.129",
+    "version":  "0.1.131",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -472,5 +472,5 @@
                                                         },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "EC1B3CCF9970F32B80DBFF7CA20CDC58781F126F37A933658BA0A3267AA0EF2A"
+    "buildHash":  "74D54EE59309B4A054E039954535E2150D5A883613C47504A1D732332E180E9E"
 }

package/scb-checkbox/scb-checkbox-group.js

@@ -1,19 +1,27 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
-import { LitElement as t, css as n, html as r } from "lit";
-import { customElement as i, property as a } from "lit/decorators.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
 //#region src/scb-components/scb-checkbox/scb-checkbox-group.ts
-var o = class extends t {
-	constructor(...e) {
-		super(...e), this.orientation = "vertical", this.disabled = !1, this.size = "medium", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.#e = () => {
-			let e = this.shadowRoot?.querySelector("slot");
-			if (!e) return;
-			let t = e.assignedElements({ flatten: !0 }).filter((e) => e.tagName.toLowerCase() === "scb-checkbox");
-			for (let e of t) {
-				this.disabled ? e.setAttribute("disabled", "") : e.removeAttribute("disabled"), this.orientation === "horizontal" ? e.setAttribute("orientation", "horizontal") : e.removeAttribute("orientation");
-				let t = e.hasAttribute("data-size-from-group");
-				this.size === "medium" ? t && (e.removeAttribute("size"), e.removeAttribute("data-size-from-group")) : (!e.hasAttribute("size") || t) && (e.setAttribute("size", this.size), e.setAttribute("data-size-from-group", ""));
+var s = class extends t {
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this.name = "", this.orientation = "vertical", this.disabled = !1, this.required = !1, this.error = !1, this.ariaLabel = null, this.supportingText = "", this.errorText = "", this.size = "medium", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._internals = null, this._form = null, this._formResetHandler = null, this._formSubmitHandler = null, this._initialChecked = /* @__PURE__ */ new WeakMap(), this._customValidationMessage = "", this._validationMessage = "", this._hasValidationBeenReported = !1, this._supportingTextId = `scb-checkbox-group-supporting-${Math.random().toString(36).slice(2, 11)}`, this.#e = () => {
+			let e = this.#t();
+			for (let t of e) {
+				this.#n(t), this.disabled ? t.setAttribute("disabled", "") : t.removeAttribute("disabled"), this.orientation === "horizontal" ? t.setAttribute("orientation", "horizontal") : t.removeAttribute("orientation");
+				let e = t.hasAttribute("data-size-from-group");
+				this.size === "medium" ? e && (t.removeAttribute("size"), t.removeAttribute("data-size-from-group")) : (!t.hasAttribute("size") || e) && (t.setAttribute("size", this.size), t.setAttribute("data-size-from-group", ""));
 			}
-		};
+			this.#r(), this.#c(), this.#o();
+		}, this.#t = () => {
+			let e = this.shadowRoot?.querySelector("slot");
+			return e ? e.assignedElements({ flatten: !0 }).filter((e) => e.tagName.toLowerCase() === "scb-checkbox") : [];
+		}, this.#i = (e) => {
+			e.target !== this && e.composedPath().find((e) => e?.tagName?.toLowerCase() === "scb-checkbox") && (this.#c(), this.#o());
+		}, "attachInternals" in this && (this._internals = this.attachInternals());
 	}
 	static {
 		this.styles = n`
@@ -26,6 +34,12 @@ var o = class extends t {
       margin-block-end: var(--scb-checkbox-group-spacing-block-end, 0);
       margin-inline-start: var(--scb-checkbox-group-spacing-inline-start, 0);
       margin-inline-end: var(--scb-checkbox-group-spacing-inline-end, 0);
+
+      --scb-checkbox-group-supporting-font-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-checkbox-group-supporting-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-checkbox-group-supporting-tracking: var(--md-sys-typescale-body-medium-tracking, 0);
+      --scb-checkbox-group-supporting-weight: var(--md-sys-typescale-body-medium-weight, var(--weight-regular, 400));
+      --scb-checkbox-group-error-icon-size: var(--icon-size-small, 20px);
     }
 
     /* Horisontell standard-spacing mellan items om spacing för gruppen inte overrideas via CSS-variabel */
@@ -33,6 +47,22 @@ var o = class extends t {
       --scb-checkbox-gap: var(--spacing-8, 32px);
     }
 
+    :host([size='small']) {
+      --scb-checkbox-group-supporting-font-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-checkbox-group-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-checkbox-group-supporting-tracking: var(--md-sys-typescale-body-small-tracking, 0);
+      --scb-checkbox-group-supporting-weight: var(--md-sys-typescale-body-small-weight, var(--weight-regular, 400));
+      --scb-checkbox-group-error-icon-size: var(--icon-size-extra-small, 16px);
+    }
+
+    :host([size='large']) {
+      --scb-checkbox-group-supporting-font-size: var(--md-sys-typescale-body-large-size, 18px);
+      --scb-checkbox-group-supporting-line-height: var(--md-sys-typescale-body-large-line-height, 26px);
+      --scb-checkbox-group-supporting-tracking: var(--md-sys-typescale-body-large-tracking, 0);
+      --scb-checkbox-group-supporting-weight: var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400));
+      --scb-checkbox-group-error-icon-size: var(--icon-size-medium, 24px);
+    }
+
     .g {
       display: flex;
       flex-direction: var(--_dir, column);
@@ -40,65 +70,188 @@ var o = class extends t {
       gap: var(--scb-checkbox-gap);
     }
 
+    .supporting-text {
+      display: block;
+      margin-block-start: var(--spacing-3, 8px);
+      color: var(--md-sys-color-on-surface-variant);
+      font-family: var(--brand-font, 'Inter', sans-serif);
+      font-size: var(--scb-checkbox-group-supporting-font-size);
+      line-height: var(--scb-checkbox-group-supporting-line-height);
+      font-weight: var(--scb-checkbox-group-supporting-weight);
+      letter-spacing: var(--scb-checkbox-group-supporting-tracking);
+    }
+
+    .supporting-text md-icon {
+      display: inline-flex;
+      color: var(--md-sys-color-error);
+      --md-icon-size: var(--scb-checkbox-group-error-icon-size);
+      font-size: var(--scb-checkbox-group-error-icon-size);
+      line-height: 1;
+      margin-inline-start: var(--spacing-2, 4px);
+      vertical-align: -0.18em;
+    }
+
+    :host([error]) .supporting-text {
+      color: var(--md-sys-color-error);
+    }
+
     /* När checkboxar ligger i en grupp ska spacing ägas av gruppen, inte av enskilda items */
     ::slotted(scb-checkbox) {
       --scb-checkbox-gap: 0;
     }
+
+    :host([error]) ::slotted(scb-checkbox) {
+      --md-checkbox-outline-color: var(--md-sys-color-error);
+      --md-checkbox-hover-outline-color: var(--md-sys-color-error);
+      --md-checkbox-focus-outline-color: var(--md-sys-color-error);
+      --md-checkbox-pressed-outline-color: var(--md-sys-color-error);
+    }
   `;
 	}
 	render() {
-		let e = this.orientation === "horizontal" ? "row" : "column";
+		let e = this.orientation === "horizontal" ? "row" : "column", t = this.#s();
 		return r`
-      <div class="g" role="group" aria-disabled=${String(this.disabled)} style=${`--_dir:${e}`}>
+      <div
+        class="g"
+        role="group"
+        aria-disabled=${String(this.disabled)}
+        aria-required=${String(this.required)}
+        aria-invalid=${this.error ? "true" : "false"}
+        aria-describedby=${t ? this._supportingTextId : i}
+        aria-label=${this.ariaLabel ?? i}
+        style=${`--_dir:${e}`}
+      >
         <slot @slotchange=${this.#e}></slot>
       </div>
+      ${t ? r`
+            <div id=${this._supportingTextId} class="supporting-text">
+              <span>${t}</span>
+              ${this.error ? r`<md-icon aria-hidden="true">error</md-icon>` : i}
+            </div>
+          ` : i}
     `;
 	}
 	firstUpdated() {
-		this.#t(), this.#e();
+		this.#l(), this.#e(), this.#r(), this.addEventListener("input", this.#i), this.addEventListener("change", this.#i), this._form = this.closest("form"), this._form && (this._formResetHandler = () => {
+			for (let e of this.#t()) e.checked = this._initialChecked.get(e) ?? e.hasAttribute("checked");
+			this.error = !1, this._hasValidationBeenReported = !1, this.#e(), this.#c(), this.#o();
+		}, this._formSubmitHandler = (e) => {
+			this.reportValidity() || (e.preventDefault(), e.stopPropagation());
+		}, this._form.addEventListener("reset", this._formResetHandler, !0), this._form.addEventListener("submit", this._formSubmitHandler, !0)), this.#c(), this.#o();
+	}
+	disconnectedCallback() {
+		this.removeEventListener("input", this.#i), this.removeEventListener("change", this.#i), this._form && this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0), this._form && this._formSubmitHandler && this._form.removeEventListener("submit", this._formSubmitHandler, !0), super.disconnectedCallback();
 	}
 	updated(e) {
-		(e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#t(), (e.has("disabled") || e.has("orientation") || e.has("size")) && this.#e();
+		(e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#l(), (e.has("name") || e.has("disabled") || e.has("orientation") || e.has("size") || e.has("required")) && this.#e(), (e.has("disabled") || e.has("name")) && this.#c(), (e.has("disabled") || e.has("required") || e.has("errorText")) && this.#o();
+	}
+	get form() {
+		return this._internals?.form ?? this._form;
+	}
+	get validity() {
+		return this._internals?.validity;
+	}
+	get validationMessage() {
+		return this._internals?.validationMessage || this._validationMessage;
+	}
+	get willValidate() {
+		return this._internals?.willValidate ?? !this.disabled;
+	}
+	get labels() {
+		return this._internals?.labels;
+	}
+	checkValidity() {
+		return this.#o(), this._internals?.checkValidity() ?? !this.error;
+	}
+	reportValidity() {
+		return this._hasValidationBeenReported = !0, this.#o(), this._internals?.reportValidity() ?? !this.error;
+	}
+	setCustomValidity(e) {
+		this._customValidationMessage = String(e ?? ""), this.#o();
+	}
+	formDisabledCallback(e) {
+		this.disabled = e, e && (this._hasValidationBeenReported = !1), this.#o();
 	}
 	#e;
-	#t() {
-		let e = this.#n(this.spacing), t = this.#n(this.spacingTop) ?? e, n = this.#n(this.spacingBottom) ?? e, r = this.#n(this.spacingLeft), i = this.#n(this.spacingRight);
+	#t;
+	#n(e) {
+		let t = e.hasAttribute("data-name-from-group");
+		this.name ? (!e.hasAttribute("name") || t) && (e.setAttribute("name", this.name), e.setAttribute("data-name-from-group", "")) : t && (e.removeAttribute("name"), e.removeAttribute("data-name-from-group"));
+	}
+	#r() {
+		for (let e of this.#t()) this._initialChecked.has(e) || this._initialChecked.set(e, e.checked === !0 || e.hasAttribute("checked"));
+	}
+	#i;
+	#a() {
+		return this.#t().some((e) => e.checked === !0);
+	}
+	#o() {
+		let e = !this.disabled && this.required && !this.#a(), t = this.disabled ? "" : this._customValidationMessage || (e ? this.errorText || "Välj minst ett alternativ." : ""), n = this.error, r = this._validationMessage;
+		if (this._internals) {
+			let e = t ? this._customValidationMessage ? { customError: !0 } : { valueMissing: !0 } : {};
+			this._internals.setValidity(e, t, this.shadowRoot?.querySelector(".g") ?? void 0);
+		}
+		this._validationMessage = t, this.error = this.disabled ? !1 : t ? this._hasValidationBeenReported || n : n && !this._hasValidationBeenReported && !r, this.toggleAttribute("aria-invalid", this.error), (n !== this.error || r !== this._validationMessage) && this.requestUpdate();
+	}
+	#s() {
+		return this.error ? this._validationMessage || this.errorText || "Ogiltigt val." : this.supportingText;
+	}
+	#c() {
+		this._internals && this._internals.setFormValue(null);
+	}
+	#l() {
+		let e = this.#u(this.spacing), t = this.#u(this.spacingTop) ?? e, n = this.#u(this.spacingBottom) ?? e, r = this.#u(this.spacingLeft), i = this.#u(this.spacingRight);
 		t ? this.style.setProperty("--scb-checkbox-group-spacing-block-start", t) : this.style.removeProperty("--scb-checkbox-group-spacing-block-start"), n ? this.style.setProperty("--scb-checkbox-group-spacing-block-end", n) : this.style.removeProperty("--scb-checkbox-group-spacing-block-end"), r ? this.style.setProperty("--scb-checkbox-group-spacing-inline-start", r) : this.style.removeProperty("--scb-checkbox-group-spacing-inline-start"), i ? this.style.setProperty("--scb-checkbox-group-spacing-inline-end", i) : this.style.removeProperty("--scb-checkbox-group-spacing-inline-end");
 	}
-	#n(e) {
+	#u(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([a({
+e([o({ type: String })], s.prototype, "name", void 0), e([o({
 	type: String,
 	reflect: !0
-})], o.prototype, "orientation", void 0), e([a({
+})], s.prototype, "orientation", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([o({
 	type: Boolean,
 	reflect: !0
-})], o.prototype, "disabled", void 0), e([a({
+})], s.prototype, "required", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "error", void 0), e([o({
+	type: String,
+	attribute: "aria-label"
+})], s.prototype, "ariaLabel", void 0), e([o({
+	type: String,
+	attribute: "supporting-text"
+})], s.prototype, "supportingText", void 0), e([o({
+	type: String,
+	attribute: "error-text"
+})], s.prototype, "errorText", void 0), e([o({
 	type: String,
 	reflect: !0
-})], o.prototype, "size", void 0), e([a({
+})], s.prototype, "size", void 0), e([o({
 	type: String,
 	reflect: !0
-})], o.prototype, "spacing", void 0), e([a({
+})], s.prototype, "spacing", void 0), e([o({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0
-})], o.prototype, "spacingTop", void 0), e([a({
+})], s.prototype, "spacingTop", void 0), e([o({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0
-})], o.prototype, "spacingBottom", void 0), e([a({
+})], s.prototype, "spacingBottom", void 0), e([o({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0
-})], o.prototype, "spacingLeft", void 0), e([a({
+})], s.prototype, "spacingLeft", void 0), e([o({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0
-})], o.prototype, "spacingRight", void 0), o = e([i("scb-checkbox-group")], o);
+})], s.prototype, "spacingRight", void 0), s = e([a("scb-checkbox-group")], s);
 //#endregion
-export { o as ScbCheckboxGroup };
+export { s as ScbCheckboxGroup };

package/scb-components/scb-checkbox/scb-checkbox-group.d.ts

@@ -2,18 +2,45 @@ import { LitElement } from 'lit';
 type ScbCheckboxSize = 'small' | 'medium' | 'large';
 export declare class ScbCheckboxGroup extends LitElement {
     #private;
+    static formAssociated: boolean;
+    name: string;
     orientation: 'vertical' | 'horizontal';
     disabled: boolean;
+    required: boolean;
+    error: boolean;
+    ariaLabel: string | null;
+    supportingText: string;
+    errorText: string;
     size: ScbCheckboxSize;
     spacing: undefined;
     spacingTop: undefined;
     spacingBottom: undefined;
     spacingLeft: undefined;
     spacingRight: undefined;
+    private _internals;
+    private _form;
+    private _formResetHandler;
+    private _formSubmitHandler;
+    private _initialChecked;
+    private _customValidationMessage;
+    private _validationMessage;
+    private _hasValidationBeenReported;
+    private _supportingTextId;
+    constructor();
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
     firstUpdated(): void;
+    disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState | undefined;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    get labels(): NodeList | undefined;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    formDisabledCallback(disabled: boolean): void;
 }
 declare global {
     interface HTMLElementTagNameMap {