dap-design-system 0.62.4 → 0.63.0

package/dist/react/dap-ds-snackbar-message/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-snackbar-message/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/snackbar/snackbar-message.js'\n      import type { DdsCloseEvent } from '../../events/events'\n      export type { DdsCloseEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-snackbar-message'\n\n      /**\n * `dap-ds-snackbar-message`\n * @summary The Snackbar component shows a sliding message to the user.\n * @element dap-ds-snackbar-message\n * @title - Snackbar message\n * @group snackbar\n *\n * @event {{ id: string }} dds-close - Fires when the snackbar closes.\n *\n * @slot default - The content of the snackbar.\n *\n * @csspart base - Main snackbar container.\n * @csspart text - The text part of the snackbar.\n * @csspart closebutton - The close button part of the component.\n * @csspart icon - The icon part of the close button.\n *\n * @cssproperty --dds-snackbar-width - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall)))\n * @cssproperty --dds-snackbar-gap - Gap between snackbar elements (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-padding - Padding inside the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-margin-bottom - Bottom margin of the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-transition - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete)\n * @cssproperty --dds-snackbar-border-radius - Border radius of the snackbar (default: var(--dds-radius-base))\n * @cssproperty --dds-snackbar-font-size - Font size used in the snackbar (default: var(--dds-font-sm))\n * @cssproperty --dds-snackbar-background - Background color of the snackbar (default: var(--dds-snackbar-error-background))\n * @cssproperty --dds-snackbar-border - Border color of the snackbar (default: var(--dds-snackbar-error-border))\n * @cssproperty --dds-snackbar-text - Text color of the snackbar (default: var(--dds-snackbar-variant-text))\n * @cssproperty --dds-snackbar-icon - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon))\n * @cssproperty --dds-snackbar-link - Link color of the snackbar (default: var(--dds-snackbar-variant-link))\n * @cssproperty --dds-snackbar-information-background - Background color for information variant (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-snackbar-information-border - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle))\n * @cssproperty --dds-snackbar-information-icon - Icon color for information variant (default: var(--dds-icon-informative-subtle))\n * @cssproperty --dds-snackbar-success-background - Background color for success variant (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-snackbar-success-border - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle))\n * @cssproperty --dds-snackbar-success-icon - Icon color for success variant (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-snackbar-error-background - Background color for error variant (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-snackbar-error-border - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle))\n * @cssproperty --dds-snackbar-error-icon - Icon color for error variant (default: var(--dds-icon-negative-subtle))\n * @cssproperty --dds-snackbar-variant-text - Text color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-icon - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-link - Link color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-animation-duration - Duration of entrance animations (default: 0.3s)\n * @cssproperty --dds-snackbar-animation-timing - Timing function for animations (default: ease-out)\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsClose: 'dds-close' as EventName<DdsCloseEvent>\n        },\n        displayName: \"DapDSSnackbarMessage\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AASM,MAAMA,IAAU,2BA6CVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,YAAY;AAAA,EACd;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-snackbar-message/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/snackbar/snackbar-message.js'\n      import type { DdsCloseEvent } from '../../events/events'\n      export type { DdsCloseEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-snackbar-message'\n\n      /**\n * `dap-ds-snackbar-message`\n * @summary The Snackbar component shows a sliding message to the user.\n * @element dap-ds-snackbar-message\n * @title - Snackbar message\n * @group snackbar\n *\n * @event {{ id: string }} dds-close - Fires when the snackbar closes.\n *\n * @slot default - The content of the snackbar.\n *\n * @csspart base - Main snackbar container.\n * @csspart text - The text part of the snackbar.\n * @csspart closebutton - The close button part of the component.\n * @csspart close-icon - The icon of the close button.\n * @csspart actions - The actions container of the snackbar.\n * @csspart actions-base - The base of the actions container.\n *\n * @cssproperty --dds-snackbar-width - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall)))\n * @cssproperty --dds-snackbar-gap - Gap between snackbar elements (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-padding - Padding inside the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-margin-bottom - Bottom margin of the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-transition - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete)\n * @cssproperty --dds-snackbar-border-radius - Border radius of the snackbar (default: var(--dds-radius-base))\n * @cssproperty --dds-snackbar-font-size - Font size used in the snackbar (default: var(--dds-font-sm))\n * @cssproperty --dds-snackbar-background - Background color of the snackbar (default: var(--dds-snackbar-error-background))\n * @cssproperty --dds-snackbar-border - Border color of the snackbar (default: var(--dds-snackbar-error-border))\n * @cssproperty --dds-snackbar-text - Text color of the snackbar (default: var(--dds-snackbar-variant-text))\n * @cssproperty --dds-snackbar-icon - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon))\n * @cssproperty --dds-snackbar-link - Link color of the snackbar (default: var(--dds-snackbar-variant-link))\n * @cssproperty --dds-snackbar-information-background - Background color for information variant (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-snackbar-information-border - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle))\n * @cssproperty --dds-snackbar-information-icon - Icon color for information variant (default: var(--dds-icon-informative-subtle))\n * @cssproperty --dds-snackbar-success-background - Background color for success variant (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-snackbar-success-border - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle))\n * @cssproperty --dds-snackbar-success-icon - Icon color for success variant (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-snackbar-error-background - Background color for error variant (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-snackbar-error-border - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle))\n * @cssproperty --dds-snackbar-error-icon - Icon color for error variant (default: var(--dds-icon-negative-subtle))\n * @cssproperty --dds-snackbar-variant-text - Text color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-icon - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-link - Link color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-animation-duration - Duration of entrance animations (default: 0.3s)\n * @cssproperty --dds-snackbar-animation-timing - Timing function for animations (default: ease-out)\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsClose: 'dds-close' as EventName<DdsCloseEvent>\n        },\n        displayName: \"DapDSSnackbarMessage\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AASM,MAAMA,IAAU,2BA+CVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,YAAY;AAAA,EACd;AAAA,EACA,aAAa;AACf,CAAC;"}

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

@@ -7,7 +7,8 @@ import { default as Component } from '../../components/stack/stack.js';
  *
  * @slot - The content of the stack.
  *
- * @csspart stack - The main stack container.
+ * @csspart stack - Alias of the base part.
+ * @csspart base - The main stack container.
  */
 declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {}>;
 export default reactWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-stack/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/stack/stack.js'\n\nconst tagName = 'dap-ds-stack'\n\n/**\n * `dap-ds-stack`\n * @summary A stack is a container for stacked content.\n * @element dap-ds-stack\n * @title - Stack\n *\n * @slot - The content of the stack.\n *\n * @csspart stack - The main stack container.\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSStack',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,gBAYVC,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-stack/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/stack/stack.js'\n\nconst tagName = 'dap-ds-stack'\n\n/**\n * `dap-ds-stack`\n * @summary A stack is a container for stacked content.\n * @element dap-ds-stack\n * @title - Stack\n *\n * @slot - The content of the stack.\n *\n * @csspart stack - Alias of the base part.\n * @csspart base - The main stack container.\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSStack',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,gBAaVC,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-switch/index.d.ts

@@ -57,6 +57,12 @@ export type { DdsInputEvent } from '../../events/events';
 * @csspart input - The native input of the switch.
 * @csspart control - The control of the switch.
 * @csspart description - The description of the switch.
