@luzmo/lucero 1.0.1-alpha.15 → 1.0.1-alpha.17

package/components/tabs/index.cjs

@@ -15,26 +15,185 @@
  * 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 s=require("../base-CBCg3yyw.cjs"),L=require("../focus-visible-B0P9aY_G.cjs"),I=require("../observe-slot-presence-bc9chhsi.cjs"),E=require("../observe-slot-text-Ceb7SvYT.cjs"),y=require("../random-id-CqvckpWe.cjs"),f=require("../query-BL-TJj7K.cjs"),m=require("../class-map-Di1D_rCm.cjs"),x=require("../if-defined-C9YGdo33.cjs"),S=require("../sized-mixin-CPxE5C96.cjs"),$=require("../focusable-EbipgXRh.cjs"),q=require("../roving-tabindex-By_fCy_e.cjs"),w=require("../luzmo-icons-D47EGj-3.cjs"),A=require("../state-D8JEtYqe.cjs"),_=require("../query-assigned-elements-DsKsfk7G.cjs");require("../action-button/index.cjs");require("../icon/index.cjs");const P=':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 B=Object.defineProperty,v=(l,t,o,i)=>{for(var e=void 0,a=l.length-1,r;a>=0;a--)(r=l[a])&&(e=r(t,o,e)||e);return e&&B(t,o,e),e};class u extends L.FocusVisiblePolyfillMixin(E.ObserveSlotText(I.ObserveSlotPresence(s.LuzmoElement,'[slot="icon"]'),"")){constructor(){super(...arguments),this.disabled=!1,this.label="",this.selected=!1,this.vertical=!1,this.value=""}static get styles(){return[s.r(P)]}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return!!this.label||this.slotHasContent}render(){return s.x`
