@telesign/boreal-web-components 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/types/components/forms/bds-slider/bds-slider.d.ts

@@ -0,0 +1,176 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { SliderChangeDetail, SliderRawValue, SliderType, SliderTooltipType, ISlider } from './types';
+import { IFormControl } from "../../../mixins/index";
+declare const BdsSlider_base: abstract new (...args: any[]) => {
+    formDisabledCallback(disabled: boolean): void;
+};
+/**
+ * Slider component for selecting a numeric value or a range of values.
+ *
+ * @summary An accessible, single or multi-handle range slider built on HTML `<input type="range">`.
+ * Supports discrete tick marks, tooltips, disabled state, and N-handle multi-value mode
+ * with automatic collision prevention between handles.
+ *
+ * @property {number}          min      - Minimum selectable value. Defaults to `0`.
+ * @property {number}          max      - Maximum selectable value. Defaults to `100`.
+ * @property {number}          step     - Step size for each increment/decrement. Defaults to `1`.
+ * @property {number[]} value   - Current value(s). A single number for one handle;
+ *                                        an array for multi-handle mode. Defaults to `0`.
+ * @property {boolean}         disabled - Disables interaction with the slider. Defaults to `false`.
+ * @property {boolean}         discrete - Shows tick marks at each step position along the track. Defaults to `false`.
+ * @property {string}          tooltip  - Controls tooltip visibility: `"never"`, or `"focus"`. Defaults to `"focus"`.
+ *
+ * @method getValues - Returns the current value(s) as `number | number[]`.
+ * @method setValues - Programmatically sets the slider value(s).
+ */
+export declare class BdsSlider extends BdsSlider_base implements ISlider, IFormControl<number[]> {
+    private service;
+    private readonly blockClass;
+    el: HTMLBdsSliderElement;
+    internals: ElementInternals;
+    /** Reference to the slider connect element */
+    private connectEl?;
+    /** Reference to the slider track element */
+    private trackEl;
+    /** Active input elements, one per handle */
+    private inputEls;
+    /** Active tooltip elements, one per handle */
+    private tooltipEls;
+    /** Minimum selectable value. Defaults to `0`. */
+    readonly min: number;
+    /** Maximum selectable value. Defaults to `100`. */
+    readonly max: number;
+    /** Slider type that defines the slider behavior. Defaults to `single`. */
+    readonly type: SliderType;
+    /** Label for the slider. Defaults to `""`. */
+    readonly label: string;
+    /**
+     * Step size for each increment/decrement.
+     * Must be a positive number. Defaults to `1`.
+     */
+    readonly step: number;
+    /**
+     * Shows the min and max values of the slider.
+     * Defaults to `false`.
+     */
+    readonly showLimits: boolean;
+    /**
+     * Current value(s) of the slider.
+     * Accepts `number`, `number[]`, or a JSON string for HTML vanilla usage.
+     * - Single handle: `50` or `"50"`
+     * - Multi-handle:  `[10, 50, 80]` or `"[10, 50, 80]"`
+     * - Defaults to `0`.
+     */
+    readonly value: SliderRawValue;
+    /** Disables the slider, preventing all user interaction. Defaults to `false`. */
+    readonly disabled: boolean;
+    /** Name of the form control, submitted as a key in the form data. */
+    readonly name: string;
+    /**
+     * JSON string array of handle values that should be individually disabled.
+     * Each number must match a value present in the `value` prop.
+     * Accepts `number`, `number[]`, or JSON string: `"[5, 30]"`.
+     * Defaults to `"[]"`.
+     */
+    readonly disabledHandlers: SliderRawValue;
+    /**
+     * When `true`, renders discrete tick marks along the track
+     * at every step position between `min` and `max`.
+     * Defaults to `false`.
+     */
+    readonly discrete: boolean;
+    /**
+     * Controls tooltip visibility on each handle.
+     * - `"never"`  — tooltip is hidden.
+     * - `"focus"`  — tooltip appears only when the handle is active/focused.
+     * Defa ults to `"focus"`.
+     */
+    readonly tooltip: SliderTooltipType;
+    /**
+     * Emitted whenever the slider value(s) change due to user interaction.
+     * Payload: `{ value: number }` for single handle, `{ value: number[] }` for multi-handle.
+     */
+    bdsChange: EventEmitter<SliderChangeDetail>;
+    /**
+     * Native-style alias of `bdsChange`. Emitted simultaneously.
+     * Payload: `{ value: number[] }` for multi-handle.
+     */
+    valueChange: EventEmitter<number[]>;
+    /**
+     * Emitted when the user clicks on the slider.
+     * Payload: `{ target: HTMLElement }` and `{ value: number[] }` for multi-handle.
+     */
+    bdsClick: EventEmitter<{
+        target: HTMLElement;
+        value: number[];
+    }>;
+    /** Internal mirror of `disabled`, kept in sync via `@Watch`. */
+    private isDisabled;
+    /** Internal mirror of `discrete`, kept in sync via `@Watch`. */
+    private isDiscrete;
+    /**
+     * Internal mirror of `values` normalized to `number[]`.
+     * All internal logic reads from here; never from `values` directly.
+     * Updated via `parseValues()` whenever `values` prop changes.
+     */
+    private internalValues;
+    onDisabledChange(next: boolean): void;
+    onDisabledHandlersChange(): void;
+    onValueChange(next: SliderRawValue): void;
+    onConfigChange(): void;
+    onRangeChange(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: unknown, _mode: string): void;
+    private syncFormValue;
+    /**
+     * Returns the current value(s) of the slider.
+     * - Single-handle → `number`
+     * - Multi-handle  → `number[]`
+     */
+    getValues(): Promise<number[]>;
+    /**
+     * Programmatically sets the slider value(s).
+     * @param next - A single `number` or an array of `number[]` matching the number of handles.
+     */
+    setValues(next: SliderRawValue): Promise<void>;
+    private buildAdapter;
+    private syncDOMUpdates;
+    private handleInputEvent;
+    private handleChangeEvent;
+    private onHandleFocus;
+    private onHandleBlur;
+    private onHandleInactive;
+    private handleClick;
+    private syncInputsToValues;
+    private updateProgress;
+    private syncTooltip;
+    private syncTooltips;
+    private resolveValues;
+    private updateValues;
+    private emitChange;
+    private isHandleDisabled;
+    private getPipPositions;
+    /**
+     * Returns the CSS modifier class map for the slider component.
+     *
+     * Includes visual state modifiers such as disabled,
+     * discrete mode, and tooltip behavior.
+     */
+    private get classMap();
+    private getThumbPosition;
+    private getThumbCSSPosition;
+    private renderInput;
+    private renderMinMax;
+    private handleTrackClick;
+    private renderTooltip;
+    private renderPips;
+    private renderLabel;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}
+export {};
+//# sourceMappingURL=bds-slider.d.ts.map

