@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiIconButton.vue

@@ -1,8 +1,16 @@
-<!-- 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 { createDispatch, useComponentHost } from './host'
+import {
+  attribute,
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiSpinner from './UiSpinner.vue'
 
@@ -211,38 +219,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 root = ref<HTMLElement | null>(null)
@@ -284,22 +261,7 @@ const guarded = computed(() => {
         concat(checkedProps.value.loading || checkedProps.value.pending),
       ))
 })
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('button'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-icon-button> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-icon-button> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('button', 'ui-icon-button')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -354,42 +316,11 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-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>
   <button
-    data-component="ui-icon-button"
+    class="ui-icon-button"
     type="button"
     v-bind="nativeAttrs($attrs)"
     :disabled="checkedProps.disabled ?? undefined"
@@ -411,7 +342,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-ui-icon-button-state="hostState || undefined"
     ref="root"
   >
-    <UiSpinner v-if="checkedProps.loading || checkedProps.pending" size="sm" />
+    <UiSpinner v-if="checkedProps.loading || checkedProps.pending" class="ui-spinner" size="sm" />
     <span class="content"><slot /></span>
   </button>
 </template>
@@ -495,152 +426,178 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   inherits: false;
 }
 
-[data-component~="ui-icon-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));
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
-  --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
-
-  display: inline-flex;
-  color: var(--ui-text-secondary);
-}
+/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
 
-[data-component~="ui-icon-button"]:dir(rtl) {
-  --_ui-action-start: -1px;
-}
+/* At rest an anticipatory button shows only its guide dot. The icon grows into place when
+   proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="tone=accent"] {
-  --_icon-button-border: var(--ui-accent-solid);
-  --_icon-button-hover-border: var(--ui-accent-hover);
-  --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
-  --_icon-button-outline-surface: color-mix(
-    in srgb,
-    var(--ui-accent-solid) 5%,
-    var(--ui-surface-default)
-  );
-  color: var(--_icon-button-text);
-}
+/* A touch target without a bigger button: an invisible hit area, at least the control
+   minimum, centred on the button (::before is the anticipatory guide). */
 
-/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="tone=neutral"] {
-  --_icon-button-solid-surface: var(--ui-text-primary);
-  --_icon-button-solid-hover-surface: var(--ui-text-primary);
-  --_icon-button-solid-text: var(--ui-surface-default);
-}
+/* A text button's companion uses control geometry; compact icon buttons keep their own density. */
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] {
-  position: relative;
-}
+/* Native toggle state persists after pointer release, including during loading. */
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]::before {
-  content: "";
-  position: absolute;
-  inset: 50% auto auto 50%;
-  z-index: 1;
-  inline-size: var(--ui-affordance-guide-size);
-  block-size: var(--ui-affordance-guide-size);
-  border-radius: var(--ui-radius-round);
-  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
-  transform: translate(-50%, -50%);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
-  pointer-events: none;
-}
+/* Disabled is a flat neutral control, independent of the active variant's tone. */
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"]::before {
-  inline-size: 2px;
-  block-size: 20px;
-  background: var(--ui-border-strong);
-  opacity: 1;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:disabled::before {
-  opacity: 0;
-}
+@scope (.ui-icon-button) to (.ui-spinner) {
+  :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));
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
+    --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
+
+    display: inline-flex;
+    color: var(--ui-text-secondary);
+  }
 
