dap-design-system 0.62.0 → 0.62.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/components/combobox/comboboxBase.d.ts +6 -0
  2. package/dist/components/combobox/comboboxBase.js +79 -61
  3. package/dist/components/combobox/comboboxBase.js.map +1 -1
  4. package/dist/components/command/command-item.scss.js +1 -1
  5. package/dist/components/command/command.component.js +12 -12
  6. package/dist/components/command/command.component.js.map +1 -1
  7. package/dist/components/datatable/datatable.component.d.ts +2 -0
  8. package/dist/components/datatable/datatable.component.js +131 -112
  9. package/dist/components/datatable/datatable.component.js.map +1 -1
  10. package/dist/components/datatable/datatable.scss.js +1 -1
  11. package/dist/components/icon-button/icon-button.component.js +15 -12
  12. package/dist/components/icon-button/icon-button.component.js.map +1 -1
  13. package/dist/components/input/input-base-element.js +42 -38
  14. package/dist/components/input/input-base-element.js.map +1 -1
  15. package/dist/components/input/input.component.d.ts +1 -0
  16. package/dist/components/input/input.component.js.map +1 -1
  17. package/dist/components/option-list/option-list.component.js +16 -12
  18. package/dist/components/option-list/option-list.component.js.map +1 -1
  19. package/dist/components/select/select.component.js +71 -66
  20. package/dist/components/select/select.component.js.map +1 -1
  21. package/dist/components/snackbar/snackbar-message.component.js +16 -18
  22. package/dist/components/snackbar/snackbar-message.component.js.map +1 -1
  23. package/dist/components/snackbar/snackbar.component.js +48 -35
  24. package/dist/components/snackbar/snackbar.component.js.map +1 -1
  25. package/dist/components/table/table.component.d.ts +3 -0
  26. package/dist/components/table/table.component.js +30 -27
  27. package/dist/components/table/table.component.js.map +1 -1
  28. package/dist/components/textarea/textarea.component.d.ts +6 -1
  29. package/dist/components/textarea/textarea.component.js +43 -36
  30. package/dist/components/textarea/textarea.component.js.map +1 -1
  31. package/dist/components/tooltip/tooltip.component.d.ts +2 -0
  32. package/dist/components/tooltip/tooltip.component.js +51 -53
  33. package/dist/components/tooltip/tooltip.component.js.map +1 -1
  34. package/dist/internal/mixin/labelableMixin.d.ts +3 -0
  35. package/dist/internal/mixin/labelableMixin.js +15 -12
  36. package/dist/internal/mixin/labelableMixin.js.map +1 -1
  37. package/dist/manifest/types/vue/index.d.ts +87 -84
  38. package/dist/manifest/vscode.html-custom-data.json +64 -60
  39. package/dist/manifest/web-types.json +83 -73
  40. package/dist/react/dap-ds-input/index.d.ts +1 -0
  41. package/dist/react/dap-ds-input/index.js.map +1 -1
  42. package/dist/react/index.d.ts +4 -4
  43. package/dist/react-types.ts +4 -4
  44. package/dist/react.js +22 -22
  45. package/package.json +1 -1
@@ -657,6 +657,11 @@ export interface DapDSRadioGroupEvents {
657
657
  onDdsFocus?: (event: CustomEvent) => void
658
658
  }
659
659
 
