@fusion.dev/helix 0.26.0 → 0.30.1

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 (133) hide show
  1. package/custom-elements.json +6072 -2074
  2. package/dist/accordion/root/accordion-root.css.js +1 -2
  3. package/dist/announcement/root/announcement-root.css.js +0 -1
  4. package/dist/area-chart/root/area-chart-root.css.js +2 -1
  5. package/dist/area-chart/root/area-chart-root.d.ts +1 -1
  6. package/dist/aura/{root/aura-axis.d.ts → axis.d.ts} +2 -2
  7. package/dist/aura/root/aura-root.d.ts +5 -1
  8. package/dist/aura/root/aura-root.js +3 -3
  9. package/dist/avatar/root/avatar-root.css.js +1 -1
  10. package/dist/bar-chart/root/bar-chart-root.css.js +2 -2
  11. package/dist/bar-chart/root/bar-chart-root.d.ts +1 -1
  12. package/dist/blockquote/root/blockquote-root.css.js +1 -2
  13. package/dist/breadcrumbs/root/breadcrumbs-root.css.js +1 -1
  14. package/dist/callout/root/callout-root.css.js +0 -1
  15. package/dist/carousel/root/carousel-root.css.js +0 -1
  16. package/dist/chat/message/chat-message.css.js +4 -1
  17. package/dist/chat/root/chat-root.css.js +5 -1
  18. package/dist/chat/root/chat-root.js +2 -1
  19. package/dist/checkbox/root/checkbox-root.css.js +1 -1
  20. package/dist/checkbox/root/checkbox-root.d.ts +4 -3
  21. package/dist/checkbox-group/root/checkbox-group-root.css.js +0 -1
  22. package/dist/code/root/code-root.css.js +0 -1
  23. package/dist/code-block/root/code-block-root.css.js +0 -1
  24. package/dist/color-input/root/color-input-root.css.js +5 -82
  25. package/dist/color-input/root/color-input-root.js +11 -1
  26. package/dist/color-picker/root/color-picker-root.js +1 -1
  27. package/dist/combobox/root/combobox-root.css.js +4 -83
  28. package/dist/combobox/root/combobox-root.js +12 -1
  29. package/dist/data-table/root/data-table-root.css.js +0 -8
  30. package/dist/data-table/root/data-table-root.js +2 -1
  31. package/dist/date-input/root/date-input-root.css.js +4 -80
  32. package/dist/date-input/root/date-input-root.js +12 -1
  33. package/dist/divider/root/divider-root.css.js +1 -1
  34. package/dist/donut-chart/root/donut-chart-root.css.js +3 -2
  35. package/dist/drilldown/root/drilldown-root.css.js +0 -11
  36. package/dist/drilldown/root/drilldown-root.js +2 -1
  37. package/dist/empty/root/empty-root.css.js +1 -2
  38. package/dist/file-input/root/file-input-root.css.js +3 -21
  39. package/dist/file-input/root/file-input-root.js +9 -2
  40. package/dist/filter-input/root/filter-input-root.css.js +4 -82
  41. package/dist/filter-input/root/filter-input-root.js +7 -1
  42. package/dist/flex/root/flex-root.css.js +1 -1
  43. package/dist/grid/root/grid-root.css.js +1 -1
  44. package/dist/icon/root/icon-root.css.js +1 -1
  45. package/dist/image/root/image-root.css.js +1 -1
  46. package/dist/input/root/input-root.css.js +0 -32
  47. package/dist/input/root/input-root.js +9 -2
  48. package/dist/legend/root/legend-root.css.js +1 -2
  49. package/dist/line-chart/root/line-chart-root.css.js +2 -2
  50. package/dist/line-chart/root/line-chart-root.d.ts +3 -1
  51. package/dist/list/root/list-root.css.js +1 -1
  52. package/dist/listbox/root/listbox-root.css.js +2 -8
  53. package/dist/listbox/root/listbox-root.js +7 -1
  54. package/dist/loader/root/loader-root.css.js +9 -5
  55. package/dist/menu/root/menu-root.css.js +4 -64
  56. package/dist/menu/root/menu-root.js +9 -1
  57. package/dist/meter/root/meter-root.css.js +0 -1
  58. package/dist/notifications/group/notification-group.css.js +1 -0
  59. package/dist/notifications/notification/notification.js +1 -1
  60. package/dist/notifications/root/notifications-root.css.js +2 -7
  61. package/dist/notifications/root/notifications-root.js +2 -1
  62. package/dist/number-input/root/number-input-root.css.js +2 -40
  63. package/dist/number-input/root/number-input-root.d.ts +2 -0
  64. package/dist/number-input/root/number-input-root.js +7 -1
  65. package/dist/option/root/option-root.css.js +0 -1
  66. package/dist/orb/index.d.ts +1 -1
  67. package/dist/orb/index.js +1 -1
  68. package/dist/orb/root/orb-root.d.ts +5 -1
  69. package/dist/orb/root/orb-root.js +3 -3
  70. package/dist/outline/root/outline-root.css.js +1 -1
  71. package/dist/pin-input/root/pin-input-root.css.js +0 -1
  72. package/dist/progress/root/progress-root.css.js +0 -1
  73. package/dist/qr-code/root/qr-code-root.css.js +1 -1
  74. package/dist/quote/root/quote-root.css.js +1 -2
  75. package/dist/radio/root/radio-root.css.js +5 -2
  76. package/dist/rating/root/rating-root.css.js +0 -1
  77. package/dist/scroll-area/root/scroll-area-root.css.js +0 -2
  78. package/dist/select/root/select-root.css.js +3 -57
  79. package/dist/select/root/select-root.js +9 -1
  80. package/dist/shared/chart/series.css.js +4 -1
  81. package/dist/shared/chart/tooltip.css.js +1 -96
  82. package/dist/shared/collection/state.css.js +11 -0
  83. package/dist/shared/field/field-frame.css.d.ts +1 -0
  84. package/dist/shared/field/field-frame.css.js +36 -0
  85. package/dist/shared/field/field.css.js +0 -6
  86. package/dist/shared/floating/entrance.css.d.ts +1 -0
  87. package/dist/shared/floating/entrance.css.js +39 -0
  88. package/dist/shared/floating/panel.css.d.ts +1 -0
  89. package/dist/shared/floating/panel.css.js +18 -0
  90. package/dist/shared/glyph/glyph.css.d.ts +1 -0
  91. package/dist/sparkline/root/sparkline-root.css.js +0 -1
  92. package/dist/speed-dial/root/speed-dial-root.js +1 -1
  93. package/dist/splitter/root/splitter-root.css.js +0 -2
  94. package/dist/stat/root/stat-root.css.js +1 -1
  95. package/dist/steps/root/steps-root.css.js +1 -1
  96. package/dist/switch/root/switch-root.css.js +0 -1
  97. package/dist/table/cell/table-cell.d.ts +4 -3
  98. package/dist/table/root/table-root.css.js +1 -13
  99. package/dist/table/root/table-root.js +2 -1
  100. package/dist/table/row/table-row.d.ts +4 -3
  101. package/dist/tabs/panel/tab-panel.d.ts +3 -3
  102. package/dist/tabs/root/tabs-root.css.js +0 -1
  103. package/dist/tabs/tab/tab.d.ts +4 -3
  104. package/dist/tag/root/tag-root.css.js +1 -1
  105. package/dist/text/root/text-root.css.js +1 -1
  106. package/dist/textarea/root/textarea-root.css.js +2 -36
  107. package/dist/textarea/root/textarea-root.js +7 -1
  108. package/dist/time-input/root/time-input-root.css.js +7 -82
  109. package/dist/time-input/root/time-input-root.js +12 -1
  110. package/dist/time-picker/root/time-picker-root.css.js +0 -1
  111. package/dist/timeline/root/timeline-root.css.js +1 -1
  112. package/dist/tooltip/root/tooltip-root.css.js +1 -0
  113. package/dist/tour/stop/tour-stop.css.js +7 -6
  114. package/dist/tree/root/tree-root.css.js +1 -12
  115. package/dist/tree/root/tree-root.js +2 -1
  116. package/dist/trend/root/trend-root.css.js +1 -1
  117. package/dist/trend/root/trend-root.js +1 -1
  118. package/dist/video/root/video-root.css.js +11 -8
  119. package/dist/video/root/video-root.js +1 -1
  120. package/dist/video-playlist/menu/video-playlist-menu.js +1 -1
  121. package/dist/virtual-list/root/virtual-list-root.css.js +0 -2
  122. package/package.json +9 -8
  123. package/types/jsx.d.ts +493 -405
  124. package/types/vue.d.ts +142 -129
  125. /package/dist/aura/{root/aura-axis.js → axis.js} +0 -0
  126. /package/dist/aura/{root/aura-shader.d.ts → shader.d.ts} +0 -0
  127. /package/dist/aura/{root/aura-shader.js → shader.js} +0 -0
  128. /package/dist/orb/{root/orb-color.d.ts → color.d.ts} +0 -0
  129. /package/dist/orb/{root/orb-color.js → color.js} +0 -0
  130. /package/dist/orb/{root/orb-shapes.d.ts → shapes.d.ts} +0 -0
  131. /package/dist/orb/{root/orb-shapes.js → shapes.js} +0 -0
  132. /package/dist/{icon/glyph.css.d.ts → shared/collection/state.css.d.ts} +0 -0
  133. /package/dist/{icon → shared/glyph}/glyph.css.js +0 -0