-/* At rest an anticipatory button shows only its guide dot. The icon grows into place when
-   proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content {
-  opacity: 1;
-  transform: scale(1);
-  transition:
-    opacity var(--ui-motion-fast) var(--ui-motion-ease),
-    transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
-}
+  :scope:where(:scope):is(:dir(rtl)) {
+    --_ui-action-start: -1px;
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
-    border-color: transparent;
-    background-color: transparent;
-    box-shadow: none;
+  :scope:where(:scope):is([data-ui-icon-button-state~="tone=accent"]) {
+    --_icon-button-border: var(--ui-accent-solid);
+    --_icon-button-hover-border: var(--ui-accent-hover);
+    --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
+    --_icon-button-outline-surface: color-mix(
+      in srgb,
+      var(--ui-accent-solid) 5%,
+      var(--ui-surface-default)
+    );
+    color: var(--_icon-button-text);
+  }
+  :scope:where(:scope):is([data-ui-icon-button-state~="tone=neutral"]) {
+    --_icon-button-solid-surface: var(--ui-text-primary);
+    --_icon-button-solid-hover-surface: var(--ui-text-primary);
+    --_icon-button-solid-text: var(--ui-surface-default);
   }
 
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
-    .content {
-    opacity: 0;
-    transform: scale(0.65);
-    transition-duration: var(--ui-motion-fast);
+  :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"]) {
+    position: relative;
   }
-}
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
-  opacity: 0;
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"])::before {
+    content: "";
+    position: absolute;
+    inset: 50% auto auto 50%;
+    z-index: 1;
+    inline-size: var(--ui-affordance-guide-size);
+    block-size: var(--ui-affordance-guide-size);
+    border-radius: var(--ui-radius-round);
+    background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+    opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
+    transform: translate(-50%, -50%);
+    transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+    pointer-events: none;
+  }
 
-[data-component~="ui-icon-button"] {
-  /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
-  --_size: 2rem;
-  appearance: none;
-  inline-size: var(--ui-icon-button-size, var(--_size));
-  block-size: var(--ui-icon-button-size, var(--_size));
-  min-inline-size: var(--ui-icon-button-size, var(--_size));
-  min-block-size: var(--ui-icon-button-size, var(--_size));
-  padding: 0;
-  margin: 0;
-  border: var(--ui-border-width) solid transparent;
-  border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-  background-color: var(--ui-icon-button-surface, transparent);
-  color: inherit;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  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),
-    scale var(--ui-motion-fast) var(--ui-motion-ease);
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"])::before {
+    inline-size: 2px;
+    block-size: 20px;
+    background: var(--ui-border-strong);
+    opacity: 1;
+  }
 
-@media (hover: none), (pointer: coarse) {
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]::before {
+  :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"]:disabled)::before {
     opacity: 0;
   }
-}
+  :scope[data-ui-icon-button-state~="anticipatory"] .content {
+    opacity: 1;
+    transform: scale(1);
+    transition:
+      opacity var(--ui-motion-fast) var(--ui-motion-ease),
+      transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
+  }
 
-/* A touch target without a bigger button: an invisible hit area, at least the control
-   minimum, centred on the button (::before is the anticipatory guide). */
-@media (pointer: coarse) {
-  [data-component~="ui-icon-button"] {
+  @media (hover: hover) and (pointer: fine) {
+    :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)) {
+      border-color: transparent;
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+      .content {
+      opacity: 0;
+      transform: scale(0.65);
+      transition-duration: var(--ui-motion-fast);
+    }
+  }
+
+  :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible))::before {
+    opacity: 0;
+  }
+
+  :scope:where(:scope) {
+    /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
+    --_size: 2rem;
+    appearance: none;
+    inline-size: var(--ui-icon-button-size, var(--_size));
+    block-size: var(--ui-icon-button-size, var(--_size));
+    min-inline-size: var(--ui-icon-button-size, var(--_size));
+    min-block-size: var(--ui-icon-button-size, var(--_size));
+    padding: 0;
+    margin: 0;
+    border: var(--ui-border-width) solid transparent;
+    border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
+    background-color: var(--ui-icon-button-surface, transparent);
+    color: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    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),
+      scale var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+
+  @media (hover: none), (pointer: coarse) {
+    :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"])::before {
+      opacity: 0;
+    }
+  }
+  @media (pointer: coarse) {
+    :scope:where(:scope) {
+      position: relative;
+    }
+
+    :scope:where(:scope)::after {
+      content: "";
+      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%);
+    }
+  }
+
+  :scope:where(:scope):is(html[data-ui-input-modality="touch"] *) {
     position: relative;
   }
 
