dap-design-system 0.52.10 → 0.53.0

package/dist/common/viewport.d.ts

@@ -0,0 +1,28 @@
+import { Size } from './types';
+export type BreakpointName = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Map from breakpoint to component size. A key applies at that breakpoint and all narrower ones (e.g. md:lg → xs, sm, md use lg).
+ */
+export type BreakpointToSizeMap = Partial<Record<BreakpointName, Size>>;
+/**
+ * Parses a string like "sm:lg,md:md" into a BreakpointToSizeMap.
+ * Key = breakpoint (xs, sm, md, lg, xl, 2xl). Value = component size (xxs, xs, sm, md, lg).
+ * Invalid pairs are skipped. Returns undefined for empty/null/whitespace.
+ */
+export declare function parseResponsiveSizeMap(value: string | null | undefined): BreakpointToSizeMap | undefined;
+/**
+ * Returns the effective component size from the breakpoint→size map.
+ * A map entry like "md:lg" applies at that breakpoint and all narrower breakpoints (xs, sm, md).
+ * With multiple entries we use the narrowest matching key (most specific). E.g. "sm:lg,md:md" → xs/sm use lg, md uses md.
+ */
+export declare function getResponsiveSize(requestedSize: Size, breakpointToSizeMap: BreakpointToSizeMap | null | undefined): Size;
+/**
+ * Subscribes to viewport changes at the given breakpoint. The callback is invoked
+ * when the viewport crosses the breakpoint. Returns an unsubscribe function.
+ */
+export declare function subscribeToBreakpoint(breakpoint: BreakpointName, callback: () => void): () => void;
+/**
+ * Subscribes to multiple breakpoints; callback runs when any of them is crossed.
+ * Returns a single unsubscribe that removes all listeners.
+ */
+export declare function subscribeToBreakpoints(breakpoints: BreakpointName[], callback: () => void): () => void;

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

@@ -1,5 +1,5 @@
 import { PropertyValueMap, TemplateResult } from 'lit';
