@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/vue/UiIconButton.d.ts

@@ -1,21 +1,21 @@
 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;
+    anticipatory?: boolean;
+    disabled?: boolean;
+    label?: string;
+    round?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'ghost' | 'outline' | 'solid';
 };
 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;
+    variant: "ghost" | "outline" | "solid";
+    disabled: boolean;
+    size: "sm" | "md" | "lg";
+    round: boolean;
+    anticipatory: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiIconButton.vue

@@ -1,281 +1,351 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 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> = {};
+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 props = withDefaults(
+  defineProps<{
+    anticipatory?: boolean
+    disabled?: boolean
+    label?: string
+    round?: boolean
+    size?: 'sm' | 'md' | 'lg'
+    variant?: 'ghost' | 'outline' | 'solid'
+  }>(),
+  {
+    anticipatory: false,
+    disabled: false,
+    round: false,
+    size: 'md',
+    variant: 'ghost',
+  },
+)
+
+const root = ref<HTMLElement | null>(null)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.anticipatory && 'anticipatory',
+    props.variant && `variant variant=${props.variant}`,
+    props.size && `size size=${props.size}`,
+    props.round && 'round',
+  ].filter(Boolean).join(' ')
+)
 
 /** 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 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];
+  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.`);
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
 }
 
-const stops: Array<() => void> = [];
+const stops: Array<() => void> = []
 const host = {
-  get element(): Element { return root.value as Element; },
+  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),
+    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>>,
+  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;
+      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);
+    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; },
-    };
+      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 };
+    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;
+      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;
+    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;
+let cleanup: void | (() => void)
+let ready: Promise<void> | undefined
 onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
-});
+  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();
-});
+  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>
+  <button
+    data-component="ui-icon-button"
+    type="button"
+    v-bind="$attrs"
+    :disabled="disabled"
+    :aria-label="label"
+    :data-ui-icon-button-state="hostState || undefined"
+    ref="root"
+  >
+    <slot />
+  </button>
 </template>
 
 <style scoped>
 [data-component~="ui-icon-button"] {
-      display: inline-flex;
-      color: var(--ui-text-secondary);
-    }
+  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"] {
+  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;
-    }
+[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);
+  block-size: var(--ui-affordance-guide-size);
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+  opacity: var(--ui-affordance-guide-opacity);
+  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;
-      }
-    }
+/* 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"][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);
-    }
+[data-component~="ui-icon-button"] {
+  /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
+  --_size: 2rem;
+  appearance: none;
+  inline-size: var(--ui-icon-button-size, var(--_size));
+  block-size: var(--ui-icon-button-size, var(--_size));
+  min-inline-size: var(--ui-icon-button-size, var(--_size));
+  min-block-size: var(--ui-icon-button-size, var(--_size));
+  padding: 0;
+  margin: 0;
+  border: 1px solid transparent;
+  border-radius: var(--ui-icon-button-radius, var(--ui-radius-md));
+  background: var(--ui-icon-button-surface, 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;
-      }
-    }
+@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);
-    }
+/* A touch target without a bigger button: an invisible hit area, at least the control
+   minimum, centred on the button (::before is the anticipatory guide). */
+@media (pointer: coarse) {
+  [data-component~="ui-icon-button"] {
+    position: relative;
+  }
+
+  [data-component~="ui-icon-button"]::after {
+    content: "";
+    position: absolute;
+    inset: 50% auto auto 50%;
+    inline-size: max(100%, var(--ui-control-min-block-size));
+    block-size: max(100%, var(--ui-control-min-block-size));
+    transform: translate(-50%, -50%);
+  }
+}
 
-    [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);
-    }
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"] {
+  position: relative;
+}
 
-    [data-component~="ui-icon-button"][data-ui-icon-button-state~="round"] {
-      border-radius: var(--ui-radius-round, 999px);
-    }
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
+  content: "";
+  position: absolute;
+  inset: 50% auto auto 50%;
+  inline-size: max(100%, var(--ui-control-min-block-size));
+  block-size: max(100%, var(--ui-control-min-block-size));
+  transform: translate(-50%, -50%);
+}
 
-    [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~="size=sm"] {
+  --_size: 1.75rem;
+  inline-size: var(--ui-icon-button-size, var(--_size));
+  block-size: var(--ui-icon-button-size, var(--_size));
+  min-inline-size: var(--ui-icon-button-size, var(--_size));
+  min-block-size: var(--ui-icon-button-size, var(--_size));
+}
 
