@luzmo/lucero 0.0.4 → 0.0.8
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/accordion-item.d.ts +24 -0
- package/components/accordion/accordion.d.ts +42 -0
- package/components/accordion/index.cjs +43 -0
- package/components/accordion/index.d.ts +10 -0
- package/{lib → components}/accordion/index.js +10 -11
- package/components/action-bar/action-bar.d.ts +42 -0
- package/components/action-bar/index.cjs +39 -0
- package/components/action-bar/index.d.ts +7 -0
- package/{lib → components}/action-bar/index.js +9 -10
- package/components/action-button/action-button.d.ts +81 -0
- package/components/action-button/index.cjs +24 -0
- package/components/action-button/index.d.ts +7 -0
- package/{lib → components}/action-button/index.js +6 -7
- package/components/action-group/action-group.d.ts +50 -0
- package/{lib → components}/action-group/index.cjs +1 -1
- package/components/action-group/index.d.ts +7 -0
- package/{lib → components}/action-group/index.js +1 -1
- package/components/action-group-Uimj-MJP.cjs +20 -0
- package/{lib/action-group-BoIH8s8R.js → components/action-group-enfc-YnW.js} +11 -12
- package/components/action-menu/action-menu.d.ts +40 -0
- package/{lib → components}/action-menu/index.cjs +5 -5
- package/components/action-menu/index.d.ts +7 -0
- package/{lib → components}/action-menu/index.js +10 -11
- package/{lib/async-directive-FGzMycjH.js → components/async-directive-DWRUSKKF.js} +1 -1
- package/{lib/async-directive-CV2MII86.cjs → components/async-directive-D_Ter1F8.cjs} +1 -1
- package/components/avatar/avatar.d.ts +31 -0
- package/components/avatar/index.cjs +24 -0
- package/components/avatar/index.d.ts +7 -0
- package/{lib → components}/avatar/index.js +13 -14
- package/components/base-B7Pfl2if.cjs +40 -0
- package/components/base-CawdqE7p.js +666 -0
- package/components/button/button-base.d.ts +44 -0
- package/components/button/button.d.ts +59 -0
- package/components/button/clear-button.d.ts +22 -0
- package/components/button/close-button.d.ts +24 -0
- package/components/button/index.cjs +20 -0
- package/components/button/index.d.ts +13 -0
- package/{lib → components}/button/index.js +11 -12
- package/{lib/button-base-DgtT6sU5.js → components/button-base-B7v4eeRh.js} +13 -12
- package/components/button-base-DmjYs2s9.cjs +25 -0
- package/components/button-group/button-group.d.ts +19 -0
- package/components/button-group/index.cjs +18 -0
- package/components/button-group/index.d.ts +7 -0
- package/{lib → components}/button-group/index.js +7 -8
- package/components/checkbox/checkbox-base.d.ts +9 -0
- package/components/checkbox/checkbox-mixin.d.ts +14 -0
- package/components/checkbox/checkbox.d.ts +54 -0
- package/components/checkbox/index.cjs +25 -0
- package/components/checkbox/index.d.ts +7 -0
- package/{lib → components}/checkbox/index.js +5 -6
- package/{lib/checkbox-mixin-DegQlk5C.js → components/checkbox-mixin-BFGTmw17.js} +15 -16
- package/{lib/checkbox-mixin-H0Hm-VLk.cjs → components/checkbox-mixin-DUhXwD46.cjs} +3 -3
- package/{lib/clear-button-Ap5H3UyH.js → components/clear-button-DgZmX5RX.js} +9 -10
- package/components/clear-button-KdrF2jaV.cjs +18 -0
- package/{lib/close-button-CGISEF33.js → components/close-button-CFHQnbsK.js} +7 -8
- package/components/close-button-DVGUppyd.cjs +18 -0
- package/components/color-area/color-area.d.ts +67 -0
- package/components/color-area/index.cjs +80 -0
- package/components/color-area/index.d.ts +7 -0
- package/{lib → components}/color-area/index.js +11 -11
- package/components/color-field/color-field.d.ts +20 -0
- package/components/color-field/index.cjs +23 -0
- package/components/color-field/index.d.ts +7 -0
- package/{lib → components}/color-field/index.js +2 -3
- package/components/color-handle/color-handle.d.ts +13 -0
- package/components/color-handle/index.cjs +24 -0
- package/components/color-handle/index.d.ts +7 -0
- package/{lib → components}/color-handle/index.js +2 -3
- package/components/color-loupe/color-loupe.d.ts +7 -0
- package/{lib → components}/color-loupe/index.cjs +1 -1
- package/components/color-loupe/index.d.ts +7 -0
- package/{lib → components}/color-loupe/index.js +1 -1
- package/{lib/color-loupe-DBEApMDT.js → components/color-loupe-DxcqXoJ6.js} +3 -4
- package/components/color-loupe-SskbNeMp.cjs +56 -0
- package/components/color-menu/color-menu.d.ts +54 -0
- package/components/color-menu/index.cjs +86 -0
- package/components/color-menu/index.d.ts +7 -0
- package/{lib → components}/color-menu/index.js +9 -10
- package/components/color-picker/color-picker.d.ts +39 -0
- package/components/color-picker/index.cjs +48 -0
- package/components/color-picker/index.d.ts +7 -0
- package/{lib → components}/color-picker/index.js +33 -34
- package/components/color-slider/color-slider.d.ts +57 -0
- package/components/color-slider/index.cjs +57 -0
- package/components/color-slider/index.d.ts +7 -0
- package/{lib → components}/color-slider/index.js +6 -6
- package/{lib/directive-helpers-C2vOfhFx.cjs → components/directive-helpers-TkFq2eZF.cjs} +1 -1
- package/{lib/directive-helpers-BLDZnGQv.js → components/directive-helpers-nlQRAaQt.js} +1 -1
- package/components/divider/divider.d.ts +24 -0
- package/components/divider/index.cjs +18 -0
- package/components/divider/index.d.ts +7 -0
- package/{lib → components}/divider/index.js +6 -7
- package/components/field-group/field-group.d.ts +24 -0
- package/{lib → components}/field-group/index.cjs +1 -1
- package/components/field-group/index.d.ts +7 -0
- package/{lib → components}/field-group/index.js +1 -1
- package/{lib/field-group-CBWafIUV.js → components/field-group-DAhrTCfl.js} +2 -3
- package/components/field-group-DSY2HUoj.cjs +23 -0
- package/components/field-label/field-label.d.ts +50 -0
- package/{lib → components}/field-label/index.cjs +1 -1
- package/components/field-label/index.d.ts +7 -0
- package/{lib → components}/field-label/index.js +2 -2
- package/{lib/field-label-BK_tk8vP.js → components/field-label-CAFfGxEL.js} +15 -16
- package/components/field-label-CjsQ3ujK.cjs +25 -0
- package/{lib/focusable-Dv_6CFaY.cjs → components/focusable-DGWL1v1p.cjs} +1 -1
- package/{lib/focusable-DbUg-3Vp.js → components/focusable-cj2QhwDT.js} +1 -1
- package/components/icon/icon-base.d.ts +11 -0
- package/components/icon/icon.d.ts +12 -0
- package/components/icon/index.cjs +18 -0
- package/components/icon/index.d.ts +7 -0
- package/{lib → components}/icon/index.js +4 -5
- package/{lib/if-defined-Cv6xanXh.cjs → components/if-defined-B56xGmAg.cjs} +2 -2
- package/{lib/if-defined-CYpcjGCb.js → components/if-defined-BSAr_4u4.js} +1 -1
- package/{lib/index-ovT-qVzf.js → components/index-CMvLpPKD.js} +8 -9
- package/{lib/index-yNcLzjhM.cjs → components/index-DnWavOZD.cjs} +15 -15
- package/components/index.cjs +18 -0
- package/{lib → components}/index.js +131 -90
- package/components/infield-button/index.cjs +22 -0
- package/components/infield-button/index.d.ts +7 -0
- package/{lib → components}/infield-button/index.js +3 -4
- package/components/infield-button/infield-button.d.ts +25 -0
- package/components/label/index.cjs +18 -0
- package/components/label/index.d.ts +7 -0
- package/{lib → components}/label/index.js +1 -2
- package/components/label/label.d.ts +7 -0
- package/components/language-resolution-8yZa5r_P.js +53 -0
- package/components/language-resolution-DJzmyzZq.cjs +18 -0
- package/{lib/like-anchor-K8W0QYwC.cjs → components/like-anchor-Bmabl9ra.cjs} +4 -4
- package/{lib/like-anchor-cDeGGeHh.js → components/like-anchor-QBlvwFfT.js} +8 -9
- package/{lib/manage-help-text-2mSEy-AD.js → components/manage-help-text-Cozl9Sgn.js} +8 -8
- package/{lib/manage-help-text-iOk-zmy8.cjs → components/manage-help-text-OHXDgxyj.cjs} +3 -3
- package/{lib → components}/menu/index.cjs +1 -1
- package/components/menu/index.d.ts +16 -0
- package/{lib → components}/menu/index.js +1 -1
- package/components/menu/menu-divider.d.ts +14 -0
- package/components/menu/menu-group.d.ts +17 -0
- package/components/menu/menu-item.d.ts +125 -0
- package/components/menu/menu.d.ts +119 -0
- package/components/multi-language-field/index.cjs +39 -0
- package/components/multi-language-field/index.d.ts +7 -0
- package/{lib → components}/multi-language-field/index.js +6 -7
- package/components/multi-language-field/multi-language-field.d.ts +41 -0
- package/components/number-field/index.cjs +57 -0
- package/components/number-field/index.d.ts +7 -0
- package/{lib → components}/number-field/index.js +24 -24
- package/components/number-field/number-field.d.ts +113 -0
- package/{lib/observe-slot-text-BmsCNJig.cjs → components/observe-slot-text-CrYB2Pj-.cjs} +1 -1
- package/{lib/observe-slot-text-BoFRF-VI.js → components/observe-slot-text-ggb4kKgY.js} +1 -1
- package/components/overlay/abstract-overlay.d.ts +72 -0
- package/components/overlay/click-controller.d.ts +14 -0
- package/components/overlay/events.d.ts +23 -0
- package/components/overlay/full-size-plugin.d.ts +12 -0
- package/components/overlay/hover-controller.d.ts +20 -0
- package/components/overlay/index.cjs +73 -0
- package/components/overlay/index.d.ts +22 -0
- package/{lib → components}/overlay/index.js +55 -38
- package/components/overlay/interaction-controller.d.ts +38 -0
- package/components/overlay/loader.d.ts +4 -0
- package/components/overlay/longpress-controller.d.ts +21 -0
- package/components/overlay/overlay-dialog.d.ts +4 -0
- package/components/overlay/overlay-events.d.ts +11 -0
- package/components/overlay/overlay-no-popover.d.ts +4 -0
- package/components/overlay/overlay-popover.d.ts +4 -0
- package/components/overlay/overlay-stack.d.ts +44 -0
- package/components/overlay/overlay-timer.d.ts +21 -0
- package/components/overlay/overlay-trigger-directive.d.ts +26 -0
- package/components/overlay/overlay-trigger.d.ts +53 -0
- package/components/overlay/overlay-types.d.ts +50 -0
- package/components/overlay/overlay.d.ts +464 -0
- package/components/overlay/placement-controller.d.ts +157 -0
- package/components/overlay/slottable-request-directive.d.ts +17 -0
- package/components/overlay/slottable-request-event.d.ts +12 -0
- package/components/overlay/strategies.d.ts +8 -0
- package/components/overlay/virtual-trigger.d.ts +7 -0
- package/{lib/overlay-C7QKFqRc.js → components/overlay-CJ9by37f.js} +94 -84
- package/components/overlay-Deh6Ki6I.cjs +47 -0
- package/{lib/pending-state-Dbc2HIM2.cjs → components/pending-state-Do522lTd.cjs} +2 -2
- package/{lib/pending-state-D5KTK4_1.js → components/pending-state-TJj1x9xn.js} +2 -2
- package/components/picker/desktop-controller.d.ts +7 -0
- package/{lib → components}/picker/index.cjs +1 -1
- package/components/picker/index.d.ts +7 -0
- package/{lib → components}/picker/index.js +2 -2
- package/components/picker/interaction-controller.d.ts +43 -0
- package/components/picker/mobile-controller.d.ts +9 -0
- package/components/picker/picker.d.ts +154 -0
- package/components/picker/strategies.d.ts +6 -0
- package/components/picker-833Apxe4.js +655 -0
- package/components/picker-DDx8ii73.cjs +127 -0
- package/{lib/platform-DQYMG7JI.js → components/platform-BM-uMWpX.js} +34 -19
- package/components/platform-BiXhwqk3.cjs +18 -0
- package/{lib → components}/popover/index.cjs +1 -1
- package/components/popover/index.d.ts +7 -0
- package/{lib → components}/popover/index.js +2 -2
- package/components/popover/popover.d.ts +29 -0
- package/components/popover-BGOgXaka.cjs +30 -0
- package/{lib/popover-ZRVxogyp.js → components/popover-DlkzrLpl.js} +8 -9
- package/{lib → components}/progress-circle/index.cjs +1 -1
- package/components/progress-circle/index.d.ts +7 -0
- package/{lib → components}/progress-circle/index.js +1 -1
- package/components/progress-circle/progress-circle.d.ts +35 -0
- package/{lib/progress-circle-DpXiqW6a.js → components/progress-circle-Be24kv6B.js} +5 -6
- package/components/progress-circle-NNbCMK2i.cjs +33 -0
- package/components/radio/index.cjs +22 -0
- package/components/radio/index.d.ts +10 -0
- package/{lib → components}/radio/index.js +10 -11
- package/components/radio/radio-group.d.ts +27 -0
- package/components/radio/radio.d.ts +39 -0
- package/components/search/index.cjs +45 -0
- package/components/search/index.d.ts +7 -0
- package/{lib → components}/search/index.js +3 -4
- package/components/search/search.d.ts +27 -0
- package/{lib/sized-mixin-Dl0KoEcV.js → components/sized-mixin-BxMraZLS.js} +1 -1
- package/{lib/sized-mixin-BSYHt8nT.cjs → components/sized-mixin-D9LkrMjb.cjs} +1 -1
- package/components/slider/index.cjs +18 -0
- package/components/slider/index.d.ts +7 -0
- package/{lib → components}/slider/index.js +5 -6
- package/components/slider/slider.d.ts +24 -0
- package/{lib/state-DReJ3hB6.cjs → components/state-C5I1gP3G.cjs} +1 -1
- package/{lib/state-BAO-13Bs.js → components/state-CYxk12SV.js} +1 -1
- package/{lib/streaming-listener-DLo0wkMc.js → components/streaming-listener-CCalHg57.js} +18 -52
- package/components/streaming-listener-KVex1WWB.cjs +18 -0
- package/{lib/style-map-BqvQDFJt.js → components/style-map-Ct2LiEds.js} +1 -1
- package/{lib/style-map-BjBGQ_u3.cjs → components/style-map-uMq-yDJ3.cjs} +2 -2
- package/components/swatch/index.cjs +49 -0
- package/components/swatch/index.d.ts +10 -0
- package/{lib → components}/swatch/index.js +9 -10
- package/components/swatch/swatch-group.d.ts +41 -0
- package/components/swatch/swatch.d.ts +40 -0
- package/components/switch/index.cjs +22 -0
- package/components/switch/index.d.ts +7 -0
- package/{lib → components}/switch/index.js +6 -7
- package/components/switch/switch.d.ts +27 -0
- package/components/tags/index.cjs +32 -0
- package/components/tags/index.d.ts +10 -0
- package/{lib → components}/tags/index.js +17 -18
- package/components/tags/tag.d.ts +29 -0
- package/components/tags/tags.d.ts +28 -0
- package/components/text-field/help-text-manager.d.ts +19 -0
- package/components/text-field/help-text.d.ts +20 -0
- package/components/text-field/index.cjs +21 -0
- package/components/text-field/index.d.ts +14 -0
- package/{lib → components}/text-field/index.js +9 -9
- package/components/text-field/manage-help-text.d.ts +13 -0
- package/components/text-field/text-field.d.ts +142 -0
- package/{lib/text-field-C6Aa7XOb.cjs → components/text-field-5_ev9way.cjs} +15 -15
- package/{lib/text-field-DPk332j9.js → components/text-field-CvKSS59x.js} +28 -30
- package/components/toast/index.cjs +51 -0
- package/components/toast/index.d.ts +7 -0
- package/{lib → components}/toast/index.js +2 -3
- package/components/toast/toast.d.ts +77 -0
- package/components/tooltip/index.cjs +45 -0
- package/components/tooltip/index.d.ts +8 -0
- package/{lib → components}/tooltip/index.js +13 -12
- package/components/tooltip/tooltip-directive.d.ts +5 -0
- package/components/tooltip/tooltip.d.ts +55 -0
- package/components/unit-input/index.cjs +43 -0
- package/components/unit-input/index.d.ts +7 -0
- package/{lib → components}/unit-input/index.js +5 -6
- package/components/unit-input/unit-input.d.ts +33 -0
- package/components/utils.cjs +18 -0
- package/components/utils.js +42 -0
- package/custom-elements.json +1 -0
- package/index.d.ts +40 -0
- package/package.json +141 -103
- package/utils/base.d.ts +16 -0
- package/utils/condition-attribute-with-id.d.ts +2 -0
- package/utils/first-focusable-in.d.ts +3 -0
- package/utils/focus-visible.d.ts +29 -0
- package/utils/focusable-selectors.d.ts +2 -0
- package/utils/focusable.d.ts +58 -0
- package/utils/get-css-variable.d.ts +1 -0
- package/utils/get-label-from-slot.d.ts +1 -0
- package/utils/index.d.ts +6 -0
- package/utils/like-anchor.d.ts +23 -0
- package/utils/observe-slot-presence.d.ts +12 -0
- package/utils/observe-slot-text.d.ts +11 -0
- package/utils/platform.d.ts +10 -0
- package/utils/random-id.d.ts +1 -0
- package/utils/reactive-controllers/color.d.ts +54 -0
- package/utils/reactive-controllers/dependency-manger.d.ts +26 -0
- package/utils/reactive-controllers/element-resolution.d.ts +23 -0
- package/utils/reactive-controllers/focus-group.d.ts +62 -0
- package/utils/reactive-controllers/language-resolution.d.ts +11 -0
- package/utils/reactive-controllers/match-media.d.ts +13 -0
- package/utils/reactive-controllers/pending-state.d.ts +41 -0
- package/utils/reactive-controllers/roving-tabindex.d.ts +19 -0
- package/utils/reparent-child.d.ts +4 -0
- package/utils/sized-mixin.d.ts +17 -0
- package/utils/streaming-listener.d.ts +48 -0
- package/lib/accordion/index.cjs +0 -43
- package/lib/action-bar/index.cjs +0 -39
- package/lib/action-button/index.cjs +0 -24
- package/lib/action-group-D4MxBrq8.cjs +0 -20
- package/lib/avatar/index.cjs +0 -24
- package/lib/base-BCmA9Wxv.cjs +0 -30
- package/lib/base-nYalvNMy.js +0 -390
- package/lib/button/index.cjs +0 -20
- package/lib/button-base-B0iB_JTv.cjs +0 -25
- package/lib/button-group/index.cjs +0 -18
- package/lib/checkbox/index.cjs +0 -25
- package/lib/clear-button-D0djuaLb.cjs +0 -18
- package/lib/close-button-BrfeZvjk.cjs +0 -18
- package/lib/color-area/index.cjs +0 -80
- package/lib/color-field/index.cjs +0 -23
- package/lib/color-handle/index.cjs +0 -24
- package/lib/color-loupe-BICpNqFs.cjs +0 -56
- package/lib/color-menu/index.cjs +0 -86
- package/lib/color-picker/index.cjs +0 -48
- package/lib/color-slider/index.cjs +0 -57
- package/lib/divider/index.cjs +0 -18
- package/lib/field-group-TUFvhJkk.cjs +0 -23
- package/lib/field-label-BrJaeORz.cjs +0 -25
- package/lib/icon/index.cjs +0 -18
- package/lib/index.cjs +0 -18
- package/lib/infield-button/index.cjs +0 -22
- package/lib/label/index.cjs +0 -18
- package/lib/legend-position/index.cjs +0 -27
- package/lib/legend-position/index.js +0 -85
- package/lib/lit-html-B3ugcwD9.js +0 -248
- package/lib/lit-html-p4Oxv2-5.cjs +0 -24
- package/lib/multi-language-field/index.cjs +0 -39
- package/lib/number-field/index.cjs +0 -57
- package/lib/overlay/index.cjs +0 -73
- package/lib/overlay-DScraBAi.cjs +0 -47
- package/lib/picker--2OCYWnV.js +0 -657
- package/lib/picker-B9W7Haf4.cjs +0 -127
- package/lib/platform-CQzYNWKq.cjs +0 -18
- package/lib/popover-CVbjhSnx.cjs +0 -30
- package/lib/progress-circle-CiJoS8J7.cjs +0 -33
- package/lib/radio/index.cjs +0 -22
- package/lib/search/index.cjs +0 -45
- package/lib/slider/index.cjs +0 -18
- package/lib/streaming-listener-Bw4jE33f.cjs +0 -18
- package/lib/swatch/index.cjs +0 -49
- package/lib/switch/index.cjs +0 -22
- package/lib/tags/index.cjs +0 -32
- package/lib/text-field/index.cjs +0 -21
- package/lib/toast/index.cjs +0 -51
- package/lib/tooltip/index.cjs +0 -45
- package/lib/unit-input/index.cjs +0 -43
- /package/{lib → components}/base-BjTwmyRF.cjs +0 -0
- /package/{lib → components}/base-D76d76ww.js +0 -0
- /package/{lib → components}/color-Bg3tYsAQ.js +0 -0
- /package/{lib → components}/color-DphK4hwx.cjs +0 -0
- /package/{lib → components}/condition-attribute-with-id-DrQYZzFS.cjs +0 -0
- /package/{lib → components}/condition-attribute-with-id-Dv4lSRbe.js +0 -0
- /package/{lib → components}/dependency-manger-C5HCkMMB.cjs +0 -0
- /package/{lib → components}/dependency-manger-CEXvGQUV.js +0 -0
- /package/{lib → components}/directive-C7oCP5Bh.cjs +0 -0
- /package/{lib → components}/directive-oAbCiebi.js +0 -0
- /package/{lib → components}/divider.module-CXMNveQc.cjs +0 -0
- /package/{lib → components}/divider.module-DwOuLGU3.js +0 -0
- /package/{lib → components}/element-resolution-BvRLGqIU.cjs +0 -0
- /package/{lib → components}/element-resolution-FCUT-wql.js +0 -0
- /package/{lib → components}/focus-group-DHeTq18L.js +0 -0
- /package/{lib → components}/focus-group-DnxZUBhQ.cjs +0 -0
- /package/{lib → components}/focus-visible-B0P9aY_G.cjs +0 -0
- /package/{lib → components}/focus-visible-DBlJGoEW.js +0 -0
- /package/{lib → components}/focusable-selectors-B4YgbghQ.js +0 -0
- /package/{lib → components}/focusable-selectors-BgFlyFcY.cjs +0 -0
- /package/{lib → components}/index-C1chwzNp.js +0 -0
- /package/{lib → components}/index-DCKCHDTt.cjs +0 -0
- /package/{lib → components}/mutation-controller-DH7YOCyj.js +0 -0
- /package/{lib → components}/mutation-controller-DkOMCW-c.cjs +0 -0
- /package/{lib → components}/query-BL-TJj7K.cjs +0 -0
- /package/{lib → components}/query-D_KR_GUc.js +0 -0
- /package/{lib → components}/query-assigned-elements-DjfhL1cl.js +0 -0
- /package/{lib → components}/query-assigned-elements-DsKsfk7G.cjs +0 -0
- /package/{lib → components}/query-assigned-nodes-BcKWmGzy.cjs +0 -0
- /package/{lib → components}/query-assigned-nodes-C76XVPWY.js +0 -0
- /package/{lib → components}/random-id-ByCz1xaq.js +0 -0
- /package/{lib → components}/random-id-CqvckpWe.cjs +0 -0
- /package/{lib → components}/roving-tabindex-By_fCy_e.cjs +0 -0
- /package/{lib → components}/roving-tabindex-DOg4z6ZU.js +0 -0
- /package/{lib → components}/slottable-request-event-BfUUt1Mh.cjs +0 -0
- /package/{lib → components}/slottable-request-event-DggLA4Rx.js +0 -0
- /package/{lib → components}/when-CDK1Tt5Y.js +0 -0
- /package/{lib → components}/when-CDZyJPvd.cjs +0 -0
|
@@ -1,18 +0,0 @@
|
|
|
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 l=require("lit"),o=require("./async-directive-CV2MII86.cjs"),m=require("./directive-C7oCP5Bh.cjs"),a=Symbol("language resolver updated");class u{constructor(e){this.language=document.documentElement.lang||navigator.language,this.host=e,this.host.addController(this)}hostConnected(){this.resolveLanguage()}hostDisconnected(){var e;(e=this.unsubscribe)==null||e.call(this)}resolveLanguage(){const e=new CustomEvent("luzmo-language-context",{bubbles:!0,composed:!0,detail:{callback:(t,s)=>{const n=this.language;this.language=t,this.unsubscribe=s,this.host.requestUpdate(a,n)}},cancelable:!0});this.host.dispatchEvent(e)}}const i=["",()=>{}];class c extends o.f{constructor(){super(...arguments),this.start=i,this.streamInside=i,this.end=i,this.streamOutside=i,this.state="off",this.handleStart=e=>{this.clearStream(),this.callHandler(this.start[1],e),!e.defaultPrevented&&(this.removeListeners(),this.addListeners("on"))},this.handleInside=e=>{this.handleStream(this.streamInside[1],e)},this.handleEnd=e=>{this.clearStream(),this.callHandler(this.end[1],e),this.removeListeners(),this.addListeners("off")},this.handleOutside=e=>{this.handleStream(this.streamOutside[1],e)}}render(e){return l.nothing}update(e,[{start:t,end:s,streamInside:n=i,streamOutside:d=i}]){var r;this.element!==e.element&&(this.element=e.element,this.removeListeners()),this.host=((r=e.options)==null?void 0:r.host)||this.element,this.start=t,this.end=s,this.streamInside=n,this.streamOutside=d,this.addListeners()}addListeners(e){this.state=e||this.state,this.state==="off"?(this.addListener(this.streamOutside[0],this.handleOutside),this.addListener(this.start[0],this.handleStart)):this.state==="on"&&(this.addListener(this.streamInside[0],this.handleInside),this.addListener(this.end[0],this.handleEnd))}callHandler(e,t){typeof e=="function"?e.call(this.host,t):e.handleEvent(t)}handleStream(e,t){this.stream||(this.callHandler(e,t),this.stream=requestAnimationFrame(()=>{this.stream=void 0}))}clearStream(){this.stream!=null&&(cancelAnimationFrame(this.stream),this.stream=void 0)}addListener(e,t){Array.isArray(e)?e.map(s=>{this.element.addEventListener(s,t)}):this.element.addEventListener(e,t)}removeListener(e,t){Array.isArray(e)?e.map(s=>{this.element.removeEventListener(s,t)}):this.element.removeEventListener(e,t)}removeListeners(){this.removeListener(this.start[0],this.handleStart),this.removeListener(this.streamInside[0],this.handleInside),this.removeListener(this.end[0],this.handleEnd),this.removeListener(this.streamOutside[0],this.handleOutside)}disconnected(){this.removeListeners()}reconnected(){this.addListeners()}}const g=m.e(c);exports.LanguageResolutionController=u;exports.languageResolverUpdatedSymbol=a;exports.streamingListener=g;
|
package/lib/swatch/index.cjs
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("@luzmo/icons"),g=require("../focusable-Dv_6CFaY.cjs"),f=require("../sized-mixin-BSYHt8nT.cjs"),u=require("lit"),r=require("../base-BCmA9Wxv.cjs"),v=require("../if-defined-Cv6xanXh.cjs"),p=require("../when-CDZyJPvd.cjs"),m=require("../mutation-controller-DkOMCW-c.cjs"),z=require("../query-assigned-elements-DsKsfk7G.cjs"),x=require("../roving-tabindex-By_fCy_e.cjs"),y='@media (forced-colors: active){:host{--highcontrast-swatch-disabled-icon-color: GrayText;--highcontrast-swatch-focus-indicator-color: ButtonText;--highcontrast-swatch-background-color-selected: Background;--highcontrast-swatch-border-color-selected: Highlight;--highcontrast-swatch-border-color: ButtonText;--highcontrast-swatch-fill-foreground-color: ButtonText}.fill{forced-color-adjust:none}:host([disabled]){--highcontrast-swatch-border-color: GrayText}}:host{box-sizing:border-box;inline-size:var(--luzmo-swatch-size, var(--swatch-size));block-size:var(--luzmo-swatch-size, var(--swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabled-icon{inline-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size));block-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected, var(--luzmo-swatch-inner-border-color-selected, var(--swatch-inner-border-color-selected)))}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:none;background:var(--picked-color, transparent)}:host([mixed-value]) .mixed-value-icon{color:var(--swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--picked-color, transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--luzmo-swatch-slash-thickness, var(--swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color, var(--luzmo-swatch-slash-icon-color, var(--swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabled-icon{display:block}:host:before{content:"";border-width:var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected, var(--luzmo-swatch-border-color-selected, var(--swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}:host:after{content:"";inset:calc(var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)) * -2);opacity:0;border-width:var(--luzmo-swatch-focus-indicator-width, var(--swatch-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color, var(--luzmo-swatch-focus-indicator-color, var(--swatch-focus-indicator-color)));border-radius:var(--luzmo-swatch-focus-indicator-border-radius, var(--swatch-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-sizing:border-box;box-shadow:inset 0 0 0 var(--luzmo-swatch-border-thickness, var(--swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--luzmo-swatch-border-color, var(--swatch-border-color)));border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));position:absolute;top:0;right:0;bottom:0;left:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--picked-color, transparent)}:host([border=none]) .fill:before{box-shadow:none}.mixed-value-icon{pointer-events:none;color:#0000;color:var(--picked-color, transparent);display:none}.disabled-icon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));display:none;position:relative}.disabled-icon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)))}.disabled-icon path:last-child{fill:var(--luzmo-swatch-icon-border-color, var(--swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([selected]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)));height:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}:host([selected][shape=rectangle]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2 - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--luzmo-animation-duration) ease-in-out,height var(--luzmo-animation-duration) ease-in-out}:host([size=xl]){--swatch-size: var(--luzmo-component-height-xl);--swatch-disabled-icon-size: 24px;--swatch-slash-thickness: 6px}:host([size=l]){--swatch-size: var(--luzmo-component-height-l);--swatch-disabled-icon-size: 20px;--swatch-slash-thickness: 5px}:host([size=s]){--swatch-size: var(--luzmo-component-height-s);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 3px}:host([size=xs]){--swatch-size: var(--luzmo-component-height-xs);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 2px}:host([size=xxs]){--swatch-size: var(--luzmo-component-height-xxs);--swatch-disabled-icon-size: 14px;--swatch-slash-thickness: 2px}:host{--swatch-size: var(--luzmo-component-height);--swatch-disabled-icon-size: 18px;--swatch-slash-thickness: 4px}:host{--swatch-border-radius: var(--luzmo-border-radius-s);--swatch-focus-indicator-border-radius: var(--luzmo-border-radius-s);--swatch-border-thickness: var(--luzmo-border-width);--swatch-border-thickness-selected: var(--luzmo-border-width);--swatch-focus-indicator-width: var(--luzmo-indicator-width);--swatch-focus-indicator-gap: var(--luzmo-indicator-gap);--swatch-border-color: var(--luzmo-border-color-down);--swatch-icon-border-color: var(--luzmo-border-color);--swatch-border-color-selected: var(--luzmo-border-color-full-down);--swatch-inner-border-color-selected: var(--luzmo-background-color);--swatch-disabled-icon-color: rgb(255, 255, 255);--swatch-dash-icon-color: var(--luzmo-font-color);--swatch-slash-icon-color: var(--luzmo-color-negative);--swatch-focus-indicator-color: var(--luzmo-primary)}.fill:before{background:var(--picked-color, transparent)}:host([border=none]) .fill:before{background:var(--picked-color, transparent)}:host .is-image .fill:before{background:#0000}:host .opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-swatch-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-swatch-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-swatch-checkerboard-position, left top)/calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2) calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2)}';var k=Object.defineProperty,S=Object.getOwnPropertyDescriptor,c=(h,e,t,o)=>{for(var s=o>1?void 0:o?S(e,t):e,i=h.length-1,a;i>=0;i--)(a=h[i])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&k(e,t,s),s};class l extends f.SizedMixin(g.Focusable,{validSizes:["xxs","xs","s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.color="",this.label="",this.mixedValue=!1,this.nothing=!1,this.role="button",this.selected=!1,this.readonly=!1,this.renderDisabled=()=>u.html`
|
|
19
|
-
<svg
|
|
20
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
21
|
-
class="disabled-icon"
|
|
22
|
-
viewBox="0 0 20 20"
|
|
23
|
-
>
|
|
24
|
-
<path
|
|
25
|
-
d="M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z"
|
|
26
|
-
stroke="none"
|
|
27
|
-
fill="var(--swatch-disabled-icon-color)"
|
|
28
|
-
/>
|
|
29
|
-
<path
|
|
30
|
-
d="M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z"
|
|
31
|
-
stroke="none"
|
|
32
|
-
fill="var(--swatch-disabled-icon-stroke-color)"
|
|
33
|
-
/>
|
|
34
|
-
</svg>
|
|
35
|
-
`,this.renderMixedValue=()=>b.luzmoIcon(b.luzmoDash)}static get styles(){return[u.unsafeCSS(y)]}get value(){return this._value||this.color||this.label}set value(e){if(e===this._value)return;const t=this.value;this._value=e,this.requestUpdate("value",t)}get focusElement(){return this}toggle(e){this.readonly||(this.selected=e??!this.selected)}handleClick(){if(this.disabled||this.mixedValue)return;this.toggle(),this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||this.toggle()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":{e.preventDefault(),this.addEventListener("keyup",this.handleKeyup);break}}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":{this.click();break}}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":{this.removeEventListener("keyup",this.handleKeyup),this.click();break}}}render(){return u.html`
|
|
36
|
-
<div
|
|
37
|
-
class="opacity-checkerboard fill"
|
|
38
|
-
style=${v.o(this.color?`--picked-color: ${this.color}`:void 0)}
|
|
39
|
-
>
|
|
40
|
-
<slot name="image"></slot>
|
|
41
|
-
${p.n(this.disabled,this.renderDisabled)}
|
|
42
|
-
${p.n(this.mixedValue,this.renderMixedValue)}
|
|
43
|
-
</div>
|
|
44
|
-
`}willUpdate(e){var t;if(this.getAttribute("role")||this.setAttribute("role","button"),(e.has("selected")||e.has("role"))&&!this.readonly){const o=this.role==="button"?"aria-pressed":"aria-checked",s=this.role==="button"?"aria-checked":"aria-pressed";e.has("role")&&this.removeAttribute(s),this.setAttribute(o,this.selected?"true":"false")}(e.has("label")||e.has("color")||e.has("mixedValue"))&&(this.label!==this.color&&((t=this.label)!=null&&t.length)?this.setAttribute("aria-label",this.label):this.color?this.setAttribute("aria-label",this.color):this.mixedValue?this.setAttribute("aria-label","Mixed"):this.removeAttribute("aria-label"))}firstUpdated(e){super.firstUpdated(e),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0")}}c([r.n({reflect:!0})],l.prototype,"border",2);c([r.n()],l.prototype,"color",2);c([r.n()],l.prototype,"label",2);c([r.n({type:Boolean,reflect:!0,attribute:"mixed-value"})],l.prototype,"mixedValue",2);c([r.n({type:Boolean,reflect:!0})],l.prototype,"nothing",2);c([r.n({reflect:!0})],l.prototype,"role",2);c([r.n({reflect:!0})],l.prototype,"rounding",2);c([r.n({type:Boolean,reflect:!0})],l.prototype,"selected",2);c([r.n({type:Boolean,reflect:!0})],l.prototype,"readonly",2);c([r.n({reflect:!0})],l.prototype,"shape",2);c([r.n()],l.prototype,"value",1);const C=":host{justify-content:flex-start;align-items:flex-start;gap:var(--luzmo-swatch-group-spacing-regular, var(--swatch-group-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--luzmo-swatch-group-spacing-compact, var(--swatch-group-spacing-compact))}:host([density=spacious]){gap:var(--luzmo-swatch-group-spacing-spacious, var(--swatch-group-spacing-spacious))}:host{--swatch-group-spacing-compact: 2px;--swatch-group-spacing-regular: 4px;--swatch-group-spacing-spacious: 8px}";var A=Object.defineProperty,E=Object.getOwnPropertyDescriptor,d=(h,e,t,o)=>{for(var s=o>1?void 0:o?E(e,t):e,i=h.length-1,a;i>=0;i--)(a=h[i])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&A(e,t,s),s};class n extends f.SizedMixin(r.LuzmoElement,{validSizes:["xs","s","m","l"],noDefaultSize:!0}){constructor(){super(),this._selected=[],this.selectedSet=new Set,this.rovingTabindexController=new x.RovingTabindexController(this,{focusInIndex:e=>{let t=-1;const o=e.findIndex((s,i)=>(!e[t]&&!s.disabled&&(t=i),s.selected&&!s.disabled));return e[o]?o:t},elements:()=>this.swatches,isFocusableElement:e=>!e.disabled}),this.manageChange=async()=>{const e=new Set;this.selectedSet=new Set(this.selected),await Promise.all(this.swatches.map(t=>t.updateComplete)),this.swatches.forEach(t=>{e.add(t.value),t.selected&&this.selectedSet.add(t.value)}),this.selectedSet.forEach(t=>{e.has(t)||this.selectedSet.delete(t)}),this._selected=[...this.selectedSet],this.rovingTabindexController.clearElementCache()},new m.s(this,{config:{attributes:!0,childList:!0,subtree:!0},callback:()=>{this.manageChange()}})}static get styles(){return[u.unsafeCSS(C)]}get selected(){return this._selected}set selected(e){if(e===this.selected)return;const t=this.selected;this._selected=e,this.requestUpdate("selected",t)}focus(e){this.rovingTabindexController.focus(e)}handleChange(e){e.stopPropagation();const t=this.selected;if(!this.selects){e.preventDefault();return}if(this.selects==="single"){const{target:s}=e;if(s.tabIndex=0,s.selected=!0,this.selectedSet.has(s.value))return;this.selectedSet.clear(),this.selectedSet.add(s.value),this.rovingTabindexController.elements.forEach(i=>{i!==s&&(i.selected=!1)})}else if(this.selects==="multiple"){const{target:s}=e;s.selected?this.selectedSet.add(s.value):this.selectedSet.delete(s.value)}this._selected=[...this.selectedSet],this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||(this._selected=t,e.preventDefault())}getPassthroughSwatchActions(e){const t={};e.has("selects")&&(this.selects||e.get("selects")!==void 0)&&(t.selects=this.selects),e.has("border")&&(this.border||e.get("border")!==void 0)&&(t.border=this.border),e.has("rounding")&&(this.rounding||e.get("rounding")!==void 0)&&(t.rounding=this.rounding),e.has("size")&&(this.size!=="m"||e.get("size")!==void 0)&&(t.size=this.size),e.has("shape")&&(this.shape||e.get("shape")!==void 0)&&(t.shape=this.shape);const o=[];return Object.keys(t).length>0&&o.push(s=>{"border"in t&&(s.border=t.border),"rounding"in t&&(s.rounding=t.rounding),"shape"in t&&(s.shape=t.shape),"size"in t&&(s.size=t.size)}),o}getSelectionSwatchActions(e){const t=[];if(!e.has("selects"))return t;this.selects?this.setAttribute("role",this.selects==="single"?"radiogroup":"group"):this.removeAttribute("role");const o={single:"radio",multiple:"checkbox"},s=this.selects?o[this.selects]:"button";return t.push(i=>{i.setAttribute("role",s)}),t}render(){return u.html`
|
|
45
|
-
<slot
|
|
46
|
-
@change=${this.handleChange}
|
|
47
|
-
@slotchange=${this.manageChange}
|
|
48
|
-
></slot>
|
|
49
|
-
`}willUpdate(e){const t=[...this.getPassthroughSwatchActions(e),...this.getSelectionSwatchActions(e)];let o=new Set(this.selected);const s=new Set;e.has("selected")&&t.push(a=>{s.add(a.value),a.selected=!!(o.has(a.value)||!this.hasUpdated&&a.selected)});const i=()=>{o=new Set(this.selected),this.swatches.forEach(a=>{t.forEach(w=>{w(a)})}),e.has("selected")&&(this._selected=[...o.values()].filter(a=>s.has(a)))};this.hasUpdated?i():this.renderRoot.addEventListener("slotchange",()=>{requestAnimationFrame(i)},{once:!0})}}d([r.n({reflect:!0})],n.prototype,"border",2);d([r.n({reflect:!0})],n.prototype,"density",2);d([r.n({reflect:!0})],n.prototype,"rounding",2);d([r.n({type:Array})],n.prototype,"selected",1);d([r.n()],n.prototype,"selects",2);d([r.n({reflect:!0})],n.prototype,"shape",2);d([z.o({flatten:!0})],n.prototype,"swatches",2);customElements.get("luzmo-swatch")||customElements.define("luzmo-swatch",l);customElements.get("luzmo-swatch-group")||customElements.define("luzmo-swatch-group",n);exports.LuzmoSwatch=l;exports.LuzmoSwatchGroup=n;
|
package/lib/switch/index.cjs
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../sized-mixin-BSYHt8nT.cjs"),i=require("lit"),h=require("../base-BCmA9Wxv.cjs"),u=require("../focusable-Dv_6CFaY.cjs"),w=require("../checkbox-mixin-H0Hm-VLk.cjs");class b extends w.CheckboxMixin(u.Focusable){get focusElement(){return this.inputElement}}const s=':host{--switch-focus-indicator-width: var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width));min-block-size:var(--luzmo-switch-height, var(--switch-min-height));--switch-track-height: var(--switch-control-height);max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translate(calc(var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translate(calc((var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%) * -1))}:host([disabled]) #input{cursor:not-allowed}#input:focus-visible+#switch:after{margin:calc(var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * -1)}#label{color:var(--highcontrast-switch-label-color-default, var(--luzmo-switch-label-color-default, var(--switch-label-color-default)));margin-inline:var(--luzmo-switch-control-label-spacing, var(--switch-control-label-spacing));font-size:var(--luzmo-switch-font-size, var(--switch-font-size));line-height:var(--luzmo-switch-line-height, 1.3);transition:color calc(var(--luzmo-animation-duration) * 2) ease-in-out;margin-block-start:var(--luzmo-switch-spacing-top-to-label, var(--switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--luzmo-switch-control-width, var(--switch-control-width));margin-block:calc(var(--luzmo-switch-height, var(--switch-min-height)) - var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-spacing-top-to-control, var(--switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out;block-size:var(--luzmo-switch-track-height, var(--switch-track-height));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out,transform var(--luzmo-animation-duration) ease-in-out,box-shadow var(--luzmo-animation-duration) ease-in-out;inline-size:var(--luzmo-switch-control-height, var(--switch-control-height));block-size:var(--luzmo-switch-control-height, var(--switch-control-height));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow));border-width:var(--luzmo-switch-border-width, var(--luzmo-switch-border-width, var(--luzmo-border-width)));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2 + var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * 2);transition:opacity var(--luzmo-animation-duration) ease-out,margin var(--luzmo-animation-duration) ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color, var(--luzmo-switch-background-color, var(--switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color, var(--luzmo-switch-handle-background-color, var(--switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default, var(--luzmo-switch-handle-border-color-default, var(--switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down, var(--luzmo-switch-handle-border-color-down, var(--switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down, var(--luzmo-switch-label-color-down, var(--switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down, var(--luzmo-switch-background-color-selected-down, var(--switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down, var(--luzmo-switch-handle-border-color-selected-down, var(--switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}@media (hover: hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover, var(--luzmo-switch-handle-border-color-hover, var(--switch-handle-border-color-hover)));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow, none));background-color:var(--highcontrast-switch-background-color-hover, var(--luzmo-switch-background-color-hover, var(--switch-background-color-hover, var(--luzmo-background-color-hover))))}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover, var(--luzmo-switch-label-color-hover, var(--switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover, var(--luzmo-switch-background-color-selected-hover, var(--switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover, var(--luzmo-switch-handle-border-color-selected-hover, var(--switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default, var(--luzmo-switch-background-color-selected-default, var(--switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default, var(--luzmo-switch-handle-border-color-selected-default, var(--switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}@media (forced-colors: active){:host{--highcontrast-switch-label-color-default: ButtonText;--highcontrast-switch-label-color-hover: ButtonText;--highcontrast-switch-label-color-down: ButtonText;--highcontrast-switch-label-color-focus: ButtonText;--highcontrast-switch-label-color-disabled: GrayText;--highcontrast-switch-handle-background-color: ButtonFace;--highcontrast-switch-handle-border-color-default: ButtonText;--highcontrast-switch-handle-border-color-hover: Highlight;--highcontrast-switch-handle-border-color-down: Highlight;--highcontrast-switch-handle-border-color-focus: Highlight;--highcontrast-switch-handle-border-color-disabled: Highlight;--highcontrast-switch-handle-border-color-selected-default: Highlight;--highcontrast-switch-handle-border-color-selected-hover: Highlight;--highcontrast-switch-handle-border-color-selected-down: Highlight;--highcontrast-switch-handle-border-color-selected-focus: Highlight;--highcontrast-switch-background-color: ButtonFace;--highcontrast-switch-background-color-selected-default: Highlight;--highcontrast-switch-background-color-selected-hover: Highlight;--highcontrast-switch-background-color-selected-down: Highlight;--highcontrast-switch-background-color-selected-focus: Highlight;--highcontrast-switch-background-color-selected-disabled: Highlight;--highcontrast-switch-focus-indicator-color: ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}}@media (forced-colors: active) and (hover: hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}@media (forced-colors: active){:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label{color:GrayText}}:host{--switch-handle-border-color-default: var(--luzmo-color-selected);--switch-handle-border-color-hover: var(--luzmo-color-selected-hover);--switch-handle-border-color-down: var(--luzmo-color-selected-down);--switch-handle-border-color-focus: var(--luzmo-color-selected-focus);--switch-handle-border-color-selected-default: var(--luzmo-color-selected-hover);--switch-handle-border-color-selected-hover: var(--luzmo-color-selected-down);--switch-handle-border-color-selected-down: var(--luzmo-color-selected-hard-down);--switch-handle-border-color-selected-focus: var(--luzmo-color-selected-down);--switch-focus-indicator-gap: var(--luzmo-indicator-gap);--switch-label-color-default: var(--luzmo-color-selected-hard);--switch-label-color-hover: var(--luzmo-color-selected-hard-hover);--switch-label-color-down: var(--luzmo-color-selected-hard-down);--switch-label-color-focus: var(--luzmo-color-selected-hard-focus);--switch-label-color-disabled: var(--luzmo-color-disabled);--switch-background-color: var(--luzmo-border-color);--switch-background-color-disabled: var(--luzmo-background-color-disabled);--switch-background-color-selected-disabled: var(--luzmo-color-disabled);--switch-background-color-selected-default: var(--luzmo-color-selected-hover);--switch-background-color-selected-hover: var(--luzmo-color-selected-down);--switch-background-color-selected-down: var(--luzmo-color-selected-hard-down);--switch-background-color-selected-focus: var(--luzmo-color-selected-down);--switch-focus-indicator-width: var(luzmo-indicator-width);--switch-focus-indicator-color: var(--luzmo-primary);--switch-handle-background-color: var(--luzmo-background-color);--switch-handle-border-color-disabled: var(--luzmo-color-disabled);--switch-spacing-top-to-control: calc((var(--switch-min-height) - var(--switch-control-height)) / 2)}:host([disabled]){--switch-label-color-default: var(--luzmo-color-disabled)}:host([emphasized]){--switch-background-color-selected-default: var(--luzmo-primary);--switch-background-color-selected-hover: var(--luzmo-primary-hover);--switch-background-color-selected-down: var(--luzmo-primary-down);--switch-background-color-selected-focus: var(--luzmo-primary-focus);--switch-handle-border-color-selected-default: var(--luzmo-primary);--switch-handle-border-color-selected-hover: var(--luzmo-primary-hover);--switch-handle-border-color-selected-down: var(--luzmo-primary-down);--switch-handle-border-color-selected-focus: var(--luzmo-primary-focus)}:host([size=s]){--switch-min-height: 24px;--switch-control-width: 23px;--switch-control-height: var(--luzmo-font-size-s);--switch-control-label-spacing: var(--luzmo-spacing-3);--switch-spacing-top-to-label: 4px;--switch-font-size: var(--luzmo-font-size-s)}:host{--switch-min-height: 32px;--switch-control-width: 26px;--switch-control-height: var(--luzmo-font-size);--switch-control-label-spacing: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--switch-spacing-top-to-label: 6px;--switch-font-size: var(--luzmo-font-size)}:host([size=l]){--switch-min-height: 40px;--switch-control-width: 28px;--switch-control-height: var(--luzmo-font-size-l);--switch-control-label-spacing: var(--luzmo-spacing-4);--switch-spacing-top-to-label: 9px;--switch-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--switch-min-height: 48px;--switch-control-width: 32px;--switch-control-height: var(--luzmo-font-size-xl);--switch-control-label-spacing: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--switch-spacing-top-to-label: 12px;--switch-font-size: var(--luzmo-font-size-xl)}:host([disabled]){pointer-events:none}:host([thumb=overflow]){--luzmo-switch-border-width: 0px;--switch-control-width: calc(var(--switch-control-height) * 2);--switch-control-box-shadow: 0 .125rem .25rem rgba(var(--luzmo-border-color-rgb), .2), inset 0 0 0 .0625rem rgba(var(--luzmo-border-color-rgb), .2)}:host([thumb=overflow]) #switch{margin-top:calc((var(--luzmo-switch-min-height, var(--switch-min-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow]) #switch:before{inset-block-start:calc(-1 * (var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow][size=s]){--switch-track-height: 10px;--switch-control-height: 16px;--switch-focus-indicator-gap: 5px}:host([thumb=overflow]){--switch-track-height: 10px;--switch-control-height: 18px;--switch-focus-indicator-gap: 6px}:host([thumb=overflow][size=l]){--switch-track-height: 12px;--switch-control-height: 20px;--switch-focus-indicator-gap: 7px}:host([thumb=overflow][size=xl]){--switch-track-height: 12px;--switch-control-height: 22px;--switch-focus-indicator-gap: 8px}';var v=Object.defineProperty,d=(c,o,l,g)=>{for(var r=void 0,e=c.length-1,a;e>=0;e--)(a=c[e])&&(r=a(o,l,r)||r);return r&&v(o,l,r),r};class t extends n.SizedMixin(b){constructor(){super(...arguments),this.emphasized=!1,this.thumb="overflow"}static get styles(){return window.hasOwnProperty("ShadyDOM")?[i.unsafeCSS(s)]:[i.unsafeCSS(s)]}render(){return i.html`
|
|
19
|
-
${super.render()}
|
|
20
|
-
<span id="switch"></span>
|
|
21
|
-
<label id="label" for="input"><slot></slot></label>
|
|
22
|
-
`}firstUpdated(o){super.firstUpdated(o),this.inputElement.setAttribute("role","switch")}updated(o){o.has("checked")&&this.inputElement.setAttribute("aria-checked",this.checked?"true":"false")}}d([h.n({type:Boolean,reflect:!0})],t.prototype,"emphasized");d([h.n({type:String,reflect:!0})],t.prototype,"thumb");customElements.get("luzmo-switch")||customElements.define("luzmo-switch",t);exports.LuzmoSwitch=t;
|
package/lib/tags/index.cjs
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../base-BCmA9Wxv.cjs"),b=require("../sized-mixin-BSYHt8nT.cjs"),l=require("lit");require("../clear-button-D0djuaLb.cjs");const z=require("../focus-visible-B0P9aY_G.cjs"),f=require("../roving-tabindex-By_fCy_e.cjs"),p=require("../query-assigned-nodes-BcKWmGzy.cjs"),k=':host{border-color:var(--highcontrast-tag-border-color, var(--luzmo-tag-border-color, var(--tag-border-color)));background-color:var(--highcontrast-tag-background-color, var(--luzmo-tag-background-color, var(--tag-background-color)));color:var(--highcontrast-tag-content-color, var(--luzmo-tag-content-color, var(--tag-content-color)));border-radius:var(--luzmo-tag-corner-radius, var(--tag-corner-radius));border-width:var(--luzmo-tag-border-width, var(--tag-border-width));block-size:var(--luzmo-tag-height, var(--tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,box-shadow var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,background-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out;border-style:solid;outline:none;align-items:center;justify-content:center;padding-inline-start:calc(var(--luzmo-tag-spacing-inline-start, var(--tag-spacing-inline-start)) - var(--luzmo-tag-border-width, var(--tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));inline-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));flex-shrink:0;margin-inline-end:var(--luzmo-tag-icon-spacing-inline-end, var(--tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-inline-end:var(--luzmo-tag-avatar-spacing-inline-end, var(--tag-avatar-spacing-inline-end))}.clear-button{--luzmo-clear-button-width: fit-content;--clearbutton-fill-size: fit-content;--clearbutton-fill-background-color: transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--luzmo-tag-clear-button-spacing-inline-start, var(--tag-clear-button-spacing-inline-start)) + var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) * -1);margin-inline-end:calc(var(--luzmo-tag-clear-button-spacing-inline-end, var(--tag-clear-button-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)))}.clear-button .luzmo-ClearButton-fill{background-color:var(--luzmo-clearbutton-fill-background-color, var(--clearbutton-fill-background-color));inline-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size));block-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--luzmo-tag-label-line-height, var(--tag-label-line-height));font-weight:var(--luzmo-tag-label-font-weight, var(--tag-label-font-weight));font-size:var(--luzmo-tag-font-size, var(--tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;display:flex;align-items:center;margin-inline-end:calc(var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active, var(--luzmo-tag-border-color-active, var(--tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active, var(--luzmo-tag-background-color-active, var(--tag-background-color-active)));color:var(--highcontrast-tag-content-color-active, var(--luzmo-tag-content-color-active, var(--tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus, var(--luzmo-tag-border-color-focus, var(--tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus, var(--luzmo-tag-background-color-focus, var(--tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus, var(--luzmo-tag-content-color-focus, var(--tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:"";border-color:var(--highcontrast-tag-focus-ring-color, var(--luzmo-tag-focus-ring-color, var(--tag-focus-ring-color)));border-radius:calc(var(--luzmo-tag-corner-radius, var(--tag-corner-radius)) + var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) + var(--luzmo-tag-border-width, var(--tag-border-width)));border-width:var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-block-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected, var(--luzmo-tag-border-color-selected, var(--tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected, var(--luzmo-tag-background-color-selected, var(--tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active, var(--luzmo-tag-border-color-selected-active, var(--tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active, var(--luzmo-tag-background-color-selected-active, var(--tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus, var(--luzmo-tag-border-color-selected-focus, var(--tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus, var(--luzmo-tag-background-color-selected-focus, var(--tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid, var(--luzmo-tag-border-color-invalid, var(--tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid, var(--luzmo-tag-content-color-invalid, var(--tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active, var(--luzmo-tag-border-color-invalid-active, var(--tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active, var(--luzmo-tag-content-color-invalid-active, var(--tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus, var(--luzmo-tag-border-color-invalid-focus, var(--tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus, var(--luzmo-tag-content-color-invalid-focus, var(--tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected, var(--luzmo-tag-border-color-invalid-selected, var(--tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected, var(--luzmo-tag-background-color-invalid-selected, var(--tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active, var(--luzmo-tag-border-color-invalid-selected-active, var(--tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active, var(--luzmo-tag-background-color-invalid-selected-active, var(--tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus, var(--luzmo-tag-border-color-invalid-selected-focus, var(--tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus, var(--luzmo-tag-background-color-invalid-selected-focus, var(--tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized, var(--luzmo-tag-border-color-emphasized, var(--tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized, var(--luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)));--luzmo-clear-button-background-color-hover: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-focus: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-down: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) )}@media (hover: hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover, var(--luzmo-tag-border-color-hover, var(--tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover, var(--luzmo-tag-background-color-hover, var(--tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover, var(--luzmo-tag-content-color-hover, var(--tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover, var(--luzmo-tag-border-color-selected-hover, var(--tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover, var(--luzmo-tag-background-color-selected-hover, var(--tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover, var(--luzmo-tag-border-color-invalid-hover, var(--tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover, var(--luzmo-tag-content-color-invalid-hover, var(--tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover, var(--luzmo-tag-border-color-invalid-selected-hover, var(--tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover, var(--luzmo-tag-background-color-invalid-selected-hover, var(--tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover, var(--luzmo-tag-border-color-emphasized-hover, var(--tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover, var(--luzmo-tag-background-color-emphasized-hover, var(--tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active, var(--luzmo-tag-border-color-emphasized-active, var(--tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active, var(--luzmo-tag-background-color-emphasized-active, var(--tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus, var(--luzmo-tag-border-color-emphasized-focus, var(--tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus, var(--luzmo-tag-background-color-emphasized-focus, var(--tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled, var(--luzmo-tag-border-color-disabled, var(--tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled, var(--luzmo-tag-background-color-disabled, var(--tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled, var(--luzmo-tag-content-color-disabled, var(--tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--luzmo-avatar-opacity-disabled, var(--avatar-opacity-disabled))}@media (forced-colors: active){:host{--highcontrast-tag-border-color: ButtonText;--highcontrast-tag-border-color-hover: ButtonText;--highcontrast-tag-border-color-active: ButtonText;--highcontrast-tag-border-color-focus: Highlight;--highcontrast-tag-background-color: ButtonFace;--highcontrast-tag-background-color-hover: ButtonFace;--highcontrast-tag-background-color-active: ButtonFace;--highcontrast-tag-background-color-focus: ButtonFace;--highcontrast-tag-content-color: ButtonText;--highcontrast-tag-content-color-hover: ButtonText;--highcontrast-tag-content-color-active: ButtonText;--highcontrast-tag-content-color-focus: ButtonText;--highcontrast-tag-focus-ring-color: Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected: Highlight;--highcontrast-tag-border-color-selected-hover: Highlight;--highcontrast-tag-border-color-selected-active: Highlight;--highcontrast-tag-border-color-selected-focus: Highlight;--highcontrast-tag-background-color-selected: Highlight;--highcontrast-tag-background-color-selected-hover: Highlight;--highcontrast-tag-background-color-selected-active: Highlight;--highcontrast-tag-background-color-selected-focus: Highlight;--highcontrast-tag-content-color-selected: HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled: GrayText;--highcontrast-tag-background-color-disabled: ButtonFace;--highcontrast-tag-content-color-disabled: GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid: Highlight;--highcontrast-tag-border-color-invalid-hover: Highlight;--highcontrast-tag-border-color-invalid-active: Highlight;--highcontrast-tag-border-color-invalid-focus: Highlight;--highcontrast-tag-content-color-invalid: CanvasText;--highcontrast-tag-content-color-invalid-hover: CanvasText;--highcontrast-tag-content-color-invalid-active: CanvasText;--highcontrast-tag-content-color-invalid-focus: CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected: Highlight;--highcontrast-tag-border-color-invalid-selected-hover: Highlight;--highcontrast-tag-border-color-invalid-selected-focus: Highlight;--highcontrast-tag-border-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected: Highlight;--highcontrast-tag-background-color-invalid-selected-hover: Highlight;--highcontrast-tag-background-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected-focus: Highlight;--highcontrast-tag-content-color-invalid-selected: HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized: Highlight;--highcontrast-tag-border-color-emphasized-hover: Highlight;--highcontrast-tag-border-color-emphasized-active: Highlight;--highcontrast-tag-border-color-emphasized-focus: Highlight;--highcontrast-tag-background-color-emphasized: ButtonFace;--highcontrast-tag-background-color-emphasized-hover: ButtonFace;--highcontrast-tag-background-color-emphasized-active: ButtonFace;--highcontrast-tag-background-color-emphasized-focus: ButtonFace;--highcontrast-tag-content-color-emphasized: CanvasText}}:host{--tag-border-color: var(--luzmo-border-color);--tag-border-color-hover: var(--luzmo-border-color-hover);--tag-border-color-active: var(--luzmo-border-color-active);--tag-border-color-focus: var(--luzmo-border-color-focus);--tag-size-small-corner-radius: var(--luzmo-border-radius-s);--tag-size-medium-corner-radius: var(--luzmo-border-radius);--tag-size-large-corner-radius: var(--luzmo-border-radius);--tag-background-color: var(--luzmo-background-color);--tag-background-color-hover: var(--luzmo-background-color-hover);--tag-background-color-active: var(--luzmo-background-color-active);--tag-background-color-focus: var(--luzmo-background-color-focus);--tag-content-color: var(--luzmo-font-color);--tag-content-color-hover: var(--luzmo-font-color-hover);--tag-content-color-active: var(--luzmo-font-color-active);--tag-content-color-focus: var(--luzmo-font-color-focus);--tag-border-color-selected: var(--luzmo-border-color-down);--tag-border-color-selected-hover: var(--luzmo-border-color-down);--tag-border-color-selected-active: var(--luzmo-border-color-down);--tag-border-color-selected-focus: var(--luzmo-border-color-down);--tag-border-color-disabled: var(--luzmo-border-color-disabled);--tag-background-color-disabled: var(--luzmo-background-color-disabled);--avatar-opacity-disabled: .3;--tag-animation-duration: var(--luzmo-animation-duration);--tag-border-width: var(--luzmo-border-width);--tag-focus-ring-thickness: var(--luzmo-indicator-width);--tag-focus-ring-gap: var(--luzmo-indicator-gap);--tag-focus-ring-color: var(--luzmo-indicator-color);--tag-label-line-height: var(--luzmo-line-height);--tag-label-font-weight: var(--luzmo-font-weight);--tag-content-color-selected: var(--luzmo-font-color-down);--tag-background-color-selected: var(--luzmo-background-color-down);--tag-background-color-selected-hover: var(--luzmo-background-color-down);--tag-background-color-selected-active: var(--luzmo-background-color-down);--tag-background-color-selected-focus: var(--luzmo-background-color-down);--tag-border-color-invalid: var(--luzmo-color-negative);--tag-border-color-invalid-hover: var(--luzmo-color-negative-hover);--tag-border-color-invalid-active: var(--luzmo-color-negative-down);--tag-border-color-invalid-focus: var(--luzmo-color-negative-focus);--tag-content-color-invalid: var(--luzmo-color-negative);--tag-content-color-invalid-hover: var(--luzmo-color-negative-hover);--tag-content-color-invalid-active: var(--luzmo-color-negative-down);--tag-content-color-invalid-focus: var(--luzmo-color-negative-focus);--tag-border-color-invalid-selected: var(--luzmo-color-negative-down);--tag-border-color-invalid-selected-hover: var(--luzmo-color-negative-down);--tag-border-color-invalid-selected-focus: var(--luzmo-color-negative-down);--tag-border-color-invalid-selected-active: var(--luzmo-color-negative-down);--tag-background-color-invalid-selected: var(--luzmo-background-color-down);--tag-background-color-invalid-selected-hover: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-active: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-focus: var( --luzmo-background-color-down );--tag-content-color-invalid-selected: var(--luzmo-color-negative-down);--tag-border-color-emphasized: var(--luzmo-primary);--tag-border-color-emphasized-hover: var(--luzmo-primary-hover);--tag-border-color-emphasized-active: var(--luzmo-primary-down);--tag-border-color-emphasized-focus: var(--luzmo-primary-focus);--tag-background-color-emphasized: var(--luzmo-primary);--tag-background-color-emphasized-hover: var(--luzmo-primary-hover);--tag-background-color-emphasized-active: var(--luzmo-primary-down);--tag-background-color-emphasized-focus: var(--luzmo-primary-focus);--tag-content-color-emphasized: white;--tag-content-color-disabled: var(--luzmo-color-disabled);--tag-icon-spacing-inline-end: var(--luzmo-spacing-3);--tag-icon-size: var(--luzmo-font-icon-size-s);--tag-avatar-spacing-inline-end: var(--luzmo-spacing-3);--tag-font-size: var(--luzmo-font-size)}:host([size=s]){--tag-height: var(--luzmo-component-height-xs);--tag-font-size: var(--luzmo-font-size-s);--tag-icon-size: var(--luzmo-font-size-s);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-2);--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-3);--tag-label-spacing-inline-end: var(--luzmo-spacing-3);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host{--tag-height: var(--luzmo-component-height-s);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-font-size);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-label-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-3)}:host([size=l]){--tag-height: var(--luzmo-component-height);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-font-size);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-3);--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-4);--tag-label-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--tag-height: var(--luzmo-component-height-l);--tag-font-size: var(--luzmo-font-size-l);--tag-icon-size: var(--luzmo-font-size-l);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-corner-radius: var(--luzmo-border-radius-l);--tag-spacing-inline-start: var(--luzmo-spacing-5);--tag-label-spacing-inline-end: var(--luzmo-spacing-5);--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-4)}:host([invalid]) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-key-focus, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]):hover .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]:is(:active,[active])) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([size=xs]){--icon-size: var(--workflow-icon-size-50)}:host([size=s]){--icon-size: var(--workflow-icon-size-75)}:host([size=m]){--icon-size: var(--workflow-icon-size-100)}:host([size=l]){--icon-size: var(--workflow-icon-size-200)}:host([size=xl]){--icon-size: var(--workflow-icon-size-300)}:host([size=xxl]){--icon-size: var(--workflow-icon-size-400)}';var w=Object.defineProperty,u=(c,o,a,s)=>{for(var r=void 0,t=c.length-1,e;t>=0;t--)(e=c[t])&&(r=e(o,a,r)||r);return r&&w(o,a,r),r};class i extends b.SizedMixin(n.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.deletable=!1,this.disabled=!1,this.readonly=!1,this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)},this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)},this.handleKeydown=o=>{if(!this.deletable||this.disabled)return;const{code:a}=o;switch(a){case"Backspace":case"Space":case"Delete":{this.delete();break}default:return}},this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[l.unsafeCSS(k)]}delete(){this.readonly||!this.dispatchEvent(new Event("delete",{bubbles:!0,cancelable:!0,composed:!0}))||this.remove()}render(){return l.html`
|
|
19
|
-
<slot name="avatar"></slot>
|
|
20
|
-
<slot name="icon"></slot>
|
|
21
|
-
<span class="label"><slot></slot></span>
|
|
22
|
-
${this.deletable?l.html`
|
|
23
|
-
<luzmo-clear-button
|
|
24
|
-
class="clear-button"
|
|
25
|
-
?disabled=${this.disabled}
|
|
26
|
-
label="Remove"
|
|
27
|
-
.size=${this.size}
|
|
28
|
-
tabindex="-1"
|
|
29
|
-
@click=${this.delete}
|
|
30
|
-
></luzmo-clear-button>
|
|
31
|
-
`:l.nothing}
|
|
32
|
-
`}firstUpdated(o){super.firstUpdated(o),this.hasAttribute("role")||this.setAttribute("role","listitem"),this.deletable&&this.setAttribute("tabindex","0")}updated(o){super.updated(o),o.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}u([n.n({type:Boolean,reflect:!0})],i.prototype,"deletable");u([n.n({type:Boolean,reflect:!0})],i.prototype,"disabled");u([n.n({type:Boolean,reflect:!0})],i.prototype,"readonly");const x=":host{flex-wrap:wrap;margin:0;padding:0;list-style:none;display:inline-flex}::slotted(*){margin-block:var(--luzmo-tag-group-item-margin-block, var(--tag-group-item-margin-block));margin-inline:var(--luzmo-tag-group-item-margin-inline, var(--tag-group-item-margin-inline))}:host{--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-2)}:host{--luzmo-clear-button-width: fit-content;display:inline-flex;margin:0;padding:0;list-style:none}:host([size=s]){--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-2)}:host([size=l]){--luzmo-tag-group-item-margin-block: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--luzmo-tag-group-item-margin-inline: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=xl]){--luzmo-tag-group-item-margin-block: var(--luzmo-spacing-3);--luzmo-tag-group-item-margin-inline: var(--luzmo-spacing-3)}:host{--clear-button-width: fit-content;display:inline-flex;margin:0;padding:0;list-style:none}";var y=Object.defineProperty,T=(c,o,a,s)=>{for(var r=void 0,t=c.length-1,e;t>=0;t--)(e=c[t])&&(r=e(o,a,r)||r);return r&&y(o,a,r),r};class h extends z.FocusVisiblePolyfillMixin(b.SizedMixin(n.LuzmoElement)){constructor(){super(),this.rovingTabindexController=new f.RovingTabindexController(this,{focusInIndex:o=>o.findIndex(a=>!a.disabled&&a.deletable),elements:()=>this.tags,isFocusableElement:o=>!o.disabled&&o.deletable}),this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)},this.handleKeydown=o=>{const{code:a}=o;if(a!=="PageUp"&&a!=="PageDown")return;const s=(v,m)=>v[(v.length+m)%v.length],r=[...this.getRootNode().querySelectorAll("luzmo-tags")];if(r.length<2)return;o.preventDefault();const t=r.indexOf(this),e=a==="PageUp"?-1:1;let d=t+e,g=s(r,d);for(;g.tags.length===0;)d+=e,g=s(r,d);g.focus()},this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)},this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[l.unsafeCSS(x)]}get tags(){return this.defaultNodes.filter(o=>o instanceof i)}focus(){this.rovingTabindexController.focus()}handleSlotchange(){this.rovingTabindexController.clearElementCache()}render(){return l.html` <slot @slotchange=${this.handleSlotchange}></slot> `}firstUpdated(){this.hasAttribute("role")||this.setAttribute("role","list"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Tags")}}T([p.n()],h.prototype,"defaultNodes");customElements.get("luzmo-tag")||customElements.define("luzmo-tag",i);customElements.get("luzmo-tags")||customElements.define("luzmo-tags",h);exports.LuzmoTag=i;exports.LuzmoTags=h;
|
package/lib/text-field/index.cjs
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../text-field-C6Aa7XOb.cjs"),e=require("lit"),x=require("@luzmo/icons"),r=require("../base-BCmA9Wxv.cjs"),s=require("../sized-mixin-BSYHt8nT.cjs"),u="@media (forced-colors: active){:host{--highcontrast-helptext-content-color-default: CanvasText;--highcontrast-helptext-icon-color-default: CanvasText}:host,.text,.icon{forced-color-adjust:none}}:host{--helptext-bottom-to-workflow-icon: 3px;color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)));font-size:var(var(--luzmo-helptext-font-size, var(--helptext-font-size)), 12px);min-block-size:var(var(--luzmo-helptext-min-height, var(--helptext-min-height)), 24px);display:flex}.icon{block-size:var(var(--luzmo-helptext-icon-size, var(--helptext-icon-size)), 18px);inline-size:var(var(--luzmo-helptext-icon-size, var(--helptext-icon-size)), 18px);flex-shrink:0;margin-inline-end:var(var(--luzmo-helptext-text-to-visual, var(--helptext-text-to-visual)), 7px);padding-block-start:var(var(--luzmo-helptext-top-to-workflow-icon, var(--helptext-top-to-workflow-icon)), 3px);padding-block-end:var(var(--luzmo-helptext-bottom-to-workflow-icon, --helptext-bottom-to-workflow-icon), 3px)}.text{line-height:var(var(--luzmo-helptext-line-height, var(--helptext-line-height), 1.3));padding-block-start:var(var(--luzmo-helptext-top-to-text, var(--helptext-top-to-text)), 4px);padding-block-end:var(var(--luzmo-helptext-bottom-to-text, var(--helptext-bottom-to-text)), 5px)}:host(:lang(ja)) .text,:host(:lang(ko)) .text,:host(:lang(zh)) .text{line-height:var(var(--luzmo-helptext-line-height-cjk, var(--helptext-line-height-cjk)), 1.4)}:host([variant=neutral]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)))}:host([variant=neutral]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([variant=negative]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([variant=negative]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([disabled]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([disabled]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host{--helptext-line-height: 1.3;--helptext-content-color-default: var(--luzmo-font-color);--helptext-icon-color-default: var(--luzmo-font-color);--helptext-disabled-content-color: var(--luzmo-font-color-disabled)}:host([variant=neutral]){--helptext-content-color-default: var(var(--luzmo-font-color));--helptext-icon-color-default: var(var(--luzmo-font-color))}:host([variant=negative]){--helptext-content-color-default: var(var(--luzmo-color-negative));--helptext-icon-color-default: var(var(--luzmo-color-negative))}:host([disabled]){--helptext-content-color-default: var(--luzmo-font-color-disabled);--helptext-icon-color-default: var(--luzmo-font-color-disabled)}:host(:lang(ja)){--helptext-line-height-cjk: 1.4}:host(:lang(zh)){--helptext-line-height-cjk: 1.4}:host(:lang(ko)){--helptext-line-height-cjk: 1.4}:host([size=s]){--helptext-min-height: 24px;--helptext-icon-size: 16px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 4px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host{--helptext-min-height: 24px;--helptext-icon-size: 18px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 3px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host([size=l]){--helptext-min-height: 32px;--helptext-icon-size: 20px;--helptext-font-size: 14px;--helptext-text-to-visual: 8px;--helptext-top-to-workflow-icon: 6px;--helptext-top-to-text: 6px;--helptext-bottom-to-text: 5px}:host([size=xl]){--helptext-min-height: 40px;--helptext-icon-size: 22px;--helptext-font-size: 16px;--helptext-text-to-visual: 9px;--helptext-top-to-workflow-icon: 9px;--helptext-top-to-text: 9px;--helptext-bottom-to-text: 12px}";var v=Object.defineProperty,p=(l,a,i,d)=>{for(var t=void 0,n=l.length-1,h;n>=0;n--)(h=l[n])&&(t=h(a,i,t)||t);return t&&v(a,i,t),t};class o extends s.SizedMixin(r.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.icon=!1,this.variant="neutral"}static get styles(){return[e.unsafeCSS(u)]}render(){return e.html`
|
|
19
|
-
${this.variant==="negative"&&this.icon?e.html` ${x.luzmoIcon(x.luzmoClose14)} `:e.nothing}
|
|
20
|
-
<div class="text"><slot></slot></div>
|
|
21
|
-
`}}p([r.n({type:Boolean,reflect:!0})],o.prototype,"icon");p([r.n({reflect:!0})],o.prototype,"variant");customElements.get("luzmo-text-field")||customElements.define("luzmo-text-field",c.LuzmoTextField);customElements.get("luzmo-help-text")||customElements.define("luzmo-help-text",o);exports.HelpText=o;
|
package/lib/toast/index.cjs
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../base-BCmA9Wxv.cjs"),n=require("lit");require("../close-button-BrfeZvjk.cjs");const v=require("../focus-visible-B0P9aY_G.cjs"),d=require("@luzmo/icons"),g="@media (forced-colors: active){:host{--highcontrast-toast-border-color: ButtonText;border:var(--luzmo-toast-border-width, var(--toast-border-width)) solid var(--highcontrast-toast-border-color, transparent)}}:host{box-sizing:border-box;min-block-size:var(--luzmo-toast-block-size, var(--toast-block-size));max-inline-size:var(--luzmo-toast-max-inline-size, var(--toast-max-inline-size));border-radius:var(--luzmo-toast-corner-radius, var(--toast-corner-radius));font-size:var(--luzmo-toast-font-size, var(--toast-font-size));font-weight:var(--luzmo-toast-font-weight, var(--toast-font-weight));-webkit-font-smoothing:antialiased;background-color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));overflow-wrap:anywhere;flex-direction:row;align-items:stretch;padding-inline-start:var(--luzmo-toast-spacing-start-edge-to-text-and-icon, var(--toast-spacing-start-edge-to-text-and-icon));display:inline-flex}:host([variant=negative]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=info]){background-color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=info]),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=positive]){background-color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}:host([variant=positive]),:host([variant=positive]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}.type{flex-grow:0;flex-shrink:0;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-icon, var(--toast-spacing-top-edge-to-icon));margin-inline-start:0;margin-inline-end:var(--luzmo-toast-spacing-icon-to-text, var(--toast-spacing-icon-to-text))}.content,.type{color:var(--highcontrast-toast-text-and-icon-color, var(--luzmo-toast-text-and-icon-color, var(--toast-text-and-icon-color)))}.content{box-sizing:border-box;line-height:var(--luzmo-toast-line-height, var(--toast-line-height));text-align:start;flex:auto;padding-block-start:calc(var(--luzmo-toast-spacing-top-edge-to-text, var(--toast-spacing-top-edge-to-text)) - var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start)));padding-block-end:calc(var(--luzmo-toast-spacing-bottom-edge-to-text, var(--toast-spacing-bottom-edge-to-text)) - var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end)));padding-inline-start:0;padding-inline-end:var(--luzmo-toast-spacing-text-to-action-button-horizontal, var(--toast-spacing-text-to-action-button-horizontal));display:inline-block}.content:lang(ja),.content:lang(ko),.content:lang(zh){line-height:var(--luzmo-toast-line-height-cjk, var(--toast-line-height-cjk))}.buttons{border-inline-start-color:var(--luzmo-toast-divider-color, var(--toast-divider-color));flex:none;align-items:flex-start;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-divider, var(--toast-spacing-top-edge-to-divider));margin-block-end:var(--luzmo-toast-spacing-bottom-edge-to-divider, var(--toast-spacing-bottom-edge-to-divider));padding-inline-end:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button));display:flex}.buttons .luzmo-CloseButton{align-self:flex-start}.body{flex-wrap:wrap;flex:auto;align-self:center;align-items:center;padding-block-start:var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start));padding-block-end:var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end));display:flex}.body ::slotted([slot=action]){margin-inline-start:auto;margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body ::slotted([slot=action]:dir(rtl)),:host([dir=rtl]) .body ::slotted([slot=action]){margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body+.buttons{border-inline-start-style:solid;border-inline-start-width:1px;padding-inline-start:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button))}:host{--toast-background-color-default: rgb(80, 80, 80);--toast-font-weight: var(--luzmo-font-weight);--toast-font-size: var(--luzmo-font-size);--toast-corner-radius: var(--luzmo-border-radius);--toast-block-size: var(--luzmo-component-height);--toast-max-inline-size: 360px;--toast-border-width: var(--luzmo-border-width);--toast-line-height: var(--luzmo-line-height);--toast-line-height-cjk: 1.5;--toast-spacing-icon-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--toast-spacing-start-edge-to-text-and-icon: var(--luzmo-spacing-5);--toast-spacing-text-and-action-button-to-divider: var(--luzmo-spacing-5);--toast-spacing-top-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-bottom-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-text-to-action-button-horizontal: var(--luzmo-spacing-5);--toast-spacing-close-button: var(--luzmo-spacing-3);--toast-spacing-block-start: var(--luzmo-spacing-3);--toast-spacing-block-end: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-bottom-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-negative-background-color-default: var(--luzmo-color-negative);--toast-positive-background-color-default: var(--luzmo-color-positive);--toast-informative-background-color-default: var(--luzmo-color-informative);--toast-text-and-icon-color: rgb(255, 255, 255);--toast-divider-color: rgba(255, 255, 255, .2)}:host{--overlay-animation-distance: var(--spacing-100);--overlay-animation-duration: var(--animation-duration-100);opacity:0;pointer-events:none;transition:transform var(--overlay-animation-duration) ease-in-out,opacity var(--overlay-animation-duration) ease-in-out,visibility 0s linear var(--overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}:host([variant=error]),:host([variant=warning]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active),:host([variant=warning]),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}";var h=Object.defineProperty,m=Object.getOwnPropertyDescriptor,r=(l,t,o,i)=>{for(var a=i>1?void 0:i?m(t,o):t,c=l.length-1,u;c>=0;c--)(u=l[c])&&(a=(i?u(t,o,a):u(a))||a);return i&&a&&h(t,o,a),a};const p=["negative","positive","info"];class e extends v.FocusVisiblePolyfillMixin(s.LuzmoElement){constructor(){super(...arguments),this.open=!1,this._timeout=null,this._variant="",this.countdownStart=0,this.nextCount=-1,this.doCountdown=t=>{this.countdownStart||(this.countdownStart=performance.now()),t-this.countdownStart>this._timeout?(this.shouldClose(),this.countdownStart=0):this.countdown()},this.countdown=()=>{cancelAnimationFrame(this.nextCount),this.nextCount=requestAnimationFrame(this.doCountdown)},this.holdCountdown=()=>{this.stopCountdown(),this.addEventListener("focusout",this.resumeCountdown)},this.resumeCountdown=()=>{this.removeEventListener("focusout",this.holdCountdown),this.countdown()}}static get styles(){return[n.unsafeCSS(g)]}set timeout(t){const i=typeof t!==null&&t>0?Math.max(6e3,t):null,a=this.timeout;i&&this.countdownStart&&(this.countdownStart=performance.now()),this._timeout=i,this.requestUpdate("timeout",a)}get timeout(){return this._timeout}set variant(t){if(t===this.variant)return;const o=this.variant;p.includes(t)?(this.setAttribute("variant",t),this._variant=t):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",o)}get variant(){return this._variant}renderIcon(t,o){switch(t){case"info":return n.html`
|
|
19
|
-
<luzmo-icon
|
|
20
|
-
.icon=${d.luzmoInfoCircleOutline}
|
|
21
|
-
label=${o||"Information"}
|
|
22
|
-
class="type"
|
|
23
|
-
></luzmo-icon>
|
|
24
|
-
`;case"negative":return n.html`
|
|
25
|
-
<luzmo-icon
|
|
26
|
-
.icon=${d.luzmoAlertOutline}
|
|
27
|
-
label=${o||"Error"}
|
|
28
|
-
class="type"
|
|
29
|
-
></luzmo-icon>
|
|
30
|
-
`;case"positive":return n.html`
|
|
31
|
-
<luzmo-icon
|
|
32
|
-
.icon=${d.luzmoCheckCircleOutline}
|
|
33
|
-
label=${o||"Success"}
|
|
34
|
-
class="type"
|
|
35
|
-
></luzmo-icon>
|
|
36
|
-
`;default:return n.html``}}startCountdown(){this.countdown(),this.addEventListener("focusin",this.holdCountdown)}stopCountdown(){cancelAnimationFrame(this.nextCount),this.countdownStart=0}shouldClose(){this.dispatchEvent(new CustomEvent("close",{composed:!0,bubbles:!0,cancelable:!0}))&&this.close()}close(){this.open=!1}render(){return n.html`
|
|
37
|
-
${this.renderIcon(this.variant,this.iconLabel)}
|
|
38
|
-
<div class="body" role="alert">
|
|
39
|
-
<div class="content">
|
|
40
|
-
<slot></slot>
|
|
41
|
-
</div>
|
|
42
|
-
<slot name="action"></slot>
|
|
43
|
-
</div>
|
|
44
|
-
<div class="buttons">
|
|
45
|
-
<luzmo-close-button
|
|
46
|
-
@click=${this.shouldClose}
|
|
47
|
-
label="Close"
|
|
48
|
-
static-color="white"
|
|
49
|
-
></luzmo-close-button>
|
|
50
|
-
</div>
|
|
51
|
-
`}updated(t){super.updated(t),t.has("open")&&(this.open?this.timeout&&this.startCountdown():this.timeout&&this.stopCountdown()),t.has("timeout")&&(this.timeout!==null&&this.open?this.startCountdown():this.stopCountdown())}}r([s.n({type:Boolean,reflect:!0})],e.prototype,"open",2);r([s.n({type:Number})],e.prototype,"timeout",1);r([s.n({type:String})],e.prototype,"variant",1);r([s.n({type:String,attribute:"icon-label"})],e.prototype,"iconLabel",2);customElements.get("luzmo-toast")||customElements.define("luzmo-toast",e);exports.LuzmoToast=e;
|
package/lib/tooltip/index.cjs
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../base-BCmA9Wxv.cjs"),c=require("../focusable-selectors-BgFlyFcY.cjs"),h=require("../dependency-manger-C5HCkMMB.cjs"),z=require("../sized-mixin-BSYHt8nT.cjs"),m=require("lit"),u=require("../query-BL-TJj7K.cjs"),d=require("../if-defined-Cv6xanXh.cjs"),g="#tooltip{pointer-events:none;visibility:hidden;opacity:0;transition:transform .13s ease-in-out,opacity .13s ease-in-out,visibility 0s linear .13s;transition:transform var(--luzmo-overlay-animation-duration, .13s) ease-in-out,opacity var(--luzmo-overlay-animation-duration, .13s) ease-in-out,visibility 0s linear var(--luzmo-overlay-animation-duration, .13s)}:host([open]) #tooltip{pointer-events:auto;visibility:visible;opacity:1;transition-delay:0s;transition-delay:var(--luzmo-overlay-animation-duration-opened, 0s)}@media (forced-colors: active){#tooltip{border:1px solid rgba(0,0,0,0)}#tip{--highcontrast-tooltip-background-color-default: CanvasText;--highcontrast-tooltip-background-color-informative: CanvasText;--highcontrast-tooltip-background-color-positive: CanvasText;--highcontrast-tooltip-background-color-negative: CanvasText;forced-color-adjust:none}}#tooltip{box-sizing:border-box;vertical-align:top;inline-size:auto;padding-inline:var(--luzmo-tooltip-spacing-inline, .688rem);border-radius:var(--luzmo-tooltip-border-radius, .313rem);block-size:auto;min-block-size:var(--luzmo-tooltip-height, 1.875rem);max-inline-size:var(--luzmo-tooltip-max-inline-size, 12.5rem);background-color:var(--highcontrast-tooltip-background-color-default, var(--luzmo-tooltip-background-color-default, rgb(109, 109, 109)));color:var(--luzmo-tooltip-content-color, white);font-size:var(--luzmo-tooltip-font-size, var(--tooltip-font-size, .938rem));font-weight:var(--luzmo-tooltip-font-weight, 400);line-height:var(--luzmo-tooltip-line-height, 1.3);word-break:break-word;-webkit-font-smoothing:antialiased;cursor:default;-webkit-user-select:none;user-select:none;flex-direction:row;align-items:center;display:inline-flex;position:relative}:host(:lang(ja)) #tooltip,:host(:lang(ko)) #tooltip,:host(:lang(zh)) #tooltip{line-height:var(--luzmo-tooltip-cjk-line-height, 1.5)}#tooltip p{margin:0}:host([variant=info]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-informative, var(--luzmo-tooltip-background-color-informative, rgb(2, 101, 220)))}:host([variant=positive]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-positive, var(--luzmo-tooltip-background-color-positive, rgb(0, 122, 77)))}:host([variant=negative]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-negative, var(--luzmo-tooltip-background-color-negative, rgb(211, 21, 16)))}#tip{block-size:var(--luzmo-tooltip-tip-square-size, .625rem);inline-size:var(--luzmo-tooltip-tip-square-size, .625rem);inset-block-start:100%;background-color:var(--highcontrast-tooltip-background-color-default, var(--luzmo-tooltip-background-color-default, rgb(109, 109, 109)));clip-path:polygon(0 calc(0% - var(--luzmo-tooltip-tip-antialiasing-inset, .5px)),50% var(--luzmo-tooltip-tip-height-percentage, 50%),100% calc(0% - var(--luzmo-tooltip-tip-antialiasing-inset, .5px)));position:absolute;left:50%;transform:translate(-50%)}:host([variant=info]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-informative, var(--luzmo-tooltip-background-color-informative, rgb(2, 101, 220)))}:host([variant=positive]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-positive, var(--luzmo-tooltip-background-color-positive, rgb(0, 122, 77)))}:host([variant=negative]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-negative, var(--luzmo-tooltip-background-color-negative, rgb(211, 21, 16)))}:host([placement*=top]) #tooltip #tip,.luzmo-Tooltip--top-end #tip,.luzmo-Tooltip--top-left #tip,.luzmo-Tooltip--top-right #tip,.luzmo-Tooltip--top-start #tip{inset-block-start:100%}:host([placement*=bottom]) #tooltip #tip,.luzmo-Tooltip--bottom-end #tip,.luzmo-Tooltip--bottom-left #tip,.luzmo-Tooltip--bottom-right #tip,.luzmo-Tooltip--bottom-start #tip{clip-path:polygon(50% calc(100% - var(--luzmo-tooltip-tip-height-percentage, 50%)),0 calc(100% + var(--luzmo-tooltip-tip-antialiasing-inset, .5px)),100% calc(100% + var(--luzmo-tooltip-tip-antialiasing-inset, .5px)));inset-block:auto 100%}.luzmo-Tooltip--bottom-end #tip,.luzmo-Tooltip--bottom-left #tip,.luzmo-Tooltip--bottom-right #tip,.luzmo-Tooltip--bottom-start #tip,.luzmo-Tooltip--top-end #tip,.luzmo-Tooltip--top-left #tip,.luzmo-Tooltip--top-right #tip,.luzmo-Tooltip--top-start #tip{transform:none}.luzmo-Tooltip--bottom-left #tip,.luzmo-Tooltip--top-left #tip{inset-inline-start:var(--luzmo-tooltip-pointer-corner-spacing, .313rem)}.luzmo-Tooltip--bottom-right #tip,.luzmo-Tooltip--top-right #tip{inset-inline:auto var(--luzmo-tooltip-pointer-corner-spacing, .313rem)}.luzmo-Tooltip--bottom-start #tip,.luzmo-Tooltip--top-start #tip{inset-inline:var(--luzmo-tooltip-pointer-corner-spacing, .313rem) auto}.luzmo-Tooltip--bottom-start #tip:dir(rtl),.luzmo-Tooltip--top-start #tip:dir(rtl),:host([dir=rtl]) .luzmo-Tooltip--bottom-start #tip,:host([dir=rtl]) .luzmo-Tooltip--top-start #tip{right:var(--luzmo-tooltip-pointer-corner-spacing, .313rem);left:auto}.luzmo-Tooltip--bottom-end #tip,.luzmo-Tooltip--top-end #tip{inset-inline:auto var(--luzmo-tooltip-pointer-corner-spacing, .313rem)}.luzmo-Tooltip--bottom-end #tip:dir(rtl),.luzmo-Tooltip--top-end #tip:dir(rtl),:host([dir=rtl]) .luzmo-Tooltip--bottom-end #tip,:host([dir=rtl]) .luzmo-Tooltip--top-end #tip{left:var(--luzmo-tooltip-pointer-corner-spacing, .313rem);right:auto}.luzmo-Tooltip--end #tip,.luzmo-Tooltip--end-bottom #tip,.luzmo-Tooltip--end-top #tip,:host([placement*=left]) #tooltip #tip,.luzmo-Tooltip--left-bottom #tip,.luzmo-Tooltip--left-top #tip,:host([placement*=right]) #tooltip #tip,.luzmo-Tooltip--right-bottom #tip,.luzmo-Tooltip--right-top #tip,.luzmo-Tooltip--start #tip,.luzmo-Tooltip--start-bottom #tip,.luzmo-Tooltip--start-top #tip{inset-block-start:50%;transform:translateY(-50%)}.luzmo-Tooltip--end-bottom #tip,.luzmo-Tooltip--end-top #tip,.luzmo-Tooltip--left-bottom #tip,.luzmo-Tooltip--left-top #tip,.luzmo-Tooltip--right-bottom #tip,.luzmo-Tooltip--right-top #tip,.luzmo-Tooltip--start-bottom #tip,.luzmo-Tooltip--start-top #tip{inset-block-start:auto;transform:none}.luzmo-Tooltip--end #tip,.luzmo-Tooltip--end-bottom #tip,.luzmo-Tooltip--end-top #tip,:host([placement*=right]) #tooltip #tip,.luzmo-Tooltip--right-bottom #tip,.luzmo-Tooltip--right-top #tip{clip-path:polygon(calc(100% - var(--luzmo-tooltip-tip-height-percentage, 50%)) 50%,calc(100% + var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 100%,calc(100% + var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 0);inset-inline:auto 100%}:host([placement*=left]) #tooltip #tip,.luzmo-Tooltip--left-bottom #tip,.luzmo-Tooltip--left-top #tip,.luzmo-Tooltip--start #tip,.luzmo-Tooltip--start-bottom #tip,.luzmo-Tooltip--start-top #tip{clip-path:polygon(calc(0% - var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 0,calc(0% - var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 100%,var(--luzmo-tooltip-tip-height-percentage, 50%) 50%);inset-inline-start:100%}.luzmo-Tooltip--end-top #tip,.luzmo-Tooltip--left-top #tip,.luzmo-Tooltip--right-top #tip,.luzmo-Tooltip--start-top #tip{inset-block-start:var(--luzmo-tooltip-pointer-corner-spacing, .313rem)}.luzmo-Tooltip--end-bottom #tip,.luzmo-Tooltip--left-bottom #tip,.luzmo-Tooltip--right-bottom #tip,.luzmo-Tooltip--start-bottom #tip{inset-block-end:var(--luzmo-tooltip-pointer-corner-spacing, .313rem)}.luzmo-Tooltip--end #tip:dir(rtl),.luzmo-Tooltip--end-bottom #tip:dir(rtl),.luzmo-Tooltip--end-top #tip:dir(rtl),:host([placement*=left]) #tooltip #tip:dir(rtl),.luzmo-Tooltip--left-bottom #tip:dir(rtl),.luzmo-Tooltip--left-top #tip:dir(rtl),:host([dir=rtl]) .luzmo-Tooltip--end #tip,:host([dir=rtl]) .luzmo-Tooltip--end-bottom #tip,:host([dir=rtl]) .luzmo-Tooltip--end-top #tip,:host([dir=rtl][placement*=left]) #tooltip #tip,:host([dir=rtl]) .luzmo-Tooltip--left-bottom #tip,:host([dir=rtl]) .luzmo-Tooltip--left-top #tip{clip-path:polygon(calc(0% - var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 0,calc(0% - var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 100%,var(--luzmo-tooltip-tip-height-percentage, 50%) 50%);left:100%;right:auto}:host([placement*=right]) #tooltip #tip:dir(rtl),.luzmo-Tooltip--right-bottom #tip:dir(rtl),.luzmo-Tooltip--right-top #tip:dir(rtl),.luzmo-Tooltip--start #tip:dir(rtl),.luzmo-Tooltip--start-bottom #tip:dir(rtl),.luzmo-Tooltip--start-top #tip:dir(rtl),:host([dir=rtl][placement*=right]) #tooltip #tip,:host([dir=rtl]) .luzmo-Tooltip--right-bottom #tip,:host([dir=rtl]) .luzmo-Tooltip--right-top #tip,:host([dir=rtl]) .luzmo-Tooltip--start #tip,:host([dir=rtl]) .luzmo-Tooltip--start-bottom #tip,:host([dir=rtl]) .luzmo-Tooltip--start-top #tip{clip-path:polygon(var(--luzmo-tooltip-tip-height-percentage, 50%) 50%,calc(100% + var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 100%,calc(100% + var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 0);left:auto;right:100%}::slotted([slot=icon]){inline-size:var(--luzmo-tooltip-icon-width, 1.125rem);block-size:var(--luzmo-tooltip-icon-height, 1.125rem);flex-shrink:0;align-self:flex-start;margin-block-start:var(--luzmo-tooltip-icon-spacing-block-start, .313rem);margin-inline-start:calc(var(--luzmo-tooltip-icon-spacing-inline-start, .563rem) - var(--luzmo-tooltip-spacing-inline, .688rem));margin-inline-end:var(--luzmo-tooltip-icon-spacing-inline-end, .563rem)}#label{line-height:var(--luzmo-tooltip-line-height, 1.3);margin-block-start:var(--luzmo-tooltip-spacing-block-start, .313rem);margin-block-end:var(--luzmo-tooltip-spacing-block-end, .375rem)}#tooltip,:host([placement*=top]) #tooltip,.luzmo-Tooltip--top-end,.luzmo-Tooltip--top-left,.luzmo-Tooltip--top-right,.luzmo-Tooltip--top-start{margin-block-end:calc(var(--luzmo-tooltip-tip-block-size, .313rem) + var(--luzmo-tooltip-margin, 0rem))}:host([open]) .luzmo-Tooltip--top-end,:host([open]) .luzmo-Tooltip--top-left,:host([open]) .luzmo-Tooltip--top-right,:host([open]) .luzmo-Tooltip--top-start,:host([placement*=top][open]) #tooltip,:host([open]) #tooltip{transform:translateY(calc(var(--luzmo-tooltip-animation-distance, .313rem) * -1))}:host([placement*=bottom]) #tooltip,.luzmo-Tooltip--bottom-end,.luzmo-Tooltip--bottom-left,.luzmo-Tooltip--bottom-right,.luzmo-Tooltip--bottom-start{margin-block-start:calc(var(--luzmo-tooltip-tip-block-size, .313rem) + var(--luzmo-tooltip-margin, 0rem))}:host([open]) .luzmo-Tooltip--bottom-end,:host([open]) .luzmo-Tooltip--bottom-left,:host([open]) .luzmo-Tooltip--bottom-right,:host([open]) .luzmo-Tooltip--bottom-start,:host([placement*=bottom][open]) #tooltip{transform:translateY(var(--luzmo-tooltip-animation-distance, .313rem))}:host([placement*=right]) #tooltip,.luzmo-Tooltip--right-bottom,.luzmo-Tooltip--right-top{margin-left:calc(var(--luzmo-tooltip-tip-block-size, .313rem) + var(--luzmo-tooltip-margin, 0rem))}:host([open]) .luzmo-Tooltip--right-bottom,:host([open]) .luzmo-Tooltip--right-top,:host([placement*=right][open]) #tooltip{transform:translate(var(--luzmo-tooltip-animation-distance, .313rem))}:host([placement*=left]) #tooltip,.luzmo-Tooltip--left-bottom,.luzmo-Tooltip--left-top{margin-right:calc(var(--luzmo-tooltip-tip-block-size, .313rem) + var(--luzmo-tooltip-margin, 0rem))}:host([open]) .luzmo-Tooltip--left-bottom,:host([open]) .luzmo-Tooltip--left-top,:host([placement*=left][open]) #tooltip{transform:translate(calc(var(--luzmo-tooltip-animation-distance, .313rem) * -1))}.luzmo-Tooltip--start,.luzmo-Tooltip--start-bottom,.luzmo-Tooltip--start-top{margin-inline-end:calc(var(--luzmo-tooltip-tip-block-size, .313rem) + var(--luzmo-tooltip-margin, 0rem))}:host([open]) .luzmo-Tooltip--start-bottom,:host([open]) .luzmo-Tooltip--start-top,:host([open]) .luzmo-Tooltip--start{transform:translate(calc(var(--luzmo-tooltip-animation-distance, .313rem) * -1))}:host([open]) .luzmo-Tooltip--start-bottom:dir(rtl),:host([open]) .luzmo-Tooltip--start-top:dir(rtl),:host([open]) .luzmo-Tooltip--start:dir(rtl),:host([dir=rtl][open]) .luzmo-Tooltip--start-bottom,:host([dir=rtl][open]) .luzmo-Tooltip--start-top,:host([dir=rtl][open]) .luzmo-Tooltip--start{transform:translate(var(--luzmo-tooltip-animation-distance, .313rem))}.luzmo-Tooltip--end,.luzmo-Tooltip--end-bottom,.luzmo-Tooltip--end-top{margin-inline-start:calc(var(--luzmo-tooltip-tip-block-size, .313rem) + var(--luzmo-tooltip-margin, 0rem))}:host([open]) .luzmo-Tooltip--end-bottom,:host([open]) .luzmo-Tooltip--end-top,:host([open]) .luzmo-Tooltip--end{transform:translate(var(--luzmo-tooltip-animation-distance, .313rem))}:host([open]) .luzmo-Tooltip--end-bottom:dir(rtl),:host([open]) .luzmo-Tooltip--end-top:dir(rtl),:host([open]) .luzmo-Tooltip--end:dir(rtl),:host([dir=rtl][open]) .luzmo-Tooltip--end-bottom,:host([dir=rtl][open]) .luzmo-Tooltip--end-top,:host([dir=rtl][open]) .luzmo-Tooltip--end{transform:translate(calc(var(--luzmo-tooltip-animation-distance, .313rem) * -1))}:host{--luzmo-tooltip-background-color-default: rgb(0, 0, 0);--tooltip-font-size: var(--luzmo-font-size)}:host([size=s]){--tooltip-font-size: var(--luzmo-font-size-s)}:host([size=m]){--tooltip-font-size: var(--luzmo-font-size-m)}:host([size=l]){--tooltip-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--tooltip-font-size: var(--luzmo-font-size-xl)}:host{display:contents;white-space:initial}#tooltip{inline-size:max-content}#tip{clip-path:polygon(0 -5%,50% 50%,100% -5%);width:.625rem!important;height:.625rem!important}#tip[style]{transform:none!important}:host(:not([placement*=top])) #tooltip{margin-bottom:0}:host([placement*=top]) #tooltip #tip{inset-block-start:100%}:host([placement*=bottom]) #tooltip #tip{inset-block-end:100%;clip-path:polygon(50% 50%,0 105%,100% 105%);top:auto}:host([placement*=left]) #tooltip #tip,:host([placement*=right]) #tooltip #tip{inset-block-start:50%;transform:translateY(-50%)}:host([placement*=right]) #tooltip #tip{clip-path:polygon(50% 50%,105% 100%,105% 0);inset-inline:calc(var(--luzmo-tooltip-tip-block-size, .313rem) * -2) 100%}:host([placement*=left]) #tooltip #tip{clip-path:polygon(-5% 0,-5% 100%,50% 50%);inset-inline-start:100%}luzmo-overlay:not(:defined){display:none}";var b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,p=(n,t,o,i)=>{for(var e=i>1?void 0:i?v(t,o):t,a=n.length-1,s;a>=0;a--)(s=n[a])&&(e=(i?s(t,o,e):s(e))||e);return i&&e&&b(t,o,e),e};class T extends HTMLElement{constructor(){super(),this._open=!1,this._placement="top",this.addEventListener("luzmo-opened",this.redispatchEvent),this.addEventListener("luzmo-closed",this.redispatchEvent)}redispatchEvent(t){t.stopPropagation(),this.tooltip.dispatchEvent(new CustomEvent(t.type,{bubbles:t.bubbles,composed:t.composed,detail:t.detail}))}get tooltip(){return this.getRootNode().host}static get observedAttributes(){return["open","placement"]}attributeChangedCallback(t,o,i){switch(t){case"open":{this.open=i!==null;break}case"placement":{this.placement=i;break}}}set open(t){this._open=t;const{tooltip:o}=this;o&&(o.open=t)}get open(){return this._open}set placement(t){this._placement=t;const{tooltip:o}=this;o&&(o.placement=t)}get placement(){return this._placement}get tipElement(){return this.tooltip.tipElement}}customElements.get("luzmo-tooltip-openable")||customElements.define("luzmo-tooltip-openable",T);class l extends z.SizedMixin(r.LuzmoElement,{defaultSize:"s"}){constructor(){super(...arguments),this.delayed=!1,this.dependencyManager=new h.DependencyManagerController(this),this.disabled=!1,this.selfManaged=!1,this.offset=0,this.open=!1,this._variant="",this.handleOpenOverlay=()=>{this.open=!0},this.handleCloseOverlay=()=>{this.open=!1}}static get styles(){return[m.unsafeCSS(g)]}get variant(){return this._variant}set variant(t){if(t!==this.variant){if(["info","positive","negative"].includes(t)){this.setAttribute("variant",t),this._variant=t;return}this.removeAttribute("variant"),this._variant=""}}forwardTransitionEvent(t){this.dispatchEvent(new TransitionEvent(t.type,{bubbles:!0,composed:!0,propertyName:t.propertyName}))}get triggerElement(){var e;let t=this.assignedSlot||this,o=t.getRootNode();if(o===document)return null;let i=t.parentElement||o.host||o;for(;!((e=i==null?void 0:i.matches)!=null&&e.call(i,c.focusableSelector));){if(t=i.assignedSlot||i,o=t.getRootNode(),o===document)return null;i=t.parentElement||o.host||o}return i}render(){const t=m.html`
|
|
19
|
-
<luzmo-tooltip-openable
|
|
20
|
-
id="tooltip"
|
|
21
|
-
placement=${d.o(this.placement)}
|
|
22
|
-
@transitionrun=${this.forwardTransitionEvent}
|
|
23
|
-
@transitionend=${this.forwardTransitionEvent}
|
|
24
|
-
@transitioncancel=${this.forwardTransitionEvent}
|
|
25
|
-
>
|
|
26
|
-
<slot name="icon"></slot>
|
|
27
|
-
<span id="label"><slot></slot></span>
|
|
28
|
-
<span id="tip" aria-hidden="true"></span>
|
|
29
|
-
</luzmo-tooltip-openable>
|
|
30
|
-
`;return this.selfManaged?(this.dependencyManager.add("luzmo-overlay"),Promise.resolve().then(()=>require("../overlay/index.cjs")),m.html`
|
|
31
|
-
<luzmo-overlay
|
|
32
|
-
?open=${this.open&&!this.disabled&&this.dependencyManager.loaded}
|
|
33
|
-
?delayed=${this.delayed}
|
|
34
|
-
?disabled=${this.disabled}
|
|
35
|
-
offset=${this.offset}
|
|
36
|
-
.placement=${this.placement}
|
|
37
|
-
type="hint"
|
|
38
|
-
.tipPadding=${this.tipPadding}
|
|
39
|
-
.triggerInteraction=${"hover"}
|
|
40
|
-
@luzmo-opened=${this.handleOpenOverlay}
|
|
41
|
-
@luzmo-closed=${this.handleCloseOverlay}
|
|
42
|
-
>
|
|
43
|
-
${t}
|
|
44
|
-
</luzmo-overlay>
|
|
45
|
-
`):t}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{if(!this.selfManaged)return;const t=this.overlayElement;if(t){const o=this.triggerElement;t.triggerElement=o}})}}p([r.n({type:Boolean})],l.prototype,"delayed",2);p([r.n({type:Boolean})],l.prototype,"disabled",2);p([r.n({type:Boolean,attribute:"self-managed"})],l.prototype,"selfManaged",2);p([r.n({type:Number})],l.prototype,"offset",2);p([r.n({type:Boolean,reflect:!0})],l.prototype,"open",2);p([u.e("luzmo-overlay")],l.prototype,"overlayElement",2);p([r.n({reflect:!0})],l.prototype,"placement",2);p([u.e("#tip")],l.prototype,"tipElement",2);p([r.n({type:Number})],l.prototype,"tipPadding",2);p([r.n({type:String})],l.prototype,"variant",1);customElements.get("luzmo-tooltip")||customElements.define("luzmo-tooltip",l);exports.Tooltip=l;
|
package/lib/unit-input/index.cjs
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("lit"),n=require("../base-BCmA9Wxv.cjs"),p=require("../state-DReJ3hB6.cjs"),d=require("@luzmo/icons"),x=require("../style-map-BjBGQ_u3.cjs"),w="*,*:before,*:after{box-sizing:border-box}:host{display:flex;flex:1 1 auto}svg{height:.75em}.unit-input-container{width:100%;position:relative;display:flex;height:1.875rem;box-sizing:border-box;border-radius:var(--luzmo-border-radius)}.unit-input-container input{box-sizing:border-box;min-width:0;width:100%;line-height:1.6rem;color:var(--luzmo-font-color);padding-left:var(--luzmo-spacing-3);padding-right:var(--luzmo-spacing-5);outline:none;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-radius:var(--luzmo-border-radius);background:transparent;font-weight:400;text-align:right;transition:border .2s ease-in-out}.unit-input-container input:focus{border:var(--luzmo-border-width) solid var(--luzmo-primary);background:var(--luzmo-background-color-hover)}.unit-input-container input:focus~.ticks{border:var(--luzmo-border-width) solid var(--luzmo-primary)}.unit-input-container input:focus~.ticks .tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-primary)}.unit-input-container .unit{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;right:1.125rem;color:var(--luzmo-font-color-disabled);padding:0 var(--luzmo-spacing-2);height:100%;cursor:default;-webkit-user-select:none;user-select:none;z-index:2;font-size:80%}.unit-input-container .ticks{position:absolute;display:flex;flex-direction:column;top:0;bottom:0;right:0;width:var(--luzmo-unit-input-tick-width, 1rem);-webkit-user-select:none;user-select:none;z-index:3;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-top-right-radius:var(--luzmo-border-radius);border-bottom-right-radius:var(--luzmo-border-radius);overflow:hidden;background-color:var(--luzmo-background-color-hover)}.unit-input-container .ticks>div{flex:1 1 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;color:var(--luzmo-font-color);transition:all .2s ease-in-out;cursor:pointer;position:relative}.unit-input-container .ticks>div:hover{color:var(--luzmo-font-color-hard);background:var(--background-color-alt-2)}.unit-input-container .ticks>div.disabled,.unit-input-container .ticks>div.disabled:hover{cursor:not-allowed;color:var(--luzmo-font-color-disabled)!important;background-color:var(--luzmo-background-color)}.unit-input-container .ticks>div.tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-border-color)}.unit-input-container.with-unit input{padding-right:2.25rem}.unit-input-container.has-error input{border-color:var(--luzmo-color-negative, red)!important}.unit-input-container.has-error .ticks{border-color:var(--luzmo-color-negative, red)!important;background-color:var(--luzmo-color-negative, red)!important}.unit-input-container.has-error .tick-up,.unit-input-container.has-error .tick-down{border-color:var(--luzmo-color-negative, red)!important;background-color:var(--luzmo-color-negative, red)!important;color:#fff!important}";var k=Object.defineProperty,o=(b,t,e,r)=>{for(var s=void 0,a=b.length-1,u;a>=0;a--)(u=b[a])&&(s=u(t,e,s)||s);return s&&k(t,e,s),s};const l={min:-99999999999,max:99999999999,step:1,default:0,debounce:250},m=class m extends n.LuzmoElement{constructor(){super(),this.isDecimal=!1,this.disabled=!1,this.readOnly=!1,this.inputWidth="",this.debounce=l.debounce,this.errors=[],this.setValue=t=>{this.waitForUpdate=!0,this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},this.debounce||0)},this.setCorrectInitialValues()}transformToNumber(t,e){let r=t;return r=this.isDecimal?Number.parseFloat(t+""):Number.parseInt(t+"",10),r=Number.isNaN(r)?Number(e):Number(r),r}onInput(t){let e=new RegExp(/[^0-9+-]/g);this.isDecimal&&(e=new RegExp(/[^0-9.,+-]/g));const r=t.target.value.replace(e,"").replaceAll(",",".");t.target.value=r,this.errors=[];const s=this.isDecimal?Number.parseFloat(r+""):Number.parseInt(r+"",10);Number.isNaN(s)&&this.errors.push("Not a number"),s<this.min&&this.errors.length===0&&this.errors.push("Value is lower than minimum"),s>this.max&&this.errors.length===0&&this.errors.push("Value is higher than maximum"),this.errors.length===0?(this.validValue=s,this.value=this.validValue,this.setValue(this.value),this.setErrorStatus(!1)):this.setErrorStatus(!0)}setErrorStatus(t){var e,r;t?(e=this.renderRoot.querySelector(".unit-input-container"))==null||e.classList.add("has-error"):(this.errors=[],(r=this.renderRoot.querySelector(".unit-input-container"))==null||r.classList.remove("has-error"))}setDisabledUpDownStatus(){this.value===this.min?this.renderRoot.querySelector(".tick-down").classList.add("disabled"):this.renderRoot.querySelector(".tick-down").classList.remove("disabled"),this.value===this.max?this.renderRoot.querySelector(".tick-up").classList.add("disabled"):this.renderRoot.querySelector(".tick-up").classList.remove("disabled")}createAndSetValidValue(t){let e=this.validValue?this.transformToNumber(t,this.validValue):this.transformToNumber(t,this.default);this.max<e&&(e=this.max),this.min>e&&(e=this.min),this.validValue=e,this.value=e}setCorrectInitialValues(){this.min=this.transformToNumber(this.min,l.min),this.max=this.transformToNumber(this.max,l.max),this.step=Math.abs(this.transformToNumber(this.step,l.step)),this.min>this.max&&(this.min=this.max),this.max<this.min+this.step&&(this.max=this.min+this.step),this.default=this.transformToNumber(this.default,l.default),this.createAndSetValidValue(this.value)}onKeydown(t){!this.disabled&&(t.key==="ArrowUp"||t.key==="ArrowDown")&&this.applyStep(t,t.key==="ArrowUp")}applyStep(t,e){var r,s,a,u,f,v;if(!this.disabled){t.preventDefault();const g=((a=(s=(r=this.validValue.toString())==null?void 0:r.split("."))==null?void 0:s[1])==null?void 0:a.length)??0,y=((v=(f=(u=this.step.toString())==null?void 0:u.split("."))==null?void 0:f[1])==null?void 0:v.length)??0,z=Math.max(g,y);let c=this.validValue+(e?this.step:-this.step);c=Number.parseFloat(c.toFixed(z)),this.createAndSetValidValue(c),this.setErrorStatus(!1),this.renderRoot.querySelector("input").value=this.validValue+"",this.setValue(this.validValue),this.setDisabledUpDownStatus()}}setPaddingRightOfInput(){const t=this.renderRoot.querySelector(".unit"),e=this.renderRoot.querySelector(".ticks"),r=this.unit?`calc(${t==null?void 0:t.offsetWidth}px + ${e==null?void 0:e.offsetWidth}px)`:`calc(${e==null?void 0:e.offsetWidth}px + var(--luzmo-spacing-3))`;this.renderRoot.querySelector("input").style.paddingRight=r}updated(t){t.has("value")&&(this.setCorrectInitialValues(),this.waitForUpdate?this.waitForUpdate=!1:this.renderRoot.querySelector("input").value=this.value+"",this.setPaddingRightOfInput())}render(){return h.html`
|
|
19
|
-
<div style=${x.o(this.inputWidth?{width:this.inputWidth}:{})}>
|
|
20
|
-
<input
|
|
21
|
-
.min=${String(this.min)}
|
|
22
|
-
.max=${String(this.max)}
|
|
23
|
-
@input=${this.onInput}
|
|
24
|
-
@keydown=${this.onKeydown}
|
|
25
|
-
/>
|
|
26
|
-
${this.unit?h.html`<div class="unit">${this.unit}</div>`:""}
|
|
27
|
-
<div class="ticks">
|
|
28
|
-
<div
|
|
29
|
-
class="tick-up"
|
|
30
|
-
@click=${{handleEvent:t=>this.applyStep(t,!0)}}
|
|
31
|
-
>
|
|
32
|
-
${d.luzmoIcon(d.luzmoAngleUp)}
|
|
33
|
-
</div>
|
|
34
|
-
|
|
35
|
-
<div
|
|
36
|
-
class="tick-down"
|
|
37
|
-
@click=${{handleEvent:t=>this.applyStep(t,!1)}}
|
|
38
|
-
>
|
|
39
|
-
${d.luzmoIcon(d.luzmoAngleDown)}
|
|
40
|
-
</div>
|
|
41
|
-
</div>
|
|
42
|
-
</div>
|
|
43
|
-
`}};m.styles=h.unsafeCSS(w);let i=m;o([n.n({type:Number,reflect:!0,attribute:"value"})],i.prototype,"value");o([n.n({type:Number,reflect:!0,attribute:"default"})],i.prototype,"default");o([n.n({type:String,reflect:!0,attribute:"placeholder"})],i.prototype,"placeholder");o([n.n({type:String,reflect:!0,attribute:"unit"})],i.prototype,"unit");o([n.n({type:Number,reflect:!0,attribute:"min"})],i.prototype,"min");o([n.n({type:Number,reflect:!0,attribute:"max"})],i.prototype,"max");o([n.n({type:Number,reflect:!0,attribute:"step"})],i.prototype,"step");o([n.n({type:Boolean,reflect:!0,attribute:"isDecimal"})],i.prototype,"isDecimal");o([n.n({type:Boolean,reflect:!0,attribute:"disabled"})],i.prototype,"disabled");o([n.n({type:Boolean,reflect:!0,attribute:"readOnly"})],i.prototype,"readOnly");o([n.n({type:String,reflect:!0,attribute:"inputWidth"})],i.prototype,"inputWidth");o([n.n({type:Number,reflect:!0,attribute:"debounce"})],i.prototype,"debounce");o([p.r()],i.prototype,"errors");o([p.r()],i.prototype,"validValue");o([p.r()],i.prototype,"waitForUpdate");customElements.get("luzmo-unit-input")||customElements.define("luzmo-unit-input",i);exports.LuzmoUnitInput=i;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|