@luzmo/lucero 0.0.8 → 0.0.10
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/accordion/index.cjs +6 -6
- package/components/accordion/index.js +8 -7
- package/components/action-bar/index.cjs +4 -4
- package/components/action-bar/index.js +9 -8
- package/components/action-button/index.cjs +2 -2
- package/components/action-button/index.js +4 -3
- package/components/action-group/index.cjs +1 -1
- package/components/action-group/index.js +1 -1
- package/components/action-group-BBoV2VL9.cjs +20 -0
- package/components/{action-group-enfc-YnW.js → action-group-Bf28z235.js} +8 -7
- package/components/action-menu/index.cjs +5 -5
- package/components/action-menu/index.js +7 -6
- package/components/{async-directive-D_Ter1F8.cjs → async-directive-CV2MII86.cjs} +1 -1
- package/components/{async-directive-DWRUSKKF.js → async-directive-FGzMycjH.js} +1 -1
- package/components/avatar/index.cjs +3 -3
- package/components/avatar/index.js +6 -5
- package/components/base-DNrOP9L3.js +391 -0
- package/components/base-DzbGOAPo.cjs +30 -0
- package/components/button/index.cjs +2 -2
- package/components/button/index.js +7 -6
- package/components/button-base-C1ceE1LF.cjs +25 -0
- package/components/{button-base-B7v4eeRh.js → button-base-CDLQV7Vk.js} +5 -4
- package/components/button-group/index.cjs +1 -1
- package/components/button-group/index.js +8 -7
- package/components/checkbox/index.cjs +4 -4
- package/components/checkbox/index.js +4 -3
- package/components/{checkbox-mixin-BFGTmw17.js → checkbox-mixin-DXUIwtea.js} +11 -10
- package/components/{checkbox-mixin-DUhXwD46.cjs → checkbox-mixin-DaXMsrtV.cjs} +3 -3
- package/components/{clear-button-DgZmX5RX.js → clear-button-Dh2Mq0cc.js} +7 -6
- package/components/clear-button-pnT9_M8M.cjs +18 -0
- package/components/{close-button-CFHQnbsK.js → close-button-BsYkXOVh.js} +5 -4
- package/components/close-button-CPtjRQ0R.cjs +18 -0
- package/components/color-area/index.cjs +4 -4
- package/components/color-area/index.js +10 -9
- package/components/color-field/index.cjs +2 -2
- package/components/color-field/index.js +3 -2
- package/components/color-handle/index.cjs +2 -2
- package/components/color-handle/index.js +6 -5
- package/components/color-loupe/index.cjs +1 -1
- package/components/color-loupe/index.js +1 -1
- package/components/{color-loupe-DxcqXoJ6.js → color-loupe-BCfIVFkB.js} +4 -3
- package/components/color-loupe-DIBrhG1Y.cjs +56 -0
- package/components/color-menu/index.cjs +5 -5
- package/components/color-menu/index.js +6 -5
- package/components/color-picker/index.cjs +4 -4
- package/components/color-picker/index.js +10 -9
- package/components/color-slider/index.cjs +4 -4
- package/components/color-slider/index.js +6 -5
- package/components/{directive-helpers-nlQRAaQt.js → directive-helpers-BLDZnGQv.js} +1 -1
- package/components/{directive-helpers-TkFq2eZF.cjs → directive-helpers-C2vOfhFx.cjs} +1 -1
- package/components/divider/index.cjs +1 -1
- package/components/divider/index.js +6 -5
- package/components/field-group/index.cjs +1 -1
- package/components/field-group/index.js +1 -1
- package/components/{field-group-DAhrTCfl.js → field-group-CwZULltm.js} +6 -5
- package/components/field-group-eICRTHzI.cjs +23 -0
- package/components/field-label/index.cjs +1 -1
- package/components/field-label/index.js +1 -1
- package/components/{field-label-CAFfGxEL.js → field-label-C3HFlH91.js} +7 -6
- package/components/field-label-DOIVL4S4.cjs +25 -0
- package/components/{focusable-cj2QhwDT.js → focusable-zT9NFFYs.js} +1 -1
- package/components/{focusable-DGWL1v1p.cjs → focusable-zn6qaMtV.cjs} +1 -1
- package/components/icon/index.cjs +1 -1
- package/components/icon/index.js +5 -4
- package/components/{if-defined-BSAr_4u4.js → if-defined-CYpcjGCb.js} +1 -1
- package/components/{if-defined-B56xGmAg.cjs → if-defined-Cv6xanXh.cjs} +2 -2
- package/components/{index-DnWavOZD.cjs → index-BYumXRH5.cjs} +15 -15
- package/components/{index-CMvLpPKD.js → index-C2qG2Sm8.js} +8 -7
- package/components/index.cjs +1 -1
- package/components/index.js +16 -16
- package/components/infield-button/index.cjs +2 -2
- package/components/infield-button/index.js +4 -3
- package/components/label/index.cjs +1 -1
- package/components/label/index.js +5 -4
- package/components/{like-anchor-Bmabl9ra.cjs → like-anchor-CmIcmz5k.cjs} +4 -4
- package/components/{like-anchor-QBlvwFfT.js → like-anchor-DoJWh4Uu.js} +9 -8
- package/components/lit-html-B3ugcwD9.js +248 -0
- package/components/lit-html-p4Oxv2-5.cjs +24 -0
- package/components/{manage-help-text-OHXDgxyj.cjs → manage-help-text-BKlmmlgp.cjs} +2 -2
- package/components/{manage-help-text-Cozl9Sgn.js → manage-help-text-BzWK2v8i.js} +6 -6
- package/components/menu/index.cjs +1 -1
- package/components/menu/index.js +1 -1
- package/components/multi-language-field/index.cjs +2 -2
- package/components/multi-language-field/index.js +7 -6
- package/components/number-field/index.cjs +4 -4
- package/components/number-field/index.js +16 -15
- package/components/{observe-slot-text-ggb4kKgY.js → observe-slot-text-BG0H7bQK.js} +1 -1
- package/components/{observe-slot-text-CrYB2Pj-.cjs → observe-slot-text-CP_EB97X.cjs} +1 -1
- package/components/overlay/index.cjs +7 -7
- package/components/overlay/index.js +35 -33
- package/components/overlay-B1JDPmUJ.cjs +47 -0
- package/components/{overlay-CJ9by37f.js → overlay-D7EbnA6E.js} +9 -8
- package/components/{pending-state-Do522lTd.cjs → pending-state-BHCOneQ7.cjs} +2 -2
- package/components/{pending-state-TJj1x9xn.js → pending-state-DHXuiejX.js} +2 -2
- package/components/picker/index.cjs +1 -1
- package/components/picker/index.js +2 -2
- package/components/{picker-DDx8ii73.cjs → picker-CLKdhX0B.cjs} +25 -25
- package/components/{picker-833Apxe4.js → picker-ChtCbFLB.js} +21 -19
- package/components/popover/index.cjs +1 -1
- package/components/popover/index.js +1 -1
- package/components/popover-CdkB6GFb.cjs +30 -0
- package/components/{popover-DlkzrLpl.js → popover-bg0EQQ8p.js} +6 -5
- package/components/progress-circle/index.cjs +1 -1
- package/components/progress-circle/index.js +1 -1
- package/components/{progress-circle-Be24kv6B.js → progress-circle-BT2qW7LK.js} +6 -5
- package/components/progress-circle-DTeqfeun.cjs +33 -0
- package/components/radio/index.cjs +2 -2
- package/components/radio/index.js +7 -6
- package/components/search/index.cjs +8 -8
- package/components/search/index.js +4 -3
- package/components/{sized-mixin-D9LkrMjb.cjs → sized-mixin-BEemErtP.cjs} +1 -1
- package/components/{sized-mixin-BxMraZLS.js → sized-mixin-PyCYpyQq.js} +1 -1
- package/components/slider/index.cjs +1 -1
- package/components/slider/index.js +6 -5
- package/components/{state-CYxk12SV.js → state-BG4JQVA1.js} +1 -1
- package/components/{state-C5I1gP3G.cjs → state-DHaIxrnQ.cjs} +1 -1
- package/components/streaming-listener-BQxEN4sL.cjs +18 -0
- package/components/{streaming-listener-CCalHg57.js → streaming-listener-wjMvsv4N.js} +2 -2
- package/components/{style-map-uMq-yDJ3.cjs → style-map-BjBGQ_u3.cjs} +2 -2
- package/components/{style-map-Ct2LiEds.js → style-map-BqvQDFJt.js} +1 -1
- package/components/swatch/index.cjs +7 -7
- package/components/swatch/index.js +5 -4
- package/components/switch/index.cjs +2 -2
- package/components/switch/index.js +5 -4
- package/components/tags/index.cjs +4 -4
- package/components/tags/index.js +12 -11
- package/components/text-field/index.cjs +3 -3
- package/components/text-field/index.js +8 -7
- package/components/{text-field-CvKSS59x.js → text-field-7ITo3Lac.js} +29 -27
- package/components/{text-field-5_ev9way.cjs → text-field-CtUKbEQN.cjs} +15 -15
- package/components/toast/index.cjs +11 -11
- package/components/toast/index.js +5 -4
- package/components/tooltip/index.cjs +4 -4
- package/components/tooltip/index.js +6 -5
- package/components/unit-input/index.cjs +3 -3
- package/components/unit-input/index.js +6 -5
- package/components/utils.cjs +1 -1
- package/components/utils.js +4 -4
- package/package.json +3 -3
- package/components/action-group-Uimj-MJP.cjs +0 -20
- package/components/base-B7Pfl2if.cjs +0 -40
- package/components/base-CawdqE7p.js +0 -666
- package/components/button-base-DmjYs2s9.cjs +0 -25
- package/components/clear-button-KdrF2jaV.cjs +0 -18
- package/components/close-button-DVGUppyd.cjs +0 -18
- package/components/color-loupe-SskbNeMp.cjs +0 -56
- package/components/field-group-DSY2HUoj.cjs +0 -23
- package/components/field-label-CjsQ3ujK.cjs +0 -25
- package/components/overlay-Deh6Ki6I.cjs +0 -47
- package/components/popover-BGOgXaka.cjs +0 -30
- package/components/progress-circle-NNbCMK2i.cjs +0 -33
- package/components/streaming-listener-KVex1WWB.cjs +0 -18
|
@@ -15,18 +15,18 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../base-B7Pfl2if.cjs"),z=require("../query-assigned-nodes-BcKWmGzy.cjs"),g=require("../focus-group-DnxZUBhQ.cjs"),h=require("../sized-mixin-D9LkrMjb.cjs"),u=require("@luzmo/icons"),v=require("../when-CDZyJPvd.cjs"),p=require("../focusable-DGWL1v1p.cjs"),f=":host{--accordion-item-header-line-height: 1.25;--accordion-item-header-bottom-margin: 0px;--accordion-item-header-text-case: initial;--accordion-item-min-block-size: max( var(--luzmo-accordion-item-height, var(--accordion-item-height)), calc( var( --luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding) ) * 2 + var( --luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size) ) * var( --luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height) ) ) );margin:0;padding:0;list-style:none;display:block}:host:lang(ja),:host:lang(ko),:host:lang(zh){--luzmo-accordion-item-header-line-height: var( --luzmo-accordion-item-header-line-height-cjk );--luzmo-accordion-item-content-line-height: var( --luzmo-accordion-item-content-line-height-cjk )}:host:dir(rtl),:host([dir=rtl]){--luzmo-logical-rotation: matrix(-1, 0, 0, 1, 0, 0)}:host([size=s]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-2);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-header-vertical-padding: var(--luzmo-spacing-2)}:host{--accordion-item-height: 40px;--accordion-disclosure-indicator-height: var(--luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-2);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-xl);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xxl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([density=compact][size=s]){--accordion-item-height: 24px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-1)}:host([density=compact]){--accordion-item-height: 32px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-2)}:host([density=compact][size=l]){--accordion-item-height: 40px;--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([density=compact][size=xl]){--accordion-item-height: 48px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([density=spacious][size=s]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([density=spacious]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([density=spacious][size=l]){--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([density=spacious][size=xl]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([header-case=uppercase]){--accordion-item-header-text-case: uppercase}:host([header-case=uppercase][size=s]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([header-case=uppercase][size=l]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([header-case=uppercase][size=xl]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([variant=highlight]){--accordion-item-header-background-color: var( --luzmo-background-color-highlight );--accordion-item-disabled-background-color: var( --luzmo-background-color-highlight-disabled );--accordion-item-accordion-divider-thickness: 0px;--accordion-item-accordion-header-border-radius: var(--luzmo-border-radius)}:host([variant=highlight][size=s]){--accordion-item-height: 28px;--accordion-disclosure-indicator-height: var(luzmo-font-size-xs);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-header-font-size: var(--luzmo-font-size-s);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=s][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([variant=highlight]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-bottom-margin: var(--luzmo-spacing-3)}:host([variant=highlight][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([variant=highlight][size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-4);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-3) );--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=l][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([variant=highlight][size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-4);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-bottom-margin: var(--luzmo-spacing-4);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=xl][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([variant=highlight-child]){--accordion-item-header-background-color: var(--luzmo-background-color);--accordion-item-disabled-background-color: transparent;--accordion-item-accordion-divider-thickness: 0px;--accordion-item-accordion-header-border-radius: var(--luzmo-border-radius);--accordion-item-header-font-weight: normal;--accordion-item-content-border-left-width: var(--luzmo-border-width);--accordion-item-content-border-left-color: var(--luzmo-border-color);--accordion-item-content-border-left-style: solid;--accordion-edge-to-disclosure-indicator-space: 0px}:host([variant=highlight-child][size=s]){--accordion-item-height: 28px;--accordion-disclosure-indicator-height: var(luzmo-font-size-xs);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size-s);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-content-margin-left: var(--luzmo-spacing-2);--accordion-item-content-padding-left: var(--luzmo-spacing-4);--accordion-item-content-margin-bottom: var(--luzmo-spacing-2)}:host([variant=highlight-child][size=s][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([variant=highlight-child]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-bottom-margin: var(--luzmo-spacing-3);--accordion-item-content-margin-left: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-content-padding-left: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--accordion-item-content-margin-bottom: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([variant=highlight-child][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([variant=highlight-child][size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-3) );--accordion-item-content-margin-left: var(--luzmo-spacing-3);--accordion-item-content-padding-left: var(--luzmo-spacing-4);--accordion-item-content-margin-bottom: var(--luzmo-spacing-3)}:host([variant=highlight-child][size=l][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([variant=highlight-child][size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-bottom-margin: var(--luzmo-spacing-4);--accordion-item-content-margin-left: var(--luzmo-spacing-3);--accordion-item-content-padding-left: var(--luzmo-spacing-5);--accordion-item-content-margin-bottom: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight-child][size=xl][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([no-content-padding]),:host([no-content-padding][size=s]),:host([no-content-padding][size=l]),:host([no-content-padding][size=xl]){--accordion-item-edge-to-text: 0px}";var b=Object.defineProperty,d=(t,o,r,n)=>{for(var e=void 0,c=t.length-1,l;c>=0;c--)(l=t[c])&&(e=l(o,r,e)||e);return e&&b(o,r,e),e};class a extends h.SizedMixin(i.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.allowMultiple=!1,this.noContentPadding=!1,this.variant="default",this.focusGroupController=new g.FocusGroupController(this,{direction:"vertical",elements:()=>this.items,isFocusableElement:o=>!o.disabled})}static get styles(){return[i.r(f)]}get items(){return[...this.defaultNodes||[]].filter(o=>o.tagName!==void 0)}focus(){this.focusGroupController.focus()}onToggle(o){const r=o.target,n=[...this.items];if(n.includes(r)){if(this.allowMultiple||o.defaultPrevented||n&&n.length===0)return;n.forEach(e=>{e!==r&&(e.open=!1)})}}handleSlotchange(){this.focusGroupController.clearElementCache(),this.items.forEach(o=>{o.size=this.size})}updated(o){super.updated(o),o.has("size")&&(o.get("size")||this.size!=="m")&&this.items.forEach(r=>{r.size=this.size})}render(){return i.x`
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),r=require("../base-DzbGOAPo.cjs"),g=require("../query-assigned-nodes-BcKWmGzy.cjs"),v=require("../focus-group-DnxZUBhQ.cjs"),z=require("../sized-mixin-BEemErtP.cjs"),h=require("@luzmo/icons"),p=require("../when-CDZyJPvd.cjs"),f=require("../focusable-zn6qaMtV.cjs"),b=":host{--accordion-item-header-line-height: 1.25;--accordion-item-header-bottom-margin: 0px;--accordion-item-header-text-case: initial;--accordion-item-min-block-size: max( var(--luzmo-accordion-item-height, var(--accordion-item-height)), calc( var( --luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding) ) * 2 + var( --luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size) ) * var( --luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height) ) ) );margin:0;padding:0;list-style:none;display:block}:host:lang(ja),:host:lang(ko),:host:lang(zh){--luzmo-accordion-item-header-line-height: var( --luzmo-accordion-item-header-line-height-cjk );--luzmo-accordion-item-content-line-height: var( --luzmo-accordion-item-content-line-height-cjk )}:host:dir(rtl),:host([dir=rtl]){--luzmo-logical-rotation: matrix(-1, 0, 0, 1, 0, 0)}:host([size=s]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-2);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-header-vertical-padding: var(--luzmo-spacing-2)}:host{--accordion-item-height: 40px;--accordion-disclosure-indicator-height: var(--luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-2);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-xl);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xxl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([density=compact][size=s]){--accordion-item-height: 24px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-1)}:host([density=compact]){--accordion-item-height: 32px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-2)}:host([density=compact][size=l]){--accordion-item-height: 40px;--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([density=compact][size=xl]){--accordion-item-height: 48px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([density=spacious][size=s]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([density=spacious]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([density=spacious][size=l]){--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([density=spacious][size=xl]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([header-case=uppercase]){--accordion-item-header-text-case: uppercase}:host([header-case=uppercase][size=s]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([header-case=uppercase][size=l]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([header-case=uppercase][size=xl]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([variant=highlight]){--accordion-item-header-background-color: var( --luzmo-background-color-highlight );--accordion-item-disabled-background-color: var( --luzmo-background-color-highlight-disabled );--accordion-item-accordion-divider-thickness: 0px;--accordion-item-accordion-header-border-radius: var(--luzmo-border-radius)}:host([variant=highlight][size=s]){--accordion-item-height: 28px;--accordion-disclosure-indicator-height: var(luzmo-font-size-xs);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-header-font-size: var(--luzmo-font-size-s);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=s][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([variant=highlight]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-bottom-margin: var(--luzmo-spacing-3)}:host([variant=highlight][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([variant=highlight][size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-4);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-3) );--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=l][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([variant=highlight][size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-4);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-bottom-margin: var(--luzmo-spacing-4);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=xl][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([variant=highlight-child]){--accordion-item-header-background-color: var(--luzmo-background-color);--accordion-item-disabled-background-color: transparent;--accordion-item-accordion-divider-thickness: 0px;--accordion-item-accordion-header-border-radius: var(--luzmo-border-radius);--accordion-item-header-font-weight: normal;--accordion-item-content-border-left-width: var(--luzmo-border-width);--accordion-item-content-border-left-color: var(--luzmo-border-color);--accordion-item-content-border-left-style: solid;--accordion-edge-to-disclosure-indicator-space: 0px}:host([variant=highlight-child][size=s]){--accordion-item-height: 28px;--accordion-disclosure-indicator-height: var(luzmo-font-size-xs);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size-s);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-content-margin-left: var(--luzmo-spacing-2);--accordion-item-content-padding-left: var(--luzmo-spacing-4);--accordion-item-content-margin-bottom: var(--luzmo-spacing-2)}:host([variant=highlight-child][size=s][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([variant=highlight-child]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-bottom-margin: var(--luzmo-spacing-3);--accordion-item-content-margin-left: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-content-padding-left: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--accordion-item-content-margin-bottom: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([variant=highlight-child][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([variant=highlight-child][size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-3) );--accordion-item-content-margin-left: var(--luzmo-spacing-3);--accordion-item-content-padding-left: var(--luzmo-spacing-4);--accordion-item-content-margin-bottom: var(--luzmo-spacing-3)}:host([variant=highlight-child][size=l][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([variant=highlight-child][size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-bottom-margin: var(--luzmo-spacing-4);--accordion-item-content-margin-left: var(--luzmo-spacing-3);--accordion-item-content-padding-left: var(--luzmo-spacing-5);--accordion-item-content-margin-bottom: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight-child][size=xl][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([no-content-padding]),:host([no-content-padding][size=s]),:host([no-content-padding][size=l]),:host([no-content-padding][size=xl]){--accordion-item-edge-to-text: 0px}";var x=Object.defineProperty,d=(t,o,i,n)=>{for(var e=void 0,c=t.length-1,l;c>=0;c--)(l=t[c])&&(e=l(o,i,e)||e);return e&&x(o,i,e),e};class a extends z.SizedMixin(r.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.allowMultiple=!1,this.noContentPadding=!1,this.variant="default",this.focusGroupController=new v.FocusGroupController(this,{direction:"vertical",elements:()=>this.items,isFocusableElement:o=>!o.disabled})}static get styles(){return[s.unsafeCSS(b)]}get items(){return[...this.defaultNodes||[]].filter(o=>o.tagName!==void 0)}focus(){this.focusGroupController.focus()}onToggle(o){const i=o.target,n=[...this.items];if(n.includes(i)){if(this.allowMultiple||o.defaultPrevented||n&&n.length===0)return;n.forEach(e=>{e!==i&&(e.open=!1)})}}handleSlotchange(){this.focusGroupController.clearElementCache(),this.items.forEach(o=>{o.size=this.size})}updated(o){super.updated(o),o.has("size")&&(o.get("size")||this.size!=="m")&&this.items.forEach(i=>{i.size=this.size})}render(){return s.html`
|
|
19
19
|
<slot
|
|
20
20
|
@slotchange=${this.handleSlotchange}
|
|
21
21
|
@luzmo-accordion-item-toggle=${this.onToggle}
|
|
22
22
|
></slot>
|
|
23
|
-
`}}d([
|
|
23
|
+
`}}d([r.n({type:Boolean,reflect:!0,attribute:"allow-multiple"})],a.prototype,"allowMultiple");d([r.n({type:String,reflect:!0})],a.prototype,"density");d([r.n({type:String,reflect:!0,attribute:"header-case"})],a.prototype,"headerCase");d([r.n({type:Boolean,reflect:!0,attribute:"no-content-padding"})],a.prototype,"noContentPadding");d([r.n({type:String,reflect:!0})],a.prototype,"variant");d([g.n()],a.prototype,"defaultNodes");const y=':host{z-index:inherit;min-block-size:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));min-inline-size:var(--luzmo-accordion-item-width, 200px);border-block-end:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)));margin:0;position:relative}:host(:first-child){border-block-start:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)))}#heading{box-sizing:border-box;min-height:var(--luzmo-accordion-item-height, var(--accordion-item-height));font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));margin:0;margin-block:0;position:relative;margin-bottom:var(--luzmo-accordion-item-header-bottom-margin, var(--accordion-item-header-bottom-margin, 0px))}.icon-container{z-index:1;pointer-events:none;inline-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));font-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color-hard));justify-content:center;align-items:center;padding-inline-start:var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 0px));display:flex;position:absolute;height:100%}.icon-container:dir(rtl),:host([dir=rtl]) .icon-container{transform:scaleX(-1)}#content{padding-block:var(--luzmo-accordion-item-content-area-top-to-content, 8px) var(--luzmo-accordion-item-content-area-bottom-to-content, 16px);padding-left:calc(var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3))) + var(--luzmo-accordion-item-content-padding-left, var(--accordion-item-content-padding-left, 0px)));margin-bottom:var(--luzmo-accordion-item-content-margin-bottom, var(--accordion-item-content-margin-bottom, 0px));margin-left:var(--luzmo-accordion-item-content-margin-left, var(--accordion-item-content-margin-left, 0px));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3)));border-left:var(--luzmo-accordion-item-content-border-left-width, var(--accordion-item-content-border-left-width, 0)) var(--luzmo-accordion-item-content-border-left-style, var(--accordion-item-content-border-left-style, solid)) var(--luzmo-accordion-item-content-border-left-color, var(--accordion-item-content-border-left-color, var(--luzmo-border-color)));color:var(--luzmo-accordion-item-content-color, var(--luzmo-font-color));font-weight:var(--luzmo-accordion-item-content-font-weight, var(--accordion-item-content-font-weight, var(--luzmo-font-weight)));font-style:var(--luzmo-accordion-item-content-font-style, var(--luzmo-font-style));font-size:var(--luzmo-accordion-item-content-font-size, var(--accordion-item-content-font-size, var(--luzmo-font-size)));font-family:var(--luzmo-accordion-item-content-font-family, var(--luzmo-font-family));line-height:var(--luzmo-accordion-item-content-line-height, 1.3);display:none}#header{box-sizing:border-box;min-height:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));line-height:var(--luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height, 1.25));text-overflow:ellipsis;text-transform:var(--luzmo-accordion-item-header-text-case, var(--accordion-item-header-text-case));cursor:pointer;font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));font-weight:var(--luzmo-accordion-item-header-font-weight, var(--accordion-item-header-font-weight, 600));font-style:var(--luzmo-accordion-item-header-font-style, var(--luzmo-font-style));font-family:var(--luzmo-accordion-item-header-font-family, var(--luzmo-font-family));-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start;width:100%;color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color));background-color:var(--luzmo-accordion-item-header-background-color, var(--accordion-item-header-background-color, var(--luzmo-background-color)));border:0;padding-top:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-left:calc(var(--luzmo-accordion-disclosure-indicator-to-text-space, var(--accordion-disclosure-indicator-to-text-space, 0px)) + var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height, 32px)) + var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 32px)));padding-bottom:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, 0px));position:relative;border-radius:var(--luzmo-accordion-item-accordion-header-border-radius, var(--accordion-item-accordion-header-border-radius))}#header:focus{outline:none}#header:focus:after{content:"";position:absolute;inset-inline-start:0}#header:focus-visible{border-radius:var(--luzmo-accordion-corner-radius, var(--accordion-item-accordion-header-border-radius, var(--luzmo-border-radius-s)));outline:var(--luzmo-accordion-focus-indicator-width, var(--luzmo-border-width)) solid var(--luzmo-accordion-focus-indicator-color, var(--luzmo-primary));background-color:var(--luzmo-accordion-background-color-key-focus, var(--accordion-item-header-background-color, var(--luzmo-background-color-hover)));color:var(--luzmo-accordion-item-header-color-key-focus, var(--luzmo-font-color-hard));outline-offset:calc(var(--luzmo-accordion-focus-indicator-gap, 2px) * -1)}#header:active{background-color:var(--luzmo-accordion-background-color-down, var(--accordion-item-header-background-color, var(--luzmo-background-hover)));color:var(--luzmo-accordion-item-header-color-down, var(--luzmo-font-color-hard))}:host([disabled]) #header,:host([disabled]) #header:focus-visible{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled));background-color:var(--luzmo-accordion-item-disabled-background-color, var(--accordion-item-disabled-background-color, initial))}@media (hover: hover){#header:hover{background-color:var(--luzmo-accordion-background-color-hover, var(--accordion-item-header-background-color, var(--luzmo-background-color-hover)))}:host([disabled]) #header:hover{background-color:var(--luzmo-accordion-item-disabled-background-color, var(--accordion-item-disabled-background-color, initial))}#header:hover,#header:hover+.icon-container{color:var(--luzmo-accordion-item-header-color-hover, var(--luzmo-font-color-hard))}:host([open]) #header:hover{background-color:var(--luzmo-accordion-background-color-hover, var(--accordion-item-header-background-color, var(--luzmo-background-color)))}:host([disabled]) #header:hover{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled))}}:host([disabled]) #header+.icon-container{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled))}:host([disabled]) #content{color:var(--luzmo-accordion-item-content-disabled-color, var(--luzmo-color-disabled))}:host([open])>#heading>.icon-container>.indicator,:host([open])>.icon-container>.indicator{transform:var(--luzmo-logical-rotation) rotate(90deg);transform:rotate(90deg)}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}@media (forced-colors: active){#header:after{forced-color-adjust:none;content:"";position:absolute;inset-inline-start:0}}:host{display:block}#heading{height:auto;position:relative}:host([disabled]) #heading .indicator{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled))}';var k=Object.defineProperty,u=(t,o,i,n)=>{for(var e=void 0,c=t.length-1,l;c>=0;c--)(l=t[c])&&(e=l(o,i,e)||e);return e&&k(o,i,e),e};const w=()=>s.html`
|
|
24
24
|
<div class="icon-container">
|
|
25
|
-
${
|
|
25
|
+
${h.luzmoIcon(h.luzmoAngleRight,{className:"indicator"})}
|
|
26
26
|
</div>
|
|
27
|
-
`;class
|
|
27
|
+
`;class m extends z.SizedMixin(f.Focusable,{noDefaultSize:!0}){constructor(){super(...arguments),this.open=!1,this.label="",this.disabled=!1,this.renderAngleIcon=()=>w()}static get styles(){return[s.unsafeCSS(y)]}get focusElement(){return this.renderRoot.querySelector("#header")}onClick(){this.disabled||this.toggle()}toggle(){this.open=!this.open,this.dispatchEvent(new CustomEvent("luzmo-accordion-item-toggle",{bubbles:!0,composed:!0,cancelable:!0}))||(this.open=!this.open)}render(){return s.html`
|
|
28
28
|
<h3 id="heading">
|
|
29
|
-
${
|
|
29
|
+
${p.n(this.size,this.renderAngleIcon)}
|
|
30
30
|
<button
|
|
31
31
|
id="header"
|
|
32
32
|
@click=${this.onClick}
|
|
@@ -40,4 +40,4 @@
|
|
|
40
40
|
<div id="content" role="region" aria-labelledby="header">
|
|
41
41
|
<slot></slot>
|
|
42
42
|
</div>
|
|
43
|
-
`}updated(o){super.updated(o),o.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}
|
|
43
|
+
`}updated(o){super.updated(o),o.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}u([r.n({type:Boolean,reflect:!0})],m.prototype,"open");u([r.n({type:String,reflect:!0})],m.prototype,"label");u([r.n({type:Boolean,reflect:!0})],m.prototype,"disabled");customElements.get("luzmo-accordion-item")||customElements.define("luzmo-accordion-item",m);customElements.get("luzmo-accordion")||customElements.define("luzmo-accordion",a);exports.LuzmoAccordion=a;exports.LuzmoAccordionItem=m;
|
|
@@ -15,13 +15,14 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import {
|
|
18
|
+
import { unsafeCSS as h, html as m } from "lit";
|
|
19
|
+
import { a as v, n as a } from "../base-DNrOP9L3.js";
|
|
19
20
|
import { n as p } from "../query-assigned-nodes-C76XVPWY.js";
|
|
20
21
|
import { F as f } from "../focus-group-DHeTq18L.js";
|
|
21
|
-
import { S as z } from "../sized-mixin-
|
|
22
|
+
import { S as z } from "../sized-mixin-PyCYpyQq.js";
|
|
22
23
|
import { luzmoIcon as b, luzmoAngleRight as x } from "@luzmo/icons";
|
|
23
24
|
import { n as y } from "../when-CDK1Tt5Y.js";
|
|
24
|
-
import { F as k } from "../focusable-
|
|
25
|
+
import { F as k } from "../focusable-zT9NFFYs.js";
|
|
25
26
|
const g = () => {
|
|
26
27
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
27
28
|
const i = document.createElement("style");
|
|
@@ -30,10 +31,10 @@ const g = () => {
|
|
|
30
31
|
};
|
|
31
32
|
g();
|
|
32
33
|
const w = ":host{--accordion-item-header-line-height: 1.25;--accordion-item-header-bottom-margin: 0px;--accordion-item-header-text-case: initial;--accordion-item-min-block-size: max( var(--luzmo-accordion-item-height, var(--accordion-item-height)), calc( var( --luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding) ) * 2 + var( --luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size) ) * var( --luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height) ) ) );margin:0;padding:0;list-style:none;display:block}:host:lang(ja),:host:lang(ko),:host:lang(zh){--luzmo-accordion-item-header-line-height: var( --luzmo-accordion-item-header-line-height-cjk );--luzmo-accordion-item-content-line-height: var( --luzmo-accordion-item-content-line-height-cjk )}:host:dir(rtl),:host([dir=rtl]){--luzmo-logical-rotation: matrix(-1, 0, 0, 1, 0, 0)}:host([size=s]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-2);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-header-vertical-padding: var(--luzmo-spacing-2)}:host{--accordion-item-height: 40px;--accordion-disclosure-indicator-height: var(--luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-2);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(--luzmo-font-size-xl);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xxl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([density=compact][size=s]){--accordion-item-height: 24px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-1)}:host([density=compact]){--accordion-item-height: 32px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-2)}:host([density=compact][size=l]){--accordion-item-height: 40px;--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([density=compact][size=xl]){--accordion-item-height: 48px;--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([density=spacious][size=s]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-3)}:host([density=spacious]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([density=spacious][size=l]){--accordion-item-header-vertical-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([density=spacious][size=xl]){--accordion-item-header-vertical-padding: var(--luzmo-spacing-4)}:host([header-case=uppercase]){--accordion-item-header-text-case: uppercase}:host([header-case=uppercase][size=s]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([header-case=uppercase][size=l]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([header-case=uppercase][size=xl]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([variant=highlight]){--accordion-item-header-background-color: var( --luzmo-background-color-highlight );--accordion-item-disabled-background-color: var( --luzmo-background-color-highlight-disabled );--accordion-item-accordion-divider-thickness: 0px;--accordion-item-accordion-header-border-radius: var(--luzmo-border-radius)}:host([variant=highlight][size=s]){--accordion-item-height: 28px;--accordion-disclosure-indicator-height: var(luzmo-font-size-xs);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-3);--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-header-font-size: var(--luzmo-font-size-s);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=s][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([variant=highlight]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-bottom-margin: var(--luzmo-spacing-3)}:host([variant=highlight][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([variant=highlight][size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-4);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-3) );--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=l][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([variant=highlight][size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: var(--luzmo-spacing-4);--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-bottom-margin: var(--luzmo-spacing-4);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight][size=xl][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([variant=highlight-child]){--accordion-item-header-background-color: var(--luzmo-background-color);--accordion-item-disabled-background-color: transparent;--accordion-item-accordion-divider-thickness: 0px;--accordion-item-accordion-header-border-radius: var(--luzmo-border-radius);--accordion-item-header-font-weight: normal;--accordion-item-content-border-left-width: var(--luzmo-border-width);--accordion-item-content-border-left-color: var(--luzmo-border-color);--accordion-item-content-border-left-style: solid;--accordion-edge-to-disclosure-indicator-space: 0px}:host([variant=highlight-child][size=s]){--accordion-item-height: 28px;--accordion-disclosure-indicator-height: var(luzmo-font-size-xs);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: var(--luzmo-spacing-2);--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size-s);--accordion-item-content-font-size: var(--luzmo-font-size-s);--accordion-item-content-margin-left: var(--luzmo-spacing-2);--accordion-item-content-padding-left: var(--luzmo-spacing-4);--accordion-item-content-margin-bottom: var(--luzmo-spacing-2)}:host([variant=highlight-child][size=s][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-xs)}:host([variant=highlight-child]){--accordion-item-height: 32px;--accordion-disclosure-indicator-height: var(luzmo-font-size-s);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-3);--accordion-item-header-font-size: var(--luzmo-font-size);--accordion-item-content-font-size: var(--luzmo-font-size);--accordion-item-header-bottom-margin: var(--luzmo-spacing-3);--accordion-item-content-margin-left: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-content-padding-left: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--accordion-item-content-margin-bottom: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([variant=highlight-child][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-s)}:host([variant=highlight-child][size=l]){--accordion-item-height: 48px;--accordion-disclosure-indicator-height: var(luzmo-font-size);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-l);--accordion-item-content-font-size: var(--luzmo-font-size-l);--accordion-item-header-bottom-margin: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-3) );--accordion-item-content-margin-left: var(--luzmo-spacing-3);--accordion-item-content-padding-left: var(--luzmo-spacing-4);--accordion-item-content-margin-bottom: var(--luzmo-spacing-3)}:host([variant=highlight-child][size=l][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size)}:host([variant=highlight-child][size=xl]){--accordion-item-height: 56px;--accordion-disclosure-indicator-height: var(luzmo-font-size-l);--accordion-edge-to-disclosure-indicator-space: 0px;--accordion-disclosure-indicator-to-text-space: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--accordion-item-edge-to-text: var(--luzmo-spacing-4);--accordion-item-header-font-size: var(--luzmo-font-size-xl);--accordion-item-content-font-size: var(--luzmo-font-size-xl);--accordion-item-header-bottom-margin: var(--luzmo-spacing-4);--accordion-item-content-margin-left: var(--luzmo-spacing-3);--accordion-item-content-padding-left: var(--luzmo-spacing-5);--accordion-item-content-margin-bottom: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([variant=highlight-child][size=xl][header-case=uppercase]){--accordion-item-header-font-size: var(--luzmo-font-size-l)}:host([no-content-padding]),:host([no-content-padding][size=s]),:host([no-content-padding][size=l]),:host([no-content-padding][size=xl]){--accordion-item-edge-to-text: 0px}";
|
|
33
|
-
var
|
|
34
|
+
var S = Object.defineProperty, d = (i, o, r, n) => {
|
|
34
35
|
for (var e = void 0, t = i.length - 1, l; t >= 0; t--)
|
|
35
36
|
(l = i[t]) && (e = l(o, r, e) || e);
|
|
36
|
-
return e &&
|
|
37
|
+
return e && S(o, r, e), e;
|
|
37
38
|
};
|
|
38
39
|
class c extends z(v, {
|
|
39
40
|
noDefaultSize: !0
|
|
@@ -106,7 +107,7 @@ d([
|
|
|
106
107
|
d([
|
|
107
108
|
p()
|
|
108
109
|
], c.prototype, "defaultNodes");
|
|
109
|
-
const
|
|
110
|
+
const C = ':host{z-index:inherit;min-block-size:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));min-inline-size:var(--luzmo-accordion-item-width, 200px);border-block-end:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)));margin:0;position:relative}:host(:first-child){border-block-start:1px solid rgba(0,0,0,0);border-color:var(--luzmo-accordion-divider-color, var(--luzmo-border-color));border-width:var(--luzmo-accordion-divider-thickness, var(--accordion-item-accordion-divider-thickness, var(--luzmo-border-width)))}#heading{box-sizing:border-box;min-height:var(--luzmo-accordion-item-height, var(--accordion-item-height));font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));margin:0;margin-block:0;position:relative;margin-bottom:var(--luzmo-accordion-item-header-bottom-margin, var(--accordion-item-header-bottom-margin, 0px))}.icon-container{z-index:1;pointer-events:none;inline-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));font-size:var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height));color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color-hard));justify-content:center;align-items:center;padding-inline-start:var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 0px));display:flex;position:absolute;height:100%}.icon-container:dir(rtl),:host([dir=rtl]) .icon-container{transform:scaleX(-1)}#content{padding-block:var(--luzmo-accordion-item-content-area-top-to-content, 8px) var(--luzmo-accordion-item-content-area-bottom-to-content, 16px);padding-left:calc(var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3))) + var(--luzmo-accordion-item-content-padding-left, var(--accordion-item-content-padding-left, 0px)));margin-bottom:var(--luzmo-accordion-item-content-margin-bottom, var(--accordion-item-content-margin-bottom, 0px));margin-left:var(--luzmo-accordion-item-content-margin-left, var(--accordion-item-content-margin-left, 0px));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, var(--luzmo-spacing-3)));border-left:var(--luzmo-accordion-item-content-border-left-width, var(--accordion-item-content-border-left-width, 0)) var(--luzmo-accordion-item-content-border-left-style, var(--accordion-item-content-border-left-style, solid)) var(--luzmo-accordion-item-content-border-left-color, var(--accordion-item-content-border-left-color, var(--luzmo-border-color)));color:var(--luzmo-accordion-item-content-color, var(--luzmo-font-color));font-weight:var(--luzmo-accordion-item-content-font-weight, var(--accordion-item-content-font-weight, var(--luzmo-font-weight)));font-style:var(--luzmo-accordion-item-content-font-style, var(--luzmo-font-style));font-size:var(--luzmo-accordion-item-content-font-size, var(--accordion-item-content-font-size, var(--luzmo-font-size)));font-family:var(--luzmo-accordion-item-content-font-family, var(--luzmo-font-family));line-height:var(--luzmo-accordion-item-content-line-height, 1.3);display:none}#header{box-sizing:border-box;min-height:var(--luzmo-accordion-item-min-block-size, var(--accordion-item-min-block-size));line-height:var(--luzmo-accordion-item-header-line-height, var(--accordion-item-header-line-height, 1.25));text-overflow:ellipsis;text-transform:var(--luzmo-accordion-item-header-text-case, var(--accordion-item-header-text-case));cursor:pointer;font-size:var(--luzmo-accordion-item-header-font-size, var(--accordion-item-header-font-size, 18px));font-weight:var(--luzmo-accordion-item-header-font-weight, var(--accordion-item-header-font-weight, 600));font-style:var(--luzmo-accordion-item-header-font-style, var(--luzmo-font-style));font-family:var(--luzmo-accordion-item-header-font-family, var(--luzmo-font-family));-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start;width:100%;color:var(--luzmo-accordion-item-header-color-default, var(--luzmo-font-color));background-color:var(--luzmo-accordion-item-header-background-color, var(--accordion-item-header-background-color, var(--luzmo-background-color)));border:0;padding-top:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-left:calc(var(--luzmo-accordion-disclosure-indicator-to-text-space, var(--accordion-disclosure-indicator-to-text-space, 0px)) + var(--luzmo-accordion-disclosure-indicator-height, var(--accordion-disclosure-indicator-height, 32px)) + var(--luzmo-accordion-edge-to-disclosure-indicator-space, var(--accordion-edge-to-disclosure-indicator-space, 32px)));padding-bottom:var(--luzmo-accordion-item-header-vertical-padding, var(--accordion-item-header-vertical-padding, var(--luzmo-spacing-3)));padding-right:var(--luzmo-accordion-item-edge-to-text, var(--accordion-item-edge-to-text, 0px));position:relative;border-radius:var(--luzmo-accordion-item-accordion-header-border-radius, var(--accordion-item-accordion-header-border-radius))}#header:focus{outline:none}#header:focus:after{content:"";position:absolute;inset-inline-start:0}#header:focus-visible{border-radius:var(--luzmo-accordion-corner-radius, var(--accordion-item-accordion-header-border-radius, var(--luzmo-border-radius-s)));outline:var(--luzmo-accordion-focus-indicator-width, var(--luzmo-border-width)) solid var(--luzmo-accordion-focus-indicator-color, var(--luzmo-primary));background-color:var(--luzmo-accordion-background-color-key-focus, var(--accordion-item-header-background-color, var(--luzmo-background-color-hover)));color:var(--luzmo-accordion-item-header-color-key-focus, var(--luzmo-font-color-hard));outline-offset:calc(var(--luzmo-accordion-focus-indicator-gap, 2px) * -1)}#header:active{background-color:var(--luzmo-accordion-background-color-down, var(--accordion-item-header-background-color, var(--luzmo-background-hover)));color:var(--luzmo-accordion-item-header-color-down, var(--luzmo-font-color-hard))}:host([disabled]) #header,:host([disabled]) #header:focus-visible{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled));background-color:var(--luzmo-accordion-item-disabled-background-color, var(--accordion-item-disabled-background-color, initial))}@media (hover: hover){#header:hover{background-color:var(--luzmo-accordion-background-color-hover, var(--accordion-item-header-background-color, var(--luzmo-background-color-hover)))}:host([disabled]) #header:hover{background-color:var(--luzmo-accordion-item-disabled-background-color, var(--accordion-item-disabled-background-color, initial))}#header:hover,#header:hover+.icon-container{color:var(--luzmo-accordion-item-header-color-hover, var(--luzmo-font-color-hard))}:host([open]) #header:hover{background-color:var(--luzmo-accordion-background-color-hover, var(--accordion-item-header-background-color, var(--luzmo-background-color)))}:host([disabled]) #header:hover{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled))}}:host([disabled]) #header+.icon-container{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled))}:host([disabled]) #content{color:var(--luzmo-accordion-item-content-disabled-color, var(--luzmo-color-disabled))}:host([open])>#heading>.icon-container>.indicator,:host([open])>.icon-container>.indicator{transform:var(--luzmo-logical-rotation) rotate(90deg);transform:rotate(90deg)}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}@media (forced-colors: active){#header:after{forced-color-adjust:none;content:"";position:absolute;inset-inline-start:0}}:host{display:block}#heading{height:auto;position:relative}:host([disabled]) #heading .indicator{color:var(--luzmo-accordion-item-header-disabled-color, var(--luzmo-color-disabled))}';
|
|
110
111
|
var E = Object.defineProperty, u = (i, o, r, n) => {
|
|
111
112
|
for (var e = void 0, t = i.length - 1, l; t >= 0; t--)
|
|
112
113
|
(l = i[t]) && (e = l(o, r, e) || e);
|
|
@@ -124,7 +125,7 @@ class s extends z(k, {
|
|
|
124
125
|
super(...arguments), this.open = !1, this.label = "", this.disabled = !1, this.renderAngleIcon = () => $();
|
|
125
126
|
}
|
|
126
127
|
static get styles() {
|
|
127
|
-
return [h(
|
|
128
|
+
return [h(C)];
|
|
128
129
|
}
|
|
129
130
|
get focusElement() {
|
|
130
131
|
return this.renderRoot.querySelector("#header");
|
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("lit"),t=require("../base-DzbGOAPo.cjs"),b=require("../if-defined-Cv6xanXh.cjs"),p=require("../focus-visible-B0P9aY_G.cjs");require("../action-group-BBoV2VL9.cjs");require("../close-button-CPtjRQ0R.cjs");require("../field-label-DOIVL4S4.cjs");require("../popover-CdkB6GFb.cjs");const m="@media (forced-colors: active){:host,:host([emphasized]) #popover{--highcontrast-action-bar-popover-border-color: CanvasText}}:host{padding:0 var(--luzmo-action-bar-spacing-outer-edge, var(--action-bar-spacing-outer-edge));z-index:1;box-sizing:border-box;pointer-events:none;block-size:0;opacity:0;inset-block-end:0}:host([open]){block-size:calc(var(--luzmo-action-bar-spacing-outer-edge, var(--action-bar-spacing-outer-edge)) + var(--luzmo-action-bar-height, var(--action-bar-height)));opacity:1}#popover{block-size:var(--luzmo-action-bar-height, var(--action-bar-height));box-sizing:border-box;inline-size:100%;border-radius:var(--luzmo-action-bar-corner-radius, var(--action-bar-corner-radius));border-color:var(--highcontrast-action-bar-popover-border-color, var(--luzmo-action-bar-popover-border-color, var(--action-bar-popover-border-color)));background-color:var(--luzmo-action-bar-popover-background-color, var(--action-bar-popover-background-color));filter:drop-shadow(var(--luzmo-action-bar-shadow-horizontal, var(--action-bar-shadow-horizontal)) var(--luzmo-action-bar-shadow-vertical, var(--action-bar-shadow-vertical)) var(--luzmo-action-bar-shadow-blur, var(--action-bar-shadow-blur)) var(--luzmo-action-bar-shadow-color, var(--action-bar-shadow-color)));pointer-events:auto;flex-direction:row;margin:auto;padding-block:0;display:flex;position:relative}.close-button{flex-shrink:0;margin-block-start:var(--luzmo-action-bar-spacing-close-button-top, var(--action-bar-spacing-close-button-top));margin-inline-start:var(--luzmo-action-bar-spacing-close-button-start, var(--action-bar-spacing-close-button-start));margin-inline-end:var(--luzmo-action-bar-spacing-close-button-end, var(--action-bar-spacing-close-button-end))}.field-label{font-size:var(--luzmo-action-bar-item-counter-font-size, var(--action-bar-item-counter-font-size));color:var(--luzmo-action-bar-item-counter-color, var(--action-bar-item-counter-color));line-height:var(--luzmo-action-bar-item-counter-line-height, var(--action-bar-item-counter-line-height));margin-block-start:var(--luzmo-action-bar-spacing-item-counter-top, var(--action-bar-spacing-item-counter-top));margin-inline-end:var(--luzmo-action-bar-spacing-item-counter-end, var(--action-bar-spacing-item-counter-end));padding:0}.field-label:lang(ja),.field-label:lang(ko),.field-label:lang(zh){line-height:var(--luzmo-action-bar-item-counter-line-height-cjk, var(--action-bar-item-counter-line-height-cjk))}.action-group{margin-block-start:var(--luzmo-action-bar-spacing-action-group-top, var(--action-bar-spacing-action-group-top));margin-inline-start:auto;margin-inline-end:var(--luzmo-action-bar-spacing-action-group-end, var(--action-bar-spacing-action-group-end))}:host([emphasized]) #popover{filter:none;background-color:var(--luzmo-action-bar-emphasized-background-color, var(--action-bar-emphasized-background-color));border-color:#0000}:host([emphasized]) .field-label{color:var(--luzmo-action-bar-emphasized-item-counter-color, var(--action-bar-emphasized-item-counter-color))}:host([variant=sticky]){position:sticky;inset-inline:0}:host([variant=fixed]){position:fixed}:host([flexible]) #popover{inline-size:auto}:host{--action-bar-height: var(--luzmo-component-height-xl);--action-bar-corner-radius: var(--luzmo-border-radius);--action-bar-item-counter-font-size: var(--luzmo-font-size);--action-bar-item-counter-line-height: var(--luzmo-line-height);--action-bar-item-counter-color: var(--luzmo-font-color);--action-bar-item-counter-line-height-cjk: 1.5;--action-bar-popover-background-color: var(--luzmo-background-color);--action-bar-popover-border-color: var(--luzmo-border-color);--action-bar-emphasized-background-color: var(--luzmo-primary);--action-bar-emphasized-item-counter-color: var( --luzmo-primary-inverse-color );--action-bar-spacing-outer-edge: var(-luzmo-spacing-5);--action-bar-spacing-close-button-top: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-close-button-start: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-close-button-end: var(--luzmo-spacing-3);--action-bar-spacing-item-counter-top: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--action-bar-spacing-item-counter-end: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-3) );--action-bar-spacing-action-group-top: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-spacing-action-group-end: calc( var(--luzmo-spacing-3) - var(--luzmo-border-width) );--action-bar-shadow-horizontal: 0;--action-bar-shadow-vertical: 1px;--action-bar-shadow-blur: 4px;--action-bar-shadow-color: var(--luzmo-border-color)}:host{display:block}:host([flexible]){display:inline-block}";var v=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(n,o,c,e)=>{for(var a=e>1?void 0:e?d(o,c):o,l=n.length-1,s;l>=0;l--)(s=n[l])&&(a=(e?s(o,c,a):s(a))||a);return e&&a&&v(o,c,a),a};const h=["sticky","fixed"];class r extends p.FocusVisiblePolyfillMixin(t.LuzmoElement){constructor(){super(...arguments),this.emphasized=!1,this.flexible=!1,this.open=!1,this._variant=""}static get styles(){return[u.unsafeCSS(m)]}set variant(o){if(o!==this.variant){if(h.includes(o)){this.setAttribute("variant",o),this._variant=o;return}this.removeAttribute("variant"),this._variant=""}}get variant(){return this._variant}handleClick(){this.open=!1,this.dispatchEvent(new Event("close",{bubbles:!0,composed:!0,cancelable:!0}))||(this.open=!0)}render(){return u.html`
|
|
19
19
|
<luzmo-popover ?open=${this.open} id="popover">
|
|
20
20
|
<slot name="override">
|
|
21
21
|
<luzmo-close-button
|
|
22
|
-
static-color=${
|
|
22
|
+
static-color=${b.o(this.emphasized?"white":void 0)}
|
|
23
23
|
class="close-button"
|
|
24
24
|
label="Clear selection"
|
|
25
25
|
@click=${this.handleClick}
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
<luzmo-action-group
|
|
31
31
|
class="action-group"
|
|
32
32
|
quiet
|
|
33
|
-
static-color=${
|
|
33
|
+
static-color=${b.o(this.emphasized?"white":void 0)}
|
|
34
34
|
>
|
|
35
35
|
<slot name="buttons"></slot>
|
|
36
36
|
</luzmo-action-group>
|
|
37
37
|
</slot>
|
|
38
38
|
</luzmo-popover>
|
|
39
|
-
`}}i([
|
|
39
|
+
`}}i([t.n({type:Boolean,reflect:!0})],r.prototype,"emphasized",2);i([t.n({type:Boolean,reflect:!0})],r.prototype,"flexible",2);i([t.n({type:Boolean,reflect:!0})],r.prototype,"open",2);i([t.n({type:String})],r.prototype,"variant",1);customElements.get("luzmo-action-bar")||customElements.define("luzmo-action-bar",r);exports.LuzmoActionBar=r;
|
|
@@ -15,13 +15,14 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
18
|
+
import { unsafeCSS as b, html as p } from "lit";
|
|
19
|
+
import { a as d, n as t } from "../base-DNrOP9L3.js";
|
|
20
|
+
import { o as s } from "../if-defined-CYpcjGCb.js";
|
|
20
21
|
import { F as z } from "../focus-visible-DBlJGoEW.js";
|
|
21
|
-
import "../action-group-
|
|
22
|
-
import "../close-button-
|
|
23
|
-
import "../field-label-
|
|
24
|
-
import "../popover-
|
|
22
|
+
import "../action-group-Bf28z235.js";
|
|
23
|
+
import "../close-button-BsYkXOVh.js";
|
|
24
|
+
import "../field-label-C3HFlH91.js";
|
|
25
|
+
import "../popover-bg0EQQ8p.js";
|
|
25
26
|
const m = () => {
|
|
26
27
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
27
28
|
const r = document.createElement("style");
|
|
@@ -36,12 +37,12 @@ var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (r, o, n
|
|
|
36
37
|
return l && a && h(o, n, a), a;
|
|
37
38
|
};
|
|
38
39
|
const f = ["sticky", "fixed"];
|
|
39
|
-
class e extends z(
|
|
40
|
+
class e extends z(d) {
|
|
40
41
|
constructor() {
|
|
41
42
|
super(...arguments), this.emphasized = !1, this.flexible = !1, this.open = !1, this._variant = "";
|
|
42
43
|
}
|
|
43
44
|
static get styles() {
|
|
44
|
-
return [
|
|
45
|
+
return [b(g)];
|
|
45
46
|
}
|
|
46
47
|
set variant(o) {
|
|
47
48
|
if (o !== this.variant) {
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("@luzmo/icons"),a=require("../base-B7Pfl2if.cjs"),s=require("../sized-mixin-D9LkrMjb.cjs"),v=require("../button-base-DmjYs2s9.cjs"),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)))}#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 g=Object.defineProperty,m=Object.getOwnPropertyDescriptor,c=(i,o,t,n)=>{for(var e=n>1?void 0:n?m(o,t):o,u=i.length-1,l;u>=0;u--)(l=i[u])&&(e=(n?l(o,t,e):l(e))||e);return n&&e&&g(o,t,e),e};const z=300;let d;class r extends s.SizedMixin(v.LuzmoButtonBase,{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=()=>{if(!this.toggles)return;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,a.r(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),d=setTimeout(()=>{this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},z))}handlePointerupHoldAffordance(){clearTimeout(d),this.removeEventListener("pointerup",this.handlePointerupHoldAffordance),this.removeEventListener("pointercancel",this.handlePointerupHoldAffordance)}handleKeydown(o){if(!this.holdAffordance)return super.handleKeydown(o);const{code:t,altKey:n}=o;(t==="Space"||n&&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:n}=o;(t==="Space"||n&&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(a.x`
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("@luzmo/icons"),d=require("lit"),r=require("../base-DzbGOAPo.cjs"),v=require("../sized-mixin-BEemErtP.cjs"),h=require("../button-base-C1ceE1LF.cjs"),g=':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}}';var m=Object.defineProperty,z=Object.getOwnPropertyDescriptor,c=(i,o,t,n)=>{for(var e=n>1?void 0:n?z(o,t):o,u=i.length-1,l;u>=0;u--)(l=i[u])&&(e=(n?l(o,t,e):l(e))||e);return n&&e&&m(o,t,e),e};const f=300;let s;class a extends v.SizedMixin(h.LuzmoButtonBase,{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=()=>{if(!this.toggles)return;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,d.unsafeCSS(g)]}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),s=setTimeout(()=>{this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},f))}handlePointerupHoldAffordance(){clearTimeout(s),this.removeEventListener("pointerup",this.handlePointerupHoldAffordance),this.removeEventListener("pointercancel",this.handlePointerupHoldAffordance)}handleKeydown(o){if(!this.holdAffordance)return super.handleKeydown(o);const{code:t,altKey:n}=o;(t==="Space"||n&&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:n}=o;(t==="Space"||n&&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(d.html`
|
|
19
19
|
<div
|
|
20
20
|
class="hold-affordance corner-triangle-${this.size}"
|
|
21
21
|
>
|
|
22
22
|
${b.luzmoIcon(b.luzmoCornerTriangle)}
|
|
23
23
|
</div>
|
|
24
|
-
`),o}updated(o){super.updated(o);const t=this.role==="button",n=t&&(this.selected||this.toggles)&&!(this.hasAttribute("aria-haspopup")&&this.hasAttribute("aria-expanded"));(o.has("selected")||o.has("role"))&&(n?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()))}}c([
|
|
24
|
+
`),o}updated(o){super.updated(o);const t=this.role==="button",n=t&&(this.selected||this.toggles)&&!(this.hasAttribute("aria-haspopup")&&this.hasAttribute("aria-expanded"));(o.has("selected")||o.has("role"))&&(n?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()))}}c([r.n({type:Boolean,reflect:!0})],a.prototype,"emphasized",2);c([r.n({type:Boolean,reflect:!0,attribute:"hold-affordance"})],a.prototype,"holdAffordance",2);c([r.n({type:Boolean,reflect:!0})],a.prototype,"quiet",2);c([r.n({reflect:!0})],a.prototype,"role",2);c([r.n({type:Boolean,reflect:!0})],a.prototype,"selected",2);c([r.n({type:Boolean,reflect:!0})],a.prototype,"toggles",2);c([r.n({reflect:!0,attribute:"static-color"})],a.prototype,"staticColor",2);c([r.n({type:String})],a.prototype,"value",1);customElements.get("luzmo-action-button")||customElements.define("luzmo-action-button",a);exports.LuzmoActionButton=a;
|
|
@@ -16,9 +16,10 @@
|
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
18
|
import { luzmoIcon as s, luzmoCornerTriangle as g } from "@luzmo/icons";
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
19
|
+
import { unsafeCSS as m, html as h } from "lit";
|
|
20
|
+
import { n as a } from "../base-DNrOP9L3.js";
|
|
21
|
+
import { S as v } from "../sized-mixin-PyCYpyQq.js";
|
|
22
|
+
import { L as z } from "../button-base-CDLQV7Vk.js";
|
|
22
23
|
const b = () => {
|
|
23
24
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
24
25
|
const c = document.createElement("style");
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../action-group-
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../action-group-BBoV2VL9.cjs");customElements.get("luzmo-action-group")||customElements.define("luzmo-action-group",o.LuzmoActionGroup);exports.LuzmoActionGroup=o.LuzmoActionGroup;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import { L as r } from "../action-group-
|
|
18
|
+
import { L as r } from "../action-group-Bf28z235.js";
|
|
19
19
|
const l = () => {
|
|
20
20
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
21
21
|
const o = document.createElement("style");
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/*! * Lucero - The design system for Luzmo.
|
|
2
|
+
*
|
|
3
|
+
* Copyright © 2025 Luzmo
|
|
4
|
+
* All rights reserved.
|
|
5
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
+
*
|
|
10
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
+
* SOFTWARE.
|
|
17
|
+
* */
|
|
18
|
+
"use strict";const d=require("lit"),p=require("./mutation-controller-DkOMCW-c.cjs"),u=require("./base-DzbGOAPo.cjs"),g=require("./query-BL-TJj7K.cjs"),b=require("./roving-tabindex-By_fCy_e.cjs"),h=require("./sized-mixin-BEemErtP.cjs"),m=":host{gap:var(--luzmo-action-group-horizontal-spacing-regular, var(--action-group-horizontal-spacing-regular));flex-wrap:wrap;display:flex}::slotted(*){flex-shrink:0}::slotted(:focus-visible){z-index:3}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){gap:var(--luzmo-action-group-vertical-spacing-regular, var(--action-group-vertical-spacing-regular));flex-direction:column;display:inline-flex}:host([compact]){gap:var(--luzmo-action-group-gap-size-compact, var(--action-group-gap-size-compact))}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:var(--luzmo-action-group-border-radius-reset, var(--action-group-border-radius-reset));z-index:0;position:relative}:host([compact]:not([quiet])) ::slotted(:first-child){--luzmo-actionbutton-focus-indicator-border-radius: var( --luzmo-action-group-border-radius, var(--action-group-border-radius) ) 0px 0px var(--luzmo-action-group-border-radius, var(--action-group-border-radius));border-start-start-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));border-end-start-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));margin-inline-start:var(--luzmo-action-group-button-spacing-reset, var(--action-group-button-spacing-reset))}:host([compact]:not([quiet])) ::slotted(:not(:first-child)){--luzmo-actionbutton-focus-indicator-border-radius: 0px;margin-inline-start:var(--luzmo-action-group-horizontal-spacing-compact, var(--action-group-horizontal-spacing-compact));margin-inline-end:var(--luzmo-action-group-horizontal-spacing-compact, var(--action-group-horizontal-spacing-compact))}:host([compact]:not([quiet])) ::slotted(:last-child){--luzmo-actionbutton-focus-indicator-border-radius: 0px var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0px;border-start-end-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));border-end-end-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));margin-inline-start:var(--luzmo-action-group-horizontal-spacing-compact, var(--action-group-horizontal-spacing-compact));margin-inline-end:var(--luzmo-action-group-border-radius-reset, var(--action-group-border-radius-reset))}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}@media (hover: hover){:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([compact]:not([quiet])[vertical]){gap:var(--luzmo-action-group-gap-size-compact, var(--action-group-gap-size-compact))}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:var(--luzmo-action-group-border-radius-reset, var(--action-group-border-radius-reset))}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){--luzmo-actionbutton-focus-indicator-border-radius: var( --luzmo-action-group-border-radius, var(--action-group-border-radius) ) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0px 0px;border-start-start-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));border-start-end-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));margin-block-start:var(--luzmo-action-group-vertical-spacing-compact, var(--action-group-vertical-spacing-compact));margin-block-end:var(--luzmo-action-group-vertical-spacing-compact, var(--action-group-vertical-spacing-compact));margin-inline-end:var(--luzmo-action-group-button-spacing-reset, var(--action-group-button-spacing-reset))}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-block-start:var(--luzmo-action-group-button-spacing-reset, var(--action-group-button-spacing-reset));margin-block-end:var(--luzmo-action-group-vertical-spacing-compact, var(--action-group-vertical-spacing-compact));margin-inline-start:var(--luzmo-action-group-button-spacing-reset, var(--action-group-button-spacing-reset));margin-inline-end:var(--luzmo-action-group-button-spacing-reset, var(--action-group-button-spacing-reset))}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){--luzmo-actionbutton-focus-indicator-border-radius: 0px 0px var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius));border-end-end-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));border-end-start-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));margin-block-start:var(--luzmo-action-group-vertical-spacing-compact, var(--action-group-vertical-spacing-compact));margin-block-end:var(--luzmo-action-group-button-spacing-reset, var(--action-group-button-spacing-reset))}:host([justified]) ::slotted(*){flex:1}:host{--action-group-gap-size-compact: 0px;--action-group-horizontal-spacing-compact: -1px;--action-group-vertical-spacing-compact: -1px;--action-group-button-spacing-reset: 0px;--action-group-border-radius-reset: 0px;--action-group-border-radius: var(--luzmo-border-radius);--action-group-horizontal-spacing-regular: var(--luzmo-spacing-3);--action-group-vertical-spacing-regular: var(--luzmo-spacing-3)}:host([size=xs]),:host([size=s]){--action-group-horizontal-spacing-regular: var(--luzmo-spacing-2);--action-group-vertical-spacing-regular: var(--luzmo-spacing-2)}:host,:host([size=l]),:host([size=xl]){--action-group-horizontal-spacing-regular: var(--luzmo-spacing-3);--action-group-vertical-spacing-regular: var(--luzmo-spacing-3)}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-right:0;margin-left:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){display:flex;flex-direction:column;align-items:stretch}:host([compact]:not([quiet])) ::slotted(:not([role])){--overriden-border-radius: 0;--luzmo-action-button-border-radius: var(--overriden-border-radius)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--overriden-border-radius: var( --luzmo-action-group-border-radius, var(--action-group-border-radius) ) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--overriden-border-radius: 0 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius))}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius: var( --luzmo-action-group-border-radius, var(--action-group-border-radius) ) 0 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius))}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius: 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius: 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius: var( --luzmo-action-group-border-radius, var(--action-group-border-radius) ) 0 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius))}:host([compact]:not([quiet])) ::slotted(*){--luzmo-action-button-focus-ring-border-radius: 0}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){--luzmo-action-button-focus-ring-border-radius: var(--luzmo-border-radius) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){--luzmo-action-button-focus-ring-border-radius: 0 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius))}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:first-child){--luzmo-action-button-focus-ring-border-radius: var(--luzmo-border-radius) 0 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius))}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:first-child){--luzmo-action-button-focus-ring-border-radius: 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:last-child){--luzmo-action-button-focus-ring-border-radius: 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:last-child){--luzmo-action-button-focus-ring-border-radius: var(--luzmo-border-radius) 0 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius))}";var v=Object.defineProperty,z=Object.getOwnPropertyDescriptor,c=(n,t,r,e)=>{for(var o=e>1?void 0:e?z(t,r):t,a=n.length-1,i;a>=0;a--)(i=n[a])&&(o=(e?i(t,r,o):i(o))||o);return e&&o&&v(t,r,o),o};const l=[];class s extends h.SizedMixin(u.LuzmoElement,{validSizes:["xs","s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this._buttons=[],this._buttonSelector="luzmo-action-button, luzmo-action-menu",this.rovingTabindexController=new b.RovingTabindexController(this,{focusInIndex:t=>{let r=-1;const e=t.findIndex((o,a)=>(!t[r]&&!o.disabled&&(r=a),o.selected&&!o.disabled));return t[e]?e:r},elements:()=>this.buttons,isFocusableElement:t=>!t.disabled}),this.compact=!1,this.emphasized=!1,this.justified=!1,this.label="",this.quiet=!1,this.vertical=!1,this._selected=l,this.hasManaged=!1,this.manageButtons=()=>{if(!this.slotElement)return;const r=this.slotElement.assignedElements({flatten:!0}).reduce((e,o)=>{if(o.matches(this._buttonSelector))e.push(o);else{const a=[...o.querySelectorAll(`:scope > ${this._buttonSelector}`)];e.push(...a)}return e},[]);if(this.buttons=r,this.selects||!this.hasManaged){const e=[];this.buttons.forEach(o=>{o.selected&&e.push(o.value)}),this.setSelected([...this.selected,...e])}this.manageChildren(),this.manageSelects(),this.hasManaged=!0},new p.s(this,{config:{childList:!0,subtree:!0},callback:()=>{this.manageButtons()},skipInitial:!0})}static get styles(){return[d.unsafeCSS(m)]}set buttons(t){t!==this.buttons&&(this._buttons=t,this.rovingTabindexController.clearElementCache())}get buttons(){return this._buttons}set selected(t){this.requestUpdate("selected",this._selected),this._selected=t,this.updateComplete.then(()=>{this.applySelects(),this.manageChildren()})}get selected(){return this._selected}dispatchChange(t){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||(this.setSelected(t),this.buttons.map(e=>{e.selected=this.selected.includes(e.value)}))}setSelected(t,r){if(t===this.selected)return;const e=this.selected;this.requestUpdate("selected",e),this._selected=t,r&&this.dispatchChange(e)}focus(t){this.rovingTabindexController.focus(t)}deselectSelectedButtons(){this.buttons.forEach(t=>{t.selected&&(t.selected=!1,t.tabIndex=-1,t.setAttribute(this.selects?"aria-checked":"aria-pressed","false"))})}handleActionButtonChange(t){t.stopPropagation(),t.preventDefault()}handleClick(t){const r=t.target;if(r.value!==void 0)switch(this.selects){case"single":{this.deselectSelectedButtons(),r.selected=!0,r.tabIndex=0,r.setAttribute("aria-checked","true"),this.setSelected([r.value],!0);break}case"multiple":{const e=[...this.selected];r.selected=!r.selected,r.setAttribute("aria-checked",r.selected?"true":"false"),r.selected?e.push(r.value):e.splice(this.selected.indexOf(r.value),1),this.setSelected(e,!0),this.buttons.forEach(o=>{o.tabIndex=-1}),r.tabIndex=0;break}}}async applySelects(){await this.manageSelects(!0)}async manageSelects(t){if(this.buttons.length===0)return;const r=this.buttons;switch(this.selects){case"single":{this.setAttribute("role","radiogroup");const e=[],o=r.map(async i=>{await i.updateComplete,i.setAttribute("role","radio"),i.setAttribute("aria-checked",i.selected?"true":"false"),i.selected&&e.push(i)});if(t)break;await Promise.all(o);const a=e.map(i=>i.value);this.setSelected(a||l);break}case"multiple":{this.getAttribute("role")==="radiogroup"&&this.removeAttribute("role");const e=[],o=r.map(async i=>{await i.updateComplete,i.setAttribute("role","checkbox"),i.setAttribute("aria-checked",i.selected?"true":"false"),i.selected&&e.push(i.value)});if(t)break;await Promise.all(o);const a=e.length>0?e:l;this.setSelected(a);break}default:if(this.selected.length>0){const e=[],o=r.map(async a=>{await a.updateComplete,a.setAttribute("role","button"),a.selected?(a.setAttribute("aria-pressed","true"),e.push(a)):a.removeAttribute("aria-pressed")});if(t)break;await Promise.all(o),this.setSelected(e.map(a=>a.value))}else{this.buttons.forEach(e=>{e.setAttribute("role","button")});break}}this.hasAttribute("role")||this.setAttribute("role","toolbar")}render(){return d.html`
|
|
19
|
+
<slot role="presentation" @slotchange=${this.manageButtons}></slot>
|
|
20
|
+
`}firstUpdated(t){super.firstUpdated(t),this.addEventListener("click",this.handleClick)}updated(t){super.updated(t),t.has("selects")&&(this.manageSelects(),this.manageChildren(),this.selects?this.renderRoot.addEventListener("change",this.handleActionButtonChange):this.renderRoot.removeEventListener("change",this.handleActionButtonChange)),(t.has("quiet")||t.has("emphasized")||t.has("size")||t.has("staticColor"))&&this.manageChildren(t),t.has("label")&&(this.label||t.get("label")!==void 0)&&(this.label.length>0?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}manageChildren(t){this.buttons.forEach(r=>{(this.quiet||t!=null&&t.get("quiet"))&&(r.quiet=this.quiet),(this.emphasized||t!=null&&t.get("emphasized"))&&(r.emphasized=this.emphasized),(this.staticColor||t!=null&&t.get("staticColor"))&&(r.staticColor=this.staticColor),(this.selects||!this.hasManaged)&&(r.selected=this.selected.includes(r.value)),this.size&&(this.size!=="m"||(t==null?void 0:t.get("size"))!==void 0)&&(r.size=this.size)})}}c([u.n({type:Boolean,reflect:!0})],s.prototype,"compact",2);c([u.n({type:Boolean,reflect:!0})],s.prototype,"emphasized",2);c([u.n({type:Boolean,reflect:!0})],s.prototype,"justified",2);c([u.n({type:String})],s.prototype,"label",2);c([u.n({type:Boolean,reflect:!0})],s.prototype,"quiet",2);c([u.n({type:String})],s.prototype,"selects",2);c([u.n({reflect:!0,attribute:"static-color"})],s.prototype,"staticColor",2);c([u.n({type:Boolean,reflect:!0})],s.prototype,"vertical",2);c([u.n({type:Array})],s.prototype,"selected",1);c([g.e("slot")],s.prototype,"slotElement",2);exports.LuzmoActionGroup=s;
|