@threadlabs/looma 0.6.5 → 0.7.0

package/vue/UiButton.vue

@@ -10,7 +10,7 @@ const props = withDefaults(
     disabled?: boolean
     size?: 'sm' | 'md' | 'lg'
     stretch?: boolean
-    tone?: 'neutral' | 'accent'
+    tone?: 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info'
     variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link'
   }>(),
   {
@@ -18,7 +18,7 @@ const props = withDefaults(
     disabled: false,
     size: 'md',
     stretch: false,
-    tone: 'neutral',
+    tone: 'accent',
     variant: 'outline',
   },
 )
@@ -26,10 +26,10 @@ const props = withDefaults(
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.variant && `variant variant=${props.variant}`,
     props.align && `align align=${props.align}`,
     props.stretch && 'stretch',
     props.size && `size size=${props.size}`,
+    props.variant && `variant variant=${props.variant}`,
     props.tone && `tone tone=${props.tone}`,
   ].filter(Boolean).join(' ')
 )
@@ -49,15 +49,23 @@ const hostState = computed(() =>
 
 <style scoped>
 [data-component~="ui-button"] {
+  --_hue: var(--ui-accent);
+  --_hue-hover: var(--ui-accent-hover);
+  --_hue-active: var(--ui-accent-active);
+  --_hue-text: var(--ui-accent-active);
+  --_on-hue: var(--ui-on-accent);
+
+  --_tone: var(--_hue);
+  --_tone-hover: var(--_hue-hover);
+  --_tone-active: var(--_hue-active);
+  --_tone-text: var(--_hue-text);
+  --_on-tone: var(--_on-hue);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  color: var(--ui-action-secondary-text, var(--ui-text-primary));
-}
-
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"] {
-  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+  color: var(--_tone-text);
 }
 
 [data-component~="ui-button"][data-ui-button-state~="align=start"] {
@@ -73,23 +81,24 @@ const hostState = computed(() =>
 [data-component~="ui-button"] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
-  border: 1px solid var(--ui-button-border, var(--ui-border-strong));
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--ui-button-border, var(--_tone));
   border-radius: var(--ui-button-radius, var(--ui-radius-md));
-  background: var(--ui-button-surface, var(--ui-surface-elevated));
-  color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+  background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
+  color: var(--ui-button-text, var(--_tone-text));
   font: inherit;
   font-weight: var(--ui-font-medium);
   line-height: var(--ui-line-height-tight);
   padding: var(--ui-space-2) var(--ui-space-3);
   background-image: var(--ui-raised-highlight);
-  box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
+  box-shadow: var(--ui-button-shadow, var(--ui-raised));
   cursor: pointer;
   transition:
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-    transform var(--ui-motion-fast) var(--ui-motion-ease);
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
   margin: 0;
 }
 
@@ -113,145 +122,143 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-button"]:hover:enabled {
-  background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
-  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+  border-color: var(--ui-button-hover-border, var(--_tone-hover));
+  background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
 }
 
+/* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
 [data-component~="ui-button"]:active:enabled {
-  background: var(--ui-surface-subtle);
+  background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
+  background-image: none;
+  box-shadow: var(--ui-pressed);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"] {
-  border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
-  background: var(--ui-action-primary-surface, var(--ui-accent-solid));
-  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
-  box-shadow: var(
-    --ui-button-solid-shadow,
-    inset 0 1px rgb(255 255 255 / 0.16),
-    var(--ui-shadow-xs)
-  );
-}
-
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"]:hover:enabled {
-  background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-  border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-  box-shadow: var(--ui-shadow-sm);
-  transform: translateY(-1px);
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
+  border-color: var(--_tone);
+  background-color: var(--_tone);
+  color: var(--_on-tone);
+  box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"]:active:enabled {
-  background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-  border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-  box-shadow: none;
-  transform: translateY(0);
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):hover:enabled {
+  background-color: var(--_tone-hover);
+  border-color: var(--_tone-hover);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
-  border-color: var(--ui-danger-solid);
-  background: var(--ui-danger-solid);
-  color: var(--ui-text-on-accent);
-  box-shadow: var(
-    --ui-button-danger-shadow,
-    inset 0 1px rgb(255 255 255 / 0.14),
-    var(--ui-shadow-xs)
-  );
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):active:enabled {
+  background-color: var(--_tone-active);
+  border-color: var(--_tone-active);
+  background-image: none;
+  box-shadow: var(--ui-pressed);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"]:hover:enabled {
-  background: var(--ui-danger-hover);
-  border-color: var(--ui-danger-hover);
-  box-shadow: var(--ui-shadow-sm);
-  transform: translateY(-1px);
+/* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
+   destructive secondary action, not a special case. */
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"] {
+  --_hue: var(--ui-text);
+  --_hue-hover: var(--ui-text);
+  --_hue-active: var(--ui-text);
+  --_hue-text: var(--ui-text);
+  --_on-hue: var(--ui-surface);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"]:active:enabled {
-  box-shadow: none;
-  transform: translateY(0);
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
+  --_hue: var(--ui-danger);
+  --_hue-hover: var(--ui-danger-hover);
+  --_hue-active: var(--ui-danger-hover);
+  --_hue-text: var(--ui-danger-hover);
+  --_on-hue: var(--ui-on-danger);
 }
 
