@threadlabs/looma 0.6.5 → 0.7.1

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.
package/vue/UiButton.vue CHANGED
@@ -10,7 +10,7 @@ const props = withDefaults(
10
10
  disabled?: boolean
11
11
  size?: 'sm' | 'md' | 'lg'
12
12
  stretch?: boolean
13
- tone?: 'neutral' | 'accent'
13
+ tone?: 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info'
14
14
  variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link'
15
15
  }>(),
16
16
  {
@@ -18,7 +18,7 @@ const props = withDefaults(
18
18
  disabled: false,
19
19
  size: 'md',
20
20
  stretch: false,
21
- tone: 'neutral',
21
+ tone: 'accent',
22
22
  variant: 'outline',
23
23
  },
24
24
  )
@@ -26,10 +26,10 @@ const props = withDefaults(
26
26
  /** The values the styles' :host-state() rules test. */
27
27
  const hostState = computed(() =>
28
28
  [
29
- props.variant && `variant variant=${props.variant}`,
30
29
  props.align && `align align=${props.align}`,
31
30
  props.stretch && 'stretch',
32
31
  props.size && `size size=${props.size}`,
32
+ props.variant && `variant variant=${props.variant}`,
33
33
  props.tone && `tone tone=${props.tone}`,
34
34
  ].filter(Boolean).join(' ')
35
35
  )
@@ -49,15 +49,23 @@ const hostState = computed(() =>
49
49
 
50
50
  <style scoped>
51
51
  [data-component~="ui-button"] {
52
+ --_hue: var(--ui-accent);
53
+ --_hue-hover: var(--ui-accent-hover);
54
+ --_hue-active: var(--ui-accent-active);
55
+ --_hue-text: var(--ui-accent-active);
56
+ --_on-hue: var(--ui-on-accent);
57
+
58
+ --_tone: var(--_hue);
59
+ --_tone-hover: var(--_hue-hover);
60
+ --_tone-active: var(--_hue-active);
61
+ --_tone-text: var(--_hue-text);
62
+ --_on-tone: var(--_on-hue);
63
+
52
64
  display: inline-flex;
53
65
  align-items: center;
54
66
  justify-content: center;
55
67
  vertical-align: middle;
56
- color: var(--ui-action-secondary-text, var(--ui-text-primary));
57
- }
58
-
59
- [data-component~="ui-button"][data-ui-button-state~="variant=solid"] {
60
- color: var(--ui-action-primary-text, var(--ui-text-on-accent));
68
+ color: var(--_tone-text);
61
69
  }
62
70
 
63
71
  [data-component~="ui-button"][data-ui-button-state~="align=start"] {
@@ -73,23 +81,24 @@ const hostState = computed(() =>
73
81
  [data-component~="ui-button"] {
74
82
  appearance: none;
75
83
  min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
76
- border: 1px solid var(--ui-button-border, var(--ui-border-strong));
84
+ border-style: solid;
85
+ border-width: 1px;
86
+ border-color: var(--ui-button-border, var(--_tone));
77
87
  border-radius: var(--ui-button-radius, var(--ui-radius-md));
78
- background: var(--ui-button-surface, var(--ui-surface-elevated));
79
- color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
88
+ background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
89
+ color: var(--ui-button-text, var(--_tone-text));
80
90
  font: inherit;
81
91
  font-weight: var(--ui-font-medium);
82
92
  line-height: var(--ui-line-height-tight);
83
93
  padding: var(--ui-space-2) var(--ui-space-3);
84
94
  background-image: var(--ui-raised-highlight);
85
- box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
95
+ box-shadow: var(--ui-button-shadow, var(--ui-raised));
86
96
  cursor: pointer;
87
97
  transition:
88
98
  background-color var(--ui-motion-fast) var(--ui-motion-ease),
89
99
  border-color var(--ui-motion-fast) var(--ui-motion-ease),
90
100
  color var(--ui-motion-fast) var(--ui-motion-ease),
91
- box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
92
- transform var(--ui-motion-fast) var(--ui-motion-ease);
101
+ box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
93
102
  margin: 0;
94
103
  }
95
104
 
@@ -113,145 +122,143 @@ const hostState = computed(() =>
113
122
  }
114
123
 
115
124
  [data-component~="ui-button"]:hover:enabled {
116
- background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
117
- border-color: var(--ui-control-border-hover, var(--ui-border-strong));
125
+ border-color: var(--ui-button-hover-border, var(--_tone-hover));
126
+ background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
118
127
  }
119
128
 
129
+ /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
120
130
  [data-component~="ui-button"]:active:enabled {
121
- background: var(--ui-surface-subtle);
131
+ background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
132
+ background-image: none;
133
+ box-shadow: var(--ui-pressed);
122
134
  }
123
135
 
124
- [data-component~="ui-button"][data-ui-button-state~="variant=solid"] {
125
- border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
126
- background: var(--ui-action-primary-surface, var(--ui-accent-solid));
127
- color: var(--ui-action-primary-text, var(--ui-text-on-accent));
128
- box-shadow: var(
129
- --ui-button-solid-shadow,
130
- inset 0 1px rgb(255 255 255 / 0.16),
131
- var(--ui-shadow-xs)
132
- );
133
- }
134
-
135
- [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:hover:enabled {
136
- background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
137
- border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
138
- box-shadow: var(--ui-shadow-sm);
139
- transform: translateY(-1px);
136
+ [data-component~="ui-button"][data-ui-button-state~="variant=solid"],
137
+ [data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
138
+ border-color: var(--_tone);
139
+ background-color: var(--_tone);
140
+ color: var(--_on-tone);
141
+ box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
140
142
  }
141
143
 
142
- [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:active:enabled {
143
- background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
144
- border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
145
- box-shadow: none;
146
- transform: translateY(0);
144
+ :is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):hover:enabled {
145
+ background-color: var(--_tone-hover);
146
+ border-color: var(--_tone-hover);
147
147
  }
148
148
 
149
- [data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
150
- border-color: var(--ui-danger-solid);
151
- background: var(--ui-danger-solid);
152
- color: var(--ui-text-on-accent);
153
- box-shadow: var(
154
- --ui-button-danger-shadow,
155
- inset 0 1px rgb(255 255 255 / 0.14),
156
- var(--ui-shadow-xs)
157
- );
149
+ :is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):active:enabled {
150
+ background-color: var(--_tone-active);
151
+ border-color: var(--_tone-active);
152
+ background-image: none;
153
+ box-shadow: var(--ui-pressed);
158
154
  }
159
155
 
160
- [data-component~="ui-button"][data-ui-button-state~="variant=danger"]:hover:enabled {
161
- background: var(--ui-danger-hover);
162
- border-color: var(--ui-danger-hover);
163
- box-shadow: var(--ui-shadow-sm);
164
- transform: translateY(-1px);
156
+ /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
157
+ destructive secondary action, not a special case. */
158
+ [data-component~="ui-button"][data-ui-button-state~="tone=neutral"] {
159
+ --_hue: var(--ui-text);
160
+ --_hue-hover: var(--ui-text);
161
+ --_hue-active: var(--ui-text);
162
+ --_hue-text: var(--ui-text);
163
+ --_on-hue: var(--ui-surface);
165
164
  }
166
165
 
167
- [data-component~="ui-button"][data-ui-button-state~="variant=danger"]:active:enabled {
168
- box-shadow: none;
169
- transform: translateY(0);
166
+ [data-component~="ui-button"][data-ui-button-state~="tone=danger"],
167
+ [data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
168
+ --_hue: var(--ui-danger);
169
+ --_hue-hover: var(--ui-danger-hover);
170
+ --_hue-active: var(--ui-danger-hover);
171
+ --_hue-text: var(--ui-danger-hover);
172
+ --_on-hue: var(--ui-on-danger);
170
173
  }
171
174
 
172
- /* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
173
- Solid and danger already carry their own intent. */
174
- [data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"] {
175
- border-color: var(--ui-button-accent-border, var(--ui-accent));
176
- background: var(--ui-button-accent-surface, var(--ui-accent-subtle));
177
- color: var(--ui-button-accent-text, var(--ui-accent-active));
175
+ [data-component~="ui-button"][data-ui-button-state~="tone=success"] {
176
+ --_hue: var(--ui-success);
177
+ --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
178
+ --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
179
+ --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
180
+ --_on-hue: var(--ui-surface);
178
181
  }
179
182
 
180
- [data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"]:hover:enabled {
181
- border-color: var(--ui-button-accent-hover-border, var(--ui-accent-hover));
182
- background: var(
183
- --ui-button-accent-hover-surface,
184
- color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface))
185
- );
183
+ [data-component~="ui-button"][data-ui-button-state~="tone=warning"] {
184
+ --_hue: var(--ui-warning);
185
+ --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
186
+ --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
187
+ --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
188
+ --_on-hue: var(--ui-surface);
186
189
  }
187
190
 
188
- [data-component~="ui-button"][data-ui-button-state~="tone=accent"]:is([data-component~="ui-button"][data-ui-button-state~="variant=ghost"], [data-component~="ui-button"][data-ui-button-state~="variant=link"]) {
189
- color: var(--ui-button-accent-text, var(--ui-accent-active));
191
+ [data-component~="ui-button"][data-ui-button-state~="tone=info"] {
192
+ --_hue: var(--ui-info);
193
+ --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
194
+ --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
195
+ --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
196
+ --_on-hue: var(--ui-surface);
190
197
  }
191
198
 
192
199
  [data-component~="ui-button"][data-ui-button-state~="variant=ghost"] {
193
200
  border-color: transparent;
194
201
  background: transparent;
195
202
  box-shadow: none;
196
- color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
203
+ color: var(--ui-button-ghost-text, var(--_tone-text));
197
204
  }
198
205
 
199
206
  /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
200
207
  [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:hover:enabled {
201
- background: var(
202
- --ui-button-ghost-hover-surface,
203
- color-mix(in srgb, currentColor 8%, transparent)
204
- );
208
+ background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
205
209
  border-color: transparent;
206
210
  }
207
211
 
208
212
  [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:active:enabled {
209
- background: var(
210
- --ui-button-ghost-active-surface,
211
- color-mix(in srgb, currentColor 14%, transparent)
212
- );
213
+ background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
213
214
  border-color: transparent;
215
+ box-shadow: var(--ui-pressed);
214
216
  }
215
217
 
216
218
  /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
217
219
  [data-component~="ui-button"]:focus-visible {
218
220
  outline: none;
219
221
  box-shadow:
220
- var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs))),
222
+ var(--ui-button-shadow, var(--ui-raised)),
221
223
  var(--ui-focus-halo);
222
224
  }
223
225
 
224
226
  [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:focus-visible {
225
227
  box-shadow:
226
- var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs)),
228
+ var(--ui-button-solid-shadow, var(--ui-raised)),
227
229
  var(--ui-focus-halo);
228
230
  }
229
231
 
230
- /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
232
+ /* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
233
+ disabled outline is still an outline and a disabled ghost is still text. Intent goes — an
234
+ unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
235
+ highlight and shadow, because nothing that cannot be pressed should look raised. */
231
236
  [data-component~="ui-button"]:disabled {
237
+ /* Derived from the tone itself, not from a separate disabled palette: faded toward the
238
+ page, which desaturates it at the same time. Toward the page rather than toward white,
239
+ so a dark theme dims where a light one lightens — the same rule, both schemes. */
240
+ --_tone: color-mix(in oklab, var(--_hue) 58%, var(--ui-surface));
241
+ --_tone-hover: var(--_tone);
242
+ --_tone-active: var(--_tone);
243
+ --_tone-text: color-mix(in oklab, var(--_hue-text) 72%, var(--ui-surface));
244
+ --_on-tone: var(--_tone-text);
245
+
232
246
  opacity: var(--ui-button-disabled-opacity, 1);
233
247
  cursor: not-allowed;
234
- border-color: var(--ui-button-disabled-border, var(--ui-border));
235
- background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
236
- color: var(--ui-button-disabled-text, var(--ui-disabled-text));
237
- }
238
-
239
- [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:disabled {
240
- border-color: var(--ui-button-disabled-border, var(--ui-border));
241
- background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
242
- color: var(--ui-button-disabled-text, var(--ui-disabled-text));
248
+ background-image: none;
249
+ box-shadow: none;
243
250
  }
244
251
 
245
- [data-component~="ui-button"][data-ui-button-state~="variant=danger"]:disabled {
246
- border-color: var(--ui-button-disabled-border, var(--ui-border));
247
- background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
248
- color: var(--ui-button-disabled-text, var(--ui-disabled-text));
252
+ /* A filled button keeps its fill, faded further so its text stays legible on it. */
253
+ :is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):disabled {
254
+ --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
249
255
  }
250
256
 
257
+ /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
258
+ it takes a surface, light and tinted, rather than reading as plain text. */
251
259
  [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:disabled {
252
- background: none;
260
+ background-color: color-mix(in oklab, var(--_hue) 28%, var(--ui-surface));
253
261
  border-color: transparent;
254
- color: var(--ui-button-disabled-text, var(--ui-disabled-text));
255
262
  }
256
263
 
257
264
  @media (pointer: coarse) {
@@ -140,7 +140,10 @@ input:checked::after {
140
140
  margin: auto;
141
141
  inline-size: 0.32rem;
142
142
  block-size: 0.58rem;
143
- border: solid var(--ui-text-on-accent);
143
+ /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
144
+ component, which left the tick with no style and no colour. */
145
+ border-style: solid;
146
+ border-color: var(--ui-text-on-accent);
144
147
  border-width: 0 0.125rem 0.125rem 0;
145
148
  opacity: 1;
146
149
  transform: translateY(-0.11rem) rotate(45deg);
@@ -184,9 +184,16 @@ const raw = ref('')
184
184
  const display = ref('')
185
185
  const selected = ref<string | null>(null)
186
186
  const expanded = ref(false)
187
- const rows = ref<{ id: string; value: string; label: string; group?: string; disabled: boolean }[]>(
188
- [],
189
- )
187
+ const rows = ref<
188
+ {
189
+ id: string
190
+ value: string
191
+ label: string
192
+ group?: string
193
+ disabled: boolean
194
+ selected: boolean
195
+ }[]
196
+ >([])
190
197
  const active = ref<number | null>(-1)
191
198
  const loading = ref(false)
192
199
  const helpOpen = ref(false)
@@ -212,6 +219,7 @@ const groups = ref<
212
219
  label: string
213
220
  group?: string
214
221
  disabled: boolean
222
+ selected: boolean
215
223
  index: number
216
224
  }[]
217
225
  }[]
@@ -599,7 +607,7 @@ defineExpose({
599
607
  class="option"
600
608
  role="option"
601
609
  :id="`${uid}-option-${row.index}`"
602
- :aria-selected="row.value === selected"
610
+ :aria-selected="row.selected"
603
611
  :aria-disabled="row.disabled"
604
612
  :data-index="row.index"
605
613
  :class="{ active: row.index === active }"
@@ -843,6 +851,40 @@ input:disabled, button:disabled {
843
851
  }
844
852
  }
845
853
 
854
+ /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
855
+ before anything is picked. aria-selected is the state; this draws it.
856
+ Longhands, not shorthands: lowering drops a shorthand that omits a component. */
857
+ [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option {
858
+ display: flex;
859
+ gap: var(--ui-space-2);
860
+ align-items: center;
861
+ }
862
+
863
+ [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option::before {
864
+ content: "";
865
+ flex: none;
866
+ inline-size: 1.125rem;
867
+ block-size: 1.125rem;
868
+ border-style: solid;
869
+ border-width: 1px;
870
+ border-color: var(--ui-control-border-hover, var(--ui-border-strong));
871
+ border-radius: var(--ui-radius-sm);
872
+ background-color: var(--ui-control-surface, var(--ui-surface-default));
873
+ background-repeat: no-repeat;
874
+ background-position: center;
875
+ background-size: 0.7rem;
876
+ }
877
+
878
+ [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"]
879
+ .option[aria-selected="true"]::before {
880
+ border-color: var(--ui-accent-solid);
881
+ background-color: var(--ui-accent-solid);
882
+ background-image: var(
883
+ --ui-combobox-option-check,
884
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E")
885
+ );
886
+ }
887
+
846
888
  /* Multiple mode: chips wrap before the cursor on one flexible field line. */
847
889
  [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field {
848
890
  flex-wrap: wrap;
@@ -160,6 +160,8 @@ useComponentHost(controllerModule.default, {
160
160
 
161
161
  <style scoped>
162
162
  [data-component~="ui-editor-table-context-menu"] {
163
+ /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
164
+ box-sizing: border-box;
163
165
  min-width: 14rem;
164
166
  max-width: min(17rem, calc(100vw - 24px));
165
167
  max-height: min(28rem, calc(100vh - 24px));
package/vue/UiSelect.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  type __VLS_Props = {
2
2
  disabled?: boolean;
3
3
  invalid?: boolean;
4
- multiple?: boolean;
5
4
  required?: boolean;
6
5
  value?: string;
7
6
  modelValue?: string | null;
@@ -18,7 +17,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
18
17
  invalid: boolean;
19
18
  disabled: boolean;
20
19
  required: boolean;
21
- multiple: boolean;
22
20
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
23
21
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
24
22
  declare const _default: typeof __VLS_export;
package/vue/UiSelect.vue CHANGED
@@ -10,7 +10,6 @@ const props = withDefaults(
10
10
  defineProps<{
11
11
  disabled?: boolean
12
12
  invalid?: boolean
13
- multiple?: boolean
14
13
  required?: boolean
15
14
  value?: string
16
15
  modelValue?: string | null
@@ -18,7 +17,6 @@ const props = withDefaults(
18
17
  {
19
18
  disabled: false,
20
19
  invalid: false,
21
- multiple: false,
22
20
  required: false,
23
21
  },
24
22
  )
@@ -47,7 +45,6 @@ useComponentHost(controllerModule.default, {
47
45
  v-bind="$attrs"
48
46
  :disabled="disabled"
49
47
  :required="required"
50
- :multiple="multiple"
51
48
  :aria-invalid="invalid"
52
49
  v-model="model"
53
50
  ref="root"
@@ -79,9 +76,9 @@ useComponentHost(controllerModule.default, {
79
76
  background-color var(--ui-motion-fast) var(--ui-motion-ease);
80
77
  }
81
78
 
82
- /* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
79
+ /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
83
80
  * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
84
- [data-component~="ui-select"]:not([multiple]) {
81
+ [data-component~="ui-select"] {
85
82
  appearance: none;
86
83
  padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
87
84
  background-image: var(
@@ -126,7 +123,6 @@ useComponentHost(controllerModule.default, {
126
123
  cursor: not-allowed;
127
124
  }
128
125
 
129
- [data-component~="ui-select"][multiple],
130
126
  [data-component~="ui-select"][size]:not([size="1"]) {
131
127
  min-block-size: 7rem;
132
128
  padding: var(--ui-space-2);
@@ -18,17 +18,17 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
18
18
  type: Boolean,
19
19
  default: false
20
20
  },
21
- tone: { default: "neutral" },
21
+ tone: { default: "accent" },
22
22
  variant: { default: "outline" }
23
23
  },
24
24
  setup(__props) {
25
25
  const props = __props;
26
26
  /** The values the styles' :host-state() rules test. */
27
27
  const hostState = computed(() => [
28
- props.variant && `variant variant=${props.variant}`,
29
28
  props.align && `align align=${props.align}`,
30
29
  props.stretch && "stretch",
31
30
  props.size && `size size=${props.size}`,
31
+ props.variant && `variant variant=${props.variant}`,
32
32
  props.tone && `tone tone=${props.tone}`
33
33
  ].filter(Boolean).join(" "));
34
34
  return (_ctx, _cache) => {
@@ -41,6 +41,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
41
41
  }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
42
42
  };
43
43
  }
44
- }), [["__scopeId", "data-v-4fd0ad7f"]]);
44
+ }), [["__scopeId", "data-v-8513eb5d"]]);
45
45
  //#endregion
46
46
  export { UiButton_default as t };
@@ -81,6 +81,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
81
81
  }, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
82
82
  };
83
83
  }
84
- }), [["__scopeId", "data-v-d8891b6a"]]);
84
+ }), [["__scopeId", "data-v-964081a0"]]);
85
85
  //#endregion
86
86
  export { UiCheckbox_default as t };
@@ -423,7 +423,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
423
423
  class: normalizeClass(["option", { active: row.index === active.value }]),
424
424
  role: "option",
425
425
  id: `${uid.value}-option-${row.index}`,
426
- "aria-selected": row.value === selected.value,
426
+ "aria-selected": row.selected,
427
427
  "aria-disabled": row.disabled,
428
428
  "data-index": row.index
429
429
  }, [renderSlot(_ctx.$slots, `option-${row.id}`, {}, () => [createElementVNode("span", _hoisted_15, toDisplayString(row.label), 1)], true)], 10, _hoisted_14);
@@ -451,6 +451,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
451
451
  ], 16, _hoisted_1);
452
452
  };
453
453
  }
454
- }), [["__scopeId", "data-v-aef83c81"]]);
454
+ }), [["__scopeId", "data-v-1aba7b21"]]);
455
455
  //#endregion
