@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiButton.vue

@@ -1,8 +1,17 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, preserveRootFocus, useComponentHost } from './host'
+import {
+  attribute,
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  nativeAttrs,
+  preserveRootFocus,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 import UiSpinner from './UiSpinner.vue'
@@ -275,38 +284,7 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 
 const rootArmElement = useTemplateRef<HTMLElement>('@html-next/root')
@@ -590,25 +568,14 @@ const guardedBinding7 = computed(() => {
         concat(checkedProps.value.loading || checkedProps.value.pending),
       ))
 })
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element)
-    || hydrationNode.localName
-      !== ((checkedProps.value.variant === 'card' && checkedProps.value.as === 'a')
-        ? 'a'
-        : ((checkedProps.value.variant === 'card')
-          ? 'button'
-          : ((checkedProps.value.as === 'a') ? 'a' : ('button')))))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-button> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-button> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot(
+  (checkedProps.value.variant === 'card' && checkedProps.value.as === 'a')
+    ? 'a'
+    : ((checkedProps.value.variant === 'card')
+      ? 'button'
+      : ((checkedProps.value.as === 'a') ? 'a' : ('button'))),
+  'ui-button',
+)
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -666,43 +633,12 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-function attribute(value: unknown): any {
-  if (
-    value === null || value === undefined || value === false
-    || (typeof value === 'object' && !Array.isArray(value))
-  ) return undefined
-  return value === true ? '' : text(value)
-}
-
-// A nonempty scalar call cannot produce the invalid-result sentinel.
-type ConcatResult<T extends unknown[]> = T extends
-  [
-    string | number | boolean | null | undefined,
-    ...(string | number | boolean | null | undefined)[],
-  ] ? string | undefined
-  : string | symbol | undefined
-function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
-  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
-  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
-}
 </script>
 
 <template>
   <a
     v-if="checkedProps.variant === 'card' && checkedProps.as === 'a'"
-    data-component="ui-button"
+    class="ui-button"
     v-bind="nativeAttrs($attrs)"
     :href="guarded"
     :target="checkedProps.target ?? undefined"
@@ -729,6 +665,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     ref="@html-next/root"
   ><span class="card-icon"><UiSpinner
         v-if="checkedProps.loading || checkedProps.pending"
+        class="ui-spinner"
         size="sm"
       />
       <template v-if="!(checkedProps.loading || checkedProps.pending)"><slot
@@ -736,12 +673,13 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
         /></template></span>
     <span class="card-content"><slot /></span>
     <span class="card-action"><slot name="action"><UiIcon
+          class="ui-icon"
           name="chevron-right"
           aria-hidden="true"
         /></slot></span></a>
   <button
     v-else-if="checkedProps.variant === 'card'"
-    data-component="ui-button"
+    class="ui-button"
     v-bind="nativeAttrs($attrs)"
     :type="checkedProps.type ?? undefined"
     :disabled="checkedProps.disabled ?? undefined"
@@ -767,6 +705,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   >
     <span class="card-icon"><UiSpinner
         v-if="checkedProps.loading || checkedProps.pending"
+        class="ui-spinner"
         size="sm"
       />
       <template v-if="!(checkedProps.loading || checkedProps.pending)"><slot
@@ -774,13 +713,14 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
         /></template></span>
     <span class="card-content"><slot /></span>
     <span class="card-action"><slot name="action"><UiIcon
+          class="ui-icon"
           name="chevron-right"
           aria-hidden="true"
         /></slot></span>
   </button>
   <a
     v-else-if="checkedProps.as === 'a'"
-    data-component="ui-button"
+    class="ui-button"
     v-bind="nativeAttrs($attrs)"
     :href="guardedBinding4"
     :target="checkedProps.target ?? undefined"
@@ -806,13 +746,14 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-ui-button-state="hostState || undefined"
     ref="@html-next/root"
   ><span v-if="checkedProps.loading || checkedProps.pending" class="spinner-wrap"><UiSpinner
+        class="ui-spinner"
         size="sm"
       /></span>
     <slot />
     <span class="badge"><slot name="badge" /></span></a>
   <button
     v-else
