ScrollArea

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: ScrollArea  tag: wyrd-scroll-area  package: wyrd.component.scroll-area  title: Scroll Area  summary: Bounded workbench viewport with native scrolling and token-styled scrollbars.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: layout  composition: single-slot  interactive: truetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: label      type:        kind: string      required: true      reflects: false      serializable: true      summary: Meaningful accessible name for the scrollable region.    - name: orientation      type:        kind: enum        values:          - vertical          - horizontal          - both      required: false      default: vertical      reflects: true      serializable: true      summary: Axes on which native overflow scrolling is enabled.  slots:    - name: content      content: true      required: true      cardinality: one-or-many      accepts:        - content        - component      summary: Content contained by the bounded viewport.  events: []  states:    - name: default      source: platform      summary: Vertically scrollable viewport.    - name: horizontal      source: property      summary: Horizontally scrollable viewport.    - name: both      source: property      summary: Viewport scrollable on both axes.    - name: focus-visible      source: platform      summary: Keyboard-visible focus on the scrollable region.  parts:    - name: root      summary: Focusable, labelled scroll viewport.      slots:        - content  tokens:    scrollbar:      thumb-color: color.outline      track-color: color.surface      thickness: 8px      radius: rounded.fullmessages: []obligations:  accessibility:    role: region    name: Label property provides the required accessible name.    keyboard:      - Tab reaches the scrollable region even when its content has no focusable descendants.      - Platform scrolling keys scroll the focused region using native behavior.    semantics:      - Web projections set role=region, tabindex=0, and aria-label from the required label property.      - Flutter exposes a labelled, focusable semantics container around the native scrollable.      - The accessible name must be meaningful and unique within the page or view.  behavior:    model: stateless    interactions:      - Scrolling uses platform-native overflow and input handling; implementations do not simulate scrolling with pointer or wheel JavaScript.      - Orientation enables vertical overflow, horizontal overflow, or both axes.      - Horizontal scrolling and scrollbar placement follow the resolved text direction.    hostEffects: []  conditions:    - rtl    - density-compact    - text-expansion  sdui:    status: blocked    serializableProperties: []    serializableSlots: []    eventBindings: []    notes: Scroll Area is workbench chrome, not a Layout DSL node; native viewport behavior and host sizing remain implementation concerns.examples:  - name: vertical-pane    state: default    properties:      label: Project files      orientation: vertical    slots:      content: design-system | catalog | studio | website | brand | product | references | worktrees  - name: horizontal-timeline    state: horizontal    properties:      label: Timeline      orientation: horizontal    slots:      content: Discover | Specify | Build | Validate | Publish | Observe | Refine  - name: canvas    state: both    properties:      label: Diagram canvas      orientation: both    slots:      content: Tokens | Contracts | Runtime | React | Flutter | Studio | Documentation | Validationoverrides:  react:    slots:      content: children  flutter:    slots:      content: child