@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/vue/UiAvatarGroup.vue

@@ -1,167 +1,183 @@
-<!-- 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-avatar-group/ui-avatar-group.js";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watchEffect,
+} from 'vue'
+import * as controllerModule from '../components/ui-avatar-group/ui-avatar-group.js'
 
-defineOptions({ inheritAttrs: false });
+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
+    max?: number
+  }>(),
+  {
+    label: 'People',
+    max: 5,
   },
-};
+)
 
-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);
+const root = ref<HTMLElement | null>(null)
+const overflowElement = useTemplateRef<HTMLElement>('overflow')
+const overflowCount = ref(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 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];
+  if (name === 'overflowCount') return 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.`);
+  if (name === 'overflowCount') {
+    overflowCount.value = value as never
+    return true
+  }
+  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: {
+    get overflow(): Element {
+      return overflowElement.value as Element
+    },
+  } 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>
-  <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>
+  <div data-component="ui-avatar-group" role="group" v-bind="$attrs" :aria-label="label" ref="root">
+    <slot />
+    <span
+      class="overflow"
+      role="img"
+      :hidden="!overflowCount"
+      :aria-label="`${overflowCount} more`"
+      ref="overflow"
+    >{{ `+${overflowCount}` }}</span>
+  </div>
 </template>
 
 <style scoped>
 [data-component~="ui-avatar-group"] {
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      gap: 0;
-    }
+  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;
-    }
+/* 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;
-    }
+: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 {
+  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;
-    }
+.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;
-    }
+/* 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

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

@@ -1,123 +1,122 @@
-<!-- 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 } 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];
-}
-
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
+    variant?: 'solid' | 'subtle'
+  }>(),
+  {
+    tone: 'neutral',
+    variant: 'subtle',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.tone && `tone tone=${props.tone}`,
+    props.variant && `variant variant=${props.variant}`,
+  ].filter(Boolean).join(' ')
+)
 </script>
 
 <template>
-  <span data-component="ui-badge" v-bind="$attrs" :data-ui-badge-state="hostState || undefined"><slot></slot></span>
+  <span
+    data-component="ui-badge"
+    v-bind="$attrs"
+    :data-ui-badge-state="hostState || undefined"
+  ><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;
-    }
+  --_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

@@ -1,16 +1,20 @@
 type __VLS_Props = {
-    disabled?: boolean | null;
-    size?: "sm" | "md" | "lg" | null;
-    variant?: "outline" | "solid" | "danger" | "ghost" | "link" | null;
+    align?: 'center' | 'start';
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    stretch?: boolean;
+    variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link';
 };
 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;
+    variant: "outline" | "solid" | "danger" | "ghost" | "link";
+    align: "center" | "start";
+    disabled: boolean;
+    size: "sm" | "md" | "lg";
+    stretch: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;