-    data-component="ui-button"
+    class="ui-button"
     v-bind="nativeAttrs($attrs)"
     :type="checkedProps.type ?? undefined"
     :disabled="checkedProps.disabled ?? undefined"
@@ -837,6 +778,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     ref="@html-next/root"
   >
     <span v-if="checkedProps.loading || checkedProps.pending" class="spinner-wrap"><UiSpinner
+        class="ui-spinner"
         size="sm"
       /></span>
     <slot />
@@ -919,440 +861,447 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   inherits: false;
 }
 
-[data-component~="ui-button"] {
-  /* Optional inherited action-group values keep text and icon actions under the same light.
-     One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
-     A single ambient lift avoids stacking a face gradient or another inset bevel. */
-  --_ui-action-start: 1px;
-  --_ui-action-edge: var(
-    --ui-action-edge,
-    inset var(--_ui-action-start) 1px 0 light-dark(
-      rgb(255 255 255 / 0.08),
-      rgb(255 255 255 / 0.06)
-    ),
-    inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
-  );
-  --_ui-action-shadow:
-    var(--_ui-action-edge),
-    0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
-  --_hue: var(--ui-accent);
-  --_hue-hover: var(--ui-accent-hover);
-  --_hue-active: var(--ui-accent-active);
-  --_hue-text: var(--ui-accent-active);
-  --_on-hue: var(--ui-on-accent);
+/* An anchor keeps the boxed button look even when an app styles ordinary links. */
 
-  --_tone: var(--_hue);
-  --_tone-hover: var(--_hue-hover);
-  --_tone-active: var(--_hue-active);
-  --_tone-text: var(--_hue-text);
-  --_on-tone: var(--_on-hue);
+/* A count is an adornment, not another line of label text. Keep the standard control height
+   with enough inset for a 24px mark; large content can still grow the button naturally. */
 
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  column-gap: var(--ui-space-2);
-  vertical-align: middle;
-  color: var(--_tone-text);
-}
+/* Card actions inherit Button's palette and behavior; only their shared layout changes.
+   The icon may contain any decorative composition. Empty icons remove their column. */
 
-[data-component~="ui-button"]:dir(rtl) {
-  --_ui-action-start: -1px;
-}
+/* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
+   is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
 
-[data-component~="ui-button"][data-ui-button-state~="align=start"] {
-  justify-content: flex-start;
-  text-align: start;
-}
+/* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
 
-[data-component~="ui-button"][data-ui-button-state~="stretch"] {
-  display: flex;
-  inline-size: 100%;
-}
+/* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
 
-[data-component~="ui-button"] {
-  appearance: none;
-  min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
-  border-style: solid;
-  border-width: var(--ui-border-width);
-  border-color: var(--ui-button-border, var(--_tone));
-  border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-  background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
-  color: var(--ui-button-text, var(--_tone-text));
-  font: inherit;
-  font-weight: var(--ui-font-medium);
-  text-decoration: none;
-  /* Unset, a button wraps as its container does. */
-  white-space: var(--ui-button-white-space, inherit);
-  line-height: var(--ui-line-height-tight);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  background-image: none;
-  box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
-  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-base) var(--ui-motion-ease);
-  margin: 0;
-}
+/* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
+   destructive secondary action, not a special case. */
 
-/* An anchor keeps the boxed button look even when an app styles ordinary links. */
-[data-component~="ui-button"]:is(a) {
-  text-decoration: none;
-}
+/* A value picker is a field, with Select's quiet edge and resting lift. */
 
-.spinner-wrap {
-  display: inline-flex;
-  flex: none;
-  vertical-align: middle;
-}
+/* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 
-/* A count is an adornment, not another line of label text. Keep the standard control height
-   with enough inset for a 24px mark; large content can still grow the button naturally. */
-[data-component~="ui-button"]:not([variant="link"]):has(.badge:not(:empty)) {
-  padding-block: var(--ui-space-0-5);
-}
+/* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
+   edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
 
-.badge {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-}
+/* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
-.badge:empty {
-  display: none;
-}
+/* A loading action stays visually active; only an explicitly disabled action takes the
+   neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
 
-@supports (text-box-trim: trim-both) {
-  [data-component~="ui-button"] {
-    text-box-trim: trim-both;
-    text-box-edge: cap alphabetic;
-  }
-}
+/* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
 
-[data-component~="ui-button"][data-ui-button-state~="size=xs"] {
-  min-block-size: 1.5rem;
-  padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
-  font-size: var(--ui-font-size-xs);
-}
+/* The size states outrank :host, so sm is named too, or a small button would stay small. */
 