+* @csspart label-container - The label container of the switch.
+* @csspart feedback - The feedback of the switch.
+* @csspart high-contrast - The high contrast indicator of the switch.
+* @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>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-switch/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/switch/switch.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsBlurEvent } from '../../events/events'\nimport type { DdsFocusEvent } 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 { DdsInputEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-switch'\n\n      /**\n * `dap-ds-switch`\n * @summary A switch is a graphical control element that allows the user to toggle between two states.\n * @element dap-ds-switch\n * @title - Switch\n *\n * @property {string} name - The name of the switch.\n * @property {string} value - The value of the switch.\n * @property {string} label - The label of the switch.\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 switch.\n * @property {boolean} checked - The checked state of the switch.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the switch.\n * @property {boolean} disabled - The disabled state of the switch.\n * @property {boolean} readonly - Whether the switch is readonly (cannot be changed but value is submitted with form).\n * @property {boolean} required - The required state of the switch.\n * @property {'left' | 'right'} labelPlacement - The placement of the label.\n * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.\n * @property {boolean} subtle - The weight of the label.\n * @property {string} feedback - The feedback of the switch.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the switch.\n * @property {boolean} optional - The optional state of the switch.\n * @property {string} optionalLabel - The optional label of the switch.\n * @property {string} requiredLabel - The required indicator of the switch. (default: '*')\n *\n * @cssProperty --dds-switch-width - Width of the switch control (default: var(--dds-spacing-1000)\n * @cssProperty --dds-switch-height - Height of the switch control (default: var(--dds-spacing-600))\n * @cssProperty --dds-switch-thumb-width - Width of the switch thumb (default: var(--dds-spacing-500))\n * @cssProperty --dds-switch-thumb-height - Height of the switch thumb (default: var(--dds-spacing-500))\n * @cssProperty --dds-switch-thumb-margin - Margin around the switch thumb (default: 0.125rem)\n * @cssProperty --dds-switch-thumb-color - Color of the switch thumb (default: var(--dds-button-primary-icon-enabled))\n * @cssProperty --dds-switch-unchecked-bg - Background color of the switch when unchecked (default: var(--dds-background-neutral-base-inverted))\n * @cssProperty --dds-switch-checked-bg - Background color of the switch when checked (default: var(--dds-background-brand-base-inverted))\n * @cssProperty --dds-switch-invalid-bg - Background color of the switch when invalid (default: var(--dds-background-negative-base-inverted))\n * @cssProperty --dds-switch-disabled-bg - Background color of the switch when disabled (default: var(--dds-background-neutral-disabled))\n * @cssProperty --dds-switch-readonly-bg - Background color of the switch when readonly (default: var(--dds-background-neutral-disabled))\n * @cssProperty --dds-switch-wrapper-padding - Padding of the switch wrapper (default: var(--dds-spacing-400))\n * @cssProperty --dds-switch-wrapper-bg - Background color of the switch wrapper (default: var(--dds-background-neutral-subtle))\n * @cssProperty --dds-switch-border-color - Border color of the switch (default: var(--dds-border-neutral-subtle))\n * @cssProperty --dds-switch-high-contrast-border-color - Border color of the switch in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n *\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ void }} dds-blur - Emitted when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n * @event {{ value: string }} dds-input - Emitted when the input receives input.\n *\n * @csspart base - The main switch container.\n * @csspart baselabel - The main label container\n * @csspart label - The label of the switch.\n * @csspart input - The native input of the switch.\n * @csspart control - The control of the switch.\n * @csspart description - The description of the switch.\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>,\nonDdsInput: 'dds-input' as EventName<DdsInputEvent>\n        },\n        displayName: \"DapDSSwitch\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAeM,MAAMA,IAAU,iBAuDVC,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,EACJ;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-switch/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/switch/switch.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsBlurEvent } from '../../events/events'\nimport type { DdsFocusEvent } 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 { DdsInputEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-switch'\n\n      /**\n * `dap-ds-switch`\n * @summary A switch is a graphical control element that allows the user to toggle between two states.\n * @element dap-ds-switch\n * @title - Switch\n *\n * @property {string} name - The name of the switch.\n * @property {string} value - The value of the switch.\n * @property {string} label - The label of the switch.\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 switch.\n * @property {boolean} checked - The checked state of the switch.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the switch.\n * @property {boolean} disabled - The disabled state of the switch.\n * @property {boolean} readonly - Whether the switch is readonly (cannot be changed but value is submitted with form).\n * @property {boolean} required - The required state of the switch.\n * @property {'left' | 'right'} labelPlacement - The placement of the label.\n * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.\n * @property {boolean} subtle - The weight of the label.\n * @property {string} feedback - The feedback of the switch.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the switch.\n * @property {boolean} optional - The optional state of the switch.\n * @property {string} optionalLabel - The optional label of the switch.\n * @property {string} requiredLabel - The required indicator of the switch. (default: '*')\n *\n * @cssProperty --dds-switch-width - Width of the switch control (default: var(--dds-spacing-1000)\n * @cssProperty --dds-switch-height - Height of the switch control (default: var(--dds-spacing-600))\n * @cssProperty --dds-switch-thumb-width - Width of the switch thumb (default: var(--dds-spacing-500))\n * @cssProperty --dds-switch-thumb-height - Height of the switch thumb (default: var(--dds-spacing-500))\n * @cssProperty --dds-switch-thumb-margin - Margin around the switch thumb (default: 0.125rem)\n * @cssProperty --dds-switch-thumb-color - Color of the switch thumb (default: var(--dds-button-primary-icon-enabled))\n * @cssProperty --dds-switch-unchecked-bg - Background color of the switch when unchecked (default: var(--dds-background-neutral-base-inverted))\n * @cssProperty --dds-switch-checked-bg - Background color of the switch when checked (default: var(--dds-background-brand-base-inverted))\n * @cssProperty --dds-switch-invalid-bg - Background color of the switch when invalid (default: var(--dds-background-negative-base-inverted))\n * @cssProperty --dds-switch-disabled-bg - Background color of the switch when disabled (default: var(--dds-background-neutral-disabled))\n * @cssProperty --dds-switch-readonly-bg - Background color of the switch when readonly (default: var(--dds-background-neutral-disabled))\n * @cssProperty --dds-switch-wrapper-padding - Padding of the switch wrapper (default: var(--dds-spacing-400))\n * @cssProperty --dds-switch-wrapper-bg - Background color of the switch wrapper (default: var(--dds-background-neutral-subtle))\n * @cssProperty --dds-switch-border-color - Border color of the switch (default: var(--dds-border-neutral-subtle))\n * @cssProperty --dds-switch-high-contrast-border-color - Border color of the switch in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n *\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ void }} dds-blur - Emitted when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n * @event {{ value: string }} dds-input - Emitted when the input receives input.\n *\n * @csspart base - The main switch container.\n * @csspart baselabel - The main label container\n * @csspart label - The label of the switch.\n * @csspart input - The native input of the switch.\n * @csspart control - The control of the switch.\n * @csspart description - The description of the switch.\n * @csspart label-container - The label container of the switch.\n * @csspart feedback - The feedback of the switch.\n * @csspart high-contrast - The high contrast indicator of the switch.\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          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsInput: 'dds-input' as EventName<DdsInputEvent>\n        },\n        displayName: \"DapDSSwitch\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAeM,MAAMA,IAAU,iBA6DVC,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,EACJ;AAAA,EACA,aAAa;AACf,CAAC;"}

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

@@ -14,8 +14,10 @@ export type { DdsTabSelectEvent } from '../../events/events';
 * @slot - The tab items.
 *
 * @csspart base - The main container.
-* @csspart tab-nav - The tab navigation container.
-* @csspart tab-content - The tab content container.
+* @csspart tab-list - The tab list container (role="tablist") holding the tab buttons.
+* @csspart tab-nav - The individual tab buttons.
+* @csspart high-contrast - The high contrast indicator inside the tab buttons.
+* @csspart tab-group-content - The tab content container.
 *
 * @cssproperty --dds-tab-group-border-radius - Border radius of the tab group container (default: var(--dds-radius-base))
 * @cssproperty --dds-tab-border-radius - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0)

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-tab-group/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/tab/tab-group.js'\n      import type { DdsTabSelectEvent } from '../../events/events'\n      export type { DdsTabSelectEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-tab-group'\n\n      /**\n * `dap-ds-tab-group`\n * @summary A tab group component. It is used with dap-ds-tab component to create a tab group.\n * @element dap-ds-tab-group\n * @title - Tab group\n * @group tab\n *\n * @event dds-tab-select - Fired when select a new tab.\n *\n * @slot - The tab items.\n *\n * @csspart base - The main container.\n * @csspart tab-nav - The tab navigation container.\n * @csspart tab-content - The tab content container.\n *\n * @cssproperty --dds-tab-group-border-radius - Border radius of the tab group container (default: var(--dds-radius-base))\n * @cssproperty --dds-tab-border-radius - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0)\n * @cssproperty --dds-tab-group-border-width - Border width of the tab navigation (default: var(--dds-border-width-base))\n * @cssproperty --dds-tab-group-border-color - Border color of the tab navigation (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-tab-height-sm - Height of small tabs (default: 40px)\n * @cssproperty --dds-tab-height-lg - Height of large tabs (default: 50px)\n * @cssproperty --dds-tab-font-size-sm - Font size of small tabs (default: var(--dds-font-base))\n * @cssproperty --dds-tab-font-size-lg - Font size of large tabs (default: var(--dds-font-lg))\n * @cssproperty --dds-tab-padding - Padding of the tab buttons (default: 0 var(--dds-spacing-400))\n * @cssproperty --dds-tab-border-width - Border width for tabs (default: var(--dds-border-width-large))\n * @cssproperty --dds-tab-selected-border-color - Border color for selected tabs (default: var(--dds-border-brand-base))\n * @cssproperty --dds-tab-text-color - Text color for tabs (default: var(--dds-button-subtle-text-neutral-enabled))\n * @cssproperty --dds-tab-hover-text-color - Text color for tabs on hover (default: var(--dds-text-brand-subtle))\n * @cssproperty --dds-tab-disabled-text-color - Text color for disabled tabs (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-tab-hover-background - Background color for tabs on hover (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-tab-active-background - Background color for active tabs (default: var(--dds-transparent-black-base))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsTabSelect: 'dds-tab-select' as EventName<DdsTabSelectEvent>\n        },\n        displayName: \"DapDSTabGroup\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AASM,MAAMA,IAAU,oBAkCVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,gBAAgB;AAAA,EAClB;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-tab-group/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/tab/tab-group.js'\n      import type { DdsTabSelectEvent } from '../../events/events'\n      export type { DdsTabSelectEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-tab-group'\n\n      /**\n * `dap-ds-tab-group`\n * @summary A tab group component. It is used with dap-ds-tab component to create a tab group.\n * @element dap-ds-tab-group\n * @title - Tab group\n * @group tab\n *\n * @event dds-tab-select - Fired when select a new tab.\n *\n * @slot - The tab items.\n *\n * @csspart base - The main container.\n * @csspart tab-list - The tab list container (role=\"tablist\") holding the tab buttons.\n * @csspart tab-nav - The individual tab buttons.\n * @csspart high-contrast - The high contrast indicator inside the tab buttons.\n * @csspart tab-group-content - The tab content container.\n *\n * @cssproperty --dds-tab-group-border-radius - Border radius of the tab group container (default: var(--dds-radius-base))\n * @cssproperty --dds-tab-border-radius - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0)\n * @cssproperty --dds-tab-group-border-width - Border width of the tab navigation (default: var(--dds-border-width-base))\n * @cssproperty --dds-tab-group-border-color - Border color of the tab navigation (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-tab-height-sm - Height of small tabs (default: 40px)\n * @cssproperty --dds-tab-height-lg - Height of large tabs (default: 50px)\n * @cssproperty --dds-tab-font-size-sm - Font size of small tabs (default: var(--dds-font-base))\n * @cssproperty --dds-tab-font-size-lg - Font size of large tabs (default: var(--dds-font-lg))\n * @cssproperty --dds-tab-padding - Padding of the tab buttons (default: 0 var(--dds-spacing-400))\n * @cssproperty --dds-tab-border-width - Border width for tabs (default: var(--dds-border-width-large))\n * @cssproperty --dds-tab-selected-border-color - Border color for selected tabs (default: var(--dds-border-brand-base))\n * @cssproperty --dds-tab-text-color - Text color for tabs (default: var(--dds-button-subtle-text-neutral-enabled))\n * @cssproperty --dds-tab-hover-text-color - Text color for tabs on hover (default: var(--dds-text-brand-subtle))\n * @cssproperty --dds-tab-disabled-text-color - Text color for disabled tabs (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-tab-hover-background - Background color for tabs on hover (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-tab-active-background - Background color for active tabs (default: var(--dds-transparent-black-base))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsTabSelect: 'dds-tab-select' as EventName<DdsTabSelectEvent>\n        },\n        displayName: \"DapDSTabGroup\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AASM,MAAMA,IAAU,oBAoCVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,gBAAgB;AAAA,EAClB;AAAA,EACA,aAAa;AACf,CAAC;"}

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

@@ -10,6 +10,8 @@ import { default as Component } from '../../components/table/table.js';
  * @cssprop --dds-table-border-color - Color of the table border. (default: var(--dds-border-neutral-subtle))
  * @cssprop --dds-table-border-radius - Border radius of the table. (default: var(--dds-radius-small, 4px))
  * @cssprop --dds-table-row-divider-color - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle))
+ *
+ * @csspart caption - The caption of the table.
  */
 declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {}>;
 export default reactWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-table/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/table/table.js'\n\nconst tagName = 'dap-ds-table'\n\n/**\n * Data table component.\n * @element dap-ds-table\n * @title - Table\n *\n * @slot - The default slot. Accepts `dap-ds-table-row` elements.\n *\n * @cssprop --dds-table-border-width - Width of the table border. (default: var(--dds-border-width-base, 1px))\n * @cssprop --dds-table-border-color - Color of the table border. (default: var(--dds-border-neutral-subtle))\n * @cssprop --dds-table-border-radius - Border radius of the table. (default: var(--dds-radius-small, 4px))\n * @cssprop --dds-table-row-divider-color - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle))\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSTable',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,gBAcVC,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-table/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/table/table.js'\n\nconst tagName = 'dap-ds-table'\n\n/**\n * Data table component.\n * @element dap-ds-table\n * @title - Table\n *\n * @slot - The default slot. Accepts `dap-ds-table-row` elements.\n *\n * @cssprop --dds-table-border-width - Width of the table border. (default: var(--dds-border-width-base, 1px))\n * @cssprop --dds-table-border-color - Color of the table border. (default: var(--dds-border-neutral-subtle))\n * @cssprop --dds-table-border-radius - Border radius of the table. (default: var(--dds-radius-small, 4px))\n * @cssprop --dds-table-row-divider-color - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle))\n *\n * @csspart caption - The caption of the table.\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSTable',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,gBAgBVC,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-table-cell/index.d.ts

@@ -7,7 +7,6 @@ import { default as Component } from '../../components/table/table-cell.js';
  *
  * @slot - The default slot.
  *
- * @csspart base - The main cell container.
  *
  * @cssproperty --dds-table-cell-padding-block - Padding for the top and bottom of the cell. (default: var(--dds-spacing-200))
  * @cssproperty --dds-table-cell-padding-inline-start - Padding for the start (left in LTR) of the cell. (default: var(--dds-spacing-500))
@@ -17,6 +16,7 @@ import { default as Component } from '../../components/table/table-cell.js';
  * @cssproperty --dds-table-cell-text-color - Text color of the cell. (default: var(--dds-text-neutral-base))
  * @cssproperty --dds-table-cell-line-height - Line height of the cell text. (default: 1.5)
  * @cssproperty --dds-table-cell-text-align - Text alignment in the cell. (default: left)
+ *
  */
 declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/dap-ds-table-cell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-table-cell/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/table/table-cell.js'\n\nconst tagName = 'dap-ds-table-cell'\n\n/**\n * Table cell component.\n * @element dap-ds-table-cell\n * @title - Table cell\n * @group table\n *\n * @slot - The default slot.\n *\n * @csspart base - The main cell container.\n *\n * @cssproperty --dds-table-cell-padding-block - Padding for the top and bottom of the cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-cell-padding-inline-start - Padding for the start (left in LTR) of the cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-cell-padding-inline-end - Padding for the end (right in LTR) of the cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-cell-border-width - Width of the cell's bottom border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-table-cell-border-color - Color of the cell's bottom border. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-table-cell-text-color - Text color of the cell. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-table-cell-line-height - Line height of the cell text. (default: 1.5)\n * @cssproperty --dds-table-cell-text-align - Text alignment in the cell. (default: left)\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSTableCell',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,qBAqBVC,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-table-cell/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/table/table-cell.js'\n\nconst tagName = 'dap-ds-table-cell'\n\n/**\n * Table cell component.\n * @element dap-ds-table-cell\n * @title - Table cell\n * @group table\n *\n * @slot - The default slot.\n *\n *\n * @cssproperty --dds-table-cell-padding-block - Padding for the top and bottom of the cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-cell-padding-inline-start - Padding for the start (left in LTR) of the cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-cell-padding-inline-end - Padding for the end (right in LTR) of the cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-cell-border-width - Width of the cell's bottom border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-table-cell-border-color - Color of the cell's bottom border. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-table-cell-text-color - Text color of the cell. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-table-cell-line-height - Line height of the cell text. (default: 1.5)\n * @cssproperty --dds-table-cell-text-align - Text alignment in the cell. (default: left)\n *\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSTableCell',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,qBAqBVC,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-textarea/index.d.ts

@@ -52,6 +52,8 @@ export type { DdsSelectEvent } from '../../events/events';
 * @csspart feedback-base - The base of the feedback.
 * @csspart feedback-text - The text of the feedback.
 * @csspart feedback-icon - The icon of the feedback.
+* @csspart footer - The footer of the textarea holding the feedback and counter.
+* @csspart counter-container - The container of the counter.
 *
 * @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)
 * @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-textarea/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/textarea/textarea.js'\n      import type { DdsCountChangeEvent } 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 { DdsSelectEvent } from '../../events/events'\n      export type { DdsCountChangeEvent } 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 { DdsSelectEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-textarea'\n\n      /**\n * `dap-ds-textarea`\n * @summary A textarea is a multi-line text input field.\n * @element dap-ds-textarea\n * @title - Textarea\n *\n * @property {'xs' | 'sm' | 'lg'} size - The size of the textarea. Default is `md`.\n * @property {boolean} disabled - The disabled state of the textarea.\n * @property {number} minlength - The minimum length of the textarea.\n * @property {string} value - The value of the textarea.\n * @property {string} tooltip - The tooltip of the textarea.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the textarea.\n * @property {InputStatus} status - The status of the textarea. Can be `success` or `error`.\n * @property {boolean} readonly - The readonly state of the textarea.\n * @property {boolean} required - The required state of the textarea.\n * @property {string} label - The label of the textarea.\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 textarea.\n * @property {string} feedback - The feedback of the textarea.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} optional - The optional state of the textarea.\n * @property {string} optionalLabel - The optional label of the textarea.\n * @property {string} requiredLabel - The required indicator of the textarea. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} autofocus - The autofocus state of the textarea.\n *\n * @event {{ value: number }} dds-count-change - Fires when the count of the textarea changes.\n * @event {{ value: string }} dds-change - Fired when the textarea value changes.\n * @event {{ value: string }} dds-input - Fired when the textarea 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 textarea loses focus.\n * @event {{ void }} dds-focus - Emitted when the textarea gains focus.\n * @event {{ value: string }} dds-select - Emitted when select text in textarea.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main textarea container.\n * @csspart input - The native input of the textarea.\n * @csspart counter - The counter of the textarea.\n * @csspart counter-base - The base of the counter.\n * @csspart feedback - The feedback of the textarea.\n * @csspart feedback-base - The base of the feedback.\n * @csspart feedback-text - The text of the feedback.\n * @csspart feedback-icon - The icon of the feedback.\n *\n * @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)\n * @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-gap - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-margin-top - Top margin of the textarea. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-padding - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-textarea-border-width - Border width of the textarea. (default: var(--dds-border-width-base))\n * @cssproperty --dds-textarea-border-color - Border color of the textarea. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-textarea-background - Background color of the textarea. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-textarea-color - Text color of the textarea. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-textarea-border-radius - Border radius of the textarea. (default: var(--dds-radius-base))\n * @cssproperty --dds-textarea-disabled-bg - Background color when disabled. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-textarea-disabled-color - Text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-textarea-readonly-bg - Background color when readonly. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-textarea-readonly-color - Text color when readonly. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-textarea-error-border - Border color when in error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-textarea-success-border - Border color when in success state. (default: var(--dds-border-positive-base))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsCountChange: 'dds-count-change' as EventName<DdsCountChangeEvent>,\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>,\nonDdsSelect: 'dds-select' as EventName<DdsSelectEvent>\n        },\n        displayName: \"DapDSTextarea\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAqBM,MAAMA,IAAU,mBAgEVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,kBAAkB;AAAA,IAC5B,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,aAAa;AAAA,EACL;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-textarea/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/textarea/textarea.js'\n      import type { DdsCountChangeEvent } 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 { DdsSelectEvent } from '../../events/events'\n      export type { DdsCountChangeEvent } 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 { DdsSelectEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-textarea'\n\n      /**\n * `dap-ds-textarea`\n * @summary A textarea is a multi-line text input field.\n * @element dap-ds-textarea\n * @title - Textarea\n *\n * @property {'xs' | 'sm' | 'lg'} size - The size of the textarea. Default is `md`.\n * @property {boolean} disabled - The disabled state of the textarea.\n * @property {number} minlength - The minimum length of the textarea.\n * @property {string} value - The value of the textarea.\n * @property {string} tooltip - The tooltip of the textarea.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the textarea.\n * @property {InputStatus} status - The status of the textarea. Can be `success` or `error`.\n * @property {boolean} readonly - The readonly state of the textarea.\n * @property {boolean} required - The required state of the textarea.\n * @property {string} label - The label of the textarea.\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 textarea.\n * @property {string} feedback - The feedback of the textarea.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} optional - The optional state of the textarea.\n * @property {string} optionalLabel - The optional label of the textarea.\n * @property {string} requiredLabel - The required indicator of the textarea. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} autofocus - The autofocus state of the textarea.\n *\n * @event {{ value: number }} dds-count-change - Fires when the count of the textarea changes.\n * @event {{ value: string }} dds-change - Fired when the textarea value changes.\n * @event {{ value: string }} dds-input - Fired when the textarea 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 textarea loses focus.\n * @event {{ void }} dds-focus - Emitted when the textarea gains focus.\n * @event {{ value: string }} dds-select - Emitted when select text in textarea.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main textarea container.\n * @csspart input - The native input of the textarea.\n * @csspart counter - The counter of the textarea.\n * @csspart counter-base - The base of the counter.\n * @csspart feedback - The feedback of the textarea.\n * @csspart feedback-base - The base of the feedback.\n * @csspart feedback-text - The text of the feedback.\n * @csspart feedback-icon - The icon of the feedback.\n * @csspart footer - The footer of the textarea holding the feedback and counter.\n * @csspart counter-container - The container of the counter.\n *\n * @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)\n * @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-gap - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-margin-top - Top margin of the textarea. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-padding - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-textarea-border-width - Border width of the textarea. (default: var(--dds-border-width-base))\n * @cssproperty --dds-textarea-border-color - Border color of the textarea. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-textarea-background - Background color of the textarea. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-textarea-color - Text color of the textarea. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-textarea-border-radius - Border radius of the textarea. (default: var(--dds-radius-base))\n * @cssproperty --dds-textarea-disabled-bg - Background color when disabled. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-textarea-disabled-color - Text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-textarea-readonly-bg - Background color when readonly. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-textarea-readonly-color - Text color when readonly. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-textarea-error-border - Border color when in error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-textarea-success-border - Border color when in success state. (default: var(--dds-border-positive-base))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsCountChange: 'dds-count-change' as EventName<DdsCountChangeEvent>,\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>,\nonDdsSelect: 'dds-select' as EventName<DdsSelectEvent>\n        },\n        displayName: \"DapDSTextarea\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAqBM,MAAMA,IAAU,mBAkEVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,kBAAkB;AAAA,IAC5B,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,aAAa;AAAA,EACL;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/dap-ds-time-grid/index.d.ts

@@ -30,6 +30,9 @@ export type { DdsCloseEvent } from '../../events/events';
 * @csspart section-header-title - The title of the section header.
 * @csspart section-header-divider - The divider between the section header and the time buttons.
 * @csspart time-column - The time column container.
+* @csspart presets-section - The presets section.
+* @csspart preset-button - Individual preset buttons.
+* @csspart second-section - The second selection section.
 *
 * @cssprop --dds-time-grid-gap - The gap between time sections (default: var(--dds-spacing-400)).
 * @cssprop --dds-time-grid-padding - The padding around the time grid (default: var(--dds-spacing-0)).

package/dist/react/dap-ds-time-grid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-time-grid/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/timepicker/time-grid.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsCloseEvent } from '../../events/events'\n      export type { DdsChangeEvent } from '../../events/events'\nexport type { DdsCloseEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-time-grid'\n\n      /**\n * `dap-ds-time-grid`\n * @summary A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.\n * @element dap-ds-time-grid\n * @title - Time grid\n * @group timepicker\n *\n * @property {number} selectedHour - The currently selected hour (0-23).\n * @property {number} selectedMinute - The currently selected minute (0-59).\n * @property {string} minTime - The minimum selectable time (format: 'HH:mm').\n * @property {string} maxTime - The maximum selectable time (format: 'HH:mm').\n * @property {number} step - The step interval in minutes.\n * @property {string} locale - The locale for time formatting.\n *\n * @event {{ detail: TimeSelection }} dds-change - Fired when time selection changes.\n * @event {{ void }} dds-close - Fired when the time grid should close.\n *\n * @csspart time-grid - The main time grid container.\n * @csspart hour-section - The hour selection section.\n * @csspart minute-section - The minute selection section.\n * @csspart time-button - Individual time selection buttons.\n * @csspart time-button-base - The base part of the time button.\n * @csspart time-button-content - The content part of the time button.\n * @csspart time-button-high-contrast - The high contrast part of the time button.\n * @csspart section-header-title - The title of the section header.\n * @csspart section-header-divider - The divider between the section header and the time buttons.\n * @csspart time-column - The time column container.\n *\n * @cssprop --dds-time-grid-gap - The gap between time sections (default: var(--dds-spacing-400)).\n * @cssprop --dds-time-grid-padding - The padding around the time grid (default: var(--dds-spacing-0)).\n * @cssprop --dds-time-grid-column-gap - The gap between time buttons in columns (default: var(--dds-spacing-200)).\n * @cssprop --dds-time-grid-border-radius - The border radius of the time grid (default: var(--dds-radius-base)).\n * @cssprop --dds-time-grid-background - The background color of the time grid (default: var(--dds-background-neutral-subtle)).\n * @cssprop --dds-time-grid-transition - The transition timing for the time grid (default: all 0.2s ease-in-out).\n * @cssprop --dds-time-grid-max-width - The maximum width of the time grid (default: 400px).\n * @cssprop --dds-time-grid-column-max-height - The maximum height of time columns (default: 240px).\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsClose: 'dds-close' as EventName<DdsCloseEvent>\n        },\n        displayName: \"DapDSTimeGrid\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAWM,MAAMA,IAAU,oBAuCVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,YAAY;AAAA,EACJ;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-time-grid/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/timepicker/time-grid.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsCloseEvent } from '../../events/events'\n      export type { DdsChangeEvent } from '../../events/events'\nexport type { DdsCloseEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-time-grid'\n\n      /**\n * `dap-ds-time-grid`\n * @summary A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.\n * @element dap-ds-time-grid\n * @title - Time grid\n * @group timepicker\n *\n * @property {number} selectedHour - The currently selected hour (0-23).\n * @property {number} selectedMinute - The currently selected minute (0-59).\n * @property {string} minTime - The minimum selectable time (format: 'HH:mm').\n * @property {string} maxTime - The maximum selectable time (format: 'HH:mm').\n * @property {number} step - The step interval in minutes.\n * @property {string} locale - The locale for time formatting.\n *\n * @event {{ detail: TimeSelection }} dds-change - Fired when time selection changes.\n * @event {{ void }} dds-close - Fired when the time grid should close.\n *\n * @csspart time-grid - The main time grid container.\n * @csspart hour-section - The hour selection section.\n * @csspart minute-section - The minute selection section.\n * @csspart time-button - Individual time selection buttons.\n * @csspart time-button-base - The base part of the time button.\n * @csspart time-button-content - The content part of the time button.\n * @csspart time-button-high-contrast - The high contrast part of the time button.\n * @csspart section-header-title - The title of the section header.\n * @csspart section-header-divider - The divider between the section header and the time buttons.\n * @csspart time-column - The time column container.\n * @csspart presets-section - The presets section.\n * @csspart preset-button - Individual preset buttons.\n * @csspart second-section - The second selection section.\n *\n * @cssprop --dds-time-grid-gap - The gap between time sections (default: var(--dds-spacing-400)).\n * @cssprop --dds-time-grid-padding - The padding around the time grid (default: var(--dds-spacing-0)).\n * @cssprop --dds-time-grid-column-gap - The gap between time buttons in columns (default: var(--dds-spacing-200)).\n * @cssprop --dds-time-grid-border-radius - The border radius of the time grid (default: var(--dds-radius-base)).\n * @cssprop --dds-time-grid-background - The background color of the time grid (default: var(--dds-background-neutral-subtle)).\n * @cssprop --dds-time-grid-transition - The transition timing for the time grid (default: all 0.2s ease-in-out).\n * @cssprop --dds-time-grid-max-width - The maximum width of the time grid (default: 400px).\n * @cssprop --dds-time-grid-column-max-height - The maximum height of time columns (default: 240px).\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsChange: 'dds-change' as EventName<DdsChangeEvent>,\nonDdsClose: 'dds-close' as EventName<DdsCloseEvent>\n        },\n        displayName: \"DapDSTimeGrid\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAWM,MAAMA,IAAU,oBA0CVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,aAAa;AAAA,IACvB,YAAY;AAAA,EACJ;AAAA,EACA,aAAa;AACf,CAAC;"}

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

@@ -68,6 +68,11 @@ export type { DdsBlurEvent } from '../../events/events';
 * @csspart tooltip - The tooltip of the timepicker.
 * @csspart input - The input of the timepicker.
 * @csspart clear-button - The clear button of the timepicker.
+* @csspart time-button - The clock icon button of the timepicker.
+* @csspart time-grid - The time grid of the timepicker.
+* @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-timepicker-background - The background color of the timepicker. (default: var(--dds-fields-background-default))
 * @cssproperty --dds-timepicker-border-color - The border color of the timepicker. (default: var(--dds-border-neutral-base))

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-timepicker/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/timepicker/timepicker.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsInputEvent } from '../../events/events'\nimport type { DdsValidTimeEvent } from '../../events/events'\nimport type { DdsInvalidTimeEvent } 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 { DdsValidTimeEvent } from '../../events/events'\nexport type { DdsInvalidTimeEvent } 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-timepicker'\n\n      /**\n * `dap-ds-timepicker`\n * @summary A timepicker is a graphical user interface widget that allows the user to select a time from a time range.\n * @element dap-ds-timepicker\n * @title - Timepicker\n *\n * @property {Dayjs | string} value - The value of the timepicker. Can be a Dayjs object or a string in 'HH:mm' format.\n * @property {string} label - The label of the timepicker.\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 timepicker.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the timepicker.\n * @property {boolean} disabled - The disabled state of the timepicker.\n * @property {boolean} required - The required state of the timepicker.\n * @property {boolean} readonly - The readonly state of the timepicker.\n * @property {boolean} autofocus - The autofocus state of the timepicker.\n * @property {string} tooltip - The tooltip of the timepicker.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the timepicker.\n * @property {string} feedback - The feedback of the timepicker.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the timepicker.\n * @property {boolean} optional - The optional state of the timepicker.\n * @property {string} optionalLabel - The optional label of the timepicker.\n * @property {string} requiredLabel - The required indicator of the timepicker. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {string} autocomplete - The autocomplete of the timepicker.\n * @property {string} placeholder - The placeholder of the timepicker.\n * @property {boolean} loading - The loading state of the timepicker.\n * @property {string} format - The format of the timepicker. Defaults to 'HH:mm'.\n * @property {string} minTime - The minimum time of the timepicker. Format: 'HH:mm'.\n * @property {string} maxTime - The maximum time of the timepicker. Format: 'HH:mm'.\n * @property {number} step - The step interval in minutes. Defaults to 15.\n * @property {boolean} openTimeOnInput - Whether the time picker should open on typing.\n * @property {boolean} sendEmptyEventOnInput - Whether the time picker should send an empty event on typing.\n * @property {string} clearButton - Whether the clear button should be shown. Defaults to 'true'.\n * @property {string} clearButtonAriaLabel - The aria label of the clear button.\n * @property {string} placement - The placement of the dropdown of the timepicker.\n * @property {FloatingStrategy} floatingStrategy - The floating strategy of the timepicker.\n * @property {string} locale - The locale of the timepicker.\n * @property {boolean} closeOnSelection - Whether the dropdown should close when a time is selected.\n * @property {boolean} showSeconds - Whether to show the seconds column in the time picker.\n * @property {number} secondsStep - The step interval in seconds. Defaults to 1.\n * @property {function} disabledTime - Callback to determine if a time should be disabled.\n * @property {boolean} hideDisabledTimes - Whether to hide disabled times or show them as disabled.\n * @property {TimePreset[]} presets - Array of preset time slots for quick selection.\n *\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number }} dds-change - Fired when the timepicker value changes.\n * @event {{ value: string }} dds-input - Fired when the timepicker input value changes.\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number }} dds-valid-time - Fired when the timepicker input value is valid. Happens on manual input typing.\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number, type: 'invalid' | 'out-of-range' }} dds-invalid-time - Fired when the timepicker input value is invalid. Happens on manual input typing.\n * @event {{ void }} dds-clear - Fired when the timepicker is cleared.\n * @event {{ void }} dds-focus - Emitted when the timepicker gains focus.\n * @event {{ void }} dds-blur - Emitted when the timepicker loses focus.\n *\n * @csspart base - The main timepicker container.\n * @csspart trigger - The trigger button of the timepicker.\n * @csspart label - The label of the timepicker.\n * @csspart description - The description of the timepicker.\n * @csspart feedback - The feedback of the timepicker.\n * @csspart tooltip - The tooltip of the timepicker.\n * @csspart input - The input of the timepicker.\n * @csspart clear-button - The clear button of the timepicker.\n *\n * @cssproperty --dds-timepicker-background - The background color of the timepicker. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-timepicker-border-color - The border color of the timepicker. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-timepicker-border-width - The border width of the timepicker. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-timepicker-border-radius - The border radius of the timepicker. (default: var(--dds-radius-base))\n * @cssproperty --dds-timepicker-text-color - The text color of the timepicker. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-timepicker-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-timepicker-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-timepicker-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-timepicker-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-timepicker-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-timepicker-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-timepicker-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-timepicker-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-timepicker-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 *\n * @cssproperty --dds-timepicker-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-timepicker-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-timepicker-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-timepicker-min-width - The minimum width of the timepicker. (default: 7.5rem)\n *\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>,\nonDdsValidTime: 'dds-valid-time' as EventName<DdsValidTimeEvent>,\nonDdsInvalidTime: 'dds-invalid-time' as EventName<DdsInvalidTimeEvent>,\nonDdsClear: 'dds-clear' as EventName<DdsClearEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>\n        },\n        displayName: \"DapDSTimePicker\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAqBM,MAAMA,IAAU,qBA4FVC,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-timepicker/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/timepicker/timepicker.js'\n      import type { DdsChangeEvent } from '../../events/events'\nimport type { DdsInputEvent } from '../../events/events'\nimport type { DdsValidTimeEvent } from '../../events/events'\nimport type { DdsInvalidTimeEvent } 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 { DdsValidTimeEvent } from '../../events/events'\nexport type { DdsInvalidTimeEvent } 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-timepicker'\n\n      /**\n * `dap-ds-timepicker`\n * @summary A timepicker is a graphical user interface widget that allows the user to select a time from a time range.\n * @element dap-ds-timepicker\n * @title - Timepicker\n *\n * @property {Dayjs | string} value - The value of the timepicker. Can be a Dayjs object or a string in 'HH:mm' format.\n * @property {string} label - The label of the timepicker.\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 timepicker.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the timepicker.\n * @property {boolean} disabled - The disabled state of the timepicker.\n * @property {boolean} required - The required state of the timepicker.\n * @property {boolean} readonly - The readonly state of the timepicker.\n * @property {boolean} autofocus - The autofocus state of the timepicker.\n * @property {string} tooltip - The tooltip of the timepicker.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the timepicker.\n * @property {string} feedback - The feedback of the timepicker.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the timepicker.\n * @property {boolean} optional - The optional state of the timepicker.\n * @property {string} optionalLabel - The optional label of the timepicker.\n * @property {string} requiredLabel - The required indicator of the timepicker. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {string} autocomplete - The autocomplete of the timepicker.\n * @property {string} placeholder - The placeholder of the timepicker.\n * @property {boolean} loading - The loading state of the timepicker.\n * @property {string} format - The format of the timepicker. Defaults to 'HH:mm'.\n * @property {string} minTime - The minimum time of the timepicker. Format: 'HH:mm'.\n * @property {string} maxTime - The maximum time of the timepicker. Format: 'HH:mm'.\n * @property {number} step - The step interval in minutes. Defaults to 15.\n * @property {boolean} openTimeOnInput - Whether the time picker should open on typing.\n * @property {boolean} sendEmptyEventOnInput - Whether the time picker should send an empty event on typing.\n * @property {string} clearButton - Whether the clear button should be shown. Defaults to 'true'.\n * @property {string} clearButtonAriaLabel - The aria label of the clear button.\n * @property {string} placement - The placement of the dropdown of the timepicker.\n * @property {FloatingStrategy} floatingStrategy - The floating strategy of the timepicker.\n * @property {string} locale - The locale of the timepicker.\n * @property {boolean} closeOnSelection - Whether the dropdown should close when a time is selected.\n * @property {boolean} showSeconds - Whether to show the seconds column in the time picker.\n * @property {number} secondsStep - The step interval in seconds. Defaults to 1.\n * @property {function} disabledTime - Callback to determine if a time should be disabled.\n * @property {boolean} hideDisabledTimes - Whether to hide disabled times or show them as disabled.\n * @property {TimePreset[]} presets - Array of preset time slots for quick selection.\n *\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number }} dds-change - Fired when the timepicker value changes.\n * @event {{ value: string }} dds-input - Fired when the timepicker input value changes.\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number }} dds-valid-time - Fired when the timepicker input value is valid. Happens on manual input typing.\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number, type: 'invalid' | 'out-of-range' }} dds-invalid-time - Fired when the timepicker input value is invalid. Happens on manual input typing.\n * @event {{ void }} dds-clear - Fired when the timepicker is cleared.\n * @event {{ void }} dds-focus - Emitted when the timepicker gains focus.\n * @event {{ void }} dds-blur - Emitted when the timepicker loses focus.\n *\n * @csspart base - The main timepicker container.\n * @csspart trigger - The trigger button of the timepicker.\n * @csspart label - The label of the timepicker.\n * @csspart description - The description of the timepicker.\n * @csspart feedback - The feedback of the timepicker.\n * @csspart tooltip - The tooltip of the timepicker.\n * @csspart input - The input of the timepicker.\n * @csspart clear-button - The clear button of the timepicker.\n * @csspart time-button - The clock icon button of the timepicker.\n * @csspart time-grid - The time grid of the timepicker.\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-timepicker-background - The background color of the timepicker. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-timepicker-border-color - The border color of the timepicker. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-timepicker-border-width - The border width of the timepicker. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-timepicker-border-radius - The border radius of the timepicker. (default: var(--dds-radius-base))\n * @cssproperty --dds-timepicker-text-color - The text color of the timepicker. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-timepicker-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-timepicker-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-timepicker-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-timepicker-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-timepicker-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-timepicker-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-timepicker-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-timepicker-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-timepicker-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 *\n * @cssproperty --dds-timepicker-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-timepicker-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-timepicker-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-timepicker-min-width - The minimum width of the timepicker. (default: 7.5rem)\n *\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>,\nonDdsValidTime: 'dds-valid-time' as EventName<DdsValidTimeEvent>,\nonDdsInvalidTime: 'dds-invalid-time' as EventName<DdsInvalidTimeEvent>,\nonDdsClear: 'dds-clear' as EventName<DdsClearEvent>,\nonDdsFocus: 'dds-focus' as EventName<DdsFocusEvent>,\nonDdsBlur: 'dds-blur' as EventName<DdsBlurEvent>\n        },\n        displayName: \"DapDSTimePicker\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAqBM,MAAMA,IAAU,qBAiGVC,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-toc/index.d.ts

@@ -14,6 +14,8 @@ export type { DdsAnchorChangeEvent } from '../../events/events';
 * @event {{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }} dds-anchor-change - Event that is triggered when the anchor changes.
 *
 * @csspart base - The main container of the toc.
+* @csspart title - The title of the toc.
+* @csspart nav - The navigation element holding the links.
 *
 * @cssproperty --dds-toc-border-width - Width of the TOC border. (default: var(--dds-border-width-base))
 * @cssproperty --dds-toc-border-color - Color of the TOC border. (default: var(--dds-border-neutral-divider))

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-toc/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/toc/toc.js'\n      import type { DdsAnchorChangeEvent } from '../../events/events'\n      export type { DdsAnchorChangeEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-toc'\n\n      /**\n * `dap-ds-toc`\n * @summary A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.\n * @element dap-ds-toc\n * @title - toc\n *\n * @property { 'xs' | 'sm' | 'md' | 'lg' } size - The size of the TOC. Default is `lg.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @event {{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }} dds-anchor-change - Event that is triggered when the anchor changes.\n *\n * @csspart base - The main container of the toc.\n *\n * @cssproperty --dds-toc-border-width - Width of the TOC border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-toc-border-color - Color of the TOC border. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-toc-title-color - Color of the TOC title. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-toc-title-font-size - Font size of the TOC title. (default: var(--dds-font-base))\n * @cssproperty --dds-toc-title-font-weight - Font weight of the TOC title. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-toc-title-line-height - Line height of the TOC title. (default: 1.25)\n * @cssproperty --dds-toc-link-color - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled))\n * @cssproperty --dds-toc-link-active-color - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled))\n * @cssproperty --dds-toc-link-border-color - Border color of the active TOC link. (default: var(--dds-border-brand-base))\n * @cssproperty --dds-toc-link-line-height - Line height of the TOC links. (default: 1.2)\n * @cssproperty --dds-toc-link-padding - Padding of the TOC links. (default: var(--dds-spacing-200))\n * @cssproperty --dds-toc-indent-level-0 - Indent level of the TOC items. (default: var(--dds-spacing-400))\n * @cssproperty --dds-toc-indent-level-1 - Indent level of the TOC items. (default: var(--dds-spacing-800))\n * @cssproperty --dds-toc-indent-level-2 - Indent level of the TOC items. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-toc-indent-level-3 - Indent level of the TOC items. (default: var(--dds-spacing-1600))\n * @cssproperty --dds-toc-indent-level-4 - Indent level of the TOC items. (default: var(--dds-spacing-2000))\n * @cssproperty --dds-toc-indent-level-5 - Indent level of the TOC items. (default: var(--dds-spacing-2400))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsAnchorChange: 'dds-anchor-change' as EventName<DdsAnchorChangeEvent>\n        },\n        displayName: \"DapDSTOC\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AASM,MAAMA,IAAU,cAiCVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,mBAAmB;AAAA,EACrB;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-toc/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/toc/toc.js'\n      import type { DdsAnchorChangeEvent } from '../../events/events'\n      export type { DdsAnchorChangeEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-toc'\n\n      /**\n * `dap-ds-toc`\n * @summary A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.\n * @element dap-ds-toc\n * @title - toc\n *\n * @property { 'xs' | 'sm' | 'md' | 'lg' } size - The size of the TOC. Default is `lg.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @event {{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }} dds-anchor-change - Event that is triggered when the anchor changes.\n *\n * @csspart base - The main container of the toc.\n * @csspart title - The title of the toc.\n * @csspart nav - The navigation element holding the links.\n *\n * @cssproperty --dds-toc-border-width - Width of the TOC border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-toc-border-color - Color of the TOC border. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-toc-title-color - Color of the TOC title. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-toc-title-font-size - Font size of the TOC title. (default: var(--dds-font-base))\n * @cssproperty --dds-toc-title-font-weight - Font weight of the TOC title. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-toc-title-line-height - Line height of the TOC title. (default: 1.25)\n * @cssproperty --dds-toc-link-color - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled))\n * @cssproperty --dds-toc-link-active-color - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled))\n * @cssproperty --dds-toc-link-border-color - Border color of the active TOC link. (default: var(--dds-border-brand-base))\n * @cssproperty --dds-toc-link-line-height - Line height of the TOC links. (default: 1.2)\n * @cssproperty --dds-toc-link-padding - Padding of the TOC links. (default: var(--dds-spacing-200))\n * @cssproperty --dds-toc-indent-level-0 - Indent level of the TOC items. (default: var(--dds-spacing-400))\n * @cssproperty --dds-toc-indent-level-1 - Indent level of the TOC items. (default: var(--dds-spacing-800))\n * @cssproperty --dds-toc-indent-level-2 - Indent level of the TOC items. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-toc-indent-level-3 - Indent level of the TOC items. (default: var(--dds-spacing-1600))\n * @cssproperty --dds-toc-indent-level-4 - Indent level of the TOC items. (default: var(--dds-spacing-2000))\n * @cssproperty --dds-toc-indent-level-5 - Indent level of the TOC items. (default: var(--dds-spacing-2400))\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsAnchorChange: 'dds-anchor-change' as EventName<DdsAnchorChangeEvent>\n        },\n        displayName: \"DapDSTOC\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AASM,MAAMA,IAAU,cAmCVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,mBAAmB;AAAA,EACrB;AAAA,EACA,aAAa;AACf,CAAC;"}

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

@@ -12,6 +12,8 @@ import { default as Component } from '../../components/tooltip/tooltip.js';
  * @csspart trigger - The trigger element of the tooltip.
  * @csspart popup - The popup of the tooltip.
  * @csspart arrow - The arrow of the tooltip.
+ * @csspart base__popup - Alias of the popup part.
+ * @csspart base__arrow - Alias of the arrow part.
  *
  * @cssproperty --dds-tooltip-max-width - The maximum width of the tooltip before its content will wrap (default: 14rem)
  * @cssproperty --dds-tooltip-padding - The padding inside the tooltip (default: var(--dds-spacing-400))

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-tooltip/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/tooltip/tooltip.js'\n\nconst tagName = 'dap-ds-tooltip'\n\n/**\n * `dap-ds-tooltip`\n * @summary A tooltip is a container for tooltip content.\n * @element dap-ds-tooltip\n * @title - Tooltip\n *\n * @slot - The content of the tooltip.\n * @slot trigger - The trigger element of the tooltip.\n *\n * @csspart base - The main tooltip container.\n * @csspart trigger - The trigger element of the tooltip.\n * @csspart popup - The popup of the tooltip.\n * @csspart arrow - The arrow of the tooltip.\n *\n * @cssproperty --dds-tooltip-max-width - The maximum width of the tooltip before its content will wrap (default: 14rem)\n * @cssproperty --dds-tooltip-padding - The padding inside the tooltip (default: var(--dds-spacing-400))\n * @cssproperty --dds-tooltip-border-color - The border color of the tooltip (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-tooltip-bg-color - The background color of the tooltip (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-tooltip-text-color - The text color of the tooltip (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-tooltip-font-size - The font size of the tooltip text (default: var(--dds-font-sm))\n * @cssproperty --dds-tooltip-box-shadow - The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%))\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSTooltip',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,kBAwBVC,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-tooltip/index.ts"],"sourcesContent":["import { createComponent } from '@lit/react'\nimport * as React from 'react'\n\nimport Component from '../../components/tooltip/tooltip.js'\n\nconst tagName = 'dap-ds-tooltip'\n\n/**\n * `dap-ds-tooltip`\n * @summary A tooltip is a container for tooltip content.\n * @element dap-ds-tooltip\n * @title - Tooltip\n *\n * @slot - The content of the tooltip.\n * @slot trigger - The trigger element of the tooltip.\n *\n * @csspart base - The main tooltip container.\n * @csspart trigger - The trigger element of the tooltip.\n * @csspart popup - The popup of the tooltip.\n * @csspart arrow - The arrow of the tooltip.\n * @csspart base__popup - Alias of the popup part.\n * @csspart base__arrow - Alias of the arrow part.\n *\n * @cssproperty --dds-tooltip-max-width - The maximum width of the tooltip before its content will wrap (default: 14rem)\n * @cssproperty --dds-tooltip-padding - The padding inside the tooltip (default: var(--dds-spacing-400))\n * @cssproperty --dds-tooltip-border-color - The border color of the tooltip (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-tooltip-bg-color - The background color of the tooltip (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-tooltip-text-color - The text color of the tooltip (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-tooltip-font-size - The font size of the tooltip text (default: var(--dds-font-sm))\n * @cssproperty --dds-tooltip-box-shadow - The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%))\n */\nconst reactWrapper = createComponent({\n  tagName,\n  elementClass: Component,\n  react: React,\n  events: {},\n  displayName: 'DapDSTooltip',\n})\n\nexport default reactWrapper\n"],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAKA,MAAMA,IAAU,kBA0BVC,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-tray/index.d.ts

