@luzmo/analytics-components-kit 1.0.1-alpha.26 → 1.0.1-alpha.28
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/components/{async-directive-DWRUSKKF-CmOVMf6V.js → async-directive-DWRUSKKF-CPf9l5wJ.js} +1 -1
- package/components/{async-directive-DWRUSKKF-D4itZyzc.cjs → async-directive-DWRUSKKF-DWUZeMaj.cjs} +1 -1
- package/components/base-D76d76ww-C6YO3slp.cjs +94 -0
- package/components/base-D76d76ww-M5t7LVBG.js +758 -0
- package/components/{button-base-B7v4eeRh-D3-GH03o.js → button-base-DSHx7XO8-B_LbLx9g.js} +33 -32
- package/components/{button-base-B7v4eeRh-BKKUK3x0.cjs → button-base-DSHx7XO8-ChNRhetl.cjs} +4 -4
- package/components/{checkbox-mixin-BFGTmw17-C34LMsgu.js → checkbox-mixin-BFGTmw17-C1tjSMaa.js} +2 -2
- package/components/{checkbox-mixin-BFGTmw17-CCjGd0nS.cjs → checkbox-mixin-BFGTmw17-DF2p-vSz.cjs} +4 -4
- package/components/{directive-helpers-nlQRAaQt-3kEWF2GV.cjs → directive-helpers-nlQRAaQt-DTZp2cFt.cjs} +4 -4
- package/components/{directive-helpers-nlQRAaQt-I6T4KZKW.js → directive-helpers-nlQRAaQt-DgSC1Yr2.js} +1 -1
- package/components/display-settings/display-settings.d.ts +3 -3
- package/components/display-settings/index.cjs +1 -1
- package/components/display-settings/index.js +19 -19
- package/components/display-settings-binning/display-settings-binning.d.ts +3 -3
- package/components/display-settings-binning/index.cjs +2 -2
- package/components/display-settings-binning/index.js +20 -20
- package/components/display-settings-datetime/display-settings-datetime.d.ts +3 -3
- package/components/display-settings-datetime/index.cjs +2 -2
- package/components/display-settings-datetime/index.js +22 -22
- package/components/display-settings-grand-totals/display-settings-grand-totals.d.ts +3 -3
- package/components/display-settings-grand-totals/index.cjs +2 -2
- package/components/display-settings-grand-totals/index.js +19 -19
- package/components/display-settings-numeric/display-settings-numeric.d.ts +3 -3
- package/components/display-settings-numeric/index.cjs +4 -4
- package/components/display-settings-numeric/index.js +23 -23
- package/components/display-settings-period-over-period/display-settings-period-over-period.d.ts +3 -3
- package/components/display-settings-period-over-period/index.cjs +15 -15
- package/components/display-settings-period-over-period/index.js +45 -44
- package/components/draggable-data-item/draggable-data-item.d.ts +3 -3
- package/components/draggable-data-item/index.cjs +4 -4
- package/components/draggable-data-item/index.js +6 -6
- package/components/draggable-data-item-level/draggable-data-item-level.d.ts +3 -3
- package/components/draggable-data-item-level/index.cjs +4 -4
- package/components/draggable-data-item-level/index.js +15 -15
- package/components/droppable-slot/droppable-slot.d.ts +5 -5
- package/components/droppable-slot/index.cjs +2 -2
- package/components/droppable-slot/index.js +14 -14
- package/components/edit-item/edit-item.d.ts +3 -1
- package/components/edit-item/index.cjs +17 -16
- package/components/edit-item/index.js +50 -35
- package/components/edit-option/edit-option.d.ts +1 -1
- package/components/edit-option/helpers/control-markup.d.ts +1 -1
- package/components/edit-option/index.cjs +1 -1
- package/components/edit-option/index.js +1 -1
- package/components/edit-option-action-button-group/index.cjs +2 -2
- package/components/edit-option-action-button-group/index.js +6 -6
- package/components/edit-option-base/edit-option-base.d.ts +3 -3
- package/components/{edit-option-base-qePiIQWd.js → edit-option-base-C0zI8SOd.js} +4 -4
- package/components/edit-option-base-D8vs3Bty.cjs +53 -0
- package/components/edit-option-color-picker/index.cjs +24 -24
- package/components/edit-option-color-picker/index.js +42 -41
- package/components/edit-option-multi-language-field/index.cjs +1 -1
- package/components/edit-option-multi-language-field/index.js +3 -3
- package/components/edit-option-number-field/index.cjs +2 -2
- package/components/edit-option-number-field/index.js +3 -3
- package/components/edit-option-picker/index.cjs +2 -2
- package/components/edit-option-picker/index.js +4 -4
- package/components/edit-option-position-picker/index.cjs +2 -2
- package/components/edit-option-position-picker/index.js +3 -3
- package/components/edit-option-positions-number-field/index.cjs +1 -1
- package/components/edit-option-positions-number-field/index.js +5 -5
- package/components/edit-option-radio-button-group/index.cjs +4 -4
- package/components/edit-option-radio-button-group/index.js +4 -4
- package/components/edit-option-slider/index.cjs +3 -3
- package/components/edit-option-slider/index.js +8 -8
- package/components/edit-option-switch/index.cjs +5 -5
- package/components/edit-option-switch/index.js +11 -10
- package/components/edit-option-text-field/index.cjs +2 -2
- package/components/edit-option-text-field/index.js +3 -3
- package/components/focusable-Cu_m_GTh.cjs +42 -0
- package/components/focusable-Dw_pMNQL.js +852 -0
- package/components/focusable-cj2QhwDT-CvevSkDr.cjs +52 -0
- package/components/focusable-cj2QhwDT-DlzfnLn9.js +242 -0
- package/components/{if-defined-BSAr_4u4-4Ys8VE7T.js → if-defined-BSAr_4u4-BCnSpSsA.js} +14 -15
- package/components/{if-defined-BSAr_4u4-gECNwmTC.cjs → if-defined-BSAr_4u4-CIqREoag.cjs} +3 -3
- package/components/{if-defined-8BOch-oC.cjs → if-defined-CF8baNdl.cjs} +2 -2
- package/components/{if-defined-Bv6MRdSW.js → if-defined-DbhS35z5.js} +1 -1
- package/components/{index-Bt5nP_6w.cjs → index-9hGc0AF6.cjs} +6 -6
- package/components/{index-Bee1uunR.js → index-B2LO8M42.js} +11 -12
- package/components/{index-w3j1USKK.cjs → index-B3417kqb.cjs} +2 -2
- package/components/{index-DUO13KGl.cjs → index-BIauj-BP.cjs} +3 -3
- package/components/{index-i8GaIN7i.cjs → index-BIcAxPGg.cjs} +4 -4
- package/components/{index-Dc9c_dq-.cjs → index-BLyfPWMW.cjs} +2 -2
- package/components/index-BW6jffrL.cjs +117 -0
- package/components/{index-CXIT0cYY.js → index-BjdUsH9B.js} +11 -12
- package/components/{index-BYfDERr7.js → index-BnVt-dJY.js} +11 -12
- package/components/index-Bp6XY9q2.cjs +42 -0
- package/components/{index-CdCtJpK9.js → index-C8yP7YJD.js} +8 -9
- package/components/index-CAwT4m7K.cjs +127 -0
- package/components/{index-CfEn3fIT.js → index-CBNsaHFy.js} +7 -8
- package/components/{index-DEVOZNSc.cjs → index-CC53jnJB.cjs} +2 -2
- package/components/{index-CdUTqQ3L.cjs → index-CZUy8SUo.cjs} +4 -4
- package/components/{index-86cIx1Ql.cjs → index-Cl7wWlXl.cjs} +2 -2
- package/components/{index-ByjLd3bT.cjs → index-Cz9Cvq1K.cjs} +6 -6
- package/components/{index-B3ve6cAj.js → index-D8GVYuJ-.js} +142 -109
- package/components/{index-BH9W0QLt-DBxyzKWK.js → index-DQCvi59x.js} +92 -59
- package/components/index-DelXrrBi.js +779 -0
- package/components/{index-BUSWsm5N.js → index-Dku2WLRc.js} +7 -8
- package/components/{index-aYcu00GB.js → index-Du8Q4hhF.js} +2 -2
- package/components/{index-Dn7LyFPv.js → index-Dwp251OJ.js} +3 -3
- package/components/{index-BVX_ozT9.js → index-KY89MPqI.js} +5 -6
- package/components/{index-BJVxTeoi.cjs → index-b9OSfNB6.cjs} +7 -7
- package/components/{index-ymMEPngt.js → index-fheP_kQJ.js} +23 -23
- package/components/{index-DVAsMiOm.js → index-fzqLW5XZ.js} +7 -8
- package/components/index-hogChFy0.cjs +195 -0
- package/components/index-mB-t2zP2.cjs +217 -0
- package/components/{index-C8IL2IZ6.js → index-zFIy9Mwl.js} +14 -15
- package/components/index.cjs +1 -1
- package/components/index.js +457 -54
- package/components/{luzmo-icons-BE2T8vWu.js → luzmo-icons-CmY3chvZ.js} +16 -16
- package/components/luzmo-icons-lvebt6bp.cjs +31 -0
- package/components/{observe-slot-text-ggb4kKgY-DBVrKDBD.cjs → observe-slot-text-ggb4kKgY-5zLP4Vgh.cjs} +2 -2
- package/components/{observe-slot-text-ggb4kKgY-o5QFWUeA.js → observe-slot-text-ggb4kKgY-tm0SQCaj.js} +3 -3
- package/components/{popover-Bx4ZDHk4-BuzeOeNe.cjs → popover-Bx4ZDHk4-Cw2DKR2x.cjs} +2 -2
- package/components/{popover-Bx4ZDHk4-jZJ0Cd59.js → popover-Bx4ZDHk4-HbUSJ86p.js} +6 -7
- package/components/{query-assigned-nodes-C76XVPWY-DPC6kOmH.js → query-assigned-nodes-C76XVPWY-DON51dMU.js} +1 -1
- package/components/{query-assigned-nodes-C76XVPWY-BcyGjObB.cjs → query-assigned-nodes-C76XVPWY-DzOeAzcN.cjs} +1 -1
- package/components/sized-mixin-Cqlxwicw.cjs +20 -0
- package/components/sized-mixin-DMuOVsw0.js +65 -0
- package/components/slot-menu/index.cjs +1 -1
- package/components/slot-menu/index.js +27 -27
- package/components/slot-menu/slot-menu.d.ts +3 -3
- package/components/slot-menu-list/index.cjs +2 -2
- package/components/slot-menu-list/index.js +14 -14
- package/components/slot-menu-list/slot-menu-list.d.ts +3 -3
- package/components/{state-BFA93Sye.cjs → state-QgHgNZLe.cjs} +2 -2
- package/components/{state-Joaryhrg.js → state-e2n-fyrr.js} +1 -1
- package/components/streaming-listener-CCalHg57-2AtO4Ho2.cjs +52 -0
- package/components/{language-resolution-8yZa5r_P-Bn0bYosv.js → streaming-listener-CCalHg57-CQgWstyf.js} +59 -59
- package/components/{task-B8yMzxui.cjs → task-fQFUVV8e.cjs} +2 -2
- package/components/{task-Cr9aRIbV.js → task-gE27tBDv.js} +1 -1
- package/components/text-field-BTnBJoP9-BuahhcXU.js +430 -0
- package/components/text-field-BTnBJoP9-CDMhK3d1.cjs +147 -0
- package/components/utils.cjs +1 -1
- package/components/utils.js +472 -54
- package/custom-elements.json +56 -292
- package/index.d.ts +1 -0
- package/item-definitions/marker-map/marker-map-options.config.d.ts +1 -1
- package/package.json +2 -2
- package/utils/base/base.d.ts +16 -0
- package/utils/base/focus-visible.d.ts +29 -0
- package/utils/base/focusable.d.ts +58 -0
- package/utils/base/index.d.ts +4 -0
- package/utils/base/sized-mixin.d.ts +17 -0
- package/utils/index.d.ts +1 -0
- package/utils/themes/index.d.ts +507 -0
- package/components/base-D76d76ww-BiajPmzU.cjs +0 -40
- package/components/base-D76d76ww-gf0ESLsU.js +0 -45
- package/components/edit-option-base-Boz7TNRZ.cjs +0 -53
- package/components/index-BH9W0QLt-Cy2sUVJ_.cjs +0 -95
- package/components/index-D5LI0odG.js +0 -44
- package/components/index-DM_2d78G.js +0 -744
- package/components/index-DrLPC6eG.cjs +0 -185
- package/components/index-eEpFkbP8.cjs +0 -195
- package/components/index-h9T5DPIm.cjs +0 -36
- package/components/index-iYpAy-Kg.cjs +0 -95
- package/components/index-zuArOtOt.cjs +0 -42
- package/components/language-resolution-8yZa5r_P-FqQChUDW.cjs +0 -52
- package/components/luzmo-icons-XsFsTAl3.cjs +0 -31
- package/components/property-0L4eB11h.cjs +0 -112
- package/components/property-B2F7x7Cz.js +0 -1481
- package/components/sized-mixin-BxMraZLS-B_y0PzR3.js +0 -82
- package/components/sized-mixin-BxMraZLS-DEFWqo8f.cjs +0 -36
- package/components/text-field-CvKSS59x-Dn0_1HO7.js +0 -412
- package/components/text-field-CvKSS59x-E9LQElL4.cjs +0 -131
@@ -17,10 +17,9 @@
|
|
17
17
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
18
18
|
* SOFTWARE.
|
19
19
|
* */
|
20
|
-
import {
|
21
|
-
import { d as
|
22
|
-
import { d as
|
23
|
-
import { m as x } from "./sized-mixin-BxMraZLS-B_y0PzR3.js";
|
20
|
+
import { m as u, k as c, h as f, d as g, H as s, R as d } from "./base-D76d76ww-M5t7LVBG.js";
|
21
|
+
import { d as z } from "./if-defined-BSAr_4u4-BCnSpSsA.js";
|
22
|
+
import { d as b, u as h, c as p, n as v, h as x } from "./element-resolution-FCUT-wql--7ctE626.js";
|
24
23
|
/*! * Lucero - The design system for Luzmo.
|
25
24
|
*
|
26
25
|
* Copyright © 2025 Luzmo
|
@@ -47,14 +46,14 @@ var k = Object.defineProperty, n = (t, l, o, i) => {
|
|
47
46
|
const w = () => s`
|
48
47
|
<div class="icon-container required-icon">*</div>
|
49
48
|
`;
|
50
|
-
class r extends
|
49
|
+
class r extends u(c, {
|
51
50
|
noDefaultSize: !0
|
52
51
|
}) {
|
53
52
|
constructor() {
|
54
|
-
super(...arguments), this.disabled = !1, this.id = "", this.for = "", this.required = !1, this.resolvedElement = new
|
53
|
+
super(...arguments), this.disabled = !1, this.id = "", this.for = "", this.required = !1, this.resolvedElement = new b(this);
|
55
54
|
}
|
56
55
|
static get styles() {
|
57
|
-
return [
|
56
|
+
return [f(y)];
|
58
57
|
}
|
59
58
|
handleClick(l) {
|
60
59
|
if (!this.target || this.disabled || l.defaultPrevented)
|
@@ -66,7 +65,7 @@ class r extends x(u, {
|
|
66
65
|
applyTargetLabel(l) {
|
67
66
|
if (this.target = l || this.target, this.target) {
|
68
67
|
const o = this.target.applyFocusElementLabel, i = this.target.focusElement || this.target, e = i.getRootNode();
|
69
|
-
o !== void 0 ? o(this.labelText, this) : e === this.getRootNode() ? (l ?
|
68
|
+
o !== void 0 ? o(this.labelText, this) : e === this.getRootNode() ? (l ? h : p)(i, "aria-labelledby", [this.id]) : l ? i.setAttribute("aria-label", this.labelText) : i.removeAttribute("aria-label");
|
70
69
|
}
|
71
70
|
}
|
72
71
|
async manageTarget() {
|
@@ -89,7 +88,7 @@ class r extends x(u, {
|
|
89
88
|
return s`
|
90
89
|
<label>
|
91
90
|
<slot></slot>
|
92
|
-
${this.required ? s` ${w()} ` :
|
91
|
+
${this.required ? s` ${w()} ` : g}
|
93
92
|
</label>
|
94
93
|
`;
|
95
94
|
}
|
@@ -97,7 +96,7 @@ class r extends x(u, {
|
|
97
96
|
super.firstUpdated(l), this.addEventListener("click", this.handleClick);
|
98
97
|
}
|
99
98
|
willUpdate(l) {
|
100
|
-
this.hasAttribute("id") || this.setAttribute("id", `${this.tagName.toLowerCase()}-${
|
99
|
+
this.hasAttribute("id") || this.setAttribute("id", `${this.tagName.toLowerCase()}-${v()}`), l.has("for") && (this.resolvedElement.selector = this.for ? `#${this.for}` : ""), (l.has("id") || l.has(x)) && this.manageTarget();
|
101
100
|
}
|
102
101
|
}
|
103
102
|
n([
|
@@ -113,7 +112,7 @@ n([
|
|
113
112
|
d({ type: Boolean, reflect: !0 })
|
114
113
|
], r.prototype, "required");
|
115
114
|
n([
|
116
|
-
|
115
|
+
z("slot")
|
117
116
|
], r.prototype, "slotEl");
|
118
117
|
n([
|
119
118
|
d({ type: String, reflect: !0, attribute: "side-aligned" })
|
@@ -138,7 +137,7 @@ n([
|
|
138
137
|
const E = () => {
|
139
138
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
140
139
|
const t = document.createElement("style");
|
141
|
-
t.setAttribute("data-luzmo-vars", ""), t.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-color
|
140
|
+
t.setAttribute("data-luzmo-vars", ""), t.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(t);
|
142
141
|
}
|
143
142
|
};
|
144
143
|
E();
|
@@ -0,0 +1,42 @@
|
|
1
|
+
/*! * A kit of modern Luzmo Web Components for analytics in your web application.
|
2
|
+
*
|
3
|
+
* Copyright © 2025 Luzmo
|
4
|
+
* All rights reserved.
|
5
|
+
* Luzmo web components (“Luzmo Web Components”)
|
6
|
+
* must be used according to the Luzmo Terms of Service.
|
7
|
+
* This license allows users with a current active Luzmo account
|
8
|
+
* to use the Luzmo Web Components. This license terminates
|
9
|
+
* automatically if a user no longer has an active Luzmo account.
|
10
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
11
|
+
*
|
12
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
13
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
14
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
15
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
16
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
17
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
18
|
+
* SOFTWARE.
|
19
|
+
* */
|
20
|
+
"use strict";const d=require("./luzmo-icons-lvebt6bp.cjs"),n=require("./base-D76d76ww-C6YO3slp.cjs"),s=require("./button-base-DSHx7XO8-ChNRhetl.cjs");/*! * Lucero - The design system for Luzmo.
|
21
|
+
*
|
22
|
+
* Copyright © 2025 Luzmo
|
23
|
+
* All rights reserved.
|
24
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
25
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
26
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
27
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
28
|
+
*
|
29
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
30
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
31
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
32
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
33
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
34
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
35
|
+
* SOFTWARE.
|
36
|
+
* */const g=()=>{if(typeof document<"u"&&!document.querySelector("style[data-luzmo-vars]")){const c=document.createElement("style");c.setAttribute("data-luzmo-vars",""),c.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(c)}};g();const h=':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family, var(--luzmo-sans-font-family-stack, var(--luzmo-font-family)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, var(--luzmo-line-height-100, var(--line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out;border-style:solid;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible}:host(:focus){outline:none}:host([disabled]){cursor:default}::slotted([slot=icon]){max-block-size:100%;flex-shrink:0}#label{text-align:center;place-self:center}#label:empty{display:none}@media (forced-colors: active){:host{--highcontrast-action-button-focus-indicator-color: ButtonText}:host:after{forced-color-adjust:none}:host([selected]){--highcontrast-action-button-background-color-default: Highlight;--highcontrast-action-button-background-color-hover: Highlight;--highcontrast-action-button-background-color-focus: Highlight;--highcontrast-action-button-background-color-down: Highlight;--highcontrast-action-button-background-color-disabled: ButtonFace;--highcontrast-action-button-border-color-default: HighlightText;--highcontrast-action-button-border-color-hover: HighlightText;--highcontrast-action-button-border-color-focus: HighlightText;--highcontrast-action-button-border-color-down: HighlightText;--highcontrast-action-button-border-color-disabled: GrayText;--highcontrast-action-button-content-color-default: HighlightText;--highcontrast-action-button-content-color-hover: HighlightText;--highcontrast-action-button-content-color-focus: HighlightText;--highcontrast-action-button-content-color-down: HighlightText;--highcontrast-action-button-content-color-disabled: GrayText}:host([selected]) .hold-affordance,:host([selected]) ::slotted([slot=icon]),:host([selected]) #label{forced-color-adjust:none}}:host{--action-button-focus-indicator-border-radius: calc( var(--action-button-border-radius) + var(--action-button-focus-indicator-gap) );--action-button-edge-to-visual: calc( var(--action-button-edge-to-visual-size) - var(--action-button-border-width) );--action-button-edge-to-text: calc( var(--action-button-edge-to-text-size) - var(--action-button-border-width) );--action-button-edge-to-visual-only: calc( var(--action-button-edge-to-visual-only-size) - var( --action-button-border-width ) );min-inline-size:var(--luzmo-action-button-min-width, var(--action-button-min-width));block-size:var(--luzmo-action-button-height, var(--action-button-height));border-radius:var(--luzmo-action-button-border-radius, var(--action-button-border-radius));border-width:var(--luzmo-action-button-border-width, var(--action-button-border-width));gap:calc(var(--luzmo-action-button-text-to-visual, var(--action-button-text-to-visual)) + var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)) - var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)));padding-inline:var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text));background-color:var(--highcontrast-action-button-background-color-default, var(--luzmo-action-button-background-color-default, var(--action-button-background-color-default)));border-color:var(--highcontrast-action-button-border-color-default, var(--luzmo-action-button-border-color-default, var(--action-button-border-color-default)));color:var(--highcontrast-action-button-content-color-default, var(--luzmo-action-button-content-color-default, var(--action-button-content-color-default)));position:relative}:host:dir(rtl),:host([dir=rtl]){--logical-rotation: matrix(-1, 0, 0, 1, 0, 0)}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-action-button-background-color-hover, var(--luzmo-action-button-background-color-hover, var(--action-button-background-color-hover)));border-color:var(--highcontrast-action-button-border-color-hover, var(--luzmo-action-button-border-color-hover, var(--action-button-border-color-hover)));color:var(--highcontrast-action-button-content-color-hover, var(--luzmo-action-button-content-color-hover, var(--action-button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-action-button-background-color-focus, var(--luzmo-action-button-background-color-focus, var(--action-button-background-color-focus)));border-color:var(--highcontrast-action-button-border-color-focus, var(--luzmo-action-button-border-color-focus, var(--action-button-border-color-focus)));color:var(--highcontrast-action-button-content-color-focus, var(--luzmo-action-button-content-color-focus, var(--action-button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-action-button-background-color-down, var(--luzmo-action-button-background-color-down, var(--action-button-background-color-down)));border-color:var(--highcontrast-action-button-border-color-down, var(--luzmo-action-button-border-color-down, var(--action-button-border-color-down)));color:var(--highcontrast-action-button-content-color-down, var(--luzmo-action-button-content-color-down, var(--action-button-content-color-down)))}:host([disabled]){background-color:var(--highcontrast-action-button-background-color-disabled, var(--luzmo-action-button-background-color-disabled, var(--action-button-background-color-disabled)));border-color:var(--highcontrast-action-button-border-color-disabled, var(--luzmo-action-button-border-color-disabled, var(--action-button-border-color-disabled)));color:var(--highcontrast-action-button-content-color-disabled, var(--luzmo-action-button-content-color-disabled, var(--action-button-content-color-disabled)))}:host([selected]){--luzmo-action-button-background-color-default: var( --luzmo-action-button-background-color-default-selected );--luzmo-action-button-background-color-hover: var( --luzmo-action-button-background-color-hover-selected );--luzmo-action-button-background-color-down: var( --luzmo-action-button-background-color-down-selected );--luzmo-action-button-background-color-focus: var( --luzmo-action-button-background-color-focus-selected );--luzmo-action-button-content-color-default: var( --luzmo-action-button-content-color-default-selected );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-content-color-hover-selected );--luzmo-action-button-content-color-down: var( --luzmo-action-button-content-color-down-selected );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-content-color-focus-selected )}:host([selected][emphasized]){--luzmo-action-button-background-color-default: var( --luzmo-action-button-background-color-default-selected-emphasized );--luzmo-action-button-background-color-hover: var( --luzmo-action-button-background-color-hover-selected-emphasized );--luzmo-action-button-background-color-down: var( --luzmo-action-button-background-color-down-selected-emphasized );--luzmo-action-button-background-color-focus: var( --luzmo-action-button-background-color-focus-selected-emphasized );--luzmo-action-button-content-color-default: var( --luzmo-action-button-content-color-default-selected-emphasized );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-content-color-hover-selected-emphasized );--luzmo-action-button-content-color-down: var( --luzmo-action-button-content-color-down-selected-emphasized );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-content-color-focus-selected-emphasized )}:host([selected][static-color=black]),:host([selected][static-color=white]){--luzmo-action-button-content-color-default: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-down: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-static-content-color )}::slotted([slot=icon]){inline-size:var(--luzmo-action-button-icon-size, var(--action-button-icon-size));color:inherit;margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}.hold-affordance+::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}.hold-affordance+[icon-only]::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));text-align:center}#label{pointer-events:none;font-size:var(--luzmo-action-button-font-size, var(--action-button-font-size));white-space:nowrap;color:inherit;color:var(--luzmo-action-button-label-color, inherit);text-overflow:ellipsis;overflow:hidden}.hold-affordance{color:inherit;transform:var(--logical-rotation);position:absolute;font-size:var(--action-button-corner-triangle-size);inset-block-end:calc(var(--luzmo-action-button-edge-to-hold-icon, var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width, var(--action-button-border-width)));inset-inline-end:calc(var(--luzmo-action-button-edge-to-hold-icon, var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width, var(--action-button-border-width)))}:host{transition:border-color var(--luzmo-action-button-animation-duration, var(--action-button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-action-button-focus-indicator-gap, var(--action-button-focus-indicator-gap)) + var(--luzmo-action-button-border-width, var(--action-button-border-width))) * -1);border-radius:var(--luzmo-action-button-focus-indicator-border-radius, var(--action-button-focus-indicator-border-radius));transition:box-shadow var(--luzmo-action-button-animation-duration, var(--action-button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-action-button-focus-indicator-thickness, var(--action-button-focus-indicator-thickness)) var(--highcontrast-action-button-focus-indicator-color, var(--luzmo-action-button-focus-indicator-color, var(--action-button-focus-indicator-color)))}:host{--action-button-animation-duration: var(--luzmo-animation-duration);--action-button-border-radius: var(--luzmo-border-radius);--action-button-border-width: var(--luzmo-border-width);--action-button-content-color-default: var(--luzmo-font-color);--action-button-content-color-hover: var(--luzmo-font-color-hover);--action-button-content-color-down: var(--luzmo-font-color-down);--action-button-content-color-focus: var(--luzmo-font-color-focus);--action-button-focus-indicator-gap: var(--luzmo-indicator-gap);--action-button-focus-indicator-thickness: var(--luzmo-indicator-width);--action-button-focus-indicator-color: var(--luzmo-indicator-color);--action-button-background-color-default: var(--luzmo-background-color);--action-button-background-color-hover: var(--luzmo-background-color-hover);--action-button-background-color-down: var(--luzmo-background-color-down);--action-button-background-color-focus: var(--luzmo-background-color-focus);--action-button-border-color-default: var(--luzmo-border-color);--action-button-border-color-hover: var(--luzmo-border-color-hover);--action-button-border-color-down: var(--luzmo-border-color-down);--action-button-border-color-focus: var(--luzmo-border-color-focus);--action-button-background-color-disabled: var(--luzmo-background-color);--action-button-border-color-disabled: var(--luzmo-border-color-disabled);--action-button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--action-button-background-color-default: transparent;--action-button-background-color-hover: var(--luzmo-background-color-hover);--action-button-background-color-down: var(--luzmo-background-color-down);--action-button-background-color-focus: var(--luzmo-background-color-focus);--action-button-background-color-disabled: transparent;--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent}:host([selected]){--action-button-background-color-default: var(--luzmo-font-color);--action-button-background-color-hover: var(--luzmo-font-color-hover);--action-button-background-color-down: var(--luzmo-font-color-down);--action-button-background-color-focus: var(--luzmo-font-color-focus);--action-button-content-color-default: var(--luzmo-background-color);--action-button-content-color-hover: var(--luzmo-background-color);--action-button-content-color-down: var(--luzmo-background-color);--action-button-content-color-focus: var(--luzmo-background-color);--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent;--action-button-background-color-disabled: var( --luzmo-background-color-disabled )}:host([selected][emphasized]){--action-button-background-color-default: var(--luzmo-primary);--action-button-background-color-hover: var(--luzmo-primary-hover);--action-button-background-color-down: var(--luzmo-primary-down);--action-button-background-color-focus: var(--luzmo-primary-focus);--action-button-content-color-default: var(--luzmo-primary-inverse-color);--action-button-content-color-hover: var(--luzmo-primary-inverse-color);--action-button-content-color-down: var(--luzmo-primary-inverse-color);--action-button-content-color-focus: var(--luzmo-primary-inverse-color)}:host([static-color=black][quiet]),:host([static-color=white][quiet]){--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent}:host([static-color=black]){--action-button-background-color-default: transparent;--action-button-background-color-hover: rgba(0, 0, 0, .25);--action-button-background-color-down: rgba(0, 0, 0, .4);--action-button-background-color-focus: rgba(0, 0, 0, .25);--action-button-background-color-disabled: transparent;--action-button-border-color-default: rgba(0, 0, 0, .4);--action-button-border-color-hover: rgba(0, 0, 0, .55);--action-button-border-color-down: rgba(0, 0, 0, .7);--action-button-border-color-focus: rgba(0, 0, 0, .25);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(0, 0, 0);--action-button-content-color-hover: rgb(0, 0, 0);--action-button-content-color-down: rgb(0, 0, 0);--action-button-content-color-focus: rgb(0, 0, 0);--action-button-content-color-disabled: rgba(0, 0, 0, .55);--action-button-focus-indicator-color: rgb(0, 0, 0)}:host([static-color=black][selected]){--action-button-background-color-default: rgba(0, 0, 0, .9);--action-button-background-color-hover: rgb(0, 0, 0);--action-button-background-color-down: rgb(0, 0, 0);--action-button-background-color-focus: rgb(0, 0, 0);--action-button-background-color-disabled: rgba(0, 0, 0, .1);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255)}:host([static-color=black][selected][emphasized]){--action-button-background-color-default: rgba(0, 0, 0, .9);--action-button-background-color-hover: rgb(0, 0, 0);--action-button-background-color-down: rgb(0, 0, 0);--action-button-background-color-focus: rgb(0, 0, 0);--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255)}:host([static-color=white]){--action-button-background-color-default: transparent;--action-button-background-color-hover: rgba(255, 255, 255, .25);--action-button-background-color-down: rgba(255, 255, 255, .4);--action-button-background-color-focus: rgba(255, 255, 255, .25);--action-button-background-color-disabled: transparent;--action-button-border-color-default: rgba(255, 255, 255, .4);--action-button-border-color-hover: rgba(255, 255, 255, .55);--action-button-border-color-down: rgba(255, 255, 255, .7);--action-button-border-color-focus: rgba(255, 255, 255, .55);--action-button-border-color-disabled: rgba(255, 255, 255, .25);--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255);--action-button-content-color-disabled: rgba(255, 255, 255, .55);--action-button-focus-indicator-color: rgb(255, 255, 255)}:host([static-color=white][selected]){--action-button-background-color-default: rgba(255, 255, 255, .9);--action-button-background-color-hover: rgb(255, 255, 255);--action-button-background-color-down: rgb(255, 255, 255);--action-button-background-color-focus: rgb(255, 255, 255);--action-button-background-color-disabled: rgba(255, 255, 255, .1);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(0, 0, 0);--action-button-content-color-hover: rgb(0, 0, 0);--action-button-content-color-down: rgb(0, 0, 0);--action-button-content-color-focus: rgb(0, 0, 0)}:host([static-color=white][selected][emphasized]){--action-button-background-color-default: rgba(255, 255, 255, .9);--action-button-background-color-hover: rgb(255, 255, 255);--action-button-background-color-down: rgb(255, 255, 255);--action-button-background-color-focus: rgb(255, 255, 255);--action-button-content-color-default: rgb(0, 0, 0)}:host{--action-button-min-width: var(--luzmo-component-height);--action-button-height: var(--luzmo-component-height);--action-button-icon-size: var(--luzmo-font-size-l);--action-button-font-size: var(--luzmo-font-size);--action-button-text-to-visual: var(--luzmo-spacing-2);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-only-size: var(--luzmo-spacing-3);--action-button-edge-to-text-size: 12px;--action-button-corner-triangle-size: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=xs]){--action-button-min-width: var(--luzmo-component-height-xs);--action-button-height: var(--luzmo-component-height-xs);--action-button-icon-size: var(--luzmo-font-size-s);--action-button-font-size: var(--luzmo-font-size-xs);--action-button-text-to-visual: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-only-size: var(--luzmo-spacing-2);--action-button-edge-to-text-size: var(--luzmo-spacing-2);--action-button-corner-triangle-size: var(--luzmo-spacing-2)}:host([size=s]){--action-button-min-width: var(--luzmo-component-height-s);--action-button-height: var(--luzmo-component-height-s);--action-button-icon-size: var(--luzmo-font-size);--action-button-font-size: var(--luzmo-font-size-s);--action-button-text-to-visual: var(--luzmo-spacing-3);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: var(--luzmo-spacing-3);--action-button-edge-to-visual-only-size: var(--luzmo-spacing-2);--action-button-edge-to-text-size: var(--luzmo-spacing-3);--action-button-corner-triangle-size: var(--luzmo-spacing-2)}:host([size=l]){--action-button-min-width: var(--luzmo-component-height-l);--action-button-height: var(--luzmo-component-height-l);--action-button-icon-size: var(--luzmo-font-size-xl);--action-button-font-size: var(--luzmo-font-size-l);--action-button-text-to-visual: var(--luzmo-spacing-3);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: var(--luzmo-spacing-4);--action-button-edge-to-visual-only-size: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-text-size: var(--luzmo-spacing-5);--action-button-corner-triangle-size: var(--luzmo-spacing-3)}:host([size=xl]){--action-button-min-width: var(--luzmo-component-height-xl);--action-button-height: var(--luzmo-component-height-xl);--action-button-icon-size: var(--luzmo-font-size-xxl);--action-button-font-size: var(--luzmo-font-size-xl);--action-button-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-hold-icon: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-size: var(--luzmo-spacing-5);--action-button-edge-to-visual-only-size: var(--luzmo-spacing-4);--action-button-edge-to-text-size: var(--luzmo-spacing-5);--action-button-corner-triangle-size: var(--luzmo-spacing-3)}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--action-button-label-flex-grow);text-align:var(--action-button-label-text-align);pointer-events:none!important}:host([size=xs]){min-width:var(--action-button-height, 0);--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) - var(--action-button-border-width) )}:host([size=s]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) - var(--action-button-border-width) )}:host([size=m]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) - var(--action-button-border-width) )}:host([size=l]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-3) - var(--action-button-border-width) )}:host([size=xl]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-4) - var(--action-button-border-width) )}@media (forced-colors: active){:host{--highcontrast-action-button-border-color-disabled: GrayText;--highcontrast-action-button-content-color-disabled: GrayText}}';var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,e=(c,o,t,r)=>{for(var i=r>1?void 0:r?v(o,t):o,l=c.length-1,u;l>=0;l--)(u=c[l])&&(i=(r?u(o,t,i):u(i))||i);return r&&i&&m(o,t,i),i};const z=300;let b;class a extends n.m(s.a,{validSizes:["xs","s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.emphasized=!1,this.holdAffordance=!1,this.quiet=!1,this.role="button",this.selected=!1,this.toggles=!1,this._value="",this.onClick=()=>{this.toggles&&(this.selected=!this.selected,this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))||(this.selected=!this.selected))},this.addEventListener("click",this.onClick)}static get styles(){return[...super.styles,n.ht(h)]}get value(){return this._value||this.itemText}set value(o){o!==this._value&&(this._value=o||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return(this.textContent||"").trim()}handlePointerdownHoldAffordance(o){o.button===0&&(this.addEventListener("pointerup",this.handlePointerupHoldAffordance),this.addEventListener("pointercancel",this.handlePointerupHoldAffordance),b=setTimeout(()=>{this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},z))}handlePointerupHoldAffordance(){clearTimeout(b),this.removeEventListener("pointerup",this.handlePointerupHoldAffordance),this.removeEventListener("pointercancel",this.handlePointerupHoldAffordance)}handleKeydown(o){if(!this.holdAffordance)return super.handleKeydown(o);const{code:t,altKey:r}=o;(t==="Space"||r&&t==="ArrowDown")&&(o.preventDefault(),t==="ArrowDown"&&(o.stopPropagation(),o.stopImmediatePropagation()),this.addEventListener("keyup",this.handleKeyup),this.active=!0)}handleKeyup(o){if(!this.holdAffordance)return super.handleKeyup(o);const{code:t,altKey:r}=o;(t==="Space"||r&&t==="ArrowDown")&&(o.stopPropagation(),this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"keyboard"}})),this.active=!1)}get buttonContent(){const o=super.buttonContent;return this.holdAffordance&&o.unshift(n.Ht`
|
37
|
+
<div
|
38
|
+
class="hold-affordance corner-triangle-${this.size}"
|
39
|
+
>
|
40
|
+
${d.O2(d.d1)}
|
41
|
+
</div>
|
42
|
+
`),o}updated(o){super.updated(o);const t=this.role==="button",r=t&&(this.selected||this.toggles)&&!(this.hasAttribute("aria-haspopup")&&this.hasAttribute("aria-expanded"));(o.has("selected")||o.has("role"))&&(r?this.setAttribute("aria-pressed",this.selected?"true":"false"):(this.removeAttribute("aria-pressed"),t&&this.toggles&&this.hasAttribute("aria-expanded")&&this.setAttribute("aria-expanded",this.selected?"true":"false"))),o.has("holdAffordance")&&(this.holdAffordance?this.addEventListener("pointerdown",this.handlePointerdownHoldAffordance):(this.removeEventListener("pointerdown",this.handlePointerdownHoldAffordance),this.handlePointerupHoldAffordance()))}}e([n.Rt({type:Boolean,reflect:!0})],a.prototype,"emphasized",2);e([n.Rt({type:Boolean,reflect:!0,attribute:"hold-affordance"})],a.prototype,"holdAffordance",2);e([n.Rt({type:Boolean,reflect:!0})],a.prototype,"quiet",2);e([n.Rt({reflect:!0})],a.prototype,"role",2);e([n.Rt({type:Boolean,reflect:!0})],a.prototype,"selected",2);e([n.Rt({type:Boolean,reflect:!0})],a.prototype,"toggles",2);e([n.Rt({reflect:!0,attribute:"static-color"})],a.prototype,"staticColor",2);e([n.Rt({type:String})],a.prototype,"value",1);customElements.get("luzmo-action-button")||customElements.define("luzmo-action-button",a);
|
@@ -17,10 +17,9 @@
|
|
17
17
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
18
18
|
* SOFTWARE.
|
19
19
|
* */
|
20
|
-
import { O as b, d as s } from "./luzmo-icons-
|
21
|
-
import {
|
22
|
-
import {
|
23
|
-
import { a as v } from "./button-base-B7v4eeRh-D3-GH03o.js";
|
20
|
+
import { O as b, d as s } from "./luzmo-icons-CmY3chvZ.js";
|
21
|
+
import { m as g, h, H as m, R as a } from "./base-D76d76ww-M5t7LVBG.js";
|
22
|
+
import { a as v } from "./button-base-DSHx7XO8-B_LbLx9g.js";
|
24
23
|
/*! * Lucero - The design system for Luzmo.
|
25
24
|
*
|
26
25
|
* Copyright © 2025 Luzmo
|
@@ -41,11 +40,11 @@ import { a as v } from "./button-base-B7v4eeRh-D3-GH03o.js";
|
|
41
40
|
const z = () => {
|
42
41
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
43
42
|
const c = document.createElement("style");
|
44
|
-
c.setAttribute("data-luzmo-vars", ""), c.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-color
|
43
|
+
c.setAttribute("data-luzmo-vars", ""), c.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(c);
|
45
44
|
}
|
46
45
|
};
|
47
46
|
z();
|
48
|
-
const f = ':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family, var(--luzmo-sans-font-family-stack, var(--luzmo-font-family)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, var(--luzmo-line-height-100, var(--line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out;border-style:solid;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible}:host(:focus){outline:none}:host([disabled]){cursor:default}::slotted([slot=icon]){max-block-size:100%;flex-shrink:0}#label{text-align:center;place-self:center}#label:empty{display:none}@media (forced-colors: active){:host{--highcontrast-action-button-focus-indicator-color: ButtonText}:host:after{forced-color-adjust:none}:host([selected]){--highcontrast-action-button-background-color-default: Highlight;--highcontrast-action-button-background-color-hover: Highlight;--highcontrast-action-button-background-color-focus: Highlight;--highcontrast-action-button-background-color-down: Highlight;--highcontrast-action-button-background-color-disabled: ButtonFace;--highcontrast-action-button-border-color-default: HighlightText;--highcontrast-action-button-border-color-hover: HighlightText;--highcontrast-action-button-border-color-focus: HighlightText;--highcontrast-action-button-border-color-down: HighlightText;--highcontrast-action-button-border-color-disabled: GrayText;--highcontrast-action-button-content-color-default: HighlightText;--highcontrast-action-button-content-color-hover: HighlightText;--highcontrast-action-button-content-color-focus: HighlightText;--highcontrast-action-button-content-color-down: HighlightText;--highcontrast-action-button-content-color-disabled: GrayText}:host([selected]) .hold-affordance,:host([selected]) ::slotted([slot=icon]),:host([selected]) #label{forced-color-adjust:none}}:host{--action-button-focus-indicator-border-radius: calc( var(--action-button-border-radius) + var(--action-button-focus-indicator-gap) );--action-button-edge-to-visual: calc( var(--action-button-edge-to-visual-size) - var(--action-button-border-width) );--action-button-edge-to-text: calc( var(--action-button-edge-to-text-size) - var(--action-button-border-width) );--action-button-edge-to-visual-only: calc( var(--action-button-edge-to-visual-only-size) - var( --action-button-border-width ) );min-inline-size:var(--luzmo-action-button-min-width, var(--action-button-min-width));block-size:var(--luzmo-action-button-height, var(--action-button-height));border-radius:var(--luzmo-action-button-border-radius, var(--action-button-border-radius));border-width:var(--luzmo-action-button-border-width, var(--action-button-border-width));gap:calc(var(--luzmo-action-button-text-to-visual, var(--action-button-text-to-visual)) + var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)) - var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)));padding-inline:var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text));background-color:var(--highcontrast-action-button-background-color-default, var(--luzmo-action-button-background-color-default, var(--action-button-background-color-default)));border-color:var(--highcontrast-action-button-border-color-default, var(--luzmo-action-button-border-color-default, var(--action-button-border-color-default)));color:var(--highcontrast-action-button-content-color-default, var(--luzmo-action-button-content-color-default, var(--action-button-content-color-default)));position:relative}:host:dir(rtl),:host([dir=rtl]){--logical-rotation: matrix(-1, 0, 0, 1, 0, 0)}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-action-button-background-color-hover, var(--luzmo-action-button-background-color-hover, var(--action-button-background-color-hover)));border-color:var(--highcontrast-action-button-border-color-hover, var(--luzmo-action-button-border-color-hover, var(--action-button-border-color-hover)));color:var(--highcontrast-action-button-content-color-hover, var(--luzmo-action-button-content-color-hover, var(--action-button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-action-button-background-color-focus, var(--luzmo-action-button-background-color-focus, var(--action-button-background-color-focus)));border-color:var(--highcontrast-action-button-border-color-focus, var(--luzmo-action-button-border-color-focus, var(--action-button-border-color-focus)));color:var(--highcontrast-action-button-content-color-focus, var(--luzmo-action-button-content-color-focus, var(--action-button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-action-button-background-color-down, var(--luzmo-action-button-background-color-down, var(--action-button-background-color-down)));border-color:var(--highcontrast-action-button-border-color-down, var(--luzmo-action-button-border-color-down, var(--action-button-border-color-down)));color:var(--highcontrast-action-button-content-color-down, var(--luzmo-action-button-content-color-down, var(--action-button-content-color-down)))}:host([disabled]){background-color:var(--highcontrast-action-button-background-color-disabled, var(--luzmo-action-button-background-color-disabled, var(--action-button-background-color-disabled)));border-color:var(--highcontrast-action-button-border-color-disabled, var(--luzmo-action-button-border-color-disabled, var(--action-button-border-color-disabled)));color:var(--highcontrast-action-button-content-color-disabled, var(--luzmo-action-button-content-color-disabled, var(--action-button-content-color-disabled)))}:host([selected]){--luzmo-action-button-background-color-default: var( --luzmo-action-button-background-color-default-selected );--luzmo-action-button-background-color-hover: var( --luzmo-action-button-background-color-hover-selected );--luzmo-action-button-background-color-down: var( --luzmo-action-button-background-color-down-selected );--luzmo-action-button-background-color-focus: var( --luzmo-action-button-background-color-focus-selected );--luzmo-action-button-content-color-default: var( --luzmo-action-button-content-color-default-selected );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-content-color-hover-selected );--luzmo-action-button-content-color-down: var( --luzmo-action-button-content-color-down-selected );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-content-color-focus-selected )}:host([selected][emphasized]){--luzmo-action-button-background-color-default: var( --luzmo-action-button-background-color-default-selected-emphasized );--luzmo-action-button-background-color-hover: var( --luzmo-action-button-background-color-hover-selected-emphasized );--luzmo-action-button-background-color-down: var( --luzmo-action-button-background-color-down-selected-emphasized );--luzmo-action-button-background-color-focus: var( --luzmo-action-button-background-color-focus-selected-emphasized );--luzmo-action-button-content-color-default: var( --luzmo-action-button-content-color-default-selected-emphasized );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-content-color-hover-selected-emphasized );--luzmo-action-button-content-color-down: var( --luzmo-action-button-content-color-down-selected-emphasized );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-content-color-focus-selected-emphasized )}:host([selected][static-color=black]),:host([selected][static-color=white]){--luzmo-action-button-content-color-default: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-down: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-static-content-color )}::slotted([slot=icon]){inline-size:var(--luzmo-action-button-icon-size, var(--action-button-icon-size));color:inherit;margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}.hold-affordance+::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}.hold-affordance+[icon-only]::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}#label{pointer-events:none;font-size:var(--luzmo-action-button-font-size, var(--action-button-font-size));white-space:nowrap;color:inherit;color:var(--luzmo-action-button-label-color, inherit);text-overflow:ellipsis;overflow:hidden}.hold-affordance{color:inherit;transform:var(--logical-rotation);position:absolute;font-size:var(--action-button-corner-triangle-size);inset-block-end:calc(var(--luzmo-action-button-edge-to-hold-icon, var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width, var(--action-button-border-width)));inset-inline-end:calc(var(--luzmo-action-button-edge-to-hold-icon, var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width, var(--action-button-border-width)))}:host{transition:border-color var(--luzmo-action-button-animation-duration, var(--action-button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-action-button-focus-indicator-gap, var(--action-button-focus-indicator-gap)) + var(--luzmo-action-button-border-width, var(--action-button-border-width))) * -1);border-radius:var(--luzmo-action-button-focus-indicator-border-radius, var(--action-button-focus-indicator-border-radius));transition:box-shadow var(--luzmo-action-button-animation-duration, var(--action-button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-action-button-focus-indicator-thickness, var(--action-button-focus-indicator-thickness)) var(--highcontrast-action-button-focus-indicator-color, var(--luzmo-action-button-focus-indicator-color, var(--action-button-focus-indicator-color)))}:host{--action-button-animation-duration: var(--luzmo-animation-duration);--action-button-border-radius: var(--luzmo-border-radius);--action-button-border-width: var(--luzmo-border-width);--action-button-content-color-default: var(--luzmo-font-color);--action-button-content-color-hover: var(--luzmo-font-color-hover);--action-button-content-color-down: var(--luzmo-font-color-down);--action-button-content-color-focus: var(--luzmo-font-color-focus);--action-button-focus-indicator-gap: var(--luzmo-indicator-gap);--action-button-focus-indicator-thickness: var(--luzmo-indicator-width);--action-button-focus-indicator-color: var(--luzmo-indicator-color);--action-button-background-color-default: var(--luzmo-background-color);--action-button-background-color-hover: var(--luzmo-background-color-hover);--action-button-background-color-down: var(--luzmo-background-color-down);--action-button-background-color-focus: var(--luzmo-background-color-focus);--action-button-border-color-default: var(--luzmo-border-color);--action-button-border-color-hover: var(--luzmo-border-color-hover);--action-button-border-color-down: var(--luzmo-border-color-down);--action-button-border-color-focus: var(--luzmo-border-color-focus);--action-button-background-color-disabled: var(--luzmo-background-color);--action-button-border-color-disabled: var(--luzmo-border-color-disabled);--action-button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--action-button-background-color-default: transparent;--action-button-background-color-hover: var(--luzmo-background-color-hover);--action-button-background-color-down: var(--luzmo-background-color-down);--action-button-background-color-focus: var(--luzmo-background-color-focus);--action-button-background-color-disabled: transparent;--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent}:host([selected]){--action-button-background-color-default: var(--luzmo-font-color);--action-button-background-color-hover: var(--luzmo-font-color-hover);--action-button-background-color-down: var(--luzmo-font-color-down);--action-button-background-color-focus: var(--luzmo-font-color-focus);--action-button-content-color-default: var(--luzmo-background-color);--action-button-content-color-hover: var(--luzmo-background-color);--action-button-content-color-down: var(--luzmo-background-color);--action-button-content-color-focus: var(--luzmo-background-color);--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent;--action-button-background-color-disabled: var( --luzmo-background-color-disabled )}:host([selected][emphasized]){--action-button-background-color-default: var(--luzmo-primary);--action-button-background-color-hover: var(--luzmo-primary-hover);--action-button-background-color-down: var(--luzmo-primary-down);--action-button-background-color-focus: var(--luzmo-primary-focus);--action-button-content-color-default: var(--luzmo-primary-inverse-color);--action-button-content-color-hover: var(--luzmo-primary-inverse-color);--action-button-content-color-down: var(--luzmo-primary-inverse-color);--action-button-content-color-focus: var(--luzmo-primary-inverse-color)}:host([static-color=black][quiet]),:host([static-color=white][quiet]){--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent}:host([static-color=black]){--action-button-background-color-default: transparent;--action-button-background-color-hover: rgba(0, 0, 0, .25);--action-button-background-color-down: rgba(0, 0, 0, .4);--action-button-background-color-focus: rgba(0, 0, 0, .25);--action-button-background-color-disabled: transparent;--action-button-border-color-default: rgba(0, 0, 0, .4);--action-button-border-color-hover: rgba(0, 0, 0, .55);--action-button-border-color-down: rgba(0, 0, 0, .7);--action-button-border-color-focus: rgba(0, 0, 0, .25);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(0, 0, 0);--action-button-content-color-hover: rgb(0, 0, 0);--action-button-content-color-down: rgb(0, 0, 0);--action-button-content-color-focus: rgb(0, 0, 0);--action-button-content-color-disabled: rgba(0, 0, 0, .55);--action-button-focus-indicator-color: rgb(0, 0, 0)}:host([static-color=black][selected]){--action-button-background-color-default: rgba(0, 0, 0, .9);--action-button-background-color-hover: rgb(0, 0, 0);--action-button-background-color-down: rgb(0, 0, 0);--action-button-background-color-focus: rgb(0, 0, 0);--action-button-background-color-disabled: rgba(0, 0, 0, .1);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255)}:host([static-color=black][selected][emphasized]){--action-button-background-color-default: rgba(0, 0, 0, .9);--action-button-background-color-hover: rgb(0, 0, 0);--action-button-background-color-down: rgb(0, 0, 0);--action-button-background-color-focus: rgb(0, 0, 0);--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255)}:host([static-color=white]){--action-button-background-color-default: transparent;--action-button-background-color-hover: rgba(255, 255, 255, .25);--action-button-background-color-down: rgba(255, 255, 255, .4);--action-button-background-color-focus: rgba(255, 255, 255, .25);--action-button-background-color-disabled: transparent;--action-button-border-color-default: rgba(255, 255, 255, .4);--action-button-border-color-hover: rgba(255, 255, 255, .55);--action-button-border-color-down: rgba(255, 255, 255, .7);--action-button-border-color-focus: rgba(255, 255, 255, .55);--action-button-border-color-disabled: rgba(255, 255, 255, .25);--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255);--action-button-content-color-disabled: rgba(255, 255, 255, .55);--action-button-focus-indicator-color: rgb(255, 255, 255)}:host([static-color=white][selected]){--action-button-background-color-default: rgba(255, 255, 255, .9);--action-button-background-color-hover: rgb(255, 255, 255);--action-button-background-color-down: rgb(255, 255, 255);--action-button-background-color-focus: rgb(255, 255, 255);--action-button-background-color-disabled: rgba(255, 255, 255, .1);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(0, 0, 0);--action-button-content-color-hover: rgb(0, 0, 0);--action-button-content-color-down: rgb(0, 0, 0);--action-button-content-color-focus: rgb(0, 0, 0)}:host([static-color=white][selected][emphasized]){--action-button-background-color-default: rgba(255, 255, 255, .9);--action-button-background-color-hover: rgb(255, 255, 255);--action-button-background-color-down: rgb(255, 255, 255);--action-button-background-color-focus: rgb(255, 255, 255);--action-button-content-color-default: rgb(0, 0, 0)}:host{--action-button-min-width: var(--luzmo-component-height);--action-button-height: var(--luzmo-component-height);--action-button-icon-size: var(--luzmo-font-size-l);--action-button-font-size: var(--luzmo-font-size);--action-button-text-to-visual: var(--luzmo-spacing-2);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-only-size: var(--luzmo-spacing-3);--action-button-edge-to-text-size: 12px;--action-button-corner-triangle-size: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=xs]){--action-button-min-width: var(--luzmo-component-height-xs);--action-button-height: var(--luzmo-component-height-xs);--action-button-icon-size: var(--luzmo-font-size-s);--action-button-font-size: var(--luzmo-font-size-xs);--action-button-text-to-visual: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-only-size: var(--luzmo-spacing-2);--action-button-edge-to-text-size: var(--luzmo-spacing-2);--action-button-corner-triangle-size: var(--luzmo-spacing-2)}:host([size=s]){--action-button-min-width: var(--luzmo-component-height-s);--action-button-height: var(--luzmo-component-height-s);--action-button-icon-size: var(--luzmo-font-size);--action-button-font-size: var(--luzmo-font-size-s);--action-button-text-to-visual: var(--luzmo-spacing-3);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: var(--luzmo-spacing-3);--action-button-edge-to-visual-only-size: var(--luzmo-spacing-2);--action-button-edge-to-text-size: var(--luzmo-spacing-3);--action-button-corner-triangle-size: var(--luzmo-spacing-2)}:host([size=l]){--action-button-min-width: var(--luzmo-component-height-l);--action-button-height: var(--luzmo-component-height-l);--action-button-icon-size: var(--luzmo-font-size-xl);--action-button-font-size: var(--luzmo-font-size-l);--action-button-text-to-visual: var(--luzmo-spacing-3);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: var(--luzmo-spacing-4);--action-button-edge-to-visual-only-size: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-text-size: var(--luzmo-spacing-5);--action-button-corner-triangle-size: var(--luzmo-spacing-3)}:host([size=xl]){--action-button-min-width: var(--luzmo-component-height-xl);--action-button-height: var(--luzmo-component-height-xl);--action-button-icon-size: var(--luzmo-font-size-xxl);--action-button-font-size: var(--luzmo-font-size-xl);--action-button-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-hold-icon: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-size: var(--luzmo-spacing-5);--action-button-edge-to-visual-only-size: var(--luzmo-spacing-4);--action-button-edge-to-text-size: var(--luzmo-spacing-5);--action-button-corner-triangle-size: var(--luzmo-spacing-3)}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--action-button-label-flex-grow);text-align:var(--action-button-label-text-align);pointer-events:none!important}:host([size=xs]){min-width:var(--action-button-height, 0);--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) - var(--action-button-border-width) )}:host([size=s]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) - var(--action-button-border-width) )}:host([size=m]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) - var(--action-button-border-width) )}:host([size=l]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-3) - var(--action-button-border-width) )}:host([size=xl]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-4) - var(--action-button-border-width) )}@media (forced-colors: active){:host{--highcontrast-action-button-border-color-disabled: GrayText;--highcontrast-action-button-content-color-disabled: GrayText}}';
|
47
|
+
const f = ':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family, var(--luzmo-sans-font-family-stack, var(--luzmo-font-family)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, var(--luzmo-line-height-100, var(--line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out;border-style:solid;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible}:host(:focus){outline:none}:host([disabled]){cursor:default}::slotted([slot=icon]){max-block-size:100%;flex-shrink:0}#label{text-align:center;place-self:center}#label:empty{display:none}@media (forced-colors: active){:host{--highcontrast-action-button-focus-indicator-color: ButtonText}:host:after{forced-color-adjust:none}:host([selected]){--highcontrast-action-button-background-color-default: Highlight;--highcontrast-action-button-background-color-hover: Highlight;--highcontrast-action-button-background-color-focus: Highlight;--highcontrast-action-button-background-color-down: Highlight;--highcontrast-action-button-background-color-disabled: ButtonFace;--highcontrast-action-button-border-color-default: HighlightText;--highcontrast-action-button-border-color-hover: HighlightText;--highcontrast-action-button-border-color-focus: HighlightText;--highcontrast-action-button-border-color-down: HighlightText;--highcontrast-action-button-border-color-disabled: GrayText;--highcontrast-action-button-content-color-default: HighlightText;--highcontrast-action-button-content-color-hover: HighlightText;--highcontrast-action-button-content-color-focus: HighlightText;--highcontrast-action-button-content-color-down: HighlightText;--highcontrast-action-button-content-color-disabled: GrayText}:host([selected]) .hold-affordance,:host([selected]) ::slotted([slot=icon]),:host([selected]) #label{forced-color-adjust:none}}:host{--action-button-focus-indicator-border-radius: calc( var(--action-button-border-radius) + var(--action-button-focus-indicator-gap) );--action-button-edge-to-visual: calc( var(--action-button-edge-to-visual-size) - var(--action-button-border-width) );--action-button-edge-to-text: calc( var(--action-button-edge-to-text-size) - var(--action-button-border-width) );--action-button-edge-to-visual-only: calc( var(--action-button-edge-to-visual-only-size) - var( --action-button-border-width ) );min-inline-size:var(--luzmo-action-button-min-width, var(--action-button-min-width));block-size:var(--luzmo-action-button-height, var(--action-button-height));border-radius:var(--luzmo-action-button-border-radius, var(--action-button-border-radius));border-width:var(--luzmo-action-button-border-width, var(--action-button-border-width));gap:calc(var(--luzmo-action-button-text-to-visual, var(--action-button-text-to-visual)) + var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)) - var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)));padding-inline:var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text));background-color:var(--highcontrast-action-button-background-color-default, var(--luzmo-action-button-background-color-default, var(--action-button-background-color-default)));border-color:var(--highcontrast-action-button-border-color-default, var(--luzmo-action-button-border-color-default, var(--action-button-border-color-default)));color:var(--highcontrast-action-button-content-color-default, var(--luzmo-action-button-content-color-default, var(--action-button-content-color-default)));position:relative}:host:dir(rtl),:host([dir=rtl]){--logical-rotation: matrix(-1, 0, 0, 1, 0, 0)}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-action-button-background-color-hover, var(--luzmo-action-button-background-color-hover, var(--action-button-background-color-hover)));border-color:var(--highcontrast-action-button-border-color-hover, var(--luzmo-action-button-border-color-hover, var(--action-button-border-color-hover)));color:var(--highcontrast-action-button-content-color-hover, var(--luzmo-action-button-content-color-hover, var(--action-button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-action-button-background-color-focus, var(--luzmo-action-button-background-color-focus, var(--action-button-background-color-focus)));border-color:var(--highcontrast-action-button-border-color-focus, var(--luzmo-action-button-border-color-focus, var(--action-button-border-color-focus)));color:var(--highcontrast-action-button-content-color-focus, var(--luzmo-action-button-content-color-focus, var(--action-button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-action-button-background-color-down, var(--luzmo-action-button-background-color-down, var(--action-button-background-color-down)));border-color:var(--highcontrast-action-button-border-color-down, var(--luzmo-action-button-border-color-down, var(--action-button-border-color-down)));color:var(--highcontrast-action-button-content-color-down, var(--luzmo-action-button-content-color-down, var(--action-button-content-color-down)))}:host([disabled]){background-color:var(--highcontrast-action-button-background-color-disabled, var(--luzmo-action-button-background-color-disabled, var(--action-button-background-color-disabled)));border-color:var(--highcontrast-action-button-border-color-disabled, var(--luzmo-action-button-border-color-disabled, var(--action-button-border-color-disabled)));color:var(--highcontrast-action-button-content-color-disabled, var(--luzmo-action-button-content-color-disabled, var(--action-button-content-color-disabled)))}:host([selected]){--luzmo-action-button-background-color-default: var( --luzmo-action-button-background-color-default-selected );--luzmo-action-button-background-color-hover: var( --luzmo-action-button-background-color-hover-selected );--luzmo-action-button-background-color-down: var( --luzmo-action-button-background-color-down-selected );--luzmo-action-button-background-color-focus: var( --luzmo-action-button-background-color-focus-selected );--luzmo-action-button-content-color-default: var( --luzmo-action-button-content-color-default-selected );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-content-color-hover-selected );--luzmo-action-button-content-color-down: var( --luzmo-action-button-content-color-down-selected );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-content-color-focus-selected )}:host([selected][emphasized]){--luzmo-action-button-background-color-default: var( --luzmo-action-button-background-color-default-selected-emphasized );--luzmo-action-button-background-color-hover: var( --luzmo-action-button-background-color-hover-selected-emphasized );--luzmo-action-button-background-color-down: var( --luzmo-action-button-background-color-down-selected-emphasized );--luzmo-action-button-background-color-focus: var( --luzmo-action-button-background-color-focus-selected-emphasized );--luzmo-action-button-content-color-default: var( --luzmo-action-button-content-color-default-selected-emphasized );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-content-color-hover-selected-emphasized );--luzmo-action-button-content-color-down: var( --luzmo-action-button-content-color-down-selected-emphasized );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-content-color-focus-selected-emphasized )}:host([selected][static-color=black]),:host([selected][static-color=white]){--luzmo-action-button-content-color-default: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-down: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-static-content-color )}::slotted([slot=icon]){inline-size:var(--luzmo-action-button-icon-size, var(--action-button-icon-size));color:inherit;margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}.hold-affordance+::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}.hold-affordance+[icon-only]::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));text-align:center}#label{pointer-events:none;font-size:var(--luzmo-action-button-font-size, var(--action-button-font-size));white-space:nowrap;color:inherit;color:var(--luzmo-action-button-label-color, inherit);text-overflow:ellipsis;overflow:hidden}.hold-affordance{color:inherit;transform:var(--logical-rotation);position:absolute;font-size:var(--action-button-corner-triangle-size);inset-block-end:calc(var(--luzmo-action-button-edge-to-hold-icon, var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width, var(--action-button-border-width)));inset-inline-end:calc(var(--luzmo-action-button-edge-to-hold-icon, var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width, var(--action-button-border-width)))}:host{transition:border-color var(--luzmo-action-button-animation-duration, var(--action-button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-action-button-focus-indicator-gap, var(--action-button-focus-indicator-gap)) + var(--luzmo-action-button-border-width, var(--action-button-border-width))) * -1);border-radius:var(--luzmo-action-button-focus-indicator-border-radius, var(--action-button-focus-indicator-border-radius));transition:box-shadow var(--luzmo-action-button-animation-duration, var(--action-button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-action-button-focus-indicator-thickness, var(--action-button-focus-indicator-thickness)) var(--highcontrast-action-button-focus-indicator-color, var(--luzmo-action-button-focus-indicator-color, var(--action-button-focus-indicator-color)))}:host{--action-button-animation-duration: var(--luzmo-animation-duration);--action-button-border-radius: var(--luzmo-border-radius);--action-button-border-width: var(--luzmo-border-width);--action-button-content-color-default: var(--luzmo-font-color);--action-button-content-color-hover: var(--luzmo-font-color-hover);--action-button-content-color-down: var(--luzmo-font-color-down);--action-button-content-color-focus: var(--luzmo-font-color-focus);--action-button-focus-indicator-gap: var(--luzmo-indicator-gap);--action-button-focus-indicator-thickness: var(--luzmo-indicator-width);--action-button-focus-indicator-color: var(--luzmo-indicator-color);--action-button-background-color-default: var(--luzmo-background-color);--action-button-background-color-hover: var(--luzmo-background-color-hover);--action-button-background-color-down: var(--luzmo-background-color-down);--action-button-background-color-focus: var(--luzmo-background-color-focus);--action-button-border-color-default: var(--luzmo-border-color);--action-button-border-color-hover: var(--luzmo-border-color-hover);--action-button-border-color-down: var(--luzmo-border-color-down);--action-button-border-color-focus: var(--luzmo-border-color-focus);--action-button-background-color-disabled: var(--luzmo-background-color);--action-button-border-color-disabled: var(--luzmo-border-color-disabled);--action-button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--action-button-background-color-default: transparent;--action-button-background-color-hover: var(--luzmo-background-color-hover);--action-button-background-color-down: var(--luzmo-background-color-down);--action-button-background-color-focus: var(--luzmo-background-color-focus);--action-button-background-color-disabled: transparent;--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent}:host([selected]){--action-button-background-color-default: var(--luzmo-font-color);--action-button-background-color-hover: var(--luzmo-font-color-hover);--action-button-background-color-down: var(--luzmo-font-color-down);--action-button-background-color-focus: var(--luzmo-font-color-focus);--action-button-content-color-default: var(--luzmo-background-color);--action-button-content-color-hover: var(--luzmo-background-color);--action-button-content-color-down: var(--luzmo-background-color);--action-button-content-color-focus: var(--luzmo-background-color);--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent;--action-button-background-color-disabled: var( --luzmo-background-color-disabled )}:host([selected][emphasized]){--action-button-background-color-default: var(--luzmo-primary);--action-button-background-color-hover: var(--luzmo-primary-hover);--action-button-background-color-down: var(--luzmo-primary-down);--action-button-background-color-focus: var(--luzmo-primary-focus);--action-button-content-color-default: var(--luzmo-primary-inverse-color);--action-button-content-color-hover: var(--luzmo-primary-inverse-color);--action-button-content-color-down: var(--luzmo-primary-inverse-color);--action-button-content-color-focus: var(--luzmo-primary-inverse-color)}:host([static-color=black][quiet]),:host([static-color=white][quiet]){--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent}:host([static-color=black]){--action-button-background-color-default: transparent;--action-button-background-color-hover: rgba(0, 0, 0, .25);--action-button-background-color-down: rgba(0, 0, 0, .4);--action-button-background-color-focus: rgba(0, 0, 0, .25);--action-button-background-color-disabled: transparent;--action-button-border-color-default: rgba(0, 0, 0, .4);--action-button-border-color-hover: rgba(0, 0, 0, .55);--action-button-border-color-down: rgba(0, 0, 0, .7);--action-button-border-color-focus: rgba(0, 0, 0, .25);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(0, 0, 0);--action-button-content-color-hover: rgb(0, 0, 0);--action-button-content-color-down: rgb(0, 0, 0);--action-button-content-color-focus: rgb(0, 0, 0);--action-button-content-color-disabled: rgba(0, 0, 0, .55);--action-button-focus-indicator-color: rgb(0, 0, 0)}:host([static-color=black][selected]){--action-button-background-color-default: rgba(0, 0, 0, .9);--action-button-background-color-hover: rgb(0, 0, 0);--action-button-background-color-down: rgb(0, 0, 0);--action-button-background-color-focus: rgb(0, 0, 0);--action-button-background-color-disabled: rgba(0, 0, 0, .1);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255)}:host([static-color=black][selected][emphasized]){--action-button-background-color-default: rgba(0, 0, 0, .9);--action-button-background-color-hover: rgb(0, 0, 0);--action-button-background-color-down: rgb(0, 0, 0);--action-button-background-color-focus: rgb(0, 0, 0);--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255)}:host([static-color=white]){--action-button-background-color-default: transparent;--action-button-background-color-hover: rgba(255, 255, 255, .25);--action-button-background-color-down: rgba(255, 255, 255, .4);--action-button-background-color-focus: rgba(255, 255, 255, .25);--action-button-background-color-disabled: transparent;--action-button-border-color-default: rgba(255, 255, 255, .4);--action-button-border-color-hover: rgba(255, 255, 255, .55);--action-button-border-color-down: rgba(255, 255, 255, .7);--action-button-border-color-focus: rgba(255, 255, 255, .55);--action-button-border-color-disabled: rgba(255, 255, 255, .25);--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255);--action-button-content-color-disabled: rgba(255, 255, 255, .55);--action-button-focus-indicator-color: rgb(255, 255, 255)}:host([static-color=white][selected]){--action-button-background-color-default: rgba(255, 255, 255, .9);--action-button-background-color-hover: rgb(255, 255, 255);--action-button-background-color-down: rgb(255, 255, 255);--action-button-background-color-focus: rgb(255, 255, 255);--action-button-background-color-disabled: rgba(255, 255, 255, .1);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(0, 0, 0);--action-button-content-color-hover: rgb(0, 0, 0);--action-button-content-color-down: rgb(0, 0, 0);--action-button-content-color-focus: rgb(0, 0, 0)}:host([static-color=white][selected][emphasized]){--action-button-background-color-default: rgba(255, 255, 255, .9);--action-button-background-color-hover: rgb(255, 255, 255);--action-button-background-color-down: rgb(255, 255, 255);--action-button-background-color-focus: rgb(255, 255, 255);--action-button-content-color-default: rgb(0, 0, 0)}:host{--action-button-min-width: var(--luzmo-component-height);--action-button-height: var(--luzmo-component-height);--action-button-icon-size: var(--luzmo-font-size-l);--action-button-font-size: var(--luzmo-font-size);--action-button-text-to-visual: var(--luzmo-spacing-2);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-only-size: var(--luzmo-spacing-3);--action-button-edge-to-text-size: 12px;--action-button-corner-triangle-size: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=xs]){--action-button-min-width: var(--luzmo-component-height-xs);--action-button-height: var(--luzmo-component-height-xs);--action-button-icon-size: var(--luzmo-font-size-s);--action-button-font-size: var(--luzmo-font-size-xs);--action-button-text-to-visual: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-only-size: var(--luzmo-spacing-2);--action-button-edge-to-text-size: var(--luzmo-spacing-2);--action-button-corner-triangle-size: var(--luzmo-spacing-2)}:host([size=s]){--action-button-min-width: var(--luzmo-component-height-s);--action-button-height: var(--luzmo-component-height-s);--action-button-icon-size: var(--luzmo-font-size);--action-button-font-size: var(--luzmo-font-size-s);--action-button-text-to-visual: var(--luzmo-spacing-3);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: var(--luzmo-spacing-3);--action-button-edge-to-visual-only-size: var(--luzmo-spacing-2);--action-button-edge-to-text-size: var(--luzmo-spacing-3);--action-button-corner-triangle-size: var(--luzmo-spacing-2)}:host([size=l]){--action-button-min-width: var(--luzmo-component-height-l);--action-button-height: var(--luzmo-component-height-l);--action-button-icon-size: var(--luzmo-font-size-xl);--action-button-font-size: var(--luzmo-font-size-l);--action-button-text-to-visual: var(--luzmo-spacing-3);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: var(--luzmo-spacing-4);--action-button-edge-to-visual-only-size: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-text-size: var(--luzmo-spacing-5);--action-button-corner-triangle-size: var(--luzmo-spacing-3)}:host([size=xl]){--action-button-min-width: var(--luzmo-component-height-xl);--action-button-height: var(--luzmo-component-height-xl);--action-button-icon-size: var(--luzmo-font-size-xxl);--action-button-font-size: var(--luzmo-font-size-xl);--action-button-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-hold-icon: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-size: var(--luzmo-spacing-5);--action-button-edge-to-visual-only-size: var(--luzmo-spacing-4);--action-button-edge-to-text-size: var(--luzmo-spacing-5);--action-button-corner-triangle-size: var(--luzmo-spacing-3)}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--action-button-label-flex-grow);text-align:var(--action-button-label-text-align);pointer-events:none!important}:host([size=xs]){min-width:var(--action-button-height, 0);--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) - var(--action-button-border-width) )}:host([size=s]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) - var(--action-button-border-width) )}:host([size=m]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) - var(--action-button-border-width) )}:host([size=l]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-3) - var(--action-button-border-width) )}:host([size=xl]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-4) - var(--action-button-border-width) )}@media (forced-colors: active){:host{--highcontrast-action-button-border-color-disabled: GrayText;--highcontrast-action-button-content-color-disabled: GrayText}}';
|
49
48
|
var p = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (c, o, t, n) => {
|
50
49
|
for (var i = n > 1 ? void 0 : n ? x(o, t) : o, l = c.length - 1, u; l >= 0; l--)
|
51
50
|
(u = c[l]) && (i = (n ? u(o, t, i) : u(i)) || i);
|
@@ -53,7 +52,7 @@ var p = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (c, o, t
|
|
53
52
|
};
|
54
53
|
const k = 300;
|
55
54
|
let d;
|
56
|
-
class r extends
|
55
|
+
class r extends g(v, {
|
57
56
|
validSizes: ["xs", "s", "m", "l", "xl"],
|
58
57
|
noDefaultSize: !0
|
59
58
|
}) {
|
@@ -69,7 +68,7 @@ class r extends m(v, {
|
|
69
68
|
}, this.addEventListener("click", this.onClick);
|
70
69
|
}
|
71
70
|
static get styles() {
|
72
|
-
return [...super.styles,
|
71
|
+
return [...super.styles, h(f)];
|
73
72
|
}
|
74
73
|
get value() {
|
75
74
|
return this._value || this.itemText;
|
@@ -128,7 +127,7 @@ class r extends m(v, {
|
|
128
127
|
}
|
129
128
|
get buttonContent() {
|
130
129
|
const o = super.buttonContent;
|
131
|
-
return this.holdAffordance && o.unshift(
|
130
|
+
return this.holdAffordance && o.unshift(m`
|
132
131
|
<div
|
133
132
|
class="hold-affordance corner-triangle-${this.size}"
|
134
133
|
>
|