@threadlabs/looma 0.3.1 → 0.5.0

package/vue/UiToastRegion.vue

@@ -0,0 +1,256 @@
+<!-- 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 UiIconButton from "./UiIconButton.vue";
+import * as controllerModule from "../components/ui-toast-region/ui-toast-region.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),
+  n: (v: unknown): number | undefined => typeof v === "number" && v === v ? v : undefined,
+  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),
+  call: (fn: string, ...args: unknown[]): any => {
+    if (fn === "format") {
+      let index = 1;
+      return typeof args[0] === "string" ? args[0].replace(/%s/g, () => index < args.length ? hn.text(args[index++]) : "%s") : undefined;
+    }
+    const n = args.map(hn.n);
+    if (n.some((value) => value === undefined)) return undefined;
+    const v = n as number[];
+    switch (fn) {
+      case "abs": return v.length === 1 ? Math.abs(v[0]!) : undefined;
+      case "round": return v.length === 1 ? Math.round(v[0]!) : undefined;
+      case "min": return v.length > 0 ? Math.min(...v) : undefined;
+      case "max": return v.length > 0 ? Math.max(...v) : undefined;
+      case "clamp": return v.length === 3 ? Math.min(Math.max(v[0]!, v[1]!), v[2]!) : undefined;
+    }
+    return undefined;
+  },
+  shape: (items: unknown, where: ((item: any) => unknown) | undefined, sort: readonly string[], limit: unknown): any[] => {
+    let list = Array.isArray(items) ? items.slice() : [];
+    if (where !== undefined) list = list.filter((item) => hn.t(where(item)));
+    if (sort.length > 0) {
+      const field = (item: unknown, path: string): unknown => item !== null && typeof item === "object" && !Array.isArray(item)
+        ? path.split(".").reduce<unknown>((value, key) => (value as Record<string, unknown> | undefined)?.[key], item)
+        : item;
+      const compare = (a: unknown, b: unknown): number => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
+      list.sort((a, b) => {
+        for (const key of sort) {
+          const descending = key.startsWith("-");
+          const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
+          if (order !== 0) return descending ? -order : order;
+        }
+        return 0;
+      });
+    }
+    return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
+  },
+};
+
+const props = withDefaults(defineProps<{
+  auto?: boolean | null;
+  duration?: number | null;
+  message?: string | null;
+  open?: boolean | null;
+}>(), {
+  auto: false,
+  duration: 5000,
+  message: "Notification",
+  open: false,
+});
+const emit = defineEmits<{
+  "close": [detail: { readonly open: boolean; readonly reason: "action" | "timeout" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+  "dismiss": [detail: { readonly id: string; readonly reason: "action" | "timeout"; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+}>();
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_internalOpen = ref<any>(false);
+const state_toasts = 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 = {"close":{"bubbles":true,"composed":true,"cancelable":false},"dismiss":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+  const checks: Record<string, (detail: unknown) => boolean> = {
+    "close": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["open"] === "boolean" && ((detail as Record<string, unknown>)["reason"] === "action" || (detail as Record<string, unknown>)["reason"] === "timeout" || (detail as Record<string, unknown>)["reason"] === "programmatic" || (detail as Record<string, unknown>)["reason"] === "light-dismiss" || (detail as Record<string, unknown>)["reason"] === "escape") && ((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) => ["open","reason","trigger"].includes(key))),
+    "dismiss": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["id"] === "string" && ((detail as Record<string, unknown>)["reason"] === "action" || (detail as Record<string, unknown>)["reason"] === "timeout") && ((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) => ["id","reason","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;
+};
+
+function read(name: string): unknown {
+  if (name === "internalOpen") return state_internalOpen.value;
+  if (name === "toasts") return state_toasts.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "internalOpen") { state_internalOpen.value = value; return true; }
+  if (name === "toasts") { state_toasts.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();
+});
+defineExpose({
+  show: async (...args: unknown[]) => { await ready; return (controllerModule as Record<string, (...values: unknown[]) => unknown>)["show"]!(host, ...args); },
+});
+</script>
+
+<template>
+  <div data-component="ui-toast-region" role="region" aria-label="Notifications" aria-live="polite" popover="manual" v-bind="$attrs" ref="root"><slot></slot><template v-for="(toast, index) in hn.shape(state_toasts, undefined, [], undefined)" :key="(toast)?.id"><div class="toast" :id="hn.attr((toast)?.id)" :role="hn.attr((toast)?.role)" :class="{ 'closing': hn.t((toast)?.closing) }"><span class="message">{{ hn.text((toast)?.message) }}</span><span class="dismiss" :data-toast="hn.attr((toast)?.id)"><UiIconButton size="sm" variant="ghost" :round="true" :label="hn.call('format', 'Dismiss %s', (toast)?.message)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg></UiIconButton></span></div></template></div>
+</template>
+
+<style scoped>
+[data-component~="ui-toast-region"] {
+      position: fixed;
+      top: calc(var(--ui-space-4) + env(safe-area-inset-top));
+      right: auto;
+      bottom: auto;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 9999;
+      display: grid;
+      gap: var(--ui-space-2);
+      inline-size: min(24rem, calc(100vw - var(--ui-space-4) * 2));
+      max-inline-size: 100%;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      overflow: visible;
+      border: 0;
+      outline: 0;
+      background: transparent;
+      box-shadow: none;
+      pointer-events: none;
+    }
+
+    [data-component~="ui-toast-region"]:not(:popover-open) {
+      display: none;
+    }
+
+    [data-component~="ui-toast-region"] > .toast,
+    [data-component~="ui-toast-region"] > :slotted(*) {
+      pointer-events: auto;
+    }
+
+    .toast {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: var(--ui-space-2);
+      align-items: start;
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-3);
+      padding: var(--ui-space-3) var(--ui-space-4);
+      background: var(--ui-surface-elevated);
+      color: var(--ui-text-primary);
+      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      animation: ui-toast-enter var(--ui-toast-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+    }
+
+    /* Leaving slides on down and fades; the controller removes the toast when this ends. */
+    .toast.closing {
+      animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease, ease) both;
+      pointer-events: none;
+    }
+
+    @keyframes ui-toast-enter {
+      from {
+        opacity: 0;
+        transform: translateY(-1rem);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes ui-toast-exit {
+      from {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      to {
+        opacity: 0;
+        transform: translateY(0.75rem);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .toast, .toast.closing {
+        animation: none;
+      }
+    }
+
+    .message {
+      min-inline-size: 0;
+      align-self: center;
+    }
+
+    .dismiss {
+      align-self: center;
+      margin-inline-end: calc(var(--ui-space-2) * -1);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-toast-region"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiTooltip.d.ts

@@ -0,0 +1,50 @@
+type __VLS_Props = {
+    for?: string | null;
+    hideDelay?: number | null;
+    inverse?: boolean | null;
+    open?: boolean | null;
+    placement?: string | null;
+    showDelay?: number | 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, {
+    close: (detail: {
+        readonly open: boolean;
+        readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+    open: (detail: {
+        readonly open: boolean;
+        readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((detail: {
+        readonly open: boolean;
+        readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+    onOpen?: ((detail: {
+        readonly open: boolean;
+        readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
+}>, {
+    for: string | null;
+    hideDelay: number | null;
+    inverse: boolean | null;
+    open: boolean | null;
+    placement: string | null;
+    showDelay: number | 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/UiTooltip.js

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

package/vue/UiTooltip.vue

@@ -0,0 +1,230 @@
+<!-- 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-tooltip/ui-tooltip.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<{
+  for?: string | null;
+  hideDelay?: number | null;
+  inverse?: boolean | null;
+  open?: boolean | null;
+  placement?: string | null;
+  showDelay?: number | null;
+}>(), {
+  for: "",
+  hideDelay: 100,
+  inverse: false,
+  open: false,
+  placement: "top-start",
+  showDelay: 500,
+});
+const emit = defineEmits<{
+  "open": [detail: { readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+  "close": [detail: { readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
+}>();
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_internalOpen = 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 = {"open":{"bubbles":true,"composed":true,"cancelable":false},"close":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+  const checks: Record<string, (detail: unknown) => boolean> = {
+    "open": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["open"] === "boolean" && ((detail as Record<string, unknown>)["reason"] === "action" || (detail as Record<string, unknown>)["reason"] === "programmatic" || (detail as Record<string, unknown>)["reason"] === "light-dismiss" || (detail as Record<string, unknown>)["reason"] === "escape") && ((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) => ["open","reason","trigger"].includes(key))),
+    "close": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["open"] === "boolean" && ((detail as Record<string, unknown>)["reason"] === "action" || (detail as Record<string, unknown>)["reason"] === "programmatic" || (detail as Record<string, unknown>)["reason"] === "light-dismiss" || (detail as Record<string, unknown>)["reason"] === "escape") && ((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) => ["open","reason","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(() => (["inverse","placement"] 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 === "internalOpen") return state_internalOpen.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "internalOpen") { state_internalOpen.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>
+  <span data-component="ui-tooltip" role="tooltip" v-bind="$attrs" :hidden="hn.attr(!hn.t(state_internalOpen))" :data-ui-tooltip-state="hostState || undefined" ref="root"><div class="surface"><slot></slot></div></span>
+</template>
+
+<style scoped>
+[data-component~="ui-tooltip"] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      display: inline-block;
+      box-sizing: border-box;
+      padding: 0;
+      border: 0;
+      outline: 0;
+      border-radius: 0;
+      background: transparent;
+      /* The UA popover default (overflow: auto) would clip the arrow. */
+      overflow: visible;
+      opacity: 0;
+      transform: translateY(4px);
+      transition:
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease),
+        display var(--ui-motion-fast) allow-discrete,
+        overlay var(--ui-motion-fast) allow-discrete;
+    }
+
+    .surface {
+      --_tooltip-line: var(--ui-tooltip-border, var(--ui-border-default));
+      position: relative;
+      box-sizing: border-box;
+      max-inline-size: var(--ui-tooltip-max-inline-size, 18rem);
+      border: 1px solid var(--_tooltip-line);
+      border-radius: var(--ui-tooltip-radius, var(--ui-radius-1));
+      background: var(--ui-tooltip-surface, var(--ui-surface-elevated));
+      color: var(--ui-tooltip-text, var(--ui-text-primary));
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-family: var(--ui-font-family-sans);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-tight);
+      box-shadow: var(--ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
+    }
+
+    [data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface {
+      --_tooltip-line: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
+      background: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
+      color: var(--ui-tooltip-inverse-text, var(--ui-surface-default));
+    }
+
+    /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
+     * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
+    .surface::after {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      inset-inline-start: var(--ui-space-3);
+      inset-block-end: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inline-size: var(--ui-tooltip-arrow-size, 0.5rem);
+      block-size: var(--ui-tooltip-arrow-size, 0.5rem);
+      box-sizing: border-box;
+      background: inherit;
+      border: 0 solid var(--_tooltip-line);
+      border-inline-end-width: 1px;
+      border-block-end-width: 1px;
+      border-end-end-radius: 1px;
+      transform: rotate(45deg);
+    }
+
+    :is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-start"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"]) .surface::after {
+      inset-block-start: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inset-block-end: auto;
+      border-inline-end-width: 0;
+      border-block-end-width: 0;
+      border-inline-start-width: 1px;
+      border-block-start-width: 1px;
+      border-end-end-radius: 0;
+      border-start-start-radius: 1px;
+    }
+
+    :is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=top-end"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"]) .surface::after {
+      inset-inline-start: auto;
+      inset-inline-end: var(--ui-space-3);
+    }
+
+    [data-component~="ui-tooltip"]:popover-open {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    @starting-style {
+      [data-component~="ui-tooltip"]:popover-open {
+        opacity: 0;
+        transform: translateY(4px);
+      }
+    }
+
+    [data-component~="ui-tooltip"][hidden] {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      [data-component~="ui-tooltip"] {
+        transition: none;
+      }
+    }
+</style>

package/vue/UiTopBar.d.ts

@@ -0,0 +1,19 @@
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    search?: (props: typeof __VLS_5) => any;
+} & {
+    actions?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/UiTopBar.js

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

package/vue/UiTopBar.vue

@@ -0,0 +1,56 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+
+defineOptions({ inheritAttrs: false });
+
+</script>
+
+<template>
+  <header data-component="ui-top-bar" v-bind="$attrs"><div class="leading"><slot name="leading"></slot></div><div class="title"><slot></slot></div><div class="search"><slot name="search"></slot></div><div class="actions"><slot name="actions"></slot></div></header>
+</template>
+
+<style scoped>
+[data-component~="ui-top-bar"] {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: var(--ui-top-bar-z-index, 100);
+      min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));
+      display: flex;
+      align-items: center;
+      gap: var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));
+      padding-block-start: env(safe-area-inset-top);
+      padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-left));
+      padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-right));
+      background: var(--ui-top-bar-bg, var(--ui-surface-elevated));
+      border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-default));
+    }
+
+    .leading,
+    .search,
+    .actions {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .actions {
+      gap: var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem));
+    }
+
+    .title {
+      min-inline-size: 0;
+      flex: 1;
+    }
+
+    /* An unused region takes no space, so it adds no gap. */
+    .leading:empty,
+    .search:empty,
+    .actions:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-top-bar"][hidden] {
+      display: none;
+    }
+</style>