dap-design-system 0.37.0 → 0.38.0

package/dist/dds.d.ts

@@ -35,6 +35,8 @@ declare class AccordionBaseElement extends DdsElement {
     disabled: boolean;
     /** Whether the accordion is in loading state */
     loading: boolean;
+    /** The loading aria label of the accordion */
+    loadingAriaLabel?: string;
     /** The location of the icon
      * @type { 'left' | 'right' }
      */
@@ -2212,7 +2214,7 @@ declare const DapDSCardTitle_base: typeof DdsElement & {
  * @property {string} description - The description of the checkbox.
  * @property {boolean} disabled - Whether the checkbox is disabled.
  * @property {boolean} required - Whether the checkbox is required.
- * @property {'xs' | sm' | 'md' | 'lg'} size - The size of the checkbox.
+ * @property {'xs' | 'sm' | 'md' | 'lg'} size - The size of the checkbox.
  * @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.
@@ -2262,17 +2264,72 @@ export declare class DapDSCheckbox extends LabeledChoiceElement {
     indeterminate: boolean;
     /** Whether the checkbox should prevent the default action */
     preventDefault: boolean;
-    /** This sets up border around the checkbox, when true.  */
+    /** This sets up border around the checkbox, when true. */
     border: boolean;
     /** The type of the checkbox
      * @type {'normal' | 'background'}
      */
     type: 'normal' | 'background';
     static readonly styles: CSSResult;
+    /**
+     * Validates property combinations and logs warnings for invalid states.
+     * @private
+     */
+    private validateProperties;
+    /**
+     * Gets the aria-describedby attribute value by combining description and feedback IDs.
+     * @returns {string | undefined} Space-separated IDs or undefined if none exist
+     * @private
+     */
+    private getAriaDescribedBy;
+    /**
+     * Gets the aria-checked attribute value based on checkbox state.
+     * @returns {'true' | 'false' | 'mixed'} The appropriate aria-checked value
+     * @private
+     */
+    private getAriaChecked;
+    /**
+     * Handles click events on the checkbox.
+     * Manages the checked/indeterminate state transitions and emits change events.
+     * @private
+     */
     private handleClick;
+    /**
+     * Handles input events on the checkbox.
+     * Emits the dds-input event with current checkbox state.
+     * @private
+     */
     private handleInput;
+    /**
+     * Handles keyboard events on the checkbox.
+     * Provides enhanced keyboard navigation and accessibility.
+     * @param {KeyboardEvent} event - The keyboard event
+     * @private
+     */
+    private handleKeyDown;
     get focusElement(): HTMLInputElement;
+    /**
+     * Programmatically focuses the checkbox input element.
+     * @public
+     */
+    focus(): void;
+    /**
+     * Programmatically blurs the checkbox input element.
+     * @public
+     */
+    blur(): void;
+    /**
+     * Renders the appropriate icon based on checkbox state.
+     * @returns {TemplateResult | null} The icon template or null if unchecked
+     * @private
+     */
     renderIcon(): TemplateResult_2 | null;
+    /**
+     * Handles invalid events on the checkbox input.
+     * Prevents the default browser validation UI from showing and manages invalid state.
+     * @param {Event} event - The invalid event
+     * @private
+     */
     handleInvalid(event: Event): void;
     render(): TemplateResult_2;
 }
@@ -4593,28 +4650,39 @@ export declare class DapDSPopup extends PopupBaseElement {
  * @element dap-ds-radio-button
  * @title - Radio button
  *
+ * @event {{ checked: boolean, value: string, disabled: boolean, type: 'radio' }} dds-change - Fired when the radio button is checked.
+ * @event {{ void }} dds-blur - Emitted when the radio button loses focus.
+ * @event {{ void }} dds-focus - Emitted when the radio button gains focus.
+ * @event {{ checked: boolean, value: string, disabled: boolean }} dds-input - Emitted when the radio button receives input.
+ *
  * @property {string} name - The name of the radio button.
  * @property {string} value - The value of the radio button.
- * @property {boolean} checked - The checked state of the radio button.
+ * @property {boolean} checked - Whether the radio button is checked.
  * @property {string} label - The label of the radio button.
  * @property {string} description - The description of the radio button.
- * @property {'xs', 'sm' | 'md' | 'lg'} size - The size of the radio button.
- * @property {boolean} disabled - The disabled state of the radio button.
- * @property {boolean} required - The required state of the radio button.
+ * @property {boolean} disabled - Whether the radio button is disabled.
+ * @property {boolean} required - Whether the radio button is required.
+ * @property {'xs' | 'sm' | 'md' | 'lg'} size - The size of the radio button.
  * @property {'left' | 'right'} labelPlacement - The placement of the label.
  * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.
- *
- * @event {{ value: string }} dds-change - Fired when the radio button is checked.
- * @event {{ void }} dds-blur - Emitted when the radio button loses focus.
- * @event {{ void }} dds-focus - Emitted when the radio button gains focus.
- * @event {{ value: string }} dds-input - Emitted when the radio button receives input.
+ * @property {boolean} subtle - The weight of the label.
+ * @property {string} feedback - The feedback of the radio button.
+ * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the radio button.
+ * @property {boolean} invalid - The invalid state of the radio button.
+ * @property {boolean} optional - The optional state of the radio button.
+ * @property {string} optionalLabel - The optional label of the radio button.
+ * @property {boolean} preventDefault - Whether the radio button should prevent the default action.
+ * @property {boolean} focusable - Whether the radio button is focusable.
+ * @property {'normal' | 'background'} type - The type of the radio button.
+ * @property {boolean} border - This sets up a border around the radio button, when true.
  *
  * @csspart base - The main radio button container.
  * @csspart wrapper - The wrapper of the radio button.
- * @csspart baselabel - The main label container
+ * @csspart base-label - The main label container.
  * @csspart label - The label of the radio button.
  * @csspart input - The native input of the radio button.
  * @csspart control - The control of the radio button.
+ * @csspart label-container - The label container of the radio button.
  * @csspart description - The description of the radio button.
  *
  * @cssproperty --dds-radio-size - Sets the size of the radio button. Default: var(--dds-spacing-600)
@@ -4647,15 +4715,58 @@ export declare class DapDSRadioButton extends LabeledChoiceElement {
     private readonly input;
     /** Whether the radio button is focusable */
     focusable: boolean;
+    /** Whether the radio button should prevent the default action */
+    preventDefault: boolean;
+    /** This sets up a border around the radio button, when true. */
+    border: boolean;
     /** The type of the radio button
      * @type {'normal' | 'background'}
      */
     type: 'normal' | 'background';
-    /** This sets up a border around the radio button, when true. */
-    border: boolean;
     static readonly styles: CSSResult;
+    /**
+     * Gets the aria-describedby attribute value by combining description and feedback IDs.
+     * @returns {string | undefined} Space-separated IDs or undefined if none exist
+     * @private
+     */
+    private getAriaDescribedBy;
+    /**
+     * Handles click events on the radio button.
+     * Manages the checked state and emits change events.
+     * @private
+     */
     private handleClick;
+    /**
+     * Handles input events on the radio button.
+     * Emits the dds-input event with current radio button state.
+     * @private
+     */
+    private handleInput;
+    /**
+     * Handles keyboard events on the radio button.
+     * Provides enhanced keyboard navigation and accessibility.
+     * @param {KeyboardEvent} event - The keyboard event
+     * @private
+     */
+    private handleKeyDown;
     get focusElement(): HTMLInputElement;
+    /**
+     * Programmatically focuses the radio button input element.
+     * @public
+     */
+    focus(): void;
+    /**
+     * Programmatically blurs the radio button input element.
+     * @public
+     */
+    blur(): void;
+    /**
+     * Handles invalid events on the radio button input.
+     * Prevents the default browser validation UI from showing and manages invalid state.
+     * @param {Event} event - The invalid event
+     * @private
+     */
+    handleInvalid(event: Event): void;
     render(): TemplateResult_2;
 }
 
@@ -5125,6 +5236,64 @@ export declare class DapDSSideNavItem extends DdsElement {
     render(): TemplateResult_2;
 }
 
+/**
+ * `dap-ds-skeleton`
+ * @summary A skeleton loader component for displaying placeholder content while loading.
+ * @element dap-ds-skeleton
+ * @title - Skeleton
+ *
+ * @example Basic Usage
+ * ```html
+ * <dap-ds-skeleton></dap-ds-skeleton>
+ * <dap-ds-skeleton variant="circular"></dap-ds-skeleton>
+ * <dap-ds-skeleton variant="rectangular" width="200px" height="100px"></dap-ds-skeleton>
+ * <dap-ds-skeleton animation="custom" custom-keyframes="0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }"></dap-ds-skeleton>
+ * ```
+ *
+ * @csspart base - The main skeleton container.
+ *
+ * @cssprop --dds-skeleton-color - The base color of the skeleton.
+ * @cssprop --dds-skeleton-animation-duration - Duration of the loading animation.
+ * @cssprop --dds-skeleton-border-radius - Border radius for rectangular skeletons.
+ * @cssprop --dds-skeleton-text-spacing - Spacing between text lines in text variant.
+ * @cssprop --dds-skeleton-animation-timing-function - Timing function for the loading animation.
+ */
+export declare class DapDSSkeleton extends DdsElement {
+    /**
+     * The variant of the skeleton.
+     * @type {"text" | "circular" | "rectangular"}
+     */
+    variant: SkeletonVariant;
+    /**
+     * The width of the skeleton. Can be any valid CSS width value.
+     */
+    width?: string;
+    /**
+     * The height of the skeleton. Can be any valid CSS height value.
+     */
+    height?: string;
+    /**
+     * Whether to animate the skeleton.
+     */
+    animated: boolean;
+    /**
+     * The animation type for the skeleton.
+     * @type {"wave" | "pulse" | "custom"}
+     */
+    animation: SkeletonAnimation;
+    /**
+     * Custom keyframes for the animation when animation="custom".
+     * Should be a valid CSS keyframes string without the @keyframes wrapper.
+     * @example "0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }"
+     */
+    customKeyframes?: string;
+    static readonly styles: CSSResult;
+    private _customStyleSheet?;
+    private _updateCustomAnimation;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): TemplateResult_2<1>;
+}
+
 /**
  * `dap-ds-skip-link`
  * @summary A skip link is a link that allows keyboard users to skip to the main content of a page.
@@ -5432,16 +5601,55 @@ export declare class DapDSStack extends DdsElement {
  */
 export declare class DapDSSwitch extends LabeledChoiceElement {
     private readonly input;
-    /** This sets up border around the switch, when true.  */
+    /** This sets up border around the switch, when true. */
     border: boolean;
     /** The type of the switch
      * @type {'normal' | 'background'}
      */
     type: 'normal' | 'background';
     static readonly styles: CSSResult;
+    /**
+     * Validates property combinations and logs warnings for invalid states.
+     * @private
+     */
+    private validateProperties;
+    /**
+     * Gets the aria-describedby attribute value by combining description and feedback IDs.
+     * @returns {string | undefined} Space-separated IDs or undefined if none exist
+     * @private
+     */
+    private getAriaDescribedBy;
+    /**
+     * Handles click events on the switch.
+     * Manages the checked state transitions and emits change events.
+     * @private
+     */
     private readonly handleClick;
     get focusElement(): HTMLInputElement;
+    /**
+     * Programmatically focuses the switch input element.
+     * @public
+     */
+    focus(): void;
+    /**
+     * Programmatically blurs the switch input element.
+     * @public
+     */
+    blur(): void;
+    /**
+     * Handles invalid events on the switch input.
+     * Prevents the default browser validation UI from showing and manages invalid state.
+     * @param {Event} event - The invalid event
+     * @private
+     */
     handleInvalid(event: Event): void;
+    /**
+     * Handles keyboard events on the switch.
+     * Provides enhanced keyboard navigation and accessibility.
+     * @param {KeyboardEvent} event - The keyboard event
+     * @private
+     */
+    private handleKeyDown;
     render(): TemplateResult_2;
 }
 
@@ -6945,6 +7153,10 @@ declare interface SizedElementInterface {
     spacing: ElementSpacing;
 }
 
+declare type SkeletonAnimation = 'wave' | 'pulse' | 'custom';
+
+declare type SkeletonVariant = 'text' | 'circular' | 'rectangular';
+
 export declare type SnackbarMessage = {
     id: string;
     message: string;