@vonage/vivid 3.30.0 → 3.32.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 (135) hide show
  1. package/alert/index.js +2 -1
  2. package/checkbox/index.js +2 -1
  3. package/combobox/index.js +2 -1
  4. package/custom-elements.json +811 -18
  5. package/date-picker/index.js +35 -0
  6. package/dialog/index.js +1 -1
  7. package/divider/index.js +1 -1
  8. package/empty-state/index.js +1 -1
  9. package/fab/index.js +1 -1
  10. package/file-picker/index.js +3 -2
  11. package/header/index.js +1 -1
  12. package/index.d.ts +1 -0
  13. package/index.js +48 -46
  14. package/layout/index.js +1 -1
  15. package/lib/button/button.d.ts +2 -0
  16. package/lib/components.d.ts +20 -19
  17. package/lib/date-picker/calendar/calendarGrid.d.ts +17 -0
  18. package/lib/date-picker/calendar/dateStr.d.ts +6 -0
  19. package/lib/date-picker/calendar/month.d.ts +11 -0
  20. package/lib/date-picker/calendar/monthPickerGrid.d.ts +10 -0
  21. package/lib/date-picker/calendar/presentationDate.d.ts +4 -0
  22. package/lib/date-picker/date-picker.d.ts +16 -0
  23. package/lib/date-picker/date-picker.template.d.ts +4 -0
  24. package/lib/date-picker/definition.d.ts +3 -0
  25. package/lib/date-picker/index.d.ts +1 -0
  26. package/lib/date-picker/locale.d.ts +21 -0
  27. package/lib/nav-disclosure/nav-disclosure.d.ts +1 -0
  28. package/lib/pagination/definition.d.ts +1 -0
  29. package/lib/pagination/pagination.d.ts +3 -1
  30. package/lib/select/select.d.ts +4 -2
  31. package/listbox/index.js +3 -2
  32. package/locales/en-GB.d.ts +3 -0
  33. package/locales/en-GB.js +25 -0
  34. package/locales/en-US.d.ts +3 -0
  35. package/locales/en-US.js +25 -0
  36. package/locales/ja-JP.d.ts +3 -0
  37. package/locales/ja-JP.js +25 -0
  38. package/locales/zh-CN.d.ts +3 -0
  39. package/locales/zh-CN.js +25 -0
  40. package/menu/index.js +2 -2
  41. package/menu-item/index.js +1 -1
  42. package/nav/index.js +1 -1
  43. package/nav-disclosure/index.js +1 -1
  44. package/nav-item/index.js +1 -1
  45. package/note/index.js +3 -2
  46. package/number-field/index.js +4 -3
  47. package/option/index.js +2 -1
  48. package/package.json +2 -1
  49. package/pagination/index.js +1 -1
  50. package/progress/index.js +1 -1
  51. package/radio/index.js +1 -1
  52. package/radio-group/index.js +1 -1
  53. package/select/index.js +3 -2
  54. package/shared/definition.js +1 -1
  55. package/shared/definition10.js +1 -1
  56. package/shared/definition11.js +1 -1
  57. package/shared/definition12.js +1 -1
  58. package/shared/definition14.js +1 -1
  59. package/shared/definition15.js +1 -1
  60. package/shared/definition16.js +1 -1
  61. package/shared/definition17.js +1 -1
  62. package/shared/definition18.js +2 -2
  63. package/shared/definition19.js +2 -2
  64. package/shared/definition2.js +1 -1
  65. package/shared/definition21.js +3 -3
  66. package/shared/definition22.js +2 -2
  67. package/shared/definition23.js +5750 -189
  68. package/shared/definition24.js +116 -68
  69. package/shared/definition25.js +68 -38
  70. package/shared/definition26.js +222 -74
  71. package/shared/definition27.js +33 -2282
  72. package/shared/definition28.js +76 -47
  73. package/shared/definition29.js +2287 -38
  74. package/shared/definition30.js +39 -417
  75. package/shared/definition31.js +38 -364
  76. package/shared/definition32.js +427 -12
  77. package/shared/definition33.js +351 -53
  78. package/shared/definition34.js +12 -26
  79. package/shared/definition35.js +67 -31
  80. package/shared/definition36.js +20 -431
  81. package/shared/definition37.js +34 -181
  82. package/shared/definition38.js +427 -45
  83. package/shared/definition39.js +195 -33
  84. package/shared/definition4.js +1 -1
  85. package/shared/definition40.js +53 -425
  86. package/shared/definition41.js +29 -645
  87. package/shared/definition42.js +420 -73
  88. package/shared/definition43.js +549 -444
  89. package/shared/definition44.js +68 -90
  90. package/shared/definition45.js +501 -79
  91. package/shared/definition46.js +84 -45
  92. package/shared/definition47.js +131 -17
  93. package/shared/definition48.js +44 -471
  94. package/shared/definition49.js +21 -108
  95. package/shared/definition5.js +1 -1
  96. package/shared/definition50.js +487 -15
  97. package/shared/definition51.js +92 -255
  98. package/shared/definition52.js +16 -115
  99. package/shared/definition53.js +264 -115
  100. package/shared/definition54.js +91 -82
  101. package/shared/definition55.js +111 -65
  102. package/shared/definition56.js +64 -291
  103. package/shared/definition57.js +303 -0
  104. package/shared/definition6.js +2 -2
  105. package/shared/definition7.js +10 -3
  106. package/shared/definition9.js +1 -1
  107. package/shared/{form-elements.js → index2.js} +14 -2
  108. package/shared/localization/Locale.d.ts +4 -0
  109. package/shared/localization/index.d.ts +7 -0
  110. package/shared/patterns/form-elements/form-elements.d.ts +4 -4
  111. package/shared/patterns/index.d.ts +1 -0
  112. package/shared/patterns/localized.d.ts +4 -0
  113. package/shared/text-field.js +1 -1
  114. package/side-drawer/index.js +1 -1
  115. package/slider/index.js +1 -1
  116. package/split-button/index.js +1 -1
  117. package/styles/core/all.css +25 -3
  118. package/styles/core/theme.css +1 -1
  119. package/styles/core/typography.css +25 -3
  120. package/styles/tokens/theme-dark.css +4 -4
  121. package/styles/tokens/theme-light.css +4 -4
  122. package/styles/tokens/vivid-2-compat.css +14 -0
  123. package/switch/index.js +3 -2
  124. package/tab/index.js +1 -1
  125. package/tab-panel/index.js +1 -1
  126. package/tabs/index.js +3 -3
  127. package/tag/index.js +1 -1
  128. package/tag-group/index.js +1 -1
  129. package/text-area/index.js +3 -2
  130. package/text-field/index.js +3 -2
  131. package/toggletip/index.js +1 -1
  132. package/tooltip/index.js +1 -1
  133. package/tree-item/index.js +1 -1
  134. package/tree-view/index.js +1 -1
  135. package/vivid.api.json +262 -0