-  [data-component~="ui-icon-button"]::after {
+  :scope:where(:scope):is(html[data-ui-input-modality="touch"] *)::after {
     content: "";
     position: absolute;
     inset: 50% auto auto 50%;
@@ -648,242 +605,233 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     block-size: max(100%, var(--ui-control-min-block-size));
     transform: translate(-50%, -50%);
   }
-}
-
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"] {
-  position: relative;
-}
 
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
-  content: "";
-  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%);
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="size=sm"]) {
+    --_size: 1.75rem;
+    inline-size: var(--ui-icon-button-size, var(--_size));
+    block-size: var(--ui-icon-button-size, var(--_size));
+    min-inline-size: var(--ui-icon-button-size, var(--_size));
+    min-block-size: var(--ui-icon-button-size, var(--_size));
+  }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"] {
-  --_size: 1.75rem;
-  inline-size: var(--ui-icon-button-size, var(--_size));
-  block-size: var(--ui-icon-button-size, var(--_size));
-  min-inline-size: var(--ui-icon-button-size, var(--_size));
-  min-block-size: var(--ui-icon-button-size, var(--_size));
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="size=lg"]) {
+    --_size: 2.5rem;
+    inline-size: var(--ui-icon-button-size, var(--_size));
+    block-size: var(--ui-icon-button-size, var(--_size));
+    min-inline-size: var(--ui-icon-button-size, var(--_size));
+    min-block-size: var(--ui-icon-button-size, var(--_size));
+  }
+  :scope:where(:scope):is([data-ui-icon-button-state~="matchButton"]) {
+    --_size: var(--ui-control-size-md);
+    block-size: auto;
+    align-self: stretch;
+  }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"] {
-  --_size: 2.5rem;
-  inline-size: var(--ui-icon-button-size, var(--_size));
-  block-size: var(--ui-icon-button-size, var(--_size));
-  min-inline-size: var(--ui-icon-button-size, var(--_size));
-  min-block-size: var(--ui-icon-button-size, var(--_size));
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"]) {
+    --_size: var(--ui-control-size-sm);
+  }
 
-/* A text button's companion uses control geometry; compact icon buttons keep their own density. */
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"] {
-  --_size: var(--ui-control-size-md);
-  block-size: auto;
-  align-self: stretch;
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"]) {
+    --_size: var(--ui-control-size-lg);
+  }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"] {
-  --_size: var(--ui-control-size-sm);
-}
+  @media (pointer: coarse) {
+    :scope:where(:scope):is([data-ui-icon-button-state~="matchButton"]) {
+      inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+      min-inline-size: max(
+        var(--ui-icon-button-size, var(--_size)),
+        var(--ui-control-min-block-size)
+      );
+      min-block-size: max(
+        var(--ui-icon-button-size, var(--_size)),
+        var(--ui-control-min-block-size)
+      );
+    }
+  }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"] {
-  --_size: var(--ui-control-size-lg);
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="round"]) {
+    border-radius: var(--ui-radius-round);
+  }
 
-@media (pointer: coarse) {
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"] {
-    inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
-    min-inline-size: max(
-      var(--ui-icon-button-size, var(--_size)),
-      var(--ui-control-min-block-size)
+  :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"]) {
+    border-color: var(
+      --ui-icon-button-border,
+      var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong)))
     );
-    min-block-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+    background-color: var(
+      --ui-icon-button-outline-surface,
+      var(--_icon-button-outline-surface, var(--ui-surface-default))
+    );
+    background-image: none;
+    color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
+    box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
   }
