@0001-labs/design-system-1 0.3.1 → 0.3.2

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 (59) hide show
  1. package/DS1/0-face/generated/toast-assets.ts +1 -1
  2. package/DS1/1-root/card.css +2 -2
  3. package/DS1/1-root/cjk.css +1 -1
  4. package/DS1/1-root/component-tokens.css +12 -0
  5. package/DS1/1-root/context.css +1 -1
  6. package/DS1/1-root/controls.css +8 -8
  7. package/DS1/1-root/document.css +2 -2
  8. package/DS1/1-root/empty.css +2 -2
  9. package/DS1/1-root/figures.css +2 -2
  10. package/DS1/1-root/fonts/Inter-LICENSE.md +91 -2
  11. package/DS1/1-root/fonts.css +5 -4
  12. package/DS1/1-root/footer.css +2 -2
  13. package/DS1/1-root/header.css +5 -4
  14. package/DS1/1-root/inter-arrows.css +11 -0
  15. package/DS1/1-root/notice.css +2 -2
  16. package/DS1/1-root/one.css +3 -3
  17. package/DS1/1-root/progress.css +3 -3
  18. package/DS1/1-root/prose.css +5 -5
  19. package/DS1/1-root/row.css +1 -1
  20. package/DS1/1-root/table.css +1 -1
  21. package/DS1/1-root/text.css +5 -5
  22. package/DS1/2-core/chart/chart.css +1 -1
  23. package/DS1/2-core/styles/ds-activity.css +1 -1
  24. package/DS1/2-core/styles/ds-avatar.css +1 -1
  25. package/DS1/2-core/styles/ds-badge.css +1 -1
  26. package/DS1/2-core/styles/ds-button-host.css +1 -1
  27. package/DS1/2-core/styles/ds-button-split.css +1 -1
  28. package/DS1/2-core/styles/ds-button.css +3 -3
  29. package/DS1/2-core/styles/ds-composer.css +1 -1
  30. package/DS1/2-core/styles/ds-image.css +1 -1
  31. package/DS1/2-core/styles/ds-input.css +3 -3
  32. package/DS1/2-core/styles/ds-number.css +1 -1
  33. package/DS1/2-core/styles/ds-radio.css +1 -1
  34. package/DS1/2-core/styles/ds-tag.css +1 -1
  35. package/DS1/2-core/styles/ds-text.css +5 -5
  36. package/DS1/2-core/styles/ds-toast.css +1 -1
  37. package/DS1/2-core/styles/ds-token.css +1 -1
  38. package/DS1/2-core/styles/ds-tooltip.css +1 -1
  39. package/DS1/3-unit/styles/ds-calendar.css +4 -4
  40. package/DS1/3-unit/styles/ds-list.css +1 -1
  41. package/DS1/3-unit/styles/ds-matrix.css +2 -2
  42. package/DS1/3-unit/styles/ds-menu.css +1 -1
  43. package/DS1/3-unit/styles/ds-select.css +1 -1
  44. package/DS1/3-unit/styles/ds-sidebar.css +1 -1
  45. package/DS1/3-unit/styles/ds-table-of-contents.css +1 -1
  46. package/DS1/3-unit/styles/ds-token-field.css +1 -1
  47. package/DS1/4-page/styles/ds-overlay.css +1 -1
  48. package/DS1/4-page/styles/ds-page.css +1 -1
  49. package/DS1/4-page/styles/ds-panel.css +1 -1
  50. package/dist/0-face/generated/toast-assets.d.ts.map +1 -1
  51. package/dist/0-face/generated/toast-assets.js +1 -1
  52. package/dist/design-system-1.bundle.js +37 -37
  53. package/dist/design-system-1.bundle.js.map +1 -1
  54. package/dist/design-system-1.bundle.min.js +233 -233
  55. package/dist/design-system-1.bundle.min.js.map +1 -1
  56. package/dist/design-system-1.css +1 -1
  57. package/dist/feedback.js +1 -1
  58. package/dist/feedback.js.map +1 -1
  59. package/package.json +2 -2
package/DS1/2-core/styles/ds-badge.css CHANGED
@@ -13,7 +13,7 @@
13
13
  padding-inline: calc(4px * var(--ds-sf));
14
14
  background: var(--ds-badge-background, var(--ds-fill));
15
15
  color: var(--ds-badge-color, var(--ds-text-color));
16
- font-family: var(--ds-typeface-regular);
16
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
17
17
  font-feature-settings: var(--ds-font-features);
18
18
  font-size: var(--ds-type-size-default);
19
19
  line-height: var(--ds-type-lineheight-default);
package/DS1/2-core/styles/ds-button-host.css CHANGED
@@ -19,7 +19,7 @@
19
19
  corner-shape: var(--ds-corner-shape, round) !important;
20
20
  background: var(--ds-button-background, transparent) !important;
21
21
  color: var(--ds-button-color, var(--ds-button-text-color)) !important;
22
- font-family: var(--ds-typeface-regular) !important;
22
+ font-family: "Inter Arrows", var(--ds-typeface-regular) !important;
23
23
  font-feature-settings: var(--ds-font-features) !important;
24
24
  font-size: var(--_button-font-size, var(--ds-type-size-default)) !important;
