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

package/docs/tokens.md

@@ -0,0 +1,467 @@
+# Tokens
+
+The theme states every value the families draw with. An element of the application's own reads the groups on this page, never a literal, and never a token of a group under "Read by their family only" (CP-05, OE-01).
+
+A primitive is a step on a scale; a semantic token says what a value is for. Values are the default theme's. A colour has no value here: it changes with the scheme — light, dark, high-contrast — and is chosen by its role. A value that follows density is given for comfortable, compact and dense.
+
+## space
+
+How much separation or inset a layout needs, smallest first; a gap or an inset is one step.
+
+Names: --slotted-space-{step}
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-space-1` | — | 0.125rem |
+| `--slotted-space-2` | — | 0.25rem |
+| `--slotted-space-3` | — | 0.375rem |
+| `--slotted-space-4` | — | 0.5rem |
+| `--slotted-space-5` | — | 0.75rem |
+| `--slotted-space-6` | — | 1rem |
+| `--slotted-space-7` | — | 1.25rem |
+| `--slotted-space-8` | — | 1.5rem |
+| `--slotted-space-9` | — | 2rem |
+| `--slotted-space-10` | — | 2.5rem |
+| `--slotted-space-11` | — | 3rem |
+| `--slotted-space-12` | — | 4rem |
+
+## radius
+
+How rounded a box or a part is drawn, from none to full.
+
+Names: --slotted-radius-{step}
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-radius-none` | — | 0px |
+| `--slotted-radius-xs` | — | 2px |
+| `--slotted-radius-sm` | — | 4px |
+| `--slotted-radius-md` | — | 6px |
+| `--slotted-radius-lg` | — | 8px |
+| `--slotted-radius-full` | — | 9999px |
+
+## font-family
+
+The typeface text is set in.
+
+Names: --slotted-font-family-{family}
+
+| family | Meaning |
+| --- | --- |
+| sans | The typeface of the interface's text. |
+| mono | The typeface of code and of values read character by character. |
+| heading | The typeface of headings; a theme may point it at a face of its own. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-font-family-sans` | The typeface of the interface's text. | 'Geist Variable', ui-sans-serif, system-ui, sans-serif |
+| `--slotted-font-family-mono` | The typeface of code and of values read character by character. | 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace |
+| `--slotted-font-family-heading` | The typeface of headings; a theme may point it at a face of its own. | 'Geist Variable', ui-sans-serif, system-ui, sans-serif |
+
+## font-size
+
+What size text is set in, smallest first; text of the application's own takes its size from the `typography` family before this scale.
+
+Names: --slotted-font-size-{step}
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-font-size-xs` | — | 0.75rem |
+| `--slotted-font-size-sm` | — | 0.8125rem |
+| `--slotted-font-size-md` | — | 0.875rem |
+| `--slotted-font-size-lg` | — | 1rem |
+| `--slotted-font-size-xl` | — | 1.125rem |
+| `--slotted-font-size-2xl` | — | 1.25rem |
+| `--slotted-font-size-3xl` | — | 1.5rem |
+| `--slotted-font-size-4xl` | — | 2rem |
+
+## line-height
+
+The line height that pairs with the font-size step of the same name.
+
+Names: --slotted-line-height-{step}
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-line-height-xs` | — | 1.4 |
+| `--slotted-line-height-sm` | — | 1.45 |
+| `--slotted-line-height-md` | — | 1.5 |
+| `--slotted-line-height-lg` | — | 1.5 |
+| `--slotted-line-height-xl` | — | 1.45 |
+| `--slotted-line-height-2xl` | — | 1.4 |
+| `--slotted-line-height-3xl` | — | 1.3 |
+| `--slotted-line-height-4xl` | — | 1.2 |
+
+## letter-spacing
+
+The tracking large type takes: the tight step at the md and lg display steps, the tighter step at 3xl and 4xl. Text at the body steps reads the face as drawn.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-letter-spacing-tight` | The tracking of a display figure or a wordmark at the md and lg font-size steps. | -0.02em |
+| `--slotted-letter-spacing-tighter` | The tracking of a display figure at the 3xl and 4xl font-size steps. | -0.03em |
+
+## font-weight
+
+How much typographic emphasis text carries.
+
+Names: --slotted-font-weight-{weight}
+
+| weight | Meaning |
+| --- | --- |
+| regular | Running text. |
+| medium | Text that stands out from running text without heading it. |
+| semibold | A heading, a control's label, a figure that leads. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-font-weight-regular` | Running text. | 400 |
+| `--slotted-font-weight-medium` | Text that stands out from running text without heading it. | 500 |
+| `--slotted-font-weight-semibold` | A heading, a control's label, a figure that leads. | 600 |
+
+## border-width
+
+How thick an edge or a ring is drawn.
+
+Names: --slotted-border-width-{width}
+
+| width | Meaning |
+| --- | --- |
+| thin | The edge of a box, a control or a divider. |
+| medium | The weight between thin and thick. |
+| thick | The heaviest edge. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-border-width-thin` | The edge of a box, a control or a divider. | 1px |
+| `--slotted-border-width-thick` | The heaviest edge. | 2px |
+| `--slotted-border-width-medium` | The weight between thin and thick. | 1.5px |
+
+## duration
+
+How long a transition or one cycle of a loop takes. The steps from instant to long collapse under reduced motion; the loops do not, so a repeating animation stops there instead.
+
+Names: --slotted-duration-{step}
+
+| step | Meaning |
+| --- | --- |
+| instant | A change that must not read as motion. |
+| short | A control changing state: a ground, a border, a mark. |
+| medium | A part appearing or leaving: a popover, a menu, a tooltip. |
+| long | A surface entering or leaving over a larger distance: a drawer, a dialog. |
+| loop-fast | One cycle of a fast repeating animation. |
+| loop | One cycle of a repeating animation. |
+| loop-slow | One cycle of a slow repeating animation. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-duration-loop-fast` | One cycle of a fast repeating animation. | 700ms |
+| `--slotted-duration-loop` | One cycle of a repeating animation. | 1.1s |
+| `--slotted-duration-loop-slow` | One cycle of a slow repeating animation. | 1.6s |
+| `--slotted-duration-instant` | A change that must not read as motion. | 1ms |
+| `--slotted-duration-short` | A control changing state: a ground, a border, a mark. | 120ms; 1ms under reduced motion |
+| `--slotted-duration-medium` | A part appearing or leaving: a popover, a menu, a tooltip. | 200ms; 1ms under reduced motion |
+| `--slotted-duration-long` | A surface entering or leaving over a larger distance: a drawer, a dialog. | 320ms; 1ms under reduced motion |
+
+## easing
+
+How the velocity of a transition changes.
+
+Names: --slotted-easing-{curve}
+
+| curve | Meaning |
+| --- | --- |
+| standard | A change within the screen. |
+| enter | A part arriving. |
+| exit | A part leaving. |
+| emphasized | A change meant to be noticed; it overshoots its end. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-easing-standard` | A change within the screen. | cubic-bezier(0.2, 0, 0, 1) |
+| `--slotted-easing-enter` | A part arriving. | cubic-bezier(0.05, 0.7, 0.1, 1) |
+| `--slotted-easing-exit` | A part leaving. | cubic-bezier(0.3, 0, 0.8, 0.15) |
+| `--slotted-easing-emphasized` | A change meant to be noticed; it overshoots its end. | cubic-bezier(0.3, 0, 0, 1.3) |
+
+## z-index
+
+Which layer an element occupies above the page.
+
+Names: --slotted-z-index-{layer}
+
+| layer | Meaning |
+| --- | --- |
+| sticky | A header or a column that stays in place while its region scrolls. |
+| overlay | A modal surface and the scrim under it. |
+| popover | A popover, a menu or a tooltip; above an overlay, so one opens from a dialog. |
+| toast | A toast; above every other layer. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-z-index-sticky` | A header or a column that stays in place while its region scrolls. | 100 |
+| `--slotted-z-index-overlay` | A modal surface and the scrim under it. | 1000 |
+| `--slotted-z-index-popover` | A popover, a menu or a tooltip; above an overlay, so one opens from a dialog. | 1100 |
+| `--slotted-z-index-toast` | A toast; above every other layer. | 1200 |
+
+## shadow
+
+What elevation a surface has above the one under it, smallest first; under forced colours every step is none.
+
+Names: --slotted-shadow-{step}
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-shadow-xs` | — | by scheme |
+| `--slotted-shadow-sm` | — | by scheme |
+| `--slotted-shadow-md` | — | by scheme |
+| `--slotted-shadow-lg` | — | by scheme |
+
+## surface
+
+The grounds content stands on.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-surface` | The ground of the page's content and of a card. | by scheme |
+| `--slotted-surface-raised` | The ground of a surface above another: a popover, a menu, a dialog; paired with a step of `shadow`. | by scheme |
+| `--slotted-surface-sunken` | The canvas under the content: the ground a card and a field stand out from. | by scheme |
+| `--slotted-surface-inverse` | A ground in the opposite lightness, with `--slotted-text-inverse` on it. | by scheme |
+| `--slotted-surface-inverse-hover` | The inverse ground under the pointer: `--slotted-surface-inverse` moved a share toward the opposite lightness. | by scheme |
+| `--slotted-surface-inverse-active` | The inverse ground while pressed, a step beyond the hover. | by scheme |
+| `--slotted-surface-material` | The ground of a bar that floats over scrolling content, drawn as a material: `--slotted-surface` at a partial share over transparency, behind `--slotted-material-backdrop`. Under `prefers-reduced-transparency: reduce` it is `--slotted-surface`, and under forced colours the Canvas system colour. | by scheme |
+| `--slotted-material-backdrop` | The backdrop filter a material is drawn with: the content scrolling under it, saturated and blurred. Each scheme states its own, because a light page holds less contrast for a blur to keep. Under `prefers-reduced-transparency: reduce` and forced colours it is `none`. | by scheme |
+
+## text
+
+The colours text is painted in.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-text` | Text on a surface. | by scheme |
+| `--slotted-text-muted` | Text that ranks below the text beside it: a caption, a hint, a secondary value. | by scheme |
+| `--slotted-text-inverse` | Text on `--slotted-surface-inverse`. | by scheme |
+
+## border
+
+The colours of lines between and inside surfaces.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-border-subtle` | A rule inside a surface: a divider, the edge of a region, the seam under a header. | by scheme |
+| `--slotted-border-strong` | The line between two surfaces; it holds 3:1 against every surface a control stands on. | by scheme |
+
+## disabled
+
+How an unavailable control is painted.
+
+Names: --slotted-disabled-{role}
+
+| role | Meaning |
+| --- | --- |
+| background | The ground of an unavailable control. |
+| foreground | The text and icons of an unavailable control. |
+| border | The edge of an unavailable control, a step lighter than the edge of an available one. |
+
+## focus-ring
+
+The outline every focused element draws.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-focus-ring-width` | The thickness of the focus outline. | 2px |
+| `--slotted-focus-ring-offset` | The distance between the element and its focus outline. | 2px |
+| `--slotted-focus-ring-color` | The colour of the focus outline. | by scheme |
+| `--slotted-focus-ring-color-invalid` | The colour of the focus outline of a control in error; an element in error points `--slotted-focus-ring-color` at it. | by scheme |
+
+## target
+
+How small an interactive target may be.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-target-min` | The smallest target in both axes: 24 by 24 CSS pixels. | 24px |
+| `--slotted-target-comfortable` | The size a target grows to under a coarse pointer. | 44px |
+
+## tone
+
+What an element carrying an intent is painted with: seven tones, each with the same nine roles.
+
+Names: --slotted-tone-{tone}-{role}
+
+| tone | Meaning |
+| --- | --- |
+| accent | The product's intent: the primary action, the chosen option, the current place. |
+| secondary | A second intent beside accent, for an action or a mark that must not compete with it. |
+| neutral | Ink: the inverse surface as a fill and the text colour as a label, for a primary action in a product that keeps the accent for data. |
+| info | A fact the reader is told with no judgement of it: a note, a transfer, a change of state that is neither good nor bad. Its own seed, so it stays apart from an accent that shares a hue with success. |
+| success | A result that completed or a state that is healthy. |
+| warning | A state that needs attention before it becomes a failure. |
+| danger | A failure, an error or an action that destroys data. |
+
+| role | Meaning |
+| --- | --- |
+| solid | A filled ground: the primary button of the tone. |
+| solid-hover | The filled ground under the pointer. |
+| solid-active | The filled ground while pressed. |
+| on-solid | Text and icons on the filled ground. |
+| surface | A tinted ground; a state that must be seen pairs it with the tone's border. |
+| subtle-hover | The tint under the pointer of an element with no filled ground. |
+| subtle-active | That tint while pressed. |
+| border | An edge in the tone, at the non-text contrast ratio against the page and against its own surface. |
+| text | Text in the tone on a surface. |
+
+## data
+
+What a series of data is painted with: a line, a bar, a slice. Slots are assigned in order and never skipped.
+
+Names: --slotted-data-{slot}
+
+| slot | Meaning |
+| --- | --- |
+| 1 | The first series. |
+| 2 | The second series. |
+| 3 | The third series. |
+| 4 | The fourth series. |
+| 5 | The fifth series. |
+| 6 | The sixth series. |
+| 7 | The seventh series. |
+| 8 | The eighth series. |
+
+## data-on
+
+The ink drawn on a data slot used as a ground — an icon on a category tile — at the non-text ratio (3:1, WCAG 1.4.11) against its slot in every scheme.
+
+Names: --slotted-data-{slot}-on
+
+| slot | Meaning |
+| --- | --- |
+| 1 | Ink on the first slot. |
+| 2 | Ink on the second slot. |
+| 3 | Ink on the third slot. |
+| 4 | Ink on the fourth slot. |
+| 5 | Ink on the fifth slot. |
+| 6 | Ink on the sixth slot. |
+| 7 | Ink on the seventh slot. |
+| 8 | Ink on the eighth slot. |
+
+## control
+
+What a control's text and frame look like at every size.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-control-font-family` | The typeface of a control's text. | 'Geist Variable', ui-sans-serif, system-ui, sans-serif |
+| `--slotted-control-font-weight` | The weight of a control's label. | 600 |
+| `--slotted-control-line-height` | The line height of a control's text. | 1 |
+| `--slotted-control-letter-spacing` | The letter spacing of a control's text. | 0 |
+| `--slotted-control-border-width` | The edge width of a control at rest. | 1px |
+| `--slotted-control-radius` | The corner of a control. | 4px |
+| `--slotted-control-shadow-focus-geometry` | Offset, blur and spread of the shadow a focused control draws, with no colour; drawn with `--slotted-focus-ring-color`. | 0 1px 4px -1px |
+| `--slotted-control-transition-duration` | How long a control takes to change state. | 120ms; 1ms under reduced motion |
+| `--slotted-control-transition-easing` | The curve of a control's change of state. | cubic-bezier(0.2, 0, 0, 1) |
+| `--slotted-control-invalid-edge-width` | The edge an invalid control adds inside its border, so the state reads where colour cannot. | 1px |
+| `--slotted-control-focus-ring-offset` | The distance between a field's frame and its focus outline; set to the negative of `--slotted-control-border-width`, a field's ring lies flush over its border while a button keeps `--slotted-focus-ring-offset`. | 2px |
+| `--slotted-control-border-color` | The edge colour of a control at rest. | by scheme |
+| `--slotted-control-surface` | The ground of a control at rest: a field, a select, a segmented control. | by scheme |
+| `--slotted-control-shadow` | The shadow of a control at rest. | by scheme |
+
+## control-size
+
+The size and inner spacing of a control at each size step; every value follows density.
+
+Names: --slotted-control-{part}-{size}
+
+| part | Meaning |
+| --- | --- |
+| height | The block size of the control. |
+| padding-inline | The inline space between the control's edge and its content. |
+| font-size | The size of the control's text. |
+| icon-size | The size of an icon inside the control. |
+| gap | The space between items inside the control, and between one choice and the next in a group. |
+| label-gap | The space between a binary control — a box, a circle, a switch — and its own label. |
+| inner-size | The block size of what stands inside the control: a key, a chip, a clear mark. |
+
+| size | Meaning |
+| --- | --- |
+| sm | The small step. |
+| md | The medium step. |
+| lg | The large step. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-control-height-sm` | The block size of the control. The small step. | comfortable 30px, compact 26px, dense 24px |
+| `--slotted-control-height-md` | The block size of the control. The medium step. | comfortable 34px, compact 28px, dense 26px |
+| `--slotted-control-height-lg` | The block size of the control. The large step. | comfortable 38px, compact 32px, dense 30px |
+| `--slotted-control-padding-inline-sm` | The inline space between the control's edge and its content. The small step. | comfortable 10px, compact 8px, dense 6px |
+| `--slotted-control-padding-inline-md` | The inline space between the control's edge and its content. The medium step. | comfortable 13px, compact 10px, dense 8px |
+| `--slotted-control-padding-inline-lg` | The inline space between the control's edge and its content. The large step. | comfortable 16px, compact 12px, dense 10px |
+| `--slotted-control-font-size-sm` | The size of the control's text. The small step. | comfortable 12px, compact 12px, dense 12px |
+| `--slotted-control-font-size-md` | The size of the control's text. The medium step. | comfortable 13px, compact 12px, dense 12px |
+| `--slotted-control-font-size-lg` | The size of the control's text. The large step. | comfortable 14px, compact 13px, dense 12px |
+| `--slotted-control-icon-size-sm` | The size of an icon inside the control. The small step. | comfortable 14px, compact 13px, dense 12px |
+| `--slotted-control-icon-size-md` | The size of an icon inside the control. The medium step. | comfortable 16px, compact 14px, dense 13px |
+| `--slotted-control-icon-size-lg` | The size of an icon inside the control. The large step. | comfortable 18px, compact 16px, dense 14px |
+| `--slotted-control-gap-sm` | The space between items inside the control, and between one choice and the next in a group. The small step. | comfortable 6px, compact 4px, dense 4px |
+| `--slotted-control-gap-md` | The space between items inside the control, and between one choice and the next in a group. The medium step. | comfortable 8px, compact 6px, dense 4px |
+| `--slotted-control-gap-lg` | The space between items inside the control, and between one choice and the next in a group. The large step. | comfortable 8px, compact 6px, dense 6px |
+| `--slotted-control-label-gap-sm` | The space between a binary control — a box, a circle, a switch — and its own label. The small step. | comfortable 8px, compact 6px, dense 6px |
+| `--slotted-control-label-gap-md` | The space between a binary control — a box, a circle, a switch — and its own label. The medium step. | comfortable 12px, compact 8px, dense 6px |
+| `--slotted-control-label-gap-lg` | The space between a binary control — a box, a circle, a switch — and its own label. The large step. | comfortable 12px, compact 8px, dense 8px |
+| `--slotted-control-inner-size-sm` | The block size of what stands inside the control: a key, a chip, a clear mark. The small step. | comfortable 22px, compact 18px, dense 16px |
+| `--slotted-control-inner-size-md` | The block size of what stands inside the control: a key, a chip, a clear mark. The medium step. | comfortable 24px, compact 20px, dense 18px |
+| `--slotted-control-inner-size-lg` | The block size of what stands inside the control: a key, a chip, a clear mark. The large step. | comfortable 28px, compact 24px, dense 22px |
+
+## selection
+
+The size of a selection control and of the halo behind it.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-selection-size-sm` | The box of a checkbox and the circle of a radio at the small step. | 14px |
+| `--slotted-selection-size-md` | The box and the circle at the medium step. | 16px |
+| `--slotted-selection-size-lg` | The box and the circle at the large step. | 18px |
+| `--slotted-selection-halo-opacity` | The share of `--slotted-tone-accent-text` in the halo behind a selection control under the pointer. | 0.12 |
+
+## highlight
+
+How strong the band behind a matched span is.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-highlight-tint-opacity` | The share of `--slotted-tone-accent-text` in the band behind a matched span. | 0.075 |
+
+## current
+
+How the place the reader is on is marked.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-current-edge` | The edge of the row the reader is on, drawn over its tone ground. | by scheme |
+
+## state
+
+Translucent layers laid over whatever surface an element stands on, so a hovered, pressed or selected row reads the same on the page and on a raised surface. Each is the scheme's text colour at a small share over transparency. Under forced colours every layer is the Canvas system colour: the state is carried by the system colours the family draws, Highlight for selection and an outline for focus.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-state-hover` | The layer under the pointer. | by scheme |
+| `--slotted-state-pressed` | The layer while the element is pressed; the strongest of the three. | by scheme |
+| `--slotted-state-selected` | The layer of a selected or open element, between hover and pressed. | by scheme |
+
+## scrim
+
+The veil under a modal surface.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-scrim` | The veil between the page and a modal surface above it. | by scheme |
+
+## Read by their family only
+
+A family adjusts these for itself. An element of the application's own does not read them.
+
+- icon: The geometry of an icon a family draws itself; an icon of the application's own is drawn with the icon family. Names: --slotted-icon-{glyph}
+- upload-kind: The tile colours of file kinds in upload and attachment. Names: --slotted-upload-kind-{kind}
+- code: The colours of syntax scopes in code-block. Names: --slotted-code-{scope}
+- rating: The edge of a star in rating. Names: --slotted-rating-edge
+- avatar-size: The sizes of avatar, smallest first. Names: --slotted-avatar-size-{size}

package/docs/toolbar.json

@@ -152,7 +152,7 @@
           "type": "string | ((hidden: number) => string)",
           "defaultValue": "counted",
           "appliesTo": "sl-toolbar-overflow",
-          "description": "The accessible name of the control that holds what did not fit. The default counts — \"3 more actions\" — because three dots say nothing about how much is behind them; a bar in another language replaces the sentence rather than translating the mark, and an aria-label written on the host wins over both"
+          "description": "The accessible name of the control that holds what did not fit. The default counts — \"3 more actions\" — because three dots say nothing about how much is behind them. It is a sentence of the language in force, with its plural (\"Mais 3 ações\" in pt-BR), and label replaces it, and an aria-label written on the host wins over both"
         },
         {
           "name": "align, side, size",

package/docs/toolbar.md

@@ -45,7 +45,7 @@ Excerpt — not a complete module
 | `overflow` | `'wrap' \| 'scroll' \| 'menu'` | wrap | slToolbar, provideToolbarDefaults | What a bar does with more controls than it has room for. wrap keeps every control on a second row, scroll is one line the arrows reveal, and menu is one line whose units give way from the end into a surface. A menu bar with no sl-toolbar-overflow in it has nothing to give way to, so it scrolls |
 | `overflowChange` | `output<number>` | — | slToolbar | How many units gave way, once per change. There is no two-way binding over the collapsed set: it is a measurement, and a consumer who owned it could assert that a bar fits when the layout says it does not |
 | `slToolbarItemCounterpart, slToolbarGroupCounterpart` | `TemplateRef` | — | slToolbarItem, slToolbarGroup | What the unit becomes in the surface when the bar has no room for it, rendered through NgTemplateOutlet only while it is collapsed. A unit that declares none is pinned — pinning is the absence of a counterpart rather than a second input, so the two can never disagree. It is not called overflow, because that word is the bar’s own axis |
-| `label` | `string \| ((hidden: number) => string)` | counted | sl-toolbar-overflow | The accessible name of the control that holds what did not fit. The default counts — "3 more actions" — because three dots say nothing about how much is behind them; a bar in another language replaces the sentence rather than translating the mark, and an aria-label written on the host wins over both |
+| `label` | `string \| ((hidden: number) => string)` | counted | sl-toolbar-overflow | The accessible name of the control that holds what did not fit. The default counts — "3 more actions" — because three dots say nothing about how much is behind them. It is a sentence of the language in force, with its plural ("Mais 3 ações" in pt-BR), and label replaces it, and an aria-label written on the host wins over both |
 | `align, side, size` | `MenuAlign \| MenuSide \| MenuSize` | from provideMenuDefaults | sl-toolbar-overflow | Where the surface sits against the trigger, and its own measure. Everything else about the layer an application sets once with provideMenuDefaults(): a second configuration surface over the same layer would be two answers to one question |
 | `loop` | `boolean` | true | slToolbar, provideToolbarDefaults | Whether the arrows wrap past the ends of the bar |
 | `aria-label` | `string` | — | slToolbar, slToolbarGroup | The name of the bar, and of each group. The family writes neither: only the page knows what the set of controls is for. aria-labelledby works the same way |

package/docs/tour.json

@@ -176,7 +176,7 @@
           "part": "content",
           "element": "[slTourContent]",
           "required": true,
-          "purpose": "The card: role=\"dialog\" unless you wrote a role, named by the title unless you wrote aria-label, aria-modal on a modal step. Reads the arrow keys."
+          "purpose": "The card: role=\"dialog\" unless you wrote a role, named by the title unless you wrote aria-label, aria-modal on a modal step. Reads the arrow keys. It draws no padding: slTourHeader, slTourBody and slTourFooter carry the card inset, set by --slotted-tour-padding-inline and --slotted-tour-padding-block."
         },
         {
           "part": "media",

package/docs/typography.json

@@ -26,6 +26,7 @@
       "default",
       "muted",
       "accent",
+      "info",
       "success",
       "warning",
       "danger",
@@ -118,7 +119,7 @@
         },
         {
           "name": "tone",
-          "type": "'inherit' | 'default' | 'muted' | 'accent' | 'success' | 'warning' | 'danger' | 'inverse'",
+          "type": "'inherit' | 'default' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'inverse'",
           "defaultValue": "inherit",
           "appliesTo": "slText",
           "description": "Colour; inherit takes the colour of the surface"
@@ -189,7 +190,7 @@
         },
         {
           "name": "tone",
-          "type": "'inherit' | 'default' | 'muted' | 'accent' | 'success' | 'warning' | 'danger' | 'inverse'",
+          "type": "'inherit' | 'default' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'inverse'",
           "defaultValue": "inherit",
           "appliesTo": "slHeading",
           "description": "Colour; inherit takes the colour of the surface"
@@ -266,6 +267,7 @@
     "--slotted-text-muted",
     "--slotted-tone-accent-text",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-text",
     "--slotted-tone-success-text",
     "--slotted-tone-warning-text",
     "--slotted-typography-font-family",

package/docs/typography.md

@@ -19,7 +19,7 @@ Excerpt — not a complete module
 | --- | --- | --- | --- | --- |
 | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'` | md | slText | Step on the type scale, with the line height paired to it |
 | `weight` | `'regular' \| 'medium' \| 'semibold'` | regular | slText | Typographic emphasis |
