@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/docs/fullscreen.json

@@ -0,0 +1,395 @@
+{
+  "family": "fullscreen",
+  "ui": "fullscreen",
+  "binding": "angular",
+  "catalog": {
+    "group": "Actions",
+    "summary": "Enters and leaves fullscreen for an element."
+  },
+  "axes": {
+    "mode": [
+      "auto",
+      "layout"
+    ],
+    "navigationUI": [
+      "auto",
+      "show",
+      "hide"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "variant": [
+      "ghost",
+      "outline"
+    ]
+  },
+  "members": {
+    "fullscreen": {
+      "nativeElement": "div",
+      "defaults": {
+        "mode": "auto",
+        "navigationUI": "auto",
+        "defaultFullscreen": false,
+        "size": "md",
+        "variant": "ghost",
+        "iconOnly": false,
+        "type": "button",
+        "disabled": false
+      },
+      "capabilities": [
+        "fullscreen",
+        "size",
+        "appearance",
+        "content",
+        "disabled",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "fullscreen",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "trigger",
+        "content",
+        "icon",
+        "label"
+      ]
+    }
+  },
+  "docs": {
+    "fullscreen": {
+      "imports": {
+        "source": "import { provideFullscreenDefaults, SlFullscreen, SlFullscreenContent, SlFullscreenIcon, SlFullscreenTrigger } from '@slotted/angular/fullscreen';",
+        "selector": "[slFullscreen], button[slFullscreenTrigger], [slFullscreenContent], [slFullscreenIcon]",
+        "exportAs": "slFullscreen, slFullscreenTrigger"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the consumer’s own element, with slFullscreen on it",
+          "required": true,
+          "purpose": "The region that goes full screen. At rest it paints nothing — it is the container the consumer already had. In full screen it carries data-fullscreen and data-mode (native or layout), takes the page ground and the inset, and scrolls by itself."
+        },
+        {
+          "part": "trigger",
+          "element": "the consumer’s own button, with slFullscreenTrigger on it",
+          "required": false,
+          "purpose": "The control. It carries data-ui=\"fullscreen\" of its own, so it is styled wherever it stands — inside the region, or in a bar outside it with [slFullscreenTrigger]=\"fs\". Its words and its mark say what the press does next."
+        },
+        {
+          "part": "content",
+          "element": "the consumer’s own element, with slFullscreenContent on it",
+          "required": false,
+          "purpose": "A direct child of the region that takes, in full screen, the height the other children leave; its first child fills it. Without it, a region with one child gives that child the height, and a lone img, video or canvas fills it with object-fit: contain."
+        },
+        {
+          "part": "icon",
+          "element": "span, rendered by the control",
+          "required": true,
+          "purpose": "The mark, hidden from the reading order. Empty, it draws the four corners opening or closing from the glyph tokens; an element marked slFullscreenIcon is projected into it instead."
+        },
+        {
+          "part": "label",
+          "element": "span, rendered by the control",
+          "required": true,
+          "purpose": "The words — the message the state picks, or the content the consumer projects. With iconOnly they are visually hidden and stay the accessible name."
+        }
+      ],
+      "api": [
+        {
+          "name": "fullscreen",
+          "type": "model<boolean>",
+          "defaultValue": "false",
+          "appliesTo": "slFullscreen",
+          "description": "The state, two-way. Every move is asked first on fullscreenChangeRequest"
+        },
+        {
+          "name": "defaultFullscreen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slFullscreen",
+          "description": "Read once after the first render. True asks the browser outside a gesture, which refuses, so the region starts in the layout"
+        },
+        {
+          "name": "mode",
+          "type": "'auto' | 'layout'",
+          "defaultValue": "auto",
+          "appliesTo": "slFullscreen",
+          "description": "auto asks the browser and falls back to the layout when it has no API or refuses; layout never asks"
+        },
+        {
+          "name": "navigationUI",
+          "type": "'auto' | 'show' | 'hide'",
+          "defaultValue": "auto",
+          "appliesTo": "slFullscreen",
+          "description": "Passed to the native request: whether the browser keeps its navigation interface on screen"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<FullscreenMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slFullscreen",
+          "description": "Words laid over the language in force, key by key: the two labels of the control (enter, exit) and the two announcements (entered, exited). entered says how to leave"
+        },
+        {
+          "name": "slFullscreenTrigger",
+          "type": "SlFullscreen",
+          "defaultValue": "the enclosing region",
+          "appliesTo": "slFullscreenTrigger",
+          "description": "The instance of a region the control is not inside"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slFullscreenTrigger",
+          "description": "The control step, from the control scale"
+        },
+        {
+          "name": "variant",
+          "type": "'ghost' | 'outline'",
+          "defaultValue": "ghost",
+          "appliesTo": "slFullscreenTrigger",
+          "description": "ghost inside a framed bar; outline over content, with its own ground"
+        },
+        {
+          "name": "iconOnly",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slFullscreenTrigger",
+          "description": "The mark alone in a square; the words stay as the accessible name"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slFullscreenTrigger",
+          "description": "The native attribute; the press is refused"
+        },
+        {
+          "name": "type",
+          "type": "'button' | 'submit' | 'reset'",
+          "defaultValue": "button",
+          "appliesTo": "slFullscreenTrigger",
+          "description": "A type the consumer wrote survives; a button otherwise"
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideFullscreenDefaults",
+          "type": "{ mode, navigationUI, size, variant }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "The decisions an application takes once; an input still wins"
+        },
+        {
+          "name": "exportAs",
+          "type": "slFullscreen",
+          "defaultValue": "—",
+          "appliesTo": "[slFullscreen]",
+          "description": "The instance: fullscreen(), mode(), supported(), error(), t(), enter(), exit(), toggle()"
+        },
+        {
+          "name": "slFullscreenContent",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "a direct child of the region",
+          "description": "The part that takes the height in full screen, on the consumer’s own element"
+        },
+        {
+          "name": "slFullscreenIcon",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "inside the control",
+          "description": "Marks the consumer’s own mark, projected into the icon part"
+        },
+        {
+          "name": "content",
+          "type": "projected",
+          "defaultValue": "the message",
+          "appliesTo": "inside the control",
+          "description": "Words in place of the message the state picks"
+        }
+      ],
+      "events": [
+        {
+          "name": "fullscreenChange",
+          "payload": "boolean",
+          "when": "The two-way half of [(fullscreen)], after a request was accepted."
+        },
+        {
+          "name": "fullscreenChangeRequest",
+          "payload": "ChangeRequest<boolean>",
+          "when": "Before the state moves. The reason is pointer or keyboard from the control, programmatic from the instance, and escape when the reader left on their own — Escape in the layout, or the browser’s own exit in native, which has already happened by then. cancel() refuses it."
+        },
+        {
+          "name": "fullscreenError",
+          "payload": "{ kind: 'unsupported' | 'refused', cause?: unknown }",
+          "when": "When the browser has no API or refuses the request. The region has already entered the layout and the state stays true."
+        }
+      ],
+      "accessibility": [
+        "The control is the consumer’s native button, whose label says what the press does next, so it carries no aria-pressed: the APG Button pattern (w3.org/WAI/ARIA/apg/patterns/button/) keeps aria-pressed for a toggle whose label does not change. A screen reader hears “Full screen, button” and then “Exit full screen, button”.",
+        "Escape in native full screen belongs to the browser, and the family writes no listener for it; the specification makes it leave before any close watcher. In the layout, Escape asks through the one layer stack, so a list opened inside closes first.",
+        "While the region is full screen, Tab wraps inside it: what is outside is not painted, and a focus there would be invisible. On the way out, focus returns to the element that held it when it came from outside, and the page’s and the region’s scroll return to where they were.",
+        "Entering is announced politely with how to leave, and leaving is announced too; the layout does not make the page inert, because an inert page would silence that announcement. The cost is that a screen reader’s virtual cursor can reach the covered page."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--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-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-shadow",
+    "--slotted-control-surface",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-instant",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-fullscreen-inset",
+    "--slotted-fullscreen-surface",
+    "--slotted-fullscreen-trigger-active-background",
+    "--slotted-fullscreen-trigger-border-color",
+    "--slotted-fullscreen-trigger-color",
+    "--slotted-fullscreen-trigger-hover-background",
+    "--slotted-fullscreen-trigger-radius",
+    "--slotted-space-5",
+    "--slotted-space-8",
+    "--slotted-surface",
+    "--slotted-text",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-overlay"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "A revenue panel with its control in the header. Press it: the panel takes the screen through the browser, the words become “Exit full screen” and the mark turns inward. Escape, or the control again, gives the page back with the scroll where it was.",
+      "language": "html",
+      "source": "<section slFullscreen>\n  <div slFullscreenContent>\n    <figure slChart title=\"Receita por mês\" [data]=\"monthly\" [series]=\"revenue\">\n      <button slFullscreenTrigger slChartActions iconOnly></button>\n    </figure>\n  </div>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "layout",
+      "title": "Inside the page, where the browser will not",
+      "note": "mode=\"layout\" never asks the browser: the region is fixed over the page, the page behind stops scrolling, and Escape leaves. It is the picture an iframe without allow=\"fullscreen\" or a phone browser gets under the default mode too.",
+      "language": "html",
+      "source": "<section slFullscreen mode=\"layout\">\n  <button slFullscreenTrigger></button>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "fill",
+      "title": "The height of the screen, not only its width",
+      "note": "The browser stretches the region and none of its children. slFullscreenContent takes the height a bar and a caption leave, and the chart’s plot grows into it; a region with a single card gives the card the height instead.",
+      "language": "html",
+      "source": "<section slFullscreen>\n  <div slToolbar><button slFullscreenTrigger></button></div>\n  <div slFullscreenContent>\n    <figure slChart title=\"Receita por mês\" [data]=\"monthly\" [series]=\"revenue\"></figure>\n  </div>\n  <p slText>Fonte: fechamento contábil.</p>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "controlled",
+      "title": "The page holds the state",
+      "note": "The page binds [(fullscreen)] to a signal and every move first arrives on fullscreenChangeRequest with its reason: pointer or keyboard from the control, escape when the reader left on their own. The line under the panel prints each one.",
+      "language": "html",
+      "source": "<section slFullscreen [(fullscreen)]=\"presenting\" (fullscreenChangeRequest)=\"log($event.reason)\">\n  <button slFullscreenTrigger></button>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "error",
+      "title": "Refused, and still full screen",
+      "note": "When the browser has no API or refuses, the region enters the layout and fullscreenError says why — unsupported or refused. A page that prefers nothing sets the state back to false from the same handler.",
+      "language": "html",
+      "source": "<section slFullscreen (fullscreenError)=\"notice.set($event.kind)\">\n  <button slFullscreenTrigger></button>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "overlays",
+      "title": "A menu opened from inside",
+      "note": "The select in the panel opens its list inside the region while it is full screen: the portal root follows the element the browser shows. Escape in the layout closes the list first and the region on the second press.",
+      "language": "html",
+      "source": "<section slFullscreen>\n  <sl-select aria-label=\"Período\" [value]=\"'6m'\">\n    <sl-select-item value=\"3m\">Últimos 3 meses</sl-select-item>\n    <sl-select-item value=\"6m\">Últimos 6 meses</sl-select-item>\n  </sl-select>\n  <button slFullscreenTrigger></button>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "document",
+      "title": "The whole document",
+      "note": "slFullscreen on the application’s root element and a control anywhere that takes its instance: presentation mode for the whole application is the directive and one binding.",
+      "language": "html",
+      "source": "<main slFullscreen #app=\"slFullscreen\">\n  <button [slFullscreenTrigger]=\"app\" variant=\"outline\">Modo apresentação</button>\n</main>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The keyboard, key by key",
+      "note": "Tab reaches the control, Space or Enter presses it and the reason says keyboard. While full screen, Tab wraps inside the region. Escape in native full screen belongs to the browser — the family writes no listener and reports the leave as escape.",
+      "language": "html",
+      "source": "<section slFullscreen (fullscreenChangeRequest)=\"reason.set($event.reason)\">\n  <button slFullscreenTrigger></button>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "trigger",
+      "title": "The control: two variants, three steps, every state",
+      "note": "ghost stands in a bar that is already framed, outline over content and carries its own ground. Each step reads the control scale, so the control lines up with a button of the same step. Disabled keeps the words legible and refuses the press.",
+      "language": "html",
+      "source": "<button slFullscreenTrigger size=\"sm\" variant=\"outline\"></button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "iconOnly",
+      "title": "The mark alone",
+      "note": "iconOnly draws the control square from its height and keeps the words, visually hidden, as its name — so it still says “Exit full screen” to a screen reader when the mark turns inward.",
+      "language": "html",
+      "source": "<button slFullscreenTrigger iconOnly></button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "outside",
+      "title": "The control outside the region",
+      "note": "A bar above a chart holds the control; the chart is the region. exportAs hands the instance to the control, which changes with the chart’s state. Inside the region, a second control takes the reader back.",
+      "language": "html",
+      "source": "<button [slFullscreenTrigger]=\"chart\"></button>\n<section slFullscreen #chart=\"slFullscreen\">…</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Defaults once, words and mark of the consumer",
+      "note": "provideFullscreenDefaults sets the step and the variant for an injector. Projected words and a slFullscreenIcon mark replace the family’s, and read fs.fullscreen() to keep following the state.",
+      "language": "html",
+      "source": "<section slFullscreen #fs=\"slFullscreen\">\n  <button slFullscreenTrigger variant=\"outline\">\n    <ng-icon slFullscreenIcon [name]=\"fs.fullscreen() ? 'lucideX' : 'lucidePresentation'\" />\n    {{ fs.fullscreen() ? 'Terminar' : 'Apresentar' }}\n  </button>\n</section>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}

package/docs/fullscreen.md

@@ -0,0 +1,225 @@
+<!-- index: ./index.md -->
+# fullscreen
+
+`data-ui="fullscreen"` · Enters and leaves fullscreen for an element.
+
+## Import
+
+```ts
+import { provideFullscreenDefaults, SlFullscreen, SlFullscreenContent, SlFullscreenIcon, SlFullscreenTrigger } from '@slotted/angular/fullscreen';
+```
+
+Selector: `[slFullscreen], button[slFullscreenTrigger], [slFullscreenContent], [slFullscreenIcon]` · exportAs: `slFullscreen, slFullscreenTrigger`
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```html
+<section slFullscreen>
+  <div slFullscreenContent>
+    <figure slChart title="Receita por mês" [data]="monthly" [series]="revenue">
+      <button slFullscreenTrigger slChartActions iconOnly></button>
+    </figure>
+  </div>
+</section>
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | the consumer’s own element, with slFullscreen on it | yes |
+| `trigger` | the consumer’s own button, with slFullscreenTrigger on it | no |
+| `content` | the consumer’s own element, with slFullscreenContent on it | no |
+| `icon` | span, rendered by the control | yes |
+| `label` | span, rendered by the control | yes |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `fullscreen` | `model<boolean>` | false | slFullscreen | The state, two-way. Every move is asked first on fullscreenChangeRequest |
+| `defaultFullscreen` | `boolean` | false | slFullscreen | Read once after the first render. True asks the browser outside a gesture, which refuses, so the region starts in the layout |
+| `mode` | `'auto' \| 'layout'` | auto | slFullscreen | auto asks the browser and falls back to the layout when it has no API or refuses; layout never asks |
+| `navigationUI` | `'auto' \| 'show' \| 'hide'` | auto | slFullscreen | Passed to the native request: whether the browser keeps its navigation interface on screen |
+| `messages` | `Partial<FullscreenMessages>` | — | slFullscreen | Words laid over the language in force, key by key: the two labels of the control (enter, exit) and the two announcements (entered, exited). entered says how to leave |
+| `slFullscreenTrigger` | `SlFullscreen` | the enclosing region | slFullscreenTrigger | The instance of a region the control is not inside |
+| `size` | `'sm' \| 'md' \| 'lg'` | md | slFullscreenTrigger | The control step, from the control scale |
+| `variant` | `'ghost' \| 'outline'` | ghost | slFullscreenTrigger | ghost inside a framed bar; outline over content, with its own ground |
+| `iconOnly` | `boolean` | false | slFullscreenTrigger | The mark alone in a square; the words stay as the accessible name |
+| `disabled` | `boolean` | false | slFullscreenTrigger | The native attribute; the press is refused |
+| `type` | `'button' \| 'submit' \| 'reset'` | button | slFullscreenTrigger | A type the consumer wrote survives; a button otherwise |
+| `provideFullscreenDefaults` | `{ mode, navigationUI, size, variant }` | — | an injector | The decisions an application takes once; an input still wins |
+| `exportAs` | `slFullscreen` | — | [slFullscreen] | The instance: fullscreen(), mode(), supported(), error(), t(), enter(), exit(), toggle() |
+| `slFullscreenContent` | `directive` | — | a direct child of the region | The part that takes the height in full screen, on the consumer’s own element |
+| `slFullscreenIcon` | `directive` | — | inside the control | Marks the consumer’s own mark, projected into the icon part |
+| `content` | `projected` | the message | inside the control | Words in place of the message the state picks |
+
+## Events
+
+| Name | Payload | When |
+| --- | --- | --- |
+| `fullscreenChange` | `boolean` | The two-way half of [(fullscreen)], after a request was accepted. |
+| `fullscreenChangeRequest` | `ChangeRequest<boolean>` | Before the state moves. The reason is pointer or keyboard from the control, programmatic from the instance, and escape when the reader left on their own — Escape in the layout, or the browser’s own exit in native, which has already happened by then. cancel() refuses it. |
+| `fullscreenError` | `{ kind: 'unsupported' \| 'refused', cause?: unknown }` | When the browser has no API or refuses the request. The region has already entered the layout and the state stays true. |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `mode` | `auto`, `layout` | `auto` |
+| `navigationUI` | `auto`, `show`, `hide` | `auto` |
+| `size` | `sm`, `md`, `lg` | `md` |
+| `variant` | `ghost`, `outline` | `ghost` |
+
+## Rules
+
+- The control is the consumer’s native button, whose label says what the press does next, so it carries no aria-pressed: the APG Button pattern (w3.org/WAI/ARIA/apg/patterns/button/) keeps aria-pressed for a toggle whose label does not change. A screen reader hears “Full screen, button” and then “Exit full screen, button”.
+- Escape in native full screen belongs to the browser, and the family writes no listener for it; the specification makes it leave before any close watcher. In the layout, Escape asks through the one layer stack, so a list opened inside closes first.
+- While the region is full screen, Tab wraps inside it: what is outside is not painted, and a focus there would be invisible. On the way out, focus returns to the element that held it when it came from outside, and the page’s and the region’s scroll return to where they were.
+- Entering is announced politely with how to leave, and leaving is announced too; the layout does not make the page inert, because an inert page would silence that announcement. The cost is that a screen reader’s virtual cursor can reach the covered page.
+
+## Tokens
+
+`--slotted-control-border-color`, `--slotted-control-border-width`, `--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-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-shadow`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-fullscreen-inset`, `--slotted-fullscreen-surface`, `--slotted-fullscreen-trigger-active-background`, `--slotted-fullscreen-trigger-border-color`, `--slotted-fullscreen-trigger-color`, `--slotted-fullscreen-trigger-hover-background`, `--slotted-fullscreen-trigger-radius`, `--slotted-space-5`, `--slotted-space-8`, `--slotted-surface`, `--slotted-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-overlay`
+
+## Examples
+
+### Inside the page, where the browser will not
+
+mode="layout" never asks the browser: the region is fixed over the page, the page behind stops scrolling, and Escape leaves. It is the picture an iframe without allow="fullscreen" or a phone browser gets under the default mode too.
+
+Excerpt — not a complete module
+
+```html
+<section slFullscreen mode="layout">
+  <button slFullscreenTrigger></button>
+</section>
+```
+
+### The height of the screen, not only its width
+
+The browser stretches the region and none of its children. slFullscreenContent takes the height a bar and a caption leave, and the chart’s plot grows into it; a region with a single card gives the card the height instead.
+
+Excerpt — not a complete module
+
+```html
+<section slFullscreen>
+  <div slToolbar><button slFullscreenTrigger></button></div>
+  <div slFullscreenContent>
+    <figure slChart title="Receita por mês" [data]="monthly" [series]="revenue"></figure>
+  </div>
+  <p slText>Fonte: fechamento contábil.</p>
+</section>
+```
+
+### The page holds the state
+
+The page binds [(fullscreen)] to a signal and every move first arrives on fullscreenChangeRequest with its reason: pointer or keyboard from the control, escape when the reader left on their own. The line under the panel prints each one.
+
+Excerpt — not a complete module
+
+```html
+<section slFullscreen [(fullscreen)]="presenting" (fullscreenChangeRequest)="log($event.reason)">
+  <button slFullscreenTrigger></button>
+</section>
+```
+
+### Refused, and still full screen
+
+When the browser has no API or refuses, the region enters the layout and fullscreenError says why — unsupported or refused. A page that prefers nothing sets the state back to false from the same handler.
+
+Excerpt — not a complete module
+
+```html
+<section slFullscreen (fullscreenError)="notice.set($event.kind)">
+  <button slFullscreenTrigger></button>
+</section>
+```
+
+### A menu opened from inside
+
+The select in the panel opens its list inside the region while it is full screen: the portal root follows the element the browser shows. Escape in the layout closes the list first and the region on the second press.
+
+Excerpt — not a complete module
+
+```html
+<section slFullscreen>
+  <sl-select aria-label="Período" [value]="'6m'">
+    <sl-select-item value="3m">Últimos 3 meses</sl-select-item>
+    <sl-select-item value="6m">Últimos 6 meses</sl-select-item>
+  </sl-select>
+  <button slFullscreenTrigger></button>
+</section>
+```
+
+### The whole document
+
+slFullscreen on the application’s root element and a control anywhere that takes its instance: presentation mode for the whole application is the directive and one binding.
+
+Excerpt — not a complete module
+
+```html
+<main slFullscreen #app="slFullscreen">
+  <button [slFullscreenTrigger]="app" variant="outline">Modo apresentação</button>
+</main>
+```
+
+### The keyboard, key by key
+
+Tab reaches the control, Space or Enter presses it and the reason says keyboard. While full screen, Tab wraps inside the region. Escape in native full screen belongs to the browser — the family writes no listener and reports the leave as escape.
+
+Excerpt — not a complete module
+
+```html
+<section slFullscreen (fullscreenChangeRequest)="reason.set($event.reason)">
+  <button slFullscreenTrigger></button>
+</section>
+```
+
+### The control: two variants, three steps, every state
+
+ghost stands in a bar that is already framed, outline over content and carries its own ground. Each step reads the control scale, so the control lines up with a button of the same step. Disabled keeps the words legible and refuses the press.
+
+Excerpt — not a complete module
+
+```html
+<button slFullscreenTrigger size="sm" variant="outline"></button>
+```
+
+### The mark alone
+
+iconOnly draws the control square from its height and keeps the words, visually hidden, as its name — so it still says “Exit full screen” to a screen reader when the mark turns inward.
+
+Excerpt — not a complete module
+
+```html
+<button slFullscreenTrigger iconOnly></button>
+```
+
+### The control outside the region
+
+A bar above a chart holds the control; the chart is the region. exportAs hands the instance to the control, which changes with the chart’s state. Inside the region, a second control takes the reader back.
+
+Excerpt — not a complete module
+
+```html
+<button [slFullscreenTrigger]="chart"></button>
+<section slFullscreen #chart="slFullscreen">…</section>
+```
+
+### Defaults once, words and mark of the consumer
+
+provideFullscreenDefaults sets the step and the variant for an injector. Projected words and a slFullscreenIcon mark replace the family’s, and read fs.fullscreen() to keep following the state.
+
+Excerpt — not a complete module
+
+```html
+<section slFullscreen #fs="slFullscreen">
+  <button slFullscreenTrigger variant="outline">
+    <ng-icon slFullscreenIcon [name]="fs.fullscreen() ? 'lucideX' : 'lucidePresentation'" />
+    {{ fs.fullscreen() ? 'Terminar' : 'Apresentar' }}
+  </button>
+</section>
+```