@atelier-ui/angular 0.2.21 → 0.2.23

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 (5) hide show
  1. package/fesm2022/atelier-ui-angular.mjs +102 -30
  2. package/fesm2022/atelier-ui-angular.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/src/styles/tokens.css +134 -59
  5. package/types/atelier-ui-angular.d.ts +50 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atelier-ui/angular",
3
- "version": "0.2.21",
3
+ "version": "0.2.23",
4
4
  "description": "Atelier component library for Angular — LLM-optimised, accessible, design-token-driven",
5
5
  "keywords": [
6
6
  "angular",
package/src/styles/tokens.css CHANGED
@@ -27,6 +27,11 @@
27
27
  --ui-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
28
28
  --ui-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
29
29
  'Courier New', monospace;
30
+ /* Below the smallest readable size, for text inside a box too small to hold it:
31
+ the initials in a 24px avatar and the count in its overflow badge. Named rather
32
+ than left as the two literals it replaces (0.625rem and 0.5625rem), which is the
33
+ whole off-scale type population the library had. */
34
+ --ui-font-size-2xs: 0.625rem;
30
35
  --ui-font-size-xs: 0.75rem;
31
36
  --ui-font-size-sm: 0.875rem;
32
37
  --ui-font-size-md: 1rem;
@@ -143,6 +148,76 @@
143
148
  --ui-color-teal-800: #004e58; /* T on surface(light) 9.41 */
144
149
  --ui-color-teal-900: #003a42; /* T on surface(light) 12.47 */
145
150
 
151
+ /* Status ramps — the same construction as the teal ramp above, for the four
152
+ * status families. Every step the components ship was already sitting where a
153
+ * 100–950 ramp would put it: ordering the shipping values by OKLab lightness
154
+ * reproduces the step numbers in all four families, measured. So the shipping
155
+ * values are unchanged and only the gaps are generated.
156
+ *
157
+ * No 50 step. Extrapolating past each family's lightest shipping tint lands on
158
+ * #ffffff in three of the four — measured — so a 50 would be a name for the
159
+ * surface, which --ui-color-surface already is. The teal ramp has one because
160
+ * its light end is a vivid cyan the dark theme reads text against.
161
+ *
162
+ * The 950 is the dark theme's tinted background. It continues the ramp's
163
+ * direction (darker and less chromatic) with a visible chroma step down from
164
+ * the 900, which is correct for a surface tint rather than a text colour.
165
+ *
166
+ * Steps missing a shipping value in one family but present in another are
167
+ * placed at the fraction the family that HAS both puts them at, rather than at
168
+ * the midpoint: red ships an 800, a 900 and a 950, and its 900 sits 24.8% of the
169
+ * way from 800 to 950, not 50%. Interpolating to the midpoint would have made
170
+ * green's and amber's 900 too dark by a visible step.
171
+ */
172
+
173
+ /* red — the danger family */
174
+ --ui-color-red-100: #fee2e2; /* T on surface(dark) 15.56 */
175
+ --ui-color-red-200: #fecaca; /* T on surface(dark) 13.14 */
176
+ --ui-color-red-300: #fca5a5; /* T on surface(dark) 10.02 */
177
+ --ui-color-red-400: #f87171; /* T on surface(dark) 6.87 */
178
+ --ui-color-red-500: #e35856; /* T on surface(dark) 5.25 */
179
+ --ui-color-red-600: #ce3d3b; /* T on surface(light) 4.82 */
180
+ --ui-color-red-700: #b91c1c; /* ★ · T on surface(light) 6.47 */
181
+ --ui-color-red-800: #991b1b; /* T on surface(light) 8.31 */
182
+ --ui-color-red-900: #7f1d1d; /* T on surface(light) 10.02 */
183
+ --ui-color-red-950: #3a1414; /* T on surface(light) 16.28 */
184
+
185
+ /* green — the success family */
186
+ --ui-color-green-100: #dcfce7; /* T on surface(dark) 17.31 */
187
+ --ui-color-green-200: #b4f6ca; /* T on surface(dark) 15.37 */
188
+ --ui-color-green-300: #86efac; /* T on surface(dark) 13.54 */
189
+ --ui-color-green-400: #4ade80; /* T on surface(dark) 10.91 */
190
+ --ui-color-green-500: #39be69; /* T on surface(dark) 7.91 */
191
+ --ui-color-green-600: #279e53; /* T on surface(dark) 5.52 */
192
+ --ui-color-green-700: #15803d; /* ★ · T on surface(light) 5.02 */
193
+ --ui-color-green-800: #166534; /* T on surface(light) 7.13 */
194
+ --ui-color-green-900: #15582f; /* T on surface(light) 8.51 */
195
+ --ui-color-green-950: #0f3320; /* T on surface(light) 13.86 */
196
+
197
+ /* amber — the warning family */
198
+ --ui-color-amber-100: #fef3c7; /* T on surface(dark) 17.07 */
199
+ --ui-color-amber-200: #fde68a; /* T on surface(dark) 15.26 */
200
+ --ui-color-amber-300: #fcd361; /* T on surface(dark) 13.24 */
201
+ --ui-color-amber-400: #fbbf24; /* T on surface(dark) 11.39 */
202
+ --ui-color-amber-500: #e49b1b; /* T on surface(dark) 8.15 */
203
+ --ui-color-amber-600: #cc7712; /* T on surface(dark) 5.63 */
204
+ --ui-color-amber-700: #b45309; /* ★ · T on surface(light) 5.02 */
205
+ --ui-color-amber-800: #854d0e; /* T on surface(light) 6.85 */
206
+ --ui-color-amber-900: #714311; /* T on surface(light) 8.36 */
207
+ --ui-color-amber-950: #3a2510; /* T on surface(light) 14.46 */
208
+
209
+ /* sky — the info family */
210
+ --ui-color-sky-100: #e0f2fe; /* T on surface(dark) 16.57 */
211
+ --ui-color-sky-200: #bae6fd; /* T on surface(dark) 14.33 */
212
+ --ui-color-sky-300: #82d2fb; /* T on surface(dark) 11.37 */
213
+ --ui-color-sky-400: #38bdf8; /* T on surface(dark) 8.87 */
214
+ --ui-color-sky-500: #28a0da; /* T on surface(dark) 6.46 */
215
+ --ui-color-sky-600: #1784bd; /* T on surface(dark) 4.59 */
216
+ --ui-color-sky-700: #0369a1; /* ★ · T on surface(light) 5.93 */
217
+ --ui-color-sky-800: #0a5784; /* T on surface(light) 7.75 */
218
+ --ui-color-sky-900: #0c4a6e; /* T on surface(light) 9.46 */
219
+ --ui-color-sky-950: #102338; /* T on surface(light) 15.91 */
220
+
146
221
  --ui-color-primary: var(--ui-color-teal-700);
147
222
  --ui-color-primary-hover: var(--ui-color-teal-800);
148
223
  --ui-color-primary-active: var(--ui-color-teal-900);
@@ -154,22 +229,22 @@
154
229
  --ui-color-secondary-active: #1e293b;
155
230
 
156
231
  /* Semantic */
157
- --ui-color-danger: #b91c1c;
158
- --ui-color-danger-hover: #991b1b;
159
- --ui-color-danger-active: #7f1d1d;
160
- --ui-color-success: #15803d;
161
- --ui-color-warning: #b45309;
162
- --ui-color-info: #0369a1;
232
+ --ui-color-danger: var(--ui-color-red-700);
233
+ --ui-color-danger-hover: var(--ui-color-red-800);
234
+ --ui-color-danger-active: var(--ui-color-red-900);
235
+ --ui-color-success: var(--ui-color-green-700);
236
+ --ui-color-warning: var(--ui-color-amber-700);
237
+ --ui-color-info: var(--ui-color-sky-700);
163
238
 
164
239
  /* Semantic — AA-safe dark-text-on-tinted-bg pairs (Badge / Alert / Toast) */
165
- --ui-color-success-bg: #dcfce7;
166
- --ui-color-success-text: #166534;
167
- --ui-color-warning-bg: #fef3c7;
168
- --ui-color-warning-text: #854d0e;
169
- --ui-color-danger-bg: #fee2e2;
170
- --ui-color-danger-text: #991b1b;
171
- --ui-color-info-bg: #e0f2fe;
172
- --ui-color-info-text: #0c4a6e;
240
+ --ui-color-success-bg: var(--ui-color-green-100);
241
+ --ui-color-success-text: var(--ui-color-green-800);
242
+ --ui-color-warning-bg: var(--ui-color-amber-100);
243
+ --ui-color-warning-text: var(--ui-color-amber-800);
244
+ --ui-color-danger-bg: var(--ui-color-red-100);
245
+ --ui-color-danger-text: var(--ui-color-red-800);
246
+ --ui-color-info-bg: var(--ui-color-sky-100);
247
+ --ui-color-info-text: var(--ui-color-sky-900);
173
248
 
174
249
  /* Surfaces — clean white + cool slate */
175
250
  --ui-color-surface: #ffffff;
@@ -297,21 +372,21 @@
297
372
  --ui-color-secondary-hover: #cbd5e1;
298
373
  --ui-color-secondary-active: #e2e8f0;
299
374
 
300
- --ui-color-danger: #f87171;
301
- --ui-color-danger-hover: #fca5a5;
302
- --ui-color-danger-active: #fecaca;
303
- --ui-color-success: #4ade80;
304
- --ui-color-warning: #fbbf24;
305
- --ui-color-info: #38bdf8;
306
-
307
- --ui-color-success-bg: #0f3320;
308
- --ui-color-success-text: #86efac;
309
- --ui-color-warning-bg: #3a2510;
310
- --ui-color-warning-text: #fde68a;
311
- --ui-color-danger-bg: #3a1414;
312
- --ui-color-danger-text: #fca5a5;
313
- --ui-color-info-bg: #102338;
314
- --ui-color-info-text: #bae6fd;
375
+ --ui-color-danger: var(--ui-color-red-400);
376
+ --ui-color-danger-hover: var(--ui-color-red-300);
377
+ --ui-color-danger-active: var(--ui-color-red-200);
378
+ --ui-color-success: var(--ui-color-green-400);
379
+ --ui-color-warning: var(--ui-color-amber-400);
380
+ --ui-color-info: var(--ui-color-sky-400);
381
+
382
+ --ui-color-success-bg: var(--ui-color-green-950);
383
+ --ui-color-success-text: var(--ui-color-green-300);
384
+ --ui-color-warning-bg: var(--ui-color-amber-950);
385
+ --ui-color-warning-text: var(--ui-color-amber-200);
386
+ --ui-color-danger-bg: var(--ui-color-red-950);
387
+ --ui-color-danger-text: var(--ui-color-red-300);
388
+ --ui-color-info-bg: var(--ui-color-sky-950);
389
+ --ui-color-info-text: var(--ui-color-sky-200);
315
390
 
316
391
  --ui-color-surface: #0a1116;
317
392
  --ui-color-surface-raised: #131c24;
@@ -357,21 +432,21 @@
357
432
  --ui-color-secondary-hover: #cbd5e1;
358
433
  --ui-color-secondary-active: #e2e8f0;
359
434
 
360
- --ui-color-danger: #f87171;
361
- --ui-color-danger-hover: #fca5a5;
362
- --ui-color-danger-active: #fecaca;
363
- --ui-color-success: #4ade80;
364
- --ui-color-warning: #fbbf24;
365
- --ui-color-info: #38bdf8;
366
-
367
- --ui-color-success-bg: #0f3320;
368
- --ui-color-success-text: #86efac;
369
- --ui-color-warning-bg: #3a2510;
370
- --ui-color-warning-text: #fde68a;
371
- --ui-color-danger-bg: #3a1414;
372
- --ui-color-danger-text: #fca5a5;
373
- --ui-color-info-bg: #102338;
374
- --ui-color-info-text: #bae6fd;
435
+ --ui-color-danger: var(--ui-color-red-400);
436
+ --ui-color-danger-hover: var(--ui-color-red-300);
437
+ --ui-color-danger-active: var(--ui-color-red-200);
438
+ --ui-color-success: var(--ui-color-green-400);
439
+ --ui-color-warning: var(--ui-color-amber-400);
440
+ --ui-color-info: var(--ui-color-sky-400);
441
+
442
+ --ui-color-success-bg: var(--ui-color-green-950);
443
+ --ui-color-success-text: var(--ui-color-green-300);
444
+ --ui-color-warning-bg: var(--ui-color-amber-950);
445
+ --ui-color-warning-text: var(--ui-color-amber-200);
446
+ --ui-color-danger-bg: var(--ui-color-red-950);
447
+ --ui-color-danger-text: var(--ui-color-red-300);
448
+ --ui-color-info-bg: var(--ui-color-sky-950);
449
+ --ui-color-info-text: var(--ui-color-sky-200);
375
450
 
376
451
  --ui-color-surface: #0a1116;
377
452
  --ui-color-surface-raised: #131c24;
@@ -417,21 +492,21 @@
417
492
  --ui-color-secondary-hover: #334155;
418
493
  --ui-color-secondary-active: #1e293b;
419
494
 
420
- --ui-color-danger: #b91c1c;
421
- --ui-color-danger-hover: #991b1b;
422
- --ui-color-danger-active: #7f1d1d;
423
- --ui-color-success: #15803d;
424
- --ui-color-warning: #b45309;
425
- --ui-color-info: #0369a1;
426
-
427
- --ui-color-success-bg: #dcfce7;
428
- --ui-color-success-text: #166534;
429
- --ui-color-warning-bg: #fef3c7;
430
- --ui-color-warning-text: #854d0e;
431
- --ui-color-danger-bg: #fee2e2;
432
- --ui-color-danger-text: #991b1b;
433
- --ui-color-info-bg: #e0f2fe;
434
- --ui-color-info-text: #0c4a6e;
495
+ --ui-color-danger: var(--ui-color-red-700);
496
+ --ui-color-danger-hover: var(--ui-color-red-800);
497
+ --ui-color-danger-active: var(--ui-color-red-900);
498
+ --ui-color-success: var(--ui-color-green-700);
499
+ --ui-color-warning: var(--ui-color-amber-700);
500
+ --ui-color-info: var(--ui-color-sky-700);
501
+
502
+ --ui-color-success-bg: var(--ui-color-green-100);
503
+ --ui-color-success-text: var(--ui-color-green-800);
504
+ --ui-color-warning-bg: var(--ui-color-amber-100);
505
+ --ui-color-warning-text: var(--ui-color-amber-800);
506
+ --ui-color-danger-bg: var(--ui-color-red-100);
507
+ --ui-color-danger-text: var(--ui-color-red-800);
508
+ --ui-color-info-bg: var(--ui-color-sky-100);
509
+ --ui-color-info-text: var(--ui-color-sky-900);
435
510
 
436
511
  --ui-color-surface: #ffffff;
437
512
  --ui-color-surface-raised: #f8fafc;
package/types/atelier-ui-angular.d.ts CHANGED
@@ -23,7 +23,7 @@ interface AtlComboboxOption {
23
23
  label: string;
24
24
  disabled?: boolean;
25
25
  }
26
- type AtlIconName = 'success' | 'check' | 'warning' | 'danger' | 'info' | 'error' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'sort-asc' | 'sort-desc' | 'arrow-right' | 'arrow-left' | 'copy' | 'paste' | 'add' | 'edit' | 'delete' | 'close' | 'more' | 'person' | 'default-toast';
26
+ type AtlIconName = 'success' | 'check' | 'warning' | 'danger' | 'info' | 'error' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-double-left' | 'chevron-double-right' | 'sort-asc' | 'sort-desc' | 'arrow-right' | 'arrow-left' | 'copy' | 'paste' | 'add' | 'edit' | 'delete' | 'close' | 'more' | 'person' | 'default-toast';
27
27
  type AtlIconSize = 'sm' | 'md' | 'lg';
28
28
  type AtlChatVariant = 'drawer' | 'popup' | 'inline';
29
29
  type AtlChatStatus = 'idle' | 'streaming' | 'error';
@@ -236,6 +236,13 @@ declare class AtlInput implements FormValueControl<string> {
236
236
  /** @internal */
237
237
  protected readonly errorId: string;
238
238
  /** @internal */
239
+ /**
240
+ * The message renders when there is a message. Gating it on `touched` as well was
241
+ * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
242
+ * no equivalent, so the same four fields showed their errors at three different
243
+ * moments depending on the framework. Deciding *when* to pass errors belongs to the
244
+ * form layer, which is where `touched` lives (ADR-0055).
245
+ */
239
246
  protected readonly showErrors: _angular_core.Signal<boolean>;
240
247
  /** @internal */
241
248
  protected readonly hostClasses: _angular_core.Signal<string>;
@@ -280,6 +287,13 @@ declare class AtlTextarea implements FormValueControl<string> {
280
287
  /** @internal */
281
288
  protected readonly errorId: string;
282
289
  /** @internal */
290
+ /**
291
+ * The message renders when there is a message. Gating it on `touched` as well was
292
+ * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
293
+ * no equivalent, so the same four fields showed their errors at three different
294
+ * moments depending on the framework. Deciding *when* to pass errors belongs to the
295
+ * form layer, which is where `touched` lives (ADR-0055).
296
+ */
283
297
  protected readonly showErrors: _angular_core.Signal<boolean>;
284
298
  /** @internal */
285
299
  protected readonly hostClasses: _angular_core.Signal<string>;
@@ -322,6 +336,13 @@ declare class AtlCheckbox implements FormCheckboxControl {
322
336
  /** @internal */
323
337
  private readonly nativeInput;
324
338
  /** @internal */
339
+ /**
340
+ * The message renders when there is a message. Gating it on `touched` as well was
341
+ * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
342
+ * no equivalent, so the same four fields showed their errors at three different
343
+ * moments depending on the framework. Deciding *when* to pass errors belongs to the
344
+ * form layer, which is where `touched` lives (ADR-0055).
345
+ */
325
346
  protected readonly showErrors: _angular_core.Signal<boolean>;
326
347
  /** @internal */
327
348
  protected readonly hostClasses: _angular_core.Signal<string>;
@@ -447,6 +468,13 @@ declare class AtlRadioGroup implements FormValueControl<string>, AtlRadioGroupCo
447
468
  /** @internal */
448
469
  private keyManager;
449
470
  /** @internal */
471
+ /**
472
+ * The message renders when there is a message. Gating it on `touched` as well was
473
+ * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
474
+ * no equivalent, so the same four fields showed their errors at three different
475
+ * moments depending on the framework. Deciding *when* to pass errors belongs to the
476
+ * form layer, which is where `touched` lives (ADR-0055).
477
+ */
450
478
  protected readonly showErrors: _angular_core.Signal<boolean>;
451
479
  /** @internal */
452
480
  protected readonly hostClasses: _angular_core.Signal<string>;
@@ -495,6 +523,13 @@ declare class AtlToggle implements FormCheckboxControl {
495
523
  /** @internal */
496
524
  protected readonly errorId: string;
497
525
  /** @internal */
526
+ /**
527
+ * The message renders when there is a message. Gating it on `touched` as well was
528
+ * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
529
+ * no equivalent, so the same four fields showed their errors at three different
530
+ * moments depending on the framework. Deciding *when* to pass errors belongs to the
531
+ * form layer, which is where `touched` lives (ADR-0055).
532
+ */
498
533
  protected readonly showErrors: _angular_core.Signal<boolean>;
499
534
  /** @internal */
500
535
  protected readonly hostClasses: _angular_core.Signal<string>;
@@ -591,6 +626,13 @@ declare class AtlSelect implements FormValueControl<string>, AtlSelectContext, O
591
626
  /** @internal */
592
627
  protected readonly selectedLabel: _angular_core.Signal<string>;
593
628
  /** @internal */
629
+ /**
630
+ * The message renders when there is a message. Gating it on `touched` as well was
631
+ * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
632
+ * no equivalent, so the same four fields showed their errors at three different
633
+ * moments depending on the framework. Deciding *when* to pass errors belongs to the
634
+ * form layer, which is where `touched` lives (ADR-0055).
635
+ */
594
636
  protected readonly showErrors: _angular_core.Signal<boolean>;
595
637
  /** @internal */
596
638
  protected readonly hostClasses: _angular_core.Signal<string>;
@@ -718,6 +760,13 @@ declare class AtlCombobox implements FormValueControl<string> {
718
760
  /** @internal */
719
761
  protected readonly activeOptionId: _angular_core.Signal<string | null>;
720
762
  /** @internal */
763
+ /**
764
+ * The message renders when there is a message. Gating it on `touched` as well was
765
+ * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
766
+ * no equivalent, so the same four fields showed their errors at three different
767
+ * moments depending on the framework. Deciding *when* to pass errors belongs to the
768
+ * form layer, which is where `touched` lives (ADR-0055).
769
+ */
721
770
  protected readonly showErrors: _angular_core.Signal<boolean>;
722
771
  /** @internal */
723
772
  protected readonly hostClasses: _angular_core.Signal<string>;