@miaixz/ui 0.5.0

package/dist/runtime/appearance.js

@@ -0,0 +1,123 @@
+import { miaixzThemeColorTokens, parseMiaixzAppearanceSettings, } from "@miaixz/sdk/appearance";
+export { isMiaixzAppearanceSettings, isMiaixzColorMode, isMiaixzDensity, miaixzColorModes, miaixzDarkThemeColors, miaixzDefaultAppearance, miaixzDensities, miaixzLightThemeColors, miaixzThemeColorTokens, parseMiaixzAppearanceSettings, validateMiaixzThemeContrast, } from "@miaixz/sdk/appearance";
+/**
+ * Resolves a color preference to a concrete light or dark mode.
+ *
+ * @param colorMode - Configured light, dark, or system preference.
+ * @param prefersDark - Optional explicit system dark-mode result.
+ * @returns Concrete light or dark mode.
+ * @public
+ */
+export function resolveMiaixzColorMode(colorMode, prefersDark = readSystemDarkPreference()) {
+    return colorMode === "system" ? (prefersDark ? "dark" : "light") : colorMode;
+}
+/**
+ * Validates and atomically applies appearance attributes and custom colors to a DOM target.
+ *
+ * @param appearance - Appearance settings to validate and apply.
+ * @param target - Optional target element, null for resolution without DOM writes.
+ * @param prefersDark - Optional explicit system dark-mode result.
+ * @returns Concrete light or dark mode applied or resolved.
+ * @throws MiaixzSdkError When the appearance syntax, colors, or contrast are invalid.
+ * @public
+ */
+export function applyMiaixzAppearance(appearance, target = typeof document === "undefined" ? null : document.documentElement, prefersDark) {
+    const parsed = parseMiaixzAppearanceSettings(appearance);
+    const resolvedMode = resolveMiaixzColorMode(parsed.colorMode, prefersDark ?? readSystemDarkPreference());
+    if (target === null)
+        return resolvedMode;
+    const attributes = [
+        ["data-miaixz-color-mode", resolvedMode],
+        ["data-miaixz-color-preference", parsed.colorMode],
+        ["data-miaixz-density", parsed.density],
+    ];
+    const previousAttributes = attributes.map(([name]) => [name, target.getAttribute(name)]);
+    const previousColors = miaixzThemeColorTokens.map((token) => {
+        const property = `--miaixz-color-${token}`;
+        return [
+            property,
+            target.style.getPropertyValue(property),
+            target.style.getPropertyPriority(property),
+        ];
+    });
+    try {
+        for (const [name, value] of attributes)
+            target.setAttribute(name, value);
+        for (const token of miaixzThemeColorTokens) {
+            const property = `--miaixz-color-${token}`;
+            const color = parsed.colors?.[token];
+            if (color === undefined)
+                target.style.removeProperty(property);
+            else
+                target.style.setProperty(property, color);
+        }
+    }
+    catch (error) {
+        restoreAppearanceTarget(target, previousAttributes, previousColors);
+        throw error;
+    }
+    return resolvedMode;
+}
+/**
+ * Watches operating-system color preference changes in supported browsers.
+ *
+ * @param listener - Callback invoked with each changed concrete color mode.
+ * @returns An idempotent function that removes the system listener.
+ * @public
+ */
+export function watchMiaixzSystemColorMode(listener) {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return () => undefined;
+    }
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    if (typeof query.addEventListener !== "function" ||
+        typeof query.removeEventListener !== "function") {
+        return () => undefined;
+    }
+    const handleChange = (event) => listener(event.matches ? "dark" : "light");
+    query.addEventListener("change", handleChange);
+    let listening = true;
+    return () => {
+        if (!listening)
+            return;
+        listening = false;
+        query.removeEventListener("change", handleChange);
+    };
+}
+/**
+ * Reads the current system dark-mode preference with an SSR-safe fallback.
+ *
+ * @returns Whether the current browser reports a dark preference.
+ */
+function readSystemDarkPreference() {
+    return (typeof window !== "undefined" &&
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches);
+}
+/**
+ * Restores attributes and custom properties after a failed DOM mutation.
+ *
+ * @param target - Partially modified DOM element.
+ * @param attributes - Attribute names and their original values.
+ * @param colors - CSS custom properties with original values and priorities.
+ */
+function restoreAppearanceTarget(target, attributes, colors) {
+    try {
+        for (const [name, value] of attributes) {
+            if (value === null)
+                target.removeAttribute(name);
+            else
+                target.setAttribute(name, value);
+        }
+        for (const [property, value, priority] of colors) {
+            if (value.length === 0)
+                target.style.removeProperty(property);
+            else
+                target.style.setProperty(property, value, priority);
+        }
+    }
+    catch {
+        // The original DOM mutation error remains the only observable failure.
+    }
+}
+//# sourceMappingURL=appearance.js.map

