@orangelogic/design-system 4.51.0 → 4.52.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 (138) hide show
  1. package/library/chunks/{array-line-clamp.HGGPocNC.js → array-line-clamp.DKxxZlon.js} +2 -2
  2. package/library/chunks/{asset-link-format.CV-Jw-hk.js → asset-link-format.B_gS4nTL.js} +2 -2
  3. package/library/chunks/{bicolor-picker.BGSxhZJ-.js → bicolor-picker.YUjpxOEl.js} +1 -1
  4. package/library/chunks/{block-width.B8m9MQM3.js → block-width.BDpJyD-F.js} +27 -27
  5. package/library/chunks/{border-input-group.wXw6aSGa.js → border-input-group.D5V40_dV.js} +1 -1
  6. package/library/chunks/{color-picker.DlcAbY3b.js → color-picker.B6zsp9q3.js} +108 -108
  7. package/library/chunks/{color-swatch-group.BdYLfI59.js → color-swatch-group.C-4jpi7T.js} +109 -109
  8. package/library/chunks/{color-swatch.D31RnyZs.js → color-swatch.Biz89VJr.js} +1 -1
  9. package/library/chunks/{config-manager.OCrUXBER.js → config-manager.D4XcNU1d.js} +15 -15
  10. package/library/chunks/{configs-controller.Cc-Lt6BH.js → configs-controller.C8z7oMRd.js} +5 -5
  11. package/library/chunks/{corner-position-input-group.DmmX8lEw.js → corner-position-input-group.vhSOueRn.js} +1 -1
  12. package/library/chunks/{diff.DAFtnzhM.js → diff.DZjfy2VU.js} +4 -4
  13. package/library/chunks/{document-viewer.CpC54CmZ.js → document-viewer.DVV4HsLS.js} +3 -3
  14. package/library/chunks/{dynamic-select.CtdC5OzH.js → dynamic-select.DmTXLyzH.js} +5 -5
  15. package/library/chunks/{file-on-demand.B4KUSqtB.js → file-on-demand.CLwTe72F.js} +9 -9
  16. package/library/chunks/{folder-select.DEGiL0pP.js → folder-select.BF1l6Zah.js} +20 -20
  17. package/library/chunks/{image.B87-7U_Z.js → image.C6-Opjew.js} +10 -10
  18. package/library/chunks/{line-clamp.BFh7eXXl.js → line-clamp.COXyDBRB.js} +23 -18
  19. package/library/chunks/{masonry.H7Hpnx9d.js → masonry.4Lcy37gf.js} +1 -1
  20. package/library/chunks/{pagination.ca5R1wld.js → pagination.Mr-XiQBd.js} +1 -1
  21. package/library/chunks/{radio-card.DTRD2YQ6.js → radio-card.jROctGtI.js} +1 -1
  22. package/library/chunks/{range.BUjztx8Q.js → range.CQzHuhd9.js} +10 -10
  23. package/library/chunks/{select.NhbQgMNA.js → select.CEgt2ciT.js} +2 -2
  24. package/library/chunks/{shadow-input-group.Zt8zKRxQ.js → shadow-input-group.DTEIzl1s.js} +1 -1
  25. package/library/chunks/{share-option-list.pVQugFoP.js → share-option-list.CdQeYk-I.js} +4 -4
  26. package/library/chunks/{size-input-group.Cxo0uCXM.js → size-input-group.DtldCuqS.js} +1 -1
  27. package/library/chunks/{src.3QpUQeRm.js → src.BjEmxalH.js} +18 -18
  28. package/library/chunks/{step.CC1wfskA.js → step.BlnWLzqI.js} +1 -1
  29. package/library/chunks/{stepper-wizard.BJARESIb.js → stepper-wizard.t7enm9Uz.js} +2 -2
  30. package/library/chunks/{stepper.CUxBZKM6.js → stepper.DzhUPTLW.js} +1 -1
  31. package/library/chunks/{tab-group.lMvydOdb.js → tab-group.DIVmzKse.js} +1 -1
  32. package/library/chunks/{tab.BKJEGsgj.js → tab.C0oUx7MY.js} +1 -1
  33. package/library/chunks/{tag.Dj8VrFFk.js → tag.B2S21_nF.js} +1 -1
  34. package/library/chunks/{tree.BWKeg92V.js → tree.Bq4vAQ6w.js} +1 -1
  35. package/library/chunks/{typeface.BLblmcP7.js → typeface.Dr9m4SZE.js} +1 -1
  36. package/library/chunks/{video.2jpE1tqO.js → video.bGH-n4pZ.js} +12 -12
  37. package/library/components/array-line-clamp.js +1 -1
  38. package/library/components/asset-link-format.js +1 -1
  39. package/library/components/atoms.js +21 -21
  40. package/library/components/bicolor-picker.js +1 -1
  41. package/library/components/border-input-group.js +1 -1
  42. package/library/components/color-picker.js +1 -1
  43. package/library/components/color-swatch-group.js +1 -1
  44. package/library/components/color-swatch.js +1 -1
  45. package/library/components/corner-position-input-group.js +1 -1
  46. package/library/components/diff.js +1 -1
  47. package/library/components/document-viewer.js +1 -1
  48. package/library/components/dynamic-select.js +1 -1
  49. package/library/components/file-on-demand.js +1 -1
  50. package/library/components/folder-select.js +1 -1
  51. package/library/components/image.js +1 -1
  52. package/library/components/line-clamp.js +1 -1
  53. package/library/components/masonry.js +1 -1
  54. package/library/components/molecules.js +12 -12
  55. package/library/components/organisms.js +3 -3
  56. package/library/components/pagination.js +1 -1
  57. package/library/components/radio-card.js +1 -1
  58. package/library/components/range.js +1 -1
  59. package/library/components/select.js +1 -1
  60. package/library/components/shadow-input-group.js +1 -1
  61. package/library/components/share-option-list.js +1 -1
  62. package/library/components/size-input-group.js +1 -1
  63. package/library/components/step.js +1 -1
  64. package/library/components/stepper-wizard.js +1 -1
  65. package/library/components/stepper.js +1 -1
  66. package/library/components/tab-group.js +1 -1
  67. package/library/components/tab.js +1 -1
  68. package/library/components/tag.js +1 -1
  69. package/library/components/tree-item.js +1 -1
  70. package/library/components/tree.js +1 -1
  71. package/library/components/typeface.js +1 -1
  72. package/library/components/types.js +228 -228
  73. package/library/components/video.js +1 -1
  74. package/library/package.json +1 -1
  75. package/library/packages/atoms/src/components/alert/alert.d.ts +3 -0
  76. package/library/packages/atoms/src/components/badge/badge.d.ts +3 -0
  77. package/library/packages/atoms/src/components/button/button.d.ts +12 -0
  78. package/library/packages/atoms/src/components/card/card.d.ts +1 -0
  79. package/library/packages/atoms/src/components/checkbox/checkbox.d.ts +18 -0
  80. package/library/packages/atoms/src/components/color-picker/color-picker.d.ts +7 -0
  81. package/library/packages/atoms/src/components/copy-button/copy-button.d.ts +11 -0
  82. package/library/packages/atoms/src/components/dialog/dialog.d.ts +2 -0
  83. package/library/packages/atoms/src/components/divider/divider.d.ts +2 -0
  84. package/library/packages/atoms/src/components/drawer/drawer.d.ts +3 -0
  85. package/library/packages/atoms/src/components/dropdown/dropdown.d.ts +3 -0
  86. package/library/packages/atoms/src/components/icon-button/icon-button.d.ts +6 -0
  87. package/library/packages/atoms/src/components/image/image.d.ts +1 -0
  88. package/library/packages/atoms/src/components/input/input.d.ts +39 -0
  89. package/library/packages/atoms/src/components/line-clamp/line-clamp.d.ts +8 -0
  90. package/library/packages/atoms/src/components/menu/menu.d.ts +4 -0
  91. package/library/packages/atoms/src/components/menu-item/menu-item.d.ts +2 -0
  92. package/library/packages/atoms/src/components/option/option.d.ts +1 -0
  93. package/library/packages/atoms/src/components/pagination/pagination.d.ts +1 -0
  94. package/library/packages/atoms/src/components/radio/radio.d.ts +14 -0
  95. package/library/packages/atoms/src/components/radio-button/radio-button.d.ts +11 -0
  96. package/library/packages/atoms/src/components/radio-card/radio-card.d.ts +3 -0
  97. package/library/packages/atoms/src/components/radio-group/radio-group.d.ts +2 -0
  98. package/library/packages/atoms/src/components/range/range.d.ts +3 -0
  99. package/library/packages/atoms/src/components/rating/rating.d.ts +2 -0
  100. package/library/packages/atoms/src/components/select/select.d.ts +38 -0
  101. package/library/packages/atoms/src/components/split-panel/split-panel.d.ts +1 -0
  102. package/library/packages/atoms/src/components/switch/switch.d.ts +12 -0
  103. package/library/packages/atoms/src/components/tag/tag.d.ts +10 -0
  104. package/library/packages/atoms/src/components/textarea/textarea.d.ts +38 -0
  105. package/library/packages/atoms/src/components/tooltip/tooltip.d.ts +9 -0
  106. package/library/packages/atoms/src/components/tree-item/tree-item.d.ts +1 -0
  107. package/library/packages/hybrid/rich-text/src/components/rich-text-bubble-menu/rich-text-bubble-menu.d.ts +4 -0
  108. package/library/packages/hybrid/rich-text/src/components/rich-text-toolbar/rich-text-toolbar.d.ts +3 -0
  109. package/library/packages/hybrid/rich-text/src/rich-text.d.ts +3 -0
  110. package/library/packages/hybrid/table-core/src/table/components/table-toolbar/table-toolbar.d.ts +2 -0
  111. package/library/packages/hybrid/table-core/src/table/table.d.ts +3 -0
  112. package/library/packages/hybrid/video-advanced/src/video-advanced/video-advanced.d.ts +12 -0
  113. package/library/packages/molecules/src/3d-viewer/components/3d-viewer-config/3d-viewer-config.d.ts +3 -0
  114. package/library/packages/molecules/src/annotator/annotator.d.ts +2 -0
  115. package/library/packages/molecules/src/asset-format-picker/asset-format-picker.d.ts +3 -0
  116. package/library/packages/molecules/src/asset-picker/asset-picker.d.ts +3 -0
  117. package/library/packages/molecules/src/download-format-picker/download-format-picker.d.ts +3 -0
  118. package/library/packages/molecules/src/input-date-picker/input-date-picker.d.ts +3 -0
  119. package/library/packages/molecules/src/markdown-viewer/markdown-viewer.d.ts +3 -0
  120. package/library/packages/molecules/src/multi-select/components/board/board.d.ts +4 -0
  121. package/library/packages/molecules/src/multi-select/components/board-list-item/board-list-item.d.ts +6 -0
  122. package/library/packages/molecules/src/publish-page/publish-page.d.ts +2 -0
  123. package/library/packages/molecules/src/view-and-sort/view-and-sort.d.ts +6 -0
  124. package/library/packages/organisms/src/chatbot/chatbot.d.ts +4 -0
  125. package/library/packages/organisms/src/comment/comment.d.ts +2 -0
  126. package/library/packages/organisms/src/content-builder/blocks/button/button.d.ts +3 -0
  127. package/library/packages/organisms/src/content-builder/blocks/search-box/search-box.d.ts +2 -0
  128. package/library/packages/organisms/src/content-builder/content-builder.d.ts +2 -0
  129. package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/components/rte-bubble-menu/rte-bubble-menu.d.ts +7 -0
  130. package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/components/rte-table-generator/rte-table-generator.d.ts +6 -0
  131. package/library/packages/organisms/src/downloader/downloader.d.ts +6 -0
  132. package/library/packages/organisms/src/file-on-demand/components/file-on-demand-asset/file-on-demand-asset.d.ts +2 -0
  133. package/library/packages/organisms/src/find-and-replace/find-and-replace.d.ts +1 -0
  134. package/library/packages/organisms/src/text-to-speech/text-to-speech.d.ts +3 -0
  135. package/library/react-web-component.d.ts +30 -30
  136. package/library/utils.js +7 -7
  137. package/package.json +1 -1
  138. package/library/chunks/{src.CFxipFzl.js → src.BJpSLSUr.js} +1 -1