@@ -64,7 +64,10 @@ export type { DdsCloseEvent } from '../../events/events';
 * @csspart header - The header of the tray.
 * @csspart footer - The footer of the tray.
 * @csspart content - The content of the tray.
-* @csspart body - The body of the tray.
+* @csspart header-container - The container of the header.
+* @csspart title - The title of the tray.
+* @csspart description - The description of the tray.
+* @csspart closebutton - The close button of the tray.
 *
 */
 declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-tray/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/tray/tray.js'\n      import type { DdsBeforeOpenEvent } from '../../events/events'\nimport type { DdsOpenedEvent } from '../../events/events'\nimport type { DdsBeforeCloseEvent } from '../../events/events'\nimport type { DdsClosedEvent } from '../../events/events'\nimport type { DdsCloseEvent } from '../../events/events'\n      export type { DdsBeforeOpenEvent } from '../../events/events'\nexport type { DdsOpenedEvent } from '../../events/events'\nexport type { DdsBeforeCloseEvent } from '../../events/events'\nexport type { DdsClosedEvent } from '../../events/events'\nexport type { DdsCloseEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-tray'\n\n      /**\n * `dap-ds-tray`\n * @summary A tray is a container for slide in content.\n * @element dap-ds-tray\n * @title - Tray\n *\n * @property {boolean} open - The open state of the tray.\n * @property {boolean} noModal - Whether the tray should have a modal overlay. Default is false. If true the tray will use the .show() method, if false the tray will use the .showModal() method.\n * @property {boolean} closeOnEsc - Whether the tray should close on pressing the escape key. Default is true.\n * @property {boolean} closeOnOverlayClick - Whether the tray should close on clicking the overlay. Default is true.\n * @property {string} closeButton - Whether the tray should have a close button. Default is true.\n * @property {string} title - The title of the tray.\n * @property {string} description - The description of the tray.\n * @property {string} okButtonLabel - The label of the OK button.\n * @property {string} cancelButtonLabel - The label of the Cancel button.\n * @property { 'sm' | 'lg' } size - The size of the tray. Default is 'sm'.\n * @property {string} footer - Whether the tray should have a footer. Default is false.\n * @property {string} header - Whether the tray should have a header. Default is false.\n *\n * @event {{ void }} dds-before-open - Fires before the tray opens.\n * @event {{ void }} dds-opened - Fires after the tray opens.\n * @event {{ void }} dds-before-close - Fires before the tray closes.\n * @event {{ void }} dds-closed - Fires after the tray closed.\n * @event {{ void }} dds-close - Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.\n *\n * @slot - The content of the tray.\n * @slot header - The header of the tray.\n * @slot footer - The footer of the tray.\n *\n * @cssproperty --dds-modal-max-block-size - Maximum height of the modal. (default: 80vh)\n * @cssproperty --dds-modal-max-inline-size - Maximum width of the modal. (default: 600px)\n * @cssproperty --dds-modal-padding-sm - Padding inside the modal. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-padding-lg - Padding inside the modal. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-modal-transform-amount - Amount to transform for entrance animation. (default: 2rem)\n * @cssproperty --dds-modal-transition-speed - Speed of transition animations. (default: var(--dds-transition-fast))\n * @cssproperty --dds-modal-transition-timing - Timing function for transitions. (default: var(--dds-easing-ease-in-out))\n * @cssproperty --dds-modal-border-width - Border width of the modal. (default: var(--dds-border-width-base))\n * @cssproperty --dds-modal-border-color - Border color of the modal. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-modal-border-radius - Border radius of the modal. (default: var(--dds-radius-large, 16px))\n * @cssproperty --dds-modal-background - Background color of the modal. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-modal-header-margin-sm - Margin below the header. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-header-margin-lg - Margin below the header. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-footer-margin-sm - Margin above the footer. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-footer-margin-lg - Margin above the footer. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-footer-gap - Gap between footer elements. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-close-margin - Margin for the close button. (default: var(--dds-spacing-300))\n * @cssproperty --dds-tray-width-side - Width of the side (left/right) trays. (default: 250px)\n * @cssproperty --dds-tray-min-width-horizontal - Minimum width of the horizontal (top/bottom) trays. (default: 400px)\n * @cssproperty --dds-tray-min-height-horizontal - Minimum height of the horizontal (top/bottom) trays. (default: 300px)\n * @cssproperty --dds-tray-min-height-vertical - Minimum height of the vertical (left/right) trays. (default: 100%)\n * @cssproperty --dds-tray-transform-duration - Duration of the transform animation. (default: 0.3s)\n * @cssproperty --dds-tray-transform-timing - Timing function for the transform animation. (default: ease-in-out)\n *\n * @csspart base - The main tray container.\n * @csspart panel - The panel of the tray.\n * @csspart header - The header of the tray.\n * @csspart footer - The footer of the tray.\n * @csspart content - The content of the tray.\n * @csspart body - The body of the tray.\n *\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsBeforeOpen: 'dds-before-open' as EventName<DdsBeforeOpenEvent>,\nonDdsOpened: 'dds-opened' as EventName<DdsOpenedEvent>,\nonDdsBeforeClose: 'dds-before-close' as EventName<DdsBeforeCloseEvent>,\nonDdsClosed: 'dds-closed' as EventName<DdsClosedEvent>,\nonDdsClose: 'dds-close' as EventName<DdsCloseEvent>\n        },\n        displayName: \"DapDSTray\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAiBM,MAAMA,IAAU,eA+DVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,iBAAiB;AAAA,IAC3B,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,YAAY;AAAA,EACJ;AAAA,EACA,aAAa;AACf,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/dap-ds-tray/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/tray/tray.js'\n      import type { DdsBeforeOpenEvent } from '../../events/events'\nimport type { DdsOpenedEvent } from '../../events/events'\nimport type { DdsBeforeCloseEvent } from '../../events/events'\nimport type { DdsClosedEvent } from '../../events/events'\nimport type { DdsCloseEvent } from '../../events/events'\n      export type { DdsBeforeOpenEvent } from '../../events/events'\nexport type { DdsOpenedEvent } from '../../events/events'\nexport type { DdsBeforeCloseEvent } from '../../events/events'\nexport type { DdsClosedEvent } from '../../events/events'\nexport type { DdsCloseEvent } from '../../events/events'\n\n      const tagName = 'dap-ds-tray'\n\n      /**\n * `dap-ds-tray`\n * @summary A tray is a container for slide in content.\n * @element dap-ds-tray\n * @title - Tray\n *\n * @property {boolean} open - The open state of the tray.\n * @property {boolean} noModal - Whether the tray should have a modal overlay. Default is false. If true the tray will use the .show() method, if false the tray will use the .showModal() method.\n * @property {boolean} closeOnEsc - Whether the tray should close on pressing the escape key. Default is true.\n * @property {boolean} closeOnOverlayClick - Whether the tray should close on clicking the overlay. Default is true.\n * @property {string} closeButton - Whether the tray should have a close button. Default is true.\n * @property {string} title - The title of the tray.\n * @property {string} description - The description of the tray.\n * @property {string} okButtonLabel - The label of the OK button.\n * @property {string} cancelButtonLabel - The label of the Cancel button.\n * @property { 'sm' | 'lg' } size - The size of the tray. Default is 'sm'.\n * @property {string} footer - Whether the tray should have a footer. Default is false.\n * @property {string} header - Whether the tray should have a header. Default is false.\n *\n * @event {{ void }} dds-before-open - Fires before the tray opens.\n * @event {{ void }} dds-opened - Fires after the tray opens.\n * @event {{ void }} dds-before-close - Fires before the tray closes.\n * @event {{ void }} dds-closed - Fires after the tray closed.\n * @event {{ void }} dds-close - Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.\n *\n * @slot - The content of the tray.\n * @slot header - The header of the tray.\n * @slot footer - The footer of the tray.\n *\n * @cssproperty --dds-modal-max-block-size - Maximum height of the modal. (default: 80vh)\n * @cssproperty --dds-modal-max-inline-size - Maximum width of the modal. (default: 600px)\n * @cssproperty --dds-modal-padding-sm - Padding inside the modal. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-padding-lg - Padding inside the modal. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-modal-transform-amount - Amount to transform for entrance animation. (default: 2rem)\n * @cssproperty --dds-modal-transition-speed - Speed of transition animations. (default: var(--dds-transition-fast))\n * @cssproperty --dds-modal-transition-timing - Timing function for transitions. (default: var(--dds-easing-ease-in-out))\n * @cssproperty --dds-modal-border-width - Border width of the modal. (default: var(--dds-border-width-base))\n * @cssproperty --dds-modal-border-color - Border color of the modal. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-modal-border-radius - Border radius of the modal. (default: var(--dds-radius-large, 16px))\n * @cssproperty --dds-modal-background - Background color of the modal. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-modal-header-margin-sm - Margin below the header. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-header-margin-lg - Margin below the header. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-footer-margin-sm - Margin above the footer. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-footer-margin-lg - Margin above the footer. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-footer-gap - Gap between footer elements. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-close-margin - Margin for the close button. (default: var(--dds-spacing-300))\n * @cssproperty --dds-tray-width-side - Width of the side (left/right) trays. (default: 250px)\n * @cssproperty --dds-tray-min-width-horizontal - Minimum width of the horizontal (top/bottom) trays. (default: 400px)\n * @cssproperty --dds-tray-min-height-horizontal - Minimum height of the horizontal (top/bottom) trays. (default: 300px)\n * @cssproperty --dds-tray-min-height-vertical - Minimum height of the vertical (left/right) trays. (default: 100%)\n * @cssproperty --dds-tray-transform-duration - Duration of the transform animation. (default: 0.3s)\n * @cssproperty --dds-tray-transform-timing - Timing function for the transform animation. (default: ease-in-out)\n *\n * @csspart base - The main tray container.\n * @csspart panel - The panel of the tray.\n * @csspart header - The header of the tray.\n * @csspart footer - The footer of the tray.\n * @csspart content - The content of the tray.\n * @csspart header-container - The container of the header.\n * @csspart title - The title of the tray.\n * @csspart description - The description of the tray.\n * @csspart closebutton - The close button of the tray.\n *\n */\n      const reactWrapper = createComponent({\n        tagName,\n        elementClass: Component,\n        react: React,\n        events: {\n          onDdsBeforeOpen: 'dds-before-open' as EventName<DdsBeforeOpenEvent>,\nonDdsOpened: 'dds-opened' as EventName<DdsOpenedEvent>,\nonDdsBeforeClose: 'dds-before-close' as EventName<DdsBeforeCloseEvent>,\nonDdsClosed: 'dds-closed' as EventName<DdsClosedEvent>,\nonDdsClose: 'dds-close' as EventName<DdsCloseEvent>\n        },\n        displayName: \"DapDSTray\"\n      })\n\n      export default reactWrapper\n    "],"names":["tagName","reactWrapper","createComponent","Component","React"],"mappings":";;;;AAiBM,MAAMA,IAAU,eAkEVC,IAAeC,EAAgB;AAAA,EACnC,SAAAF;AAAA,EACA,cAAcG;AAAAA,EACd,OAAOC;AAAA,EACP,QAAQ;AAAA,IACN,iBAAiB;AAAA,IAC3B,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,YAAY;AAAA,EACJ;AAAA,EACA,aAAa;AACf,CAAC;"}

