@nsaa/core 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/sources/dropdown-menu.css

@@ -0,0 +1,6 @@
+/* @nsaa/core: Tailwind sources for dropdown-menu (generated). */
+@source "../dropdown-menu/dropdown-menu.js";
+@source "../lib/cn.js";
+@source "../sound/sound-map.js";
+@source "../sound/sound.js";
+@source "../tokens/dist/motion.js";

package/dist/sources/empty.css

@@ -0,0 +1,3 @@
+/* @nsaa/core: Tailwind sources for empty (generated). */
+@source "../empty/empty.js";
+@source "../lib/cn.js";

package/dist/sources/field.css

@@ -0,0 +1,5 @@
+/* @nsaa/core: Tailwind sources for field (generated). */
+@source "../field/field.js";
+@source "../label/label.js";
+@source "../lib/cn.js";
+@source "../separator/separator.js";

package/dist/sources/input-group.css

@@ -0,0 +1,27 @@
+/* @nsaa/core: Tailwind sources for input-group (generated). */
+@source "../button/button.js";
+@source "../input-group/input-group.js";
+@source "../input/input.js";
+@source "../lib/cn.js";
+@source "../lib/control-defaults.js";
+@source "../lib/use-press.js";
+@source "../loaders/arc.js";
+@source "../loaders/bouncing-dots.js";
+@source "../loaders/cap.js";
+@source "../loaders/circular-dots.js";
+@source "../loaders/classic.js";
+@source "../loaders/easing.js";
+@source "../loaders/fade.js";
+@source "../loaders/frame.js";
+@source "../loaders/motion.js";
+@source "../loaders/orbit.js";
+@source "../loaders/pulse.js";
+@source "../loaders/ring.js";
+@source "../loaders/wave.js";
+@source "../sound/sound-map.js";
+@source "../sound/sound.js";
+@source "../spinner/loader-provider.js";
+@source "../spinner/registry.js";
+@source "../spinner/spinner.js";
+@source "../textarea/textarea.js";
+@source "../tokens/dist/motion.js";

package/dist/sources/input-otp.css

@@ -0,0 +1,8 @@
+/* @nsaa/core: Tailwind sources for input-otp (generated). */
+@source "../input-otp/input-otp.js";
+@source "../lib/cn.js";
+@source "../lib/input-modality.js";
+@source "../lib/user-action.js";
+@source "../sound/sound-map.js";
+@source "../sound/sound.js";
+@source "../tokens/dist/motion.js";

package/dist/sources/input.css

@@ -0,0 +1,3 @@
+/* @nsaa/core: Tailwind sources for input (generated). */
+@source "../input/input.js";
+@source "../lib/cn.js";

package/dist/sources/kbd.css

@@ -0,0 +1,3 @@
+/* @nsaa/core: Tailwind sources for kbd (generated). */
+@source "../kbd/kbd.js";
+@source "../lib/cn.js";

package/dist/sources/label.css

@@ -0,0 +1,3 @@
+/* @nsaa/core: Tailwind sources for label (generated). */
+@source "../label/label.js";
+@source "../lib/cn.js";

package/dist/sources/loaders-text.css

@@ -0,0 +1,8 @@
+/* @nsaa/core: Tailwind sources for loaders-text (generated). */
+@source "../lib/cn.js";
+@source "../loaders-text.js";
+@source "../loaders/frame.js";
+@source "../loaders/motion.js";
+@source "../loaders/text/shared.js";
+@source "../loaders/text/text-loaders.js";
+@source "../tokens/dist/motion.js";

package/dist/sources/loaders.css

@@ -0,0 +1,40 @@
+/* @nsaa/core: Tailwind sources for loaders (generated). */
+@source "../lib/cn.js";
+@source "../loaders/arc.js";
+@source "../loaders/atom.js";
+@source "../loaders/blocks.js";
+@source "../loaders/bouncing-dots.js";
+@source "../loaders/cap.js";
+@source "../loaders/cascade.js";
+@source "../loaders/circular-dots.js";
+@source "../loaders/classic-v2.js";
+@source "../loaders/classic.js";
+@source "../loaders/clock.js";
+@source "../loaders/comet.js";
+@source "../loaders/compass.js";
+@source "../loaders/dual.js";
+@source "../loaders/easing.js";
+@source "../loaders/eclipse.js";
+@source "../loaders/fade.js";
+@source "../loaders/flip.js";
+@source "../loaders/frame.js";
+@source "../loaders/gather.js";
+@source "../loaders/leap.js";
+@source "../loaders/linear-dots.js";
+@source "../loaders/loading.js";
+@source "../loaders/morph.js";
+@source "../loaders/motion.js";
+@source "../loaders/orbit.js";
+@source "../loaders/pulse.js";
+@source "../loaders/radar.js";
+@source "../loaders/ring.js";
+@source "../loaders/ripple.js";
+@source "../loaders/slide.js";
+@source "../loaders/snake.js";
+@source "../loaders/spinners.js";
+@source "../loaders/swirl.js";
+@source "../loaders/text/shared.js";
+@source "../loaders/text/text-loaders.js";
+@source "../loaders/trace.js";
+@source "../loaders/wave.js";
+@source "../tokens/dist/motion.js";

