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

package/docs/table.json

@@ -12,6 +12,10 @@
       "ruled",
       "framed"
     ],
+    "edges": [
+      "inset",
+      "flush"
+    ],
     "striped": [
       true,
       false
@@ -71,6 +75,7 @@
       "nativeElement": "div",
       "defaults": {
         "variant": "ruled",
+        "edges": "inset",
         "striped": false,
         "stickyHeader": false,
         "stickyTo": "scroll",
@@ -420,6 +425,13 @@
           "appliesTo": "slTable",
           "description": "How much of a frame the set is given"
         },
+        {
+          "name": "edges",
+          "type": "'inset' | 'flush'",
+          "defaultValue": "inset",
+          "appliesTo": "slTable",
+          "description": "Whether the first and the last column keep the cell inset on their outer side. flush lines a plain or ruled table up with the heading around it, leaving the theme’s --slotted-table-edge-inset (0 unless set); a framed table ignores it. Sticky and selection columns keep their own offsets"
+        },
         {
           "name": "striped",
           "type": "boolean",
@@ -809,6 +821,7 @@
     "--slotted-table-color-muted",
     "--slotted-table-column-actions-size",
     "--slotted-table-control-radius",
+    "--slotted-table-edge-inset",
     "--slotted-table-font-family",
     "--slotted-table-font-size",
     "--slotted-table-gap",

package/docs/table.md

@@ -205,6 +205,7 @@ export class TableBasic {
 | `expanded` | `model<readonly string[]>` | [] | slTable | The rows whose detail is open, two-way |
 | `defaultExpanded` | `model initial value` | [] | slTable | The details an unbound table starts with |
 | `variant` | `'plain' \| 'ruled' \| 'framed'` | ruled | slTable | How much of a frame the set is given |
+| `edges` | `'inset' \| 'flush'` | inset | slTable | Whether the first and the last column keep the cell inset on their outer side. flush lines a plain or ruled table up with the heading around it, leaving the theme’s --slotted-table-edge-inset (0 unless set); a framed table ignores it. Sticky and selection columns keep their own offsets |
 | `striped` | `boolean` | false | slTable | A tinted ground on every second record |
 | `stickyHeader` | `boolean` | false | slTable | Whether the header stays while the body scrolls |
 | `stickyFooter` | `boolean` | false | slTable | Whether the summary rows stay while the body scrolls. It pins the tfoot and not the footer bar, which never scrolls. |
@@ -265,6 +266,7 @@ export class TableBasic {
 | Axis | Values | Default |
 | --- | --- | --- |
 | `variant` | `plain`, `ruled`, `framed` | `ruled` |
+| `edges` | `inset`, `flush` | `inset` |
 | `striped` | `true`, `false` | `false` |
 | `stickyHeader` | `true`, `false` | `false` |
 | `stickyFooter` | `true`, `false` | `false` |
@@ -292,7 +294,7 @@ export class TableBasic {
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-height-md`, `--slotted-control-icon-size-md`, `--slotted-control-padding-inline-md`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-ground`, `--slotted-line-height-md`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-space-9`, `--slotted-surface`, `--slotted-table-border-color`, `--slotted-table-border-color-strong`, `--slotted-table-border-width`, `--slotted-table-cell-padding-block`, `--slotted-table-cell-padding-inline`, `--slotted-table-color`, `--slotted-table-color-muted`, `--slotted-table-column-actions-size`, `--slotted-table-control-radius`, `--slotted-table-font-family`, `--slotted-table-font-size`, `--slotted-table-gap`, `--slotted-table-group-color`, `--slotted-table-group-sticky-offset`, `--slotted-table-group-surface`, `--slotted-table-header-surface`, `--slotted-table-header-surface-hover`, `--slotted-table-icon-size`, `--slotted-table-radius`, `--slotted-table-row-color-selected`, `--slotted-table-row-min-block-size`, `--slotted-table-row-surface-current`, `--slotted-table-row-surface-hover`, `--slotted-table-row-surface-selected`, `--slotted-table-row-surface-selected-hover`, `--slotted-table-row-surface-stripe`, `--slotted-table-selection-size`, `--slotted-table-shadow`, `--slotted-table-sticky-inset`, `--slotted-table-sticky-offset`, `--slotted-table-sticky-offset-end`, `--slotted-table-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-z-index-sticky`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-height-md`, `--slotted-control-icon-size-md`, `--slotted-control-padding-inline-md`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-ground`, `--slotted-line-height-md`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-space-9`, `--slotted-surface`, `--slotted-table-border-color`, `--slotted-table-border-color-strong`, `--slotted-table-border-width`, `--slotted-table-cell-padding-block`, `--slotted-table-cell-padding-inline`, `--slotted-table-color`, `--slotted-table-color-muted`, `--slotted-table-column-actions-size`, `--slotted-table-control-radius`, `--slotted-table-edge-inset`, `--slotted-table-font-family`, `--slotted-table-font-size`, `--slotted-table-gap`, `--slotted-table-group-color`, `--slotted-table-group-sticky-offset`, `--slotted-table-group-surface`, `--slotted-table-header-surface`, `--slotted-table-header-surface-hover`, `--slotted-table-icon-size`, `--slotted-table-radius`, `--slotted-table-row-color-selected`, `--slotted-table-row-min-block-size`, `--slotted-table-row-surface-current`, `--slotted-table-row-surface-hover`, `--slotted-table-row-surface-selected`, `--slotted-table-row-surface-selected-hover`, `--slotted-table-row-surface-stripe`, `--slotted-table-selection-size`, `--slotted-table-shadow`, `--slotted-table-sticky-inset`, `--slotted-table-sticky-offset`, `--slotted-table-sticky-offset-end`, `--slotted-table-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-z-index-sticky`
 
 ## Examples
 

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/docs/text-field.json

@@ -256,7 +256,7 @@
           "type": "'text' | 'search' | 'email' | 'url' | 'tel' | 'password'",
           "defaultValue": "text",
           "appliesTo": "the input element",
-          "description": "The input’s own type, written as a static attribute. It is read before the host binding computes, so the reveal toggle can swap it and restore what you wrote."
+          "description": "The input’s own type, one of the six listed, written as a static attribute. It is read before the host binding computes, so the reveal toggle can swap it and restore what you wrote. A date, a time, a month or a number is not a text field: use date-picker (forms.md FM-16), time-picker or number-field. Other strings still reach the element for compatibility and are not supported."
         },
         {
           "name": "copyable",

package/docs/text-field.md

@@ -78,7 +78,7 @@ export class TextFieldBasic {}
 | `readOnly` | `boolean` | from the field, or false | slTextFieldInput | Unset by default, so the input takes the state of the field around it. It is the native readonly: the input stays focusable and selectable, and its value is submitted. A static readonly attribute you write is read before the binding computes. |
 | `invalid` | `boolean` | from the field, or false | slTextFieldInput | Unset by default, so the input takes the state of the field around it. It sets aria-invalid on the input and data-invalid on the frame. |
 | `required` | `boolean` | — | the input element | The input’s own attribute; slTextFieldInput never writes it. A field marks a required value with aria-required instead, because the native attribute turns on browser constraint validation. |
-| `type` | `'text' \| 'search' \| 'email' \| 'url' \| 'tel' \| 'password'` | text | the input element | The input’s own type, written as a static attribute. It is read before the host binding computes, so the reveal toggle can swap it and restore what you wrote. |
+| `type` | `'text' \| 'search' \| 'email' \| 'url' \| 'tel' \| 'password'` | text | the input element | The input’s own type, one of the six listed, written as a static attribute. It is read before the host binding computes, so the reveal toggle can swap it and restore what you wrote. A date, a time, a month or a number is not a text field: use date-picker (forms.md FM-16), time-picker or number-field. Other strings still reach the element for compatibility and are not supported. |
 | `copyable` | `boolean` | false | slTextField | Draws a button that writes the value to the clipboard, shows a check for two seconds and announces the outcome. It is hidden while the value is empty or the input is disabled. |
 | `loading` | `boolean` | false | slTextField | Draws the shared spinner before the buttons and sets aria-busy on the input; the value stays editable. Once loading is bound, false included, the spinner keeps its place so it can leave with a transition. |
 | `messages` | `Partial<TextFieldMessages>` | — | slTextField | Replaces words of the active language, key by key. clear, reveal and copy name the buttons; reveal does not change with the state, because aria-pressed carries it. copied and copyFailed announce the outcome of a copy. capsLock is announced once when Caps Lock turns on in a focused password field. |

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()',
                     },