@dsn-starter-kit/components-web 1.0.0

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 (161) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +120 -0
  3. package/dist/button/Button.d.ts +50 -0
  4. package/dist/button/Button.d.ts.map +1 -0
  5. package/dist/button/Button.js +247 -0
  6. package/dist/button/Button.js.map +1 -0
  7. package/dist/button/Button.test.d.ts +2 -0
  8. package/dist/button/Button.test.d.ts.map +1 -0
  9. package/dist/button/Button.test.js +299 -0
  10. package/dist/button/Button.test.js.map +1 -0
  11. package/dist/button/button-styles.generated.d.ts +2 -0
  12. package/dist/button/button-styles.generated.d.ts.map +1 -0
  13. package/dist/button/button-styles.generated.js +4 -0
  14. package/dist/button/button-styles.generated.js.map +1 -0
  15. package/dist/button/index.d.ts +3 -0
  16. package/dist/button/index.d.ts.map +1 -0
  17. package/dist/button/index.js +2 -0
  18. package/dist/button/index.js.map +1 -0
  19. package/dist/heading/Heading.d.ts +30 -0
  20. package/dist/heading/Heading.d.ts.map +1 -0
  21. package/dist/heading/Heading.js +79 -0
  22. package/dist/heading/Heading.js.map +1 -0
  23. package/dist/heading/Heading.test.d.ts +2 -0
  24. package/dist/heading/Heading.test.d.ts.map +1 -0
  25. package/dist/heading/Heading.test.js +157 -0
  26. package/dist/heading/Heading.test.js.map +1 -0
  27. package/dist/heading/heading-styles.generated.d.ts +2 -0
  28. package/dist/heading/heading-styles.generated.d.ts.map +1 -0
  29. package/dist/heading/heading-styles.generated.js +4 -0
  30. package/dist/heading/heading-styles.generated.js.map +1 -0
  31. package/dist/heading/index.d.ts +3 -0
  32. package/dist/heading/index.d.ts.map +1 -0
  33. package/dist/heading/index.js +2 -0
  34. package/dist/heading/index.js.map +1 -0
  35. package/dist/icon/Icon.d.ts +31 -0
  36. package/dist/icon/Icon.d.ts.map +1 -0
  37. package/dist/icon/Icon.js +110 -0
  38. package/dist/icon/Icon.js.map +1 -0
  39. package/dist/icon/Icon.test.d.ts +2 -0
  40. package/dist/icon/Icon.test.d.ts.map +1 -0
  41. package/dist/icon/Icon.test.js +193 -0
  42. package/dist/icon/Icon.test.js.map +1 -0
  43. package/dist/icon/icon-paths.generated.d.ts +2 -0
  44. package/dist/icon/icon-paths.generated.d.ts.map +1 -0
  45. package/dist/icon/icon-paths.generated.js +56 -0
  46. package/dist/icon/icon-paths.generated.js.map +1 -0
  47. package/dist/icon/icon-styles.generated.d.ts +2 -0
  48. package/dist/icon/icon-styles.generated.d.ts.map +1 -0
  49. package/dist/icon/icon-styles.generated.js +4 -0
  50. package/dist/icon/icon-styles.generated.js.map +1 -0
  51. package/dist/icon/index.d.ts +3 -0
  52. package/dist/icon/index.d.ts.map +1 -0
  53. package/dist/icon/index.js +2 -0
  54. package/dist/icon/index.js.map +1 -0
  55. package/dist/index.d.ts +52 -0
  56. package/dist/index.d.ts.map +1 -0
  57. package/dist/index.js +71 -0
  58. package/dist/index.js.map +1 -0
  59. package/dist/link/Link.d.ts +52 -0
  60. package/dist/link/Link.d.ts.map +1 -0
  61. package/dist/link/Link.js +260 -0
  62. package/dist/link/Link.js.map +1 -0
  63. package/dist/link/Link.test.d.ts +2 -0
  64. package/dist/link/Link.test.d.ts.map +1 -0
  65. package/dist/link/Link.test.js +256 -0
  66. package/dist/link/Link.test.js.map +1 -0
  67. package/dist/link/index.d.ts +3 -0
  68. package/dist/link/index.d.ts.map +1 -0
  69. package/dist/link/index.js +2 -0
  70. package/dist/link/index.js.map +1 -0
  71. package/dist/link/link-styles.generated.d.ts +2 -0
  72. package/dist/link/link-styles.generated.d.ts.map +1 -0
  73. package/dist/link/link-styles.generated.js +4 -0
  74. package/dist/link/link-styles.generated.js.map +1 -0
  75. package/dist/ordered-list/OrderedList.d.ts +32 -0
  76. package/dist/ordered-list/OrderedList.d.ts.map +1 -0
  77. package/dist/ordered-list/OrderedList.js +72 -0
  78. package/dist/ordered-list/OrderedList.js.map +1 -0
  79. package/dist/ordered-list/OrderedList.test.d.ts +2 -0
  80. package/dist/ordered-list/OrderedList.test.d.ts.map +1 -0
  81. package/dist/ordered-list/OrderedList.test.js +82 -0
  82. package/dist/ordered-list/OrderedList.test.js.map +1 -0
  83. package/dist/ordered-list/index.d.ts +2 -0
  84. package/dist/ordered-list/index.d.ts.map +1 -0
  85. package/dist/ordered-list/index.js +2 -0
  86. package/dist/ordered-list/index.js.map +1 -0
  87. package/dist/ordered-list/ordered-list-styles.generated.d.ts +2 -0
  88. package/dist/ordered-list/ordered-list-styles.generated.d.ts.map +1 -0
  89. package/dist/ordered-list/ordered-list-styles.generated.js +4 -0
  90. package/dist/ordered-list/ordered-list-styles.generated.js.map +1 -0
  91. package/dist/paragraph/Paragraph.d.ts +26 -0
  92. package/dist/paragraph/Paragraph.d.ts.map +1 -0
  93. package/dist/paragraph/Paragraph.js +60 -0
  94. package/dist/paragraph/Paragraph.js.map +1 -0
  95. package/dist/paragraph/Paragraph.test.d.ts +2 -0
  96. package/dist/paragraph/Paragraph.test.d.ts.map +1 -0
  97. package/dist/paragraph/Paragraph.test.js +121 -0
  98. package/dist/paragraph/Paragraph.test.js.map +1 -0
  99. package/dist/paragraph/index.d.ts +3 -0
  100. package/dist/paragraph/index.d.ts.map +1 -0
  101. package/dist/paragraph/index.js +2 -0
  102. package/dist/paragraph/index.js.map +1 -0
  103. package/dist/paragraph/paragraph-styles.generated.d.ts +2 -0
  104. package/dist/paragraph/paragraph-styles.generated.d.ts.map +1 -0
  105. package/dist/paragraph/paragraph-styles.generated.js +4 -0
  106. package/dist/paragraph/paragraph-styles.generated.js.map +1 -0
  107. package/dist/unordered-list/UnorderedList.d.ts +22 -0
  108. package/dist/unordered-list/UnorderedList.d.ts.map +1 -0
  109. package/dist/unordered-list/UnorderedList.js +42 -0
  110. package/dist/unordered-list/UnorderedList.js.map +1 -0
  111. package/dist/unordered-list/UnorderedList.test.d.ts +2 -0
  112. package/dist/unordered-list/UnorderedList.test.d.ts.map +1 -0
  113. package/dist/unordered-list/UnorderedList.test.js +56 -0
  114. package/dist/unordered-list/UnorderedList.test.js.map +1 -0
  115. package/dist/unordered-list/index.d.ts +2 -0
  116. package/dist/unordered-list/index.d.ts.map +1 -0
  117. package/dist/unordered-list/index.js +2 -0
  118. package/dist/unordered-list/index.js.map +1 -0
  119. package/dist/unordered-list/unordered-list-styles.generated.d.ts +2 -0
  120. package/dist/unordered-list/unordered-list-styles.generated.d.ts.map +1 -0
  121. package/dist/unordered-list/unordered-list-styles.generated.js +4 -0
  122. package/dist/unordered-list/unordered-list-styles.generated.js.map +1 -0
  123. package/package.json +42 -0
  124. package/src/button/Button.test.ts +360 -0
  125. package/src/button/Button.ts +299 -0
  126. package/src/button/button-demo.html +477 -0
  127. package/src/button/button-styles.generated.ts +3 -0
  128. package/src/button/button.shadow.css +20 -0
  129. package/src/button/index.ts +2 -0
  130. package/src/heading/Heading.test.ts +186 -0
  131. package/src/heading/Heading.ts +104 -0
  132. package/src/heading/heading-styles.generated.ts +3 -0
  133. package/src/heading/heading.shadow.css +11 -0
  134. package/src/heading/index.ts +2 -0
  135. package/src/icon/Icon.test.ts +228 -0
  136. package/src/icon/Icon.ts +136 -0
  137. package/src/icon/icon-paths.generated.ts +55 -0
  138. package/src/icon/icon-styles.generated.ts +3 -0
  139. package/src/icon/icon.shadow.css +13 -0
  140. package/src/icon/index.ts +2 -0
  141. package/src/index.ts +83 -0
  142. package/src/link/Link.test.ts +309 -0
  143. package/src/link/Link.ts +284 -0
  144. package/src/link/index.ts +2 -0
  145. package/src/link/link-styles.generated.ts +3 -0
  146. package/src/link/link.shadow.css +15 -0
  147. package/src/ordered-list/OrderedList.test.ts +97 -0
  148. package/src/ordered-list/OrderedList.ts +84 -0
  149. package/src/ordered-list/index.ts +1 -0
  150. package/src/ordered-list/ordered-list-styles.generated.ts +3 -0
  151. package/src/ordered-list/ordered-list.shadow.css +11 -0
  152. package/src/paragraph/Paragraph.test.ts +143 -0
  153. package/src/paragraph/Paragraph.ts +77 -0
  154. package/src/paragraph/index.ts +2 -0
  155. package/src/paragraph/paragraph-styles.generated.ts +3 -0
  156. package/src/paragraph/paragraph.shadow.css +11 -0
  157. package/src/unordered-list/UnorderedList.test.ts +66 -0
  158. package/src/unordered-list/UnorderedList.ts +50 -0
  159. package/src/unordered-list/index.ts +1 -0
  160. package/src/unordered-list/unordered-list-styles.generated.ts +3 -0
  161. package/src/unordered-list/unordered-list.shadow.css +11 -0