-[data-component~="ui-button"][data-ui-button-state~="shape=pill"] {
-  border-radius: var(--ui-button-radius, var(--ui-radius-round));
-}
+/* Under touch, a link-style button's press lands within the control minimum: an invisible hit
+   area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
+   a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
+   area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
+   Only these need it: a hit area on every button would reach over its neighbours. */
 
-[data-component~="ui-button"][data-ui-button-state~="size=sm"] {
-  min-block-size: var(--ui-control-size-sm);
-  padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: var(--ui-font-size-sm);
-}
+/* 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~="size=lg"] {
-  min-block-size: var(--ui-control-size-lg);
-  padding: var(--ui-space-3) var(--ui-space-4);
-  font-size: var(--ui-font-size-md);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-/* Card actions inherit Button's palette and behavior; only their shared layout changes.
-   The icon may contain any decorative composition. Empty icons remove their column. */
-[data-component~="ui-button"][data-ui-button-state~="variant=card"] {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-content: center;
-  align-items: start;
-  gap: var(--ui-space-3);
-  inline-size: 100%;
-  min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-md));
-  text-align: start;
-  white-space: normal;
-  box-shadow: none;
-  background-image: none;
-}
-[data-component~="ui-button"][data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"] {
-  min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
-}
-[data-component~="ui-button"][data-ui-button-state~="variant=card"]:has(.card-icon:empty) {
-  grid-template-columns: minmax(0, 1fr) auto;
-}
-.card-icon {
-  display: flex;
-  align-items: flex-start;
-}
-.card-icon:empty {
-  display: none;
-}
-.card-content {
-  min-inline-size: 0;
-}
-.card-action {
-  display: flex;
-  align-items: center;
-  align-self: center;
-}
+@scope (.ui-button) to (.ui-spinner, .ui-icon) {
+  :scope:where(:scope) {
+    /* Optional inherited action-group values keep text and icon actions under the same light.
+       One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+       A single ambient lift avoids stacking a face gradient or another inset bevel. */
+    --_ui-action-start: 1px;
+    --_ui-action-edge: var(
+      --ui-action-edge,
+      inset var(--_ui-action-start) 1px 0 light-dark(
+        rgb(255 255 255 / 0.08),
+        rgb(255 255 255 / 0.06)
+      ),
+      inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(
+        rgb(0 0 0 / 0.08),
+        rgb(0 0 0 / 0.08)
+      )
+    );
+    --_ui-action-shadow:
+      var(--_ui-action-edge),
+      0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+    --_hue: var(--ui-accent);
+    --_hue-hover: var(--ui-accent-hover);
+    --_hue-active: var(--ui-accent-active);
+    --_hue-text: var(--ui-accent-active);
+    --_on-hue: var(--ui-on-accent);
 
-/* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
-   is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
-[data-component~="ui-button"]:hover:not(:disabled, [aria-disabled="true"]) {
-  border-color: var(--ui-button-hover-border, var(--_tone-hover));
-  background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
-}
+    --_tone: var(--_hue);
+    --_tone-hover: var(--_hue-hover);
+    --_tone-active: var(--_hue-active);
+    --_tone-text: var(--_hue-text);
+    --_on-tone: var(--_on-hue);
 
-/* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-[data-component~="ui-button"][data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"] {
-  border-color: var(--ui-button-border, var(--ui-border));
-}
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: var(--ui-space-2);
+    vertical-align: middle;
+    color: var(--_tone-text);
+  }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
-  border-color: var(--ui-button-hover-border, var(--ui-border-strong));
-}
+  :scope:where(:scope):is(:dir(rtl)) {
+    --_ui-action-start: -1px;
+  }
 
-/* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
-[data-component~="ui-button"]:active:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
-  background-image: none;
-  box-shadow: var(--ui-pressed);
-}
+  :scope:where(:scope):is([data-ui-button-state~="align=start"]) {
+    justify-content: flex-start;
+    text-align: start;
+  }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
-  border-color: var(--_tone);
-  background-color: var(--_tone);
-  color: var(--_on-tone);
-  box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
-}
+  :scope:where(:scope):is([data-ui-button-state~="stretch"]) {
+    display: flex;
+    inline-size: 100%;
+  }
 
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--_tone-hover);
-  border-color: var(--_tone-hover);
-}
+  :scope:where(:scope) {
+    appearance: none;
+    min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
+    border-style: solid;
+    border-width: var(--ui-border-width);
+    border-color: var(--ui-button-border, var(--_tone));
+    border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
+    background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
+    color: var(--ui-button-text, var(--_tone-text));
+    font: inherit;
+    font-weight: var(--ui-font-medium);
+    text-decoration: none;
+    /* Unset, a button wraps as its container does. */
+    white-space: var(--ui-button-white-space, inherit);
+    line-height: var(--ui-line-height-tight);
+    padding: var(--ui-space-2) var(--ui-space-3);
+    background-image: none;
+    box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+    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-base) var(--ui-motion-ease);
+    margin: 0;
+  }
+  :scope:where(:scope):is(:is(a)) {
+    text-decoration: none;
+  }
 
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--_tone-active);
-  border-color: var(--_tone-active);
-  background-image: none;
-  box-shadow: var(--ui-pressed);
-}
+  .spinner-wrap {
+    display: inline-flex;
+    flex: none;
+    vertical-align: middle;
+  }
+  :scope:where(:scope):is(:not([variant="link"]):has(.badge:not(:empty))) {
+    padding-block: var(--ui-space-0-5);
+  }
 
