scb-wc-test 0.1.1

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

@@ -0,0 +1,256 @@
+import{b as p,n as e,i as h,x as i,t as v}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.js";var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(a,r,l,d)=>{for(var c=d>1?void 0:d?b(r,l):r,n=a.length-1,o;n>=0;n--)(o=a[n])&&(c=(d?o(r,l,c):o(c))||c);return d&&c&&m(r,l,c),c};let t=class extends h{constructor(){super(...arguments),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.cardHref="",this.label="",this.subLabel="",this.supportingText="",this.date=new Date,this.commentsText="",this.comments=0,this.likesText="",this.likes=0}render(){const a=this.variant?`${this.variant.toLowerCase()}`:"",r=this.direction?`${this.direction.toLowerCase()}`:"",l=this.cardHref?"clickable":"",d=this.mediaType?`${this.mediaType.toLowerCase()}`:"";switch(this.type){case"standard":return i`
+                <div class="scb-card ${a} ${r} ${l}">
+                    ${this.cardHref?i`<md-ripple></md-ripple>`:""}
+                    ${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
+                    <div class="full-content">
+                        <div class="top-content">
+                           ${this.label?i`
+                            <div class="header">
+                                ${this.cardHref?i`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
+                            </div>`:""}
+                            ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+                            ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+                            ${this.date?i`<div class="date">${this.date}</div>`:""}
+                        </div>
+                    </div>
+                </div>
+            `;case"list":return i`
+                <div class="scb-card ${a} vertical ${l}">
+                    ${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
+                    <div class="full-content">
+                        <div class="top-content">
+                           ${this.label?i`                            
+                            <div class="header">
+                                ${this.label}
+                            </div>`:""}
+                            ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+                            ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+                            ${this.date?i`<div class="date">${this.date}</div>`:""}
+                        </div>
+                        <div class="content list">
+                            <slot></slot>
+                        </div>
+                    </div>
+                </div>
+        `;case"social":return i`
+                <div class="scb-card ${a} ${r} ${l}">
+                    ${this.cardHref?i`<md-ripple></md-ripple>`:""}
+                    ${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
+                    <div class="full-content">
+                        <div class="top-content">
+                           ${this.label?i`
+                            <div class="header">
+                                ${this.cardHref?i`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
+                            </div>`:""}
+                            ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+                            ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+                            ${this.date?i`<div class="date">${this.date}</div>`:""}
+                        </div>
+                        <div class="content">
+                            <div class="social-metrics">
+                                <span class="comments"><md-icon>mode_comment</md-icon> <span>${this.commentsText}: ${this.comments}</span></span>
+                                <span class="likes"><md-icon>thumb_up</md-icon> <span>${this.likesText}: ${this.likes}</span></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+        `;case"link":return i`
+                <div class="scb-card ${a} ${r} ${l}">
+                    ${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
+                    <div class="full-content">
+                        <div class="top-content">
+                            ${this.label?i`
+                            <div class="header">
+                                ${this.label}
+                            </div>`:""}
+                            ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+                            ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+                            ${this.date?i`<div class="date">${this.date}</div>`:""}
+                        </div>
+                        <div class="content links">
+                            <slot></slot>
+                        </div>
+                    </div>
+                </div>
+        `;case"action":return i`
+                <div class="scb-card ${a} ${r} ${l}">
+                    ${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
+                    <div class="full-content">
+                        <div class="top-content">
+                            ${this.label?i`
+                            <div class="header">
+                                ${this.label}
+                            </div>`:""}
+                            ${this.subLabel?i`
+                            <div class="sub-label">${this.subLabel}</div>`:""}
+                            ${this.supportingText?i`
+                            <div class="supporting-text">${this.supportingText}</div>`:""}
+                            ${this.date?i`
+                            <div class="date">${this.date}</div>`:""}
+                        </div>
+                        <div class="content actions">
+                            <slot></slot>
+                        </div>
+                    </div>
+                </div>
+        `;default:return i`
+            <div class="scb-card ${a} ${r} ${l}">
+                ${this.cardHref?i`<md-ripple></md-ripple>`:""}
+                ${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
+                <div class="full-content">
+                    <div class="top-content">
+                        ${this.label?i`
+                        <div class="header">
+                            ${this.cardHref?i`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
+                        </div>`:""}
+                        ${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
+                        ${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
+                        ${this.date?i`<div class="date">${this.date}</div>`:""}
+                    </div>
+                </div>
+            </div>
+        `}}firstUpdated(){if(this.cardHref){const a=this.renderRoot.querySelector(".scb-card");a&&a.addEventListener("click",r=>{r.target.closest("a")||(window.location.href=this.cardHref)})}}};t.styles=p`
+    /* Min-bredder per variant (override-ningsbara via CSS custom props) */
+    :host{ --scb-card-min-w:  360px; }
+
+    :host {
+        max-width: var(--scb-card-min-w);
+        width: 100%;
+        display: block;
+    }
+    /* Grundläggande stilar för kortet */
+    .scb-card { 
+        color: var(--md-sys-color-on-surface);
+        display: flex;
+        max-width: var(--scb-card-min-w);
+        position: relative;
+        background: transparent;
+        border-radius: var(--md-sys-shape-corner-large);
+        background: var(--md-sys-color-surface);
+    }
+        .social-metrics md-icon {
+            width: var(--scale-05);
+            height: var(--scale-05);
+            font-size: var(--md-sys-typescale-title-large-size);
+            vertical-align: middle;
+        }
+        .social-metrics {
+            display: flex;
+            margin-top: var(--spacing-4);
+            gap: var(--spacing-5);
+            flex-wrap: wrap;
+        }
+        .comments, .likes {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-2);
+        }
+    .scb-card.outlined {
+        border: 1px solid var(--md-sys-color-outline-variant);
+    }
+    .scb-card.filled {
+      background: var(--md-sys-color-surface-dim);
+    }
+    .scb-card.vertical {
+        flex-direction: column;
+    }
+    .scb-card.clickable {
+        cursor: pointer;
+    }
+
+    /* Textstilar */
+    .header {
+        font-size: var(--md-sys-typescale-headline-small-size);
+        font-weight: var(--weight-bold);
+        line-height: var(--md-sys-typescale-headline-small-line-height);
+        letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .header a {
+        color: inherit;
+        text-decoration: none;
+    }
+    .sub-label {
+        font-size: var(--md-sys-typescale-title-medium-size);
+        font-weight: var(--weight-semibold);
+        line-height: var(--md-sys-typescale-title-medium-line-height);
+        letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+    }
+    .supporting-text {
+        font-size: var(--md-sys-typescale-body-large-size);
+        line-height: var(--md-sys-typescale-body-large-line-height);
+        letter-spacing: var(--md-sys-typescale-body-large-tracking);
+    }
+    .date {
+        font-size: var(--md-sys-typescale-body-medium-size);
+        line-height: var(--md-sys-typescale-body-medium-line-height);
+        letter-spacing: var(--md-sys-typescale-body-medium-Tracking);
+    }
+    .full-content {
+        padding: var(--spacing-7) var(--spacing-6);
+    }
+    md-ripple {
+        border-radius: var(--md-sys-shape-corner-large);
+    }
+    .top-content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-3);
+  
+    }
+    .scb-card img {
+        border-radius: var(--md-sys-shape-corner-large);
+        width: 100%;
+        object-fit: contain;
+    }
+    .scb-card img.avatar{
+        border-radius: var(--md-sys-shape-corner-full);
+        width: var(--icon-size-large);
+        height: var(--icon-size-large);
+        margin: var(--spacing-7) 0 0 var(--spacing-6);
+    }
+    .scb-card img.avatar + .full-content {
+        padding: var(--spacing-5) var(--spacing-6) var(--spacing-7) var(--spacing-6);
+    }
+
+    /* Horisontella kortspecifika stilar */
+    .scb-card.horizontal {
+        flex-direction: row;
+        width: 100%;
+        max-width: 576px;
+    }
+    .scb-card.horizontal .full-content {
+        padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) 0;
+        width: 100%;
+    }
+    .scb-card.horizontal img{
+        width: auto;
+        height: 133px;
+        margin: var(--spacing-6);
+    }
+    .scb-card.horizontal img.avatar {
+        border-radius: var(--md-sys-shape-corner-full);
+        width: var(--icon-size-large);
+        height: var(--icon-size-large);
+        margin: var(--spacing-6) 0 var(--spacing-6) var(--spacing-6);
+    }
+
+    .scb-card .content.list{
+        margin-top: var(--spacing-7);
+    }
+    .scb-card .content.actions ::slotted(*) {
+        margin-top: var(--spacing-7);
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-3);
+    }
+    .scb-card .content.links ::slotted(*) {
+        margin-top: var(--spacing-3);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-3);
+    }
+
+  `;s([e({type:String})],t.prototype,"type",2);s([e({type:String})],t.prototype,"variant",2);s([e({type:String})],t.prototype,"direction",2);s([e({type:String,attribute:"media-type"})],t.prototype,"mediaType",2);s([e({type:String,attribute:"media-href"})],t.prototype,"mediaHref",2);s([e({type:String,attribute:"card-href"})],t.prototype,"cardHref",2);s([e({type:String})],t.prototype,"label",2);s([e({type:String,attribute:"sub-label"})],t.prototype,"subLabel",2);s([e({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);s([e({type:Date})],t.prototype,"date",2);s([e({type:String,attribute:"social-comments-text"})],t.prototype,"commentsText",2);s([e({type:Number,attribute:"social-comments",reflect:!0})],t.prototype,"comments",2);s([e({type:String,attribute:"social-likes-text"})],t.prototype,"likesText",2);s([e({type:Number,attribute:"social-likes",reflect:!0})],t.prototype,"likes",2);t=s([v("scb-card")],t);

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

@@ -0,0 +1,33 @@
+import{b as d,n as h,i as b,x as u,t as v}from"../../vendor/vendor.js";var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,g=e=>{throw TypeError(e)},n=(e,r,t,i)=>{for(var s=i>1?void 0:i?x(r,t):r,c=e.length-1,l;c>=0;c--)(l=e[c])&&(s=(i?l(r,t,s):l(s))||s);return i&&s&&f(r,t,s),s},y=(e,r,t)=>r.has(e)||g("Cannot "+t),p=(e,r,t)=>(y(e,r,"read from private field"),t?t.call(e):r.get(e)),_=(e,r,t)=>r.has(e)?g("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(e):r.set(e,t),o;let a=class extends b{constructor(){super(...arguments),this.orientation="vertical",this.disabled=!1,this.spacing="group",_(this,o,()=>{const e=this.shadowRoot?.querySelector("slot");if(!e)return;const r=e.assignedElements({flatten:!0}).filter(t=>t.tagName.toLowerCase()==="scb-checkbox");for(const t of r)this.disabled?t.setAttribute("disabled",""):t.removeAttribute("disabled"),this.orientation==="horizontal"?t.setAttribute("orientation","horizontal"):t.removeAttribute("orientation"),this.spacing==="group"?t.style.setProperty("--scb-checkbox-gap","0"):t.style.removeProperty("--scb-checkbox-gap")})}render(){const e=this.orientation==="horizontal"?"row":"column";return u`
+      <div class="g" role="group" aria-disabled=${String(this.disabled)} style=${`--_dir:${e}`}>
+        <slot @slotchange=${p(this,o)}></slot>
+      </div>
+    `}firstUpdated(){p(this,o).call(this)}updated(e){(e.has("disabled")||e.has("orientation")||e.has("spacing"))&&p(this,o).call(this)}};o=new WeakMap;a.styles=d`
+    /* Standardgap när group äger spacing. Kan överskridas via --scb-checkbox-gap. */
+    :host {
+      display: block;
+      --scb-checkbox-gap: 12px;
+    }
+
+    .g {
+      display: flex;
+      flex-direction: var(--_dir, column);
+      align-items: flex-start;
+      gap: 0; /* om spacing="item" */
+    }
+
+    /* spacing="group" → använder gap-variabeln */
+    :host([spacing="group"]) .g {
+      gap: var(--scb-checkbox-gap);
+    }
+
+  /* Öka gap när gruppen är horisontell */
+  :host([orientation="horizontal"]) {
+    --scb-checkbox-gap: 32px; 
+  }
+
+    /* När gruppen äger spacing: nolla barnens egen högermarginal (horisontellt läge). */
+    :host([spacing="group"]) ::slotted(scb-checkbox) {
+      --scb-checkbox-gap: 0;
+    }
+  `;n([h({type:String,reflect:!0})],a.prototype,"orientation",2);n([h({type:Boolean,reflect:!0})],a.prototype,"disabled",2);n([h({type:String,reflect:!0})],a.prototype,"spacing",2);a=n([v("scb-checkbox-group")],a);

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

@@ -0,0 +1,99 @@
+import{b as d,n as i,i as h,x as p,t as b}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";var u=Object.defineProperty,x=Object.getOwnPropertyDescriptor,o=(e,r,c,a)=>{for(var s=a>1?void 0:a?x(r,c):r,l=e.length-1,n;l>=0;l--)(n=e[l])&&(s=(a?n(r,c,s):n(s))||s);return a&&s&&u(r,c,s),s};let t=class extends h{constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.checked=!1,this.label="",this.supportingText="",this._checkboxId=""}connectedCallback(){super.connectedCallback(),this._checkboxId=this.id||`scb-checkbox-${Math.random().toString(36).substr(2,9)}`}firstUpdated(){const e=this.shadowRoot?.querySelector("md-checkbox");e&&e.addEventListener("change",()=>{const r=e.checked;this.checked=r,this.dispatchEvent(new CustomEvent("change",{detail:{checked:r},bubbles:!0,composed:!0}))})}updated(e){super.updated(e),e.has("disabled")&&this.toggleAttribute("aria-disabled",this.disabled)}render(){const e=this.supportingText?`${this._checkboxId}-supporting-text`:void 0;return p`
+      <label class="wrap">
+        <div class="box-wrap">
+          <md-checkbox
+            id="${this._checkboxId}"
+            touch-target="wrapper"
+            ?disabled=${this.disabled}
+            ?indeterminate=${this.indeterminate}
+            ?checked=${this.checked}
+            aria-describedby=${e}
+          ></md-checkbox>
+        </div>
+        ${this.label?p`<span class="lbl">${this.label}</span>`:""}
+      </label>
+
+      ${this.supportingText?p`<div id="${this._checkboxId}-supporting-text" class="supporting-text">
+            ${this.supportingText}
+          </div>`:""}
+
+      <slot></slot>
+    `}};t.styles=d`
+    /* Grundläggande layout med inline-grid */
+    :host {
+      display: inline-grid;
+      grid-template-columns: auto;
+      grid-template-rows: auto auto;
+      row-gap: 4px;
+      font-family: var(--brand-font, 'Inter', sans-serif);
+    }
+
+    /* Mer luft till höger i horisontella layouter (sätts av checkbox-gruppen) */
+    :host([orientation="horizontal"]) {
+      margin-inline-end: var(--scb-checkbox-gap, 24px);
+    }
+
+    /* Wrapper för md-checkbox + label
+       48px kontrollblock + 12px textgap (matchar radio) */
+    .wrap {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      cursor: pointer;
+      overflow: visible; /* låt ripple synas */
+    }
+    :host([disabled]) .wrap {
+      cursor: default;
+    }
+
+    /* Hit-target runt själva md-checkboxen (48px) */
+    .box-wrap {
+      height: var(--scb-checkbox-target, 48px);
+      width: var(--scb-checkbox-target, 48px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: visible;
+    }
+
+    /* Nollställ md-checkbox marginal */
+    md-checkbox {
+      margin: 0;
+    }
+
+    /* Visa focusring ENDAST vid tangentbordsfokus.
+       Vid musklick (focus men inte focus-visible) görs den transparent. */
+    md-checkbox:focus:not(:focus-visible) {
+      --md-focus-ring-color: transparent;
+      --md-focus-ring-width: 0;
+      outline: none;
+      box-shadow: none;
+    }
+
+    /* Label-styling */
+    .lbl {
+      color: var(--md-sys-color-on-surface);
+      line-height: 1.2;
+      margin-top: 2px; 
+    }
+    :host([disabled]) .lbl {
+      color: var(--n-60);
+    }
+
+    /* Supporting text styling */
+    .supporting-text {
+      color: var(--md-sys-color-on-surface-variant);
+      line-height: 1.2;
+      /* 12px (gap) + 48px (box-wrap) -> linjerar med label */
+      margin-left: calc(12px + var(--scb-checkbox-target, 48px));
+    }
+    :host([disabled]) .supporting-text {
+      color: var(--n-60);
+    }
+
+    /* Anpassning för mörkt läge */
+    @media (prefers-color-scheme: dark) {
+      .lbl { color: var(--md-sys-color-on-surface); }
+      .supporting-text { color: var(--md-sys-color-on-surface-variant); }
+    }
+  `;o([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2);o([i({type:Boolean,reflect:!0})],t.prototype,"indeterminate",2);o([i({type:Boolean,reflect:!0})],t.prototype,"checked",2);o([i({type:String})],t.prototype,"label",2);o([i({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);t=o([b("scb-checkbox")],t);export{t as ScbCheckbox};

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

@@ -0,0 +1,46 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
+import{_ as d}from"../../vendor/preload-helper.js";import{b as p,n as a,i as _,x as r,t as u}from"../../vendor/vendor.js";var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,s=(e,o,c,l)=>{for(var i=l>1?void 0:l?v(o,c):o,h=e.length-1,n;h>=0;h--)(n=e[h])&&(i=(l?n(o,c,i):n(i))||i);return l&&i&&m(o,c,i),i};let t=class extends _{constructor(){super(...arguments),this.variant="assist",this.label="",this.icon="",this.disabled=!1,this.elevated=!1,this.removable=!1,this.selected=!1,this.__loadedVariants=new Set,this.__chipSetLoaded=!1,this.__iconLoaded=!1}updated(e){super.updated(e),e.has("disabled")&&this.toggleAttribute("aria-disabled",this.disabled),(e.has("variant")||e.has("icon"))&&this.__ensureDepsLoaded()}firstUpdated(){this.__ensureDepsLoaded()}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"assist":await d(()=>import("../../vendor/vendor-material.js").then(e=>e.k),__vite__mapDeps([0,1]),import.meta.url);break;case"filter":await d(()=>import("../../vendor/vendor-material.js").then(e=>e.m),__vite__mapDeps([0,1]),import.meta.url);break}this.__loadedVariants.add(this.variant)}!this._insideChipSet&&!this.__chipSetLoaded&&(await d(()=>import("../../vendor/vendor-material.js").then(e=>e.n),__vite__mapDeps([0,1]),import.meta.url),this.__chipSetLoaded=!0),this.icon&&!this.__iconLoaded&&(await d(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),this.__iconLoaded=!0)}get _insideChipSet(){return!!this.closest("md-chip-set")}render(){const e=this._renderChip();return this._insideChipSet?e:r`<md-chip-set>${e}</md-chip-set>`}_renderChip(){const e=this.icon?r`<md-icon slot="icon">${this.icon}</md-icon>`:null;switch(this.variant){case"assist":return r`
+          <md-assist-chip
+            label=${this.label}
+            ?disabled=${this.disabled}
+            ?elevated=${this.elevated}
+            @update-focus=${this._forward}
+          >
+            ${e}
+          </md-assist-chip>
+        `;case"filter":return r`
+          <md-filter-chip
+            label=${this.label}
+            ?disabled=${this.disabled}
+            ?removable=${this.removable}
+            ?selected=${this.selected}
+            aria-pressed="${this.selected}"
+            @remove=${this._onRemove}
+            @update-focus=${this._forward}
+            @click=${()=>this._toggleSelected()}
+          >
+            ${e}
+          </md-filter-chip>
+        `;default:return r``}}_toggleSelected(){this.selected=!this.selected,this.dispatchEvent(new CustomEvent("selected-changed",{detail:{selected:this.selected},bubbles:!0,composed:!0}))}_onRemove(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("remove",{detail:{label:this.label},bubbles:!0,composed:!0}))}_forward(e){this.dispatchEvent(new CustomEvent(e.type,{detail:e.detail,bubbles:!0,composed:!0}))}};t.styles=p`
+    :host {
+      display: inline-block;
+    }
+
+    /* Sätt samma färg på label för assist som är på filter */
+    :host md-assist-chip {
+      --_label-text-color: var(--md-sys-color-on-surface-variant);
+      --_hover-label-text-color: var(--md-sys-color-on-surface-variant);
+      --_focus-label-text-color: var(--md-sys-color-on-surface-variant);
+      --_pressed-label-text-color: var(--md-sys-color-on-surface-variant);
+    }
+
+    md-icon {
+      color: var(--p-20);
+      font-size: var(--scb-icon-size-large);
+    }
+    @media (prefers-color-scheme: dark) {
+      md-icon {
+        color: var(--md-sys-color-on-surface);
+      }
+    }
+  `;s([a({type:String,reflect:!0})],t.prototype,"variant",2);s([a({type:String})],t.prototype,"label",2);s([a({type:String})],t.prototype,"icon",2);s([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2);s([a({type:Boolean,reflect:!0})],t.prototype,"elevated",2);s([a({type:Boolean,reflect:!0})],t.prototype,"removable",2);s([a({type:Boolean,reflect:!0})],t.prototype,"selected",2);t=s([u("scb-chip")],t);export{t as ScbChip};

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

@@ -0,0 +1,158 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../scb-textfield/scb-textfield.js","../../vendor/preload-helper.js","../../vendor/vendor.js","../scb-checkbox/scb-checkbox.js","../../vendor/vendor-material.js","../scb-radio-button/scb-radio-button.js","../scb-switch/scb-switch.js","../scb-chips/scb-chip.js","../scb-button/scb-button.js","../scb-icon-button/scb-icon-button.js"])))=>i.map(i=>d[i]);
+import{_ as l}from"../../vendor/preload-helper.js";import{b as h,n as s,i as m,E as p,x as r,t as _}from"../../vendor/vendor.js";var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,o=(t,e,n,c)=>{for(var a=c>1?void 0:c?f(e,n):e,d=t.length-1,u;d>=0;d--)(u=t[d])&&(a=(c?u(e,n,a):u(a))||a);return c&&a&&b(e,n,a),a};let i=class extends m{constructor(){super(...arguments),this.open=!1,this.inSb=!1,this.scrimClose=!0,this.variant="basic",this.label="",this.icon="",this.supportingText="",this.okButton="OK",this.cancelButton="Avbryt",this.deleteButton="Delete",this.confirmButton="Ta bort",this.denyButton="Avbryt",this.resetButton="Återställ",this.submitButton="Spara",this.formId="",this.formAction="",this.formMethod="",this.__lastTriggerEl=null,this.__slotDeps={"SCB-TEXTFIELD":()=>l(()=>import("../scb-textfield/scb-textfield.js"),__vite__mapDeps([0,1,2]),import.meta.url),"SCB-CHECKBOX":()=>l(()=>import("../scb-checkbox/scb-checkbox.js"),__vite__mapDeps([3,2,4]),import.meta.url),"SCB-RADIO-BUTTON":()=>l(()=>import("../scb-radio-button/scb-radio-button.js"),__vite__mapDeps([5,2,4]),import.meta.url),"SCB-SWITCH":()=>l(()=>import("../scb-switch/scb-switch.js"),__vite__mapDeps([6,1,2]),import.meta.url),"SCB-CHIP":()=>l(()=>import("../scb-chips/scb-chip.js"),__vite__mapDeps([7,1,2]),import.meta.url)},this.__onDocumentClick=t=>{this.__getActionFromEvent(t)==="toggle"&&(this.__setOpen(!this.open),t.stopPropagation())},this.__onDocumentKeydown=t=>{this.open&&t.key==="Escape"&&(this.__fire("esc"),this.__setOpen(!1))},this.__onScrimClick=()=>{this.scrimClose&&(this.__fire("scrim"),this.__setOpen(!1))},this.__onOk=()=>{this.__fire("ok"),this.__setOpen(!1)},this.__onCancel=()=>{this.__fire("cancel"),this.__setOpen(!1)},this.__onConfirm=()=>{this.__fire("confirm"),this.__setOpen(!1)},this.__onDeny=()=>{this.__fire("deny"),this.__setOpen(!1)},this.__onReset=()=>{this.shadowRoot?.querySelector("form")?.reset(),(this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[]).forEach(e=>{const n=e.tagName;n==="SCB-TEXTFIELD"&&(e.value=""),n==="SCB-CHECKBOX"&&(e.checked=!1),n==="SCB-RADIO-BUTTON"&&(e.checked=!1),n==="SCB-SWITCH"&&(e.selected=!1),n==="SCB-CHIP"&&(e.selected=!1)}),this.__fire("reset")},this.__onSubmit=()=>{this.shadowRoot?.querySelector("form")?.requestSubmit(),this.__fire("submit"),this.__setOpen(!1)},this.__onKeydownTrap=t=>{if(!this.open||t.key!=="Tab")return;const e=Array.from(this.shadowRoot.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')).filter(a=>!a.hasAttribute("disabled"));if(!e.length)return;const n=e[0],c=e[e.length-1];t.shiftKey&&document.activeElement===n?(c.focus(),t.preventDefault()):!t.shiftKey&&document.activeElement===c&&(n.focus(),t.preventDefault())}}async firstUpdated(){await l(()=>import("../scb-button/scb-button.js"),__vite__mapDeps([8,1,2]),import.meta.url),await l(()=>import("../scb-icon-button/scb-icon-button.js"),__vite__mapDeps([9,1,2]),import.meta.url),this.icon&&await l(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([4,2]),import.meta.url),await this.__ensureSlottedDeps()}async __ensureSlottedDeps(){const t=this.shadowRoot?.querySelector("slot");if(!t)return;const e=async n=>{const c=new Set(n.map(a=>a.tagName));for(const a of c){const d=this.__slotDeps[a];d&&await d()}};await e(t.assignedElements({flatten:!0})),t.addEventListener("slotchange",async()=>e(t.assignedElements({flatten:!0})))}__getActionFromEvent(t){if(!this.id)return null;for(const e of t.composedPath())if(e instanceof Element){if(e.getAttribute("data-dialog-toggle")===this.id)return this.__lastTriggerEl=e,"toggle";if(e.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=e,"toggle"}return null}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0),this.addEventListener("keydown",this.__onKeydownTrap)}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),this.removeEventListener("keydown",this.__onKeydownTrap),super.disconnectedCallback()}updated(t){if(t.has("open")){const e=t.get("open");this.__updateTriggersExpanded(),this.open&&!e?this.updateComplete.then(()=>{this.shadowRoot?.querySelector('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')?.focus?.()}):!this.open&&e&&this.__lastTriggerEl?.focus?.(),this.__toggleScrollLock(this.open)}t.has("icon")&&this.icon&&l(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([4,2]),import.meta.url)}__updateTriggersExpanded(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-dialog-toggle="${this.id}"]`).forEach(t=>{t.hasAttribute("aria-controls")&&t.setAttribute("aria-expanded",String(this.open))})}__toggleScrollLock(t){if(this.inSb)return;const e=document.documentElement;e.style.overflow=t?"hidden":""}__setOpen(t){this.open=t,this.__fire(t?"open":"close")}__fire(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}__slotIsEmpty(){const t=this.shadowRoot?.querySelector("slot");return t?t.assignedElements({flatten:!0}).length===0:!0}renderHeader(t){const e=this.variant==="form"||this.variant==="floating";return r`
+      <div class="header">
+        <div class="title">
+          ${this.icon?r`<md-icon class="dialog-icon">${this.icon}</md-icon>`:p}
+          <div class="label" id=${t}>${this.label}</div>
+        </div>
+        ${e?r`<scb-icon-button class="close" icon="close" @click=${this.__onCancel}></scb-icon-button>`:p}
+      </div>
+    `}renderContentDefault(t){const e=this.__slotIsEmpty();return r`
+      <div class="content" id=${t}>
+        ${e&&this.supportingText?r`${this.supportingText}`:r`<slot></slot>`}
+      </div>
+    `}renderActions(){switch(this.variant){case"alert":return r`<div class="actions">
+          <scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
+        </div>`;case"confirm":return r`<div class="actions">
+          <scb-button variant="text" label=${this.confirmButton} @click=${this.__onConfirm}></scb-button>
+          <scb-button variant="text" label=${this.denyButton} @click=${this.__onDeny}></scb-button>
+        </div>`;case"choose":return r`<div class="actions">
+          <scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
+          <scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
+        </div>`;case"form":return r`<div class="actions">
+          <scb-button class="start" variant="text" label=${this.resetButton} @click=${this.__onReset}></scb-button>
+          <scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
+          <scb-button variant="text" label=${this.submitButton} @click=${this.__onSubmit}></scb-button>
+        </div>`;case"floating":return p;default:return r`<div class="actions">
+          <scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
+          <scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
+        </div>`}}renderBody(t,e){return this.variant==="form"?r`
+        ${this.renderHeader(t)}
+        <div class="content" id=${e}>
+          <form id=${this.formId} action=${this.formAction} method=${this.formMethod||p}>
+            <slot></slot>
+          </form>
+        </div>
+        ${this.renderActions()}
+      `:r`${this.renderHeader(t)} ${this.renderContentDefault(e)} ${this.renderActions()}`}render(){const t="dlg-title",e="dlg-desc";return r`
+      <div class="scrim" @click=${this.__onScrimClick} aria-hidden="true"></div>
+      <div
+        class="container"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby=${t}
+        aria-describedby=${e}
+      >
+        ${this.renderBody(t,e)}
+      </div>
+    `}};i.styles=h`
+    :host { display:block; position:relative; }
+
+    .scrim {
+      position: var(--scb-dialog-scrim-position, fixed);
+      inset: 0;
+      /* var från tokens, tonas med opacity via color-mix */
+      background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
+      z-index: var(--z-dialog-scrim, 1000);
+      opacity: 1;
+      transition: opacity var(--motion-duration-short, 0.25s);
+      height: var(--scb-dialog-scrim-height, auto);
+    }
+
+    .container {
+      position: var(--scb-dialog-container-position, fixed);
+      inset: 50% auto auto 50%;
+      transform: translate(-50%, -50%) scale(1);
+
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+
+      /* radius mappad till spacing-token som fallback */
+      border-radius: var(--scb-dialog-radius, var(--spacing-5, 16px));
+
+      /* skugga mappad till shadow-token + spacing-tokens */
+      box-shadow:
+        0 var(--spacing-1, 2px)
+        var(--spacing-5, 16px)
+        color-mix(in srgb, var(--md-sys-color-shadow) 20%, transparent);
+
+      /* width/height via CSS custom props med px-fallback */
+      min-width: var(--scb-dialog-min-w, 340px);
+      max-width: var(--scb-dialog-max-w, 90vw);
+      max-height: var(--scb-dialog-max-h, 90vh);
+
+      display:flex; flex-direction:column;
+
+      /* padding mappad till spacing-token */
+      padding: var(--scb-dialog-padding, var(--spacing-7, 24px));
+
+      z-index: var(--z-dialog, 1001);
+      opacity: 1;
+      transition:
+        opacity var(--motion-duration-short, 0.25s),
+        transform var(--motion-duration-short, 0.25s);
+    }
+
+    :host(:not([open])) .scrim,
+    :host(:not([open])) .container { opacity:0; pointer-events:none; }
+
+    /* Header: ikon över rubrik */
+    .header {
+      display:flex;
+      align-items:flex-start;
+      gap: var(--spacing-4, 12px);
+      margin-bottom: var(--spacing-5, 16px);
+    }
+    .header .title {
+      display:flex;
+      flex-direction:column; /* ikon ovanför label */
+      gap: var(--spacing-3, 8px);
+    }
+    .header .label {
+      /* typografi mappad till md-sys-typescale tokens */
+      font-weight: var(--md-sys-typescale-headline-small-weight, 700);
+      font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
+      line-height: var(--md-sys-typescale-headline-small-line-height, 2rem);
+    }
+    .header .close { margin-left:auto; }
+
+    .dialog-icon {
+      inline-size: var(--scb-dialog-icon-size, var(--spacing-7, 24px));
+      block-size: var(--scb-dialog-icon-size, var(--spacing-7, 24px));
+    }
+
+    .content {
+      flex: 1 1 auto;
+      overflow:auto;
+      margin-bottom: var(--spacing-5, 16px);
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .actions {
+      display:flex;
+      align-items:center;
+      gap: var(--spacing-3, 8px);
+      justify-content:flex-end;
+    }
+    .actions .start { margin-right:auto; }
+
+    /* Min-bredder per variant (override-ningsbara via CSS custom props) */
+    :host([variant="choose"])   .container { --scb-dialog-min-w: var(--scb-dialog-min-w-choose, 280px); }
+    :host([variant="alert"])    .container { --scb-dialog-min-w: var(--scb-dialog-min-w-alert, 320px); }
+    :host([variant="confirm"])  .container { --scb-dialog-min-w: var(--scb-dialog-min-w-confirm, 360px); }
+
+    /* Form-layout: enkel kolumn-grid med gap */
+    :host([variant="form"]) form{
+      display:grid;
+      grid-template-columns: 1fr;
+      gap: var(--scb-form-gap, var(--spacing-6, 20px)); /* <— token + fallback */
+    }
+
+    :host([variant="floating"]) .container { --scb-dialog-min-w: var(--scb-dialog-min-w-floating, 360px); }
+
+    /* Choose: gör slottade radios vertikala med spacing */
+    :host([variant="choose"]) ::slotted(scb-radio-button) {
+      display:block;
+      margin-block: var(--scb-choice-gap, 6px);
+    }
+  `;o([s({type:Boolean,reflect:!0})],i.prototype,"open",2);o([s({type:Boolean,attribute:!1})],i.prototype,"inSb",2);o([s({type:Boolean,attribute:"scrim-close"})],i.prototype,"scrimClose",2);o([s({type:String})],i.prototype,"variant",2);o([s({type:String})],i.prototype,"label",2);o([s({type:String})],i.prototype,"icon",2);o([s({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);o([s({type:String,attribute:"ok-button"})],i.prototype,"okButton",2);o([s({type:String,attribute:"cancel-button"})],i.prototype,"cancelButton",2);o([s({type:String,attribute:"delete-button"})],i.prototype,"deleteButton",2);o([s({type:String,attribute:"confirm-button"})],i.prototype,"confirmButton",2);o([s({type:String,attribute:"deny-button"})],i.prototype,"denyButton",2);o([s({type:String,attribute:"reset-button"})],i.prototype,"resetButton",2);o([s({type:String,attribute:"submit-button"})],i.prototype,"submitButton",2);o([s({type:String,attribute:"form-id"})],i.prototype,"formId",2);o([s({type:String,attribute:"form-action"})],i.prototype,"formAction",2);o([s({type:String,attribute:"form-method"})],i.prototype,"formMethod",2);i=o([_("scb-dialog")],i);