25
25
  font-weight: var(--ds-type-weight-default) !important;
package/DS1/2-core/styles/ds-button-split.css CHANGED
@@ -29,7 +29,7 @@
29
29
  corner-shape: var(--ds-corner-shape, round);
30
30
  background: var(--ds-button-background-color-secondary);
31
31
  color: var(--ds-text-color-muted);
32
- font-family: var(--ds-typeface-regular);
32
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
33
33
  font-feature-settings: var(--ds-font-features);
34
34
  font-size: var(--ds-type-size-default);
35
35
  font-weight: var(--ds-type-weight-default);
package/DS1/2-core/styles/ds-button.css CHANGED
@@ -74,7 +74,7 @@
74
74
  cursor: pointer;
75
75
  padding: 0;
76
76
  color: var(--button-color, var(--button-text-color));
77
- font-family: var(--ds-typeface-regular);
77
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
78
78
  font-size: var(--_button-font-size, var(--ds-type-size-default));
79
79
  line-height: var(--ds-type-lineheight-default);
80
80
  letter-spacing: var(--ds-type-letterspacing-default);
@@ -110,7 +110,7 @@
110
110
  background-color: var(--ds-button-primary-fill, var(--accent-color));
111
111
  color: var(--ds-button-primary-text, var(--button-text-color-on-light, var(--black)));
112
112
  text-decoration-line: none;
113
- font-family: var(--ds-typeface-regular);
113
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
114
114
  padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));
115
115
  }
116
116
 
@@ -119,7 +119,7 @@
119
119
  :is(button, a)[secondary] {
120
120
  background-color: var(--ds-button-secondary-fill, var(--button-background-color-secondary));
121
121
  color: var(--ds-button-color, var(--ds-button-text-color));
122
- font-family: var(--ds-typeface-regular);
122
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
123
123
  padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));
124
124
  }
125
125
 
package/DS1/2-core/styles/ds-composer.css CHANGED
@@ -9,7 +9,7 @@
9
9
  padding: calc(4px * var(--ds-sf)) !important;
10
10
  border: 1px solid var(--ds-border-color) !important;
11
11
  border-radius: calc(4px * var(--ds-sf)) !important;
12
- font-family: var(--ds-typeface-regular) !important;
12
+ font-family: "Inter Arrows", var(--ds-typeface-regular) !important;
13
13
  font-size: var(--ds-type-size-default) !important;
14
14
  font-weight: var(--ds-type-weight-default) !important;
15
15
  line-height: var(--ds-type-lineheight-default) !important;
package/DS1/2-core/styles/ds-image.css CHANGED
@@ -8,7 +8,7 @@ img { display: block; width: 100%; max-width: 100%; }
8
8
  figcaption {
9
9
  margin-top: calc(var(--ds-unit) / 2);
10
10
  color: var(--ds-text-color-muted);
11
- font-family: var(--ds-typeface-regular);
11
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
12
12
  font-feature-settings: var(--ds-font-features);
13
13
  font-size: var(--ds-type-size-default);
14
14
  line-height: var(--ds-row-height);
package/DS1/2-core/styles/ds-input.css CHANGED
@@ -29,7 +29,7 @@
29
29
  }
30
30
 
