scb-wc-test 0.1.104 → 0.1.106

package/mvc/components/scb-pagination/scb-pagination.js

@@ -1,52 +1,111 @@
-import{a as g,n as d,i as b,x as s,t as h}from"../../vendor/vendor.js";import"../scb-link/scb-link.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";(function(){try{var p=typeof globalThis<"u"?globalThis:window;if(!p.__scb_ce_guard_installed__){p.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(n,i,r){try{customElements.get(n)||e(n,i,r)}catch(a){var o=String(a||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,c=(p,e,n,i)=>{for(var r=i>1?void 0:i?v(e,n):e,o=p.length-1,a;o>=0;o--)(a=p[o])&&(r=(i?a(e,n,r):a(r))||r);return i&&r&&u(e,n,r),r};let l=class extends b{constructor(){super(...arguments),this.variant="icon-text",this.page=1,this.totalPages=0,this.pagingHref="/products?page=",this.paginationAriaLabel="Paginering",this.currentAriaLabel="Nuvarande sida, ",this.pagingNumberAriaLabel="Gå till sida ",this.isNarrow=window.innerWidth<=768,this._onResize=()=>{this.isNarrow=window.innerWidth<=768}}_prevPage(){this.page>1&&this.page--,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:this.page}}))}_nextPage(){this.page<this.totalPages&&this.page++,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:this.page}}))}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._onResize),this._onResize()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._onResize)}render(){if(this.totalPages===0)return null;const p=this.variant?`${this.variant.toLowerCase()}`:"",e=[],{page:n,totalPages:i}=this,r=window.innerWidth<=768,o=r?1:2,a=t=>t===n?s`
-        <li>
-            <span
-            class="page-number active"
-            aria-current="page"
-            aria-label="${this.currentAriaLabel} ${t}"
-            >${t}</span>
-        </li>
-        `:s`
-        <li>
-            <scb-link
-                class="page-number${t===n?" active":""}"
+import{a as d,n as g,i as h,x as o,t as b}from"../../vendor/vendor.js";import"../scb-link/scb-link.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(s,i,r){try{customElements.get(s)||e(s,i,r)}catch(n){var c=String(n||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,p=(a,e,s,i)=>{for(var r=i>1?void 0:i?v(e,s):e,c=a.length-1,n;c>=0;c--)(n=a[c])&&(r=(i?n(e,s,r):n(r))||r);return i&&r&&u(e,s,r),r};let l=class extends h{constructor(){super(...arguments),this.variant="icon-text",this.page=1,this.totalPages=0,this.pagingHref="/products?page=",this.paginationAriaLabel="Paginering",this.currentAriaLabel="Nuvarande sida, ",this.pagingNumberAriaLabel="Gå till sida ",this.isNarrow=window.innerWidth<=768,this.spacing="",this.spacingTop="",this.spacingBottom="",this._onResize=()=>{this.isNarrow=window.innerWidth<=768}}_prevPage(){this.page>1&&this.page--,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:this.page}}))}_nextPage(){this.page<this.totalPages&&this.page++,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:this.page}}))}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._onResize),this._onResize()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._onResize)}__resolveSpacingToken(a){const e=(a??"").trim();return e?/^(?:[0-9]|1[0-4])$/.test(e)?`var(--spacing-${e})`:e:""}__applySpacing(){const a=this.__resolveSpacingToken(this.spacingTop||this.spacing),e=this.__resolveSpacingToken(this.spacingBottom||this.spacing);a?this.style.marginBlockStart=a:this.style.removeProperty("margin-block-start"),e?this.style.marginBlockEnd=e:this.style.removeProperty("margin-block-end")}updated(a){super.updated(a),(a.has("spacing")||a.has("spacingTop")||a.has("spacingBottom"))&&this.__applySpacing()}render(){if(this.totalPages===0)return null;const a=this.variant?`${this.variant.toLowerCase()}`:"",e=[],{page:s,totalPages:i}=this,r=window.innerWidth<=768,c=r?1:2,n=t=>t===s?o`
+            <li>
+              <span
+                class="page-number active"
+                aria-current="page"
+                aria-label="${this.currentAriaLabel} ${t}"
+                >${t}</span
+              >
+            </li>
+          `:o`
+            <li>
+              <scb-link
+                class="page-number${t===s?" active":""}"
                 @click=${()=>{this.page=t,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:t}}))}}
