@neo-ui-kit/react 1.0.0 → 1.0.1

package/dist/components/layout/Illustration/styles.css

@@ -1,104 +1,104 @@
-.ad-illustration {
-  display: grid;
-  place-items: center;
-  min-width: 0;
-  min-height: 0;
-}
-.ad-illustration-art {
-  max-width: 100%;
-  max-height: 100%;
-}
-.ad-illustration[data-ad-framed="true"] {
-  padding: var(--ad-space-3);
-  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.3);
-  border-radius: var(--ad-radius);
-  background: var(--ad-surface-glass);
-  box-shadow: var(--ad-shadow-glass);
-}
-/* The artwork floats slowly in a pulsing glow; a framed one gets a living edge. Everything that
-   moves is a layer that is only moved or faded: no filter or gradient is redrawn while it runs. */
-.ad-illustration-art {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  animation: ad-art-float 7s ease-in-out infinite;
-  will-change: transform;
-}
-.ad-illustration-art > [data-ad-component="IllustrationAsset"] {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 100%;
-  filter: hue-rotate(var(--ad-hue-shift, 0deg));
-}
-.ad-illustration-glow {
-  position: absolute;
-  inset: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  pointer-events: none;
-}
-.ad-illustration-glow[data-glow="pulse"] {
-  opacity: 0;
-  animation: ad-art-glow 5s ease-in-out infinite;
-  will-change: opacity;
-}
-.ad-illustration[data-ad-framed="true"] {
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-}
-/* The edge is a 1px ring (the mask) over a conic light that turns: turning a conic gradient
-   about its centre is the same as sweeping its start angle. */
-.ad-illustration-edge {
-  position: absolute;
-  inset: 0;
-  container-type: size;
-  border-radius: inherit;
-  padding: 0.0625rem;
-  overflow: hidden;
-  mask:
-    linear-gradient(#000 0 0) content-box exclude,
-    linear-gradient(#000 0 0);
-  pointer-events: none;
-}
-.ad-illustration-edge::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: hypot(100cqw, 100cqh);
-  aspect-ratio: 1;
-  translate: -50% -50%;
-  background: conic-gradient(
-    transparent 0 70%,
-    var(--ad-secondary),
-    transparent 85%
-  );
-  animation: ad-art-edge 5s linear infinite;
-  will-change: transform;
-}
-@keyframes ad-art-float {
-  0%,
-  100% {
-    transform: translateY(0) scale(1);
-  }
-  50% {
-    transform: translateY(-0.4rem) scale(1.02);
-  }
-}
-@keyframes ad-art-glow {
-  50% {
-    opacity: 1;
-  }
-}
-@keyframes ad-art-edge {
-  to {
-    rotate: 1turn;
-  }
-}
+.ad-illustration {
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  min-height: 0;
+}
+.ad-illustration-art {
+  max-width: 100%;
+  max-height: 100%;
+}
+.ad-illustration[data-ad-framed="true"] {
+  padding: var(--ad-space-3);
+  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.3);
+  border-radius: var(--ad-radius);
+  background: var(--ad-surface-glass);
+  box-shadow: var(--ad-shadow-glass);
+}
+/* The artwork floats slowly in a pulsing glow; a framed one gets a living edge. Everything that
+   moves is a layer that is only moved or faded: no filter or gradient is redrawn while it runs. */
+.ad-illustration-art {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  animation: ad-art-float 7s ease-in-out infinite;
+  will-change: transform;
+}
+.ad-illustration-art > [data-ad-component="IllustrationAsset"] {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  filter: hue-rotate(var(--ad-hue-shift, 0deg));
+}
+.ad-illustration-glow {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+.ad-illustration-glow[data-glow="pulse"] {
+  opacity: 0;
+  animation: ad-art-glow 5s ease-in-out infinite;
+  will-change: opacity;
+}
+.ad-illustration[data-ad-framed="true"] {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+/* The edge is a 1px ring (the mask) over a conic light that turns: turning a conic gradient
+   about its centre is the same as sweeping its start angle. */
+.ad-illustration-edge {
+  position: absolute;
+  inset: 0;
+  container-type: size;
+  border-radius: inherit;
+  padding: 0.0625rem;
+  overflow: hidden;
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+  pointer-events: none;
+}
+.ad-illustration-edge::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: hypot(100cqw, 100cqh);
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  background: conic-gradient(
+    transparent 0 70%,
+    var(--ad-secondary),
+    transparent 85%
+  );
+  animation: ad-art-edge 5s linear infinite;
+  will-change: transform;
+}
+@keyframes ad-art-float {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-0.4rem) scale(1.02);
+  }
+}
+@keyframes ad-art-glow {
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes ad-art-edge {
+  to {
+    rotate: 1turn;
+  }
+}

package/dist/components/layout/ScrollArea/styles.css

@@ -1,61 +1,61 @@
-/* Styles owned by ScrollArea. */
-.ad-scroll-area {
-  min-width: 0;
-  min-height: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-  scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  scrollbar-color: var(--ad-primary) var(--ad-neutral-900);
-  padding-inline-end: clamp(0.4rem, 0.25rem + 0.35vw, 0.75rem);
-}
-.ad-scroll-area::-webkit-scrollbar {
-  width: clamp(0.45rem, 0.3rem + 0.25vw, 0.7rem);
-  height: clamp(0.45rem, 0.3rem + 0.25vw, 0.7rem);
-}
-.ad-scroll-area::-webkit-scrollbar-track {
-  background: var(--ad-neutral-900);
-  border-radius: 999rem;
-}
-.ad-scroll-area::-webkit-scrollbar-thumb {
-  background: linear-gradient(var(--ad-primary), var(--ad-primary-600));
-  border-radius: 999rem;
-}
-/* Edges fade out only where there is more to scroll (scroll-driven, where supported). */
-@property --ad-fade-top {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --ad-fade-bottom {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@supports (animation-timeline: scroll()) {
-  .ad-scroll-area {
-    mask: linear-gradient(
-      #0000,
-      #000 var(--ad-fade-top),
-      #000 calc(100% - var(--ad-fade-bottom)),
-      #0000
-    );
-    animation: ad-scroll-fade linear both;
-    animation-timeline: scroll(self);
-  }
-}
-@keyframes ad-scroll-fade {
-  0% {
-    --ad-fade-top: 0px;
-    --ad-fade-bottom: 2rem;
-  }
-  10%,
-  90% {
-    --ad-fade-top: 2rem;
-    --ad-fade-bottom: 2rem;
-  }
-  100% {
-    --ad-fade-top: 2rem;
-    --ad-fade-bottom: 0px;
-  }
-}
+/* Styles owned by ScrollArea. */
+.ad-scroll-area {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ad-primary) var(--ad-neutral-900);
+  padding-inline-end: clamp(0.4rem, 0.25rem + 0.35vw, 0.75rem);
+}
+.ad-scroll-area::-webkit-scrollbar {
+  width: clamp(0.45rem, 0.3rem + 0.25vw, 0.7rem);
+  height: clamp(0.45rem, 0.3rem + 0.25vw, 0.7rem);
+}
+.ad-scroll-area::-webkit-scrollbar-track {
+  background: var(--ad-neutral-900);
+  border-radius: 999rem;
+}
+.ad-scroll-area::-webkit-scrollbar-thumb {
+  background: linear-gradient(var(--ad-primary), var(--ad-primary-600));
+  border-radius: 999rem;
+}
+/* Edges fade out only where there is more to scroll (scroll-driven, where supported). */
+@property --ad-fade-top {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --ad-fade-bottom {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@supports (animation-timeline: scroll()) {
+  .ad-scroll-area {
+    mask: linear-gradient(
+      #0000,
+      #000 var(--ad-fade-top),
+      #000 calc(100% - var(--ad-fade-bottom)),
+      #0000
+    );
+    animation: ad-scroll-fade linear both;
+    animation-timeline: scroll(self);
+  }
+}
+@keyframes ad-scroll-fade {
+  0% {
+    --ad-fade-top: 0px;
+    --ad-fade-bottom: 2rem;
+  }
+  10%,
+  90% {
+    --ad-fade-top: 2rem;
+    --ad-fade-bottom: 2rem;
+  }
+  100% {
+    --ad-fade-top: 2rem;
+    --ad-fade-bottom: 0px;
+  }
+}

package/dist/components/layout/TabPanel/styles.css

@@ -1,16 +1,16 @@
-/* Styles owned by TabPanel: the content of each newly selected tab glides in. */
-.ad-tab-panel {
-  padding: 1.125rem;
-  color: var(--ad-muted);
-  font-size: 0.8125rem;
-}
-.ad-tab-panel-content {
-  animation: ad-panel-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
-}
-@keyframes ad-panel-in {
-  from {
-    opacity: 0;
-    transform: translateY(0.5rem);
-    filter: blur(0.2rem);
-  }
-}
+/* Styles owned by TabPanel: the content of each newly selected tab glides in. */
+.ad-tab-panel {
+  padding: 1.125rem;
+  color: var(--ad-muted);
+  font-size: 0.8125rem;
+}
+.ad-tab-panel-content {
+  animation: ad-panel-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+@keyframes ad-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+    filter: blur(0.2rem);
+  }
+}

package/dist/components/layout/shared.css

@@ -1,4 +1,4 @@
-/* Shared only by sibling components. */
+/* Shared only by sibling components. */
 .ad {
   font-family: inherit;
   color: var(--ad-text);
@@ -8,70 +8,70 @@
   --ad-text: var(--ad-on-accent);
   --ad-muted: var(--ad-on-accent-muted);
 }
-[data-ad-material="shell"] {
-  --ad-material-bg: var(--ad-surface-shell);
-  --ad-material-shadow: var(--ad-shadow-shell);
-}
-[data-ad-material="card"] {
-  --ad-material-bg: var(--ad-surface-card);
-  --ad-material-shadow: var(--ad-shadow-card);
-}
-[data-ad-material="glass"] {
-  --ad-material-bg: var(--ad-surface-glass);
-  --ad-material-shadow: var(--ad-shadow-glass);
-}
-[data-ad-material="ruby"] {
-  --ad-material-bg: var(--ad-surface-ruby);
-  --ad-material-shadow: var(--ad-shadow-ruby);
-}
-[data-ad-material="tile"] {
-  --ad-material-bg: var(--ad-surface-tile);
-  --ad-material-shadow: var(--ad-shadow-tile);
-}
-[data-ad-material="input"] {
-  --ad-material-bg: var(--ad-surface-input);
-  --ad-material-shadow: var(--ad-shadow-input);
-}
-[data-ad-material="dialog"] {
-  --ad-material-bg: var(--ad-surface-dialog);
-  --ad-material-shadow: var(--ad-shadow-dialog);
-}
-.ad-surface,
-.ad-card {
-  position: relative;
-  border-radius: 1.125rem;
-  isolation: isolate;
-}
-.ad-surface:not(.ad-card) {
-  padding: 1.25rem;
-}
-.ad-header-copy {
-  min-width: 0;
-  flex: 1;
-}
-.ad-header-copy p {
-  color: var(--ad-muted);
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  margin: 0.3125rem 0 0;
-}
-.ad-header-actions {
-  margin-left: auto;
-}
-.ad-toolbar,
-.ad-button-group {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  flex-wrap: wrap;
-}
-.ad-collapsible-section summary > .ad-icon:last-child {
-  margin-left: auto;
-  transition: transform 0.2s;
-}
-.ad-collapsible-section[open] summary > .ad-icon:last-child {
-  transform: rotate(180deg);
-}
+[data-ad-material="shell"] {
+  --ad-material-bg: var(--ad-surface-shell);
+  --ad-material-shadow: var(--ad-shadow-shell);
+}
+[data-ad-material="card"] {
+  --ad-material-bg: var(--ad-surface-card);
+  --ad-material-shadow: var(--ad-shadow-card);
+}
+[data-ad-material="glass"] {
+  --ad-material-bg: var(--ad-surface-glass);
+  --ad-material-shadow: var(--ad-shadow-glass);
+}
+[data-ad-material="ruby"] {
+  --ad-material-bg: var(--ad-surface-ruby);
+  --ad-material-shadow: var(--ad-shadow-ruby);
+}
+[data-ad-material="tile"] {
+  --ad-material-bg: var(--ad-surface-tile);
+  --ad-material-shadow: var(--ad-shadow-tile);
+}
+[data-ad-material="input"] {
+  --ad-material-bg: var(--ad-surface-input);
+  --ad-material-shadow: var(--ad-shadow-input);
+}
+[data-ad-material="dialog"] {
+  --ad-material-bg: var(--ad-surface-dialog);
+  --ad-material-shadow: var(--ad-shadow-dialog);
+}
+.ad-surface,
+.ad-card {
+  position: relative;
+  border-radius: 1.125rem;
+  isolation: isolate;
+}
+.ad-surface:not(.ad-card) {
+  padding: 1.25rem;
+}
+.ad-header-copy {
+  min-width: 0;
+  flex: 1;
+}
+.ad-header-copy p {
+  color: var(--ad-muted);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  margin: 0.3125rem 0 0;
+}
+.ad-header-actions {
+  margin-left: auto;
+}
+.ad-toolbar,
+.ad-button-group {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  flex-wrap: wrap;
+}
+.ad-collapsible-section summary > .ad-icon:last-child {
+  margin-left: auto;
+  transition: transform 0.2s;
+}
+.ad-collapsible-section[open] summary > .ad-icon:last-child {
+  transform: rotate(180deg);
+}
 
 /* Vector artwork is drawn in ruby; it turns to the theme hue. */
 :is(.ad-illustration, .ad-brand-mark, .ad-host-seal) svg {

package/dist/components/media/AudioPlayer/styles.css

@@ -1,86 +1,86 @@
-/* Styles owned by AudioPlayer: while playing, rings of light pulse out of the play button. */
-.ad-audio-player {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: clamp(0.75rem, 2vw, 1.25rem);
-  min-width: 0;
-  padding: 0.75rem clamp(0.75rem, 2vw, 1.1rem);
-  border-radius: calc(var(--ad-radius) * 1.2);
-  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.2);
-  background:
-    radial-gradient(40% 120% at 0 50%, rgb(from var(--ad-primary) r g b / 0.12), transparent 70%),
-    linear-gradient(180deg, var(--ad-neutral-850), var(--ad-neutral-900));
-  box-shadow: inset 0 0.0625rem 0 #ffffff0f;
-}
-.ad-player-play {
-  position: relative;
-  display: grid;
-  flex: none;
-}
-.ad-player-play > .ad-icon-button {
-  --ad-size-h: 3rem;
-  width: 3rem;
-  height: 3rem;
-}
-.ad-player-play::before,
-.ad-player-play::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  border: 0.0625rem solid var(--ad-secondary);
-  opacity: 0;
-  pointer-events: none;
-}
-.ad-audio-player[data-playing] .ad-player-play::before,
-.ad-audio-player[data-playing] .ad-player-play::after {
-  animation: ad-player-wave 1.8s ease-out infinite;
-}
-.ad-audio-player[data-playing] .ad-player-play::after {
-  animation-delay: 0.9s;
-}
-.ad-player-track {
-  flex: 1 1 4rem;
-  min-width: 0;
-  display: grid;
-  gap: 0.15rem;
-}
-.ad-player-times {
-  display: flex;
-  justify-content: space-between;
-}
-.ad-time {
-  white-space: nowrap;
-  font-size: 0.6875rem;
-  color: var(--ad-muted);
-  font-variant-numeric: tabular-nums;
-}
-.ad-player-volume {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  flex: 0 1 9rem;
-  min-width: 0;
-}
-.ad-player-volume > .ad-slider-field {
-  flex: 1;
-  min-width: 0;
-}
-.ad-player-volume .ad-slider {
-  width: 100%;
-}
-.ad-player-volume > [data-muted] {
-  color: var(--ad-muted);
-  opacity: 0.6;
-}
-@keyframes ad-player-wave {
-  from {
-    opacity: 0.8;
-    scale: 1;
-  }
-  to {
-    opacity: 0;
-    scale: 1.7;
-  }
-}
+/* Styles owned by AudioPlayer: while playing, rings of light pulse out of the play button. */
+.ad-audio-player {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: clamp(0.75rem, 2vw, 1.25rem);
+  min-width: 0;
+  padding: 0.75rem clamp(0.75rem, 2vw, 1.1rem);
+  border-radius: calc(var(--ad-radius) * 1.2);
+  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.2);
+  background:
+    radial-gradient(40% 120% at 0 50%, rgb(from var(--ad-primary) r g b / 0.12), transparent 70%),
+    linear-gradient(180deg, var(--ad-neutral-850), var(--ad-neutral-900));
+  box-shadow: inset 0 0.0625rem 0 #ffffff0f;
+}
+.ad-player-play {
+  position: relative;
+  display: grid;
+  flex: none;
+}
+.ad-player-play > .ad-icon-button {
+  --ad-size-h: 3rem;
+  width: 3rem;
+  height: 3rem;
+}
+.ad-player-play::before,
+.ad-player-play::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 0.0625rem solid var(--ad-secondary);
+  opacity: 0;
+  pointer-events: none;
+}
+.ad-audio-player[data-playing] .ad-player-play::before,
+.ad-audio-player[data-playing] .ad-player-play::after {
+  animation: ad-player-wave 1.8s ease-out infinite;
+}
+.ad-audio-player[data-playing] .ad-player-play::after {
+  animation-delay: 0.9s;
+}
+.ad-player-track {
+  flex: 1 1 4rem;
+  min-width: 0;
+  display: grid;
+  gap: 0.15rem;
+}
+.ad-player-times {
+  display: flex;
+  justify-content: space-between;
+}
+.ad-time {
+  white-space: nowrap;
+  font-size: 0.6875rem;
+  color: var(--ad-muted);
+  font-variant-numeric: tabular-nums;
+}
+.ad-player-volume {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 0 1 9rem;
+  min-width: 0;
+}
+.ad-player-volume > .ad-slider-field {
+  flex: 1;
+  min-width: 0;
+}
+.ad-player-volume .ad-slider {
+  width: 100%;
+}
+.ad-player-volume > [data-muted] {
+  color: var(--ad-muted);
+  opacity: 0.6;
+}
+@keyframes ad-player-wave {
+  from {
+    opacity: 0.8;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 1.7;
+  }
+}