@orangelogic/design-system 2.19.0-pr77202.21

package/library/packages/atoms/src/components/radio-button/radio-button.d.ts

@@ -0,0 +1,69 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
+ *
+ * @description Radio buttons are designed to be used with [radio groups](?s=atoms&id=/radio-group).
+ * When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
+ *
+ * @slot (default) - The radio button's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @event cx-blur - Emitted when the button loses focus.
+ * @event cx-focus - Emitted when the button gains focus.
+ *
+ * @cssproperty --toggle-size - The size of the radio button's toggle.
+ * @cssproperty [--checked-border-color=var(--cx-color-primary)] - The border color of the radio button when it is checked.
+ * @cssproperty [--checked-background-color=var(--cx-color-neutral-0)] - The background color of the radio button when it is checked.
+ * @cssproperty [--checked-hover-border-color=var(--cx-color-primary-500)] - The border color of the radio button when it is checked and hovered.
+ * @cssproperty [--checked-hover-background-color=var(--cx-color-neutral-0)] - The background color of the radio button when it is checked and hovered.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart button - The internal `<button>` element.
+ * @csspart button--checked - The internal button element when the radio button is checked.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart label - The container that wraps the radio button's label.
+ * @csspart suffix - The container that wraps the suffix.
+ */
+export default class CxRadioButton extends CortexElement {
+    static styles: CSSResultGroup;
+    private readonly hasSlotController;
+    input: HTMLInputElement;
+    hiddenInput: HTMLInputElement;
+    protected hasFocus: boolean;
+    /**
+     * @internal The radio button's checked state. This is exposed as an "internal" attribute so we can reflect it, making
+     * it easier to style in button groups.
+     */
+    checked: boolean;
+    /** The radio's value. When selected, the radio group will receive this value. */
+    value: string;
+    /** Disables the radio button. */
+    disabled: boolean;
+    /**
+     * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
+     * this attribute can typically be omitted.
+     */
+    size: 'small' | 'medium' | 'large';
+    /** Draws a pill-style radio button with rounded edges. */
+    pill: boolean;
+    /** The radio button's label. */
+    label: string;
+    connectedCallback(): void;
+    private handleBlur;
+    private handleClick;
+    private handleFocus;
+    handleDisabledChange(): void;
+    /** Sets focus on the radio button. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the radio button. */
+    blur(): void;
+    render(): import('lit').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-radio-button': CxRadioButton;
+    }
+}

package/library/packages/atoms/src/components/radio-button/radio-button.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/atoms/src/components/radio-card/radio-card.d.ts

@@ -0,0 +1,68 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { default as CxCard } from '../card/card';
+import { default as CxLineClamp } from '../line-clamp/line-clamp';
+import { default as CxRadio } from '../radio/radio';
+
+/**
+ * @summary Radio cards allow the user to select a single option from a group.
+ *
+ * @description Radio cards are designed to be used with [radio groups](?s=atoms&id=/radio-group).
+ *
+ * @csspart base - The component’s base wrapper.
+ * @csspart control - The circular container that wraps the radio’s checked state.
+ * @csspart control--checked - The radio control when the radio is checked.
+ * @csspart checked-icon - The checked icon, a `<cx-icon>` element.
+ * @csspart label - The container that wraps the radio’s label.
+ *
+ * @event cx-blur - Emitted when the control loses focus.
+ * @event cx-focus - Emitted when the control gains focus.
+ *
+ * @cssproperty [--label-text-align=left] - The alignment of the label text.
+ * @cssproperty [--description-text-align=left] - The alignment of the label text.
+ * @cssproperty [--label-color=var(--cx-input-label-color)] - The color of the label text.
+ * @cssproperty [--description-color=var(--cx-input-label-color)] - The color of the description text.
+ * @cssproperty [--card-width=auto] - The width of the radio card.
+ * @cssproperty [--card-height=auto] - The height of the radio card.
+ *
+ * @slot - The radio’s label.
+ * @slot image - The radio’s image.
+ * @slot suffix - The radio’s label's suffix.
+ * @slot help-text - The radio’s help text.
+ */
+export default class CxRadioCard extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-card': typeof CxCard;
+        'cx-line-clamp': typeof CxLineClamp;
+        'cx-radio': typeof CxRadio;
+    };
+    private readonly hasSlotController;
+    private readonly radio;
+    checked: boolean;
+    protected hasFocus: boolean;
+    /** The radio's value. When selected, the radio group will receive this value. */
+    value: string;
+    /** Disables the radio. */
+    disabled: boolean;
+    /** Hides the radio's indicator. */
+    hideIndicator: boolean;
+    /**
+     * Whether to show full text or ellipsis
+     */
+    disabledLineClamp: boolean;
+    constructor();
+    connectedCallback(): void;
+    private handleBlur;
+    private handleClick;
+    private handleFocus;
+    private setInitialAttributes;
+    handleCheckedChange(): void;
+    handleDisabledChange(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-radio-card': CxRadioCard;
+    }
+}