package/dist/sources/native-select.css

@@ -0,0 +1,3 @@
+/* @nsaa/core: Tailwind sources for native-select (generated). */
+@source "../lib/cn.js";
+@source "../native-select/native-select.js";

package/dist/sources/pagination.css

@@ -0,0 +1,25 @@
+/* @nsaa/core: Tailwind sources for pagination (generated). */
+@source "../button/button.js";
+@source "../lib/cn.js";
+@source "../lib/control-defaults.js";
+@source "../lib/use-press.js";
+@source "../loaders/arc.js";
+@source "../loaders/bouncing-dots.js";
+@source "../loaders/cap.js";
+@source "../loaders/circular-dots.js";
+@source "../loaders/classic.js";
+@source "../loaders/easing.js";
+@source "../loaders/fade.js";
+@source "../loaders/frame.js";
+@source "../loaders/motion.js";
+@source "../loaders/orbit.js";
+@source "../loaders/pulse.js";
+@source "../loaders/ring.js";
+@source "../loaders/wave.js";
+@source "../pagination/pagination.js";
+@source "../sound/sound-map.js";
+@source "../sound/sound.js";
+@source "../spinner/loader-provider.js";
+@source "../spinner/registry.js";
+@source "../spinner/spinner.js";
+@source "../tokens/dist/motion.js";

package/dist/sources/popover.css

@@ -0,0 +1,3 @@
+/* @nsaa/core: Tailwind sources for popover (generated). */
+@source "../lib/cn.js";
+@source "../popover/popover.js";

package/dist/sources/radio-group.css

@@ -0,0 +1,6 @@
+/* @nsaa/core: Tailwind sources for radio-group (generated). */
+@source "../lib/cn.js";
+@source "../radio-group/radio-group.js";
+@source "../sound/sound-map.js";
+@source "../sound/sound.js";
+@source "../tokens/dist/motion.js";

package/dist/sources/select.css

@@ -0,0 +1,6 @@
+/* @nsaa/core: Tailwind sources for select (generated). */
+@source "../lib/cn.js";
+@source "../select/select.js";
+@source "../sound/sound-map.js";
+@source "../sound/sound.js";
+@source "../tokens/dist/motion.js";

package/dist/sources/separator.css

@@ -0,0 +1,3 @@
+/* @nsaa/core: Tailwind sources for separator (generated). */
+@source "../lib/cn.js";
+@source "../separator/separator.js";

package/dist/sources/skeleton.css

@@ -0,0 +1,3 @@
+/* @nsaa/core: Tailwind sources for skeleton (generated). */
+@source "../lib/cn.js";
+@source "../skeleton/skeleton.js";

package/dist/sources/slider.css

@@ -0,0 +1,6 @@
+/* @nsaa/core: Tailwind sources for slider (generated). */
+@source "../lib/cn.js";
+@source "../slider/slider.js";
+@source "../sound/sound-map.js";
+@source "../sound/sound.js";
+@source "../tokens/dist/motion.js";

package/dist/sources/spinner.css

@@ -0,0 +1,20 @@
+/* @nsaa/core: Tailwind sources for spinner (generated). */
+@source "../lib/cn.js";
+@source "../loaders/arc.js";
+@source "../loaders/bouncing-dots.js";
+@source "../loaders/cap.js";
+@source "../loaders/circular-dots.js";
+@source "../loaders/classic.js";
+@source "../loaders/easing.js";
+@source "../loaders/fade.js";
+@source "../loaders/frame.js";
+@source "../loaders/motion.js";
+@source "../loaders/orbit.js";
+@source "../loaders/pulse.js";
+@source "../loaders/ring.js";
+@source "../loaders/wave.js";
+@source "../sound/sound.js";
+@source "../spinner/loader-provider.js";
+@source "../spinner/registry.js";
+@source "../spinner/spinner.js";
+@source "../tokens/dist/motion.js";

