@joanroucoux/cairn-ui 0.9.1 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/fesm2022/joanroucoux-cairn-ui-action-bar.mjs +3 -3
  3. package/fesm2022/joanroucoux-cairn-ui-alert.mjs +3 -3
  4. package/fesm2022/joanroucoux-cairn-ui-amount.mjs +3 -3
  5. package/fesm2022/joanroucoux-cairn-ui-async.mjs +3 -3
  6. package/fesm2022/joanroucoux-cairn-ui-avatar.mjs +6 -6
  7. package/fesm2022/joanroucoux-cairn-ui-back-link.mjs +4 -4
  8. package/fesm2022/joanroucoux-cairn-ui-back-link.mjs.map +1 -1
  9. package/fesm2022/joanroucoux-cairn-ui-badge.mjs +3 -3
  10. package/fesm2022/joanroucoux-cairn-ui-button.mjs +3 -3
  11. package/fesm2022/joanroucoux-cairn-ui-card.mjs +3 -3
  12. package/fesm2022/joanroucoux-cairn-ui-choice-chips.mjs +3 -3
  13. package/fesm2022/joanroucoux-cairn-ui-delta.mjs +3 -3
  14. package/fesm2022/joanroucoux-cairn-ui-dialog.mjs +4 -4
  15. package/fesm2022/joanroucoux-cairn-ui-dialog.mjs.map +1 -1
  16. package/fesm2022/joanroucoux-cairn-ui-donut.mjs +3 -3
  17. package/fesm2022/joanroucoux-cairn-ui-drawer.mjs +9 -8
  18. package/fesm2022/joanroucoux-cairn-ui-drawer.mjs.map +1 -1
  19. package/fesm2022/joanroucoux-cairn-ui-empty.mjs +3 -3
  20. package/fesm2022/joanroucoux-cairn-ui-external-link.mjs +3 -3
  21. package/fesm2022/joanroucoux-cairn-ui-fact.mjs +6 -6
  22. package/fesm2022/joanroucoux-cairn-ui-field.mjs +9 -9
  23. package/fesm2022/joanroucoux-cairn-ui-filter-chips.mjs +3 -3
  24. package/fesm2022/joanroucoux-cairn-ui-group-header.mjs +3 -3
  25. package/fesm2022/joanroucoux-cairn-ui-icon-toggle.mjs +43 -0
  26. package/fesm2022/joanroucoux-cairn-ui-icon-toggle.mjs.map +1 -0
  27. package/fesm2022/joanroucoux-cairn-ui-input.mjs +6 -6
  28. package/fesm2022/joanroucoux-cairn-ui-line-chart.mjs +3 -3
  29. package/fesm2022/joanroucoux-cairn-ui-menu.mjs +9 -9
  30. package/fesm2022/joanroucoux-cairn-ui-meter.mjs +3 -3
  31. package/fesm2022/joanroucoux-cairn-ui-motion.mjs +29 -20
  32. package/fesm2022/joanroucoux-cairn-ui-motion.mjs.map +1 -1
  33. package/fesm2022/joanroucoux-cairn-ui-nav-item.mjs +3 -3
  34. package/fesm2022/joanroucoux-cairn-ui-result-group.mjs +3 -3
  35. package/fesm2022/joanroucoux-cairn-ui-row.mjs +16 -16
  36. package/fesm2022/joanroucoux-cairn-ui-row.mjs.map +1 -1
  37. package/fesm2022/joanroucoux-cairn-ui-segmented.mjs +3 -3
  38. package/fesm2022/joanroucoux-cairn-ui-select-pill.mjs +3 -3
  39. package/fesm2022/joanroucoux-cairn-ui-select.mjs +3 -3
  40. package/fesm2022/joanroucoux-cairn-ui-skeleton.mjs +3 -3
  41. package/fesm2022/joanroucoux-cairn-ui-stale-link.mjs +3 -3
  42. package/fesm2022/joanroucoux-cairn-ui-stat.mjs +3 -3
  43. package/fesm2022/joanroucoux-cairn-ui-switch.mjs +3 -3
  44. package/fesm2022/joanroucoux-cairn-ui-tab-bar.mjs +6 -6
  45. package/fesm2022/joanroucoux-cairn-ui-table.mjs +29 -29
  46. package/fesm2022/joanroucoux-cairn-ui-table.mjs.map +1 -1
  47. package/fesm2022/joanroucoux-cairn-ui-toast.mjs +6 -6
  48. package/package.json +5 -1
  49. package/styles/theme.css +1 -0
  50. package/styles/tokens.css +1 -0
  51. package/types/joanroucoux-cairn-ui-drawer.d.ts +2 -0
  52. package/types/joanroucoux-cairn-ui-icon-toggle.d.ts +13 -0
  53. package/types/joanroucoux-cairn-ui-motion.d.ts +5 -1
@@ -16,7 +16,7 @@ var UiStaleLink = class UiStaleLink {
16
16
  classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}${this.chevron() ? ` ${CHEVRON_CLASSES}` : ""}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