package/library/packages/atoms/src/components/radio-card/radio-card.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/atoms/src/components/radio-group/radio-group.d.ts

@@ -0,0 +1,95 @@
+import { CortexFormControl, default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { FormControlController } from '../../../../utils/src/custom-element/form.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxButtonGroup } from '../button-group/button-group';
+
+/**
+ * @summary Radio groups are used to group multiple [radios](?s=atoms&id=/radio) or [radio buttons](?s=atoms&id=/radio-button) so they function as a single form control.
+ *
+ * @slot (default) - The default slot where `<cx-radio>` or `<cx-radio-button>` elements are placed.
+ * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event cx-change - Emitted when the radio group's selected value changes.
+ * @event cx-input - Emitted when the radio group receives user input.
+ * @event cx-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart button-group - The button group that wraps radio buttons.
+ * @csspart button-group__base - The button group's `base` part.
+ */
+export default class CxRadioGroup extends CortexElement implements CortexFormControl {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button-group': typeof CxButtonGroup;
+    };
+    protected readonly formControlController: FormControlController;
+    private readonly hasSlotController;
+    private customValidityMessage;
+    private validationTimeout;
+    defaultSlot: HTMLSlotElement;
+    validationInput: HTMLInputElement;
+    private hasButtonGroup;
+    private errorMessage;
+    /**
+     * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+     * instead.
+     */
+    label: string;
+    /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
+    helpText: string;
+    /** The name of the radio group, submitted as a name/value pair with form data. */
+    name: string;
+    /** The current value of the radio group, submitted as a name/value pair with form data. */
+    value: string;
+    /** The default value of the radio group. */
+    defaultValue: string;
+    /** The radio group's size. This size will be applied to all child radios and radio buttons. */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+     * the same document or shadow root for this to work.
+     */
+    form: string | HTMLElement | undefined;
+    /** Ensures a child radio is checked before allowing the containing form to submit. */
+    required: boolean;
+    /** Arrange the radio buttons in a horizontal layout, making them appear side by side instead of stacked vertically. */
+    horizontal: boolean;
+    /** This attribute disables the spacing behavior of the radio group. */
+    compact: boolean;
+    /** This attribute specifies the number of items to be displayed per row. It is only applicable when the `horizontal` attribute is set to true. */
+    itemsPerRow: number;
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    /** Gets the validation message */
+    get validationMessage(): string;
+    runFirstUpdated(): void;
+    private getAllRadios;
+    private handleRadioClick;
+    private handleKeyDown;
+    private handleLabelClick;
+    private handleInvalid;
+    private syncRadioElements;
+    private syncRadios;
+    private updateCheckedRadio;
+    handleSizeChange(): void;
+    handleValueChange(): void;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message?: string): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-radio-group': CxRadioGroup;
+    }
+}

