dap-design-system 0.57.0 → 0.57.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.
@@ -13,55 +13,6 @@
13
13
  }
14
14
  ]
15
15
  },
16
- {
17
- "name": "dap-ds-accordion-group",
18
- "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.",
19
- "attributes": [
20
- {
21
- "name": "autoClose",
22
- "description": "Whether to close other accordions when one is opened.",
23
- "values": []
24
- },
25
- {
26
- "name": "variant",
27
- "description": "The variant of the accordion",
28
- "values": [
29
- { "name": "default" },
30
- { "name": "collapsed" },
31
- { "name": "clean" },
32
- { "name": "clean-collapsed" }
33
- ]
34
- }
35
- ],
36
- "references": [
37
- {
38
- "name": "Documentation",
39
- "url": "https://shoelace.style/components/accordion-group"
40
- }
41
- ]
42
- },
43
- {
44
- "name": "dap-ds-anchor-heading",
45
- "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.",
46
- "attributes": [
47
- {
48
- "name": "variant",
49
- "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
50
- "values": [{ "name": "HeadingVariant" }]
51
- },
52
- {
53
- "name": "label",
54
- "description": "The label of the heading.",
55
- "values": []
56
- }
57
- ],
58
- "references": [
59
- {
60
- "name": "Documentation",
61
- "url": "https://shoelace.style/components/anchor-heading"
62
- }
63
- ]
64
- },
65
16
  {
66
17
  "name": "dap-ds-avatar",
67
18
  "description": "Avatar component can be used to display user profile images, initials, or icons.\n---\n\n\n### **Events:**\n - **dds-load** - Fired when the image loads successfully.\n- **dds-error** - Fired when the image fails to load.\n\n### **Slots:**\n - **icon** - The icon to display when variant is 'icon'.\n- **fallback** - Custom fallback content when image fails to load.\n\n### **CSS Properties:**\n - **--dds-avatar-border-radius** - The border radius of the avatar (default: 50%) _(default: undefined)_\n- **--dds-avatar-background-color** - The background color of the avatar (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-avatar-border-width** - The border width of the avatar (default: 0) _(default: undefined)_\n- **--dds-avatar-border-color** - The color of the avatar's border (default: transparent) _(default: undefined)_\n- **--dds-avatar-border-style** - The style of the avatar's border (default: solid) _(default: undefined)_\n- **--dds-avatar-transition** - The transition property for the avatar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-avatar-text-color** - The text color for initials (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-avatar-font-weight** - The font weight for initials (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-avatar-lg-size** - Size for large avatars (default: var(--dds-avatar-size-lg)) _(default: undefined)_\n- **--dds-avatar-md-size** - Size for medium avatars (default: var(--dds-avatar-size-md)) _(default: undefined)_\n- **--dds-avatar-sm-size** - Size for small avatars (default: var(--dds-avatar-size-sm)) _(default: undefined)_\n- **--dds-avatar-xs-size** - Size for extra small avatars (default: var(--dds-avatar-size-xs)) _(default: undefined)_\n- **--dds-avatar-xxs-size** - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs)) _(default: undefined)_\n- **--dds-avatar-font-size-lg** - Font size for large avatars (default: var(--dds-font-2xl)) _(default: undefined)_\n- **--dds-avatar-font-size-md** - Font size for medium avatars (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-avatar-font-size-sm** - Font size for small avatars (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-avatar-font-size-xs** - Font size for extra small avatars (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-avatar-font-size-xxs** - Font size for extra extra small avatars (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-avatar-hover-transform** - Transform applied on hover for interactive avatars (default: scale(1.05)) _(default: undefined)_\n- **--dds-avatar-active-transform** - Transform applied when active for interactive avatars (default: scale(0.95)) _(default: undefined)_\n- **--dds-avatar-focus-ring** - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring)) _(default: undefined)_\n- **--dds-avatar-loading-background** - Background color when loading (default: var(--dds-neutral-100)) _(default: undefined)_\n- **--dds-avatar-error-background** - Background color when image fails to load (default: var(--dds-negative-100)) _(default: undefined)_\n- **--dds-avatar-error-color** - Text color when image fails to load (default: var(--dds-negative-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main avatar container.\n- **img** - The avatar image.\n- **initials** - The initials container.\n- **icon** - The icon container.\n- **fallback** - The fallback content container.\n- **loading** - The loading indicator.",
@@ -133,44 +84,51 @@
133
84
  ]