@@ -910,9 +910,9 @@ __decorate([
910
910
 
911
911
  var css_248z$2 = ":host {\n display: block;\n}\n\n:host([generate-header=sticky]) {\n max-block-size: 400px;\n}\n\n.base {\n position: relative;\n overflow: auto;\n block-size: inherit;\n inline-size: 100%;\n max-block-size: inherit;\n}\n.base::-webkit-scrollbar {\n display: none;\n}";
912
912
 
913
- var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Mon, 14 Aug 2023 13:17:40 GMT\n */\n.base {\n display: grid;\n width: 100%;\n box-sizing: border-box;\n color: var(--vvd-color-canvas-text);\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-data-grid-row-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-data-grid-row-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-row-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-data-grid-row-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-data-grid-row-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-data-grid-row-cta-dim=var(--vvd-color-cta-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n /* @cssprop [--vvd-data-grid-row-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-data-grid-row-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-row-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-data-grid-row-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-data-grid-row-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-data-grid-row-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n:host([row-type=sticky-header]) .base {\n position: sticky;\n z-index: 9;\n top: 0;\n background: var(--data-grid-row-background, var(--vvd-color-canvas));\n}\n:host([row-type=hidden-header]) .base {\n display: none;\n}\n:host(:is([aria-selected]):not([row-type=header])) .base {\n background-color: var(--_appearance-color-fill);\n}";
913
+ var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n.base {\n display: grid;\n width: 100%;\n box-sizing: border-box;\n color: var(--vvd-color-canvas-text);\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-data-grid-row-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-data-grid-row-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-row-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-data-grid-row-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-data-grid-row-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-data-grid-row-cta-dim=var(--vvd-color-cta-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n /* @cssprop [--vvd-data-grid-row-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-data-grid-row-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-row-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-data-grid-row-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-data-grid-row-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-data-grid-row-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n:host([row-type=sticky-header]) .base {\n position: sticky;\n z-index: 9;\n top: 0;\n background: var(--data-grid-row-background, var(--vvd-color-canvas));\n}\n:host([row-type=hidden-header]) .base {\n display: none;\n}\n:host(:is([aria-selected]):not([row-type=header])) .base {\n background-color: var(--_appearance-color-fill);\n}";
914
914
 
915
- var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 14 Aug 2023 13:17:40 GMT\n */\n:host {\n min-inline-size: 80px;\n}\n\n.base {\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--vvd-color-neutral-400);\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n color: var(--_appearance-color-text);\n font: var(--vvd-typography-base);\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-data-grid-cell-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-data-grid-cell-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-cell-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-data-grid-cell-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-data-grid-cell-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-data-grid-cell-cta-dim=var(--vvd-color-cta-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n /* @cssprop [--vvd-data-grid-cell-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-data-grid-cell-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-cell-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-data-grid-cell-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-data-grid-cell-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-data-grid-cell-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n:host([cell-type=columnheader]) .base {\n border-color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base-bold);\n}\n:host(:is([aria-selected]):not([cell-type=columnheader])) .base {\n background-color: var(--_appearance-color-fill);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.base:not(.active) > .focus-indicator {\n display: none;\n}\n\nslot {\n display: block;\n overflow: hidden;\n inline-size: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.header-icon {\n margin-inline-start: auto;\n}";
915
+ var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n:host {\n min-inline-size: 80px;\n}\n\n.base {\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--vvd-color-neutral-400);\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n color: var(--_appearance-color-text);\n font: var(--vvd-typography-base);\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-data-grid-cell-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-data-grid-cell-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-cell-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-data-grid-cell-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-data-grid-cell-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-data-grid-cell-cta-dim=var(--vvd-color-cta-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n /* @cssprop [--vvd-data-grid-cell-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-data-grid-cell-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-data-grid-cell-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-data-grid-cell-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-data-grid-cell-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-data-grid-cell-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n:host([cell-type=columnheader]) .base {\n border-color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base-bold);\n}\n:host(:is([aria-selected]):not([cell-type=columnheader])) .base {\n background-color: var(--_appearance-color-fill);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.base:not(.active) > .focus-indicator {\n display: none;\n}\n\nslot {\n display: block;\n overflow: hidden;\n inline-size: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.header-icon {\n margin-inline-start: auto;\n}";
916
916
 
917
917
  var _DataGrid_instances, _DataGrid_selectedRows_get, _DataGrid_selectedCells_get, _DataGrid_handleKeypress, _DataGrid_handleClick, _DataGrid_handleCellSelection, _DataGrid_handleRowSelection, _DataGrid_setSelectedState, _DataGrid_resetSelection, _DataGrid_initSelections;
918
918
  const DataGridSelectionMode = {