@luzmo/lucero 2.0.0 → 2.1.0

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 (155) hide show
  1. package/README.md +1 -0
  2. package/components/action-bar/index.cjs +1 -1
  3. package/components/action-bar/index.js +1 -1
  4. package/components/{action-bar-BhYEHEfo.js → action-bar-2FGCCKMW.js} +1 -1
  5. package/components/{action-bar-VhZT8kQM.cjs → action-bar-CXT4lT30.cjs} +1 -1
  6. package/components/action-button/index.cjs +1 -1
  7. package/components/action-button/index.js +1 -1
  8. package/components/action-button-BKnzGQR6.cjs +22 -0
  9. package/components/action-button-OB5MM04X.js +137 -0
  10. package/components/action-menu/index.cjs +1 -1
  11. package/components/action-menu/index.js +1 -1
  12. package/components/{action-menu-DREgNCXt.cjs → action-menu-CtMswuyc.cjs} +1 -1
  13. package/components/{action-menu-CkU-u55D.js → action-menu-Diehg1Kc.js} +2 -2
  14. package/components/badge/badge.d.ts +3 -0
  15. package/components/badge/index.cjs +1 -1
  16. package/components/badge/index.js +1 -1
  17. package/components/badge-CrUIOuV-.cjs +23 -0
  18. package/components/badge-DAGeawhJ.js +95 -0
  19. package/components/button/button-base.d.ts +3 -0
  20. package/components/button/index.cjs +1 -1
  21. package/components/button/index.js +2 -2
  22. package/components/button-DXWWEbir.js +125 -0
  23. package/components/{button-base-aTiE83bl.cjs → button-base-DiNxrttk.cjs} +3 -3
  24. package/components/{button-base-DsUg0bJB.js → button-base-DiPzVpp4.js} +12 -11
  25. package/components/button-l0fRopSN.cjs +20 -0
  26. package/components/calendar/index.cjs +1 -1
  27. package/components/calendar/index.js +1 -1
  28. package/components/{calendar-CXjdC7jm.js → calendar-C8u_88jX.js} +1 -1
  29. package/components/{calendar-DSlKZZCR.cjs → calendar-DZkKMs2L.cjs} +1 -1
  30. package/components/chat-message/index.cjs +1 -1
  31. package/components/chat-message/index.js +1 -1
  32. package/components/{chat-message-CJ7Xk7tz.js → chat-message-CXq0Trjx.js} +1 -1
  33. package/components/{chat-message-7cx2Bpo8.cjs → chat-message-t4a0r3R6.cjs} +1 -1
  34. package/components/{close-button-hicleVjQ.cjs → close-button-BntGLAcp.cjs} +1 -1
  35. package/components/{close-button-WomHVbgz.js → close-button-D12zZ9zC.js} +1 -1
  36. package/components/color-area/index.cjs +1 -1
  37. package/components/color-area/index.js +1 -1
  38. package/components/{color-area-ayGmH8dj.cjs → color-area-B_pRu9Vf.cjs} +6 -6
  39. package/components/{color-area-BRrtUbvH.js → color-area-DMpXKgPY.js} +9 -9
  40. package/components/color-menu/index.cjs +1 -1
  41. package/components/color-menu/index.js +1 -1
  42. package/components/{color-menu-DOq9PAWG.cjs → color-menu-CdETqhbP.cjs} +1 -1
  43. package/components/{color-menu-iKU6Vw8a.js → color-menu-jkdcr5ir.js} +2 -2
  44. package/components/color-picker/index.cjs +1 -1
  45. package/components/color-picker/index.js +1 -1
  46. package/components/{color-picker-D3WFls0M.cjs → color-picker-C4pvkA2k.cjs} +1 -1
  47. package/components/{color-picker-Bw5UKyME.js → color-picker-DF3gBQvH.js} +1 -1
  48. package/components/color-slider/index.cjs +1 -1
  49. package/components/color-slider/index.js +1 -1
  50. package/components/{color-slider-BiVpn9_U.cjs → color-slider-DLEM1nGA.cjs} +1 -1
  51. package/components/{color-slider-BtPNTmQu.js → color-slider-DejvUYrW.js} +1 -1
  52. package/components/date-range-picker/index.cjs +1 -1
  53. package/components/date-range-picker/index.js +1 -1
  54. package/components/{date-range-picker-DMq8EaiB.cjs → date-range-picker-9ioTuDZq.cjs} +1 -1
  55. package/components/{date-range-picker-DaHFLwQL.js → date-range-picker-DCOv5PYH.js} +2 -2
  56. package/components/date-time-picker/index.cjs +1 -1
  57. package/components/date-time-picker/index.js +1 -1
  58. package/components/{date-time-picker-hjeFVUz9.js → date-time-picker-ClgATXBy.js} +2 -2
  59. package/components/{date-time-picker-DdtcziBG.cjs → date-time-picker-DRjQTyGS.cjs} +1 -1
  60. package/components/index.cjs +1 -1
  61. package/components/index.js +34 -33
  62. package/components/infield-button/index.cjs +1 -1
  63. package/components/infield-button/index.js +1 -1
  64. package/components/{infield-button-BmGfFDDA.js → infield-button-C1mz69Qf.js} +1 -1
  65. package/components/{infield-button-Cdee_UPX.cjs → infield-button-CYO9V1eX.cjs} +1 -1
  66. package/components/language-resolution-BaKYDD1a.js +115 -0
  67. package/components/language-resolution-CSjktYg5.cjs +18 -0
  68. package/components/menu/index.cjs +1 -1
  69. package/components/menu/index.js +1 -1
  70. package/components/{menu-DXONqtwu.cjs → menu-Cq7BEv5Y.cjs} +2 -2
  71. package/components/{menu-C9ogB7Bq.js → menu-DY8q8qyn.js} +2 -2
  72. package/components/notice/index.cjs +1 -1
  73. package/components/notice/index.js +1 -1
  74. package/components/{notice-BeL9oE94.js → notice-s6QHF_tq.js} +1 -1
  75. package/components/{notice-COZLmk94.cjs → notice-xgrLOiC0.cjs} +1 -1
  76. package/components/number-field/index.cjs +1 -1
  77. package/components/number-field/index.js +1 -1
  78. package/components/number-field-04RFqrUa.cjs +57 -0
  79. package/components/{number-field-DjvWkjL8.js → number-field-BqnZS9Gx.js} +17 -17
  80. package/components/options/index.cjs +1 -1
  81. package/components/options/index.js +1 -1
  82. package/components/options/options.d.ts +3 -0
  83. package/components/{options-C1MoEq26.js → options-BqFBNoKA.js} +15 -14
  84. package/components/{options-yWbz0D6O.cjs → options-Dh4FJuAu.cjs} +13 -12
  85. package/components/picker/index.cjs +1 -1
  86. package/components/picker/index.js +1 -1
  87. package/components/picker/picker.d.ts +3 -0
  88. package/components/picker-D225VAbx.cjs +124 -0
  89. package/components/picker-button/index.cjs +1 -1
  90. package/components/picker-button/index.js +1 -1
  91. package/components/{picker-button-Dh2gGZ8R.cjs → picker-button-BR7oM7_M.cjs} +1 -1
  92. package/components/{picker-button-CF6yD_1d.js → picker-button-DVzLeTq8.js} +1 -1
  93. package/components/{picker-Bufw-biD.js → picker-f4fSGZX8.js} +58 -57
  94. package/components/prompt-box/index.cjs +1 -1
  95. package/components/prompt-box/index.js +1 -1
  96. package/components/{prompt-box-y7qWHF3P.js → prompt-box-BY1xKFZO.js} +2 -2
  97. package/components/{prompt-box-D358CWoY.cjs → prompt-box-Dg9S0C5x.cjs} +1 -1
  98. package/components/question-box/index.cjs +1 -1
  99. package/components/question-box/index.js +1 -1
  100. package/components/{question-box-9F6Ppakl.js → question-box-5VO9CM8H.js} +4 -4
  101. package/components/{question-box-DaAgC3_D.cjs → question-box-DvXRIiVG.cjs} +1 -1
  102. package/components/search/index.cjs +1 -1
  103. package/components/search/index.js +1 -1
  104. package/components/{search-CsNvKd8x.cjs → search-BhMhfCBh.cjs} +1 -1
  105. package/components/{search-B2DQb14U.js → search-C-EPZmTG.js} +1 -1
  106. package/components/select/index.cjs +1 -1
  107. package/components/select/index.js +1 -1
  108. package/components/{select-CE6pIRX3.js → select-CFtAPE-U.js} +9 -9
  109. package/components/{select-B_E-w1a2.cjs → select-JFwtVyhG.cjs} +2 -2
  110. package/components/slider/index.cjs +1 -1
  111. package/components/slider/index.js +1 -1
  112. package/components/{slider-CfgH3NK8.js → slider-B7QAhDTM.js} +2 -2
  113. package/components/{slider-CDrXecqO.cjs → slider-DxliwjT6.cjs} +2 -2
  114. package/components/{language-resolution-BUeKpSce.cjs → split-view/index.cjs} +1 -1
  115. package/components/split-view/index.d.ts +7 -0
  116. package/components/split-view/index.js +25 -0
  117. package/components/split-view/split-view-model.d.ts +12 -0
  118. package/components/split-view/split-view.d.ts +106 -0
  119. package/components/split-view-5uMSU_b7.cjs +43 -0
  120. package/components/split-view-FxpiSCem.js +359 -0
  121. package/components/status-light/index.cjs +1 -1
  122. package/components/status-light/index.js +1 -1
  123. package/components/status-light/status-light.d.ts +3 -0
  124. package/components/status-light-BYBYorYy.cjs +21 -0
  125. package/components/status-light-DC8qqO8q.js +86 -0
  126. package/components/tabs/index.cjs +1 -1
  127. package/components/tabs/index.js +1 -1
  128. package/components/{tabs-D1puCPrL.js → tabs-CjY4eX9W.js} +1 -1
  129. package/components/{tabs-CcnIX4jQ.cjs → tabs-ZwcVrVub.cjs} +1 -1
  130. package/components/tags/index.cjs +1 -1
  131. package/components/tags/index.js +1 -1
  132. package/components/tags/tag.d.ts +3 -0
  133. package/components/tags-B28zWEic.cjs +47 -0
  134. package/components/tags-BCKNzEaH.js +207 -0
  135. package/components/toast/index.cjs +1 -1
  136. package/components/toast/index.js +1 -1
  137. package/components/{toast-BPhdMJTx.cjs → toast-COQ7Xl5T.cjs} +1 -1
  138. package/components/{toast-D90C9Cim.js → toast-DlOeMDCI.js} +1 -1
  139. package/custom-elements.json +1 -1
  140. package/index.d.ts +1 -0
  141. package/package.json +7 -1
  142. package/utils/reactive-controllers/language-resolution.d.ts +32 -2
  143. package/components/action-button-CWAg-5tz.cjs +0 -22
  144. package/components/action-button-cULkUUi6.js +0 -137
  145. package/components/badge-BzQfqgq6.cjs +0 -23
  146. package/components/badge-Dnkh-mfN.js +0 -94
  147. package/components/button-BJ0Y6wlM.cjs +0 -20
  148. package/components/button-BtWr5Lag.js +0 -125
  149. package/components/language-resolution-DR30FsWE.js +0 -43
  150. package/components/number-field-D19qjVbk.cjs +0 -57
  151. package/components/picker-D6ZM08K8.cjs +0 -124
  152. package/components/status-light-BlfBJpqa.js +0 -85
  153. package/components/status-light-Bu0G8-lH.cjs +0 -21
  154. package/components/tags-Bw-y2Wfl.js +0 -206
  155. package/components/tags-Cr8ObbWn.cjs +0 -47
package/index.d.ts CHANGED
@@ -47,6 +47,7 @@ export * from './components/search';
47
47
  export * from './components/select';
48
48
  export * from './components/skeleton-loader';
49
49
  export * from './components/slider';
50
+ export * from './components/split-view';
50
51
  export * from './components/status-light';
51
52
  export * from './components/swatch';
52
53
  export * from './components/switch';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luzmo/lucero",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "homepage": "https://luzmo.com",
5
5
  "description": "Lucero - The design system for Luzmo",
6
6
  "type": "module",
@@ -316,6 +316,12 @@
316
316
  "import": "./components/slider/index.js",
317
317
  "require": "./components/slider/index.cjs"
