@_linked/primitives 1.3.2 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @\_linked/primitives
 
+## 1.4.0
+
+### Minor Changes
+
+- [#39](https://github.com/linked-fw/primitives/pull/39) [`8130aa3`](https://github.com/linked-fw/primitives/commit/8130aa3f02682f1ced21d8767a6049d53a2744a6) Thanks [@flyon](https://github.com/flyon)! - `ConfirmDialog`'s `tone="danger"` was visually inert; `Button` now has a `danger` colour
+
+  `tone="danger"` applied a `.danger` class of ConfirmDialog's own stylesheet to the confirm
+  button. That class has specificity 0-1-0, while `Button` colours itself with compound
+  selectors — `.Root.primary.solid`, 0-3-0 — so the override never won. Measured computed
+  `background-color` on the danger button was `rgb(37, 99, 235)` (`--button-primary-bg`),
+  identical to a default confirm button. Every destructive confirmation therefore rendered in
+  the primary colour: the class was on the element, and the colour was not.
+
+  Colour is a `Button` prop, so that is now how tone travels: `Button`'s `color` union gains
+  `'danger'` with rules for all four variants, reading `--button-danger-*` and falling back to
+  the `--intent-danger-*` family, and `ConfirmDialog` passes `color="danger"` instead of a
+  class. Computed `background-color` is now `rgb(239, 68, 68)` (`--intent-danger-icon`), with
+  `--intent-danger-text` on hover.
+
+  `color="danger"` is new public API on `Button`. The `--confirm-dialog-danger-bg`,
+  `--confirm-dialog-danger-bg-hover`, `--confirm-dialog-danger-border` and
+  `--confirm-dialog-danger-text` custom properties are gone — they were read only by the rule
+  that never applied, so nothing that worked has been removed. Re-skin the destructive button
+  through `--button-danger-bg` / `--button-danger-bg-hover` / `--button-danger-border` /
+  `--button-danger-color`, or through `--intent-danger-*` to move every danger affordance at
+  once.
+
 ## 1.3.2
 
 ### Patch Changes

package/lib/cjs/components/Button.d.ts

@@ -2,7 +2,13 @@ import * as React from 'react';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     asChild?: boolean;
     variant?: 'solid' | 'outline' | 'ghost' | 'link';
-    color?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Which colour family the button speaks in. `danger` is the destructive one — a
+     * statement about consequence, and a Button prop rather than a class a caller adds,
+     * because the colour classes here are compound (`.Root.primary.solid`) and a bare
+     * class handed in through `className` loses the cascade to them every time.
+     */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'danger';
     size?: 'small' | 'medium' | 'large' | 'default';
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/cjs/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,4EAAwC;AACxC,gEAAqD;AACrD,qDAA4C;AAU5C,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,KAAK,OAEhB,EADI,KAAK,cANV,oDAOC,CADS;IAIV,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAElC,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,IAAA,eAAE,EACX,2BAAK,CAAC,IAAI,EACV,2BAAK,CAAC,OAAO,CAAC,EACd,2BAAK,CAAC,KAAK,CAAC,EACZ,2BAAK,CAAC,IAAI,CAAC,EACX,UAAU,IAAI,2BAAK,CAAC,QAAQ,EAC5B,SAAS,CACV,EACD,GAAG,EAAE,GAAG,IACJ,KAAK,EACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,wBAAM;AAFf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,4EAAwC;AACxC,gEAAqD;AACrD,qDAA4C;AAgB5C,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,KAAK,OAEhB,EADI,KAAK,cANV,oDAOC,CADS;IAIV,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAElC,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,IAAA,eAAE,EACX,2BAAK,CAAC,IAAI,EACV,2BAAK,CAAC,OAAO,CAAC,EACd,2BAAK,CAAC,KAAK,CAAC,EACZ,2BAAK,CAAC,IAAI,CAAC,EACX,UAAU,IAAI,2BAAK,CAAC,QAAQ,EAC5B,SAAS,CACV,EACD,GAAG,EAAE,GAAG,IACJ,KAAK,EACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,wBAAM;AAFf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/lib/cjs/components/Button.module.css

@@ -220,6 +220,56 @@
     }
   }
 
