@duskmoon-dev/core 1.18.3 → 1.18.5

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 (15) hide show
  1. package/README.md +1 -1
  2. package/dist/components/badge.css +29 -0
  3. package/dist/components/button.css +19 -0
  4. package/dist/components/index.css +92 -2
  5. package/dist/components/table.css +44 -2
  6. package/dist/esm/components/badge.js +29 -0
  7. package/dist/esm/components/button.js +19 -0
  8. package/dist/esm/components/table.js +44 -2
  9. package/dist/index.css +92 -2
  10. package/dist/index.min.css +1 -1
  11. package/dist/standalone/duskmoonui-themes.css +1 -1
  12. package/dist/standalone/duskmoonui.css +94 -4
  13. package/dist/standalone/duskmoonui.js +553 -7
  14. package/dist/standalone/duskmoonui.mjs +549 -3
  15. package/package.json +11 -6
package/README.md CHANGED
@@ -442,4 +442,4 @@ See [specs/004-oklch-color-system/quickstart.md](./specs/004-oklch-color-system/
442
442
 
443
443
  MIT
444
444
 
445
- <!-- release 32923541350 -->
445
+ <!-- release 33538689051 -->
package/dist/components/badge.css CHANGED
@@ -71,112 +71,141 @@
71
71
  }
72
72
 
73
73
  /* Outlined Variants */
74
+ .badge-outlined,
75
+ .badge-outlined-secondary,
76
+ .badge-outlined-tertiary,
74
77
  .badge-outline {
75
78
  background-color: transparent;
76
79
  border: 1px solid currentColor;
77
80
  }
78
81
 
82
+ .badge-outlined,
83
+ .badge-outlined.badge-primary,
79
84
  .badge-outline.badge-primary {
80
85
  color: var(--color-primary);
81
86
  border-color: var(--color-primary);
82
87
  }
83
88
 
89
+ .badge-outlined.badge-secondary,
90
+ .badge-outlined-secondary,
84
91
  .badge-outline.badge-secondary {
85
92
  color: var(--color-secondary);
86
93
  border-color: var(--color-secondary);
87
94
  }
88
95
 
96
+ .badge-outlined.badge-tertiary,
97
+ .badge-outlined-tertiary,
89
98
  .badge-outline.badge-tertiary {
90
99
  color: var(--color-tertiary);
91
100
  border-color: var(--color-tertiary);
92
101
  }
93
102
 
103
+ .badge-outlined.badge-accent,
94
104
  .badge-outline.badge-accent {
95
105
  color: var(--color-accent);
96
106
  border-color: var(--color-accent);
97
107
  }
98
108
 
109
+ .badge-outlined.badge-neutral,
99
110
  .badge-outline.badge-neutral {
100
111
  color: var(--color-neutral);
101
112
  border-color: var(--color-neutral);
102
113
  }
103
114
 
115
+ .badge-outlined.badge-base,
104
116
  .badge-outline.badge-base {
105
117
  color: var(--color-base-content);
106
118
  border-color: var(--color-base-content);
107
119
  }
108
120
 
121
+ .badge-outlined.badge-info,
109
122
  .badge-outline.badge-info {
110
123
  color: var(--color-info);
111
124
  border-color: var(--color-info);
112
125
  }
113
126
 
127
+ .badge-outlined.badge-success,
114
128
  .badge-outline.badge-success {
115
129
  color: var(--color-success);
116
130
  border-color: var(--color-success);
117
131
  }
118
132
 
133
+ .badge-outlined.badge-warning,
119
134
  .badge-outline.badge-warning {
120
135
  color: var(--color-warning);
121
136
  border-color: var(--color-warning);
122
137
  }
123
138
 
139
+ .badge-outlined.badge-error,
124
140
  .badge-outline.badge-error {
125
141
  color: var(--color-error);
126
142
  border-color: var(--color-error);
127
143
  }
128
144
 
129
145
  /* Soft/Tonal Variants */
146
+ .badge-tonal,
130
147
  .badge-soft {
131
148
  background-color: var(--color-primary-container);
132
149
  color: var(--color-on-primary-container);
133
150
  }
134
151
 
152
+ .badge-tonal.badge-primary,
135
153
  .badge-soft.badge-primary {
136
154
  background-color: var(--color-primary-container);
137
155
  color: var(--color-on-primary-container);
138
156
  }