31
31
  label {
32
- font-family: var(--ds-typeface-regular);
32
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
33
33
  font-size: var(--ds-type-size-default);
34
34
  line-height: var(--ds-row-height);
35
35
  color: var(--ds-text-color);
@@ -47,7 +47,7 @@ label {
47
47
  border: none;
48
48
  padding: 0 calc(2px * var(--ds-sf, 1));
49
49
  font-size: var(--ds-type-size-default);
50
- font-family: var(--ds-typeface-regular);
50
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
51
51
  /* The field's ink, whole, before focus too: a dimmed grey at half opacity read at 2:1 (color.text-contrast). */
52
52
  color: var(--ds-input-color, #2a2a2a);
53
53
  line-height: calc(16px * var(--ds-sf, 1));
@@ -122,7 +122,7 @@ input {
122
122
  margin: 0;
123
123
  min-width: 0;
124
124
  color: var(--ds-danger-color);
125
- font-family: var(--ds-typeface-regular);
125
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
126
126
  font-feature-settings: var(--ds-font-features);
127
127
  font-size: var(--ds-type-size-default);
128
128
  font-weight: var(--ds-type-weight-default);
package/DS1/2-core/styles/ds-number.css CHANGED
@@ -28,7 +28,7 @@
28
28
  corner-shape: var(--ds-corner-shape, round);
29
29
  background: var(--ds-number-background, var(--ds-input-background));
30
30
  color: var(--ds-number-color, var(--ds-input-color));
31
- font-family: var(--ds-typeface-regular);
31
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
32
32
  font-feature-settings: var(--ds-font-features);
33
33
  font-size: var(--ds-type-size-default);
34
34
  font-weight: var(--ds-type-weight-default);
package/DS1/2-core/styles/ds-radio.css CHANGED
@@ -77,7 +77,7 @@
77
77
  align-self: center;
78
78
  overflow: hidden;
79
79
  padding-inline: calc(4px * var(--ds-sf));
80
- font: 400 var(--ds-type-size-default) / var(--ds-type-lineheight-default) var(--ds-typeface-regular);
80
+ font: 400 var(--ds-type-size-default) / var(--ds-type-lineheight-default) "Inter Arrows", var(--ds-typeface-regular);
81
81
  letter-spacing: var(--ds-type-letterspacing-default);
82
82
  white-space: nowrap;
83
83
  text-align: center;
package/DS1/2-core/styles/ds-tag.css CHANGED
@@ -31,7 +31,7 @@
31
31
  background: var(--ds-tag-background, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 28%, white), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 20%, var(--ds-black, #2a2a2a))));
32
32
  /* Tint the dark-mode ink: raw grey/accent colours cannot meet 4.5:1 on this fill. */
33
33
  color: var(--ds-tag-color, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 45%, black), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 30%, white)));
34
- font-family: var(--ds-typeface-regular);
34
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
35
35
  font-feature-settings: var(--ds-font-features);
36
36
  font-size: var(--_tag-font-size, var(--ds-type-size-default));
37
37
  line-height: var(--_tag-height, var(--ds-control-height));
package/DS1/2-core/styles/ds-text.css CHANGED
@@ -10,7 +10,7 @@
10
10
  align-items: center;
11
11
  justify-content: flex-start;
12
12
  height: var(--ds-control-height);
13
- font-family: var(--ds-typeface-regular);
13
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
14
14
  font-size: var(--ds-type-size-default);
15
15
  font-weight: var(--ds-type-weight-default);
16
16
  line-height: var(--ds-type-lineheight-default);
@@ -26,17 +26,17 @@
26
26
  :host([hidden]) { display: none !important; }
27
27
 
28
28
  :host([data-language="ja"]) {
29
- font-family: var(--ds-typeface-regular-jp, var(--typeface-regular-jp));
29
+ font-family: "Inter Arrows", var(--ds-typeface-regular-jp, var(--typeface-regular-jp));
30
30
  }
31
31
 
32
32
  :host([data-language="zh"]),
33
33
  :host([data-language="zh-hant"]) {
34
- font-family: var(--ds-typeface-regular-zh-hant, var(--typeface-regular-zh-hant));
34
+ font-family: "Inter Arrows", var(--ds-typeface-regular-zh-hant, var(--typeface-regular-zh-hant));
35
35
  font-weight: var(--ds-type-weight-default, 400);
36
36
  }
37
37
 
38
38
  :host([data-language="zh-hans"]) {
39
- font-family: var(--ds-typeface-regular-zh-hans, var(--typeface-regular-zh-hans));
39
+ font-family: "Inter Arrows", var(--ds-typeface-regular-zh-hans, var(--typeface-regular-zh-hans));
40
40
  font-weight: var(--ds-type-weight-default, 400);
41
41
  }
42
42
 
@@ -54,7 +54,7 @@
54
54
  min-width: 0;
55
55
  max-width: 100%;
56
56
  overflow: var(--ds-text-overflow, hidden);
57
- font-family: var(--ds-typeface-regular);
57
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
58
58
  font-feature-settings: var(--ds-font-features);
59
59
  font-size: var(--ds-type-size-default);
60
60
  font-weight: var(--ds-type-weight-default);
package/DS1/2-core/styles/ds-toast.css CHANGED
@@ -59,7 +59,7 @@ ol[data-x="center"] { left: 50%; transform: translateX(-50%); }
59
59
  border-radius: var(--ds-radius);
60
60
  background: var(--ds-toast-background);
61
61
  color: var(--ds-toast-color);
62
- font-family: var(--ds-typeface-regular);
62
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
63
63
  font-feature-settings: var(--ds-font-features);
64
64
  font-size: var(--ds-type-size-default);
65
65
  line-height: var(--ds-control-height);
package/DS1/2-core/styles/ds-token.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @import "../../1-root/component-metrics.css";
2
2
  :host { display: inline-flex; max-width: 100%; min-width: 0; vertical-align: middle; }
3
3
  :host([hidden]) { display: none !important; }
4
- .frame { display: flex; align-items: center; box-sizing: border-box; max-width: 100%; min-width: 0; height: var(--ds-row-height); padding-inline-start: calc(4px * var(--ds-sf)); background: var(--ds-fill); color: var(--ds-text-color); border-radius: var(--ds-radius); font-family: var(--ds-typeface-regular); font-size: var(--ds-type-size-default); line-height: var(--ds-type-lineheight-default); letter-spacing: var(--ds-type-letterspacing-default); }
4
+ .frame { display: flex; align-items: center; box-sizing: border-box; max-width: 100%; min-width: 0; height: var(--ds-row-height); padding-inline-start: calc(4px * var(--ds-sf)); background: var(--ds-fill); color: var(--ds-text-color); border-radius: var(--ds-radius); font-family: "Inter Arrows", var(--ds-typeface-regular); font-size: var(--ds-type-size-default); line-height: var(--ds-type-lineheight-default); letter-spacing: var(--ds-type-letterspacing-default); }
5
5
  .copy { display: flex; align-items: baseline; gap: calc(4px * var(--ds-sf)); min-width: 0; padding-inline: calc(4px * var(--ds-sf)); }
6
6
  .copy > span, small { overflow: hidden; text-overflow: clip; white-space: nowrap; min-width: 0; }
7
7
  /* Cut words fade over their last square, never an ellipsis (0-face/cut-fade.ts marks them). */
package/DS1/2-core/styles/ds-tooltip.css CHANGED
@@ -26,7 +26,7 @@
26
26
  border-radius: calc(4px * var(--ds-sf, var(--sf, 1)));
27
27
  background: var(--ds-tooltip-background, light-dark(var(--ds-black, var(--black)), var(--ds-white, var(--white))));
28
28
  color: var(--ds-tooltip-color, light-dark(var(--ds-white, var(--white)), var(--ds-black, var(--black))));
29
- font-family: var(--ds-typeface-regular, var(--typeface-regular));
29
+ font-family: "Inter Arrows", var(--ds-typeface-regular, var(--typeface-regular));
30
30
  font-size: calc(14px * var(--ds-sf, var(--sf, 1)));
31
31
  line-height: calc(16px * var(--ds-sf, var(--sf, 1)));
32
32
  font-weight: 400;
package/DS1/3-unit/styles/ds-calendar.css CHANGED
@@ -49,7 +49,7 @@
49
49
  display: inline-block;
50
50
  vertical-align: top;
51
51
  color: var(--ds-text-color);
52
- font-family: var(--ds-typeface-regular);
52
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
53
53
  font-feature-settings: var(--ds-font-features);
54
54
  font-size: var(--ds-type-size-default);
55
55
  font-weight: var(--ds-type-weight-default);
@@ -80,7 +80,7 @@
80
80
  flex: 1 1 auto;
81
81
  min-width: 0;
82
82
  overflow: hidden;
83
- font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));
83
+ font-family: "Inter Arrows", var(--ds-typeface-medium, var(--ds-typeface-regular));
84
84
  text-overflow: clip;