package/library/chunks/{color-picker.DlcAbY3b.js → color-picker.B6zsp9q3.js} RENAMED
@@ -13,30 +13,30 @@ import { t as h } from "./when.BUskJLtZ.js";
13
13
  import { t as g } from "./icon.CeQpEaQz.js";
14
14
  import { t as _ } from "./spinner.DsWszid8.js";
15
15
  import { t as v } from "./style-map.DPGQIxip.js";
16
- import { t as y } from "./button.DnOMjl_G.js";
17
- import { t as te } from "./form.JYXtmwQ2.js";
18
- import { t as b } from "./debounce.Ci-xdsHE.js";
19
- import { t as x } from "./button-group.CPfXrqyq.js";
20
- import { t as S } from "./default-value.opqQgoRT.js";
21
- import { t as C } from "./module.sCtBiWZt.js";
22
- import { c as w, d as T, f as E, i as D, n as O, o as k, s as ne, u as A } from "./gradient.rrDxmV60.js";
23
- import { t as j } from "./drag.s0AcVpKh.js";
24
- import { t as M } from "./math.od1DVmRk.js";
25
- import { t as N } from "./repeat.CKv9FPlC.js";
26
- import { t as P } from "./dropdown.CcjP36wF.js";
27
- import { t as F } from "./input.D1UkXp3F.js";
28
- import { t as I } from "./option.Da60zYvc.js";
29
- import { t as L } from "./select.NhbQgMNA.js";
30
- import { t as R } from "./tab.BKJEGsgj.js";
31
- import { t as z } from "./tab-group.lMvydOdb.js";
32
- import { t as B } from "./tab-panel.BxeoKuSv.js";
33
- import { t as V } from "./visually-hidden.Bv3SInZp.js";
16
+ import { t as y } from "./debounce.Ci-xdsHE.js";
17
+ import { t as b } from "./button.DnOMjl_G.js";
18
+ import { t as x } from "./form.JYXtmwQ2.js";
19
+ import { t as S } from "./button-group.CPfXrqyq.js";
20
+ import { t as C } from "./default-value.opqQgoRT.js";
21
+ import { t as w } from "./module.sCtBiWZt.js";
22
+ import { c as T, d as E, f as D, i as O, n as k, o as A, s as te, u as j } from "./gradient.rrDxmV60.js";
23
+ import { t as M } from "./drag.s0AcVpKh.js";
24
+ import { t as N } from "./math.od1DVmRk.js";
25
+ import { t as P } from "./repeat.CKv9FPlC.js";
26
+ import { t as F } from "./dropdown.CcjP36wF.js";
27
+ import { t as I } from "./input.D1UkXp3F.js";
28
+ import { t as L } from "./option.Da60zYvc.js";
29
+ import { t as R } from "./select.CEgt2ciT.js";
30
+ import { t as z } from "./tab.C0oUx7MY.js";
31
+ import { t as B } from "./tab-group.DIVmzKse.js";
32
+ import { t as V } from "./tab-panel.BxeoKuSv.js";
33
+ import { t as H } from "./visually-hidden.Bv3SInZp.js";
34
34
  //#region ../../packages/atoms/src/components/color-picker/color-picker.styles.ts
