@threadlabs/looma 0.33.1 → 0.35.0

package/vue/UiCurveEditor.vue

@@ -0,0 +1,427 @@
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
+import { acceptsControllerWrite } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
+import UiNumberInput from './UiNumberInput.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description:
+        'Prevents typing, stepping and pointer or keyboard changes while keeping the value visible.',
+      default: false,
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description: 'Accessible name for the editing control.',
+      default: 'Value',
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description: 'Shared field and button height.',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'CSS cubic-bezier or a standard easing keyword. X stays within 0–1; Y is bounded to -1–2 for a limited overshoot.',
+      default: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+    },
+  },
+} as const
+const props = defineProps({
+  disabled: { type: null as unknown as PropType<boolean | null> },
+  label: { type: null as unknown as PropType<string | null> },
+  size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null> },
+  value: { type: null as unknown as PropType<string | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
+})
+const acceptedProps: Record<string, unknown> = {
+  disabled: false,
+  label: 'Value',
+  size: 'md',
+  value: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+}
+const inputTracking = vuePropInputs(acceptedProps, {
+  disabled: false,
+  label: 'Value',
+  size: 'md',
+  value: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'disabled':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'label':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'size':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'value':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    default:
+      return { ok: false }
+  }
+}, () => {
+  void checkedProps.value
+})
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    disabled: propInputs.value<boolean | null>(
+      'disabled',
+      props['disabled'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    label: propInputs.value<string | null>(
+      'label',
+      props['label'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    size: propInputs.value<'sm' | 'md' | 'lg' | null>(
+      'size',
+      props['size'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'sm' | 'md' | 'lg',
+    value: propInputs.value<string | null>(
+      'value',
+      props['value'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
+const emit = defineEmits<{
+  'update:value': [value: string]
+  input: [event: CustomEvent<{ readonly value: string }>]
+  change: [event: CustomEvent<{ readonly value: string }>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const plotElement = useTemplateRef<HTMLElement>('plotElement')
+const firstLineElement = useTemplateRef<HTMLElement>('firstLineElement')
+const secondLineElement = useTemplateRef<HTMLElement>('secondLineElement')
+const curveElement = useTemplateRef<HTMLElement>('curveElement')
+const firstElement = useTemplateRef<HTMLElement>('firstElement')
+const secondElement = useTemplateRef<HTMLElement>('secondElement')
+const resultElement = useTemplateRef<HTMLElement>('resultElement')
+const point0 = ref('0.25')
+const point1 = ref('0.1')
+const point2 = ref('0.25')
+const point3 = ref('1')
+provide('html-next:ui-curve-editor:point0', point0)
+provide('html-next:ui-curve-editor:point1', point1)
+provide('html-next:ui-curve-editor:point2', point2)
+provide('html-next:ui-curve-editor:point3', point3)
+checkHydratedRoot('span', 'ui-curve-editor')
+
+const isInputDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && Object.keys(detail as object).every((key) => ['value'].includes(key)))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    input: isInputDetail,
+    change: isInputDetail,
+  },
+  modeled: ['value'],
+})
+
+useComponentHost(() => import('../components/ui-curve-editor/ui-curve-editor.js'), {
+  root,
+  module: true,
+  dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({
+        point0: { kind: 'terminal', name: 'string' },
+        point1: { kind: 'terminal', name: 'string' },
+        point2: { kind: 'terminal', name: 'string' },
+        point3: { kind: 'terminal', name: 'string' },
+      } as Record<string, any>)[name],
+      keys,
+    ),
+  initials: { point0: '0.25', point1: '0.1', point2: '0.25', point3: '1' },
+  controllerSource: {
+    specifier: '../components/ui-curve-editor/ui-curve-editor.js',
+    definition: './components/ui-curve-editor/ui-curve-editor.html',
+  },
+  props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['disabled', 'label', 'size', 'value'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  refs: {
+    plot: plotElement,
+    firstLine: firstLineElement,
+    secondLine: secondLineElement,
+    curve: curveElement,
+    first: firstElement,
+    second: secondElement,
+    result: resultElement,
+  },
+  state: { point0, point1, point2, point3 },
+})
+</script>
+
+<template>
+  <span
+    class="ui-curve-editor"
+    v-bind="nativeAttrs($attrs)"
+    data-hn
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-ui-curve-editor-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-curve-editor-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-curve-editor-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-curve-editor-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    ref="root"
+  ><span class="plot-frame" role="group" :aria-label="checkedProps.label ?? undefined"><span
+        class="plot"
+        ref="plotElement"
+      ><svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+          <path class="guide" d="M0 66.667 H100 M0 33.333 H100"></path>
+          <path class="guide" d="M0 66.667 L25 63.333" ref="firstLineElement"></path>
+          <path class="guide" d="M100 33.333 L25 33.333" ref="secondLineElement"></path>
+          <path d="M0 66.667 C25 63.333 25 33.333 100 33.333" ref="curveElement"></path>
+        </svg>{{ ' ' }}<button
+          class="handle"
+          type="button"
+          aria-label="First curve handle. Arrow keys adjust; Shift moves faster."
+          :disabled="checkedProps.disabled ?? undefined"
+          ref="firstElement"
+        >
+        </button>{{ ' ' }}<button
+          class="handle second"
+          type="button"
+          aria-label="Second curve handle. Arrow keys adjust; Shift moves faster."
+          :disabled="checkedProps.disabled ?? undefined"
+          ref="secondElement"
+        >
+        </button></span></span>{{ ' ' }}<span class="coordinates"><span class="coordinate"><span
+        >X1</span>
+        <UiNumberInput
+          class="ui-number-input"
+          data-curve-coordinate="0"
+          :min="0"
+          :max="1"
+          :step="0.01"
+          label="First handle X"
+          :value="point0"
+          :size="checkedProps.size"
+          :disabled="checkedProps.disabled"
+          v-bind="{
+            [BINDING_INPUTS_PROP]: {
+              size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+              disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
+            },
+          }"
+        /></span>{{ ' ' }}<span class="coordinate"><span>Y1</span>
+        <UiNumberInput
+          class="ui-number-input"
+          data-curve-coordinate="1"
+          :min="-1"
+          :max="2"
+          :step="0.01"
+          label="First handle Y"
+          :value="point1"
+          :size="checkedProps.size"
+          :disabled="checkedProps.disabled"
+          v-bind="{
+            [BINDING_INPUTS_PROP]: {
+              size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+              disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
+            },
+          }"
+        /></span>{{ ' ' }}<span class="coordinate"><span>X2</span>
+        <UiNumberInput
+          class="ui-number-input"
+          data-curve-coordinate="2"
+          :min="0"
+          :max="1"
+          :step="0.01"
+          label="Second handle X"
+          :value="point2"
+          :size="checkedProps.size"
+          :disabled="checkedProps.disabled"
+          v-bind="{
+            [BINDING_INPUTS_PROP]: {
+              size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+              disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
+            },
+          }"
+        /></span>{{ ' ' }}<span class="coordinate"><span>Y2</span>
+        <UiNumberInput
+          class="ui-number-input"
+          data-curve-coordinate="3"
+          :min="-1"
+          :max="2"
+          :step="0.01"
+          label="Second handle Y"
+          :value="point3"
+          :size="checkedProps.size"
+          :disabled="checkedProps.disabled"
+          v-bind="{
+            [BINDING_INPUTS_PROP]: {
+              size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+              disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
+            },
+          }"
+        /></span></span>{{ ' ' }}<output ref="resultElement">{{
+      checkedProps.value
+    }}</output></span>
+</template>
+
+<style scoped>
+@scope (.ui-curve-editor) to ([data-hn]) {
+  :global(:scope) {
+    display: grid !important;
+    gap: var(--ui-space-3) !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    min-inline-size: 0;
+  }
+  :global(.plot-frame) {
+    box-sizing: border-box !important;
+    display: block !important;
+    block-size: 12rem;
+    padding: max(var(--ui-space-4), 0.75rem, calc(var(--ui-control-min-block-size) / 2)) !important;
+    margin: 0 !important;
+    border: var(--ui-border-width) solid var(--ui-control-border);
+    border-radius: var(--ui-field-radius, var(--ui-radius-md));
+    background: var(--ui-control-surface, var(--ui-surface));
+  }
+  :global(.plot) {
+    position: relative;
+    display: block !important;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  :global(svg) {
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+  :global(path) {
+    fill: none;
+    stroke: var(--ui-accent-solid);
+    stroke-width: 2;
+    vector-effect: non-scaling-stroke;
+  }
+  :global(.guide) {
+    stroke: var(--ui-control-border);
+    stroke-width: 1;
+  }
+  :global(.handle) {
+    position: absolute;
+    left: 25%;
+    top: 63.333%;
+    translate: -50% -50%;
+    inline-size: max(1.5rem, var(--ui-control-min-block-size));
+    block-size: max(1.5rem, var(--ui-control-min-block-size));
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--ui-text-primary);
+    touch-action: none;
+    cursor: grab;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+  :global(.second) {
+    top: 33.333%;
+  }
+  :global(.handle::after) {
+    content: "";
+    position: absolute;
+    inset: 25%;
+    border: var(--ui-border-width) solid var(--ui-accent-solid);
+    background: var(--ui-surface-raised);
+    border-radius: 50%;
+    box-shadow: var(--ui-shadow-xs);
+  }
+  :global(.handle::before) {
+    content: "";
+    position: absolute;
+    inset: 40%;
+    background: var(--ui-accent-solid);
+    border-radius: 50%;
+    z-index: 1;
+  }
+  :global(.handle:focus-visible) {
+    outline: var(--ui-focus-width) solid var(--ui-control-focus, var(--ui-accent-solid));
+    outline-offset: var(--ui-space-1);
+  }
+  :global(.handle:disabled) {
+    cursor: not-allowed;
+  }
+  :global(.coordinates) {
+    display: grid !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    gap: var(--ui-space-2) !important;
+  }
+  :global(.coordinate) {
+    display: grid !important;
+    gap: var(--ui-space-1) !important;
+    font-size: var(--ui-font-size-sm);
+  }
+  :global(output) {
+    overflow-wrap: anywhere;
+    font-family: var(--ui-font-mono, monospace);
+    font-size: var(--ui-font-size-sm);
+  }
+  :global(:scope[hidden]) {
+    display: none !important;
+  }
+}
+</style>

package/vue/UiDialog.vue

@@ -84,7 +84,8 @@ const propValidityContract = {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
       target: { attribute: 'size' },
-      description: 'Choose a compact, standard, wide, or viewport-filling dialog.',
+      description:
+        'Choose a compact, standard, wide, or viewport-filling dialog. Shared surface separation adapts to dialog purpose and rendered size.',
       values: ['sm', 'md', 'lg', 'fullscreen'],
       default: 'md',
     },
@@ -362,6 +363,9 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   inherits: false;
 }
 
+/* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
+   transparency, saturation and edge light belong to the surrounding decorative material. */
+
 /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
 /* Alerts have no close target to add height above the title. */
@@ -387,6 +391,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
 
 @scope (.ui-dialog) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-dialog])) {
+    --_ui-material-scale: 1;
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -422,6 +427,93 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
   }