-                aria-current=${t===n?"page":void 0}
+                aria-current=${t===s?"page":void 0}
                 aria-label="${this.pagingNumberAriaLabel} ${t}"
                 href=${this.pagingHref}${t}
-                ?disabled=${t===n}>${t}
-            </scb-link>
-        </li>
-    `;if(i<=8)for(let t=1;t<=i;t++)e.push(a(t));else if(e.push(a(1)),n<=4&&!r){for(let t=2;t<=5;t++)e.push(a(t));i>6?(e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),e.push(a(i))):i===6&&e.push(a(i))}else if(n<=3&&r){for(let t=2;t<=3;t++)e.push(a(t));i>4?(e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),e.push(a(i))):i===4&&e.push(a(i))}else if(n>=i-(o+1)){e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);for(let t=i-o*2;t<=i;t++)t>1&&e.push(a(t))}else{e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);for(let t=n-o;t<=n+o;t++)t>1&&t<i&&e.push(a(t));e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),e.push(a(i))}return r?s`      
-         <nav aria-label="${this.paginationAriaLabel}" class="pagination ${p}">
-            <div class="pagination-row">
-                <div class="prev">
-                    ${this.variant==="icon"?s`<scb-icon-button icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page===1} aria-label="Föregående sida"></scb-icon-button>`:s`<scb-button variant="text" label="Föregående" icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page===1} aria-label="Föregående sida"></scb-button>`}       
-                </div>
-                <ol>
-                    ${e}
-                </ol>
-            </div>
-            <div class="next">
-            ${this.variant==="icon"?s`<scb-icon-button icon="chevron_right" @click=${this._nextPage} ?disabled=${this.page===this.totalPages} aria-label="Nästa sida"></scb-icon-button>`:s`<scb-button variant="text" label="Nästa" icon="chevron_right" iconPosition="right" @click=${this._nextPage} ?disabled=${this.page===this.totalPages} aria-label="Nästa sida" trailing-icon></scb-button>`}
-            </div>
-        </nav>
-      `:s`
-        <nav aria-label="${this.paginationAriaLabel}" class="pagination ${p}">
-            <div class="pagination-row">
-                <div class="prev">
-                 ${this.variant==="icon"?s`<scb-icon-button icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page===1} aria-label="Föregående sida"></scb-icon-button>`:s`<scb-button variant="text" label="Föregående" icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page===1} aria-label="Föregående sida"></scb-button>`}
-                </div>
-                <ol>
-                    ${e}
-                </ol>
-                <div class="next">
-                    ${this.variant==="icon"?s`<scb-icon-button icon="chevron_right" @click=${this._nextPage} ?disabled=${this.page===this.totalPages} aria-label="Nästa sida"></scb-icon-button>`:s`<scb-button variant="text" label="Nästa" icon="chevron_right" iconPosition="right" @click=${this._nextPage} ?disabled=${this.page===this.totalPages} aria-label="Nästa sida" trailing-icon></scb-button>`}
-                </div>
+                ?disabled=${t===s}
+                >${t}</scb-link
+              >
+            </li>
+          `;if(i<=8)for(let t=1;t<=i;t++)e.push(n(t));else if(e.push(n(1)),s<=4&&!r){for(let t=2;t<=5;t++)e.push(n(t));i>6?(e.push(o`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),e.push(n(i))):i===6&&e.push(n(i))}else if(s<=3&&r){for(let t=2;t<=3;t++)e.push(n(t));i>4?(e.push(o`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),e.push(n(i))):i===4&&e.push(n(i))}else if(s>=i-(c+1)){e.push(o`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);for(let t=i-c*2;t<=i;t++)t>1&&e.push(n(t))}else{e.push(o`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);for(let t=s-c;t<=s+c;t++)t>1&&t<i&&e.push(n(t));e.push(o`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),e.push(n(i))}return r?o`
+        <nav aria-label="${this.paginationAriaLabel}" class="pagination ${a}">
+          <div class="pagination-row">
+            <div class="prev">
+              ${this.variant==="icon"?o`<scb-icon-button
+                    icon="chevron_left"
+                    @click=${this._prevPage}
+                    ?disabled=${this.page===1}
+                    aria-label="Föregående sida"
+                  ></scb-icon-button>`:o`<scb-button
+                    variant="text"
+                    label="Föregående"
+                    icon="chevron_left"
+                    @click=${this._prevPage}
+                    ?disabled=${this.page===1}
+                    aria-label="Föregående sida"
+                  ></scb-button>`}
             </div>
+            <ol>
+              ${e}
+            </ol>
+          </div>
+          <div class="next">
+            ${this.variant==="icon"?o`<scb-icon-button
+                  icon="chevron_right"
+                  @click=${this._nextPage}
+                  ?disabled=${this.page===this.totalPages}
+                  aria-label="Nästa sida"
+                ></scb-icon-button>`:o`<scb-button
+                  variant="text"
+                  label="Nästa"
+                  icon="chevron_right"
+                  iconPosition="right"
+                  @click=${this._nextPage}
+                  ?disabled=${this.page===this.totalPages}
+                  aria-label="Nästa sida"
+                  trailing-icon
+                ></scb-button>`}
+          </div>
         </nav>
-      `}};l.styles=[g`
-    :host .pagination {
+      `:o`
+      <nav aria-label="${this.paginationAriaLabel}" class="pagination ${a}">
+        <div class="pagination-row">
+          <div class="prev">
+            ${this.variant==="icon"?o`<scb-icon-button
+                  icon="chevron_left"
+                  @click=${this._prevPage}
+                  ?disabled=${this.page===1}
+                  aria-label="Föregående sida"
+                ></scb-icon-button>`:o`<scb-button
+                  variant="text"
+                  label="Föregående"
+                  icon="chevron_left"
+                  @click=${this._prevPage}
+                  ?disabled=${this.page===1}
+                  aria-label="Föregående sida"
+                ></scb-button>`}
+          </div>
+          <ol>
+            ${e}
+          </ol>
+          <div class="next">
+            ${this.variant==="icon"?o`<scb-icon-button
+                  icon="chevron_right"
+                  @click=${this._nextPage}
+                  ?disabled=${this.page===this.totalPages}
+                  aria-label="Nästa sida"
+                ></scb-icon-button>`:o`<scb-button
+                  variant="text"
+                  label="Nästa"
+                  icon="chevron_right"
+                  iconPosition="right"
+                  @click=${this._nextPage}
+                  ?disabled=${this.page===this.totalPages}
+                  aria-label="Nästa sida"
+                  trailing-icon
+                ></scb-button>`}
+          </div>
+        </div>
+      </nav>
+    `}};l.styles=[d`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      :host .pagination {
         --md-text-button-label-text-color: var(--md-sys-color-on-surface, #0F0865);
         --md-text-button-pressed-state-layer-color: var(--md-sys-color-on-surface, #0F0865);
         --md-text-button-focus-label-text-color: var(--md-sys-color-on-surface, #0F0865);
@@ -55,68 +114,68 @@ import{a as g,n as d,i as b,x as s,t as h}from"../../vendor/vendor.js";import"..
         --md-text-button-label-text-weight: var(--weight-regular, 400);
         --md-text-button-label-text-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
         --md-text-button-label-text-size: var(--md-sys-typescale-body-medium-size, 16px);
-        --md-text-button-icon-color : var(--md-sys-color-on-surface, #0F0865);
-        --md-text-button-focus-icon-color : var(--md-sys-color-on-surface, #0F0865);
-        --md-text-button-hover-icon-color : var(--md-sys-color-on-surface, #0F0865);
-        --md-text-button-pressed-icon-color : var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-focus-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-hover-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-pressed-icon-color: var(--md-sys-color-on-surface, #0F0865);
         --scb-link-decoration: none;
         --scb-link-color: var(--md-sys-color-on-surface, #0F0865);
 
         scb-link.page-number a {
-            cursor: pointer;
-            text-decoration: none;
-            display: inline-flex;
+          cursor: pointer;
+          text-decoration: none;
+          display: inline-flex;
         }
-    }
+      }
 
-    .pagination {
+      .pagination {
         width: 100%;
         display: flex;
         flex-direction: column;
         gap: 0;
-    }
-    .pagination-row {
+      }
+      .pagination-row {
         width: 100%;
         display: flex;
         flex-direction: row;
         align-items: center;
         gap: 4px;
-    }
-    .pagination-row .prev {
+      }
+      .pagination-row .prev {
         display: flex;
         justify-content: flex-start;
         width: auto;
-    }
-    .pagination-row ol {
+      }
+      .pagination-row ol {
         width: auto;
         display: flex;
         flex-direction: row;
-        justify-content: flex-start; 
+        justify-content: flex-start;
         gap: 4px;
         margin: 0;
         padding: 0;
         list-style: none;
-    }
-    .pagination-row ol li {
+      }
+      .pagination-row ol li {
         min-width: 40px;
         min-height: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
-    }
-    .pagination-row .next {
+      }
+      .pagination-row .next {
         display: flex;
         justify-content: flex-start;
-        align-items: center; 
+        align-items: center;
         width: auto;
-        margin-top: 0;      
-    }
-    scb-link.page-number a {
+        margin-top: 0;
+      }
+      scb-link.page-number a {
         cursor: pointer;
         text-decoration: none;
         display: inline-flex;
-    }
-    .page-number.active {
+      }
+      .page-number.active {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -126,50 +185,49 @@ import{a as g,n as d,i as b,x as s,t as h}from"../../vendor/vendor.js";import"..
         text-align: center;
         width: 40px;
         height: 40px;
-    }
-    .page-number.active {
+      }
+      .page-number.active {
         font-family: var(--brand-font, 'Inter', sans-serif);
-    }
-    .ellipsis {
+      }
+      .ellipsis {
         margin: 0 4px;
         color: #888;
         user-select: none;
         pointer-events: none;
-    }
-    scb-button[disabled] {
+      }
+      scb-button[disabled] {
         opacity: 0.5;
         pointer-events: none;
       }
 
-@media (max-width: 768px) {
-
-    .pagination .prev {
-        display: flex;
-        justify-content: flex-start;
-    }
-    .pagination .next {
-        width: 100%;
-        margin-top: 8px;
-    }
- }
+      @media (max-width: 768px) {
+        .pagination .prev {
+          display: flex;
+          justify-content: flex-start;
+        }
+        .pagination .next {
+          width: 100%;
+          margin-top: 8px;
+        }
+      }
 
-@media (max-width: 390px) {
-    .pagination-row {
-        flex-direction: column;
-        gap: 0;
-    }
-    .pagination-row .prev {
-        width: 100%;
-        margin-bottom: 8px;
-        align-items: center;
-    }
-    .pagination-row ol {
-        width: 100%;
-        align-items: center;
-    }
-    .pagination-row .next {
-        width: 100%;
-        margin-top: 8px;
-    }
-  }
-`];c([d({type:String})],l.prototype,"variant",2);c([d({type:Number})],l.prototype,"page",2);c([d({type:Number,attribute:"total-pages"})],l.prototype,"totalPages",2);c([d({type:String,attribute:"paging-href"})],l.prototype,"pagingHref",2);c([d({type:String,attribute:"pagination-aria-label"})],l.prototype,"paginationAriaLabel",2);c([d({type:String,attribute:"current-aria-label"})],l.prototype,"currentAriaLabel",2);c([d({type:String,attribute:"paging-number-aria-label"})],l.prototype,"pagingNumberAriaLabel",2);c([d({type:Boolean})],l.prototype,"isNarrow",2);l=c([h("scb-pagination")],l);
+      @media (max-width: 390px) {
+        .pagination-row {
+          flex-direction: column;
+          gap: 0;
+        }
+        .pagination-row .prev {
+          width: 100%;
+          margin-bottom: 8px;
+          align-items: center;
+        }
+        .pagination-row ol {
+          width: 100%;
+          align-items: center;
+        }
+        .pagination-row .next {
+          width: 100%;
+          margin-top: 8px;
+        }
+      }
+    `];p([g({type:String})],l.prototype,"variant",2);p([g({type:Number})],l.prototype,"page",2);p([g({type:Number,attribute:"total-pages"})],l.prototype,"totalPages",2);p([g({type:String,attribute:"paging-href"})],l.prototype,"pagingHref",2);p([g({type:String,attribute:"pagination-aria-label"})],l.prototype,"paginationAriaLabel",2);p([g({type:String,attribute:"current-aria-label"})],l.prototype,"currentAriaLabel",2);p([g({type:String,attribute:"paging-number-aria-label"})],l.prototype,"pagingNumberAriaLabel",2);p([g({type:Boolean})],l.prototype,"isNarrow",2);p([g({type:String})],l.prototype,"spacing",2);p([g({type:String,attribute:"spacing-top"})],l.prototype,"spacingTop",2);p([g({type:String,attribute:"spacing-bottom"})],l.prototype,"spacingBottom",2);l=p([b("scb-pagination")],l);

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

@@ -1,4 +1,4 @@
-import{a as b,n as d,i as v,x as _,t as y}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var a=customElements.define.bind(customElements);customElements.define=function(e,i,s){try{customElements.get(e)||a(e,i,s)}catch(o){var r=String(o||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,S=Object.getOwnPropertyDescriptor,f=t=>{throw TypeError(t)},l=(t,a,e,i)=>{for(var s=i>1?void 0:i?S(a,e):a,r=t.length-1,o;r>=0;r--)(o=t[r])&&(s=(i?o(a,e,s):o(s))||s);return i&&s&&m(a,e,s),s},w=(t,a,e)=>a.has(t)||f("Cannot "+e),c=(t,a,e)=>(w(t,a,"read from private field"),e?e.call(t):a.get(t)),p=(t,a,e)=>a.has(t)?f("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(t):a.set(t,e),g,u,h;let n=class extends v{constructor(){super(...arguments),this.name="",this.orientation="vertical",this.disabled=!1,this.ariaLabel=null,this.spacing="item",this.value="",p(this,g,()=>{const t=this.shadowRoot?.querySelector("slot");return t?t.assignedElements({flatten:!0}).filter(a=>a.tagName.toLowerCase()==="scb-radio-button"):[]}),p(this,u,()=>{const t=c(this,g).call(this);if(!t.length)return;let a=null;for(const e of t){const i=e;this.name&&e.setAttribute("name",this.name),this.disabled?e.setAttribute("disabled",""):e.removeAttribute("disabled"),this.orientation==="horizontal"?e.setAttribute("orientation","horizontal"):e.removeAttribute("orientation"),this.spacing==="group"?e.style.setProperty("--scb-radio-gap","0"):e.style.removeProperty("--scb-radio-gap");const s=i.value??e.getAttribute("value")??"",r=typeof i.checked=="boolean"?i.checked:e.hasAttribute("checked");if(this.value){const o=String(s)===this.value;o&&!r?i.checked=!0:!o&&r&&(i.checked=!1)}else r&&a===null&&(a=String(s))}!this.value&&a!==null&&(this.value=a)}),p(this,h,t=>{const a=t.composedPath().find(i=>i?.tagName?.toLowerCase()==="scb-radio-button"),e=a?.value??a?.getAttribute?.("value")??t.target?.value??"";this.value=String(e??""),this.dispatchEvent(new CustomEvent("scb-change",{detail:{value:String(e??""),originalIsTrusted:t?.isTrusted===!0},bubbles:!0,composed:!0}))})}render(){const t=this.orientation==="horizontal"?"row":"column";return _`
+import{a as k,n as c,i as S,x as C,t as w}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,s,a){try{customElements.get(i)||e(i,s,a)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var V=Object.defineProperty,E=Object.getOwnPropertyDescriptor,_=t=>{throw TypeError(t)},l=(t,e,i,s)=>{for(var a=s>1?void 0:s?E(e,i):e,n=t.length-1,o;n>=0;n--)(o=t[n])&&(a=(s?o(e,i,a):o(a))||a);return s&&a&&V(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)),f=(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),u=(t,e,i)=>(y(t,e,"access private method"),i),m,d,g,p,v,b;let r=class extends S{constructor(){super(),f(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="",f(this,m,()=>{const t=this.shadowRoot?.querySelector("slot");return t?t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-radio-button"):[]}),f(this,d,()=>{const t=h(this,m).call(this);if(!t.length)return;let e=null;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")??"",n=typeof s.checked=="boolean"?s.checked:i.hasAttribute("checked");if(this.value){const o=String(a)===this.value;o&&!n?s.checked=!0:!o&&n&&(s.checked=!1)}else n&&e===null&&(e=String(a))}!this.value&&e!==null&&(this.value=e)}),f(this,g,t=>{const e=t.composedPath().find(s=>s?.tagName?.toLowerCase()==="scb-radio-button"),i=e?.value??e?.getAttribute?.("value")??t.target?.value??"";this.value=String(i??""),this.dispatchEvent(new CustomEvent("scb-change",{detail:{value:String(i??""),originalIsTrusted:t?.isTrusted===!0},bubbles:!0,composed:!0}))}),"attachInternals"in this&&(this._internals=this.attachInternals())}render(){const t=this.orientation==="horizontal"?"row":"column";return C`
       <div
         class="g"
         role="radiogroup"
@@ -6,23 +6,34 @@ import{a as b,n as d,i as v,x as _,t as y}from"../../vendor/vendor.js";(function
         aria-label=${this.ariaLabel??""}
         style=${`--_dir:${t}`}
       >
-        <slot @slotchange=${c(this,u)}></slot>
+        <slot @slotchange=${h(this,d)}></slot>
       </div>
-    `}firstUpdated(){c(this,u).call(this),this.addEventListener("change",c(this,h))}disconnectedCallback(){this.removeEventListener("change",c(this,h)),super.disconnectedCallback()}updated(t){(t.has("name")||t.has("disabled")||t.has("orientation")||t.has("spacing")||t.has("value"))&&c(this,u).call(this)}};g=new WeakMap;u=new WeakMap;h=new WeakMap;n.styles=b`
-    :host { display: block; }
+    `}firstUpdated(){u(this,p,v).call(this),h(this,d).call(this),this.addEventListener("change",h(this,g)),this._initialValue=this.value,this._form=this.closest("form"),this._form&&(this._formResetHandler=()=>{this.value=this._initialValue,this.requestUpdate(),h(this,d).call(this),this.__syncFormValue()},this._form.addEventListener("reset",this._formResetHandler,!0)),this.__syncFormValue()}disconnectedCallback(){this.removeEventListener("change",h(this,g)),this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0),super.disconnectedCallback()}updated(t){(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&u(this,p,v).call(this),(t.has("name")||t.has("disabled")||t.has("orientation")||t.has("value"))&&h(this,d).call(this),(t.has("value")||t.has("disabled")||t.has("name"))&&this.__syncFormValue()}formDisabledCallback(t){this.disabled=t}__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)}};m=new WeakMap;d=new WeakMap;g=new WeakMap;p=new WeakSet;v=function(){const t=u(this,p,b).call(this,this.spacing),e=u(this,p,b).call(this,this.spacingTop)??t,i=u(this,p,b).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")};b=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;
     }
-  `;l([d({type:String})],n.prototype,"name",2);l([d({type:String,reflect:!0})],n.prototype,"orientation",2);l([d({type:Boolean,reflect:!0})],n.prototype,"disabled",2);l([d({type:String,attribute:"aria-label"})],n.prototype,"ariaLabel",2);l([d({type:String,reflect:!0})],n.prototype,"spacing",2);l([d({type:String,reflect:!0})],n.prototype,"value",2);n=l([y("scb-radio-group")],n);
+  `;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([w("scb-radio-group")],r);