@nextlyhq/ui 0.0.2-alpha.57 → 0.0.2-alpha.58

package/dist/tailwind-preset.d.ts

@@ -6,8 +6,13 @@ declare const uiPreset: {
                 overlay: string;
                 "overlay-soft": string;
                 "overlay-strong": string;
-                border: string;
+                border: {
+                    DEFAULT: string;
+                    subtle: string;
+                    strong: string;
+                };
                 input: string;
+                "control-border": string;
                 ring: string;
                 background: string;
                 foreground: string;
@@ -41,6 +46,37 @@ declare const uiPreset: {
                     DEFAULT: string;
                     foreground: string;
                 };
+                highlight: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                code: {
+                    bg: string;
+                    fg: string;
+                    comment: string;
+                    keyword: string;
+                    string: string;
+                    number: string;
+                    function: string;
+                    operator: string;
+                    punctuation: string;
+                    variable: string;
+                    tag: string;
+                    deleted: string;
+                    inserted: string;
+                };
+                sidebar: {
+                    DEFAULT: string;
+                    background: string;
+                    foreground: string;
+                    primary: string;
+                    "primary-foreground": string;
+                    accent: string;
+                    "accent-background": string;
+                    "accent-foreground": string;
+                    border: string;
+                    ring: string;
+                };
                 popover: {
                     DEFAULT: string;
                     foreground: string;

package/dist/tailwind-preset.mjs

@@ -1,5 +1,5 @@
 // src/tailwind-preset.ts
-var statusScale = (base) => ({
+var tintScale = (base) => ({
   50: `color-mix(in srgb, var(${base}), white 95%)`,
   100: `color-mix(in srgb, var(${base}), white 90%)`,
   200: `color-mix(in srgb, var(${base}), white 70%)`,
@@ -23,14 +23,24 @@ var uiPreset = {
         overlay: "var(--nx-overlay)",
         "overlay-soft": "var(--nx-overlay-soft)",
         "overlay-strong": "var(--nx-overlay-strong)",
-        border: "var(--nx-border)",
+        border: {
+          DEFAULT: "var(--nx-border)",
+          subtle: "var(--nx-border-subtle)",
+          strong: "var(--nx-border-strong)"
+        },
         input: "var(--nx-input)",
+        // The boundary of a control that draws no fill of its own -- an
+        // unchecked checkbox, radio or switch. Separate from `input` because
+        // that one is the field border weight, which sits below the 3:1
+        // non-text minimum by design.
+        "control-border": "var(--nx-control-border)",
         ring: "var(--nx-ring)",
         background: "var(--nx-background)",
         foreground: "var(--nx-foreground)",
         primary: {
           DEFAULT: "var(--nx-primary)",
-          foreground: "var(--nx-primary-foreground)"
+          foreground: "var(--nx-primary-foreground)",
+          ...tintScale("--nx-primary")
         },
         secondary: {
           DEFAULT: "var(--nx-secondary)",
@@ -41,18 +51,18 @@ var uiPreset = {
           // Saturated fill for solid buttons, distinct from the text-tuned base.
           solid: "var(--nx-destructive-solid)",
           foreground: "var(--nx-destructive-foreground)",
-          ...statusScale("--nx-destructive")
+          ...tintScale("--nx-destructive")
         },
         success: {
           DEFAULT: "var(--nx-success)",
           solid: "var(--nx-success-solid)",
           foreground: "var(--nx-success-foreground)",
-          ...statusScale("--nx-success")
+          ...tintScale("--nx-success")
         },
         warning: {
           DEFAULT: "var(--nx-warning)",
           foreground: "var(--nx-warning-foreground)",
-          ...statusScale("--nx-warning")
+          ...tintScale("--nx-warning")
         },
         muted: {
           DEFAULT: "var(--nx-muted)",
@@ -60,7 +70,45 @@ var uiPreset = {
         },
         accent: {
           DEFAULT: "var(--nx-accent)",
-          foreground: "var(--nx-accent-foreground)"
+          foreground: "var(--nx-accent-foreground)",
+          ...tintScale("--nx-accent")
+        },
+        // The editor's highlight mark, and the syntax colors, so authored
+        // content and code blocks theme like everything else.
+        highlight: {
+          DEFAULT: "var(--nx-highlight)",
+          foreground: "var(--nx-highlight-foreground)"
+        },
+        code: {
+          bg: "var(--nx-code-bg)",
+          fg: "var(--nx-code-fg)",
+          comment: "var(--nx-code-comment)",
+          keyword: "var(--nx-code-keyword)",
+          string: "var(--nx-code-string)",
+          number: "var(--nx-code-number)",
+          function: "var(--nx-code-function)",
+          operator: "var(--nx-code-operator)",
+          punctuation: "var(--nx-code-punctuation)",
+          variable: "var(--nx-code-variable)",
+          tag: "var(--nx-code-tag)",
+          deleted: "var(--nx-code-deleted)",
+          inserted: "var(--nx-code-inserted)"
+        },
+        // `sidebar` and `sidebar-background` are the same value under two
+        // names, and `sidebar-accent` and `sidebar-accent-background` likewise.
+        // Both pairs exist in the v4 block and both spellings are in use, so
+        // dropping either here would leave a live utility generating nothing.
+        sidebar: {
+          DEFAULT: "var(--nx-sidebar-background)",
+          background: "var(--nx-sidebar-background)",
+          foreground: "var(--nx-sidebar-foreground)",
+          primary: "var(--nx-sidebar-primary)",
+          "primary-foreground": "var(--nx-sidebar-primary-foreground)",
+          accent: "var(--nx-sidebar-accent)",
+          "accent-background": "var(--nx-sidebar-accent)",
+          "accent-foreground": "var(--nx-sidebar-accent-foreground)",
+          border: "var(--nx-sidebar-border)",
+          ring: "var(--nx-sidebar-ring)"
         },
         popover: {
           DEFAULT: "var(--nx-popover)",

package/dist/tailwind-preset.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.mjs","sourcesContent":["/**\n * Tailwind CSS preset for @nextlyhq/ui components.\n *\n * Defines the CSS custom property contract that all UI components expect.\n * Consumers must provide the actual CSS variable values in their stylesheets.\n *\n * Usage (Tailwind v3, ESM):\n *   // tailwind.config.ts\n *   import uiPreset from \"@nextlyhq/ui/tailwind-preset\";\n *   export default { presets: [uiPreset], ... };\n *\n * Usage (Tailwind v3, CommonJS):\n *   // tailwind.config.js\n *   const { uiPreset } = require(\"@nextlyhq/ui/tailwind-preset\");\n *   module.exports = { presets: [uiPreset], ... };\n *\n * Usage (Tailwind v4 with @config):\n *   Consumers define the equivalent @theme tokens in their CSS.\n *   This file serves as the reference contract.\n */\n/**\n * The numbered shade scale for a status color, mixed from its base the same way\n * the v4 `@theme` block does, so v3 preset consumers get the same utilities the\n * components emit (`bg-destructive-700`, `bg-success-100 text-success-700`, ...).\n */\nconst statusScale = (base: string): Record<number, string> => ({\n  50: `color-mix(in srgb, var(${base}), white 95%)`,\n  100: `color-mix(in srgb, var(${base}), white 90%)`,\n  200: `color-mix(in srgb, var(${base}), white 70%)`,\n  300: `color-mix(in srgb, var(${base}), white 50%)`,\n  400: `color-mix(in srgb, var(${base}), white 30%)`,\n  500: `var(${base})`,\n  600: `color-mix(in srgb, var(${base}), black 10%)`,\n  700: `color-mix(in srgb, var(${base}), black 30%)`,\n  800: `color-mix(in srgb, var(${base}), black 50%)`,\n  900: `color-mix(in srgb, var(${base}), black 70%)`,\n  950: `color-mix(in srgb, var(${base}), black 85%)`,\n});\n\n/** @experimental */\nconst uiPreset = {\n  theme: {\n    extend: {\n      colors: {\n        // The modal scrim. Mapped here as well as in the v4 `@theme` block,\n        // because this preset is the documented Tailwind v3 path and reads\n        // none of that: without these two, `bg-overlay` generates no rule at\n        // all and every backdrop is transparent rather than merely unthemed.\n        overlay: \"var(--nx-overlay)\",\n        \"overlay-soft\": \"var(--nx-overlay-soft)\",\n        \"overlay-strong\": \"var(--nx-overlay-strong)\",\n        border: \"var(--nx-border)\",\n        input: \"var(--nx-input)\",\n        ring: \"var(--nx-ring)\",\n        background: \"var(--nx-background)\",\n        foreground: \"var(--nx-foreground)\",\n        primary: {\n          DEFAULT: \"var(--nx-primary)\",\n          foreground: \"var(--nx-primary-foreground)\",\n        },\n        secondary: {\n          DEFAULT: \"var(--nx-secondary)\",\n          foreground: \"var(--nx-secondary-foreground)\",\n        },\n        destructive: {\n          DEFAULT: \"var(--nx-destructive)\",\n          // Saturated fill for solid buttons, distinct from the text-tuned base.\n          solid: \"var(--nx-destructive-solid)\",\n          foreground: \"var(--nx-destructive-foreground)\",\n          ...statusScale(\"--nx-destructive\"),\n        },\n        success: {\n          DEFAULT: \"var(--nx-success)\",\n          solid: \"var(--nx-success-solid)\",\n          foreground: \"var(--nx-success-foreground)\",\n          ...statusScale(\"--nx-success\"),\n        },\n        warning: {\n          DEFAULT: \"var(--nx-warning)\",\n          foreground: \"var(--nx-warning-foreground)\",\n          ...statusScale(\"--nx-warning\"),\n        },\n        muted: {\n          DEFAULT: \"var(--nx-muted)\",\n          foreground: \"var(--nx-muted-foreground)\",\n        },\n        accent: {\n          DEFAULT: \"var(--nx-accent)\",\n          foreground: \"var(--nx-accent-foreground)\",\n        },\n        popover: {\n          DEFAULT: \"var(--nx-popover)\",\n          foreground: \"var(--nx-popover-foreground)\",\n        },\n        card: {\n          DEFAULT: \"var(--nx-card)\",\n          foreground: \"var(--nx-card-foreground)\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.3s cubic-bezier(0.87, 0, 0.13, 1)\",\n        \"accordion-up\": \"accordion-up 0.3s cubic-bezier(0.87, 0, 0.13, 1)\",\n      },\n    },\n  },\n};\n\n// Exported both ways on purpose. CommonJS cannot represent a default-only\n// module without `module.exports =`, which makes the emitted declarations\n// disagree with the runtime shape (attw's FalseExportDefault); a named export\n// alongside it keeps `require()` and `import` consistent and typed.\nexport { uiPreset };\nexport default uiPreset;\n"]}
+{"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.mjs","sourcesContent":["/**\n * Tailwind CSS preset for @nextlyhq/ui components.\n *\n * Defines the CSS custom property contract that all UI components expect.\n * Consumers must provide the actual CSS variable values in their stylesheets.\n *\n * Usage (Tailwind v3, ESM):\n *   // tailwind.config.ts\n *   import uiPreset from \"@nextlyhq/ui/tailwind-preset\";\n *   export default { presets: [uiPreset], ... };\n *\n * Usage (Tailwind v3, CommonJS):\n *   // tailwind.config.js\n *   const { uiPreset } = require(\"@nextlyhq/ui/tailwind-preset\");\n *   module.exports = { presets: [uiPreset], ... };\n *\n * Usage (Tailwind v4 with @config):\n *   Consumers define the equivalent @theme tokens in their CSS.\n *   This file serves as the reference contract.\n */\n/**\n * The numbered shade scale for a color, mixed from its base the same way the v4\n * `@theme` block does, so v3 preset consumers get the same utilities the\n * components emit (`bg-destructive-700`, `bg-primary-500`, `border-primary-300`).\n *\n * Named for the derivation rather than for one caller: the status colors, the\n * primary and the accent all use it, and `@theme` derives all five identically.\n */\nconst tintScale = (base: string): Record<number, string> => ({\n  50: `color-mix(in srgb, var(${base}), white 95%)`,\n  100: `color-mix(in srgb, var(${base}), white 90%)`,\n  200: `color-mix(in srgb, var(${base}), white 70%)`,\n  300: `color-mix(in srgb, var(${base}), white 50%)`,\n  400: `color-mix(in srgb, var(${base}), white 30%)`,\n  500: `var(${base})`,\n  600: `color-mix(in srgb, var(${base}), black 10%)`,\n  700: `color-mix(in srgb, var(${base}), black 30%)`,\n  800: `color-mix(in srgb, var(${base}), black 50%)`,\n  900: `color-mix(in srgb, var(${base}), black 70%)`,\n  950: `color-mix(in srgb, var(${base}), black 85%)`,\n});\n\n/** @experimental */\nconst uiPreset = {\n  theme: {\n    extend: {\n      colors: {\n        // The modal scrim. Mapped here as well as in the v4 `@theme` block,\n        // because this preset is the documented Tailwind v3 path and reads\n        // none of that: without these two, `bg-overlay` generates no rule at\n        // all and every backdrop is transparent rather than merely unthemed.\n        overlay: \"var(--nx-overlay)\",\n        \"overlay-soft\": \"var(--nx-overlay-soft)\",\n        \"overlay-strong\": \"var(--nx-overlay-strong)\",\n        border: {\n          DEFAULT: \"var(--nx-border)\",\n          subtle: \"var(--nx-border-subtle)\",\n          strong: \"var(--nx-border-strong)\",\n        },\n        input: \"var(--nx-input)\",\n        // The boundary of a control that draws no fill of its own -- an\n        // unchecked checkbox, radio or switch. Separate from `input` because\n        // that one is the field border weight, which sits below the 3:1\n        // non-text minimum by design.\n        \"control-border\": \"var(--nx-control-border)\",\n        ring: \"var(--nx-ring)\",\n        background: \"var(--nx-background)\",\n        foreground: \"var(--nx-foreground)\",\n        primary: {\n          DEFAULT: \"var(--nx-primary)\",\n          foreground: \"var(--nx-primary-foreground)\",\n          ...tintScale(\"--nx-primary\"),\n        },\n        secondary: {\n          DEFAULT: \"var(--nx-secondary)\",\n          foreground: \"var(--nx-secondary-foreground)\",\n        },\n        destructive: {\n          DEFAULT: \"var(--nx-destructive)\",\n          // Saturated fill for solid buttons, distinct from the text-tuned base.\n          solid: \"var(--nx-destructive-solid)\",\n          foreground: \"var(--nx-destructive-foreground)\",\n          ...tintScale(\"--nx-destructive\"),\n        },\n        success: {\n          DEFAULT: \"var(--nx-success)\",\n          solid: \"var(--nx-success-solid)\",\n          foreground: \"var(--nx-success-foreground)\",\n          ...tintScale(\"--nx-success\"),\n        },\n        warning: {\n          DEFAULT: \"var(--nx-warning)\",\n          foreground: \"var(--nx-warning-foreground)\",\n          ...tintScale(\"--nx-warning\"),\n        },\n        muted: {\n          DEFAULT: \"var(--nx-muted)\",\n          foreground: \"var(--nx-muted-foreground)\",\n        },\n        accent: {\n          DEFAULT: \"var(--nx-accent)\",\n          foreground: \"var(--nx-accent-foreground)\",\n          ...tintScale(\"--nx-accent\"),\n        },\n        // The editor's highlight mark, and the syntax colors, so authored\n        // content and code blocks theme like everything else.\n        highlight: {\n          DEFAULT: \"var(--nx-highlight)\",\n          foreground: \"var(--nx-highlight-foreground)\",\n        },\n        code: {\n          bg: \"var(--nx-code-bg)\",\n          fg: \"var(--nx-code-fg)\",\n          comment: \"var(--nx-code-comment)\",\n          keyword: \"var(--nx-code-keyword)\",\n          string: \"var(--nx-code-string)\",\n          number: \"var(--nx-code-number)\",\n          function: \"var(--nx-code-function)\",\n          operator: \"var(--nx-code-operator)\",\n          punctuation: \"var(--nx-code-punctuation)\",\n          variable: \"var(--nx-code-variable)\",\n          tag: \"var(--nx-code-tag)\",\n          deleted: \"var(--nx-code-deleted)\",\n          inserted: \"var(--nx-code-inserted)\",\n        },\n        // `sidebar` and `sidebar-background` are the same value under two\n        // names, and `sidebar-accent` and `sidebar-accent-background` likewise.\n        // Both pairs exist in the v4 block and both spellings are in use, so\n        // dropping either here would leave a live utility generating nothing.\n        sidebar: {\n          DEFAULT: \"var(--nx-sidebar-background)\",\n          background: \"var(--nx-sidebar-background)\",\n          foreground: \"var(--nx-sidebar-foreground)\",\n          primary: \"var(--nx-sidebar-primary)\",\n          \"primary-foreground\": \"var(--nx-sidebar-primary-foreground)\",\n          accent: \"var(--nx-sidebar-accent)\",\n          \"accent-background\": \"var(--nx-sidebar-accent)\",\n          \"accent-foreground\": \"var(--nx-sidebar-accent-foreground)\",\n          border: \"var(--nx-sidebar-border)\",\n          ring: \"var(--nx-sidebar-ring)\",\n        },\n        popover: {\n          DEFAULT: \"var(--nx-popover)\",\n          foreground: \"var(--nx-popover-foreground)\",\n        },\n        card: {\n          DEFAULT: \"var(--nx-card)\",\n          foreground: \"var(--nx-card-foreground)\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.3s cubic-bezier(0.87, 0, 0.13, 1)\",\n        \"accordion-up\": \"accordion-up 0.3s cubic-bezier(0.87, 0, 0.13, 1)\",\n      },\n    },\n  },\n};\n\n// Exported both ways on purpose. CommonJS cannot represent a default-only\n// module without `module.exports =`, which makes the emitted declarations\n// disagree with the runtime shape (attw's FalseExportDefault); a named export\n// alongside it keeps `require()` and `import` consistent and typed.\nexport { uiPreset };\nexport default uiPreset;\n"]}

package/dist/theme.css

@@ -139,6 +139,7 @@
   --color-border-subtle: var(--nx-border-subtle);
   --color-border-strong: var(--nx-border-strong);
   --color-input: var(--nx-input);
+  --color-control-border: var(--nx-control-border);
   --color-ring: var(--nx-ring);
   --color-background: var(--nx-background);
   --color-foreground: var(--nx-foreground);
@@ -758,9 +759,12 @@
    * light enough to read as text on the page is too light for white text, so
    * success splits the fill and destructive flips its ink to black instead.
    * The on-color token is what varies, not just the fill. */
-  /* Darkened from red-500; renders as #d92c32, ~4.8:1 as text on white. */
-  --nx-destructive: oklch(0.5661 0.19 23.03);
-  --nx-destructive-solid: oklch(0.5661 0.19 23.03);
+  /* red-500 itself, the reference palette's red. It is lighter than the 4.5:1
+   * text minimum allows; darkening it to pass reads as a different colour, and
+   * the palette is built around this one. `contrast/accepted.ts` records the
+   * affected pairings with their measured ratios. */
+  --nx-destructive: oklch(0.63 0.19 23.03);
+  --nx-destructive-solid: oklch(0.63 0.19 23.03);
   --nx-destructive-foreground: oklch(1 0 0);
   /* white */
   /* Darkened from green-600; renders as #00852c, ~4.8:1 as text on white. */
@@ -828,10 +832,33 @@
   --nx-overlay-soft: oklch(0 0 0 / 0.4);
   --nx-border-subtle: color-mix(in srgb, oklch(0.92 0 0), transparent 60%);
   --nx-border: oklch(0.92 0 0);
-  /* Alpha raised so the composited strong border clears WCAG 3:1 / ~4:1 (was 2.11:1). */
-  --nx-border-strong: oklch(0.58 0 0);
-  /* Darkened so the field border clears WCAG 3:1 on the page (was 2.32:1). */
-  --nx-input: oklch(0.6154 0 0);
+  /* These two sit BELOW the WCAG 1.4.11 3:1 minimum for a control boundary,
+   * deliberately, to keep the light border weight the palette is designed
+   * around. `contrast/accepted.ts` records each affected pairing with its
+   * measured ratio and is what keeps that visible rather than silent; the
+   * contrast suite reads that list, so neither token can drift further without
+   * failing. */
+  --nx-border-strong: color-mix(in srgb, oklch(0.92 0 0), black 25%);
+  --nx-input: oklch(0.94 0 0);
+  /* The boundary of a control that has NOTHING ELSE to identify it.
+   *
+   * A text field at --nx-input is identifiable without its edge: it carries a
+   * label, a placeholder, a value, and a focus ring the moment it is used. An
+   * unchecked checkbox or radio is only the box. Its border is not decoration
+   * around the control, it IS the control, so 1.4.11's 3:1 applies with nothing
+   * to fall back on -- and at the reference palette's border weight the box is
+   * effectively invisible.
+   *
+   * These were one token, which is why the reference weight could not be taken
+   * without losing the checkbox. They are two questions -- "how heavy is a field
+   * edge" and "can this control be seen at all" -- and they only shared an
+   * answer by accident. Splitting them is what lets the field borders match the
+   * reference while the controls stay identifiable.
+   *
+   * Solved to the LIGHTEST value that still clears 3:1 with the margin the
+   * contrast suite requires, against the darkest surface a control lands on, so
+   * it sits as close to the reference weight as the criterion permits. */
+  --nx-control-border: oklch(0.62 0 0);
   --nx-ring: var(--nx-primary);
 
   /* The base colour of the elevation ramp (--shadow-sm..xl, -inner-subtle,
@@ -871,19 +898,35 @@
   /* Sidebar specific colors - using Slate scale */
   --nx-sidebar-background: oklch(0.99 0 0);
   /* flat with the content surface; nav is separated by borders, not fill */
-  /* Resting nav ink sits a step back from the active ink, so an active row
-   * reads as emphasised by its INK as well as its fill. The chosen palette
-   * used one value for both, which leaves the fill carrying the whole signal
-   * -- and the fill is the part a low-contrast surface weakens first. */
-  --nx-sidebar-foreground: oklch(0.44 0 0);
+  /* Resting and active nav ink are the same value in light mode: nav labels sit
+   * at body-text weight rather than a step back from it, which is the reference
+   * palette's arrangement.
+   *
+   * So the active row is marked by its FILL (--nx-sidebar-accent) TOGETHER WITH
+   * a font-weight change, and the pair is load-bearing rather than decorative.
+   * The fill alone is about 1.11:1, far under the 3:1 WCAG 1.4.11 asks of
+   * information identifying a component's state, and there is no exemption for
+   * a large filled region -- that is 1.4.3, and it is about text. The weight
+   * change is what satisfies the criterion, being a difference that is not a
+   * colour and so carries no ratio at all.
+   *
+   * Removing `data-[active=true]:font-medium` from the sidebar menu buttons
+   * therefore leaves the nav with no conforming active state, and
+   * `contrast/__tests__/sidebar-ink-hierarchy.test.ts` fails per variant if
+   * either loses it.
+   *
+   * Dark mode keeps the two-step ink relationship instead, where a near-white
+   * active ink on a dark row is what separates the states. */
+  --nx-sidebar-foreground: oklch(0 0 0);
   --nx-sidebar-primary: oklch(0 0 0);
   --nx-sidebar-primary-foreground: oklch(1 0 0);
   /* slate-50 */
   --nx-sidebar-accent: oklch(0.94 0 0);
   /* slate-100 */
   --nx-sidebar-accent-foreground: oklch(0 0 0);
-  /* Darkened so the sidebar border clears WCAG 3:1 on its surface (was 1.23:1). */
-  --nx-sidebar-border: oklch(0.63 0 0);
+  /* Below the 3:1 boundary minimum, deliberately, to match the border weight of
+   * the rest of the palette. Recorded in `contrast/accepted.ts`. */
+  --nx-sidebar-border: oklch(0.94 0 0);
   --nx-sidebar-ring: var(--nx-primary);
 
   /* Data table specific colors */
@@ -958,7 +1001,11 @@
   --nx-destructive-foreground: oklch(0 0 0);
   /* Lightened green so it reads as text at WCAG 4.5:1 on the dark page and on
    * the lighter popover surface (was 4.17:1 on the page, 4.29:1 on a popover). */
-  --nx-success: oklch(0.6 0.1921 149.58);
+  /* Lightened a step so success ink clears 4.5:1 on --nx-muted with the margin
+   * the suite requires. Muted is the binding surface here, being the lightest
+   * of the dark surfaces this ink lands on; against card or page it was never
+   * close. */
+  --nx-success: oklch(0.61 0.1921 149.58);
   /* Darker green fill so white on-color button text clears 4.5:1. */
   --nx-success-solid: oklch(0.5225 0.1921 149.58);
   --nx-success-foreground: oklch(1 0 0);
@@ -1010,6 +1057,9 @@
   /* Brightened so the field border clears WCAG 3:1 on the lighter popover
    * surface as well as the page and card (was 1.73:1 on a popover). */
   --nx-input: oklch(0.5445 0 0);
+  /* Dark mode never gave up the boundary minimum, so the control border simply
+     tracks the field border here and the split costs nothing. */
+  --nx-control-border: oklch(0.5445 0 0);
   --nx-ring: var(--nx-primary);
 
   /* Black in dark mode too: the ramp reads as depth against the deep surfaces

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextlyhq/ui",
-  "version": "0.0.2-alpha.57",
+  "version": "0.0.2-alpha.58",
   "description": "Nextly UI — Reusable React component library for Nextly plugins and custom admin UIs",
   "license": "MIT",
   "keywords": [
@@ -95,13 +95,14 @@
     "rimraf": "^6.1.3",
     "tailwindcss": "^4.3.2",
     "tsup": "^8.5.0",
+    "tsx": "^4.20.5",
     "typescript": "^5.9.3",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^4.1.0",
-    "@nextlyhq/admin-css": "0.0.2-alpha.57",
-    "@nextlyhq/eslint-config": "0.0.2-alpha.57",
-    "@nextlyhq/module-specifiers": "0.0.2-alpha.57",
-    "@nextlyhq/tsconfig": "0.0.2-alpha.57"
+    "@nextlyhq/admin-css": "0.0.2-alpha.58",
+    "@nextlyhq/eslint-config": "0.0.2-alpha.58",
+    "@nextlyhq/module-specifiers": "0.0.2-alpha.58",
+    "@nextlyhq/tsconfig": "0.0.2-alpha.58"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -147,9 +148,9 @@
   "author": "Nextly <contact@nextlyhq.com> (https://nextlyhq.com)",
   "scripts": {
     "build": "pnpm build:js && node scripts/build-css.mjs",
-    "build:js": "rimraf dist && tsup && tsup --config tsup.server-safe.config.ts && node scripts/check-client-directive.mjs && node scripts/check-server-safe-artifacts.mjs",
+    "build:js": "rimraf dist && tsup && tsup --config tsup.server-safe.config.ts && tsx scripts/check-client-directive.ts && tsx scripts/check-server-safe-artifacts.ts",
     "build:css": "node scripts/build-css.mjs",
-    "dev": "tsup --watch & tsup --config tsup.server-safe.config.ts --watch & wait",
+    "dev": "node scripts/dev.mjs",
     "check-types": "tsc --noEmit && tsc --noEmit -p tsconfig.tests.json",
     "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",