-/* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
-   Solid and danger already carry their own intent. */
-[data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"] {
-  border-color: var(--ui-button-accent-border, var(--ui-accent));
-  background: var(--ui-button-accent-surface, var(--ui-accent-subtle));
-  color: var(--ui-button-accent-text, var(--ui-accent-active));
+[data-component~="ui-button"][data-ui-button-state~="tone=success"] {
+  --_hue: var(--ui-success);
+  --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
+  --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
+  --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
+  --_on-hue: var(--ui-surface);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"]:hover:enabled {
-  border-color: var(--ui-button-accent-hover-border, var(--ui-accent-hover));
-  background: var(
-    --ui-button-accent-hover-surface,
-    color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface))
-  );
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"] {
+  --_hue: var(--ui-warning);
+  --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
+  --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
+  --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
+  --_on-hue: var(--ui-surface);
 }
 
-[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"]) {
-  color: var(--ui-button-accent-text, var(--ui-accent-active));
+[data-component~="ui-button"][data-ui-button-state~="tone=info"] {
+  --_hue: var(--ui-info);
+  --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
+  --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
+  --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
+  --_on-hue: var(--ui-surface);
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
-  color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+  color: var(--ui-button-ghost-text, var(--_tone-text));
 }
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:hover:enabled {
-  background: var(
-    --ui-button-ghost-hover-surface,
-    color-mix(in srgb, currentColor 8%, transparent)
-  );
+  background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
   border-color: transparent;
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:active:enabled {
-  background: var(
-    --ui-button-ghost-active-surface,
-    color-mix(in srgb, currentColor 14%, transparent)
-  );
+  background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
   border-color: transparent;
+  box-shadow: var(--ui-pressed);
 }
 
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 [data-component~="ui-button"]:focus-visible {
   outline: none;
   box-shadow:
-    var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs))),
+    var(--ui-button-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:focus-visible {
   box-shadow:
-    var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs)),
+    var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
 
