@neo-ui-kit/react 1.0.0 → 1.0.2

package/dist/components/controls/Tabs/styles.css

@@ -1,239 +1,239 @@
-/* Styles owned by Tabs: a dark track with a neon rail, and a ruby "blade" that flies to the selected tab. */
-.ad-tabs {
-  --ad-tabs-pad: 0.25rem;
-  --ad-tabs-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
-  position: relative;
-  display: flex;
-  gap: 0.125rem;
-  min-width: 0;
-  padding: var(--ad-tabs-pad) var(--ad-tabs-pad)
-    calc(var(--ad-tabs-pad) + 0.3rem);
-  border: 0.0625rem solid rgb(from var(--ad-primary-600) r g b / 0.24);
-  border-radius: calc(var(--ad-size-radius) + 0.25rem);
-  background:
-    linear-gradient(180deg, #ffffff06, transparent 40%),
-    linear-gradient(180deg, var(--ad-neutral-900), var(--ad-neutral-950));
-  box-shadow:
-    inset 0 0.0625rem 0.1875rem #000c,
-    inset 0 -0.0625rem 0 #ffffff08;
-  isolation: isolate;
-  /* Tabs keep their labels whole; when they do not fit, the row scrolls. */
-  overflow-x: auto;
-  overscroll-behavior-x: contain;
-  scrollbar-width: none;
-}
-.ad-tabs::-webkit-scrollbar {
-  display: none;
-}
-/* The rail: a dim line along the bottom that lights up under the blade. */
-.ad-tabs::after {
-  content: "";
-  position: absolute;
-  z-index: -3;
-  left: calc(var(--ad-tabs-pad) + 0.5rem);
-  right: calc(var(--ad-tabs-pad) + 0.5rem);
-  bottom: 0.25rem;
-  height: 0.0625rem;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgb(from var(--ad-primary) r g b / 0.19) 15%,
-    rgb(from var(--ad-primary) r g b / 0.19) 85%,
-    transparent
-  );
-}
-.ad-tabs > .ad-tab {
-  flex: 1 0 auto;
-}
-
-/* Blade geometry: chamfered corners and a notch cut into the bottom edge. */
-:is(.ad-tabs, .ad-tab) {
-  --ad-blade-cut: calc(var(--ad-size-radius) * 0.75);
-  --ad-blade-notch: 0.4rem;
-  --ad-blade: polygon(
-    var(--ad-blade-cut) 0,
-    calc(100% - var(--ad-blade-cut)) 0,
-    100% var(--ad-blade-cut),
-    100% calc(100% - var(--ad-blade-cut)),
-    calc(100% - var(--ad-blade-cut)) 100%,
-    calc(50% + var(--ad-blade-notch)) 100%,
-    50% calc(100% - var(--ad-blade-notch) * 0.75),
-    calc(50% - var(--ad-blade-notch)) 100%,
-    var(--ad-blade-cut) 100%,
-    0 calc(100% - var(--ad-blade-cut)),
-    0 var(--ad-blade-cut)
-  );
-}
-
-.ad-tabs-indicator,
-.ad-tabs-trail {
-  position: absolute;
-  top: var(--ad-tabs-pad);
-  bottom: calc(var(--ad-tabs-pad) + 0.3rem);
-  left: 0;
-  width: var(--ad-tabs-w);
-  transform: translateX(var(--ad-tabs-x));
-  pointer-events: none;
-}
-.ad-tabs-indicator {
-  z-index: -1;
-  transition:
-    transform 0.55s var(--ad-tabs-spring),
-    width 0.45s var(--ad-tabs-spring),
-    scale 0.3s ease-out;
-}
-/* The blade breathes: a soft glow under it swells and settles (opacity only; the blur is still). */
-.ad-tabs-indicator::after {
-  content: "";
-  position: absolute;
-  inset: -0.35rem -0.25rem -0.15rem;
-  z-index: -1;
-  border-radius: var(--ad-size-radius);
-  background: radial-gradient(closest-side, rgb(from var(--ad-primary) r g b / 0.55), transparent);
-  filter: blur(0.45rem);
-  opacity: 0;
-  animation: ad-tabs-breathe 3.2s ease-in-out infinite;
-  will-change: opacity;
-}
-/* The blade's glow, drawn once: a still copy of its shape under it carries the shadows, so the
-   glint and the breath above never make them re-blur. (A filter on the clipped shape itself
-   would be clipped away, hence the wrapper.) */
-.ad-tabs-halo {
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  filter: drop-shadow(0 0 0.4rem rgb(from var(--ad-primary) r g b / 0.4))
-    drop-shadow(0 0.2rem 0.6rem rgb(from var(--ad-primary) r g b / 0.2));
-}
-.ad-tabs-halo::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  clip-path: var(--ad-blade);
-  background: var(--ad-primary-800);
-}
-/* Neon edge: the blade's own background is the edge, a glint runs along it. */
-.ad-tabs-blade {
-  position: absolute;
-  inset: 0;
-  isolation: isolate;
-  clip-path: var(--ad-blade);
-}
-/* The edge: two periods of the glint gradient side by side, sliding one period to the right.
-   It draws exactly what a moving background-position drew, but only moves a layer. */
-.ad-tabs-blade-edge {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: -1;
-  width: 600%;
-  background: linear-gradient(
-      100deg,
-      var(--ad-secondary) 0%,
-      var(--ad-secondary-200) 38%,
-      var(--ad-neutral-200) 48%,
-      var(--ad-secondary-200) 58%,
-      var(--ad-primary-600) 100%
-    )
-    0 0 / 50% 100%;
-  transform: translateX(-50%);
-  animation: ad-tabs-glint 3.6s linear infinite;
-  will-change: transform;
-}
-/* Fill, one hairline inside the edge, with a hot core near the notch. */
-.ad-tabs-blade::before {
-  content: "";
-  position: absolute;
-  inset: 0.0625rem;
-  clip-path: var(--ad-blade);
-  background:
-    radial-gradient(60% 90% at 50% 120%, rgb(from var(--ad-primary) r g b / 0.67), transparent 70%),
-    linear-gradient(180deg, #ffffff22, transparent 35%),
-    linear-gradient(180deg, var(--ad-primary-700), var(--ad-primary-800) 62%, var(--ad-primary-900));
-}
-/* A light sweep crosses the fill now and then. */
-.ad-tabs-blade::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  clip-path: var(--ad-blade);
-  background: linear-gradient(105deg, transparent 35%, #ffffff30 48%, transparent 60%);
-  transform: translateX(-100%);
-  animation: ad-tabs-sweep 5.5s ease-in-out infinite;
-}
-/* Comet trail: a blurred copy that lags behind while the blade travels. */
-.ad-tabs-trail {
-  z-index: -2;
-  border-radius: var(--ad-size-radius);
-  background: radial-gradient(closest-side, rgb(from var(--ad-primary) r g b / 0.5), transparent);
-  filter: blur(0.6rem);
-  opacity: 0;
-  transition:
-    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
-    width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
-    opacity 0.5s;
-}
-/* Rail glow under the blade, with a spark that drops from the notch. */
-.ad-tabs-rail {
-  position: absolute;
-  z-index: -2;
-  left: 0;
-  bottom: 0.1875rem;
-  width: var(--ad-tabs-w);
-  height: 0.1875rem;
-  transform: translateX(var(--ad-tabs-x));
-  border-radius: 999rem;
-  background: radial-gradient(closest-side, var(--ad-neutral-200), var(--ad-primary) 45%, transparent);
-  box-shadow: 0 0 0.75rem 0.15rem rgb(from var(--ad-primary) r g b / 0.53);
-  pointer-events: none;
-  transition:
-    transform 0.6s var(--ad-tabs-spring),
-    width 0.5s var(--ad-tabs-spring);
-}
-
-/* While travelling the blade squashes and flares, the trail shows. */
-.ad-tabs[data-moving] .ad-tabs-indicator {
-  scale: 1.04 0.86;
-  filter: drop-shadow(0 0 0.8rem rgb(from var(--ad-primary) r g b / 0.67)) brightness(1.25);
-}
-.ad-tabs[data-moving] .ad-tabs-trail {
-  opacity: 1;
-}
-
-/* Inside Tabs the blade is the selection, so selected tabs draw no fill of their own. */
-.ad-tabs > .ad-tab[aria-selected="true"]::before {
-  display: none;
-}
-
-@keyframes ad-tabs-glint {
-  to {
-    transform: translateX(0);
-  }
-}
-@keyframes ad-tabs-sweep {
-  0%,
-  55% {
-    transform: translateX(-100%);
-  }
-  85%,
-  100% {
-    transform: translateX(100%);
-  }
-}
-@keyframes ad-tabs-breathe {
-  50% {
-    opacity: 1;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .ad-tabs-indicator,
-  .ad-tabs-trail,
-  .ad-tabs-rail,
-  .ad-tabs-blade-edge,
-  .ad-tabs-blade::after,
-  .ad-tabs-indicator::after {
-    transition: none;
-    animation: none;
-  }
-}
+/* Styles owned by Tabs: a dark track with a neon rail, and a ruby "blade" that flies to the selected tab. */
+.ad-tabs {
+  --ad-tabs-pad: 0.25rem;
+  --ad-tabs-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
+  position: relative;
+  display: flex;
+  gap: 0.125rem;
+  min-width: 0;
+  padding: var(--ad-tabs-pad) var(--ad-tabs-pad)
+    calc(var(--ad-tabs-pad) + 0.3rem);
+  border: 0.0625rem solid rgb(from var(--ad-primary-600) r g b / 0.24);
+  border-radius: calc(var(--ad-size-radius) + 0.25rem);
+  background:
+    linear-gradient(180deg, #ffffff06, transparent 40%),
+    linear-gradient(180deg, var(--ad-neutral-900), var(--ad-neutral-950));
+  box-shadow:
+    inset 0 0.0625rem 0.1875rem #000c,
+    inset 0 -0.0625rem 0 #ffffff08;
+  isolation: isolate;
+  /* Tabs keep their labels whole; when they do not fit, the row scrolls. */
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+.ad-tabs::-webkit-scrollbar {
+  display: none;
+}
+/* The rail: a dim line along the bottom that lights up under the blade. */
+.ad-tabs::after {
+  content: "";
+  position: absolute;
+  z-index: -3;
+  left: calc(var(--ad-tabs-pad) + 0.5rem);
+  right: calc(var(--ad-tabs-pad) + 0.5rem);
+  bottom: 0.25rem;
+  height: 0.0625rem;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgb(from var(--ad-primary) r g b / 0.19) 15%,
+    rgb(from var(--ad-primary) r g b / 0.19) 85%,
+    transparent
+  );
+}
+.ad-tabs > .ad-tab {
+  flex: 1 0 auto;
+}
+
+/* Blade geometry: chamfered corners and a notch cut into the bottom edge. */
+:is(.ad-tabs, .ad-tab) {
+  --ad-blade-cut: calc(var(--ad-size-radius) * 0.75);
+  --ad-blade-notch: 0.4rem;
+  --ad-blade: polygon(
+    var(--ad-blade-cut) 0,
+    calc(100% - var(--ad-blade-cut)) 0,
+    100% var(--ad-blade-cut),
+    100% calc(100% - var(--ad-blade-cut)),
+    calc(100% - var(--ad-blade-cut)) 100%,
+    calc(50% + var(--ad-blade-notch)) 100%,
+    50% calc(100% - var(--ad-blade-notch) * 0.75),
+    calc(50% - var(--ad-blade-notch)) 100%,
+    var(--ad-blade-cut) 100%,
+    0 calc(100% - var(--ad-blade-cut)),
+    0 var(--ad-blade-cut)
+  );
+}
+
+.ad-tabs-indicator,
+.ad-tabs-trail {
+  position: absolute;
+  top: var(--ad-tabs-pad);
+  bottom: calc(var(--ad-tabs-pad) + 0.3rem);
+  left: 0;
+  width: var(--ad-tabs-w);
+  transform: translateX(var(--ad-tabs-x));
+  pointer-events: none;
+}
+.ad-tabs-indicator {
+  z-index: -1;
+  transition:
+    transform 0.55s var(--ad-tabs-spring),
+    width 0.45s var(--ad-tabs-spring),
+    scale 0.3s ease-out;
+}
+/* The blade breathes: a soft glow under it swells and settles (opacity only; the blur is still). */
+.ad-tabs-indicator::after {
+  content: "";
+  position: absolute;
+  inset: -0.35rem -0.25rem -0.15rem;
+  z-index: -1;
+  border-radius: var(--ad-size-radius);
+  background: radial-gradient(closest-side, rgb(from var(--ad-primary) r g b / 0.55), transparent);
+  filter: blur(0.45rem);
+  opacity: 0;
+  animation: ad-tabs-breathe 3.2s ease-in-out infinite;
+  will-change: opacity;
+}
+/* The blade's glow, drawn once: a still copy of its shape under it carries the shadows, so the
+   glint and the breath above never make them re-blur. (A filter on the clipped shape itself
+   would be clipped away, hence the wrapper.) */
+.ad-tabs-halo {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  filter: drop-shadow(0 0 0.4rem rgb(from var(--ad-primary) r g b / 0.4))
+    drop-shadow(0 0.2rem 0.6rem rgb(from var(--ad-primary) r g b / 0.2));
+}
+.ad-tabs-halo::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  clip-path: var(--ad-blade);
+  background: var(--ad-primary-800);
+}
+/* Neon edge: the blade's own background is the edge, a glint runs along it. */
+.ad-tabs-blade {
+  position: absolute;
+  inset: 0;
+  isolation: isolate;
+  clip-path: var(--ad-blade);
+}
+/* The edge: two periods of the glint gradient side by side, sliding one period to the right.
+   It draws exactly what a moving background-position drew, but only moves a layer. */
+.ad-tabs-blade-edge {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  width: 600%;
+  background: linear-gradient(
+      100deg,
+      var(--ad-secondary) 0%,
+      var(--ad-secondary-200) 38%,
+      var(--ad-neutral-200) 48%,
+      var(--ad-secondary-200) 58%,
+      var(--ad-primary-600) 100%
+    )
+    0 0 / 50% 100%;
+  transform: translateX(-50%);
+  animation: ad-tabs-glint 3.6s linear infinite;
+  will-change: transform;
+}
+/* Fill, one hairline inside the edge, with a hot core near the notch. */
+.ad-tabs-blade::before {
+  content: "";
+  position: absolute;
+  inset: 0.0625rem;
+  clip-path: var(--ad-blade);
+  background:
+    radial-gradient(60% 90% at 50% 120%, rgb(from var(--ad-primary) r g b / 0.67), transparent 70%),
+    linear-gradient(180deg, #ffffff22, transparent 35%),
+    linear-gradient(180deg, var(--ad-primary-700), var(--ad-primary-800) 62%, var(--ad-primary-900));
+}
+/* A light sweep crosses the fill now and then. */
+.ad-tabs-blade::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  clip-path: var(--ad-blade);
+  background: linear-gradient(105deg, transparent 35%, #ffffff30 48%, transparent 60%);
+  transform: translateX(-100%);
+  animation: ad-tabs-sweep 5.5s ease-in-out infinite;
+}
+/* Comet trail: a blurred copy that lags behind while the blade travels. */
+.ad-tabs-trail {
+  z-index: -2;
+  border-radius: var(--ad-size-radius);
+  background: radial-gradient(closest-side, rgb(from var(--ad-primary) r g b / 0.5), transparent);
+  filter: blur(0.6rem);
+  opacity: 0;
+  transition:
+    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
+    width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
+    opacity 0.5s;
+}
+/* Rail glow under the blade, with a spark that drops from the notch. */
+.ad-tabs-rail {
+  position: absolute;
+  z-index: -2;
+  left: 0;
+  bottom: 0.1875rem;
+  width: var(--ad-tabs-w);
+  height: 0.1875rem;
+  transform: translateX(var(--ad-tabs-x));
+  border-radius: 999rem;
+  background: radial-gradient(closest-side, var(--ad-neutral-200), var(--ad-primary) 45%, transparent);
+  box-shadow: 0 0 0.75rem 0.15rem rgb(from var(--ad-primary) r g b / 0.53);
+  pointer-events: none;
+  transition:
+    transform 0.6s var(--ad-tabs-spring),
+    width 0.5s var(--ad-tabs-spring);
+}
+
+/* While travelling the blade squashes and flares, the trail shows. */
+.ad-tabs[data-moving] .ad-tabs-indicator {
+  scale: 1.04 0.86;
+  filter: drop-shadow(0 0 0.8rem rgb(from var(--ad-primary) r g b / 0.67)) brightness(1.25);
+}
+.ad-tabs[data-moving] .ad-tabs-trail {
+  opacity: 1;
+}
+
+/* Inside Tabs the blade is the selection, so selected tabs draw no fill of their own. */
+.ad-tabs > .ad-tab[aria-selected="true"]::before {
+  display: none;
+}
+
+@keyframes ad-tabs-glint {
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes ad-tabs-sweep {
+  0%,
+  55% {
+    transform: translateX(-100%);
+  }
+  85%,
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes ad-tabs-breathe {
+  50% {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ad-tabs-indicator,
+  .ad-tabs-trail,
+  .ad-tabs-rail,
+  .ad-tabs-blade-edge,
+  .ad-tabs-blade::after,
+  .ad-tabs-indicator::after {
+    transition: none;
+    animation: none;
+  }
+}

package/dist/components/controls/ToggleButton/styles.css

@@ -1,49 +1,49 @@
-/* ToggleButton: active is intentionally identical to Primary, inactive to Secondary. */
-.ad-toggle-button[aria-pressed="true"] {
-  background:
-    linear-gradient(
-        180deg,
-        var(--ad-btn-bg-top),
-        var(--ad-btn-bg-mid) 54%,
-        var(--ad-btn-bg-bottom)
-      )
-      padding-box,
-    linear-gradient(
-        135deg,
-        var(--ad-btn-border-a),
-        var(--ad-btn-border-b) 48%,
-        rgb(from var(--ad-secondary) r g b / 0.54) 78%,
-        rgb(from var(--ad-primary-700) r g b / 0.31)
-      )
-      border-box;
-  box-shadow:
-    inset 0 0.075rem 0.12rem var(--ad-btn-inner),
-    inset 0 -0.42rem 0.95rem var(--ad-btn-bottom),
-    0 0.32rem 0.75rem #0008,
-    0 0 1.15rem var(--ad-btn-glow);
-  color: var(--ad-neutral-200);
-  filter: none;
-}
-.ad-toggle-button[aria-pressed="false"] {
-  filter: saturate(0.88) brightness(0.94);
-}
-/* Switching on pops the button and spins its icon, then it settles into the breathing glow. */
-.ad-toggle-button[aria-pressed="true"] {
-  animation:
-    ad-toggle-pop 0.45s cubic-bezier(0.34, 1.6, 0.5, 1),
-    ad-btn-breathe 3.1s 0.45s ease-in-out infinite;
-}
-.ad-toggle-button[aria-pressed="true"] > .ad-icon {
-  animation: ad-toggle-icon 0.55s cubic-bezier(0.34, 1.6, 0.5, 1);
-}
-@keyframes ad-toggle-pop {
-  40% {
-    scale: 1.08;
-    box-shadow: 0 0 1.6rem rgb(from var(--ad-primary) r g b / 0.67);
-  }
-}
-@keyframes ad-toggle-icon {
-  from {
-    transform: rotate(-120deg) scale(0.4);
-  }
-}
+/* ToggleButton: active is intentionally identical to Primary, inactive to Secondary. */
+.ad-toggle-button[aria-pressed="true"] {
+  background:
+    linear-gradient(
+        180deg,
+        var(--ad-btn-bg-top),
+        var(--ad-btn-bg-mid) 54%,
+        var(--ad-btn-bg-bottom)
+      )
+      padding-box,
+    linear-gradient(
+        135deg,
+        var(--ad-btn-border-a),
+        var(--ad-btn-border-b) 48%,
+        rgb(from var(--ad-secondary) r g b / 0.54) 78%,
+        rgb(from var(--ad-primary-700) r g b / 0.31)
+      )
+      border-box;
+  box-shadow:
+    inset 0 0.075rem 0.12rem var(--ad-btn-inner),
+    inset 0 -0.42rem 0.95rem var(--ad-btn-bottom),
+    0 0.32rem 0.75rem #0008,
+    0 0 1.15rem var(--ad-btn-glow);
+  color: var(--ad-neutral-200);
+  filter: none;
+}
+.ad-toggle-button[aria-pressed="false"] {
+  filter: saturate(0.88) brightness(0.94);
+}
+/* Switching on pops the button and spins its icon, then it settles into the breathing glow. */
+.ad-toggle-button[aria-pressed="true"] {
+  animation:
+    ad-toggle-pop 0.45s cubic-bezier(0.34, 1.6, 0.5, 1),
+    ad-btn-breathe 3.1s 0.45s ease-in-out infinite;
+}
+.ad-toggle-button[aria-pressed="true"] > .ad-icon {
+  animation: ad-toggle-icon 0.55s cubic-bezier(0.34, 1.6, 0.5, 1);
+}
+@keyframes ad-toggle-pop {
+  40% {
+    scale: 1.08;
+    box-shadow: 0 0 1.6rem rgb(from var(--ad-primary) r g b / 0.67);
+  }
+}
+@keyframes ad-toggle-icon {
+  from {
+    transform: rotate(-120deg) scale(0.4);
+  }
+}