134
85
  },
135
86
  {
136
- "name": "dap-ds-avatar-group",
137
- "description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
87
+ "name": "dap-ds-anchor-heading",
88
+ "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.",
138
89
  "attributes": [
139
90
  {
140
- "name": "layout",
141
- "description": "Layout type for the avatar group",
142
- "values": [{ "name": "stack" }, { "name": "grid" }]
143
- },
144
- {
145
- "name": "max",
146
- "description": "Maximum number of avatars to show before showing overflow",
147
- "values": []
91
+ "name": "variant",
92
+ "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
93
+ "values": [{ "name": "HeadingVariant" }]
148
94
  },
149
95
  {
150
- "name": "show-total",
151
- "description": "Whether to show the total count in overflow indicator",
96
+ "name": "label",
97
+ "description": "The label of the heading.",
152
98
  "values": []
153
- },
99
+ }
100
+ ],
101
+ "references": [
154
102
  {
155
- "name": "interactive-overflow",
156
- "description": "Interactive overflow indicator",
157
- "values": []
158
- },
103
+ "name": "Documentation",
104
+ "url": "https://shoelace.style/components/anchor-heading"
105
+ }
106
+ ]
107
+ },
108
+ {
109
+ "name": "dap-ds-accordion-group",
110
+ "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.",
111
+ "attributes": [
159
112
  {
160
- "name": "label",
161
- "description": "Accessible label for the avatar group",
113
+ "name": "autoClose",
114
+ "description": "Whether to close other accordions when one is opened.",
162
115
  "values": []
163
116
  },
164
117
  {
165
- "name": "overflow-label",
166
- "description": "Accessible label for the overflow indicator",
167
- "values": []
118
+ "name": "variant",
119
+ "description": "The variant of the accordion",
120
+ "values": [
121
+ { "name": "default" },
122
+ { "name": "collapsed" },
123
+ { "name": "clean" },
124
+ { "name": "clean-collapsed" }
125
+ ]
168
126
  }
169
127
  ],
170
128
  "references": [
171
129
  {
172
130
  "name": "Documentation",
173
- "url": "https://shoelace.style/components/avatar-group"
131
+ "url": "https://shoelace.style/components/accordion-group"
174
132
  }
175
133
  ]
176
134
  },
@@ -208,6 +166,48 @@
208
166
  }
209
167
  ]
210
168
  },
169
+ {
170
+ "name": "dap-ds-avatar-group",
171
+ "description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
172
+ "attributes": [
173
+ {
174
+ "name": "layout",
175
+ "description": "Layout type for the avatar group",
176
+ "values": [{ "name": "stack" }, { "name": "grid" }]
177
+ },
178
+ {
179
+ "name": "max",
180
+ "description": "Maximum number of avatars to show before showing overflow",
181
+ "values": []
182
+ },
183
+ {
184
+ "name": "show-total",
185
+ "description": "Whether to show the total count in overflow indicator",
186
+ "values": []
187
+ },
188
+ {
189
+ "name": "interactive-overflow",
190
+ "description": "Interactive overflow indicator",
191
+ "values": []
192
+ },
193
+ {
194
+ "name": "label",
195
+ "description": "Accessible label for the avatar group",
196
+ "values": []
197
+ },
198
+ {
199
+ "name": "overflow-label",
200
+ "description": "Accessible label for the overflow indicator",
201
+ "values": []
202
+ }
203
+ ],
204
+ "references": [
205
+ {
206
+ "name": "Documentation",
207
+ "url": "https://shoelace.style/components/avatar-group"
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.",
@@ -2847,27 +2847,6 @@
2847
2847
  }
2848
2848
  ]
2849
2849
  },