139
157
 
158
+ .badge-tonal.badge-secondary,
159
+ .badge-tonal-secondary,
140
160
  .badge-soft.badge-secondary {
141
161
  background-color: var(--color-secondary-container);
142
162
  color: var(--color-on-secondary-container);
143
163
  }
144
164
 
165
+ .badge-tonal.badge-tertiary,
166
+ .badge-tonal-tertiary,
145
167
  .badge-soft.badge-tertiary {
146
168
  background-color: var(--color-tertiary-container);
147
169
  color: var(--color-on-tertiary-container);
148
170
  }
149
171
 
172
+ .badge-tonal.badge-accent,
150
173
  .badge-soft.badge-accent {
151
174
  background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
152
175
  color: var(--color-on-surface);
153
176
  }
154
177
 
178
+ .badge-tonal.badge-neutral,
155
179
  .badge-soft.badge-neutral {
156
180
  background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
157
181
  color: var(--color-on-surface);
158
182
  }
159
183
 
184
+ .badge-tonal.badge-base,
160
185
  .badge-soft.badge-base {
161
186
  background-color: var(--color-base-200);
162
187
  color: var(--color-base-content);
163
188
  }
164
189
 
190
+ .badge-tonal.badge-info,
165
191
  .badge-soft.badge-info {
166
192
  background-color: var(--color-info-container);
167
193
  color: var(--color-on-info-container);
168
194
  }
169
195
 
196
+ .badge-tonal.badge-success,
170
197
  .badge-soft.badge-success {
171
198
  background-color: var(--color-success-container);
172
199
  color: var(--color-on-success-container);
173
200
  }
174
201
 
202
+ .badge-tonal.badge-warning,
175
203
  .badge-soft.badge-warning {
176
204
  background-color: var(--color-warning-container);
177
205
  color: var(--color-on-warning-container);
178
206
  }
179
207
 
208
+ .badge-tonal.badge-error,
180
209
  .badge-soft.badge-error {
181
210
  background-color: var(--color-error-container);
182
211
  color: var(--color-on-error-container);
package/dist/components/button.css CHANGED
@@ -625,6 +625,25 @@
625
625
  }
626
626
 
627
627
  /* Icon Button */
628
+ .btn-icon {
629
+ padding: 0.75rem;
630
+ width: 2.5rem;
631
+ height: 2.5rem;
632
+ border-radius: var(--radius-full);
633
+ }
634
+
635
+ .btn-icon-sm {
636
+ padding: 0.5rem;
637
+ width: 2rem;
638
+ height: 2rem;
639
+ }
640
+
641
+ .btn-icon-lg {
642
+ padding: 1rem;
643
+ width: 3rem;
644
+ height: 3rem;
645
+ }
646
+
628
647
  .btn-circle {
629
648
  --btn-p: 0.625rem;
630
649
  --btn-py: 0.625rem;
package/dist/components/index.css CHANGED
@@ -676,6 +676,25 @@
676
676
  }
677
677
 
678
678
  /* Icon Button */
679
+ .btn-icon {
680
+ padding: 0.75rem;
681
+ width: 2.5rem;
682
+ height: 2.5rem;
683
+ border-radius: var(--radius-full);
684
+ }
685
+
686
+ .btn-icon-sm {
687
+ padding: 0.5rem;
688
+ width: 2rem;
689
+ height: 2rem;
690
+ }
691
+
692
+ .btn-icon-lg {
693
+ padding: 1rem;
694
+ width: 3rem;
695
+ height: 3rem;
696
+ }
697
+
679
698
  .btn-circle {
680
699
  --btn-p: 0.625rem;
681
700
  --btn-py: 0.625rem;
@@ -3240,112 +3259,141 @@
3240
3259
  }
3241
3260
 
3242
3261
  /* Outlined Variants */
3262
+ .badge-outlined,
3263
+ .badge-outlined-secondary,
3264
+ .badge-outlined-tertiary,
3243
3265
  .badge-outline {
3244
3266
  background-color: transparent;
3245
3267
  border: 1px solid currentColor;
3246
3268
  }
3247
3269
 
3270
+ .badge-outlined,
3271
+ .badge-outlined.badge-primary,
3248
3272
  .badge-outline.badge-primary {
3249
3273
  color: var(--color-primary);
3250
3274
  border-color: var(--color-primary);
3251
3275
  }
