@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiTextarea.vue

@@ -1,9 +1,15 @@
-<!-- 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, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { readBoundControl, vBindControl } from './control'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -177,38 +183,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 emit = defineEmits<{
   'update:modelValue': [value: string]
@@ -219,22 +194,7 @@ const model = computed({
 })
 
 const root = ref<HTMLElement | null>(null)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('textarea'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-textarea> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-textarea> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('textarea', 'ui-textarea')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -282,14 +242,14 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
 
 <template>
   <textarea
-    data-component="ui-textarea"
+    class="ui-textarea"
     v-bind="nativeAttrs($attrs)"
     :disabled="checkedProps.disabled ?? undefined"
     :readonly="checkedProps.readonly ?? undefined"
     :required="checkedProps.required ?? undefined"
     :aria-invalid="checkedProps.invalid ?? undefined"
     :rows="checkedProps.rows ?? undefined"
-    :style="{ '--_rows': checkedProps.rows ?? undefined, '--_max-rows': checkedProps.maxRows ?? undefined }"
+    :style="{ '--_rows': checkedProps.rows?.toString(), '--_max-rows': checkedProps.maxRows?.toString() }"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-autosize="reflectedProp('autosize', 'autosize', checkedProps.autosize, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
@@ -360,163 +320,171 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
   inherits: false;
 }
 
-[data-component~="ui-textarea"] {
-  box-sizing: border-box;
-  display: inline-block;
-  inline-size: 100%;
-  min-inline-size: 0;
-  min-block-size: calc(3rem * 2);
-  margin: 0;
-  --_padding-block: var(--ui-space-2);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  padding-inline-end: var(
-    --ui-textarea-padding-inline-end,
-    var(--_ui-default-textarea-padding-inline-end, var(--ui-space-3))
-  );
-  appearance: none;
-  resize: vertical;
-  border: var(
-    --ui-textarea-border-width,
-    var(--_ui-default-textarea-border-width, var(--ui-border-width))
-  ) solid
-    var(
-      --ui-textarea-border,
-      var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong)))
-    );
-  border-radius: var(
-    --ui-textarea-radius,
-    var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)))
-  );
-  background: var(
-    --ui-textarea-surface,
-    var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
-  );
-  color: var(--ui-text-primary);
-  font: inherit;
-  line-height: var(--ui-line-height-md);
-  box-shadow: var(
-    --ui-textarea-shadow,
-    var(--_ui-default-textarea-shadow, var(--ui-control-inset))
-  );
-  transition:
-    border-color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-    background-color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
 /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-[data-component~="ui-textarea"]::selection {
-  background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
-  color: inherit;
-}
 
-[data-component~="ui-textarea"]::placeholder {
-  color: var(--ui-control-placeholder, var(--ui-text-secondary));
-  opacity: 1;
-}
+/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 
-[data-component~="ui-textarea"]:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
-  border-color: var(
-    --ui-textarea-border-hover,
-    var(
-      --_ui-default-textarea-border-hover,
-      var(--ui-control-border-hover, var(--ui-text-secondary))
-    )
-  );
-}
+/* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
 
-[data-component~="ui-textarea"]:focus-visible {
-  border-color: var(
-    --ui-textarea-focus-border,
-    var(--_ui-default-textarea-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
-  );
-  outline: var(--ui-textarea-focus-outline, var(--_ui-default-textarea-focus-outline, none));
-  box-shadow: var(
-    --ui-textarea-focus-shadow,
-    var(
-      --_ui-default-textarea-focus-shadow,
-      var(--ui-control-inset),
-      var(--ui-control-focus-halo-shadow)
-    )
-  );
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-textarea"][aria-invalid="true"],
-[data-component~="ui-textarea"]:is(:user-invalid, [data-user-invalid]) {
-  border-color: var(
-    --ui-textarea-invalid-border,
-    var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
-  );
-}
+@scope (.ui-textarea) {
+  :scope:where(:scope) {
+    box-sizing: border-box;
+    display: inline-block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: calc(3rem * 2);
+    margin: 0;
+    --_padding-block: var(--ui-space-2);
+    padding: var(--ui-space-2) var(--ui-space-3);
+    padding-inline-end: var(
+      --ui-textarea-padding-inline-end,
+      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-3))
+    );
+    appearance: none;
+    resize: vertical;
+    border: var(
+      --ui-textarea-border-width,
+      var(--_ui-default-textarea-border-width, var(--ui-border-width))
+    ) solid
+      var(
+        --ui-textarea-border,
+        var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong)))
+      );
+    border-radius: var(
+      --ui-textarea-radius,
+      var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)))
+    );
+    background: var(
+      --ui-textarea-surface,
+      var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
+    );
+    color: var(--ui-text-primary);
+    font: inherit;
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(
+      --ui-textarea-shadow,
+      var(--_ui-default-textarea-shadow, var(--ui-control-inset))
+    );
+    transition:
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+      background-color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+  :scope:where(:scope)::selection {
+    background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+    color: inherit;
+  }
+
+  :scope:where(:scope)::placeholder {
+    color: var(--ui-control-placeholder, var(--ui-text-secondary));
+    opacity: 1;
+  }
 
-[data-component~="ui-textarea"]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-  box-shadow: var(
-    --ui-textarea-invalid-focus-shadow,
-    var(
-      --_ui-default-textarea-invalid-focus-shadow,
-      var(--ui-control-inset),
-      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-        in srgb,
-        var(
-          --ui-textarea-invalid-border,
-          var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
-        ) 22%,
-        transparent
+  :scope:where(:scope):is(:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid]))) {
+    border-color: var(
+      --ui-textarea-border-hover,
+      var(
+        --_ui-default-textarea-border-hover,
+        var(--ui-control-border-hover, var(--ui-text-secondary))
       )
-    )
-  );
-}
+    );
+  }
 
-[data-component~="ui-textarea"]:disabled {
-  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-disabled-text);
-  box-shadow: none;
-  cursor: not-allowed;
-}
+  :scope:where(:scope):is(:focus-visible) {
+    border-color: var(
+      --ui-textarea-focus-border,
+      var(--_ui-default-textarea-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
+    );
+    outline: var(--ui-textarea-focus-outline, var(--_ui-default-textarea-focus-outline, none));
+    box-shadow: var(
+      --ui-textarea-focus-shadow,
+      var(
+        --_ui-default-textarea-focus-shadow,
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow)
+      )
+    );
+  }
+  :scope:where(:scope):is([aria-invalid="true"]),
+  :scope:where(:scope):is(:is(:user-invalid, [data-user-invalid])) {
+    border-color: var(
+      --ui-textarea-invalid-border,
+      var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
+    );
+  }
 
-[data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"] {
-  --_padding-block: var(--ui-space-1);
-  padding: var(--ui-space-1) var(--ui-space-2);
-  padding-inline-end: var(
-    --ui-textarea-padding-inline-end,
-    var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2))
-  );
-  font-size: var(--ui-font-size-sm);
-}
+  :scope:where(:scope):is(:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
+    box-shadow: var(
+      --ui-textarea-invalid-focus-shadow,
+      var(
+        --_ui-default-textarea-invalid-focus-shadow,
+        var(--ui-control-inset),
+        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+          in srgb,
+          var(
+            --ui-textarea-invalid-border,
+            var(
+              --_ui-default-textarea-invalid-border,
+              var(--ui-field-danger, var(--ui-danger-solid))
+            )
+          ) 22%,
+          transparent
+        )
+      )
+    );
+  }
 
-[data-component~="ui-textarea"][data-ui-textarea-state~="size=lg"] {
-  --_padding-block: var(--ui-space-3);
-  padding: var(--ui-space-3) var(--ui-space-4);
-  padding-inline-end: var(
-    --ui-textarea-padding-inline-end,
-    var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4))
-  );
-  font-size: var(--ui-font-size-md);
-}
+  :scope:where(:scope):is(:disabled) {
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    color: var(--ui-disabled-text);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
 
-[data-component~="ui-textarea"][data-ui-textarea-state~="maxRows"] {
-  max-block-size: calc(
-    max(var(--_rows), var(--_max-rows)) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px
-  );
-}
+  :scope:where(:scope):is([data-ui-textarea-state~="size=sm"]) {
+    --_padding-block: var(--ui-space-1);
+    padding: var(--ui-space-1) var(--ui-space-2);
+    padding-inline-end: var(
+      --ui-textarea-padding-inline-end,
+      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2))
+    );
+    font-size: var(--ui-font-size-sm);
+  }
 
-@supports (field-sizing: content) {
-  [data-component~="ui-textarea"][data-ui-textarea-state~="autosize"] {
-    field-sizing: content;
-    min-block-size: calc(var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px);
+  :scope:where(:scope):is([data-ui-textarea-state~="size=lg"]) {
+    --_padding-block: var(--ui-space-3);
+    padding: var(--ui-space-3) var(--ui-space-4);
+    padding-inline-end: var(
+      --ui-textarea-padding-inline-end,
+      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4))
+    );
+    font-size: var(--ui-font-size-md);
   }
-}
 
-/* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
-@media (pointer: coarse) {
-  [data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"] {
-    font-size: inherit;
+  :scope:where(:scope):is([data-ui-textarea-state~="maxRows"]) {
+    max-block-size: calc(
+      max(var(--_rows), var(--_max-rows)) * 1lh + var(--_padding-block) + var(--_padding-block) +
+        2px
+    );
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-textarea"][hidden] {
-  display: none;
+  @supports (field-sizing: content) {
+    :scope:where(:scope):is([data-ui-textarea-state~="autosize"]) {
+      field-sizing: content;
+      min-block-size: calc(
+        var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px
+      );
+    }
+  }
+  @media (pointer: coarse) {
+    :scope:where(:scope):is([data-ui-textarea-state~="size=sm"]) {
+      font-size: inherit;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiToast.vue

@@ -1,8 +1,15 @@
-<!-- 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, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+import {
+  attribute,
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 import UiIconButton from './UiIconButton.vue'
@@ -58,38 +65,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 emit = defineEmits<{
   dismiss: [
@@ -105,19 +81,7 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 const actionElement = useTemplateRef<HTMLElement>('actionElement')
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-toast> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-toast> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('div', 'ui-toast')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -163,24 +127,11 @@ useComponentHost(() => import('../components/ui-toast/ui-toast.js'), {
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { action: actionElement },
 })
-
-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)
-}
 </script>
 
 <template>
   <div
-    data-component="ui-toast"
+    class="ui-toast"
     v-bind="nativeAttrs($attrs)"
     :role="attribute(
       (({
@@ -200,12 +151,12 @@ function attribute(value: unknown): any {
     <div class="message"><slot /></div>
     <div class="action" ref="actionElement"><slot name="action" /></div>
     <UiIconButton
-      class="dismiss"
+      class="ui-icon-button dismiss"
       size="sm"
       variant="ghost"
       label="Dismiss notification"
       :round="true"
-    ><UiIcon name="x" /></UiIconButton>
+    ><UiIcon class="ui-icon" name="x" /></UiIconButton>
   </div>
 </template>
 
@@ -231,64 +182,65 @@ function attribute(value: unknown): any {
   syntax: "*";
   inherits: false;
 }
+@scope (.ui-toast) to (.ui-icon-button, .ui-icon) {
+  :scope:where(:scope) {
+    --_ui-toast-accent: var(--ui-border-strong);
+    --_ui-toast-surface: var(--ui-surface-muted);
 
-[data-component~="ui-toast"] {
-  --_ui-toast-accent: var(--ui-border-strong);
-  --_ui-toast-surface: var(--ui-surface-muted);
-
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  box-sizing: border-box;
-  inline-size: 100%;
-  margin: 0;
-  padding: var(--ui-space-3) var(--ui-space-4);
-  /* The close button's internal space supplies the rest of the trailing inset. */
-  padding-inline-end: var(--ui-space-2);
-  border: var(--ui-border-width) solid
-    var(
-      --ui-toast-border,
-      var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent)))
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    box-sizing: border-box;
+    inline-size: 100%;
+    margin: 0;
+    padding: var(--ui-space-3) var(--ui-space-4);
+    /* The close button's internal space supplies the rest of the trailing inset. */
+    padding-inline-end: var(--ui-space-2);
+    border: var(--ui-border-width) solid
+      var(
+        --ui-toast-border,
+        var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent)))
+      );
+    border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+    background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
+    color: var(--ui-text-primary);
+    font-family: var(--ui-font-family-sans);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-normal);
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(
+      --ui-toast-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
-  border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
-  background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
-  color: var(--ui-text-primary);
-  font-family: var(--ui-font-family-sans);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-normal);
-  line-height: var(--ui-line-height-md);
-  box-shadow: var(
-    --ui-toast-shadow,
-    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
-  );
-  pointer-events: auto;
-}
+    pointer-events: auto;
+  }
 
