dap-design-system 0.57.8 → 0.57.10

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

@@ -69,6 +69,8 @@ export default class DapDSBanner extends DdsElement {
     opened: string;
     /** The aria-label for the close button */
     closeButtonLabel: string;
+    /** `data-testid` for the close button. */
+    closeButtonTestId: string;
     /** The icon of the banner, this is a name of a built icon icon */
     icon: string;
     static readonly styles: import('lit').CSSResult;

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

@@ -91,6 +91,10 @@ export default class DapDSCalendar extends DdsElement {
      * @default dayjs.locale()
      */
     locale: string;
+    /** `data-testid` for the previous-month button. */
+    prevButtonTestId: string;
+    /** `data-testid` for the next-month button. */
+    nextButtonTestId: string;
     private _currentCell;
     private _yearOptionsLoaded;
     private instanceLocalData;

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

@@ -93,6 +93,8 @@ export default class DapDSCallout extends DdsElement {
     title: string;
     /** The label of the close button */
     closeButtonLabel: string;
+    /** `data-testid` for the default close button. */
+    closeButtonTestId: string;
     /** If the callout is opened */
     opened: string;
     static readonly styles: import('lit').CSSResult;

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

@@ -28,6 +28,7 @@ import { LabeledChoiceElement } from '../../internal/mixin/labeledChoiceElement'
  * @property {boolean} invalid - The invalid state of the checkbox.
  * @property {boolean} optional - The optional state of the checkbox.
  * @property {string} optionalLabel - The optional label of the checkbox.
+ * @property {string} requiredLabel - The required indicator of the checkbox. (default: '*')
  *
  * @csspart base - The main checkbox container.
  * @csspart label - The label of the checkbox.

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

@@ -58,6 +58,8 @@ export default class DapDSChip extends ChipBaseWithSized {
     value?: string;
     /** The aria label for the delete button */
     deleteAriaLabel?: string;
+    /** `data-testid` for the remove button. */
+    removeButtonTestId: string;
     private _slotNodes;
     private _slotTextContent;
     static readonly styles: import('lit').CSSResult;

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

@@ -21,6 +21,7 @@ import { GenericFormElement } from '../../internal/mixin/genericFormElement';
  * @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} requiredLabel - Indicator of required text. (default: '*')
  * @property {string} name - Form element name.
  * @property {string} autocomplete - Autocomplete hint. Default is 'one-time-code'.
  *

package/dist/components/combobox/comboboxBase.d.ts

@@ -25,6 +25,10 @@ export default class ComboboxBaseElement extends GenericFormElement {
     subtle: boolean;
     multiselect: boolean;
     maxSelections?: number;
+    /** `data-testid` for the clear button. */
+    clearButtonTestId: string;
+    /** `data-testid` for the search button. */
+    searchButtonTestId: string;
     selectedItem: any;
     selectedItems: any[];
     currentItem: any;

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

@@ -23,6 +23,7 @@ import { InputBaseElement } from '../input/input-base-element';
  * @property {boolean} loading - The loading state of the input. Default is false.
  * @property {boolean} optional - The optional state of the input.
  * @property {string} optionalLabel - The optional label of the input.
+ * @property {string} requiredLabel - The required indicator of the input. (default: '*')
  * @property {boolean} subtle - The weight of the label. Default is `false`
  * @property {string} copyButtonAriaLabel - The aria label of the copy button.
  *
@@ -83,6 +84,8 @@ import { InputBaseElement } from '../input/input-base-element';
 export default class DapDSCopyBoxInput extends InputBaseElement {
     constructor();
     copyButtonAriaLabel?: string;
+    /** `data-testid` for the copy button. */
+    copyButtonTestId: string;
     render(): import('lit-html').TemplateResult<1>;
     onCopy(): void;
     private copyToClipboard;

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

@@ -143,6 +143,8 @@ export default class DapDSDataTable<T> extends DdsElement {
     nextButtonLabel: string;
     /** The label of the last button */
     lastButtonLabel: string;
+    /** `data-testid` for the column sort-toggle button. Suffixed with the column id. */
+    sortButtonTestId: string;
     /** The function to determine the pager text
      * @type {(pageIndex: number, pageSize: number, totalRows: number) => string}
      */

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

@@ -22,6 +22,7 @@ import { GenericFormElement } from '../../internal/mixin/genericFormElement';
  * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the datepicker.
  * @property {boolean} optional - The optional state of the datepicker.
  * @property {string} optionalLabel - The optional label of the datepicker.
+ * @property {string} requiredLabel - The required indicator of the datepicker. (default: '*')
  * @property {boolean} subtle - The weight of the label. Default is `false`
  * @property {string} autocomplete - The autocomplete of the datepicker.
  * @property {boolean} autofocus - The autofocus of the datepicker.
@@ -154,6 +155,10 @@ export default class DapDSDatePicker extends GenericFormElement {
     clearButton?: string;
     /** The aria label of the clear button. */
     clearButtonAriaLabel?: string;
+    /** `data-testid` for the clear button. */
+    clearButtonTestId: string;
+    /** `data-testid` for the calendar indicator button that opens the calendar. */
+    calendarButtonTestId: string;
     /** The floating strategy of the datepicker. */
     floatingStrategy: FloatingStrategy;
     /** Whether to keep popup open when trigger leaves viewport. */

package/dist/components/file-input/file-input-list-item.component.d.ts

@@ -64,6 +64,8 @@ export default class DapDSFileInputListItem extends DapDSFileInputListItem_base
     loading?: boolean | undefined;
     /** Show delete button. */
     showDeleteButton: string;
+    /** `data-testid` for the remove-file button. */
+    removeButtonTestId: string;
     /** Show file size. */
     showFileSize?: string | undefined;
     /** Show file link. */

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

@@ -19,7 +19,9 @@ import { default as DapDSFileInputList } from './file-input-list.component';
  * @property {string} feedback - The feedback for the file input.
  * @property {'negative' | 'positive' | 'warning'} feedbackType - The type of feedback for the file input.
  * @property {boolean} required - Whether the file input is required.
+ * @property {string} requiredLabel - The required indicator of the file input. (default: '*')
  * @property {boolean} optional - Whether the file input is optional.
+ * @property {string} optionalLabel - The optional label of the file input.
  * @property {boolean} subtle - Font weight of the feedback label. Default is `false` which is bold.
  * @property {string} uploadButtonLabel - The label for the upload button.
  * @property {string} browseButtonLabel - The label for the browse button.
@@ -90,6 +92,10 @@ export default class DapDSFileInput extends GenericFormElement {
     uploadButtonLabel: string;
     /** Label for the browse button */
     browseButtonLabel: string;
+    /** `data-testid` for the browse button. */
+    browseButtonTestId: string;
+    /** `data-testid` for the upload button. */
+    uploadButtonTestId: string;
     /** Whether to show a separate dropzone area */
     showDropzone: boolean;
     /** Text to display in the dropzone */

package/dist/components/form/form-label/form-label.component.d.ts

@@ -17,6 +17,7 @@ declare const DapDSFormLabel_base: {
  * @property {boolean} subtle - Text weight of the label.
  * @property {boolean} optional - If the label is optional.
  * @property {boolean} required - If the label is required.
+ * @property {string} requiredLabel - Indicator of required text. (default: '*')
  * @property {string} label - The label text.
  *
  * @csspart base - The main form label container.

package/dist/components/form/input-group/input-group.component.d.ts

@@ -14,6 +14,7 @@ import { GenericFormElement } from '../../../internal/mixin/genericFormElement';
  * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input group.
  * @property {string} tooltipAriaLabel - The aria label of the tooltip.
  * @property {string} optionalLabel - The label of the input group when it is optional.
+ * @property {string} requiredLabel - The indicator of the input group when it is required. (default: '*')
  * @property {boolean} disabled - Whether the input group is disabled.
  * @property {'xs' | 'sm' | 'lg'} size - The size of the input group. Default is `sm`.
  * @property {boolean} required - Whether the input group is required.

package/dist/components/form/radio-group/radio-group.component.d.ts

@@ -23,6 +23,7 @@ import { GenericFormElement } from '../../../internal/mixin/genericFormElement';
  * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the radio group. Can be `negative`, `positive`, or `warning`.
  * @property {boolean} optional - The optional state of the radio group.
  * @property {string} optionalLabel - Text of optional label.
+ * @property {string} requiredLabel - Text of required indicator. (default: '*')
  * @property {boolean} subtle - The weight of the label. Default is `false`
  * @property {'xs' | 'sm' | 'lg'} size - The size of the radio group. Default is `sm`.
  * @property {boolean} subtle - Font weight of the feedback label. Default is `false` which is bold.

package/dist/components/image-zoom/image-zoom.component.d.ts

@@ -61,6 +61,10 @@ export default class DapDSImageZoom extends DdsElement {
     /** Hides the expand and unzoom buttons. Useful when the host UI provides its own controls. */
     hideButtons: boolean;
     zoomButtonVariant: ButtonVariant;
+    /** `data-testid` for the expand/zoom button. */
+    expandButtonTestId: string;
+    /** `data-testid` for the unzoom/close button. */
+    unzoomButtonTestId: string;
     private _dialogState;
     private _slottedImgSrc;
     private _slottedImgAlt;

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

@@ -8,6 +8,7 @@ import { InputBaseElement } from './input-base-element';
  * @property {string} label - The label of the input.
  * @property {string} description - The description of the input.
  * @property {string} optionalLabel - Text of optional label.
+ * @property {string} requiredLabel - Text of required indicator. (default: '*')
  * @property {boolean} subtle - Text weight of label. If true the label is subtle. Default value is false.
  * @property {string} value - The value of the input.
  * @property {string} placeholder - The placeholder of the input.

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

@@ -16,6 +16,7 @@ declare const DapDSLabel_base: {
  * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the label.
  * @property {boolean} optional - If the label is optional. Default value is `false`.
  * @property {string} optionalLabel - Label of optional text
+ * @property {string} requiredLabel - Indicator of required text (default: '*')
  * @property {boolean} subtle - Text weight of label. If true the label is subtle. Default value is `false`.
  * @property {boolean} disabled - The disabled state of the label. Default is `false`.
  * @property {boolean} required - The required state of the label. Default is `false`.

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

@@ -38,6 +38,12 @@ export default class ModalBaseElement extends ModalBaseWithSized {
     closeButtonSize: string;
     /** Override sizeMap for the close icon button; when empty uses the modal's sizeMap. */
     closeButtonSizeMap: string;
+    /** `data-testid` for the default OK button. */
+    okButtonTestId: string;
+    /** `data-testid` for the default Cancel button. */
+    cancelButtonTestId: string;
+    /** `data-testid` for the default close icon button. */
+    closeButtonTestId: string;
     footer: string;
     header: string;
     wideFooter: boolean;

package/dist/components/navigation-menu/navigation-menu-item.component.d.ts

@@ -133,6 +133,8 @@ export default class DapDSNavigationMenuItem extends DapDSNavigationMenuItem_bas
     orientation: 'horizontal' | 'vertical';
     /** Controls tab key behavior (propagated from parent navigation menu). */
     tabMode: TabNavigationMode;
+    /** `data-testid` for the default menu trigger button. */
+    triggerButtonTestId: string;
     hasContent: boolean;
     private hasLink;
     private hasTitleSlot;

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

@@ -32,6 +32,7 @@ import { InputBaseElement } from '../input/input-base-element';
  * @property {boolean} loading - The loading state of the input. Default is false.
  * @property {boolean} optional - The optional state of the input.
  * @property {string} optionalLabel - The optional label of the input.
+ * @property {string} requiredLabel - The required indicator of the input. (default: '*')
  * @property {boolean} subtle - The weight of the label. Default is `false`
  * @property {boolean} disableEnter - Disables the enter key from being used to submit the form.
  * @property {boolean} hideControls - Hides the increment and decrement buttons.
@@ -110,6 +111,10 @@ export default class DapDSNumberInput extends InputBaseElement {
     allowDecimal: string;
     hideControls: boolean;
     padStart?: number;
+    /** `data-testid` for the decrement stepper button. */
+    decrementButtonTestId: string;
+    /** `data-testid` for the increment stepper button. */
+    incrementButtonTestId: string;
     private formattedValue;
     private valueSetInternally;
     get _thousandSeparator(): string;

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

@@ -72,6 +72,8 @@ export default class DapDSPager extends DdsElement {
     nextButtonLabel: string;
     /** The last button label. */
     lastButtonLabel: string;
+    /** `data-testid` for the pagination buttons. Suffixed with the button's part (first/previous/next/last). */
+    pageButtonTestId: string;
     /** The function to determine the pager text. If not provided, uses default reactive translation.
      * @type {Function}
      */

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

@@ -23,6 +23,7 @@ import { InputBaseElement } from '../input/input-base-element';
  * @property {boolean} loading - The loading state of the password input. Default is false.
  * @property {boolean} optional - The optional state of the password input.
  * @property {string} optionalLabel - The optional label of the password input.
+ * @property {string} requiredLabel - The required indicator of the password input. (default: '*')
  * @property {boolean} subtle - The weight of the label. Default is `false`
  *
  * @event {{ value: string }} dds-change - Fired when the input value changes.
@@ -85,6 +86,8 @@ import { InputBaseElement } from '../input/input-base-element';
  */
 export default class DapDSPasswordInput extends InputBaseElement {
     passwordVisibile: boolean;
+    /** `data-testid` for the show/hide toggle button. */
+    toggleButtonTestId: string;
     static readonly styles: import('lit').CSSResult;
     constructor();
     private _toggleVisibility;

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

@@ -28,6 +28,7 @@ import { LabeledChoiceElement } from '../../internal/mixin/labeledChoiceElement'
  * @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 {string} requiredLabel - The required indicator of the radio button. (default: '*')
  * @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.

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

@@ -29,6 +29,7 @@ import { default as DapDSOptionList } from '../option-list/option-list.component
  * @property {string} status - The status of the select. Can be `success` or `error`.
  * @property {boolean} optional - The optional state of the select.
  * @property {string} optionalLabel - The optional label of the select.
+ * @property {string} requiredLabel - The required indicator of the select. (default: '*')
  * @property {boolean} subtle - The weight of the label. Default is `false`
  *
  * @csspart base - The main select container.

package/dist/components/snackbar/snackbar-message.component.d.ts

@@ -57,6 +57,8 @@ export default class DapDSSnackbarMessage extends DdsElement {
     customStyle?: Record<string, string>;
     /** The position of the snackbar container for directional animations. */
     position: SnackbarPosition;
+    /** `data-testid` for the snackbar close button. */
+    closeButtonTestId: string;
     private isClosing;
     static readonly styles: import('lit').CSSResult;
     private getActions;

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

@@ -21,6 +21,7 @@ import { LabeledChoiceElement } from '../../internal/mixin/labeledChoiceElement'
  * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the switch.
  * @property {boolean} optional - The optional state of the switch.
  * @property {string} optionalLabel - The optional label of the switch.
+ * @property {string} requiredLabel - The required indicator of the switch. (default: '*')
  *
  * @cssProperty --dds-switch-width - Width of the switch control (default: var(--dds-spacing-1000)
  * @cssProperty --dds-switch-height - Height of the switch control (default: var(--dds-spacing-600))

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

@@ -20,6 +20,7 @@ import { GenericFormElement } from '../../internal/mixin/genericFormElement';
  * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.
  * @property {boolean} optional - The optional state of the textarea.
  * @property {string} optionalLabel - The optional label of the textarea.
+ * @property {string} requiredLabel - The required indicator of the textarea. (default: '*')
  * @property {boolean} subtle - The weight of the label. Default is `false`
  * @property {boolean} autofocus - The autofocus state of the textarea.
  *

package/dist/components/timepicker/time-grid.component.d.ts

@@ -50,6 +50,14 @@ export default class DapDSTimeGrid extends DdsElement {
     disabledTime?: (hour: number, minute: number, second?: number) => boolean;
     hideDisabledTimes: boolean;
     presets?: TimePreset[];
+    /** `data-testid` base for the preset buttons (preset value appended). */
+    presetButtonTestId: string;
+    /** `data-testid` base for the hour select buttons (hour value appended). */
+    hourButtonTestId: string;
+    /** `data-testid` base for the minute select buttons (minute value appended). */
+    minuteButtonTestId: string;
+    /** `data-testid` base for the second select buttons (second value appended). */
+    secondButtonTestId: string;
     static readonly styles: import('lit').CSSResult;
     private getHours;
     private getMinutes;

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

@@ -22,6 +22,7 @@ import { GenericFormElement } from '../../internal/mixin/genericFormElement';
  * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the timepicker.
  * @property {boolean} optional - The optional state of the timepicker.
  * @property {string} optionalLabel - The optional label of the timepicker.
+ * @property {string} requiredLabel - The required indicator of the timepicker. (default: '*')
  * @property {boolean} subtle - The weight of the label. Default is `false`
  * @property {string} autocomplete - The autocomplete of the timepicker.
  * @property {string} placeholder - The placeholder of the timepicker.
@@ -142,6 +143,10 @@ export default class DapDSTimePicker extends GenericFormElement {
     clearButton?: string;
     /** The aria label of the clear button. */
     clearButtonAriaLabel?: string;
+    /** `data-testid` for the clear button. */
+    clearButtonTestId: string;
+    /** `data-testid` for the time indicator button that opens the grid. */
+    timeButtonTestId: string;
     /** The floating strategy of the timepicker. */
     floatingStrategy: FloatingStrategy;
     /** Whether to keep popup open when trigger leaves viewport. */