package/dist/types/components/forms/bds-slider/helpers/SliderDOMController.d.ts

@@ -0,0 +1,38 @@
+export declare class SliderDOMController {
+    /**
+     * Adds the necessary classes to show the tooltip when a handle is focused or active.
+     * This is used in both focus and active states to ensure the tooltip remains visible.
+     * @param inputEl - The input element to add the states to.
+     * @param blockClass - The block class of the slider.
+     */
+    static addTooltipsStates(inputEl: HTMLDivElement, blockClass: string): void;
+    /**
+     * Removes the necessary classes to hide the tooltip when a handle is blurred or inactive.
+     * @param inputEl - The input element to remove the states from.
+     * @param blockClass - The block class of the slider.
+     */
+    static removeTooltipsStates(inputEl: HTMLDivElement, blockClass: string): void;
+    /**
+     * Syncs the tooltips with the given values and inputs.
+     * @param values - The values to sync the tooltips with.
+     * @param inputsEl - The inputs to sync the tooltips with.
+     */
+    static syncTooltips(values: number[], inputsEl: HTMLInputElement[]): void;
+    /**
+     * Moves the connect element to the given percentage position.
+     * @param connectEl - The connect element to move.
+     * @param segment - The percentage position to move the connect element to.
+     */
+    static moveConnect(connectEl: HTMLDivElement, segment: {
+        left: number;
+        width: number;
+    }): void;
+    /**
+     * Returns the CSS position of the thumb in pixels based on the track and percent.
+     * @param percent - The percentage of the track that the thumb should be positioned at.
+     * @returns The position of the thumb in pixels.
+     */
+    static getThumbCSSPosition(percent: number): string;
+    static updateInputValue(inputEl: HTMLInputElement, value: number): void;
+}
+//# sourceMappingURL=SliderDOMController.d.ts.map

package/dist/types/components/forms/bds-slider/helpers/SliderService.d.ts

