scb-wc 0.1.3 → 0.1.4

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

@@ -0,0 +1,61 @@
+import"../../vendor/vendor-material.js";import{_ as u,b as v,g as y,h as n,s as a,y as m}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as s}from"../../vendor/decorate.js";import{n as k,t as b}from"../../vendor/assertClassBrand.js";import{n as _,r as S,t as x}from"../../vendor/classPrivateFieldGet2.js";(function(){try{var r=typeof globalThis<"u"?globalThis:window;if(!r.__scb_ce_guard_installed__){r.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(i,o,c){try{customElements.get(i)||t(i,o,c)}catch(h){var g=String(h||"");if(g.indexOf("already been used")===-1&&g.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var l,p,d,e=(l=new WeakSet,p=new WeakMap,d=class extends u{constructor(...t){super(...t),k(this,l),S(this,p,void 0),this.href="",this.disabled=!1,this.ariaLabel="",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,_(p,this,i=>{this.disabled&&(i.preventDefault(),i.stopPropagation())})}firstUpdated(){b(l,this,f).call(this)}updated(t){(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&b(l,this,f).call(this)}mapSpacingToken(t){if(!t)return;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.target==="_blank"&&!this.rel?"noopener noreferrer":this.rel;return m`
+      <a
+        part="anchor"
+        href=${a(this.disabled?void 0:this.href||void 0)}
+        target=${a(this.target)}
+        rel=${a(t)}
+        download=${a(this.download)}
+        aria-disabled=${this.disabled?"true":"false"}
+        aria-label=${a(this.ariaLabel||void 0)}
+        @click=${x(p,this)}
+      ><slot></slot></a>
+
+      <md-focus-ring></md-focus-ring>
+    `}},d.styles=v`
+    :host {
+      display: inline-block; 
+      position: relative;  
+      padding: var(--scb-link-focus-ring-gap, 4px);
+      font-family: var(--brand-font, inherit);
+      color: var(--md-sys-color-on-surface);
+      width: fit-content;
+      margin-block-start: var(--scb-link-spacing-block-start, 0);
+      margin-block-end: var(--scb-link-spacing-block-end, 0);
+      margin-inline-start: var(--scb-link-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-link-spacing-inline-end, 0);
+    }
+
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: var(--scb-link-focus-ring-radius, var(--md-sys-shape-corner-small, 1px));
+    }
+
+    a {
+      text-decoration: var(--scb-link-decoration, underline);
+      text-underline-offset: var(--scb-link-underline-offset, .22em);
+      text-decoration-thickness: var(--scb-link-underline-thickness, 1px);
+
+      color: var(--scb-link-color, var(--md-sys-color-primary));
+      border-radius: var(--radius-2, 2px); 
+      outline: none;                
+      cursor: pointer;
+      transition: text-decoration-thickness .12s ease;
+
+      white-space: var(--scb-link-white-space, normal);
+    }
+    a:hover { text-decoration-thickness: var(--scb-link-hover-thickness, 2px); }
+    a:focus { outline: none; }
+
+    :host([disabled]) a {
+      pointer-events: none;
+      opacity: .64;
+      text-decoration: none;
+      cursor: default;
+    }
+    a:focus-visible + md-focus-ring {
+      display: block;
+    }
+  `,d);function f(){const r=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??r,i=this.mapSpacingToken(this.spacingBottom)??r,o=this.mapSpacingToken(this.spacingLeft),c=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-link-spacing-block-start",t):this.style.removeProperty("--scb-link-spacing-block-start"),i?this.style.setProperty("--scb-link-spacing-block-end",i):this.style.removeProperty("--scb-link-spacing-block-end"),o?this.style.setProperty("--scb-link-spacing-inline-start",o):this.style.removeProperty("--scb-link-spacing-inline-start"),c?this.style.setProperty("--scb-link-spacing-inline-end",c):this.style.removeProperty("--scb-link-spacing-inline-end")}s([n({type:String,reflect:!0})],e.prototype,"href",void 0);s([n({type:String,reflect:!0})],e.prototype,"target",void 0);s([n({type:String,reflect:!0})],e.prototype,"rel",void 0);s([n({type:String,reflect:!0})],e.prototype,"download",void 0);s([n({type:Boolean,reflect:!0})],e.prototype,"disabled",void 0);s([n({type:String,attribute:"aria-label"})],e.prototype,"ariaLabel",void 0);s([n({type:String,reflect:!0})],e.prototype,"spacing",void 0);s([n({type:String,attribute:"spacing-top",reflect:!0})],e.prototype,"spacingTop",void 0);s([n({type:String,attribute:"spacing-bottom",reflect:!0})],e.prototype,"spacingBottom",void 0);s([n({type:String,attribute:"spacing-left",reflect:!0})],e.prototype,"spacingLeft",void 0);s([n({type:String,attribute:"spacing-right",reflect:!0})],e.prototype,"spacingRight",void 0);e=s([y("scb-link")],e);

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

@@ -0,0 +1,153 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js","../../vendor/vendor-lit.js","../scb-checkbox/scb-checkbox.js","../../vendor/assertClassBrand.js","../../vendor/classPrivateFieldGet2.js","../../vendor/decorate.js","../scb-checkbox/scb-checkbox-group.js","../scb-switch/scb-switch.js"])))=>i.map(i=>d[i]);
+import"../../vendor/vendor-material.js";import{_ as L,b as E,g as T,h as e,v as n,y as o}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as i}from"../../vendor/decorate.js";import{n as z,t as w}from"../../vendor/assertClassBrand.js";import{t as x}from"../../vendor/preload-helper.js";import{n as h,r as v,t as u}from"../../vendor/classPrivateFieldGet2.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(a,s,c){try{customElements.get(a)||r(a,s,c)}catch(d){var m=String(d||"");if(m.indexOf("already been used")===-1&&m.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var b,y,f,g,S,k,t=(b=new WeakMap,y=new WeakMap,f=new WeakMap,g=new WeakSet,S=new WeakMap,k=new WeakMap,class extends L{constructor(...r){super(...r),z(this,g),v(this,b,void 0),v(this,y,void 0),v(this,f,void 0),v(this,S,void 0),v(this,k,void 0),this.type="text",this.href="",this.itemHref="",this.target="",this.disabled=!1,this.label="",this.supportingText="",this.overline="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.imgHrefImage="",this.trailing=!1,this.trailingVariant="",this.trailingIcon="",this.trailingSwitchLabel="",this.trailingSwitchWidth="",this.trailingSwitchSelected=!1,this.density=0,this.noDivider=!1,h(b,this,!1),h(y,this,!1),h(f,this,!1),this.onRowClick=()=>{if(this.type==="link"&&(this.href||this.itemHref))return;const a=this.shadowRoot?.querySelector("scb-checkbox"),s=this.shadowRoot?.querySelector("scb-switch");if(a&&(a.checked=!a.checked),s){const c=!this.trailingSwitchSelected;s.selected=c,w(g,this,V).call(this,c,!0)}},h(S,this,a=>{const s=a.detail?.selected,c=typeof s=="boolean"?s:a.currentTarget?.selected??!1;w(g,this,V).call(this,c,!0)}),h(k,this,a=>{if(!a.defaultPrevented&&(a.key==="Enter"||a.key===" ")){if(this.type==="link"){const s=this.shadowRoot?.querySelector("a[href]");if(s){a.preventDefault(),s.click();return}}a.preventDefault(),this.onRowClick()}})}static get styles(){return E`
+      :host {
+        border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
+        margin-bottom: calc(var(--stroke-border, 1px) * -1);
+        outline: none;
+        position: relative;
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand-font);
+      }
+
+      :host([no-divider]) { --stroke-border: 0px; }
+
+      md-focus-ring {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        display: none;
+        border-radius: var(--scb-list-item-focus-ring-radius, var(--md-sys-shape-corner-small, 8px));
+      }
+      :host(:focus-visible) md-focus-ring { display: block; }
+
+      .row {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-5, 16px);
+        padding-block: var(--spacing-7, 24px);
+        padding-inline: var(--spacing-5, 16px);
+        border-radius: var(--radius-none, 0px);
+        -webkit-tap-highlight-color: transparent;
+        position: relative;
+        overflow: hidden;
+        cursor: default;
+      }
+      :host([type="link"]) .row { cursor: pointer; }
+
+      :host([density="-2"]) .row,
+      :host-context([data-density="-2"]) .row {
+        padding-block: var(--spacing-5, 16px);
+      }
+      :host([density="-4"]) .row,
+      :host-context([data-density="-4"]) .row {
+        padding-block: var(--spacing-4, 12px);
+      }
+
+      md-ripple {
+        border-radius: inherit;
+        inset: 0;
+        position: absolute;
+        pointer-events: none;
+      }
+
+      .leading { align-self: center; display: grid; place-items: center; }
+      .img {
+        width: calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px));
+        height: calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px));
+        object-fit: contain;
+        border-radius: var(--radius-s, 8px);
+        filter: var(--scb-list-leading-image-filter, none);
+      }
+
+      .texts { display: grid; gap: var(--spacing-1, 2px); min-inline-size: 0; }
+
+      .overline {
+        font-family: var(--brand-font);
+        font-size: var(--md-sys-typescale-label-medium-size);
+        line-height: var(--md-sys-typescale-label-medium-line-height);
+        font-weight: var(--weight-regular);
+        letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .label {
+        font-family: var(--brand-font);
+        font-size: var(--md-sys-typescale-title-large-size);
+        line-height: var(--md-sys-typescale-title-large-line-height);
+        font-weight: var(--weight-semibold);
+        letter-spacing: var(--md-sys-typescale-title-large-tracking);
+        color: var(--md-sys-color-on-surface);
+      }
+      .supporting-text {
+        font-family: var(--brand-font);
+        font-size: var(--md-sys-typescale-body-medium-size);
+        line-height: var(--md-sys-typescale-body-medium-line-height);
+        font-weight: var(--weight-regular);
+        letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+
+      .trailing { margin-left: auto; align-self: center; display: flex; }
+      .trailing.trailing-switch {
+        justify-content: flex-end;
+      }
+      .trailing scb-checkbox { margin-inline-end: var(--scb-list-trailing-checkbox-nudge); }
+
+      :host([trailing-variant="checkbox"]) .row,
+      :host([trailing-variant="switch"]) .row {
+        cursor: pointer;
+      }
+
+      :host([disabled]) .row {
+        cursor: default;
+      }
+
+      .link { 
+        text-decoration: none; 
+        color: inherit;     
+        display: flex;
+        width: 100%;
+        gap: 12px;
+      }
+    `}async firstUpdated(){await w(g,this,$).call(this),this.addEventListener("keydown",u(k,this))}updated(r){super.updated(r),(r.has("leading")||r.has("leadingVariant")||r.has("trailing")||r.has("trailingVariant")||r.has("type")||r.has("target"))&&w(g,this,$).call(this)}render(){const r=this.leading?(()=>{switch(this.leadingVariant){case"icon":return this.leadingIcon?o`<div class="leading"><md-icon>${this.leadingIcon}</md-icon></div>`:n;case"avatar":return o`
+            <div class="leading">
+              <scb-avatar
+                label=${this.avatarLabel}
+                alt=${this.avatarAlt}
+                src=${this.avatarVariant==="image"?this.avatarSrc:""}
+                size="medium"
+                shape="circular"
+                variant=${this.avatarVariant}
+              ></scb-avatar>
+            </div>
+          `;case"image":return this.imgHrefImage?o`<div class="leading"><img class="img" part="leading-image" src="${this.imgHrefImage}" alt="" /></div>`:n;default:return n}})():n,a=this.href||this.itemHref||"",s=this.target==="_blank"?"open_in_new":"chevron_right",c=this.label?`Välj ${this.label}`:"Välj",m=this.label?`Växla ${this.label}`:"Växla";let d=n;if(this.trailing)if(this.trailingVariant==="icon"){const p=this.trailingIcon||(this.type==="link"?s:"");d=p?o`<div class="trailing"><md-icon>${p}</md-icon></div>`:n}else this.trailingVariant==="checkbox"?d=o`
+          <div class="trailing">
+            <scb-checkbox
+              aria-label=${c}
+              @click=${p=>p.stopPropagation()}
+            ></scb-checkbox>
+          </div>`:this.trailingVariant==="switch"&&(d=o`
+          <div class="trailing trailing-switch" style=${this.trailingSwitchWidth?`inline-size: ${this.trailingSwitchWidth}; min-inline-size: ${this.trailingSwitchWidth};`:n}>
+            <scb-switch
+              .selected=${this.trailingSwitchSelected}
+              label=${this.trailingSwitchLabel||n}
+              aria-label=${m}
+              @click=${p=>p.stopPropagation()}
+              @change=${u(S,this)}
+            ></scb-switch>
+          </div>`);else this.type==="link"&&(d=o`<div class="trailing"><md-icon>${s}</md-icon></div>`);const I=this.type==="link"&&this.target==="_blank"?"noopener noreferrer":n,_=o`
+      ${r}
+      <div class="texts">
+        ${this.overline?o`<div class="overline">${this.overline}</div>`:n}
+        <div class="label">${this.label}</div>
+        ${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:n}
+      </div>
+      ${d}
+    `;return o`
+      <div class="row" @click=${this.onRowClick} ?inert=${this.disabled} aria-disabled=${this.disabled?"true":"false"}>
+        ${this.type==="link"&&a?o`<a class="link" href=${a} target=${this.target||n} rel=${I}>${_}</a>`:_}
+        ${this.type==="link"?o`<md-ripple></md-ripple>`:n}
+      </div>
+
+      <md-focus-ring></md-focus-ring>
+    `}});async function $(){const l=this.type==="link"&&(!this.trailing||this.trailingVariant==="icon");(this.leading&&this.leadingVariant==="icon"||this.trailing&&this.trailingVariant==="icon"||l)&&!u(b,this)&&(await x(()=>import("../../vendor/vendor-material.js").then(r=>r.p),__vite__mapDeps([0,1,2]),import.meta.url),h(b,this,!0)),this.trailing&&this.trailingVariant==="checkbox"&&!u(y,this)&&(await x(()=>import("../scb-checkbox/scb-checkbox.js"),__vite__mapDeps([3,4,5,6,0,1,2,7]),import.meta.url),h(y,this,!0)),this.trailing&&this.trailingVariant==="switch"&&!u(f,this)&&(await x(()=>import("../scb-switch/scb-switch.js"),__vite__mapDeps([8,4,6,0,1,2]),import.meta.url),h(f,this,!0))}function V(l,r){this.trailingSwitchSelected=l,r&&this.dispatchEvent(new CustomEvent("trailing-switch-change",{detail:{selected:l},bubbles:!0,composed:!0}))}i([e({type:String,reflect:!0,attribute:"type"})],t.prototype,"type",void 0);i([e({type:String})],t.prototype,"href",void 0);i([e({type:String,attribute:"item-href"})],t.prototype,"itemHref",void 0);i([e({type:String,attribute:"target"})],t.prototype,"target",void 0);i([e({type:Boolean,attribute:"disabled"})],t.prototype,"disabled",void 0);i([e({type:String,reflect:!0})],t.prototype,"label",void 0);i([e({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",void 0);i([e({type:String,attribute:"overline"})],t.prototype,"overline",void 0);i([e({type:Boolean})],t.prototype,"leading",void 0);i([e({type:String,attribute:"leading-variant",reflect:!0})],t.prototype,"leadingVariant",void 0);i([e({type:String,attribute:"leading-icon"})],t.prototype,"leadingIcon",void 0);i([e({type:String,attribute:"avatar-label"})],t.prototype,"avatarLabel",void 0);i([e({type:String,attribute:"avatar-alt"})],t.prototype,"avatarAlt",void 0);i([e({type:String,attribute:"avatar-variant"})],t.prototype,"avatarVariant",void 0);i([e({type:String,attribute:"avatar-src"})],t.prototype,"avatarSrc",void 0);i([e({type:String,reflect:!0,attribute:"img-href-image"})],t.prototype,"imgHrefImage",void 0);i([e({type:Boolean})],t.prototype,"trailing",void 0);i([e({type:String,attribute:"trailing-variant",reflect:!0})],t.prototype,"trailingVariant",void 0);i([e({type:String,attribute:"trailing-icon"})],t.prototype,"trailingIcon",void 0);i([e({type:String,attribute:"trailing-switch-label"})],t.prototype,"trailingSwitchLabel",void 0);i([e({type:String,attribute:"trailing-switch-width"})],t.prototype,"trailingSwitchWidth",void 0);i([e({type:Boolean,attribute:"trailing-switch-selected",reflect:!0})],t.prototype,"trailingSwitchSelected",void 0);i([e({type:Number,reflect:!0})],t.prototype,"density",void 0);i([e({type:Boolean,attribute:"no-divider",reflect:!0})],t.prototype,"noDivider",void 0);t=i([T("scb-list-item")],t);

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

@@ -0,0 +1,26 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js","../../vendor/vendor-lit.js"])))=>i.map(i=>d[i]);
+import{_ as u,b as f,g as b,h as o,p as _,y as v}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as a}from"../../vendor/decorate.js";import{t as y}from"../../vendor/preload-helper.js";import{n as g,r as S,t as k}from"../../vendor/classPrivateFieldGet2.js";import"./scb-list-item.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,i,s){try{customElements.get(e)||t(e,i,s)}catch(l){var r=String(l||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var p,d,n=(p=new WeakMap,d=class extends u{constructor(...t){super(...t),S(this,p,void 0),g(p,this,!1),this.noDivider=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._onSlotChange=()=>this._setupItems()}async firstUpdated(){k(p,this)||(await y(()=>import("../../vendor/vendor-material.js").then(t=>t.t),__vite__mapDeps([0,1,2]),import.meta.url),g(p,this,!0)),this._setupItems(),this._applySpacing()}updated(t){super.updated(t),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this._applySpacing()}_getItems(){return(this._slotEl?.assignedElements({flatten:!0})??[]).filter(t=>t instanceof HTMLElement)}_setupItems(){this._getItems().forEach((e,i)=>{e.hasAttribute("role")||e.setAttribute("role","listitem"),e.setAttribute("tabindex",i===0?"0":"-1")});const t=this.renderRoot?.querySelector("md-list");t&&!t.hasAttribute("data-kbd")&&(t.setAttribute("data-kbd","true"),t.addEventListener("keydown",e=>this._onKeyDown(e)))}_onKeyDown(t){const e=this._getItems();if(!e.length)return;const i=e.findIndex(r=>r.getAttribute("tabindex")==="0"),s=r=>{const l=(r%e.length+e.length)%e.length;e.forEach(m=>m.setAttribute("tabindex","-1"));const h=e[l];h.setAttribute("tabindex","0"),h.focus()};switch(t.key){case"ArrowDown":case"ArrowRight":t.preventDefault(),s(i<0?0:i+1);break;case"ArrowUp":case"ArrowLeft":t.preventDefault(),s(i<0?0:i-1);break;case"Home":t.preventDefault(),s(0);break;case"End":t.preventDefault(),s(e.length-1);break;default:break}}_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}_applySpacing(){const t=this._mapSpacingToken(this.spacing),e=this._mapSpacingToken(this.spacingTop)??t,i=this._mapSpacingToken(this.spacingBottom)??t,s=this._mapSpacingToken(this.spacingLeft),r=this._mapSpacingToken(this.spacingRight);e?this.style.marginBlockStart=e:this.style.removeProperty("margin-block-start"),i?this.style.marginBlockEnd=i:this.style.removeProperty("margin-block-end"),s?this.style.marginInlineStart=s:this.style.removeProperty("margin-inline-start"),r?this.style.marginInlineEnd=r:this.style.removeProperty("margin-inline-end")}render(){return v`
+      <md-list role="list" @slotchange=${this._onSlotChange}>
+        <slot></slot>
+      </md-list>
+    `}},d.styles=[f`
+      :host {
+        display: block;
+        --scb-list-bg: transparent;
+      }
+
+      md-list {
+        background: var(--scb-list-bg);
+      }
+
+      /* Visa top-border på första raden endast när listan saknar no-divider
+         och endast om första item inte själv är markerad med no-divider. */
+      :host(:not([no-divider])) ::slotted(scb-list-item:first-of-type:not([no-divider])) {
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      /* När listan har no-divider, tryck ned variabeln till alla barn */
+      :host([no-divider]) ::slotted(scb-list-item) {
+        --stroke-border: 0px;
+      }
+    `],d);a([o({type:Boolean,attribute:"no-divider",reflect:!0})],n.prototype,"noDivider",void 0);a([o({type:String,reflect:!0})],n.prototype,"spacing",void 0);a([o({type:String,reflect:!0,attribute:"spacing-top"})],n.prototype,"spacingTop",void 0);a([o({type:String,reflect:!0,attribute:"spacing-bottom"})],n.prototype,"spacingBottom",void 0);a([o({type:String,reflect:!0,attribute:"spacing-left"})],n.prototype,"spacingLeft",void 0);a([o({type:String,reflect:!0,attribute:"spacing-right"})],n.prototype,"spacingRight",void 0);a([_("slot")],n.prototype,"_slotEl",void 0);n=a([b("scb-list")],n);

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

@@ -0,0 +1,205 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js","../../vendor/vendor-lit.js"])))=>i.map(i=>d[i]);
+import{_ as b,b as g,g as _,h as c,m as f,v as u,y as d}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as o}from"../../vendor/decorate.js";import"../scb-chevron/scb-chevron.js";import{t as m}from"../../vendor/preload-helper.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,n,a){try{customElements.get(t)||e(t,n,a)}catch(h){var p=String(h||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var r,s,i=(r=class extends b{constructor(...e){super(...e),this.label="",this.selected=!1,this.noHighlightSelected=!1,this.leadingIcon="",this.itemHref="",this.hasSlotContent=!1,this.expanded=!1,this.__submenuId=`sub-${Math.random().toString(36).slice(2)}`,this.__focusId=`f-${Math.random().toString(36).slice(2)}`,this._toggleExpand=t=>{t&&t.stopPropagation(),this.hasSlotContent&&this.__setExpanded(!this.expanded)},this._onButtonClick=t=>{t.stopPropagation(),this._dispatchSelect(),this._toggleExpand()},this._onLinkClick=()=>{this._dispatchSelect()},this._onKeyDown=t=>{const n=Array.from(this.closest("scb-sub-menu, scb-menu")?.querySelectorAll("scb-menu-item")||[]),a=n.indexOf(this);switch(t.key){case"ArrowDown":t.preventDefault(),(n[a+1]||n[0]).shadowRoot?.querySelector(".scb-menu-label-text")?.focus();break;case"ArrowUp":t.preventDefault(),(n[a-1]||n[n.length-1]).shadowRoot?.querySelector(".scb-menu-label-text")?.focus();break;case"Home":t.preventDefault(),n[0].shadowRoot?.querySelector(".scb-menu-label-text")?.focus();break;case"End":t.preventDefault(),n[n.length-1].shadowRoot?.querySelector(".scb-menu-label-text")?.focus();break}}}get __submenuEl(){return this.renderRoot.querySelector(`#${this.__submenuId}`)}async __ensureDepsLoaded(){s.__rippleLoaded||(await m(()=>import("../../vendor/vendor-material.js").then(e=>e.f),__vite__mapDeps([0,1,2]),import.meta.url),s.__rippleLoaded=!0),s.__focusRingLoaded||(await m(()=>import("../../vendor/vendor-material.js").then(e=>e.m),__vite__mapDeps([0,1,2]),import.meta.url),s.__focusRingLoaded=!0),this.leadingIcon&&!s.__iconLoaded&&(await m(()=>import("../../vendor/vendor-material.js").then(e=>e.p),__vite__mapDeps([0,1,2]),import.meta.url),s.__iconLoaded=!0)}__syncHasSlotContentFromLightDom(){const e=Array.from(this.children);this.hasSlotContent=e.length>0&&e.every(t=>t.tagName==="SCB-SUB-MENU")}connectedCallback(){super.connectedCallback(),this.__syncHasSlotContentFromLightDom()}_onSlotChange(e){const t=e.target.assignedElements({flatten:!0});this.hasSlotContent=t.length>0&&t.every(n=>n.tagName==="SCB-SUB-MENU")}__setExpanded(e){this.hasSlotContent&&(this.expanded=e,this.dispatchEvent(new CustomEvent("scb-menu-expand",{bubbles:!0,composed:!0,detail:{item:this,expanded:e}})),this.dispatchEvent(new CustomEvent("scbmenuexpand",{bubbles:!0,composed:!0,detail:{item:this,expanded:e}})))}_dispatchSelect(){this.dispatchEvent(new CustomEvent("scb-menu-select",{bubbles:!0,composed:!0,detail:{item:this}})),this.dispatchEvent(new CustomEvent("scbmenuselect",{bubbles:!0,composed:!0,detail:{item:this}}))}async firstUpdated(){await this.__ensureDepsLoaded()}updated(e){e.has("leadingIcon")&&this.leadingIcon&&this.__ensureDepsLoaded(),e.has("hasSlotContent")&&this.hasSlotContent&&this.__ensureDepsLoaded(),e.has("expanded")&&this.__applyInert()}__applyInert(){const e=this.__submenuEl;e&&(this.expanded?(e.removeAttribute("inert"),e.setAttribute("aria-hidden","false")):(e.setAttribute("inert",""),e.setAttribute("aria-hidden","true")))}render(){const e=!!this.leadingIcon,t=!!this.itemHref,n=this.hasSlotContent;return d`
+      <div class="scb-menu-item">
+        <div class="scb-menu-item-label" ?selected=${this.selected} ?no-highlight-selected=${this.noHighlightSelected}>
+          ${t?d`
+                <a
+                  id=${this.__focusId}
+                  class="scb-menu-label-text"
+                  aria-label="${this.label}"
+                  href="${this.itemHref}"
+                  aria-current=${this.selected?"page":u}
+                  @click=${this._onLinkClick}
+                  @keydown=${this._onKeyDown}
+                >
+                  <span class="scb-menu-click ${e?"has-icon":""}">
+                    <md-ripple></md-ripple>
+                    ${e?d`<md-icon>${this.leadingIcon}</md-icon>`:""}
+                    ${this.label}
+                  </span>
+                </a>
+                <md-focus-ring for=${this.__focusId} inward></md-focus-ring>
+              `:d`
+                <button
+                  id=${this.__focusId}
+                  type="button"
+                  class="scb-menu-label-text"
+                  @click=${this._onButtonClick}
+                  @keydown=${this._onKeyDown}
+                  aria-expanded=${n?String(this.expanded):u}
+                  aria-controls=${n?this.__submenuId:u}
+                >
+                  <span class="scb-menu-click ${e?"has-icon":""}">
+                    <md-ripple></md-ripple>
+                    ${e?d`<md-icon>${this.leadingIcon}</md-icon>`:""}
+                    ${this.label}
+                  </span>
+                </button>
+                <md-focus-ring for=${this.__focusId} inward></md-focus-ring>
+              `}
+          ${n?d`
+                <button
+                  class="menu-chevron-button"
+                  type="button"
+                  role="presentation"
+                  tabindex="-1"
+                  @click=${a=>{a.stopPropagation(),this._toggleExpand(a)}}
+                >
+                  <md-ripple></md-ripple>
+                  <scb-chevron class="menu-chevron" .open=${this.expanded}></scb-chevron>
+                </button>
+              `:""}
+        </div>
+
+        <div
+          id="${this.__submenuId}"
+          class="submenu ${this.expanded?"expanded":""}"
+          role="region"
+          aria-hidden=${this.expanded?"false":"true"}
+        >
+          <div class="submenu__inner">
+            <slot @slotchange=${this._onSlotChange}></slot>
+          </div>
+        </div>
+      </div>
+    `}},s=r,r.__rippleLoaded=!1,r.__iconLoaded=!1,r.__focusRingLoaded=!1,r.styles=g`
+    :host {
+      /* Animationtokens */
+      --scb-menu-sub-transition-duration: var(--scb-motion-duration-quick, 150ms);
+      --scb-menu-sub-transition-easing: var(--scb-motion-easing-standard, cubic-bezier(.69,.16,.2,.98));
+
+      --scb-menu-chevron-transition-duration: var(--motion-duration-medium, 150ms);
+      --scb-menu-chevron-transition-easing: var(
+        --motion-easing-emphasized-accelerate,
+        var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
+      );
+
+      --scb-menu-item-padding-y: 14px;
+      --scb-menu-item-padding-x: 20px;
+      --scb-menu-item-padding-x-has-icon: var(--spacing-4, 12px);
+      --scb-menu-item-radius: 28px;
+      --scb-menu-item-gap: var(--spacing-4, 12px);
+    }
+
+    :host([expanded]) {
+      --scb-menu-chevron-transition-easing: var(
+        --motion-easing-emphasized-decelerate,
+        var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
+      );
+    }
+
+    .scb-menu-item-label {
+      display: flex;
+      align-items: center;
+      position: relative;
+    }
+
+    .scb-menu-label-text {
+      width: 100%;
+      display: block;
+      background: transparent;
+      border: 0;
+      text-align: left;
+      font: inherit;
+      color: inherit;
+      text-decoration: none;
+      cursor: pointer;
+      padding: 0;
+      margin: 0;
+      appearance: none;
+      -webkit-appearance: none;
+      box-sizing: border-box;
+      outline: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+    .scb-menu-label-text:focus,
+    .scb-menu-label-text:focus-visible {
+      outline: none;
+    }
+    .scb-menu-label-text:-moz-focusring {
+      outline: none;
+    }
+
+    .scb-menu-click {
+      display: flex;
+      align-items: center;
+      gap: var(--scb-menu-item-gap);
+      padding-block: var(--scb-menu-item-padding-y);
+      padding-inline: var(--scb-menu-item-padding-x);
+      border-radius: var(--scb-menu-item-radius);
+      position: relative;
+      overflow: hidden;
+      color: var(--md-sys-color-on-surface);
+    }
+    .scb-menu-click.has-icon {
+      padding-inline: var(--scb-menu-item-padding-x-has-icon);
+      padding-block: var(--scb-menu-item-padding-y);
+    }
+
+    .scb-menu-click md-ripple {
+      --md-ripple-focus-opacity: 0;
+    }
+
+    .scb-menu-item-label[selected]:not([no-highlight-selected]) .scb-menu-click,
+    :host([selected]):not([no-highlight-selected]) .scb-menu-click {
+      color: var(--md-sys-color-on-secondary-container);
+      background: var(--md-sys-color-secondary-container);
+      font-weight: 600;
+    }
+
+    .menu-chevron-button {
+      margin-left: auto;
+      flex: 0 0 auto;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 48px;
+      block-size: 48px;
+      padding: 0;
+      border: 0;
+      border-radius: 999px;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .menu-chevron-button:focus {
+      outline: none;
+    }
+
+    .menu-chevron-button md-ripple {
+      border-radius: inherit;
+    }
+
+    .menu-chevron {
+      --scb-chevron-size: var(--icon-size-medium, 24px);
+    }
+
+    /* Undermeny: CSS-grid 0fr till 1fr för höjd-animation utan JS-mätningar */
+    .submenu {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition:
+        grid-template-rows var(--scb-menu-sub-transition-duration) var(--scb-menu-sub-transition-easing),
+        opacity var(--scb-menu-sub-transition-duration) var(--scb-menu-sub-transition-easing);
+      opacity: 0;
+      overflow: hidden;
+      padding-left: var(--spacing-5, 16px);
+    }
+    .submenu.expanded {
+      grid-template-rows: 1fr;
+      opacity: 1;
+    }
+    .submenu__inner {
+      overflow: hidden;
+    }
+
+    /* Minskar rörelse för användare som önskar det */
+    @media (prefers-reduced-motion: reduce) {
+      .submenu {
+        transition: none;
+      }
+    }
+  `,r);o([c({type:String})],i.prototype,"label",void 0);o([c({type:Boolean,reflect:!0})],i.prototype,"selected",void 0);o([c({type:Boolean,attribute:"no-highlight-selected",reflect:!0})],i.prototype,"noHighlightSelected",void 0);o([c({type:String,attribute:"leading-icon"})],i.prototype,"leadingIcon",void 0);o([c({type:String,attribute:"item-href"})],i.prototype,"itemHref",void 0);o([f()],i.prototype,"hasSlotContent",void 0);o([c({type:Boolean,reflect:!0})],i.prototype,"expanded",void 0);i=s=o([_("scb-menu-item")],i);

package/mvc/components/scb-menu/scb-menu-section.js

@@ -0,0 +1,42 @@
+import{_ as m,b,g as u,h as v,y as o}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as c}from"../../vendor/decorate.js";import"../scb-divider/scb-divider.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(s,l,d){try{customElements.get(s)||i(s,l,d)}catch(r){var n=String(r||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var t,a=(t=class extends m{constructor(...i){super(...i),this.label=""}render(){return o`
+      <scb-divider></scb-divider>
+      ${this.label?o`
+            <div class="scb-menu-section">
+              <div class="scb-menu-label">${this.label}</div>
+            </div>
+          `:""}
+    `}},t.styles=b`
+    :host {
+      color: var(--md-sys-color-on-surface);
+      font-family: var(--brand-font);
+    }
+
+    .scb-menu-section {
+      display: block;
+      width: 100%;
+
+      padding-block: var(--scb-menu-section-padding-block, 14px);
+      padding-inline: var(--spacing-4, 12px);
+      color: var(--md-sys-color-on-surface);
+      font-weight: var(--weight-semibold, 600);
+    }
+
+    .scb-menu-label {
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-label-medium-size);
+      line-height: var(--md-sys-typescale-label-medium-line-height);
+      font-weight: var(
+        --md-sys-typescale-label-medium-weight,
+        var(--weight-semibold)
+      );
+      letter-spacing: var(
+        --md-sys-typescale-label-medium-tracking
+      );
+      color: var(--md-sys-color-on-surface);
+    }
+
+    scb-divider {
+      margin-block: var(--spacing-2, 4px);
+      margin-inline: var(--spacing-4, 12px);
+    }
+  `,t);c([v({type:String})],a.prototype,"label",void 0);a=c([u("scb-menu-section")],a);

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

@@ -0,0 +1,81 @@
+import{_ as m,b as u,g as v,h as n,v as y,y as b}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as i}from"../../vendor/decorate.js";import{n as f,t as g}from"../../vendor/assertClassBrand.js";import"../scb-divider/scb-divider.js";import"./scb-menu-item.js";import"./scb-menu-section.js";import"./scb-sub-menu.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,r,a){try{customElements.get(t)||e(t,r,a)}catch(d){var p=String(d||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var c,o,s=(c=new WeakSet,o=class extends m{constructor(...e){super(...e),f(this,c),this.label="",this.subLabel="",this.noHighlightSelected=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._onGlobalSelect=t=>{const r=t;this.querySelectorAll("scb-menu-item").forEach(a=>{a.selected=!1,this.noHighlightSelected?a.setAttribute("no-highlight-selected",""):a.removeAttribute("no-highlight-selected")}),this.contains(r.detail.item)&&(r.detail.item.selected=!0)}}render(){return b`
+      <nav
+        aria-label="${this.label}"
+      >
+        ${this.label?b`
+              <div class="scb-menu-label-wrapper">
+                <div class="scb-menu-label">${this.label}</div>
+                <div class="scb-menu-sublabel">
+                  ${this.subLabel}
+                </div>
+              </div>
+              <scb-divider></scb-divider>
+            `:y}
+        <div class="panel">
+          <slot></slot>
+        </div>
+      </nav>
+    `}firstUpdated(e){super.firstUpdated(e),g(c,this,h).call(this)}updated(e){super.updated(e),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&g(c,this,h).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}connectedCallback(){super.connectedCallback(),window.addEventListener("scb-menu-select",this._onGlobalSelect)}disconnectedCallback(){window.removeEventListener("scb-menu-select",this._onGlobalSelect),super.disconnectedCallback()}},o.styles=u`
+    :host {
+      display: block;
+      color: var(--md-sys-color-on-surface);
+      padding: var(--spacing-4, 12px);
+      background: var(--scb-menu-background, var(--md-sys-color-surface-container));
+      font-family: var(--brand-font);
+
+      margin-block-start: var(--scb-menu-spacing-block-start, 0);
+      margin-block-end: var(--scb-menu-spacing-block-end, 0);
+      margin-inline-start: var(--scb-menu-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-menu-spacing-inline-end, 0);
+    }
+    
+    .scb-menu-label {
+      font-size: var(--md-sys-typescale-label-large-size);
+      line-height: var(
+        --md-sys-typescale-label-large-line-height
+      );
+      font-weight: var(
+        --md-sys-typescale-label-large-weight,
+        var(--weight-semibold)
+      );
+      letter-spacing: var(
+        --md-sys-typescale-label-large-tracking
+      );
+      color: var(--md-sys-color-on-surface);
+    }
+
+    .scb-menu-sublabel {
+      font-size: var(--md-sys-typescale-body-small-size);
+      line-height: var(
+        --md-sys-typescale-body-small-line-height
+      );
+      font-weight: var(
+        --md-sys-typescale-body-small-weight,
+        var(--weight-regular)
+      );
+      letter-spacing: var(
+        --md-sys-typescale-body-small-tracking
+      );
+      color: var(--md-sys-color-on-surface);
+    }
+
+    .scb-menu-label-wrapper {
+      padding: var(--spacing-4, 12px);
+      color: inherit;
+    }
+
+    scb-divider {
+      margin-block: var(--spacing-2, 4px);
+    }
+
+    ::slotted(scb-search) {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      padding: var(--scb-menu-search-padding, var(--spacing-4, 12px));
+    }
+
+    .panel {
+      contain: layout paint style;
+    }
+  `,o);function h(){const l=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??l,t=this.mapSpacingToken(this.spacingBottom)??l,r=this.mapSpacingToken(this.spacingLeft),a=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-menu-spacing-block-start",e):this.style.removeProperty("--scb-menu-spacing-block-start"),t?this.style.setProperty("--scb-menu-spacing-block-end",t):this.style.removeProperty("--scb-menu-spacing-block-end"),r?this.style.setProperty("--scb-menu-spacing-inline-start",r):this.style.removeProperty("--scb-menu-spacing-inline-start"),a?this.style.setProperty("--scb-menu-spacing-inline-end",a):this.style.removeProperty("--scb-menu-spacing-inline-end")}i([n({type:String})],s.prototype,"label",void 0);i([n({type:String,attribute:"sub-label"})],s.prototype,"subLabel",void 0);i([n({type:Boolean,attribute:"no-highlight-selected",reflect:!0})],s.prototype,"noHighlightSelected",void 0);i([n({type:String,reflect:!0})],s.prototype,"spacing",void 0);i([n({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",void 0);i([n({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",void 0);i([n({type:String,attribute:"spacing-left",reflect:!0})],s.prototype,"spacingLeft",void 0);i([n({type:String,attribute:"spacing-right",reflect:!0})],s.prototype,"spacingRight",void 0);s=i([v("scb-menu")],s);

package/mvc/components/scb-menu/scb-sub-menu.js

@@ -0,0 +1,10 @@
+import{_ as d,b as u,g as b,h as m,y as _}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as r}from"../../vendor/decorate.js";(function(){try{var s=typeof globalThis<"u"?globalThis:window;if(!s.__scb_ce_guard_installed__){s.__scb_ce_guard_installed__=!0;var n=customElements.define.bind(customElements);customElements.define=function(e,t,l){try{customElements.get(e)||n(e,t,l)}catch(o){var i=String(o||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var c,a=(c=class extends d{constructor(...n){super(...n),this.label="",this._onGlobalSelect=e=>{const t=e;this.querySelectorAll("scb-menu-item").forEach(l=>l.selected=!1),this.contains(t.detail.item)&&(t.detail.item.selected=!0)}}connectedCallback(){super.connectedCallback(),window.addEventListener("scb-menu-select",this._onGlobalSelect)}disconnectedCallback(){window.removeEventListener("scb-menu-select",this._onGlobalSelect),super.disconnectedCallback()}render(){return _`
+      <nav aria-label="${this.label}">
+        <slot></slot>
+      </nav>
+    `}},c.styles=u`
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `,c);r([m({type:String})],a.prototype,"label",void 0);a=r([b("scb-sub-menu")],a);

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

@@ -0,0 +1,28 @@
+import{_ as h,b as u,g as f,h as a,y as _}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as s}from"../../vendor/decorate.js";(function(){try{var r=typeof globalThis<"u"?globalThis:window;if(!r.__scb_ce_guard_installed__){r.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(e,t,c){try{customElements.get(e)||i(e,t,c)}catch(l){var d=String(l||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var o,n=(o=class extends h{constructor(...i){super(...i),this.href="",this.dataHref="",this.disabled=!1,this.__onClick=e=>{if(e.defaultPrevented)return;if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}const t=(this.href||"").trim();if(t){if(t.startsWith("#")){typeof window<"u"&&(window.location.hash=t.slice(1));return}if((this.getAttribute("target")||"").trim()==="_blank"){window.open(t,"_blank","noopener,noreferrer");return}window.location.href=t}},this.__onKeyDown=e=>{if(!this.disabled){if(e.key==="Enter"){e.preventDefault(),this.click();return}e.key===" "&&e.preventDefault()}},this.__onKeyUp=e=>{this.disabled||e.key===" "&&(e.preventDefault(),this.click())}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.__onClick),this.addEventListener("keydown",this.__onKeyDown),this.addEventListener("keyup",this.__onKeyUp),this.__syncA11y()}disconnectedCallback(){this.removeEventListener("click",this.__onClick),this.removeEventListener("keydown",this.__onKeyDown),this.removeEventListener("keyup",this.__onKeyUp),super.disconnectedCallback()}updated(){this.__syncA11y()}__syncA11y(){const i=!!(this.href||"").trim();if(this.disabled){this.setAttribute("aria-disabled","true"),this.tabIndex=-1,this.removeAttribute("role");return}this.removeAttribute("aria-disabled"),this.tabIndex=0,this.setAttribute("role",i?"link":"button")}render(){return _`<span class="label"><slot></slot></span>`}},o.styles=u`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      outline: none;
+      position: relative;
+      overflow: hidden;
+    }
+
+    :host([disabled]) {
+      cursor: default;
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+    :host(:focus-visible) {
+      outline: none;
+    }
+
+    :host(:focus) {
+      outline: none;
+    }
+
+    .label {
+      pointer-events: none;
+    }
+  `,o);s([a({type:String})],n.prototype,"href",void 0);s([a({type:String,attribute:"data-href"})],n.prototype,"dataHref",void 0);s([a({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0);n=s([f("scb-nav-item")],n);