@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/tabs/tabs.d.ts

@@ -1,15 +1,10 @@
 import { ResizeController } from '@lit-labs/observers/resize-controller.js';
-import { CSSResult, CSSResultArray, PropertyValueMap, PropertyValues, TemplateResult } from 'lit';
+import { CSSResultArray, PropertyValueMap, PropertyValues, TemplateResult } from 'lit';
 import { Focusable } from '../../utils/focusable.js';
 import { RovingTabindexController } from '../../utils/reactive-controllers/roving-tabindex.js';
+import { ScaledIndicator } from '../../utils/scaled-indicator.js';
 import { LuzmoTab } from './tab';
-export declare const ScaledIndicator: {
-    baseSize: 100;
-    noSelectionStyle: string;
-    transformX(left: number, width: number): string;
-    transformY(top: number, height: number): string;
-    baseStyles(): CSSResult;
-};
+export { ScaledIndicator };
 /**
  * Given that the scroll needs to be on the right side of the viewport.
  * Returns the coordonate x it needs to scroll so that the tab with given index is visible.
@@ -102,4 +97,3 @@ export declare class LuzmoTabs extends LuzmoTabs_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
-export {};

package/components/tabs-BfTgzdid.cjs

@@ -0,0 +1,76 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./decorate-B2wePfNm.cjs`),t=require(`./sized-mixin-StFA4y0J.cjs`),n=require(`./focus-visible-B0NNezGc.cjs`),r=require(`./focusable-CupEoHmn.cjs`),i=require(`./roving-tabindex-B7x5ePUB.cjs`);require(`./icon-B7hKwn_q.cjs`);const a=require(`./observe-slot-text-BhTcGuHY.cjs`),o=require(`./random-id-B51lUxUB.cjs`);require(`./action-button-G0PWSrZo.cjs`);const s=require(`./observe-slot-presence-Dx8hzNzK.cjs`),c=require(`./scaled-indicator-p8-3k2cJ.cjs`);let l=require(`lit`),u=require(`lit/decorators.js`),d=require(`@luzmo/icons`),f=require(`lit/directives/if-defined.js`),p=require(`lit/directives/class-map.js`),m=require(`lit/decorators/property.js`),h=require(`@lit-labs/observers/intersection-controller.js`),g=require(`@lit-labs/observers/resize-controller.js`);var _=`: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-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);border:var(--luzmo-tabs-focus-indicator-width,var(--tabs-focus-indicator-width)) solid transparent!important}@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)))!important}#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;color:inherit;position:relative}#item-label{z-index:1;position:relative}:host([selected]),:host([selected]) ::slotted([slot=icon]),:host([selected]) #item-label{color:highlighttext}}:host([vertical]){flex-direction:column;justify-content:center;align-items:center;height:auto;display:flex}: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)}`,v=class extends n.t(a.t(s.t(e.n,`[slot="icon"]`),``)){constructor(...e){super(...e),this.disabled=!1,this.label=``,this.selected=!1,this.vertical=!1,this.value=``}static get styles(){return[(0,l.unsafeCSS)(_)]}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return!!this.label||this.slotHasContent}render(){return l.html`
+      ${this.hasIcon?l.html` <slot name="icon"></slot> `:l.nothing}
+      <label id="item-label" ?hidden=${!this.hasLabel}>
+        <slot>${this.label}</slot>
+      </label>
+    `}firstUpdated(e){super.firstUpdated(e),this.setAttribute(`role`,`tab`),this.hasAttribute(`id`)||(this.id=`luzmo-tab-${o.t()}`)}updated(e){super.updated(e),e.has(`selected`)&&(this.setAttribute(`aria-selected`,this.selected?`true`:`false`),this.setAttribute(`tabindex`,this.selected?`0`:`-1`)),e.has(`disabled`)&&(this.disabled?this.setAttribute(`aria-disabled`,`true`):this.removeAttribute(`aria-disabled`))}};e.t([(0,m.property)({type:Boolean,reflect:!0})],v.prototype,`disabled`,void 0),e.t([(0,m.property)({reflect:!0})],v.prototype,`label`,void 0),e.t([(0,m.property)({type:Boolean,reflect:!0})],v.prototype,`selected`,void 0),e.t([(0,m.property)({type:Boolean,reflect:!0})],v.prototype,`vertical`,void 0),e.t([(0,m.property)({type:String,reflect:!0})],v.prototype,`value`,void 0);var y=`:host{font-family:var(--luzmo-tab-panel-font-family,var(--luzmo-font-family));display:inline-flex}: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))}`,b=class extends e.n{constructor(...e){super(...e),this.selected=!1,this.value=``}static get styles(){return[(0,l.unsafeCSS)(y)]}handleFocusin(){this.removeAttribute(`tabindex`)}handleFocusout(){this.tabIndex=this.selected?0:-1}render(){return l.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.t()}`)}updated(e){e.has(`selected`)&&(this.selected?(this.removeAttribute(`aria-hidden`),this.tabIndex=0):(this.setAttribute(`aria-hidden`,`true`),this.tabIndex=-1))}};e.t([(0,m.property)({type:Boolean,reflect:!0})],b.prototype,`selected`,void 0),e.t([(0,m.property)({type:String,reflect:!0})],b.prototype,`value`,void 0);var x=`#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)))}`,S=`#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)}:is(:host([direction^=vertical]) #list:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),:host([dir=rtl][direction^=vertical]) #list){--luzmo-tabs-list-background-direction:var(--luzmo-tabs-list-background-direction-vertical,left)}:is(:host([direction^=vertical-right]) #list:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),: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:0 0;border-color:#0000;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:#0000}: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{grid-template-columns:100%;display:grid;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}`;function C(e,t,n,r){let i=n[e+(t===`rtl`?-1:1)],a=r.scrollLeft+r.offsetWidth;return i?i.offsetLeft-r.offsetWidth:a}function w(e,t,n,r){let i=n[e+(t===`rtl`?1:-1)],a=t===`rtl`?-r.offsetWidth:0;return i?i.offsetLeft+i.offsetWidth:a}var T=class extends t.n(r.t,{noDefaultSize:!0}){static get styles(){return[(0,l.unsafeCSS)(x),(0,l.unsafeCSS)(S),c.t.baseStyles()]}set tabs(e){e!==this.tabs&&(this._tabs.forEach(e=>{this.resizeController.unobserve(e)}),e.forEach(e=>{this.resizeController.observe(e)}),this._tabs=e,this.rovingTabindexController.clearElementCache())}get tabs(){return this._tabs}constructor(){super(),this.auto=!1,this.compact=!1,this.direction=`horizontal`,this.emphasized=!1,this.label=``,this.enableTabsScroll=!1,this.quiet=!1,this.selectionIndicatorStyle=c.t.noSelectionStyle,this.shouldAnimate=!1,this.selected=``,this._tabs=[],this.resizeController=new g.ResizeController(this,{callback:()=>{this.updateSelectionIndicator()}}),this.rovingTabindexController=new i.t(this,{focusInIndex:e=>{let t=0;return e.find((e,n)=>{let r=this.selected?e.value===this.selected:!e.disabled;return t=n,r})?t:-1},direction:()=>`both`,elementEnterAction:e=>{this.auto&&(this.shouldAnimate=!0,this.selectTarget(e))},elements:()=>this.tabs,isFocusableElement:e=>!this.disabled&&!e.disabled,listenerScope:()=>this.tabList}),this.onTabsScroll=()=>{this.dispatchEvent(new Event(`luzmo-tabs-scroll`,{bubbles:!0,composed:!0}))},this.onClick=e=>{if(this.disabled)return;let t=e.composedPath().find(e=>e.parentElement===this);!t||t.disabled||(this.shouldAnimate=!0,this.selectTarget(t))},this.onKeyDown=e=>{if(e.code===`Enter`||e.code===`Space`){e.preventDefault();let t=e.target;t&&this.selectTarget(t)}},this.updateCheckedState=()=>{if(this.tabs.forEach(e=>{e.removeAttribute(`selected`)}),this.selected){let e=this.tabs.find(e=>e.value===this.selected);e?e.selected=!0:this.selected=``}else{let e=this.tabs[0];e&&e.setAttribute(`tabindex`,`0`)}this.updateSelectionIndicator()},this.updateSelectionIndicator=async()=>{let e=this.tabs.find(e=>e.selected);if(!e){this.selectionIndicatorStyle=c.t.noSelectionStyle;return}await Promise.all([e.updateComplete,document.fonts?document.fonts.ready:Promise.resolve()]);let{width:t,height:n}=e.getBoundingClientRect();this.selectionIndicatorStyle=this.direction===`horizontal`?c.t.transformX(e.offsetLeft,t):c.t.transformY(e.offsetTop,n)},new h.IntersectionController(this,{config:{root:null,rootMargin:`0px`,threshold:[0,1]},callback:()=>{this.updateSelectionIndicator()}})}get focusElement(){return this.rovingTabindexController.focusInElement||this}limitDeltaToInterval(e,t){return n=>n<e?e:n>t?t:n}scrollTabs(e,t=`smooth`){if(e===0)return;let{scrollLeft:n,clientWidth:r,scrollWidth:i}=this.tabList,a=i-r-Math.abs(n),o=this.dir===`ltr`?this.limitDeltaToInterval(-n,a):this.limitDeltaToInterval(-a,Math.abs(n));this.tabList?.scrollBy({left:o(e),top:0,behavior:t})}get scrollState(){if(this.tabList){let{scrollLeft:e,clientWidth:t,scrollWidth:n}=this.tabList,r=Math.abs(e)>0,i=Math.ceil(Math.abs(e))<n-t;return{canScrollLeft:this.dir===`ltr`?r:i,canScrollRight:this.dir===`ltr`?i:r}}return{}}async getUpdateComplete(){let e=await super.getUpdateComplete(),t=[...this.children].map(e=>e.updateComplete===void 0?Promise.resolve(!0):e.updateComplete);return await Promise.all(t),e}getNecessaryAutoScroll(e){let t=this.tabs[e],n=t.offsetLeft+t.offsetWidth,r=this.tabList.scrollLeft+this.tabList.offsetWidth,i=t.offsetLeft,a=this.tabList.scrollLeft;return n>r?C(e,this.dir,this.tabs,this.tabList):i<a?w(e,this.dir,this.tabs,this.tabList):-1}async scrollToSelection(){if(!this.enableTabsScroll||!this.selected)return;await this.updateComplete;let e=this.tabs.findIndex(e=>e.value===this.selected);if(e!==-1&&this.tabList){let t=this.getNecessaryAutoScroll(e);t!==-1&&this.tabList.scrollTo({left:t})}}updated(e){super.updated(e),e.has(`selected`)&&this.scrollToSelection()}managePanels({target:e}){e.assignedElements().map(e=>{let{value:t,id:n}=e,r=this.querySelector(`[role="tab"][value="${t}"]`);r&&(r.setAttribute(`aria-controls`,n),e.setAttribute(`aria-labelledby`,r.id)),e.selected=t===this.selected})}render(){return l.html`
+      <div
+        class=${(0,p.classMap)({scroll:this.enableTabsScroll})}
+        aria-label=${(0,f.ifDefined)(this.label??void 0)}
+        @click=${this.onClick}
+        @keydown=${this.onKeyDown}
+        @scroll=${this.onTabsScroll}
+        id="list"
+        role="tablist"
+        part="tablist"
+      >
+        <slot @slotchange=${this.onSlotChange}></slot>
+        <div
+          id="selection-indicator"
+          class=${(0,f.ifDefined)(this.shouldAnimate?void 0:`first-position`)}
+          style=${this.selectionIndicatorStyle}
+          role="presentation"
+        ></div>
+      </div>
+      <slot name="tab-panel" @slotchange=${this.managePanels}></slot>
+    `}willUpdate(e){if(!this.hasUpdated){let e=this.querySelector(`:scope > [selected]`);e&&this.selectTarget(e)}if(super.willUpdate(e),e.has(`selected`)){if(this.tabs.length>0&&this.updateCheckedState(),e.get(`selected`)){let t=this.querySelector(`[role="tabpanel"][value="${e.get(`selected`)}"]`);t&&(t.selected=!1)}let t=this.querySelector(`[role="tabpanel"][value="${this.selected}"]`);t&&(t.selected=!0)}e.has(`direction`)&&(this.direction===`horizontal`?this.removeAttribute(`aria-orientation`):this.setAttribute(`aria-orientation`,`vertical`)),e.has(`dir`)&&this.updateSelectionIndicator(),e.has(`disabled`)&&(this.disabled?this.setAttribute(`aria-disabled`,`true`):this.removeAttribute(`aria-disabled`)),!this.shouldAnimate&&e.get(`shouldAnimate`)!==void 0&&(this.shouldAnimate=!0)}selectTarget(e){let t=e.getAttribute(`value`);if(t){let e=this.selected;this.selected=t,this.dispatchEvent(new Event(`change`,{cancelable:!0}))||(this.selected=e)}}onSlotChange(){this.tabs=this.slotEl.assignedElements().filter(e=>e.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()}};e.t([(0,u.property)({type:Boolean})],T.prototype,`auto`,void 0),e.t([(0,u.property)({type:Boolean,reflect:!0})],T.prototype,`compact`,void 0),e.t([(0,u.property)({reflect:!0})],T.prototype,`dir`,void 0),e.t([(0,u.property)({reflect:!0})],T.prototype,`direction`,void 0),e.t([(0,u.property)({type:Boolean,reflect:!0})],T.prototype,`emphasized`,void 0),e.t([(0,u.property)()],T.prototype,`label`,void 0),e.t([(0,u.property)({type:Boolean})],T.prototype,`enableTabsScroll`,void 0),e.t([(0,u.property)({type:Boolean,reflect:!0})],T.prototype,`quiet`,void 0),e.t([(0,u.property)({attribute:!1})],T.prototype,`selectionIndicatorStyle`,void 0),e.t([(0,u.property)({attribute:!1})],T.prototype,`shouldAnimate`,void 0),e.t([(0,u.query)(`slot`)],T.prototype,`slotEl`,void 0),e.t([(0,u.query)(`#list`)],T.prototype,`tabList`,void 0),e.t([(0,u.property)({reflect:!0})],T.prototype,`selected`,void 0);var E=`:host{--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));width:100%;inset:0}: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));z-index:2;text-align:center;box-shadow:none;color:var(--luzmo-tabs-overflow-icon-color,var(--tabs-overflow-icon-color));background:0 0;border:none;position:absolute}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;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;position:absolute;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}`,D=class extends t.n(e.n){static get styles(){return[(0,l.unsafeCSS)(E),(0,l.unsafeCSS)(x)]}get scrollContent(){return this.tabs}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 g.ResizeController(this,{target:this,callback:()=>{this._updateScrollState()}})}firstUpdated(e){super.firstUpdated(e);let[t]=this.scrollContent;t&&(t.enableTabsScroll=!0),this.resizeController.observe(this.overflowContainer)}async _handleSlotChange(){let[e]=this.scrollContent;await e?.updateComplete,this._updateScrollState()}_updateScrollState(){let{scrollContent:e,overflowState:t}=this;if(e){let[e]=this.scrollContent,{canScrollLeft:n,canScrollRight:r}=e?.scrollState||{canScrollLeft:!1,canScrollRight:!1};this.overflowState={...t,canScrollLeft:n,canScrollRight:r}}}_handleScrollClick(e){let t=e.currentTarget,[n]=this.scrollContent,r=n.clientWidth*this.scrollFactor,i=t.classList.contains(`left-scroll`)?-r:r;n.scrollTabs(i,`smooth`)}updated(e){super.updated(e),e.has(`dir`)&&this._updateScrollState()}render(){let{canScrollRight:e,canScrollLeft:t}=this.overflowState,n=this.labelPrevious,r=this.labelNext;return l.html`
+      <div
+        class=${(0,p.classMap)({"tabs-overflow-container":!0,"left-shadow":t,"right-shadow":e})}
+      >
+        <luzmo-action-button
+          class=${(0,p.classMap)({"left-scroll":!0,show:t})}
+          aria-label=${n}
+          quiet
+          dir="rtl"
+          tabindex="-1"
+          @click=${this._handleScrollClick}
+        >
+          <luzmo-icon slot="icon" .icon=${d.luzmoAngleLeft}></luzmo-icon>
+        </luzmo-action-button>
+        <luzmo-action-button
+          class=${(0,p.classMap)({"right-scroll":!0,show:e})}
+          aria-label=${r}
+          quiet
+          tabindex="-1"
+          @click=${this._handleScrollClick}
+        >
+          <luzmo-icon slot="icon" .icon=${d.luzmoAngleRight}></luzmo-icon>
+        </luzmo-action-button>
+        <slot
+          @slotchange=${this._handleSlotChange}
+          @luzmo-tabs-scroll=${this._updateScrollState}
+        ></slot>
+      </div>
+    `}};e.t([(0,u.property)({type:Boolean,reflect:!0})],D.prototype,`compact`,void 0),e.t([(0,u.property)({type:String,attribute:`label-previous`})],D.prototype,`labelPrevious`,void 0),e.t([(0,u.property)({type:String,attribute:`label-next`})],D.prototype,`labelNext`,void 0),e.t([(0,u.property)({reflect:!0})],D.prototype,`dir`,void 0),e.t([(0,u.state)()],D.prototype,`overflowState`,void 0),e.t([(0,u.queryAssignedElements)({selector:`luzmo-tabs`,flatten:!0})],D.prototype,`tabs`,void 0),e.t([(0,u.query)(`.tabs-overflow-container`)],D.prototype,`overflowContainer`,void 0),customElements.get(`luzmo-tab`)||customElements.define(`luzmo-tab`,v),customElements.get(`luzmo-tabs`)||customElements.define(`luzmo-tabs`,T),customElements.get(`luzmo-tab-panel`)||customElements.define(`luzmo-tab-panel`,b),customElements.get(`luzmo-tabs-overflow`)||customElements.define(`luzmo-tabs-overflow`,D),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return D}});

package/components/tabs-BthdwrmW.js

@@ -0,0 +1,434 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { n as e, t } from "./decorate-aGxJUVxg.js";
+import { n } from "./sized-mixin-DaBoZkVS.js";
+import { t as r } from "./focus-visible-CrooVCUu.js";
+import { t as i } from "./focusable-BmS8IzhH.js";
+import { t as a } from "./roving-tabindex-BP6mQbXf.js";
+import "./icon-CwBAE1eU.js";
+import { t as o } from "./observe-slot-text-Ddf1OC6F.js";
+import { t as s } from "./random-id-Dd4boCPV.js";
+import "./action-button-B4_UEJle.js";
+import { t as c } from "./observe-slot-presence-BCqd3VSd.js";
+import { t as l } from "./scaled-indicator-BcO2BOsf.js";
+import { html as u, nothing as d, unsafeCSS as f } from "lit";
+import { property as p, query as m, queryAssignedElements as h, state as g } from "lit/decorators.js";
+import { luzmoAngleLeft as _, luzmoAngleRight as v } from "@luzmo/icons";
+import { ifDefined as y } from "lit/directives/if-defined.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { property as x } from "lit/decorators/property.js";
+import { IntersectionController as S } from "@lit-labs/observers/intersection-controller.js";
+import { ResizeController as C } from "@lit-labs/observers/resize-controller.js";
+//#region src/components/tabs/tab.module.scss?inline
+var w = ":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-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);border:var(--luzmo-tabs-focus-indicator-width,var(--tabs-focus-indicator-width)) solid transparent!important}@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)))!important}#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;color:inherit;position:relative}#item-label{z-index:1;position:relative}:host([selected]),:host([selected]) ::slotted([slot=icon]),:host([selected]) #item-label{color:highlighttext}}:host([vertical]){flex-direction:column;justify-content:center;align-items:center;height:auto;display:flex}: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)}", T = class extends r(o(c(e, "[slot=\"icon\"]"), "")) {
+	constructor(...e) {
+		super(...e), this.disabled = !1, this.label = "", this.selected = !1, this.vertical = !1, this.value = "";
+	}
+	static get styles() {
+		return [f(w)];
+	}
+	get hasIcon() {
+		return this.slotContentIsPresent;
+	}
+	get hasLabel() {
+		return !!this.label || this.slotHasContent;
+	}
+	render() {
+		return u`
+      ${this.hasIcon ? u` <slot name="icon"></slot> ` : d}
+      <label id="item-label" ?hidden=${!this.hasLabel}>
+        <slot>${this.label}</slot>
+      </label>
+    `;
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.setAttribute("role", "tab"), this.hasAttribute("id") || (this.id = `luzmo-tab-${s()}`);
+	}
+	updated(e) {
+		super.updated(e), e.has("selected") && (this.setAttribute("aria-selected", this.selected ? "true" : "false"), this.setAttribute("tabindex", this.selected ? "0" : "-1")), e.has("disabled") && (this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
+	}
+};
+t([x({
+	type: Boolean,
+	reflect: !0
+})], T.prototype, "disabled", void 0), t([x({ reflect: !0 })], T.prototype, "label", void 0), t([x({
+	type: Boolean,
+	reflect: !0
+})], T.prototype, "selected", void 0), t([x({
+	type: Boolean,
+	reflect: !0
+})], T.prototype, "vertical", void 0), t([x({
+	type: String,
+	reflect: !0
+})], T.prototype, "value", void 0);
+//#endregion
+//#region src/components/tabs/tab-panel.module.scss?inline
+var E = ":host{font-family:var(--luzmo-tab-panel-font-family,var(--luzmo-font-family));display:inline-flex}: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))}", D = class extends e {
+	constructor(...e) {
+		super(...e), this.selected = !1, this.value = "";
+	}
+	static get styles() {
+		return [f(E)];
+	}
+	handleFocusin() {
+		this.removeAttribute("tabindex");
+	}
+	handleFocusout() {
+		this.tabIndex = this.selected ? 0 : -1;
+	}
+	render() {
+		return u`
+      <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-${s()}`);
+	}
+	updated(e) {
+		e.has("selected") && (this.selected ? (this.removeAttribute("aria-hidden"), this.tabIndex = 0) : (this.setAttribute("aria-hidden", "true"), this.tabIndex = -1));
+	}
+};
+t([x({
+	type: Boolean,
+	reflect: !0
+})], D.prototype, "selected", void 0), t([x({
+	type: String,
+	reflect: !0
+})], D.prototype, "value", void 0);
+//#endregion
+//#region src/components/tabs/tabs-sizes.module.scss?inline
+var O = "#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)))}", k = "#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)}:is(:host([direction^=vertical]) #list:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),:host([dir=rtl][direction^=vertical]) #list){--luzmo-tabs-list-background-direction:var(--luzmo-tabs-list-background-direction-vertical,left)}:is(:host([direction^=vertical-right]) #list:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),: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:0 0;border-color:#0000;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:#0000}: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{grid-template-columns:100%;display:grid;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}";
+//#endregion
+//#region src/components/tabs/tabs.ts
+function A(e, t, n, r) {
+	let i = n[e + (t === "rtl" ? -1 : 1)], a = r.scrollLeft + r.offsetWidth;
+	return i ? i.offsetLeft - r.offsetWidth : a;
+}
+function j(e, t, n, r) {
+	let i = n[e + (t === "rtl" ? 1 : -1)], a = t === "rtl" ? -r.offsetWidth : 0;
+	return i ? i.offsetLeft + i.offsetWidth : a;
+}
+var M = class extends n(i, { noDefaultSize: !0 }) {
+	static get styles() {
+		return [
+			f(O),
+			f(k),
+			l.baseStyles()
+		];
+	}
+	set tabs(e) {
+		e !== this.tabs && (this._tabs.forEach((e) => {
+			this.resizeController.unobserve(e);
+		}), e.forEach((e) => {
+			this.resizeController.observe(e);
+		}), this._tabs = e, this.rovingTabindexController.clearElementCache());
+	}
+	get tabs() {
+		return this._tabs;
+	}
+	constructor() {
+		super(), this.auto = !1, this.compact = !1, this.direction = "horizontal", this.emphasized = !1, this.label = "", this.enableTabsScroll = !1, this.quiet = !1, this.selectionIndicatorStyle = l.noSelectionStyle, this.shouldAnimate = !1, this.selected = "", this._tabs = [], this.resizeController = new C(this, { callback: () => {
+			this.updateSelectionIndicator();
+		} }), this.rovingTabindexController = new a(this, {
+			focusInIndex: (e) => {
+				let t = 0;
+				return e.find((e, n) => {
+					let r = this.selected ? e.value === this.selected : !e.disabled;
+					return t = n, r;
+				}) ? t : -1;
+			},
+			direction: () => "both",
+			elementEnterAction: (e) => {
+				this.auto && (this.shouldAnimate = !0, this.selectTarget(e));
+			},
+			elements: () => this.tabs,
+			isFocusableElement: (e) => !this.disabled && !e.disabled,
+			listenerScope: () => this.tabList
+		}), this.onTabsScroll = () => {
+			this.dispatchEvent(new Event("luzmo-tabs-scroll", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.onClick = (e) => {
+			if (this.disabled) return;
+			let t = e.composedPath().find((e) => e.parentElement === this);
+			!t || t.disabled || (this.shouldAnimate = !0, this.selectTarget(t));
+		}, this.onKeyDown = (e) => {
+			if (e.code === "Enter" || e.code === "Space") {
+				e.preventDefault();
+				let t = e.target;
+				t && this.selectTarget(t);
+			}
+		}, this.updateCheckedState = () => {
+			if (this.tabs.forEach((e) => {
+				e.removeAttribute("selected");
+			}), this.selected) {
+				let e = this.tabs.find((e) => e.value === this.selected);
+				e ? e.selected = !0 : this.selected = "";
+			} else {
+				let e = this.tabs[0];
+				e && e.setAttribute("tabindex", "0");
+			}
+			this.updateSelectionIndicator();
+		}, this.updateSelectionIndicator = async () => {
+			let e = this.tabs.find((e) => e.selected);
+			if (!e) {
+				this.selectionIndicatorStyle = l.noSelectionStyle;
+				return;
+			}
+			await Promise.all([e.updateComplete, document.fonts ? document.fonts.ready : Promise.resolve()]);
+			let { width: t, height: n } = e.getBoundingClientRect();
+			this.selectionIndicatorStyle = this.direction === "horizontal" ? l.transformX(e.offsetLeft, t) : l.transformY(e.offsetTop, n);
+		}, new S(this, {
+			config: {
+				root: null,
+				rootMargin: "0px",
+				threshold: [0, 1]
+			},
+			callback: () => {
+				this.updateSelectionIndicator();
+			}
+		});
+	}
+	get focusElement() {
+		return this.rovingTabindexController.focusInElement || this;
+	}
+	limitDeltaToInterval(e, t) {
+		return (n) => n < e ? e : n > t ? t : n;
+	}
+	scrollTabs(e, t = "smooth") {
+		if (e === 0) return;
+		let { scrollLeft: n, clientWidth: r, scrollWidth: i } = this.tabList, a = i - r - Math.abs(n), o = this.dir === "ltr" ? this.limitDeltaToInterval(-n, a) : this.limitDeltaToInterval(-a, Math.abs(n));
+		this.tabList?.scrollBy({
+			left: o(e),
+			top: 0,
+			behavior: t
+		});
+	}
+	get scrollState() {
+		if (this.tabList) {
+			let { scrollLeft: e, clientWidth: t, scrollWidth: n } = this.tabList, r = Math.abs(e) > 0, i = Math.ceil(Math.abs(e)) < n - t;
+			return {
+				canScrollLeft: this.dir === "ltr" ? r : i,
+				canScrollRight: this.dir === "ltr" ? i : r
+			};
+		}
+		return {};
+	}
+	async getUpdateComplete() {
+		let e = await super.getUpdateComplete(), t = [...this.children].map((e) => e.updateComplete === void 0 ? Promise.resolve(!0) : e.updateComplete);
+		return await Promise.all(t), e;
+	}
+	getNecessaryAutoScroll(e) {
+		let t = this.tabs[e], n = t.offsetLeft + t.offsetWidth, r = this.tabList.scrollLeft + this.tabList.offsetWidth, i = t.offsetLeft, a = this.tabList.scrollLeft;
+		return n > r ? A(e, this.dir, this.tabs, this.tabList) : i < a ? j(e, this.dir, this.tabs, this.tabList) : -1;
+	}
+	async scrollToSelection() {
+		if (!this.enableTabsScroll || !this.selected) return;
+		await this.updateComplete;
+		let e = this.tabs.findIndex((e) => e.value === this.selected);
+		if (e !== -1 && this.tabList) {
+			let t = this.getNecessaryAutoScroll(e);
+			t !== -1 && this.tabList.scrollTo({ left: t });
+		}
+	}
+	updated(e) {
+		super.updated(e), e.has("selected") && this.scrollToSelection();
+	}
+	managePanels({ target: e }) {
+		e.assignedElements().map((e) => {
+			let { value: t, id: n } = e, r = this.querySelector(`[role="tab"][value="${t}"]`);
+			r && (r.setAttribute("aria-controls", n), e.setAttribute("aria-labelledby", r.id)), e.selected = t === this.selected;
+		});
+	}
+	render() {
+		return u`
+      <div
+        class=${b({ scroll: this.enableTabsScroll })}
+        aria-label=${y(this.label ?? void 0)}
+        @click=${this.onClick}
+        @keydown=${this.onKeyDown}
+        @scroll=${this.onTabsScroll}
+        id="list"
+        role="tablist"
+        part="tablist"
+      >
+        <slot @slotchange=${this.onSlotChange}></slot>
+        <div
+          id="selection-indicator"
+          class=${y(this.shouldAnimate ? void 0 : "first-position")}
+          style=${this.selectionIndicatorStyle}
+          role="presentation"
+        ></div>
+      </div>
+      <slot name="tab-panel" @slotchange=${this.managePanels}></slot>
+    `;
+	}
+	willUpdate(e) {
+		if (!this.hasUpdated) {
+			let e = this.querySelector(":scope > [selected]");
+			e && this.selectTarget(e);
+		}
+		if (super.willUpdate(e), e.has("selected")) {
+			if (this.tabs.length > 0 && this.updateCheckedState(), e.get("selected")) {
+				let t = this.querySelector(`[role="tabpanel"][value="${e.get("selected")}"]`);
+				t && (t.selected = !1);
+			}
+			let t = this.querySelector(`[role="tabpanel"][value="${this.selected}"]`);
+			t && (t.selected = !0);
+		}
+		e.has("direction") && (this.direction === "horizontal" ? this.removeAttribute("aria-orientation") : this.setAttribute("aria-orientation", "vertical")), e.has("dir") && this.updateSelectionIndicator(), e.has("disabled") && (this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled")), !this.shouldAnimate && e.get("shouldAnimate") !== void 0 && (this.shouldAnimate = !0);
+	}
+	selectTarget(e) {
+		let t = e.getAttribute("value");
+		if (t) {
+			let e = this.selected;
+			this.selected = t, this.dispatchEvent(new Event("change", { cancelable: !0 })) || (this.selected = e);
+		}
+	}
+	onSlotChange() {
+		this.tabs = this.slotEl.assignedElements().filter((e) => e.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();
+	}
+};
+t([p({ type: Boolean })], M.prototype, "auto", void 0), t([p({
+	type: Boolean,
+	reflect: !0
+})], M.prototype, "compact", void 0), t([p({ reflect: !0 })], M.prototype, "dir", void 0), t([p({ reflect: !0 })], M.prototype, "direction", void 0), t([p({
+	type: Boolean,
+	reflect: !0
+})], M.prototype, "emphasized", void 0), t([p()], M.prototype, "label", void 0), t([p({ type: Boolean })], M.prototype, "enableTabsScroll", void 0), t([p({
+	type: Boolean,
+	reflect: !0
+})], M.prototype, "quiet", void 0), t([p({ attribute: !1 })], M.prototype, "selectionIndicatorStyle", void 0), t([p({ attribute: !1 })], M.prototype, "shouldAnimate", void 0), t([m("slot")], M.prototype, "slotEl", void 0), t([m("#list")], M.prototype, "tabList", void 0), t([p({ reflect: !0 })], M.prototype, "selected", void 0);
+//#endregion
+//#region src/components/tabs/tabs-overflow.module.scss?inline
+var N = ":host{--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));width:100%;inset:0}: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));z-index:2;text-align:center;box-shadow:none;color:var(--luzmo-tabs-overflow-icon-color,var(--tabs-overflow-icon-color));background:0 0;border:none;position:absolute}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;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;position:absolute;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}", P = class extends n(e) {
+	static get styles() {
+		return [f(N), f(O)];
+	}
+	get scrollContent() {
+		return this.tabs;
+	}
+	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();
+			}
+		});
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e);
+		let [t] = this.scrollContent;
+		t && (t.enableTabsScroll = !0), this.resizeController.observe(this.overflowContainer);
+	}
+	async _handleSlotChange() {
+		let [e] = this.scrollContent;
+		await e?.updateComplete, this._updateScrollState();
+	}
+	_updateScrollState() {
+		let { scrollContent: e, overflowState: t } = this;
+		if (e) {
+			let [e] = this.scrollContent, { canScrollLeft: n, canScrollRight: r } = e?.scrollState || {
+				canScrollLeft: !1,
+				canScrollRight: !1
+			};
+			this.overflowState = {
+				...t,
+				canScrollLeft: n,
+				canScrollRight: r
+			};
+		}
+	}
+	_handleScrollClick(e) {
+		let t = e.currentTarget, [n] = this.scrollContent, r = n.clientWidth * this.scrollFactor, i = t.classList.contains("left-scroll") ? -r : r;
+		n.scrollTabs(i, "smooth");
+	}
+	updated(e) {
+		super.updated(e), e.has("dir") && this._updateScrollState();
+	}
+	render() {
+		let { canScrollRight: e, canScrollLeft: t } = this.overflowState, n = this.labelPrevious, r = this.labelNext;
+		return u`
+      <div
+        class=${b({
+			"tabs-overflow-container": !0,
+			"left-shadow": t,
+			"right-shadow": e
+		})}
+      >
+        <luzmo-action-button
+          class=${b({
+			"left-scroll": !0,
+			show: t
+		})}
+          aria-label=${n}
+          quiet
+          dir="rtl"
+          tabindex="-1"
+          @click=${this._handleScrollClick}
+        >
+          <luzmo-icon slot="icon" .icon=${_}></luzmo-icon>
+        </luzmo-action-button>
+        <luzmo-action-button
+          class=${b({
+			"right-scroll": !0,
+			show: e
+		})}
+          aria-label=${r}
+          quiet
+          tabindex="-1"
+          @click=${this._handleScrollClick}
+        >
+          <luzmo-icon slot="icon" .icon=${v}></luzmo-icon>
+        </luzmo-action-button>
+        <slot
+          @slotchange=${this._handleSlotChange}
+          @luzmo-tabs-scroll=${this._updateScrollState}
+        ></slot>
+      </div>
+    `;
+	}
+};
+t([p({
+	type: Boolean,
+	reflect: !0
+})], P.prototype, "compact", void 0), t([p({
+	type: String,
+	attribute: "label-previous"
+})], P.prototype, "labelPrevious", void 0), t([p({
+	type: String,
+	attribute: "label-next"
+})], P.prototype, "labelNext", void 0), t([p({ reflect: !0 })], P.prototype, "dir", void 0), t([g()], P.prototype, "overflowState", void 0), t([h({
+	selector: "luzmo-tabs",
+	flatten: !0
+})], P.prototype, "tabs", void 0), t([m(".tabs-overflow-container")], P.prototype, "overflowContainer", void 0), customElements.get("luzmo-tab") || customElements.define("luzmo-tab", T), customElements.get("luzmo-tabs") || customElements.define("luzmo-tabs", M), customElements.get("luzmo-tab-panel") || customElements.define("luzmo-tab-panel", D), customElements.get("luzmo-tabs-overflow") || customElements.define("luzmo-tabs-overflow", P);
+//#endregion
+export { T as i, M as n, D as r, P as t };