-| `tone` | `'inherit' \| 'default' \| 'muted' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'inverse'` | inherit | slText | Colour; inherit takes the colour of the surface |
+| `tone` | `'inherit' \| 'default' \| 'muted' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'inverse'` | inherit | slText | Colour; inherit takes the colour of the surface |
 | `align` | `'start' \| 'center' \| 'end'` | — | slText | Alignment, which turns an inline element into a block |
 | `wrap` | `'normal' \| 'nowrap' \| 'balance' \| 'pretty'` | — | slText | How lines break |
 | `transform` | `'none' \| 'uppercase' \| 'capitalize'` | — | slText | Letter case, with the tracking capitals need |
@@ -32,7 +32,7 @@ Excerpt — not a complete module
 | --- | --- | --- | --- | --- |
 | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'` | level | slHeading | Step on the type scale; follows the rank until it is set |
 | `weight` | `'regular' \| 'medium' \| 'semibold'` | semibold | slHeading | Typographic emphasis |
-| `tone` | `'inherit' \| 'default' \| 'muted' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'inverse'` | inherit | slHeading | Colour; inherit takes the colour of the surface |
+| `tone` | `'inherit' \| 'default' \| 'muted' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'inverse'` | inherit | slHeading | Colour; inherit takes the colour of the surface |
 | `wrap` | `'normal' \| 'nowrap' \| 'balance' \| 'pretty'` | balance | slHeading | How lines break; a heading is balanced by default |
 | `align` | `'start' \| 'center' \| 'end'` | — | slHeading | Alignment |
 | `transform` | `'none' \| 'uppercase' \| 'capitalize'` | — | slHeading | Letter case |