85
85
  white-space: nowrap;
86
86
  }
@@ -144,7 +144,7 @@
144
144
  background: transparent;
145
145
  color: var(--ds-text-color);
146
146
  font: inherit;
147
- font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));
147
+ font-family: "Inter Arrows", var(--ds-typeface-medium, var(--ds-typeface-regular));
148
148
  line-height: var(--ds-control-height);
149
149
  letter-spacing: inherit;
150
150
  cursor: pointer;
@@ -321,7 +321,7 @@
321
321
  white-space: nowrap;
322
322
  }
323
323
  .weekday-name[data-today] { color: var(--ds-calendar-today); }
324
- .week-number { font-family: var(--ds-typeface-compressed); }
324
+ .week-number { font-family: "Inter Arrows", var(--ds-typeface-compressed); }
325
325
  .day.outside .date-line { justify-content: flex-start; }
326
326
 
327
327
  /* A compact day: the date centred in its square, in the ink; with events,
package/DS1/3-unit/styles/ds-list.css CHANGED
@@ -38,7 +38,7 @@
38
38
  padding-top: calc(4px * var(--ds-sf));
39
39
  overflow: hidden;
40
40
  color: var(--ds-list-heading-color, var(--ds-text-color-muted));
41
- font-family: var(--ds-typeface-regular);
41
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
42
42
  font-feature-settings: var(--ds-font-features);
43
43
  font-size: var(--ds-type-size-default);
44
44
  font-weight: var(--ds-type-weight-default);
package/DS1/3-unit/styles/ds-matrix.css CHANGED
@@ -14,7 +14,7 @@
14
14
  display: block;
15
15
  min-width: 0;
16
16
  color: var(--ds-text-color);
17
- font-family: var(--ds-typeface-regular);
17
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
18
18
  font-feature-settings: var(--ds-font-features);
19
19
  font-size: var(--ds-type-size-default);
20
20
  font-weight: var(--ds-type-weight-default);
@@ -50,7 +50,7 @@
50
50
  border-inline-end: 1px solid var(--ds-paper);
51
51
  background: var(--ds-matrix-colour);
52
52
  color: var(--ds-slate);
53
- font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));
53
+ font-family: "Inter Arrows", var(--ds-typeface-medium, var(--ds-typeface-regular));
54
54
  }
55
55
  .group > span {
56
56
  position: absolute;
package/DS1/3-unit/styles/ds-menu.css CHANGED
@@ -31,7 +31,7 @@
31
31
  background: var(--ds-paper);
32
32
  color: var(--ds-text-color);
33
33
  box-shadow: none;
34
- font-family: var(--ds-typeface-regular);
34
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
35
35
  font-feature-settings: var(--ds-font-features);
36
36
  font-size: var(--ds-type-size-default);
37
37
  line-height: var(--ds-type-lineheight-default);
package/DS1/3-unit/styles/ds-select.css CHANGED
@@ -40,7 +40,7 @@
40
40
  corner-shape: var(--ds-corner-shape, round) !important;
41
41
  background: var(--ds-input-background) !important;
42
42
  color: var(--ds-input-color) !important;
43
- font-family: var(--ds-typeface-regular) !important;
43
+ font-family: "Inter Arrows", var(--ds-typeface-regular) !important;
44
44
  font-size: var(--ds-type-size-default) !important;
45
45
  font-weight: var(--ds-type-weight-default) !important;
46
46
  letter-spacing: var(--ds-type-letterspacing-default) !important;
package/DS1/3-unit/styles/ds-sidebar.css CHANGED
@@ -8,7 +8,7 @@
8
8
  min-width: 0;
9
9
  min-height: 0;
10
10
  color: var(--ds-text-color);
11
- font-family: var(--ds-typeface-regular);
11
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
12
12
  font-feature-settings: var(--ds-font-features);
13
13
  font-size: var(--ds-type-size-default);
14
14
  font-weight: var(--ds-type-weight-default);
package/DS1/3-unit/styles/ds-table-of-contents.css CHANGED
@@ -4,7 +4,7 @@
4
4
  width: var(--ds-toc-width, calc(12 * var(--ds-unit)));
5
5
  max-width: 100%;
6
6
  color: var(--ds-text-color);
7
- font-family: var(--ds-typeface-regular);
7
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
8
8
  font-size: var(--ds-type-size-default);
9
9
  font-weight: var(--ds-type-weight-default);
10
10
  line-height: var(--ds-type-lineheight-default);
package/DS1/3-unit/styles/ds-token-field.css CHANGED
@@ -5,7 +5,7 @@
5
5
  .frame:focus-within { outline: 1px solid var(--ds-focus-ring); outline-offset: -1px; }
6
6
  slot { display: contents; }
7
7
  .entry { display: flex; align-items: center; flex: 1 1 calc(8 * var(--ds-unit)); min-width: min(100%, calc(4 * var(--ds-unit))); max-width: 100%; height: var(--ds-row-height); }
8
- ::slotted(input) { box-sizing: border-box !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: 100% !important; height: var(--ds-row-height) !important; margin: 0 !important; padding: 0 calc(4px * var(--ds-sf)) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ds-text-color) !important; font-family: var(--ds-typeface-regular) !important; font-size: var(--ds-type-size-default) !important; line-height: var(--ds-type-lineheight-default) !important; letter-spacing: var(--ds-type-letterspacing-default) !important; outline: none !important; box-shadow: none !important; }
8
+ ::slotted(input) { box-sizing: border-box !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: 100% !important; height: var(--ds-row-height) !important; margin: 0 !important; padding: 0 calc(4px * var(--ds-sf)) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ds-text-color) !important; font-family: "Inter Arrows", var(--ds-typeface-regular) !important; font-size: var(--ds-type-size-default) !important; line-height: var(--ds-type-lineheight-default) !important; letter-spacing: var(--ds-type-letterspacing-default) !important; outline: none !important; box-shadow: none !important; }
9
9
  ::slotted(input:disabled) { opacity: .5; }
10
10
  ::slotted(ds-token) { max-width: 100%; }
11
11
  ds-button { flex: 0 0 auto; --ds-button-width: var(--ds-row-height); --ds-button-height: var(--ds-row-height); }
package/DS1/4-page/styles/ds-overlay.css CHANGED
@@ -17,7 +17,7 @@ ds-overlay > dialog {
17
17
  box-shadow: none;
18
18
  overflow: var(--ds-overlay-overflow, auto);
19
19
  overscroll-behavior: contain;
20
- font-family: var(--ds-typeface-regular);
20
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
21
21
  font-feature-settings: var(--ds-font-features);
22
22
  font-size: var(--ds-type-size-default);
23
23
  font-weight: var(--ds-type-weight-default);
package/DS1/4-page/styles/ds-page.css CHANGED
@@ -22,7 +22,7 @@
22
22
  container-type: inline-size;
23
23
  min-width: 0;
24
24
  color: var(--ds-text-color);
25
- font-family: var(--ds-typeface-regular);
25
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
26
26
  font-feature-settings: var(--ds-font-features);
27
27
  font-size: var(--ds-type-size-default);
28
28
  line-height: var(--ds-type-lineheight-default);
package/DS1/4-page/styles/ds-panel.css CHANGED
@@ -10,7 +10,7 @@
10
10
  min-height: 0;
11
11
  background: var(--ds-paper);
12
12
  color: var(--ds-text-color);
13
- font-family: var(--ds-typeface-regular);
13
+ font-family: "Inter Arrows", var(--ds-typeface-regular);
14
14
  font-feature-settings: var(--ds-font-features);
15
15
  font-size: var(--ds-type-size-default);
16
16
  line-height: var(--ds-type-lineheight-default);
package/dist/0-face/generated/toast-assets.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"toast-assets.d.ts","sourceRoot":"","sources":["../../../DS1/0-face/generated/toast-assets.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,iEAAiE;AACjE,eAAO,MAAM,WAAW,EAAE,MAAq0N,CAAC;AAEh2N,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,eAAe,GAAG,SAAS,CAAC;AAE5E,qFAAqF;AACrF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAK9D,CAAC"}
1
+ {"version":3,"file":"toast-assets.d.ts","sourceRoot":"","sources":["../../../DS1/0-face/generated/toast-assets.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,iEAAiE;AACjE,eAAO,MAAM,WAAW,EAAE,MAAu1N,CAAC;AAEl3N,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,eAAe,GAAG,SAAS,CAAC;AAE5E,qFAAqF;AACrF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAK9D,CAAC"}
package/dist/0-face/generated/toast-assets.js CHANGED
@@ -4,7 +4,7 @@
4
4
  * files and run `vp run generate:toast-assets`.
5
5
  */
