@luzmo/lucero 1.0.1-alpha.22 → 1.0.1-alpha.24

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.
Files changed (81) hide show
  1. package/components/accordion/index.cjs +2 -2
  2. package/components/accordion/index.js +1 -1
  3. package/components/action-bar/index.cjs +1 -1
  4. package/components/action-bar/index.js +2 -2
  5. package/components/action-button/index.cjs +1 -1
  6. package/components/action-button/index.js +1 -1
  7. package/components/action-group/index.cjs +1 -1
  8. package/components/action-group/index.js +1 -1
  9. package/components/{action-group-DS7x8jfJ.js → action-group-Bwt9w8Vh.js} +1 -1
  10. package/components/action-group-D917z7XF.cjs +20 -0
  11. package/components/action-menu/index.cjs +1 -1
  12. package/components/action-menu/index.js +2 -2
  13. package/components/button/index.cjs +1 -1
  14. package/components/button/index.js +3 -3
  15. package/components/{button-base-BGAqeDTT.js → button-base-B5uul3tZ.js} +1 -1
  16. package/components/{button-base-CShsEDFM.cjs → button-base-C7or8-FB.cjs} +1 -1
  17. package/components/{clear-button-CMhq1QsA.js → clear-button-BFtJVPzm.js} +1 -1
  18. package/components/{clear-button-BWJrTbkk.cjs → clear-button-_a8GjtJC.cjs} +1 -1
  19. package/components/{close-button-BiJwFZyW.js → close-button-D9qjjy2w.js} +1 -1
  20. package/components/{close-button-DrMdfzPW.cjs → close-button-TZ08VFmi.cjs} +1 -1
  21. package/components/color-area/index.cjs +1 -1
  22. package/components/color-area/index.js +1 -1
  23. package/components/color-field/index.cjs +1 -1
  24. package/components/color-field/index.js +1 -1
  25. package/components/color-palette-group/index.cjs +1 -1
  26. package/components/color-palette-group/index.js +1 -1
  27. package/components/color-slider/index.cjs +1 -1
  28. package/components/color-slider/index.js +1 -1
  29. package/components/date-time-picker/index.cjs +3 -3
  30. package/components/date-time-picker/index.js +1 -1
  31. package/components/index.cjs +1 -1
  32. package/components/index.js +5 -5
  33. package/components/infield-button/index.cjs +1 -1
  34. package/components/infield-button/index.js +1 -1
  35. package/components/menu/index.cjs +3 -3
  36. package/components/menu/index.js +7 -7
  37. package/components/number-field/index.cjs +1 -1
  38. package/components/number-field/index.js +2 -2
  39. package/components/observe-slot-presence-CNltc0C0.cjs +18 -0
  40. package/components/{observe-slot-presence-CmVi0zTc.js → observe-slot-presence-DFi6GE3H.js} +1 -1
  41. package/components/observe-slot-text-CBMHpuIK.cjs +18 -0
  42. package/components/{observe-slot-text-CugmOzNZ.js → observe-slot-text-DorVpCL4.js} +11 -11
  43. package/components/options/index.cjs +26 -30
  44. package/components/options/index.js +198 -252
  45. package/components/overlay/index.cjs +2 -2
  46. package/components/overlay/index.js +24 -25
  47. package/components/picker-button/index.cjs +1 -1
  48. package/components/picker-button/index.js +2 -2
  49. package/components/search/index.cjs +1 -1
  50. package/components/search/index.js +1 -1
  51. package/components/{streaming-listener-BgU36S1Z.js → streaming-listener-BlWm-XZU.js} +4 -5
  52. package/components/streaming-listener-D9Wc7skA.cjs +18 -0
  53. package/components/swatch/index.cjs +6 -6
  54. package/components/swatch/index.js +2 -2
  55. package/components/tabs/index.cjs +18 -34
  56. package/components/tabs/index.js +192 -527
  57. package/components/tags/index.cjs +1 -1
  58. package/components/tags/index.js +1 -1
  59. package/components/text-field/index.cjs +1 -1
  60. package/components/text-field/index.js +1 -1
  61. package/components/text-field/text-field.d.ts +2 -0
  62. package/components/{text-field-JMrsh-zo.cjs → text-field-Bnei-lTb.cjs} +5 -3
  63. package/components/{text-field-BTEpwGFu.js → text-field-CQ8t9NU2.js} +68 -52
  64. package/components/toast/index.cjs +1 -1
  65. package/components/toast/index.js +1 -1
  66. package/components/utils.cjs +1 -1
  67. package/components/utils.js +1 -1
  68. package/custom-elements.json +1 -1
  69. package/package.json +1 -1
  70. package/components/action-group-D6rV7sfq.cjs +0 -20
  71. package/components/async-directive-CDQoI4mS.js +0 -81
  72. package/components/async-directive-CddlkYlZ.cjs +0 -22
  73. package/components/directive-DrvvqO47.cjs +0 -32
  74. package/components/directive-OK_Jd_xx.js +0 -314
  75. package/components/mutation-controller-DH7YOCyj.js +0 -52
  76. package/components/mutation-controller-DkOMCW-c.cjs +0 -22
  77. package/components/observe-slot-presence-bc9chhsi.cjs +0 -18
  78. package/components/observe-slot-text-ByPG1Lqw.cjs +0 -18
  79. package/components/streaming-listener-CfUtuELp.cjs +0 -18
  80. package/components/when-CDK1Tt5Y.js +0 -28
  81. package/components/when-CDZyJPvd.cjs +0 -22
