@neo-ui-kit/react 0.0.0-stage → 1.0.1

package/dist/components/controls/shared.css

@@ -0,0 +1,694 @@
+/* Shared control sizing + canonical premium button system. */
+/* One size scale for every control; data-ad-size picks a step. */
+:is(
+  .ad-button,
+  .ad-icon-button,
+  .ad-toggle-button,
+  .ad-split-button,
+  .ad-input-base,
+  .ad-text-field-shell,
+  .ad-text-area,
+  .ad-number-field,
+  .ad-select,
+  .ad-switch,
+  .ad-checkbox,
+  .ad-slider,
+  .ad-file-picker,
+  .ad-tabs,
+  .ad-tab,
+  .ad-segmented-control
+) {
+  --ad-size-h: var(--ad-control-height);
+  --ad-size-font: 0.8125rem;
+  --ad-size-radius: var(--ad-radius);
+  --ad-size-pad-x: 0.6875rem;
+  --ad-size-gap: 0.625rem;
+}
+:is(
+  .ad-button,
+  .ad-icon-button,
+  .ad-toggle-button,
+  .ad-split-button,
+  .ad-input-base,
+  .ad-text-field-shell,
+  .ad-text-area,
+  .ad-number-field,
+  .ad-select,
+  .ad-switch,
+  .ad-checkbox,
+  .ad-slider,
+  .ad-file-picker,
+  .ad-tabs,
+  .ad-tab,
+  .ad-segmented-control
+)[data-ad-size="xs"] {
+  --ad-size-h: 1.8rem;
+  --ad-size-font: 0.6875rem;
+  --ad-size-radius: 0.52rem;
+  --ad-size-pad-x: 0.52rem;
+  --ad-size-gap: 0.42rem;
+}
+:is(
+  .ad-button,
+  .ad-icon-button,
+  .ad-toggle-button,
+  .ad-split-button,
+  .ad-input-base,
+  .ad-text-field-shell,
+  .ad-text-area,
+  .ad-number-field,
+  .ad-select,
+  .ad-switch,
+  .ad-checkbox,
+  .ad-slider,
+  .ad-file-picker,
+  .ad-tabs,
+  .ad-tab,
+  .ad-segmented-control
+)[data-ad-size="sm"] {
+  --ad-size-h: 2.15rem;
+  --ad-size-font: 0.75rem;
+  --ad-size-radius: 0.64rem;
+  --ad-size-pad-x: 0.64rem;
+  --ad-size-gap: 0.5rem;
+}
+:is(
+  .ad-button,
+  .ad-icon-button,
+  .ad-toggle-button,
+  .ad-split-button,
+  .ad-input-base,
+  .ad-text-field-shell,
+  .ad-text-area,
+  .ad-number-field,
+  .ad-select,
+  .ad-switch,
+  .ad-checkbox,
+  .ad-slider,
+  .ad-file-picker,
+  .ad-tabs,
+  .ad-tab,
+  .ad-segmented-control
+)[data-ad-size="md"] {
+  --ad-size-h: 2.65rem;
+  --ad-size-font: 0.825rem;
+  --ad-size-radius: 0.78rem;
+  --ad-size-pad-x: 0.76rem;
+  --ad-size-gap: 0.6rem;
+}
+:is(
+  .ad-button,
+  .ad-icon-button,
+  .ad-toggle-button,
+  .ad-split-button,
+  .ad-input-base,
+  .ad-text-field-shell,
+  .ad-text-area,
+  .ad-number-field,
+  .ad-select,
+  .ad-switch,
+  .ad-checkbox,
+  .ad-slider,
+  .ad-file-picker,
+  .ad-tabs,
+  .ad-tab,
+  .ad-segmented-control
+)[data-ad-size="lg"] {
+  --ad-size-h: 3.08rem;
+  --ad-size-font: 0.94rem;
+  --ad-size-radius: 0.9rem;
+  --ad-size-pad-x: 0.95rem;
+  --ad-size-gap: 0.72rem;
+}
+
+@keyframes ad-btn-breathe {
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes ad-btn-sheen {
+  0%,
+  60% {
+    transform: translateX(-190%) rotate(14deg);
+    opacity: 0;
+  }
+  68% {
+    opacity: 0.18;
+  }
+  76% {
+    opacity: 0.85;
+  }
+  92%,
+  100% {
+    transform: translateX(255%) rotate(14deg);
+    opacity: 0;
+  }
+}
+
+/* Shared visual contract. */
+.ad-button,
+.ad-icon-button,
+.ad-toggle-button {
+  /* Pill buttons, as in music players. */
+  --ad-btn-radius: 999rem;
+  --ad-btn-bg-top: var(--ad-neutral-700);
+  --ad-btn-bg-mid: var(--ad-neutral-850);
+  --ad-btn-bg-bottom: var(--ad-neutral-900);
+  --ad-btn-border-a: rgb(from var(--ad-secondary-100) r g b / 0.65);
+  --ad-btn-border-b: rgb(from var(--ad-primary-600) r g b / 0.43);
+  --ad-btn-edge: rgb(from var(--ad-secondary) r g b / 0.21);
+  --ad-btn-glow: rgb(from var(--ad-primary) r g b / 0.16);
+  --ad-btn-inner: #ffffff3d;
+  --ad-btn-bottom: #000a;
+  --ad-button-x: 50%;
+  --ad-button-y: 20%;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  height: var(--ad-size-h);
+  gap: var(--ad-size-gap);
+  padding-inline: calc(var(--ad-size-pad-x) * 1.55);
+  border: 0.0625rem solid transparent;
+  border-radius: var(--ad-btn-radius);
+  color: var(--ad-neutral-200);
+  font-size: var(--ad-size-font);
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  white-space: nowrap;
+  background:
+    linear-gradient(
+        180deg,
+        var(--ad-btn-bg-top),
+        var(--ad-btn-bg-mid) 58%,
+        var(--ad-btn-bg-bottom)
+      )
+      padding-box,
+    linear-gradient(
+        135deg,
+        var(--ad-btn-border-a),
+        #ffffff18 18%,
+        var(--ad-btn-border-b) 56%,
+        rgb(from var(--ad-primary-800) r g b / 0.31) 100%
+      )
+      border-box;
+  box-shadow:
+    inset 0 0.08rem 0.15rem var(--ad-btn-inner),
+    inset 0 -0.48rem 0.95rem var(--ad-btn-bottom),
+    inset 0 0 0 0.03125rem #ffffff09,
+    0 0.42rem 1rem #0009,
+    0 0 1rem var(--ad-btn-glow);
+  isolation: isolate;
+  overflow: hidden;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    transform 0.22s cubic-bezier(0.2, 0.78, 0.24, 1),
+    filter 0.22s,
+    box-shadow 0.22s,
+    border-color 0.22s,
+    opacity 0.22s;
+}
+.ad-button::before,
+.ad-icon-button::before,
+.ad-toggle-button::before {
+  content: "";
+  position: absolute;
+  inset: 0.0625rem;
+  z-index: -1;
+  border-radius: calc(var(--ad-btn-radius) - 0.0625rem);
+  pointer-events: none;
+  background:
+    radial-gradient(
+      70% 105% at var(--ad-button-x) var(--ad-button-y),
+      #ffffff3f 0%,
+      rgb(from var(--ad-neutral-200) r g b / 0.14) 24%,
+      rgb(from var(--ad-secondary-200) r g b / 0.08) 48%,
+      transparent 72%
+    ),
+    linear-gradient(180deg, #ffffff2f 0%, #ffffff10 18%, transparent 36%),
+    linear-gradient(180deg, #ffffff12 0%, transparent 24%, transparent 100%),
+    radial-gradient(88% 48% at 50% 112%, var(--ad-btn-edge) 0%, transparent 74%);
+  opacity: 0.96;
+  transition:
+    opacity 0.22s,
+    filter 0.22s;
+}
+.ad-button::after,
+.ad-icon-button::after,
+.ad-toggle-button::after {
+  content: "";
+  position: absolute;
+  top: -72%;
+  bottom: -72%;
+  left: -18%;
+  width: 34%;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgb(from var(--ad-neutral-200) r g b / 0.08) 18%,
+    #fffefecf 48%,
+    rgb(from var(--ad-secondary-100) r g b / 0.3) 62%,
+    transparent 80%
+  );
+  filter: blur(0.08rem);
+  transform: translateX(-190%) rotate(14deg);
+  opacity: 0;
+}
+.ad-button:hover:not(:disabled),
+.ad-icon-button:hover:not(:disabled),
+.ad-toggle-button:hover:not(:disabled) {
+  transform: translateY(-0.09rem);
+  filter: brightness(1.07) saturate(1.08);
+  box-shadow:
+    inset 0 0.09rem 0.18rem #ffffff61,
+    inset 0 -0.54rem 1.05rem var(--ad-btn-bottom),
+    inset 0 0 0 0.03125rem #ffffff14,
+    0 0.58rem 1.15rem #000a,
+    0 0 1.35rem color-mix(in srgb, var(--ad-btn-glow) 92%, transparent);
+}
+.ad-button:hover:not(:disabled)::before,
+.ad-icon-button:hover:not(:disabled)::before,
+.ad-toggle-button:hover:not(:disabled)::before {
+  opacity: 1;
+  filter: brightness(1.04);
+}
+.ad-button:hover:not(:disabled)::after,
+.ad-icon-button:hover:not(:disabled)::after,
+.ad-toggle-button:hover:not(:disabled)::after {
+  animation: ad-btn-sheen 1.05s ease-out 1;
+}
+.ad-button:active:not(:disabled),
+.ad-icon-button:active:not(:disabled),
+.ad-toggle-button:active:not(:disabled) {
+  transform: translateY(0.03rem) scale(0.987);
+  filter: brightness(0.96);
+  box-shadow:
+    inset 0 0.26rem 0.64rem #000b,
+    inset 0 0 0.4rem var(--ad-btn-edge),
+    0 0.1rem 0.24rem #0008;
+}
+.ad-button:focus-visible,
+.ad-icon-button:focus-visible,
+.ad-toggle-button:focus-visible {
+  outline: 0.125rem solid var(--ad-neutral-200);
+  outline-offset: 0.18rem;
+}
+
+/* Semantic variants: one source for Button, IconButton, SplitButton and ToggleButton. */
+.ad-button[data-ad-variant="primary"],
+.ad-icon-button[data-ad-variant="primary"],
+.ad-split-button[data-ad-variant="primary"],
+.ad-toggle-button[aria-pressed="true"] {
+  --ad-btn-bg-top: var(--ad-primary);
+  --ad-btn-bg-mid: var(--ad-primary-600);
+  --ad-btn-bg-bottom: var(--ad-primary-900);
+  --ad-btn-border-a: var(--ad-neutral-200);
+  --ad-btn-border-b: rgb(from var(--ad-secondary) r g b / 0.86);
+  --ad-btn-edge: rgb(from var(--ad-primary) r g b / 0.44);
+  --ad-btn-glow: rgb(from var(--ad-primary) r g b / 0.42);
+  --ad-btn-inner: #fffafca3;
+  --ad-btn-bottom: rgb(from var(--ad-primary-800) r g b / 0.42);
+  color: var(--ad-on-accent);
+}
+.ad-button[data-ad-variant="primary"]::after,
+.ad-icon-button[data-ad-variant="primary"]::after,
+.ad-toggle-button[aria-pressed="true"]::after {
+  animation: ad-btn-sheen 4.6s ease-in-out infinite;
+}
+
+.ad-button[data-ad-variant="secondary"],
+.ad-icon-button[data-ad-variant="secondary"],
+.ad-split-button[data-ad-variant="secondary"],
+.ad-toggle-button[aria-pressed="false"] {
+  --ad-btn-bg-top: var(--ad-neutral-700);
+  --ad-btn-bg-mid: var(--ad-neutral-850);
+  --ad-btn-bg-bottom: var(--ad-neutral-900);
+  --ad-btn-border-a: rgb(from var(--ad-neutral-300) r g b / 0.66);
+  --ad-btn-border-b: rgb(from var(--ad-neutral-600) r g b / 0.36);
+  --ad-btn-edge: rgb(from var(--ad-secondary) r g b / 0.17);
+  --ad-btn-glow: rgb(from var(--ad-primary) r g b / 0.11);
+  --ad-btn-inner: #ffffff35;
+  --ad-btn-bottom: #000a;
+}
+
+.ad-button[data-ad-variant="ghost"],
+.ad-icon-button[data-ad-variant="ghost"],
+.ad-split-button[data-ad-variant="ghost"] {
+  --ad-btn-bg-top: #ffffff05;
+  --ad-btn-bg-mid: #ffffff02;
+  --ad-btn-bg-bottom: #0000000b;
+  --ad-btn-border-a: rgb(from var(--ad-secondary-200) r g b / 0.18);
+  --ad-btn-border-b: rgb(from var(--ad-primary-600) r g b / 0.13);
+  --ad-btn-edge: rgb(from var(--ad-secondary-200) r g b / 0.05);
+  --ad-btn-glow: transparent;
+  --ad-btn-inner: #ffffff08;
+  --ad-btn-bottom: #00000018;
+  color: var(--ad-neutral-300);
+}
+
+.ad-button[data-ad-variant="danger"],
+.ad-icon-button[data-ad-variant="danger"],
+.ad-split-button[data-ad-variant="danger"] {
+  --ad-btn-bg-top: var(--ad-primary-600);
+  --ad-btn-bg-mid: var(--ad-primary-800);
+  --ad-btn-bg-bottom: var(--ad-primary-900);
+  --ad-btn-border-a: rgb(from var(--ad-secondary-200) r g b / 0.83);
+  --ad-btn-border-b: rgb(from var(--ad-primary) r g b / 0.43);
+  --ad-btn-edge: rgb(from var(--ad-primary) r g b / 0.3);
+  --ad-btn-glow: rgb(from var(--ad-primary-600) r g b / 0.22);
+  --ad-btn-inner: rgb(from var(--ad-secondary-100) r g b / 0.37);
+  --ad-btn-bottom: rgb(from var(--ad-primary-900) r g b / 0.47);
+  color: var(--ad-on-accent);
+}
+.ad-button:disabled,
+.ad-icon-button:disabled,
+.ad-toggle-button:disabled {
+  opacity: 0.42;
+  filter: saturate(0.2) brightness(0.88);
+  cursor: not-allowed;
+  animation: none;
+  transform: none;
+}
+.ad-button:disabled::after,
+.ad-icon-button:disabled::after,
+.ad-toggle-button:disabled::after {
+  display: none;
+}
+
+.ad-button > .ad-icon,
+.ad-toggle-button > .ad-icon {
+  --ad-icon-size: calc(var(--ad-size-font) * 1.45);
+  flex: 0 0 auto;
+  filter: drop-shadow(0 0 0.24rem rgb(from var(--ad-secondary-100) r g b / 0.42));
+}
+.ad-button-label {
+  display: block;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ad-button > .ad-spinner {
+  flex: 0 0 auto;
+}
+
+.ad-icon-button {
+  aspect-ratio: 1/1;
+  width: var(--ad-size-h);
+  min-width: var(--ad-size-h);
+  padding: 0;
+  border-radius: var(--ad-btn-radius);
+}
+.ad-icon-button[data-ad-round],
+.ad-button[data-ad-round] {
+  width: var(--ad-size-h);
+  height: var(--ad-size-h);
+  padding: 0;
+  border-radius: 50%;
+}
+/* Icons scale with the control: text buttons follow the font, icon-only buttons the height. */
+.ad-icon-button > .ad-icon {
+  --ad-icon-size: calc(var(--ad-size-h) * 0.44);
+  filter: drop-shadow(0 0 0.2rem rgb(from var(--ad-secondary-100) r g b / 0.49));
+}
+
+.ad-switch,
+.ad-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ad-size-gap);
+  cursor: pointer;
+  font-size: var(--ad-size-font);
+  position: relative;
+}
+.ad-switch input,
+.ad-checkbox input {
+  position: absolute;
+  opacity: 0;
+  width: 0.0625rem;
+  height: 0.0625rem;
+}
+.ad-toggle-track {
+  --ad-track-h: calc(var(--ad-size-h) * 0.64);
+  --ad-track-w: calc(var(--ad-track-h) * 1.82);
+  width: var(--ad-track-w);
+  height: var(--ad-track-h);
+  position: relative;
+  border-radius: 999rem;
+  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.55);
+  background: linear-gradient(180deg, var(--ad-neutral-800), var(--ad-neutral-900));
+  box-shadow: inset 0 0 0.3125rem #000b;
+  flex: none;
+}
+.ad-toggle-track i {
+  --ad-thumb-inset: calc(var(--ad-track-h) * 0.08);
+  position: absolute;
+  left: var(--ad-thumb-inset);
+  top: var(--ad-thumb-inset);
+  width: calc(var(--ad-track-h) - var(--ad-thumb-inset) * 2);
+  height: calc(var(--ad-track-h) - var(--ad-thumb-inset) * 2);
+  border: 0.125rem solid var(--ad-neutral-300);
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--ad-neutral-700), var(--ad-neutral-850));
+  box-shadow: 0 0 0.1875rem rgb(from var(--ad-secondary-200) r g b / 0.25);
+  transition:
+    transform 0.42s cubic-bezier(0.34, 1.56, 0.5, 1),
+    scale 0.18s ease-out,
+    background 0.25s,
+    border-color 0.25s,
+    box-shadow 0.25s;
+}
+.ad-switch input:focus-visible + .ad-toggle-track,
+.ad-checkbox input:focus-visible + .ad-toggle-track {
+  outline: 0.125rem solid var(--ad-secondary-100);
+  outline-offset: 0.1875rem;
+}
+.ad-tab-shape {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  z-index: -1;
+  pointer-events: none;
+}
+.ad-tab-shape .tab-shape__glow {
+  stroke: var(--ad-primary);
+  stroke-width: 6.5;
+  opacity: 0.72;
+  filter: blur(0.25rem);
+}
+.ad-tab-shape .tab-shape__edge {
+  stroke: var(--ad-secondary);
+  stroke-width: 1.15;
+}
+.ad-tab-shape .tab-shape__glint {
+  stroke: var(--ad-neutral-200);
+  stroke-width: 1.2;
+  stroke-linecap: round;
+  stroke-dasharray: 8 92;
+  animation: ad-tab-glint 6s linear infinite;
+}
+/* The glint's glow: two faint wider dashes under it, in step with it, instead of a live filter. */
+.ad-tab-shape .tab-shape__glint[data-part="wide"] {
+  stroke: var(--ad-secondary);
+  stroke-width: 7.2;
+  opacity: 0.1;
+}
+.ad-tab-shape .tab-shape__glint[data-part="near"] {
+  stroke: var(--ad-secondary);
+  stroke-width: 4.2;
+  opacity: 0.25;
+}
+.ad-tab-shape-glint {
+  will-change: transform;
+}
+.ad-tab-shape .tab-shape__floor {
+  stroke: var(--ad-secondary);
+  stroke-width: 1.85;
+  filter: drop-shadow(0 0 0.25rem var(--ad-primary));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ad-button,
+  .ad-icon-button,
+  .ad-toggle-button {
+    animation: none !important;
+    transition: none !important;
+  }
+  .ad-button::after,
+  .ad-icon-button::after,
+  .ad-toggle-button::after {
+    animation: none !important;
+    display: none !important;
+  }
+}
+
+/* Ghost is a subtle button (Fluent "subtle", MUI "text"): no surface until hovered. */
+:is(.ad-button, .ad-icon-button)[data-ad-variant="ghost"] {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  color: var(--ad-neutral-300);
+  animation: none;
+}
+:is(.ad-button, .ad-icon-button)[data-ad-variant="ghost"]::before,
+:is(.ad-button, .ad-icon-button)[data-ad-variant="ghost"]::after {
+  display: none;
+}
+:is(.ad-button, .ad-icon-button)[data-ad-variant="ghost"] > .ad-icon {
+  filter: none;
+}
+:is(.ad-button, .ad-icon-button)[data-ad-variant="ghost"]:hover:not(:disabled) {
+  background: rgb(from var(--ad-primary) r g b / 0.08);
+  box-shadow: none;
+  color: var(--ad-text);
+  filter: none;
+  transform: none;
+}
+:is(.ad-button, .ad-icon-button)[data-ad-variant="ghost"]:active:not(
+    :disabled
+  ) {
+  background: rgb(from var(--ad-primary) r g b / 0.14);
+  box-shadow: none;
+  transform: scale(0.98);
+}
+
+/* Living plasma inside the button, a soft breath of light, and a comet running round its edge.
+   Accent buttons always show them; quieter variants reveal them on hover. Everything moves by
+   transform and opacity only, and only while it is visible, so a screen of buttons stays light. */
+.ad-button-fx {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  overflow: hidden;
+  pointer-events: none;
+}
+.ad-button-fx::before {
+  content: "";
+  position: absolute;
+  inset: -40% -10% -40% 30%;
+  background:
+    radial-gradient(circle at 72% 30%, #fff 0 1.2%, transparent 2.6%),
+    radial-gradient(circle at 86% 68%, var(--ad-secondary-100) 0 1.4%, transparent 3.2%),
+    radial-gradient(circle at 58% 74%, var(--ad-secondary-200) 0 1.8%, transparent 4%),
+    repeating-conic-gradient(
+      from 20deg at 80% 50%,
+      transparent 0 7deg,
+      #ffffff24 8deg 10deg,
+      transparent 12deg 19deg
+    ),
+    radial-gradient(ellipse at 80% 50%, rgb(from var(--ad-secondary) r g b / 0.44), transparent 65%);
+  mask-image: linear-gradient(90deg, transparent, #000 40%);
+  filter: saturate(1.35);
+  opacity: 0;
+  transition: opacity 0.4s;
+  will-change: transform;
+}
+/* The breath: a faint light over the face that swells and settles. */
+.ad-button-fx::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at 50% 30%, rgb(from var(--ad-secondary-100) r g b / 0.14), transparent 70%);
+  opacity: 0;
+}
+/* The comet: a ring-shaped window onto a conic light that turns behind it. */
+.ad-button-orbit {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  padding: 0.0625rem;
+  overflow: hidden;
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+  opacity: 0;
+  transition: opacity 0.4s;
+  pointer-events: none;
+}
+.ad-button-orbit::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max(130%, 6rem);
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  background: conic-gradient(
+    transparent 0 76%,
+    var(--ad-secondary) 84%,
+    #fff 88%,
+    transparent 93%
+  );
+  will-change: transform;
+}
+:is(.ad-button, .ad-icon-button):is([data-ad-variant="primary"], [data-ad-variant="danger"]) > .ad-button-fx::before,
+.ad-toggle-button[aria-pressed="true"] > .ad-button-fx::before {
+  opacity: 0.85;
+  animation: ad-btn-plasma 7s ease-in-out infinite alternate;
+}
+:is(.ad-button, .ad-icon-button):is([data-ad-variant="primary"], [data-ad-variant="danger"]) > .ad-button-fx::after,
+.ad-toggle-button[aria-pressed="true"] > .ad-button-fx::after {
+  animation: ad-btn-breathe 3.1s ease-in-out infinite;
+}
+:is(.ad-button, .ad-icon-button):is([data-ad-variant="primary"], [data-ad-variant="danger"]) > .ad-button-orbit,
+.ad-toggle-button[aria-pressed="true"] > .ad-button-orbit {
+  opacity: 1;
+}
+:is(.ad-button, .ad-icon-button):is([data-ad-variant="primary"], [data-ad-variant="danger"]) > .ad-button-orbit::before,
+.ad-toggle-button[aria-pressed="true"] > .ad-button-orbit::before {
+  animation: ad-btn-orbit 4.5s linear infinite;
+}
+:is(.ad-button, .ad-icon-button, .ad-toggle-button):hover:not(:disabled) > .ad-button-fx::before {
+  opacity: 0.9;
+  animation: ad-btn-plasma 7s ease-in-out infinite alternate;
+}
+:is(.ad-button, .ad-icon-button, .ad-toggle-button):hover:not(:disabled) > .ad-button-orbit {
+  opacity: 1;
+}
+:is(.ad-button, .ad-icon-button, .ad-toggle-button):hover:not(:disabled) > .ad-button-orbit::before {
+  animation: ad-btn-orbit 1.6s linear infinite;
+}
+:is(.ad-button, .ad-icon-button):disabled > :is(.ad-button-fx, .ad-button-orbit) {
+  display: none;
+}
+/* Icon-only buttons are small: the plasma centres on them instead of the right side. */
+.ad-icon-button > .ad-button-fx::before {
+  inset: -30%;
+  mask-image: radial-gradient(closest-side, #000 40%, transparent);
+}
+/* Ghost buttons stay subtle: only the comet, no plasma. */
+:is(.ad-button, .ad-icon-button)[data-ad-variant="ghost"] > .ad-button-fx::before {
+  display: none;
+}
+@keyframes ad-btn-plasma {
+  from {
+    transform: translate3d(-3%, -2%, 0) scale(1.02) rotate(0deg);
+  }
+  to {
+    transform: translate3d(3%, 2%, 0) scale(1.14) rotate(8deg);
+  }
+}
+@keyframes ad-btn-orbit {
+  to {
+    rotate: 360deg;
+  }
+}
+/* Buttons that live inside other controls stay plain. */
+:is(.ad-input-adornment, .ad-split-button) :is(.ad-button-fx, .ad-button-orbit) {
+  display: none;
+}
+
+@keyframes ad-tab-glint {
+  to {
+    stroke-dashoffset: -100;
+  }
+}