@threadlabs/looma 0.17.3 → 0.18.0

package/vue/UiListbox.d.ts

@@ -2,21 +2,34 @@ type __VLS_Props = {
     disabled?: boolean;
     invalid?: boolean;
     multiple?: boolean;
+    name?: string;
     required?: boolean;
     rows?: number;
     value?: string;
     values?: readonly (string)[];
-    modelValue?: string | null;
 };
-declare var __VLS_1: {};
+declare var __VLS_9: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
+    change: (detail: {
+        readonly value: string | null;
+        readonly values: readonly (string)[];
+        readonly trigger: "keyboard" | "pointer";
+    }) => any;
+    "update:value": (value: string) => any;
+    "update:values": (value: readonly string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((detail: {
+        readonly value: string | null;
+        readonly values: readonly (string)[];
+        readonly trigger: "keyboard" | "pointer";
+    }) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    "onUpdate:values"?: ((value: readonly string[]) => any) | undefined;
 }>, {
+    name: string;
     invalid: boolean;
     disabled: boolean;
     required: boolean;

package/vue/UiListbox.vue

@@ -1,8 +1,9 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-listbox/ui-listbox.js'
 import { createDispatch, useComponentHost } from './host'
+import UiScrollArea from './UiScrollArea.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -11,53 +12,144 @@ const props = withDefaults(
     disabled?: boolean
     invalid?: boolean
     multiple?: boolean
+    name?: string
     required?: boolean
     rows?: number
     value?: string
     values?: readonly (string)[]
-    modelValue?: string | null
   }>(),
   {
     disabled: false,
     invalid: false,
     multiple: false,
+    name: '',
     required: false,
     rows: 5,
   },
 )
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
+  'update:value': [value: string]
+  'update:values': [value: readonly (string)[]]
+  change: [
+    detail: {
+      readonly value: string | null
+      readonly values: readonly (string)[]
+      readonly trigger: 'keyboard' | 'pointer'
+    },
+  ]
 }>()
-const model = computed({
-  get: () => props.modelValue ?? props.value ?? undefined,
-  set: (value) => emit('update:modelValue', value as string),
-})
 
 const root = ref<HTMLElement | null>(null)
+const choicesElement = useTemplateRef<HTMLElement>('choices')
+const optionsElement = useTemplateRef<HTMLElement>('options')
+const validityElement = useTemplateRef<HTMLElement>('validity')
+const choices = ref<
+  { value: string; label: string; disabled: boolean; selected: boolean; index: number }[]
+>([])
+const selection = ref<string[]>([])
+const hasSelection = ref(false)
+const active = ref(-1)
+const uid = ref('')
+const validationError = ref(false)
 
-const dispatch = createDispatch(root)
+const isChangeDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && (typeof (detail as Record<string, unknown>)['value'] === 'string'
+    || (detail as Record<string, unknown>)['value'] === null)
+  && (Array.isArray((detail as Record<string, unknown>)['values'])
+    && ((detail as Record<string, unknown>)['values'] as unknown[]).every((item: unknown) =>
+      typeof item === 'string'
+    ))
+  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+    || (detail as Record<string, unknown>)['trigger'] === 'pointer')
+  && Object.keys(detail as object).every((key) => ['value', 'values', 'trigger'].includes(key))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    change: isChangeDetail,
+  },
+  modeled: ['value', 'values'],
+})
 
 useComponentHost(controllerModule.default, {
   root,
   dispatch,
   props,
+  refs: { choices: choicesElement, options: optionsElement, validity: validityElement },
+  state: { choices, selection, hasSelection, active, uid, validationError },
 })
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
 </script>
 
 <template>
-  <select
+  <div
     data-component="ui-listbox"
+    role="listbox"
     v-bind="$attrs"
-    :size="rows"
-    :multiple="multiple"
-    :disabled="disabled"
-    :required="required"
-    :aria-invalid="invalid"
-    v-model="model"
+    :tabindex="attribute(({ true: '-1', false: '0' })[`${disabled}`])"
+    :aria-multiselectable="multiple"
+    :aria-disabled="disabled"
+    :aria-required="required"
+    :aria-invalid="invalid || validationError"
+    :style="{ '--_rows': rows }"
     ref="root"
   >
