@reliability-design/web 1.3.1 → 1.4.1

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,9 +80,27 @@ 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;
@@ -91,6 +113,10 @@ declare class RelButton extends LitElement {
     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>;
@@ -125,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>;
 }
@@ -137,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;
@@ -160,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;
@@ -176,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>;
 }
 
@@ -223,6 +269,13 @@ declare class RelDatePicker extends LitElement {
     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;
@@ -375,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;
@@ -419,6 +472,7 @@ declare class RelDrawer extends LitElement {
     description: string;
     private isDragging;
     private dragOffset;
+    private settled;
     private panelElement;
     private overlayElement;
     private previousFocus;
@@ -460,6 +514,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;
@@ -470,7 +538,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;
@@ -492,49 +587,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;
@@ -543,7 +612,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;
@@ -953,6 +1022,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>;
 }
@@ -1164,6 +1235,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;
@@ -1187,10 +1263,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;
@@ -1199,13 +1281,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;
@@ -1250,6 +1345,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;
@@ -1259,6 +1358,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;
@@ -1307,6 +1415,8 @@ declare class RelTabItem extends LitElement {
 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;
@@ -1326,6 +1436,11 @@ declare class RelTextfield extends LitElement {
     value: string;
     leftIcon?: string;
     rightIcon?: string;
+    /** Makes the trailing icon interactive (pointer + focusable) and emits
+     *  `rel-right-icon-click` — e.g. a password show/hide toggle or clear button. */
+    clickableRightIcon: boolean;
+    /** Accessible label for the trailing icon when it is clickable. */
+    rightIconAriaLabel?: string;
     supportingText?: string;
     state: TextFieldState;
     size: TextFieldSize;
@@ -1355,6 +1470,8 @@ declare class RelTextfield extends LitElement {
     connectedCallback(): void;
     private handleFocus;
     private handleBlur;
+    private handleRightIconClick;
+    private handleRightIconKeydown;
     private handleInput;
     render(): lit_html.TemplateResult<1>;
 }
@@ -1377,11 +1494,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;
@@ -1389,4 +1509,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 };