package/dist/sources/switch.css

@@ -0,0 +1,6 @@
+/* @nsaa/core: Tailwind sources for switch (generated). */
+@source "../lib/cn.js";
+@source "../sound/sound-map.js";
+@source "../sound/sound.js";
+@source "../switch/switch.js";
+@source "../tokens/dist/motion.js";

package/dist/sources/table.css

@@ -0,0 +1,3 @@
+/* @nsaa/core: Tailwind sources for table (generated). */
+@source "../lib/cn.js";
+@source "../table/table.js";

package/dist/sources/tabs.css

@@ -0,0 +1,3 @@
+/* @nsaa/core: Tailwind sources for tabs (generated). */
+@source "../lib/cn.js";
+@source "../tabs/tabs.js";

package/dist/sources/textarea.css

@@ -0,0 +1,3 @@
+/* @nsaa/core: Tailwind sources for textarea (generated). */
+@source "../lib/cn.js";
+@source "../textarea/textarea.js";

package/dist/sources/toast.css

@@ -0,0 +1,25 @@
+/* @nsaa/core: Tailwind sources for toast (generated). */
+@source "../button/button.js";
+@source "../lib/cn.js";
+@source "../lib/control-defaults.js";
+@source "../lib/use-press.js";
+@source "../loaders/arc.js";
+@source "../loaders/bouncing-dots.js";
+@source "../loaders/cap.js";
+@source "../loaders/circular-dots.js";
+@source "../loaders/classic.js";
+@source "../loaders/easing.js";
+@source "../loaders/fade.js";
+@source "../loaders/frame.js";
+@source "../loaders/motion.js";
+@source "../loaders/orbit.js";
+@source "../loaders/pulse.js";
+@source "../loaders/ring.js";
+@source "../loaders/wave.js";
+@source "../sound/sound-map.js";
+@source "../sound/sound.js";
+@source "../spinner/loader-provider.js";
+@source "../spinner/registry.js";
+@source "../spinner/spinner.js";
+@source "../toast/toast.js";
+@source "../tokens/dist/motion.js";

package/dist/sources/toggle-group.css

@@ -0,0 +1,32 @@
+/* @nsaa/core: Tailwind sources for toggle-group (generated). */
+@source "../button/button.js";
+@source "../dropdown-menu/dropdown-menu.js";
+@source "../kbd/kbd.js";
+@source "../lib/cn.js";
+@source "../lib/control-defaults.js";
+@source "../lib/shortcut.js";
+@source "../lib/tv.js";
+@source "../lib/use-press.js";
+@source "../loaders/arc.js";
+@source "../loaders/bouncing-dots.js";
+@source "../loaders/cap.js";
+@source "../loaders/circular-dots.js";
+@source "../loaders/classic.js";
+@source "../loaders/easing.js";
+@source "../loaders/fade.js";
+@source "../loaders/frame.js";
+@source "../loaders/motion.js";
+@source "../loaders/orbit.js";
+@source "../loaders/pulse.js";
+@source "../loaders/ring.js";
+@source "../loaders/wave.js";
+@source "../sound/sound-map.js";
+@source "../sound/sound.js";
+@source "../spinner/loader-provider.js";
+@source "../spinner/registry.js";
+@source "../spinner/spinner.js";
+@source "../toggle-group/toggle-group.js";
+@source "../tokens/dist/motion.js";
+@source "../toolbar/overflow.js";
+@source "../toolbar/toolbar-item.js";
+@source "../tooltip/tooltip.js";

package/dist/sources/toolbar.css