2850
- {
2851
- "name": "dap-ds-scroll-area",
2852
- "description": "A component that provides a customizable scrollable area with a custom scrollbar.\n---\n\n\n### **Slots:**\n - _default_ - The content to be scrolled\n\n### **CSS Properties:**\n - **--dds-scroll-area-radius** - The border radius of the scroll area and its elements (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-scroll-area-background** - The background color of the scroll area (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-scroll-area-scrollbar-background** - The background color of the scrollbar (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-scroll-area-thumb-background** - The background color of the scrollbar thumb (default: var(--dds-background-neutral-interactive)) _(default: undefined)_\n- **--dds-scroll-area-thumb-hover-background** - The background color of the scrollbar thumb on hover (default: var(--dds-background-neutral-interactive-hover)) _(default: undefined)_\n- **--dds-scroll-area-thumb-active-background** - The background color of the scrollbar thumb when active (default: var(--dds-background-neutral-interactive-active)) _(default: undefined)_\n- **--dds-scroll-area-transition** - The transition timing for scrollbar interactions (default: var(--dds-transition-fast) var(--dds-easing-ease-out)) _(default: undefined)_\n- **--dds-scroll-area-scrollbar-size** - The width/height of the scrollbar (default: 10px) _(default: undefined)_\n\n### **CSS Parts:**\n - **viewport** - The viewport element that contains the scrollable content\n- **scrollbar** - The scrollbar container\n- **corner** - The corner between vertical and horizontal scrollbars",
2853
- "attributes": [
2854
- {
2855
- "name": "orientation",
2856
- "description": "The orientation of the scrollbar.",
2857
- "values": [
2858
- { "name": "vertical" },
2859
- { "name": "horizontal" },
2860
- { "name": "both" }
2861
- ]
2862
- }
2863
- ],
2864
- "references": [
2865
- {
2866
- "name": "Documentation",
2867
- "url": "https://shoelace.style/components/scroll-area"
2868
- }
2869
- ]
2870
- },
2871
2850
  {
2872
2851
  "name": "dap-ds-rating",
2873
2852
  "description": "Rating is a component that allows users to rate a product or service.\n---\n\n\n### **Events:**\n - **dds-change** - Event fired when the rating value changes.\n\n### **Methods:**\n - **_announceRating()** - Announce the current rating to screen readers\n\n### **CSS Parts:**\n - **base** - The main rating container.\n- **star** - The star element.\n- **stars-container** - The container of the stars.\n- **icon** - The icon of the star.",
@@ -2890,6 +2869,27 @@
2890
2869
  }
2891
2870
  ]
2892
2871
  },
