@slotted/react 0.1.0-beta.0 → 0.1.0-beta.10

package/dist/docs/list-item.json

@@ -10,6 +10,7 @@
     "tone": [
       "secondary",
       "accent",
+      "info",
       "success",
       "warning",
       "danger"
@@ -132,7 +133,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'secondary' | 'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "ListItem",
           "description": "The row ink, the wash under the pointer and the ground of a selected row. It never fills a resting row"
@@ -361,6 +362,13 @@
     "--slotted-tone-danger-subtle-hover",
     "--slotted-tone-danger-surface",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-border",
+    "--slotted-tone-info-solid-active",
+    "--slotted-tone-info-solid-hover",
+    "--slotted-tone-info-subtle-active",
+    "--slotted-tone-info-subtle-hover",
+    "--slotted-tone-info-surface",
+    "--slotted-tone-info-text",
     "--slotted-tone-secondary-border",
     "--slotted-tone-secondary-solid-active",
     "--slotted-tone-secondary-solid-hover",

package/dist/docs/list-item.md

@@ -42,7 +42,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'secondary' \| 'accent' \| 'success' \| 'warning' \| 'danger'` | secondary | ListItem | The row ink, the wash under the pointer and the ground of a selected row. It never fills a resting row |
+| `tone` | `'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | ListItem | The row ink, the wash under the pointer and the ground of a selected row. It never fills a resting row |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | ListItem | The room the row gets. Falls back to the list, then the provider |
 | `align` | `'center' \| 'start'` | center | ListItem | Where the leading visual and the metadata sit against a row of more than one line |
 | `inset` | `boolean` | false | ListItem | Takes the row inline padding away. Falls back to the list, then the provider |
@@ -64,7 +64,7 @@ Excerpt — not a complete module
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `tone` | `secondary`, `accent`, `success`, `warning`, `danger` | `secondary` |
+| `tone` | `secondary`, `accent`, `info`, `success`, `warning`, `danger` | `secondary` |
 | `size` | `sm`, `md`, `lg` | `md` |
 | `align` | `center`, `start` | `center` |
 
@@ -85,7 +85,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--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-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-list-item-background`, `--slotted-list-item-background-active`, `--slotted-list-item-background-current`, `--slotted-list-item-background-hover`, `--slotted-list-item-background-selected`, `--slotted-list-item-body-gap`, `--slotted-list-item-border-color`, `--slotted-list-item-border-width`, `--slotted-list-item-color`, `--slotted-list-item-color-disabled`, `--slotted-list-item-color-muted`, `--slotted-list-item-control-size`, `--slotted-list-item-control-size-lg`, `--slotted-list-item-control-size-sm`, `--slotted-list-item-description-font-size`, `--slotted-list-item-font-size`, `--slotted-list-item-font-size-lg`, `--slotted-list-item-font-size-sm`, `--slotted-list-item-font-weight`, `--slotted-list-item-font-weight-current`, `--slotted-list-item-font-weight-selected`, `--slotted-list-item-gap`, `--slotted-list-item-gap-lg`, `--slotted-list-item-gap-sm`, `--slotted-list-item-icon-size`, `--slotted-list-item-icon-size-lg`, `--slotted-list-item-icon-size-sm`, `--slotted-list-item-min-block-size`, `--slotted-list-item-min-block-size-lg`, `--slotted-list-item-min-block-size-sm`, `--slotted-list-item-padding-block`, `--slotted-list-item-padding-block-lg`, `--slotted-list-item-padding-block-sm`, `--slotted-list-item-padding-inline`, `--slotted-list-item-padding-inline-lg`, `--slotted-list-item-padding-inline-sm`, `--slotted-list-item-radius`, `--slotted-radius-md`, `--slotted-selection-size-lg`, `--slotted-selection-size-md`, `--slotted-selection-size-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-solid-active`, `--slotted-tone-danger-solid-hover`, `--slotted-tone-danger-subtle-active`, `--slotted-tone-danger-subtle-hover`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-success-border`, `--slotted-tone-success-solid-active`, `--slotted-tone-success-solid-hover`, `--slotted-tone-success-subtle-active`, `--slotted-tone-success-subtle-hover`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-solid-active`, `--slotted-tone-warning-solid-hover`, `--slotted-tone-warning-subtle-active`, `--slotted-tone-warning-subtle-hover`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--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-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-list-item-background`, `--slotted-list-item-background-active`, `--slotted-list-item-background-current`, `--slotted-list-item-background-hover`, `--slotted-list-item-background-selected`, `--slotted-list-item-body-gap`, `--slotted-list-item-border-color`, `--slotted-list-item-border-width`, `--slotted-list-item-color`, `--slotted-list-item-color-disabled`, `--slotted-list-item-color-muted`, `--slotted-list-item-control-size`, `--slotted-list-item-control-size-lg`, `--slotted-list-item-control-size-sm`, `--slotted-list-item-description-font-size`, `--slotted-list-item-font-size`, `--slotted-list-item-font-size-lg`, `--slotted-list-item-font-size-sm`, `--slotted-list-item-font-weight`, `--slotted-list-item-font-weight-current`, `--slotted-list-item-font-weight-selected`, `--slotted-list-item-gap`, `--slotted-list-item-gap-lg`, `--slotted-list-item-gap-sm`, `--slotted-list-item-icon-size`, `--slotted-list-item-icon-size-lg`, `--slotted-list-item-icon-size-sm`, `--slotted-list-item-min-block-size`, `--slotted-list-item-min-block-size-lg`, `--slotted-list-item-min-block-size-sm`, `--slotted-list-item-padding-block`, `--slotted-list-item-padding-block-lg`, `--slotted-list-item-padding-block-sm`, `--slotted-list-item-padding-inline`, `--slotted-list-item-padding-inline-lg`, `--slotted-list-item-padding-inline-sm`, `--slotted-list-item-radius`, `--slotted-radius-md`, `--slotted-selection-size-lg`, `--slotted-selection-size-md`, `--slotted-selection-size-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-solid-active`, `--slotted-tone-danger-solid-hover`, `--slotted-tone-danger-subtle-active`, `--slotted-tone-danger-subtle-hover`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-border`, `--slotted-tone-info-solid-active`, `--slotted-tone-info-solid-hover`, `--slotted-tone-info-subtle-active`, `--slotted-tone-info-subtle-hover`, `--slotted-tone-info-surface`, `--slotted-tone-info-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-success-border`, `--slotted-tone-success-solid-active`, `--slotted-tone-success-solid-hover`, `--slotted-tone-success-subtle-active`, `--slotted-tone-success-subtle-hover`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-solid-active`, `--slotted-tone-warning-solid-hover`, `--slotted-tone-warning-subtle-active`, `--slotted-tone-warning-subtle-hover`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/dist/docs/list.json

@@ -51,6 +51,7 @@
         "root",
         "section",
         "section-label",
+        "section-end",
         "section-list",
         "empty"
       ]
@@ -78,7 +79,13 @@
           "part": "section-label",
           "element": "h1 to h6, or a div",
           "required": false,
-          "purpose": "The group name. It carries the id the nested list names itself by, and data-sticky when it has to hold still while its own rows scroll past."
+          "purpose": "The group name. It carries the id the nested list names itself by, data-sticky when it has to hold still while its own rows scroll past, and data-variant: caption, the small muted name, or ruled, the name in the text colour over a rule with no ground behind it."
+        },
+        {
+          "part": "section-end",
+          "element": "span",
+          "required": false,
+          "purpose": "What stands at the end of the heading, on the line of the name: a day balance, a count. Set in tabular figures. It is rendered from the end prop."
         },
         {
           "part": "section-list",
@@ -150,6 +157,20 @@
           "appliesTo": "ListSection",
           "description": "Keeps a group name in place while its own rows scroll past it"
         },
+        {
+          "name": "end",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ListSection",
+          "description": "What stands at the end of the group heading, on the line of the name, in tabular figures"
+        },
+        {
+          "name": "labelVariant",
+          "type": "'caption' | 'ruled'",
+          "defaultValue": "caption",
+          "appliesTo": "ListSection",
+          "description": "How the group heading is drawn: the small muted name, or the name over a rule with no ground"
+        },
         {
           "name": "label",
           "type": "ReactNode",
@@ -213,6 +234,7 @@
     "--slotted-control-padding-inline-md",
     "--slotted-control-padding-inline-sm",
     "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
     "--slotted-font-weight-semibold",
     "--slotted-line-height-sm",
     "--slotted-list-background",
@@ -236,6 +258,8 @@
     "--slotted-list-section-padding-block",
     "--slotted-list-section-padding-block-lg",
     "--slotted-list-section-padding-block-sm",
+    "--slotted-list-section-rule-color",
+    "--slotted-list-section-ruled-color",
     "--slotted-radius-md",
     "--slotted-space-2",
     "--slotted-space-3",
@@ -245,6 +269,7 @@
     "--slotted-space-8",
     "--slotted-space-9",
     "--slotted-surface",
+    "--slotted-text",
     "--slotted-text-muted",
     "--slotted-z-index-sticky"
   ],

package/dist/docs/list.md

@@ -33,6 +33,7 @@ Excerpt — not a complete module
 | `root` | ul or ol, or the element render returns | yes |
 | `section` | li | no |
 | `section-label` | h1 to h6, or a div | no |
+| `section-end` | span | no |
 | `section-list` | ul or ol | no |
 | `empty` | li | no |
 
@@ -48,6 +49,8 @@ Excerpt — not a complete module
 | `loading` | `boolean` | false | List | Writes aria-busy on the set. What stands in for the rows is Skeleton, composed by the page |
 | `level` | `'none' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6'` | 3 | ListSection | The heading a group name is set as. none renders a div and announces no heading |
 | `sticky` | `boolean` | false | ListSection | Keeps a group name in place while its own rows scroll past it |
+| `end` | `ReactNode` | — | ListSection | What stands at the end of the group heading, on the line of the name, in tabular figures |
+| `labelVariant` | `'caption' \| 'ruled'` | caption | ListSection | How the group heading is drawn: the small muted name, or the name over a rule with no ground |
 | `label` | `ReactNode` | — | ListSection | The group name, which the nested list is named by |
 | `labelProps / listProps` | `HTMLAttributes` | — | ListSection | Reach the heading and the nested list, for an id or a class the page owns |
 | `render` | `(props) => ReactNode` | — | List, ListSection, ListEmpty | Renders the wiring into another element — a nav, a router own list |
@@ -75,7 +78,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-semibold`, `--slotted-line-height-sm`, `--slotted-list-background`, `--slotted-list-border-color`, `--slotted-list-border-width`, `--slotted-list-empty-color`, `--slotted-list-empty-padding`, `--slotted-list-empty-padding-lg`, `--slotted-list-empty-padding-sm`, `--slotted-list-gap`, `--slotted-list-gap-lg`, `--slotted-list-gap-sm`, `--slotted-list-padding-inline`, `--slotted-list-padding-inline-lg`, `--slotted-list-padding-inline-sm`, `--slotted-list-radius`, `--slotted-list-section-color`, `--slotted-list-section-font-size`, `--slotted-list-section-font-weight`, `--slotted-list-section-letter-spacing`, `--slotted-list-section-padding-block`, `--slotted-list-section-padding-block-lg`, `--slotted-list-section-padding-block-sm`, `--slotted-radius-md`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text-muted`, `--slotted-z-index-sticky`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-sm`, `--slotted-list-background`, `--slotted-list-border-color`, `--slotted-list-border-width`, `--slotted-list-empty-color`, `--slotted-list-empty-padding`, `--slotted-list-empty-padding-lg`, `--slotted-list-empty-padding-sm`, `--slotted-list-gap`, `--slotted-list-gap-lg`, `--slotted-list-gap-sm`, `--slotted-list-padding-inline`, `--slotted-list-padding-inline-lg`, `--slotted-list-padding-inline-sm`, `--slotted-list-radius`, `--slotted-list-section-color`, `--slotted-list-section-font-size`, `--slotted-list-section-font-weight`, `--slotted-list-section-letter-spacing`, `--slotted-list-section-padding-block`, `--slotted-list-section-padding-block-lg`, `--slotted-list-section-padding-block-sm`, `--slotted-list-section-rule-color`, `--slotted-list-section-ruled-color`, `--slotted-radius-md`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-z-index-sticky`
 
 ## Examples