package/library/packages/atoms/src/components/radio-group/radio-group.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/atoms/src/components/range/range.d.ts

@@ -0,0 +1,287 @@
+import { CortexFormControl, default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxTooltip } from '../tooltip/tooltip';
+
+type Mark = {
+    hidden: boolean;
+    label: string;
+    value: number;
+};
+/**
+ * @summary Ranges allow the user to select a single value or a range of values using a slider.
+ *
+ * @slot label - The range's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ * @slot marks - Tick marks. Recommended to be a `datalist` element. Inside this slotted element, provide each mark as an `option` element with a `value` attribute and (optional) text content that serves as the label.
+ * @slot thumb-min - Custom content for the lower/min thumb (multi mode only). The slotted element will be positioned automatically.
+ * @slot thumb-max - Custom content for the upper/max thumb (multi mode only). The slotted element will be positioned automatically.
+ *
+ * @event cx-blur - Emitted when the control loses focus.
+ * @event cx-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event cx-focus - Emitted when the control gains focus.
+ * @event cx-input - Emitted when the control receives input.
+ * @event cx-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event cx-drag-start - Emitted when the user starts dragging the thumb.
+ * @event cx-drag-end - Emitted when the user stops dragging the thumb.
+ * @event cx-thumb-drag-start - Emitted when the user starts dragging a thumb (multi mode only).
+ * @event cx-thumb-drag-end - Emitted when the user stops dragging a thumb (multi mode only).
+ * @event cx-range-drag-start - Emitted when the user starts dragging the range bar (multi mode only).
+ * @event cx-range-drag-end - Emitted when the user stops dragging the range bar (multi mode only).
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The range's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart input - The internal `<input>` element.
+ * @csspart tooltip - The range's tooltip.
+ * @csspart thumb - The thumbs (applies to both in multi mode).
+ * @csspart thumb-lower - The lower thumb (multi mode).
+ * @csspart thumb-upper - The upper thumb (multi mode).
+ * @csspart range - The range bar between the thumbs (multi mode).
+ *
+ * @cssproperty --thumb-size - The size of the thumb.
+ * @cssproperty --track-color-active - The color of the portion of the track that represents the current value.
+ * @cssproperty --track-color-inactive - The of the portion of the track that represents the remaining value.
+ * @cssproperty --track-height - The height of the track.
+ * @cssproperty --track-active-offset - The point of origin of the active track.
+ */
+export default class CxRange extends CortexElement implements CortexFormControl {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-tooltip': typeof CxTooltip;
+    };
+    private readonly formControlController;
+    private readonly hasSlotController;
+    private readonly localize;
+    private resizeObserver;
+    input: HTMLInputElement;
+    multiInputMin: HTMLInputElement;
+    multiInputMax: HTMLInputElement;
+    output: CxTooltip;
+    minTooltip: CxTooltip;
+    maxTooltip: CxTooltip;
+    minThumb: HTMLElement;
+    maxThumb: HTMLElement;
+    range: HTMLElement;
+    multiContainer: HTMLElement;
+    private hasFocus;
+    private hasTooltip;
+    private _multiValue;
+    private _singleValue;
+    private multiDragTarget;
+    private multiIsDragging;
+    private multiRangeWidth;
+    private multiDragStartValue;
+    private thumbConstraints;
+    /**
+     * Sets the dragging state for the component. This allows us to control the style in CSS.
+     */
+    state: 'dragging' | 'idle';
+    title: string;
+    /** The name of the range, submitted as a name/value pair with form data. */
+    name: string;
+    /**
+     * The current value of the range.
+     * For single mode: a number (e.g., `50` or `"50"`).
+     * For multi mode: an array [min, max] or space-separated string (e.g., `[25, 75]` or `"25 75"`).
+     */
+    set value(val: number | [number, number]);
+    get value(): number | [number, number];
+    /** Enables multi-range mode with two thumbs for selecting a range. */
+    multi: boolean;
+    /** The range's label. If you need to display HTML, use the `label` slot instead. */
+    label: string;
+    /** The range's help text. If you need to display HTML, use the help-text slot instead. */
+    helpText: string;
+    /** Disables the range. */
+    disabled: boolean;
+    /** The minimum acceptable value of the range. */
+    min: number;
+    /** The maximum acceptable value of the range. */
+    max: number;
+    /** The interval at which the range will increase and decrease. */
+    step: number | undefined;
+    /** The preferred placement of the range's tooltip. */
+    tooltipPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /**
+      Controls when the tooltip is displayed:
+  
+      - on: always displayed.
+      - off: never displayed.
+      - auto: displayed on hover or focus.
+    */
+    tooltipDisplay: 'auto' | 'on' | 'off';
+    /** Controls the `hoist` attribute of the tooltip. */
+    tooltipHoist: boolean;
+    /**
+     * A function used to format the tooltip's value. The range's value is passed as the first and only argument. The
+     * function should return a string to display in the tooltip.
+     */
+    tooltipFormatter: (value: number) => string;
+    /**
+     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+     * the same document or shadow root for this to work.
+     */
+    form: string | HTMLElement | undefined;
+    /** How close the thumb must be to a mark until snapping occurs. */
+    snapThreshold: number;
+    /**
+     * Displays a tick mark for each step in the range. If no `marks` slot is provided, marks will be auto-generated using the `step` value.
+     */
+    showMarks: boolean;
+    /** The offset of the tooltip from the thumb. */
+    tooltipOffset: number;
+    /** Disables the min (lower) thumb. Only used in multi mode. */
+    minThumbDisabled: boolean;
+    /** Disables the max (upper) thumb. Only used in multi mode. */
+    maxThumbDisabled: boolean;
+    /** Disables dragging the range bar. Only used in multi mode. */
+    rangeSlideDisabled: boolean;
+    /**
+     * Controls the behavior when thumbs are dragged across each other. Only used in multi mode.
+     * - 'swap': Thumbs swap positions when crossing (default).
+     * - 'block': Thumbs are blocked from crossing each other.
+     */
+    thumbsCrossover: 'swap' | 'block';
+    /** ARIA label for the lower thumb. Only used in multi mode. */
+    ariaLabelLower: string | undefined;
+    /** ARIA label for the upper thumb. Only used in multi mode. */
+    ariaLabelUpper: string | undefined;
+    /** Prevents thumbs from visually overlapping when they have the same or close values. Only used in multi mode. */
+    noOverlap: boolean;
+    /**
+     * Controls how thumbs are positioned at the edges (0% and 100%) when no-overlap is enabled.
+     * Only used in multi mode with no-overlap.
+     * - 'center': Thumb center aligns with the edge (default). Half the thumb may extend outside.
+     * - 'inside': Thumbs stay fully within the track bounds.
+     */
+    thumbEdgeMode: 'center' | 'inside';
+    marks: Mark[];
+    /** The default value of the form control. Primarily used for resetting the form control. */
+    defaultValue: number | [number, number];
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    /** Gets the validation message */
+    get validationMessage(): string;
+    get minThumbSize(): number;
+    get maxThumbSize(): number;
+    get multiContainerSize(): number;
+    get minThumbOffset(): number;
+    get maxThumbOffset(): number;
+    /**
+     * Gets the track left inset for 'inside' mode.
+     * This trims the track on the left to match the min thumb's visual bounds.
+     */
+    get trackLeftInset(): number;
+    /**
+     * Gets the track right inset for 'inside' mode.
+     * This trims the track on the right to match the max thumb's visual bounds.
+     */
+    get trackRightInset(): number;
+    constructor();
+    connectedCallback(): void;
+    initMarks(): void;
+    disconnectedCallback(): void;
+    private handleChange;
+    private handleInput;
+    private handleBlur;
+    private handleFocus;
+    private handleMouseUp;
+    /**
+     * Snaps the value to the nearest snap point to a given x position
+     * @param x the x position that is seeked to
+     * @returns whether the value has changed
+     */
+    private snapValue;
+    private handleThumbDragStart;
+    private handleMaxThumbDragStart;
+    private handleMinThumbDragStart;
+    private handleMinThumbKeyDown;
+    private handleMaxThumbKeyDown;
+    private handleMouseDown;
+    private handleKeyDown;
+    private valueToPercentage;
+    private pixelsToValue;
+    private syncProgress;
+    handleValueChange(): void;
+    handleDisabledChange(): void;
+    syncRange(): void;
+    private handleInvalid;
+    /**
+     * Sets focus on the range. In multi mode, focuses the min thumb by default, or max if min is disabled.
+     * @param options - The focus options to pass to the thumb.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Removes focus from the range. In multi mode, blurs both thumbs.
+     */
+    blur(): void;
+    /** Checks if multi mode thumb is available for stepping */
+    private isMultiThumbAvailable;
+    /** Updates multi value for a specific thumb and returns whether it changed */
+    private updateMultiThumbValue;
+    /** Finds the next mark value greater than the current value */
+    private findNextMark;
+    /** Finds the previous mark value less than the current value */
+    private findPreviousMark;
+    /** Handles step up for single mode */
+    private stepUpSingle;
+    /** Handles step down for single mode */
+    private stepDownSingle;
+    /** Handles step up for multi mode */
+    private stepUpMulti;
+    /** Handles step down for multi mode */
+    private stepDownMulti;
+    /**
+     * Increments the value of the range by the value of the step attribute.
+     * @param thumbType - For multi mode, specifies which thumb to move ('min' or 'max')
+     * @returns whether the value has changed
+     */
+    stepUp(thumbType?: 'min' | 'max'): boolean;
+    /**
+     * Decrements the value of the range by the value of the step attribute.
+     * @param thumbType - For multi mode, specifies which thumb to move ('min' or 'max')
+     * @returns whether the value has changed
+     */
+    stepDown(thumbType?: 'min' | 'max'): boolean;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    getAllMarks(): NodeListOf<HTMLElement> | undefined;
+    renderMarks(): import('lit').TemplateResult<1>[];
+    private handleMultiResize;
+    private multiValueToPercent;
+    private multiPercentToValue;
+    private multiPositionToValue;
+    private getConstrainedPercent;
+    private getMultiThumbStyle;
+    /**
+     * Gets the style for the range bar (active portion between thumbs).
+     * In 'inside' mode, the bar is trimmed to match the track bounds.
+     */
+    private getRangeBarStyle;
+    private setMultiValue;
+    private updateNoOverlapConstraints;
+    private initiateMultiThumbDrag;
+    private initiateMultiRangeDrag;
+    private handleMultiContainerClick;
+    private handleMultiKeyDown;
+    handleConstraintsChange(): void;
+    handleMultiValueChange(): void;
+    private renderSingleRange;
+    private renderMultiRange;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-range': CxRange;
+    }
+}
+export {};

