scb-wc 0.1.7 → 0.1.9

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

@@ -1 +1,80 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-badge/scb-badge.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,d,o){try{customElements.get(e)||r(e,d,o)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+import{_ as b,b as h,g,h as o,y as u}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as s}from"../../vendor/decorate.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(i,r,a){try{customElements.get(i)||t(i,r,a)}catch(d){var n=String(d||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var c,e=(c=class extends b{constructor(...t){super(...t),this._slotClickHandler=i=>{const r=this.shadowRoot?.querySelector("slot"),a=i.target;a&&a!==r&&a.dispatchEvent(new CustomEvent("hide-badge",{bubbles:!0,composed:!0}))},this.autoHide=!1,this.sizing="fit-content",this.position="relative",this.positionTop=0,this.positionRight=void 0,this.positionSide="right",this.positionLeft=void 0,this.value="",this.label="",this.hidden=!1,this.variant="dot",this._badgeVisible=!0,this._onHideBadge=()=>{this._badgeVisible=!1,this.requestUpdate()}}firstUpdated(){const t=this.shadowRoot?.querySelector("slot");this.autoHide&&t&&t.addEventListener("click",this._slotClickHandler)}updated(){const t=this.shadowRoot?.querySelector("slot");t&&(this.autoHide?t.addEventListener("click",this._slotClickHandler):t.removeEventListener("click",this._slotClickHandler))}connectedCallback(){super.connectedCallback(),this.addEventListener("hide-badge",this._onHideBadge)}disconnectedCallback(){this.removeEventListener("hide-badge",this._onHideBadge),super.disconnectedCallback()}mapSpacingToken(t){if(t==null)return;if(typeof t=="number"&&!Number.isNaN(t))return`${t}px`;const i=String(t).trim();if(i)return/^\d+$/.test(i)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(i,10)))})`:i}render(){const t=this.mapSpacingToken(this.positionRight)??"var(--spacing-4)",i=this.mapSpacingToken(this.positionLeft)??"var(--spacing-4)",r=this.mapSpacingToken(this.positionTop)??"0px";this.style.setProperty("--scb-badge-absolute-top",r),this.style.setProperty("--scb-badge-absolute-right",t),this.style.setProperty("--scb-badge-absolute-left",i);let a=this.value;!isNaN(Number(this.value))&&this.value.length>4&&(a=this.value.slice(0,4)+"+");const n=this.variant==="value"&&!this.value?"badge-value-empty":"",d=this._badgeVisible?"":"badge--hide",p=this.label||(this.variant==="dot"?"Indikator":`Märke: ${a}`);return u`
+      <div class="badge-content">
+        <slot></slot>
+        <div 
+          class="badge ${n} ${d}"
+          role="status"
+          aria-label="${this.variant==="dot",p}"
+          aria-hidden="${this.variant==="dot"&&!this.label?"true":"false"}">${this.variant==="dot"?"":a}</div>
+      </div>
+    `}},c.styles=h`
+    :host {
+      display: block;
+      position: relative;
+      overflow: visible;
+      width: fit-content;
+      --scb-badge-font-size: var(--scale-01);
+      --scb-badge-line-height: 100%;
+      --scb-badge-relative-gap: 0px;
+      --scb-badge-background-color: var(--md-sys-color-error);
+      --scb-badge-color: var(--md-sys-color-on-error);
+      --scb-badge-width: 8px;
+      --scb-badge-height: 8px;
+    }
+    :host([sizing="fit-parent"]) {
+      width: 100%;
+    }
+    :host([variant="value"]) .badge {
+      width: fit-content;
+      padding: 6px;
+    }
+    :host([variant="value"]) .badge.badge-value-empty{
+      width: var(--scb-badge-width);
+      padding: var(--spacing-2);
+    }
+    :host([hidden]) .badge {
+      display: none;
+    }
+    .badge {
+      transition: transform 0.25s cubic-bezier(.4,2,.6,1), opacity 0.18s linear;
+      will-change: transform, opacity;
+    }
+    .badge--hide {
+      opacity: 0;
+      transform: scale(1.3);
+      pointer-events: none;
+    }
+    .badge{
+      background-color: var(--scb-badge-background-color);
+      color: var(--scb-badge-color);
+      font-size: var(--scb-badge-font-size);
+      font-weight: var(--weight-semibold);
+      line-height: var(--scb-badge-line-height);
+      letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+      border-radius: var(--md-sys-shape-corner-full);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--scb-badge-width);
+      height: var(--scb-badge-height);
+      position: absolute;
+      top: var(--scb-badge-absolute-top);
+      left: calc(100% - var(--scb-badge-absolute-right));
+      white-space: nowrap;
+    }
+    :host([position-side="left"]) .badge {
+      left: var(--scb-badge-absolute-left);
+    }
+
+    :host([position="relative"]) .badge {
+      position: relative;
+      top: unset;
+      left: unset;
+    }
+    :host([position="relative"]) .badge-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--scb-badge-relative-gap);
+    }
+  `,c);s([o({type:Boolean,reflect:!0,attribute:"auto-hide"})],e.prototype,"autoHide",void 0);s([o({type:String,reflect:!0})],e.prototype,"sizing",void 0);s([o({type:String,reflect:!0})],e.prototype,"position",void 0);s([o({type:String,attribute:"position-top"})],e.prototype,"positionTop",void 0);s([o({type:String,attribute:"position-right"})],e.prototype,"positionRight",void 0);s([o({type:String,reflect:!0,attribute:"position-side"})],e.prototype,"positionSide",void 0);s([o({type:String,attribute:"position-left"})],e.prototype,"positionLeft",void 0);s([o({type:String,reflect:!0})],e.prototype,"value",void 0);s([o({type:String,reflect:!0})],e.prototype,"label",void 0);s([o({type:Boolean,reflect:!0})],e.prototype,"hidden",void 0);s([o({type:String,reflect:!0})],e.prototype,"variant",void 0);e=s([g("scb-badge")],e);

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

@@ -1 +1,14 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-breadcrumb/scb-breadcrumb-item.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(e,d,o){try{customElements.get(e)||i(e,d,o)}catch(r){var n=String(r||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();
+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

@@ -1 +1,96 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-breadcrumb/scb-breadcrumb-item.js";import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-breadcrumb/scb-breadcrumb.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var n=customElements.define.bind(customElements);customElements.define=function(e,o,d){try{customElements.get(e)||n(e,o,d)}catch(i){var r=String(i||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+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

@@ -1 +1,268 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-button/scb-button.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(e,r,c){try{customElements.get(e)||o(e,r,c)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+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

@@ -1 +1,6 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-calendar/scb-calendar-event.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,d,o){try{customElements.get(e)||r(e,d,o)}catch(i){var n=String(i||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();
+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);