scb-wc 0.1.2 → 0.1.4

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

@@ -0,0 +1,33 @@
+import{_ as m,b as v,g as y,h as c,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 b}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 k`
+      <div class="g" role="group" aria-disabled=${String(this.disabled)} style=${`--_dir:${t}`}>
+        <slot @slotchange=${b(l,this)}></slot>
+      </div>
+    `}firstUpdated(){n(r,this,f).call(this),b(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"))&&b(l,this).call(this)}},d.styles=v`
+    :host {
+      display: block;
+      /* Vertikal standard-spacing mellan items i gruppen */
+      --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);
+    }
+
+    /* Horisontell standard-spacing mellan items om spacing för gruppen inte overrideas via CSS-variabel */
+    :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);
+    }
+
+    /* När checkboxar ligger i en grupp ska spacing ägas av gruppen, inte av enskilda items */
+    ::slotted(scb-checkbox) {
+      --scb-checkbox-gap: 0;
+    }
+  `,d);function f(){const s=n(r,this,g).call(this,this.spacing),t=n(r,this,g).call(this,this.spacingTop)??s,o=n(r,this,g).call(this,this.spacingBottom)??s,p=n(r,this,g).call(this,this.spacingLeft),e=n(r,this,g).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 g(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([y("scb-checkbox-group")],i);

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

@@ -0,0 +1,140 @@
+import"../../vendor/vendor-material.js";import{_ as I,b as M,g as R,h as c,v as p,y as x}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as o}from"../../vendor/decorate.js";import{n as F,t as n}from"../../vendor/assertClassBrand.js";import{n as _,r as w,t as h}from"../../vendor/classPrivateFieldGet2.js";import"./scb-checkbox-group.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,s,l){try{customElements.get(t)||e(t,s,l)}catch(V){var b=String(V||"");if(b.indexOf("already been used")===-1&&b.indexOf("NotSupportedError")===-1)throw V}}}}catch{}})();var r,u,g,m,k,L=!1,f=0,$=i=>{i.metaKey||i.altKey||i.ctrlKey||(L=!0)},d=()=>{L=!1},C=()=>{f===0&&(window.addEventListener("keydown",$,!0),window.addEventListener("pointerdown",d,!0),window.addEventListener("mousedown",d,!0),window.addEventListener("touchstart",d,!0)),f+=1},z=()=>{f=Math.max(0,f-1),f===0&&(window.removeEventListener("keydown",$,!0),window.removeEventListener("pointerdown",d,!0),window.removeEventListener("mousedown",d,!0),window.removeEventListener("touchstart",d,!0))},a=(r=new WeakSet,u=new WeakMap,g=new WeakMap,m=new WeakMap,k=class extends I{constructor(){super(),F(this,r),w(this,u,void 0),w(this,g,void 0),w(this,m,void 0),this._internals=null,this.disabled=!1,this.indeterminate=!1,this.checked=!1,this.required=!1,this.size="medium",this.label="",this.supportingText="",this.ariaLabel="",this.name="",this.value="on",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._form=null,this._formResetHandler=null,this._initialChecked=!1,this._customValidationMessage="",this._checkboxId="",this._showOuterFocusRing=!1,_(u,this,()=>{this.disabled||this.label?.trim()&&L&&n(r,this,y).call(this,!0)}),_(g,this,()=>{n(r,this,y).call(this,!1)}),_(m,this,()=>{n(r,this,y).call(this,!1)}),"attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),C(),this._checkboxId=this.id||`scb-checkbox-${Math.random().toString(36).slice(2,11)}`,this._initialChecked=this.checked,n(r,this,S).call(this),this.addEventListener("focusin",h(u,this)),this.addEventListener("focusout",h(g,this)),this.addEventListener("pointerdown",h(m,this),!0),this._form=this.closest("form"),this._form&&(this._formResetHandler=()=>{this.checked=this._initialChecked,this.indeterminate=!1,this.__syncFormValue()},this._form.addEventListener("reset",this._formResetHandler,!0)),this.__syncFormValue()}disconnectedCallback(){super.disconnectedCallback(),z(),this.removeEventListener("focusin",h(u,this)),this.removeEventListener("focusout",h(g,this)),this.removeEventListener("pointerdown",h(m,this),!0),this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0)}firstUpdated(){const e=this.shadowRoot?.querySelector("md-checkbox");e&&e.addEventListener("change",()=>{const t=e,s=!!t.checked,l=!!t.indeterminate;this.checked=s,this.indeterminate=l,this.dispatchEvent(new CustomEvent("change",{detail:{checked:s,indeterminate:l},bubbles:!0,composed:!0}))}),this.shadowRoot?.querySelector("label.wrap")?.addEventListener("click",t=>{if(!this.disabled&&!t.composedPath().some(s=>{const l=s;return l?.tagName?.toLowerCase?.()==="md-checkbox"||l?.classList?.contains("box-wrap")})){t.preventDefault();const s=this.shadowRoot.querySelector("md-checkbox");s&&(s.checked=!s.checked,s.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}}),this.__syncInnerAria(),this.__syncValidity(),n(r,this,E).call(this)}updated(e){super.updated(e),e.has("disabled")&&(this.toggleAttribute("aria-disabled",this.disabled),this.disabled&&n(r,this,y).call(this,!1)),(e.has("label")||e.has("supportingText")||e.has("ariaLabel"))&&this.__syncInnerAria(),e.has("label")&&n(r,this,S).call(this),(e.has("checked")||e.has("disabled")||e.has("value"))&&this.__syncFormValue(),(e.has("checked")||e.has("disabled")||e.has("required"))&&this.__syncValidity(),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&n(r,this,E).call(this)}formDisabledCallback(e){this.disabled=e}__syncInnerAria(){const e=this.shadowRoot?.querySelector("md-checkbox")?.shadowRoot;if(!e)return;const t=e.querySelector('[role="checkbox"]')||e.querySelector('input[type="checkbox"]');if(!t)return;const s=!!this.label?.trim(),l=s?`${this._checkboxId}-label`:"",b=this.supportingText?`${this._checkboxId}-supporting-text`:"";s&&l?(t.setAttribute("aria-labelledby",l),t.removeAttribute("aria-label")):(t.removeAttribute("aria-labelledby"),this.ariaLabel?.trim()?t.setAttribute("aria-label",this.ariaLabel.trim()):t.removeAttribute("aria-label")),b?t.setAttribute("aria-describedby",b):t.removeAttribute("aria-describedby")}__getValidationMessage(){return this._customValidationMessage?this._customValidationMessage:this.required&&!this.checked?"Markera det här fältet.":""}__syncValidity(){const e=this.shadowRoot?.querySelector("md-checkbox"),t=this.disabled?"":this.__getValidationMessage();this._internals&&(t?this._internals.setValidity({valueMissing:!0},t,e??void 0):this._internals.setValidity({})),this.toggleAttribute("aria-invalid",!!t)}checkValidity(){return!this.__getValidationMessage()}reportValidity(){return this.__syncValidity(),this._internals?this._internals.reportValidity():this.checkValidity()}setCustomValidity(e){this._customValidationMessage=e,this.__syncValidity()}get validity(){return this._internals?.validity}get validationMessage(){return this._internals?.validationMessage??this.__getValidationMessage()}get willValidate(){return this._internals?.willValidate??!0}__syncFormValue(){if(!this._internals)return;const e=this.disabled||!this.checked?null:this.value;this._internals.setFormValue(e)}render(){const e=this.supportingText?`${this._checkboxId}-supporting-text`:void 0,t=!!this.label?.trim(),s=t?p:this.ariaLabel||p;return x`
+      <label class="wrap">
+        ${t?x`<md-focus-ring class="outer-focus-ring" ?visible=${this._showOuterFocusRing}></md-focus-ring>`:p}
+        <div class="box-wrap">
+          <md-checkbox
+            id="${this._checkboxId}"
+            ?disabled=${this.disabled}
+            ?indeterminate=${this.indeterminate}
+            ?checked=${this.checked}
+            ?required=${this.required}
+            aria-label=${s}
+          ></md-checkbox>
+        </div>
+        ${t?x`<span class="lbl" id="${this._checkboxId}-label">${this.label}</span>`:p}
+      </label>
+
+      ${this.supportingText?x`<div id="${e}" class="supporting-text">
+            ${this.supportingText}
+          </div>`:p}
+      <slot></slot>
+    `}},k.formAssociated=!0,k.styles=M`
+    :host {
+      display: inline-grid;
+      grid-template-columns: auto;
+      grid-template-rows: auto auto;
+      row-gap: 0;
+      font-family: var(--brand-font, 'Inter', sans-serif);
+
+      --scb-checkbox-text-font: var(--md-sys-typescale-body-medium-font);
+      --scb-checkbox-text-size: var(--md-sys-typescale-body-medium-size);
+      --scb-checkbox-text-line-height: var(--md-sys-typescale-body-medium-line-height);
+      --scb-checkbox-text-tracking: var(--md-sys-typescale-body-medium-tracking);
+      --scb-checkbox-text-weight: var(--md-sys-typescale-body-medium-weight, var(--weight-regular, 400));
+
+      margin-block-start: var(--scb-checkbox-spacing-block-start, 0);
+      margin-block-end: var(--scb-checkbox-spacing-block-end, 0);
+      margin-inline-start: var(--scb-checkbox-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-checkbox-spacing-inline-end, 0);
+    }
+
+    :host([size='small']) {
+      --scb-checkbox-text-font: var(--md-sys-typescale-body-small-font);
+      --scb-checkbox-text-size: var(--md-sys-typescale-body-small-size);
+      --scb-checkbox-text-line-height: var(--md-sys-typescale-body-small-line-height);
+      --scb-checkbox-text-tracking: var(--md-sys-typescale-body-small-tracking);
+      --scb-checkbox-text-weight: var(--md-sys-typescale-body-small-weight, var(--weight-regular, 400));
+    }
+
+    :host([size='large']) {
+      --scb-checkbox-text-font: var(--md-sys-typescale-body-large-font);
+      --scb-checkbox-text-size: var(--md-sys-typescale-body-large-size);
+      --scb-checkbox-text-line-height: var(--md-sys-typescale-body-large-line-height);
+      --scb-checkbox-text-tracking: var(--md-sys-typescale-body-large-tracking);
+      --scb-checkbox-text-weight: var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400));
+    }
+
+    :host([orientation='horizontal']) {
+      margin-inline-end: var(--scb-checkbox-spacing-inline-end, var(--scb-checkbox-gap, var(--spacing-7, 24px)));
+    }
+
+    .wrap {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-5, 16px);
+      cursor: pointer;
+      position: relative;
+      overflow: visible;
+    }
+
+    .outer-focus-ring {
+      position: absolute;
+        inset:
+           calc(var(--spacing-2, 4px) * -1)   /* topp */
+           calc(var(--spacing-4, 12px) * -1)  /* höger */
+           calc(var(--spacing-2, 4px) * -1)   /* botten */
+           calc(var(--spacing-4, 12px) * -1); /* vänster */
+      pointer-events: none;
+      --md-focus-ring-shape-start-start: var(--radius-s, 8px);
+      --md-focus-ring-shape-start-end: var(--radius-s, 8px);
+      --md-focus-ring-shape-end-start: var(--radius-s, 8px);
+      --md-focus-ring-shape-end-end: var(--radius-s, px);
+    }
+
+    :host([data-has-label]) md-checkbox::part(focus-ring) {
+      display: none;
+    }
+
+    :host([disabled]) .wrap {
+      cursor: default;
+    }
+
+    .box-wrap {
+      height: var(--scb-checkbox-target, 40px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: visible;
+    }
+
+    md-checkbox {
+      margin: 0;
+    }
+
+    .lbl {
+      color: var(--md-sys-color-on-surface);
+      font-family: var(--scb-checkbox-text-font, var(--brand-font));
+      font-size: var(--scb-checkbox-text-size);
+      line-height: var(--scb-checkbox-text-line-height);
+      font-weight: var(--scb-checkbox-text-weight);
+      letter-spacing: var(--scb-checkbox-text-tracking);
+    }
+
+    :host([disabled]) .lbl {
+      color: var(--n-60);
+    }
+
+    .supporting-text {
+      color: var(--md-sys-color-on-surface-variant);
+      font-family: var(--scb-checkbox-text-font, var(--brand-font));
+      font-size: var(--scb-checkbox-text-size);
+      line-height: var(--scb-checkbox-text-line-height, 20px);
+      font-weight: var(--scb-checkbox-text-weight);
+      letter-spacing: var(--scb-checkbox-text-tracking);
+      margin-left: calc(var(--spacing-3, 6px) + var(--scb-checkbox-target, 40px));
+      margin-bottom: var(--spacing-4, 8px);
+    }
+
+    :host([disabled]) .supporting-text {
+      color: var(--n-60);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .lbl {
+        color: var(--md-sys-color-on-surface);
+      }
+      .supporting-text {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+    }
+  `,k);function y(i){this._showOuterFocusRing!==i&&(this._showOuterFocusRing=i,this.requestUpdate())}function S(){const i=!!this.label?.trim();this.toggleAttribute("data-has-label",i),i||n(r,this,y).call(this,!1)}function E(){const i=n(r,this,v).call(this,this.spacing),e=n(r,this,v).call(this,this.spacingTop)??i,t=n(r,this,v).call(this,this.spacingBottom)??i,s=n(r,this,v).call(this,this.spacingLeft),l=n(r,this,v).call(this,this.spacingRight);e?this.style.setProperty("--scb-checkbox-spacing-block-start",e):this.style.removeProperty("--scb-checkbox-spacing-block-start"),t?this.style.setProperty("--scb-checkbox-spacing-block-end",t):this.style.removeProperty("--scb-checkbox-spacing-block-end"),s?this.style.setProperty("--scb-checkbox-spacing-inline-start",s):this.style.removeProperty("--scb-checkbox-spacing-inline-start"),l?this.style.setProperty("--scb-checkbox-spacing-inline-end",l):this.style.removeProperty("--scb-checkbox-spacing-inline-end")}function v(i){if(!i)return;const e=String(i).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}o([c({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0);o([c({type:Boolean,reflect:!0})],a.prototype,"indeterminate",void 0);o([c({type:Boolean,reflect:!0})],a.prototype,"checked",void 0);o([c({type:Boolean,reflect:!0})],a.prototype,"required",void 0);o([c({type:String,reflect:!0})],a.prototype,"size",void 0);o([c({type:String})],a.prototype,"label",void 0);o([c({type:String,attribute:"supporting-text"})],a.prototype,"supportingText",void 0);o([c({type:String,reflect:!0,attribute:"aria-label"})],a.prototype,"ariaLabel",void 0);o([c({type:String})],a.prototype,"name",void 0);o([c({type:String})],a.prototype,"value",void 0);o([c({type:String,reflect:!0})],a.prototype,"spacing",void 0);o([c({type:String,attribute:"spacing-top",reflect:!0})],a.prototype,"spacingTop",void 0);o([c({type:String,attribute:"spacing-bottom",reflect:!0})],a.prototype,"spacingBottom",void 0);o([c({type:String,attribute:"spacing-left",reflect:!0})],a.prototype,"spacingLeft",void 0);o([c({type:String,attribute:"spacing-right",reflect:!0})],a.prototype,"spacingRight",void 0);a=o([R("scb-checkbox")],a);export{a as ScbCheckbox};

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

@@ -0,0 +1,121 @@
+import{_ as f,b as l,g as v,h as d,m,y as p}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as a}from"../../vendor/decorate.js";(function(){try{var o=typeof globalThis<"u"?globalThis:window;if(!o.__scb_ce_guard_installed__){o.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,c,h){try{customElements.get(t)||e(t,c,h)}catch(i){var s=String(i||"");if(s.indexOf("already been used")===-1&&s.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var n,r=(n=class extends f{constructor(...e){super(...e),this.open=!1,this.animationPhase="idle"}willUpdate(e){e.has("open")&&(e.get("open")??!this.open)!==this.open&&(this.animationPhase=this.open?"opening":"closing")}render(){return p`
+      <svg
+        class="chevron-icon ${this.animationPhase==="idle"?"":`chevron--${this.animationPhase}`}"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <line class="bar bar--left" x1="5" y1="12" x2="12" y2="12"></line>
+        <line class="bar bar--right" x1="12" y1="12" x2="19" y2="12"></line>
+      </svg>
+    `}},n.styles=l`
+    :host {
+      display: block;
+      width: var(--scb-chevron-size, 24px);
+      height: var(--scb-chevron-size, 24px);
+      color: inherit;
+      --chevron-offset-down: 2.3px;
+      --chevron-offset-up: -2.3px;
+    }
+
+    .chevron-icon {
+      display: block;
+      width: var(--scb-chevron-size, 24px);
+      height: var(--scb-chevron-size, 24px);
+      overflow: visible;
+    }
+
+    .chevron-icon .bar {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.5;
+      stroke-linecap: square;
+      stroke-linejoin: miter;
+      stroke-miterlimit: 2;
+      shape-rendering: geometricPrecision;
+      vector-effect: non-scaling-stroke;
+      transform-box: view-box;
+      transform-origin: 12px 12px;
+      will-change: transform;
+    }
+
+    .chevron-icon .bar--left {
+      transform: translateY(var(--chevron-offset-down)) rotate(45deg);
+    }
+
+    .chevron-icon .bar--right {
+      transform: translateY(var(--chevron-offset-down)) rotate(-45deg);
+    }
+
+    :host([open]) .chevron-icon .bar--left {
+      transform: translateY(var(--chevron-offset-up)) rotate(-45deg);
+    }
+
+    :host([open]) .chevron-icon .bar--right {
+      transform: translateY(var(--chevron-offset-up)) rotate(45deg);
+    }
+
+    .chevron-icon.chevron--opening .bar--left {
+      animation: chevron-left-open 100ms linear;
+    }
+
+    .chevron-icon.chevron--opening .bar--right {
+      animation: chevron-right-open 100ms linear;
+    }
+
+    .chevron-icon.chevron--closing .bar--left {
+      animation: chevron-left-close 100ms linear;
+    }
+
+    .chevron-icon.chevron--closing .bar--right {
+      animation: chevron-right-close 100ms linear;
+    }
+
+    @keyframes chevron-left-open {
+      0% {
+        transform: translateY(var(--chevron-offset-down)) rotate(45deg);
+      }
+      50% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      100% {
+        transform: translateY(var(--chevron-offset-up)) rotate(-45deg);
+      }
+    }
+
+    @keyframes chevron-right-open {
+      0% {
+        transform: translateY(var(--chevron-offset-down)) rotate(-45deg);
+      }
+      50% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      100% {
+        transform: translateY(var(--chevron-offset-up)) rotate(45deg);
+      }
+    }
+
+    @keyframes chevron-left-close {
+      0% {
+        transform: translateY(var(--chevron-offset-up)) rotate(-45deg);
+      }
+      50% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      100% {
+        transform: translateY(var(--chevron-offset-down)) rotate(45deg);
+      }
+    }
+
+    @keyframes chevron-right-close {
+      0% {
+        transform: translateY(var(--chevron-offset-up)) rotate(45deg);
+      }
+      50% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      100% {
+        transform: translateY(var(--chevron-offset-down)) rotate(-45deg);
+      }
+    }
+  `,n);a([d({type:Boolean,reflect:!0})],r.prototype,"open",void 0);a([m()],r.prototype,"animationPhase",void 0);r=a([v("scb-chevron")],r);

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

@@ -0,0 +1,66 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js","../../vendor/vendor-lit.js"])))=>i.map(i=>d[i]);
+import{_ as v,b as f,g as _,h as s,y as n}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as i}from"../../vendor/decorate.js";import{n as g,t as u}from"../../vendor/assertClassBrand.js";import{t as p}from"../../vendor/preload-helper.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(a,c,d){try{customElements.get(a)||t(a,c,d)}catch(l){var o=String(l||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var h,m,e=(h=new WeakSet,m=class extends v{constructor(){super(),g(this,h),this.variant="assist",this.label="",this.icon="",this.disabled=!1,this.elevated=!1,this.removable=!1,this.selected=!1,this.disableToggle=!1,this.href="",this.target="",this.name="",this.value="",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.size="medium",this._internals=null,this.__loadedVariants=new Set,this.__chipSetLoaded=!1,this.__iconLoaded=!1,this._onFilterClick=t=>{if(this.disableToggle){const a=t.currentTarget;a&&(a.selected=this.selected),t.preventDefault();return}this._toggleSelected()},"attachInternals"in this&&(this._internals=this.attachInternals())}updated(t){super.updated(t),(t.has("variant")||t.has("icon"))&&this.__ensureDepsLoaded(),t.has("disabled")&&(this.toggleAttribute("aria-disabled",this.disabled),this.dispatchEvent(new CustomEvent("disabled-changed",{detail:{disabled:this.disabled},bubbles:!0,composed:!0}))),t.has("variant")&&this.dispatchEvent(new CustomEvent("variant-changed",{detail:{variant:this.variant},bubbles:!0,composed:!0})),t.has("label")&&this.dispatchEvent(new CustomEvent("label-changed",{detail:{label:this.label},bubbles:!0,composed:!0})),t.has("elevated")&&this.dispatchEvent(new CustomEvent("elevated-changed",{detail:{elevated:this.elevated},bubbles:!0,composed:!0})),t.has("icon")&&this.dispatchEvent(new CustomEvent("icon-changed",{detail:{icon:this.icon},bubbles:!0,composed:!0})),t.has("size")&&this.dispatchEvent(new CustomEvent("size-changed",{detail:{size:this.size},bubbles:!0,composed:!0})),(t.has("selected")||t.has("disabled")||t.has("variant")||t.has("value")||t.has("name"))&&this._updateFormValue(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&u(h,this,b).call(this)}firstUpdated(){this.__ensureDepsLoaded(),u(h,this,b).call(this),this._updateFormValue()}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"assist":await p(()=>import("../../vendor/vendor-material.js").then(t=>t.c),__vite__mapDeps([0,1,2]),import.meta.url);break;case"filter":await p(()=>import("../../vendor/vendor-material.js").then(t=>t.o),__vite__mapDeps([0,1,2]),import.meta.url);break}this.__loadedVariants.add(this.variant)}!this._insideChipSet&&!this.__chipSetLoaded&&(await p(()=>import("../../vendor/vendor-material.js").then(t=>t.s),__vite__mapDeps([0,1,2]),import.meta.url),this.__chipSetLoaded=!0),this.icon&&!this.__iconLoaded&&(await p(()=>import("../../vendor/vendor-material.js").then(t=>t.p),__vite__mapDeps([0,1,2]),import.meta.url),this.__iconLoaded=!0)}get _insideChipSet(){return!!this.closest("md-chip-set")}render(){const t=this._renderChip();return this._insideChipSet?t:n`<md-chip-set>${t}</md-chip-set>`}_renderChip(){const t=this.icon?n`<md-icon slot="icon">${this.icon}</md-icon>`:null;switch(this.variant){case"assist":{const a=this.target==="_blank"?"noopener noreferrer":void 0;return n`
+          <md-assist-chip
+            label=${this.label}
+            ?disabled=${this.disabled}
+            ?elevated=${this.elevated}
+            href=${this.href||void 0}
+            target=${this.href&&this.target||void 0}
+            rel=${a}
+            @update-focus=${this._forward}
+          >
+            ${t}
+          </md-assist-chip>
+        `}case"filter":return n`
+          <md-filter-chip
+            label=${this.label}
+            ?disabled=${this.disabled}
+            ?removable=${this.removable}
+            ?selected=${this.selected}
+            @remove=${this._onRemove}
+            @update-focus=${this._forward}
+            @click=${this._onFilterClick}
+          >
+            ${t}
+          </md-filter-chip>
+        `;default:return n``}}_toggleSelected(){this.selected=!this.selected,this.dispatchEvent(new CustomEvent("selected-changed",{detail:{selected:this.selected},bubbles:!0,composed:!0})),this._updateFormValue()}_onRemove(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent("remove",{detail:{label:this.label},bubbles:!0,composed:!0}))}_forward(t){this.dispatchEvent(new CustomEvent(t.type,{detail:t.detail,bubbles:!0,composed:!0}))}_updateFormValue(){if(!this._internals)return;if(!(this.variant==="filter"&&this.selected&&!this.disabled&&this.name)){this._internals.setFormValue(null),this._internals.setValidity({});return}const t=this.value||this.label||"";this._internals.setFormValue(t,this.name),this._internals.setValidity({})}formDisabledCallback(t){this.disabled=t}mapSpacingToken(t){if(!t)return;const a=String(t).trim();if(a)return/^\d+$/.test(a)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(a,10)))})`:a}},m.formAssociated=!0,m.styles=f`
+    :host {
+      display: inline-block;
+      margin-block-start: var(--scb-chip-spacing-block-start, 0);
+      margin-block-end: var(--scb-chip-spacing-block-end, 0);
+      margin-inline-start: var(--scb-chip-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-chip-spacing-inline-end, 0);
+    }
+
+    /* Sätt samma färg på label för assist som är på filter */
+    :host md-assist-chip {
+      --_label-text-color: var(--md-sys-color-on-surface-variant);
+      --_hover-label-text-color: var(--md-sys-color-on-surface-variant);
+      --_focus-label-text-color: var(--md-sys-color-on-surface-variant);
+      --_pressed-label-text-color: var(--md-sys-color-on-surface-variant);
+    }
+
+    /* Storlekar: små/medium/stora chips via tokens.
+       Medium (default) är Material-standardvärdena. */
+    :host([size='small']) md-assist-chip,
+    :host([size='small']) md-filter-chip {
+      --md-assist-chip-label-text-size: var(--md-sys-typescale-label-small-size);
+      --md-filter-chip-label-text-size: var(--md-sys-typescale-label-small-size);
+    }
+    :host([size='medium']) md-assist-chip,
+    :host([size='medium']) md-filter-chip {
+      --md-assist-chip-label-text-size: var(--md-sys-typescale-label-medium-size);
+      --md-filter-chip-label-text-size: var(--md-sys-typescale-label-medium-size);
+    }
+
+    :host([size='large']) md-assist-chip,
+    :host([size='large']) md-filter-chip {
+      --md-assist-chip-label-text-size: var(--md-sys-typescale-body-large-size);
+      --md-filter-chip-label-text-size: var(--md-sys-typescale-body-large-size);
+    }
+
+/*     md-icon {
+      color: var(--md-sys-color-on-surface);
+      font-size: var(--md-sys-typescale-body-large-size);
+    } */
+  `,m);function b(){const r=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop),a=this.mapSpacingToken(this.spacingBottom),c=this.mapSpacingToken(this.spacingLeft),d=this.mapSpacingToken(this.spacingRight),o=t??r,l=a??r;o?this.style.setProperty("--scb-chip-spacing-block-start",o):this.style.removeProperty("--scb-chip-spacing-block-start"),l?this.style.setProperty("--scb-chip-spacing-block-end",l):this.style.removeProperty("--scb-chip-spacing-block-end"),c?this.style.setProperty("--scb-chip-spacing-inline-start",c):this.style.removeProperty("--scb-chip-spacing-inline-start"),d?this.style.setProperty("--scb-chip-spacing-inline-end",d):this.style.removeProperty("--scb-chip-spacing-inline-end")}i([s({type:String,reflect:!0})],e.prototype,"variant",void 0);i([s({type:String})],e.prototype,"label",void 0);i([s({type:String})],e.prototype,"icon",void 0);i([s({type:Boolean,reflect:!0})],e.prototype,"disabled",void 0);i([s({type:Boolean,reflect:!0})],e.prototype,"elevated",void 0);i([s({type:Boolean,reflect:!0})],e.prototype,"removable",void 0);i([s({type:Boolean,reflect:!0})],e.prototype,"selected",void 0);i([s({type:Boolean,reflect:!0,attribute:"disable-toggle"})],e.prototype,"disableToggle",void 0);i([s({type:String})],e.prototype,"href",void 0);i([s({type:String})],e.prototype,"target",void 0);i([s({type:String})],e.prototype,"name",void 0);i([s({type:String})],e.prototype,"value",void 0);i([s({type:String,reflect:!0})],e.prototype,"spacing",void 0);i([s({type:String,reflect:!0,attribute:"spacing-top"})],e.prototype,"spacingTop",void 0);i([s({type:String,reflect:!0,attribute:"spacing-bottom"})],e.prototype,"spacingBottom",void 0);i([s({type:String,reflect:!0,attribute:"spacing-left"})],e.prototype,"spacingLeft",void 0);i([s({type:String,reflect:!0,attribute:"spacing-right"})],e.prototype,"spacingRight",void 0);i([s({type:String,reflect:!0})],e.prototype,"size",void 0);e=i([_("scb-chip")],e);

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

