@vonage/vivid 5.9.0 → 5.11.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 (114) hide show
  1. package/bundled/affix.js +1 -1
  2. package/bundled/anchored.cjs +1 -1
  3. package/bundled/anchored.js +6 -6
  4. package/bundled/definition10.js +4 -4
  5. package/bundled/definition7.js +3 -3
  6. package/bundled/host-semantics.js +4 -4
  7. package/bundled/localized.cjs +1 -1
  8. package/bundled/localized.js +14 -12
  9. package/bundled/mixins.cjs +2 -2
  10. package/bundled/mixins.js +6 -6
  11. package/bundled/{feature.cjs → slottable-request.cjs} +3 -3
  12. package/bundled/{feature.js → slottable-request.js} +63 -42
  13. package/bundled/vivid-element.cjs +1 -1
  14. package/bundled/vivid-element.js +1 -1
  15. package/card/definition.cjs +1 -1
  16. package/card/definition.js +1 -1
  17. package/card/index.cjs +10 -10
  18. package/card/index.js +42 -42
  19. package/country/definition.cjs +340 -0
  20. package/country/definition.js +334 -0
  21. package/country/index.cjs +12 -0
  22. package/country/index.js +317 -0
  23. package/custom-elements.json +12768 -9834
  24. package/index.cjs +26 -14
  25. package/index.js +4 -2
  26. package/lib/components.d.ts +3 -1
  27. package/lib/country/countries-data.d.ts +6 -0
  28. package/lib/country/country-code-to-flag-icon.d.ts +5 -0
  29. package/lib/country/country.d.ts +5 -0
  30. package/lib/country/country.template.d.ts +3 -0
  31. package/lib/country/definition.d.ts +3 -0
  32. package/lib/rich-text-editor/locale.d.ts +2 -0
  33. package/lib/rich-text-editor/popover.d.ts +1 -0
  34. package/lib/rich-text-editor/rte/config.d.ts +2 -1
  35. package/lib/rich-text-editor/rte/exports.d.ts +4 -0
  36. package/lib/rich-text-editor/rte/feature.d.ts +7 -1
  37. package/lib/rich-text-editor/rte/features/internal/basic-text-blocks.d.ts +1 -1
  38. package/lib/rich-text-editor/rte/features/internal/foreign-html.d.ts +1 -1
  39. package/lib/rich-text-editor/rte/features/internal/history.d.ts +1 -1
  40. package/lib/rich-text-editor/rte/features/internal/input-rules.d.ts +15 -0
  41. package/lib/rich-text-editor/rte/instance.d.ts +4 -2
  42. package/lib/rich-text-editor/rte/utils/feature-state.d.ts +8 -0
  43. package/lib/rich-text-editor/rte/utils/sanitization.d.ts +7 -0
  44. package/lib/rich-text-editor/rte/utils/text-before-cursor.d.ts +2 -0
  45. package/lib/rich-text-editor/rte/utils/ui.d.ts +2 -0
  46. package/lib/rich-text-editor/rte/view.d.ts +2 -2
  47. package/lib/rich-text-view/definition.d.ts +1 -0
  48. package/lib/rich-text-view/rich-text-view.d.ts +4 -0
  49. package/lib/selectable-box/selectable-box.d.ts +1 -0
  50. package/lib/status/definition.d.ts +4 -0
  51. package/lib/status/status.d.ts +388 -0
  52. package/lib/status/status.template.d.ts +3 -0
  53. package/lib/{data-table → table}/definition.d.ts +1 -1
  54. package/lib/tag/tag.d.ts +1 -1
  55. package/lib/tag-name-map.d.ts +3 -1
  56. package/locales/de-DE.cjs +3 -1
  57. package/locales/de-DE.js +3 -1
  58. package/locales/en-GB.cjs +3 -1
  59. package/locales/en-GB.js +3 -1
  60. package/locales/en-US.cjs +3 -1
  61. package/locales/en-US.js +3 -1
  62. package/locales/ja-JP.cjs +3 -1
  63. package/locales/ja-JP.js +3 -1
  64. package/locales/zh-CN.cjs +3 -1
  65. package/locales/zh-CN.js +3 -1
  66. package/package.json +6 -5
  67. package/rich-text-editor/definition.cjs +3246 -2183
  68. package/rich-text-editor/definition.js +3042 -1983
  69. package/rich-text-editor/index.cjs +20 -19
  70. package/rich-text-editor/index.js +3897 -3117
  71. package/rich-text-view/definition.cjs +30 -18
  72. package/rich-text-view/definition.js +22 -10
  73. package/rich-text-view/index.cjs +1 -1
  74. package/rich-text-view/index.js +46 -38
  75. package/selectable-box/definition.cjs +16 -5
  76. package/selectable-box/definition.js +16 -5
  77. package/selectable-box/index.cjs +11 -9
  78. package/selectable-box/index.js +86 -78
  79. package/shared/utils/slottable-request.d.ts +7 -0
  80. package/status/definition.cjs +76 -0
  81. package/status/definition.js +70 -0
  82. package/status/index.cjs +11 -0
  83. package/status/index.js +55 -0
  84. package/styles/core/all.css +2 -2
  85. package/styles/core/theme.css +2 -2
  86. package/styles/core/typography.css +1 -1
  87. package/styles/tokens/theme-dark.css +4 -4
  88. package/styles/tokens/theme-light.css +4 -4
  89. package/styles/tokens/vivid-2-compat.css +1 -1
  90. package/{data-table → table}/definition.cjs +21 -57
  91. package/{data-table → table}/definition.js +21 -57
  92. package/{data-table → table}/index.cjs +8 -8
  93. package/{data-table → table}/index.js +43 -79
  94. package/tag/definition.cjs +1 -1
  95. package/tag/definition.js +1 -1
  96. package/tag/index.cjs +24 -24
  97. package/tag/index.js +89 -89
  98. package/unbundled/{feature.cjs → slottable-request.cjs} +24 -0
  99. package/unbundled/{feature.js → slottable-request.js} +23 -1
  100. package/unbundled/vivid-element.cjs +1 -1
  101. package/unbundled/vivid-element.js +1 -1
  102. package/vivid.api.json +505 -26
  103. /package/lib/{data-table → table}/table-body.d.ts +0 -0
  104. /package/lib/{data-table → table}/table-body.template.d.ts +0 -0
  105. /package/lib/{data-table → table}/table-cell.d.ts +0 -0
  106. /package/lib/{data-table → table}/table-cell.template.d.ts +0 -0
  107. /package/lib/{data-table → table}/table-head.d.ts +0 -0
  108. /package/lib/{data-table → table}/table-head.template.d.ts +0 -0
  109. /package/lib/{data-table → table}/table-header-cell.d.ts +0 -0
  110. /package/lib/{data-table → table}/table-header-cell.template.d.ts +0 -0
  111. /package/lib/{data-table → table}/table-row.d.ts +0 -0
  112. /package/lib/{data-table → table}/table-row.template.d.ts +0 -0
  113. /package/lib/{data-table → table}/table.d.ts +0 -0
  114. /package/lib/{data-table → table}/table.template.d.ts +0 -0