package/dist/runtime/appearance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../src/runtime/appearance.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  miaixzThemeColorTokens,\n  parseMiaixzAppearanceSettings,\n  type MiaixzAppearanceSettings,\n  type MiaixzColorMode,\n  type MiaixzResolvedColorMode,\n} from \"@miaixz/sdk/appearance\";\n\nexport {\n  isMiaixzAppearanceSettings,\n  isMiaixzColorMode,\n  isMiaixzDensity,\n  miaixzColorModes,\n  miaixzDarkThemeColors,\n  miaixzDefaultAppearance,\n  miaixzDensities,\n  miaixzLightThemeColors,\n  miaixzThemeColorTokens,\n  parseMiaixzAppearanceSettings,\n  validateMiaixzThemeContrast,\n} from \"@miaixz/sdk/appearance\";\nexport type {\n  MiaixzAppearancePayload,\n  MiaixzAppearanceSettings,\n  MiaixzColorMode,\n  MiaixzDensity,\n  MiaixzResolvedColorMode,\n  MiaixzThemeColors,\n  MiaixzThemeColorToken,\n} from \"@miaixz/sdk/appearance\";\n\n/**\n * Resolves a color preference to a concrete light or dark mode.\n *\n * @param colorMode - Configured light, dark, or system preference.\n * @param prefersDark - Optional explicit system dark-mode result.\n * @returns Concrete light or dark mode.\n * @public\n */\nexport function resolveMiaixzColorMode(\n  colorMode: MiaixzColorMode,\n  prefersDark = readSystemDarkPreference(),\n): MiaixzResolvedColorMode {\n  return colorMode === \"system\" ? (prefersDark ? \"dark\" : \"light\") : colorMode;\n}\n\n/**\n * Validates and atomically applies appearance attributes and custom colors to a DOM target.\n *\n * @param appearance - Appearance settings to validate and apply.\n * @param target - Optional target element, null for resolution without DOM writes.\n * @param prefersDark - Optional explicit system dark-mode result.\n * @returns Concrete light or dark mode applied or resolved.\n * @throws MiaixzSdkError When the appearance syntax, colors, or contrast are invalid.\n * @public\n */\nexport function applyMiaixzAppearance(\n  appearance: Readonly<MiaixzAppearanceSettings>,\n  target: HTMLElement | null = typeof document === \"undefined\" ? null : document.documentElement,\n  prefersDark?: boolean,\n): MiaixzResolvedColorMode {\n  const parsed = parseMiaixzAppearanceSettings(appearance);\n  const resolvedMode = resolveMiaixzColorMode(\n    parsed.colorMode,\n    prefersDark ?? readSystemDarkPreference(),\n  );\n  if (target === null) return resolvedMode;\n\n  const attributes = [\n    [\"data-miaixz-color-mode\", resolvedMode],\n    [\"data-miaixz-color-preference\", parsed.colorMode],\n    [\"data-miaixz-density\", parsed.density],\n  ] as const;\n  const previousAttributes = attributes.map(([name]) => [name, target.getAttribute(name)] as const);\n  const previousColors = miaixzThemeColorTokens.map((token) => {\n    const property = `--miaixz-color-${token}`;\n    return [\n      property,\n      target.style.getPropertyValue(property),\n      target.style.getPropertyPriority(property),\n    ] as const;\n  });\n\n  try {\n    for (const [name, value] of attributes) target.setAttribute(name, value);\n    for (const token of miaixzThemeColorTokens) {\n      const property = `--miaixz-color-${token}`;\n      const color = parsed.colors?.[token];\n      if (color === undefined) target.style.removeProperty(property);\n      else target.style.setProperty(property, color);\n    }\n  } catch (error) {\n    restoreAppearanceTarget(target, previousAttributes, previousColors);\n    throw error;\n  }\n\n  return resolvedMode;\n}\n\n/**\n * Watches operating-system color preference changes in supported browsers.\n *\n * @param listener - Callback invoked with each changed concrete color mode.\n * @returns An idempotent function that removes the system listener.\n * @public\n */\nexport function watchMiaixzSystemColorMode(\n  listener: (mode: MiaixzResolvedColorMode) => void,\n): () => void {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return () => undefined;\n  }\n  const query = window.matchMedia(\"(prefers-color-scheme: dark)\");\n  if (\n    typeof query.addEventListener !== \"function\" ||\n    typeof query.removeEventListener !== \"function\"\n  ) {\n    return () => undefined;\n  }\n  const handleChange = (event: MediaQueryListEvent) => listener(event.matches ? \"dark\" : \"light\");\n  query.addEventListener(\"change\", handleChange);\n  let listening = true;\n  return () => {\n    if (!listening) return;\n    listening = false;\n    query.removeEventListener(\"change\", handleChange);\n  };\n}\n\n/**\n * Reads the current system dark-mode preference with an SSR-safe fallback.\n *\n * @returns Whether the current browser reports a dark preference.\n */\nfunction readSystemDarkPreference(): boolean {\n  return (\n    typeof window !== \"undefined\" &&\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  );\n}\n\n/**\n * Restores attributes and custom properties after a failed DOM mutation.\n *\n * @param target - Partially modified DOM element.\n * @param attributes - Attribute names and their original values.\n * @param colors - CSS custom properties with original values and priorities.\n */\nfunction restoreAppearanceTarget(\n  target: HTMLElement,\n  attributes: readonly (readonly [string, string | null])[],\n  colors: readonly (readonly [string, string, string])[],\n): void {\n  try {\n    for (const [name, value] of attributes) {\n      if (value === null) target.removeAttribute(name);\n      else target.setAttribute(name, value);\n    }\n    for (const [property, value, priority] of colors) {\n      if (value.length === 0) target.style.removeProperty(property);\n      else target.style.setProperty(property, value, priority);\n    }\n  } catch {\n    // The original DOM mutation error remains the only observable failure.\n  }\n}\n"]}