318
318
  },
319
+ "./split-view": {
320
+ "types": "./components/split-view/index.d.ts",
321
+ "node": "./components/split-view/index.js",
322
+ "import": "./components/split-view/index.js",
323
+ "require": "./components/split-view/index.cjs"
324
+ },
319
325
  "./status-light": {
320
326
  "types": "./components/status-light/index.d.ts",
321
327
  "node": "./components/status-light/index.js",
@@ -1,11 +1,41 @@
1
- import type { ReactiveController, ReactiveElement } from 'lit';
1
+ import type { ReactiveController, ReactiveControllerHost } from 'lit';
2
+ type LanguageControllerHost = ReactiveControllerHost & HTMLElement & {
3
+ requestUpdate(name?: PropertyKey, oldValue?: unknown): void;
4
+ };
2
5
  export declare const languageResolverUpdatedSymbol: unique symbol;
3
6
  export declare class LanguageResolutionController implements ReactiveController {
4
7
  private host;
5
8
  language: string;
9
+ private documentObserver?;
6
10
  private unsubscribe?;
7
- constructor(host: ReactiveElement);
11
+ constructor(host: LanguageControllerHost);
8
12
  hostConnected(): void;
9
13
  hostDisconnected(): void;
14
+ private applyDocumentLanguage;
15
+ /**
16
+ * Applications without a language provider switch locale by setting `lang`
17
+ * on the document, so that attribute has to stay observed.
18
+ */
19
+ private observeDocumentLanguage;
10
20
  private resolveLanguage;
11
21
  }
22
+ /**
23
+ * Reflects the BCP 47 script of the nearest declared language so stylesheets
24
+ * can gate script-sensitive rules that CSS cannot express on its own.
25
+ */
26
+ export declare class LanguageScriptController implements ReactiveController {
27
+ private readonly _host;
28
+ private _observer?;
29
+ constructor(host: ReactiveControllerHost & HTMLElement);
30
+ hostConnected(): void;
31
+ hostUpdated(): void;
32
+ hostDisconnected(): void;
33
+ /**
34
+ * `:lang()` reacts to a `lang` declared anywhere above the host, so every
35
+ * composed root is watched rather than each ancestor individually, and `slot`
36
+ * is watched because reassignment moves the host under another ancestor.
37
+ */
38
+ private _observeLanguage;
39
+ private _reflectScript;
40
+ }
41
+ export {};
@@ -1,22 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./button-base-aTiE83bl.cjs");let r=require("lit"),i=require("lit/decorators.js"),a=require("@luzmo/icons");var o=`:host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family,var(--luzmo-sans-font-family-stack,var(--luzmo-font-family)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height,var(--luzmo-line-height-100,var(--line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration,var(--luzmo-animation-duration-100,var(--animation-duration-100))) ease-out, border-color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration-100,var(--animation-duration-100))) ease-out, color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration-100,var(--animation-duration-100))) ease-out, box-shadow var(--luzmo-button-animation-duration,var(--luzmo-animation-duration-100,var(--animation-duration-100))) ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible;border-style:solid!important}:host(:focus){outline:none}:host([disabled]),:host([disabled]){cursor:default}::slotted([slot=icon]){flex-shrink:0;justify-content:center;align-items:center;max-block-size:100%;display:flex}#label{text-align:center;place-self:center}#label:empty{display:none}@media (forced-colors:active){:host{--highcontrast-action-button-focus-indicator-color:ButtonText}:host:after{forced-color-adjust:none}:host([selected]){--highcontrast-action-button-background-color-default:Highlight;--highcontrast-action-button-background-color-hover:Highlight;--highcontrast-action-button-background-color-focus:Highlight;--highcontrast-action-button-background-color-down:Highlight;--highcontrast-action-button-background-color-disabled:ButtonFace;--highcontrast-action-button-border-color-default:HighlightText;--highcontrast-action-button-border-color-hover:HighlightText;--highcontrast-action-button-border-color-focus:HighlightText;--highcontrast-action-button-border-color-down:HighlightText;--highcontrast-action-button-border-color-disabled:GrayText;--highcontrast-action-button-content-color-default:HighlightText;--highcontrast-action-button-content-color-hover:HighlightText;--highcontrast-action-button-content-color-focus:HighlightText;--highcontrast-action-button-content-color-down:HighlightText;--highcontrast-action-button-content-color-disabled:GrayText}:host([selected]) .hold-affordance,:host([selected]) ::slotted([slot=icon]),:host([selected]) #label{forced-color-adjust:none}}:host{--action-button-focus-indicator-border-radius:calc(var(--action-button-border-radius) + var(--action-button-focus-indicator-gap));--action-button-edge-to-visual:calc(var(--action-button-edge-to-visual-size) - var(--action-button-border-width));--action-button-edge-to-text:calc(var(--action-button-edge-to-text-size) - var(--action-button-border-width));--action-button-edge-to-visual-only:calc(var(--action-button-edge-to-visual-only-size) - var(--action-button-border-width));min-inline-size:var(--luzmo-action-button-min-width,var(--action-button-min-width));block-size:var(--luzmo-action-button-height,var(--action-button-height));border-radius:var(--luzmo-action-button-border-radius,var(--action-button-border-radius));gap:calc(var(--luzmo-action-button-text-to-visual,var(--action-button-text-to-visual)) + var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)) - var(--luzmo-action-button-edge-to-visual-only,var(--action-button-edge-to-visual-only)));padding-inline:var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text));background-color:var(--highcontrast-action-button-background-color-default,var(--luzmo-action-button-background-color-default,var(--action-button-background-color-default)));color:var(--highcontrast-action-button-content-color-default,var(--luzmo-action-button-content-color-default,var(--action-button-content-color-default)));position:relative;border-width:var(--luzmo-action-button-border-width,var(--action-button-border-width))!important;border-color:var(--highcontrast-action-button-border-color-default,var(--luzmo-action-button-border-color-default,var(--action-button-border-color-default)))!important}:is(:host:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),:host([dir=rtl])){--logical-rotation:matrix(-1, 0, 0, 1, 0, 0)}@media (hover:hover){:host(:hover){background-color:var(--highcontrast-action-button-background-color-hover,var(--luzmo-action-button-background-color-hover,var(--action-button-background-color-hover)));color:var(--highcontrast-action-button-content-color-hover,var(--luzmo-action-button-content-color-hover,var(--action-button-content-color-hover)));border-color:var(--highcontrast-action-button-border-color-hover,var(--luzmo-action-button-border-color-hover,var(--action-button-border-color-hover)))!important}}:host(:focus-visible){background-color:var(--highcontrast-action-button-background-color-focus,var(--luzmo-action-button-background-color-focus,var(--action-button-background-color-focus)));color:var(--highcontrast-action-button-content-color-focus,var(--luzmo-action-button-content-color-focus,var(--action-button-content-color-focus)));border-color:var(--highcontrast-action-button-border-color-focus,var(--luzmo-action-button-border-color-focus,var(--action-button-border-color-focus)))!important}:host(:is(:active,[active])){background-color:var(--highcontrast-action-button-background-color-down,var(--luzmo-action-button-background-color-down,var(--action-button-background-color-down)));color:var(--highcontrast-action-button-content-color-down,var(--luzmo-action-button-content-color-down,var(--action-button-content-color-down)));border-color:var(--highcontrast-action-button-border-color-down,var(--luzmo-action-button-border-color-down,var(--action-button-border-color-down)))!important}:host([disabled]),:host([disabled]){background-color:var(--highcontrast-action-button-background-color-disabled,var(--luzmo-action-button-background-color-disabled,var(--action-button-background-color-disabled)));color:var(--highcontrast-action-button-content-color-disabled,var(--luzmo-action-button-content-color-disabled,var(--action-button-content-color-disabled)));border-color:var(--highcontrast-action-button-border-color-disabled,var(--luzmo-action-button-border-color-disabled,var(--action-button-border-color-disabled)))!important}:host([selected]){--luzmo-action-button-background-color-default:var(--luzmo-action-button-background-color-default-selected);--luzmo-action-button-background-color-hover:var(--luzmo-action-button-background-color-hover-selected);--luzmo-action-button-background-color-down:var(--luzmo-action-button-background-color-down-selected);--luzmo-action-button-background-color-focus:var(--luzmo-action-button-background-color-focus-selected);--luzmo-action-button-content-color-default:var(--luzmo-action-button-content-color-default-selected);--luzmo-action-button-content-color-hover:var(--luzmo-action-button-content-color-hover-selected);--luzmo-action-button-content-color-down:var(--luzmo-action-button-content-color-down-selected);--luzmo-action-button-content-color-focus:var(--luzmo-action-button-content-color-focus-selected)}:host([selected][emphasized]){--luzmo-action-button-background-color-default:var(--luzmo-action-button-background-color-default-selected-emphasized);--luzmo-action-button-background-color-hover:var(--luzmo-action-button-background-color-hover-selected-emphasized);--luzmo-action-button-background-color-down:var(--luzmo-action-button-background-color-down-selected-emphasized);--luzmo-action-button-background-color-focus:var(--luzmo-action-button-background-color-focus-selected-emphasized);--luzmo-action-button-content-color-default:var(--luzmo-action-button-content-color-default-selected-emphasized);--luzmo-action-button-content-color-hover:var(--luzmo-action-button-content-color-hover-selected-emphasized);--luzmo-action-button-content-color-down:var(--luzmo-action-button-content-color-down-selected-emphasized);--luzmo-action-button-content-color-focus:var(--luzmo-action-button-content-color-focus-selected-emphasized)}:host([selected][static-color=black]),:host([selected][static-color=white]){--luzmo-action-button-content-color-default:var(--luzmo-action-button-static-content-color);--luzmo-action-button-content-color-hover:var(--luzmo-action-button-static-content-color);--luzmo-action-button-content-color-down:var(--luzmo-action-button-static-content-color);--luzmo-action-button-content-color-focus:var(--luzmo-action-button-static-content-color)}::slotted([slot=icon]){min-inline-size:var(--luzmo-action-button-icon-size,var(--action-button-icon-size));color:inherit;margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual,var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual,var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)))}.hold-affordance+::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual,var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only,var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)))}.hold-affordance+[icon-only]::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){text-align:center;margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual-only,var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only,var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)))}#label{pointer-events:none;font-size:var(--luzmo-action-button-font-size,var(--action-button-font-size));white-space:nowrap;color:var(--luzmo-action-button-label-color,inherit);text-overflow:ellipsis;overflow:hidden}.hold-affordance{color:inherit;transform:var(--logical-rotation);font-size:var(--action-button-corner-triangle-size);position:absolute;inset-block-end:calc(var(--luzmo-action-button-edge-to-hold-icon,var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width,var(--action-button-border-width)));inset-inline-end:calc(var(--luzmo-action-button-edge-to-hold-icon,var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width,var(--action-button-border-width)))}:host{transition:border-color var(--luzmo-action-button-animation-duration,var(--action-button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-action-button-focus-indicator-gap,var(--action-button-focus-indicator-gap)) + var(--luzmo-action-button-border-width,var(--action-button-border-width))) * -1);border-radius:var(--luzmo-action-button-focus-indicator-border-radius,var(--action-button-focus-indicator-border-radius));transition:box-shadow var(--luzmo-action-button-animation-duration,var(--action-button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;inset:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-action-button-focus-indicator-width,var(--action-button-focus-indicator-width)) var(--highcontrast-action-button-focus-indicator-color,var(--luzmo-action-button-focus-indicator-color,var(--action-button-focus-indicator-color)))}:host{--action-button-animation-duration:var(--luzmo-animation-duration);--action-button-border-radius:var(--luzmo-border-radius);--action-button-border-width:var(--luzmo-border-width);--action-button-content-color-default:var(--luzmo-font-color);--action-button-content-color-hover:var(--luzmo-font-color-hover);--action-button-content-color-down:var(--luzmo-font-color-down);--action-button-content-color-focus:var(--luzmo-font-color-focus);--action-button-focus-indicator-gap:var(--luzmo-indicator-gap);--action-button-focus-indicator-width:var(--luzmo-indicator-width);--action-button-focus-indicator-color:var(--luzmo-indicator-color);--action-button-background-color-default:var(--luzmo-background-color);--action-button-background-color-hover:var(--luzmo-background-color-hover);--action-button-background-color-down:var(--luzmo-background-color-down);--action-button-background-color-focus:var(--luzmo-background-color-focus);--action-button-border-color-default:var(--luzmo-border-color);--action-button-border-color-hover:var(--luzmo-border-color-hover);--action-button-border-color-down:var(--luzmo-border-color-down);--action-button-border-color-focus:var(--luzmo-border-color-focus);--action-button-background-color-disabled:var(--luzmo-background-color);--action-button-border-color-disabled:var(--luzmo-border-color-disabled);--action-button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([treatment=fill]:not([quiet],[selected],[static-color]):is([variant=neutral],:not([variant]))){--action-button-background-color-default:var(--luzmo-background-color-highlight);--action-button-background-color-hover:var(--luzmo-background-color-highlight-hover);--action-button-background-color-down:var(--luzmo-background-color-highlight-down);--action-button-background-color-focus:var(--luzmo-background-color-highlight-focus);--action-button-border-color-hover:var(--luzmo-border-color);--action-button-background-color-disabled:var(--luzmo-background-color-disabled)}:host([quiet]){--action-button-background-color-default:transparent;--action-button-background-color-hover:var(--luzmo-background-color-hover);--action-button-background-color-down:var(--luzmo-background-color-down);--action-button-background-color-focus:var(--luzmo-background-color-focus);--action-button-background-color-disabled:transparent;--action-button-border-color-default:transparent;--action-button-border-color-hover:transparent;--action-button-border-color-down:transparent;--action-button-border-color-focus:transparent;--action-button-border-color-disabled:transparent}:host([selected]){--action-button-background-color-default:var(--luzmo-font-color);--action-button-background-color-hover:var(--luzmo-font-color-hover);--action-button-background-color-down:var(--luzmo-font-color-down);--action-button-background-color-focus:var(--luzmo-font-color-focus);--action-button-content-color-default:var(--luzmo-background-color);--action-button-content-color-hover:var(--luzmo-background-color);--action-button-content-color-down:var(--luzmo-background-color);--action-button-content-color-focus:var(--luzmo-background-color);--action-button-border-color-default:transparent;--action-button-border-color-hover:transparent;--action-button-border-color-down:transparent;--action-button-border-color-focus:transparent;--action-button-border-color-disabled:transparent;--action-button-background-color-disabled:var(--luzmo-background-color-disabled)}:host([selected][emphasized]){--action-button-background-color-default:var(--luzmo-primary);--action-button-background-color-hover:var(--luzmo-primary-hover);--action-button-background-color-down:var(--luzmo-primary-down);--action-button-background-color-focus:var(--luzmo-primary-focus);--action-button-content-color-default:var(--luzmo-primary-inverse-color);--action-button-content-color-hover:var(--luzmo-primary-inverse-color);--action-button-content-color-down:var(--luzmo-primary-inverse-color);--action-button-content-color-focus:var(--luzmo-primary-inverse-color)}:host([variant=primary]:not([quiet],[selected],[static-color])){--action-button-background-color-default:transparent;--action-button-background-color-hover:var(--luzmo-background-color-hover);--action-button-background-color-down:var(--luzmo-background-color-down);--action-button-background-color-focus:var(--luzmo-background-color-focus);--action-button-border-color-default:var(--luzmo-primary);--action-button-border-color-hover:var(--luzmo-primary-hover);--action-button-border-color-down:var(--luzmo-primary-down);--action-button-border-color-focus:var(--luzmo-primary-focus);--action-button-content-color-default:var(--luzmo-primary);--action-button-content-color-hover:var(--luzmo-primary-down);--action-button-content-color-down:var(--luzmo-primary-down);--action-button-content-color-focus:var(--luzmo-primary-focus);--action-button-background-color-disabled:transparent;--action-button-border-color-disabled:var(--luzmo-border-color-disabled);--action-button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([variant=negative]:not([static-color])){--action-button-background-color-hover:rgba(var(--luzmo-negative-color-rgb), .1);--action-button-background-color-down:rgba(var(--luzmo-negative-color-rgb), .16);--action-button-background-color-focus:rgba(var(--luzmo-negative-color-rgb), .1);--action-button-content-color-default:var(--luzmo-negative-color);--action-button-content-color-hover:var(--luzmo-negative-color-hover);--action-button-content-color-down:var(--luzmo-negative-color-down);--action-button-content-color-focus:var(--luzmo-negative-color-focus)}:host([variant=negative]:not([quiet],[selected],[static-color])){--action-button-border-color-default:var(--luzmo-negative-color);--action-button-border-color-hover:var(--luzmo-negative-color-hover);--action-button-border-color-down:var(--luzmo-negative-color-down);--action-button-border-color-focus:var(--luzmo-negative-color-focus)}:host([variant=negative][selected]:not([static-color])){--action-button-background-color-default:var(--luzmo-negative-color);--action-button-background-color-hover:var(--luzmo-negative-color-hover);--action-button-background-color-down:var(--luzmo-negative-color-down);--action-button-background-color-focus:var(--luzmo-negative-color-focus);--action-button-content-color-default:var(--luzmo-negative-inverse-color);--action-button-content-color-hover:var(--luzmo-negative-inverse-color);--action-button-content-color-down:var(--luzmo-negative-inverse-color);--action-button-content-color-focus:var(--luzmo-negative-inverse-color)}:host([static-color=black][quiet]),:host([static-color=white][quiet]){--action-button-border-color-default:transparent;--action-button-border-color-hover:transparent;--action-button-border-color-down:transparent;--action-button-border-color-focus:transparent;--action-button-border-color-disabled:transparent}:host([static-color=black]){--action-button-background-color-default:transparent;--action-button-background-color-hover:#00000040;--action-button-background-color-down:#0006;--action-button-background-color-focus:#00000040;--action-button-background-color-disabled:transparent;--action-button-border-color-default:#0006;--action-button-border-color-hover:#0000008c;--action-button-border-color-down:#000000b3;--action-button-border-color-focus:#00000040;--action-button-border-color-disabled:transparent;--action-button-content-color-default:#000;--action-button-content-color-hover:#000;--action-button-content-color-down:#000;--action-button-content-color-focus:#000;--action-button-content-color-disabled:#0000008c;--action-button-focus-indicator-color:#000}:host([static-color=black][selected]){--action-button-background-color-default:#000000e6;--action-button-background-color-hover:#000;--action-button-background-color-down:#000;--action-button-background-color-focus:#000;--action-button-background-color-disabled:#0000001a;--action-button-border-color-disabled:transparent;--action-button-content-color-default:#fff;--action-button-content-color-hover:#fff;--action-button-content-color-down:#fff;--action-button-content-color-focus:#fff}:host([static-color=black][selected][emphasized]){--action-button-background-color-default:#000000e6;--action-button-background-color-hover:#000;--action-button-background-color-down:#000;--action-button-background-color-focus:#000;--action-button-content-color-default:#fff;--action-button-content-color-hover:#fff;--action-button-content-color-down:#fff;--action-button-content-color-focus:#fff}:host([static-color=white]){--action-button-background-color-default:transparent;--action-button-background-color-hover:#ffffff40;--action-button-background-color-down:#fff6;--action-button-background-color-focus:#ffffff40;--action-button-background-color-disabled:transparent;--action-button-border-color-default:#fff6;--action-button-border-color-hover:#ffffff8c;--action-button-border-color-down:#ffffffb3;--action-button-border-color-focus:#ffffff8c;--action-button-border-color-disabled:#ffffff40;--action-button-content-color-default:#fff;--action-button-content-color-hover:#fff;--action-button-content-color-down:#fff;--action-button-content-color-focus:#fff;--action-button-content-color-disabled:#ffffff8c;--action-button-focus-indicator-color:#fff}:host([static-color=white][selected]){--action-button-background-color-default:#ffffffe6;--action-button-background-color-hover:#fff;--action-button-background-color-down:#fff;--action-button-background-color-focus:#fff;--action-button-background-color-disabled:#ffffff1a;--action-button-border-color-disabled:transparent;--action-button-content-color-default:#000;--action-button-content-color-hover:#000;--action-button-content-color-down:#000;--action-button-content-color-focus:#000}:host([static-color=white][selected][emphasized]){--action-button-background-color-default:#ffffffe6;--action-button-background-color-hover:#fff;--action-button-background-color-down:#fff;--action-button-background-color-focus:#fff;--action-button-content-color-default:#000}:host([variant=pill]),:host([variant=accent]),:host([variant=pill][size]),:host([variant=accent][size]){--action-button-min-width:auto}:host([variant=accent]){--action-button-background-color-default:color-mix(in oklch, var(--luzmo-primary), white 88%);--action-button-background-color-hover:color-mix(in oklch, var(--luzmo-primary), white 75%);--action-button-background-color-down:var(--action-button-background-color-hover);--action-button-background-color-focus:var(--action-button-background-color-hover);--action-button-border-color-default:color-mix(in oklch, var(--luzmo-primary), white 70%);--action-button-border-color-hover:color-mix(in oklch, var(--luzmo-primary), white 50%);--action-button-border-color-down:var(--action-button-border-color-hover);--action-button-border-color-focus:var(--action-button-border-color-hover);--action-button-content-color-default:color-mix(in oklch, var(--luzmo-primary), black 25%);--action-button-content-color-hover:var(--action-button-content-color-default);--action-button-content-color-down:var(--action-button-content-color-default);--action-button-content-color-focus:var(--action-button-content-color-default);--action-button-background-color-disabled:color-mix(in oklch, var(--luzmo-primary), white 92%);--action-button-border-color-disabled:color-mix(in oklch, var(--luzmo-primary), white 85%);--action-button-content-color-disabled:color-mix(in oklch, var(--luzmo-primary), white 40%)}:host{--action-button-min-width:var(--luzmo-component-height);--action-button-height:var(--luzmo-component-height);--action-button-icon-size:var(--luzmo-font-size-l);--action-button-font-size:var(--luzmo-font-size);--action-button-text-to-visual:var(--luzmo-spacing-2);--action-button-edge-to-hold-icon:var(--luzmo-spacing-2);--action-button-edge-to-visual-size:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--action-button-edge-to-visual-only-size:var(--luzmo-spacing-3);--action-button-edge-to-text-size:12px;--action-button-corner-triangle-size:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=xs]){--action-button-min-width:var(--luzmo-component-height-xs);--action-button-height:var(--luzmo-component-height-xs);--action-button-icon-size:var(--luzmo-font-size-s);--action-button-font-size:var(--luzmo-font-size-xs);--action-button-text-to-visual:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--action-button-edge-to-hold-icon:var(--luzmo-spacing-2);--action-button-edge-to-visual-size:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--action-button-edge-to-visual-only-size:var(--luzmo-spacing-2);--action-button-edge-to-text-size:var(--luzmo-spacing-2);--action-button-corner-triangle-size:var(--luzmo-spacing-2)}:host([size=s]){--action-button-min-width:var(--luzmo-component-height-s);--action-button-height:var(--luzmo-component-height-s);--action-button-icon-size:var(--luzmo-font-size);--action-button-font-size:var(--luzmo-font-size-s);--action-button-text-to-visual:var(--luzmo-spacing-3);--action-button-edge-to-hold-icon:var(--luzmo-spacing-2);--action-button-edge-to-visual-size:var(--luzmo-spacing-3);--action-button-edge-to-visual-only-size:var(--luzmo-spacing-2);--action-button-edge-to-text-size:var(--luzmo-spacing-3);--action-button-corner-triangle-size:var(--luzmo-spacing-2)}:host([size=l]){--action-button-min-width:var(--luzmo-component-height-l);--action-button-height:var(--luzmo-component-height-l);--action-button-icon-size:var(--luzmo-font-size-xl);--action-button-font-size:var(--luzmo-font-size-l);--action-button-text-to-visual:var(--luzmo-spacing-3);--action-button-edge-to-hold-icon:var(--luzmo-spacing-2);--action-button-edge-to-visual-size:var(--luzmo-spacing-4);--action-button-edge-to-visual-only-size:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--action-button-edge-to-text-size:var(--luzmo-spacing-5);--action-button-corner-triangle-size:var(--luzmo-spacing-3)}:host([size=xl]){--action-button-min-width:var(--luzmo-component-height-xl);--action-button-height:var(--luzmo-component-height-xl);--action-button-icon-size:var(--luzmo-font-size-xxl);--action-button-font-size:var(--luzmo-font-size-xl);--action-button-text-to-visual:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--action-button-edge-to-hold-icon:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--action-button-edge-to-visual-size:var(--luzmo-spacing-5);--action-button-edge-to-visual-only-size:var(--luzmo-spacing-4);--action-button-edge-to-text-size:var(--luzmo-spacing-5);--action-button-corner-triangle-size:var(--luzmo-spacing-3)}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--action-button-label-flex-grow);text-align:var(--action-button-label-text-align);pointer-events:none!important}:host([size=xs]){min-width:var(--action-button-height,0);--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-2) - var(--action-button-border-width))}:host([size=s]){--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-2) - var(--action-button-border-width))}:host([size=m]){--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1) - var(--action-button-border-width))}:host([size=l]){--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-3) - var(--action-button-border-width))}:host([size=xl]){--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-4) - var(--action-button-border-width))}@media (forced-colors:active){:host{--highcontrast-action-button-border-color-disabled:GrayText;--highcontrast-action-button-content-color-disabled:GrayText}}`,s,c=[`neutral`,`primary`,`negative`,`pill`,`accent`],l=class extends t.n(n.t,{validSizes:[`xs`,`s`,`m`,`l`,`xl`],noDefaultSize:!0}){static get styles(){return[...super.styles,(0,r.unsafeCSS)(o)]}get variant(){return this._variant}set variant(e){let t=c.includes(e)?e:`neutral`;if(t===this._variant){this.getAttribute(`variant`)!==t&&this.setAttribute(`variant`,t);return}let n=this._variant;this._variant=t,this.requestUpdate(`variant`,n),this.setAttribute(`variant`,t)}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||``,this._value?this.setAttribute(`value`,this._value):this.removeAttribute(`value`))}get itemText(){return(this.textContent||``).trim()}constructor(){super(),this.emphasized=!1,this.holdAffordance=!1,this.quiet=!1,this.treatment=`outline`,this.role=`button`,this.selected=!1,this.toggles=!1,this._variant=`neutral`,this._value=``,this.onClick=()=>{this.toggles&&(this.selected=!this.selected,this.dispatchEvent(new Event(`change`,{cancelable:!0,bubbles:!0,composed:!0}))||(this.selected=!this.selected))},this.addEventListener(`click`,this.onClick)}handlePointerdownHoldAffordance(e){e.button===0&&(this.addEventListener(`pointerup`,this.handlePointerupHoldAffordance),this.addEventListener(`pointercancel`,this.handlePointerupHoldAffordance),s=setTimeout(()=>{this.dispatchEvent(new CustomEvent(`longpress`,{bubbles:!0,composed:!0,detail:{source:`pointer`}}))},300))}handlePointerupHoldAffordance(){clearTimeout(s),this.removeEventListener(`pointerup`,this.handlePointerupHoldAffordance),this.removeEventListener(`pointercancel`,this.handlePointerupHoldAffordance)}handleKeydown(e){if(!this.holdAffordance)return super.handleKeydown(e);let{code:t,altKey:n}=e;(t===`Space`||n&&t===`ArrowDown`)&&(e.preventDefault(),t===`ArrowDown`&&(e.stopPropagation(),e.stopImmediatePropagation()),this.addEventListener(`keyup`,this.handleKeyup),this.active=!0)}handleKeyup(e){if(!this.holdAffordance)return super.handleKeyup(e);let{code:t,altKey:n}=e;(t===`Space`||n&&t===`ArrowDown`)&&(e.stopPropagation(),this.dispatchEvent(new CustomEvent(`longpress`,{bubbles:!0,composed:!0,detail:{source:`keyboard`}})),this.active=!1)}get buttonContent(){let e=super.buttonContent;return this.holdAffordance&&e.unshift(r.html`
19
- <div class="hold-affordance corner-triangle-${this.size}">
20
- ${(0,a.luzmoIcon)(a.luzmoCornerTriangle)}
21
- </div>
22
- `),e}updated(e){super.updated(e);let t=this.role===`button`,n=t&&(this.selected||this.toggles)&&!(this.hasAttribute(`aria-haspopup`)&&this.hasAttribute(`aria-expanded`));(e.has(`selected`)||e.has(`role`))&&(n?this.setAttribute(`aria-pressed`,this.selected?`true`:`false`):(this.removeAttribute(`aria-pressed`),t&&this.toggles&&this.hasAttribute(`aria-expanded`)&&this.setAttribute(`aria-expanded`,this.selected?`true`:`false`))),e.has(`holdAffordance`)&&(this.holdAffordance?this.addEventListener(`pointerdown`,this.handlePointerdownHoldAffordance):(this.removeEventListener(`pointerdown`,this.handlePointerdownHoldAffordance),this.handlePointerupHoldAffordance()))}};e.t([(0,i.property)({type:Boolean,reflect:!0})],l.prototype,`emphasized`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0,attribute:`hold-affordance`})],l.prototype,`holdAffordance`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],l.prototype,`quiet`,void 0),e.t([(0,i.property)({reflect:!0})],l.prototype,`treatment`,void 0),e.t([(0,i.property)({reflect:!0})],l.prototype,`role`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],l.prototype,`selected`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],l.prototype,`toggles`,void 0),e.t([(0,i.property)({reflect:!0,attribute:`static-color`})],l.prototype,`staticColor`,void 0),e.t([(0,i.property)()],l.prototype,`variant`,null),e.t([(0,i.property)({type:String})],l.prototype,`value`,null),customElements.get(`luzmo-action-button`)||customElements.define(`luzmo-action-button`,l),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});
@@ -1,137 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- import { t as e } from "./decorate-CkCg3wfh.js";
19
- import { n as t } from "./sized-mixin-DzQTebN-.js";
20
- import { t as n } from "./button-base-DsUg0bJB.js";
21
- import { html as r, unsafeCSS as i } from "lit";
22
- import { property as a } from "lit/decorators.js";
23
- import { luzmoCornerTriangle as o, luzmoIcon as s } from "@luzmo/icons";
24
- //#region src/components/action-button/action-button.module.scss?inline
25
- var c = ":host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family,var(--luzmo-sans-font-family-stack,var(--luzmo-font-family)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height,var(--luzmo-line-height-100,var(--line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration,var(--luzmo-animation-duration-100,var(--animation-duration-100))) ease-out, border-color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration-100,var(--animation-duration-100))) ease-out, color var(--luzmo-button-animation-duration,var(--luzmo-animation-duration-100,var(--animation-duration-100))) ease-out, box-shadow var(--luzmo-button-animation-duration,var(--luzmo-animation-duration-100,var(--animation-duration-100))) ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible;border-style:solid!important}:host(:focus){outline:none}:host([disabled]),:host([disabled]){cursor:default}::slotted([slot=icon]){flex-shrink:0;justify-content:center;align-items:center;max-block-size:100%;display:flex}#label{text-align:center;place-self:center}#label:empty{display:none}@media (forced-colors:active){:host{--highcontrast-action-button-focus-indicator-color:ButtonText}:host:after{forced-color-adjust:none}:host([selected]){--highcontrast-action-button-background-color-default:Highlight;--highcontrast-action-button-background-color-hover:Highlight;--highcontrast-action-button-background-color-focus:Highlight;--highcontrast-action-button-background-color-down:Highlight;--highcontrast-action-button-background-color-disabled:ButtonFace;--highcontrast-action-button-border-color-default:HighlightText;--highcontrast-action-button-border-color-hover:HighlightText;--highcontrast-action-button-border-color-focus:HighlightText;--highcontrast-action-button-border-color-down:HighlightText;--highcontrast-action-button-border-color-disabled:GrayText;--highcontrast-action-button-content-color-default:HighlightText;--highcontrast-action-button-content-color-hover:HighlightText;--highcontrast-action-button-content-color-focus:HighlightText;--highcontrast-action-button-content-color-down:HighlightText;--highcontrast-action-button-content-color-disabled:GrayText}:host([selected]) .hold-affordance,:host([selected]) ::slotted([slot=icon]),:host([selected]) #label{forced-color-adjust:none}}:host{--action-button-focus-indicator-border-radius:calc(var(--action-button-border-radius) + var(--action-button-focus-indicator-gap));--action-button-edge-to-visual:calc(var(--action-button-edge-to-visual-size) - var(--action-button-border-width));--action-button-edge-to-text:calc(var(--action-button-edge-to-text-size) - var(--action-button-border-width));--action-button-edge-to-visual-only:calc(var(--action-button-edge-to-visual-only-size) - var(--action-button-border-width));min-inline-size:var(--luzmo-action-button-min-width,var(--action-button-min-width));block-size:var(--luzmo-action-button-height,var(--action-button-height));border-radius:var(--luzmo-action-button-border-radius,var(--action-button-border-radius));gap:calc(var(--luzmo-action-button-text-to-visual,var(--action-button-text-to-visual)) + var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)) - var(--luzmo-action-button-edge-to-visual-only,var(--action-button-edge-to-visual-only)));padding-inline:var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text));background-color:var(--highcontrast-action-button-background-color-default,var(--luzmo-action-button-background-color-default,var(--action-button-background-color-default)));color:var(--highcontrast-action-button-content-color-default,var(--luzmo-action-button-content-color-default,var(--action-button-content-color-default)));position:relative;border-width:var(--luzmo-action-button-border-width,var(--action-button-border-width))!important;border-color:var(--highcontrast-action-button-border-color-default,var(--luzmo-action-button-border-color-default,var(--action-button-border-color-default)))!important}:is(:host:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),:host([dir=rtl])){--logical-rotation:matrix(-1, 0, 0, 1, 0, 0)}@media (hover:hover){:host(:hover){background-color:var(--highcontrast-action-button-background-color-hover,var(--luzmo-action-button-background-color-hover,var(--action-button-background-color-hover)));color:var(--highcontrast-action-button-content-color-hover,var(--luzmo-action-button-content-color-hover,var(--action-button-content-color-hover)));border-color:var(--highcontrast-action-button-border-color-hover,var(--luzmo-action-button-border-color-hover,var(--action-button-border-color-hover)))!important}}:host(:focus-visible){background-color:var(--highcontrast-action-button-background-color-focus,var(--luzmo-action-button-background-color-focus,var(--action-button-background-color-focus)));color:var(--highcontrast-action-button-content-color-focus,var(--luzmo-action-button-content-color-focus,var(--action-button-content-color-focus)));border-color:var(--highcontrast-action-button-border-color-focus,var(--luzmo-action-button-border-color-focus,var(--action-button-border-color-focus)))!important}:host(:is(:active,[active])){background-color:var(--highcontrast-action-button-background-color-down,var(--luzmo-action-button-background-color-down,var(--action-button-background-color-down)));color:var(--highcontrast-action-button-content-color-down,var(--luzmo-action-button-content-color-down,var(--action-button-content-color-down)));border-color:var(--highcontrast-action-button-border-color-down,var(--luzmo-action-button-border-color-down,var(--action-button-border-color-down)))!important}:host([disabled]),:host([disabled]){background-color:var(--highcontrast-action-button-background-color-disabled,var(--luzmo-action-button-background-color-disabled,var(--action-button-background-color-disabled)));color:var(--highcontrast-action-button-content-color-disabled,var(--luzmo-action-button-content-color-disabled,var(--action-button-content-color-disabled)));border-color:var(--highcontrast-action-button-border-color-disabled,var(--luzmo-action-button-border-color-disabled,var(--action-button-border-color-disabled)))!important}:host([selected]){--luzmo-action-button-background-color-default:var(--luzmo-action-button-background-color-default-selected);--luzmo-action-button-background-color-hover:var(--luzmo-action-button-background-color-hover-selected);--luzmo-action-button-background-color-down:var(--luzmo-action-button-background-color-down-selected);--luzmo-action-button-background-color-focus:var(--luzmo-action-button-background-color-focus-selected);--luzmo-action-button-content-color-default:var(--luzmo-action-button-content-color-default-selected);--luzmo-action-button-content-color-hover:var(--luzmo-action-button-content-color-hover-selected);--luzmo-action-button-content-color-down:var(--luzmo-action-button-content-color-down-selected);--luzmo-action-button-content-color-focus:var(--luzmo-action-button-content-color-focus-selected)}:host([selected][emphasized]){--luzmo-action-button-background-color-default:var(--luzmo-action-button-background-color-default-selected-emphasized);--luzmo-action-button-background-color-hover:var(--luzmo-action-button-background-color-hover-selected-emphasized);--luzmo-action-button-background-color-down:var(--luzmo-action-button-background-color-down-selected-emphasized);--luzmo-action-button-background-color-focus:var(--luzmo-action-button-background-color-focus-selected-emphasized);--luzmo-action-button-content-color-default:var(--luzmo-action-button-content-color-default-selected-emphasized);--luzmo-action-button-content-color-hover:var(--luzmo-action-button-content-color-hover-selected-emphasized);--luzmo-action-button-content-color-down:var(--luzmo-action-button-content-color-down-selected-emphasized);--luzmo-action-button-content-color-focus:var(--luzmo-action-button-content-color-focus-selected-emphasized)}:host([selected][static-color=black]),:host([selected][static-color=white]){--luzmo-action-button-content-color-default:var(--luzmo-action-button-static-content-color);--luzmo-action-button-content-color-hover:var(--luzmo-action-button-static-content-color);--luzmo-action-button-content-color-down:var(--luzmo-action-button-static-content-color);--luzmo-action-button-content-color-focus:var(--luzmo-action-button-static-content-color)}::slotted([slot=icon]){min-inline-size:var(--luzmo-action-button-icon-size,var(--action-button-icon-size));color:inherit;margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual,var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual,var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)))}.hold-affordance+::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual,var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only,var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)))}.hold-affordance+[icon-only]::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){text-align:center;margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual-only,var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only,var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text,var(--action-button-edge-to-text)))}#label{pointer-events:none;font-size:var(--luzmo-action-button-font-size,var(--action-button-font-size));white-space:nowrap;color:var(--luzmo-action-button-label-color,inherit);text-overflow:ellipsis;overflow:hidden}.hold-affordance{color:inherit;transform:var(--logical-rotation);font-size:var(--action-button-corner-triangle-size);position:absolute;inset-block-end:calc(var(--luzmo-action-button-edge-to-hold-icon,var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width,var(--action-button-border-width)));inset-inline-end:calc(var(--luzmo-action-button-edge-to-hold-icon,var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width,var(--action-button-border-width)))}:host{transition:border-color var(--luzmo-action-button-animation-duration,var(--action-button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-action-button-focus-indicator-gap,var(--action-button-focus-indicator-gap)) + var(--luzmo-action-button-border-width,var(--action-button-border-width))) * -1);border-radius:var(--luzmo-action-button-focus-indicator-border-radius,var(--action-button-focus-indicator-border-radius));transition:box-shadow var(--luzmo-action-button-animation-duration,var(--action-button-animation-duration)) ease-in-out;pointer-events:none;content:\"\";position:absolute;inset:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-action-button-focus-indicator-width,var(--action-button-focus-indicator-width)) var(--highcontrast-action-button-focus-indicator-color,var(--luzmo-action-button-focus-indicator-color,var(--action-button-focus-indicator-color)))}:host{--action-button-animation-duration:var(--luzmo-animation-duration);--action-button-border-radius:var(--luzmo-border-radius);--action-button-border-width:var(--luzmo-border-width);--action-button-content-color-default:var(--luzmo-font-color);--action-button-content-color-hover:var(--luzmo-font-color-hover);--action-button-content-color-down:var(--luzmo-font-color-down);--action-button-content-color-focus:var(--luzmo-font-color-focus);--action-button-focus-indicator-gap:var(--luzmo-indicator-gap);--action-button-focus-indicator-width:var(--luzmo-indicator-width);--action-button-focus-indicator-color:var(--luzmo-indicator-color);--action-button-background-color-default:var(--luzmo-background-color);--action-button-background-color-hover:var(--luzmo-background-color-hover);--action-button-background-color-down:var(--luzmo-background-color-down);--action-button-background-color-focus:var(--luzmo-background-color-focus);--action-button-border-color-default:var(--luzmo-border-color);--action-button-border-color-hover:var(--luzmo-border-color-hover);--action-button-border-color-down:var(--luzmo-border-color-down);--action-button-border-color-focus:var(--luzmo-border-color-focus);--action-button-background-color-disabled:var(--luzmo-background-color);--action-button-border-color-disabled:var(--luzmo-border-color-disabled);--action-button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([treatment=fill]:not([quiet],[selected],[static-color]):is([variant=neutral],:not([variant]))){--action-button-background-color-default:var(--luzmo-background-color-highlight);--action-button-background-color-hover:var(--luzmo-background-color-highlight-hover);--action-button-background-color-down:var(--luzmo-background-color-highlight-down);--action-button-background-color-focus:var(--luzmo-background-color-highlight-focus);--action-button-border-color-hover:var(--luzmo-border-color);--action-button-background-color-disabled:var(--luzmo-background-color-disabled)}:host([quiet]){--action-button-background-color-default:transparent;--action-button-background-color-hover:var(--luzmo-background-color-hover);--action-button-background-color-down:var(--luzmo-background-color-down);--action-button-background-color-focus:var(--luzmo-background-color-focus);--action-button-background-color-disabled:transparent;--action-button-border-color-default:transparent;--action-button-border-color-hover:transparent;--action-button-border-color-down:transparent;--action-button-border-color-focus:transparent;--action-button-border-color-disabled:transparent}:host([selected]){--action-button-background-color-default:var(--luzmo-font-color);--action-button-background-color-hover:var(--luzmo-font-color-hover);--action-button-background-color-down:var(--luzmo-font-color-down);--action-button-background-color-focus:var(--luzmo-font-color-focus);--action-button-content-color-default:var(--luzmo-background-color);--action-button-content-color-hover:var(--luzmo-background-color);--action-button-content-color-down:var(--luzmo-background-color);--action-button-content-color-focus:var(--luzmo-background-color);--action-button-border-color-default:transparent;--action-button-border-color-hover:transparent;--action-button-border-color-down:transparent;--action-button-border-color-focus:transparent;--action-button-border-color-disabled:transparent;--action-button-background-color-disabled:var(--luzmo-background-color-disabled)}:host([selected][emphasized]){--action-button-background-color-default:var(--luzmo-primary);--action-button-background-color-hover:var(--luzmo-primary-hover);--action-button-background-color-down:var(--luzmo-primary-down);--action-button-background-color-focus:var(--luzmo-primary-focus);--action-button-content-color-default:var(--luzmo-primary-inverse-color);--action-button-content-color-hover:var(--luzmo-primary-inverse-color);--action-button-content-color-down:var(--luzmo-primary-inverse-color);--action-button-content-color-focus:var(--luzmo-primary-inverse-color)}:host([variant=primary]:not([quiet],[selected],[static-color])){--action-button-background-color-default:transparent;--action-button-background-color-hover:var(--luzmo-background-color-hover);--action-button-background-color-down:var(--luzmo-background-color-down);--action-button-background-color-focus:var(--luzmo-background-color-focus);--action-button-border-color-default:var(--luzmo-primary);--action-button-border-color-hover:var(--luzmo-primary-hover);--action-button-border-color-down:var(--luzmo-primary-down);--action-button-border-color-focus:var(--luzmo-primary-focus);--action-button-content-color-default:var(--luzmo-primary);--action-button-content-color-hover:var(--luzmo-primary-down);--action-button-content-color-down:var(--luzmo-primary-down);--action-button-content-color-focus:var(--luzmo-primary-focus);--action-button-background-color-disabled:transparent;--action-button-border-color-disabled:var(--luzmo-border-color-disabled);--action-button-content-color-disabled:var(--luzmo-font-color-disabled)}:host([variant=negative]:not([static-color])){--action-button-background-color-hover:rgba(var(--luzmo-negative-color-rgb), .1);--action-button-background-color-down:rgba(var(--luzmo-negative-color-rgb), .16);--action-button-background-color-focus:rgba(var(--luzmo-negative-color-rgb), .1);--action-button-content-color-default:var(--luzmo-negative-color);--action-button-content-color-hover:var(--luzmo-negative-color-hover);--action-button-content-color-down:var(--luzmo-negative-color-down);--action-button-content-color-focus:var(--luzmo-negative-color-focus)}:host([variant=negative]:not([quiet],[selected],[static-color])){--action-button-border-color-default:var(--luzmo-negative-color);--action-button-border-color-hover:var(--luzmo-negative-color-hover);--action-button-border-color-down:var(--luzmo-negative-color-down);--action-button-border-color-focus:var(--luzmo-negative-color-focus)}:host([variant=negative][selected]:not([static-color])){--action-button-background-color-default:var(--luzmo-negative-color);--action-button-background-color-hover:var(--luzmo-negative-color-hover);--action-button-background-color-down:var(--luzmo-negative-color-down);--action-button-background-color-focus:var(--luzmo-negative-color-focus);--action-button-content-color-default:var(--luzmo-negative-inverse-color);--action-button-content-color-hover:var(--luzmo-negative-inverse-color);--action-button-content-color-down:var(--luzmo-negative-inverse-color);--action-button-content-color-focus:var(--luzmo-negative-inverse-color)}:host([static-color=black][quiet]),:host([static-color=white][quiet]){--action-button-border-color-default:transparent;--action-button-border-color-hover:transparent;--action-button-border-color-down:transparent;--action-button-border-color-focus:transparent;--action-button-border-color-disabled:transparent}:host([static-color=black]){--action-button-background-color-default:transparent;--action-button-background-color-hover:#00000040;--action-button-background-color-down:#0006;--action-button-background-color-focus:#00000040;--action-button-background-color-disabled:transparent;--action-button-border-color-default:#0006;--action-button-border-color-hover:#0000008c;--action-button-border-color-down:#000000b3;--action-button-border-color-focus:#00000040;--action-button-border-color-disabled:transparent;--action-button-content-color-default:#000;--action-button-content-color-hover:#000;--action-button-content-color-down:#000;--action-button-content-color-focus:#000;--action-button-content-color-disabled:#0000008c;--action-button-focus-indicator-color:#000}:host([static-color=black][selected]){--action-button-background-color-default:#000000e6;--action-button-background-color-hover:#000;--action-button-background-color-down:#000;--action-button-background-color-focus:#000;--action-button-background-color-disabled:#0000001a;--action-button-border-color-disabled:transparent;--action-button-content-color-default:#fff;--action-button-content-color-hover:#fff;--action-button-content-color-down:#fff;--action-button-content-color-focus:#fff}:host([static-color=black][selected][emphasized]){--action-button-background-color-default:#000000e6;--action-button-background-color-hover:#000;--action-button-background-color-down:#000;--action-button-background-color-focus:#000;--action-button-content-color-default:#fff;--action-button-content-color-hover:#fff;--action-button-content-color-down:#fff;--action-button-content-color-focus:#fff}:host([static-color=white]){--action-button-background-color-default:transparent;--action-button-background-color-hover:#ffffff40;--action-button-background-color-down:#fff6;--action-button-background-color-focus:#ffffff40;--action-button-background-color-disabled:transparent;--action-button-border-color-default:#fff6;--action-button-border-color-hover:#ffffff8c;--action-button-border-color-down:#ffffffb3;--action-button-border-color-focus:#ffffff8c;--action-button-border-color-disabled:#ffffff40;--action-button-content-color-default:#fff;--action-button-content-color-hover:#fff;--action-button-content-color-down:#fff;--action-button-content-color-focus:#fff;--action-button-content-color-disabled:#ffffff8c;--action-button-focus-indicator-color:#fff}:host([static-color=white][selected]){--action-button-background-color-default:#ffffffe6;--action-button-background-color-hover:#fff;--action-button-background-color-down:#fff;--action-button-background-color-focus:#fff;--action-button-background-color-disabled:#ffffff1a;--action-button-border-color-disabled:transparent;--action-button-content-color-default:#000;--action-button-content-color-hover:#000;--action-button-content-color-down:#000;--action-button-content-color-focus:#000}:host([static-color=white][selected][emphasized]){--action-button-background-color-default:#ffffffe6;--action-button-background-color-hover:#fff;--action-button-background-color-down:#fff;--action-button-background-color-focus:#fff;--action-button-content-color-default:#000}:host([variant=pill]),:host([variant=accent]),:host([variant=pill][size]),:host([variant=accent][size]){--action-button-min-width:auto}:host([variant=accent]){--action-button-background-color-default:color-mix(in oklch, var(--luzmo-primary), white 88%);--action-button-background-color-hover:color-mix(in oklch, var(--luzmo-primary), white 75%);--action-button-background-color-down:var(--action-button-background-color-hover);--action-button-background-color-focus:var(--action-button-background-color-hover);--action-button-border-color-default:color-mix(in oklch, var(--luzmo-primary), white 70%);--action-button-border-color-hover:color-mix(in oklch, var(--luzmo-primary), white 50%);--action-button-border-color-down:var(--action-button-border-color-hover);--action-button-border-color-focus:var(--action-button-border-color-hover);--action-button-content-color-default:color-mix(in oklch, var(--luzmo-primary), black 25%);--action-button-content-color-hover:var(--action-button-content-color-default);--action-button-content-color-down:var(--action-button-content-color-default);--action-button-content-color-focus:var(--action-button-content-color-default);--action-button-background-color-disabled:color-mix(in oklch, var(--luzmo-primary), white 92%);--action-button-border-color-disabled:color-mix(in oklch, var(--luzmo-primary), white 85%);--action-button-content-color-disabled:color-mix(in oklch, var(--luzmo-primary), white 40%)}:host{--action-button-min-width:var(--luzmo-component-height);--action-button-height:var(--luzmo-component-height);--action-button-icon-size:var(--luzmo-font-size-l);--action-button-font-size:var(--luzmo-font-size);--action-button-text-to-visual:var(--luzmo-spacing-2);--action-button-edge-to-hold-icon:var(--luzmo-spacing-2);--action-button-edge-to-visual-size:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--action-button-edge-to-visual-only-size:var(--luzmo-spacing-3);--action-button-edge-to-text-size:12px;--action-button-corner-triangle-size:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=xs]){--action-button-min-width:var(--luzmo-component-height-xs);--action-button-height:var(--luzmo-component-height-xs);--action-button-icon-size:var(--luzmo-font-size-s);--action-button-font-size:var(--luzmo-font-size-xs);--action-button-text-to-visual:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--action-button-edge-to-hold-icon:var(--luzmo-spacing-2);--action-button-edge-to-visual-size:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--action-button-edge-to-visual-only-size:var(--luzmo-spacing-2);--action-button-edge-to-text-size:var(--luzmo-spacing-2);--action-button-corner-triangle-size:var(--luzmo-spacing-2)}:host([size=s]){--action-button-min-width:var(--luzmo-component-height-s);--action-button-height:var(--luzmo-component-height-s);--action-button-icon-size:var(--luzmo-font-size);--action-button-font-size:var(--luzmo-font-size-s);--action-button-text-to-visual:var(--luzmo-spacing-3);--action-button-edge-to-hold-icon:var(--luzmo-spacing-2);--action-button-edge-to-visual-size:var(--luzmo-spacing-3);--action-button-edge-to-visual-only-size:var(--luzmo-spacing-2);--action-button-edge-to-text-size:var(--luzmo-spacing-3);--action-button-corner-triangle-size:var(--luzmo-spacing-2)}:host([size=l]){--action-button-min-width:var(--luzmo-component-height-l);--action-button-height:var(--luzmo-component-height-l);--action-button-icon-size:var(--luzmo-font-size-xl);--action-button-font-size:var(--luzmo-font-size-l);--action-button-text-to-visual:var(--luzmo-spacing-3);--action-button-edge-to-hold-icon:var(--luzmo-spacing-2);--action-button-edge-to-visual-size:var(--luzmo-spacing-4);--action-button-edge-to-visual-only-size:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--action-button-edge-to-text-size:var(--luzmo-spacing-5);--action-button-corner-triangle-size:var(--luzmo-spacing-3)}:host([size=xl]){--action-button-min-width:var(--luzmo-component-height-xl);--action-button-height:var(--luzmo-component-height-xl);--action-button-icon-size:var(--luzmo-font-size-xxl);--action-button-font-size:var(--luzmo-font-size-xl);--action-button-text-to-visual:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--action-button-edge-to-hold-icon:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--action-button-edge-to-visual-size:var(--luzmo-spacing-5);--action-button-edge-to-visual-only-size:var(--luzmo-spacing-4);--action-button-edge-to-text-size:var(--luzmo-spacing-5);--action-button-corner-triangle-size:var(--luzmo-spacing-3)}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--action-button-label-flex-grow);text-align:var(--action-button-label-text-align);pointer-events:none!important}:host([size=xs]){min-width:var(--action-button-height,0);--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-2) - var(--action-button-border-width))}:host([size=s]){--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-2) - var(--action-button-border-width))}:host([size=m]){--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1) - var(--action-button-border-width))}:host([size=l]){--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-3) - var(--action-button-border-width))}:host([size=xl]){--action-button-edge-to-visual-only:calc(var(--luzmo-spacing-4) - var(--action-button-border-width))}@media (forced-colors:active){:host{--highcontrast-action-button-border-color-disabled:GrayText;--highcontrast-action-button-content-color-disabled:GrayText}}", l, u = [
26
- "neutral",
27
- "primary",
28
- "negative",
29
- "pill",
30
- "accent"
31
- ], d = class extends t(n, {
32
- validSizes: [
33
- "xs",
34
- "s",
35
- "m",
36
- "l",
37
- "xl"
38
- ],
39
- noDefaultSize: !0
40
- }) {
41
- static get styles() {
42
- return [...super.styles, i(c)];
43
- }
44
- get variant() {
45
- return this._variant;
46
- }
47
- set variant(e) {
48
- let t = u.includes(e) ? e : "neutral";
49
- if (t === this._variant) {
50
- this.getAttribute("variant") !== t && this.setAttribute("variant", t);
51
- return;
52
- }
53
- let n = this._variant;
54
- this._variant = t, this.requestUpdate("variant", n), this.setAttribute("variant", t);
55
- }
56
- get value() {
57
- return this._value || this.itemText;
58
- }
59
- set value(e) {
60
- e !== this._value && (this._value = e || "", this._value ? this.setAttribute("value", this._value) : this.removeAttribute("value"));
61
- }
62
- get itemText() {
63
- return (this.textContent || "").trim();
64
- }
65
- constructor() {
66
- super(), this.emphasized = !1, this.holdAffordance = !1, this.quiet = !1, this.treatment = "outline", this.role = "button", this.selected = !1, this.toggles = !1, this._variant = "neutral", this._value = "", this.onClick = () => {
67
- this.toggles && (this.selected = !this.selected, this.dispatchEvent(new Event("change", {
68
- cancelable: !0,
69
- bubbles: !0,
70
- composed: !0
71
- })) || (this.selected = !this.selected));
72
- }, this.addEventListener("click", this.onClick);
73
- }
74
- handlePointerdownHoldAffordance(e) {
75
- e.button === 0 && (this.addEventListener("pointerup", this.handlePointerupHoldAffordance), this.addEventListener("pointercancel", this.handlePointerupHoldAffordance), l = setTimeout(() => {
76
- this.dispatchEvent(new CustomEvent("longpress", {
77
- bubbles: !0,
78
- composed: !0,
79
- detail: { source: "pointer" }
80
- }));
81
- }, 300));
82
- }
83
- handlePointerupHoldAffordance() {
84
- clearTimeout(l), this.removeEventListener("pointerup", this.handlePointerupHoldAffordance), this.removeEventListener("pointercancel", this.handlePointerupHoldAffordance);
85
- }
86
- handleKeydown(e) {
87
- if (!this.holdAffordance) return super.handleKeydown(e);
88
- let { code: t, altKey: n } = e;
89
- (t === "Space" || n && t === "ArrowDown") && (e.preventDefault(), t === "ArrowDown" && (e.stopPropagation(), e.stopImmediatePropagation()), this.addEventListener("keyup", this.handleKeyup), this.active = !0);
90
- }
91
- handleKeyup(e) {
92
- if (!this.holdAffordance) return super.handleKeyup(e);
93
- let { code: t, altKey: n } = e;
94
- (t === "Space" || n && t === "ArrowDown") && (e.stopPropagation(), this.dispatchEvent(new CustomEvent("longpress", {
95
- bubbles: !0,
96
- composed: !0,
97
- detail: { source: "keyboard" }
98
- })), this.active = !1);
99
- }
100
- get buttonContent() {
101
- let e = super.buttonContent;
102
- return this.holdAffordance && e.unshift(r`
103
- <div class="hold-affordance corner-triangle-${this.size}">
104
- ${s(o)}
105
- </div>
106
- `), e;
107
- }
108
- updated(e) {
109
- super.updated(e);
110
- let t = this.role === "button", n = t && (this.selected || this.toggles) && !(this.hasAttribute("aria-haspopup") && this.hasAttribute("aria-expanded"));
111
- (e.has("selected") || e.has("role")) && (n ? this.setAttribute("aria-pressed", this.selected ? "true" : "false") : (this.removeAttribute("aria-pressed"), t && this.toggles && this.hasAttribute("aria-expanded") && this.setAttribute("aria-expanded", this.selected ? "true" : "false"))), e.has("holdAffordance") && (this.holdAffordance ? this.addEventListener("pointerdown", this.handlePointerdownHoldAffordance) : (this.removeEventListener("pointerdown", this.handlePointerdownHoldAffordance), this.handlePointerupHoldAffordance()));
112
- }
113
- };
114
- //#endregion
115
- //#region src/components/action-button/index.ts
116
- e([a({
117
- type: Boolean,
118
- reflect: !0
119
- })], d.prototype, "emphasized", void 0), e([a({
120
- type: Boolean,
121
- reflect: !0,
122
- attribute: "hold-affordance"
123
- })], d.prototype, "holdAffordance", void 0), e([a({
124
- type: Boolean,
125
- reflect: !0
126
- })], d.prototype, "quiet", void 0), e([a({ reflect: !0 })], d.prototype, "treatment", void 0), e([a({ reflect: !0 })], d.prototype, "role", void 0), e([a({
127
- type: Boolean,
128
- reflect: !0
129
- })], d.prototype, "selected", void 0), e([a({
130
- type: Boolean,
131
- reflect: !0
132
- })], d.prototype, "toggles", void 0), e([a({
133
- reflect: !0,
134
- attribute: "static-color"
135
- })], d.prototype, "staticColor", void 0), e([a()], d.prototype, "variant", null), e([a({ type: String })], d.prototype, "value", null), customElements.get("luzmo-action-button") || customElements.define("luzmo-action-button", d);
136
- //#endregion
137
- export { d as t };
@@ -1,23 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./observe-slot-text-CvL-2ey3.cjs");let r=require("lit"),i=require("lit/decorators.js");var a=`:host{font-family:var(--luzmo-badge-font-family,var(--luzmo-font-family));background-color:var(--highcontrast-badge-background-color,var(--luzmo-badge-background-color,var(--badge-background-color)));color:var(--highcontrast-badge-content-color,var(--luzmo-badge-content-color,var(--badge-content-color)));border-radius:var(--luzmo-badge-border-radius,var(--badge-border-radius));min-block-size:var(--luzmo-badge-height,var(--badge-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:var(--luzmo-badge-max-inline-size,none);-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-badge-animation-duration,var(--badge-animation-duration)) ease-in-out, color var(--luzmo-badge-animation-duration,var(--badge-animation-duration)) ease-in-out, background-color var(--luzmo-badge-animation-duration,var(--badge-animation-duration)) ease-in-out;padding-inline:calc(var(--luzmo-badge-spacing-inline,var(--badge-spacing-inline)) - var(--luzmo-badge-border-width,var(--badge-border-width)));padding-block:var(--luzmo-spacing-1);justify-content:center;align-items:center;gap:var(--luzmo-badge-icon-spacing-inline-end,var(--badge-icon-spacing-inline-end));outline:none;display:inline-flex;position:relative;border-color:var(--highcontrast-badge-border-color,var(--luzmo-badge-border-color,var(--badge-border-color)))!important;border-width:var(--luzmo-badge-border-width,var(--badge-border-width))!important;border-style:solid!important}::slotted([slot=icon]){--icon-size:var(--luzmo-badge-icon-size,var(--badge-icon-size,calc(var(--luzmo-badge-height,var(--badge-height)) - var(--luzmo-badge-border-width,var(--badge-border-width)) * 2 - var(--luzmo-badge-icon-padding,4px) * 2)));flex-shrink:0;align-self:center}.label{box-sizing:border-box;line-height:1.3;font-weight:var(--luzmo-badge-font-weight,var(--badge-font-weight));font-size:var(--luzmo-badge-font-size,var(--badge-font-size));cursor:default;align-items:center;display:inline-flex}.label[hidden]{display:none!important}:host([icon-only]){padding-block:0;padding-inline:calc(var(--luzmo-badge-spacing-inline,var(--badge-spacing-inline)) * 1.25 - var(--luzmo-badge-border-width,var(--badge-border-width)));gap:0}:host([icon-only]) ::slotted([slot=icon]){align-self:center}:host([fixed]){border-radius:var(--luzmo-border-radius)}:host([fixed=block-start]){border-start-start-radius:0;border-start-end-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}:host([fixed=inline-start]){border-start-start-radius:0;border-end-start-radius:0}:host([fixed=inline-end]){border-start-end-radius:0;border-end-end-radius:0}@media (forced-colors:active){:host{--highcontrast-badge-border-color:ButtonText;--highcontrast-badge-background-color:ButtonFace;--highcontrast-badge-content-color:ButtonText;forced-color-adjust:none}:host([treatment=fill]){--highcontrast-badge-background-color:Highlight;--highcontrast-badge-content-color:HighlightText;--highcontrast-badge-border-color:Highlight}}:host{--badge-border-color:var(--luzmo-border-color-full);--badge-background-color:transparent;--badge-content-color:var(--luzmo-font-color);--badge-border-width:var(--luzmo-border-width);--badge-border-radius:calc(var(--badge-height) / 2);--badge-animation-duration:var(--luzmo-animation-duration);--badge-font-weight:var(--luzmo-font-weight);--badge-label-line-height:var(--luzmo-line-height);--badge-icon-spacing-inline-end:var(--luzmo-spacing-2);--badge-subtle-background-opacity:10%;--badge-subtle-content-mix:57%}:host([size=xs]){--badge-height:var(--luzmo-component-height-xxs);--badge-font-size:var(--luzmo-font-size-xs);--badge-icon-size:var(--luzmo-icon-size-xxs);--badge-spacing-inline:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--badge-icon-spacing-inline-end:var(--luzmo-spacing-1)}:host([size=s]){--badge-height:var(--luzmo-component-height-xs);--badge-font-size:var(--luzmo-font-size-s);--badge-icon-size:var(--luzmo-icon-size-s);--badge-spacing-inline:var(--luzmo-spacing-3);--badge-icon-spacing-inline-end:var(--luzmo-spacing-2)}:host{--badge-height:var(--luzmo-component-height-s);--badge-font-size:var(--luzmo-font-size);--badge-icon-size:var(--luzmo-icon-size-m);--badge-spacing-inline:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=l]){--badge-height:var(--luzmo-component-height);--badge-font-size:var(--luzmo-font-size);--badge-icon-size:var(--luzmo-icon-size-l);--badge-spacing-inline:var(--luzmo-spacing-4);--badge-icon-spacing-inline-end:var(--luzmo-spacing-3)}:host([size=xl]){--badge-height:var(--luzmo-component-height-l);--badge-font-size:var(--luzmo-font-size-l);--badge-icon-size:var(--luzmo-icon-size-xl);--badge-spacing-inline:var(--luzmo-spacing-5);--badge-icon-spacing-inline-end:var(--luzmo-spacing-3)}:host([variant=neutral]){--badge-border-color:var(--luzmo-border-color-full);--badge-content-color:var(--luzmo-font-color);--badge-fill-background-color:var(--luzmo-selected-color-hard);--badge-fill-content-color:var(--luzmo-background-color);--badge-subtle-content-color:var(--luzmo-neutral-on-subtle-color)}:host([variant=accent]){--badge-border-color:var(--luzmo-primary);--badge-content-color:var(--luzmo-primary);--badge-fill-background-color:var(--luzmo-primary);--badge-fill-content-color:var(--luzmo-primary-inverse-color);--badge-subtle-content-color:var(--luzmo-accent-on-subtle-color)}:host([variant=informative]){--badge-border-color:var(--luzmo-informative-color);--badge-content-color:var(--luzmo-informative-color);--badge-fill-background-color:var(--luzmo-informative-color);--badge-fill-content-color:var(--luzmo-informative-inverse-color);--badge-subtle-content-color:var(--luzmo-informative-on-subtle-color)}:host([variant=positive]){--badge-border-color:var(--luzmo-positive-color);--badge-content-color:var(--luzmo-positive-color);--badge-fill-background-color:var(--luzmo-positive-color);--badge-fill-content-color:var(--luzmo-positive-inverse-color);--badge-subtle-content-color:var(--luzmo-positive-on-subtle-color)}:host([variant=negative]){--badge-border-color:var(--luzmo-negative-color);--badge-content-color:var(--luzmo-negative-color);--badge-fill-background-color:var(--luzmo-negative-color);--badge-fill-content-color:var(--luzmo-negative-inverse-color);--badge-subtle-content-color:var(--luzmo-negative-on-subtle-color)}:host([variant=notice]){--badge-border-color:var(--luzmo-notice-color);--badge-content-color:var(--luzmo-notice-color);--badge-fill-background-color:var(--luzmo-notice-color);--badge-fill-content-color:var(--luzmo-notice-inverse-color);--badge-subtle-content-color:var(--luzmo-notice-on-subtle-color)}:host([variant=seafoam]){--badge-border-color:var(--luzmo-seafoam-color);--badge-content-color:var(--luzmo-seafoam-color);--badge-fill-background-color:var(--luzmo-seafoam-color);--badge-fill-content-color:white}:host([variant=indigo]){--badge-border-color:var(--luzmo-indigo-color);--badge-content-color:var(--luzmo-indigo-color);--badge-fill-background-color:var(--luzmo-indigo-color);--badge-fill-content-color:white}:host([variant=purple]){--badge-border-color:var(--luzmo-purple-color);--badge-content-color:var(--luzmo-purple-color);--badge-fill-background-color:var(--luzmo-purple-color);--badge-fill-content-color:white}:host([variant=fuchsia]){--badge-border-color:var(--luzmo-fuchsia-color);--badge-content-color:var(--luzmo-fuchsia-color);--badge-fill-background-color:var(--luzmo-fuchsia-color);--badge-fill-content-color:white}:host([variant=magenta]){--badge-border-color:var(--luzmo-magenta-color);--badge-content-color:var(--luzmo-magenta-color);--badge-fill-background-color:var(--luzmo-magenta-color);--badge-fill-content-color:white}:host([variant=yellow]){--badge-border-color:var(--luzmo-yellow-color);--badge-content-color:var(--luzmo-yellow-color);--badge-fill-background-color:var(--luzmo-yellow-color);--badge-fill-content-color:black}:host([variant=gray]){--badge-border-color:var(--luzmo-gray-color);--badge-content-color:var(--luzmo-gray-color);--badge-fill-background-color:var(--luzmo-gray-color);--badge-fill-content-color:white}:host([variant=red]){--badge-border-color:var(--luzmo-red-color);--badge-content-color:var(--luzmo-red-color);--badge-fill-background-color:var(--luzmo-red-color);--badge-fill-content-color:white}:host([variant=orange]){--badge-border-color:var(--luzmo-orange-color);--badge-content-color:var(--luzmo-orange-color);--badge-fill-background-color:var(--luzmo-orange-color);--badge-fill-content-color:black}:host([variant=chartreuse]){--badge-border-color:var(--luzmo-chartreuse-color);--badge-content-color:var(--luzmo-chartreuse-color);--badge-fill-background-color:var(--luzmo-chartreuse-color);--badge-fill-content-color:white}:host([variant=celery]){--badge-border-color:var(--luzmo-celery-color);--badge-content-color:var(--luzmo-celery-color);--badge-fill-background-color:var(--luzmo-celery-color);--badge-fill-content-color:black}:host([variant=green]){--badge-border-color:var(--luzmo-green-color);--badge-content-color:var(--luzmo-green-color);--badge-fill-background-color:var(--luzmo-green-color);--badge-fill-content-color:white}:host([variant=cyan]){--badge-border-color:var(--luzmo-cyan-color);--badge-content-color:var(--luzmo-cyan-color);--badge-fill-background-color:var(--luzmo-cyan-color);--badge-fill-content-color:white}:host([variant=blue]){--badge-border-color:var(--luzmo-blue-color);--badge-content-color:var(--luzmo-blue-color);--badge-fill-background-color:var(--luzmo-blue-color);--badge-fill-content-color:white}:host([treatment=outline]){--badge-background-color:transparent}:host([treatment=subtle]){--badge-subtle-color:var(--badge-fill-background-color,var(--luzmo-selected-color-hard));--badge-background-color:color-mix(in srgb, var(--badge-subtle-color) var(--badge-subtle-background-opacity), var(--luzmo-background-color));--badge-content-color:var(--badge-subtle-content-color,color-mix(in oklch, var(--badge-subtle-color), var(--luzmo-font-color) var(--badge-subtle-content-mix)))}:host([treatment=fill]){--badge-background-color:var(--badge-fill-background-color,var(--luzmo-selected-color-hard));--badge-content-color:var(--badge-fill-content-color,white);--badge-border-color:transparent}`,o=[`accent`,`neutral`,`informative`,`positive`,`negative`,`notice`,`seafoam`,`indigo`,`purple`,`fuchsia`,`magenta`,`yellow`,`gray`,`red`,`orange`,`chartreuse`,`celery`,`green`,`cyan`,`blue`],s=class extends t.n(n.t(e.n),{validSizes:[`xs`,`s`,`m`,`l`,`xl`],noDefaultSize:!0}){constructor(...e){super(...e),this._variant=`neutral`,this.treatment=`outline`}static get styles(){return[(0,r.unsafeCSS)(a)]}get variant(){return this._variant}set variant(e){e!==this._variant&&(o.includes(e)?(this._variant=e,this.setAttribute(`variant`,e)):(this._variant=`neutral`,this.setAttribute(`variant`,`neutral`)))}handleIconSlotChange(e){e.target.assignedElements().forEach(e=>{e.tagName.toLowerCase()===`luzmo-icon`&&e.setAttribute(`block`,``)})}get hasLabel(){return this.slotHasContent}render(){return r.html`
19
- <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
20
- <span class="label" ?hidden=${!this.hasLabel}>
21
- <slot @slotchange=${this.manageTextObservedSlot}></slot>
22
- </span>
23
- `}updated(e){super.updated(e),this.toggleAttribute(`icon-only`,!this.slotHasContent)}firstUpdated(e){super.firstUpdated(e),this.hasAttribute(`role`)||this.setAttribute(`role`,`status`),this.hasAttribute(`variant`)||this.setAttribute(`variant`,this.variant),this.hasAttribute(`treatment`)||this.setAttribute(`treatment`,this.treatment)}};e.t([(0,i.property)({reflect:!0})],s.prototype,`variant`,null),e.t([(0,i.property)({reflect:!0})],s.prototype,`treatment`,void 0),e.t([(0,i.property)({reflect:!0})],s.prototype,`fixed`,void 0),customElements.get(`luzmo-badge`)||customElements.define(`luzmo-badge`,s),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});
@@ -1,94 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- import { n as e, t } from "./decorate-CkCg3wfh.js";
19
- import { n } from "./sized-mixin-DzQTebN-.js";
20
- import { t as r } from "./observe-slot-text-Db8Kx3P-.js";
21
- import { html as i, unsafeCSS as a } from "lit";
22
- import { property as o } from "lit/decorators.js";
23
- //#region src/components/badge/badge.module.scss?inline
24
- var s = ":host{font-family:var(--luzmo-badge-font-family,var(--luzmo-font-family));background-color:var(--highcontrast-badge-background-color,var(--luzmo-badge-background-color,var(--badge-background-color)));color:var(--highcontrast-badge-content-color,var(--luzmo-badge-content-color,var(--badge-content-color)));border-radius:var(--luzmo-badge-border-radius,var(--badge-border-radius));min-block-size:var(--luzmo-badge-height,var(--badge-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:var(--luzmo-badge-max-inline-size,none);-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-badge-animation-duration,var(--badge-animation-duration)) ease-in-out, color var(--luzmo-badge-animation-duration,var(--badge-animation-duration)) ease-in-out, background-color var(--luzmo-badge-animation-duration,var(--badge-animation-duration)) ease-in-out;padding-inline:calc(var(--luzmo-badge-spacing-inline,var(--badge-spacing-inline)) - var(--luzmo-badge-border-width,var(--badge-border-width)));padding-block:var(--luzmo-spacing-1);justify-content:center;align-items:center;gap:var(--luzmo-badge-icon-spacing-inline-end,var(--badge-icon-spacing-inline-end));outline:none;display:inline-flex;position:relative;border-color:var(--highcontrast-badge-border-color,var(--luzmo-badge-border-color,var(--badge-border-color)))!important;border-width:var(--luzmo-badge-border-width,var(--badge-border-width))!important;border-style:solid!important}::slotted([slot=icon]){--icon-size:var(--luzmo-badge-icon-size,var(--badge-icon-size,calc(var(--luzmo-badge-height,var(--badge-height)) - var(--luzmo-badge-border-width,var(--badge-border-width)) * 2 - var(--luzmo-badge-icon-padding,4px) * 2)));flex-shrink:0;align-self:center}.label{box-sizing:border-box;line-height:1.3;font-weight:var(--luzmo-badge-font-weight,var(--badge-font-weight));font-size:var(--luzmo-badge-font-size,var(--badge-font-size));cursor:default;align-items:center;display:inline-flex}.label[hidden]{display:none!important}:host([icon-only]){padding-block:0;padding-inline:calc(var(--luzmo-badge-spacing-inline,var(--badge-spacing-inline)) * 1.25 - var(--luzmo-badge-border-width,var(--badge-border-width)));gap:0}:host([icon-only]) ::slotted([slot=icon]){align-self:center}:host([fixed]){border-radius:var(--luzmo-border-radius)}:host([fixed=block-start]){border-start-start-radius:0;border-start-end-radius:0}:host([fixed=block-end]){border-end-end-radius:0;border-end-start-radius:0}:host([fixed=inline-start]){border-start-start-radius:0;border-end-start-radius:0}:host([fixed=inline-end]){border-start-end-radius:0;border-end-end-radius:0}@media (forced-colors:active){:host{--highcontrast-badge-border-color:ButtonText;--highcontrast-badge-background-color:ButtonFace;--highcontrast-badge-content-color:ButtonText;forced-color-adjust:none}:host([treatment=fill]){--highcontrast-badge-background-color:Highlight;--highcontrast-badge-content-color:HighlightText;--highcontrast-badge-border-color:Highlight}}:host{--badge-border-color:var(--luzmo-border-color-full);--badge-background-color:transparent;--badge-content-color:var(--luzmo-font-color);--badge-border-width:var(--luzmo-border-width);--badge-border-radius:calc(var(--badge-height) / 2);--badge-animation-duration:var(--luzmo-animation-duration);--badge-font-weight:var(--luzmo-font-weight);--badge-label-line-height:var(--luzmo-line-height);--badge-icon-spacing-inline-end:var(--luzmo-spacing-2);--badge-subtle-background-opacity:10%;--badge-subtle-content-mix:57%}:host([size=xs]){--badge-height:var(--luzmo-component-height-xxs);--badge-font-size:var(--luzmo-font-size-xs);--badge-icon-size:var(--luzmo-icon-size-xxs);--badge-spacing-inline:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--badge-icon-spacing-inline-end:var(--luzmo-spacing-1)}:host([size=s]){--badge-height:var(--luzmo-component-height-xs);--badge-font-size:var(--luzmo-font-size-s);--badge-icon-size:var(--luzmo-icon-size-s);--badge-spacing-inline:var(--luzmo-spacing-3);--badge-icon-spacing-inline-end:var(--luzmo-spacing-2)}:host{--badge-height:var(--luzmo-component-height-s);--badge-font-size:var(--luzmo-font-size);--badge-icon-size:var(--luzmo-icon-size-m);--badge-spacing-inline:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=l]){--badge-height:var(--luzmo-component-height);--badge-font-size:var(--luzmo-font-size);--badge-icon-size:var(--luzmo-icon-size-l);--badge-spacing-inline:var(--luzmo-spacing-4);--badge-icon-spacing-inline-end:var(--luzmo-spacing-3)}:host([size=xl]){--badge-height:var(--luzmo-component-height-l);--badge-font-size:var(--luzmo-font-size-l);--badge-icon-size:var(--luzmo-icon-size-xl);--badge-spacing-inline:var(--luzmo-spacing-5);--badge-icon-spacing-inline-end:var(--luzmo-spacing-3)}:host([variant=neutral]){--badge-border-color:var(--luzmo-border-color-full);--badge-content-color:var(--luzmo-font-color);--badge-fill-background-color:var(--luzmo-selected-color-hard);--badge-fill-content-color:var(--luzmo-background-color);--badge-subtle-content-color:var(--luzmo-neutral-on-subtle-color)}:host([variant=accent]){--badge-border-color:var(--luzmo-primary);--badge-content-color:var(--luzmo-primary);--badge-fill-background-color:var(--luzmo-primary);--badge-fill-content-color:var(--luzmo-primary-inverse-color);--badge-subtle-content-color:var(--luzmo-accent-on-subtle-color)}:host([variant=informative]){--badge-border-color:var(--luzmo-informative-color);--badge-content-color:var(--luzmo-informative-color);--badge-fill-background-color:var(--luzmo-informative-color);--badge-fill-content-color:var(--luzmo-informative-inverse-color);--badge-subtle-content-color:var(--luzmo-informative-on-subtle-color)}:host([variant=positive]){--badge-border-color:var(--luzmo-positive-color);--badge-content-color:var(--luzmo-positive-color);--badge-fill-background-color:var(--luzmo-positive-color);--badge-fill-content-color:var(--luzmo-positive-inverse-color);--badge-subtle-content-color:var(--luzmo-positive-on-subtle-color)}:host([variant=negative]){--badge-border-color:var(--luzmo-negative-color);--badge-content-color:var(--luzmo-negative-color);--badge-fill-background-color:var(--luzmo-negative-color);--badge-fill-content-color:var(--luzmo-negative-inverse-color);--badge-subtle-content-color:var(--luzmo-negative-on-subtle-color)}:host([variant=notice]){--badge-border-color:var(--luzmo-notice-color);--badge-content-color:var(--luzmo-notice-color);--badge-fill-background-color:var(--luzmo-notice-color);--badge-fill-content-color:var(--luzmo-notice-inverse-color);--badge-subtle-content-color:var(--luzmo-notice-on-subtle-color)}:host([variant=seafoam]){--badge-border-color:var(--luzmo-seafoam-color);--badge-content-color:var(--luzmo-seafoam-color);--badge-fill-background-color:var(--luzmo-seafoam-color);--badge-fill-content-color:white}:host([variant=indigo]){--badge-border-color:var(--luzmo-indigo-color);--badge-content-color:var(--luzmo-indigo-color);--badge-fill-background-color:var(--luzmo-indigo-color);--badge-fill-content-color:white}:host([variant=purple]){--badge-border-color:var(--luzmo-purple-color);--badge-content-color:var(--luzmo-purple-color);--badge-fill-background-color:var(--luzmo-purple-color);--badge-fill-content-color:white}:host([variant=fuchsia]){--badge-border-color:var(--luzmo-fuchsia-color);--badge-content-color:var(--luzmo-fuchsia-color);--badge-fill-background-color:var(--luzmo-fuchsia-color);--badge-fill-content-color:white}:host([variant=magenta]){--badge-border-color:var(--luzmo-magenta-color);--badge-content-color:var(--luzmo-magenta-color);--badge-fill-background-color:var(--luzmo-magenta-color);--badge-fill-content-color:white}:host([variant=yellow]){--badge-border-color:var(--luzmo-yellow-color);--badge-content-color:var(--luzmo-yellow-color);--badge-fill-background-color:var(--luzmo-yellow-color);--badge-fill-content-color:black}:host([variant=gray]){--badge-border-color:var(--luzmo-gray-color);--badge-content-color:var(--luzmo-gray-color);--badge-fill-background-color:var(--luzmo-gray-color);--badge-fill-content-color:white}:host([variant=red]){--badge-border-color:var(--luzmo-red-color);--badge-content-color:var(--luzmo-red-color);--badge-fill-background-color:var(--luzmo-red-color);--badge-fill-content-color:white}:host([variant=orange]){--badge-border-color:var(--luzmo-orange-color);--badge-content-color:var(--luzmo-orange-color);--badge-fill-background-color:var(--luzmo-orange-color);--badge-fill-content-color:black}:host([variant=chartreuse]){--badge-border-color:var(--luzmo-chartreuse-color);--badge-content-color:var(--luzmo-chartreuse-color);--badge-fill-background-color:var(--luzmo-chartreuse-color);--badge-fill-content-color:white}:host([variant=celery]){--badge-border-color:var(--luzmo-celery-color);--badge-content-color:var(--luzmo-celery-color);--badge-fill-background-color:var(--luzmo-celery-color);--badge-fill-content-color:black}:host([variant=green]){--badge-border-color:var(--luzmo-green-color);--badge-content-color:var(--luzmo-green-color);--badge-fill-background-color:var(--luzmo-green-color);--badge-fill-content-color:white}:host([variant=cyan]){--badge-border-color:var(--luzmo-cyan-color);--badge-content-color:var(--luzmo-cyan-color);--badge-fill-background-color:var(--luzmo-cyan-color);--badge-fill-content-color:white}:host([variant=blue]){--badge-border-color:var(--luzmo-blue-color);--badge-content-color:var(--luzmo-blue-color);--badge-fill-background-color:var(--luzmo-blue-color);--badge-fill-content-color:white}:host([treatment=outline]){--badge-background-color:transparent}:host([treatment=subtle]){--badge-subtle-color:var(--badge-fill-background-color,var(--luzmo-selected-color-hard));--badge-background-color:color-mix(in srgb, var(--badge-subtle-color) var(--badge-subtle-background-opacity), var(--luzmo-background-color));--badge-content-color:var(--badge-subtle-content-color,color-mix(in oklch, var(--badge-subtle-color), var(--luzmo-font-color) var(--badge-subtle-content-mix)))}:host([treatment=fill]){--badge-background-color:var(--badge-fill-background-color,var(--luzmo-selected-color-hard));--badge-content-color:var(--badge-fill-content-color,white);--badge-border-color:transparent}", c = [
25
- "accent",
26
- "neutral",
27
- "informative",
28
- "positive",
29
- "negative",
30
- "notice",
31
- "seafoam",
32
- "indigo",
33
- "purple",
34
- "fuchsia",
35
- "magenta",
36
- "yellow",
37
- "gray",
38
- "red",
39
- "orange",
40
- "chartreuse",
41
- "celery",
42
- "green",
43
- "cyan",
44
- "blue"
45
- ], l = class extends n(r(e), {
46
- validSizes: [
47
- "xs",
48
- "s",
49
- "m",
50
- "l",
51
- "xl"
52
- ],
53
- noDefaultSize: !0
54
- }) {
55
- constructor(...e) {
56
- super(...e), this._variant = "neutral", this.treatment = "outline";
57
- }
58
- static get styles() {
59
- return [a(s)];
60
- }
61
- get variant() {
62
- return this._variant;
63
- }
64
- set variant(e) {
65
- e !== this._variant && (c.includes(e) ? (this._variant = e, this.setAttribute("variant", e)) : (this._variant = "neutral", this.setAttribute("variant", "neutral")));
66
- }
67
- handleIconSlotChange(e) {
68
- e.target.assignedElements().forEach((e) => {
69
- e.tagName.toLowerCase() === "luzmo-icon" && e.setAttribute("block", "");
70
- });
71
- }
72
- get hasLabel() {
73
- return this.slotHasContent;
74
- }
75
- render() {
76
- return i`
77
- <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
78
- <span class="label" ?hidden=${!this.hasLabel}>
79
- <slot @slotchange=${this.manageTextObservedSlot}></slot>
80
- </span>
81
- `;
82
- }
83
- updated(e) {
84
- super.updated(e), this.toggleAttribute("icon-only", !this.slotHasContent);
85
- }
86
- firstUpdated(e) {
87
- super.firstUpdated(e), this.hasAttribute("role") || this.setAttribute("role", "status"), this.hasAttribute("variant") || this.setAttribute("variant", this.variant), this.hasAttribute("treatment") || this.setAttribute("treatment", this.treatment);
88
- }
89
- };
90
- //#endregion
91
- //#region src/components/badge/index.ts
92
- t([o({ reflect: !0 })], l.prototype, "variant", null), t([o({ reflect: !0 })], l.prototype, "treatment", void 0), t([o({ reflect: !0 })], l.prototype, "fixed", void 0), customElements.get("luzmo-badge") || customElements.define("luzmo-badge", l);
93
- //#endregion
94
- export { l as t };