-      ${this.hasIcon?s.x` <slot name="icon"></slot> `:s.E}
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const property_js = require("lit/decorators/property.js");
+const base = require("../base-COw9n7UR.cjs");
+const focusVisible = require("../focus-visible-B-B8-P9R.cjs");
+const observeSlotPresence = require("../observe-slot-presence-9AwLGUQ_.cjs");
+const observeSlotText = require("../observe-slot-text-CSofZeeF.cjs");
+const randomId = require("../random-id-BE6HA503.cjs");
+const intersectionController_js = require("@lit-labs/observers/intersection-controller.js");
+const resizeController_js = require("@lit-labs/observers/resize-controller.js");
+const decorators_js = require("lit/decorators.js");
+const classMap_js = require("lit/directives/class-map.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
+const focusable = require("../focusable-BPrTcZPd.cjs");
+const rovingTabindex = require("../roving-tabindex-AsmAh2In.cjs");
+const icons = require("@luzmo/icons");
+require("../action-button/index.cjs");
+require("../icon/index.cjs");
+const tabItemStyles = ':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 __defProp$3 = Object.defineProperty;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$3(target, key, result);
+  return result;
+};
+class LuzmoTab extends focusVisible.FocusVisiblePolyfillMixin(
+  observeSlotText.ObserveSlotText(observeSlotPresence.ObserveSlotPresence(base.LuzmoElement, '[slot="icon"]'), "")
+) {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.label = "";
+    this.selected = false;
+    this.vertical = false;
+    this.value = "";
+  }
+  static get styles() {
+    return [lit.unsafeCSS(tabItemStyles)];
+  }
+  get hasIcon() {
+    return this.slotContentIsPresent;
+  }
+  get hasLabel() {
+    return !!this.label || this.slotHasContent;
+  }
+  render() {
+    return lit.html`
+      ${this.hasIcon ? lit.html` <slot name="icon"></slot> ` : lit.nothing}
       <label id="item-label" ?hidden=${!this.hasLabel}>
-        ${this.slotHasContent?s.E:this.label}
+        ${this.slotHasContent ? lit.nothing : this.label}
         <slot>${this.label}</slot>
       </label>
-    `}firstUpdated(t){super.firstUpdated(t),this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id=`luzmo-tab-${y.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"))}}v([s.n({type:Boolean,reflect:!0})],u.prototype,"disabled");v([s.n({reflect:!0})],u.prototype,"label");v([s.n({type:Boolean,reflect:!0})],u.prototype,"selected");v([s.n({type:Boolean,reflect:!0})],u.prototype,"vertical");v([s.n({type:String,reflect:!0})],u.prototype,"value");const U=":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,k=(l,t,o,i)=>{for(var e=void 0,a=l.length-1,r;a>=0;a--)(r=l[a])&&(e=r(t,o,e)||e);return e&&D(t,o,e),e};class p extends s.LuzmoElement{constructor(){super(...arguments),this.selected=!1,this.value=""}static get styles(){return[s.r(U)]}handleFocusin(){this.removeAttribute("tabindex")}handleFocusout(){this.tabIndex=this.selected?0:-1}render(){return s.x`
+    `;
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    this.setAttribute("role", "tab");
+    if (!this.hasAttribute("id")) {
+      this.id = `luzmo-tab-${randomId.randomID()}`;
+    }
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("selected")) {
+      this.setAttribute("aria-selected", this.selected ? "true" : "false");
+      this.setAttribute("tabindex", this.selected ? "0" : "-1");
+    }
+    if (changes.has("disabled")) {
+      if (this.disabled) {
+        this.setAttribute("aria-disabled", "true");
+      } else {
+        this.removeAttribute("aria-disabled");
+      }
+    }
+  }
+}
+__decorateClass$3([
+  property_js.property({ type: Boolean, reflect: true })
+], LuzmoTab.prototype, "disabled");
+__decorateClass$3([
+  property_js.property({ reflect: true })
+], LuzmoTab.prototype, "label");
+__decorateClass$3([
+  property_js.property({ type: Boolean, reflect: true })
+], LuzmoTab.prototype, "selected");
+__decorateClass$3([
+  property_js.property({ type: Boolean, reflect: true })
+], LuzmoTab.prototype, "vertical");
+__decorateClass$3([
+  property_js.property({ type: String, reflect: true })
+], LuzmoTab.prototype, "value");
+const panelStyles = ":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 __defProp$2 = Object.defineProperty;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$2(target, key, result);
+  return result;
+};
+class LuzmoTabPanel extends base.LuzmoElement {
+  constructor() {
+    super(...arguments);
+    this.selected = false;
+    this.value = "";
+  }
+  static get styles() {
+    return [lit.unsafeCSS(panelStyles)];
+  }
+  handleFocusin() {
+    this.removeAttribute("tabindex");
+  }
+  handleFocusout() {
+    this.tabIndex = this.selected ? 0 : -1;
+  }
+  render() {
+    return lit.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-${y.randomID()}`)}updated(t){t.has("selected")&&(this.selected?(this.removeAttribute("aria-hidden"),this.tabIndex=0):(this.setAttribute("aria-hidden","true"),this.tabIndex=-1))}}k([s.n({type:Boolean,reflect:!0})],p.prototype,"selected");k([s.n({type:String,reflect:!0})],p.prototype,"value");/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */class O{constructor(t,{target:o,config:i,callback:e,skipInitial:a}){this.t=new Set,this.o=!1,this.i=!1,this.h=t,o!==null&&this.t.add(o??t),this.o=a??this.o,this.callback=e,window.IntersectionObserver?(this.u=new IntersectionObserver(r=>{const z=this.i;this.i=!1,this.o&&z||(this.handleChanges(r),this.h.requestUpdate())},i),t.addController(this)):console.warn("IntersectionController error: browser does not support IntersectionObserver.")}handleChanges(t){var o;this.value=(o=this.callback)==null?void 0:o.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()}}/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */class C{constructor(t,{target:o,config:i,callback:e,skipInitial:a}){this.t=new Set,this.o=!1,this.i=!1,this.h=t,o!==null&&this.t.add(o??t),this.l=i,this.o=a??this.o,this.callback=e,window.ResizeObserver?(this.u=new ResizeObserver(r=>{this.handleChanges(r),this.h.requestUpdate()}),t.addController(this)):console.warn("ResizeController error: browser does not support ResizeObserver.")}handleChanges(t){var o;this.value=(o=this.callback)==null?void 0:o.call(this,t,this.u)}hostConnected(){for(const t of this.t)this.observe(t)}hostDisconnected(){this.disconnect()}async hostUpdated(){!this.o&&this.i&&this.handleChanges([]),this.i=!1}observe(t){this.t.add(t),this.u.observe(t,this.l),this.i=!0,this.h.requestUpdate()}unobserve(t){this.t.delete(t),this.u.unobserve(t)}disconnect(){this.u.disconnect()}}const T="#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,c=(l,t,o,i)=>{for(var e=void 0,a=l.length-1,r;a>=0;a--)(r=l[a])&&(e=r(t,o,e)||e);return e&&R(t,o,e),e};const h={baseSize:100,noSelectionStyle:"transform: translateX(0px) scaleX(0) scaleY(0)",transformX(l,t){const o=t/this.baseSize;return`transform: translateX(${l}px) scaleX(${o});`},transformY(l,t){const o=t/this.baseSize;return`transform: translateY(${l}px) scaleY(${o});`},baseStyles(){return s.i`
+    `;
+  }
+  firstUpdated() {
+    this.slot = "tab-panel";
+    this.setAttribute("role", "tabpanel");
+    this.tabIndex = 0;
+    if (!this.hasAttribute("id")) {
+      this.id = `luzmo-tab-panel-${randomId.randomID()}`;
+    }
+  }
+  updated(changes) {
+    if (changes.has("selected")) {
+      if (this.selected) {
+        this.removeAttribute("aria-hidden");
+        this.tabIndex = 0;
+      } else {
+        this.setAttribute("aria-hidden", "true");
+        this.tabIndex = -1;
+      }
+    }
+  }
+}
+__decorateClass$2([
+  property_js.property({ type: Boolean, reflect: true })
+], LuzmoTabPanel.prototype, "selected");
+__decorateClass$2([
+  property_js.property({ type: String, reflect: true })
+], LuzmoTabPanel.prototype, "value");
+const tabSizes = "#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)) )}";
+const tabStyles = "#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 __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$1(target, key, result);
+  return result;
+};
+const ScaledIndicator = {
+  baseSize: 100,
+  noSelectionStyle: "transform: translateX(0px) scaleX(0) scaleY(0)",
+  transformX(left, width) {
+    const scale = width / this.baseSize;
+    return `transform: translateX(${left}px) scaleX(${scale});`;
+  },
+  transformY(top, height) {
+    const scale = height / this.baseSize;
+    return `transform: translateY(${top}px) scaleY(${scale});`;
+  },
+  baseStyles() {
+    return lit.css`
       :host([direction='vertical-right']) #selection-indicator,
       :host([direction='vertical']) #selection-indicator {
         height: ${this.baseSize}px;