package/dist/styles/components/alert.css

@@ -0,0 +1,99 @@
+/**
+ * Miaixz alert component
+ */
+
+:root {
+  --miaixz-alert-padding: var(--miaixz-space-16);
+  --miaixz-alert-gap: var(--miaixz-space-12);
+  --miaixz-alert-status-size: var(--miaixz-border-width-strong);
+}
+
+.miaixz-alert {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--miaixz-alert-gap);
+  align-items: start;
+  padding: var(--miaixz-alert-padding);
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-surface-secondary);
+  border: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-inline-start-width: var(--miaixz-alert-status-size);
+  border-radius: var(--miaixz-radius-panel);
+}
+
+.miaixz-alert-neutral {
+  border-inline-start-color: var(--miaixz-color-border-strong);
+}
+
+.miaixz-alert-info {
+  background: var(--miaixz-color-info-soft);
+  border-inline-start-color: var(--miaixz-color-info);
+}
+
+.miaixz-alert-success {
+  background: var(--miaixz-color-success-soft);
+  border-inline-start-color: var(--miaixz-color-success);
+}
+
+.miaixz-alert-warning {
+  background: var(--miaixz-color-warning-soft);
+  border-inline-start-color: var(--miaixz-color-warning);
+}
+
+.miaixz-alert-danger {
+  background: var(--miaixz-color-danger-soft);
+  border-inline-start-color: var(--miaixz-color-danger);
+}
+
+.miaixz-alert-icon {
+  margin-block-start: var(--miaixz-space-2);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-alert-info > .miaixz-alert-icon {
+  color: var(--miaixz-color-info);
+}
+
+.miaixz-alert-success > .miaixz-alert-icon {
+  color: var(--miaixz-color-success);
+}
+
+.miaixz-alert-warning > .miaixz-alert-icon {
+  color: var(--miaixz-color-warning);
+}
+
+.miaixz-alert-danger > .miaixz-alert-icon {
+  color: var(--miaixz-color-danger);
+}
+
+.miaixz-alert-content {
+  min-width: 0;
+}
+
+.miaixz-alert-title {
+  font-size: var(--miaixz-text-body-size);
+  font-weight: var(--miaixz-font-weight-medium);
+  line-height: var(--miaixz-text-body-line-height);
+}
+
+.miaixz-alert-message {
+  font-size: var(--miaixz-text-body-size);
+  line-height: var(--miaixz-text-body-line-height);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-alert-title + .miaixz-alert-message {
+  margin-block-start: var(--miaixz-space-2);
+}
+
+.miaixz-alert-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--miaixz-control-gap);
+  align-items: center;
+  margin-block-start: var(--miaixz-space-12);
+}
+
+.miaixz-alert-dismiss {
+  align-self: start;
+}