-/* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
-   destructive secondary action, not a special case. */
-[data-component~="ui-button"][data-ui-button-state~="tone=neutral"] {
-  --_hue: var(--ui-text);
-  --_hue-hover: var(--ui-text);
-  --_hue-active: var(--ui-text);
-  --_hue-text: var(--ui-text);
-  --_on-hue: var(--ui-surface);
-}
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+  }
 
-[data-component~="ui-button"][data-ui-button-state~="tone=danger"],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
-  --_hue: var(--ui-danger);
-  --_hue-hover: var(--ui-danger-hover);
-  --_hue-active: var(--ui-danger-hover);
-  --_hue-text: var(--ui-danger-hover);
-  --_on-hue: var(--ui-on-danger);
-}
+  .badge:empty {
+    display: none;
+  }
 
-[data-component~="ui-button"][data-ui-button-state~="tone=success"] {
-  --_hue: var(--ui-success);
-  --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
-  --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
-  --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
-  --_on-hue: var(--ui-surface);
-}
+  @supports (text-box-trim: trim-both) {
+    :scope:where(:scope) {
+      text-box-trim: trim-both;
+      text-box-edge: cap alphabetic;
+    }
+  }
 
-[data-component~="ui-button"][data-ui-button-state~="tone=warning"] {
-  --_hue: var(--ui-warning);
-  --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
-  --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
-  --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
-  --_on-hue: var(--ui-surface);
-}
+  :scope:where(:scope):is([data-ui-button-state~="size=xs"]) {
+    min-block-size: 1.5rem;
+    padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
+    font-size: var(--ui-font-size-xs);
+  }
 
-[data-component~="ui-button"][data-ui-button-state~="tone=info"] {
-  --_hue: var(--ui-info);
-  --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
-  --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
-  --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
-  --_on-hue: var(--ui-surface);
-}
+  :scope:where(:scope):is([data-ui-button-state~="shape=pill"]) {
+    border-radius: var(--ui-button-radius, var(--ui-radius-round));
+  }
 
