@threadlabs/looma 0.4.0 → 0.5.1

package/vue/UiAvatarGroup.vue

@@ -0,0 +1,167 @@
+<!-- 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-avatar-group/ui-avatar-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),
+  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),
+  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(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;
+  },
+};
+
+const props = withDefaults(defineProps<{
+  label?: string | null;
+  max?: number | null;
+}>(), {
+  label: "People",
+  max: 5,
+});
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_overflowCount = ref<any>(0);
+
+/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+const dispatch = (name: string, detail?: unknown): boolean => {
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail })) ?? true;
+};
+
+function read(name: string): unknown {
+  if (name === "overflowCount") return state_overflowCount.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "overflowCount") { state_overflowCount.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>
+  <div data-component="ui-avatar-group" role="group" v-bind="$attrs" :aria-label="hn.enumerated(props.label)" ref="root"><slot></slot><span class="overflow" role="img" :hidden="hn.attr(!hn.t(state_overflowCount))" :aria-label="hn.enumerated(hn.call('format', '%s more', state_overflowCount))" :ref="(element) => { refs['overflow'] = element as Element }">{{ hn.text(hn.call("format", "+%s", state_overflowCount)) }}</span></div>
+</template>
+
+<style scoped>
+[data-component~="ui-avatar-group"] {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      gap: 0;
+    }
+
+    /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
+     * component roots outside this style scope. */
+    :slotted(*) {
+      margin-inline-start: -0.625rem;
+      flex-shrink: 0;
+      border-radius: 999px;
+    }
+
+    :slotted(*:first-child) {
+      margin-inline-start: 0;
+    }
+
+    .overflow {
+      margin-inline-start: -0.625rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 2.5rem;
+      block-size: 2.5rem;
+      border-radius: 999px;
+      border: 1px solid var(--ui-border-strong);
+      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);
+      font: inherit;
+      font-size: 0.75rem;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+
+    .overflow[hidden] {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-avatar-group"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiBadge.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
+    variant?: "solid" | "subtle" | 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<{}>, {
+    tone: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
+    variant: "solid" | "subtle" | 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/UiBadge.js

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

package/vue/UiBadge.vue

@@ -0,0 +1,123 @@
+<!-- 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 = withDefaults(defineProps<{
+  tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
+  variant?: "solid" | "subtle" | null;
+}>(), {
+  tone: "neutral",
+  variant: "subtle",
+});
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["tone","variant"] 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>
+  <span data-component="ui-badge" v-bind="$attrs" :data-ui-badge-state="hostState || undefined"><slot></slot></span>
+</template>
+
+<style scoped>
+[data-component~="ui-badge"] {
+      --_badge-surface: var(--ui-surface-subtle);
+      --_badge-text: var(--ui-text-secondary);
+      --_badge-border: color-mix(in srgb, var(--ui-text-secondary) 30%, transparent);
+
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      max-width: 100%;
+      padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
+      border: 1px solid var(--ui-badge-border, var(--_badge-border));
+      border-radius: var(--ui-radius-round);
+      background: var(--ui-badge-surface, var(--_badge-surface));
+      color: var(--ui-badge-text, var(--_badge-text));
+      font-family: var(--ui-font-family-sans);
+      font-size: var(--ui-badge-font-size, var(--ui-font-size-sm));
+      font-weight: var(--ui-badge-font-weight, var(--ui-font-medium));
+      line-height: var(--ui-badge-line-height, var(--ui-line-height-tight));
+      white-space: nowrap;
+    }
+
+    [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));
+      --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
+    }
+
+    [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"] {
+      --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
+      --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
+      --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
+    }
+
+    [data-component~="ui-badge"][data-ui-badge-state~="tone=success"] {
+      --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
+      --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
+      --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
+    }
+
+    [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"] {
+      --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
+      --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
+      --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
+    }
+
+    [data-component~="ui-badge"][data-ui-badge-state~="tone=info"] {
+      --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
+      --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
+      --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
+    }
+
+    [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"] {
+      --_badge-surface: var(--ui-accent-soft);
+      --_badge-border: var(--ui-accent-soft);
+      --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
+    }
+
+    [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"] {
+      --_badge-surface: var(--ui-danger-soft);
+      --_badge-border: var(--ui-danger-soft);
+      --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
+    }
+
+    [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"] {
+      --_badge-surface: var(--ui-success-soft);
+      --_badge-border: var(--ui-success-soft);
+      --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
+    }
+
+    [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"] {
+      --_badge-surface: var(--ui-warning-soft);
+      --_badge-border: var(--ui-warning-soft);
+      --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
+    }
+
+    [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"] {
+      --_badge-surface: var(--ui-info-soft);
+      --_badge-border: var(--ui-info-soft);
+      --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-badge"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiButton.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    disabled?: boolean | null;
+    size?: "sm" | "md" | "lg" | null;
+    variant?: "outline" | "solid" | "danger" | "ghost" | "link" | 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<{}>, {
+    variant: "outline" | "solid" | "danger" | "ghost" | "link" | null;
+    disabled: boolean | null;
+    size: "sm" | "md" | "lg" | 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/UiButton.js

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

package/vue/UiButton.vue

@@ -0,0 +1,257 @@
+<!-- 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;
+  size?: "sm" | "md" | "lg" | null;
+  variant?: "outline" | "solid" | "danger" | "ghost" | "link" | null;
+}>(), {
+  disabled: false,
+  size: "md",
+  variant: "outline",
+});
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["variant","size"] 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-button" type="button" v-bind="$attrs" :disabled="hn.attr(props.disabled)" :data-ui-button-state="hostState || undefined"><slot></slot></button>
+</template>
+
+<style scoped>
+[data-component~="ui-button"] {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      vertical-align: middle;
+      color: var(--ui-action-secondary-text, var(--ui-text-primary));
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=solid"] {
+      color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+    }
+
+    [data-component~="ui-button"] {
+      appearance: none;
+      min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md, 2.5rem));
+      border: 1px solid var(--ui-button-border, var(--ui-border-strong));
+      border-radius: var(--ui-button-radius, var(--ui-radius-2));
+      background: var(--ui-button-surface, var(--ui-surface-elevated));
+      color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+      font: inherit;
+      font-weight: var(--ui-font-medium, 500);
+      line-height: var(--ui-line-height-tight);
+      padding: var(--ui-space-2) var(--ui-space-3);
+      background-image: var(--ui-raised-highlight, none);
+      box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease);
+      margin: 0;
+    }
+
+    @supports (text-box-trim: trim-both) {
+      [data-component~="ui-button"] {
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+      }
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="size=sm"] {
+      min-block-size: var(--ui-control-size-sm, 2rem);
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-size: 0.875rem;
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="size=lg"] {
+      min-block-size: var(--ui-control-size-lg, 3rem);
+      padding: var(--ui-space-3) var(--ui-space-4);
+      font-size: 1rem;
+    }
+
+    [data-component~="ui-button"]:hover:enabled {
+      background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
+      border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+    }
+
+    [data-component~="ui-button"]:active:enabled {
+      background: var(--ui-surface-subtle);
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=solid"] {
+      border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
+      background: var(--ui-action-primary-surface, var(--ui-accent-solid));
+      color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+      box-shadow: var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs));
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:hover:enabled {
+      background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
+      border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
+      box-shadow: var(--ui-shadow-sm);
+      transform: translateY(-1px);
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:active:enabled {
+      background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
+      border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
+      box-shadow: none;
+      transform: translateY(0);
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
+      border-color: var(--ui-danger-solid);
+      background: var(--ui-danger-solid);
+      color: var(--ui-text-on-accent);
+      box-shadow: var(--ui-button-danger-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs));
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=danger"]:hover:enabled {
+      background: var(--ui-danger-hover);
+      border-color: var(--ui-danger-hover);
+      box-shadow: var(--ui-shadow-sm);
+      transform: translateY(-1px);
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=danger"]:active:enabled {
+      box-shadow: none;
+      transform: translateY(0);
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=ghost"] {
+      border-color: transparent;
+      background: transparent;
+      box-shadow: none;
+      color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+    }
+
+    /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
+    [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:hover:enabled {
+      background: var(--ui-button-ghost-hover, color-mix(in srgb, currentColor 8%, transparent));
+      border-color: transparent;
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:active:enabled {
+      background: var(--ui-button-ghost-active, color-mix(in srgb, currentColor 14%, transparent));
+      border-color: transparent;
+    }
+
+    /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
+    [data-component~="ui-button"]:focus-visible {
+      outline: none;
+      box-shadow:
+        var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs))),
+        var(--ui-focus-halo);
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:focus-visible {
+      box-shadow:
+        var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs)),
+        var(--ui-focus-halo);
+    }
+
+    /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
+    [data-component~="ui-button"]:disabled {
+      opacity: var(--ui-button-disabled-opacity, 0.6);
+      cursor: not-allowed;
+      border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
+      background-color: var(--ui-button-disabled-surface, var(--ui-button-surface, var(--ui-surface-elevated)));
+      color: var(--ui-button-disabled-text, var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:disabled {
+      border-color: var(--ui-button-disabled-border, var(--ui-action-primary-surface, var(--ui-accent-solid)));
+      background-color: var(--ui-button-disabled-surface, var(--ui-action-primary-surface, var(--ui-accent-solid)));
+      color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=danger"]:disabled {
+      border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
+      background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
+      color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:disabled {
+      border-color: transparent;
+      background-color: transparent;
+      color: var(--ui-button-disabled-text, var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
+    }
+
+    @media (pointer: coarse) {
+      [data-component~="ui-button"] {
+        min-block-size: var(--ui-control-min-block-size, 2.75rem);
+      }
+    }
+
+    /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
+       WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
+    [data-component~="ui-button"][data-ui-button-state~="variant=link"] {
+      display: inline;
+      min-block-size: 0;
+      padding: 0;
+      border: 0;
+      border-radius: var(--ui-radius-sm, 4px);
+      background: none;
+      box-shadow: none;
+      font: inherit;
+      color: var(--ui-button-link-color, var(--ui-text-secondary));
+      text-decoration-line: underline;
+      text-decoration-thickness: 1px;
+      text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+      text-underline-offset: 0.2em;
+      transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=link"]:hover:enabled {
+      color: var(--ui-button-link-hover-color, var(--ui-text-primary));
+      text-decoration-color: currentColor;
+      background: none;
+      transform: none;
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=link"]:active:enabled {
+      background: none;
+      transform: none;
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=link"]:disabled {
+      background: none;
+      color: var(--ui-button-disabled-text, var(--ui-button-link-color, var(--ui-text-secondary)));
+    }
+
+    [data-component~="ui-button"][data-ui-button-state~="variant=link"]:focus-visible {
+      box-shadow: none;
+      /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
+      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline-offset: 2px;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-button"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiCallout.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    tone?: "info" | "note" | "warning" | "success" | "danger" | 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<{}>, {
+    tone: "info" | "note" | "warning" | "success" | "danger" | 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/UiCallout.js

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