package/dist/styles/components/avatar.css

@@ -0,0 +1,70 @@
+/**
+ * Miaixz avatar component
+ */
+
+:root {
+  --miaixz-avatar-size-small: var(--miaixz-space-24);
+  --miaixz-avatar-size-medium: var(--miaixz-space-32);
+  --miaixz-avatar-size-large: var(--miaixz-space-40);
+}
+
+.miaixz-avatar {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  vertical-align: middle;
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-brand-soft);
+  border: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-radius: var(--miaixz-radius-round);
+}
+
+.miaixz-avatar-small {
+  width: var(--miaixz-avatar-size-small);
+  height: var(--miaixz-avatar-size-small);
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+}
+
+.miaixz-avatar-medium {
+  width: var(--miaixz-avatar-size-medium);
+  height: var(--miaixz-avatar-size-medium);
+  font-size: var(--miaixz-text-body-size);
+  line-height: var(--miaixz-text-body-line-height);
+}
+
+.miaixz-avatar-large {
+  width: var(--miaixz-avatar-size-large);
+  height: var(--miaixz-avatar-size-large);
+  font-size: var(--miaixz-text-section-title-size);
+  line-height: var(--miaixz-text-section-title-line-height);
+}
+
+.miaixz-avatar-image,
+.miaixz-avatar-fallback {
+  width: 100%;
+  height: 100%;
+}
+
+.miaixz-avatar-image {
+  object-fit: cover;
+}
+
+.miaixz-avatar-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--miaixz-font-weight-medium);
+  white-space: nowrap;
+}
+
+@media (forced-colors: active) {
+  .miaixz-avatar {
+    color: CanvasText;
+    background: Canvas;
+    border-color: CanvasText;
+  }
+}

package/dist/styles/components/badge.css