package/dist/react/index.d.ts

@@ -1,16 +1,19 @@
-export { default as DapDSAccordionGroupReact } from './dap-ds-accordion-group/index.js';
 export { default as DapDSAccordionReact } from './dap-ds-accordion/index.js';
 export { default as DapDSAnchorHeadingReact } from './dap-ds-anchor-heading/index.js';
-export { default as DapDSAvatarGroupReact } from './dap-ds-avatar-group/index.js';
+export { default as DapDSBadgeReact } from './dap-ds-badge/index.js';
+export { default as DapDSAvatarReact } from './dap-ds-avatar/index.js';
+export { default as DapDSAccordionGroupReact } from './dap-ds-accordion-group/index.js';
 export { default as DapDSBannerReact } from './dap-ds-banner/index.js';
 export { default as DapDSBreadcrumbReact } from './dap-ds-breadcrumb/index.js';
+export { default as DapDSAvatarGroupReact } from './dap-ds-avatar-group/index.js';
 export { default as DapDSBreadcrumbItemReact } from './dap-ds-breadcrumb-item/index.js';
-export { default as DapDSBadgeReact } from './dap-ds-badge/index.js';
 export { default as DapDSButtonReact } from './dap-ds-button/index.js';
-export { default as DapDSCalloutReact } from './dap-ds-callout/index.js';
 export { default as DapDSCalendarCellReact } from './dap-ds-calendar-cell/index.js';
 export { default as DapDSCalendarReact } from './dap-ds-calendar/index.js';