-    [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"][data-ui-icon-button-state~="size=lg"] {
+  --_size: 2.5rem;
+  inline-size: var(--ui-icon-button-size, var(--_size));
+  block-size: var(--ui-icon-button-size, var(--_size));
+  min-inline-size: var(--ui-icon-button-size, var(--_size));
+  min-block-size: var(--ui-icon-button-size, var(--_size));
+}
 
-    [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~="round"] {
+  border-radius: var(--ui-radius-round);
+}
 
-    [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=outline"] {
+  border-color: var(--ui-icon-button-border, var(--ui-border-default));
+  background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+  color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
+}
 
-    [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"][data-ui-icon-button-state~="variant=solid"] {
+  background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+  color: var(--ui-icon-button-solid-text, 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"]:active:enabled {
-      transform: scale(var(--ui-icon-button-active-scale, 0.96));
-    }
+[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-surface, color-mix(in srgb, currentColor 8%, transparent));
+  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+}
 
-    [data-component~="ui-icon-button"]:focus-visible {
-      outline: none;
-      box-shadow: var(--ui-focus-halo);
-    }
+[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));
+}
 
-    /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
-    [data-component~="ui-icon-button"]:disabled {
-      opacity: var(--ui-icon-button-disabled-opacity, 0.6);
-      color: var(--ui-icon-button-disabled-color, inherit);
-      cursor: not-allowed;
-    }
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:hover:enabled {
+  background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
+}
 
-    [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:disabled {
-      border-color: var(--ui-icon-button-disabled-border, var(--ui-icon-button-border, var(--ui-border-default)));
-      background-color: var(--ui-icon-button-disabled-bg, var(--ui-icon-button-outline-bg, var(--ui-surface-default)));
-      color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-outline-color, var(--ui-text-primary)));
-    }
+[data-component~="ui-icon-button"]:active:enabled {
+  transform: scale(var(--ui-icon-button-active-scale, 0.96));
+}
 
-    [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:disabled {
-      background-color: var(--ui-icon-button-disabled-bg, var(--ui-icon-button-solid-bg, var(--ui-accent-solid)));
-      color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-solid-color, var(--ui-text-on-accent)));
-    }
+[data-component~="ui-icon-button"]:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-halo);
+}
 
-    [data-component~="ui-icon-button"] {
-      --_icon-button-icon-default: var(--ui-icon-size-md, 1.25rem);
-    }
+/* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
+[data-component~="ui-icon-button"]:disabled {
+  opacity: var(--ui-icon-button-disabled-opacity, 0.6);
+  color: var(--ui-icon-button-disabled-text, inherit);
+  cursor: not-allowed;
+}
 
-    [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~="variant=outline"]:disabled {
+  border-color: var(
+    --ui-icon-button-disabled-border,
+    var(--ui-icon-button-border, var(--ui-border-default))
+  );
+  background-color: var(
+    --ui-icon-button-disabled-surface,
+    var(--ui-icon-button-outline-surface, var(--ui-surface-default))
+  );
+  color: var(
+    --ui-icon-button-disabled-text,
+    var(--ui-icon-button-outline-text, var(--ui-text-primary))
+  );
+}
 
-    [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"] {
-      --_icon-button-icon-default: var(--ui-icon-size-lg, 1.5rem);
-    }
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:disabled {
+  background-color: var(
+    --ui-icon-button-disabled-surface,
+    var(--ui-icon-button-solid-surface, var(--ui-accent-solid))
+  );
+  color: var(
+    --ui-icon-button-disabled-text,
+    var(--ui-icon-button-solid-text, var(--ui-text-on-accent))
+  );
+}
 
-    :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);
-    }
+[data-component~="ui-icon-button"] {
+  --_icon-button-icon-default: var(--ui-icon-size-md);
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-icon-button"][hidden] {
-      display: none;
-    }
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"] {
+  --_icon-button-icon-default: var(--ui-icon-size-sm);
+}
+
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"] {
+  --_icon-button-icon-default: var(--ui-icon-size-lg);
+}
+
+: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>

package/vue/UiInput.d.ts

@@ -1,9 +1,9 @@
 type __VLS_Props = {
-    disabled?: boolean | null;
-    invalid?: boolean | null;
-    readonly?: boolean | null;
-    required?: boolean | null;
-    value?: string | null;
+    disabled?: boolean;
+    invalid?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    value?: string;
     modelValue?: string | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -11,10 +11,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    invalid: boolean | null;
-    disabled: boolean | null;
-    required: boolean | null;
-    readonly: boolean | null;
+    invalid: boolean;
+    disabled: boolean;
+    required: boolean;
+    readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;