+  /* Destructive. Reads the intent family rather than a red primitive, so an app that
+     restyles what "danger" looks like restyles this too; the literal is the last-resort
+     fallback for a theme that defines neither, same contract as Badge. */
+  &.danger {
+    &.solid {
+      background: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+      color: var(--button-danger-color, var(--control-text-contrast, #fff));
+      border-color: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+
+      &:hover {
+        background: var(
+          --button-danger-bg-hover,
+          var(--intent-danger-text, #b91c1c)
+        );
+        color: var(--button-danger-color-hover, var(--control-text-contrast, #fff));
+      }
+    }
+
+    &.outline {
+      background: transparent;
+      color: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+      border: 1px solid
+        var(--button-danger-border, var(--intent-danger-border, #dc2626));
+
+      &:hover {
+        background: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+        color: var(--button-danger-color, var(--control-text-contrast, #fff));
+      }
+    }
+
+    &.ghost {
+      background: transparent;
+      color: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+
+      &:hover {
+        background: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+        color: var(--button-danger-color, var(--control-text-contrast, #fff));
+      }
+    }
+
+    &.link {
+      background: transparent;
+      color: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
   /* size: 'small' | 'medium' | 'large' || 'default'*/
   &.small {
     padding: var(--button-padding-sm-y) var(--button-padding-sm-x);

package/lib/cjs/components/ConfirmDialog.d.ts

@@ -9,7 +9,10 @@ export interface ConfirmDialogProps {
     cancelText?: string;
     /**
      * `danger` for a destructive action. Not a colour — a statement about consequence, which
-     * is what `--intent-danger-*` exists to express.
+     * is what `--intent-danger-*` exists to express. It reaches the confirm button as
+     * `<Button color="danger">`, so an app re-skins it through `--button-danger-*` (or the
+     * `--intent-danger-*` family behind it) rather than through a `--confirm-dialog-danger-*`
+     * of its own.
      */
     tone?: 'default' | 'danger';
     /** The confirm action is in flight: both buttons lock. */

package/lib/cjs/components/ConfirmDialog.js

@@ -63,6 +63,6 @@ function ConfirmDialog({ open, onOpenChange, onConfirm, title, message, confirmT
             React.createElement(AlertDialog_js_1.AlertDialog.Footer, null,
                 React.createElement(AlertDialog_js_1.AlertDialog.Cancel, { asChild: true },
                     React.createElement(Button_js_1.Button, { variant: "ghost", disabled: isLoading }, cancelText)),
-                React.createElement(Button_js_1.Button, { className: (0, ClassNames_1.cl)(tone === 'danger' && ConfirmDialog_module_css_1.default.danger), onClick: onConfirm, disabled: isLoading || confirmDisabled }, isLoading && loadingContent ? loadingContent : confirmText)))));
+                React.createElement(Button_js_1.Button, { color: tone === 'danger' ? 'danger' : 'primary', onClick: onConfirm, disabled: isLoading || confirmDisabled }, isLoading && loadingContent ? loadingContent : confirmText)))));
 }
 //# sourceMappingURL=ConfirmDialog.js.map

package/lib/cjs/components/ConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,sCAiDC;AA3FD,6CAA+B;AAC/B,gEAAmD;AACnD,qDAA6C;AAC7C,2CAAmC;AACnC,0FAA+C;AA0B/C;;;;;;;;;;;GAWG;AACH,SAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,EACP,WAAW,GAAG,SAAS,EACvB,UAAU,GAAG,QAAQ,EACrB,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,KAAK,EACvB,cAAc,EACd,IAAI,GAAG,KAAK,EACZ,SAAS,GACU;IACnB,OAAO,CACL,oBAAC,4BAAW,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY;QACtD,oBAAC,4BAAW,CAAC,OAAO,IAClB,SAAS,EAAE,IAAA,eAAE,EAAC,kCAAK,CAAC,OAAO,EAAE,IAAI,IAAI,kCAAK,CAAC,IAAI,EAAE,SAAS,CAAC;YAE3D,oBAAC,4BAAW,CAAC,MAAM;gBACjB,oBAAC,4BAAW,CAAC,KAAK,QAAE,KAAK,CAAqB;gBAI9C,oBAAC,4BAAW,CAAC,WAAW,IAAC,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,IAC1D,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAM,OAAO,CAAO,CACrC,CACP;YACrB,oBAAC,4BAAW,CAAC,MAAM;gBACjB,oBAAC,4BAAW,CAAC,MAAM,IAAC,OAAO;oBACzB,oBAAC,kBAAM,IAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,SAAS,IACxC,UAAU,CACJ,CACU;gBAIrB,oBAAC,kBAAM,IACL,SAAS,EAAE,IAAA,eAAE,EAAC,IAAI,KAAK,QAAQ,IAAI,kCAAK,CAAC,MAAM,CAAC,EAChD,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,IAAI,eAAe,IAErC,SAAS,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,WAAW,CACpD,CACU,CACD,CACL,CACpB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,sCAqDC;AAlGD,6CAA+B;AAC/B,gEAAmD;AACnD,qDAA6C;AAC7C,2CAAmC;AACnC,0FAA+C;AA6B/C;;;;;;;;;;;GAWG;AACH,SAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,EACP,WAAW,GAAG,SAAS,EACvB,UAAU,GAAG,QAAQ,EACrB,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,KAAK,EACvB,cAAc,EACd,IAAI,GAAG,KAAK,EACZ,SAAS,GACU;IACnB,OAAO,CACL,oBAAC,4BAAW,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY;QACtD,oBAAC,4BAAW,CAAC,OAAO,IAClB,SAAS,EAAE,IAAA,eAAE,EAAC,kCAAK,CAAC,OAAO,EAAE,IAAI,IAAI,kCAAK,CAAC,IAAI,EAAE,SAAS,CAAC;YAE3D,oBAAC,4BAAW,CAAC,MAAM;gBACjB,oBAAC,4BAAW,CAAC,KAAK,QAAE,KAAK,CAAqB;gBAI9C,oBAAC,4BAAW,CAAC,WAAW,IAAC,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,IAC1D,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAM,OAAO,CAAO,CACrC,CACP;YACrB,oBAAC,4BAAW,CAAC,MAAM;gBACjB,oBAAC,4BAAW,CAAC,MAAM,IAAC,OAAO;oBACzB,oBAAC,kBAAM,IAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,SAAS,IACxC,UAAU,CACJ,CACU;gBAQrB,oBAAC,kBAAM,IACL,KAAK,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC/C,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,IAAI,eAAe,IAErC,SAAS,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,WAAW,CACpD,CACU,CACD,CACL,CACpB,CAAC;AACJ,CAAC"}

package/lib/cjs/components/ConfirmDialog.module.css

@@ -8,15 +8,3 @@
 .wide {
   max-width: var(--confirm-dialog-width-wide, 56rem);
 }
-
-/* Destructive confirmation. Reads the intent family rather than a red primitive, so an app
-   that restyles what "danger" looks like restyles this too. */
-.danger {
-  background: var(--confirm-dialog-danger-bg, var(--intent-danger-icon));
-  border-color: var(--confirm-dialog-danger-border, var(--intent-danger-border));
-  color: var(--confirm-dialog-danger-text, var(--color-white));
-}
-
-.danger:hover:not(:disabled) {
-  background: var(--confirm-dialog-danger-bg-hover, var(--intent-danger-text));
-}

package/lib/cjs/package.json

@@ -10,7 +10,7 @@
     "type": "git",
     "url": "git+https://github.com/linked-fw/primitives.git"
   },
-  "version": "1.3.2",
+  "version": "1.4.0",
   "packageManager": "npm@11.19.1",
   "linkedPackage": true,
   "license": "ISC",

package/lib/esm/components/Button.d.ts

@@ -2,7 +2,13 @@ import * as React from 'react';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     asChild?: boolean;
     variant?: 'solid' | 'outline' | 'ghost' | 'link';
-    color?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Which colour family the button speaks in. `danger` is the destructive one — a
+     * statement about consequence, and a Button prop rather than a class a caller adds,
+     * because the colour classes here are compound (`.Root.primary.solid`) and a bare
+     * class handed in through `className` loses the cascade to them every time.
+     */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'danger';
     size?: 'small' | 'medium' | 'large' | 'default';
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/esm/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAU5C,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,SAAS,EACT,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAElC,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,OAAO,CAAC,EACd,KAAK,CAAC,KAAK,CAAC,EACZ,KAAK,CAAC,IAAI,CAAC,EACX,UAAU,IAAI,KAAK,CAAC,QAAQ,EAC5B,SAAS,CACV,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAgB5C,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,SAAS,EACT,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAElC,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,OAAO,CAAC,EACd,KAAK,CAAC,KAAK,CAAC,EACZ,KAAK,CAAC,IAAI,CAAC,EACX,UAAU,IAAI,KAAK,CAAC,QAAQ,EAC5B,SAAS,CACV,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/lib/esm/components/Button.module.css

@@ -220,6 +220,56 @@
     }
   }
 
+  /* Destructive. Reads the intent family rather than a red primitive, so an app that
+     restyles what "danger" looks like restyles this too; the literal is the last-resort
+     fallback for a theme that defines neither, same contract as Badge. */
+  &.danger {
+    &.solid {
+      background: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+      color: var(--button-danger-color, var(--control-text-contrast, #fff));
+      border-color: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+
+      &:hover {
+        background: var(
+          --button-danger-bg-hover,
+          var(--intent-danger-text, #b91c1c)
+        );
+        color: var(--button-danger-color-hover, var(--control-text-contrast, #fff));
+      }
+    }
+
+    &.outline {
+      background: transparent;
+      color: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+      border: 1px solid
+        var(--button-danger-border, var(--intent-danger-border, #dc2626));
+
+      &:hover {
+        background: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+        color: var(--button-danger-color, var(--control-text-contrast, #fff));
+      }
+    }
+
+    &.ghost {
+      background: transparent;
+      color: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+
+      &:hover {
+        background: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+        color: var(--button-danger-color, var(--control-text-contrast, #fff));
+      }
+    }
+
+    &.link {
+      background: transparent;
+      color: var(--button-danger-bg, var(--intent-danger-icon, #dc2626));
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
   /* size: 'small' | 'medium' | 'large' || 'default'*/
   &.small {
     padding: var(--button-padding-sm-y) var(--button-padding-sm-x);

package/lib/esm/components/ConfirmDialog.d.ts

@@ -9,7 +9,10 @@ export interface ConfirmDialogProps {
     cancelText?: string;
     /**
      * `danger` for a destructive action. Not a colour — a statement about consequence, which
-     * is what `--intent-danger-*` exists to express.
+     * is what `--intent-danger-*` exists to express. It reaches the confirm button as
+     * `<Button color="danger">`, so an app re-skins it through `--button-danger-*` (or the
+     * `--intent-danger-*` family behind it) rather than through a `--confirm-dialog-danger-*`
+     * of its own.
      */
     tone?: 'default' | 'danger';
     /** The confirm action is in flight: both buttons lock. */

package/lib/esm/components/ConfirmDialog.js

@@ -24,6 +24,6 @@ export function ConfirmDialog({ open, onOpenChange, onConfirm, title, message, c
             React.createElement(AlertDialog.Footer, null,
                 React.createElement(AlertDialog.Cancel, { asChild: true },
                     React.createElement(Button, { variant: "ghost", disabled: isLoading }, cancelText)),
-                React.createElement(Button, { className: cl(tone === 'danger' && style.danger), onClick: onConfirm, disabled: isLoading || confirmDisabled }, isLoading && loadingContent ? loadingContent : confirmText)))));
+                React.createElement(Button, { color: tone === 'danger' ? 'danger' : 'primary', onClick: onConfirm, disabled: isLoading || confirmDisabled }, isLoading && loadingContent ? loadingContent : confirmText)))));
 }
 //# sourceMappingURL=ConfirmDialog.js.map

package/lib/esm/components/ConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,EAAE,EAAC,MAAM,iCAAiC,CAAC;AACnD,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AACnC,OAAO,KAAK,MAAM,4BAA4B,CAAC;AA0B/C;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,EACP,WAAW,GAAG,SAAS,EACvB,UAAU,GAAG,QAAQ,EACrB,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,KAAK,EACvB,cAAc,EACd,IAAI,GAAG,KAAK,EACZ,SAAS,GACU;IACnB,OAAO,CACL,oBAAC,WAAW,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY;QACtD,oBAAC,WAAW,CAAC,OAAO,IAClB,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC;YAE3D,oBAAC,WAAW,CAAC,MAAM;gBACjB,oBAAC,WAAW,CAAC,KAAK,QAAE,KAAK,CAAqB;gBAI9C,oBAAC,WAAW,CAAC,WAAW,IAAC,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,IAC1D,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAM,OAAO,CAAO,CACrC,CACP;YACrB,oBAAC,WAAW,CAAC,MAAM;gBACjB,oBAAC,WAAW,CAAC,MAAM,IAAC,OAAO;oBACzB,oBAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,SAAS,IACxC,UAAU,CACJ,CACU;gBAIrB,oBAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,EAChD,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,IAAI,eAAe,IAErC,SAAS,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,WAAW,CACpD,CACU,CACD,CACL,CACpB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,EAAE,EAAC,MAAM,iCAAiC,CAAC;AACnD,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AACnC,OAAO,KAAK,MAAM,4BAA4B,CAAC;AA6B/C;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,EACP,WAAW,GAAG,SAAS,EACvB,UAAU,GAAG,QAAQ,EACrB,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,KAAK,EACvB,cAAc,EACd,IAAI,GAAG,KAAK,EACZ,SAAS,GACU;IACnB,OAAO,CACL,oBAAC,WAAW,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY;QACtD,oBAAC,WAAW,CAAC,OAAO,IAClB,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC;YAE3D,oBAAC,WAAW,CAAC,MAAM;gBACjB,oBAAC,WAAW,CAAC,KAAK,QAAE,KAAK,CAAqB;gBAI9C,oBAAC,WAAW,CAAC,WAAW,IAAC,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,IAC1D,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAM,OAAO,CAAO,CACrC,CACP;YACrB,oBAAC,WAAW,CAAC,MAAM;gBACjB,oBAAC,WAAW,CAAC,MAAM,IAAC,OAAO;oBACzB,oBAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,SAAS,IACxC,UAAU,CACJ,CACU;gBAQrB,oBAAC,MAAM,IACL,KAAK,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC/C,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,IAAI,eAAe,IAErC,SAAS,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,WAAW,CACpD,CACU,CACD,CACL,CACpB,CAAC;AACJ,CAAC"}

package/lib/esm/components/ConfirmDialog.module.css

@@ -8,15 +8,3 @@
 .wide {
   max-width: var(--confirm-dialog-width-wide, 56rem);
 }
-
-/* Destructive confirmation. Reads the intent family rather than a red primitive, so an app
-   that restyles what "danger" looks like restyles this too. */
-.danger {
-  background: var(--confirm-dialog-danger-bg, var(--intent-danger-icon));
-  border-color: var(--confirm-dialog-danger-border, var(--intent-danger-border));
-  color: var(--confirm-dialog-danger-text, var(--color-white));
-}
-
-.danger:hover:not(:disabled) {
-  background: var(--confirm-dialog-danger-bg-hover, var(--intent-danger-text));
-}

package/lib/esm/package.json

@@ -10,7 +10,7 @@
     "type": "git",
     "url": "git+https://github.com/linked-fw/primitives.git"
   },
-  "version": "1.3.2",
+  "version": "1.4.0",
   "packageManager": "npm@11.19.1",
   "linkedPackage": true,
   "license": "ISC",

package/package.json

@@ -10,7 +10,7 @@
     "type": "git",
     "url": "git+https://github.com/linked-fw/primitives.git"
   },
-  "version": "1.3.2",
+  "version": "1.4.0",
   "packageManager": "npm@11.19.1",
   "linkedPackage": true,
   "main": "lib/cjs/index.js",

package/test/button-colour-is-a-prop.test.mjs

@@ -0,0 +1,183 @@
+import assert from 'node:assert/strict';
+import { readdirSync, readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import test from 'node:test';
+
+const dir = fileURLToPath(new URL('../src/components/', import.meta.url));
+const read = (name) => readFileSync(dir + name, 'utf8');
+
+/**
+ * Button colours itself with COMPOUND selectors — `.Root.primary.solid`, specificity
+ * 0-3-0. A sibling component that recolours a Button by handing it a bare class of its
+ * own module (0-1-0) therefore loses the cascade silently: the class is on the element,
+ * the DOM looks right, and the colour is Button's. That is exactly how `ConfirmDialog`'s
+ * `tone="danger"` came to be visually inert while looking correct in every review.
+ *
+ * These are STYLESHEET tests. They read the CSS as text and compare selector
+ * specificity; they do not render anything, so they prove that no competing
+ * lower-specificity declaration exists — NOT that the button comes out red. The rendered
+ * colour was measured in a browser (computed `background-color`) when this was fixed;
+ * this package has no DOM test runner to keep doing that.
+ */
+
+/** Class selectors only, which is all a CSS module needs. Returns [a, b, c]. */
+const specificity = (selector) => [
+  (selector.match(/#[\w-]+/g) ?? []).length,
+  (selector.match(/\.[\w-]+/g) ?? []).length +
+    (selector.match(/\[[^\]]+\]/g) ?? []).length +
+    (selector.match(/:(?!:)(?!hover|focus|active|disabled|not)[\w-]+/g) ?? [])
+      .length,
+  0,
+];
+
+const compare = (x, y) =>
+  x[0] - y[0] || x[1] - y[1] || x[2] - y[2];
+
+/**
+ * Strip comments and statement at-rules, then walk `{}` keeping a stack of `&`-expanded
+ * selectors. Each entry is one rule with the declarations written directly in it.
+ */
+function rules(css) {
+  const source = css
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/@(?:import|charset|mixin)[^;{]*;/g, '');
+  const out = [];
+  const stack = [];
+  let buffer = '';
+  for (const ch of source) {
+    if (ch === '{') {
+      const parents = stack.length ? stack[stack.length - 1].selectors : [''];
+      const selectors = buffer
+        .trim()
+        .split(',')
+        .map((s) => s.trim())
+        .flatMap((sel) =>
+          parents.map((parent) =>
+            sel.includes('&')
+              ? sel.replace(/&/g, parent)
+              : parent
+                ? `${parent} ${sel}`
+                : sel
+          )
+        );
+      const rule = { selectors, declarations: '' };
+      out.push(rule);
+      stack.push(rule);
+      buffer = '';
+    } else if (ch === '}') {
+      stack.pop();
+      buffer = '';
+    } else {
+      buffer += ch;
+      // A `;` at this depth closes a declaration of the innermost open rule.
+      if (ch === ';') {
+        if (stack.length) stack[stack.length - 1].declarations += buffer;
+        buffer = '';
+      }
+    }
+  }
+  return out;
+}
+
+/** Highest specificity at which `prop` is set anywhere in this stylesheet. */
+function maxSpecificityFor(css, prop) {
+  let best = null;
+  for (const rule of rules(css)) {
+    if (!new RegExp(`(^|;)\\s*${prop}\\s*:`).test(rule.declarations)) continue;
+    for (const selector of rule.selectors) {
+      const s = specificity(selector);
+      if (!best || compare(s, best.specificity) > 0)
+        best = { specificity: s, selector: selector.trim() };
+    }
+  }
+  return best;
+}
+
+test('every Button color in the union is actually styled', () => {
+  const source = read('Button.tsx');
+  const stylesheet = read('Button.module.css');
+
+  const union = source.match(/color\?:([^;]+);/);
+  assert.ok(union, 'color prop not found in Button.tsx');
+
+  const colors = [...union[1].matchAll(/'([a-z-]+)'/g)].map((m) => m[1]);
+  assert.ok(colors.includes('danger'), `expected a danger colour, got ${colors}`);
+
+  for (const color of colors) {
+    assert.match(
+      stylesheet,
+      new RegExp(`&\\.${color}\\s*\\{`),
+      `Button color "${color}" is accepted by the type but has no rules in Button.module.css`
+    );
+  }
+});
+
+test('ConfirmDialog expresses tone through Button, not through a class of its own', () => {
+  const source = read('ConfirmDialog.tsx');
+
+  assert.match(
+    source,
+    /color=\{tone === 'danger' \? 'danger' : 'primary'\}/,
+    'ConfirmDialog no longer passes tone to Button as a colour prop'
+  );
+  assert.doesNotMatch(
+    source,
+    /className=\{cl\(tone === 'danger'/,
+    'ConfirmDialog is back to overriding Button with a bare class, which loses the cascade'
+  );
+  assert.equal(
+    maxSpecificityFor(read('ConfirmDialog.module.css'), 'background'),
+    null,
+    'ConfirmDialog.module.css sets a background again — it cannot outrank Button from here'
+  );
+});
+
+/**
+ * MultiSelect is a KNOWN, MEASURED instance of the same trap, left as-is deliberately:
+ * its `.Root .button` (0-2-0) sets `background-color` on a `<Button>` whose
+ * `.Root.primary.solid` (0-3-0) sets `background`, so `--multiselect-selected-bg` is
+ * inert and the chip renders in `--button-primary-bg`. Fixing it is a separate design
+ * decision (the chip also nests a `<button>` inside a `<button>`), so it is recorded
+ * here rather than silently swept into the ConfirmDialog fix.
+ */
+const KNOWN_INERT = new Set(['MultiSelect.tsx']);
+
+test('no component recolours a Button with a class that cannot outrank it', () => {
+  const buttonBackground = maxSpecificityFor(read('Button.module.css'), 'background');
+  assert.ok(buttonBackground, 'Button.module.css no longer sets a background');
+
+  const offenders = [];
+  for (const file of readdirSync(dir).filter((f) => f.endsWith('.tsx'))) {
+    if (file === 'Button.tsx') continue;
+    const source = read(file);
+    const stylesheet = (() => {
+      try {
+        return read(file.replace(/\.tsx$/, '.module.css'));
+      } catch {
+        return null;
+      }
+    })();
+    if (!stylesheet) continue;
+
+    for (const call of source.match(/<Button[\s\S]{0,400}?>/g) ?? []) {
+      for (const [, cls] of call.matchAll(/style\.([A-Za-z][\w]*)/g)) {
+        for (const prop of ['background', 'background-color', 'border-color']) {
+          const own = maxSpecificityFor(stylesheet, prop);
+          if (!own) continue;
+          if (!own.selector.includes(`.${cls}`)) continue;
+          if (compare(own.specificity, buttonBackground.specificity) < 0)
+            offenders.push(
+              `${file}: "${own.selector}" (${own.specificity.join('-')}) sets ${prop} on a ` +
+                `<Button> whose "${buttonBackground.selector}" ` +
+                `(${buttonBackground.specificity.join('-')}) wins — pass a Button prop instead`
+            );
+        }
+      }
+    }
+  }
+
+  const unexpected = offenders.filter(
+    (o) => !KNOWN_INERT.has(o.slice(0, o.indexOf(':')))
+  );
+  assert.deepEqual(unexpected, [], unexpected.join('\n'));
+});