package/library/packages/atoms/src/components/range/range.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/atoms/src/components/range/range.utils.d.ts

@@ -0,0 +1,48 @@
+export type ThumbEdgeMode = 'center' | 'inside';
+export type ThumbConstraints = {
+    /**
+     * Max thumb's maxLeft constraint (can't go outside right edge).
+     * Only applies in 'inside' mode.
+     */
+    maxThumbMaxLeft: number;
+    /**
+     * Max thumb's minLeft constraint (can't go below min thumb).
+     */
+    maxThumbMinLeft: number;
+    /**
+     * Min thumb's maxLeft constraint (can't go past max thumb).
+     */
+    minThumbMaxLeft: number;
+    /**
+     * Min thumb's minLeft constraint (can't go outside left edge).
+     * Only applies in 'inside' mode.
+     */
+    minThumbMinLeft: number;
+};
+/**
+ * Calculates the constraint values for both thumbs when they are at the same position.
+ *
+ * @param options.maxOffset - The max thumb's offset as a percentage
+ * @param options.minOffset - The min thumb's offset as a percentage
+ * @param options.percentValue - The shared position as a percentage (0-100)
+ * @param options.edgeMode - How thumbs should be positioned at edges:
+ *   - 'center': Thumb center aligns with edge (default). Redistributes overflow/underflow.
+ *   - 'inside': Thumbs stay fully within track bounds.
+ *
+ * @returns Object containing all four constraint values
+ *
+ * @example
+ * // At 0% with center mode (default):
+ * getMultiThumbConstraints({ percentValue: 0, minOffset: 5, maxOffset: 5 })
+ * // minThumbMinLeft: 0, minThumbMaxLeft: 0, maxThumbMinLeft: 10, maxThumbMaxLeft: 100
+ *
+ * // At 0% with inside mode:
+ * getMultiThumbConstraints({ percentValue: 0, minOffset: 5, maxOffset: 5, edgeMode: 'inside' })
+ * // minThumbMinLeft: 5, minThumbMaxLeft: 5, maxThumbMinLeft: 15, maxThumbMaxLeft: 95
+ */
+export declare function getMultiThumbConstraints({ edgeMode, maxOffset, minOffset, percentValue, }: {
+    edgeMode?: ThumbEdgeMode;
+    maxOffset: number;
+    minOffset: number;
+    percentValue: number;
+}): ThumbConstraints;