-/* A value picker is a field, with Select's quiet edge and resting lift. */
-[data-component~="ui-button"][data-ui-button-state~="variant=field"] {
-  --_ui-field-shadow: var(--ui-shadow-sm);
-  border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
-  border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
-  background-color: var(--ui-button-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
-  color: var(--ui-button-text, var(--ui-text-primary));
-  font-weight: var(--ui-font-normal);
-  box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
-}
+  :scope:where(:scope):is([data-ui-button-state~="size=sm"]) {
+    min-block-size: var(--ui-control-size-sm);
+    padding: var(--ui-space-1) var(--ui-space-2);
+    font-size: var(--ui-font-size-sm);
+  }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]) {
-  border-color: var(
-    --ui-button-hover-border,
-    var(--ui-control-border-hover, var(--ui-text-secondary))
-  );
-  background-color: var(
-    --ui-button-hover-surface,
-    var(--ui-control-surface, var(--ui-surface-elevated))
-  );
-}
+  :scope:where(:scope):is([data-ui-button-state~="size=lg"]) {
+    min-block-size: var(--ui-control-size-lg);
+    padding: var(--ui-space-3) var(--ui-space-4);
+    font-size: var(--ui-font-size-md);
+  }
+  :scope:where(:scope):is([data-ui-button-state~="variant=card"]) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-content: center;
+    align-items: start;
+    gap: var(--ui-space-3);
+    inline-size: 100%;
+    min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-md));
+    text-align: start;
+    white-space: normal;
+    box-shadow: none;
+    background-image: none;
+  }
+  :scope:where(:scope):is([data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"]) {
+    min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
+  }
+  :scope:where(:scope):is([data-ui-button-state~="variant=card"]:has(.card-icon:empty)) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  .card-icon {
+    display: flex;
+    align-items: flex-start;
+  }
+  .card-icon:empty {
+    display: none;
+  }
+  .card-content {
+    min-inline-size: 0;
+  }
+  .card-action {
+    display: flex;
+    align-items: center;
+    align-self: center;
+  }
+  :scope:where(:scope):is(:hover:not(:disabled, [aria-disabled="true"])) {
+    border-color: var(--ui-button-hover-border, var(--_tone-hover));
+    background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
+  }
+  :scope:where(:scope):is([data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]) {
+    border-color: var(--ui-button-border, var(--ui-border));
+  }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
-  --_ui-field-shadow: var(--ui-pressed);
-}
+  :scope:where(:scope):is([data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"])) {
+    border-color: var(--ui-button-hover-border, var(--ui-border-strong));
+  }
+  :scope:where(:scope):is(:active:not(:disabled, [aria-disabled="true"])) {
+    background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
+    background-image: none;
+    box-shadow: var(--ui-pressed);
+  }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=field"]:focus-visible {
-  border-color: var(--ui-control-focus, var(--ui-accent-solid));
-  box-shadow:
-    var(--ui-button-shadow, var(--_ui-field-shadow)),
-    var(--ui-control-focus-halo-shadow);
-}
+  :scope:where(:scope):is([data-ui-button-state~="variant=solid"]),
+  :scope:where(:scope):is([data-ui-button-state~="variant=danger"]) {
+    border-color: var(--_tone);
+    background-color: var(--_tone);
+    color: var(--_on-tone);
+    box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+  }
 
-[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(--_tone-text));
-}
+  :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--_tone-hover);
+    border-color: var(--_tone-hover);
+  }
 
