@slotted/react 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/docs/button.json

@@ -10,6 +10,7 @@
     "tone": [
       "accent",
       "secondary",
+      "neutral",
       "success",
       "warning",
       "danger"
@@ -27,6 +28,10 @@
     "shape": [
       "square",
       "circle"
+    ],
+    "justify": [
+      "center",
+      "between"
     ]
   },
   "members": {
@@ -38,6 +43,7 @@
         "size": "md",
         "type": "button",
         "fullWidth": false,
+        "justify": "center",
         "disabled": false,
         "focusableWhenDisabled": false,
         "loading": false,
@@ -73,6 +79,7 @@
         "variant": "solid",
         "size": "md",
         "fullWidth": false,
+        "justify": "center",
         "disabled": false
       },
       "capabilities": [
@@ -138,6 +145,7 @@
         "size": "md",
         "type": "button",
         "fullWidth": false,
+        "justify": "center",
         "disabled": false,
         "focusableWhenDisabled": false,
         "loading": false,
@@ -180,7 +188,7 @@
           "part": "root",
           "element": "button, or the element render returns",
           "required": true,
-          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-full-width, data-disabled and data-loading when they apply."
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-justify, and data-full-width, data-disabled and data-loading when they apply."
         },
         {
           "part": "start",
@@ -210,10 +218,10 @@
       "api": [
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | success | warning | danger",
           "defaultValue": "accent",
           "appliesTo": "Button",
-          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does."
         },
         {
           "name": "variant",
@@ -250,6 +258,13 @@
           "appliesTo": "Button",
           "description": "Fills the inline size of the container."
         },
+        {
+          "name": "justify",
+          "type": "center | between",
+          "defaultValue": "center",
+          "appliesTo": "Button",
+          "description": "Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document."
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -329,7 +344,7 @@
           "part": "root",
           "element": "a, or the element render returns",
           "required": true,
-          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-full-width and data-disabled when they apply."
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-justify, and data-full-width and data-disabled when they apply."
         },
         {
           "part": "start",
@@ -367,10 +382,10 @@
         },
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | success | warning | danger",
           "defaultValue": "accent",
           "appliesTo": "ButtonLink",
-          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does."
         },
         {
           "name": "variant",
@@ -407,6 +422,13 @@
           "appliesTo": "ButtonLink",
           "description": "Fills the inline size of the container."
         },
+        {
+          "name": "justify",
+          "type": "center | between",
+          "defaultValue": "center",
+          "appliesTo": "ButtonLink",
+          "description": "Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document."
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -459,10 +481,10 @@
         },
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | success | warning | danger",
           "defaultValue": "secondary",
           "appliesTo": "IconButton",
