dap-design-system 0.51.0 → 0.52.0

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. */
@@ -138,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
      */
@@ -153,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;