scb-wc 0.1.3 → 0.1.4

package/mvc/components/scb-breadcrumb/scb-breadcrumb-item.js

@@ -0,0 +1,14 @@
+import{_ as l,b as h,g as b,h as a,y as c}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as r}from"../../vendor/decorate.js";import"../scb-link/scb-link.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(i,o,d){try{customElements.get(i)||t(i,o,d)}catch(u){var n=String(u||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var e=class extends l{constructor(...t){super(...t),this.label="",this.isCurrent=!1,this.href=""}connectedCallback(){if(super.connectedCallback(),this.hasAttribute("current")&&!this.hasAttribute("is-current")&&(this.isCurrent=!0),!this.href){const t=this.getAttribute("href");t&&(this.href=t)}}static get styles(){return h`
+      .breadcrumb-separator {
+        margin: var(--spacing-0) var(--spacing-3);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .breadcrumb-current {
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      }
+    `}updated(t){t.has("isCurrent")&&(this.dispatchEvent(new CustomEvent("current-changed",{detail:{isCurrent:this.isCurrent},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("currentchanged",{detail:{isCurrent:this.isCurrent,value:this.isCurrent},bubbles:!0,composed:!0})))}render(){return!0===this.isCurrent?c`<span class="breadcrumb-current">${this.label}</span>`:c`
+          <scb-link href="${this.href||this.getAttribute("href")||""}">${this.label}</scb-link>
+          <span class="breadcrumb-separator">/</span>
+        `}};r([a({type:String})],e.prototype,"label",void 0);r([a({type:Boolean,attribute:"is-current",reflect:!0})],e.prototype,"isCurrent",void 0);r([a({type:String,attribute:"item-href"})],e.prototype,"href",void 0);e=r([b("scb-breadcrumb-item")],e);

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

@@ -0,0 +1,96 @@
+import"../../vendor/vendor-material.js";import{_ as v,b as k,g as _,h as p,y as d}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as c}from"../../vendor/decorate.js";import{n as w,t as g}from"../../vendor/assertClassBrand.js";import"../scb-link/scb-link.js";import"./scb-breadcrumb-item.js";(function(){try{var b=typeof globalThis<"u"?globalThis:window;if(!b.__scb_ce_guard_installed__){b.__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(r){var o=String(r||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var m,n=(m=new WeakSet,class extends v{constructor(...e){super(...e),w(this,m),this.showAll=!1,this.currentIndex=void 0,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}static get styles(){return k`
+      :host {
+        display: block;
+        margin-block-start: var(--scb-breadcrumb-spacing-block-start, 0);
+        margin-block-end: var(--scb-breadcrumb-spacing-block-end, 0);
+        margin-inline-start: var(--scb-breadcrumb-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-breadcrumb-spacing-inline-end, 0);
+      }
+
+      .scb-breadcrumb {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+
+      .breadcrumb-item {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .breadcrumb-separator {
+        margin: var(--spacing-0) var(--spacing-3);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .breadcrumb-current {
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
+      }
+
+      .ellipsis {
+        cursor: pointer;
+        display: inline-flex;
+        color: var(--md-sys-color-primary);
+        position: relative;
+      }
+
+      .ellipsis:focus {
+        outline: none;
+      }
+
+      .breadcrumb-animate {
+        opacity: 0;
+        transform: translateY(10px);
+        animation: fadeInBreadcrumb 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
+
+      md-focus-ring {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        display: none;
+        border-radius: var(
+          --scb-card-focus-ring-radius,
+          var(--md-sys-shape-corner-large)
+        );
+      }
+
+      .ellipsis:focus md-focus-ring {
+        display: block;
+      }
+
+      @keyframes fadeInBreadcrumb {
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `}connectedCallback(){super.connectedCallback(),this._observer=new MutationObserver(()=>{this.requestUpdate()}),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["label","item-href","href","is-current","current"]})}disconnectedCallback(){super.disconnectedCallback(),this._observer?.disconnect()}firstUpdated(){g(m,this,y).call(this)}updated(e){e.has("showAll")&&(this.dispatchEvent(new CustomEvent("show-all-changed",{detail:{showAll:this.showAll},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("showallchanged",{detail:{showAll:this.showAll,value:this.showAll},bubbles:!0,composed:!0}))),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&g(m,this,y).call(this)}mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_onEllipsisClick(){this.showAll?this.showAll=!1:(this.showAll=!0,this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelectorAll(".scb-breadcrumb.expanded .breadcrumb-item");e&&(e.forEach((t,s)=>{t.classList.add("breadcrumb-animate"),t.style.animationDelay=`${s*60}ms`}),setTimeout(()=>{e.forEach(t=>{t.classList.remove("breadcrumb-animate"),t.style.animationDelay=""})},600))}))}getItemLabel(e){const t=e.label;return typeof t=="string"?t:e.getAttribute("label")??""}getItemHref(e){const t=e;return typeof t.itemHref=="string"?t.itemHref:typeof t.href=="string"?t.href:e.getAttribute("item-href")??e.getAttribute("href")??""}render(){const e=Array.from(this.children).filter(r=>r.tagName.toLowerCase()==="scb-breadcrumb-item"),t=Math.max(0,e.length-1);let s=t;if(e.length>0){const r=typeof this.currentIndex=="number"&&!Number.isNaN(this.currentIndex)?Math.trunc(this.currentIndex):void 0;if(typeof r=="number"&&r>=0&&r<e.length)s=r;else for(let i=e.length-1;i>=0;i--){const a=e[i];if(typeof a.isCurrent=="boolean"?a.isCurrent:e[i].hasAttribute("is-current")||e[i].hasAttribute("current")){s=i;break}}e.forEach((i,a)=>{i.toggleAttribute("is-current",a===s)})}const l=e.length>6&&!this.showAll&&s===t,o=[];if(l){const r=e.slice(0,3),i=e.slice(-3);r.forEach((a,u)=>{o.push({type:"item",item:a,isCurrent:u===s})}),o.push({type:"ellipsis"}),i.forEach((a,u)=>{const h=e.length-3+u;o.push({type:"item",item:a,isCurrent:h===s})})}else e.forEach((r,i)=>{o.push({type:"item",item:r,isCurrent:i===s})});return d`
+      <div class="scb-breadcrumb ${l?"collapsed":"expanded"}">
+        ${o.map((r,i)=>{const a=i===0?d``:d`<span class="breadcrumb-separator">/</span>`;if(r.type==="ellipsis")return d`
+              ${a}
+              <span
+                class="breadcrumb-item ellipsis"
+                aria-label="Visa alla"
+                role="button"
+                tabindex="0"
+                @click=${this._onEllipsisClick}
+                @keydown=${f=>{(f.key==="Enter"||f.key===" ")&&this._onEllipsisClick()}}
+              >
+                <md-icon>
+                  <md-focus-ring></md-focus-ring>
+                  more_horiz
+                </md-icon>
+              </span>
+            `;const u=this.getItemLabel(r.item),h=this.getItemHref(r.item);return r.isCurrent?d`
+                ${a}
+                <span class="breadcrumb-item breadcrumb-current">${u}</span>
+              `:d`
+                ${a}
+                <span class="breadcrumb-item">
+                  <scb-link href="${h}">${u}</scb-link>
+                </span>
+              `})}
+      </div>
+    `}});function y(){const b=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??b,t=this.mapSpacingToken(this.spacingBottom)??b,s=this.mapSpacingToken(this.spacingLeft),l=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-breadcrumb-spacing-block-start",e):this.style.removeProperty("--scb-breadcrumb-spacing-block-start"),t?this.style.setProperty("--scb-breadcrumb-spacing-block-end",t):this.style.removeProperty("--scb-breadcrumb-spacing-block-end"),s?this.style.setProperty("--scb-breadcrumb-spacing-inline-start",s):this.style.removeProperty("--scb-breadcrumb-spacing-inline-start"),l?this.style.setProperty("--scb-breadcrumb-spacing-inline-end",l):this.style.removeProperty("--scb-breadcrumb-spacing-inline-end")}c([p({type:Boolean,attribute:"show-all",reflect:!0})],n.prototype,"showAll",void 0);c([p({type:Number,attribute:"current-index",reflect:!0})],n.prototype,"currentIndex",void 0);c([p({type:String,reflect:!0})],n.prototype,"spacing",void 0);c([p({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",void 0);c([p({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",void 0);c([p({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",void 0);c([p({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",void 0);n=c([_("scb-breadcrumb")],n);

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

@@ -0,0 +1,268 @@
+import"../../vendor/vendor-material.js";import{_ as z,b as A,g as S,h as l,v as i,y as b}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as a}from"../../vendor/decorate.js";import{n as I,t as k}from"../../vendor/assertClassBrand.js";(function(){try{var c=typeof globalThis<"u"?globalThis:window;if(!c.__scb_ce_guard_installed__){c.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,o,s){try{customElements.get(e)||t(e,o,s)}catch(u){var p=String(u||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var g,n=(g=new WeakSet,class extends z{constructor(...t){super(...t),I(this,g),this.variant="filled",this.size="medium",this.type="button",this.label="Button",this.trailingIcon=!1,this.icon="",this.iconFilled=!1,this.disabled=!1,this.fullWidth=!1,this.href="",this.target="",this.rel="",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}__getMdHost(){return this.renderRoot.querySelector("md-filled-button, md-outlined-button, md-filled-tonal-button, md-text-button")}__getInnerNativeButton(t){return t?.shadowRoot?.querySelector("button")??null}__syncAriaToInner(){const t=this.__getMdHost(),e=this.__getInnerNativeButton(t);if(!t||!e)return;const o=(this.getAttribute("aria-label")||"").trim(),s=(t.getAttribute("aria-label")||"").trim(),p=this.label.trim()===""?(this.icon||"").trim():"",u=o||s||p;u?e.setAttribute("aria-label",u):e.removeAttribute("aria-label");const y=this.getAttribute("aria-controls");y!==null?e.setAttribute("aria-controls",y):e.removeAttribute("aria-controls");const f=this.getAttribute("aria-expanded");f!==null?e.setAttribute("aria-expanded",f):e.removeAttribute("aria-expanded"),t.removeAttribute("aria-label"),t.removeAttribute("aria-controls"),t.removeAttribute("aria-expanded"),this.removeAttribute("aria-expanded"),this.__ariaObserver?.disconnect(),this.__ariaObserver=new MutationObserver($=>{const r=this.__getMdHost(),m=this.__getInnerNativeButton(r);if(!(!r||!m)){for(const h of $){if(h.type!=="attributes"||!h.attributeName)continue;const d=h.attributeName,v=this.getAttribute(d);if(d==="aria-label"){const w=(r.getAttribute("aria-label")||"").trim(),x=(v||w||(this.label.trim()===""?(this.icon||"").trim():"")).trim();x?m.setAttribute("aria-label",x):m.removeAttribute("aria-label"),r.removeAttribute("aria-label")}else(d==="aria-controls"||d==="aria-expanded")&&(v===null?m.removeAttribute(d):m.setAttribute(d,v),d==="aria-expanded"&&this.removeAttribute("aria-expanded"))}r.removeAttribute("aria-label"),r.removeAttribute("aria-controls"),r.removeAttribute("aria-expanded")}}),this.__ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-label","aria-controls","aria-expanded"]})}firstUpdated(){(this.type==="submit"||this.type==="reset")&&this.addEventListener("click",()=>{if(!this.disabled){const t=this.closest("form");t&&(this.type==="submit"&&t.requestSubmit(),this.type==="reset"&&t.reset())}}),this.__syncAriaToInner(),k(g,this,_).call(this)}updated(t){t.has("variant")&&this.__syncAriaToInner(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&k(g,this,_).call(this)}disconnectedCallback(){this.__ariaObserver?.disconnect(),super.disconnectedCallback()}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}static get styles(){return A`
+      /* Gör hosten stretchbar i t.ex. flex/grid */
+      :host {
+        display: inline-flex;
+        block-size: var(--scb-button-block-size, auto);
+        margin-block-start: var(--scb-button-spacing-block-start, 0);
+        margin-block-end: var(--scb-button-spacing-block-end, 0);
+        margin-inline-start: var(--scb-button-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-button-spacing-inline-end, 0);
+        --scb-button-font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        --scb-button-padding-block: calc(var(--spacing-4) - var(--spacing-1));
+        --scb-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
+        --scb-button-container-height: calc(
+          var(--scb-button-label-text-line-height) + var(--scb-button-padding-block) + var(--scb-button-padding-block)
+        );
+
+
+        --scb-button-padding-inline: var(--spacing-5);
+        --scb-button-icon-edge-space: var(--spacing-5);
+        --scb-button-icon-gap: var(--spacing-3);
+        --scb-button-icon-size: var(--icon-size-small, 20px);
+
+        /* Label, mappar till md-sys-typescale-label-small */
+        --md-filled-button-label-text-font: var(--md-sys-typescale-label-small-font);
+        --md-filled-button-label-text-size: var(--md-sys-typescale-label-small-size);
+        --md-filled-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
+        --md-filled-button-label-text-tracking: var(--md-sys-typescale-label-small-tracking);
+        --md-filled-button-label-text-weight: var(--md-sys-typescale-label-small-weight);
+
+        --md-outlined-button-label-text-font: var(--md-sys-typescale-label-small-font);
+        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-small-size);
+        --md-outlined-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
+        --md-outlined-button-label-text-tracking: var(--md-sys-typescale-label-small-tracking);
+        --md-outlined-button-label-text-weight: var(--md-sys-typescale-label-small-weight);
+
+        --md-filled-tonal-button-label-text-font: var(--md-sys-typescale-label-small-font);
+        --md-filled-tonal-button-label-text-size: var(--md-sys-typescale-label-small-size);
+        --md-filled-tonal-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
+        --md-filled-tonal-button-label-text-tracking: var(--md-sys-typescale-label-small-tracking);
+        --md-filled-tonal-button-label-text-weight: var(--md-sys-typescale-label-small-weight);
+
+        --md-text-button-label-text-font: var(--md-sys-typescale-label-small-font);
+        --md-text-button-label-text-size: var(--md-sys-typescale-label-small-size);
+        --md-text-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
+        --md-text-button-label-text-tracking: var(--md-sys-typescale-label-small-tracking);
+        --md-text-button-label-text-weight: var(--md-sys-typescale-label-small-weight);
+
+        /* Grundpadding (utan ikon) */
+        --md-filled-button-leading-space: var(--scb-button-padding-inline);
+        --md-filled-button-trailing-space: var(--scb-button-padding-inline);
+        --md-outlined-button-leading-space: var(--scb-button-padding-inline);
+        --md-outlined-button-trailing-space: var(--scb-button-padding-inline);
+        --md-filled-tonal-button-leading-space: var(--scb-button-padding-inline);
+        --md-filled-tonal-button-trailing-space: var(--scb-button-padding-inline);
+        --md-text-button-leading-space: var(--scb-button-padding-inline);
+        --md-text-button-trailing-space: var(--scb-button-padding-inline);
+
+        /* Med ikon: avstånd till ytterkanter + mellan ikon och label */
+        --md-filled-button-with-leading-icon-leading-space: var(--scb-button-icon-edge-space);
+        --md-filled-button-with-leading-icon-trailing-space: var(--scb-button-padding-inline);
+        --md-filled-button-with-trailing-icon-leading-space: var(--scb-button-padding-inline);
+        --md-filled-button-with-trailing-icon-trailing-space: var(--scb-button-icon-edge-space);
+
+        --md-outlined-button-with-leading-icon-leading-space: var(--scb-button-icon-edge-space);
+        --md-outlined-button-with-leading-icon-trailing-space: var(--scb-button-padding-inline);
+        --md-outlined-button-with-trailing-icon-leading-space: var(--scb-button-padding-inline);
+        --md-outlined-button-with-trailing-icon-trailing-space: var(--scb-button-icon-edge-space);
+
+        --md-filled-tonal-button-with-leading-icon-leading-space: var(--scb-button-icon-edge-space);
+        --md-filled-tonal-button-with-leading-icon-trailing-space: var(--scb-button-padding-inline);
+        --md-filled-tonal-button-with-trailing-icon-leading-space: var(--scb-button-padding-inline);
+        --md-filled-tonal-button-with-trailing-icon-trailing-space: var(--scb-button-icon-edge-space);
+
+        --md-text-button-with-leading-icon-leading-space: var(--scb-button-icon-edge-space);
+        --md-text-button-with-leading-icon-trailing-space: var(--scb-button-padding-inline);
+        --md-text-button-with-trailing-icon-leading-space: var(--scb-button-padding-inline);
+        --md-text-button-with-trailing-icon-trailing-space: var(--scb-button-icon-edge-space);
+
+        /* Ikonstorlek */
+        --md-filled-button-icon-size: var(--scb-button-icon-size);
+        --md-outlined-button-icon-size: var(--scb-button-icon-size);
+        --md-filled-tonal-button-icon-size: var(--scb-button-icon-size);
+        --md-text-button-icon-size: var(--scb-button-icon-size);
+      }
+
+      :host([size='small']) {
+        --scb-button-padding-block: calc(var(--spacing-3) - var(--spacing-1));
+        --scb-button-padding-inline: var(--spacing-4);
+        --scb-button-icon-edge-space: var(--spacing-4);
+        --scb-button-icon-gap: var(--spacing-2);
+        --scb-button-icon-size: var(--icon-size-small, 20px);
+      }
+
+      :host([size='large']) {
+        --scb-button-padding-block: var(--spacing-5);
+        --scb-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
+
+        --scb-button-padding-inline: var(--spacing-7);
+        --scb-button-icon-edge-space: var(--spacing-7);
+        --scb-button-icon-gap: var(--spacing-3);
+        --scb-button-icon-size: var(--icon-size-medium, 24px);
+
+        /* Label, mappar till md-sys-typescale-label-medium */
+        --md-filled-button-label-text-font: var(--md-sys-typescale-label-medium-font);
+        --md-filled-button-label-text-size: var(--md-sys-typescale-label-medium-size);
+        --md-filled-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
+        --md-filled-button-label-text-tracking: var(--md-sys-typescale-label-medium-tracking);
+        --md-filled-button-label-text-weight: var(--md-sys-typescale-label-medium-weight);
+
+        --md-outlined-button-label-text-font: var(--md-sys-typescale-label-medium-font);
+        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-medium-size);
+        --md-outlined-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
+        --md-outlined-button-label-text-tracking: var(--md-sys-typescale-label-medium-tracking);
+        --md-outlined-button-label-text-weight: var(--md-sys-typescale-label-medium-weight);
+
+        --md-filled-tonal-button-label-text-font: var(--md-sys-typescale-label-medium-font);
+        --md-filled-tonal-button-label-text-size: var(--md-sys-typescale-label-medium-size);
+        --md-filled-tonal-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
+        --md-filled-tonal-button-label-text-tracking: var(--md-sys-typescale-label-medium-tracking);
+        --md-filled-tonal-button-label-text-weight: var(--md-sys-typescale-label-medium-weight);
+
+        --md-text-button-label-text-font: var(--md-sys-typescale-label-medium-font);
+        --md-text-button-label-text-size: var(--md-sys-typescale-label-medium-size);
+        --md-text-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
+        --md-text-button-label-text-tracking: var(--md-sys-typescale-label-medium-tracking);
+        --md-text-button-label-text-weight: var(--md-sys-typescale-label-medium-weight);
+      }
+
+      :host([icon-filled]) {
+        --scb-button-font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      }
+
+      md-icon {
+        --md-icon-font-variation-settings: var(--scb-button-font-variation-settings) !important;
+        font-variation-settings: var(--scb-button-font-variation-settings) !important;
+      }
+
+      :host([full-width]) {
+        display: flex;
+        inline-size: 100%;
+      }
+
+      /* Låt inre md-knappar fylla hostens höjd */
+      md-filled-button,
+      md-outlined-button,
+      md-filled-tonal-button,
+      md-text-button {
+        block-size: var(--scb-button-block-size, auto);
+        gap: var(--scb-button-icon-gap);
+        --md-filled-button-container-height: var(--scb-button-block-size, var(--scb-button-container-height));
+        --md-outlined-button-container-height: var(--scb-button-block-size, var(--scb-button-container-height));
+        --md-filled-tonal-button-container-height: var(--scb-button-block-size, var(--scb-button-container-height));
+        --md-text-button-container-height: var(--scb-button-block-size, var(--scb-button-container-height));
+      }
+
+      :host([full-width]) md-filled-button,
+      :host([full-width]) md-outlined-button,
+      :host([full-width]) md-filled-tonal-button,
+      :host([full-width]) md-text-button {
+        inline-size: 100%;
+        flex: 1 1 auto;
+      }
+
+      /*  Errorvarianter  */
+      /*
+      md-filled-button[variant='error'],
+      md-outlined-button[variant='error'],
+      md-filled-tonal-button[variant='error'],
+      md-text-button[variant='error'] {
+        --md-sys-color-primary: var(--md-sys-color-error);
+        --md-sys-color-on-primary: var(--md-sys-color-on-error);
+      }
+      */
+
+      /* Outlined – röd outline vid error + tjockare vid hover */
+      /*
+      md-outlined-button[variant='error'] {
+        --_outline-color: var(--md-sys-color-error);
+        --md-outlined-button-pressed-outline-color: var(--md-sys-color-error);
+      }
+      */
+      /* md-outlined-button[variant='error']:hover, */
+      md-outlined-button:hover {
+        --md-outlined-button-outline-width: var(--spacing-1, 1px);
+      }
+
+      /* Filled-tonal – error-färger */
+      /*
+      md-filled-tonal-button[variant='error'] {
+        --md-filled-tonal-button-container-color: var(--md-sys-color-error-container);
+        --md-filled-tonal-button-label-text-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-hover-label-text-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-pressed-label-text-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-focus-label-text-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-icon-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-hover-icon-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-pressed-icon-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-focus-icon-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-hover-state-layer-color: var(--md-sys-color-on-error-container);
+        --md-filled-tonal-button-pressed-state-layer-color: var(--md-sys-color-on-error-container);
+      }
+      @media (prefers-color-scheme: dark) {
+        md-filled-tonal-button[variant='error'] {
+          --md-filled-tonal-button-container-color: var(--md-sys-color-on-error);
+        }
+      }
+      */
+    `}render(){const t=!!this.icon?.trim(),e=t?b`<md-icon slot="icon" part="icon" ?filled=${this.iconFilled} aria-hidden="true">${this.icon}</md-icon>`:i,o=i,s=this.label.trim()===""?this.icon:void 0;switch(this.variant){case"filled":return b`
+          <md-filled-button
+            type=${this.type}
+            variant=${o}
+            ?trailing-icon=${this.trailingIcon}
+            ?disabled=${this.disabled}
+            aria-label=${s}
+            href=${this.href||i}
+            target=${this.target||i}
+            rel=${this.rel||i}
+          >
+            ${t&&!this.trailingIcon?e:i}
+            ${this.label}
+            ${t&&this.trailingIcon?e:i}
+          </md-filled-button>
+        `;case"outlined":return b`
+          <md-outlined-button
+            type=${this.type}
+            variant=${o}
+            ?trailing-icon=${this.trailingIcon}
+            ?disabled=${this.disabled}
+            aria-label=${s}
+            href=${this.href||i}
+            target=${this.target||i}
+            rel=${this.rel||i}
+          >
+            ${t&&!this.trailingIcon?e:i}
+            ${this.label}
+            ${t&&this.trailingIcon?e:i}
+          </md-outlined-button>
+        `;case"filled-tonal":return b`
+          <md-filled-tonal-button
+            type=${this.type}
+            variant=${o}
+            ?trailing-icon=${this.trailingIcon}
+            ?disabled=${this.disabled}
+            aria-label=${s}
+            href=${this.href||i}
+            target=${this.target||i}
+            rel=${this.rel||i}
+          >
+            ${t&&!this.trailingIcon?e:i}
+            ${this.label}
+            ${t&&this.trailingIcon?e:i}
+          </md-filled-tonal-button>
+        `;case"text":return b`
+          <md-text-button
+            type=${this.type}
+            variant=${o}
+            ?trailing-icon=${this.trailingIcon}
+            ?disabled=${this.disabled}
+            aria-label=${s}
+            href=${this.href||i}
+            target=${this.target||i}
+            rel=${this.rel||i}
+          >
+            ${t&&!this.trailingIcon?e:i}
+            ${this.label}
+            ${t&&this.trailingIcon?e:i}
+          </md-text-button>
+        `;default:return b``}}});function _(){const c=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??c,e=this.mapSpacingToken(this.spacingBottom)??c,o=this.mapSpacingToken(this.spacingLeft),s=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-button-spacing-block-start",t):this.style.removeProperty("--scb-button-spacing-block-start"),e?this.style.setProperty("--scb-button-spacing-block-end",e):this.style.removeProperty("--scb-button-spacing-block-end"),o?this.style.setProperty("--scb-button-spacing-inline-start",o):this.style.removeProperty("--scb-button-spacing-inline-start"),s?this.style.setProperty("--scb-button-spacing-inline-end",s):this.style.removeProperty("--scb-button-spacing-inline-end")}a([l({type:String,reflect:!0})],n.prototype,"variant",void 0);a([l({type:String,reflect:!0})],n.prototype,"size",void 0);a([l({type:String,reflect:!0})],n.prototype,"type",void 0);a([l({type:String})],n.prototype,"label",void 0);a([l({type:Boolean,attribute:"trailing-icon"})],n.prototype,"trailingIcon",void 0);a([l({type:String})],n.prototype,"icon",void 0);a([l({type:Boolean,attribute:"icon-filled",reflect:!0})],n.prototype,"iconFilled",void 0);a([l({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0);a([l({type:Boolean,attribute:"full-width",reflect:!0})],n.prototype,"fullWidth",void 0);a([l({type:String})],n.prototype,"href",void 0);a([l({type:String})],n.prototype,"target",void 0);a([l({type:String})],n.prototype,"rel",void 0);a([l({type:String,reflect:!0})],n.prototype,"spacing",void 0);a([l({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",void 0);a([l({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",void 0);a([l({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",void 0);a([l({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",void 0);n=a([S("scb-button")],n);

package/mvc/components/scb-calendar/scb-calendar-event.js

@@ -0,0 +1,6 @@
+import{_ as l,b as p,g as b,h as i,y as h}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as a}from"../../vendor/decorate.js";(function(){try{var d=typeof globalThis<"u"?globalThis:window;if(!d.__scb_ce_guard_installed__){d.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,s,c){try{customElements.get(e)||t(e,s,c)}catch(u){var o=String(u||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var n,r=(n=class extends l{constructor(...t){super(...t),this.title="",this.description="",this.startDate="",this.endDate="",this.href=""}get date(){return this.startDate}set date(t){const e=(t??"")+"";e!==this.startDate&&(this.startDate=e)}static get observedAttributes(){return[...super.observedAttributes??[],"date"]}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t==="date"&&(this.date=s??"")}updated(t){super.updated?.(t),(t.has("title")||t.has("description")||t.has("startDate")||t.has("endDate")||t.has("href"))&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}render(){return h`
+    `}},n.styles=p`
+    :host {
+      display: block;
+    }
+    `,n);a([i({type:String})],r.prototype,"title",void 0);a([i({type:String})],r.prototype,"description",void 0);a([i({type:String,attribute:"start-date"})],r.prototype,"startDate",void 0);a([i({type:String,attribute:"end-date"})],r.prototype,"endDate",void 0);a([i({type:String})],r.prototype,"href",void 0);r=a([b("scb-calendar-event")],r);

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

@@ -0,0 +1,168 @@
+import"../../vendor/vendor-material.js";import{_ as q,b as H,g as W,h as _,y as T}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as v}from"../../vendor/decorate.js";import{n as P,t as Y}from"../../vendor/assertClassBrand.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-list/scb-list.js";import"./scb-calendar-event.js";import"../scb-dialog/scb-dialog.js";(function(){try{var x=typeof globalThis<"u"?globalThis:window;if(!x.__scb_ce_guard_installed__){x.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,s,a){try{customElements.get(e)||t(e,s,a)}catch(n){var i=String(n||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var F,J,m=(F=new WeakSet,J=class extends q{constructor(...t){super(...t),P(this,F),this._lastActiveDay=null,this.lang="sv",this.disableWeekend=!1,this.publicHolidays=!0,this.displayYear=new Date().getFullYear(),this.displayMonth=new Date().getMonth()+1,this.selectedDate="",this.eventsJson=void 0,this._eventsFromJson=null,this._eventsJsonLast=void 0,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._mutationObserver=null,this._syncingDisplay=!1,this._onCalendarKeyDown=e=>{const s=Array.from(this.shadowRoot?.querySelectorAll(".calendar-day.has-event")??[]),a=this.shadowRoot?.activeElement,i=a&&s.includes(a)?a:document.activeElement,n=s.indexOf(i);if(n===-1)return;let d=n;const l=this.disableWeekend?5:7;switch(e.key){case"ArrowRight":d=n+1<s.length?n+1:n;break;case"ArrowLeft":d=n-1>=0?n-1:n;break;case"ArrowDown":d=n+l<s.length?n+l:n;break;case"ArrowUp":d=n-l>=0?n-l:n;break;default:return}d!==n&&(e.preventDefault(),s[d].focus())},this._onEventChanged=()=>{this.requestUpdate()},this._today=new Date,this._current=new Date,this._popupEvent=null,this._handleDialogClose=()=>{this._popupEvent=null,this.requestUpdate(),this._restoreDayFocus()},this._restoreDayFocus=()=>{this._lastActiveDay&&setTimeout(()=>{this._lastActiveDay?.focus(),this._lastActiveDay=null},0)},this._easterDateCalculated={}}get value(){return this.selectedDate}set value(t){const e=(t??"")+"";e!==this.selectedDate&&(this.selectedDate=e)}static get observedAttributes(){return[...super.observedAttributes??[],"value"]}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t==="value"&&(this.value=s??"")}connectedCallback(){super.connectedCallback(),Y(F,this,I).call(this);const t=Number(this.displayYear),e=Number(this.displayMonth);!Number.isNaN(t)&&!Number.isNaN(e)&&e>=1&&e<=12&&(this._current=new Date(t,e-1,1)),this._syncDisplayFromCurrent(!1),this.addEventListener("change",this._onEventChanged),this._mutationObserver=new MutationObserver(()=>{this.requestUpdate()}),this._mutationObserver.observe(this,{childList:!0}),this.addEventListener("keydown",this._onCalendarKeyDown)}disconnectedCallback(){this.removeEventListener("change",this._onEventChanged),super.disconnectedCallback(),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null),this.removeEventListener("keydown",this._onCalendarKeyDown)}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}updated(t){if(super.updated?.(t),t.has("eventsJson")&&(this._eventsJsonLast=void 0,this._eventsFromJson=null),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&Y(F,this,I).call(this),!this._syncingDisplay&&(t.has("displayYear")||t.has("displayMonth"))){const e=Number(this.displayYear),s=Number(this.displayMonth);if(!Number.isNaN(e)&&!Number.isNaN(s)&&s>=1&&s<=12){const a=this._current.getFullYear(),i=this._current.getMonth()+1;(a!==e||i!==s)&&(this._current=new Date(e,s-1,1),this._dispatchMonthChange(e,s),this.requestUpdate())}}}_ensureEventsFromJson(){const t=(this.eventsJson??"").trim();if(!t){this._eventsFromJson=null,this._eventsJsonLast=t;return}if(!(this._eventsJsonLast===t&&this._eventsFromJson!==null)){this._eventsJsonLast=t;try{const e=JSON.parse(t);Array.isArray(e)?this._eventsFromJson=e:this._eventsFromJson=[]}catch{this._eventsFromJson=[]}}}_getEventInputs(){return Array.isArray(this.events)?this.events:(this._ensureEventsFromJson(),this._eventsFromJson!==null?this._eventsFromJson:null)}_normalizeEventInput(t){const e=t.title??"",s=t.description??"",a=t.href??"",i=t.startDate??t["start-date"]??t.start??t.date??"",n=t.endDate??t["end-date"]??t.end??"";return{title:e+"",description:s?s+"":void 0,href:a?a+"":void 0,start:i?i+"":void 0,end:n?n+"":void 0}}_toLocalEventDate(t,e){const s=(t??"").trim();if(!s)return null;if(!s.includes("T")){const i=s.split("-").map(c=>Number(c));if(i.length!==3||i.some(c=>Number.isNaN(c)))return null;const[n,d,l]=i;return e?new Date(n,d-1,l,23,59,59,999):new Date(n,d-1,l,0,0,0,0)}const a=new Date(s);return Number.isNaN(a.getTime())?null:a}_toDateKey(t){return`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`}_buildEventMapFromInputs(t){const e=new Map;for(const s of t){const a=this._normalizeEventInput(s),i=a.start||"",n=a.end||"";if(!(!i||!a.title))if(i&&n){const d=this._toLocalEventDate(i,!1),l=this._toLocalEventDate(n,!0);if(!d||!l)continue;if(l<d){const c=i.split("T")[0],y=e.get(c)||[];y.push({title:a.title,description:a.description,href:a.href,start:i,end:n}),e.set(c,y);continue}for(let c=new Date(d);c<=l;c.setDate(c.getDate()+1)){const y=this._toDateKey(c),E=e.get(y)||[];E.push({title:a.title,description:a.description,href:a.href,start:i,end:n}),e.set(y,E)}}else{const d=i.split("T")[0],l=e.get(d)||[];l.push({title:a.title,description:a.description,href:a.href,start:i}),e.set(d,l)}}return e}_buildEventMapFromChildren(){const t=Array.from(this.querySelectorAll("scb-calendar-event")),e=new Map;for(const s of t){const a=s,i=(a.startDate??a.date??"")+""||s.getAttribute("start-date")||s.getAttribute("date")||"",n=(a.endDate??"")+""||s.getAttribute("end-date")||"";if(i&&n){const d=this._toLocalEventDate(i,!1),l=this._toLocalEventDate(n,!0);if(!d||!l)continue;if(l<d){const c=i.split("T")[0],y=e.get(c)||[];y.push({title:s.title??"",description:s.description,href:a.href||s.getAttribute("href")||void 0,start:i,end:n}),e.set(c,y);continue}for(let c=new Date(d);c<=l;c.setDate(c.getDate()+1)){const y=this._toDateKey(c),E=e.get(y)||[];E.push({title:s.title??"",description:s.description,href:a.href||s.getAttribute("href")||void 0,start:i,end:n}),e.set(y,E)}}else if(i&&s.title){const d=i.split("T")[0],l=e.get(d)||[];l.push({title:s.title,description:s.description,href:a.href||s.getAttribute("href")||void 0,start:i}),e.set(d,l)}}return e}_syncDisplayFromCurrent(t=!0){const e=this._current.getFullYear(),s=this._current.getMonth()+1;this._syncingDisplay=!0;try{this.displayYear=e,this.displayMonth=s}finally{this._syncingDisplay=!1}t&&this._dispatchMonthChange(e,s)}_dispatchMonthChange(t,e){const s={displayYear:t,displayMonth:e};this.dispatchEvent(new CustomEvent("scb-calendar-month-change",{bubbles:!0,composed:!0,detail:s})),this.dispatchEvent(new CustomEvent("scbcalendarmonthchange",{bubbles:!0,composed:!0,detail:s}))}_dispatchSelect(t){const e={selectedDate:t};this.dispatchEvent(new CustomEvent("scb-calendar-select",{bubbles:!0,composed:!0,detail:e})),this.dispatchEvent(new CustomEvent("scbcalendarselect",{bubbles:!0,composed:!0,detail:e}))}_daysInMonth(t,e){return new Date(t,e+1,0).getDate()}_firstDayOfWeek(t,e){const s=new Date(t,e,1).getDay();return s===0?6:s-1}_prevMonth(){this._current=new Date(this._current.getFullYear(),this._current.getMonth()-1,1),this.selectedDate="",this._popupEvent=null,this._syncDisplayFromCurrent(),this.requestUpdate()}_nextMonth(){this._current=new Date(this._current.getFullYear(),this._current.getMonth()+1,1),this.selectedDate="",this._popupEvent=null,this._syncDisplayFromCurrent(),this.requestUpdate()}_showEventPopup(t){this._popupEvent=t,this.selectedDate=t.date,this._dispatchSelect(t.date),this._lastActiveDay=this.shadowRoot?.activeElement||document.activeElement,this.requestUpdate(),this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelector("scb-dialog");e&&(document.activeElement&&(e.__lastTriggerEl=document.activeElement),requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.open=!0})}),e.addEventListener("close",this._handleDialogClose,{once:!0}))})}_addDays(t,e){const s=new Date(t.valueOf());return s.setDate(s.getDate()+e),s}_easterDay(t){if(typeof this._easterDateCalculated["Ar"+t]<"u")return new Date(this._easterDateCalculated["Ar"+t]);let e=t;e<100&&(e=e+1900),e<1950&&(e=e+100);const s=e%19,a=e%4,i=e%7,n=(19*s+24)%30,d=(2*a+4*i+6*n+5)%7;let l=22+n+d,c=0;l==57&&(l-=7),l==56&&n==28&&d==6&&s>10&&(l-=7),l>31?(l-=31,c=4):c=3;const y=new Date(e,c-1,l);return this._easterDateCalculated["Ar"+t]=y,new Date(this._easterDateCalculated["Ar"+t])}_swedishHolidayName(t){const e=t.getMonth();if(e===1||e===6||e===7||e===8)return null;const s=t.getMonth()+1,a=t.getDate(),i=t.getFullYear(),n=this._easterDay(i),d=this.lang==="en",l=[["Nyårsdagen","New Year's Day",s===1&&a===1],["Trettondedag jul","Epiphany",s===1&&a===6],["Långfredag","Good Friday",+t==+this._addDays(n,-2)],["Påskdagen","Easter Sunday",+t==+n],["Annandag påsk","Easter Monday",+t==+this._addDays(n,1)],["Kristi himmelsfärdsdag","Ascension Day",+t==+this._addDays(n,39)],["Pingstdagen","Pentecost",+t==+this._addDays(n,50)&&i<2005],["Första maj","May Day",s===5&&a===1],["Nationaldagen","National Day",s===6&&a===6&&i>=2005],["Midsommarafton","Midsummer's Eve",s===6&&a>=19&&a<=25&&t.getDay()===5],["Midsommardagen","Midsummer's Day",s===6&&a>=20&&a<=26&&t.getDay()===6],["Julafton","Christmas Eve",s===12&&a===24],["Juldagen","Christmas Day",s===12&&a===25],["Annandag jul","Boxing Day",s===12&&a===26],["Alla helgons dag","All Saints' Day",s===10&&a>=31&&t.getDay()===6||s===11&&a<=6&&t.getDay()===6]];for(const c of l){const[y,E,A]=c;if(A)return d?E:y}return null}render(){const t=this._current.getFullYear(),e=this._current.getMonth(),s=this._daysInMonth(t,e),a=this._firstDayOfWeek(t,e),i=this._today,n=this.lang==="en",d=n?["January","February","March","April","May","June","July","August","September","October","November","December"]:["Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December"];let l=n?["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]:["Mån","Tis","Ons","Tor","Fre","Lör","Sön"];this.disableWeekend&&(l=l.slice(0,5));const c=this._getEventInputs(),y=c?this._buildEventMapFromInputs(c):this._buildEventMapFromChildren(),E=[];let A=1;for(let r=0;r<6;r++){const h=[],f=this.disableWeekend?[0,1,2,3,4]:[0,1,2,3,4,5,6];let p=A;for(let D=0;D<f.length;D++){const w=f[D];if(r===0&&w<a){if(!this.disableWeekend||w<5){const k=e===0?11:e-1,N=e===0?t-1:t,b=this._daysInMonth(N,k)-(a-w-1);h.push(T`
+              <div class="calendar-day calendar-day--other">
+                <span class="calendar-day-number">${b}</span>
+              </div>
+            `)}}else if(p>s)h.push(T`<div></div>`);else{let k=new Date(t,e,p);if(this.disableWeekend)for(;k.getDay()===0||k.getDay()===6;)p++,k=new Date(t,e,p);if(p>s){h.push(T`<div></div>`);continue}const N=i.getFullYear()===t&&i.getMonth()===e&&i.getDate()===p,b=`${t}-${String(e+1).padStart(2,"0")}-${String(p).padStart(2,"0")}`,K=new Date(t,e,p);let L=!1,M=null;this.publicHolidays&&(M=this._swedishHolidayName(K),L=!!M);let u=y.get(b)||[];u=[...u].sort((o,g)=>{const S=o.start&&b===o.start.split("T")[0]?o.start:o.end&&b===o.end.split("T")[0]?o.end:"",$=g.start&&b===g.start.split("T")[0]?g.start:g.end&&g.end.split("T")[0]?g.end:"",C=S&&S.includes("T"),O=$&&$.includes("T");return C&&O?S.localeCompare($):C?-1:O?1:o.title.localeCompare(g.title)});const j=[...u].map(o=>{let g="",S="";if(o.start&&o.end){const $=o.start.split("T")[0],C=o.end.split("T")[0];b===$&&b===C&&o.start.includes("T")&&o.end.includes("T")?g=o.start.split("T")[1].substring(0,5)+"–"+o.end.split("T")[1].substring(0,5):b===$&&o.start.includes("T")?g=o.start.split("T")[1].substring(0,5):b===C&&o.end.includes("T")&&$!==C?(g=o.end.split("T")[1].substring(0,5),S=n?"cont. ":"fort. "):b===C&&o.end.includes("T")?g=o.end.split("T")[1].substring(0,5):b!==$&&(g="",S=n?"cont. ":"fort. ")}else o.start&&o.start.includes("T")&&(g=o.start.split("T")[1].substring(0,5));return{...o,time:g,prefix:S}});h.push(T`
+            <div
+              class="calendar-day${N?" today":""}${u.length?" has-event":""}${L?" calendar-day--holiday":""}"
+              tabindex=${u.length?"0":void 0}
+              @click=${u.length?(()=>this._showEventPopup({date:b,events:u})):null}
+              @keydown=${u.length?(o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this._showEventPopup({date:b,events:u}))}):null}
+              title=${M||(u.length===1?u[0].title:u.length>1?u.map(o=>o.title).join(", "):"")}
+              role=${u.length?"button":void 0}
+              aria-label=${M||(u.length?u.length===1?u[0].title:u.map(o=>o.title).join(", "):void 0)}
+            >
+              <md-focus-ring inward></md-focus-ring>
+              <span class="calendar-day-number">${p} ${M?T`<span class="calendar-day-holiday-name">${M}</span>`:""}</span>
+              <div class="calendar-titles-wrapper">
+                ${j.map(o=>T`<span class="calendar-day-event-title">${o.prefix||""}${o.title}</span>`)}
+              </div>
+            </div>
+          `),p++}}if(A=p,E.push(T`<div class="calendar-grid">${h}</div>`),A>s)break}return T`
+      <div class="calendar-header">
+        <scb-icon-button @click=${this._prevMonth} icon="chevron_left" aria-label="${n?"Previous month":"Föregående månad"}"></scb-icon-button>
+        <span>${d[e]} ${t}</span>
+        <scb-icon-button @click=${this._nextMonth} icon="chevron_right" aria-label="${n?"Next month":"Nästa månad"}"></scb-icon-button>
+      </div>
+      <div class="calendar-grid calendar-grid-days">
+        ${l.map(r=>T`<div>${r}</div>`)}
+      </div>
+      <div class="calendar-weeks">
+      ${E}
+      </div>
+      ${this._popupEvent&&Array.isArray(this._popupEvent.events)?T`
+        <scb-dialog variant="floating" open label="${n?"Events":"Händelser"} ${this._popupEvent.date}">
+          <scb-list>
+            ${[...this._popupEvent.events].sort((r,h)=>{const f=r.start&&r.start.includes("T")?r.start:r.end&&r.end.includes("T")?r.end:"",p=h.start&&h.start.includes("T")?h.start:h.end&&h.end.includes("T")?h.end:"",D=f&&f.includes("T"),w=p&&p.includes("T");return D&&w?f.localeCompare(p):D?-1:w?1:r.title.localeCompare(h.title)}).map(r=>{const h=this._popupEvent?.date??"";let f="",p="",D="";if(r.start&&r.end){const w=r.start.split("T")[0],k=r.end.split("T")[0];w===k&&r.start.includes("T")&&r.end.includes("T")?f=r.start.split("T")[1].substring(0,5)+" – "+r.end.split("T")[1].substring(0,5):h===w&&r.start.includes("T")&&(f="Start: "+r.start.split("T")[1].substring(0,5)+(n?" (Extended event) ":" (Flerdagsevenemang) ")),h===k&&r.end.includes("T")&&w!==k&&(D=(n?"End: ":"Slut: ")+r.end.split("T")[1].substring(0,5)),h!==w&&(p=n?"cont. ":"fort. ")}else r.start&&r.start.includes("T")&&(f=r.start.split("T")[1].substring(0,5));return r.href?T`
+                  <scb-list-item
+                    type="link"
+                    item-href="${r.href}"
+                    label="${p}${r.title}"
+                    supporting-text="${r.description?r.description:""}"
+                    overline="${f||""}${D||""}"
+                  >
+                  </scb-list-item>`:T`
+                <scb-list-item
+                  label="${p}${r.title}"
+                  supporting-text="${r.description?r.description:""}"
+                  overline="${f||""}${D||""}"
+                >
+                </scb-list-item>`})}
+          </scb-list>
+        </scb-dialog>
+      `:""}
+    `}},J.styles=H`
+    :host {
+        display: block;
+        margin-block-start: var(--scb-calendar-spacing-block-start, 0);
+        margin-block-end: var(--scb-calendar-spacing-block-end, 0);
+        margin-inline-start: var(--scb-calendar-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-calendar-spacing-inline-end, 0);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        padding: var(--spacing-5);
+        border-radius: var(--md-sys-shape-corner-large);
+        background: var(--md-sys-color-surface);
+        font-family: var(--brand-font);
+    }
+    .calendar-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: var(--spacing-5);
+        border-bottom: 1px solid rgb(224, 224, 224);
+        padding-bottom: var(--spacing-3);
+    }
+    .calendar-grid {
+      display: grid;
+      gap: var(--spacing-2);
+      margin-bottom: var(--spacing-2);
+      grid-template-columns: repeat(7, 1fr);
+    }
+    :host([disable-weekend]) .calendar-grid {
+      grid-template-columns: repeat(5, 1fr);
+    }
+    .calendar-grid-days{
+        font-weight: 600;
+        margin-bottom: var(--spacing-5);
+    }
+    .calendar-weeks {
+        display: grid;
+        grid-auto-rows: 1fr;
+    }
+    .calendar-titles-wrapper{
+        display: grid;
+        gap: var(--spacing-2);
+    }
+    .calendar-day {
+        border-radius: 6px;
+        min-height: 50px;
+        display: flex;
+        padding: var(--spacing-3);
+        box-sizing: border-box;
+        overflow: hidden;
+        gap: var(--spacing-3);
+        border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        flex-direction: column;
+    }
+    .calendar-day--holiday {
+      background: var(--md-sys-color-error-container);
+    }
+    .calendar-day.has-event:focus {
+        outline: none;
+    }
+    md-focus-ring {
+        border-radius: 6px;
+    }
+    .calendar-day--other {
+       color: light-dark(var(--n-40), var(--n-70));
+    }
+    .calendar-day--other .calendar-day-event-title {
+       color: inherit;
+    }
+    .calendar-day--other .calendar-day-number {
+       font-weight: var(--weight-regular);
+    }
+    .calendar-day-number {
+        font-size:  var(--md-sys-typescale-label-small-size);
+        line-height: var(--md-sys-typescale-label-small-line-height); /* vissa tabeller i Figma visar 21 */
+        font-weight: var(--md-sys-typescale-label-small-weight);
+        letter-spacing: var(--md-sys-typescale-label-small-tracking);
+        display: flex;
+        gap: 8px;
+    }
+    .calendar-day-event-title {
+        font-size: 12px;
+        color: var(--md-sys-color-primary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        width: 100%;
+    }
+    .calendar-day-holiday-name{
+        color: var(--md-sys-color-on-error-container);
+        font-weight: var(--md-sys-typescale-body-medium-weight);
+        font-size: 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        width: 100%;
+    }
+    .calendar-day.today {
+        background: var(--md-sys-color-secondary-container);
+      
+    }
+    .calendar-day.has-event {
+        cursor: pointer;
+        position: relative;
+        border: 1px solid var(--md-sys-color-primary);
+    }
+
+    .event-popup-list{
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-4);
+    }
+    
+  `,J);function I(){const x=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??x,e=this.mapSpacingToken(this.spacingBottom)??x,s=this.mapSpacingToken(this.spacingLeft),a=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-calendar-spacing-block-start",t):this.style.removeProperty("--scb-calendar-spacing-block-start"),e?this.style.setProperty("--scb-calendar-spacing-block-end",e):this.style.removeProperty("--scb-calendar-spacing-block-end"),s?this.style.setProperty("--scb-calendar-spacing-inline-start",s):this.style.removeProperty("--scb-calendar-spacing-inline-start"),a?this.style.setProperty("--scb-calendar-spacing-inline-end",a):this.style.removeProperty("--scb-calendar-spacing-inline-end")}v([_({type:String})],m.prototype,"lang",void 0);v([_({type:Boolean,attribute:"disable-weekend"})],m.prototype,"disableWeekend",void 0);v([_({type:Boolean,attribute:"public-holidays"})],m.prototype,"publicHolidays",void 0);v([_({type:Number,attribute:"display-year",reflect:!0})],m.prototype,"displayYear",void 0);v([_({type:Number,attribute:"display-month",reflect:!0})],m.prototype,"displayMonth",void 0);v([_({type:String,attribute:"selected-date",reflect:!0})],m.prototype,"selectedDate",void 0);v([_({attribute:!1})],m.prototype,"events",void 0);v([_({type:String,attribute:"events-json"})],m.prototype,"eventsJson",void 0);v([_({type:String,reflect:!0})],m.prototype,"spacing",void 0);v([_({type:String,attribute:"spacing-top",reflect:!0})],m.prototype,"spacingTop",void 0);v([_({type:String,attribute:"spacing-bottom",reflect:!0})],m.prototype,"spacingBottom",void 0);v([_({type:String,attribute:"spacing-left",reflect:!0})],m.prototype,"spacingLeft",void 0);v([_({type:String,attribute:"spacing-right",reflect:!0})],m.prototype,"spacingRight",void 0);m=v([W("scb-calendar")],m);