@@ -42,10 +201,269 @@
       :host([dir][direction='horizontal']) #selection-indicator {
         width: ${this.baseSize}px;
       }
-    `}};function M(l,t,o,i){const e=l+(t==="rtl"?-1:1),a=o[e],r=i.scrollLeft+i.offsetWidth;return a?a.offsetLeft-i.offsetWidth:r}function W(l,t,o,i){const e=l+(t==="rtl"?1:-1),a=o[e],r=t==="rtl"?-i.offsetWidth:0;return a?a.offsetLeft+a.offsetWidth:r}class n extends S.SizedMixin($.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=h.noSelectionStyle,this.shouldAnimate=!1,this.selected="",this._tabs=[],this.resizeController=new C(this,{callback:()=>{this.updateSelectionIndicator()}}),this.rovingTabindexController=new q.RovingTabindexController(this,{focusInIndex:t=>{let o=0;return t.find((e,a)=>{const r=this.selected?e.value===this.selected:!e.disabled;return o=a,r})?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=h.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"?h.transformX(t.offsetLeft,o):h.transformY(t.offsetTop,i)},new O(this,{config:{root:null,rootMargin:"0px",threshold:[0,1]},callback:()=>{this.updateSelectionIndicator()}})}static get styles(){return[s.r(T),s.r(F),h.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 g;if(t===0)return;const{scrollLeft:i,clientWidth:e,scrollWidth:a}=this.tabList,r=a-e-Math.abs(i),z=this.dir==="ltr"?this.limitDeltaToInterval(-i,r):this.limitDeltaToInterval(-r,Math.abs(i));(g=this.tabList)==null||g.scrollBy({left:z(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,r=this.tabList.scrollLeft;return i>e?M(t,this.dir,this.tabs,this.tabList):a<r?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,r=this.querySelector(`[role="tab"][value="${e}"]`);r&&(r.setAttribute("aria-controls",a),i.setAttribute("aria-labelledby",r.id)),i.selected=e===this.selected})}render(){return s.x`
+    `;
+  }
+};
+function calculateScrollTargetForRightSide(index, direction, tabs, container) {
+  const nextIndex = index + (direction === "rtl" ? -1 : 1);
+  const nextTab = tabs[nextIndex];
+  const viewportEnd = container.scrollLeft + container.offsetWidth;
+  return nextTab ? nextTab.offsetLeft - container.offsetWidth : viewportEnd;
+}
+function calculateScrollTargetForLeftSide(index, direction, tabs, container) {
+  const prevIndex = index + (direction === "rtl" ? 1 : -1);
+  const prevTab = tabs[prevIndex];
+  const leftmostElement = direction === "rtl" ? -container.offsetWidth : 0;
+  return prevTab ? prevTab.offsetLeft + prevTab.offsetWidth : leftmostElement;
+}
+class LuzmoTabs extends sizedMixin.SizedMixin(focusable.Focusable, { noDefaultSize: true }) {
+  constructor() {
+    super();
+    this.auto = false;
+    this.compact = false;
+    this.direction = "horizontal";
+    this.emphasized = false;
+    this.label = "";
+    this.enableTabsScroll = false;
+    this.quiet = false;
+    this.selectionIndicatorStyle = ScaledIndicator.noSelectionStyle;
+    this.shouldAnimate = false;
+    this.selected = "";
+    this._tabs = [];
+    this.resizeController = new resizeController_js.ResizeController(this, {
+      callback: () => {
+        this.updateSelectionIndicator();
+      }
+    });
+    this.rovingTabindexController = new rovingTabindex.RovingTabindexController(this, {
+      focusInIndex: (elements) => {
+        let focusInIndex = 0;
+        const firstFocusableElement = elements.find((el, index) => {
+          const focusInElement = this.selected ? el.value === this.selected : !el.disabled;
+          focusInIndex = index;
+          return focusInElement;
+        });
+        return firstFocusableElement ? focusInIndex : -1;
+      },
+      direction: () => "both",
+      elementEnterAction: (el) => {
+        if (!this.auto) return;
+        this.shouldAnimate = true;
+        this.selectTarget(el);
+      },
+      elements: () => this.tabs,
+      isFocusableElement: (el) => !this.disabled && !el.disabled,
+      listenerScope: () => this.tabList
+    });
+    this.onTabsScroll = () => {
+      this.dispatchEvent(
+        new Event("luzmo-tabs-scroll", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this.onClick = (event) => {
+      if (this.disabled) {
+        return;
+      }
+      const target = event.composedPath().find((el) => el.parentElement === this);
+      if (!target || target.disabled) {
+        return;
+      }
+      this.shouldAnimate = true;
+      this.selectTarget(target);
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Enter" || event.code === "Space") {
+        event.preventDefault();
+        const target = event.target;
+        if (target) {
+          this.selectTarget(target);
+        }
+      }
+    };
+    this.updateCheckedState = () => {
+      this.tabs.forEach((element) => {
+        element.removeAttribute("selected");
+      });
+      if (this.selected) {
+        const currentChecked = this.tabs.find((el) => el.value === this.selected);
+        if (currentChecked) {
+          currentChecked.selected = true;
+        } else {
+          this.selected = "";
+        }
+      } else {
+        const firstTab = this.tabs[0];
+        if (firstTab) {
+          firstTab.setAttribute("tabindex", "0");
+        }
+      }
+      this.updateSelectionIndicator();
+    };
+    this.updateSelectionIndicator = async () => {
+      const selectedElement = this.tabs.find((el) => el.selected);
+      if (!selectedElement) {
+        this.selectionIndicatorStyle = ScaledIndicator.noSelectionStyle;
+        return;
+      }
+      await Promise.all([
+        selectedElement.updateComplete,
+        document.fonts ? document.fonts.ready : Promise.resolve()
+      ]);
+      const { width, height } = selectedElement.getBoundingClientRect();
+      this.selectionIndicatorStyle = this.direction === "horizontal" ? ScaledIndicator.transformX(selectedElement.offsetLeft, width) : ScaledIndicator.transformY(selectedElement.offsetTop, height);
+    };
+    new intersectionController_js.IntersectionController(this, {
+      config: {
+        root: null,
+        rootMargin: "0px",
+        threshold: [0, 1]
+      },
+      callback: () => {
+        this.updateSelectionIndicator();
+      }
+    });
+  }
+  static get styles() {
+    return [
+      lit.unsafeCSS(tabSizes),
+      lit.unsafeCSS(tabStyles),
+      ScaledIndicator.baseStyles()
+    ];
+  }
+  set tabs(tabs) {
+    if (tabs === this.tabs) return;
+    this._tabs.forEach((tab) => {
+      this.resizeController.unobserve(tab);
+    });
+    tabs.forEach((tab) => {
+      this.resizeController.observe(tab);
+    });
+    this._tabs = tabs;
+    this.rovingTabindexController.clearElementCache();
+  }
+  get tabs() {
+    return this._tabs;
+  }
+  /**
+   * @internal
+   */
+  get focusElement() {
+    return this.rovingTabindexController.focusInElement || this;
+  }
+  limitDeltaToInterval(min, max) {
+    return (delta) => {
+      if (delta < min) return min;
+      if (delta > max) return max;
+      return delta;
+    };
+  }
+  /**
+   * Scrolls through the tabs component, on the X-axis, by a given ammount of pixels/ delta. The given delta is limited to the scrollable area of the tabs component.
+   * @param delta - The ammount of pixels to scroll by. If the value is positive, the tabs will scroll to the right. If the value is negative, the tabs will scroll to the left.
+   * @param behavior - The scroll behavior to use. Defaults to 'smooth'.
+   */
+  scrollTabs(delta, behavior = "smooth") {
+    var _a;
+    if (delta === 0) return;
+    const { scrollLeft, clientWidth, scrollWidth } = this.tabList;
+    const dirLimit = scrollWidth - clientWidth - Math.abs(scrollLeft);
+    const limitDelta = this.dir === "ltr" ? this.limitDeltaToInterval(-scrollLeft, dirLimit) : this.limitDeltaToInterval(-dirLimit, Math.abs(scrollLeft));
+    (_a = this.tabList) == null ? void 0 : _a.scrollBy({
+      left: limitDelta(delta),
+      top: 0,
+      behavior
+    });
+  }
+  get scrollState() {
+    if (this.tabList) {
+      const { scrollLeft, clientWidth, scrollWidth } = this.tabList;
+      const canScrollLeft = Math.abs(scrollLeft) > 0;
+      const canScrollRight = Math.ceil(Math.abs(scrollLeft)) < scrollWidth - clientWidth;
+      return {
+        canScrollLeft: this.dir === "ltr" ? canScrollLeft : canScrollRight,
+        canScrollRight: this.dir === "ltr" ? canScrollRight : canScrollLeft
+      };
+    }
+    return {};
+  }
+  async getUpdateComplete() {
+    const complete = await super.getUpdateComplete();
+    const tabs = [...this.children];
+    const tabUpdateCompletes = tabs.map((tab) => {
+      if (tab.updateComplete !== void 0) {
+        return tab.updateComplete;
+      }
+      return Promise.resolve(true);
+    });
+    await Promise.all(tabUpdateCompletes);
+    return complete;
+  }
+  getNecessaryAutoScroll(index) {
+    const selectedTab = this.tabs[index];
+    const selectionEnd = selectedTab.offsetLeft + selectedTab.offsetWidth;
+    const viewportEnd = this.tabList.scrollLeft + this.tabList.offsetWidth;
+    const selectionStart = selectedTab.offsetLeft;
+    const viewportStart = this.tabList.scrollLeft;
+    if (selectionEnd > viewportEnd) {
+      return calculateScrollTargetForRightSide(
+        index,
+        this.dir,
+        this.tabs,
+        this.tabList
+      );
+    } else if (selectionStart < viewportStart) {
+      return calculateScrollTargetForLeftSide(
+        index,
+        this.dir,
+        this.tabs,
+        this.tabList
+      );
+    }
+    return -1;
+  }
+  async scrollToSelection() {
+    if (!this.enableTabsScroll || !this.selected) {
+      return;
+    }
+    await this.updateComplete;
+    const selectedIndex = this.tabs.findIndex(
+      (tab) => tab.value === this.selected
+    );
+    if (selectedIndex !== -1 && this.tabList) {
+      const scrollTarget = this.getNecessaryAutoScroll(selectedIndex);
+      if (scrollTarget !== -1) {
+        this.tabList.scrollTo({ left: scrollTarget });
+      }
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("selected")) {
+      this.scrollToSelection();
+    }
+  }
+  managePanels({
+    target
+  }) {
+    const panels = target.assignedElements();
+    panels.map((panel) => {
+      const { value, id } = panel;
+      const tab = this.querySelector(`[role="tab"][value="${value}"]`);
+      if (tab) {
+        tab.setAttribute("aria-controls", id);
+        panel.setAttribute("aria-labelledby", tab.id);
+      }
+      panel.selected = value === this.selected;
+    });
+  }
+  render() {
+    return lit.html`
       <div