@@ -0,0 +1,89 @@
+import{_ as f,b as v,g as y,h as a,y as h}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as n}from"../../vendor/decorate.js";import{n as _,t as d}from"../../vendor/assertClassBrand.js";import"../scb-button/scb-button.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,i,s){try{customElements.get(e)||t(e,i,s)}catch(r){var p=String(r||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var c,u,o=(c=new WeakSet,u=class extends f{constructor(...t){super(...t),_(this,c),this._contentId=`scb-collapse-content-${Math.random().toString(36).substr(2,9)}`,this.variant="elements",this.collapsedHeight=40,this.visibleElements=1,this.expanded=!1,this._elementCount=0,this.expandButtonLabel="Mer",this.collapseButtonLabel="Mindre",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.itemsGap=void 0,this._contentHeight=0}get _regionLabel(){return`${this.expanded?this.collapseButtonLabel:this.expandButtonLabel} – ${this._contentId}`}toggle(){this.expanded=!this.expanded}mapSpacingToken(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}willUpdate(t){t.has("variant")&&(this._measureContent(!1),this._countElements(!1))}firstUpdated(){requestAnimationFrame(()=>{this._measureContent(),this._countElements()});const t=this.shadowRoot?.querySelector("slot");t&&t.addEventListener("slotchange",()=>{requestAnimationFrame(()=>{this._measureContent(),this._countElements(),d(c,this,g).call(this)})}),d(c,this,b).call(this),d(c,this,g).call(this)}updated(t){(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&d(c,this,b).call(this),t.has("itemsGap")&&(d(c,this,g).call(this),this._measureContent()),t.has("expanded")&&(d(c,this,g).call(this),this.dispatchEvent(new CustomEvent("expandedchange",{detail:{expanded:this.expanded},bubbles:!0,composed:!0})))}_measureContent(t=!0){if(this.variant==="height"){const e=this.shadowRoot?.querySelector("slot");if(e){const i=e.assignedNodes({flatten:!0});let s=0;i.forEach(r=>{if(r.nodeType===Node.ELEMENT_NODE){const m=r;s+=m.offsetHeight||m.scrollHeight||0}});const p=s;p!==this._contentHeight&&(this._contentHeight=p,t&&this.requestUpdate())}}}_countElements(t=!0){if(this.variant==="elements"){const e=this.shadowRoot?.querySelector("slot");if(e){const i=e.assignedNodes({flatten:!0}).filter(s=>s.nodeType===Node.ELEMENT_NODE).length;i!==this._elementCount&&(this._elementCount=i,t&&this.requestUpdate())}}}render(){if(this.variant==="height"){const t=this.expanded?`${this._contentHeight}px`:`${this.collapsedHeight}px`,e=this._contentHeight>this.collapsedHeight;return h`
+        <div
+          class="collapse-content"
+          id="${this._contentId}"
+          style="max-height: ${t};"
+          role="region"
+           aria-label="${this._regionLabel}"
+        >
+          <slot></slot>
+          ${e&&!this.expanded?h`<div class="collapse-gradient-overlay"></div>`:""}
+        </div>
+        ${e?h`
+            <scb-button
+              id="${this._contentId}-button"
+              @click="${this.toggle}"
+              variant="text"
+              label="${this.expanded?this.collapseButtonLabel:this.expandButtonLabel}"
+              icon="${this.expanded?"keyboard_arrow_up":"keyboard_arrow_down"}"
+              aria-controls="${this._contentId}"
+              aria-expanded="${this.expanded?"true":"false"}"
+            >
+            </scb-button>
+        `:""}
+      `}else{const t=typeof this.visibleElements=="string"?parseInt(this.visibleElements,10):this.visibleElements,e=this._elementCount>t;return setTimeout(()=>{const i=this.shadowRoot?.querySelector("slot");i&&i.assignedNodes({flatten:!0}).filter(s=>s.nodeType===Node.ELEMENT_NODE).forEach((s,p)=>{const r=s;!this.expanded&&p>=t?r.classList.add("scb-collapsed-hidden"):r.classList.remove("scb-collapsed-hidden")})},0),h`
+        <div
+          class="collapse-content"
+          id="${this._contentId}"
+          role="region"
+           aria-label="${this._regionLabel}"
+        >
+          <slot></slot>
+        </div>
+        ${e?h`
+            <scb-button
+              id="${this._contentId}-button"
+              @click="${this.toggle}"
+              variant="text"
+              label="${this.expanded?this.collapseButtonLabel:this.expandButtonLabel}"
+              icon="${this.expanded?"keyboard_arrow_up":"keyboard_arrow_down"}"
+              aria-controls="${this._contentId}"
+              aria-expanded="${this.expanded?"true":"false"}"
+            >
+            </scb-button>
+        `:""}
+      `}}},u.styles=v`
+:host {
+  display: block;
+  box-sizing: border-box;
+  margin-block-start: var(--scb-collapse-spacing-block-start, 0);
+  margin-block-end: var(--scb-collapse-spacing-block-end, 0);
+  margin-inline-start: var(--scb-collapse-spacing-inline-start, 0);
+  margin-inline-end: var(--scb-collapse-spacing-inline-end, 0);
+}
+    .collapse-content {
+      overflow: hidden;
+      transition: max-height var(--motion-duration-medium) var(--motion-easing-standard);
+    }
+    .collapse-gradient-overlay {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 48px;
+      pointer-events: none;
+      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--md-sys-color-surface) 100%);
+      z-index: 1;
+    }
+    .collapse-content {
+      position: relative;
+    }
+    scb-button {
+      margin-top: 8px;
+    }
+    ::slotted(.scb-collapsed-hidden) {
+        max-height: 0 !important;
+        opacity: 0;
+        overflow: hidden;
+        transition: max-height var(--motion-duration-medium) var(--motion-easing-standard), opacity var(--motion-duration-medium) var(--motion-easing-standard);
+        pointer-events: none;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+    ::slotted(*) {
+        max-height: 1000px;
+        transition: max-height var(--motion-duration-medium) var(--motion-easing-standard), opacity var(--motion-duration-medium) var(--motion-easing-standard);
+        overflow: hidden;
+        display: block;
+    }
+  `,u);function b(){const l=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??l,e=this.mapSpacingToken(this.spacingBottom)??l,i=this.mapSpacingToken(this.spacingLeft),s=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-collapse-spacing-block-start",t):this.style.removeProperty("--scb-collapse-spacing-block-start"),e?this.style.setProperty("--scb-collapse-spacing-block-end",e):this.style.removeProperty("--scb-collapse-spacing-block-end"),i?this.style.setProperty("--scb-collapse-spacing-inline-start",i):this.style.removeProperty("--scb-collapse-spacing-inline-start"),s?this.style.setProperty("--scb-collapse-spacing-inline-end",s):this.style.removeProperty("--scb-collapse-spacing-inline-end")}function g(){const l=this.mapSpacingToken(this.itemsGap);l?this.style.setProperty("--scb-collapse-items-gap",l):this.style.removeProperty("--scb-collapse-items-gap");const t=this.shadowRoot?.querySelector("slot");t&&t.assignedNodes({flatten:!0}).filter(e=>e.nodeType===Node.ELEMENT_NODE).forEach((e,i)=>{const s=e;i===0||!l?s.style.removeProperty("margin-block-start"):s.style.setProperty("margin-block-start","var(--scb-collapse-items-gap)")})}n([a({type:String})],o.prototype,"variant",void 0);n([a({type:Number,attribute:"collapsed-height",reflect:!0})],o.prototype,"collapsedHeight",void 0);n([a({type:Number,attribute:"visible-elements",reflect:!0})],o.prototype,"visibleElements",void 0);n([a({type:Boolean,reflect:!0})],o.prototype,"expanded",void 0);n([a({type:String,attribute:"expand-button-label",reflect:!0})],o.prototype,"expandButtonLabel",void 0);n([a({type:String,attribute:"collapse-button-label",reflect:!0})],o.prototype,"collapseButtonLabel",void 0);n([a({type:String,reflect:!0})],o.prototype,"spacing",void 0);n([a({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",void 0);n([a({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",void 0);n([a({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",void 0);n([a({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",void 0);n([a({type:String,attribute:"items-gap",reflect:!0})],o.prototype,"itemsGap",void 0);o=n([y("scb-collapse")],o);

package/mvc/components/scb-cookies-consent/scb-cookies-consent.js

@@ -0,0 +1,78 @@
+import{_ as d,b as h,g as u,h as n,y as g}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as s}from"../../vendor/decorate.js";import"../scb-button/scb-button.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,i,a){try{customElements.get(e)||t(e,i,a)}catch(l){var c=String(l||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var p,o=(p=class extends d{constructor(...t){super(...t),this.open=!0,this.autoRemove=!0,this.title="",this.supportingText="",this.ariaLabel="Cookie-inställningar",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._updateButtonWidth=()=>{const e=window.innerWidth<=480,i=this.shadowRoot.querySelector('slot[name="buttons"]');i&&i.assignedElements().forEach(a=>{e?a.setAttribute("full-width",""):a.removeAttribute("full-width")})}}mapSpacingToken(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}applySpacing(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,i=this.mapSpacingToken(this.spacingBottom)??t,a=this.mapSpacingToken(this.spacingLeft),c=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-cookies-consent-spacing-block-start",e):this.style.removeProperty("--scb-cookies-consent-spacing-block-start"),i?this.style.setProperty("--scb-cookies-consent-spacing-block-end",i):this.style.removeProperty("--scb-cookies-consent-spacing-block-end"),a?this.style.setProperty("--scb-cookies-consent-spacing-inline-start",a):this.style.removeProperty("--scb-cookies-consent-spacing-inline-start"),c?this.style.setProperty("--scb-cookies-consent-spacing-inline-end",c):this.style.removeProperty("--scb-cookies-consent-spacing-inline-end")}firstUpdated(t){this._updateButtonWidth(),window.addEventListener("resize",this._updateButtonWidth),this.addEventListener("click",e=>{const i=e.target;i.slot==="buttons"&&(i.id==="accept-btn"?this.closeAndRemove("cookies-accept"):i.id==="decline-btn"?this.closeAndRemove("cookies-decline"):i.id==="handle-btn"&&this.closeAndRemove("cookies-handle"))}),this.applySpacing()}updated(t){super.updated(t),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this.applySpacing(),t.has("open")&&this.open&&this._updateButtonWidth()}connectedCallback(){super.connectedCallback(),this.id||(this.id="cookie-consent")}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._updateButtonWidth)}closeAndRemove(t){this.dispatchEvent(new CustomEvent(t));const e=t.includes("-")?t.replace(/-/g,""):"";e&&e!==t&&this.dispatchEvent(new CustomEvent(e)),this.autoRemove?this.remove():this.open=!1}render(){return this.open?g`
+      <div role="dialog" class="cookies-consent" aria-modal="true" aria-label=${this.ariaLabel}>
+        <h2>${this.title}</h2>
+        <div>
+            ${this.supportingText}
+        </div>
+         <div class="button-container">
+            <slot name="buttons"></slot>
+        </div> 
+      </div>
+    `:null}},p.styles=h`
+  :host {
+      position: fixed;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      bottom: 32px;
+      left: 32px;
+      background: #fff;
+      color: #222;
+      box-shadow: 0 8px 10px -6px #0000001a, 0 20px 25px -5px #0000001a;
+      color: var(--md-sys-color-on-surface, #0f0865);
+      background: var(--md-sys-color-surface, #fff);
+      border-radius: 16px;
+      padding: 36px 0;
+      z-index: 1000;
+      gap: 16px;
+      font-family: 'Inter', sans-serif;
+
+      margin-block-start: var(--scb-cookies-consent-spacing-block-start, 0);
+      margin-block-end: var(--scb-cookies-consent-spacing-block-end, 0);
+      margin-inline-start: var(--scb-cookies-consent-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-cookies-consent-spacing-inline-end, 0);
+  }
+  .cookies-consent {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 0 20px;
+      box-sizing: border-box;
+      margin: 0 auto;
+      max-width: 1440px;
+      position: relative;
+      width: 100%;
+  }    
+  .cookies-consent h2 {
+      font-size: 16px;
+      line-height: 24px;
+      margin: 0;
+      hyphens: auto;
+  }
+  .button-container {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      justify-content: flex-start;
+  }
+
+  ::slotted{
+    md-filled-button {
+      width: 100%;
+    }
+  }
+
+  @media only screen and (min-width: 481px) {
+    :host {
+      width: auto;
+      max-width: 650px;
+    }
+    .button-container {
+      flex-direction: row;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        justify-content: flex-start;
+    }
+}
+`,p);s([n({type:Boolean})],o.prototype,"open",void 0);s([n({type:Boolean,attribute:"auto-remove",converter:{fromAttribute:r=>r!=="false"}})],o.prototype,"autoRemove",void 0);s([n({type:String,reflect:!0})],o.prototype,"title",void 0);s([n({type:String,attribute:"supporting-text",reflect:!0})],o.prototype,"supportingText",void 0);s([n({type:String,attribute:"aria-label",reflect:!0})],o.prototype,"ariaLabel",void 0);s([n({type:String,reflect:!0})],o.prototype,"spacing",void 0);s([n({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",void 0);s([n({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",void 0);s([n({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",void 0);s([n({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",void 0);o=s([u("scb-cookies-consent")],o);