scb-wc-test 0.1.119 → 0.1.121

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

@@ -1,4 +1,4 @@
-import{n as s,t as I,i as k,a as T,x as h,E as i}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(r,a,l){try{customElements.get(r)||e(r,a,l)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var B=Object.defineProperty,O=Object.getOwnPropertyDescriptor,A=t=>{throw TypeError(t)},n=(t,e,r,a)=>{for(var l=a>1?void 0:a?O(e,r):e,c=t.length-1,d;c>=0;c--)(d=t[c])&&(l=(a?d(e,r,l):d(l))||l);return a&&l&&B(e,r,l),l},w=(t,e,r)=>e.has(t)||A("Cannot "+r),E=(t,e,r)=>e.has(t)?A("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,r),$=(t,e,r)=>(w(t,e,"access private method"),r),m,g;let o=class extends k{constructor(){super(...arguments),E(this,m),this.variant="filled",this.type="button",this.label="Button",this.trailingIcon=!1,this.icon="",this.disabled=!1,this.href="",this.target="",this.rel="",this.spacing="",this.spacingTop="",this.spacingBottom=""}__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 r=(this.getAttribute("aria-label")||"").trim(),a=(t.getAttribute("aria-label")||"").trim(),l=this.label.trim()===""?(this.icon||"").trim():"",c=r||a||l;c?e.setAttribute("aria-label",c):e.removeAttribute("aria-label");const d=this.getAttribute("aria-controls");d!==null?e.setAttribute("aria-controls",d):e.removeAttribute("aria-controls");const y=this.getAttribute("aria-expanded");y!==null?e.setAttribute("aria-expanded",y):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(x=>{const b=this.__getMdHost(),p=this.__getInnerNativeButton(b);if(!(!b||!p)){for(const f of x){if(f.type!=="attributes"||!f.attributeName)continue;const u=f.attributeName,v=this.getAttribute(u);if(u==="aria-label"){const S=(b.getAttribute("aria-label")||"").trim(),_=(v||S||(this.label.trim()===""?(this.icon||"").trim():"")).trim();_?p.setAttribute("aria-label",_):p.removeAttribute("aria-label"),b.removeAttribute("aria-label")}else(u==="aria-controls"||u==="aria-expanded")&&(v===null?p.removeAttribute(u):p.setAttribute(u,v),u==="aria-expanded"&&this.removeAttribute("aria-expanded"))}b.removeAttribute("aria-label"),b.removeAttribute("aria-controls"),b.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(),$(this,m,g).call(this)}updated(t){t.has("variant")&&this.__syncAriaToInner(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&$(this,m,g).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 T`
+import{n as l,t as I,i as k,a as w,x as h,E as i}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(r,a,s){try{customElements.get(r)||e(r,a,s)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var T=Object.defineProperty,B=Object.getOwnPropertyDescriptor,A=t=>{throw TypeError(t)},n=(t,e,r,a)=>{for(var s=a>1?void 0:a?B(e,r):e,c=t.length-1,d;c>=0;c--)(d=t[c])&&(s=(a?d(e,r,s):d(s))||s);return a&&s&&T(e,r,s),s},O=(t,e,r)=>e.has(t)||A("Cannot "+r),E=(t,e,r)=>e.has(t)?A("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,r),$=(t,e,r)=>(O(t,e,"access private method"),r),m,y;let o=class extends k{constructor(){super(...arguments),E(this,m),this.variant="filled",this.type="button",this.label="Button",this.trailingIcon=!1,this.icon="",this.disabled=!1,this.fullWidth=!1,this.href="",this.target="",this.rel="",this.spacing="",this.spacingTop="",this.spacingBottom=""}__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 r=(this.getAttribute("aria-label")||"").trim(),a=(t.getAttribute("aria-label")||"").trim(),s=this.label.trim()===""?(this.icon||"").trim():"",c=r||a||s;c?e.setAttribute("aria-label",c):e.removeAttribute("aria-label");const d=this.getAttribute("aria-controls");d!==null?e.setAttribute("aria-controls",d):e.removeAttribute("aria-controls");const g=this.getAttribute("aria-expanded");g!==null?e.setAttribute("aria-expanded",g):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(x=>{const u=this.__getMdHost(),p=this.__getInnerNativeButton(u);if(!(!u||!p)){for(const f of x){if(f.type!=="attributes"||!f.attributeName)continue;const b=f.attributeName,v=this.getAttribute(b);if(b==="aria-label"){const S=(u.getAttribute("aria-label")||"").trim(),_=(v||S||(this.label.trim()===""?(this.icon||"").trim():"")).trim();_?p.setAttribute("aria-label",_):p.removeAttribute("aria-label"),u.removeAttribute("aria-label")}else(b==="aria-controls"||b==="aria-expanded")&&(v===null?p.removeAttribute(b):p.setAttribute(b,v),b==="aria-expanded"&&this.removeAttribute("aria-expanded"))}u.removeAttribute("aria-label"),u.removeAttribute("aria-controls"),u.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(),$(this,m,y).call(this)}updated(t){t.has("variant")&&this.__syncAriaToInner(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&$(this,m,y).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 w`
       /* Gör hosten stretchbar i t.ex. flex/grid */
       :host {
         display: inline-flex;
@@ -7,6 +7,11 @@ import{n as s,t as I,i as k,a as T,x as h,E as i}from"../../vendor/vendor.js";im
         margin-block-end: var(--scb-button-spacing-block-end, 0);
       }
 
+      :host([full-width]) {
+        display: flex;
+        inline-size: 100%;
+      }
+
       /* Låt inre md-knappar fylla hostens höjd */
       md-filled-button,
       md-outlined-button,
@@ -15,6 +20,14 @@ import{n as s,t as I,i as k,a as T,x as h,E as i}from"../../vendor/vendor.js";im
         block-size: 100%;
       }
 
+      :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'],
@@ -119,4 +132,4 @@ import{n as s,t as I,i as k,a as T,x as h,E as i}from"../../vendor/vendor.js";im
             ${this.label}
             ${t&&this.trailingIcon?e:i}
           </md-text-button>
-        `;default:return h``}}};m=new WeakSet;g=function(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,r=this.mapSpacingToken(this.spacingBottom)??t;e?this.style.setProperty("--scb-button-spacing-block-start",e):this.style.removeProperty("--scb-button-spacing-block-start"),r?this.style.setProperty("--scb-button-spacing-block-end",r):this.style.removeProperty("--scb-button-spacing-block-end")};n([s({type:String,reflect:!0})],o.prototype,"variant",2);n([s({type:String,reflect:!0})],o.prototype,"type",2);n([s({type:String})],o.prototype,"label",2);n([s({type:Boolean,attribute:"trailing-icon"})],o.prototype,"trailingIcon",2);n([s({type:String})],o.prototype,"icon",2);n([s({type:Boolean,reflect:!0})],o.prototype,"disabled",2);n([s({type:String})],o.prototype,"href",2);n([s({type:String})],o.prototype,"target",2);n([s({type:String})],o.prototype,"rel",2);n([s({type:String,reflect:!0})],o.prototype,"spacing",2);n([s({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",2);n([s({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",2);o=n([I("scb-button")],o);
+        `;default:return h``}}};m=new WeakSet;y=function(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,r=this.mapSpacingToken(this.spacingBottom)??t;e?this.style.setProperty("--scb-button-spacing-block-start",e):this.style.removeProperty("--scb-button-spacing-block-start"),r?this.style.setProperty("--scb-button-spacing-block-end",r):this.style.removeProperty("--scb-button-spacing-block-end")};n([l({type:String,reflect:!0})],o.prototype,"variant",2);n([l({type:String,reflect:!0})],o.prototype,"type",2);n([l({type:String})],o.prototype,"label",2);n([l({type:Boolean,attribute:"trailing-icon"})],o.prototype,"trailingIcon",2);n([l({type:String})],o.prototype,"icon",2);n([l({type:Boolean,reflect:!0})],o.prototype,"disabled",2);n([l({type:Boolean,attribute:"full-width",reflect:!0})],o.prototype,"fullWidth",2);n([l({type:String})],o.prototype,"href",2);n([l({type:String})],o.prototype,"target",2);n([l({type:String})],o.prototype,"rel",2);n([l({type:String,reflect:!0})],o.prototype,"spacing",2);n([l({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",2);n([l({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",2);o=n([I("scb-button")],o);

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

@@ -1,12 +1,6 @@
-import{a as p,n as d,i as c,x as f,t as _}from"../../vendor/vendor.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,i,t){try{customElements.get(e)||r(e,i,t)}catch(n){var s=String(n||"");if(s.indexOf("already been used")===-1&&s.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var u=Object.defineProperty,h=Object.getOwnPropertyDescriptor,l=(a,r,e,i)=>{for(var t=i>1?void 0:i?h(r,e):r,s=a.length-1,n;s>=0;s--)(n=a[s])&&(t=(i?n(r,e,t):n(t))||t);return i&&t&&u(r,e,t),t};let o=class extends c{constructor(){super(...arguments),this.title="",this.date="",this.description=""}render(){return f`
-      <div>
-        <h3>${this.title}</h3>
-        <p>${this.date}</p>
-        <p>${this.description}</p>
-      </div>
-    `}};o.styles=p`
+import{a as p,n as l,i as u,x as c,t as _}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(r,n,e){try{customElements.get(r)||i(r,n,e)}catch(o){var a=String(o||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,d=(t,i,r,n)=>{for(var e=n>1?void 0:n?b(i,r):i,a=t.length-1,o;a>=0;a--)(o=t[a])&&(e=(n?o(i,r,e):o(e))||e);return n&&e&&f(i,r,e),e};let s=class extends u{constructor(){super(...arguments),this.title="",this.description="",this.startDate="",this.endDate=""}updated(t){super.updated?.(t),(t.has("title")||t.has("description")||t.has("startDate")||t.has("endDate"))&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}render(){return c`
+    `}};s.styles=p`
     :host {
       display: block;
-      font-family: var(--brand-font, Arial, sans-serif)
     }
-    `;l([d({type:String})],o.prototype,"title",2);l([d({type:String})],o.prototype,"date",2);l([d({type:String})],o.prototype,"description",2);o=l([_("scb-calendar-event")],o);
+    `;d([l({type:String})],s.prototype,"title",2);d([l({type:String})],s.prototype,"description",2);d([l({type:String,attribute:"start-date"})],s.prototype,"startDate",2);d([l({type:String,attribute:"end-date"})],s.prototype,"endDate",2);s=d([_("scb-calendar-event")],s);

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

@@ -1,67 +1,70 @@
-import{a as x,n as m,i as w,x as d,t as $}from"../../vendor/vendor.js";import"./scb-calendar-event.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(n,s,a){try{customElements.get(n)||e(n,s,a)}catch(i){var l=String(i||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var M=Object.defineProperty,D=Object.getOwnPropertyDescriptor,g=(t,e,n,s)=>{for(var a=s>1?void 0:s?D(e,n):e,l=t.length-1,i;l>=0;l--)(i=t[l])&&(a=(s?i(e,n,a):i(a))||a);return s&&a&&M(e,n,a),a};let v=class extends w{constructor(){super(...arguments),this.label="",this.value="",this._today=new Date,this._current=new Date,this._popupEvent=null}_daysInMonth(t,e){return new Date(t,e+1,0).getDate()}_firstDayOfWeek(t,e){return new Date(t,e,1).getDay()}_prevMonth(){this._current=new Date(this._current.getFullYear(),this._current.getMonth()-1,1),this.requestUpdate()}_nextMonth(){this._current=new Date(this._current.getFullYear(),this._current.getMonth()+1,1),this.requestUpdate()}_showEventPopup(t){this._popupEvent=t,this.requestUpdate(),setTimeout(()=>{const e=n=>{n.target?.closest(".event-popup")||this._closePopup()};window.addEventListener("mousedown",e,{once:!0})},0)}_closePopup(){this._popupEvent=null,this.requestUpdate()}render(){const t=this._current.getFullYear(),e=this._current.getMonth(),n=this._daysInMonth(t,e),s=this._firstDayOfWeek(t,e),a=this._today,l=Array.from(this.querySelectorAll("scb-calendar-event")),i=new Map;for(const r of l)if(r.date&&r.title){const p=i.get(r.date)||[];p.push({title:r.title,description:r.description}),i.set(r.date,p)}const f=[];let c=1;for(let r=0;r<6;r++){const p=[];for(let h=0;h<7;h++)if(r===0&&h<s){const b=e===0?11:e-1,y=e===0?t-1:t,u=this._daysInMonth(y,b)-(s-h-1);p.push(d`
+import{a as S,n as k,i as O,x as m,t as C}from"../../vendor/vendor.js";import"./scb-calendar-event.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-dialog/scb-dialog.js";import"../scb-list/scb-list.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-button/scb-button.js";import"../scb-textfield/scb-textfield.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-divider/scb-divider.js";import"../scb-checkbox/scb-checkbox.js";import"../scb-checkbox/scb-checkbox-group.js";import"../scb-radio-button/scb-radio-button.js";import"../scb-radio-button/scb-radio-group.js";import"../scb-switch/scb-switch.js";import"../scb-chip/scb-chip.js";import"../scb-list/scb-list-item.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var a=customElements.define.bind(customElements);customElements.define=function(c,h,u){try{customElements.get(c)||a(c,h,u)}catch(b){var o=String(b||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw b}}}}catch{}})();var A=Object.defineProperty,P=Object.getOwnPropertyDescriptor,x=(i,a,c,h)=>{for(var u=h>1?void 0:h?P(a,c):a,o=i.length-1,b;o>=0;o--)(b=i[o])&&(u=(h?b(a,c,u):b(u))||u);return h&&u&&A(a,c,u),u};let w=class extends O{constructor(){super(...arguments),this.lang="sv",this._mutationObserver=null,this._onEventChanged=()=>{this.requestUpdate()},this._today=new Date,this._current=new Date,this._popupEvent=null}connectedCallback(){super.connectedCallback(),this.addEventListener("change",this._onEventChanged),this._mutationObserver=new MutationObserver(()=>{this.requestUpdate()}),this._mutationObserver.observe(this,{childList:!0})}disconnectedCallback(){this.removeEventListener("change",this._onEventChanged),super.disconnectedCallback(),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null)}_daysInMonth(i,a){return new Date(i,a+1,0).getDate()}_firstDayOfWeek(i,a){const c=new Date(i,a,1).getDay();return c===0?6:c-1}_prevMonth(){this._current=new Date(this._current.getFullYear(),this._current.getMonth()-1,1),this.requestUpdate()}_nextMonth(){this._current=new Date(this._current.getFullYear(),this._current.getMonth()+1,1),this.requestUpdate()}_showEventPopup(i){this._popupEvent=i,this.requestUpdate(),setTimeout(()=>{const a=this.shadowRoot?.querySelector("scb-dialog");a&&a.setAttribute("open","");const c=h=>{h.target?.closest(".event-popup")||this._closePopup()};window.addEventListener("mousedown",c,{once:!0})},0)}_closePopup(){const i=this.shadowRoot?.querySelector("scb-dialog");i&&i.removeAttribute("open"),this._popupEvent=null,this.requestUpdate()}render(){const i=this._current.getFullYear(),a=this._current.getMonth(),c=this._daysInMonth(i,a),h=this._firstDayOfWeek(i,a),u=this._today,o=this.lang==="en",b=o?["January","February","March","April","May","June","July","August","September","October","November","December"]:["Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December"],E=o?["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]:["Mån","Tis","Ons","Tor","Fre","Lör","Sön"],M=Array.from(this.querySelectorAll("scb-calendar-event")),_=new Map;for(const t of M){const r=t.getAttribute("start-date")||"",l=t.getAttribute("end-date")||"";if(r&&l){const d=new Date(r),n=new Date(l);for(let s=new Date(d);s<=n;s.setDate(s.getDate()+1)){const g=s.toISOString().split("T")[0],e=_.get(g)||[];e.push({title:t.title,description:t.description,start:r,end:l}),_.set(g,e)}}else if(r&&t.title){const d=r.split("T")[0],n=_.get(d)||[];n.push({title:t.title,description:t.description,start:r}),_.set(d,n)}}const $=[];let y=1;for(let t=0;t<6;t++){const r=[];for(let l=0;l<7;l++)if(t===0&&l<h){const d=a===0?11:a-1,n=a===0?i-1:i,g=this._daysInMonth(n,d)-(h-l-1);r.push(m`
             <div class="calendar-day calendar-day--other">
-              <span class="calendar-day-number">${u}</span>
+              <span class="calendar-day-number">${g}</span>
             </div>
-          `)}else if(c>n)p.push(d`<div></div>`);else{const b=a.getFullYear()===t&&a.getMonth()===e&&a.getDate()===c,y=`${t}-${String(e+1).padStart(2,"0")}-${String(c).padStart(2,"0")}`,o=i.get(y)||[];p.push(d`
+          `)}else if(y>c)r.push(m`<div></div>`);else{const d=u.getFullYear()===i&&u.getMonth()===a&&u.getDate()===y,n=`${i}-${String(a+1).padStart(2,"0")}-${String(y).padStart(2,"0")}`;let s=_.get(n)||[];s=[...s].sort((e,p)=>{const f=e.start&&n===e.start.split("T")[0]?e.start:e.end&&n===e.end.split("T")[0]?e.end:"",v=p.start&&n===p.start.split("T")[0]?p.start:p.end&&n===p.end.split("T")[0]?p.end:"",T=f&&f.includes("T"),D=v&&v.includes("T");return T&&D?f.localeCompare(v):T?-1:D?1:e.title.localeCompare(p.title)});const g=[...s].map(e=>{let p="",f="";if(e.start&&e.end){const v=e.start.split("T")[0],T=e.end.split("T")[0];n===v&&n===T&&e.start.includes("T")&&e.end.includes("T")?p=e.start.split("T")[1].substring(0,5)+"–"+e.end.split("T")[1].substring(0,5):n===v&&e.start.includes("T")?p=e.start.split("T")[1].substring(0,5):n===T&&e.end.includes("T")?(p=e.end.split("T")[1].substring(0,5),f=o?"cont. ":"fort. "):n!==v&&(p="",f=o?"cont. ":"fort. ")}else e.start&&e.start.includes("T")&&(p=e.start.split("T")[1].substring(0,5));return{...e,time:p,prefix:f}});r.push(m`
             <div
-              class="calendar-day${b?" today":""}${o.length?" has-event":""}"
-              @click=${o.length?()=>this._showEventPopup({date:y,events:o}):null}
-              title=${o.length===1?o[0].title:o.length>1?o.map(u=>u.title).join(", "):""}
+              class="calendar-day${d?" today":""}${s.length?" has-event":""}"
+              ?tabindex=${s.length?0:void 0}
+              @click=${s.length?()=>this._showEventPopup({date:n,events:s}):null}
+              tabindex=${s.length?"0":void 0}
+              @keydown=${s.length?e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._showEventPopup({date:n,events:s}))}:null}
+              title=${s.length===1?s[0].title:s.length>1?s.map(e=>e.title).join(", "):""}
+              role=${s.length?"button":void 0}
+              aria-label=${s.length?s.length===1?s[0].title:s.map(e=>e.title).join(", "):void 0}
             >
-              <span class="calendar-day-number">${c}</span>
+              <md-focus-ring inward></md-focus-ring>
+              <span class="calendar-day-number">${y}</span>
               <div class="calendar-titles-wrapper">
-              ${o.map(u=>d`<span class="calendar-day-event-title">${u.title}</span>`)}
+              ${g.map(e=>m`<span class="calendar-day-event-title">${e.prefix||""}${e.title}</span>`)}
               </div>
             </div>
-          `),c++}if(f.push(d`<div class="calendar-grid">${p}</div>`),c>n)break}const _=["Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December"];return d`
+          `),y++}if($.push(m`<div class="calendar-grid">${r}</div>`),y>c)break}return m`
       <div class="calendar-header">
-        <scb-icon-button @click=${this._prevMonth} icon="chevron_left" aria-label="Föregående månad"></scb-icon-button>
-        <span>${_[e]} ${t}</span>
-        <scb-icon-button @click=${this._nextMonth} icon="chevron_right" aria-label="Nästa månad"></scb-icon-button>
+        <scb-icon-button @click=${this._prevMonth} icon="chevron_left" aria-label="${o?"Previous month":"Föregående månad"}"></scb-icon-button>
+        <span>${b[a]} ${i}</span>
+        <scb-icon-button @click=${this._nextMonth} icon="chevron_right" aria-label="${o?"Next month":"Nästa månad"}"></scb-icon-button>
       </div>
       <div class="calendar-grid calendar-grid-days">
-        <div>Mån</div><div>Tis</div><div>Ons</div><div>Tor</div><div>Fre</div><div>Lör</div><div>Sön</div>
+        ${E.map(t=>m`<div>${t}</div>`)}
       </div>
       <div class="calendar-weeks">
-      ${f}
-      <div>
-      ${this._popupEvent&&Array.isArray(this._popupEvent.events)?d`
-        <div class="event-popup-backdrop" @click=${this._closePopup}></div>
-        <div class="event-popup">
-          <button class="close-btn" @click=${this._closePopup} title="Stäng">×</button>
-          <div>${this._popupEvent.date}</div>
-          <ul>
-            ${this._popupEvent.events.map(r=>d`<li><strong>${r.title}</strong>${r.description?d`<div>${r.description}</div>`:""}</li>`)}
-          </ul>
-        </div>
+      ${$}
+      </div>
+      ${this._popupEvent&&Array.isArray(this._popupEvent.events)?m`
+        <scb-dialog variant="floating" open label="${o?"Events":"Händelser"} ${this._popupEvent.date}">
+          <scb-list>
+            ${[...this._popupEvent.events].sort((t,r)=>{const l=t.start&&t.start.includes("T")?t.start:t.end&&t.end.includes("T")?t.end:"",d=r.start&&r.start.includes("T")?r.start:r.end&&r.end.includes("T")?r.end:"",n=l&&l.includes("T"),s=d&&d.includes("T");return n&&s?l.localeCompare(d):n?-1:s?1:t.title.localeCompare(r.title)}).map(t=>{const r=this._popupEvent?.date??"";let l="",d="",n="";if(t.start&&t.end){const s=t.start.split("T")[0],g=t.end.split("T")[0];s===g&&t.start.includes("T")&&t.end.includes("T")?l=t.start.split("T")[1].substring(0,5)+" – "+t.end.split("T")[1].substring(0,5):r===s&&t.start.includes("T")&&(l="Start: "+t.start.split("T")[1].substring(0,5)+(o?" (Extended event) ":" (Flerdagsevenemang) ")),r===g&&t.end.includes("T")&&s!==g&&(n=(o?"End: ":"Slut: ")+t.end.split("T")[1].substring(0,5)),r!==s&&(d=o?"cont. ":"fort. ")}else t.start&&t.start.includes("T")&&(l=t.start.split("T")[1].substring(0,5));return m`
+                <scb-list-item label="${d}${t.title}" supporting-text="${t.description?t.description:""}" overline="${l||""}${n||""}">
+                </scb-list-item>`})}
+          </scb-list>
+        </scb-dialog>
       `:""}
-    `}};v.styles=x`
+    `}};w.styles=S`
     :host {
-      display: block;
-      font-family: var(--brand-font, Arial, sans-serif);
-      background: var(--md-sys-color-surface, #fff);
-      color: var(--md-sys-color-on-surface, #222);
-      border-radius: 12px;
-      border: var(--scb-elevation-2, 0 2px 8px rgba(0,0,0,0.08));
-      padding: 16px;
+        display: block;
+        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);
     }
     .calendar-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: var(--spacing-5);
         border-bottom: 1px solid rgb(224, 224, 224);
-        padding-bottom: 8px;
+        padding-bottom: var(--spacing-3);
     }
     .calendar-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 4px;
-    margin-bottom: 4px;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: var(--spacing-2);
+        margin-bottom: var(--spacing-2);
     }
     .calendar-grid-days{
         font-weight: 600;
-        margin-bottom: 16px;
+        margin-bottom: var(--spacing-5);
     }
     .calendar-weeks {
         display: grid;
@@ -69,55 +72,57 @@ import{a as x,n as m,i as w,x as d,t as $}from"../../vendor/vendor.js";import"./
     }
     .calendar-titles-wrapper{
         display: grid;
-        gap: 4px;
+        gap: var(--spacing-2);
     }
     .calendar-day {
-      border-radius: 6px;
-      min-height: 3.2em;
-      display: flex;
-      padding: 8px;
-      box-sizing: border-box;
-      overflow: hidden;
-        gap: 8px;
-        border: 1px solid #e0e0e0;
+        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.has-event:focus {
+        outline: none;
+    }
+    md-focus-ring {
+        border-radius: 6px;
+    }
     .calendar-day--other {
-      opacity: 0.4;
+        opacity: 0.4;
     }
     .calendar-day-number {
-      font-size: 1em;
-      line-height: 1.2;
+        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);
     }
     .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%;
+        font-size: 12px;
+        color: var(--md-sys-color-primary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        width: 100%;
     }
     .calendar-day.today {
-      border: 1px solid var(--md-sys-color-primary);
+        background: var(--md-sys-color-secondary-container);
+      
     }
     .calendar-day.has-event {
         cursor: pointer;
-      border: 2px solid var(--md-sys-color-primary);
-      position: relative;
+        position: relative;
+        border: 1px solid var(--md-sys-color-primary);
     }
-    .event-popup {
-      position: fixed;
-      z-index: 1000;
-      background: #fff;
-      color: #222;
-      border-radius: 10px;
-      box-shadow: 0 4px 24px rgba(0,0,0,0.18);
-      min-width: 220px;
-      max-width: 320px;
-      padding: 16px 20px 16px 20px;
-      top: 30%;
-      left: 50%;
+
+    .event-popup-list{
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-4);
     }
     
-  `;g([m({type:String})],v.prototype,"label",2);g([m({type:String})],v.prototype,"value",2);v=g([$("scb-calendar")],v);
+  `;x([k({type:String})],w.prototype,"lang",2);w=x([C("scb-calendar")],w);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.119",
+    "version":  "0.1.121",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -353,5 +353,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "A962B1714D5005AAEEADB1C4869AE006FB9046D6732AA334CB23DEF1F42080A6"
+    "buildHash":  "62D50E7AEB04DF26D21CAC5D5823CD9D286A1A8D4834CDF212EA8705A577DB49"
 }

package/scb-button/scb-button.d.ts

@@ -9,6 +9,7 @@ export declare class ScbButton extends LitElement {
     trailingIcon: boolean;
     icon: string;
     disabled: boolean;
+    fullWidth: boolean;
     href: string;
     target: string;
     rel: string;

package/scb-button/scb-button.js

@@ -1,20 +1,20 @@
-import { LitElement as k, css as T, html as p, nothing as r } from "lit";
-import { property as s, customElement as B } from "lit/decorators.js";
+import { LitElement as k, css as w, html as h, nothing as r } from "lit";
+import { property as a, customElement as B } from "lit/decorators.js";
 import "@material/web/button/filled-button.js";
 import "@material/web/button/outlined-button.js";
 import "@material/web/button/filled-tonal-button.js";
 import "@material/web/button/text-button.js";
 import "@material/web/icon/icon.js";
-var O = Object.defineProperty, w = Object.getOwnPropertyDescriptor, x = (t) => {
+var T = Object.defineProperty, O = Object.getOwnPropertyDescriptor, x = (t) => {
   throw TypeError(t);
-}, a = (t, e, i, l) => {
-  for (var n = l > 1 ? void 0 : l ? w(e, i) : e, b = t.length - 1, u; b >= 0; b--)
-    (u = t[b]) && (n = (l ? u(e, i, n) : u(n)) || n);
-  return l && n && O(e, i, n), n;
-}, L = (t, e, i) => e.has(t) || x("Cannot " + i), P = (t, e, i) => e.has(t) ? x("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), A = (t, e, i) => (L(t, e, "access private method"), i), m, g;
+}, n = (t, e, i, s) => {
+  for (var l = s > 1 ? void 0 : s ? O(e, i) : e, u = t.length - 1, b; u >= 0; u--)
+    (b = t[u]) && (l = (s ? b(e, i, l) : b(l)) || l);
+  return s && l && T(e, i, l), l;
+}, L = (t, e, i) => e.has(t) || x("Cannot " + i), P = (t, e, i) => e.has(t) ? x("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), A = (t, e, i) => (L(t, e, "access private method"), i), m, y;
 let o = class extends k {
   constructor() {
-    super(...arguments), P(this, m), this.variant = "filled", this.type = "button", this.label = "Button", this.trailingIcon = !1, this.icon = "", this.disabled = !1, this.href = "", this.target = "", this.rel = "", this.spacing = "", this.spacingTop = "", this.spacingBottom = "";
+    super(...arguments), P(this, m), this.variant = "filled", this.type = "button", this.label = "Button", this.trailingIcon = !1, this.icon = "", this.disabled = !1, this.fullWidth = !1, this.href = "", this.target = "", this.rel = "", this.spacing = "", this.spacingTop = "", this.spacingBottom = "";
   }
   // Hosta md-* elementet (värden flyttas därifrån in i dess shadow <button>)
   __getMdHost() {
@@ -32,21 +32,21 @@ let o = class extends k {
     var $;
     const t = this.__getMdHost(), e = this.__getInnerNativeButton(t);
     if (!t || !e) return;
-    const i = (this.getAttribute("aria-label") || "").trim(), l = (t.getAttribute("aria-label") || "").trim(), n = this.label.trim() === "" ? (this.icon || "").trim() : "", b = i || l || n;
-    b ? e.setAttribute("aria-label", b) : e.removeAttribute("aria-label");
-    const u = this.getAttribute("aria-controls");
-    u !== null ? e.setAttribute("aria-controls", u) : e.removeAttribute("aria-controls");
-    const y = this.getAttribute("aria-expanded");
-    y !== null ? e.setAttribute("aria-expanded", y) : e.removeAttribute("aria-expanded"), t.removeAttribute("aria-label"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"), this.removeAttribute("aria-expanded"), ($ = this.__ariaObserver) == null || $.disconnect(), this.__ariaObserver = new MutationObserver((S) => {
-      const c = this.__getMdHost(), h = this.__getInnerNativeButton(c);
-      if (!(!c || !h)) {
+    const i = (this.getAttribute("aria-label") || "").trim(), s = (t.getAttribute("aria-label") || "").trim(), l = this.label.trim() === "" ? (this.icon || "").trim() : "", u = i || s || l;
+    u ? e.setAttribute("aria-label", u) : e.removeAttribute("aria-label");
+    const b = this.getAttribute("aria-controls");
+    b !== null ? e.setAttribute("aria-controls", b) : e.removeAttribute("aria-controls");
+    const g = this.getAttribute("aria-expanded");
+    g !== null ? e.setAttribute("aria-expanded", g) : e.removeAttribute("aria-expanded"), t.removeAttribute("aria-label"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"), this.removeAttribute("aria-expanded"), ($ = this.__ariaObserver) == null || $.disconnect(), this.__ariaObserver = new MutationObserver((S) => {
+      const c = this.__getMdHost(), p = this.__getInnerNativeButton(c);
+      if (!(!c || !p)) {
         for (const f of S) {
           if (f.type !== "attributes" || !f.attributeName) continue;
           const d = f.attributeName, v = this.getAttribute(d);
           if (d === "aria-label") {
             const I = (c.getAttribute("aria-label") || "").trim(), _ = (v || I || (this.label.trim() === "" ? (this.icon || "").trim() : "")).trim();
-            _ ? h.setAttribute("aria-label", _) : h.removeAttribute("aria-label"), c.removeAttribute("aria-label");
-          } else (d === "aria-controls" || d === "aria-expanded") && (v === null ? h.removeAttribute(d) : h.setAttribute(d, v), d === "aria-expanded" && this.removeAttribute("aria-expanded"));
+            _ ? p.setAttribute("aria-label", _) : p.removeAttribute("aria-label"), c.removeAttribute("aria-label");
+          } else (d === "aria-controls" || d === "aria-expanded") && (v === null ? p.removeAttribute(d) : p.setAttribute(d, v), d === "aria-expanded" && this.removeAttribute("aria-expanded"));
         }
         c.removeAttribute("aria-label"), c.removeAttribute("aria-controls"), c.removeAttribute("aria-expanded");
       }
@@ -62,11 +62,11 @@ let o = class extends k {
         const t = this.closest("form");
         t && (this.type === "submit" && t.requestSubmit(), this.type === "reset" && t.reset());
       }
-    }), this.__syncAriaToInner(), A(this, m, g).call(this);
+    }), this.__syncAriaToInner(), A(this, m, y).call(this);
   }
   // Kör även när variant/icon/spacing ändras
   updated(t) {
-    t.has("variant") && this.__syncAriaToInner(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && A(this, m, g).call(this);
+    t.has("variant") && this.__syncAriaToInner(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && A(this, m, y).call(this);
   }
   disconnectedCallback() {
     var t;
@@ -79,7 +79,7 @@ let o = class extends k {
       return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
   }
   static get styles() {
-    return T`
+    return w`
       /* Gör hosten stretchbar i t.ex. flex/grid */
       :host {
         display: inline-flex;
@@ -88,6 +88,11 @@ let o = class extends k {
         margin-block-end: var(--scb-button-spacing-block-end, 0);
       }
 
+      :host([full-width]) {
+        display: flex;
+        inline-size: 100%;
+      }
+
       /* Låt inre md-knappar fylla hostens höjd */
       md-filled-button,
       md-outlined-button,
@@ -96,6 +101,14 @@ let o = class extends k {
         block-size: 100%;
       }
 
+      :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'],
@@ -143,17 +156,17 @@ let o = class extends k {
     `;
   }
   render() {
-    var n;
-    const t = !!((n = this.icon) != null && n.trim()), e = t ? p`<md-icon slot="icon">${this.icon}</md-icon>` : r, i = r, l = this.label.trim() === "" ? this.icon : void 0;
+    var l;
+    const t = !!((l = this.icon) != null && l.trim()), e = t ? h`<md-icon slot="icon">${this.icon}</md-icon>` : r, i = r, s = this.label.trim() === "" ? this.icon : void 0;
     switch (this.variant) {
       case "filled":
-        return p`
+        return h`
           <md-filled-button
             type=${this.type}
             variant=${i}
             ?trailing-icon=${this.trailingIcon}
             ?disabled=${this.disabled}
-            aria-label=${l}
+            aria-label=${s}
             href=${this.href || r}
             target=${this.target || r}
             rel=${this.rel || r}
@@ -164,13 +177,13 @@ let o = class extends k {
           </md-filled-button>
         `;
       case "outlined":
-        return p`
+        return h`
           <md-outlined-button
             type=${this.type}
             variant=${i}
             ?trailing-icon=${this.trailingIcon}
             ?disabled=${this.disabled}
-            aria-label=${l}
+            aria-label=${s}
             href=${this.href || r}
             target=${this.target || r}
             rel=${this.rel || r}
@@ -181,13 +194,13 @@ let o = class extends k {
           </md-outlined-button>
         `;
       case "filled-tonal":
-        return p`
+        return h`
           <md-filled-tonal-button
             type=${this.type}
             variant=${i}
             ?trailing-icon=${this.trailingIcon}
             ?disabled=${this.disabled}
-            aria-label=${l}
+            aria-label=${s}
             href=${this.href || r}
             target=${this.target || r}
             rel=${this.rel || r}
@@ -198,13 +211,13 @@ let o = class extends k {
           </md-filled-tonal-button>
         `;
       case "text":
-        return p`
+        return h`
           <md-text-button
             type=${this.type}
             variant=${i}
             ?trailing-icon=${this.trailingIcon}
             ?disabled=${this.disabled}
-            aria-label=${l}
+            aria-label=${s}
             href=${this.href || r}
             target=${this.target || r}
             rel=${this.rel || r}
@@ -215,52 +228,55 @@ let o = class extends k {
           </md-text-button>
         `;
       default:
-        return p``;
+        return h``;
     }
   }
 };
 m = /* @__PURE__ */ new WeakSet();
-g = function() {
+y = function() {
   const t = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop) ?? t, i = this.mapSpacingToken(this.spacingBottom) ?? t;
   e ? this.style.setProperty("--scb-button-spacing-block-start", e) : this.style.removeProperty("--scb-button-spacing-block-start"), i ? this.style.setProperty("--scb-button-spacing-block-end", i) : this.style.removeProperty("--scb-button-spacing-block-end");
 };
-a([
-  s({ type: String, reflect: !0 })
+n([
+  a({ type: String, reflect: !0 })
 ], o.prototype, "variant", 2);
-a([
-  s({ type: String, reflect: !0 })
+n([
+  a({ type: String, reflect: !0 })
 ], o.prototype, "type", 2);
-a([
-  s({ type: String })
+n([
+  a({ type: String })
 ], o.prototype, "label", 2);
-a([
-  s({ type: Boolean, attribute: "trailing-icon" })
+n([
+  a({ type: Boolean, attribute: "trailing-icon" })
 ], o.prototype, "trailingIcon", 2);
-a([
-  s({ type: String })
+n([
+  a({ type: String })
 ], o.prototype, "icon", 2);
-a([
-  s({ type: Boolean, reflect: !0 })
+n([
+  a({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
-a([
-  s({ type: String })
+n([
+  a({ type: Boolean, attribute: "full-width", reflect: !0 })
+], o.prototype, "fullWidth", 2);
+n([
+  a({ type: String })
 ], o.prototype, "href", 2);
-a([
-  s({ type: String })
+n([
+  a({ type: String })
 ], o.prototype, "target", 2);
-a([
-  s({ type: String })
+n([
+  a({ type: String })
 ], o.prototype, "rel", 2);
-a([
-  s({ type: String, reflect: !0 })
+n([
+  a({ type: String, reflect: !0 })
 ], o.prototype, "spacing", 2);
-a([
-  s({ type: String, attribute: "spacing-top", reflect: !0 })
+n([
+  a({ type: String, attribute: "spacing-top", reflect: !0 })
 ], o.prototype, "spacingTop", 2);
-a([
-  s({ type: String, attribute: "spacing-bottom", reflect: !0 })
+n([
+  a({ type: String, attribute: "spacing-bottom", reflect: !0 })
 ], o.prototype, "spacingBottom", 2);
-o = a([
+o = n([
   B("scb-button")
 ], o);
 export {

package/scb-calendar/scb-calendar-event.d.ts

@@ -1,8 +1,10 @@
 import { LitElement } from 'lit';
 export declare class ScbCalendarEvent extends LitElement {
     title: string;
-    date: string;
     description: string;
+    startDate: string;
+    endDate: string;
     static styles: import('lit').CSSResult;
+    updated(changedProps: Map<string, any>): void;
     render(): import('lit-html').TemplateResult<1>;
 }