@24vlh/vds 0.1.2 → 0.1.3

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 (35) hide show
  1. package/dist/components/accordion.css +170 -170
  2. package/dist/components/authoring.css +332 -332
  3. package/dist/components/buttons.css +683 -683
  4. package/dist/components/charts.css +502 -502
  5. package/dist/components/command.css +520 -520
  6. package/dist/components/content-blocks.css +944 -944
  7. package/dist/components/doc-block.css +782 -782
  8. package/dist/components/feedback.css +657 -657
  9. package/dist/components/flows.css +1101 -1101
  10. package/dist/components/forms-advanced.css +462 -462
  11. package/dist/components/forms.css +627 -1831
  12. package/dist/components/forms.min.css +1 -1
  13. package/dist/components/header-footer.css +348 -348
  14. package/dist/components/hero.css +498 -498
  15. package/dist/components/icons.css +937 -937
  16. package/dist/components/icons.min.css +1 -1
  17. package/dist/components/navigation.css +900 -900
  18. package/dist/components/overlays.css +498 -498
  19. package/dist/components/sections.css +450 -450
  20. package/dist/components/skeleton.css +385 -385
  21. package/dist/components/tables.css +591 -591
  22. package/dist/components/tabs.css +307 -307
  23. package/dist/components/toasts.css +421 -421
  24. package/dist/components/tooltips-popovers.css +447 -447
  25. package/dist/components/typography.css +250 -250
  26. package/dist/components/utilities.css +3433 -3433
  27. package/dist/core.css +866 -866
  28. package/dist/identity.css +266 -266
  29. package/dist/themes/carbon.css +658 -658
  30. package/dist/themes/graphite.css +658 -658
  31. package/dist/themes/navy.css +657 -657
  32. package/dist/themes/slate.css +659 -659
  33. package/dist/vds.css +19009 -20312
  34. package/dist/vds.min.css +1 -1
  35. package/package.json +3 -2