660
+ export interface DapDSAccordionGroupSlots {
661
+ /** The content of the accordion group. */
662
+ default?: () => any
663
+ }
664
+
660
665
  export interface DapDSAccordionSlots {
661
666
  /** The content of the accordion. */
662
667
  default?: () => any
@@ -680,11 +685,6 @@ export interface DapDSAvatarGroupSlots {
680
685
  default?: () => any
681
686
  }
682
687
 
683
- export interface DapDSAccordionGroupSlots {
684
- /** The content of the accordion group. */
685
- default?: () => any
686
- }
687
-
688
688
  export interface DapDSBadgeSlots {
689
689
  /** The content of the badge. */
690
690
  default?: () => any
@@ -1125,6 +1125,15 @@ export interface DapDSRadioGroupSlots {
1125
1125
  'feedback-icon'?: () => any
1126
1126
  }
1127
1127
 
1128
+ export type DapDSAccordionGroupProps = {
1129
+ /** Whether to close other accordions when one is opened. */
1130
+ autoClose?: DapDSAccordionGroup["autoClose"]
1131
+ /** The variant of the accordion */
1132
+ variant?: DapDSAccordionGroup["variant"]
1133
+ /** */
1134
+ tagName?: DapDSAccordionGroup["tagName"]
1135
+ }
1136
+
1128
1137
  export type DapDSAccordionProps = {
1129
1138
  /** */
1130
1139
  tagName?: DapDSAccordion["tagName"]
@@ -1204,30 +1213,6 @@ export type DapDSAvatarGroupProps = {
1204
1213
  sizeMap?: DapDSAvatarGroup["sizeMap"]
1205
1214
  }
1206
1215
 
1207
- export type DapDSAnchorHeadingProps = {
1208
- /** The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`. */
1209
- variant?: DapDSAnchorHeading["variant"]
1210
- /** The label of the heading. */
1211
- label?: DapDSAnchorHeading["label"]
1212
- /** */
1213
- tagName?: DapDSAnchorHeading["tagName"]
1214
- /** */
1215
- dependencies?: DapDSAnchorHeading["dependencies"]
1216
- /** */
1217
- elementId?: DapDSAnchorHeading["elementId"]
1218
- /** */
1219
- anchorTitle?: DapDSAnchorHeading["anchorTitle"]
1220
- }
1221
-
1222
- export type DapDSAccordionGroupProps = {
1223
- /** Whether to close other accordions when one is opened. */
1224
- autoClose?: DapDSAccordionGroup["autoClose"]
1225
- /** The variant of the accordion */
1226
- variant?: DapDSAccordionGroup["variant"]
1227
- /** */
1228
- tagName?: DapDSAccordionGroup["tagName"]
1229
- }
1230
-
1231
1216
  export type DapDSBadgeProps = {
1232
1217
  /** The type of the badge */
1233
1218
  type?: DapDSBadge["type"]
@@ -1245,6 +1230,21 @@ export type DapDSBadgeProps = {
1245
1230
  sizeMap?: DapDSBadge["sizeMap"]
1246
1231
  }
1247
1232
 
1233
+ export type DapDSAnchorHeadingProps = {
1234
+ /** The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`. */
1235
+ variant?: DapDSAnchorHeading["variant"]
1236
+ /** The label of the heading. */
1237
+ label?: DapDSAnchorHeading["label"]
1238
+ /** */
1239
+ tagName?: DapDSAnchorHeading["tagName"]
1240
+ /** */
1241
+ dependencies?: DapDSAnchorHeading["dependencies"]
1242
+ /** */
1243
+ elementId?: DapDSAnchorHeading["elementId"]
1244
+ /** */
1245
+ anchorTitle?: DapDSAnchorHeading["anchorTitle"]
1246
+ }
1247
+
1248
1248
  export type DapDSBannerProps = {
1249
1249
  /** The variant of the banner */
1250
1250
  variant?: DapDSBanner["variant"]
@@ -2398,6 +2398,8 @@ export type DapDSInputProps = {
2398
2398
  tooltipPlacement?: DapDSInput["tooltipPlacement"]
2399
2399
  /** The aria label of the tooltip. */
2400
2400
  tooltipAriaLabel?: DapDSInput["tooltipAriaLabel"]
2401
+ /** How the tooltip opens: `click` (click/Enter, default) or `hover` (hover and keyboard focus). */
2402
+ tooltipTrigger?: DapDSInput["tooltipTrigger"]
2401
2403
  /** The feedback of the input. */
2402
2404
  feedback?: DapDSInput["feedback"]
2403
2405
  /** The feedback type of the input. Can be `negative`, `positive`, or `warning`. */
@@ -3541,7 +3543,8 @@ export type DapDSTableRowProps = {
3541
3543
  }
3542
3544
 
3543
3545
  export type DapDSTableProps = {
3544
- /** */
3546
+ /** The html role of the table. A static data table is a `table`; `grid` is
3547
+ only right for an interactive widget with keyboard-navigable cells. */
3545
3548
  role?: DapDSTable["role"]
3546
3549
  /** If the table has mobile design */
3547
3550
  mobile?: DapDSTable["mobile"]
@@ -4049,30 +4052,30 @@ export type ArrowsArrowLeftLLineProps = {
4049
4052
  tagName?: ArrowsArrowLeftLLine["tagName"]
4050
4053
  }
4051
4054
 
4052
- export type ArrowsArrowLeftLineProps = {
4055
+ export type ArrowsArrowLeftSFillProps = {
4053
4056
  /** (optional) The width and height in pixels */
4054
- size?: ArrowsArrowLeftLine["size"]
4057
+ size?: ArrowsArrowLeftSFill["size"]
4055
4058
  /** (optional) Sets the icon color via the `fill` attribute */
4056
- selected?: ArrowsArrowLeftLine["selected"]
4059
+ selected?: ArrowsArrowLeftSFill["selected"]
4057
4060
  /** (optional) When using the icon standalone, make it meaningful for accessibility */
4058
- accessibilityTitle?: ArrowsArrowLeftLine["accessibilityTitle"]
4061
+ accessibilityTitle?: ArrowsArrowLeftSFill["accessibilityTitle"]
4059
4062
  /** (optional) If `true` the icon can receive focus */
4060
- focusable?: ArrowsArrowLeftLine["focusable"]
4063
+ focusable?: ArrowsArrowLeftSFill["focusable"]
4061
4064
  /** */
4062
- tagName?: ArrowsArrowLeftLine["tagName"]
4065
+ tagName?: ArrowsArrowLeftSFill["tagName"]
4063
4066
  }
4064
4067
 
4065
- export type ArrowsArrowLeftSFillProps = {
4068
+ export type ArrowsArrowLeftLineProps = {
4066
4069
  /** (optional) The width and height in pixels */
4067
- size?: ArrowsArrowLeftSFill["size"]
4070
+ size?: ArrowsArrowLeftLine["size"]
4068
4071
  /** (optional) Sets the icon color via the `fill` attribute */
4069
- selected?: ArrowsArrowLeftSFill["selected"]
4072
+ selected?: ArrowsArrowLeftLine["selected"]
4070
4073
  /** (optional) When using the icon standalone, make it meaningful for accessibility */
4071
- accessibilityTitle?: ArrowsArrowLeftSFill["accessibilityTitle"]
4074
+ accessibilityTitle?: ArrowsArrowLeftLine["accessibilityTitle"]
4072
4075
  /** (optional) If `true` the icon can receive focus */
4073
- focusable?: ArrowsArrowLeftSFill["focusable"]
4076
+ focusable?: ArrowsArrowLeftLine["focusable"]
4074
4077
  /** */
4075
- tagName?: ArrowsArrowLeftSFill["tagName"]
4078
+ tagName?: ArrowsArrowLeftLine["tagName"]
4076
4079
  }
4077
4080
 
4078
4081
  export type ArrowsArrowLeftSLineProps = {
@@ -4257,19 +4260,6 @@ export type BusinessCalendarLineProps = {
4257
4260
  tagName?: BusinessCalendarLine["tagName"]
4258
4261
  }
4259
4262
 
4260
- export type DeviceComputerLineProps = {
4261
- /** (optional) The width and height in pixels */
4262
- size?: DeviceComputerLine["size"]
4263
- /** (optional) Sets the icon color via the `fill` attribute */
4264
- selected?: DeviceComputerLine["selected"]
4265
- /** (optional) When using the icon standalone, make it meaningful for accessibility */
4266
- accessibilityTitle?: DeviceComputerLine["accessibilityTitle"]
4267
- /** (optional) If `true` the icon can receive focus */
4268
- focusable?: DeviceComputerLine["focusable"]
4269
- /** */
4270
- tagName?: DeviceComputerLine["tagName"]
4271
- }
4272
-
4273
4263
  export type DesignEditLineProps = {
4274
4264
  /** (optional) The width and height in pixels */
4275
4265
  size?: DesignEditLine["size"]
@@ -4296,6 +4286,19 @@ export type DesignToolsLineProps = {
4296
4286
  tagName?: DesignToolsLine["tagName"]
4297
4287
  }
4298
4288
 
4289
+ export type DeviceComputerLineProps = {
4290
+ /** (optional) The width and height in pixels */
4291
+ size?: DeviceComputerLine["size"]
4292
+ /** (optional) Sets the icon color via the `fill` attribute */
4293
+ selected?: DeviceComputerLine["selected"]
4294
+ /** (optional) When using the icon standalone, make it meaningful for accessibility */
4295
+ accessibilityTitle?: DeviceComputerLine["accessibilityTitle"]
4296
+ /** (optional) If `true` the icon can receive focus */
4297
+ focusable?: DeviceComputerLine["focusable"]
4298
+ /** */
4299
+ tagName?: DeviceComputerLine["tagName"]
4300
+ }
4301
+
4299
4302
  export type DocumentClipboardLineProps = {
4300
4303
  /** (optional) The width and height in pixels */
4301
4304
  size?: DocumentClipboardLine["size"]
@@ -5131,6 +5134,16 @@ export type UserUserLineProps = {
5131
5134
  // Augment Vue's GlobalComponents interface
5132
5135
  declare module 'vue' {
5133
5136
  interface GlobalComponents {
5137
+ /**
5138
+ * An accordion group is a collection of accordion components.
5139
+ *
5140
+ * ### Slots:
5141
+ * - **default** - The content of the accordion group.
5142
+ *
5143
+ * ### CSS Parts:
5144
+ * - **base** - The main accordion group container.
5145
+ */
5146
+ 'dap-ds-accordion-group': DefineCustomElement<DapDSAccordionGroup, DapDSAccordionGroupProps, {}>
5134
5147
  /**
5135
5148
  * An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.
5136
5149
  *
@@ -5192,26 +5205,6 @@ declare module 'vue' {
5192
5205
  * - **overflow** - The overflow indicator element.
5193
5206
  */
5194
5207
  'dap-ds-avatar-group': DefineCustomElement<DapDSAvatarGroup, DapDSAvatarGroupProps, DapDSAvatarGroupEvents>
5195
- /**
5196
- * Anchor heading is a heading with an anchor link.
5197
- *
5198
- * ### CSS Parts:
5199
- * - **base** - The main anchor heading container.
5200
- * - **link** - The link of the anchor heading. dap-ds-link element.
5201
- * - **link-base** - The base of the link part.
5202
- * - **text** - The text of the anchor heading.
5203
- */
5204
- 'dap-ds-anchor-heading': DefineCustomElement<DapDSAnchorHeading, DapDSAnchorHeadingProps, {}>
5205
- /**
5206
- * An accordion group is a collection of accordion components.
5207
- *
5208
- * ### Slots:
5209
- * - **default** - The content of the accordion group.
5210
- *
5211
- * ### CSS Parts:
5212
- * - **base** - The main accordion group container.
5213
- */
5214
- 'dap-ds-accordion-group': DefineCustomElement<DapDSAccordionGroup, DapDSAccordionGroupProps, {}>
5215
5208
  /**
5216
5209
  * A badge is a small status descriptor for UI elements.
5217
5210
  *
@@ -5226,6 +5219,16 @@ declare module 'vue' {
5226
5219
  * - **icon-base** - The base of the icon.
5227
5220
  */
5228
5221
  'dap-ds-badge': DefineCustomElement<DapDSBadge, DapDSBadgeProps, {}>
5222
+ /**
5223
+ * Anchor heading is a heading with an anchor link.
5224
+ *
5225
+ * ### CSS Parts:
5226
+ * - **base** - The main anchor heading container.
5227
+ * - **link** - The link of the anchor heading. dap-ds-link element.
5228
+ * - **link-base** - The base of the link part.
5229
+ * - **text** - The text of the anchor heading.
5230
+ */
5231
+ 'dap-ds-anchor-heading': DefineCustomElement<DapDSAnchorHeading, DapDSAnchorHeadingProps, {}>
5229
5232
  /**
5230
5233
  * A banner is a message displayed at the top of the page to provide important information to the user.
5231
5234
  *
@@ -6731,14 +6734,14 @@ Used with dap-ds-select to create grouped options that render as native optgroup
6731
6734
  * ### CSS Parts:
6732
6735
  * - **base** - The main icon container.
6733
6736
  */
6734
- 'dap-ds-icon-arrow-left-line': DefineCustomElement<ArrowsArrowLeftLine, ArrowsArrowLeftLineProps, {}>
6737
+ 'dap-ds-icon-arrow-left-s-fill': DefineCustomElement<ArrowsArrowLeftSFill, ArrowsArrowLeftSFillProps, {}>
6735
6738
  /**
6736
6739
  * An icon
6737
6740
  *
6738
6741
  * ### CSS Parts:
6739
6742
  * - **base** - The main icon container.
6740
6743
  */
6741
- 'dap-ds-icon-arrow-left-s-fill': DefineCustomElement<ArrowsArrowLeftSFill, ArrowsArrowLeftSFillProps, {}>
6744
+ 'dap-ds-icon-arrow-left-line': DefineCustomElement<ArrowsArrowLeftLine, ArrowsArrowLeftLineProps, {}>
6742
6745
  /**
6743
6746
  * An icon
6744
6747
  *
@@ -6843,21 +6846,21 @@ Used with dap-ds-select to create grouped options that render as native optgroup
6843
6846
  * ### CSS Parts:
6844
6847
  * - **base** - The main icon container.
6845
6848
  */
6846
- 'dap-ds-icon-computer-line': DefineCustomElement<DeviceComputerLine, DeviceComputerLineProps, {}>
6849
+ 'dap-ds-icon-edit-line': DefineCustomElement<DesignEditLine, DesignEditLineProps, {}>
6847
6850
  /**
6848
6851
  * An icon
6849
6852
  *
6850
6853
  * ### CSS Parts:
6851
6854
  * - **base** - The main icon container.
6852
6855
  */
6853
- 'dap-ds-icon-edit-line': DefineCustomElement<DesignEditLine, DesignEditLineProps, {}>
6856
+ 'dap-ds-icon-tools-line': DefineCustomElement<DesignToolsLine, DesignToolsLineProps, {}>
6854
6857
  /**
6855
6858
  * An icon
6856
6859
  *
6857
6860
  * ### CSS Parts:
6858
6861
  * - **base** - The main icon container.
6859
6862
  */
6860
- 'dap-ds-icon-tools-line': DefineCustomElement<DesignToolsLine, DesignToolsLineProps, {}>
6863
+ 'dap-ds-icon-computer-line': DefineCustomElement<DeviceComputerLine, DeviceComputerLineProps, {}>
6861
6864
  /**
6862
6865
  * An icon
6863
6866
  *
@@ -7313,12 +7316,12 @@ Used with dap-ds-select to create grouped options that render as native optgroup
7313
7316
  declare global {
7314
7317
  namespace JSX {
7315
7318
  interface IntrinsicElements {
7319
+ 'dap-ds-accordion-group': DapDSAccordionGroupProps & DapDSAccordionGroupSlots
7316
7320
  'dap-ds-accordion': DapDSAccordionProps & DapDSAccordionEvents & DapDSAccordionSlots
7317
7321
  'dap-ds-avatar': DapDSAvatarProps & DapDSAvatarEvents & DapDSAvatarSlots
7318
7322
  'dap-ds-avatar-group': DapDSAvatarGroupProps & DapDSAvatarGroupEvents & DapDSAvatarGroupSlots
7319
- 'dap-ds-anchor-heading': DapDSAnchorHeadingProps
7320
- 'dap-ds-accordion-group': DapDSAccordionGroupProps & DapDSAccordionGroupSlots
7321
7323
  'dap-ds-badge': DapDSBadgeProps & DapDSBadgeSlots
7324
+ 'dap-ds-anchor-heading': DapDSAnchorHeadingProps
7322
7325
  'dap-ds-banner': DapDSBannerProps & DapDSBannerEvents & DapDSBannerSlots
7323
7326
  'dap-ds-breadcrumb': DapDSBreadcrumbProps & DapDSBreadcrumbSlots
7324
7327
  'dap-ds-breadcrumb-item': DapDSBreadcrumbItemProps & DapDSBreadcrumbItemSlots
@@ -7412,8 +7415,8 @@ declare global {
7412
7415
  'dap-ds-icon-arrow-down-s-line': ArrowsArrowDownSLineProps
7413
7416
  'dap-ds-icon-arrow-left-down-line': ArrowsArrowLeftDownLineProps
7414
7417
  'dap-ds-icon-arrow-left-l-line': ArrowsArrowLeftLLineProps
7415
- 'dap-ds-icon-arrow-left-line': ArrowsArrowLeftLineProps
7416
7418
  'dap-ds-icon-arrow-left-s-fill': ArrowsArrowLeftSFillProps
7419
+ 'dap-ds-icon-arrow-left-line': ArrowsArrowLeftLineProps
7417
7420
  'dap-ds-icon-arrow-left-s-line': ArrowsArrowLeftSLineProps
7418
7421
  'dap-ds-icon-arrow-left-up-line': ArrowsArrowLeftUpLineProps
7419
7422
  'dap-ds-icon-arrow-right-down-line': ArrowsArrowRightDownLineProps
@@ -7428,9 +7431,9 @@ declare global {
7428
7431
  'dap-ds-icon-expand-up-down-fill': ArrowsExpandUpDownFillProps
7429
7432
  'dap-ds-icon-home-6-line': BuildingsHome6LineProps
7430
7433
  'dap-ds-icon-calendar-line': BusinessCalendarLineProps
7431
- 'dap-ds-icon-computer-line': DeviceComputerLineProps
7432
7434
  'dap-ds-icon-edit-line': DesignEditLineProps
7433
7435
  'dap-ds-icon-tools-line': DesignToolsLineProps
7436
+ 'dap-ds-icon-computer-line': DeviceComputerLineProps
7434
7437
  'dap-ds-icon-clipboard-line': DocumentClipboardLineProps
7435
7438
  'dap-ds-icon-file-copy-line': DocumentFileCopyLineProps
7436
7439
  'dap-ds-icon-file-image-line': DocumentFileImageLineProps
@@ -2,6 +2,33 @@
2
2
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
3
3
  "version": 1.1,
4
4
  "tags": [
5
+ {
6
+ "name": "dap-ds-accordion-group",
7
+ "description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
8
+ "attributes": [
9
+ {
10
+ "name": "autoClose",
11
+ "description": "Whether to close other accordions when one is opened.",
12
+ "values": []
13
+ },
14
+ {
15
+ "name": "variant",
16
+ "description": "The variant of the accordion",
17
+ "values": [
18
+ { "name": "default" },
19
+ { "name": "collapsed" },
20
+ { "name": "clean" },
21
+ { "name": "clean-collapsed" }
22
+ ]
23
+ }
24
+ ],
25
+ "references": [
26
+ {
27
+ "name": "Documentation",
28
+ "url": "https://shoelace.style/components/accordion-group"
29
+ }
30
+ ]
31
+ },
5
32
  {
6
33
  "name": "dap-ds-accordion",
7
34
  "description": "An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.\n---\n\n\n### **Events:**\n - **dds-opened** - Event fired when the accordion is opened.\n- **dds-closed** - Event fired when the accordion is closed.\n\n### **Slots:**\n - **default** - The content of the accordion.\n- **heading** - The heading of the accordion.\n- **icon-opened** - The icon when the accordion is opened.\n- **icon-closed** - The icon when the accordion is closed.\n\n### **CSS Properties:**\n - **--dds-accordion-border-width** - The width of the accordion border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-border-style** - The style of the accordion border (default: solid) _(default: undefined)_\n- **--dds-accordion-border-radius** - The border radius of the accordion (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-border-color** - The color of the accordion border (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-accordion-background-color** - The background color of the accordion (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-text-color** - The text color of the accordion (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-hover-background** - The background color when hovering over the accordion (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-accordion-active-background** - The background color when the accordion is active (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-accordion-icon-background** - The background color of the accordion icon (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-accordion-icon-color** - The color of the accordion icon (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-accordion-icon-hover-background** - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-accordion-icon-active-background** - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong)) _(default: undefined)_\n- **--dds-accordion-icon-hover-color** - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-icon-active-color** - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-content-color** - The color of the accordion content (default: var(--dds-text-text-neutral)) _(default: undefined)_\n- **--dds-accordion-transition-duration** - The duration of the accordion transitions (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-accordion-transition-timing** - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n- **--dds-accordion-divider-color** - The color of the divider between accordion items (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion container.\n- **heading** - The heading of the accordion.\n- **button** - The button of the accordion.\n- **content** - The content of the accordion.\n- **content-container** - The container of the accordion content.\n- **icon-wrapper** - The icon wrapper of the accordion.\n- **open-icon** - The icon when the accordion is opened.\n- **open-icon-base** - The base of the icon when the accordion is opened.\n- **close-icon** - The icon when the accordion is closed.\n- **close-icon-base** - The base of the icon when the accordion is closed.",
@@ -125,55 +152,6 @@
125
152
  }
126
153
  ]
127
154
  },
128
- {
129
- "name": "dap-ds-anchor-heading",
130
- "description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
131
- "attributes": [
132
- {
133
- "name": "variant",
134
- "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
135
- "values": [{ "name": "HeadingVariant" }]
136
- },
137
- {
138
- "name": "label",
139
- "description": "The label of the heading.",
140
- "values": []
141
- }
142
- ],
143
- "references": [
144
- {
145
- "name": "Documentation",
146
- "url": "https://shoelace.style/components/anchor-heading"
147
- }
148
- ]
149
- },
150
- {
151
- "name": "dap-ds-accordion-group",
152
- "description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
153
- "attributes": [
154
- {
155
- "name": "autoClose",
156
- "description": "Whether to close other accordions when one is opened.",
157
- "values": []
158
- },
159
- {
160
- "name": "variant",
161
- "description": "The variant of the accordion",
162
- "values": [
163
- { "name": "default" },
164
- { "name": "collapsed" },
165
- { "name": "clean" },
166
- { "name": "clean-collapsed" }
167
- ]
168
- }
169
- ],
170
- "references": [
171
- {
172
- "name": "Documentation",
173
- "url": "https://shoelace.style/components/accordion-group"
174
- }
175
- ]
176
- },
177
155
  {
178
156
  "name": "dap-ds-badge",
179
157
  "description": "A badge is a small status descriptor for UI elements.\n---\n\n\n### **Slots:**\n - _default_ - The content of the badge.\n- **icon** - The icon of the badge.\n\n### **CSS Properties:**\n - **--dds-badge-border-width** - The width of the badge's border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-style** - The style of the badge's border (default: solid) _(default: undefined)_\n- **--dds-badge-border-radius** - The border radius of the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-font-weight** - The font weight of the badge text (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-badge-line-height** - The line height of the badge text (default: 1.2) _(default: undefined)_\n- **--dds-badge-transition** - The transition property for the badge (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-badge-padding-sm** - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-padding-lg** - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - The font size of the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - The font size of the large badge (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-badge-neutral-border-color** - The border color of the neutral badge (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-badge-neutral-background** - The background color of the neutral badge (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-badge-neutral-color** - The text color of the neutral badge (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-badge-brand-border-color** - The border color of the brand badge (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-badge-brand-background** - The background color of the brand badge (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-badge-brand-color** - The text color of the brand badge (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-info-border-color** - The border color of the info badge (default: var(--dds-border-informative-base)) _(default: undefined)_\n- **--dds-badge-info-background** - The background color of the info badge (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-badge-info-color** - The text color of the info badge (default: var(--dds-text-informative-subtle)) _(default: undefined)_\n- **--dds-badge-positive-border-color** - The border color of the positive badge (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-badge-positive-background** - The background color of the positive badge (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-badge-positive-color** - The text color of the positive badge (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-badge-warning-border-color** - The border color of the warning badge (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-badge-warning-background** - The background color of the warning badge (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-badge-warning-color** - The text color of the warning badge (default: var(--dds-text-warning-subtle)) _(default: undefined)_\n- **--dds-badge-negative-border-color** - The border color of the negative badge (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-badge-negative-background** - The background color of the negative badge (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-badge-negative-color** - The text color of the negative badge (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the badge.\n- **icon** - The icon of the badge.\n- **content** - The content of the badge.\n- **icon-base** - The base of the icon.",
@@ -208,6 +186,28 @@
208
186
  }
209
187
  ]
210
188
  },
189
+ {
190
+ "name": "dap-ds-anchor-heading",
191
+ "description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
192
+ "attributes": [
193
+ {
194
+ "name": "variant",
195
+ "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
196
+ "values": [{ "name": "HeadingVariant" }]
197
+ },
198
+ {
199
+ "name": "label",
200
+ "description": "The label of the heading.",
201
+ "values": []
202
+ }
203
+ ],
204
+ "references": [
205
+ {
206
+ "name": "Documentation",
207
+ "url": "https://shoelace.style/components/anchor-heading"
208
+ }
209
+ ]
210
+ },
211
211
  {
212
212
  "name": "dap-ds-banner",
213
213
  "description": "A banner is a message displayed at the top of the page to provide important information to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Event fired when the banner is closed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **actions** - Actions of banner\n- **icon** - The icon of the banner.\n\n### **CSS Properties:**\n - **--dds-banner-gap** - The gap between banner elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-banner-line-height** - The line height of the banner text (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-banner-transition** - The transition property for the banner (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-banner-brand-background** - The background color of the brand banner (default: var(--dds-banner-background-brand)) _(default: undefined)_\n- **--dds-banner-brand-icon-color** - The color of the brand banner icon (default: var(--dds-banner-icon-brand)) _(default: undefined)_\n- **--dds-banner-brand-text-color** - The text color of the brand banner (default: var(--dds-banner-text-brand)) _(default: undefined)_\n- **--dds-banner-brand-action-color** - The color of the brand banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-info-background** - The background color of the info banner (default: var(--dds-banner-background-informative)) _(default: undefined)_\n- **--dds-banner-info-icon-color** - The color of the info banner icon (default: var(--dds-banner-icon-informative)) _(default: undefined)_\n- **--dds-banner-info-text-color** - The text color of the info banner (default: var(--dds-banner-text-informative)) _(default: undefined)_\n- **--dds-banner-info-action-color** - The color of the info banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-positive-background** - The background color of the positive banner (default: var(--dds-banner-background-positive)) _(default: undefined)_\n- **--dds-banner-positive-icon-color** - The color of the positive banner icon (default: var(--dds-banner-icon-positive)) _(default: undefined)_\n- **--dds-banner-positive-text-color** - The text color of the positive banner (default: var(--dds-banner-text-positive)) _(default: undefined)_\n- **--dds-banner-positive-action-color** - The color of the positive banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-warning-background** - The background color of the warning banner (default: var(--dds-banner-background-warning)) _(default: undefined)_\n- **--dds-banner-warning-icon-color** - The color of the warning banner icon (default: var(--dds-banner-icon-warning)) _(default: undefined)_\n- **--dds-banner-warning-text-color** - The text color of the warning banner (default: var(--dds-banner-text-warning)) _(default: undefined)_\n- **--dds-banner-warning-action-color** - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n- **--dds-banner-negative-background** - The background color of the negative banner (default: var(--dds-banner-background-negative)) _(default: undefined)_\n- **--dds-banner-negative-icon-color** - The color of the negative banner icon (default: var(--dds-banner-icon-negative)) _(default: undefined)_\n- **--dds-banner-negative-text-color** - The text color of the negative banner (default: var(--dds-banner-text-negative)) _(default: undefined)_\n- **--dds-banner-negative-action-color** - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main banner container.\n- **card-base** - The wrapper card container.\n- **icon** - The icon of the banner.\n- **icon-element** - The icon element of the banner.\n- **icon-base** - The base of the icon.\n- **closebutton** - The close button of the banner.\n- **close-icon-element** - The icon element of the close button.\n- **close-icon-base** - The base of the close button icon.\n- **actions** - The actions of the banner.\n- **title** - The title of the banner.",
@@ -3680,7 +3680,11 @@
3680
3680
  "name": "dap-ds-table",
3681
3681
  "description": "Data table component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-row` elements.\n\n### **CSS Properties:**\n - **--dds-table-border-width** - Width of the table border. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-table-border-color** - Color of the table border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-border-radius** - Border radius of the table. (default: var(--dds-radius-small, 4px)) _(default: undefined)_\n- **--dds-table-row-divider-color** - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_",
3682
3682
  "attributes": [
3683
- { "name": "role", "values": [] },
3683
+ {
3684
+ "name": "role",
3685
+ "description": "The html role of the table. A static data table is a `table`; `grid` is\nonly right for an interactive widget with keyboard-navigable cells.",
3686
+ "values": []
3687
+ },
3684
3688
  {
3685
3689
  "name": "mobile",
3686
3690
  "description": "If the table has mobile design",
@@ -4394,7 +4398,7 @@
4394
4398
  ]
4395
4399
  },
4396
4400
  {
4397
- "name": "dap-ds-icon-arrow-left-line",
4401
+ "name": "dap-ds-icon-arrow-left-s-fill",
4398
4402
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4399
4403
  "attributes": [
4400
4404
  {
@@ -4421,12 +4425,12 @@
4421
4425
  "references": [
4422
4426
  {
4423
4427
  "name": "Documentation",
4424
- "url": "https://shoelace.style/components/icon-arrow-left-line"
4428
+ "url": "https://shoelace.style/components/icon-arrow-left-s-fill"
4425
4429
  }
4426
4430
  ]
4427
4431
  },
4428
4432
  {
4429
- "name": "dap-ds-icon-arrow-left-s-fill",
4433
+ "name": "dap-ds-icon-arrow-left-line",
4430
4434
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4431
4435
  "attributes": [
4432
4436
  {
@@ -4453,7 +4457,7 @@
4453
4457
  "references": [
4454
4458
  {
4455
4459
  "name": "Documentation",
4456
- "url": "https://shoelace.style/components/icon-arrow-left-s-fill"
4460
+ "url": "https://shoelace.style/components/icon-arrow-left-line"
4457
4461
  }
4458
4462
  ]
4459
4463
  },
@@ -4906,7 +4910,7 @@
4906
4910
  ]
4907
4911
  },
4908
4912
  {
4909
- "name": "dap-ds-icon-computer-line",
4913
+ "name": "dap-ds-icon-edit-line",
4910
4914
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4911
4915
  "attributes": [
4912
4916
  {
@@ -4933,12 +4937,12 @@
4933
4937
  "references": [
4934
4938
  {
4935
4939
  "name": "Documentation",
4936
- "url": "https://shoelace.style/components/icon-computer-line"
4940
+ "url": "https://shoelace.style/components/icon-edit-line"
4937
4941
  }
4938
4942
  ]
4939
4943
  },
4940
4944
  {
4941
- "name": "dap-ds-icon-edit-line",
4945
+ "name": "dap-ds-icon-tools-line",
4942
4946
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4943
4947
  "attributes": [
4944
4948
  {
@@ -4965,12 +4969,12 @@
4965
4969
  "references": [
4966
4970
  {
4967
4971
  "name": "Documentation",
4968
- "url": "https://shoelace.style/components/icon-edit-line"
4972
+ "url": "https://shoelace.style/components/icon-tools-line"
4969
4973
  }
4970
4974
  ]
4971
4975
  },
4972
4976
  {
4973
- "name": "dap-ds-icon-tools-line",
4977
+ "name": "dap-ds-icon-computer-line",
4974
4978
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4975
4979
  "attributes": [
4976
4980
  {
@@ -4997,7 +5001,7 @@
4997
5001
  "references": [
4998
5002
  {
4999
5003
  "name": "Documentation",
5000
- "url": "https://shoelace.style/components/icon-tools-line"
5004
+ "url": "https://shoelace.style/components/icon-computer-line"
5001
5005
  }
5002
5006
  ]
5003
5007
  },