@@ -6,6 +6,6 @@ flex-direction: column;
6
6
 
7
7
  @media print {
8
8
  :host {
9
- box-shadow: none;
9
+ print-color-adjust: economy;
10
10
  }
11
11
  }`);
@@ -41,6 +41,7 @@ scale: 1;
41
41
 
42
42
  [part="arrow"] {
43
43
  background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));
44
+
44
45
  block-size: var(--tooltip-arrow-size, 0.5rem);
45
46
  inline-size: var(--tooltip-arrow-size, 0.5rem);
46
47
  position: absolute;
@@ -45,8 +45,9 @@ margin-inline-end: auto;
45
45
 
46
46
  [part="arrow"] {
47
47
  background-color: var(--tour-surface-color, var(--helix-color-surface-raised));
48
- block-size: var(--tour-arrow-size, 0.625rem);
49
- inline-size: var(--tour-arrow-size, 0.625rem);
48
+
49
+ block-size: var(--tour-arrow-size, 0.5rem);
50
+ inline-size: var(--tour-arrow-size, 0.5rem);
50
51
  position: absolute;
51
52
  rotate: 45deg;
52
53
  }
@@ -54,23 +55,23 @@ rotate: 45deg;
54
55
  [part="bubble"][data-placement^="bottom"] [part="arrow"] {
55
56
  border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
56
57
  border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
57
- inset-block-start: calc(var(--tour-arrow-size, 0.625rem) / -2);
58
+ inset-block-start: calc(var(--tour-arrow-size, 0.5rem) / -2);
58
59
  }
59
60
 
60
61
  [part="bubble"][data-placement^="top"] [part="arrow"] {
61
62
  border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
62
63
  border-inline-end: var(--helix-border-thin) solid var(--helix-color-border);
63
- inset-block-end: calc(var(--tour-arrow-size, 0.625rem) / -2);
64
+ inset-block-end: calc(var(--tour-arrow-size, 0.5rem) / -2);
64
65
  }
65
66
 
66
67
  [part="bubble"][data-placement^="right"] [part="arrow"] {
67
68
  border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
68
69
  border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
69
- inset-inline-start: calc(var(--tour-arrow-size, 0.625rem) / -2);
70
+ inset-inline-start: calc(var(--tour-arrow-size, 0.5rem) / -2);
70
71
  }
71
72
 
72
73
  [part="bubble"][data-placement^="left"] [part="arrow"] {
73
74
  border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
74
75
  border-inline-end: var(--helix-border-thin) solid var(--helix-color-border);
75
- inset-inline-end: calc(var(--tour-arrow-size, 0.625rem) / -2);
76
+ inset-inline-end: calc(var(--tour-arrow-size, 0.5rem) / -2);
76
77
  }`);