-/* 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:not(:disabled, [aria-disabled="true"]) {
-  background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
-  border-color: transparent;
-}
+  :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--_tone-active);
+    border-color: var(--_tone-active);
+    background-image: none;
+    box-shadow: var(--ui-pressed);
+  }
+  :scope:where(:scope):is([data-ui-button-state~="tone=neutral"]) {
+    --_hue: var(--ui-text);
+    --_hue-hover: var(--ui-text);
+    --_hue-active: var(--ui-text);
+    --_hue-text: var(--ui-text);
+    --_on-hue: var(--ui-surface);
+  }
 
-/* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
-   edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
-  background-color: var(
-    --ui-button-ghost-active-surface,
-    color-mix(in oklch, var(--ui-surface), var(--_tone) 3%)
-  );
-  border-color: transparent;
-  box-shadow:
-    inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%),
-    inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
-}
+  :scope:where(:scope):is([data-ui-button-state~="tone=danger"]),
+  :scope:where(:scope):is([data-ui-button-state~="variant=danger"]) {
+    --_hue: var(--ui-danger);
+    --_hue-hover: var(--ui-danger-hover);
+    --_hue-active: var(--ui-danger-hover);
+    --_hue-text: var(--ui-danger-hover);
+    --_on-hue: var(--ui-on-danger);
+  }
 
-/* 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-action-shadow, var(--_ui-action-shadow))),
-    var(--ui-focus-halo);
-}
+  :scope:where(:scope):is([data-ui-button-state~="tone=success"]) {
+    --_hue: var(--ui-success);
+    --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
+    --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
+    --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
+    --_on-hue: var(--ui-surface);
+  }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"]:focus-visible {
-  box-shadow:
-    var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
-    var(--ui-focus-halo);
-}
+  :scope:where(:scope):is([data-ui-button-state~="tone=warning"]) {
+    --_hue: var(--ui-warning);
+    --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
+    --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
+    --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
+    --_on-hue: var(--ui-surface);
+  }
 
-:is([data-component~="ui-button"][data-ui-button-state~="variant=ghost"], [data-component~="ui-button"][data-ui-button-state~="variant=link"], [data-component~="ui-button"][data-ui-button-state~="variant=card"]):focus-visible {
-  box-shadow: var(--ui-focus-halo);
-}
+  :scope:where(:scope):is([data-ui-button-state~="tone=info"]) {
+    --_hue: var(--ui-info);
+    --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
+    --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
+    --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
+    --_on-hue: var(--ui-surface);
+  }
+  :scope:where(:scope):is([data-ui-button-state~="variant=field"]) {
+    --_ui-field-shadow: var(--ui-shadow-sm);
+    border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
+    border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background-color: var(
+      --ui-button-surface,
+      var(--ui-control-surface, var(--ui-surface-elevated))
+    );
+    color: var(--ui-button-text, var(--ui-text-primary));
+    font-weight: var(--ui-font-normal);
+    box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
+  }
 
-/* A loading action stays visually active; only an explicitly disabled action takes the
-   neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
-[data-component~="ui-button"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
-  border-color: var(--ui-disabled-border);
-  background-color: var(--ui-disabled-surface);
-  color: var(--ui-disabled-text);
-  filter: var(--ui-button-disabled-filter, var(--ui-disabled-filter));
-  opacity: var(--ui-button-disabled-opacity, 1);
-  cursor: not-allowed;
-  background-image: none;
-  box-shadow: none;
-}
+  :scope:where(:scope):is([data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"])) {
+    border-color: var(
+      --ui-button-hover-border,
+      var(--ui-control-border-hover, var(--ui-text-secondary))
+    );
+    background-color: var(
+      --ui-button-hover-surface,
+      var(--ui-control-surface, var(--ui-surface-elevated))
+    );
+  }
 
-:is([data-component~="ui-button"][data-ui-button-state~="loading"], [data-component~="ui-button"][data-ui-button-state~="pending"]):focus-visible {
-  box-shadow: var(--ui-focus-halo);
-}
+  :scope:where(:scope):is([data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"])) {
+    --_ui-field-shadow: var(--ui-pressed);
+  }
 
-/* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
-  background-color: var(--ui-disabled-surface);
-  border-color: transparent;
-}
+  :scope:where(:scope):is([data-ui-button-state~="variant=field"]:focus-visible) {
+    border-color: var(--ui-control-focus, var(--ui-accent-solid));
+    box-shadow:
+      var(--ui-button-shadow, var(--_ui-field-shadow)),
+      var(--ui-control-focus-halo-shadow);
+  }
 
-/* The size states outrank :host, so sm is named too, or a small button would stay small. */
-@media (pointer: coarse) {
-  [data-component~="ui-button"], [data-component~="ui-button"][data-ui-button-state~="size=sm"] {
-    min-block-size: var(--ui-control-min-block-size);
+  :scope:where(:scope):is([data-ui-button-state~="variant=ghost"]) {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    color: var(--ui-button-ghost-text, var(--_tone-text));
+  }
+  :scope:where(:scope):is([data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"])) {
+    background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
+    border-color: transparent;
+  }
+  :scope:where(:scope):is([data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"])) {
+    background-color: var(
+      --ui-button-ghost-active-surface,
+      color-mix(in oklch, var(--ui-surface), var(--_tone) 3%)
+    );
+    border-color: transparent;
+    box-shadow:
+      inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%),
+      inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
+  }
+  :scope:where(:scope):is(:focus-visible) {
+    outline: none;
+    box-shadow:
+      var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+      var(--ui-focus-halo);
   }
-}
 
-/* Under touch, a link-style button's press lands within the control minimum: an invisible hit
-   area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
-   a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
-   area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
-   Only these need it: a hit area on every button would reach over its neighbours. */
-html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"],
-html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="size=xs"] {
-  position: relative;
-}
+  :scope:where(:scope):is([data-ui-button-state~="variant=solid"]:focus-visible) {
+    box-shadow:
+      var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+      var(--ui-focus-halo);
+  }
 
-html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"]::after,
-html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="size=xs"]::after {
-  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%);
-  content: "";
-}
+  :is(:scope[data-ui-button-state~="variant=ghost"], :scope[data-ui-button-state~="variant=link"], :scope[data-ui-button-state~="variant=card"]):focus-visible {
+    box-shadow: var(--ui-focus-halo);
+  }
+  :scope:where(:scope):is(:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"]))) {
+    border-color: var(--ui-disabled-border);
+    background-color: var(--ui-disabled-surface);
+    color: var(--ui-disabled-text);
+    filter: var(--ui-button-disabled-filter, var(--ui-disabled-filter));
+    opacity: var(--ui-button-disabled-opacity, 1);
+    cursor: not-allowed;
+    background-image: none;
+    box-shadow: none;
+  }
 
