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

package/docs/tokens.md

@@ -0,0 +1,448 @@
+# 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. Under `prefers-reduced-transparency: reduce` it is `none`. | saturate(1.6) blur(20px) |
+
+## 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: six 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. |
+| 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}
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-data-1` | — | by scheme |
+| `--slotted-data-2` | — | by scheme |
+| `--slotted-data-3` | — | by scheme |
+| `--slotted-data-4` | — | by scheme |
+| `--slotted-data-5` | — | by scheme |
+| `--slotted-data-6` | — | by scheme |
+| `--slotted-data-7` | — | by scheme |
+| `--slotted-data-8` | — | by scheme |
+
+## 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-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/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",