@slotted/angular 0.1.0-beta.4 → 0.1.0-beta.5

package/docs/AGENTS.snippet.md

@@ -1,5 +1,7 @@
 ## Slotted UI (@slotted/angular)
 
+Paths below are relative to the directory that holds node_modules.
+
 Before writing or changing UI, read `node_modules/@slotted/angular/docs/index.md`, then the file of each family you use. These files match the installed version: prefer them over prior knowledge of the library.
 
 - Import the standalone directives from the family entry point that each file's Import section shows (`@slotted/angular/<family>`), and place each on the native element its selector names: `<button slButton>`.

package/docs/app-shell.examples.md

@@ -281,7 +281,7 @@ Excerpt — not a complete module
 
 ### The first thing a keyboard meets
 
-Press Tab from the top of the frame: a link to the content appears, then one to the navigation, then one to the pane — one per region that rendered and is open, out of the flow until focused. The content region carries tabindex="-1", so the link moves the focus as well as the scroll.
+Press Tab from the top of the frame: a link to the content appears, then one to the navigation, then one to the pane — one per region that rendered and is open, out of the flow until focused. The link makes the content region focusable for that one focus, so it moves the focus as well as the scroll.
 
 Excerpt — not a complete module
 

package/docs/app-shell.json

@@ -230,9 +230,9 @@
         },
         {
           "part": "main",
-          "element": "main with tabindex=\"-1\"",
+          "element": "main",
           "required": true,
-          "purpose": "The main landmark and the skip link’s destination. Without the tabindex the link moves the scroll and leaves the focus behind, in Safari and in Firefox."
+          "purpose": "The main landmark and the skip link’s destination. The skip link and focusMain() write tabindex=\"-1\" for the focus they move, and blur or the next pointer press inside removes it: a main focusable all the time takes the focus of every click on its text, and the next key draws the ring around the page."
         },
         {
           "part": "progress",
@@ -559,7 +559,7 @@
         "The structure is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/), and every one of the five is earned from the element rather than written as a role: header in the context of the body is banner, nav is navigation, main is main, aside is complementary, footer is contentinfo. The root is a div for exactly that reason — a main inside a sectioning element stops being a landmark, and the shell has to be placeable anywhere.",
         "Both controls are the APG’s Disclosure pattern (w3.org/WAI/ARIA/apg/patterns/disclosure/): real buttons, so Enter and Space activate them natively, carrying aria-expanded and aria-controls pointing at their region. One departure is written and costed: under collapsedTo=\"rail\" the navigation does not disappear, it narrows — aria-expanded is still true or false about the region’s full form, and the region stays in the tab order because a rail whose destinations cannot be reached is not a rail. The pane has no such departure: closed, it leaves the layout and the tab order.",
         "A document with more than one navigation or complementary landmark needs a unique label on each, so both regions carry the family’s strings and a consumer may replace either per instance. Each control’s own name changes with the state — “Open navigation” and “Close navigation”, “Open side panel” and “Close side panel” — because a control whose name never changes leaves the reader to infer the state from aria-expanded alone.",
-        "The skip links are written from the regions that rendered and are open, so no link ever points at a target nobody built or the reader closed, and main carries tabindex=\"-1\": without it the browser moves the scroll and leaves the focus behind in Safari and Firefox, which is a link that appears to work and moves nothing a screen reader follows.",
+        "The skip links are written from the regions that rendered and are open, so no link ever points at a target nobody built or the reader closed, and the main link writes tabindex=\"-1\" on main before it moves the focus: without it the browser moves the scroll and leaves the focus behind in Safari and Firefox. Blur or the next pointer press inside removes the attribute, so a click on the content never focuses main.",
         "While an overlaid region is modal, @slotted/core/focus contains the keyboard inside it and returns it to the control that opened it on close, and every region beside it — the banner included — takes inert, so Tab cannot reach them and a screen reader does not read them. The ways out are Escape, the veil, a destination, and whatever control the product put in the panel. Two layers can be open together only with both modes forced, and @slotted/core/dismissable-layer keeps one stack, so Escape reaches the topmost.",
         "The pane’s edge is the APG’s Window Splitter (w3.org/WAI/ARIA/apg/patterns/windowsplitter/): a focusable separator with aria-orientation=\"vertical\", aria-controls pointing at the pane and aria-valuemin, aria-valuemax and aria-valuenow as whole percentages of the shell, named “Resize panel”. ArrowLeft and ArrowRight move it sixteen pixels, sixty-four with Shift, by the direction on the screen — so ArrowLeft grows an end pane and shrinks a start one, mirrored in right-to-left — and Home and End go to the limits.",
         "Nothing important depends on hover, the frame answers its own inline size rather than the window’s — which is what makes a 400% zoom behave like a narrow window — and every transition comes from the motion scale, so prefers-reduced-motion collapses all of them at once."
@@ -786,7 +786,7 @@
     {
       "id": "skipLinks",
       "title": "The first thing a keyboard meets",
-      "note": "Press Tab from the top of the frame: a link to the content appears, then one to the navigation, then one to the pane — one per region that rendered and is open, out of the flow until focused. The content region carries tabindex=\"-1\", so the link moves the focus as well as the scroll.",
+      "note": "Press Tab from the top of the frame: a link to the content appears, then one to the navigation, then one to the pane — one per region that rendered and is open, out of the flow until focused. The link makes the content region focusable for that one focus, so it moves the focus as well as the scroll.",
       "language": "html",
       "source": "<div slAppShell [messages]=\"{ skipToMain: 'Skip to the order' }\">\n  <main slAppShellMain>…</main>\n</div>\n",
       "verdict": "excerpt"

package/docs/app-shell.md

@@ -116,7 +116,7 @@ export class AppShellBasic {}
 | `nav-body` | div | no |
 | `nav-footer` | div | no |
 | `scrim` | div | no |
-| `main` | main with tabindex="-1" | yes |
+| `main` | main | yes |
 | `progress` | the consumer’s element, holding one [slProgressBar] at placement="edge-start" | no |
 | `aside` | aside | no |
 | `aside-resizer` | any element carrying slAppShellAsideResizer | no |
@@ -200,7 +200,7 @@ export class AppShellBasic {}
 - The structure is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/), and every one of the five is earned from the element rather than written as a role: header in the context of the body is banner, nav is navigation, main is main, aside is complementary, footer is contentinfo. The root is a div for exactly that reason — a main inside a sectioning element stops being a landmark, and the shell has to be placeable anywhere.
 - Both controls are the APG’s Disclosure pattern (w3.org/WAI/ARIA/apg/patterns/disclosure/): real buttons, so Enter and Space activate them natively, carrying aria-expanded and aria-controls pointing at their region. One departure is written and costed: under collapsedTo="rail" the navigation does not disappear, it narrows — aria-expanded is still true or false about the region’s full form, and the region stays in the tab order because a rail whose destinations cannot be reached is not a rail. The pane has no such departure: closed, it leaves the layout and the tab order.
 - A document with more than one navigation or complementary landmark needs a unique label on each, so both regions carry the family’s strings and a consumer may replace either per instance. Each control’s own name changes with the state — “Open navigation” and “Close navigation”, “Open side panel” and “Close side panel” — because a control whose name never changes leaves the reader to infer the state from aria-expanded alone.
-- The skip links are written from the regions that rendered and are open, so no link ever points at a target nobody built or the reader closed, and main carries tabindex="-1": without it the browser moves the scroll and leaves the focus behind in Safari and Firefox, which is a link that appears to work and moves nothing a screen reader follows.
+- The skip links are written from the regions that rendered and are open, so no link ever points at a target nobody built or the reader closed, and the main link writes tabindex="-1" on main before it moves the focus: without it the browser moves the scroll and leaves the focus behind in Safari and Firefox. Blur or the next pointer press inside removes the attribute, so a click on the content never focuses main.
 - While an overlaid region is modal, @slotted/core/focus contains the keyboard inside it and returns it to the control that opened it on close, and every region beside it — the banner included — takes inert, so Tab cannot reach them and a screen reader does not read them. The ways out are Escape, the veil, a destination, and whatever control the product put in the panel. Two layers can be open together only with both modes forced, and @slotted/core/dismissable-layer keeps one stack, so Escape reaches the topmost.
 - The pane’s edge is the APG’s Window Splitter (w3.org/WAI/ARIA/apg/patterns/windowsplitter/): a focusable separator with aria-orientation="vertical", aria-controls pointing at the pane and aria-valuemin, aria-valuemax and aria-valuenow as whole percentages of the shell, named “Resize panel”. ArrowLeft and ArrowRight move it sixteen pixels, sixty-four with Shift, by the direction on the screen — so ArrowLeft grows an end pane and shrinks a start one, mirrored in right-to-left — and Home and End go to the limits.
 - Nothing important depends on hover, the frame answers its own inline size rather than the window’s — which is what makes a 400% zoom behave like a narrow window — and every transition comes from the motion scale, so prefers-reduced-motion collapses all of them at once.

package/docs/guidelines/README.md

@@ -14,8 +14,8 @@ screen:
 2. Match the task against the `triggers` in each topic file's front matter.
    Read the topic files that match, and `composition.md` always.
 3. Before writing an element beside a family, read that family's page in
-   `node_modules/@slotted/angular/docs`. Before writing an element no family draws, read
-   `own-elements.md` and `node_modules/@slotted/angular/docs/tokens.md`.
+   `..`. Before writing an element no family draws, read
+   `own-elements.md` and `../tokens.md`.
 4. Apply the rules by level: a `MUST` broken is a defect, a `SHOULD` broken is
    stated with its reason, a `MAY` is a permission.
 5. A screen is done when each `Check` of the rules read passes.

package/docs/guidelines/index.md

@@ -79,7 +79,7 @@ Every active rule, one line each. Load this first; load a topic file when the ta
 | OV-03 | SHOULD | Where the reader's scope holds one category, the chart is not drawn and one sentence states the numbers it would have compared. | `overviews.md` |
 | OV-04 | SHOULD | The thresholds are stated once in words beside the figures, and a figure past one says so in its own comparison line, on the line the placeholder reserves. | `overviews.md` |
 | OV-05 | SHOULD | A chart takes the `card` `variant` when it is one of two or more peer tiles in one grid with no section heading of its own, and stays `plain` when it is the body of a titled section or the only content of a tab. | `overviews.md` |
-| OE-01 | MUST | An element of the application's own reads only tokens of the groups `node_modules/@slotted/angular/docs/tokens.md` lists for the application. | `own-elements.md` |
+| OE-01 | MUST | An element of the application's own reads only tokens of the groups `../tokens.md` lists for the application. | `own-elements.md` |
 | OE-02 | MUST | Where two states hold at once, the element paints the ground, the edge and the text colour of the stronger, in the order `disabled`, `loading`, `readonly`, `invalid`, `checked`, `selected`, `pressed`, `current`, `complete`, `active`, `hover`; the focus ring of OE-03 is drawn over every state. | `own-elements.md` |
 | OE-03 | MUST | In its `focus-visible` state the element draws an outline of `--slotted-focus-ring-width` in `--slotted-focus-ring-color`, offset by `--slotted-focus-ring-offset`. | `own-elements.md` |
 | OE-04 | MUST | The element's hit area measures at least `--slotted-target-min` in both axes, and at least `--slotted-target-comfortable` under `pointer: coarse`. | `own-elements.md` |

package/docs/guidelines/own-elements.md

@@ -18,7 +18,7 @@ the problem, the family is used instead (CP-04).
 
 Level: MUST
 Applies to: every element of the application's own that paints, spaces or moves
-Rule: An element of the application's own reads only tokens of the groups `node_modules/@slotted/angular/docs/tokens.md` lists for the application.
+Rule: An element of the application's own reads only tokens of the groups `../tokens.md` lists for the application.
 Why: A token of a family-only group is that family's adjustment and changes with it; an application group is the theme's promise.
 Do: A strip of day cells spaces with `--slotted-space-2`, paints a busy day with `--slotted-tone-warning-surface` and rounds with `--slotted-radius-sm`.
 Don't: A cell takes its height from `--slotted-avatar-size-sm` because the number fit.

package/docs/page-header.json

@@ -403,6 +403,7 @@
     "--slotted-line-height-md",
     "--slotted-line-height-sm",
     "--slotted-line-height-xl",
+    "--slotted-page-header-backdrop-filter",
     "--slotted-page-header-background",
     "--slotted-page-header-border",
     "--slotted-page-header-control-size",

package/docs/page-header.md

@@ -107,7 +107,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-radius`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--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-weight-medium`, `--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-page-header-background`, `--slotted-page-header-border`, `--slotted-page-header-control-size`, `--slotted-page-header-description-measure`, `--slotted-page-header-gap`, `--slotted-page-header-heading-size-lg`, `--slotted-page-header-heading-size-md`, `--slotted-page-header-heading-size-sm`, `--slotted-page-header-inset`, `--slotted-page-header-padding-block`, `--slotted-page-header-radius`, `--slotted-page-header-shadow`, `--slotted-page-header-snapped-heading-size-lg`, `--slotted-page-header-snapped-heading-size-md`, `--slotted-page-header-snapped-heading-size-sm`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-shadow-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-toolbar-inset`, `--slotted-z-index-sticky`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-radius`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--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-weight-medium`, `--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-page-header-backdrop-filter`, `--slotted-page-header-background`, `--slotted-page-header-border`, `--slotted-page-header-control-size`, `--slotted-page-header-description-measure`, `--slotted-page-header-gap`, `--slotted-page-header-heading-size-lg`, `--slotted-page-header-heading-size-md`, `--slotted-page-header-heading-size-sm`, `--slotted-page-header-inset`, `--slotted-page-header-padding-block`, `--slotted-page-header-radius`, `--slotted-page-header-shadow`, `--slotted-page-header-snapped-heading-size-lg`, `--slotted-page-header-snapped-heading-size-md`, `--slotted-page-header-snapped-heading-size-sm`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-shadow-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-toolbar-inset`, `--slotted-z-index-sticky`
 
 ## Examples
 

package/docs/skills/build-own-element/SKILL.md

@@ -11,9 +11,9 @@ built from the same theme as the families beside it.
 
 ## 1. Prove that no family answers
 
-1. Read `node_modules/@slotted/angular/docs/index.md` and list the families whose line is near the
+1. Read `../../index.md` and list the families whose line is near the
    element.
-2. Read `node_modules/@slotted/angular/docs/<family>.md` for each: its anatomy, its slots, its axes.
+2. Read `../../<family>.md` for each: its anatomy, its slots, its axes.
    When a family draws the element, or names a slot that holds it, the family
    is used (CP-01).
 3. When a family draws a part of the element — a toggle, a popup, a list, a
@@ -33,7 +33,7 @@ Free, decided by the problem:
 Fixed, read from the theme:
 
 - every value it paints comes from a token of the group
-  `node_modules/@slotted/angular/docs/tokens.md` lists for that decision (OE-01, CP-05);
+  `../../tokens.md` lists for that decision (OE-01, CP-05);
 - a tone carries the meaning the `tone` group gives it, and a data series takes
   the `data` slots in order;
 - how its states yield, how focus is drawn, how large a target is, what forced
@@ -43,7 +43,7 @@ A new appearance is a new combination of tokens, never a new value.
 
 ## 3. Map each decision to a group
 
-| Decision                                       | Group in `node_modules/@slotted/angular/docs/tokens.md`                    |
+| Decision                                       | Group in `../../tokens.md`                    |
 | ---------------------------------------------- | --------------------------------------------------- |
 | Distance between parts, inner padding          | `space`                                             |
 | Corners                                        | `radius`                                            |
@@ -84,7 +84,7 @@ why no token covers it (CP-05).
 
 ## 5. Done
 
-1. Each `Check` of `node_modules/@slotted/angular/docs/guidelines/own-elements.md` passes.
+1. Each `Check` of `../../guidelines/own-elements.md` passes.
 2. The element's CSS holds no colour or length literal without its comment.
 3. Every custom property the element reads is listed in
-   `node_modules/@slotted/angular/docs/tokens.md` above "Read by their family only".
+   `../../tokens.md` above "Read by their family only".

package/docs/skills/compose-screen/SKILL.md

@@ -28,18 +28,18 @@ topics.
 
 ## 2. Read
 
-1. `node_modules/@slotted/angular/docs/guidelines/index.md`.
-2. `node_modules/@slotted/angular/docs/guidelines/composition.md`, always.
+1. `../../guidelines/index.md`.
+2. `../../guidelines/composition.md`, always.
 3. The topic of step 1. Add `layout-alignment.md` and `shell-composition.md`
    when the screen places controls in a row or in the application frame.
 4. Add `errors-and-conflicts.md` and `reading-permissions.md` when the screen
    writes data or reads under a role.
 5. When the screen writes an element of its own, follow
-   `node_modules/@slotted/angular/docs/skills/build-own-element/SKILL.md`.
+   `../../skills/build-own-element/SKILL.md`.
 
 ## 3. Read each family before writing beside it
 
-For each family the screen uses, read `node_modules/@slotted/angular/docs/<family>.md` — its anatomy,
+For each family the screen uses, read `../../<family>.md` — its anatomy,
 its slots, its axes (CP-01). When the family names a slot for an element, the
 element stands in that slot.
 
@@ -65,12 +65,12 @@ element stands in that slot.
   rows is a `data-grid`, which windows its rows (LP-14).
 - Where no anatomy answers the problem, the screen writes an element of its
   own instead of bending a family into a shape it does not have (CP-04). That
-  element is built with `node_modules/@slotted/angular/docs/skills/build-own-element/SKILL.md`.
+  element is built with `../../skills/build-own-element/SKILL.md`.
 
 ## 5. Waits
 
 Every region filled by a request and every control that starts one follow
-`node_modules/@slotted/angular/docs/skills/waiting-states/SKILL.md`.
+`../../skills/waiting-states/SKILL.md`.
 
 ## 6. Done
 

package/docs/skills/review-screen/SKILL.md

@@ -12,20 +12,20 @@ A review answers one question per rule read: does the screen pass the rule's
 
 1. List the screen's files: its component, its template, its stylesheet and
    the requests it starts.
-2. List the families it imports, and read `node_modules/@slotted/angular/docs/<family>.md` for each.
+2. List the families it imports, and read `../../<family>.md` for each.
 3. List the elements of the screen's own: every element that is not a family,
    with the CSS that paints it.
 4. Classify the screen with the table in step 1 of
-   `node_modules/@slotted/angular/docs/skills/compose-screen/SKILL.md`.
+   `../../skills/compose-screen/SKILL.md`.
 
 ## 2. Read
 
-1. `node_modules/@slotted/angular/docs/guidelines/index.md` and
-   `node_modules/@slotted/angular/docs/guidelines/composition.md`.
+1. `../../guidelines/index.md` and
+   `../../guidelines/composition.md`.
 2. The topics of the classification, and each topic whose `triggers` the
    screen matches.
 3. `own-elements.md` when step 1 listed an element of the screen's own.
-4. `node_modules/@slotted/angular/docs/skills/waiting-states/SKILL.md` when the screen starts a
+4. `../../skills/waiting-states/SKILL.md` when the screen starts a
    request.
 
 ## 3. Sweep the code
@@ -65,6 +65,6 @@ deviation. The screen passes when no `MUST` finding remains.
 1. Fix every `MUST` finding, then each `SHOULD` finding the request covers.
 2. A fix uses what the family offers — its state, its slot, its axis — and
    never CSS on its parts.
-3. A literal becomes a token of the group `node_modules/@slotted/angular/docs/tokens.md` lists for
+3. A literal becomes a token of the group `../../tokens.md` lists for
    that decision.
 4. Run the searches of step 3 again on the changed files: none finds anything.

package/docs/skills/theme-app/SKILL.md

@@ -17,7 +17,7 @@ Take the first row that reaches the change.
 | The brand colour, or the colour of one intent          | a seed: `--slotted-seed-accent` or another name of `SEED_NAMES` | the theme's `seeds`, or a scope                                               |
 | Light, dark, high contrast, or the system's preference | the scheme: `light`, `dark`, `high-contrast`, `system`          | `data-slotted-scheme`, or the scheme of the `slThemeScope` directive from `@slotted/angular/theme`                        |
 | How tight controls and rows are                        | the density: `comfortable`, `compact`, `dense`                  | `data-slotted-density`, or the density of the `slThemeScope` directive from `@slotted/angular/theme`                      |
-| Spacing, corners, type, lines, shadows or motion       | a token of a group in `node_modules/@slotted/angular/docs/tokens.md`                   | the theme's `base`; `schemes` for a value per scheme; `densities` per density |
+| Spacing, corners, type, lines, shadows or motion       | a token of a group in `../../tokens.md`                   | the theme's `base`; `schemes` for a value per scheme; `densities` per density |
 | One family's look                                      | a token the family's page lists under Tokens                    | the theme's `components`                                                      |
 | What no token reaches                                  | a theme rule                                                    | the theme's `rules`                                                           |
 

package/docs/skills/waiting-states/SKILL.md

@@ -12,8 +12,8 @@ pending screen occupy the same boxes.
 The failure this skill prevents: three grey bars of equal length where a table,
 a card and a list should have been.
 
-Rules cited here are in `node_modules/@slotted/angular/docs/guidelines/async-feedback.md`. Each family
-named here has its page: `node_modules/@slotted/angular/docs/<family>.md`.
+Rules cited here are in `../../guidelines/async-feedback.md`. Each family
+named here has its page: `../../<family>.md`.
 
 ## 1. Which indicator answers which wait
 

package/docs/tabs.json

@@ -78,6 +78,7 @@
         "label",
         "end",
         "dismiss",
+        "marker",
         "panel",
         "scroll",
         "actions"
@@ -108,7 +109,7 @@
           "part": "item",
           "element": "the slTab host, with role=\"presentation\"",
           "required": true,
-          "purpose": "One tab and its optional close button. It exists because a button cannot contain a button, and because the marker spans the tab and its close button together. A class or an attribute written on slTab lands on it."
+          "purpose": "One tab and its optional close button. It exists because a button cannot contain a button, and it carries the hover bar under the tab. A class or an attribute written on slTab lands on it."
         },
         {
           "part": "tab",
@@ -140,6 +141,12 @@
           "required": false,
           "purpose": "The close button. It has tabindex=\"-1\", so the arrow keys move between tabs only, and it stays in the accessibility tree, so a screen reader can press it. From the keyboard, Delete closes the focused tab, which aria-keyshortcuts on the tab announces."
         },