@@ -0,0 +1,44 @@
+import type { ISliderOptions } from '../types/ISliderOptions';
+export declare class SliderService {
+    private readonly options;
+    constructor(options: ISliderOptions);
+    /**
+     * Clamps a value between min and max.
+     */
+    clamp(value: number): number;
+    /**
+     * Rounds a value to the nearest step.
+     */
+    snapToStep(value: number): number;
+    /**
+     * Applies collision prevention for range mode.
+     * Ensures handles never overlap — always at least 1 step apart.
+     */
+    applyCollision(values: number[], changedIndex: number): number[];
+    /**
+     * Calculates the percentage position of a value along the track.
+     */
+    toPercent(value: number): number;
+    /**
+     * Returns connect segments for the track.
+     * single: [left=0, width=percent of value]
+     * range:  [left=percent of min, width=percent of (max - min)]
+     */
+    getConnectSegment(values: number[]): {
+        left: number;
+        width: number;
+    };
+    /**
+     * Returns pip positions as percentages, excluding min and max.
+     */
+    getPipPositions(): number[];
+    /**
+     * Returns the CSS position of the thumb in pixels based on the track and percent.
+     * @param value - The value of the slider at the given clientX position.
+     * @param trackWidth - The width of the track element.
+     * @param thumbSize - The size of the thumb element.
+     * @returns The position of the thumb in pixels.
+     */
+    getThumbCSSPosition(value: number, trackWidth: number, thumbSize: number): number;
+}
+//# sourceMappingURL=SliderService.d.ts.map

package/dist/types/components/forms/bds-slider/helpers/index.d.ts

@@ -0,0 +1,4 @@
+export * from './parseValues';
+export * from './SliderService';
+export * from './SliderDOMController';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/forms/bds-slider/helpers/parseValues.d.ts

@@ -0,0 +1,18 @@
+import { SliderRawValue, SliderType } from '../types';
+/**
+ * Parses any valid `values` input into a clean `number[]`.
+ * This is the single source of truth for value normalization.
+ *
+ * Handles:
+ * - `number[]` → `[10, 50, 80]` (passthrough, filtered for NaN)
+ * - `"[10, 50, 80]"` → `[10, 50, 80]`
+ * - anything malformed → `[this.min]` as safe fallback
+ */
+export declare function parseValues(raw: string | number[], fallback?: number[]): number[];
+/**
+ * Serialize the value for the form: a single number → "10", multiple → "10,20,30"
+ * FormData does not support arrays natively, so we use CSV.
+ */
+export declare function serializeFormValue(values: number[]): string;
+export declare function resolveValues(raw: SliderRawValue, min: number, max: number, type: SliderType): number[];
+//# sourceMappingURL=parseValues.d.ts.map

package/dist/types/components/forms/bds-slider/types/ChangeDetail.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Detailed information about a slider change event.
+ * This includes the new value of the slider.
+ * @property {number[]} value - The new value of the slider.
+ */
+export interface SliderChangeDetail {
+    value: number[];
+}
+//# sourceMappingURL=ChangeDetail.d.ts.map

package/dist/types/components/forms/bds-slider/types/ISlider.d.ts

@@ -0,0 +1,17 @@
+import { IFormProps } from "../../../../types/index";
+import { SliderRawValue, SliderTooltipType, SliderType } from './types';
+export interface ISlider extends IFormProps {
+    min: number;
+    max: number;
+    step: number;
+    value: SliderRawValue;
+    disabledHandlers: SliderRawValue;
+    discrete: boolean;
+    label: string;
+    disabled: boolean;
+    showLimits: boolean;
+    name: string;
+    tooltip: SliderTooltipType;
+    type: SliderType;
+}
+//# sourceMappingURL=ISlider.d.ts.map

package/dist/types/components/forms/bds-slider/types/ISliderOptions.d.ts

