@vonage/vivid 3.57.0 → 3.59.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 (75) hide show
  1. package/appearance-ui/index.cjs +1 -1
  2. package/appearance-ui/index.js +1 -1
  3. package/custom-elements.json +1264 -328
  4. package/lib/audio-player/audio-player.d.ts +20 -0
  5. package/lib/combobox/combobox.d.ts +3 -0
  6. package/lib/combobox/definition.d.ts +1 -1
  7. package/lib/number-field/number-field.d.ts +23 -8
  8. package/lib/number-field/number-field.form-associated.d.ts +10 -0
  9. package/lib/video-player/video-player.d.ts +1 -0
  10. package/listbox/index.cjs +1 -1
  11. package/listbox/index.js +1 -1
  12. package/package.json +1 -1
  13. package/shared/definition.cjs +1 -1
  14. package/shared/definition.js +1 -1
  15. package/shared/definition11.cjs +1 -1
  16. package/shared/definition11.js +1 -1
  17. package/shared/definition16.cjs +11 -2
  18. package/shared/definition16.js +11 -2
  19. package/shared/definition20.cjs +13 -13
  20. package/shared/definition20.js +13 -13
  21. package/shared/definition29.cjs +1 -0
  22. package/shared/definition29.js +1 -1
  23. package/shared/definition3.cjs +1 -1
  24. package/shared/definition3.js +1 -1
  25. package/shared/definition31.cjs +1 -1
  26. package/shared/definition31.js +1 -1
  27. package/shared/definition32.cjs +1 -1
  28. package/shared/definition32.js +1 -1
  29. package/shared/definition35.cjs +240 -331
  30. package/shared/definition35.js +241 -332
  31. package/shared/definition38.cjs +1 -1
  32. package/shared/definition38.js +1 -1
  33. package/shared/definition42.cjs +1 -1
  34. package/shared/definition42.js +2 -2
  35. package/shared/definition43.cjs +2 -2
  36. package/shared/definition43.js +2 -2
  37. package/shared/definition46.cjs +1 -1
  38. package/shared/definition46.js +1 -1
  39. package/shared/definition47.cjs +1 -1
  40. package/shared/definition47.js +1 -1
  41. package/shared/definition5.cjs +209 -128
  42. package/shared/definition5.js +203 -122
  43. package/shared/definition50.cjs +1 -1
  44. package/shared/definition50.js +1 -1
  45. package/shared/definition51.cjs +1 -1
  46. package/shared/definition51.js +1 -1
  47. package/shared/definition54.cjs +1 -1
  48. package/shared/definition54.js +1 -1
  49. package/shared/definition58.cjs +1 -1
  50. package/shared/definition58.js +1 -1
  51. package/shared/definition59.cjs +1 -1
  52. package/shared/definition59.js +1 -1
  53. package/shared/definition61.cjs +10 -65853
  54. package/shared/definition61.js +10 -65853
  55. package/shared/definition7.cjs +1 -1
  56. package/shared/definition7.js +1 -1
  57. package/shared/definition8.cjs +1 -1
  58. package/shared/definition8.js +1 -1
  59. package/shared/icon.cjs +1 -1
  60. package/shared/icon.js +1 -1
  61. package/shared/key-codes2.js +1 -1
  62. package/shared/patterns/anchored.d.ts +4 -4
  63. package/shared/slider.template.cjs +3 -3
  64. package/shared/slider.template.js +3 -3
  65. package/shared/text-field.cjs +1 -1
  66. package/shared/text-field.js +1 -1
  67. package/shared/video-player.cjs +65864 -0
  68. package/shared/video-player.js +65861 -0
  69. package/styles/core/all.css +1 -1
  70. package/styles/core/theme.css +1 -1
  71. package/styles/core/typography.css +1 -1
  72. package/styles/tokens/theme-dark.css +5 -5
  73. package/styles/tokens/theme-light.css +5 -5
  74. package/styles/tokens/vivid-2-compat.css +1 -1
  75. package/vivid.api.json +58 -0
package/shared/definition38.cjs CHANGED
@@ -5,7 +5,7 @@ const baseProgress = require('./base-progress.cjs');
5
5
  const when = require('./when.cjs');
6
6
  const classNames = require('./class-names.cjs');
7
7
 
8
- const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
8
+ const styles = ":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
9
9
 
10
10
  var __defProp = Object.defineProperty;