-[data-component~="ui-toast"][data-ui-toast-state~="tone=info"] {
-  --_ui-toast-accent: var(--ui-info-solid);
-  --_ui-toast-surface: var(--ui-info-soft);
-}
-[data-component~="ui-toast"][data-ui-toast-state~="tone=success"] {
-  --_ui-toast-accent: var(--ui-success-solid);
-  --_ui-toast-surface: var(--ui-success-soft);
-}
-[data-component~="ui-toast"][data-ui-toast-state~="tone=warning"] {
-  --_ui-toast-accent: var(--ui-warning-solid);
-  --_ui-toast-surface: var(--ui-warning-soft);
-}
-[data-component~="ui-toast"][data-ui-toast-state~="tone=danger"] {
-  --_ui-toast-accent: var(--ui-danger-solid);
-  --_ui-toast-surface: var(--ui-danger-soft);
-}
+  :scope:where(:scope):is([data-ui-toast-state~="tone=info"]) {
+    --_ui-toast-accent: var(--ui-info-solid);
+    --_ui-toast-surface: var(--ui-info-soft);
+  }
+  :scope:where(:scope):is([data-ui-toast-state~="tone=success"]) {
+    --_ui-toast-accent: var(--ui-success-solid);
+    --_ui-toast-surface: var(--ui-success-soft);
+  }
+  :scope:where(:scope):is([data-ui-toast-state~="tone=warning"]) {
+    --_ui-toast-accent: var(--ui-warning-solid);
+    --_ui-toast-surface: var(--ui-warning-soft);
+  }
+  :scope:where(:scope):is([data-ui-toast-state~="tone=danger"]) {
+    --_ui-toast-accent: var(--ui-danger-solid);
+    --_ui-toast-surface: var(--ui-danger-soft);
+  }
 
-.message {
-  min-inline-size: 0;
-  flex: 1;
-}
-.action:not(:has(> *)) {
-  display: none;
-}
-[data-component~="ui-toast"][hidden] {
-  display: none;
+  .message {
+    min-inline-size: 0;
+    flex: 1;
+  }
+  .action:not(:has(> *)) {
+    display: none;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>