@@ -0,0 +1,31 @@
+import { SliderTooltipType, SliderType } from './types';
+/**
+ * Options for the slider component.
+ * @property {number} min - Minimum selectable value.
+ * @property {number} max - Maximum selectable value.
+ * @property {number} step - Step size for each increment/decrement.
+ * @property {number[]} value - Current value(s) of the slider.
+ * @property {number[]} disabledHandlers - JSON string array of handle values that should be individually disabled.
+ * @property {boolean} discrete - Shows tick marks at each step position along the track.
+ * @property {boolean} disabled - Disables the slider, preventing all user interaction.
+ * @property {string} name - Name of the form control, submitted as a key in the form data.
+ */
+export interface ISliderOptions {
+    min: number;
+    max: number;
+    step: number;
+    value: number[];
+    disabledHandlers: number[];
+    discrete: boolean;
+    type: SliderType;
+    disabled: boolean;
+    name: string;
+}
+/**
+ * Options for the slider component with tooltip visibility.
+ * @property {SliderTooltipType} tooltip - Controls tooltip visibility.
+ */
+export interface ISliderTooltipOptions extends ISliderOptions {
+    tooltip: SliderTooltipType;
+}
+//# sourceMappingURL=ISliderOptions.d.ts.map

package/dist/types/components/forms/bds-slider/types/enum.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Available tooltip types for the slider component.
+ * Used to control the visibility of the tooltip.
+ */
+export declare const SLIDER_TOOLTIP: {
+    readonly NEVER: "never";
+    readonly FOCUS: "focus";
+};
+/**
+ * Available slider types for the slider component.
+ * Used to control the behavior of the slider.
+ */
+export declare const SLIDER_TYPE: {
+    readonly SINGLE: "single";
+    readonly RANGE: "range";
+};
+//# sourceMappingURL=enum.d.ts.map

package/dist/types/components/forms/bds-slider/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ChangeDetail';
+export * from './enum';
+export * from './types';
+export * from './ISlider';
+export * from './ISliderOptions';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/forms/bds-slider/types/types.d.ts

@@ -0,0 +1,5 @@
+import { SLIDER_TOOLTIP, SLIDER_TYPE } from './enum';
+export type SliderTooltipType = (typeof SLIDER_TOOLTIP)[keyof typeof SLIDER_TOOLTIP];
+export type SliderRawValue = string | number[];
+export type SliderType = (typeof SLIDER_TYPE)[keyof typeof SLIDER_TYPE];
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/forms/bds-text-field/bds-text-field.d.ts

@@ -109,6 +109,10 @@ export declare class BdsTextField extends BdsTextField_base implements ITextFiel
     readonly counter: boolean;
     /** Sets a custom width via the `--bds-text-field-width` CSS custom property. */
     readonly customWidth: string;
+    /** Set mode readonly to use in selects */
+    readonly selectable: boolean;
+    /** Icon rendered on the right side of the input, on the actions containers. (e.g., 'bds-icon-settings') */
+    readonly iconRight: string;
     /** Tracks focus state to drive the `bds-text-field--focused` CSS modifier. */
     private focused;
     /** Controls whether the password input renders as plain text. */

package/dist/types/components/navigation/bds-breadcrumb/bds-breadcrumb.d.ts

@@ -0,0 +1,57 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { BdsClickBreadcrumbEvent, BdsClickCollapsedEvent, IBreadcrumb } from './types/IBreadcrumb';
+import { BdsClickCollapseEvent, BdsClickItemEvent } from "../../../components";
+/**
+ * @summary Breadcrumb navigation container component. Provides a structured navigation trail and
+ * handles overflow using a collapse mechanism when the number of items exceeds `maxItems`.
+ *
+ * @slot - The content of the bds-breadcrumb group. It's meant for multiple `<bds-breadcrumb-item>` elements.
+ */
+export declare class BdsBreadcrumb implements IBreadcrumb {
+    private inheritedAttributes;
+    el: HTMLBdsBreadcrumbElement;
+    /**
+     * Separator rendered between breadcrumb items.
+     * @default "/"
+     */
+    readonly separator: string;
+    /**
+     * Maximum number of breadcrumb items visible before collapsing.
+     * If set to 0 or undefined, no collapsing is applied.
+     * @default 0
+     */
+    readonly maxItems: number;
+    /**
+     * Number of items visible at the start before collapse occurs.
+     * @default 1
+     */
+    readonly itemsBeforeCollapse: number;
+    /**
+     * Number of items visible at the end after collapse occurs.
+     * @default 1
+     */
+    readonly itemsAfterCollapse: number;
+    /**
+     * Emitted when the collapse indicator ("...") is clicked.
+     * Returns a reference to the clicked element and the list of collapsed breadcrumb items.
+     */
+    bdsClickCollapsed: EventEmitter<BdsClickCollapsedEvent>;
+    /**
+     * Emitted when a breadcrumb item is clicked.
+     */
+    bdsClickBreadcrumb: EventEmitter<BdsClickBreadcrumbEvent>;
+    componentWillLoad(): void;
+    onSeparatorChange(): void;
+    onMaxItemsChange(): void;
+    onCollapsedClick(ev: CustomEvent<BdsClickCollapseEvent>): void;
+    onBreadcrumbClick(ev: CustomEvent<BdsClickItemEvent>): void;
+    private applyCustomSeparator;
+    private handleSlotChange;
+    private updateBreadcrumbCollapse;
+    private shouldCollapse;
+    private getBreadcrumbItems;
+    private showAllItems;
+    private applyVisibility;
+    render(): any;
+}
+//# sourceMappingURL=bds-breadcrumb.d.ts.map