17
17
  static ɵfac = i0.ɵɵngDeclareFactory({
18
18
  minVersion: "12.0.0",
19
- version: "22.2.0",
19
+ version: "22.2.1",
20
20
  ngImport: i0,
21
21
  type: UiStaleLink,
22
22
  deps: [],
@@ -24,7 +24,7 @@ var UiStaleLink = class UiStaleLink {
24
24
  });
25
25
  static ɵdir = i0.ɵɵngDeclareDirective({
26
26
  minVersion: "17.1.0",
27
- version: "22.2.0",
27
+ version: "22.2.1",
28
28
  type: UiStaleLink,
29
29
  isStandalone: true,
30
30
  selector: "a[uiStaleLink]",
@@ -50,7 +50,7 @@ var UiStaleLink = class UiStaleLink {
50
50
  };
51
51
  i0.ɵɵngDeclareClassMetadata({
52
52
  minVersion: "12.0.0",
53
- version: "22.2.0",
53
+ version: "22.2.1",
54
54
  ngImport: i0,
55
55
  type: UiStaleLink,
56
56
  decorators: [{
@@ -21,7 +21,7 @@ var UiStat = class UiStat {
21
21
  valueClasses = computed(() => VALUE_CLASSES[this.size()], ...ngDevMode ? [{ debugName: "valueClasses" }] : /* istanbul ignore next */ []);
22
22
  static ɵfac = i0.ɵɵngDeclareFactory({
23
23
  minVersion: "12.0.0",
24
- version: "22.2.0",
24
+ version: "22.2.1",
25
25
  ngImport: i0,
26
26
  type: UiStat,
27
27
  deps: [],
@@ -29,7 +29,7 @@ var UiStat = class UiStat {
29
29
  });
30
30
  static ɵcmp = i0.ɵɵngDeclareComponent({
31
31
  minVersion: "17.1.0",
32
- version: "22.2.0",
32
+ version: "22.2.1",
33
33
  type: UiStat,
34
34
  isStandalone: true,
35
35
  selector: "ui-stat",
@@ -74,7 +74,7 @@ var UiStat = class UiStat {
74
74
  };
75
75
  i0.ɵɵngDeclareClassMetadata({
76
76
  minVersion: "12.0.0",
77
- version: "22.2.0",
77
+ version: "22.2.1",
78
78
  ngImport: i0,
79
79
  type: UiStat,
80
80
  decorators: [{
@@ -9,7 +9,7 @@ var UiSwitch = class UiSwitch {
9
9
  }
10
10
  static ɵfac = i0.ɵɵngDeclareFactory({
11
11
  minVersion: "12.0.0",
12
- version: "22.2.0",
12
+ version: "22.2.1",
13
13
  ngImport: i0,
14
14
  type: UiSwitch,
15
15
  deps: [],
@@ -17,7 +17,7 @@ var UiSwitch = class UiSwitch {
17
17
  });
18
18
  static ɵdir = i0.ɵɵngDeclareDirective({
19
19
  minVersion: "14.0.0",
20
- version: "22.2.0",
20
+ version: "22.2.1",
21
21
  type: UiSwitch,
22
22
  isStandalone: true,
23
23
  selector: "input[type=checkbox][uiSwitch]",
@@ -30,7 +30,7 @@ var UiSwitch = class UiSwitch {
30
30
  };
31
31
  i0.ɵɵngDeclareClassMetadata({
32
32
  minVersion: "12.0.0",
33
- version: "22.2.0",
33
+ version: "22.2.1",
34
34
  ngImport: i0,
35
35
  type: UiSwitch,
36
36
  decorators: [{
@@ -14,7 +14,7 @@ var UiTabBar = class UiTabBar {
14
14
  }
15
15
  static ɵfac = i0.ɵɵngDeclareFactory({
16
16
  minVersion: "12.0.0",
17
- version: "22.2.0",
17
+ version: "22.2.1",
18
18
  ngImport: i0,
19
19
  type: UiTabBar,
20
20
  deps: [],
@@ -22,7 +22,7 @@ var UiTabBar = class UiTabBar {
22
22
  });
23
23
  static ɵcmp = i0.ɵɵngDeclareComponent({
24
24
  minVersion: "14.0.0",
25
- version: "22.2.0",
25
+ version: "22.2.1",
26
26
  type: UiTabBar,
27
27
  isStandalone: true,
28
28
  selector: "nav[ui-tab-bar]",
@@ -34,7 +34,7 @@ var UiTabBar = class UiTabBar {
34
34
  };
35
35
  i0.ɵɵngDeclareClassMetadata({
36
36
  minVersion: "12.0.0",
37
- version: "22.2.0",
37
+ version: "22.2.1",
38
38
  ngImport: i0,
39
39
  type: UiTabBar,
40
40
  decorators: [{
@@ -55,7 +55,7 @@ var UiTab = class UiTab {
55
55
  classes = computed(() => `${TAB_CLASSES} ${this.active() ? ACTIVE_TAB_CLASSES : INACTIVE_TAB_CLASSES}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
56
56
  static ɵfac = i0.ɵɵngDeclareFactory({
57
57
  minVersion: "12.0.0",
58
- version: "22.2.0",
58
+ version: "22.2.1",
59
59
  ngImport: i0,
60
60
  type: UiTab,
61
61
  deps: [],
@@ -63,7 +63,7 @@ var UiTab = class UiTab {
63
63
  });
64
64
  static ɵcmp = i0.ɵɵngDeclareComponent({
65
65
  minVersion: "17.1.0",
66
- version: "22.2.0",
66
+ version: "22.2.1",
67
67
  type: UiTab,
68
68
  isStandalone: true,
69
69
  selector: "a[ui-tab]",
@@ -88,7 +88,7 @@ var UiTab = class UiTab {
88
88
  };
89
89
  i0.ɵɵngDeclareClassMetadata({
90
90
  minVersion: "12.0.0",
91
- version: "22.2.0",
91
+ version: "22.2.1",
92
92
  ngImport: i0,
93
93
  type: UiTab,
94
94
  decorators: [{
@@ -43,7 +43,7 @@ var UiTable = class UiTable {
43
43
  }
44
44
  static ɵfac = i0.ɵɵngDeclareFactory({
45
45
  minVersion: "12.0.0",
46
- version: "22.2.0",
46
+ version: "22.2.1",
47
47
  ngImport: i0,
48
48
  type: UiTable,
49
49
  deps: [],
@@ -51,7 +51,7 @@ var UiTable = class UiTable {
51
51
  });
52
52
  static ɵdir = i0.ɵɵngDeclareDirective({
53
53
  minVersion: "17.1.0",
54
- version: "22.2.0",
54
+ version: "22.2.1",
55
55
  type: UiTable,
56
56
  isStandalone: true,
57
57
  selector: "table[uiTable]",
@@ -84,7 +84,7 @@ var UiTable = class UiTable {
84
84
  };
85
85
  i0.ɵɵngDeclareClassMetadata({
86
86
  minVersion: "12.0.0",
87
- version: "22.2.0",
87
+ version: "22.2.1",
88
88
  ngImport: i0,
89
89
  type: UiTable,
90
90
  decorators: [{
@@ -129,7 +129,7 @@ var UiGroup = class UiGroup {
129
129
  });
130
130
  static ɵfac = i0.ɵɵngDeclareFactory({
131
131
  minVersion: "12.0.0",
132
- version: "22.2.0",
132
+ version: "22.2.1",
133
133
  ngImport: i0,
134
134
  type: UiGroup,
135
135
  deps: [],
@@ -137,7 +137,7 @@ var UiGroup = class UiGroup {
137
137
  });
138
138
  static ɵdir = i0.ɵɵngDeclareDirective({
139
139
  minVersion: "17.1.0",
140
- version: "22.2.0",
140
+ version: "22.2.1",
141
141
  type: UiGroup,
142
142
  isStandalone: true,
143
143
  selector: "tbody[uiGroup]",
@@ -154,7 +154,7 @@ var UiGroup = class UiGroup {
154
154
  };
155
155
  i0.ɵɵngDeclareClassMetadata({
156
156
  minVersion: "12.0.0",
157
- version: "22.2.0",
157
+ version: "22.2.1",
158
158
  ngImport: i0,
159
159
  type: UiGroup,
160
160
  decorators: [{
@@ -198,7 +198,7 @@ var UiTr = class UiTr {
198
198
  }, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
199
199
  static ɵfac = i0.ɵɵngDeclareFactory({
200
200
  minVersion: "12.0.0",
201
- version: "22.2.0",
201
+ version: "22.2.1",
202
202
  ngImport: i0,
203
203
  type: UiTr,
204
204
  deps: [],
@@ -206,7 +206,7 @@ var UiTr = class UiTr {
206
206
  });
207
207
  static ɵdir = i0.ɵɵngDeclareDirective({
208
208
  minVersion: "17.1.0",
209
- version: "22.2.0",
209
+ version: "22.2.1",
210
210
  type: UiTr,
211
211
  isStandalone: true,
212
212
  selector: "tr[uiTr]",
@@ -243,7 +243,7 @@ var UiTr = class UiTr {
243
243
  };
244
244
  i0.ɵɵngDeclareClassMetadata({
245
245
  minVersion: "12.0.0",
246
- version: "22.2.0",
246
+ version: "22.2.1",
247
247
  ngImport: i0,
248
248
  type: UiTr,
249
249
  decorators: [{
@@ -315,7 +315,7 @@ var UiTh = class UiTh {
315
315
  classes = computed(() => cellClasses(`${this.tall() ? "[--table-head:2.5rem]" : "[--table-head:2.25rem]"} ${TH_CLASSES}`, this.numeric(), this.primary(), this.from(), this.secondary()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
316
316
  static ɵfac = i0.ɵɵngDeclareFactory({
317
317
  minVersion: "12.0.0",
318
- version: "22.2.0",
318
+ version: "22.2.1",
319
319
  ngImport: i0,
320
320
  type: UiTh,
321
321
  deps: [],
@@ -323,7 +323,7 @@ var UiTh = class UiTh {
323
323
  });
324
324
  static ɵdir = i0.ɵɵngDeclareDirective({
325
325
  minVersion: "17.1.0",
326
- version: "22.2.0",
326
+ version: "22.2.1",
327
327
  type: UiTh,
328
328
  isStandalone: true,
329
329
  selector: "th[uiTh]",
@@ -381,7 +381,7 @@ var UiTh = class UiTh {
381
381
  };
382
382
  i0.ɵɵngDeclareClassMetadata({
383
383
  minVersion: "12.0.0",
384
- version: "22.2.0",
384
+ version: "22.2.1",
385
385
  ngImport: i0,
386
386
  type: UiTh,
387
387
  decorators: [{
@@ -463,7 +463,7 @@ var UiTd = class UiTd {
463
463
  classes = computed(() => cellClasses(TD_CLASSES, this.numeric(), this.primary(), this.from(), this.secondary()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
464
464
  static ɵfac = i0.ɵɵngDeclareFactory({
465
465
  minVersion: "12.0.0",
466
- version: "22.2.0",
466
+ version: "22.2.1",
467
467
  ngImport: i0,
468
468
  type: UiTd,
469
469
  deps: [],
@@ -471,7 +471,7 @@ var UiTd = class UiTd {
471
471
  });
472
472
  static ɵdir = i0.ɵɵngDeclareDirective({
473
473
  minVersion: "17.1.0",
474
- version: "22.2.0",
474
+ version: "22.2.1",
475
475
  type: UiTd,
476
476
  isStandalone: true,
477
477
  selector: "td[uiTd]",
@@ -511,7 +511,7 @@ var UiTd = class UiTd {
511
511
  };
512
512
  i0.ɵɵngDeclareClassMetadata({
513
513
  minVersion: "12.0.0",
514
- version: "22.2.0",
514
+ version: "22.2.1",
515
515
  ngImport: i0,
516
516
  type: UiTd,
517
517
  decorators: [{
@@ -577,7 +577,7 @@ var UiGroupCell = class UiGroupCell {
577
577
  }
578
578
  static ɵfac = i0.ɵɵngDeclareFactory({
579
579
  minVersion: "12.0.0",
580
- version: "22.2.0",
580
+ version: "22.2.1",
581
581
  ngImport: i0,
582
582
  type: UiGroupCell,
583
583
  deps: [],
@@ -585,7 +585,7 @@ var UiGroupCell = class UiGroupCell {
585
585
  });
586
586
  static ɵcmp = i0.ɵɵngDeclareComponent({
587
587
  minVersion: "17.0.0",
588
- version: "22.2.0",
588
+ version: "22.2.1",
589
589
  type: UiGroupCell,
590
590
  isStandalone: true,
591
591
  selector: "td[ui-group-cell]",
@@ -648,7 +648,7 @@ var UiGroupCell = class UiGroupCell {
648
648
  @if (collapsible()) {
649
649
  <h2 class="m-0 font-normal">
650
650
  <button
651
- class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
651
+ class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left transition-[background-color] duration-(--duration-fast) ease-out not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
652
652
  data-group-heading
653
653
  type="button"
654
654
  [attr.aria-controls]="controls() || null"
@@ -716,7 +716,7 @@ var UiGroupCell = class UiGroupCell {
716
716
  };
717
717
  i0.ɵɵngDeclareClassMetadata({
718
718
  minVersion: "12.0.0",
719
- version: "22.2.0",
719
+ version: "22.2.1",
720
720
  ngImport: i0,
721
721
  type: UiGroupCell,
722
722
  decorators: [{
@@ -730,7 +730,7 @@ i0.ɵɵngDeclareClassMetadata({
730
730
  @if (collapsible()) {
731
731
  <h2 class="m-0 font-normal">
732
732
  <button
733
- class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
733
+ class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left transition-[background-color] duration-(--duration-fast) ease-out not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
734
734
  data-group-heading
735
735
  type="button"
736
736
  [attr.aria-controls]="controls() || null"
@@ -859,7 +859,7 @@ var UiRowLink = class UiRowLink {
859
859
  classes = computed(() => this.stretch() ? "block max-w-full truncate rounded-control text-left font-medium outline-none after:absolute after:inset-0 after:rounded-control after:content-[\"\"] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--ring)" : "block max-w-full truncate rounded-sm text-left font-medium underline-offset-[3px] outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
860
860
  static ɵfac = i0.ɵɵngDeclareFactory({
861
861
  minVersion: "12.0.0",
862
- version: "22.2.0",
862
+ version: "22.2.1",
863
863
  ngImport: i0,
864
864
  type: UiRowLink,
865
865
  deps: [],
@@ -867,7 +867,7 @@ var UiRowLink = class UiRowLink {
867
867
  });
868
868
  static ɵdir = i0.ɵɵngDeclareDirective({
869
869
  minVersion: "17.1.0",
870
- version: "22.2.0",
870
+ version: "22.2.1",
871
871
  type: UiRowLink,
872
872
  isStandalone: true,
873
873
  selector: "a[uiRowLink], button[uiRowLink]",
@@ -896,7 +896,7 @@ var UiRowLink = class UiRowLink {
896
896
  };
897
897
  i0.ɵɵngDeclareClassMetadata({
898
898
  minVersion: "12.0.0",
899
- version: "22.2.0",
899
+ version: "22.2.1",
900
900
  ngImport: i0,
901
901
  type: UiRowLink,
902
902
  decorators: [{
@@ -931,7 +931,7 @@ i0.ɵɵngDeclareClassMetadata({
931
931
  var UiRowAction = class UiRowAction {
932
932
  static ɵfac = i0.ɵɵngDeclareFactory({
933
933
  minVersion: "12.0.0",
934
- version: "22.2.0",
934
+ version: "22.2.1",
935
935
  ngImport: i0,
936
936
  type: UiRowAction,
937
937
  deps: [],
@@ -939,7 +939,7 @@ var UiRowAction = class UiRowAction {
939
939
  });
940
940
  static ɵdir = i0.ɵɵngDeclareDirective({
941
941
  minVersion: "14.0.0",
942
- version: "22.2.0",
942
+ version: "22.2.1",
943
943
  type: UiRowAction,
944
944
  isStandalone: true,
945
945
  selector: "[uiRowAction]",
@@ -949,7 +949,7 @@ var UiRowAction = class UiRowAction {
949
949
  };
950
950
  i0.ɵɵngDeclareClassMetadata({
951
951
  minVersion: "12.0.0",
952
- version: "22.2.0",
952
+ version: "22.2.1",
953
953
  ngImport: i0,
954
954
  type: UiRowAction,
955
955
  decorators: [{
@@ -979,7 +979,7 @@ var UiCellSub = class UiCellSub {
979
979
  classes = computed(() => `${this.narrow() ? "lg:hidden " : ""}block truncate text-caption tabular-nums ${SUB_TONE_CLASSES[this.tone()]}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
980
980
  static ɵfac = i0.ɵɵngDeclareFactory({
981
981
  minVersion: "12.0.0",
982
- version: "22.2.0",
982
+ version: "22.2.1",
983
983
  ngImport: i0,
984
984
  type: UiCellSub,
985
985
  deps: [],
@@ -987,7 +987,7 @@ var UiCellSub = class UiCellSub {
987
987
  });
988
988
  static ɵdir = i0.ɵɵngDeclareDirective({
989
989
  minVersion: "17.1.0",
990
- version: "22.2.0",
990
+ version: "22.2.1",
991
991
  type: UiCellSub,
992
992
  isStandalone: true,
993
993
  selector: "[uiCellSub]",
@@ -1013,7 +1013,7 @@ var UiCellSub = class UiCellSub {
1013
1013
  };
1014
1014
  i0.ɵɵngDeclareClassMetadata({
1015
1015
  minVersion: "12.0.0",
1016
- version: "22.2.0",
1016
+ version: "22.2.1",
1017
1017
  ngImport: i0,
1018
1018
  type: UiCellSub,
1019
1019
  decorators: [{
@@ -1 +1 @@
1
- {"version":3,"file":"joanroucoux-cairn-ui-table.mjs","names":[],"sources":["../../../projects/ui/table/table.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, Directive, booleanAttribute, computed, inject, input, model } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Breakpoints a secondary column can be held back until. */\nexport const CELL_BREAKPOINTS = ['md', 'lg'] as const;\nexport type CellBreakpoint = (typeof CELL_BREAKPOINTS)[number];\n\n/** Body row heights. */\nexport const TABLE_ROWS = ['48', '52', '60'] as const;\nexport type TableRow = (typeof TABLE_ROWS)[number];\n\nconst ROW_CLASSES: Record<TableRow, string> = {\n '48': '[--table-row:3rem]',\n '52': '[--table-row:3.25rem]',\n '60': '[--table-row:3.75rem]',\n};\n\nconst FROM_CLASSES: Record<CellBreakpoint, string> = {\n md: 'hidden md:table-cell',\n lg: 'hidden lg:table-cell',\n};\n\nconst TH_CLASSES =\n 'h-[calc(var(--table-head)+var(--table-head-gap))] border-b-(length:--table-head-gap) border-transparent px-2 align-middle text-caption font-medium text-(--subtle-foreground) shadow-(--table-rule)';\nconst TD_CLASSES = 'h-(--table-row) px-2 align-middle text-body';\nconst NUMERIC_CLASSES = 'text-right tabular-nums whitespace-nowrap';\nconst TEXTUAL_CLASSES = 'text-left';\nconst PRIMARY_CLASSES = 'w-full max-w-0';\n\n/**\n * Styled native table. `row` sets the height of every body row, `rule` draws or drops the hairline\n * under the header, `spaced` leaves a gap between the header and the first row.\n *\n * @example\n * <table uiTable row=\"60\" [rule]=\"false\">\n */\n@Directive({\n selector: 'table[uiTable]',\n host: {\n '[class]': 'classes()',\n },\n})\nexport class UiTable {\n readonly row = input<TableRow>('48');\n readonly rule = input(true, { transform: booleanAttribute });\n readonly spaced = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() =>\n [\n 'w-full border-separate border-spacing-0',\n ROW_CLASSES[this.row()],\n this.rule() ? '[--table-rule:inset_0_-1px_0_var(--hairline)]' : '[--table-rule:none]',\n this.spaced() ? '[--table-head-gap:0.25rem]' : '[--table-head-gap:0px]',\n ].join(' '),\n );\n\n constructor() {\n holdTransitionsUntilRendered();\n }\n}\n\n/**\n * Body of one group of rows. `collapsed` hides every `tr[uiTr]` but the group row with `hidden`: the rows\n * stay in the DOM, so a `uiFlipList` around the table sees no item added or removed and slides\n * nothing. A plain `tr` without `uiTr` is not hidden.\n *\n * @example\n * <tbody uiGroup [collapsed]=\"!open()\">\n */\n@Directive({\n selector: 'tbody[uiGroup]',\n host: { class: 'after:table-row after:h-1 after:content-[\"\"]' },\n})\nexport class UiGroup {\n readonly collapsed = input(false, { transform: booleanAttribute });\n}\n\n/**\n * Body or group row. `selected` takes the soft fill, `interactive` (a row that opens something) also\n * presses to it. `group` marks the row that holds a group band: it has no hover state.\n *\n * @example\n * <tr uiTr [selected]=\"open\">...\n * <tr uiTr group><td ui-group-cell name=\"Brokerage\">...\n */\n@Directive({\n selector: 'tr[uiTr]',\n host: {\n '[class]': 'classes()',\n '[attr.aria-selected]': 'selected() ? \"true\" : null',\n '[hidden]': '!group() && body?.collapsed()',\n },\n})\nexport class UiTr {\n protected readonly body = inject(UiGroup, { optional: true });\n\n readonly group = input(false, { transform: booleanAttribute });\n readonly selected = input(false, { transform: booleanAttribute });\n readonly interactive = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() => {\n if (this.group()) {\n return '';\n }\n return [\n 'relative [&>td:first-child]:rounded-l-control [&>td:last-child]:rounded-r-control',\n this.selected() ? '[&>td]:bg-(--soft)' : '',\n 'hover:[&>td]:bg-(--glow) [&>td]:transition-colors [&>td]:duration-(--duration-fast) [&>td]:ease-out',\n this.interactive()\n ? 'active:[&>td]:bg-(--soft) transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale)'\n : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n}\n\nconst cellClasses = (\n base: string,\n numeric: boolean,\n primary: boolean,\n from: CellBreakpoint | null,\n secondary: boolean,\n): string => {\n const breakpoint = from ?? (secondary ? 'lg' : null);\n return [\n base,\n numeric ? NUMERIC_CLASSES : TEXTUAL_CLASSES,\n primary ? PRIMARY_CLASSES : '',\n breakpoint ? FROM_CLASSES[breakpoint] : '',\n ]\n .filter(Boolean)\n .join(' ');\n};\n\n/**\n * Column header. `numeric` right-aligns, `secondary` (or `from`) hides the column below a\n * breakpoint, `primary` makes it the column that absorbs the free width, `tall` is a 40px header,\n * `width` fixes the column width.\n *\n * @example\n * <th uiTh numeric secondary width=\"108px\">Quantity</th>\n */\n@Directive({\n selector: 'th[uiTh]',\n host: {\n '[class]': 'classes()',\n '[style.width]': 'width()',\n '[style.min-width]': 'width()',\n },\n})\nexport class UiTh {\n readonly width = input<string | null>(null);\n readonly numeric = input(false, { transform: booleanAttribute });\n readonly primary = input(false, { transform: booleanAttribute });\n readonly secondary = input(false, { transform: booleanAttribute });\n readonly tall = input(false, { transform: booleanAttribute });\n readonly from = input<CellBreakpoint | null>(null);\n\n protected readonly classes = computed(() =>\n cellClasses(\n `${this.tall() ? '[--table-head:2.5rem]' : '[--table-head:2.25rem]'} ${TH_CLASSES}`,\n this.numeric(),\n this.primary(),\n this.from(),\n this.secondary(),\n ),\n );\n}\n\n/** Body cell. Same inputs as `UiTh` bar `tall` and `width`, which must be set on both to match. */\n@Directive({\n selector: 'td[uiTd]',\n host: {\n '[class]': 'classes()',\n },\n})\nexport class UiTd {\n readonly numeric = input(false, { transform: booleanAttribute });\n readonly primary = input(false, { transform: booleanAttribute });\n readonly secondary = input(false, { transform: booleanAttribute });\n readonly from = input<CellBreakpoint | null>(null);\n\n protected readonly classes = computed(() =>\n cellClasses(TD_CLASSES, this.numeric(), this.primary(), this.from(), this.secondary()),\n );\n}\n\n/** Group band sizes. */\nexport const GROUP_SIZES = ['md', 'lg'] as const;\nexport type GroupSize = (typeof GROUP_SIZES)[number];\n\n/**\n * The band that opens a group of rows: name, meta beside it, the projected total on the right.\n * Spans the whole row through `colspan`.\n *\n * With `collapsible` the band is a button inside the heading, with a chevron that turns when the\n * group is folded. `expanded` is a model: the page keeps the fold memory and sets `collapsed` on the\n * `tbody[uiGroup]`. `toggleDisabled` keeps the button focusable and announced, but a click changes\n * nothing (a filter holds the group open). `controls` is the id of the group it folds.\n *\n * @example\n * <tr uiTr group><td ui-group-cell colspan=\"4\" name=\"Brokerage\" meta=\"Savings plan\">...total...</td></tr>\n * <tr uiTr group><td ui-group-cell collapsible [(expanded)]=\"open\" controls=\"brokerage\" colspan=\"4\" name=\"Brokerage\">...</td></tr>\n */\n@Component({\n selector: 'td[ui-group-cell]',\n imports: [NgTemplateOutlet],\n host: {\n '[class]': 'hostClasses()',\n },\n template: `\n <ng-template #total><ng-content /></ng-template>\n @if (collapsible()) {\n <h2 class=\"m-0 font-normal\">\n <button\n class=\"rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)\"\n data-group-heading\n type=\"button\"\n [attr.aria-controls]=\"controls() || null\"\n [attr.aria-disabled]=\"toggleDisabled() ? 'true' : null\"\n [attr.aria-expanded]=\"expanded()\"\n [class]=\"size() === 'lg' ? 'min-h-12' : 'min-h-11'\"\n (click)=\"toggle()\"\n >\n <span class=\"flex min-w-0 items-center gap-2.5\">\n <svg\n aria-hidden=\"true\"\n class=\"flex-none stroke-(--muted-foreground) transition-transform duration-(--duration-fast) ease-out\"\n fill=\"none\"\n height=\"18\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"1.75\"\n viewBox=\"0 0 24 24\"\n width=\"18\"\n [class.-rotate-90]=\"!expanded()\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n <span class=\"flex min-w-0 items-baseline gap-3\">\n <span class=\"text-body font-semibold whitespace-nowrap\">{{ name() }}</span>\n @if (meta()) {\n <span class=\"text-label truncate text-(--muted-foreground)\">{{ meta() }}</span>\n }\n </span>\n </span>\n <span class=\"text-body font-semibold whitespace-nowrap tabular-nums\">\n <ng-container [ngTemplateOutlet]=\"total\" />\n </span>\n </button>\n </h2>\n } @else {\n <div\n class=\"rounded-control flex items-center justify-between gap-4 bg-(--muted) px-2\"\n [class]=\"size() === 'lg' ? 'min-h-12' : 'min-h-11'\"\n >\n <div class=\"flex min-w-0 items-baseline gap-3\">\n <h2 class=\"text-body m-0 font-semibold whitespace-nowrap outline-none\" data-group-heading tabindex=\"-1\">\n {{ name() }}\n </h2>\n @if (meta()) {\n <span class=\"text-label truncate text-(--muted-foreground)\">{{ meta() }}</span>\n }\n </div>\n <span class=\"font-semibold whitespace-nowrap tabular-nums\"><ng-container [ngTemplateOutlet]=\"total\" /></span>\n </div>\n }\n `,\n})\nexport class UiGroupCell {\n readonly name = input.required<string>();\n readonly meta = input<string>();\n readonly size = input<GroupSize>('md');\n readonly collapsible = input(false, { transform: booleanAttribute });\n readonly expanded = model(true);\n readonly toggleDisabled = input(false, { transform: booleanAttribute });\n readonly controls = input<string>();\n\n protected readonly hostClasses = computed(\n () => `px-0 ${this.size() === 'lg' ? 'pt-3' : 'pt-2.5'} pb-1 align-middle text-body`,\n );\n\n protected toggle(): void {\n if (!this.toggleDisabled()) {\n this.expanded.update((expanded) => !expanded);\n }\n }\n}\n\n/**\n * Makes a link or button the way into its row: by default it stretches over the whole row, so the\n * row is one target. With `[stretch]=\"false\"` only the name is the target. `current` marks the open\n * line. Other controls in the row need `uiRowAction` to stay clickable.\n *\n * @example\n * <td uiTd primary><a uiRowLink href=\"/lines/42\">Ferrari</a></td>\n * <td uiTd primary><a uiRowLink [stretch]=\"false\" href=\"/accounts/3\">Brokerage</a></td>\n */\n@Directive({\n selector: 'a[uiRowLink], button[uiRowLink]',\n host: {\n '[class]': 'classes()',\n '[attr.aria-current]': 'current() ? \"true\" : null',\n },\n})\nexport class UiRowLink {\n readonly stretch = input(true, { transform: booleanAttribute });\n readonly current = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() =>\n this.stretch()\n ? 'block max-w-full truncate rounded-control text-left font-medium outline-none after:absolute after:inset-0 after:rounded-control after:content-[\"\"] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--ring)'\n : 'block max-w-full truncate rounded-sm text-left font-medium underline-offset-[3px] outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',\n );\n}\n\n/** A control in another cell of a stretched-link row: keeps it clickable above the row-wide link. */\n@Directive({\n selector: '[uiRowAction]',\n host: { class: 'relative z-1' },\n})\nexport class UiRowAction {}\n\n/** Tones of a subtitle: subtle (default), `--stale` at 500, or the color of the cell. */\nexport const SUB_TONES = ['subtle', 'stale', 'inherit'] as const;\nexport type SubTone = (typeof SUB_TONES)[number];\n\nconst SUB_TONE_CLASSES: Record<SubTone, string> = {\n subtle: 'font-normal text-(--subtle-foreground)',\n stale: 'font-medium text-(--stale)',\n inherit: 'font-normal',\n};\n\n/**\n * A second line under a cell's main text. `narrow` shows it only under 1024px, for the data held\n * back by `secondary` columns.\n *\n * @example\n * <span uiCellSub narrow>10 × 421.26 € · cost 388.10 €</span>\n * <span uiCellSub tone=\"stale\">Quote of 24/09</span>\n */\n@Directive({\n selector: '[uiCellSub]',\n host: {\n '[class]': 'classes()',\n },\n})\nexport class UiCellSub {\n readonly narrow = input(false, { transform: booleanAttribute });\n readonly tone = input<SubTone>('subtle');\n\n protected readonly classes = computed(\n () =>\n `${this.narrow() ? 'lg:hidden ' : ''}block truncate text-caption tabular-nums ${SUB_TONE_CLASSES[this.tone()]}`,\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"joanroucoux-cairn-ui-table.mjs","names":[],"sources":["../../../projects/ui/table/table.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, Directive, booleanAttribute, computed, inject, input, model } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Breakpoints a secondary column can be held back until. */\nexport const CELL_BREAKPOINTS = ['md', 'lg'] as const;\nexport type CellBreakpoint = (typeof CELL_BREAKPOINTS)[number];\n\n/** Body row heights. */\nexport const TABLE_ROWS = ['48', '52', '60'] as const;\nexport type TableRow = (typeof TABLE_ROWS)[number];\n\nconst ROW_CLASSES: Record<TableRow, string> = {\n '48': '[--table-row:3rem]',\n '52': '[--table-row:3.25rem]',\n '60': '[--table-row:3.75rem]',\n};\n\nconst FROM_CLASSES: Record<CellBreakpoint, string> = {\n md: 'hidden md:table-cell',\n lg: 'hidden lg:table-cell',\n};\n\nconst TH_CLASSES =\n 'h-[calc(var(--table-head)+var(--table-head-gap))] border-b-(length:--table-head-gap) border-transparent px-2 align-middle text-caption font-medium text-(--subtle-foreground) shadow-(--table-rule)';\nconst TD_CLASSES = 'h-(--table-row) px-2 align-middle text-body';\nconst NUMERIC_CLASSES = 'text-right tabular-nums whitespace-nowrap';\nconst TEXTUAL_CLASSES = 'text-left';\nconst PRIMARY_CLASSES = 'w-full max-w-0';\n\n/**\n * Styled native table. `row` sets the height of every body row, `rule` draws or drops the hairline\n * under the header, `spaced` leaves a gap between the header and the first row.\n *\n * @example\n * <table uiTable row=\"60\" [rule]=\"false\">\n */\n@Directive({\n selector: 'table[uiTable]',\n host: {\n '[class]': 'classes()',\n },\n})\nexport class UiTable {\n readonly row = input<TableRow>('48');\n readonly rule = input(true, { transform: booleanAttribute });\n readonly spaced = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() =>\n [\n 'w-full border-separate border-spacing-0',\n ROW_CLASSES[this.row()],\n this.rule() ? '[--table-rule:inset_0_-1px_0_var(--hairline)]' : '[--table-rule:none]',\n this.spaced() ? '[--table-head-gap:0.25rem]' : '[--table-head-gap:0px]',\n ].join(' '),\n );\n\n constructor() {\n holdTransitionsUntilRendered();\n }\n}\n\n/**\n * Body of one group of rows. `collapsed` hides every `tr[uiTr]` but the group row with `hidden`: the rows\n * stay in the DOM, so a `uiFlipList` around the table sees no item added or removed and slides\n * nothing. A plain `tr` without `uiTr` is not hidden.\n *\n * @example\n * <tbody uiGroup [collapsed]=\"!open()\">\n */\n@Directive({\n selector: 'tbody[uiGroup]',\n host: { class: 'after:table-row after:h-1 after:content-[\"\"]' },\n})\nexport class UiGroup {\n readonly collapsed = input(false, { transform: booleanAttribute });\n}\n\n/**\n * Body or group row. `selected` takes the soft fill, `interactive` (a row that opens something) also\n * presses to it. `group` marks the row that holds a group band: it has no hover state.\n *\n * @example\n * <tr uiTr [selected]=\"open\">...\n * <tr uiTr group><td ui-group-cell name=\"Brokerage\">...\n */\n@Directive({\n selector: 'tr[uiTr]',\n host: {\n '[class]': 'classes()',\n '[attr.aria-selected]': 'selected() ? \"true\" : null',\n '[hidden]': '!group() && body?.collapsed()',\n },\n})\nexport class UiTr {\n protected readonly body = inject(UiGroup, { optional: true });\n\n readonly group = input(false, { transform: booleanAttribute });\n readonly selected = input(false, { transform: booleanAttribute });\n readonly interactive = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() => {\n if (this.group()) {\n return '';\n }\n return [\n 'relative [&>td:first-child]:rounded-l-control [&>td:last-child]:rounded-r-control',\n this.selected() ? '[&>td]:bg-(--soft)' : '',\n 'hover:[&>td]:bg-(--glow) [&>td]:transition-colors [&>td]:duration-(--duration-fast) [&>td]:ease-out',\n this.interactive()\n ? 'active:[&>td]:bg-(--soft) transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale)'\n : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n}\n\nconst cellClasses = (\n base: string,\n numeric: boolean,\n primary: boolean,\n from: CellBreakpoint | null,\n secondary: boolean,\n): string => {\n const breakpoint = from ?? (secondary ? 'lg' : null);\n return [\n base,\n numeric ? NUMERIC_CLASSES : TEXTUAL_CLASSES,\n primary ? PRIMARY_CLASSES : '',\n breakpoint ? FROM_CLASSES[breakpoint] : '',\n ]\n .filter(Boolean)\n .join(' ');\n};\n\n/**\n * Column header. `numeric` right-aligns, `secondary` (or `from`) hides the column below a\n * breakpoint, `primary` makes it the column that absorbs the free width, `tall` is a 40px header,\n * `width` fixes the column width.\n *\n * @example\n * <th uiTh numeric secondary width=\"108px\">Quantity</th>\n */\n@Directive({\n selector: 'th[uiTh]',\n host: {\n '[class]': 'classes()',\n '[style.width]': 'width()',\n '[style.min-width]': 'width()',\n },\n})\nexport class UiTh {\n readonly width = input<string | null>(null);\n readonly numeric = input(false, { transform: booleanAttribute });\n readonly primary = input(false, { transform: booleanAttribute });\n readonly secondary = input(false, { transform: booleanAttribute });\n readonly tall = input(false, { transform: booleanAttribute });\n readonly from = input<CellBreakpoint | null>(null);\n\n protected readonly classes = computed(() =>\n cellClasses(\n `${this.tall() ? '[--table-head:2.5rem]' : '[--table-head:2.25rem]'} ${TH_CLASSES}`,\n this.numeric(),\n this.primary(),\n this.from(),\n this.secondary(),\n ),\n );\n}\n\n/** Body cell. Same inputs as `UiTh` bar `tall` and `width`, which must be set on both to match. */\n@Directive({\n selector: 'td[uiTd]',\n host: {\n '[class]': 'classes()',\n },\n})\nexport class UiTd {\n readonly numeric = input(false, { transform: booleanAttribute });\n readonly primary = input(false, { transform: booleanAttribute });\n readonly secondary = input(false, { transform: booleanAttribute });\n readonly from = input<CellBreakpoint | null>(null);\n\n protected readonly classes = computed(() =>\n cellClasses(TD_CLASSES, this.numeric(), this.primary(), this.from(), this.secondary()),\n );\n}\n\n/** Group band sizes. */\nexport const GROUP_SIZES = ['md', 'lg'] as const;\nexport type GroupSize = (typeof GROUP_SIZES)[number];\n\n/**\n * The band that opens a group of rows: name, meta beside it, the projected total on the right.\n * Spans the whole row through `colspan`.\n *\n * With `collapsible` the band is a button inside the heading, with a chevron that turns when the\n * group is folded. `expanded` is a model: the page keeps the fold memory and sets `collapsed` on the\n * `tbody[uiGroup]`. `toggleDisabled` keeps the button focusable and announced, but a click changes\n * nothing (a filter holds the group open). `controls` is the id of the group it folds.\n *\n * @example\n * <tr uiTr group><td ui-group-cell colspan=\"4\" name=\"Brokerage\" meta=\"Savings plan\">...total...</td></tr>\n * <tr uiTr group><td ui-group-cell collapsible [(expanded)]=\"open\" controls=\"brokerage\" colspan=\"4\" name=\"Brokerage\">...</td></tr>\n */\n@Component({\n selector: 'td[ui-group-cell]',\n imports: [NgTemplateOutlet],\n host: {\n '[class]': 'hostClasses()',\n },\n template: `\n <ng-template #total><ng-content /></ng-template>\n @if (collapsible()) {\n <h2 class=\"m-0 font-normal\">\n <button\n class=\"rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left transition-[background-color] duration-(--duration-fast) ease-out not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)\"\n data-group-heading\n type=\"button\"\n [attr.aria-controls]=\"controls() || null\"\n [attr.aria-disabled]=\"toggleDisabled() ? 'true' : null\"\n [attr.aria-expanded]=\"expanded()\"\n [class]=\"size() === 'lg' ? 'min-h-12' : 'min-h-11'\"\n (click)=\"toggle()\"\n >\n <span class=\"flex min-w-0 items-center gap-2.5\">\n <svg\n aria-hidden=\"true\"\n class=\"flex-none stroke-(--muted-foreground) transition-transform duration-(--duration-fast) ease-out\"\n fill=\"none\"\n height=\"18\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"1.75\"\n viewBox=\"0 0 24 24\"\n width=\"18\"\n [class.-rotate-90]=\"!expanded()\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n <span class=\"flex min-w-0 items-baseline gap-3\">\n <span class=\"text-body font-semibold whitespace-nowrap\">{{ name() }}</span>\n @if (meta()) {\n <span class=\"text-label truncate text-(--muted-foreground)\">{{ meta() }}</span>\n }\n </span>\n </span>\n <span class=\"text-body font-semibold whitespace-nowrap tabular-nums\">\n <ng-container [ngTemplateOutlet]=\"total\" />\n </span>\n </button>\n </h2>\n } @else {\n <div\n class=\"rounded-control flex items-center justify-between gap-4 bg-(--muted) px-2\"\n [class]=\"size() === 'lg' ? 'min-h-12' : 'min-h-11'\"\n >\n <div class=\"flex min-w-0 items-baseline gap-3\">\n <h2 class=\"text-body m-0 font-semibold whitespace-nowrap outline-none\" data-group-heading tabindex=\"-1\">\n {{ name() }}\n </h2>\n @if (meta()) {\n <span class=\"text-label truncate text-(--muted-foreground)\">{{ meta() }}</span>\n }\n </div>\n <span class=\"font-semibold whitespace-nowrap tabular-nums\"><ng-container [ngTemplateOutlet]=\"total\" /></span>\n </div>\n }\n `,\n})\nexport class UiGroupCell {\n readonly name = input.required<string>();\n readonly meta = input<string>();\n readonly size = input<GroupSize>('md');\n readonly collapsible = input(false, { transform: booleanAttribute });\n readonly expanded = model(true);\n readonly toggleDisabled = input(false, { transform: booleanAttribute });\n readonly controls = input<string>();\n\n protected readonly hostClasses = computed(\n () => `px-0 ${this.size() === 'lg' ? 'pt-3' : 'pt-2.5'} pb-1 align-middle text-body`,\n );\n\n protected toggle(): void {\n if (!this.toggleDisabled()) {\n this.expanded.update((expanded) => !expanded);\n }\n }\n}\n\n/**\n * Makes a link or button the way into its row: by default it stretches over the whole row, so the\n * row is one target. With `[stretch]=\"false\"` only the name is the target. `current` marks the open\n * line. Other controls in the row need `uiRowAction` to stay clickable.\n *\n * @example\n * <td uiTd primary><a uiRowLink href=\"/lines/42\">Ferrari</a></td>\n * <td uiTd primary><a uiRowLink [stretch]=\"false\" href=\"/accounts/3\">Brokerage</a></td>\n */\n@Directive({\n selector: 'a[uiRowLink], button[uiRowLink]',\n host: {\n '[class]': 'classes()',\n '[attr.aria-current]': 'current() ? \"true\" : null',\n },\n})\nexport class UiRowLink {\n readonly stretch = input(true, { transform: booleanAttribute });\n readonly current = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() =>\n this.stretch()\n ? 'block max-w-full truncate rounded-control text-left font-medium outline-none after:absolute after:inset-0 after:rounded-control after:content-[\"\"] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--ring)'\n : 'block max-w-full truncate rounded-sm text-left font-medium underline-offset-[3px] outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',\n );\n}\n\n/** A control in another cell of a stretched-link row: keeps it clickable above the row-wide link. */\n@Directive({\n selector: '[uiRowAction]',\n host: { class: 'relative z-1' },\n})\nexport class UiRowAction {}\n\n/** Tones of a subtitle: subtle (default), `--stale` at 500, or the color of the cell. */\nexport const SUB_TONES = ['subtle', 'stale', 'inherit'] as const;\nexport type SubTone = (typeof SUB_TONES)[number];\n\nconst SUB_TONE_CLASSES: Record<SubTone, string> = {\n subtle: 'font-normal text-(--subtle-foreground)',\n stale: 'font-medium text-(--stale)',\n inherit: 'font-normal',\n};\n\n/**\n * A second line under a cell's main text. `narrow` shows it only under 1024px, for the data held\n * back by `secondary` columns.\n *\n * @example\n * <span uiCellSub narrow>10 × 421.26 € · cost 388.10 €</span>\n * <span uiCellSub tone=\"stale\">Quote of 24/09</span>\n */\n@Directive({\n selector: '[uiCellSub]',\n host: {\n '[class]': 'classes()',\n },\n})\nexport class UiCellSub {\n readonly narrow = input(false, { transform: booleanAttribute });\n readonly tone = input<SubTone>('subtle');\n\n protected readonly classes = computed(\n () =>\n `${this.narrow() ? 'lg:hidden ' : ''}block truncate text-caption tabular-nums ${SUB_TONE_CLASSES[this.tone()]}`,\n );\n}\n"],"mappings":"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"}
@@ -24,7 +24,7 @@ var UiToasts = class UiToasts {
24
24
  }
25
25
  static ɵfac = i0.ɵɵngDeclareFactory({
26
26
  minVersion: "12.0.0",
27
- version: "22.2.0",
27
+ version: "22.2.1",
28
28
  ngImport: i0,
29
29
  type: UiToasts,
30
30
  deps: [],
@@ -32,7 +32,7 @@ var UiToasts = class UiToasts {
32
32
  });
33
33
  static ɵprov = i0.ɵɵngDeclareInjectable({
34
34
  minVersion: "12.0.0",
35
- version: "22.2.0",
35
+ version: "22.2.1",
36
36
  ngImport: i0,
37
37
  type: UiToasts,
38
38
  providedIn: "root"
@@ -40,7 +40,7 @@ var UiToasts = class UiToasts {
40
40
  };
41
41
  i0.ɵɵngDeclareClassMetadata({
42
42
  minVersion: "12.0.0",
43
- version: "22.2.0",
43
+ version: "22.2.1",
44
44
  ngImport: i0,
45
45
  type: UiToasts,
46
46
  decorators: [{
@@ -134,7 +134,7 @@ var UiToaster = class UiToaster {
134
134
  }
135
135
  static ɵfac = i0.ɵɵngDeclareFactory({
136
136
  minVersion: "12.0.0",
137
- version: "22.2.0",
137
+ version: "22.2.1",
138
138
  ngImport: i0,
139
139
  type: UiToaster,
140
140
  deps: [],
@@ -142,7 +142,7 @@ var UiToaster = class UiToaster {
142
142
  });
143
143
  static ɵcmp = i0.ɵɵngDeclareComponent({
144
144
  minVersion: "17.0.0",
145
- version: "22.2.0",
145
+ version: "22.2.1",
146
146
  type: UiToaster,
147
147
  isStandalone: true,
148
148
  selector: "ui-toaster",
@@ -202,7 +202,7 @@ var UiToaster = class UiToaster {
202
202
  };
203
203
  i0.ɵɵngDeclareClassMetadata({
204
204
  minVersion: "12.0.0",
205
- version: "22.2.0",
205
+ version: "22.2.1",
206
206
  ngImport: i0,
207
207
  type: UiToaster,
208
208
  decorators: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@joanroucoux/cairn-ui",
3
- "version": "0.9.1",
3
+ "version": "0.10.0",
4
4
  "description": "Cairn UI — a monochrome, accessible Angular design system.",
5
5
  "keywords": [
6
6
  "angular",
@@ -132,6 +132,10 @@
132
132
  "types": "./types/joanroucoux-cairn-ui-group-header.d.ts",
133
133
  "default": "./fesm2022/joanroucoux-cairn-ui-group-header.mjs"
134
134
  },
135
+ "./icon-toggle": {
136
+ "types": "./types/joanroucoux-cairn-ui-icon-toggle.d.ts",
137
+ "default": "./fesm2022/joanroucoux-cairn-ui-icon-toggle.mjs"
138
+ },
135
139
  "./input": {
136
140
  "types": "./types/joanroucoux-cairn-ui-input.d.ts",
137
141
  "default": "./fesm2022/joanroucoux-cairn-ui-input.mjs"
package/styles/theme.css CHANGED
@@ -11,6 +11,7 @@
11
11
  --text-caption--letter-spacing: 0.01em;
12
12
  --text-label: 0.875rem;
13
13
  --text-label--line-height: 1.25rem;
14
+ --text-label--letter-spacing: normal;
14
15
  --text-body: 1rem;
15
16
  --text-body--line-height: 1.5rem;
16
17
  --text-title: 1.25rem;
package/styles/tokens.css CHANGED
@@ -54,6 +54,7 @@
54
54
  --text-display--line-height: 2.75rem;
55
55
  --tracking-display: -0.02em;
56
56
  --tracking-caption: 0.01em;
57
+ --tracking-label: normal;
57
58
 
58
59
  --gutter: 1rem;
59
60
  --inset-card: 1rem;
@@ -7,6 +7,7 @@ type DrawerCloseReason = (typeof DRAWER_CLOSE_REASONS)[number];
7
7
  * Modal side panel on the native <dialog>, against the right edge at full height, for a detail opened from a list.
8
8
  *
9
9
  * Without `heading` it draws no header: the content brings its own title and close button, and `label` names it.
10
+ * With both, `label` names the panel and the heading stays its visible title.
10
11
  *
11
12
  * @example
12
13
  * <ui-drawer heading="Northwind Monde" closeLabel="Fermer le détail" [open]="open()" (dismissed)="open.set(false)">
@@ -27,6 +28,7 @@ export declare class UiDrawer {
27
28
  protected readonly descriptionId: string;
28
29
  protected readonly describedBy: import("@angular/core").Signal<string | null>;
29
30
  protected readonly ariaLabel: import("@angular/core").Signal<string | null | undefined>;
31
+ protected readonly labelledBy: import("@angular/core").Signal<string | null>;
30
32
  protected readonly modal: ModalClose<"escape" | "backdrop" | "cross" | "programmatic">;
31
33
  static ɵfac: i0.ɵɵFactoryDeclaration<UiDrawer, never>;
32
34
  static ɵcmp: i0.ɵɵComponentDeclaration<UiDrawer, "ui-drawer", never, {
@@ -0,0 +1,13 @@
1
+ import * as i0 from "@angular/core";
2
+ /**
3
+ * Round icon button that switches something on and off, such as the header eye that hides the amounts.
4
+ * The state lives in `aria-pressed`, which also draws the soft fill. Only the press scale transitions:
5
+ * the fill changes at once.
6
+ *
7
+ * @example
8
+ * <button uiIconToggle aria-label="Hide amounts" [attr.aria-pressed]="hidden"><svg>...</svg></button>
9
+ */
10
+ export declare class UiIconToggle {
11
+ static ɵfac: i0.ɵɵFactoryDeclaration<UiIconToggle, never>;
12
+ static ɵdir: i0.ɵɵDirectiveDeclaration<UiIconToggle, "button[uiIconToggle]", never, {}, {}, never, never, true, never>;
13
+ }
@@ -62,6 +62,7 @@ export declare class UiFlipItem {
62
62
  * `--soft` fill, then fades back. Each new non-null token plays once, so pass a fresh value per
63
63
  * event (an object or a counter), not a boolean. A non-null token present at first render plays on
64
64
  * arrival. Can sit on the same element as `animate.enter`: it waits for that fade to finish.
65
+ * `highlighted` fires when the flash starts, after any scroll and enter fade, so a toast can follow it.
65
66
  *
66
67
  * Give the element `scroll-margin-top` and `scroll-margin-bottom` equal to what is pinned above and
67
68
  * below it (header, tab bar, action bar), or a row under them counts as on screen. For an arrival
@@ -73,6 +74,7 @@ export declare class UiFlipItem {
73
74
  */
74
75
  export declare class UiHighlight {
75
76
  readonly uiHighlight: import("@angular/core").InputSignal<unknown>;
77
+ readonly highlighted: import("@angular/core").OutputEmitterRef<void>;
76
78
  private readonly host;
77
79
  private readonly reduced;
78
80
  private cancel;
@@ -87,7 +89,9 @@ export declare class UiHighlight {
87
89
  "required": false;
88
90
  "isSignal": true;
89
91
  };
90
- }, {}, never, never, true, never>;
92
+ }, {
93
+ "highlighted": "highlighted";
94
+ }, never, never, true, never>;
91
95
  }
92
96
  /**
93
97
  * A signal that follows the user's `prefers-reduced-motion` preference. Call it in an injection