6
6
  /** The toast's stylesheet, the same one `<ds-toast>` imports. */
7
- export const toastStyles = "[data-ds-shape=\"square\"], :host([data-ds-shape=\"square\"]){--ds-corner-size: 0px;--ds-corner-shape: round;--ds-button-inset: 0.5px}[data-ds-shape=\"rounded\"], :host([data-ds-shape=\"rounded\"]){--ds-corner-size: 4px;--ds-corner-shape: round;--ds-button-inset: 2.5px}[data-ds-shape=\"circular\"], :host([data-ds-shape=\"circular\"]){--ds-corner-size: 999px;--ds-corner-shape: round;--ds-button-inset: 5px}@supports (corner-shape: squircle){[data-ds-shape=\"rounded\"], :host([data-ds-shape=\"rounded\"]){--ds-corner-size: 8px;--ds-corner-shape: squircle}}:root, :host, :where([data-ds-surface]){--ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));--ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));--ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));--ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));--ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));--ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));--ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));--ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));--ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));--ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));--ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1))}:host{--ds-toast-width: calc(16 * var(--ds-unit));--ds-toast-offset: var(--ds-unit);--ds-toast-gap: calc(var(--ds-unit) - var(--ds-control-height));--ds-toast-background: var(--ds-tooltip-background, light-dark(var(--ds-black, #2a2a2a), var(--ds-white, #ffffff)));--ds-toast-color: var(--ds-tooltip-color, light-dark(var(--ds-white, #ffffff), var(--ds-black, #2a2a2a)));display: contents}section{display: contents}ol{--lift: -1;position: fixed;z-index: 2147483000;inset: auto;overflow: visible;border: 0;background: transparent;color: inherit;box-sizing: border-box;width: min(var(--ds-toast-width), calc(100% - 2 * var(--ds-toast-offset)));height: calc(var(--height) + var(--gaps) * var(--ds-toast-gap));margin: 0;padding: 0;list-style: none;outline: none;pointer-events: none}ol[data-y=\"top\"]{--lift: 1;top: calc(var(--ds-toast-offset) + env(safe-area-inset-top, 0px))}ol[data-y=\"bottom\"]{bottom: calc(var(--ds-toast-offset) + env(safe-area-inset-bottom, 0px))}ol[data-x=\"left\"]{left: var(--ds-toast-offset)}ol[data-x=\"right\"]{right: var(--ds-toast-offset)}ol[data-x=\"center\"]{left: 50%;transform: translateX(-50%)}:host([contained]) ol{position: absolute;z-index: var(--ds-toast-z-index, 60)}:host([contained]) ol[data-y=\"top\"]{top: var(--ds-toast-offset)}:host([contained]) ol[data-y=\"bottom\"]{bottom: var(--ds-toast-offset)}.toast{--swipe: 0px;position: absolute;left: 0;right: 0;box-sizing: border-box;width: max-content;max-width: 100%;overflow: hidden;border-radius: var(--ds-radius);background: var(--ds-toast-background);color: var(--ds-toast-color);font-family: var(--ds-typeface-regular);font-feature-settings: var(--ds-font-features);font-size: var(--ds-type-size-default);line-height: var(--ds-control-height);letter-spacing: var(--ds-type-letterspacing-default);outline: none;touch-action: none;user-select: none;pointer-events: auto;opacity: 0;transition: transform 400ms ease, opacity 400ms ease}ol[data-y=\"bottom\"] .toast{bottom: 0}ol[data-y=\"top\"] .toast{top: 0}ol[data-x=\"center\"] .toast{margin-inline: auto}ol[data-x=\"left\"] .toast{margin-right: auto}ol[data-x=\"right\"] .toast{margin-left: auto}.toast:focus-visible{outline: 2px solid var(--ds-focus-ring);outline-offset: 1px}.toast[data-mounted=\"false\"]{transform: translateY(calc(var(--lift) * -100%))}.toast[data-mounted=\"true\"]{opacity: 1}ol[data-expanded=\"false\"] .toast[data-mounted=\"true\"]{transform: translateY(calc(var(--lift) * var(--index) * var(--ds-toast-gap) + var(--swipe))) scale(calc(1 - var(--index) * 0.05))}ol[data-expanded=\"false\"] .toast[data-front=\"false\"]{height: var(--front-height)}ol[data-expanded=\"false\"] .toast[data-front=\"false\"] .body{opacity: 0}ol[data-expanded=\"true\"] .toast[data-mounted=\"true\"]{transform: translateY(calc(var(--lift) * (var(--offset) + var(--index) * var(--ds-toast-gap)) + var(--swipe)))}.toast[data-visible=\"false\"]{opacity: 0;pointer-events: none}.toast[data-swiping=\"true\"]{transition: none}.toast[data-removed=\"true\"]{opacity: 0;pointer-events: none}.toast[data-removed=\"true\"][data-front=\"true\"]{transform: translateY(calc(var(--lift) * -100%))}.toast[data-swipe-out=\"true\"]{transform: translateY(calc(var(--swipe) + var(--lift) * -100%))}.body{display: flex;align-items: flex-start;gap: calc(4px * var(--ds-sf));box-sizing: border-box;min-height: var(--ds-control-height);padding-inline: calc(4px * var(--ds-sf));transition: opacity 400ms ease}.icon{display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;width: var(--ds-control-height);height: var(--ds-control-height);--ds-icon-color: currentColor}.icon:first-child{margin-left: calc(-4px * var(--ds-sf))}.icon > svg, .close > svg{width: calc(14px * var(--ds-sf));height: calc(14px * var(--ds-sf))}.content{flex: 1 1 auto;min-width: 0}.title, .description{white-space: normal;overflow-wrap: anywhere}.description{opacity: 0.7}.button{flex: 0 0 auto;margin: 0 0 0 calc(4px * var(--ds-sf));padding: 0;border: 0;background: none;color: inherit;font: inherit;letter-spacing: inherit;text-decoration: underline;text-underline-offset: 2px;cursor: pointer}a.button{display: inline-block}.button.cancel{opacity: 0.7}.button:focus-visible, .close:focus-visible{outline: 1px solid currentColor;outline-offset: 1px;border-radius: 1px}.close{display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;width: var(--ds-control-height);height: var(--ds-control-height);margin: 0 calc(-4px * var(--ds-sf)) 0 0;padding: 0;border: 0;background: none;color: inherit;cursor: pointer;--ds-icon-color: currentColor}.spinner{width: calc(10px * var(--ds-sf));height: calc(10px * var(--ds-sf));box-sizing: border-box;border: 1px solid color-mix(in srgb, currentColor 25%, transparent);border-top-color: currentColor;border-radius: 50%;animation: ds-toast-spin 720ms linear infinite}@keyframes ds-toast-spin{to{transform: rotate(360deg)}}:host([rich-colors]) .toast[data-type=\"success\"]{--ds-toast-background: var(--ds-apple-green)}:host([rich-colors]) .toast[data-type=\"info\"]{--ds-toast-background: var(--ds-zenith-blue)}:host([rich-colors]) .toast[data-type=\"warning\"]{--ds-toast-background: var(--ds-orange)}:host([rich-colors]) .toast[data-type=\"error\"]{--ds-toast-background: var(--ds-tuned-red)}:host([rich-colors]) .toast:is([data-type=\"success\"], [data-type=\"info\"], [data-type=\"warning\"], [data-type=\"error\"]){--ds-toast-color: var(--ds-black)}@media (prefers-reduced-motion: reduce){.toast, .body{transition: none}.spinner{animation: none}}";
7
+ export const toastStyles = "[data-ds-shape=\"square\"], :host([data-ds-shape=\"square\"]){--ds-corner-size: 0px;--ds-corner-shape: round;--ds-button-inset: 0.5px}[data-ds-shape=\"rounded\"], :host([data-ds-shape=\"rounded\"]){--ds-corner-size: 4px;--ds-corner-shape: round;--ds-button-inset: 2.5px}[data-ds-shape=\"circular\"], :host([data-ds-shape=\"circular\"]){--ds-corner-size: 999px;--ds-corner-shape: round;--ds-button-inset: 5px}@supports (corner-shape: squircle){[data-ds-shape=\"rounded\"], :host([data-ds-shape=\"rounded\"]){--ds-corner-size: 8px;--ds-corner-shape: squircle}}:root, :host, :where([data-ds-surface]){--ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));--ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));--ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));--ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));--ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));--ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));--ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));--ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));--ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));--ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));--ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1))}:host{--ds-toast-width: calc(16 * var(--ds-unit));--ds-toast-offset: var(--ds-unit);--ds-toast-gap: calc(var(--ds-unit) - var(--ds-control-height));--ds-toast-background: var(--ds-tooltip-background, light-dark(var(--ds-black, #2a2a2a), var(--ds-white, #ffffff)));--ds-toast-color: var(--ds-tooltip-color, light-dark(var(--ds-white, #ffffff), var(--ds-black, #2a2a2a)));display: contents}section{display: contents}ol{--lift: -1;position: fixed;z-index: 2147483000;inset: auto;overflow: visible;border: 0;background: transparent;color: inherit;box-sizing: border-box;width: min(var(--ds-toast-width), calc(100% - 2 * var(--ds-toast-offset)));height: calc(var(--height) + var(--gaps) * var(--ds-toast-gap));margin: 0;padding: 0;list-style: none;outline: none;pointer-events: none}ol[data-y=\"top\"]{--lift: 1;top: calc(var(--ds-toast-offset) + env(safe-area-inset-top, 0px))}ol[data-y=\"bottom\"]{bottom: calc(var(--ds-toast-offset) + env(safe-area-inset-bottom, 0px))}ol[data-x=\"left\"]{left: var(--ds-toast-offset)}ol[data-x=\"right\"]{right: var(--ds-toast-offset)}ol[data-x=\"center\"]{left: 50%;transform: translateX(-50%)}:host([contained]) ol{position: absolute;z-index: var(--ds-toast-z-index, 60)}:host([contained]) ol[data-y=\"top\"]{top: var(--ds-toast-offset)}:host([contained]) ol[data-y=\"bottom\"]{bottom: var(--ds-toast-offset)}.toast{--swipe: 0px;position: absolute;left: 0;right: 0;box-sizing: border-box;width: max-content;max-width: 100%;overflow: hidden;border-radius: var(--ds-radius);background: var(--ds-toast-background);color: var(--ds-toast-color);font-family: \"Inter Arrows\", var(--ds-typeface-regular);font-feature-settings: var(--ds-font-features);font-size: var(--ds-type-size-default);line-height: var(--ds-control-height);letter-spacing: var(--ds-type-letterspacing-default);outline: none;touch-action: none;user-select: none;pointer-events: auto;opacity: 0;transition: transform 400ms ease, opacity 400ms ease}ol[data-y=\"bottom\"] .toast{bottom: 0}ol[data-y=\"top\"] .toast{top: 0}ol[data-x=\"center\"] .toast{margin-inline: auto}ol[data-x=\"left\"] .toast{margin-right: auto}ol[data-x=\"right\"] .toast{margin-left: auto}.toast:focus-visible{outline: 2px solid var(--ds-focus-ring);outline-offset: 1px}.toast[data-mounted=\"false\"]{transform: translateY(calc(var(--lift) * -100%))}.toast[data-mounted=\"true\"]{opacity: 1}ol[data-expanded=\"false\"] .toast[data-mounted=\"true\"]{transform: translateY(calc(var(--lift) * var(--index) * var(--ds-toast-gap) + var(--swipe))) scale(calc(1 - var(--index) * 0.05))}ol[data-expanded=\"false\"] .toast[data-front=\"false\"]{height: var(--front-height)}ol[data-expanded=\"false\"] .toast[data-front=\"false\"] .body{opacity: 0}ol[data-expanded=\"true\"] .toast[data-mounted=\"true\"]{transform: translateY(calc(var(--lift) * (var(--offset) + var(--index) * var(--ds-toast-gap)) + var(--swipe)))}.toast[data-visible=\"false\"]{opacity: 0;pointer-events: none}.toast[data-swiping=\"true\"]{transition: none}.toast[data-removed=\"true\"]{opacity: 0;pointer-events: none}.toast[data-removed=\"true\"][data-front=\"true\"]{transform: translateY(calc(var(--lift) * -100%))}.toast[data-swipe-out=\"true\"]{transform: translateY(calc(var(--swipe) + var(--lift) * -100%))}.body{display: flex;align-items: flex-start;gap: calc(4px * var(--ds-sf));box-sizing: border-box;min-height: var(--ds-control-height);padding-inline: calc(4px * var(--ds-sf));transition: opacity 400ms ease}.icon{display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;width: var(--ds-control-height);height: var(--ds-control-height);--ds-icon-color: currentColor}.icon:first-child{margin-left: calc(-4px * var(--ds-sf))}.icon > svg, .close > svg{width: calc(14px * var(--ds-sf));height: calc(14px * var(--ds-sf))}.content{flex: 1 1 auto;min-width: 0}.title, .description{white-space: normal;overflow-wrap: anywhere}.description{opacity: 0.7}.button{flex: 0 0 auto;margin: 0 0 0 calc(4px * var(--ds-sf));padding: 0;border: 0;background: none;color: inherit;font: inherit;letter-spacing: inherit;text-decoration: underline;text-underline-offset: 2px;cursor: pointer}a.button{display: inline-block}.button.cancel{opacity: 0.7}.button:focus-visible, .close:focus-visible{outline: 1px solid currentColor;outline-offset: 1px;border-radius: 1px}.close{display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;width: var(--ds-control-height);height: var(--ds-control-height);margin: 0 calc(-4px * var(--ds-sf)) 0 0;padding: 0;border: 0;background: none;color: inherit;cursor: pointer;--ds-icon-color: currentColor}.spinner{width: calc(10px * var(--ds-sf));height: calc(10px * var(--ds-sf));box-sizing: border-box;border: 1px solid color-mix(in srgb, currentColor 25%, transparent);border-top-color: currentColor;border-radius: 50%;animation: ds-toast-spin 720ms linear infinite}@keyframes ds-toast-spin{to{transform: rotate(360deg)}}:host([rich-colors]) .toast[data-type=\"success\"]{--ds-toast-background: var(--ds-apple-green)}:host([rich-colors]) .toast[data-type=\"info\"]{--ds-toast-background: var(--ds-zenith-blue)}:host([rich-colors]) .toast[data-type=\"warning\"]{--ds-toast-background: var(--ds-orange)}:host([rich-colors]) .toast[data-type=\"error\"]{--ds-toast-background: var(--ds-tuned-red)}:host([rich-colors]) .toast:is([data-type=\"success\"], [data-type=\"info\"], [data-type=\"warning\"], [data-type=\"error\"]){--ds-toast-color: var(--ds-black)}@media (prefers-reduced-motion: reduce){.toast, .body{transition: none}.spinner{animation: none}}";
8
8
  /** The icons the page toaster draws: the toast types' own and the close button's. */
9
9
  export const toastIcons = {
10
10
  "check": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.68649 11.884L12.443 6.13601L11.736 5.42715L6.68835 10.4827L4.26399 8.0501L3.55696 8.74525L6.68649 11.884Z\" fill=\"currentColor\"/>\n</svg>\n",