@reliability-design/web 1.3.0 → 1.3.1

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

@@ -83,6 +83,10 @@ 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;
@@ -210,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;
@@ -572,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;
@@ -585,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>;
@@ -595,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>;
@@ -605,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>;
@@ -615,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>;
@@ -625,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;
@@ -644,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)
@@ -693,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:
@@ -739,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.
  */
@@ -1237,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>;
 }
@@ -1260,7 +1318,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 +1331,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;

package/dist/index.d.ts

@@ -83,6 +83,10 @@ 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;
@@ -210,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;
@@ -572,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;
@@ -585,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>;
@@ -595,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>;
@@ -605,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>;
@@ -615,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>;
@@ -625,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;
@@ -644,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)
@@ -693,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:
@@ -739,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.
  */
@@ -1237,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>;
 }
@@ -1260,7 +1318,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 +1331,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;