@reliability-design/web 1.4.5 → 1.4.6
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/dist/components/rel-alert/rel-alert.ts +1 -1
- package/dist/components/rel-autocomplete/rel-autocomplete.ts +33 -2
- package/dist/components/rel-badge/rel-badge.ts +6 -1
- package/dist/components/rel-calendar/rel-calendar.ts +64 -18
- package/dist/components/rel-carousel/rel-carousel.ts +25 -2
- package/dist/components/rel-chip/rel-chip.ts +31 -20
- package/dist/components/rel-date-picker/date-parse.test.ts +116 -0
- package/dist/components/rel-date-picker/date-parse.ts +178 -0
- package/dist/components/rel-date-picker/rel-date-picker.ts +529 -90
- package/dist/components/rel-drawer/rel-drawer.ts +6 -3
- package/dist/components/rel-menu/rel-menu.ts +6 -0
- package/dist/components/rel-otp/rel-otp.ts +12 -2
- package/dist/components/rel-pagination/rel-pagination.ts +13 -0
- package/dist/components/rel-popover/rel-popover.ts +33 -2
- package/dist/components/rel-progress/rel-progress.ts +13 -4
- package/dist/components/rel-radio/README.md +6 -3
- package/dist/components/rel-radio/rel-radio.ts +236 -60
- package/dist/components/rel-range-picker/rel-range-picker.ts +452 -95
- package/dist/components/rel-segmented-button/rel-segmented-button.ts +5 -1
- package/dist/components/rel-select/rel-select.ts +44 -13
- package/dist/components/rel-sheet/rel-sheet.ts +163 -18
- package/dist/components/rel-sidebar/rel-sidebar.ts +7 -1
- package/dist/components/rel-skeleton/rel-skeleton.ts +9 -0
- package/dist/components/rel-slider/rel-slider.ts +6 -3
- package/dist/components/rel-snackbar/rel-snackbar.ts +20 -16
- package/dist/components/rel-stepper/rel-stepper.ts +3 -1
- package/dist/components/rel-switch/rel-switch.ts +3 -1
- package/dist/components/rel-textfield/rel-textfield.ts +263 -75
- package/dist/components/rel-time-picker/rel-time-picker.ts +450 -94
- package/dist/components/rel-time-picker/time-parse.test.ts +67 -0
- package/dist/components/rel-time-picker/time-parse.ts +85 -0
- package/dist/components/rel-toast/rel-toast.ts +4 -2
- package/dist/components/rel-tooltip/README.md +13 -5
- package/dist/components/rel-tooltip/rel-tooltip.ts +3 -0
- package/dist/components/rel-upload/rel-upload.ts +25 -0
- package/dist/index.d.mts +241 -11
- package/dist/index.d.ts +241 -11
- package/dist/index.js +2573 -598
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2614 -640
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -36,6 +36,13 @@ declare class RelAlert extends LitElement {
|
|
|
36
36
|
type TextFieldState = "default" | "error" | "disabled";
|
|
37
37
|
type TextFieldSize = "small" | "medium" | "large";
|
|
38
38
|
type TextFieldVariant = "default" | "underline" | "legend";
|
|
39
|
+
/**
|
|
40
|
+
* How the prefix block is drawn (Figma `.Preffix` → Style):
|
|
41
|
+
* - `"clear"` — bare icon/text, no separator (the legacy `leftIcon` look)
|
|
42
|
+
* - `"divider"` — hairline between the prefix and the input
|
|
43
|
+
* - `"fill"` — tinted block flush with the control's left edge
|
|
44
|
+
*/
|
|
45
|
+
type TextFieldPrefixStyle = "clear" | "divider" | "fill";
|
|
39
46
|
/**
|
|
40
47
|
* How a field presents its label. Shared by `<rel-textfield>`, `<rel-select>`
|
|
41
48
|
* and `<rel-autocomplete>` so the three stay in step.
|
|
@@ -57,6 +64,17 @@ declare class RelTextfield extends LitElement {
|
|
|
57
64
|
clickableRightIcon: boolean;
|
|
58
65
|
/** Accessible label for the trailing icon when it is clickable. */
|
|
59
66
|
rightIconAriaLabel?: string;
|
|
67
|
+
/** Short text rendered before the input, e.g. `"http://"` or `"$"`. Sits in
|
|
68
|
+
* the same prefix block as `prefixIcon` and is styled by `prefixStyle`. */
|
|
69
|
+
prefixText?: string;
|
|
70
|
+
/** Visual treatment of the prefix block — applies to the prefix icon, text
|
|
71
|
+
* and slotted `prefix` content alike. See `TextFieldPrefixStyle`. */
|
|
72
|
+
prefixStyle: TextFieldPrefixStyle;
|
|
73
|
+
/** Short text rendered after the input, e.g. `"kg"` or `".00"`. Shares the
|
|
74
|
+
* suffix block with `rightIcon` and slotted `suffix` content. */
|
|
75
|
+
suffixText?: string;
|
|
76
|
+
/** Draws a hairline between the input and the suffix block. */
|
|
77
|
+
suffixDivider: boolean;
|
|
60
78
|
supportingText?: string;
|
|
61
79
|
state: TextFieldState;
|
|
62
80
|
size: TextFieldSize;
|
|
@@ -91,7 +109,10 @@ declare class RelTextfield extends LitElement {
|
|
|
91
109
|
name?: string;
|
|
92
110
|
fullWidth: boolean;
|
|
93
111
|
private internalState;
|
|
112
|
+
/** Whether the `prefix` / `suffix` named slots currently have content. */
|
|
113
|
+
private slotted;
|
|
94
114
|
private _wasError;
|
|
115
|
+
private _prefixObserver?;
|
|
95
116
|
private uniqueId;
|
|
96
117
|
private get isDisabled();
|
|
97
118
|
private get isError();
|
|
@@ -103,6 +124,14 @@ declare class RelTextfield extends LitElement {
|
|
|
103
124
|
private get labelHidden();
|
|
104
125
|
static styles: lit.CSSResult;
|
|
105
126
|
connectedCallback(): void;
|
|
127
|
+
disconnectedCallback(): void;
|
|
128
|
+
private handleSlotChange;
|
|
129
|
+
/** Clicking the (non-interactive) prefix/suffix area focuses the input, as a
|
|
130
|
+
* label would. Clickable icons and slotted controls keep their own clicks. */
|
|
131
|
+
private handleAffixClick;
|
|
132
|
+
/** Publishes the prefix block's width as --_rel-tf-prefix-w on its parent so
|
|
133
|
+
* the floated label can slide back over a clear-style prefix (see CSS). */
|
|
134
|
+
private observePrefix;
|
|
106
135
|
willUpdate(changed: PropertyValues<this>): void;
|
|
107
136
|
private _warnedNoName;
|
|
108
137
|
updated(): void;
|
|
@@ -202,6 +231,8 @@ declare class RelAutocomplete extends LitElement {
|
|
|
202
231
|
static styles: lit.CSSResult;
|
|
203
232
|
disconnectedCallback(): void;
|
|
204
233
|
protected willUpdate(changed: PropertyValues<this>): void;
|
|
234
|
+
private wasLoading;
|
|
235
|
+
protected updated(): void;
|
|
205
236
|
/** Full normalized source list (remote results while searchFn drives, else items). */
|
|
206
237
|
private get allItems();
|
|
207
238
|
private normalizeItem;
|
|
@@ -221,6 +252,7 @@ declare class RelAutocomplete extends LitElement {
|
|
|
221
252
|
/** Re-evaluates whether the panel should be showing for the current state. */
|
|
222
253
|
private syncPanel;
|
|
223
254
|
private onFieldInput;
|
|
255
|
+
private announceResults;
|
|
224
256
|
private runSearch;
|
|
225
257
|
private selectItem;
|
|
226
258
|
/** Silent commit when typed text exactly matches an item (label or value, case-insensitive). */
|
|
@@ -228,6 +260,7 @@ declare class RelAutocomplete extends LitElement {
|
|
|
228
260
|
private emitChanged;
|
|
229
261
|
private clear;
|
|
230
262
|
private onKeyDown;
|
|
263
|
+
private announceHighlighted;
|
|
231
264
|
private onFocusIn;
|
|
232
265
|
private onFocusOut;
|
|
233
266
|
/** Delegates focus to the inner textfield. */
|
|
@@ -277,6 +310,7 @@ declare class RelBadge extends LitElement {
|
|
|
277
310
|
textColor: string;
|
|
278
311
|
static styles: lit.CSSResult;
|
|
279
312
|
private get classes();
|
|
313
|
+
private get computedAriaLabel();
|
|
280
314
|
updated(changedProperties: Map<PropertyKey, unknown>): void;
|
|
281
315
|
render(): lit_html.TemplateResult<1>;
|
|
282
316
|
}
|
|
@@ -354,6 +388,10 @@ declare class RelCalendar extends LitElement {
|
|
|
354
388
|
private getCalendarDays;
|
|
355
389
|
private getWeekdayLabels;
|
|
356
390
|
private getMonthName;
|
|
391
|
+
private dayLabelFormatter;
|
|
392
|
+
private dayLabelLocale;
|
|
393
|
+
private formatDayLabel;
|
|
394
|
+
private announceMonth;
|
|
357
395
|
private previousMonth;
|
|
358
396
|
private nextMonth;
|
|
359
397
|
private selectDay;
|
|
@@ -411,6 +449,7 @@ declare class RelCarousel extends LitElement {
|
|
|
411
449
|
private prefersReducedMotion;
|
|
412
450
|
private clonesBefore;
|
|
413
451
|
private _silentJumping;
|
|
452
|
+
private _autoplayTick;
|
|
414
453
|
private _ro?;
|
|
415
454
|
static styles: lit.CSSResult;
|
|
416
455
|
connectedCallback(): void;
|
|
@@ -534,6 +573,17 @@ declare class RelDatePicker extends LitElement {
|
|
|
534
573
|
private focusedDate;
|
|
535
574
|
private yearDropdownOpen;
|
|
536
575
|
private monthDropdownOpen;
|
|
576
|
+
/** Uncommitted typed text; null → the input shows the committed value. */
|
|
577
|
+
private inputText;
|
|
578
|
+
/** Parse/range error message for the typed text (cleared on next input). */
|
|
579
|
+
private inputError;
|
|
580
|
+
/**
|
|
581
|
+
* Whether the next popover open should move focus into the calendar grid.
|
|
582
|
+
* Icon-click / ArrowDown / external `open` do (previous behavior); opening
|
|
583
|
+
* by clicking into the text input must NOT, or typing would be impossible.
|
|
584
|
+
*/
|
|
585
|
+
private focusPanelOnOpen;
|
|
586
|
+
private triggerInput?;
|
|
537
587
|
private triggerButton?;
|
|
538
588
|
private popoverElement?;
|
|
539
589
|
private calendarGrid?;
|
|
@@ -543,6 +593,12 @@ declare class RelDatePicker extends LitElement {
|
|
|
543
593
|
private handleClickOutside;
|
|
544
594
|
private handleEscapeKey;
|
|
545
595
|
updated(changedProperties: Map<string, any>): void;
|
|
596
|
+
private showTopLayer;
|
|
597
|
+
private hideTopLayer;
|
|
598
|
+
private onReposition;
|
|
599
|
+
private updatePopoverPosition;
|
|
600
|
+
/** Focus the roving day cell (selected day, else today, else first). */
|
|
601
|
+
private focusPanelSelection;
|
|
546
602
|
private parseISODate;
|
|
547
603
|
private formatISODate;
|
|
548
604
|
private formatDisplayDate;
|
|
@@ -551,6 +607,10 @@ declare class RelDatePicker extends LitElement {
|
|
|
551
607
|
private getCalendarDays;
|
|
552
608
|
private getWeekdayLabels;
|
|
553
609
|
private getMonthName;
|
|
610
|
+
private dayLabelFormatter;
|
|
611
|
+
private dayLabelLocale;
|
|
612
|
+
private formatDayLabel;
|
|
613
|
+
private announceMonth;
|
|
554
614
|
private getMonthsList;
|
|
555
615
|
private getYearsList;
|
|
556
616
|
private toggleCalendarPopover;
|
|
@@ -558,8 +618,29 @@ declare class RelDatePicker extends LitElement {
|
|
|
558
618
|
private previousMonth;
|
|
559
619
|
private nextMonth;
|
|
560
620
|
private selectDay;
|
|
621
|
+
/** Commit a date: set value, reset typed text/error, fire rel-change. */
|
|
622
|
+
private commitDate;
|
|
561
623
|
private clearValue;
|
|
562
|
-
|
|
624
|
+
/** Ambiguous "a/b" day/month order: display format wins, then locale. */
|
|
625
|
+
private get dayFirst();
|
|
626
|
+
/**
|
|
627
|
+
* Parse and commit the typed text (Enter / blur). Invalid or out-of-range
|
|
628
|
+
* text keeps the field in an error state with the text preserved for
|
|
629
|
+
* correction; the committed value is untouched (Escape reverts the text).
|
|
630
|
+
*/
|
|
631
|
+
private commitTypedValue;
|
|
632
|
+
/** Today ± offset days, committed directly (T shortcuts / popover chips). */
|
|
633
|
+
private applyDayOffsetShortcut;
|
|
634
|
+
private handleInputInput;
|
|
635
|
+
private handleInputKeydown;
|
|
636
|
+
/** Clicking anywhere on the field opens the popover, keeping focus typed-in. */
|
|
637
|
+
private handleFieldClick;
|
|
638
|
+
/** The calendar icon toggles the popover with the previous focus behavior. */
|
|
639
|
+
private handleIconClick;
|
|
640
|
+
/** Commit typed text when focus leaves the component entirely. */
|
|
641
|
+
private handleInputBlur;
|
|
642
|
+
/** T inside the panel (grid/header focus) applies Today directly. */
|
|
643
|
+
private handlePanelKeydown;
|
|
563
644
|
private handleDayKeydown;
|
|
564
645
|
private toggleMonthDropdown;
|
|
565
646
|
private toggleYearDropdown;
|
|
@@ -595,6 +676,7 @@ declare class RelRangePicker extends LitElement {
|
|
|
595
676
|
maxHeight: string;
|
|
596
677
|
placeholder: string;
|
|
597
678
|
triggerVariant: "default" | "icon";
|
|
679
|
+
clearable: boolean;
|
|
598
680
|
private draftFrom;
|
|
599
681
|
private draftTo;
|
|
600
682
|
private draftActivePreset;
|
|
@@ -604,7 +686,11 @@ declare class RelRangePicker extends LitElement {
|
|
|
604
686
|
private hoverDate;
|
|
605
687
|
/** ISO date of the cell that owns the grid's single Tab stop (roving tabindex). */
|
|
606
688
|
private focusedDate;
|
|
607
|
-
|
|
689
|
+
/** Uncommitted typed text; null → the input shows the committed range. */
|
|
690
|
+
private inputText;
|
|
691
|
+
/** Parse/range error message for the typed text (cleared on next input). */
|
|
692
|
+
private inputError;
|
|
693
|
+
private triggerInput?;
|
|
608
694
|
private popoverEl?;
|
|
609
695
|
private backdropEl?;
|
|
610
696
|
static styles: lit.CSSResult;
|
|
@@ -622,6 +708,31 @@ declare class RelRangePicker extends LitElement {
|
|
|
622
708
|
private cancelPopover;
|
|
623
709
|
private applySelection;
|
|
624
710
|
private resetDraft;
|
|
711
|
+
private clearRange;
|
|
712
|
+
/**
|
|
713
|
+
* Parse "date → date" text into an ISO from/to pair, or null. Each side
|
|
714
|
+
* goes through rel-date-picker's parseDateInput, so ISO / numeric /
|
|
715
|
+
* month-name dates and the t / t±N shortcuts all work per side.
|
|
716
|
+
* Separators: "→", "..", spaced "-", or the word "to" ("t - t+7",
|
|
717
|
+
* "21/7 to 28/7"). A single date yields a one-day range. Reversed input
|
|
718
|
+
* is normalized (from ≤ to). dayFirst is hard-coded false because the
|
|
719
|
+
* displayed format is always MM/DD/YYYY.
|
|
720
|
+
*/
|
|
721
|
+
private parseRangeText;
|
|
722
|
+
/**
|
|
723
|
+
* Parse and commit the typed text (Enter / blur). Invalid or out-of-range
|
|
724
|
+
* text keeps the field in an error state with the text preserved for
|
|
725
|
+
* correction; the committed range is untouched (Escape reverts the text).
|
|
726
|
+
*/
|
|
727
|
+
private commitTypedValue;
|
|
728
|
+
private handleInputInput;
|
|
729
|
+
private handleInputKeydown;
|
|
730
|
+
/** Clicking anywhere on the field opens the panel (never closes). */
|
|
731
|
+
private handleFieldClick;
|
|
732
|
+
/** The calendar icon toggles the panel (previous trigger behavior). */
|
|
733
|
+
private handleIconClick;
|
|
734
|
+
/** Commit typed text when focus leaves the component entirely. */
|
|
735
|
+
private handleInputBlur;
|
|
625
736
|
private getTriggerLabel;
|
|
626
737
|
/** Formatted "MM/DD/YYYY → MM/DD/YYYY" (or single date / "") for the current committed `from`/`to`. */
|
|
627
738
|
get displayLabel(): string;
|
|
@@ -635,6 +746,8 @@ declare class RelRangePicker extends LitElement {
|
|
|
635
746
|
private previousMonth;
|
|
636
747
|
private nextMonth;
|
|
637
748
|
private getMonthName;
|
|
749
|
+
private dayLabelFormatter;
|
|
750
|
+
private formatDayLabel;
|
|
638
751
|
private getWeekdayLabels;
|
|
639
752
|
private getCalendarDays;
|
|
640
753
|
private handleDayClick;
|
|
@@ -850,30 +963,56 @@ interface RadioOption {
|
|
|
850
963
|
label: string;
|
|
851
964
|
supportingText?: string;
|
|
852
965
|
disabled?: boolean;
|
|
966
|
+
/** rel-icon name rendered before the label (Figma Has Icon/Avatar, Type=Icon). */
|
|
967
|
+
icon?: string;
|
|
968
|
+
/** 1–2 initials rendered as a circular chip before the label (Type=Avatar).
|
|
969
|
+
* Ignored when `icon` is also set. */
|
|
970
|
+
avatar?: string;
|
|
853
971
|
}
|
|
972
|
+
type RadioSize = "small" | "medium" | "large";
|
|
973
|
+
type RadioDensity = "compact" | "comfortable";
|
|
974
|
+
type RadioAlignment = "leading" | "trailing";
|
|
854
975
|
declare class RelRadio extends LitElement {
|
|
855
976
|
options: RadioOption[];
|
|
856
977
|
name: string;
|
|
857
978
|
/** Layout axis of the option list. `"vertical"` (default) stacks options in
|
|
858
979
|
* a column; `"horizontal"` lays them out in a wrapping row. */
|
|
859
980
|
orientation: Orientation;
|
|
860
|
-
/** Control scale. `"medium"` (default) = 20px
|
|
861
|
-
* `"
|
|
862
|
-
|
|
981
|
+
/** Control scale (Figma Size). `"medium"` (default, Figma M) = 20px control
|
|
982
|
+
* with body-lg labels; `"large"` (Figma L) = 24px control with body-xl
|
|
983
|
+
* labels; `"small"` (Figma S) = 20px control with body-md labels — S and M
|
|
984
|
+
* share the control size in the spec, only typography steps down. */
|
|
985
|
+
size: RadioSize;
|
|
986
|
+
/** Supporting-text layout (Figma Density). `"compact"` (default) puts the
|
|
987
|
+
* supporting text on its own line under the row, indented past the control;
|
|
988
|
+
* `"comfortable"` stacks label + supporting text beside the control. */
|
|
989
|
+
density: RadioDensity;
|
|
990
|
+
/** Control position (Figma Layout). `"leading"` (default) renders the
|
|
991
|
+
* control before the label; `"trailing"` pushes it to the far edge of the
|
|
992
|
+
* row. Trailing has no compact layout in the spec, so it always renders
|
|
993
|
+
* with comfortable density. Meant for vertical orientation — trailing
|
|
994
|
+
* options stretch to the group's full width. */
|
|
995
|
+
alignment: RadioAlignment;
|
|
863
996
|
selectedValue: string | null;
|
|
864
997
|
disabled: boolean;
|
|
865
998
|
error: boolean;
|
|
866
999
|
errorMessage: string;
|
|
1000
|
+
/** Accessible name for the radiogroup (it renders no visible group label). */
|
|
1001
|
+
fieldAriaLabel?: string;
|
|
867
1002
|
value: string;
|
|
868
1003
|
checked: boolean;
|
|
869
1004
|
private _onChange;
|
|
870
1005
|
private _onTouched;
|
|
871
1006
|
static styles: lit.CSSResult;
|
|
1007
|
+
protected willUpdate(changed: PropertyValues<this>): void;
|
|
1008
|
+
/** Trailing has no compact layout in the spec — trailing wins. */
|
|
1009
|
+
private get effectiveDensity();
|
|
872
1010
|
private onChange;
|
|
873
1011
|
registerOnChange(fn: (value: string) => void): void;
|
|
874
1012
|
registerOnTouched(fn: () => void): void;
|
|
875
1013
|
writeValue(value: string): void;
|
|
876
1014
|
private get hasSelection();
|
|
1015
|
+
private renderPrefix;
|
|
877
1016
|
private renderOption;
|
|
878
1017
|
render(): lit_html.TemplateResult<1>;
|
|
879
1018
|
}
|
|
@@ -1344,6 +1483,15 @@ declare class RelPopover extends LitElement {
|
|
|
1344
1483
|
private onHostKeyDown;
|
|
1345
1484
|
private onOpen;
|
|
1346
1485
|
private onClose;
|
|
1486
|
+
/**
|
|
1487
|
+
* Light-dismiss every other open popover that isn't an ancestor of this
|
|
1488
|
+
* one (nested popovers keep their parent open). This is what the outside-
|
|
1489
|
+
* pointerdown listener would do for a click on our trigger — except the
|
|
1490
|
+
* trigger handler stops that pointerdown in the capture phase, and a
|
|
1491
|
+
* keyboard (Enter/Space) or programmatic open never produces one at all.
|
|
1492
|
+
* Honors each popover's own `closeOnOutsideClick` setting.
|
|
1493
|
+
*/
|
|
1494
|
+
private closeOtherPopovers;
|
|
1347
1495
|
private showNativePopover;
|
|
1348
1496
|
private hideNativePopover;
|
|
1349
1497
|
private addGlobalListeners;
|
|
@@ -1377,10 +1525,12 @@ type ProgressMode = "linear-determinate" | "linear-indeterminate" | "circular-de
|
|
|
1377
1525
|
declare class RelProgress extends LitElement {
|
|
1378
1526
|
mode: ProgressMode;
|
|
1379
1527
|
value: number;
|
|
1528
|
+
label: string;
|
|
1380
1529
|
private radius;
|
|
1381
1530
|
private circumference;
|
|
1382
1531
|
static styles: lit.CSSResult;
|
|
1383
1532
|
private get safeValue();
|
|
1533
|
+
private get accessibleName();
|
|
1384
1534
|
private renderLinearDeterminate;
|
|
1385
1535
|
private renderLinearIndeterminate;
|
|
1386
1536
|
private renderCircularDeterminate;
|
|
@@ -1467,6 +1617,8 @@ declare class RelSegmentedButton extends LitElement {
|
|
|
1467
1617
|
active: string;
|
|
1468
1618
|
size: SegmentSize;
|
|
1469
1619
|
align: SegmentAlign;
|
|
1620
|
+
/** Accessible name for the radiogroup (it renders no visible group label). */
|
|
1621
|
+
fieldAriaLabel?: string;
|
|
1470
1622
|
static styles: lit.CSSResult;
|
|
1471
1623
|
private setActive;
|
|
1472
1624
|
/** APG radio-group navigation: arrows move focus AND select, the group is
|
|
@@ -1627,13 +1779,33 @@ declare global {
|
|
|
1627
1779
|
}
|
|
1628
1780
|
|
|
1629
1781
|
type ModalSide = "top" | "bottom" | "center";
|
|
1782
|
+
type ModalSize = "sm" | "md" | "lg" | "xl" | "fullscreen";
|
|
1630
1783
|
declare class RelModal extends LitElement {
|
|
1631
1784
|
open: boolean;
|
|
1632
1785
|
side: ModalSide;
|
|
1633
1786
|
title: string;
|
|
1634
1787
|
description: string;
|
|
1788
|
+
/** Alias for `description`; rendered only when `description` is empty. */
|
|
1789
|
+
subtitle: string;
|
|
1635
1790
|
dismissible: boolean;
|
|
1636
1791
|
modal: boolean;
|
|
1792
|
+
/** Panel width scale. `md` matches the Figma Modal Sheet width; `fullscreen` covers the viewport. */
|
|
1793
|
+
size: ModalSize;
|
|
1794
|
+
closeOnBackdropClick: boolean;
|
|
1795
|
+
closeOnEscape: boolean;
|
|
1796
|
+
showCloseButton: boolean;
|
|
1797
|
+
/** Move focus into the panel when opened (modal mode only). */
|
|
1798
|
+
autoFocus: boolean;
|
|
1799
|
+
/** Return focus to the opener when closed. */
|
|
1800
|
+
restoreFocus: boolean;
|
|
1801
|
+
/** When false, the body no longer scrolls internally — tall content clips at the panel's max height. */
|
|
1802
|
+
scrollable: boolean;
|
|
1803
|
+
/** Shows a spinner overlay and blocks all interaction inside the panel. */
|
|
1804
|
+
loading: boolean;
|
|
1805
|
+
/** Blocks user-initiated closes (X / backdrop / Escape) and footer actions. */
|
|
1806
|
+
disabled: boolean;
|
|
1807
|
+
/** Stacking order of the whole modal (backdrop + panel). */
|
|
1808
|
+
zIndex: number;
|
|
1637
1809
|
/**
|
|
1638
1810
|
* Figma "Breakpoint" axis. responsive (default) collapses to a full-width
|
|
1639
1811
|
* bottom sheet below 480px; web keeps the fixed desktop panel at every size.
|
|
@@ -1684,6 +1856,7 @@ declare class RelSlider extends LitElement {
|
|
|
1684
1856
|
value: number;
|
|
1685
1857
|
/** Upper value when type="range" (attribute value-end). */
|
|
1686
1858
|
valueEnd: number;
|
|
1859
|
+
fieldAriaLabel?: string;
|
|
1687
1860
|
private ticks;
|
|
1688
1861
|
private _onChange;
|
|
1689
1862
|
private _onTouched;
|
|
@@ -1746,6 +1919,7 @@ declare class RelSwitch extends LitElement {
|
|
|
1746
1919
|
checked: boolean;
|
|
1747
1920
|
disabled: boolean;
|
|
1748
1921
|
value: string;
|
|
1922
|
+
fieldAriaLabel?: string;
|
|
1749
1923
|
private _onChange;
|
|
1750
1924
|
private _onTouched;
|
|
1751
1925
|
private isFocused;
|
|
@@ -1843,9 +2017,19 @@ declare class RelTimePicker extends LitElement {
|
|
|
1843
2017
|
private draftHour;
|
|
1844
2018
|
private draftMinute;
|
|
1845
2019
|
private draftSecond;
|
|
1846
|
-
/**
|
|
1847
|
-
private
|
|
2020
|
+
/** Uncommitted typed text; null → the input shows the committed value. */
|
|
2021
|
+
private inputText;
|
|
2022
|
+
/** Parse/range error message for the typed text (cleared on next input). */
|
|
2023
|
+
private inputError;
|
|
2024
|
+
/**
|
|
2025
|
+
* Whether the next popover open should move focus into the columns.
|
|
2026
|
+
* Icon-click / ArrowDown / external `open` do (previous behavior); opening
|
|
2027
|
+
* by clicking into the text input must NOT, or typing would be impossible.
|
|
2028
|
+
*/
|
|
2029
|
+
private focusPanelOnOpen;
|
|
2030
|
+
private triggerInput?;
|
|
1848
2031
|
private triggerButton?;
|
|
2032
|
+
private popoverElement?;
|
|
1849
2033
|
private columnsElement?;
|
|
1850
2034
|
static styles: lit.CSSResult;
|
|
1851
2035
|
connectedCallback(): void;
|
|
@@ -1853,8 +2037,12 @@ declare class RelTimePicker extends LitElement {
|
|
|
1853
2037
|
private handleClickOutside;
|
|
1854
2038
|
private handleEscapeKey;
|
|
1855
2039
|
updated(changedProperties: Map<string, any>): void;
|
|
1856
|
-
|
|
1857
|
-
private
|
|
2040
|
+
private showTopLayer;
|
|
2041
|
+
private hideTopLayer;
|
|
2042
|
+
private onReposition;
|
|
2043
|
+
private updatePopoverPosition;
|
|
2044
|
+
/** Focus the selected (or first enabled) option in the columns. */
|
|
2045
|
+
private focusPanelSelection;
|
|
1858
2046
|
private parseTime;
|
|
1859
2047
|
private formatValue;
|
|
1860
2048
|
private formatDisplay;
|
|
@@ -1880,9 +2068,19 @@ declare class RelTimePicker extends LitElement {
|
|
|
1880
2068
|
/** Close discarding the draft (Cancel / Escape / outside click). */
|
|
1881
2069
|
private cancelPopover;
|
|
1882
2070
|
private applySelection;
|
|
2071
|
+
/** Commit a time: set value, reset typed text/error, fire rel-change. */
|
|
2072
|
+
private commitTime;
|
|
1883
2073
|
/** Set the draft to the current time, snapped to the minute step and range. */
|
|
1884
2074
|
private selectNow;
|
|
1885
2075
|
private clearValue;
|
|
2076
|
+
/**
|
|
2077
|
+
* Parse and commit the typed text (Enter / blur). Invalid or out-of-range
|
|
2078
|
+
* text keeps the field in an error state with the text preserved for
|
|
2079
|
+
* correction; the committed value is untouched (Escape reverts the text).
|
|
2080
|
+
*/
|
|
2081
|
+
private commitTypedValue;
|
|
2082
|
+
/** "Now", committed directly (N shortcut / popover chip), clamped to range. */
|
|
2083
|
+
private applyNowShortcut;
|
|
1886
2084
|
private selectHour;
|
|
1887
2085
|
private selectMinute;
|
|
1888
2086
|
private selectSecond;
|
|
@@ -1894,7 +2092,16 @@ declare class RelTimePicker extends LitElement {
|
|
|
1894
2092
|
*/
|
|
1895
2093
|
private scrollOptionInColumn;
|
|
1896
2094
|
private scrollColumnsToSelection;
|
|
1897
|
-
private
|
|
2095
|
+
private handleInputInput;
|
|
2096
|
+
private handleInputKeydown;
|
|
2097
|
+
/** Clicking anywhere on the field opens the popover, keeping focus typed-in. */
|
|
2098
|
+
private handleFieldClick;
|
|
2099
|
+
/** The clock icon toggles the popover with the previous focus behavior. */
|
|
2100
|
+
private handleIconClick;
|
|
2101
|
+
/** Commit typed text when focus leaves the component entirely. */
|
|
2102
|
+
private handleInputBlur;
|
|
2103
|
+
/** N inside the panel (columns/footer focus) applies Now directly. */
|
|
2104
|
+
private handlePanelKeydown;
|
|
1898
2105
|
/**
|
|
1899
2106
|
* Column navigation: Up/Down move within the column (and select), Left/Right
|
|
1900
2107
|
* jump between columns, Home/End go to the first/last option, Enter applies.
|
|
@@ -2058,6 +2265,8 @@ declare class RelUpload extends LitElement {
|
|
|
2058
2265
|
private aborter?;
|
|
2059
2266
|
private delayTimer?;
|
|
2060
2267
|
private lastSignature;
|
|
2268
|
+
private lastHeading;
|
|
2269
|
+
private lastAlertText;
|
|
2061
2270
|
static styles: lit.CSSResult;
|
|
2062
2271
|
/**
|
|
2063
2272
|
* Aggregate state. Read-only; corresponds to the Figma modal variants.
|
|
@@ -2282,4 +2491,25 @@ declare function bindShortcut(shortcut: string, handler: ShortcutHandler, option
|
|
|
2282
2491
|
*/
|
|
2283
2492
|
declare function formatShortcutParts(shortcut: string): string[];
|
|
2284
2493
|
|
|
2285
|
-
|
|
2494
|
+
/**
|
|
2495
|
+
* Shared screen-reader announcer.
|
|
2496
|
+
*
|
|
2497
|
+
* Maintains two persistent, visually-hidden live regions on document.body
|
|
2498
|
+
* (one polite, one assertive). Because the regions exist before any message
|
|
2499
|
+
* is written into them, text changes are reliably announced — unlike live
|
|
2500
|
+
* regions that are inserted into the DOM at the same moment as their content,
|
|
2501
|
+
* which most screen reader / browser pairs ignore.
|
|
2502
|
+
*
|
|
2503
|
+
* Messages are written on a short delay after clearing the region so that
|
|
2504
|
+
* repeating the same string (e.g. two identical toasts in a row) is
|
|
2505
|
+
* re-announced instead of deduplicated by the browser's accessibility tree.
|
|
2506
|
+
*/
|
|
2507
|
+
type Politeness = "polite" | "assertive";
|
|
2508
|
+
/**
|
|
2509
|
+
* Announce a message to screen reader users without moving focus.
|
|
2510
|
+
* Use "assertive" only for time-sensitive information (errors); everything
|
|
2511
|
+
* else should be "polite" so it does not interrupt the user mid-word.
|
|
2512
|
+
*/
|
|
2513
|
+
declare function announce(message: string, politeness?: Politeness): void;
|
|
2514
|
+
|
|
2515
|
+
export { type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BindShortcutOptions, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type FieldLabelStyle, FocusTrap, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, type ModalSize, type Orientation, type OtpType, type ProgressMode, type RadioOption, RelAccordion, RelAlert, RelAutocomplete, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelDrawerFooter, RelKbd, RelKbdGroup, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSkeleton, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelTimePicker, RelToast, RelTooltip, RelTopbar, RelTopbarActions, RelTopbarBrand, RelTopbarDropdown, RelTopbarDropdownItem, RelTopbarItem, RelTopbarMobilePanel, RelTopbarProfile, RelTopbarUtilities, RelUpload, RelUploadActions, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type ShortcutHandler, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldPrefixStyle, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle, type UploadFile, type UploadPhase, type UploadRejection, type UploadState, type UploadStatus, type Uploader, type UploaderContext, announce, bindShortcut, formatShortcutParts, getDeepActiveElement, getFocusableElements, isApplePlatform, isEditableTarget, matchesShortcut, parseShortcut, trapTabKey };
|