@reliability-design/web 1.4.0 → 1.4.2

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 export * from '@reliability-design/icons';
 
 declare class RelAccordion extends LitElement {
@@ -31,6 +31,172 @@ declare class RelAlert extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+type TextFieldState = "default" | "error" | "disabled";
+type TextFieldSize = "small" | "medium" | "large";
+type TextFieldVariant = "default" | "underline" | "legend";
+declare class RelTextfield extends LitElement {
+    label?: string;
+    placeholder: string;
+    type: string;
+    value: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    /** Makes the trailing icon interactive (pointer + focusable) and emits
+     *  `rel-right-icon-click` — e.g. a password show/hide toggle or clear button. */
+    clickableRightIcon: boolean;
+    /** Accessible label for the trailing icon when it is clickable. */
+    rightIconAriaLabel?: string;
+    supportingText?: string;
+    state: TextFieldState;
+    size: TextFieldSize;
+    floatingLabel: boolean;
+    variant: TextFieldVariant;
+    disabled: boolean;
+    required: boolean;
+    multiline: boolean;
+    rows: number;
+    prefixIcon?: string;
+    prefixIconAriaLabel?: string;
+    error: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    readonly: boolean;
+    maxLength?: number;
+    name?: string;
+    fullWidth: boolean;
+    private internalState;
+    private _wasError;
+    private uniqueId;
+    private get isDisabled();
+    private get isError();
+    private get leadingIcon();
+    private get helper();
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    /** Focuses the inner input/textarea (the host itself is not focusable). */
+    focus(options?: FocusOptions): void;
+    private handleFocus;
+    private handleBlur;
+    private handleRightIconClick;
+    private handleRightIconKeydown;
+    private handleInput;
+    render(): lit_html.TemplateResult<1>;
+}
+
+/** An item is a plain string or any object read through displayField/valueField. */
+type AutocompleteItem = string | Record<string, unknown>;
+type AutocompleteFilter = "contains" | "starts-with" | "none";
+type AutocompleteSearchFn = (query: string) => Promise<AutocompleteItem[]>;
+/**
+ * `<rel-autocomplete>` — searchable single-select type-ahead field.
+ *
+ * Composes `<rel-textfield>` for all field chrome (label, sizes, variants,
+ * states, icons) and adds a suggestion panel on top. Two data modes:
+ *   - local:  set `items`; typing filters them (`filter` mode)
+ *   - remote: set `searchFn`; input is debounced (`debounceMs`), queries are
+ *     latest-wins (stale responses discarded), and `items` is ignored
+ *
+ * The committed `value` is always the selected item's value string (its
+ * `valueField`) — typing alone emits `rel-change` with the raw text but does
+ * not change `value` until an item is picked (or the text exactly matches an
+ * item's label/value on Enter/blur).
+ */
+declare class RelAutocomplete extends LitElement {
+    /** Local (or fallback initial) suggestion list. Ignored while searchFn drives results. */
+    items: AutocompleteItem[];
+    /** Committed value — the selected item's valueField string ("" = none). */
+    value: string;
+    /** Object key read for the row label when items are objects. */
+    displayField: string;
+    /** Object key read for the committed value when items are objects. */
+    valueField: string;
+    /** Local filtering mode. Ignored when searchFn is set (results arrive pre-filtered). */
+    filter: AutocompleteFilter;
+    /** Async data source. When set, local filtering is bypassed entirely. */
+    searchFn?: AutocompleteSearchFn;
+    /** Debounce for searchFn calls, in ms. */
+    debounceMs: number;
+    /** Minimum typed characters before the panel opens / searchFn fires. 0 = open on focus. */
+    minSearchLength: number;
+    /** Optional cap on rendered suggestions (panel scrolls regardless). */
+    maxSuggestions: number;
+    /** Shows a trailing ✕ that clears the text and the committed value. */
+    clearable: boolean;
+    /** Externally-controlled loading state (internal searchFn loading is automatic). */
+    loading: boolean;
+    /** Row shown when a query yields nothing. */
+    noResultsText: string;
+    loadingText: string;
+    label?: string;
+    placeholder: string;
+    size: TextFieldSize;
+    variant: TextFieldVariant;
+    floatingLabel: boolean;
+    prefixIcon?: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    error: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    name?: string;
+    fullWidth: boolean;
+    private open;
+    private inputText;
+    private highlightedIndex;
+    private panelStyle;
+    private searching;
+    /** searchFn results; null = idle/local mode (use items). */
+    private remoteItems;
+    private fieldEl;
+    private panelEl;
+    private uniqueId;
+    private debounceTimer?;
+    private searchSeq;
+    /** 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;
+    static styles: lit.CSSResult;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** Full normalized source list (remote results while searchFn drives, else items). */
+    private get allItems();
+    private normalizeItem;
+    /** Suggestions for the current query — local filter only applies without searchFn. */
+    private get filteredItems();
+    private get isLoading();
+    private get queryLongEnough();
+    private addGlobalListeners;
+    private removeGlobalListeners;
+    private onOutsidePointerDown;
+    private onPageScroll;
+    private openPanel;
+    private closePanel;
+    private updatePosition;
+    /** Re-evaluates whether the panel should be showing for the current state. */
+    private syncPanel;
+    private onFieldInput;
+    private runSearch;
+    private selectItem;
+    /** Silent commit when typed text exactly matches an item (label or value, case-insensitive). */
+    private commitExactMatch;
+    private emitChanged;
+    private clear;
+    private onKeyDown;
+    private onFocusIn;
+    private onFocusOut;
+    /** Delegates focus to the inner textfield. */
+    focus(): void;
+    /** Bolds the first occurrence of the query inside a suggestion label. */
+    private renderLabel;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-autocomplete": RelAutocomplete;
+    }
+}
+
 declare class RelAvatar extends LitElement {
     size: "lg" | "md" | "sm" | "xs";
     type: "image" | "text" | "icon";
@@ -238,6 +404,8 @@ type CheckboxState = "default" | "error" | "disabled";
 type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
 declare class RelCheckbox extends LitElement {
     label: string;
+    /** rel-icon name rendered between the checkbox and the label (label prefix icon). */
+    icon: string;
     supportingtext: string;
     state: CheckboxState;
     status: CheckboxStatus;
@@ -472,6 +640,7 @@ declare class RelDrawer extends LitElement {
     description: string;
     private isDragging;
     private dragOffset;
+    private settled;
     private panelElement;
     private overlayElement;
     private previousFocus;
@@ -1000,6 +1169,8 @@ declare class RelPopover extends LitElement {
     private onHostPointerDown;
     private onOpen;
     private onClose;
+    private showNativePopover;
+    private hideNativePopover;
     private addGlobalListeners;
     private removeGlobalListeners;
     private onOutsidePointerDown;
@@ -1135,6 +1306,8 @@ interface SelectOptionObject {
     value: string;
     label?: string;
     supportingText?: string;
+    /** rel-icon name rendered as a prefix (leading icon) on the menu item. */
+    icon?: string;
 }
 type SelectOption = string | SelectOptionObject;
 declare class RelSelect extends LitElement {
@@ -1156,7 +1329,11 @@ declare class RelSelect extends LitElement {
     placeholder: string;
     searchPlaceholder: string;
     selectAllLabel: string;
-    /** Max selected chips shown before collapsing the rest into a "+N" badge. */
+    /**
+     * Optional hard cap on visible chips. By default (no cap) the visible
+     * count adapts to the trigger's width: chips collapse into the "+N" badge
+     * one by one instead of wrapping to a second line.
+     */
     maxVisibleChips: number;
     /** Hides the in-panel search field. Figma's "Single Option" dropdown has no search bar at all — use this for short, non-searchable lists. */
     noSearch: boolean;
@@ -1165,13 +1342,30 @@ declare class RelSelect extends LitElement {
     private panelStyle;
     private searchValue;
     private internalState;
+    /** How many chips currently fit in the trigger width (width-adaptive). */
+    private visibleChipCount;
     private triggerEl;
     private searchInputEl;
     private listboxEl;
+    private valueEl;
+    private chipsMeasureEl;
+    /** Must match the `gap` of .select-chips / .select-chips-measure. */
+    private static readonly CHIP_GAP;
+    private chipResizeObserver?;
     private uniqueId;
     static styles: lit.CSSResult;
+    connectedCallback(): void;
     disconnectedCallback(): void;
+    protected firstUpdated(): void;
     protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /**
+     * Width-adaptive chip collapsing: measures every selected chip in the
+     * hidden .select-chips-measure row and works out how many fit in the value
+     * area, always reserving room for the trailing "+N" chip when not all fit.
+     * At least one chip stays visible no matter how narrow the field gets.
+     */
+    private computeVisibleChips;
     private get normalizedOptions();
     /** Options matching the current search text (substring match, case-insensitive). */
     private get filteredOptions();
@@ -1199,6 +1393,13 @@ declare class RelSelect extends LitElement {
     private onSearchKeyDown;
     private handleListNavigation;
     private renderChips;
+    /**
+     * Hidden, unconstrained copy of every selected chip used purely for width
+     * measurement (see computeVisibleChips). Chips mirror the visible ones'
+     * width-affecting props (removable adds the ✕ icon). The trailing chip is
+     * the widest "+N" badge that could ever be needed.
+     */
+    private renderChipsMeasure;
     render(): lit_html.TemplateResult<1>;
 }
 declare global {
@@ -1246,6 +1447,7 @@ declare class RelModal extends LitElement {
     static styles: lit.CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(): void;
     updated(changed: Map<string, unknown>): void;
     private handleOpen;
     private handleClose;
@@ -1425,49 +1627,6 @@ declare class RelTab extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-type TextFieldState = "default" | "error" | "disabled";
-type TextFieldSize = "small" | "medium" | "large";
-type TextFieldVariant = "default" | "underline" | "legend";
-declare class RelTextfield extends LitElement {
-    label?: string;
-    placeholder: string;
-    type: string;
-    value: string;
-    leftIcon?: string;
-    rightIcon?: string;
-    supportingText?: string;
-    state: TextFieldState;
-    size: TextFieldSize;
-    floatingLabel: boolean;
-    variant: TextFieldVariant;
-    disabled: boolean;
-    required: boolean;
-    multiline: boolean;
-    rows: number;
-    prefixIcon?: string;
-    prefixIconAriaLabel?: string;
-    error: boolean;
-    errorMessage?: string;
-    helperText?: string;
-    readonly: boolean;
-    maxLength?: number;
-    name?: string;
-    fullWidth: boolean;
-    private internalState;
-    private _wasError;
-    private uniqueId;
-    private get isDisabled();
-    private get isError();
-    private get leadingIcon();
-    private get helper();
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    private handleFocus;
-    private handleBlur;
-    private handleInput;
-    render(): lit_html.TemplateResult<1>;
-}
-
 type ToastType = "default" | "error";
 declare class RelToast extends LitElement {
     message: string;
@@ -1501,4 +1660,4 @@ declare class RelTooltip extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-export { 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, 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 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 };