@reliability-design/web 1.1.1 → 1.3.0

package/dist/index.d.mts

@@ -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,9 +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>;
 }
@@ -42,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>;
 }
 
@@ -59,12 +78,15 @@ declare class RelBreadcrumbs extends LitElement {
 
 declare class RelButton extends LitElement {
     variant: "default" | "primary" | "secondary" | "text" | "link" | "icon";
-    tone: "default" | "critical" | "success";
+    tone: "default" | "primary" | "secondary" | "critical" | "success";
     size: "small" | "medium" | "large";
     border: "corner-radius" | "small-corner-radius" | "no-corner-radius";
     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>;
@@ -126,13 +148,19 @@ declare class RelCarousel extends LitElement {
     private autoplayTimer?;
     private animationId?;
     private prefersReducedMotion;
+    private clonesBefore;
+    private _silentJumping;
+    private _ro?;
     static styles: lit.CSSResult;
     connectedCallback(): void;
+    firstUpdated(): void;
     disconnectedCallback(): void;
     private handleSlotChange;
+    private unit;
     private updateTransform;
     private goToPrevious;
     private goToNext;
+    private silentJump;
     private goToSlide;
     private emitChange;
     private startAutoplay;
@@ -229,21 +257,103 @@ declare class RelDatePicker extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+declare class RelRangePicker extends LitElement {
+    from: string;
+    to: string;
+    locale: string;
+    weekStart: "mon" | "sun";
+    minDate: string;
+    maxDate: string;
+    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;
+    private viewYear;
+    private viewMonth;
+    private isSelectingRange;
+    private hoverDate;
+    private triggerButton?;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private handleClickOutside;
+    private handleGlobalKeydown;
+    private toggleOpen;
+    private openPopover;
+    private cancelPopover;
+    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;
+    private isSameDay;
+    private isDateDisabled;
+    private getQuickSelects;
+    private selectQuickSelect;
+    private previousMonth;
+    private nextMonth;
+    private getMonthName;
+    private getWeekdayLabels;
+    private getCalendarDays;
+    private handleDayClick;
+    private handleDayHover;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-range-picker": RelRangePicker;
+    }
+}
+
+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" | "yellow" | "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. */
     avatar?: string;
     removable: boolean;
-    outline: 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 {
@@ -273,7 +383,7 @@ declare global {
     }
 }
 
-type DrawerSide = "bottom" | "left" | "right" | "top";
+type DrawerSide = "bottom" | "left" | "right";
 type DrawerCloseReason = "backdrop" | "escape" | "drag" | "programmatic";
 declare class RelDrawer extends LitElement {
     open: boolean;
@@ -287,7 +397,6 @@ declare class RelDrawer extends LitElement {
     snapThreshold: number;
     maxHeight: string;
     width: string;
-    disabled: boolean;
     title: string;
     description: string;
     private isDragging;
@@ -307,7 +416,6 @@ declare class RelDrawer extends LitElement {
     private handleClose;
     private lockScroll;
     private unlockScroll;
-    private focusPanel;
     private getFocusableElements;
     private handleKeydown;
     private handleOverlayClick;
@@ -318,7 +426,6 @@ declare class RelDrawer extends LitElement {
     private handlePointerUp;
     private getPanelStyle;
     private getOverlayStyle;
-    private hasSlotContent;
     render(): lit_html.TemplateResult<1>;
 }
 declare global {
@@ -333,7 +440,6 @@ declare class RelKbd extends LitElement {
     pill: boolean;
     inset: boolean;
     static styles: lit.CSSResult;
-    private get classes();
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -342,6 +448,7 @@ declare class RelLayout extends LitElement {
     columns: number;
     responsive: boolean;
     static styles: lit.CSSResult;
+    willUpdate(): void;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -359,18 +466,19 @@ declare class RelMenuItem extends LitElement {
     value: string;
     disabled: boolean;
     icon: string;
+    createRenderRoot(): this;
     render(): lit_html.TemplateResult<1>;
 }
 declare class RelMenu extends LitElement {
     type: MenuType;
     items: MenuItem[];
     private focusedIndex;
-    private _menuItems;
-    static styles: lit.CSSResult;
-    private _onSlotChange;
-    private get _effectiveItems();
+    private _items;
+    static readonly _css = "\n    :host {\n      display: inline-block;\n    }\n\n    .rel-menu {\n      position: relative;\n      display: inline-block;\n      background: var(--rel-color-bg-primary);\n      color: var(--rel-color-text-primary);\n      border-radius: var(--rel-borders-radius-border-radius-300);\n      box-shadow: var(--rel-shadows-shadow-300);\n      min-width: 220px;\n      font-family: var(--rel-fontFamilies-primary, sans-serif);\n      font-size: var(--rel-fontSizes-sm);\n      padding: var(--rel-spacing-space-3xs) 0;\n      outline: none;\n      overflow: hidden;\n    }\n\n    .rel-menu:focus-visible,\n    :host(:focus-visible) .rel-menu {\n      outline: 2px solid var(--rel-color-border-focus);\n      outline-offset: 2px;\n    }\n\n    .rel-menu-item {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-space-xs);\n      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);\n      line-height: var(--rel-lineHeights-sm);\n      cursor: pointer;\n      transition: background 0.15s ease, color 0.15s ease;\n      user-select: none;\n    }\n\n    .rel-menu-item:hover {\n      background: var(--rel-color-bg-hover);\n    }\n\n    .rel-menu-item:active {\n      background: var(--rel-color-bg-hover);\n    }\n\n    .rel-menu-item.active {\n      background: var(--rel-color-bg-hover);\n      font-weight: var(--rel-fontWeights-medium);\n    }\n\n    .rel-menu-item.disabled {\n      background-color: transparent;\n      color: var(--rel-color-text-disabled);\n      cursor: not-allowed;\n    }\n\n    .rel-menu-item[data-focused=\"true\"] {\n      outline: 2px solid var(--rel-color-border-focus);\n      outline-offset: -2px;\n    }\n\n    .menu-check-row {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--rel-spacing-space-2xs);\n      width: 100%;\n    }\n\n    .menu-checkbox {\n      width: 16px;\n      height: 16px;\n      cursor: pointer;\n    }\n\n    .menu-checkbox:disabled {\n      cursor: not-allowed;\n    }\n\n    .menu-label {\n      flex: 1 1 auto;\n    }\n\n    .chevron {\n      font-size: var(--rel-fontSizes-lg);\n      opacity: 0.75;\n      transform: translateY(1px);\n    }\n\n    .rel-submenu {\n      position: absolute;\n      top: calc(-1 * var(--rel-spacing-space-3xs));\n      left: calc(100% + var(--rel-spacing-space-2xs));\n      min-width: 200px;\n      background: var(--rel-color-bg-primary);\n      color: var(--rel-color-text-primary);\n      border-radius: var(--rel-borders-radius-border-radius-300);\n      box-shadow: var(--rel-shadows-shadow-300);\n      padding: var(--rel-spacing-space-3xs) 0;\n      visibility: hidden;\n      pointer-events: none;\n      z-index: 20;\n    }\n\n    .rel-submenu.visible {\n      visibility: visible;\n      pointer-events: auto;\n    }\n\n    .rel-submenu .rel-menu-item {\n      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);\n    }\n  ";
+    createRenderRoot(): this;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
     private handleDocumentClick;
     private onItemEnter;
     private onItemLeave;
@@ -382,17 +490,47 @@ declare class RelMenu extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+interface RadioOption {
+    value: string;
+    label: string;
+    supportingText?: string;
+    disabled?: boolean;
+}
+declare class RelRadio extends LitElement {
+    options: RadioOption[];
+    name: string;
+    selectedValue: string | null;
+    disabled: boolean;
+    error: boolean;
+    errorMessage: string;
+    value: string;
+    checked: boolean;
+    private _onChange;
+    private _onTouched;
+    static styles: lit.CSSResult;
+    private onChange;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    writeValue(value: string): void;
+    private get hasSelection();
+    private renderOption;
+    render(): lit_html.TemplateResult<1>;
+}
+
 declare class RelMenubar extends LitElement {
     private menus;
     private openMenuIndex;
     private focusedTriggerIndex;
     private focusedItemIndex;
     private openSubmenuElement;
-    private container;
     private hoverSwitchEnabled;
-    static styles: lit.CSSResult;
+    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      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;
+    private _repositionOpenSubmenu;
+    private _repositionOpenMenu;
     private discoverMenus;
     private handleOutsideClick;
     private closeAllMenus;
@@ -420,59 +558,6 @@ declare class RelMenubarMenu extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-type DensityType$1 = "comfortable" | "compact";
-declare class RelNavMenu extends LitElement {
-    open: string;
-    disabled: boolean;
-    density: DensityType$1;
-    private items;
-    private focusedIndex;
-    private hoverSwitchEnabled;
-    private container;
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private discoverItems;
-    private handleSlotChange;
-    private handleOutsideClick;
-    private handleNavItemClick;
-    private handleNavItemHover;
-    private openPanel;
-    private closePanel;
-    private handleKeyDown;
-    private focusItem;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare class RelNavMenuItem extends LitElement {
-    label: string;
-    href: string;
-    itemId: string;
-    disabled: boolean;
-    icon: string;
-    /** Promoted from @state so rel-nav-menu can read it as a property. */
-    hasContent: boolean;
-    /** Set by rel-nav-menu to open/close this item's panel. */
-    open: boolean;
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    firstUpdated(): void;
-    updated(changed: Map<string, any>): void;
-    private updateHasContent;
-    private handleSlotChange;
-    private positionPanel;
-    private handleTriggerClick;
-    private handleTriggerMouseEnter;
-    get triggerId(): string;
-    get panelId(): string;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare class RelNavMenuPanel extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-
 /**
  * @deprecated rel-navbar is deprecated and will be removed in a future release.
  * Use rel-topbar and its sub-components instead:
@@ -530,6 +615,30 @@ declare global {
     }
 }
 
+declare class RelTopbarDropdown extends LitElement {
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-topbar-dropdown": RelTopbarDropdown;
+    }
+}
+
+declare class RelTopbarDropdownItem extends LitElement {
+    label: string;
+    href: string;
+    active: boolean;
+    static styles: lit.CSSResult;
+    private _handleClick;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-topbar-dropdown-item": RelTopbarDropdownItem;
+    }
+}
+
 type TopbarVariant = "customer" | "carrier";
 type TopbarForceLayout = "auto" | "desktop" | "tablet" | "mobile";
 /**
@@ -564,35 +673,23 @@ declare class RelTopbar extends LitElement {
      * 'auto' respects CSS media queries.
      */
     forceLayout: TopbarForceLayout;
+    private _overflowItems;
+    private _overflowCount;
+    private _overflowItemsData;
+    private _resizeObserver?;
+    private _resizeTimer?;
+    private _measuring;
+    private _lastNavWidth;
     static styles: lit.CSSResult;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private _measureNav;
     private onRouterSlotChange;
     private get layoutClass();
     private handleMenuToggle;
     render(): lit_html.TemplateResult<1>;
 }
 
-declare class RelTopbarDropdown extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "rel-topbar-dropdown": RelTopbarDropdown;
-    }
-}
-
-declare class RelTopbarDropdownItem extends LitElement {
-    label: string;
-    href: string;
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "rel-topbar-dropdown-item": RelTopbarDropdownItem;
-    }
-}
-
 /**
  * `rel-topbar-item` — A navigation item within rel-topbar.
  *
@@ -661,6 +758,7 @@ declare class RelTopbarProfile extends LitElement {
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
     private _renderAvatar;
+    private _avatarBg;
     private _renderCarrier;
 }
 
@@ -684,7 +782,6 @@ declare class RelOtp extends LitElement {
     showSeparator: boolean;
     size: "sm" | "md" | "lg";
     private cells;
-    private focusedIndex;
     private hiddenInput?;
     private isUpdatingFromValue;
     static styles: lit.CSSResult;
@@ -715,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>;
 }
 
@@ -813,31 +917,6 @@ declare class RelProgress extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-interface RadioOption {
-    value: string;
-    label: string;
-    supportingText?: string;
-    disabled?: boolean;
-    error?: boolean;
-}
-declare class RelRadio extends LitElement {
-    options: RadioOption[];
-    name: string;
-    selectedValue: string | null;
-    disabled: boolean;
-    value: string;
-    checked: boolean;
-    private _onChange;
-    private _onTouched;
-    static styles: lit.CSSResult;
-    private onChange;
-    registerOnChange(fn: (value: string) => void): void;
-    registerOnTouched(fn: () => void): void;
-    writeValue(value: string): void;
-    private renderOption;
-    render(): lit_html.TemplateResult<1>;
-}
-
 declare class RelResizableGroup extends LitElement {
     direction: "horizontal" | "vertical";
     private panels;
@@ -926,98 +1005,131 @@ 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;
-    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 SheetSide = "top" | "right" | "bottom" | "left";
-type SheetSize = "sm" | "md" | "lg" | "xl";
-type SheetCloseReason = "trigger" | "close" | "overlay" | "escape" | "api";
-declare class RelSheet extends LitElement {
-    open?: boolean;
-    defaultOpen: boolean;
-    disabled: boolean;
-    modal: boolean;
-    private internalOpen;
+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;
-    connectedCallback(): void;
-    updated(changed: Map<string, unknown>): void;
-    private isControlled;
-    get activeOpen(): boolean;
-    setOpen(next: boolean, reason?: SheetCloseReason): void;
     render(): lit_html.TemplateResult<1>;
 }
-declare class RelSheetTrigger extends LitElement {
-    static styles: lit.CSSResult;
-    private getSheet;
-    private handleClick;
-    render(): lit_html.TemplateResult<1>;
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-skeleton": RelSkeleton;
+    }
 }
-declare class RelSheetContent extends LitElement {
-    side: SheetSide;
-    size: SheetSize;
-    hideOverlay: boolean;
-    closeOnOverlay: boolean;
-    showClose: boolean;
-    private panelElement;
+
+type ModalSide = "top" | "bottom" | "center";
+declare class RelModal extends LitElement {
+    open: boolean;
+    side: ModalSide;
+    title: string;
+    description: string;
+    dismissible: boolean;
+    modal: boolean;
     private overlayElement;
-    private sheet;
     private previousFocus;
     private originalBodyOverflow;
     private originalBodyPaddingRight;
-    private isOpen;
     static styles: lit.CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private findSheet;
-    private handleSheetOpenChange;
+    updated(changed: Map<string, unknown>): void;
     private handleOpen;
     private handleClose;
-    private cleanup;
     private lockScroll;
     private unlockScroll;
-    private focusPanel;
-    private getFocusableElements;
     private handleKeydown;
     private handleOverlayClick;
-    private handleCloseClick;
-    private getSizeValue;
-    private getTitle;
-    private getDescription;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSheetHeader extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSheetFooter extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSheetTitle extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSheetDescription extends LitElement {
-    static styles: lit.CSSResult;
+    private handleCloseButtonClick;
     render(): lit_html.TemplateResult<1>;
 }
-declare class RelSheetClose extends LitElement {
-    static styles: lit.CSSResult;
-    private getSheet;
-    private handleClick;
-    render(): lit_html.TemplateResult<1>;
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-modal": RelModal;
+    }
 }
 
 type SliderType = "continuous" | "discrete";
@@ -1075,7 +1187,7 @@ declare class RelSnackbar extends LitElement {
     private clearDismissTimer;
     private onActionClick;
     private dismiss;
-    private getIcon;
+    private renderIcon;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -1148,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;
@@ -1158,9 +1271,13 @@ declare class RelTextfield extends LitElement {
     supportingText?: string;
     state: TextFieldState;
     size: TextFieldSize;
+    floatingLabel: boolean;
+    variant: TextFieldVariant;
     private internalState;
+    private _wasError;
     private uniqueId;
     static styles: lit.CSSResult;
+    connectedCallback(): void;
     private handleFocus;
     private handleBlur;
     private handleInput;
@@ -1197,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 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, RelNavMenu, RelNavMenuItem, RelNavMenuPanel, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSheet, RelSheetClose, RelSheetContent, RelSheetDescription, RelSheetFooter, RelSheetHeader, RelSheetTitle, RelSheetTrigger, 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 SheetCloseReason, type SheetSide, type SheetSize, 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 };