11
11
  var __decorateClass = (decorators, target, key, kind) => {
package/shared/definition38.js CHANGED
@@ -3,7 +3,7 @@ import { B as BaseProgress } from './base-progress.js';
3
3
  import { w as when } from './when.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
 
6
- const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
6
+ const styles = ":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
7
7
 
8
8
  var __defProp = Object.defineProperty;
9
9
  var __decorateClass = (decorators, target, key, kind) => {
package/shared/definition42.cjs CHANGED
@@ -13,7 +13,7 @@ const ref = require('./ref.cjs');
13
13
  const when = require('./when.cjs');
14
14
  const classNames = require('./class-names.cjs');
15
15
 
16
- const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}.control.horizontal .track .mark{block-size:4px;inline-size:100%}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:4px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
16
+ const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
17
17
 
18
18
  class _RangeSlider extends index.FoundationElement {
19
19
  }
package/shared/definition42.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { F as FoundationElement, a as attr, o as observable, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
2
- import { c as keyHome, d as keyEnd, e as keyArrowUp, k as keyArrowLeft, f as keyArrowDown, a as keyArrowRight } from './key-codes2.js';
2
+ import { e as keyHome, f as keyEnd, d as keyArrowUp, k as keyArrowLeft, c as keyArrowDown, a as keyArrowRight } from './key-codes2.js';
3
3
  import './affix.js';
4
4
  import { f as formElements } from './index2.js';
5
5
  import { L as Localized } from './localized.js';
@@ -11,7 +11,7 @@ import { r as ref } from './ref.js';
11
11
  import { w as when } from './when.js';
12
12
  import { c as classNames } from './class-names.js';
13
13
 
14
- const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}.control.horizontal .track .mark{block-size:4px;inline-size:100%}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:4px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
14
+ const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
15
15
 
16
16
  class _RangeSlider extends FoundationElement {
17
17
  }
package/shared/definition43.cjs CHANGED
@@ -516,7 +516,7 @@ index.__decorate([
516
516
  applyMixins.applyMixins(DelegatesARIASelect, listbox.DelegatesARIAListbox);
517
517
  applyMixins.applyMixins(Select$1, startEnd.StartEnd, DelegatesARIASelect);
518
518
 
519
- const styles = ":host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;border-radius:var(--_select-control-border-radius);background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));border-radius:8px}.icon{display:flex;flex-shrink:0}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}";
519
+ const styles = ":host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;border-radius:var(--_select-control-border-radius);background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));border-radius:8px}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron{transform:rotate(180deg)}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}:host([placeholder]) .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}";
520
520
 
521
521
  var __defProp = Object.defineProperty;
522
522
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -636,7 +636,7 @@ function selectValue(context) {
636
636
  <span class="text">${(x) => x.displayValue}</span>
637
637
  <slot name="meta" ${slotted.slotted("metaSlottedContent")}></slot>
638
638
  </div>
639
- ${() => affixIconTemplate("chevron-down-line")}
639
+ <span class="chevron">${() => affixIconTemplate("chevron-down-line")}</span>
640
640
  </div>`;
641
641
  }
642
642
  function setFixedDropdownVarWidth(x) {
package/shared/definition43.js CHANGED
@@ -514,7 +514,7 @@ __decorate([
514
514
  applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
515
515
  applyMixins(Select$1, StartEnd, DelegatesARIASelect);
516
516
 
517
- const styles = ":host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;border-radius:var(--_select-control-border-radius);background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));border-radius:8px}.icon{display:flex;flex-shrink:0}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}";
517
+ const styles = ":host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;border-radius:var(--_select-control-border-radius);background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));border-radius:8px}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron{transform:rotate(180deg)}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}:host([placeholder]) .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}";
518
518
 
519
519
  var __defProp = Object.defineProperty;
520
520
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -634,7 +634,7 @@ function selectValue(context) {
634
634
  <span class="text">${(x) => x.displayValue}</span>
635
635
  <slot name="meta" ${slotted("metaSlottedContent")}></slot>
636
636
  </div>
637
- ${() => affixIconTemplate("chevron-down-line")}
637
+ <span class="chevron">${() => affixIconTemplate("chevron-down-line")}</span>
638
638
  </div>`;
639
639
  }
640
640
  function setFixedDropdownVarWidth(x) {
package/shared/definition46.cjs CHANGED
@@ -484,7 +484,7 @@ index.__decorate([
484
484
  index.attr
485
485
  ], Slider$1.prototype, "mode", void 0);
486
486
 
487
- const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}.control.horizontal .track .mark{block-size:4px;inline-size:100%}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:4px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}";
487
+ const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}";
488
488
 
489
489
  var __defProp = Object.defineProperty;
490
490
  var __decorateClass = (decorators, target, key, kind) => {
package/shared/definition46.js CHANGED
@@ -482,7 +482,7 @@ __decorate([
482
482
  attr
483
483
  ], Slider$1.prototype, "mode", void 0);
484
484
 
485
- const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}.control.horizontal .track .mark{block-size:4px;inline-size:100%}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:4px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}";
485
+ const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}";
486
486
 
487
487
  var __defProp = Object.defineProperty;
488
488
  var __decorateClass = (decorators, target, key, kind) => {
package/shared/definition47.cjs CHANGED
@@ -70,7 +70,7 @@ __decorateClass([
70
70
  ], SplitButton.prototype, "indicatorAriaLabel");
71
71
  applyMixins.applyMixins(SplitButton, affix.AffixIcon, localized.Localized);
72
72
 
73
- const styles = ":host{display:inline-block}.base{display:inline-flex;justify-content:flex-start;inline-size:inherit}.control,.indicator{display:inline-flex;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--_appearance-color-outline);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle}.control.connotation-cta,.indicator.connotation-cta{--_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success,.indicator.connotation-success{--_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert,.indicator.connotation-alert{--_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert),.indicator:not(.connotation-cta,.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled,.indicator.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined,.indicator.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.indicator{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)),.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-filled,.indicator:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined,.indicator:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled),.indicator:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled,.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined,.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)),.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@supports (user-select: none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-inline-end:0;border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap)}.control:not(.appearance-filled){--focus-stroke-gap-color: transparent}.control.appearance-outlined{--focus-inset: -1px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_split-button-block-size)}}.control:not(.icon-only){flex-grow:1;inline-size:inherit}.control.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-super-condensed:not(.icon-only){--_split-button-icon-gap: 4px;padding-inline:8px}.control.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed:not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:12px}.control.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control.size-expanded:not(.icon-only){--_split-button-icon-gap: 10px;padding-inline:20px}.control:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_border-radius: 8px}.control:not(.shape-pill).size-super-condensed,.control:not(.shape-pill).super-condensed{--_border-radius: 4px}.control.shape-pill{--_border-radius: 24px}.control .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.indicator{position:relative;border-bottom-right-radius:var(--_border-radius);border-inline-start:0;border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate}.indicator:not(.appearance-filled){--focus-stroke-gap-color: transparent}.indicator.appearance-outlined{--focus-inset: 1px}.indicator:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.indicator:not(:disabled){cursor:pointer}.indicator:disabled{cursor:not-allowed}.indicator:before{position:absolute;background-color:var(--_appearance-color-text);content:\"\";inline-size:1px;inset-inline-start:0;opacity:.35}.indicator:not(.appearance-filled,.appearance-outlined):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined):before{block-size:100%}.indicator.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.shape-pill){--_border-radius: 8px}.indicator:not(.shape-pill).size-super-condensed,.indicator:not(.shape-pill).super-condensed{--_border-radius: 4px}.indicator.shape-pill{--_border-radius: 24px}.icon{line-height:1}.icon-trailing .icon{order:1}.control>.icon{font-size:calc(var(--_split-button-block-size) / 2)}";
73
+ const styles = ":host{--_vvd-split-button-accent-firm-wrapper: var( --vvd-split-button-accent-firm );--_vvd-split-button-cta-firm-wrapper: var( --vvd-split-button-cta-firm );--_vvd-split-button-success-firm-wrapper: var( --vvd-split-button-success-firm );--_vvd-split-button-alert-firm-wrapper: var( --vvd-split-button-alert-firm );--_vvd-split-button-announcement-firm-wrapper: var( --vvd-split-button-announcement-firm )}:where(.control,.indicator):not(.appearance-filled,.appearance-outlined){--vvd-split-button-accent-firm: var( --_vvd-split-button-accent-firm-wrapper, var(--vvd-split-button-accent-primary) );--vvd-split-button-cta-firm: var( --_vvd-split-button-cta-firm-wrapper, var(--vvd-split-button-cta-primary) );--vvd-split-button-success-firm: var( --_vvd-split-button-success-firm-wrapper, var(--vvd-split-button-success-primary) );--vvd-split-button-alert-firm: var( --_vvd-split-button-alert-firm-wrapper, var(--vvd-split-button-alert-primary) );--vvd-split-button-announcement-firm: var( --_vvd-split-button-announcement-firm-wrapper, var(--vvd-split-button-announcement-primary) )}:host{display:inline-block}.base{display:inline-flex;justify-content:flex-start;inline-size:inherit}.control,.indicator{display:inline-flex;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--_appearance-color-outline);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle}.control.connotation-cta,.indicator.connotation-cta{--_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success,.indicator.connotation-success{--_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert,.indicator.connotation-alert{--_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50))}.control.connotation-announcement,.indicator.connotation-announcement{--_connotation-color-primary: var(--vvd-split-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-split-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-split-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-split-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-split-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-split-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-split-button-announcement-faint, var(--vvd-color-announcement-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement),.indicator:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled,.indicator.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined,.indicator.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.indicator{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)),.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-filled,.indicator:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined,.indicator:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled),.indicator:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled,.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined,.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)),.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@supports (user-select: none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-inline-end:0;border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap)}.control:not(.appearance-filled){--focus-stroke-gap-color: transparent}.control.appearance-outlined{--focus-inset: -1px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_split-button-block-size)}}.control:not(.icon-only){flex-grow:1;inline-size:inherit}.control.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-super-condensed:not(.icon-only){--_split-button-icon-gap: 4px;padding-inline:8px}.control.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed:not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:12px}.control.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control.size-expanded:not(.icon-only){--_split-button-icon-gap: 10px;padding-inline:20px}.control:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_border-radius: 8px}.control:not(.shape-pill).size-super-condensed,.control:not(.shape-pill).super-condensed{--_border-radius: 4px}.control.shape-pill{--_border-radius: 24px}.control .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.indicator{position:relative;border-bottom-right-radius:var(--_border-radius);border-inline-start:0;border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate}.indicator:not(.appearance-filled){--focus-stroke-gap-color: transparent}.indicator.appearance-outlined{--focus-inset: 1px}.indicator:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.indicator:not(:disabled){cursor:pointer}.indicator:disabled{cursor:not-allowed}.indicator:before{position:absolute;background-color:var(--_appearance-color-text);content:\"\";inline-size:1px;inset-inline-start:0;opacity:.35}.indicator:not(.appearance-filled,.appearance-outlined):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined):before{block-size:100%}.indicator.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.shape-pill){--_border-radius: 8px}.indicator:not(.shape-pill).size-super-condensed,.indicator:not(.shape-pill).super-condensed{--_border-radius: 4px}.indicator.shape-pill{--_border-radius: 24px}.icon{line-height:1}.icon-trailing .icon{order:1}.control>.icon{font-size:calc(var(--_split-button-block-size) / 2)}";
74
74
 
75
75
  const getClasses = ({
76
76
  connotation,
package/shared/definition47.js CHANGED
@@ -68,7 +68,7 @@ __decorateClass([
68
68
  ], SplitButton.prototype, "indicatorAriaLabel");
69
69
  applyMixins(SplitButton, AffixIcon, Localized);
70
70
 
71
- const styles = ":host{display:inline-block}.base{display:inline-flex;justify-content:flex-start;inline-size:inherit}.control,.indicator{display:inline-flex;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--_appearance-color-outline);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle}.control.connotation-cta,.indicator.connotation-cta{--_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success,.indicator.connotation-success{--_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert,.indicator.connotation-alert{--_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert),.indicator:not(.connotation-cta,.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled,.indicator.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined,.indicator.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.indicator{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)),.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-filled,.indicator:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined,.indicator:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled),.indicator:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled,.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined,.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)),.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@supports (user-select: none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-inline-end:0;border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap)}.control:not(.appearance-filled){--focus-stroke-gap-color: transparent}.control.appearance-outlined{--focus-inset: -1px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_split-button-block-size)}}.control:not(.icon-only){flex-grow:1;inline-size:inherit}.control.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-super-condensed:not(.icon-only){--_split-button-icon-gap: 4px;padding-inline:8px}.control.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed:not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:12px}.control.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control.size-expanded:not(.icon-only){--_split-button-icon-gap: 10px;padding-inline:20px}.control:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_border-radius: 8px}.control:not(.shape-pill).size-super-condensed,.control:not(.shape-pill).super-condensed{--_border-radius: 4px}.control.shape-pill{--_border-radius: 24px}.control .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.indicator{position:relative;border-bottom-right-radius:var(--_border-radius);border-inline-start:0;border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate}.indicator:not(.appearance-filled){--focus-stroke-gap-color: transparent}.indicator.appearance-outlined{--focus-inset: 1px}.indicator:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.indicator:not(:disabled){cursor:pointer}.indicator:disabled{cursor:not-allowed}.indicator:before{position:absolute;background-color:var(--_appearance-color-text);content:\"\";inline-size:1px;inset-inline-start:0;opacity:.35}.indicator:not(.appearance-filled,.appearance-outlined):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined):before{block-size:100%}.indicator.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.shape-pill){--_border-radius: 8px}.indicator:not(.shape-pill).size-super-condensed,.indicator:not(.shape-pill).super-condensed{--_border-radius: 4px}.indicator.shape-pill{--_border-radius: 24px}.icon{line-height:1}.icon-trailing .icon{order:1}.control>.icon{font-size:calc(var(--_split-button-block-size) / 2)}";
71
+ const styles = ":host{--_vvd-split-button-accent-firm-wrapper: var( --vvd-split-button-accent-firm );--_vvd-split-button-cta-firm-wrapper: var( --vvd-split-button-cta-firm );--_vvd-split-button-success-firm-wrapper: var( --vvd-split-button-success-firm );--_vvd-split-button-alert-firm-wrapper: var( --vvd-split-button-alert-firm );--_vvd-split-button-announcement-firm-wrapper: var( --vvd-split-button-announcement-firm )}:where(.control,.indicator):not(.appearance-filled,.appearance-outlined){--vvd-split-button-accent-firm: var( --_vvd-split-button-accent-firm-wrapper, var(--vvd-split-button-accent-primary) );--vvd-split-button-cta-firm: var( --_vvd-split-button-cta-firm-wrapper, var(--vvd-split-button-cta-primary) );--vvd-split-button-success-firm: var( --_vvd-split-button-success-firm-wrapper, var(--vvd-split-button-success-primary) );--vvd-split-button-alert-firm: var( --_vvd-split-button-alert-firm-wrapper, var(--vvd-split-button-alert-primary) );--vvd-split-button-announcement-firm: var( --_vvd-split-button-announcement-firm-wrapper, var(--vvd-split-button-announcement-primary) )}:host{display:inline-block}.base{display:inline-flex;justify-content:flex-start;inline-size:inherit}.control,.indicator{display:inline-flex;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--_appearance-color-outline);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle}.control.connotation-cta,.indicator.connotation-cta{--_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success,.indicator.connotation-success{--_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert,.indicator.connotation-alert{--_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50))}.control.connotation-announcement,.indicator.connotation-announcement{--_connotation-color-primary: var(--vvd-split-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-split-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-split-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-split-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-split-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-split-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-split-button-announcement-faint, var(--vvd-color-announcement-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement),.indicator:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled,.indicator.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined,.indicator.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.indicator{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)),.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-filled,.indicator:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined,.indicator:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled),.indicator:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled,.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined,.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)),.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@supports (user-select: none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-inline-end:0;border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap)}.control:not(.appearance-filled){--focus-stroke-gap-color: transparent}.control.appearance-outlined{--focus-inset: -1px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_split-button-block-size)}}.control:not(.icon-only){flex-grow:1;inline-size:inherit}.control.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-super-condensed:not(.icon-only){--_split-button-icon-gap: 4px;padding-inline:8px}.control.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed:not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:12px}.control.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control.size-expanded:not(.icon-only){--_split-button-icon-gap: 10px;padding-inline:20px}.control:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_border-radius: 8px}.control:not(.shape-pill).size-super-condensed,.control:not(.shape-pill).super-condensed{--_border-radius: 4px}.control.shape-pill{--_border-radius: 24px}.control .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.indicator{position:relative;border-bottom-right-radius:var(--_border-radius);border-inline-start:0;border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate}.indicator:not(.appearance-filled){--focus-stroke-gap-color: transparent}.indicator.appearance-outlined{--focus-inset: 1px}.indicator:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.indicator:not(:disabled){cursor:pointer}.indicator:disabled{cursor:not-allowed}.indicator:before{position:absolute;background-color:var(--_appearance-color-text);content:\"\";inline-size:1px;inset-inline-start:0;opacity:.35}.indicator:not(.appearance-filled,.appearance-outlined):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined):before{block-size:100%}.indicator.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.shape-pill){--_border-radius: 8px}.indicator:not(.shape-pill).size-super-condensed,.indicator:not(.shape-pill).super-condensed{--_border-radius: 4px}.indicator.shape-pill{--_border-radius: 24px}.icon{line-height:1}.icon-trailing .icon{order:1}.control>.icon{font-size:calc(var(--_split-button-block-size) / 2)}";
72
72
 
73
73
  const getClasses = ({
74
74
  connotation,