package/{data-table → table}/definition.cjs RENAMED
@@ -15,17 +15,11 @@ const tableBodyStyles = ":host{display:table-row-group}";
15
15
 
16
16
  const tableRowStyles = ":host{display:table-row}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:contents;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host(:is([selected])) .base{background-color:var(--_appearance-color-fill)}";
17
17
 
18
- const tableHeaderCellStyles = ":host{display:table-cell;box-sizing:border-box;padding:0;border-bottom:1px solid var(--vvd-color-canvas-text);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}:host{--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));outline:none}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";
18
+ const tableHeaderCellStyles = ":host{display:table-cell;box-sizing:border-box;padding:0;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}:host{--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));outline:none}:host([role=columnheader]){border-bottom:1px solid var(--vvd-color-canvas-text)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";
19
19
 
20
20
  const tableCellStyles = ":host{display:table-cell}:host.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}:host{box-sizing:border-box;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));outline:none}:host:not([cell-type=columnheader]){--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host:is([selected]){background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";
21
21
 
22
22
  class Table extends vividElement.VividElement {
23
- /**
24
- * @internal
25
- */
26
- connectedCallback() {
27
- super.connectedCallback();
28
- }
29
23
  }
30
24
 
31
25
  const TableTemplate = (context) => {
@@ -50,12 +44,6 @@ const TableHeadTemplate = (context) => {
50
44
  };
51
45
 
52
46
  class TableBody extends vividElement.VividElement {
53
- /**
54
- * @internal
55
- */
56
- connectedCallback() {
57
- super.connectedCallback();
58
- }
59
47
  }
60
48
 
61
49
  const TableBodyTemplate = (context) => {
@@ -67,12 +55,6 @@ const TableBodyTemplate = (context) => {
67
55
  };
68
56
 
69
57
  class TableRow extends hostSemantics.HostSemantics(vividElement.VividElement) {
70
- /**
71
- * @internal
72
- */
73
- connectedCallback() {
74
- super.connectedCallback();
75
- }
76
58
  }
77
59
 
78
60
  const TableRowTemplate = (context) => {
@@ -90,12 +72,6 @@ const TableRowTemplate = (context) => {
90
72
  };
91
73
 
92
74
  class TableHeaderCell extends hostSemantics.HostSemantics(vividElement.VividElement) {
93
- /**
94
- * @internal
95
- */
96
- connectedCallback() {
97
- super.connectedCallback();
98
- }
99
75
  }
100
76
 
101
77
  const TableHeaderCellTemplate = (context) => {
@@ -103,7 +79,7 @@ const TableHeaderCellTemplate = (context) => {
103
79
  <template
104
80
  tabindex="-1"
105
81
  ${hostSemantics.applyHostSemantics({
106
- role: () => dataGrid_options.DataGridCellRole.columnheader
82
+ role: (x) => x.closest('[data-vvd-component="table-head"]') !== null ? dataGrid_options.DataGridCellRole.columnheader : dataGrid_options.DataGridCellRole.rowheader
107
83
  })}
108
84
  >
109
85
  <slot></slot>
@@ -112,12 +88,6 @@ const TableHeaderCellTemplate = (context) => {
112
88
  };
113
89
 
114
90
  class TableCell extends hostSemantics.HostSemantics(vividElement.VividElement) {
115
- /**
116
- * @internal
117
- */
118
- connectedCallback() {
119
- super.connectedCallback();
120
- }
121
91
  }
122
92
 
123
93
  const TableCellTemplate = (context) => {
@@ -138,56 +108,50 @@ const tableCellDefinition = vividElement.defineVividComponent(
138
108
  TableCell,
139
109
  TableCellTemplate,
140
110
  [],
141
- {
142
- styles: tableCellStyles
143
- }
111
+ { styles: tableCellStyles }
144
112
  );
145
113
  const tableHeaderCellDefinition = vividElement.defineVividComponent(
146
114
  "table-header-cell",
147
115
  TableHeaderCell,
148
116
  TableHeaderCellTemplate,
149
- [tableCellDefinition],
150
- {
151
- styles: tableHeaderCellStyles
152
- }
117
+ [],
118
+ { styles: tableHeaderCellStyles }
153
119
  );
154
120
  const tableRowDefinition = vividElement.defineVividComponent(
155
121
  "table-row",
156
122
  TableRow,
157
123
  TableRowTemplate,
158
- [tableCellDefinition, tableHeaderCellDefinition],
159
- {
160
- styles: tableRowStyles
161
- }
124
+ [],
125
+ { styles: tableRowStyles }
162
126
  );
163
127
  const tableBodyDefinition = vividElement.defineVividComponent(
164
128
  "table-body",
165
129
  TableBody,
166
130
  TableBodyTemplate,
167
- [tableRowDefinition],
168
- {
169
- styles: tableBodyStyles
170
- }
131
+ [],
132
+ { styles: tableBodyStyles }
171
133
  );
172
134
  const tableHeadDefinition = vividElement.defineVividComponent(
173
135
  "table-head",
174
136
  TableHead,
175
137
  TableHeadTemplate,
176
- [tableRowDefinition],
177
- {
178
- styles: tableHeadStyles
179
- }
138
+ [],
139
+ { styles: tableHeadStyles }
180
140
  );
181
141
  const tableDefinition = vividElement.defineVividComponent(
182
142
  "table",
183
143
  Table,
184
144
  TableTemplate,
185
- [tableHeadDefinition, tableBodyDefinition],
186
- {
187
- styles: tableStyles
188
- }
145
+ [
146
+ tableCellDefinition,
147
+ tableHeaderCellDefinition,
148
+ tableRowDefinition,
149
+ tableHeadDefinition,
150
+ tableBodyDefinition
151
+ ],
152
+ { styles: tableStyles }
189
153
  );
190
- const registerDataTable = vividElement.createRegisterFunction(tableDefinition);
154
+ const registerTable = vividElement.createRegisterFunction(tableDefinition);
191
155
 
192
156
  exports.VwcTableBodyElement = TableBody;
193
157
  exports.VwcTableCellElement = TableCell;
@@ -195,7 +159,7 @@ exports.VwcTableElement = Table;
195
159
  exports.VwcTableHeadElement = TableHead;
196
160
  exports.VwcTableHeaderCellElement = TableHeaderCell;
197
161
  exports.VwcTableRowElement = TableRow;
198
- exports.registerDataTable = registerDataTable;
162
+ exports.registerTable = registerTable;
199
163
  exports.tableBodyDefinition = tableBodyDefinition;
200
164
  exports.tableCellDefinition = tableCellDefinition;
201
165
  exports.tableDefinition = tableDefinition;
package/{data-table → table}/definition.js RENAMED
@@ -11,17 +11,11 @@ const tableBodyStyles = ":host{display:table-row-group}";
11
11
 
12
12
  const tableRowStyles = ":host{display:table-row}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:contents;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host(:is([selected])) .base{background-color:var(--_appearance-color-fill)}";
13
13
 
14
- const tableHeaderCellStyles = ":host{display:table-cell;box-sizing:border-box;padding:0;border-bottom:1px solid var(--vvd-color-canvas-text);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}:host{--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));outline:none}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";
14
+ const tableHeaderCellStyles = ":host{display:table-cell;box-sizing:border-box;padding:0;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}:host{--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));outline:none}:host([role=columnheader]){border-bottom:1px solid var(--vvd-color-canvas-text)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";
15
15
 
16
16
  const tableCellStyles = ":host{display:table-cell}:host.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}:host{box-sizing:border-box;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));outline:none}:host:not([cell-type=columnheader]){--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host:is([selected]){background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";
17
17
 
18
18
  class Table extends VividElement {
19
- /**
20
- * @internal
21
- */
22
- connectedCallback() {
23
- super.connectedCallback();
24
- }
25
19
  }
26
20
 
27
21
  const TableTemplate = (context) => {
@@ -46,12 +40,6 @@ const TableHeadTemplate = (context) => {
46
40
  };
47
41
 
48
42
  class TableBody extends VividElement {
49
- /**
50
- * @internal
51
- */
52
- connectedCallback() {
53
- super.connectedCallback();
54
- }
55
43
  }
56
44
 
57
45
  const TableBodyTemplate = (context) => {
@@ -63,12 +51,6 @@ const TableBodyTemplate = (context) => {
63
51
  };
64
52
 
65
53
  class TableRow extends HostSemantics(VividElement) {
66
- /**
67
- * @internal
68
- */
69
- connectedCallback() {
70
- super.connectedCallback();
71
- }
72
54
  }
73
55
 
74
56
  const TableRowTemplate = (context) => {
@@ -86,12 +68,6 @@ const TableRowTemplate = (context) => {
86
68
  };
87
69
 
88
70
  class TableHeaderCell extends HostSemantics(VividElement) {
89
- /**
90
- * @internal
91
- */
92
- connectedCallback() {
93
- super.connectedCallback();
94
- }
95
71
  }
96
72
 
97
73
  const TableHeaderCellTemplate = (context) => {
@@ -99,7 +75,7 @@ const TableHeaderCellTemplate = (context) => {
99
75
  <template
100
76
  tabindex="-1"
101
77
  ${applyHostSemantics({
102
- role: () => DataGridCellRole.columnheader
78
+ role: (x) => x.closest('[data-vvd-component="table-head"]') !== null ? DataGridCellRole.columnheader : DataGridCellRole.rowheader
103
79
  })}
104
80
  >
105
81
  <slot></slot>
@@ -108,12 +84,6 @@ const TableHeaderCellTemplate = (context) => {
108
84
  };
109
85
 
110
86
  class TableCell extends HostSemantics(VividElement) {
111
- /**
112
- * @internal
113
- */
114
- connectedCallback() {
115
- super.connectedCallback();
116
- }
117
87
  }
118
88
 
119
89
  const TableCellTemplate = (context) => {
@@ -134,55 +104,49 @@ const tableCellDefinition = defineVividComponent(
134
104
  TableCell,
135
105
  TableCellTemplate,
136
106
  [],
137
- {
138
- styles: tableCellStyles
139
- }
107
+ { styles: tableCellStyles }
140
108
  );
141
109
  const tableHeaderCellDefinition = defineVividComponent(
142
110
  "table-header-cell",
143
111
  TableHeaderCell,
144
112
  TableHeaderCellTemplate,
145
- [tableCellDefinition],
146
- {
147
- styles: tableHeaderCellStyles
148
- }
113
+ [],
114
+ { styles: tableHeaderCellStyles }
149
115
  );
150
116
  const tableRowDefinition = defineVividComponent(
151
117
  "table-row",
152
118
  TableRow,
153
119
  TableRowTemplate,
154
- [tableCellDefinition, tableHeaderCellDefinition],
155
- {
156
- styles: tableRowStyles
157
- }
120
+ [],
121
+ { styles: tableRowStyles }
158
122
  );
159
123
  const tableBodyDefinition = defineVividComponent(
160
124
  "table-body",
161
125
  TableBody,
162
126
  TableBodyTemplate,
163
- [tableRowDefinition],
164
- {
165
- styles: tableBodyStyles
166
- }
127
+ [],
128
+ { styles: tableBodyStyles }
167
129
  );
168
130
  const tableHeadDefinition = defineVividComponent(
169
131
  "table-head",
170
132
  TableHead,
171
133
  TableHeadTemplate,
172
- [tableRowDefinition],
173
- {
174
- styles: tableHeadStyles
175
- }
134
+ [],
135
+ { styles: tableHeadStyles }
176
136
  );
177
137
  const tableDefinition = defineVividComponent(
178
138
  "table",
179
139
  Table,
180
140
  TableTemplate,
181
- [tableHeadDefinition, tableBodyDefinition],
182
- {
183
- styles: tableStyles
184
- }
141
+ [
142
+ tableCellDefinition,
143
+ tableHeaderCellDefinition,
144
+ tableRowDefinition,
145
+ tableHeadDefinition,
146
+ tableBodyDefinition
147
+ ],
148
+ { styles: tableStyles }
185
149
  );
186
- const registerDataTable = createRegisterFunction(tableDefinition);
150
+ const registerTable = createRegisterFunction(tableDefinition);
187
151
 
188
- export { TableBody as VwcTableBodyElement, TableCell as VwcTableCellElement, Table as VwcTableElement, TableHead as VwcTableHeadElement, TableHeaderCell as VwcTableHeaderCellElement, TableRow as VwcTableRowElement, registerDataTable, tableBodyDefinition, tableCellDefinition, tableDefinition, tableHeadDefinition, tableHeaderCellDefinition, tableRowDefinition };
152
+ export { TableBody as VwcTableBodyElement, TableCell as VwcTableCellElement, Table as VwcTableElement, TableHead as VwcTableHeadElement, TableHeaderCell as VwcTableHeaderCellElement, TableRow as VwcTableRowElement, registerTable, tableBodyDefinition, tableCellDefinition, tableDefinition, tableHeadDefinition, tableHeaderCellDefinition, tableRowDefinition };
package/{data-table → table}/index.cjs RENAMED
@@ -1,18 +1,18 @@
1
- "use strict";const a=require("../bundled/vivid-element.cjs"),r=require("../bundled/host-semantics.cjs"),l=require("../bundled/data-grid.options.cjs"),c=":host{display:inline-block}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;display:table;overflow:auto;width:100%;block-size:inherit;border-collapse:collapse;inline-size:100%;max-block-size:inherit}",n=":host{display:table-header-group}",i=":host{display:table-row-group}",d=":host{display:table-row}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:contents;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host(:is([selected])) .base{background-color:var(--_appearance-color-fill)}",v=":host{display:table-cell;box-sizing:border-box;padding:0;border-bottom:1px solid var(--vvd-color-canvas-text);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}:host{--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));outline:none}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}",s=":host{display:table-cell}:host.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}:host{box-sizing:border-box;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));outline:none}:host:not([cell-type=columnheader]){--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host:is([selected]){background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";class p extends a.VividElement{connectedCallback(){super.connectedCallback()}}const b=o=>a.html`
1
+ "use strict";const o=require("../bundled/vivid-element.cjs"),r=require("../bundled/host-semantics.cjs"),t=require("../bundled/data-grid.options.cjs"),l=":host{display:inline-block}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;display:table;overflow:auto;width:100%;block-size:inherit;border-collapse:collapse;inline-size:100%;max-block-size:inherit}",c=":host{display:table-header-group}",n=":host{display:table-row-group}",i=":host{display:table-row}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:contents;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host(:is([selected])) .base{background-color:var(--_appearance-color-fill)}",d=":host{display:table-cell;box-sizing:border-box;padding:0;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}:host{--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));outline:none}:host([role=columnheader]){border-bottom:1px solid var(--vvd-color-canvas-text)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}",v=":host{display:table-cell}:host.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}:host{box-sizing:border-box;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));outline:none}:host:not([cell-type=columnheader]){--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host:is([selected]){background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";class s extends o.VividElement{}const p=a=>o.html`
2
2
  <template role="table">
3
3
  <div class="base">
4
4
  <slot></slot>
5
5
  </div>
6
6
  </template>
7
- `;class m extends a.VividElement{}const _=o=>a.html`
7
+ `;class m extends o.VividElement{}const b=a=>o.html`
8
8
  <template>
9
9
  <slot></slot>
10
10
  </template>
11
- `;class f extends a.VividElement{connectedCallback(){super.connectedCallback()}}const h=o=>a.html`
11
+ `;class _ extends o.VividElement{}const f=a=>o.html`
12
12
  <template>
13
13
  <slot></slot>
14
14
  </template>
15
- `;class u extends r.HostSemantics(a.VividElement){connectedCallback(){super.connectedCallback()}}const x=o=>a.html`
15
+ `;class h extends r.HostSemantics(o.VividElement){}const u=a=>o.html`
16
16
  <template
17
17
  ${r.applyHostSemantics({role:"row"})}
18
18
  >
@@ -20,18 +20,18 @@
20
20
  <slot></slot>
21
21
  </div>
22
22
  </template>
23
- `;class g extends r.HostSemantics(a.VividElement){connectedCallback(){super.connectedCallback()}}const y=o=>a.html`
23
+ `;class x extends r.HostSemantics(o.VividElement){}const g=a=>o.html`
24
24
  <template
25
25
  tabindex="-1"
26
- ${r.applyHostSemantics({role:()=>l.DataGridCellRole.columnheader})}
26
+ ${r.applyHostSemantics({role:e=>e.closest('[data-vvd-component="table-head"]')!==null?t.DataGridCellRole.columnheader:t.DataGridCellRole.rowheader})}
27
27
  >
28
28
  <slot></slot>
29
29
  </template>
30
- `;class w extends r.HostSemantics(a.VividElement){connectedCallback(){super.connectedCallback()}}const k=o=>a.html`
30
+ `;class y extends r.HostSemantics(o.VividElement){}const w=a=>o.html`
31
31
  <template
32
32
  tabindex="-1"
33
33
  ${r.applyHostSemantics({role:()=>"cell"})}
34
34
  >
35
35
  <slot></slot>
36
36
  </template>
37
- `,t=a.defineVividComponent("table-cell",w,k,[],{styles:s}),C=a.defineVividComponent("table-header-cell",g,y,[t],{styles:v}),e=a.defineVividComponent("table-row",u,x,[t,C],{styles:d}),z=a.defineVividComponent("table-body",f,h,[e],{styles:i}),T=a.defineVividComponent("table-head",m,_,[e],{styles:n}),H=a.defineVividComponent("table",p,b,[T,z],{styles:c}),S=a.createRegisterFunction(H);S();
37
+ `,k=o.defineVividComponent("table-cell",y,w,[],{styles:v}),z=o.defineVividComponent("table-header-cell",x,g,[],{styles:d}),T=o.defineVividComponent("table-row",h,u,[],{styles:i}),C=o.defineVividComponent("table-body",_,f,[],{styles:n}),H=o.defineVividComponent("table-head",m,b,[],{styles:c}),S=o.defineVividComponent("table",s,p,[k,z,T,H,C],{styles:l}),V=o.createRegisterFunction(S);V();