package/library/packages/atoms/src/components/rating/rating.d.ts

@@ -0,0 +1,78 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+import { default as CxIcon } from '../icon/icon';
+
+/**
+ * @summary Ratings give users a way to quickly view and provide feedback.
+ *
+ * @event cx-change - Emitted when the rating's value changes.
+ * @event {{ phase: 'start' | 'move' | 'end', value: number }} cx-hover - Emitted when the user hovers over a value. The
+ *  `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the
+ *  rating's value would be if the user were to commit to the hovered value.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --symbol-color - The inactive color for symbols.
+ * @cssproperty --symbol-color-active - The active color for symbols.
+ * @cssproperty --symbol-size - The size of symbols.
+ * @cssproperty [--symbol-container-size=40px] - The size of the symbol container when using `outlined` variant.
+ * @cssproperty --symbol-spacing - The spacing to use around symbols.
+ */
+export default class CxRating extends CortexElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'cx-icon': typeof CxIcon;
+    };
+    private readonly localize;
+    rating: HTMLElement;
+    private hoverValue;
+    private isHovering;
+    /** A label that describes the rating to assistive devices. */
+    label: string;
+    /** The current rating. */
+    value: number;
+    /** The highest rating to show. */
+    max: number;
+    /**
+     * The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this
+     * attribute to `0.5`.
+     */
+    precision: number;
+    /** Makes the rating readonly. */
+    readonly: boolean;
+    /** Disables the rating. */
+    disabled: boolean;
+    /** Variant */
+    variant: 'default' | 'outlined';
+    /**
+     * A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.
+     * The function should return a string containing trusted HTML of the symbol to render at the specified value. Works
+     * well with `<cx-icon>` elements.
+     */
+    getSymbol: (value: number, active: boolean) => string;
+    private getValueFromMousePosition;
+    private getValueFromTouchPosition;
+    private getValueFromXCoordinate;
+    private handleClick;
+    private setValue;
+    private handleKeyDown;
+    private handleMouseEnter;
+    private handleMouseMove;
+    private handleMouseLeave;
+    private handleTouchStart;
+    private handleTouchMove;
+    private handleTouchEnd;
+    private roundToPrecision;
+    handleHoverValueChange(): void;
+    handleIsHoveringChange(): void;
+    /** Sets focus on the rating. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the rating. */
+    blur(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-rating': CxRating;
+    }
+}

package/library/packages/atoms/src/components/rating/rating.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;