@@ -0,0 +1,101 @@
+/**
+ * Miaixz badge and status component
+ */
+
+:root {
+  --miaixz-badge-height: var(--miaixz-space-24);
+  --miaixz-badge-padding-inline: var(--miaixz-space-8);
+  --miaixz-badge-gap: var(--miaixz-space-4);
+  --miaixz-badge-dot-size: var(--miaixz-space-8);
+}
+
+.miaixz-badge {
+  display: inline-flex;
+  gap: var(--miaixz-badge-gap);
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: var(--miaixz-badge-height);
+  padding-inline: var(--miaixz-badge-padding-inline);
+  font-size: var(--miaixz-text-caption-size);
+  font-weight: var(--miaixz-font-weight-medium);
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-secondary);
+  white-space: nowrap;
+  background: var(--miaixz-color-surface-secondary);
+  border: var(--miaixz-border-width-default) solid transparent;
+  border-radius: var(--miaixz-radius-round);
+}
+
+.miaixz-badge-brand {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-brand-soft);
+}
+
+.miaixz-badge-success {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-success-soft);
+}
+
+.miaixz-badge-warning {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-warning-soft);
+}
+
+.miaixz-badge-danger {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-danger-soft);
+}
+
+.miaixz-badge-info {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-info-soft);
+}
+
+.miaixz-badge-outline {
+  color: var(--miaixz-color-text-secondary);
+  background: transparent;
+  border-color: var(--miaixz-color-border);
+}
+
+.miaixz-badge-dot {
+  flex: none;
+  width: var(--miaixz-badge-dot-size);
+  height: var(--miaixz-badge-dot-size);
+  background: currentcolor;
+  border-radius: var(--miaixz-radius-round);
+}
+
+.miaixz-badge-icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.miaixz-badge-icon > svg {
+  width: var(--miaixz-icon-size-inline);
+  height: var(--miaixz-icon-size-inline);
+}
+
+.miaixz-badge-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.miaixz-badge-success .miaixz-badge-dot {
+  background: var(--miaixz-color-success);
+}
+
+.miaixz-badge-warning .miaixz-badge-dot {
+  background: var(--miaixz-color-warning);
+}
+
+.miaixz-badge-danger .miaixz-badge-dot {
+  background: var(--miaixz-color-danger);
+}
+
+.miaixz-badge-info .miaixz-badge-dot {
+  background: var(--miaixz-color-info);
+}

package/dist/styles/components/breadcrumb.css

@@ -0,0 +1,65 @@
+.miaixz-breadcrumb {
+  min-width: 0;
+}
+
+.miaixz-breadcrumb-list {
+  display: flex;
+  gap: var(--miaixz-space-8);
+  align-items: center;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--miaixz-text-body-size);
+  line-height: var(--miaixz-text-body-line-height);
+  color: var(--miaixz-color-text-secondary);
+  list-style: none;
+}
+
+.miaixz-breadcrumb-item {
+  display: inline-flex;
+  gap: var(--miaixz-space-8);
+  align-items: center;
+  min-width: 0;
+}
+
+.miaixz-breadcrumb-item:not(:last-child)::after {
+  flex: none;
+  color: var(--miaixz-color-text-muted);
+  content: "/";
+}
+
+.miaixz-breadcrumb-link,
+.miaixz-breadcrumb-current {
+  display: inline-flex;
+  gap: var(--miaixz-space-4);
+  align-items: center;
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+}
+
+.miaixz-breadcrumb-link:hover {
+  color: var(--miaixz-color-brand);
+}
+
+.miaixz-breadcrumb-link:focus-visible {
+  outline: var(--miaixz-control-focus-width) solid var(--miaixz-color-focus);
+  outline-offset: var(--miaixz-control-focus-offset);
+  border-radius: var(--miaixz-radius-4);
+}
+
+.miaixz-breadcrumb-current {
+  color: var(--miaixz-color-text-primary);
+}
+
+.miaixz-breadcrumb-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.miaixz-breadcrumb-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/styles/components/button.css