35
- var H = t`:host{--grid-width:280px;--grid-height:200px;--grid-handle-size:16px;--slider-height:15px;--slider-handle-size:17px;--swatch-size:25px;--format-button-width:52px;--eye-dropper-button-width:52px;--control-border-color:var(--cx-color-neutral-300);--control-button-color:var(--cx-color-neutral-0);--control-caret-color:var(--cx-color-neutral-800);display:inline-block}.color-picker{width:var(--grid-width);font-family:var(--cx-font-sans);font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);color:var(--color);background-color:var(--cx-panel-background-color);border-radius:var(--cx-border-radius-small);-webkit-user-select:none;user-select:none}.color-picker--inline{border:var(--inline-border,solid var(--cx-panel-border-width) var(--cx-panel-border-color))}.color-picker--inline:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-picker__grid{height:var(--grid-height);border-top-left-radius:var(--cx-border-radius-small);border-top-right-radius:var(--cx-border-radius-small);cursor:crosshair;forced-color-adjust:none;background-image:linear-gradient(#0000 0%,#000 100%),linear-gradient(90deg,#fff 0%,#fff0 100%);position:relative}.color-picker__grid-handle{width:var(--grid-handle-size);height:var(--grid-handle-size);margin-top:calc(var(--grid-handle-size) / -2);margin-left:calc(var(--grid-handle-size) / -2);transition:var(--cx-transition-fast) scale;border:2px solid #fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000040}.color-picker__grid-handle--dragging{cursor:none;scale:1.5}.color-picker__grid-handle:focus-visible{outline:var(--cx-focus-ring)}.color-picker__controls{padding:var(--cx-spacing-small);align-items:center;gap:var(--cx-spacing-small);display:flex}.color-picker__sliders{flex:auto}.color-picker__slider{height:var(--slider-height);border-radius:var(--cx-border-radius-pill);forced-color-adjust:none;position:relative;box-shadow:inset 0 0 0 1px #0003}.color-picker__slider:not(:last-of-type){margin-bottom:var(--cx-spacing-small)}.color-picker__slider-handle{top:calc(50% - var(--slider-handle-size) / 2);width:var(--slider-handle-size);height:var(--slider-handle-size);margin-left:calc(var(--slider-handle-size) / -2);background-color:#fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000040}.color-picker__slider-handle:focus-visible{outline:var(--cx-focus-ring)}.color-picker__hue{background-image:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.color-picker__alpha .color-picker__alpha-gradient{border-radius:inherit;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__preview{border-radius:var(--cx-border-radius-circle);cursor:pointer;forced-color-adjust:none;width:2rem;height:2rem;width:var(--cx-input-height-medium);height:var(--cx-input-height-medium);background:0 0;border:none;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.color-picker__preview--button,.color-picker__preview--button::part(base){border-radius:var(--cx-border-radius-small)}.color-picker__preview:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-picker__preview-color{border:1px solid #00000020;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__preview-color--copied{animation:.75s pulse}.color-picker__preview.color-picker__preview--button{outline:solid 1px var(--control-border-color)}.color-picker__preview--small.color-picker__preview--button{width:var(--cx-toggle-size-small);height:var(--cx-toggle-size-small)}.color-picker__preview--medium.color-picker__preview--button{width:var(--cx-toggle-size-medium);height:var(--cx-toggle-size-medium)}.color-picker__preview--large.color-picker__preview--button{width:var(--cx-toggle-size-large);height:var(--cx-toggle-size-large)}.color-picker__preview:before{content:"";border-radius:inherit;background-color:var(--preview-color,currentColor);width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__preview--empty:before{background-color:#0000}.color-picker__preview__transparent-bg{background-image:linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%);background-position:0 0,0 0,-5px -5px,5px 5px;background-size:10px 10px}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--cx-color-primary-500)}70%{box-shadow:0 0 0 .5rem #0000}to{box-shadow:0 0 #0000}}.color-picker__preview__container{align-items:center;gap:var(--cx-spacing-2x-small);display:flex}.color-picker__user-input__container{padding:0 var(--cx-spacing-small) var(--cx-spacing-small) var(--cx-spacing-small);display:flex}.color-picker__input_color{flex:auto;min-width:0}.color-picker__input_opacity{margin-left:var(--cx-spacing-2x-small);width:54px}.color-picker__input_opacity::part(input){padding-left:var(--cx-spacing-x-small);padding-right:var(--cx-spacing-x-small)}.color-picker__user-input__container cx-button-group{margin-left:var(--cx-spacing-2x-small)}.color-picker__user-input__container cx-button{font-size:var(--cx-font-size-medium)}.color-picker__user-input__container cx-button[part=format-button]{min-width:var(--format-button-width);max-width:var(--format-button-width)}.color-picker__user-input__container cx-button[part=eye-dropper-button]{min-width:var(--eye-dropper-button-width);max-width:var(--eye-dropper-button-width)}.color-picker__swatches{grid-gap:.5rem;border-top:solid 1px var(--cx-color-neutral-200);padding:var(--cx-spacing-small);forced-color-adjust:none;grid-template-columns:repeat(8,1fr);justify-items:center;display:grid}.color-picker__customSwatches{grid-gap:.5rem;padding:0 var(--cx-spacing-small) var(--cx-spacing-small) var(--cx-spacing-small);forced-color-adjust:none;grid-template-columns:repeat(8,1fr);justify-items:center;display:grid}.color-picker__customSwatches-label{--cx-button-text-transform:none;padding:var(--cx-spacing-small);justify-content:space-between;align-items:center;width:100%;display:inline-flex}.color-picker__spinner{text-align:center;margin:var(--cx-spacing-small) 0}.color-picker__swatch{width:var(--swatch-size);height:var(--swatch-size);border-radius:var(--cx-border-radius-small);position:relative}.color-picker__swatch .color-picker__swatch-color{border-radius:inherit;cursor:pointer;border:1px solid #00000020;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__swatch:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-picker--disabled{opacity:.5;cursor:default}.color-picker--disabled .color-picker__grid,.color-picker--disabled .color-picker__grid-handle,.color-picker--disabled .color-picker__slider,.color-picker--disabled .color-picker__slider-handle,.color-picker--disabled .color-picker__preview,.color-picker--disabled .color-picker__swatch,.color-picker--disabled .color-picker__swatch-color{pointer-events:none}.color-dropdown::part(panel){background-color:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-border-radius-small);max-height:none;overflow:visible}.color-dropdown__trigger::part(base){background-color:var(--control-button-color);border-color:var(--control-border-color);border-radius:var(--cx-border-radius-medium);padding-inline-start:var(--cx-spacing-2x-small);padding-inline-end:var(--cx-spacing-2x-small)}.color-dropdown__trigger::part(label){padding-inline-start:var(--cx-spacing-2x-small);padding-inline-end:var(--cx-spacing-2x-small)}.color-dropdown__trigger{cursor:pointer;forced-color-adjust:none;background-color:#0000;border:none;display:inline-block;position:relative}.color-dropdown__trigger:focus-visible{outline:none}.color-dropdown__trigger.color-dropdown__trigger--disabled{opacity:.5;cursor:default}.color-dropdown__trigger-icon{color:var(--control-caret-color);font-size:var(--cx-font-size-large);justify-content:flex-end;align-items:center;width:100%;height:100%;display:flex}cx-tooltip{display:inline-block}.color-picker__tabs{--tab-group-top-gap:0;--tab-panel-padding:0}.color-picker__gradient-panel{gap:var(--cx-spacing-small);padding:var(--cx-spacing-small);flex-direction:column;display:flex}.color-picker__gradient-options{gap:var(--cx-spacing-2x-small);align-items:start;display:flex}.color-picker__gradient-type-select,.color-picker__gradient-angle{flex:1 1 0;min-width:0}`, U = t`:host{--gradient-track-height:28px;--gradient-marker-size:20px;--gradient-marker-tail:6px;display:block}.gradient-slider{height:calc(var(--gradient-track-height) + var(--gradient-marker-size) + var(--gradient-marker-tail));margin:0 calc(var(--gradient-marker-size) / 2);forced-color-adjust:none;position:relative}.gradient-slider__track,.gradient-slider__checkerboard{height:var(--gradient-track-height);border-radius:var(--cx-border-radius-medium);position:absolute;bottom:0;left:0;right:0}.gradient-slider__track{box-shadow:inset 0 0 0 1px var(--cx-color-neutral-300)}.gradient-slider__checkerboard{pointer-events:none;background-image:linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%);background-position:0 0,0 0,-5px -5px,5px 5px;background-size:10px 10px}.gradient-slider__marker{width:var(--gradient-marker-size);height:calc(var(--gradient-marker-size) + var(--gradient-marker-tail));margin-left:calc(var(--gradient-marker-size) / -2);cursor:grab;background:0 0;border:none;padding:0;display:block;position:absolute;top:0}.gradient-slider__marker:before,.gradient-slider__marker:after{pointer-events:none}.gradient-slider__marker:before{width:var(--gradient-marker-size);height:var(--gradient-marker-size);content:"";border:3px solid var(--cx-color-neutral-0);border-radius:var(--cx-border-radius-small);box-shadow:0 0 0 1px var(--cx-color-neutral-300);box-sizing:border-box;background-color:currentColor;position:absolute;top:0;left:0}.gradient-slider__marker:after{top:calc(var(--gradient-marker-size) - var(--gradient-marker-tail) / 2);left:calc(50% - var(--gradient-marker-tail) / 2);width:var(--gradient-marker-tail);height:var(--gradient-marker-tail);content:"";background:var(--cx-color-neutral-0);border-right:1px solid var(--cx-color-neutral-300);border-bottom:1px solid var(--cx-color-neutral-300);position:absolute;transform:rotate(45deg)}.gradient-slider__marker--active:before{box-shadow:0 0 0 2px var(--cx-color-primary-600)}.gradient-slider__marker--active{z-index:1}.gradient-slider__marker--dragging{cursor:grabbing}.gradient-slider__marker:focus-visible{outline:none}.gradient-slider__marker:focus-visible:before{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}:host([disabled]) .gradient-slider{opacity:.5}:host([disabled]) .gradient-slider__marker{cursor:not-allowed}`, W = 1, G = 10, K = class extends o {
35
+ var U = t`:host{--grid-width:280px;--grid-height:200px;--grid-handle-size:16px;--slider-height:15px;--slider-handle-size:17px;--swatch-size:25px;--format-button-width:52px;--eye-dropper-button-width:52px;--control-border-color:var(--cx-color-neutral-300);--control-button-color:var(--cx-color-neutral-0);--control-caret-color:var(--cx-color-neutral-800);display:inline-block}.color-picker{width:var(--grid-width);font-family:var(--cx-font-sans);font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);color:var(--color);background-color:var(--cx-panel-background-color);border-radius:var(--cx-border-radius-small);-webkit-user-select:none;user-select:none}.color-picker--inline{border:var(--inline-border,solid var(--cx-panel-border-width) var(--cx-panel-border-color))}.color-picker--inline:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-picker__grid{height:var(--grid-height);border-top-left-radius:var(--cx-border-radius-small);border-top-right-radius:var(--cx-border-radius-small);cursor:crosshair;forced-color-adjust:none;background-image:linear-gradient(#0000 0%,#000 100%),linear-gradient(90deg,#fff 0%,#fff0 100%);position:relative}.color-picker__grid-handle{width:var(--grid-handle-size);height:var(--grid-handle-size);margin-top:calc(var(--grid-handle-size) / -2);margin-left:calc(var(--grid-handle-size) / -2);transition:var(--cx-transition-fast) scale;border:2px solid #fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000040}.color-picker__grid-handle--dragging{cursor:none;scale:1.5}.color-picker__grid-handle:focus-visible{outline:var(--cx-focus-ring)}.color-picker__controls{padding:var(--cx-spacing-small);align-items:center;gap:var(--cx-spacing-small);display:flex}.color-picker__sliders{flex:auto}.color-picker__slider{height:var(--slider-height);border-radius:var(--cx-border-radius-pill);forced-color-adjust:none;position:relative;box-shadow:inset 0 0 0 1px #0003}.color-picker__slider:not(:last-of-type){margin-bottom:var(--cx-spacing-small)}.color-picker__slider-handle{top:calc(50% - var(--slider-handle-size) / 2);width:var(--slider-handle-size);height:var(--slider-handle-size);margin-left:calc(var(--slider-handle-size) / -2);background-color:#fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000040}.color-picker__slider-handle:focus-visible{outline:var(--cx-focus-ring)}.color-picker__hue{background-image:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.color-picker__alpha .color-picker__alpha-gradient{border-radius:inherit;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__preview{border-radius:var(--cx-border-radius-circle);cursor:pointer;forced-color-adjust:none;width:2rem;height:2rem;width:var(--cx-input-height-medium);height:var(--cx-input-height-medium);background:0 0;border:none;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.color-picker__preview--button,.color-picker__preview--button::part(base){border-radius:var(--cx-border-radius-small)}.color-picker__preview:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-picker__preview-color{border:1px solid #00000020;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__preview-color--copied{animation:.75s pulse}.color-picker__preview.color-picker__preview--button{outline:solid 1px var(--control-border-color)}.color-picker__preview--small.color-picker__preview--button{width:var(--cx-toggle-size-small);height:var(--cx-toggle-size-small)}.color-picker__preview--medium.color-picker__preview--button{width:var(--cx-toggle-size-medium);height:var(--cx-toggle-size-medium)}.color-picker__preview--large.color-picker__preview--button{width:var(--cx-toggle-size-large);height:var(--cx-toggle-size-large)}.color-picker__preview:before{content:"";border-radius:inherit;background-color:var(--preview-color,currentColor);width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__preview--empty:before{background-color:#0000}.color-picker__preview__transparent-bg{background-image:linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%);background-position:0 0,0 0,-5px -5px,5px 5px;background-size:10px 10px}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--cx-color-primary-500)}70%{box-shadow:0 0 0 .5rem #0000}to{box-shadow:0 0 #0000}}.color-picker__preview__container{align-items:center;gap:var(--cx-spacing-2x-small);display:flex}.color-picker__user-input__container{padding:0 var(--cx-spacing-small) var(--cx-spacing-small) var(--cx-spacing-small);display:flex}.color-picker__input_color{flex:auto;min-width:0}.color-picker__input_opacity{margin-left:var(--cx-spacing-2x-small);width:54px}.color-picker__input_opacity::part(input){padding-left:var(--cx-spacing-x-small);padding-right:var(--cx-spacing-x-small)}.color-picker__user-input__container cx-button-group{margin-left:var(--cx-spacing-2x-small)}.color-picker__user-input__container cx-button{font-size:var(--cx-font-size-medium)}.color-picker__user-input__container cx-button[part=format-button]{min-width:var(--format-button-width);max-width:var(--format-button-width)}.color-picker__user-input__container cx-button[part=eye-dropper-button]{min-width:var(--eye-dropper-button-width);max-width:var(--eye-dropper-button-width)}.color-picker__swatches{grid-gap:.5rem;border-top:solid 1px var(--cx-color-neutral-200);padding:var(--cx-spacing-small);forced-color-adjust:none;grid-template-columns:repeat(8,1fr);justify-items:center;display:grid}.color-picker__customSwatches{grid-gap:.5rem;padding:0 var(--cx-spacing-small) var(--cx-spacing-small) var(--cx-spacing-small);forced-color-adjust:none;grid-template-columns:repeat(8,1fr);justify-items:center;display:grid}.color-picker__customSwatches-label{--cx-button-text-transform:none;padding:var(--cx-spacing-small);justify-content:space-between;align-items:center;width:100%;display:inline-flex}.color-picker__spinner{text-align:center;margin:var(--cx-spacing-small) 0}.color-picker__swatch{width:var(--swatch-size);height:var(--swatch-size);border-radius:var(--cx-border-radius-small);position:relative}.color-picker__swatch .color-picker__swatch-color{border-radius:inherit;cursor:pointer;border:1px solid #00000020;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__swatch:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-picker--disabled{opacity:.5;cursor:default}.color-picker--disabled .color-picker__grid,.color-picker--disabled .color-picker__grid-handle,.color-picker--disabled .color-picker__slider,.color-picker--disabled .color-picker__slider-handle,.color-picker--disabled .color-picker__preview,.color-picker--disabled .color-picker__swatch,.color-picker--disabled .color-picker__swatch-color{pointer-events:none}.color-dropdown::part(panel){background-color:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-border-radius-small);max-height:none;overflow:visible}.color-dropdown__trigger::part(base){background-color:var(--control-button-color);border-color:var(--control-border-color);border-radius:var(--cx-border-radius-medium);padding-inline-start:var(--cx-spacing-2x-small);padding-inline-end:var(--cx-spacing-2x-small)}.color-dropdown__trigger::part(label){padding-inline-start:var(--cx-spacing-2x-small);padding-inline-end:var(--cx-spacing-2x-small)}.color-dropdown__trigger{cursor:pointer;forced-color-adjust:none;background-color:#0000;border:none;display:inline-block;position:relative}.color-dropdown__trigger:focus-visible{outline:none}.color-dropdown__trigger.color-dropdown__trigger--disabled{opacity:.5;cursor:default}.color-dropdown__trigger-icon{color:var(--control-caret-color);font-size:var(--cx-font-size-large);justify-content:flex-end;align-items:center;width:100%;height:100%;display:flex}cx-tooltip{display:inline-block}.color-picker__tabs{--tab-group-top-gap:0;--tab-panel-padding:0}.color-picker__gradient-panel{gap:var(--cx-spacing-small);padding:var(--cx-spacing-small);flex-direction:column;display:flex}.color-picker__gradient-options{gap:var(--cx-spacing-2x-small);align-items:start;display:flex}.color-picker__gradient-type-select,.color-picker__gradient-angle{flex:1 1 0;min-width:0}`, W = t`:host{--gradient-track-height:28px;--gradient-marker-size:20px;--gradient-marker-tail:6px;display:block}.gradient-slider{height:calc(var(--gradient-track-height) + var(--gradient-marker-size) + var(--gradient-marker-tail));margin:0 calc(var(--gradient-marker-size) / 2);forced-color-adjust:none;position:relative}.gradient-slider__track,.gradient-slider__checkerboard{height:var(--gradient-track-height);border-radius:var(--cx-border-radius-medium);position:absolute;bottom:0;left:0;right:0}.gradient-slider__track{box-shadow:inset 0 0 0 1px var(--cx-color-neutral-300)}.gradient-slider__checkerboard{pointer-events:none;background-image:linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%);background-position:0 0,0 0,-5px -5px,5px 5px;background-size:10px 10px}.gradient-slider__marker{width:var(--gradient-marker-size);height:calc(var(--gradient-marker-size) + var(--gradient-marker-tail));margin-left:calc(var(--gradient-marker-size) / -2);cursor:grab;background:0 0;border:none;padding:0;display:block;position:absolute;top:0}.gradient-slider__marker:before,.gradient-slider__marker:after{pointer-events:none}.gradient-slider__marker:before{width:var(--gradient-marker-size);height:var(--gradient-marker-size);content:"";border:3px solid var(--cx-color-neutral-0);border-radius:var(--cx-border-radius-small);box-shadow:0 0 0 1px var(--cx-color-neutral-300);box-sizing:border-box;background-color:currentColor;position:absolute;top:0;left:0}.gradient-slider__marker:after{top:calc(var(--gradient-marker-size) - var(--gradient-marker-tail) / 2);left:calc(50% - var(--gradient-marker-tail) / 2);width:var(--gradient-marker-tail);height:var(--gradient-marker-tail);content:"";background:var(--cx-color-neutral-0);border-right:1px solid var(--cx-color-neutral-300);border-bottom:1px solid var(--cx-color-neutral-300);position:absolute;transform:rotate(45deg)}.gradient-slider__marker--active:before{box-shadow:0 0 0 2px var(--cx-color-primary-600)}.gradient-slider__marker--active{z-index:1}.gradient-slider__marker--dragging{cursor:grabbing}.gradient-slider__marker:focus-visible{outline:none}.gradient-slider__marker:focus-visible:before{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}:host([disabled]) .gradient-slider{opacity:.5}:host([disabled]) .gradient-slider__marker{cursor:not-allowed}`, G = 1, K = 10, q = class extends o {
36
36
  constructor(...e) {
37
37
  super(...e), this.localize = new d(this), this.stops = [], this.activeStopId = "", this.disabled = !1, this.draggingStopId = "";
38
38
  }
39
- static #e = this.styles = [l, U];
39
+ static #e = this.styles = [l, W];
40
40
  get canRemoveStop() {
41
41
  return this.stops.length > 2;
42
42
  }
@@ -46,7 +46,7 @@ var H = t`:host{--grid-width:280px;--grid-height:200px;--grid-handle-size:16px;-
46
46
  moveStop(e, t, n) {
47
47
  let r = this.stops.map((n) => n.id === e ? {
48
48
  ...n,
49
- position: M(t, 0, 100)
49
+ position: N(t, 0, 100)
50
50
  } : n);
51
51
  this.emit("cx-gradient-stop-change", { detail: { stops: r } }), n && this.emit("cx-gradient-change", { detail: { stops: r } });
52
52
  }
@@ -56,13 +56,13 @@ var H = t`:host{--grid-width:280px;--grid-height:200px;--grid-handle-size:16px;-
56
56
  this.emit("cx-gradient-stop-remove", { detail: { id: e } }), this.emit("cx-gradient-change", { detail: { stops: t } });
57
57
  }
58
58
  getPositionFromOffset(e, t) {
59
- return t === 0 ? 0 : M(e / t * 100, 0, 100);
59
+ return t === 0 ? 0 : N(e / t * 100, 0, 100);
60
60
  }
61
61
  handleMarkerPointerDown(e) {
62
62
  if (this.disabled) return;
63
63
  e.preventDefault();
64
64
  let t = e.currentTarget, n = t.dataset.stopId ?? "", r = this.shadowRoot.querySelector("[part~=\"track\"]"), i = r.getBoundingClientRect(), { width: a } = i, o = this.stops.find((e) => e.id === n)?.position ?? 0, s = e.clientX - (i.left + o / 100 * a);
65
- t.focus(), this.selectStop(n), this.draggingStopId = n, t.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId), j(r, {
65
+ t.focus(), this.selectStop(n), this.draggingStopId = n, t.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId), M(r, {
66
66
  onMove: (e) => {
67
67
  o = this.getPositionFromOffset(e - s, a), this.moveStop(n, o, !1);
68
68
  },
@@ -75,7 +75,7 @@ var H = t`:host{--grid-width:280px;--grid-height:200px;--grid-handle-size:16px;-
75
75
  if (this.disabled) return;
76
76
  let t = e.currentTarget.dataset.stopId ?? "", n = this.stops.find((e) => e.id === t);
77
77
  if (!n) return;
78
- let r = e.shiftKey ? G : W;
78
+ let r = e.shiftKey ? K : G;
79
79
  if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
80
80
  e.preventDefault(), this.selectStop(t), this.moveStop(t, n.position - r, !0);
81
81
  return;
@@ -98,8 +98,8 @@ var H = t`:host{--grid-width:280px;--grid-height:200px;--grid-handle-size:16px;-
98
98
  return e.length === 0 ? "transparent" : `linear-gradient(to right, ${e.map((e) => `${e.color} ${e.position}%`).join(", ")})`;
99
99
  }
100
100
  render() {
101
- let t = w(this.stops);
102
- return e`<div part="base" class="gradient-slider"><div class="gradient-slider__checkerboard" aria-hidden="true"></div><div part="track" class="gradient-slider__track" style=${v({ backgroundImage: this.getTrackBackground(t) })}></div>${N(t, (e) => e.id, (t, n) => e`<button part="marker" class=${p({
101
+ let t = T(this.stops);
102
+ return e`<div part="base" class="gradient-slider"><div class="gradient-slider__checkerboard" aria-hidden="true"></div><div part="track" class="gradient-slider__track" style=${v({ backgroundImage: this.getTrackBackground(t) })}></div>${P(t, (e) => e.id, (t, n) => e`<button part="marker" class=${p({
103
103
  "gradient-slider__marker": !0,
104
104
  "gradient-slider__marker--active": t.id === this.activeStopId,
105
105
  "gradient-slider__marker--dragging": t.id === this.draggingStopId
@@ -109,24 +109,24 @@ var H = t`:host{--grid-width:280px;--grid-height:200px;--grid-handle-size:16px;-
109
109
  })} role="slider" aria-label=${this.localize.term("gradientStopNumber", n + 1)} aria-valuemin="0" aria-valuemax="100" aria-valuenow=${Math.round(t.position)} aria-valuetext=${`${Math.round(t.position)}%, ${t.color}`} ?disabled=${this.disabled} @pointerdown=${this.handleMarkerPointerDown} @keydown=${this.handleMarkerKeyDown}></button>`)}</div>`;
110
110
  }
111
111
  };
112
- i([n({ type: Array }), a("design:type", Array)], K.prototype, "stops", void 0), i([n({
112
+ i([n({ type: Array }), a("design:type", Array)], q.prototype, "stops", void 0), i([n({
113
113
  attribute: "active-stop-id",
114
114
  type: String
115
- }), a("design:type", Object)], K.prototype, "activeStopId", void 0), i([n({
115
+ }), a("design:type", Object)], q.prototype, "activeStopId", void 0), i([n({
116
116
  reflect: !0,
117
117
  type: Boolean
118
- }), a("design:type", Object)], K.prototype, "disabled", void 0), i([r(), a("design:type", Object)], K.prototype, "draggingStopId", void 0), K = i([u("cx-gradient-slider")], K);
119
- var q = K, re = t`:host{--stop-swatch-size:28px;--stop-list-max-height:auto;display:block}.stop-list{gap:var(--cx-spacing-2x-small);flex-direction:column;display:flex}.stop-list__rows{gap:var(--cx-spacing-2x-small);max-height:var(--stop-list-max-height);flex-direction:column;display:flex;overflow-y:auto}.stop-list__header{align-items:center;display:flex}.stop-list__add{display:block}.stop-list__add::part(base){width:100%}.stop-list__title{font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-semibold);color:var(--cx-color-neutral-900)}.stop-list__row{gap:var(--cx-spacing-2x-small);padding:var(--cx-spacing-2x-small);background:var(--cx-color-neutral-50);border-radius:var(--cx-border-radius-medium);cursor:pointer;border:1px solid #0000;grid-template-columns:1fr auto auto;align-items:center;display:grid}.stop-list__row--active{border-color:var(--cx-color-primary-600)}.stop-list__hex{min-width:0}.stop-list__numbers{gap:var(--cx-spacing-2x-small);grid-column:1/-1;display:flex}.stop-list__swatch{width:var(--stop-swatch-size);height:var(--stop-swatch-size);cursor:pointer;border:1px solid var(--cx-color-neutral-300);border-radius:var(--cx-border-radius-small);background:0 0;padding:0;display:block;position:relative;overflow:hidden}.stop-list__swatch--transparent-bg{background-image:linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%);background-position:0 0,0 0,-4px -4px,4px 4px;background-size:8px 8px}.stop-list__swatch-color{position:absolute;inset:0}.stop-list__swatch:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.stop-list__picker-dropdown{flex:none}.stop-list__opacity,.stop-list__position{flex:1 1 0;min-width:0}.stop-list__delete{flex:none}:host([disabled]) .stop-list__row,:host([disabled]) .stop-list__swatch{cursor:not-allowed}`, ie = 100, J = class extends o {
118
+ }), a("design:type", Object)], q.prototype, "disabled", void 0), i([r(), a("design:type", Object)], q.prototype, "draggingStopId", void 0), q = i([u("cx-gradient-slider")], q);
119
+ var ne = q, re = t`:host{--stop-swatch-size:28px;--stop-list-max-height:auto;display:block}.stop-list{gap:var(--cx-spacing-2x-small);flex-direction:column;display:flex}.stop-list__rows{gap:var(--cx-spacing-2x-small);max-height:var(--stop-list-max-height);flex-direction:column;display:flex;overflow-y:auto}.stop-list__header{align-items:center;display:flex}.stop-list__add{display:block}.stop-list__add::part(base){width:100%}.stop-list__title{font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-semibold);color:var(--cx-color-neutral-900)}.stop-list__row{gap:var(--cx-spacing-2x-small);padding:var(--cx-spacing-2x-small);background:var(--cx-color-neutral-50);border-radius:var(--cx-border-radius-medium);cursor:pointer;border:1px solid #0000;grid-template-columns:1fr auto auto;align-items:center;display:grid}.stop-list__row--active{border-color:var(--cx-color-primary-600)}.stop-list__hex{min-width:0}.stop-list__numbers{gap:var(--cx-spacing-2x-small);grid-column:1/-1;display:flex}.stop-list__swatch{width:var(--stop-swatch-size);height:var(--stop-swatch-size);cursor:pointer;border:1px solid var(--cx-color-neutral-300);border-radius:var(--cx-border-radius-small);background:0 0;padding:0;display:block;position:relative;overflow:hidden}.stop-list__swatch--transparent-bg{background-image:linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%);background-position:0 0,0 0,-4px -4px,4px 4px;background-size:8px 8px}.stop-list__swatch-color{position:absolute;inset:0}.stop-list__swatch:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.stop-list__picker-dropdown{flex:none}.stop-list__opacity,.stop-list__position{flex:1 1 0;min-width:0}.stop-list__delete{flex:none}:host([disabled]) .stop-list__row,:host([disabled]) .stop-list__swatch{cursor:not-allowed}`, ie = 100, J = class extends o {
120
120
  constructor(...e) {
121
121
  super(...e), this.localize = new d(this), this.stops = [], this.activeStopId = "", this.disabled = !1;
122
122
  }
123
123
  static #e = this.styles = [l, re];
124
124
  static #t = this.dependencies = {
125
- "cx-button": y,
126
- "cx-dropdown": P,
125
+ "cx-button": b,
126
+ "cx-dropdown": F,
127
127
  "cx-icon": g,
128
128
  "cx-icon-button": ee,
129
- "cx-input": F
129
+ "cx-input": I
130
130
  };
131
131
  get canRemoveStop() {
132
132
  return this.stops.length > 2;
@@ -147,7 +147,7 @@ var q = K, re = t`:host{--stop-swatch-size:28px;--stop-list-max-height:auto;disp
147
147
  }
148
148
  handleAddClick() {
149
149
  if (this.disabled) return;
150
- let e = w(this.stops), t = e[e.length - 1], n = e[e.length - 2], r = n ? (n.position + t.position) / 2 : ie;
150
+ let e = T(this.stops), t = e[e.length - 1], n = e[e.length - 2], r = n ? (n.position + t.position) / 2 : ie;
151
151
  this.emit("cx-gradient-stop-add", { detail: {
152
152
  color: t?.color ?? "#ffffff",
153
153
  position: r
@@ -160,7 +160,7 @@ var q = K, re = t`:host{--stop-swatch-size:28px;--stop-list-max-height:auto;disp
160
160
  e.stopPropagation();
161
161
  let t = e.target, n = t.dataset.stopId ?? "";
162
162
  if (!this.stops.find((e) => e.id === n) || !t.value) return;
163
- let r = new C(t.value);
163
+ let r = new w(t.value);
164
164
  r.isValid && this.commitStopChange(n, { color: r.toRgbString() });
165
165
  }
166
166
  handleDeleteClick(e) {
@@ -172,12 +172,12 @@ var q = K, re = t`:host{--stop-swatch-size:28px;--stop-list-max-height:auto;disp
172
172
  e.stopPropagation();
173
173
  let t = this.getStopId(e), n = e.target, r = this.stops.find((e) => e.id === t);
174
174
  if (!r) return;
175
- let i = new C(n.value);
175
+ let i = new w(n.value);
176
176
  if (!i.isValid) {
177
- n.value = new C(r.color).toHexString();
177
+ n.value = new w(r.color).toHexString();
178
178
  return;
179
179
  }
180
- let a = new C(r.color).getAlpha();
180
+ let a = new w(r.color).getAlpha();
181
181
  this.commitStopChange(t, { color: i.setAlpha(a).toRgbString() });
182
182
  }
183
183
  handleOpacityChange(e) {
@@ -186,10 +186,10 @@ var q = K, re = t`:host{--stop-swatch-size:28px;--stop-list-max-height:auto;disp
186
186
  if (!r) return;
187
187
  let i = Number.parseInt(n.value.replace(/\D/g, ""), 10);
188
188
  if (Number.isNaN(i)) {
189
- n.value = `${Math.round(new C(r.color).getAlpha() * 100)}%`;
189
+ n.value = `${Math.round(new w(r.color).getAlpha() * 100)}%`;
190
190
  return;
191
191
  }
192
- this.commitStopChange(t, { color: new C(r.color).setAlpha(M(i, 0, 100) / 100).toRgbString() });
192
+ this.commitStopChange(t, { color: new w(r.color).setAlpha(N(i, 0, 100) / 100).toRgbString() });
193
193
  }
194
194
  handlePositionChange(e) {
195
195
  e.stopPropagation();
@@ -200,10 +200,10 @@ var q = K, re = t`:host{--stop-swatch-size:28px;--stop-list-max-height:auto;disp
200
200
  n.value = `${Math.round(r.position)}%`;
201
201
  return;
202
202
  }
203
- this.commitStopChange(t, { position: M(i, 0, 100) });
203
+ this.commitStopChange(t, { position: N(i, 0, 100) });
204
204
  }
205
205
  renderRow(t, n) {
206
- let r = new C(t.color), i = this.localize.term("gradientStopNumber", n + 1);
206
+ let r = new w(t.color), i = this.localize.term("gradientStopNumber", n + 1);
207
207
  return e`<div part="row" class=${p({
208
208
  "stop-list__row": !0,
209
209
  "stop-list__row--active": t.id === this.activeStopId
@@ -222,8 +222,8 @@ var q = K, re = t`:host{--stop-swatch-size:28px;--stop-list-max-height:auto;disp
222
222
  } }} mask="num%" no-spin-buttons value=${`${Math.round(t.position)}%`} ?disabled=${this.disabled} @cx-change=${this.handlePositionChange}></cx-input></div></div>`;
223
223
  }
224
224
  render() {
225
- let t = w(this.stops);
226
- return e`<div part="base" class="stop-list"><div part="header" class="stop-list__header"><span class="stop-list__title">${this.localize.term("gradientStops")}</span></div><div class="stop-list__rows">${N(t, (e) => e.id, (e, t) => this.renderRow(e, t))}</div><cx-button part="add-button" class="stop-list__add" size="small" ?disabled=${this.disabled} @click=${this.handleAddClick}><cx-icon slot="prefix" name="add"></cx-icon>${this.localize.term("addGradientStop")}</cx-button></div>`;
225
+ let t = T(this.stops);
226
+ return e`<div part="base" class="stop-list"><div part="header" class="stop-list__header"><span class="stop-list__title">${this.localize.term("gradientStops")}</span></div><div class="stop-list__rows">${P(t, (e) => e.id, (e, t) => this.renderRow(e, t))}</div><cx-button part="add-button" class="stop-list__add" size="small" ?disabled=${this.disabled} @click=${this.handleAddClick}><cx-icon slot="prefix" name="add"></cx-icon>${this.localize.term("addGradientStop")}</cx-button></div>`;
227
227
  }
228
228
  };
229
229
  i([n({ type: Array }), a("design:type", Array)], J.prototype, "stops", void 0), i([n({
@@ -234,22 +234,22 @@ i([n({ type: Array }), a("design:type", Array)], J.prototype, "stops", void 0),
234
234
  type: Boolean
235
235
  }), a("design:type", Object)], J.prototype, "disabled", void 0), J = i([u("cx-gradient-stop-list")], J);
236
236
  var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ = class extends o {
237
- static #e = this.styles = [l, H];
237
+ static #e = this.styles = [l, U];
238
238
  static #t = this.dependencies = {
239
- "cx-button": y,
240
- "cx-button-group": x,
241
- "cx-dropdown": P,
242
- "cx-gradient-slider": q,
239
+ "cx-button": b,
240
+ "cx-button-group": S,
241
+ "cx-dropdown": F,
242
+ "cx-gradient-slider": ne,
243
243
  "cx-gradient-stop-list": ae,
244
244
  "cx-icon": g,
245
- "cx-input": F,
246
- "cx-option": I,
247
- "cx-select": L,
245
+ "cx-input": I,
246
+ "cx-option": L,
247
+ "cx-select": R,
248
248
  "cx-spinner": _,
249
- "cx-tab": R,
250
- "cx-tab-group": z,
251
- "cx-tab-panel": B,
252
- "cx-visually-hidden": V
249
+ "cx-tab": z,
250
+ "cx-tab-group": B,
251
+ "cx-tab-panel": V,
252
+ "cx-visually-hidden": H
253
253
  };
254
254
  #n;
255
255
  get validity() {
@@ -275,15 +275,15 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
275
275
  };
276
276
  }
277
277
  constructor() {
278
- super(), this.formControlController = new te(this), this.isSafeValue = !1, this.#n = !1, this.localize = new d(this), this.hasFocus = !1, this.isDraggingGridHandle = !1, this.isEmpty = !1, this.inputColorValue = "", this.inputOpacityValue = "", this.hue = 0, this.saturation = 100, this.brightness = 100, this.alpha = 100, this.lastParsedAlpha = 100, this.gradientValue = {
278
+ super(), this.formControlController = new x(this), this.isSafeValue = !1, this.#n = !1, this.localize = new d(this), this.hasFocus = !1, this.isDraggingGridHandle = !1, this.isEmpty = !1, this.inputColorValue = "", this.inputOpacityValue = "", this.hue = 0, this.saturation = 100, this.brightness = 100, this.alpha = 100, this.lastParsedAlpha = 100, this.gradientValue = {
279
279
  angle: Q,
280
280
  stops: [],
281
- type: E.Linear
282
- }, this.activeStopId = "", this.parsedSwatches = [], this.parsedCustomSwatches = [], this.value = "", this.defaultValue = "", this.label = "", this.variant = "default", this.format = A.Hex, this.formats = [
283
- A.Hex,
284
- A.Rgb,
285
- A.Hsl
286
- ], this.emitFormat = void 0, this.inline = !1, this.gradient = !1, this.mode = T.Solid, this.gradientTypes = [E.Linear, E.Radial], this.size = "medium", this.noFormatToggle = !1, this.name = "", this.disabled = !1, this.hoist = !1, this.opacity = !1, this.uppercase = !1, this.clearable = !1, this.tooltip = "", this.swatches = "", this.customSwatches = "", this.loading = !1, this.creatable = !1, this.form = void 0, this.required = !1, this.emitValue = "", this.handleFocusIn = this.handleFocusIn.bind(this), this.handleFocusOut = this.handleFocusOut.bind(this), this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut);
281
+ type: D.Linear
282
+ }, this.activeStopId = "", this.parsedSwatches = [], this.parsedCustomSwatches = [], this.value = "", this.defaultValue = "", this.label = "", this.variant = "default", this.format = j.Hex, this.formats = [
283
+ j.Hex,
284
+ j.Rgb,
285
+ j.Hsl
286
+ ], this.emitFormat = void 0, this.inline = !1, this.gradient = !1, this.mode = E.Solid, this.gradientTypes = [D.Linear, D.Radial], this.size = "medium", this.noFormatToggle = !1, this.name = "", this.disabled = !1, this.hoist = !1, this.opacity = !1, this.uppercase = !1, this.clearable = !1, this.tooltip = "", this.swatches = "", this.customSwatches = "", this.loading = !1, this.creatable = !1, this.form = void 0, this.required = !1, this.emitValue = "", this.handleFocusIn = this.handleFocusIn.bind(this), this.handleFocusOut = this.handleFocusOut.bind(this), this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut);
287
287
  }
288
288
  runFirstUpdated() {
289
289
  this.input?.updateComplete.then(() => {
@@ -305,19 +305,19 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
305
305
  }
306
306
  handleFormatToggle() {
307
307
  let e = [
308
- A.Hex,
309
- A.Rgb,
310
- A.Hsl,
311
- A.Hsv
308
+ j.Hex,
309
+ j.Rgb,
310
+ j.Hsl,
311
+ j.Hsv
312
312
  ].filter((e) => this.formats.includes(e)), t = (e.indexOf(this.format) + 1) % e.length;
313
313
  this.format = e[t], this.setColor(this.value), this.emit("cx-change"), this.emit("cx-input");
314
314
  }
315
315
  handleAlphaDrag(e) {
316
316
  let t = this.shadowRoot.querySelector(".color-picker__slider.color-picker__alpha"), n = t.querySelector(".color-picker__slider-handle"), { width: r } = t.getBoundingClientRect(), i = this.value, a = this.value;
317
- n.focus(), e.preventDefault(), j(t, {
317
+ n.focus(), e.preventDefault(), M(t, {
318
318
  initialEvent: e,
319
319
  onMove: (e) => {
320
- this.alpha = M(e / r * 100, 0, 100), this.syncValues(), this.value !== a && (a = this.value, this.emit("cx-input"));
320
+ this.alpha = N(e / r * 100, 0, 100), this.syncValues(), this.value !== a && (a = this.value, this.emit("cx-input"));
321
321
  },
322
322
  onStop: () => {
323
323
  this.value !== i && (i = this.value, this.emit("cx-change"));
@@ -326,10 +326,10 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
326
326
  }
327
327
  handleHueDrag(e) {
328
328
  let t = this.shadowRoot.querySelector(".color-picker__slider.color-picker__hue"), n = t.querySelector(".color-picker__slider-handle"), { width: r } = t.getBoundingClientRect(), i = this.value, a = this.value;
329
- n.focus(), e.preventDefault(), j(t, {
329
+ n.focus(), e.preventDefault(), M(t, {
330
330
  initialEvent: e,
331
331
  onMove: (e) => {
332
- this.hue = M(e / r * 360, 0, 360), this.syncValues(), this.value !== a && (a = this.value, this.emit("cx-input"));
332
+ this.hue = N(e / r * 360, 0, 360), this.syncValues(), this.value !== a && (a = this.value, this.emit("cx-input"));
333
333
  },
334
334
  onStop: () => {
335
335
  this.value !== i && (i = this.value, this.emit("cx-change"));
@@ -338,10 +338,10 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
338
338
  }
339
339
  handleGridDrag(e) {
340
340
  let t = this.shadowRoot.querySelector(".color-picker__grid"), n = t.querySelector(".color-picker__grid-handle"), { height: r, width: i } = t.getBoundingClientRect(), a = this.value, o = this.value;
341
- n.focus(), e.preventDefault(), this.isDraggingGridHandle = !0, j(t, {
341
+ n.focus(), e.preventDefault(), this.isDraggingGridHandle = !0, M(t, {
342
342
  initialEvent: e,
343
343
  onMove: (e, t) => {
344
- this.saturation = M(e / i * 100, 0, 100), this.brightness = M(100 - t / r * 100, 0, 100), this.syncValues(), this.value !== o && (o = this.value, this.emit("cx-input"));
344
+ this.saturation = N(e / i * 100, 0, 100), this.brightness = N(100 - t / r * 100, 0, 100), this.syncValues(), this.value !== o && (o = this.value, this.emit("cx-input"));
345
345
  },
346
346
  onStop: () => {
347
347
  this.isDraggingGridHandle = !1, this.value !== a && (a = this.value, this.emit("cx-change"));
@@ -350,15 +350,15 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
350
350
  }
351
351
  handleAlphaKeyDown(e) {
352
352
  let t = e.shiftKey ? 10 : 1, n = this.value;
353
- e.key === "ArrowLeft" && (e.preventDefault(), this.alpha = M(this.alpha - t, 0, 100), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.alpha = M(this.alpha + t, 0, 100), this.syncValues()), e.key === "Home" && (e.preventDefault(), this.alpha = 0, this.syncValues()), e.key === "End" && (e.preventDefault(), this.alpha = 100, this.syncValues()), this.value !== n && (this.emit("cx-change"), this.emit("cx-input"));
353
+ e.key === "ArrowLeft" && (e.preventDefault(), this.alpha = N(this.alpha - t, 0, 100), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.alpha = N(this.alpha + t, 0, 100), this.syncValues()), e.key === "Home" && (e.preventDefault(), this.alpha = 0, this.syncValues()), e.key === "End" && (e.preventDefault(), this.alpha = 100, this.syncValues()), this.value !== n && (this.emit("cx-change"), this.emit("cx-input"));
354
354
  }
355
355
  handleHueKeyDown(e) {
356
356
  let t = e.shiftKey ? 10 : 1, n = this.value;
357
- e.key === "ArrowLeft" && (e.preventDefault(), this.hue = M(this.hue - t, 0, 360), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.hue = M(this.hue + t, 0, 360), this.syncValues()), e.key === "Home" && (e.preventDefault(), this.hue = 0, this.syncValues()), e.key === "End" && (e.preventDefault(), this.hue = 360, this.syncValues()), this.value !== n && (this.emit("cx-change"), this.emit("cx-input"));
357
+ e.key === "ArrowLeft" && (e.preventDefault(), this.hue = N(this.hue - t, 0, 360), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.hue = N(this.hue + t, 0, 360), this.syncValues()), e.key === "Home" && (e.preventDefault(), this.hue = 0, this.syncValues()), e.key === "End" && (e.preventDefault(), this.hue = 360, this.syncValues()), this.value !== n && (this.emit("cx-change"), this.emit("cx-input"));
358
358
  }
359
359
  handleGridKeyDown(e) {
360
360
  let t = e.shiftKey ? 10 : 1, n = this.value;
361
- e.key === "ArrowLeft" && (e.preventDefault(), this.saturation = M(this.saturation - t, 0, 100), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.saturation = M(this.saturation + t, 0, 100), this.syncValues()), e.key === "ArrowUp" && (e.preventDefault(), this.brightness = M(this.brightness + t, 0, 100), this.syncValues()), e.key === "ArrowDown" && (e.preventDefault(), this.brightness = M(this.brightness - t, 0, 100), this.syncValues()), this.value !== n && (this.emit("cx-change"), this.emit("cx-input"));
361
+ e.key === "ArrowLeft" && (e.preventDefault(), this.saturation = N(this.saturation - t, 0, 100), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.saturation = N(this.saturation + t, 0, 100), this.syncValues()), e.key === "ArrowUp" && (e.preventDefault(), this.brightness = N(this.brightness + t, 0, 100), this.syncValues()), e.key === "ArrowDown" && (e.preventDefault(), this.brightness = N(this.brightness - t, 0, 100), this.syncValues()), this.value !== n && (this.emit("cx-change"), this.emit("cx-input"));
362
362
  }
363
363
  handleInputChange(e) {
364
364
  let t = e.target, n = this.value, r = this.getFormatFromValue(t.value);
@@ -387,7 +387,7 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
387
387
  handleOpacityInputChange(e) {
388
388
  if (e.stopPropagation(), this.opacityInput.value) {
389
389
  let e = parseInt(this.opacityInput.value);
390
- isNaN(e) || (this.alpha = M(e, 0, 100), this.syncValues());
390
+ isNaN(e) || (this.alpha = N(e, 0, 100), this.syncValues());
391
391
  }
392
392
  this.emit("cx-change"), this.emit("cx-input");
393
393
  }
@@ -397,13 +397,13 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
397
397
  setOpacity() {
398
398
  if (this.opacityInput.value) {
399
399
  let e = parseInt(this.opacityInput.value);
400
- isNaN(e) || (this.alpha = M(e, 0, 100));
400
+ isNaN(e) || (this.alpha = N(e, 0, 100));
401
401
  }
402
402
  }
403
403
  handleOpacityInputKeyDown(e) {
404
404
  if (e.key === "Enter" && this.opacityInput.value) {
405
405
  let e = parseInt(this.opacityInput.value);
406
- isNaN(e) || (this.alpha = M(e, 0, 100), this.syncValues(), this.emit("cx-change"), this.emit("cx-input"), setTimeout(() => this.opacityInput.select()));
406
+ isNaN(e) || (this.alpha = N(e, 0, 100), this.syncValues(), this.emit("cx-change"), this.emit("cx-input"), setTimeout(() => this.opacityInput.select()));
407
407
  }
408
408
  }
409
409
  handleTouchMove(e) {
@@ -414,7 +414,7 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
414
414
  }
415
415
  parseColor(e) {
416
416
  if (!e) return null;
417
- let t = new C(e);
417
+ let t = new w(e);
418
418
  if (!t.isValid) return null;
419
419
  let n = t.toHsl(), r = {
420
420
  a: n.a,
@@ -479,14 +479,14 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
479
479
  return typeof e == "string" ? this.uppercase ? e.toUpperCase() : e.toLowerCase() : "";
480
480
  }
481
481
  adoptGradientValue(e) {
482
- let t = k(e);
482
+ let t = A(e);
483
483
  if (!t) return;
484
- this.mode = T.Gradient, this.gradientValue = t;
484
+ this.mode = E.Gradient, this.gradientValue = t;
485
485
  let n = t.stops.some((e) => e.id === this.activeStopId) ? this.activeStop : t.stops[0];
486
486
  n && (this.activeStopId = n.id, this.loadStopIntoControls(n));
487
487
  }
488
488
  get isGradientMode() {
489
- return this.gradient && this.mode === T.Gradient;
489
+ return this.gradient && this.mode === E.Gradient;
490
490
  }
491
491
  get activeStop() {
492
492
  return this.gradientValue.stops.find((e) => e.id === this.activeStopId);
@@ -502,7 +502,7 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
502
502
  }, this.inputColorValue = this.getStopInputValue(e), this.inputOpacityValue = this.opacity ? Math.round(this.alpha).toString() : "", this.publishGradientValue(), await this.updateComplete, this.isSafeValue = !1;
503
503
  }
504
504
  getStopInputValue(e) {
505
- return this.format === A.Hsl ? e.hsl.string : this.format === A.Rgb ? e.rgb.string : this.format === A.Hsv ? e.hsv.string : e.hex;
505
+ return this.format === j.Hsl ? e.hsl.string : this.format === j.Rgb ? e.rgb.string : this.format === j.Hsv ? e.hsv.string : e.hex;
506
506
  }
507
507
  loadStopIntoControls(e) {
508
508
  this.setColor(e.color, !1);
@@ -510,10 +510,10 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
510
510
  t && (this.inputColorValue = this.getStopInputValue(t), this.inputOpacityValue = this.opacity ? Math.round(this.alpha).toString() : "");
511
511
  }
512
512
  async publishGradientValue() {
513
- this.isSafeValue = !0, this.value = ne(this.gradientValue), this.emitValue = this.value, await this.updateComplete, this.isSafeValue = !1;
513
+ this.isSafeValue = !0, this.value = te(this.gradientValue), this.emitValue = this.value, await this.updateComplete, this.isSafeValue = !1;
514
514
  }
515
515
  async applyGradientStops(e) {
516
- let t = w(e);
516
+ let t = T(e);
517
517
  if (this.gradientValue = {
518
518
  ...this.gradientValue,
519
519
  stops: t
@@ -524,19 +524,19 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
524
524
  await this.publishGradientValue();
525
525
  }
526
526
  seedGradientFromCurrentColor() {
527
- let e = this.parseColor(`hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`), t = e ? this.opacity ? e.rgba.string : e.hex : "#ffffff", n = new C(t).setAlpha(0).toRgbString(), r = [{
527
+ let e = this.parseColor(`hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`), t = e ? this.opacity ? e.rgba.string : e.hex : "#ffffff", n = new w(t).setAlpha(0).toRgbString(), r = [{
528
528
  color: t,
529
- id: O(),
529
+ id: k(),
530
530
  position: 0
531
531
  }, {
532
532
  color: n,
533
- id: O(),
533
+ id: k(),
534
534
  position: 100
535
535
  }];
536
536
  this.gradientValue = {
537
537
  angle: Q,
538
538
  stops: r,
539
- type: this.gradientTypes[0] ?? E.Linear
539
+ type: this.gradientTypes[0] ?? D.Linear
540
540
  }, this.activeStopId = r[0].id;
541
541
  }
542
542
  async syncValues() {
@@ -573,11 +573,11 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
573
573
  this.disabled || (this.setColor(e), this.value !== t && (this.emit("cx-change"), this.emit("cx-input")));
574
574
  }
575
575
  getHexString(e, t, n, r = 100) {
576
- let i = new C(`hsva(${e}, ${t}%, ${n}%, ${r / 100})`);
576
+ let i = new w(`hsva(${e}, ${t}%, ${n}%, ${r / 100})`);
577
577
  return i.isValid ? i.toHex8String() : "";
578
578
  }
579
579
  getFormatFromValue(e) {
580
- let t = new C(e);
580
+ let t = new w(e);
581
581
  return !t.isValid || !this.formats || this.formats.length === 0 ? null : this.formats.includes(t.format) ? t.format : this.formats[0];
582
582
  }
583
583
  stopNestedEventPropagation(e) {
@@ -585,8 +585,8 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
585
585
  }
586
586
  handleTabShow(e) {
587
587
  if (e.target !== this.tabGroup) return;
588
- let t = e.detail.name === Z ? T.Gradient : T.Solid;
589
- t !== this.mode && (this.mode = t, t === T.Gradient ? this.switchToGradientMode() : this.switchToSolidMode(), this.emit("cx-change"), this.emit("cx-input"));
588
+ let t = e.detail.name === Z ? E.Gradient : E.Solid;
589
+ t !== this.mode && (this.mode = t, t === E.Gradient ? this.switchToGradientMode() : this.switchToSolidMode(), this.emit("cx-change"), this.emit("cx-input"));
590
590
  }
591
591
  switchToGradientMode() {
592
592
  this.gradientValue.stops.length === 0 && this.seedGradientFromCurrentColor();
@@ -608,7 +608,7 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
608
608
  handleGradientStopAdd(e) {
609
609
  let { color: t, position: n } = e.detail, r = {
610
610
  color: t,
611
- id: O(),
611
+ id: k(),
612
612
  position: n
613
613
  };
614
614
  this.applyGradientStops([...this.gradientValue.stops, r]), this.activeStopId = r.id, this.loadStopIntoControls(r), this.emit("cx-change"), this.emit("cx-input");
@@ -637,7 +637,7 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
637
637
  let t = e.target, n = Number.parseInt(t.value.replace(/\D/g, ""), 10);
638
638
  e.stopPropagation(), !Number.isNaN(n) && (this.gradientValue = {
639
639
  ...this.gradientValue,
640
- angle: M(n, 0, 360)
640
+ angle: N(n, 0, 360)
641
641
  }, this.publishGradientValue(), this.emit("cx-change"), this.emit("cx-input"));
642
642
  }
643
643
  handleFormatChange() {
@@ -668,15 +668,15 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
668
668
  }
669
669
  syncTabToMode() {
670
670
  if (!this.gradient) return;
671
- let e = this.mode === T.Gradient ? Z : X;
671
+ let e = this.mode === E.Gradient ? Z : X;
672
672
  this.tabGroup?.show(e);
673
673
  }
674
674
  handleValueChange(e, t) {
675
- if (this.isEmpty = !t, this.gradient && D(t)) {
675
+ if (this.isEmpty = !t, this.gradient && O(t)) {
676
676
  this.isSafeValue || this.adoptGradientValue(t);
677
677
  return;
678
678
  }
679
- this.isGradientMode && t && (this.mode = T.Solid);
679
+ this.isGradientMode && t && (this.mode = E.Solid);
680
680
  let n = this.getFormatFromValue(t);
681
681
  if (n && n !== this.format && (this.format = n), t || (this.hue = 0, this.saturation = 0, this.brightness = 100, this.lastParsedAlpha = 100, this.alpha = 100), !this.isSafeValue) {
682
682
  let n = this.parseColor(t);
@@ -724,10 +724,10 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
724
724
  });
725
725
  }
726
726
  getGradientTypeLabel(e) {
727
- return e === E.Radial ? this.localize.term("radial") : this.localize.term("linear");
727
+ return e === D.Radial ? this.localize.term("radial") : this.localize.term("linear");
728
728
  }
729
729
  renderGradientOptions() {
730
- return e`<div class="color-picker__gradient-options"><cx-select part="gradient-type-select" class="color-picker__gradient-type-select" size="small" hoist label=${this.localize.term("gradient")} value=${this.gradientValue.type} ?disabled=${this.disabled} @cx-change=${this.handleGradientTypeSelect} @cx-blur=${this.stopNestedEventPropagation} @cx-focus=${this.stopNestedEventPropagation}>${N(this.gradientTypes, (e) => e, (t) => e`<cx-option value=${t}>${this.getGradientTypeLabel(t)}</cx-option>`)}</cx-select>${h(this.gradientValue.type === E.Linear, () => e`<cx-input part="gradient-angle-input" class="color-picker__gradient-angle" type="text" size="small" label=${this.localize.term("gradientAngle")} .maskBlocks=${{ num: {
730
+ return e`<div class="color-picker__gradient-options"><cx-select part="gradient-type-select" class="color-picker__gradient-type-select" size="small" hoist label=${this.localize.term("gradient")} value=${this.gradientValue.type} ?disabled=${this.disabled} @cx-change=${this.handleGradientTypeSelect} @cx-blur=${this.stopNestedEventPropagation} @cx-focus=${this.stopNestedEventPropagation}>${P(this.gradientTypes, (e) => e, (t) => e`<cx-option value=${t}>${this.getGradientTypeLabel(t)}</cx-option>`)}</cx-select>${h(this.gradientValue.type === D.Linear, () => e`<cx-input part="gradient-angle-input" class="color-picker__gradient-angle" type="text" size="small" label=${this.localize.term("gradientAngle")} .maskBlocks=${{ num: {
731
731
  mask: Number,
732
732
  max: 360,
733
733
  min: 0,
@@ -736,7 +736,7 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
736
736
  } }} mask="num°" no-spin-buttons value=${`${Math.round(this.gradientValue.angle)}°`} ?disabled=${this.disabled} @cx-input=${this.handleGradientAngleInput} @cx-blur=${this.stopNestedEventPropagation} @cx-focus=${this.stopNestedEventPropagation}></cx-input>`)}</div>`;
737
737
  }
738
738
  renderTabsOrControls(t) {
739
- return this.gradient ? e`<cx-tab-group class="color-picker__tabs" @cx-tab-show=${this.handleTabShow}><cx-tab slot="nav" panel=${X} ?active=${this.mode === T.Solid}>${this.localize.term("solid")}</cx-tab><cx-tab slot="nav" panel=${Z} ?active=${this.isGradientMode}>${this.localize.term("gradient")}</cx-tab><cx-tab-panel name=${X} ?active=${this.mode === T.Solid}>${h(this.mode === T.Solid, () => this.renderColorControls(t))}</cx-tab-panel><cx-tab-panel name=${Z} ?active=${this.isGradientMode}>${h(this.isGradientMode, () => e`<div class="color-picker__gradient-panel">${this.renderGradientOptions()}<cx-gradient-slider part="gradient-slider" exportparts="track:gradient-track,marker:gradient-marker" .stops=${this.gradientValue.stops} active-stop-id=${this.activeStopId} ?disabled=${this.disabled} @cx-gradient-stop-select=${this.handleGradientStopSelect} @cx-gradient-stop-change=${this.handleGradientStopChange} @cx-gradient-change=${this.handleGradientChange} @cx-gradient-stop-remove=${this.handleGradientStopRemove}></cx-gradient-slider><cx-gradient-stop-list part="gradient-stop-list" exportparts="
739
+ return this.gradient ? e`<cx-tab-group class="color-picker__tabs" @cx-tab-show=${this.handleTabShow}><cx-tab slot="nav" panel=${X} ?active=${this.mode === E.Solid}>${this.localize.term("solid")}</cx-tab><cx-tab slot="nav" panel=${Z} ?active=${this.isGradientMode}>${this.localize.term("gradient")}</cx-tab><cx-tab-panel name=${X} ?active=${this.mode === E.Solid}>${h(this.mode === E.Solid, () => this.renderColorControls(t))}</cx-tab-panel><cx-tab-panel name=${Z} ?active=${this.isGradientMode}>${h(this.isGradientMode, () => e`<div class="color-picker__gradient-panel">${this.renderGradientOptions()}<cx-gradient-slider part="gradient-slider" exportparts="track:gradient-track,marker:gradient-marker" .stops=${this.gradientValue.stops} active-stop-id=${this.activeStopId} ?disabled=${this.disabled} @cx-gradient-stop-select=${this.handleGradientStopSelect} @cx-gradient-stop-change=${this.handleGradientStopChange} @cx-gradient-change=${this.handleGradientChange} @cx-gradient-stop-remove=${this.handleGradientStopRemove}></cx-gradient-slider><cx-gradient-stop-list part="gradient-stop-list" exportparts="
740
740
  row:gradient-stop-row,
741
741
  add-button:gradient-add-stop-button,
742
742
  delete-button:gradient-delete-stop-button
@@ -826,13 +826,13 @@ var ae = J, Y = "EyeDropper" in window, X = "solid", Z = "gradient", Q = 90, $ =
826
826
  })} .containing-element=${this} ?disabled=${this.disabled} ?hoist=${this.hoist} @cx-after-hide=${this.handleAfterHide}><slot name="trigger" slot="trigger">${o}</slot>${i}</cx-dropdown>`;
827
827
  }
828
828
  };
829
- i([c("[part~=\"base\"]"), a("design:type", typeof HTMLElement > "u" ? Object : HTMLElement)], $.prototype, "base", void 0), i([c("[part~=\"input\"]"), a("design:type", F === void 0 ? Object : F)], $.prototype, "input", void 0), i([c("[part~=\"opacity-input\"]"), a("design:type", F === void 0 ? Object : F)], $.prototype, "opacityInput", void 0), i([c(".color-dropdown"), a("design:type", P === void 0 ? Object : P)], $.prototype, "dropdown", void 0), i([c(".color-picker__tabs"), a("design:type", z === void 0 ? Object : z)], $.prototype, "tabGroup", void 0), i([c("[part~=\"preview\"]"), a("design:type", typeof HTMLButtonElement > "u" ? Object : HTMLButtonElement)], $.prototype, "previewButton", void 0), i([c("[part~=\"trigger\"]"), a("design:type", typeof HTMLButtonElement > "u" ? Object : HTMLButtonElement)], $.prototype, "trigger", void 0), i([r(), a("design:type", Object)], $.prototype, "hasFocus", void 0), i([r(), a("design:type", Object)], $.prototype, "isDraggingGridHandle", void 0), i([r(), a("design:type", Object)], $.prototype, "isEmpty", void 0), i([r(), a("design:type", Object)], $.prototype, "inputColorValue", void 0), i([r(), a("design:type", Object)], $.prototype, "inputOpacityValue", void 0), i([r(), a("design:type", Object)], $.prototype, "hue", void 0), i([r(), a("design:type", Object)], $.prototype, "saturation", void 0), i([r(), a("design:type", Object)], $.prototype, "brightness", void 0), i([r(), a("design:type", Object)], $.prototype, "alpha", void 0), i([r(), a("design:type", Object)], $.prototype, "gradientValue", void 0), i([r(), a("design:type", Object)], $.prototype, "activeStopId", void 0), i([r(), a("design:type", Array)], $.prototype, "parsedSwatches", void 0), i([r(), a("design:type", Array)], $.prototype, "parsedCustomSwatches", void 0), i([n({
829
+ i([c("[part~=\"base\"]"), a("design:type", typeof HTMLElement > "u" ? Object : HTMLElement)], $.prototype, "base", void 0), i([c("[part~=\"input\"]"), a("design:type", I === void 0 ? Object : I)], $.prototype, "input", void 0), i([c("[part~=\"opacity-input\"]"), a("design:type", I === void 0 ? Object : I)], $.prototype, "opacityInput", void 0), i([c(".color-dropdown"), a("design:type", F === void 0 ? Object : F)], $.prototype, "dropdown", void 0), i([c(".color-picker__tabs"), a("design:type", B === void 0 ? Object : B)], $.prototype, "tabGroup", void 0), i([c("[part~=\"preview\"]"), a("design:type", typeof HTMLButtonElement > "u" ? Object : HTMLButtonElement)], $.prototype, "previewButton", void 0), i([c("[part~=\"trigger\"]"), a("design:type", typeof HTMLButtonElement > "u" ? Object : HTMLButtonElement)], $.prototype, "trigger", void 0), i([r(), a("design:type", Object)], $.prototype, "hasFocus", void 0), i([r(), a("design:type", Object)], $.prototype, "isDraggingGridHandle", void 0), i([r(), a("design:type", Object)], $.prototype, "isEmpty", void 0), i([r(), a("design:type", Object)], $.prototype, "inputColorValue", void 0), i([r(), a("design:type", Object)], $.prototype, "inputOpacityValue", void 0), i([r(), a("design:type", Object)], $.prototype, "hue", void 0), i([r(), a("design:type", Object)], $.prototype, "saturation", void 0), i([r(), a("design:type", Object)], $.prototype, "brightness", void 0), i([r(), a("design:type", Object)], $.prototype, "alpha", void 0), i([r(), a("design:type", Object)], $.prototype, "gradientValue", void 0), i([r(), a("design:type", Object)], $.prototype, "activeStopId", void 0), i([r(), a("design:type", Array)], $.prototype, "parsedSwatches", void 0), i([r(), a("design:type", Array)], $.prototype, "parsedCustomSwatches", void 0), i([n({
830
830
  reflect: !0,
831
831
  type: String
832
- }), a("design:type", Object)], $.prototype, "value", void 0), i([S(), a("design:type", Object)], $.prototype, "defaultValue", void 0), i([n(), a("design:type", Object)], $.prototype, "label", void 0), i([n({
832
+ }), a("design:type", Object)], $.prototype, "value", void 0), i([C(), a("design:type", Object)], $.prototype, "defaultValue", void 0), i([n(), a("design:type", Object)], $.prototype, "label", void 0), i([n({
833
833
  reflect: !0,
834
834
  type: String
835
- }), a("design:type", String)], $.prototype, "variant", void 0), i([n(), a("design:type", A === void 0 ? Object : A)], $.prototype, "format", void 0), i([n({
835
+ }), a("design:type", String)], $.prototype, "variant", void 0), i([n(), a("design:type", j === void 0 ? Object : j)], $.prototype, "format", void 0), i([n({
836
836
  attribute: "formats",
837
837
  converter: {
838
838
  fromAttribute: (e) => e?.split(" ") ?? [],
@@ -848,7 +848,7 @@ i([c("[part~=\"base\"]"), a("design:type", typeof HTMLElement > "u" ? Object : H
848
848
  }), a("design:type", Object)], $.prototype, "inline", void 0), i([n({ type: Boolean }), a("design:type", Object)], $.prototype, "gradient", void 0), i([n({
849
849
  reflect: !0,
850
850
  type: String
851
- }), a("design:type", T === void 0 ? Object : T)], $.prototype, "mode", void 0), i([n({
851
+ }), a("design:type", E === void 0 ? Object : E)], $.prototype, "mode", void 0), i([n({
852
852
  attribute: "gradient-types",
853
853
  converter: {
854
854
  fromAttribute: (e) => e?.split(" ") ?? [],
@@ -873,12 +873,12 @@ i([c("[part~=\"base\"]"), a("design:type", typeof HTMLElement > "u" ? Object : H
873
873
  reflect: !0,
874
874
  type: Boolean
875
875
  }), a("design:type", Object)], $.prototype, "required", void 0), i([r(), a("design:type", Object)], $.prototype, "emitValue", void 0), i([
876
- b(300),
876
+ y(300),
877
877
  a("design:type", Function),
878
878
  a("design:paramtypes", []),
879
879
  a("design:returntype", void 0)
880
880
  ], $.prototype, "debouncedSetColor", null), i([
881
- b(300),
881
+ y(300),
882
882
  a("design:type", Function),
883
883
  a("design:paramtypes", []),
884
884
  a("design:returntype", void 0)