-          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does."
         },
         {
           "name": "variant",
@@ -576,7 +598,7 @@
           "part": "root",
           "element": "button, or the element render returns",
           "required": true,
-          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-full-width, data-disabled, data-loading and data-pressed when they apply."
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-justify, and data-full-width, data-disabled, data-loading and data-pressed when they apply."
         },
         {
           "part": "start",
@@ -606,10 +628,10 @@
       "api": [
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | success | warning | danger",
           "defaultValue": "secondary",
           "appliesTo": "ToggleButton",
-          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does."
         },
         {
           "name": "variant",
@@ -646,6 +668,13 @@
           "appliesTo": "ToggleButton",
           "description": "Fills the inline size of the container."
         },
+        {
+          "name": "justify",
+          "type": "center | between",
+          "defaultValue": "center",
+          "appliesTo": "ToggleButton",
+          "description": "Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document."
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -783,6 +812,11 @@
     "--slotted-tone-danger-solid-active",
     "--slotted-tone-danger-solid-hover",
     "--slotted-tone-danger-text",
+    "--slotted-tone-neutral-on-solid",
+    "--slotted-tone-neutral-solid",
+    "--slotted-tone-neutral-solid-active",
+    "--slotted-tone-neutral-solid-hover",
+    "--slotted-tone-neutral-text",
     "--slotted-tone-secondary-on-solid",
     "--slotted-tone-secondary-solid",
     "--slotted-tone-secondary-solid-active",

package/dist/docs/button.md

@@ -72,12 +72,13 @@ export default function ButtonBasic() {
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | accent | Button | The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does. |
+| `tone` | `accent \| secondary \| neutral \| success \| warning \| danger` | accent | Button | The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does. |
 | `variant` | `solid \| outline \| ghost` | solid | Button | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | Button | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `start` | `ReactNode` | — | Button | Content before the label, such as an icon. It mirrors in a right-to-left document. |
 | `end` | `ReactNode` | — | Button | Content after the label, such as an icon. It mirrors in a right-to-left document. |
 | `fullWidth` | `boolean` | false | Button | Fills the inline size of the container. |
+| `justify` | `center \| between` | center | Button | Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document. |
 | `disabled` | `boolean` | false | Button | Refuses the action and marks the control unavailable. On its own, it sets the native disabled attribute, which also removes the control from the tab sequence. |
 | `focusableWhenDisabled` | `boolean` | false | Button | Keeps a disabled control in the tab sequence: aria-disabled replaces the native attribute, and activation is still refused. |
 | `loading` | `boolean` | false | Button | Refuses activation, keeps focus, and shows a progress indicator named by messages.loading. |
@@ -93,12 +94,13 @@ export default function ButtonBasic() {
 | --- | --- | --- | --- | --- |
 | `href` | `string` | required without render | ButtonLink | The destination. A disabled ButtonLink does not render it. |
 | `render` | `(rootProps) => ReactElement` | — | ButtonLink | Renders the root through a router’s link component. The function receives every root prop and must pass all of them on. |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | accent | ButtonLink | The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does. |
+| `tone` | `accent \| secondary \| neutral \| success \| warning \| danger` | accent | ButtonLink | The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does. |
 | `variant` | `solid \| outline \| ghost` | solid | ButtonLink | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | ButtonLink | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `start` | `ReactNode` | — | ButtonLink | Content before the label, such as an icon. It mirrors in a right-to-left document. |
 | `end` | `ReactNode` | — | ButtonLink | Content after the label, such as an icon. It mirrors in a right-to-left document. |
 | `fullWidth` | `boolean` | false | ButtonLink | Fills the inline size of the container. |
+| `justify` | `center \| between` | center | ButtonLink | Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document. |
 | `disabled` | `boolean` | false | ButtonLink | Removes the href and refuses activation. The link stays focusable with role="link" and aria-disabled. |
 
 ### iconButton
@@ -106,7 +108,7 @@ export default function ButtonBasic() {
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
 | `aria-label \| aria-labelledby` | `string` | required | IconButton | The accessible name. Required, because an icon supplies no text. When both are present, aria-labelledby names the button. |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | secondary | IconButton | The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does. |
+| `tone` | `accent \| secondary \| neutral \| success \| warning \| danger` | secondary | IconButton | The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does. |
 | `variant` | `solid \| outline \| ghost` | ghost | IconButton | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | IconButton | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `shape` | `square \| circle` | square | IconButton | The corners of the control: square keeps the radius of the control scale, circle rounds it fully. Both are as wide as they are tall. |
@@ -125,12 +127,13 @@ export default function ButtonBasic() {
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | secondary | ToggleButton | The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does. |
+| `tone` | `accent \| secondary \| neutral \| success \| warning \| danger` | secondary | ToggleButton | The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does. |
 | `variant` | `solid \| outline \| ghost` | outline | ToggleButton | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | ToggleButton | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `start` | `ReactNode` | — | ToggleButton | Content before the label, such as an icon. It mirrors in a right-to-left document. |
 | `end` | `ReactNode` | — | ToggleButton | Content after the label, such as an icon. It mirrors in a right-to-left document. |
 | `fullWidth` | `boolean` | false | ToggleButton | Fills the inline size of the container. |
+| `justify` | `center \| between` | center | ToggleButton | Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document. |
 | `disabled` | `boolean` | false | ToggleButton | Refuses the action and marks the control unavailable. On its own, it sets the native disabled attribute, which also removes the control from the tab sequence. |
 | `focusableWhenDisabled` | `boolean` | false | ToggleButton | Keeps a disabled control in the tab sequence: aria-disabled replaces the native attribute, and activation is still refused. |
 | `loading` | `boolean` | false | ToggleButton | Refuses activation, keeps focus, and shows a progress indicator named by messages.loading. |
@@ -146,10 +149,11 @@ export default function ButtonBasic() {
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `accent`, `secondary` |
+| `tone` | `accent`, `secondary`, `neutral`, `success`, `warning`, `danger` | `accent`, `secondary` |
 | `variant` | `solid`, `outline`, `ghost` | `solid`, `ghost`, `outline` |
 | `size` | `sm`, `md`, `lg` | `md` |
 | `shape` | `square`, `circle` | `square` |
+| `justify` | `center`, `between` | `center` |
 
 ## Rules
 
@@ -180,7 +184,7 @@ export default function ButtonBasic() {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-loop`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-line-height-sm`, `--slotted-radius-full`, `--slotted-space-2`, `--slotted-target-min`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-solid-active`, `--slotted-tone-danger-solid-hover`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-solid-active`, `--slotted-tone-success-solid-hover`, `--slotted-tone-success-text`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-solid-active`, `--slotted-tone-warning-solid-hover`, `--slotted-tone-warning-text`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-loop`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-line-height-sm`, `--slotted-radius-full`, `--slotted-space-2`, `--slotted-target-min`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-solid-active`, `--slotted-tone-danger-solid-hover`, `--slotted-tone-danger-text`, `--slotted-tone-neutral-on-solid`, `--slotted-tone-neutral-solid`, `--slotted-tone-neutral-solid-active`, `--slotted-tone-neutral-solid-hover`, `--slotted-tone-neutral-text`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-solid-active`, `--slotted-tone-success-solid-hover`, `--slotted-tone-success-text`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-solid-active`, `--slotted-tone-warning-solid-hover`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/dist/docs/calendar.json

@@ -258,6 +258,13 @@
           "appliesTo": "Calendar",
           "description": "The view it opens on."
         },
+        {
+          "name": "granularity",
+          "type": "'day' | 'month'",
+          "defaultValue": "day",
+          "appliesTo": "Calendar",
+          "description": "What a choice is. month opens on the months of a year and never shows the day grid: a month cell is the value, written as the first day of that month, the arrow keys move one month or one row of four, Home and End reach January and December, Page Up and Page Down move a year, and Enter or Space chooses. A month the bounds leave no day of carries aria-disabled."
+        },
         {
           "name": "min",
           "type": "PlainDate",

package/dist/docs/calendar.md

@@ -51,6 +51,7 @@ Excerpt — not a complete module
 | `months` | `number` | 1 | Calendar | How many months are drawn side by side. They wrap when they do not fit; nothing is withdrawn. |
 | `view` | `'day' \| 'month' \| 'year'` | day | Calendar | Which grid is showing. Present means the consumer owns it; defaultView sets the starting one. |
 | `defaultView` | `'day' \| 'month' \| 'year'` | day | Calendar | The view it opens on. |
+| `granularity` | `'day' \| 'month'` | day | Calendar | What a choice is. month opens on the months of a year and never shows the day grid: a month cell is the value, written as the first day of that month, the arrow keys move one month or one row of four, Home and End reach January and December, Page Up and Page Down move a year, and Enter or Space chooses. A month the bounds leave no day of carries aria-disabled. |
 | `min` | `PlainDate` | — | Calendar | The earliest date the reader may reach. An arrow that would leave the range stops at the edge. |
 | `max` | `PlainDate` | — | Calendar | The latest date the reader may reach. |
 | `isDateUnavailable` | `(date: PlainDate) => boolean` | — | Calendar | Refuses particular dates. A refused date stays focusable and cannot be chosen. |

package/dist/docs/chart.json

@@ -202,6 +202,7 @@
         "tooltip-marker",
         "tooltip-label",
         "tooltip-value",
+        "tooltip-note",
         "tooltip-total",
         "skeleton",
         "empty",
@@ -416,6 +417,12 @@
           "required": false,
           "purpose": "The value in the series’ format, with the share of the whole on a pie."
         },
+        {
+          "part": "tooltip-note",
+          "element": "div",
+          "required": false,
+          "purpose": "The label of an upright line on this category, under the title. A label the plot had no room to draw is read here."
+        },
         {
           "part": "tooltip-total",
           "element": "div",

package/dist/docs/chart.md

@@ -59,6 +59,7 @@ Excerpt — not a complete module
 | `tooltip-marker` | span | no |
 | `tooltip-label` | span | no |
 | `tooltip-value` | span | no |
+| `tooltip-note` | div | no |
 | `tooltip-total` | div | no |
 | `skeleton` | div | no |
 | `empty` | div | no |

package/dist/docs/collapsible.json

@@ -416,7 +416,7 @@
     {
       "id": "mount",
       "title": "When the content exists",
-      "note": "eager builds it up front so the panel can transition closed, lazy builds it on the first open, active drops it each time, and until-found lets the browser’s own page search open the panel.",
+      "note": "eager builds it up front so the panel can transition closed, lazy builds it on the first open, active drops it each time, and until-found lets the browser’s own page search open the panel. A closed item under active commits once and reads no layout and no computed style; it creates no observer and no portal. Fifty closed items inside an Accordion, measured in Chrome: 7 ms of script and 23 ms to layout with a production build of React, 46 ms of script and 83 ms to layout with its development build.",
       "language": "tsx",
       "source": "<Collapsible mount=\"until-found\">\n  <CollapsibleHeader>\n    <CollapsibleTrigger>Histórico de entregas</CollapsibleTrigger>\n  </CollapsibleHeader>\n  <CollapsiblePanel>Entregue em 2 de setembro por Ana Ribeiro.</CollapsiblePanel>\n</Collapsible>;\n",
       "verdict": "excerpt"

package/dist/docs/collapsible.md

@@ -187,7 +187,7 @@ Excerpt — not a complete module
 
 ### When the content exists
 
-eager builds it up front so the panel can transition closed, lazy builds it on the first open, active drops it each time, and until-found lets the browser’s own page search open the panel.
+eager builds it up front so the panel can transition closed, lazy builds it on the first open, active drops it each time, and until-found lets the browser’s own page search open the panel. A closed item under active commits once and reads no layout and no computed style; it creates no observer and no portal. Fifty closed items inside an Accordion, measured in Chrome: 7 ms of script and 23 ms to layout with a production build of React, 46 ms of script and 83 ms to layout with its development build.
 
 Excerpt — not a complete module
 

package/dist/docs/currency-field.json

@@ -45,6 +45,10 @@
     "formatOn": [
       "change",
       "commit"
+    ],
+    "appearance": [
+      "control",
+      "display"
     ]
   },
   "members": {
@@ -61,7 +65,8 @@
         "formatOn": "change",
         "currencyDisplay": "symbol",
         "wheel": false,
-        "allowEmpty": false
+        "allowEmpty": false,
+        "appearance": "control"
       },
       "capabilities": [
         "value",
@@ -85,6 +90,7 @@
       ],
       "parts": [
         "root",
+        "symbol",
         "input",
         "start",
         "end",
@@ -113,6 +119,12 @@
           "required": true,
           "purpose": "The control. Holds the formatted amount, the identifier, aria-valuenow in major units and aria-valuetext as the reader sees it. It is type=\"text\" because type=\"number\" empties itself whenever the text is not a valid floating-point number, so no grouping separator and no currency symbol survives it. ref reaches it."
         },
+        {
+          "part": "symbol",
+          "element": "span",
+          "required": false,
+          "purpose": "The currency mark at the display appearance, drawn apart from the digits on the side the locale writes it, muted at the xl step. The input then holds the amount alone and its aria-valuetext carries the mark. Absent under currencyDisplay none and at the control appearance."
+        },
         {
           "part": "start",
           "element": "span",
@@ -193,6 +205,13 @@
           "appliesTo": "CurrencyField, CurrencyFieldDefaultsProvider",
           "description": "When the text takes the locale’s shape under entry=\"natural\". change regroups on every keystroke; commit holds the reader’s own text until blur, Enter or a step. Cents-first entry generates the text after every edit, so it decides nothing there"
         },
+        {
+          "name": "appearance",
+          "type": "'control' | 'display'",
+          "defaultValue": "control",
+          "appliesTo": "CurrencyField",
+          "description": "A field among fields, or the headline amount of an entry sheet: the 4xl step, the mark apart and muted, a rule under the amount instead of a box. size and variant do not apply to display"
+        },
         {
           "name": "align",
           "type": "'end' | 'start'",
@@ -446,6 +465,7 @@
   },
   "tokens": [
     "--slotted-border-subtle",
+    "--slotted-border-width-thin",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
     "--slotted-control-font-family",
@@ -482,6 +502,7 @@
     "--slotted-currency-field-disabled-background",
     "--slotted-currency-field-disabled-border-color",
     "--slotted-currency-field-disabled-color",
+    "--slotted-currency-field-display-font-size",
     "--slotted-currency-field-hover-border-color",
     "--slotted-currency-field-icon-size-min",
     "--slotted-currency-field-invalid-border-color",
@@ -503,6 +524,9 @@
     "--slotted-currency-field-subtle-background",
     "--slotted-currency-field-subtle-border-color",
     "--slotted-currency-field-subtle-hover-background",
+    "--slotted-currency-field-symbol-color",
+    "--slotted-currency-field-symbol-font-size",
+    "--slotted-currency-field-underline-color",
     "--slotted-disabled-background",
     "--slotted-disabled-border",
     "--slotted-disabled-foreground",
@@ -510,10 +534,17 @@
     "--slotted-focus-ring-color-invalid",
     "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-font-size-4xl",
+    "--slotted-font-size-xl",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-letter-spacing-tighter",
+    "--slotted-line-height-4xl",
     "--slotted-radius-none",
     "--slotted-radius-xs",
     "--slotted-space-1",
     "--slotted-space-2",
+    "--slotted-space-3",
     "--slotted-surface-sunken",
     "--slotted-target-comfortable",
     "--slotted-target-min",

package/dist/docs/currency-field.md

@@ -27,6 +27,7 @@ Excerpt — not a complete module
 | --- | --- | --- |
 | `root` | div, or the element render returns | yes |
 | `input` | input[type=text][role=spinbutton] | yes |
+| `symbol` | span | no |
 | `start` | span | no |
 | `end` | span | no |
 | `scrub` | span (CurrencyFieldScrub) | no |
@@ -44,6 +45,7 @@ Excerpt — not a complete module
 | `defaultValue` | `number \| null` | — | CurrencyField | What an uncontrolled control starts from, read once. A native form reset returns to it |
 | `entry` | `'cents' \| 'natural'` | cents | CurrencyField, CurrencyFieldDefaultsProvider | How the reader types. cents is the cash register: digits enter at the minor unit and shift left, the separator is never typed and the caret has one legal position. natural is the spreadsheet, and the model number-field uses |
 | `formatOn` | `'change' \| 'commit'` | change | CurrencyField, CurrencyFieldDefaultsProvider | When the text takes the locale’s shape under entry="natural". change regroups on every keystroke; commit holds the reader’s own text until blur, Enter or a step. Cents-first entry generates the text after every edit, so it decides nothing there |
+| `appearance` | `'control' \| 'display'` | control | CurrencyField | A field among fields, or the headline amount of an entry sheet: the 4xl step, the mark apart and muted, a rule under the amount instead of a box. size and variant do not apply to display |
 | `align` | `'end' \| 'start'` | end | CurrencyField, CurrencyFieldDefaultsProvider | Which edge the amount is set against. end by default: a column of amounts is compared on its last digit, and the cents-first caret already lives there |
 | `locale` | `string` | the language in force | CurrencyField | BCP 47. It decides the separators, where the symbol goes and the numbering system — never the symbol itself, which is the currency’s |
 | `format` | `Intl.NumberFormatOptions` | — | CurrencyField | Any other Intl option: currencySign for accounting parentheses, signDisplay, useGrouping, roundingMode. Every key here wins over the family’s own; style and currency are the family’s |
@@ -96,6 +98,7 @@ Excerpt — not a complete module
 | `clamp` | `blur`, `strict`, `none` | `blur` |
 | `currencyDisplay` | `symbol`, `narrowSymbol`, `code`, `name`, `none` | `symbol` |
 | `formatOn` | `change`, `commit` | `change` |
+| `appearance` | `control`, `display` | `control` |
 
 ## Rules
 
@@ -110,7 +113,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-currency-field-action-size`, `--slotted-currency-field-adornment-color`, `--slotted-currency-field-background`, `--slotted-currency-field-border-color`, `--slotted-currency-field-color`, `--slotted-currency-field-disabled-background`, `--slotted-currency-field-disabled-border-color`, `--slotted-currency-field-disabled-color`, `--slotted-currency-field-hover-border-color`, `--slotted-currency-field-icon-size-min`, `--slotted-currency-field-invalid-border-color`, `--slotted-currency-field-invalid-edge-width`, `--slotted-currency-field-invalid-focus-ring-color`, `--slotted-currency-field-placeholder-color`, `--slotted-currency-field-plain-hover-background`, `--slotted-currency-field-radius`, `--slotted-currency-field-readonly-background`, `--slotted-currency-field-readonly-border-color`, `--slotted-currency-field-scrub-active-color`, `--slotted-currency-field-shadow`, `--slotted-currency-field-stepper-active-background`, `--slotted-currency-field-stepper-color`, `--slotted-currency-field-stepper-disabled-background`, `--slotted-currency-field-stepper-disabled-color`, `--slotted-currency-field-stepper-hover-background`, `--slotted-currency-field-stepper-size`, `--slotted-currency-field-subtle-background`, `--slotted-currency-field-subtle-border-color`, `--slotted-currency-field-subtle-hover-background`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-currency-field-action-size`, `--slotted-currency-field-adornment-color`, `--slotted-currency-field-background`, `--slotted-currency-field-border-color`, `--slotted-currency-field-color`, `--slotted-currency-field-disabled-background`, `--slotted-currency-field-disabled-border-color`, `--slotted-currency-field-disabled-color`, `--slotted-currency-field-display-font-size`, `--slotted-currency-field-hover-border-color`, `--slotted-currency-field-icon-size-min`, `--slotted-currency-field-invalid-border-color`, `--slotted-currency-field-invalid-edge-width`, `--slotted-currency-field-invalid-focus-ring-color`, `--slotted-currency-field-placeholder-color`, `--slotted-currency-field-plain-hover-background`, `--slotted-currency-field-radius`, `--slotted-currency-field-readonly-background`, `--slotted-currency-field-readonly-border-color`, `--slotted-currency-field-scrub-active-color`, `--slotted-currency-field-shadow`, `--slotted-currency-field-stepper-active-background`, `--slotted-currency-field-stepper-color`, `--slotted-currency-field-stepper-disabled-background`, `--slotted-currency-field-stepper-disabled-color`, `--slotted-currency-field-stepper-hover-background`, `--slotted-currency-field-stepper-size`, `--slotted-currency-field-subtle-background`, `--slotted-currency-field-subtle-border-color`, `--slotted-currency-field-subtle-hover-background`, `--slotted-currency-field-symbol-color`, `--slotted-currency-field-symbol-font-size`, `--slotted-currency-field-underline-color`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-4xl`, `--slotted-font-size-xl`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-letter-spacing-tighter`, `--slotted-line-height-4xl`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/dist/docs/date-field.json

@@ -125,7 +125,7 @@
           "type": "PlainDate | null",
           "defaultValue": "—",
           "appliesTo": "DateField",
-          "description": "The date the control shows. Present means the consumer owns it: the control asks and waits rather than moving it."
+          "description": "The date the control shows. Present means the consumer owns it: the control asks and waits rather than moving it. PlainDate is exported by @slotted/core/date. parseISODate(text) returns a PlainDate or null, and toISODate(date) returns 'YYYY-MM-DD': value={parseISODate(iso)} onValueChange={(v) => setIso(v === null ? '' : toISODate(v))}."
         },
         {
           "name": "defaultValue",
@@ -134,6 +134,13 @@
           "appliesTo": "DateField",
           "description": "The date the control starts from when nobody else writes one. Read once; a later change to it is not new state."
         },
+        {
+          "name": "granularity",
+          "type": "'day' | 'month'",
+          "defaultValue": "day",
+          "appliesTo": "DateField",
+          "description": "What the control holds. month shows the month and the year segments in the locale’s order, takes the first day of the month as its value, and submits YYYY-MM through name."
+        },
         {
           "name": "min",
           "type": "PlainDate",

package/dist/docs/date-field.md

@@ -38,8 +38,9 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `value` | `PlainDate \| null` | — | DateField | The date the control shows. Present means the consumer owns it: the control asks and waits rather than moving it. |
+| `value` | `PlainDate \| null` | — | DateField | The date the control shows. Present means the consumer owns it: the control asks and waits rather than moving it. PlainDate is exported by @slotted/core/date. parseISODate(text) returns a PlainDate or null, and toISODate(date) returns 'YYYY-MM-DD': value={parseISODate(iso)} onValueChange={(v) => setIso(v === null ? '' : toISODate(v))}. |
 | `defaultValue` | `PlainDate \| null` | — | DateField | The date the control starts from when nobody else writes one. Read once; a later change to it is not new state. |
+| `granularity` | `'day' \| 'month'` | day | DateField | What the control holds. month shows the month and the year segments in the locale’s order, takes the first day of the month as its value, and submits YYYY-MM through name. |
 | `min` | `PlainDate` | — | DateField | The earliest date the control accepts. Reported through each segment’s aria-valuemin, and a value below it makes the control invalid. |
 | `max` | `PlainDate` | — | DateField | The latest date the control accepts, on the same terms as min. |
 | `isDateUnavailable` | `(date: PlainDate) => boolean` | — | DateField | Refuses particular dates — a weekend, a holiday, a day already booked. A refused date makes the control invalid. |

package/dist/docs/date-picker.examples.md

@@ -740,6 +740,35 @@ export default function DatePickerInvoiceDue() {
 }
 ```
 
+### iso-date.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { DatePicker } from '@slotted/react/date-picker';
+import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';
+import { isPlainDate, parseISODate, toISODate } from '@slotted/core/date';
+
+export default function DatePickerIsoDate() {
+  /* The API carries the date as text; the picker holds a PlainDate. */
+  const [iso, setIso] = useState('2026-10-19');
+
+  return (
+    <Field>
+      <FieldLabel>Statement date</FieldLabel>
+      <DatePicker
+        onValueChange={(value) => setIso(isPlainDate(value) ? toISODate(value) : '')}
+        value={parseISODate(iso)}
+      />
+      <FieldDescription>
+        {iso === '' ? 'No date sent.' : `The API receives ${iso}.`}
+      </FieldDescription>
+    </Field>
+  );
+}
+```
+
 ### locale.tsx
 
 Example

package/dist/docs/date-picker.json

@@ -135,7 +135,7 @@
           "type": "PlainDate | DateRange | PlainDate[] | null",
           "defaultValue": "—",
           "appliesTo": "DatePicker",
-          "description": "The selected value, whose shape follows selectionMode. Setting it makes the value controlled."
+          "description": "The selected value, whose shape follows selectionMode. Setting it makes the value controlled. PlainDate is exported by @slotted/core/date. parseISODate(text) returns a PlainDate or null, toISODate(date) returns 'YYYY-MM-DD', and isPlainDate(value) narrows the CalendarValue onValueChange reports: value={parseISODate(iso)} onValueChange={(v) => setIso(isPlainDate(v) ? toISODate(v) : '')}."
         },
         {
           "name": "defaultValue",
@@ -179,6 +179,13 @@
           "appliesTo": "DatePicker",
           "description": "Returns true for a date the reader cannot choose. The calendar disables it, and a typed unavailable date marks the date picker invalid."
         },
+        {
+          "name": "granularity",
+          "type": "'day' | 'month'",
+          "defaultValue": "day",
+          "appliesTo": "DatePicker",
+          "description": "What a choice is. month opens the calendar on the months of a year and chooses a month cell; the field shows the month and the year segments; value, defaultValue, min and max are PlainYearMonth from @slotted/core/date ({ year, month }), onValueChange reports one, and name submits YYYY-MM. parseISOYearMonth and toISOYearMonth convert to and from that text. selectionMode, months, isDateUnavailable and the week props do not apply."
+        },
         {
           "name": "selectionMode",
           "type": "'single' | 'range' | 'multiple'",
@@ -627,6 +634,14 @@
       "source": "import { useState } from 'react';\nimport { DatePicker } from '@slotted/react/date-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport { Stack } from '@slotted/react/stack';\nimport {\n  addDays,\n  createDateFormat,\n  isPlainDate,\n  plainDate,\n  type PlainDate,\n} from '@slotted/core/date';\n\nconst TERMS = [\n  { value: 'receipt', label: 'Due on receipt', days: 0 },\n  { value: 'net-15', label: 'Net 15', days: 15 },\n  { value: 'net-30', label: 'Net 30', days: 30 },\n  { value: 'net-60', label: 'Net 60', days: 60 },\n];\nconst words = createDateFormat({ locale: 'en-US' });\n\nexport default function DatePickerInvoiceDue() {\n  const [issued, setIssued] = useState<PlainDate | null>(plainDate(2026, 9, 30));\n  const [terms, setTerms] = useState('net-30');\n  const days = TERMS.find((option) => option.value === terms)?.days ?? 0;\n  const due = issued === null ? null : addDays(issued, days);\n\n  return (\n    <Stack gap={5}>\n      <Field required>\n        <FieldLabel>Invoice date</FieldLabel>\n        <DatePicker\n          onValueChange={(value) => setIssued(isPlainDate(value) ? value : null)}\n          value={issued}\n        />\n      </Field>\n      <Field>\n        <FieldLabel>Payment terms</FieldLabel>\n        <Select\n          items={TERMS}\n          onValueChange={(next) => {\n            if (typeof next === 'string') setTerms(next);\n          }}\n          value={terms}\n        >\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {TERMS.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </Field>\n      <Field readOnly>\n        <FieldLabel>Due date</FieldLabel>\n        <DatePicker value={due} />\n        <FieldDescription>\n          {due === null ? 'Set the invoice date first.' : `Payment is due ${words.describe(due)}.`}\n        </FieldDescription>\n      </Field>\n    </Stack>\n  );\n}\n",
       "verdict": "example"
     },
+    {
+      "id": "iso-date",
+      "title": "iso-date.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { DatePicker } from '@slotted/react/date-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { isPlainDate, parseISODate, toISODate } from '@slotted/core/date';\n\nexport default function DatePickerIsoDate() {\n  /* The API carries the date as text; the picker holds a PlainDate. */\n  const [iso, setIso] = useState('2026-10-19');\n\n  return (\n    <Field>\n      <FieldLabel>Statement date</FieldLabel>\n      <DatePicker\n        onValueChange={(value) => setIso(isPlainDate(value) ? toISODate(value) : '')}\n        value={parseISODate(iso)}\n      />\n      <FieldDescription>\n        {iso === '' ? 'No date sent.' : `The API receives ${iso}.`}\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
     {
       "id": "locale",
       "title": "locale.tsx",

package/dist/docs/date-picker.md

@@ -44,13 +44,14 @@ export default function DatePickerBasic() {
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `value` | `PlainDate \| DateRange \| PlainDate[] \| null` | — | DatePicker | The selected value, whose shape follows selectionMode. Setting it makes the value controlled. |
+| `value` | `PlainDate \| DateRange \| PlainDate[] \| null` | — | DatePicker | The selected value, whose shape follows selectionMode. Setting it makes the value controlled. PlainDate is exported by @slotted/core/date. parseISODate(text) returns a PlainDate or null, toISODate(date) returns 'YYYY-MM-DD', and isPlainDate(value) narrows the CalendarValue onValueChange reports: value={parseISODate(iso)} onValueChange={(v) => setIso(isPlainDate(v) ? toISODate(v) : '')}. |
 | `defaultValue` | `PlainDate \| DateRange \| PlainDate[] \| null` | — | DatePicker | The starting value of an uncontrolled date picker. Read once, on the first render. |
 | `open` | `boolean` | — | DatePicker | Whether the calendar is showing. Setting it makes the open state controlled. |
 | `defaultOpen` | `boolean` | false | DatePicker | Whether the calendar shows on the first render. Focus does not move into it. |
 | `min` | `PlainDate` | — | DatePicker | The earliest date the field and the calendar accept. Earlier days are disabled in the calendar, and an earlier typed date marks the date picker invalid. |
 | `max` | `PlainDate` | — | DatePicker | The latest date the field and the calendar accept. Later days are disabled in the calendar, and a later typed date marks the date picker invalid. |
 | `isDateUnavailable` | `(date: PlainDate) => boolean` | — | DatePicker | Returns true for a date the reader cannot choose. The calendar disables it, and a typed unavailable date marks the date picker invalid. |
+| `granularity` | `'day' \| 'month'` | day | DatePicker | What a choice is. month opens the calendar on the months of a year and chooses a month cell; the field shows the month and the year segments; value, defaultValue, min and max are PlainYearMonth from @slotted/core/date ({ year, month }), onValueChange reports one, and name submits YYYY-MM. parseISOYearMonth and toISOYearMonth convert to and from that text. selectionMode, months, isDateUnavailable and the week props do not apply. |
 | `selectionMode` | `'single' \| 'range' \| 'multiple'` | single | DatePicker | How many dates the calendar selects, and so the shape of the value. The field shows a single date only; for a start and an end, use DateRangePicker. |
 | `months` | `number` | 1 | DatePicker | How many months the calendar draws side by side. |
 | `defaultView` | `'day' \| 'month' \| 'year'` | day | DatePicker | The grid the calendar opens on. |