package/src/button/button-demo.html ADDED
@@ -0,0 +1,477 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Button Web Component - Design System</title>
7
+
8
+ <!-- Design Tokens -->
9
+ <link
10
+ rel="stylesheet"
11
+ href="../../../design-tokens/dist/css/variables.css"
12
+ />
13
+
14
+ <!-- Core Styles -->
15
+ <link rel="stylesheet" href="../../../core/dist/core.css" />
16
+
17
+ <!-- Web Component -->
18
+ <script type="module">
19
+ import { defineButton } from './Button.js';
20
+ defineButton();
21
+ </script>
22
+
23
+ <style>
24
+ body {
25
+ font-family: var(--dsn-text-font-family-default);
26
+ padding: 2rem;
27
+ max-width: 1200px;
28
+ margin: 0 auto;
29
+ background-color: var(--dsn-color-neutral-bg-document);
30
+ color: var(--dsn-color-neutral-color-document);
31
+ }
32
+
33
+ .demo-section {
34
+ margin-bottom: 3rem;
35
+ padding: 2rem;
36
+ background: white;
37
+ border-radius: var(--dsn-border-radius-lg);
38
+ border: 1px solid var(--dsn-color-neutral-border-subtle);
39
+ }
40
+
41
+ .demo-section h2 {
42
+ margin-bottom: 1.5rem;
43
+ font-size: var(--dsn-text-font-size-xl);
44
+ color: var(--dsn-color-neutral-color-document);
45
+ }
46
+
47
+ .demo-section h3 {
48
+ margin-top: 2rem;
49
+ margin-bottom: 1rem;
50
+ font-size: var(--dsn-text-font-size-lg);
51
+ color: var(--dsn-color-neutral-color-default);
52
+ }
53
+
54
+ .demo-row {
55
+ display: flex;
56
+ flex-wrap: wrap;
57
+ gap: 1rem;
58
+ margin-bottom: 1.5rem;
59
+ }
60
+
61
+ .demo-label {
62
+ font-size: var(--dsn-text-font-size-sm);
63
+ color: var(--dsn-color-neutral-color-subtle);
64
+ margin-bottom: 0.5rem;
65
+ font-weight: var(--dsn-text-font-weight-bold);
66
+ }
67
+
68
+ .code-example {
69
+ background: var(--dsn-color-neutral-bg-subtle);
70
+ padding: 1rem;
71
+ border-radius: var(--dsn-border-radius-md);
72
+ font-family: var(--dsn-text-font-family-monospace);
73
+ font-size: var(--dsn-text-font-size-sm);
74
+ margin-top: 0.5rem;
75
+ overflow-x: auto;
76
+ }
77
+ </style>
78
+ </head>
79
+ <body>
80
+ <h1>Button Web Component Examples</h1>
81
+ <p>
82
+ The <code>&lt;dsn-button&gt;</code> web component provides a consistent
83
+ button API across frameworks. It uses the same design tokens and visual
84
+ styling as the HTML and React button components.
85
+ </p>
86
+
87
+ <!-- Variants -->
88
+ <div class="demo-section">
89
+ <h2>Button Variants</h2>
90
+
91
+ <div class="demo-label">Strong (Main actions)</div>
92
+ <div class="demo-row">
93
+ <dsn-button variant="strong">Save</dsn-button>
94
+ <dsn-button variant="strong">Submit</dsn-button>
95
+ <dsn-button variant="strong">Continue</dsn-button>
96
+ </div>
97
+ <div class="code-example">
98
+ &lt;dsn-button variant="strong"&gt;Save&lt;/dsn-button&gt;
99
+ </div>
100
+
101
+ <div class="demo-label">Default (Alternative actions)</div>
102
+ <div class="demo-row">
103
+ <dsn-button variant="default">Cancel</dsn-button>
104
+ <dsn-button variant="default">Back</dsn-button>
105
+ <dsn-button variant="default">Learn more</dsn-button>
106
+ </div>
107
+ <div class="code-example">
108
+ &lt;dsn-button variant="default"&gt;Cancel&lt;/dsn-button&gt;
109
+ </div>
110
+
111
+ <div class="demo-label">Subtle (Low emphasis)</div>
112
+ <div class="demo-row">
113
+ <dsn-button variant="subtle">Edit</dsn-button>
114
+ <dsn-button variant="subtle">Share</dsn-button>
115
+ <dsn-button variant="subtle">More</dsn-button>
116
+ </div>
117
+ <div class="code-example">
118
+ &lt;dsn-button variant="subtle"&gt;Edit&lt;/dsn-button&gt;
119
+ </div>
120
+
121
+ <div class="demo-label">Link (Text-style button)</div>
122
+ <div class="demo-row">
123
+ <dsn-button variant="link">Learn more</dsn-button>
124
+ <dsn-button variant="link">View details</dsn-button>
125
+ <dsn-button variant="link">Skip</dsn-button>
126
+ </div>
127
+ <div class="code-example">
128
+ &lt;dsn-button variant="link"&gt;Learn more&lt;/dsn-button&gt;
129
+ </div>
130
+
131
+ <h3>Negative Sentiment</h3>
132
+
133
+ <div class="demo-label">Strong Negative (Destructive actions)</div>
134
+ <div class="demo-row">
135
+ <dsn-button variant="strong-negative">Delete</dsn-button>
136
+ <dsn-button variant="strong-negative">Remove</dsn-button>
137
+ <dsn-button variant="strong-negative">Reset</dsn-button>
138
+ </div>
139
+ <div class="code-example">
140
+ &lt;dsn-button variant="strong-negative"&gt;Delete&lt;/dsn-button&gt;
141
+ </div>
142
+
143
+ <div class="demo-label">Default Negative</div>
144
+ <div class="demo-row">
145
+ <dsn-button variant="default-negative">Delete</dsn-button>
146
+ <dsn-button variant="default-negative">Remove</dsn-button>
147
+ <dsn-button variant="default-negative">Discard</dsn-button>
148
+ </div>
149
+
150
+ <div class="demo-label">Subtle Negative</div>
151
+ <div class="demo-row">
152
+ <dsn-button variant="subtle-negative">Delete</dsn-button>
153
+ <dsn-button variant="subtle-negative">Remove</dsn-button>
154
+ <dsn-button variant="subtle-negative">Discard</dsn-button>
155
+ </div>
156
+
157
+ <h3>Positive Sentiment</h3>
158
+
159
+ <div class="demo-label">Strong Positive (Confirmation actions)</div>
160
+ <div class="demo-row">
161
+ <dsn-button variant="strong-positive">Approve</dsn-button>
162
+ <dsn-button variant="strong-positive">Confirm</dsn-button>
163
+ <dsn-button variant="strong-positive">Accept</dsn-button>
164
+ </div>
165
+ <div class="code-example">
166
+ &lt;dsn-button variant="strong-positive"&gt;Approve&lt;/dsn-button&gt;
167
+ </div>
168
+
169
+ <div class="demo-label">Default Positive</div>
170
+ <div class="demo-row">
171
+ <dsn-button variant="default-positive">Approve</dsn-button>
172
+ <dsn-button variant="default-positive">Like</dsn-button>
173
+ <dsn-button variant="default-positive">Enable</dsn-button>
174
+ </div>
175
+
176
+ <div class="demo-label">Subtle Positive</div>
177
+ <div class="demo-row">
178
+ <dsn-button variant="subtle-positive">Like</dsn-button>
179
+ <dsn-button variant="subtle-positive">Upvote</dsn-button>
180
+ <dsn-button variant="subtle-positive">Star</dsn-button>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- Sizes -->
185
+ <div class="demo-section">
186
+ <h2>Button Sizes</h2>
187
+
188
+ <div class="demo-label">Small</div>
189
+ <div class="demo-row">
190
+ <dsn-button variant="strong" size="small">Small Strong</dsn-button>
191
+ <dsn-button variant="default" size="small">Small Default</dsn-button>
192
+ <dsn-button variant="strong-negative" size="small"
193
+ >Small Negative</dsn-button
194
+ >
195
+ </div>
196
+ <div class="code-example">
197
+ &lt;dsn-button variant="strong" size="small"&gt;Small
198
+ Strong&lt;/dsn-button&gt;
199
+ </div>
200
+
201
+ <div class="demo-label">Default (Medium)</div>
202
+ <div class="demo-row">
203
+ <dsn-button variant="strong" size="default">Default Strong</dsn-button>
204
+ <dsn-button variant="default" size="default"
205
+ >Default Default</dsn-button
206
+ >
207
+ <dsn-button variant="strong-negative" size="default"
208
+ >Default Negative</dsn-button
209
+ >
210
+ </div>
211
+ <div class="code-example">
212
+ &lt;dsn-button variant="strong" size="default"&gt;Default
213
+ Strong&lt;/dsn-button&gt;
214
+ </div>
215
+
216
+ <div class="demo-label">Large</div>
217
+ <div class="demo-row">
218
+ <dsn-button variant="strong" size="large">Large Strong</dsn-button>
219
+ <dsn-button variant="default" size="large">Large Default</dsn-button>
220
+ <dsn-button variant="strong-negative" size="large"
221
+ >Large Negative</dsn-button
222
+ >
223
+ </div>
224
+ <div class="code-example">
225
+ &lt;dsn-button variant="strong" size="large"&gt;Large
226
+ Strong&lt;/dsn-button&gt;
227
+ </div>
228
+ </div>
229
+
230
+ <!-- With Icons -->
231
+ <div class="demo-section">
232
+ <h2>Buttons with Icons</h2>
233
+
234
+ <div class="demo-label">Icon + Text</div>
235
+ <div class="demo-row">
236
+ <dsn-button variant="strong">
237
+ <svg
238
+ width="20"
239
+ height="20"
240
+ viewBox="0 0 24 24"
241
+ fill="none"
242
+ stroke="currentColor"
243
+ stroke-width="2"
244
+ stroke-linecap="round"
245
+ stroke-linejoin="round"
246
+ aria-hidden="true"
247
+ >
248
+ <path d="M12 5l0 14" />
249
+ <path d="M5 12l14 0" />
250
+ </svg>
251
+ Add item
252
+ </dsn-button>
253
+
254
+ <dsn-button variant="default">
255
+ <svg
256
+ width="20"
257
+ height="20"
258
+ viewBox="0 0 24 24"
259
+ fill="none"
260
+ stroke="currentColor"
261
+ stroke-width="2"
262
+ stroke-linecap="round"
263
+ stroke-linejoin="round"
264
+ aria-hidden="true"
265
+ >
266
+ <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
267
+ <path d="M7 11l5 5l5 -5" />
268
+ <path d="M12 4l0 12" />
269
+ </svg>
270
+ Download
271
+ </dsn-button>
272
+
273
+ <dsn-button variant="strong-negative">
274
+ <svg
275
+ width="20"
276
+ height="20"
277
+ viewBox="0 0 24 24"
278
+ fill="none"
279
+ stroke="currentColor"
280
+ stroke-width="2"
281
+ stroke-linecap="round"
282
+ stroke-linejoin="round"
283
+ aria-hidden="true"
284
+ >
285
+ <path d="M4 7l16 0" />
286
+ <path d="M10 11l0 6" />
287
+ <path d="M14 11l0 6" />
288
+ <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
289
+ <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
290
+ </svg>
291
+ Delete
292
+ </dsn-button>
293
+ </div>
294
+
295
+ <div class="demo-label">Icon Only</div>
296
+ <div class="demo-row">
297
+ <dsn-button variant="strong" icon-only aria-label="Add">
298
+ <svg
299
+ width="20"
300
+ height="20"
301
+ viewBox="0 0 24 24"
302
+ fill="none"
303
+ stroke="currentColor"
304
+ stroke-width="2"
305
+ stroke-linecap="round"
306
+ stroke-linejoin="round"
307
+ >
308
+ <path d="M12 5l0 14" />
309
+ <path d="M5 12l14 0" />
310
+ </svg>
311
+ </dsn-button>
312
+
313
+ <dsn-button variant="default" icon-only aria-label="Settings">
314
+ <svg
315
+ width="20"
316
+ height="20"
317
+ viewBox="0 0 24 24"
318
+ fill="none"
319
+ stroke="currentColor"
320
+ stroke-width="2"
321
+ stroke-linecap="round"
322
+ stroke-linejoin="round"
323
+ >
324
+ <path
325
+ d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
326
+ />
327
+ <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
328
+ </svg>
329
+ </dsn-button>
330
+
331
+ <dsn-button variant="subtle" icon-only aria-label="Close">
332
+ <svg
333
+ width="20"
334
+ height="20"
335
+ viewBox="0 0 24 24"
336
+ fill="none"
337
+ stroke="currentColor"
338
+ stroke-width="2"
339
+ stroke-linecap="round"
340
+ stroke-linejoin="round"
341
+ >
342
+ <path d="M18 6l-12 12" />
343
+ <path d="M6 6l12 12" />
344
+ </svg>
345
+ </dsn-button>
346
+
347
+ <dsn-button variant="strong-negative" icon-only aria-label="Delete">
348
+ <svg
349
+ width="20"
350
+ height="20"
351
+ viewBox="0 0 24 24"
352
+ fill="none"
353
+ stroke="currentColor"
354
+ stroke-width="2"
355
+ stroke-linecap="round"
356
+ stroke-linejoin="round"
357
+ >
358
+ <path d="M4 7l16 0" />
359
+ <path d="M10 11l0 6" />
360
+ <path d="M14 11l0 6" />
361
+ <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
362
+ <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
363
+ </svg>
364
+ </dsn-button>
365
+ </div>
366
+ <div class="code-example">
367
+ &lt;dsn-button variant="strong" icon-only
368
+ aria-label="Add"&gt;<br />&nbsp;&nbsp;&lt;svg ...&gt;...&lt;/svg&gt;<br />&lt;/dsn-button&gt;
369
+ </div>
370
+ </div>
371
+
372
+ <!-- States -->
373
+ <div class="demo-section">
374
+ <h2>Button States</h2>
375
+
376
+ <div class="demo-label">Disabled</div>
377
+ <div class="demo-row">
378
+ <dsn-button variant="strong" disabled>Disabled Strong</dsn-button>
379
+ <dsn-button variant="default" disabled>Disabled Default</dsn-button>
380
+ <dsn-button variant="strong-negative" disabled
381
+ >Disabled Negative</dsn-button
382
+ >
383
+ </div>
384
+ <div class="code-example">
385
+ &lt;dsn-button variant="strong" disabled&gt;Disabled
386
+ Strong&lt;/dsn-button&gt;
387
+ </div>
388
+
389
+ <div class="demo-label">Loading</div>
390
+ <div class="demo-row">
391
+ <dsn-button variant="strong" loading>Saving...</dsn-button>
392
+ <dsn-button variant="default" loading>Loading...</dsn-button>
393
+ </div>
394
+ <div class="code-example">
395
+ &lt;dsn-button variant="strong" loading&gt;Saving...&lt;/dsn-button&gt;
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Full Width -->
400
+ <div class="demo-section">
401
+ <h2>Full Width Buttons</h2>
402
+
403
+ <dsn-button variant="strong" full-width style="margin-bottom: 0.5rem">
404
+ Full Width Strong
405
+ </dsn-button>
406
+ <dsn-button variant="default" full-width>Full Width Default</dsn-button>
407
+ <div class="code-example">
408
+ &lt;dsn-button variant="strong" full-width&gt;Full Width
409
+ Strong&lt;/dsn-button&gt;
410
+ </div>
411
+ </div>
412
+
413
+ <!-- API Comparison -->
414
+ <div class="demo-section">
415
+ <h2>API Comparison</h2>
416
+ <p>
417
+ The <code>&lt;dsn-button&gt;</code> web component uses the same naming
418
+ conventions as the React component:
419
+ </p>
420
+ <table
421
+ style="
422
+ width: 100%;
423
+ border-collapse: collapse;
424
+ margin-top: 1rem;
425
+ font-size: var(--dsn-text-font-size-sm);
426
+ "
427
+ >
428
+ <thead>
429
+ <tr style="background: var(--dsn-color-neutral-bg-subtle)">
430
+ <th style="padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--dsn-color-neutral-border-default)">Feature</th>
431
+ <th style="padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--dsn-color-neutral-border-default)">HTML (CSS classes)</th>
432
+ <th style="padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--dsn-color-neutral-border-default)">React (props)</th>
433
+ <th style="padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--dsn-color-neutral-border-default)">Web Component (attributes)</th>
434
+ </tr>
435
+ </thead>
436
+ <tbody>
437
+ <tr>
438
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)">Variant</td>
439
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>dsn-button--strong</code></td>
440
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>variant="strong"</code></td>
441
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>variant="strong"</code></td>
442
+ </tr>
443
+ <tr>
444
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)">Size</td>
445
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>dsn-button--size-small</code></td>
446
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>size="small"</code></td>
447
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>size="small"</code></td>
448
+ </tr>
449
+ <tr>
450
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)">Loading</td>
451
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>dsn-button--loading</code></td>
452
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>loading</code></td>
453
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>loading</code></td>
454
+ </tr>
455
+ <tr>
456
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)">Full width</td>
457
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>dsn-button--full-width</code></td>
458
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>fullWidth</code></td>
459
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>full-width</code></td>
460
+ </tr>
461
+ <tr>
462
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)">Icon only</td>
463
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>dsn-button--icon-only</code></td>
464
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>iconOnly</code></td>
465
+ <td style="padding: 0.75rem; border-bottom: 1px solid var(--dsn-color-neutral-border-subtle)"><code>icon-only</code></td>
466
+ </tr>
467
+ <tr>
468
+ <td style="padding: 0.75rem">Disabled</td>
469
+ <td style="padding: 0.75rem"><code>disabled</code></td>
470
+ <td style="padding: 0.75rem"><code>disabled</code></td>
471
+ <td style="padding: 0.75rem"><code>disabled</code></td>
472
+ </tr>
473
+ </tbody>
474
+ </table>
475
+ </div>
476
+ </body>
477
+ </html>
package/src/button/button-styles.generated.ts ADDED
@@ -0,0 +1,3 @@
1
+ // Auto-generated — do not edit manually.
2
+ // Source: button.shadow.css + components-html source
3
+ export const buttonStyles = "/**\n * Shadow DOM wrapper styles for the Button Web Component.\n * The core button styles are imported from the shared HTML/CSS source.\n */\n\n:host {\n display: inline-block;\n}\n\n:host([full-width]) {\n display: block;\n width: 100%;\n}\n\n::slotted(*) {\n pointer-events: none;\n}\n\n/* Shared button styles - single source of truth */\n/**\n * Button Component\n * Uses component tokens for consistent styling\n */\n\n.dsn-button {\n /* Reset */\n display: inline-flex;\n align-self: flex-start;\n align-items: center;\n justify-content: center;\n position: relative; /* Ankerpunt voor DotBadge */\n\n /* Typography */\n font-family: var(--dsn-button-font-family);\n font-weight: var(--dsn-button-font-weight);\n line-height: var(--dsn-button-line-height);\n text-decoration: none;\n\n /* Borders */\n border: var(--dsn-button-border-width) solid transparent;\n border-radius: var(--dsn-button-border-radius);\n\n /* Interaction */\n cursor: pointer;\n user-select: none;\n transition:\n background-color var(--dsn-transition-duration-normal)\n var(--dsn-transition-easing-default),\n color var(--dsn-transition-duration-normal)\n var(--dsn-transition-easing-default),\n border-color var(--dsn-transition-duration-normal)\n var(--dsn-transition-easing-default);\n\n /* Accessibility - WCAG pointer target */\n min-block-size: var(--dsn-button-min-block-size);\n min-inline-size: var(--dsn-button-min-inline-size);\n}\n\n/* =============================================================================\n Size Variants\n ============================================================================= */\n\n.dsn-button--size-small {\n font-size: var(--dsn-button-size-small-font-size);\n padding-block: var(--dsn-button-size-small-padding-block);\n padding-inline: var(--dsn-button-size-small-padding-inline);\n gap: var(--dsn-button-size-small-gap);\n min-block-size: var(--dsn-button-size-small-min-block-size);\n}\n\n.dsn-button--size-default {\n font-size: var(--dsn-button-size-default-font-size);\n padding-block: var(--dsn-button-size-default-padding-block);\n padding-inline: var(--dsn-button-size-default-padding-inline);\n gap: var(--dsn-button-size-default-gap);\n}\n\n.dsn-button--size-large {\n font-size: var(--dsn-button-size-large-font-size);\n padding-block: var(--dsn-button-size-large-padding-block);\n padding-inline: var(--dsn-button-size-large-padding-inline);\n gap: var(--dsn-button-size-large-gap);\n}\n\n/* Icon sizing per button size */\n.dsn-button--size-small > .dsn-icon {\n width: var(--dsn-button-size-small-icon-size);\n height: var(--dsn-button-size-small-icon-size);\n}\n\n.dsn-button--size-default > .dsn-icon {\n width: var(--dsn-button-size-default-icon-size);\n height: var(--dsn-button-size-default-icon-size);\n}\n\n.dsn-button--size-large > .dsn-icon {\n width: var(--dsn-button-size-large-icon-size);\n height: var(--dsn-button-size-large-icon-size);\n}\n\n/* Icon Only Button */\n.dsn-button--icon-only {\n padding-inline: var(--dsn-button-size-default-icon-only-padding);\n}\n\n.dsn-button--icon-only.dsn-button--size-small {\n padding-inline: var(--dsn-button-size-small-icon-only-padding);\n}\n\n.dsn-button--icon-only.dsn-button--size-large {\n padding-inline: var(--dsn-button-size-large-icon-only-padding);\n}\n\n/* Icon Only — hide text label visually, keep accessible for screen readers */\n.dsn-button--icon-only .dsn-button__label {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n/* =============================================================================\n Focus State\n ============================================================================= */\n\n.dsn-button:focus-visible {\n background-color: var(--dsn-focus-background-color);\n color: var(--dsn-focus-color);\n border-color: var(--dsn-focus-background-color);\n outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)\n var(--dsn-focus-outline-color);\n outline-offset: var(--dsn-focus-outline-offset);\n box-shadow: 0 0 0\n calc(var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width))\n var(--dsn-focus-inverse-outline-color);\n}\n\n/* =============================================================================\n Color Variants\n ============================================================================= */\n\n/* Variant: Strong (main CTA) */\n.dsn-button--strong {\n background-color: var(--dsn-button-strong-background-color);\n color: var(--dsn-button-strong-color);\n border-color: var(--dsn-button-strong-border-color);\n}\n\n.dsn-button--strong:hover:not(:disabled) {\n background-color: var(--dsn-button-strong-hover-background-color);\n color: var(--dsn-button-strong-hover-color);\n border-color: var(--dsn-button-strong-hover-border-color);\n}\n\n.dsn-button--strong:active:not(:disabled) {\n background-color: var(--dsn-button-strong-active-background-color);\n color: var(--dsn-button-strong-active-color);\n border-color: var(--dsn-button-strong-active-border-color);\n}\n\n/* Variant: Default (alternative actions) */\n.dsn-button--default {\n background-color: var(--dsn-button-default-background-color);\n color: var(--dsn-button-default-color);\n border-color: var(--dsn-button-default-border-color);\n}\n\n.dsn-button--default:hover:not(:disabled) {\n background-color: var(--dsn-button-default-hover-background-color);\n color: var(--dsn-button-default-hover-color);\n border-color: var(--dsn-button-default-hover-border-color);\n}\n\n.dsn-button--default:active:not(:disabled) {\n background-color: var(--dsn-button-default-active-background-color);\n color: var(--dsn-button-default-active-color);\n border-color: var(--dsn-button-default-active-border-color);\n}\n\n/* Variant: Subtle (low emphasis) */\n.dsn-button--subtle {\n background-color: var(--dsn-button-subtle-background-color);\n color: var(--dsn-button-subtle-color);\n border-color: var(--dsn-button-subtle-border-color);\n}\n\n.dsn-button--subtle:hover:not(:disabled) {\n background-color: var(--dsn-button-subtle-hover-background-color);\n color: var(--dsn-button-subtle-hover-color);\n border-color: var(--dsn-button-subtle-hover-border-color);\n}\n\n.dsn-button--subtle:active:not(:disabled) {\n background-color: var(--dsn-button-subtle-active-background-color);\n color: var(--dsn-button-subtle-active-color);\n border-color: var(--dsn-button-subtle-active-border-color);\n}\n\n/* =============================================================================\n Sentiment Variants: Negative\n ============================================================================= */\n\n.dsn-button--strong-negative {\n background-color: var(--dsn-button-strong-negative-background-color);\n color: var(--dsn-button-strong-negative-color);\n border-color: var(--dsn-button-strong-negative-border-color);\n}\n\n.dsn-button--strong-negative:hover:not(:disabled) {\n background-color: var(--dsn-button-strong-negative-hover-background-color);\n color: var(--dsn-button-strong-negative-hover-color);\n border-color: var(--dsn-button-strong-negative-hover-border-color);\n}\n\n.dsn-button--strong-negative:active:not(:disabled) {\n background-color: var(--dsn-button-strong-negative-active-background-color);\n color: var(--dsn-button-strong-negative-active-color);\n border-color: var(--dsn-button-strong-negative-active-border-color);\n}\n\n.dsn-button--default-negative {\n background-color: var(--dsn-button-default-negative-background-color);\n color: var(--dsn-button-default-negative-color);\n border-color: var(--dsn-button-default-negative-border-color);\n}\n\n.dsn-button--default-negative:hover:not(:disabled) {\n background-color: var(--dsn-button-default-negative-hover-background-color);\n color: var(--dsn-button-default-negative-hover-color);\n border-color: var(--dsn-button-default-negative-hover-border-color);\n}\n\n.dsn-button--default-negative:active:not(:disabled) {\n background-color: var(--dsn-button-default-negative-active-background-color);\n color: var(--dsn-button-default-negative-active-color);\n border-color: var(--dsn-button-default-negative-active-border-color);\n}\n\n.dsn-button--subtle-negative {\n background-color: var(--dsn-button-subtle-negative-background-color);\n color: var(--dsn-button-subtle-negative-color);\n border-color: var(--dsn-button-subtle-negative-border-color);\n}\n\n.dsn-button--subtle-negative:hover:not(:disabled) {\n background-color: var(--dsn-button-subtle-negative-hover-background-color);\n color: var(--dsn-button-subtle-negative-hover-color);\n border-color: var(--dsn-button-subtle-negative-hover-border-color);\n}\n\n.dsn-button--subtle-negative:active:not(:disabled) {\n background-color: var(--dsn-button-subtle-negative-active-background-color);\n color: var(--dsn-button-subtle-negative-active-color);\n border-color: var(--dsn-button-subtle-negative-active-border-color);\n}\n\n/* =============================================================================\n Sentiment Variants: Positive\n ============================================================================= */\n\n.dsn-button--strong-positive {\n background-color: var(--dsn-button-strong-positive-background-color);\n color: var(--dsn-button-strong-positive-color);\n border-color: var(--dsn-button-strong-positive-border-color);\n}\n\n.dsn-button--strong-positive:hover:not(:disabled) {\n background-color: var(--dsn-button-strong-positive-hover-background-color);\n color: var(--dsn-button-strong-positive-hover-color);\n border-color: var(--dsn-button-strong-positive-hover-border-color);\n}\n\n.dsn-button--strong-positive:active:not(:disabled) {\n background-color: var(--dsn-button-strong-positive-active-background-color);\n color: var(--dsn-button-strong-positive-active-color);\n border-color: var(--dsn-button-strong-positive-active-border-color);\n}\n\n.dsn-button--default-positive {\n background-color: var(--dsn-button-default-positive-background-color);\n color: var(--dsn-button-default-positive-color);\n border-color: var(--dsn-button-default-positive-border-color);\n}\n\n.dsn-button--default-positive:hover:not(:disabled) {\n background-color: var(--dsn-button-default-positive-hover-background-color);\n color: var(--dsn-button-default-positive-hover-color);\n border-color: var(--dsn-button-default-positive-hover-border-color);\n}\n\n.dsn-button--default-positive:active:not(:disabled) {\n background-color: var(--dsn-button-default-positive-active-background-color);\n color: var(--dsn-button-default-positive-active-color);\n border-color: var(--dsn-button-default-positive-active-border-color);\n}\n\n.dsn-button--subtle-positive {\n background-color: var(--dsn-button-subtle-positive-background-color);\n color: var(--dsn-button-subtle-positive-color);\n border-color: var(--dsn-button-subtle-positive-border-color);\n}\n\n.dsn-button--subtle-positive:hover:not(:disabled) {\n background-color: var(--dsn-button-subtle-positive-hover-background-color);\n color: var(--dsn-button-subtle-positive-hover-color);\n border-color: var(--dsn-button-subtle-positive-hover-border-color);\n}\n\n.dsn-button--subtle-positive:active:not(:disabled) {\n background-color: var(--dsn-button-subtle-positive-active-background-color);\n color: var(--dsn-button-subtle-positive-active-color);\n border-color: var(--dsn-button-subtle-positive-active-border-color);\n}\n\n/* =============================================================================\n States\n ============================================================================= */\n\n/* Disabled State */\n.dsn-button:disabled {\n background-color: var(--dsn-button-disabled-background-color);\n color: var(--dsn-button-disabled-color);\n border-color: var(--dsn-button-disabled-border-color);\n cursor: not-allowed;\n}\n\n/* Loading State */\n.dsn-button--loading {\n pointer-events: none;\n}\n\n.dsn-button--loading > .dsn-button__loader {\n animation: dsn-button-spin 0.8s linear infinite;\n}\n\n@keyframes dsn-button-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Full Width */\n.dsn-button--full-width {\n width: 100%;\n}\n\n";
package/src/button/button.shadow.css ADDED
@@ -0,0 +1,20 @@
1
+ /**
2
+ * Shadow DOM wrapper styles for the Button Web Component.
3
+ * The core button styles are imported from the shared HTML/CSS source.
4
+ */
5
+
6
+ :host {
7
+ display: inline-block;
8
+ }
9
+
10
+ :host([full-width]) {
11
+ display: block;
12
+ width: 100%;
13
+ }
14
+
15
+ ::slotted(*) {
16
+ pointer-events: none;
17
+ }
18
+
19
+ /* Shared button styles - single source of truth */
20
+ @import '../../../components-html/src/button/button.css';
package/src/button/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { DsnButton, defineButton } from './Button';
2
+ export type { ButtonVariant, ButtonSize } from './Button';