-import { CommonSize, HeadingLevel, LabelPlacement } from '../../dap-design-system';
+import { HeadingLevel, LabelPlacement } from '../../dap-design-system';
 import { DdsElement } from '../../internal/dds-hu-element';
 export type AccordionVariant = 'default' | 'collapsed' | 'clean' | 'clean-collapsed';
 export interface AccordionEventDetail {
@@ -8,7 +8,11 @@ export interface AccordionEventDetail {
 }
 export type AccordionOpenedEvent = CustomEvent<AccordionEventDetail>;
 export type AccordionClosedEvent = CustomEvent<AccordionEventDetail>;
-export declare class AccordionBaseElement extends DdsElement {
+declare const AccordionBaseWithSized: typeof DdsElement & {
+    new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
+    prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
+};
+export declare class AccordionBaseElement extends AccordionBaseWithSized {
     static readonly styles: import('lit').CSSResult;
     private static nextId;
     private readonly accordionId;
@@ -20,10 +24,8 @@ export declare class AccordionBaseElement extends DdsElement {
     protected button?: HTMLButtonElement;
     /** Query for the accordion content element */
     protected content?: HTMLDivElement;
-    /** The size of the accordion
-     * @type { 'sm' | 'lg' }
-     */
-    size: CommonSize;
+    /** Display size for accordion styling (sm or lg); other effective sizes map to sm. */
+    private get accordionDisplaySize();
     /** The heading level of the accordion
      * @type { 1 | 2 | 3 | 4 | 5 | 6 }
      */
@@ -78,3 +80,4 @@ export declare class AccordionBaseElement extends DdsElement {
      */
     renderAccordion(): TemplateResult;
 }
+export {};

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

@@ -5,7 +5,9 @@ import { AccordionBaseElement } from './accordion-base-element';
  * @summary An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.
  * @title - Accordion
  *
- * @property { 'sm' | 'lg' } size - The size of the accordion. Default is `sm`.
+ * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm).
+ * @property {string} sizeMap - Responsive size map (e.g. "md:lg")
+ * @property {string} parentSized - When "true", size is taken from the parent card if present.
  * @property {string} heading - The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided
  * @property { 1 | 2 | 3 | 4 | 5 | 6 } headingLevel - The heading level of the accordion. Default is `4`.
  * @property {boolean} opened - Whether the accordion is opened. Default is `false`.

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

@@ -1,5 +1,9 @@
-import { AvatarShape, AvatarVariant, Size } from '../../dap-design-system';
+import { AvatarShape, AvatarVariant } from '../../dap-design-system';
 import { DdsElement } from '../../internal/dds-hu-element';
+declare const AvatarBaseWithSized: typeof DdsElement & {
+    new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
+    prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
+};
 /**
  * `dap-ds-avatar`
  * @summary Avatar component can be used to display user profile images, initials, or icons.
@@ -43,21 +47,11 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssproperty --dds-avatar-loading-background - Background color when loading (default: var(--dds-neutral-100))
  * @cssproperty --dds-avatar-error-background - Background color when image fails to load (default: var(--dds-negative-100))
  * @cssproperty --dds-avatar-error-color - Text color when image fails to load (default: var(--dds-negative-600))
+ *
+ * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the avatar. Default is `md`.
+ * @property {string} sizeMap - Responsive size map (e.g. "md:lg").
  */
-export default class DapDSAvatar extends DdsElement {
-    /** The size of the avatar
-     * @default md
-     * @type { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' }
-     * @example
-     * ```html
-     * <dap-ds-avatar size="xxs">
-     * <dap-ds-avatar size="xs">
-     * <dap-ds-avatar size="sm">
-     * <dap-ds-avatar size="md">
-     * <dap-ds-avatar size="lg">
-     * ```
-     */
-    size: Size;
+export default class DapDSAvatar extends AvatarBaseWithSized {
     /** The shape of the avatar
      * @default circle
      * @type { 'circle' | 'rounded' | 'square' }
@@ -97,6 +91,7 @@ export default class DapDSAvatar extends DdsElement {
     /** The height of the avatar. This will override the size */
     height: number;
     private hasImageError;
+    constructor();
     private isImageLoading;
     static readonly styles: import('lit').CSSResult;
     private handleImageLoad;
@@ -112,3 +107,4 @@ export default class DapDSAvatar extends DdsElement {
     private renderContent;
     render(): import('lit-html').TemplateResult;
 }
+export {};

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

@@ -1,5 +1,8 @@
-import { Size } from '../../dap-design-system';
 import { DdsElement } from '../../internal/dds-hu-element';
+declare const AvatarGroupBaseWithSized: typeof DdsElement & {
+    new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
+    prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
+};
 export type AvatarGroupLayout = 'stack' | 'grid';
 /**
  * `dap-ds-avatar-group`
@@ -28,22 +31,13 @@ export type AvatarGroupLayout = 'stack' | 'grid';
  * @cssproperty --dds-avatar-group-size-sm - Size for small avatars (default: var(--dds-spacing-1200))
  * @cssproperty --dds-avatar-group-size-xs - Size for extra small avatars (default: var(--dds-spacing-800))
  * @cssproperty --dds-avatar-group-size-xxs - Size for extra extra small avatars (default: var(--dds-spacing-400))
+ *
+ * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of avatars in the group. Default is `md`. See SizedMixin.
+ * @property {string} sizeMap - Responsive size map (e.g. "md:lg"); see SizedMixin.
  */
-export default class DapDSAvatarGroup extends DdsElement {
+export default class DapDSAvatarGroup extends AvatarGroupBaseWithSized {
     private avatars;
-    /** The size of avatars in the group
-     * @default md
-     * @type { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' }
-     * @example
-     * ```html
-     * <dap-ds-avatar-group size="xxs">
-     * <dap-ds-avatar-group size="xs">
-     * <dap-ds-avatar-group size="sm">
-     * <dap-ds-avatar-group size="md">
-     * <dap-ds-avatar-group size="lg">
-     * ```
-     */
-    size: Size;
+    constructor();
     /** Layout type for the avatar group
      * @default stack
      * @type { 'stack' | 'grid' }
@@ -73,3 +67,4 @@ export default class DapDSAvatarGroup extends DdsElement {
     private styleSlottedAvatars;
     render(): import('lit-html').TemplateResult;
 }
+export {};

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

@@ -1,5 +1,9 @@
 import { PropertyValueMap } from 'lit';
 import { DdsElement } from '../../internal/dds-hu-element';
+declare const BadgeBaseWithSized: typeof DdsElement & {
+    new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
+    prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
+};
 export type BadgeType = 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative';
 export type BadgeSize = 'sm' | 'lg';
 /**
@@ -8,6 +12,9 @@ export type BadgeSize = 'sm' | 'lg';
  * @element dap-ds-badge
  * @title - Badge
  *
+ * @property { 'sm' | 'lg' } size - The size of the badge. Default is `sm`.
+ * @property {string} sizeMap - Responsive size map (e.g. "md:lg").
+ *
  * @slot - The content of the badge.
  * @slot icon - The icon of the badge.
  *
@@ -51,16 +58,15 @@ export type BadgeSize = 'sm' | 'lg';
  * @cssproperty --dds-badge-negative-border-color - The border color of the negative badge (default: var(--dds-border-negative-base))
  * @cssproperty --dds-badge-negative-background - The background color of the negative badge (default: var(--dds-background-negative-medium))
  * @cssproperty --dds-badge-negative-color - The text color of the negative badge (default: var(--dds-text-negative-subtle))
+ *
  */
-export default class DapDSBadge extends DdsElement {
+export default class DapDSBadge extends BadgeBaseWithSized {
     /** The type of the badge
      * @type { 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative' }
      */
     type: BadgeType;
-    /** The size of the badge
-     * @type { 'sm' | 'lg' }
-     */
-    size: BadgeSize;
+    /** Maps effectiveSize from SizedMixin to the badge's two visual sizes (sm | lg). */
+    private get badgeSize();
     /** The icon of the badge, this is a name of a built in icon */
     icon?: string;
     /** Whether the badge represents dynamic content that should announce changes */
@@ -78,3 +84,4 @@ export default class DapDSBadge extends DdsElement {
     private renderIcon;
     render(): import('lit-html').TemplateResult;
 }
+export {};

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

@@ -74,5 +74,5 @@ export default class DapDSBanner extends DdsElement {
     static readonly styles: import('lit').CSSResult;
     protected firstUpdated(_changedProperties: PropertyValueMap<DapDSBanner> | Map<PropertyKey, unknown>): void;
     private onCloseClick;
-    render(): import('lit-html').TemplateResult | typeof nothing;
+    render(): typeof nothing | import('lit-html').TemplateResult;
 }

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

@@ -33,6 +33,12 @@ export type HtmlButtonType = 'button' | 'submit' | 'reset';
  * </dap-ds-button>
  * ```
  *
+ * @property {string} sizeMap - The size map of the button.
+ * @example
+ * ```html
+ * <dap-ds-button sizeMap="sm:lg,xs:xs">Small</dap-ds-button>
+ * ```
+ *
  * @event dds-loading-timeout - Emitted when the loading timeout is reached
  *
  * @slot - The content of the button. Can contain text, icons, or other elements.
@@ -286,7 +292,7 @@ export default class DapDSButton extends GenericFormElement {
     /**
      * @ignore
      */
-    get focusElement(): HTMLButtonElement | HTMLLinkElement;
+    get focusElement(): HTMLLinkElement | HTMLButtonElement;
     protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     disconnectedCallback(): void;

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

@@ -1,5 +1,5 @@
 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;
+    intent?: "subtle" | "clean" | "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/types').ClassProp) | undefined) => string;

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

@@ -104,5 +104,5 @@ export default class DapDSCallout extends DdsElement {
     handleClose(): void;
     private handleKeyDown;
     protected updated(changedProperties: Map<PropertyKey, unknown>): void;
-    render(): import('lit-html').TemplateResult | typeof nothing;
+    render(): typeof nothing | import('lit-html').TemplateResult;
 }

package/dist/components/card/card-actions.component.d.ts

@@ -12,6 +12,7 @@ declare const DapDSCardActions_base: typeof DdsElement & {
  *
  * @property {'sm' | 'md' | 'lg'} size - The size of the card actions. Default is `sm`.
  * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`.
+ * @property {string} sizeMap - Responsive size map (e.g. "md:lg").
  *
  * @slot - The content of the card actions.
  *
@@ -26,8 +27,6 @@ declare const DapDSCardActions_base: typeof DdsElement & {
  * @cssproperty --dds-card-actions-margin-sm - The margin for small size card actions spacing. (default: var(--dds-spacing-400))
  */
 export default class DapDSCardActions extends DapDSCardActions_base {
-    /** Whether the card actions should be sized from the parent. */
-    parentSized: string;
     static readonly styles: import('lit').CSSResult;
     constructor();
     render(): import('lit-html').TemplateResult;

package/dist/components/card/card-content.component.d.ts

@@ -12,6 +12,7 @@ declare const DapDSCardContent_base: typeof DdsElement & {
  *
  * @property {'sm' | 'md' | 'lg'} size - The size of the card subtitle. Default is `sm`.
  * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card content. This adds a margin to the card subtitle. Default is `bottom`.
+ * @property {string} sizeMap - Responsive size map (e.g. "md:lg").
  *
  * @slot - The content of the card-content.
  *
@@ -30,8 +31,6 @@ declare const DapDSCardContent_base: typeof DdsElement & {
 export default class DapDSCardContent extends DapDSCardContent_base {
     /** The base rendered root tag of the card content. */
     renderAs: string;
-    /** Whether the card content should be sized from the parent. */
-    parentSized: string;
     static readonly styles: import('lit').CSSResult;
     constructor();
     render(): import('lit-html').TemplateResult;

package/dist/components/card/card-subtitle.component.d.ts

@@ -10,8 +10,9 @@ declare const DapDSCardSubtitle_base: typeof DdsElement & {
  * @title - Card subtitle
  * @group card
  *
- * @property {'sm' | 'lg'} size - The size of the card subtitle. Default is `sm`.
+ * @property {'sm' | 'md' | 'lg'} size - The size of the card subtitle. Default is `sm`.
  * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card subtitle. This adds a margin to the card subtitle. Default is `top`.
+ * @property {string} sizeMap - Responsive size map (e.g. "md:lg").
  *
  * @slot - The content of the subtitle.
  *
@@ -45,8 +46,6 @@ declare const DapDSCardSubtitle_base: typeof DdsElement & {
 export default class DapDSCardSubtitle extends DapDSCardSubtitle_base {
     /** The base rendered root tag of the card subtitle. */
     renderAs: string;
-    /** Whether the card subtitle should be sized from the parent. */
-    parentSized: string;
     static readonly styles: import('lit').CSSResult;
     constructor();
     render(): import('lit-html').TemplateResult;

package/dist/components/card/card-title.component.d.ts

@@ -42,8 +42,6 @@ declare const DapDSCardTitle_base: typeof DdsElement & {
 export default class DapDSCardTitle extends DapDSCardTitle_base {
     /** The base rendered root tag of the card title. */
     renderAs: string;
-    /** Whether the card title should be sized from the parent. */
-    parentSized: string;
     /** Whether the card title should have no padding. */
     noPadding: boolean;
     static readonly styles: import('lit').CSSResult;

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

@@ -10,7 +10,8 @@ declare const DapDSCard_base: typeof DdsElement & {
  * @element dap-ds-card
  * @title - Card
  *
- * @property {'sm' | 'md' | 'lg'} size - The size of the card title. Default is `sm`.
+ * @property {'sm' | 'md' | 'lg'} size - The size of the card. Default is `sm`.
+ * @property {string} sizeMap - Responsive size map (e.g. "md:lg").
  *
  * @slot - The content of the card.
  *

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

@@ -19,6 +19,7 @@ import { LabeledChoiceElement } from '../../internal/mixin/labeledChoiceElement'
  * @property {boolean} readonly - Whether the checkbox is readonly (cannot be changed but value is submitted with form).
  * @property {boolean} required - Whether the checkbox is required.
  * @property {'xs' | 'sm' | 'lg'} size - The size of the checkbox. Default is 'sm'.
+ * @property {string} sizeMap - Responsive size map (e.g. "md:lg").
  * @property {'left' | 'right'} labelPlacement - The placement of the label.
  * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.
  * @property {boolean} subtle - The weight of the label.

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

@@ -1,4 +1,8 @@
 import { DdsElement } from '../../internal/dds-hu-element';
+declare const ChipBaseWithSized: typeof DdsElement & {
+    new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
+    prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
+};
 export type ChipSize = 'sm' | 'lg';
 /**
  * `dap-ds-chip`
@@ -6,6 +10,9 @@ export type ChipSize = 'sm' | 'lg';
  * @element dap-ds-chip
  * @title - Chip
  *
+ * @property { 'sm' | 'lg' } size - The size of the chip. Default is `sm`.
+ * @property {string} sizeMap - Responsive size map (e.g. "md:lg").
+ *
  * @event {{ value: string }} dds-remove - Fired when the chip is removed
  * @event {{ value?: string, selected: boolean }} dds-select - Fired when the chip is selected
  *
@@ -34,12 +41,11 @@ export type ChipSize = 'sm' | 'lg';
  * @cssproperty --dds-chip-selected-border-color - Border color of the selected chip (default: var(--dds-border-brand-base))
  * @cssproperty --dds-chip-disabled-background-color - Background color of the disabled chip (default: var(--dds-background-neutral-medium))
  * @cssproperty --dds-chip-disabled-text-color - Text color of the disabled chip (default: var(--dds-text-neutral-subtle))
+ *
  */
-export default class DapDSChip extends DdsElement {
-    /** The size of the badge
-     * @type { 'sm' | 'lg' }
-     */
-    size: ChipSize;
+export default class DapDSChip extends ChipBaseWithSized {
+    /** Maps effectiveSize from SizedMixin to the chip's two visual sizes (sm | lg). */
+    private get chipSize();
     /** Whether the chip is removeable */
     removeable: boolean;
     /** Whether the chip is selectable */
@@ -73,3 +79,4 @@ export default class DapDSChip extends DdsElement {
     private handleKeyDown;
     render(): import('lit-html').TemplateResult;
 }
+export {};

package/dist/components/dap-badge/dap-badge.component.d.ts

@@ -1,4 +1,8 @@
 import { DdsElement } from '../../internal/dds-hu-element';
+declare const DapBadgeBaseWithSized: typeof DdsElement & {
+    new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
+    prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
+};
 /**
  * `dap-ds-dap-badge`
  * @summary A DÁP badge is a brand element showing the use of this system design library.
@@ -28,16 +32,18 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssproperty --dds-badge-border-color-inverted - Custom border color for the inverted variant (default: var(--dds-transparent-white-medium))
  * @cssproperty --dds-badge-background-color-inverted - Custom background color for the inverted variant (default: var(--dds-background-brand-base-inverted))
  * @cssproperty --dds-badge-color-inverted - Custom text color for the inverted variant (default: var(--dds-text-neutral-inverted))
+ *
+ * @property { 'sm' | 'lg' } size - The size of the DÁP badge. Default is `sm`.
+ * @property {string} sizeMap - Responsive size map (e.g. "md:lg").
  */
-export default class DapDSDAPBadge extends DdsElement {
+export default class DapDSDAPBadge extends DapBadgeBaseWithSized {
     /** The variant of the DÁP badge
      * @type {'normal' | 'inverted'}
      */
     variant: string;
-    /** The size of the DÁP badge
-     * @type {'sm' | 'lg'}
-     */
-    size: string;
+    /** Maps effectiveSize from SizedMixin to the DÁP badge's two visual sizes (sm | lg). */
+    private get dapBadgeSize();
     static readonly styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult;
 }
+export {};

package/dist/components/icon-button/icon-button.component.d.ts

@@ -1,6 +1,10 @@
 import { PropertyValueMap } from 'lit';
 import { Size } from '../../common/types';
 import { DdsElement } from '../../internal/dds-hu-element';
+declare const IconButtonBaseWithSized: typeof DdsElement & {
+    new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
+    prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
+};
 export type ButtonVariant = 'neutral' | 'brand' | 'inverted' | 'inverted-brand';
 export type HtmlButtonType = 'button' | 'submit' | 'reset';
 export type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>;
@@ -54,21 +58,18 @@ export type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>;
  * @cssproperty --dds-icon-button-inverted-brand-active-bg - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))
  * @cssproperty --dds-icon-button-disabled-color - Color for disabled state (default: var(--dds-icon-neutral-disabled))
  */
-export default class DapDSIconButton extends DdsElement {
+export default class DapDSIconButton extends IconButtonBaseWithSized {
     /** The type of the button.
      * @type {'neutral' | 'brand' | 'inverted' | 'inverted-brand'}
      */
     variant?: ButtonVariant;
     /** Adds a transparent background to the button */
     clean?: boolean | undefined;
-    /** The size of the icon
-     * @type {'lg' | 'md' | 'sm' | 'xs'}
-     */
-    size: ButtonSize;
     /**
      * The size of the icon in pixels. By default the icon gets the size of the button. This property overwrites the size of the icon.
      */
     iconSize: number;
+    constructor();
     /** The disabled state of the button. */
     disabled: boolean;
     /**
@@ -102,3 +103,4 @@ export default class DapDSIconButton extends DdsElement {
     focus(): void;
     render(): import('lit-html').TemplateResult;
 }
+export {};

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

@@ -19,6 +19,7 @@ import { InputBaseElement } from './input-base-element';
  * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.
  * @property {'succes' | 'error'} status - The status of the input. Can be `success` or `error`.
  * @property {'xs' | 'sm' | 'lg'} size - The size of the input. Default is `sm`.
+ * @property {string} sizeMap - Responsive size map (e.g. "xs:lg").
  * @property {string} name - The name of the input.
  * @property {'text' | 'number' | 'button' | 'color' | 'email' | 'hidden' | 'reset' | 'submit' | 'url' | 'password'| 'file' | 'time'} type - The type of the input. Default is 'text'.
  * @property {boolean} disabled - The disabled state of the input. Default is false.

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

@@ -1,13 +1,15 @@
 import { PropertyValueMap } from 'lit';
-import { CommonSize } from '../../dap-design-system';
 import { DdsElement } from '../../internal/dds-hu-element';
 import { ButtonVariant } from '../button/button.component';
-export default class ModalBaseElement extends DdsElement {
+declare const ModalBaseWithSized: typeof DdsElement & {
+    new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
+    prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
+};
+export default class ModalBaseElement extends ModalBaseWithSized {
     dialog: HTMLDialogElement;
     modalBox: HTMLElement;
     open?: boolean;
     fullScreen?: boolean;
-    size: CommonSize;
     closeOnEsc: string;
     closeOnOverlayClick: string;
     closeButton: string;
@@ -24,6 +26,18 @@ export default class ModalBaseElement extends DdsElement {
     okButtonDanger: boolean;
     hideOkButton: boolean;
     hideCancelButton: boolean;
+    /** Override size for the default OK button; when empty uses the modal's effective size. */
+    okButtonSize: string;
+    /** Override sizeMap for the default OK button; when empty uses the modal's sizeMap. */
+    okButtonSizeMap: string;
+    /** Override size for the default Cancel button; when empty uses the modal's effective size. */
+    cancelButtonSize: string;
+    /** Override sizeMap for the default Cancel button; when empty uses the modal's sizeMap. */
+    cancelButtonSizeMap: string;
+    /** Override size for the close icon button; when empty uses the modal's effective size. */
+    closeButtonSize: string;
+    /** Override sizeMap for the close icon button; when empty uses the modal's sizeMap. */
+    closeButtonSizeMap: string;
     footer: string;
     header: string;
     wideFooter: boolean;
@@ -61,3 +75,4 @@ export default class ModalBaseElement extends DdsElement {
     private handleFocusTrap;
     renderModal(): import('lit-html').TemplateResult<1>;
 }
+export {};

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

@@ -6,29 +6,44 @@ import { default as ModalBaseElement } from './modal-base-element';
  * @title - Modal
  *
  * @property {boolean} open - The open state of the modal.
- * @property {boolean} fullScreen - The full screen version of the modal.
- * @property {boolean} noModal - Whether the modal should have a modal overlay. Default is false. If true the modal will use the .show() method, if false the modal will use the .showModal() method.
- * @property { 'sm' | 'lg' } size - The size of the modal. Default is 'sm'.
+ * @property {boolean} fullScreen - Full screen version of the modal.
+ * @property {boolean} noModal - If true, uses `.show()` (no overlay); if false, uses `.showModal()`. Default is false.
+ * @property {'sm'|'lg'} size - Size of the modal. Default is 'sm'.
+ * @property {string} sizeMap - Breakpoint→size map for the modal (e.g. "md:lg").
+ *
  * @property {boolean} wideFooter - Wide layout mode for footer.
- * @property {boolean} bottomFooter - Pushes the footer to bottom.
- * @property {boolean} fixedHeader - Fixes the header to the top of the modal.
- * @property {boolean} fixedFooter - Fixes the footer to the bottom of the modal.
- * @property {boolean} closeOnEsc - Whether the modal should close on pressing the escape key. Default is true.
- * @property {boolean} closeOnOverlayClick - Whether the modal should close on clicking the overlay. Default is true.
- * @property {string} closeButton - Whether the modal should have a close button. Default is true.
- * @property {string} title - The title of the modal.
- * @property {string} description - The description of the modal.
- * @property {string} okButtonLabel - The label of the OK button.
- * @property {string} cancelButtonLabel - The label of the Cancel button.
- * @property {boolean} okButtonDisabled - Whether the OK button should be disabled.
- * @property {boolean} cancelButtonDisabled - Whether the Cancel button should be disabled.
- * @property {boolean} cancelButtonDanger - Whether the Cancel button should be a danger button.
- * @property {boolean} okButtonDanger - Whether the OK button should be a danger button.
- * @property {boolean} hideOkButton - Whether the OK button should be hidden.
- * @property {boolean} hideCancelButton - Whether the Cancel button should be hidden.
- * @property {string} footer - Whether the modal should have a footer. Default is true.
- * @property {string} header - Whether the modal should have a header. Default is true.
- * @property {boolean} useNativeFocus - Whether the modal should use native browser handled focus. Default is false.
+ * @property {boolean} bottomFooter - Pushes the footer to the bottom.
+ * @property {boolean} fixedHeader - Fixes the header to the top.
+ * @property {boolean} fixedFooter - Fixes the footer to the bottom.
+ *
+ * @property {string} closeOnEsc - Whether to close on Escape key. Default is 'true'.
+ * @property {string} closeOnOverlayClick - Whether to close on overlay click. Default is 'true'.
+ * @property {string} closeButton - Whether to show the close button. Default is 'true'.
+ *
+ * @property {string} title - Title of the modal.
+ * @property {string} description - Description of the modal.
+ *
+ * @property {string} header - Whether to show the header. Default is 'true'.
+ * @property {string} footer - Whether to show the footer. Default is 'true'.
+ *
+ * @property {string} okButtonLabel - Label of the OK button.
+ * @property {boolean} okButtonDisabled - Whether the OK button is disabled.
+ * @property {boolean} okButtonDanger - Whether the OK button uses danger style.
+ * @property {boolean} hideOkButton - Whether to hide the OK button.
+ * @property {string} okButtonSize - Override size for the OK button; empty uses modal size.
+ * @property {string} okButtonSizeMap - Override sizeMap for the OK button.
+ *
+ * @property {string} cancelButtonLabel - Label of the Cancel button.
+ * @property {boolean} cancelButtonDisabled - Whether the Cancel button is disabled.
+ * @property {boolean} cancelButtonDanger - Whether the Cancel button uses danger style.
+ * @property {boolean} hideCancelButton - Whether to hide the Cancel button.
+ * @property {string} cancelButtonSize - Override size for the Cancel button; empty uses modal size.
+ * @property {string} cancelButtonSizeMap - Override sizeMap for the Cancel button.
+ *
+ * @property {string} closeButtonSize - Override size for the close icon button; empty uses modal size.
+ * @property {string} closeButtonSizeMap - Override sizeMap for the close icon button.
+ *
+ * @property {boolean} useNativeFocus - Use native browser focus handling. Default is false.
  *
  * @event {{ void }} dds-before-open - Fires before the modal opens.
  * @event {{ void }} dds-opened - Fires after the modal opens.

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

@@ -1,5 +1,8 @@
 import { DdsElement } from '../../internal/dds-hu-element';
-import { IconSize } from '../icon/icon.component';
+declare const ProgressBaseWithSized: typeof DdsElement & {
+    new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
+    prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
+};
 export type ProgressVariant = 'linear' | 'circular';
 export type ProgressColor = 'neutral' | 'brand' | 'negative' | 'positive' | 'inverted';
 /**
@@ -38,8 +41,10 @@ export type ProgressColor = 'neutral' | 'brand' | 'negative' | 'positive' | 'inv
  * @cssprop --dds-progress-stroke-width - Stroke width for circular progress (default: var(--dds-spacing-200))
  * @cssprop --dds-progress-animation-duration - Duration of indeterminate animation (default: 1.5s)
  *
+ * @property { 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' } size - The size of the progress indicator. Default is `sm`. See SizedMixin.
+ * @property {string} sizeMap - Responsive size map (e.g. "md:lg"); see SizedMixin.
  */
-export default class DapDSProgress extends DdsElement {
+export default class DapDSProgress extends ProgressBaseWithSized {
     /**
      * The variant of the progress indicator.
      * @type {"linear" | "circular"}
@@ -50,11 +55,6 @@ export default class DapDSProgress extends DdsElement {
      * @type {"neutral" | "brand" | "negative" | "positive" | "inverted"}
      */
     color: ProgressColor;
-    /**
-     * The size of the progress indicator.
-     * @type {"xxl" | "xl" | "lg" | "md" | "sm" | "xs"}
-     */
-    size: IconSize;
     /**
      * Current progress value (0-100 for percentage, or 0-max).
      */
@@ -81,6 +81,8 @@ export default class DapDSProgress extends DdsElement {
      */
     ariaLive: 'polite' | 'assertive' | 'off';
     static readonly styles: import('lit').CSSResult;
+    /** Maps effectiveSize from SizedMixin to progress visual size class (xs–lg; xxs maps to xs). */
+    private get progressSize();
     /**
      * Calculate the percentage value (0-100).
      */
@@ -100,3 +102,4 @@ export default class DapDSProgress extends DdsElement {
     private renderCircular;
     render(): import('lit-html').TemplateResult<1>;
 }
+export {};