@@ -0,0 +1,136 @@
+/**
+ * Button component
+ */
+
+.miaixz-button {
+  position: relative;
+  font-weight: var(--miaixz-font-weight-regular);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  isolation: isolate;
+}
+
+.miaixz-button:where(:active:not(:disabled, [aria-disabled="true"])) {
+  transform: translateY(1px);
+}
+
+.miaixz-button-primary {
+  color: var(--miaixz-color-on-brand);
+  background: var(--miaixz-color-brand);
+  border-color: var(--miaixz-color-brand);
+}
+
+.miaixz-button-primary:hover:not(:disabled, [aria-disabled="true"]) {
+  background: var(--miaixz-color-brand-hover);
+  border-color: var(--miaixz-color-brand-hover);
+}
+
+.miaixz-button-primary:active:not(:disabled, [aria-disabled="true"]) {
+  background: var(--miaixz-color-brand-active);
+  border-color: var(--miaixz-color-brand-active);
+}
+
+.miaixz-button-secondary:hover:not(:disabled, [aria-disabled="true"]) {
+  background: var(--miaixz-color-surface-hover);
+}
+
+.miaixz-button-ghost {
+  background: transparent;
+  border-color: transparent;
+}
+
+.miaixz-button-ghost:hover:not(:disabled, [aria-disabled="true"]) {
+  background: var(--miaixz-color-surface-hover);
+  border-color: transparent;
+}
+
+.miaixz-button-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.miaixz-button-icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.miaixz-button-icon > svg {
+  width: var(--miaixz-icon-size-control);
+  height: var(--miaixz-icon-size-control);
+}
+
+.miaixz-button-icon-only {
+  width: var(--miaixz-density-control-height);
+  padding-inline: 0;
+}
+
+.miaixz-button-icon-only.miaixz-control-small {
+  width: var(--miaixz-control-height-small);
+}
+
+.miaixz-button-icon-only.miaixz-control-medium {
+  width: var(--miaixz-control-height-medium);
+}
+
+.miaixz-button-icon-only.miaixz-control-large {
+  width: var(--miaixz-control-height-large);
+}
+
+.miaixz-button-outline {
+  color: var(--miaixz-color-text-primary);
+  background: transparent;
+  border-color: var(--miaixz-color-brand);
+}
+
+.miaixz-button-outline:hover:not(:disabled, [aria-disabled="true"]) {
+  background: var(--miaixz-color-brand-soft);
+}
+
+.miaixz-button-outline:active:not(:disabled, [aria-disabled="true"]) {
+  background: var(--miaixz-color-brand-soft-hover);
+}
+
+.miaixz-button-danger {
+  color: var(--miaixz-color-text-inverse);
+  background: var(--miaixz-color-danger);
+  border-color: var(--miaixz-color-danger);
+}
+
+.miaixz-button-danger:hover:not(:disabled, [aria-disabled="true"]) {
+  background: color-mix(in srgb, var(--miaixz-color-danger) 88%, black);
+  border-color: color-mix(in srgb, var(--miaixz-color-danger) 88%, black);
+}
+
+.miaixz-button-danger:active:not(:disabled, [aria-disabled="true"]) {
+  background: color-mix(in srgb, var(--miaixz-color-danger) 78%, black);
+  border-color: color-mix(in srgb, var(--miaixz-color-danger) 78%, black);
+}
+
+.miaixz-button:disabled,
+.miaixz-button[aria-disabled="true"] {
+  color: var(--miaixz-color-text-disabled);
+  background: var(--miaixz-color-surface-secondary);
+  border-color: var(--miaixz-color-border);
+  opacity: 1;
+}
+
+.miaixz-button-spinner {
+  animation: miaixz-button-spin var(--miaixz-motion-overlay-duration) linear infinite;
+}
+
+@keyframes miaixz-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .miaixz-button-spinner {
+    animation: none;
+  }
+}