@reliability-design/web 1.4.2 → 1.4.3

package/dist/index.d.mts

@@ -34,6 +34,15 @@ declare class RelAlert extends LitElement {
 type TextFieldState = "default" | "error" | "disabled";
 type TextFieldSize = "small" | "medium" | "large";
 type TextFieldVariant = "default" | "underline" | "legend";
+/**
+ * How a field presents its label. Shared by `<rel-textfield>`, `<rel-select>`
+ * and `<rel-autocomplete>` so the three stay in step.
+ *   - `"default"`  — static label above the control
+ *   - `"floating"` — label rests over the placeholder, animates onto the border
+ *   - `"none"`     — no label renders; supply `fieldAriaLabel` /
+ *                    `fieldAriaLabelledby` to keep an accessible name
+ */
+type FieldLabelStyle = "default" | "floating" | "none";
 declare class RelTextfield extends LitElement {
     label?: string;
     placeholder: string;
@@ -49,7 +58,22 @@ declare class RelTextfield extends LitElement {
     supportingText?: string;
     state: TextFieldState;
     size: TextFieldSize;
+    /**
+     * Label presentation. Left `undefined` the deprecated `floatingLabel` boolean
+     * decides, so existing markup keeps working; set explicitly and it wins.
+     * Declares `attribute` because Lit would otherwise only listen for the
+     * all-lowercase `labelstyle`.
+     */
+    labelStyle?: FieldLabelStyle;
+    /** @deprecated Use `labelStyle="floating"`. Kept permanently as an alias. */
     floatingLabel: boolean;
+    /**
+     * Accessible name for the input. Required when `labelStyle="none"`, since no
+     * `<label>` renders and a placeholder is not a valid naming mechanism.
+     */
+    fieldAriaLabel?: string;
+    /** IDREF list of external element(s) naming the input. Wins over `fieldAriaLabel`. */
+    fieldAriaLabelledby?: string;
     variant: TextFieldVariant;
     disabled: boolean;
     required: boolean;
@@ -71,8 +95,15 @@ declare class RelTextfield extends LitElement {
     private get isError();
     private get leadingIcon();
     private get helper();
+    /** labelStyle supersedes the deprecated floatingLabel boolean. */
+    private get resolvedLabelStyle();
+    /** True when no visible label renders and the input needs an ARIA name. */
+    private get labelHidden();
     static styles: lit.CSSResult;
     connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    private _warnedNoName;
+    updated(): void;
     /** Focuses the inner input/textarea (the host itself is not focusable). */
     focus(options?: FocusOptions): void;
     private handleFocus;
@@ -131,7 +162,14 @@ declare class RelAutocomplete extends LitElement {
     placeholder: string;
     size: TextFieldSize;
     variant: TextFieldVariant;
+    /** See `FieldLabelStyle`. Left `undefined` the deprecated `floatingLabel` decides. */
+    labelStyle?: FieldLabelStyle;
+    /** @deprecated Use `labelStyle="floating"`. Kept permanently as an alias. */
     floatingLabel: boolean;
+    /** Accessible name for the input. Required when `labelStyle="none"`. */
+    fieldAriaLabel?: string;
+    /** IDREF list of external element(s) naming the input. Wins over `fieldAriaLabel`. */
+    fieldAriaLabelledby?: string;
     prefixIcon?: string;
     disabled: boolean;
     readonly: boolean;
@@ -156,6 +194,9 @@ declare class RelAutocomplete extends LitElement {
     /** Set while a selection/clear updates `value` internally, so willUpdate
      *  doesn't overwrite the input text the way it does for external writes. */
     private internalValueWrite;
+    /** Name used for the suggestion panel — the visible label, or fieldAriaLabel
+     *  once labelStyle="none" hides it. Mirrors rel-textfield's own resolution. */
+    private get accessibleName();
     static styles: lit.CSSResult;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues<this>): void;
@@ -706,6 +747,42 @@ declare class RelLayout extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+type StepStatus = "done" | "progress" | "disabled";
+type TextAlign = "right" | "below";
+type Orientation = "horizontal" | "vertical";
+type StepperSize = "small" | "large";
+/** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
+type StepperType = "default" | "dot" | "number" | "icon";
+/** Figma "Typel": label placement relative to the indicator. */
+type LabelPlacement = "top" | "centered" | "inverted";
+interface Step {
+    title: string;
+    status: StepStatus;
+}
+declare class RelStepper extends LitElement {
+    steps: Step[];
+    textAlign: TextAlign;
+    orientation: Orientation;
+    size: StepperSize;
+    type: StepperType;
+    /**
+     * Figma Typel axis: top = label top-aligned beside the indicator,
+     * centered = label vertically centered beside it, inverted = indicator above
+     * the label. When unset, the legacy textAlign prop drives the layout
+     * (below ≈ inverted, right ≈ centered). Note Figma marks Top+Horizontal
+     * as an unsupported combination.
+     */
+    labelPlacement?: LabelPlacement;
+    static styles: lit.CSSResult;
+    private isDone;
+    private isProgress;
+    private isDisabled;
+    private getStepClasses;
+    private onStepClick;
+    private renderIndicator;
+    render(): lit_html.TemplateResult<1>;
+}
+
 interface RadioOption {
     value: string;
     label: string;
@@ -715,6 +792,12 @@ interface RadioOption {
 declare class RelRadio extends LitElement {
     options: RadioOption[];
     name: string;
+    /** Layout axis of the option list. `"vertical"` (default) stacks options in
+     *  a column; `"horizontal"` lays them out in a wrapping row. */
+    orientation: Orientation;
+    /** Control scale. `"medium"` (default) = 20px circle with body-lg labels;
+     *  `"small"` = 16px circle with body-md labels. */
+    size: "small" | "medium";
     selectedValue: string | null;
     disabled: boolean;
     error: boolean;
@@ -1301,7 +1384,8 @@ declare class RelSegmentedButton extends LitElement {
 type SelectState = "default" | "error" | "disabled";
 type SelectSize = "small" | "medium" | "large";
 type SelectBorder = "rounded" | "sharp";
-type SelectLabelStyle = "default" | "floating";
+/** Alias of the shared field type — kept so existing imports keep resolving. */
+type SelectLabelStyle = FieldLabelStyle;
 interface SelectOptionObject {
     value: string;
     label?: string;
@@ -1313,6 +1397,13 @@ type SelectOption = string | SelectOptionObject;
 declare class RelSelect extends LitElement {
     label: string;
     labelStyle: SelectLabelStyle;
+    /**
+     * Accessible name for the trigger. Required when `labelStyle="none"`, since no
+     * `<label>` renders and a placeholder is not a valid naming mechanism.
+     */
+    fieldAriaLabel?: string;
+    /** IDREF list of external element(s) naming the trigger. Wins over `fieldAriaLabel`. */
+    fieldAriaLabelledby?: string;
     options: SelectOption[];
     /** Enables multi-select: selected values render as removable chips and options as checkboxes. */
     multiple: boolean;
@@ -1358,6 +1449,7 @@ declare class RelSelect extends LitElement {
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected willUpdate(changed: PropertyValues<this>): void;
+    private _warnedNoName;
     protected updated(changed: PropertyValues<this>): void;
     /**
      * Width-adaptive chip collapsing: measures every selected chip in the
@@ -1542,42 +1634,6 @@ declare class RelSnackbar extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-type StepStatus = "done" | "progress" | "disabled";
-type TextAlign = "right" | "below";
-type Orientation = "horizontal" | "vertical";
-type StepperSize = "small" | "large";
-/** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
-type StepperType = "default" | "dot" | "number" | "icon";
-/** Figma "Typel": label placement relative to the indicator. */
-type LabelPlacement = "top" | "centered" | "inverted";
-interface Step {
-    title: string;
-    status: StepStatus;
-}
-declare class RelStepper extends LitElement {
-    steps: Step[];
-    textAlign: TextAlign;
-    orientation: Orientation;
-    size: StepperSize;
-    type: StepperType;
-    /**
-     * Figma Typel axis: top = label top-aligned beside the indicator,
-     * centered = label vertically centered beside it, inverted = indicator above
-     * the label. When unset, the legacy textAlign prop drives the layout
-     * (below ≈ inverted, right ≈ centered). Note Figma marks Top+Horizontal
-     * as an unsupported combination.
-     */
-    labelPlacement?: LabelPlacement;
-    static styles: lit.CSSResult;
-    private isDone;
-    private isProgress;
-    private isDisabled;
-    private getStepClasses;
-    private onStepClick;
-    private renderIndicator;
-    render(): lit_html.TemplateResult<1>;
-}
-
 declare class RelSwitch extends LitElement {
     checked: boolean;
     disabled: boolean;
@@ -1627,6 +1683,99 @@ declare class RelTab extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+/**
+ * `<rel-time-picker>` — time selection field.
+ *
+ * Follows the rel-date-picker trigger/field conventions (label, helper/error
+ * text, sizes, fullWidth, clearable) and the rel-range-picker draft model:
+ * column selections are held in draft state until Apply is clicked; Cancel,
+ * Escape, or an outside click discards the draft.
+ *
+ * The committed `value` is ALWAYS 24-hour "HH:mm" regardless of the display
+ * `format`, so consumers get a consistent machine-readable string.
+ */
+declare class RelTimePicker extends LitElement {
+    /** Committed time, 24-hour "HH:mm" (e.g. "09:30", "17:05"). */
+    value: string | null;
+    placeholder: string;
+    label: string | null;
+    disabled: boolean;
+    required: boolean;
+    readonly: boolean;
+    /** Display format of the trigger text and hour column. Value stays "HH:mm". */
+    format: "12h" | "24h";
+    /** Minute granularity of the minutes column (1, 5, 10, 15, 30, …). */
+    minuteStep: number;
+    /** Earliest selectable time, "HH:mm" (inclusive). */
+    minTime: string | null;
+    /** Latest selectable time, "HH:mm" (inclusive). */
+    maxTime: string | null;
+    open: boolean;
+    clearable: boolean;
+    error: boolean;
+    /** Alias for `error` (requested-API compat); either flag applies error styling. */
+    invalid: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    name?: string;
+    size: "small" | "medium" | "large";
+    variant: "outlined";
+    fullWidth: boolean;
+    private draftHour;
+    private draftMinute;
+    private triggerButton?;
+    private columnsElement?;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleClickOutside;
+    private handleEscapeKey;
+    updated(changedProperties: Map<string, any>): void;
+    private parseTime;
+    private formatValue;
+    private formatDisplay;
+    private toMinutes;
+    private get minuteStepSafe();
+    private get minBoundMinutes();
+    private get maxBoundMinutes();
+    private isTimeInRange;
+    /** Minutes shown in the minutes column (respecting minuteStep). */
+    private getMinuteOptions;
+    /** An hour is enabled if at least one of its step minutes is in range. */
+    private isHourEnabled;
+    private isPeriodEnabled;
+    /** Hour column entries: display label + the 0–23 hour it maps to. */
+    private getHourOptions;
+    private get draftPeriod();
+    private resetDraftFromValue;
+    /** Snap the draft minute to the nearest valid step minute for the hour. */
+    private clampDraftToRange;
+    private toggleTimePopover;
+    /** Close discarding the draft (Cancel / Escape / outside click). */
+    private cancelPopover;
+    private applySelection;
+    /** Set the draft to the current time, snapped to the minute step and range. */
+    private selectNow;
+    private clearValue;
+    private selectHour;
+    private selectMinute;
+    private selectPeriod;
+    private scrollColumnsToSelection;
+    private handleTriggerKeydown;
+    /**
+     * Column navigation: Up/Down move within the column (and select), Left/Right
+     * jump between columns, Home/End go to the first/last option, Enter applies.
+     */
+    private handleOptionKeydown;
+    private focusAdjacentColumn;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-time-picker": RelTimePicker;
+    }
+}
+
 type ToastType = "default" | "error";
 declare class RelToast extends LitElement {
     message: string;
@@ -1660,4 +1809,4 @@ declare class RelTooltip extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-export { type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, 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, RelToast, RelTooltip, RelTopbar, RelTopbarActions, RelTopbarBrand, RelTopbarDropdown, RelTopbarDropdownItem, RelTopbarItem, RelTopbarMobilePanel, RelTopbarProfile, RelTopbarUtilities, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle };
+export { type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type FieldLabelStyle, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, 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, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle };

package/dist/index.d.ts

@@ -34,6 +34,15 @@ declare class RelAlert extends LitElement {
 type TextFieldState = "default" | "error" | "disabled";
 type TextFieldSize = "small" | "medium" | "large";
 type TextFieldVariant = "default" | "underline" | "legend";
+/**
+ * How a field presents its label. Shared by `<rel-textfield>`, `<rel-select>`
+ * and `<rel-autocomplete>` so the three stay in step.
+ *   - `"default"`  — static label above the control
+ *   - `"floating"` — label rests over the placeholder, animates onto the border
+ *   - `"none"`     — no label renders; supply `fieldAriaLabel` /
+ *                    `fieldAriaLabelledby` to keep an accessible name
+ */
+type FieldLabelStyle = "default" | "floating" | "none";
 declare class RelTextfield extends LitElement {
     label?: string;
     placeholder: string;
@@ -49,7 +58,22 @@ declare class RelTextfield extends LitElement {
     supportingText?: string;
     state: TextFieldState;
     size: TextFieldSize;
+    /**
+     * Label presentation. Left `undefined` the deprecated `floatingLabel` boolean
+     * decides, so existing markup keeps working; set explicitly and it wins.
+     * Declares `attribute` because Lit would otherwise only listen for the
+     * all-lowercase `labelstyle`.
+     */
+    labelStyle?: FieldLabelStyle;
+    /** @deprecated Use `labelStyle="floating"`. Kept permanently as an alias. */
     floatingLabel: boolean;
+    /**
+     * Accessible name for the input. Required when `labelStyle="none"`, since no
+     * `<label>` renders and a placeholder is not a valid naming mechanism.
+     */
+    fieldAriaLabel?: string;
+    /** IDREF list of external element(s) naming the input. Wins over `fieldAriaLabel`. */
+    fieldAriaLabelledby?: string;
     variant: TextFieldVariant;
     disabled: boolean;
     required: boolean;
@@ -71,8 +95,15 @@ declare class RelTextfield extends LitElement {
     private get isError();
     private get leadingIcon();
     private get helper();
+    /** labelStyle supersedes the deprecated floatingLabel boolean. */
+    private get resolvedLabelStyle();
+    /** True when no visible label renders and the input needs an ARIA name. */
+    private get labelHidden();
     static styles: lit.CSSResult;
     connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    private _warnedNoName;
+    updated(): void;
     /** Focuses the inner input/textarea (the host itself is not focusable). */
     focus(options?: FocusOptions): void;
     private handleFocus;
@@ -131,7 +162,14 @@ declare class RelAutocomplete extends LitElement {
     placeholder: string;
     size: TextFieldSize;
     variant: TextFieldVariant;
+    /** See `FieldLabelStyle`. Left `undefined` the deprecated `floatingLabel` decides. */
+    labelStyle?: FieldLabelStyle;
+    /** @deprecated Use `labelStyle="floating"`. Kept permanently as an alias. */
     floatingLabel: boolean;
+    /** Accessible name for the input. Required when `labelStyle="none"`. */
+    fieldAriaLabel?: string;
+    /** IDREF list of external element(s) naming the input. Wins over `fieldAriaLabel`. */
+    fieldAriaLabelledby?: string;
     prefixIcon?: string;
     disabled: boolean;
     readonly: boolean;
@@ -156,6 +194,9 @@ declare class RelAutocomplete extends LitElement {
     /** Set while a selection/clear updates `value` internally, so willUpdate
      *  doesn't overwrite the input text the way it does for external writes. */
     private internalValueWrite;
+    /** Name used for the suggestion panel — the visible label, or fieldAriaLabel
+     *  once labelStyle="none" hides it. Mirrors rel-textfield's own resolution. */
+    private get accessibleName();
     static styles: lit.CSSResult;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues<this>): void;
@@ -706,6 +747,42 @@ declare class RelLayout extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+type StepStatus = "done" | "progress" | "disabled";
+type TextAlign = "right" | "below";
+type Orientation = "horizontal" | "vertical";
+type StepperSize = "small" | "large";
+/** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
+type StepperType = "default" | "dot" | "number" | "icon";
+/** Figma "Typel": label placement relative to the indicator. */
+type LabelPlacement = "top" | "centered" | "inverted";
+interface Step {
+    title: string;
+    status: StepStatus;
+}
+declare class RelStepper extends LitElement {
+    steps: Step[];
+    textAlign: TextAlign;
+    orientation: Orientation;
+    size: StepperSize;
+    type: StepperType;
+    /**
+     * Figma Typel axis: top = label top-aligned beside the indicator,
+     * centered = label vertically centered beside it, inverted = indicator above
+     * the label. When unset, the legacy textAlign prop drives the layout
+     * (below ≈ inverted, right ≈ centered). Note Figma marks Top+Horizontal
+     * as an unsupported combination.
+     */
+    labelPlacement?: LabelPlacement;
+    static styles: lit.CSSResult;
+    private isDone;
+    private isProgress;
+    private isDisabled;
+    private getStepClasses;
+    private onStepClick;
+    private renderIndicator;
+    render(): lit_html.TemplateResult<1>;
+}
+
 interface RadioOption {
     value: string;
     label: string;
@@ -715,6 +792,12 @@ interface RadioOption {
 declare class RelRadio extends LitElement {
     options: RadioOption[];
     name: string;
+    /** Layout axis of the option list. `"vertical"` (default) stacks options in
+     *  a column; `"horizontal"` lays them out in a wrapping row. */
+    orientation: Orientation;
+    /** Control scale. `"medium"` (default) = 20px circle with body-lg labels;
+     *  `"small"` = 16px circle with body-md labels. */
+    size: "small" | "medium";
     selectedValue: string | null;
     disabled: boolean;
     error: boolean;
@@ -1301,7 +1384,8 @@ declare class RelSegmentedButton extends LitElement {
 type SelectState = "default" | "error" | "disabled";
 type SelectSize = "small" | "medium" | "large";
 type SelectBorder = "rounded" | "sharp";
-type SelectLabelStyle = "default" | "floating";
+/** Alias of the shared field type — kept so existing imports keep resolving. */
+type SelectLabelStyle = FieldLabelStyle;
 interface SelectOptionObject {
     value: string;
     label?: string;
@@ -1313,6 +1397,13 @@ type SelectOption = string | SelectOptionObject;
 declare class RelSelect extends LitElement {
     label: string;
     labelStyle: SelectLabelStyle;
+    /**
+     * Accessible name for the trigger. Required when `labelStyle="none"`, since no
+     * `<label>` renders and a placeholder is not a valid naming mechanism.
+     */
+    fieldAriaLabel?: string;
+    /** IDREF list of external element(s) naming the trigger. Wins over `fieldAriaLabel`. */
+    fieldAriaLabelledby?: string;
     options: SelectOption[];
     /** Enables multi-select: selected values render as removable chips and options as checkboxes. */
     multiple: boolean;
@@ -1358,6 +1449,7 @@ declare class RelSelect extends LitElement {
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected willUpdate(changed: PropertyValues<this>): void;
+    private _warnedNoName;
     protected updated(changed: PropertyValues<this>): void;
     /**
      * Width-adaptive chip collapsing: measures every selected chip in the
@@ -1542,42 +1634,6 @@ declare class RelSnackbar extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-type StepStatus = "done" | "progress" | "disabled";
-type TextAlign = "right" | "below";
-type Orientation = "horizontal" | "vertical";
-type StepperSize = "small" | "large";
-/** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
-type StepperType = "default" | "dot" | "number" | "icon";
-/** Figma "Typel": label placement relative to the indicator. */
-type LabelPlacement = "top" | "centered" | "inverted";
-interface Step {
-    title: string;
-    status: StepStatus;
-}
-declare class RelStepper extends LitElement {
-    steps: Step[];
-    textAlign: TextAlign;
-    orientation: Orientation;
-    size: StepperSize;
-    type: StepperType;
-    /**
-     * Figma Typel axis: top = label top-aligned beside the indicator,
-     * centered = label vertically centered beside it, inverted = indicator above
-     * the label. When unset, the legacy textAlign prop drives the layout
-     * (below ≈ inverted, right ≈ centered). Note Figma marks Top+Horizontal
-     * as an unsupported combination.
-     */
-    labelPlacement?: LabelPlacement;
-    static styles: lit.CSSResult;
-    private isDone;
-    private isProgress;
-    private isDisabled;
-    private getStepClasses;
-    private onStepClick;
-    private renderIndicator;
-    render(): lit_html.TemplateResult<1>;
-}
-
 declare class RelSwitch extends LitElement {
     checked: boolean;
     disabled: boolean;
@@ -1627,6 +1683,99 @@ declare class RelTab extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+/**
+ * `<rel-time-picker>` — time selection field.
+ *
+ * Follows the rel-date-picker trigger/field conventions (label, helper/error
+ * text, sizes, fullWidth, clearable) and the rel-range-picker draft model:
+ * column selections are held in draft state until Apply is clicked; Cancel,
+ * Escape, or an outside click discards the draft.
+ *
+ * The committed `value` is ALWAYS 24-hour "HH:mm" regardless of the display
+ * `format`, so consumers get a consistent machine-readable string.
+ */
+declare class RelTimePicker extends LitElement {
+    /** Committed time, 24-hour "HH:mm" (e.g. "09:30", "17:05"). */
+    value: string | null;
+    placeholder: string;
+    label: string | null;
+    disabled: boolean;
+    required: boolean;
+    readonly: boolean;
+    /** Display format of the trigger text and hour column. Value stays "HH:mm". */
+    format: "12h" | "24h";
+    /** Minute granularity of the minutes column (1, 5, 10, 15, 30, …). */
+    minuteStep: number;
+    /** Earliest selectable time, "HH:mm" (inclusive). */
+    minTime: string | null;
+    /** Latest selectable time, "HH:mm" (inclusive). */
+    maxTime: string | null;
+    open: boolean;
+    clearable: boolean;
+    error: boolean;
+    /** Alias for `error` (requested-API compat); either flag applies error styling. */
+    invalid: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    name?: string;
+    size: "small" | "medium" | "large";
+    variant: "outlined";
+    fullWidth: boolean;
+    private draftHour;
+    private draftMinute;
+    private triggerButton?;
+    private columnsElement?;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleClickOutside;
+    private handleEscapeKey;
+    updated(changedProperties: Map<string, any>): void;
+    private parseTime;
+    private formatValue;
+    private formatDisplay;
+    private toMinutes;
+    private get minuteStepSafe();
+    private get minBoundMinutes();
+    private get maxBoundMinutes();
+    private isTimeInRange;
+    /** Minutes shown in the minutes column (respecting minuteStep). */
+    private getMinuteOptions;
+    /** An hour is enabled if at least one of its step minutes is in range. */
+    private isHourEnabled;
+    private isPeriodEnabled;
+    /** Hour column entries: display label + the 0–23 hour it maps to. */
+    private getHourOptions;
+    private get draftPeriod();
+    private resetDraftFromValue;
+    /** Snap the draft minute to the nearest valid step minute for the hour. */
+    private clampDraftToRange;
+    private toggleTimePopover;
+    /** Close discarding the draft (Cancel / Escape / outside click). */
+    private cancelPopover;
+    private applySelection;
+    /** Set the draft to the current time, snapped to the minute step and range. */
+    private selectNow;
+    private clearValue;
+    private selectHour;
+    private selectMinute;
+    private selectPeriod;
+    private scrollColumnsToSelection;
+    private handleTriggerKeydown;
+    /**
+     * Column navigation: Up/Down move within the column (and select), Left/Right
+     * jump between columns, Home/End go to the first/last option, Enter applies.
+     */
+    private handleOptionKeydown;
+    private focusAdjacentColumn;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-time-picker": RelTimePicker;
+    }
+}
+
 type ToastType = "default" | "error";
 declare class RelToast extends LitElement {
     message: string;
@@ -1660,4 +1809,4 @@ declare class RelTooltip extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-export { type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, 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, RelToast, RelTooltip, RelTopbar, RelTopbarActions, RelTopbarBrand, RelTopbarDropdown, RelTopbarDropdownItem, RelTopbarItem, RelTopbarMobilePanel, RelTopbarProfile, RelTopbarUtilities, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle };
+export { type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type FieldLabelStyle, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, 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, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle };