@threadlabs/looma 0.33.1 → 0.34.0

package/vue/UiButton.vue

@@ -7,6 +7,7 @@ import {
   checkHydratedRoot,
   concat,
   createDispatch,
+  cycleCheckedComputed,
   nativeAttrs,
   preserveRootFocus,
   useComponentHost,
@@ -17,6 +18,9 @@ import {
   checkedProp,
   checkPropInput,
   type InputBindings,
+  inputComputed,
+  inputDefault,
+  inputRead,
   propValidityState,
   READY_INPUT,
   requireInputStatus,
@@ -79,6 +83,15 @@ const propValidityContract = {
       description: 'Deprecated alias for loading.',
       default: false,
     },
+    preset: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'preset' },
+      description:
+        'A shortcut that sets appearance and tone together: primary is solid accent, standard is solid neutral, quiet is ghost neutral, and destructive is solid\n      danger. A named preset takes precedence over variant and tone. Leave it at none to choose variant and tone independently.',
+      values: ['none', 'primary', 'standard', 'quiet', 'destructive'],
+      default: 'none',
+    },
     rel: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
@@ -153,6 +166,11 @@ const props = defineProps({
   href: { type: null as unknown as PropType<string | null> },
   loading: { type: null as unknown as PropType<boolean | null> },
   pending: { type: null as unknown as PropType<boolean | null> },
+  preset: {
+    type: null as unknown as PropType<
+      'none' | 'primary' | 'standard' | 'quiet' | 'destructive' | null
+    >,
+  },
   rel: { type: null as unknown as PropType<string | null> },
   shape: { type: null as unknown as PropType<'rounded' | 'pill' | null> },
   size: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | 'lg' | null> },
@@ -178,6 +196,7 @@ const acceptedProps: Record<string, unknown> = {
   href: null,
   loading: false,
   pending: false,
+  preset: 'none',
   rel: null,
   shape: 'rounded',
   size: 'md',
@@ -193,6 +212,7 @@ const inputTracking = vuePropInputs(acceptedProps, {
   disabled: false,
   loading: false,
   pending: false,
+  preset: 'none',
   shape: 'rounded',
   size: 'md',
   stretch: false,
@@ -213,6 +233,8 @@ const inputTracking = vuePropInputs(acceptedProps, {
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'pending':
       return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'preset':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
     case 'rel':
       return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
     case 'shape':
@@ -263,6 +285,11 @@ const checkedProps = computed(() => {
       props['pending'],
       props[BINDING_INPUTS_PROP],
     ) as boolean,
+    preset: propInputs.value<'none' | 'primary' | 'standard' | 'quiet' | 'destructive' | null>(
+      'preset',
+      props['preset'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'none' | 'primary' | 'standard' | 'quiet' | 'destructive',
     rel: propInputs.value<string | null>('rel', props['rel'], props[BINDING_INPUTS_PROP]),
     shape: propInputs.value<'rounded' | 'pill' | null>(
       'shape',
@@ -317,6 +344,68 @@ const hydrationInstance = getCurrentInstance()
 const rootArmElement = useTemplateRef<HTMLElement>('@html-next/root')
 const root = rootArmElement
 preserveRootFocus(root)
+const appearance: ReturnType<typeof inputComputed<any>> = inputComputed<any>(
+  () =>
+    (({
+      none: inputRead(checkedProps.value.variant, propInputs.status('variant')),
+      primary: 'solid',
+      standard: 'solid',
+      quiet: 'ghost',
+      destructive: 'solid',
+    }) as Record<string, any>)[
+      inputRead(checkedProps.value.preset, propInputs.status('preset'))
+    ] as any,
+  (read) => {
+    const value = cycleCheckedComputed(read)
+    return { get: () => value.value }
+  },
+)
+let colorTonePrevious: any = null
+const colorTone: ReturnType<typeof inputComputed<any>> = inputComputed<any>(
+  () => {
+    return ((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        (() => {
+          const value = {
+            none: ((objectValue: any, indexValue: any) =>
+              objectValue === Symbol.for('html-next.invalid-result')
+                || indexValue === Symbol.for('html-next.invalid-result')
+                ? Symbol.for('html-next.invalid-result')
+                : objectValue[indexValue])(
+                {
+                  true: 'danger',
+                  false: inputRead(checkedProps.value.tone, propInputs.status('tone')),
+                },
+                concat(
+                  inputRead(checkedProps.value.variant, propInputs.status('variant')) === 'danger',
+                ),
+              ),
+            primary: 'accent',
+            standard: 'neutral',
+            quiet: 'neutral',
+            destructive: 'danger',
+          }
+          return Object.values(value).some((entry: unknown) =>
+              entry === Symbol.for('html-next.invalid-result')
+            )
+            ? Symbol.for('html-next.invalid-result')
+            : value
+        })(),
+        inputRead(checkedProps.value.preset, propInputs.status('preset')),
+      ) as any
+  },
+  (read) => {
+    const value = cycleCheckedComputed(read)
+    return { get: () => value.value }
+  },
+  next =>
+    (next as unknown) === Symbol.for('html-next.invalid-result')
+      ? colorTonePrevious
+      : (colorTonePrevious = next),
+)
 let guardedPrevious: any = null
 const guarded = computed(() => {
   const candidate: any = ((objectValue: any, indexValue: any) =>
@@ -596,9 +685,9 @@ const guardedBinding7 = computed(() => {
       ))
 })
 checkHydratedRoot(
-  (checkedProps.value.variant === 'card' && checkedProps.value.as === 'a')
+  (appearance.get() === 'card' && checkedProps.value.as === 'a')
     ? 'a'
-    : ((checkedProps.value.variant === 'card')
+    : ((appearance.get() === 'card')
       ? 'button'
       : ((checkedProps.value.as === 'a') ? 'a' : ('button'))),
   'ui-button',
@@ -614,11 +703,6 @@ const hostState = computed(() =>
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
     checkedProps.value.shape && 'shape',
     checkedProps.value.shape != null && `shape=${encodeURIComponent(checkedProps.value.shape)}`,
-    checkedProps.value.variant && 'variant',
-    checkedProps.value.variant != null
-    && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
-    checkedProps.value.tone && 'tone',
-    checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
     checkedProps.value.loading && 'loading',
     checkedProps.value.pending && 'pending',
   ].filter(Boolean).join(' ')
@@ -651,6 +735,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     'href',
     'loading',
     'pending',
+    'preset',
     'rel',
     'shape',
     'size',
@@ -662,16 +747,20 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   ],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  computed: { appearance, colorTone },
+  availability: { appearance: () => appearance.status(), colorTone: () => colorTone.status() },
 })
 </script>
 
 <template>
   <a
-    v-if="checkedProps.variant === 'card' && checkedProps.as === 'a'"
+    v-if="appearance.get() === 'card' && checkedProps.as === 'a'"
     class="ui-button"
     v-bind="nativeAttrs($attrs)"
     data-hn
     data-hn-ui-button
+    :data-appearance="attribute(appearance.get())"
+    :data-tone="attribute(colorTone.get())"
     :href="guarded"
     :target="checkedProps.target ?? undefined"
     :rel="checkedProps.rel ?? undefined"
@@ -685,6 +774,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :data-ui-button-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
     :data-ui-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
     :data-ui-button-prop-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-ui-button-prop-preset="reflectedProp('preset', 'preset', checkedProps.preset, undefined, false)"
     :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -710,11 +800,13 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
           aria-hidden="true"
         /></slot></span></a>
   <button
-    v-else-if="checkedProps.variant === 'card'"
+    v-else-if="appearance.get() === 'card'"
     class="ui-button"
     v-bind="nativeAttrs($attrs)"
     data-hn
     data-hn-ui-button
+    :data-appearance="attribute(appearance.get())"
+    :data-tone="attribute(colorTone.get())"
     :type="checkedProps.type ?? undefined"
     :disabled="checkedProps.disabled ?? undefined"
     :aria-disabled="guardedBinding3"
@@ -726,6 +818,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :data-ui-button-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
     :data-ui-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
     :data-ui-button-prop-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-ui-button-prop-preset="reflectedProp('preset', 'preset', checkedProps.preset, undefined, false)"
     :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -758,6 +851,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     v-bind="nativeAttrs($attrs)"
     data-hn
     data-hn-ui-button
+    :data-appearance="attribute(appearance.get())"
+    :data-tone="attribute(colorTone.get())"
     :href="guardedBinding4"
     :target="checkedProps.target ?? undefined"
     :rel="checkedProps.rel ?? undefined"
@@ -771,6 +866,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :data-ui-button-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
     :data-ui-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
     :data-ui-button-prop-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-ui-button-prop-preset="reflectedProp('preset', 'preset', checkedProps.preset, undefined, false)"
     :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -795,6 +891,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     v-bind="nativeAttrs($attrs)"
     data-hn
     data-hn-ui-button
+    :data-appearance="attribute(appearance.get())"
+    :data-tone="attribute(colorTone.get())"
     :type="checkedProps.type ?? undefined"
     :disabled="checkedProps.disabled ?? undefined"
     :aria-disabled="guardedBinding7"
@@ -806,6 +904,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :data-ui-button-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
     :data-ui-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
     :data-ui-button-prop-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-ui-button-prop-preset="reflectedProp('preset', 'preset', checkedProps.preset, undefined, false)"
     :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -1039,7 +1138,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     flex: none;
     vertical-align: middle;
   }
-  :global(:scope:not([variant="link"]):has(.badge:not(:empty)):where([data-hn-ui-button])) {
+  :global(:scope:not([data-appearance="link"]):has(.badge:not(:empty)):where([data-hn-ui-button])) {
     padding-block: var(--ui-space-0-5) !important;
   }
 
@@ -1083,7 +1182,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       var(--ui-action-inset-lg, var(--ui-space-4)) !important;
     font-size: var(--ui-font-size-md);
   }
-  :global(:scope[data-ui-button-state~="variant=card"]:where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="card"]:where([data-hn-ui-button])) {
     display: grid !important;
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-content: center !important;
@@ -1096,10 +1195,10 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     box-shadow: none;
     background-image: none;
   }
-  :global(:scope[data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"]:where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="card"][size="lg"]:where([data-hn-ui-button])) {
     min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
   }
-  :global(:scope[data-ui-button-state~="variant=card"]:has(.card-icon:empty):where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="card"]:has(.card-icon:empty):where([data-hn-ui-button])) {
     grid-template-columns: minmax(0, 1fr) auto;
   }
   :global(.card-icon:where([data-hn-ui-button])) {
@@ -1121,11 +1220,11 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     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%));
   }
-  :global(:scope[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="card"][data-tone="neutral"]:where([data-hn-ui-button])) {
     border-color: var(--ui-button-border, var(--ui-border));
   }
 
-  :global(:scope[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="card"][data-tone="neutral"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     border-color: var(--ui-button-hover-border, var(--ui-border-strong));
   }
   :global(:scope:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
@@ -1135,26 +1234,26 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     box-shadow: var(--ui-pressed);
   }
 
-  :global(:scope[data-ui-button-state~="variant=solid"]:where([data-hn-ui-button])),
-  :global(:scope[data-ui-button-state~="variant=danger"]:where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="solid"]:where([data-hn-ui-button])),
+  :global(:scope[data-appearance="danger"]:where([data-hn-ui-button])) {
     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)));
   }
 
-  :global(:is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+  :global(:is(:scope[data-appearance="solid"], :scope[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background-color: var(--_tone-hover);
     border-color: var(--_tone-hover);
   }
 
-  :global(:is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+  :global(:is(:scope[data-appearance="solid"], :scope[data-appearance="danger"]):active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background-color: var(--_tone-active);
     border-color: var(--_tone-active);
     background-image: none;
     box-shadow: var(--ui-pressed);
   }
-  :global(:scope[data-ui-button-state~="tone=neutral"]:where([data-hn-ui-button])) {
+  :global(:scope[data-tone="neutral"]:where([data-hn-ui-button])) {
     --_hue: var(--ui-text);
     --_hue-hover: var(--ui-text);
     --_hue-active: var(--ui-text);
@@ -1162,39 +1261,39 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     --_on-hue: var(--ui-surface);
   }
 
-  :global(:scope[data-ui-button-state~="tone=danger"]:where([data-hn-ui-button])),
-  :global(:scope[data-ui-button-state~="variant=danger"]:where([data-hn-ui-button])) {
+  :global(:scope[data-tone="danger"]:where([data-hn-ui-button])),
+  :global(:scope[data-appearance="danger"]:where([data-hn-ui-button])) {
     --_hue: var(--ui-danger);
     --_hue-hover: var(--ui-danger-hover);
-    --_hue-active: var(--ui-danger-hover);
-    --_hue-text: var(--ui-danger-hover);
+    --_hue-active: var(--ui-danger-active, var(--ui-danger-hover));
+    --_hue-text: var(--ui-danger-subtle-text);
     --_on-hue: var(--ui-on-danger);
   }
 
-  :global(:scope[data-ui-button-state~="tone=success"]:where([data-hn-ui-button])) {
+  :global(:scope[data-tone="success"]:where([data-hn-ui-button])) {
     --_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);
+    --_hue-hover: var(--ui-success-hover);
+    --_hue-active: var(--ui-success-active);
+    --_hue-text: var(--ui-success-subtle-text);
+    --_on-hue: var(--ui-success-on-strong);
   }
 
-  :global(:scope[data-ui-button-state~="tone=warning"]:where([data-hn-ui-button])) {
+  :global(:scope[data-tone="warning"]:where([data-hn-ui-button])) {
     --_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);
+    --_hue-hover: var(--ui-warning-hover);
+    --_hue-active: var(--ui-warning-active);
+    --_hue-text: var(--ui-warning-subtle-text);
+    --_on-hue: var(--ui-warning-on-strong);
   }
 
-  :global(:scope[data-ui-button-state~="tone=info"]:where([data-hn-ui-button])) {
+  :global(:scope[data-tone="info"]:where([data-hn-ui-button])) {
     --_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);
+    --_hue-hover: var(--ui-info-hover);
+    --_hue-active: var(--ui-info-active);
+    --_hue-text: var(--ui-info-subtle-text);
+    --_on-hue: var(--ui-info-on-strong);
   }
-  :global(:scope[data-ui-button-state~="variant=field"]:where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="field"]:where([data-hn-ui-button])) {
     --_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)));
@@ -1207,7 +1306,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
   }
 
-  :global(:scope[data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="field"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     border-color: var(
       --ui-button-hover-border,
       var(--ui-control-border-hover, var(--ui-text-secondary))
@@ -1218,28 +1317,28 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     );
   }
 
-  :global(:scope[data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     --_ui-field-shadow: var(--ui-pressed);
   }
 
-  :global(:scope[data-ui-button-state~="variant=field"]:focus-visible:where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="field"]:focus-visible:where([data-hn-ui-button])) {
     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);
   }
 
-  :global(:scope[data-ui-button-state~="variant=ghost"]:where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="ghost"]:where([data-hn-ui-button])) {
     border-color: transparent;
     background: transparent;
     box-shadow: none;
     color: var(--ui-button-ghost-text, var(--_tone-text));
   }
-  :global(:scope[data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="ghost"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
     border-color: transparent;
   }
-  :global(:scope[data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background-color: var(
       --ui-button-ghost-active-surface,
       color-mix(in oklch, var(--ui-surface), var(--_tone) 3%)
@@ -1256,13 +1355,13 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       var(--ui-focus-halo);
   }
 
-  :global(:scope[data-ui-button-state~="variant=solid"]:focus-visible:where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="solid"]:focus-visible:where([data-hn-ui-button])) {
     box-shadow:
       var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
       var(--ui-focus-halo);
   }
 
-  :global(:is(:scope[data-ui-button-state~="variant=ghost"], :scope[data-ui-button-state~="variant=link"], :scope[data-ui-button-state~="variant=card"]):focus-visible:where([data-hn-ui-button])) {
+  :global(:is(:scope[data-appearance="ghost"], :scope[data-appearance="link"], :scope[data-appearance="card"]):focus-visible:where([data-hn-ui-button])) {
     box-shadow: var(--ui-focus-halo);
   }
   :global(:scope:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button])) {
@@ -1279,7 +1378,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   :global(:is(:scope[data-ui-button-state~="loading"], :scope[data-ui-button-state~="pending"]):focus-visible:where([data-hn-ui-button])) {
     box-shadow: var(--ui-focus-halo);
   }
-  :global(:scope[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button])) {
     background-color: var(--ui-disabled-surface);
     border-color: transparent;
   }
@@ -1290,14 +1389,14 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     }
   }
   :global(html[data-ui-input-modality="touch"]
-    :scope[data-ui-button-state~="variant=link"]:where([data-hn-ui-button])),
+    :scope[data-appearance="link"]:where([data-hn-ui-button])),
   :global(html[data-ui-input-modality="touch"]
     :scope[data-ui-button-state~="size=xs"]:where([data-hn-ui-button])) {
     position: relative;
   }
 
   :global(html[data-ui-input-modality="touch"]
-    :scope[data-ui-button-state~="variant=link"]:where([data-hn-ui-button])::after),
+    :scope[data-appearance="link"]:where([data-hn-ui-button])::after),
   :global(html[data-ui-input-modality="touch"]
     :scope[data-ui-button-state~="size=xs"]:where([data-hn-ui-button])::after) {
     position: absolute;
@@ -1307,7 +1406,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     transform: translate(-50%, -50%);
     content: "";
   }
-  :global(:scope[data-ui-button-state~="variant=link"]:where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="link"]:where([data-hn-ui-button])) {
     display: inline !important;
     min-block-size: 0;
     padding: 0 !important;
@@ -1326,24 +1425,24 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  :global(:scope[data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     color: var(--ui-button-link-hover-text, var(--ui-text-primary));
     text-decoration-color: currentColor;
     background: none;
     transform: none;
   }
 
-  :global(:scope[data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="link"]:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background: none;
     transform: none;
   }
 
-  :global(:scope[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button])) {
     background: none;
     border-color: transparent;
   }
 
-  :global(:scope[data-ui-button-state~="variant=link"]:focus-visible:where([data-hn-ui-button])) {
+  :global(:scope[data-appearance="link"]:focus-visible:where([data-hn-ui-button])) {
     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);

package/vue/UiCard.d.ts

@@ -24,7 +24,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"neutral" | "accent" | "info" | "success" | "warning" | "danger" | null>;
     };
     variant: {
-        type: PropType<"outlined" | "subtle" | "elevated" | null>;
+        type: PropType<"outlined" | "subtle" | "elevated" | "glass" | null>;
     };
     "\0htmlNextInputStatus": {
         type: PropType<InputBindings>;
@@ -43,7 +43,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"neutral" | "accent" | "info" | "success" | "warning" | "danger" | null>;
     };
     variant: {
-        type: PropType<"outlined" | "subtle" | "elevated" | null>;
+        type: PropType<"outlined" | "subtle" | "elevated" | "glass" | null>;
     };
     "\0htmlNextInputStatus": {
         type: PropType<InputBindings>;

package/vue/UiCard.vue

@@ -60,8 +60,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'variant' },
       description:
-        'The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;\n      elevated floats above the page with a shadow, for a view\'s one card, such as sign-in.',
-      values: ['outlined', 'subtle', 'elevated'],
+        'The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;\n      elevated floats above the page with a shadow, for a view\'s one card, such as sign-in. glass frames an opaque readable content plane with frosted material;\n      shared glassiness and surface separation govern its treatment.',
+      values: ['outlined', 'subtle', 'elevated', 'glass'],
       default: 'outlined',
     },
   },
@@ -75,7 +75,9 @@ const props = defineProps({
       'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
     >,
   },
-  variant: { type: null as unknown as PropType<'outlined' | 'subtle' | 'elevated' | null> },
+  variant: {
+    type: null as unknown as PropType<'outlined' | 'subtle' | 'elevated' | 'glass' | null>,
+  },
   [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
@@ -133,11 +135,11 @@ const checkedProps = computed(() => {
       props['tone'],
       props[BINDING_INPUTS_PROP],
     ) as 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger',
-    variant: propInputs.value<'outlined' | 'subtle' | 'elevated' | null>(
+    variant: propInputs.value<'outlined' | 'subtle' | 'elevated' | 'glass' | null>(
       'variant',
       props['variant'],
       props[BINDING_INPUTS_PROP],
-    ) as 'outlined' | 'subtle' | 'elevated',
+    ) as 'outlined' | 'subtle' | 'elevated' | 'glass',
   })
 })
 const inputStatus = (name: string, handlesError: boolean) => {
@@ -300,6 +302,54 @@ const hostState = computed(() =>
     box-shadow: var(--ui-shadow-lg);
   }
 
+  :global(:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card])) {
+    --_ui-panel-glass: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-panel-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+    --_ui-panel-rim: calc(
+      (var(--_ui-panel-separation) + var(--_ui-panel-glass) * 0.25) * 0.65 * 8px
+    );
+    border-width: calc(var(--ui-border-width) + var(--_ui-panel-rim));
+    border-color: transparent;
+    background:
+      linear-gradient(var(--_ui-card-surface), var(--_ui-card-surface)) padding-box,
+      linear-gradient(
+      var(--ui-material-glass, var(--ui-surface-raised)),
+      var(--ui-material-glass, var(--ui-surface-raised))
+    ) border-box,
+      var(--_ui-card-surface) padding-box;
+    box-shadow:
+      var(--ui-shadow-lg),
+      inset 0 0 0 var(--ui-border-width) var(--ui-material-edge, var(--ui-border-strong));
+    backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px))
+      saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
+    -webkit-backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px))
+      saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
+  }
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    :global(:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card])) {
+      background: var(--_ui-card-surface);
+    }
+  }
+  @media (prefers-reduced-transparency: reduce) {
+    :global(:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card])) {
+      background: var(--_ui-card-surface);
+      border-width: var(--ui-border-width);
+      border-color: var(--ui-border-strong);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+  @media (forced-colors: active) {
+    :global(:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card])) {
+      background: Canvas;
+      color: CanvasText;
+      border: var(--ui-border-width) solid CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+
   :global(:scope[data-ui-card-state~="tone=accent"]:where([data-hn-ui-card])) {
     border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
     --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));