@luzmo/lucero 1.0.1-alpha.3 → 1.0.1-alpha.30

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 (232) hide show
  1. package/components/accordion/index.cjs +6 -6
  2. package/components/accordion/index.js +13 -12
  3. package/components/action-bar/index.cjs +4 -4
  4. package/components/action-bar/index.js +11 -9
  5. package/components/action-button/index.cjs +3 -3
  6. package/components/action-button/index.js +6 -5
  7. package/components/action-group/index.cjs +1 -1
  8. package/components/action-group/index.js +1 -1
  9. package/components/{action-group-DBImibFn.js → action-group-Bwt9w8Vh.js} +10 -9
  10. package/components/action-group-D917z7XF.cjs +20 -0
  11. package/components/action-menu/index.cjs +9 -9
  12. package/components/action-menu/index.js +9 -9
  13. package/components/avatar/index.cjs +3 -3
  14. package/components/avatar/index.js +6 -6
  15. package/components/base-5nDSSNeT.cjs +18 -0
  16. package/components/base-CdYjmV_8.js +96 -0
  17. package/components/button/button-base.d.ts +16 -0
  18. package/components/button/button.d.ts +38 -2
  19. package/components/button/index.cjs +2 -2
  20. package/components/button/index.js +34 -29
  21. package/components/{button-base-DbkDzb71.js → button-base-B5uul3tZ.js} +54 -39
  22. package/components/button-base-C7or8-FB.cjs +25 -0
  23. package/components/button-group/index.cjs +1 -1
  24. package/components/button-group/index.js +10 -8
  25. package/components/calendar/index.cjs +96 -1
  26. package/components/calendar/index.js +538 -6
  27. package/components/checkbox/index.cjs +4 -4
  28. package/components/checkbox/index.js +6 -4
  29. package/components/{checkbox-mixin-Do7EgtpQ.js → checkbox-mixin-DUbGDm7f.js} +9 -9
  30. package/components/{checkbox-mixin-BDN0dBtS.cjs → checkbox-mixin-DhN8CIXY.cjs} +3 -3
  31. package/components/{clear-button-DoeRUWQ3.js → clear-button-BFtJVPzm.js} +14 -13
  32. package/components/clear-button-_a8GjtJC.cjs +18 -0
  33. package/components/{close-button-BWXdHSx3.js → close-button-D9qjjy2w.js} +13 -12
  34. package/components/close-button-TZ08VFmi.cjs +18 -0
  35. package/components/color-area/index.cjs +5 -5
  36. package/components/color-area/index.js +11 -10
  37. package/components/color-controller-7sNUf7SP.js +386 -0
  38. package/components/color-controller-ChN-A9Ft.cjs +18 -0
  39. package/components/color-field/color-field.d.ts +8 -0
  40. package/components/color-field/index.cjs +4 -4
  41. package/components/color-field/index.js +37 -24
  42. package/components/color-handle/index.cjs +2 -2
  43. package/components/color-handle/index.js +7 -5
  44. package/components/color-loupe/index.cjs +1 -1
  45. package/components/color-loupe/index.js +1 -1
  46. package/components/color-loupe-CIEFp7ln.cjs +56 -0
  47. package/components/{color-loupe-CmMsXbjT.js → color-loupe-CLPX6xVb.js} +6 -4
  48. package/components/color-menu/index.cjs +8 -8
  49. package/components/color-menu/index.js +45 -45
  50. package/components/color-palette/color-palette.d.ts +38 -3
  51. package/components/color-palette/index.cjs +1 -1
  52. package/components/color-palette/index.js +53 -39
  53. package/components/color-palette-group/color-palette-group.d.ts +79 -0
  54. package/components/color-palette-group/index.cjs +28 -0
  55. package/components/color-palette-group/index.d.ts +7 -0
  56. package/components/color-palette-group/index.js +206 -0
  57. package/components/color-picker/color-picker.d.ts +31 -2
  58. package/components/color-picker/index.cjs +6 -5
  59. package/components/color-picker/index.js +15 -11
  60. package/components/color-slider/index.cjs +40 -1
  61. package/components/color-slider/index.js +452 -6
  62. package/components/date-time-picker/index.cjs +16 -16
  63. package/components/date-time-picker/index.js +104 -105
  64. package/components/{dependency-manger-CEXvGQUV.js → dependency-manger-CO-VPlqq.js} +4 -4
  65. package/components/{dependency-manger-C5HCkMMB.cjs → dependency-manger-uthev62E.cjs} +1 -1
  66. package/components/divider/index.cjs +1 -1
  67. package/components/divider/index.js +10 -8
  68. package/components/field-group/index.cjs +1 -1
  69. package/components/field-group/index.js +1 -1
  70. package/components/field-group-BYHNJmv0.cjs +23 -0
  71. package/components/{field-group-DXfBWrkO.js → field-group-CHmw159R.js} +7 -5
  72. package/components/field-label/index.cjs +1 -1
  73. package/components/field-label/index.js +1 -1
  74. package/components/{field-label-CZ2zzChK.js → field-label-Cy3xMWZ-.js} +9 -8
  75. package/components/field-label-DZoeqJJX.cjs +25 -0
  76. package/components/{focus-visible-DBlJGoEW.js → focus-visible-BvScGDCE.js} +20 -20
  77. package/components/focus-visible-D4BXb5RB.cjs +18 -0
  78. package/components/{focusable-BxtpnzWp.js → focusable-BjvsvVam.js} +3 -2
  79. package/components/focusable-CbVKgGfS.cjs +18 -0
  80. package/components/icon/index.cjs +1 -1
  81. package/components/icon/index.js +22 -20
  82. package/components/index.cjs +1 -1
  83. package/components/index.js +139 -137
  84. package/components/infield-button/index.cjs +2 -2
  85. package/components/infield-button/index.js +4 -3
  86. package/components/label/index.cjs +1 -1
  87. package/components/label/index.js +6 -4
  88. package/components/{language-resolution-8yZa5r_P.js → language-resolution-B-wjV5bb.js} +9 -8
  89. package/components/{directive-C7oCP5Bh.cjs → language-resolution-EUER43cg.cjs} +1 -5
  90. package/components/like-anchor-B2EqJPdw.cjs +32 -0
  91. package/components/{like-anchor-Bvn_vLQ8.js → like-anchor-CgqCU210.js} +23 -22
  92. package/components/{manage-help-text-DhgARkZX.cjs → manage-help-text-Bat9yGvF.cjs} +3 -3
  93. package/components/{manage-help-text-syYnjKGL.js → manage-help-text-C9sCHK3R.js} +8 -8
  94. package/components/menu/index.cjs +38 -13
  95. package/components/menu/index.js +137 -104
  96. package/components/menu/menu-item.d.ts +8 -1
  97. package/components/multi-language-field/index.cjs +2 -2
  98. package/components/multi-language-field/index.js +8 -6
  99. package/components/number-field/index.cjs +6 -6
  100. package/components/number-field/index.js +33 -34
  101. package/components/observe-slot-presence-CNltc0C0.cjs +18 -0
  102. package/components/{observe-slot-presence-CmVi0zTc.js → observe-slot-presence-DFi6GE3H.js} +1 -1
  103. package/components/observe-slot-text-CBMHpuIK.cjs +18 -0
  104. package/components/{observe-slot-text-BPfIQQtz.js → observe-slot-text-DorVpCL4.js} +14 -15
  105. package/components/options/index.cjs +26 -58
  106. package/components/options/index.js +205 -849
  107. package/components/overlay/index.cjs +6 -6
  108. package/components/overlay/index.js +30 -31
  109. package/components/overlay-DpWon1Rp.js +1736 -0
  110. package/components/overlay-nUwFClQq.cjs +47 -0
  111. package/components/{pending-state-CaH1si5b.cjs → pending-state-DQctFHI8.cjs} +2 -2
  112. package/components/{pending-state-DTX7ggyF.js → pending-state-Dx1u3EXA.js} +2 -2
  113. package/components/picker/index.cjs +1 -1
  114. package/components/picker/index.js +2 -2
  115. package/components/{picker-BmoXv1jt.js → picker-Cm6_didQ.js} +44 -44
  116. package/components/picker-DxYgh4LR.cjs +123 -0
  117. package/components/picker-button/index.cjs +4 -4
  118. package/components/picker-button/index.js +7 -6
  119. package/components/{platform-BiXhwqk3.cjs → platform-BJnOJJag.cjs} +1 -1
  120. package/components/{platform-BM-uMWpX.js → platform-CqwNrovd.js} +12 -12
  121. package/components/popover/index.cjs +1 -1
  122. package/components/popover/index.js +1 -1
  123. package/components/popover-lcZnODPK.cjs +30 -0
  124. package/components/{popover-DjX0aAnY.js → popover-ucIgjbQs.js} +8 -7
  125. package/components/progress-circle/index.cjs +1 -1
  126. package/components/progress-circle/index.js +1 -1
  127. package/components/{progress-circle-DXH9z8-6.js → progress-circle-D5J0ZwY0.js} +8 -7
  128. package/components/progress-circle-DgMbqrzG.cjs +33 -0
  129. package/components/radio/index.cjs +2 -2
  130. package/components/radio/index.js +11 -10
  131. package/components/search/index.cjs +6 -6
  132. package/components/search/index.js +5 -5
  133. package/components/select/index.cjs +43 -43
  134. package/components/select/index.js +106 -91
  135. package/components/select/select.d.ts +1 -1
  136. package/components/{base-BjTwmyRF.cjs → sized-mixin-DcvJLFeo.cjs} +1 -5
  137. package/components/{sized-mixin-D4ACoVUr.js → sized-mixin-cJbo3PKR.js} +5 -5
  138. package/components/slider/index.cjs +1 -1
  139. package/components/slider/index.js +48 -1101
  140. package/components/{strategies-9indNIEb.js → strategies-Bk97oVn1.js} +15 -50
  141. package/components/strategies-CNgBb6dM.cjs +18 -0
  142. package/components/{streaming-listener-CP-JE6Fa.js → streaming-listener-BlWm-XZU.js} +5 -6
  143. package/components/streaming-listener-D9Wc7skA.cjs +18 -0
  144. package/components/swatch/index.cjs +7 -7
  145. package/components/swatch/index.js +17 -16
  146. package/components/switch/index.cjs +2 -2
  147. package/components/switch/index.js +5 -4
  148. package/components/tabs/index.cjs +16 -24
  149. package/components/tabs/index.js +93 -161
  150. package/components/tags/index.cjs +4 -4
  151. package/components/tags/index.js +14 -13
  152. package/components/text-field/index.cjs +3 -3
  153. package/components/text-field/index.js +12 -10
  154. package/components/text-field/text-field.d.ts +1 -0
  155. package/components/{text-field-BIADXoLC.js → text-field-BTEpwGFu.js} +73 -99
  156. package/components/text-field-JMrsh-zo.cjs +81 -0
  157. package/components/{text-field.module-ColtFhf_.js → text-field.module-C2KVUJcX.js} +1 -1
  158. package/components/{text-field.module-p_VF2tC_.cjs → text-field.module-DXhFA9G-.cjs} +1 -1
  159. package/components/toast/index.cjs +11 -11
  160. package/components/toast/index.js +10 -8
  161. package/components/tooltip/index.cjs +4 -4
  162. package/components/tooltip/index.js +60 -36
  163. package/components/tooltip/tooltip.d.ts +12 -1
  164. package/components/unit-input/index.cjs +6 -6
  165. package/components/unit-input/index.js +10 -9
  166. package/components/utils.cjs +1 -1
  167. package/components/utils.js +6 -6
  168. package/custom-elements.json +1 -1
  169. package/index.d.ts +1 -0
  170. package/package.json +67 -1
  171. package/components/NumberFormatter-DewVDY5w.cjs +0 -18
  172. package/components/NumberFormatter-DgOUVrge.js +0 -136
  173. package/components/NumberParser-Dik4a0h-.cjs +0 -18
  174. package/components/NumberParser-ci9J5EKv.js +0 -173
  175. package/components/action-group-DJGMcRHb.cjs +0 -20
  176. package/components/async-directive-BX1T1e1_.cjs +0 -22
  177. package/components/async-directive-BfcqVjDp.js +0 -82
  178. package/components/base-CBCg3yyw.cjs +0 -40
  179. package/components/base-D76d76ww.js +0 -26
  180. package/components/base-WsynuqaS.js +0 -677
  181. package/components/button-base-XgPLmwP-.cjs +0 -25
  182. package/components/class-map-Di1D_rCm.cjs +0 -22
  183. package/components/class-map-NbVXqBU0.js +0 -51
  184. package/components/clear-button-Qi1pMA5S.cjs +0 -18
  185. package/components/close-button-BFMBEw3q.cjs +0 -18
  186. package/components/color-controller-DTp1juRz.js +0 -3198
  187. package/components/color-controller-_ZwyhvaU.cjs +0 -18
  188. package/components/color-loupe-CaA_Lfkk.cjs +0 -56
  189. package/components/directive-helpers-Cm6gitnu.js +0 -62
  190. package/components/directive-helpers-DyIRTWwA.cjs +0 -22
  191. package/components/directive-oAbCiebi.js +0 -44
  192. package/components/field-group-DkGst3r5.cjs +0 -23
  193. package/components/field-label-mO1AkUgR.cjs +0 -25
  194. package/components/flow-D-0MTYCm.js +0 -527
  195. package/components/flow-DM3dNAKs.cjs +0 -30
  196. package/components/focus-visible-B0P9aY_G.cjs +0 -18
  197. package/components/focusable-EbipgXRh.cjs +0 -18
  198. package/components/if-defined-C9YGdo33.cjs +0 -22
  199. package/components/if-defined-DOaE2coe.js +0 -27
  200. package/components/index-A-yOTB_d.js +0 -1490
  201. package/components/index-BLWuwZXx.cjs +0 -113
  202. package/components/index-BwxgAdzi.cjs +0 -57
  203. package/components/index-HjQa8tew.js +0 -1174
  204. package/components/language-resolution-DJzmyzZq.cjs +0 -18
  205. package/components/like-anchor-sod1C1fR.cjs +0 -32
  206. package/components/luzmo-icons-DbwDQtuO.js +0 -229
  207. package/components/luzmo-icons-DletXGWU.cjs +0 -29
  208. package/components/mutation-controller-DH7YOCyj.js +0 -52
  209. package/components/mutation-controller-DkOMCW-c.cjs +0 -22
  210. package/components/observe-slot-presence-bc9chhsi.cjs +0 -18
  211. package/components/observe-slot-text-Ceb7SvYT.cjs +0 -18
  212. package/components/overlay-Cig9r6uU.js +0 -2747
  213. package/components/overlay-KSKMzzkh.cjs +0 -47
  214. package/components/picker-DWsBWdPN.cjs +0 -123
  215. package/components/popover-KFfO0IYL.cjs +0 -30
  216. package/components/progress-circle-BvRJNuNo.cjs +0 -33
  217. package/components/query-BL-TJj7K.cjs +0 -22
  218. package/components/query-D_KR_GUc.js +0 -51
  219. package/components/query-assigned-elements-DjfhL1cl.js +0 -36
  220. package/components/query-assigned-elements-DsKsfk7G.cjs +0 -22
  221. package/components/query-assigned-nodes-BcKWmGzy.cjs +0 -22
  222. package/components/query-assigned-nodes-C76XVPWY.js +0 -36
  223. package/components/sized-mixin-CPxE5C96.cjs +0 -18
  224. package/components/state-D8JEtYqe.cjs +0 -22
  225. package/components/state-Deh-vKYE.js +0 -29
  226. package/components/strategies-BACP6MhR.cjs +0 -18
  227. package/components/streaming-listener-B00MvALi.cjs +0 -18
  228. package/components/style-map-CeilmSgs.cjs +0 -22
  229. package/components/style-map-IgqIKvlE.js +0 -53
  230. package/components/text-field-D5d_Gt0t.cjs +0 -85
  231. package/components/when-CDK1Tt5Y.js +0 -28
  232. package/components/when-CDZyJPvd.cjs +0 -22