3252
3276
 
3277
+ .badge-outlined.badge-secondary,
3278
+ .badge-outlined-secondary,
3253
3279
  .badge-outline.badge-secondary {
3254
3280
  color: var(--color-secondary);
3255
3281
  border-color: var(--color-secondary);
3256
3282
  }
3257
3283
 
3284
+ .badge-outlined.badge-tertiary,
3285
+ .badge-outlined-tertiary,
3258
3286
  .badge-outline.badge-tertiary {
3259
3287
  color: var(--color-tertiary);
3260
3288
  border-color: var(--color-tertiary);
3261
3289
  }
3262
3290
 
3291
+ .badge-outlined.badge-accent,
3263
3292
  .badge-outline.badge-accent {
3264
3293
  color: var(--color-accent);
3265
3294
  border-color: var(--color-accent);
3266
3295
  }
3267
3296
 
3297
+ .badge-outlined.badge-neutral,
3268
3298
  .badge-outline.badge-neutral {
3269
3299
  color: var(--color-neutral);
3270
3300
  border-color: var(--color-neutral);
3271
3301
  }
3272
3302
 
3303
+ .badge-outlined.badge-base,
3273
3304
  .badge-outline.badge-base {
3274
3305
  color: var(--color-base-content);
3275
3306
  border-color: var(--color-base-content);
3276
3307
  }
3277
3308
 
3309
+ .badge-outlined.badge-info,
3278
3310
  .badge-outline.badge-info {
3279
3311
  color: var(--color-info);
3280
3312
  border-color: var(--color-info);
3281
3313
  }
3282
3314
 
3315
+ .badge-outlined.badge-success,
3283
3316
  .badge-outline.badge-success {
3284
3317
  color: var(--color-success);
3285
3318
  border-color: var(--color-success);
3286
3319
  }
3287
3320
 
3321
+ .badge-outlined.badge-warning,
3288
3322
  .badge-outline.badge-warning {
3289
3323
  color: var(--color-warning);
3290
3324
  border-color: var(--color-warning);
3291
3325
  }
3292
3326
 
3327
+ .badge-outlined.badge-error,
3293
3328
  .badge-outline.badge-error {
3294
3329
  color: var(--color-error);
3295
3330
  border-color: var(--color-error);
3296
3331
  }
3297
3332
 
3298
3333
  /* Soft/Tonal Variants */
3334
+ .badge-tonal,
3299
3335
  .badge-soft {
3300
3336
  background-color: var(--color-primary-container);
3301
3337
  color: var(--color-on-primary-container);
3302
3338
  }
3303
3339
 
3340
+ .badge-tonal.badge-primary,
3304
3341
  .badge-soft.badge-primary {
3305
3342
  background-color: var(--color-primary-container);
3306
3343
  color: var(--color-on-primary-container);
3307
3344
  }
3308
3345
 
3346
+ .badge-tonal.badge-secondary,
3347
+ .badge-tonal-secondary,
3309
3348
  .badge-soft.badge-secondary {
3310
3349
  background-color: var(--color-secondary-container);
3311
3350
  color: var(--color-on-secondary-container);
3312
3351
  }
3313
3352
 
3353
+ .badge-tonal.badge-tertiary,
3354
+ .badge-tonal-tertiary,
3314
3355
  .badge-soft.badge-tertiary {
3315
3356
  background-color: var(--color-tertiary-container);
3316
3357
  color: var(--color-on-tertiary-container);
3317
3358
  }
3318
3359
 
3360
+ .badge-tonal.badge-accent,
3319
3361
  .badge-soft.badge-accent {
3320
3362
  background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
3321
3363
  color: var(--color-on-surface);
3322
3364
  }
3323
3365
 
3366
+ .badge-tonal.badge-neutral,
3324
3367
  .badge-soft.badge-neutral {
3325
3368
  background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
3326
3369
  color: var(--color-on-surface);
3327
3370
  }
3328
3371
 
3372
+ .badge-tonal.badge-base,
3329
3373
  .badge-soft.badge-base {
3330
3374
  background-color: var(--color-base-200);
3331
3375
  color: var(--color-base-content);
3332
3376
  }
3333
3377
 
3378
+ .badge-tonal.badge-info,
3334
3379
  .badge-soft.badge-info {
3335
3380
  background-color: var(--color-info-container);
3336
3381
  color: var(--color-on-info-container);
3337
3382
  }
