@threadlabs/looma 0.4.0 → 0.5.0

package/vue/UiFormField.js

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

package/vue/UiFormField.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, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
+import * as controllerModule from "../components/ui-form-field/ui-form-field.js";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<{
+  disabled?: boolean | null;
+  invalid?: boolean | null;
+  required?: boolean | null;
+}>(), {
+  disabled: false,
+  invalid: false,
+  required: false,
+});
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+
+/** 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 {
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  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-form-field" v-bind="$attrs" ref="root"><slot name="label"></slot><slot></slot><slot name="help"></slot><slot name="error"></slot></div>
+</template>
+
+<style scoped>
+[data-component~="ui-form-field"] {
+      display: grid;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+      align-content: start;
+      color: var(--ui-text-primary);
+    }
+
+    :slotted([slot="label"]) {
+      color: var(--ui-text-secondary);
+      font-size: 0.95rem;
+    }
+
+    :slotted([slot="help"]) {
+      min-block-size: var(--ui-form-field-help-min-block-size, 0);
+      color: var(--ui-text-muted);
+      font-size: 0.875rem;
+      line-height: var(--ui-line-height-md);
+    }
+
+    :slotted([slot="error"]),
+    :slotted([role="alert"]) {
+      color: var(--ui-accent-active);
+      font-size: 0.875rem;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-form-field"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiGrid.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    gap?: "xs" | "s" | "m" | "l" | "xl" | null;
+    min?: "sm" | "md" | "lg" | 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/UiGrid.js

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

package/vue/UiGrid.vue

@@ -0,0 +1,72 @@
+<!-- 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;
+  min?: "sm" | "md" | "lg" | null;
+}>();
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["gap","min"] 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-grid" v-bind="$attrs" :data-ui-grid-state="hostState || undefined"><slot></slot></div>
+</template>
+
+<style scoped>
+[data-component~="ui-grid"] {
+      --_grid-gap: var(--ui-space-4, 1rem);
+      --_grid-min: 12rem;
+      display: grid;
+      gap: var(--ui-grid-gap, var(--_grid-gap));
+      grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min, var(--_grid-min)), 100%), 1fr));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    [data-component~="ui-grid"][data-ui-grid-state~="gap=xs"] {
+      --_grid-gap: var(--ui-space-2, 0.5rem);
+    }
+    [data-component~="ui-grid"][data-ui-grid-state~="gap=s"] {
+      --_grid-gap: var(--ui-space-3, 0.75rem);
+    }
+    [data-component~="ui-grid"][data-ui-grid-state~="gap=m"] {
+      --_grid-gap: var(--ui-space-4, 1rem);
+    }
+    [data-component~="ui-grid"][data-ui-grid-state~="gap=l"] {
+      --_grid-gap: var(--ui-space-5, 1.5rem);
+    }
+    [data-component~="ui-grid"][data-ui-grid-state~="gap=xl"] {
+      --_grid-gap: var(--ui-space-6, 2rem);
+    }
+    [data-component~="ui-grid"][data-ui-grid-state~="min=md"] {
+      --_grid-min: 16rem;
+    }
+    [data-component~="ui-grid"][data-ui-grid-state~="min=lg"] {
+      --_grid-min: 20rem;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-grid"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiIcon.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    name?: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    name: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiIcon.js

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

package/vue/UiIcon.vue

@@ -0,0 +1,135 @@
+<!-- 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-icon/ui-icon.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),
+  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<{
+  name?: string | null;
+}>(), {
+  name: "",
+});
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_shapes = 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 => {
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail })) ?? true;
+};
+
+function read(name: string): unknown {
+  if (name === "shapes") return state_shapes.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "shapes") { state_shapes.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-icon" aria-hidden="true" v-bind="$attrs" ref="root"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><template v-for="(shape, index) in hn.shape(state_shapes, undefined, [], undefined)" :key="index"><g><template v-if="hn.t(((shape)?.tag === 'path'))"><path :d="hn.attr((shape)?.d)"></path></template><template v-if="hn.t(((shape)?.tag === 'circle'))"><circle :cx="hn.attr((shape)?.cx)" :cy="hn.attr((shape)?.cy)" :r="hn.attr((shape)?.r)"></circle></template><template v-if="hn.t(((shape)?.tag === 'rect'))"><rect :x="hn.attr((shape)?.x)" :y="hn.attr((shape)?.y)" :width="hn.attr((shape)?.width)" :height="hn.attr((shape)?.height)" :rx="hn.attr((shape)?.rx)"></rect></template></g></template></svg></span>
+</template>
+
+<style scoped>
+[data-component~="ui-icon"] {
+      display: inline-flex;
+      flex: none;
+      inline-size: var(--ui-icon-size, 1em);
+      block-size: var(--ui-icon-size, 1em);
+    }
+
+    svg {
+      inline-size: 100%;
+      block-size: 100%;
+      stroke-width: var(--ui-icon-stroke-width, 2);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-icon"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiIconButton.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    anticipatory?: boolean | null;
+    disabled?: boolean | null;
+    label?: string | null;
+    round?: boolean | null;
+    size?: "sm" | "md" | "lg" | null;
+    variant?: "ghost" | "outline" | "solid" | 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<{}>, {
+    round: boolean | null;
+    variant: "ghost" | "outline" | "solid" | null;
+    disabled: boolean | null;
+    size: "sm" | "md" | "lg" | null;
+    anticipatory: 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/UiIconButton.js

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

package/vue/UiIconButton.vue

@@ -0,0 +1,268 @@
+<!-- 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-icon-button/ui-icon-button.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),
+  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
+};
+
+const props = withDefaults(defineProps<{
+  anticipatory?: boolean | null;
+  disabled?: boolean | null;
+  label?: string | null;
+  round?: boolean | null;
+  size?: "sm" | "md" | "lg" | null;
+  variant?: "ghost" | "outline" | "solid" | null;
+}>(), {
+  anticipatory: false,
+  disabled: false,
+  round: false,
+  size: "md",
+  variant: "ghost",
+});
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+
+/** 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;
+};
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["anticipatory","variant","size","round"] 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];
+}
+
+function write(name: string, value: unknown): boolean {
+  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>
+  <button data-component="ui-icon-button" type="button" v-bind="$attrs" :disabled="hn.attr(props.disabled)" :aria-label="hn.enumerated(props.label)" :data-ui-icon-button-state="hostState || undefined" ref="root"><slot></slot></button>
+</template>
+
+<style scoped>
+[data-component~="ui-icon-button"] {
+      display: inline-flex;
+      color: var(--ui-text-secondary);
+    }
+
+    [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] {
+      position: relative;
+    }
+
+    [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]::before {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      z-index: 1;
+      inline-size: var(--ui-affordance-guide-size, 0.25rem);
+      block-size: var(--ui-affordance-guide-size, 0.25rem);
+      border-radius: var(--ui-radius-round, 999px);
+      background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+      opacity: var(--ui-affordance-guide-opacity, 0.42);
+      transform: translate(-50%, -50%);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+      pointer-events: none;
+    }
+
+    /* At rest an anticipatory button shows only its guide dot; proximity, hover, or focus reveals the
+     * surface and icon. The root is the native button, so hiding it outright would hide the dot
+     * too, and slotted icons sit outside this scope; `color: transparent` hides currentColor icons. */
+    @media (hover: hover) and (pointer: fine) {
+      [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
+        border-color: transparent;
+        background: transparent;
+        box-shadow: none;
+        color: transparent;
+      }
+    }
+
+    [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+      opacity: 0;
+    }
+
+    [data-component~="ui-icon-button"] {
+      appearance: none;
+      inline-size: var(--ui-icon-button-size, 2rem);
+      block-size: var(--ui-icon-button-size, 2rem);
+      min-inline-size: var(--ui-icon-button-size, 2rem);
+      min-block-size: var(--ui-icon-button-size, 2rem);
+      padding: 0;
+      margin: 0;
+      border: 1px solid transparent;
+      border-radius: var(--ui-icon-button-radius, var(--ui-radius-2));
+      background: var(--ui-icon-button-bg, transparent);
+      color: inherit;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      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);
+    }
+
+    @media (hover: none), (pointer: coarse) {
+      [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]::before {
+        opacity: 0;
+      }
+    }
+
+    [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"] {
+      inline-size: var(--ui-icon-button-size-sm, 1.75rem);
+      block-size: var(--ui-icon-button-size-sm, 1.75rem);
+      min-inline-size: var(--ui-icon-button-size-sm, 1.75rem);
+      min-block-size: var(--ui-icon-button-size-sm, 1.75rem);
+    }
+
+    [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"] {
+      inline-size: var(--ui-icon-button-size-lg, 2.5rem);
+      block-size: var(--ui-icon-button-size-lg, 2.5rem);
+      min-inline-size: var(--ui-icon-button-size-lg, 2.5rem);
+      min-block-size: var(--ui-icon-button-size-lg, 2.5rem);
+    }
+
+    [data-component~="ui-icon-button"][data-ui-icon-button-state~="round"] {
+      border-radius: var(--ui-radius-round, 999px);
+    }
+
+    [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"] {
+      border-color: var(--ui-icon-button-border, var(--ui-border-default));
+      background: var(--ui-icon-button-outline-bg, var(--ui-surface-default));
+      color: var(--ui-icon-button-outline-color, var(--ui-text-primary));
+    }
+
+    [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"] {
+      background: var(--ui-icon-button-solid-bg, var(--ui-accent-solid));
+      color: var(--ui-icon-button-solid-color, var(--ui-text-on-accent));
+      box-shadow: var(
+        --ui-icon-button-solid-shadow,
+        0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
+      );
+    }
+
+    [data-component~="ui-icon-button"]:hover:enabled {
+      /* Derived from the text colour so the ghost hover shows on any background. */
+      background: var(--ui-icon-button-hover-bg, color-mix(in srgb, currentColor 8%, transparent));
+      color: var(--ui-icon-button-hover-color, var(--ui-text-primary));
+    }
+
+    [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:hover:enabled {
+      border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
+    }
+
+    [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:hover:enabled {
+      background: var(--ui-icon-button-solid-hover-bg, var(--ui-accent-hover));
+    }
+
+    [data-component~="ui-icon-button"]:active:enabled {
+      transform: scale(var(--ui-icon-button-active-scale, 0.96));
+    }
+
+    [data-component~="ui-icon-button"]:focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    [data-component~="ui-icon-button"]:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    [data-component~="ui-icon-button"] {
+      --_icon-button-icon-default: var(--ui-icon-size-md, 1.25rem);
+    }
+
+    [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"] {
+      --_icon-button-icon-default: var(--ui-icon-size-sm, 1rem);
+    }
+
+    [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"] {
+      --_icon-button-icon-default: var(--ui-icon-size-lg, 1.5rem);
+    }
+
+    :slotted(svg) {
+      inline-size: var(--ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      block-size: var(--ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      flex-shrink: 0;
+      stroke-width: var(--ui-icon-button-icon-stroke-width, 1.75);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-icon-button"][hidden] {
+      display: none;
+    }
+</style>