@luzmo/lucero 1.0.1-alpha.22 → 1.0.1-alpha.24

package/components/tabs/index.cjs

@@ -15,34 +15,18 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("lit"),C=require("../base-5nDSSNeT.cjs"),F=require("../focus-visible-D4BXb5RB.cjs"),W=require("../observe-slot-presence-bc9chhsi.cjs"),N=require("../observe-slot-text-ByPG1Lqw.cjs"),O=require("../random-id-CqvckpWe.cjs"),M=require("@lit-labs/observers/resize-controller.js"),l=require("lit/decorators.js"),w=require("lit/directives/class-map.js"),T=require("lit/directives/if-defined.js"),R=require("../sized-mixin-DcvJLFeo.cjs"),H=require("../focusable-CbVKgGfS.cjs"),X=require("../roving-tabindex-By_fCy_e.cjs"),A=require("@luzmo/icons");require("../action-button/index.cjs");require("../icon/index.cjs");/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const x=globalThis,_=x.ShadowRoot&&(x.ShadyCSS===void 0||x.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,j=Symbol(),L=new WeakMap;let Y=class{constructor(t,e,o){if(this._$cssResult$=!0,o!==j)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(_&&t===void 0){const o=e!==void 0&&e.length===1;o&&(t=L.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),o&&L.set(e,t))}return t}toString(){return this.cssText}};const K=s=>new Y(typeof s=="string"?s:s+"",void 0,j),V=(s,t)=>{if(_)s.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const e of t){const o=document.createElement("style"),i=x.litNonce;i!==void 0&&o.setAttribute("nonce",i),o.textContent=e.cssText,s.appendChild(o)}},U=_?s=>s:s=>s instanceof CSSStyleSheet?(t=>{let e="";for(const o of t.cssRules)e+=o.cssText;return K(e)})(s):s;/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const{is:J,defineProperty:G,getOwnPropertyDescriptor:Q,getOwnPropertyNames:Z,getOwnPropertySymbols:tt,getPrototypeOf:et}=Object,b=globalThis,I=b.trustedTypes,ot=I?I.emptyScript:"",k=b.reactiveElementPolyfillSupport,y=(s,t)=>s,$={toAttribute(s,t){switch(t){case Boolean:s=s?ot:null;break;case Object:case Array:s=s==null?s:JSON.stringify(s)}return s},fromAttribute(s,t){let e=s;switch(t){case Boolean:e=s!==null;break;case Number:e=s===null?null:Number(s);break;case Object:case Array:try{e=JSON.parse(s)}catch{e=null}}return e}},P=(s,t)=>!J(s,t),q={attribute:!0,type:String,converter:$,reflect:!1,hasChanged:P};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),b.litPropertyMetadata??(b.litPropertyMetadata=new WeakMap);class z extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=q){if(e.state&&(e.attribute=!1),this._$Ei(),this.elementProperties.set(t,e),!e.noAccessor){const o=Symbol(),i=this.getPropertyDescriptor(t,o,e);i!==void 0&&G(this.prototype,t,i)}}static getPropertyDescriptor(t,e,o){const{get:i,set:a}=Q(this.prototype,t)??{get(){return this[e]},set(r){this[e]=r}};return{get(){return i==null?void 0:i.call(this)},set(r){const c=i==null?void 0:i.call(this);a.call(this,r),this.requestUpdate(t,c,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??q}static _$Ei(){if(this.hasOwnProperty(y("elementProperties")))return;const t=et(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(y("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(y("properties"))){const e=this.properties,o=[...Z(e),...tt(e)];for(const i of o)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[o,i]of e)this.elementProperties.set(o,i)}this._$Eh=new Map;for(const[e,o]of this.elementProperties){const i=this._$Eu(e,o);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const o=new Set(t.flat(1/0).reverse());for(const i of o)e.unshift(U(i))}else t!==void 0&&e.push(U(t));return e}static _$Eu(t,e){const o=e.attribute;return o===!1?void 0:typeof o=="string"?o:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach(e=>e(this))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const o of e.keys())this.hasOwnProperty(o)&&(t.set(o,this[o]),delete this[o]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return V(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach(e=>{var o;return(o=e.hostConnected)==null?void 0:o.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach(e=>{var o;return(o=e.hostDisconnected)==null?void 0:o.call(e)})}attributeChangedCallback(t,e,o){this._$AK(t,o)}_$EC(t,e){var a;const o=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,o);if(i!==void 0&&o.reflect===!0){const r=(((a=o.converter)==null?void 0:a.toAttribute)!==void 0?o.converter:$).toAttribute(e,o.type);this._$Em=t,r==null?this.removeAttribute(i):this.setAttribute(i,r),this._$Em=null}}_$AK(t,e){var a;const o=this.constructor,i=o._$Eh.get(t);if(i!==void 0&&this._$Em!==i){const r=o.getPropertyOptions(i),c=typeof r.converter=="function"?{fromAttribute:r.converter}:((a=r.converter)==null?void 0:a.fromAttribute)!==void 0?r.converter:$;this._$Em=i,this[i]=c.fromAttribute(e,r.type),this._$Em=null}}requestUpdate(t,e,o){if(t!==void 0){if(o??(o=this.constructor.getPropertyOptions(t)),!(o.hasChanged??P)(this[t],e))return;this.P(t,e,o)}this.isUpdatePending===!1&&(this._$ES=this._$ET())}P(t,e,o){this._$AL.has(t)||this._$AL.set(t,e),o.reflect===!0&&this._$Em!==t&&(this._$Ej??(this._$Ej=new Set)).add(t)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var o;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[a,r]of this._$Ep)this[a]=r;this._$Ep=void 0}const i=this.constructor.elementProperties;if(i.size>0)for(const[a,r]of i)r.wrapped!==!0||this._$AL.has(a)||this[a]===void 0||this.P(a,this[a],r)}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(o=this._$EO)==null||o.forEach(i=>{var a;return(a=i.hostUpdate)==null?void 0:a.call(i)}),this.update(e)):this._$EU()}catch(i){throw t=!1,this._$EU(),i}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach(o=>{var i;return(i=o.hostUpdated)==null?void 0:i.call(o)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Ej&&(this._$Ej=this._$Ej.forEach(e=>this._$EC(e,this[e]))),this._$EU()}updated(t){}firstUpdated(t){}}z.elementStyles=[],z.shadowRootOptions={mode:"open"},z[y("elementProperties")]=new Map,z[y("finalized")]=new Map,k==null||k({ReactiveElement:z}),(b.reactiveElementVersions??(b.reactiveElementVersions=[])).push("2.0.4");/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const it={attribute:!0,type:String,converter:$,reflect:!1,hasChanged:P},st=(s=it,t,e)=>{const{kind:o,metadata:i}=e;let a=globalThis.litPropertyMetadata.get(i);if(a===void 0&&globalThis.litPropertyMetadata.set(i,a=new Map),a.set(e.name,s),o==="accessor"){const{name:r}=e;return{set(c){const f=t.get.call(this);t.set.call(this,c),this.requestUpdate(r,f,s)},init(c){return c!==void 0&&this.P(r,void 0,s),c}}}if(o==="setter"){const{name:r}=e;return function(c){const f=this[r];t.call(this,c),this.requestUpdate(r,f,s)}}throw Error("Unsupported decorator location: "+o)};function v(s){return(t,e)=>typeof e=="object"?st(s,t,e):((o,i,a)=>{const r=i.hasOwnProperty(a);return i.constructor.createProperty(a,r?{...o,wrapped:!0}:o),r?Object.getOwnPropertyDescriptor(i,a):void 0})(s,t,e)}const at=':host{font-family:var(--luzmo-tab-font-family, var(--luzmo-font-family));box-sizing:border-box;block-size:calc(var(--luzmo-tabs-item-height, var(--tabs-item-height)) - var(--luzmo-tabs-divider-size, var(--tabs-divider-size)));z-index:1;white-space:nowrap;color:var(--highcontrast-tabs-color, var(--luzmo-tabs-color, var(--tabs-color)));transition:color var(--luzmo-tabs-animation-duration, var(--tabs-animation-duration)) ease-out;cursor:pointer;outline:none;-webkit-text-decoration:none;text-decoration:none;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tabs-icon-size, var(--tabs-icon-size));inline-size:var(--luzmo-tabs-icon-size, var(--tabs-icon-size));margin-block-start:var(--luzmo-tabs-top-to-icon, var(--tabs-top-to-icon))}[name=icon]+#item-label{margin-inline-start:var(--luzmo-tabs-icon-to-text, var(--tabs-icon-to-text))}:host:before{content:"";box-sizing:border-box;block-size:calc(100% - var(--luzmo-tabs-top-to-text, var(--tabs-top-to-text)));inline-size:calc(100% + var(--luzmo-tabs-focus-indicator-gap, var(--tabs-focus-indicator-gap)) * 2);border:var(--luzmo-tabs-focus-indicator-width, var(--tabs-focus-indicator-width)) solid transparent;border-radius:var(--luzmo-tabs-focus-indicator-border-radius, var(--tabs-focus-indicator-border-radius));pointer-events:none;position:absolute;inset-block-start:calc(var(--luzmo-tabs-top-to-text, var(--tabs-top-to-text)) / 2);inset-inline-start:calc(var(--luzmo-tabs-focus-indicator-gap, var(--tabs-focus-indicator-gap)) * -1);inset-inline-end:calc(var(--luzmo-tabs-focus-indicator-gap, var(--tabs-focus-indicator-gap)) * -1)}@media (hover: hover){:host(:hover){color:var(--highcontrast-tabs-color-hover, var(--luzmo-tabs-color-hover, var(--tabs-color-hover)))}}:host([selected]){color:var(--highcontrast-tabs-color-selected, var(--luzmo-tabs-color-selected, var(--tabs-color-selected)))}:host([disabled]){cursor:default;color:var(--highcontrast-tabs-color-disabled, var(--luzmo-tabs-color-disabled, var(--tabs-color-disabled)))}:host([disabled]) #item-label{cursor:default}:host(:focus-visible){color:var(--highcontrast-tabs-color-key-focus, var(--luzmo-tabs-color-key-focus, var(--tabs-color-key-focus)))}:host(:focus-visible):before{border-color:var(--highcontrast-tabs-focus-indicator-color, var(--luzmo-tabs-focus-indicator-color, var(--tabs-focus-indicator-color)))}#item-label{cursor:pointer;vertical-align:top;font-family:var(--luzmo-tabs-font-family, var(--tabs-font-family));font-style:var(--luzmo-tabs-font-style, var(--tabs-font-style));font-size:var(--luzmo-tabs-font-size, var(--tabs-font-size));font-weight:var(--luzmo-tabs-font-weight, var(--tabs-font-weight));line-height:var(--luzmo-tabs-line-height, var(--tabs-line-height));margin-block-start:var(--luzmo-tabs-top-to-text, var(--tabs-top-to-text));margin-block-end:var(--luzmo-tabs-bottom-to-text, var(--tabs-bottom-to-text));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}:host{scroll-margin-inline:var(--luzmo-tabs-item-horizontal-spacing, var(--tabs-item-horizontal-spacing))}:host([disabled]){pointer-events:none}#item-label[hidden]{display:none}@media (forced-colors: active){:host:before{background-color:ButtonFace}:host ::slotted([slot=icon]){z-index:1;position:relative;color:inherit}#item-label{position:relative;z-index:1}:host([selected]){color:HighlightText}:host([selected]) ::slotted([slot=icon]){color:HighlightText}:host([selected]) #item-label{color:HighlightText}}:host([vertical]){display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto}:host([dir][vertical]) slot[name=icon]+#item-label{margin-inline-start:0;margin-block:calc(var(--luzmo-tabs-top-to-text, var(--tabs-top-to-text)) / 2) calc(var(--luzmo-tabs-bottom-to-text, var(--tabs-bottom-to-text)) / 2)}:host([vertical]) ::slotted([slot=icon]){margin-block-start:calc(var(--luzmo-tabs-top-to-icon, var(--tabs-top-to-icon)) / 2)}';var rt=Object.defineProperty,S=(s,t,e,o)=>{for(var i=void 0,a=s.length-1,r;a>=0;a--)(r=s[a])&&(i=r(t,e,i)||i);return i&&rt(t,e,i),i};class m extends F.FocusVisiblePolyfillMixin(N.ObserveSlotText(W.ObserveSlotPresence(C.LuzmoElement,'[slot="icon"]'),"")){constructor(){super(...arguments),this.disabled=!1,this.label="",this.selected=!1,this.vertical=!1,this.value=""}static get styles(){return[d.unsafeCSS(at)]}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return!!this.label||this.slotHasContent}render(){return d.html`
-      ${this.hasIcon?d.html` <slot name="icon"></slot> `:d.nothing}
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("lit"),b=require("lit/decorators/property.js"),g=require("../base-5nDSSNeT.cjs"),E=require("../focus-visible-D4BXb5RB.cjs"),I=require("../observe-slot-presence-CNltc0C0.cjs"),q=require("../observe-slot-text-CBMHpuIK.cjs"),S=require("../random-id-CqvckpWe.cjs"),_=require("@lit-labs/observers/intersection-controller.js"),k=require("@lit-labs/observers/resize-controller.js"),l=require("lit/decorators.js"),z=require("lit/directives/class-map.js"),x=require("lit/directives/if-defined.js"),C=require("../sized-mixin-DcvJLFeo.cjs"),A=require("../focusable-CbVKgGfS.cjs"),P=require("../roving-tabindex-By_fCy_e.cjs"),w=require("@luzmo/icons");require("../action-button/index.cjs");require("../icon/index.cjs");const B=':host{font-family:var(--luzmo-tab-font-family, var(--luzmo-font-family));box-sizing:border-box;block-size:calc(var(--luzmo-tabs-item-height, var(--tabs-item-height)) - var(--luzmo-tabs-divider-size, var(--tabs-divider-size)));z-index:1;white-space:nowrap;color:var(--highcontrast-tabs-color, var(--luzmo-tabs-color, var(--tabs-color)));transition:color var(--luzmo-tabs-animation-duration, var(--tabs-animation-duration)) ease-out;cursor:pointer;outline:none;-webkit-text-decoration:none;text-decoration:none;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tabs-icon-size, var(--tabs-icon-size));inline-size:var(--luzmo-tabs-icon-size, var(--tabs-icon-size));margin-block-start:var(--luzmo-tabs-top-to-icon, var(--tabs-top-to-icon))}[name=icon]+#item-label{margin-inline-start:var(--luzmo-tabs-icon-to-text, var(--tabs-icon-to-text))}:host:before{content:"";box-sizing:border-box;block-size:calc(100% - var(--luzmo-tabs-top-to-text, var(--tabs-top-to-text)));inline-size:calc(100% + var(--luzmo-tabs-focus-indicator-gap, var(--tabs-focus-indicator-gap)) * 2);border:var(--luzmo-tabs-focus-indicator-width, var(--tabs-focus-indicator-width)) solid transparent;border-radius:var(--luzmo-tabs-focus-indicator-border-radius, var(--tabs-focus-indicator-border-radius));pointer-events:none;position:absolute;inset-block-start:calc(var(--luzmo-tabs-top-to-text, var(--tabs-top-to-text)) / 2);inset-inline-start:calc(var(--luzmo-tabs-focus-indicator-gap, var(--tabs-focus-indicator-gap)) * -1);inset-inline-end:calc(var(--luzmo-tabs-focus-indicator-gap, var(--tabs-focus-indicator-gap)) * -1)}@media (hover: hover){:host(:hover){color:var(--highcontrast-tabs-color-hover, var(--luzmo-tabs-color-hover, var(--tabs-color-hover)))}}:host([selected]){color:var(--highcontrast-tabs-color-selected, var(--luzmo-tabs-color-selected, var(--tabs-color-selected)))}:host([disabled]){cursor:default;color:var(--highcontrast-tabs-color-disabled, var(--luzmo-tabs-color-disabled, var(--tabs-color-disabled)))}:host([disabled]) #item-label{cursor:default}:host(:focus-visible){color:var(--highcontrast-tabs-color-key-focus, var(--luzmo-tabs-color-key-focus, var(--tabs-color-key-focus)))}:host(:focus-visible):before{border-color:var(--highcontrast-tabs-focus-indicator-color, var(--luzmo-tabs-focus-indicator-color, var(--tabs-focus-indicator-color)))}#item-label{cursor:pointer;vertical-align:top;font-family:var(--luzmo-tabs-font-family, var(--tabs-font-family));font-style:var(--luzmo-tabs-font-style, var(--tabs-font-style));font-size:var(--luzmo-tabs-font-size, var(--tabs-font-size));font-weight:var(--luzmo-tabs-font-weight, var(--tabs-font-weight));line-height:var(--luzmo-tabs-line-height, var(--tabs-line-height));margin-block-start:var(--luzmo-tabs-top-to-text, var(--tabs-top-to-text));margin-block-end:var(--luzmo-tabs-bottom-to-text, var(--tabs-bottom-to-text));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}:host{scroll-margin-inline:var(--luzmo-tabs-item-horizontal-spacing, var(--tabs-item-horizontal-spacing))}:host([disabled]){pointer-events:none}#item-label[hidden]{display:none}@media (forced-colors: active){:host:before{background-color:ButtonFace}:host ::slotted([slot=icon]){z-index:1;position:relative;color:inherit}#item-label{position:relative;z-index:1}:host([selected]){color:HighlightText}:host([selected]) ::slotted([slot=icon]){color:HighlightText}:host([selected]) #item-label{color:HighlightText}}:host([vertical]){display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto}:host([dir][vertical]) slot[name=icon]+#item-label{margin-inline-start:0;margin-block:calc(var(--luzmo-tabs-top-to-text, var(--tabs-top-to-text)) / 2) calc(var(--luzmo-tabs-bottom-to-text, var(--tabs-bottom-to-text)) / 2)}:host([vertical]) ::slotted([slot=icon]){margin-block-start:calc(var(--luzmo-tabs-top-to-icon, var(--tabs-top-to-icon)) / 2)}';var M=Object.defineProperty,p=(r,t,o,i)=>{for(var e=void 0,a=r.length-1,s;a>=0;a--)(s=r[a])&&(e=s(t,o,e)||e);return e&&M(t,o,e),e};class h extends E.FocusVisiblePolyfillMixin(q.ObserveSlotText(I.ObserveSlotPresence(g.LuzmoElement,'[slot="icon"]'),"")){constructor(){super(...arguments),this.disabled=!1,this.label="",this.selected=!1,this.vertical=!1,this.value=""}static get styles(){return[c.unsafeCSS(B)]}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return!!this.label||this.slotHasContent}render(){return c.html`
+      ${this.hasIcon?c.html` <slot name="icon"></slot> `:c.nothing}
       <label id="item-label" ?hidden=${!this.hasLabel}>
-        ${this.slotHasContent?d.nothing:this.label}
+        ${this.slotHasContent?c.nothing:this.label}
         <slot>${this.label}</slot>
       </label>
-    `}firstUpdated(t){super.firstUpdated(t),this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id=`luzmo-tab-${O.randomID()}`)}updated(t){super.updated(t),t.has("selected")&&(this.setAttribute("aria-selected",this.selected?"true":"false"),this.setAttribute("tabindex",this.selected?"0":"-1")),t.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}S([v({type:Boolean,reflect:!0})],m.prototype,"disabled");S([v({reflect:!0})],m.prototype,"label");S([v({type:Boolean,reflect:!0})],m.prototype,"selected");S([v({type:Boolean,reflect:!0})],m.prototype,"vertical");S([v({type:String,reflect:!0})],m.prototype,"value");const lt=":host{display:inline-flex;font-family:var(--luzmo-tab-panel-font-family, var(--luzmo-font-family))}:host(:not([selected])){display:none}:host(:focus-visible){outline:var(--luzmo-tab-panel-indicator-color, var(--luzmo-indicator-color)) solid var(--luzmo-tab-panel-indicator-width, var(--luzmo-indicator-width))}";var nt=Object.defineProperty,D=(s,t,e,o)=>{for(var i=void 0,a=s.length-1,r;a>=0;a--)(r=s[a])&&(i=r(t,e,i)||i);return i&&nt(t,e,i),i};class E extends C.LuzmoElement{constructor(){super(...arguments),this.selected=!1,this.value=""}static get styles(){return[d.unsafeCSS(lt)]}handleFocusin(){this.removeAttribute("tabindex")}handleFocusout(){this.tabIndex=this.selected?0:-1}render(){return d.html`
+    `}firstUpdated(t){super.firstUpdated(t),this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id=`luzmo-tab-${S.randomID()}`)}updated(t){super.updated(t),t.has("selected")&&(this.setAttribute("aria-selected",this.selected?"true":"false"),this.setAttribute("tabindex",this.selected?"0":"-1")),t.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}p([b.property({type:Boolean,reflect:!0})],h.prototype,"disabled");p([b.property({reflect:!0})],h.prototype,"label");p([b.property({type:Boolean,reflect:!0})],h.prototype,"selected");p([b.property({type:Boolean,reflect:!0})],h.prototype,"vertical");p([b.property({type:String,reflect:!0})],h.prototype,"value");const j=":host{display:inline-flex;font-family:var(--luzmo-tab-panel-font-family, var(--luzmo-font-family))}:host(:not([selected])){display:none}:host(:focus-visible){outline:var(--luzmo-tab-panel-indicator-color, var(--luzmo-indicator-color)) solid var(--luzmo-tab-panel-indicator-width, var(--luzmo-indicator-width))}";var D=Object.defineProperty,T=(r,t,o,i)=>{for(var e=void 0,a=r.length-1,s;a>=0;a--)(s=r[a])&&(e=s(t,o,e)||e);return e&&D(t,o,e),e};class f extends g.LuzmoElement{constructor(){super(...arguments),this.selected=!1,this.value=""}static get styles(){return[c.unsafeCSS(j)]}handleFocusin(){this.removeAttribute("tabindex")}handleFocusout(){this.tabIndex=this.selected?0:-1}render(){return c.html`
       <slot
         @focusin=${this.handleFocusin}
         @focusout=${this.handleFocusout}
       ></slot>
-    `}firstUpdated(){this.slot="tab-panel",this.setAttribute("role","tabpanel"),this.tabIndex=0,this.hasAttribute("id")||(this.id=`luzmo-tab-panel-${O.randomID()}`)}updated(t){t.has("selected")&&(this.selected?(this.removeAttribute("aria-hidden"),this.tabIndex=0):(this.setAttribute("aria-hidden","true"),this.tabIndex=-1))}}D([v({type:Boolean,reflect:!0})],E.prototype,"selected");D([v({type:String,reflect:!0})],E.prototype,"value");/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */class ct{constructor(t,{target:e,config:o,callback:i,skipInitial:a}){this.t=new Set,this.o=!1,this.i=!1,this.h=t,e!==null&&this.t.add(e??t),this.o=a??this.o,this.callback=i,window.IntersectionObserver?(this.u=new IntersectionObserver(r=>{const c=this.i;this.i=!1,this.o&&c||(this.handleChanges(r),this.h.requestUpdate())},o),t.addController(this)):console.warn("IntersectionController error: browser does not support IntersectionObserver.")}handleChanges(t){var e;this.value=(e=this.callback)==null?void 0:e.call(this,t,this.u)}hostConnected(){for(const t of this.t)this.observe(t)}hostDisconnected(){this.disconnect()}async hostUpdated(){const t=this.u.takeRecords();t.length&&this.handleChanges(t)}observe(t){this.t.add(t),this.u.observe(t),this.i=!0}unobserve(t){this.t.delete(t),this.u.unobserve(t)}disconnect(){this.u.disconnect()}}const B="#list{--tabs-item-height: calc( var(--luzmo-component-height) + var(--luzmo-spacing-5) );--tabs-item-horizontal-spacing: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-3) );--tabs-item-vertical-spacing: var(--luzmo-spacing-2);--tabs-start-to-edge: var(--luzmo-spacing-4);--tabs-top-to-text: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--tabs-bottom-to-text: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--tabs-icon-size: var(--luzmo-icon-size-s);--tabs-icon-to-text: var(--luzmo-spacing-3);--tabs-top-to-icon: var(--luzmo-spacing-4);--tabs-focus-indicator-gap: var(--luzmo-spacing-3);--tabs-font-size: var(--luzmo-font-size)}:host([size=s]) #list{--tabs-item-height: calc( var(--luzmo-component-height-s) + var(--luzmo-spacing-4) );--tabs-item-horizontal-spacing: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--tabs-item-vertical-spacing: var(--luzmo-spacing-2);--tabs-start-to-edge: var(--luzmo-spacing-4);--tabs-top-to-text: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--tabs-bottom-to-text: var(--luzmo-spacing-4);--tabs-icon-size: var(--luzmo-icon-size-xs);--tabs-icon-to-text: var(--luzmo-spacing-3);--tabs-top-to-icon: var(--luzmo-spacing-4);--tabs-focus-indicator-gap: var(--luzmo-spacing-3);--tabs-font-size: var(--luzmo-font-size-s)}:host([size=l]) #list{--tabs-item-height: calc( var(--luzmo-component-height-l) + var(--luzmo-spacing-5) );--tabs-item-horizontal-spacing: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-4) );--tabs-item-vertical-spacing: var(--luzmo-spacing-2);--tabs-start-to-edge: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--tabs-top-to-text: calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--tabs-bottom-to-text: calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--tabs-icon-size: var(--luzmo-icon-size-m);--tabs-icon-to-text: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tabs-top-to-icon: var(--luzmo-spacing-5);--tabs-focus-indicator-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tabs-font-size: var(--luzmo-font-size-l)}:host([size=xl]) #list{--tabs-item-height: calc( var(--luzmo-component-height-xl) + var(--luzmo-spacing-5) );--tabs-item-horizontal-spacing: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-4) );--tabs-item-vertical-spacing: var(--luzmo-spacing-2);--tabs-start-to-edge: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--tabs-top-to-text: calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--tabs-bottom-to-text: calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--tabs-icon-size: var(--luzmo-icon-size-l);--tabs-icon-to-text: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tabs-top-to-icon: var(--luzmo-spacing-5);--tabs-focus-indicator-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tabs-font-size: var(--luzmo-font-size-xl)}:host([compact]) #list{--luzmo-tabs-item-height: var( --luzmo-tabs-item-height-compact, var(--luzmo-component-height) );--luzmo-tabs-top-to-text: var( --luzmo-tabs-top-to-text-compact, calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1)) );--luzmo-tabs-bottom-to-text: var( --luzmo-tabs-bottom-to-text-compact, calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1)) );--luzmo-tabs-top-to-icon: var( --luzmo-tabs-top-to-icon-compact, var(--luzmo-spacing-2) )}:host([size=s][compact]) #list{--luzmo-tabs-item-height: var( --luzmo-tabs-item-height-compact, var(--luzmo-component-height-s) );--luzmo-tabs-top-to-text: var( --luzmo-tabs-top-to-text-compact, var(--luzmo-spacing-2) );--luzmo-tabs-bottom-to-text: var( --luzmo-tabs-bottom-to-text-compact, var(--luzmo-spacing-2) );--luzmo-tabs-top-to-icon: var( --luzmo-tabs-top-to-icon-compact, var(--luzmo-spacing-1) )}:host([size=l][compact]) #list{--luzmo-tabs-item-height: var( --luzmo-tabs-item-height-compact, var(--luzmo-component-height-l) );--luzmo-tabs-top-to-text: var( --luzmo-tabs-top-to-text-compact, calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1)) );--luzmo-tabs-bottom-to-text: var( --luzmo-tabs-bottom-to-text-compact, calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1)) );--luzmo-tabs-top-to-icon: var( --luzmo-tabs-top-to-icon-compact, calc(var(--luzmo-spacing-3)) )}:host([size=xl][compact]) #list{--luzmo-tabs-item-height: var( --luzmo-tabs-item-height-compact, var(--luzmo-component-height-xl) );--luzmo-tabs-top-to-text: var( --luzmo-tabs-top-to-text-compact, var(--luzmo-spacing-4) );--luzmo-tabs-bottom-to-text: var( --luzmo-tabs-bottom-to-text-compact, var(--luzmo-spacing-4) );--luzmo-tabs-top-to-icon: var( --luzmo-tabs-top-to-icon-compact, calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1)) )}",dt="#list{--tabs-color: var(--luzmo-font-color);--tabs-color-selected: var(--luzmo-font-color-down);--tabs-color-hover: var(--luzmo-font-color-hover);--tabs-color-key-focus: var(--luzmo-font-color-focus);--tabs-color-disabled: var(--luzmo-disabled-color);--tabs-font-family: var(--luzmo-font-family);--tabs-font-style: var(--luzmo-font-style);--tabs-font-size: var(--luzmo-font-size);--tabs-line-height: var(--luzmo-line-height);--tabs-focus-indicator-width: var(--luzmo-indicator-width);--tabs-focus-indicator-border-radius: var(--luzmo-border-radius);--tabs-focus-indicator-color: var(--luzmo-indicator-color);--tabs-selection-indicator-color: var(--luzmo-font-color-down);--tabs-list-background-direction: top;--tabs-divider-size: 2px;--tabs-divider-border-radius: 1px;--tabs-animation-duration: var(--luzmo-animation-duration);--tabs-animation-ease: ease-in-out}:host([emphasized]) #list{--luzmo-tabs-color-selected: var( --luzmo-tabs-color-selected-emphasized, var(--luzmo-primary) );--luzmo-tabs-color-hover: var( --luzmo-tabs-color-hover-emphasized, var(--luzmo-primary-hover) );--luzmo-tabs-color-key-focus: var( --luzmo-tabs-color-key-focus-emphasized, var(--luzmo-primary-focus) );--luzmo-tabs-selection-indicator-color: var( --luzmo-tabs-selection-indicator-color-emphasized, var(--luzmo-primary-down) )}:host([direction^=vertical]) #list{--luzmo-tabs-list-background-direction: var( --luzmo-tabs-list-background-direction-vertical, right )}:host([direction^=vertical-right]) #list{--luzmo-tabs-list-background-direction: var( --luzmo-tabs-list-background-direction-vertical-right, left )}:host([direction^=vertical]) #list:dir(rtl),:host([dir=rtl][direction^=vertical]) #list{--luzmo-tabs-list-background-direction: var( --luzmo-tabs-list-background-direction-vertical, left )}:host([direction^=vertical-right]) #list:dir(rtl),:host([dir=rtl][direction^=vertical-right]) #list{--luzmo-tabs-list-background-direction: var( --luzmo-tabs-list-background-direction-vertical, right )}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--luzmo-tabs-list-background-direction, var(--tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color, var(--luzmo-tabs-divider-background-color, var(--tabs-divider-background-color))) 0 var(--luzmo-tabs-divider-size, var(--tabs-divider-size)),transparent var(--luzmo-tabs-divider-size, var(--tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected, var(--luzmo-tabs-color-selected, var(--tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled, var(--luzmo-tabs-color-disabled, var(--tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color, var(--luzmo-tabs-selection-indicator-color, var(--tabs-selection-indicator-color)));z-index:0;transition:transform var(--luzmo-tabs-animation-duration, var(--tabs-animation-duration)) var(--luzmo-tabs-animation-ease, var(--tabs-animation-ease));transform-origin:0 0;border-radius:var(--luzmo-tabs-divider-border-radius, var(--tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) ::slotted(:not(:first-child)){margin-inline-start:var(--luzmo-tabs-item-horizontal-spacing, var(--tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--luzmo-tabs-divider-size, var(--tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:initial;align-items:end}:host([quiet]) #list{background:none;border-color:transparent;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--luzmo-tabs-start-to-item-quiet)}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:transparent}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--luzmo-tabs-item-height, var(--tabs-item-height));line-height:var(--luzmo-tabs-item-height, var(--tabs-item-height));margin-block-end:var(--luzmo-tabs-item-vertical-spacing, var(--tabs-item-vertical-spacing));margin-inline-start:var(--luzmo-tabs-start-to-edge, var(--tabs-start-to-edge));margin-inline-end:var(--luzmo-tabs-start-to-edge, var(--tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--luzmo-tabs-focus-indicator-gap, var(--tabs-focus-indicator-gap)) * -1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--luzmo-tabs-divider-size, var(--tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors: active){#list{--highcontrast-tabs-divider-background-color: var(--luzmo-border-color);--highcontrast-tabs-selection-indicator-color: Highlight;--highcontrast-tabs-focus-indicator-color: CanvasText;--highcontrast-tabs-focus-indicator-background-color: Highlight;--highcontrast-tabs-color: ButtonText;--highcontrast-tabs-color-hover: ButtonText;--highcontrast-tabs-color-selected: HighlightText;--highcontrast-tabs-color-key-focus: ButtonText;--highcontrast-tabs-color-disabled: GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--luzmo-tabs-list-background-direction, var(--tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color, var(--luzmo-tabs-divider-background-color, var(--tabs-divider-background-color))) 0 var(--luzmo-tabs-divider-size, var(--tabs-divider-size)),transparent var(--luzmo-tabs-divider-size, var(--tabs-divider-size)))}}#list{--tabs-font-weight: var(--luzmo-font-weight);--tabs-divider-background-color: var(--luzmo-border-color)}:host{display:grid;grid-template-columns:100%;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline:auto 0}#list{justify-content:var(--luzmo-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(--luzmo-tabs-color-disabled, var(--tabs-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--luzmo-tabs-color-disabled, var(--tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{scrollbar-width:none;overflow:auto hidden}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}";var ht=Object.defineProperty,h=(s,t,e,o)=>{for(var i=void 0,a=s.length-1,r;a>=0;a--)(r=s[a])&&(i=r(t,e,i)||i);return i&&ht(t,e,i),i};const g={baseSize:100,noSelectionStyle:"transform: translateX(0px) scaleX(0) scaleY(0)",transformX(s,t){const e=t/this.baseSize;return`transform: translateX(${s}px) scaleX(${e});`},transformY(s,t){const e=t/this.baseSize;return`transform: translateY(${s}px) scaleY(${e});`},baseStyles(){return d.css`
+    `}firstUpdated(){this.slot="tab-panel",this.setAttribute("role","tabpanel"),this.tabIndex=0,this.hasAttribute("id")||(this.id=`luzmo-tab-panel-${S.randomID()}`)}updated(t){t.has("selected")&&(this.selected?(this.removeAttribute("aria-hidden"),this.tabIndex=0):(this.setAttribute("aria-hidden","true"),this.tabIndex=-1))}}T([b.property({type:Boolean,reflect:!0})],f.prototype,"selected");T([b.property({type:String,reflect:!0})],f.prototype,"value");const L="#list{--tabs-item-height: calc( var(--luzmo-component-height) + var(--luzmo-spacing-5) );--tabs-item-horizontal-spacing: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-3) );--tabs-item-vertical-spacing: var(--luzmo-spacing-2);--tabs-start-to-edge: var(--luzmo-spacing-4);--tabs-top-to-text: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--tabs-bottom-to-text: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--tabs-icon-size: var(--luzmo-icon-size-s);--tabs-icon-to-text: var(--luzmo-spacing-3);--tabs-top-to-icon: var(--luzmo-spacing-4);--tabs-focus-indicator-gap: var(--luzmo-spacing-3);--tabs-font-size: var(--luzmo-font-size)}:host([size=s]) #list{--tabs-item-height: calc( var(--luzmo-component-height-s) + var(--luzmo-spacing-4) );--tabs-item-horizontal-spacing: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--tabs-item-vertical-spacing: var(--luzmo-spacing-2);--tabs-start-to-edge: var(--luzmo-spacing-4);--tabs-top-to-text: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--tabs-bottom-to-text: var(--luzmo-spacing-4);--tabs-icon-size: var(--luzmo-icon-size-xs);--tabs-icon-to-text: var(--luzmo-spacing-3);--tabs-top-to-icon: var(--luzmo-spacing-4);--tabs-focus-indicator-gap: var(--luzmo-spacing-3);--tabs-font-size: var(--luzmo-font-size-s)}:host([size=l]) #list{--tabs-item-height: calc( var(--luzmo-component-height-l) + var(--luzmo-spacing-5) );--tabs-item-horizontal-spacing: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-4) );--tabs-item-vertical-spacing: var(--luzmo-spacing-2);--tabs-start-to-edge: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--tabs-top-to-text: calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--tabs-bottom-to-text: calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--tabs-icon-size: var(--luzmo-icon-size-m);--tabs-icon-to-text: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tabs-top-to-icon: var(--luzmo-spacing-5);--tabs-focus-indicator-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tabs-font-size: var(--luzmo-font-size-l)}:host([size=xl]) #list{--tabs-item-height: calc( var(--luzmo-component-height-xl) + var(--luzmo-spacing-5) );--tabs-item-horizontal-spacing: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-4) );--tabs-item-vertical-spacing: var(--luzmo-spacing-2);--tabs-start-to-edge: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--tabs-top-to-text: calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--tabs-bottom-to-text: calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--tabs-icon-size: var(--luzmo-icon-size-l);--tabs-icon-to-text: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tabs-top-to-icon: var(--luzmo-spacing-5);--tabs-focus-indicator-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tabs-font-size: var(--luzmo-font-size-xl)}:host([compact]) #list{--luzmo-tabs-item-height: var( --luzmo-tabs-item-height-compact, var(--luzmo-component-height) );--luzmo-tabs-top-to-text: var( --luzmo-tabs-top-to-text-compact, calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1)) );--luzmo-tabs-bottom-to-text: var( --luzmo-tabs-bottom-to-text-compact, calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1)) );--luzmo-tabs-top-to-icon: var( --luzmo-tabs-top-to-icon-compact, var(--luzmo-spacing-2) )}:host([size=s][compact]) #list{--luzmo-tabs-item-height: var( --luzmo-tabs-item-height-compact, var(--luzmo-component-height-s) );--luzmo-tabs-top-to-text: var( --luzmo-tabs-top-to-text-compact, var(--luzmo-spacing-2) );--luzmo-tabs-bottom-to-text: var( --luzmo-tabs-bottom-to-text-compact, var(--luzmo-spacing-2) );--luzmo-tabs-top-to-icon: var( --luzmo-tabs-top-to-icon-compact, var(--luzmo-spacing-1) )}:host([size=l][compact]) #list{--luzmo-tabs-item-height: var( --luzmo-tabs-item-height-compact, var(--luzmo-component-height-l) );--luzmo-tabs-top-to-text: var( --luzmo-tabs-top-to-text-compact, calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1)) );--luzmo-tabs-bottom-to-text: var( --luzmo-tabs-bottom-to-text-compact, calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1)) );--luzmo-tabs-top-to-icon: var( --luzmo-tabs-top-to-icon-compact, calc(var(--luzmo-spacing-3)) )}:host([size=xl][compact]) #list{--luzmo-tabs-item-height: var( --luzmo-tabs-item-height-compact, var(--luzmo-component-height-xl) );--luzmo-tabs-top-to-text: var( --luzmo-tabs-top-to-text-compact, var(--luzmo-spacing-4) );--luzmo-tabs-bottom-to-text: var( --luzmo-tabs-bottom-to-text-compact, var(--luzmo-spacing-4) );--luzmo-tabs-top-to-icon: var( --luzmo-tabs-top-to-icon-compact, calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1)) )}",F="#list{--tabs-color: var(--luzmo-font-color);--tabs-color-selected: var(--luzmo-font-color-down);--tabs-color-hover: var(--luzmo-font-color-hover);--tabs-color-key-focus: var(--luzmo-font-color-focus);--tabs-color-disabled: var(--luzmo-disabled-color);--tabs-font-family: var(--luzmo-font-family);--tabs-font-style: var(--luzmo-font-style);--tabs-font-size: var(--luzmo-font-size);--tabs-line-height: var(--luzmo-line-height);--tabs-focus-indicator-width: var(--luzmo-indicator-width);--tabs-focus-indicator-border-radius: var(--luzmo-border-radius);--tabs-focus-indicator-color: var(--luzmo-indicator-color);--tabs-selection-indicator-color: var(--luzmo-font-color-down);--tabs-list-background-direction: top;--tabs-divider-size: 2px;--tabs-divider-border-radius: 1px;--tabs-animation-duration: var(--luzmo-animation-duration);--tabs-animation-ease: ease-in-out}:host([emphasized]) #list{--luzmo-tabs-color-selected: var( --luzmo-tabs-color-selected-emphasized, var(--luzmo-primary) );--luzmo-tabs-color-hover: var( --luzmo-tabs-color-hover-emphasized, var(--luzmo-primary-hover) );--luzmo-tabs-color-key-focus: var( --luzmo-tabs-color-key-focus-emphasized, var(--luzmo-primary-focus) );--luzmo-tabs-selection-indicator-color: var( --luzmo-tabs-selection-indicator-color-emphasized, var(--luzmo-primary-down) )}:host([direction^=vertical]) #list{--luzmo-tabs-list-background-direction: var( --luzmo-tabs-list-background-direction-vertical, right )}:host([direction^=vertical-right]) #list{--luzmo-tabs-list-background-direction: var( --luzmo-tabs-list-background-direction-vertical-right, left )}:host([direction^=vertical]) #list:dir(rtl),:host([dir=rtl][direction^=vertical]) #list{--luzmo-tabs-list-background-direction: var( --luzmo-tabs-list-background-direction-vertical, left )}:host([direction^=vertical-right]) #list:dir(rtl),:host([dir=rtl][direction^=vertical-right]) #list{--luzmo-tabs-list-background-direction: var( --luzmo-tabs-list-background-direction-vertical, right )}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--luzmo-tabs-list-background-direction, var(--tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color, var(--luzmo-tabs-divider-background-color, var(--tabs-divider-background-color))) 0 var(--luzmo-tabs-divider-size, var(--tabs-divider-size)),transparent var(--luzmo-tabs-divider-size, var(--tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected, var(--luzmo-tabs-color-selected, var(--tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled, var(--luzmo-tabs-color-disabled, var(--tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color, var(--luzmo-tabs-selection-indicator-color, var(--tabs-selection-indicator-color)));z-index:0;transition:transform var(--luzmo-tabs-animation-duration, var(--tabs-animation-duration)) var(--luzmo-tabs-animation-ease, var(--tabs-animation-ease));transform-origin:0 0;border-radius:var(--luzmo-tabs-divider-border-radius, var(--tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) ::slotted(:not(:first-child)){margin-inline-start:var(--luzmo-tabs-item-horizontal-spacing, var(--tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--luzmo-tabs-divider-size, var(--tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:initial;align-items:end}:host([quiet]) #list{background:none;border-color:transparent;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--luzmo-tabs-start-to-item-quiet)}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:transparent}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--luzmo-tabs-item-height, var(--tabs-item-height));line-height:var(--luzmo-tabs-item-height, var(--tabs-item-height));margin-block-end:var(--luzmo-tabs-item-vertical-spacing, var(--tabs-item-vertical-spacing));margin-inline-start:var(--luzmo-tabs-start-to-edge, var(--tabs-start-to-edge));margin-inline-end:var(--luzmo-tabs-start-to-edge, var(--tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--luzmo-tabs-focus-indicator-gap, var(--tabs-focus-indicator-gap)) * -1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--luzmo-tabs-divider-size, var(--tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors: active){#list{--highcontrast-tabs-divider-background-color: var(--luzmo-border-color);--highcontrast-tabs-selection-indicator-color: Highlight;--highcontrast-tabs-focus-indicator-color: CanvasText;--highcontrast-tabs-focus-indicator-background-color: Highlight;--highcontrast-tabs-color: ButtonText;--highcontrast-tabs-color-hover: ButtonText;--highcontrast-tabs-color-selected: HighlightText;--highcontrast-tabs-color-key-focus: ButtonText;--highcontrast-tabs-color-disabled: GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--luzmo-tabs-list-background-direction, var(--tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color, var(--luzmo-tabs-divider-background-color, var(--tabs-divider-background-color))) 0 var(--luzmo-tabs-divider-size, var(--tabs-divider-size)),transparent var(--luzmo-tabs-divider-size, var(--tabs-divider-size)))}}#list{--tabs-font-weight: var(--luzmo-font-weight);--tabs-divider-background-color: var(--luzmo-border-color)}:host{display:grid;grid-template-columns:100%;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline:auto 0}#list{justify-content:var(--luzmo-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(--luzmo-tabs-color-disabled, var(--tabs-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--luzmo-tabs-color-disabled, var(--tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{scrollbar-width:none;overflow:auto hidden}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}";var R=Object.defineProperty,u=(r,t,o,i)=>{for(var e=void 0,a=r.length-1,s;a>=0;a--)(s=r[a])&&(e=s(t,o,e)||e);return e&&R(t,o,e),e};const m={baseSize:100,noSelectionStyle:"transform: translateX(0px) scaleX(0) scaleY(0)",transformX(r,t){const o=t/this.baseSize;return`transform: translateX(${r}px) scaleX(${o});`},transformY(r,t){const o=t/this.baseSize;return`transform: translateY(${r}px) scaleY(${o});`},baseStyles(){return c.css`
       :host([direction='vertical-right']) #selection-indicator,
       :host([direction='vertical']) #selection-indicator {
         height: ${this.baseSize}px;
@@ -50,10 +34,10 @@
       :host([dir][direction='horizontal']) #selection-indicator {
         width: ${this.baseSize}px;
       }
-    `}};function ut(s,t,e,o){const i=s+(t==="rtl"?-1:1),a=e[i],r=o.scrollLeft+o.offsetWidth;return a?a.offsetLeft-o.offsetWidth:r}function bt(s,t,e,o){const i=s+(t==="rtl"?1:-1),a=e[i],r=t==="rtl"?-o.offsetWidth:0;return a?a.offsetLeft+a.offsetWidth:r}class n extends R.SizedMixin(H.Focusable,{noDefaultSize:!0}){constructor(){super(),this.auto=!1,this.compact=!1,this.direction="horizontal",this.emphasized=!1,this.label="",this.enableTabsScroll=!1,this.quiet=!1,this.selectionIndicatorStyle=g.noSelectionStyle,this.shouldAnimate=!1,this.selected="",this._tabs=[],this.resizeController=new M.ResizeController(this,{callback:()=>{this.updateSelectionIndicator()}}),this.rovingTabindexController=new X.RovingTabindexController(this,{focusInIndex:t=>{let e=0;return t.find((i,a)=>{const r=this.selected?i.value===this.selected:!i.disabled;return e=a,r})?e:-1},direction:()=>"both",elementEnterAction:t=>{this.auto&&(this.shouldAnimate=!0,this.selectTarget(t))},elements:()=>this.tabs,isFocusableElement:t=>!this.disabled&&!t.disabled,listenerScope:()=>this.tabList}),this.onTabsScroll=()=>{this.dispatchEvent(new Event("luzmo-tabs-scroll",{bubbles:!0,composed:!0}))},this.onClick=t=>{if(this.disabled)return;const e=t.composedPath().find(o=>o.parentElement===this);!e||e.disabled||(this.shouldAnimate=!0,this.selectTarget(e))},this.onKeyDown=t=>{if(t.code==="Enter"||t.code==="Space"){t.preventDefault();const e=t.target;e&&this.selectTarget(e)}},this.updateCheckedState=()=>{if(this.tabs.forEach(t=>{t.removeAttribute("selected")}),this.selected){const t=this.tabs.find(e=>e.value===this.selected);t?t.selected=!0:this.selected=""}else{const t=this.tabs[0];t&&t.setAttribute("tabindex","0")}this.updateSelectionIndicator()},this.updateSelectionIndicator=async()=>{const t=this.tabs.find(i=>i.selected);if(!t){this.selectionIndicatorStyle=g.noSelectionStyle;return}await Promise.all([t.updateComplete,document.fonts?document.fonts.ready:Promise.resolve()]);const{width:e,height:o}=t.getBoundingClientRect();this.selectionIndicatorStyle=this.direction==="horizontal"?g.transformX(t.offsetLeft,e):g.transformY(t.offsetTop,o)},new ct(this,{config:{root:null,rootMargin:"0px",threshold:[0,1]},callback:()=>{this.updateSelectionIndicator()}})}static get styles(){return[d.unsafeCSS(B),d.unsafeCSS(dt),g.baseStyles()]}set tabs(t){t!==this.tabs&&(this._tabs.forEach(e=>{this.resizeController.unobserve(e)}),t.forEach(e=>{this.resizeController.observe(e)}),this._tabs=t,this.rovingTabindexController.clearElementCache())}get tabs(){return this._tabs}get focusElement(){return this.rovingTabindexController.focusInElement||this}limitDeltaToInterval(t,e){return o=>o<t?t:o>e?e:o}scrollTabs(t,e="smooth"){var f;if(t===0)return;const{scrollLeft:o,clientWidth:i,scrollWidth:a}=this.tabList,r=a-i-Math.abs(o),c=this.dir==="ltr"?this.limitDeltaToInterval(-o,r):this.limitDeltaToInterval(-r,Math.abs(o));(f=this.tabList)==null||f.scrollBy({left:c(t),top:0,behavior:e})}get scrollState(){if(this.tabList){const{scrollLeft:t,clientWidth:e,scrollWidth:o}=this.tabList,i=Math.abs(t)>0,a=Math.ceil(Math.abs(t))<o-e;return{canScrollLeft:this.dir==="ltr"?i:a,canScrollRight:this.dir==="ltr"?a:i}}return{}}async getUpdateComplete(){const t=await super.getUpdateComplete(),o=[...this.children].map(i=>i.updateComplete!==void 0?i.updateComplete:Promise.resolve(!0));return await Promise.all(o),t}getNecessaryAutoScroll(t){const e=this.tabs[t],o=e.offsetLeft+e.offsetWidth,i=this.tabList.scrollLeft+this.tabList.offsetWidth,a=e.offsetLeft,r=this.tabList.scrollLeft;return o>i?ut(t,this.dir,this.tabs,this.tabList):a<r?bt(t,this.dir,this.tabs,this.tabList):-1}async scrollToSelection(){if(!this.enableTabsScroll||!this.selected)return;await this.updateComplete;const t=this.tabs.findIndex(e=>e.value===this.selected);if(t!==-1&&this.tabList){const e=this.getNecessaryAutoScroll(t);e!==-1&&this.tabList.scrollTo({left:e})}}updated(t){super.updated(t),t.has("selected")&&this.scrollToSelection()}managePanels({target:t}){t.assignedElements().map(o=>{const{value:i,id:a}=o,r=this.querySelector(`[role="tab"][value="${i}"]`);r&&(r.setAttribute("aria-controls",a),o.setAttribute("aria-labelledby",r.id)),o.selected=i===this.selected})}render(){return d.html`
+    `}};function U(r,t,o,i){const e=r+(t==="rtl"?-1:1),a=o[e],s=i.scrollLeft+i.offsetWidth;return a?a.offsetLeft-i.offsetWidth:s}function W(r,t,o,i){const e=r+(t==="rtl"?1:-1),a=o[e],s=t==="rtl"?-i.offsetWidth:0;return a?a.offsetLeft+a.offsetWidth:s}class n extends C.SizedMixin(A.Focusable,{noDefaultSize:!0}){constructor(){super(),this.auto=!1,this.compact=!1,this.direction="horizontal",this.emphasized=!1,this.label="",this.enableTabsScroll=!1,this.quiet=!1,this.selectionIndicatorStyle=m.noSelectionStyle,this.shouldAnimate=!1,this.selected="",this._tabs=[],this.resizeController=new k.ResizeController(this,{callback:()=>{this.updateSelectionIndicator()}}),this.rovingTabindexController=new P.RovingTabindexController(this,{focusInIndex:t=>{let o=0;return t.find((e,a)=>{const s=this.selected?e.value===this.selected:!e.disabled;return o=a,s})?o:-1},direction:()=>"both",elementEnterAction:t=>{this.auto&&(this.shouldAnimate=!0,this.selectTarget(t))},elements:()=>this.tabs,isFocusableElement:t=>!this.disabled&&!t.disabled,listenerScope:()=>this.tabList}),this.onTabsScroll=()=>{this.dispatchEvent(new Event("luzmo-tabs-scroll",{bubbles:!0,composed:!0}))},this.onClick=t=>{if(this.disabled)return;const o=t.composedPath().find(i=>i.parentElement===this);!o||o.disabled||(this.shouldAnimate=!0,this.selectTarget(o))},this.onKeyDown=t=>{if(t.code==="Enter"||t.code==="Space"){t.preventDefault();const o=t.target;o&&this.selectTarget(o)}},this.updateCheckedState=()=>{if(this.tabs.forEach(t=>{t.removeAttribute("selected")}),this.selected){const t=this.tabs.find(o=>o.value===this.selected);t?t.selected=!0:this.selected=""}else{const t=this.tabs[0];t&&t.setAttribute("tabindex","0")}this.updateSelectionIndicator()},this.updateSelectionIndicator=async()=>{const t=this.tabs.find(e=>e.selected);if(!t){this.selectionIndicatorStyle=m.noSelectionStyle;return}await Promise.all([t.updateComplete,document.fonts?document.fonts.ready:Promise.resolve()]);const{width:o,height:i}=t.getBoundingClientRect();this.selectionIndicatorStyle=this.direction==="horizontal"?m.transformX(t.offsetLeft,o):m.transformY(t.offsetTop,i)},new _.IntersectionController(this,{config:{root:null,rootMargin:"0px",threshold:[0,1]},callback:()=>{this.updateSelectionIndicator()}})}static get styles(){return[c.unsafeCSS(L),c.unsafeCSS(F),m.baseStyles()]}set tabs(t){t!==this.tabs&&(this._tabs.forEach(o=>{this.resizeController.unobserve(o)}),t.forEach(o=>{this.resizeController.observe(o)}),this._tabs=t,this.rovingTabindexController.clearElementCache())}get tabs(){return this._tabs}get focusElement(){return this.rovingTabindexController.focusInElement||this}limitDeltaToInterval(t,o){return i=>i<t?t:i>o?o:i}scrollTabs(t,o="smooth"){var y;if(t===0)return;const{scrollLeft:i,clientWidth:e,scrollWidth:a}=this.tabList,s=a-e-Math.abs(i),$=this.dir==="ltr"?this.limitDeltaToInterval(-i,s):this.limitDeltaToInterval(-s,Math.abs(i));(y=this.tabList)==null||y.scrollBy({left:$(t),top:0,behavior:o})}get scrollState(){if(this.tabList){const{scrollLeft:t,clientWidth:o,scrollWidth:i}=this.tabList,e=Math.abs(t)>0,a=Math.ceil(Math.abs(t))<i-o;return{canScrollLeft:this.dir==="ltr"?e:a,canScrollRight:this.dir==="ltr"?a:e}}return{}}async getUpdateComplete(){const t=await super.getUpdateComplete(),i=[...this.children].map(e=>e.updateComplete!==void 0?e.updateComplete:Promise.resolve(!0));return await Promise.all(i),t}getNecessaryAutoScroll(t){const o=this.tabs[t],i=o.offsetLeft+o.offsetWidth,e=this.tabList.scrollLeft+this.tabList.offsetWidth,a=o.offsetLeft,s=this.tabList.scrollLeft;return i>e?U(t,this.dir,this.tabs,this.tabList):a<s?W(t,this.dir,this.tabs,this.tabList):-1}async scrollToSelection(){if(!this.enableTabsScroll||!this.selected)return;await this.updateComplete;const t=this.tabs.findIndex(o=>o.value===this.selected);if(t!==-1&&this.tabList){const o=this.getNecessaryAutoScroll(t);o!==-1&&this.tabList.scrollTo({left:o})}}updated(t){super.updated(t),t.has("selected")&&this.scrollToSelection()}managePanels({target:t}){t.assignedElements().map(i=>{const{value:e,id:a}=i,s=this.querySelector(`[role="tab"][value="${e}"]`);s&&(s.setAttribute("aria-controls",a),i.setAttribute("aria-labelledby",s.id)),i.selected=e===this.selected})}render(){return c.html`
       <div
-        class=${w.classMap({scroll:this.enableTabsScroll})}
-        aria-label=${T.ifDefined(this.label??void 0)}
+        class=${z.classMap({scroll:this.enableTabsScroll})}
+        aria-label=${x.ifDefined(this.label??void 0)}
         @click=${this.onClick}
         @keydown=${this.onKeyDown}
         @scroll=${this.onTabsScroll}
@@ -64,38 +48,38 @@
         <slot @slotchange=${this.onSlotChange}></slot>
         <div
           id="selection-indicator"
-          class=${T.ifDefined(this.shouldAnimate?void 0:"first-position")}
+          class=${x.ifDefined(this.shouldAnimate?void 0:"first-position")}
           style=${this.selectionIndicatorStyle}
           role="presentation"
         ></div>
       </div>
       <slot name="tab-panel" @slotchange=${this.managePanels}></slot>
-    `}willUpdate(t){if(!this.hasUpdated){const e=this.querySelector(":scope > [selected]");e&&this.selectTarget(e)}if(super.willUpdate(t),t.has("selected")){if(this.tabs.length>0&&this.updateCheckedState(),t.get("selected")){const o=this.querySelector(`[role="tabpanel"][value="${t.get("selected")}"]`);o&&(o.selected=!1)}const e=this.querySelector(`[role="tabpanel"][value="${this.selected}"]`);e&&(e.selected=!0)}t.has("direction")&&(this.direction==="horizontal"?this.removeAttribute("aria-orientation"):this.setAttribute("aria-orientation","vertical")),t.has("dir")&&this.updateSelectionIndicator(),t.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")),!this.shouldAnimate&&t.get("shouldAnimate")!==void 0&&(this.shouldAnimate=!0)}selectTarget(t){const e=t.getAttribute("value");if(e){const o=this.selected;this.selected=e,this.dispatchEvent(new Event("change",{cancelable:!0}))||(this.selected=o)}}onSlotChange(){this.tabs=this.slotEl.assignedElements().filter(t=>t.getAttribute("role")==="tab"),this.updateCheckedState()}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.updateSelectionIndicator),"fonts"in document&&document.fonts.addEventListener("loadingdone",this.updateSelectionIndicator)}disconnectedCallback(){window.removeEventListener("resize",this.updateSelectionIndicator),"fonts"in document&&document.fonts.removeEventListener("loadingdone",this.updateSelectionIndicator),super.disconnectedCallback()}}h([l.property({type:Boolean})],n.prototype,"auto");h([l.property({type:Boolean,reflect:!0})],n.prototype,"compact");h([l.property({reflect:!0})],n.prototype,"dir");h([l.property({reflect:!0})],n.prototype,"direction");h([l.property({type:Boolean,reflect:!0})],n.prototype,"emphasized");h([l.property()],n.prototype,"label");h([l.property({type:Boolean})],n.prototype,"enableTabsScroll");h([l.property({type:Boolean,reflect:!0})],n.prototype,"quiet");h([l.property({attribute:!1})],n.prototype,"selectionIndicatorStyle");h([l.property({attribute:!1})],n.prototype,"shouldAnimate");h([l.query("slot")],n.prototype,"slotEl");h([l.query("#list")],n.prototype,"tabList");h([l.property({reflect:!0})],n.prototype,"selected");const vt=':host{top:0;right:0;bottom:0;left:0;width:100%;--tabs-divider-size: 2px;--tab-item-height-m: calc( var(--luzmo-component-height) + var(--luzmo-spacing-5) );--tabs-overflow-button-height: calc( var(--tab-item-height-m) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-m);--tabs-overflow-icon-color: var(--luzmo-font-color-focus);--tabs-overflow-shadow-color: var(--luzmo-background-color);--tabs-overflow-shadow-width: 50px;--luzmo-action-button-icon-size: var(--luzmo-font-size);--tabs-overflow-next-button-right: calc(-1 * var(--luzmo-spacing-4));--tabs-overflow-previous-button-left: calc(-1 * var(--luzmo-spacing-4))}:host([size=s]){--tab-item-height-s: calc( var(--luzmo-component-height-s) + var(--luzmo-spacing-4) );--tabs-overflow-button-height: calc( var(--tab-item-height-s) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-s);--luzmo-action-button-icon-size: var(--luzmo-font-size-s);--tabs-overflow-next-button-right: calc(-1 * var(--luzmo-spacing-3));--tabs-overflow-previous-button-left: calc(-1 * var(--luzmo-spacing-3))}:host([size=l]){--tab-item-height-l: calc( var(--luzmo-component-height-l) + var(--luzmo-spacing-5) );--tabs-overflow-button-height: calc( var(--tab-item-height-l) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-l);--luzmo-action-button-icon-size: var(--luzmo-font-size-l);--tabs-overflow-next-button-right: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1)) );--tabs-overflow-previous-button-left: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1)) )}:host([size=xl]){--tab-item-height-xl: calc( var(--luzmo-component-height-xl) + var(--luzmo-spacing-5) );--tabs-overflow-button-height: calc( var(--tab-item-height-xl) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-xl);--luzmo-action-button-icon-size: var(--luzmo-font-size-xl);--tabs-overflow-next-button-right: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-2)) );--tabs-overflow-previous-button-left: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-2)) )}:host([compact]){--tabs-overflow-button-height: calc( var(--tab-item-compact-height-m) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--luzmo-action-button-icon-size: var(--luzmo-font-size-s)}luzmo-action-button{width:var(--luzmo-tabs-overflow-button-size, var(--tabs-overflow-button-size));height:var(--luzmo-tabs-overflow-button-height, var(--tabs-overflow-button-height));position:absolute;z-index:2;border:none;text-align:center;box-shadow:none;background:transparent;color:var(--luzmo-tabs-overflow-icon-color, var(--tabs-overflow-icon-color))}luzmo-action-button.left-scroll{visibility:hidden;left:var(--luzmo-tabs-overflow-previous-button-left, var(--tabs-overflow-previous-button-left))}luzmo-action-button.right-scroll{visibility:hidden;right:var(--luzmo-tabs-overflow-next-button-right, var(--tabs-overflow-next-button-right))}luzmo-action-button.left-scroll.show,luzmo-action-button.right-scroll.show{visibility:visible}.tabs-overflow-container{position:relative}.tabs-overflow-container:before,.tabs-overflow-container:after{content:"";visibility:hidden;position:absolute;z-index:1;height:var(--luzmo-tabs-overflow-button-height, var(--tabs-overflow-button-height));width:var(--luzmo-tabs-overflow-shadow-width, var(--tabs-overflow-shadow-width));pointer-events:none;inset-block-start:0}.tabs-overflow-container:before{background:transparent linear-gradient(270deg,transparent,var(--luzmo-tabs-overflow-shadow-color, var(--tabs-overflow-shadow-color))) 0 0 no-repeat padding-box;left:0}.tabs-overflow-container:after{background:transparent linear-gradient(90deg,transparent,var(--luzmo-tabs-overflow-shadow-color, var(--tabs-overflow-shadow-color))) 0 0 no-repeat padding-box;right:0}.tabs-overflow-container.left-shadow:before,.tabs-overflow-container.right-shadow:after{visibility:visible}';var mt=Object.defineProperty,p=(s,t,e,o)=>{for(var i=void 0,a=s.length-1,r;a>=0;a--)(r=s[a])&&(i=r(t,e,i)||i);return i&&mt(t,e,i),i};class u extends R.SizedMixin(C.LuzmoElement){constructor(){super(),this.compact=!1,this.labelPrevious="Scroll to previous tabs",this.labelNext="Scroll to next tabs",this.overflowState={canScrollLeft:!1,canScrollRight:!1},this.scrollFactor=.5,this.resizeController=new M.ResizeController(this,{target:this,callback:()=>{this._updateScrollState()}})}static get styles(){return[d.unsafeCSS(vt),d.unsafeCSS(B)]}get scrollContent(){return this.tabs}firstUpdated(t){super.firstUpdated(t);const[e]=this.scrollContent;e&&(e.enableTabsScroll=!0),this.resizeController.observe(this.overflowContainer)}async _handleSlotChange(){const[t]=this.scrollContent;await(t==null?void 0:t.updateComplete),this._updateScrollState()}_updateScrollState(){const{scrollContent:t,overflowState:e}=this;if(t){const[o]=this.scrollContent,{canScrollLeft:i,canScrollRight:a}=(o==null?void 0:o.scrollState)||{canScrollLeft:!1,canScrollRight:!1};this.overflowState={...e,canScrollLeft:i,canScrollRight:a}}}_handleScrollClick(t){const e=t.currentTarget,[o]=this.scrollContent,i=o.clientWidth*this.scrollFactor,a=e.classList.contains("left-scroll")?-i:i;o.scrollTabs(a,"smooth")}updated(t){super.updated(t),t.has("dir")&&this._updateScrollState()}render(){const{canScrollRight:t,canScrollLeft:e}=this.overflowState,o=this.labelPrevious,i=this.labelNext;return d.html`
+    `}willUpdate(t){if(!this.hasUpdated){const o=this.querySelector(":scope > [selected]");o&&this.selectTarget(o)}if(super.willUpdate(t),t.has("selected")){if(this.tabs.length>0&&this.updateCheckedState(),t.get("selected")){const i=this.querySelector(`[role="tabpanel"][value="${t.get("selected")}"]`);i&&(i.selected=!1)}const o=this.querySelector(`[role="tabpanel"][value="${this.selected}"]`);o&&(o.selected=!0)}t.has("direction")&&(this.direction==="horizontal"?this.removeAttribute("aria-orientation"):this.setAttribute("aria-orientation","vertical")),t.has("dir")&&this.updateSelectionIndicator(),t.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")),!this.shouldAnimate&&t.get("shouldAnimate")!==void 0&&(this.shouldAnimate=!0)}selectTarget(t){const o=t.getAttribute("value");if(o){const i=this.selected;this.selected=o,this.dispatchEvent(new Event("change",{cancelable:!0}))||(this.selected=i)}}onSlotChange(){this.tabs=this.slotEl.assignedElements().filter(t=>t.getAttribute("role")==="tab"),this.updateCheckedState()}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.updateSelectionIndicator),"fonts"in document&&document.fonts.addEventListener("loadingdone",this.updateSelectionIndicator)}disconnectedCallback(){window.removeEventListener("resize",this.updateSelectionIndicator),"fonts"in document&&document.fonts.removeEventListener("loadingdone",this.updateSelectionIndicator),super.disconnectedCallback()}}u([l.property({type:Boolean})],n.prototype,"auto");u([l.property({type:Boolean,reflect:!0})],n.prototype,"compact");u([l.property({reflect:!0})],n.prototype,"dir");u([l.property({reflect:!0})],n.prototype,"direction");u([l.property({type:Boolean,reflect:!0})],n.prototype,"emphasized");u([l.property()],n.prototype,"label");u([l.property({type:Boolean})],n.prototype,"enableTabsScroll");u([l.property({type:Boolean,reflect:!0})],n.prototype,"quiet");u([l.property({attribute:!1})],n.prototype,"selectionIndicatorStyle");u([l.property({attribute:!1})],n.prototype,"shouldAnimate");u([l.query("slot")],n.prototype,"slotEl");u([l.query("#list")],n.prototype,"tabList");u([l.property({reflect:!0})],n.prototype,"selected");const O=':host{top:0;right:0;bottom:0;left:0;width:100%;--tabs-divider-size: 2px;--tab-item-height-m: calc( var(--luzmo-component-height) + var(--luzmo-spacing-5) );--tabs-overflow-button-height: calc( var(--tab-item-height-m) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-m);--tabs-overflow-icon-color: var(--luzmo-font-color-focus);--tabs-overflow-shadow-color: var(--luzmo-background-color);--tabs-overflow-shadow-width: 50px;--luzmo-action-button-icon-size: var(--luzmo-font-size);--tabs-overflow-next-button-right: calc(-1 * var(--luzmo-spacing-4));--tabs-overflow-previous-button-left: calc(-1 * var(--luzmo-spacing-4))}:host([size=s]){--tab-item-height-s: calc( var(--luzmo-component-height-s) + var(--luzmo-spacing-4) );--tabs-overflow-button-height: calc( var(--tab-item-height-s) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-s);--luzmo-action-button-icon-size: var(--luzmo-font-size-s);--tabs-overflow-next-button-right: calc(-1 * var(--luzmo-spacing-3));--tabs-overflow-previous-button-left: calc(-1 * var(--luzmo-spacing-3))}:host([size=l]){--tab-item-height-l: calc( var(--luzmo-component-height-l) + var(--luzmo-spacing-5) );--tabs-overflow-button-height: calc( var(--tab-item-height-l) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-l);--luzmo-action-button-icon-size: var(--luzmo-font-size-l);--tabs-overflow-next-button-right: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1)) );--tabs-overflow-previous-button-left: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1)) )}:host([size=xl]){--tab-item-height-xl: calc( var(--luzmo-component-height-xl) + var(--luzmo-spacing-5) );--tabs-overflow-button-height: calc( var(--tab-item-height-xl) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-xl);--luzmo-action-button-icon-size: var(--luzmo-font-size-xl);--tabs-overflow-next-button-right: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-2)) );--tabs-overflow-previous-button-left: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-2)) )}:host([compact]){--tabs-overflow-button-height: calc( var(--tab-item-compact-height-m) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--luzmo-action-button-icon-size: var(--luzmo-font-size-s)}luzmo-action-button{width:var(--luzmo-tabs-overflow-button-size, var(--tabs-overflow-button-size));height:var(--luzmo-tabs-overflow-button-height, var(--tabs-overflow-button-height));position:absolute;z-index:2;border:none;text-align:center;box-shadow:none;background:transparent;color:var(--luzmo-tabs-overflow-icon-color, var(--tabs-overflow-icon-color))}luzmo-action-button.left-scroll{visibility:hidden;left:var(--luzmo-tabs-overflow-previous-button-left, var(--tabs-overflow-previous-button-left))}luzmo-action-button.right-scroll{visibility:hidden;right:var(--luzmo-tabs-overflow-next-button-right, var(--tabs-overflow-next-button-right))}luzmo-action-button.left-scroll.show,luzmo-action-button.right-scroll.show{visibility:visible}.tabs-overflow-container{position:relative}.tabs-overflow-container:before,.tabs-overflow-container:after{content:"";visibility:hidden;position:absolute;z-index:1;height:var(--luzmo-tabs-overflow-button-height, var(--tabs-overflow-button-height));width:var(--luzmo-tabs-overflow-shadow-width, var(--tabs-overflow-shadow-width));pointer-events:none;inset-block-start:0}.tabs-overflow-container:before{background:transparent linear-gradient(270deg,transparent,var(--luzmo-tabs-overflow-shadow-color, var(--tabs-overflow-shadow-color))) 0 0 no-repeat padding-box;left:0}.tabs-overflow-container:after{background:transparent linear-gradient(90deg,transparent,var(--luzmo-tabs-overflow-shadow-color, var(--tabs-overflow-shadow-color))) 0 0 no-repeat padding-box;right:0}.tabs-overflow-container.left-shadow:before,.tabs-overflow-container.right-shadow:after{visibility:visible}';var H=Object.defineProperty,v=(r,t,o,i)=>{for(var e=void 0,a=r.length-1,s;a>=0;a--)(s=r[a])&&(e=s(t,o,e)||e);return e&&H(t,o,e),e};class d extends C.SizedMixin(g.LuzmoElement){constructor(){super(),this.compact=!1,this.labelPrevious="Scroll to previous tabs",this.labelNext="Scroll to next tabs",this.overflowState={canScrollLeft:!1,canScrollRight:!1},this.scrollFactor=.5,this.resizeController=new k.ResizeController(this,{target:this,callback:()=>{this._updateScrollState()}})}static get styles(){return[c.unsafeCSS(O),c.unsafeCSS(L)]}get scrollContent(){return this.tabs}firstUpdated(t){super.firstUpdated(t);const[o]=this.scrollContent;o&&(o.enableTabsScroll=!0),this.resizeController.observe(this.overflowContainer)}async _handleSlotChange(){const[t]=this.scrollContent;await(t==null?void 0:t.updateComplete),this._updateScrollState()}_updateScrollState(){const{scrollContent:t,overflowState:o}=this;if(t){const[i]=this.scrollContent,{canScrollLeft:e,canScrollRight:a}=(i==null?void 0:i.scrollState)||{canScrollLeft:!1,canScrollRight:!1};this.overflowState={...o,canScrollLeft:e,canScrollRight:a}}}_handleScrollClick(t){const o=t.currentTarget,[i]=this.scrollContent,e=i.clientWidth*this.scrollFactor,a=o.classList.contains("left-scroll")?-e:e;i.scrollTabs(a,"smooth")}updated(t){super.updated(t),t.has("dir")&&this._updateScrollState()}render(){const{canScrollRight:t,canScrollLeft:o}=this.overflowState,i=this.labelPrevious,e=this.labelNext;return c.html`
       <div
-        class=${w.classMap({"tabs-overflow-container":!0,"left-shadow":e,"right-shadow":t})}
+        class=${z.classMap({"tabs-overflow-container":!0,"left-shadow":o,"right-shadow":t})}
       >
         <luzmo-action-button
-          class=${w.classMap({"left-scroll":!0,show:e})}
-          aria-label=${o}
+          class=${z.classMap({"left-scroll":!0,show:o})}
+          aria-label=${i}
           quiet
           dir="rtl"
           tabindex="-1"
           @click=${this._handleScrollClick}
         >
-          <luzmo-icon slot="icon" .icon=${A.luzmoAngleLeft}></luzmo-icon>
+          <luzmo-icon slot="icon" .icon=${w.luzmoAngleLeft}></luzmo-icon>
         </luzmo-action-button>
         <luzmo-action-button
-          class=${w.classMap({"right-scroll":!0,show:t})}
-          aria-label=${i}
+          class=${z.classMap({"right-scroll":!0,show:t})}
+          aria-label=${e}
           quiet
           tabindex="-1"
           @click=${this._handleScrollClick}
         >
-          <luzmo-icon slot="icon" .icon=${A.luzmoAngleRight}></luzmo-icon>
+          <luzmo-icon slot="icon" .icon=${w.luzmoAngleRight}></luzmo-icon>
         </luzmo-action-button>
         <slot
           @slotchange=${this._handleSlotChange}
           @luzmo-tabs-scroll=${this._updateScrollState}
         ></slot>
       </div>
-    `}}p([l.property({type:Boolean,reflect:!0})],u.prototype,"compact");p([l.property({type:String,attribute:"label-previous"})],u.prototype,"labelPrevious");p([l.property({type:String,attribute:"label-next"})],u.prototype,"labelNext");p([l.property({reflect:!0})],u.prototype,"dir");p([l.state()],u.prototype,"overflowState");p([l.queryAssignedElements({selector:"luzmo-tabs",flatten:!0})],u.prototype,"tabs");p([l.query(".tabs-overflow-container")],u.prototype,"overflowContainer");customElements.get("luzmo-tab")||customElements.define("luzmo-tab",m);customElements.get("luzmo-tabs")||customElements.define("luzmo-tabs",n);customElements.get("luzmo-tab-panel")||customElements.define("luzmo-tab-panel",E);customElements.get("luzmo-tabs-overflow")||customElements.define("luzmo-tabs-overflow",u);exports.LuzmoTab=m;exports.LuzmoTabPanel=E;exports.LuzmoTabs=n;exports.LuzmoTabsOverflow=u;
+    `}}v([l.property({type:Boolean,reflect:!0})],d.prototype,"compact");v([l.property({type:String,attribute:"label-previous"})],d.prototype,"labelPrevious");v([l.property({type:String,attribute:"label-next"})],d.prototype,"labelNext");v([l.property({reflect:!0})],d.prototype,"dir");v([l.state()],d.prototype,"overflowState");v([l.queryAssignedElements({selector:"luzmo-tabs",flatten:!0})],d.prototype,"tabs");v([l.query(".tabs-overflow-container")],d.prototype,"overflowContainer");customElements.get("luzmo-tab")||customElements.define("luzmo-tab",h);customElements.get("luzmo-tabs")||customElements.define("luzmo-tabs",n);customElements.get("luzmo-tab-panel")||customElements.define("luzmo-tab-panel",f);customElements.get("luzmo-tabs-overflow")||customElements.define("luzmo-tabs-overflow",d);exports.LuzmoTab=h;exports.LuzmoTabPanel=f;exports.LuzmoTabs=n;exports.LuzmoTabsOverflow=d;