@@ -20,23 +20,12 @@ flex-direction: column;
20
20
  --_tree-reserve: var(--helix-space-none);
21
21
  }
22
22
 
23
- [part="empty"],
24
- [part="loading"] {
25
- color: var(--helix-color-foreground-subtle);
26
- font-family: var(--helix-font-sans);
27
- font-size: var(--helix-text-sm);
28
- margin: var(--helix-space-none);
29
- padding-block: var(--helix-space-md);
30
- padding-inline: var(--helix-space-sm);
31
- text-align: center;
32
- }
33
-
34
23
  :host([loading]) [part="tree"] {
35
24
  opacity: 0.5;
36
25
  }
37
26
 
38
27
  @media print {
39
28
  :host {
40
- box-shadow: none;
29
+ print-color-adjust: economy;
41
30
  }
42
31
  }`);
@@ -7,9 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessTree } from '@fusion.dev/helix-headless/tree';
9
9
  import { property } from 'lit/decorators.js';
10
+ import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
10
11
  import { styles } from './tree-root.css.js';
11
12
  let HelixTree = class HelixTree extends HelixHeadlessTree {
12
- static { this.styles = styles; }
13
+ static { this.styles = [collectionStateStyles, styles]; }
13
14
  };
14
15
  __decorate([
15
16
  property({ attribute: 'chevron-placement', reflect: true })
@@ -44,6 +44,6 @@ font-weight: var(--helix-weight-regular);
44
44
 
45
45
  @media print {
46
46
  :host {
47
- box-shadow: none;
47
+ print-color-adjust: economy;
48
48
  }
49
49
  }`);
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessTrend } from '@fusion.dev/helix-headless/trend';
9
9
  import '../../icon/index.js';
