@threadlabs/looma 0.26.3 → 0.26.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/components/ui-callout/ui-callout.html +2 -1
  2. package/components/ui-toast/ui-toast.html +13 -7
  3. package/components/ui-toast-region/ui-toast-region.html +18 -7
  4. package/dist/index.js +1 -1
  5. package/package.json +1 -1
  6. package/styles/ui-callout.css +2 -1
  7. package/styles/ui-toast-region.css +18 -7
  8. package/styles/ui-toast.css +13 -7
  9. package/vue/UiCallout.vue +4 -2
  10. package/vue/UiToast.vue +16 -8
  11. package/vue/UiToastRegion.vue +18 -7
  12. package/vue/chunks/UiCallout.js +1 -1
  13. package/vue/chunks/UiToast.js +1 -1
  14. package/vue/chunks/UiToastRegion.js +1 -1
  15. package/vue/components.css +88 -66
package/components/ui-callout/ui-callout.html CHANGED
@@ -108,7 +108,8 @@
108
108
  padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
109
109
  border: var(--ui-callout-border-width, var(--ui-border-width)) solid
110
110
  color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
111
- border-inline-start: var(--ui-callout-leading-border-width, var(--ui-accent-line-width)) solid var(--ui-callout-border, var(--_callout-border));
111
+ border-inline-start: var(--ui-callout-leading-border-width, var(--ui-callout-border-width, var(--ui-border-width))) solid
112
+ color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
112
113
  border-radius: var(--ui-radius-md);
113
114
  background: var(--ui-callout-surface, var(--_callout-surface));
114
115
  color: var(--ui-callout-text, var(--ui-text-primary));
package/components/ui-toast/ui-toast.html CHANGED
@@ -44,6 +44,7 @@
44
44
 
45
45
  :host {
46
46
  --_ui-toast-accent: var(--ui-border-strong);
47
+ --_ui-toast-surface: var(--ui-surface-muted);
47
48
 
48
49
  display: flex;
49
50
  align-items: center;
@@ -52,26 +53,35 @@
52
53
  inline-size: 100%;
53
54
  margin: 0;
54
55
  padding: var(--ui-space-3) var(--ui-space-4);
55
- border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
56
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-toast-accent, var(--_ui-toast-accent));
56
+ /* The close button's internal space supplies the rest of the trailing inset. */
57
+ padding-inline-end: var(--ui-space-2);
58
+ border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent))));
57
59
  border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
58
- background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
60
+ background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
59
61
  color: var(--ui-text-primary);
62
+ font-family: var(--ui-font-family-sans);
63
+ font-size: var(--ui-font-size-sm);
64
+ font-weight: var(--ui-font-normal);
65
+ line-height: var(--ui-line-height-md);
60
66
  box-shadow: var(--ui-toast-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
61
67
  pointer-events: auto;
62
68
  }
63
69
 
64
70
  :host([tone="info"]) {
65
71
  --_ui-toast-accent: var(--ui-info-solid);
72
+ --_ui-toast-surface: var(--ui-info-soft);
66
73
  }
67
74
  :host([tone="success"]) {
68
75
  --_ui-toast-accent: var(--ui-success-solid);
76
+ --_ui-toast-surface: var(--ui-success-soft);
69
77
  }
70
78
  :host([tone="warning"]) {
71
79
  --_ui-toast-accent: var(--ui-warning-solid);
80
+ --_ui-toast-surface: var(--ui-warning-soft);
72
81
  }
73
82
  :host([tone="danger"]) {
74
83
  --_ui-toast-accent: var(--ui-danger-solid);
84
+ --_ui-toast-surface: var(--ui-danger-soft);
75
85
  }
76
86
 
77
87
  .message {
@@ -81,10 +91,6 @@
81
91
  .action:not(:has(> *)) {
82
92
  display: none;
83
93
  }
84
- .dismiss {
85
- margin-inline-end: calc(var(--ui-space-2) * -1);
86
- }
87
-
88
94
  :host[hidden] {
89
95
  display: none;
90
96
  }
package/components/ui-toast-region/ui-toast-region.html CHANGED
@@ -141,30 +141,42 @@
141
141
  }
142
142
 
143
143
  .toast {
144
+ --_ui-toast-region-accent: var(--ui-border-strong);
145
+ --_ui-toast-region-tone-surface: var(--ui-surface-muted);
144
146
  display: grid;
145
147
  grid-template-columns: 1fr auto;
146
148
  gap: var(--ui-space-2);
147
149
  align-items: start;
148
- border: var(--ui-border-width) solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
150
+ border: var(--ui-border-width) solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
149
151
  border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
150
152
  padding: var(--ui-space-3) var(--ui-space-4);
151
- background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
153
+ /* The close button's internal space supplies the rest of the trailing inset. */
154
+ padding-inline-end: var(--ui-space-2);
155
+ background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface)));
152
156
  color: var(--ui-text-primary);
157
+ font-family: var(--ui-font-family-sans);
158
+ font-size: var(--ui-font-size-sm);
159
+ font-weight: var(--ui-font-normal);
160
+ line-height: var(--ui-line-height-md);
153
161
  box-shadow: var(--_ui-toast-region-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
154
162
  animation: ui-toast-enter var(--_ui-toast-region-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
155
163
  }
156
164
 
157
165
  .toast[data-tone="info"] {
158
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-info-solid);
166
+ --_ui-toast-region-accent: var(--ui-info-solid);
167
+ --_ui-toast-region-tone-surface: var(--ui-info-soft);
159
168
  }
160
169
  .toast[data-tone="success"] {
161
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-success-solid);
170
+ --_ui-toast-region-accent: var(--ui-success-solid);
171
+ --_ui-toast-region-tone-surface: var(--ui-success-soft);
162
172
  }
163
173
  .toast[data-tone="warning"] {
164
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-warning-solid);
174
+ --_ui-toast-region-accent: var(--ui-warning-solid);
175
+ --_ui-toast-region-tone-surface: var(--ui-warning-soft);
165
176
  }
166
177
  .toast[data-tone="danger"] {
167
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger-solid);
178
+ --_ui-toast-region-accent: var(--ui-danger-solid);
179
+ --_ui-toast-region-tone-surface: var(--ui-danger-soft);
168
180
  }
169
181
 
170
182
  /* Leaving slides on down and fades; the controller removes the toast when this ends. */
@@ -238,7 +250,6 @@
238
250
 
239
251
  .dismiss {
240
252
  align-self: center;
241
- margin-inline-end: calc(var(--ui-space-2) * -1);
242
253
  }
243
254
 
244
255
  /* A component that sets its display still honours the hidden attribute on its root. */