@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/family/action-control.css

@@ -0,0 +1,493 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* AUTO-GENERATED by build/action-control-recipe.mjs — do not edit. */
+@layer xihan.components {
+  [data-xh-action-control] {
+    --xh-_action-current-highlight: var(--xh-action-highlight-rest, transparent);
+    --xh-_action-variant-bg-rest: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_action-variant-fg-rest: var(--xh-_tone-fg, var(--xh-fg-muted));
+    --xh-_action-variant-border-rest: transparent;
+    --xh-_action-variant-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_action-variant-fg-hover: var(--xh-_tone-fg, var(--xh-fg-muted));
+    --xh-_action-variant-border-hover: transparent;
+    --xh-_action-variant-bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
+    --xh-_action-variant-fg-pressed: var(--xh-_tone-fg, var(--xh-fg-muted));
+    --xh-_action-variant-border-pressed: transparent;
+    --xh-_action-variant-bg-focus-visible: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_action-variant-fg-focus-visible: var(--xh-_tone-fg, var(--xh-fg-muted));
+    --xh-_action-variant-border-focus-visible: transparent;
+    --xh-_action-variant-bg-disabled: var(--xh-bg-subtle);
+    --xh-_action-variant-fg-disabled: var(--xh-fg-disabled);
+    --xh-_action-variant-border-disabled: transparent;
+    --xh-_action-variant-bg-loading: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_action-variant-fg-loading: var(--xh-_tone-fg, var(--xh-fg-muted));
+    --xh-_action-variant-border-loading: transparent;
+
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-action-gap, var(--xh-_action-profile-gap));
+    block-size: var(--xh-action-visual-size, var(--xh-_action-profile-visual-size));
+    min-inline-size: var(--xh-action-min-inline-size, var(--xh-_action-profile-visual-size));
+    padding-inline: var(--xh-action-padding-inline, var(--xh-_action-profile-padding-inline));
+    border: var(--xh-stroke-thin) solid var(--xh-action-border-rest, var(--xh-_action-variant-border-rest));
+    border-radius: var(--xh-action-radius, var(--xh-_action-profile-radius));
+    background-color: var(--xh-action-bg-rest, var(--xh-_action-variant-bg-rest));
+    background-image: linear-gradient(
+      to bottom,
+      var(--xh-_action-current-highlight) 0 var(--xh-stroke-thin),
+      transparent var(--xh-stroke-thin)
+    );
+    color: var(--xh-action-fg-rest, var(--xh-_action-variant-fg-rest));
+    box-shadow: var(--xh-action-shadow-rest, none);
+    font-size: var(--xh-action-font-size, var(--xh-_action-profile-font-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: var(--xh-action-cursor-rest, pointer);
+    opacity: var(--xh-action-opacity-rest, 1);
+    user-select: none;
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
+  }
+
+  @supports (justify-content: safe center) {
+    [data-xh-action-control] {
+      justify-content: safe center;
+    }
+  }
+
+  [data-xh-action-control][data-xh-action-variant='solid'] {
+    --xh-_action-variant-bg-rest: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_action-variant-fg-rest: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-_action-variant-border-rest: transparent;
+    --xh-_action-variant-bg-hover: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
+    --xh-_action-variant-fg-hover: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-_action-variant-border-hover: transparent;
+    --xh-_action-variant-bg-pressed: var(--xh-_tone-active, var(--xh-bg-brand-active));
+    --xh-_action-variant-fg-pressed: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-_action-variant-border-pressed: transparent;
+    --xh-_action-variant-bg-focus-visible: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_action-variant-fg-focus-visible: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-_action-variant-border-focus-visible: transparent;
+    --xh-_action-variant-bg-disabled: var(--xh-bg-subtle);
+    --xh-_action-variant-fg-disabled: var(--xh-fg-disabled);
+    --xh-_action-variant-border-disabled: transparent;
+    --xh-_action-variant-bg-loading: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_action-variant-fg-loading: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-_action-variant-border-loading: transparent;
+  }
+
+  [data-xh-action-control][data-xh-action-variant='subtle'] {
+    --xh-_action-variant-bg-rest: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_action-variant-fg-rest: var(--xh-_tone-fg, var(--xh-fg-muted));
+    --xh-_action-variant-border-rest: transparent;
+    --xh-_action-variant-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_action-variant-fg-hover: var(--xh-_tone-fg, var(--xh-fg-muted));
+    --xh-_action-variant-border-hover: transparent;
+    --xh-_action-variant-bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
+    --xh-_action-variant-fg-pressed: var(--xh-_tone-fg, var(--xh-fg-muted));
+    --xh-_action-variant-border-pressed: transparent;
+    --xh-_action-variant-bg-focus-visible: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_action-variant-fg-focus-visible: var(--xh-_tone-fg, var(--xh-fg-muted));
+    --xh-_action-variant-border-focus-visible: transparent;
+    --xh-_action-variant-bg-disabled: var(--xh-bg-subtle);
+    --xh-_action-variant-fg-disabled: var(--xh-fg-disabled);
+    --xh-_action-variant-border-disabled: transparent;
+    --xh-_action-variant-bg-loading: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_action-variant-fg-loading: var(--xh-_tone-fg, var(--xh-fg-muted));
+    --xh-_action-variant-border-loading: transparent;
+  }
+
+  [data-xh-action-control][data-xh-action-variant='outline'] {
+    --xh-_action-variant-bg-rest: var(--xh-_tone-subtle, transparent);
+    --xh-_action-variant-fg-rest: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-border-rest: var(--xh-_tone-border-control, var(--xh-border-control));
+    --xh-_action-variant-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-action-host-bg-hover, var(--xh-bg-subtle)));
+    --xh-_action-variant-fg-hover: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-border-hover: var(--xh-_tone-border-control, var(--xh-border-control-hover));
+    --xh-_action-variant-bg-pressed: var(--xh-_tone-subtle-active, var(--xh-action-host-bg-pressed, var(--xh-bg-subtle-hover)));
+    --xh-_action-variant-fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-border-pressed: var(--xh-_tone-border-control, var(--xh-border-control-hover));
+    --xh-_action-variant-bg-focus-visible: var(--xh-_tone-subtle, transparent);
+    --xh-_action-variant-fg-focus-visible: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-border-focus-visible: var(--xh-_tone-border-control, var(--xh-border-control));
+    --xh-_action-variant-bg-disabled: transparent;
+    --xh-_action-variant-fg-disabled: var(--xh-fg-disabled);
+    --xh-_action-variant-border-disabled: var(--xh-border-default);
+    --xh-_action-variant-bg-loading: var(--xh-_tone-subtle, transparent);
+    --xh-_action-variant-fg-loading: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-border-loading: var(--xh-_tone-border-control, var(--xh-border-control));
+  }
+
+  [data-xh-action-control][data-xh-action-variant='ghost'] {
+    --xh-_action-variant-bg-rest: transparent;
+    --xh-_action-variant-fg-rest: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-border-rest: transparent;
+    --xh-_action-variant-bg-hover: var(--xh-_tone-subtle, var(--xh-action-host-bg-hover, var(--xh-bg-subtle)));
+    --xh-_action-variant-fg-hover: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-border-hover: transparent;
+    --xh-_action-variant-bg-pressed: var(--xh-_tone-subtle-hover, var(--xh-action-host-bg-pressed, var(--xh-bg-subtle-hover)));
+    --xh-_action-variant-fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-border-pressed: transparent;
+    --xh-_action-variant-bg-focus-visible: transparent;
+    --xh-_action-variant-fg-focus-visible: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-border-focus-visible: transparent;
+    --xh-_action-variant-bg-disabled: transparent;
+    --xh-_action-variant-fg-disabled: var(--xh-fg-disabled);
+    --xh-_action-variant-border-disabled: transparent;
+    --xh-_action-variant-bg-loading: transparent;
+    --xh-_action-variant-fg-loading: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-border-loading: transparent;
+  }
+
+  :is([data-theme='dark'] *, [data-theme='dark'])[data-xh-action-control][data-xh-action-variant='solid']:is(:not([data-tone]), [data-tone='brand']) {
+    --xh-_action-variant-bg-rest: var(--xh-action-brand-solid);
+    --xh-_action-variant-bg-hover: var(--xh-action-brand-solid-hover);
+    --xh-_action-variant-bg-pressed: var(--xh-action-brand-solid-active);
+    --xh-_action-variant-bg-focus-visible: var(--xh-action-brand-solid);
+    --xh-_action-variant-bg-loading: var(--xh-action-brand-solid);
+    --xh-_action-variant-fg-rest: var(--xh-action-on-brand-solid);
+    --xh-_action-variant-fg-hover: var(--xh-action-on-brand-solid);
+    --xh-_action-variant-fg-pressed: var(--xh-action-on-brand-solid);
+    --xh-_action-variant-fg-focus-visible: var(--xh-action-on-brand-solid);
+    --xh-_action-variant-fg-loading: var(--xh-action-on-brand-solid);
+  }
+
+  [data-xh-action-control][data-xh-ink-surface] {
+    --xh-ink-surface: var(--xh-action-bg-rest, var(--xh-_action-variant-bg-rest));
+  }
+
+  [data-xh-action-control][data-xh-ink-surface][data-disabled] {
+    --xh-ink-surface: var(--xh-action-bg-disabled, var(--xh-bg-subtle-opaque));
+  }
+
+  [data-xh-action-control][data-xh-action-size='xs'] {
+    --xh-_action-profile-visual-size: var(--xh-control-action-size);
+    --xh-_action-profile-padding-inline: var(--xh-space-1);
+    --xh-_action-profile-padding-block: 0;
+    --xh-_action-profile-gap: var(--xh-space-1);
+    --xh-_action-profile-glyph-size: var(--xh-glyph-size-sm);
+    --xh-_action-profile-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-xh-action-control][data-xh-action-size='sm'] {
+    --xh-_action-profile-visual-size: var(--xh-control-h-sm);
+    --xh-_action-profile-padding-inline: var(--xh-space-3);
+    --xh-_action-profile-padding-block: 0;
+    --xh-_action-profile-gap: var(--xh-control-gap-sm);
+    --xh-_action-profile-glyph-size: var(--xh-glyph-size-sm);
+    --xh-_action-profile-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-xh-action-control][data-xh-action-size='md'] {
+    --xh-_action-profile-visual-size: var(--xh-control-h-md);
+    --xh-_action-profile-padding-inline: var(--xh-space-4);
+    --xh-_action-profile-padding-block: 0;
+    --xh-_action-profile-gap: var(--xh-control-gap-md);
+    --xh-_action-profile-glyph-size: var(--xh-glyph-size-md);
+    --xh-_action-profile-font-size: var(--xh-control-font-md);
+  }
+
+  [data-xh-action-control][data-xh-action-size='lg'] {
+    --xh-_action-profile-visual-size: var(--xh-control-h-lg);
+    --xh-_action-profile-padding-inline: var(--xh-space-5);
+    --xh-_action-profile-padding-block: 0;
+    --xh-_action-profile-gap: var(--xh-control-gap-lg);
+    --xh-_action-profile-glyph-size: var(--xh-glyph-size-lg);
+    --xh-_action-profile-font-size: var(--xh-control-font-lg);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='text'] {
+    --xh-_action-profile-radius: var(--xh-shape-control);
+    --xh-_action-profile-padding-block: 0;
+  }
+
+  [data-xh-action-control][data-xh-action-profile='icon'] {
+    --xh-_action-profile-radius: var(--xh-shape-control);
+    --xh-_action-profile-padding-inline: 0;
+    --xh-_action-profile-padding-block: 0;
+    --xh-_action-profile-gap: 0;
+    flex: none;
+    inline-size: var(--xh-action-visual-size, var(--xh-_action-profile-visual-size));
+  }
+
+  [data-xh-action-control][data-xh-action-profile='field-inset'] {
+    --xh-_action-profile-radius: var(--xh-shape-inset);
+    --xh-_action-profile-padding-inline: 0;
+    --xh-_action-profile-padding-block: 0;
+    --xh-_action-profile-gap: 0;
+    flex: none;
+    inline-size: var(--xh-action-visual-size, var(--xh-_action-profile-visual-size));
+  }
+
+  [data-xh-action-control][data-xh-action-profile='field-inset'][data-xh-action-size='xs'] {
+    --xh-_action-profile-glyph-size: var(--xh-control-indicator-sm);
+    --xh-_action-profile-font-size: var(--xh-control-caption-sm);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='field-inset'][data-xh-action-size='sm'] {
+    --xh-_action-profile-visual-size: var(--xh-control-action-size);
+    --xh-_action-profile-glyph-size: var(--xh-control-indicator-sm);
+    --xh-_action-profile-font-size: var(--xh-control-caption-sm);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='field-inset'][data-xh-action-size='md'] {
+    --xh-_action-profile-visual-size: var(--xh-control-h-sm);
+    --xh-_action-profile-glyph-size: var(--xh-control-indicator-sm);
+    --xh-_action-profile-font-size: var(--xh-control-caption-md);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='field-inset'][data-xh-action-size='lg'] {
+    --xh-_action-profile-visual-size: var(--xh-control-h-md);
+    --xh-_action-profile-glyph-size: var(--xh-control-indicator-md);
+    --xh-_action-profile-font-size: var(--xh-control-caption-lg);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='floating'] {
+    --xh-_action-profile-radius: var(--xh-shape-circle);
+    --xh-_action-profile-padding-inline: 0;
+    --xh-_action-profile-padding-block: 0;
+    --xh-_action-profile-gap: 0;
+    flex: none;
+    inline-size: var(--xh-action-visual-size, var(--xh-_action-profile-visual-size));
+  }
+
+  [data-xh-action-control][data-xh-action-profile='floating'][data-xh-action-size='sm'] {
+    --xh-_action-profile-visual-size: var(--xh-control-box-sm);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='floating'][data-xh-action-size='md'] {
+    --xh-_action-profile-visual-size: var(--xh-control-box-md);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='floating'][data-xh-action-size='lg'] {
+    --xh-_action-profile-visual-size: var(--xh-control-box-lg);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='row'] {
+    --xh-_action-profile-radius: var(--xh-shape-control);
+    display: flex;
+    justify-content: start;
+    inline-size: 100%;
+    block-size: auto;
+    min-block-size: var(--xh-action-visual-size, var(--xh-_action-profile-visual-size));
+    padding-block: var(--xh-action-padding-block, var(--xh-_action-profile-padding-block));
+    white-space: normal;
+    text-align: start;
+  }
+
+  [data-xh-action-control][data-xh-action-profile='row'][data-xh-action-size='xs'] {
+    --xh-_action-profile-padding-block: var(--xh-list-option-py-sm);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='row'][data-xh-action-size='sm'] {
+    --xh-_action-profile-padding-inline: var(--xh-control-px-sm);
+    --xh-_action-profile-padding-block: var(--xh-list-option-py-sm);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='row'][data-xh-action-size='md'] {
+    --xh-_action-profile-padding-inline: var(--xh-control-px-md);
+    --xh-_action-profile-padding-block: var(--xh-list-option-py-md);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='row'][data-xh-action-size='lg'] {
+    --xh-_action-profile-padding-inline: var(--xh-control-px-lg);
+    --xh-_action-profile-padding-block: var(--xh-list-option-py-lg);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='disclosure-trigger'] {
+    --xh-_action-profile-radius: var(--xh-shape-control);
+    display: flex;
+    justify-content: space-between;
+    inline-size: 100%;
+    block-size: auto;
+    min-block-size: var(--xh-action-visual-size, var(--xh-_action-profile-visual-size));
+    padding-block: var(--xh-action-padding-block, var(--xh-_action-profile-padding-block));
+    white-space: normal;
+    text-align: start;
+  }
+
+  [data-xh-action-control][data-xh-action-profile='disclosure-trigger'][data-xh-action-size='xs'] {
+    --xh-_action-profile-padding-inline: var(--xh-space-2);
+    --xh-_action-profile-padding-block: var(--xh-space-2);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='disclosure-trigger'][data-xh-action-size='sm'] {
+    --xh-_action-profile-padding-block: var(--xh-space-3);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='disclosure-trigger'][data-xh-action-size='md'] {
+    --xh-_action-profile-padding-block: var(--xh-space-4);
+  }
+
+  [data-xh-action-control][data-xh-action-profile='disclosure-trigger'][data-xh-action-size='lg'] {
+    --xh-_action-profile-padding-block: var(--xh-space-5);
+  }
+
+  [data-xh-action-control]:focus-visible {
+    background-color: var(--xh-action-bg-focus-visible, var(--xh-_action-variant-bg-focus-visible));
+    color: var(--xh-action-fg-focus-visible, var(--xh-_action-variant-fg-focus-visible));
+    border-color: var(--xh-action-border-focus-visible, var(--xh-_action-variant-border-focus-visible));
+    --xh-_action-current-highlight: var(--xh-action-highlight-focus-visible, transparent);
+    box-shadow: var(--xh-action-shadow-focus-visible, none);
+    opacity: var(--xh-action-opacity-focus-visible, 1);
+    cursor: var(--xh-action-cursor-focus-visible, pointer);
+    scale: var(--xh-action-scale-focus-visible, none);
+    --xh-_ring-color: var(--xh-action-ring-color-focus-visible, var(--xh-ring-focus));
+  }
+
+  [data-xh-action-control]:not([data-disabled]):not([data-loading]):hover {
+    background-color: var(--xh-action-bg-hover, var(--xh-_action-variant-bg-hover));
+    color: var(--xh-action-fg-hover, var(--xh-_action-variant-fg-hover));
+    border-color: var(--xh-action-border-hover, var(--xh-_action-variant-border-hover));
+    --xh-_action-current-highlight: var(--xh-action-highlight-hover, transparent);
+    box-shadow: var(--xh-action-shadow-hover, none);
+    opacity: var(--xh-action-opacity-hover, 1);
+    cursor: var(--xh-action-cursor-hover, pointer);
+    scale: var(--xh-action-scale-hover, none);
+  }
+
+  [data-xh-action-control]:not([data-disabled]):not([data-loading]):is(:active, [data-pressed]) {
+    background-color: var(--xh-action-bg-pressed, var(--xh-_action-variant-bg-pressed));
+    color: var(--xh-action-fg-pressed, var(--xh-_action-variant-fg-pressed));
+    border-color: var(--xh-action-border-pressed, var(--xh-_action-variant-border-pressed));
+    --xh-_action-current-highlight: var(--xh-action-highlight-pressed, transparent);
+    box-shadow: var(--xh-action-shadow-pressed, none);
+    opacity: var(--xh-action-opacity-pressed, 1);
+    cursor: var(--xh-action-cursor-pressed, pointer);
+    scale: var(--xh-action-scale-pressed, var(--xh-motion-scale-press));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  [data-xh-action-control]:is([data-xh-action-profile='row'], [data-xh-action-profile='disclosure-trigger']):not([data-disabled]):not([data-loading]):is(:active, [data-pressed]) {
+    scale: none;
+  }
+
+  [data-xh-action-control][data-disabled] {
+    background-color: var(--xh-action-bg-disabled, var(--xh-_action-variant-bg-disabled));
+    color: var(--xh-action-fg-disabled, var(--xh-_action-variant-fg-disabled));
+    border-color: var(--xh-action-border-disabled, var(--xh-_action-variant-border-disabled));
+    --xh-_action-current-highlight: var(--xh-action-highlight-disabled, transparent);
+    box-shadow: var(--xh-action-shadow-disabled, none);
+    opacity: var(--xh-action-opacity-disabled, 1);
+    cursor: var(--xh-action-cursor-disabled, not-allowed);
+    scale: var(--xh-action-scale-disabled, none);
+  }
+
+  [data-xh-action-control][data-loading][aria-disabled='true'] {
+    background-color: var(--xh-action-bg-loading, var(--xh-_action-variant-bg-loading));
+    color: var(--xh-action-fg-loading, var(--xh-_action-variant-fg-loading));
+    border-color: var(--xh-action-border-loading, var(--xh-_action-variant-border-loading));
+    --xh-_action-current-highlight: var(--xh-action-highlight-loading, transparent);
+    box-shadow: var(--xh-action-shadow-loading, none);
+    opacity: var(--xh-action-opacity-loading, 1);
+    cursor: var(--xh-action-cursor-loading, progress);
+    scale: var(--xh-action-scale-loading, none);
+  }
+
+  [data-xh-action-control][data-xh-action-display='always'] {
+    visibility: visible;
+  }
+
+  [data-xh-action-control][data-xh-action-display='has-value']:not([data-xh-action-has-value]) {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  [data-xh-action-control][data-xh-action-display='has-value'][data-xh-action-has-value] {
+    visibility: visible;
+  }
+
+  [data-xh-action-control][data-xh-action-display='hover-focus'] {
+    visibility: visible;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    [data-xh-action-control][data-xh-action-display='hover-focus'] {
+      visibility: hidden;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    :where([data-xh-action-owner]:hover, [data-xh-action-owner]:focus-within) [data-xh-action-control][data-xh-action-display='hover-focus'],
+    [data-xh-action-control][data-xh-action-display='hover-focus']:focus-visible {
+      visibility: visible;
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  @media (pointer: coarse) {
+    :where([data-xh-action-control]:is([data-xh-action-profile='text'], [data-xh-action-profile='row'], [data-xh-action-profile='disclosure-trigger']))::after {
+      content: '';
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      min-block-size: 44px;
+      inline-size: 100%;
+      block-size: 100%;
+      translate: -50% -50%;
+    }
+    :where([data-xh-action-control]:is([data-xh-action-profile='icon'], [data-xh-action-profile='field-inset'], [data-xh-action-profile='floating']))::after {
+      content: '';
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      min-inline-size: 44px;
+      min-block-size: 44px;
+      inline-size: 100%;
+      block-size: 100%;
+      translate: -50% -50%;
+    }
+    :where([data-xh-action-control]:dir(rtl))::after {
+      translate: 50% -50%;
+    }
+  }
+
+  @media (forced-colors: active) {
+    [data-xh-action-control] {
+      background-color: ButtonFace;
+      color: ButtonText;
+      border-color: ButtonText;
+      background-image: none;
+      box-shadow: none;
+      opacity: 1;
+    }
+
+    [data-xh-action-control]:focus-visible {
+      outline-color: Highlight;
+    }
+
+    [data-xh-action-control]:not([data-disabled]):not([data-loading]):hover {
+      background-color: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+
+    [data-xh-action-control]:not([data-disabled]):not([data-loading]):is(:active, [data-pressed]) {
+      background-color: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+
+    [data-xh-action-control][data-disabled] {
+      color: GrayText;
+      border-color: GrayText;
+    }
+
+    [data-xh-action-control][data-loading][aria-disabled='true'] {
+      border-style: dashed;
+    }
+  }
+}