@luzmo/lucero 2.0.0 → 2.1.0
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.
- package/README.md +1 -0
- package/components/action-bar/index.cjs +1 -1
- package/components/action-bar/index.js +1 -1
- package/components/{action-bar-BhYEHEfo.js → action-bar-2FGCCKMW.js} +1 -1
- package/components/{action-bar-VhZT8kQM.cjs → action-bar-CXT4lT30.cjs} +1 -1
- package/components/action-button/index.cjs +1 -1
- package/components/action-button/index.js +1 -1
- package/components/action-button-BKnzGQR6.cjs +22 -0
- package/components/action-button-OB5MM04X.js +137 -0
- package/components/action-menu/index.cjs +1 -1
- package/components/action-menu/index.js +1 -1
- package/components/{action-menu-DREgNCXt.cjs → action-menu-CtMswuyc.cjs} +1 -1
- package/components/{action-menu-CkU-u55D.js → action-menu-Diehg1Kc.js} +2 -2
- package/components/badge/badge.d.ts +3 -0
- package/components/badge/index.cjs +1 -1
- package/components/badge/index.js +1 -1
- package/components/badge-CrUIOuV-.cjs +23 -0
- package/components/badge-DAGeawhJ.js +95 -0
- package/components/button/button-base.d.ts +3 -0
- package/components/button/index.cjs +1 -1
- package/components/button/index.js +2 -2
- package/components/button-DXWWEbir.js +125 -0
- package/components/{button-base-aTiE83bl.cjs → button-base-DiNxrttk.cjs} +3 -3
- package/components/{button-base-DsUg0bJB.js → button-base-DiPzVpp4.js} +12 -11
- package/components/button-l0fRopSN.cjs +20 -0
- package/components/calendar/index.cjs +1 -1
- package/components/calendar/index.js +1 -1
- package/components/{calendar-CXjdC7jm.js → calendar-C8u_88jX.js} +1 -1
- package/components/{calendar-DSlKZZCR.cjs → calendar-DZkKMs2L.cjs} +1 -1
- package/components/chat-message/index.cjs +1 -1
- package/components/chat-message/index.js +1 -1
- package/components/{chat-message-CJ7Xk7tz.js → chat-message-CXq0Trjx.js} +1 -1
- package/components/{chat-message-7cx2Bpo8.cjs → chat-message-t4a0r3R6.cjs} +1 -1
- package/components/{close-button-hicleVjQ.cjs → close-button-BntGLAcp.cjs} +1 -1
- package/components/{close-button-WomHVbgz.js → close-button-D12zZ9zC.js} +1 -1
- package/components/color-area/index.cjs +1 -1
- package/components/color-area/index.js +1 -1
- package/components/{color-area-ayGmH8dj.cjs → color-area-B_pRu9Vf.cjs} +6 -6
- package/components/{color-area-BRrtUbvH.js → color-area-DMpXKgPY.js} +9 -9
- package/components/color-menu/index.cjs +1 -1
- package/components/color-menu/index.js +1 -1
- package/components/{color-menu-DOq9PAWG.cjs → color-menu-CdETqhbP.cjs} +1 -1
- package/components/{color-menu-iKU6Vw8a.js → color-menu-jkdcr5ir.js} +2 -2
- package/components/color-picker/index.cjs +1 -1
- package/components/color-picker/index.js +1 -1
- package/components/{color-picker-D3WFls0M.cjs → color-picker-C4pvkA2k.cjs} +1 -1
- package/components/{color-picker-Bw5UKyME.js → color-picker-DF3gBQvH.js} +1 -1
- package/components/color-slider/index.cjs +1 -1
- package/components/color-slider/index.js +1 -1
- package/components/{color-slider-BiVpn9_U.cjs → color-slider-DLEM1nGA.cjs} +1 -1
- package/components/{color-slider-BtPNTmQu.js → color-slider-DejvUYrW.js} +1 -1
- package/components/date-range-picker/index.cjs +1 -1
- package/components/date-range-picker/index.js +1 -1
- package/components/{date-range-picker-DMq8EaiB.cjs → date-range-picker-9ioTuDZq.cjs} +1 -1
- package/components/{date-range-picker-DaHFLwQL.js → date-range-picker-DCOv5PYH.js} +2 -2
- package/components/date-time-picker/index.cjs +1 -1
- package/components/date-time-picker/index.js +1 -1
- package/components/{date-time-picker-hjeFVUz9.js → date-time-picker-ClgATXBy.js} +2 -2
- package/components/{date-time-picker-DdtcziBG.cjs → date-time-picker-DRjQTyGS.cjs} +1 -1
- package/components/index.cjs +1 -1
- package/components/index.js +34 -33
- package/components/infield-button/index.cjs +1 -1
- package/components/infield-button/index.js +1 -1
- package/components/{infield-button-BmGfFDDA.js → infield-button-C1mz69Qf.js} +1 -1
- package/components/{infield-button-Cdee_UPX.cjs → infield-button-CYO9V1eX.cjs} +1 -1
- package/components/language-resolution-BaKYDD1a.js +115 -0
- package/components/language-resolution-CSjktYg5.cjs +18 -0
- package/components/menu/index.cjs +1 -1
- package/components/menu/index.js +1 -1
- package/components/{menu-DXONqtwu.cjs → menu-Cq7BEv5Y.cjs} +2 -2
- package/components/{menu-C9ogB7Bq.js → menu-DY8q8qyn.js} +2 -2
- package/components/notice/index.cjs +1 -1
- package/components/notice/index.js +1 -1
- package/components/{notice-BeL9oE94.js → notice-s6QHF_tq.js} +1 -1
- package/components/{notice-COZLmk94.cjs → notice-xgrLOiC0.cjs} +1 -1
- package/components/number-field/index.cjs +1 -1
- package/components/number-field/index.js +1 -1
- package/components/number-field-04RFqrUa.cjs +57 -0
- package/components/{number-field-DjvWkjL8.js → number-field-BqnZS9Gx.js} +17 -17
- package/components/options/index.cjs +1 -1
- package/components/options/index.js +1 -1
- package/components/options/options.d.ts +3 -0
- package/components/{options-C1MoEq26.js → options-BqFBNoKA.js} +15 -14
- package/components/{options-yWbz0D6O.cjs → options-Dh4FJuAu.cjs} +13 -12
- package/components/picker/index.cjs +1 -1
- package/components/picker/index.js +1 -1
- package/components/picker/picker.d.ts +3 -0
- package/components/picker-D225VAbx.cjs +124 -0
- package/components/picker-button/index.cjs +1 -1
- package/components/picker-button/index.js +1 -1
- package/components/{picker-button-Dh2gGZ8R.cjs → picker-button-BR7oM7_M.cjs} +1 -1
- package/components/{picker-button-CF6yD_1d.js → picker-button-DVzLeTq8.js} +1 -1
- package/components/{picker-Bufw-biD.js → picker-f4fSGZX8.js} +58 -57
- package/components/prompt-box/index.cjs +1 -1
- package/components/prompt-box/index.js +1 -1
- package/components/{prompt-box-y7qWHF3P.js → prompt-box-BY1xKFZO.js} +2 -2
- package/components/{prompt-box-D358CWoY.cjs → prompt-box-Dg9S0C5x.cjs} +1 -1
- package/components/question-box/index.cjs +1 -1
- package/components/question-box/index.js +1 -1
- package/components/{question-box-9F6Ppakl.js → question-box-5VO9CM8H.js} +4 -4
- package/components/{question-box-DaAgC3_D.cjs → question-box-DvXRIiVG.cjs} +1 -1
- package/components/search/index.cjs +1 -1
- package/components/search/index.js +1 -1
- package/components/{search-CsNvKd8x.cjs → search-BhMhfCBh.cjs} +1 -1
- package/components/{search-B2DQb14U.js → search-C-EPZmTG.js} +1 -1
- package/components/select/index.cjs +1 -1
- package/components/select/index.js +1 -1
- package/components/{select-CE6pIRX3.js → select-CFtAPE-U.js} +9 -9
- package/components/{select-B_E-w1a2.cjs → select-JFwtVyhG.cjs} +2 -2
- package/components/slider/index.cjs +1 -1
- package/components/slider/index.js +1 -1
- package/components/{slider-CfgH3NK8.js → slider-B7QAhDTM.js} +2 -2
- package/components/{slider-CDrXecqO.cjs → slider-DxliwjT6.cjs} +2 -2
- package/components/{language-resolution-BUeKpSce.cjs → split-view/index.cjs} +1 -1
- package/components/split-view/index.d.ts +7 -0
- package/components/split-view/index.js +25 -0
- package/components/split-view/split-view-model.d.ts +12 -0
- package/components/split-view/split-view.d.ts +106 -0
- package/components/split-view-5uMSU_b7.cjs +43 -0
- package/components/split-view-FxpiSCem.js +359 -0
- package/components/status-light/index.cjs +1 -1
- package/components/status-light/index.js +1 -1
- package/components/status-light/status-light.d.ts +3 -0
- package/components/status-light-BYBYorYy.cjs +21 -0
- package/components/status-light-DC8qqO8q.js +86 -0
- package/components/tabs/index.cjs +1 -1
- package/components/tabs/index.js +1 -1
- package/components/{tabs-D1puCPrL.js → tabs-CjY4eX9W.js} +1 -1
- package/components/{tabs-CcnIX4jQ.cjs → tabs-ZwcVrVub.cjs} +1 -1
- package/components/tags/index.cjs +1 -1
- package/components/tags/index.js +1 -1
- package/components/tags/tag.d.ts +3 -0
- package/components/tags-B28zWEic.cjs +47 -0
- package/components/tags-BCKNzEaH.js +207 -0
- package/components/toast/index.cjs +1 -1
- package/components/toast/index.js +1 -1
- package/components/{toast-BPhdMJTx.cjs → toast-COQ7Xl5T.cjs} +1 -1
- package/components/{toast-D90C9Cim.js → toast-DlOeMDCI.js} +1 -1
- package/custom-elements.json +1 -1
- package/index.d.ts +1 -0
- package/package.json +7 -1
- package/utils/reactive-controllers/language-resolution.d.ts +32 -2
- package/components/action-button-CWAg-5tz.cjs +0 -22
- package/components/action-button-cULkUUi6.js +0 -137
- package/components/badge-BzQfqgq6.cjs +0 -23
- package/components/badge-Dnkh-mfN.js +0 -94
- package/components/button-BJ0Y6wlM.cjs +0 -20
- package/components/button-BtWr5Lag.js +0 -125
- package/components/language-resolution-DR30FsWE.js +0 -43
- package/components/number-field-D19qjVbk.cjs +0 -57
- package/components/picker-D6ZM08K8.cjs +0 -124
- package/components/status-light-BlfBJpqa.js +0 -85
- package/components/status-light-Bu0G8-lH.cjs +0 -21
- package/components/tags-Bw-y2Wfl.js +0 -206
- package/components/tags-Cr8ObbWn.cjs +0 -47
|
@@ -0,0 +1,359 @@
|
|
|
1
|
+
/*! * Lucero - The design system for Luzmo.
|
|
2
|
+
*
|
|
3
|
+
* Copyright © 2025 Luzmo
|
|
4
|
+
* All rights reserved.
|
|
5
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
+
*
|
|
10
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
+
* SOFTWARE.
|
|
17
|
+
* */
|
|
18
|
+
import { t as e } from "./decorate-CkCg3wfh.js";
|
|
19
|
+
import { t } from "./focusable-DuP0-Kuy.js";
|
|
20
|
+
import { html as n, nothing as r, unsafeCSS as i } from "lit";
|
|
21
|
+
import { property as a, query as o } from "lit/decorators.js";
|
|
22
|
+
//#region src/components/split-view/split-view-model.ts
|
|
23
|
+
function s(e, t) {
|
|
24
|
+
let n = Math.max(0, t.primaryMin, e - t.secondaryMax), r = Math.min(e, t.primaryMax, e - t.secondaryMin);
|
|
25
|
+
if (n <= r) return {
|
|
26
|
+
min: n,
|
|
27
|
+
max: r
|
|
28
|
+
};
|
|
29
|
+
let i = Math.min(e, Math.max(0, e / 2));
|
|
30
|
+
return {
|
|
31
|
+
min: i,
|
|
32
|
+
max: i
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
function c(e, t) {
|
|
36
|
+
return Math.min(t.max, Math.max(t.min, e));
|
|
37
|
+
}
|
|
38
|
+
//#endregion
|
|
39
|
+
//#region src/components/split-view/split-view.module.scss?inline
|
|
40
|
+
var l = ":host{min-block-size:0;min-inline-size:0;display:flex;position:relative}:host([vertical]){flex-direction:column}slot{display:contents}::slotted(*){min-block-size:0;min-inline-size:0}::slotted(:nth-child(n+3)){display:none!important}.separator{cursor:col-resize;block-size:100%;inline-size:var(--split-view-target-size);touch-action:none;z-index:1;outline:none;justify-content:center;align-items:center;display:flex;position:absolute;inset-block-start:0;inset-inline-start:calc(var(--splitter-position,0) * 1px - var(--split-view-target-size) / 2)}:host([vertical]) .separator{block-size:var(--split-view-target-size);cursor:row-resize;inline-size:100%;inset-block-start:calc(var(--splitter-position,0) * 1px - var(--split-view-target-size) / 2);inset-inline-start:0}.separator .divider{background-color:var(--luzmo-split-view-divider-color,var(--split-view-divider-color));block-size:100%;inline-size:var(--luzmo-split-view-divider-thickness,var(--split-view-divider-thickness));pointer-events:none}.separator .handle{background-color:var(--luzmo-split-view-divider-color,var(--split-view-handle-color));block-size:var(--split-view-handle-length);border-radius:var(--split-view-handle-radius);inline-size:var(--split-view-handle-thickness);pointer-events:none;display:none;position:absolute}:host([resizable]) .separator .handle{display:block}:host([vertical]) .separator .divider{block-size:var(--luzmo-split-view-divider-thickness,var(--split-view-divider-thickness));inline-size:100%}:host([vertical]) .separator .handle{block-size:var(--split-view-handle-thickness);inline-size:var(--split-view-handle-length)}:host(:not([vertical])) .separator.start-edge{inset-inline-start:0}:host(:not([vertical])) .separator.end-edge{inset-inline-start:calc(100% - var(--split-view-target-size))}:host(:not([vertical])) .separator.start-edge .divider,:host(:not([vertical])) .separator.end-edge .divider,:host([vertical]) .separator.start-edge .divider,:host([vertical]) .separator.end-edge .divider{position:absolute}:host(:not([vertical])) .separator.start-edge .divider{inset-inline-start:0}:host(:not([vertical])) .separator.start-edge .handle{inset-inline-start:calc(var(--split-view-focus-width) + var(--split-view-focus-offset))}:host(:not([vertical])) .separator.end-edge .divider{inset-inline-end:0}:host(:not([vertical])) .separator.end-edge .handle{inset-inline-end:calc(var(--split-view-focus-width) + var(--split-view-focus-offset))}:host([vertical]) .separator.start-edge{inset-block-start:0}:host([vertical]) .separator.end-edge{inset-block-start:calc(100% - var(--split-view-target-size))}:host([vertical]) .separator.start-edge .divider{inset-block-start:0}:host([vertical]) .separator.start-edge .handle{inset-block-start:calc(var(--split-view-focus-width) + var(--split-view-focus-offset))}:host([vertical]) .separator.end-edge .divider{inset-block-end:0}:host([vertical]) .separator.end-edge .handle{inset-block-end:calc(var(--split-view-focus-width) + var(--split-view-focus-offset))}:host([resizable]:not([disabled])) .separator:hover .divider,:host([resizable]:not([disabled])) .separator:hover .handle{background-color:var(--luzmo-split-view-divider-color-hover,var(--split-view-divider-color-hover))}:host([dragging]) .separator .divider,:host([dragging]) .separator .handle{background-color:var(--luzmo-split-view-divider-color-active,var(--split-view-divider-color-active))}.separator:focus-visible .divider{background-color:var(--luzmo-split-view-focus-color,var(--split-view-focus-color))}.separator:focus-visible .handle{outline:var(--split-view-focus-width) solid var(--luzmo-split-view-focus-color,var(--split-view-focus-color));outline-offset:var(--split-view-focus-offset)}:host(:not([resizable])) .separator,:host([disabled]) .separator{cursor:default}@media (forced-colors:active){:host{--highcontrast-split-view-divider-color:CanvasText;--highcontrast-split-view-focus-color:Highlight}.separator .divider,.separator .handle{background-color:var(--highcontrast-split-view-divider-color,var(--luzmo-split-view-divider-color,var(--split-view-divider-color)))}:host([resizable]:not([disabled])) .separator:hover .divider,:host([resizable]:not([disabled])) .separator:hover .handle,:host([dragging]) .separator .divider,:host([dragging]) .separator .handle{background-color:highlight}.separator:focus-visible .divider{background-color:var(--highcontrast-split-view-focus-color,var(--luzmo-split-view-focus-color,var(--split-view-focus-color)))}.separator:focus-visible .handle{outline-color:var(--highcontrast-split-view-focus-color,var(--luzmo-split-view-focus-color,var(--split-view-focus-color)))}}:host{--split-view-divider-color:var(--luzmo-border-color-full);--split-view-divider-color-hover:var(--luzmo-primary-hover);--split-view-divider-color-active:var(--luzmo-primary-down);--split-view-divider-thickness:var(--luzmo-border-width);--split-view-focus-color:var(--luzmo-primary-focus);--split-view-target-size:var(--luzmo-component-height-xs);--split-view-focus-offset:var(--luzmo-border-width);--split-view-focus-width:var(--luzmo-indicator-width,1px);--split-view-handle-color:var(--luzmo-font-color-extra-dimmed);--split-view-handle-length:var(--luzmo-component-height);--split-view-handle-thickness:var(--luzmo-spacing-2);--split-view-handle-radius:var(--luzmo-border-radius-full)}", u = 3840, d = 10, f = 50, p = 50, m = 0, h = class extends t {
|
|
41
|
+
constructor(...e) {
|
|
42
|
+
super(...e), this.vertical = !1, this.collapsible = !1, this.label = "Resize panels", this.primarySize = "50%", this._primaryMin = 0, this._primaryMax = u, this._secondaryMin = 0, this._secondaryMax = u, this._resizable = !1, this._splitterPos = 0, this._viewSize = 0, this._minPos = 0, this._maxPos = 0, this._enoughChildren = !1, this._positionInitialized = !1, this._initialSplitterPosSupplied = !1, this._activePanes = [], this._restorePositionOnReconnect = !1, this._paneInlineStyles = /* @__PURE__ */ new Map(), this._dragChanged = !1;
|
|
43
|
+
}
|
|
44
|
+
static get styles() {
|
|
45
|
+
let e = super.styles;
|
|
46
|
+
return [...Array.isArray(e) ? e : e ? [e] : [], i(l)];
|
|
47
|
+
}
|
|
48
|
+
set resizable(e) {
|
|
49
|
+
let t = !!e;
|
|
50
|
+
if (t === this._resizable) return;
|
|
51
|
+
let n = this._resizable;
|
|
52
|
+
this._resizable = t, t || this._cancelDrag(), this.requestUpdate("resizable", n);
|
|
53
|
+
}
|
|
54
|
+
get resizable() {
|
|
55
|
+
return this._resizable;
|
|
56
|
+
}
|
|
57
|
+
set primaryMin(e) {
|
|
58
|
+
let t = this._normalizeBound(e, 0);
|
|
59
|
+
if (t === this._primaryMin) return;
|
|
60
|
+
let n = this._primaryMin;
|
|
61
|
+
this._primaryMin = t, this.requestUpdate("primaryMin", n);
|
|
62
|
+
}
|
|
63
|
+
get primaryMin() {
|
|
64
|
+
return this._primaryMin;
|
|
65
|
+
}
|
|
66
|
+
set primaryMax(e) {
|
|
67
|
+
let t = this._normalizeBound(e, u);
|
|
68
|
+
if (t === this._primaryMax) return;
|
|
69
|
+
let n = this._primaryMax;
|
|
70
|
+
this._primaryMax = t, this.requestUpdate("primaryMax", n);
|
|
71
|
+
}
|
|
72
|
+
get primaryMax() {
|
|
73
|
+
return this._primaryMax;
|
|
74
|
+
}
|
|
75
|
+
set secondaryMin(e) {
|
|
76
|
+
let t = this._normalizeBound(e, 0);
|
|
77
|
+
if (t === this._secondaryMin) return;
|
|
78
|
+
let n = this._secondaryMin;
|
|
79
|
+
this._secondaryMin = t, this.requestUpdate("secondaryMin", n);
|
|
80
|
+
}
|
|
81
|
+
get secondaryMin() {
|
|
82
|
+
return this._secondaryMin;
|
|
83
|
+
}
|
|
84
|
+
set secondaryMax(e) {
|
|
85
|
+
let t = this._normalizeBound(e, u);
|
|
86
|
+
if (t === this._secondaryMax) return;
|
|
87
|
+
let n = this._secondaryMax;
|
|
88
|
+
this._secondaryMax = t, this.requestUpdate("secondaryMax", n);
|
|
89
|
+
}
|
|
90
|
+
get secondaryMax() {
|
|
91
|
+
return this._secondaryMax;
|
|
92
|
+
}
|
|
93
|
+
set splitterPos(e) {
|
|
94
|
+
this._positionInitialized || (this._initialSplitterPosSupplied = !0);
|
|
95
|
+
let t = Number.isFinite(e) ? e : 0, n = this.collapsible && (t === 0 || t === this._viewSize), r = this._positionInitialized && !n ? this._clampPosition(t) : t;
|
|
96
|
+
if (r === this._splitterPos) return;
|
|
97
|
+
let i = this._splitterPos;
|
|
98
|
+
this._splitterPos = r, this.requestUpdate("splitterPos", i);
|
|
99
|
+
}
|
|
100
|
+
get splitterPos() {
|
|
101
|
+
return this._splitterPos;
|
|
102
|
+
}
|
|
103
|
+
get focusElement() {
|
|
104
|
+
return this._separator ?? this;
|
|
105
|
+
}
|
|
106
|
+
connectedCallback() {
|
|
107
|
+
this._positionInitialized || (this._initialSplitterPosSupplied = this._initialSplitterPosSupplied || this.hasAttribute("splitter-pos")), super.connectedCallback(), typeof ResizeObserver < "u" && (this._resizeObserver ??= new ResizeObserver(() => {
|
|
108
|
+
this._recalculate(!1);
|
|
109
|
+
}), this._resizeObserver.observe(this)), this.updateComplete.then(() => {
|
|
110
|
+
this.isConnected && this.handleSlotChange();
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
disconnectedCallback() {
|
|
114
|
+
this._cancelDrag(!1), this._resizeObserver?.disconnect(), this._restorePaneStyles(), this._activePanes = [], this._restorePositionOnReconnect = !0, this._clearControlledElementId(), this._controlledElement = void 0, super.disconnectedCallback();
|
|
115
|
+
}
|
|
116
|
+
_normalizeBound(e, t) {
|
|
117
|
+
return Number.isFinite(e) && e >= 0 ? e : t;
|
|
118
|
+
}
|
|
119
|
+
_measureView() {
|
|
120
|
+
let e = this.getBoundingClientRect();
|
|
121
|
+
return this.vertical ? e.height : e.width;
|
|
122
|
+
}
|
|
123
|
+
_calculateBounds() {
|
|
124
|
+
this._viewSize = this._measureView();
|
|
125
|
+
let e = s(this._viewSize, {
|
|
126
|
+
primaryMin: this.primaryMin,
|
|
127
|
+
primaryMax: this.primaryMax,
|
|
128
|
+
secondaryMin: this.secondaryMin,
|
|
129
|
+
secondaryMax: this.secondaryMax
|
|
130
|
+
});
|
|
131
|
+
this._minPos = e.min, this._maxPos = e.max;
|
|
132
|
+
}
|
|
133
|
+
_clampPosition(e) {
|
|
134
|
+
return c(e, {
|
|
135
|
+
min: this._minPos,
|
|
136
|
+
max: this._maxPos
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
_resolveInitialPosition() {
|
|
140
|
+
let e = this.primarySize.trim();
|
|
141
|
+
if (/^\d+(?:\.\d+)?(?:px)?$/.test(e)) return Number.parseFloat(e);
|
|
142
|
+
if (/^\d+(?:\.\d+)?%$/.test(e)) return Number.parseFloat(e) / 100 * this._viewSize;
|
|
143
|
+
if (e === "auto" && this._controlledElement) {
|
|
144
|
+
let e = Number.parseFloat(this._controlledElement.style.getPropertyValue(this.vertical ? "block-size" : "inline-size"));
|
|
145
|
+
if (Number.isFinite(e) && e > 0) return e;
|
|
146
|
+
let t = Number.parseFloat(getComputedStyle(this._controlledElement).getPropertyValue(this.vertical ? "height" : "width"));
|
|
147
|
+
if (Number.isFinite(t) && t > 0) return t;
|
|
148
|
+
let n = this._controlledElement.getBoundingClientRect(), r = this.vertical ? n.height : n.width;
|
|
149
|
+
if (Number.isFinite(r) && r > 0) return r;
|
|
150
|
+
}
|
|
151
|
+
return this._viewSize / 2;
|
|
152
|
+
}
|
|
153
|
+
_applyPaneSizes() {
|
|
154
|
+
let [e, t] = this._activePanes, n = Math.round(this.splitterPos), r = Math.round(this._viewSize);
|
|
155
|
+
e && (e.style.flex = `0 0 ${n}px`, e.style.display = r > 0 && n <= 0 ? "none" : this._paneInlineStyles.get(e)?.display ?? ""), t && (t.style.flex = "1 1 0", t.style.display = r > 0 && n >= r ? "none" : this._paneInlineStyles.get(t)?.display ?? "");
|
|
156
|
+
}
|
|
157
|
+
_restorePaneStyles() {
|
|
158
|
+
for (let [e, t] of this._paneInlineStyles) e.style.display = t.display, e.style.flex = t.flex;
|
|
159
|
+
this._paneInlineStyles.clear();
|
|
160
|
+
}
|
|
161
|
+
_setActivePanes(e) {
|
|
162
|
+
let t = e.slice(0, 2), n = t.length !== this._activePanes.length || t.some((e, t) => e !== this._activePanes[t]);
|
|
163
|
+
if (n && (this._restorePaneStyles(), this._activePanes = t), n || this._paneInlineStyles.size === 0) for (let e of t) this._paneInlineStyles.set(e, {
|
|
164
|
+
display: e.style.display,
|
|
165
|
+
flex: e.style.flex
|
|
166
|
+
});
|
|
167
|
+
return n;
|
|
168
|
+
}
|
|
169
|
+
_recalculate(e) {
|
|
170
|
+
if (!this.isConnected || !this._enoughChildren) return;
|
|
171
|
+
let t = this._viewSize, n = this._positionInitialized && this.collapsible && this.splitterPos === 0, r = this._positionInitialized && this.collapsible && t > 0 && this.splitterPos === t;
|
|
172
|
+
this._calculateBounds();
|
|
173
|
+
let i;
|
|
174
|
+
this._positionInitialized ? i = e ? this._resolveInitialPosition() : n ? 0 : r ? this._viewSize : this._clampPosition(this.splitterPos) : (i = this._initialSplitterPosSupplied ? this.splitterPos : this._resolveInitialPosition(), this._positionInitialized = !0), this.splitterPos = i, this._applyPaneSizes();
|
|
175
|
+
}
|
|
176
|
+
_syncAriaControls() {
|
|
177
|
+
!this._separator || !this._controlledElement || (this._separator.ariaControlsElements = [this._controlledElement]);
|
|
178
|
+
}
|
|
179
|
+
_clearControlledElementId() {
|
|
180
|
+
this._controlledElement && this._controlledElement.id === this._controlledElementGeneratedId && this._controlledElement.removeAttribute("id"), this._controlledElementGeneratedId = void 0;
|
|
181
|
+
}
|
|
182
|
+
handleSlotChange() {
|
|
183
|
+
let e = this._paneSlot?.assignedElements() ?? [], t = this._setActivePanes(e), n = e[0];
|
|
184
|
+
n !== this._controlledElement && (this._clearControlledElementId(), this._controlledElement = n), this._controlledElement && !this._controlledElement.id && (m += 1, this._controlledElementGeneratedId = `luzmo-split-view-pane-${m}`, this._controlledElement.id = this._controlledElementGeneratedId);
|
|
185
|
+
let r = this._enoughChildren, i = e.length >= 2;
|
|
186
|
+
if (i !== this._enoughChildren && (this._enoughChildren = i, this.requestUpdate()), i) {
|
|
187
|
+
let e = !r || t && !this._restorePositionOnReconnect;
|
|
188
|
+
this._restorePositionOnReconnect = !1, this.updateComplete.then(() => {
|
|
189
|
+
this._recalculate(e), this._syncAriaControls();
|
|
190
|
+
});
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
_dispatchValueEvent(e) {
|
|
194
|
+
this.dispatchEvent(new Event(e, {
|
|
195
|
+
bubbles: !0,
|
|
196
|
+
composed: !0
|
|
197
|
+
}));
|
|
198
|
+
}
|
|
199
|
+
_setPosition(e, t = {}) {
|
|
200
|
+
let n = this._clampPosition(e);
|
|
201
|
+
return this.collapsible && t.collapse && (e <= 0 && (n = 0), e >= this._viewSize && (n = this._viewSize)), n === this.splitterPos ? !1 : (this.splitterPos > 0 && this.splitterPos < this._viewSize && (this._lastExpandedPosition = this.splitterPos), this.splitterPos = n, this._applyPaneSizes(), (t.emit ?? !0) && this._dispatchValueEvent("input"), !0);
|
|
202
|
+
}
|
|
203
|
+
handleKeydown(e) {
|
|
204
|
+
if (!this.resizable || this.disabled) return;
|
|
205
|
+
let t;
|
|
206
|
+
switch (e.key) {
|
|
207
|
+
case "ArrowLeft":
|
|
208
|
+
this.vertical || (t = this.splitterPos + (this.isLTR ? -10 : d));
|
|
209
|
+
break;
|
|
210
|
+
case "ArrowRight":
|
|
211
|
+
this.vertical || (t = this.splitterPos + (this.isLTR ? d : -10));
|
|
212
|
+
break;
|
|
213
|
+
case "ArrowUp":
|
|
214
|
+
this.vertical && (t = this.splitterPos - d);
|
|
215
|
+
break;
|
|
216
|
+
case "ArrowDown":
|
|
217
|
+
this.vertical && (t = this.splitterPos + d);
|
|
218
|
+
break;
|
|
219
|
+
case "PageUp":
|
|
220
|
+
t = this.splitterPos + (this.vertical ? -50 : f);
|
|
221
|
+
break;
|
|
222
|
+
case "PageDown":
|
|
223
|
+
t = this.splitterPos + (this.vertical ? f : -50);
|
|
224
|
+
break;
|
|
225
|
+
case "Home":
|
|
226
|
+
t = this.collapsible ? 0 : this._minPos;
|
|
227
|
+
break;
|
|
228
|
+
case "End":
|
|
229
|
+
t = this.collapsible ? this._viewSize : this._maxPos;
|
|
230
|
+
break;
|
|
231
|
+
case "Enter":
|
|
232
|
+
if (!this.collapsible) return;
|
|
233
|
+
t = this.splitterPos === 0 ? this._lastExpandedPosition ?? this._viewSize / 2 : 0;
|
|
234
|
+
break;
|
|
235
|
+
default: return;
|
|
236
|
+
}
|
|
237
|
+
t !== void 0 && (e.preventDefault(), this._setPosition(t, { collapse: !0 }) && this._dispatchValueEvent("change"));
|
|
238
|
+
}
|
|
239
|
+
_capturePointer(e, t) {
|
|
240
|
+
try {
|
|
241
|
+
e.setPointerCapture(t), this._capturedPointer = {
|
|
242
|
+
target: e,
|
|
243
|
+
pointerId: t
|
|
244
|
+
};
|
|
245
|
+
} catch {
|
|
246
|
+
this._capturedPointer = void 0;
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
_releasePointer() {
|
|
250
|
+
let e = this._capturedPointer;
|
|
251
|
+
this._capturedPointer = void 0, e?.target.hasPointerCapture(e.pointerId) && e.target.releasePointerCapture(e.pointerId);
|
|
252
|
+
}
|
|
253
|
+
handlePointerDown(e) {
|
|
254
|
+
!this.resizable || this.disabled || e.button !== 0 || this._dragStartPosition !== void 0 || (this._dragPointerId = e.pointerId, this._dragStartPosition = this.splitterPos, this._dragChanged = !1, this.toggleAttribute("dragging", !0), this._capturePointer(e.currentTarget, e.pointerId));
|
|
255
|
+
}
|
|
256
|
+
_pointerPosition(e) {
|
|
257
|
+
let t = this.getBoundingClientRect();
|
|
258
|
+
return this.vertical ? e.clientY - t.top : this.isLTR ? e.clientX - t.left : t.right - e.clientX;
|
|
259
|
+
}
|
|
260
|
+
handlePointerMove(e) {
|
|
261
|
+
if (this._dragPointerId !== e.pointerId || this._dragStartPosition === void 0 || !this.resizable || this.disabled) return;
|
|
262
|
+
let t = this._pointerPosition(e);
|
|
263
|
+
this.collapsible && t < this._minPos - p && (t = 0), this.collapsible && t > this._maxPos + p && (t = this._viewSize), this._setPosition(t, { collapse: !0 }) && (this._dragChanged = !0);
|
|
264
|
+
}
|
|
265
|
+
_finishDrag() {
|
|
266
|
+
this._dragPointerId = void 0, this._releasePointer(), this._dragStartPosition = void 0, this._dragChanged = !1, this.toggleAttribute("dragging", !1);
|
|
267
|
+
}
|
|
268
|
+
handlePointerUp(e) {
|
|
269
|
+
if (this._dragPointerId !== e.pointerId || this._dragStartPosition === void 0) return;
|
|
270
|
+
let t = this._dragChanged;
|
|
271
|
+
this._finishDrag(), t && this._dispatchValueEvent("change");
|
|
272
|
+
}
|
|
273
|
+
_cancelDrag(e = !0) {
|
|
274
|
+
if (this._dragStartPosition === void 0) return;
|
|
275
|
+
let t = this._dragStartPosition, n = this._dragChanged;
|
|
276
|
+
this._finishDrag(), e && n && this._setPosition(t, { collapse: !0 });
|
|
277
|
+
}
|
|
278
|
+
handlePointerCancel(e) {
|
|
279
|
+
this._dragPointerId === e.pointerId && this._cancelDrag();
|
|
280
|
+
}
|
|
281
|
+
render() {
|
|
282
|
+
return n`
|
|
283
|
+
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
284
|
+
${this._enoughChildren ? n`
|
|
285
|
+
<div
|
|
286
|
+
class="separator ${this.splitterPos <= 0 ? "start-edge" : this._viewSize > 0 && this.splitterPos >= this._viewSize ? "end-edge" : ""}"
|
|
287
|
+
role="separator"
|
|
288
|
+
aria-label=${this.label}
|
|
289
|
+
aria-disabled=${this.resizable ? this.disabled ? "true" : "false" : r}
|
|
290
|
+
aria-orientation=${this.vertical ? "horizontal" : "vertical"}
|
|
291
|
+
aria-valuemin=${this.resizable ? this._positionAsPercentage(this.collapsible ? 0 : this._minPos) : r}
|
|
292
|
+
aria-valuemax=${this.resizable ? this._positionAsPercentage(this.collapsible ? this._viewSize : this._maxPos) : r}
|
|
293
|
+
aria-valuenow=${this.resizable ? this._positionAsPercentage(this.splitterPos) : r}
|
|
294
|
+
tabindex=${this.resizable ? this.disabled ? "-1" : "0" : r}
|
|
295
|
+
style=${`--splitter-position: ${this.splitterPos}`}
|
|
296
|
+
@keydown=${this.handleKeydown}
|
|
297
|
+
@pointerdown=${this.handlePointerDown}
|
|
298
|
+
@pointermove=${this.handlePointerMove}
|
|
299
|
+
@pointerup=${this.handlePointerUp}
|
|
300
|
+
@pointercancel=${this.handlePointerCancel}
|
|
301
|
+
@lostpointercapture=${this.handlePointerCancel}
|
|
302
|
+
>
|
|
303
|
+
<span class="divider" aria-hidden="true"></span>
|
|
304
|
+
<span class="handle" aria-hidden="true"></span>
|
|
305
|
+
</div>
|
|
306
|
+
` : r}
|
|
307
|
+
`;
|
|
308
|
+
}
|
|
309
|
+
_positionAsPercentage(e) {
|
|
310
|
+
return String(this._viewSize > 0 ? Math.round(e / this._viewSize * 100) : 0);
|
|
311
|
+
}
|
|
312
|
+
willUpdate(e) {
|
|
313
|
+
super.willUpdate(e), (e.has("vertical") || e.has("primaryMin") || e.has("primaryMax") || e.has("secondaryMin") || e.has("secondaryMax") || e.has("collapsible")) && this._recalculate(!1), e.has("primarySize") && this._recalculate(!0);
|
|
314
|
+
}
|
|
315
|
+
updated(e) {
|
|
316
|
+
super.updated(e), e.has("splitterPos") && this._applyPaneSizes(), this._syncAriaControls(), e.has("disabled") && this.disabled && this._cancelDrag();
|
|
317
|
+
}
|
|
318
|
+
};
|
|
319
|
+
//#endregion
|
|
320
|
+
//#region src/components/split-view/index.ts
|
|
321
|
+
e([a({
|
|
322
|
+
type: Boolean,
|
|
323
|
+
reflect: !0
|
|
324
|
+
})], h.prototype, "vertical", void 0), e([a({
|
|
325
|
+
type: Boolean,
|
|
326
|
+
reflect: !0
|
|
327
|
+
})], h.prototype, "resizable", null), e([a({
|
|
328
|
+
type: Boolean,
|
|
329
|
+
reflect: !0
|
|
330
|
+
})], h.prototype, "collapsible", void 0), e([a({
|
|
331
|
+
type: String,
|
|
332
|
+
reflect: !0
|
|
333
|
+
})], h.prototype, "label", void 0), e([a({
|
|
334
|
+
type: Number,
|
|
335
|
+
reflect: !0,
|
|
336
|
+
attribute: "primary-min"
|
|
337
|
+
})], h.prototype, "primaryMin", null), e([a({
|
|
338
|
+
type: Number,
|
|
339
|
+
reflect: !0,
|
|
340
|
+
attribute: "primary-max"
|
|
341
|
+
})], h.prototype, "primaryMax", null), e([a({
|
|
342
|
+
type: Number,
|
|
343
|
+
reflect: !0,
|
|
344
|
+
attribute: "secondary-min"
|
|
345
|
+
})], h.prototype, "secondaryMin", null), e([a({
|
|
346
|
+
type: Number,
|
|
347
|
+
reflect: !0,
|
|
348
|
+
attribute: "secondary-max"
|
|
349
|
+
})], h.prototype, "secondaryMax", null), e([a({
|
|
350
|
+
type: String,
|
|
351
|
+
reflect: !0,
|
|
352
|
+
attribute: "primary-size"
|
|
353
|
+
})], h.prototype, "primarySize", void 0), e([a({
|
|
354
|
+
type: Number,
|
|
355
|
+
reflect: !0,
|
|
356
|
+
attribute: "splitter-pos"
|
|
357
|
+
})], h.prototype, "splitterPos", null), e([o("slot")], h.prototype, "_paneSlot", void 0), e([o("[role=\"separator\"]")], h.prototype, "_separator", void 0), typeof customElements < "u" && !customElements.get("luzmo-split-view") && customElements.define("luzmo-split-view", h);
|
|
358
|
+
//#endregion
|
|
359
|
+
export { h as t };
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../status-light-
|
|
18
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../status-light-BYBYorYy.cjs");exports.LuzmoStatusLight=e.t;
|
|
@@ -21,5 +21,5 @@
|
|
|
21
21
|
e.setAttribute("data-luzmo-vars", ""), e.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: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--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-border-width: 1px;--luzmo-shadow-color-rgb: 0, 0, 0;--luzmo-shadow-opacity: 0.1;--luzmo-shadow-color: rgba( var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity) );--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-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-accent-on-subtle-color: var(--luzmo-primary);--luzmo-primary-rgb: 68, 52, 255;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-secondary: #d000d0;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 208, 0, 208;--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba( var(--luzmo-border-color-rgb), 0.4 );--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-width: thin;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-on-subtle-color: var(--luzmo-negative-color);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-negative-inverse-color: #ffffff;--luzmo-positive-color: rgb(18, 133, 90);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-on-subtle-color: color-mix( in oklch, var(--luzmo-positive-color), var(--luzmo-font-color) 11% );--luzmo-positive-color-rgb: 18, 133, 90;--luzmo-positive-inverse-color: #ffffff;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-neutral-on-subtle-color: var(--luzmo-selected-color-hard);--luzmo-informative-color: #1670dd;--luzmo-informative-color-hover: color-mix(in oklch, var(--luzmo-informative-color), black 8%);--luzmo-informative-color-down: color-mix(in oklch, var(--luzmo-informative-color), black 20%);--luzmo-informative-color-focus: var(--luzmo-informative-color-hover);--luzmo-informative-on-subtle-color: color-mix( in oklch, var(--luzmo-informative-color), var(--luzmo-font-color) 9% );--luzmo-informative-color-rgb: 22, 112, 221;--luzmo-informative-inverse-color: #ffffff;--luzmo-notice-color: rgb(229, 127, 0);--luzmo-notice-color-hover: color-mix(in oklch, var(--luzmo-notice-color), black 8%);--luzmo-notice-color-down: color-mix(in oklch, var(--luzmo-notice-color), black 20%);--luzmo-notice-color-focus: var(--luzmo-notice-color-hover);--luzmo-notice-on-subtle-color: color-mix( in oklch, var(--luzmo-notice-color), var(--luzmo-font-color) 40% );--luzmo-notice-inverse-color: var(--luzmo-selected-color-hard);--luzmo-seafoam-color: rgb(0, 140, 140);--luzmo-indigo-color: rgb(68, 52, 255);--luzmo-purple-color: rgb(112, 48, 210);--luzmo-fuchsia-color: rgb(205, 30, 170);--luzmo-magenta-color: rgb(203, 36, 98);--luzmo-yellow-color: rgb(228, 208, 0);--luzmo-gray-color: rgb(110, 110, 110);--luzmo-red-color: rgb(202, 34, 28);--luzmo-orange-color: rgb(218, 123, 17);--luzmo-chartreuse-color: rgb(85, 135, 0);--luzmo-celery-color: rgb(48, 134, 22);--luzmo-green-color: rgb(18, 133, 90);--luzmo-cyan-color: rgb(0, 134, 180);--luzmo-blue-color: rgb(22, 112, 221);--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: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}html.dark,html.dark-theme,:where(.dark-theme){--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.2);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.35);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-rgb: 255, 255, 255;--luzmo-border-color-full: #4c4c57;--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), white 20%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), white 35%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), white 20%);--luzmo-border-color-disabled: #333;--luzmo-shadow-opacity: 0.35;--luzmo-shadow-color: rgba( var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity) );--luzmo-font-color: #ced4da;--luzmo-font-color-extra-dimmed: #72787f;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), white 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), white 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), white 8%);--luzmo-primary: #7b90ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), white 12%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), white 24%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), white 12%);--luzmo-accent-on-subtle-color: color-mix( in oklch, var(--luzmo-primary), var(--luzmo-font-color) 1% );--luzmo-background-color: #262626;--luzmo-background-color-rgb: 0, 0, 0;--luzmo-background-color-disabled: #939ea8;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 3%), white 14%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 3%), white 25%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 3%), white 14%);--luzmo-background-color-highlight: rgb(72, 72, 72);--luzmo-background-color-highlight-disabled: #313131;--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), white 20%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), white 35%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), white 20%);--luzmo-primary-inverse-color: var(--luzmo-background-color);--luzmo-indicator-color: var(--luzmo-primary);--luzmo-primary-rgb: 94, 113, 208;--luzmo-secondary: #ebff00;--luzmo-secondary-inverse-color: #333;--luzmo-secondary-rgb: 200, 219, 0;--luzmo-negative-color: #f76d74;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), white 12%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), white 24%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), white 12%);--luzmo-negative-on-subtle-color: color-mix( in oklch, var(--luzmo-negative-color), var(--luzmo-font-color) 40% );--luzmo-negative-color-rgb: 247, 109, 116;--luzmo-negative-inverse-color: var(--luzmo-background-color);--luzmo-positive-color: #39a875;--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), white 12%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), white 24%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), white 12%);--luzmo-positive-on-subtle-color: color-mix( in oklch, var(--luzmo-positive-color), var(--luzmo-font-color) 35% );--luzmo-positive-color-rgb: 57, 168, 117;--luzmo-positive-inverse-color: var(--luzmo-background-color);--luzmo-selected-color: #afafaf;--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), white 20%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), white 35%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), white 20%);--luzmo-selected-color-hard: #e9e9e9;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), white 20%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), white 35%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), white 20%);--luzmo-neutral-on-subtle-color: var(--luzmo-selected-color-hard);--luzmo-informative-color: #5c94ff;--luzmo-informative-color-hover: color-mix(in oklch, var(--luzmo-informative-color), white 12%);--luzmo-informative-color-down: color-mix(in oklch, var(--luzmo-informative-color), white 24%);--luzmo-informative-color-focus: var(--luzmo-informative-color-hover);--luzmo-informative-on-subtle-color: color-mix( in oklch, var(--luzmo-informative-color), var(--luzmo-font-color) 36% );--luzmo-informative-color-rgb: 92, 148, 255;--luzmo-informative-inverse-color: var(--luzmo-background-color);--luzmo-notice-color-hover: color-mix(in oklch, var(--luzmo-notice-color), white 12%);--luzmo-notice-color-down: color-mix(in oklch, var(--luzmo-notice-color), white 24%);--luzmo-notice-color-focus: var(--luzmo-notice-color-hover);--luzmo-notice-on-subtle-color: var(--luzmo-notice-color);--luzmo-notice-inverse-color: var(--luzmo-background-color);--luzmo-disabled-color: #75797b}", document.head.appendChild(e);
|
|
22
22
|
}
|
|
23
23
|
})();
|
|
24
|
-
import { t as e } from "../status-light-
|
|
24
|
+
import { t as e } from "../status-light-DC8qqO8q.js";
|
|
25
25
|
export { e as LuzmoStatusLight };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
|
|
2
2
|
import { LuzmoElement } from '../../utils/base';
|
|
3
|
+
import { LanguageScriptController } from '../../utils/reactive-controllers/language-resolution';
|
|
3
4
|
export type StatusLightSemanticVariants = 'neutral' | 'informative' | 'positive' | 'negative' | 'notice';
|
|
4
5
|
export type StatusLightNonSemanticVariants = 'seafoam' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'yellow' | 'gray' | 'red' | 'orange' | 'chartreuse' | 'celery' | 'green' | 'cyan' | 'blue';
|
|
5
6
|
export type StatusLightVariants = StatusLightSemanticVariants | StatusLightNonSemanticVariants;
|
|
@@ -15,6 +16,8 @@ declare const LuzmoStatusLight_base: typeof LuzmoElement & {
|
|
|
15
16
|
*/
|
|
16
17
|
export declare class LuzmoStatusLight extends LuzmoStatusLight_base {
|
|
17
18
|
static get styles(): CSSResultArray;
|
|
19
|
+
/** @internal */
|
|
20
|
+
protected readonly _languageScript: LanguageScriptController;
|
|
18
21
|
private _variant;
|
|
19
22
|
get variant(): StatusLightVariants;
|
|
20
23
|
set variant(variant: StatusLightVariants);
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/*! * Lucero - The design system for Luzmo.
|
|
2
|
+
*
|
|
3
|
+
* Copyright © 2025 Luzmo
|
|
4
|
+
* All rights reserved.
|
|
5
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
+
*
|
|
10
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
+
* SOFTWARE.
|
|
17
|
+
* */
|
|
18
|
+
const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./language-resolution-CSjktYg5.cjs");let r=require("lit"),i=require("lit/decorators.js");var a=`:host{font-family:var(--luzmo-status-light-font-family,var(--luzmo-font-family));color:var(--highcontrast-status-light-content-color,var(--luzmo-status-light-content-color,var(--status-light-content-color)));min-block-size:var(--luzmo-status-light-height,var(--status-light-height));box-sizing:border-box;vertical-align:bottom;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--luzmo-status-light-gap,var(--status-light-gap));outline:none;display:inline-flex;position:relative}.dot{block-size:var(--luzmo-status-light-dot-size,var(--status-light-dot-size));inline-size:var(--luzmo-status-light-dot-size,var(--status-light-dot-size));background-color:var(--highcontrast-status-light-dot-color,var(--luzmo-status-light-dot-color,var(--status-light-dot-color)));border-radius:50%;flex-shrink:0}.label{box-sizing:border-box;line-height:1;font-weight:var(--luzmo-status-light-font-weight,var(--status-light-font-weight));font-size:var(--luzmo-status-light-font-size,var(--status-light-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}:host([data-luzmo-language-script=Latn]) .label{text-box:trim-both cap alphabetic;margin-block:-.35em;padding-block:.35em}:host([disabled]){opacity:var(--luzmo-status-light-disabled-opacity,.4);pointer-events:none;cursor:default}@media (forced-colors:active){:host{--highcontrast-status-light-content-color:ButtonText;forced-color-adjust:none}.dot{--highcontrast-status-light-dot-color:Highlight}:host([disabled]){--highcontrast-status-light-content-color:GrayText}:host([disabled]) .dot{--highcontrast-status-light-dot-color:GrayText}}:host{--status-light-content-color:var(--luzmo-font-color);--status-light-font-weight:var(--luzmo-font-weight);--status-light-dot-color:var(--luzmo-border-color-full)}:host([size=xs]){--status-light-height:var(--luzmo-component-height-xxs);--status-light-font-size:var(--luzmo-font-size-xs);--status-light-dot-size:6px;--status-light-gap:var(--luzmo-spacing-3)}:host([size=s]){--status-light-height:var(--luzmo-component-height-xs);--status-light-font-size:var(--luzmo-font-size-s);--status-light-dot-size:8px;--status-light-gap:var(--luzmo-spacing-3)}:host{--status-light-height:var(--luzmo-component-height-s);--status-light-font-size:var(--luzmo-font-size);--status-light-dot-size:10px;--status-light-gap:var(--luzmo-spacing-3)}:host([size=l]){--status-light-height:var(--luzmo-component-height);--status-light-font-size:var(--luzmo-font-size);--status-light-dot-size:12px;--status-light-gap:var(--luzmo-spacing-4)}:host([size=xl]){--status-light-height:var(--luzmo-component-height-l);--status-light-font-size:var(--luzmo-font-size-l);--status-light-dot-size:14px;--status-light-gap:var(--luzmo-spacing-4)}:host([variant=neutral]){--status-light-dot-color:var(--luzmo-selected-color-hard)}:host([variant=informative]){--status-light-dot-color:var(--luzmo-informative-color)}:host([variant=positive]){--status-light-dot-color:var(--luzmo-positive-color)}:host([variant=negative]){--status-light-dot-color:var(--luzmo-negative-color)}:host([variant=notice]){--status-light-dot-color:var(--luzmo-notice-color)}:host([variant=seafoam]){--status-light-dot-color:var(--luzmo-seafoam-color)}:host([variant=indigo]){--status-light-dot-color:var(--luzmo-indigo-color)}:host([variant=purple]){--status-light-dot-color:var(--luzmo-purple-color)}:host([variant=fuchsia]){--status-light-dot-color:var(--luzmo-fuchsia-color)}:host([variant=magenta]){--status-light-dot-color:var(--luzmo-magenta-color)}:host([variant=yellow]){--status-light-dot-color:var(--luzmo-yellow-color)}:host([variant=gray]){--status-light-dot-color:var(--luzmo-gray-color)}:host([variant=red]){--status-light-dot-color:var(--luzmo-red-color)}:host([variant=orange]){--status-light-dot-color:var(--luzmo-orange-color)}:host([variant=chartreuse]){--status-light-dot-color:var(--luzmo-chartreuse-color)}:host([variant=celery]){--status-light-dot-color:var(--luzmo-celery-color)}:host([variant=green]){--status-light-dot-color:var(--luzmo-green-color)}:host([variant=cyan]){--status-light-dot-color:var(--luzmo-cyan-color)}:host([variant=blue]){--status-light-dot-color:var(--luzmo-blue-color)}`,o=[`neutral`,`informative`,`positive`,`negative`,`notice`,`seafoam`,`indigo`,`purple`,`fuchsia`,`magenta`,`yellow`,`gray`,`red`,`orange`,`chartreuse`,`celery`,`green`,`cyan`,`blue`],s=class extends t.n(e.n,{validSizes:[`xs`,`s`,`m`,`l`,`xl`],noDefaultSize:!0}){constructor(...e){super(...e),this._languageScript=new n.n(this),this._variant=`neutral`,this.disabled=!1}static get styles(){return[(0,r.unsafeCSS)(a)]}get variant(){return this._variant}set variant(e){e!==this._variant&&(o.includes(e)?(this._variant=e,this.setAttribute(`variant`,e)):(this._variant=`neutral`,this.setAttribute(`variant`,`neutral`)))}render(){return r.html`
|
|
19
|
+
<span class="dot"></span>
|
|
20
|
+
<span class="label"><slot></slot></span>
|
|
21
|
+
`}updated(e){super.updated(e),e.has(`disabled`)&&(this.disabled?this.setAttribute(`aria-disabled`,`true`):this.removeAttribute(`aria-disabled`))}firstUpdated(e){super.firstUpdated(e),this.hasAttribute(`role`)||this.setAttribute(`role`,`status`),this.hasAttribute(`variant`)||this.setAttribute(`variant`,this.variant)}};e.t([(0,i.property)({reflect:!0})],s.prototype,`variant`,null),e.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),customElements.get(`luzmo-status-light`)||customElements.define(`luzmo-status-light`,s),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/*! * Lucero - The design system for Luzmo.
|
|
2
|
+
*
|
|
3
|
+
* Copyright © 2025 Luzmo
|
|
4
|
+
* All rights reserved.
|
|
5
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
+
*
|
|
10
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
+
* SOFTWARE.
|
|
17
|
+
* */
|
|
18
|
+
import { n as e, t } from "./decorate-CkCg3wfh.js";
|
|
19
|
+
import { n } from "./sized-mixin-DzQTebN-.js";
|
|
20
|
+
import { n as r } from "./language-resolution-BaKYDD1a.js";
|
|
21
|
+
import { html as i, unsafeCSS as a } from "lit";
|
|
22
|
+
import { property as o } from "lit/decorators.js";
|
|
23
|
+
//#region src/components/status-light/status-light.module.scss?inline
|
|
24
|
+
var s = ":host{font-family:var(--luzmo-status-light-font-family,var(--luzmo-font-family));color:var(--highcontrast-status-light-content-color,var(--luzmo-status-light-content-color,var(--status-light-content-color)));min-block-size:var(--luzmo-status-light-height,var(--status-light-height));box-sizing:border-box;vertical-align:bottom;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--luzmo-status-light-gap,var(--status-light-gap));outline:none;display:inline-flex;position:relative}.dot{block-size:var(--luzmo-status-light-dot-size,var(--status-light-dot-size));inline-size:var(--luzmo-status-light-dot-size,var(--status-light-dot-size));background-color:var(--highcontrast-status-light-dot-color,var(--luzmo-status-light-dot-color,var(--status-light-dot-color)));border-radius:50%;flex-shrink:0}.label{box-sizing:border-box;line-height:1;font-weight:var(--luzmo-status-light-font-weight,var(--status-light-font-weight));font-size:var(--luzmo-status-light-font-size,var(--status-light-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}:host([data-luzmo-language-script=Latn]) .label{text-box:trim-both cap alphabetic;margin-block:-.35em;padding-block:.35em}:host([disabled]){opacity:var(--luzmo-status-light-disabled-opacity,.4);pointer-events:none;cursor:default}@media (forced-colors:active){:host{--highcontrast-status-light-content-color:ButtonText;forced-color-adjust:none}.dot{--highcontrast-status-light-dot-color:Highlight}:host([disabled]){--highcontrast-status-light-content-color:GrayText}:host([disabled]) .dot{--highcontrast-status-light-dot-color:GrayText}}:host{--status-light-content-color:var(--luzmo-font-color);--status-light-font-weight:var(--luzmo-font-weight);--status-light-dot-color:var(--luzmo-border-color-full)}:host([size=xs]){--status-light-height:var(--luzmo-component-height-xxs);--status-light-font-size:var(--luzmo-font-size-xs);--status-light-dot-size:6px;--status-light-gap:var(--luzmo-spacing-3)}:host([size=s]){--status-light-height:var(--luzmo-component-height-xs);--status-light-font-size:var(--luzmo-font-size-s);--status-light-dot-size:8px;--status-light-gap:var(--luzmo-spacing-3)}:host{--status-light-height:var(--luzmo-component-height-s);--status-light-font-size:var(--luzmo-font-size);--status-light-dot-size:10px;--status-light-gap:var(--luzmo-spacing-3)}:host([size=l]){--status-light-height:var(--luzmo-component-height);--status-light-font-size:var(--luzmo-font-size);--status-light-dot-size:12px;--status-light-gap:var(--luzmo-spacing-4)}:host([size=xl]){--status-light-height:var(--luzmo-component-height-l);--status-light-font-size:var(--luzmo-font-size-l);--status-light-dot-size:14px;--status-light-gap:var(--luzmo-spacing-4)}:host([variant=neutral]){--status-light-dot-color:var(--luzmo-selected-color-hard)}:host([variant=informative]){--status-light-dot-color:var(--luzmo-informative-color)}:host([variant=positive]){--status-light-dot-color:var(--luzmo-positive-color)}:host([variant=negative]){--status-light-dot-color:var(--luzmo-negative-color)}:host([variant=notice]){--status-light-dot-color:var(--luzmo-notice-color)}:host([variant=seafoam]){--status-light-dot-color:var(--luzmo-seafoam-color)}:host([variant=indigo]){--status-light-dot-color:var(--luzmo-indigo-color)}:host([variant=purple]){--status-light-dot-color:var(--luzmo-purple-color)}:host([variant=fuchsia]){--status-light-dot-color:var(--luzmo-fuchsia-color)}:host([variant=magenta]){--status-light-dot-color:var(--luzmo-magenta-color)}:host([variant=yellow]){--status-light-dot-color:var(--luzmo-yellow-color)}:host([variant=gray]){--status-light-dot-color:var(--luzmo-gray-color)}:host([variant=red]){--status-light-dot-color:var(--luzmo-red-color)}:host([variant=orange]){--status-light-dot-color:var(--luzmo-orange-color)}:host([variant=chartreuse]){--status-light-dot-color:var(--luzmo-chartreuse-color)}:host([variant=celery]){--status-light-dot-color:var(--luzmo-celery-color)}:host([variant=green]){--status-light-dot-color:var(--luzmo-green-color)}:host([variant=cyan]){--status-light-dot-color:var(--luzmo-cyan-color)}:host([variant=blue]){--status-light-dot-color:var(--luzmo-blue-color)}", c = [
|
|
25
|
+
"neutral",
|
|
26
|
+
"informative",
|
|
27
|
+
"positive",
|
|
28
|
+
"negative",
|
|
29
|
+
"notice",
|
|
30
|
+
"seafoam",
|
|
31
|
+
"indigo",
|
|
32
|
+
"purple",
|
|
33
|
+
"fuchsia",
|
|
34
|
+
"magenta",
|
|
35
|
+
"yellow",
|
|
36
|
+
"gray",
|
|
37
|
+
"red",
|
|
38
|
+
"orange",
|
|
39
|
+
"chartreuse",
|
|
40
|
+
"celery",
|
|
41
|
+
"green",
|
|
42
|
+
"cyan",
|
|
43
|
+
"blue"
|
|
44
|
+
], l = class extends n(e, {
|
|
45
|
+
validSizes: [
|
|
46
|
+
"xs",
|
|
47
|
+
"s",
|
|
48
|
+
"m",
|
|
49
|
+
"l",
|
|
50
|
+
"xl"
|
|
51
|
+
],
|
|
52
|
+
noDefaultSize: !0
|
|
53
|
+
}) {
|
|
54
|
+
constructor(...e) {
|
|
55
|
+
super(...e), this._languageScript = new r(this), this._variant = "neutral", this.disabled = !1;
|
|
56
|
+
}
|
|
57
|
+
static get styles() {
|
|
58
|
+
return [a(s)];
|
|
59
|
+
}
|
|
60
|
+
get variant() {
|
|
61
|
+
return this._variant;
|
|
62
|
+
}
|
|
63
|
+
set variant(e) {
|
|
64
|
+
e !== this._variant && (c.includes(e) ? (this._variant = e, this.setAttribute("variant", e)) : (this._variant = "neutral", this.setAttribute("variant", "neutral")));
|
|
65
|
+
}
|
|
66
|
+
render() {
|
|
67
|
+
return i`
|
|
68
|
+
<span class="dot"></span>
|
|
69
|
+
<span class="label"><slot></slot></span>
|
|
70
|
+
`;
|
|
71
|
+
}
|
|
72
|
+
updated(e) {
|
|
73
|
+
super.updated(e), e.has("disabled") && (this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
|
|
74
|
+
}
|
|
75
|
+
firstUpdated(e) {
|
|
76
|
+
super.firstUpdated(e), this.hasAttribute("role") || this.setAttribute("role", "status"), this.hasAttribute("variant") || this.setAttribute("variant", this.variant);
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
//#endregion
|
|
80
|
+
//#region src/components/status-light/index.ts
|
|
81
|
+
t([o({ reflect: !0 })], l.prototype, "variant", null), t([o({
|
|
82
|
+
type: Boolean,
|
|
83
|
+
reflect: !0
|
|
84
|
+
})], l.prototype, "disabled", void 0), customElements.get("luzmo-status-light") || customElements.define("luzmo-status-light", l);
|
|
85
|
+
//#endregion
|
|
86
|
+
export { l as t };
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../tabs-
|
|
18
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../tabs-ZwcVrVub.cjs");exports.LuzmoTab=e.i,exports.LuzmoTabPanel=e.r,exports.LuzmoTabs=e.n,exports.LuzmoTabsOverflow=e.t;
|
package/components/tabs/index.js
CHANGED
|
@@ -21,5 +21,5 @@
|
|
|
21
21
|
e.setAttribute("data-luzmo-vars", ""), e.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: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--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-border-width: 1px;--luzmo-shadow-color-rgb: 0, 0, 0;--luzmo-shadow-opacity: 0.1;--luzmo-shadow-color: rgba( var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity) );--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-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-accent-on-subtle-color: var(--luzmo-primary);--luzmo-primary-rgb: 68, 52, 255;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-secondary: #d000d0;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 208, 0, 208;--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba( var(--luzmo-border-color-rgb), 0.4 );--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-width: thin;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-on-subtle-color: var(--luzmo-negative-color);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-negative-inverse-color: #ffffff;--luzmo-positive-color: rgb(18, 133, 90);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-on-subtle-color: color-mix( in oklch, var(--luzmo-positive-color), var(--luzmo-font-color) 11% );--luzmo-positive-color-rgb: 18, 133, 90;--luzmo-positive-inverse-color: #ffffff;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-neutral-on-subtle-color: var(--luzmo-selected-color-hard);--luzmo-informative-color: #1670dd;--luzmo-informative-color-hover: color-mix(in oklch, var(--luzmo-informative-color), black 8%);--luzmo-informative-color-down: color-mix(in oklch, var(--luzmo-informative-color), black 20%);--luzmo-informative-color-focus: var(--luzmo-informative-color-hover);--luzmo-informative-on-subtle-color: color-mix( in oklch, var(--luzmo-informative-color), var(--luzmo-font-color) 9% );--luzmo-informative-color-rgb: 22, 112, 221;--luzmo-informative-inverse-color: #ffffff;--luzmo-notice-color: rgb(229, 127, 0);--luzmo-notice-color-hover: color-mix(in oklch, var(--luzmo-notice-color), black 8%);--luzmo-notice-color-down: color-mix(in oklch, var(--luzmo-notice-color), black 20%);--luzmo-notice-color-focus: var(--luzmo-notice-color-hover);--luzmo-notice-on-subtle-color: color-mix( in oklch, var(--luzmo-notice-color), var(--luzmo-font-color) 40% );--luzmo-notice-inverse-color: var(--luzmo-selected-color-hard);--luzmo-seafoam-color: rgb(0, 140, 140);--luzmo-indigo-color: rgb(68, 52, 255);--luzmo-purple-color: rgb(112, 48, 210);--luzmo-fuchsia-color: rgb(205, 30, 170);--luzmo-magenta-color: rgb(203, 36, 98);--luzmo-yellow-color: rgb(228, 208, 0);--luzmo-gray-color: rgb(110, 110, 110);--luzmo-red-color: rgb(202, 34, 28);--luzmo-orange-color: rgb(218, 123, 17);--luzmo-chartreuse-color: rgb(85, 135, 0);--luzmo-celery-color: rgb(48, 134, 22);--luzmo-green-color: rgb(18, 133, 90);--luzmo-cyan-color: rgb(0, 134, 180);--luzmo-blue-color: rgb(22, 112, 221);--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: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}html.dark,html.dark-theme,:where(.dark-theme){--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.2);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.35);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-rgb: 255, 255, 255;--luzmo-border-color-full: #4c4c57;--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), white 20%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), white 35%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), white 20%);--luzmo-border-color-disabled: #333;--luzmo-shadow-opacity: 0.35;--luzmo-shadow-color: rgba( var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity) );--luzmo-font-color: #ced4da;--luzmo-font-color-extra-dimmed: #72787f;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), white 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), white 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), white 8%);--luzmo-primary: #7b90ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), white 12%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), white 24%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), white 12%);--luzmo-accent-on-subtle-color: color-mix( in oklch, var(--luzmo-primary), var(--luzmo-font-color) 1% );--luzmo-background-color: #262626;--luzmo-background-color-rgb: 0, 0, 0;--luzmo-background-color-disabled: #939ea8;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 3%), white 14%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 3%), white 25%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 3%), white 14%);--luzmo-background-color-highlight: rgb(72, 72, 72);--luzmo-background-color-highlight-disabled: #313131;--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), white 20%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), white 35%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), white 20%);--luzmo-primary-inverse-color: var(--luzmo-background-color);--luzmo-indicator-color: var(--luzmo-primary);--luzmo-primary-rgb: 94, 113, 208;--luzmo-secondary: #ebff00;--luzmo-secondary-inverse-color: #333;--luzmo-secondary-rgb: 200, 219, 0;--luzmo-negative-color: #f76d74;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), white 12%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), white 24%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), white 12%);--luzmo-negative-on-subtle-color: color-mix( in oklch, var(--luzmo-negative-color), var(--luzmo-font-color) 40% );--luzmo-negative-color-rgb: 247, 109, 116;--luzmo-negative-inverse-color: var(--luzmo-background-color);--luzmo-positive-color: #39a875;--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), white 12%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), white 24%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), white 12%);--luzmo-positive-on-subtle-color: color-mix( in oklch, var(--luzmo-positive-color), var(--luzmo-font-color) 35% );--luzmo-positive-color-rgb: 57, 168, 117;--luzmo-positive-inverse-color: var(--luzmo-background-color);--luzmo-selected-color: #afafaf;--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), white 20%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), white 35%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), white 20%);--luzmo-selected-color-hard: #e9e9e9;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), white 20%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), white 35%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), white 20%);--luzmo-neutral-on-subtle-color: var(--luzmo-selected-color-hard);--luzmo-informative-color: #5c94ff;--luzmo-informative-color-hover: color-mix(in oklch, var(--luzmo-informative-color), white 12%);--luzmo-informative-color-down: color-mix(in oklch, var(--luzmo-informative-color), white 24%);--luzmo-informative-color-focus: var(--luzmo-informative-color-hover);--luzmo-informative-on-subtle-color: color-mix( in oklch, var(--luzmo-informative-color), var(--luzmo-font-color) 36% );--luzmo-informative-color-rgb: 92, 148, 255;--luzmo-informative-inverse-color: var(--luzmo-background-color);--luzmo-notice-color-hover: color-mix(in oklch, var(--luzmo-notice-color), white 12%);--luzmo-notice-color-down: color-mix(in oklch, var(--luzmo-notice-color), white 24%);--luzmo-notice-color-focus: var(--luzmo-notice-color-hover);--luzmo-notice-on-subtle-color: var(--luzmo-notice-color);--luzmo-notice-inverse-color: var(--luzmo-background-color);--luzmo-disabled-color: #75797b}", document.head.appendChild(e);
|
|
22
22
|
}
|
|
23
23
|
})();
|
|
24
|
-
import { i as e, n as t, r as n, t as r } from "../tabs-
|
|
24
|
+
import { i as e, n as t, r as n, t as r } from "../tabs-CjY4eX9W.js";
|
|
25
25
|
export { e as LuzmoTab, n as LuzmoTabPanel, t as LuzmoTabs, r as LuzmoTabsOverflow };
|
|
@@ -23,7 +23,7 @@ import { t as a } from "./roving-tabindex-pomAn3z-.js";
|
|
|
23
23
|
import "./icon-DB1DRieA.js";
|
|
24
24
|
import { t as o } from "./observe-slot-text-Db8Kx3P-.js";
|
|
25
25
|
import { t as s } from "./random-id-CiMDyX7v.js";
|
|
26
|
-
import "./action-button-
|
|
26
|
+
import "./action-button-OB5MM04X.js";
|
|
27
27
|
import { t as c } from "./observe-slot-presence-BKY6n06-.js";
|
|
28
28
|
import { t as l } from "./scaled-indicator-C-TupV4L.js";
|
|
29
29
|
import { html as u, nothing as d, unsafeCSS as f } from "lit";
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./focus-visible-DNHNlrty.cjs"),r=require("./focusable-B6h03pAe.cjs"),i=require("./roving-tabindex-BoPao4td.cjs");require("./icon-CSqR-OOO.cjs");const a=require("./observe-slot-text-CvL-2ey3.cjs"),o=require("./random-id-BcUJAxUZ.cjs");require("./action-button-
|
|
18
|
+
const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./focus-visible-DNHNlrty.cjs"),r=require("./focusable-B6h03pAe.cjs"),i=require("./roving-tabindex-BoPao4td.cjs");require("./icon-CSqR-OOO.cjs");const a=require("./observe-slot-text-CvL-2ey3.cjs"),o=require("./random-id-BcUJAxUZ.cjs");require("./action-button-BKnzGQR6.cjs");const s=require("./observe-slot-presence-CS8pMePk.cjs"),c=require("./scaled-indicator-DLJIztx0.cjs");let l=require("lit"),u=require("lit/decorators.js"),d=require("@luzmo/icons"),f=require("lit/directives/if-defined.js"),p=require("lit/directives/class-map.js"),m=require("lit/decorators/property.js"),h=require("@lit-labs/observers/intersection-controller.js"),g=require("@lit-labs/observers/resize-controller.js");var _=`:host{font-family:var(--luzmo-tab-font-family,var(--luzmo-font-family));box-sizing:border-box;block-size:calc(var(--luzmo-tabs-item-height,var(--tabs-item-height)) - var(--luzmo-tabs-divider-size,var(--tabs-divider-size)));z-index:1;white-space:nowrap;color:var(--highcontrast-tabs-color,var(--luzmo-tabs-color,var(--tabs-color)));transition:color var(--luzmo-tabs-animation-duration,var(--tabs-animation-duration)) ease-out;cursor:pointer;outline:none;-webkit-text-decoration:none;text-decoration:none;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tabs-icon-size,var(--tabs-icon-size));inline-size:var(--luzmo-tabs-icon-size,var(--tabs-icon-size));margin-block-start:var(--luzmo-tabs-top-to-icon,var(--tabs-top-to-icon))}[name=icon]+#item-label{margin-inline-start:var(--luzmo-tabs-icon-to-text,var(--tabs-icon-to-text))}:host:before{content:"";box-sizing:border-box;block-size:calc(100% - var(--luzmo-tabs-top-to-text,var(--tabs-top-to-text)));inline-size:calc(100% + var(--luzmo-tabs-focus-indicator-gap,var(--tabs-focus-indicator-gap)) * 2);border-radius:var(--luzmo-tabs-focus-indicator-border-radius,var(--tabs-focus-indicator-border-radius));pointer-events:none;position:absolute;inset-block-start:calc(var(--luzmo-tabs-top-to-text,var(--tabs-top-to-text)) / 2);inset-inline-start:calc(var(--luzmo-tabs-focus-indicator-gap,var(--tabs-focus-indicator-gap)) * -1);inset-inline-end:calc(var(--luzmo-tabs-focus-indicator-gap,var(--tabs-focus-indicator-gap)) * -1);border:var(--luzmo-tabs-focus-indicator-width,var(--tabs-focus-indicator-width)) solid transparent!important}@media (hover:hover){:host(:hover){color:var(--highcontrast-tabs-color-hover,var(--luzmo-tabs-color-hover,var(--tabs-color-hover)))}}:host([selected]){color:var(--highcontrast-tabs-color-selected,var(--luzmo-tabs-color-selected,var(--tabs-color-selected)))}:host([disabled]){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--luzmo-tabs-color-disabled,var(--tabs-color-disabled)))}:host([disabled]) #item-label{cursor:default}:host(:focus-visible){color:var(--highcontrast-tabs-color-key-focus,var(--luzmo-tabs-color-key-focus,var(--tabs-color-key-focus)))}:host(:focus-visible):before{border-color:var(--highcontrast-tabs-focus-indicator-color,var(--luzmo-tabs-focus-indicator-color,var(--tabs-focus-indicator-color)))!important}#item-label{cursor:pointer;vertical-align:top;font-family:var(--luzmo-tabs-font-family,var(--tabs-font-family));font-style:var(--luzmo-tabs-font-style,var(--tabs-font-style));font-size:var(--luzmo-tabs-font-size,var(--tabs-font-size));font-weight:var(--luzmo-tabs-font-weight,var(--tabs-font-weight));line-height:var(--luzmo-tabs-line-height,var(--tabs-line-height));margin-block-start:var(--luzmo-tabs-top-to-text,var(--tabs-top-to-text));margin-block-end:var(--luzmo-tabs-bottom-to-text,var(--tabs-bottom-to-text));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}:host{scroll-margin-inline:var(--luzmo-tabs-item-horizontal-spacing,var(--tabs-item-horizontal-spacing))}:host([disabled]){pointer-events:none}#item-label[hidden]{display:none}@media (forced-colors:active){:host:before{background-color:buttonface}:host ::slotted([slot=icon]){z-index:1;color:inherit;position:relative}#item-label{z-index:1;position:relative}:host([selected]),:host([selected]) ::slotted([slot=icon]),:host([selected]) #item-label{color:highlighttext}}:host([vertical]){flex-direction:column;justify-content:center;align-items:center;height:auto;display:flex}:host([dir][vertical]) slot[name=icon]+#item-label{margin-inline-start:0;margin-block:calc(var(--luzmo-tabs-top-to-text,var(--tabs-top-to-text)) / 2) calc(var(--luzmo-tabs-bottom-to-text,var(--tabs-bottom-to-text)) / 2)}:host([vertical]) ::slotted([slot=icon]){margin-block-start:calc(var(--luzmo-tabs-top-to-icon,var(--tabs-top-to-icon)) / 2)}`,v=class extends n.t(a.t(s.t(e.n,`[slot="icon"]`),``)){constructor(...e){super(...e),this.disabled=!1,this.label=``,this.selected=!1,this.vertical=!1,this.value=``}static get styles(){return[(0,l.unsafeCSS)(_)]}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return!!this.label||this.slotHasContent}render(){return l.html`
|
|
19
19
|
${this.hasIcon?l.html` <slot name="icon"></slot> `:l.nothing}
|
|
20
20
|
<label id="item-label" ?hidden=${!this.hasLabel}>
|
|
21
21
|
<slot>${this.label}</slot>
|