@reliability-design/web 1.2.0 → 1.3.1

package/dist/components/rel-toast/rel-toast.ts

@@ -62,7 +62,7 @@ export class RelToast extends LitElement {
     .toast-action {
       background: transparent;
       border: none;
-      color: var(--rel-colors-green-primary);
+      color: inherit;
       font-weight: 600;
       font-size: 0.85rem;
       cursor: pointer;
@@ -103,11 +103,6 @@ export class RelToast extends LitElement {
     }
 
     /* Dark mode overrides */
-    :host-context([data-theme="dark"]) .toast-action,
-    :host-context(.dark) .toast-action {
-      color: var(--rel-colors-green-tertiary);
-    }
-
     :host-context([data-theme="dark"]) .toast.error,
     :host-context(.dark) .toast.error {
       background-color: var(--rel-error-surface-default);

package/dist/components/rel-topbar/rel-topbar-actions.ts

@@ -2,6 +2,10 @@ import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
 import "../../styles/vars-v2.css";
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use plain
+ * `rel-button` elements inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 @customElement("rel-topbar-actions")
 export class RelTopbarActions extends LitElement {
   static styles = css`

package/dist/components/rel-topbar/rel-topbar-brand.ts

@@ -2,6 +2,10 @@ import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "../../styles/vars-v2.css";
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use a plain
+ * `<a>`/logo markup inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 @customElement("rel-topbar-brand")
 export class RelTopbarBrand extends LitElement {
   @property({ type: String }) src: string = "";

package/dist/components/rel-topbar/rel-topbar-dropdown-item.ts

@@ -2,6 +2,10 @@ import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "../../styles/vars-v2.css";
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use `rel-menu`'s
+ * item slots or `rel-popover` content in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 @customElement("rel-topbar-dropdown-item")
 export class RelTopbarDropdownItem extends LitElement {
   @property({ type: String }) label: string = "";

package/dist/components/rel-topbar/rel-topbar-dropdown.ts

@@ -2,6 +2,10 @@ import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
 import "../../styles/vars-v2.css";
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use `rel-menu` or
+ * `rel-popover` for nav dropdowns in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 @customElement("rel-topbar-dropdown")
 export class RelTopbarDropdown extends LitElement {
   static styles = css`

package/dist/components/rel-topbar/rel-topbar-item.ts

@@ -8,6 +8,10 @@ import "@reliability-design/icons/rel-icon";
 /**
  * `rel-topbar-item` — A navigation item within rel-topbar.
  *
+ * @deprecated Part of the deprecated rel-topbar family. Use the "App
+ * Topbar" recipe at /docs/recipes/app-topbar, which composes nav links and
+ * `rel-menu`/`rel-popover` dropdowns directly instead of a dedicated item component.
+ *
  * Renders as an `<a>` when `href` is supplied, otherwise a `<button>`.
  *
  * Slots:

package/dist/components/rel-topbar/rel-topbar-mobile-panel.ts

@@ -2,6 +2,10 @@ import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
 import "../../styles/vars-v2.css";
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use `rel-drawer`
+ * for the mobile nav panel in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 @customElement("rel-topbar-mobile-panel")
 export class RelTopbarMobilePanel extends LitElement {
   static styles = css`

package/dist/components/rel-topbar/rel-topbar-profile.ts

@@ -9,6 +9,9 @@ export type TopbarRewardTier = "gold" | "silver" | "platinum" | "bronze" | "regu
 /**
  * `rel-topbar-profile` — Profile / user tile for the topbar right region.
  *
+ * @deprecated Part of the deprecated rel-topbar family. Compose `rel-avatar`
+ * directly inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ *
  * type="avatar"   Customer avatar with initials circle + optional name/subtitle.
  * type="carrier"  Carrier reward tile with reward-tier badge + name/subtitle.
  */

package/dist/components/rel-topbar/rel-topbar-utilities.ts

@@ -2,6 +2,10 @@ import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
 import "../../styles/vars-v2.css";
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use plain
+ * `rel-button` (icon variant) elements inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 @customElement("rel-topbar-utilities")
 export class RelTopbarUtilities extends LitElement {
   static styles = css`

package/dist/components/rel-topbar/rel-topbar.ts

@@ -15,6 +15,12 @@ export type TopbarForceLayout = "auto" | "desktop" | "tablet" | "mobile";
 /**
  * `rel-topbar` — Application-level top navigation / header shell.
  *
+ * @deprecated This component's fixed slot structure, hardcoded breakpoint,
+ * and built-in overflow logic are too rigid for most real layouts. Use the
+ * "App Topbar" recipe at /docs/recipes/app-topbar instead, composed from
+ * rel-menu/rel-popover, rel-drawer, and rel-button. Still supported, but
+ * will be removed in a future major version.
+ *
  * Slots:
  *   brand        — Logo / wordmark region (left)
  *   (default)    — Primary nav items (rel-topbar-item elements)

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,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>;
 }
 
@@ -65,7 +83,14 @@ declare class RelButton extends LitElement {
     border: "corner-radius" | "small-corner-radius" | "no-corner-radius";
     disabled: boolean;
     ariaLabel: string | null;
+    /** Numeric/overflow text shown in a corner badge (e.g. "3", "999+"). Ignored when badgeDot is set. */
+    badge: string;
+    /** Shows a small corner dot instead of a numbered badge — takes precedence over `badge`. */
+    badgeDot: boolean;
     static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleHostClick;
     private get classes();
     private handleClick;
     render(): lit_html.TemplateResult<1>;
@@ -189,14 +214,28 @@ declare class RelDatePicker extends LitElement {
     label: string | null;
     disabled: boolean;
     required: boolean;
+    readonly: boolean;
+    minDate: string | null;
+    maxDate: string | null;
+    /** @deprecated use minDate */
     min: string | null;
+    /** @deprecated use maxDate */
     max: string | null;
     weekStart: "sun" | "mon";
     locale: string;
     open: boolean;
     closeOnSelect: boolean;
     clearable: boolean;
+    error: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    name?: string;
+    size: "small" | "medium" | "large";
+    variant: "outlined";
+    fullWidth: boolean;
     isDateDisabled?: (date: Date) => boolean;
+    private get minBound();
+    private get maxBound();
     private viewYear;
     private viewMonth;
     private focusedDate;
@@ -246,6 +285,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 +304,7 @@ declare class RelRangePicker extends LitElement {
     static styles: lit.CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    updated(): void;
     private handleClickOutside;
     private handleGlobalKeydown;
     private toggleOpen;
@@ -265,6 +313,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 +337,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 +356,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 +530,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 +543,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;
@@ -519,6 +590,10 @@ declare class RelNavbar extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use a plain
+ * `<a>`/logo markup inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 declare class RelTopbarBrand extends LitElement {
     src: string;
     href: string;
@@ -532,6 +607,10 @@ declare global {
     }
 }
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use plain
+ * `rel-button` elements inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 declare class RelTopbarActions extends LitElement {
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
@@ -542,6 +621,10 @@ declare global {
     }
 }
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use plain
+ * `rel-button` (icon variant) elements inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 declare class RelTopbarUtilities extends LitElement {
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
@@ -552,6 +635,10 @@ declare global {
     }
 }
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use `rel-drawer`
+ * for the mobile nav panel in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 declare class RelTopbarMobilePanel extends LitElement {
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
@@ -562,6 +649,10 @@ declare global {
     }
 }
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use `rel-menu` or
+ * `rel-popover` for nav dropdowns in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 declare class RelTopbarDropdown extends LitElement {
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
@@ -572,6 +663,10 @@ declare global {
     }
 }
 
+/**
+ * @deprecated Part of the deprecated rel-topbar family. Use `rel-menu`'s
+ * item slots or `rel-popover` content in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ */
 declare class RelTopbarDropdownItem extends LitElement {
     label: string;
     href: string;
@@ -591,6 +686,12 @@ type TopbarForceLayout = "auto" | "desktop" | "tablet" | "mobile";
 /**
  * `rel-topbar` — Application-level top navigation / header shell.
  *
+ * @deprecated This component's fixed slot structure, hardcoded breakpoint,
+ * and built-in overflow logic are too rigid for most real layouts. Use the
+ * "App Topbar" recipe at /docs/recipes/app-topbar instead, composed from
+ * rel-menu/rel-popover, rel-drawer, and rel-button. Still supported, but
+ * will be removed in a future major version.
+ *
  * Slots:
  *   brand        — Logo / wordmark region (left)
  *   (default)    — Primary nav items (rel-topbar-item elements)
@@ -640,6 +741,10 @@ declare class RelTopbar extends LitElement {
 /**
  * `rel-topbar-item` — A navigation item within rel-topbar.
  *
+ * @deprecated Part of the deprecated rel-topbar family. Use the "App
+ * Topbar" recipe at /docs/recipes/app-topbar, which composes nav links and
+ * `rel-menu`/`rel-popover` dropdowns directly instead of a dedicated item component.
+ *
  * Renders as an `<a>` when `href` is supplied, otherwise a `<button>`.
  *
  * Slots:
@@ -686,6 +791,9 @@ type TopbarRewardTier = "gold" | "silver" | "platinum" | "bronze" | "regular";
 /**
  * `rel-topbar-profile` — Profile / user tile for the topbar right region.
  *
+ * @deprecated Part of the deprecated rel-topbar family. Compose `rel-avatar`
+ * directly inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ *
  * type="avatar"   Customer avatar with initials circle + optional name/subtitle.
  * type="carrier"  Carrier reward tile with reward-tier badge + name/subtitle.
  */
@@ -759,31 +867,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 +1060,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 {
@@ -1097,12 +1292,15 @@ declare class RelSwitch extends LitElement {
 interface TabItem {
     label: string;
     badge?: number;
+    badgeDot?: boolean;
     disabled?: boolean;
 }
 declare class RelTabItem extends LitElement {
     label: string;
     value: string;
     badge: number;
+    /** Shows a small dot instead of a numbered badge — takes precedence over `badge`. */
+    badgeDot: boolean;
     disabled: boolean;
     render(): lit_html.TemplateResult<1>;
 }
@@ -1120,6 +1318,7 @@ declare class RelTab extends LitElement {
 
 type TextFieldState = "default" | "error" | "disabled";
 type TextFieldSize = "small" | "medium" | "large";
+type TextFieldVariant = "default" | "underline" | "legend";
 declare class RelTextfield extends LitElement {
     label?: string;
     placeholder: string;
@@ -1131,9 +1330,27 @@ declare class RelTextfield extends LitElement {
     state: TextFieldState;
     size: TextFieldSize;
     floatingLabel: boolean;
+    variant: TextFieldVariant;
+    disabled: boolean;
+    required: boolean;
+    multiline: boolean;
+    rows: number;
+    prefixIcon?: string;
+    prefixIconAriaLabel?: string;
+    error: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    readonly: boolean;
+    maxLength?: number;
+    name?: string;
+    fullWidth: boolean;
     private internalState;
     private _wasError;
     private uniqueId;
+    private get isDisabled();
+    private get isError();
+    private get leadingIcon();
+    private get helper();
     static styles: lit.CSSResult;
     connectedCallback(): void;
     private handleFocus;
@@ -1172,4 +1389,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 };