scb-wc-test 0.1.1

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

@@ -0,0 +1,211 @@
+import{b as y,n as h,i as x,E as b,x as d,t as A}from"../../vendor/vendor.js";import"../scb-list/scb-list.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.js";var w=Object.defineProperty,I=Object.getOwnPropertyDescriptor,l=(e,t,s,n)=>{for(var i=n>1?void 0:n?I(t,s):t,r=e.length-1,a;r>=0;r--)(a=e[r])&&(i=(n?a(t,s,i):a(i))||i);return n&&i&&w(t,s,i),i};let S=0,o=class extends x{constructor(){super(...arguments),this.supportingText="Hinted search text",this.value="",this.size="default",this.fullScreen=!1,this._inputFocused=!1,this._visibleSuggestions=0,this._activeIndex=-1,this._listboxId=`scb-search-listbox-${++S}`,this._kbMode=!1}connectedCallback(){super.connectedCallback()}disconnectedCallback(){const e=this._inputEl();e&&this._boundNativeKeydown&&e.removeEventListener("keydown",this._boundNativeKeydown,!0),super.disconnectedCallback()}firstUpdated(){this._ensureListboxA11y(),this._updateComboboxA11y();const e=this._inputEl();e&&(this._boundNativeKeydown=t=>this._handleKey(t),e.addEventListener("keydown",this._boundNativeKeydown,!0))}updated(){this._ensureListboxA11y(),this._updateComboboxA11y()}render(){const e=(this.value??"").trim().length>0,t=this._inputFocused&&e&&this._hasSuggestions;return d`
+      <div class="ripple-wrapper">
+        <md-icon class="leading">${e?"arrow_back":"search"}</md-icon>
+
+        <input
+          id="searchInput"
+          type="search"
+          name="textfield"
+          class=${t?"with-list":""}
+          .value=${this.value}
+          placeholder=${this.supportingText}
+          autocomplete="off"
+          @input=${this._onInput}
+          @focus=${this._onFocus}
+          @blur=${this._onBlur}
+          aria-label=${this.supportingText||"Sök"}
+        />
+
+        ${e?d`<button class="clear-btn" @click=${this._clearInput} tabindex="-1" aria-label="Rensa sökfält">
+                   <md-icon>close</md-icon>
+                 </button>`:this.trailingIcon?d`<span class="trailing"><md-icon>${this.trailingIcon}</md-icon></span>`:b}
+
+        <md-ripple></md-ripple>
+      </div>
+
+      <div class="list-divider" aria-hidden=${String(!(this.fullScreen&&t))}></div>
+
+      ${t?d`<scb-list class="suggestion-list" id=${this._listboxId}>
+                 <slot @slotchange=${this._onSlotChange}></slot>
+               </scb-list>`:b}
+    `}submit(){const e=this._getActiveItem(),t={value:this.value};e&&(t.active=this._itemPayload(e)),this.dispatchEvent(new CustomEvent("scb-search-submit",{detail:t,bubbles:!0,composed:!0}))}get _hasSuggestions(){return this._visibleSuggestions>=0?this._visibleSuggestions>0:Array.from(this.getElementsByTagName("scb-list-item")).some(t=>!t.hasAttribute("hidden")&&t.style.display!=="none")}_onSlotChange(){this._filterSuggestions(this.value)}_onInput(e){const t=e.target;this.value=t.value,this._filterSuggestions(this.value),this._activeIndex=-1,this._kbMode=!1,this._updateComboboxA11y(),this.dispatchEvent(new CustomEvent("scb-search-input",{detail:{value:this.value},bubbles:!0,composed:!0}))}_onFocus(){this._inputFocused=!0,this._filterSuggestions(this.value),this._updateComboboxA11y(),this.requestUpdate()}_onBlur(){setTimeout(()=>{this._inputFocused=!1,this._activeIndex=-1,this._kbMode=!1,this._updateComboboxA11y(),this.requestUpdate()},100)}_handleKey(e){if(!this._inputEl())return;const s=this._getVisibleItems(),n=(this.value??"").trim().length>0,i=this._inputFocused&&n&&s.length>0,r=e.key,a=e.keyCode,c=r==="ArrowDown"||r==="Down"||a===40,p=r==="ArrowUp"||r==="Up"||a===38,v=r==="Home"||a===36,g=r==="End"||a===35,m=r==="Enter"||a===13,f=r==="Escape"||r==="Esc"||a===27;if(c){if(!i)return;e.preventDefault(),this._kbMode=!0,this._moveActive(s,1);return}if(p){if(!i)return;e.preventDefault(),this._kbMode=!0,this._moveActive(s,-1);return}if(v){if(!i)return;e.preventDefault(),this._kbMode=!0,this._activeIndex=s.length?0:-1,this._updateComboboxA11y(),this._scrollActiveIntoView();return}if(g){if(!i)return;e.preventDefault(),this._kbMode=!0,this._activeIndex=s.length?s.length-1:-1,this._updateComboboxA11y(),this._scrollActiveIntoView();return}if(m){if(!i){this.submit();return}e.preventDefault();const u=this._getActiveItem();if(u){const _=u.getAttribute("label")||"";this.value=_,this.dispatchEvent(new CustomEvent("scb-search-submit",{detail:{value:this.value,active:this._itemPayload(u)},bubbles:!0,composed:!0})),this._visibleSuggestions=0,this._activeIndex=-1,this._kbMode=!1,this.requestUpdate()}else this.submit();return}if(f){e.preventDefault(),this._clearInput();return}}_clearInput(){this.value="",this._activeIndex=-1,this._kbMode=!1;const e=this._inputEl();e?.focus(),e&&(e.value=""),this._filterSuggestions(""),this._updateComboboxA11y(),this.dispatchEvent(new CustomEvent("scb-search-clear",{bubbles:!0,composed:!0}))}_filterSuggestions(e){const t=(e??"").trim().toLowerCase(),s=Array.from(this.querySelectorAll("scb-list-item"));let n=0;for(const i of s){const r=(i.getAttribute("label")||"").toLowerCase(),a=(i.getAttribute("supporting-text")||"").toLowerCase(),c=`${r} ${a}`.trim();t!==""&&c.includes(t)?(i.removeAttribute("hidden"),n++):i.setAttribute("hidden",""),this._ensureOptionA11y(i)}this._visibleSuggestions=n,this._activeIndex>=n&&(this._activeIndex=-1),this._updateComboboxA11y(),this.requestUpdate()}_inputEl(){return this.renderRoot?.querySelector("#searchInput")??null}_listEl(){return this.renderRoot?.querySelector("scb-list.suggestion-list")??null}_getVisibleItems(){return Array.from(this.querySelectorAll("scb-list-item")).filter(t=>!t.hasAttribute("hidden")&&t.style.display!=="none")}_getActiveItem(){const e=this._getVisibleItems();return this._activeIndex<0||this._activeIndex>=e.length?null:e[this._activeIndex]??null}_moveActive(e,t){if(!e.length){this._activeIndex=-1,this._updateComboboxA11y();return}let s=this._activeIndex+t;this._activeIndex===-1?s=t>0?0:e.length-1:(s<0&&(s=0),s>=e.length&&(s=e.length-1)),this._activeIndex=s,this._updateComboboxA11y(),this._scrollActiveIntoView()}_scrollActiveIntoView(){const e=this._getActiveItem();e&&e.scrollIntoView({block:"nearest"})}_itemPayload(e){return{label:e.getAttribute("label")||"",supportingText:e.getAttribute("supporting-text")||"",href:e.getAttribute("href")||"",type:e.getAttribute("type")||"",id:e.id||""}}_ensureListboxA11y(){const e=this._listEl();e&&(e.id||(e.id=this._listboxId),e.setAttribute("role","listbox"),e.setAttribute("aria-label","Sökförslag")),Array.from(this.querySelectorAll("scb-list-item")).forEach(s=>this._ensureOptionA11y(s))}_ensureOptionA11y(e){e.id||(e.id=`${this._listboxId}-opt-${Math.random().toString(36).slice(2,8)}`),e.setAttribute("role","option"),e.setAttribute("tabindex","-1")}_updateComboboxA11y(){const e=this._inputEl();if(!e)return;const t=this._getVisibleItems(),s=(this.value??"").trim().length>0,n=this._inputFocused&&s&&t.length>0;e.setAttribute("role","combobox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("aria-controls",this._listboxId),e.setAttribute("aria-expanded",String(n));const i=n?this._getActiveItem():null;i?.id?e.setAttribute("aria-activedescendant",i.id):e.removeAttribute("aria-activedescendant"),t.forEach((r,a)=>{const c=a===this._activeIndex;r.setAttribute("aria-selected",String(c)),r.style.boxShadow="",r.style.borderRadius="",this._kbMode&&c&&(r.style.boxShadow="inset 0 0 0 var(--md-focus-ring-width, 2px) var(--md-focus-ring-color, var(--p-40))",r.style.borderRadius="var(--md-sys-shape-corner-small, 8px)")})}};o.styles=y`
+    :host {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      color: var(--md-sys-color-on-surface);
+      -webkit-tap-highlight-color: transparent;
+
+      --scb-search-radius: var(--radius-full, 1000px);
+      --scb-search-open-radius: var(--radius-xl, 24px);
+
+      --scb-search-height: 56px;
+      --scb-search-padding-x: var(--spacing-5, 16px);
+      --scb-search-padding-y: var(--spacing-5, 16px);
+
+      --scb-search-leading-size: var(--scale-11, 48px);
+      --scb-search-trailing-size: var(--scale-11, 48px);
+      --scb-search-gap: var(--spacing-2, 4px);
+
+      letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
+
+      --scb-search-leading-gap: calc(
+        var(--scb-search-padding-x) + var(--scb-search-leading-size) + var(--scb-search-gap)
+      );
+      --scb-search-trailing-gap: calc(
+        var(--scb-search-padding-x) + var(--scb-search-trailing-size) + var(--scb-search-gap)
+      );
+
+      --scb-search-font-size: var(--md-sys-typescale-body-large-size, 18px);
+      --scb-search-line-height: var(--md-sys-typescale-body-large-line-height, 24px);
+      --scb-search-icon-size: var(--icon-size-small, 24px);
+    }
+
+    :host([size="compact"]) {
+      --scb-search-height: var(--scale-11, 40px);
+      --scb-search-padding-x: var(--spacing-4, 12px);
+      --scb-search-padding-y: var(--spacing-3, 8px);
+      --scb-search-open-radius: var(--radius-l, 16px);
+      --scb-search-font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+      --scb-search-line-height: var(--md-sys-typescale-body-medium-line-height, 20px);
+    }
+
+    .ripple-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .leading {
+      position: absolute;
+      left: var(--scb-search-padding-x);
+      top: 50%;
+      transform: translateY(-50%);
+      width: var(--scb-search-leading-size);
+      height: var(--scb-search-leading-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      color: var(--md-sys-color-on-surface-variant);
+      z-index: 2;
+    }
+    .leading md-icon {
+      font-size: var(--scb-search-icon-size);
+      line-height: 1;
+    }
+
+    .trailing,
+    .clear-btn {
+      position: absolute;
+      right: var(--scb-search-padding-x);
+      top: 50%;
+      transform: translateY(-50%);
+      width: var(--scb-search-trailing-size);
+      height: var(--scb-search-trailing-size);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--md-sys-color-on-surface-variant);
+      z-index: 3;
+    }
+    .trailing md-icon { pointer-events: none; font-size: var(--scb-search-icon-size); }
+
+    .clear-btn {
+      background: none;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+    }
+    .clear-btn[hidden] { display: none; }
+
+    input[type="search"] {
+      padding:
+        var(--scb-search-padding-y)
+        var(--scb-search-trailing-gap)
+        var(--scb-search-padding-y)
+        var(--scb-search-leading-gap);
+      min-height: var(--scb-search-height);
+      width: 100%;
+      box-sizing: border-box;
+
+      border: var(--stroke-border, 1px) solid var(--md-sys-color-outline);
+      border-radius: var(--scb-search-radius);
+
+      font-family: var(--md-sys-typescale-body-large-font, var(--brand-font, Inter), sans-serif);
+      font-size: var(--scb-search-font-size);
+      line-height: var(--scb-search-line-height);
+
+      color: var(--md-sys-color-on-surface);
+      background: var(--md-sys-color-surface);
+
+      position: relative;
+      z-index: 1;
+    }
+    input[type="search"]::placeholder {
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: var(--scb-search-font-size);
+      line-height: var(--scb-search-line-height);
+    }
+    input[type="search"]:hover { outline: var(--md-sys-color-outline) auto var(--stroke-border, 1px); }
+    input[type="search"]:focus { outline: none; }
+
+    md-ripple {
+      border-radius: var(--scb-search-radius);
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      pointer-events: none;
+      --md-ripple-hover-color: transparent;
+      --md-ripple-hover-opacity: 0;
+    }
+
+    input[type="search"]::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      appearance: none;
+      display: none;
+    }
+
+    input.with-list     { border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0; }
+    input.with-list ~ md-ripple { border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0; }
+
+    scb-list.suggestion-list {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      z-index: 10;
+      background: var(--md-sys-color-surface);
+      border: var(--stroke-border, 1px) solid var(--md-sys-color-outline);
+      border-top: 0;
+      border-radius: 0 0 var(--scb-search-open-radius) var(--scb-search-open-radius);
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+
+    :host([full-screen]) input[type="search"],
+    :host([full-screen]) input.with-list,
+    :host([full-screen]) input.with-list ~ md-ripple,
+    :host([full-screen]) md-ripple {
+      border-radius: var(--radius-none, 0px) !important;
+    }
+    :host([full-screen]) scb-list.suggestion-list {
+      position: static;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+    }
+
+    .list-divider {
+      display: none;
+      height: var(--stroke-border, 1px);
+      background: var(--md-sys-color-outline);
+      width: 100%;
+    }
+    :host([full-screen]) .list-divider[aria-hidden="false"] { display: block; }
+
+    @media (prefers-color-scheme: dark) {
+      :host { color: var(--md-sys-color-on-surface); }
+    }
+  `;l([h({type:String,attribute:"trailing-icon"})],o.prototype,"trailingIcon",2);l([h({type:String,attribute:"supporting-text"})],o.prototype,"supportingText",2);l([h({type:String})],o.prototype,"value",2);l([h({type:String,reflect:!0})],o.prototype,"size",2);l([h({type:Boolean,attribute:"full-screen",reflect:!0})],o.prototype,"fullScreen",2);o=l([A("scb-search")],o);

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

@@ -0,0 +1,83 @@
+import{b as d,n as r,i as u,x as a,t as b}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../../vendor/preload-helper.js";var h=Object.defineProperty,m=Object.getOwnPropertyDescriptor,s=(t,e,i,c)=>{for(var n=c>1?void 0:c?m(e,i):e,l=t.length-1,p;l>=0;l--)(p=t[l])&&(n=(c?p(e,i,n):p(n))||n);return c&&n&&h(e,i,n),n};let o=class extends u{constructor(){super(...arguments),this.message="",this.open=!1,this.actionText="",this.showClose=!1,this.fixed=!1,this.fadeout=!1,this.withLongerAction=!1}handleAction(){this.dispatchEvent(new CustomEvent("snackbar-action")),this.open=!1}handleClose(){this.dispatchEvent(new CustomEvent("snackbar-close")),this.open=!1}updated(t){super.updated(t),(t.has("open")||t.has("fadeout"))&&(this.open&&this.fadeout?(window.clearTimeout(this._fadeoutTimer),this._fadeoutTimer=window.setTimeout(()=>{this.open=!1},5e3)):window.clearTimeout(this._fadeoutTimer))}render(){const t=!!this.actionText,e=!!this.showClose;let i="snackbar";return!t&&!e&&(i+=" no-actions"),this.withLongerAction&&(i+=" longer-action"),a`
+            <div class="${i}" ?hidden=${!this.open}>
+                ${this.withLongerAction?a`
+                    <div class="message">${this.message}</div>
+                    <div class="actions">
+                        ${t?a`<scb-button variant="text" label=${this.actionText} @click=${this.handleAction}></scb-button>`:""}
+                        ${e?a`<scb-icon-button icon="close" @click=${this.handleClose} aria-label="Stäng"></scb-icon-button>`:""}
+                    </div>
+                `:a`
+                    <span class="message">${this.message}</span>
+                    ${t?a`<scb-button variant="text" label=${this.actionText} @click=${this.handleAction}></scb-button>`:""}
+                    ${e?a`<scb-icon-button icon="close" @click=${this.handleClose} aria-label="Stäng"></scb-icon-button>`:""}
+                `}
+
+            </div>
+        `}};o.styles=d`
+		:host {
+			position: relative;
+			display: block;
+            min-width: 312px;
+			max-width: 560px;
+		}
+		:host([fixed]) {
+			position: fixed;
+            z-index: 9999;
+            left: 50%;
+			bottom: 24px;
+            transform: translateX(-50%);
+		}
+		.snackbar {
+			background: var(--md-sys-color-inverse-surface);
+			color: var(--md-sys-color-inverse-on-surface);
+			border-radius: 4px;
+			box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
+			display: flex;
+			align-items: center;
+			padding: 14px 16px;
+			font-size: 16px;
+			opacity: 0;
+			transition: opacity 0.3s, bottom 0.3s;
+			pointer-events: auto;
+            position: relative;
+		}
+        .snackbar.longer-action {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        .snackbar .actions {
+            display: flex;
+            margin-top: 10px;
+            width: 100%;
+            justify-content: flex-end;
+
+        }
+        .message.no-actions {
+			margin-right: 0;
+		}
+		:host([open]) .snackbar {
+			opacity: 1;
+			pointer-events: auto;
+		}
+		.message {
+			flex: 1 1 auto;
+            margin-right: 4px;
+		}
+        .snackbar scb-icon-button{
+            --md-icon-button-icon-color: var(--md-sys-color-inverse-on-surface);
+            --md-icon-button-hover-icon-color: var(--md-sys-color-inverse-on-surface);
+            --md-icon-button-hover-state-layer-color: var(--md-sys-color-surface-container);
+            --md-icon-button-focus-icon-color: var(--md-sys-color-inverse-on-surface);
+            --md-icon-button-pressed-icon-color: var(--md-sys-color-inverse-on-surface);
+            --md-focus-ring-color: var(--md-sys-color-inverse-on-surface);
+        }
+        .snackbar scb-button{
+            --md-text-button-label-text-color: var(--md-sys-color-inverse-primary);
+            --md-text-button-hover-label-text-color: var(--md-sys-color-inverse-primary);
+            --md-text-button-hover-state-layer-color: var(--md-sys-color-surface-container);
+            --md-text-button-focus-label-text-color: var(--md-sys-color-inverse-primary);
+            --md-text-button-pressed-label-text-color: var(--md-sys-color-inverse-primary);
+            --md-focus-ring-color: var(--md-sys-color-inverse-on-surface);
+        }
+
+	`;s([r({type:String})],o.prototype,"message",2);s([r({type:Boolean,reflect:!0})],o.prototype,"open",2);s([r({type:String,attribute:"action-text"})],o.prototype,"actionText",2);s([r({type:Boolean,attribute:"show-close"})],o.prototype,"showClose",2);s([r({type:Boolean,reflect:!0})],o.prototype,"fixed",2);s([r({type:Boolean})],o.prototype,"fadeout",2);s([r({type:Boolean,attribute:"with-longer-action"})],o.prototype,"withLongerAction",2);o=s([b("scb-snackbar")],o);

package/mvc/components/scb-status-pill/scb-status-pill.js

@@ -0,0 +1,31 @@
+import{b as u,n as l,i as d,x as n,t as h}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";var b=Object.defineProperty,m=Object.getOwnPropertyDescriptor,e=(p,o,c,t)=>{for(var s=t>1?void 0:t?m(o,c):o,i=p.length-1,a;i>=0;i--)(a=p[i])&&(s=(t?a(o,c,s):a(s))||s);return t&&s&&b(o,c,s),s};let r=class extends d{constructor(){super(...arguments),this.status="",this.label="",this.showIcon=!1}render(){return n`
+    ${this.showIcon?this.status==="success"?n`<md-icon>check_circle</md-icon>`:this.status==="warning"?n`<md-icon>warning</md-icon>`:this.status==="error"?n`<md-icon>error</md-icon>`:"":""}
+    <span>${this.label}</span>
+    `}};r.styles=u`
+    :host {
+      display: inline-block;
+      border-radius: 999px;
+      padding: 6px 16px;
+      font-size: 14px;
+      font-weight: 600;
+      border: none;
+      box-sizing: border-box;
+      user-select: none;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: fit-content;
+    }
+    :host([status="success"]) {
+        background: var(--md-sys-color-success-container);
+        color: var(--md-sys-color-on-success-container);   
+    }
+    :host([status="warning"]) {
+      background: var(--md-sys-color-warning-container);
+      color: var(--md-sys-color-on-warning-container);
+    }
+    :host([status="error"]) {
+        background: var(--md-sys-color-error-container);
+        color: var(--md-sys-color-on-error-container);
+    }
+  `;e([l({type:String})],r.prototype,"status",2);e([l({type:String})],r.prototype,"label",2);e([l({type:Boolean,attribute:"show-icon"})],r.prototype,"showIcon",2);r=e([h("scb-status-pill")],r);

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

@@ -0,0 +1,54 @@
+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 b}from"../../vendor/preload-helper.js";import{i as v,E as h,x as p,b as w,n as l,t as y}from"../../vendor/vendor.js";var g=Object.defineProperty,m=Object.getOwnPropertyDescriptor,f=t=>{throw TypeError(t)},i=(t,e,s,n)=>{for(var r=n>1?void 0:n?m(e,s):e,c=t.length-1,d;c>=0;c--)(d=t[c])&&(r=(n?d(e,s,r):d(r))||r);return n&&r&&g(e,s,r),r},u=(t,e,s)=>e.has(t)||f("Cannot "+s),_=(t,e,s)=>(u(t,e,"read from private field"),e.get(t)),x=(t,e,s)=>e.has(t)?f("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s),E=(t,e,s,n)=>(u(t,e,"write to private field"),e.set(t,s),s),o;let a=class extends v{constructor(){super(...arguments),this.label="",this.ariaLabel="",this.icons=!1,this.selected=!1,this.disabled=!1,this.fullWidth=!1,x(this,o,!1)}updated(){this.toggleAttribute("aria-disabled",this.disabled)}async firstUpdated(){_(this,o)||(await b(()=>import("../../vendor/vendor-material.js").then(e=>e._),__vite__mapDeps([0,1]),import.meta.url),E(this,o,!0)),this.shadowRoot?.querySelector("md-switch")?.addEventListener("change",e=>{this.selected=e.target.selected,this.dispatchEvent(new CustomEvent("change",{detail:{selected:this.selected},bubbles:!0,composed:!0}))})}render(){const t=this.label.trim().length>0,e=t?h:this.ariaLabel||h,s=p`
+      <md-switch
+        ?icons=${this.icons}
+        ?selected=${this.selected}
+        ?disabled=${this.disabled}
+        aria-label=${e}
+      ></md-switch>
+    `;return t?p`
+        <label class="switch-container" ?disabled=${this.disabled}>
+          <span class="switch-label">${this.label}</span>
+          ${s}
+        </label>
+      `:s}};o=new WeakMap;a.styles=w`
+    :host {
+      display: block;
+    }
+
+    .switch-container {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      width: auto;
+
+      /* Gap hämtas från spacing-tokens och följer density-lägen */
+      gap: var(--scb-switch-gap, var(--spacing-3, 8px));
+
+      cursor: pointer;
+
+      /* Basfärg för innehållet. Labeln ärver om inget annat anges. */
+      color: var(--md-sys-color-on-surface);
+    }
+
+    /* När full-width är true, kör space-between + 100% bredd */
+    :host([full-width]) .switch-container {
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .switch-label {
+      /* liten vertikal justering kopplad till spacing-tokens */
+      transform: translateY(var(--scb-switch-label-offset-y, var(--spacing-1, 2px)));
+
+      /* Typografiska tokens*/
+      font-family: var(--brand-font, 'Inter', sans-serif);
+      font-size: var(--md-sys-typescale-title-medium-size, 18px);
+      line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      font-weight: var(--md-sys-typescale-title-large-weight, 600);
+      letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      /* Ärver färg från container */
+      color: var(--scb-switch-label-color, inherit);
+    }
+  `;i([l({type:String})],a.prototype,"label",2);i([l({type:String,reflect:!0,attribute:"aria-label"})],a.prototype,"ariaLabel",2);i([l({type:Boolean,reflect:!0})],a.prototype,"icons",2);i([l({type:Boolean,reflect:!0})],a.prototype,"selected",2);i([l({type:Boolean,reflect:!0})],a.prototype,"disabled",2);i([l({type:Boolean,reflect:!0,attribute:"full-width"})],a.prototype,"fullWidth",2);a=i([y("scb-switch")],a);export{a as ScbSwitch};

package/mvc/components/scb-tabs/scb-primary-tab.js

@@ -0,0 +1,7 @@
+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 p}from"../../vendor/preload-helper.js";import{b as d}from"../../vendor/vendor-material.js";import{b as u,n as l,t as h}from"../../vendor/vendor.js";var b=Object.defineProperty,_=Object.getOwnPropertyDescriptor,s=(t,e,r,n)=>{for(var i=n>1?void 0:n?_(e,r):e,c=t.length-1,a;c>=0;c--)(a=t[c])&&(i=(n?a(e,r,i):a(i))||i);return n&&i&&b(e,r,i),i};let o=class extends d{constructor(){super(...arguments),this.iconOnly=!1,this.inlineIcon=!1,this._onActivate=()=>{const t=this.textContent?.trim()??"";this.dispatchEvent(new CustomEvent("activate",{detail:{label:t},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}get icon(){return this._icon}set icon(t){const e=this._icon;e!==t&&(this._icon=t,this.requestUpdate("icon",e),this.updateIconSlot())}firstUpdated(t){super.firstUpdated(t),this.addEventListener("click",this._onActivate),this._icon&&this.updateIconSlot()}updated(){if(super.updated(),this.setAttribute("aria-selected",this.active?"true":"false"),this.iconOnly&&!this.hasAttribute("aria-label")){const t=this.textContent?.trim()??"";t&&this.setAttribute("aria-label",t)}}async ensureMdIconLoaded(){const t=globalThis;t.__mdIconLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),t.__mdIconLoaded=!0)}async updateIconSlot(){const t=this.querySelector('md-icon[slot="icon"]');if(!this._icon){t?.remove();return}if(await this.ensureMdIconLoaded(),t)t.textContent=this._icon;else{const e=document.createElement("md-icon");e.setAttribute("slot","icon"),e.textContent=this._icon,this.appendChild(e)}}};o.styles=[...d.styles,u`
+      /* Icon-only: dölj textslot */
+      :host([icon-only]) slot:not([name='icon']) {
+        display: none;
+      }
+    `];s([l({type:String})],o.prototype,"icon",1);s([l({type:Boolean,reflect:!0,attribute:"icon-only"})],o.prototype,"iconOnly",2);s([l({type:Boolean,reflect:!0,attribute:"inline-icon"})],o.prototype,"inlineIcon",2);o=s([h("scb-primary-tab")],o);

package/mvc/components/scb-tabs/scb-secondary-tab.js

@@ -0,0 +1,7 @@
+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 h}from"../../vendor/preload-helper.js";import{a as l}from"../../vendor/vendor-material.js";import{b as u,n as d,t as p}from"../../vendor/vendor.js";var b=Object.defineProperty,_=Object.getOwnPropertyDescriptor,c=(t,e,s,n)=>{for(var i=n>1?void 0:n?_(e,s):e,r=t.length-1,a;r>=0;r--)(a=t[r])&&(i=(n?a(e,s,i):a(i))||i);return n&&i&&b(e,s,i),i};let o=class extends l{constructor(){super(...arguments),this.iconOnly=!1,this._onActivate=()=>{const t=this.textContent?.trim()??"";this.dispatchEvent(new CustomEvent("activate",{detail:{label:t},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}get icon(){return this._icon}set icon(t){const e=this._icon;e!==t&&(this._icon=t,this.requestUpdate("icon",e),this.updateIconSlot())}firstUpdated(t){if(super.firstUpdated(t),this.iconOnly&&!this.hasAttribute("aria-label")){const e=this.textContent?.trim()??"";e&&this.setAttribute("aria-label",e)}this.addEventListener("click",this._onActivate),this._icon&&this.updateIconSlot()}updated(){if(super.updated(),this.iconOnly&&!this.hasAttribute("aria-label")){const t=this.textContent?.trim()??"";t&&this.setAttribute("aria-label",t)}}async ensureMdIconLoaded(){const t=globalThis;t.__mdIconLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),t.__mdIconLoaded=!0)}async updateIconSlot(){const t=this.querySelector('md-icon[slot="icon"]');if(!this._icon){t?.remove();return}if(await this.ensureMdIconLoaded(),t)t.textContent=this._icon;else{const e=document.createElement("md-icon");e.setAttribute("slot","icon"),e.textContent=this._icon,this.appendChild(e)}}};o.styles=[...l.styles,u`
+      /* Icon-only: göm all text utom slot="icon" */
+      :host([icon-only]) slot:not([name='icon']) {
+        display: none;
+      }
+    `];c([d({type:String})],o.prototype,"icon",1);c([d({type:Boolean,reflect:!0,attribute:"icon-only"})],o.prototype,"iconOnly",2);o=c([p("scb-secondary-tab")],o);

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

@@ -0,0 +1,23 @@
+import{M as l}from"../../vendor/vendor-material.js";import{b as d,n as m,t as b}from"../../vendor/vendor.js";import"./scb-primary-tab.js";import"./scb-secondary-tab.js";import"../../vendor/preload-helper.js";var p=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(r,t,s,e)=>{for(var a=e>1?void 0:e?v(t,s):t,i=r.length-1,c;i>=0;i--)(c=r[i])&&(a=(e?c(t,s,a):c(a))||a);return e&&a&&p(t,s,a),a};let o=class extends l{constructor(){super(...arguments),this.ariaLabel="",this._isDispatching=!1,this._onChange=r=>{if(!r.composed&&!this._isDispatching){r.stopPropagation(),this._isDispatching=!0;const t=r.target.activeTabIndex;this.dispatchEvent(new CustomEvent("change",{detail:{activeTabIndex:t},bubbles:!0,composed:!0})),this._isDispatching=!1}}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tablist")}firstUpdated(r){super.firstUpdated(r),this.addEventListener("change",this._onChange)}};o.styles=[...l.styles,d`
+    :host {
+      /*Containerfärg */
+      --md-primary-tab-container-color: var(--md-sys-color-surface);
+      --md-secondary-tab-container-color: var(--md-sys-color-surface);
+
+      /* Text- och ikonfärger */
+      --md-primary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
+      --md-secondary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
+      --md-primary-tab-active-label-text-color: var(--md-sys-color-on-surface);
+      --md-secondary-tab-active-label-text-color: var(--md-sys-color-on-surface);
+
+      /* Indikator och divider */
+      --md-primary-tab-active-indicator-color: var(--md-sys-color-primary);
+      --md-primary-tab-divider-color: var(--md-sys-color-outline-variant);
+      --md-secondary-tab-divider-color: var(--md-sys-color-outline-variant);
+
+      /* State layers (hover/press) */
+      --md-primary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
+      --md-secondary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
+    }
+
+  `];n([m({type:String,reflect:!0,attribute:"aria-label"})],o.prototype,"ariaLabel",2);o=n([b("scb-tabs")],o);

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

@@ -0,0 +1,135 @@
+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 c}from"../../vendor/preload-helper.js";import{i as u,x as l,b as h,n as s,t as b}from"../../vendor/vendor.js";var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,i=(e,t,o,a)=>{for(var n=a>1?void 0:a?x(t,o):t,d=e.length-1,p;d>=0;d--)(p=e[d])&&(n=(a?p(t,o,n):p(n))||n);return a&&n&&f(t,o,n),n};let r=class extends u{constructor(){super(...arguments),this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId=""}render(){const e=this.leadingIcon?l`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,t=this.error?l`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const o=this.underLabel?`${this._inputId}-supporting-text`:void 0;return this.type==="textarea"?l`
+        <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
+        <span
+          class="scb-textfield-supporting-text"
+          id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
+        >${this.underLabel}</span>
+        <div class="scb-textfield-wrapper">
+          <textarea
+            class="scb-textfield"
+            ?disabled=${this.disabled}
+            name="${this.name}"
+            id="${this._inputId}"
+            ?required=${this.required}
+            aria-invalid=${this.error?"true":"false"}
+            aria-describedby=${o}
+          >${this.value}</textarea>
+        </div>
+      `:l`
+      <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
+      <span
+        class="scb-textfield-supporting-text"
+        id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
+      >${this.underLabel}</span>
+      <div class="scb-textfield-wrapper">
+        ${e}
+        <input
+          class="scb-textfield${this.error?" has-error-icon":""}"
+          .value=${this.value}
+          type="${this.type}"
+          name="${this.name}"
+          id="${this._inputId}"
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          aria-invalid=${this.error?"true":"false"}
+          aria-describedby=${o}
+        />
+        ${t}
+      </div>
+    `}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value,(this.leadingIcon||this.error)&&this.__ensureMdIconLoaded();const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t.addEventListener("input",o=>{const a=t;if(this.value=a.value,this.pattern){const n=new RegExp(this.pattern);this.error=!n.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}),t.addEventListener("change",o=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),t.addEventListener("select",o=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))}))}updated(e){super.updated(e),(e.has("leadingIcon")||e.has("error"))&&(this.leadingIcon&&this.leadingIcon.trim()||this.error)&&this.__ensureMdIconLoaded(),this.toggleAttribute("aria-disabled",this.disabled)}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=e=>{this.reportValidity()||(e.preventDefault(),e.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&(e.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0))}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0))}reportValidity(){const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){this.required&&!e.value?e.setCustomValidity(this.errorText||"Ogiltig inmatning."):e.setCustomValidity("");const t=e.reportValidity();return this.error=!t,t||(this.errorText=this.errorText||e.validationMessage||"Ogiltig inmatning."),t}return!0}async __ensureMdIconLoaded(){window.__scb_md_icon_loaded||(await c(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),window.__scb_md_icon_loaded=!0)}};r.styles=[h`
+      :host {
+        display: flex;
+        flex-direction: column;
+        max-width: 280px;
+        /* Följ aktuellt tema (light/dark) via tokens */
+        color: var(--md-sys-color-on-surface);
+      }
+      :host([error]) .scb-textfield-supporting-text {
+        color: var(--md-sys-color-error);
+      }
+      :host([error]) .scb-textfield {
+        border-color: var(--md-sys-color-error);
+      }
+      :host([error]) .scb-textfield:focus-visible {
+        border-color: var(--md-sys-color-error);
+        box-shadow: inset 0 0 0 2px var(--md-sys-color-error);
+      }
+      :host([disabled]) {
+        opacity: 0.38;
+        cursor: default;
+      }
+      .scb-textfield-label {
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: 600;
+      }
+      .scb-textfield-supporting-text {
+        font-size: 16px;
+        line-height: 24px;
+        margin-bottom: 8px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .scb-textfield {
+        padding: 4px 16px;
+        min-height: 56px;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 8px;
+        font-size: var(--md-sys-typescale-body-large-size, 16px);
+        font-family: var(--brand-font);
+        line-height: 24px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+      md-icon + .scb-textfield {
+        padding-left: 48px; /* Extra padding for search icon */
+      }
+      .scb-textfield-icon {
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        font-size: 24px;
+      }
+      .scb-textfield:focus-visible {
+        /* Remove outline */
+        outline: none;
+        /* Add a thicker border inside */
+        border-color: var(--md-sys-color-primary);
+        box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
+        border: 1px solid var(--md-sys-color-primary);
+      }
+      .scb-textfield-wrapper {
+        position: relative;
+        width: 100%;
+      }
+      input::-webkit-search-cancel-button {
+        appearance: none;
+        height: 24px;
+        width: 24px;
+        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="black" stroke-width="2"/><line x1="15" y1="9" x2="9" y2="15" stroke="black" stroke-width="2"/><line x1="9" y1="9" x2="15" y2="15" stroke="black" stroke-width="2"/></svg>') no-repeat center center;
+        background-size: 22px 22px;
+        cursor: pointer;
+      }
+      input::-webkit-search-cancel-button,
+      input::-webkit-search-decoration,
+      input::-webkit-search-results-button,
+      input::-webkit-search-results-decoration,
+      input::-webkit-clear-button {
+         filter: brightness(0) saturate(100%) invert(20%) sepia(18%) saturate(2674%) hue-rotate(196deg) brightness(91%) contrast(120%);
+         /* This filter closely matches #0f0865. */
+      }
+      .scb-textfield-error-icon {
+        position: absolute;
+        right: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--md-sys-color-error);
+        font-size: 24px;
+        pointer-events: none;
+      }
+      .scb-textfield.has-error-icon {
+        padding-right: 44px; /* Adjust as needed for icon size and spacing */
+      }
+    `];i([s({type:String,reflect:!0})],r.prototype,"type",2);i([s({type:String})],r.prototype,"label",2);i([s({type:String,attribute:"supporting-text"})],r.prototype,"supportingText",2);i([s({type:String,attribute:"error-text"})],r.prototype,"errorText",2);i([s({type:String,attribute:"leading-icon"})],r.prototype,"leadingIcon",2);i([s({type:String})],r.prototype,"name",2);i([s({type:String})],r.prototype,"pattern",2);i([s({type:String,attribute:"value"})],r.prototype,"value",2);i([s({type:String})],r.prototype,"underLabel",2);i([s({type:Boolean,reflect:!0})],r.prototype,"error",2);i([s({type:Boolean,reflect:!0})],r.prototype,"disabled",2);i([s({type:Boolean,reflect:!0})],r.prototype,"required",2);r=i([b("scb-textfield")],r);export{r as ScbTextField2};