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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/components/accordion/index.cjs +2 -2
  2. package/components/accordion/index.js +1 -1
  3. package/components/action-bar/index.cjs +1 -1
  4. package/components/action-bar/index.js +2 -2
  5. package/components/action-button/index.cjs +1 -1
  6. package/components/action-button/index.js +1 -1
  7. package/components/action-group/index.cjs +1 -1
  8. package/components/action-group/index.js +1 -1
  9. package/components/{action-group-DS7x8jfJ.js → action-group-Bwt9w8Vh.js} +1 -1
  10. package/components/action-group-D917z7XF.cjs +20 -0
  11. package/components/action-menu/index.cjs +1 -1
  12. package/components/action-menu/index.js +2 -2
  13. package/components/button/index.cjs +1 -1
  14. package/components/button/index.js +3 -3
  15. package/components/{button-base-BGAqeDTT.js → button-base-B5uul3tZ.js} +1 -1
  16. package/components/{button-base-CShsEDFM.cjs → button-base-C7or8-FB.cjs} +1 -1
  17. package/components/{clear-button-CMhq1QsA.js → clear-button-BFtJVPzm.js} +1 -1
  18. package/components/{clear-button-BWJrTbkk.cjs → clear-button-_a8GjtJC.cjs} +1 -1
  19. package/components/{close-button-BiJwFZyW.js → close-button-D9qjjy2w.js} +1 -1
  20. package/components/{close-button-DrMdfzPW.cjs → close-button-TZ08VFmi.cjs} +1 -1
  21. package/components/color-area/index.cjs +1 -1
  22. package/components/color-area/index.js +1 -1
  23. package/components/color-palette-group/index.cjs +1 -1
  24. package/components/color-palette-group/index.js +1 -1
  25. package/components/color-slider/index.cjs +1 -1
  26. package/components/color-slider/index.js +1 -1
  27. package/components/date-time-picker/index.cjs +3 -3
  28. package/components/date-time-picker/index.js +1 -1
  29. package/components/index.cjs +1 -1
  30. package/components/index.js +4 -4
  31. package/components/infield-button/index.cjs +1 -1
  32. package/components/infield-button/index.js +1 -1
  33. package/components/menu/index.cjs +3 -3
  34. package/components/menu/index.js +7 -7
  35. package/components/number-field/index.cjs +1 -1
  36. package/components/number-field/index.js +1 -1
  37. package/components/observe-slot-presence-CNltc0C0.cjs +18 -0
  38. package/components/{observe-slot-presence-CmVi0zTc.js → observe-slot-presence-DFi6GE3H.js} +1 -1
  39. package/components/observe-slot-text-CBMHpuIK.cjs +18 -0
  40. package/components/{observe-slot-text-CugmOzNZ.js → observe-slot-text-DorVpCL4.js} +11 -11
  41. package/components/options/index.cjs +26 -30
  42. package/components/options/index.js +198 -252
  43. package/components/overlay/index.cjs +2 -2
  44. package/components/overlay/index.js +24 -25
  45. package/components/picker-button/index.cjs +1 -1
  46. package/components/picker-button/index.js +2 -2
  47. package/components/{streaming-listener-BgU36S1Z.js → streaming-listener-BlWm-XZU.js} +4 -5
  48. package/components/streaming-listener-D9Wc7skA.cjs +18 -0
  49. package/components/swatch/index.cjs +6 -6
  50. package/components/swatch/index.js +2 -2
  51. package/components/tabs/index.cjs +18 -34
  52. package/components/tabs/index.js +192 -527
  53. package/components/tags/index.cjs +1 -1
  54. package/components/tags/index.js +1 -1
  55. package/components/toast/index.cjs +1 -1
  56. package/components/toast/index.js +1 -1
  57. package/components/utils.cjs +1 -1
  58. package/components/utils.js +1 -1
  59. package/package.json +1 -1
  60. package/components/action-group-D6rV7sfq.cjs +0 -20
  61. package/components/async-directive-CDQoI4mS.js +0 -81
  62. package/components/async-directive-CddlkYlZ.cjs +0 -22
  63. package/components/directive-DrvvqO47.cjs +0 -32
  64. package/components/directive-OK_Jd_xx.js +0 -314
  65. package/components/mutation-controller-DH7YOCyj.js +0 -52
  66. package/components/mutation-controller-DkOMCW-c.cjs +0 -22
  67. package/components/observe-slot-presence-bc9chhsi.cjs +0 -18
  68. package/components/observe-slot-text-ByPG1Lqw.cjs +0 -18
  69. package/components/streaming-listener-CfUtuELp.cjs +0 -18
  70. package/components/when-CDK1Tt5Y.js +0 -28
  71. package/components/when-CDZyJPvd.cjs +0 -22
@@ -15,344 +15,45 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- import { unsafeCSS as v, nothing as L, html as x, css as H } from "lit";
19
- import { a as C } from "../base-CdYjmV_8.js";
20
- import { F as X } from "../focus-visible-BvScGDCE.js";
21
- import { O as Y } from "../observe-slot-presence-CmVi0zTc.js";
22
- import { O as K } from "../observe-slot-text-CugmOzNZ.js";
23
- import { r as q } from "../random-id-ByCz1xaq.js";
24
- import { ResizeController as B } from "@lit-labs/observers/resize-controller.js";
25
- import { property as l, query as _, state as V, queryAssignedElements as G } from "lit/decorators.js";
26
- import { classMap as S } from "lit/directives/class-map.js";
27
- import { ifDefined as U } from "lit/directives/if-defined.js";
28
- import { S as D } from "../sized-mixin-cJbo3PKR.js";
29
- import { F as J } from "../focusable-BjvsvVam.js";
30
- import { R as Q } from "../roving-tabindex-DOg4z6ZU.js";
31
- import { luzmoAngleLeft as Z, luzmoAngleRight as tt } from "@luzmo/icons";
18
+ import { unsafeCSS as m, nothing as S, html as z, css as _ } from "lit";
19
+ import { property as d } from "lit/decorators/property.js";
20
+ import { a as g } from "../base-CdYjmV_8.js";
21
+ import { F as P } from "../focus-visible-BvScGDCE.js";
22
+ import { O as q } from "../observe-slot-presence-DFi6GE3H.js";
23
+ import { O as B } from "../observe-slot-text-DorVpCL4.js";
24
+ import { r as C } from "../random-id-ByCz1xaq.js";
25
+ import { IntersectionController as F } from "@lit-labs/observers/intersection-controller.js";
26
+ import { ResizeController as T } from "@lit-labs/observers/resize-controller.js";
27
+ import { property as l, query as x, state as R, queryAssignedElements as U } from "lit/decorators.js";
28
+ import { classMap as f } from "lit/directives/class-map.js";
29
+ import { ifDefined as k } from "lit/directives/if-defined.js";
30
+ import { S as L } from "../sized-mixin-cJbo3PKR.js";
31
+ import { F as D } from "../focusable-BjvsvVam.js";
32
+ import { R as W } from "../roving-tabindex-DOg4z6ZU.js";
33
+ import { luzmoAngleLeft as H, luzmoAngleRight as M } from "@luzmo/icons";
32
34
  import "../action-button/index.js";
33
35
  import "../icon/index.js";
34
- const W = () => {
36
+ const A = () => {
35
37
  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
36
- const s = document.createElement("style");
37
- s.setAttribute("data-luzmo-vars", ""), s.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(s);
38
+ const r = document.createElement("style");
39
+ r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
38
40
  }
39
41
  };