package/dist/types/components/navigation/bds-breadcrumb/types/IBreadcrumb.d.ts

@@ -0,0 +1,17 @@
+export interface IBreadcrumb {
+    separator: string;
+    maxItems: number;
+    itemsBeforeCollapse: number;
+    itemsAfterCollapse: number;
+}
+export type BdsClickCollapsedEvent = {
+    element: HTMLElement;
+    collapsedBreadcrumbs: HTMLBdsBreadcrumbItemElement[];
+};
+export type BdsClickBreadcrumbEvent = {
+    element: HTMLElement;
+    index?: number;
+    href?: string;
+    router?: boolean;
+};
+//# sourceMappingURL=IBreadcrumb.d.ts.map

package/dist/types/components/navigation/bds-breadcrumb-item/bds-breadcrumb-item.d.ts

@@ -0,0 +1,83 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import type { BdsClickCollapseEvent, BdsClickItemEvent, IBreadcrumbItem } from './types/IBreadcrumbItem';
+/**
+ * @summary Breadcrumb navigation item component that represents a single step within a breadcrumb navigation trail.
+ *
+ * @slot - The text content of the breadcrumb item, can include simple text or text with icons.
+ */
+export declare class BdsBreadcrumbItem implements IBreadcrumbItem {
+    private collapsedRef;
+    el: HTMLBdsBreadcrumbItemElement;
+    /**
+     * Marks this breadcrumb item as the current page.
+     *
+     * When true, the item is non-interactive and has aria-current="page".
+     *
+     * @default false
+     */
+    readonly active: boolean;
+    /**
+     * Enables router-based navigation instead of native link navigation.
+     *
+     * @default false
+     */
+    readonly router: boolean;
+    /**
+     * Internal prop controlled by the parent breadcrumb.
+     * Indicates that this item is part of a collapsed range.
+     *
+     * @default false
+     */
+    readonly collapsed: boolean;
+    /**
+     * Internal prop controlled by the parent breadcrumb.
+     * Renders the collapse indicator ("...") for hidden items.
+     *
+     * @default false
+     */
+    readonly showCollapse: boolean;
+    /**
+     * URL for the breadcrumb link.
+     *
+     * @default ''
+     */
+    readonly href: string;
+    /**
+     * Specifies where to open the linked document.
+     *
+     * @default '_self'
+     */
+    readonly target: '_blank' | '_parent' | '_self' | '_top';
+    /**
+     * Enables download behavior for the link.
+     *
+     * @default false
+     */
+    readonly downloadable: boolean;
+    /**
+     * Suggested filename for the downloaded file.
+     *
+     * @default 'filename'
+     */
+    readonly filename: string;
+    /**
+     * Relationship between the current document and the linked resource.
+     *
+     * @default ''
+     */
+    readonly rel: string;
+    /**
+     * Emitted when a breadcrumb item is clicked.
+     */
+    bdsClick: EventEmitter<BdsClickItemEvent>;
+    /**
+     * Emitted when the collapse indicator ("...") is activated.
+     */
+    bdsClickCollapse: EventEmitter<BdsClickCollapseEvent>;
+    private handleClick;
+    private get breadcrumbItem();
+    private handleCollapseClick;
+    private get cssClasses();
+    render(): any;
+}
+//# sourceMappingURL=bds-breadcrumb-item.d.ts.map

package/dist/types/components/navigation/bds-breadcrumb-item/types/IBreadcrumbItem.d.ts