@@ -0,0 +1,34 @@
+/* @nsaa/core: Tailwind sources for toolbar (generated). */
+@source "../button/button.js";
+@source "../dropdown-menu/dropdown-menu.js";
+@source "../input/input.js";
+@source "../kbd/kbd.js";
+@source "../lib/cn.js";
+@source "../lib/control-defaults.js";
+@source "../lib/merge-refs.js";
+@source "../lib/shortcut.js";
+@source "../lib/tv.js";
+@source "../lib/use-press.js";
+@source "../loaders/arc.js";
+@source "../loaders/bouncing-dots.js";
+@source "../loaders/cap.js";
+@source "../loaders/circular-dots.js";
+@source "../loaders/classic.js";
+@source "../loaders/easing.js";
+@source "../loaders/fade.js";
+@source "../loaders/frame.js";
+@source "../loaders/motion.js";
+@source "../loaders/orbit.js";
+@source "../loaders/pulse.js";
+@source "../loaders/ring.js";
+@source "../loaders/wave.js";
+@source "../sound/sound-map.js";
+@source "../sound/sound.js";
+@source "../spinner/loader-provider.js";
+@source "../spinner/registry.js";
+@source "../spinner/spinner.js";
+@source "../tokens/dist/motion.js";
+@source "../toolbar/overflow.js";
+@source "../toolbar/toolbar-item.js";
+@source "../toolbar/toolbar.js";
+@source "../tooltip/tooltip.js";

package/dist/sources/tooltip.css

@@ -0,0 +1,3 @@
+/* @nsaa/core: Tailwind sources for tooltip (generated). */
+@source "../lib/cn.js";
+@source "../tooltip/tooltip.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nsaa/core",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.3",
   "description": "Nsaa core components: accessible, token-driven, animated to the Nsaa feel spec.",
   "license": "MIT",
   "type": "module",
@@ -12,6 +12,7 @@
   "files": [
     "dist",
     "src/styles.css",
+    "src/styles-base.css",
     "src/feel.css",
     "README.md",
     "LICENSE",
@@ -34,7 +35,9 @@
       "types": "./dist/sound-uisfx.d.ts",
       "import": "./dist/sound-uisfx.js"
     },
-    "./styles.css": "./src/styles.css"
+    "./styles.css": "./src/styles.css",
+    "./styles-base.css": "./src/styles-base.css",
+    "./sources/*": "./dist/sources/*"
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
@@ -47,7 +50,7 @@
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1",
     "uisfx": "0.4.0",
-    "@nsaa/tokens": "^0.1.0-alpha.2"
+    "@nsaa/tokens": "^0.1.0-alpha.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^7.0.1",
@@ -78,7 +81,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsdown",
+    "build": "tsdown && node ../../scripts/core-sources.mjs",
     "dev": "tsdown --watch",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",

package/src/feel.css

@@ -19,6 +19,58 @@
  * own unlayered CSS still wins.
  */
 