+        {
+          "part": "marker",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "The bar under the selected tab. The list draws one and slides it between tabs; it spans the tab’s content box, never the close button. --slotted-tabs-marker-size, --slotted-tabs-marker-radius and --slotted-tabs-marker-inset shape it, and the hover bar takes the same geometry at --slotted-tabs-hover-marker-opacity."
+        },
         {
           "part": "panel",
           "element": "the element carrying slTabPanel, with role=\"tabpanel\"",
@@ -369,7 +376,7 @@
         "The paging controls are aria-hidden and outside the Tab sequence, because the arrow keys reach every tab and scroll it into view. Cloudscape’s guidance warns against extra Tab stops between a tab list and its panel.",
         "A list that starts to overflow scrolls the selected tab into view once its paging controls are drawn, so the selected tab is not left behind the end control.",
         "Each tab names its panel with aria-controls and each panel names its tab with aria-labelledby. The ids come from the value, with the characters an id cannot hold escaped rather than replaced, so two values that differ only by a space never share a panel.",
-        "The selected tab is never shown by colour alone: the marker is a bar the width of a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.",
+        "The selected tab is never shown by colour alone: the marker is a bar never thinner than a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.",
         "A panel carries tabindex=\"0\", so the Tab key reaches it from the list. The pattern permits that stop even when the panel’s first content is focusable."
       ]
     }