40
- W();
41
- /**
42
- * @license
43
- * Copyright 2019 Google LLC
44
- * SPDX-License-Identifier: BSD-3-Clause
45
- */
46
- const k = globalThis, P = k.ShadowRoot && (k.ShadyCSS === void 0 || k.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, j = Symbol(), I = /* @__PURE__ */ new WeakMap();
47
- let ot = class {
48
- constructor(t, o, e) {
49
- if (this._$cssResult$ = !0, e !== j) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
50
- this.cssText = t, this.t = o;
51
- }
52
- get styleSheet() {
53
- let t = this.o;
54
- const o = this.t;
55
- if (P && t === void 0) {
56
- const e = o !== void 0 && o.length === 1;
57
- e && (t = I.get(o)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && I.set(o, t));
58
- }
59
- return t;
60
- }
61
- toString() {
62
- return this.cssText;
63
- }
42
+ A();
43
+ const O = ':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)}';
44
+ var j = Object.defineProperty, p = (r, t, o, i) => {
45
+ for (var e = void 0, a = r.length - 1, s; a >= 0; a--)
46
+ (s = r[a]) && (e = s(t, o, e) || e);
47
+ return e && j(t, o, e), e;
64
48
  };
65
- const et = (s) => new ot(typeof s == "string" ? s : s + "", void 0, j), it = (s, t) => {
66
- if (P) s.adoptedStyleSheets = t.map((o) => o instanceof CSSStyleSheet ? o : o.styleSheet);
67
- else for (const o of t) {
68
- const e = document.createElement("style"), i = k.litNonce;
69
- i !== void 0 && e.setAttribute("nonce", i), e.textContent = o.cssText, s.appendChild(e);
70
- }
71
- }, O = P ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
72
- let o = "";
73
- for (const e of t.cssRules) o += e.cssText;
74
- return et(o);
75
- })(s) : s;
76
- /**
77
- * @license
78
- * Copyright 2017 Google LLC
79
- * SPDX-License-Identifier: BSD-3-Clause
80
- */
81
- const { is: st, defineProperty: at, getOwnPropertyDescriptor: rt, getOwnPropertyNames: lt, getOwnPropertySymbols: nt, getPrototypeOf: ct } = Object, u = globalThis, R = u.trustedTypes, dt = R ? R.emptyScript : "", E = u.reactiveElementPolyfillSupport, y = (s, t) => s, $ = { toAttribute(s, t) {
82
- switch (t) {
83
- case Boolean:
84
- s = s ? dt : null;
85
- break;
86
- case Object:
87
- case Array:
88
- s = s == null ? s : JSON.stringify(s);
89
- }
90
- return s;
91
- }, fromAttribute(s, t) {
92
- let o = s;
93
- switch (t) {
94
- case Boolean:
95
- o = s !== null;
96
- break;
97
- case Number:
98
- o = s === null ? null : Number(s);
99
- break;
100
- case Object:
101
- case Array:
102
- try {
103
- o = JSON.parse(s);
104
- } catch {
105
- o = null;
106
- }
107
- }
108
- return o;
109
- } }, A = (s, t) => !st(s, t), M = { attribute: !0, type: String, converter: $, reflect: !1, hasChanged: A };
110
- Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), u.litPropertyMetadata ?? (u.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
111
- class z extends HTMLElement {
112
- static addInitializer(t) {
113
- this._$Ei(), (this.l ?? (this.l = [])).push(t);
114
- }
115
- static get observedAttributes() {
116
- return this.finalize(), this._$Eh && [...this._$Eh.keys()];
117
- }
118
- static createProperty(t, o = M) {
119
- if (o.state && (o.attribute = !1), this._$Ei(), this.elementProperties.set(t, o), !o.noAccessor) {
120
- const e = Symbol(), i = this.getPropertyDescriptor(t, e, o);
121
- i !== void 0 && at(this.prototype, t, i);
122
- }
123
- }
124
- static getPropertyDescriptor(t, o, e) {
125
- const { get: i, set: a } = rt(this.prototype, t) ?? { get() {
126
- return this[o];
127
- }, set(r) {
128
- this[o] = r;
129
- } };
130
- return { get() {
131
- return i == null ? void 0 : i.call(this);
132
- }, set(r) {
133
- const n = i == null ? void 0 : i.call(this);
134
- a.call(this, r), this.requestUpdate(t, n, e);
135
- }, configurable: !0, enumerable: !0 };
136
- }
137
- static getPropertyOptions(t) {
138
- return this.elementProperties.get(t) ?? M;
139
- }
140
- static _$Ei() {
141
- if (this.hasOwnProperty(y("elementProperties"))) return;
142
- const t = ct(this);
143
- t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
144
- }
145
- static finalize() {
146
- if (this.hasOwnProperty(y("finalized"))) return;
147
- if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(y("properties"))) {
148
- const o = this.properties, e = [...lt(o), ...nt(o)];
149
- for (const i of e) this.createProperty(i, o[i]);
150
- }
151
- const t = this[Symbol.metadata];
152
- if (t !== null) {
153
- const o = litPropertyMetadata.get(t);
154
- if (o !== void 0) for (const [e, i] of o) this.elementProperties.set(e, i);
155
- }
156
- this._$Eh = /* @__PURE__ */ new Map();
157
- for (const [o, e] of this.elementProperties) {
158
- const i = this._$Eu(o, e);
159
- i !== void 0 && this._$Eh.set(i, o);
160
- }
161
- this.elementStyles = this.finalizeStyles(this.styles);
162
- }
163
- static finalizeStyles(t) {
164
- const o = [];
165
- if (Array.isArray(t)) {
166
- const e = new Set(t.flat(1 / 0).reverse());
167
- for (const i of e) o.unshift(O(i));
168
- } else t !== void 0 && o.push(O(t));
169
- return o;
170
- }
171
- static _$Eu(t, o) {
172
- const e = o.attribute;
173
- return e === !1 ? void 0 : typeof e == "string" ? e : typeof t == "string" ? t.toLowerCase() : void 0;
174
- }
175
- constructor() {
176
- super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
177
- }
178
- _$Ev() {
179
- var t;
180
- this._$ES = new Promise((o) => this.enableUpdating = o), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (t = this.constructor.l) == null || t.forEach((o) => o(this));
181
- }
182
- addController(t) {
183
- var o;
184
- (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t), this.renderRoot !== void 0 && this.isConnected && ((o = t.hostConnected) == null || o.call(t));
185
- }
186
- removeController(t) {
187
- var o;
188
- (o = this._$EO) == null || o.delete(t);
189
- }
190
- _$E_() {
191
- const t = /* @__PURE__ */ new Map(), o = this.constructor.elementProperties;
192
- for (const e of o.keys()) this.hasOwnProperty(e) && (t.set(e, this[e]), delete this[e]);
193
- t.size > 0 && (this._$Ep = t);
194
- }
195
- createRenderRoot() {
196
- const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
197
- return it(t, this.constructor.elementStyles), t;
198
- }
199
- connectedCallback() {
200
- var t;
201
- this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$EO) == null || t.forEach((o) => {
202
- var e;
203
- return (e = o.hostConnected) == null ? void 0 : e.call(o);
204
- });
205
- }
206
- enableUpdating(t) {
207
- }
208
- disconnectedCallback() {
209
- var t;
210
- (t = this._$EO) == null || t.forEach((o) => {
211
- var e;
212
- return (e = o.hostDisconnected) == null ? void 0 : e.call(o);
213
- });
214
- }
215
- attributeChangedCallback(t, o, e) {
216
- this._$AK(t, e);
217
- }
218
- _$EC(t, o) {
219
- var a;
220
- const e = this.constructor.elementProperties.get(t), i = this.constructor._$Eu(t, e);
221
- if (i !== void 0 && e.reflect === !0) {
222
- const r = (((a = e.converter) == null ? void 0 : a.toAttribute) !== void 0 ? e.converter : $).toAttribute(o, e.type);
223
- this._$Em = t, r == null ? this.removeAttribute(i) : this.setAttribute(i, r), this._$Em = null;
224
- }
225
- }
226
- _$AK(t, o) {
227
- var a;
228
- const e = this.constructor, i = e._$Eh.get(t);
229
- if (i !== void 0 && this._$Em !== i) {
230
- const r = e.getPropertyOptions(i), n = typeof r.converter == "function" ? { fromAttribute: r.converter } : ((a = r.converter) == null ? void 0 : a.fromAttribute) !== void 0 ? r.converter : $;
231
- this._$Em = i, this[i] = n.fromAttribute(o, r.type), this._$Em = null;
232
- }
233
- }
234
- requestUpdate(t, o, e) {
235
- if (t !== void 0) {
236
- if (e ?? (e = this.constructor.getPropertyOptions(t)), !(e.hasChanged ?? A)(this[t], o)) return;
237
- this.P(t, o, e);
238
- }
239
- this.isUpdatePending === !1 && (this._$ES = this._$ET());
240
- }
241
- P(t, o, e) {
242
- this._$AL.has(t) || this._$AL.set(t, o), e.reflect === !0 && this._$Em !== t && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(t);
243
- }
244
- async _$ET() {
245
- this.isUpdatePending = !0;
246
- try {
247
- await this._$ES;
248
- } catch (o) {
249
- Promise.reject(o);
250
- }
251
- const t = this.scheduleUpdate();
252
- return t != null && await t, !this.isUpdatePending;
253
- }
254
- scheduleUpdate() {
255
- return this.performUpdate();
256
- }
257
- performUpdate() {
258
- var e;
259
- if (!this.isUpdatePending) return;
260
- if (!this.hasUpdated) {
261
- if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
262
- for (const [a, r] of this._$Ep) this[a] = r;
263
- this._$Ep = void 0;
264
- }
265
- const i = this.constructor.elementProperties;
266
- if (i.size > 0) for (const [a, r] of i) r.wrapped !== !0 || this._$AL.has(a) || this[a] === void 0 || this.P(a, this[a], r);
267
- }
268
- let t = !1;
269
- const o = this._$AL;
270
- try {
271
- t = this.shouldUpdate(o), t ? (this.willUpdate(o), (e = this._$EO) == null || e.forEach((i) => {
272
- var a;
273
- return (a = i.hostUpdate) == null ? void 0 : a.call(i);
274
- }), this.update(o)) : this._$EU();
275
- } catch (i) {
276
- throw t = !1, this._$EU(), i;
277
- }
278
- t && this._$AE(o);
279
- }
280
- willUpdate(t) {
281
- }
282
- _$AE(t) {
283
- var o;
284
- (o = this._$EO) == null || o.forEach((e) => {
285
- var i;
286
- return (i = e.hostUpdated) == null ? void 0 : i.call(e);
287
- }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
288
- }
289
- _$EU() {
290
- this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
291
- }
292
- get updateComplete() {
293
- return this.getUpdateComplete();
294
- }
295
- getUpdateComplete() {
296
- return this._$ES;
297
- }
298
- shouldUpdate(t) {
299
- return !0;
300
- }
301
- update(t) {
302
- this._$Ej && (this._$Ej = this._$Ej.forEach((o) => this._$EC(o, this[o]))), this._$EU();
303
- }
304
- updated(t) {
305
- }
306
- firstUpdated(t) {
307
- }
308
- }
309
- z.elementStyles = [], z.shadowRootOptions = { mode: "open" }, z[y("elementProperties")] = /* @__PURE__ */ new Map(), z[y("finalized")] = /* @__PURE__ */ new Map(), E == null || E({ ReactiveElement: z }), (u.reactiveElementVersions ?? (u.reactiveElementVersions = [])).push("2.0.4");
310
- /**
311
- * @license
312
- * Copyright 2017 Google LLC
313
- * SPDX-License-Identifier: BSD-3-Clause
314
- */
315
- const ut = { attribute: !0, type: String, converter: $, reflect: !1, hasChanged: A }, ht = (s = ut, t, o) => {
316
- const { kind: e, metadata: i } = o;
317
- let a = globalThis.litPropertyMetadata.get(i);
318
- if (a === void 0 && globalThis.litPropertyMetadata.set(i, a = /* @__PURE__ */ new Map()), a.set(o.name, s), e === "accessor") {
319
- const { name: r } = o;
320
- return { set(n) {
321
- const p = t.get.call(this);
322
- t.set.call(this, n), this.requestUpdate(r, p, s);
323
- }, init(n) {
324
- return n !== void 0 && this.P(r, void 0, s), n;
325
- } };
326
- }
327
- if (e === "setter") {
328
- const { name: r } = o;
329
- return function(n) {
330
- const p = this[r];
331
- t.call(this, n), this.requestUpdate(r, p, s);
332
- };
333
- }
334
- throw Error("Unsupported decorator location: " + e);
335
- };
336
- function b(s) {
337
- return (t, o) => typeof o == "object" ? ht(s, t, o) : ((e, i, a) => {
338
- const r = i.hasOwnProperty(a);
339
- return i.constructor.createProperty(a, r ? { ...e, wrapped: !0 } : e), r ? Object.getOwnPropertyDescriptor(i, a) : void 0;
340
- })(s, t, o);
341
- }
342
- const bt = ':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)}';
343
- var mt = Object.defineProperty, w = (s, t, o, e) => {
344
- for (var i = void 0, a = s.length - 1, r; a >= 0; a--)
345
- (r = s[a]) && (i = r(t, o, i) || i);
346
- return i && mt(t, o, i), i;
347
- };
348
- class f extends X(
349
- K(Y(C, '[slot="icon"]'), "")
49
+ class h extends P(
50
+ B(q(g, '[slot="icon"]'), "")
350
51
  ) {
351
52
  constructor() {
352
53
  super(...arguments), this.disabled = !1, this.label = "", this.selected = !1, this.vertical = !1, this.value = "";
353
54
  }
354
55
  static get styles() {
355
- return [v(bt)];
56
+ return [m(O)];
356
57
  }
357
58
  get hasIcon() {
358
59
  return this.slotContentIsPresent;
@@ -361,48 +62,48 @@ class f extends X(
361
62
  return !!this.label || this.slotHasContent;
362
63
  }
363
64
  render() {
364
- return x`
365
- ${this.hasIcon ? x` <slot name="icon"></slot> ` : L}
65
+ return z`
66
+ ${this.hasIcon ? z` <slot name="icon"></slot> ` : S}
366
67
  <label id="item-label" ?hidden=${!this.hasLabel}>
367
- ${this.slotHasContent ? L : this.label}
68
+ ${this.slotHasContent ? S : this.label}
368
69
  <slot>${this.label}</slot>
369
70
  </label>
370
71
  `;
371
72
  }
372
73
  firstUpdated(t) {
373
- super.firstUpdated(t), this.setAttribute("role", "tab"), this.hasAttribute("id") || (this.id = `luzmo-tab-${q()}`);
74
+ super.firstUpdated(t), this.setAttribute("role", "tab"), this.hasAttribute("id") || (this.id = `luzmo-tab-${C()}`);
374
75
  }
375
76
  updated(t) {
376
77
  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"));
377
78
  }
378
79
  }
379
- w([
380
- b({ type: Boolean, reflect: !0 })
381
- ], f.prototype, "disabled");
382
- w([
383
- b({ reflect: !0 })
384
- ], f.prototype, "label");
385
- w([
386
- b({ type: Boolean, reflect: !0 })
387
- ], f.prototype, "selected");
388
- w([
389
- b({ type: Boolean, reflect: !0 })
390
- ], f.prototype, "vertical");
391
- w([
392
- b({ type: String, reflect: !0 })
393
- ], f.prototype, "value");
394
- const pt = ":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))}";
395
- var vt = Object.defineProperty, F = (s, t, o, e) => {
396
- for (var i = void 0, a = s.length - 1, r; a >= 0; a--)
397
- (r = s[a]) && (i = r(t, o, i) || i);
398
- return i && vt(t, o, i), i;
80
+ p([
81
+ d({ type: Boolean, reflect: !0 })
82
+ ], h.prototype, "disabled");
83
+ p([
84
+ d({ reflect: !0 })
85
+ ], h.prototype, "label");
86
+ p([
87
+ d({ type: Boolean, reflect: !0 })
88
+ ], h.prototype, "selected");
89
+ p([
90
+ d({ type: Boolean, reflect: !0 })
91
+ ], h.prototype, "vertical");
92
+ p([
93
+ d({ type: String, reflect: !0 })
94
+ ], h.prototype, "value");
95
+ const N = ":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))}";
96
+ var X = Object.defineProperty, $ = (r, t, o, i) => {
97
+ for (var e = void 0, a = r.length - 1, s; a >= 0; a--)
98
+ (s = r[a]) && (e = s(t, o, e) || e);
99
+ return e && X(t, o, e), e;
399
100
  };
400
- class T extends C {
101
+ class y extends g {
401
102
  constructor() {
402
103
  super(...arguments), this.selected = !1, this.value = "";
403
104
  }
404
105
  static get styles() {
405
- return [v(pt)];
106
+ return [m(N)];
406
107
  }
407
108
  handleFocusin() {
408
109
  this.removeAttribute("tabindex");
@@ -411,7 +112,7 @@ class T extends C {
411
112
  this.tabIndex = this.selected ? 0 : -1;
412
113
  }
413
114
  render() {
414
- return x`
115
+ return z`
415
116
  <slot
416
117
  @focusin=${this.handleFocusin}
417
118
  @focusout=${this.handleFocusout}
@@ -419,73 +120,37 @@ class T extends C {
419
120
  `;
420
121
  }
421
122
  firstUpdated() {
422
- this.slot = "tab-panel", this.setAttribute("role", "tabpanel"), this.tabIndex = 0, this.hasAttribute("id") || (this.id = `luzmo-tab-panel-${q()}`);
123
+ this.slot = "tab-panel", this.setAttribute("role", "tabpanel"), this.tabIndex = 0, this.hasAttribute("id") || (this.id = `luzmo-tab-panel-${C()}`);
423
124
  }
424
125
  updated(t) {
425
126
  t.has("selected") && (this.selected ? (this.removeAttribute("aria-hidden"), this.tabIndex = 0) : (this.setAttribute("aria-hidden", "true"), this.tabIndex = -1));
426
127
  }
427
128
  }
428
- F([
429
- b({ type: Boolean, reflect: !0 })
430
- ], T.prototype, "selected");
431
- F([
432
- b({ type: String, reflect: !0 })
433
- ], T.prototype, "value");
434
- /**
435
- * @license
436
- * Copyright 2021 Google LLC
437
- * SPDX-License-Identifier: BSD-3-Clause
438
- */
439
- class ft {
440
- constructor(t, { target: o, config: e, callback: i, skipInitial: a }) {
441
- this.t = /* @__PURE__ */ new Set(), this.o = !1, this.i = !1, this.h = t, o !== null && this.t.add(o ?? t), this.o = a ?? this.o, this.callback = i, window.IntersectionObserver ? (this.u = new IntersectionObserver((r) => {
442
- const n = this.i;
443
- this.i = !1, this.o && n || (this.handleChanges(r), this.h.requestUpdate());
444
- }, e), t.addController(this)) : console.warn("IntersectionController error: browser does not support IntersectionObserver.");
445
- }
446
- handleChanges(t) {
447
- var o;
448
- this.value = (o = this.callback) == null ? void 0 : o.call(this, t, this.u);
449
- }
450
- hostConnected() {
451
- for (const t of this.t) this.observe(t);
452
- }
453
- hostDisconnected() {
454
- this.disconnect();
455
- }
456
- async hostUpdated() {
457
- const t = this.u.takeRecords();
458
- t.length && this.handleChanges(t);
459
- }
460
- observe(t) {
461
- this.t.add(t), this.u.observe(t), this.i = !0;
462
- }
463
- unobserve(t) {
464
- this.t.delete(t), this.u.unobserve(t);
465
- }
466
- disconnect() {
467
- this.u.disconnect();
468
- }
469
- }
470
- const N = "#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)) )}", zt = "#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}";
471
- var gt = Object.defineProperty, d = (s, t, o, e) => {
472
- for (var i = void 0, a = s.length - 1, r; a >= 0; a--)
473
- (r = s[a]) && (i = r(t, o, i) || i);
474
- return i && gt(t, o, i), i;
129
+ $([
130
+ d({ type: Boolean, reflect: !0 })
131
+ ], y.prototype, "selected");
132
+ $([
133
+ d({ type: String, reflect: !0 })
134
+ ], y.prototype, "value");
135
+ const E = "#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)) )}", Y = "#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}";
136
+ var G = Object.defineProperty, c = (r, t, o, i) => {
137
+ for (var e = void 0, a = r.length - 1, s; a >= 0; a--)
138
+ (s = r[a]) && (e = s(t, o, e) || e);
139
+ return e && G(t, o, e), e;
475
140
  };
476
- const g = {
141
+ const v = {
477
142
  baseSize: 100,
478
143
  noSelectionStyle: "transform: translateX(0px) scaleX(0) scaleY(0)",
479
- transformX(s, t) {
144
+ transformX(r, t) {
480
145
  const o = t / this.baseSize;
481
- return `transform: translateX(${s}px) scaleX(${o});`;
146
+ return `transform: translateX(${r}px) scaleX(${o});`;
482
147
  },
483
- transformY(s, t) {
148
+ transformY(r, t) {
484
149
  const o = t / this.baseSize;
485
- return `transform: translateY(${s}px) scaleY(${o});`;
150
+ return `transform: translateY(${r}px) scaleY(${o});`;
486
151
  },
487
152
  baseStyles() {
488
- return H`
153
+ return _`
489
154
  :host([direction='vertical-right']) #selection-indicator,
490
155
  :host([direction='vertical']) #selection-indicator {
491
156
  height: ${this.baseSize}px;
@@ -496,26 +161,26 @@ const g = {
496
161
  `;
497
162
  }
498
163
  };
499
- function yt(s, t, o, e) {
500
- const i = s + (t === "rtl" ? -1 : 1), a = o[i], r = e.scrollLeft + e.offsetWidth;
501
- return a ? a.offsetLeft - e.offsetWidth : r;
164
+ function K(r, t, o, i) {
165
+ const e = r + (t === "rtl" ? -1 : 1), a = o[e], s = i.scrollLeft + i.offsetWidth;
166
+ return a ? a.offsetLeft - i.offsetWidth : s;
502
167
  }
503
- function xt(s, t, o, e) {
504
- const i = s + (t === "rtl" ? 1 : -1), a = o[i], r = t === "rtl" ? -e.offsetWidth : 0;
505
- return a ? a.offsetLeft + a.offsetWidth : r;
168
+ function V(r, t, o, i) {
169
+ const e = r + (t === "rtl" ? 1 : -1), a = o[e], s = t === "rtl" ? -i.offsetWidth : 0;
170
+ return a ? a.offsetLeft + a.offsetWidth : s;
506
171
  }
507
- class c extends D(J, { noDefaultSize: !0 }) {
172
+ class n extends L(D, { noDefaultSize: !0 }) {
508
173
  constructor() {
509
- super(), this.auto = !1, this.compact = !1, this.direction = "horizontal", this.emphasized = !1, this.label = "", this.enableTabsScroll = !1, this.quiet = !1, this.selectionIndicatorStyle = g.noSelectionStyle, this.shouldAnimate = !1, this.selected = "", this._tabs = [], this.resizeController = new B(this, {
174
+ super(), this.auto = !1, this.compact = !1, this.direction = "horizontal", this.emphasized = !1, this.label = "", this.enableTabsScroll = !1, this.quiet = !1, this.selectionIndicatorStyle = v.noSelectionStyle, this.shouldAnimate = !1, this.selected = "", this._tabs = [], this.resizeController = new T(this, {
510
175
  callback: () => {
511
176
  this.updateSelectionIndicator();
512
177
  }
513
- }), this.rovingTabindexController = new Q(this, {
178
+ }), this.rovingTabindexController = new W(this, {
514
179
  focusInIndex: (t) => {
515
180
  let o = 0;
516
- return t.find((i, a) => {
517
- const r = this.selected ? i.value === this.selected : !i.disabled;
518
- return o = a, r;
181
+ return t.find((e, a) => {
182
+ const s = this.selected ? e.value === this.selected : !e.disabled;
183
+ return o = a, s;
519
184
  }) ? o : -1;
520
185
  },
521
186
  direction: () => "both",
@@ -535,7 +200,7 @@ class c extends D(J, { noDefaultSize: !0 }) {
535
200
  }, this.onClick = (t) => {
536
201
  if (this.disabled)
537
202
  return;
538
- const o = t.composedPath().find((e) => e.parentElement === this);
203
+ const o = t.composedPath().find((i) => i.parentElement === this);
539
204
  !o || o.disabled || (this.shouldAnimate = !0, this.selectTarget(o));
540
205
  }, this.onKeyDown = (t) => {
541
206
  if (t.code === "Enter" || t.code === "Space") {
@@ -555,18 +220,18 @@ class c extends D(J, { noDefaultSize: !0 }) {
555
220
  }
556
221
  this.updateSelectionIndicator();
557
222
  }, this.updateSelectionIndicator = async () => {
558
- const t = this.tabs.find((i) => i.selected);
223
+ const t = this.tabs.find((e) => e.selected);
559
224
  if (!t) {
560
- this.selectionIndicatorStyle = g.noSelectionStyle;
225
+ this.selectionIndicatorStyle = v.noSelectionStyle;
561
226
  return;
562
227
  }
563
228
  await Promise.all([
564
229
  t.updateComplete,
565
230
  document.fonts ? document.fonts.ready : Promise.resolve()
566
231
  ]);
567
- const { width: o, height: e } = t.getBoundingClientRect();
568
- this.selectionIndicatorStyle = this.direction === "horizontal" ? g.transformX(t.offsetLeft, o) : g.transformY(t.offsetTop, e);
569
- }, new ft(this, {
232
+ const { width: o, height: i } = t.getBoundingClientRect();
233
+ this.selectionIndicatorStyle = this.direction === "horizontal" ? v.transformX(t.offsetLeft, o) : v.transformY(t.offsetTop, i);
234
+ }, new F(this, {
570
235
  config: {
571
236
  root: null,
572
237
  rootMargin: "0px",
@@ -579,9 +244,9 @@ class c extends D(J, { noDefaultSize: !0 }) {
579
244
  }
580
245
  static get styles() {
581
246
  return [
582
- v(N),
583
- v(zt),
584
- g.baseStyles()
247
+ m(E),
248
+ m(Y),
249
+ v.baseStyles()
585
250
  ];
586
251
  }
587
252
  set tabs(t) {
@@ -601,7 +266,7 @@ class c extends D(J, { noDefaultSize: !0 }) {
601
266
  return this.rovingTabindexController.focusInElement || this;
602
267
  }
603
268
  limitDeltaToInterval(t, o) {
604
- return (e) => e < t ? t : e > o ? o : e;
269
+ return (i) => i < t ? t : i > o ? o : i;
605
270
  }
606
271
  /**
607
272
  * Scrolls through the tabs component, on the X-axis, by a given ammount of pixels/ delta. The given delta is limited to the scrollable area of the tabs component.
@@ -609,37 +274,37 @@ class c extends D(J, { noDefaultSize: !0 }) {
609
274
  * @param behavior - The scroll behavior to use. Defaults to 'smooth'.
610
275
  */
611
276
  scrollTabs(t, o = "smooth") {
612
- var p;
277
+ var w;
613
278
  if (t === 0) return;
614
- const { scrollLeft: e, clientWidth: i, scrollWidth: a } = this.tabList, r = a - i - Math.abs(e), n = this.dir === "ltr" ? this.limitDeltaToInterval(-e, r) : this.limitDeltaToInterval(-r, Math.abs(e));
615
- (p = this.tabList) == null || p.scrollBy({
616
- left: n(t),
279
+ const { scrollLeft: i, clientWidth: e, scrollWidth: a } = this.tabList, s = a - e - Math.abs(i), I = this.dir === "ltr" ? this.limitDeltaToInterval(-i, s) : this.limitDeltaToInterval(-s, Math.abs(i));
280
+ (w = this.tabList) == null || w.scrollBy({
281
+ left: I(t),
617
282
  top: 0,
618
283
  behavior: o
619
284
  });
620
285
  }
621
286
  get scrollState() {
622
287
  if (this.tabList) {
623
- const { scrollLeft: t, clientWidth: o, scrollWidth: e } = this.tabList, i = Math.abs(t) > 0, a = Math.ceil(Math.abs(t)) < e - o;
288
+ const { scrollLeft: t, clientWidth: o, scrollWidth: i } = this.tabList, e = Math.abs(t) > 0, a = Math.ceil(Math.abs(t)) < i - o;
624
289
  return {
625
- canScrollLeft: this.dir === "ltr" ? i : a,
626
- canScrollRight: this.dir === "ltr" ? a : i
290
+ canScrollLeft: this.dir === "ltr" ? e : a,
291
+ canScrollRight: this.dir === "ltr" ? a : e
627
292
  };
628
293
  }
629
294
  return {};
630
295
  }
631
296
  async getUpdateComplete() {
632
- const t = await super.getUpdateComplete(), e = [...this.children].map((i) => i.updateComplete !== void 0 ? i.updateComplete : Promise.resolve(!0));
633
- return await Promise.all(e), t;
297
+ const t = await super.getUpdateComplete(), i = [...this.children].map((e) => e.updateComplete !== void 0 ? e.updateComplete : Promise.resolve(!0));
298
+ return await Promise.all(i), t;
634
299
  }
635
300
  getNecessaryAutoScroll(t) {
636
- const o = this.tabs[t], e = o.offsetLeft + o.offsetWidth, i = this.tabList.scrollLeft + this.tabList.offsetWidth, a = o.offsetLeft, r = this.tabList.scrollLeft;
637
- return e > i ? yt(
301
+ const o = this.tabs[t], i = o.offsetLeft + o.offsetWidth, e = this.tabList.scrollLeft + this.tabList.offsetWidth, a = o.offsetLeft, s = this.tabList.scrollLeft;
302
+ return i > e ? K(
638
303
  t,
639
304
  this.dir,
640
305
  this.tabs,
641
306
  this.tabList
642
- ) : a < r ? xt(
307
+ ) : a < s ? V(
643
308
  t,
644
309
  this.dir,
645
310
  this.tabs,
@@ -664,16 +329,16 @@ class c extends D(J, { noDefaultSize: !0 }) {
664
329
  managePanels({
665
330
  target: t
666
331
  }) {
667
- t.assignedElements().map((e) => {
668
- const { value: i, id: a } = e, r = this.querySelector(`[role="tab"][value="${i}"]`);
669
- r && (r.setAttribute("aria-controls", a), e.setAttribute("aria-labelledby", r.id)), e.selected = i === this.selected;
332
+ t.assignedElements().map((i) => {
333
+ const { value: e, id: a } = i, s = this.querySelector(`[role="tab"][value="${e}"]`);
334
+ s && (s.setAttribute("aria-controls", a), i.setAttribute("aria-labelledby", s.id)), i.selected = e === this.selected;
670
335
  });
671
336
  }
672
337
  render() {
673
- return x`
338
+ return z`
674
339
  <div
675
- class=${S({ scroll: this.enableTabsScroll })}
676
- aria-label=${U(this.label ?? void 0)}
340
+ class=${f({ scroll: this.enableTabsScroll })}
341
+ aria-label=${k(this.label ?? void 0)}
677
342
  @click=${this.onClick}
678
343
  @keydown=${this.onKeyDown}
679
344
  @scroll=${this.onTabsScroll}
@@ -684,7 +349,7 @@ class c extends D(J, { noDefaultSize: !0 }) {
684
349
  <slot @slotchange=${this.onSlotChange}></slot>
685
350
  <div
686
351
  id="selection-indicator"
687
- class=${U(this.shouldAnimate ? void 0 : "first-position")}
352
+ class=${k(this.shouldAnimate ? void 0 : "first-position")}
688
353
  style=${this.selectionIndicatorStyle}
689
354
  role="presentation"
690
355
  ></div>
@@ -701,10 +366,10 @@ class c extends D(J, { noDefaultSize: !0 }) {
701
366
  }
702
367
  if (super.willUpdate(t), t.has("selected")) {
703
368
  if (this.tabs.length > 0 && this.updateCheckedState(), t.get("selected")) {
704
- const e = this.querySelector(
369
+ const i = this.querySelector(
705
370
  `[role="tabpanel"][value="${t.get("selected")}"]`
706
371
  );
707
- e && (e.selected = !1);
372
+ i && (i.selected = !1);
708
373
  }
709
374
  const o = this.querySelector(
710
375
  `[role="tabpanel"][value="${this.selected}"]`
@@ -716,12 +381,12 @@ class c extends D(J, { noDefaultSize: !0 }) {
716
381
  selectTarget(t) {
717
382
  const o = t.getAttribute("value");
718
383
  if (o) {
719
- const e = this.selected;
384
+ const i = this.selected;
720
385
  this.selected = o, this.dispatchEvent(
721
386
  new Event("change", {
722
387
  cancelable: !0
723
388
  })
724
- ) || (this.selected = e);
389
+ ) || (this.selected = i);
725
390
  }
726
391
  }
727
392
  onSlotChange() {
@@ -734,57 +399,57 @@ class c extends D(J, { noDefaultSize: !0 }) {
734
399
  window.removeEventListener("resize", this.updateSelectionIndicator), "fonts" in document && document.fonts.removeEventListener("loadingdone", this.updateSelectionIndicator), super.disconnectedCallback();
735
400
  }
736
401
  }
737
- d([
402
+ c([
738
403
  l({ type: Boolean })
739
- ], c.prototype, "auto");
740
- d([
404
+ ], n.prototype, "auto");
405
+ c([
741
406
  l({ type: Boolean, reflect: !0 })
742
- ], c.prototype, "compact");
743
- d([
407
+ ], n.prototype, "compact");
408
+ c([
744
409
  l({ reflect: !0 })
745
- ], c.prototype, "dir");
746
- d([
410
+ ], n.prototype, "dir");
411
+ c([
747
412
  l({ reflect: !0 })
748
- ], c.prototype, "direction");
749
- d([
413
+ ], n.prototype, "direction");
414
+ c([
750
415
  l({ type: Boolean, reflect: !0 })
751
- ], c.prototype, "emphasized");
752
- d([
416
+ ], n.prototype, "emphasized");
417
+ c([
753
418
  l()
754
- ], c.prototype, "label");
755
- d([
419
+ ], n.prototype, "label");
420
+ c([
756
421
  l({ type: Boolean })
757
- ], c.prototype, "enableTabsScroll");
758
- d([
422
+ ], n.prototype, "enableTabsScroll");
423
+ c([
759
424
  l({ type: Boolean, reflect: !0 })
760
- ], c.prototype, "quiet");
761
- d([
425
+ ], n.prototype, "quiet");
426
+ c([
762
427
  l({ attribute: !1 })
763
- ], c.prototype, "selectionIndicatorStyle");
764
- d([
428
+ ], n.prototype, "selectionIndicatorStyle");
429
+ c([
765
430
  l({ attribute: !1 })
766
- ], c.prototype, "shouldAnimate");
767
- d([
768
- _("slot")
769
- ], c.prototype, "slotEl");
770
- d([
771
- _("#list")
772
- ], c.prototype, "tabList");
773
- d([
431
+ ], n.prototype, "shouldAnimate");
432
+ c([
433
+ x("slot")
434
+ ], n.prototype, "slotEl");
435
+ c([
436
+ x("#list")
437
+ ], n.prototype, "tabList");
438
+ c([
774
439
  l({ reflect: !0 })
775
- ], c.prototype, "selected");
776
- const wt = ':host{top:0;right:0;bottom:0;left:0;width:100%;--tabs-divider-size: 2px;--tab-item-height-m: calc( var(--luzmo-component-height) + var(--luzmo-spacing-5) );--tabs-overflow-button-height: calc( var(--tab-item-height-m) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-m);--tabs-overflow-icon-color: var(--luzmo-font-color-focus);--tabs-overflow-shadow-color: var(--luzmo-background-color);--tabs-overflow-shadow-width: 50px;--luzmo-action-button-icon-size: var(--luzmo-font-size);--tabs-overflow-next-button-right: calc(-1 * var(--luzmo-spacing-4));--tabs-overflow-previous-button-left: calc(-1 * var(--luzmo-spacing-4))}:host([size=s]){--tab-item-height-s: calc( var(--luzmo-component-height-s) + var(--luzmo-spacing-4) );--tabs-overflow-button-height: calc( var(--tab-item-height-s) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-s);--luzmo-action-button-icon-size: var(--luzmo-font-size-s);--tabs-overflow-next-button-right: calc(-1 * var(--luzmo-spacing-3));--tabs-overflow-previous-button-left: calc(-1 * var(--luzmo-spacing-3))}:host([size=l]){--tab-item-height-l: calc( var(--luzmo-component-height-l) + var(--luzmo-spacing-5) );--tabs-overflow-button-height: calc( var(--tab-item-height-l) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-l);--luzmo-action-button-icon-size: var(--luzmo-font-size-l);--tabs-overflow-next-button-right: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1)) );--tabs-overflow-previous-button-left: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1)) )}:host([size=xl]){--tab-item-height-xl: calc( var(--luzmo-component-height-xl) + var(--luzmo-spacing-5) );--tabs-overflow-button-height: calc( var(--tab-item-height-xl) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-xl);--luzmo-action-button-icon-size: var(--luzmo-font-size-xl);--tabs-overflow-next-button-right: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-2)) );--tabs-overflow-previous-button-left: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-2)) )}:host([compact]){--tabs-overflow-button-height: calc( var(--tab-item-compact-height-m) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--luzmo-action-button-icon-size: var(--luzmo-font-size-s)}luzmo-action-button{width:var(--luzmo-tabs-overflow-button-size, var(--tabs-overflow-button-size));height:var(--luzmo-tabs-overflow-button-height, var(--tabs-overflow-button-height));position:absolute;z-index:2;border:none;text-align:center;box-shadow:none;background:transparent;color:var(--luzmo-tabs-overflow-icon-color, var(--tabs-overflow-icon-color))}luzmo-action-button.left-scroll{visibility:hidden;left:var(--luzmo-tabs-overflow-previous-button-left, var(--tabs-overflow-previous-button-left))}luzmo-action-button.right-scroll{visibility:hidden;right:var(--luzmo-tabs-overflow-next-button-right, var(--tabs-overflow-next-button-right))}luzmo-action-button.left-scroll.show,luzmo-action-button.right-scroll.show{visibility:visible}.tabs-overflow-container{position:relative}.tabs-overflow-container:before,.tabs-overflow-container:after{content:"";visibility:hidden;position:absolute;z-index:1;height:var(--luzmo-tabs-overflow-button-height, var(--tabs-overflow-button-height));width:var(--luzmo-tabs-overflow-shadow-width, var(--tabs-overflow-shadow-width));pointer-events:none;inset-block-start:0}.tabs-overflow-container:before{background:transparent linear-gradient(270deg,transparent,var(--luzmo-tabs-overflow-shadow-color, var(--tabs-overflow-shadow-color))) 0 0 no-repeat padding-box;left:0}.tabs-overflow-container:after{background:transparent linear-gradient(90deg,transparent,var(--luzmo-tabs-overflow-shadow-color, var(--tabs-overflow-shadow-color))) 0 0 no-repeat padding-box;right:0}.tabs-overflow-container.left-shadow:before,.tabs-overflow-container.right-shadow:after{visibility:visible}';
777
- var St = Object.defineProperty, m = (s, t, o, e) => {
778
- for (var i = void 0, a = s.length - 1, r; a >= 0; a--)
779
- (r = s[a]) && (i = r(t, o, i) || i);
780
- return i && St(t, o, i), i;
440
+ ], n.prototype, "selected");
441
+ const J = ':host{top:0;right:0;bottom:0;left:0;width:100%;--tabs-divider-size: 2px;--tab-item-height-m: calc( var(--luzmo-component-height) + var(--luzmo-spacing-5) );--tabs-overflow-button-height: calc( var(--tab-item-height-m) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-m);--tabs-overflow-icon-color: var(--luzmo-font-color-focus);--tabs-overflow-shadow-color: var(--luzmo-background-color);--tabs-overflow-shadow-width: 50px;--luzmo-action-button-icon-size: var(--luzmo-font-size);--tabs-overflow-next-button-right: calc(-1 * var(--luzmo-spacing-4));--tabs-overflow-previous-button-left: calc(-1 * var(--luzmo-spacing-4))}:host([size=s]){--tab-item-height-s: calc( var(--luzmo-component-height-s) + var(--luzmo-spacing-4) );--tabs-overflow-button-height: calc( var(--tab-item-height-s) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-s);--luzmo-action-button-icon-size: var(--luzmo-font-size-s);--tabs-overflow-next-button-right: calc(-1 * var(--luzmo-spacing-3));--tabs-overflow-previous-button-left: calc(-1 * var(--luzmo-spacing-3))}:host([size=l]){--tab-item-height-l: calc( var(--luzmo-component-height-l) + var(--luzmo-spacing-5) );--tabs-overflow-button-height: calc( var(--tab-item-height-l) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-l);--luzmo-action-button-icon-size: var(--luzmo-font-size-l);--tabs-overflow-next-button-right: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1)) );--tabs-overflow-previous-button-left: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1)) )}:host([size=xl]){--tab-item-height-xl: calc( var(--luzmo-component-height-xl) + var(--luzmo-spacing-5) );--tabs-overflow-button-height: calc( var(--tab-item-height-xl) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--tabs-overflow-button-size: var(--tab-item-height-xl);--luzmo-action-button-icon-size: var(--luzmo-font-size-xl);--tabs-overflow-next-button-right: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-2)) );--tabs-overflow-previous-button-left: calc( -1 * calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-2)) )}:host([compact]){--tabs-overflow-button-height: calc( var(--tab-item-compact-height-m) - var( --luzmo-tabs-divider-size, var(--tabs-divider-size) ) );--luzmo-action-button-icon-size: var(--luzmo-font-size-s)}luzmo-action-button{width:var(--luzmo-tabs-overflow-button-size, var(--tabs-overflow-button-size));height:var(--luzmo-tabs-overflow-button-height, var(--tabs-overflow-button-height));position:absolute;z-index:2;border:none;text-align:center;box-shadow:none;background:transparent;color:var(--luzmo-tabs-overflow-icon-color, var(--tabs-overflow-icon-color))}luzmo-action-button.left-scroll{visibility:hidden;left:var(--luzmo-tabs-overflow-previous-button-left, var(--tabs-overflow-previous-button-left))}luzmo-action-button.right-scroll{visibility:hidden;right:var(--luzmo-tabs-overflow-next-button-right, var(--tabs-overflow-next-button-right))}luzmo-action-button.left-scroll.show,luzmo-action-button.right-scroll.show{visibility:visible}.tabs-overflow-container{position:relative}.tabs-overflow-container:before,.tabs-overflow-container:after{content:"";visibility:hidden;position:absolute;z-index:1;height:var(--luzmo-tabs-overflow-button-height, var(--tabs-overflow-button-height));width:var(--luzmo-tabs-overflow-shadow-width, var(--tabs-overflow-shadow-width));pointer-events:none;inset-block-start:0}.tabs-overflow-container:before{background:transparent linear-gradient(270deg,transparent,var(--luzmo-tabs-overflow-shadow-color, var(--tabs-overflow-shadow-color))) 0 0 no-repeat padding-box;left:0}.tabs-overflow-container:after{background:transparent linear-gradient(90deg,transparent,var(--luzmo-tabs-overflow-shadow-color, var(--tabs-overflow-shadow-color))) 0 0 no-repeat padding-box;right:0}.tabs-overflow-container.left-shadow:before,.tabs-overflow-container.right-shadow:after{visibility:visible}';
442
+ var Q = Object.defineProperty, b = (r, t, o, i) => {
443
+ for (var e = void 0, a = r.length - 1, s; a >= 0; a--)
444
+ (s = r[a]) && (e = s(t, o, e) || e);
445
+ return e && Q(t, o, e), e;
781
446
  };
782
- class h extends D(C) {
447
+ class u extends L(g) {
783
448
  constructor() {
784
449
  super(), this.compact = !1, this.labelPrevious = "Scroll to previous tabs", this.labelNext = "Scroll to next tabs", this.overflowState = {
785
450
  canScrollLeft: !1,
786
451
  canScrollRight: !1
787
- }, this.scrollFactor = 0.5, this.resizeController = new B(this, {
452
+ }, this.scrollFactor = 0.5, this.resizeController = new T(this, {
788
453
  target: this,
789
454
  callback: () => {
790
455
  this._updateScrollState();
@@ -792,7 +457,7 @@ class h extends D(C) {
792
457
  });
793
458
  }
794
459
  static get styles() {
795
- return [v(wt), v(N)];
460
+ return [m(J), m(E)];
796
461
  }
797
462
  get scrollContent() {
798
463
  return this.tabs;
@@ -809,58 +474,58 @@ class h extends D(C) {
809
474
  _updateScrollState() {
810
475
  const { scrollContent: t, overflowState: o } = this;
811
476
  if (t) {
812
- const [e] = this.scrollContent, { canScrollLeft: i, canScrollRight: a } = (e == null ? void 0 : e.scrollState) || {
477
+ const [i] = this.scrollContent, { canScrollLeft: e, canScrollRight: a } = (i == null ? void 0 : i.scrollState) || {
813
478
  canScrollLeft: !1,
814
479
  canScrollRight: !1
815
480
  };
816
481
  this.overflowState = {
817
482
  ...o,
818
- canScrollLeft: i,
483
+ canScrollLeft: e,
819
484
  canScrollRight: a
820
485
  };
821
486
  }
822
487
  }
823
488
  _handleScrollClick(t) {
824
- const o = t.currentTarget, [e] = this.scrollContent, i = e.clientWidth * this.scrollFactor, a = o.classList.contains("left-scroll") ? -i : i;
825
- e.scrollTabs(a, "smooth");
489
+ const o = t.currentTarget, [i] = this.scrollContent, e = i.clientWidth * this.scrollFactor, a = o.classList.contains("left-scroll") ? -e : e;
490
+ i.scrollTabs(a, "smooth");
826
491
  }
827
492
  updated(t) {
828
493
  super.updated(t), t.has("dir") && this._updateScrollState();
829
494
  }
830
495
  render() {
831
- const { canScrollRight: t, canScrollLeft: o } = this.overflowState, e = this.labelPrevious, i = this.labelNext;
832
- return x`
496
+ const { canScrollRight: t, canScrollLeft: o } = this.overflowState, i = this.labelPrevious, e = this.labelNext;
497
+ return z`
833
498
  <div
834
- class=${S({
499
+ class=${f({
835
500
  "tabs-overflow-container": !0,
836
501
  "left-shadow": o,
837
502
  "right-shadow": t
838
503
  })}
839
504
  >
840
505
  <luzmo-action-button
841
- class=${S({
506
+ class=${f({
842
507
  "left-scroll": !0,
843
508
  show: o
844
509
  })}
845
- aria-label=${e}
510
+ aria-label=${i}
846
511
  quiet
847
512
  dir="rtl"
848
513
  tabindex="-1"
849
514
  @click=${this._handleScrollClick}
850
515
  >
851
- <luzmo-icon slot="icon" .icon=${Z}></luzmo-icon>
516
+ <luzmo-icon slot="icon" .icon=${H}></luzmo-icon>
852
517
  </luzmo-action-button>
853
518
  <luzmo-action-button
854
- class=${S({
519
+ class=${f({
855
520
  "right-scroll": !0,
856
521
  show: t
857
522
  })}
858
- aria-label=${i}
523
+ aria-label=${e}
859
524
  quiet
860
525
  tabindex="-1"
861
526
  @click=${this._handleScrollClick}
862
527
  >
863
- <luzmo-icon slot="icon" .icon=${tt}></luzmo-icon>
528
+ <luzmo-icon slot="icon" .icon=${M}></luzmo-icon>
864
529
  </luzmo-action-button>
865
530
  <slot
866
531
  @slotchange=${this._handleSlotChange}
@@ -870,34 +535,34 @@ class h extends D(C) {
870
535
  `;
871
536
  }
872
537
  }
873
- m([
538
+ b([
874
539
  l({ type: Boolean, reflect: !0 })
875
- ], h.prototype, "compact");
876
- m([
540
+ ], u.prototype, "compact");
541
+ b([
877
542
  l({ type: String, attribute: "label-previous" })
878
- ], h.prototype, "labelPrevious");
879
- m([
543
+ ], u.prototype, "labelPrevious");
544
+ b([
880
545
  l({ type: String, attribute: "label-next" })
881
- ], h.prototype, "labelNext");
882
- m([
546
+ ], u.prototype, "labelNext");
547
+ b([
883
548
  l({ reflect: !0 })
884
- ], h.prototype, "dir");
885
- m([
886
- V()
887
- ], h.prototype, "overflowState");
888
- m([
889
- G({ selector: "luzmo-tabs", flatten: !0 })
890
- ], h.prototype, "tabs");
891
- m([
892
- _(".tabs-overflow-container")
893
- ], h.prototype, "overflowContainer");
894
- customElements.get("luzmo-tab") || customElements.define("luzmo-tab", f);
895
- customElements.get("luzmo-tabs") || customElements.define("luzmo-tabs", c);
896
- customElements.get("luzmo-tab-panel") || customElements.define("luzmo-tab-panel", T);
897
- customElements.get("luzmo-tabs-overflow") || customElements.define("luzmo-tabs-overflow", h);
549
+ ], u.prototype, "dir");
550
+ b([
551
+ R()
552
+ ], u.prototype, "overflowState");
553
+ b([
554
+ U({ selector: "luzmo-tabs", flatten: !0 })
555
+ ], u.prototype, "tabs");
556
+ b([
557
+ x(".tabs-overflow-container")
558
+ ], u.prototype, "overflowContainer");
559
+ customElements.get("luzmo-tab") || customElements.define("luzmo-tab", h);
560
+ customElements.get("luzmo-tabs") || customElements.define("luzmo-tabs", n);
561
+ customElements.get("luzmo-tab-panel") || customElements.define("luzmo-tab-panel", y);
562
+ customElements.get("luzmo-tabs-overflow") || customElements.define("luzmo-tabs-overflow", u);
898
563
  export {
899
- f as LuzmoTab,
900
- T as LuzmoTabPanel,
901
- c as LuzmoTabs,
902
- h as LuzmoTabsOverflow
564
+ h as LuzmoTab,
565
+ y as LuzmoTabPanel,
566
+ n as LuzmoTabs,
567
+ u as LuzmoTabsOverflow
903
568
  };