+/* ------------------------------------------------------------------ coarse-pointer hit areas (#144)
+   DESIGN.md: 44 px targets on coarse pointers. An invisible ::before, centred, at least 44 × 44 and
+   never smaller than the control; layout is unchanged. ::before because base-nova already uses
+   ::after (Tabs' line indicator, the Checkbox / Radio / Switch / Slider thumb hit expanders).
+   Tailwind's components layer, below utilities: the `position: relative` here never overrides a
+   control's own `absolute` (the Dialog close) or a Toolbar / Toggle Group override.
+   Inputs are replaced elements and take no pseudo-element, so on a coarse pointer they grow to
+   44 px tall instead; an Input Group grows as a whole. */
+@layer components {
+  @media (pointer: coarse) {
+    :is(
+        .group\/button,
+        [data-slot="select-trigger"],
+        [data-slot="checkbox"],
+        [data-slot="radio-group-item"],
+        [data-slot="switch"],
+        [data-slot="slider-thumb"],
+        [data-slot="tabs-trigger"]
+      ) {
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        height: 100%;
+        min-width: calc(var(--spacing) * 11);
+        min-height: calc(var(--spacing) * 11);
+        translate: -50% -50%;
+      }
+    }
+
+    :is([data-slot="input"], [data-slot="input-group"]) {
+      min-height: calc(var(--spacing) * 11);
+    }
+
+    /* Neighbours closer than 44 px would share a hit area. Pagination links sit 2 px apart, so
+       along the row they keep their own width. Calendar days tile the grid edge to edge (every
+       point is some day's), so a day's hit area is its cell; the month arrows keep 44 px.
+       Toolbar and Toggle Group do the same along their axis (#75). */
+    [data-slot="pagination-content"] .group\/button::before {
+      min-width: 0;
+    }
+    [data-slot="calendar"] button[data-day]::before {
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+}
+
 @layer nsaa-feel {
   :root {
     --nsaa-time-scale: 1;

package/src/styles-base.css

@@ -0,0 +1,142 @@
+/*
+ * @nsaa/core styles without Tailwind sources (#144): tokens, the feel layer and the variants.
+ * For the smallest CSS, import this plus one sources file per component you use:
+ *   @import "tailwindcss";
+ *   @import "@nsaa/core/styles-base.css";
+ *   @import "@nsaa/core/sources/button.css";
+ *   @import "@nsaa/core/sources/dialog.css";
+ * `styles.css` is this file plus every component's sources.
+ */
+@import "@nsaa/tokens/css";
+
+/* The feel layer (#108): motion for the base-nova components, keyed to data-slot. */
+@import "./feel.css";
+
+/* `dark:` follows the mode axis (`.dark` or `data-mode="dark"` on an ancestor), not the OS, so the
+   shadcn classes (#84) switch with the rest of the tokens. The nearest mode wins (#120): a light
+   panel inside a dark page is light, and a dark panel inside that light panel is dark again. */
+@custom-variant dark (
+  &:where(
+    .dark,
+    [data-mode="dark"],
+    :is(.dark, [data-mode="dark"]) *:not([data-mode="light"], [data-mode="light"] *),
+    [data-mode="light"] [data-mode="dark"] *
+  )
+);
+
+/* shadcn's base layer (apps/v4 globals.css, `* { @apply border-border }`): a bare `border` class takes
+   the border token, not currentColor. Dialog's footer and the Drawer's edge rely on it (#84). */
+@layer base {
+  *,
+  ::after,
+  ::before {
+    border-color: var(--border);
+  }
+}
+
+/* shadcn's orientation variants (shadcn/tailwind.css, which the shadcn CLI imports for its users).
+   Base UI sets `data-orientation`, not `data-horizontal`; Tabs, Separator and Field use these (#84).
+   shadcn's other data-* variants match Base UI's attributes as Tailwind's defaults already. */
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+/* shadcn's `data-selected` (same file): only `data-selected="true"`. cmdk writes "true" / "false", so
+   Tailwind's default (attribute present) would highlight every Command item (#84). */
+@custom-variant data-selected {
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+/* shadcn style hooks: `cn-rtl-flip` marks icons the shadcn CLI mirrors for right-to-left (the submenu
+   chevrons); `cn-input-otp` and two `cn-calendar-*` classes are styled by base-nova's style sheet, not
+   by the item's classes. */
+@layer components {
+  .cn-rtl-flip:where(:dir(rtl)) {
+    rotate: 180deg;
+  }
+
+  /* Input OTP's root: shadcn's style-nova.css gives `cn-input-otp` a `gap-2` between the groups. */
+  .cn-input-otp {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  /* Calendar with captionLayout="dropdown" (#136): style-nova.css draws the month and year
+     dropdowns' border and focus ring, and pads the caption label; the item's classes don't. */
+  .cn-calendar-dropdown-root {
+    border: 1px solid var(--input);
+
+    &:has(:focus) {
+      border-color: var(--ring);
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  .cn-calendar-caption-label {
+    height: calc(var(--spacing) * 6);
+    padding-right: calc(var(--spacing) * 1);
+    padding-left: calc(var(--spacing) * 1.5);
+  }
+}
+
+/* Hover only where hovering is real (fine pointers), never on disabled, busy or read-only controls. */
+@custom-variant hover-fine {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover:not([data-disabled], [data-loading], [data-readonly]) {
+      @slot;
+    }
+  }
+}
+
+/* Pressed look, never on disabled or busy controls. */
+@custom-variant pressed {
+  &:active:not([data-disabled], [data-loading]) {
+    @slot;
+  }
+}
+
+/* shadcn's `no-scrollbar` (apps/v4 globals.css), used by the Combobox list (#84). `cn-menu-target`
+   and `cn-menu-translucent` on Select and Combobox popups are inert markers the shadcn CLI keeps for
+   its optional translucent-menu setting; nothing styles them by default, so neither do we. */
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Input OTP's fake caret (`animate-caret-blink`, #84). shadcn's apps/v4 globals.css defines it; the
+   base-nova registry item doesn't ship it, so core does (and the `input-otp` registry item adds it).
+   One blink is `duration.caret` (1.25 s, as shadcn's; #125). Under reduced motion the caret stays solid. */
+@theme {
+  --animate-caret-blink: caret-blink var(--nsaa-duration-caret) ease-out infinite;
+
+  @keyframes caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-caret-blink {
+    animation: none;
+  }
+}