dap-design-system 0.62.4 → 0.63.1

package/dist/react/dap-ds-combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-combobox/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/combobox/combobox.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsBlurEvent } from '../../events/events'\nimport type { DdsFocusEvent } from '../../events/events'\nimport type { DdsClearEvent } from '../../events/events'\nimport type { DdsSearchEvent } from '../../events/events'\nimport type { DdsInputEvent } from '../../events/events'\n      export type { DdsChangeEvent } from '../../events/events'\nexport type { DdsBlurEvent } from '../../events/events'\nexport type { DdsFocusEvent } from '../../events/events'\nexport type { DdsClearEvent } from '../../events/events'\nexport type { DdsSearchEvent } from '../../events/events'\nexport type { DdsInputEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-combobox'\n\n      /**\n * `dap-ds-combobox`\n * @summary A select is a form element that allows the user to select one option from a set.\n * @element dap-ds-combobox\n * @title - Combobox\n *\n * @event {{ value }} dds-change - Fired when the select value changes.\n * @event {{ void }} dds-blur - Emitted when the select loses focus.\n * @event {{ void }} dds-focus - Emitted when the select gains focus.\n * @event {{ void }} dds-clear - Emitted when the select is cleared.\n * @event {{ search: string }} dds-search - Emitted when the manual input value changes.\n * @event {{ input: string, originalEvent: Event }} dds-input - Emitted when typing happens in the input.\n *\n * @property {string} value - The value of the select.\n * @property {string} placeholder - The placeholder of the select.\n * @property { 'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'} placement - The placement of the select dropdown. Default is 'bottom-start'.\n * @property {boolean} opened - Whether the select dropdown is opened.\n * @property {boolean} sync - The sync mode of the select dropdown. How the dropdown item size is synced to the trigger element'.\n * @property {string} label - The label of the select.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the select.\n * @property {string} tooltip - The tooltip of the select.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the select. Default is 'sm'.\n * @property {boolean} disabled - Whether the select is disabled.\n * @property {boolean} required - Whether the select is required.\n * @property {boolean} readonly - Whether the select is readonly.\n * @property {boolean} autofocus - Whether the select is autofocus.\n * @property {string} feedback - The feedback content of the select.\n * @property {'negative' | 'positive' | 'warning' | 'info'} feedbackType - The feedback type of the select.\n * @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the select.\n * @property {boolean} openOnEmpty - Whether the combobox should open on empty results.\n * @property {boolean} allowManualInput - Whether the combobox allows manual input, or free text.\n * @property {boolean} searchForText - Whether the combobox should search for the selected item text.\n * @property {boolean} textComplete - Whether the combobox should complete the text.\n * @property {string} searchButtonAriaLabel - The aria label of the search button.\n * @property {string} selectable - Show the selected item check mark in the dropdown. 'true' or 'false'\n * @property {boolean} noAnimation - Whether the combobox open indicator should be animated.\n * @property {boolean} multiselect - Whether the combobox is multiselect.\n * @property {number} maxSelections - The maximum number of selections allowed.\n *\n * @csspart base - The main select container.\n * @csspart trigger - The trigger button of the select.\n * @csspart label - The label of the select.\n * @csspart description - The description of the select.\n * @csspart feedback - The feedback of the select.\n * @csspart tooltip - The tooltip of the select.\n * @csspart option-list - The option list of the select.\n * @csspart input - The input of the select.\n *\n * @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-combobox-border-width - The border width of the combobox. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-combobox-border-radius - The border radius of the combobox. (default: var(--dds-radius-base))\n * @cssproperty --dds-combobox-text-color - The text color of the combobox. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-combobox-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-combobox-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-combobox-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-combobox-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-combobox-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-combobox-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-combobox-loading-spinner-color - The color of the loading spinner. (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-combobox-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-combobox-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-combobox-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06))\n * @cssproperty --dds-combobox-icon-opened-transform - The transform of the icon when the combobox is opened (default: rotate(90deg)).\n * @cssproperty --dds-combobox-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-combobox-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-combobox-min-width - The minimum width of the combobox. (default: 7.5rem)\n * @cssproperty --dds-combobox-chips-gap - The gap between chips. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-chips-padding - The padding for chips. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-chips-max-height - The maximum height of the chips. (default: 120px)\n *\n * @slot - The default slot for the options.\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsClear: 'dds-clear' as EventName<DdsClearEvent>,\nonDdsSearch: 'dds-search' as EventName<DdsSearchEvent>,\nonDdsInput: 'dds-input' as EventName<DdsInputEvent>\n        },\n        displayName: \"DapDSCombobox\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAmBM,MAAMA,IAAU,mBAsFVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,YAAY;AAAA,EACJ;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-combobox/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/combobox/combobox.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsBlurEvent } from '../../events/events'\nimport type { DdsFocusEvent } from '../../events/events'\nimport type { DdsClearEvent } from '../../events/events'\nimport type { DdsSearchEvent } from '../../events/events'\nimport type { DdsInputEvent } from '../../events/events'\n      export type { DdsChangeEvent } from '../../events/events'\nexport type { DdsBlurEvent } from '../../events/events'\nexport type { DdsFocusEvent } from '../../events/events'\nexport type { DdsClearEvent } from '../../events/events'\nexport type { DdsSearchEvent } from '../../events/events'\nexport type { DdsInputEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-combobox'\n\n      /**\n * `dap-ds-combobox`\n * @summary A select is a form element that allows the user to select one option from a set.\n * @element dap-ds-combobox\n * @title - Combobox\n *\n * @event {{ value }} dds-change - Fired when the select value changes.\n * @event {{ void }} dds-blur - Emitted when the select loses focus.\n * @event {{ void }} dds-focus - Emitted when the select gains focus.\n * @event {{ void }} dds-clear - Emitted when the select is cleared.\n * @event {{ search: string }} dds-search - Emitted when the manual input value changes.\n * @event {{ input: string, originalEvent: Event }} dds-input - Emitted when typing happens in the input.\n *\n * @property {string} value - The value of the select.\n * @property {string} placeholder - The placeholder of the select.\n * @property { 'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'} placement - The placement of the select dropdown. Default is 'bottom-start'.\n * @property {boolean} opened - Whether the select dropdown is opened.\n * @property {boolean} sync - The sync mode of the select dropdown. How the dropdown item size is synced to the trigger element'.\n * @property {string} label - The label of the select.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the select.\n * @property {string} tooltip - The tooltip of the select.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the select. Default is 'sm'.\n * @property {boolean} disabled - Whether the select is disabled.\n * @property {boolean} required - Whether the select is required.\n * @property {boolean} readonly - Whether the select is readonly.\n * @property {boolean} autofocus - Whether the select is autofocus.\n * @property {string} feedback - The feedback content of the select.\n * @property {'negative' | 'positive' | 'warning' | 'info'} feedbackType - The feedback type of the select.\n * @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the combobox. `autocomplete` (default) filters the options by their starting text as you type; `manual` does no filtering, so replace the options yourself on `dds-input`. `typehead` is deprecated for the combobox: it is meant for the select, and the list does not open in this mode.\n * @property {boolean} openOnEmpty - Whether the combobox should open on empty results.\n * @property {DapDSOptionData[]} items - The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute.\n * @property {DapDSOptionRenderer} renderOption - Renders the content of each option given in `items`. Defaults to the item's `label`. Must not render interactive elements and should include the label text.\n * @property {boolean} allowManualInput - Whether the combobox allows manual input, or free text.\n * @property {boolean} searchForText - Whether the combobox should search for the selected item text.\n * @property {boolean} textComplete - Whether the combobox should complete the text.\n * @property {string} searchButtonAriaLabel - The aria label of the search button.\n * @property {string} selectable - Show the selected item check mark in the dropdown. 'true' or 'false'\n * @property {boolean} noAnimation - Whether the combobox open indicator should be animated.\n * @property {boolean} multiselect - Whether the combobox is multiselect.\n * @property {number} maxSelections - The maximum number of selections allowed.\n *\n * @csspart base - The main select container.\n * @csspart trigger - The trigger button of the select.\n * @csspart label - The label of the select.\n * @csspart description - The description of the select.\n * @csspart feedback - The feedback of the select.\n * @csspart tooltip - The tooltip of the select.\n * @csspart option-list - The option list of the select.\n * @csspart input - The input of the select.\n * @csspart chips - The container of the selected chips.\n * @csspart indicator-icon - The dropdown indicator icon.\n * @csspart search-button - The search button.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n *\n * @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-combobox-border-width - The border width of the combobox. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-combobox-border-radius - The border radius of the combobox. (default: var(--dds-radius-base))\n * @cssproperty --dds-combobox-text-color - The text color of the combobox. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-combobox-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-combobox-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-combobox-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-combobox-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-combobox-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-combobox-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-combobox-loading-spinner-color - The color of the loading spinner. (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-combobox-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-combobox-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-combobox-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06))\n * @cssproperty --dds-combobox-icon-opened-transform - The transform of the icon when the combobox is opened (default: rotate(90deg)).\n * @cssproperty --dds-combobox-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-combobox-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-combobox-min-width - The minimum width of the combobox. (default: 7.5rem)\n * @cssproperty --dds-combobox-chips-gap - The gap between chips. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-chips-padding - The padding for chips. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-chips-max-height - The maximum height of the chips. (default: 120px)\n *\n * @slot - The default slot for the options.\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsClear: 'dds-clear' as EventName<DdsClearEvent>,\nonDdsSearch: 'dds-search' as EventName<DdsSearchEvent>,\nonDdsInput: 'dds-input' as EventName<DdsInputEvent>\n        },\n        displayName: \"DapDSCombobox\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAmBM,MAAMA,IAAU,mBA8FVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,YAAY;AAAA,EACJ;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-command/index.d.ts

@@ -15,6 +15,9 @@ export type { DdsCloseEvent } from '../../events/events';
 *
 * @slot trigger - The trigger element for the command dropdown.
 * @slot - The command items.
+*
+* @csspart popup-base - The popup element of the command.
+* @csspart popup - The popup container of the command.
 */
 declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
     onDdsChange: EventName<DdsChangeEvent>;

