dap-design-system 0.50.2 → 0.52.0

package/dist/components/button/button.variants.d.ts

@@ -2,4 +2,4 @@ export declare const buttonVariants: (props?: ({
     intent?: "clean" | "subtle" | "primary" | "outline" | "primary-inverted" | "outline-inverted" | "subtle-inverted" | "clean-inverted" | "subtle-neutral" | "subtle-quiet" | "subtle-quiet-inverted" | "subtle-menu" | "subtle-menu-item" | null | undefined;
     size?: "lg" | "md" | "sm" | "xs" | null | undefined;
     shape?: "button" | "circle" | null | undefined;
-} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/chip/chip.component.d.ts

@@ -51,7 +51,21 @@ export default class DapDSChip extends DdsElement {
     value?: string;
     /** The aria label for the delete button */
     deleteAriaLabel?: string;
+    private _slotNodes;
+    private _slotTextContent;
     static readonly styles: import('lit').CSSResult;
+    /**
+     * Gets the text content from the slot nodes
+     */
+    private extractSlotTextContent;
+    /**
+     * Handles slot content changes
+     */
+    private handleSlotChange;
+    /**
+     * Gets the aria-label for the chip when removable
+     */
+    private getRemovableAriaLabel;
     updated(changedProperties: Map<string, unknown>): void;
     private handleClick;
     private handleRemove;

package/dist/components/code-puncher/code-puncher-slot.component.d.ts

@@ -0,0 +1,33 @@
+import { nothing } from 'lit';
+import { DdsElement } from '../../internal/dds-hu-element';
+/**
+ * `dap-ds-code-puncher-slot`
+ * @summary Individual digit input slot for code puncher.
+ * @element dap-ds-code-puncher-slot
+ * @title - Code puncher slot
+ *
+ * @csspart base - The slot container.
+ * @csspart input - The input element.
+ */
+export default class DapDSCodePuncherSlot extends DdsElement {
+    static readonly styles: import('lit').CSSResult;
+    private _consumer;
+    private _ctx;
+    private _input;
+    private _index;
+    private _isActive;
+    private _registered;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(_changedProperties: Map<string, unknown>): void;
+    get disabled(): boolean;
+    get readonly(): boolean;
+    get size(): 'xs' | 'sm' | 'lg';
+    focus(): void;
+    private _onInput;
+    private _onKeydown;
+    private _handlePaste;
+    private _onFocus;
+    private _onBlur;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+}

package/dist/components/code-puncher/code-puncher.component.d.ts

@@ -0,0 +1,75 @@
+import { PropertyValueMap } from 'lit';
+import { GenericFormElement } from '../../internal/mixin/genericFormElement';
+/**
+ * `dap-ds-code-puncher`
+ * @summary A composable PIN/OTP input component for entering verification codes.
+ * @element dap-ds-code-puncher
+ * @title - Code Puncher
+ * @group code-puncher
+ *
+ * @property {string} value - The complete code value.
+ * @property {boolean} mask - Mask input like password. Default is false.
+ * @property {string} pattern - Regex pattern for allowed characters. Default is '[0-9]'.
+ * @property {string} placeholder - Placeholder character for empty slots.
+ * @property {'xs' | 'sm' | 'lg'} size - The size of the slots. Default is 'sm'.
+ * @property {string} label - The label of the component.
+ * @property {string} description - The description of the component.
+ * @property {string} tooltip - The tooltip of the component.
+ * @property {string} feedback - The feedback message.
+ * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type.
+ * @property {'success' | 'error'} status - The status of the component.
+ * @property {boolean} disabled - Disable all slots. Default is false.
+ * @property {boolean} readonly - Read-only state. Default is false.
+ * @property {boolean} required - Required for form validation. Default is false.
+ * @property {string} name - Form element name.
+ * @property {string} autocomplete - Autocomplete hint. Default is 'one-time-code'.
+ *
+ * @event {{ value: string, index: number }} dds-input - Fires on each digit input.
+ * @event {{ value: string }} dds-change - Fires when value changes.
+ * @event {{ value: string }} dds-complete - Fires when all slots are filled.
+ * @event dds-focus - Fires when component gains focus.
+ * @event dds-blur - Fires when component loses focus.
+ *
+ * @slot default - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.
+ *
+ * @csspart base - The main container.
+ * @csspart slots - The slots container.
+ * @csspart label - The label element.
+ * @csspart description - The description element.
+ * @csspart feedback - The feedback element.
+ */
+export default class DapDSCodePuncher extends GenericFormElement {
+    mask: boolean;
+    pattern: string;
+    placeholder: string;
+    autocomplete: string;
+    private _slots;
+    private _activeIndex;
+    private _chars;
+    private _hasFocus;
+    static readonly styles: import('lit').CSSResult;
+    private _patternRegex;
+    private _provider;
+    private _getContextValue;
+    connectedCallback(): void;
+    private _updateContext;
+    get value(): string;
+    set value(v: string);
+    protected willUpdate(changedProperties: PropertyValueMap<any>): void;
+    private _registerSlot;
+    private _unregisterSlot;
+    private _getCharAt;
+    private _setCharAt;
+    private _focusSlot;
+    private _handleKeydown;
+    private _handlePaste;
+    private _handleFocusIn;
+    private _handleFocusOut;
+    setActiveIndex(index: number): void;
+    get focusElement(): HTMLElement;
+    focus(): void;
+    setValidity(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private _renderFeedback;
+    private _handleSlotChange;
+}

package/dist/components/code-puncher/code-puncher.context.d.ts

@@ -0,0 +1,24 @@
+import { CommonFormElementSize } from '../../common/types';
+import { default as DapDSCodePuncherSlot } from './code-puncher-slot.component';
+export interface CodePuncherContext {
+    registerSlot: (slot: DapDSCodePuncherSlot) => number;
+    unregisterSlot: (slot: DapDSCodePuncherSlot) => void;
+    getCharAt: (index: number) => string;
+    setCharAt: (index: number, char: string) => void;
+    focusSlot: (index: number) => void;
+    handleKeydown: (index: number, event: KeyboardEvent) => void;
+    handlePaste: (event: ClipboardEvent) => void;
+    activeIndex: number;
+    mask: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    size: CommonFormElementSize;
+    placeholder: string;
+    pattern: RegExp;
+    status?: 'success' | 'error';
+    autocomplete: string;
+    slotCount: number;
+}
+export declare const codePuncherContext: {
+    __context__: CodePuncherContext;
+};

package/dist/components/code-puncher/code-puncher.d.ts

@@ -0,0 +1,12 @@
+import { default as DapDSCodePuncher } from './code-puncher.component.js';
+import { default as DapDSCodePuncherSlot } from './code-puncher-slot.component.js';
+export * from './code-puncher.component.js';
+export * from './code-puncher.context.js';
+export * from './code-puncher-slot.component.js';
+export { DapDSCodePuncher, DapDSCodePuncherSlot };
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-code-puncher': DapDSCodePuncher;
+        'dap-ds-code-puncher-slot': DapDSCodePuncherSlot;
+    }
+}

package/dist/components/datatable/datatable.component.d.ts

@@ -165,6 +165,14 @@ export default class DapDSDataTable<T> extends DdsElement {
     pagination: PaginationState;
     /** @ignore */
     private _pagination;
+    /** Column sizing state of the table */
+    columnSizing?: Record<string, number>;
+    /** @ignore */
+    private _columnSizing;
+    /** ID of element labeling the table */
+    ariaLabel: string | null;
+    /** @ignore */
+    private resizeObserver?;
     /** @ignore */
     private get isTableEmpty();
     /** @ignore */
@@ -175,6 +183,10 @@ export default class DapDSDataTable<T> extends DdsElement {
     debug: boolean;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /**
+     * Cleanup resize observer
+     */
+    disconnectedCallback(): void;
     private readonly columnsMemo;
     private renderHeaderCell;
     private renderHeaderCellContent;
@@ -190,6 +202,7 @@ export default class DapDSDataTable<T> extends DdsElement {
     private renderCell;
     private handleRowClick;
     private handleRowKeydown;
+    private readonly renderColgroup;
     private readonly renderHeader;
     private readonly renderSkeletonRows;
     private readonly renderBody;

package/dist/components/icons/editor/editor-separator/editor-separator.component.d.ts

@@ -0,0 +1,30 @@
+import { PropertyValueMap } from 'lit';
+import { DdsElement } from '../../../../internal/dds-hu-element';
+/**
+ * `dap-ds-icon-separator`
+ * @summary An icon
+ * @element dap-ds-icon-separator
+ * @title - EditorSeparator
+ * @group icon
+ * @icontype editor
+ *
+ * @attribute {number} size - (optional) The width and height in pixels
+ * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute
+ * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility
+ * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus
+ *
+ * @csspart base - The main icon container.
+ */
+export default class EditorSeparator extends DdsElement {
+    /** (optional) The width and height in pixels */
+    size?: number | undefined;
+    /** (optional) Sets the icon color via the `fill` attribute */
+    selected?: boolean;
+    /** (optional) When using the icon standalone, make it meaningful for accessibility */
+    accessibilityTitle?: string;
+    /** (optional) If `true` the icon can receive focus */
+    focusable?: boolean;
+    static readonly styles: import('lit').CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): import('lit-html').TemplateResult;
+}

package/dist/components/icons/editor/editor-separator/editor-separator.d.ts

@@ -0,0 +1,8 @@
+import { default as EditorSeparator } from './editor-separator.component.js';
+export * from './editor-separator.component.js';
+export default EditorSeparator;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-icon-separator': EditorSeparator;
+    }
+}

package/dist/components/link/link.variants.d.ts

@@ -3,4 +3,4 @@ export declare const linkVariants: (props?: ({
     size?: "lg" | "md" | "sm" | "xs" | null | undefined;
     weight?: "bold" | "normal" | null | undefined;
     decoration?: "none" | "underline" | null | undefined;
-} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/modal/modal-base-element.d.ts

@@ -56,6 +56,7 @@ export default class ModalBaseElement extends DdsElement {
     private getFocusableElements;
     private getActiveElement;
     private getElementFromElement;
+    private isElementContainedIn;
     private handleFocusTrap;
     renderModal(): import('lit-html').TemplateResult<1>;
 }

package/dist/components/option-group/option-group.component.d.ts

@@ -0,0 +1,24 @@
+import { DdsElement } from '../../internal/dds-hu-element';
+/**
+ * `dap-ds-option-group`
+ * @summary An option group is a container for grouping related option items.
+ * Used with dap-ds-select to create grouped options that render as native optgroup elements.
+ * @element dap-ds-option-group
+ * @title - Option group
+ *
+ * @property {string} label - The label of the option group (displayed in native optgroup).
+ * @property {boolean} disabled - Whether all options in the group are disabled.
+ *
+ * @slot - The option items in this group.
+ *
+ * @csspart base - The main option group container.
+ * @csspart label - The label of the option group.
+ */
+export default class DapDSOptionGroup extends DdsElement {
+    /** The label of the option group */
+    label?: string;
+    /** Whether all options in the group are disabled */
+    disabled?: boolean;
+    static readonly styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/option-group/option-group.d.ts

@@ -0,0 +1,8 @@
+import { default as DapDSOptionGroup } from './option-group.component.js';
+export * from './option-group.component.js';
+export default DapDSOptionGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-option-group': DapDSOptionGroup;
+    }
+}

package/dist/components/scroll-progress/scroll-progress.component.d.ts

@@ -0,0 +1,57 @@
+import { DdsElement } from '../../internal/dds-hu-element';
+export type ScrollProgressVariant = 'neutral' | 'brand' | 'negative' | 'positive' | 'inverted';
+export type ScrollProgressSize = 'xs' | 'sm' | 'md';
+/**
+ * `dap-ds-scroll-progress`
+ * @summary A progress bar that displays scroll position, supporting both page-level and container-level scroll tracking.
+ * @element dap-ds-scroll-progress
+ * @title - Scroll Progress
+ *
+ * @csspart base - The main scroll progress container.
+ * @csspart track - The progress track (background).
+ * @csspart fill - The progress fill bar.
+ *
+ * @cssprop --dds-scroll-progress-z-index - Z-index for fixed positioning (default: 1000)
+ * @cssprop --dds-scroll-progress-transition - Transition for progress updates (default: width 0.1s ease-out)
+ * @cssprop --dds-scroll-progress-track-color - Background color of the progress track (default: var(--dds-neutral-200))
+ * @cssprop --dds-scroll-progress-fill-color-neutral - Fill color for neutral variant
+ * @cssprop --dds-scroll-progress-fill-color-brand - Fill color for brand variant
+ * @cssprop --dds-scroll-progress-fill-color-negative - Fill color for negative variant
+ * @cssprop --dds-scroll-progress-fill-color-positive - Fill color for positive variant
+ * @cssprop --dds-scroll-progress-fill-color-inverted - Fill color for inverted variant
+ *
+ */
+export default class DapDSScrollProgress extends DdsElement {
+    /**
+     * CSS selector for scroll container. If not set, tracks global page scroll.
+     * When set, the component uses sticky positioning within the container.
+     */
+    target?: string;
+    /**
+     * The color variant of the progress indicator.
+     * @type {"neutral" | "brand" | "negative" | "positive" | "inverted"}
+     */
+    variant: ScrollProgressVariant;
+    /**
+     * The size of the progress bar.
+     * @type {"xs" | "sm" | "md"}
+     */
+    size: ScrollProgressSize;
+    /**
+     * Current progress value (0-100).
+     */
+    private progress;
+    private targetElement;
+    private rafId;
+    private boundHandleScroll;
+    static readonly styles: import('lit').CSSResult;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
+    private setupScrollListener;
+    private cleanupScrollListener;
+    private handleScroll;
+    private calculateProgress;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/select/select.component.d.ts

@@ -1,5 +1,6 @@
 import { FloatingStrategy, PopupPlacement } from '../../common/types';
 import { GenericFormElement } from '../../internal/mixin/genericFormElement';
+import { default as DapDSOptionItem } from '../option-item/option-item.component';
 import { default as DapDSOptionList } from '../option-list/option-list.component';
 /**
  * `dap-ds-select`
@@ -100,6 +101,8 @@ export default class DapDSSelect extends GenericFormElement {
     sync?: boolean;
     /** Whether the select is in mobile mode. */
     isMobile?: boolean;
+    /** Whether to render a native HTML select element for mobile-friendly option selection. */
+    native?: boolean;
     /** The loading state of the select. */
     loading?: boolean;
     /** The max heigth of the select dropdown. */
@@ -110,6 +113,8 @@ export default class DapDSSelect extends GenericFormElement {
      * @type {'absolute' | 'fixed'}
      */
     floatingStrategy: FloatingStrategy;
+    /** The aria label of the select (used when there's no label element) */
+    ariaLabel: string | null;
     /**
      * @ignore
      */
@@ -136,7 +141,7 @@ export default class DapDSSelect extends GenericFormElement {
      * Get the active descendant element for aria-activedescendant
      * Returns the currently focused option when dropdown is open, otherwise null
      */
-    getActiveDescendant(): import('../option-item/option-item.component').default | null | undefined;
+    getActiveDescendant(): DapDSOptionItem | null | undefined;
     /**
      * Get the aria-describedby value, combining description and feedback IDs
      */
@@ -151,6 +156,11 @@ export default class DapDSSelect extends GenericFormElement {
     handleInvalid(event: Event): void;
     private readonly handleSelectedChange;
     private readonly handleOptionDeselect;
+    private readonly handleNativeChange;
+    private renderNativeOption;
+    private renderNativeOptgroup;
+    private renderNativeOptions;
+    private renderNativeSelect;
     renderTriggerElement(): import('lit-html').TemplateResult;
     renderOptionList(): import('lit-html').TemplateResult;
     render(): import('lit-html').TemplateResult;