-export { default as DapDSAvatarReact } from './dap-ds-avatar/index.js';
+export { default as DapDSButtonGroupSeparatorReact } from './dap-ds-button-group-separator/index.js';
+export { default as DapDSButtonGroupTextReact } from './dap-ds-button-group-text/index.js';
+export { default as DapDSButtonGroupReact } from './dap-ds-button-group/index.js';
+export { default as DapDSCalloutReact } from './dap-ds-callout/index.js';
 export { default as DapDSCardActionsReact } from './dap-ds-card-actions/index.js';
 export { default as DapDSCardContentReact } from './dap-ds-card-content/index.js';
 export { default as DapDSCardImageReact } from './dap-ds-card-image/index.js';
@@ -56,8 +59,8 @@ export { default as DapDSOverlayReact } from './dap-ds-overlay/index.js';
 export { default as DapDSPagerReact } from './dap-ds-pager/index.js';
 export { default as DapDSPasswordInputReact } from './dap-ds-password-input/index.js';
 export { default as DapDSPopupReact } from './dap-ds-popup/index.js';
-export { default as DapDSProgressReact } from './dap-ds-progress/index.js';
 export { default as DapDSRadioButtonReact } from './dap-ds-radio-button/index.js';
+export { default as DapDSProgressReact } from './dap-ds-progress/index.js';
 export { default as DapDSRatingReact } from './dap-ds-rating/index.js';
 export { default as DapDSScrollAreaReact } from './dap-ds-scroll-area/index.js';
 export { default as DapDSScrollProgressReact } from './dap-ds-scroll-progress/index.js';
