@luzmo/lucero 2.5.0 → 2.5.1
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/action-button/action-button.d.ts +3 -2
- package/components/action-button/index.cjs +1 -1
- package/components/action-button/index.js +1 -1
- package/components/action-button-B4_uvHiN.cjs +22 -0
- package/components/action-button-DU95RNNi.js +138 -0
- package/components/action-menu/action-menu.d.ts +16 -1
- package/components/action-menu/index.cjs +1 -1
- package/components/action-menu/index.d.ts +1 -0
- package/components/action-menu/index.js +1 -1
- package/components/{action-menu-D1hTsg9A.js → action-menu-B6nNYwlL.js} +40 -22
- package/components/action-menu-C_vyFNJt.cjs +58 -0
- package/components/badge/index.cjs +1 -1
- package/components/badge/index.js +1 -1
- package/components/badge-Bp-1d70q.js +96 -0
- package/components/badge-CNeUkS4b.cjs +23 -0
- package/components/button/index.cjs +1 -1
- package/components/button/index.js +1 -1
- package/components/button-B1V_2tHk.cjs +20 -0
- package/components/button-QXavBh1X.js +126 -0
- package/components/calendar/index.cjs +1 -1
- package/components/calendar/index.js +1 -1
- package/components/{calendar-D1UtHvpY.js → calendar-BNGwCJsG.js} +1 -1
- package/components/{calendar-pQxEWdYC.cjs → calendar-CLGqcox8.cjs} +1 -1
- package/components/date-range-picker/index.cjs +1 -1
- package/components/date-range-picker/index.js +1 -1
- package/components/{date-range-picker-DKVmGpUC.js → date-range-picker-5SDPe2fQ.js} +1 -1
- package/components/{date-range-picker-D149LIGC.cjs → date-range-picker-CLfEEYkE.cjs} +1 -1
- package/components/date-time-picker/index.cjs +1 -1
- package/components/date-time-picker/index.js +1 -1
- package/components/{date-time-picker-CRpvRk9T.cjs → date-time-picker-DXTksnPd.cjs} +1 -1
- package/components/{date-time-picker-6c19YzwF.js → date-time-picker-s3xujamC.js} +1 -1
- package/components/index.cjs +1 -1
- package/components/index.js +21 -20
- package/components/notice/index.cjs +1 -1
- package/components/notice/index.js +1 -1
- package/components/{notice-CsWaqcq3.cjs → notice-CQFyo6OE.cjs} +1 -1
- package/components/{notice-N0-lxEf_.js → notice-CQI5kFRd.js} +1 -1
- package/components/picker/index.cjs +1 -1
- package/components/picker/index.js +1 -1
- package/components/{picker-COeWCv60.cjs → picker-C1tD-4ac.cjs} +1 -1
- package/components/{picker-uKcRswTQ.js → picker-Czkf6auL.js} +1 -1
- package/components/progress-steps/index.cjs +1 -1
- package/components/progress-steps/index.js +1 -1
- package/components/progress-steps/progress-steps.d.ts +0 -5
- package/components/{progress-steps-BvCzsq9Z.js → progress-steps-CXJEaaUg.js} +2 -5
- package/components/{progress-steps-CvdQQwHc.cjs → progress-steps-Dqh53oC1.cjs} +2 -2
- package/components/prompt-box/index.cjs +1 -1
- package/components/prompt-box/index.js +1 -1
- package/components/{prompt-box-Cz_m2wso.js → prompt-box-CA8bsoZP.js} +2 -2
- package/components/{prompt-box-sp9_-Hnx.cjs → prompt-box-DyODaKXV.cjs} +1 -1
- package/components/question-box/index.cjs +1 -1
- package/components/question-box/index.js +1 -1
- package/components/{question-box-Bcm-P-UV.js → question-box-DSwTpxAW.js} +3 -3
- package/components/{question-box-DZnuGMBB.cjs → question-box-cBeVshAq.cjs} +1 -1
- package/components/search/index.cjs +1 -1
- package/components/search/index.js +1 -1
- package/components/{search-DEjLSJ96.js → search-CFTOvmWA.js} +1 -1
- package/components/{search-PxJEuwHt.cjs → search-DJ6KwOam.cjs} +1 -1
- package/components/status-light/index.cjs +1 -1
- package/components/status-light/index.js +1 -1
- package/components/{status-light-DwUnjE3t.js → status-light-B1T3aGJs.js} +1 -1
- package/components/status-light-COApWq-B.cjs +21 -0
- package/components/table/index.cjs +1 -1
- package/components/table/index.js +1 -1
- package/components/{table-B75GjBhD.js → table-BckZkgeh.js} +180 -171
- package/components/table-Bcq2K21l.cjs +180 -0
- package/components/tabs/index.cjs +1 -1
- package/components/tabs/index.js +1 -1
- package/components/{tabs-DxOD4QNt.cjs → tabs-CMU8X4ho.cjs} +1 -1
- package/components/{tabs-BD_ATrBg.js → tabs-D8U2PxcE.js} +1 -1
- package/components/tags/index.cjs +1 -1
- package/components/tags/index.js +1 -1
- package/components/tags-D8F1o4UZ.cjs +47 -0
- package/components/tags-ZzY_q4TH.js +208 -0
- package/components/template-property-DNDi7lQv.js +47 -0
- package/components/template-property-yhcAmPXk.cjs +18 -0
- package/components/utils.cjs +1 -1
- package/components/utils.js +2 -1
- package/custom-elements.json +1 -1
- package/package.json +1 -1
- package/standalone/action-button.js +1 -1
- package/standalone/action-menu.js +5 -3
- package/standalone/badge.js +1 -1
- package/standalone/button.js +1 -1
- package/standalone/calendar.js +1 -1
- package/standalone/chunks/action-button-BJGE_BDu.js +6 -0
- package/standalone/chunks/badge-SNXdnyCZ.js +7 -0
- package/standalone/chunks/button-DHan4NJY.js +4 -0
- package/standalone/chunks/{button-Q1n9DH9a.js → button-DTL9dD2r.js} +1 -1
- package/standalone/chunks/{calendar-DcFjY2tw.js → calendar-BOzu003d.js} +1 -1
- package/standalone/chunks/{picker-FCQK0vdE.js → picker-jZI5AjVJ.js} +1 -1
- package/standalone/chunks/{segments-factory-eS38mJRz.js → segments-factory-Da9ojsLC.js} +1 -1
- package/standalone/chunks/template-property-Dn64faHO.js +2 -0
- package/standalone/date-range-picker.js +1 -1
- package/standalone/date-time-picker.js +1 -1
- package/standalone/manifest.json +8 -7
- package/standalone/notice.js +1 -1
- package/standalone/picker.js +1 -1
- package/standalone/progress-steps.js +2 -2
- package/standalone/prompt-box.js +1 -1
- package/standalone/question-box.js +1 -1
- package/standalone/search.js +1 -1
- package/standalone/status-light.js +1 -1
- package/standalone/table.js +27 -27
- package/standalone/tabs.js +1 -1
- package/standalone/tags.js +1 -1
- package/standalone/utils.js +1 -1
- package/utils/index.d.ts +1 -0
- package/utils/template-property.d.ts +13 -0
- package/components/action-button-BRijXjEz.js +0 -138
- package/components/action-button-CX1uYbQp.cjs +0 -22
- package/components/action-menu-BNZWjeDd.cjs +0 -56
- package/components/badge-D2Hjf-Ww.js +0 -96
- package/components/badge-D8pIDEoq.cjs +0 -23
- package/components/button-Bvnidb4x.cjs +0 -20
- package/components/button-DIV_j_U3.js +0 -126
- package/components/status-light-D3hdx8Pd.cjs +0 -21
- package/components/table-CHrAaVU1.cjs +0 -180
- package/components/tags-BIpFgOYy.js +0 -208
- package/components/tags-fLCGajv_.cjs +0 -47
- package/standalone/chunks/action-button-FSsfXYe9.js +0 -6
- package/standalone/chunks/badge-DD-tMgzi.js +0 -7
- package/standalone/chunks/button-Bv3v7VbN.js +0 -4
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
/*! * Lucero - The design system for Luzmo.
|
|
2
|
-
*
|
|
3
|
-
* Copyright © 2026 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
|
-
require("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./focus-visible-DNHNlrty.cjs"),r=require("./roving-tabindex-BoPao4td.cjs"),i=require("./language-resolution-CSjktYg5.cjs");require("./tooltip-DjOW52n2.cjs"),require("./button-Bvnidb4x.cjs");let a=require("lit"),o=require("lit/decorators.js");var s=`:host{font-family:var(--luzmo-font-family);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-border-radius,var(--tag-border-radius));block-size:var(--luzmo-tag-height,var(--tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:var(--luzmo-tag-max-inline-size,var(--tag-max-inline-size));-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;outline:none;justify-content:center;align-items: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;border-color:var(--highcontrast-tag-border-color,var(--luzmo-tag-border-color,var(--tag-border-color)))!important;border-width:var(--luzmo-tag-border-width,var(--tag-border-width))!important;border-style:solid!important}::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{box-sizing:border-box;block-size:100%;min-inline-size:0;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;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)));display:flex;overflow:hidden}.label-text{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-inline-size:0;display:block;overflow:hidden}.label-text slot{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}:host([data-luzmo-language-script=Latn]) .label-text{padding-block:var(--tag-label-glyph-overhang);margin-block:calc(var(--tag-label-glyph-overhang) * -1)}:host([data-luzmo-language-script=Latn]) .label-text slot{text-box:trim-both cap alphabetic;padding-block:var(--tag-label-glyph-overhang);margin-block:calc(var(--tag-label-glyph-overhang) * -1)}:host(:is(:active,[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)));border-color:var(--highcontrast-tag-border-color-active,var(--luzmo-tag-border-color-active,var(--tag-border-color-active)))!important}:host([focused]),:host(:focus-visible){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)));border-color:var(--highcontrast-tag-border-color-focus,var(--luzmo-tag-border-color-focus,var(--tag-border-color-focus)))!important}:host([focused]):after,:host(:focus-visible):after{content:"";border-radius:calc(var(--luzmo-tag-border-radius,var(--tag-border-radius)) + var(--luzmo-tag-focus-ring-gap,var(--tag-focus-ring-gap)) + var(--luzmo-tag-border-width,var(--tag-border-width)));pointer-events:none;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)));border-color:var(--highcontrast-tag-focus-ring-color,var(--luzmo-tag-focus-ring-color,var(--tag-focus-ring-color)))!important;border-width:var(--luzmo-tag-focus-ring-thickness,var(--tag-focus-ring-thickness))!important;border-style:solid!important}:host([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)));border-color:var(--highcontrast-tag-border-color-selected,var(--luzmo-tag-border-color-selected,var(--tag-border-color-selected)))!important}:host([selected]:is(:active,[active])){background-color:var(--highcontrast-tag-background-color-selected-active,var(--luzmo-tag-background-color-selected-active,var(--tag-background-color-selected-active)));border-color:var(--highcontrast-tag-border-color-selected-active,var(--luzmo-tag-border-color-selected-active,var(--tag-border-color-selected-active)))!important}:host([selected][focused]),:host([selected]:focus-visible){background-color:var(--highcontrast-tag-background-color-selected-focus,var(--luzmo-tag-background-color-selected-focus,var(--tag-background-color-selected-focus)));border-color:var(--highcontrast-tag-border-color-selected-focus,var(--luzmo-tag-border-color-selected-focus,var(--tag-border-color-selected-focus)))!important}:host([invalid]){color:var(--highcontrast-tag-content-color-invalid,var(--luzmo-tag-content-color-invalid,var(--tag-content-color-invalid)));border-color:var(--highcontrast-tag-border-color-invalid,var(--luzmo-tag-border-color-invalid,var(--tag-border-color-invalid)))!important}:host([invalid]:is(:active,[active])){color:var(--highcontrast-tag-content-color-invalid-active,var(--luzmo-tag-content-color-invalid-active,var(--tag-content-color-invalid-active)));border-color:var(--highcontrast-tag-border-color-invalid-active,var(--luzmo-tag-border-color-invalid-active,var(--tag-border-color-invalid-active)))!important}:host([invalid][focused]),:host([invalid]:focus-visible){color:var(--highcontrast-tag-content-color-invalid-focus,var(--luzmo-tag-content-color-invalid-focus,var(--tag-content-color-invalid-focus)));border-color:var(--highcontrast-tag-border-color-invalid-focus,var(--luzmo-tag-border-color-invalid-focus,var(--tag-border-color-invalid-focus)))!important}:host([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)));border-color:var(--highcontrast-tag-border-color-invalid-selected,var(--luzmo-tag-border-color-invalid-selected,var(--tag-border-color-invalid-selected)))!important}:host([invalid][selected]:is(:active,[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)));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)))!important}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){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)));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)))!important}:host([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));border-color:var(--highcontrast-tag-border-color-emphasized,var(--luzmo-tag-border-color-emphasized,var(--tag-border-color-emphasized)))!important}@media (hover:hover){:host(: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)));border-color:var(--highcontrast-tag-border-color-hover,var(--luzmo-tag-border-color-hover,var(--tag-border-color-hover)))!important}:host([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)));border-color:var(--highcontrast-tag-border-color-selected-hover,var(--luzmo-tag-border-color-selected-hover,var(--tag-border-color-selected-hover)))!important}:host([invalid]:hover){color:var(--highcontrast-tag-content-color-invalid-hover,var(--luzmo-tag-content-color-invalid-hover,var(--tag-content-color-invalid-hover)));border-color:var(--highcontrast-tag-border-color-invalid-hover,var(--luzmo-tag-border-color-invalid-hover,var(--tag-border-color-invalid-hover)))!important}:host([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)));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)))!important}:host([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)));border-color:var(--highcontrast-tag-border-color-emphasized-hover,var(--luzmo-tag-border-color-emphasized-hover,var(--tag-border-color-emphasized-hover)))!important}}:host([emphasized]:is(:active,[active])){background-color:var(--highcontrast-tag-background-color-emphasized-active,var(--luzmo-tag-background-color-emphasized-active,var(--tag-background-color-emphasized-active)));border-color:var(--highcontrast-tag-border-color-emphasized-active,var(--luzmo-tag-border-color-emphasized-active,var(--tag-border-color-emphasized-active)))!important}:host([emphasized][focused]),:host([emphasized]:focus-visible){background-color:var(--highcontrast-tag-background-color-emphasized-focus,var(--luzmo-tag-background-color-emphasized-focus,var(--tag-background-color-emphasized-focus)));border-color:var(--highcontrast-tag-border-color-emphasized-focus,var(--luzmo-tag-border-color-emphasized-focus,var(--tag-border-color-emphasized-focus)))!important}:host([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;border-color:var(--highcontrast-tag-border-color-disabled,var(--luzmo-tag-border-color-disabled,var(--tag-border-color-disabled)))!important}: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([variant][treatment=fill]){--highcontrast-tag-border-color:Highlight;--highcontrast-tag-border-color-hover:Highlight;--highcontrast-tag-border-color-active:Highlight;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:Highlight;--highcontrast-tag-background-color-hover:Highlight;--highcontrast-tag-background-color-active:Highlight;--highcontrast-tag-background-color-focus:Highlight;--highcontrast-tag-content-color:HighlightText;--highcontrast-tag-content-color-hover:HighlightText;--highcontrast-tag-content-color-active:HighlightText;--highcontrast-tag-content-color-focus:HighlightText}}: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-border-radius:var(--luzmo-border-radius-s);--tag-size-medium-border-radius:var(--luzmo-border-radius);--tag-size-large-border-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-label-glyph-overhang:.35em;--tag-variant-color-hover:color-mix(in oklch, var(--tag-variant-color), black 8%);--tag-variant-color-down:color-mix(in oklch, var(--tag-variant-color), black 20%);--tag-variant-color-focus:var(--tag-variant-color-hover);--tag-variant-fill-color-hover:var(--tag-variant-color-hover);--tag-variant-fill-color-down:var(--tag-variant-color-down);--tag-variant-fill-color-focus:var(--tag-variant-color-focus);--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-negative-color);--tag-border-color-invalid-hover:var(--luzmo-negative-color-hover);--tag-border-color-invalid-active:var(--luzmo-negative-color-down);--tag-border-color-invalid-focus:var(--luzmo-negative-color-focus);--tag-content-color-invalid:var(--luzmo-negative-color);--tag-content-color-invalid-hover:var(--luzmo-negative-color-hover);--tag-content-color-invalid-active:var(--luzmo-negative-color-down);--tag-content-color-invalid-focus:var(--luzmo-negative-color-focus);--tag-border-color-invalid-selected:var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-hover:var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-focus:var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-active:var(--luzmo-negative-color-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-negative-color-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-disabled-color);--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);--tag-max-inline-size:100%;--tag-subtle-background-opacity:10%;--tag-subtle-interaction-background-opacity:20%;--tag-subtle-content-mix:57%}:host([size=s]){--tag-height:var(--luzmo-component-height-xs);--tag-font-size:var(--luzmo-font-size-s);--tag-icon-size:var(--luzmo-icon-size-s);--tag-icon-spacing-inline-end:var(--luzmo-spacing-2);--tag-clear-button-spacing-inline-start:var(--luzmo-spacing-2);--tag-border-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-icon-size-m);--tag-clear-button-spacing-inline-start:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--tag-border-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-icon-size-l);--tag-icon-spacing-inline-end:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tag-clear-button-spacing-inline-start:var(--luzmo-spacing-3);--tag-border-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-icon-size-xl);--tag-icon-spacing-inline-end:var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-start:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tag-border-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([variant=accent]){--tag-variant-color:var(--luzmo-primary);--tag-variant-color-hover:var(--luzmo-primary-hover);--tag-variant-color-down:var(--luzmo-primary-down);--tag-variant-color-focus:var(--luzmo-primary-focus);--tag-variant-fill-content-color:var(--luzmo-primary-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-accent-on-subtle-color)}:host([variant=neutral]){--tag-variant-color:var(--luzmo-selected-color-hard);--tag-variant-color-hover:var(--luzmo-selected-color-hard-hover);--tag-variant-color-down:var(--luzmo-selected-color-hard-down);--tag-variant-color-focus:var(--luzmo-selected-color-hard-focus);--tag-variant-fill-content-color:var(--luzmo-background-color);--tag-variant-subtle-content-color:var(--luzmo-neutral-on-subtle-color)}:host([variant=informative]){--tag-variant-color:var(--luzmo-informative-color);--tag-variant-color-hover:var(--luzmo-informative-color-hover);--tag-variant-color-down:var(--luzmo-informative-color-down);--tag-variant-color-focus:var(--luzmo-informative-color-focus);--tag-variant-fill-content-color:var(--luzmo-informative-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-informative-on-subtle-color)}:host([variant=positive]){--tag-variant-color:var(--luzmo-positive-color);--tag-variant-color-hover:var(--luzmo-positive-color-hover);--tag-variant-color-down:var(--luzmo-positive-color-down);--tag-variant-color-focus:var(--luzmo-positive-color-focus);--tag-variant-fill-content-color:var(--luzmo-positive-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-positive-on-subtle-color)}:host([variant=negative]){--tag-variant-color:var(--luzmo-negative-color);--tag-variant-color-hover:var(--luzmo-negative-color-hover);--tag-variant-color-down:var(--luzmo-negative-color-down);--tag-variant-color-focus:var(--luzmo-negative-color-focus);--tag-variant-fill-content-color:var(--luzmo-negative-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-negative-on-subtle-color)}:host([variant=notice]){--tag-variant-color:var(--luzmo-notice-color);--tag-variant-color-hover:var(--luzmo-notice-color-hover);--tag-variant-color-down:var(--luzmo-notice-color-down);--tag-variant-color-focus:var(--luzmo-notice-color-focus);--tag-variant-fill-color-hover:color-mix(in oklch, var(--luzmo-notice-color), white 12%);--tag-variant-fill-color-down:color-mix(in oklch, var(--luzmo-notice-color), white 24%);--tag-variant-fill-color-focus:var(--tag-variant-fill-color-hover);--tag-variant-fill-content-color:var(--luzmo-notice-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-notice-on-subtle-color)}:host([variant=seafoam]){--tag-variant-color:var(--luzmo-seafoam-color);--tag-variant-fill-content-color:white}:host([variant=indigo]){--tag-variant-color:var(--luzmo-indigo-color);--tag-variant-fill-content-color:white}:host([variant=purple]){--tag-variant-color:var(--luzmo-purple-color);--tag-variant-fill-content-color:white}:host([variant=fuchsia]){--tag-variant-color:var(--luzmo-fuchsia-color);--tag-variant-fill-content-color:white}:host([variant=magenta]){--tag-variant-color:var(--luzmo-magenta-color);--tag-variant-fill-content-color:white}:host([variant=yellow]){--tag-variant-color:var(--luzmo-yellow-color);--tag-variant-fill-content-color:black}:host([variant=gray]){--tag-variant-color:var(--luzmo-gray-color);--tag-variant-fill-content-color:white}:host([variant=red]){--tag-variant-color:var(--luzmo-red-color);--tag-variant-fill-content-color:white}:host([variant=orange]){--tag-variant-color:var(--luzmo-orange-color);--tag-variant-fill-content-color:black}:host([variant=chartreuse]){--tag-variant-color:var(--luzmo-chartreuse-color);--tag-variant-fill-content-color:white}:host([variant=celery]){--tag-variant-color:var(--luzmo-celery-color);--tag-variant-fill-content-color:black}:host([variant=green]){--tag-variant-color:var(--luzmo-green-color);--tag-variant-fill-content-color:white}:host([variant=cyan]){--tag-variant-color:var(--luzmo-cyan-color);--tag-variant-fill-content-color:white}:host([variant=blue]){--tag-variant-color:var(--luzmo-blue-color);--tag-variant-fill-content-color:white}:host([variant]:not([treatment=fill])){--tag-border-color:var(--tag-variant-color);--tag-border-color-hover:var(--tag-variant-color-hover);--tag-border-color-active:var(--tag-variant-color-down);--tag-border-color-focus:var(--tag-variant-color-focus);--tag-content-color:var(--tag-variant-color);--tag-content-color-hover:var(--tag-variant-color-hover);--tag-content-color-active:var(--tag-variant-color-down);--tag-content-color-focus:var(--tag-variant-color-focus);--tag-background-color:transparent;--tag-background-color-hover:color-mix(in oklch, var(--tag-variant-color), transparent 90%);--tag-background-color-active:color-mix(in oklch, var(--tag-variant-color), transparent 82%);--tag-background-color-focus:color-mix(in oklch, var(--tag-variant-color), transparent 90%);--tag-border-color-selected:var(--tag-variant-color-down);--tag-border-color-selected-hover:var(--tag-variant-color-down);--tag-border-color-selected-active:var(--tag-variant-color-down);--tag-border-color-selected-focus:var(--tag-variant-color-down);--tag-content-color-selected:var(--tag-variant-color-down);--tag-background-color-selected:color-mix(in oklch, var(--tag-variant-color), transparent 80%);--tag-background-color-selected-hover:color-mix(in oklch, var(--tag-variant-color), transparent 72%);--tag-background-color-selected-active:color-mix(in oklch, var(--tag-variant-color), transparent 72%);--tag-background-color-selected-focus:color-mix(in oklch, var(--tag-variant-color), transparent 72%)}:host([variant][treatment=subtle]){--tag-subtle-background-color:color-mix(in srgb, var(--tag-variant-color) var(--tag-subtle-background-opacity), var(--luzmo-background-color));--tag-subtle-interaction-background-color:color-mix(in srgb, var(--tag-variant-color) var(--tag-subtle-interaction-background-opacity), var(--luzmo-background-color));--tag-subtle-content-color:var(--tag-variant-subtle-content-color,color-mix(in oklch, var(--tag-variant-color), var(--luzmo-font-color) var(--tag-subtle-content-mix)));--tag-subtle-interaction-content-color:color-mix(in oklch, var(--tag-variant-color), var(--luzmo-font-color) var(--tag-subtle-content-mix));--tag-background-color:var(--tag-subtle-background-color);--tag-background-color-hover:var(--tag-subtle-interaction-background-color);--tag-background-color-active:var(--tag-subtle-background-color);--tag-background-color-focus:var(--tag-subtle-interaction-background-color);--tag-background-color-selected:var(--tag-subtle-background-color);--tag-background-color-selected-hover:var(--tag-subtle-background-color);--tag-background-color-selected-active:var(--tag-subtle-background-color);--tag-background-color-selected-focus:var(--tag-subtle-background-color);--tag-content-color:var(--tag-subtle-content-color);--tag-content-color-hover:var(--tag-subtle-interaction-content-color);--tag-content-color-active:var(--tag-subtle-content-color);--tag-content-color-focus:var(--tag-subtle-interaction-content-color);--tag-content-color-selected:var(--tag-subtle-content-color);--luzmo-clear-button-background-color-hover:var(--tag-subtle-interaction-background-color);--luzmo-clear-button-background-color-focus:var(--tag-subtle-interaction-background-color);--luzmo-clear-button-background-color-down:var(--tag-subtle-background-color)}:host([variant][treatment=fill]){--tag-background-color:var(--tag-variant-color);--tag-background-color-hover:var(--tag-variant-fill-color-hover);--tag-background-color-active:var(--tag-variant-fill-color-down);--tag-background-color-focus:var(--tag-variant-fill-color-focus);--tag-content-color:var(--tag-variant-fill-content-color);--tag-content-color-hover:var(--tag-variant-fill-content-color);--tag-content-color-active:var(--tag-variant-fill-content-color);--tag-content-color-focus:var(--tag-variant-fill-content-color);--tag-border-color:transparent;--tag-border-color-hover:transparent;--tag-border-color-active:transparent;--tag-border-color-focus:transparent;--tag-background-color-selected:var(--tag-variant-fill-color-down);--tag-background-color-selected-hover:var(--tag-variant-fill-color-down);--tag-background-color-selected-active:var(--tag-variant-fill-color-down);--tag-background-color-selected-focus:var(--tag-variant-fill-color-down);--tag-content-color-selected:var(--tag-variant-fill-content-color);--tag-border-color-selected:transparent;--tag-border-color-selected-hover:transparent;--tag-border-color-selected-active:transparent;--tag-border-color-selected-focus:transparent;--luzmo-clear-button-background-color-hover:var(--tag-variant-fill-color-hover);--luzmo-clear-button-background-color-focus:var(--tag-variant-fill-color-focus);--luzmo-clear-button-background-color-down:var(--tag-variant-fill-color-down)}:host([variant]:is([treatment=subtle],[treatment=fill])[invalid]){--tag-background-color:var(--luzmo-background-color);--tag-background-color-hover:var(--luzmo-background-color-hover);--tag-background-color-active:var(--luzmo-background-color-down);--tag-background-color-focus:var(--luzmo-background-color-focus);--tag-content-color:var(--luzmo-negative-color);--tag-content-color-hover:var(--luzmo-negative-color-hover);--tag-content-color-active:var(--luzmo-negative-color-down);--tag-content-color-focus:var(--luzmo-negative-color-focus)}: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,: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)}: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)}`,c=[`accent`,`neutral`,`informative`,`positive`,`negative`,`notice`,`seafoam`,`indigo`,`purple`,`fuchsia`,`magenta`,`yellow`,`gray`,`red`,`orange`,`chartreuse`,`celery`,`green`,`cyan`,`blue`],l=class extends t.n(e.n,{validSizes:[`s`,`m`,`l`,`xl`],noDefaultSize:!0}){static get styles(){return[(0,a.unsafeCSS)(s)]}get variant(){return this._variant}set variant(e){if(e===this._variant)return;let t=this._variant;e&&c.includes(e)?(this._variant=e,this.setAttribute(`variant`,e)):(this._variant=void 0,this.removeAttribute(`variant`)),this.requestUpdate(`variant`,t)}constructor(){super(),this._languageScript=new i.n(this),this.treatment=`outline`,this.deletable=!1,this.disabled=!1,this.readonly=!1,this._labelText=``,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=e=>{if(!this.deletable||this.disabled)return;let{code:t}=e;switch(t){case`Backspace`:case`Space`:case`Delete`:e.preventDefault(),e.stopPropagation(),this.delete();break;default:return}},this.addEventListener(`focusin`,this.handleFocusin)}handleIconSlotChange(e){e.target.assignedElements().forEach(e=>{e.tagName.toLowerCase()===`luzmo-icon`&&e.setAttribute(`block`,``)})}handleLabelSlotChange(e){let t=e.target.assignedNodes({flatten:!0});this._labelText=t.map(e=>e.textContent).join(``).trim()}delete(){this.readonly||this.dispatchEvent(new Event(`delete`,{bubbles:!0,cancelable:!0,composed:!0}))&&(this.blur(),this.remove())}render(){return a.html`
|
|
19
|
-
<slot name="avatar"></slot>
|
|
20
|
-
<slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
|
|
21
|
-
<span class="label" focusable>
|
|
22
|
-
<span class="label-text">
|
|
23
|
-
<slot @slotchange=${this.handleLabelSlotChange}></slot>
|
|
24
|
-
</span>
|
|
25
|
-
${this._labelText?a.html`
|
|
26
|
-
<luzmo-tooltip
|
|
27
|
-
self-managed
|
|
28
|
-
show-only-if-truncated
|
|
29
|
-
truncated-element-selector="slot"
|
|
30
|
-
placement="top"
|
|
31
|
-
>
|
|
32
|
-
${this._labelText}
|
|
33
|
-
</luzmo-tooltip>
|
|
34
|
-
`:a.nothing}
|
|
35
|
-
</span>
|
|
36
|
-
${this.deletable?a.html`
|
|
37
|
-
<luzmo-clear-button
|
|
38
|
-
class="clear-button"
|
|
39
|
-
?disabled=${this.disabled}
|
|
40
|
-
label="Remove"
|
|
41
|
-
.size=${this.size}
|
|
42
|
-
tabindex="-1"
|
|
43
|
-
aria-hidden="true"
|
|
44
|
-
@click=${this.delete}
|
|
45
|
-
></luzmo-clear-button>
|
|
46
|
-
`:a.nothing}
|
|
47
|
-
`}firstUpdated(e){super.firstUpdated(e),this.hasAttribute(`role`)||this.setAttribute(`role`,`listitem`),this.hasAttribute(`treatment`)||this.setAttribute(`treatment`,this.treatment),this.deletable&&this.setAttribute(`tabindex`,`0`)}updated(e){super.updated(e),e.has(`disabled`)&&(this.disabled?this.setAttribute(`aria-disabled`,`true`):this.removeAttribute(`aria-disabled`))}};e.t([(0,o.property)({reflect:!0})],l.prototype,`variant`,null),e.t([(0,o.property)({reflect:!0})],l.prototype,`treatment`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],l.prototype,`deletable`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],l.prototype,`disabled`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],l.prototype,`readonly`,void 0),e.t([(0,o.state)()],l.prototype,`_labelText`,void 0);var u=`: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))}::slotted(:first-child){margin-inline-start:0}::slotted(:last-child){margin-inline-end:0}:host{--luzmo-tag-group-item-margin-block:var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline:var(--luzmo-spacing-2);--luzmo-clear-button-width:fit-content;margin:0;padding:0;list-style:none;display:inline-flex}: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;margin:0;padding:0;list-style:none;display:inline-flex}`,d=class extends n.t(t.n(e.n)){static get styles(){return[(0,a.unsafeCSS)(u)]}get tags(){return this.defaultNodes.filter(e=>e instanceof l)}constructor(){super(),this.rovingTabindexController=new r.t(this,{focusInIndex:e=>e.findIndex(e=>!e.disabled&&e.deletable),elements:()=>this.tags,isFocusableElement:e=>!e.disabled&&e.deletable}),this.handleFocusin=()=>{this.addEventListener(`focusout`,this.handleFocusout),this.addEventListener(`keydown`,this.handleKeydown)},this.handleKeydown=e=>{let{code:t}=e;if(t!==`PageUp`&&t!==`PageDown`)return;let n=(e,t)=>e[(e.length+t)%e.length],r=[...this.getRootNode().querySelectorAll(`luzmo-tags`)];if(r.length<2)return;e.preventDefault();let i=r.indexOf(this),a=t===`PageUp`?-1:1,o=i+a,s=n(r,o),c=0;for(;s.tags.length===0;){if(++c>=r.length)return;o+=a,s=n(r,o)}s.focus()},this.handleFocusout=()=>{this.removeEventListener(`keydown`,this.handleKeydown),this.removeEventListener(`focusout`,this.handleFocusout)},this.addEventListener(`focusin`,this.handleFocusin)}focus(){this.rovingTabindexController.focus()}handleSlotchange(){this.rovingTabindexController.clearElementCache(),this.updateTagSizes()}updateTagSizes(){this.tags.forEach(e=>{e.size=this.size})}render(){return a.html` <slot @slotchange=${this.handleSlotchange}></slot> `}firstUpdated(){this.hasAttribute(`role`)||this.setAttribute(`role`,`list`),this.hasAttribute(`aria-label`)||this.setAttribute(`aria-label`,`Tags`)}updated(e){super.updated(e),e.has(`size`)&&this.updateTagSizes()}};e.t([(0,o.queryAssignedNodes)()],d.prototype,`defaultNodes`,void 0),customElements.get(`luzmo-tag`)||customElements.define(`luzmo-tag`,l),customElements.get(`luzmo-tags`)||customElements.define(`luzmo-tags`,d),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return d}});
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import"../tokens.js";import{c as e,y as t}from"./lit-BN_lRQbJ.js";import{c as n,l as r,y as i}from"./lucero-runtime-DGJ9-isg.js";import{C as a,D as o}from"./luzmo-icons-B-pCv-xg.js";import{t as s}from"./button-base-C7jeeyLp.js";var c=`:host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family,var(--luzmo-sans-font-family-stack,var(--luzmo-font-family)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height,var(--luzmo-line-height-100,var(--line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration,var(--luzmo-animation-duration-100,var(--animation-duration-100))) ease-out, border-color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration-100,var(--animation-duration-100))) ease-out, color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration-100,var(--animation-duration-100))) ease-out, box-shadow var(--luzmo-button-animation-duration,var(--luzmo-animation-duration-100,var(--animation-duration-100))) ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible;border-style:solid!important}:host(:focus){outline:none}:host([disabled]),:host([disabled]){cursor:default}::slotted([slot=icon]){flex-shrink:0;justify-content:center;align-items:center;max-block-size:100%;display:flex}#label{text-align:center;place-self:center}#label:empty{display:none}@media (forced-colors:active){:host{--highcontrast-action-button-focus-indicator-color:ButtonText}:host:after{forced-color-adjust:none}:host([selected]){--highcontrast-action-button-background-color-default:Highlight;--highcontrast-action-button-background-color-hover:Highlight;--highcontrast-action-button-background-color-focus:Highlight;--highcontrast-action-button-background-color-down:Highlight;--highcontrast-action-button-background-color-disabled:ButtonFace;--highcontrast-action-button-border-color-default:HighlightText;--highcontrast-action-button-border-color-hover:HighlightText;--highcontrast-action-button-border-color-focus:HighlightText;--highcontrast-action-button-border-color-down:HighlightText;--highcontrast-action-button-border-color-disabled:GrayText;--highcontrast-action-button-content-color-default:HighlightText;--highcontrast-action-button-content-color-hover:HighlightText;--highcontrast-action-button-content-color-focus:HighlightText;--highcontrast-action-button-content-color-down:HighlightText;--highcontrast-action-button-content-color-disabled:GrayText}:host([selected]) .hold-affordance,:host([selected]) ::slotted([slot=icon]),:host([selected]) #label{forced-color-adjust:none}}:host{--action-button-focus-indicator-border-radius:calc(var(--action-button-border-radius) + var(--action-button-focus-indicator-gap));--action-button-edge-to-visual:calc(var(--action-button-edge-to-visual-size) - var(--action-button-border-width));--action-button-edge-to-text:calc(var(--action-button-edge-to-text-size) - var(--action-button-border-width));--action-button-edge-to-visual-only:calc(var(--action-button-edge-to-visual-only-size) - var(--action-button-border-width));min-inline-size:var(--luzmo-action-button-min-width,var(--action-button-min-width));block-size:var(--luzmo-action-button-height,var(--action-button-height));border-radius:var(--luzmo-action-button-border-radius,var(--action-button-border-radius));gap:calc(var(--luzmo-action-button-text-to-visual,var(--action-button-text-to-visual)) + var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)) - var(--luzmo-action-button-edge-to-visual-only,var(--action-button-edge-to-visual-only)));padding-inline:var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text));background-color:var(--highcontrast-action-button-background-color-default,var(--luzmo-action-button-background-color-default,var(--action-button-background-color-default)));color:var(--highcontrast-action-button-content-color-default,var(--luzmo-action-button-content-color-default,var(--action-button-content-color-default)));position:relative;border-width:var(--luzmo-action-button-border-width,var(--action-button-border-width))!important;border-color:var(--highcontrast-action-button-border-color-default,var(--luzmo-action-button-border-color-default,var(--action-button-border-color-default)))!important}:is(:host:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),:host([dir=rtl])){--logical-rotation:matrix(-1, 0, 0, 1, 0, 0)}@media (hover:hover){:host(:hover){background-color:var(--highcontrast-action-button-background-color-hover,var(--luzmo-action-button-background-color-hover,var(--action-button-background-color-hover)));color:var(--highcontrast-action-button-content-color-hover,var(--luzmo-action-button-content-color-hover,var(--action-button-content-color-hover)));border-color:var(--highcontrast-action-button-border-color-hover,var(--luzmo-action-button-border-color-hover,var(--action-button-border-color-hover)))!important}}:host(:focus-visible){background-color:var(--highcontrast-action-button-background-color-focus,var(--luzmo-action-button-background-color-focus,var(--action-button-background-color-focus)));color:var(--highcontrast-action-button-content-color-focus,var(--luzmo-action-button-content-color-focus,var(--action-button-content-color-focus)));border-color:var(--highcontrast-action-button-border-color-focus,var(--luzmo-action-button-border-color-focus,var(--action-button-border-color-focus)))!important}:host(:is(:active,[active])){background-color:var(--highcontrast-action-button-background-color-down,var(--luzmo-action-button-background-color-down,var(--action-button-background-color-down)));color:var(--highcontrast-action-button-content-color-down,var(--luzmo-action-button-content-color-down,var(--action-button-content-color-down)));border-color:var(--highcontrast-action-button-border-color-down,var(--luzmo-action-button-border-color-down,var(--action-button-border-color-down)))!important}:host([disabled]),:host([disabled]){background-color:var(--highcontrast-action-button-background-color-disabled,var(--luzmo-action-button-background-color-disabled,var(--action-button-background-color-disabled)));color:var(--highcontrast-action-button-content-color-disabled,var(--luzmo-action-button-content-color-disabled,var(--action-button-content-color-disabled)));border-color:var(--highcontrast-action-button-border-color-disabled,var(--luzmo-action-button-border-color-disabled,var(--action-button-border-color-disabled)))!important}:host([selected]){--luzmo-action-button-background-color-default:var(--luzmo-action-button-background-color-default-selected);--luzmo-action-button-background-color-hover:var(--luzmo-action-button-background-color-hover-selected);--luzmo-action-button-background-color-down:var(--luzmo-action-button-background-color-down-selected);--luzmo-action-button-background-color-focus:var(--luzmo-action-button-background-color-focus-selected);--luzmo-action-button-content-color-default:var(--luzmo-action-button-content-color-default-selected);--luzmo-action-button-content-color-hover:var(--luzmo-action-button-content-color-hover-selected);--luzmo-action-button-content-color-down:var(--luzmo-action-button-content-color-down-selected);--luzmo-action-button-content-color-focus:var(--luzmo-action-button-content-color-focus-selected)}:host([selected][emphasized]){--luzmo-action-button-background-color-default:var(--luzmo-action-button-background-color-default-selected-emphasized);--luzmo-action-button-background-color-hover:var(--luzmo-action-button-background-color-hover-selected-emphasized);--luzmo-action-button-background-color-down:var(--luzmo-action-button-background-color-down-selected-emphasized);--luzmo-action-button-background-color-focus:var(--luzmo-action-button-background-color-focus-selected-emphasized);--luzmo-action-button-content-color-default:var(--luzmo-action-button-content-color-default-selected-emphasized);--luzmo-action-button-content-color-hover:var(--luzmo-action-button-content-color-hover-selected-emphasized);--luzmo-action-button-content-color-down:var(--luzmo-action-button-content-color-down-selected-emphasized);--luzmo-action-button-content-color-focus:var(--luzmo-action-button-content-color-focus-selected-emphasized)}:host([selected][static-color=black]),:host([selected][static-color=white]){--luzmo-action-button-content-color-default:var(--luzmo-action-button-static-content-color);--luzmo-action-button-content-color-hover:var(--luzmo-action-button-static-content-color);--luzmo-action-button-content-color-down:var(--luzmo-action-button-static-content-color);--luzmo-action-button-content-color-focus:var(--luzmo-action-button-static-content-color)}::slotted([slot=icon]){min-inline-size:var(--luzmo-action-button-icon-size,var(--action-button-icon-size));color:inherit;margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual,var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual,var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)))}.hold-affordance+::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual,var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only,var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)))}.hold-affordance+[icon-only]::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){text-align:center;margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual-only,var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only,var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)))}#label{pointer-events:none;font-size:var(--luzmo-action-button-font-size,var(--action-button-font-size));white-space:nowrap;color:var(--luzmo-action-button-label-color,inherit);text-overflow:ellipsis;overflow:hidden}:host([data-luzmo-language-script=Latn]) #label{text-box:trim-both cap alphabetic;margin-block:-.35em;padding-block:.35em}.hold-affordance{color:inherit;transform:var(--logical-rotation);font-size:var(--action-button-corner-triangle-size);position:absolute;inset-block-end:calc(var(--luzmo-action-button-edge-to-hold-icon,var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width,var(--action-button-border-width)));inset-inline-end:calc(var(--luzmo-action-button-edge-to-hold-icon,var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width,var(--action-button-border-width)))}:host{transition:border-color var(--luzmo-action-button-animation-duration,var(--action-button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-action-button-focus-indicator-gap,var(--action-button-focus-indicator-gap)) + var(--luzmo-action-button-border-width,var(--action-button-border-width))) * -1);border-radius:var(--luzmo-action-button-focus-indicator-border-radius,var(--action-button-focus-indicator-border-radius));transition:box-shadow var(--luzmo-action-button-animation-duration,var(--action-button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;inset:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-action-button-focus-indicator-width,var(--action-button-focus-indicator-width)) var(--highcontrast-action-button-focus-indicator-color,var(--luzmo-action-button-focus-indicator-color,var(--action-button-focus-indicator-color)))}:host{--action-button-animation-duration:var(--luzmo-animation-duration);--action-button-border-radius:var(--luzmo-border-radius);--action-button-border-width:var(--luzmo-border-width);--action-button-content-color-default:var(--luzmo-font-color);--action-button-content-color-hover:var(--luzmo-font-color-hover);--action-button-content-color-down:var(--luzmo-font-color-down);--action-button-content-color-focus:var(--luzmo-font-color-focus);--action-button-focus-indicator-gap:var(--luzmo-indicator-gap);--action-button-focus-indicator-width:var(--luzmo-indicator-width);--action-button-focus-indicator-color:var(--luzmo-indicator-color);--action-button-background-color-default:var(--luzmo-background-color);--action-button-background-color-hover:var(--luzmo-background-color-hover);--action-button-background-color-down:var(--luzmo-background-color-down);--action-button-background-color-focus:var(--luzmo-background-color-focus);--action-button-border-color-default:var(--luzmo-border-color);--action-button-border-color-hover:var(--luzmo-border-color-hover);--action-button-border-color-down:var(--luzmo-border-color-down);--action-button-border-color-focus:var(--luzmo-border-color-focus);--action-button-background-color-disabled:var(--luzmo-background-color);--action-button-border-color-disabled:var(--luzmo-border-color-disabled);--action-button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([treatment=fill]:not([quiet],[selected],[static-color]):is([variant=neutral],:not([variant]))){--action-button-background-color-default:var(--luzmo-background-color-highlight);--action-button-background-color-hover:var(--luzmo-background-color-highlight-hover);--action-button-background-color-down:var(--luzmo-background-color-highlight-down);--action-button-background-color-focus:var(--luzmo-background-color-highlight-focus);--action-button-border-color-hover:var(--luzmo-border-color);--action-button-background-color-disabled:var(--luzmo-background-color-disabled)}:host([quiet]){--action-button-background-color-default:transparent;--action-button-background-color-hover:var(--luzmo-background-color-hover);--action-button-background-color-down:var(--luzmo-background-color-down);--action-button-background-color-focus:var(--luzmo-background-color-focus);--action-button-background-color-disabled:transparent;--action-button-border-color-default:transparent;--action-button-border-color-hover:transparent;--action-button-border-color-down:transparent;--action-button-border-color-focus:transparent;--action-button-border-color-disabled:transparent}:host([selected]){--action-button-background-color-default:var(--luzmo-font-color);--action-button-background-color-hover:var(--luzmo-font-color-hover);--action-button-background-color-down:var(--luzmo-font-color-down);--action-button-background-color-focus:var(--luzmo-font-color-focus);--action-button-content-color-default:var(--luzmo-background-color);--action-button-content-color-hover:var(--luzmo-background-color);--action-button-content-color-down:var(--luzmo-background-color);--action-button-content-color-focus:var(--luzmo-background-color);--action-button-border-color-default:transparent;--action-button-border-color-hover:transparent;--action-button-border-color-down:transparent;--action-button-border-color-focus:transparent;--action-button-border-color-disabled:transparent;--action-button-background-color-disabled:var(--luzmo-background-color-disabled)}:host([selected][emphasized]){--action-button-background-color-default:var(--luzmo-primary);--action-button-background-color-hover:var(--luzmo-primary-hover);--action-button-background-color-down:var(--luzmo-primary-down);--action-button-background-color-focus:var(--luzmo-primary-focus);--action-button-content-color-default:var(--luzmo-primary-inverse-color);--action-button-content-color-hover:var(--luzmo-primary-inverse-color);--action-button-content-color-down:var(--luzmo-primary-inverse-color);--action-button-content-color-focus:var(--luzmo-primary-inverse-color)}:host([variant=primary]:not([quiet],[selected],[static-color])){--action-button-background-color-default:transparent;--action-button-background-color-hover:var(--luzmo-background-color-hover);--action-button-background-color-down:var(--luzmo-background-color-down);--action-button-background-color-focus:var(--luzmo-background-color-focus);--action-button-border-color-default:var(--luzmo-primary);--action-button-border-color-hover:var(--luzmo-primary-hover);--action-button-border-color-down:var(--luzmo-primary-down);--action-button-border-color-focus:var(--luzmo-primary-focus);--action-button-content-color-default:var(--luzmo-primary);--action-button-content-color-hover:var(--luzmo-primary-down);--action-button-content-color-down:var(--luzmo-primary-down);--action-button-content-color-focus:var(--luzmo-primary-focus);--action-button-background-color-disabled:transparent;--action-button-border-color-disabled:var(--luzmo-border-color-disabled);--action-button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([variant=negative]:not([static-color])){--action-button-background-color-hover:rgba(var(--luzmo-negative-color-rgb), .1);--action-button-background-color-down:rgba(var(--luzmo-negative-color-rgb), .16);--action-button-background-color-focus:rgba(var(--luzmo-negative-color-rgb), .1);--action-button-content-color-default:var(--luzmo-negative-color);--action-button-content-color-hover:var(--luzmo-negative-color-hover);--action-button-content-color-down:var(--luzmo-negative-color-down);--action-button-content-color-focus:var(--luzmo-negative-color-focus)}:host([variant=negative]:not([quiet],[selected],[static-color])){--action-button-border-color-default:var(--luzmo-negative-color);--action-button-border-color-hover:var(--luzmo-negative-color-hover);--action-button-border-color-down:var(--luzmo-negative-color-down);--action-button-border-color-focus:var(--luzmo-negative-color-focus)}:host([variant=negative][selected]:not([static-color])){--action-button-background-color-default:var(--luzmo-negative-color);--action-button-background-color-hover:var(--luzmo-negative-color-hover);--action-button-background-color-down:var(--luzmo-negative-color-down);--action-button-background-color-focus:var(--luzmo-negative-color-focus);--action-button-content-color-default:var(--luzmo-negative-inverse-color);--action-button-content-color-hover:var(--luzmo-negative-inverse-color);--action-button-content-color-down:var(--luzmo-negative-inverse-color);--action-button-content-color-focus:var(--luzmo-negative-inverse-color)}:host([static-color=black][quiet]),:host([static-color=white][quiet]){--action-button-border-color-default:transparent;--action-button-border-color-hover:transparent;--action-button-border-color-down:transparent;--action-button-border-color-focus:transparent;--action-button-border-color-disabled:transparent}:host([static-color=black]){--action-button-background-color-default:transparent;--action-button-background-color-hover:#00000040;--action-button-background-color-down:#0006;--action-button-background-color-focus:#00000040;--action-button-background-color-disabled:transparent;--action-button-border-color-default:#0006;--action-button-border-color-hover:#0000008c;--action-button-border-color-down:#000000b3;--action-button-border-color-focus:#00000040;--action-button-border-color-disabled:transparent;--action-button-content-color-default:#000;--action-button-content-color-hover:#000;--action-button-content-color-down:#000;--action-button-content-color-focus:#000;--action-button-content-color-disabled:#0000008c;--action-button-focus-indicator-color:#000}:host([static-color=black][selected]){--action-button-background-color-default:#000000e6;--action-button-background-color-hover:#000;--action-button-background-color-down:#000;--action-button-background-color-focus:#000;--action-button-background-color-disabled:#0000001a;--action-button-border-color-disabled:transparent;--action-button-content-color-default:#fff;--action-button-content-color-hover:#fff;--action-button-content-color-down:#fff;--action-button-content-color-focus:#fff}:host([static-color=black][selected][emphasized]){--action-button-background-color-default:#000000e6;--action-button-background-color-hover:#000;--action-button-background-color-down:#000;--action-button-background-color-focus:#000;--action-button-content-color-default:#fff;--action-button-content-color-hover:#fff;--action-button-content-color-down:#fff;--action-button-content-color-focus:#fff}:host([static-color=white]){--action-button-background-color-default:transparent;--action-button-background-color-hover:#ffffff40;--action-button-background-color-down:#fff6;--action-button-background-color-focus:#ffffff40;--action-button-background-color-disabled:transparent;--action-button-border-color-default:#fff6;--action-button-border-color-hover:#ffffff8c;--action-button-border-color-down:#ffffffb3;--action-button-border-color-focus:#ffffff8c;--action-button-border-color-disabled:#ffffff40;--action-button-content-color-default:#fff;--action-button-content-color-hover:#fff;--action-button-content-color-down:#fff;--action-button-content-color-focus:#fff;--action-button-content-color-disabled:#ffffff8c;--action-button-focus-indicator-color:#fff}:host([static-color=white][selected]){--action-button-background-color-default:#ffffffe6;--action-button-background-color-hover:#fff;--action-button-background-color-down:#fff;--action-button-background-color-focus:#fff;--action-button-background-color-disabled:#ffffff1a;--action-button-border-color-disabled:transparent;--action-button-content-color-default:#000;--action-button-content-color-hover:#000;--action-button-content-color-down:#000;--action-button-content-color-focus:#000}:host([static-color=white][selected][emphasized]){--action-button-background-color-default:#ffffffe6;--action-button-background-color-hover:#fff;--action-button-background-color-down:#fff;--action-button-background-color-focus:#fff;--action-button-content-color-default:#000}:host([variant=pill]),:host([variant=accent]),:host([variant=pill][size]),:host([variant=accent][size]){--action-button-min-width:auto}:host([variant=accent]){--action-button-background-color-default:color-mix(in oklch, var(--luzmo-primary), white 88%);--action-button-background-color-hover:color-mix(in oklch, var(--luzmo-primary), white 75%);--action-button-background-color-down:var(--action-button-background-color-hover);--action-button-background-color-focus:var(--action-button-background-color-hover);--action-button-border-color-default:color-mix(in oklch, var(--luzmo-primary), white 70%);--action-button-border-color-hover:color-mix(in oklch, var(--luzmo-primary), white 50%);--action-button-border-color-down:var(--action-button-border-color-hover);--action-button-border-color-focus:var(--action-button-border-color-hover);--action-button-content-color-default:color-mix(in oklch, var(--luzmo-primary), black 25%);--action-button-content-color-hover:var(--action-button-content-color-default);--action-button-content-color-down:var(--action-button-content-color-default);--action-button-content-color-focus:var(--action-button-content-color-default);--action-button-background-color-disabled:color-mix(in oklch, var(--luzmo-primary), white 92%);--action-button-border-color-disabled:color-mix(in oklch, var(--luzmo-primary), white 85%);--action-button-content-color-disabled:color-mix(in oklch, var(--luzmo-primary), white 40%)}:host{--action-button-min-width:var(--luzmo-component-height);--action-button-height:var(--luzmo-component-height);--action-button-icon-size:var(--luzmo-font-size-l);--action-button-font-size:var(--luzmo-font-size);--action-button-text-to-visual:var(--luzmo-spacing-2);--action-button-edge-to-hold-icon:var(--luzmo-spacing-2);--action-button-edge-to-visual-size:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--action-button-edge-to-visual-only-size:var(--luzmo-spacing-3);--action-button-edge-to-text-size:12px;--action-button-corner-triangle-size:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=xs]){--action-button-min-width:var(--luzmo-component-height-xs);--action-button-height:var(--luzmo-component-height-xs);--action-button-icon-size:var(--luzmo-font-size-s);--action-button-font-size:var(--luzmo-font-size-xs);--action-button-text-to-visual:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--action-button-edge-to-hold-icon:var(--luzmo-spacing-2);--action-button-edge-to-visual-size:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--action-button-edge-to-visual-only-size:var(--luzmo-spacing-2);--action-button-edge-to-text-size:var(--luzmo-spacing-2);--action-button-corner-triangle-size:var(--luzmo-spacing-2)}:host([size=s]){--action-button-min-width:var(--luzmo-component-height-s);--action-button-height:var(--luzmo-component-height-s);--action-button-icon-size:var(--luzmo-font-size);--action-button-font-size:var(--luzmo-font-size-s);--action-button-text-to-visual:var(--luzmo-spacing-3);--action-button-edge-to-hold-icon:var(--luzmo-spacing-2);--action-button-edge-to-visual-size:var(--luzmo-spacing-3);--action-button-edge-to-visual-only-size:var(--luzmo-spacing-2);--action-button-edge-to-text-size:var(--luzmo-spacing-3);--action-button-corner-triangle-size:var(--luzmo-spacing-2)}:host([size=l]){--action-button-min-width:var(--luzmo-component-height-l);--action-button-height:var(--luzmo-component-height-l);--action-button-icon-size:var(--luzmo-font-size-xl);--action-button-font-size:var(--luzmo-font-size-l);--action-button-text-to-visual:var(--luzmo-spacing-3);--action-button-edge-to-hold-icon:var(--luzmo-spacing-2);--action-button-edge-to-visual-size:var(--luzmo-spacing-4);--action-button-edge-to-visual-only-size:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--action-button-edge-to-text-size:var(--luzmo-spacing-5);--action-button-corner-triangle-size:var(--luzmo-spacing-3)}:host([size=xl]){--action-button-min-width:var(--luzmo-component-height-xl);--action-button-height:var(--luzmo-component-height-xl);--action-button-icon-size:var(--luzmo-font-size-xxl);--action-button-font-size:var(--luzmo-font-size-xl);--action-button-text-to-visual:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--action-button-edge-to-hold-icon:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--action-button-edge-to-visual-size:var(--luzmo-spacing-5);--action-button-edge-to-visual-only-size:var(--luzmo-spacing-4);--action-button-edge-to-text-size:var(--luzmo-spacing-5);--action-button-corner-triangle-size:var(--luzmo-spacing-3)}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--action-button-label-flex-grow);text-align:var(--action-button-label-text-align);pointer-events:none!important}:host([size=xs]){min-width:var(--action-button-height,0);--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-2) - var(--action-button-border-width))}:host([size=s]){--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-2) - var(--action-button-border-width))}:host([size=m]){--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1) - var(--action-button-border-width))}:host([size=l]){--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-3) - var(--action-button-border-width))}:host([size=xl]){--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-4) - var(--action-button-border-width))}@media (forced-colors:active){:host{--highcontrast-action-button-border-color-disabled:GrayText;--highcontrast-action-button-content-color-disabled:GrayText}}`,l,u=[`neutral`,`primary`,`negative`,`pill`,`accent`],d=class extends n(s,{validSizes:[`xs`,`s`,`m`,`l`,`xl`],noDefaultSize:!0}){static get styles(){return[...super.styles,t(c)]}get variant(){return this._variant}set variant(e){let t=u.includes(e)?e:`neutral`;if(t===this._variant){this.getAttribute(`variant`)!==t&&this.setAttribute(`variant`,t);return}let n=this._variant;this._variant=t,this.requestUpdate(`variant`,n),this.setAttribute(`variant`,t)}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||``,this._value?this.setAttribute(`value`,this._value):this.removeAttribute(`value`))}get itemText(){return(this.textContent||``).trim()}constructor(){super(),this.emphasized=!1,this.holdAffordance=!1,this.quiet=!1,this.treatment=`outline`,this.role=`button`,this.selected=!1,this.toggles=!1,this._variant=`neutral`,this._value=``,this.onClick=()=>{this.toggles&&(this.selected=!this.selected,this.dispatchEvent(new Event(`change`,{cancelable:!0,bubbles:!0,composed:!0}))||(this.selected=!this.selected))},this.addEventListener(`click`,this.onClick)}handlePointerdownHoldAffordance(e){e.button===0&&(this.addEventListener(`pointerup`,this.handlePointerupHoldAffordance),this.addEventListener(`pointercancel`,this.handlePointerupHoldAffordance),l=setTimeout(()=>{this.dispatchEvent(new CustomEvent(`longpress`,{bubbles:!0,composed:!0,detail:{source:`pointer`}}))},300))}handlePointerupHoldAffordance(){clearTimeout(l),this.removeEventListener(`pointerup`,this.handlePointerupHoldAffordance),this.removeEventListener(`pointercancel`,this.handlePointerupHoldAffordance)}handleKeydown(e){if(!this.holdAffordance)return super.handleKeydown(e);let{code:t,altKey:n}=e;(t===`Space`||n&&t===`ArrowDown`)&&(e.preventDefault(),t===`ArrowDown`&&(e.stopPropagation(),e.stopImmediatePropagation()),this.addEventListener(`keyup`,this.handleKeyup),this.active=!0)}handleKeyup(e){if(!this.holdAffordance)return super.handleKeyup(e);let{code:t,altKey:n}=e;(t===`Space`||n&&t===`ArrowDown`)&&(e.stopPropagation(),this.dispatchEvent(new CustomEvent(`longpress`,{bubbles:!0,composed:!0,detail:{source:`keyboard`}})),this.active=!1)}get buttonContent(){let t=super.buttonContent;return this.holdAffordance&&t.unshift(e`
|
|
3
|
-
<div class="hold-affordance corner-triangle-${this.size}">
|
|
4
|
-
${a(o)}
|
|
5
|
-
</div>
|
|
6
|
-
`),t}updated(e){super.updated(e);let t=this.role===`button`,n=t&&(this.selected||this.toggles)&&!(this.hasAttribute(`aria-haspopup`)&&this.hasAttribute(`aria-expanded`));(e.has(`selected`)||e.has(`role`))&&(n?this.setAttribute(`aria-pressed`,this.selected?`true`:`false`):(this.removeAttribute(`aria-pressed`),t&&this.toggles&&this.hasAttribute(`aria-expanded`)&&this.setAttribute(`aria-expanded`,this.selected?`true`:`false`))),e.has(`holdAffordance`)&&(this.holdAffordance?this.addEventListener(`pointerdown`,this.handlePointerdownHoldAffordance):(this.removeEventListener(`pointerdown`,this.handlePointerdownHoldAffordance),this.handlePointerupHoldAffordance()))}};r([i({type:Boolean,reflect:!0})],d.prototype,`emphasized`,void 0),r([i({type:Boolean,reflect:!0,attribute:`hold-affordance`})],d.prototype,`holdAffordance`,void 0),r([i({type:Boolean,reflect:!0})],d.prototype,`quiet`,void 0),r([i({reflect:!0})],d.prototype,`treatment`,void 0),r([i({reflect:!0})],d.prototype,`role`,void 0),r([i({type:Boolean,reflect:!0})],d.prototype,`selected`,void 0),r([i({type:Boolean,reflect:!0})],d.prototype,`toggles`,void 0),r([i({reflect:!0,attribute:`static-color`})],d.prototype,`staticColor`,void 0),r([i()],d.prototype,`variant`,null),r([i({type:String})],d.prototype,`value`,null),customElements.get(`luzmo-action-button`)||customElements.define(`luzmo-action-button`,d);export{d as t};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import"../tokens.js";import{c as e,y as t}from"./lit-BN_lRQbJ.js";import{c as n,l as r,t as i,u as a,y as o}from"./lucero-runtime-DGJ9-isg.js";import{n as s}from"./language-resolution-BWHk9A73.js";var c=`:host{font-family:var(--luzmo-badge-font-family,var(--luzmo-font-family));background-color:var(--highcontrast-badge-background-color,var(--luzmo-badge-background-color,var(--badge-background-color)));color:var(--highcontrast-badge-content-color,var(--luzmo-badge-content-color,var(--badge-content-color)));border-radius:var(--luzmo-badge-border-radius,var(--badge-border-radius));min-block-size:var(--luzmo-badge-height,var(--badge-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:var(--luzmo-badge-max-inline-size,none);-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-badge-animation-duration,var(--badge-animation-duration)) ease-in-out, color var(--luzmo-badge-animation-duration,var(--badge-animation-duration)) ease-in-out, background-color var(--luzmo-badge-animation-duration,var(--badge-animation-duration)) ease-in-out;padding-inline:calc(var(--luzmo-badge-spacing-inline,var(--badge-spacing-inline)) - var(--luzmo-badge-border-width,var(--badge-border-width)));padding-block:var(--luzmo-spacing-1);justify-content:center;align-items:center;gap:var(--luzmo-badge-icon-spacing-inline-end,var(--badge-icon-spacing-inline-end));outline:none;display:inline-flex;position:relative;border-color:var(--highcontrast-badge-border-color,var(--luzmo-badge-border-color,var(--badge-border-color)))!important;border-width:var(--luzmo-badge-border-width,var(--badge-border-width))!important;border-style:solid!important}::slotted([slot=icon]){--icon-size:var(--luzmo-badge-icon-size,var(--badge-icon-size,calc(var(--luzmo-badge-height,var(--badge-height)) - var(--luzmo-badge-border-width,var(--badge-border-width)) * 2 - var(--luzmo-badge-icon-padding,4px) * 2)));flex-shrink:0;align-self:center}.label{box-sizing:border-box;line-height:1.3;font-weight:var(--luzmo-badge-font-weight,var(--badge-font-weight));font-size:var(--luzmo-badge-font-size,var(--badge-font-size));cursor:default;display:block}:host([data-luzmo-language-script=Latn]) .label{text-box:trim-both cap alphabetic;margin-block:-.35em;padding-block:.35em}@supports (text-box-trim:trim-both){:host([data-luzmo-language-script=Latn]) .label{padding-block:calc(.35em + .5lh - .5cap)}}.label[hidden]{display:none!important}:host([icon-only]){padding-block:0;padding-inline:calc(var(--luzmo-badge-spacing-inline,var(--badge-spacing-inline)) * 1.25 - var(--luzmo-badge-border-width,var(--badge-border-width)));gap:0}:host([icon-only]) ::slotted([slot=icon]){align-self:center}:host([fixed]){border-radius:var(--luzmo-border-radius)}:host([fixed=block-start]){border-start-start-radius:0;border-start-end-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}:host([fixed=inline-start]){border-start-start-radius:0;border-end-start-radius:0}:host([fixed=inline-end]){border-start-end-radius:0;border-end-end-radius:0}@media (forced-colors:active){:host{--highcontrast-badge-border-color:ButtonText;--highcontrast-badge-background-color:ButtonFace;--highcontrast-badge-content-color:ButtonText;forced-color-adjust:none}:host([treatment=fill]){--highcontrast-badge-background-color:Highlight;--highcontrast-badge-content-color:HighlightText;--highcontrast-badge-border-color:Highlight}}:host{--badge-border-color:var(--luzmo-border-color-full);--badge-background-color:transparent;--badge-content-color:var(--luzmo-font-color);--badge-border-width:var(--luzmo-border-width);--badge-border-radius:calc(var(--badge-height) / 2);--badge-animation-duration:var(--luzmo-animation-duration);--badge-font-weight:var(--luzmo-font-weight);--badge-label-line-height:var(--luzmo-line-height);--badge-icon-spacing-inline-end:var(--luzmo-spacing-2);--badge-subtle-background-opacity:10%;--badge-subtle-content-mix:57%}:host([size=xs]){--badge-height:var(--luzmo-component-height-xxs);--badge-font-size:var(--luzmo-font-size-xs);--badge-icon-size:var(--luzmo-icon-size-xxs);--badge-spacing-inline:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--badge-icon-spacing-inline-end:var(--luzmo-spacing-2)}:host([size=s]){--badge-height:var(--luzmo-component-height-xs);--badge-font-size:var(--luzmo-font-size-s);--badge-icon-size:var(--luzmo-icon-size-s);--badge-spacing-inline:var(--luzmo-spacing-3);--badge-icon-spacing-inline-end:var(--luzmo-spacing-2)}:host{--badge-height:var(--luzmo-component-height-s);--badge-font-size:var(--luzmo-font-size);--badge-icon-size:var(--luzmo-icon-size-m);--badge-spacing-inline:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=l]){--badge-height:var(--luzmo-component-height);--badge-font-size:var(--luzmo-font-size);--badge-icon-size:var(--luzmo-icon-size-l);--badge-spacing-inline:var(--luzmo-spacing-4);--badge-icon-spacing-inline-end:var(--luzmo-spacing-3)}:host([size=xl]){--badge-height:var(--luzmo-component-height-l);--badge-font-size:var(--luzmo-font-size-l);--badge-icon-size:var(--luzmo-icon-size-xl);--badge-spacing-inline:var(--luzmo-spacing-5);--badge-icon-spacing-inline-end:var(--luzmo-spacing-3)}:host([size=xs]:not([icon-only])){--badge-icon-size:var(--luzmo-icon-size-xxs)}:host([size=s]:not([icon-only])){--badge-icon-size:var(--luzmo-icon-size-xs)}:host(:not([icon-only])){--badge-icon-size:var(--luzmo-icon-size-s)}:host([size=l]:not([icon-only])){--badge-icon-size:var(--luzmo-icon-size-m)}:host([size=xl]:not([icon-only])){--badge-icon-size:var(--luzmo-icon-size-l)}:host([variant=neutral]){--badge-border-color:var(--luzmo-border-color-full);--badge-content-color:var(--luzmo-font-color);--badge-fill-background-color:var(--luzmo-selected-color-hard);--badge-fill-content-color:var(--luzmo-background-color);--badge-subtle-content-color:var(--luzmo-neutral-on-subtle-color)}:host([variant=accent]){--badge-border-color:var(--luzmo-primary);--badge-content-color:var(--luzmo-primary);--badge-fill-background-color:var(--luzmo-primary);--badge-fill-content-color:var(--luzmo-primary-inverse-color);--badge-subtle-content-color:var(--luzmo-accent-on-subtle-color)}:host([variant=informative]){--badge-border-color:var(--luzmo-informative-color);--badge-content-color:var(--luzmo-informative-color);--badge-fill-background-color:var(--luzmo-informative-color);--badge-fill-content-color:var(--luzmo-informative-inverse-color);--badge-subtle-content-color:var(--luzmo-informative-on-subtle-color)}:host([variant=positive]){--badge-border-color:var(--luzmo-positive-color);--badge-content-color:var(--luzmo-positive-color);--badge-fill-background-color:var(--luzmo-positive-color);--badge-fill-content-color:var(--luzmo-positive-inverse-color);--badge-subtle-content-color:var(--luzmo-positive-on-subtle-color)}:host([variant=negative]){--badge-border-color:var(--luzmo-negative-color);--badge-content-color:var(--luzmo-negative-color);--badge-fill-background-color:var(--luzmo-negative-color);--badge-fill-content-color:var(--luzmo-negative-inverse-color);--badge-subtle-content-color:var(--luzmo-negative-on-subtle-color)}:host([variant=notice]){--badge-border-color:var(--luzmo-notice-color);--badge-content-color:var(--luzmo-notice-color);--badge-fill-background-color:var(--luzmo-notice-color);--badge-fill-content-color:var(--luzmo-notice-inverse-color);--badge-subtle-content-color:var(--luzmo-notice-on-subtle-color)}:host([variant=seafoam]){--badge-border-color:var(--luzmo-seafoam-color);--badge-content-color:var(--luzmo-seafoam-color);--badge-fill-background-color:var(--luzmo-seafoam-color);--badge-fill-content-color:white}:host([variant=indigo]){--badge-border-color:var(--luzmo-indigo-color);--badge-content-color:var(--luzmo-indigo-color);--badge-fill-background-color:var(--luzmo-indigo-color);--badge-fill-content-color:white}:host([variant=purple]){--badge-border-color:var(--luzmo-purple-color);--badge-content-color:var(--luzmo-purple-color);--badge-fill-background-color:var(--luzmo-purple-color);--badge-fill-content-color:white}:host([variant=fuchsia]){--badge-border-color:var(--luzmo-fuchsia-color);--badge-content-color:var(--luzmo-fuchsia-color);--badge-fill-background-color:var(--luzmo-fuchsia-color);--badge-fill-content-color:white}:host([variant=magenta]){--badge-border-color:var(--luzmo-magenta-color);--badge-content-color:var(--luzmo-magenta-color);--badge-fill-background-color:var(--luzmo-magenta-color);--badge-fill-content-color:white}:host([variant=yellow]){--badge-border-color:var(--luzmo-yellow-color);--badge-content-color:var(--luzmo-yellow-color);--badge-fill-background-color:var(--luzmo-yellow-color);--badge-fill-content-color:black}:host([variant=gray]){--badge-border-color:var(--luzmo-gray-color);--badge-content-color:var(--luzmo-gray-color);--badge-fill-background-color:var(--luzmo-gray-color);--badge-fill-content-color:white}:host([variant=red]){--badge-border-color:var(--luzmo-red-color);--badge-content-color:var(--luzmo-red-color);--badge-fill-background-color:var(--luzmo-red-color);--badge-fill-content-color:white}:host([variant=orange]){--badge-border-color:var(--luzmo-orange-color);--badge-content-color:var(--luzmo-orange-color);--badge-fill-background-color:var(--luzmo-orange-color);--badge-fill-content-color:black}:host([variant=chartreuse]){--badge-border-color:var(--luzmo-chartreuse-color);--badge-content-color:var(--luzmo-chartreuse-color);--badge-fill-background-color:var(--luzmo-chartreuse-color);--badge-fill-content-color:white}:host([variant=celery]){--badge-border-color:var(--luzmo-celery-color);--badge-content-color:var(--luzmo-celery-color);--badge-fill-background-color:var(--luzmo-celery-color);--badge-fill-content-color:black}:host([variant=green]){--badge-border-color:var(--luzmo-green-color);--badge-content-color:var(--luzmo-green-color);--badge-fill-background-color:var(--luzmo-green-color);--badge-fill-content-color:white}:host([variant=cyan]){--badge-border-color:var(--luzmo-cyan-color);--badge-content-color:var(--luzmo-cyan-color);--badge-fill-background-color:var(--luzmo-cyan-color);--badge-fill-content-color:white}:host([variant=blue]){--badge-border-color:var(--luzmo-blue-color);--badge-content-color:var(--luzmo-blue-color);--badge-fill-background-color:var(--luzmo-blue-color);--badge-fill-content-color:white}:host([treatment=outline]){--badge-background-color:transparent}:host([treatment=subtle]){--badge-subtle-color:var(--badge-fill-background-color,var(--luzmo-selected-color-hard));--badge-background-color:color-mix(in srgb, var(--badge-subtle-color) var(--badge-subtle-background-opacity), var(--luzmo-background-color));--badge-content-color:var(--badge-subtle-content-color,color-mix(in oklch, var(--badge-subtle-color), var(--luzmo-font-color) var(--badge-subtle-content-mix)))}:host([treatment=fill]){--badge-background-color:var(--badge-fill-background-color,var(--luzmo-selected-color-hard));--badge-content-color:var(--badge-fill-content-color,white);--badge-border-color:transparent}`,l=[`accent`,`neutral`,`informative`,`positive`,`negative`,`notice`,`seafoam`,`indigo`,`purple`,`fuchsia`,`magenta`,`yellow`,`gray`,`red`,`orange`,`chartreuse`,`celery`,`green`,`cyan`,`blue`],u=class extends n(i(a),{validSizes:[`xs`,`s`,`m`,`l`,`xl`],noDefaultSize:!0}){constructor(...e){super(...e),this._languageScript=new s(this),this._variant=`neutral`,this.treatment=`outline`}static get styles(){return[t(c)]}get variant(){return this._variant}set variant(e){e!==this._variant&&(l.includes(e)?(this._variant=e,this.setAttribute(`variant`,e)):(this._variant=`neutral`,this.setAttribute(`variant`,`neutral`)))}handleIconSlotChange(e){e.target.assignedElements().forEach(e=>{e.tagName.toLowerCase()===`luzmo-icon`&&e.setAttribute(`block`,``)})}get hasLabel(){return this.slotHasContent}render(){return e`
|
|
3
|
-
<slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
|
|
4
|
-
<span class="label" ?hidden=${!this.hasLabel}>
|
|
5
|
-
<slot @slotchange=${this.manageTextObservedSlot}></slot>
|
|
6
|
-
</span>
|
|
7
|
-
`}updated(e){super.updated(e),this.toggleAttribute(`icon-only`,!this.slotHasContent)}firstUpdated(e){super.firstUpdated(e),this.hasAttribute(`role`)||this.setAttribute(`role`,`status`),this.hasAttribute(`variant`)||this.setAttribute(`variant`,this.variant),this.hasAttribute(`treatment`)||this.setAttribute(`treatment`,this.treatment)}};r([o({reflect:!0})],u.prototype,`variant`,null),r([o({reflect:!0})],u.prototype,`treatment`,void 0),r([o({reflect:!0})],u.prototype,`fixed`,void 0),customElements.get(`luzmo-badge`)||customElements.define(`luzmo-badge`,u);export{u as t};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import{c as e,y as t}from"./lit-BN_lRQbJ.js";import{c as n,l as r,y as i}from"./lucero-runtime-DGJ9-isg.js";import{t as a}from"./button-base-C7jeeyLp.js";import{t as o}from"./pending-state-DxeRqe6Q.js";var s=`:host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family,var(--luzmo-font-family));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height,1.3);text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out, border-color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out, color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out, box-shadow var(--luzmo-button-animation-duration,var(--luzmo-animation-duration)) ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible}:host(:focus){outline:none}:host .is-disabled,:host([disabled]){cursor:default}:host:after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap,var(--luzmo-focus-indicator-gap,2px)));transition:opacity var(--luzmo-button-animation-duration,var(--luzmo-button-animation-duration,var(--luzmo-animation-duration))) ease-out, margin var(--luzmo-button-animation-duration,var(--luzmo-button-animation-duration,var(--luzmo-animation-duration))) ease-out;display:block;inset-block:0;inset-inline:0}:host(:focus-visible):after{margin:calc(var(--luzmo-focus-indicator-gap,2px) * -2)}#label{place-self:center}#label[hidden]{display:none}:host{--luzmo-progress-circle-position:absolute;border-radius:var(--luzmo-button-border-radius,var(--button-border-radius));font-size:var(--luzmo-button-font-size,var(--button-font-size));font-weight:var(--luzmo-button-font-weight,var(--luzmo-font-weight));gap:var(--luzmo-button-padding-label-to-icon,var(--button-padding-label-to-icon));max-inline-size:none;max-inline-size:var(--luzmo-button-max-inline-size,none);min-inline-size:var(--luzmo-button-min-width,var(--button-min-width));min-block-size:var(--luzmo-button-height,var(--button-height));padding-block:0;padding-inline:var(--luzmo-button-edge-to-text,var(--button-edge-to-text));color:inherit;margin-block:0;margin-block:var(--luzmo-button-margin-block,0);margin-inline-start:var(--luzmo-button-margin-left,0);margin-inline-end:var(--luzmo-button-margin-right,0);position:relative;border-width:var(--luzmo-button-border-width,var(--button-border-width))!important;border-style:var(--luzmo-button-border-style,solid)!important}:host(:is(:active,[active])){box-shadow:none}::slotted([slot=icon]){--_icon-size-difference:max(0px, var(--button-intended-icon-size) - var(--icon-size,var(--button-intended-icon-size)));color:inherit;flex-shrink:0;align-self:flex-start;margin-block-start:var(--luzmo-button-icon-margin-block-start,max(0px, var(--luzmo-button-top-to-icon,var(--button-top-to-icon)) - var(--luzmo-button-border-width,var(--button-border-width)) + var(--_icon-size-difference,0px) / 2));margin-inline-start:calc(var(--luzmo-button-edge-to-visual,var(--button-edge-to-visual)) - var(--luzmo-button-edge-to-text,var(--button-edge-to-text)))}:host([icon-only]){min-inline-size:var(--luzmo-button-icon-only-min-inline-size,var(--button-height));padding:calc(var(--luzmo-button-edge-to-visual-only,var(--button-edge-to-visual-only)) - var(--luzmo-button-border-width,var(--button-border-width)));border-radius:var(--luzmo-button-border-radius,var(--button-border-radius))}:host([icon-only]) ::slotted([slot=icon]){align-self:center;margin-block-start:0;margin-inline-start:0}#label{line-height:var(--luzmo-button-line-height,var(--button-line-height));text-align:center;text-align:var(--luzmo-button-text-align,center);align-self:start;padding-block-start:calc(var(--luzmo-button-top-to-text,var(--button-top-to-text)) - var(--luzmo-button-border-width,var(--button-border-width)));padding-block-end:calc(var(--luzmo-button-bottom-to-text,var(--button-bottom-to-text)) - var(--luzmo-button-border-width,var(--button-border-width)))}:host([data-luzmo-language-script=Latn]) #label{text-box:trim-both cap alphabetic;align-self:center;margin-block:-.35em;padding-block:.35em}[name=icon]+#label{text-align:start;text-align:var(--luzmo-button-text-align-with-icon,start)}:host([focused]):after,:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness,var(--button-focus-ring-thickness)) var(--luzmo-button-focus-ring-color,var(--button-focus-indicator-color))}:host{transition:border-color var(--luzmo-button-animation-duration,var(--button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-button-focus-ring-gap,var(--button-focus-ring-gap)) + var(--luzmo-button-border-width,var(--button-border-width))) * -1);border-radius:var(--luzmo-button-focus-ring-border-radius,calc(var(--luzmo-button-border-radius,var(--button-border-radius)) + var(--luzmo-focus-indicator-gap,2px)));transition:box-shadow var(--luzmo-button-animation-duration,var(--button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;inset:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness,var(--button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color,var(--luzmo-button-focus-ring-color,var(--luzmo-button-focus-ring-color,var(--button-focus-indicator-color))))}:host{background-color:var(--highcontrast-button-background-color-default,var(--luzmo-button-background-color-default,var(--button-background-color-default)));color:var(--highcontrast-button-content-color-default,var(--luzmo-button-content-color-default,var(--button-content-color-default)));transition:border .13s linear,color .13s linear,background-color .13s linear;transition:border var(--luzmo-button-animation-duration,var(--luzmo-animation-duration,.15s)) linear, color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration,.15s)) linear, background-color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration,.15s)) linear;border-color:var(--highcontrast-button-border-color-default,var(--luzmo-button-border-color-default,var(--button-border-color-default)))!important}@media (hover:hover){:host(:hover){box-shadow:none;background-color:var(--highcontrast-button-background-color-hover,var(--luzmo-button-background-color-hover,var(--button-background-color-hover)));color:var(--highcontrast-button-content-color-hover,var(--luzmo-button-content-color-hover,var(--button-content-color-hover)));border-color:var(--highcontrast-button-border-color-hover,var(--luzmo-button-border-color-hover,var(--button-border-color-hover)))!important}}:host(:focus-visible){background-color:var(--highcontrast-button-background-color-focus,var(--luzmo-button-background-color-focus,var(--button-background-color-focus)));color:var(--highcontrast-button-content-color-focus,var(--luzmo-button-content-color-focus,var(--button-content-color-focus)));border-color:var(--highcontrast-button-border-color-focus,var(--luzmo-button-border-color-focus,var(--button-border-color-focus)))!important}:host(:is(:active,[active])){background-color:var(--highcontrast-button-background-color-down,var(--luzmo-button-background-color-down,var(--button-background-color-down)));color:var(--highcontrast-button-content-color-down,var(--luzmo-button-content-color-down,var(--button-content-color-down)));border-color:var(--highcontrast-button-border-color-down,var(--luzmo-button-border-color-down,var(--button-border-color-down)))!important}:host .is-disabled,:host([pending]),:host([disabled]),:host([pending]){background-color:var(--highcontrast-button-background-color-disabled,var(--luzmo-button-background-color-disabled,var(--button-background-color-disabled)));color:var(--highcontrast-button-content-color-disabled,var(--luzmo-button-content-color-disabled,var(--button-content-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled,var(--luzmo-button-border-color-disabled,var(--button-border-color-disabled)))!important}#label,::slotted([slot=icon]){visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration,var(--luzmo-animation-duration,.15s)) ease-in-out}.luzmo-progress-circle{visibility:hidden;opacity:0;transition:opacity .13s ease-in-out,visibility 0s linear .13s;transition:opacity var(--luzmo-button-animation-duration,var(--luzmo-animation-duration,.15s)) ease-in-out, visibility 0s linear var(--luzmo-button-animation-duration,var(--luzmo-animation-duration,.15s))}:host([pending]),:host([pending]){cursor:default}:host([pending]) .luzmo-progress-circle,:host([pending]) .luzmo-progress-circle{visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration,var(--luzmo-animation-duration,.15s)) ease-in-out}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([static-color=white]){--button-focus-indicator-color:var(--luzmo-static-black-focus-indicator-color,#000)}:host([static-color=white][selected]){--button-content-color-default:var(--luzmo-button-static-content-color,#ffffffe6);--button-content-color-hover:var(--luzmo-button-static-content-color,#fff);--button-content-color-down:var(--luzmo-button-static-content-color,#fff);--button-content-color-focus:var(--luzmo-button-static-content-color,#fff)}:host([static-color=black]){--button-focus-indicator-color:var(--luzmo-static-black-focus-indicator-color,#000)}@media (forced-colors:active){:host{--highcontrast-button-content-color-default:ButtonText;--highcontrast-button-content-color-hover:ButtonText;--highcontrast-button-content-color-focus:ButtonText;--highcontrast-button-content-color-down:ButtonText;--highcontrast-button-border-color-default:ButtonBorder;--highcontrast-button-border-color-hover:ButtonBorder;--highcontrast-button-border-color-focus:ButtonBorder;--highcontrast-button-border-color-down:ButtonBorder;--highcontrast-button-background-color-default:ButtonFace;--highcontrast-button-background-color-hover:ButtonFace;--highcontrast-button-background-color-down:ButtonFace;--highcontrast-button-background-color-focus:ButtonFace;--highcontrast-button-background-color-disabled:ButtonFace;--highcontrast-button-content-color-disabled:GrayText;--highcontrast-button-border-color-disabled:GrayText;--luzmo-progress-circle-track-border-color:ButtonText;--luzmo-progress-circle-track-border-color-over-background:ButtonText;--luzmo-progress-circle-thickness:3px;--luzmo-button-animation-duration:0s}#label{forced-color-adjust:none}:host(:focus-visible):after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness,var(--button-focus-ring-thickness)) ButtonText}}:host{--button-animation-duration:var(--luzmo-animation-duration);--button-border-radius:var(--luzmo-border-radius);--button-border-width:var(--luzmo-border-width);--button-line-height:1.2;--button-focus-ring-gap:var(--luzmo-indicator-gap);--button-focus-ring-thickness:var(--luzmo-indicator-width);--button-focus-indicator-color:var(--luzmo-primary);--button-intended-icon-size:calc(var(--luzmo-button-icon-size,var(--icon-size)) + 2px);--button-top-to-text:calc(( var(--luzmo-button-height,var(--button-height)) - var(--luzmo-button-font-size,var(--button-font-size)) * var(--luzmo-button-line-height,var(--button-line-height)) ) / 2);--button-bottom-to-text:var(--button-top-to-text);--button-top-to-icon:calc(( var(--luzmo-button-height,var(--button-height)) - var(--button-intended-icon-size) ) / 2);--button-edge-to-visual-only:var(--button-top-to-icon);--button-background-color-default:var(--luzmo-background-color);--button-background-color-hover:var(--luzmo-background-color-hover);--button-background-color-down:var(--luzmo-background-color-active);--button-background-color-focus:var(--luzmo-primary);--button-border-color-default:var(--luzmlo-border-color-full);--button-border-color-hover:var(--luzmo-border-color-full-hover);--button-border-color-down:var(--luzmo-border-color-full-down);--button-border-color-focus:var(--luzmo-border-color-full-focus);--button-content-color-default:var(--luzmo-font-color);--button-content-color-hover:var(--luzmo-font-color-hover);--button-content-color-down:var(--luzmo-font-color-down);--button-content-color-focus:var(--luzmo-font-color-focus);--button-background-color-disabled:transparent;--button-border-color-disabled:var(--luzmo-disabled-color);--button-content-color-disabled:var(--luzmo-disabled-color)}:host([variant=negative]){--button-background-color-default:var(--luzmo-negative-color);--button-background-color-hover:var(--luzmo-negative-color-hover);--button-background-color-down:var(--luzmo-negative-color-down);--button-background-color-focus:var(--luzmo-negative-color-focus);--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-content-color-default:var(--luzmo-negative-inverse-color,white);--button-content-color-hover:var(--luzmo-negative-inverse-color,white);--button-content-color-down:var(--luzmo-negative-inverse-color,white);--button-content-color-focus:var(--luzmo-negative-inverse-color,white);--button-background-color-disabled:var(--luzmo-background-color-disabled);--button-border-color-disabled:transparent;--button-content-color-disabled:var(--luzmo-disabled-color)}:host([variant=negative][treatment=outline]){--button-background-color-default:transparent;--button-background-color-hover:rgba(var(--luzmo-negative-color-rgb), .1);--button-background-color-down:rgba(var(--luzmo-negative-color-rgb), .16);--button-background-color-focus:rgba(var(--luzmo-negative-color-rgb), .1);--button-border-color-default:var(--luzmo-negative-color);--button-border-color-hover:var(--luzmo-negative-color-hover);--button-border-color-down:var(--luzmo-negative-color-down);--button-border-color-focus:var(--luzmo-negative-color-focus);--button-content-color-default:var(--luzmo-negative-color);--button-content-color-hover:var(--luzmo-negative-color-down);--button-content-color-down:var(--luzmo-negative-color-down);--button-content-color-focus:var(--luzmo-negative-color-focus);--button-background-color-disabled:transparent;--button-border-color-disabled:var(--luzmo-border-color-disabled);--button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([variant=positive]){--button-background-color-default:var(--luzmo-positive-color);--button-background-color-hover:var(--luzmo-positive-color-hover);--button-background-color-down:var(--luzmo-positive-color-down);--button-background-color-focus:var(--luzmo-positive-color-focus);--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-content-color-default:var(--luzmo-positive-inverse-color,white);--button-content-color-hover:var(--luzmo-positive-inverse-color,white);--button-content-color-down:var(--luzmo-positive-inverse-color,white);--button-content-color-focus:var(--luzmo-positive-inverse-color,white);--button-background-color-disabled:var(--luzmo-background-color-disabled);--button-border-color-disabled:transparent;--button-content-color-disabled:var(--luzmo-disabled-color)}:host([variant=positive][treatment=outline]){--button-background-color-default:transparent;--button-background-color-hover:rgba(var(--luzmo-positive-color-rgb), .1);--button-background-color-down:rgba(var(--luzmo-positive-color-rgb), .16);--button-background-color-focus:rgba(var(--luzmo-positive-color-rgb), .1);--button-border-color-default:var(--luzmo-positive-color);--button-border-color-hover:var(--luzmo-positive-color-hover);--button-border-color-down:var(--luzmo-positive-color-down);--button-border-color-focus:var(--luzmo-positive-color-focus);--button-content-color-default:var(--luzmo-positive-color);--button-content-color-hover:var(--luzmo-positive-color-down);--button-content-color-down:var(--luzmo-positive-color-down);--button-content-color-focus:var(--luzmo-positive-color-focus);--button-background-color-disabled:transparent;--button-border-color-disabled:var(--luzmo-border-color-disabled);--button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([variant=primary]){--button-background-color-default:var(--luzmo-primary);--button-background-color-hover:var(--luzmo-primary-hover);--button-background-color-down:var(--luzmo-primary-down);--button-background-color-focus:var(--luzmo-primary-focus);--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-content-color-default:var(--luzmo-primary-inverse-color);--button-content-color-hover:var(--luzmo-primary-inverse-color);--button-content-color-down:var(--luzmo-primary-inverse-color);--button-content-color-focus:var(--luzmo-primary-inverse-color);--button-background-color-disabled:var(--luzmo-background-color-disabled);--button-border-color-disabled:transparent;--button-content-color-disabled:var(--luzmo-disabled-color)}:host([variant=primary][treatment=outline]){--button-background-color-default:transparent;--button-background-color-hover:var(--luzmo-background-color-hover);--button-background-color-down:var(--luzmo-background-color-down);--button-background-color-focus:var(--luzmo-background-color-focus);--button-border-color-default:var(--luzmo-primary);--button-border-color-hover:var(--luzmo-primary-hover);--button-border-color-down:var(--luzmo-primary-down);--button-border-color-focus:var(--luzmo-primary-focus);--button-content-color-default:var(--luzmo-primary);--button-content-color-hover:var(--luzmo-primary-down);--button-content-color-down:var(--luzmo-primary-down);--button-content-color-focus:var(--luzmo-primary-focus);--button-background-color-disabled:transparent;--button-border-color-disabled:var(--luzmo-border-color-disabled);--button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([variant=secondary]){--button-background-color-default:var(--luzmo-secondary);--button-background-color-hover:var(--luzmo-secondary-hover);--button-background-color-down:var(--luzmo-secondary-down);--button-background-color-focus:var(--luzmo-secondary-focus);--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-content-color-default:var(--luzmo-secondary-inverse-color);--button-content-color-hover:var(--luzmo-secondary-inverse-color);--button-content-color-down:var(--luzmo-secondary-inverse-color);--button-content-color-focus:var(--luzmo-secondary-inverse-color);--button-background-color-disabled:var(--luzmo-background-color-disabled);--button-border-color-disabled:transparent;--button-content-color-disabled:var(--luzmo-disabled-color)}:host([variant=secondary][treatment=outline]){--button-background-color-default:transparent;--button-background-color-hover:var(--luzmo-background-color-hover);--button-background-color-down:var(--luzmo-background-color-down);--button-background-color-focus:var(--luzmo-background-color-focus);--button-border-color-default:var(--luzmo-secondary);--button-border-color-hover:var(--luzmo-secondary-hover);--button-border-color-down:var(--luzmo-secondary-down);--button-border-color-focus:var(--luzmo-secondary-focus);--button-content-color-default:var(--luzmo-secondary);--button-content-color-hover:var(--luzmo-secondary-down);--button-content-color-down:var(--luzmo-secondary-down);--button-content-color-focus:var(--luzmo-secondary-focus);--button-background-color-disabled:transparent;--button-border-color-disabled:var(--luzmo-border-color-disabled);--button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([variant=neutral]){--button-background-color-default:var(--luzmo-background-color-highlight);--button-background-color-hover:var(--luzmo-background-color-highlight-hover);--button-background-color-down:var(--luzmo-background-color-highlight-down);--button-background-color-focus:var(--luzmo-background-color-highlight-focus);--button-border-color-default:var(--luzmo-border-color);--button-border-color-hover:var(--luzmo-border-color);--button-border-color-down:var(--luzmo-border-color-down);--button-border-color-focus:var(--luzmo-border-color-focus);--button-content-color-default:var(--luzmo-font-color);--button-content-color-hover:var(--luzmo-font-color-hover);--button-content-color-down:var(--luzmo-font-color-down);--button-content-color-focus:var(--luzmo-font-color-focus);--button-background-color-disabled:var(--luzmo-background-color-disabled);--button-border-color-disabled:var(--luzmo-border-color-disabled);--button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([variant=neutral][treatment=outline]){--button-background-color-default:transparent;--button-background-color-hover:rgba(var(--luzmo-border-color-rgb), .1);--button-background-color-down:rgba(var(--luzmo-border-color-rgb), .16);--button-background-color-focus:rgba(var(--luzmo-border-color-rgb), .1);--button-border-color-default:var(--luzmo-border-color);--button-border-color-hover:var(--luzmo-border-color-hover);--button-border-color-down:var(--luzmo-border-color-down);--button-border-color-focus:var(--luzmo-border-color-focus);--button-content-color-default:var(--luzmo-font-color);--button-content-color-hover:var(--luzmo-font-color-hover);--button-content-color-down:var(--luzmo-font-color-down);--button-content-color-focus:var(--luzmo-font-color-focus);--button-background-color-disabled:transparent;--button-border-color-disabled:var(--luzmo-border-color-disabled);--button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([quiet]){--button-background-color-default:transparent;--button-background-color-hover:var(--luzmo-background-color-hover);--button-background-color-down:var(--luzmo-background-color-down);--button-background-color-focus:var(--luzmo-background-color-focus);--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-background-color-disabled:transparent;--button-border-color-disabled:transparent}:host([variant=primary][quiet]),:host([variant=secondary][quiet]),:host([variant=negative][quiet]),:host([variant=positive][quiet]){--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-border-color-disabled:transparent;--button-content-color-default:var(--luzmo-font-color);--button-content-color-hover:var(--luzmo-font-color-hover);--button-content-color-down:var(--luzmo-font-color-down);--button-content-color-focus:var(--luzmo-font-color-focus);--button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([variant=neutral][quiet]){--button-background-color-default:transparent;--button-background-color-hover:var(--luzmo-background-color-hover);--button-background-color-down:var(--luzmo-background-color-down);--button-background-color-focus:var(--luzmo-background-color-focus);--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-border-color-disabled:transparent;--button-content-color-default:var(--luzmo-font-color);--button-content-color-hover:var(--luzmo-font-color-hover);--button-content-color-down:var(--luzmo-font-color-down);--button-content-color-focus:var(--luzmo-font-color-focus);--button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([selected]){--button-background-color-default:var(--luzmo-selected-color);--button-background-color-hover:var(--luzmo-selected-color-hover);--button-background-color-down:var(--luzmo-selected-color-down);--button-background-color-focus:var(--luzmo-selected-color-focus);--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-content-color-default:white;--button-content-color-hover:white;--button-content-color-down:white;--button-content-color-focus:white;--button-background-color-disabled:var(--luzmo-background-color-disabled);--button-border-color-disabled:transparent}:host([selected][emphasized]){--button-background-color-default:transparent;--button-background-color-hover:var(--luzmo-background-color-hover);--button-background-color-down:var(--luzmo-background-color-down);--button-background-color-focus:var(--luzmo-background-color-focus)}:host([static-color=black][quiet]),:host([static-color=white][quiet]){--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-border-color-disabled:transparent}:host([static-color=white]){--button-background-color-default:rgba(255, 255, 255 .9);--button-background-color-hover:#fff;--button-background-color-down:#fff;--button-background-color-focus:#fff;--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-content-color-default:#000;--button-content-color-hover:#000;--button-content-color-down:#000;--button-content-color-focus:#000;--button-focus-indicator-color:#fff;--button-background-color-disabled:#ffffff1a;--button-border-color-disabled:transparent;--button-content-color-disabled:#ffffff8c}:host([static-color=white][treatment=outline]){--button-background-color-default:transparent;--button-background-color-hover:#ffffff40;--button-background-color-down:#fff6;--button-background-color-focus:#ffffff40;--button-border-color-default:#ffffffe6;--button-border-color-hover:#fff;--button-border-color-down:#fff;--button-border-color-focus:#fff;--button-content-color-default:#fff;--button-content-color-hover:#fff;--button-content-color-down:#fff;--button-content-color-focus:#fff;--button-focus-indicator-color:#fff;--button-background-color-disabled:transparent;--button-border-color-disabled:#ffffff40;--button-content-color-disabled:#ffffff8c}:host([static-color=white][selected]){--button-background-color-default:#ffffffe6;--button-background-color-hover:#fff;--button-background-color-down:#fff;--button-background-color-focus:#fff;--button-static-white-content-color-default:#000;--button-static-white-content-color-hover:#000;--button-static-white-content-color-down:#000;--button-static-white-content-color-focus:#000;--button-background-color-disabled:#ffffff1a;--button-border-color-disabled:transparent}:host([static-color=white][variant=secondary]){--button-background-color-default:#ffffff1a;--button-background-color-hover:#ffffff40;--button-background-color-down:#fff6;--button-background-color-focus:#ffffff40;--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-content-color-default:#fff;--button-content-color-hover:#fff;--button-content-color-down:#fff;--button-content-color-focus:#fff;--button-focus-indicator-color:#fff;--button-background-color-disabled:#ffffff1a;--button-border-color-disabled:transparent;--button-content-color-disabled:#ffffff8c}:host([static-color=white][variant=secondary][treatment=outline]){--button-background-color-default:transparent;--button-background-color-hover:#ffffff40;--button-background-color-down:#fff6;--button-background-color-focus:#ffffff40;--button-border-color-default:#ffffff40;--button-border-color-hover:#fff6;--button-border-color-down:#ffffff8c;--button-border-color-focus:#fff6;--button-content-color-default:#fff;--button-content-color-hover:#fff;--button-content-color-down:#fff;--button-content-color-focus:#fff;--button-focus-indicator-color:#fff;--button-background-color-disabled:transparent;--button-border-color-disabled:#ffffff40;--button-content-color-disabled:#ffffff8c}:host([static-color=black]){--button-background-color-default:#000000e6;--button-background-color-hover:#000;--button-background-color-down:#000;--button-background-color-focus:#000;--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-content-color-default:#fff;--button-content-color-hover:#fff;--button-content-color-down:#fff;--button-content-color-focus:#fff;--button-focus-indicator-color:#000;--button-background-color-disabled:#0000001a;--button-border-color-disabled:transparent;--button-content-color-disabled:#0000008c}:host([static-color=black][treatment=outline]){--button-background-color-default:transparent;--button-background-color-hover:#00000040;--button-background-color-down:#0006;--button-background-color-focus:#00000040;--button-border-color-default:#0006;--button-border-color-hover:#0000008c;--button-border-color-down:#000000b3;--button-border-color-focus:#0000008c;--button-content-color-default:#000;--button-content-color-hover:#000;--button-content-color-down:#000;--button-content-color-focus:#000;--button-focus-indicator-color:#000;--button-background-color-disabled:transparent;--button-border-color-disabled:#00000040;--button-content-color-disabled:#0000008c}:host([static-color=black][variant=secondary]){--button-background-color-default:#0000001a;--button-background-color-hover:#00000040;--button-background-color-down:#0006;--button-background-color-focus:#00000040;--button-border-color-default:transparent;--button-border-color-hover:transparent;--button-border-color-down:transparent;--button-border-color-focus:transparent;--button-content-color-default:#000;--button-content-color-hover:#000;--button-content-color-down:#000;--button-content-color-focus:#000;--button-focus-indicator-color:#000;--button-background-color-disabled:#0000001a;--button-border-color-disabled:transparent;--button-content-color-disabled:#0000008c}:host([static-color=black][variant=secondary][treatment=outline]){--button-background-color-default:transparent;--button-background-color-hover:#00000040;--button-background-color-down:#0006;--button-background-color-focus:#00000040;--button-border-color-default:#00000040;--button-border-color-hover:#0006;--button-border-color-down:#0000008c;--button-border-color-focus:#0006;--button-content-color-default:#000;--button-content-color-hover:#000;--button-content-color-down:#000;--button-content-color-focus:#000;--button-focus-indicator-color:#000;--button-background-color-disabled:transparent;--button-border-color-disabled:#00000040;--button-content-color-disabled:#0000008c}:host([size=xs]){--button-min-width:44px;--button-border-radius:var(--luzmo-border-radius-s);--button-height:var(--luzmo-component-height-xs);--button-font-size:11px;--button-edge-to-visual:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--button-edge-to-text:var(--luzmo-spacing-3);--button-padding-label-to-icon:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=s]){--button-min-width:64px;--button-border-radius:var(--luzmo-border-radius-s);--button-height:var(--luzmo-component-height-s);--button-font-size:var(--luzmo-font-size-s);--button-edge-to-visual:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--button-edge-to-text:var(--luzmo-spacing-4);--button-padding-label-to-icon:var(--luzmo-spacing-3)}:host{--button-min-width:72px;--button-border-radius:var(--luzmo-border-radius);--button-height:var(--luzmo-component-height);--button-font-size:var(--luzmo-font-size-m);--button-edge-to-visual:var(--luzmo-spacing-4);--button-edge-to-text:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--button-padding-label-to-icon:var(--luzmo-spacing-3)}:host([size=l]){--button-min-width:90px;--button-border-radius:var(--luzmo-border-radius);--button-height:var(--luzmo-component-height-l);--button-font-size:var(--luzmo-font-size-l);--button-edge-to-visual:var(--luzmo-spacing-5);--button-edge-to-text:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--button-padding-label-to-icon:var(--luzmo-spacing-3)}:host([size=xl]){--button-min-width:108px;--button-border-radius:var(--luzmo-border-radius);--button-height:var(--luzmo-component-height-xl);--button-font-size:var(--luzmo-font-size-xl);--button-edge-to-visual:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--button-edge-to-text:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--button-padding-label-to-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}@media (forced-colors:active){:host([treatment][disabled]){border-color:graytext!important}:host([treatment]:not([disabled]):hover){border-color:highlight!important}:host(.remove-focus-ring-safari-hack:focus-visible):after{forced-color-adjust:none;box-shadow:none}}@keyframes show-progress-circle{0%{visibility:hidden}to{visibility:visible}}@keyframes hide-icons-label{0%{visibility:visible}to{visibility:hidden}}@keyframes update-pending-button-styles{to{background-color:var(--highcontrast-button-background-color-disabled,var(--luzmo-button-background-color-disabled,var(--button-background-color-disabled)));color:var(--highcontrast-button-content-color-disabled,var(--luzmo-button-content-color-disabled,var(--button-content-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled,var(--luzmo-button-border-color-disabled,var(--button-border-color-disabled)))!important}}:host([pending]:not([disabled])){cursor:default;pointer-events:none;animation:update-pending-button-styles 0s var(--pending-delay,1s) forwards}::slotted([slot=icon]){visibility:revert-layer;--luzmo-progress-circle-position:relative;--icon-size:inherit}luzmo-progress-circle{visibility:hidden;display:block;position:absolute;left:50%;transform:translate(-50%)}:host([pending]:not([disabled])) luzmo-progress-circle{animation:show-progress-circle 0s var(--pending-delay,1s) forwards}:host([pending]:not([disabled])) slot[name=icon],:host([pending]:not([disabled])) #label{animation:hide-icons-label 0s var(--pending-delay,1s) forwards}:host(.remove-focus-ring-safari-hack:focus-visible):after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap,var(--luzmo-focus-indicator-gap,var(--focus-indicator-gap))));box-shadow:none}:host(.remove-focus-ring-safari-hack:focus-visible){box-shadow:none;outline:none}:host(.remove-focus-ring-safari-hack:focus-visible:not(:hover)){background-color:var(--highcontrast-button-background-color-default,var(--luzmo-button-background-color-default,var(--button-background-color-default)));color:var(--highcontrast-button-content-color-default,var(--luzmo-button-content-color-default,var(--button-content-color-default)));border-color:var(--highcontrast-button-border-color-default,var(--luzmo-button-border-color-default,var(--button-border-color-default)))!important}`,c=[`primary`,`secondary`,`neutral`,`negative`,`positive`,`white`,`black`],l=class extends n(a,{validSizes:[`xs`,`s`,`m`,`l`,`xl`],noDefaultSize:!0}){static get styles(){return[...super.styles,t(s)]}constructor(){super(),this.pendingLabel=`Pending`,this.pending=!1,this._variant=`primary`,this.treatment=`fill`,this._quiet=!1,this.noWrap=!1,this.pendingStateController=new o(this)}click(){this.pending||super.click()}get variant(){return this._variant}set variant(e){if(e!==this.variant){switch(this.requestUpdate(`variant`,this.variant),e){case`white`:this.staticColor=e,this.removeAttribute(`variant`);return;case`black`:this.staticColor=e,this.removeAttribute(`variant`);return;case null:return;default:this._variant=c.includes(e)?e:`primary`;break}this.setAttribute(`variant`,this.variant)}}set quiet(e){this._quiet=e,this.treatment=e?`outline`:`fill`}get quiet(){return this._quiet}firstUpdated(e){super.firstUpdated(e),this.hasAttribute(`variant`)||this.setAttribute(`variant`,this.variant),this.pending&&this.pendingStateController.hostUpdated()}renderButton(){return e`
|
|
3
|
-
${this.buttonContent} ${this.pendingStateController.renderPendingState()}
|
|
4
|
-
`}};r([i({type:String,attribute:`pending-label`})],l.prototype,`pendingLabel`,void 0),r([i({type:Boolean,reflect:!0,attribute:!0})],l.prototype,`pending`,void 0),r([i()],l.prototype,`variant`,null),r([i({reflect:!0,attribute:`static-color`})],l.prototype,`staticColor`,void 0),r([i({reflect:!0})],l.prototype,`treatment`,void 0),r([i({type:Boolean,reflect:!0})],l.prototype,`quiet`,null),r([i({type:Boolean,attribute:`no-wrap`,reflect:!0})],l.prototype,`noWrap`,void 0);export{l as t};
|