@reliability-design/web 1.2.0 → 1.3.0

package/dist/index.d.ts

@@ -1,14 +1,15 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 export * from '@reliability-design/icons';
 
 declare class RelAccordion extends LitElement {
     title: string;
     open: boolean;
+    size: "md" | "sm";
+    type: "default" | "action";
     static styles: lit.CSSResult;
     private toggle;
-    private chevron;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -29,10 +30,12 @@ declare class RelAlert extends LitElement {
 declare class RelAvatar extends LitElement {
     size: "lg" | "md" | "sm" | "xs";
     type: "image" | "text" | "icon";
+    variant: "fill" | "subtle" | "outline";
     src: string;
     text: string;
     alt: string;
     bg: string;
+    color: string;
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
 }
@@ -43,8 +46,23 @@ declare class RelBadge extends LitElement {
     suffix: string;
     size: "sm" | "md" | "lg";
     variant: "dot" | "number";
+    /**
+     * Direct CSS color override for the badge background. Accepts any valid
+     * CSS color value: hex, rgb(...), hsl(...), named color, or var(--token).
+     *
+     * Clear it (set to `''`) to fall back to the default token.
+     */
+    color: string;
+    /**
+     * Direct CSS color override for the badge text/icon color. Accepts any
+     * valid CSS color value: hex, rgb(...), hsl(...), named color, or var(--token).
+     *
+     * Clear it (set to `''`) to fall back to the default (white).
+     */
+    textColor: string;
     static styles: lit.CSSResult;
     private get classes();
+    updated(changedProperties: Map<PropertyKey, unknown>): void;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -66,6 +84,9 @@ declare class RelButton extends LitElement {
     disabled: boolean;
     ariaLabel: string | null;
     static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleHostClick;
     private get classes();
     private handleClick;
     render(): lit_html.TemplateResult<1>;
@@ -246,6 +267,14 @@ declare class RelRangePicker extends LitElement {
     disabled: boolean;
     open: boolean;
     mode: "popover" | "popup";
+    width: string;
+    minWidth: string;
+    maxWidth: string;
+    height: string;
+    minHeight: string;
+    maxHeight: string;
+    placeholder: string;
+    triggerVariant: "default" | "icon";
     private draftFrom;
     private draftTo;
     private draftActivePreset;
@@ -257,6 +286,7 @@ declare class RelRangePicker extends LitElement {
     static styles: lit.CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    updated(): void;
     private handleClickOutside;
     private handleGlobalKeydown;
     private toggleOpen;
@@ -265,6 +295,8 @@ declare class RelRangePicker extends LitElement {
     private applySelection;
     private resetDraft;
     private getTriggerLabel;
+    /** Formatted "MM/DD/YYYY → MM/DD/YYYY" (or single date / "") for the current committed `from`/`to`. */
+    get displayLabel(): string;
     private parseISODate;
     private formatISODate;
     private formatDisplayDate;
@@ -287,9 +319,18 @@ declare global {
     }
 }
 
+type ChipTone = "neutral" | "danger" | "warning" | "success" | "info";
+type ChipVariant = "fill" | "subtle";
+type ChipSize = "sm" | "md" | "lg";
+type ChipBorder = "default" | "rounded";
 declare class RelChip extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
     label: string;
-    tone: "default" | "blue" | "orange" | "red" | "green";
+    tone: ChipTone;
+    variant: ChipVariant;
+    size: ChipSize;
+    border: ChipBorder;
+    /** Icon name from the generated icon dictionary (e.g. "settings") — rendered via <rel-icon>. */
     leadingIcon?: string;
     trailingIcon?: string;
     /** Initials text for the avatar (e.g. "JD"). Mutually exclusive with leadingIcon. */
@@ -297,11 +338,22 @@ declare class RelChip extends LitElement {
     removable: boolean;
     /** IMPORTANT: reflected so CSS + Angular can see it */
     removed: boolean;
+    /** Opt-in native drag-and-drop — reflects the Figma "Dragged" state automatically during a real drag gesture. */
+    draggableChip: boolean;
+    /** Reflected so CSS can target the Figma "Dragged" visual state. Driven automatically by dragstart/dragend when draggableChip is set. */
+    private dragging;
     static styles: lit.CSSResult;
     private get classes();
     private handleRemove;
+    private onDragStart;
+    private onDragEnd;
+    protected updated(changed: Map<string, unknown>): void;
     render(): lit_html.TemplateResult<1>;
-    private renderIcon;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-chip": RelChip;
+    }
 }
 
 declare class RelContainer extends LitElement {
@@ -460,6 +512,7 @@ declare class RelRadio extends LitElement {
     registerOnChange(fn: (value: string) => void): void;
     registerOnTouched(fn: () => void): void;
     writeValue(value: string): void;
+    private get hasSelection();
     private renderOption;
     render(): lit_html.TemplateResult<1>;
 }
@@ -472,7 +525,7 @@ declare class RelMenubar extends LitElement {
     private openSubmenuElement;
     private hoverSwitchEnabled;
     private _onScroll?;
-    static readonly _css = "\n    :host {\n      display: block;\n    }\n\n    :host > slot {\n      display: none;\n    }\n\n    .menubar-container {\n      display: flex;\n      align-items: stretch;\n      background: var(--rel-color-bg-secondary);\n      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);\n      border-radius: var(--rel-borders-radius-border-radius-200);\n      overflow: hidden;\n      padding: 0;\n      gap: var(--rel-spacing-space-3xs);\n      font-family: var(--rel-fontFamilies-primary);\n      font-size: var(--rel-fontSizes-sm);\n      height: 40px;\n    }\n\n    .menubar-trigger {\n      display: flex;\n      align-items: center;\n      align-self: stretch;\n      height: 100%;\n      padding: 0 var(--rel-spacing-space-sm);\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      font-family: inherit;\n      font-size: inherit;\n      color: var(--rel-color-text-heading);\n      transition: background 0.15s ease;\n      user-select: none;\n      outline: none;\n    }\n\n    .menubar-trigger:hover,\n    .menubar-trigger.active {\n      background: var(--rel-color-bg-selected);\n    }\n\n    .menubar-trigger:focus-visible {\n      outline: 2px solid var(--rel-color-border-focus);\n      outline-offset: 2px;\n    }\n\n    .menubar-panel {\n      position: fixed;\n      min-width: 220px;\n      background: var(--rel-color-bg-primary);\n      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);\n      border-radius: var(--rel-borders-radius-border-radius-200);\n      box-shadow: var(--rel-shadows-shadow-300);\n      padding: 0;\n      overflow: hidden;\n      z-index: 1000;\n      display: none;\n    }\n\n    .menubar-panel.open {\n      display: block;\n    }\n\n    .menu-item {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--rel-spacing-space-sm);\n      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);\n      cursor: pointer;\n      transition: background 0.15s ease;\n      user-select: none;\n      color: var(--rel-color-text-heading);\n      line-height: var(--rel-lineHeights-sm);\n    }\n\n    .menu-item:hover,\n    .menu-item.focused {\n      background: var(--rel-color-bg-selected);\n    }\n\n    .menu-item[data-disabled=\"true\"] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .menu-separator {\n      height: var(--rel-borders-width-stroke-100);\n      background: var(--rel-color-border-divider);\n      margin: 0;\n      padding: 0;\n    }\n\n    rel-icon {\n      display: inline-flex;\n      pointer-events: none;\n    }\n\n    .menu-submenu-trigger {\n      position: relative;\n    }\n\n    .menu-submenu-trigger rel-icon {\n      opacity: 0.6;\n    }\n\n    .submenu-panel {\n      position: fixed;\n      min-width: 200px;\n      background: var(--rel-color-bg-primary);\n      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);\n      border-radius: var(--rel-borders-radius-border-radius-200);\n      box-shadow: var(--rel-shadows-shadow-300);\n      padding: 0;\n      overflow: hidden;\n      z-index: 1001;\n      display: none;\n    }\n\n    .submenu-panel.open {\n      display: block;\n    }\n\n    .menu-shortcut {\n      opacity: 0.6;\n      font-size: var(--rel-fontSizes-xs);\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-space-3xs);\n    }\n\n    .menubar-panel rel-checkbox {\n      display: block;\n      width: 100%;\n      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-md, 16px);\n      box-sizing: border-box;\n      cursor: pointer;\n    }\n  ";
+    static readonly _css = "\n    :host {\n      display: block;\n    }\n\n    :host > slot {\n      display: none;\n    }\n\n    .menubar-container {\n      display: flex;\n      align-items: stretch;\n      background: var(--rel-color-bg-secondary);\n      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);\n      border-radius: var(--rel-borders-radius-border-radius-200);\n      overflow: hidden;\n      padding: 0;\n      gap: var(--rel-spacing-space-3xs);\n      font-family: var(--rel-fontFamilies-primary);\n      font-size: var(--rel-fontSizes-sm);\n      height: 40px;\n      width: fit-content;\n    }\n\n    .menubar-trigger {\n      display: flex;\n      align-items: center;\n      align-self: stretch;\n      height: 100%;\n      padding: 0 var(--rel-spacing-space-sm);\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      font-family: inherit;\n      font-size: inherit;\n      color: var(--rel-color-text-heading);\n      transition: background 0.15s ease;\n      user-select: none;\n      outline: none;\n    }\n\n    .menubar-trigger:hover,\n    .menubar-trigger.active {\n      background: var(--rel-color-bg-selected);\n    }\n\n    .menubar-trigger:focus-visible {\n      outline: 2px solid var(--rel-color-border-focus);\n      outline-offset: 2px;\n    }\n\n    .menubar-panel {\n      position: fixed;\n      min-width: 220px;\n      background: var(--rel-color-bg-primary);\n      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);\n      border-radius: var(--rel-borders-radius-border-radius-200);\n      box-shadow: var(--rel-shadows-shadow-300);\n      padding: 0;\n      overflow: hidden;\n      z-index: 1000;\n      display: none;\n    }\n\n    .menubar-panel.open {\n      display: block;\n    }\n\n    .menu-item {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--rel-spacing-space-sm);\n      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);\n      cursor: pointer;\n      transition: background 0.15s ease;\n      user-select: none;\n      color: var(--rel-color-text-heading);\n      line-height: var(--rel-lineHeights-sm);\n    }\n\n    .menu-item:hover,\n    .menu-item.focused {\n      background: var(--rel-color-bg-selected);\n    }\n\n    .menu-item[data-disabled=\"true\"] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .menu-separator {\n      height: var(--rel-borders-width-stroke-100);\n      background: var(--rel-color-border-divider);\n      margin: 0;\n      padding: 0;\n    }\n\n    rel-icon {\n      display: inline-flex;\n      pointer-events: none;\n    }\n\n    .menu-submenu-trigger {\n      position: relative;\n    }\n\n    .menu-submenu-trigger rel-icon {\n      opacity: 0.6;\n    }\n\n    .submenu-panel {\n      position: fixed;\n      min-width: 200px;\n      background: var(--rel-color-bg-primary);\n      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);\n      border-radius: var(--rel-borders-radius-border-radius-200);\n      box-shadow: var(--rel-shadows-shadow-300);\n      padding: 0;\n      overflow: hidden;\n      z-index: 1001;\n      display: none;\n    }\n\n    .submenu-panel.open {\n      display: block;\n    }\n\n    .menu-shortcut {\n      opacity: 0.6;\n      font-size: var(--rel-fontSizes-xs);\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-space-3xs);\n    }\n\n    .menubar-panel rel-checkbox {\n      display: block;\n      width: 100%;\n      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-md, 16px);\n      box-sizing: border-box;\n      cursor: pointer;\n    }\n  ";
     createRenderRoot(): this;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -759,31 +812,38 @@ declare global {
     }
 }
 
-type DensityType = "comfortable" | "compact";
-type VariantType = "default" | "icons";
 declare class RelPagination extends LitElement {
+    /** Layout type from Figma: extended (numbered pages), compact (prev/next + page text), count-text (range + nav) */
+    type: "extended" | "compact" | "count-text";
+    /** Controlled current page */
     page?: number;
+    /** Uncontrolled starting page */
     defaultPage: number;
+    /** Total number of pages */
     totalPages: number;
-    siblingCount: number;
-    boundaryCount: number;
+    /** Total items (used with perPage to auto-compute totalPages in count-text mode) */
+    totalItems: number;
+    /** Items per page (count-text mode) */
+    perPage: number;
+    /** Show "Viewing page X of Y" label below extended pagination */
+    showLabel: boolean;
     disabled: boolean;
-    density: DensityType;
-    variant: VariantType;
     hrefTemplate: string;
     ariaLabel: string;
     private currentPage;
     static styles: lit.CSSResult;
     connectedCallback(): void;
-    updated(changedProperties: Map<string, any>): void;
+    updated(changedProperties: Map<string, unknown>): void;
     private get activePage();
-    private generatePageItems;
+    private get computedTotalPages();
+    private generatePageNumbers;
     private handlePageChange;
-    private getHref;
-    private handleKeyDown;
-    private renderPrevIcon;
-    private renderNextIcon;
-    private renderItem;
+    private renderChevronLeft;
+    private renderChevronRight;
+    private renderNavBtn;
+    private renderExtended;
+    private renderCompact;
+    private renderCountText;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -945,21 +1005,101 @@ declare class RelSegmentedButton extends LitElement {
 type SelectState = "default" | "error" | "disabled";
 type SelectSize = "small" | "medium" | "large";
 type SelectBorder = "rounded" | "sharp";
+type SelectLabelStyle = "default" | "floating";
+interface SelectOptionObject {
+    value: string;
+    label?: string;
+    supportingText?: string;
+}
+type SelectOption = string | SelectOptionObject;
 declare class RelSelect extends LitElement {
     label: string;
-    options: string[];
+    labelStyle: SelectLabelStyle;
+    options: SelectOption[];
+    /** Enables multi-select: selected values render as removable chips and options as checkboxes. */
+    multiple: boolean;
+    /** Selected value — single-select mode only. */
     selected: string;
+    /** Selected values — multi-select mode only. */
+    selectedValues: string[];
     state: SelectState;
     supportingText: string;
     size: SelectSize;
     border: SelectBorder;
     leftIcon: string;
     rightIcon: string;
+    placeholder: string;
+    searchPlaceholder: string;
+    selectAllLabel: string;
+    /** Max selected chips shown before collapsing the rest into a "+N" badge. */
+    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;
+    private open;
+    private highlightedIndex;
+    private panelStyle;
+    private searchValue;
+    private internalState;
+    private triggerEl;
+    private searchInputEl;
+    private listboxEl;
+    private uniqueId;
     static styles: lit.CSSResult;
-    connectedCallback(): void;
-    private onChange;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    private get normalizedOptions();
+    /** Options matching the current search text (substring match, case-insensitive). */
+    private get filteredOptions();
+    private get hasValue();
+    /** Icon size scales with the select's own size, matching the trigger. */
+    private get iconSize();
+    /** The search field uses "small" sizing for both small and medium select — only "large" select bumps it to "medium". */
+    private get searchIconSize();
+    private get selectAllStatus();
+    private addGlobalListeners;
+    private removeGlobalListeners;
+    private onOutsidePointerDown;
+    private onPageScroll;
+    private emitChange;
+    private openListbox;
+    private closeListbox;
+    private updatePosition;
+    private selectSingleOption;
+    private toggleMultiOption;
+    private toggleSelectAll;
+    private removeChip;
+    private onTriggerClick;
+    private onTriggerKeyDown;
+    private onSearchInput;
+    private onSearchKeyDown;
+    private handleListNavigation;
+    private renderChips;
     render(): lit_html.TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-select": RelSelect;
+    }
+}
+
+type SkeletonShape = "line" | "circle" | "block";
+type SkeletonAnimation = "pulse" | "shimmer" | "none";
+declare class RelSkeleton extends LitElement {
+    shape: SkeletonShape;
+    lines: number;
+    width: string;
+    height: string;
+    animation: SkeletonAnimation;
+    loaded: boolean;
+    protected updated(changed: Map<string, unknown>): void;
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-skeleton": RelSkeleton;
+    }
+}
 
 type ModalSide = "top" | "bottom" | "center";
 declare class RelModal extends LitElement {
@@ -1120,6 +1260,7 @@ declare class RelTab extends LitElement {
 
 type TextFieldState = "default" | "error" | "disabled";
 type TextFieldSize = "small" | "medium" | "large";
+type TextFieldVariant = "default" | "underline";
 declare class RelTextfield extends LitElement {
     label?: string;
     placeholder: string;
@@ -1131,6 +1272,7 @@ declare class RelTextfield extends LitElement {
     state: TextFieldState;
     size: TextFieldSize;
     floatingLabel: boolean;
+    variant: TextFieldVariant;
     private internalState;
     private _wasError;
     private uniqueId;
@@ -1172,4 +1314,4 @@ declare class RelTooltip extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-export { type BreadcrumbItem, type DrawerCloseReason, type DrawerSide, 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, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, 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 SelectSize, type SelectState, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type ToastType, type TooltipPosition, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle };
+export { type BreadcrumbItem, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, 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, 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 TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle };