@fusion.dev/helix 0.159.0 → 0.160.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 (12) hide show
  1. package/custom-elements.json +1567 -131
  2. package/dist/date-input/root/date-input-root.css.js +3 -2
  3. package/dist/date-picker/root/date-picker-root.css.js +6 -0
  4. package/dist/date-picker/root/date-picker-root.d.ts +1 -0
  5. package/dist/element-events.generated.js +2 -0
  6. package/dist/shared/field/field-segments.css.js +1 -1
  7. package/dist/time-input/root/time-input-root.css.js +2 -1
  8. package/lint.json +1 -1
  9. package/package.json +6 -6
  10. package/types/jsx.d.ts +608 -156
  11. package/types/vue.d.ts +173 -30
  12. package/types/words.d.ts +32 -2
package/dist/date-input/root/date-input-root.css.js CHANGED
@@ -2,8 +2,9 @@ import { createSheet } from '@fusion.dev/helix-core';
2
2
  export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--date-input-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);transition:
3
3
  background-color var(--helix-duration-fast) var(--helix-easing-standard),
4
4
  border-color var(--helix-duration-fast) var(--helix-easing-standard);}slot[name="start"]::slotted(*),
5
- slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: none;}[part="trigger"] {all: unset;block-size: var(--helix-size-icon);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;flex: none;inline-size: var(--helix-size-icon);mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 100%;background-color: currentColor;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="surface"] {--_floating-border-color: var(--date-input-border-color, var(--helix-color-border));--_floating-border-width: var(--date-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--date-input-shadow, var(--helix-shadow-floating));inline-size: max-content;padding: var(--helix-space-sm);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}:host(:disabled) [part="control"],
6
- :host(:disabled) [part="trigger"] {cursor: not-allowed;}@media (prefers-reduced-motion: reduce) {[part="field"],
5
+ slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: none;}[part="trigger"] {all: unset;block-size: var(--helix-size-icon);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;flex: none;inline-size: var(--helix-size-icon);mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 100%;background-color: currentColor;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="clear"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="clear"]:hover {color: var(--helix-color-foreground);}[part="clear"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="surface"] {--_floating-border-color: var(--date-input-border-color, var(--helix-color-border));--_floating-border-width: var(--date-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--date-input-shadow, var(--helix-shadow-floating));inline-size: max-content;padding: var(--helix-space-sm);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}:host(:disabled) [part="control"],
6
+ :host(:disabled) [part="trigger"] {cursor: not-allowed;}@media (prefers-reduced-motion: reduce) {[part="clear"],
7
+ [part="field"],
7
8
  [part="trigger"] {transition: none;}}[part="date"] {flex: none;}:host([mode="multiple"]) [part="control"] {flex-basis: 0;min-inline-size: var(--helix-size-icon-loose);}[part="segments"] {--_segment-focus-background-color: var(
8
9
  --date-input-segment-focus-background-color,
9
10
  var(--helix-color-primary)
package/dist/date-picker/root/date-picker-root.css.js CHANGED
@@ -15,6 +15,12 @@ light-dark(
15
15
  color-mix(in oklab, var(--helix-color-foreground) 10%, transparent),
16
16
  color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)
17
17
  )
18
+ );}[part~="cell"][data-range-preview]:is([data-range-start], [data-range-middle], [data-range-end]) {background-color: var(
19
+ --date-picker-range-preview-color,
20
+ light-dark(
21
+ color-mix(in oklab, var(--helix-color-foreground) 5%, transparent),
22
+ color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
23
+ )
18
24
  );}[part~="cell"][aria-selected]:not([data-range-start]):not([data-range-middle]):not([data-range-end])