package/dist/react/dap-ds-command/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-command/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/command/command.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsOpenedEvent } from '../../events/events'\nimport type { DdsClosedEvent } from '../../events/events'\nimport type { DdsCloseEvent } from '../../events/events'\n      export type { DdsChangeEvent } from '../../events/events'\nexport type { DdsOpenedEvent } from '../../events/events'\nexport type { DdsClosedEvent } from '../../events/events'\nexport type { DdsCloseEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-command'\n\n      /**\n * `dap-ds-command`\n * @summary A command is a component that displays a list of commands.\n * @element dap-ds-command\n * @title - Command\n *\n * @event {{ value: string }} dds-change - Fired when the command value changes.\n *\n * @slot trigger - The trigger element for the command dropdown.\n * @slot - The command items.\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsOpened: 'dds-opened' as EventName<DdsOpenedEvent>,\nonDdsClosed: 'dds-closed' as EventName<DdsClosedEvent>,\nonDdsClose: 'dds-close' as EventName<DdsCloseEvent>\n        },\n        displayName: \"DapDSCommand\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAeM,MAAMA,IAAU,kBAaVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,EACJ;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-command/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/command/command.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsOpenedEvent } from '../../events/events'\nimport type { DdsClosedEvent } from '../../events/events'\nimport type { DdsCloseEvent } from '../../events/events'\n      export type { DdsChangeEvent } from '../../events/events'\nexport type { DdsOpenedEvent } from '../../events/events'\nexport type { DdsClosedEvent } from '../../events/events'\nexport type { DdsCloseEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-command'\n\n      /**\n * `dap-ds-command`\n * @summary A command is a component that displays a list of commands.\n * @element dap-ds-command\n * @title - Command\n *\n * @event {{ value: string }} dds-change - Fired when the command value changes.\n *\n * @slot trigger - The trigger element for the command dropdown.\n * @slot - The command items.\n *\n * @csspart popup-base - The popup element of the command.\n * @csspart popup - The popup container of the command.\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsOpened: 'dds-opened' as EventName<DdsOpenedEvent>,\nonDdsClosed: 'dds-closed' as EventName<DdsClosedEvent>,\nonDdsClose: 'dds-close' as EventName<DdsCloseEvent>\n        },\n        displayName: \"DapDSCommand\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAeM,MAAMA,IAAU,kBAgBVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,EACJ;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-copybox-input/index.d.ts

@@ -89,6 +89,17 @@ export type { DdsNotAllowedEvent } from '../../events/events';
 * @csspart copy-button-content - The content of the copy button.
 * @csspart copy-icon - The copy icon of the component.
 * @csspart copy-icon-base - The base of the copy icon.
+* @csspart input - The input element.
+* @csspart label - The label of the input.
+* @csspart description - The description of the input.
+* @csspart feedback - The feedback of the input.
+* @csspart tooltip - The tooltip of the input.
+* @csspart addon-before - The addon before the input.
+* @csspart addon-after - The addon after the input.
+* @csspart prefix - The prefix of the input.
+* @csspart label-base - The base of the label.
+* @csspart label-required - The required indicator of the label.
+* @csspart label-optional - The optional indicator of the label.
 */
 declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
     onDdsCopy: EventName<DdsCopyEvent>;

package/dist/react/dap-ds-copybox-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-copybox-input/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/copybox-input/copybox-input.js'\n      import type { DdsCopyEvent } from '../../events/events'\nimport type { DdsChangeEvent } from '../../events/events'\nimport type { DdsInputEvent } from '../../events/events'\nimport type { DdsKeydownEvent } from '../../events/events'\nimport type { DdsBlurEvent } from '../../events/events'\nimport type { DdsFocusEvent } from '../../events/events'\nimport type { DdsNotAllowedEvent } from '../../events/events'\n      export type { DdsCopyEvent } from '../../events/events'\nexport type { DdsChangeEvent } from '../../events/events'\nexport type { DdsInputEvent } from '../../events/events'\nexport type { DdsKeydownEvent } from '../../events/events'\nexport type { DdsBlurEvent } from '../../events/events'\nexport type { DdsFocusEvent } from '../../events/events'\nexport type { DdsNotAllowedEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-copybox-input'\n\n      /**\n * `dap-ds-copybox-input`\n * @summary A copybox input is a field for copying an input value.\n * @element dap-ds-copybox-input\n * @title - CopyBox input\n *\n * @property {string} label - The label of the input.\n * @property {string} placeholder - The placeholder of the input.\n * @property {string} description - The description of the input.\n * @property {string} tooltip - The tooltip of the input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The position of the tooltip. Can be `top`, `right`, `bottom`, or `left`.\n * @property {'success' | 'error'} status - The status of the input. Can be `success` or `error`.\n * @property {'xs' | 'sm' | 'sm'} size - The size of the input. Default is `sm`.\n * @property {string} name - The name of the input.\n * @property {string} value - The value of the input.\n * @property {boolean} disabled - The disabled state of the input. Default is false.\n * @property {boolean} required - The required state of the input. Default is false.\n * @property {boolean} readonly - The readonly state of the input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the input. Default is false.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} loading - The loading state of the input. Default is false.\n * @property {boolean} optional - The optional state of the input.\n * @property {string} optionalLabel - The optional label of the input.\n * @property {string} requiredLabel - The required indicator of the input. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {string} copyButtonAriaLabel - The aria label of the copy button.\n *\n * @event {{ value: string }} dds-copy - Fired when the user clicks on the copy button.\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n * @event {{ void }} dds-not-allowed - Emitted when the value cannot be copied.\n *\n * @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800))\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000))\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200))\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300))\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400))\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm))\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base))\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg))\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base))\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled))\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle))\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base))\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base))\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base))\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)\n *\n * @csspart base - The base container of the component.\n * @csspart postfix - The inner postfix icon part of the component.\n * @csspart button - The button of the component.\n * @csspart copy-button-base - The base of the copy button.\n * @csspart copy-button-content - The content of the copy button.\n * @csspart copy-icon - The copy icon of the component.\n * @csspart copy-icon-base - The base of the copy icon.\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsCopy: 'dds-copy' as EventName<DdsCopyEvent>,\nonDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsInput: 'dds-input' as EventName<DdsInputEvent>,\nonDdsKeydown: 'dds-keydown' as EventName<DdsKeydownEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsNotAllowed: 'dds-not-allowed' as EventName<DdsNotAllowedEvent>\n        },\n        displayName: \"DapDSCopyBoxInput\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAqBM,MAAMA,IAAU,wBAoFVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,WAAW;AAAA,IACrB,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,iBAAiB;AAAA,EACT;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-copybox-input/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/copybox-input/copybox-input.js'\n      import type { DdsCopyEvent } from '../../events/events'\nimport type { DdsChangeEvent } from '../../events/events'\nimport type { DdsInputEvent } from '../../events/events'\nimport type { DdsKeydownEvent } from '../../events/events'\nimport type { DdsBlurEvent } from '../../events/events'\nimport type { DdsFocusEvent } from '../../events/events'\nimport type { DdsNotAllowedEvent } from '../../events/events'\n      export type { DdsCopyEvent } from '../../events/events'\nexport type { DdsChangeEvent } from '../../events/events'\nexport type { DdsInputEvent } from '../../events/events'\nexport type { DdsKeydownEvent } from '../../events/events'\nexport type { DdsBlurEvent } from '../../events/events'\nexport type { DdsFocusEvent } from '../../events/events'\nexport type { DdsNotAllowedEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-copybox-input'\n\n      /**\n * `dap-ds-copybox-input`\n * @summary A copybox input is a field for copying an input value.\n * @element dap-ds-copybox-input\n * @title - CopyBox input\n *\n * @property {string} label - The label of the input.\n * @property {string} placeholder - The placeholder of the input.\n * @property {string} description - The description of the input.\n * @property {string} tooltip - The tooltip of the input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The position of the tooltip. Can be `top`, `right`, `bottom`, or `left`.\n * @property {'success' | 'error'} status - The status of the input. Can be `success` or `error`.\n * @property {'xs' | 'sm' | 'sm'} size - The size of the input. Default is `sm`.\n * @property {string} name - The name of the input.\n * @property {string} value - The value of the input.\n * @property {boolean} disabled - The disabled state of the input. Default is false.\n * @property {boolean} required - The required state of the input. Default is false.\n * @property {boolean} readonly - The readonly state of the input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the input. Default is false.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} loading - The loading state of the input. Default is false.\n * @property {boolean} optional - The optional state of the input.\n * @property {string} optionalLabel - The optional label of the input.\n * @property {string} requiredLabel - The required indicator of the input. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {string} copyButtonAriaLabel - The aria label of the copy button.\n *\n * @event {{ value: string }} dds-copy - Fired when the user clicks on the copy button.\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n * @event {{ void }} dds-not-allowed - Emitted when the value cannot be copied.\n *\n * @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800))\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000))\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200))\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300))\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400))\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm))\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base))\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg))\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base))\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled))\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle))\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base))\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base))\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base))\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)\n *\n * @csspart base - The base container of the component.\n * @csspart postfix - The inner postfix icon part of the component.\n * @csspart button - The button of the component.\n * @csspart copy-button-base - The base of the copy button.\n * @csspart copy-button-content - The content of the copy button.\n * @csspart copy-icon - The copy icon of the component.\n * @csspart copy-icon-base - The base of the copy icon.\n * @csspart input - The input element.\n * @csspart label - The label of the input.\n * @csspart description - The description of the input.\n * @csspart feedback - The feedback of the input.\n * @csspart tooltip - The tooltip of the input.\n * @csspart addon-before - The addon before the input.\n * @csspart addon-after - The addon after the input.\n * @csspart prefix - The prefix of the input.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsCopy: 'dds-copy' as EventName<DdsCopyEvent>,\nonDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsInput: 'dds-input' as EventName<DdsInputEvent>,\nonDdsKeydown: 'dds-keydown' as EventName<DdsKeydownEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsNotAllowed: 'dds-not-allowed' as EventName<DdsNotAllowedEvent>\n        },\n        displayName: \"DapDSCopyBoxInput\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAqBM,MAAMA,IAAU,wBA+FVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,WAAW;AAAA,IACrB,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,iBAAiB;AAAA,EACT;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-datatable/index.d.ts

@@ -39,6 +39,23 @@ export type { DdsColumnSizingChangeEvent } from '../../events/events';
 * @csspart pager-next - The next button of the pager.
 * @csspart pager-last - The last button of the pager.
 * @csspart pager-page-size-select - The page size select of the pager.
+* @csspart content - The content container of the table.
+* @csspart page-size-select-base - The base of the pager page size select.
+* @csspart page-size-select-trigger - The trigger of the pager page size select.
+* @csspart pager-button-first-base - The base of the pager first button.
+* @csspart pager-button-first-content - The content of the pager first button.
+* @csspart pager-button-previous-base - The base of the pager previous button.
+* @csspart pager-button-previous-content - The content of the pager previous button.
+* @csspart pager-button-next-base - The base of the pager next button.
+* @csspart pager-button-next-content - The content of the pager next button.
+* @csspart pager-button-last-base - The base of the pager last button.
+* @csspart pager-button-last-content - The content of the pager last button.
+* @csspart pager-page-numbers - The page numbers container of the pager.
+* @csspart pager-page-number - The page number buttons of the pager.
+* @csspart pager-page-number-active - The active page number button of the pager.
+* @csspart pager-page-number-base - The base of the pager page number buttons.
+* @csspart pager-page-number-content - The content of the pager page number buttons.
+* @csspart pager-page-info - The page info text of the pager.
 *
 * @cssproperty --dds-datatable-bg-color - Background color of the table. (default: var(--dds-background-neutral-subtle)).
 * @cssproperty --dds-datatable-border-color - Border color of the table cells. (default: var(--dds-border-neutral-divider))

package/dist/react/dap-ds-datatable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-datatable/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/datatable/datatable.js'\n      import type { DdsSortingChangeEvent } from '../../events/events'\nimport type { DdsSelectionChangeEvent } from '../../events/events'\nimport type { DdsPaginationChangeEvent } from '../../events/events'\nimport type { DdsRowClickEvent } from '../../events/events'\nimport type { DdsColumnSizingChangeEvent } from '../../events/events'\n      export type { DdsSortingChangeEvent } from '../../events/events'\nexport type { DdsSelectionChangeEvent } from '../../events/events'\nexport type { DdsPaginationChangeEvent } from '../../events/events'\nexport type { DdsRowClickEvent } from '../../events/events'\nexport type { DdsColumnSizingChangeEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-datatable'\n\n      /**\n * `dap-ds-datatable`\n * @summary A data table is a component that displays data in a tabular format.\n * @element dap-ds-datatable\n * @title - Data table\n * @generic T\n *\n * @event {{ sorting: SortingState }} dds-sorting-change - Fired when the sorting of the table changes.\n * @event {{ selection: RowSelectionState }} dds-selection-change - Fired when the selection of the table changes.\n * @event {{ pagination: PaginationState }} dds-pagination-change - Fired when the pagination of the table changes.\n * @event {{ row: Row<T> }} dds-row-click - Fired when a row is clicked.\n * @event {{ columnSizing: Record<string, number> }} dds-column-sizing-change - Fired when the user resizes a column (at the end of a drag, on each resize-handle key press, and when a double-click resets the column).\n *\n * @slot loading - The loading content of the table.\n * @slot empty - The empty content of the table.\n *\n * @csspart base - The main table container.\n * @csspart header - The header of the table.\n * @csspart header-row - The header row of the table.\n * @csspart header-cell - All cells of the header.\n * @csspart resize-handle - The column resize handle at the right edge of a resizable header cell.\n * @csspart body - The body of the table.\n * @csspart empty - The empty content of the table.\n * @csspart loading - The loading content of the table.\n * @csspart row - All rows of the table.\n * @csspart cell - All cells of the table.\n * @csspart pager - The pager of the table.\n * @csspart pager-base - The base of the pager.\n * @csspart pager-first - The first button of the pager.\n * @csspart pager-previous - The previous button of the pager.\n * @csspart pager-next - The next button of the pager.\n * @csspart pager-last - The last button of the pager.\n * @csspart pager-page-size-select - The page size select of the pager.\n *\n * @cssproperty --dds-datatable-bg-color - Background color of the table. (default: var(--dds-background-neutral-subtle)).\n * @cssproperty --dds-datatable-border-color - Border color of the table cells. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-datatable-header-bg-color - Background color of the table header. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-datatable-header-text-color - Text color of the table header. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-datatable-row-hover-bg-color - Background color of hovered rows. (default: var(--dds-background-brand-strong))\n * @cssproperty --dds-datatable-row-selected-bg-color - Background color of selected rows. (default: var(--dds-background-brand-strong))\n * @cssproperty --dds-datatable-cell-padding - Padding of table cells. (default: var(--dds-spacing-200))\n * @cssproperty --dds-datatable-header-padding - Padding of header cells. (default: var(--dds-spacing-200))\n * @cssproperty --dds-datatable-last-column-padding - Padding of the last column. (default: var(--dds-spacing-500))\n * @cssproperty --dds-datatable-first-column-padding - Padding of the first column. (default: var(--dds-spacing-500))\n * @cssproperty --dds-datatable-border-width - Width of table borders. (default: var(--dds-border-width-base))\n * @cssproperty --dds-datatable-outer-border-width - Width of the outer container border only. (default: var(--dds-datatable-border-width))\n * @cssproperty --dds-datatable-header-border-width - Width of the header row bottom border only. (default: var(--dds-datatable-border-width))\n * @cssproperty --dds-datatable-row-border-width - Width of the row (body cell) bottom borders only. (default: var(--dds-datatable-border-width))\n * @cssproperty --dds-datatable-stripe-color - Background color for striped rows. (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-datatable-border-radius - Border radius of the table. (default: var(--dds-radius-base))\n * @cssproperty --dds-datatable-shadow - Box shadow of the table. (default: none)\n * @cssproperty --dds-datatable-transition-duration - Duration of hover/selection transitions. (default: 0.2s)\n * @cssproperty --dds-datatable-z-index - Z-index of the table. (default: 1)\n * @cssproperty --dds-datatable-min-height - Minimum height of the table. (default: auto)\n * @cssproperty --dds-datatable-max-height - Maximum height of the table. (default: none)\n * @cssproperty --dds-datatable-overflow-x - Horizontal overflow behavior. (default: auto)\n * @cssproperty --dds-datatable-overflow-y - Vertical overflow behavior. (default: auto)\n * @cssproperty --dds-datatable-resize-handle-color - Color of the column resize indicator line on hover, focus and drag. (default: var(--dds-border-brand-base))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsSortingChange: 'dds-sorting-change' as EventName<DdsSortingChangeEvent>,\nonDdsSelectionChange: 'dds-selection-change' as EventName<DdsSelectionChangeEvent>,\nonDdsPaginationChange: 'dds-pagination-change' as EventName<DdsPaginationChangeEvent>,\nonDdsRowClick: 'dds-row-click' as EventName<DdsRowClickEvent>,\nonDdsColumnSizingChange: 'dds-column-sizing-change' as EventName<DdsColumnSizingChangeEvent>\n        },\n        displayName: \"DapDSDataTable\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAiBM,MAAMA,IAAU,oBA6DVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,oBAAoB;AAAA,IAC9B,sBAAsB;AAAA,IACtB,uBAAuB;AAAA,IACvB,eAAe;AAAA,IACf,yBAAyB;AAAA,EACjB;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-datatable/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/datatable/datatable.js'\n      import type { DdsSortingChangeEvent } from '../../events/events'\nimport type { DdsSelectionChangeEvent } from '../../events/events'\nimport type { DdsPaginationChangeEvent } from '../../events/events'\nimport type { DdsRowClickEvent } from '../../events/events'\nimport type { DdsColumnSizingChangeEvent } from '../../events/events'\n      export type { DdsSortingChangeEvent } from '../../events/events'\nexport type { DdsSelectionChangeEvent } from '../../events/events'\nexport type { DdsPaginationChangeEvent } from '../../events/events'\nexport type { DdsRowClickEvent } from '../../events/events'\nexport type { DdsColumnSizingChangeEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-datatable'\n\n      /**\n * `dap-ds-datatable`\n * @summary A data table is a component that displays data in a tabular format.\n * @element dap-ds-datatable\n * @title - Data table\n * @generic T\n *\n * @event {{ sorting: SortingState }} dds-sorting-change - Fired when the sorting of the table changes.\n * @event {{ selection: RowSelectionState }} dds-selection-change - Fired when the selection of the table changes.\n * @event {{ pagination: PaginationState }} dds-pagination-change - Fired when the pagination of the table changes.\n * @event {{ row: Row<T> }} dds-row-click - Fired when a row is clicked.\n * @event {{ columnSizing: Record<string, number> }} dds-column-sizing-change - Fired when the user resizes a column (at the end of a drag, on each resize-handle key press, and when a double-click resets the column).\n *\n * @slot loading - The loading content of the table.\n * @slot empty - The empty content of the table.\n *\n * @csspart base - The main table container.\n * @csspart header - The header of the table.\n * @csspart header-row - The header row of the table.\n * @csspart header-cell - All cells of the header.\n * @csspart resize-handle - The column resize handle at the right edge of a resizable header cell.\n * @csspart body - The body of the table.\n * @csspart empty - The empty content of the table.\n * @csspart loading - The loading content of the table.\n * @csspart row - All rows of the table.\n * @csspart cell - All cells of the table.\n * @csspart pager - The pager of the table.\n * @csspart pager-base - The base of the pager.\n * @csspart pager-first - The first button of the pager.\n * @csspart pager-previous - The previous button of the pager.\n * @csspart pager-next - The next button of the pager.\n * @csspart pager-last - The last button of the pager.\n * @csspart pager-page-size-select - The page size select of the pager.\n * @csspart content - The content container of the table.\n * @csspart page-size-select-base - The base of the pager page size select.\n * @csspart page-size-select-trigger - The trigger of the pager page size select.\n * @csspart pager-button-first-base - The base of the pager first button.\n * @csspart pager-button-first-content - The content of the pager first button.\n * @csspart pager-button-previous-base - The base of the pager previous button.\n * @csspart pager-button-previous-content - The content of the pager previous button.\n * @csspart pager-button-next-base - The base of the pager next button.\n * @csspart pager-button-next-content - The content of the pager next button.\n * @csspart pager-button-last-base - The base of the pager last button.\n * @csspart pager-button-last-content - The content of the pager last button.\n * @csspart pager-page-numbers - The page numbers container of the pager.\n * @csspart pager-page-number - The page number buttons of the pager.\n * @csspart pager-page-number-active - The active page number button of the pager.\n * @csspart pager-page-number-base - The base of the pager page number buttons.\n * @csspart pager-page-number-content - The content of the pager page number buttons.\n * @csspart pager-page-info - The page info text of the pager.\n *\n * @cssproperty --dds-datatable-bg-color - Background color of the table. (default: var(--dds-background-neutral-subtle)).\n * @cssproperty --dds-datatable-border-color - Border color of the table cells. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-datatable-header-bg-color - Background color of the table header. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-datatable-header-text-color - Text color of the table header. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-datatable-row-hover-bg-color - Background color of hovered rows. (default: var(--dds-background-brand-strong))\n * @cssproperty --dds-datatable-row-selected-bg-color - Background color of selected rows. (default: var(--dds-background-brand-strong))\n * @cssproperty --dds-datatable-cell-padding - Padding of table cells. (default: var(--dds-spacing-200))\n * @cssproperty --dds-datatable-header-padding - Padding of header cells. (default: var(--dds-spacing-200))\n * @cssproperty --dds-datatable-last-column-padding - Padding of the last column. (default: var(--dds-spacing-500))\n * @cssproperty --dds-datatable-first-column-padding - Padding of the first column. (default: var(--dds-spacing-500))\n * @cssproperty --dds-datatable-border-width - Width of table borders. (default: var(--dds-border-width-base))\n * @cssproperty --dds-datatable-outer-border-width - Width of the outer container border only. (default: var(--dds-datatable-border-width))\n * @cssproperty --dds-datatable-header-border-width - Width of the header row bottom border only. (default: var(--dds-datatable-border-width))\n * @cssproperty --dds-datatable-row-border-width - Width of the row (body cell) bottom borders only. (default: var(--dds-datatable-border-width))\n * @cssproperty --dds-datatable-stripe-color - Background color for striped rows. (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-datatable-border-radius - Border radius of the table. (default: var(--dds-radius-base))\n * @cssproperty --dds-datatable-shadow - Box shadow of the table. (default: none)\n * @cssproperty --dds-datatable-transition-duration - Duration of hover/selection transitions. (default: 0.2s)\n * @cssproperty --dds-datatable-z-index - Z-index of the table. (default: 1)\n * @cssproperty --dds-datatable-min-height - Minimum height of the table. (default: auto)\n * @cssproperty --dds-datatable-max-height - Maximum height of the table. (default: none)\n * @cssproperty --dds-datatable-overflow-x - Horizontal overflow behavior. (default: auto)\n * @cssproperty --dds-datatable-overflow-y - Vertical overflow behavior. (default: auto)\n * @cssproperty --dds-datatable-resize-handle-color - Color of the column resize indicator line on hover, focus and drag. (default: var(--dds-border-brand-base))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsSortingChange: 'dds-sorting-change' as EventName<DdsSortingChangeEvent>,\nonDdsSelectionChange: 'dds-selection-change' as EventName<DdsSelectionChangeEvent>,\nonDdsPaginationChange: 'dds-pagination-change' as EventName<DdsPaginationChangeEvent>,\nonDdsRowClick: 'dds-row-click' as EventName<DdsRowClickEvent>,\nonDdsColumnSizingChange: 'dds-column-sizing-change' as EventName<DdsColumnSizingChangeEvent>\n        },\n        displayName: \"DapDSDataTable\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAiBM,MAAMA,IAAU,oBA8EVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,oBAAoB;AAAA,IAC9B,sBAAsB;AAAA,IACtB,uBAAuB;AAAA,IACvB,eAAe;AAAA,IACf,yBAAyB;AAAA,EACjB;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-datepicker/index.d.ts

@@ -56,6 +56,14 @@ export type { DdsBlurEvent } from '../../events/events';
 * @csspart calendar-grid-header-cell-base - The base of the calendar grid header cell.
 * @csspart calendar-grid-header-cell - The header cell of the calendar grid.
 * @csspart calendar-grid-cell-today-mark - The today mark of the calendar grid cell.
+* @csspart calendar-button - The calendar icon button of the datepicker.
+* @csspart calendar-header-button-prev - The previous month button of the calendar header.
+* @csspart calendar-header-button-next - The next month button of the calendar header.
+* @csspart calendar-header-year-select - The year select of the calendar header.
+* @csspart calendar-header-month-select - The month select of the calendar header.
+* @csspart label-base - The base of the label.
+* @csspart label-required - The required indicator of the label.
+* @csspart label-optional - The optional indicator of the label.
 *
 * @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))
 * @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))

package/dist/react/dap-ds-datepicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-datepicker/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/datepicker/datepicker.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsInputEvent } from '../../events/events'\nimport type { DdsValidDateEvent } from '../../events/events'\nimport type { DdsInvalidDateEvent } from '../../events/events'\nimport type { DdsClearEvent } from '../../events/events'\nimport type { DdsFocusEvent } from '../../events/events'\nimport type { DdsBlurEvent } from '../../events/events'\n      export type { DdsChangeEvent } from '../../events/events'\nexport type { DdsInputEvent } from '../../events/events'\nexport type { DdsValidDateEvent } from '../../events/events'\nexport type { DdsInvalidDateEvent } from '../../events/events'\nexport type { DdsClearEvent } from '../../events/events'\nexport type { DdsFocusEvent } from '../../events/events'\nexport type { DdsBlurEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-datepicker'\n\n      /**\n * `dap-ds-datepicker`\n * @summary A datepicker is a graphical user interface widget that allows the user to select a date from a calendar and/or time from a time range.\n * @element dap-ds-datepicker\n * @title - Datepicker\n *\n * @property {Dayjs} value - The value of the datepicker.\n * @property {string} label - The label of the datepicker.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the datepicker.\n * @property {'xs' | 'sm' | 'sm'} size - The size of the datepicker.\n * @property {boolean} disabled - The disabled state of the datepicker.\n * @property {boolean} required - The required state of the datepicker.\n * @property {boolean} readonly - The readonly state of the datepicker.\n * @property {boolean} autofocus - The autofocus state of the datepicker.\n * @property {string} tooltip - The tooltip of the datepicker.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the datepicker.\n * @property {string} feedback - The feedback of the datepicker.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the datepicker.\n * @property {boolean} optional - The optional state of the datepicker.\n * @property {string} optionalLabel - The optional label of the datepicker.\n * @property {string} requiredLabel - The required indicator of the datepicker. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {string} autocomplete - The autocomplete of the datepicker.\n * @property {boolean} autofocus - The autofocus of the datepicker.\n *\n * @event {{ value: string }} dds-change - Fired when the datepicker value changes.\n * @event {{ value: string }} dds-input - Fired when the datepicker input value changes.\n * @event {{ value: string }} dds-valid-date - Fired when the datepicker input value is valid. Happens on manual input typing.\n * @event {{ value: string, type: 'invalid' | 'out-of-range', date?: string }} dds-invalid-date - Fired when the datepicker input value is invalid. Happens on manual input typing. For `out-of-range` the typed text was a well-formed date, so `date` carries it as an ISO (`YYYY-MM-DD`) string and the consumer can phrase its own range message; for `invalid` the text could not be parsed and `date` is omitted.\n * @event {{ void }} dds-clear - Fired when the datepicker is cleared.\n * @event {{ void }} dds-focus - Emitted when the datepicker gains focus.\n * @event {{ void }} dds-blur - Emitted when the datepicker loses focus.\n *\n * @csspart base - The main datepicker container.\n * @csspart calendar - The calendar of the datepicker.\n * @csspart trigger - The trigger button of the datepicker.\n * @csspart label - The label of the datepicker.\n * @csspart description - The description of the datepicker.\n * @csspart feedback - The feedback of the datepicker.\n * @csspart tooltip - The tooltip of the datepicker.\n * @csspart input - The input of the datepicker.\n * @csspart clear-button - The clear button of the datepicker.\n * @csspart calendar-grid-cell-base - The base of the calendar grid cell.\n * @csspart calendar-grid-cell - The cell of the calendar grid.\n * @csspart calendar-grid-header-cell-base - The base of the calendar grid header cell.\n * @csspart calendar-grid-header-cell - The header cell of the calendar grid.\n * @csspart calendar-grid-cell-today-mark - The today mark of the calendar grid cell.\n *\n * @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-combobox-border-width - The border width of the combobox. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-combobox-border-radius - The border radius of the combobox. (default: var(--dds-radius-base))\n * @cssproperty --dds-combobox-text-color - The text color of the combobox. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-combobox-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-combobox-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-combobox-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-combobox-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-combobox-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-combobox-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-combobox-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-combobox-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-combobox-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%))\n * @cssproperty --dds-combobox-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-combobox-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-combobox-min-width - The minimum width of the combobox. (default: 7.5rem)\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsInput: 'dds-input' as EventName<DdsInputEvent>,\nonDdsValidDate: 'dds-valid-date' as EventName<DdsValidDateEvent>,\nonDdsInvalidDate: 'dds-invalid-date' as EventName<DdsInvalidDateEvent>,\nonDdsClear: 'dds-clear' as EventName<DdsClearEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>\n        },\n        displayName: \"DapDSDatePicker\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAqBM,MAAMA,IAAU,qBA8EVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,WAAW;AAAA,EACH;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-datepicker/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/datepicker/datepicker.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsInputEvent } from '../../events/events'\nimport type { DdsValidDateEvent } from '../../events/events'\nimport type { DdsInvalidDateEvent } from '../../events/events'\nimport type { DdsClearEvent } from '../../events/events'\nimport type { DdsFocusEvent } from '../../events/events'\nimport type { DdsBlurEvent } from '../../events/events'\n      export type { DdsChangeEvent } from '../../events/events'\nexport type { DdsInputEvent } from '../../events/events'\nexport type { DdsValidDateEvent } from '../../events/events'\nexport type { DdsInvalidDateEvent } from '../../events/events'\nexport type { DdsClearEvent } from '../../events/events'\nexport type { DdsFocusEvent } from '../../events/events'\nexport type { DdsBlurEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-datepicker'\n\n      /**\n * `dap-ds-datepicker`\n * @summary A datepicker is a graphical user interface widget that allows the user to select a date from a calendar and/or time from a time range.\n * @element dap-ds-datepicker\n * @title - Datepicker\n *\n * @property {Dayjs} value - The value of the datepicker.\n * @property {string} label - The label of the datepicker.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the datepicker.\n * @property {'xs' | 'sm' | 'sm'} size - The size of the datepicker.\n * @property {boolean} disabled - The disabled state of the datepicker.\n * @property {boolean} required - The required state of the datepicker.\n * @property {boolean} readonly - The readonly state of the datepicker.\n * @property {boolean} autofocus - The autofocus state of the datepicker.\n * @property {string} tooltip - The tooltip of the datepicker.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the datepicker.\n * @property {string} feedback - The feedback of the datepicker.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the datepicker.\n * @property {boolean} optional - The optional state of the datepicker.\n * @property {string} optionalLabel - The optional label of the datepicker.\n * @property {string} requiredLabel - The required indicator of the datepicker. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {string} autocomplete - The autocomplete of the datepicker.\n * @property {boolean} autofocus - The autofocus of the datepicker.\n *\n * @event {{ value: string }} dds-change - Fired when the datepicker value changes.\n * @event {{ value: string }} dds-input - Fired when the datepicker input value changes.\n * @event {{ value: string }} dds-valid-date - Fired when the datepicker input value is valid. Happens on manual input typing.\n * @event {{ value: string, type: 'invalid' | 'out-of-range', date?: string }} dds-invalid-date - Fired when the datepicker input value is invalid. Happens on manual input typing. For `out-of-range` the typed text was a well-formed date, so `date` carries it as an ISO (`YYYY-MM-DD`) string and the consumer can phrase its own range message; for `invalid` the text could not be parsed and `date` is omitted.\n * @event {{ void }} dds-clear - Fired when the datepicker is cleared.\n * @event {{ void }} dds-focus - Emitted when the datepicker gains focus.\n * @event {{ void }} dds-blur - Emitted when the datepicker loses focus.\n *\n * @csspart base - The main datepicker container.\n * @csspart calendar - The calendar of the datepicker.\n * @csspart trigger - The trigger button of the datepicker.\n * @csspart label - The label of the datepicker.\n * @csspart description - The description of the datepicker.\n * @csspart feedback - The feedback of the datepicker.\n * @csspart tooltip - The tooltip of the datepicker.\n * @csspart input - The input of the datepicker.\n * @csspart clear-button - The clear button of the datepicker.\n * @csspart calendar-grid-cell-base - The base of the calendar grid cell.\n * @csspart calendar-grid-cell - The cell of the calendar grid.\n * @csspart calendar-grid-header-cell-base - The base of the calendar grid header cell.\n * @csspart calendar-grid-header-cell - The header cell of the calendar grid.\n * @csspart calendar-grid-cell-today-mark - The today mark of the calendar grid cell.\n * @csspart calendar-button - The calendar icon button of the datepicker.\n * @csspart calendar-header-button-prev - The previous month button of the calendar header.\n * @csspart calendar-header-button-next - The next month button of the calendar header.\n * @csspart calendar-header-year-select - The year select of the calendar header.\n * @csspart calendar-header-month-select - The month select of the calendar header.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n *\n * @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-combobox-border-width - The border width of the combobox. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-combobox-border-radius - The border radius of the combobox. (default: var(--dds-radius-base))\n * @cssproperty --dds-combobox-text-color - The text color of the combobox. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-combobox-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-combobox-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-combobox-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-combobox-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-combobox-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-combobox-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-combobox-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-combobox-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-combobox-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%))\n * @cssproperty --dds-combobox-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-combobox-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-combobox-min-width - The minimum width of the combobox. (default: 7.5rem)\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsInput: 'dds-input' as EventName<DdsInputEvent>,\nonDdsValidDate: 'dds-valid-date' as EventName<DdsValidDateEvent>,\nonDdsInvalidDate: 'dds-invalid-date' as EventName<DdsInvalidDateEvent>,\nonDdsClear: 'dds-clear' as EventName<DdsClearEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>\n        },\n        displayName: \"DapDSDatePicker\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAqBM,MAAMA,IAAU,qBAsFVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,WAAW;AAAA,EACH;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-file-input/index.d.ts

@@ -82,6 +82,9 @@ export type { DdsFilesAcceptedEvent } from '../../events/events';
 * @csspart browse-button - The browse button.
 * @csspart upload-button - The upload button.
 * @csspart dropzone - The dropzone area.
+* @csspart label-base - The base of the label.
+* @csspart label-required - The required indicator of the label.
+* @csspart label-optional - The optional indicator of the label.
 *
 * @cssproperty --dds-file-input-holder-margin - The margin of the input holder in shorthand format: top right bottom left (default: var(--dds-spacing-400) 0 0 0)
 * @cssproperty --dds-file-input-dropzone-padding - The padding of the dropzone (default: var(--dds-spacing-800))

package/dist/react/dap-ds-file-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-file-input/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/file-input/file-input.js'\n      import type { DdsUploadStartEvent } from '../../events/events'\nimport type { DdsUploadProgressEvent } from '../../events/events'\nimport type { DdsUploadCompleteEvent } from '../../events/events'\nimport type { DdsUploadErrorEvent } from '../../events/events'\nimport type { DdsAllUploadsCompleteEvent } from '../../events/events'\nimport type { DdsFileRemovedEvent } from '../../events/events'\nimport type { DdsFileDeleteErrorEvent } from '../../events/events'\nimport type { DdsFileChangeEvent } from '../../events/events'\nimport type { DdsFilesAcceptedEvent } from '../../events/events'\n      export type { DdsUploadStartEvent } from '../../events/events'\nexport type { DdsUploadProgressEvent } from '../../events/events'\nexport type { DdsUploadCompleteEvent } from '../../events/events'\nexport type { DdsUploadErrorEvent } from '../../events/events'\nexport type { DdsAllUploadsCompleteEvent } from '../../events/events'\nexport type { DdsFileRemovedEvent } from '../../events/events'\nexport type { DdsFileDeleteErrorEvent } from '../../events/events'\nexport type { DdsFileChangeEvent } from '../../events/events'\nexport type { DdsFilesAcceptedEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-file-input'\n\n      /**\n * `dap-ds-file-input`\n * @summary A file input is a control that allows users to select files to upload.\n * @element dap-ds-file-input\n * @title - File input\n *\n * @property {string} name - The name of the file input.\n * @property {string} value - The value of the file input.\n * @property {'success' | 'error'} status - The status of the file input.\n * @property {string} label - The label for the file input.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description for the file input.\n * @property {string} tooltip - The tooltip for the file input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {boolean} disabled - Whether the file input is disabled.\n * @property { 'xs' | 'sm' | 'lg' } size - The size of the file input.\n * @property {string} feedback - The feedback for the file input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The type of feedback for the file input.\n * @property {boolean} required - Whether the file input is required.\n * @property {string} requiredLabel - The required indicator of the file input. (default: '*')\n * @property {boolean} optional - Whether the file input is optional.\n * @property {string} optionalLabel - The optional label of the file input.\n * @property {boolean} subtle - Font weight of the feedback label. Default is `false` which is bold.\n * @property {string} uploadButtonLabel - The label for the upload button.\n * @property {string} browseButtonLabel - The label for the browse button.\n * @property {string} accept - The file types that the file input accepts.\n * @property {boolean} multiple - Whether the file input accepts multiple files.\n * @property {boolean} keepValue - Whether to keep the value when new files are selected.\n * @property {string} uploadUrl - A remote URL to upload files to.\n * @property {string} deleteUrl - A remote URL to delete uploaded files from. Supports placeholders: `{fileName}`, `{id}`, `{key}`, `{location}`.\n * @property {string} uploadHeaders - Custom headers for upload requests (JSON string).\n * @property {string} deleteHeaders - Custom headers for delete requests (JSON string).\n * @property {boolean} autoupload - Whether to automatically upload files after selection.\n * @property {number} maxFiles - The maximum number of files that can be uploaded.\n * @property {number} maxFileSize - The maximum size of files that can be uploaded (in bytes).\n * @property {number} maxSizePerFile - The maximum size a single file can have (in bytes).\n * @property {string} maxFileSizeErrorText - Text for the max file size error.\n * @property {string} maxSizePerFileErrorText - Text for the max size per file error.\n * @property {string} maxFileAmountErrorText - Text for the max file amount error.\n * @property {string} fileTypeErrorText - Text for the file type error.\n * @property {boolean} showDropzone - Whether to show a separate dropzone area.\n * @property {string} dropzoneText - Text to display in the dropzone.\n * @property {string} dropzoneAriaLabel - Aria label for the dropzone.\n * @property {boolean} dropzoneFocusable - Whether the dropzone is in the tab order and exposes button keyboard behavior (default: true).\n * @property {boolean} showFileList - Whether to show the built-in file list.\n * @property {boolean} confirmRemove - Whether to show confirmation dialog before removing files.\n * @property {string} showUploadButton - Whether to show the upload button. Default is `true`.\n * @property {string} removeButtonLabel - The label for the remove button.\n * @property {string} cancelButtonLabel - The label for the cancel button.\n *\n * @event {{ file: File }} dds-upload-start - Fired when a file upload starts.\n * @event {{ file: File, progress: number }} dds-upload-progress - Fired during file upload progress.\n * @event {{ file: File, item: DapDSFileInputListItem, result: any }} dds-upload-complete - Fired when a file upload completes successfully.\n * @event {{ file?: File, errors: FileError[], item?: DapDSFileInputListItem }} dds-upload-error - Fired when a file upload encounters an error. Always contains an errors array, even if there is only one error.\n * @event {{ void }} dds-all-uploads-complete - Fired when all file uploads are complete.\n * @event {{ file: FileListElement }} dds-file-removed - Fired when a file is removed from the file input.\n * @event {{ file: FileListElement, error: Error }} dds-file-delete-error - Fired when a file deletion from server encounters an error.\n * @event {{ newFiles: File[], files: File[], canceledFiles: Set<File>, currentFiles: File[] }} dds-file-change - Fired when the file input value changes. This event is cancelable. Event detail contains: `newFiles` (just the files being added in this operation), `currentFiles` (all files that were already selected before this operation), `files` (all files after merge with existing when keepValue=true), and `canceledFiles` (Set to add files you want to reject). You can either: (1) Call `event.preventDefault()` to reject all files, or (2) Add specific files to `canceledFiles` to reject only those files.\n * @event {{ files: File[] }} dds-files-accepted - Fired when the file input value changes. This event is cancelable. Event detail contains: `files` (all files after merge with existing when keepValue=true).\n *\n * @slot dropzone-content - The content to display in the dropzone.\n *\n * @csspart base - The main file input container.\n * @csspart input - The file input control.\n * @csspart label - The file input label.\n * @csspart description - The file input description.\n * @csspart feedback - The file input feedback.\n * @csspart tooltip - The file input tooltip.\n * @csspart upload-progress - The upload progress container.\n * @csspart browse-button - The browse button.\n * @csspart upload-button - The upload button.\n * @csspart dropzone - The dropzone area.\n *\n * @cssproperty --dds-file-input-holder-margin - The margin of the input holder in shorthand format: top right bottom left (default: var(--dds-spacing-400) 0 0 0)\n * @cssproperty --dds-file-input-dropzone-padding - The padding of the dropzone (default: var(--dds-spacing-800))\n * @cssproperty --dds-file-input-dropzone-border - The border of the dropzone in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-border-neutral-subtle))\n * @cssproperty --dds-file-input-dropzone-border-radius - The border radius of the dropzone (default: var(--dds-radius-base))\n * @cssproperty --dds-file-input-dropzone-background - The background of the dropzone (default: var(--dds-color-background-primary))\n * @cssproperty --dds-file-input-dropzone-border-hover - The border of the dropzone on hover in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-color-border-primary-hover))\n * @cssproperty --dds-file-input-dropzone-background-hover - The background of the dropzone on hover (default: var(--dds-color-background-primary-hover))\n * @cssproperty --dds-file-input-dropzone-border-dragover - The border of the dropzone when dragging over in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-color-border-accent))\n * @cssproperty --dds-file-input-dropzone-background-dragover - The background of the dropzone when dragging over (default: var(--dds-color-background-accent-light))\n * @cssproperty --dds-file-input-dropzone-border-disabled - The border of the disabled dropzone in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-border-neutral-disabled))\n * @cssproperty --dds-file-input-dropzone-gap - The gap between elements in the dropzone content (default: var(--dds-spacing-300))\n * @cssproperty --dds-file-input-dropzone-accept-color - The text color of the accepted file types in the dropzone (default: var(--dds-color-text-secondary))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsUploadStart: 'dds-upload-start' as EventName<DdsUploadStartEvent>,\nonDdsUploadProgress: 'dds-upload-progress' as EventName<DdsUploadProgressEvent>,\nonDdsUploadComplete: 'dds-upload-complete' as EventName<DdsUploadCompleteEvent>,\nonDdsUploadError: 'dds-upload-error' as EventName<DdsUploadErrorEvent>,\nonDdsAllUploadsComplete: 'dds-all-uploads-complete' as EventName<DdsAllUploadsCompleteEvent>,\nonDdsFileRemoved: 'dds-file-removed' as EventName<DdsFileRemovedEvent>,\nonDdsFileDeleteError: 'dds-file-delete-error' as EventName<DdsFileDeleteErrorEvent>,\nonDdsFileChange: 'dds-file-change' as EventName<DdsFileChangeEvent>,\nonDdsFilesAccepted: 'dds-files-accepted' as EventName<DdsFilesAcceptedEvent>\n        },\n        displayName: \"DapDSFileInput\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAyBM,MAAMA,IAAU,qBAwFVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,kBAAkB;AAAA,IAC5B,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,kBAAkB;AAAA,IAClB,yBAAyB;AAAA,IACzB,kBAAkB;AAAA,IAClB,sBAAsB;AAAA,IACtB,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,EACZ;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-file-input/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/file-input/file-input.js'\n      import type { DdsUploadStartEvent } from '../../events/events'\nimport type { DdsUploadProgressEvent } from '../../events/events'\nimport type { DdsUploadCompleteEvent } from '../../events/events'\nimport type { DdsUploadErrorEvent } from '../../events/events'\nimport type { DdsAllUploadsCompleteEvent } from '../../events/events'\nimport type { DdsFileRemovedEvent } from '../../events/events'\nimport type { DdsFileDeleteErrorEvent } from '../../events/events'\nimport type { DdsFileChangeEvent } from '../../events/events'\nimport type { DdsFilesAcceptedEvent } from '../../events/events'\n      export type { DdsUploadStartEvent } from '../../events/events'\nexport type { DdsUploadProgressEvent } from '../../events/events'\nexport type { DdsUploadCompleteEvent } from '../../events/events'\nexport type { DdsUploadErrorEvent } from '../../events/events'\nexport type { DdsAllUploadsCompleteEvent } from '../../events/events'\nexport type { DdsFileRemovedEvent } from '../../events/events'\nexport type { DdsFileDeleteErrorEvent } from '../../events/events'\nexport type { DdsFileChangeEvent } from '../../events/events'\nexport type { DdsFilesAcceptedEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-file-input'\n\n      /**\n * `dap-ds-file-input`\n * @summary A file input is a control that allows users to select files to upload.\n * @element dap-ds-file-input\n * @title - File input\n *\n * @property {string} name - The name of the file input.\n * @property {string} value - The value of the file input.\n * @property {'success' | 'error'} status - The status of the file input.\n * @property {string} label - The label for the file input.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description for the file input.\n * @property {string} tooltip - The tooltip for the file input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {boolean} disabled - Whether the file input is disabled.\n * @property { 'xs' | 'sm' | 'lg' } size - The size of the file input.\n * @property {string} feedback - The feedback for the file input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The type of feedback for the file input.\n * @property {boolean} required - Whether the file input is required.\n * @property {string} requiredLabel - The required indicator of the file input. (default: '*')\n * @property {boolean} optional - Whether the file input is optional.\n * @property {string} optionalLabel - The optional label of the file input.\n * @property {boolean} subtle - Font weight of the feedback label. Default is `false` which is bold.\n * @property {string} uploadButtonLabel - The label for the upload button.\n * @property {string} browseButtonLabel - The label for the browse button.\n * @property {string} accept - The file types that the file input accepts.\n * @property {boolean} multiple - Whether the file input accepts multiple files.\n * @property {boolean} keepValue - Whether to keep the value when new files are selected.\n * @property {string} uploadUrl - A remote URL to upload files to.\n * @property {string} deleteUrl - A remote URL to delete uploaded files from. Supports placeholders: `{fileName}`, `{id}`, `{key}`, `{location}`.\n * @property {string} uploadHeaders - Custom headers for upload requests (JSON string).\n * @property {string} deleteHeaders - Custom headers for delete requests (JSON string).\n * @property {boolean} autoupload - Whether to automatically upload files after selection.\n * @property {number} maxFiles - The maximum number of files that can be uploaded.\n * @property {number} maxFileSize - The maximum size of files that can be uploaded (in bytes).\n * @property {number} maxSizePerFile - The maximum size a single file can have (in bytes).\n * @property {string} maxFileSizeErrorText - Text for the max file size error.\n * @property {string} maxSizePerFileErrorText - Text for the max size per file error.\n * @property {string} maxFileAmountErrorText - Text for the max file amount error.\n * @property {string} fileTypeErrorText - Text for the file type error.\n * @property {boolean} showDropzone - Whether to show a separate dropzone area.\n * @property {string} dropzoneText - Text to display in the dropzone.\n * @property {string} dropzoneAriaLabel - Aria label for the dropzone.\n * @property {boolean} dropzoneFocusable - Whether the dropzone is in the tab order and exposes button keyboard behavior (default: true).\n * @property {boolean} showFileList - Whether to show the built-in file list.\n * @property {boolean} confirmRemove - Whether to show confirmation dialog before removing files.\n * @property {string} showUploadButton - Whether to show the upload button. Default is `true`.\n * @property {string} removeButtonLabel - The label for the remove button.\n * @property {string} cancelButtonLabel - The label for the cancel button.\n *\n * @event {{ file: File }} dds-upload-start - Fired when a file upload starts.\n * @event {{ file: File, progress: number }} dds-upload-progress - Fired during file upload progress.\n * @event {{ file: File, item: DapDSFileInputListItem, result: any }} dds-upload-complete - Fired when a file upload completes successfully.\n * @event {{ file?: File, errors: FileError[], item?: DapDSFileInputListItem }} dds-upload-error - Fired when a file upload encounters an error. Always contains an errors array, even if there is only one error.\n * @event {{ void }} dds-all-uploads-complete - Fired when all file uploads are complete.\n * @event {{ file: FileListElement }} dds-file-removed - Fired when a file is removed from the file input.\n * @event {{ file: FileListElement, error: Error }} dds-file-delete-error - Fired when a file deletion from server encounters an error.\n * @event {{ newFiles: File[], files: File[], canceledFiles: Set<File>, currentFiles: File[] }} dds-file-change - Fired when the file input value changes. This event is cancelable. Event detail contains: `newFiles` (just the files being added in this operation), `currentFiles` (all files that were already selected before this operation), `files` (all files after merge with existing when keepValue=true), and `canceledFiles` (Set to add files you want to reject). You can either: (1) Call `event.preventDefault()` to reject all files, or (2) Add specific files to `canceledFiles` to reject only those files.\n * @event {{ files: File[] }} dds-files-accepted - Fired when the file input value changes. This event is cancelable. Event detail contains: `files` (all files after merge with existing when keepValue=true).\n *\n * @slot dropzone-content - The content to display in the dropzone.\n *\n * @csspart base - The main file input container.\n * @csspart input - The file input control.\n * @csspart label - The file input label.\n * @csspart description - The file input description.\n * @csspart feedback - The file input feedback.\n * @csspart tooltip - The file input tooltip.\n * @csspart upload-progress - The upload progress container.\n * @csspart browse-button - The browse button.\n * @csspart upload-button - The upload button.\n * @csspart dropzone - The dropzone area.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n *\n * @cssproperty --dds-file-input-holder-margin - The margin of the input holder in shorthand format: top right bottom left (default: var(--dds-spacing-400) 0 0 0)\n * @cssproperty --dds-file-input-dropzone-padding - The padding of the dropzone (default: var(--dds-spacing-800))\n * @cssproperty --dds-file-input-dropzone-border - The border of the dropzone in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-border-neutral-subtle))\n * @cssproperty --dds-file-input-dropzone-border-radius - The border radius of the dropzone (default: var(--dds-radius-base))\n * @cssproperty --dds-file-input-dropzone-background - The background of the dropzone (default: var(--dds-color-background-primary))\n * @cssproperty --dds-file-input-dropzone-border-hover - The border of the dropzone on hover in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-color-border-primary-hover))\n * @cssproperty --dds-file-input-dropzone-background-hover - The background of the dropzone on hover (default: var(--dds-color-background-primary-hover))\n * @cssproperty --dds-file-input-dropzone-border-dragover - The border of the dropzone when dragging over in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-color-border-accent))\n * @cssproperty --dds-file-input-dropzone-background-dragover - The background of the dropzone when dragging over (default: var(--dds-color-background-accent-light))\n * @cssproperty --dds-file-input-dropzone-border-disabled - The border of the disabled dropzone in shorthand format: width style color (default: var(--dds-border-width-base) dashed var(--dds-border-neutral-disabled))\n * @cssproperty --dds-file-input-dropzone-gap - The gap between elements in the dropzone content (default: var(--dds-spacing-300))\n * @cssproperty --dds-file-input-dropzone-accept-color - The text color of the accepted file types in the dropzone (default: var(--dds-color-text-secondary))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsUploadStart: 'dds-upload-start' as EventName<DdsUploadStartEvent>,\nonDdsUploadProgress: 'dds-upload-progress' as EventName<DdsUploadProgressEvent>,\nonDdsUploadComplete: 'dds-upload-complete' as EventName<DdsUploadCompleteEvent>,\nonDdsUploadError: 'dds-upload-error' as EventName<DdsUploadErrorEvent>,\nonDdsAllUploadsComplete: 'dds-all-uploads-complete' as EventName<DdsAllUploadsCompleteEvent>,\nonDdsFileRemoved: 'dds-file-removed' as EventName<DdsFileRemovedEvent>,\nonDdsFileDeleteError: 'dds-file-delete-error' as EventName<DdsFileDeleteErrorEvent>,\nonDdsFileChange: 'dds-file-change' as EventName<DdsFileChangeEvent>,\nonDdsFilesAccepted: 'dds-files-accepted' as EventName<DdsFilesAcceptedEvent>\n        },\n        displayName: \"DapDSFileInput\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAyBM,MAAMA,IAAU,qBA2FVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,kBAAkB;AAAA,IAC5B,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,kBAAkB;AAAA,IAClB,yBAAyB;AAAA,IACzB,kBAAkB;AAAA,IAClB,sBAAsB;AAAA,IACtB,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,EACZ;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-file-input-list-item/index.d.ts

@@ -23,6 +23,7 @@ export type { DdsFileClickEvent } from '../../events/events';
 * @csspart spinner - The spinner of the item component.
 * @csspart remove-button - The remove button of the item component.
 * @csspart thumbnail - The thumbnail of the item component.
+* @csspart content - The content of the list item.
 *
 * @cssproperty --dds-file-list-item-padding - The padding of the file list item (default: var(--dds-spacing-200))
 * @cssproperty --dds-file-list-item-border-width - The border width of the file list item (default: var(--dds-border-width-base))

package/dist/react/dap-ds-file-input-list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-file-input-list-item/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/file-input/file-input-list-item.js'\n      import type { DdsFileRemoveEvent } from '../../events/events'\nimport type { DdsFileClickEvent } from '../../events/events'\n      export type { DdsFileRemoveEvent } from '../../events/events'\nexport type { DdsFileClickEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-file-input-list-item'\n\n      /**\n * `dap-ds-file-input-list-item`\n * @summary A file input list item is a container for file input list items.\n * @element dap-ds-file-input-list-item\n * @title - File input list item\n * @group file-input\n *\n * @event {{ file: FileListElement }} dds-file-remove - Dispatched when a file is removed from the list.\n * @event {{ file: FileListElement }} dds-file-click - Dispatched when a file is clicked.\n *\n * @slot delete-button - The delete button.\n *\n * @csspart base - The main file input list item container.\n * @csspart feedback - The feedback container.\n * @csspart link - The link text of the item component.\n * @csspart filename - The filename text of the item component.\n * @csspart filesize - The filesize text of the item component.\n * @csspart spinner - The spinner of the item component.\n * @csspart remove-button - The remove button of the item component.\n * @csspart thumbnail - The thumbnail of the item component.\n *\n * @cssproperty --dds-file-list-item-padding - The padding of the file list item (default: var(--dds-spacing-200))\n * @cssproperty --dds-file-list-item-border-width - The border width of the file list item (default: var(--dds-border-width-base))\n * @cssproperty --dds-file-list-item-border-color - The border color of the file list item (default: var(--dds-border-neutral-transparent))\n * @cssproperty --dds-file-list-item-border-radius - The border radius of the file list item (default: var(--dds-radius-base))\n * @cssproperty --dds-file-list-item-bg-color - The background color of the file list item (default: var(--dds-fields-background-default))\n * @cssproperty --dds-file-list-item-font-weight - The font weight of the file list item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-file-list-item-disabled-bg-color - The background color of the disabled file list item (default: var(--dds-cold-grey-400))\n * @cssproperty --dds-file-list-item-disabled-color - The text color of the disabled file list item (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-file-list-item-content-margin - The margin of the content within the file list item (default: var(--dds-spacing-100) var(--dds-spacing-200))\n * @cssproperty --dds-file-list-item-content-gap - The gap between content elements in the file list item (default: var(--dds-spacing-200))\n * @cssproperty --dds-file-list-item-filename-color - The color of the filename text (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-file-list-item-filesize-color - The color of the filesize text (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-file-list-item-feedback-padding-x - The padding of the feedback section (default: var(--dds-spacing-200))\n * @cssproperty --dds-file-list-item-feedback-padding-y - The padding of the feedback section (default: var(--dds-spacing-100))\n * @cssproperty --dds-file-list-item-feedback-border-color - The border color of the feedback section (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-file-list-item-feedback-font-size - The font size of the feedback text (default: var(--dds-font-sm))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsFileRemove: 'dds-file-remove' as EventName<DdsFileRemoveEvent>,\nonDdsFileClick: 'dds-file-click' as EventName<DdsFileClickEvent>\n        },\n        displayName: \"DapDSFileInputListItem\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAWM,MAAMA,IAAU,+BAwCVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,iBAAiB;AAAA,IAC3B,gBAAgB;AAAA,EACR;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-file-input-list-item/index.ts"],"sourcesContent":["\n      import { createComponent } from '@lit/react'\n      import { type EventName } from '@lit/react'\n      import * as React from 'react'\n\n      import Component from '../../components/file-input/file-input-list-item.js'\n      import type { DdsFileRemoveEvent } from '../../events/events'\nimport type { DdsFileClickEvent } from '../../events/events'\n      export type { DdsFileRemoveEvent } from '../../events/events'\nexport type { DdsFileClickEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-file-input-list-item'\n\n      /**\n * `dap-ds-file-input-list-item`\n * @summary A file input list item is a container for file input list items.\n * @element dap-ds-file-input-list-item\n * @title - File input list item\n * @group file-input\n *\n * @event {{ file: FileListElement }} dds-file-remove - Dispatched when a file is removed from the list.\n * @event {{ file: FileListElement }} dds-file-click - Dispatched when a file is clicked.\n *\n * @slot delete-button - The delete button.\n *\n * @csspart base - The main file input list item container.\n * @csspart feedback - The feedback container.\n * @csspart link - The link text of the item component.\n * @csspart filename - The filename text of the item component.\n * @csspart filesize - The filesize text of the item component.\n * @csspart spinner - The spinner of the item component.\n * @csspart remove-button - The remove button of the item component.\n * @csspart thumbnail - The thumbnail of the item component.\n * @csspart content - The content of the list item.\n *\n * @cssproperty --dds-file-list-item-padding - The padding of the file list item (default: var(--dds-spacing-200))\n * @cssproperty --dds-file-list-item-border-width - The border width of the file list item (default: var(--dds-border-width-base))\n * @cssproperty --dds-file-list-item-border-color - The border color of the file list item (default: var(--dds-border-neutral-transparent))\n * @cssproperty --dds-file-list-item-border-radius - The border radius of the file list item (default: var(--dds-radius-base))\n * @cssproperty --dds-file-list-item-bg-color - The background color of the file list item (default: var(--dds-fields-background-default))\n * @cssproperty --dds-file-list-item-font-weight - The font weight of the file list item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-file-list-item-disabled-bg-color - The background color of the disabled file list item (default: var(--dds-cold-grey-400))\n * @cssproperty --dds-file-list-item-disabled-color - The text color of the disabled file list item (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-file-list-item-content-margin - The margin of the content within the file list item (default: var(--dds-spacing-100) var(--dds-spacing-200))\n * @cssproperty --dds-file-list-item-content-gap - The gap between content elements in the file list item (default: var(--dds-spacing-200))\n * @cssproperty --dds-file-list-item-filename-color - The color of the filename text (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-file-list-item-filesize-color - The color of the filesize text (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-file-list-item-feedback-padding-x - The padding of the feedback section (default: var(--dds-spacing-200))\n * @cssproperty --dds-file-list-item-feedback-padding-y - The padding of the feedback section (default: var(--dds-spacing-100))\n * @cssproperty --dds-file-list-item-feedback-border-color - The border color of the feedback section (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-file-list-item-feedback-font-size - The font size of the feedback text (default: var(--dds-font-sm))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsFileRemove: 'dds-file-remove' as EventName<DdsFileRemoveEvent>,\nonDdsFileClick: 'dds-file-click' as EventName<DdsFileClickEvent>\n        },\n        displayName: \"DapDSFileInputListItem\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAWM,MAAMA,IAAU,+BAyCVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,iBAAiB;AAAA,IAC3B,gBAAgB;AAAA,EACR;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-form-label/index.d.ts

@@ -14,9 +14,9 @@ import { default as Component } from '../../components/form/form-label/form-labe
  * @property {string} label - The label text.
  * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)
  *
- * @csspart base - The main form label container.
  * @csspart required - The required indicator of the form label.
  * @csspart optional - The optional indicator of the form label.
+ * @csspart label-base - The label element.
  *
  * @cssproperty --dds-form-label-font-weight - Font weight of the label. (default: var(--dds-font-weight-bold))
  * @cssproperty --dds-form-label-line-height - Line height of the label. (default: var(--dds-font-line-height-xlarge))

package/dist/react/dap-ds-form-label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-form-label/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/form/form-label/form-label.js'\n\nconst tagName = 'dap-ds-form-label'\n\n/**\n * `dap-ds-form-label`\n * @summary A form label is a container for labels in a form.\n * @element dap-ds-form-label\n * @title - Form label\n * @group form\n *\n * @property {string} optionalLabel - Label of optional text\n * @property {boolean} subtle - Text weight of the label.\n * @property {boolean} optional - If the label is optional.\n * @property {boolean} required - If the label is required.\n * @property {string} requiredLabel - Indicator of required text. (default: '*')\n * @property {string} label - The label text.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n *\n * @csspart base - The main form label container.\n * @csspart required - The required indicator of the form label.\n * @csspart optional - The optional indicator of the form label.\n *\n * @cssproperty --dds-form-label-font-weight - Font weight of the label. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-form-label-line-height - Line height of the label. (default: var(--dds-font-line-height-xlarge))\n * @cssproperty --dds-form-label-color - Text color of the label. (default: var(--dds-text-neutral-enabled))\n * @cssproperty --dds-form-label-disabled-color - Text color when the label is disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-form-label-required-color - Color of the required indicator. (default: var(--dds-text-negative-subtle))\n * @cssproperty --dds-form-label-optional-color - Color of the optional indicator. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-form-label-margin-bottom - Bottom margin of the label. (default: var(--dds-spacing-200))\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSFormLabel',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,qBA6BVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-form-label/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/form/form-label/form-label.js'\n\nconst tagName = 'dap-ds-form-label'\n\n/**\n * `dap-ds-form-label`\n * @summary A form label is a container for labels in a form.\n * @element dap-ds-form-label\n * @title - Form label\n * @group form\n *\n * @property {string} optionalLabel - Label of optional text\n * @property {boolean} subtle - Text weight of the label.\n * @property {boolean} optional - If the label is optional.\n * @property {boolean} required - If the label is required.\n * @property {string} requiredLabel - Indicator of required text. (default: '*')\n * @property {string} label - The label text.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n *\n * @csspart required - The required indicator of the form label.\n * @csspart optional - The optional indicator of the form label.\n * @csspart label-base - The label element.\n *\n * @cssproperty --dds-form-label-font-weight - Font weight of the label. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-form-label-line-height - Line height of the label. (default: var(--dds-font-line-height-xlarge))\n * @cssproperty --dds-form-label-color - Text color of the label. (default: var(--dds-text-neutral-enabled))\n * @cssproperty --dds-form-label-disabled-color - Text color when the label is disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-form-label-required-color - Color of the required indicator. (default: var(--dds-text-negative-subtle))\n * @cssproperty --dds-form-label-optional-color - Color of the optional indicator. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-form-label-margin-bottom - Bottom margin of the label. (default: var(--dds-spacing-200))\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSFormLabel',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,qBA6BVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-icon-button/index.d.ts

@@ -13,6 +13,7 @@ import { default as Component } from '../../components/icon-button/icon-button.j
  * @csspart content - The icon of the button.
  * @csspart icon - The icon of the icon.
  * @csspart icon-base - The base of the icon.
+ * @csspart high-contrast - The high contrast indicator of the button.
  *
  * @cssproperty --dds-icon-button-border-width - Border width of the icon button (default: var(--dds-border-width-base))
  * @cssproperty --dds-icon-button-border-color - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500))

package/dist/react/dap-ds-icon-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-icon-button/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/icon-button/icon-button.js'\n\nconst tagName = 'dap-ds-icon-button'\n\n/**\n * `dap-ds-icon-button`\n * @summary An icon button is a button with an icon.\n * @element dap-ds-icon-button\n * @title - Icon button\n *\n * @property {string} ariaLabel - The aria label of the button.\n *\n * @slot - The icon of the button.\n *\n * @csspart base - The main button container.\n * @csspart content - The icon of the button.\n * @csspart icon - The icon of the icon.\n * @csspart icon-base - The base of the icon.\n *\n * @cssproperty --dds-icon-button-border-width - Border width of the icon button (default: var(--dds-border-width-base))\n * @cssproperty --dds-icon-button-border-color - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-icon-button-border-radius - Border radius of the icon button (default: var(--dds-radius-rounded))\n * @cssproperty --dds-icon-button-hover-border-width - Border width on hover (default: var(--dds-border-width-large))\n * @cssproperty --dds-icon-button-active-border-width - Border width when active (default: var(--dds-border-width-xlarge))\n * @cssproperty --dds-icon-button-transition - Transition property for the icon button (default: var(--dds-transition-all))\n * @cssproperty --dds-icon-button-cursor - Cursor style for the button (default: pointer)\n * @cssproperty --dds-icon-button-disabled-cursor - Cursor style for the disabled button (default: not-allowed)\n * @cssproperty --dds-icon-button-column-gap - Column gap between elements (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-lg - Padding for large size (default: var(--dds-spacing-0))\n * @cssproperty --dds-icon-button-padding-md - Padding for medium size (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-sm - Padding for small size (default: var(--dds-spacing-50))\n * @cssproperty --dds-icon-button-padding-xs - Padding for extra small size (default: var(--dds-spacing-25))\n * @cssproperty --dds-icon-button-size-lg - Size for large icon button (default: var(--dds-spacing-800))\n * @cssproperty --dds-icon-button-size-md - Size for medium icon button (default: var(--dds-spacing-600))\n * @cssproperty --dds-icon-button-size-sm - Size for small icon button (default: var(--dds-spacing-400))\n * @cssproperty --dds-icon-button-size-xs - Size for extra small icon button (default: var(--dds-spacing-300))\n * @cssproperty --dds-icon-button-neutral-bg - Background color for neutral variant (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-icon-button-neutral-color - Text color for neutral variant (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-icon-button-neutral-hover-bg - Hover background color for neutral variant (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-icon-button-neutral-active-bg - Active background color for neutral variant (default: var(--dds-transparent-black-medium))\n * @cssproperty --dds-icon-button-brand-bg - Background color for brand variant (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-icon-button-brand-color - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled))\n * @cssproperty --dds-icon-button-brand-hover-bg - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover))\n * @cssproperty --dds-icon-button-brand-active-bg - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed))\n * @cssproperty --dds-icon-button-inverted-bg - Background color for inverted variant (default: var(--dds-transparent-white-subtle))\n * @cssproperty --dds-icon-button-inverted-color - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-hover-bg - Hover background color for inverted variant (default: var(--dds-transparent-white-base))\n * @cssproperty --dds-icon-button-inverted-active-bg - Active background color for inverted variant (default: var(--dds-transparent-white-medium))\n * @cssproperty --dds-icon-button-inverted-brand-bg - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-color - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-hover-bg - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-active-bg - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-disabled-color - Color for disabled state (default: var(--dds-icon-neutral-disabled))\n * @cssproperty --dds-icon-button-disabled-bg - Background color for disabled state (default: transparent)\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSIconButton',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,sBAqDVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-icon-button/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/icon-button/icon-button.js'\n\nconst tagName = 'dap-ds-icon-button'\n\n/**\n * `dap-ds-icon-button`\n * @summary An icon button is a button with an icon.\n * @element dap-ds-icon-button\n * @title - Icon button\n *\n * @property {string} ariaLabel - The aria label of the button.\n *\n * @slot - The icon of the button.\n *\n * @csspart base - The main button container.\n * @csspart content - The icon of the button.\n * @csspart icon - The icon of the icon.\n * @csspart icon-base - The base of the icon.\n * @csspart high-contrast - The high contrast indicator of the button.\n *\n * @cssproperty --dds-icon-button-border-width - Border width of the icon button (default: var(--dds-border-width-base))\n * @cssproperty --dds-icon-button-border-color - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-icon-button-border-radius - Border radius of the icon button (default: var(--dds-radius-rounded))\n * @cssproperty --dds-icon-button-hover-border-width - Border width on hover (default: var(--dds-border-width-large))\n * @cssproperty --dds-icon-button-active-border-width - Border width when active (default: var(--dds-border-width-xlarge))\n * @cssproperty --dds-icon-button-transition - Transition property for the icon button (default: var(--dds-transition-all))\n * @cssproperty --dds-icon-button-cursor - Cursor style for the button (default: pointer)\n * @cssproperty --dds-icon-button-disabled-cursor - Cursor style for the disabled button (default: not-allowed)\n * @cssproperty --dds-icon-button-column-gap - Column gap between elements (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-lg - Padding for large size (default: var(--dds-spacing-0))\n * @cssproperty --dds-icon-button-padding-md - Padding for medium size (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-sm - Padding for small size (default: var(--dds-spacing-50))\n * @cssproperty --dds-icon-button-padding-xs - Padding for extra small size (default: var(--dds-spacing-25))\n * @cssproperty --dds-icon-button-size-lg - Size for large icon button (default: var(--dds-spacing-800))\n * @cssproperty --dds-icon-button-size-md - Size for medium icon button (default: var(--dds-spacing-600))\n * @cssproperty --dds-icon-button-size-sm - Size for small icon button (default: var(--dds-spacing-400))\n * @cssproperty --dds-icon-button-size-xs - Size for extra small icon button (default: var(--dds-spacing-300))\n * @cssproperty --dds-icon-button-neutral-bg - Background color for neutral variant (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-icon-button-neutral-color - Text color for neutral variant (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-icon-button-neutral-hover-bg - Hover background color for neutral variant (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-icon-button-neutral-active-bg - Active background color for neutral variant (default: var(--dds-transparent-black-medium))\n * @cssproperty --dds-icon-button-brand-bg - Background color for brand variant (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-icon-button-brand-color - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled))\n * @cssproperty --dds-icon-button-brand-hover-bg - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover))\n * @cssproperty --dds-icon-button-brand-active-bg - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed))\n * @cssproperty --dds-icon-button-inverted-bg - Background color for inverted variant (default: var(--dds-transparent-white-subtle))\n * @cssproperty --dds-icon-button-inverted-color - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-hover-bg - Hover background color for inverted variant (default: var(--dds-transparent-white-base))\n * @cssproperty --dds-icon-button-inverted-active-bg - Active background color for inverted variant (default: var(--dds-transparent-white-medium))\n * @cssproperty --dds-icon-button-inverted-brand-bg - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-color - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-hover-bg - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-active-bg - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-disabled-color - Color for disabled state (default: var(--dds-icon-neutral-disabled))\n * @cssproperty --dds-icon-button-disabled-bg - Background color for disabled state (default: transparent)\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSIconButton',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,sBAsDVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-input-group/index.d.ts

@@ -30,6 +30,10 @@ import { default as Component } from '../../components/form/input-group/input-gr
  * @csspart description - The description of the input group.
  * @csspart tooltip - The tooltip of the input group.
  * @csspart container - The container of the input group items.
+ * @csspart feedback - The feedback of the input group.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  */
 declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/dap-ds-input-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-input-group/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/form/input-group/input-group.js'\n\nconst tagName = 'dap-ds-input-group'\n\n/**\n * `dap-ds-input-group`\n * @summary An input group is a container for inputs.\n * @element dap-ds-input-group\n * @title - Input group\n * @group form\n *\n * @property {string} label - The label of the input group.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the input group.\n * @property {string} tooltip - The tooltip of the input group.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input group.\n * @property {string} tooltipAriaLabel - The aria label of the tooltip.\n * @property {string} optionalLabel - The label of the input group when it is optional.\n * @property {string} requiredLabel - The indicator of the input group when it is required. (default: '*')\n * @property {boolean} disabled - Whether the input group is disabled.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the input group. Default is `sm`.\n * @property {boolean} required - Whether the input group is required.\n * @property {boolean} optional - Whether the input group is optional.\n * @property {string} feedback - The feedback of the input.\n * @property {string} feedbackType - The type of the feedback.\n * @property {boolean} subtle - Whether the input group label is subtle.\n *\n * @slot - The content of the input group items.\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main input group container.\n * @csspart label - The label of the input group.\n * @csspart description - The description of the input group.\n * @csspart tooltip - The tooltip of the input group.\n * @csspart container - The container of the input group items.\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSInputGroup',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,sBAkCVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-input-group/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/form/input-group/input-group.js'\n\nconst tagName = 'dap-ds-input-group'\n\n/**\n * `dap-ds-input-group`\n * @summary An input group is a container for inputs.\n * @element dap-ds-input-group\n * @title - Input group\n * @group form\n *\n * @property {string} label - The label of the input group.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the input group.\n * @property {string} tooltip - The tooltip of the input group.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input group.\n * @property {string} tooltipAriaLabel - The aria label of the tooltip.\n * @property {string} optionalLabel - The label of the input group when it is optional.\n * @property {string} requiredLabel - The indicator of the input group when it is required. (default: '*')\n * @property {boolean} disabled - Whether the input group is disabled.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the input group. Default is `sm`.\n * @property {boolean} required - Whether the input group is required.\n * @property {boolean} optional - Whether the input group is optional.\n * @property {string} feedback - The feedback of the input.\n * @property {string} feedbackType - The type of the feedback.\n * @property {boolean} subtle - Whether the input group label is subtle.\n *\n * @slot - The content of the input group items.\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main input group container.\n * @csspart label - The label of the input group.\n * @csspart description - The description of the input group.\n * @csspart tooltip - The tooltip of the input group.\n * @csspart container - The container of the input group items.\n * @csspart feedback - The feedback of the input group.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSInputGroup',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,sBAsCVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-list-item/index.d.ts

@@ -21,6 +21,8 @@ import { default as Component } from '../../components/list-item/list-item.js';
  * @csspart description-container - The container of the description.
  * @csspart actions-container - The container of the actions.
  * @csspart iteractive-indicator-container - The container of the interactive indicator.
+ * @csspart card-base - The base of the inner card content.
+ * @csspart actions - The actions slot of the list item.
  *
  * @cssproperty --dds-list-item-gap - Gap between list item elements (default: var(--dds-spacing-200))
  * @cssproperty --dds-list-item-content-gap - Gap between content elements (default: var(--dds-spacing-200))

package/dist/react/dap-ds-list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-list-item/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/list-item/list-item.js'\n\nconst tagName = 'dap-ds-list-item'\n\n/**\n * `dap-ds-list-item` is a custom banner component.\n * @element dap-ds-list-item\n * @summary A list\n * @title - List item\n *\n * @slot - The content of the list item.\n * @slot icon - The icon of the list item.\n * @slot title - The title of the list item.\n * @slot actions - The actions of the list item.\n *\n * @csspart base - The main list item container.\n * @csspart icon - The icon of the list item.\n * @csspart title - The title of the list item.\n * @csspart description - The description of the list item.\n * @csspart container - The container of the list item.\n * @csspart list-item-base - The base list item container.\n * @csspart icon-container - The container of the icon.\n * @csspart title-container - The container of the title.\n * @csspart description-container - The container of the description.\n * @csspart actions-container - The container of the actions.\n * @csspart iteractive-indicator-container - The container of the interactive indicator.\n *\n * @cssproperty --dds-list-item-gap - Gap between list item elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-content-gap - Gap between content elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-horizontal-gap - Gap for horizontal alignment (default: var(--dds-spacing-300))\n * @cssproperty --dds-list-item-vertical-gap - Gap for vertical alignment (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-icon-size - Size of the icon (default: var(--dds-spacing-600))\n * @cssproperty --dds-list-item-number-size - Size of the number icon (default: 20px)\n * @cssproperty --dds-list-item-actions-gap - Gap between action elements (default: var(--dds-spacing-400))\n * @cssproperty --dds-list-item-actions-padding - Padding for the actions container (default: var(--dds-spacing-100))\n *\n * @cssproperty --dds-list-item-background-base - Background color for base shade (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-list-item-background-subtle - Background color for subtle shade (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-list-item-background-medium - Background color for medium shade (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-list-item-background-strong - Background color for strong shade (default: var(--dds-background-neutral-strong))\n *\n * @cssproperty --dds-list-item-icon-brand - Color for brand icon (default: var(--dds-icon-brand-subtle))\n * @cssproperty --dds-list-item-icon-neutral - Color for neutral icon (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-list-item-icon-positive - Color for positive icon (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-list-item-icon-negative - Color for negative icon (default: var(--dds-icon-negative-subtle))\n *\n * @cssproperty --dds-list-item-title-color - Title text color (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-list-item-description-color - Description text color (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-list-item-number-text-color - Number text color (default: var(--dds-text-neutral-inverted))\n *\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSListItem',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,oBAiDVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-list-item/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/list-item/list-item.js'\n\nconst tagName = 'dap-ds-list-item'\n\n/**\n * `dap-ds-list-item` is a custom banner component.\n * @element dap-ds-list-item\n * @summary A list\n * @title - List item\n *\n * @slot - The content of the list item.\n * @slot icon - The icon of the list item.\n * @slot title - The title of the list item.\n * @slot actions - The actions of the list item.\n *\n * @csspart base - The main list item container.\n * @csspart icon - The icon of the list item.\n * @csspart title - The title of the list item.\n * @csspart description - The description of the list item.\n * @csspart container - The container of the list item.\n * @csspart list-item-base - The base list item container.\n * @csspart icon-container - The container of the icon.\n * @csspart title-container - The container of the title.\n * @csspart description-container - The container of the description.\n * @csspart actions-container - The container of the actions.\n * @csspart iteractive-indicator-container - The container of the interactive indicator.\n * @csspart card-base - The base of the inner card content.\n * @csspart actions - The actions slot of the list item.\n *\n * @cssproperty --dds-list-item-gap - Gap between list item elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-content-gap - Gap between content elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-horizontal-gap - Gap for horizontal alignment (default: var(--dds-spacing-300))\n * @cssproperty --dds-list-item-vertical-gap - Gap for vertical alignment (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-icon-size - Size of the icon (default: var(--dds-spacing-600))\n * @cssproperty --dds-list-item-number-size - Size of the number icon (default: 20px)\n * @cssproperty --dds-list-item-actions-gap - Gap between action elements (default: var(--dds-spacing-400))\n * @cssproperty --dds-list-item-actions-padding - Padding for the actions container (default: var(--dds-spacing-100))\n *\n * @cssproperty --dds-list-item-background-base - Background color for base shade (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-list-item-background-subtle - Background color for subtle shade (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-list-item-background-medium - Background color for medium shade (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-list-item-background-strong - Background color for strong shade (default: var(--dds-background-neutral-strong))\n *\n * @cssproperty --dds-list-item-icon-brand - Color for brand icon (default: var(--dds-icon-brand-subtle))\n * @cssproperty --dds-list-item-icon-neutral - Color for neutral icon (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-list-item-icon-positive - Color for positive icon (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-list-item-icon-negative - Color for negative icon (default: var(--dds-icon-negative-subtle))\n *\n * @cssproperty --dds-list-item-title-color - Title text color (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-list-item-description-color - Description text color (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-list-item-number-text-color - Number text color (default: var(--dds-text-neutral-inverted))\n *\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSListItem',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,oBAmDVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-number-input/index.d.ts

@@ -107,6 +107,13 @@ export type { DdsFocusEvent } from '../../events/events';
 * @csspart increment-button-base - The base of the increment button.
 * @csspart decrement-button-content - The content of the decrement button.
 * @csspart increment-button-content - The content of the increment button.
+* @csspart decrement-icon - The icon of the decrement button.
+* @csspart decrement-icon-base - The base of the decrement icon.
+* @csspart increment-icon - The icon of the increment button.
+* @csspart increment-icon-base - The base of the increment icon.
+* @csspart label-base - The base of the label.
+* @csspart label-required - The required indicator of the label.
+* @csspart label-optional - The optional indicator of the label.
 */
 declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
     onDdsChange: EventName<DdsChangeEvent>;