@@ -111,10 +114,10 @@ export { default as ArrowsArrowUpLineReact } from './dap-ds-icon-arrow-up-line/i
 export { default as ArrowsArrowUpSFillReact } from './dap-ds-icon-arrow-up-s-fill/index.js';
 export { default as ArrowsArrowUpSLineReact } from './dap-ds-icon-arrow-up-s-line/index.js';
 export { default as ArrowsExpandUpDownFillReact } from './dap-ds-icon-expand-up-down-fill/index.js';
-export { default as BuildingsHome6LineReact } from './dap-ds-icon-home-6-line/index.js';
 export { default as BusinessCalendarLineReact } from './dap-ds-icon-calendar-line/index.js';
 export { default as DesignEditLineReact } from './dap-ds-icon-edit-line/index.js';
 export { default as DesignToolsLineReact } from './dap-ds-icon-tools-line/index.js';
+export { default as BuildingsHome6LineReact } from './dap-ds-icon-home-6-line/index.js';
 export { default as DeviceComputerLineReact } from './dap-ds-icon-computer-line/index.js';
 export { default as DocumentClipboardLineReact } from './dap-ds-icon-clipboard-line/index.js';
 export { default as DocumentFileCopyLineReact } from './dap-ds-icon-file-copy-line/index.js';