19
25
  [part~="day"] {box-shadow: 0 0 0 calc((var(--_calendar-row) - var(--_calendar-day)) / 2)
20
26
  var(
package/dist/date-picker/root/date-picker-root.d.ts CHANGED
@@ -28,6 +28,7 @@ import type { CSSResultGroup } from 'lit';
28
28
  * @cssproperty --date-picker-feedback-color - The color of the message under the calendar, while `feedback` is set.
29
29
  * @cssproperty --date-picker-period-size - Height of a month or a year in the months and years views, where `max-view` is set.
30
30
  * @cssproperty --date-picker-range-color - Band behind the days in a range.
31
+ * @cssproperty --date-picker-range-preview-color - Band behind the days a waiting range is drawn to, before its second end is chosen.
31
32
  * @cssproperty --date-picker-row-size - Height of a week row.
32
33
  * @cssproperty --date-picker-selected-color - Fill behind a selected day.
33
34
  * @cssproperty --date-picker-track-size - Width of a column, which is what sets the space between days.
package/dist/element-events.generated.js CHANGED
@@ -88,6 +88,7 @@ registerElementEvents({
88
88
  'helix-before-change',
89
89
  'helix-before-close',
90
90
  'helix-before-open',
91
+ 'helix-clear',
91
92
  'input',
92
93
  'toggle',
93
94
  ],
@@ -267,6 +268,7 @@ registerElementEvents({
267
268
  'helix-before-change',
268
269
  'helix-before-close',
269
270
  'helix-before-open',
271
+ 'helix-clear',
270
272
  'input',
271
273
  'toggle',
272
274
  ],
package/dist/shared/field/field-segments.css.js CHANGED
@@ -1,2 +1,2 @@
1
1
  import { createSheet } from '@fusion.dev/helix-core';
2
- export const styles = createSheet(`[part="segments"] {align-items: center;color: var(--helix-color-foreground);display: flex;flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-md);font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);min-inline-size: 0;white-space: nowrap;}[part~="segment"] {border-radius: var(--helix-radii-sm);caret-color: transparent;outline: none;padding-inline: calc(var(--helix-space-2xs) / 2);}[part~="segment"]:focus {background-color: var(--_segment-focus-background-color, var(--helix-color-primary));color: var(--_segment-focus-color, var(--helix-color-foreground-on-primary));}[part~="segment-placeholder"] {color: var(--_segment-placeholder-color, var(--helix-color-foreground-subtle));}[part="literal"] {color: var(--_segment-literal-color, var(--helix-color-foreground-muted));white-space: pre;}:host(:disabled) [part="segments"] {color: var(--helix-color-foreground-subtle);cursor: not-allowed;}`);
2
+ export const styles = createSheet(`[part="segments"] {align-items: center;color: var(--helix-color-foreground);display: flex;flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-md);font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);min-inline-size: 0;white-space: nowrap;}[part~="segment"] {border-radius: var(--helix-radii-sm);caret-color: transparent;outline: none;padding-inline: calc(var(--helix-space-2xs) / 2);}[part~="segment"]:focus {background-color: var(--_segment-focus-background-color, var(--helix-color-primary));color: var(--_segment-focus-color, var(--helix-color-foreground-on-primary));}[part~="segment-placeholder"] {color: var(--_segment-placeholder-color, var(--helix-color-foreground-subtle));}[part~="literal"] {color: var(--_segment-literal-color, var(--helix-color-foreground-muted));white-space: pre;}:host(:disabled) [part="segments"] {color: var(--helix-color-foreground-subtle);cursor: not-allowed;}`);
package/dist/time-input/root/time-input-root.css.js CHANGED
@@ -2,7 +2,8 @@ import { createSheet } from '@fusion.dev/helix-core';
2
2
  export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--time-input-background-color, var(--helix-color-well));flex-wrap: wrap;min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);transition:
3
3
  background-color var(--helix-duration-fast) var(--helix-easing-standard),
4
4
  border-color var(--helix-duration-fast) var(--helix-easing-standard);}slot[name="start"]::slotted(*),
5
- slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: none;}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: none;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not([mode="multiple"])) [part="field"] {flex-wrap: nowrap;}[part="trigger-icon"] {block-size: var(--icon-size);inline-size: var(--icon-size);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="trigger"] {cursor: not-allowed;}[part="surface"] {--_floating-border-color: var(--time-input-border-color, var(--helix-color-border));--_floating-border-width: var(--time-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--time-input-shadow, var(--helix-shadow-floating));inline-size: var(--floating-anchor-inline-size, 100%);min-inline-size: max-content;overflow: hidden;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);margin-inline: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);margin-inline: var(--helix-space-sm);}@media (prefers-reduced-motion: reduce) {[part="field"],
5
+ slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: none;}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: none;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not([mode="multiple"])) [part="field"] {flex-wrap: nowrap;}[part="trigger-icon"] {block-size: var(--icon-size);inline-size: var(--icon-size);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="clear"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="clear"]:hover {color: var(--helix-color-foreground);}[part="clear"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="trigger"] {cursor: not-allowed;}[part="surface"] {--_floating-border-color: var(--time-input-border-color, var(--helix-color-border));--_floating-border-width: var(--time-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--time-input-shadow, var(--helix-shadow-floating));inline-size: var(--floating-anchor-inline-size, 100%);min-inline-size: max-content;overflow: hidden;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);margin-inline: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);margin-inline: var(--helix-space-sm);}@media (prefers-reduced-motion: reduce) {[part="clear"],
6
+ [part="field"],
6
7
  [part="trigger"] {transition: none;}}:host([variant="wheels"]) [part="surface"] {inline-size: max-content;}[part="time"] {flex: none;}:host([mode="multiple"]) [part="control"] {flex-basis: 0;min-inline-size: var(--helix-size-icon-loose);}[part="segments"] {--_segment-focus-background-color: var(
7
8
  --time-input-segment-focus-background-color,
8
9
  var(--helix-color-primary)