-        class=${m.e({scroll:this.enableTabsScroll})}
-        aria-label=${x.o(this.label??void 0)}
+        class=${classMap_js.classMap({ scroll: this.enableTabsScroll })}
+        aria-label=${ifDefined_js.ifDefined(this.label ?? void 0)}
         @click=${this.onClick}
         @keydown=${this.onKeyDown}
         @scroll=${this.onTabsScroll}
@@ -56,38 +474,287 @@
         <slot @slotchange=${this.onSlotChange}></slot>
         <div
           id="selection-indicator"
-          class=${x.o(this.shouldAnimate?void 0:"first-position")}
+          class=${ifDefined_js.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 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()}}c([s.n({type:Boolean})],n.prototype,"auto");c([s.n({type:Boolean,reflect:!0})],n.prototype,"compact");c([s.n({reflect:!0})],n.prototype,"dir");c([s.n({reflect:!0})],n.prototype,"direction");c([s.n({type:Boolean,reflect:!0})],n.prototype,"emphasized");c([s.n()],n.prototype,"label");c([s.n({type:Boolean})],n.prototype,"enableTabsScroll");c([s.n({type:Boolean,reflect:!0})],n.prototype,"quiet");c([s.n({attribute:!1})],n.prototype,"selectionIndicatorStyle");c([s.n({attribute:!1})],n.prototype,"shouldAnimate");c([f.e("slot")],n.prototype,"slotEl");c([f.e("#list")],n.prototype,"tabList");c([s.n({reflect:!0})],n.prototype,"selected");const j=':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,b=(l,t,o,i)=>{for(var e=void 0,a=l.length-1,r;a>=0;a--)(r=l[a])&&(e=r(t,o,e)||e);return e&&H(t,o,e),e};class d extends S.SizedMixin(s.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 C(this,{target:this,callback:()=>{this._updateScrollState()}})}static get styles(){return[s.r(j),s.r(T)]}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 s.x`
+    `;
+  }
+  willUpdate(changes) {
+    if (!this.hasUpdated) {
+      const selectedChild = this.querySelector(
+        ":scope > [selected]"
+      );
+      if (selectedChild) {
+        this.selectTarget(selectedChild);
+      }
+    }
+    super.willUpdate(changes);
+    if (changes.has("selected")) {
+      if (this.tabs.length > 0) {
+        this.updateCheckedState();
+      }
+      if (changes.get("selected")) {
+        const previous = this.querySelector(
+          `[role="tabpanel"][value="${changes.get("selected")}"]`
+        );
+        if (previous) previous.selected = false;
+      }
+      const next = this.querySelector(
+        `[role="tabpanel"][value="${this.selected}"]`
+      );
+      if (next) next.selected = true;
+    }
+    if (changes.has("direction")) {
+      if (this.direction === "horizontal") {
+        this.removeAttribute("aria-orientation");
+      } else {
+        this.setAttribute("aria-orientation", "vertical");
+      }
+    }
+    if (changes.has("dir")) {
+      this.updateSelectionIndicator();
+    }
+    if (changes.has("disabled")) {
+      if (this.disabled) {
+        this.setAttribute("aria-disabled", "true");
+      } else {
+        this.removeAttribute("aria-disabled");
+      }
+    }
+    if (!this.shouldAnimate && changes.get("shouldAnimate") !== void 0) {
+      this.shouldAnimate = true;
+    }
+  }
+  selectTarget(target) {
+    const value = target.getAttribute("value");
+    if (value) {
+      const selected = this.selected;
+      this.selected = value;
+      const applyDefault = this.dispatchEvent(
+        new Event("change", {
+          cancelable: true
+        })
+      );
+      if (!applyDefault) {
+        this.selected = selected;
+      }
+    }
+  }
+  onSlotChange() {
+    this.tabs = this.slotEl.assignedElements().filter((el) => el.getAttribute("role") === "tab");
+    this.updateCheckedState();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("resize", this.updateSelectionIndicator);
+    if ("fonts" in document) {
+      document.fonts.addEventListener("loadingdone", this.updateSelectionIndicator);
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.updateSelectionIndicator);
+    if ("fonts" in document) {
+      document.fonts.removeEventListener("loadingdone", this.updateSelectionIndicator);
+    }
+    super.disconnectedCallback();
+  }
+}
+__decorateClass$1([
+  decorators_js.property({ type: Boolean })
+], LuzmoTabs.prototype, "auto");
+__decorateClass$1([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoTabs.prototype, "compact");
+__decorateClass$1([
+  decorators_js.property({ reflect: true })
+], LuzmoTabs.prototype, "dir");
+__decorateClass$1([
+  decorators_js.property({ reflect: true })
+], LuzmoTabs.prototype, "direction");
+__decorateClass$1([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoTabs.prototype, "emphasized");
+__decorateClass$1([
+  decorators_js.property()
+], LuzmoTabs.prototype, "label");
+__decorateClass$1([
+  decorators_js.property({ type: Boolean })
+], LuzmoTabs.prototype, "enableTabsScroll");
+__decorateClass$1([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoTabs.prototype, "quiet");
+__decorateClass$1([
+  decorators_js.property({ attribute: false })
+], LuzmoTabs.prototype, "selectionIndicatorStyle");
+__decorateClass$1([
+  decorators_js.property({ attribute: false })
+], LuzmoTabs.prototype, "shouldAnimate");
+__decorateClass$1([
+  decorators_js.query("slot")
+], LuzmoTabs.prototype, "slotEl");
+__decorateClass$1([
+  decorators_js.query("#list")
+], LuzmoTabs.prototype, "tabList");
+__decorateClass$1([
+  decorators_js.property({ reflect: true })
+], LuzmoTabs.prototype, "selected");
+const styles = ':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 __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class LuzmoTabsOverflow extends sizedMixin.SizedMixin(base.LuzmoElement) {
+  constructor() {
+    super();
+    this.compact = false;
+    this.labelPrevious = "Scroll to previous tabs";
+    this.labelNext = "Scroll to next tabs";
+    this.overflowState = {
+      canScrollLeft: false,
+      canScrollRight: false
+    };
+    this.scrollFactor = 0.5;
+    this.resizeController = new resizeController_js.ResizeController(this, {
+      target: this,
+      callback: () => {
+        this._updateScrollState();
+      }
+    });
+  }
+  static get styles() {
+    return [lit.unsafeCSS(styles), lit.unsafeCSS(tabSizes)];
+  }
+  get scrollContent() {
+    return this.tabs;
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    const [tabs] = this.scrollContent;
+    if (tabs) {
+      tabs.enableTabsScroll = true;
+    }
+    this.resizeController.observe(this.overflowContainer);
+  }
+  async _handleSlotChange() {
+    const [tabsElement] = this.scrollContent;
+    await (tabsElement == null ? void 0 : tabsElement.updateComplete);
+    this._updateScrollState();
+  }
+  _updateScrollState() {
+    const { scrollContent, overflowState } = this;
+    if (scrollContent) {
+      const [tabsElement] = this.scrollContent;
+      const { canScrollLeft, canScrollRight } = (tabsElement == null ? void 0 : tabsElement.scrollState) || {
+        canScrollLeft: false,
+        canScrollRight: false
+      };
+      this.overflowState = {
+        ...overflowState,
+        canScrollLeft,
+        canScrollRight
+      };
+    }
+  }
+  _handleScrollClick(event) {
+    const currentTarget = event.currentTarget;
+    const [tabsElement] = this.scrollContent;
+    const dist = tabsElement.clientWidth * this.scrollFactor;
+    const left = currentTarget.classList.contains("left-scroll") ? -dist : dist;
+    tabsElement.scrollTabs(left, "smooth");
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("dir")) {
+      this._updateScrollState();
+    }
+  }
+  render() {
+    const { canScrollRight, canScrollLeft } = this.overflowState;
+    const ariaLabelPrevious = this.labelPrevious;
+    const ariaLabelNext = this.labelNext;
+    return lit.html`
       <div
