@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.
- package/custom-elements.json +1567 -131
- package/dist/date-input/root/date-input-root.css.js +3 -2
- package/dist/date-picker/root/date-picker-root.css.js +6 -0
- package/dist/date-picker/root/date-picker-root.d.ts +1 -0
- package/dist/element-events.generated.js +2 -0
- package/dist/shared/field/field-segments.css.js +1 -1
- package/dist/time-input/root/time-input-root.css.js +2 -1
- package/lint.json +1 -1
- package/package.json +6 -6
- package/types/jsx.d.ts +608 -156
- package/types/vue.d.ts +173 -30
- package/types/words.d.ts +32 -2
package/types/vue.d.ts
CHANGED
|
@@ -206,6 +206,7 @@ import type {
|
|
|
206
206
|
HelixSelectedEvent,
|
|
207
207
|
HelixSortEvent,
|
|
208
208
|
HelixSortedEvent,
|
|
209
|
+
HelixClearEvent,
|
|
209
210
|
HelixRejectEvent,
|
|
210
211
|
HelixFacetEvent,
|
|
211
212
|
HelixBeforeActivateEvent,
|
|
@@ -217,7 +218,6 @@ import type {
|
|
|
217
218
|
HelixGraphSignalEvent,
|
|
218
219
|
HelixGraphZoomEvent,
|
|
219
220
|
HelixResizeEvent,
|
|
220
|
-
HelixClearEvent,
|
|
221
221
|
HelixShortcutEvent,
|
|
222
222
|
HelixActionEvent,
|
|
223
223
|
HelixMapPartChangeEvent,
|
|
@@ -5924,6 +5924,9 @@ export type HelixDateInputHelixBeforeCloseElementEvent =
|
|
|
5924
5924
|
/** `helix-before-open` event type */
|
|
5925
5925
|
export type HelixDateInputHelixBeforeOpenElementEvent =
|
|
5926
5926
|
HelixDateInputElementEvent<HelixBeforeOpenEvent>;
|
|
5927
|
+
/** `helix-clear` event type */
|
|
5928
|
+
export type HelixDateInputHelixClearElementEvent =
|
|
5929
|
+
HelixDateInputElementEvent<HelixClearEvent>;
|
|
5927
5930
|
|
|
5928
5931
|
export type HelixDateInputVueProps = {
|
|
5929
5932
|
/** What a row of segments reports when the field is required and every
|
|
@@ -5948,6 +5951,18 @@ are not, where `bad-input-message` is not set. `{kind}` is `date` or
|
|
|
5948
5951
|
are not, where `bad-input-message` is not set. `{kind}` is `date` or
|
|
5949
5952
|
`time`. */
|
|
5950
5953
|
incompleteMessage?: (HelixDateInput["incompleteMessage"]) | undefined;
|
|
5954
|
+
/** What a screen reader hears before the segments of a range's second date
|
|
5955
|
+
or time, after each segment's own name. */
|
|
5956
|
+
"range-end-label"?: (HelixDateInput["rangeEndLabel"]) | undefined;
|
|
5957
|
+
/** What a screen reader hears before the segments of a range's second date
|
|
5958
|
+
or time, after each segment's own name. */
|
|
5959
|
+
rangeEndLabel?: (HelixDateInput["rangeEndLabel"]) | undefined;
|
|
5960
|
+
/** What a screen reader hears before the segments of a range's first date
|
|
5961
|
+
or time, after each segment's own name: "month, Start, Stay". */
|
|
5962
|
+
"range-start-label"?: (HelixDateInput["rangeStartLabel"]) | undefined;
|
|
5963
|
+
/** What a screen reader hears before the segments of a range's first date
|
|
5964
|
+
or time, after each segment's own name: "month, Start, Stay". */
|
|
5965
|
+
rangeStartLabel?: (HelixDateInput["rangeStartLabel"]) | undefined;
|
|
5951
5966
|
/** Whether the field is a row of segments, one for each part of the date or
|
|
5952
5967
|
time, in place of a line of text.
|
|
5953
5968
|
|
|
@@ -6112,32 +6127,48 @@ and this one was the English a form in another language still spoke in
|
|
|
6112
6127
|
the bubble it raises on submit: `feedback` replaces the message under
|
|
6113
6128
|
the field and does not reach that one. */
|
|
6114
6129
|
valueMissingMessage?: (HelixDateInput["valueMissingMessage"]) | undefined;
|
|
6115
|
-
/** What the browser may autofill here, as one of the platform's own tokens
|
|
6130
|
+
/** What the browser may autofill here, as one of the platform's own tokens,
|
|
6131
|
+
such as `bday`.
|
|
6116
6132
|
|
|
6117
6133
|
Empty leaves the attribute off, which is the browser's default and is what
|
|
6118
6134
|
lets autofill work at all: hardcoding `off` here means a birthday or a
|
|
6119
|
-
postal code can never be filled in for a reader.
|
|
6135
|
+
postal code can never be filled in for a reader. With `segmented`, a
|
|
6136
|
+
hidden native date input carries it, since no browser fills the segments. */
|
|
6120
6137
|
autocomplete?: (HelixDateInput["autocomplete"]) | undefined;
|
|
6121
|
-
/** The calendar the written date and the calendar's days are
|
|
6122
|
-
`buddhist`, `japanese`, `roc`, or `iso8601
|
|
6123
|
-
|
|
6124
|
-
|
|
6125
|
-
|
|
6126
|
-
|
|
6127
|
-
`
|
|
6128
|
-
|
|
6138
|
+
/** The calendar the written date, the segments, and the calendar's days are
|
|
6139
|
+
in: `gregory`, `buddhist`, `japanese`, `roc`, or `iso8601`, or a calendar
|
|
6140
|
+
with months of its own that Date Picker's `calendar` names, such as
|
|
6141
|
+
`persian`, `hebrew`, `islamic-umalqura`, `ethiopic`, or `chinese`.
|
|
6142
|
+
|
|
6143
|
+
Absent is the locale's own where its months are the Gregorian months, and
|
|
6144
|
+
`gregory` for every other, as Date Picker's `calendar` is. The value is
|
|
6145
|
+
`YYYY-MM-DD` in every calendar, and a focused text field is ISO in every
|
|
6146
|
+
calendar. In `segmented`, the segments are the day, month, and year as
|
|
6147
|
+
the calendar counts them, in the order the locale writes them: Mehr 14,
|
|
6148
|
+
1405 is month 7 and day 14 of 1405 under `persian`. Under the five with
|
|
6149
|
+
Gregorian months they are the Gregorian day, month, and year, or ISO order
|
|
6150
|
+
for `iso8601`. */
|
|
6129
6151
|
calendar?: (HelixDateInput["calendar"]) | undefined;
|
|
6130
6152
|
/** The name of the calendar's grid of days, read by screen readers. */
|
|
6131
6153
|
"calendar-label"?: (HelixDateInput["calendarLabel"]) | undefined;
|
|
6132
6154
|
/** The name of the calendar's grid of days, read by screen readers. */
|
|
6133
6155
|
calendarLabel?: (HelixDateInput["calendarLabel"]) | undefined;
|
|
6156
|
+
/** Whether the field shows a button that empties it, as Input's `clearable`
|
|
6157
|
+
does. Shown only while the field holds something to clear and is neither
|
|
6158
|
+
disabled nor read-only. */
|
|
6159
|
+
clearable?: (HelixDateInput["clearable"]) | undefined;
|
|
6160
|
+
/** The accessible name of the clear button, which shows only an icon. */
|
|
6161
|
+
"clear-label"?: (HelixDateInput["clearLabel"]) | undefined;
|
|
6162
|
+
/** The accessible name of the clear button, which shows only an icon. */
|
|
6163
|
+
clearLabel?: (HelixDateInput["clearLabel"]) | undefined;
|
|
6134
6164
|
/** How a date is written in the field: `short` through `full`, or ISO.
|
|
6135
6165
|
|
|
6136
6166
|
**The field renders when it is idle and holds the value when it is being
|
|
6137
6167
|
edited.** A written date is a rendering, and a document being edited must
|
|
6138
6168
|
not be a rendering of something else: `Intl.DateTimeFormat` formats and does
|
|
6139
|
-
not parse, so
|
|
6140
|
-
|
|
6169
|
+
not parse, so a rendering such as `Tuesday, August 4, 2026` is no text to
|
|
6170
|
+
edit. The field does read a date typed in the locale's order and digits as
|
|
6171
|
+
you leave it, which covers what a reader types.
|
|
6141
6172
|
|
|
6142
6173
|
The way out is not to choose between the two but to separate them in time.
|
|
6143
6174
|
Idle, the field shows `4 August 2026`, which is what a date is for reading.
|
|
@@ -6159,8 +6190,9 @@ submits and what `min` and `max` compare against. */
|
|
|
6159
6190
|
**The field renders when it is idle and holds the value when it is being
|
|
6160
6191
|
edited.** A written date is a rendering, and a document being edited must
|
|
6161
6192
|
not be a rendering of something else: `Intl.DateTimeFormat` formats and does
|
|
6162
|
-
not parse, so
|
|
6163
|
-
|
|
6193
|
+
not parse, so a rendering such as `Tuesday, August 4, 2026` is no text to
|
|
6194
|
+
edit. The field does read a date typed in the locale's order and digits as
|
|
6195
|
+
you leave it, which covers what a reader types.
|
|
6164
6196
|
|
|
6165
6197
|
The way out is not to choose between the two but to separate them in time.
|
|
6166
6198
|
Idle, the field shows `4 August 2026`, which is what a date is for reading.
|
|
@@ -6298,6 +6330,14 @@ the date.
|
|
|
6298
6330
|
**The name goes in**, so a row of them is heard as which one each
|
|
6299
6331
|
removes rather than as "Remove" said once per date. */
|
|
6300
6332
|
removeLabel?: (HelixDateInput["removeLabel"]) | undefined;
|
|
6333
|
+
/** What a screen reader hears about the dates chosen in the calendar, with
|
|
6334
|
+
`{kind}`, `{start}`, `{end}` and `{count}` filled in as Date Picker's
|
|
6335
|
+
`selection-label` says. */
|
|
6336
|
+
"selection-label"?: (HelixDateInput["selectionLabel"]) | undefined;
|
|
6337
|
+
/** What a screen reader hears about the dates chosen in the calendar, with
|
|
6338
|
+
`{kind}`, `{start}`, `{end}` and `{count}` filled in as Date Picker's
|
|
6339
|
+
`selection-label` says. */
|
|
6340
|
+
selectionLabel?: (HelixDateInput["selectionLabel"]) | undefined;
|
|
6301
6341
|
/** How far apart the selectable dates are, in days.
|
|
6302
6342
|
|
|
6303
6343
|
`<input type="date" step>`'s own unit, handed to the calendar this renders
|
|
@@ -6309,6 +6349,14 @@ platform's base. */
|
|
|
6309
6349
|
"step-mismatch-message"?: (HelixDateInput["stepMismatchMessage"]) | undefined;
|
|
6310
6350
|
/** The message shown when a date is not on `step`. */
|
|
6311
6351
|
stepMismatchMessage?: (HelixDateInput["stepMismatchMessage"]) | undefined;
|
|
6352
|
+
/** The time zone today is read in, such as `America/New_York`, handed to the
|
|
6353
|
+
calendar: the day marked today, and the month an empty field opens on.
|
|
6354
|
+
Empty is the reader's own. Dates are plain `YYYY-MM-DD` and carry no zone. */
|
|
6355
|
+
"time-zone"?: (HelixDateInput["timeZone"]) | undefined;
|
|
6356
|
+
/** The time zone today is read in, such as `America/New_York`, handed to the
|
|
6357
|
+
calendar: the day marked today, and the month an empty field opens on.
|
|
6358
|
+
Empty is the reader's own. Dates are plain `YYYY-MM-DD` and carry no zone. */
|
|
6359
|
+
timeZone?: (HelixDateInput["timeZone"]) | undefined;
|
|
6312
6360
|
/** The name of the button that opens the calendar, read by screen readers. */
|
|
6313
6361
|
"trigger-label"?: (HelixDateInput["triggerLabel"]) | undefined;
|
|
6314
6362
|
/** The name of the button that opens the calendar, read by screen readers. */
|
|
@@ -6317,6 +6365,12 @@ platform's base. */
|
|
|
6317
6365
|
"unavailable-message"?: (HelixDateInput["unavailableMessage"]) | undefined;
|
|
6318
6366
|
/** The message shown when `disable-dates` or `disable-days` bars a date. */
|
|
6319
6367
|
unavailableMessage?: (HelixDateInput["unavailableMessage"]) | undefined;
|
|
6368
|
+
/** The message for text that is no date, where `bad-input-message` is not
|
|
6369
|
+
set. `{mode}` is `single`, `range`, or `multiple`. */
|
|
6370
|
+
"unreadable-message"?: (HelixDateInput["unreadableMessage"]) | undefined;
|
|
6371
|
+
/** The message for text that is no date, where `bad-input-message` is not
|
|
6372
|
+
set. `{mode}` is `single`, `range`, or `multiple`. */
|
|
6373
|
+
unreadableMessage?: (HelixDateInput["unreadableMessage"]) | undefined;
|
|
6320
6374
|
/** The name of the calendar's heading where it shows a page of years, with
|
|
6321
6375
|
`{heading}` filled in. */
|
|
6322
6376
|
"year-view-label"?: (HelixDateInput["yearViewLabel"]) | undefined;
|
|
@@ -6384,6 +6438,8 @@ export type HelixDateInputVueEvents = {
|
|
|
6384
6438
|
"helix-before-close": HelixDateInputHelixBeforeCloseElementEvent;
|
|
6385
6439
|
/** Fired before the calendar opens. Cancelable: call `preventDefault()` to keep it closed. */
|
|
6386
6440
|
"helix-before-open": HelixDateInputHelixBeforeOpenElementEvent;
|
|
6441
|
+
/** Fired after the clear button has emptied the field, after `input` and `change`. */
|
|
6442
|
+
"helix-clear": HelixDateInputHelixClearElementEvent;
|
|
6387
6443
|
/** Fired after the value changes. */
|
|
6388
6444
|
input: HelixDateInputElementEvent;
|
|
6389
6445
|
};
|
|
@@ -6453,14 +6509,16 @@ it is one of the five, such as `buddhist` for `th-TH` or `japanese` for
|
|
|
6453
6509
|
`ja-JP-u-ca-japanese`, and `gregory` for every other, such as `persian`
|
|
6454
6510
|
for `fa-IR`.
|
|
6455
6511
|
|
|
6456
|
-
`persian`, `hebrew`, `islamic-umalqura`, `islamic-civil`,
|
|
6457
|
-
`
|
|
6458
|
-
|
|
6459
|
-
|
|
6460
|
-
|
|
6512
|
+
`persian`, `hebrew`, `islamic`, `islamic-umalqura`, `islamic-civil`,
|
|
6513
|
+
`islamic-tbla`, `islamic-rgsa`, `ethiopic`, `ethioaa`, `coptic`,
|
|
6514
|
+
`indian`, `chinese`, and `dangi` draw a calendar with months of its own,
|
|
6515
|
+
as React Aria's calendars do: each grid is one of that calendar's months,
|
|
6516
|
+
the Hebrew and Chinese leap months and Ethiopia's five-day thirteenth
|
|
6517
|
+
month included, and Previous, Next and the page keys move by those
|
|
6518
|
+
months. With `max-view`, the months view shows that calendar's year, of
|
|
6519
|
+
twelve or thirteen months, and the years view its years. `month` and
|
|
6461
6520
|
`helix-navigate` then name a month by its first day, `YYYY-MM-DD`. The
|
|
6462
|
-
|
|
6463
|
-
months only. The value is `YYYY-MM-DD` in every calendar. */
|
|
6521
|
+
value is `YYYY-MM-DD` in every calendar. */
|
|
6464
6522
|
calendar?: (HelixDatePicker["calendar"]) | undefined;
|
|
6465
6523
|
/** The month to open on when `month` is not set. */
|
|
6466
6524
|
"default-month"?: (HelixDatePicker["defaultMonth"]) | undefined;
|
|
@@ -6607,6 +6665,18 @@ else set needs. */
|
|
|
6607
6665
|
readOnly?: (HelixDatePicker["readOnly"]) | undefined;
|
|
6608
6666
|
/** Stops the form from submitting while no date is chosen. */
|
|
6609
6667
|
required?: (HelixDatePicker["required"]) | undefined;
|
|
6668
|
+
/** What a screen reader hears about the chosen dates: the grid's
|
|
6669
|
+
description, said again whenever the dates change. `{kind}` is `date`,
|
|
6670
|
+
`start` while a range holds one end, `range`, or `dates` for `multiple`.
|
|
6671
|
+
`{start}` and `{end}` are dates written in `locale`, and `{count}` is how
|
|
6672
|
+
many dates are chosen. */
|
|
6673
|
+
"selection-label"?: (HelixDatePicker["selectionLabel"]) | undefined;
|
|
6674
|
+
/** What a screen reader hears about the chosen dates: the grid's
|
|
6675
|
+
description, said again whenever the dates change. `{kind}` is `date`,
|
|
6676
|
+
`start` while a range holds one end, `range`, or `dates` for `multiple`.
|
|
6677
|
+
`{start}` and `{end}` are dates written in `locale`, and `{count}` is how
|
|
6678
|
+
many dates are chosen. */
|
|
6679
|
+
selectionLabel?: (HelixDatePicker["selectionLabel"]) | undefined;
|
|
6610
6680
|
/** How far apart the selectable dates are, in days.
|
|
6611
6681
|
|
|
6612
6682
|
`<input type="date" step>`'s own unit, counted from `min` where there is
|
|
@@ -8178,12 +8248,14 @@ export type HelixFlexVueEvents = {};
|
|
|
8178
8248
|
|
|
8179
8249
|
export type HelixFormatDateVueProps = {
|
|
8180
8250
|
/** The calendar a date is written in: `gregory`, `buddhist`, `japanese`,
|
|
8181
|
-
`roc`, or `iso8601`,
|
|
8182
|
-
|
|
8183
|
-
|
|
8184
|
-
|
|
8185
|
-
|
|
8186
|
-
|
|
8251
|
+
`roc`, or `iso8601`, or a calendar with months of its own, such as
|
|
8252
|
+
`persian`, `hebrew`, `islamic-umalqura`, `ethiopic`, or `chinese`: every
|
|
8253
|
+
calendar Date Picker and Date Input draw.
|
|
8254
|
+
|
|
8255
|
+
Absent is the locale's own where its months are the Gregorian months,
|
|
8256
|
+
such as `buddhist` for `th-TH`, and `gregory` for every other, such as
|
|
8257
|
+
`persian` for `fa-IR`, so a date written here reads as the same date a
|
|
8258
|
+
Date Picker beside it shows. Write `calendar="persian"` for Mehr 14, 1405. */
|
|
8187
8259
|
calendar?: (HelixFormatDate["calendar"]) | undefined;
|
|
8188
8260
|
/** The timestamp, in any format `Date` can parse.
|
|
8189
8261
|
|
|
@@ -8209,6 +8281,14 @@ browser may use either. */
|
|
|
8209
8281
|
dateStyle?: (HelixFormatDate["dateStyle"]) | undefined;
|
|
8210
8282
|
/** How the day of the month is written, where a date is shown. */
|
|
8211
8283
|
day?: (HelixFormatDate["day"]) | undefined;
|
|
8284
|
+
/** Writes the part of the day in words, such as "in the morning" or "at
|
|
8285
|
+
night", in its `long`, `short`, or `narrow` form, where `hour` is on a
|
|
8286
|
+
twelve-hour clock. */
|
|
8287
|
+
"day-period"?: (HelixFormatDate["dayPeriod"]) | undefined;
|
|
8288
|
+
/** Writes the part of the day in words, such as "in the morning" or "at
|
|
8289
|
+
night", in its `long`, `short`, or `narrow` form, where `hour` is on a
|
|
8290
|
+
twelve-hour clock. */
|
|
8291
|
+
dayPeriod?: (HelixFormatDate["dayPeriod"]) | undefined;
|
|
8212
8292
|
/** Shows how long ago the timestamp was, in a compact form such as "3h", in
|
|
8213
8293
|
place of the date.
|
|
8214
8294
|
|
|
@@ -8226,6 +8306,12 @@ Off by default, which draws the date as one run of text, as Shoelace and
|
|
|
8226
8306
|
Web Awesome do. An `elapsed` or `relative` reading is one phrase either
|
|
8227
8307
|
way. */
|
|
8228
8308
|
fields?: (HelixFormatDate["fields"]) | undefined;
|
|
8309
|
+
/** How many digits of a fraction of a second to write after `second`: 1, 2,
|
|
8310
|
+
or 3, as in 09:41:07.250. */
|
|
8311
|
+
"fractional-second-digits"?: (HelixFormatDate["fractionalSecondDigits"]) | undefined;
|
|
8312
|
+
/** How many digits of a fraction of a second to write after `second`: 1, 2,
|
|
8313
|
+
or 3, as in 09:41:07.250. */
|
|
8314
|
+
fractionalSecondDigits?: (HelixFormatDate["fractionalSecondDigits"]) | undefined;
|
|
8229
8315
|
/** Draws an `elapsed` or `relative` reading once and leaves it, where it
|
|
8230
8316
|
would otherwise move on as it goes stale.
|
|
8231
8317
|
|
|
@@ -8288,9 +8374,13 @@ Empty is the runtime's own. */
|
|
|
8288
8374
|
|
|
8289
8375
|
Empty is the runtime's own. */
|
|
8290
8376
|
timeZone?: (HelixFormatDate["timeZone"]) | undefined;
|
|
8291
|
-
/** Shows the name of the time zone
|
|
8377
|
+
/** Shows the name of the time zone: `long` or `short`, as Pacific Daylight
|
|
8378
|
+
Time or PDT, `longOffset` or `shortOffset`, as GMT-07:00 or GMT-7, or
|
|
8379
|
+
`longGeneric` or `shortGeneric`, as Pacific Time or PT. */
|
|
8292
8380
|
"time-zone-name"?: (HelixFormatDate["timeZoneName"]) | undefined;
|
|
8293
|
-
/** Shows the name of the time zone
|
|
8381
|
+
/** Shows the name of the time zone: `long` or `short`, as Pacific Daylight
|
|
8382
|
+
Time or PDT, `longOffset` or `shortOffset`, as GMT-07:00 or GMT-7, or
|
|
8383
|
+
`longGeneric` or `shortGeneric`, as Pacific Time or PT. */
|
|
8294
8384
|
timeZoneName?: (HelixFormatDate["timeZoneName"]) | undefined;
|
|
8295
8385
|
/** How the weekday is written, where one is shown. */
|
|
8296
8386
|
weekday?: (HelixFormatDate["weekday"]) | undefined;
|
|
@@ -15693,6 +15783,14 @@ rather than a thumb sitting on nothing. */
|
|
|
15693
15783
|
middle of the track, or `end` at `max`. Absent is `start`. A range fills
|
|
15694
15784
|
between its thumbs and ignores it. */
|
|
15695
15785
|
origin?: (HelixSlider["origin"]) | undefined;
|
|
15786
|
+
/** How far Page Up and Page Down move a thumb, in the slider's own units, as
|
|
15787
|
+
React Aria's `pageSize` and Zag's `largeStep` do. Absent leaves the keys
|
|
15788
|
+
to the platform, which moves a tenth of the track. */
|
|
15789
|
+
"page-step"?: (HelixSlider["pageStep"] | `${number}`) | undefined;
|
|
15790
|
+
/** How far Page Up and Page Down move a thumb, in the slider's own units, as
|
|
15791
|
+
React Aria's `pageSize` and Zag's `largeStep` do. Absent leaves the keys
|
|
15792
|
+
to the platform, which moves a tenth of the track. */
|
|
15793
|
+
pageStep?: (HelixSlider["pageStep"]) | undefined;
|
|
15696
15794
|
/** Adds a second thumb, so the value is a pair.
|
|
15697
15795
|
|
|
15698
15796
|
The pair is one string, `"10,50"`, which is what `value` and
|
|
@@ -17757,6 +17855,9 @@ export type HelixTimeInputHelixBeforeCloseElementEvent =
|
|
|
17757
17855
|
/** `helix-before-open` event type */
|
|
17758
17856
|
export type HelixTimeInputHelixBeforeOpenElementEvent =
|
|
17759
17857
|
HelixTimeInputElementEvent<HelixBeforeOpenEvent>;
|
|
17858
|
+
/** `helix-clear` event type */
|
|
17859
|
+
export type HelixTimeInputHelixClearElementEvent =
|
|
17860
|
+
HelixTimeInputElementEvent<HelixClearEvent>;
|
|
17760
17861
|
|
|
17761
17862
|
export type HelixTimeInputVueProps = {
|
|
17762
17863
|
/** What a row of segments reports when the field is required and every
|
|
@@ -17781,6 +17882,18 @@ are not, where `bad-input-message` is not set. `{kind}` is `date` or
|
|
|
17781
17882
|
are not, where `bad-input-message` is not set. `{kind}` is `date` or
|
|
17782
17883
|
`time`. */
|
|
17783
17884
|
incompleteMessage?: (HelixTimeInput["incompleteMessage"]) | undefined;
|
|
17885
|
+
/** What a screen reader hears before the segments of a range's second date
|
|
17886
|
+
or time, after each segment's own name. */
|
|
17887
|
+
"range-end-label"?: (HelixTimeInput["rangeEndLabel"]) | undefined;
|
|
17888
|
+
/** What a screen reader hears before the segments of a range's second date
|
|
17889
|
+
or time, after each segment's own name. */
|
|
17890
|
+
rangeEndLabel?: (HelixTimeInput["rangeEndLabel"]) | undefined;
|
|
17891
|
+
/** What a screen reader hears before the segments of a range's first date
|
|
17892
|
+
or time, after each segment's own name: "month, Start, Stay". */
|
|
17893
|
+
"range-start-label"?: (HelixTimeInput["rangeStartLabel"]) | undefined;
|
|
17894
|
+
/** What a screen reader hears before the segments of a range's first date
|
|
17895
|
+
or time, after each segment's own name: "month, Start, Stay". */
|
|
17896
|
+
rangeStartLabel?: (HelixTimeInput["rangeStartLabel"]) | undefined;
|
|
17784
17897
|
/** Whether the field is a row of segments, one for each part of the date or
|
|
17785
17898
|
time, in place of a line of text.
|
|
17786
17899
|
|
|
@@ -17950,6 +18063,14 @@ the field and does not reach that one. */
|
|
|
17950
18063
|
Empty leaves the attribute off, which is the browser's default and is what
|
|
17951
18064
|
lets autofill work at all. */
|
|
17952
18065
|
autocomplete?: (HelixTimeInput["autocomplete"]) | undefined;
|
|
18066
|
+
/** Whether the field shows a button that empties it, as Input's `clearable`
|
|
18067
|
+
does. Shown only while the field holds something to clear and is neither
|
|
18068
|
+
disabled nor read-only. */
|
|
18069
|
+
clearable?: (HelixTimeInput["clearable"]) | undefined;
|
|
18070
|
+
/** The accessible name of the clear button, which shows only an icon. */
|
|
18071
|
+
"clear-label"?: (HelixTimeInput["clearLabel"]) | undefined;
|
|
18072
|
+
/** The accessible name of the clear button, which shows only an icon. */
|
|
18073
|
+
clearLabel?: (HelixTimeInput["clearLabel"]) | undefined;
|
|
17953
18074
|
/** Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
|
|
17954
18075
|
|
|
17955
18076
|
Handed to the list, which offers them as unavailable, and checked against
|
|
@@ -18053,6 +18174,12 @@ never something this element would refuse to read back. */
|
|
|
18053
18174
|
"unavailable-message"?: (HelixTimeInput["unavailableMessage"]) | undefined;
|
|
18054
18175
|
/** The message shown when `disable-times` bars a time. */
|
|
18055
18176
|
unavailableMessage?: (HelixTimeInput["unavailableMessage"]) | undefined;
|
|
18177
|
+
/** The message for text that is no time, where `bad-input-message` is not
|
|
18178
|
+
set. `{mode}` is `single`, `range`, or `multiple`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`. */
|
|
18179
|
+
"unreadable-message"?: (HelixTimeInput["unreadableMessage"]) | undefined;
|
|
18180
|
+
/** The message for text that is no time, where `bad-input-message` is not
|
|
18181
|
+
set. `{mode}` is `single`, `range`, or `multiple`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`. */
|
|
18182
|
+
unreadableMessage?: (HelixTimeInput["unreadableMessage"]) | undefined;
|
|
18056
18183
|
/** Whether the panel shows one list of times or a column for each part of the
|
|
18057
18184
|
time.
|
|
18058
18185
|
|
|
@@ -18118,6 +18245,8 @@ export type HelixTimeInputVueEvents = {
|
|
|
18118
18245
|
"helix-before-close": HelixTimeInputHelixBeforeCloseElementEvent;
|
|
18119
18246
|
/** Fired before the list opens. Cancelable: canceling it keeps the list closed and leaves the decision to you. */
|
|
18120
18247
|
"helix-before-open": HelixTimeInputHelixBeforeOpenElementEvent;
|
|
18248
|
+
/** Fired after the clear button has emptied the field, after `input` and `change`. */
|
|
18249
|
+
"helix-clear": HelixTimeInputHelixClearElementEvent;
|
|
18121
18250
|
/** Fired after the value changes. */
|
|
18122
18251
|
input: HelixTimeInputElementEvent;
|
|
18123
18252
|
};
|
|
@@ -18726,6 +18855,18 @@ and this one was the English a form in another language still spoke in
|
|
|
18726
18855
|
the bubble it raises on submit: `feedback` replaces the message under
|
|
18727
18856
|
the field and does not reach that one. */
|
|
18728
18857
|
valueMissingMessage?: (HelixToggleGroup["valueMissingMessage"]) | undefined;
|
|
18858
|
+
/** Whether a press on the chosen item, or Space or Enter on it, takes it
|
|
18859
|
+
back so nothing is chosen, as React Aria's `ToggleButtonGroup` and
|
|
18860
|
+
Radix's `ToggleGroup` do in a single group. Absent, a single group always
|
|
18861
|
+
keeps its choice once it has one, as a radio group does. A multiple group
|
|
18862
|
+
releases a pressed item either way. */
|
|
18863
|
+
"allow-empty-selection"?: (HelixToggleGroup["allowEmptySelection"]) | undefined;
|
|
18864
|
+
/** Whether a press on the chosen item, or Space or Enter on it, takes it
|
|
18865
|
+
back so nothing is chosen, as React Aria's `ToggleButtonGroup` and
|
|
18866
|
+
Radix's `ToggleGroup` do in a single group. Absent, a single group always
|
|
18867
|
+
keeps its choice once it has one, as a radio group does. A multiple group
|
|
18868
|
+
releases a pressed item either way. */
|
|
18869
|
+
allowEmptySelection?: (HelixToggleGroup["allowEmptySelection"]) | undefined;
|
|
18729
18870
|
/** Where the group's label sits. `start` puts it on the track's line.
|
|
18730
18871
|
|
|
18731
18872
|
Absent is above, which is what a field looks like and what almost every
|
|
@@ -21089,6 +21230,8 @@ export type CustomCssProperties = {
|
|
|
21089
21230
|
"--date-picker-period-size"?: (string) | undefined;
|
|
21090
21231
|
/** Band behind the days in a range. */
|
|
21091
21232
|
"--date-picker-range-color"?: (string) | undefined;
|
|
21233
|
+
/** Band behind the days a waiting range is drawn to, before its second end is chosen. */
|
|
21234
|
+
"--date-picker-range-preview-color"?: (string) | undefined;
|
|
21092
21235
|
/** Height of a week row. */
|
|
21093
21236
|
"--date-picker-row-size"?: (string) | undefined;
|
|
21094
21237
|
/** Fill behind a selected day. */
|
package/types/words.d.ts
CHANGED
|
@@ -65,8 +65,7 @@ declare module '@fusion.dev/helix-core' {
|
|
|
65
65
|
*/
|
|
66
66
|
canceledLabel: Message
|
|
67
67
|
/**
|
|
68
|
-
* The name of the clear button,
|
|
69
|
-
* an icon.
|
|
68
|
+
* The accessible name of the clear button, which shows only an icon.
|
|
70
69
|
*
|
|
71
70
|
* English: `Clear`
|
|
72
71
|
*/
|
|
@@ -552,6 +551,13 @@ declare module '@fusion.dev/helix-core' {
|
|
|
552
551
|
* English: `Earlier years`
|
|
553
552
|
*/
|
|
554
553
|
previousYearsLabel: Message
|
|
554
|
+
/**
|
|
555
|
+
* What a screen reader hears before the segments of a range's second date
|
|
556
|
+
* or time, after each segment's own name.
|
|
557
|
+
*
|
|
558
|
+
* English: `End`
|
|
559
|
+
*/
|
|
560
|
+
rangeEndLabel: Message
|
|
555
561
|
/**
|
|
556
562
|
* The message shown when a range holds more than two dates.
|
|
557
563
|
*
|
|
@@ -565,6 +571,13 @@ declare module '@fusion.dev/helix-core' {
|
|
|
565
571
|
* English: `Choose a date on or before {max}.`
|
|
566
572
|
*/
|
|
567
573
|
rangeOverflowMessage: Message
|
|
574
|
+
/**
|
|
575
|
+
* What a screen reader hears before the segments of a range's first date
|
|
576
|
+
* or time, after each segment's own name: "month, Start, Stay".
|
|
577
|
+
*
|
|
578
|
+
* English: `Start`
|
|
579
|
+
*/
|
|
580
|
+
rangeStartLabel: Message
|
|
568
581
|
/**
|
|
569
582
|
* The message shown when a date is before `min`. `{min}` is replaced with
|
|
570
583
|
* `min`, written the way the field writes dates.
|
|
@@ -810,6 +823,13 @@ declare module '@fusion.dev/helix-core' {
|
|
|
810
823
|
* English: `Choose a date that is available.`
|
|
811
824
|
*/
|
|
812
825
|
unavailableMessage: Message
|
|
826
|
+
/**
|
|
827
|
+
* The message for text that is no date, where `bad-input-message` is not
|
|
828
|
+
* set. `{mode}` is `single`, `range`, or `multiple`.
|
|
829
|
+
*
|
|
830
|
+
* English: `{mode, select, single {Enter a date as YYYY-MM-DD.} other {Enter dates as YYYY-MM-DD, separated by commas.}}`
|
|
831
|
+
*/
|
|
832
|
+
unreadableMessage: Message
|
|
813
833
|
/**
|
|
814
834
|
* What a screen reader hears before an unread notification's text.
|
|
815
835
|
*
|
|
@@ -1368,6 +1388,16 @@ declare module '@fusion.dev/helix-core' {
|
|
|
1368
1388
|
* English: `Choose a date on or after {min}.`
|
|
1369
1389
|
*/
|
|
1370
1390
|
rangeUnderflowMessage: Message
|
|
1391
|
+
/**
|
|
1392
|
+
* What a screen reader hears about the chosen dates: the grid's
|
|
1393
|
+
* description, said again whenever the dates change. `{kind}` is `date`,
|
|
1394
|
+
* `start` while a range holds one end, `range`, or `dates` for `multiple`.
|
|
1395
|
+
* `{start}` and `{end}` are dates written in `locale`, and `{count}` is how
|
|
1396
|
+
* many dates are chosen.
|
|
1397
|
+
*
|
|
1398
|
+
* English: `{kind, select, date {Selected date: {start}} start {Range starts {start}. Choose the day it ends.} range {Selected range: {start} to {end}} other {{count, plural, one {# date selected} other {# dates selected}}}}`
|
|
1399
|
+
*/
|
|
1400
|
+
selectionLabel: Message
|
|
1371
1401
|
/**
|
|
1372
1402
|
* The validation message for a date that `step` skips.
|
|
1373
1403
|
*
|