-    <slot />
-  </select>
+    <UiScrollArea class="choices" ref="choices"><div
+        v-for="choice in choices"
+        :key="choice.index"
+        class="option"
+        role="option"
+        data-ui-choice-option=""
+        :data-multiple="multiple ? '' : undefined"
+        :id="`${uid}-option-${choice.index}`"
+        :data-index="choice.index"
+        :aria-selected="choice.selected"
+        :aria-disabled="choice.disabled"
+        :class="{ active: choice.index === active }"
+      >
+        <span>{{ choice.label }}</span>
+      </div></UiScrollArea>
+    <select
+      class="fallback"
+      aria-label="Choices"
+      :size="rows"
+      :multiple="multiple"
+      :disabled="disabled"
+      :required="required"
+      :name="name"
+      ref="options"
+    >
+      <slot />
+    </select>
+    <template v-if="name && !disabled"><input
+        v-for="(selected, index) in selection"
+        :key="index"
+        type="hidden"
+        :name="name"
+        :value="selected"
+      ></template>
+    <input
+      class="validity"
+      type="checkbox"
+      aria-hidden="true"
+      tabindex="-1"
+      :required="required && !hasSelection && !disabled"
+      :checked="hasSelection"
+      :disabled="disabled"
+      ref="validity"
+    >
+  </div>
 </template>
 
 <style scoped>
@@ -83,29 +175,55 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-listbox"] {
+  position: relative;
   box-sizing: border-box;
   display: block;
   inline-size: 100%;
   min-inline-size: 0;
-  min-block-size: var(--ui-control-min-block-size);
   margin: 0;
   padding: var(--ui-space-1);
   border: 1px solid var(--ui-listbox-border, var(--ui-control-border));
   border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background: var(--ui-listbox-surface, var(--ui-control-surface));
   color: var(--ui-text-primary);
-  color-scheme: light dark;
   font: inherit;
   line-height: var(--ui-line-height-md);
   box-shadow: var(--ui-control-inset);
+  outline: none;
 }
 