2872
+ {
2873
+ "name": "dap-ds-scroll-area",
2874
+ "description": "A component that provides a customizable scrollable area with a custom scrollbar.\n---\n\n\n### **Slots:**\n - _default_ - The content to be scrolled\n\n### **CSS Properties:**\n - **--dds-scroll-area-radius** - The border radius of the scroll area and its elements (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-scroll-area-background** - The background color of the scroll area (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-scroll-area-scrollbar-background** - The background color of the scrollbar (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-scroll-area-thumb-background** - The background color of the scrollbar thumb (default: var(--dds-background-neutral-interactive)) _(default: undefined)_\n- **--dds-scroll-area-thumb-hover-background** - The background color of the scrollbar thumb on hover (default: var(--dds-background-neutral-interactive-hover)) _(default: undefined)_\n- **--dds-scroll-area-thumb-active-background** - The background color of the scrollbar thumb when active (default: var(--dds-background-neutral-interactive-active)) _(default: undefined)_\n- **--dds-scroll-area-transition** - The transition timing for scrollbar interactions (default: var(--dds-transition-fast) var(--dds-easing-ease-out)) _(default: undefined)_\n- **--dds-scroll-area-scrollbar-size** - The width/height of the scrollbar (default: 10px) _(default: undefined)_\n\n### **CSS Parts:**\n - **viewport** - The viewport element that contains the scrollable content\n- **scrollbar** - The scrollbar container\n- **corner** - The corner between vertical and horizontal scrollbars",
2875
+ "attributes": [
2876
+ {
2877
+ "name": "orientation",
2878
+ "description": "The orientation of the scrollbar.",
2879
+ "values": [
2880
+ { "name": "vertical" },
2881
+ { "name": "horizontal" },
2882
+ { "name": "both" }
2883
+ ]
2884
+ }
2885
+ ],
2886
+ "references": [
2887
+ {
2888
+ "name": "Documentation",
2889
+ "url": "https://shoelace.style/components/scroll-area"
2890
+ }
2891
+ ]
2892
+ },
2893
2893
  {
2894
2894
  "name": "dap-ds-scroll-progress",
2895
2895
  "description": "A progress bar that displays scroll position, supporting both page-level and container-level scroll tracking.\n---\n\n\n### **CSS Properties:**\n - **--dds-scroll-progress-z-index** - Z-index for fixed positioning (default: 1000) _(default: undefined)_\n- **--dds-scroll-progress-transition** - Transition for progress updates (default: width 0.1s ease-out) _(default: undefined)_\n- **--dds-scroll-progress-track-color** - Background color of the progress track (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-scroll-progress-fill-color-neutral** - Fill color for neutral variant _(default: undefined)_\n- **--dds-scroll-progress-fill-color-brand** - Fill color for brand variant _(default: undefined)_\n- **--dds-scroll-progress-fill-color-negative** - Fill color for negative variant _(default: undefined)_\n- **--dds-scroll-progress-fill-color-positive** - Fill color for positive variant _(default: undefined)_\n- **--dds-scroll-progress-fill-color-inverted** - Fill color for inverted variant _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main scroll progress container.\n- **track** - The progress track (background).\n- **fill** - The progress fill bar.",
@@ -3527,6 +3527,28 @@
3527
3527
  }
3528
3528
  ]
3529
3529
  },
3530
+ {
3531
+ "name": "dap-ds-timeline-item",
3532
+ "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the item content.\n\n### **CSS Properties:**\n - **--dds-timeline-position** - Position of the timeline dot (default: 28px) _(default: undefined)_\n- **--dds-timeline-connector-width** - Width of the timeline connector line (default: 1px) _(default: undefined)_\n- **--dds-timeline-connector-left-position** - Left position of the timeline connector (default: 5.5px) _(default: undefined)_\n- **--dds-timeline-dot-size** - Size of the timeline dot (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timeline-item-margin-bottom** - Bottom margin of timeline items (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timeline-item-padding-left** - Left padding of timeline items (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timeline item container.\n- **connector** - The connector element between two timeline items.\n- **content** - The content of the timeline item.",
3533
+ "attributes": [],
3534
+ "references": [
3535
+ {
3536
+ "name": "Documentation",
3537
+ "url": "https://shoelace.style/components/timeline-item"
3538
+ }
3539
+ ]
3540
+ },
3541
+ {
3542
+ "name": "dap-ds-timeline",
3543
+ "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the timeline items.\n\n### **CSS Parts:**\n - **base** - The main timeline container.",
3544
+ "attributes": [],
3545
+ "references": [
3546
+ {
3547
+ "name": "Documentation",
3548
+ "url": "https://shoelace.style/components/timeline"
3549
+ }
3550
+ ]
3551
+ },
3530
3552
  {
3531
3553
  "name": "dap-ds-textarea",
3532
3554
  "description": "A textarea is a multi-line text input field.\n---\n\n\n### **Events:**\n - **dds-count-change** - Fires when the count of the textarea changes.\n- **dds-change** - Fired when the textarea value changes.\n- **dds-input** - Fired when the textarea value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the textarea loses focus.\n- **dds-focus** - Emitted when the textarea gains focus.\n- **dds-select** - Emitted when select text in textarea.\n\n### **Slots:**\n - **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-textarea-min-rows** - Minimum number of rows in the textarea. (default: 2) _(default: undefined)_\n- **--dds-textarea-spacing** - Gap between elements in the textarea container. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-gap** - Gap between elements in the textarea container. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-margin-top** - Top margin of the textarea. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-padding** - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-textarea-border-width** - Border width of the textarea. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-textarea-border-color** - Border color of the textarea. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-textarea-background** - Background color of the textarea. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-textarea-color** - Text color of the textarea. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-textarea-border-radius** - Border radius of the textarea. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-textarea-disabled-bg** - Background color when disabled. (default: var(--dds-fields-background-disabled)) _(default: undefined)_\n- **--dds-textarea-disabled-color** - Text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-textarea-readonly-bg** - Background color when readonly. (default: var(--dds-fields-background-read-only)) _(default: undefined)_\n- **--dds-textarea-readonly-color** - Text color when readonly. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-textarea-error-border** - Border color when in error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-textarea-success-border** - Border color when in success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main textarea container.\n- **input** - The native input of the textarea.\n- **counter** - The counter of the textarea.\n- **counter-base** - The base of the counter.\n- **feedback** - The feedback of the textarea.\n- **feedback-base** - The base of the feedback.\n- **feedback-text** - The text of the feedback.\n- **feedback-icon** - The icon of the feedback.",
@@ -3574,28 +3596,6 @@
3574
3596
  }