-/* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
+/* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
+   disabled outline is still an outline and a disabled ghost is still text. Intent goes — an
+   unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
+   highlight and shadow, because nothing that cannot be pressed should look raised. */
 [data-component~="ui-button"]:disabled {
+  /* Derived from the tone itself, not from a separate disabled palette: faded toward the
+     page, which desaturates it at the same time. Toward the page rather than toward white,
+     so a dark theme dims where a light one lightens — the same rule, both schemes. */
+  --_tone: color-mix(in oklab, var(--_hue) 58%, var(--ui-surface));
+  --_tone-hover: var(--_tone);
+  --_tone-active: var(--_tone);
+  --_tone-text: color-mix(in oklab, var(--_hue-text) 72%, var(--ui-surface));
+  --_on-tone: var(--_tone-text);
+
   opacity: var(--ui-button-disabled-opacity, 1);
   cursor: not-allowed;
-  border-color: var(--ui-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
-}
-
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"]:disabled {
-  border-color: var(--ui-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
+  background-image: none;
+  box-shadow: none;
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"]:disabled {
-  border-color: var(--ui-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
+/* A filled button keeps its fill, faded further so its text stays legible on it. */
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):disabled {
+  --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
 }
 
+/* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
+   it takes a surface, light and tinted, rather than reading as plain text. */
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:disabled {
-  background: none;
+  background-color: color-mix(in oklab, var(--_hue) 28%, var(--ui-surface));
   border-color: transparent;
-  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 
 @media (pointer: coarse) {

package/vue/UiCheckbox.vue

@@ -140,7 +140,10 @@ input:checked::after {
   margin: auto;
   inline-size: 0.32rem;
   block-size: 0.58rem;
-  border: solid var(--ui-text-on-accent);
+  /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
+     component, which left the tick with no style and no colour. */
+  border-style: solid;
+  border-color: var(--ui-text-on-accent);
   border-width: 0 0.125rem 0.125rem 0;
   opacity: 1;
   transform: translateY(-0.11rem) rotate(45deg);

package/vue/UiCombobox.vue

@@ -184,9 +184,16 @@ const raw = ref('')
 const display = ref('')
 const selected = ref<string | null>(null)
 const expanded = ref(false)
-const rows = ref<{ id: string; value: string; label: string; group?: string; disabled: boolean }[]>(
-  [],
-)
+const rows = ref<
+  {
+    id: string
+    value: string
+    label: string
+    group?: string
+    disabled: boolean
+    selected: boolean
+  }[]
+>([])
 const active = ref<number | null>(-1)
 const loading = ref(false)
 const helpOpen = ref(false)
@@ -212,6 +219,7 @@ const groups = ref<
       label: string
       group?: string
       disabled: boolean
+      selected: boolean
       index: number
     }[]
   }[]
@@ -599,7 +607,7 @@ defineExpose({
             class="option"
             role="option"
             :id="`${uid}-option-${row.index}`"
-            :aria-selected="row.value === selected"
+            :aria-selected="row.selected"
             :aria-disabled="row.disabled"
             :data-index="row.index"
             :class="{ active: row.index === active }"
@@ -843,6 +851,40 @@ input:disabled, button:disabled {
   }
 }
 
+/* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
+   before anything is picked. aria-selected is the state; this draws it.
+   Longhands, not shorthands: lowering drops a shorthand that omits a component. */
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option {
+  display: flex;
+  gap: var(--ui-space-2);
+  align-items: center;
+}
+
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option::before {
+  content: "";
+  flex: none;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+  border-radius: var(--ui-radius-sm);
+  background-color: var(--ui-control-surface, var(--ui-surface-default));
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 0.7rem;
+}
+
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"]
+  .option[aria-selected="true"]::before {
+  border-color: var(--ui-accent-solid);
+  background-color: var(--ui-accent-solid);
+  background-image: var(
+    --ui-combobox-option-check,
+    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")
+  );
+}
+
 /* Multiple mode: chips wrap before the cursor on one flexible field line. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field {
   flex-wrap: wrap;

package/vue/UiSelect.d.ts

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     disabled?: boolean;
     invalid?: boolean;
-    multiple?: boolean;
     required?: boolean;
     value?: string;
     modelValue?: string | null;
@@ -18,7 +17,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     invalid: boolean;
     disabled: boolean;
     required: boolean;
-    multiple: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiSelect.vue

@@ -10,7 +10,6 @@ const props = withDefaults(
   defineProps<{
     disabled?: boolean
     invalid?: boolean
-    multiple?: boolean
     required?: boolean
     value?: string
     modelValue?: string | null
@@ -18,7 +17,6 @@ const props = withDefaults(
   {
     disabled: false,
     invalid: false,
-    multiple: false,
     required: false,
   },
 )
@@ -47,7 +45,6 @@ useComponentHost(controllerModule.default, {
     v-bind="$attrs"
     :disabled="disabled"
     :required="required"
-    :multiple="multiple"
     :aria-invalid="invalid"
     v-model="model"
     ref="root"
@@ -79,9 +76,9 @@ useComponentHost(controllerModule.default, {
     background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
-/* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
+/* The select draws its own chevron: the native caret cannot be inset or sized consistently.
  * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
-[data-component~="ui-select"]:not([multiple]) {
+[data-component~="ui-select"] {
   appearance: none;
   padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
   background-image: var(
@@ -126,7 +123,6 @@ useComponentHost(controllerModule.default, {
   cursor: not-allowed;
 }
 
-[data-component~="ui-select"][multiple],
 [data-component~="ui-select"][size]:not([size="1"]) {
   min-block-size: 7rem;
   padding: var(--ui-space-2);

package/vue/chunks/UiButton.js

@@ -18,17 +18,17 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			type: Boolean,
 			default: false
 		},
-		tone: { default: "neutral" },
+		tone: { default: "accent" },
 		variant: { default: "outline" }
 	},
 	setup(__props) {
 		const props = __props;
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
-			props.variant && `variant variant=${props.variant}`,
 			props.align && `align align=${props.align}`,
 			props.stretch && "stretch",
 			props.size && `size size=${props.size}`,
+			props.variant && `variant variant=${props.variant}`,
 			props.tone && `tone tone=${props.tone}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
@@ -41,6 +41,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-4fd0ad7f"]]);
+}), [["__scopeId", "data-v-8513eb5d"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCheckbox.js

@@ -81,6 +81,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d8891b6a"]]);
+}), [["__scopeId", "data-v-964081a0"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCombobox.js

@@ -423,7 +423,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 								class: normalizeClass(["option", { active: row.index === active.value }]),
 								role: "option",
 								id: `${uid.value}-option-${row.index}`,
-								"aria-selected": row.value === selected.value,
+								"aria-selected": row.selected,
 								"aria-disabled": row.disabled,
 								"data-index": row.index
 							}, [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
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-aef83c81"]]);
+}), [["__scopeId", "data-v-1aba7b21"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiSelect.js

@@ -6,7 +6,6 @@ import * as controllerModule from "@threadlabs/looma/components/ui-select/ui-sel
 var _hoisted_1 = [
 	"disabled",
 	"required",
-	"multiple",
 	"aria-invalid"
 ];
 //#endregion
@@ -23,10 +22,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			type: Boolean,
 			default: false
 		},
-		multiple: {
-			type: Boolean,
-			default: false
-		},
 		required: {
 			type: Boolean,
 			default: false
@@ -53,7 +48,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			return withDirectives((openBlock(), createElementBlock("select", mergeProps({ "data-component": "ui-select" }, _ctx.$attrs, {
 				disabled: __props.disabled,
 				required: __props.required,
-				multiple: __props.multiple,
 				"aria-invalid": __props.invalid,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
 				ref_key: "root",
@@ -61,6 +55,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-d36968b7"]]);
+}), [["__scopeId", "data-v-2a885e02"]]);
 //#endregion
 export { UiSelect_default as t };