-        class=${m.e({"tabs-overflow-container":!0,"left-shadow":o,"right-shadow":t})}
+        class=${classMap_js.classMap({
+      "tabs-overflow-container": true,
+      "left-shadow": canScrollLeft,
+      "right-shadow": canScrollRight
+    })}
       >
         <luzmo-action-button
-          class=${m.e({"left-scroll":!0,show:o})}
-          aria-label=${i}
+          class=${classMap_js.classMap({
+      "left-scroll": true,
+      show: canScrollLeft
+    })}
+          aria-label=${ariaLabelPrevious}
           quiet
           dir="rtl"
           tabindex="-1"
           @click=${this._handleScrollClick}
         >
-          <luzmo-icon slot="icon" .icon=${w.k}></luzmo-icon>
+          <luzmo-icon slot="icon" .icon=${icons.luzmoAngleLeft}></luzmo-icon>
         </luzmo-action-button>
         <luzmo-action-button
-          class=${m.e({"right-scroll":!0,show:t})}
-          aria-label=${e}
+          class=${classMap_js.classMap({
+      "right-scroll": true,
+      show: canScrollRight
+    })}
+          aria-label=${ariaLabelNext}
           quiet
           tabindex="-1"
           @click=${this._handleScrollClick}
         >
-          <luzmo-icon slot="icon" .icon=${w.S}></luzmo-icon>
+          <luzmo-icon slot="icon" .icon=${icons.luzmoAngleRight}></luzmo-icon>
         </luzmo-action-button>
         <slot
           @slotchange=${this._handleSlotChange}
           @luzmo-tabs-scroll=${this._updateScrollState}
         ></slot>
       </div>