3575
3597
  ]
3576
3598
  },
3577
- {
3578
- "name": "dap-ds-timeline-item",
3579
- "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the item content.\n\n### **CSS Properties:**\n - **--dds-timeline-position** - Position of the timeline dot (default: 28px) _(default: undefined)_\n- **--dds-timeline-connector-width** - Width of the timeline connector line (default: 1px) _(default: undefined)_\n- **--dds-timeline-connector-left-position** - Left position of the timeline connector (default: 5.5px) _(default: undefined)_\n- **--dds-timeline-dot-size** - Size of the timeline dot (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timeline-item-margin-bottom** - Bottom margin of timeline items (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timeline-item-padding-left** - Left padding of timeline items (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timeline item container.\n- **connector** - The connector element between two timeline items.\n- **content** - The content of the timeline item.",
3580
- "attributes": [],
3581
- "references": [
3582
- {
3583
- "name": "Documentation",
3584
- "url": "https://shoelace.style/components/timeline-item"
3585
- }
3586
- ]
3587
- },
3588
- {
3589
- "name": "dap-ds-timeline",
3590
- "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the timeline items.\n\n### **CSS Parts:**\n - **base** - The main timeline container.",
3591
- "attributes": [],
3592
- "references": [
3593
- {
3594
- "name": "Documentation",
3595
- "url": "https://shoelace.style/components/timeline"
3596
- }
3597
- ]
3598
- },
3599
3599
  {
3600
3600
  "name": "dap-ds-time-grid",
3601
3601
  "description": "A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when time selection changes.\n- **dds-close** - Fired when the time grid should close.\n\n### **CSS Properties:**\n - **--dds-time-grid-gap** - The gap between time sections (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-time-grid-padding** - The padding around the time grid (default: var(--dds-spacing-0)). _(default: undefined)_\n- **--dds-time-grid-column-gap** - The gap between time buttons in columns (default: var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-time-grid-border-radius** - The border radius of the time grid (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-time-grid-background** - The background color of the time grid (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-time-grid-transition** - The transition timing for the time grid (default: all 0.2s ease-in-out). _(default: undefined)_\n- **--dds-time-grid-max-width** - The maximum width of the time grid (default: 400px). _(default: undefined)_\n- **--dds-time-grid-column-max-height** - The maximum height of time columns (default: 240px). _(default: undefined)_\n\n### **CSS Parts:**\n - **time-grid** - The main time grid container.\n- **hour-section** - The hour selection section.\n- **minute-section** - The minute selection section.\n- **time-button** - Individual time selection buttons.\n- **time-button-base** - The base part of the time button.\n- **time-button-content** - The content part of the time button.\n- **time-button-high-contrast** - The high contrast part of the time button.\n- **section-header-title** - The title of the section header.\n- **section-header-divider** - The divider between the section header and the time buttons.\n- **time-column** - The time column container.",
@@ -4224,7 +4224,7 @@
4224
4224
  ]
