@youcan/celeste 0.9.2 → 0.9.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 (14) hide show
  1. package/dist/celeste.css +198 -196
  2. package/dist/cjs/chunks/alert.cjs +1 -1
  3. package/dist/cjs/chunks/checkbox.cjs +15 -1
  4. package/dist/cjs/chunks/rich-editor.cjs +1 -1
  5. package/dist/cjs/chunks/text-input.cjs +1 -1
  6. package/dist/es/chunks/alert.js +1 -1
  7. package/dist/es/chunks/checkbox.js +16 -2
  8. package/dist/es/chunks/rich-editor.js +1 -1
  9. package/dist/es/chunks/text-input.js +1 -1
  10. package/package.json +3 -3
  11. package/src/components/alert/alert.vue +3 -2
  12. package/src/components/checkbox/checkbox.vue +45 -27
  13. package/src/components/rich-editor/rich-editor.vue +1 -1
  14. package/src/components/text-input/text-input.vue +0 -1
package/dist/celeste.css CHANGED
@@ -1,131 +1,131 @@
1
- .celeste-alert[data-v-472863f9] {
1
+ .celeste-alert[data-v-92b979d4] {
2
2
  display: flex;
3
3
  box-sizing: border-box;
4
4
  align-items: flex-start;
5
5
  width: 100%;
6
6
  }
7
- .celeste-alert-inner[data-v-472863f9] {
7
+ .celeste-alert-inner[data-v-92b979d4] {
8
8
  display: flex;
9
9
  flex: 1;
10
+ align-items: center;
10
11
  justify-content: space-between;
11
12
  min-width: 0;
12
13
  }
13
- .celeste-alert-content[data-v-472863f9] {
14
+ .celeste-alert-content[data-v-92b979d4] {
14
15
  flex: 1;
15
16
  min-width: 0;
16
17
  }
17
- .celeste-alert-icon[data-v-472863f9] {
18
+ .celeste-alert-icon[data-v-92b979d4] {
18
19
  flex-shrink: 0;
19
20
  width: var(--icon-size);
20
21
  height: var(--icon-size);
21
22
  }
22
- .celeste-alert-icon--fill--error[data-v-472863f9] {
23
+ .celeste-alert-icon--fill--error[data-v-92b979d4] {
23
24
  color: var(--color-static-white);
24
25
  }
25
- .celeste-alert-icon--fill--feature[data-v-472863f9] {
26
+ .celeste-alert-icon--fill--feature[data-v-92b979d4] {
26
27
  color: var(--color-static-white);
27
28
  }
28
- .celeste-alert-icon--fill--warning[data-v-472863f9] {
29
+ .celeste-alert-icon--fill--warning[data-v-92b979d4] {
29
30
  color: var(--color-static-white);
30
31
  }
31
- .celeste-alert-icon--fill--success[data-v-472863f9] {
32
+ .celeste-alert-icon--fill--success[data-v-92b979d4] {
32
33
  color: var(--color-static-white);
33
34
  }
34
- .celeste-alert-icon--fill--information[data-v-472863f9] {
35
+ .celeste-alert-icon--fill--information[data-v-92b979d4] {
35
36
  color: var(--color-static-white);
36
37
  }
37
- .celeste-alert-icon--light--error[data-v-472863f9] {
38
+ .celeste-alert-icon--light--error[data-v-92b979d4] {
38
39
  color: var(--color-state-error-base);
39
40
  }
40
- .celeste-alert-icon--light--feature[data-v-472863f9] {
41
+ .celeste-alert-icon--light--feature[data-v-92b979d4] {
41
42
  color: var(--color-state-faded-base);
42
43
  }
43
- .celeste-alert-icon--light--warning[data-v-472863f9] {
44
+ .celeste-alert-icon--light--warning[data-v-92b979d4] {
44
45
  color: var(--color-state-warning-base);
45
46
  }
46
- .celeste-alert-icon--light--success[data-v-472863f9] {
47
+ .celeste-alert-icon--light--success[data-v-92b979d4] {
47
48
  color: var(--color-state-success-base);
48
49
  }
49
- .celeste-alert-icon--light--information[data-v-472863f9] {
50
+ .celeste-alert-icon--light--information[data-v-92b979d4] {
50
51
  color: var(--color-state-information-base);
51
52
  }
52
- .celeste-alert-icon--lighter--error[data-v-472863f9] {
53
+ .celeste-alert-icon--lighter--error[data-v-92b979d4] {
53
54
  color: var(--color-state-error-base);
54
55
  }
55
- .celeste-alert-icon--lighter--feature[data-v-472863f9] {
56
+ .celeste-alert-icon--lighter--feature[data-v-92b979d4] {
56
57
  color: var(--color-state-faded-base);
57
58
  }
58
- .celeste-alert-icon--lighter--warning[data-v-472863f9] {
59
+ .celeste-alert-icon--lighter--warning[data-v-92b979d4] {
59
60
  color: var(--color-state-warning-base);
60
61
  }
61
- .celeste-alert-icon--lighter--success[data-v-472863f9] {
62
+ .celeste-alert-icon--lighter--success[data-v-92b979d4] {
62
63
  color: var(--color-state-success-base);
63
64
  }
64
- .celeste-alert-icon--lighter--information[data-v-472863f9] {
65
+ .celeste-alert-icon--lighter--information[data-v-92b979d4] {
65
66
  color: var(--color-state-information-base);
66
67
  }
67
- .celeste-alert-icon--stroke--error[data-v-472863f9] {
68
+ .celeste-alert-icon--stroke--error[data-v-92b979d4] {
68
69
  color: var(--color-state-error-base);
69
70
  }
70
- .celeste-alert-icon--stroke--feature[data-v-472863f9] {
71
+ .celeste-alert-icon--stroke--feature[data-v-92b979d4] {
71
72
  color: var(--color-state-faded-base);
72
73
  }
73
- .celeste-alert-icon--stroke--warning[data-v-472863f9] {
74
+ .celeste-alert-icon--stroke--warning[data-v-92b979d4] {
74
75
  color: var(--color-state-warning-base);
75
76
  }
76
- .celeste-alert-icon--stroke--success[data-v-472863f9] {
77
+ .celeste-alert-icon--stroke--success[data-v-92b979d4] {
77
78
  color: var(--color-state-success-base);
78
79
  }
79
- .celeste-alert-icon--stroke--information[data-v-472863f9] {
80
+ .celeste-alert-icon--stroke--information[data-v-92b979d4] {
80
81
  color: var(--color-state-information-base);
81
82
  }
82
- .celeste-alert-close[data-v-472863f9] {
83
+ .celeste-alert-close[data-v-92b979d4] {
83
84
  flex-shrink: 0;
84
85
  margin-inline-start: auto;
85
86
  }
86
- .celeste-alert-close i[data-v-472863f9] {
87
+ .celeste-alert-close i[data-v-92b979d4] {
87
88
  width: var(--icon-size);
88
89
  height: var(--icon-size);
89
90
  }
90
- .celeste-alert-close--fill[data-v-472863f9] {
91
+ .celeste-alert-close--fill[data-v-92b979d4] {
91
92
  opacity: 0.72;
92
93
  color: var(--color-static-white);
93
94
  }
94
- .celeste-alert-close--light[data-v-472863f9] {
95
+ .celeste-alert-close--light[data-v-92b979d4] {
95
96
  opacity: 0.4;
96
97
  color: var(--color-icon-strong-950);
97
98
  }
98
- .celeste-alert-close--lighter[data-v-472863f9] {
99
+ .celeste-alert-close--lighter[data-v-92b979d4] {
99
100
  opacity: 0.4;
100
101
  color: var(--color-icon-strong-950);
101
102
  }
102
- .celeste-alert-close--stroke[data-v-472863f9] {
103
+ .celeste-alert-close--stroke[data-v-92b979d4] {
103
104
  opacity: 0.4;
104
105
  color: var(--color-icon-strong-950);
105
106
  }
106
- .celeste-alert-title[data-v-472863f9] {
107
+ .celeste-alert-title[data-v-92b979d4] {
107
108
  margin: 0;
108
109
  overflow: hidden;
109
110
  font: var(--title-font);
110
111
  text-overflow: ellipsis;
111
112
  white-space: nowrap;
112
113
  }
113
- .celeste-alert-description[data-v-472863f9] {
114
+ .celeste-alert-description[data-v-92b979d4] {
114
115
  font: var(--paragraph-sm);
115
116
  }
116
- .celeste-alert-actions[data-v-472863f9] {
117
+ .celeste-alert-actions[data-v-92b979d4] {
117
118
  display: flex;
118
119
  flex-shrink: 0;
119
- align-items: flex-start;
120
- align-self: stretch;
120
+ align-items: center;
121
121
  gap: var(--spacing-8);
122
122
  }
123
- .celeste-alert-action-divider[data-v-472863f9] {
123
+ .celeste-alert-action-divider[data-v-92b979d4] {
124
124
  opacity: 0.48;
125
125
  font: var(--paragraph-sm);
126
126
  text-align: center;
127
127
  }
128
- .celeste-alert--xs[data-v-472863f9] {
128
+ .celeste-alert--xs[data-v-92b979d4] {
129
129
  height: 32px;
130
130
  padding: var(--spacing-8);
131
131
  gap: var(--spacing-8);
@@ -135,7 +135,7 @@
135
135
  --action-font: var(--label-xs);
136
136
  --title-font: var(--paragraph-xs);
137
137
  }
138
- .celeste-alert--sm[data-v-472863f9] {
138
+ .celeste-alert--sm[data-v-92b979d4] {
139
139
  height: 36px;
140
140
  padding: var(--spacing-8) var(--spacing-10);
141
141
  gap: var(--spacing-8);
@@ -145,7 +145,7 @@
145
145
  --title-font: var(--paragraph-sm);
146
146
  --action-font: var(--label-sm);
147
147
  }
148
- .celeste-alert--lg[data-v-472863f9] {
148
+ .celeste-alert--lg[data-v-92b979d4] {
149
149
  height: -moz-fit-content;
150
150
  height: fit-content;
151
151
  padding: 14px;
@@ -155,248 +155,249 @@
155
155
  --action-font: var(--label-sm);
156
156
  --title-font: var(--label-sm);
157
157
  }
158
- .celeste-alert--lg .celeste-alert-inner[data-v-472863f9] {
158
+ .celeste-alert--lg .celeste-alert-inner[data-v-92b979d4] {
159
159
  flex-direction: column;
160
+ align-items: stretch;
160
161
  gap: var(--spacing-10);
161
162
  }
162
- .celeste-alert--fill--error[data-v-472863f9] {
163
+ .celeste-alert--fill--error[data-v-92b979d4] {
163
164
  border: 1px solid transparent;
164
165
  background-color: var(--color-state-error-base);
165
166
  color: var(--color-static-white);
166
167
  }
167
- .celeste-alert--fill--error .celeste-alert-description[data-v-472863f9] {
168
+ .celeste-alert--fill--error .celeste-alert-description[data-v-92b979d4] {
168
169
  opacity: 1;
169
170
  color: var(--color-static-white);
170
171
  }
171
- .celeste-alert--fill--error .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--fill--error .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--fill--error .celeste-alert-action-divider[data-v-472863f9] {
172
+ .celeste-alert--fill--error .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--fill--error .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--fill--error .celeste-alert-action-divider[data-v-92b979d4] {
172
173
  color: var(--color-static-white);
173
174
  }
174
- .celeste-alert--fill--feature[data-v-472863f9] {
175
+ .celeste-alert--fill--feature[data-v-92b979d4] {
175
176
  border: 1px solid transparent;
176
177
  background-color: var(--color-state-faded-base);
177
178
  color: var(--color-static-white);
178
179
  }
179
- .celeste-alert--fill--feature .celeste-alert-description[data-v-472863f9] {
180
+ .celeste-alert--fill--feature .celeste-alert-description[data-v-92b979d4] {
180
181
  opacity: 1;
181
182
  color: var(--color-static-white);
182
183
  }
183
- .celeste-alert--fill--feature .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--fill--feature .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--fill--feature .celeste-alert-action-divider[data-v-472863f9] {
184
+ .celeste-alert--fill--feature .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--fill--feature .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--fill--feature .celeste-alert-action-divider[data-v-92b979d4] {
184
185
  color: var(--color-static-white);
185
186
  }
186
- .celeste-alert--fill--warning[data-v-472863f9] {
187
+ .celeste-alert--fill--warning[data-v-92b979d4] {
187
188
  border: 1px solid transparent;
188
189
  background-color: var(--color-state-warning-base);
189
190
  color: var(--color-static-white);
190
191
  }
191
- .celeste-alert--fill--warning .celeste-alert-description[data-v-472863f9] {
192
+ .celeste-alert--fill--warning .celeste-alert-description[data-v-92b979d4] {
192
193
  opacity: 1;
193
194
  color: var(--color-static-white);
194
195
  }
195
- .celeste-alert--fill--warning .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--fill--warning .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--fill--warning .celeste-alert-action-divider[data-v-472863f9] {
196
+ .celeste-alert--fill--warning .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--fill--warning .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--fill--warning .celeste-alert-action-divider[data-v-92b979d4] {
196
197
  color: var(--color-static-white);
197
198
  }
198
- .celeste-alert--fill--success[data-v-472863f9] {
199
+ .celeste-alert--fill--success[data-v-92b979d4] {
199
200
  border: 1px solid transparent;
200
201
  background-color: var(--color-state-success-base);
201
202
  color: var(--color-static-white);
202
203
  }
203
- .celeste-alert--fill--success .celeste-alert-description[data-v-472863f9] {
204
+ .celeste-alert--fill--success .celeste-alert-description[data-v-92b979d4] {
204
205
  opacity: 1;
205
206
  color: var(--color-static-white);
206
207
  }
207
- .celeste-alert--fill--success .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--fill--success .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--fill--success .celeste-alert-action-divider[data-v-472863f9] {
208
+ .celeste-alert--fill--success .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--fill--success .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--fill--success .celeste-alert-action-divider[data-v-92b979d4] {
208
209
  color: var(--color-static-white);
209
210
  }
210
- .celeste-alert--fill--information[data-v-472863f9] {
211
+ .celeste-alert--fill--information[data-v-92b979d4] {
211
212
  border: 1px solid transparent;
212
213
  background-color: var(--color-state-information-base);
213
214
  color: var(--color-static-white);
214
215
  }
215
- .celeste-alert--fill--information .celeste-alert-description[data-v-472863f9] {
216
+ .celeste-alert--fill--information .celeste-alert-description[data-v-92b979d4] {
216
217
  opacity: 1;
217
218
  color: var(--color-static-white);
218
219
  }
219
- .celeste-alert--fill--information .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--fill--information .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--fill--information .celeste-alert-action-divider[data-v-472863f9] {
220
+ .celeste-alert--fill--information .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--fill--information .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--fill--information .celeste-alert-action-divider[data-v-92b979d4] {
220
221
  color: var(--color-static-white);
221
222
  }
222
- .celeste-alert--light--error[data-v-472863f9] {
223
+ .celeste-alert--light--error[data-v-92b979d4] {
223
224
  border: 1px solid transparent;
224
225
  background-color: var(--color-state-error-light);
225
226
  color: var(--color-text-strong-950);
226
227
  }
227
- .celeste-alert--light--error .celeste-alert-description[data-v-472863f9] {
228
+ .celeste-alert--light--error .celeste-alert-description[data-v-92b979d4] {
228
229
  opacity: 0.72;
229
230
  color: var(--color-text-strong-950);
230
231
  }
231
- .celeste-alert--light--error .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--light--error .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--light--error .celeste-alert-action-divider[data-v-472863f9] {
232
+ .celeste-alert--light--error .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--light--error .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--light--error .celeste-alert-action-divider[data-v-92b979d4] {
232
233
  color: var(--color-text-strong-950);
233
234
  }
234
- .celeste-alert--light--feature[data-v-472863f9] {
235
+ .celeste-alert--light--feature[data-v-92b979d4] {
235
236
  border: 1px solid transparent;
236
237
  background-color: var(--color-state-faded-light);
237
238
  color: var(--color-text-strong-950);
238
239
  }
239
- .celeste-alert--light--feature .celeste-alert-description[data-v-472863f9] {
240
+ .celeste-alert--light--feature .celeste-alert-description[data-v-92b979d4] {
240
241
  opacity: 0.72;
241
242
  color: var(--color-text-strong-950);
242
243
  }
243
- .celeste-alert--light--feature .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--light--feature .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--light--feature .celeste-alert-action-divider[data-v-472863f9] {
244
+ .celeste-alert--light--feature .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--light--feature .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--light--feature .celeste-alert-action-divider[data-v-92b979d4] {
244
245
  color: var(--color-text-strong-950);
245
246
  }
246
- .celeste-alert--light--warning[data-v-472863f9] {
247
+ .celeste-alert--light--warning[data-v-92b979d4] {
247
248
  border: 1px solid transparent;
248
249
  background-color: var(--color-state-warning-light);
249
250
  color: var(--color-text-strong-950);
250
251
  }
251
- .celeste-alert--light--warning .celeste-alert-description[data-v-472863f9] {
252
+ .celeste-alert--light--warning .celeste-alert-description[data-v-92b979d4] {
252
253
  opacity: 0.72;
253
254
  color: var(--color-text-strong-950);
254
255
  }
255
- .celeste-alert--light--warning .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--light--warning .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--light--warning .celeste-alert-action-divider[data-v-472863f9] {
256
+ .celeste-alert--light--warning .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--light--warning .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--light--warning .celeste-alert-action-divider[data-v-92b979d4] {
256
257
  color: var(--color-text-strong-950);
257
258
  }
258
- .celeste-alert--light--success[data-v-472863f9] {
259
+ .celeste-alert--light--success[data-v-92b979d4] {
259
260
  border: 1px solid transparent;
260
261
  background-color: var(--color-state-success-light);
261
262
  color: var(--color-text-strong-950);
262
263
  }
263
- .celeste-alert--light--success .celeste-alert-description[data-v-472863f9] {
264
+ .celeste-alert--light--success .celeste-alert-description[data-v-92b979d4] {
264
265
  opacity: 0.72;
265
266
  color: var(--color-text-strong-950);
266
267
  }
267
- .celeste-alert--light--success .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--light--success .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--light--success .celeste-alert-action-divider[data-v-472863f9] {
268
+ .celeste-alert--light--success .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--light--success .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--light--success .celeste-alert-action-divider[data-v-92b979d4] {
268
269
  color: var(--color-text-strong-950);
269
270
  }
270
- .celeste-alert--light--information[data-v-472863f9] {
271
+ .celeste-alert--light--information[data-v-92b979d4] {
271
272
  border: 1px solid transparent;
272
273
  background-color: var(--color-state-information-light);
273
274
  color: var(--color-text-strong-950);
274
275
  }
275
- .celeste-alert--light--information .celeste-alert-description[data-v-472863f9] {
276
+ .celeste-alert--light--information .celeste-alert-description[data-v-92b979d4] {
276
277
  opacity: 0.72;
277
278
  color: var(--color-text-strong-950);
278
279
  }
279
- .celeste-alert--light--information .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--light--information .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--light--information .celeste-alert-action-divider[data-v-472863f9] {
280
+ .celeste-alert--light--information .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--light--information .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--light--information .celeste-alert-action-divider[data-v-92b979d4] {
280
281
  color: var(--color-text-strong-950);
281
282
  }
282
- .celeste-alert--lighter--error[data-v-472863f9] {
283
+ .celeste-alert--lighter--error[data-v-92b979d4] {
283
284
  border: 1px solid transparent;
284
285
  background-color: var(--color-state-error-lighter);
285
286
  color: var(--color-text-strong-950);
286
287
  }
287
- .celeste-alert--lighter--error .celeste-alert-description[data-v-472863f9] {
288
+ .celeste-alert--lighter--error .celeste-alert-description[data-v-92b979d4] {
288
289
  opacity: 0.72;
289
290
  color: var(--color-text-strong-950);
290
291
  }
291
- .celeste-alert--lighter--error .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--lighter--error .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--lighter--error .celeste-alert-action-divider[data-v-472863f9] {
292
+ .celeste-alert--lighter--error .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--lighter--error .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--lighter--error .celeste-alert-action-divider[data-v-92b979d4] {
292
293
  color: var(--color-text-strong-950);
293
294
  }
294
- .celeste-alert--lighter--feature[data-v-472863f9] {
295
+ .celeste-alert--lighter--feature[data-v-92b979d4] {
295
296
  border: 1px solid transparent;
296
297
  background-color: var(--color-state-faded-lighter);
297
298
  color: var(--color-text-strong-950);
298
299
  }
299
- .celeste-alert--lighter--feature .celeste-alert-description[data-v-472863f9] {
300
+ .celeste-alert--lighter--feature .celeste-alert-description[data-v-92b979d4] {
300
301
  opacity: 0.72;
301
302
  color: var(--color-text-strong-950);
302
303
  }
303
- .celeste-alert--lighter--feature .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--lighter--feature .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--lighter--feature .celeste-alert-action-divider[data-v-472863f9] {
304
+ .celeste-alert--lighter--feature .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--lighter--feature .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--lighter--feature .celeste-alert-action-divider[data-v-92b979d4] {
304
305
  color: var(--color-text-strong-950);
305
306
  }
306
- .celeste-alert--lighter--warning[data-v-472863f9] {
307
+ .celeste-alert--lighter--warning[data-v-92b979d4] {
307
308
  border: 1px solid transparent;
308
309
  background-color: var(--color-state-warning-lighter);
309
310
  color: var(--color-text-strong-950);
310
311
  }
311
- .celeste-alert--lighter--warning .celeste-alert-description[data-v-472863f9] {
312
+ .celeste-alert--lighter--warning .celeste-alert-description[data-v-92b979d4] {
312
313
  opacity: 0.72;
313
314
  color: var(--color-text-strong-950);
314
315
  }
315
- .celeste-alert--lighter--warning .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--lighter--warning .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--lighter--warning .celeste-alert-action-divider[data-v-472863f9] {
316
+ .celeste-alert--lighter--warning .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--lighter--warning .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--lighter--warning .celeste-alert-action-divider[data-v-92b979d4] {
316
317
  color: var(--color-text-strong-950);
317
318
  }
318
- .celeste-alert--lighter--success[data-v-472863f9] {
319
+ .celeste-alert--lighter--success[data-v-92b979d4] {
319
320
  border: 1px solid transparent;
320
321
  background-color: var(--color-state-success-lighter);
321
322
  color: var(--color-text-strong-950);
322
323
  }
323
- .celeste-alert--lighter--success .celeste-alert-description[data-v-472863f9] {
324
+ .celeste-alert--lighter--success .celeste-alert-description[data-v-92b979d4] {
324
325
  opacity: 0.72;
325
326
  color: var(--color-text-strong-950);
326
327
  }
327
- .celeste-alert--lighter--success .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--lighter--success .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--lighter--success .celeste-alert-action-divider[data-v-472863f9] {
328
+ .celeste-alert--lighter--success .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--lighter--success .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--lighter--success .celeste-alert-action-divider[data-v-92b979d4] {
328
329
  color: var(--color-text-strong-950);
329
330
  }
330
- .celeste-alert--lighter--information[data-v-472863f9] {
331
+ .celeste-alert--lighter--information[data-v-92b979d4] {
331
332
  border: 1px solid transparent;
332
333
  background-color: var(--color-state-information-lighter);
333
334
  color: var(--color-text-strong-950);
334
335
  }
335
- .celeste-alert--lighter--information .celeste-alert-description[data-v-472863f9] {
336
+ .celeste-alert--lighter--information .celeste-alert-description[data-v-92b979d4] {
336
337
  opacity: 0.72;
337
338
  color: var(--color-text-strong-950);
338
339
  }
339
- .celeste-alert--lighter--information .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--lighter--information .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--lighter--information .celeste-alert-action-divider[data-v-472863f9] {
340
+ .celeste-alert--lighter--information .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--lighter--information .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--lighter--information .celeste-alert-action-divider[data-v-92b979d4] {
340
341
  color: var(--color-text-strong-950);
341
342
  }
342
- .celeste-alert--stroke--error[data-v-472863f9] {
343
+ .celeste-alert--stroke--error[data-v-92b979d4] {
343
344
  border: 1px solid var(--color-stroke-soft-200);
344
345
  background-color: var(--color-bg-white-0);
345
346
  box-shadow: var(--shadow-regular-md);
346
347
  color: var(--color-text-strong-950);
347
348
  }
348
- .celeste-alert--stroke--error .celeste-alert-description[data-v-472863f9] {
349
+ .celeste-alert--stroke--error .celeste-alert-description[data-v-92b979d4] {
349
350
  color: var(--color-text-sub-600);
350
351
  }
351
- .celeste-alert--stroke--error .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--stroke--error .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--stroke--error .celeste-alert-action-divider[data-v-472863f9] {
352
+ .celeste-alert--stroke--error .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--stroke--error .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--stroke--error .celeste-alert-action-divider[data-v-92b979d4] {
352
353
  color: var(--color-text-strong-950);
353
354
  }
354
- .celeste-alert--stroke--feature[data-v-472863f9] {
355
+ .celeste-alert--stroke--feature[data-v-92b979d4] {
355
356
  border: 1px solid var(--color-stroke-soft-200);
356
357
  background-color: var(--color-bg-white-0);
357
358
  box-shadow: var(--shadow-regular-md);
358
359
  color: var(--color-text-strong-950);
359
360
  }
360
- .celeste-alert--stroke--feature .celeste-alert-description[data-v-472863f9] {
361
+ .celeste-alert--stroke--feature .celeste-alert-description[data-v-92b979d4] {
361
362
  color: var(--color-text-sub-600);
362
363
  }
363
- .celeste-alert--stroke--feature .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--stroke--feature .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--stroke--feature .celeste-alert-action-divider[data-v-472863f9] {
364
+ .celeste-alert--stroke--feature .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--stroke--feature .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--stroke--feature .celeste-alert-action-divider[data-v-92b979d4] {
364
365
  color: var(--color-text-strong-950);
365
366
  }
366
- .celeste-alert--stroke--warning[data-v-472863f9] {
367
+ .celeste-alert--stroke--warning[data-v-92b979d4] {
367
368
  border: 1px solid var(--color-stroke-soft-200);
368
369
  background-color: var(--color-bg-white-0);
369
370
  box-shadow: var(--shadow-regular-md);
370
371
  color: var(--color-text-strong-950);
371
372
  }
372
- .celeste-alert--stroke--warning .celeste-alert-description[data-v-472863f9] {
373
+ .celeste-alert--stroke--warning .celeste-alert-description[data-v-92b979d4] {
373
374
  color: var(--color-text-sub-600);
374
375
  }
375
- .celeste-alert--stroke--warning .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--stroke--warning .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--stroke--warning .celeste-alert-action-divider[data-v-472863f9] {
376
+ .celeste-alert--stroke--warning .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--stroke--warning .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--stroke--warning .celeste-alert-action-divider[data-v-92b979d4] {
376
377
  color: var(--color-text-strong-950);
377
378
  }
378
- .celeste-alert--stroke--success[data-v-472863f9] {
379
+ .celeste-alert--stroke--success[data-v-92b979d4] {
379
380
  border: 1px solid var(--color-stroke-soft-200);
380
381
  background-color: var(--color-bg-white-0);
381
382
  box-shadow: var(--shadow-regular-md);
382
383
  color: var(--color-text-strong-950);
383
384
  }
384
- .celeste-alert--stroke--success .celeste-alert-description[data-v-472863f9] {
385
+ .celeste-alert--stroke--success .celeste-alert-description[data-v-92b979d4] {
385
386
  color: var(--color-text-sub-600);
386
387
  }
387
- .celeste-alert--stroke--success .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--stroke--success .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--stroke--success .celeste-alert-action-divider[data-v-472863f9] {
388
+ .celeste-alert--stroke--success .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--stroke--success .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--stroke--success .celeste-alert-action-divider[data-v-92b979d4] {
388
389
  color: var(--color-text-strong-950);
389
390
  }
390
- .celeste-alert--stroke--information[data-v-472863f9] {
391
+ .celeste-alert--stroke--information[data-v-92b979d4] {
391
392
  border: 1px solid var(--color-stroke-soft-200);
392
393
  background-color: var(--color-bg-white-0);
393
394
  box-shadow: var(--shadow-regular-md);
394
395
  color: var(--color-text-strong-950);
395
396
  }
396
- .celeste-alert--stroke--information .celeste-alert-description[data-v-472863f9] {
397
+ .celeste-alert--stroke--information .celeste-alert-description[data-v-92b979d4] {
397
398
  color: var(--color-text-sub-600);
398
399
  }
399
- .celeste-alert--stroke--information .celeste-alert-action-primary[data-v-472863f9], .celeste-alert--stroke--information .celeste-alert-action-secondary[data-v-472863f9], .celeste-alert--stroke--information .celeste-alert-action-divider[data-v-472863f9] {
400
+ .celeste-alert--stroke--information .celeste-alert-action-primary[data-v-92b979d4], .celeste-alert--stroke--information .celeste-alert-action-secondary[data-v-92b979d4], .celeste-alert--stroke--information .celeste-alert-action-divider[data-v-92b979d4] {
400
401
  color: var(--color-text-strong-950);
401
402
  }.celeste-badge[data-v-26dfea2b] {
402
403
  display: inline-flex;
@@ -1202,33 +1203,34 @@
1202
1203
  align-items: center;
1203
1204
  justify-content: center;
1204
1205
  }
1205
- .celeste-checkbox .celeste-checkbox-indicator::before {
1206
- content: "";
1206
+ .celeste-checkbox .celeste-checkbox-indicator svg {
1207
1207
  position: absolute;
1208
+ transition: opacity var(--animation-fast) ease-out;
1209
+ stroke-width: 1.5;
1210
+ stroke: currentcolor;
1211
+ opacity: 0;
1212
+ fill: none;
1208
1213
  }
1209
- .celeste-checkbox .celeste-checkbox-indicator[data-state=checked]::before {
1210
- width: calc(var(--checkbox-checkmark-size) / 2);
1211
- height: var(--checkbox-checkmark-size);
1212
- margin-block-start: -3px;
1213
- transform: scaleY(0.5);
1214
- animation: fade-in var(--animation-fast) linear forwards;
1215
- }
1216
- .celeste-checkbox .celeste-checkbox-indicator[data-state=checked]::before, [dir=ltr] .celeste-checkbox .celeste-checkbox-indicator[data-state=checked]::before, [dir=rtl] .celeste-checkbox .celeste-checkbox-indicator[data-state=checked]::before {
1217
- border-top: transparent;
1218
- border-right: 1.8px solid currentcolor;
1219
- border-bottom: 1.8px solid currentcolor;
1220
- border-left: transparent;
1221
- rotate: 45deg;
1214
+ .celeste-checkbox .celeste-checkbox-indicator path {
1215
+ transition: stroke-dashoffset var(--animation-normal) ease-out;
1216
+ stroke-dasharray: var(--mark-length);
1217
+ stroke-dashoffset: var(--mark-length);
1222
1218
  }
1223
- .celeste-checkbox .celeste-checkbox-indicator[data-state=indeterminate]::before {
1224
- width: var(--checkbox-indeterminate-size);
1225
- height: 1.8px;
1226
- background-color: var(--color-static-white);
1219
+ .celeste-checkbox .celeste-checkbox-indicator[data-state=checked] .celeste-checkbox-check, .celeste-checkbox .celeste-checkbox-indicator[data-state=indeterminate] .celeste-checkbox-dash {
1220
+ opacity: 1;
1227
1221
  }
1228
- @keyframes fade-in {
1229
- to {
1230
- transform: scaleY(1);
1222
+ .celeste-checkbox .celeste-checkbox-indicator[data-state=checked] .celeste-checkbox-check path, .celeste-checkbox .celeste-checkbox-indicator[data-state=indeterminate] .celeste-checkbox-dash path {
1223
+ stroke-dashoffset: 0;
1231
1224
  }
1225
+ .celeste-checkbox .celeste-checkbox-check {
1226
+ --mark-length: 11.32;
1227
+ width: calc(var(--checkbox-checkmark-size) * 1.25);
1228
+ height: var(--checkbox-checkmark-size);
1229
+ }
1230
+ .celeste-checkbox .celeste-checkbox-dash {
1231
+ --mark-length: 8;
1232
+ width: var(--checkbox-indeterminate-size);
1233
+ height: 2px;
1232
1234
  }
1233
1235
  .celeste-checkbox[data-state=checked]:not(:disabled), .celeste-checkbox[data-state=indeterminate]:not(:disabled) {
1234
1236
  background-color: var(--color-primary-base);
@@ -2000,7 +2002,7 @@ to {
2000
2002
  .celeste-text-input-button[inline=true][data-v-8b3cdb5f]:hover {
2001
2003
  background-color: transparent !important;
2002
2004
  }/* stylelint-disable no-descending-specificity */
2003
- .celeste-text-input-wrapper[data-v-ebb54f92] {
2005
+ .celeste-text-input-wrapper[data-v-f20a707a] {
2004
2006
  --celeste-text-input-border-color: var(--color-stroke-soft-200);
2005
2007
  --celeste-text-input-drop-shadow: var(--shadow-regular-xs);
2006
2008
  --celeste-text-input-icon-color: var(--color-text-soft-400);
@@ -2023,28 +2025,28 @@ to {
2023
2025
  font: var(--paragraph-sm);
2024
2026
  gap: var(--input-gap);
2025
2027
  }
2026
- .celeste-text-input-wrapper[size=xs][data-v-ebb54f92] {
2028
+ .celeste-text-input-wrapper[size=xs][data-v-f20a707a] {
2027
2029
  --input-gap: 8px;
2028
2030
  --input-height: 32px;
2029
2031
  --input-radius: var(--radius-8);
2030
2032
  --input-padding: calc(var(--spacing-8) - var(--spacing-2));
2031
2033
  }
2032
- .celeste-text-input-wrapper[size=sm][data-v-ebb54f92] {
2034
+ .celeste-text-input-wrapper[size=sm][data-v-f20a707a] {
2033
2035
  --input-gap: 6px;
2034
2036
  --input-height: 36px;
2035
2037
  --input-radius: var(--radius-8);
2036
2038
  --input-padding: var(--spacing-8);
2037
2039
  }
2038
- .celeste-text-input-wrapper[size=md][data-v-ebb54f92] {
2040
+ .celeste-text-input-wrapper[size=md][data-v-f20a707a] {
2039
2041
  --input-gap: 6px;
2040
2042
  --input-height: 40px;
2041
2043
  --input-radius: var(--radius-10);
2042
2044
  --input-padding: var(--spacing-10);
2043
2045
  }
2044
- .celeste-text-input-wrapper[has-error=true][data-v-ebb54f92] {
2046
+ .celeste-text-input-wrapper[has-error=true][data-v-f20a707a] {
2045
2047
  --celeste-text-input-border-color: var(--color-state-error-base);
2046
2048
  }
2047
- .celeste-text-input-wrapper .celeste-text-input[data-v-ebb54f92] {
2049
+ .celeste-text-input-wrapper .celeste-text-input[data-v-f20a707a] {
2048
2050
  width: 100%;
2049
2051
  height: 100%;
2050
2052
  padding: 0;
@@ -2054,62 +2056,62 @@ to {
2054
2056
  color: inherit;
2055
2057
  font: inherit;
2056
2058
  }
2057
- .celeste-text-input-wrapper .celeste-text-input[data-v-ebb54f92]::-moz-placeholder {
2059
+ .celeste-text-input-wrapper .celeste-text-input[data-v-f20a707a]::-moz-placeholder {
2058
2060
  -moz-transition: color var(--animation-fast) ease-out;
2059
2061
  transition: color var(--animation-fast) ease-out;
2060
2062
  color: var(--celeste-text-input-placeholder-color);
2061
2063
  }
2062
- .celeste-text-input-wrapper .celeste-text-input[data-v-ebb54f92]::placeholder {
2064
+ .celeste-text-input-wrapper .celeste-text-input[data-v-f20a707a]::placeholder {
2063
2065
  transition: color var(--animation-fast) ease-out;
2064
2066
  color: var(--celeste-text-input-placeholder-color);
2065
2067
  }
2066
- .celeste-text-input-wrapper .celeste-text-input[type=search][data-v-ebb54f92]::-webkit-search-cancel-button {
2068
+ .celeste-text-input-wrapper .celeste-text-input[type=search][data-v-f20a707a]::-webkit-search-cancel-button {
2067
2069
  display: none;
2068
2070
  -webkit-appearance: none;
2069
2071
  appearance: none;
2070
2072
  }
2071
- .celeste-text-input-wrapper .celeste-text-input[type=search][data-v-ebb54f92]::-webkit-search-decoration {
2073
+ .celeste-text-input-wrapper .celeste-text-input[type=search][data-v-f20a707a]::-webkit-search-decoration {
2072
2074
  display: none;
2073
2075
  -webkit-appearance: none;
2074
2076
  appearance: none;
2075
2077
  }
2076
- .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-ebb54f92]::-webkit-calendar-picker-indicator {
2078
+ .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-f20a707a]::-webkit-calendar-picker-indicator {
2077
2079
  display: none;
2078
2080
  -webkit-appearance: none;
2079
2081
  appearance: none;
2080
2082
  }
2081
- .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-ebb54f92]::-webkit-clear-button, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-ebb54f92]::-webkit-inner-spin-button {
2083
+ .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-f20a707a]::-webkit-clear-button, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-f20a707a]::-webkit-inner-spin-button {
2082
2084
  display: none;
2083
2085
  -webkit-appearance: none;
2084
2086
  appearance: none;
2085
2087
  }
2086
- .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-ebb54f92]::-ms-clear, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-ebb54f92]::-ms-expand {
2088
+ .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-f20a707a]::-ms-clear, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-f20a707a]::-ms-expand {
2087
2089
  display: none;
2088
2090
  }
2089
- .celeste-text-input-wrapper[data-v-ebb54f92]:has(.celeste-text-input-leading-node) {
2091
+ .celeste-text-input-wrapper[data-v-f20a707a]:has(.celeste-text-input-leading-node) {
2090
2092
  padding-inline-start: 0;
2091
2093
  }
2092
- .celeste-text-input-wrapper[data-v-ebb54f92]:has(.celeste-text-input-trailing-node) {
2094
+ .celeste-text-input-wrapper[data-v-f20a707a]:has(.celeste-text-input-trailing-node) {
2093
2095
  padding-inline-end: 0;
2094
2096
  }
2095
- .celeste-text-input-wrapper[data-v-ebb54f92]:has(.celeste-text-input:focus) {
2097
+ .celeste-text-input-wrapper[data-v-f20a707a]:has(.celeste-text-input:focus) {
2096
2098
  --celeste-text-input-border-color: var(--color-stroke-strong-950);
2097
2099
  --celeste-text-input-placeholder-color: var(--color-text-sub-600);
2098
2100
  --celeste-text-input-icon-color: var(--color-text-sub-600);
2099
2101
  --celeste-text-input-affix-color: var(--color-text-sub-600);
2100
2102
  outline-color: var(--color-stroke-soft-200);
2101
2103
  }
2102
- .celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-ebb54f92] {
2104
+ .celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-f20a707a] {
2103
2105
  --celeste-text-input-border-color: var(--color-state-error-base);
2104
2106
  outline-color: var(--color-state-error-lighter);
2105
2107
  }
2106
- .celeste-text-input-wrapper[data-v-ebb54f92] input:-webkit-autofill {
2108
+ .celeste-text-input-wrapper[data-v-f20a707a] input:-webkit-autofill {
2107
2109
  -webkit-transition: background-color 5000s ease-in-out 0s;
2108
2110
  transition: background-color 5000s ease-in-out 0s;
2109
2111
  -webkit-background-clip: text;
2110
2112
  background-clip: text;
2111
2113
  }
2112
- .celeste-text-input-wrapper[data-v-ebb54f92]:has(.celeste-text-input:disabled) {
2114
+ .celeste-text-input-wrapper[data-v-f20a707a]:has(.celeste-text-input:disabled) {
2113
2115
  --celeste-text-input-border-color: transparent;
2114
2116
  --celeste-text-input-drop-shadow: none;
2115
2117
  --celeste-text-input-affix-background-color: var(--color-bg-weak-50);
@@ -2121,56 +2123,56 @@ to {
2121
2123
  color: var(--color-text-disabled-300);
2122
2124
  pointer-events: none;
2123
2125
  }
2124
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-ebb54f92]::-moz-placeholder {
2126
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-f20a707a]::-moz-placeholder {
2125
2127
  color: currentcolor;
2126
2128
  }
2127
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-ebb54f92]::placeholder {
2129
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-f20a707a]::placeholder {
2128
2130
  color: currentcolor;
2129
2131
  }
2130
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-ebb54f92] {
2132
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-f20a707a] {
2131
2133
  color: var(--color-text-disabled-300);
2132
2134
  pointer-events: none;
2133
2135
  }
2134
- .celeste-text-input-wrapper[data-v-ebb54f92]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node)) {
2136
+ .celeste-text-input-wrapper[data-v-f20a707a]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node)) {
2135
2137
  --celeste-text-input-border-color: transparent;
2136
2138
  }
2137
- .celeste-text-input-wrapper[data-v-ebb54f92]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node:hover)) {
2139
+ .celeste-text-input-wrapper[data-v-f20a707a]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node:hover)) {
2138
2140
  --celeste-text-input-icon-color: var(--color-text-sub-600);
2139
2141
  --celeste-text-input-placeholder-color: var(--color-text-sub-600);
2140
2142
  background-color: var(--color-bg-weak-50);
2141
2143
  }
2142
- .celeste-text-input-wrapper .celeste-text-input-icon[data-v-ebb54f92] {
2144
+ .celeste-text-input-wrapper .celeste-text-input-icon[data-v-f20a707a] {
2143
2145
  flex-shrink: 0;
2144
2146
  width: 20px;
2145
2147
  height: 20px;
2146
2148
  transition: all var(--animation-fast) ease-out;
2147
2149
  color: var(--celeste-text-input-icon-color);
2148
2150
  }
2149
- .celeste-text-input-wrapper[data-v-ebb54f92] .celeste-text-input-node.celeste-text-input-leading-node,
2150
- .celeste-text-input-wrapper[data-v-ebb54f92] .celeste-text-input-node.celeste-text-input-trailing-node {
2151
+ .celeste-text-input-wrapper[data-v-f20a707a] .celeste-text-input-node.celeste-text-input-leading-node,
2152
+ .celeste-text-input-wrapper[data-v-f20a707a] .celeste-text-input-node.celeste-text-input-trailing-node {
2151
2153
  height: calc(var(--input-height) - var(--spacing-2)) !important;
2152
2154
  }
2153
- [dir=ltr] .celeste-text-input-wrapper[data-v-ebb54f92] .celeste-text-input-node.celeste-text-input-leading-node {
2155
+ [dir=ltr] .celeste-text-input-wrapper[data-v-f20a707a] .celeste-text-input-node.celeste-text-input-leading-node {
2154
2156
  border-right: 1px solid var(--color-stroke-soft-200) !important;
2155
2157
  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
2156
2158
  }
2157
- [dir=ltr] .celeste-text-input-wrapper[data-v-ebb54f92] .celeste-text-input-node.celeste-text-input-trailing-node {
2159
+ [dir=ltr] .celeste-text-input-wrapper[data-v-f20a707a] .celeste-text-input-node.celeste-text-input-trailing-node {
2158
2160
  border-left: 1px solid var(--color-stroke-soft-200) !important;
2159
2161
  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
2160
2162
  }
2161
- [dir=rtl] .celeste-text-input-wrapper[data-v-ebb54f92] .celeste-text-input-node.celeste-text-input-leading-node {
2163
+ [dir=rtl] .celeste-text-input-wrapper[data-v-f20a707a] .celeste-text-input-node.celeste-text-input-leading-node {
2162
2164
  border-left: 1px solid var(--color-stroke-soft-200) !important;
2163
2165
  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
2164
2166
  }
2165
- [dir=rtl] .celeste-text-input-wrapper[data-v-ebb54f92] .celeste-text-input-node.celeste-text-input-trailing-node {
2167
+ [dir=rtl] .celeste-text-input-wrapper[data-v-f20a707a] .celeste-text-input-node.celeste-text-input-trailing-node {
2166
2168
  border-right: 1px solid var(--color-stroke-soft-200) !important;
2167
2169
  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
2168
2170
  }
2169
- .celeste-text-input-wrapper[data-v-ebb54f92] .celeste-text-input-node.celeste-text-input-leading-node {
2171
+ .celeste-text-input-wrapper[data-v-f20a707a] .celeste-text-input-node.celeste-text-input-leading-node {
2170
2172
  border-right: 1px solid var(--color-stroke-soft-200) !important;
2171
2173
  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
2172
2174
  }
2173
- .celeste-text-input-wrapper[data-v-ebb54f92] .celeste-text-input-node.celeste-text-input-trailing-node {
2175
+ .celeste-text-input-wrapper[data-v-f20a707a] .celeste-text-input-node.celeste-text-input-trailing-node {
2174
2176
  border-left: 1px solid var(--color-stroke-soft-200) !important;
2175
2177
  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
2176
2178
  }.celeste-picker-trigger[data-v-94b97787] {
@@ -3635,14 +3637,14 @@ to {
3635
3637
  border-radius: var(--radius-8);
3636
3638
  color: var(--color-neutral-700);
3637
3639
  gap: var(--spacing-8);
3638
- }.celeste-rich-editor[data-v-d03a78c8] {
3640
+ }.celeste-rich-editor[data-v-3fe18f57] {
3639
3641
  position: relative;
3640
3642
  border: 1px solid var(--color-stroke-soft-200);
3641
3643
  border-radius: var(--spacing-12);
3642
3644
  background: var(--color-bg-white-0);
3643
3645
  box-shadow: var(--shadow-regular-xs);
3644
3646
  }
3645
- .celeste-rich-editor .toolbar[data-v-d03a78c8] {
3647
+ .celeste-rich-editor .toolbar[data-v-3fe18f57] {
3646
3648
  display: flex;
3647
3649
  flex-wrap: wrap;
3648
3650
  align-items: center;
@@ -3652,128 +3654,128 @@ to {
3652
3654
  background: var(--color-bg-white-0);
3653
3655
  gap: var(--spacing-4);
3654
3656
  }
3655
- .celeste-rich-editor .toolbar[data-v-d03a78c8] .celeste-cbutton:active {
3657
+ .celeste-rich-editor .toolbar[data-v-3fe18f57] .celeste-cbutton:active {
3656
3658
  background-color: var(--color-bg-weak-50);
3657
3659
  box-shadow: none;
3658
3660
  color: var(--color-icon-strong-950);
3659
3661
  }
3660
- .celeste-rich-editor .toolbar .celeste-cbutton.active[data-v-d03a78c8] {
3662
+ .celeste-rich-editor .toolbar .celeste-cbutton.active[data-v-3fe18f57] {
3661
3663
  background-color: var(--color-neutral-100);
3662
3664
  color: var(--color-icon-strong-950);
3663
3665
  }
3664
- .celeste-rich-editor .toolbar .divider[data-v-d03a78c8] {
3666
+ .celeste-rich-editor .toolbar .divider[data-v-3fe18f57] {
3665
3667
  width: 1px;
3666
3668
  height: 16px;
3667
3669
  margin: 0 3px;
3668
3670
  background: var(--color-stroke-soft-200);
3669
3671
  }
3670
- .celeste-rich-editor .toolbar .extra-settings-wrapper[data-v-d03a78c8] {
3672
+ .celeste-rich-editor .toolbar .extra-settings-wrapper[data-v-3fe18f57] {
3671
3673
  display: flex;
3672
3674
  align-items: center;
3673
3675
  }
3674
- .celeste-rich-editor .text-field[data-v-d03a78c8] {
3676
+ .celeste-rich-editor .text-field[data-v-3fe18f57] {
3675
3677
  min-height: 88px;
3676
3678
  margin: var(--spacing-12);
3677
3679
  padding-inline-end: var(--spacing-12);
3678
3680
  overflow-y: auto;
3679
3681
  resize: vertical;
3680
3682
  }
3681
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap {
3683
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap {
3682
3684
  min-height: 88px;
3683
3685
  outline: none;
3684
3686
  }
3685
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap :first-child {
3687
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap :first-child {
3686
3688
  margin-top: 0;
3687
3689
  }
3688
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap p.is-editor-empty:first-child::before {
3690
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap p.is-editor-empty:first-child::before {
3689
3691
  content: attr(data-placeholder);
3690
- float: left;
3691
3692
  height: 0;
3693
+ float: left;
3692
3694
  color: var(--color-neutral-300);
3693
3695
  pointer-events: none;
3694
3696
  }
3695
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap h1,
3696
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap h2,
3697
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap h3,
3698
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap h4,
3699
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap h5,
3700
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap h6,
3701
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap p {
3697
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap h1,
3698
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap h2,
3699
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap h3,
3700
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap h4,
3701
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap h5,
3702
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap h6,
3703
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap p {
3702
3704
  margin-bottom: 0;
3703
3705
  }
3704
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap h1 {
3706
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap h1 {
3705
3707
  margin-top: 40px;
3706
3708
  font-size: 56px;
3707
3709
  font-weight: 500;
3708
3710
  letter-spacing: -0.01em;
3709
3711
  line-height: 64px;
3710
3712
  }
3711
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap h2 {
3713
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap h2 {
3712
3714
  margin-top: 36px;
3713
3715
  font-size: 48px;
3714
3716
  font-weight: 500;
3715
3717
  letter-spacing: -0.01em;
3716
3718
  line-height: 56px;
3717
3719
  }
3718
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap h3 {
3720
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap h3 {
3719
3721
  margin-top: 32px;
3720
3722
  font-size: 40px;
3721
3723
  font-weight: 500;
3722
3724
  letter-spacing: -0.01em;
3723
3725
  line-height: 48px;
3724
3726
  }
3725
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap h4 {
3727
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap h4 {
3726
3728
  margin-top: 20px;
3727
3729
  font-size: 32px;
3728
3730
  font-weight: 500;
3729
3731
  letter-spacing: -0.005em;
3730
3732
  line-height: 40px;
3731
3733
  }
3732
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap h5 {
3734
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap h5 {
3733
3735
  margin-top: 20px;
3734
3736
  font-size: 24px;
3735
3737
  font-weight: 500;
3736
3738
  letter-spacing: 0;
3737
3739
  line-height: 32px;
3738
3740
  }
3739
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap h6 {
3741
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap h6 {
3740
3742
  margin-top: 16px;
3741
3743
  font-size: 20px;
3742
3744
  font-weight: 500;
3743
3745
  letter-spacing: 0;
3744
3746
  line-height: 28px;
3745
3747
  }
3746
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap p {
3748
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap p {
3747
3749
  margin-top: 12px;
3748
3750
  font-size: 16px;
3749
3751
  font-weight: 400;
3750
3752
  letter-spacing: -0.011em;
3751
3753
  line-height: 24px;
3752
3754
  }
3753
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap ul,
3754
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap ol {
3755
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap ul,
3756
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap ol {
3755
3757
  margin: 1.25rem 1rem 1.25rem 0.4rem;
3756
3758
  padding: 0 1rem;
3757
3759
  }
3758
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap ul li p,
3759
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap ol li p {
3760
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap ul li p,
3761
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap ol li p {
3760
3762
  margin-top: 0.25em;
3761
3763
  margin-bottom: 0.25em;
3762
3764
  }
3763
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap ul {
3765
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap ul {
3764
3766
  list-style-type: disc;
3765
3767
  }
3766
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap ol {
3768
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap ol {
3767
3769
  list-style-type: decimal;
3768
3770
  }
3769
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap a {
3771
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap a {
3770
3772
  color: var(--color-blue-700);
3771
3773
  cursor: pointer;
3772
3774
  }
3773
- .celeste-rich-editor .text-field[data-v-d03a78c8] .tiptap a:hover {
3775
+ .celeste-rich-editor .text-field[data-v-3fe18f57] .tiptap a:hover {
3774
3776
  color: var(--color-blue-500);
3775
3777
  }
3776
- .celeste-rich-editor .characters-count[data-v-d03a78c8] {
3778
+ .celeste-rich-editor .characters-count[data-v-3fe18f57] {
3777
3779
  position: absolute;
3778
3780
  bottom: 7px;
3779
3781
  inset-inline-end: 22px;
@@ -3785,23 +3787,23 @@ to {
3785
3787
  color: var(--color-text-soft-400);
3786
3788
  font: var(--subheading-xxs);
3787
3789
  }
3788
- .celeste-rich-editor .characters-count.warning[data-v-d03a78c8] {
3790
+ .celeste-rich-editor .characters-count.warning[data-v-3fe18f57] {
3789
3791
  color: var(--color-state-warning-base);
3790
3792
  }
3791
- .celeste-rich-editor .characters-count.danger[data-v-d03a78c8] {
3793
+ .celeste-rich-editor .characters-count.danger[data-v-3fe18f57] {
3792
3794
  color: var(--color-state-error-base);
3793
3795
  }
3794
- .celeste-rich-editor .select-menu-wrapper[data-v-d03a78c8] {
3796
+ .celeste-rich-editor .select-menu-wrapper[data-v-3fe18f57] {
3795
3797
  padding: 0 var(--spacing-4);
3796
3798
  }
3797
- .celeste-rich-editor[data-v-d03a78c8]:dir(rtl) .i-celeste-arrow-go-back-line,
3798
- .celeste-rich-editor[data-v-d03a78c8]:dir(rtl) .i-celeste-arrow-go-forward-line {
3799
+ .celeste-rich-editor[data-v-3fe18f57]:dir(rtl) .i-celeste-arrow-go-back-line,
3800
+ .celeste-rich-editor[data-v-3fe18f57]:dir(rtl) .i-celeste-arrow-go-forward-line {
3799
3801
  transform: scaleX(-1);
3800
3802
  }
3801
- .celeste-rich-editor[data-v-d03a78c8] .tippy-box[data-theme='custom'] {
3803
+ .celeste-rich-editor[data-v-3fe18f57] .tippy-box[data-theme='custom'] {
3802
3804
  max-width: 400px !important;
3803
3805
  }
3804
- .celeste-select-item[data-state=checked][data-v-d03a78c8] .i-celeste-check-line {
3806
+ .celeste-select-item[data-state=checked][data-v-3fe18f57] .i-celeste-check-line {
3805
3807
  display: none;
3806
3808
  }.celeste-pagination-ellipsis[data-v-5fcf13e0] {
3807
3809
  -webkit-user-select: none;
package/dist/cjs/chunks/alert.cjs CHANGED
@@ -93,7 +93,7 @@ var alert_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
93
93
  });
94
94
  //#endregion
95
95
  //#region src/components/alert/alert.vue
96
- var alert_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(alert_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-472863f9"]]);
96
+ var alert_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(alert_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-92b979d4"]]);
97
97
  //#endregion
98
98
  Object.defineProperty(exports, "alert_default", {
99
99
  enumerable: true,
package/dist/cjs/chunks/checkbox.cjs CHANGED
@@ -250,7 +250,21 @@ var checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
250
250
  const forwarded = require_useForwardPropsEmits.useForwardPropsEmits(require_use_delegated_props.useDelegatedProps(props, "class"), emits);
251
251
  return (_ctx, _cache) => {
252
252
  return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(CheckboxRoot_default), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: (0, vue.unref)(require_clsx.clsx)("celeste-checkbox", props.class) }), {
253
- default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(CheckboxIndicator_default), { class: "celeste-checkbox-indicator" })]),
253
+ default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(CheckboxIndicator_default), {
254
+ "force-mount": "",
255
+ class: "celeste-checkbox-indicator"
256
+ }, {
257
+ default: (0, vue.withCtx)(() => _cache[0] || (_cache[0] = [(0, vue.createElementVNode)("svg", {
258
+ class: "celeste-checkbox-check",
259
+ viewBox: "0 0 10 8",
260
+ "aria-hidden": "true"
261
+ }, [(0, vue.createElementVNode)("path", { d: "M1 3.5L4 6.5L9 1.5" })], -1), (0, vue.createElementVNode)("svg", {
262
+ class: "celeste-checkbox-dash",
263
+ viewBox: "0 0 8 2",
264
+ "aria-hidden": "true"
265
+ }, [(0, vue.createElementVNode)("path", { d: "M0 1H8" })], -1)])),
266
+ _: 1
267
+ })]),
254
268
  _: 1
255
269
  }, 16, ["class"]);
256
270
  };
package/dist/cjs/chunks/rich-editor.cjs CHANGED
@@ -5178,7 +5178,7 @@ var rich_editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0
5178
5178
  });
5179
5179
  //#endregion
5180
5180
  //#region src/components/rich-editor/rich-editor.vue
5181
- var rich_editor_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(rich_editor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d03a78c8"]]);
5181
+ var rich_editor_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(rich_editor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3fe18f57"]]);
5182
5182
  //#endregion
5183
5183
  Object.defineProperty(exports, "rich_editor_default", {
5184
5184
  enumerable: true,
package/dist/cjs/chunks/text-input.cjs CHANGED
@@ -109,7 +109,7 @@ var text_input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
109
109
  });
110
110
  //#endregion
111
111
  //#region src/components/text-input/text-input.vue
112
- var text_input_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ebb54f92"]]);
112
+ var text_input_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f20a707a"]]);
113
113
  //#endregion
114
114
  Object.defineProperty(exports, "text_input_default", {
115
115
  enumerable: true,
package/dist/es/chunks/alert.js CHANGED
@@ -91,6 +91,6 @@ var alert_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE
91
91
  ], 10, _hoisted_1);
92
92
  };
93
93
  }
94
- }), [["__scopeId", "data-v-472863f9"]]);
94
+ }), [["__scopeId", "data-v-92b979d4"]]);
95
95
  //#endregion
96
96
  export { alert_default as t };
package/dist/es/chunks/checkbox.js CHANGED
@@ -13,7 +13,7 @@ import { t as Presence_default } from "./Presence.js";
13
13
  import { t as VisuallyHiddenInput_default } from "./VisuallyHiddenInput.js";
14
14
  import { t as RovingFocusItem_default } from "./RovingFocusItem.js";
15
15
  import { useDelegatedProps } from "../use-delegated-props.js";
16
- import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useAttrs, withCtx, withKeys, withModifiers } from "vue";
16
+ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useAttrs, withCtx, withKeys, withModifiers } from "vue";
17
17
  //#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Checkbox/CheckboxGroupRoot.js
18
18
  var [injectCheckboxGroupRootContext, provideCheckboxGroupRootContext] = /* @__PURE__ */ createContext("CheckboxGroupRoot");
19
19
  //#endregion
@@ -249,7 +249,21 @@ var checkbox_default = /* @__PURE__ */ defineComponent({
249
249
  const forwarded = useForwardPropsEmits(useDelegatedProps(props, "class"), emits);
250
250
  return (_ctx, _cache) => {
251
251
  return openBlock(), createBlock(unref(CheckboxRoot_default), mergeProps(unref(forwarded), { class: unref(clsx)("celeste-checkbox", props.class) }), {
252
- default: withCtx(() => [createVNode(unref(CheckboxIndicator_default), { class: "celeste-checkbox-indicator" })]),
252
+ default: withCtx(() => [createVNode(unref(CheckboxIndicator_default), {
253
+ "force-mount": "",
254
+ class: "celeste-checkbox-indicator"
255
+ }, {
256
+ default: withCtx(() => _cache[0] || (_cache[0] = [createElementVNode("svg", {
257
+ class: "celeste-checkbox-check",
258
+ viewBox: "0 0 10 8",
259
+ "aria-hidden": "true"
260
+ }, [createElementVNode("path", { d: "M1 3.5L4 6.5L9 1.5" })], -1), createElementVNode("svg", {
261
+ class: "celeste-checkbox-dash",
262
+ viewBox: "0 0 8 2",
263
+ "aria-hidden": "true"
264
+ }, [createElementVNode("path", { d: "M0 1H8" })], -1)])),
265
+ _: 1
266
+ })]),
253
267
  _: 1
254
268
  }, 16, ["class"]);
255
269
  };
package/dist/es/chunks/rich-editor.js CHANGED
@@ -5176,6 +5176,6 @@ var rich_editor_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @
5176
5176
  ])) : createCommentVNode("", true);
5177
5177
  };
5178
5178
  }
5179
- }), [["__scopeId", "data-v-d03a78c8"]]);
5179
+ }), [["__scopeId", "data-v-3fe18f57"]]);
5180
5180
  //#endregion
5181
5181
  export { rich_editor_default as t };
package/dist/es/chunks/text-input.js CHANGED
@@ -107,6 +107,6 @@ var text_input_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
107
107
  ], 10, _hoisted_1);
108
108
  };
109
109
  }
110
- }), [["__scopeId", "data-v-ebb54f92"]]);
110
+ }), [["__scopeId", "data-v-f20a707a"]]);
111
111
  //#endregion
112
112
  export { text_input_default as t };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@youcan/celeste",
3
3
  "type": "module",
4
- "version": "0.9.2",
4
+ "version": "0.9.3",
5
5
  "author": "YouCan <tech@youcan.shop>",
6
6
  "repository": {
7
7
  "type": "git",
@@ -49,8 +49,8 @@
49
49
  "reka-ui": "^2.10.1",
50
50
  "tinycolor2": "^1.6.0",
51
51
  "vue-sonner": "^2.0.9",
52
- "@youcan/celeste-icons": "0.9.2",
53
- "@youcan/celeste-tokens": "0.9.2"
52
+ "@youcan/celeste-icons": "0.9.3",
53
+ "@youcan/celeste-tokens": "0.9.3"
54
54
  },
55
55
  "devDependencies": {
56
56
  "@chromatic-com/storybook": "^4.1.3",
package/src/components/alert/alert.vue CHANGED
@@ -201,6 +201,7 @@ $alert-states: ('error' 'feature' 'warning' 'success' 'information');
201
201
  &-inner {
202
202
  display: flex;
203
203
  flex: 1;
204
+ align-items: center;
204
205
  justify-content: space-between;
205
206
  min-width: 0;
206
207
  }
@@ -255,8 +256,7 @@ $alert-states: ('error' 'feature' 'warning' 'success' 'information');
255
256
  &-actions {
256
257
  display: flex;
257
258
  flex-shrink: 0;
258
- align-items: flex-start;
259
- align-self: stretch;
259
+ align-items: center;
260
260
  gap: var(--spacing-8);
261
261
  }
262
262
 
@@ -295,6 +295,7 @@ $alert-states: ('error' 'feature' 'warning' 'success' 'information');
295
295
 
296
296
  & .celeste-alert-inner {
297
297
  flex-direction: column;
298
+ align-items: stretch;
298
299
  gap: var(--spacing-10);
299
300
  }
300
301
  }
package/src/components/checkbox/checkbox.vue CHANGED
@@ -17,7 +17,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
17
17
  v-bind="forwarded"
18
18
  :class="clsx('celeste-checkbox', props.class)"
19
19
  >
20
- <CheckboxIndicator class="celeste-checkbox-indicator" />
20
+ <CheckboxIndicator force-mount class="celeste-checkbox-indicator">
21
+ <svg
22
+ class="celeste-checkbox-check"
23
+ viewBox="0 0 10 8"
24
+ aria-hidden="true"
25
+ >
26
+ <path d="M1 3.5L4 6.5L9 1.5" />
27
+ </svg>
28
+ <svg
29
+ class="celeste-checkbox-dash"
30
+ viewBox="0 0 8 2"
31
+ aria-hidden="true"
32
+ >
33
+ <path d="M0 1H8" />
34
+ </svg>
35
+ </CheckboxIndicator>
21
36
  </CheckboxRoot>
22
37
  </template>
23
38
 
@@ -59,42 +74,45 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
59
74
  align-items: center;
60
75
  justify-content: center;
61
76
 
62
- &::before {
63
- content: '';
77
+ svg {
64
78
  position: absolute;
79
+ transition: opacity var(--animation-fast) ease-out;
80
+ stroke-width: 1.5;
81
+ stroke: currentcolor;
82
+ opacity: 0;
83
+ fill: none;
65
84
  }
66
85
 
67
- &[data-state='checked']::before {
68
- width: calc(var(--checkbox-checkmark-size) / 2);
69
- height: var(--checkbox-checkmark-size);
70
- margin-block-start: -3px;
71
- transform: scaleY(0.5);
72
- animation: fade-in var(--animation-fast) linear forwards;
86
+ path {
87
+ transition: stroke-dashoffset var(--animation-normal) ease-out;
88
+ stroke-dasharray: var(--mark-length);
89
+ stroke-dashoffset: var(--mark-length);
73
90
  }
74
91
 
75
- &[data-state='checked']::before,
76
- [dir='ltr'] &[data-state='checked']::before,
77
- [dir='rtl'] &[data-state='checked']::before {
78
- border-top: transparent;
79
- border-right: 1.8px solid currentcolor;
80
- border-bottom: 1.8px solid currentcolor;
81
- border-left: transparent;
82
- rotate: 45deg;
83
- }
92
+ &[data-state='checked'] .celeste-checkbox-check,
93
+ &[data-state='indeterminate'] .celeste-checkbox-dash {
94
+ opacity: 1;
84
95
 
85
- &[data-state='indeterminate']::before {
86
- width: var(--checkbox-indeterminate-size);
87
- height: 1.8px;
88
- background-color: var(--color-static-white);
89
- }
90
-
91
- @keyframes fade-in {
92
- to {
93
- transform: scaleY(1);
96
+ path {
97
+ stroke-dashoffset: 0;
94
98
  }
95
99
  }
96
100
  }
97
101
 
102
+ .celeste-checkbox-check {
103
+ --mark-length: 11.32;
104
+
105
+ width: calc(var(--checkbox-checkmark-size) * 1.25);
106
+ height: var(--checkbox-checkmark-size);
107
+ }
108
+
109
+ .celeste-checkbox-dash {
110
+ --mark-length: 8;
111
+
112
+ width: var(--checkbox-indeterminate-size);
113
+ height: 2px;
114
+ }
115
+
98
116
  &[data-state='checked']:not(:disabled),
99
117
  &[data-state='indeterminate']:not(:disabled) {
100
118
  background-color: var(--color-primary-base);
package/src/components/rich-editor/rich-editor.vue CHANGED
@@ -293,8 +293,8 @@ onBeforeUnmount(() => {
293
293
 
294
294
  p.is-editor-empty:first-child::before {
295
295
  content: attr(data-placeholder);
296
- float: left;
297
296
  height: 0;
297
+ float: left;
298
298
  color: var(--color-neutral-300);
299
299
  pointer-events: none;
300
300
  }
package/src/components/text-input/text-input.vue CHANGED
@@ -7,7 +7,6 @@ import { uid } from '@/utils/crypto';
7
7
  import TextInputButton from './text-input-button.vue';
8
8
 
9
9
  export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
10
- // Remove type: 'date' when the DatePicker component is available
11
10
  type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date';
12
11
  size?: 'xs' | 'sm' | 'md';
13
12
  hasError?: boolean;