10
- import { styles as glyphStyles } from '../../icon/glyph.css.js';
10
+ import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
11
11
  import { styles } from './trend-root.css.js';
12
12
  let HelixTrend = class HelixTrend extends HelixHeadlessTrend {
13
13
  static { this.styles = [glyphStyles, styles]; }
@@ -2,6 +2,10 @@ import { createSheet } from '@fusion.dev/helix-core';
2
2
  export const styles = createSheet(`:host {
3
3
  color-scheme: dark;
4
4
 
5
+ --_video-rail-size: 4px;
6
+ --_video-spin: 0.8s;
7
+ --_video-thumb-size: 12px;
8
+
5
9
  display: block;
6
10
  position: relative;
7
11
  }
@@ -127,7 +131,7 @@ to right,
127
131
  var(--_video-fill) calc(var(--_video-at, 0) * 100%),
128
132
  transparent calc(var(--_video-at, 0) * 100%)
129
133
  );
130
- block-size: 4px;
134
+ block-size: var(--_video-rail-size);
131
135
  }
132
136
 
133
137
  [part="scrubber"] {
@@ -166,7 +170,7 @@ var(--_video-fill) calc(var(--_video-at, 1) * 100%),
166
170
  transparent calc(var(--_video-at, 1) * 100%)
167
171
  );
168
172
 
169
- block-size: 4px;
173
+ block-size: var(--_video-rail-size);
170
174
  bottom: var(--_video-level-lift);
171
175
  direction: rtl;
172
176
  inline-size: var(--_video-level-size);
@@ -215,19 +219,19 @@ translate: -50% 0;
215
219
  [part="volume"]::-webkit-slider-thumb {
216
220
  appearance: none;
217
221
  background-color: currentColor;
218
- block-size: 12px;
222
+ block-size: var(--_video-thumb-size);
219
223
  border: none;
220
224
  border-radius: var(--helix-radii-full);
221
- inline-size: 12px;
225
+ inline-size: var(--_video-thumb-size);
222
226
  }
223
227
 
224
228
  [part="scrubber"]::-moz-range-thumb,
225
229
  [part="volume"]::-moz-range-thumb {
226
230
  background-color: currentColor;
227
- block-size: 12px;
231
+ block-size: var(--_video-thumb-size);
228
232
  border: none;
229
233
  border-radius: var(--helix-radii-full);
230
- inline-size: 12px;
234
+ inline-size: var(--_video-thumb-size);
231
235
  }
232
236
 
233
237
  :host([separation="filled"]) [part="sound"] {
@@ -350,8 +354,7 @@ translate: -50% -50%;
350
354
  }
351
355
 
352
356
  [part="loading-mark"] {
353
-
354
- animation: video-spin 0.8s linear infinite;
357
+ animation: video-spin var(--_video-spin) linear infinite;
355
358
  block-size: var(--helix-size-icon-tight);
356
359
  border: var(--helix-border-thick) solid
357
360
  color-mix(in oklab, var(--helix-color-foreground-media) 30%, transparent);
@@ -9,7 +9,7 @@ import { HelixHeadlessVideo } from '@fusion.dev/helix-headless/video';
9
9
  import { property } from 'lit/decorators.js';
10
10
  import '../../icon/index.js';
11
11
  import '../../menu/index.js';
12
- import { styles as glyphStyles } from '../../icon/glyph.css.js';
12
+ import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
13
13
  import { styles } from './video-root.css.js';
14
14
  let HelixVideo = class HelixVideo extends HelixHeadlessVideo {
15
15
  static { this.tier = 'helix-'; }
@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
6
6
  };
7
7
  import { customElement } from '@fusion.dev/helix-core';
8
8
  import { HelixHeadlessVideoPlaylistMenu } from '@fusion.dev/helix-headless/video-playlist';
9
- import { styles as glyphStyles } from '../../icon/glyph.css.js';
9
+ import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
10
10
  import { styles } from './video-playlist-menu.css.js';
11
11
  import '../../icon/index.js';
12
12
  import '../../menu/index.js';
@@ -19,8 +19,6 @@ flex: none;
19
19
 
20
20
  @media print {
21
21
  :host {
22
- box-shadow: none;
23
- max-block-size: none;
24
22
  overflow: visible;
25
23
  }
26
24
  }`);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fusion.dev/helix",
3
3
  "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
4
- "version": "0.26.0",
4
+ "version": "0.30.1",
5
5
  "license": "MIT",
6
6
  "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
7
7
  "repository": {
@@ -42,21 +42,22 @@
42
42
  "test:dom": "bun test dom.spec",
43
43
  "test:pure": "bun test pure.spec",
44
44
  "test:ssr": "bun test ssr.spec",
45
- "typecheck": "bun run element-events && tsc -p tsconfig.json --noEmit"
45
+ "typecheck": "bun run element-events && tsc -p tsconfig.json --noEmit && bun run typecheck:examples",
46
+ "typecheck:examples": "tsc -p tsconfig.examples.json"
46
47
  },
47
48
  "bugs": "https://github.com/project-fusion/fusion/issues",
48
49
  "dependencies": {
49
- "@fusion.dev/helix-core": "0.26.0",
50
- "@fusion.dev/helix-headless": "0.26.0",
51
- "@fusion.dev/helix-styles": "0.26.0"
50
+ "@fusion.dev/helix-core": "0.30.1",
51
+ "@fusion.dev/helix-headless": "0.30.1",
52
+ "@fusion.dev/helix-styles": "0.30.1"
52
53
  },
53
54
  "devDependencies": {
54
55
  "@custom-elements-manifest/analyzer": "^0.11.0",
55
- "@fusion.dev/helix-cem": "0.26.0",
56
- "@fusion.dev/helix-testing": "0.26.0",
56
+ "@fusion.dev/helix-cem": "0.30.1",
57
+ "@fusion.dev/helix-testing": "0.30.1",
57
58
  "@fusion.dev/scripts": "0.0.0-dev",
58
59
  "@happy-dom/global-registrator": "^20.0.0",
59
- "@lit-labs/ssr": "^3.3.0",
60
+ "@lit-labs/ssr": "^4.1.0",
60
61
  "@types/bun": "^1.3.0",
61
62
  "lit": "^3.2.1"
62
63
  },