456
456
  export { UiCombobox_default as t };
@@ -93,6 +93,6 @@ var UiEditorTableContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_d
93
93
  }), 128))], 16, _hoisted_1);
94
94
  };
95
95
  }
96
- }), [["__scopeId", "data-v-a938b94a"]]);
96
+ }), [["__scopeId", "data-v-ae062630"]]);
97
97
  //#endregion
98
98
  export { UiEditorTableContextMenu_default as t };
@@ -6,7 +6,6 @@ import * as controllerModule from "@threadlabs/looma/components/ui-select/ui-sel
6
6
  var _hoisted_1 = [
7
7
  "disabled",
8
8
  "required",
9
- "multiple",
10
9
  "aria-invalid"
11
10
  ];
12
11
  //#endregion
@@ -23,10 +22,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
23
22
  type: Boolean,
24
23
  default: false
25
24
  },
26
- multiple: {
27
- type: Boolean,
28
- default: false
29
- },
30
25
  required: {
31
26
  type: Boolean,
32
27
  default: false
@@ -53,7 +48,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
53
48
  return withDirectives((openBlock(), createElementBlock("select", mergeProps({ "data-component": "ui-select" }, _ctx.$attrs, {
54
49
  disabled: __props.disabled,
55
50
  required: __props.required,
56
- multiple: __props.multiple,
57
51
  "aria-invalid": __props.invalid,
58
52
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
59
53
  ref_key: "root",
@@ -61,6 +55,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
61
55
  }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
62
56
  };
63
57
  }
64
- }), [["__scopeId", "data-v-d36968b7"]]);
58
+ }), [["__scopeId", "data-v-2a885e02"]]);
65
59
  //#endregion
66
60
  export { UiSelect_default as t };