@threadlabs/looma 0.4.0 → 0.5.1

package/vue/UiRadio.vue

@@ -0,0 +1,166 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
+import * as controllerModule from "../components/ui-radio/ui-radio.js";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
+  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
+};
+
+const props = withDefaults(defineProps<{
+  checked?: boolean | null;
+  disabled?: boolean | null;
+  name?: string | null;
+  required?: boolean | null;
+  value?: string | null;
+}>(), {
+  checked: false,
+  disabled: false,
+  name: "",
+  required: false,
+  value: "on",
+});
+const emit = defineEmits<{
+  "change": [detail: { readonly checked: boolean; readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+}>();
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_internalChecked = ref<any>(false);
+
+/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+const dispatch = (name: string, detail?: unknown): boolean => {
+  const declared = {"change":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+  const checks: Record<string, (detail: unknown) => boolean> = {
+    "change": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["checked"] === "boolean" && typeof (detail as Record<string, unknown>)["value"] === "string" && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["checked","value","trigger"].includes(key))),
+  };
+  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+  }
+  (emit as (name: string, detail: unknown) => void)(name, detail);
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
+};
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["disabled"] as const).flatMap((name) => {
+  const value = read(name);
+  const tokens: string[] = hn.t(value) ? [name] : [];
+  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
+  return tokens;
+}).join(" "));
+
+function read(name: string): unknown {
+  if (name === "internalChecked") return state_internalChecked.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "internalChecked") { state_internalChecked.value = value; return true; }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+}
+
+const stops: Array<() => void> = [];
+const host = {
+  get element(): Element { return root.value as Element; },
+  state: new Proxy({} as Record<string, unknown>, {
+    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === "string" && write(name, value),
+  }),
+  refs: refs as Readonly<Record<string, Element>>,
+  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
+    get: (_target, name) => {
+      if (typeof name !== "string" || root.value === null) return undefined;
+      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
+      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+    },
+  }),
+  signal<T>(initialValue: T) {
+    const value = shallowRef(initialValue);
+    return {
+      get: (): T => value.value,
+      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
+      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
+    };
+  },
+  computed<T>(compute: () => T) {
+    const value = computed(compute);
+    return { get: (): T => value.value };
+  },
+  effect(run: () => void | (() => void)): () => void {
+    const stop = watchEffect((onCleanup) => {
+      const cleanup = run();
+      if (typeof cleanup === "function") onCleanup(cleanup);
+    }, { flush: "post" });
+    stops.push(stop);
+    return stop;
+  },
+  on(event: string, listener: EventListener): () => void {
+    const element = root.value;
+    element?.addEventListener(event, listener);
+    const off = (): void => element?.removeEventListener(event, listener);
+    stops.push(off);
+    return off;
+  },
+  dispatch,
+};
+
+let cleanup: void | (() => void);
+let ready: Promise<void> | undefined;
+onMounted(() => {
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
+});
+onBeforeUnmount(() => {
+  for (const stop of stops.splice(0)) stop();
+  if (typeof cleanup === "function") cleanup();
+});
+</script>
+
+<template>
+  <label data-component="ui-radio" v-bind="$attrs" :data-ui-radio-state="hostState || undefined" ref="root"><input type="radio" :checked.prop="(state_internalChecked) as any" :disabled="hn.attr(props.disabled)" :required="hn.attr(props.required)" :value="hn.attr(props.value)" :name="hn.attr(props.name)" :ref="(element) => { refs['input'] = element as Element }"><span class="label"><slot></slot></span></label>
+</template>
+
+<style scoped>
+[data-component~="ui-radio"] {
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--ui-radio-gap, var(--ui-space-2));
+      max-inline-size: 100%;
+      color: var(--ui-text-primary);
+      cursor: pointer;
+    }
+
+    .label {
+      min-inline-size: 0;
+      line-height: var(--ui-line-height-md);
+    }
+
+    input {
+      flex: 0 0 auto;
+      inline-size: var(--ui-radio-size, 1.125rem);
+      block-size: var(--ui-radio-size, 1.125rem);
+      margin: 0.125em 0 0;
+      accent-color: var(--ui-accent-solid);
+      cursor: pointer;
+    }
+
+    input:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: 2px;
+    }
+
+    [data-component~="ui-radio"][data-ui-radio-state~="disabled"] {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+    [data-component~="ui-radio"][data-ui-radio-state~="disabled"] input {
+      cursor: not-allowed;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-radio"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiRadioGroup.d.ts

@@ -0,0 +1,50 @@
+type __VLS_Props = {
+    disabled?: boolean | null;
+    label?: string | null;
+    name?: string | null;
+    orientation?: "horizontal" | "vertical" | null;
+    required?: boolean | null;
+    value?: string | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (detail: {
+        readonly value: string;
+        readonly previousValue: string;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+    change: (detail: {
+        readonly checked: boolean;
+        readonly value: string;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((detail: {
+        readonly value: string;
+        readonly previousValue: string;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+    onChange?: ((detail: {
+        readonly checked: boolean;
+        readonly value: string;
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+}>, {
+    label: string | null;
+    name: string | null;
+    disabled: boolean | null;
+    required: boolean | null;
+    value: string | null;
+    orientation: "horizontal" | "vertical" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiRadioGroup.js

@@ -0,0 +1,2 @@
+import { t as UiRadioGroup_default } from "./chunks/UiRadioGroup.js";
+export { UiRadioGroup_default as default };

package/vue/UiRadioGroup.vue

@@ -0,0 +1,161 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
+import * as controllerModule from "../components/ui-radio-group/ui-radio-group.js";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
+};
+
+const props = withDefaults(defineProps<{
+  disabled?: boolean | null;
+  label?: string | null;
+  name?: string | null;
+  orientation?: "horizontal" | "vertical" | null;
+  required?: boolean | null;
+  value?: string | null;
+}>(), {
+  disabled: false,
+  label: "Options",
+  name: "",
+  orientation: "horizontal",
+  required: false,
+  value: "",
+});
+const emit = defineEmits<{
+  "select": [detail: { readonly value: string; readonly previousValue: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+  "change": [detail: { readonly checked: boolean; readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+}>();
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_internalValue = ref<any>("");
+
+/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+const dispatch = (name: string, detail?: unknown): boolean => {
+  const declared = {"select":{"bubbles":true,"composed":true,"cancelable":false},"change":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+  const checks: Record<string, (detail: unknown) => boolean> = {
+    "select": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["value"] === "string" && typeof (detail as Record<string, unknown>)["previousValue"] === "string" && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["value","previousValue","trigger"].includes(key))),
+    "change": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["checked"] === "boolean" && typeof (detail as Record<string, unknown>)["value"] === "string" && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["checked","value","trigger"].includes(key))),
+  };
+  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+  }
+  (emit as (name: string, detail: unknown) => void)(name, detail);
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
+};
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["orientation"] as const).flatMap((name) => {
+  const value = read(name);
+  const tokens: string[] = hn.t(value) ? [name] : [];
+  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
+  return tokens;
+}).join(" "));
+
+function read(name: string): unknown {
+  if (name === "internalValue") return state_internalValue.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "internalValue") { state_internalValue.value = value; return true; }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+}
+
+const stops: Array<() => void> = [];
+const host = {
+  get element(): Element { return root.value as Element; },
+  state: new Proxy({} as Record<string, unknown>, {
+    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === "string" && write(name, value),
+  }),
+  refs: refs as Readonly<Record<string, Element>>,
+  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
+    get: (_target, name) => {
+      if (typeof name !== "string" || root.value === null) return undefined;
+      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
+      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+    },
+  }),
+  signal<T>(initialValue: T) {
+    const value = shallowRef(initialValue);
+    return {
+      get: (): T => value.value,
+      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
+      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
+    };
+  },
+  computed<T>(compute: () => T) {
+    const value = computed(compute);
+    return { get: (): T => value.value };
+  },
+  effect(run: () => void | (() => void)): () => void {
+    const stop = watchEffect((onCleanup) => {
+      const cleanup = run();
+      if (typeof cleanup === "function") onCleanup(cleanup);
+    }, { flush: "post" });
+    stops.push(stop);
+    return stop;
+  },
+  on(event: string, listener: EventListener): () => void {
+    const element = root.value;
+    element?.addEventListener(event, listener);
+    const off = (): void => element?.removeEventListener(event, listener);
+    stops.push(off);
+    return off;
+  },
+  dispatch,
+};
+
+let cleanup: void | (() => void);
+let ready: Promise<void> | undefined;
+onMounted(() => {
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
+});
+onBeforeUnmount(() => {
+  for (const stop of stops.splice(0)) stop();
+  if (typeof cleanup === "function") cleanup();
+});
+</script>
+
+<template>
+  <fieldset data-component="ui-radio-group" role="radiogroup" v-bind="$attrs" :data-ui-radio-group-state="hostState || undefined" ref="root"><legend>{{ hn.text(props.label) }}</legend><slot></slot></fieldset>
+</template>
+
+<style scoped>
+[data-component~="ui-radio-group"] {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+      margin: 0;
+      padding: 0;
+      border: 0;
+    }
+
+    legend {
+      float: inline-start;
+      inline-size: 100%;
+      margin: 0 0 var(--ui-space-2);
+      padding: 0;
+      color: var(--ui-text-primary);
+      font-weight: var(--ui-font-medium);
+    }
+
+    legend + * {
+      clear: both;
+    }
+
+    [data-component~="ui-radio-group"][data-ui-radio-group-state~="orientation=vertical"] {
+      display: inline-grid;
+      justify-items: start;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-radio-group"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiReel.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    gap?: "xs" | "s" | "m" | "l" | "xl" | null;
+    itemWidth?: "sm" | "md" | "lg" | null;
+    snap?: "start" | "center" | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiReel.js

@@ -0,0 +1,2 @@
+import { t as UiReel_default } from "./chunks/UiReel.js";
+export { UiReel_default as default };

package/vue/UiReel.vue

@@ -0,0 +1,93 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+};
+
+const props = defineProps<{
+  gap?: "xs" | "s" | "m" | "l" | "xl" | null;
+  itemWidth?: "sm" | "md" | "lg" | null;
+  snap?: "start" | "center" | null;
+}>();
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["gap","itemWidth","snap"] as const).flatMap((name) => {
+  const value = read(name);
+  const tokens: string[] = hn.t(value) ? [name] : [];
+  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
+  return tokens;
+}).join(" "));
+
+function read(name: string): unknown {
+  return (props as Record<string, unknown>)[name];
+}
+
+</script>
+
+<template>
+  <div data-component="ui-reel" role="region" tabindex="0" v-bind="$attrs" :data-ui-reel-state="hostState || undefined"><slot></slot></div>
+</template>
+
+<style scoped>
+[data-component~="ui-reel"] {
+      --_reel-gap: var(--ui-space-4, 1rem);
+      --_reel-item-width: auto;
+      display: flex;
+      inline-size: 100%;
+      gap: var(--ui-reel-gap, var(--_reel-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      overscroll-behavior-inline: contain;
+    }
+
+    [data-component~="ui-reel"] > :slotted(*) {
+      min-inline-size: 0;
+      flex: 0 0 var(--ui-reel-item-width, var(--_reel-item-width));
+    }
+
+    [data-component~="ui-reel"][data-ui-reel-state~="gap=xs"] {
+      --_reel-gap: var(--ui-space-2, 0.5rem);
+    }
+    [data-component~="ui-reel"][data-ui-reel-state~="gap=s"] {
+      --_reel-gap: var(--ui-space-3, 0.75rem);
+    }
+    [data-component~="ui-reel"][data-ui-reel-state~="gap=m"] {
+      --_reel-gap: var(--ui-space-4, 1rem);
+    }
+    [data-component~="ui-reel"][data-ui-reel-state~="gap=l"] {
+      --_reel-gap: var(--ui-space-5, 1.5rem);
+    }
+    [data-component~="ui-reel"][data-ui-reel-state~="gap=xl"] {
+      --_reel-gap: var(--ui-space-6, 2rem);
+    }
+    [data-component~="ui-reel"][data-ui-reel-state~="itemWidth=sm"] {
+      --_reel-item-width: 12rem;
+    }
+    [data-component~="ui-reel"][data-ui-reel-state~="itemWidth=md"] {
+      --_reel-item-width: 16rem;
+    }
+    [data-component~="ui-reel"][data-ui-reel-state~="itemWidth=lg"] {
+      --_reel-item-width: 20rem;
+    }
+    [data-component~="ui-reel"][data-ui-reel-state~="snap"] {
+      scroll-snap-type: inline mandatory;
+    }
+    [data-component~="ui-reel"][data-ui-reel-state~="snap=start"] > :slotted(*) {
+      scroll-snap-align: start;
+    }
+    [data-component~="ui-reel"][data-ui-reel-state~="snap=center"] > :slotted(*) {
+      scroll-snap-align: center;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-reel"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiSearchResultRow.d.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    disabled?: boolean | null;
+    selected?: boolean | null;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_3) => any;
+} & {
+    meta?: (props: typeof __VLS_5) => any;
+} & {
+    excerpt?: (props: typeof __VLS_7) => any;
+} & {
+    trailing?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean | null;
+    selected: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiSearchResultRow.js

@@ -0,0 +1,2 @@
+import { t as UiSearchResultRow_default } from "./chunks/UiSearchResultRow.js";
+export { UiSearchResultRow_default as default };

package/vue/UiSearchResultRow.vue

@@ -0,0 +1,124 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
+  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
+};
+
+const props = withDefaults(defineProps<{
+  disabled?: boolean | null;
+  selected?: boolean | null;
+}>(), {
+  disabled: false,
+  selected: false,
+});
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["selected"] as const).flatMap((name) => {
+  const value = read(name);
+  const tokens: string[] = hn.t(value) ? [name] : [];
+  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
+  return tokens;
+}).join(" "));
+
+function read(name: string): unknown {
+  return (props as Record<string, unknown>)[name];
+}
+
+</script>
+
+<template>
+  <button data-component="ui-search-result-row" type="button" v-bind="$attrs" :disabled="hn.attr(props.disabled)" :data-ui-search-result-row-state="hostState || undefined"><span class="leading"><slot name="leading"></slot></span><span class="content"><span class="title"><slot name="title"></slot></span><span class="meta"><slot name="meta"></slot></span><span class="excerpt"><slot name="excerpt"></slot></span></span><span class="trailing"><slot name="trailing"></slot></span></button>
+</template>
+
+<style scoped>
+[data-component~="ui-search-result-row"] {
+      appearance: none;
+      inline-size: 100%;
+      min-block-size: var(--ui-search-result-row-min-height, 56px);
+      margin: 0;
+      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3, 0.75rem));
+      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4, 1rem));
+      display: flex;
+      align-items: flex-start;
+      gap: var(--ui-search-result-row-gap, var(--ui-space-3, 0.75rem));
+      background: var(--ui-search-result-row-bg, transparent);
+      border: none;
+      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border, #e5e7eb));
+      color: inherit;
+      cursor: pointer;
+      text-align: left;
+      transition: background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, 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-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%));
+    }
+
+    [data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"] {
+      background: var(
+        --ui-search-result-row-selected-bg,
+        var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%))
+      );
+    }
+
+    [data-component~="ui-search-result-row"]:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, #2563eb);
+      outline-offset: -2px;
+    }
+
+    [data-component~="ui-search-result-row"]:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .leading,
+    .trailing {
+      display: inline-flex;
+      align-items: flex-start;
+      flex-shrink: 0;
+    }
+
+    .content {
+      min-inline-size: 0;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .title,
+    .meta,
+    .excerpt {
+      display: block;
+      min-inline-size: 0;
+    }
+
+    /* An unused region takes no space. */
+    .leading:empty,
+    .meta:empty,
+    .excerpt:empty,
+    .trailing:empty {
+      display: none;
+    }
+
+    :slotted([slot="title"]),
+    :slotted([slot="meta"]),
+    :slotted([slot="excerpt"]) {
+      display: block;
+      margin: 0;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-search-result-row"][hidden] {
+      display: none;
+    }
+</style>