@24vlh/vds 0.1.2 → 0.1.4

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 (37) 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/inbox.css +1228 -0
  18. package/dist/components/inbox.min.css +1 -0
  19. package/dist/components/navigation.css +900 -900
  20. package/dist/components/overlays.css +498 -498
  21. package/dist/components/sections.css +450 -450
  22. package/dist/components/skeleton.css +385 -385
  23. package/dist/components/tables.css +591 -591
  24. package/dist/components/tabs.css +307 -307
  25. package/dist/components/toasts.css +421 -421
  26. package/dist/components/tooltips-popovers.css +447 -447
  27. package/dist/components/typography.css +250 -250
  28. package/dist/components/utilities.css +3433 -3433
  29. package/dist/core.css +866 -866
  30. package/dist/identity.css +266 -266
  31. package/dist/themes/carbon.css +658 -658
  32. package/dist/themes/graphite.css +658 -658
  33. package/dist/themes/navy.css +657 -657
  34. package/dist/themes/slate.css +659 -659
  35. package/dist/vds.css +19009 -20312
  36. package/dist/vds.min.css +1 -1
  37. 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
+ }