-}
-
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"] {
-  border-radius: var(--ui-radius-round);
-}
-
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"] {
-  border-color: var(
-    --ui-icon-button-border,
-    var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong)))
-  );
-  background-color: var(
-    --ui-icon-button-outline-surface,
-    var(--_icon-button-outline-surface, var(--ui-surface-default))
-  );
-  background-image: none;
-  color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
-  box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
-}
-
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"] {
-  background-color: var(
-    --ui-icon-button-solid-surface,
-    var(--_icon-button-solid-surface, var(--ui-accent-solid))
-  );
-  background-image: none;
-  color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
-  box-shadow: var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
-}
-
-[data-component~="ui-icon-button"]:hover:enabled:not([aria-disabled="true"]) {
-  /* Derived from the text colour so the ghost hover shows on any background. */
-  background-color: var(
-    --ui-icon-button-hover-surface,
-    color-mix(in srgb, currentColor 8%, transparent)
-  );
-  color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
-}
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
-  border-color: var(
-    --ui-icon-button-hover-border,
-    var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
-  );
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="variant=solid"]) {
+    background-color: var(
+      --ui-icon-button-solid-surface,
+      var(--_icon-button-solid-surface, var(--ui-accent-solid))
+    );
+    background-image: none;
+    color: var(
+      --ui-icon-button-solid-text,
+      var(--_icon-button-solid-text, var(--ui-text-on-accent))
+    );
+    box-shadow: var(
+      --ui-icon-button-solid-shadow,
+      var(--ui-action-shadow, var(--_ui-action-shadow))
+    );
+  }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
-  background-color: var(
-    --ui-icon-button-solid-hover-surface,
-    var(--_icon-button-solid-hover-surface, var(--ui-accent-hover))
-  );
-}
+  :scope:where(:scope):is(:hover:enabled:not([aria-disabled="true"])) {
+    /* Derived from the text colour so the ghost hover shows on any background. */
+    background-color: var(
+      --ui-icon-button-hover-surface,
+      color-mix(in srgb, currentColor 8%, transparent)
+    );
+    color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+  }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]),
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"]) {
-  color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"])) {
+    border-color: var(
+      --ui-icon-button-hover-border,
+      var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
+    );
+  }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
-  background-color: var(
-    --ui-icon-button-active-surface,
-    color-mix(in srgb, currentColor 16%, transparent)
-  );
-  color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
-  box-shadow: var(--ui-pressed);
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"])) {
+    background-color: var(
+      --ui-icon-button-solid-hover-surface,
+      var(--_icon-button-solid-hover-surface, var(--ui-accent-hover))
+    );
+  }
 
-/* Native toggle state persists after pointer release, including during loading. */
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
-  background-color: var(
-    --ui-icon-button-active-surface,
-    color-mix(in srgb, currentColor 12%, var(--ui-surface-default))
-  );
-  background-image: none;
-  box-shadow: var(--ui-pressed);
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"])),
+  :scope:where(:scope):is([data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"])) {
+    color: var(
+      --ui-icon-button-solid-text,
+      var(--_icon-button-solid-text, var(--ui-text-on-accent))
+    );
+  }
 
-[data-component~="ui-icon-button"]:active:enabled:not([aria-disabled="true"]) {
-  scale: var(--ui-icon-button-active-scale, 0.96);
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"])) {
+    background-color: var(
+      --ui-icon-button-active-surface,
+      color-mix(in srgb, currentColor 16%, transparent)
+    );
+    color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+    box-shadow: var(--ui-pressed);
+  }
+  :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled) {
+    background-color: var(
+      --ui-icon-button-active-surface,
+      color-mix(in srgb, currentColor 12%, var(--ui-surface-default))
+    );
+    background-image: none;
+    box-shadow: var(--ui-pressed);
+  }
 
-:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"]) {
-  cursor: progress;
-}
+  :scope:where(:scope):is(:active:enabled:not([aria-disabled="true"])) {
+    scale: var(--ui-icon-button-active-scale, 0.96);
+  }
 
-.content {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
+  :is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"]) {
+    cursor: progress;
+  }
 
-:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"])
   .content {
-  display: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content {
-    transition: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
-}
-
-[data-component~="ui-icon-button"]:focus-visible {
-  outline: none;
-  box-shadow: var(--ui-focus-halo);
-}
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:focus-visible {
-  box-shadow:
-    var(--ui-action-shadow, var(--_ui-action-shadow)),
-    var(--ui-focus-halo);
-}
+  :is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"])
+    .content {
+    display: none;
+  }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:focus-visible {
-  box-shadow:
-    var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
-    var(--ui-focus-halo);
-}
+  @media (prefers-reduced-motion: reduce) {
+    :scope[data-ui-icon-button-state~="anticipatory"] .content {
+      transition: none;
+    }
+  }
 
-[data-component~="ui-icon-button"]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]) {
-  background-image: none;
-  box-shadow: var(--ui-pressed);
-}
+  :scope:where(:scope):is(:focus-visible) {
+    outline: none;
+    box-shadow: var(--ui-focus-halo);
+  }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
-  box-shadow:
-    var(--ui-pressed),
-    var(--ui-focus-halo);
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"]:focus-visible) {
+    box-shadow:
+      var(--ui-action-shadow, var(--_ui-action-shadow)),
+      var(--ui-focus-halo);
+  }
 
-@media (forced-colors: active) {
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
-    outline: var(--ui-focus-width) solid Highlight;
-    outline-offset: calc(-2 * var(--ui-focus-width));
+  :scope:where(:scope):is([data-ui-icon-button-state~="variant=solid"]:focus-visible) {
+    box-shadow:
+      var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+      var(--ui-focus-halo);
   }
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
-    outline-offset: var(--ui-focus-width);
+
+  :scope:where(:scope):is(:is(:scope[data-ui-icon-button-state~="variant=outline"], :scope[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"])) {
+    background-image: none;
+    box-shadow: var(--ui-pressed);
   }
-}
 
-/* Disabled is a flat neutral control, independent of the active variant's tone. */
-[data-component~="ui-icon-button"]:disabled {
-  border-color: var(--ui-disabled-border);
-  background-color: var(--ui-disabled-surface);
-  color: var(--ui-disabled-text);
-  filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
-  opacity: var(--ui-icon-button-disabled-opacity, 1);
-  cursor: not-allowed;
-  box-shadow: none;
-  background-image: none;
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible) {
+    box-shadow:
+      var(--ui-pressed),
+      var(--ui-focus-halo);
+  }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"]:disabled {
-  border-color: transparent;
-}
+  @media (forced-colors: active) {
+    :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled) {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: calc(-2 * var(--ui-focus-width));
+    }
+    :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible) {
+      outline-offset: var(--ui-focus-width);
+    }
+  }
+  :scope:where(:scope):is(:disabled) {
+    border-color: var(--ui-disabled-border);
+    background-color: var(--ui-disabled-surface);
+    color: var(--ui-disabled-text);
+    filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
+    opacity: var(--ui-icon-button-disabled-opacity, 1);
+    cursor: not-allowed;
+    box-shadow: none;
+    background-image: none;
+  }
 
-[data-component~="ui-icon-button"] {
-  --_icon-button-icon-default: var(--ui-icon-size-md);
-  /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
-     defaults, which its own --ui-icon-* hooks still override. */
-  --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
-  --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="variant=ghost"]:disabled) {
+    border-color: transparent;
+  }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"] {
-  --_icon-button-icon-default: var(--ui-icon-size-sm);
-}
+  :scope:where(:scope) {
+    --_icon-button-icon-default: var(--ui-icon-size-md);
+    /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
+       defaults, which its own --ui-icon-* hooks still override. */
+    --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+    --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+  }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"] {
-  --_icon-button-icon-default: var(--ui-icon-size-lg);
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="size=sm"]) {
+    --_icon-button-icon-default: var(--ui-icon-size-sm);
+  }
 
-:slotted(svg) {
-  inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
-  block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
-  flex-shrink: 0;
-  stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
-}
+  :scope:where(:scope):is([data-ui-icon-button-state~="size=lg"]) {
+    --_icon-button-icon-default: var(--ui-icon-size-lg);
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon-button"][hidden] {
-  display: none;
+  :slotted(svg) {
+    inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+    block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+    flex-shrink: 0;
+    stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>