-/* 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);
-  background: none;
-  box-shadow: none;
-  font: inherit;
-  color: var(--ui-button-link-text, 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);
-}
+  :is(:scope[data-ui-button-state~="loading"], :scope[data-ui-button-state~="pending"]):focus-visible {
+    box-shadow: var(--ui-focus-halo);
+  }
+  :scope:where(:scope):is([data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"]))) {
+    background-color: var(--ui-disabled-surface);
+    border-color: transparent;
+  }
+  @media (pointer: coarse) {
+    :scope:where(:scope), :scope:where(:scope):is([data-ui-button-state~="size=sm"]) {
+      min-block-size: var(--ui-control-min-block-size);
+    }
+  }
+  :scope:where(:scope):is(html[data-ui-input-modality="touch"]
+    [data-ui-button-state~="variant=link"]),
+  :scope:where(:scope):is(html[data-ui-input-modality="touch"] [data-ui-button-state~="size=xs"]) {
+    position: relative;
+  }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]) {
-  color: var(--ui-button-link-hover-text, var(--ui-text-primary));
-  text-decoration-color: currentColor;
-  background: none;
-  transform: none;
-}
+  :scope:where(:scope):is(html[data-ui-input-modality="touch"]
+    [data-ui-button-state~="variant=link"])::after,
+  :scope:where(:scope):is(html[data-ui-input-modality="touch"]
+    [data-ui-button-state~="size=xs"])::after {
+    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%);
+    content: "";
+  }
+  :scope:where(:scope):is([data-ui-button-state~="variant=link"]) {
+    display: inline;
+    min-block-size: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+    background: none;
+    box-shadow: none;
+    font: inherit;
+    color: var(--ui-button-link-text, 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"]:active:not(:disabled, [aria-disabled="true"]) {
-  background: none;
-  transform: none;
-}
+  :scope:where(:scope):is([data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"])) {
+    color: var(--ui-button-link-hover-text, var(--ui-text-primary));
+    text-decoration-color: currentColor;
+    background: none;
+    transform: none;
+  }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
-  background: none;
-  border-color: transparent;
-}
+  :scope:where(:scope):is([data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"])) {
+    background: none;
+    transform: none;
+  }
 
-[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: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: var(--ui-focus-width);
-}
+  :scope:where(:scope):is([data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"]))) {
+    background: none;
+    border-color: transparent;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-button"][hidden] {
-  display: none;
+  :scope:where(:scope):is([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: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-focus-width);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>