@@ -415,7 +422,6 @@
     "--slotted-radius-full",
     "--slotted-radius-md",
     "--slotted-radius-sm",
-    "--slotted-radius-xs",
     "--slotted-shadow-xs",
     "--slotted-space-1",
     "--slotted-space-2",
@@ -439,8 +445,12 @@
     "--slotted-tabs-hover-background",
     "--slotted-tabs-hover-color",
     "--slotted-tabs-hover-marker-color",
+    "--slotted-tabs-hover-marker-opacity",
     "--slotted-tabs-list-gap",
     "--slotted-tabs-marker-color",
+    "--slotted-tabs-marker-inset",
+    "--slotted-tabs-marker-radius",
+    "--slotted-tabs-marker-size",
     "--slotted-tabs-scroll-color",
     "--slotted-tabs-selected-color",
     "--slotted-tabs-track-color",

package/docs/tabs.md

@@ -136,6 +136,7 @@ export class TabsBasic {
 | `label` | span | yes |
 | `end` | the element carrying slTabEnd | no |
 | `dismiss` | button | no |
+| `marker` | span, aria-hidden | no |
 | `panel` | the element carrying slTabPanel, with role="tabpanel" | yes |
 | `scroll` | button | no |
 | `actions` | the element carrying slTabActions | no |
@@ -199,12 +200,12 @@ export class TabsBasic {
 - The paging controls are aria-hidden and outside the Tab sequence, because the arrow keys reach every tab and scroll it into view. Cloudscape’s guidance warns against extra Tab stops between a tab list and its panel.
 - A list that starts to overflow scrolls the selected tab into view once its paging controls are drawn, so the selected tab is not left behind the end control.
 - Each tab names its panel with aria-controls and each panel names its tab with aria-labelledby. The ids come from the value, with the characters an id cannot hold escaped rather than replaced, so two values that differ only by a space never share a panel.
-- The selected tab is never shown by colour alone: the marker is a bar the width of a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.
+- The selected tab is never shown by colour alone: the marker is a bar never thinner than a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.
 - A panel carries tabindex="0", so the Tab key reaches it from the list. The pattern permits that stop even when the panel’s first content is focusable.
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-full`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-tabs-actions-gap`, `--slotted-tabs-active-background`, `--slotted-tabs-active-marker-color`, `--slotted-tabs-color`, `--slotted-tabs-contained-background`, `--slotted-tabs-contained-selected-background`, `--slotted-tabs-dismiss-active-background`, `--slotted-tabs-dismiss-active-color`, `--slotted-tabs-dismiss-color`, `--slotted-tabs-dismiss-hover-background`, `--slotted-tabs-dismiss-hover-color`, `--slotted-tabs-fade-size`, `--slotted-tabs-gap`, `--slotted-tabs-hover-background`, `--slotted-tabs-hover-color`, `--slotted-tabs-hover-marker-color`, `--slotted-tabs-list-gap`, `--slotted-tabs-marker-color`, `--slotted-tabs-scroll-color`, `--slotted-tabs-selected-color`, `--slotted-tabs-track-color`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-full`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-tabs-actions-gap`, `--slotted-tabs-active-background`, `--slotted-tabs-active-marker-color`, `--slotted-tabs-color`, `--slotted-tabs-contained-background`, `--slotted-tabs-contained-selected-background`, `--slotted-tabs-dismiss-active-background`, `--slotted-tabs-dismiss-active-color`, `--slotted-tabs-dismiss-color`, `--slotted-tabs-dismiss-hover-background`, `--slotted-tabs-dismiss-hover-color`, `--slotted-tabs-fade-size`, `--slotted-tabs-gap`, `--slotted-tabs-hover-background`, `--slotted-tabs-hover-color`, `--slotted-tabs-hover-marker-color`, `--slotted-tabs-hover-marker-opacity`, `--slotted-tabs-list-gap`, `--slotted-tabs-marker-color`, `--slotted-tabs-marker-inset`, `--slotted-tabs-marker-radius`, `--slotted-tabs-marker-size`, `--slotted-tabs-scroll-color`, `--slotted-tabs-selected-color`, `--slotted-tabs-track-color`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/fesm2022/slotted-angular-app-shell.mjs

@@ -1,6 +1,6 @@
 import { createDismissableLayer } from '@slotted/core/dismissable-layer';
 import { extentAtPoint, holdResizeGesture, anchorsAtStart, stepAmountFromPixels, EXTENT_LARGE_STEP_PX, EXTENT_STEP_PX, stepExtent } from '@slotted/core/extent';
-import { createFocusScope } from '@slotted/core/focus';
+import { createFocusScope, focusTarget } from '@slotted/core/focus';
 import { appShellMessages } from '@slotted/core/i18n';
 import { COMPACT_BELOW, clamp, createWidthGate } from '@slotted/core/measure';
 import { setPortalContainer } from '@slotted/core/portal';
@@ -580,7 +580,8 @@ class SlAppShell {
     }
     /** Moves focus into the content region, which is where a skip link sends it. */
     focusMain() {
-        this.nodes.main?.focus();
+        if (this.nodes.main)
+            focusTarget(this.nodes.main);
     }
     /**
      * A click that lands on an `a[href]` inside the region asks to close, in the
@@ -604,7 +605,9 @@ class SlAppShell {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlAppShell, isStandalone: true, selector: "[slAppShell]", inputs: { navOpen: { classPropertyName: "navOpen", publicName: "navOpen", isSignal: true, isRequired: false, transformFunction: null }, asideOpen: { classPropertyName: "asideOpen", publicName: "asideOpen", isSignal: true, isRequired: false, transformFunction: null }, asideExtent: { classPropertyName: "asideExtent", publicName: "asideExtent", isSignal: true, isRequired: false, transformFunction: null }, minAsideExtent: { classPropertyName: "minAsideExtent", publicName: "minAsideExtent", isSignal: true, isRequired: false, transformFunction: null }, maxAsideExtent: { classPropertyName: "maxAsideExtent", publicName: "maxAsideExtent", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, canvas: { classPropertyName: "canvas", publicName: "canvas", isSignal: true, isRequired: false, transformFunction: null }, navMode: { classPropertyName: "navMode", publicName: "navMode", isSignal: true, isRequired: false, transformFunction: null }, navSide: { classPropertyName: "navSide", publicName: "navSide", isSignal: true, isRequired: false, transformFunction: null }, navSize: { classPropertyName: "navSize", publicName: "navSize", isSignal: true, isRequired: false, transformFunction: null }, asideMode: { classPropertyName: "asideMode", publicName: "asideMode", isSignal: true, isRequired: false, transformFunction: null }, asideSize: { classPropertyName: "asideSize", publicName: "asideSize", isSignal: true, isRequired: false, transformFunction: null }, collapsedTo: { classPropertyName: "collapsedTo", publicName: "collapsedTo", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, separation: { classPropertyName: "separation", publicName: "separation", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, outsidePress: { classPropertyName: "outsidePress", publicName: "outsidePress", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigate: { classPropertyName: "closeOnNavigate", publicName: "closeOnNavigate", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navOpen: "navOpenChange", asideOpen: "asideOpenChange", asideExtent: "asideExtentChange", navOpenChangeRequest: "navOpenChangeRequest", asideOpenChangeRequest: "asideOpenChangeRequest", asideExtentChangeRequest: "asideExtentChangeRequest" }, host: { attributes: { "data-ui": "app-shell", "data-part": "root" }, listeners: { "click": "onClick($event)" }, properties: { "attr.data-primary": "resolvedPrimary()", "attr.data-canvas": "resolvedCanvas()", "attr.data-nav-mode": "resolvedMode()", "attr.data-aside-mode": "resolvedAsideMode()", "attr.data-nav-side": "resolvedNavSide()", "attr.data-nav-size": "resolvedNavSize()", "attr.data-aside-size": "resolvedAsideSize()", "attr.data-collapsed-to": "resolvedCollapsedTo()", "attr.data-scroll": "resolvedScroll()", "attr.data-separation": "resolvedSeparation()", "attr.data-open": "navShownOpen() ? '' : null", "attr.data-dragging": "asideDragging() ? '' : null" } }, viewQueries: [{ propertyName: "veilRef", first: true, predicate: ["scrim"], descendants: true, isSignal: true }], exportAs: ["slAppShell"], ngImport: i0, template: `@if (skipTargets().length > 0) {
       <div data-part="skip">
         @for (target of skipTargets(); track target.href) {
-          <a [href]="'#' + target.href">{{ target.label }}</a>
+          <a [href]="'#' + target.href" (click)="target.href === mainId && focusMain()">{{
+            target.label
+          }}</a>
         }
       </div>
     }
@@ -619,7 +622,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             args: [{ selector: '[slAppShell]', standalone: true, exportAs: 'slAppShell', template: `@if (skipTargets().length > 0) {
       <div data-part="skip">
         @for (target of skipTargets(); track target.href) {
-          <a [href]="'#' + target.href">{{ target.label }}</a>
+          <a [href]="'#' + target.href" (click)="target.href === mainId && focusMain()">{{
+            target.label
+          }}</a>
         }
       </div>
     }
@@ -816,9 +821,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 /**
  * The `main` landmark, and the skip link's destination.
  *
- * `tabindex="-1"` is not decoration: a `main` without it takes the scroll and
- * leaves the focus behind in Safari and in Firefox, so the link appears to work
- * and moves nothing a screen reader follows.
+ * It carries no `tabindex` of its own: the skip link and `focusMain()` write
+ * `tabindex="-1"` for the one focus they move (`focusTarget`), and the blur or
+ * the next pointer press inside removes it. A `main` focusable all the time
+ * takes the focus of every click on its text, and the next key draws the ring
+ * around the page. A `tabindex` the consumer writes stays.
  */
 class SlAppShellMain {
     shell = attach('main');
@@ -833,7 +840,7 @@ class SlAppShellMain {
         inject(DestroyRef).onDestroy(remove);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellMain, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellMain, isStandalone: true, selector: "main[slAppShellMain]", host: { attributes: { "data-part": "main", "tabindex": "-1" }, properties: { "attr.id": "elementId", "attr.aria-busy": "busy()" } }, exportAs: ["slAppShellMain"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellMain, isStandalone: true, selector: "main[slAppShellMain]", host: { attributes: { "data-part": "main" }, properties: { "attr.id": "elementId", "attr.aria-busy": "busy()" } }, exportAs: ["slAppShellMain"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellMain, decorators: [{
             type: Directive,
@@ -843,7 +850,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slAppShellMain',
                     host: {
                         'data-part': 'main',
-                        tabindex: '-1',
                         '[attr.id]': 'elementId',
                         '[attr.aria-busy]': 'busy()',
                     },