+  :global(:scope:where([data-hn-ui-dialog])) {
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+    --_ui-material-active: clamp(
+      0,
+      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
+      1
+    );
+    --_ui-material-rim: calc(
+      (
+        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
+      ) *
+        var(--_ui-material-scale, 1) *
+        8px
+    );
+    --_ui-material-content-color: var(
+      --ui-dialog-surface,
+      var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))
+    );
+    --_ui-material-rim-color: color-mix(
+      in srgb,
+      var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%),
+      transparent
+    );
+    background:
+      var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
+      linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color))
+      padding-box,
+      linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+      var(--_ui-material-content-color) padding-box;
+    border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+    border-color: var(
+      --ui-dialog-border,
+      color-mix(
+        in oklab,
+        var(--ui-overlay-border, var(--ui-border-strong)) calc(
+          (1 - var(--_ui-material-active)) * 100%
+        ),
+        transparent
+      )
+    );
+    box-shadow: var(
+      --ui-dialog-shadow,
+      var(
+        --ui-overlay-shadow,
+        0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(
+          var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px
+        ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+        var(--ui-material-glow, 0 0 transparent),
+        inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
+          --ui-material-edge,
+          var(--ui-border-strong)
+        ),
+        var(--ui-elevation-dialog, var(--ui-shadow-xl))
+      )
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+    -webkit-backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+  }
+
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    :global(:scope:where([data-hn-ui-dialog])) {
+      background: var(--_ui-material-content-color);
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    :global(:scope:where([data-hn-ui-dialog])) {
+      background: var(--_ui-material-content-color);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :global(:scope:where([data-hn-ui-dialog])) {
+      background: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
 
   :global(:scope[open]:where([data-hn-ui-dialog])) {
     display: flex !important;
@@ -578,6 +670,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
 
 @scope ([data-slotted~="ui-dialog"]:not([data-hn])) to ([data-hn], [data-slotted]) {
   :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+    --_ui-material-scale: 1;
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -613,6 +706,93 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
   }
+  :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+    --_ui-material-active: clamp(
+      0,
+      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
+      1
+    );
+    --_ui-material-rim: calc(
+      (
+        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
+      ) *
+        var(--_ui-material-scale, 1) *
+        8px
+    );
+    --_ui-material-content-color: var(
+      --ui-dialog-surface,
+      var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))
+    );
+    --_ui-material-rim-color: color-mix(
+      in srgb,
+      var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%),
+      transparent
+    );
+    background:
+      var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
+      linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color))
+      padding-box,
+      linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+      var(--_ui-material-content-color) padding-box;
+    border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+    border-color: var(
+      --ui-dialog-border,
+      color-mix(
+        in oklab,
+        var(--ui-overlay-border, var(--ui-border-strong)) calc(
+          (1 - var(--_ui-material-active)) * 100%
+        ),
+        transparent
+      )
+    );
+    box-shadow: var(
+      --ui-dialog-shadow,
+      var(
+        --ui-overlay-shadow,
+        0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(
+          var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px
+        ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+        var(--ui-material-glow, 0 0 transparent),
+        inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
+          --ui-material-edge,
+          var(--ui-border-strong)
+        ),
+        var(--ui-elevation-dialog, var(--ui-shadow-xl))
+      )
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+    -webkit-backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
+    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+  }
+
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+      background: var(--_ui-material-content-color);
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+      background: var(--_ui-material-content-color);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+      background: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
 
   :global(:where(.ui-dialog)[open]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
     display: flex !important;

package/vue/UiIconButton.d.ts

@@ -26,6 +26,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     pending: {
         type: PropType<boolean | null>;
     };
+    preset: {
+        type: PropType<"none" | "primary" | "standard" | "quiet" | "destructive" | null>;
+    };
     revealed: {
         type: PropType<boolean | null>;
     };
@@ -36,7 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"sm" | "md" | "lg" | null>;
     };
     tone: {
-        type: PropType<"accent" | "neutral" | null>;
+        type: PropType<"auto" | "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null>;
     };
     variant: {
         type: PropType<"ghost" | "outline" | "solid" | null>;
@@ -66,6 +69,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     pending: {
         type: PropType<boolean | null>;
     };
+    preset: {
+        type: PropType<"none" | "primary" | "standard" | "quiet" | "destructive" | null>;
+    };
     revealed: {
         type: PropType<boolean | null>;
     };
@@ -76,7 +82,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"sm" | "md" | "lg" | null>;
     };
     tone: {
-        type: PropType<"accent" | "neutral" | null>;
+        type: PropType<"auto" | "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null>;
     };
     variant: {
         type: PropType<"ghost" | "outline" | "solid" | null>;