-    `}}b([s.n({type:Boolean,reflect:!0})],d.prototype,"compact");b([s.n({type:String,attribute:"label-previous"})],d.prototype,"labelPrevious");b([s.n({type:String,attribute:"label-next"})],d.prototype,"labelNext");b([s.n({reflect:!0})],d.prototype,"dir");b([A.r()],d.prototype,"overflowState");b([_.o({selector:"luzmo-tabs",flatten:!0})],d.prototype,"tabs");b([f.e(".tabs-overflow-container")],d.prototype,"overflowContainer");customElements.get("luzmo-tab")||customElements.define("luzmo-tab",u);customElements.get("luzmo-tabs")||customElements.define("luzmo-tabs",n);customElements.get("luzmo-tab-panel")||customElements.define("luzmo-tab-panel",p);customElements.get("luzmo-tabs-overflow")||customElements.define("luzmo-tabs-overflow",d);exports.LuzmoTab=u;exports.LuzmoTabPanel=p;exports.LuzmoTabs=n;exports.LuzmoTabsOverflow=d;
+    `;
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoTabsOverflow.prototype, "compact");
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "label-previous" })
+], LuzmoTabsOverflow.prototype, "labelPrevious");
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "label-next" })
+], LuzmoTabsOverflow.prototype, "labelNext");
+__decorateClass([
+  decorators_js.property({ reflect: true })
+], LuzmoTabsOverflow.prototype, "dir");
+__decorateClass([
+  decorators_js.state()
+], LuzmoTabsOverflow.prototype, "overflowState");
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "luzmo-tabs", flatten: true })
+], LuzmoTabsOverflow.prototype, "tabs");
+__decorateClass([
+  decorators_js.query(".tabs-overflow-container")
+], LuzmoTabsOverflow.prototype, "overflowContainer");
+if (!customElements.get("luzmo-tab")) {
+  customElements.define("luzmo-tab", LuzmoTab);
+}
+if (!customElements.get("luzmo-tabs")) {
+  customElements.define("luzmo-tabs", LuzmoTabs);
+}
+if (!customElements.get("luzmo-tab-panel")) {
+  customElements.define("luzmo-tab-panel", LuzmoTabPanel);
+}
+if (!customElements.get("luzmo-tabs-overflow")) {
+  customElements.define("luzmo-tabs-overflow", LuzmoTabsOverflow);
+}
+exports.LuzmoTab = LuzmoTab;
+exports.LuzmoTabPanel = LuzmoTabPanel;
+exports.LuzmoTabs = LuzmoTabs;
+exports.LuzmoTabsOverflow = LuzmoTabsOverflow;