@@ -43,9 +43,9 @@ Excerpt — not a complete module
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `size` | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | `md`, `level` |
+| `size` | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | `md`, level |
 | `weight` | `regular`, `medium`, `semibold` | `regular`, `semibold` |
-| `tone` | `inherit`, `default`, `muted`, `accent`, `success`, `warning`, `danger`, `inverse` | `inherit` |
+| `tone` | `inherit`, `default`, `muted`, `accent`, `info`, `success`, `warning`, `danger`, `inverse` | `inherit` |
 | `align` | `start`, `center`, `end` | — |
 | `wrap` | `normal`, `nowrap`, `balance`, `pretty` | `balance` |
 | `transform` | `none`, `uppercase`, `capitalize` | — |
@@ -67,7 +67,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-line-height-xs`, `--slotted-text`, `--slotted-text-inverse`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-typography-font-family`, `--slotted-typography-lines`, `--slotted-typography-uppercase-tracking`
+`--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-line-height-xs`, `--slotted-text`, `--slotted-text-inverse`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-info-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-typography-font-family`, `--slotted-typography-lines`, `--slotted-typography-uppercase-tracking`
 
 ## Examples
 

package/fesm2022/slotted-angular-accordion.mjs

@@ -226,17 +226,19 @@ class SlAccordion {
         this.value.set(next);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlAccordion, isStandalone: true, selector: "[slAccordion]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, requireOpen: { classPropertyName: "requireOpen", publicName: "requireOpen", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, togglePlacement: { classPropertyName: "togglePlacement", publicName: "togglePlacement", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChangeRequest: "valueChangeRequest" }, host: { attributes: { "data-ui": "accordion", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-disabled": "disabled() ? '' : null" } }, exportAs: ["slAccordion"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=accordion]{--_rule-size: var(--slotted-border-width-thin, 1px);--_gap: var(--slotted-space-4, .5rem);display:grid;grid-auto-flow:row;grid-auto-rows:min-content;min-inline-size:0}[data-ui=accordion][data-size=sm]{--_gap: var(--slotted-space-3, .375rem)}[data-ui=accordion][data-size=lg]{--_gap: var(--slotted-space-5, .75rem)}[data-ui=accordion][data-variant=ruled]{border-block-end:var(--_rule-size) solid var(--slotted-accordion-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=accordion][data-variant=framed]{background-color:var(--slotted-accordion-surface, var(--slotted-surface-raised, Canvas));border:var(--_rule-size) solid var(--slotted-accordion-rule-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-accordion-radius, var(--slotted-radius-md, 6px));overflow:clip}[data-ui=accordion][data-variant=framed]>:first-child{border-block-start-color:transparent}[data-ui=accordion][data-variant=separated]{row-gap:var(--slotted-accordion-gap, var(--_gap))}[data-ui=accordion][data-disabled]{color:var(--slotted-disabled-foreground, GrayText)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlAccordion, isStandalone: true, selector: "[slAccordion]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, requireOpen: { classPropertyName: "requireOpen", publicName: "requireOpen", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, togglePlacement: { classPropertyName: "togglePlacement", publicName: "togglePlacement", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChangeRequest: "valueChangeRequest" }, host: { attributes: { "data-ui": "accordion", "data-ui-accordion": "", "data-part": "root", "data-part-root": "" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-disabled": "disabled() ? '' : null" } }, exportAs: ["slAccordion"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui-accordion]{--_rule-size: var(--slotted-border-width-thin, 1px);--_gap: var(--slotted-space-4, .5rem);display:grid;grid-auto-flow:row;grid-auto-rows:min-content;min-inline-size:0}[data-ui-accordion][data-size=sm]{--_gap: var(--slotted-space-3, .375rem)}[data-ui-accordion][data-size=lg]{--_gap: var(--slotted-space-5, .75rem)}[data-ui-accordion][data-variant=ruled]{border-block-end:var(--_rule-size) solid var(--slotted-accordion-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui-accordion][data-variant=framed]{background-color:var(--slotted-accordion-surface, var(--slotted-surface-raised, Canvas));border:var(--_rule-size) solid var(--slotted-accordion-rule-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-accordion-radius, var(--slotted-radius-md, 6px));overflow:clip}[data-ui-accordion][data-variant=framed]>:first-child{border-block-start-color:transparent}[data-ui-accordion][data-variant=separated]{row-gap:var(--slotted-accordion-gap, var(--_gap))}[data-ui-accordion][data-disabled]{color:var(--slotted-disabled-foreground, GrayText)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAccordion, decorators: [{
             type: Component,
             args: [{ selector: '[slAccordion]', standalone: true, exportAs: 'slAccordion', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-ui': 'accordion',
+                        'data-ui-accordion': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-size]': 'resolvedSize()',
                         '[attr.data-variant]': 'resolvedVariant()',
                         '[attr.data-disabled]': "disabled() ? '' : null",
-                    }, styles: ["@layer slotted.components{[data-ui=accordion]{--_rule-size: var(--slotted-border-width-thin, 1px);--_gap: var(--slotted-space-4, .5rem);display:grid;grid-auto-flow:row;grid-auto-rows:min-content;min-inline-size:0}[data-ui=accordion][data-size=sm]{--_gap: var(--slotted-space-3, .375rem)}[data-ui=accordion][data-size=lg]{--_gap: var(--slotted-space-5, .75rem)}[data-ui=accordion][data-variant=ruled]{border-block-end:var(--_rule-size) solid var(--slotted-accordion-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=accordion][data-variant=framed]{background-color:var(--slotted-accordion-surface, var(--slotted-surface-raised, Canvas));border:var(--_rule-size) solid var(--slotted-accordion-rule-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-accordion-radius, var(--slotted-radius-md, 6px));overflow:clip}[data-ui=accordion][data-variant=framed]>:first-child{border-block-start-color:transparent}[data-ui=accordion][data-variant=separated]{row-gap:var(--slotted-accordion-gap, var(--_gap))}[data-ui=accordion][data-disabled]{color:var(--slotted-disabled-foreground, GrayText)}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-accordion]{--_rule-size: var(--slotted-border-width-thin, 1px);--_gap: var(--slotted-space-4, .5rem);display:grid;grid-auto-flow:row;grid-auto-rows:min-content;min-inline-size:0}[data-ui-accordion][data-size=sm]{--_gap: var(--slotted-space-3, .375rem)}[data-ui-accordion][data-size=lg]{--_gap: var(--slotted-space-5, .75rem)}[data-ui-accordion][data-variant=ruled]{border-block-end:var(--_rule-size) solid var(--slotted-accordion-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui-accordion][data-variant=framed]{background-color:var(--slotted-accordion-surface, var(--slotted-surface-raised, Canvas));border:var(--_rule-size) solid var(--slotted-accordion-rule-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-accordion-radius, var(--slotted-radius-md, 6px));overflow:clip}[data-ui-accordion][data-variant=framed]>:first-child{border-block-start-color:transparent}[data-ui-accordion][data-variant=separated]{row-gap:var(--slotted-accordion-gap, var(--_gap))}[data-ui-accordion][data-disabled]{color:var(--slotted-disabled-foreground, GrayText)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], requireOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireOpen", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], togglePlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePlacement", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], mount: [{ type: i0.Input, args: [{ isSignal: true, alias: "mount", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }] } });
 
 /**