@@ -0,0 +1,20 @@
+export interface IBreadcrumbItem {
+    active: boolean;
+    router: boolean;
+    collapsed: boolean;
+    showCollapse: boolean;
+    href?: string;
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    downloadable?: boolean;
+    filename?: string;
+    rel?: string;
+}
+export type BdsClickItemEvent = {
+    element: HTMLBdsBreadcrumbItemElement;
+    href?: IBreadcrumbItem['href'];
+    router: IBreadcrumbItem['router'];
+};
+export type BdsClickCollapseEvent = {
+    element: HTMLElement;
+};
+//# sourceMappingURL=IBreadcrumbItem.d.ts.map

package/dist/types/components/overlays/bds-popover/bds-popover.d.ts

@@ -202,6 +202,10 @@ export declare class BdsPopover extends BdsPopover_base implements IPopover {
      * @returns - True if the footer slot is present, false otherwise.
      */
     get hasFooterSlot(): boolean;
+    /** Programmatically opens the popover, running the full show lifecycle. */
+    openPopover(): Promise<void>;
+    /** Programmatically closes the popover, running the full hide lifecycle. */
+    closePopover(): Promise<void>;
     disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/titles-text/bds-typography/bds-typography.d.ts

@@ -5,52 +5,6 @@ import type { ITypography } from './types/ITypography';
  * @summary A comprehensive typography component that supports multiple text variants, sizes, alignments, states, and link functionality.
  *
  * @slot - The text displayed in the typography.
- *
- * @attr {string} variant - The variant of the typography for styling the text. Options: label, display, heading, subheading, helper, link, code, caption
- * @attr {string} element - Defines the HTML element. For `heading` variant, the text size adjusts to the HTML heading level (`h1` through `h6`).
- * @attr {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
- * @attr {string} align - The text alignment. Options: start, center, end, inherit
- * @attr {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
- * @attr {boolean} required - Shows a required indicator when used with `label` variant.
- * @attr {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
- * @attr {number} max-lines - Maximum number of lines to show before truncating with ellipsis.
- * @attr {string} href - URL when the typography is an `a` element and a `link` variant.
- * @attr {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
- * @attr {boolean} downloadable - Makes the `link` download a file.
- * @attr {string} filename - Suggested filename when downloading a file from the `link`.
- * @attr {string} html-for - The for attribute when rendered as a label
- * @attr {string} tooltip-text - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
- * @attr {string} custom-class - Additional custom CSS class
- *
- * @property {string} variant - The variant of the typography for styling the text. Options: label, display, heading, subheading, helper, link, code, caption
- * @property {string} element - Defines the HTML element. For `heading` variant, the text size adjusts to the HTML heading level (`h1` through `h6`).
- * @property {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
- * @property {string} align - The text alignment. Options: start, center, end, inherit
- * @property {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
- * @property {boolean} required - Shows a required indicator when used with `label` variant.
- * @property {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
- * @property {number} maxLines - Maximum number of lines to show before truncating with ellipsis.
- * @property {string} href - URL when the typography is an `a` element and a `link` variant.
- * @property {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
- * @property {boolean} downloadable - Makes the `link` download a file.
- * @property {string} filename - Suggested filename when downloading a file from the `link`.
- * @property {string} htmlFor - The for attribute when rendered as a label
- * @property {string} tooltipText - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
- * @property {string} customClass - Additional custom CSS class
- *
- * @default 'display' - Default variant value
- * @default 'p' - Default element value
- * @default 'start' - Default align value
- * @default 'md' - Default size value
- * @default 'default' - Default state value
- * @default false - Default required state
- * @default false - Default ellipsis state
- * @default 1 - Default maxLines value
- * @default '' - Default href value
- * @default '' - Default target value
- * @default false - Default downloadable state
- * @default 'download' - Default filename value
- * @default '' - Default tooltipText value
  */
 export declare class BdsTypography implements ITypography {
     private inheritedAttributes;
@@ -62,6 +16,8 @@ export declare class BdsTypography implements ITypography {
     readonly size: ITypography['size'];
     /** Visual state (if supported by variant). */
     readonly state: ITypography['state'];
+    /** Relationship between the current document and the linked resource. */
+    readonly rel: ITypography['rel'];
     /** Additional custom CSS class. */
     readonly customClass: string;
     /** HTML tag used for rendering. */

package/dist/types/components/titles-text/bds-typography/types/ITypography.d.ts

@@ -13,6 +13,7 @@ export interface ITypography {
     size: Size;
     required: boolean;
     htmlFor: string | undefined;
+    rel: string | null;
     href: string | null;
     target: '_blank' | '_parent' | '_self' | '_top' | '' | null;
     downloadable: boolean;