@pearpages/pulp-react 0.2.1 → 0.3.0

package/README.md

@@ -83,9 +83,26 @@ The vendor's stylesheet is the one you import yourself. Put it in the `vendor` l
 @import "@pearpages/pulp-react/styles.css";
 ```
 
+Every pulp stylesheet restates the layer order, so the result does not depend on which file your
+bundler loads first; importing `@pearpages/pulp-css` first stays the recommended setup.
+
 Then mount `DialogSystem` once near the root. Without the stylesheet a dialog opens unstyled; if
 you never render a `Dialog`, skip it.
 
+## React Server Components
+
+Every entry that needs the browser ships with `'use client'` as its first statement, so on the
+Next.js App Router (or any RSC setup) you import pulp from a server file and it works: the client
+entries become client boundaries on their own. The leaf, hook-free entries carry no directive and
+render on the server as they are: Text, Heading, Stack, Inline, Card, Divider, Badge, Skeleton,
+Spinner, Progress, Icon, VisuallyHidden, Link, Button, IconButton, Alert, Pagination, EmptyState
+(the `client` field of the component manifest is the list). Two things to know:
+
+- The barrel (`@pearpages/pulp-react`) is a client module, because it re-exports everything. Import
+  from the per-component entries (`@pearpages/pulp-react/text`) to keep server-safe ones on the server.
+- A function cannot cross from a server file into any component, pulp's or not. `<Button asChild>`
+  around a link is fine in a Server Component; `<Button onClick={…}>` belongs in a client file.
+
 ## For tooling and coding agents
 
 `@pearpages/pulp-react/component-manifest.json` lists every component with its status, category,

package/dist/accordion.css

@@ -1,4 +1,5 @@
 /* src/icon/Icon.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Icon_icon {
     display: inline-flex;
@@ -24,6 +25,7 @@
 }
 
 /* src/accordion/Accordion.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Accordion_accordion {
     display: flex;

package/dist/accordion.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon/Icon.module.css","../src/accordion/Accordion.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* Every value is a token (--accordion-*). Open state is a data attribute; the chevron rotates on it. */\n\n@layer components {\n  .accordion {\n    display: flex;\n    flex-direction: column;\n    border: var(--size-hairline) solid var(--accordion-border);\n    border-radius: var(--accordion-radius);\n    font-family: var(--font-family-body);\n  }\n\n  .item {\n    border-block-end: var(--size-hairline) solid var(--accordion-border);\n\n    &:last-child {\n      border-block-end: none;\n    }\n  }\n\n  .heading {\n    margin: 0;\n    font-size: inherit;\n    font-weight: inherit;\n  }\n\n  .trigger {\n    display: flex;\n    gap: var(--accordion-trigger-gap);\n    align-items: center;\n    inline-size: 100%;\n    padding-block: var(--accordion-trigger-padding-block);\n    padding-inline: var(--accordion-trigger-padding-inline);\n    border: none;\n    background-color: transparent;\n    color: var(--accordion-trigger-fg);\n    font-size: var(--accordion-trigger-font-size);\n    font-weight: var(--accordion-trigger-font-weight);\n    text-align: start;\n    cursor: pointer;\n    transition: background-color var(--accordion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--accordion-focus-ring-width) solid var(--accordion-focus-ring);\n      outline-offset: calc(-1 * var(--accordion-focus-ring-offset));\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled) {\n      background-color: var(--accordion-trigger-bg-hover);\n    }\n  }\n\n  .label {\n    flex: 1;\n  }\n\n  .chevron {\n    color: var(--accordion-trigger-chevron);\n    transition: rotate var(--accordion-duration) var(--motion-easing-standard);\n  }\n\n  .trigger[data-state=\"open\"] .chevron {\n    rotate: 180deg;\n  }\n\n  .panel {\n    padding-block: var(--accordion-panel-padding-block);\n    padding-inline: var(--accordion-panel-padding-inline);\n    color: var(--accordion-panel-fg);\n    font-size: var(--accordion-panel-font-size);\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;AClBA;AACE,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,sBAAkB,IAAI,iBAAiB,MAAM,IAAI;AAEjD,KAAC;AACC,wBAAkB;AACpB;AACF;AAEA,GAACC;AACC,YAAQ;AACR,eAAW;AACX,iBAAa;AACf;AAEA,GAACC;AACC,aAAS;AACT,SAAK,IAAI;AACT,iBAAa;AACb,iBAAa;AACb,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ;AACR,sBAAkB;AAClB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,gBAAY;AACZ,YAAQ;AACR,gBAAY,iBAAiB,IAAI,sBAAsB,IAAI;AAE3D,KAAC;AACC,eAAS,IAAI,8BAA8B,MAAM,IAAI;AACrD,sBAAgB,KAAK,GAAG,EAAE,IAAI;AAChC;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK;AACV,wBAAkB,IAAI;AACxB;AACF;AAEA,GAACC;AACC,UAAM;AACR;AAEA,GAACC;AACC,WAAO,IAAI;AACX,gBAAY,OAAO,IAAI,sBAAsB,IAAI;AACnD;AAEA,GAxCCF,iBAwCO,CAAC,iBAAmB,CAL3BE;AAMC,YAAQ;AACV;AAEA,GAACC;AACC,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,WAAO,IAAI;AACX,eAAW,IAAI;AACjB;AACF;","names":["icon","accordion","item","heading","trigger","label","chevron","panel"]}
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/accordion/Accordion.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* Every value is a token (--accordion-*). Open state is a data attribute; the chevron rotates on it. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .accordion {\n    display: flex;\n    flex-direction: column;\n    border: var(--size-hairline) solid var(--accordion-border);\n    border-radius: var(--accordion-radius);\n    font-family: var(--font-family-body);\n  }\n\n  .item {\n    border-block-end: var(--size-hairline) solid var(--accordion-border);\n\n    &:last-child {\n      border-block-end: none;\n    }\n  }\n\n  .heading {\n    margin: 0;\n    font-size: inherit;\n    font-weight: inherit;\n  }\n\n  .trigger {\n    display: flex;\n    gap: var(--accordion-trigger-gap);\n    align-items: center;\n    inline-size: 100%;\n    padding-block: var(--accordion-trigger-padding-block);\n    padding-inline: var(--accordion-trigger-padding-inline);\n    border: none;\n    background-color: transparent;\n    color: var(--accordion-trigger-fg);\n    font-size: var(--accordion-trigger-font-size);\n    font-weight: var(--accordion-trigger-font-weight);\n    text-align: start;\n    cursor: pointer;\n    transition: background-color var(--accordion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--accordion-focus-ring-width) solid var(--accordion-focus-ring);\n      outline-offset: calc(-1 * var(--accordion-focus-ring-offset));\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled) {\n      background-color: var(--accordion-trigger-bg-hover);\n    }\n  }\n\n  .label {\n    flex: 1;\n  }\n\n  .chevron {\n    color: var(--accordion-trigger-chevron);\n    transition: rotate var(--accordion-duration) var(--motion-easing-standard);\n  }\n\n  .trigger[data-state=\"open\"] .chevron {\n    rotate: 180deg;\n  }\n\n  .panel {\n    padding-block: var(--accordion-panel-padding-block);\n    padding-inline: var(--accordion-panel-padding-inline);\n    color: var(--accordion-panel-fg);\n    font-size: var(--accordion-panel-font-size);\n  }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;ACpBA;AAEA;AACE,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,sBAAkB,IAAI,iBAAiB,MAAM,IAAI;AAEjD,KAAC;AACC,wBAAkB;AACpB;AACF;AAEA,GAACC;AACC,YAAQ;AACR,eAAW;AACX,iBAAa;AACf;AAEA,GAACC;AACC,aAAS;AACT,SAAK,IAAI;AACT,iBAAa;AACb,iBAAa;AACb,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ;AACR,sBAAkB;AAClB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,gBAAY;AACZ,YAAQ;AACR,gBAAY,iBAAiB,IAAI,sBAAsB,IAAI;AAE3D,KAAC;AACC,eAAS,IAAI,8BAA8B,MAAM,IAAI;AACrD,sBAAgB,KAAK,GAAG,EAAE,IAAI;AAChC;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK;AACV,wBAAkB,IAAI;AACxB;AACF;AAEA,GAACC;AACC,UAAM;AACR;AAEA,GAACC;AACC,WAAO,IAAI;AACX,gBAAY,OAAO,IAAI,sBAAsB,IAAI;AACnD;AAEA,GAxCCF,iBAwCO,CAAC,iBAAmB,CAL3BE;AAMC,YAAQ;AACV;AAEA,GAACC;AACC,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,WAAO,IAAI;AACX,eAAW,IAAI;AACjB;AACF;","names":["icon","accordion","item","heading","trigger","label","chevron","panel"]}

package/dist/accordion.js

@@ -1,6 +1,6 @@
-export { Accordion } from './chunk-O6OBFL3Q.js';
+"use client";export { Accordion } from './chunk-W2UUZ2DC.js';
 import './chunk-I5OZ63W7.js';
-import './chunk-ASNTNTJW.js';
+import './chunk-O5LII5XP.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=accordion.js.map
 //# sourceMappingURL=accordion.js.map

package/dist/alert.css

@@ -1,4 +1,5 @@
 /* src/icon/Icon.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Icon_icon {
     display: inline-flex;
@@ -24,6 +25,7 @@
 }
 
 /* src/visually-hidden/VisuallyHidden.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .VisuallyHidden_root {
     position: absolute;
@@ -39,6 +41,7 @@
 }
 
 /* src/spinner/Spinner.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Spinner_spinner {
     --_size: var(--spinner-size-md);
@@ -84,6 +87,7 @@
 }
 
 /* src/button/Button.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Button_button {
     display: inline-flex;
@@ -156,12 +160,31 @@
       }
     }
   }
+  .Button_button[data-tone=danger] {
+    &[data-variant=primary] {
+      background-color: var(--button-danger-bg);
+      color: var(--button-danger-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-bg-hover);
+      }
+      &:active:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-bg-active);
+      }
+    }
+    &:is([data-variant=secondary], [data-variant=ghost]) {
+      color: var(--button-danger-text);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-quiet-bg-hover);
+      }
+    }
+  }
   .Button_label {
     display: inline-block;
   }
 }
 
 /* src/icon-button/IconButton.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .IconButton_iconButton[data-icon-only] {
     gap: 0;
@@ -177,6 +200,7 @@
 }
 
 /* src/alert/Alert.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Alert_alert {
     --_bg: var(--alert-info-bg);

package/dist/alert.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css","../src/alert/Alert.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-user-select: none;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n","/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer components {\n  .alert {\n    --_bg: var(--alert-info-bg);\n    --_accent: var(--alert-info-accent);\n    --_title: var(--alert-info-title);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--alert-gap);\n    padding: var(--alert-padding);\n    border: var(--alert-border-width) solid var(--_accent);\n    border-inline-start-width: var(--alert-accent-width);\n    border-radius: var(--alert-radius);\n    background-color: var(--_bg);\n    color: var(--alert-fg);\n    font-size: var(--alert-font-size);\n\n    &[data-tone=\"info\"] {\n      --_bg: var(--alert-info-bg);\n      --_accent: var(--alert-info-accent);\n      --_title: var(--alert-info-title);\n    }\n\n    &[data-tone=\"success\"] {\n      --_bg: var(--alert-success-bg);\n      --_accent: var(--alert-success-accent);\n      --_title: var(--alert-success-title);\n    }\n\n    &[data-tone=\"warning\"] {\n      --_bg: var(--alert-warning-bg);\n      --_accent: var(--alert-warning-accent);\n      --_title: var(--alert-warning-title);\n    }\n\n    &[data-tone=\"error\"] {\n      --_bg: var(--alert-error-bg);\n      --_accent: var(--alert-error-accent);\n      --_title: var(--alert-error-title);\n    }\n  }\n\n  .icon {\n    flex: none;\n    color: var(--_accent);\n  }\n\n  .body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--space-1);\n    min-inline-size: 0;\n  }\n\n  .title {\n    margin: 0;\n    color: var(--_title);\n    font-weight: var(--alert-title-font-weight);\n  }\n\n  .content {\n    overflow-wrap: anywhere;\n  }\n\n  .action {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-2);\n    margin-block-start: var(--space-1);\n  }\n\n  .dismiss {\n    flex: none;\n    margin-block: calc(-1 * var(--space-1));\n    margin-inline-end: calc(-1 * var(--space-2));\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","alert","icon","body","title","content","action","dismiss"]}
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css","../src/alert/Alert.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-user-select: none;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  /* tone=\"danger\", after the variants so it wins at equal specificity plus one attribute. */\n  .button[data-tone=\"danger\"] {\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-danger-bg);\n      color: var(--button-danger-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-bg-active);\n      }\n    }\n\n    &:is([data-variant=\"secondary\"], [data-variant=\"ghost\"]) {\n      color: var(--button-danger-text);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-quiet-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n","/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .alert {\n    --_bg: var(--alert-info-bg);\n    --_accent: var(--alert-info-accent);\n    --_title: var(--alert-info-title);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--alert-gap);\n    padding: var(--alert-padding);\n    border: var(--alert-border-width) solid var(--_accent);\n    border-inline-start-width: var(--alert-accent-width);\n    border-radius: var(--alert-radius);\n    background-color: var(--_bg);\n    color: var(--alert-fg);\n    font-size: var(--alert-font-size);\n\n    &[data-tone=\"info\"] {\n      --_bg: var(--alert-info-bg);\n      --_accent: var(--alert-info-accent);\n      --_title: var(--alert-info-title);\n    }\n\n    &[data-tone=\"success\"] {\n      --_bg: var(--alert-success-bg);\n      --_accent: var(--alert-success-accent);\n      --_title: var(--alert-success-title);\n    }\n\n    &[data-tone=\"warning\"] {\n      --_bg: var(--alert-warning-bg);\n      --_accent: var(--alert-warning-accent);\n      --_title: var(--alert-warning-title);\n    }\n\n    &[data-tone=\"error\"] {\n      --_bg: var(--alert-error-bg);\n      --_accent: var(--alert-error-accent);\n      --_title: var(--alert-error-title);\n    }\n  }\n\n  .icon {\n    flex: none;\n    color: var(--_accent);\n  }\n\n  .body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--space-1);\n    min-inline-size: 0;\n  }\n\n  .title {\n    margin: 0;\n    color: var(--_title);\n    font-weight: var(--alert-title-font-weight);\n  }\n\n  .content {\n    overflow-wrap: anywhere;\n  }\n\n  .action {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-2);\n    margin-block-start: var(--space-1);\n  }\n\n  .dismiss {\n    flex: none;\n    margin-block: calc(-1 * var(--space-1));\n    margin-inline-end: calc(-1 * var(--space-2));\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","alert","icon","body","title","content","action","dismiss"]}

package/dist/alert.js

@@ -1,10 +1,10 @@
-export { Alert } from './chunk-XXC34COT.js';
-import './chunk-DVM37MEK.js';
-import './chunk-VSDEQHG4.js';
-import './chunk-I4KC4V6A.js';
-import './chunk-ZVDN3GRI.js';
-import './chunk-Z4PN6B2C.js';
-import './chunk-ASNTNTJW.js';
+export { Alert } from './chunk-A7TMFEQ2.js';
+import './chunk-56RSH7GQ.js';
+import './chunk-DE67ECD7.js';
+import './chunk-ZL5MMRLG.js';
+import './chunk-IB5UUE3S.js';
+import './chunk-O5LII5XP.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=alert.js.map
 //# sourceMappingURL=alert.js.map

package/dist/avatar.css

@@ -0,0 +1,46 @@
+/* src/avatar/Avatar.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
+@layer components {
+  .Avatar_root {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--avatar-size-md);
+    block-size: var(--avatar-size-md);
+    overflow: hidden;
+    box-sizing: border-box;
+    border-radius: var(--avatar-radius);
+    background: var(--avatar-bg);
+    color: var(--avatar-fg);
+    font-family: var(--font-family-body);
+    font-size: var(--avatar-font-size-md);
+    font-weight: var(--avatar-weight);
+    line-height: 1;
+    vertical-align: middle;
+    &[data-fallback] {
+      border: var(--avatar-border-width) solid var(--avatar-border);
+    }
+    &[data-size=sm] {
+      inline-size: var(--avatar-size-sm);
+      block-size: var(--avatar-size-sm);
+      font-size: var(--avatar-font-size-sm);
+    }
+    &[data-size=lg] {
+      inline-size: var(--avatar-size-lg);
+      block-size: var(--avatar-size-lg);
+      font-size: var(--avatar-font-size-lg);
+    }
+    &[data-size=xl] {
+      inline-size: var(--avatar-size-xl);
+      block-size: var(--avatar-size-xl);
+      font-size: var(--avatar-font-size-xl);
+    }
+  }
+  .Avatar_image {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+}
+/*# sourceMappingURL=avatar.css.map */

package/dist/avatar.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/avatar/Avatar.module.css"],"sourcesContent":["/* Every value is a token: --avatar-* in packages/tokens/tokens/component/avatar.json */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--avatar-size-md);\n    block-size: var(--avatar-size-md);\n    overflow: hidden;\n    box-sizing: border-box;\n    border-radius: var(--avatar-radius);\n    background: var(--avatar-bg);\n    color: var(--avatar-fg);\n    font-family: var(--font-family-body);\n    font-size: var(--avatar-font-size-md);\n    font-weight: var(--avatar-weight);\n    line-height: 1;\n    vertical-align: middle;\n\n    /* Initials only: a picture has its own edge. */\n    &[data-fallback] {\n      border: var(--avatar-border-width) solid var(--avatar-border);\n    }\n\n    &[data-size='sm'] {\n      inline-size: var(--avatar-size-sm);\n      block-size: var(--avatar-size-sm);\n      font-size: var(--avatar-font-size-sm);\n    }\n\n    &[data-size='lg'] {\n      inline-size: var(--avatar-size-lg);\n      block-size: var(--avatar-size-lg);\n      font-size: var(--avatar-font-size-lg);\n    }\n\n    &[data-size='xl'] {\n      inline-size: var(--avatar-size-xl);\n      block-size: var(--avatar-size-xl);\n      font-size: var(--avatar-font-size-xl);\n    }\n  }\n\n  .image {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,qBAAiB;AACjB,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,cAAU;AACV,gBAAY;AACZ,mBAAe,IAAI;AACnB,gBAAY,IAAI;AAChB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa;AACb,oBAAgB;AAGhB,KAAC,CAAC;AACA,cAAQ,IAAI,uBAAuB,MAAM,IAAI;AAC/C;AAEA,KAAC,CAAC;AACA,mBAAa,IAAI;AACjB,kBAAY,IAAI;AAChB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC;AACA,mBAAa,IAAI;AACjB,kBAAY,IAAI;AAChB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC;AACA,mBAAa,IAAI;AACjB,kBAAY,IAAI;AAChB,iBAAW,IAAI;AACjB;AACF;AAEA,GAACC;AACC,iBAAa;AACb,gBAAY;AACZ,gBAAY;AACd;AACF;","names":["root","image"]}

package/dist/avatar.d.ts

@@ -0,0 +1,41 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactElement, Ref } from 'react';
+
+type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The person's name. Its initials show when there is no image or the image fails, and it names the avatar unless `alt` does. */
+    name?: string;
+    /** Image URL. Ignored when an image element is passed as the child. */
+    src?: string;
+    /** Accessible name. Defaults to `name`. Pass `""` next to the visible name, so it is not read twice. */
+    alt?: string;
+    /** `sm` and `md` match the control heights, so an avatar lines up with a button. @default 'md' */
+    size?: AvatarSize;
+    /**
+     * An image element to use instead of `img`: a framework's image component
+     * (`<Avatar name="Ana"><Image src={url} alt="" width={40} height={40} /></Avatar>`).
+     * It receives the styles and the error handling; its own `alt` is replaced by the avatar's.
+     */
+    children?: ReactElement;
+    ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * A person, as a picture or as initials. The initials take over when no image
+ * is given and when the image fails to load, so a broken URL never shows a
+ * broken-image glyph. Every value comes from `--avatar-*` tokens; the
+ * background is one token for everyone, not a colour computed from the name.
+ *
+ * @status experimental
+ * @category Utilities
+ * @accessibility With an image, the `img` carries the name as its `alt`. With initials, the root is `role="img"` named by `alt` or `name`, and the letters are hidden from assistive technology ("AR" read aloud means nothing). `alt=""` makes the avatar decorative (`aria-hidden`): use it when the name is written next to it. Not focusable and not interactive; wrap it in a Link or a Button to make it one.
+ * @do Pass `name` always, even with an image: it is the fallback when the image fails.
+ * @do Pass `alt=""` when the person's name is visible beside the avatar.
+ * @dont Colour avatars per person from a hash of the name; the colours will not be tokens and will not pass contrast in both schemes.
+ * @dont Use it for a logo or an illustration; it crops to a circle and falls back to initials.
+ */
+declare function Avatar({ name, src, alt, size, className, ref, children, ...rest }: AvatarProps): react.JSX.Element;
+declare namespace Avatar {
+    var displayName: string;
+}
+
+export { Avatar, type AvatarProps };

package/dist/avatar.js

@@ -0,0 +1,5 @@
+"use client";export { Avatar } from './chunk-QXHSA4QD.js';
+import './chunk-QJG5ILK5.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=avatar.js.map
+//# sourceMappingURL=avatar.js.map

package/dist/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"avatar.js"}

package/dist/badge.css

@@ -1,4 +1,5 @@
 /* src/icon/Icon.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Icon_icon {
     display: inline-flex;
@@ -23,7 +24,24 @@
   }
 }
 
+/* src/visually-hidden/VisuallyHidden.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
+@layer components {
+  .VisuallyHidden_root {
+    position: absolute;
+    inline-size: var(--visually-hidden-size);
+    block-size: var(--visually-hidden-size);
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
 /* src/badge/Badge.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Badge_badge {
     --_bg: var(--badge-neutral-subtle-bg);
@@ -85,5 +103,26 @@
       --_fg: var(--badge-error-subtle-fg);
     }
   }
+  .Badge_badge[data-variant=dot] {
+    inline-size: var(--badge-dot-size);
+    block-size: var(--badge-dot-size);
+    padding: 0;
+    vertical-align: middle;
+  }
+  .Badge_badge[data-tone=neutral][data-variant=dot] {
+    --_bg: var(--badge-neutral-solid-bg);
+  }
+  .Badge_badge[data-tone=info][data-variant=dot] {
+    --_bg: var(--badge-info-solid-bg);
+  }
+  .Badge_badge[data-tone=success][data-variant=dot] {
+    --_bg: var(--badge-success-solid-bg);
+  }
+  .Badge_badge[data-tone=warning][data-variant=dot] {
+    --_bg: var(--badge-warning-solid-bg);
+  }
+  .Badge_badge[data-tone=error][data-variant=dot] {
+    --_bg: var(--badge-error-solid-bg);
+  }
 }
 /*# sourceMappingURL=badge.css.map */

package/dist/badge.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon/Icon.module.css","../src/badge/Badge.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* Every value is a token (--badge-*). Tone × variant resolve into private custom properties. */\n\n@layer components {\n  .badge {\n    --_bg: var(--badge-neutral-subtle-bg);\n    --_fg: var(--badge-neutral-subtle-fg);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--badge-gap);\n    padding-block: var(--badge-padding-block);\n    padding-inline: var(--badge-padding-inline-md);\n    border-radius: var(--badge-radius);\n    background-color: var(--_bg);\n    color: var(--_fg);\n    font-size: var(--badge-font-size-md);\n    font-weight: var(--badge-font-weight);\n    line-height: var(--badge-line-height);\n    white-space: nowrap;\n\n    &[data-size=\"sm\"] {\n      padding-inline: var(--badge-padding-inline-sm);\n      font-size: var(--badge-font-size-sm);\n    }\n\n    &[data-tone=\"neutral\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-neutral-solid-bg);\n      --_fg: var(--badge-neutral-solid-fg);\n    }\n\n    &[data-tone=\"neutral\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-neutral-subtle-bg);\n      --_fg: var(--badge-neutral-subtle-fg);\n    }\n\n    &[data-tone=\"info\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-info-solid-bg);\n      --_fg: var(--badge-info-solid-fg);\n    }\n\n    &[data-tone=\"info\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-info-subtle-bg);\n      --_fg: var(--badge-info-subtle-fg);\n    }\n\n    &[data-tone=\"success\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-success-solid-bg);\n      --_fg: var(--badge-success-solid-fg);\n    }\n\n    &[data-tone=\"success\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-success-subtle-bg);\n      --_fg: var(--badge-success-subtle-fg);\n    }\n\n    &[data-tone=\"warning\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-warning-solid-bg);\n      --_fg: var(--badge-warning-solid-fg);\n    }\n\n    &[data-tone=\"warning\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-warning-subtle-bg);\n      --_fg: var(--badge-warning-subtle-fg);\n    }\n\n    &[data-tone=\"error\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-error-solid-bg);\n      --_fg: var(--badge-error-solid-fg);\n    }\n\n    &[data-tone=\"error\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-error-subtle-bg);\n      --_fg: var(--badge-error-subtle-fg);\n    }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;AClBA;AACE,GAACC;AACC,WAAO,IAAI;AACX,WAAO,IAAI;AAEX,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,iBAAa;AAEb,KAAC,CAAC;AACA,sBAAgB,IAAI;AACpB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,eAAiB,CAAC;AAClB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,eAAiB,CAAC;AAClB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,gBAAkB,CAAC;AACnB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,gBAAkB,CAAC;AACnB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AACF;AACF;","names":["icon","badge"]}
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/badge/Badge.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--badge-*). Tone × variant resolve into private custom properties. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .badge {\n    --_bg: var(--badge-neutral-subtle-bg);\n    --_fg: var(--badge-neutral-subtle-fg);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--badge-gap);\n    padding-block: var(--badge-padding-block);\n    padding-inline: var(--badge-padding-inline-md);\n    border-radius: var(--badge-radius);\n    background-color: var(--_bg);\n    color: var(--_fg);\n    font-size: var(--badge-font-size-md);\n    font-weight: var(--badge-font-weight);\n    line-height: var(--badge-line-height);\n    white-space: nowrap;\n\n    &[data-size=\"sm\"] {\n      padding-inline: var(--badge-padding-inline-sm);\n      font-size: var(--badge-font-size-sm);\n    }\n\n    &[data-tone=\"neutral\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-neutral-solid-bg);\n      --_fg: var(--badge-neutral-solid-fg);\n    }\n\n    &[data-tone=\"neutral\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-neutral-subtle-bg);\n      --_fg: var(--badge-neutral-subtle-fg);\n    }\n\n    &[data-tone=\"info\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-info-solid-bg);\n      --_fg: var(--badge-info-solid-fg);\n    }\n\n    &[data-tone=\"info\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-info-subtle-bg);\n      --_fg: var(--badge-info-subtle-fg);\n    }\n\n    &[data-tone=\"success\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-success-solid-bg);\n      --_fg: var(--badge-success-solid-fg);\n    }\n\n    &[data-tone=\"success\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-success-subtle-bg);\n      --_fg: var(--badge-success-subtle-fg);\n    }\n\n    &[data-tone=\"warning\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-warning-solid-bg);\n      --_fg: var(--badge-warning-solid-fg);\n    }\n\n    &[data-tone=\"warning\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-warning-subtle-bg);\n      --_fg: var(--badge-warning-subtle-fg);\n    }\n\n    &[data-tone=\"error\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-error-solid-bg);\n      --_fg: var(--badge-error-solid-fg);\n    }\n\n    &[data-tone=\"error\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-error-subtle-bg);\n      --_fg: var(--badge-error-subtle-fg);\n    }\n  }\n\n  /* A presence mark: the tone's solid fill, no text, no padding. After the tone rules so --_bg is set. */\n  .badge[data-variant=\"dot\"] {\n    inline-size: var(--badge-dot-size);\n    block-size: var(--badge-dot-size);\n    padding: 0;\n    vertical-align: middle;\n  }\n\n  .badge[data-tone=\"neutral\"][data-variant=\"dot\"] {\n    --_bg: var(--badge-neutral-solid-bg);\n  }\n\n  .badge[data-tone=\"info\"][data-variant=\"dot\"] {\n    --_bg: var(--badge-info-solid-bg);\n  }\n\n  .badge[data-tone=\"success\"][data-variant=\"dot\"] {\n    --_bg: var(--badge-success-solid-bg);\n  }\n\n  .badge[data-tone=\"warning\"][data-variant=\"dot\"] {\n    --_bg: var(--badge-warning-solid-bg);\n  }\n\n  .badge[data-tone=\"error\"][data-variant=\"dot\"] {\n    --_bg: var(--badge-error-solid-bg);\n  }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;ACpBA;AAEA;AACE,GAACC;AACC,cAAU;AACV,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,YAAQ;AACR,cAAU;AACV,eAAW,MAAM;AACjB,iBAAa;AACb,YAAQ;AACV;AACF;;;ACdA;AAEA;AACE,GAACC;AACC,WAAO,IAAI;AACX,WAAO,IAAI;AAEX,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,iBAAa;AAEb,KAAC,CAAC;AACA,sBAAgB,IAAI;AACpB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,eAAiB,CAAC;AAClB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,eAAiB,CAAC;AAClB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,gBAAkB,CAAC;AACnB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,gBAAkB,CAAC;AACnB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AACF;AAGA,GA1ECA,WA0EK,CAAC;AACL,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,oBAAgB;AAClB;AAEA,GAjFCA,WAiFK,CAAC,kBAAoB,CAAC;AAC1B,WAAO,IAAI;AACb;AAEA,GArFCA,WAqFK,CAAC,eAAiB,CAAC;AACvB,WAAO,IAAI;AACb;AAEA,GAzFCA,WAyFK,CAAC,kBAAoB,CAAC;AAC1B,WAAO,IAAI;AACb;AAEA,GA7FCA,WA6FK,CAAC,kBAAoB,CAAC;AAC1B,WAAO,IAAI;AACb;AAEA,GAjGCA,WAiGK,CAAC,gBAAkB,CAAC;AACxB,WAAO,IAAI;AACb;AACF;","names":["icon","root","badge"]}

package/dist/badge.d.ts

@@ -2,19 +2,35 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode, Ref } from 'react';
 
 type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
-type BadgeVariant = 'solid' | 'subtle';
+type BadgeVariant = 'solid' | 'subtle' | 'dot';
 type BadgeSize = 'sm' | 'md';
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** Meaning, not colour: `neutral` for counts and tags. @default 'neutral' */
     tone?: BadgeTone;
-    /** `solid` fills with the tone; `subtle` tints and uses the tone as text. @default 'subtle' */
+    /**
+     * `solid` fills with the tone; `subtle` tints and uses the tone as text; `dot` is a
+     * small filled circle with no visible text, which needs a `label`. @default 'subtle'
+     */
     variant?: BadgeVariant;
     /** @default 'md' */
     size?: BadgeSize;
     /** Leading glyph, decorative. */
     icon?: ReactNode;
+    /**
+     * A number to show instead of children, clamped to `max` ("99+"). Zero or less
+     * renders nothing: an empty inbox has no badge.
+     */
+    count?: number;
+    /** The highest count shown as is. @default 99 */
+    max?: number;
+    /**
+     * What the badge means, for assistive technology. Required for `variant="dot"`
+     * ("Unread messages"), where it is the only content. With a `count` it is read
+     * after the number: `count={3} label="unread"` is announced as "3 unread".
+     */
+    label?: string;
     ref?: Ref<HTMLSpanElement>;
-    children: ReactNode;
+    children?: ReactNode;
 }
 /**
  * A small label for status, counts and tags. Tone and variant resolve
@@ -24,13 +40,14 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  *
  * @status stable
  * @category Feedback
- * @accessibility Plain text: no role, no interaction. Every tone × variant pair meets WCAG AA, proven by the token tests. Tone is reinforced by the text, not only by colour.
+ * @accessibility Plain text: no role, no interaction, and deliberately no live region: a badge that is there when the page renders must not be announced as news (put `role="status"` on a wrapper yourself if a count changes while the user is on the page). A `dot` has no visible text, so its `label` is rendered visually hidden; a `count` above `max` reads as "99+", followed by the `label` if there is one. Every tone × variant pair meets WCAG AA, proven by the token tests. Tone is reinforced by the text, not only by colour.
  * @do Keep the text to one or two words.
+ * @do Give a `dot` a `label` that says what it marks, and a `count` a `label` that says what is counted.
  * Pair a leading icon with text, never alone.
  * @dont Make it clickable; compose a Button for a removable chip.
  * Use tone alone to convey meaning; say it in the text.
  */
-declare function Badge({ tone, variant, size, icon, className, ref, children, ...rest }: BadgeProps): react.JSX.Element;
+declare function Badge({ tone, variant, size, icon, count, max, label, className, ref, children, ...rest }: BadgeProps): react.JSX.Element | null;
 declare namespace Badge {
     var displayName: string;
 }

package/dist/badge.js

@@ -1,5 +1,6 @@
-export { Badge } from './chunk-6I26MMQF.js';
-import './chunk-ASNTNTJW.js';
+export { Badge } from './chunk-KSLKNWWM.js';
+import './chunk-IB5UUE3S.js';
+import './chunk-O5LII5XP.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=badge.js.map
 //# sourceMappingURL=badge.js.map

package/dist/button.css

@@ -1,4 +1,5 @@
 /* src/icon/Icon.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Icon_icon {
     display: inline-flex;
@@ -24,6 +25,7 @@
 }
 
 /* src/visually-hidden/VisuallyHidden.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .VisuallyHidden_root {
     position: absolute;
@@ -39,6 +41,7 @@
 }
 
 /* src/spinner/Spinner.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Spinner_spinner {
     --_size: var(--spinner-size-md);
@@ -84,6 +87,7 @@
 }
 
 /* src/button/Button.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Button_button {
     display: inline-flex;
@@ -156,6 +160,24 @@
       }
     }
   }
+  .Button_button[data-tone=danger] {
+    &[data-variant=primary] {
+      background-color: var(--button-danger-bg);
+      color: var(--button-danger-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-bg-hover);
+      }
+      &:active:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-bg-active);
+      }
+    }
+    &:is([data-variant=secondary], [data-variant=ghost]) {
+      color: var(--button-danger-text);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-quiet-bg-hover);
+      }
+    }
+  }
   .Button_label {
     display: inline-block;
   }

package/dist/button.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-user-select: none;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;AClBA;AACE,GAACC;AACC,cAAU;AACV,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,YAAQ;AACR,cAAU;AACV,eAAW,MAAM;AACjB,iBAAa;AACb,YAAQ;AACV;AACF;;;ACZA;AACE,GAACC;AACC,aAAS,IAAI;AACb,cAAU,IAAI;AACd,kBAAc,IAAI;AAElB,aAAS;AACT,UAAM;AACN,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAoB;AACrD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAoB;AACrD,KAAC,CAAC;AAAuB,eAAS;AAAK;AAEvC,KAAC,CAAC;AACA,gBAAU;AACV,oBAAc;AAChB;AACF;AAEA,GAACC;AACC,iBAAa;AACb,gBAAY;AACZ,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,8BAA0B,IAAI;AAC9B,mBAAe,IAAI;AACnB,eAAW,aAAK,IAAI,oBAAoB,OAAO;AACjD;AAEA,aAHaC;AAIX;AACE,cAAQ;AACV;AACF;AAEA,UAAO,wBAAyB;AAC9B,KAhBDD;AAiBG,iBAAW;AACb;AACF;AACF;;;ACtCA;AACE,GAACE;AACC,aAAS;AACT,iBAAa;AACb,qBAAiB;AACjB,SAAK,IAAI;AACT,oBAAgB,IAAI;AACpB,mBAAe;AACf,oBAAgB,IAAI;AACpB,YAAQ,IAAI,MAAM;AAClB,mBAAe,IAAI;AACnB,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa;AACb,qBAAiB;AACjB,iBAAa;AACb,YAAQ;AACR,yBAAqB;AACrB,iBAAa;AACb;AAAA,MACE,iBAAiB,IAAI,0BAA0B,IAAI,yBAAyB;AAAA,MAC5E,aAAa,IAAI,0BAA0B,IAAI,yBAAyB;AAAA,MACxE,MAAM,IAAI,0BAA0B,IAAI;AAE1C,KAAC;AACC,eAAS,IAAI,2BAA2B,MAAM,IAAI;AAClD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AAAA,IACD,CAAC,CAAC;AACA,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,CAAC;AACA,cAAQ;AACV;AAEA,KAAC,CAAC;AACA,sBAAgB,IAAI;AACpB,sBAAgB,IAAI;AACpB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC;AACA,sBAAgB,IAAI;AACpB,sBAAgB,IAAI;AACpB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACtB,aAAO,IAAI;AAEX,OAAC,MAAM,KAAK,WAAW,CAAC;AACtB,0BAAkB,IAAI;AACxB;AAEA,OAAC,OAAO,KAAK,WAAW,CAAC;AACvB,0BAAkB,IAAI;AACxB;AACF;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACtB,oBAAc,IAAI;AAClB,aAAO,IAAI;AAEX,OAAC,MAAM,KAAK,WAAW,CAAC;AACtB,0BAAkB,IAAI;AACxB;AACF;AAEA,KAAC,CAAC;AACA,wBAAkB;AAClB,aAAO,IAAI;AAEX,OAAC,MAAM,KAAK,WAAW,CAAC;AACtB,0BAAkB,IAAI;AACxB;AACF;AACF;AAEA,GAACC;AACC,aAAS;AACX;AACF;","names":["icon","root","spinner","ring","spin","button","label"]}
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-user-select: none;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  /* tone=\"danger\", after the variants so it wins at equal specificity plus one attribute. */\n  .button[data-tone=\"danger\"] {\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-danger-bg);\n      color: var(--button-danger-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-bg-active);\n      }\n    }\n\n    &:is([data-variant=\"secondary\"], [data-variant=\"ghost\"]) {\n      color: var(--button-danger-text);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-quiet-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label"]}

package/dist/button.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
 
+type ButtonTone = 'default' | 'danger';
 type ButtonVariant = 'primary' | 'secondary' | 'ghost';
 type ButtonSize = 'sm' | 'md' | 'lg';
 interface ButtonProps<E extends HTMLElement = HTMLButtonElement> extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -10,6 +11,13 @@ interface ButtonProps<E extends HTMLElement = HTMLButtonElement> extends ButtonH
      * @default 'primary'
      */
     variant?: ButtonVariant;
+    /**
+     * `danger` for an action that destroys something (delete, remove, leave). It
+     * recolours whichever `variant` is in use, so emphasis and danger stay two
+     * separate decisions: `variant="ghost" tone="danger"` is a quiet delete.
+     * @default 'default'
+     */
+    tone?: ButtonTone;
     /** @default 'md' */
     size?: ButtonSize;
     /**
@@ -50,12 +58,13 @@ interface ButtonProps<E extends HTMLElement = HTMLButtonElement> extends ButtonH
  * @accessibility A native `button` (or the child element with `asChild`). `loading` sets `aria-disabled` and `aria-busy` and keeps focus; only `disabled` removes it from the tab order. Icon-only use warns in development: use IconButton, which requires a name.
  * @do One `primary` per view.
  * Use `asChild` for links that look like buttons, keeping the `a` semantics.
+ * @do Use `tone="danger"` for the action that destroys, and say what it destroys in the label ("Delete place"), since colour alone must not carry it.
  * @dont Use `loading` on a button that is not the one that started the work.
  * Rely on colour to tell variants apart; the label carries the meaning.
  */
-declare function Button<E extends HTMLElement = HTMLButtonElement>({ variant, size, loading, iconStart, iconEnd, asChild, className, disabled, type, onClick, ref, children, ...rest }: ButtonProps<E>): react.JSX.Element;
+declare function Button<E extends HTMLElement = HTMLButtonElement>({ variant, tone, size, loading, iconStart, iconEnd, asChild, className, disabled, type, onClick, ref, children, ...rest }: ButtonProps<E>): react.JSX.Element;
 declare namespace Button {
     var displayName: string;
 }
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };
+export { Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant };

package/dist/button.js

@@ -1,8 +1,8 @@
-export { Button } from './chunk-VSDEQHG4.js';
-import './chunk-I4KC4V6A.js';
-import './chunk-ZVDN3GRI.js';
-import './chunk-Z4PN6B2C.js';
-import './chunk-ASNTNTJW.js';
+export { Button } from './chunk-DE67ECD7.js';
+import './chunk-ZL5MMRLG.js';
+import './chunk-IB5UUE3S.js';
+import './chunk-O5LII5XP.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=button.js.map
 //# sourceMappingURL=button.js.map