@luzmo/lucero 0.0.19 → 0.0.21

package/components/tabs/index.cjs

@@ -0,0 +1,93 @@
+/*! * 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.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../base-CTSOJw6c.cjs"),T=require("../focus-visible-B0P9aY_G.cjs"),L=require("../observe-slot-presence-bc9chhsi.cjs"),I=require("../observe-slot-text-BzdHQBH3.cjs"),S=require("../random-id-CqvckpWe.cjs"),f=require("../query-BL-TJj7K.cjs"),v=require("../class-map-DuvNig0r.cjs"),y=require("../if-defined-D7nbLM5n.cjs"),k=require("../sized-mixin-CDhX3fJn.cjs"),$=require("../focusable-BW4I5ppi.cjs"),E=require("../roving-tabindex-By_fCy_e.cjs"),x=require("@luzmo/icons"),q=require("../state-Bq6oXknJ.cjs"),A=require("../query-assigned-elements-DsKsfk7G.cjs");require("../action-button/index.cjs");require("../icon/index.cjs");const _=':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 P=Object.defineProperty,m=(l,t,e,i)=>{for(var o=void 0,s=l.length-1,r;s>=0;s--)(r=l[s])&&(o=r(t,e,o)||o);return o&&P(t,e,o),o};class u extends T.FocusVisiblePolyfillMixin(I.ObserveSlotText(L.ObserveSlotPresence(a.LuzmoElement,'[slot="icon"]'),"")){constructor(){super(...arguments),this.disabled=!1,this.label="",this.selected=!1,this.vertical=!1,this.value=""}static get styles(){return[a.r(_)]}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return!!this.label||this.slotHasContent}render(){return a.x`
+      ${this.hasIcon?a.x` <slot name="icon"></slot> `:a.E}
+      <label id="item-label" ?hidden=${!this.hasLabel}>
+        ${this.slotHasContent?a.E:this.label}
+        <slot>${this.label}</slot>
+      </label>
+    `}firstUpdated(t){super.firstUpdated(t),this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id=`luzmo-tab-${S.randomID()}`)}updated(t){super.updated(t),t.has("selected")&&(this.setAttribute("aria-selected",this.selected?"true":"false"),this.setAttribute("tabindex",this.selected?"0":"-1")),t.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}m([a.n({type:Boolean,reflect:!0})],u.prototype,"disabled");m([a.n({reflect:!0})],u.prototype,"label");m([a.n({type:Boolean,reflect:!0})],u.prototype,"selected");m([a.n({type:Boolean,reflect:!0})],u.prototype,"vertical");m([a.n({type:String,reflect:!0})],u.prototype,"value");const B=":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 U=Object.defineProperty,w=(l,t,e,i)=>{for(var o=void 0,s=l.length-1,r;s>=0;s--)(r=l[s])&&(o=r(t,e,o)||o);return o&&U(t,e,o),o};class p extends a.LuzmoElement{constructor(){super(...arguments),this.selected=!1,this.value=""}static get styles(){return[a.r(B)]}handleFocusin(){this.removeAttribute("tabindex")}handleFocusout(){this.tabIndex=this.selected?0:-1}render(){return a.x`
+      <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.randomID()}`)}updated(t){t.has("selected")&&(this.selected?(this.removeAttribute("aria-hidden"),this.tabIndex=0):(this.setAttribute("aria-hidden","true"),this.tabIndex=-1))}}w([a.n({type:Boolean,reflect:!0})],p.prototype,"selected");w([a.n({type:String,reflect:!0})],p.prototype,"value");/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class D{constructor(t,{target:e,config:i,callback:o,skipInitial:s}){this.t=new Set,this.o=!1,this.i=!1,this.h=t,e!==null&&this.t.add(e??t),this.o=s??this.o,this.callback=o,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 e;this.value=(e=this.callback)==null?void 0:e.call(this,t,this.u)}hostConnected(){for(const t of this.t)this.observe(t)}hostDisconnected(){this.disconnect()}async hostUpdated(){const t=this.u.takeRecords();t.length&&this.handleChanges(t)}observe(t){this.t.add(t),this.u.observe(t),this.i=!0}unobserve(t){this.t.delete(t),this.u.unobserve(t)}disconnect(){this.u.disconnect()}}/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class C{constructor(t,{target:e,config:i,callback:o,skipInitial:s}){this.t=new Set,this.o=!1,this.i=!1,this.h=t,e!==null&&this.t.add(e??t),this.l=i,this.o=s??this.o,this.callback=o,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 e;this.value=(e=this.callback)==null?void 0:e.call(this,t,this.u)}hostConnected(){for(const t of this.t)this.observe(t)}hostDisconnected(){this.disconnect()}async hostUpdated(){!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 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)) )}",R="#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 F=Object.defineProperty,c=(l,t,e,i)=>{for(var o=void 0,s=l.length-1,r;s>=0;s--)(r=l[s])&&(o=r(t,e,o)||o);return o&&F(t,e,o),o};const b={baseSize:100,noSelectionStyle:"transform: translateX(0px) scaleX(0) scaleY(0)",transformX(l,t){const e=t/this.baseSize;return`transform: translateX(${l}px) scaleX(${e});`},transformY(l,t){const e=t/this.baseSize;return`transform: translateY(${l}px) scaleY(${e});`},baseStyles(){return a.i`
+      :host([direction='vertical-right']) #selection-indicator,
+      :host([direction='vertical']) #selection-indicator {
+        height: ${this.baseSize}px;
+      }
+      :host([dir][direction='horizontal']) #selection-indicator {
+        width: ${this.baseSize}px;
+      }
+    `}};function M(l,t,e,i){const o=l+(t==="rtl"?-1:1),s=e[o],r=i.scrollLeft+i.offsetWidth;return s?s.offsetLeft-i.offsetWidth:r}function W(l,t,e,i){const o=l+(t==="rtl"?1:-1),s=e[o],r=t==="rtl"?-i.offsetWidth:0;return s?s.offsetLeft+s.offsetWidth:r}class n extends k.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=b.noSelectionStyle,this.shouldAnimate=!1,this.selected="",this._tabs=[],this.resizeController=new C(this,{callback:()=>{this.updateSelectionIndicator()}}),this.rovingTabindexController=new E.RovingTabindexController(this,{focusInIndex:t=>{let e=0;return t.find((o,s)=>{const r=this.selected?o.value===this.selected:!o.disabled;return e=s,r})?e:-1},direction:()=>"both",elementEnterAction:t=>{this.auto&&(this.shouldAnimate=!0,this.selectTarget(t))},elements:()=>this.tabs,isFocusableElement:t=>!this.disabled&&!t.disabled,listenerScope:()=>this.tabList}),this.onTabsScroll=()=>{this.dispatchEvent(new Event("luzmo-tabs-scroll",{bubbles:!0,composed:!0}))},this.onClick=t=>{if(this.disabled)return;const e=t.composedPath().find(i=>i.parentElement===this);!e||e.disabled||(this.shouldAnimate=!0,this.selectTarget(e))},this.onKeyDown=t=>{if(t.code==="Enter"||t.code==="Space"){t.preventDefault();const e=t.target;e&&this.selectTarget(e)}},this.updateCheckedState=()=>{if(this.tabs.forEach(t=>{t.removeAttribute("selected")}),this.selected){const t=this.tabs.find(e=>e.value===this.selected);t?t.selected=!0:this.selected=""}else{const t=this.tabs[0];t&&t.setAttribute("tabindex","0")}this.updateSelectionIndicator()},this.updateSelectionIndicator=async()=>{const t=this.tabs.find(o=>o.selected);if(!t){this.selectionIndicatorStyle=b.noSelectionStyle;return}await Promise.all([t.updateComplete,document.fonts?document.fonts.ready:Promise.resolve()]);const{width:e,height:i}=t.getBoundingClientRect();this.selectionIndicatorStyle=this.direction==="horizontal"?b.transformX(t.offsetLeft,e):b.transformY(t.offsetTop,i)},new D(this,{config:{root:null,rootMargin:"0px",threshold:[0,1]},callback:()=>{this.updateSelectionIndicator()}})}static get styles(){return[a.r(O),a.r(R),b.baseStyles()]}set tabs(t){t!==this.tabs&&(this._tabs.forEach(e=>{this.resizeController.unobserve(e)}),t.forEach(e=>{this.resizeController.observe(e)}),this._tabs=t,this.rovingTabindexController.clearElementCache())}get tabs(){return this._tabs}get focusElement(){return this.rovingTabindexController.focusInElement||this}limitDeltaToInterval(t,e){return i=>i<t?t:i>e?e:i}scrollTabs(t,e="smooth"){var g;if(t===0)return;const{scrollLeft:i,clientWidth:o,scrollWidth:s}=this.tabList,r=s-o-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:e})}get scrollState(){if(this.tabList){const{scrollLeft:t,clientWidth:e,scrollWidth:i}=this.tabList,o=Math.abs(t)>0,s=Math.ceil(Math.abs(t))<i-e;return{canScrollLeft:this.dir==="ltr"?o:s,canScrollRight:this.dir==="ltr"?s:o}}return{}}async getUpdateComplete(){const t=await super.getUpdateComplete(),i=[...this.children].map(o=>o.updateComplete!==void 0?o.updateComplete:Promise.resolve(!0));return await Promise.all(i),t}getNecessaryAutoScroll(t){const e=this.tabs[t],i=e.offsetLeft+e.offsetWidth,o=this.tabList.scrollLeft+this.tabList.offsetWidth,s=e.offsetLeft,r=this.tabList.scrollLeft;return i>o?M(t,this.dir,this.tabs,this.tabList):s<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(e=>e.value===this.selected);if(t!==-1&&this.tabList){const e=this.getNecessaryAutoScroll(t);e!==-1&&this.tabList.scrollTo({left:e})}}updated(t){super.updated(t),t.has("selected")&&this.scrollToSelection()}managePanels({target:t}){t.assignedElements().map(i=>{const{value:o,id:s}=i,r=this.querySelector(`[role="tab"][value="${o}"]`);r&&(r.setAttribute("aria-controls",s),i.setAttribute("aria-labelledby",r.id)),i.selected=o===this.selected})}render(){return a.x`
+      <div
+        class=${v.e({scroll:this.enableTabsScroll})}
+        aria-label=${y.o(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.o(this.shouldAnimate?void 0:"first-position")}
+          style=${this.selectionIndicatorStyle}
+          role="presentation"
+        ></div>
+      </div>
+      <slot name="tab-panel" @slotchange=${this.managePanels}></slot>
+    `}willUpdate(t){if(!this.hasUpdated){const e=this.querySelector(":scope > [selected]");e&&this.selectTarget(e)}if(super.willUpdate(t),t.has("selected")){if(this.tabs.length>0&&this.updateCheckedState(),t.get("selected")){const i=this.querySelector(`[role="tabpanel"][value="${t.get("selected")}"]`);i&&(i.selected=!1)}const e=this.querySelector(`[role="tabpanel"][value="${this.selected}"]`);e&&(e.selected=!0)}t.has("direction")&&(this.direction==="horizontal"?this.removeAttribute("aria-orientation"):this.setAttribute("aria-orientation","vertical")),t.has("dir")&&this.updateSelectionIndicator(),t.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")),!this.shouldAnimate&&t.get("shouldAnimate")!==void 0&&(this.shouldAnimate=!0)}selectTarget(t){const e=t.getAttribute("value");if(e){const i=this.selected;this.selected=e,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([a.n({type:Boolean})],n.prototype,"auto");c([a.n({type:Boolean,reflect:!0})],n.prototype,"compact");c([a.n({reflect:!0})],n.prototype,"dir");c([a.n({reflect:!0})],n.prototype,"direction");c([a.n({type:Boolean,reflect:!0})],n.prototype,"emphasized");c([a.n()],n.prototype,"label");c([a.n({type:Boolean})],n.prototype,"enableTabsScroll");c([a.n({type:Boolean,reflect:!0})],n.prototype,"quiet");c([a.n({attribute:!1})],n.prototype,"selectionIndicatorStyle");c([a.n({attribute:!1})],n.prototype,"shouldAnimate");c([f.e("slot")],n.prototype,"slotEl");c([f.e("#list")],n.prototype,"tabList");c([a.n({reflect:!0})],n.prototype,"selected");const j="show",H={"left-scroll":"left-scroll","right-scroll":"right-scroll",show:j,"tabs-overflow-container":"tabs-overflow-container","left-shadow":"left-shadow","right-shadow":"right-shadow"},N="list",X={list:N};var Y=Object.defineProperty,h=(l,t,e,i)=>{for(var o=void 0,s=l.length-1,r;s>=0;s--)(r=l[s])&&(o=r(t,e,o)||o);return o&&Y(t,e,o),o};class d extends k.SizedMixin(a.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[a.r(H),a.r(X)]}get scrollContent(){return this.tabs}firstUpdated(t){super.firstUpdated(t);const[e]=this.scrollContent;e&&(e.enableTabsScroll=!0),this.resizeController.observe(this.overflowContainer)}async _handleSlotChange(){const[t]=this.scrollContent;await(t==null?void 0:t.updateComplete),this._updateScrollState()}_updateScrollState(){const{scrollContent:t,overflowState:e}=this;if(t){const[i]=this.scrollContent,{canScrollLeft:o,canScrollRight:s}=(i==null?void 0:i.scrollState)||{canScrollLeft:!1,canScrollRight:!1};this.overflowState={...e,canScrollLeft:o,canScrollRight:s}}}_handleScrollClick(t){const e=t.currentTarget,[i]=this.scrollContent,o=i.clientWidth*this.scrollFactor,s=e.classList.contains("left-scroll")?-o:o;i.scrollTabs(s,"smooth")}updated(t){super.updated(t),t.has("dir")&&this._updateScrollState()}render(){const{canScrollRight:t,canScrollLeft:e}=this.overflowState,i=this.labelPrevious,o=this.labelNext;return a.x`
+      <div
+        class=${v.e({"tabs-overflow-container":!0,"left-shadow":e,"right-shadow":t})}
+      >
+        <luzmo-action-button
+          class=${v.e({"left-scroll":!0,show:e})}
+          aria-label=${i}
+          quiet
+          dir="rtl"
+          tabindex="-1"
+          @click=${this._handleScrollClick}
+        >
+          <luzmo-icon slot="icon" .icon=${x.luzmoAngleLeft}></luzmo-icon>
+        </luzmo-action-button>
+        <luzmo-action-button
+          class=${v.e({"right-scroll":!0,show:t})}
+          aria-label=${o}
+          quiet
+          tabindex="-1"
+          @click=${this._handleScrollClick}
+        >
+          <luzmo-icon slot="icon" .icon=${x.luzmoAngleRight}></luzmo-icon>
+        </luzmo-action-button>
+        <slot
+          @slotchange=${this._handleSlotChange}
+          @luzmo-tabs-scroll=${this._updateScrollState}
+        ></slot>
+      </div>
+    `}}h([a.n({type:Boolean,reflect:!0})],d.prototype,"compact");h([a.n({type:String,attribute:"label-previous"})],d.prototype,"labelPrevious");h([a.n({type:String,attribute:"label-next"})],d.prototype,"labelNext");h([a.n({reflect:!0})],d.prototype,"dir");h([q.r()],d.prototype,"overflowState");h([A.o({selector:"luzmo-tabs",flatten:!0})],d.prototype,"tabs");h([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;

package/components/tabs/index.d.ts

@@ -0,0 +1,16 @@
+import { LuzmoTab } from './tab';
+import { LuzmoTabPanel } from './tab-panel';
+import { LuzmoTabs } from './tabs';
+import { LuzmoTabsOverflow } from './tabs-overflow';
+declare global {
+    interface HTMLElementTabNameMap {
+        'luzmo-tab': LuzmoTab;
+        'luzmo-tabs': LuzmoTabs;
+        'luzmo-tab-panel': LuzmoTabPanel;
+        'luzmo-tabs-overflow': LuzmoTabsOverflow;
+    }
+}
+export { LuzmoTab } from './tab';
+export { LuzmoTabPanel } from './tab-panel';
+export { LuzmoTabs } from './tabs';
+export { LuzmoTabsOverflow } from './tabs-overflow';