@threadlabs/looma 0.6.1 → 0.6.3

package/vue/UiAvatar.vue

@@ -181,6 +181,19 @@ onBeforeUnmount(() => {
   block-size: 100%;
 }
 
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+ * Trimming applies to block containers, so the box is a block with centred content. */
+@supports (text-box-trim: trim-both) {
+  .fallback {
+    display: block;
+    text-align: center;
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+  }
+}
+
 [hidden] {
   display: none;
 }

package/vue/UiAvatarGroup.vue

@@ -134,6 +134,11 @@ onBeforeUnmount(() => {
 
 <style scoped>
 [data-component~="ui-avatar-group"] {
+  /* Avatars separate with a tight, crisp edge, matching Looma's 1px borders rather than the
+   * diffuse elevation overlays use. */
+  --_overlap-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.22);
+  --_edge-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
+
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -164,8 +169,8 @@ onBeforeUnmount(() => {
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
   box-shadow:
-    var(--ui-avatar-group-overlap-shadow, -2px 0 5px -1px rgb(0 0 0 / 0.28)),
-    0 0 0 1px rgb(0 0 0 / 0.06);
+    var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
+    var(--ui-avatar-group-edge-ring, var(--_edge-ring));
   font: inherit;
   font-size: 0.75rem;
   font-weight: 600;

package/vue/UiBadge.vue

@@ -55,6 +55,20 @@ const hostState = computed(() =>
   white-space: nowrap;
 }
 
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+ * Trimming applies to block containers, so the box is a block with centred content. */
+@supports (text-box-trim: trim-both) {
+  [data-component~="ui-badge"] {
+    display: block;
+    min-block-size: var(--ui-badge-min-block-size, 1.5rem);
+    text-align: center;
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+  }
+}
+
 [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));

package/vue/UiCombobox.vue

@@ -184,6 +184,9 @@ const inputElement = useTemplateRef<HTMLElement>('input')
 const popupElement = useTemplateRef<HTMLElement>('popup')
 const listboxElement = useTemplateRef<HTMLElement>('listbox')
 const optionsElement = useTemplateRef<HTMLElement>('options')
+const internalItems = ref<
+  { id: string; value: string; label: string; group?: string; disabled?: boolean }[]
+>([])
 const raw = ref('')
 const display = ref('')
 const selected = ref<string | null>(null)
@@ -525,6 +528,7 @@ function dispatch(name: string, detail?: unknown): boolean {
 }
 
 function read(name: string): unknown {
+  if (name === 'internalItems') return internalItems.value
   if (name === 'raw') return raw.value
   if (name === 'display') return display.value
   if (name === 'selected') return selected.value
@@ -546,6 +550,10 @@ function read(name: string): unknown {
 }
 
 function write(name: string, value: unknown): boolean {
+  if (name === 'internalItems') {
+    internalItems.value = value as never
+    return true
+  }
   if (name === 'raw') {
     raw.value = value as never
     return true
@@ -727,76 +735,100 @@ defineExpose({
     <label :for="`${uid}-input`" :class="{ 'sr-only': labelVisibility === 'sr-only' }">{{ label }}
       <template v-if="required">
         *</template></label>
-    <div class="field" ref="field">
-      <slot name="start" />
-      <template v-if="multiple"><button
-          v-for="(item, index) in items"
-          :key="item.id"
-          class="item"
+    <div class="control">
+      <div class="field" ref="field">
+        <slot name="start" />
+        <template v-if="multiple"><button
+            v-for="(item, index) in internalItems"
+            :key="item.id"
+            class="item"
+            type="button"
+            tabindex="-1"
+            :data-index="index"
+            :disabled="disabled || readonly || item.disabled"
+            :aria-label="`${item.label}, press Delete or Backspace to remove`"
+          >
+            <slot :name="`item-${item.id}`"><UiBadge>{{ item.label }}</UiBadge></slot>
+          </button></template>
+        <input
+          role="combobox"
+          aria-autocomplete="list"
+          autocomplete="off"
+          :id="`${uid}-input`"
+          :aria-controls="`${uid}-listbox`"
+          :aria-expanded="expanded"
+          :aria-invalid="validationStatus === 'error'"
+          :aria-busy="validationStatus === 'pending'"
+          :value.prop="display"
+          :placeholder="placeholder"
+          :name="name"
+          :disabled="disabled"
+          :readonly="readonly"
+          :required="required"
+          ref="input"
+        >
+        <button v-if="clearable" type="button" data-combobox-action="clear" aria-label="Clear">
+          <svg
+            class="affordance-icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+          >
+            <path d="M7 7l10 10M17 7 7 17"></path>
+          </svg>
+        </button>
+        <button
+          v-if="disclosure"
           type="button"
+          data-combobox-action="disclosure"
           tabindex="-1"
-          :data-index="index"
-          :disabled="disabled || readonly || item.disabled"
-          :aria-label="`${item.label}, press Delete or Backspace to remove`"
+          aria-label="Show suggestions"
+          :aria-controls="`${uid}-listbox`"
         >
-          <slot :name="`item-${item.id}`"><UiBadge>{{ item.label }}</UiBadge></slot>
-        </button></template>
-      <input
-        role="combobox"
-        aria-autocomplete="list"
-        autocomplete="off"
-        :id="`${uid}-input`"
-        :aria-controls="`${uid}-listbox`"
-        :aria-expanded="expanded"
-        :aria-invalid="validationStatus === 'error'"
-        :aria-busy="validationStatus === 'pending'"
-        :value.prop="display"
-        :placeholder="placeholder"
-        :name="name"
-        :disabled="disabled"
-        :readonly="readonly"
-        :required="required"
-        ref="input"
-      >
-      <button v-if="clearable" type="button" data-combobox-action="clear" aria-label="Clear">
-        <svg
-          class="affordance-icon"
-          aria-hidden="true"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-        >
-          <path d="M7 7l10 10M17 7 7 17"></path>
-        </svg>
-      </button>
-      <button v-if="help" type="button" aria-label="Help" :id="`${uid}-help`" :disabled="disabled">
-        <span aria-hidden="true">?</span>
-      </button>
+          <svg
+            class="affordance-icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m6 9 6 6 6-6"></path>
+          </svg>
+        </button>
+      </div>
       <button
-        v-if="disclosure"
+        v-if="help"
+        class="help"
         type="button"
-        data-combobox-action="disclosure"
-        tabindex="-1"
-        aria-label="Show suggestions"
-        :aria-controls="`${uid}-listbox`"
+        aria-label="Help"
+        :id="`${uid}-help`"
+        :disabled="disabled"
       >
         <svg
-          class="affordance-icon"
+          class="help-icon"
           aria-hidden="true"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          stroke-width="2.25"
+          stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
         >
-          <path d="m6 9 6 6 6-6"></path>
+          <circle cx="12" cy="12" r="10"></circle>
+          <path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"></path>
+          <path d="M12 17h.01"></path>
         </svg>
       </button>
     </div>
-    <UiTooltip v-if="help" :id="`${uid}-help-text`" :for="`${uid}-help`">{{ help }}</UiTooltip>
+    <UiTooltip v-if="help" trigger="click" :id="`${uid}-help-text`" :for="`${uid}-help`">{{
+      help
+    }}</UiTooltip>
     <div class="popup" :hidden="!expanded" ref="popup">
       <div
         role="listbox"
@@ -862,7 +894,17 @@ label {
   font-size: var(--ui-combobox-label-font-size, 0.875rem);
   font-weight: 500;
 }
+/* The field and anything that annotates it sit on one row; the help button is beside the box,
+   not inside it, because a control's box holds its value. */
+.control {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-inline-size: 0;
+}
+
 .field {
+  flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
   border: 1px solid var(--ui-control-border, var(--ui-border-default));
@@ -879,6 +921,46 @@ label {
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
+/* A ghost icon button: the affordance is the mark, not a box around it. */
+.help {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--ui-control-size-sm);
+  block-size: var(--ui-control-size-sm);
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-radius-round);
+  background: transparent;
+  color: var(--ui-text-secondary);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+.help:hover:enabled,
+.help[aria-expanded="true"] {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  color: var(--ui-text-primary);
+}
+
+.help:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-halo);
+}
+
+.help:disabled {
+  color: var(--ui-disabled-text);
+  cursor: not-allowed;
+}
+
+.help-icon {
+  inline-size: var(--ui-icon-size-sm);
+  block-size: var(--ui-icon-size-sm);
+}
+
 input::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;

package/vue/UiMenuItem.vue

@@ -46,6 +46,19 @@ withDefaults(
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+ * Trimming applies to block containers, so the box is a block with centred content. */
+@supports (text-box-trim: trim-both) {
+  [data-component~="ui-menu-item"] {
+    display: block;
+    min-block-size: var(--ui-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem));
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+  }
+}
+
 [data-component~="ui-menu-item"]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
   background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
 }

package/vue/UiTabs.vue

@@ -259,6 +259,19 @@ onBeforeUnmount(() => {
     border-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+ * Trimming applies to block containers, so the box is a block with centred content. */
+@supports (text-box-trim: trim-both) {
+  .list button {
+    display: block;
+    text-align: center;
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+  }
+}
+
 [data-component~="ui-tabs"][data-ui-tabs-state~="stretch"] .list {
   grid-auto-columns: minmax(max-content, 1fr);
 }

package/vue/UiTooltip.d.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     open?: boolean;
     placement?: string;
     showDelay?: number;
+    trigger?: 'hover' | 'click' | 'focus';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -22,6 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
     "update:open": (value: boolean) => any;
+    "update:trigger": (value: "click" | "focus" | "hover") => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: ((detail: {
         readonly open: boolean;
@@ -34,7 +36,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:trigger"?: ((value: "click" | "focus" | "hover") => any) | undefined;
 }>, {
+    trigger: "hover" | "click" | "focus";
     for: string;
     hideDelay: number;
     inverse: boolean;

package/vue/UiTooltip.vue

@@ -13,6 +13,7 @@ const props = withDefaults(
     open?: boolean
     placement?: string
     showDelay?: number
+    trigger?: 'hover' | 'click' | 'focus'
   }>(),
   {
     for: '',
@@ -21,10 +22,12 @@ const props = withDefaults(
     open: false,
     placement: 'top-start',
     showDelay: 500,
+    trigger: 'hover',
   },
 )
 const emit = defineEmits<{
   'update:open': [value: boolean]
+  'update:trigger': [value: 'hover' | 'click' | 'focus']
   open: [
     detail: {
       readonly open: boolean
@@ -91,6 +94,9 @@ function dispatch(name: string, detail?: unknown): boolean {
   if (detail !== null && typeof detail === 'object' && 'open' in detail) {
     emitEvent('update:open', (detail as Record<string, unknown>)['open'])
   }
+  if (detail !== null && typeof detail === 'object' && 'trigger' in detail) {
+    emitEvent('update:trigger', (detail as Record<string, unknown>)['trigger'])
+  }
   return root.value?.dispatchEvent(
     new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
   ) ?? true

package/vue/chunks/UiAvatar.js

@@ -133,6 +133,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16);
 		};
 	}
-}), [["__scopeId", "data-v-038b6eb1"]]);
+}), [["__scopeId", "data-v-3a27ff1d"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -114,6 +114,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-6029679e"]]);
+}), [["__scopeId", "data-v-2ad5d86f"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiBadge.js

@@ -19,6 +19,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-43aa138f"]]);
+}), [["__scopeId", "data-v-7e9b5784"]]);
 //#endregion
 export { UiBadge_default as t };