@reliability-design/web 1.0.6 → 1.2.0

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
+export * from '@reliability-design/icons';
 
 declare class RelAccordion extends LitElement {
     title: string;
@@ -31,12 +32,15 @@ declare class RelAvatar extends LitElement {
     src: string;
     text: string;
     alt: string;
+    bg: string;
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
 }
 
 declare class RelBadge extends LitElement {
     number: string;
+    ariaLabel: string;
+    suffix: string;
     size: "sm" | "md" | "lg";
     variant: "dot" | "number";
     static styles: lit.CSSResult;
@@ -56,10 +60,11 @@ 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;
     private get classes();
     private handleClick;
@@ -108,8 +113,7 @@ declare class RelCarousel extends LitElement {
     showButtons: boolean;
     showDots: boolean;
     orientation: "horizontal" | "vertical";
-    align: "start" | "center" | "end";
-    slidesPerView: number;
+    label: string;
     gap?: number;
     disabled: boolean;
     private slideCount;
@@ -123,13 +127,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;
@@ -153,60 +163,6 @@ declare class RelCardMedia extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-interface SeriesConfig {
-    key: string;
-    label?: string;
-    colorToken?: string;
-}
-declare class RelChart extends LitElement {
-    type: "bar" | "line";
-    height: number;
-    xKey: string;
-    seriesJson: string;
-    dataJson: string;
-    showGrid: boolean;
-    showAxis: boolean;
-    showLegend: boolean;
-    stacked: boolean;
-    formatX: "date" | "string" | "number";
-    locale: string;
-    disabled: boolean;
-    private _data;
-    private _series;
-    get data(): Array<Record<string, unknown>>;
-    set data(value: Array<Record<string, unknown>>);
-    get series(): SeriesConfig[];
-    set series(value: SeriesConfig[]);
-    private chartWidth;
-    private tooltip;
-    private container?;
-    private resizeObserver?;
-    private prefersReducedMotion;
-    private resizeTimeout?;
-    private readonly defaultColors;
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    firstUpdated(): void;
-    updated(changedProperties: Map<string, any>): void;
-    private measureWidth;
-    private getChartData;
-    private getSeriesConfig;
-    private getSeriesColor;
-    private formatXValue;
-    private calculateScales;
-    private handleBarHover;
-    private handlePointHover;
-    private handleMouseLeave;
-    private renderGrid;
-    private renderAxis;
-    private renderBarChart;
-    private renderLineChart;
-    private renderLegend;
-    private renderTooltip;
-    render(): lit_html.TemplateResult<1>;
-}
-
 type CheckboxState = "default" | "error" | "disabled";
 type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
 declare class RelCheckbox extends LitElement {
@@ -214,8 +170,16 @@ declare class RelCheckbox extends LitElement {
     supportingtext: string;
     state: CheckboxState;
     status: CheckboxStatus;
+    value: string;
+    get checked(): boolean;
+    set checked(val: boolean);
+    private _onChange;
+    private _onTouched;
     static styles: lit.CSSResult;
     private toggle;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    writeValue(checked: boolean): void;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -272,14 +236,65 @@ 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";
+    private draftFrom;
+    private draftTo;
+    private draftActivePreset;
+    private viewYear;
+    private viewMonth;
+    private isSelectingRange;
+    private hoverDate;
+    private triggerButton?;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleClickOutside;
+    private handleGlobalKeydown;
+    private toggleOpen;
+    private openPopover;
+    private cancelPopover;
+    private applySelection;
+    private resetDraft;
+    private getTriggerLabel;
+    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;
+    }
+}
+
 declare class RelChip extends LitElement {
     label: string;
-    tone: "default" | "blue" | "yellow" | "red" | "green";
+    tone: "default" | "blue" | "orange" | "red" | "green";
     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;
     static styles: lit.CSSResult;
@@ -301,10 +316,22 @@ declare class RelContainer extends LitElement {
 declare class RelDivider extends LitElement {
     orientation: "horizontal" | "vertical";
     static styles: lit.CSSResult;
+    connectedCallback(): void;
+    updated(): void;
     render(): lit_html.TemplateResult<1>;
 }
 
-type DrawerSide = "bottom" | "left" | "right" | "top";
+declare class RelDrawerFooter extends LitElement {
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-drawer-footer": RelDrawerFooter;
+    }
+}
+
+type DrawerSide = "bottom" | "left" | "right";
 type DrawerCloseReason = "backdrop" | "escape" | "drag" | "programmatic";
 declare class RelDrawer extends LitElement {
     open: boolean;
@@ -318,7 +345,8 @@ declare class RelDrawer extends LitElement {
     snapThreshold: number;
     maxHeight: string;
     width: string;
-    disabled: boolean;
+    title: string;
+    description: string;
     private isDragging;
     private dragOffset;
     private panelElement;
@@ -336,7 +364,6 @@ declare class RelDrawer extends LitElement {
     private handleClose;
     private lockScroll;
     private unlockScroll;
-    private focusPanel;
     private getFocusableElements;
     private handleKeydown;
     private handleOverlayClick;
@@ -347,7 +374,6 @@ declare class RelDrawer extends LitElement {
     private handlePointerUp;
     private getPanelStyle;
     private getOverlayStyle;
-    private hasSlotContent;
     render(): lit_html.TemplateResult<1>;
 }
 declare global {
@@ -362,7 +388,6 @@ declare class RelKbd extends LitElement {
     pill: boolean;
     inset: boolean;
     static styles: lit.CSSResult;
-    private get classes();
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -371,6 +396,7 @@ declare class RelLayout extends LitElement {
     columns: number;
     responsive: boolean;
     static styles: lit.CSSResult;
+    willUpdate(): void;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -383,13 +409,24 @@ interface MenuItem {
     submenu?: MenuItem[];
     open?: boolean;
 }
+declare class RelMenuItem extends LitElement {
+    label: string;
+    value: string;
+    disabled: boolean;
+    icon: string;
+    createRenderRoot(): this;
+    render(): lit_html.TemplateResult<1>;
+}
 declare class RelMenu extends LitElement {
     type: MenuType;
     items: MenuItem[];
     private focusedIndex;
-    static styles: lit.CSSResult;
+    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;
@@ -401,17 +438,46 @@ 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 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    }\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;
@@ -439,60 +505,208 @@ 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;
+/**
+ * @deprecated rel-navbar is deprecated and will be removed in a future release.
+ * Use rel-topbar and its sub-components instead:
+ * rel-topbar, rel-topbar-brand, rel-topbar-actions, rel-topbar-utilities,
+ * rel-topbar-item, rel-topbar-dropdown, rel-topbar-dropdown-item
+ */
+declare class RelNavbar extends LitElement {
+    constructor();
+    sticky: boolean;
+    device: "desktop" | "tablet" | "mobile";
     static styles: lit.CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private discoverItems;
-    private handleSlotChange;
-    private handleOutsideClick;
-    private openPanel;
-    private closePanel;
-    private positionPanel;
-    private handleItemClick;
-    private handleItemMouseEnter;
-    private handleKeyDown;
-    private focusItem;
-    private hasItemContent;
-    private renderDropdownPanel;
-    private getItemContent;
     render(): lit_html.TemplateResult<1>;
 }
 
-declare class RelNavMenuItem extends LitElement {
+declare class RelTopbarBrand extends LitElement {
+    src: string;
+    href: string;
+    label: string;
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-topbar-brand": RelTopbarBrand;
+    }
+}
+
+declare class RelTopbarActions extends LitElement {
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-topbar-actions": RelTopbarActions;
+    }
+}
+
+declare class RelTopbarUtilities extends LitElement {
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-topbar-utilities": RelTopbarUtilities;
+    }
+}
+
+declare class RelTopbarMobilePanel extends LitElement {
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-topbar-mobile-panel": RelTopbarMobilePanel;
+    }
+}
+
+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;
-    itemId: string;
-    disabled: boolean;
-    icon: string;
-    private hasContent;
+    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";
+/**
+ * `rel-topbar` — Application-level top navigation / header shell.
+ *
+ * Slots:
+ *   brand        — Logo / wordmark region (left)
+ *   (default)    — Primary nav items (rel-topbar-item elements)
+ *   actions      — CTA / action buttons (customer) or dark-pill area (carrier)
+ *   utilities    — Utility icon buttons (notifications, search, etc.)
+ *   profile      — rel-topbar-profile tile
+ *   mobile-panel — Collapsed nav panel shown when mobileOpen is true
+ *
+ * Events:
+ *   rel-menu-toggle        — fired when hamburger is clicked  { open: boolean }
+ *   rel-mobile-open-change — alias of rel-menu-toggle for convenience
+ *   rel-nav-select         — bubbled from child rel-topbar-item  { value, label }
+ */
+declare class RelTopbar extends LitElement {
+    /** Visual variant — affects action/profile region styling */
+    variant: TopbarVariant;
+    /** Whether the mobile nav panel is currently open */
+    mobileOpen: boolean;
+    /** Whether to render the hamburger / close toggle button */
+    showMenuToggle: boolean;
+    /** Reduce height to compact (48 px) mode */
+    compact: boolean;
+    /** Stick topbar to top of viewport while scrolling */
+    sticky: boolean;
+    /**
+     * Override the responsive layout for demos / storybook.
+     * '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;
-    connectedCallback(): void;
     firstUpdated(): void;
-    private handleSlotChange;
-    get triggerId(): string;
-    get panelId(): string;
+    disconnectedCallback(): void;
+    private _measureNav;
+    private onRouterSlotChange;
+    private get layoutClass();
+    private handleMenuToggle;
     render(): lit_html.TemplateResult<1>;
 }
 
-declare class RelNavMenuPanel extends LitElement {
+/**
+ * `rel-topbar-item` — A navigation item within rel-topbar.
+ *
+ * Renders as an `<a>` when `href` is supplied, otherwise a `<button>`.
+ *
+ * Slots:
+ *   (default)  — Label text / icon (overrides `label` property)
+ *   prefix     — Icon/content before the label
+ *   suffix     — Icon/content after the label (e.g. badge)
+ *   dropdown   — Expandable panel content shown below the item
+ *
+ * Events:
+ *   rel-select — fired when a non-disabled, non-expandable item is activated
+ *   rel-toggle — fired when an expandable item is opened/closed  { open: boolean }
+ */
+declare class RelTopbarItem extends LitElement {
+    /** Accessible label — also shown as text when no default slot content */
+    label?: string;
+    /** Navigation href — renders an anchor element when set */
+    href?: string;
+    /** Marks this item as the current/active page */
+    active: boolean;
+    /** Prevents interaction */
+    disabled: boolean;
+    /** Shows a chevron and enables dropdown panel */
+    expandable: boolean;
+    /** Controlled open state of the dropdown panel */
+    open: boolean;
+    /** Optional string value forwarded in rel-select / rel-toggle events */
+    value?: string;
+    /** @internal tracks whether dropdown slot has content */
+    private _hasDropdown;
     static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleOutsideClick;
+    private _handleDocKeydown;
+    private _setOpen;
+    private _handleTriggerClick;
+    private _routeSlots;
+    private _handleDropdownSlotChange;
     render(): lit_html.TemplateResult<1>;
 }
 
-declare class RelNavbar extends LitElement {
-    sticky: boolean;
-    device: "desktop" | "tablet" | "mobile";
+type TopbarProfileType = "avatar" | "carrier";
+type TopbarRewardTier = "gold" | "silver" | "platinum" | "bronze" | "regular";
+/**
+ * `rel-topbar-profile` — Profile / user tile for the topbar right region.
+ *
+ * type="avatar"   Customer avatar with initials circle + optional name/subtitle.
+ * type="carrier"  Carrier reward tile with reward-tier badge + name/subtitle.
+ */
+declare class RelTopbarProfile extends LitElement {
+    /** Visual mode */
+    type: TopbarProfileType;
+    /** One or two initials shown in the avatar circle */
+    initials?: string;
+    /** Primary display name */
+    name?: string;
+    /** Secondary line (role, plan, etc.) */
+    subtitle?: string;
+    /** Reward tier — only meaningful when type="carrier" */
+    reward: TopbarRewardTier;
+    /** Compact mode — avatar only, no text */
+    compact: boolean;
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
+    private _renderAvatar;
+    private _avatarBg;
+    private _renderCarrier;
 }
 
 type OtpType = "numeric" | "alphanumeric";
@@ -515,7 +729,6 @@ declare class RelOtp extends LitElement {
     showSeparator: boolean;
     size: "sm" | "md" | "lg";
     private cells;
-    private focusedIndex;
     private hiddenInput?;
     private isUpdatingFromValue;
     static styles: lit.CSSResult;
@@ -566,6 +779,7 @@ declare class RelPagination extends LitElement {
     private get activePage();
     private generatePageItems;
     private handlePageChange;
+    private getHref;
     private handleKeyDown;
     private renderPrevIcon;
     private renderNextIcon;
@@ -591,6 +805,7 @@ declare class RelPopover extends LitElement {
     private contentWrapper;
     private triggerEl;
     private returnFocusEl;
+    private uniqueId;
     static styles: lit.CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -611,6 +826,7 @@ declare class RelPopover extends LitElement {
     private trapFocusLoop;
     private getFocusable;
     private updatePosition;
+    private onTriggerSlotChange;
     private applyTriggerAria;
     render(): lit_html.TemplateResult<1>;
 }
@@ -641,55 +857,6 @@ declare class RelProgress extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-interface QuoteFormData {
-    pickupLocation: string;
-    dropoffLocation: string;
-    serviceLevel: "standard" | "guaranteed";
-    originType: "commercial" | "residential";
-    destinationType: "commercial" | "residential";
-    loadingRequirements: string;
-    deliveryRequirements: string;
-    loadingLimitedAccessType: string;
-    deliveryLimitedAccessType: string;
-    pickupDate: string;
-    isHazmat: boolean;
-    commodity: string;
-    commodityDescription: string;
-    handlingUnits: number;
-    handlingType: string;
-    length: number;
-    width: number;
-    height: number;
-    totalWeight: number;
-    class: string;
-    insuredValue: number;
-    nmfcNumber: string;
-}
-declare class RelQuotePage extends LitElement {
-    private formData;
-    static styles: lit.CSSResult;
-    private updateField;
-    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;
-    static styles: lit.CSSResult;
-    private onChange;
-    private renderOption;
-    render(): lit_html.TemplateResult<1>;
-}
-
 declare class RelResizableGroup extends LitElement {
     direction: "horizontal" | "vertical";
     private panels;
@@ -789,227 +956,40 @@ declare class RelSelect extends LitElement {
     leftIcon: string;
     rightIcon: string;
     static styles: lit.CSSResult;
+    connectedCallback(): void;
     private onChange;
     render(): lit_html.TemplateResult<1>;
 }
 
-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;
+type ModalSide = "top" | "bottom" | "center";
+declare class RelModal extends LitElement {
+    open: boolean;
+    side: ModalSide;
+    title: string;
+    description: string;
+    dismissible: boolean;
     modal: boolean;
-    private internalOpen;
-    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 class RelSheetContent extends LitElement {
-    side: SheetSide;
-    size: SheetSize;
-    hideOverlay: boolean;
-    closeOnOverlay: boolean;
-    showClose: boolean;
-    private panelElement;
     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;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSheetClose extends LitElement {
-    static styles: lit.CSSResult;
-    private getSheet;
-    private handleClick;
-    render(): lit_html.TemplateResult<1>;
-}
-
-type SidebarVariant = "sidebar" | "floating" | "inset";
-type SidebarSide = "left" | "right";
-type SidebarCollapsible = "offcanvas" | "icon" | "none";
-type SidebarWidth = "sm" | "md" | "lg";
-type SidebarChangeReason = "trigger" | "rail" | "overlay" | "escape" | "shortcut" | "api";
-declare class RelSidebarProvider extends LitElement {
-    open?: boolean;
-    defaultOpen: boolean;
-    collapsed?: boolean;
-    defaultCollapsed: boolean;
-    variant: SidebarVariant;
-    side: SidebarSide;
-    collapsible: SidebarCollapsible;
-    width: SidebarWidth;
-    persistKey: string;
-    keyboardShortcut: boolean;
-    disablePersist: boolean;
-    disableOverlayClose: boolean;
-    private internalOpen;
-    private internalCollapsed;
-    isMobile: boolean;
-    private mediaQuery;
-    private isInitialized;
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changed: Map<string, unknown>): void;
-    private isOpenControlled;
-    private isCollapsedControlled;
-    get activeOpen(): boolean;
-    get activeCollapsed(): boolean;
-    private setupMediaQuery;
-    private handleMediaChange;
-    private isOffcanvasMode;
-    private loadInitialState;
-    private getPersistedState;
-    private loadPersistedState;
-    private persistState;
-    private handleKeyDown;
-    setOpen(next: boolean, reason?: SidebarChangeReason): void;
-    setCollapsed(next: boolean, reason?: SidebarChangeReason): void;
-    private dispatchChangeEvent;
-    private notifyStateChange;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSidebar extends LitElement {
-    inset: boolean;
-    private isOpen;
-    private isCollapsed;
-    private isMobile;
-    private side;
-    private variant;
-    private collapsible;
-    private width;
-    private containerElement;
-    private provider;
-    private triggerElement;
-    private originalBodyOverflow;
-    private originalBodyPaddingRight;
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private findProvider;
-    private syncState;
-    private handleStateChange;
-    private isOffcanvasMode;
-    private lockScroll;
-    private unlockScroll;
-    private setupFocusTrap;
-    private removeFocusTrap;
-    private getFocusableElements;
-    private handleKeydown;
-    private handleOverlayClick;
-    private cleanup;
-    private getWidthValue;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSidebarTrigger extends LitElement {
-    private isOpen;
-    private isCollapsed;
-    private provider;
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private findProvider;
-    private syncState;
-    private handleStateChange;
-    private handleClick;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSidebarHeader extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSidebarContent extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSidebarFooter extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSidebarGroup extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSidebarGroupLabel extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSidebarGroupContent extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSidebarMenu extends LitElement {
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private handleKeyDown;
-    render(): lit_html.TemplateResult<1>;
-}
-declare class RelSidebarMenuItem extends LitElement {
-    static styles: lit.CSSResult;
+    private handleCloseButtonClick;
     render(): lit_html.TemplateResult<1>;
 }
-declare class RelSidebarMenuButton extends LitElement {
-    active: boolean;
-    disabled: boolean;
-    tooltip: string;
-    private isCollapsed;
-    private provider;
-    static styles: lit.CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private findProvider;
-    private syncState;
-    private handleStateChange;
-    render(): lit_html.TemplateResult<1>;
+declare global {
+    interface HTMLElementTagNameMap {
+        "rel-modal": RelModal;
+    }
 }
 
 type SliderType = "continuous" | "discrete";
@@ -1025,6 +1005,8 @@ declare class RelSlider extends LitElement {
     showBubble: boolean;
     value: number;
     private ticks;
+    private _onChange;
+    private _onTouched;
     static styles: lit.CSSResult;
     connectedCallback(): void;
     updated(changedProperties: Map<string, any>): void;
@@ -1033,6 +1015,9 @@ declare class RelSlider extends LitElement {
     private getTickLeftPct;
     private isTickActive;
     private onInput;
+    registerOnChange(fn: (value: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    writeValue(value: number): void;
     private updateActiveWidth;
     private renderThumbContainer;
     private renderTicks;
@@ -1050,17 +1035,19 @@ declare class RelSnackbar extends LitElement {
     lines: SnackbarLines;
     duration: number;
     type: SnackbarType;
+    show: boolean;
     private visible;
-    private timeout;
+    private _dismissTimer;
     static styles: lit.CSSResult;
     connectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
     updated(changed: Map<string, unknown>): void;
     disconnectedCallback(): void;
     private setAutoDismiss;
-    private clearTimeout;
+    private clearDismissTimer;
     private onActionClick;
     private dismiss;
-    private getIcon;
+    private renderIcon;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -1090,10 +1077,16 @@ declare class RelStepper extends LitElement {
 declare class RelSwitch extends LitElement {
     checked: boolean;
     disabled: boolean;
+    value: string;
+    private _onChange;
+    private _onTouched;
     private isFocused;
     private isPressed;
     static styles: lit.CSSResult;
     private toggle;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    writeValue(checked: boolean): void;
     private handleFocus;
     private handleBlur;
     private handleMouseDown;
@@ -1106,64 +1099,26 @@ interface TabItem {
     badge?: number;
     disabled?: boolean;
 }
+declare class RelTabItem extends LitElement {
+    label: string;
+    value: string;
+    badge: number;
+    disabled: boolean;
+    render(): lit_html.TemplateResult<1>;
+}
 declare class RelTab extends LitElement {
     tabs: TabItem[];
     activeIndex: number;
+    private _tabItems;
     static styles: lit.CSSResult;
+    private _onSlotChange;
+    private get _effectiveTabs();
     private selectTab;
     private onKeyDown;
     render(): lit_html.TemplateResult<1>;
 }
 
-declare class RelTable extends LitElement {
-    bordered: boolean;
-    compact: boolean;
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare class RelTableHeader extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare class RelTableBody extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare class RelTableFooter extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare class RelTableRow extends LitElement {
-    selected: boolean;
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare class RelTableHead extends LitElement {
-    align: "left" | "center" | "right";
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare class RelTableCell extends LitElement {
-    align: "left" | "center" | "right";
-    colspan?: number;
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-    updated(changedProperties: Map<string, any>): void;
-    connectedCallback(): void;
-}
-
-declare class RelTableCaption extends LitElement {
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
-
-type TextFieldState = "default" | "focused" | "error" | "disabled";
+type TextFieldState = "default" | "error" | "disabled";
 type TextFieldSize = "small" | "medium" | "large";
 declare class RelTextfield extends LitElement {
     label?: string;
@@ -1175,9 +1130,12 @@ declare class RelTextfield extends LitElement {
     supportingText?: string;
     state: TextFieldState;
     size: TextFieldSize;
+    floatingLabel: boolean;
     private internalState;
+    private _wasError;
+    private uniqueId;
     static styles: lit.CSSResult;
-    private get currentState();
+    connectedCallback(): void;
     private handleFocus;
     private handleBlur;
     private handleInput;
@@ -1190,10 +1148,13 @@ declare class RelToast extends LitElement {
     type: ToastType;
     actionLabel?: string;
     duration: number;
+    show: boolean;
     private visible;
-    private timeoutId?;
+    private _dismissTimer;
     static styles: lit.CSSResult;
-    show(): void;
+    willUpdate(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    open(): void;
     close(): void;
     private handleActionClick;
     render(): lit_html.TemplateResult<1>;
@@ -1204,8 +1165,11 @@ declare class RelTooltip extends LitElement {
     text: string;
     position: TooltipPosition;
     showTail: boolean;
+    private uniqueId;
     static styles: lit.CSSResult;
+    firstUpdated(): void;
+    private linkTrigger;
     render(): lit_html.TemplateResult<1>;
 }
 
-export { type BreadcrumbItem, type DrawerCloseReason, type DrawerSide, type MenuItem, type MenuType, type Orientation, type OtpType, type ProgressMode, type QuoteFormData, type RadioOption, RelAccordion, RelAlert, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelChart, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelKbd, RelLayout, RelMenu, RelMenubar, RelMenubarMenu, RelNavMenu, RelNavMenuItem, RelNavMenuPanel, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelQuotePage, RelRadio, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSheet, RelSheetClose, RelSheetContent, RelSheetDescription, RelSheetFooter, RelSheetHeader, RelSheetTitle, RelSheetTrigger, RelSidebar, RelSidebarContent, RelSidebarFooter, RelSidebarGroup, RelSidebarGroupContent, RelSidebarGroupLabel, RelSidebarHeader, RelSidebarMenu, RelSidebarMenuButton, RelSidebarMenuItem, RelSidebarProvider, RelSidebarTrigger, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTable, RelTableBody, RelTableCaption, RelTableCell, RelTableFooter, RelTableHead, RelTableHeader, RelTableRow, RelTextfield, RelToast, RelTooltip, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectSize, type SelectState, type SheetCloseReason, type SheetSide, type SheetSize, type SidebarChangeReason, type SidebarCollapsible, type SidebarSide, type SidebarVariant, type SidebarWidth, 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 TrackStyle };
+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 };