{ "version": "0.2.0-preview.1", "content_digest": "70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721", "status": "preview", "authority": { "repository": "cloakedinc/design", "path": "packages/design-system", "catalog": "packages/design-system/catalog.json", "status": "preview" }, "provenance": { "repo": "cloakedinc/automation", "commit": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1", "path": "packages/design-system", "imported_spec_status": "approved" }, "adaptations": [ { "id": "button-content-gap", "status": "preview", "description": "Use the specification's 4px content gap instead of the inherited 8px implementation gap." }, { "id": "keyboard-focus", "status": "preview", "description": "Add visible Button and Input keyboard focus and an overridable inset focus default for shared button resets, including FAQ cards and ListItem rows." }, { "id": "supporting-text-contrast", "status": "preview", "description": "Map light secondary text to the existing grey-04-strong primitive for readable helper text on white and cream." }, { "id": "danger-text-contrast", "status": "preview", "description": "Separate readable danger text/borders from destructive fills; preserve the primary danger-button fill and label pair." }, { "id": "preview-status", "status": "preview", "description": "Local components, specs and token adaptations await human sign-off; upstream approved status is provenance only." }, { "id": "motion-comparison-accessibility", "status": "preview", "description": "Preserve the original MotionShowcase comparisons while requiring explicit replay, responding to live reduced-motion changes, and keeping duration tracks usable on small screens." }, { "id": "list-item-ownership", "status": "preview", "description": "List owns listitem wrappers for its content rows, while section labels stay outside the row count and standalone rows retain their existing semantics." }, { "id": "card-delta-text-contrast", "status": "preview", "description": "Mix Card.Delta foregrounds from 60% existing tone solid and 40% primary text for readable contrast in both themes; preserve the four original tone fills." }, { "id": "carousel-keyboard-access", "status": "preview", "description": "Keep all native-scrolling carousel slide controls exposed to assistive technology and keyboard navigation; pause autoplay while focus is inside the carousel." } ], "id": "screen", "name": "Screen", "category": "Layout", "summary": "A full-height route scaffold that paints the surface, applies safe-area insets, and hosts sticky header and footer chrome around a scrolling body. Chrome padding is fixed by the system; only the body's padding is authorable.", "documentation": { "summary": "A full-height route scaffold that paints the surface, applies safe-area insets, and hosts sticky header and footer chrome around a scrolling body. Chrome padding is fixed by the system; only the body's padding is authorable.", "guidance": [ { "heading": "Overview", "body": "Full-height route scaffold. Use it as the outermost element of a routed screen: it paints the\npage surface, applies safe-area insets, and hosts sticky `Screen.Header` / `Screen.Footer`\nchrome while `Screen.Body` owns the scroll." }, { "heading": "When to use", "body": "Reach for `Screen` as the **top-level wrapper of a routed view** — anything that needs a header,\na scrolling body, a pinned footer action, or device safe-area handling. Compose the header from\nthe `Screen.Header.*` sub-parts (`Bar`, `Title`, `Brand`, `Task`, `BackButton`, `IconButton`,\n`Action`, `Progress`).\n\n- A detail, modal, or standalone screen that just needs a **centered surface without route\n chrome**? Use `Background`.\n- Laying out content **inside** a Screen? Use `VStack` / `HStack` / `Grid`." }, { "heading": "Chrome padding is fixed", "body": "`Screen.Header` and `Screen.Footer` take no padding props. The header is `20 / 12 / 8` and the\nfooter is `20 / 16 / 16`, on every route, and a `padding` on the `Screen` root reaches only the\nbody. Only `Screen.Body` is authorable, because body content genuinely varies — sectioned lists,\nfull-bleed heroes — while chrome does not.\n\nThe props used to exist and every value in them drifted: one app settled on `12 / 8`, another\ncopy-pasted `16 / 12` into thirteen files, two chat headers inset their icons to 12 while their own\nbody sat at 20, and seven headers shipped with no `paddingX` at all, flush to the screen edge.\n\n`Screen.Header inset=\"activity\"` is the one sanctioned variation: it swaps the 12 top for 32, for a\nStackflow activity that renders a header with **no `Screen` root above it** and no navigation bar to\nsit under.\n\n```tsx\n\n \n \n Pack details\n \n\n```\n\nFor a bespoke **host** alignment — a header that must line up with a floating control the app draws\noutside React — the documented last resort is the slot's `style` prop, which lands after the\nconstant. Reach for it only when a real host constraint outranks the system box, and say so in a\ncomment." }, { "heading": "Overscroll edges", "body": "The over-pull (rubber-band) region continues the color of whatever sits at that edge, so a\nfull-bleed footer or colored hero doesn't break into a flat gray bounce. Set the edge color with\n`overscrollTop` / `overscrollBottom` (pass `var(--cds-*)` tokens) to match the content there — e.g.\na colored hero at the top, or a `FaqCarousel fullBleed` band's `var(--cds-feature--backdrop)`\nat the bottom. The effect is only visible while bouncing on a touch device." }, { "heading": "Solid and grouped bodies", "body": "Every screen is one of two shapes, and `layout` is the only thing that picks between them:\n\n- **`solid`** (default) — children flow down one continuous surface inside the page gutter.\n- **`grouped`** — the grouped-list rhythm. The body drops its gutter, each `Screen.Section` paints\n the surface, and the fixed 16px gap between two sections takes the page color. The gap is not a\n prop — a tunable one re-opens the drift this closes.\n\nSections **paint and position only**. They add no inline padding, because content already self-pads\nto the page gutter (`SectionHeader` and `List.Item` both inset 20px). A section that insets its own\nchildren makes them double-inset.\n\n**The page color is a separator, never a ground.** Only the gap between two sections takes it;\neverything else the body holds keeps the screen surface — the inset the body reserves for a native\nbar, bottom tab-bar clearance, the slack a short screen leaves under its last section, and\nboth over-pull edges. A grouped body gets that by painting a box that holds only the sections and\nnests inside the padded one, so no page color ever reaches the boundary of the scrolling content.\nThere is nothing to pair on the `Screen` root, and no `overscrollBottom` to set." }, { "heading": "Body background", "body": "`Screen.Body`'s scroll content is opaque so the overscroll backdrop shows only in the over-pull\nedges. To give a scrolling body a custom background (e.g. a hero→page gradient), set\n`--screen-scroll-bg` on the body — a raw `background` on the body `className` is painted over\nby the scroll content and won't show. See `PackDetailsView` for the pattern." } ], "usage": [], "examples": [], "source": "packages/design-system/src/components/layout/Screen/Screen.mdx", "status": "local-preview", "note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification." }, "source": { "path": "packages/design-system/src/components/layout/Screen/Screen.tsx", "code": "import {\n Action,\n BackButton,\n Bar,\n Brand,\n IconButton,\n Progress,\n Task,\n Title,\n} from './ScreenHeaderChrome/ScreenHeaderChrome';\nimport { ScreenRoot } from './ScreenRoot/ScreenRoot';\nimport { Body, Footer, Header, Section } from './ScreenSlots/ScreenSlots';\n\nexport type {\n ScreenBodyLayout,\n ScreenBodyProps,\n ScreenFooterProps,\n ScreenHeaderActionProps,\n ScreenHeaderActionSlot,\n ScreenHeaderBackButtonProps,\n ScreenHeaderBarProps,\n ScreenHeaderBrandProps,\n ScreenHeaderGlyph,\n ScreenHeaderIconButtonProps,\n ScreenHeaderIconButtonSlot,\n ScreenHeaderInset,\n ScreenHeaderJustify,\n ScreenHeaderProgressProps,\n ScreenHeaderProps,\n ScreenHeaderTaskProps,\n ScreenHeaderTitleProps,\n ScreenProps,\n ScreenSafeArea,\n ScreenSectionProps,\n} from './types';\n\nconst headerWithSlots = Object.assign(Header, {\n Bar,\n Brand,\n Title,\n Action,\n BackButton,\n IconButton,\n Progress,\n Task,\n});\n\n/**\n * Full-screen route scaffold with optional sticky chrome slots.\n */\nexport const Screen = Object.assign(ScreenRoot, {\n Header: headerWithSlots,\n Body,\n Section,\n Footer,\n});\n" }, "spec": { "$schema": "../../../specs/component-spec.schema.json", "identity": { "name": "Screen", "status": "preview", "version": "3.0.0", "summary": "A full-height route scaffold that paints the surface, applies safe-area insets, and hosts sticky header and footer chrome around a scrolling body. Chrome padding is fixed by the system; only the body's padding is authorable." }, "parts": [ { "id": "root", "label": "Root", "description": "Full-height scaffold painting the surface. Structural container.", "required": true }, { "id": "header", "label": "Screen.Header", "description": "Sticky top chrome slot." }, { "id": "body", "label": "Screen.Body", "description": "Scrolling content slot that owns route padding." }, { "id": "section", "label": "Screen.Section", "description": "Full-bleed content slab inside a grouped body. Paints and positions only; it adds no inline padding." }, { "id": "footer", "label": "Screen.Footer", "description": "Sticky bottom chrome slot." }, { "id": "bar", "label": "Screen.Header.Bar", "description": "Compact header row with justified chrome." }, { "id": "brand", "label": "Screen.Header.Brand", "description": "App wordmark or brand mark." }, { "id": "title", "label": "Screen.Header.Title", "description": "Route title; truncates to one line with an ellipsis." }, { "id": "action", "label": "Screen.Header.Action", "description": "Text action in the header." }, { "id": "back-button", "label": "Screen.Header.BackButton", "description": "Safe back button." }, { "id": "icon-button", "label": "Screen.Header.IconButton", "description": "Icon-only header action." }, { "id": "task", "label": "Screen.Header.Task", "description": "Partner mark plus active task label." }, { "id": "progress", "label": "Screen.Header.Progress", "description": "Segmented header progress." } ], "allowedDesignChoices": { "variants": { "route": { "label": "Route", "description": "The single route-scaffold treatment." } }, "sizes": {}, "surfaces": { "page": { "label": "Page", "description": "Paints the page background." }, "surface": { "label": "Surface", "description": "Paints the raised surface background." } }, "safeAreas": { "none": { "label": "None" }, "top": { "label": "Top" }, "bottom": { "label": "Bottom" }, "both": { "label": "Both" } }, "insets": { "none": { "label": "None", "description": "Standard route header: 12 top, 8 bottom." }, "activity": { "label": "Activity", "description": "Deeper 32 top inset for a Stackflow activity that renders a header with no Screen root above it and no navigation bar to sit under." } } }, "variants": [ { "id": "route", "label": "Route", "description": "Full-height route scaffold.", "platforms": [ "ios", "android", "web" ] } ], "sizes": [], "measurements": [ { "id": "chrome-padding", "label": "Header and footer padding", "kind": "exact", "token": "--cds-space-20", "value": 20, "unit": "px", "appliesTo": [ "header", "footer" ], "notes": "Fixed, not authorable: the horizontal gutter is 20 on both slots, the header is 12 top and 8 bottom (32 top under inset=\"activity\"), and the footer is 16 top and bottom. Callers cannot set it, and a Screen padding does not reach it. Contrast with content-padding, which is example-only because the body genuinely varies." }, { "id": "content-padding", "label": "Body content padding", "kind": "example-only", "token": "--cds-space-20", "value": 20, "unit": "px", "appliesTo": [ "body" ], "notes": "Representative value: body padding is author-configurable and accepts any step on the spacing scale. 20 is the value rendered and verified by the slot-geometry story." } ], "layout": { "alignment": "Header and footer are sticky and full-width; the body fills the remaining height and scrolls.", "flow": "A column: sticky header chrome, a scrolling body, and sticky footer chrome. A body set to layout=\"grouped\" stacks Screen.Section slabs split by page-colored separators instead of flowing children inside the page gutter.", "notes": [ "Chrome padding is a system constant, so the header and footer boxes are identical on every route; only Screen.Body accepts padding props. A bespoke host alignment goes through the slot's style prop.", "Use Background when a detail or modal screen just needs a centered surface without route chrome.", "layout picks between the two screen shapes. \"solid\" flows children down one continuous surface inside the page gutter. \"grouped\" is the grouped-list rhythm: the body drops its gutter, each Screen.Section paints the surface, and the 16px gap between two sections takes the page color as a separator. Sections paint and position only — content self-pads to the page gutter, as SectionHeader and List.Item already do. A section that insets its own children makes them double-inset.", "The page color is a separator, never a ground. Everything else a grouped body holds keeps the screen surface: the inset reserved for a native bar, bottom tab-bar clearance, the slack a short screen leaves under its last section, and both over-pull edges. Nothing needs pairing on the Screen root." ] }, "typographyAndColor": { "typography": [ { "label": "Title", "description": "Screen.Header.Title uses the h1 ramp by default.", "token": "--cds-type-h1-size" } ], "colors": [ { "label": "Page surface", "description": "The page surface paints the route background.", "token": "--cds-bg-page" }, { "label": "Raised surface", "description": "The surface option paints the raised background.", "token": "--cds-bg-surface" }, { "label": "Text", "description": "Route content uses primary text.", "token": "--cds-text-primary" } ] }, "states": [ { "id": "scroll", "label": "Scroll", "description": "The body scrolls under sticky chrome (the default)." }, { "id": "no-scroll", "label": "No scroll", "description": "scroll=false for short fixed routes." }, { "id": "surface", "label": "Surface", "description": "Uses the raised surface background." } ], "behavior": [ { "label": "Sticky chrome", "description": "Screen.Header and Screen.Footer stay pinned while Screen.Body scrolls." }, { "label": "Safe area", "description": "safeArea adds device insets on top of the configured padding, propagated to slots." }, { "label": "Fixed chrome box", "description": "Screen.Header and Screen.Footer own their padding. The parent Screen padding reaches only the body." }, { "label": "Under host chrome", "description": "Screen.Body always clears chrome the host draws over the web view, reading --cds-safe-area-top-chrome. It takes the larger of that and the device inset rather than stacking them, and collapses to zero where the host draws no chrome. bleedUnderTopChrome drops it for a body whose top edge is already spoken for — a bleeding hero, a scroller the body does not own, or an in-flow Screen.Header above it." }, { "label": "Host chrome frost", "description": "The Screen root draws a progressive blur the height of that same inset, so content reads as passing under the host's bar. The blur is strongest at the top and fully clear by the band's bottom edge, so content at rest is untouched. The host publishes --cds-top-chrome-frost to turn it on, and leaves it off for a bar drawing no background of its own, since a screen meaning to run edge to edge wants no blur across it. Nothing on Screen configures it." } ], "accessibility": [ { "label": "Route structure", "description": "Header, body, and footer keep a predictable landmark order for assistive tech." }, { "label": "Safe insets", "description": "Safe-area insets keep chrome clear of the notch and home indicator." } ], "contentAdaptation": [ { "label": "Header composition", "description": "Compose the header from Bar, Title, Brand, Task, BackButton, IconButton, Action, and Progress sub-parts." }, { "label": "Scroll control", "description": "Disable scroll for short routes that never overflow." }, { "label": "Title truncation", "description": "Screen.Header.Title truncates long titles to a single line with an ellipsis instead of wrapping the header chrome." }, { "label": "Activity inset", "description": "inset=\"activity\" on Screen.Header deepens the top inset for a Stackflow activity that stands in for a navigation bar." } ], "motionHaptics": { "motion": [ { "label": "None", "description": "Screen does not animate; slot chrome owns any motion." } ], "haptics": [ { "label": "Chrome haptics", "description": "Header actions and the back button own their own haptics." } ] }, "platformDifferences": [ { "platforms": [ "ios" ], "description": "The scroll content is forced one pixel past the viewport so iOS WKWebView keeps momentum and rubber-band scrolling available on short screens.", "rationale": "WKWebView only engages bounce when content exceeds the container, so short routes would otherwise feel dead at rest." } ] }, "spec_source": "packages/design-system/src/components/layout/Screen/Screen.spec.json", "guidance_source": { "path": "packages/design-system/src/components/layout/Screen/Screen.mdx", "code": "import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';\nimport { ComponentSpec } from '../../../../.storybook/blocks';\nimport * as Stories from './Screen.stories';\nimport screenSpec from './Screen.spec.json';\n\n\n\n# Screen\n\nFull-height route scaffold. Use it as the outermost element of a routed screen: it paints the\npage surface, applies safe-area insets, and hosts sticky `Screen.Header` / `Screen.Footer`\nchrome while `Screen.Body` owns the scroll.\n\n\n\n## When to use\n\nReach for `Screen` as the **top-level wrapper of a routed view** — anything that needs a header,\na scrolling body, a pinned footer action, or device safe-area handling. Compose the header from\nthe `Screen.Header.*` sub-parts (`Bar`, `Title`, `Brand`, `Task`, `BackButton`, `IconButton`,\n`Action`, `Progress`).\n\n- A detail, modal, or standalone screen that just needs a **centered surface without route\n chrome**? Use `Background`.\n- Laying out content **inside** a Screen? Use `VStack` / `HStack` / `Grid`.\n\n\n\n## Chrome padding is fixed\n\n`Screen.Header` and `Screen.Footer` take no padding props. The header is `20 / 12 / 8` and the\nfooter is `20 / 16 / 16`, on every route, and a `padding` on the `Screen` root reaches only the\nbody. Only `Screen.Body` is authorable, because body content genuinely varies — sectioned lists,\nfull-bleed heroes — while chrome does not.\n\nThe props used to exist and every value in them drifted: one app settled on `12 / 8`, another\ncopy-pasted `16 / 12` into thirteen files, two chat headers inset their icons to 12 while their own\nbody sat at 20, and seven headers shipped with no `paddingX` at all, flush to the screen edge.\n\n`Screen.Header inset=\"activity\"` is the one sanctioned variation: it swaps the 12 top for 32, for a\nStackflow activity that renders a header with **no `Screen` root above it** and no navigation bar to\nsit under.\n\n```tsx\n\n \n \n Pack details\n \n\n```\n\nFor a bespoke **host** alignment — a header that must line up with a floating control the app draws\noutside React — the documented last resort is the slot's `style` prop, which lands after the\nconstant. Reach for it only when a real host constraint outranks the system box, and say so in a\ncomment.\n\n## Overscroll edges\n\nThe over-pull (rubber-band) region continues the color of whatever sits at that edge, so a\nfull-bleed footer or colored hero doesn't break into a flat gray bounce. Set the edge color with\n`overscrollTop` / `overscrollBottom` (pass `var(--cds-*)` tokens) to match the content there — e.g.\na colored hero at the top, or a `FaqCarousel fullBleed` band's `var(--cds-feature--backdrop)`\nat the bottom. The effect is only visible while bouncing on a touch device.\n\n\n\n## Solid and grouped bodies\n\nEvery screen is one of two shapes, and `layout` is the only thing that picks between them:\n\n- **`solid`** (default) — children flow down one continuous surface inside the page gutter.\n- **`grouped`** — the grouped-list rhythm. The body drops its gutter, each `Screen.Section` paints\n the surface, and the fixed 16px gap between two sections takes the page color. The gap is not a\n prop — a tunable one re-opens the drift this closes.\n\nSections **paint and position only**. They add no inline padding, because content already self-pads\nto the page gutter (`SectionHeader` and `List.Item` both inset 20px). A section that insets its own\nchildren makes them double-inset.\n\n**The page color is a separator, never a ground.** Only the gap between two sections takes it;\neverything else the body holds keeps the screen surface — the inset the body reserves for a native\nbar, bottom tab-bar clearance, the slack a short screen leaves under its last section, and\nboth over-pull edges. A grouped body gets that by painting a box that holds only the sections and\nnests inside the padded one, so no page color ever reaches the boundary of the scrolling content.\nThere is nothing to pair on the `Screen` root, and no `overscrollBottom` to set.\n\n\n\n## Body background\n\n`Screen.Body`'s scroll content is opaque so the overscroll backdrop shows only in the over-pull\nedges. To give a scrolling body a custom background (e.g. a hero→page gradient), set\n`--screen-scroll-bg` on the body — a raw `background` on the body `className` is painted over\nby the scroll content and won't show. See `PackDetailsView` for the pattern.\n\n## Design Guidelines\n\n\n\n## Props\n\n\n" }, "props": [ { "name": "safeArea", "type": "ScreenSafeArea | undefined", "declared_type": "ScreenSafeArea", "required": false, "description": "Adds safe-area insets to padding edges. Defaults to `'both'`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 18 }, "values": [ "both", "bottom", "none", "top" ], "values_complete": true, "default": "'both'", "default_kind": "source-expression" }, { "name": "scroll", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Wrap legacy children or `Screen.Body` in a scrollable container. Defaults to `true`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 20 }, "values": [ false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "surface", "type": "\"page\" | \"surface\" | undefined", "declared_type": "CdsSurface", "required": false, "description": "Background surface token. Defaults to `'page'`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 22 }, "values": [ "page", "surface" ], "values_complete": true, "default": "'page'", "default_kind": "source-expression" }, { "name": "overscrollTop", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Color continued into the top over-pull edge (pass a `var(--cds-*)` token). Defaults to the surface color.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 24 } }, { "name": "overscrollBottom", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Color continued into the bottom over-pull edge (pass a `var(--cds-*)` token). Defaults to the surface color.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 26 } }, { "name": "fill", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Fill the available height. Defaults to `true`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 28 }, "values": [ false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 29 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 30 } }, { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 31 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the screen root element; the slots carry their own.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 33 } }, { "name": "padding", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Padding on all four sides.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 10 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingX", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Horizontal padding (left + right). Overrides `padding` on the X axis.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 12 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingY", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Vertical padding (top + bottom). Overrides `padding` on the Y axis.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 14 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingTop", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Top padding. Overrides `paddingY` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 16 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingRight", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Right padding. Overrides `paddingX` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 18 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingBottom", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Bottom padding. Overrides `paddingY` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 20 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingLeft", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Left padding. Overrides `paddingX` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 22 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true } ], "prop_shapes": {}, "examples": [], "tokens": [ { "name": "--cds-space-20", "light": "20px", "dark": "20px" }, { "name": "--cds-type-h1-size", "light": "2rem", "dark": "2rem" }, { "name": "--cds-bg-page", "light": "#f3f1ed", "dark": "#141410" }, { "name": "--cds-bg-surface", "light": "#ffffff", "dark": "#1b1b18" }, { "name": "--cds-text-primary", "light": "#141410", "dark": "#f3f1ed" }, { "name": "--cds-safe-area-top-chrome", "light": "0px", "dark": "0px" }, { "name": "--cds-top-chrome-frost", "light": "0", "dark": "0" }, { "name": "--cds-feature-", "light": null, "dark": null } ], "visual_reference": { "stories": [ { "id": "cloaked-design-system-layout-screen--playground", "name": "Playground", "title": "Cloaked Design System/Layout/Screen", "exportName": "Playground", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--playground&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--no-scroll", "name": "No Scroll", "title": "Cloaked Design System/Layout/Screen", "exportName": "NoScroll", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--no-scroll&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--overscroll", "name": "Overscroll", "title": "Cloaked Design System/Layout/Screen", "exportName": "Overscroll", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--overscroll&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--surface", "name": "Surface", "title": "Cloaked Design System/Layout/Screen", "exportName": "Surface", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--surface&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--top-safe-area-only", "name": "Top Safe Area Only", "title": "Cloaked Design System/Layout/Screen", "exportName": "TopSafeAreaOnly", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--top-safe-area-only&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--bottom-safe-area-only", "name": "Bottom Safe Area Only", "title": "Cloaked Design System/Layout/Screen", "exportName": "BottomSafeAreaOnly", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--bottom-safe-area-only&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--no-safe-area", "name": "No Safe Area", "title": "Cloaked Design System/Layout/Screen", "exportName": "NoSafeArea", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--no-safe-area&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--header-body-footer", "name": "Header Body Footer", "title": "Cloaked Design System/Layout/Screen", "exportName": "HeaderBodyFooter", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--header-body-footer&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--brand-task-header", "name": "Brand Task Header", "title": "Cloaked Design System/Layout/Screen", "exportName": "BrandTaskHeader", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--brand-task-header&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--sticky-chrome-scroll", "name": "Sticky Chrome Scroll", "title": "Cloaked Design System/Layout/Screen", "exportName": "StickyChromeScroll", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--sticky-chrome-scroll&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--sticky-footer-action", "name": "Sticky Footer Action", "title": "Cloaked Design System/Layout/Screen", "exportName": "StickyFooterAction", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--sticky-footer-action&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--dark-theme", "name": "Dark Theme", "title": "Cloaked Design System/Layout/Screen", "exportName": "DarkTheme", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--dark-theme&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--sectioned", "name": "Sectioned", "title": "Cloaked Design System/Layout/Screen", "exportName": "Sectioned", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--sectioned&viewMode=story" } ], "name": "Screen", "id": "screen", "category": "Layout" }, "stories": [ { "id": "cloaked-design-system-layout-screen--playground", "name": "Playground", "title": "Cloaked Design System/Layout/Screen", "exportName": "Playground", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--playground&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--no-scroll", "name": "No Scroll", "title": "Cloaked Design System/Layout/Screen", "exportName": "NoScroll", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--no-scroll&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--overscroll", "name": "Overscroll", "title": "Cloaked Design System/Layout/Screen", "exportName": "Overscroll", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--overscroll&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--surface", "name": "Surface", "title": "Cloaked Design System/Layout/Screen", "exportName": "Surface", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--surface&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--top-safe-area-only", "name": "Top Safe Area Only", "title": "Cloaked Design System/Layout/Screen", "exportName": "TopSafeAreaOnly", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--top-safe-area-only&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--bottom-safe-area-only", "name": "Bottom Safe Area Only", "title": "Cloaked Design System/Layout/Screen", "exportName": "BottomSafeAreaOnly", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--bottom-safe-area-only&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--no-safe-area", "name": "No Safe Area", "title": "Cloaked Design System/Layout/Screen", "exportName": "NoSafeArea", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--no-safe-area&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--header-body-footer", "name": "Header Body Footer", "title": "Cloaked Design System/Layout/Screen", "exportName": "HeaderBodyFooter", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--header-body-footer&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--brand-task-header", "name": "Brand Task Header", "title": "Cloaked Design System/Layout/Screen", "exportName": "BrandTaskHeader", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--brand-task-header&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--sticky-chrome-scroll", "name": "Sticky Chrome Scroll", "title": "Cloaked Design System/Layout/Screen", "exportName": "StickyChromeScroll", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--sticky-chrome-scroll&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--sticky-footer-action", "name": "Sticky Footer Action", "title": "Cloaked Design System/Layout/Screen", "exportName": "StickyFooterAction", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--sticky-footer-action&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--dark-theme", "name": "Dark Theme", "title": "Cloaked Design System/Layout/Screen", "exportName": "DarkTheme", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--dark-theme&viewMode=story" }, { "id": "cloaked-design-system-layout-screen--sectioned", "name": "Sectioned", "title": "Cloaked Design System/Layout/Screen", "exportName": "Sectioned", "source_path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "source_digest": "25e7caf00731d59337e675e5e227da7cc346f0ab776aa4e90f550229d8af24b4", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-layout-screen--sectioned&viewMode=story" } ], "stories_source": { "path": "packages/design-system/src/components/layout/Screen/Screen.stories.tsx", "code": "import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { SAFE_AREA_OPTIONS, SPACE_OPTIONS, SURFACE_OPTIONS, selectArgType } from '../../../storybook/controlOptions';\nimport { Screen } from './Screen';\nimport {\n BrandTaskScreenContent,\n DarkScreenContent,\n HeaderBodyFooterScreenContent,\n SectionedScreenContent,\n ScreenContent,\n StickyFooterActionScreenContent,\n StickyChromeScreenContent,\n} from './Screen.stories.fixtures';\n\nconst meta: Meta = {\n title: 'Cloaked Design System/Layout/Screen',\n component: Screen,\n parameters: {\n a11y: { test: 'error' },\n layout: 'fullscreen',\n docs: {\n description: {\n component:\n 'Full-height route scaffold. Use it as the outermost element of a routed screen: it paints ' +\n 'the page surface, applies safe-area insets, and hosts sticky `Screen.Header` / `Screen.Footer` ' +\n 'chrome while `Screen.Body` owns the scroll. Reach for `Background` instead when a detail or ' +\n 'modal screen just needs a centered surface without route chrome, and use `VStack`/`HStack`/' +\n '`Grid` to lay out content inside a Screen. Compose the header from the `Screen.Header.*` ' +\n 'sub-parts: `Bar`, `Title`, `Brand`, `Task`, `BackButton`, `IconButton`, `Action`, `Progress`.',\n },\n },\n },\n args: {\n padding: 20,\n safeArea: 'both',\n surface: 'page',\n children: ,\n },\n argTypes: {\n safeArea: {\n ...selectArgType(SAFE_AREA_OPTIONS),\n description: 'Which edges add `env(safe-area-inset-*)` on top of padding. Defaults to `both`.',\n },\n surface: {\n ...selectArgType(SURFACE_OPTIONS),\n description:\n 'Background surface token painted behind the route. Defaults to `page`; use `surface` for the raised canvas.',\n },\n scroll: {\n description:\n 'Wrap legacy children / `Screen.Body` in a scroll container. Defaults to `true`; set `false` for short fixed routes.',\n },\n fill: { description: 'Fill the viewport height. Defaults to `true`.' },\n padding: { ...selectArgType(SPACE_OPTIONS), description: 'Uniform inner padding, in `--cds-space-*` steps.' },\n paddingX: {\n ...selectArgType(SPACE_OPTIONS),\n description: 'Horizontal padding override, in `--cds-space-*` steps.',\n },\n paddingY: {\n ...selectArgType(SPACE_OPTIONS),\n description: 'Vertical padding override, in `--cds-space-*` steps.',\n },\n paddingTop: { ...selectArgType(SPACE_OPTIONS), description: 'Top padding override, in `--cds-space-*` steps.' },\n paddingRight: {\n ...selectArgType(SPACE_OPTIONS),\n description: 'Right padding override, in `--cds-space-*` steps.',\n },\n paddingBottom: {\n ...selectArgType(SPACE_OPTIONS),\n description: 'Bottom padding override, in `--cds-space-*` steps.',\n },\n paddingLeft: {\n ...selectArgType(SPACE_OPTIONS),\n description: 'Left padding override, in `--cds-space-*` steps.',\n },\n overscrollTop: {\n control: 'text',\n description:\n 'Color continued into the top over-pull edge (pass a `var(--cds-*)` token). Defaults to the surface color.',\n },\n overscrollBottom: {\n control: 'text',\n description:\n 'Color continued into the bottom over-pull edge (pass a `var(--cds-*)` token). Match a full-bleed ' +\n 'footer band by passing its `var(--cds-feature--backdrop)`. Defaults to the surface color.',\n },\n },\n};\nexport default meta;\ntype Story = StoryObj;\ntype ScreenSlotStoryContent = () => React.ReactNode;\n\nconst renderScreenSlotStory = (getChildren: ScreenSlotStoryContent) => (args: React.ComponentProps) =>\n {getChildren()};\n\nexport const Playground: Story = {};\n\nexport const NoScroll: Story = {\n parameters: {\n docs: {\n description: {\n story: '`scroll={false}` for short routes that never overflow — no scroll container is created.',\n },\n },\n },\n args: {\n scroll: false,\n children: (\n \n ),\n },\n};\n\nexport const Overscroll: Story = {\n parameters: {\n docs: {\n description: {\n story:\n 'Continue an edge color into the over-pull (rubber-band) region so the bounce matches whatever ' +\n 'sits at that edge — a full-bleed footer band at the bottom, a colored hero at the top. Pass ' +\n '`var(--cds-*)` tokens; the effect is only visible while bouncing on a touch device.',\n },\n },\n },\n args: {\n overscrollBottom: 'var(--cds-feature-monitoring-backdrop)',\n children: (\n \n ),\n },\n};\n\nexport const Surface: Story = {\n parameters: {\n docs: { description: { story: 'The `surface` token for routes that need the raised canvas treatment.' } },\n },\n args: {\n surface: 'surface',\n children: (\n \n ),\n },\n};\n\nexport const TopSafeAreaOnly: Story = {\n parameters: {\n docs: { description: { story: '`safeArea=\"top\"` adds only the top device inset to the configured padding.' } },\n },\n args: {\n safeArea: 'top',\n children: ,\n },\n};\n\nexport const BottomSafeAreaOnly: Story = {\n parameters: {\n docs: {\n description: { story: '`safeArea=\"bottom\"` reserves only the home-indicator inset below the content.' },\n },\n },\n args: {\n safeArea: 'bottom',\n children: (\n \n ),\n },\n};\n\nexport const NoSafeArea: Story = {\n parameters: {\n docs: {\n description: {\n story: '`safeArea=\"none\"` opts out of insets entirely — for embedded or non-full-bleed routes.',\n },\n },\n },\n args: {\n safeArea: 'none',\n children: ,\n },\n};\n\nexport const HeaderBodyFooter: Story = {\n parameters: {\n docs: {\n description: {\n story:\n 'A full route: sticky `Screen.Header` chrome (`Bar`, `BackButton`, `Title`, `IconButton`, ' +\n '`Progress`), a scrolling `Screen.Body`, and a sticky `Screen.Footer` action.',\n },\n },\n },\n args: { padding: 20 },\n render: renderScreenSlotStory(HeaderBodyFooterScreenContent),\n};\n\nexport const BrandTaskHeader: Story = {\n parameters: {\n docs: {\n description: {\n story:\n 'Partner-flow chrome: `Screen.Header.Brand` renders the app wordmark and `Screen.Header.Task` ' +\n 'pairs a partner mark with the active task label.',\n },\n },\n },\n args: { padding: 20 },\n render: renderScreenSlotStory(BrandTaskScreenContent),\n};\n\nexport const StickyChromeScroll: Story = {\n parameters: {\n docs: {\n description: { story: 'The header and footer stay pinned while `Screen.Body` scrolls independently.' },\n },\n },\n args: { padding: 20 },\n render: renderScreenSlotStory(StickyChromeScreenContent),\n};\n\nexport const StickyFooterAction: Story = {\n parameters: {\n docs: { description: { story: 'A long body scrolls under a persistent primary action in `Screen.Footer`.' } },\n },\n args: { padding: 20 },\n render: renderScreenSlotStory(StickyFooterActionScreenContent),\n};\n\nexport const DarkTheme: Story = {\n args: { padding: 20 },\n render: renderScreenSlotStory(DarkScreenContent),\n globals: { theme: 'dark' },\n};\n\nexport const Sectioned: Story = {\n parameters: {\n docs: {\n description: {\n story:\n '`Screen.Body layout=\"grouped\"` drops the body gutter and gaps its children, so a stack of ' +\n '`Screen.Section` slabs reads as one surface split by page-colored separators. Sections paint and ' +\n 'position only — `SectionHeader` and `List.Item` already self-pad to the page gutter. Only the gap ' +\n 'between two sections takes the page color; everything else the body holds keeps the screen surface.',\n },\n },\n },\n args: { surface: 'surface', safeArea: 'both' },\n render: renderScreenSlotStory(SectionedScreenContent),\n};\n" }, "links": { "human": "/component-screen", "json": "/data/components/screen.json", "markdown": "/data/components/screen.md", "storybook": "/storybook/?path=/story/cloaked-design-system-layout-screen--playground" }, "contract_status": "preview", "contract_kind": "source-derived", "approval": "required", "api": { "method": "typescript-type-checker", "typescript_version": "5.9.3", "public_export": "Screen", "public_path": "Screen", "import_path": "@cloakedinc/design-system", "root_kind": "component", "entrypoints": [ { "name": "Screen", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenRoot/ScreenRoot.tsx", "line": 17 }, "props_type": "ScreenProps", "props": [ { "name": "safeArea", "type": "ScreenSafeArea | undefined", "declared_type": "ScreenSafeArea", "required": false, "description": "Adds safe-area insets to padding edges. Defaults to `'both'`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 18 }, "values": [ "both", "bottom", "none", "top" ], "values_complete": true, "default": "'both'", "default_kind": "source-expression" }, { "name": "scroll", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Wrap legacy children or `Screen.Body` in a scrollable container. Defaults to `true`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 20 }, "values": [ false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "surface", "type": "\"page\" | \"surface\" | undefined", "declared_type": "CdsSurface", "required": false, "description": "Background surface token. Defaults to `'page'`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 22 }, "values": [ "page", "surface" ], "values_complete": true, "default": "'page'", "default_kind": "source-expression" }, { "name": "overscrollTop", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Color continued into the top over-pull edge (pass a `var(--cds-*)` token). Defaults to the surface color.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 24 } }, { "name": "overscrollBottom", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Color continued into the bottom over-pull edge (pass a `var(--cds-*)` token). Defaults to the surface color.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 26 } }, { "name": "fill", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Fill the available height. Defaults to `true`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 28 }, "values": [ false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 29 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 30 } }, { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 31 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the screen root element; the slots carry their own.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 33 } }, { "name": "padding", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Padding on all four sides.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 10 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingX", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Horizontal padding (left + right). Overrides `padding` on the X axis.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 12 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingY", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Vertical padding (top + bottom). Overrides `padding` on the Y axis.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 14 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingTop", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Top padding. Overrides `paddingY` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 16 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingRight", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Right padding. Overrides `paddingX` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 18 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingBottom", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Bottom padding. Overrides `paddingY` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 20 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingLeft", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Left padding. Overrides `paddingX` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 22 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "Screen.Header", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenSlots/ScreenSlots.tsx", "line": 31 }, "props_type": "ScreenHeaderProps", "props": [ { "name": "safeArea", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Adds top safe-area inset. Defaults to the parent `Screen.safeArea`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 48 }, "values": [ false, true ], "values_complete": true }, { "name": "inset", "type": "\"activity\" | undefined", "declared_type": "ScreenHeaderInset", "required": false, "description": "Presentation inset for a header that stands in for a navigation bar.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 50 }, "values": [ "activity" ], "values_complete": true }, { "name": "sticky", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Keeps the header visible above the body scroller. Defaults to `true`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 52 }, "values": [ false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 53 } }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 54 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 55 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the `
` element; chrome inside it takes its own.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 57 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "Screen.Header.Bar", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenHeaderChrome/ScreenHeaderChrome.tsx", "line": 24 }, "props_type": "ScreenHeaderBarProps", "props": [ { "name": "justify", "type": "ScreenHeaderJustify | undefined", "declared_type": "ScreenHeaderJustify", "required": false, "description": "Horizontal distribution for header chrome.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 127 }, "values": [ "between", "end", "start" ], "values_complete": true, "default": "'between'", "default_kind": "source-expression" }, { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 128 } }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 129 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 130 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the row element; chrome inside it takes its own.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 132 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "Screen.Header.Brand", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenHeaderChrome/ScreenHeaderChrome.tsx", "line": 193 }, "props_type": "ScreenHeaderBrandProps", "props": [ { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": true, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 247 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the brand mark wrapper, not the node passed as `children`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 249 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "Screen.Header.Title", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenHeaderChrome/ScreenHeaderChrome.tsx", "line": 36 }, "props_type": "ScreenHeaderTitleProps", "props": [ { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": true, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 140 } }, { "name": "as", "type": "\"h1\" | \"h2\" | \"h3\" | undefined", "declared_type": "'h1' | 'h2' | 'h3'", "required": false, "description": "Optional heading level. Defaults to `h1`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 142 }, "values": [ "h1", "h2", "h3" ], "values_complete": true, "default": "'h1'", "default_kind": "source-expression" }, { "name": "variant", "type": "\"h4\" | \"h5\" | undefined", "declared_type": "'h4' | 'h5'", "required": false, "description": "Type ramp entry. Defaults to `'h4'`; `'h5'` matches the native iOS bar's `.font(.headline)`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 144 }, "values": [ "h4", "h5" ], "values_complete": true, "default": "'h4'", "default_kind": "source-expression" }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the heading element; nothing derives from it.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 146 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "Screen.Header.Action", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenHeaderChrome/ScreenHeaderChrome.tsx", "line": 47 }, "props_type": "ScreenHeaderActionProps", "props": [ { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": true, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 153 } }, { "name": "onPress", "type": "(() => void | boolean) | undefined", "declared_type": "() => void | boolean", "required": false, "description": "Called when the action is pressed. Return `false` to suppress the `safeBack` fallback.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 155 } }, { "name": "safeBack", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Treat this action as a back affordance: if the header is still mounted after the transition,\nrun `fallback`. Use on a text action (\"Cancel\", \"Done\") that is a screen's only way out.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 160 }, "values": [ false, true ], "values_complete": true, "default": "false", "default_kind": "source-expression" }, { "name": "fallback", "type": "(() => void) | undefined", "declared_type": "() => void", "required": false, "description": "Last-resort fallback when `safeBack` is set and the header remains mounted.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 162 }, "default": "reloadToRoot", "default_kind": "source-expression" }, { "name": "fallbackDelayMs", "type": "number | undefined", "declared_type": "number", "required": false, "description": "Delay before the `safeBack` check. Defaults to the Stackflow transition plus buffer.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 164 }, "default": "SAFE_BACK_FALLBACK_DELAY", "default_kind": "source-expression" }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback for successful presses. Defaults to `true` (`light`).", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 166 }, "values": [ "error", "heavy", "light", "medium", "selection", "success", "warning", false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "testIdRoot", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Header test ID root used to derive `${testIdRoot}-${slot}`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 168 } }, { "name": "slot", "type": "\"right-action\" | undefined", "declared_type": "ScreenHeaderActionSlot", "required": false, "description": "Header action slot used for derived test IDs.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 170 }, "values": [ "right-action" ], "values_complete": true }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the action element. Overrides the `${testIdRoot}-${slot}` derivation.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 172 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "Screen.Header.BackButton", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenHeaderChrome/ScreenHeaderChrome.tsx", "line": 133 }, "props_type": "ScreenHeaderBackButtonProps", "props": [ { "name": "onBack", "type": "() => void | boolean", "declared_type": "() => void | boolean", "required": true, "description": "Called when the back button is pressed. Return `false` to suppress the fallback.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 201 } }, { "name": "fallback", "type": "(() => void) | undefined", "declared_type": "() => void", "required": false, "description": "Last-resort fallback when the header remains mounted after the back transition.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 203 }, "default": "reloadToRoot", "default_kind": "source-expression" }, { "name": "fallbackDelayMs", "type": "number | undefined", "declared_type": "number", "required": false, "description": "Delay before the fallback check. Defaults to the Stackflow transition plus buffer.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 205 }, "default": "SAFE_BACK_FALLBACK_DELAY", "default_kind": "source-expression" }, { "name": "label", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Accessible action label. Defaults to `Back`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 207 }, "default": "'Back'", "default_kind": "source-expression" }, { "name": "glyph", "type": "\"arrow-left\" | \"close\" | undefined", "declared_type": "Extract", "required": false, "description": "Mark the back affordance draws. Defaults to `arrow-left`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 209 }, "values": [ "arrow-left", "close" ], "values_complete": true, "default": "'arrow-left'", "default_kind": "source-expression" }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback for successful presses. Defaults to `true` (`light`).", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 211 }, "values": [ "error", "heavy", "light", "medium", "selection", "success", "warning", false, true ], "values_complete": true }, { "name": "testIdRoot", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Header test ID root used to derive `${testIdRoot}-back`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 213 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the back button. Overrides the `${testIdRoot}-back` derivation.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 215 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "Screen.Header.IconButton", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenHeaderChrome/ScreenHeaderChrome.tsx", "line": 91 }, "props_type": "ScreenHeaderIconButtonProps", "props": [ { "name": "icon", "type": "React.ReactElement>", "declared_type": "React.ReactElement", "required": true, "description": "Icon element to render inside the header action.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 181 } }, { "name": "label", "type": "string", "declared_type": "string", "required": true, "description": "Accessible action label.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 183 } }, { "name": "onPress", "type": "(() => void) | undefined", "declared_type": "() => void", "required": false, "description": "Called when pressed. Without it the icon renders as a static mark, not a button.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 185 } }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback for successful presses. Defaults to `true` (`light`).", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 187 }, "values": [ "error", "heavy", "light", "medium", "selection", "success", "warning", false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "testIdRoot", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Header test ID root used to derive `${testIdRoot}-${slot}`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 189 } }, { "name": "slot", "type": "ScreenHeaderIconButtonSlot | undefined", "declared_type": "ScreenHeaderIconButtonSlot", "required": false, "description": "Header icon slot used for derived test IDs.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 191 }, "values": [ "back", "right-action" ], "values_complete": true }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the icon element. Overrides the `${testIdRoot}-${slot}` derivation.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 193 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "Screen.Header.Progress", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenHeaderChrome/ScreenHeaderChrome.tsx", "line": 161 }, "props_type": "ScreenHeaderProgressProps", "props": [ { "name": "activeSegment", "type": "number | undefined", "declared_type": "number", "required": false, "description": "1-based; every segment up to and including it renders filled. Defaults to `1`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 223 }, "default": "1", "default_kind": "source-expression" }, { "name": "totalSegments", "type": "number", "declared_type": "number", "required": true, "description": "How many segments to render; values below `1` are treated as `1`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 225 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the segment row. The segments themselves are hidden from assistive tech.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 227 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "Screen.Header.Task", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenHeaderChrome/ScreenHeaderChrome.tsx", "line": 178 }, "props_type": "ScreenHeaderTaskProps", "props": [ { "name": "brand", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Brand/avatar mark.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 236 } }, { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": true, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 237 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the task row, covering both the mark and the label.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 239 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "Screen.Body", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenSlots/ScreenSlots.tsx", "line": 55 }, "props_type": "ScreenBodyProps", "props": [ { "name": "scroll", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Wrap body children in a scrollable region. Defaults to the parent `Screen.scroll`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 66 }, "values": [ false, true ], "values_complete": true }, { "name": "layout", "type": "ScreenBodyLayout | undefined", "declared_type": "ScreenBodyLayout", "required": false, "description": "`'grouped'` renders `Screen.Section` slabs edge to edge. Defaults to `'solid'`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 68 }, "values": [ "grouped", "solid" ], "values_complete": true, "default": "'solid'", "default_kind": "source-expression" }, { "name": "safeArea", "type": "ScreenSafeArea | undefined", "declared_type": "ScreenSafeArea", "required": false, "description": "Adds safe-area insets to body padding. Defaults to `'none'`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 70 }, "values": [ "both", "bottom", "none", "top" ], "values_complete": true, "default": "'none'", "default_kind": "source-expression" }, { "name": "bleedUnderTopChrome", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Runs content under chrome the host draws over the web view, instead of clearing it. For a body\nwhose top edge is already spoken for: a hero that bleeds to it, a scroller the body does not\nown, or an in-flow `Screen.Header` above it. Everything else wants the default, which insets by\nthe host's chrome and supersedes the top edge of `safeArea`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 77 }, "values": [ false, true ], "values_complete": true, "default": "false", "default_kind": "source-expression" }, { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 78 } }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 79 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "Inline style override. When `scroll` is true this lands on the scroll container, not the\npadded inner scroll-content — so a `padding*` here has no effect; use the padding props.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 84 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the `
` element, which is the scroll container when `scroll` is true.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 86 } }, { "name": "padding", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Padding on all four sides.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 10 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingX", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Horizontal padding (left + right). Overrides `padding` on the X axis.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 12 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingY", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Vertical padding (top + bottom). Overrides `padding` on the Y axis.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 14 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingTop", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Top padding. Overrides `paddingY` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 16 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingRight", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Right padding. Overrides `paddingX` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 18 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingBottom", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Bottom padding. Overrides `paddingY` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 20 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingLeft", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Left padding. Overrides `paddingX` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 22 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "Screen.Section", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenSlots/ScreenSlots.tsx", "line": 109 }, "props_type": "ScreenSectionProps", "props": [ { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 93 } }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 94 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 95 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the `
` element; nothing derives from it.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 97 } }, { "name": "padding", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Padding on all four sides.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 10 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingX", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Horizontal padding (left + right). Overrides `padding` on the X axis.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 12 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingY", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Vertical padding (top + bottom). Overrides `padding` on the Y axis.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 14 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingTop", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Top padding. Overrides `paddingY` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 16 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingRight", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Right padding. Overrides `paddingX` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 18 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingBottom", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Bottom padding. Overrides `paddingY` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 20 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true }, { "name": "paddingLeft", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Left padding. Overrides `paddingX` and `padding`.", "source": { "path": "packages/design-system/src/components/layout/resolvePadding.ts", "line": 22 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "Screen.Footer", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/layout/Screen/ScreenSlots/ScreenSlots.tsx", "line": 123 }, "props_type": "ScreenFooterProps", "props": [ { "name": "safeArea", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Adds bottom safe-area inset. Defaults to the parent `Screen.safeArea`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 106 }, "values": [ false, true ], "values_complete": true }, { "name": "sticky", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Keeps the footer visible below the body scroller. Defaults to `true`.", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 108 }, "values": [ false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 109 } }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 110 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/layout/Screen/types.ts", "line": 111 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Selector for the `