@reliability-design/web 1.3.0 → 1.4.0

package/dist/index.d.ts

@@ -8,6 +8,8 @@ declare class RelAccordion extends LitElement {
     open: boolean;
     size: "md" | "sm";
     type: "default" | "action";
+    /** Figma "Style" axis — named appearance because `style` collides with the HTML style attribute. */
+    appearance: "shadow" | "plain";
     static styles: lit.CSSResult;
     private toggle;
     render(): lit_html.TemplateResult<1>;
@@ -15,6 +17,8 @@ declare class RelAccordion extends LitElement {
 
 declare class RelAlert extends LitElement {
     type: "info" | "success" | "warning" | "error" | "neutral";
+    /** Visual treatment (Figma "Style"): solid | subtle | outline. "filled" is a deprecated alias of solid. */
+    appearance: "solid" | "subtle" | "outline" | "filled";
     message1: string;
     message2?: string;
     urlText?: string;
@@ -23,7 +27,7 @@ declare class RelAlert extends LitElement {
     dismissed: boolean;
     static styles: lit.CSSResult;
     private dismissAlert;
-    private get iconSvg();
+    private get iconTemplate();
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -44,7 +48,7 @@ declare class RelBadge extends LitElement {
     number: string;
     ariaLabel: string;
     suffix: string;
-    size: "sm" | "md" | "lg";
+    size: "sm" | "md" | "lg" | "xl";
     variant: "dot" | "number";
     /**
      * Direct CSS color override for the badge background. Accepts any valid
@@ -76,17 +80,43 @@ declare class RelBreadcrumbs extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+/**
+ * Style axis. Canonical values are the historical ones; "outline"/"ghost" are
+ * accepted Figma-vocabulary aliases for "secondary"/"text". "static" is the
+ * Figma Style=Static treatment (transparent, static-light label — for use on
+ * colored/dark surfaces). Legacy "icon" is the pre-2.0 collapsed icon-button
+ * variant and keeps its exact behavior; prefer icon-only + a style instead.
+ */
+type ButtonVariant = "default" | "primary" | "secondary" | "text" | "link" | "icon" | "static" | "outline" | "ghost";
+/** Tone axis. "neutral"/"brand"/"danger" are Figma-vocabulary aliases. */
+type ButtonTone = "default" | "primary" | "secondary" | "critical" | "success" | "neutral" | "brand" | "danger";
 declare class RelButton extends LitElement {
-    variant: "default" | "primary" | "secondary" | "text" | "link" | "icon";
-    tone: "default" | "primary" | "secondary" | "critical" | "success";
+    variant: ButtonVariant;
+    tone: ButtonTone;
+    /**
+     * Figma "Type=Icon Only" as an independent axis: a square button of the
+     * current style/tone. Unlike legacy variant="icon", this composes with
+     * every style (outline/ghost/link included).
+     */
+    iconOnly: boolean;
+    /** Figma "State=Loading": shows a spinner, blocks interaction. */
+    loading: boolean;
     size: "small" | "medium" | "large";
     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;
+    /** Style axis with Figma-vocabulary aliases folded onto canonical values. */
+    private get styleVariant();
+    /** Tone axis with Figma-vocabulary aliases folded onto canonical values. */
+    private get effectiveTone();
     private get classes();
     private handleClick;
     render(): lit_html.TemplateResult<1>;
@@ -121,6 +151,12 @@ declare class RelCalendar extends LitElement {
 }
 
 declare class RelCard extends LitElement {
+    /**
+     * Figma "Type" axis: custom (default) renders slotted content with card
+     * padding; media adds a flush media region (slot name="media") above the
+     * content — pair it with <rel-card-media>.
+     */
+    type: "custom" | "media";
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
 }
@@ -133,6 +169,13 @@ declare class RelCarousel extends LitElement {
     pauseOnHover: boolean;
     showButtons: boolean;
     showDots: boolean;
+    /**
+     * Figma "Type" axis. When set it drives which controls render:
+     * default = content only · only-indicators = dots · side-arrows = overlaid
+     * arrows + dots · bottom-arrows = dots flanked by arrows below the slide.
+     * When unset, the legacy show-buttons/show-dots booleans apply unchanged.
+     */
+    type?: "default" | "only-indicators" | "side-arrows" | "bottom-arrows";
     orientation: "horizontal" | "vertical";
     label: string;
     gap?: number;
@@ -156,6 +199,9 @@ declare class RelCarousel extends LitElement {
     firstUpdated(): void;
     disconnectedCallback(): void;
     private handleSlotChange;
+    private get vertical();
+    /** Translate along the orientation axis. */
+    private axisTransform;
     private unit;
     private updateTransform;
     private goToPrevious;
@@ -172,6 +218,10 @@ declare class RelCarousel extends LitElement {
     private handleMouseEnter;
     private handleMouseLeave;
     updated(changedProperties: Map<string, any>): void;
+    /** Where nav arrows render, honouring the Figma type when set. */
+    private get buttonPlacement();
+    private get dotsVisible();
+    private renderNavButton;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -210,14 +260,35 @@ 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;
+    displayFormat: string | null;
+    /**
+     * Full control over the selected-value display; wins over `displayFormat`.
+     * Reactive (attribute:false) so assigning it after render re-renders the
+     * trigger — frameworks set callbacks as properties post-creation.
+     */
+    formatDate?: (date: Date) => 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;
@@ -357,7 +428,7 @@ declare global {
 }
 
 declare class RelContainer extends LitElement {
-    padding: "sm" | "md" | "lg";
+    padding: "sm" | "md" | "lg" | "xl";
     shadow: boolean;
     background: "light" | "white" | "none";
     static styles: lit.CSSResult;
@@ -442,6 +513,20 @@ declare class RelKbd extends LitElement {
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
 }
+/**
+ * Multi-key shortcut (Figma Kbd Items=1/2/3/4): renders one <rel-kbd> per
+ * entry in `items` with "+" separators between them. Slotted <rel-kbd>
+ * children may be used instead of the items array.
+ *
+ * <rel-kbd-group .items=${["Ctrl", "Shift", "P"]} size="md"></rel-kbd-group>
+ */
+declare class RelKbdGroup extends LitElement {
+    items: string[];
+    size: "sm" | "md" | "lg";
+    variant: "default" | "muted";
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
 
 declare class RelLayout extends LitElement {
     gap: string;
@@ -452,7 +537,34 @@ declare class RelLayout extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-type MenuType = "default" | "checkbox" | "arrow";
+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>;
+}
+
+type MenuType = "default" | "checkbox" | "arrow" | "select-option" | "fixed" | "fit";
 interface MenuItem {
     label: string;
     active?: boolean;
@@ -474,49 +586,23 @@ declare class RelMenu extends LitElement {
     items: MenuItem[];
     private focusedIndex;
     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  ";
+    static readonly _css = "\n    :host {\n      color: var(--rel-text-default);\n      display: inline-block;\n    }\n\n    .rel-menu {\n      position: relative;\n      display: inline-block;\n      background: var(--rel-bg-neutral);\n      color: var(--rel-text-default);\n      border-radius: var(--rel-border-radius-md);\n      box-shadow: var(--rel-shadows-shadow-300);\n      min-width: 220px;\n      /* No vertical padding: items fill edge-to-edge so a first/last-item hover\n         reaches the menu's top/bottom. NOT overflow:hidden \u2014 that clips the\n         type=arrow flyout (position:absolute at left:100%). Instead the first\n         and last items carry the outer corner radius so hover backgrounds clip\n         to the rounded shape without any overflow. */\n      padding: 0;\n      outline: none;\n      overflow: visible;\n      font-family: var(--rel-body-lg-regular-font-family);\n      font-weight: var(--rel-body-lg-regular-font-weight);\n      font-size: var(--rel-body-lg-regular-font-size);\n      line-height: var(--rel-body-lg-regular-line-height);\n      letter-spacing: var(--rel-body-lg-regular-letter-spacing);\n    }\n\n    .rel-menu:focus-visible,\n    :host(:focus-visible) .rel-menu {\n      outline: 2px solid var(--rel-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-xs);\n      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);\n      line-height: var(--rel-body-sm-regular-line-height);\n      cursor: pointer;\n      transition: background 0.15s ease, color 0.15s ease;\n      user-select: none;\n    }\n\n    /* First/last items carry the menu's outer radius so their hover fill clips\n       to the rounded corners (replaces the removed overflow:hidden). */\n    .rel-menu > .rel-menu-item:first-child {\n      border-top-left-radius: var(--rel-border-radius-md);\n      border-top-right-radius: var(--rel-border-radius-md);\n    }\n\n    .rel-menu > .rel-menu-item:last-child {\n      border-bottom-left-radius: var(--rel-border-radius-md);\n      border-bottom-right-radius: var(--rel-border-radius-md);\n    }\n\n    .rel-menu-item:hover {\n      background: var(--rel-bg-neutral-elevated-1);\n    }\n\n    .rel-menu-item:active {\n      background: var(--rel-bg-neutral-elevated-1);\n    }\n\n    .rel-menu-item.active {\n      background: var(--rel-bg-neutral-elevated-2);\n      font-weight: var(--rel-body-lg-medium-font-weight);\n    }\n\n    .rel-menu-item.disabled {\n      background-color: transparent;\n      color: var(--rel-text-disabled);\n      /* Keep the item pointer-interactive so cursor:not-allowed actually\n         renders; clicks are already neutralised by the item.disabled guard in\n         onItemClick/onItemEnter. pointer-events:none here would make the row\n         transparent to the pointer and suppress the cursor. */\n      cursor: not-allowed;\n    }\n\n    .rel-menu-item[data-focused=\"true\"] {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: -2px;\n    }\n\n    /* Width modes (Figma Type=Fixed / Type=Fit) */\n    .rel-menu.fixed {\n      width: var(--rel-menu-width, 300px);\n      min-width: 0;\n      box-sizing: border-box;\n    }\n\n    .rel-menu.fit {\n      min-width: 0;\n      width: max-content;\n    }\n\n    /* Checkbox (Type=Checkbox) / radio (Type=Select Option) rows render the real\n       rel-checkbox / rel-radio. pointer-events:none keeps the whole row the click\n       target so onItemClick stays the single source of truth. */\n    .menu-control {\n      pointer-events: none;\n      width: 100%;\n    }\n\n    .menu-label {\n      flex: 1 1 auto;\n    }\n\n    /* Submenu affordance \u2014 same rel-icon chevron the menubar uses. */\n    .submenu-chevron {\n      margin-left: auto;\n      display: inline-flex;\n      align-items: center;\n      opacity: 0.6;\n      pointer-events: none;\n    }\n\n    /* Shortcut / hint text (Figma body-sm-regular, caption tone) */\n    .menu-shortcut,\n    ::slotted([slot=\"shortcut\"]) {\n      font-family: var(--rel-body-sm-regular-font-family);\n      font-weight: var(--rel-body-sm-regular-font-weight);\n      font-size: var(--rel-body-sm-regular-font-size);\n      line-height: var(--rel-body-sm-regular-line-height);\n      letter-spacing: var(--rel-body-sm-regular-letter-spacing);\n      color: var(--rel-text-caption);\n      margin-left: auto;\n      padding-left: var(--rel-spacing-md);\n    }\n\n    \n    .rel-submenu {\n      border: 1px solid var(--rel-border-subtle);\n      position: absolute;\n      top: calc(-1 * var(--rel-spacing-3xs));\n      /* flush against the trigger (no gap) so moving the pointer into the flyout\n         never crosses a dead zone that would fire the trigger's mouseleave */\n      left: 100%;\n      min-width: 200px;\n      background: var(--rel-bg-neutral);\n      color: var(--rel-text-default);\n      border-radius: var(--rel-border-radius-md);\n      box-shadow: var(--rel-shadows-shadow-300);\n      /* padding:0 + overflow:hidden \u2014 safe here (a submenu has no further nested\n         flyout to clip) \u2014 so sub-item hovers fill fully and clip to the corners */\n      padding: 0;\n      overflow: hidden;\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-xs) var(--rel-spacing-sm);\n    }\n  ";
     createRenderRoot(): this;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: Map<string, unknown>): void;
+    /** Index of a submenu locked open by a click (survives hover-out). -1 = none. */
+    private lockedIndex;
     private handleDocumentClick;
     private onItemEnter;
     private onItemLeave;
     private onItemClick;
     private onSubClick;
-    private toggleCheckbox;
     private onKeydown;
     private renderMenuItem;
     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;
@@ -525,7 +611,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      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  ";
+    static readonly _css = "\n    /* This component renders into LIGHT DOM (createRenderRoot returns this), so\n       :host / <slot> don't work here \u2014 the raw <rel-menubar-menu> definitions\n       are data holders that must be hidden with a plain selector. Relying on the\n       global rel-menubar-menu.css is not enough: it can't cross a consumer's\n       shadow boundary AND it's a no-op in the tsup-built package (css:\"copy\"). */\n    rel-menubar {\n      color: var(--rel-text-default);\n      display: block;\n    }\n\n    rel-menubar-menu {\n      display: none;\n    }\n\n    .menubar-container {\n      display: flex;\n      align-items: stretch;\n      background: var(--rel-bg-surface-elevated);\n      border: var(--rel-stroke-sm) solid var(--rel-border-default);\n      border-radius: var(--rel-border-radius-sm);\n      overflow: hidden;\n      padding: 0;\n      gap: var(--rel-spacing-3xs);\n      height: 40px;\n      width: fit-content;\n      font-family: var(--rel-body-sm-regular-font-family);\n      font-weight: var(--rel-body-sm-regular-font-weight);\n      font-size: var(--rel-body-sm-regular-font-size);\n      line-height: var(--rel-body-sm-regular-line-height);\n      letter-spacing: var(--rel-body-sm-regular-letter-spacing);\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-sm);\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      font-family: inherit;\n      font-size: inherit;\n      color: var(--rel-text-label);\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-bg-neutral-elevated-2);\n    }\n\n    .menubar-trigger:focus-visible {\n      outline: 2px solid var(--rel-border-focus);\n      outline-offset: 2px;\n    }\n\n    .menubar-panel {\n      position: fixed;\n      min-width: 220px;\n      background: var(--rel-bg-surface);\n      border: var(--rel-stroke-sm) solid var(--rel-border-default);\n      border-radius: var(--rel-border-radius-sm);\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-sm);\n      padding: var(--rel-spacing-xs) var(--rel-spacing-md);\n      cursor: pointer;\n      transition: background 0.15s ease;\n      user-select: none;\n      color: var(--rel-text-label);\n      line-height: var(--rel-body-sm-regular-line-height);\n    }\n\n    .menu-item:hover,\n    .menu-item.focused {\n      background: var(--rel-bg-neutral-elevated-2);\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-stroke-sm);\n      background: var(--rel-border-default);\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-bg-surface);\n      border: var(--rel-stroke-sm) solid var(--rel-border-default);\n      border-radius: var(--rel-border-radius-sm);\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      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: var(--rel-spacing-3xs);\n      font-family: var(--rel-body-xs-regular-font-family);\n      font-weight: var(--rel-body-xs-regular-font-weight);\n      font-size: var(--rel-body-xs-regular-font-size);\n      line-height: var(--rel-body-xs-regular-line-height);\n      letter-spacing: var(--rel-body-xs-regular-letter-spacing);\n    }\n\n    .menubar-panel rel-checkbox {\n      display: block;\n      width: 100%;\n      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-md, 16px);\n      box-sizing: border-box;\n      cursor: pointer;\n    }\n  ";
     createRenderRoot(): this;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -572,6 +658,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;
@@ -585,6 +675,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>;
@@ -595,6 +689,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>;
@@ -605,6 +703,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>;
@@ -615,6 +717,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>;
@@ -625,6 +731,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;
@@ -644,6 +754,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)
@@ -693,6 +809,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:
@@ -739,6 +859,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.
  */
@@ -898,6 +1021,8 @@ declare global {
 
 declare class RelPopoverContent extends LitElement {
     ariaLabel: string;
+    /** Figma Size axis (S/M/L): panel padding 12/16/20px. */
+    size: "sm" | "md" | "lg";
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
 }
@@ -1109,6 +1234,11 @@ declare class RelModal extends LitElement {
     description: string;
     dismissible: boolean;
     modal: boolean;
+    /**
+     * Figma "Breakpoint" axis. responsive (default) collapses to a full-width
+     * bottom sheet below 480px; web keeps the fixed desktop panel at every size.
+     */
+    breakpoint: "responsive" | "web";
     private overlayElement;
     private previousFocus;
     private originalBodyOverflow;
@@ -1132,10 +1262,16 @@ declare global {
     }
 }
 
-type SliderType = "continuous" | "discrete";
+/**
+ * "continuous"/"discrete" are the legacy tick-mode values; Figma's Type axis
+ * adds "default" (alias of continuous) and "range" (dual-thumb interval).
+ */
+type SliderType = "continuous" | "discrete" | "default" | "range";
 type TrackStyle = "solid" | "dotted";
 declare class RelSlider extends LitElement {
     type: SliderType;
+    /** Figma Size axis (S/M/L): scales track, thumb and ticks. */
+    size: "sm" | "md" | "lg";
     min: number;
     max: number;
     step: number;
@@ -1144,13 +1280,26 @@ declare class RelSlider extends LitElement {
     showTickLabels: boolean;
     showBubble: boolean;
     value: number;
+    /** Upper value when type="range" (attribute value-end). */
+    valueEnd: number;
     private ticks;
     private _onChange;
     private _onTouched;
     static styles: lit.CSSResult;
     connectedCallback(): void;
     updated(changedProperties: Map<string, any>): void;
+    private get isRange();
     private get percentage();
+    private get percentageEnd();
+    private dragThumb;
+    private valueFromPointer;
+    private onRangePointerDown;
+    private onRangePointerMove;
+    private onRangePointerUp;
+    private applyRangeValue;
+    private emitRangeChange;
+    private onRangeInputStart;
+    private onRangeInputEnd;
     private setupTicks;
     private getTickLeftPct;
     private isTickActive;
@@ -1195,6 +1344,10 @@ type StepStatus = "done" | "progress" | "disabled";
 type TextAlign = "right" | "below";
 type Orientation = "horizontal" | "vertical";
 type StepperSize = "small" | "large";
+/** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
+type StepperType = "default" | "dot" | "number" | "icon";
+/** Figma "Typel": label placement relative to the indicator. */
+type LabelPlacement = "top" | "centered" | "inverted";
 interface Step {
     title: string;
     status: StepStatus;
@@ -1204,6 +1357,15 @@ declare class RelStepper extends LitElement {
     textAlign: TextAlign;
     orientation: Orientation;
     size: StepperSize;
+    type: StepperType;
+    /**
+     * Figma Typel axis: top = label top-aligned beside the indicator,
+     * centered = label vertically centered beside it, inverted = indicator above
+     * the label. When unset, the legacy textAlign prop drives the layout
+     * (below ≈ inverted, right ≈ centered). Note Figma marks Top+Horizontal
+     * as an unsupported combination.
+     */
+    labelPlacement?: LabelPlacement;
     static styles: lit.CSSResult;
     private isDone;
     private isProgress;
@@ -1237,18 +1399,23 @@ 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>;
 }
 declare class RelTab extends LitElement {
     tabs: TabItem[];
     activeIndex: number;
+    /** Tab size — styled via :host([size]) rules. */
+    size: "sm" | "md" | "lg";
     private _tabItems;
     static styles: lit.CSSResult;
     private _onSlotChange;
@@ -1260,7 +1427,7 @@ declare class RelTab extends LitElement {
 
 type TextFieldState = "default" | "error" | "disabled";
 type TextFieldSize = "small" | "medium" | "large";
-type TextFieldVariant = "default" | "underline";
+type TextFieldVariant = "default" | "underline" | "legend";
 declare class RelTextfield extends LitElement {
     label?: string;
     placeholder: string;
@@ -1273,9 +1440,26 @@ declare class RelTextfield extends LitElement {
     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;
@@ -1302,11 +1486,14 @@ declare class RelToast extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-type TooltipPosition = "above" | "below";
+type TooltipPosition = "above" | "below" | "left" | "right";
+type TooltipType = "single-line" | "multi-line";
 declare class RelTooltip extends LitElement {
     text: string;
     position: TooltipPosition;
     showTail: boolean;
+    /** Figma "Type": single-line stays on one line; multi-line wraps at a max width. */
+    type: TooltipType;
     private uniqueId;
     static styles: lit.CSSResult;
     firstUpdated(): void;
@@ -1314,4 +1501,4 @@ declare class RelTooltip extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-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 };
+export { type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, type Orientation, type OtpType, type ProgressMode, type RadioOption, RelAccordion, RelAlert, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelDrawerFooter, RelKbd, RelKbdGroup, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSkeleton, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelToast, RelTooltip, RelTopbar, RelTopbarActions, RelTopbarBrand, RelTopbarDropdown, RelTopbarDropdownItem, RelTopbarItem, RelTopbarMobilePanel, RelTopbarProfile, RelTopbarUtilities, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle };