@slotted/angular 0.1.0-beta.1 → 0.1.0-beta.10

package/docs/list-item.json

@@ -10,6 +10,7 @@
     "tone": [
       "secondary",
       "accent",
+      "info",
       "success",
       "warning",
       "danger"
@@ -134,7 +135,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'secondary' | 'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "slListItem",
           "description": "The row ink, the wash under the pointer and the ground of a selected row. It never fills a resting row"
@@ -349,6 +350,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/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 | slListItem | 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 | slListItem | 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 | slListItem | The room the row gets. Falls back to the list, then the injected default |
 | `align` | `'center' \| 'start'` | center | slListItem | Where the leading visual and the metadata sit against a row of more than one line |
 | `inset` | `boolean` | false | slListItem | Takes the row inline padding away. Falls back to the list, then the injected default |
@@ -62,7 +62,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` |
 
@@ -83,7 +83,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/docs/list.json

@@ -51,6 +51,7 @@
         "root",
         "section",
         "section-label",
+        "section-end",
         "section-list",
         "empty"
       ]
@@ -80,7 +81,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 the element inside the heading marked slListSectionEnd."
         },
         {
           "part": "section-list",
@@ -152,6 +159,13 @@
           "appliesTo": "slListSectionLabel",
           "description": "Keeps a group name in place while its own rows scroll past it"
         },
+        {
+          "name": "variant",
+          "type": "'caption' | 'ruled'",
+          "defaultValue": "caption",
+          "appliesTo": "slListSectionLabel",
+          "description": "How the group heading is drawn: the small muted name, or the name over a rule with no ground; an element inside it marked slListSectionEnd stands at the end, in tabular figures"
+        },
         {
           "name": "id",
           "type": "string",
@@ -209,6 +223,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",
@@ -232,6 +247,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",
@@ -241,6 +258,7 @@
     "--slotted-space-8",
     "--slotted-space-9",
     "--slotted-surface",
+    "--slotted-text",
     "--slotted-text-muted",
     "--slotted-z-index-sticky"
   ],

package/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,7 @@ Excerpt — not a complete module
 | `loading` | `boolean` | false | slList | Writes aria-busy on the set. What stands in for the rows is slSkeleton, composed by the page |
 | `level` | `'none' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6'` | 3 | the element | Not an input: slListSectionLabel goes on the heading the page wrote, at whatever level the document needs |
 | `sticky` | `boolean` | false | slListSectionLabel | Keeps a group name in place while its own rows scroll past it |
+| `variant` | `'caption' \| 'ruled'` | caption | slListSectionLabel | How the group heading is drawn: the small muted name, or the name over a rule with no ground; an element inside it marked slListSectionEnd stands at the end, in tabular figures |
 | `id` | `string` | — | slListSectionLabel | The heading own id, which the nested list is named by. Generated when the page wrote none |
 | `exportAs` | `slList \| slListSection \| slListSectionLabel \| slListSectionList \| slListEmpty` | — | every directive | Reaches the instance from a template |
 | `aria-label / aria-labelledby` | `string` | — | slList | The set own name, written on the element. The family adds no label of its own |
@@ -75,7 +77,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