@@ -160,8 +163,8 @@ export { default as SystemInformationFillReact } from './dap-ds-icon-information
 export { default as SystemInformationLineReact } from './dap-ds-icon-information-line/index.js';
 export { default as SystemLightbulbFillReact } from './dap-ds-icon-lightbulb-fill/index.js';
 export { default as SystemLoadingSpinnerReact } from './dap-ds-icon-loading-spinner/index.js';
-export { default as SystemLockFillReact } from './dap-ds-icon-lock-fill/index.js';
 export { default as SystemLockLineReact } from './dap-ds-icon-lock-line/index.js';
+export { default as SystemLockFillReact } from './dap-ds-icon-lock-fill/index.js';
 export { default as SystemMenuLineReact } from './dap-ds-icon-menu-line/index.js';
 export { default as SystemMenuLineSReact } from './dap-ds-icon-menu-line-s/index.js';
 export { default as SystemMore2LineReact } from './dap-ds-icon-more-2-line/index.js';

package/dist/react-types.ts

@@ -3,19 +3,22 @@ import type { DdsAllUploadsCompleteEvent, DdsAnchorChangeEvent, DdsBeforeCloseEv
 type HtmlType = { children?: React.ReactNode | Element, class?: string, ref?: React.RefObject<any>, key?: React.Key | null | undefined,
   style?: Partial<CSSStyleDeclaration>, id?: string, onClick?: (e: React.MouseEvent) => void, onChange?: (e: React.ChangeEvent) => void}
   
-export type DapDSAccordionGroupType = HtmlType & Partial<Omit<DDS.DapDSAccordionGroup, 'children' | 'style'>>
 export type DapDSAccordionType = HtmlType & Partial<Omit<DDS.DapDSAccordion, 'children' | 'style'>> & { "ondds-opened"?: (e: DdsOpenedEvent) => void, "ondds-closed"?: (e: DdsClosedEvent) => void }
 export type DapDSAnchorHeadingType = HtmlType & Partial<Omit<DDS.DapDSAnchorHeading, 'children' | 'style'>>
-export type DapDSAvatarGroupType = HtmlType & Partial<Omit<DDS.DapDSAvatarGroup, 'children' | 'style'>> & { "ondds-overflow-click"?: (e: DdsOverflowClickEvent) => void }
+export type DapDSBadgeType = HtmlType & Partial<Omit<DDS.DapDSBadge, 'children' | 'style'>>
+export type DapDSAvatarType = HtmlType & Partial<Omit<DDS.DapDSAvatar, 'children' | 'style'>> & { "ondds-load"?: (e: DdsLoadEvent) => void, "ondds-error"?: (e: DdsErrorEvent) => void }
+export type DapDSAccordionGroupType = HtmlType & Partial<Omit<DDS.DapDSAccordionGroup, 'children' | 'style'>>
 export type DapDSBannerType = HtmlType & Partial<Omit<DDS.DapDSBanner, 'children' | 'style'>> & { "ondds-close"?: (e: DdsCloseEvent) => void }
 export type DapDSBreadcrumbType = HtmlType & Partial<Omit<DDS.DapDSBreadcrumb, 'children' | 'style'>>
+export type DapDSAvatarGroupType = HtmlType & Partial<Omit<DDS.DapDSAvatarGroup, 'children' | 'style'>> & { "ondds-overflow-click"?: (e: DdsOverflowClickEvent) => void }
 export type DapDSBreadcrumbItemType = HtmlType & Partial<Omit<DDS.DapDSBreadcrumbItem, 'children' | 'style'>>
-export type DapDSBadgeType = HtmlType & Partial<Omit<DDS.DapDSBadge, 'children' | 'style'>>
 export type DapDSButtonType = HtmlType & Partial<Omit<DDS.DapDSButton, 'children' | 'style'>> & { "ondds-loading-timeout"?: (e: DdsLoadingTimeoutEvent) => void }
-export type DapDSCalloutType = HtmlType & Partial<Omit<DDS.DapDSCallout, 'children' | 'style'>> & { "ondds-close"?: (e: DdsCloseEvent) => void }
 export type DapDSCalendarCellType = HtmlType & Partial<Omit<DDS.DapDSCalendarCell, 'children' | 'style'>>
 export type DapDSCalendarType = HtmlType & Partial<Omit<DDS.DapDSCalendar, 'children' | 'style'>> & { "ondds-change"?: (e: DdsChangeEvent) => void }
-export type DapDSAvatarType = HtmlType & Partial<Omit<DDS.DapDSAvatar, 'children' | 'style'>> & { "ondds-load"?: (e: DdsLoadEvent) => void, "ondds-error"?: (e: DdsErrorEvent) => void }
+export type DapDSButtonGroupSeparatorType = HtmlType & Partial<Omit<DDS.DapDSButtonGroupSeparator, 'children' | 'style'>>
+export type DapDSButtonGroupTextType = HtmlType & Partial<Omit<DDS.DapDSButtonGroupText, 'children' | 'style'>>
+export type DapDSButtonGroupType = HtmlType & Partial<Omit<DDS.DapDSButtonGroup, 'children' | 'style'>>
+export type DapDSCalloutType = HtmlType & Partial<Omit<DDS.DapDSCallout, 'children' | 'style'>> & { "ondds-close"?: (e: DdsCloseEvent) => void }
 export type DapDSCardActionsType = HtmlType & Partial<Omit<DDS.DapDSCardActions, 'children' | 'style'>>
 export type DapDSCardContentType = HtmlType & Partial<Omit<DDS.DapDSCardContent, 'children' | 'style'>>
 export type DapDSCardImageType = HtmlType & Partial<Omit<DDS.DapDSCardImage, 'children' | 'style'>>
@@ -61,8 +64,8 @@ export type DapDSOverlayType = HtmlType & Partial<Omit<DDS.DapDSOverlay, 'childr
 export type DapDSPagerType = HtmlType & Partial<Omit<DDS.DapDSPager, 'children' | 'style'>> & { "ondds-pagination-change"?: (e: DdsPaginationChangeEvent) => void }
 export type DapDSPasswordInputType = HtmlType & Partial<Omit<DDS.DapDSPasswordInput, 'children' | 'style'>> & { "ondds-change"?: (e: DdsChangeEvent) => void, "ondds-input"?: (e: DdsInputEvent) => void, "ondds-keydown"?: (e: DdsKeydownEvent) => void, "ondds-blur"?: (e: DdsBlurEvent) => void, "ondds-focus"?: (e: DdsFocusEvent) => void }
 export type DapDSPopupType = HtmlType & Partial<Omit<DDS.DapDSPopup, 'children' | 'style'>> & { "ondds-opened"?: (e: DdsOpenedEvent) => void, "ondds-closed"?: (e: DdsClosedEvent) => void, "ondds-close"?: (e: DdsCloseEvent) => void }
-export type DapDSProgressType = HtmlType & Partial<Omit<DDS.DapDSProgress, 'children' | 'style'>>
 export type DapDSRadioButtonType = HtmlType & Partial<Omit<DDS.DapDSRadioButton, 'children' | 'style'>> & { "ondds-change"?: (e: DdsChangeEvent) => void, "ondds-blur"?: (e: DdsBlurEvent) => void, "ondds-focus"?: (e: DdsFocusEvent) => void, "ondds-input"?: (e: DdsInputEvent) => void }
+export type DapDSProgressType = HtmlType & Partial<Omit<DDS.DapDSProgress, 'children' | 'style'>>
 export type DapDSRatingType = HtmlType & Partial<Omit<DDS.DapDSRating, 'children' | 'style'>> & { "ondds-change"?: (e: DdsChangeEvent) => void }
 export type DapDSScrollAreaType = HtmlType & Partial<Omit<DDS.DapDSScrollArea, 'children' | 'style'>>
 export type DapDSScrollProgressType = HtmlType & Partial<Omit<DDS.DapDSScrollProgress, 'children' | 'style'>>
@@ -116,10 +119,10 @@ export type ArrowsArrowUpLineType = HtmlType & Partial<Omit<DDS.ArrowsArrowUpLin
 export type ArrowsArrowUpSFillType = HtmlType & Partial<Omit<DDS.ArrowsArrowUpSFill, 'children' | 'style'>>
 export type ArrowsArrowUpSLineType = HtmlType & Partial<Omit<DDS.ArrowsArrowUpSLine, 'children' | 'style'>>
 export type ArrowsExpandUpDownFillType = HtmlType & Partial<Omit<DDS.ArrowsExpandUpDownFill, 'children' | 'style'>>
-export type BuildingsHome6LineType = HtmlType & Partial<Omit<DDS.BuildingsHome6Line, 'children' | 'style'>>
 export type BusinessCalendarLineType = HtmlType & Partial<Omit<DDS.BusinessCalendarLine, 'children' | 'style'>>
 export type DesignEditLineType = HtmlType & Partial<Omit<DDS.DesignEditLine, 'children' | 'style'>>
 export type DesignToolsLineType = HtmlType & Partial<Omit<DDS.DesignToolsLine, 'children' | 'style'>>
+export type BuildingsHome6LineType = HtmlType & Partial<Omit<DDS.BuildingsHome6Line, 'children' | 'style'>>
 export type DeviceComputerLineType = HtmlType & Partial<Omit<DDS.DeviceComputerLine, 'children' | 'style'>>
 export type DocumentClipboardLineType = HtmlType & Partial<Omit<DDS.DocumentClipboardLine, 'children' | 'style'>>
 export type DocumentFileCopyLineType = HtmlType & Partial<Omit<DDS.DocumentFileCopyLine, 'children' | 'style'>>
@@ -165,8 +168,8 @@ export type SystemInformationFillType = HtmlType & Partial<Omit<DDS.SystemInform
 export type SystemInformationLineType = HtmlType & Partial<Omit<DDS.SystemInformationLine, 'children' | 'style'>>
 export type SystemLightbulbFillType = HtmlType & Partial<Omit<DDS.SystemLightbulbFill, 'children' | 'style'>>
 export type SystemLoadingSpinnerType = HtmlType & Partial<Omit<DDS.SystemLoadingSpinner, 'children' | 'style'>>
-export type SystemLockFillType = HtmlType & Partial<Omit<DDS.SystemLockFill, 'children' | 'style'>>
 export type SystemLockLineType = HtmlType & Partial<Omit<DDS.SystemLockLine, 'children' | 'style'>>
+export type SystemLockFillType = HtmlType & Partial<Omit<DDS.SystemLockFill, 'children' | 'style'>>
 export type SystemMenuLineType = HtmlType & Partial<Omit<DDS.SystemMenuLine, 'children' | 'style'>>
 export type SystemMenuLineSType = HtmlType & Partial<Omit<DDS.SystemMenuLineS, 'children' | 'style'>>
 export type SystemMore2LineType = HtmlType & Partial<Omit<DDS.SystemMore2Line, 'children' | 'style'>>