@@ -2,7 +2,7 @@ import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
2
2
  import { PendingStateController } from '../../utils/reactive-controllers/pending-state';
3
3
  import { LuzmoButtonBase } from './button-base';
4
4
  export type ButtonStaticColors = 'white' | 'black';
5
- export type ButtonVariants = 'primary' | 'secondary' | 'negative' | ButtonStaticColors;
5
+ export type ButtonVariants = 'primary' | 'secondary' | 'negative' | 'positive' | ButtonStaticColors;
6
6
  export declare const validVariants: string[];
7
7
  export declare const validStaticColors: string[];
8
8
  export type ButtonTreatments = 'fill' | 'outline';
@@ -15,11 +15,30 @@ declare const LuzmoButton_base: typeof LuzmoButtonBase & {
15
15
  *
16
16
  * @slot - text label of the Button
17
17
  * @slot icon - The icon to use for Button
18
+ * @fires change - Announces that the `value` of the element has changed
19
+ * @attr size - The size of the select: `s`, `m`, `l` or `xl`
20
+ * @attr disabled - Whether the button is disabled.
18
21
  */
19
22
  export declare class LuzmoButton extends LuzmoButton_base {
23
+ /**
24
+ * @internal
25
+ */
20
26
  static get styles(): CSSResultArray;
27
+ /**
28
+ * @attr pending-label - The label to display when the button is in a pending state.
29
+ * @default 'Pending'
30
+ */
21
31
  pendingLabel: string;
32
+ /**
33
+ * @attr pending - Whether the button should be displayed in a pending state.
34
+ * @default false
35
+ * Use this property to set the button into a pending state
36
+ */
22
37
  pending: boolean;
38
+ /**
39
+ * @internal
40
+ * The controller that manages the pending state of the button.
41
+ */
23
42
  pendingStateController: PendingStateController<this>;
24
43
  /**
25
44
  * Initializes the `PendingStateController` for the Button component.
@@ -28,31 +47,48 @@ export declare class LuzmoButton extends LuzmoButton_base {
28
47
  constructor();
29
48
  click(): void;
30
49
  /**
50
+ * @attr variant - The visual variant to apply to this button.
31
51
  * The visual variant to apply to this button.
32
52
  */
33
53
  get variant(): ButtonVariants;
34
54
  set variant(variant: ButtonVariants);
55
+ /**
56
+ * @internal
57
+ * The visual variant to apply to this button.
58
+ */
35
59
  private _variant;
36
60
  /**
61
+ * @attr static-color - The static color variant to use for this button.
37
62
  * The static color variant to use for this button.
38
63
  */
39
64
  staticColor?: 'black' | 'white';
40
65
  /**
66
+ * @attr treatment - The visual treatment to apply to this button.
67
+ * @default 'fill'
41
68
  * The visual treatment to apply to this button.
42
69
  */
43
70
  treatment: ButtonTreatments;
44
71
  /**
72
+ * @attr quiet - Style this button to be less obvious
73
+ * @default false
45
74
  * Style this button to be less obvious
46
75
  */
47
76
  set quiet(quiet: boolean);
77
+ get quiet(): boolean;
48
78
  /**
79
+ * @internal
80
+ * Whether the button should be displayed in a quiet state
81
+ */
82
+ private _quiet;
83
+ /**
84
+ * @attr no-wrap - Disables text wrapping within the button component's label.
85
+ * @default false
49
86
  * Disables text wrapping within the button component's label.
50
87
  * Please note that this option is not a part of the design specification
51
88
  * and should be used carefully, with consideration of this overflow behavior
52
89
  * and the readability of the button's content.
53
90
  */
54
91
  noWrap: boolean;
55
- get quiet(): boolean;
56
92
  protected firstUpdated(changes: PropertyValues<this>): void;
57
93
  protected renderButton(): TemplateResult;
58
94
  }
@@ -15,6 +15,6 @@
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 t=require("../base-CBCg3yyw.cjs"),s=require("../pending-state-CaH1si5b.cjs"),g=require("../sized-mixin-CPxE5C96.cjs"),v=require("../button-base-XgPLmwP-.cjs"),d=require("../clear-button-Qi1pMA5S.cjs"),i=require("../close-button-BFMBEw3q.cjs"),h=':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family, var(--luzmo-font-family));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, 1.3);text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible}:host(:focus){outline:none}:host .is-disabled,:host([disabled]){cursor:default}:host:after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, 2px)));transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out,margin var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out;display:block;inset-block:0;inset-inline:0}:host(:focus-visible):after{margin:calc(var(--luzmo-focus-indicator-gap, 2px) * -2)}#label{place-self:center}#label[hidden]{display:none}:host{--luzmo-progress-circle-position: absolute;border-radius:var(--luzmo-button-border-radius, var(--button-border-radius));border-width:var(--luzmo-button-border-width, var(--button-border-width));font-size:var(--luzmo-button-font-size, var(--button-font-size));font-weight:var(--luzmo-button-font-weight, 600);gap:var(--luzmo-button-padding-label-to-icon, var(--button-padding-label-to-icon));max-inline-size:none;max-inline-size:var(--luzmo-button-max-inline-size, none);min-inline-size:var(--luzmo-button-min-width, var(--button-min-width));min-block-size:var(--luzmo-button-height, var(--button-height));padding-block:0;padding-inline:var(--luzmo-button-edge-to-text, var(--button-edge-to-text));color:inherit;margin-block:0;margin-block:var(--luzmo-button-margin-block, 0);border-style:solid;margin-inline-start:var(--luzmo-button-margin-left, 0);margin-inline-end:var(--luzmo-button-margin-right, 0);position:relative}:host(:is(:active,[active])){box-shadow:none}::slotted([slot=icon]){--_icon-size-difference: max( 0px, var(--button-intended-icon-size) - var( --icon-size, var(--button-intended-icon-size) ) );color:inherit;flex-shrink:0;align-self:flex-start;margin-block-start:var(--luzmo-button-icon-margin-block-start, max(0px, var(--luzmo-button-top-to-icon, var(--button-top-to-icon)) - var(--luzmo-button-border-width, var(--button-border-width)) + var(--_icon-size-difference, 0px) / 2));margin-inline-start:calc(var(--luzmo-button-edge-to-visual, var(--button-edge-to-visual)) - var(--luzmo-button-edge-to-text, var(--button-edge-to-text)))}:host([icon-only]){min-inline-size:unset;padding:calc(var(--luzmo-button-edge-to-visual-only, var(--button-edge-to-visual-only)) - var(--luzmo-button-border-width, var(--button-border-width)));border-radius:50%}:host([icon-only]) ::slotted([slot=icon]){align-self:center;margin-block-start:0;margin-inline-start:0}:host([icon-only]):after{border-radius:50%}#label{line-height:var(--luzmo-button-line-height, var(--button-line-height));text-align:center;text-align:var(--luzmo-button-text-align, center);align-self:start;padding-block-start:calc(var(--luzmo-button-top-to-text, var(--button-top-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)));padding-block-end:calc(var(--luzmo-button-bottom-to-text, var(--button-bottom-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)))}[name=icon]+#label{text-align:start;text-align:var(--luzmo-button-text-align-with-icon, start)}:host([focused]):after,:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))}:host{transition:border-color var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-button-focus-ring-gap, var(--button-focus-ring-gap)) + var(--luzmo-button-border-width, var(--button-border-width))) * -1);border-radius:var(--luzmo-button-focus-ring-border-radius, calc(var(--luzmo-button-border-radius, var(--button-border-radius)) + var(--luzmo-focus-indicator-gap, 2px)));transition:box-shadow var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))))}:host{background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)));transition:border .13s linear,color .13s linear,background-color .13s linear;transition:border var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,background-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear}@media (hover: hover){:host(:hover){box-shadow:none;background-color:var(--highcontrast-button-background-color-hover, var(--luzmo-button-background-color-hover, var(--button-background-color-hover)));border-color:var(--highcontrast-button-border-color-hover, var(--luzmo-button-border-color-hover, var(--button-border-color-hover)));color:var(--highcontrast-button-content-color-hover, var(--luzmo-button-content-color-hover, var(--button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-button-background-color-focus, var(--luzmo-button-background-color-focus, var(--button-background-color-focus)));border-color:var(--highcontrast-button-border-color-focus, var(--luzmo-button-border-color-focus, var(--button-border-color-focus)));color:var(--highcontrast-button-content-color-focus, var(--luzmo-button-content-color-focus, var(--button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-button-background-color-down, var(--luzmo-button-background-color-down, var(--button-background-color-down)));border-color:var(--highcontrast-button-border-color-down, var(--luzmo-button-border-color-down, var(--button-border-color-down)));color:var(--highcontrast-button-content-color-down, var(--luzmo-button-content-color-down, var(--button-content-color-down)))}:host .is-disabled,:host([pending]),:host([disabled]){background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}#label,::slotted([slot=icon]){visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}.luzmo-progress-circle{visibility:hidden;opacity:0;transition:opacity .13s ease-in-out,visibility 0s linear .13s;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out,visibility 0s linear var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s))}:host([pending]){cursor:default}:host([pending]) .luzmo-progress-circle{visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([static-color=white]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}:host([static-color=white][selected]){--button-content-color-default: var( --luzmo-button-static-content-color, rgba(255, 255, 255, .9) );--button-content-color-hover: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-down: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-focus: var( --luzmo-button-static-content-color, rgb(255, 255, 255) )}:host([static-color=black]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}@media (forced-colors: active){:host{--highcontrast-button-content-color-default: ButtonText;--highcontrast-button-content-color-hover: ButtonText;--highcontrast-button-content-color-focus: ButtonText;--highcontrast-button-content-color-down: ButtonText;--highcontrast-button-border-color-default: ButtonBorder;--highcontrast-button-border-color-hover: ButtonBorder;--highcontrast-button-border-color-focus: ButtonBorder;--highcontrast-button-border-color-down: ButtonBorder;--highcontrast-button-background-color-default: ButtonFace;--highcontrast-button-background-color-hover: ButtonFace;--highcontrast-button-background-color-down: ButtonFace;--highcontrast-button-background-color-focus: ButtonFace;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-content-color-disabled: GrayText;--highcontrast-button-border-color-disabled: GrayText;--luzmo-progress-circle-track-border-color: ButtonText;--luzmo-progress-circle-track-border-color-over-background: ButtonText;--luzmo-progress-circle-thickness: 3px;--luzmo-button-animation-duration: 0s}#label{forced-color-adjust:none}:host(:focus-visible):after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) ButtonText}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default: ButtonText;--highcontrast-button-content-color-default: ButtonFace;--highcontrast-button-content-color-hover: HighlightText;--highcontrast-button-content-color-down: HighlightText;--highcontrast-button-content-color-focus: HighlightText;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-background-color-hover: Highlight;--highcontrast-button-background-color-down: Highlight;--highcontrast-button-background-color-focus: Highlight;--highcontrast-button-border-color-default: ButtonText;--highcontrast-button-border-color-hover: Highlight;--highcontrast-button-border-color-focus: Highlight;--highcontrast-button-border-color-down: Highlight}}:host{--button-animation-duration: var(--luzmo-animation-duration);--button-border-radius: var(--luzmo-border-radius);--button-border-width: var(--luzmo-border-width);--button-line-height: 1.2;--button-focus-ring-gap: 2px;--button-focus-ring-thickness: 2px;--button-focus-indicator-color: var(--luzmo-primary);--button-intended-icon-size: 18px;--button-background-color-default: var(--luzmo-background-color);--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-active);--button-background-color-focus: var(--luzmo-primary);--button-border-color-default: var(--luzmlo-border-color-full);--button-border-color-hover: var(--luzmo-border-color-full-hover);--button-border-color-down: var(--luzmo-border-color-full-down);--button-border-color-focus: var(--luzmo-border-color-full-focus);--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-disabled-color);--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=accent]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=accent][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=negative]){--button-background-color-default: var(--luzmo-negative-color);--button-background-color-hover: var(--luzmo-negative-color-hover);--button-background-color-down: var(--luzmo-negative-color-down);--button-background-color-focus: var(--luzmo-negative-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=negative][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-negative-color);--button-border-color-hover: var(--luzmo-negative-color-hover);--button-border-color-down: var(--luzmo-negative-color-down);--button-border-color-focus: var(--luzmo-negative-color-focus);--button-content-color-default: var(--luzmo-negative-color);--button-content-color-hover: var(--luzmo-negative-color-down);--button-content-color-down: var(--luzmo-negative-color-down);--button-content-color-focus: var(--luzmo-negative-color-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=primary]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=primary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=secondary]){--button-background-color-default: var(--luzmo-secondary);--button-background-color-hover: var(--luzmo-secondary-hover);--button-background-color-down: var(--luzmo-secondary-down);--button-background-color-focus: var(--luzmo-secondary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-secondary);--button-border-color-hover: var(--luzmo-secondary-hover);--button-border-color-down: var(--luzmo-secondary-down);--button-border-color-focus: var(--luzmo-secondary-focus);--button-content-color-default: var(--luzmo-secondary);--button-content-color-hover: var(--luzmo-secondary-down);--button-content-color-down: var(--luzmo-secondary-down);--button-content-color-focus: var(--luzmo-secondary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-background-color-disabled: transparent;--button-border-color-disabled: transparent}:host([selected]){--button-background-color-default: var(--luzmo-selected-color);--button-background-color-hover: var(--luzmo-selected-color-hover);--button-background-color-down: var(--luzmo-selected-color-down);--button-background-color-focus: var(--luzmo-selected-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent}:host([selected][emphasized]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus)}:host([static-color=black][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white]){--button-background-color-default: rgba(255, 255, 255 .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .9);--button-border-color-hover: rgb(255, 255, 255);--button-border-color-down: rgb(255, 255, 255);--button-border-color-focus: rgb(255, 255, 255);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][selected]){--button-background-color-default: rgba(255, 255, 255, .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-static-white-content-color-default: rgb(0, 0, 0);--button-static-white-content-color-hover: rgb(0, 0, 0);--button-static-white-content-color-down: rgb(0, 0, 0);--button-static-white-content-color-focus: rgb(0, 0, 0);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent}:host([static-color=white][variant=secondary]){--button-background-color-default: rgba(255, 255, 255, .1);--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .25);--button-border-color-hover: rgba(255, 255, 255, .4);--button-border-color-down: rgba(255, 255, 255, .55);--button-border-color-focus: rgba(255, 255, 255, .4);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=black]){--button-background-color-default: rgba(0, 0, 0, .9);--button-background-color-hover: rgb(0, 0, 0);--button-background-color-down: rgb(0, 0, 0);--button-background-color-focus: rgb(0, 0, 0);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .4);--button-border-color-hover: rgba(0, 0, 0, .55);--button-border-color-down: rgba(0, 0, 0, .7);--button-border-color-focus: rgba(0, 0, 0, .55);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary]){--button-background-color-default: rgba(0, 0, 0, .1);--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .25);--button-border-color-hover: rgba(0, 0, 0, .4);--button-border-color-down: rgba(0, 0, 0, .55);--button-border-color-focus: rgba(0, 0, 0, .4);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([size=s]){--button-min-width: 54px;--button-border-radius: var(--luzmo-border-radius-s);--button-height: 24px;--button-font-size: 12px;--button-edge-to-visual: 8px;--button-edge-to-visual-only: 4px;--button-edge-to-text: 10px;--button-padding-label-to-icon: 7px;--button-top-to-text: 5px;--button-bottom-to-text: 4px;--button-top-to-icon: 4px;--button-intended-icon-size: 16px}:host{--button-min-width: 72px;--button-border-radius: var(--luzmo-border-radius);--button-height: 32px;--button-font-size: 14px;--button-edge-to-visual: 12px;--button-edge-to-visual-only: 7px;--button-edge-to-text: 14px;--button-padding-label-to-icon: 8px;--button-top-to-text: 7px;--button-bottom-to-text: 8px;--button-top-to-icon: 7px;--button-intended-icon-size: 18px}:host([size=l]){--button-min-width: 90px;--button-border-radius: var(--luzmo-border-radius);--button-height: 40px;--button-font-size: 16px;--button-edge-to-visual: 16px;--button-edge-to-visual-only: 10px;--button-edge-to-text: 18px;--button-padding-label-to-icon: 9px;--button-top-to-text: 10px;--button-bottom-to-text: 10px;--button-top-to-icon: 10px;--button-intended-icon-size: 20px}:host([size=xl]){--button-min-width: 108px;--button-border-radius: var(--luzmo-border-radius);--button-height: 48px;--button-font-size: 18px;--button-edge-to-visual: 19px;--button-edge-to-visual-only: 13px;--button-edge-to-text: 22px;--button-padding-label-to-icon: 10px;--button-top-to-text: 13px;--button-bottom-to-text: 13px;--button-top-to-icon: 13px;--button-intended-icon-size: 22px}@media (forced-colors: active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}:host(.remove-focus-ring-safari-hack:focus-visible):after{forced-color-adjust:none;box-shadow:none}}@keyframes show-progress-circle{0%{visibility:hidden}to{visibility:visible}}@keyframes hide-icons-label{0%{visibility:visible}to{visibility:hidden}}@keyframes update-pending-button-styles{to{background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}}:host([pending]:not([disabled])){cursor:default;pointer-events:none;animation:update-pending-button-styles 0s var(--pending-delay, 1s) forwards}::slotted([slot=icon]){visibility:revert-layer;--luzmo-progress-circle-position: relative;--icon-size: inherit}luzmo-progress-circle{display:block;visibility:hidden;position:absolute;left:50%;transform:translate(-50%)}:host([pending]:not([disabled])) luzmo-progress-circle{animation:show-progress-circle 0s var(--pending-delay, 1s) forwards}:host([pending]:not([disabled])) slot[name=icon],:host([pending]:not([disabled])) #label{animation:hide-icons-label 0s var(--pending-delay, 1s) forwards}:host(.remove-focus-ring-safari-hack:focus-visible):after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, var(--focus-indicator-gap))));box-shadow:none}:host(.remove-focus-ring-safari-hack:focus-visible){box-shadow:none;outline:none}:host(.remove-focus-ring-safari-hack:focus-visible:not(:hover)){background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)))}';var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,a=(u,o,c,e)=>{for(var n=e>1?void 0:e?f(o,c):o,l=u.length-1,b;l>=0;l--)(b=u[l])&&(n=(e?b(o,c,n):b(n))||n);return e&&n&&m(o,c,n),n};const p=["primary","secondary","negative","white","black"];class r extends g.SizedMixin(v.LuzmoButtonBase,{noDefaultSize:!0}){constructor(){super(),this.pendingLabel="Pending",this.pending=!1,this._variant="primary",this.treatment="fill",this.noWrap=!1,this.pendingStateController=new s.PendingStateController(this)}static get styles(){return[...super.styles,t.r(h)]}click(){this.pending||super.click()}get variant(){return this._variant}set variant(o){if(o!==this.variant){switch(this.requestUpdate("variant",this.variant),o){case"white":{this.staticColor=o,this.removeAttribute("variant");return}case"black":{this.staticColor=o,this.removeAttribute("variant");return}case null:return;default:{this._variant=p.includes(o)?o:"primary";break}}this.setAttribute("variant",this.variant)}}set quiet(o){this.treatment=o?"outline":"fill"}get quiet(){return this.treatment==="outline"}firstUpdated(o){super.firstUpdated(o),this.hasAttribute("variant")||this.setAttribute("variant",this.variant),this.pending&&this.pendingStateController.hostUpdated()}renderButton(){return t.x`
18
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("lit"),n=require("lit/decorators.js"),v=require("../pending-state-DQctFHI8.cjs"),g=require("../sized-mixin-DcvJLFeo.cjs"),h=require("../button-base-C7or8-FB.cjs"),i=require("../clear-button-_a8GjtJC.cjs"),s=require("../close-button-TZ08VFmi.cjs"),m=':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family, var(--luzmo-font-family));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, 1.3);text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible}:host(:focus){outline:none}:host .is-disabled,:host([disabled]){cursor:default}:host:after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, 2px)));transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out,margin var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out;display:block;inset-block:0;inset-inline:0}:host(:focus-visible):after{margin:calc(var(--luzmo-focus-indicator-gap, 2px) * -2)}#label{place-self:center}#label[hidden]{display:none}:host{--luzmo-progress-circle-position: absolute;border-radius:var(--luzmo-button-border-radius, var(--button-border-radius));border-width:var(--luzmo-button-border-width, var(--button-border-width));font-size:var(--luzmo-button-font-size, var(--button-font-size));font-weight:var(--luzmo-button-font-weight, 600);gap:var(--luzmo-button-padding-label-to-icon, var(--button-padding-label-to-icon));max-inline-size:none;max-inline-size:var(--luzmo-button-max-inline-size, none);min-inline-size:var(--luzmo-button-min-width, var(--button-min-width));min-block-size:var(--luzmo-button-height, var(--button-height));padding-block:0;padding-inline:var(--luzmo-button-edge-to-text, var(--button-edge-to-text));color:inherit;margin-block:0;margin-block:var(--luzmo-button-margin-block, 0);border-style:solid;margin-inline-start:var(--luzmo-button-margin-left, 0);margin-inline-end:var(--luzmo-button-margin-right, 0);position:relative}:host(:is(:active,[active])){box-shadow:none}::slotted([slot=icon]){--_icon-size-difference: max( 0px, var(--button-intended-icon-size) - var( --icon-size, var(--button-intended-icon-size) ) );color:inherit;flex-shrink:0;align-self:flex-start;margin-block-start:var(--luzmo-button-icon-margin-block-start, max(0px, var(--luzmo-button-top-to-icon, var(--button-top-to-icon)) - var(--luzmo-button-border-width, var(--button-border-width)) + var(--_icon-size-difference, 0px) / 2));margin-inline-start:calc(var(--luzmo-button-edge-to-visual, var(--button-edge-to-visual)) - var(--luzmo-button-edge-to-text, var(--button-edge-to-text)))}:host([icon-only]){min-inline-size:unset;padding:calc(var(--luzmo-button-edge-to-visual-only, var(--button-edge-to-visual-only)) - var(--luzmo-button-border-width, var(--button-border-width)));border-radius:50%}:host([icon-only]) ::slotted([slot=icon]){align-self:center;margin-block-start:0;margin-inline-start:0}:host([icon-only]):after{border-radius:50%}#label{line-height:var(--luzmo-button-line-height, var(--button-line-height));text-align:center;text-align:var(--luzmo-button-text-align, center);align-self:start;padding-block-start:calc(var(--luzmo-button-top-to-text, var(--button-top-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)));padding-block-end:calc(var(--luzmo-button-bottom-to-text, var(--button-bottom-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)))}[name=icon]+#label{text-align:start;text-align:var(--luzmo-button-text-align-with-icon, start)}:host([focused]):after,:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))}:host{transition:border-color var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-button-focus-ring-gap, var(--button-focus-ring-gap)) + var(--luzmo-button-border-width, var(--button-border-width))) * -1);border-radius:var(--luzmo-button-focus-ring-border-radius, calc(var(--luzmo-button-border-radius, var(--button-border-radius)) + var(--luzmo-focus-indicator-gap, 2px)));transition:box-shadow var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))))}:host{background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)));transition:border .13s linear,color .13s linear,background-color .13s linear;transition:border var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,background-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear}@media (hover: hover){:host(:hover){box-shadow:none;background-color:var(--highcontrast-button-background-color-hover, var(--luzmo-button-background-color-hover, var(--button-background-color-hover)));border-color:var(--highcontrast-button-border-color-hover, var(--luzmo-button-border-color-hover, var(--button-border-color-hover)));color:var(--highcontrast-button-content-color-hover, var(--luzmo-button-content-color-hover, var(--button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-button-background-color-focus, var(--luzmo-button-background-color-focus, var(--button-background-color-focus)));border-color:var(--highcontrast-button-border-color-focus, var(--luzmo-button-border-color-focus, var(--button-border-color-focus)));color:var(--highcontrast-button-content-color-focus, var(--luzmo-button-content-color-focus, var(--button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-button-background-color-down, var(--luzmo-button-background-color-down, var(--button-background-color-down)));border-color:var(--highcontrast-button-border-color-down, var(--luzmo-button-border-color-down, var(--button-border-color-down)));color:var(--highcontrast-button-content-color-down, var(--luzmo-button-content-color-down, var(--button-content-color-down)))}:host .is-disabled,:host([pending]),:host([disabled]){background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}#label,::slotted([slot=icon]){visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}.luzmo-progress-circle{visibility:hidden;opacity:0;transition:opacity .13s ease-in-out,visibility 0s linear .13s;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out,visibility 0s linear var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s))}:host([pending]){cursor:default}:host([pending]) .luzmo-progress-circle{visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([static-color=white]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}:host([static-color=white][selected]){--button-content-color-default: var( --luzmo-button-static-content-color, rgba(255, 255, 255, .9) );--button-content-color-hover: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-down: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-focus: var( --luzmo-button-static-content-color, rgb(255, 255, 255) )}:host([static-color=black]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}@media (forced-colors: active){:host{--highcontrast-button-content-color-default: ButtonText;--highcontrast-button-content-color-hover: ButtonText;--highcontrast-button-content-color-focus: ButtonText;--highcontrast-button-content-color-down: ButtonText;--highcontrast-button-border-color-default: ButtonBorder;--highcontrast-button-border-color-hover: ButtonBorder;--highcontrast-button-border-color-focus: ButtonBorder;--highcontrast-button-border-color-down: ButtonBorder;--highcontrast-button-background-color-default: ButtonFace;--highcontrast-button-background-color-hover: ButtonFace;--highcontrast-button-background-color-down: ButtonFace;--highcontrast-button-background-color-focus: ButtonFace;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-content-color-disabled: GrayText;--highcontrast-button-border-color-disabled: GrayText;--luzmo-progress-circle-track-border-color: ButtonText;--luzmo-progress-circle-track-border-color-over-background: ButtonText;--luzmo-progress-circle-thickness: 3px;--luzmo-button-animation-duration: 0s}#label{forced-color-adjust:none}:host(:focus-visible):after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) ButtonText}}:host{--button-animation-duration: var(--luzmo-animation-duration);--button-border-radius: var(--luzmo-border-radius);--button-border-width: var(--luzmo-border-width);--button-line-height: 1.2;--button-focus-ring-gap: 2px;--button-focus-ring-thickness: 2px;--button-focus-indicator-color: var(--luzmo-primary);--button-intended-icon-size: 18px;--button-background-color-default: var(--luzmo-background-color);--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-active);--button-background-color-focus: var(--luzmo-primary);--button-border-color-default: var(--luzmlo-border-color-full);--button-border-color-hover: var(--luzmo-border-color-full-hover);--button-border-color-down: var(--luzmo-border-color-full-down);--button-border-color-focus: var(--luzmo-border-color-full-focus);--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-disabled-color);--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=negative]){--button-background-color-default: var(--luzmo-negative-color);--button-background-color-hover: var(--luzmo-negative-color-hover);--button-background-color-down: var(--luzmo-negative-color-down);--button-background-color-focus: var(--luzmo-negative-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=negative][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-negative-color);--button-border-color-hover: var(--luzmo-negative-color-hover);--button-border-color-down: var(--luzmo-negative-color-down);--button-border-color-focus: var(--luzmo-negative-color-focus);--button-content-color-default: var(--luzmo-negative-color);--button-content-color-hover: var(--luzmo-negative-color-down);--button-content-color-down: var(--luzmo-negative-color-down);--button-content-color-focus: var(--luzmo-negative-color-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=positive]){--button-background-color-default: var(--luzmo-positive-color);--button-background-color-hover: var(--luzmo-positive-color-hover);--button-background-color-down: var(--luzmo-positive-color-down);--button-background-color-focus: var(--luzmo-positive-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=positive][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-positive-color);--button-border-color-hover: var(--luzmo-positive-color-hover);--button-border-color-down: var(--luzmo-positive-color-down);--button-border-color-focus: var(--luzmo-positive-color-focus);--button-content-color-default: var(--luzmo-positive-color);--button-content-color-hover: var(--luzmo-positive-color-down);--button-content-color-down: var(--luzmo-positive-color-down);--button-content-color-focus: var(--luzmo-positive-color-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=primary]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=primary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=secondary]){--button-background-color-default: var(--luzmo-secondary);--button-background-color-hover: var(--luzmo-secondary-hover);--button-background-color-down: var(--luzmo-secondary-down);--button-background-color-focus: var(--luzmo-secondary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: var(--luzmo-secondary-inverse-color);--button-content-color-hover: var(--luzmo-secondary-inverse-color);--button-content-color-down: var(--luzmo-secondary-inverse-color);--button-content-color-focus: var(--luzmo-secondary-inverse-color);--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-secondary);--button-border-color-hover: var(--luzmo-secondary-hover);--button-border-color-down: var(--luzmo-secondary-down);--button-border-color-focus: var(--luzmo-secondary-focus);--button-content-color-default: var(--luzmo-secondary);--button-content-color-hover: var(--luzmo-secondary-down);--button-content-color-down: var(--luzmo-secondary-down);--button-content-color-focus: var(--luzmo-secondary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-background-color-disabled: transparent;--button-border-color-disabled: transparent}:host([variant=primary][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent;--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=secondary][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent;--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=negative][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent;--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=positive][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent;--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([selected]){--button-background-color-default: var(--luzmo-selected-color);--button-background-color-hover: var(--luzmo-selected-color-hover);--button-background-color-down: var(--luzmo-selected-color-down);--button-background-color-focus: var(--luzmo-selected-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent}:host([selected][emphasized]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus)}:host([static-color=black][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white]){--button-background-color-default: rgba(255, 255, 255 .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .9);--button-border-color-hover: rgb(255, 255, 255);--button-border-color-down: rgb(255, 255, 255);--button-border-color-focus: rgb(255, 255, 255);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][selected]){--button-background-color-default: rgba(255, 255, 255, .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-static-white-content-color-default: rgb(0, 0, 0);--button-static-white-content-color-hover: rgb(0, 0, 0);--button-static-white-content-color-down: rgb(0, 0, 0);--button-static-white-content-color-focus: rgb(0, 0, 0);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent}:host([static-color=white][variant=secondary]){--button-background-color-default: rgba(255, 255, 255, .1);--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .25);--button-border-color-hover: rgba(255, 255, 255, .4);--button-border-color-down: rgba(255, 255, 255, .55);--button-border-color-focus: rgba(255, 255, 255, .4);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=black]){--button-background-color-default: rgba(0, 0, 0, .9);--button-background-color-hover: rgb(0, 0, 0);--button-background-color-down: rgb(0, 0, 0);--button-background-color-focus: rgb(0, 0, 0);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .4);--button-border-color-hover: rgba(0, 0, 0, .55);--button-border-color-down: rgba(0, 0, 0, .7);--button-border-color-focus: rgba(0, 0, 0, .55);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary]){--button-background-color-default: rgba(0, 0, 0, .1);--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .25);--button-border-color-hover: rgba(0, 0, 0, .4);--button-border-color-down: rgba(0, 0, 0, .55);--button-border-color-focus: rgba(0, 0, 0, .4);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([size=s]){--button-min-width: 54px;--button-border-radius: var(--luzmo-border-radius-s);--button-height: 24px;--button-font-size: 12px;--button-edge-to-visual: 8px;--button-edge-to-visual-only: 4px;--button-edge-to-text: 10px;--button-padding-label-to-icon: 7px;--button-top-to-text: 5px;--button-bottom-to-text: 4px;--button-top-to-icon: 4px;--button-intended-icon-size: 16px}:host{--button-min-width: 72px;--button-border-radius: var(--luzmo-border-radius);--button-height: 32px;--button-font-size: 14px;--button-edge-to-visual: 12px;--button-edge-to-visual-only: 7px;--button-edge-to-text: 14px;--button-padding-label-to-icon: 8px;--button-top-to-text: 7px;--button-bottom-to-text: 8px;--button-top-to-icon: 7px;--button-intended-icon-size: 18px}:host([size=l]){--button-min-width: 90px;--button-border-radius: var(--luzmo-border-radius);--button-height: 40px;--button-font-size: 16px;--button-edge-to-visual: 16px;--button-edge-to-visual-only: 10px;--button-edge-to-text: 18px;--button-padding-label-to-icon: 9px;--button-top-to-text: 10px;--button-bottom-to-text: 10px;--button-top-to-icon: 10px;--button-intended-icon-size: 20px}:host([size=xl]){--button-min-width: 108px;--button-border-radius: var(--luzmo-border-radius);--button-height: 48px;--button-font-size: 18px;--button-edge-to-visual: 19px;--button-edge-to-visual-only: 13px;--button-edge-to-text: 22px;--button-padding-label-to-icon: 10px;--button-top-to-text: 13px;--button-bottom-to-text: 13px;--button-top-to-icon: 13px;--button-intended-icon-size: 22px}@media (forced-colors: active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}:host(.remove-focus-ring-safari-hack:focus-visible):after{forced-color-adjust:none;box-shadow:none}}@keyframes show-progress-circle{0%{visibility:hidden}to{visibility:visible}}@keyframes hide-icons-label{0%{visibility:visible}to{visibility:hidden}}@keyframes update-pending-button-styles{to{background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}}:host([pending]:not([disabled])){cursor:default;pointer-events:none;animation:update-pending-button-styles 0s var(--pending-delay, 1s) forwards}::slotted([slot=icon]){visibility:revert-layer;--luzmo-progress-circle-position: relative;--icon-size: inherit}luzmo-progress-circle{display:block;visibility:hidden;position:absolute;left:50%;transform:translate(-50%)}:host([pending]:not([disabled])) luzmo-progress-circle{animation:show-progress-circle 0s var(--pending-delay, 1s) forwards}:host([pending]:not([disabled])) slot[name=icon],:host([pending]:not([disabled])) #label{animation:hide-icons-label 0s var(--pending-delay, 1s) forwards}:host(.remove-focus-ring-safari-hack:focus-visible):after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, var(--focus-indicator-gap))));box-shadow:none}:host(.remove-focus-ring-safari-hack:focus-visible){box-shadow:none;outline:none}:host(.remove-focus-ring-safari-hack:focus-visible:not(:hover)){background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)))}';var f=Object.defineProperty,p=Object.getOwnPropertyDescriptor,a=(u,o,c,e)=>{for(var r=e>1?void 0:e?p(o,c):o,l=u.length-1,b;l>=0;l--)(b=u[l])&&(r=(e?b(o,c,r):b(r))||r);return e&&r&&f(o,c,r),r};const z=["primary","secondary","negative","positive","white","black"];class t extends g.SizedMixin(h.LuzmoButtonBase,{noDefaultSize:!0}){constructor(){super(),this.pendingLabel="Pending",this.pending=!1,this._variant="primary",this.treatment="fill",this._quiet=!1,this.noWrap=!1,this.pendingStateController=new v.PendingStateController(this)}static get styles(){return[...super.styles,d.unsafeCSS(m)]}click(){this.pending||super.click()}get variant(){return this._variant}set variant(o){if(o!==this.variant){switch(this.requestUpdate("variant",this.variant),o){case"white":{this.staticColor=o,this.removeAttribute("variant");return}case"black":{this.staticColor=o,this.removeAttribute("variant");return}case null:return;default:{this._variant=z.includes(o)?o:"primary";break}}this.setAttribute("variant",this.variant)}}set quiet(o){this._quiet=o,this.treatment=o?"outline":"fill"}get quiet(){return this._quiet}firstUpdated(o){super.firstUpdated(o),this.hasAttribute("variant")||this.setAttribute("variant",this.variant),this.pending&&this.pendingStateController.hostUpdated()}renderButton(){return d.html`
19
19
  ${this.buttonContent} ${this.pendingStateController.renderPendingState()}
20
- `}}a([t.n({type:String,attribute:"pending-label"})],r.prototype,"pendingLabel",2);a([t.n({type:Boolean,reflect:!0,attribute:!0})],r.prototype,"pending",2);a([t.n()],r.prototype,"variant",1);a([t.n({reflect:!0,attribute:"static-color"})],r.prototype,"staticColor",2);a([t.n({reflect:!0})],r.prototype,"treatment",2);a([t.n({type:Boolean})],r.prototype,"quiet",1);a([t.n({type:Boolean,attribute:"no-wrap",reflect:!0})],r.prototype,"noWrap",2);customElements.get("luzmo-button")||customElements.define("luzmo-button",r);customElements.get("luzmo-clear-button")||customElements.define("luzmo-clear-button",d.LuzmoClearButton);customElements.get("luzmo-close-button")||customElements.define("luzmo-close-button",i.LuzmoCloseButton);exports.LuzmoClearButton=d.LuzmoClearButton;exports.LuzmoCloseButton=i.LuzmoCloseButton;exports.LuzmoButton=r;
20
+ `}}a([n.property({type:String,attribute:"pending-label"})],t.prototype,"pendingLabel",2);a([n.property({type:Boolean,reflect:!0,attribute:!0})],t.prototype,"pending",2);a([n.property()],t.prototype,"variant",1);a([n.property({reflect:!0,attribute:"static-color"})],t.prototype,"staticColor",2);a([n.property({reflect:!0})],t.prototype,"treatment",2);a([n.property({type:Boolean,reflect:!0})],t.prototype,"quiet",1);a([n.property({type:Boolean,attribute:"no-wrap",reflect:!0})],t.prototype,"noWrap",2);typeof customElements<"u"&&!customElements.get("luzmo-button")&&customElements.define("luzmo-button",t);typeof customElements<"u"&&!customElements.get("luzmo-clear-button")&&customElements.define("luzmo-clear-button",i.LuzmoClearButton);typeof customElements<"u"&&!customElements.get("luzmo-close-button")&&customElements.define("luzmo-close-button",s.LuzmoCloseButton);exports.LuzmoClearButton=i.LuzmoClearButton;exports.LuzmoCloseButton=s.LuzmoCloseButton;exports.LuzmoButton=t;
@@ -15,12 +15,13 @@
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 { r as i, x as s, n as a } from "../base-WsynuqaS.js";
19
- import { P as g } from "../pending-state-DTX7ggyF.js";
20
- import { S as m } from "../sized-mixin-D4ACoVUr.js";
21
- import { L as v } from "../button-base-DbkDzb71.js";
22
- import { L as h } from "../clear-button-DoeRUWQ3.js";
23
- import { L as f } from "../close-button-BWXdHSx3.js";
18
+ import { unsafeCSS as i, html as s } from "lit";
19
+ import { property as e } from "lit/decorators.js";
20
+ import { P as v } from "../pending-state-Dx1u3EXA.js";
21
+ import { S as g } from "../sized-mixin-cJbo3PKR.js";
22
+ import { L as m } from "../button-base-B5uul3tZ.js";
23
+ import { L as h } from "../clear-button-BFtJVPzm.js";
24
+ import { L as f } from "../close-button-D9qjjy2w.js";
24
25
  const d = () => {
25
26
  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
26
27
  const r = document.createElement("style");
@@ -28,8 +29,8 @@ const d = () => {
28
29
  }
29
30
  };
30
31
  d();
31
- const z = ':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family, var(--luzmo-font-family));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, 1.3);text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible}:host(:focus){outline:none}:host .is-disabled,:host([disabled]){cursor:default}:host:after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, 2px)));transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out,margin var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out;display:block;inset-block:0;inset-inline:0}:host(:focus-visible):after{margin:calc(var(--luzmo-focus-indicator-gap, 2px) * -2)}#label{place-self:center}#label[hidden]{display:none}:host{--luzmo-progress-circle-position: absolute;border-radius:var(--luzmo-button-border-radius, var(--button-border-radius));border-width:var(--luzmo-button-border-width, var(--button-border-width));font-size:var(--luzmo-button-font-size, var(--button-font-size));font-weight:var(--luzmo-button-font-weight, 600);gap:var(--luzmo-button-padding-label-to-icon, var(--button-padding-label-to-icon));max-inline-size:none;max-inline-size:var(--luzmo-button-max-inline-size, none);min-inline-size:var(--luzmo-button-min-width, var(--button-min-width));min-block-size:var(--luzmo-button-height, var(--button-height));padding-block:0;padding-inline:var(--luzmo-button-edge-to-text, var(--button-edge-to-text));color:inherit;margin-block:0;margin-block:var(--luzmo-button-margin-block, 0);border-style:solid;margin-inline-start:var(--luzmo-button-margin-left, 0);margin-inline-end:var(--luzmo-button-margin-right, 0);position:relative}:host(:is(:active,[active])){box-shadow:none}::slotted([slot=icon]){--_icon-size-difference: max( 0px, var(--button-intended-icon-size) - var( --icon-size, var(--button-intended-icon-size) ) );color:inherit;flex-shrink:0;align-self:flex-start;margin-block-start:var(--luzmo-button-icon-margin-block-start, max(0px, var(--luzmo-button-top-to-icon, var(--button-top-to-icon)) - var(--luzmo-button-border-width, var(--button-border-width)) + var(--_icon-size-difference, 0px) / 2));margin-inline-start:calc(var(--luzmo-button-edge-to-visual, var(--button-edge-to-visual)) - var(--luzmo-button-edge-to-text, var(--button-edge-to-text)))}:host([icon-only]){min-inline-size:unset;padding:calc(var(--luzmo-button-edge-to-visual-only, var(--button-edge-to-visual-only)) - var(--luzmo-button-border-width, var(--button-border-width)));border-radius:50%}:host([icon-only]) ::slotted([slot=icon]){align-self:center;margin-block-start:0;margin-inline-start:0}:host([icon-only]):after{border-radius:50%}#label{line-height:var(--luzmo-button-line-height, var(--button-line-height));text-align:center;text-align:var(--luzmo-button-text-align, center);align-self:start;padding-block-start:calc(var(--luzmo-button-top-to-text, var(--button-top-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)));padding-block-end:calc(var(--luzmo-button-bottom-to-text, var(--button-bottom-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)))}[name=icon]+#label{text-align:start;text-align:var(--luzmo-button-text-align-with-icon, start)}:host([focused]):after,:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))}:host{transition:border-color var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-button-focus-ring-gap, var(--button-focus-ring-gap)) + var(--luzmo-button-border-width, var(--button-border-width))) * -1);border-radius:var(--luzmo-button-focus-ring-border-radius, calc(var(--luzmo-button-border-radius, var(--button-border-radius)) + var(--luzmo-focus-indicator-gap, 2px)));transition:box-shadow var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))))}:host{background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)));transition:border .13s linear,color .13s linear,background-color .13s linear;transition:border var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,background-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear}@media (hover: hover){:host(:hover){box-shadow:none;background-color:var(--highcontrast-button-background-color-hover, var(--luzmo-button-background-color-hover, var(--button-background-color-hover)));border-color:var(--highcontrast-button-border-color-hover, var(--luzmo-button-border-color-hover, var(--button-border-color-hover)));color:var(--highcontrast-button-content-color-hover, var(--luzmo-button-content-color-hover, var(--button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-button-background-color-focus, var(--luzmo-button-background-color-focus, var(--button-background-color-focus)));border-color:var(--highcontrast-button-border-color-focus, var(--luzmo-button-border-color-focus, var(--button-border-color-focus)));color:var(--highcontrast-button-content-color-focus, var(--luzmo-button-content-color-focus, var(--button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-button-background-color-down, var(--luzmo-button-background-color-down, var(--button-background-color-down)));border-color:var(--highcontrast-button-border-color-down, var(--luzmo-button-border-color-down, var(--button-border-color-down)));color:var(--highcontrast-button-content-color-down, var(--luzmo-button-content-color-down, var(--button-content-color-down)))}:host .is-disabled,:host([pending]),:host([disabled]){background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}#label,::slotted([slot=icon]){visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}.luzmo-progress-circle{visibility:hidden;opacity:0;transition:opacity .13s ease-in-out,visibility 0s linear .13s;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out,visibility 0s linear var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s))}:host([pending]){cursor:default}:host([pending]) .luzmo-progress-circle{visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([static-color=white]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}:host([static-color=white][selected]){--button-content-color-default: var( --luzmo-button-static-content-color, rgba(255, 255, 255, .9) );--button-content-color-hover: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-down: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-focus: var( --luzmo-button-static-content-color, rgb(255, 255, 255) )}:host([static-color=black]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}@media (forced-colors: active){:host{--highcontrast-button-content-color-default: ButtonText;--highcontrast-button-content-color-hover: ButtonText;--highcontrast-button-content-color-focus: ButtonText;--highcontrast-button-content-color-down: ButtonText;--highcontrast-button-border-color-default: ButtonBorder;--highcontrast-button-border-color-hover: ButtonBorder;--highcontrast-button-border-color-focus: ButtonBorder;--highcontrast-button-border-color-down: ButtonBorder;--highcontrast-button-background-color-default: ButtonFace;--highcontrast-button-background-color-hover: ButtonFace;--highcontrast-button-background-color-down: ButtonFace;--highcontrast-button-background-color-focus: ButtonFace;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-content-color-disabled: GrayText;--highcontrast-button-border-color-disabled: GrayText;--luzmo-progress-circle-track-border-color: ButtonText;--luzmo-progress-circle-track-border-color-over-background: ButtonText;--luzmo-progress-circle-thickness: 3px;--luzmo-button-animation-duration: 0s}#label{forced-color-adjust:none}:host(:focus-visible):after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) ButtonText}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default: ButtonText;--highcontrast-button-content-color-default: ButtonFace;--highcontrast-button-content-color-hover: HighlightText;--highcontrast-button-content-color-down: HighlightText;--highcontrast-button-content-color-focus: HighlightText;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-background-color-hover: Highlight;--highcontrast-button-background-color-down: Highlight;--highcontrast-button-background-color-focus: Highlight;--highcontrast-button-border-color-default: ButtonText;--highcontrast-button-border-color-hover: Highlight;--highcontrast-button-border-color-focus: Highlight;--highcontrast-button-border-color-down: Highlight}}:host{--button-animation-duration: var(--luzmo-animation-duration);--button-border-radius: var(--luzmo-border-radius);--button-border-width: var(--luzmo-border-width);--button-line-height: 1.2;--button-focus-ring-gap: 2px;--button-focus-ring-thickness: 2px;--button-focus-indicator-color: var(--luzmo-primary);--button-intended-icon-size: 18px;--button-background-color-default: var(--luzmo-background-color);--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-active);--button-background-color-focus: var(--luzmo-primary);--button-border-color-default: var(--luzmlo-border-color-full);--button-border-color-hover: var(--luzmo-border-color-full-hover);--button-border-color-down: var(--luzmo-border-color-full-down);--button-border-color-focus: var(--luzmo-border-color-full-focus);--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-disabled-color);--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=accent]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=accent][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=negative]){--button-background-color-default: var(--luzmo-negative-color);--button-background-color-hover: var(--luzmo-negative-color-hover);--button-background-color-down: var(--luzmo-negative-color-down);--button-background-color-focus: var(--luzmo-negative-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=negative][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-negative-color);--button-border-color-hover: var(--luzmo-negative-color-hover);--button-border-color-down: var(--luzmo-negative-color-down);--button-border-color-focus: var(--luzmo-negative-color-focus);--button-content-color-default: var(--luzmo-negative-color);--button-content-color-hover: var(--luzmo-negative-color-down);--button-content-color-down: var(--luzmo-negative-color-down);--button-content-color-focus: var(--luzmo-negative-color-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=primary]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=primary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=secondary]){--button-background-color-default: var(--luzmo-secondary);--button-background-color-hover: var(--luzmo-secondary-hover);--button-background-color-down: var(--luzmo-secondary-down);--button-background-color-focus: var(--luzmo-secondary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-secondary);--button-border-color-hover: var(--luzmo-secondary-hover);--button-border-color-down: var(--luzmo-secondary-down);--button-border-color-focus: var(--luzmo-secondary-focus);--button-content-color-default: var(--luzmo-secondary);--button-content-color-hover: var(--luzmo-secondary-down);--button-content-color-down: var(--luzmo-secondary-down);--button-content-color-focus: var(--luzmo-secondary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-background-color-disabled: transparent;--button-border-color-disabled: transparent}:host([selected]){--button-background-color-default: var(--luzmo-selected-color);--button-background-color-hover: var(--luzmo-selected-color-hover);--button-background-color-down: var(--luzmo-selected-color-down);--button-background-color-focus: var(--luzmo-selected-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent}:host([selected][emphasized]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus)}:host([static-color=black][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white]){--button-background-color-default: rgba(255, 255, 255 .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .9);--button-border-color-hover: rgb(255, 255, 255);--button-border-color-down: rgb(255, 255, 255);--button-border-color-focus: rgb(255, 255, 255);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][selected]){--button-background-color-default: rgba(255, 255, 255, .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-static-white-content-color-default: rgb(0, 0, 0);--button-static-white-content-color-hover: rgb(0, 0, 0);--button-static-white-content-color-down: rgb(0, 0, 0);--button-static-white-content-color-focus: rgb(0, 0, 0);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent}:host([static-color=white][variant=secondary]){--button-background-color-default: rgba(255, 255, 255, .1);--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .25);--button-border-color-hover: rgba(255, 255, 255, .4);--button-border-color-down: rgba(255, 255, 255, .55);--button-border-color-focus: rgba(255, 255, 255, .4);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=black]){--button-background-color-default: rgba(0, 0, 0, .9);--button-background-color-hover: rgb(0, 0, 0);--button-background-color-down: rgb(0, 0, 0);--button-background-color-focus: rgb(0, 0, 0);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .4);--button-border-color-hover: rgba(0, 0, 0, .55);--button-border-color-down: rgba(0, 0, 0, .7);--button-border-color-focus: rgba(0, 0, 0, .55);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary]){--button-background-color-default: rgba(0, 0, 0, .1);--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .25);--button-border-color-hover: rgba(0, 0, 0, .4);--button-border-color-down: rgba(0, 0, 0, .55);--button-border-color-focus: rgba(0, 0, 0, .4);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([size=s]){--button-min-width: 54px;--button-border-radius: var(--luzmo-border-radius-s);--button-height: 24px;--button-font-size: 12px;--button-edge-to-visual: 8px;--button-edge-to-visual-only: 4px;--button-edge-to-text: 10px;--button-padding-label-to-icon: 7px;--button-top-to-text: 5px;--button-bottom-to-text: 4px;--button-top-to-icon: 4px;--button-intended-icon-size: 16px}:host{--button-min-width: 72px;--button-border-radius: var(--luzmo-border-radius);--button-height: 32px;--button-font-size: 14px;--button-edge-to-visual: 12px;--button-edge-to-visual-only: 7px;--button-edge-to-text: 14px;--button-padding-label-to-icon: 8px;--button-top-to-text: 7px;--button-bottom-to-text: 8px;--button-top-to-icon: 7px;--button-intended-icon-size: 18px}:host([size=l]){--button-min-width: 90px;--button-border-radius: var(--luzmo-border-radius);--button-height: 40px;--button-font-size: 16px;--button-edge-to-visual: 16px;--button-edge-to-visual-only: 10px;--button-edge-to-text: 18px;--button-padding-label-to-icon: 9px;--button-top-to-text: 10px;--button-bottom-to-text: 10px;--button-top-to-icon: 10px;--button-intended-icon-size: 20px}:host([size=xl]){--button-min-width: 108px;--button-border-radius: var(--luzmo-border-radius);--button-height: 48px;--button-font-size: 18px;--button-edge-to-visual: 19px;--button-edge-to-visual-only: 13px;--button-edge-to-text: 22px;--button-padding-label-to-icon: 10px;--button-top-to-text: 13px;--button-bottom-to-text: 13px;--button-top-to-icon: 13px;--button-intended-icon-size: 22px}@media (forced-colors: active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}:host(.remove-focus-ring-safari-hack:focus-visible):after{forced-color-adjust:none;box-shadow:none}}@keyframes show-progress-circle{0%{visibility:hidden}to{visibility:visible}}@keyframes hide-icons-label{0%{visibility:visible}to{visibility:hidden}}@keyframes update-pending-button-styles{to{background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}}:host([pending]:not([disabled])){cursor:default;pointer-events:none;animation:update-pending-button-styles 0s var(--pending-delay, 1s) forwards}::slotted([slot=icon]){visibility:revert-layer;--luzmo-progress-circle-position: relative;--icon-size: inherit}luzmo-progress-circle{display:block;visibility:hidden;position:absolute;left:50%;transform:translate(-50%)}:host([pending]:not([disabled])) luzmo-progress-circle{animation:show-progress-circle 0s var(--pending-delay, 1s) forwards}:host([pending]:not([disabled])) slot[name=icon],:host([pending]:not([disabled])) #label{animation:hide-icons-label 0s var(--pending-delay, 1s) forwards}:host(.remove-focus-ring-safari-hack:focus-visible):after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, var(--focus-indicator-gap))));box-shadow:none}:host(.remove-focus-ring-safari-hack:focus-visible){box-shadow:none;outline:none}:host(.remove-focus-ring-safari-hack:focus-visible:not(:hover)){background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)))}';
32
- var p = Object.defineProperty, k = Object.getOwnPropertyDescriptor, e = (r, o, l, u) => {
32
+ const z = ':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family, var(--luzmo-font-family));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, 1.3);text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible}:host(:focus){outline:none}:host .is-disabled,:host([disabled]){cursor:default}:host:after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, 2px)));transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out,margin var(--luzmo-button-animation-duration, var(--luzmo-button-animation-duration, var(--luzmo-animation-duration))) ease-out;display:block;inset-block:0;inset-inline:0}:host(:focus-visible):after{margin:calc(var(--luzmo-focus-indicator-gap, 2px) * -2)}#label{place-self:center}#label[hidden]{display:none}:host{--luzmo-progress-circle-position: absolute;border-radius:var(--luzmo-button-border-radius, var(--button-border-radius));border-width:var(--luzmo-button-border-width, var(--button-border-width));font-size:var(--luzmo-button-font-size, var(--button-font-size));font-weight:var(--luzmo-button-font-weight, 600);gap:var(--luzmo-button-padding-label-to-icon, var(--button-padding-label-to-icon));max-inline-size:none;max-inline-size:var(--luzmo-button-max-inline-size, none);min-inline-size:var(--luzmo-button-min-width, var(--button-min-width));min-block-size:var(--luzmo-button-height, var(--button-height));padding-block:0;padding-inline:var(--luzmo-button-edge-to-text, var(--button-edge-to-text));color:inherit;margin-block:0;margin-block:var(--luzmo-button-margin-block, 0);border-style:solid;margin-inline-start:var(--luzmo-button-margin-left, 0);margin-inline-end:var(--luzmo-button-margin-right, 0);position:relative}:host(:is(:active,[active])){box-shadow:none}::slotted([slot=icon]){--_icon-size-difference: max( 0px, var(--button-intended-icon-size) - var( --icon-size, var(--button-intended-icon-size) ) );color:inherit;flex-shrink:0;align-self:flex-start;margin-block-start:var(--luzmo-button-icon-margin-block-start, max(0px, var(--luzmo-button-top-to-icon, var(--button-top-to-icon)) - var(--luzmo-button-border-width, var(--button-border-width)) + var(--_icon-size-difference, 0px) / 2));margin-inline-start:calc(var(--luzmo-button-edge-to-visual, var(--button-edge-to-visual)) - var(--luzmo-button-edge-to-text, var(--button-edge-to-text)))}:host([icon-only]){min-inline-size:unset;padding:calc(var(--luzmo-button-edge-to-visual-only, var(--button-edge-to-visual-only)) - var(--luzmo-button-border-width, var(--button-border-width)));border-radius:50%}:host([icon-only]) ::slotted([slot=icon]){align-self:center;margin-block-start:0;margin-inline-start:0}:host([icon-only]):after{border-radius:50%}#label{line-height:var(--luzmo-button-line-height, var(--button-line-height));text-align:center;text-align:var(--luzmo-button-text-align, center);align-self:start;padding-block-start:calc(var(--luzmo-button-top-to-text, var(--button-top-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)));padding-block-end:calc(var(--luzmo-button-bottom-to-text, var(--button-bottom-to-text)) - var(--luzmo-button-border-width, var(--button-border-width)))}[name=icon]+#label{text-align:start;text-align:var(--luzmo-button-text-align-with-icon, start)}:host([focused]):after,:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))}:host{transition:border-color var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-button-focus-ring-gap, var(--button-focus-ring-gap)) + var(--luzmo-button-border-width, var(--button-border-width))) * -1);border-radius:var(--luzmo-button-focus-ring-border-radius, calc(var(--luzmo-button-border-radius, var(--button-border-radius)) + var(--luzmo-focus-indicator-gap, 2px)));transition:box-shadow var(--luzmo-button-animation-duration, var(--button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--luzmo-button-focus-ring-color, var(--button-focus-indicator-color))))}:host{background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)));transition:border .13s linear,color .13s linear,background-color .13s linear;transition:border var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear,background-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) linear}@media (hover: hover){:host(:hover){box-shadow:none;background-color:var(--highcontrast-button-background-color-hover, var(--luzmo-button-background-color-hover, var(--button-background-color-hover)));border-color:var(--highcontrast-button-border-color-hover, var(--luzmo-button-border-color-hover, var(--button-border-color-hover)));color:var(--highcontrast-button-content-color-hover, var(--luzmo-button-content-color-hover, var(--button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-button-background-color-focus, var(--luzmo-button-background-color-focus, var(--button-background-color-focus)));border-color:var(--highcontrast-button-border-color-focus, var(--luzmo-button-border-color-focus, var(--button-border-color-focus)));color:var(--highcontrast-button-content-color-focus, var(--luzmo-button-content-color-focus, var(--button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-button-background-color-down, var(--luzmo-button-background-color-down, var(--button-background-color-down)));border-color:var(--highcontrast-button-border-color-down, var(--luzmo-button-border-color-down, var(--button-border-color-down)));color:var(--highcontrast-button-content-color-down, var(--luzmo-button-content-color-down, var(--button-content-color-down)))}:host .is-disabled,:host([pending]),:host([disabled]){background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}#label,::slotted([slot=icon]){visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}.luzmo-progress-circle{visibility:hidden;opacity:0;transition:opacity .13s ease-in-out,visibility 0s linear .13s;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out,visibility 0s linear var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s))}:host([pending]){cursor:default}:host([pending]) .luzmo-progress-circle{visibility:visible;opacity:1;transition:opacity .13s ease-in-out;transition:opacity var(--luzmo-button-animation-duration, var(--luzmo-animation-duration, .15s)) ease-in-out}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([static-color=white]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}:host([static-color=white][selected]){--button-content-color-default: var( --luzmo-button-static-content-color, rgba(255, 255, 255, .9) );--button-content-color-hover: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-down: var( --luzmo-button-static-content-color, rgb(255, 255, 255) );--button-content-color-focus: var( --luzmo-button-static-content-color, rgb(255, 255, 255) )}:host([static-color=black]){--button-focus-indicator-color: var( --luzmo-static-black-focus-indicator-color, rgb(0, 0, 0) )}@media (forced-colors: active){:host{--highcontrast-button-content-color-default: ButtonText;--highcontrast-button-content-color-hover: ButtonText;--highcontrast-button-content-color-focus: ButtonText;--highcontrast-button-content-color-down: ButtonText;--highcontrast-button-border-color-default: ButtonBorder;--highcontrast-button-border-color-hover: ButtonBorder;--highcontrast-button-border-color-focus: ButtonBorder;--highcontrast-button-border-color-down: ButtonBorder;--highcontrast-button-background-color-default: ButtonFace;--highcontrast-button-background-color-hover: ButtonFace;--highcontrast-button-background-color-down: ButtonFace;--highcontrast-button-background-color-focus: ButtonFace;--highcontrast-button-background-color-disabled: ButtonFace;--highcontrast-button-content-color-disabled: GrayText;--highcontrast-button-border-color-disabled: GrayText;--luzmo-progress-circle-track-border-color: ButtonText;--luzmo-progress-circle-track-border-color-over-background: ButtonText;--luzmo-progress-circle-thickness: 3px;--luzmo-button-animation-duration: 0s}#label{forced-color-adjust:none}:host(:focus-visible):after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-button-focus-ring-thickness, var(--button-focus-ring-thickness)) ButtonText}}:host{--button-animation-duration: var(--luzmo-animation-duration);--button-border-radius: var(--luzmo-border-radius);--button-border-width: var(--luzmo-border-width);--button-line-height: 1.2;--button-focus-ring-gap: 2px;--button-focus-ring-thickness: 2px;--button-focus-indicator-color: var(--luzmo-primary);--button-intended-icon-size: 18px;--button-background-color-default: var(--luzmo-background-color);--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-active);--button-background-color-focus: var(--luzmo-primary);--button-border-color-default: var(--luzmlo-border-color-full);--button-border-color-hover: var(--luzmo-border-color-full-hover);--button-border-color-down: var(--luzmo-border-color-full-down);--button-border-color-focus: var(--luzmo-border-color-full-focus);--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-disabled-color);--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=negative]){--button-background-color-default: var(--luzmo-negative-color);--button-background-color-hover: var(--luzmo-negative-color-hover);--button-background-color-down: var(--luzmo-negative-color-down);--button-background-color-focus: var(--luzmo-negative-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=negative][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-negative-color);--button-border-color-hover: var(--luzmo-negative-color-hover);--button-border-color-down: var(--luzmo-negative-color-down);--button-border-color-focus: var(--luzmo-negative-color-focus);--button-content-color-default: var(--luzmo-negative-color);--button-content-color-hover: var(--luzmo-negative-color-down);--button-content-color-down: var(--luzmo-negative-color-down);--button-content-color-focus: var(--luzmo-negative-color-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=positive]){--button-background-color-default: var(--luzmo-positive-color);--button-background-color-hover: var(--luzmo-positive-color-hover);--button-background-color-down: var(--luzmo-positive-color-down);--button-background-color-focus: var(--luzmo-positive-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=positive][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-positive-color);--button-border-color-hover: var(--luzmo-positive-color-hover);--button-border-color-down: var(--luzmo-positive-color-down);--button-border-color-focus: var(--luzmo-positive-color-focus);--button-content-color-default: var(--luzmo-positive-color);--button-content-color-hover: var(--luzmo-positive-color-down);--button-content-color-down: var(--luzmo-positive-color-down);--button-content-color-focus: var(--luzmo-positive-color-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=primary]){--button-background-color-default: var(--luzmo-primary);--button-background-color-hover: var(--luzmo-primary-hover);--button-background-color-down: var(--luzmo-primary-down);--button-background-color-focus: var(--luzmo-primary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=primary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-primary);--button-border-color-hover: var(--luzmo-primary-hover);--button-border-color-down: var(--luzmo-primary-down);--button-border-color-focus: var(--luzmo-primary-focus);--button-content-color-default: var(--luzmo-primary);--button-content-color-hover: var(--luzmo-primary-down);--button-content-color-down: var(--luzmo-primary-down);--button-content-color-focus: var(--luzmo-primary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=secondary]){--button-background-color-default: var(--luzmo-secondary);--button-background-color-hover: var(--luzmo-secondary-hover);--button-background-color-down: var(--luzmo-secondary-down);--button-background-color-focus: var(--luzmo-secondary-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: var(--luzmo-secondary-inverse-color);--button-content-color-hover: var(--luzmo-secondary-inverse-color);--button-content-color-down: var(--luzmo-secondary-inverse-color);--button-content-color-focus: var(--luzmo-secondary-inverse-color);--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent;--button-content-color-disabled: var(--luzmo-disabled-color)}:host([variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: var(--luzmo-secondary);--button-border-color-hover: var(--luzmo-secondary-hover);--button-border-color-down: var(--luzmo-secondary-down);--button-border-color-focus: var(--luzmo-secondary-focus);--button-content-color-default: var(--luzmo-secondary);--button-content-color-hover: var(--luzmo-secondary-down);--button-content-color-down: var(--luzmo-secondary-down);--button-content-color-focus: var(--luzmo-secondary-focus);--button-background-color-disabled: transparent;--button-border-color-disabled: var(--luzmo-border-color-disabled);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-background-color-disabled: transparent;--button-border-color-disabled: transparent}:host([variant=primary][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent;--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=secondary][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent;--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=negative][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent;--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([variant=positive][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent;--button-content-color-default: var(--luzmo-font-color);--button-content-color-hover: var(--luzmo-font-color-hard);--button-content-color-down: var(--luzmo-font-color-hard);--button-content-color-focus: var(--luzmo-font-color-hard);--button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([selected]){--button-background-color-default: var(--luzmo-selected-color);--button-background-color-hover: var(--luzmo-selected-color-hover);--button-background-color-down: var(--luzmo-selected-color-down);--button-background-color-focus: var(--luzmo-selected-color-focus);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: white;--button-content-color-hover: white;--button-content-color-down: white;--button-content-color-focus: white;--button-background-color-disabled: var(--luzmo-background-color-disabled);--button-border-color-disabled: transparent}:host([selected][emphasized]){--button-background-color-default: transparent;--button-background-color-hover: var(--luzmo-background-color-hover);--button-background-color-down: var(--luzmo-background-color-down);--button-background-color-focus: var(--luzmo-background-color-focus)}:host([static-color=black][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white][quiet]){--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-border-color-disabled: transparent}:host([static-color=white]){--button-background-color-default: rgba(255, 255, 255 .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .9);--button-border-color-hover: rgb(255, 255, 255);--button-border-color-down: rgb(255, 255, 255);--button-border-color-focus: rgb(255, 255, 255);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][selected]){--button-background-color-default: rgba(255, 255, 255, .9);--button-background-color-hover: rgb(255, 255, 255);--button-background-color-down: rgb(255, 255, 255);--button-background-color-focus: rgb(255, 255, 255);--button-static-white-content-color-default: rgb(0, 0, 0);--button-static-white-content-color-hover: rgb(0, 0, 0);--button-static-white-content-color-down: rgb(0, 0, 0);--button-static-white-content-color-focus: rgb(0, 0, 0);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent}:host([static-color=white][variant=secondary]){--button-background-color-default: rgba(255, 255, 255, .1);--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: rgba(255, 255, 255, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=white][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(255, 255, 255, .25);--button-background-color-down: rgba(255, 255, 255, .4);--button-background-color-focus: rgba(255, 255, 255, .25);--button-border-color-default: rgba(255, 255, 255, .25);--button-border-color-hover: rgba(255, 255, 255, .4);--button-border-color-down: rgba(255, 255, 255, .55);--button-border-color-focus: rgba(255, 255, 255, .4);--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(255, 255, 255);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(255, 255, 255, .25);--button-content-color-disabled: rgba(255, 255, 255, .55)}:host([static-color=black]){--button-background-color-default: rgba(0, 0, 0, .9);--button-background-color-hover: rgb(0, 0, 0);--button-background-color-down: rgb(0, 0, 0);--button-background-color-focus: rgb(0, 0, 0);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(255, 255, 255);--button-content-color-hover: rgb(255, 255, 255);--button-content-color-down: rgb(255, 255, 255);--button-content-color-focus: rgb(255, 255, 255);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .4);--button-border-color-hover: rgba(0, 0, 0, .55);--button-border-color-down: rgba(0, 0, 0, .7);--button-border-color-focus: rgba(0, 0, 0, .55);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary]){--button-background-color-default: rgba(0, 0, 0, .1);--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: transparent;--button-border-color-hover: transparent;--button-border-color-down: transparent;--button-border-color-focus: transparent;--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: rgba(0, 0, 0, .1);--button-border-color-disabled: transparent;--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([static-color=black][variant=secondary][treatment=outline]){--button-background-color-default: transparent;--button-background-color-hover: rgba(0, 0, 0, .25);--button-background-color-down: rgba(0, 0, 0, .4);--button-background-color-focus: rgba(0, 0, 0, .25);--button-border-color-default: rgba(0, 0, 0, .25);--button-border-color-hover: rgba(0, 0, 0, .4);--button-border-color-down: rgba(0, 0, 0, .55);--button-border-color-focus: rgba(0, 0, 0, .4);--button-content-color-default: rgb(0, 0, 0);--button-content-color-hover: rgb(0, 0, 0);--button-content-color-down: rgb(0, 0, 0);--button-content-color-focus: rgb(0, 0, 0);--button-focus-indicator-color: rgb(0, 0, 0);--button-background-color-disabled: transparent;--button-border-color-disabled: rgba(0, 0, 0, .25);--button-content-color-disabled: rgba(0, 0, 0, .55)}:host([size=s]){--button-min-width: 54px;--button-border-radius: var(--luzmo-border-radius-s);--button-height: 24px;--button-font-size: 12px;--button-edge-to-visual: 8px;--button-edge-to-visual-only: 4px;--button-edge-to-text: 10px;--button-padding-label-to-icon: 7px;--button-top-to-text: 5px;--button-bottom-to-text: 4px;--button-top-to-icon: 4px;--button-intended-icon-size: 16px}:host{--button-min-width: 72px;--button-border-radius: var(--luzmo-border-radius);--button-height: 32px;--button-font-size: 14px;--button-edge-to-visual: 12px;--button-edge-to-visual-only: 7px;--button-edge-to-text: 14px;--button-padding-label-to-icon: 8px;--button-top-to-text: 7px;--button-bottom-to-text: 8px;--button-top-to-icon: 7px;--button-intended-icon-size: 18px}:host([size=l]){--button-min-width: 90px;--button-border-radius: var(--luzmo-border-radius);--button-height: 40px;--button-font-size: 16px;--button-edge-to-visual: 16px;--button-edge-to-visual-only: 10px;--button-edge-to-text: 18px;--button-padding-label-to-icon: 9px;--button-top-to-text: 10px;--button-bottom-to-text: 10px;--button-top-to-icon: 10px;--button-intended-icon-size: 20px}:host([size=xl]){--button-min-width: 108px;--button-border-radius: var(--luzmo-border-radius);--button-height: 48px;--button-font-size: 18px;--button-edge-to-visual: 19px;--button-edge-to-visual-only: 13px;--button-edge-to-text: 22px;--button-padding-label-to-icon: 10px;--button-top-to-text: 13px;--button-bottom-to-text: 13px;--button-top-to-icon: 13px;--button-intended-icon-size: 22px}@media (forced-colors: active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}:host(.remove-focus-ring-safari-hack:focus-visible):after{forced-color-adjust:none;box-shadow:none}}@keyframes show-progress-circle{0%{visibility:hidden}to{visibility:visible}}@keyframes hide-icons-label{0%{visibility:visible}to{visibility:hidden}}@keyframes update-pending-button-styles{to{background-color:var(--highcontrast-button-background-color-disabled, var(--luzmo-button-background-color-disabled, var(--button-background-color-disabled)));border-color:var(--highcontrast-button-border-color-disabled, var(--luzmo-button-border-color-disabled, var(--button-border-color-disabled)));color:var(--highcontrast-button-content-color-disabled, var(--luzmo-button-content-color-disabled, var(--button-content-color-disabled)))}}:host([pending]:not([disabled])){cursor:default;pointer-events:none;animation:update-pending-button-styles 0s var(--pending-delay, 1s) forwards}::slotted([slot=icon]){visibility:revert-layer;--luzmo-progress-circle-position: relative;--icon-size: inherit}luzmo-progress-circle{display:block;visibility:hidden;position:absolute;left:50%;transform:translate(-50%)}:host([pending]:not([disabled])) luzmo-progress-circle{animation:show-progress-circle 0s var(--pending-delay, 1s) forwards}:host([pending]:not([disabled])) slot[name=icon],:host([pending]:not([disabled])) #label{animation:hide-icons-label 0s var(--pending-delay, 1s) forwards}:host(.remove-focus-ring-safari-hack:focus-visible):after{margin:calc(-1 * var(--luzmo-button-focus-indicator-gap, var(--luzmo-focus-indicator-gap, var(--focus-indicator-gap))));box-shadow:none}:host(.remove-focus-ring-safari-hack:focus-visible){box-shadow:none;outline:none}:host(.remove-focus-ring-safari-hack:focus-visible:not(:hover)){background-color:var(--highcontrast-button-background-color-default, var(--luzmo-button-background-color-default, var(--button-background-color-default)));border-color:var(--highcontrast-button-border-color-default, var(--luzmo-button-border-color-default, var(--button-border-color-default)));color:var(--highcontrast-button-content-color-default, var(--luzmo-button-content-color-default, var(--button-content-color-default)))}';
33
+ var p = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (r, o, l, u) => {
33
34
  for (var n = u > 1 ? void 0 : u ? k(o, l) : o, c = r.length - 1, b; c >= 0; c--)
34
35
  (b = r[c]) && (n = (u ? b(o, l, n) : b(n)) || n);
35
36
  return u && n && p(o, l, n), n;
@@ -38,10 +39,11 @@ const w = [
38
39
  "primary",
39
40
  "secondary",
40
41
  "negative",
42
+ "positive",
41
43
  "white",
42
44
  "black"
43
45
  ];
44
- class t extends m(v, {
46
+ class t extends g(m, {
45
47
  noDefaultSize: !0
46
48
  }) {
47
49
  /**
@@ -49,8 +51,11 @@ class t extends m(v, {
49
51
  * The `PendingStateController` manages the pending state of the Button.
50
52
  */
51
53
  constructor() {
52
- super(), this.pendingLabel = "Pending", this.pending = !1, this._variant = "primary", this.treatment = "fill", this.noWrap = !1, this.pendingStateController = new g(this);
54
+ super(), this.pendingLabel = "Pending", this.pending = !1, this._variant = "primary", this.treatment = "fill", this._quiet = !1, this.noWrap = !1, this.pendingStateController = new v(this);
53
55
  }
56
+ /**
57
+ * @internal
58
+ */
54
59
  static get styles() {
55
60
  return [...super.styles, i(z)];
56
61
  }
@@ -82,10 +87,10 @@ class t extends m(v, {
82
87
  }
83
88
  }
84
89
  set quiet(o) {
85
- this.treatment = o ? "outline" : "fill";
90
+ this._quiet = o, this.treatment = o ? "outline" : "fill";
86
91
  }
87
92
  get quiet() {
88
- return this.treatment === "outline";
93
+ return this._quiet;
89
94
  }
90
95
  firstUpdated(o) {
91
96
  super.firstUpdated(o), this.hasAttribute("variant") || this.setAttribute("variant", this.variant), this.pending && this.pendingStateController.hostUpdated();
@@ -96,30 +101,30 @@ class t extends m(v, {
96
101
  `;
97
102
  }
98
103
  }
99
- e([
100
- a({ type: String, attribute: "pending-label" })
104
+ a([
105
+ e({ type: String, attribute: "pending-label" })
101
106
  ], t.prototype, "pendingLabel", 2);
102
- e([
103
- a({ type: Boolean, reflect: !0, attribute: !0 })
107
+ a([
108
+ e({ type: Boolean, reflect: !0, attribute: !0 })
104
109
  ], t.prototype, "pending", 2);
105
- e([
106
- a()
110
+ a([
111
+ e()
107
112
  ], t.prototype, "variant", 1);
108
- e([
109
- a({ reflect: !0, attribute: "static-color" })
113
+ a([
114
+ e({ reflect: !0, attribute: "static-color" })
110
115
  ], t.prototype, "staticColor", 2);
111
- e([
112
- a({ reflect: !0 })
116
+ a([
117
+ e({ reflect: !0 })
113
118
  ], t.prototype, "treatment", 2);
114
- e([
115
- a({ type: Boolean })
119
+ a([
120
+ e({ type: Boolean, reflect: !0 })
116
121
  ], t.prototype, "quiet", 1);
117
- e([
118
- a({ type: Boolean, attribute: "no-wrap", reflect: !0 })
122
+ a([
123
+ e({ type: Boolean, attribute: "no-wrap", reflect: !0 })
119
124
  ], t.prototype, "noWrap", 2);
120
- customElements.get("luzmo-button") || customElements.define("luzmo-button", t);
121
- customElements.get("luzmo-clear-button") || customElements.define("luzmo-clear-button", h);
122
- customElements.get("luzmo-close-button") || customElements.define("luzmo-close-button", f);
125
+ typeof customElements < "u" && !customElements.get("luzmo-button") && customElements.define("luzmo-button", t);
126
+ typeof customElements < "u" && !customElements.get("luzmo-clear-button") && customElements.define("luzmo-clear-button", h);
127
+ typeof customElements < "u" && !customElements.get("luzmo-close-button") && customElements.define("luzmo-close-button", f);
123
128
  export {
124
129
  t as LuzmoButton,
125
130
  h as LuzmoClearButton,