package/components/tags/index.cjs CHANGED
@@ -15,7 +15,7 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("lit"),s=require("lit/decorators.js"),b=require("../base-5nDSSNeT.cjs"),m=require("../sized-mixin-DcvJLFeo.cjs");require("../clear-button-BWJrTbkk.cjs");const p=require("../focus-visible-D4BXb5RB.cjs"),f=require("../roving-tabindex-By_fCy_e.cjs"),k=':host{border-color:var(--highcontrast-tag-border-color, var(--luzmo-tag-border-color, var(--tag-border-color)));background-color:var(--highcontrast-tag-background-color, var(--luzmo-tag-background-color, var(--tag-background-color)));color:var(--highcontrast-tag-content-color, var(--luzmo-tag-content-color, var(--tag-content-color)));border-radius:var(--luzmo-tag-corner-radius, var(--tag-corner-radius));border-width:var(--luzmo-tag-border-width, var(--tag-border-width));block-size:var(--luzmo-tag-height, var(--tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,box-shadow var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,background-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out;border-style:solid;outline:none;align-items:center;justify-content:center;padding-inline-start:calc(var(--luzmo-tag-spacing-inline-start, var(--tag-spacing-inline-start)) - var(--luzmo-tag-border-width, var(--tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));inline-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));flex-shrink:0;margin-inline-end:var(--luzmo-tag-icon-spacing-inline-end, var(--tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-inline-end:var(--luzmo-tag-avatar-spacing-inline-end, var(--tag-avatar-spacing-inline-end))}.clear-button{--luzmo-clear-button-width: fit-content;--clearbutton-fill-size: fit-content;--clearbutton-fill-background-color: transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--luzmo-tag-clear-button-spacing-inline-start, var(--tag-clear-button-spacing-inline-start)) + var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) * -1);margin-inline-end:calc(var(--luzmo-tag-clear-button-spacing-inline-end, var(--tag-clear-button-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)))}.clear-button .luzmo-ClearButton-fill{background-color:var(--luzmo-clearbutton-fill-background-color, var(--clearbutton-fill-background-color));inline-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size));block-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--luzmo-tag-label-line-height, var(--tag-label-line-height));font-weight:var(--luzmo-tag-label-font-weight, var(--tag-label-font-weight));font-size:var(--luzmo-tag-font-size, var(--tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;display:flex;align-items:center;margin-inline-end:calc(var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active, var(--luzmo-tag-border-color-active, var(--tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active, var(--luzmo-tag-background-color-active, var(--tag-background-color-active)));color:var(--highcontrast-tag-content-color-active, var(--luzmo-tag-content-color-active, var(--tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus, var(--luzmo-tag-border-color-focus, var(--tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus, var(--luzmo-tag-background-color-focus, var(--tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus, var(--luzmo-tag-content-color-focus, var(--tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:"";border-color:var(--highcontrast-tag-focus-ring-color, var(--luzmo-tag-focus-ring-color, var(--tag-focus-ring-color)));border-radius:calc(var(--luzmo-tag-corner-radius, var(--tag-corner-radius)) + var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) + var(--luzmo-tag-border-width, var(--tag-border-width)));border-width:var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-block-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected, var(--luzmo-tag-border-color-selected, var(--tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected, var(--luzmo-tag-background-color-selected, var(--tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active, var(--luzmo-tag-border-color-selected-active, var(--tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active, var(--luzmo-tag-background-color-selected-active, var(--tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus, var(--luzmo-tag-border-color-selected-focus, var(--tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus, var(--luzmo-tag-background-color-selected-focus, var(--tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid, var(--luzmo-tag-border-color-invalid, var(--tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid, var(--luzmo-tag-content-color-invalid, var(--tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active, var(--luzmo-tag-border-color-invalid-active, var(--tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active, var(--luzmo-tag-content-color-invalid-active, var(--tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus, var(--luzmo-tag-border-color-invalid-focus, var(--tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus, var(--luzmo-tag-content-color-invalid-focus, var(--tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected, var(--luzmo-tag-border-color-invalid-selected, var(--tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected, var(--luzmo-tag-background-color-invalid-selected, var(--tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active, var(--luzmo-tag-border-color-invalid-selected-active, var(--tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active, var(--luzmo-tag-background-color-invalid-selected-active, var(--tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus, var(--luzmo-tag-border-color-invalid-selected-focus, var(--tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus, var(--luzmo-tag-background-color-invalid-selected-focus, var(--tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized, var(--luzmo-tag-border-color-emphasized, var(--tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized, var(--luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)));--luzmo-clear-button-background-color-hover: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-focus: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-down: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) )}@media (hover: hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover, var(--luzmo-tag-border-color-hover, var(--tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover, var(--luzmo-tag-background-color-hover, var(--tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover, var(--luzmo-tag-content-color-hover, var(--tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover, var(--luzmo-tag-border-color-selected-hover, var(--tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover, var(--luzmo-tag-background-color-selected-hover, var(--tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover, var(--luzmo-tag-border-color-invalid-hover, var(--tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover, var(--luzmo-tag-content-color-invalid-hover, var(--tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover, var(--luzmo-tag-border-color-invalid-selected-hover, var(--tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover, var(--luzmo-tag-background-color-invalid-selected-hover, var(--tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover, var(--luzmo-tag-border-color-emphasized-hover, var(--tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover, var(--luzmo-tag-background-color-emphasized-hover, var(--tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active, var(--luzmo-tag-border-color-emphasized-active, var(--tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active, var(--luzmo-tag-background-color-emphasized-active, var(--tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus, var(--luzmo-tag-border-color-emphasized-focus, var(--tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus, var(--luzmo-tag-background-color-emphasized-focus, var(--tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled, var(--luzmo-tag-border-color-disabled, var(--tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled, var(--luzmo-tag-background-color-disabled, var(--tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled, var(--luzmo-tag-content-color-disabled, var(--tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--luzmo-avatar-opacity-disabled, var(--avatar-opacity-disabled))}@media (forced-colors: active){:host{--highcontrast-tag-border-color: ButtonText;--highcontrast-tag-border-color-hover: ButtonText;--highcontrast-tag-border-color-active: ButtonText;--highcontrast-tag-border-color-focus: Highlight;--highcontrast-tag-background-color: ButtonFace;--highcontrast-tag-background-color-hover: ButtonFace;--highcontrast-tag-background-color-active: ButtonFace;--highcontrast-tag-background-color-focus: ButtonFace;--highcontrast-tag-content-color: ButtonText;--highcontrast-tag-content-color-hover: ButtonText;--highcontrast-tag-content-color-active: ButtonText;--highcontrast-tag-content-color-focus: ButtonText;--highcontrast-tag-focus-ring-color: Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected: Highlight;--highcontrast-tag-border-color-selected-hover: Highlight;--highcontrast-tag-border-color-selected-active: Highlight;--highcontrast-tag-border-color-selected-focus: Highlight;--highcontrast-tag-background-color-selected: Highlight;--highcontrast-tag-background-color-selected-hover: Highlight;--highcontrast-tag-background-color-selected-active: Highlight;--highcontrast-tag-background-color-selected-focus: Highlight;--highcontrast-tag-content-color-selected: HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled: GrayText;--highcontrast-tag-background-color-disabled: ButtonFace;--highcontrast-tag-content-color-disabled: GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid: Highlight;--highcontrast-tag-border-color-invalid-hover: Highlight;--highcontrast-tag-border-color-invalid-active: Highlight;--highcontrast-tag-border-color-invalid-focus: Highlight;--highcontrast-tag-content-color-invalid: CanvasText;--highcontrast-tag-content-color-invalid-hover: CanvasText;--highcontrast-tag-content-color-invalid-active: CanvasText;--highcontrast-tag-content-color-invalid-focus: CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected: Highlight;--highcontrast-tag-border-color-invalid-selected-hover: Highlight;--highcontrast-tag-border-color-invalid-selected-focus: Highlight;--highcontrast-tag-border-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected: Highlight;--highcontrast-tag-background-color-invalid-selected-hover: Highlight;--highcontrast-tag-background-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected-focus: Highlight;--highcontrast-tag-content-color-invalid-selected: HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized: Highlight;--highcontrast-tag-border-color-emphasized-hover: Highlight;--highcontrast-tag-border-color-emphasized-active: Highlight;--highcontrast-tag-border-color-emphasized-focus: Highlight;--highcontrast-tag-background-color-emphasized: ButtonFace;--highcontrast-tag-background-color-emphasized-hover: ButtonFace;--highcontrast-tag-background-color-emphasized-active: ButtonFace;--highcontrast-tag-background-color-emphasized-focus: ButtonFace;--highcontrast-tag-content-color-emphasized: CanvasText}}:host{--tag-border-color: var(--luzmo-border-color);--tag-border-color-hover: var(--luzmo-border-color-hover);--tag-border-color-active: var(--luzmo-border-color-active);--tag-border-color-focus: var(--luzmo-border-color-focus);--tag-size-small-corner-radius: var(--luzmo-border-radius-s);--tag-size-medium-corner-radius: var(--luzmo-border-radius);--tag-size-large-corner-radius: var(--luzmo-border-radius);--tag-background-color: var(--luzmo-background-color);--tag-background-color-hover: var(--luzmo-background-color-hover);--tag-background-color-active: var(--luzmo-background-color-active);--tag-background-color-focus: var(--luzmo-background-color-focus);--tag-content-color: var(--luzmo-font-color);--tag-content-color-hover: var(--luzmo-font-color-hover);--tag-content-color-active: var(--luzmo-font-color-active);--tag-content-color-focus: var(--luzmo-font-color-focus);--tag-border-color-selected: var(--luzmo-border-color-down);--tag-border-color-selected-hover: var(--luzmo-border-color-down);--tag-border-color-selected-active: var(--luzmo-border-color-down);--tag-border-color-selected-focus: var(--luzmo-border-color-down);--tag-border-color-disabled: var(--luzmo-border-color-disabled);--tag-background-color-disabled: var(--luzmo-background-color-disabled);--avatar-opacity-disabled: .3;--tag-animation-duration: var(--luzmo-animation-duration);--tag-border-width: var(--luzmo-border-width);--tag-focus-ring-thickness: var(--luzmo-indicator-width);--tag-focus-ring-gap: var(--luzmo-indicator-gap);--tag-focus-ring-color: var(--luzmo-indicator-color);--tag-label-line-height: var(--luzmo-line-height);--tag-label-font-weight: var(--luzmo-font-weight);--tag-content-color-selected: var(--luzmo-font-color-down);--tag-background-color-selected: var(--luzmo-background-color-down);--tag-background-color-selected-hover: var(--luzmo-background-color-down);--tag-background-color-selected-active: var(--luzmo-background-color-down);--tag-background-color-selected-focus: var(--luzmo-background-color-down);--tag-border-color-invalid: var(--luzmo-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)}:host([size=s]){--tag-height: var(--luzmo-component-height-xs);--tag-font-size: var(--luzmo-font-size-s);--tag-icon-size: var(--luzmo-font-size-s);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-2);--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-3);--tag-label-spacing-inline-end: var(--luzmo-spacing-3);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host{--tag-height: var(--luzmo-component-height-s);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-font-size);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-label-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-3)}:host([size=l]){--tag-height: var(--luzmo-component-height);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-font-size);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-3);--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-4);--tag-label-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--tag-height: var(--luzmo-component-height-l);--tag-font-size: var(--luzmo-font-size-l);--tag-icon-size: var(--luzmo-font-size-l);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-corner-radius: var(--luzmo-border-radius-l);--tag-spacing-inline-start: var(--luzmo-spacing-5);--tag-label-spacing-inline-end: var(--luzmo-spacing-5);--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-4)}:host([invalid]) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-key-focus, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]):hover .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]:is(:active,[active])) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([size=xs]){--icon-size: var(--workflow-icon-size-50)}:host([size=s]){--icon-size: var(--workflow-icon-size-75)}:host([size=m]){--icon-size: var(--workflow-icon-size)}:host([size=l]){--icon-size: var(--workflow-icon-size-200)}:host([size=xl]){--icon-size: var(--workflow-icon-size-300)}:host([size=xxl]){--icon-size: var(--workflow-icon-size-400)}';var w=Object.defineProperty,u=(c,o,a,n)=>{for(var r=void 0,t=c.length-1,e;t>=0;t--)(e=c[t])&&(r=e(o,a,r)||r);return r&&w(o,a,r),r};class i extends m.SizedMixin(b.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.deletable=!1,this.disabled=!1,this.readonly=!1,this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)},this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)},this.handleKeydown=o=>{if(!this.deletable||this.disabled)return;const{code:a}=o;switch(a){case"Backspace":case"Space":case"Delete":{this.delete();break}default:return}},this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[l.unsafeCSS(k)]}delete(){this.readonly||!this.dispatchEvent(new Event("delete",{bubbles:!0,cancelable:!0,composed:!0}))||this.remove()}render(){return l.html`
18
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("lit"),s=require("lit/decorators.js"),b=require("../base-5nDSSNeT.cjs"),m=require("../sized-mixin-DcvJLFeo.cjs");require("../clear-button-_a8GjtJC.cjs");const p=require("../focus-visible-D4BXb5RB.cjs"),f=require("../roving-tabindex-By_fCy_e.cjs"),k=':host{border-color:var(--highcontrast-tag-border-color, var(--luzmo-tag-border-color, var(--tag-border-color)));background-color:var(--highcontrast-tag-background-color, var(--luzmo-tag-background-color, var(--tag-background-color)));color:var(--highcontrast-tag-content-color, var(--luzmo-tag-content-color, var(--tag-content-color)));border-radius:var(--luzmo-tag-corner-radius, var(--tag-corner-radius));border-width:var(--luzmo-tag-border-width, var(--tag-border-width));block-size:var(--luzmo-tag-height, var(--tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,box-shadow var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,background-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out;border-style:solid;outline:none;align-items:center;justify-content:center;padding-inline-start:calc(var(--luzmo-tag-spacing-inline-start, var(--tag-spacing-inline-start)) - var(--luzmo-tag-border-width, var(--tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));inline-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));flex-shrink:0;margin-inline-end:var(--luzmo-tag-icon-spacing-inline-end, var(--tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-inline-end:var(--luzmo-tag-avatar-spacing-inline-end, var(--tag-avatar-spacing-inline-end))}.clear-button{--luzmo-clear-button-width: fit-content;--clearbutton-fill-size: fit-content;--clearbutton-fill-background-color: transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--luzmo-tag-clear-button-spacing-inline-start, var(--tag-clear-button-spacing-inline-start)) + var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) * -1);margin-inline-end:calc(var(--luzmo-tag-clear-button-spacing-inline-end, var(--tag-clear-button-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)))}.clear-button .luzmo-ClearButton-fill{background-color:var(--luzmo-clearbutton-fill-background-color, var(--clearbutton-fill-background-color));inline-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size));block-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--luzmo-tag-label-line-height, var(--tag-label-line-height));font-weight:var(--luzmo-tag-label-font-weight, var(--tag-label-font-weight));font-size:var(--luzmo-tag-font-size, var(--tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;display:flex;align-items:center;margin-inline-end:calc(var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active, var(--luzmo-tag-border-color-active, var(--tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active, var(--luzmo-tag-background-color-active, var(--tag-background-color-active)));color:var(--highcontrast-tag-content-color-active, var(--luzmo-tag-content-color-active, var(--tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus, var(--luzmo-tag-border-color-focus, var(--tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus, var(--luzmo-tag-background-color-focus, var(--tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus, var(--luzmo-tag-content-color-focus, var(--tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:"";border-color:var(--highcontrast-tag-focus-ring-color, var(--luzmo-tag-focus-ring-color, var(--tag-focus-ring-color)));border-radius:calc(var(--luzmo-tag-corner-radius, var(--tag-corner-radius)) + var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) + var(--luzmo-tag-border-width, var(--tag-border-width)));border-width:var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-block-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected, var(--luzmo-tag-border-color-selected, var(--tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected, var(--luzmo-tag-background-color-selected, var(--tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active, var(--luzmo-tag-border-color-selected-active, var(--tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active, var(--luzmo-tag-background-color-selected-active, var(--tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus, var(--luzmo-tag-border-color-selected-focus, var(--tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus, var(--luzmo-tag-background-color-selected-focus, var(--tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid, var(--luzmo-tag-border-color-invalid, var(--tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid, var(--luzmo-tag-content-color-invalid, var(--tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active, var(--luzmo-tag-border-color-invalid-active, var(--tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active, var(--luzmo-tag-content-color-invalid-active, var(--tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus, var(--luzmo-tag-border-color-invalid-focus, var(--tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus, var(--luzmo-tag-content-color-invalid-focus, var(--tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected, var(--luzmo-tag-border-color-invalid-selected, var(--tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected, var(--luzmo-tag-background-color-invalid-selected, var(--tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active, var(--luzmo-tag-border-color-invalid-selected-active, var(--tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active, var(--luzmo-tag-background-color-invalid-selected-active, var(--tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus, var(--luzmo-tag-border-color-invalid-selected-focus, var(--tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus, var(--luzmo-tag-background-color-invalid-selected-focus, var(--tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized, var(--luzmo-tag-border-color-emphasized, var(--tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized, var(--luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)));--luzmo-clear-button-background-color-hover: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-focus: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-down: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) )}@media (hover: hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover, var(--luzmo-tag-border-color-hover, var(--tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover, var(--luzmo-tag-background-color-hover, var(--tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover, var(--luzmo-tag-content-color-hover, var(--tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover, var(--luzmo-tag-border-color-selected-hover, var(--tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover, var(--luzmo-tag-background-color-selected-hover, var(--tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover, var(--luzmo-tag-border-color-invalid-hover, var(--tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover, var(--luzmo-tag-content-color-invalid-hover, var(--tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover, var(--luzmo-tag-border-color-invalid-selected-hover, var(--tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover, var(--luzmo-tag-background-color-invalid-selected-hover, var(--tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover, var(--luzmo-tag-border-color-emphasized-hover, var(--tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover, var(--luzmo-tag-background-color-emphasized-hover, var(--tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active, var(--luzmo-tag-border-color-emphasized-active, var(--tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active, var(--luzmo-tag-background-color-emphasized-active, var(--tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus, var(--luzmo-tag-border-color-emphasized-focus, var(--tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus, var(--luzmo-tag-background-color-emphasized-focus, var(--tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled, var(--luzmo-tag-border-color-disabled, var(--tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled, var(--luzmo-tag-background-color-disabled, var(--tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled, var(--luzmo-tag-content-color-disabled, var(--tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--luzmo-avatar-opacity-disabled, var(--avatar-opacity-disabled))}@media (forced-colors: active){:host{--highcontrast-tag-border-color: ButtonText;--highcontrast-tag-border-color-hover: ButtonText;--highcontrast-tag-border-color-active: ButtonText;--highcontrast-tag-border-color-focus: Highlight;--highcontrast-tag-background-color: ButtonFace;--highcontrast-tag-background-color-hover: ButtonFace;--highcontrast-tag-background-color-active: ButtonFace;--highcontrast-tag-background-color-focus: ButtonFace;--highcontrast-tag-content-color: ButtonText;--highcontrast-tag-content-color-hover: ButtonText;--highcontrast-tag-content-color-active: ButtonText;--highcontrast-tag-content-color-focus: ButtonText;--highcontrast-tag-focus-ring-color: Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected: Highlight;--highcontrast-tag-border-color-selected-hover: Highlight;--highcontrast-tag-border-color-selected-active: Highlight;--highcontrast-tag-border-color-selected-focus: Highlight;--highcontrast-tag-background-color-selected: Highlight;--highcontrast-tag-background-color-selected-hover: Highlight;--highcontrast-tag-background-color-selected-active: Highlight;--highcontrast-tag-background-color-selected-focus: Highlight;--highcontrast-tag-content-color-selected: HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled: GrayText;--highcontrast-tag-background-color-disabled: ButtonFace;--highcontrast-tag-content-color-disabled: GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid: Highlight;--highcontrast-tag-border-color-invalid-hover: Highlight;--highcontrast-tag-border-color-invalid-active: Highlight;--highcontrast-tag-border-color-invalid-focus: Highlight;--highcontrast-tag-content-color-invalid: CanvasText;--highcontrast-tag-content-color-invalid-hover: CanvasText;--highcontrast-tag-content-color-invalid-active: CanvasText;--highcontrast-tag-content-color-invalid-focus: CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected: Highlight;--highcontrast-tag-border-color-invalid-selected-hover: Highlight;--highcontrast-tag-border-color-invalid-selected-focus: Highlight;--highcontrast-tag-border-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected: Highlight;--highcontrast-tag-background-color-invalid-selected-hover: Highlight;--highcontrast-tag-background-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected-focus: Highlight;--highcontrast-tag-content-color-invalid-selected: HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized: Highlight;--highcontrast-tag-border-color-emphasized-hover: Highlight;--highcontrast-tag-border-color-emphasized-active: Highlight;--highcontrast-tag-border-color-emphasized-focus: Highlight;--highcontrast-tag-background-color-emphasized: ButtonFace;--highcontrast-tag-background-color-emphasized-hover: ButtonFace;--highcontrast-tag-background-color-emphasized-active: ButtonFace;--highcontrast-tag-background-color-emphasized-focus: ButtonFace;--highcontrast-tag-content-color-emphasized: CanvasText}}:host{--tag-border-color: var(--luzmo-border-color);--tag-border-color-hover: var(--luzmo-border-color-hover);--tag-border-color-active: var(--luzmo-border-color-active);--tag-border-color-focus: var(--luzmo-border-color-focus);--tag-size-small-corner-radius: var(--luzmo-border-radius-s);--tag-size-medium-corner-radius: var(--luzmo-border-radius);--tag-size-large-corner-radius: var(--luzmo-border-radius);--tag-background-color: var(--luzmo-background-color);--tag-background-color-hover: var(--luzmo-background-color-hover);--tag-background-color-active: var(--luzmo-background-color-active);--tag-background-color-focus: var(--luzmo-background-color-focus);--tag-content-color: var(--luzmo-font-color);--tag-content-color-hover: var(--luzmo-font-color-hover);--tag-content-color-active: var(--luzmo-font-color-active);--tag-content-color-focus: var(--luzmo-font-color-focus);--tag-border-color-selected: var(--luzmo-border-color-down);--tag-border-color-selected-hover: var(--luzmo-border-color-down);--tag-border-color-selected-active: var(--luzmo-border-color-down);--tag-border-color-selected-focus: var(--luzmo-border-color-down);--tag-border-color-disabled: var(--luzmo-border-color-disabled);--tag-background-color-disabled: var(--luzmo-background-color-disabled);--avatar-opacity-disabled: .3;--tag-animation-duration: var(--luzmo-animation-duration);--tag-border-width: var(--luzmo-border-width);--tag-focus-ring-thickness: var(--luzmo-indicator-width);--tag-focus-ring-gap: var(--luzmo-indicator-gap);--tag-focus-ring-color: var(--luzmo-indicator-color);--tag-label-line-height: var(--luzmo-line-height);--tag-label-font-weight: var(--luzmo-font-weight);--tag-content-color-selected: var(--luzmo-font-color-down);--tag-background-color-selected: var(--luzmo-background-color-down);--tag-background-color-selected-hover: var(--luzmo-background-color-down);--tag-background-color-selected-active: var(--luzmo-background-color-down);--tag-background-color-selected-focus: var(--luzmo-background-color-down);--tag-border-color-invalid: var(--luzmo-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)}:host([size=s]){--tag-height: var(--luzmo-component-height-xs);--tag-font-size: var(--luzmo-font-size-s);--tag-icon-size: var(--luzmo-font-size-s);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-2);--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-3);--tag-label-spacing-inline-end: var(--luzmo-spacing-3);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host{--tag-height: var(--luzmo-component-height-s);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-font-size);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-label-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-3)}:host([size=l]){--tag-height: var(--luzmo-component-height);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-font-size);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-3);--tag-corner-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-4);--tag-label-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--tag-height: var(--luzmo-component-height-l);--tag-font-size: var(--luzmo-font-size-l);--tag-icon-size: var(--luzmo-font-size-l);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-corner-radius: var(--luzmo-border-radius-l);--tag-spacing-inline-start: var(--luzmo-spacing-5);--tag-label-spacing-inline-end: var(--luzmo-spacing-5);--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-4)}:host([invalid]) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-key-focus, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]):hover .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]:is(:active,[active])) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([size=xs]){--icon-size: var(--workflow-icon-size-50)}:host([size=s]){--icon-size: var(--workflow-icon-size-75)}:host([size=m]){--icon-size: var(--workflow-icon-size)}:host([size=l]){--icon-size: var(--workflow-icon-size-200)}:host([size=xl]){--icon-size: var(--workflow-icon-size-300)}:host([size=xxl]){--icon-size: var(--workflow-icon-size-400)}';var w=Object.defineProperty,u=(c,o,a,n)=>{for(var r=void 0,t=c.length-1,e;t>=0;t--)(e=c[t])&&(r=e(o,a,r)||r);return r&&w(o,a,r),r};class i extends m.SizedMixin(b.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.deletable=!1,this.disabled=!1,this.readonly=!1,this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)},this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)},this.handleKeydown=o=>{if(!this.deletable||this.disabled)return;const{code:a}=o;switch(a){case"Backspace":case"Space":case"Delete":{this.delete();break}default:return}},this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[l.unsafeCSS(k)]}delete(){this.readonly||!this.dispatchEvent(new Event("delete",{bubbles:!0,cancelable:!0,composed:!0}))||this.remove()}render(){return l.html`
19
19
  <slot name="avatar"></slot>
20
20
  <slot name="icon"></slot>
21
21
  <span class="label"><slot></slot></span>
package/components/tags/index.js CHANGED
@@ -19,7 +19,7 @@ import { unsafeCSS as h, nothing as k, html as g } from "lit";
19
19
  import { property as u, queryAssignedNodes as x } from "lit/decorators.js";
20
20
  import { a as m } from "../base-CdYjmV_8.js";
21
21
  import { S as b } from "../sized-mixin-cJbo3PKR.js";
22
- import "../clear-button-CMhq1QsA.js";
22
+ import "../clear-button-BFtJVPzm.js";
23
23
  import { F as w } from "../focus-visible-BvScGDCE.js";
24
24
  import { R as y } from "../roving-tabindex-DOg4z6ZU.js";
25
25
  const p = () => {
package/components/text-field/index.cjs CHANGED
@@ -15,7 +15,7 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("../text-field-JMrsh-zo.cjs"),e=require("lit"),h=require("@luzmo/icons"),p=require("lit/decorators.js"),s=require("../base-5nDSSNeT.cjs"),u=require("../sized-mixin-DcvJLFeo.cjs"),v="@media (forced-colors: active){:host{--highcontrast-helptext-content-color-default: CanvasText;--highcontrast-helptext-icon-color-default: CanvasText}:host,.text,.icon{forced-color-adjust:none}}:host{--helptext-bottom-to-workflow-icon: 3px;color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)));font-family:var(--luzmo-helptext-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-helptext-font-weight, var(--luzmo-font-weight));font-size:var(--luzmo-helptext-font-size, var(--helptext-font-size, var(--luzmo-font-size-s)));min-block-size:var(--luzmo-helptext-min-height, var(--helptext-min-height, 24px));display:flex}.icon{block-size:var(--luzmo-helptext-icon-size, var(--helptext-icon-size, 18px));inline-size:var(--luzmo-helptext-icon-size, var(--helptext-icon-size, 18px));flex-shrink:0;margin-inline-end:var(--luzmo-helptext-text-to-visual, var(--helptext-text-to-visual, 7px));padding-block-start:var(--luzmo-helptext-top-to-workflow-icon, var(--helptext-top-to-workflow-icon, 3px));padding-block-end:var(--luzmo-helptext-bottom-to-workflow-icon, var(--helptext-bottom-to-workflow-icon, 3px))}.text{line-height:var(--luzmo-helptext-line-height, var(--helptext-line-height, 1.3));padding-block-start:var(--luzmo-helptext-top-to-text, var(--helptext-top-to-text, 4px));padding-block-end:var(--luzmo-helptext-bottom-to-text, var(--helptext-bottom-to-text, 5px))}:host(:lang(ja)) .text,:host(:lang(ko)) .text,:host(:lang(zh)) .text{line-height:var(--luzmo-helptext-line-height-cjk, var(--helptext-line-height-cjk, 1.4))}:host([variant=neutral]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)))}:host([variant=neutral]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([variant=negative]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-negative-color-down)))}:host([variant=negative]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([disabled]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([disabled]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host{--helptext-line-height: 1.3;--helptext-content-color-default: var(--luzmo-font-color);--helptext-icon-color-default: var(--luzmo-font-color);--helptext-disabled-content-color: var(--luzmo-font-color-disabled)}:host([variant=neutral]){--helptext-content-color-default: var(var(--luzmo-font-color));--helptext-icon-color-default: var(var(--luzmo-font-color))}:host([variant=negative]){--helptext-content-color-default: var(var(--luzmo-negative-color));--helptext-icon-color-default: var(var(--luzmo-negative-color))}:host([disabled]){--helptext-content-color-default: var(--luzmo-font-color-disabled);--helptext-icon-color-default: var(--luzmo-font-color-disabled)}:host(:lang(ja)){--helptext-line-height-cjk: 1.4}:host(:lang(zh)){--helptext-line-height-cjk: 1.4}:host(:lang(ko)){--helptext-line-height-cjk: 1.4}:host([size=s]){--helptext-min-height: 24px;--helptext-icon-size: 16px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 4px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host{--helptext-min-height: 24px;--helptext-icon-size: 18px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 3px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host([size=l]){--helptext-min-height: 32px;--helptext-icon-size: 20px;--helptext-font-size: 14px;--helptext-text-to-visual: 8px;--helptext-top-to-workflow-icon: 6px;--helptext-top-to-text: 6px;--helptext-bottom-to-text: 5px}:host([size=xl]){--helptext-min-height: 40px;--helptext-icon-size: 22px;--helptext-font-size: 16px;--helptext-text-to-visual: 9px;--helptext-top-to-workflow-icon: 9px;--helptext-top-to-text: 9px;--helptext-bottom-to-text: 12px}";var f=Object.defineProperty,c=(l,r,i,d)=>{for(var t=void 0,n=l.length-1,a;n>=0;n--)(a=l[n])&&(t=a(r,i,t)||t);return t&&f(r,i,t),t};class o extends u.SizedMixin(s.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.icon=!1,this.variant="neutral"}static get styles(){return[e.unsafeCSS(v)]}render(){return e.html`
18
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("../text-field-Bnei-lTb.cjs"),e=require("lit"),h=require("@luzmo/icons"),p=require("lit/decorators.js"),s=require("../base-5nDSSNeT.cjs"),u=require("../sized-mixin-DcvJLFeo.cjs"),v="@media (forced-colors: active){:host{--highcontrast-helptext-content-color-default: CanvasText;--highcontrast-helptext-icon-color-default: CanvasText}:host,.text,.icon{forced-color-adjust:none}}:host{--helptext-bottom-to-workflow-icon: 3px;color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)));font-family:var(--luzmo-helptext-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-helptext-font-weight, var(--luzmo-font-weight));font-size:var(--luzmo-helptext-font-size, var(--helptext-font-size, var(--luzmo-font-size-s)));min-block-size:var(--luzmo-helptext-min-height, var(--helptext-min-height, 24px));display:flex}.icon{block-size:var(--luzmo-helptext-icon-size, var(--helptext-icon-size, 18px));inline-size:var(--luzmo-helptext-icon-size, var(--helptext-icon-size, 18px));flex-shrink:0;margin-inline-end:var(--luzmo-helptext-text-to-visual, var(--helptext-text-to-visual, 7px));padding-block-start:var(--luzmo-helptext-top-to-workflow-icon, var(--helptext-top-to-workflow-icon, 3px));padding-block-end:var(--luzmo-helptext-bottom-to-workflow-icon, var(--helptext-bottom-to-workflow-icon, 3px))}.text{line-height:var(--luzmo-helptext-line-height, var(--helptext-line-height, 1.3));padding-block-start:var(--luzmo-helptext-top-to-text, var(--helptext-top-to-text, 4px));padding-block-end:var(--luzmo-helptext-bottom-to-text, var(--helptext-bottom-to-text, 5px))}:host(:lang(ja)) .text,:host(:lang(ko)) .text,:host(:lang(zh)) .text{line-height:var(--luzmo-helptext-line-height-cjk, var(--helptext-line-height-cjk, 1.4))}:host([variant=neutral]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)))}:host([variant=neutral]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([variant=negative]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-negative-color-down)))}:host([variant=negative]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([disabled]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([disabled]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host{--helptext-line-height: 1.3;--helptext-content-color-default: var(--luzmo-font-color);--helptext-icon-color-default: var(--luzmo-font-color);--helptext-disabled-content-color: var(--luzmo-font-color-disabled)}:host([variant=neutral]){--helptext-content-color-default: var(var(--luzmo-font-color));--helptext-icon-color-default: var(var(--luzmo-font-color))}:host([variant=negative]){--helptext-content-color-default: var(var(--luzmo-negative-color));--helptext-icon-color-default: var(var(--luzmo-negative-color))}:host([disabled]){--helptext-content-color-default: var(--luzmo-font-color-disabled);--helptext-icon-color-default: var(--luzmo-font-color-disabled)}:host(:lang(ja)){--helptext-line-height-cjk: 1.4}:host(:lang(zh)){--helptext-line-height-cjk: 1.4}:host(:lang(ko)){--helptext-line-height-cjk: 1.4}:host([size=s]){--helptext-min-height: 24px;--helptext-icon-size: 16px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 4px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host{--helptext-min-height: 24px;--helptext-icon-size: 18px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 3px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host([size=l]){--helptext-min-height: 32px;--helptext-icon-size: 20px;--helptext-font-size: 14px;--helptext-text-to-visual: 8px;--helptext-top-to-workflow-icon: 6px;--helptext-top-to-text: 6px;--helptext-bottom-to-text: 5px}:host([size=xl]){--helptext-min-height: 40px;--helptext-icon-size: 22px;--helptext-font-size: 16px;--helptext-text-to-visual: 9px;--helptext-top-to-workflow-icon: 9px;--helptext-top-to-text: 9px;--helptext-bottom-to-text: 12px}";var f=Object.defineProperty,c=(l,r,i,d)=>{for(var t=void 0,n=l.length-1,a;n>=0;n--)(a=l[n])&&(t=a(r,i,t)||t);return t&&f(r,i,t),t};class o extends u.SizedMixin(s.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.icon=!1,this.variant="neutral"}static get styles(){return[e.unsafeCSS(v)]}render(){return e.html`
19
19
  ${this.variant==="negative"&&this.icon?e.html` ${h.luzmoIcon(h.luzmoClose14)} `:e.nothing}
20
20
  <div class="text"><slot></slot></div>
21
21
  `}}c([p.property({type:Boolean,reflect:!0})],o.prototype,"icon");c([p.property({reflect:!0})],o.prototype,"variant");customElements.get("luzmo-text-field")||customElements.define("luzmo-text-field",x.LuzmoTextField);customElements.get("luzmo-help-text")||customElements.define("luzmo-help-text",o);exports.LuzmoTextField=x.LuzmoTextField;exports.LuzmoHelpText=o;
package/components/text-field/index.js CHANGED
@@ -15,7 +15,7 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- import { L as h } from "../text-field-BTEpwGFu.js";
18
+ import { L as h } from "../text-field-CQ8t9NU2.js";
19
19
  import { unsafeCSS as p, nothing as x, html as a } from "lit";
20
20
  import { luzmoIcon as s, luzmoClose14 as z } from "@luzmo/icons";
21
21
  import { property as c } from "lit/decorators.js";
package/components/text-field/text-field.d.ts CHANGED
@@ -12,6 +12,7 @@ declare const LuzmoTextFieldBase_base: typeof Focusable & {
12
12
  /**
13
13
  * @fires input - The value of the element has changed.
14
14
  * @fires change - An alteration to the value of the element has been committed by the user.
15
+ * @fires keypress - A key has been pressed.
15
16
  */
16
17
  export declare class LuzmoTextFieldBase extends LuzmoTextFieldBase_base {
17
18
  static get styles(): CSSResultArray;
@@ -119,6 +120,7 @@ export declare class LuzmoTextFieldBase extends LuzmoTextFieldBase_base {
119
120
  protected handleChange(): void;
120
121
  protected onFocus(): void;
121
122
  protected onBlur(_event: FocusEvent): void;
123
+ protected handleKeyPress(event: KeyboardEvent): void;
122
124
  protected handleInputElementPointerdown(): void;
123
125
  protected renderStateIcons(): TemplateResult | typeof nothing;
124
126
  protected get displayValue(): string;
package/components/{text-field-JMrsh-zo.cjs → text-field-Bnei-lTb.cjs} RENAMED
@@ -15,7 +15,7 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- "use strict";const n=require("lit"),i=require("lit/decorators.js"),s=require("lit/directives/if-defined.js"),y=require("lit/directives/live.js"),h=require("@luzmo/icons"),v=require("./focusable-CbVKgGfS.cjs"),f=require("./sized-mixin-DcvJLFeo.cjs"),m=require("./manage-help-text-Bat9yGvF.cjs"),g=require("./text-field.module-DXhFA9G-.cjs");var $=Object.defineProperty,x=Object.getOwnPropertyDescriptor,r=(p,e,l,a)=>{for(var o=a>1?void 0:a?x(e,l):e,u=p.length-1,d;u>=0;u--)(d=p[u])&&(o=(a?d(e,l,o):d(o))||o);return a&&o&&$(e,l,o),o};const b=["text","url","tel","email","password"];class t extends m.ManageHelpText(f.SizedMixin(v.Focusable,{noDefaultSize:!0})){constructor(){super(...arguments),this.allowedKeys="",this.focused=!1,this.invalid=!1,this.label="",this.placeholder="",this._type="text",this.grows=!1,this.maxlength=-1,this.minlength=-1,this.multiline=!1,this.readonly=!1,this.rows=-1,this.valid=!1,this._value="",this.quiet=!1,this.required=!1}static get styles(){return[n.unsafeCSS(g.textFieldStyles)]}set type(e){const l=this._type;this._type=e,this.requestUpdate("type",l)}get type(){return b.find(e=>e===this._type)??"text"}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}get focusElement(){return this.inputElement}setSelectionRange(e,l,a="none"){this.inputElement.setSelectionRange(e,l,a)}select(){this.inputElement.select()}handleInput(e){if(this.allowedKeys&&this.inputElement.value&&!new RegExp(`^[${this.allowedKeys}]*$`,"u").test(this.inputElement.value)){const o=this.inputElement.selectionStart-1;this.inputElement.value=this.value.toString(),this.inputElement.setSelectionRange(o,o);return}this.value=this.inputElement.value}handleChange(){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}onFocus(){this.focused=!this.readonly&&!0}onBlur(e){this.focused=!this.readonly&&!1}handleInputElementPointerdown(){}renderStateIcons(){return this.invalid?n.html`
18
+ "use strict";const n=require("lit"),i=require("lit/decorators.js"),s=require("lit/directives/if-defined.js"),c=require("lit/directives/live.js"),h=require("@luzmo/icons"),f=require("./focusable-CbVKgGfS.cjs"),v=require("./sized-mixin-DcvJLFeo.cjs"),m=require("./manage-help-text-Bat9yGvF.cjs"),g=require("./text-field.module-DXhFA9G-.cjs");var $=Object.defineProperty,x=Object.getOwnPropertyDescriptor,r=(p,e,l,o)=>{for(var a=o>1?void 0:o?x(e,l):e,u=p.length-1,d;u>=0;u--)(d=p[u])&&(a=(o?d(e,l,a):d(a))||a);return o&&a&&$(e,l,a),a};const b=["text","url","tel","email","password"];class t extends m.ManageHelpText(v.SizedMixin(f.Focusable,{noDefaultSize:!0})){constructor(){super(...arguments),this.allowedKeys="",this.focused=!1,this.invalid=!1,this.label="",this.placeholder="",this._type="text",this.grows=!1,this.maxlength=-1,this.minlength=-1,this.multiline=!1,this.readonly=!1,this.rows=-1,this.valid=!1,this._value="",this.quiet=!1,this.required=!1}static get styles(){return[n.unsafeCSS(g.textFieldStyles)]}set type(e){const l=this._type;this._type=e,this.requestUpdate("type",l)}get type(){return b.find(e=>e===this._type)??"text"}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}get focusElement(){return this.inputElement}setSelectionRange(e,l,o="none"){this.inputElement.setSelectionRange(e,l,o)}select(){this.inputElement.select()}handleInput(e){if(this.allowedKeys&&this.inputElement.value&&!new RegExp(`^[${this.allowedKeys}]*$`,"u").test(this.inputElement.value)){const a=this.inputElement.selectionStart-1;this.inputElement.value=this.value.toString(),this.inputElement.setSelectionRange(a,a);return}this.value=this.inputElement.value}handleChange(){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}onFocus(){this.focused=!this.readonly&&!0}onBlur(e){this.focused=!this.readonly&&!1}handleKeyPress(e){this.dispatchEvent(new KeyboardEvent("keypress",{bubbles:!0,composed:!0,key:e.key,code:e.code,ctrlKey:e.ctrlKey,shiftKey:e.shiftKey,altKey:e.altKey,metaKey:e.metaKey}))}handleInputElementPointerdown(){}renderStateIcons(){return this.invalid?n.html`
19
19
  <div id="invalid" class="icon">${h.luzmoIcon(h.luzmoAlert)}</div>
20
20
  `:this.valid?n.html`
21
21
  <div id="valid" class="icon">${h.luzmoIcon(h.luzmoCheck)}</div>
@@ -39,6 +39,7 @@
39
39
  .value=${this.displayValue}
40
40
  @change=${this.handleChange}
41
41
  @input=${this.handleInput}
42
+ @keypress=${this.handleKeyPress}
42
43
  @focus=${this.onFocus}
43
44
  @blur=${this.onBlur}
44
45
  ?disabled=${this.disabled}
@@ -61,9 +62,10 @@
61
62
  minlength=${s.ifDefined(this.minlength>-1?this.minlength:void 0)}
62
63
  pattern=${s.ifDefined(this.pattern)}
63
64
  placeholder=${this.placeholder}
64
- .value=${y.live(this.displayValue)}
65
+ .value=${c.live(this.displayValue)}
65
66
  @change=${this.handleChange}
66
67
  @input=${this.handleInput}
68
+ @keypress=${this.handleKeyPress}
67
69
  @pointerdown=${this.handleInputElementPointerdown}
68
70
  @focus=${this.onFocus}
69
71
  @blur=${this.onBlur}
@@ -78,4 +80,4 @@
78
80
  `}render(){return n.html`
79
81
  <div id="text-field">${this.renderField()}</div>
80
82
  ${this.renderHelpText(this.invalid)}
81
- `}update(e){(e.has("value")||e.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(e=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),this.minlength!==void 0&&(e=e&&this.value.toString().length>=this.minlength),this.valid=e,this.invalid=!e),e}}r([i.state()],t.prototype,"appliedLabel",2);r([i.property({attribute:"allowed-keys"})],t.prototype,"allowedKeys",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"focused",2);r([i.query(".input:not(#sizer)")],t.prototype,"inputElement",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"invalid",2);r([i.property()],t.prototype,"label",2);r([i.property({type:String,reflect:!0})],t.prototype,"name",2);r([i.property()],t.prototype,"placeholder",2);r([i.state()],t.prototype,"type",1);r([i.property({attribute:"type",reflect:!0})],t.prototype,"_type",2);r([i.property()],t.prototype,"pattern",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"grows",2);r([i.property({type:Number})],t.prototype,"maxlength",2);r([i.property({type:Number})],t.prototype,"minlength",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"multiline",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"readonly",2);r([i.property({type:Number})],t.prototype,"rows",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"valid",2);r([i.property({type:String})],t.prototype,"value",1);r([i.property({type:Boolean,reflect:!0})],t.prototype,"quiet",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"required",2);r([i.property({type:String,reflect:!0})],t.prototype,"autocomplete",2);class c extends t{constructor(){super(...arguments),this._value=""}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}}r([i.property({type:String})],c.prototype,"value",1);exports.LuzmoTextField=c;exports.LuzmoTextFieldBase=t;
83
+ `}update(e){(e.has("value")||e.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(e=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),this.minlength!==void 0&&(e=e&&this.value.toString().length>=this.minlength),this.valid=e,this.invalid=!e),e}}r([i.state()],t.prototype,"appliedLabel",2);r([i.property({attribute:"allowed-keys"})],t.prototype,"allowedKeys",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"focused",2);r([i.query(".input:not(#sizer)")],t.prototype,"inputElement",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"invalid",2);r([i.property()],t.prototype,"label",2);r([i.property({type:String,reflect:!0})],t.prototype,"name",2);r([i.property()],t.prototype,"placeholder",2);r([i.state()],t.prototype,"type",1);r([i.property({attribute:"type",reflect:!0})],t.prototype,"_type",2);r([i.property()],t.prototype,"pattern",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"grows",2);r([i.property({type:Number})],t.prototype,"maxlength",2);r([i.property({type:Number})],t.prototype,"minlength",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"multiline",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"readonly",2);r([i.property({type:Number})],t.prototype,"rows",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"valid",2);r([i.property({type:String})],t.prototype,"value",1);r([i.property({type:Boolean,reflect:!0})],t.prototype,"quiet",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"required",2);r([i.property({type:String,reflect:!0})],t.prototype,"autocomplete",2);class y extends t{constructor(){super(...arguments),this._value=""}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}}r([i.property({type:String})],y.prototype,"value",1);exports.LuzmoTextField=y;exports.LuzmoTextFieldBase=t;
package/components/{text-field-BTEpwGFu.js → text-field-CQ8t9NU2.js} RENAMED
@@ -15,23 +15,23 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- import { unsafeCSS as v, html as o, nothing as p } from "lit";
19
- import { state as m, property as l, query as y } from "lit/decorators.js";
18
+ import { unsafeCSS as m, html as o, nothing as p } from "lit";
19
+ import { state as c, property as s, query as v } from "lit/decorators.js";
20
20
  import { ifDefined as r } from "lit/directives/if-defined.js";
21
21
  import { live as f } from "lit/directives/live.js";
22
- import { luzmoIcon as c, luzmoAlert as g, luzmoCheck as $ } from "@luzmo/icons";
23
- import { F as x } from "./focusable-BjvsvVam.js";
24
- import { S as b } from "./sized-mixin-cJbo3PKR.js";
25
- import { M as S } from "./manage-help-text-C9sCHK3R.js";
26
- import { t as w } from "./text-field.module-C2KVUJcX.js";
27
- var _ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, t = (h, e, s, a) => {
28
- for (var n = a > 1 ? void 0 : a ? E(e, s) : e, u = h.length - 1, d; u >= 0; u--)
29
- (d = h[u]) && (n = (a ? d(e, s, n) : d(n)) || n);
30
- return a && n && _(e, s, n), n;
22
+ import { luzmoIcon as y, luzmoAlert as g, luzmoCheck as $ } from "@luzmo/icons";
23
+ import { F as b } from "./focusable-BjvsvVam.js";
24
+ import { S as x } from "./sized-mixin-cJbo3PKR.js";
25
+ import { M as w } from "./manage-help-text-C9sCHK3R.js";
26
+ import { t as S } from "./text-field.module-C2KVUJcX.js";
27
+ var E = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (h, e, l, a) => {
28
+ for (var n = a > 1 ? void 0 : a ? _(e, l) : e, u = h.length - 1, d; u >= 0; u--)
29
+ (d = h[u]) && (n = (a ? d(e, l, n) : d(n)) || n);
30
+ return a && n && E(e, l, n), n;
31
31
  };
32
- const q = ["text", "url", "tel", "email", "password"];
33
- class i extends S(
34
- b(x, {
32
+ const K = ["text", "url", "tel", "email", "password"];
33
+ class i extends w(
34
+ x(b, {
35
35
  noDefaultSize: !0
36
36
  })
37
37
  ) {
@@ -39,20 +39,20 @@ class i extends S(
39
39
  super(...arguments), this.allowedKeys = "", this.focused = !1, this.invalid = !1, this.label = "", this.placeholder = "", this._type = "text", this.grows = !1, this.maxlength = -1, this.minlength = -1, this.multiline = !1, this.readonly = !1, this.rows = -1, this.valid = !1, this._value = "", this.quiet = !1, this.required = !1;
40
40
  }
41
41
  static get styles() {
42
- return [v(w)];
42
+ return [m(S)];
43
43
  }
44
44
  set type(e) {
45
- const s = this._type;
46
- this._type = e, this.requestUpdate("type", s);
45
+ const l = this._type;
46
+ this._type = e, this.requestUpdate("type", l);
47
47
  }
48
48
  get type() {
49
- return q.find((e) => e === this._type) ?? "text";
49
+ return K.find((e) => e === this._type) ?? "text";
50
50
  }
51
51
  set value(e) {
52
52
  if (e === this.value)
53
53
  return;
54
- const s = this._value;
55
- this._value = e, this.requestUpdate("value", s);
54
+ const l = this._value;
55
+ this._value = e, this.requestUpdate("value", l);
56
56
  }
57
57
  get value() {
58
58
  return this._value;
@@ -70,10 +70,10 @@ class i extends S(
70
70
  * @param [selectionDirection="none"] A string indicating the direction in which the selection is considered to
71
71
  * have been performed.
72
72
  */
73
- setSelectionRange(e, s, a = "none") {
73
+ setSelectionRange(e, l, a = "none") {
74
74
  this.inputElement.setSelectionRange(
75
75
  e,
76
- s,
76
+ l,
77
77
  a
78
78
  );
79
79
  }
@@ -105,13 +105,27 @@ class i extends S(
105
105
  onBlur(e) {
106
106
  this.focused = !this.readonly && !1;
107
107
  }
108
+ handleKeyPress(e) {
109
+ this.dispatchEvent(
110
+ new KeyboardEvent("keypress", {
111
+ bubbles: !0,
112
+ composed: !0,
113
+ key: e.key,
114
+ code: e.code,
115
+ ctrlKey: e.ctrlKey,
116
+ shiftKey: e.shiftKey,
117
+ altKey: e.altKey,
118
+ metaKey: e.metaKey
119
+ })
120
+ );
121
+ }
108
122
  handleInputElementPointerdown() {
109
123
  }
110
124
  renderStateIcons() {
111
125
  return this.invalid ? o`
112
- <div id="invalid" class="icon">${c(g)}</div>
126
+ <div id="invalid" class="icon">${y(g)}</div>
113
127
  ` : this.valid ? o`
114
- <div id="valid" class="icon">${c($)}</div>
128
+ <div id="valid" class="icon">${y($)}</div>
115
129
  ` : p;
116
130
  }
117
131
  get displayValue() {
@@ -139,6 +153,7 @@ class i extends S(
139
153
  .value=${this.displayValue}
140
154
  @change=${this.handleChange}
141
155
  @input=${this.handleInput}
156
+ @keypress=${this.handleKeyPress}
142
157
  @focus=${this.onFocus}
143
158
  @blur=${this.onBlur}
144
159
  ?disabled=${this.disabled}
@@ -167,6 +182,7 @@ class i extends S(
167
182
  .value=${f(this.displayValue)}
168
183
  @change=${this.handleChange}
169
184
  @input=${this.handleInput}
185
+ @keypress=${this.handleKeyPress}
170
186
  @pointerdown=${this.handleInputElementPointerdown}
171
187
  @focus=${this.onFocus}
172
188
  @blur=${this.onBlur}
@@ -200,89 +216,89 @@ class i extends S(
200
216
  }
201
217
  }
202
218
  t([
203
- m()
219
+ c()
204
220
  ], i.prototype, "appliedLabel", 2);
205
221
  t([
206
- l({ attribute: "allowed-keys" })
222
+ s({ attribute: "allowed-keys" })
207
223
  ], i.prototype, "allowedKeys", 2);
208
224
  t([
209
- l({ type: Boolean, reflect: !0 })
225
+ s({ type: Boolean, reflect: !0 })
210
226
  ], i.prototype, "focused", 2);
211
227
  t([
212
- y(".input:not(#sizer)")
228
+ v(".input:not(#sizer)")
213
229
  ], i.prototype, "inputElement", 2);
214
230
  t([
215
- l({ type: Boolean, reflect: !0 })
231
+ s({ type: Boolean, reflect: !0 })
216
232
  ], i.prototype, "invalid", 2);
217
233
  t([
218
- l()
234
+ s()
219
235
  ], i.prototype, "label", 2);
220
236
  t([
221
- l({ type: String, reflect: !0 })
237
+ s({ type: String, reflect: !0 })
222
238
  ], i.prototype, "name", 2);
223
239
  t([
224
- l()
240
+ s()
225
241
  ], i.prototype, "placeholder", 2);
226
242
  t([
227
- m()
243
+ c()
228
244
  ], i.prototype, "type", 1);
229
245
  t([
230
- l({ attribute: "type", reflect: !0 })
246
+ s({ attribute: "type", reflect: !0 })
231
247
  ], i.prototype, "_type", 2);
232
248
  t([
233
- l()
249
+ s()
234
250
  ], i.prototype, "pattern", 2);
235
251
  t([
236
- l({ type: Boolean, reflect: !0 })
252
+ s({ type: Boolean, reflect: !0 })
237
253
  ], i.prototype, "grows", 2);
238
254
  t([
239
- l({ type: Number })
255
+ s({ type: Number })
240
256
  ], i.prototype, "maxlength", 2);
241
257
  t([
242
- l({ type: Number })
258
+ s({ type: Number })
243
259
  ], i.prototype, "minlength", 2);
244
260
  t([
245
- l({ type: Boolean, reflect: !0 })
261
+ s({ type: Boolean, reflect: !0 })
246
262
  ], i.prototype, "multiline", 2);
247
263
  t([
248
- l({ type: Boolean, reflect: !0 })
264
+ s({ type: Boolean, reflect: !0 })
249
265
  ], i.prototype, "readonly", 2);
250
266
  t([
251
- l({ type: Number })
267
+ s({ type: Number })
252
268
  ], i.prototype, "rows", 2);
253
269
  t([
254
- l({ type: Boolean, reflect: !0 })
270
+ s({ type: Boolean, reflect: !0 })
255
271
  ], i.prototype, "valid", 2);
256
272
  t([
257
- l({ type: String })
273
+ s({ type: String })
258
274
  ], i.prototype, "value", 1);
259
275
  t([
260
- l({ type: Boolean, reflect: !0 })
276
+ s({ type: Boolean, reflect: !0 })
261
277
  ], i.prototype, "quiet", 2);
262
278
  t([
263
- l({ type: Boolean, reflect: !0 })
279
+ s({ type: Boolean, reflect: !0 })
264
280
  ], i.prototype, "required", 2);
265
281
  t([
266
- l({ type: String, reflect: !0 })
282
+ s({ type: String, reflect: !0 })
267
283
  ], i.prototype, "autocomplete", 2);
268
- class B extends i {
284
+ class q extends i {
269
285
  constructor() {
270
286
  super(...arguments), this._value = "";
271
287
  }
272
288
  set value(e) {
273
289
  if (e === this.value)
274
290
  return;
275
- const s = this._value;
276
- this._value = e, this.requestUpdate("value", s);
291
+ const l = this._value;
292
+ this._value = e, this.requestUpdate("value", l);
277
293
  }
278
294
  get value() {
279
295
  return this._value;
280
296
  }
281
297
  }
282
298
  t([
283
- l({ type: String })
284
- ], B.prototype, "value", 1);
299
+ s({ type: String })
300
+ ], q.prototype, "value", 1);
285
301
  export {
286
- B as L,
302
+ q as L,
287
303
  i as a
288
304
  };
package/components/toast/index.cjs CHANGED
@@ -15,7 +15,7 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("lit"),r=require("lit/decorators.js"),v=require("../base-5nDSSNeT.cjs");require("../close-button-DrMdfzPW.cjs");const g=require("../focus-visible-D4BXb5RB.cjs"),d=require("@luzmo/icons"),h="@media (forced-colors: active){:host{--highcontrast-toast-border-color: ButtonText;border:var(--luzmo-toast-border-width, var(--toast-border-width)) solid var(--highcontrast-toast-border-color, transparent)}}:host{box-sizing:border-box;min-block-size:var(--luzmo-toast-block-size, var(--toast-block-size));max-inline-size:var(--luzmo-toast-max-inline-size, var(--toast-max-inline-size));border-radius:var(--luzmo-toast-corner-radius, var(--toast-corner-radius));font-size:var(--luzmo-toast-font-size, var(--toast-font-size));font-weight:var(--luzmo-toast-font-weight, var(--toast-font-weight));-webkit-font-smoothing:antialiased;background-color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));overflow-wrap:anywhere;flex-direction:row;align-items:stretch;padding-inline-start:var(--luzmo-toast-spacing-start-edge-to-text-and-icon, var(--toast-spacing-start-edge-to-text-and-icon));display:inline-flex}:host([variant=negative]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=info]){background-color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=info]),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=positive]){background-color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}:host([variant=positive]),:host([variant=positive]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}.type{flex-grow:0;flex-shrink:0;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-icon, var(--toast-spacing-top-edge-to-icon));margin-inline-start:0;margin-inline-end:var(--luzmo-toast-spacing-icon-to-text, var(--toast-spacing-icon-to-text))}.content,.type{color:var(--highcontrast-toast-text-and-icon-color, var(--luzmo-toast-text-and-icon-color, var(--toast-text-and-icon-color)))}.content{box-sizing:border-box;line-height:var(--luzmo-toast-line-height, var(--toast-line-height));text-align:start;flex:auto;padding-block-start:calc(var(--luzmo-toast-spacing-top-edge-to-text, var(--toast-spacing-top-edge-to-text)) - var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start)));padding-block-end:calc(var(--luzmo-toast-spacing-bottom-edge-to-text, var(--toast-spacing-bottom-edge-to-text)) - var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end)));padding-inline-start:0;padding-inline-end:var(--luzmo-toast-spacing-text-to-action-button-horizontal, var(--toast-spacing-text-to-action-button-horizontal));display:inline-block}.content:lang(ja),.content:lang(ko),.content:lang(zh){line-height:var(--luzmo-toast-line-height-cjk, var(--toast-line-height-cjk))}.buttons{border-inline-start-color:var(--luzmo-toast-divider-color, var(--toast-divider-color));flex:none;align-items:flex-start;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-divider, var(--toast-spacing-top-edge-to-divider));margin-block-end:var(--luzmo-toast-spacing-bottom-edge-to-divider, var(--toast-spacing-bottom-edge-to-divider));padding-inline-end:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button));display:flex}.buttons .luzmo-CloseButton{align-self:flex-start}.body{flex-wrap:wrap;flex:auto;align-self:center;align-items:center;padding-block-start:var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start));padding-block-end:var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end));display:flex}.body ::slotted([slot=action]){margin-inline-start:auto;margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body ::slotted([slot=action]:dir(rtl)),:host([dir=rtl]) .body ::slotted([slot=action]){margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body+.buttons{border-inline-start-style:solid;border-inline-start-width:1px;padding-inline-start:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button))}:host{--toast-background-color-default: rgb(80, 80, 80);--toast-font-weight: var(--luzmo-font-weight);--toast-font-size: var(--luzmo-font-size);--toast-corner-radius: var(--luzmo-border-radius);--toast-block-size: var(--luzmo-component-height);--toast-max-inline-size: 360px;--toast-border-width: var(--luzmo-border-width);--toast-line-height: var(--luzmo-line-height);--toast-line-height-cjk: 1.5;--toast-spacing-icon-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--toast-spacing-start-edge-to-text-and-icon: var(--luzmo-spacing-5);--toast-spacing-text-and-action-button-to-divider: var(--luzmo-spacing-5);--toast-spacing-top-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-bottom-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-text-to-action-button-horizontal: var(--luzmo-spacing-5);--toast-spacing-close-button: var(--luzmo-spacing-3);--toast-spacing-block-start: var(--luzmo-spacing-3);--toast-spacing-block-end: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-bottom-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-negative-background-color-default: var(--luzmo-negative-color);--toast-positive-background-color-default: var(--luzmo-positive-color);--toast-informative-background-color-default: var(--luzmo-informative-color);--toast-text-and-icon-color: rgb(255, 255, 255);--toast-divider-color: rgba(255, 255, 255, .2)}:host{--overlay-animation-distance: var(--spacing-100);--overlay-animation-duration: var(--animation-duration-100);opacity:0;pointer-events:none;transition:transform var(--overlay-animation-duration) ease-in-out,opacity var(--overlay-animation-duration) ease-in-out,visibility 0s linear var(--overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}:host([variant=error]),:host([variant=warning]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active),:host([variant=warning]),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}";var p=Object.defineProperty,m=Object.getOwnPropertyDescriptor,s=(l,t,o,i)=>{for(var a=i>1?void 0:i?m(t,o):t,c=l.length-1,u;c>=0;c--)(u=l[c])&&(a=(i?u(t,o,a):u(a))||a);return i&&a&&p(t,o,a),a};const b=["negative","positive","info"];class e extends g.FocusVisiblePolyfillMixin(v.LuzmoElement){constructor(){super(...arguments),this.open=!1,this._timeout=null,this._variant="",this.countdownStart=0,this.nextCount=-1,this.doCountdown=t=>{this.countdownStart||(this.countdownStart=performance.now()),t-this.countdownStart>this._timeout?(this.shouldClose(),this.countdownStart=0):this.countdown()},this.countdown=()=>{cancelAnimationFrame(this.nextCount),this.nextCount=requestAnimationFrame(this.doCountdown)},this.holdCountdown=()=>{this.stopCountdown(),this.addEventListener("focusout",this.resumeCountdown)},this.resumeCountdown=()=>{this.removeEventListener("focusout",this.holdCountdown),this.countdown()}}static get styles(){return[n.unsafeCSS(h)]}set timeout(t){const i=typeof t!==null&&t>0?Math.max(6e3,t):null,a=this.timeout;i&&this.countdownStart&&(this.countdownStart=performance.now()),this._timeout=i,this.requestUpdate("timeout",a)}get timeout(){return this._timeout}set variant(t){if(t===this.variant)return;const o=this.variant;b.includes(t)?(this.setAttribute("variant",t),this._variant=t):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",o)}get variant(){return this._variant}renderIcon(t,o){switch(t){case"info":return n.html`
18
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("lit"),r=require("lit/decorators.js"),v=require("../base-5nDSSNeT.cjs");require("../close-button-TZ08VFmi.cjs");const g=require("../focus-visible-D4BXb5RB.cjs"),d=require("@luzmo/icons"),h="@media (forced-colors: active){:host{--highcontrast-toast-border-color: ButtonText;border:var(--luzmo-toast-border-width, var(--toast-border-width)) solid var(--highcontrast-toast-border-color, transparent)}}:host{box-sizing:border-box;min-block-size:var(--luzmo-toast-block-size, var(--toast-block-size));max-inline-size:var(--luzmo-toast-max-inline-size, var(--toast-max-inline-size));border-radius:var(--luzmo-toast-corner-radius, var(--toast-corner-radius));font-size:var(--luzmo-toast-font-size, var(--toast-font-size));font-weight:var(--luzmo-toast-font-weight, var(--toast-font-weight));-webkit-font-smoothing:antialiased;background-color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));overflow-wrap:anywhere;flex-direction:row;align-items:stretch;padding-inline-start:var(--luzmo-toast-spacing-start-edge-to-text-and-icon, var(--toast-spacing-start-edge-to-text-and-icon));display:inline-flex}:host([variant=negative]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=info]){background-color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=info]),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=positive]){background-color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}:host([variant=positive]),:host([variant=positive]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}.type{flex-grow:0;flex-shrink:0;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-icon, var(--toast-spacing-top-edge-to-icon));margin-inline-start:0;margin-inline-end:var(--luzmo-toast-spacing-icon-to-text, var(--toast-spacing-icon-to-text))}.content,.type{color:var(--highcontrast-toast-text-and-icon-color, var(--luzmo-toast-text-and-icon-color, var(--toast-text-and-icon-color)))}.content{box-sizing:border-box;line-height:var(--luzmo-toast-line-height, var(--toast-line-height));text-align:start;flex:auto;padding-block-start:calc(var(--luzmo-toast-spacing-top-edge-to-text, var(--toast-spacing-top-edge-to-text)) - var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start)));padding-block-end:calc(var(--luzmo-toast-spacing-bottom-edge-to-text, var(--toast-spacing-bottom-edge-to-text)) - var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end)));padding-inline-start:0;padding-inline-end:var(--luzmo-toast-spacing-text-to-action-button-horizontal, var(--toast-spacing-text-to-action-button-horizontal));display:inline-block}.content:lang(ja),.content:lang(ko),.content:lang(zh){line-height:var(--luzmo-toast-line-height-cjk, var(--toast-line-height-cjk))}.buttons{border-inline-start-color:var(--luzmo-toast-divider-color, var(--toast-divider-color));flex:none;align-items:flex-start;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-divider, var(--toast-spacing-top-edge-to-divider));margin-block-end:var(--luzmo-toast-spacing-bottom-edge-to-divider, var(--toast-spacing-bottom-edge-to-divider));padding-inline-end:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button));display:flex}.buttons .luzmo-CloseButton{align-self:flex-start}.body{flex-wrap:wrap;flex:auto;align-self:center;align-items:center;padding-block-start:var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start));padding-block-end:var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end));display:flex}.body ::slotted([slot=action]){margin-inline-start:auto;margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body ::slotted([slot=action]:dir(rtl)),:host([dir=rtl]) .body ::slotted([slot=action]){margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body+.buttons{border-inline-start-style:solid;border-inline-start-width:1px;padding-inline-start:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button))}:host{--toast-background-color-default: rgb(80, 80, 80);--toast-font-weight: var(--luzmo-font-weight);--toast-font-size: var(--luzmo-font-size);--toast-corner-radius: var(--luzmo-border-radius);--toast-block-size: var(--luzmo-component-height);--toast-max-inline-size: 360px;--toast-border-width: var(--luzmo-border-width);--toast-line-height: var(--luzmo-line-height);--toast-line-height-cjk: 1.5;--toast-spacing-icon-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--toast-spacing-start-edge-to-text-and-icon: var(--luzmo-spacing-5);--toast-spacing-text-and-action-button-to-divider: var(--luzmo-spacing-5);--toast-spacing-top-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-bottom-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-text-to-action-button-horizontal: var(--luzmo-spacing-5);--toast-spacing-close-button: var(--luzmo-spacing-3);--toast-spacing-block-start: var(--luzmo-spacing-3);--toast-spacing-block-end: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-bottom-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-negative-background-color-default: var(--luzmo-negative-color);--toast-positive-background-color-default: var(--luzmo-positive-color);--toast-informative-background-color-default: var(--luzmo-informative-color);--toast-text-and-icon-color: rgb(255, 255, 255);--toast-divider-color: rgba(255, 255, 255, .2)}:host{--overlay-animation-distance: var(--spacing-100);--overlay-animation-duration: var(--animation-duration-100);opacity:0;pointer-events:none;transition:transform var(--overlay-animation-duration) ease-in-out,opacity var(--overlay-animation-duration) ease-in-out,visibility 0s linear var(--overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}:host([variant=error]),:host([variant=warning]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active),:host([variant=warning]),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}";var p=Object.defineProperty,m=Object.getOwnPropertyDescriptor,s=(l,t,o,i)=>{for(var a=i>1?void 0:i?m(t,o):t,c=l.length-1,u;c>=0;c--)(u=l[c])&&(a=(i?u(t,o,a):u(a))||a);return i&&a&&p(t,o,a),a};const b=["negative","positive","info"];class e extends g.FocusVisiblePolyfillMixin(v.LuzmoElement){constructor(){super(...arguments),this.open=!1,this._timeout=null,this._variant="",this.countdownStart=0,this.nextCount=-1,this.doCountdown=t=>{this.countdownStart||(this.countdownStart=performance.now()),t-this.countdownStart>this._timeout?(this.shouldClose(),this.countdownStart=0):this.countdown()},this.countdown=()=>{cancelAnimationFrame(this.nextCount),this.nextCount=requestAnimationFrame(this.doCountdown)},this.holdCountdown=()=>{this.stopCountdown(),this.addEventListener("focusout",this.resumeCountdown)},this.resumeCountdown=()=>{this.removeEventListener("focusout",this.holdCountdown),this.countdown()}}static get styles(){return[n.unsafeCSS(h)]}set timeout(t){const i=typeof t!==null&&t>0?Math.max(6e3,t):null,a=this.timeout;i&&this.countdownStart&&(this.countdownStart=performance.now()),this._timeout=i,this.requestUpdate("timeout",a)}get timeout(){return this._timeout}set variant(t){if(t===this.variant)return;const o=this.variant;b.includes(t)?(this.setAttribute("variant",t),this._variant=t):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",o)}get variant(){return this._variant}renderIcon(t,o){switch(t){case"info":return n.html`
19
19
  <luzmo-icon
20
20
  .icon=${d.luzmoInfoCircleOutline}
21
21
  label=${o||"Information"}
package/components/toast/index.js CHANGED
@@ -18,7 +18,7 @@
18
18
  import { unsafeCSS as m, html as i } from "lit";
19
19
  import { property as l } from "lit/decorators.js";
20
20
  import { a as g } from "../base-CdYjmV_8.js";
21
- import "../close-button-BiJwFZyW.js";
21
+ import "../close-button-D9qjjy2w.js";
22
22
  import { F as v } from "../focus-visible-BvScGDCE.js";
23
23
  import { luzmoCheckCircleOutline as p, luzmoAlertOutline as z, luzmoInfoCircleOutline as b } from "@luzmo/icons";
24
24
  const d = () => {
package/components/utils.cjs CHANGED
@@ -15,4 +15,4 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./base-5nDSSNeT.cjs"),o=require("./focus-visible-D4BXb5RB.cjs"),n=require("./focusable-CbVKgGfS.cjs"),i=require("./platform-BJnOJJag.cjs"),s=require("./sized-mixin-DcvJLFeo.cjs"),r=require("./streaming-listener-CfUtuELp.cjs");exports.LuzmoElement=e.LuzmoElement;exports.LuzmoMixin=e.LuzmoMixin;exports.FocusVisiblePolyfillMixin=o.FocusVisiblePolyfillMixin;exports.Focusable=n.Focusable;exports.isAndroid=i.isAndroid;exports.isAppleDevice=i.isAppleDevice;exports.isChrome=i.isChrome;exports.isFirefox=i.isFirefox;exports.isIOS=i.isIOS;exports.isIPad=i.isIPad;exports.isIPhone=i.isIPhone;exports.isMac=i.isMac;exports.isSeamonkey=i.isSeamonkey;exports.isWebKit=i.isWebKit;exports.ElementSizes=s.ElementSizes;exports.SizedMixin=s.SizedMixin;exports.streamingListener=r.streamingListener;
18
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./base-5nDSSNeT.cjs"),o=require("./focus-visible-D4BXb5RB.cjs"),n=require("./focusable-CbVKgGfS.cjs"),i=require("./platform-BJnOJJag.cjs"),s=require("./sized-mixin-DcvJLFeo.cjs"),r=require("./streaming-listener-D9Wc7skA.cjs");exports.LuzmoElement=e.LuzmoElement;exports.LuzmoMixin=e.LuzmoMixin;exports.FocusVisiblePolyfillMixin=o.FocusVisiblePolyfillMixin;exports.Focusable=n.Focusable;exports.isAndroid=i.isAndroid;exports.isAppleDevice=i.isAppleDevice;exports.isChrome=i.isChrome;exports.isFirefox=i.isFirefox;exports.isIOS=i.isIOS;exports.isIPad=i.isIPad;exports.isIPhone=i.isIPhone;exports.isMac=i.isMac;exports.isSeamonkey=i.isSeamonkey;exports.isWebKit=i.isWebKit;exports.ElementSizes=s.ElementSizes;exports.SizedMixin=s.SizedMixin;exports.streamingListener=r.streamingListener;
package/components/utils.js CHANGED
@@ -20,7 +20,7 @@ import { F as r } from "./focus-visible-BvScGDCE.js";
20
20
  import { F as t } from "./focusable-BjvsvVam.js";
21
21
  import { j as x, d as f, e as l, h as p, c, b as d, a as F, i as S, g as b, f as u } from "./platform-CqwNrovd.js";
22
22
  import { E as L, S as M } from "./sized-mixin-cJbo3PKR.js";
23
- import { s as E } from "./streaming-listener-BgU36S1Z.js";
23
+ import { s as E } from "./streaming-listener-BlWm-XZU.js";
24
24
  export {
25
25
  L as ElementSizes,
26
26
  r as FocusVisiblePolyfillMixin,