-[data-component~="ui-listbox"] option,
-[data-component~="ui-listbox"] optgroup {
-  padding: var(--ui-space-2);
+.choices {
+  max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
+}
+
+[data-component~="ui-listbox"]:not([data-enhanced]) {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+[data-component~="ui-listbox"]:not([data-enhanced]) .choices,
+[data-component~="ui-listbox"][data-enhanced] .fallback {
+  display: none;
+}
+
+.fallback {
+  box-sizing: border-box;
+  inline-size: 100%;
   font: inherit;
 }
 
+.validity {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  opacity: 0;
+  pointer-events: none;
+}
+
 [data-component~="ui-listbox"]:focus-visible {
   border-color: var(--ui-control-focus);
   outline: 2px solid var(--ui-focus-ring);
@@ -113,12 +231,11 @@ useComponentHost(controllerModule.default, {
   box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
 }
 
-[data-component~="ui-listbox"][aria-invalid="true"],
-[data-component~="ui-listbox"]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-listbox"][aria-invalid="true"] {
   border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
 }
 
-[data-component~="ui-listbox"]:disabled {
+[data-component~="ui-listbox"][aria-disabled="true"] {
   background: var(--ui-control-surface-disabled);
   color: var(--ui-disabled-text);
   box-shadow: none;

package/vue/UiSearchResultRow.vue

@@ -86,18 +86,14 @@ const hostState = computed(() =>
   align-items: flex-start;
   gap: var(--ui-search-result-row-gap, var(--ui-space-3));
   background: var(--ui-search-result-row-surface, transparent);
-  border: none;
-  border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border-divider));
+  border: 1px solid var(--ui-search-result-row-border, transparent);
+  border-radius: var(--ui-radius-md);
   color: inherit;
   cursor: pointer;
   text-align: left;
   transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
-[data-component~="ui-search-result-row"]:last-child {
-  border-block-end: none;
-}
-
 [data-component~="ui-search-result-row"]:hover:enabled {
   background: var(
     --ui-search-result-row-hover-surface,

package/vue/UiSearchShell.vue

@@ -180,16 +180,6 @@ dialog::backdrop {
 
 .search {
   padding: var(--ui-space-3);
-  border-block-end: 1px solid var(--ui-border-divider);
-  transition:
-    border-color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
-/* The search region shows where typing goes, whatever the author put in it. */
-.search:focus-within {
-  border-block-end-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
-  box-shadow: inset 0 -1px 0 var(--_ui-search-shell-focus-color, var(--ui-control-focus));
 }
 
 :slotted(input[slot="search"]) {
@@ -206,7 +196,7 @@ dialog::backdrop {
 }
 
 :slotted(input[slot="search"]:focus-visible) {
-  border-color: var(--ui-control-focus);
+  border-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
@@ -220,7 +210,7 @@ dialog::backdrop {
 }
 
 .status {
-  border-block-end: 1px solid var(--ui-border-divider);
+  padding-block-start: 0;
 }
 
 /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
@@ -231,7 +221,6 @@ dialog::backdrop {
   justify-content: flex-end;
   gap: var(--ui-space-2);
   padding: var(--ui-space-3) var(--ui-space-4);
-  border-block-start: 1px solid var(--ui-border-divider);
 }
 
 .status:empty,

package/vue/UiSelect.vue

@@ -142,7 +142,7 @@ useComponentHost(controllerModule.default, {
   background-size: 1.125rem 1.125rem;
 }
 
-[data-component~="ui-select"]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-select"]:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
   border-color: var(
     --ui-select-border-hover,
     var(--ui-control-border-hover, var(--ui-text-secondary))

package/vue/UiSpinner.vue

@@ -45,21 +45,27 @@ function attribute(value: unknown): any {
     :aria-label="typeof (({ true: label, false: null })[`${label !== ''}`]) === 'boolean'
     ? String(({ true: label, false: null })[`${label !== ''}`])
     : attribute(({ true: label, false: null })[`${label !== ''}`])"
+    :aria-live="typeof (({ true: 'polite', false: null })[`${label !== ''}`]) === 'boolean'
+    ? String(({ true: 'polite', false: null })[`${label !== ''}`])
+    : attribute(({ true: 'polite', false: null })[`${label !== ''}`])"
     :aria-hidden="typeof (({ true: null, false: 'true' })[`${label !== ''}`]) === 'boolean'
     ? String(({ true: null, false: 'true' })[`${label !== ''}`])
     : attribute(({ true: null, false: 'true' })[`${label !== ''}`])"
     :data-ui-spinner-state="hostState || undefined"
-  ></span>
+  ><svg viewBox="0 0 50 50" fill="none" aria-hidden="true" focusable="false">
+      <circle class="track" cx="25" cy="25" r="20"></circle>
+      <circle class="arc" cx="25" cy="25" r="20"></circle>
+    </svg></span>
 </template>
 
 <style scoped>
-/* Something is on its way. The ring chases in the current text colour; with reduced motion it holds still,
-       and the label (or the text beside it) still says what is happening. */
+/* A rounded SVG arc grows and recedes over a quiet full-circle track. */
 [data-component~="ui-spinner"] {
   display: inline-flex;
   flex: none;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
   inline-size: 1em;
   block-size: 1em;
   color: currentColor;
@@ -67,36 +73,57 @@ function attribute(value: unknown): any {
   line-height: 1;
 }
 
-.ring {
+[data-component~="ui-spinner"][data-ui-spinner-state~="size=sm"] {
+  font-size: var(--ui-font-size-md);
+}
+
+svg {
   display: block;
-  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
-  border: 2px solid transparent;
-  border-block-start-color: currentColor;
-  border-inline-end-color: color-mix(in srgb, currentColor 52%, transparent);
-  border-radius: 50%;
-  animation: ui-spinner-chase 1s linear infinite;
+  animation: ui-spinner-rotate 2s linear infinite;
 }
 
-[data-component~="ui-spinner"][data-ui-spinner-state~="size=sm"] {
-  font-size: var(--ui-font-size-md);
+circle {
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+
+.track {
+  stroke: color-mix(in srgb, currentColor 16%, transparent);
+}
+
+.arc {
+  stroke: currentColor;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  animation: ui-spinner-dash 1.5s ease-in-out infinite;
 }
 
-@keyframes ui-spinner-chase {
+@keyframes ui-spinner-rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes ui-spinner-dash {
   0% {
-    transform: rotate(0);
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
   }
-  70% {
-    transform: rotate(160deg);
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
   }
   100% {
-    transform: rotate(1turn);
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .ring {
+  svg,
+  .arc {
     animation: none;
   }
 }

package/vue/UiTextarea.vue

@@ -129,7 +129,7 @@ useComponentHost(controllerModule.default, {
   opacity: 1;
 }
 
-[data-component~="ui-textarea"]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-textarea"]:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
 

package/vue/UiTooltip.vue

@@ -256,14 +256,14 @@ useComponentHost(controllerModule.default, {
   inset-inline-start: auto;
   inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   border-inline-end-width: 1px;
-  border-block-end-width: 1px;
+  border-block-start-width: 1px;
 }
 
 [data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface::after {
   inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   inset-inline-end: auto;
   border-inline-start-width: 1px;
-  border-block-start-width: 1px;
+  border-block-end-width: 1px;
 }
 
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="start"]

package/vue/chunks/UiAvatar.js

@@ -41,6 +41,7 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
 			props.size && `size size=${props.size}`,
+			hasImage.value && "hasImage",
 			props.shape && `shape shape=${props.shape}`,
 			props.active && "active"
 		].filter(Boolean).join(" "));
@@ -80,6 +81,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-f9a69ac3"]]);
+}), [["__scopeId", "data-v-f0891fb1"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiBadge.js

@@ -24,6 +24,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, _ctx.$attrs, { "data-ui-badge-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-38a29166"]]);
+}), [["__scopeId", "data-v-fe098822"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiButton.js

@@ -139,6 +139,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [__props.loading || __props.pending ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_3));
 		};
 	}
-}), [["__scopeId", "data-v-84ef27e9"]]);
+}), [["__scopeId", "data-v-a89a1895"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCheckbox.js

@@ -105,6 +105,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-62f133c7"]]);
+}), [["__scopeId", "data-v-9a218638"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCombobox.js

@@ -55,6 +55,7 @@ var _hoisted_16 = {
 	class: "group"
 };
 var _hoisted_17 = [
+	"data-multiple",
 	"id",
 	"aria-selected",
 	"aria-disabled",
@@ -74,7 +75,11 @@ var _hoisted_23 = {
 	key: 1,
 	class: "primary"
 };
-var _hoisted_24 = ["id", "data-index"];
+var _hoisted_24 = [
+	"data-multiple",
+	"id",
+	"data-index"
+];
 var _hoisted_25 = {
 	key: 1,
 	class: "message"
@@ -521,6 +526,8 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 								key: row.id,
 								class: normalizeClass(["option", { active: row.index === active.value }]),
 								role: "option",
+								"data-ui-choice-option": "",
+								"data-multiple": __props.multiple ? "" : void 0,
 								id: `${uid.value}-option-${row.index}`,
 								"aria-selected": row.selected,
 								"aria-disabled": row.disabled,
@@ -548,7 +555,9 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						key: 0,
 						class: normalizeClass(["option", { active: createIndex.value === active.value }]),
 						role: "option",
+						"data-ui-choice-option": "",
 						"aria-selected": "false",
+						"data-multiple": __props.multiple ? "" : void 0,
 						id: `${uid.value}-option-${createIndex.value}`,
 						"data-index": createIndex.value
 					}, toDisplayString(`Create “${raw.value}”`), 11, _hoisted_24)) : createCommentVNode("v-if", true),
@@ -567,6 +576,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-87a4808b"]]);
+}), [["__scopeId", "data-v-f90db7fa"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiIconButton.js

@@ -95,6 +95,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			})) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-e99fb642"]]);
+}), [["__scopeId", "data-v-ae1ec9d2"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/chunks/UiInput.js

@@ -66,6 +66,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}), null, 16, _hoisted_1)), [[vModelDynamic, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-aa3c35f4"]]);
+}), [["__scopeId", "data-v-0d457505"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiInputGroup.js

@@ -41,6 +41,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-8627fd48"]]);
+}), [["__scopeId", "data-v-5ed34845"]]);
 //#endregion
 export { UiInputGroup_default as t };