@talelk/newui-tailwind 1.0.0 → 1.1.0

package/src/utilities.css

@@ -30,6 +30,17 @@
   outline-offset: 0px;
 }
 
+/* The padded-row outline: the row (Checkbox/Switch `padded`) draws the ring
+ * around itself while its hidden control holds keyboard focus. Same outline
+ * mechanism as `focus-ring` — never a `ring-*` box-shadow, which would
+ * collide with `shadow-*` and vanish in forced-colors mode. */
+@utility focus-ring-within {
+  &:has(:focus-visible) {
+    outline: var(--focus-outline-default);
+    outline-offset: 0px;
+  }
+}
+
 /* Stacking and motion scales. The numbers live in `@theme` (`--z-*`,
  * `--duration-*`, generated from `@talelk/newui-tokens`); these utilities are the
  * named vocabulary components use, so a layer change is a token edit and the
@@ -46,15 +57,24 @@
 @utility z-top {
   z-index: var(--z-top);
 }
+@utility duration-instant {
+  transition-duration: var(--duration-instant);
+}
 @utility duration-fast {
   transition-duration: var(--duration-fast);
 }
 @utility duration-base {
   transition-duration: var(--duration-base);
 }
+@utility duration-moderate {
+  transition-duration: var(--duration-moderate);
+}
 @utility duration-slow {
   transition-duration: var(--duration-slow);
 }
+@utility duration-progress {
+  transition-duration: var(--duration-progress);
+}
 
 /* A disclosure panel — the body of an `Accordion` item or a `Collapsible`.
  *
@@ -74,15 +94,15 @@
   grid-template-rows: 1fr;
   visibility: visible;
   transition:
-    grid-template-rows 200ms cubic-bezier(0.23, 1, 0.32, 1),
+    grid-template-rows var(--duration-moderate) var(--ease-out),
     visibility 0s 0s;
 
   &[data-state="closed"] {
     grid-template-rows: 0fr;
     visibility: hidden;
     transition:
-      grid-template-rows 200ms cubic-bezier(0.23, 1, 0.32, 1),
-      visibility 0s 200ms;
+      grid-template-rows var(--duration-moderate) var(--ease-out),
+      visibility 0s var(--duration-moderate);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -105,6 +125,66 @@
   }
 }
 
+/* Overlay entrances (speeds are the `--animate-*` tokens in `@theme`; the
+ * global reduced-motion block below collapses every one of them). Popups and
+ * modals fade in over a 2px settle — no scale, no slide theatrics. */
+@keyframes overlay-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Bottom-anchored sheets rise the last few pixels into place. */
+@keyframes drawer-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Side sheets settle in from their inline-end edge: the last few pixels
+ * only, mirrored for right-to-left documents. */
+@keyframes sheet-in {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes sheet-in-rtl {
+  from {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Skeleton sheen: sweeps a wide background gradient across the block. The
+ * consumer supplies the gradient and `background-size: 200% 100%`. */
+@keyframes shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
 /* Respect the OS "reduce motion" setting everywhere, once. Animations collapse
  * to a single near-instant frame instead of being removed, so nothing that
  * depends on an `animationend` (Zag's presence, our exit transitions) stalls. */

package/src/fonts/Inter/inter.css

@@ -1,61 +0,0 @@
-/* Variable fonts usage:
-:root { font-family: "Inter", sans-serif; }
-@supports (font-variation-settings: normal) {
-  :root { font-family: "InterVar", sans-serif; font-optical-sizing: auto; }
-} */
-@font-face {
-  font-family: "InterVar";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-  src:
-    url("Inter.var.woff2?v=3.19") format("woff2-variations"),
-    url("Inter.var.woff2?v=3.19") format("woff2");
-  src: url("Inter.var.woff2?v=3.19") format("woff2") tech("variations");
-  unicode-range:
-    U+0000-05FF, /* Latin, Greek, Cyrillic, Hebrew */ U+0700-1FFF,
-    /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */ U+2C00-2FFF,
-    /* Additional scripts */ U+4E00-9FFF,
-    /* CJK (Chinese, Japanese, Korean) */ U+AC00-D7AF; /* Hangul (Korean) */
-}
-@font-face {
-  font-family: "InterVar";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: italic;
-  src:
-    url("Inter-Italic.var.woff2?v=3.19") format("woff2-variations"),
-    url("Inter-Italic.var.woff2?v=3.19") format("woff2");
-  src: url("Inter-Italic.var.woff2?v=3.19") format("woff2") tech("variations");
-  unicode-range:
-    U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-/* Aliased 'InterVar' font as 'Inter' */
-/* To prevent breaking usage of `font-family: 'Inter'` */
-@font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-  src:
-    url("Inter.var.woff2?v=3.19") format("woff2-variations"),
-    url("Inter.var.woff2?v=3.19") format("woff2");
-  src: url("Inter.var.woff2?v=3.19") format("woff2") tech("variations");
-  unicode-range:
-    U+0000-05FF, /* Latin, Greek, Cyrillic, Hebrew */ U+0700-1FFF,
-    /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */ U+2C00-2FFF,
-    /* Additional scripts */ U+4E00-9FFF,
-    /* CJK (Chinese, Japanese, Korean) */ U+AC00-D7AF; /* Hangul (Korean) */
-}
-@font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: italic;
-  src:
-    url("Inter-Italic.var.woff2?v=3.19") format("woff2-variations"),
-    url("Inter-Italic.var.woff2?v=3.19") format("woff2");
-  src: url("Inter-Italic.var.woff2?v=3.19") format("woff2") tech("variations");
-  unicode-range:
-    U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}