4225
4225
  },
4226
4226
  {
4227
- "name": "dap-ds-icon-arrow-left-s-fill",
4227
+ "name": "dap-ds-icon-arrow-left-s-line",
4228
4228
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4229
4229
  "attributes": [
4230
4230
  {
@@ -4251,12 +4251,12 @@
4251
4251
  "references": [
4252
4252
  {
4253
4253
  "name": "Documentation",
4254
- "url": "https://shoelace.style/components/icon-arrow-left-s-fill"
4254
+ "url": "https://shoelace.style/components/icon-arrow-left-s-line"
4255
4255
  }
4256
4256
  ]
4257
4257
  },
4258
4258
  {
4259
- "name": "dap-ds-icon-arrow-left-s-line",
4259
+ "name": "dap-ds-icon-arrow-left-s-fill",
4260
4260
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4261
4261
  "attributes": [
4262
4262
  {
@@ -4283,7 +4283,7 @@
4283
4283
  "references": [
4284
4284
  {
4285
4285
  "name": "Documentation",
4286
- "url": "https://shoelace.style/components/icon-arrow-left-s-line"
4286
+ "url": "https://shoelace.style/components/icon-arrow-left-s-fill"
4287
4287
  }
4288
4288
  ]
4289
4289
  },
@@ -5279,6 +5279,38 @@
5279
5279
  }
5280
5280
  ]
5281
5281
  },
5282
+ {
5283
+ "name": "dap-ds-icon-user-line",
5284
+ "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
5285
+ "attributes": [
5286
+ {
5287
+ "name": "size",
5288
+ "description": "(optional) The width and height in pixels",
5289
+ "values": []
5290
+ },
5291
+ {
5292
+ "name": "selected",
5293
+ "description": "(optional) Sets the icon color via the `fill` attribute",
5294
+ "values": []
5295
+ },
5296
+ {
5297
+ "name": "accessibilityTitle",
5298
+ "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
5299
+ "values": []
5300
+ },
5301
+ {
5302
+ "name": "focusable",
5303
+ "description": "(optional) If `true` the icon can receive focus",
5304
+ "values": []
5305
+ }
5306
+ ],
5307
+ "references": [
5308
+ {
5309
+ "name": "Documentation",
5310
+ "url": "https://shoelace.style/components/icon-user-line"
5311
+ }
5312
+ ]
5313
+ },
5282
5314
  {
5283
5315
  "name": "dap-ds-icon-add-line",
5284
5316
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
@@ -6367,38 +6399,6 @@
6367
6399
  }
6368
6400
  ]
6369
6401
  },
6370
- {
6371
- "name": "dap-ds-icon-user-line",
6372
- "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
6373
- "attributes": [
6374
- {
6375
- "name": "size",
6376
- "description": "(optional) The width and height in pixels",
6377
- "values": []
6378
- },
6379
- {
6380
- "name": "selected",
6381
- "description": "(optional) Sets the icon color via the `fill` attribute",
6382
- "values": []
6383
- },
6384
- {
6385
- "name": "accessibilityTitle",
6386
- "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
6387
- "values": []
6388
- },
6389
- {
6390
- "name": "focusable",
6391
- "description": "(optional) If `true` the icon can receive focus",
6392
- "values": []
6393
- }
6394
- ],
6395
- "references": [
6396
- {
6397
- "name": "Documentation",
6398
- "url": "https://shoelace.style/components/icon-user-line"
6399
- }
6400
- ]
6401
- },
6402
6402
  {
6403
6403
  "name": "dap-ds-icon-search-line",
6404
6404
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",