3338
3383
 
3384
+ .badge-tonal.badge-success,
3339
3385
  .badge-soft.badge-success {
3340
3386
  background-color: var(--color-success-container);
3341
3387
  color: var(--color-on-success-container);
3342
3388
  }
3343
3389
 
3390
+ .badge-tonal.badge-warning,
3344
3391
  .badge-soft.badge-warning {
3345
3392
  background-color: var(--color-warning-container);
3346
3393
  color: var(--color-on-warning-container);
3347
3394
  }
3348
3395
 
3396
+ .badge-tonal.badge-error,
3349
3397
  .badge-soft.badge-error {
3350
3398
  background-color: var(--color-error-container);
3351
3399
  color: var(--color-on-error-container);
@@ -4840,6 +4888,11 @@
4840
4888
  color: var(--color-on-surface);
4841
4889
  }
4842
4890
 
4891
+ /* Surface Variant */
4892
+ .table-surface {
4893
+ background-color: var(--color-surface);
4894
+ }
4895
+
4843
4896
  /* Table Head */
4844
4897
  .table thead,
4845
4898
  .table-header {
@@ -4887,7 +4940,9 @@
4887
4940
 
4888
4941
  /* Zebra Striping */
4889
4942
  .table-zebra tbody tr:nth-child(even),
4890
- .table-zebra .table-row:nth-child(even) {
4943
+ .table-zebra .table-row:nth-child(even),
4944
+ .table-striped tbody tr:nth-child(even),
4945
+ .table-striped .table-row:nth-child(even) {
4891
4946
  background-color: var(--color-surface-container-low);
4892
4947
  }
4893
4948
 
@@ -4909,6 +4964,16 @@
4909
4964
  border: 1px solid var(--color-outline-variant);
4910
4965
  }
4911
4966
 
4967
+ /* Borderless Table */
4968
+ .table-borderless,
4969
+ .table-borderless th,
4970
+ .table-borderless td,
4971
+ .table-borderless tfoot td,
4972
+ .table-borderless .table-header-cell,
4973
+ .table-borderless .table-cell {
4974
+ border: none;
4975
+ }
4976
+
4912
4977
  /* Compact Table */
4913
4978
  .table-compact th,
4914
4979
  .table-compact td {
@@ -4927,6 +4992,16 @@
4927
4992
  table-layout: fixed;
4928
4993
  }
4929
4994
 
4995
+ /* Sticky Header */
4996
+ .table-sticky thead,
4997
+ .table-sticky .table-header {
4998
+ position: sticky;
4999
+ top: 0;
5000
+ z-index: 10;
5001
+ background-color: var(--color-surface-container);
5002
+ box-shadow: var(--shadow-xs);
5003
+ }
5004
+
4930
5005
  /* Sortable Header */
4931
5006
  .table-sortable th {
4932
5007
  cursor: pointer;
@@ -4947,9 +5022,24 @@
4947
5022
  opacity: 0.7;
4948
5023
  }
4949
5024
 
5025
+ /* Selectable Rows */
5026
+ .table-selectable tbody tr,
5027
+ .table-selectable .table-row {
5028
+ cursor: pointer;
5029
+ }
5030
+
5031
+ .table-selectable tbody tr:hover,
5032
+ .table-selectable .table-row:hover {
5033
+ background-color: color-mix(in oklch, var(--color-on-surface) 8%, transparent);
5034
+ }
5035
+
4950
5036
  /* Selected Row */
4951
5037
  .table-row-selected,
4952
- .table tr.selected {
5038
+ .table tr.selected,
5039
+ .table-selectable tbody tr.table-row-selected,
5040
+ .table-selectable .table-row.table-row-selected,
5041
+ .table-selectable tbody tr.selected,
5042
+ .table-selectable .table-row.selected {
4953
5043
  background-color: var(--color-primary-container);
4954
5044
  color: var(--color-on-primary-container);
4955
5045
  }
package/dist/components/table.css CHANGED
@@ -13,6 +13,11 @@
13
13
  color: var(--color-on-surface);
14
14
  }
15
15
 
16
+ /* Surface Variant */
17
+ .table-surface {
18
+ background-color: var(--color-surface);
19
+ }
20
+
16
21
  /* Table Head */
17
22
  .table thead,
18
23
  .table-header {
@@ -60,7 +65,9 @@
60
65
 
61
66
  /* Zebra Striping */
62
67
  .table-zebra tbody tr:nth-child(even),
63
- .table-zebra .table-row:nth-child(even) {
68
+ .table-zebra .table-row:nth-child(even),
69
+ .table-striped tbody tr:nth-child(even),
70
+ .table-striped .table-row:nth-child(even) {
64
71
  background-color: var(--color-surface-container-low);
65
72
  }
66
73
 
@@ -82,6 +89,16 @@
82
89
  border: 1px solid var(--color-outline-variant);
83
90
  }
84
91
 
92
+ /* Borderless Table */
93
+ .table-borderless,
94
+ .table-borderless th,
95
+ .table-borderless td,
96
+ .table-borderless tfoot td,
97
+ .table-borderless .table-header-cell,
98
+ .table-borderless .table-cell {
99
+ border: none;
100
+ }
101
+
85
102
  /* Compact Table */
86
103
  .table-compact th,
87
104
  .table-compact td {
@@ -100,6 +117,16 @@
100
117
  table-layout: fixed;
101
118
  }
102
119
 
120
+ /* Sticky Header */
121
+ .table-sticky thead,
122
+ .table-sticky .table-header {
123
+ position: sticky;
124
+ top: 0;
125
+ z-index: 10;
126
+ background-color: var(--color-surface-container);
127
+ box-shadow: var(--shadow-xs);
128
+ }
129
+
103
130
  /* Sortable Header */
104
131
  .table-sortable th {
105
132
  cursor: pointer;
@@ -120,9 +147,24 @@
120
147
  opacity: 0.7;
121
148
  }
122
149
 
150
+ /* Selectable Rows */
151
+ .table-selectable tbody tr,
152
+ .table-selectable .table-row {
153
+ cursor: pointer;
154
+ }
155
+
156
+ .table-selectable tbody tr:hover,
157
+ .table-selectable .table-row:hover {
158
+ background-color: color-mix(in oklch, var(--color-on-surface) 8%, transparent);
159
+ }
160
+
123
161
  /* Selected Row */
124
162
  .table-row-selected,
125
- .table tr.selected {
163
+ .table tr.selected,
164
+ .table-selectable tbody tr.table-row-selected,
165
+ .table-selectable .table-row.table-row-selected,
166
+ .table-selectable tbody tr.selected,
167
+ .table-selectable .table-row.selected {
126
168
  background-color: var(--color-primary-container);
127
169
  color: var(--color-on-primary-container);
128
170
  }
package/dist/esm/components/badge.js CHANGED
@@ -72,112 +72,141 @@ export const css = `/**
72
72
  }
73
73
 
74
74
  /* Outlined Variants */
75
+ .badge-outlined,
76
+ .badge-outlined-secondary,
77
+ .badge-outlined-tertiary,
75
78
  .badge-outline {
76
79
  background-color: transparent;
77
80
  border: 1px solid currentColor;
78
81
  }
79
82
 
83
+ .badge-outlined,
84
+ .badge-outlined.badge-primary,
80
85
  .badge-outline.badge-primary {
81
86
  color: var(--color-primary);
82
87
  border-color: var(--color-primary);
83
88
  }
84
89
 
90
+ .badge-outlined.badge-secondary,
91
+ .badge-outlined-secondary,
85
92
  .badge-outline.badge-secondary {
86
93
  color: var(--color-secondary);
87
94
  border-color: var(--color-secondary);
88
95
  }
89
96
 
97
+ .badge-outlined.badge-tertiary,
98
+ .badge-outlined-tertiary,
90
99
  .badge-outline.badge-tertiary {
91
100
  color: var(--color-tertiary);
92
101
  border-color: var(--color-tertiary);
93
102
  }
94
103
 
104
+ .badge-outlined.badge-accent,
95
105
  .badge-outline.badge-accent {
96
106
  color: var(--color-accent);
97
107
  border-color: var(--color-accent);
98
108
  }
99
109
 
110
+ .badge-outlined.badge-neutral,
100
111
  .badge-outline.badge-neutral {
101
112
  color: var(--color-neutral);
102
113
  border-color: var(--color-neutral);
103
114
  }
104
115
 
116
+ .badge-outlined.badge-base,
105
117
  .badge-outline.badge-base {
106
118
  color: var(--color-base-content);
107
119
  border-color: var(--color-base-content);
108
120
  }
109
121
 
122
+ .badge-outlined.badge-info,
110
123
  .badge-outline.badge-info {
111
124
  color: var(--color-info);
112
125
  border-color: var(--color-info);
113
126
  }
114
127
 
128
+ .badge-outlined.badge-success,
115
129
  .badge-outline.badge-success {
116
130
  color: var(--color-success);
117
131
  border-color: var(--color-success);
118
132
  }
119
133
 
134
+ .badge-outlined.badge-warning,
120
135
  .badge-outline.badge-warning {
121
136
  color: var(--color-warning);
122
137
  border-color: var(--color-warning);
123
138
  }
124
139
 
140
+ .badge-outlined.badge-error,
125
141
  .badge-outline.badge-error {
126
142
  color: var(--color-error);
127
143
  border-color: var(--color-error);
128
144
  }
129
145
 
130
146
  /* Soft/Tonal Variants */
147
+ .badge-tonal,
131
148
  .badge-soft {
132
149
  background-color: var(--color-primary-container);
133
150
  color: var(--color-on-primary-container);
134
151
  }
135
152
 
153
+ .badge-tonal.badge-primary,
136
154
  .badge-soft.badge-primary {
137
155
  background-color: var(--color-primary-container);
138
156
  color: var(--color-on-primary-container);
139
157
  }
140
158
 
159
+ .badge-tonal.badge-secondary,
160
+ .badge-tonal-secondary,
141
161
  .badge-soft.badge-secondary {
142
162
  background-color: var(--color-secondary-container);
143
163
  color: var(--color-on-secondary-container);
144
164
  }
145
165
 
166
+ .badge-tonal.badge-tertiary,
167
+ .badge-tonal-tertiary,
146
168
  .badge-soft.badge-tertiary {
147
169
  background-color: var(--color-tertiary-container);
148
170
  color: var(--color-on-tertiary-container);
149
171
  }
150
172
 
173
+ .badge-tonal.badge-accent,
151
174
  .badge-soft.badge-accent {
152
175
  background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
153
176
  color: var(--color-on-surface);
154
177
  }
155
178
 
179
+ .badge-tonal.badge-neutral,
156
180
  .badge-soft.badge-neutral {
157
181
  background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
158
182
  color: var(--color-on-surface);
159
183
  }
160
184
 
185
+ .badge-tonal.badge-base,
161
186
  .badge-soft.badge-base {
162
187
  background-color: var(--color-base-200);
163
188
  color: var(--color-base-content);
164
189
  }
165
190
 
191
+ .badge-tonal.badge-info,
166
192
  .badge-soft.badge-info {
167
193
  background-color: var(--color-info-container);
168
194
  color: var(--color-on-info-container);
169
195
  }
170
196
 
197
+ .badge-tonal.badge-success,
171
198
  .badge-soft.badge-success {
172
199
  background-color: var(--color-success-container);
173
200
  color: var(--color-on-success-container);
174
201
  }
175
202
 
203
+ .badge-tonal.badge-warning,
176
204
  .badge-soft.badge-warning {
177
205
  background-color: var(--color-warning-container);
178
206
  color: var(--color-on-warning-container);
179
207
  }
180
208
 
209
+ .badge-tonal.badge-error,
181
210
  .badge-soft.badge-error {
182
211
  background-color: var(--color-error-container);
183
212
  color: var(--color-on-error-container);
package/dist/esm/components/button.js CHANGED
@@ -626,6 +626,25 @@ export const css = `/**
626
626
  }
627
627
 
628
628
  /* Icon Button */
629
+ .btn-icon {
630
+ padding: 0.75rem;
631
+ width: 2.5rem;
632
+ height: 2.5rem;
633
+ border-radius: var(--radius-full);
634
+ }
635
+
636
+ .btn-icon-sm {
637
+ padding: 0.5rem;
638
+ width: 2rem;
639
+ height: 2rem;
640
+ }
641
+
642
+ .btn-icon-lg {
643
+ padding: 1rem;
644
+ width: 3rem;
645
+ height: 3rem;
646
+ }
647
+
629
648
  .btn-circle {
630
649
  --btn-p: 0.625rem;
631
650
  --btn-py: 0.625rem;