package/dist/components/accordion.css CHANGED
@@ -1,170 +1,170 @@
1
- /************************************************************
2
- * VLAH DESIGN SYSTEM (VDS) - Accordion Component
3
- *
4
- * Responsibilities:
5
- * - Implement a native <details>/<summary>-driven accordion pattern
6
- * - Provide consistent header, title, icon, and body regions
7
- * - Support semantic variants (info/success/warning/danger) and density modes
8
- * - Style open/closed states with clear, theme-aware borders and icons
9
- *
10
- * System Notes:
11
- * - Pure CSS: built on <details> and <summary>, no JavaScript required
12
- * - Theme-driven: colours, spacing, and radii all come from VDS tokens
13
- * - Chevron rotation handled via stateful transforms on [open]
14
- * - Density classes (.density-a / .density-c) adjust padding without changing structure
15
- ************************************************************/
16
-
17
- /* ---------------------------------------------------------
18
- 1. ACCORDION WRAPPER
19
- --------------------------------------------------------- */
20
-
21
- .accordion {
22
- display: flex;
23
- flex-direction: column;
24
- gap: var(--space-3);
25
- }
26
-
27
- /* ---------------------------------------------------------
28
- 2. ACCORDION ITEM (<details>)
29
- --------------------------------------------------------- */
30
-
31
- .accordion-item {
32
- border: var(--border-width) solid var(--color-border-subtle);
33
- border-radius: var(--radius-md);
34
- background: var(--color-surface);
35
- overflow: hidden;
36
- padding: 0;
37
- }
38
-
39
- .accordion-item > summary {
40
- list-style: none;
41
- }
42
-
43
- /* ---------------------------------------------------------
44
- 3. ACCORDION HEADER (<summary>)
45
- --------------------------------------------------------- */
46
-
47
- .accordion-header {
48
- display: flex;
49
- align-items: center;
50
- justify-content: space-between;
51
- width: 100%;
52
-
53
- padding: var(--space-3) var(--space-4);
54
- cursor: pointer;
55
- -webkit-user-select: none;
56
- -moz-user-select: none;
57
- user-select: none;
58
-
59
- font-weight: var(--font-weight-medium);
60
- color: var(--color-text);
61
- }
62
-
63
- .accordion-header:hover {
64
- background: var(--color-surface-hover);
65
- }
66
-
67
- .accordion-header:focus-visible {
68
- outline: var(--focus-ring-width) solid var(--focus-ring-color);
69
- outline-offset: var(--focus-ring-offset);
70
- }
71
-
72
- /* ---------------------------------------------------------
73
- 3A. ACCORDION TITLE
74
- --------------------------------------------------------- */
75
-
76
- .accordion-title {
77
- flex: 1;
78
- display: inline-flex;
79
- align-items: center;
80
-
81
- font-size: var(--text-md);
82
- font-weight: var(--font-weight-medium);
83
- line-height: var(--line-height-normal);
84
- color: var(--color-text);
85
-
86
- min-width: 0;
87
- }
88
-
89
- .accordion-title--truncate {
90
- white-space: nowrap;
91
- overflow: hidden;
92
- text-overflow: ellipsis;
93
- }
94
-
95
- /* ---------------------------------------------------------
96
- 4. ACCORDION ICON
97
- --------------------------------------------------------- */
98
-
99
- .accordion-icon {
100
- display: inline-block;
101
- width: var(--icon-sm);
102
- height: var(--icon-sm);
103
- flex-shrink: 0;
104
- transform: rotate(0deg);
105
- transition: transform var(--transition-normal);
106
- color: var(--color-icon-muted);
107
- }
108
-
109
- .accordion-item[open] .accordion-icon {
110
- transform: rotate(90deg);
111
- }
112
-
113
- /* ---------------------------------------------------------
114
- 5. ACCORDION BODY
115
- --------------------------------------------------------- */
116
-
117
- .accordion-body {
118
- padding: var(--space-1) var(--space-4) var(--space-4);
119
- color: var(--color-text);
120
- }
121
-
122
- /* ---------------------------------------------------------
123
- 6. OPEN STATE - ACCENT BORDER
124
- --------------------------------------------------------- */
125
-
126
- .accordion-item[open] {
127
- border-left: var(--border-width-strong) solid var(--color-accent);
128
- border-top-left-radius: var(--radius-md);
129
- border-bottom-left-radius: var(--radius-md);
130
- }
131
-
132
- /* ---------------------------------------------------------
133
- 7. SEMANTIC VARIANTS
134
- --------------------------------------------------------- */
135
-
136
- .accordion-item--info[open] {
137
- border-left-color: var(--color-info);
138
- }
139
-
140
- .accordion-item--success[open] {
141
- border-left-color: var(--color-success);
142
- }
143
-
144
- .accordion-item--warning[open] {
145
- border-left-color: var(--color-warning);
146
- }
147
-
148
- .accordion-item--danger[open] {
149
- border-left-color: var(--color-danger);
150
- }
151
-
152
- /* ---------------------------------------------------------
153
- 8. DENSITY ADJUSTMENTS
154
- --------------------------------------------------------- */
155
-
156
- .density-a .accordion-header {
157
- padding: var(--space-2) var(--space-3);
158
- }
159
-
160
- .density-a .accordion-body {
161
- padding: var(--space-1) var(--space-3) var(--space-3);
162
- }
163
-
164
- .density-c .accordion-header {
165
- padding: var(--space-4) var(--space-5);
166
- }
167
-
168
- .density-c .accordion-body {
169
- padding: var(--space-2) var(--space-5) var(--space-5);
170
- }
1
+ /************************************************************
2
+ * VLAH DESIGN SYSTEM (VDS) - Accordion Component
3
+ *
4
+ * Responsibilities:
5
+ * - Implement a native <details>/<summary>-driven accordion pattern
6
+ * - Provide consistent header, title, icon, and body regions
7
+ * - Support semantic variants (info/success/warning/danger) and density modes
8
+ * - Style open/closed states with clear, theme-aware borders and icons
9
+ *
10
+ * System Notes:
11
+ * - Pure CSS: built on <details> and <summary>, no JavaScript required
12
+ * - Theme-driven: colours, spacing, and radii all come from VDS tokens
13
+ * - Chevron rotation handled via stateful transforms on [open]
14
+ * - Density classes (.density-a / .density-c) adjust padding without changing structure
15
+ ************************************************************/
16
+
17
+ /* ---------------------------------------------------------
18
+ 1. ACCORDION WRAPPER
19
+ --------------------------------------------------------- */
20
+
21
+ .accordion {
22
+ display: flex;
23
+ flex-direction: column;
24
+ gap: var(--space-3);
25
+ }
26
+
27
+ /* ---------------------------------------------------------
28
+ 2. ACCORDION ITEM (<details>)
29
+ --------------------------------------------------------- */
30
+
31
+ .accordion-item {
32
+ border: var(--border-width) solid var(--color-border-subtle);
33
+ border-radius: var(--radius-md);
34
+ background: var(--color-surface);
35
+ overflow: hidden;
36
+ padding: 0;
37
+ }
38
+
39
+ .accordion-item > summary {
40
+ list-style: none;
41
+ }
42
+
43
+ /* ---------------------------------------------------------
44
+ 3. ACCORDION HEADER (<summary>)
45
+ --------------------------------------------------------- */
46
+
47
+ .accordion-header {
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: space-between;
51
+ width: 100%;
52
+
53
+ padding: var(--space-3) var(--space-4);
54
+ cursor: pointer;
55
+ -webkit-user-select: none;
56
+ -moz-user-select: none;
57
+ user-select: none;
58
+
59
+ font-weight: var(--font-weight-medium);
60
+ color: var(--color-text);
61
+ }
62
+
63
+ .accordion-header:hover {
64
+ background: var(--color-surface-hover);
65
+ }
66
+
67
+ .accordion-header:focus-visible {
68
+ outline: var(--focus-ring-width) solid var(--focus-ring-color);
69
+ outline-offset: var(--focus-ring-offset);
70
+ }
71
+
72
+ /* ---------------------------------------------------------
73
+ 3A. ACCORDION TITLE
74
+ --------------------------------------------------------- */
75
+
76
+ .accordion-title {
77
+ flex: 1;
78
+ display: inline-flex;
79
+ align-items: center;
80
+
81
+ font-size: var(--text-md);
82
+ font-weight: var(--font-weight-medium);
83
+ line-height: var(--line-height-normal);
84
+ color: var(--color-text);
85
+
86
+ min-width: 0;
87
+ }
88
+
89
+ .accordion-title--truncate {
90
+ white-space: nowrap;
91
+ overflow: hidden;
92
+ text-overflow: ellipsis;
93
+ }
94
+
95
+ /* ---------------------------------------------------------
96
+ 4. ACCORDION ICON
97
+ --------------------------------------------------------- */
98
+
99
+ .accordion-icon {
100
+ display: inline-block;
101
+ width: var(--icon-sm);
102
+ height: var(--icon-sm);
103
+ flex-shrink: 0;
104
+ transform: rotate(0deg);
105
+ transition: transform var(--transition-normal);
106
+ color: var(--color-icon-muted);
107
+ }
108
+
109
+ .accordion-item[open] .accordion-icon {
110
+ transform: rotate(90deg);
111
+ }
112
+
113
+ /* ---------------------------------------------------------
114
+ 5. ACCORDION BODY
115
+ --------------------------------------------------------- */
116
+
117
+ .accordion-body {
118
+ padding: var(--space-1) var(--space-4) var(--space-4);
119
+ color: var(--color-text);
120
+ }
121
+
122
+ /* ---------------------------------------------------------
123
+ 6. OPEN STATE - ACCENT BORDER
124
+ --------------------------------------------------------- */
125
+
126
+ .accordion-item[open] {
127
+ border-left: var(--border-width-strong) solid var(--color-accent);
128
+ border-top-left-radius: var(--radius-md);
129
+ border-bottom-left-radius: var(--radius-md);
130
+ }
131
+
132
+ /* ---------------------------------------------------------
133
+ 7. SEMANTIC VARIANTS
134
+ --------------------------------------------------------- */
135
+
136
+ .accordion-item--info[open] {
137
+ border-left-color: var(--color-info);
138
+ }
139
+
140
+ .accordion-item--success[open] {
141
+ border-left-color: var(--color-success);
142
+ }
143
+
144
+ .accordion-item--warning[open] {
145
+ border-left-color: var(--color-warning);
146
+ }
147
+
148
+ .accordion-item--danger[open] {
149
+ border-left-color: var(--color-danger);
150
+ }
151
+
152
+ /* ---------------------------------------------------------
153
+ 8. DENSITY ADJUSTMENTS
154
+ --------------------------------------------------------- */
155
+
156
+ .density-a .accordion-header {
157
+ padding: var(--space-2) var(--space-3);
158
+ }
159
+
160
+ .density-a .accordion-body {
161
+ padding: var(--space-1) var(--space-3) var(--space-3);
162
+ }
163
+
164
+ .density-c .accordion-header {
165
+ padding: var(--space-4) var(--space-5);
166
+ }
167
+
168
+ .density-c .accordion-body {
169
+ padding: var(--space-2) var(--space-5) var(--space-5);
170
+ }