[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-microsoft-reactor-design":3,"mdc-pdiesn-key":39,"related-repo-microsoft-reactor-design":9997,"related-org-microsoft-reactor-design":10019},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":28,"repoUrl":29,"updatedAt":30,"license":31,"forks":32,"topics":33,"repo":34,"sourceUrl":37,"mdContent":38},"reactor-design","design Windows 11 user interfaces with Reactor","Windows 11 design rules for Reactor — theme tokens, High Contrast, typography (`Heading`\u002F`SubHeading`\u002F`Caption`), 4px grid, acrylic surfaces, accessibility, animation, and a code-review checklist. Use when authoring, reviewing, or fixing visual styling.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"microsoft","Microsoft","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmicrosoft.png",[12,16,19,22,25],{"name":13,"slug":14,"type":15},"Accessibility","accessibility","tag",{"name":17,"slug":18,"type":15},"Windows","windows",{"name":20,"slug":21,"type":15},"Animation","animation",{"name":23,"slug":24,"type":15},"UI Components","ui-components",{"name":26,"slug":27,"type":15},"Design","design",591,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fmicrosoft-ui-reactor","2026-07-31T05:54:53.086222",null,39,[],{"repoUrl":29,"stars":28,"forks":32,"topics":35,"description":36},[],"Reactor is an experimental set of extensions to WinUI","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fmicrosoft-ui-reactor\u002Ftree\u002FHEAD\u002Fplugins\u002Freactor\u002Fskills\u002Freactor-design","---\nname: reactor-design\ndescription: \"Windows 11 design rules for Reactor — theme tokens, High Contrast, typography (`Heading`\u002F`SubHeading`\u002F`Caption`), 4px grid, acrylic surfaces, accessibility, animation, and a code-review checklist. Use when authoring, reviewing, or fixing visual styling.\"\n---\n\n# Windows 11 Design for Reactor\n\nAuthor, review, and fix Reactor UI code following Windows 11 design system rules.\n\nReactor is a functional UI framework for WinUI 3 that builds UI entirely in C# — no XAML, no data binding, no ViewModels. UI is described with immutable Element records, composed via bare factory methods imported with `using static Microsoft.UI.Reactor.Factories` (`TextBlock(...)`, `VStack(...)`, etc.), and updated through a React-style reconciler with hooks (`UseState`, `UseEffect`, etc.).\n\n\n> **Controlled prop note:** when design examples use inputs such as\n> `TextBox(value, setValue)` or `Slider(value, ...)`, the factory keeps the\n> simple call-site shape. Direct element-record reads of controlled props now\n> return `Optional\u003CT>`; use `.GetValueOrDefault(...)` or `.Value`. See\n> [`migration\u002F050-optional-t.md`](..\u002F..\u002F..\u002F..\u002Fdocs\u002Fguide\u002Fmigration\u002F050-optional-t.md).\n\nThis skill translates the Windows 11 design language into Reactor's C# projection so that apps built with Reactor look, feel, and behave like first-class Windows 11 applications.\n\n## Workflow\n\n1. Author new Reactor UI using the rules below.\n2. Review a PR using the checklist at the end of this file.\n3. Fix feedback by mapping issues to the specific rule and applying the correct pattern.\n4. Verify changes using the testing guidance.\n\n## Quick Scan Checklist\n\nCheck these areas early in every review:\n- Theme tokens used for all colors — no hardcoded hex strings for themed surfaces.\n- High Contrast works — no opacity, no accent colors, only system color brushes.\n- Typography uses `Heading()`, `SubHeading()`, `Caption()`, or WinUI style tokens — not raw `FontSize`\u002F`FontWeight`.\n- Layout values use the 4px grid.\n- Text scaling and localization are safe — no fixed heights on text containers.\n- Shadows have elevation (`Translation(0, 0, 32)`).\n- Acrylic surfaces use correct background + border pairings.\n- `AutomationName()` set on icon-only controls.\n- Keys set on list items for stable reconciliation.\n\n## Core Rules (Always Apply)\n\n### 1. Theming Is the Primary Lens\n\nUse `Theme.*` tokens for all colors and brushes. Never hardcode hex colors for themed surfaces.\n\n```csharp\n\u002F\u002F Correct: theme tokens\nTextBlock(\"Hello\").Foreground(Theme.PrimaryText)\nBorder(child).Background(Theme.CardBackground)\nButton(\"Action\").Background(Theme.Accent)\n\n\u002F\u002F Wrong: hardcoded colors on themed surfaces\nTextBlock(\"Hello\").Foreground(\"#000000\")\nBorder(child).Background(\"#FFFFFF\")\n```\n\nHardcoded colors are acceptable only for:\n- One-off decorative elements that intentionally ignore theming (e.g., brand logos)\n- Explicit hit-test targets (`Background(\"#00000000\")` for transparent hit areas)\n\n#### Theme Token Reference\n\n> ⚠️ **`Theme.Error`, `Theme.Success`, `Theme.Warning`, `Theme.ErrorText` do NOT exist.**\n> Use `Theme.SystemCritical` (red\u002Ferror), `Theme.SystemSuccess` (green), `Theme.SystemCaution` (yellow).\n\n**Text:**\n\n| Token | WinUI Resource | Purpose |\n|-------|---------------|---------|\n| `Theme.PrimaryText` | `TextFillColorPrimaryBrush` | Primary body text, titles, and labels |\n| `Theme.SecondaryText` | `TextFillColorSecondaryBrush` | Captions, subtitles, and supplementary info |\n| `Theme.TertiaryText` | `TextFillColorTertiaryBrush` | Placeholder text and disabled secondary content |\n| `Theme.DisabledText` | `TextFillColorDisabledBrush` | Text in disabled controls or inactive states |\n| `Theme.AccentText` | `AccentTextFillColorPrimaryBrush` | Hyperlinks, accent-colored labels, and interactive text |\n\n**Accent fill:**\n\n| Token | WinUI Resource | Purpose |\n|-------|---------------|---------|\n| `Theme.Accent` | `AccentFillColorDefaultBrush` | Primary accent buttons and controls at rest |\n| `Theme.AccentSecondary` | `AccentFillColorSecondaryBrush` | Accent button hover state |\n| `Theme.AccentTertiary` | `AccentFillColorTertiaryBrush` | Accent button pressed state |\n| `Theme.AccentDisabled` | `AccentFillColorDisabledBrush` | Disabled accent controls |\n\n**Control fill:**\n\n| Token | WinUI Resource | Purpose |\n|-------|---------------|---------|\n| `Theme.ControlFill` | `ControlFillColorDefaultBrush` | Default rest state for standard controls |\n| `Theme.ControlFillSecondary` | `ControlFillColorSecondaryBrush` | Hover state of standard controls |\n| `Theme.ControlFillTertiary` | `ControlFillColorTertiaryBrush` | Pressed state of standard controls |\n| `Theme.ControlFillDisabled` | `ControlFillColorDisabledBrush` | Disabled state of standard controls |\n| `Theme.ControlFillInputActive` | `ControlFillColorInputActiveBrush` | Active\u002Ffocused text input field backgrounds |\n\n**Surfaces & backgrounds:**\n\n| Token | WinUI Resource | Purpose |\n|-------|---------------|---------|\n| `Theme.SolidBackground` | `SolidBackgroundFillColorBaseBrush` | App and page-level background (base layer) |\n| `Theme.CardBackground` | `CardBackgroundFillColorDefaultBrush` | Card and elevated surface backgrounds |\n| `Theme.LayerFill` | `LayerFillColorDefaultBrush` | Flyout, dialog, and pane backgrounds |\n| `Theme.SubtleFill` | `SubtleFillColorSecondaryBrush` | Subtle control highlights and section backgrounds |\n| `Theme.SmokeFill` | `SmokeFillColorDefaultBrush` | Semi-transparent overlay behind modal dialogs |\n\n**Stroke & border:**\n\n| Token | WinUI Resource | Purpose |\n|-------|---------------|---------|\n| `Theme.CardStroke` | `CardStrokeColorDefaultBrush` | Borders on cards and elevated containers |\n| `Theme.SurfaceStroke` | `SurfaceStrokeColorDefaultBrush` | Borders on flyouts, dialogs, and pane surfaces |\n| `Theme.DividerStroke` | `DividerStrokeColorDefaultBrush` | Horizontal or vertical dividers between content |\n| `Theme.ControlStroke` | `ControlStrokeColorDefaultBrush` | Borders on interactive controls at rest |\n| `Theme.ControlStrokeSecondary` | `ControlStrokeColorSecondaryBrush` | Bottom edge of controls for depth effect |\n\n**System signal:**\n\n| Token | WinUI Resource | Purpose |\n|-------|---------------|---------|\n| `Theme.SystemAttention` | `SystemFillColorAttentionBrush` | Informational indicators and badges |\n| `Theme.SystemSuccess` | `SystemFillColorSuccessBrush` | Success states and confirmations |\n| `Theme.SystemCaution` | `SystemFillColorCautionBrush` | Warning states and cautionary indicators |\n| `Theme.SystemCritical` | `SystemFillColorCriticalBrush` | Error states and critical alerts |\n| `Theme.SystemNeutral` | `SystemFillColorNeutralBrush` | Neutral status indicators |\n| `Theme.SystemSolidNeutral` | `SystemFillColorSolidNeutralBrush` | Solid neutral fill for icons and non-text indicators |\n\n**System signal backgrounds:**\n\n| Token | WinUI Resource | Purpose |\n|-------|---------------|---------|\n| `Theme.SystemAttentionBackground` | `SystemFillColorAttentionBackgroundBrush` | Background for attention\u002Finfo banners |\n| `Theme.SystemSuccessBackground` | `SystemFillColorSuccessBackgroundBrush` | Background for success banners and info bars |\n| `Theme.SystemCautionBackground` | `SystemFillColorCautionBackgroundBrush` | Background for warning banners and info bars |\n| `Theme.SystemCriticalBackground` | `SystemFillColorCriticalBackgroundBrush` | Background for error banners and info bars |\n| `Theme.SystemNeutralBackground` | `SystemFillColorNeutralBackgroundBrush` | Background for neutral status banners |\n| `Theme.SystemSolidAttention` | `SystemFillColorSolidAttentionBackgroundBrush` | Solid background for high-contrast attention surfaces |\n\nFor any WinUI resource not exposed as a named token, use `Theme.Ref(\"ResourceKeyBrush\")`.\n\n#### Custom Theme Resource References\n\n```csharp\n\u002F\u002F Reference any WinUI resource by key\nBorder(child).Background(Theme.Ref(\"AcrylicBackgroundFillColorDefaultBrush\"))\nBorder(child).WithBorder(Theme.Ref(\"SurfaceStrokeColorFlyoutBrush\"), 1)\n```\n\n#### Per-Subtree Theme Override\n\nForce a subtree to a specific theme variant:\n\n```csharp\n\u002F\u002F Sidebar always renders in dark theme\nVStack(sidebarContent).RequestedTheme(ElementTheme.Dark)\n```\n\nSee [theme-aware-resources.md](design-docs\u002Ftheme-aware-resources.md) for full token list and pairing rules.\n\n### 2. Lightweight Styling (Per-Control Resource Overrides)\n\nOverride control template resources using `.Resources()` to customize visual states without replacing the entire template:\n\n```csharp\n\u002F\u002F Correct: override button resources for a subtle button\nButton(\"Action\", onClick).Resources(r => r\n    .Set(\"ButtonBackground\", Theme.SubtleFill)\n    .Set(\"ButtonBackgroundPointerOver\", Theme.Ref(\"SubtleFillColorSecondaryBrush\"))\n    .Set(\"ButtonBackgroundPressed\", Theme.Ref(\"SubtleFillColorTertiaryBrush\"))\n    .Set(\"ButtonBorderBrush\", Theme.SubtleFill)\n    .Set(\"ButtonBorderBrushPointerOver\", Theme.SubtleFill)\n    .Set(\"ButtonBorderBrushPressed\", Theme.SubtleFill))\n\n\u002F\u002F Wrong: setting Background directly — loses hover\u002Fpressed\u002Fdisabled states\nButton(\"Action\", onClick).Background(Theme.SubtleFill)\n```\n\nResource keys target the `SolidColorBrush` resource (ending in `Brush`), not the `Color`.\n\n```csharp\n\u002F\u002F Correct\n.Set(\"ButtonBackground\", Theme.Ref(\"ControlFillColorDefaultBrush\"))\n\n\u002F\u002F Wrong — Color, not Brush\n.Set(\"ButtonBackground\", Theme.Ref(\"ControlFillColorDefault\"))\n```\n\n### 3. High Contrast Rules (Strict)\n\nHigh Contrast users rely on a fixed set of 8 system color brushes. Your UI must work with these constraints.\n\n**Allowed HC system brushes:**\n\n| Brush | Purpose |\n|-------|---------|\n| `SystemColorWindowTextColorBrush` | Text on window background |\n| `SystemColorWindowColorBrush` | Window\u002Fcontent background |\n| `SystemColorHighlightTextColorBrush` | Selected text foreground |\n| `SystemColorHighlightColorBrush` | Selection\u002Fhover background |\n| `SystemColorButtonTextColorBrush` | Button text |\n| `SystemColorButtonFaceColorBrush` | Button background |\n| `SystemColorGrayTextColorBrush` | Disabled\u002Finactive text |\n| `SystemColorHotlightColorBrush` | Hyperlinks |\n\n**HC color pairings:**\n\n| Background | Foreground | Use Case |\n|------------|------------|----------|\n| `SystemColorWindowColor` | `SystemColorWindowTextColor` | General content |\n| `SystemColorHighlightColor` | `SystemColorHighlightTextColor` | Selected\u002Fhover states |\n| `SystemColorButtonFaceColor` | `SystemColorButtonTextColor` | Buttons |\n| `SystemColorWindowColor` | `SystemColorGrayTextColor` | Disabled content |\n| `SystemColorWindowColor` | `SystemColorHotlightColor` | Hyperlinks |\n\n**Rules:**\n- No hardcoded colors in HC mode.\n- No opacity on elements or brushes in HC — encode translucency in the alpha channel for Light\u002FDark only.\n- No accent colors or regular WinUI brushes in HC.\n- No gradient animations in HC — use a single system brush.\n- Use 2px border thickness for flyouts, dialogs, and cards in HC.\n- **No partial theme updates** — when changing Light\u002FDark visual resources via `.Resources()`, include matching HC-safe values in the same change. Don't leave HC untested.\n- **Interactive containers in HC need a highlight border** — for clickable cards or list items, add a `SystemColorHighlightColor` border in HC to indicate interactivity.\n- **Empty HC dictionary is valid** — when `.Resources()` overrides target only Light\u002FDark and WinUI defaults already satisfy accessibility, you don't need to add HC-specific overrides.\n- Set `HighContrastAdjustment` at app level to prevent system overrides:\n  ```csharp\n  Application.Current.HighContrastAdjustment = ApplicationHighContrastAdjustment.None;\n  ```\n\nUsing `Theme.*` tokens correctly means HC usually \"just works\" because WinUI resolves them to appropriate system colors. Test to verify.\n\n### 4. Typography Must Use Semantic Styles\n\nUse the predefined text factories or WinUI style tokens. Never set `FontSize` and `FontWeight` directly for standard UI text.\n\n**Reactor text factories:**\n\n| Factory | Size | Weight | Use Case |\n|---------|------|--------|----------|\n| `Caption(\"text\")` | 12px | Regular | Small labels, timestamps |\n| `TextBlock(\"text\")` | 14px | Regular | Default body text |\n| `Body(\"text\")` | 14px | Regular | WinUI `BodyTextBlockStyle` body text |\n| `BodyStrong(\"text\")` | 14px | Semibold | Emphasized inline labels |\n| `BodyLarge(\"text\")` | 18px | Regular | Prominent body text |\n| `Subtitle(\"text\")` | 20px | Semibold | WinUI `SubtitleTextBlockStyle` — section headings |\n| `SubHeading(\"text\")` | 20px | 600 | Section headers, card titles (Reactor preset) |\n| `Title(\"text\")` | 28px | Semibold | WinUI `TitleTextBlockStyle` — page titles |\n| `Heading(\"text\")` | 28px | 700 | Page titles (Reactor preset, slightly heavier) |\n\nThe `Title`\u002F`Subtitle`\u002F`Body`\u002F`BodyStrong`\u002F`BodyLarge` factories map 1:1 to\nWinUI's named TextBlock styles (Spec 039 §17.6). Prefer them when matching\nWinUI design specs; the `Heading`\u002F`SubHeading` factories are the older\nReactor presets and remain valid.\n\n**Font weight helpers:**\n\n| Helper | Weight | Use Case |\n|--------|--------|----------|\n| `.SemiBold()` | 600 | Emphasized body text, inline labels, field headers |\n| `.Bold()` | 700 | Reserved for `Heading()` page titles — avoid elsewhere |\n\n```csharp\nTextBlock(\"Important label\").SemiBold()\nTextBlock(\"Page Title\").Bold()\n```\n\n**WinUI type ramp (via `.ApplyStyle()`):**\n\n| Style | Size | Weight | Recommendation |\n|-------|------|--------|----------------|\n| `CaptionTextBlockStyle` | 12px | Regular | Secondary labels, timestamps, footnotes |\n| `BodyTextBlockStyle` | 14px | Regular | Default body text, paragraphs, descriptions |\n| `BodyStrongTextBlockStyle` | 14px | Semibold | Emphasized body text, inline labels |\n| `BodyLargeTextBlockStyle` | 18px | Regular | Prominent body text |\n| `SubtitleTextBlockStyle` | 20px | Semibold | Section headings, card group labels |\n| `TitleTextBlockStyle` | 28px | Semibold | Page titles, dialog headings |\n| `TitleLargeTextBlockStyle` | 40px | Semibold | Primary page titles on feature pages |\n| `DisplayTextBlockStyle` | 68px | Semibold | Hero banners — one per page at most |\n\nFor sizes not covered by the factories, use `.ApplyStyle()` to apply WinUI text block styles. This sets size, weight, line height, and optical sizing in one call:\n\n```csharp\n\u002F\u002F Preferred: .ApplyStyle() for WinUI styles\nTextBlock(\"Title\").ApplyStyle(\"TitleTextBlockStyle\")\nTextBlock(\"Subtitle\").ApplyStyle(\"SubtitleTextBlockStyle\")\nTextBlock(\"Body Strong\").ApplyStyle(\"BodyStrongTextBlockStyle\")\nTextBlock(\"Caption\").ApplyStyle(\"CaptionTextBlockStyle\")\n\n\u002F\u002F Also correct: use the Reactor factories for common sizes\nHeading(\"Page Title\")\nSubHeading(\"Section\")\nCaption(\"Fine print\")\n\n\u002F\u002F Escape hatch: .Set() for styles not exposed via .ApplyStyle()\nTextBlock(\"Prominent text\").Set(tb => tb.Style =\n    (Style)Application.Current.Resources[\"BodyLargeTextBlockStyle\"])\n\n\u002F\u002F Wrong: raw font properties for standard UI text\nTextBlock(\"Title\").FontSize(28).FontWeight(new FontWeight(700))\n```\n\n**Rules:**\n- Use `SemiBold` (600), never `Bold` (700) for emphasis — except `Heading()` which intentionally uses 700 for page titles.\n- Minimum font size: 12px. Anything smaller makes complex scripts unreadable.\n- Use `SymbolThemeFontFamily` for icon fonts, applied with the `.FontFamily(...)` modifier (not `.Set`, which re-runs every update and is never unwound):\n  ```csharp\n  TextBlock(\"\\uE710\")\n      .FontFamily((FontFamily)Application.Current.Resources[\"SymbolThemeFontFamily\"])\n  ```\n  Where no live `Application.Current` is available, the explicit\n  `\"Segoe Fluent Icons, Segoe MDL2 Assets\"` stack is an acceptable static fallback.\n  Never a bare `\"Segoe MDL2 Assets\"` (Windows 10 legacy) or a bare\n  `\"Segoe Fluent Icons\"` (drops the Windows 10 tail).\n- When icons and text are paired, **top-align both** in wrapping scenarios to prevent visual drift at larger text scales.\n- **TextWrapping:** `NoWrap` is the default — use `TextWrapping.Wrap` or `TextWrapping.WrapWholeWords` when text should flow to multiple lines. Choose `WrapWholeWords` for body text to avoid mid-word breaks.\n- **Smart tooltips for trimmed text:** When text is trimmed with `TextTrimming`, add a tooltip that only appears when the text is actually trimmed:\n  ```csharp\n  TextBlock(longText)\n      .TextTrimming(TextTrimming.CharacterEllipsis)\n      .ToolTip(longText)\n  ```\n\nSee [typography-and-colors.md](design-docs\u002Ftypography-and-colors.md) for the full type ramp and color token list.\n\n### 5. Layout and Scaling\n\n#### 4px Grid\n\nUse multiples of 4 for all margins, padding, and sizing values. The spacing scale is built on a 4px base unit:\n\n| Value | Name | Usage |\n|-------|------|-------|\n| 0px | Flush | No gap between elements |\n| 2px | Hairline | Tight spacing between related inline items |\n| 4px | Compact | Icon-to-label gaps and small control internals |\n| 8px | Standard | Default gap between sibling controls |\n| 12px | Relaxed | Padding inside cards and grouped sections |\n| 16px | Spacious | Between distinct content sections |\n| 24px | Section | Major section boundaries and card padding |\n| 36px | Page | Page-level margins around content |\n| 48px | Hero | Large spacing for hero areas and visual breaks |\n\n```csharp\n\u002F\u002F Correct: multiples of 4\nVStack(8, children).Padding(16)\nBorder(child).Margin(12).Padding(8)\nHStack(4, items)\n\n\u002F\u002F Wrong: odd values cause blurry rendering at fractional scales\nVStack(5, children).Padding(15)\nBorder(child).Margin(3)\n```\n\n#### Margin vs Padding\n\n**Margin** pushes an element away from its neighbors. It works on every Reactor element.\n\n**Padding** adds space between a container's edge and its content. It only works on `Border` and `Control`-based elements (`Button`, `TextBox`, etc.). Layout panels like `VStack`, `HStack`, and `Grid` do not support `.Padding()` — wrap content in a `Border` if you need inner padding on a stack.\n\n| Element | `.Margin()` | `.Padding()` |\n|---------|-------------|-------------|\n| `Border` | ✓ | ✓ |\n| `Button` | ✓ | ✓ |\n| `TextBox` | ✓ | ✓ |\n| `TextBlock` | ✓ | — |\n| `VStack` | ✓ | — |\n| `HStack` | ✓ | — |\n| `Grid` | ✓ | — |\n| `Image` | ✓ | — |\n\n```csharp\n\u002F\u002F Margin — works on ALL elements\nTextBlock(\"Hello\").Margin(8)\nVStack(children).Margin(16)\nBorder(child).Margin(12)\n\n\u002F\u002F Padding — only on Border and Control (Button, TextBox, etc.)\nBorder(child).Padding(16)    \u002F\u002F ✓ works\nButton(\"Go\").Padding(12)     \u002F\u002F ✓ works\n\n\u002F\u002F VStack\u002FHStack don't support Padding — wrap in Border instead:\nBorder(\n    VStack(8, items)\n).Padding(16)  \u002F\u002F ✓ padding applied to the Border\n```\n\nBoth `.Margin()` and `.Padding()` accept three overloads:\n\n```csharp\n\u002F\u002F Uniform — same on all sides\nelement.Margin(16)\n\n\u002F\u002F Horizontal, Vertical\nelement.Margin(horizontal: 24, vertical: 8)\n\n\u002F\u002F Per-side: left, top, right, bottom\nelement.Margin(left: 4, top: 8, right: 16, bottom: 24)\n```\n\n#### Corner Radius\n\nUse system values — `ControlCornerRadius` (4px) for controls and `OverlayCornerRadius` (8px) for overlays.\n\nWinUI provides two corner radius theme resources. Use `ThemeResource.CornerRadius()` to resolve the system values at render time, ensuring your UI adapts if these values are customized:\n\n```csharp\n\u002F\u002F Preferred: resolve system values at render time\nvar controlRadius = ThemeResource.CornerRadius(\"ControlCornerRadius\");\nvar overlayRadius = ThemeResource.CornerRadius(\"OverlayCornerRadius\");\n\n\u002F\u002F Apply to elements\nBorder(child).CornerRadius(controlRadius.TopLeft)   \u002F\u002F controls, buttons, cards\nBorder(dialog).CornerRadius(overlayRadius.TopLeft)   \u002F\u002F dialogs, flyouts, menus\n\n\u002F\u002F Also acceptable: hardcoded system values\nBorder(child).CornerRadius(4)   \u002F\u002F ControlCornerRadius equivalent\nBorder(child).CornerRadius(8)   \u002F\u002F OverlayCornerRadius equivalent\n\n\u002F\u002F Selective rounding (top corners only)\nBorder(child).CornerRadius(8, 8, 0, 0)\n\n\u002F\u002F Wrong: non-standard radii (even if from Figma)\nBorder(child).CornerRadius(3)\nBorder(child).CornerRadius(6)\n```\n\n**Mixed radii for nested surfaces:** When nesting controls inside overlay containers, the outer container uses `OverlayCornerRadius` while inner controls use `ControlCornerRadius`:\n\n```csharp\nvar cr = ThemeResource.CornerRadius(\"ControlCornerRadius\");\nvar or = ThemeResource.CornerRadius(\"OverlayCornerRadius\");\n\n\u002F\u002F Dialog with control-radius inner elements\nBorder(\n    VStack(12,\n        TextBox(\"\", placeholderText: \"Username\").CornerRadius(cr.TopLeft),\n        Button(\"Sign In\", onClick)\n            .Background(Theme.Accent)\n            .CornerRadius(cr.TopLeft)\n    ).Margin(24)\n)\n.Background(Theme.LayerFill)\n.WithBorder(Theme.SurfaceStroke)\n.CornerRadius(or.TopLeft)  \u002F\u002F outer overlay radius\n```\n\n#### Sizing\n\n```csharp\n\u002F\u002F Correct: MinHeight for flexible sizing\nButton(\"Action\").MinHeight(40)\nVStack(children).MinWidth(200)\n\n\u002F\u002F Wrong: fixed Height clips at larger text scales\nButton(\"Action\").Height(32)\nTextBox(text, setText).Height(30)\n```\n\n- Prefer `MinHeight`\u002F`MinWidth` over fixed `Height`\u002F`Width`.\n- Avoid fixed widths on buttons — let content drive width.\n- Buttons achieve correct height through padding, not explicit `Height`.\n\n#### Container Choice\n\nPick the right container. **Prefer `FlexRow` \u002F `FlexColumn` as the default for\nlinear layout** — they follow CSS Flexbox semantics (grow, shrink, basis, gap,\nwrap, `justify-content`, `align-items`), which matches the mental model web-\ntrained engineers and designers already have. `VStack` \u002F `HStack` remain a good\nchoice when you specifically want StackPanel's shrink-wrap cross-axis behavior\nor are porting from existing StackPanel code.\n\n| Need | Use | Not |\n|------|-----|-----|\n| Single child with background\u002Fborder | `Border(child)` | `Grid` or `FlexColumn` with one child |\n| Linear vertical layout | `FlexColumn(children)` (preferred), or `VStack(children)` | Nested `Grid` |\n| Linear horizontal layout | `FlexRow(children)` (preferred), or `HStack(children)` | Nested `Grid` |\n| Grow\u002Fshrink, wrapping, or `justify-content` distribution | `Flex(children)` with `.Flex(grow\u002Fshrink\u002Fbasis)` on children | Complex nested stacks |\n| Positional row\u002Fcolumn layout | `Grid(columns, rows, children)` | Canvas or absolute positioning |\n| Text that needs trimming | `Grid` with `\"*\"` column | `HStack` \u002F `FlexRow` (children get unbounded main-axis width) |\n\nRemove wrapper containers (`Border`, `Grid`, `FlexColumn`, `VStack`) that exist only for nesting without contributing layout, styling, or semantic purpose.\n\n**Text trimming caveat:** `HStack` (StackPanel) and `FlexRow` both give children unbounded width on the main axis, so `TextTrimming` never activates inside them. Use a `Grid` with a `GridSize.Star()` column. Note: `GridSize.Auto` also sizes to content and prevents trimming — always use `GridSize.Star()` for the column that contains trimmable text.\n\n```csharp\n\u002F\u002F Correct: Grid constrains width so trimming works\nGrid(\n    columns: [GridSize.Auto, GridSize.Star()],\n    rows: [GridSize.Auto],\n    Image(source).Size(32, 32).Grid(column: 0),\n    TextBlock(title).TextTrimming(TextTrimming.CharacterEllipsis).Grid(column: 1))\n\n\u002F\u002F Wrong: TextTrimming never fires inside HStack\nHStack(8,\n    Image(source).Size(32, 32),\n    TextBlock(title).TextTrimming(TextTrimming.CharacterEllipsis))\n```\n\n#### ScrollView Configuration\n\n- Use `Auto` scrollbar visibility — scrollbar appears only when content overflows.\n- Set `HorizontalContentAlignment = Stretch` on the ScrollView to prevent content from collapsing.\n- Only the content area should scroll — headers and action bars remain outside the ScrollView.\n\n```csharp\n\u002F\u002F Correct: header stays fixed, content scrolls\nVStack(\n    Heading(\"Page Title\"),\n    ScrollView(VStack(8, contentItems)))\n```\n\n#### Window Title Bar\n\nPrefer `TitleBar(...)` as the top-of-window element for Reactor desktop apps\nwhere a title makes sense (most main windows, document shells, settings\nwindows). It integrates with the Windows caption (drag region, system menu,\nmin\u002Fmax\u002Fclose) and themes with the rest of the app, and it accepts inline\n`Content` and `RightHeader` for branding, document context, or small inline\ncontrols — which avoids the common mistake of stacking a custom header row\nbelow the system chrome and ending up with two visual title zones.\n\n```csharp\n\u002F\u002F Preferred: real Windows title bar with app title + subtitle + inline content\nvar titleBar = (TitleBar(\"MyApp\") with\n{\n    Subtitle = currentDoc,\n    Content = ModeSwitcher(mode, setMode),\n    RightHeader = TextBlock($\"{rowsLoaded:N0} rows\").FontSize(12).Opacity(0.6),\n}).Flex(shrink: 0);\n\nreturn FlexColumn(titleBar, MainContent());\n```\n\nSmall dialogs, embedded pop-outs, and tool windows that already have a\ndistinct visual header don't need `TitleBar` — use it where you'd otherwise\nreach for a custom header row across the full window width.\n\n#### Spacing\n\nUse `FlexColumn(...) with { RowGap = n }` \u002F `FlexRow(...) with { ColumnGap = n }` (or `VStack(spacing, ...)` \u002F `HStack(spacing, ...)`) or Grid `RowSpacing`\u002F`ColumnSpacing` — not spacer elements.\n\n```csharp\n\u002F\u002F Correct\nVStack(8, TextBlock(\"A\"), TextBlock(\"B\"), TextBlock(\"C\"))\n\n\u002F\u002F Wrong: spacer element for spacing\nVStack(\n    TextBlock(\"A\"),\n    Border(null).Height(8),  \u002F\u002F Don't do this\n    TextBlock(\"B\"))\n```\n\n#### Shadows\n\n`ThemeShadow` requires elevation to be visible. Add `Translation(0, 0, 32)` and ensure the parent has padding (12px) to prevent shadow clipping:\n\n```csharp\nBorder(\n    ScrollView(VStack(16, content))\n).Background(Theme.Ref(\"AcrylicBackgroundFillColorDefaultBrush\"))\n .WithBorder(Theme.Ref(\"SurfaceStrokeColorFlyoutBrush\"), 1)\n .CornerRadius(8)\n .Translation(0, 0, 32)\n .Set(b =>\n {\n     b.BackgroundSizing = BackgroundSizing.InnerBorderEdge;\n     b.Shadow = new ThemeShadow();\n })\n```\n\nSee [layout-and-scaling.md](design-docs\u002Flayout-and-scaling.md) for full layout rules.\n\n### 6. Data Flow and State\n\nReactor uses hooks, not MVVM data binding. Follow these patterns:\n\n#### State-Driven UI (Preferred)\n\n```csharp\nvar (items, setItems) = UseState(new List\u003CItem>());\nvar (filter, setFilter) = UseState(\"\");\n\nvar filtered = UseMemo(() =>\n    items.Where(i => i.Name.Contains(filter, StringComparison.OrdinalIgnoreCase)).ToList(),\n    items, filter);\n\nreturn VStack(\n    TextBox(filter, setFilter, placeholderText: \"Filter...\"),\n    VStack(filtered.Select(item =>\n        TextBlock(item.Name).WithKey(item.Id)\n    ).ToArray()));\n```\n\n#### UseObservable for External Models\n\nWhen integrating with existing `INotifyPropertyChanged` objects:\n\n```csharp\nvar model = UseObservable(externalModel);\n\nreturn VStack(\n    TextBlock(model.Title),\n    Slider(model.Volume, 0, 100, v => model.Volume = v));\n```\n\n#### Hook Rules (Critical)\n\n1. **Same order every render** — no hooks inside `if` blocks, no hooks in variable-length loops.\n2. **Only call from `Render()`** — or from within a function component body.\n3. **Use `UseCallback` for stable references** — handlers passed to children should be memoized.\n\n```csharp\n\u002F\u002F Correct: hooks at top level, unconditional\nvar (count, setCount) = UseState(0);\nvar (name, setName) = UseState(\"\");\nvar increment = UseCallback(() => setCount(count + 1), count);\n\n\u002F\u002F Wrong: conditional hook\nif (showCounter)\n{\n    var (count, setCount) = UseState(0);  \u002F\u002F BREAKS hook ordering\n}\n```\n\n### 7. Accessibility\n\n#### Tier 1 Modifiers (Every Control)\n\nThese modifiers are zero-cost — apply them by default:\n\n```csharp\n\u002F\u002F Icon-only buttons MUST have AutomationName\nButton(Content: Image(iconSource), onClick)\n    .AutomationName(\"Close dialog\")\n\n\u002F\u002F Headings for screen reader navigation\nHeading(\"Settings\").HeadingLevel(AutomationHeadingLevel.Level1)\nSubHeading(\"General\").HeadingLevel(AutomationHeadingLevel.Level2)\n\n\u002F\u002F Tab order and access keys\nButton(\"Save\", onSave).IsTabStop(true).TabIndex(0).AccessKey(\"S\")\n```\n\n| Modifier | Purpose |\n|----------|---------|\n| `.AutomationName(\"text\")` | Screen reader label — required on icon-only controls |\n| `.HeadingLevel(Level1..Level9)` | Heading hierarchy for screen reader navigation |\n| `.IsTabStop(true\u002Ffalse)` | Include\u002Fexclude from tab order |\n| `.TabIndex(n)` | Explicit tab order |\n| `.AccessKey(\"X\")` | Alt+X keyboard shortcut |\n\n#### Tier 2 Modifiers (Lazy-Allocated)\n\nThese allocate an `AutomationProperties` peer only when set:\n\n```csharp\nTextBox(name, setName)\n    .HelpText(\"Enter your full legal name\")\n    .Required()\n\n\u002F\u002F Hide decorative elements from screen readers\nImage(decorativeSource).AccessibilityHidden()\n\n\u002F\u002F Position-in-set for screen readers on list items\nitems.Select((item, i) =>\n    TextBlock(item.Name)\n        .PositionInSet(i + 1, items.Count)\n        .WithKey(item.Id))\n```\n\n| Modifier | Purpose |\n|----------|---------|\n| `.HelpText(\"text\")` | Extended description (read after name) |\n| `.FullDescription(\"text\")` | Detailed description for complex elements |\n| `.AccessibilityHidden()` | Hide decorative elements from AT |\n| `.AccessibilityView(Raw\u002FControl\u002FContent)` | Control AT tree visibility |\n| `.Landmark(LandmarkType)` | Navigation landmark (see below) |\n| `.Required()` | Marks a field as required for AT |\n| `.LiveRegion(Polite\u002FAssertive)` | Announce dynamic content changes |\n| `.PositionInSet(pos, size)` | Position in a virtual list for AT |\n\n#### Navigation Landmarks\n\nLandmarks let screen reader users jump between page regions:\n\n```csharp\nNavigationView(navItems, content)\n    .Landmark(AutomationLandmarkType.Navigation)\n\nFlexColumn(mainContent)\n    .Landmark(AutomationLandmarkType.Main)\n\nVStack(searchControls)\n    .Landmark(AutomationLandmarkType.Search)\n\nVStack(formFields)\n    .Landmark(AutomationLandmarkType.Form)\n```\n\n#### Heading Hierarchy\n\nMaintain a logical heading structure for screen reader navigation:\n\n```csharp\n\u002F\u002F Good: proper hierarchy\nHeading(\"Settings\").HeadingLevel(AutomationHeadingLevel.Level1)\nSubHeading(\"General\").HeadingLevel(AutomationHeadingLevel.Level2)\nSubHeading(\"Advanced\").HeadingLevel(AutomationHeadingLevel.Level2)\n\n\u002F\u002F Bad: skipping levels\nHeading(\"Settings\").HeadingLevel(AutomationHeadingLevel.Level1)\nCaption(\"Detail\").HeadingLevel(AutomationHeadingLevel.Level4) \u002F\u002F skipped 2 and 3\n```\n\n#### Focus Trapping (Dialogs \u002F Modals)\n\nUse `UseFocusTrap` to keep focus inside a modal:\n\n```csharp\nvar trap = UseFocusTrap(isActive: true);\n\nreturn Border(\n    VStack(12,\n        Heading(\"Confirm\"),\n        TextBlock(\"Are you sure?\"),\n        HStack(8,\n            Button(\"Cancel\", onCancel),\n            Button(\"Confirm\", onConfirm))\n    ).Padding(24)\n).FocusTrap(trap);  \u002F\u002F Tab cycles within this container\n```\n\n`UseFocusTrap(isActive)` returns a `FocusTrapHandle`. Apply it with\n`.FocusTrap(handle)`. Focus is trapped while `isActive` is true.\n\n#### UseAnnounce (Live Announcements)\n\nFor dynamic status updates that aren't tied to a visible element:\n\n```csharp\nvar announce = UseAnnounce();\n\n\u002F\u002F The announce region must be in the visual tree\nreturn VStack(12,\n    announce.Region,  \u002F\u002F invisible — just hosts the live region\n    Button(\"Save\", async () =>\n    {\n        await Save();\n        announce.Announce(\"Document saved successfully\");\n    }),\n    Button(\"Error demo\", () =>\n        announce.Announce(\"Upload failed — check your connection\", assertive: true))\n);\n```\n\n**Important:** `announce.Region` must be in the visual tree or announcements\nare silently lost. Place it once near the root of your page.\n\n#### SemanticPanel (Custom Roles)\n\nFor controls that don't map to standard WinUI automation peers:\n\n```csharp\nBorder(child).Semantics(\n    role: \"Slider\",\n    value: $\"{percent}%\",\n    rangeMin: 0,\n    rangeMax: 100,\n    rangeValue: percent);\n```\n\n#### AccessibilityScanner (Automated Testing)\n\nRun WCAG checks programmatically:\n\n```csharp\nvar results = AccessibilityScanner.Scan(rootElement);\n\n\u002F\u002F Built-in checks include:\n\u002F\u002F - Missing AutomationName on interactive controls\n\u002F\u002F - Missing HeadingLevel on heading text\n\u002F\u002F - Color contrast ratio \u003C 4.5:1\n\u002F\u002F - Touch target size \u003C 44x44\n\u002F\u002F - Missing landmark regions\n\u002F\u002F - Tab order gaps\n\u002F\u002F - Missing PositionInSet on list items\n\u002F\u002F - AccessKey conflicts\n\nAccessibilityScanner.ExportJson(results, \"a11y-report.json\");\n```\n\n#### Roslyn Analyzers\n\nThree compile-time analyzers catch accessibility issues:\n\n| Analyzer | Checks |\n|----------|--------|\n| `REACTOR_A11Y_001` | Icon-only Button\u002FToggleButton missing `.AutomationName()` |\n| `REACTOR_A11Y_002` | Image missing `.AutomationName()` or `.AccessibilityHidden()` |\n| `REACTOR_A11Y_003` | Form field (TextBox\u002FNumberBox\u002FPasswordBox) missing label |\n\nThese run as warnings by default. Promote to errors in CI:\n\n```xml\n\u003CWarningsAsErrors>REACTOR_A11Y_001;REACTOR_A11Y_002;REACTOR_A11Y_003\u003C\u002FWarningsAsErrors>\n```\n\n#### Accessible Forms Pattern\n\nCombine validation with accessibility:\n\n```csharp\nvar validation = UseValidationContext();\nvar (email, setEmail) = UseState(\"\");\n\nreturn FormField(\n    TextBox(email, setEmail)\n        .Validate(\"email\", email, Validate.Required(), Validate.Email())\n        .Required()\n        .HelpText(\"We'll send a confirmation to this address\"),\n    label: \"Email\",\n    required: true,\n    showWhen: ShowWhen.WhenTouched)\n.Landmark(AutomationLandmarkType.Form);\n```\n\n`FormField` automatically wires `AutomationName` from the label and\nassociates error messages with the input via `DescribedBy`.\n\n#### Accessibility Rules\n\n- Set `AutomationName` on every control without visible text.\n- Maintain heading hierarchy — don't skip levels.\n- Use landmarks on major page regions.\n- Focus-trap all dialogs and modals.\n- Place `announce.Region` in the tree before calling `.Announce()`.\n- Test with Narrator + keyboard-only navigation.\n- Test Light, Dark, and High Contrast themes (especially NightSky).\n- Test at 100%, 150%, 200%, 250% display scaling.\n- Test with maximum text scaling (Settings > Accessibility > Text size).\n- Hit-test targets for light-dismiss must be visible: `Background(\"#00000000\")`.\n- Use `DividerStrokeColorDefaultBrush` for dividers — custom brushes with opacity break in HC.\n- Enable Roslyn analyzers in CI to catch common issues at build time.\n\nSee [code-review-checklist.md](design-docs\u002Fcode-review-checklist.md) for the full accessibility checklist.\n\n### 8. Acrylic Surface Pairings\n\nAcrylic backgrounds have specific border pairings. Using the wrong combination produces incorrect visuals.\n\n| Surface Type | Background | Border |\n|--------------|------------|--------|\n| Flyouts, tooltips | `AcrylicBackgroundFillColorDefaultBrush` | `SurfaceStrokeColorFlyoutBrush` |\n| UI surfaces | `AcrylicBackgroundFillColorBaseBrush` | `SurfaceStrokeColorDefaultBrush` |\n\n```csharp\n\u002F\u002F Correct: flyout acrylic pairing\nBorder(content)\n    .Background(Theme.Ref(\"AcrylicBackgroundFillColorDefaultBrush\"))\n    .WithBorder(Theme.Ref(\"SurfaceStrokeColorFlyoutBrush\"), 1)\n    .CornerRadius(8)\n    .Translation(0, 0, 32)\n    .Set(b =>\n    {\n        b.BackgroundSizing = BackgroundSizing.InnerBorderEdge;\n        b.Shadow = new ThemeShadow();\n    })\n```\n\n**`BackgroundSizing = InnerBorderEdge`** is required on any bordered acrylic surface. It prevents the background from bleeding through the border edge. Always set it on acrylic containers with a border.\n\n- Overlays on acrylic use `LayerOnAcrylicFillColorDefaultBrush`.\n- Keep one acrylic layer per visual surface to avoid stacked-material artifacts.\n\n#### Window Backdrops (Mica \u002F Acrylic)\n\nFor *window-level* material (Mica\u002FAcrylic showing through the title bar and\nchrome), use the `.Backdrop(BackdropKind)` modifier on the root element —\nnot a brush. The modifier walks up to the host's `Window` and assigns the\nright `SystemBackdrop`:\n\n```csharp\nreturn Grid([GridSize.Star()], [GridSize.Auto, GridSize.Star()],\n    titleBar.Grid(row: 0),\n    content.Grid(row: 1)\n).Backdrop(BackdropKind.Mica);\n```\n\nAvailable kinds: `BackdropKind.None`, `Mica`, `MicaAlt`, `DesktopAcrylic`,\n`AcrylicThin`. On `ReactorHostControl` (windowless host) the modifier\nno-ops cleanly. For Mica to show through, the root element must not\npaint an opaque background — drop `Theme.SolidBackground` from the root\nwhen applying a backdrop. Spec 033 §6.\n\n#### Flyout Surface Pattern\n\nFlyout\u002Fpopup surfaces should follow a standard elevation pattern:\n\n```csharp\nBorder(\n    ScrollView(VStack(8, flyoutContent))\n)\n.Background(Theme.Ref(\"FlyoutPresenterBackground\"))\n.WithBorder(Theme.Ref(\"FlyoutBorderThemeBrush\"), 1)\n.CornerRadius(8)\n.Translation(0, 0, 32)\n.Set(b =>\n{\n    b.BackgroundSizing = BackgroundSizing.InnerBorderEdge;\n    b.Shadow = new ThemeShadow();\n})\n```\n\nUse `FlyoutPresenterBackground` and `FlyoutBorderThemeBrush` for standard popup surfaces. Use the explicit acrylic resource pairings (above) only when building custom surfaces that don't use WinUI's flyout presenter resources.\n\n### 9. Animation and Motion\n\n#### Implicit Transitions (Recommended)\n\nAnimate property changes smoothly — the framework handles interpolation:\n\n```csharp\n\u002F\u002F Opacity fade\nBorder(child)\n    .OpacityTransition()\n    .Opacity(isVisible ? 1.0 : 0.0)\n\n\u002F\u002F Background color crossfade\nVStack(children)\n    .BackgroundTransition()\n    .Background(isActive ? Theme.Accent : Theme.ControlFill)\n\n\u002F\u002F Scale bounce\nBorder(child)\n    .ScaleTransition()\n    .Scale(isPressed ? 0.95f : 1.0f)\n```\n\n#### Layout Animations\n\nAnimate children being added, removed, or repositioned:\n\n```csharp\nVStack(items.Select(item =>\n    TextBlock(item.Name).WithKey(item.Id)\n).ToArray()).LayoutAnimation()\n```\n\n#### Element Enter\u002FExit Transitions\n\n```csharp\n\u002F\u002F Fade + slide from bottom on mount\nBorder(child).WithTransitions(\n    Transition.Fade,\n    Transition.Slide(Edge.Bottom))\n```\n\n**Rules:**\n- Use `ThemeShadow` instead of composition drop shadows.\n- Avoid gradient animations in High Contrast.\n- Use `BrushTransition` (via `BackgroundTransition()`) for smooth color changes.\n- Always set `Translation(0, 0, 32)` when using `ThemeShadow`.\n\n### 10. Reconciliation and Performance\n\n#### Keys for Lists\n\nAlways set `.WithKey()` on items in dynamic lists. Without keys, the reconciler matches by position, causing unnecessary re-mounts on insert\u002Freorder:\n\n```csharp\n\u002F\u002F Correct: keyed children — stable identity\nVStack(items.Select(item =>\n    HStack(8,\n        Image(item.Avatar).Size(32, 32),\n        TextBlock(item.Name)\n    ).WithKey(item.Id)\n).ToArray())\n\n\u002F\u002F Wrong: unkeyed — insert at index 0 re-renders everything\nVStack(items.Select(item =>\n    HStack(8,\n        Image(item.Avatar).Size(32, 32),\n        TextBlock(item.Name)\n    ).ToArray())\n```\n\n#### Memoize Expensive Computations\n\n```csharp\nvar sorted = UseMemo(() =>\n    items.OrderBy(x => x.Name).ToList(),\n    items);\n\nvar handler = UseCallback(() => save(count), count);\n```\n\n#### Avoid Deep Nesting\n\nFlatten visual tree depth where possible. Use `Border` instead of single-child `Grid`\u002F`VStack`.\n\n```csharp\n\u002F\u002F Correct: flat\nBorder(TextBlock(\"Hello\")).Background(Theme.CardBackground).Padding(16)\n\n\u002F\u002F Even better: the Card(child) factory bakes in CardBackground +\n\u002F\u002F CardStroke 1px hairline + 8px corner radius + 16px padding.\nCard(TextBlock(\"Hello\"))\n\n\u002F\u002F Wrong: unnecessary nesting\nVStack(\n    Grid([GridSize.Star()], [GridSize.Star()],\n        TextBlock(\"Hello\")\n    ).Background(Theme.CardBackground)\n).Padding(16)\n```\n\n#### Use `.Set()` Sparingly\n\n`.Set()` is an escape hatch to raw WinUI. It's valid but bypasses the virtual element model — use it for properties Reactor doesn't expose, not as a general pattern.\n\n```csharp\n\u002F\u002F Good: property not exposed by Reactor\nTextBlock(\"Clock\").Set(tb => tb.Typography.NumeralAlignment = FontNumeralAlignment.Tabular)\n\n\u002F\u002F Bad: property that Reactor exposes as a modifier\nTextBlock(\"Hello\").Set(tb => tb.Margin = new Thickness(16))  \u002F\u002F Use .Margin(16) instead\n```\n\n### 11. Formatting Conventions\n\n- Use `using static Microsoft.UI.Reactor.Factories;` to access the DSL without prefix.\n- One element per line when nesting gets deep.\n- Group modifiers logically: layout first, then appearance, then behavior.\n- Use trailing `.WithKey()` as the last modifier.\n\n```csharp\n\u002F\u002F Good: readable modifier order\nBorder(\n    VStack(16,\n        Heading(\"Title\"),\n        TextBlock(\"Description\").Foreground(Theme.SecondaryText),\n        HStack(8,\n            Button(\"Cancel\", onCancel),\n            Button(\"Save\", onSave).Resources(r => r\n                .Set(\"ButtonBackground\", Theme.Accent)\n                .Set(\"ButtonForeground\", Theme.Ref(\"TextOnAccentFillColorPrimaryBrush\")))\n        )\n    )\n)\n.Padding(24)\n.CornerRadius(8)\n.Background(Theme.CardBackground)\n.WithBorder(Theme.CardStroke, 1)\n.AutomationName(\"Settings card\")\n```\n\n### 12. Text Scaling and Localization\n\nEvery UI change must survive text scaling and long strings:\n\n- Use `MinHeight` instead of `Height` on containers with text.\n- Avoid fixed widths on buttons and text containers.\n- Use `VAlign(VerticalAlignment.Center)` instead of margin-based centering.\n- Use tabular numerals for changing numbers (clock, battery, progress):\n  ```csharp\n  TextBlock($\"{percent}%\").Set(tb =>\n      tb.Typography.NumeralAlignment = FontNumeralAlignment.Tabular)\n  ```\n\n### 13. Avoid Setting WinUI Defaults\n\nDo not explicitly set properties to their WinUI default values — it blocks future WinUI updates.\n\n```csharp\n\u002F\u002F Wrong: these are all WinUI defaults\nButton(\"Action\")\n    .Padding(12)       \u002F\u002F Default button padding\n    .CornerRadius(4)   \u002F\u002F Default ControlCornerRadius\n    .Height(32)        \u002F\u002F Default button height\n\n\u002F\u002F Correct: only set what differs\nButton(\"Action\").MinHeight(40)\n```\n\nDefaults you should not set:\n- Default `Foreground` on Text (it's `TextFillColorPrimaryBrush` already)\n- `Padding(0)` or `Margin(0)` (zero is the default)\n- `Opacity(1.0)` (1.0 is the default)\n- `CornerRadius(4)` on buttons (WinUI default is `ControlCornerRadius`)\n\n---\n\n## Code Review Checklist\n\nWhen reviewing Reactor UI code, verify:\n\n**Theming:**\n- [ ] Uses `Theme.*` tokens for colors\u002Fbrushes — no hardcoded hex on themed surfaces\n- [ ] Resource keys end in `Brush` (not Color name)\n- [ ] No opacity on elements in High Contrast\n- [ ] Acrylic surfaces use correct background + border pairings\n- [ ] `BackgroundSizing = InnerBorderEdge` set on bordered acrylic containers\n- [ ] No partial theme changes — Light\u002FDark `.Resources()` updates tested with HC in the same change\n- [ ] Interactive containers (cards, list items) have visible borders in HC\n\n**Typography:**\n- [ ] Uses semantic text factories (`Heading`, `SubHeading`, `Caption`) or WinUI style tokens\n- [ ] `FontWeight` is SemiBold (600), not Bold (700) — except `Heading()` page titles\n- [ ] No fixed heights on text containers — uses `MinHeight`\n- [ ] Trimmed text has a tooltip for overflow content\n- [ ] Icons and text top-aligned in wrapping scenarios\n\n**Layout:**\n- [ ] Layout values use multiples of 4\n- [ ] Corner radius is 4 (controls) or 8 (overlays) — no non-standard values\n- [ ] Uses `MinHeight`\u002F`MinWidth` instead of fixed sizing for text containers\n- [ ] Uses `Border` for single-child containers (not `VStack`\u002F`Grid` wrappers)\n- [ ] No unnecessary wrapper containers without layout or styling purpose\n- [ ] `HStack` does not contain text that needs `TextTrimming`\n- [ ] Text trimming columns use `\"*\"` (not `\"Auto\"`, which also prevents trimming)\n- [ ] `ThemeShadow` has `Translation(0, 0, 32)` and 12px parent padding\n- [ ] ScrollView content uses `HorizontalContentAlignment = Stretch`\n\n**Controls and Styling:**\n- [ ] `.Resources()` used for button visual state overrides (not `.Background()` directly)\n- [ ] All visual states covered when overriding — rest + hover + pressed + disabled\n- [ ] No explicit setting of WinUI default values\n- [ ] No no-op `.Resources()` overrides that repeat WinUI defaults\n- [ ] Uses existing WinUI styles before creating custom overrides\n\n**Accessibility:**\n- [ ] `AutomationName` set on icon-only controls\n- [ ] `HeadingLevel` set on heading text\n- [ ] `PositionInSet` \u002F `SizeOfSet` set on list items\n- [ ] Hit-test targets for light-dismiss are visible (`Background(\"#00000000\")`)\n\n**State and Reconciliation:**\n- [ ] `.WithKey()` set on items in dynamic lists\n- [ ] Hooks are unconditional and in consistent order\n- [ ] `UseCallback` wraps handlers passed to child components\n- [ ] `UseMemo` wraps expensive computations\n\n**PR Hygiene:**\n- [ ] PR scope excludes unrelated churn — every change maps to a concrete UX reason\n- [ ] No broad `.Resources()` or styling edits unrelated to the feature being changed\n\n**If changing colors:** Test in NightSky HC theme, hover on interactive elements.\n\n**If changing text\u002Fcontainers:** Test with scaled text and long strings.\n\n**If changing layout:** Test at 100%, 150%, 200%, 250% display scaling.\n\n---\n\n## Testing Guidance\n\n- Test Light, Dark, and High Contrast themes (especially NightSky).\n- Test hover\u002Fpressed states on all interactive elements.\n- Test at 100%, 150%, 200%, and 250% display scaling.\n- Test with text scaling and long\u002Flocalized strings for clipping and trimming.\n- Verify acrylic pairings and shadow clipping after layout changes.\n- Validate Figma implementation measurements at 100% scale factor.\n- Capture before\u002Fafter screenshots for visual changes including Light\u002FDark\u002FHC evidence.\n\n---\n\n## References\n\nConsult these for detailed guidance:\n- [Theme-aware resources](design-docs\u002Ftheme-aware-resources.md)\n- [Typography and colors](design-docs\u002Ftypography-and-colors.md)\n- [Layout and scaling](design-docs\u002Flayout-and-scaling.md)\n- [Control styles](design-docs\u002Fcontrol-styles.md)\n- [Code review checklist](design-docs\u002Fcode-review-checklist.md)\n\n## External References\n\n- [Microsoft Design Guidelines](https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fwindows\u002Fapps\u002Fdesign\u002Fguidelines-overview)\n- [Color in Windows](https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fwindows\u002Fapps\u002Fdesign\u002Fsignature-experiences\u002Fcolor)\n- [Typography in Windows](https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fwindows\u002Fapps\u002Fdesign\u002Fsignature-experiences\u002Ftypography)\n- [WinUI 3 Gallery App](https:\u002F\u002Fapps.microsoft.com\u002Fdetail\u002F9P3JFPWWDZRC)\n- [WinUI Button Theme Resources](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fmicrosoft-ui-xaml\u002Fblob\u002Fwinui2\u002Fmain\u002Fdev\u002FCommonStyles\u002FButton_themeresources.xaml)\n- [WinUI TextBlock Theme Resources](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fmicrosoft-ui-xaml\u002Fblob\u002Fwinui2\u002Fmain\u002Fdev\u002FCommonStyles\u002FTextBlock_themeresources.xaml)\n- [WinUI Common Theme Resources](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fmicrosoft-ui-xaml\u002Fblob\u002Fwinui2\u002Fmain\u002Fdev\u002FCommonStyles\u002FCommon_themeresources_any.xaml)\n",{"data":40,"body":41},{"name":4,"description":6},{"type":42,"children":43},"root",[44,53,59,104,171,176,183,208,214,219,319,325,332,345,431,436,457,464,530,538,701,709,837,845,999,1007,1161,1169,1323,1331,1508,1516,1696,1708,1714,1745,1751,1756,1779,1792,1798,1811,1908,1936,1982,1988,1993,2001,2157,2165,2319,2327,2433,2445,2451,2470,2478,2765,2821,2829,2903,2926,2942,3170,3182,3328,3335,3557,3569,3575,3581,3586,3774,3844,3850,3860,3938,4128,4237,4255,4324,4330,4351,4364,4512,4536,4661,4667,4729,4782,4788,4843,5073,5103,5163,5257,5263,5295,5334,5340,5367,5445,5458,5464,5513,5581,5587,5605,5699,5711,5717,5722,5728,5829,5835,5848,5893,5899,5953,6038,6044,6050,6055,6140,6246,6252,6265,6366,6522,6528,6533,6625,6631,6636,6703,6709,6721,6814,6849,6855,6860,6970,6987,6993,6998,7053,7059,7064,7173,7179,7184,7274,7279,7295,7301,7306,7408,7434,7440,7535,7547,7553,7558,7634,7728,7742,7762,7768,7804,7843,7900,7906,7911,8011,8030,8036,8042,8047,8163,8169,8174,8205,8211,8250,8257,8314,8320,8326,8338,8451,8457,8503,8509,8533,8641,8654,8664,8710,8716,8753,8899,8905,8910,8976,8982,8987,9056,9061,9130,9134,9140,9145,9153,9251,9259,9346,9354,9514,9522,9592,9600,9673,9681,9740,9748,9777,9787,9797,9807,9810,9816,9853,9856,9862,9867,9911,9917,9991],{"type":45,"tag":46,"props":47,"children":49},"element","h1",{"id":48},"windows-11-design-for-reactor",[50],{"type":51,"value":52},"text","Windows 11 Design for Reactor",{"type":45,"tag":54,"props":55,"children":56},"p",{},[57],{"type":51,"value":58},"Author, review, and fix Reactor UI code following Windows 11 design system rules.",{"type":45,"tag":54,"props":60,"children":61},{},[62,64,71,73,79,81,87,89,95,96,102],{"type":51,"value":63},"Reactor is a functional UI framework for WinUI 3 that builds UI entirely in C# — no XAML, no data binding, no ViewModels. UI is described with immutable Element records, composed via bare factory methods imported with ",{"type":45,"tag":65,"props":66,"children":68},"code",{"className":67},[],[69],{"type":51,"value":70},"using static Microsoft.UI.Reactor.Factories",{"type":51,"value":72}," (",{"type":45,"tag":65,"props":74,"children":76},{"className":75},[],[77],{"type":51,"value":78},"TextBlock(...)",{"type":51,"value":80},", ",{"type":45,"tag":65,"props":82,"children":84},{"className":83},[],[85],{"type":51,"value":86},"VStack(...)",{"type":51,"value":88},", etc.), and updated through a React-style reconciler with hooks (",{"type":45,"tag":65,"props":90,"children":92},{"className":91},[],[93],{"type":51,"value":94},"UseState",{"type":51,"value":80},{"type":45,"tag":65,"props":97,"children":99},{"className":98},[],[100],{"type":51,"value":101},"UseEffect",{"type":51,"value":103},", etc.).",{"type":45,"tag":105,"props":106,"children":107},"blockquote",{},[108],{"type":45,"tag":54,"props":109,"children":110},{},[111,117,119,125,127,133,135,141,143,149,150,156,158,169],{"type":45,"tag":112,"props":113,"children":114},"strong",{},[115],{"type":51,"value":116},"Controlled prop note:",{"type":51,"value":118}," when design examples use inputs such as\n",{"type":45,"tag":65,"props":120,"children":122},{"className":121},[],[123],{"type":51,"value":124},"TextBox(value, setValue)",{"type":51,"value":126}," or ",{"type":45,"tag":65,"props":128,"children":130},{"className":129},[],[131],{"type":51,"value":132},"Slider(value, ...)",{"type":51,"value":134},", the factory keeps the\nsimple call-site shape. Direct element-record reads of controlled props now\nreturn ",{"type":45,"tag":65,"props":136,"children":138},{"className":137},[],[139],{"type":51,"value":140},"Optional\u003CT>",{"type":51,"value":142},"; use ",{"type":45,"tag":65,"props":144,"children":146},{"className":145},[],[147],{"type":51,"value":148},".GetValueOrDefault(...)",{"type":51,"value":126},{"type":45,"tag":65,"props":151,"children":153},{"className":152},[],[154],{"type":51,"value":155},".Value",{"type":51,"value":157},". See\n",{"type":45,"tag":159,"props":160,"children":162},"a",{"href":161},"..\u002F..\u002F..\u002F..\u002Fdocs\u002Fguide\u002Fmigration\u002F050-optional-t.md",[163],{"type":45,"tag":65,"props":164,"children":166},{"className":165},[],[167],{"type":51,"value":168},"migration\u002F050-optional-t.md",{"type":51,"value":170},".",{"type":45,"tag":54,"props":172,"children":173},{},[174],{"type":51,"value":175},"This skill translates the Windows 11 design language into Reactor's C# projection so that apps built with Reactor look, feel, and behave like first-class Windows 11 applications.",{"type":45,"tag":177,"props":178,"children":180},"h2",{"id":179},"workflow",[181],{"type":51,"value":182},"Workflow",{"type":45,"tag":184,"props":185,"children":186},"ol",{},[187,193,198,203],{"type":45,"tag":188,"props":189,"children":190},"li",{},[191],{"type":51,"value":192},"Author new Reactor UI using the rules below.",{"type":45,"tag":188,"props":194,"children":195},{},[196],{"type":51,"value":197},"Review a PR using the checklist at the end of this file.",{"type":45,"tag":188,"props":199,"children":200},{},[201],{"type":51,"value":202},"Fix feedback by mapping issues to the specific rule and applying the correct pattern.",{"type":45,"tag":188,"props":204,"children":205},{},[206],{"type":51,"value":207},"Verify changes using the testing guidance.",{"type":45,"tag":177,"props":209,"children":211},{"id":210},"quick-scan-checklist",[212],{"type":51,"value":213},"Quick Scan Checklist",{"type":45,"tag":54,"props":215,"children":216},{},[217],{"type":51,"value":218},"Check these areas early in every review:",{"type":45,"tag":220,"props":221,"children":222},"ul",{},[223,228,233,275,280,285,298,303,314],{"type":45,"tag":188,"props":224,"children":225},{},[226],{"type":51,"value":227},"Theme tokens used for all colors — no hardcoded hex strings for themed surfaces.",{"type":45,"tag":188,"props":229,"children":230},{},[231],{"type":51,"value":232},"High Contrast works — no opacity, no accent colors, only system color brushes.",{"type":45,"tag":188,"props":234,"children":235},{},[236,238,244,245,251,252,258,260,266,268,274],{"type":51,"value":237},"Typography uses ",{"type":45,"tag":65,"props":239,"children":241},{"className":240},[],[242],{"type":51,"value":243},"Heading()",{"type":51,"value":80},{"type":45,"tag":65,"props":246,"children":248},{"className":247},[],[249],{"type":51,"value":250},"SubHeading()",{"type":51,"value":80},{"type":45,"tag":65,"props":253,"children":255},{"className":254},[],[256],{"type":51,"value":257},"Caption()",{"type":51,"value":259},", or WinUI style tokens — not raw ",{"type":45,"tag":65,"props":261,"children":263},{"className":262},[],[264],{"type":51,"value":265},"FontSize",{"type":51,"value":267},"\u002F",{"type":45,"tag":65,"props":269,"children":271},{"className":270},[],[272],{"type":51,"value":273},"FontWeight",{"type":51,"value":170},{"type":45,"tag":188,"props":276,"children":277},{},[278],{"type":51,"value":279},"Layout values use the 4px grid.",{"type":45,"tag":188,"props":281,"children":282},{},[283],{"type":51,"value":284},"Text scaling and localization are safe — no fixed heights on text containers.",{"type":45,"tag":188,"props":286,"children":287},{},[288,290,296],{"type":51,"value":289},"Shadows have elevation (",{"type":45,"tag":65,"props":291,"children":293},{"className":292},[],[294],{"type":51,"value":295},"Translation(0, 0, 32)",{"type":51,"value":297},").",{"type":45,"tag":188,"props":299,"children":300},{},[301],{"type":51,"value":302},"Acrylic surfaces use correct background + border pairings.",{"type":45,"tag":188,"props":304,"children":305},{},[306,312],{"type":45,"tag":65,"props":307,"children":309},{"className":308},[],[310],{"type":51,"value":311},"AutomationName()",{"type":51,"value":313}," set on icon-only controls.",{"type":45,"tag":188,"props":315,"children":316},{},[317],{"type":51,"value":318},"Keys set on list items for stable reconciliation.",{"type":45,"tag":177,"props":320,"children":322},{"id":321},"core-rules-always-apply",[323],{"type":51,"value":324},"Core Rules (Always Apply)",{"type":45,"tag":326,"props":327,"children":329},"h3",{"id":328},"_1-theming-is-the-primary-lens",[330],{"type":51,"value":331},"1. Theming Is the Primary Lens",{"type":45,"tag":54,"props":333,"children":334},{},[335,337,343],{"type":51,"value":336},"Use ",{"type":45,"tag":65,"props":338,"children":340},{"className":339},[],[341],{"type":51,"value":342},"Theme.*",{"type":51,"value":344}," tokens for all colors and brushes. Never hardcode hex colors for themed surfaces.",{"type":45,"tag":346,"props":347,"children":352},"pre",{"className":348,"code":349,"language":350,"meta":351,"style":351},"language-csharp shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Correct: theme tokens\nTextBlock(\"Hello\").Foreground(Theme.PrimaryText)\nBorder(child).Background(Theme.CardBackground)\nButton(\"Action\").Background(Theme.Accent)\n\n\u002F\u002F Wrong: hardcoded colors on themed surfaces\nTextBlock(\"Hello\").Foreground(\"#000000\")\nBorder(child).Background(\"#FFFFFF\")\n","csharp","",[353],{"type":45,"tag":65,"props":354,"children":355},{"__ignoreMap":351},[356,367,376,385,394,404,413,422],{"type":45,"tag":357,"props":358,"children":361},"span",{"class":359,"line":360},"line",1,[362],{"type":45,"tag":357,"props":363,"children":364},{},[365],{"type":51,"value":366},"\u002F\u002F Correct: theme tokens\n",{"type":45,"tag":357,"props":368,"children":370},{"class":359,"line":369},2,[371],{"type":45,"tag":357,"props":372,"children":373},{},[374],{"type":51,"value":375},"TextBlock(\"Hello\").Foreground(Theme.PrimaryText)\n",{"type":45,"tag":357,"props":377,"children":379},{"class":359,"line":378},3,[380],{"type":45,"tag":357,"props":381,"children":382},{},[383],{"type":51,"value":384},"Border(child).Background(Theme.CardBackground)\n",{"type":45,"tag":357,"props":386,"children":388},{"class":359,"line":387},4,[389],{"type":45,"tag":357,"props":390,"children":391},{},[392],{"type":51,"value":393},"Button(\"Action\").Background(Theme.Accent)\n",{"type":45,"tag":357,"props":395,"children":397},{"class":359,"line":396},5,[398],{"type":45,"tag":357,"props":399,"children":401},{"emptyLinePlaceholder":400},true,[402],{"type":51,"value":403},"\n",{"type":45,"tag":357,"props":405,"children":407},{"class":359,"line":406},6,[408],{"type":45,"tag":357,"props":409,"children":410},{},[411],{"type":51,"value":412},"\u002F\u002F Wrong: hardcoded colors on themed surfaces\n",{"type":45,"tag":357,"props":414,"children":416},{"class":359,"line":415},7,[417],{"type":45,"tag":357,"props":418,"children":419},{},[420],{"type":51,"value":421},"TextBlock(\"Hello\").Foreground(\"#000000\")\n",{"type":45,"tag":357,"props":423,"children":425},{"class":359,"line":424},8,[426],{"type":45,"tag":357,"props":427,"children":428},{},[429],{"type":51,"value":430},"Border(child).Background(\"#FFFFFF\")\n",{"type":45,"tag":54,"props":432,"children":433},{},[434],{"type":51,"value":435},"Hardcoded colors are acceptable only for:",{"type":45,"tag":220,"props":437,"children":438},{},[439,444],{"type":45,"tag":188,"props":440,"children":441},{},[442],{"type":51,"value":443},"One-off decorative elements that intentionally ignore theming (e.g., brand logos)",{"type":45,"tag":188,"props":445,"children":446},{},[447,449,455],{"type":51,"value":448},"Explicit hit-test targets (",{"type":45,"tag":65,"props":450,"children":452},{"className":451},[],[453],{"type":51,"value":454},"Background(\"#00000000\")",{"type":51,"value":456}," for transparent hit areas)",{"type":45,"tag":458,"props":459,"children":461},"h4",{"id":460},"theme-token-reference",[462],{"type":51,"value":463},"Theme Token Reference",{"type":45,"tag":105,"props":465,"children":466},{},[467],{"type":45,"tag":54,"props":468,"children":469},{},[470,472,504,506,512,514,520,522,528],{"type":51,"value":471},"⚠️ ",{"type":45,"tag":112,"props":473,"children":474},{},[475,481,482,488,489,495,496,502],{"type":45,"tag":65,"props":476,"children":478},{"className":477},[],[479],{"type":51,"value":480},"Theme.Error",{"type":51,"value":80},{"type":45,"tag":65,"props":483,"children":485},{"className":484},[],[486],{"type":51,"value":487},"Theme.Success",{"type":51,"value":80},{"type":45,"tag":65,"props":490,"children":492},{"className":491},[],[493],{"type":51,"value":494},"Theme.Warning",{"type":51,"value":80},{"type":45,"tag":65,"props":497,"children":499},{"className":498},[],[500],{"type":51,"value":501},"Theme.ErrorText",{"type":51,"value":503}," do NOT exist.",{"type":51,"value":505},"\nUse ",{"type":45,"tag":65,"props":507,"children":509},{"className":508},[],[510],{"type":51,"value":511},"Theme.SystemCritical",{"type":51,"value":513}," (red\u002Ferror), ",{"type":45,"tag":65,"props":515,"children":517},{"className":516},[],[518],{"type":51,"value":519},"Theme.SystemSuccess",{"type":51,"value":521}," (green), ",{"type":45,"tag":65,"props":523,"children":525},{"className":524},[],[526],{"type":51,"value":527},"Theme.SystemCaution",{"type":51,"value":529}," (yellow).",{"type":45,"tag":54,"props":531,"children":532},{},[533],{"type":45,"tag":112,"props":534,"children":535},{},[536],{"type":51,"value":537},"Text:",{"type":45,"tag":539,"props":540,"children":541},"table",{},[542,566],{"type":45,"tag":543,"props":544,"children":545},"thead",{},[546],{"type":45,"tag":547,"props":548,"children":549},"tr",{},[550,556,561],{"type":45,"tag":551,"props":552,"children":553},"th",{},[554],{"type":51,"value":555},"Token",{"type":45,"tag":551,"props":557,"children":558},{},[559],{"type":51,"value":560},"WinUI Resource",{"type":45,"tag":551,"props":562,"children":563},{},[564],{"type":51,"value":565},"Purpose",{"type":45,"tag":567,"props":568,"children":569},"tbody",{},[570,597,623,649,675],{"type":45,"tag":547,"props":571,"children":572},{},[573,583,592],{"type":45,"tag":574,"props":575,"children":576},"td",{},[577],{"type":45,"tag":65,"props":578,"children":580},{"className":579},[],[581],{"type":51,"value":582},"Theme.PrimaryText",{"type":45,"tag":574,"props":584,"children":585},{},[586],{"type":45,"tag":65,"props":587,"children":589},{"className":588},[],[590],{"type":51,"value":591},"TextFillColorPrimaryBrush",{"type":45,"tag":574,"props":593,"children":594},{},[595],{"type":51,"value":596},"Primary body text, titles, and labels",{"type":45,"tag":547,"props":598,"children":599},{},[600,609,618],{"type":45,"tag":574,"props":601,"children":602},{},[603],{"type":45,"tag":65,"props":604,"children":606},{"className":605},[],[607],{"type":51,"value":608},"Theme.SecondaryText",{"type":45,"tag":574,"props":610,"children":611},{},[612],{"type":45,"tag":65,"props":613,"children":615},{"className":614},[],[616],{"type":51,"value":617},"TextFillColorSecondaryBrush",{"type":45,"tag":574,"props":619,"children":620},{},[621],{"type":51,"value":622},"Captions, subtitles, and supplementary info",{"type":45,"tag":547,"props":624,"children":625},{},[626,635,644],{"type":45,"tag":574,"props":627,"children":628},{},[629],{"type":45,"tag":65,"props":630,"children":632},{"className":631},[],[633],{"type":51,"value":634},"Theme.TertiaryText",{"type":45,"tag":574,"props":636,"children":637},{},[638],{"type":45,"tag":65,"props":639,"children":641},{"className":640},[],[642],{"type":51,"value":643},"TextFillColorTertiaryBrush",{"type":45,"tag":574,"props":645,"children":646},{},[647],{"type":51,"value":648},"Placeholder text and disabled secondary content",{"type":45,"tag":547,"props":650,"children":651},{},[652,661,670],{"type":45,"tag":574,"props":653,"children":654},{},[655],{"type":45,"tag":65,"props":656,"children":658},{"className":657},[],[659],{"type":51,"value":660},"Theme.DisabledText",{"type":45,"tag":574,"props":662,"children":663},{},[664],{"type":45,"tag":65,"props":665,"children":667},{"className":666},[],[668],{"type":51,"value":669},"TextFillColorDisabledBrush",{"type":45,"tag":574,"props":671,"children":672},{},[673],{"type":51,"value":674},"Text in disabled controls or inactive states",{"type":45,"tag":547,"props":676,"children":677},{},[678,687,696],{"type":45,"tag":574,"props":679,"children":680},{},[681],{"type":45,"tag":65,"props":682,"children":684},{"className":683},[],[685],{"type":51,"value":686},"Theme.AccentText",{"type":45,"tag":574,"props":688,"children":689},{},[690],{"type":45,"tag":65,"props":691,"children":693},{"className":692},[],[694],{"type":51,"value":695},"AccentTextFillColorPrimaryBrush",{"type":45,"tag":574,"props":697,"children":698},{},[699],{"type":51,"value":700},"Hyperlinks, accent-colored labels, and interactive text",{"type":45,"tag":54,"props":702,"children":703},{},[704],{"type":45,"tag":112,"props":705,"children":706},{},[707],{"type":51,"value":708},"Accent fill:",{"type":45,"tag":539,"props":710,"children":711},{},[712,730],{"type":45,"tag":543,"props":713,"children":714},{},[715],{"type":45,"tag":547,"props":716,"children":717},{},[718,722,726],{"type":45,"tag":551,"props":719,"children":720},{},[721],{"type":51,"value":555},{"type":45,"tag":551,"props":723,"children":724},{},[725],{"type":51,"value":560},{"type":45,"tag":551,"props":727,"children":728},{},[729],{"type":51,"value":565},{"type":45,"tag":567,"props":731,"children":732},{},[733,759,785,811],{"type":45,"tag":547,"props":734,"children":735},{},[736,745,754],{"type":45,"tag":574,"props":737,"children":738},{},[739],{"type":45,"tag":65,"props":740,"children":742},{"className":741},[],[743],{"type":51,"value":744},"Theme.Accent",{"type":45,"tag":574,"props":746,"children":747},{},[748],{"type":45,"tag":65,"props":749,"children":751},{"className":750},[],[752],{"type":51,"value":753},"AccentFillColorDefaultBrush",{"type":45,"tag":574,"props":755,"children":756},{},[757],{"type":51,"value":758},"Primary accent buttons and controls at rest",{"type":45,"tag":547,"props":760,"children":761},{},[762,771,780],{"type":45,"tag":574,"props":763,"children":764},{},[765],{"type":45,"tag":65,"props":766,"children":768},{"className":767},[],[769],{"type":51,"value":770},"Theme.AccentSecondary",{"type":45,"tag":574,"props":772,"children":773},{},[774],{"type":45,"tag":65,"props":775,"children":777},{"className":776},[],[778],{"type":51,"value":779},"AccentFillColorSecondaryBrush",{"type":45,"tag":574,"props":781,"children":782},{},[783],{"type":51,"value":784},"Accent button hover state",{"type":45,"tag":547,"props":786,"children":787},{},[788,797,806],{"type":45,"tag":574,"props":789,"children":790},{},[791],{"type":45,"tag":65,"props":792,"children":794},{"className":793},[],[795],{"type":51,"value":796},"Theme.AccentTertiary",{"type":45,"tag":574,"props":798,"children":799},{},[800],{"type":45,"tag":65,"props":801,"children":803},{"className":802},[],[804],{"type":51,"value":805},"AccentFillColorTertiaryBrush",{"type":45,"tag":574,"props":807,"children":808},{},[809],{"type":51,"value":810},"Accent button pressed state",{"type":45,"tag":547,"props":812,"children":813},{},[814,823,832],{"type":45,"tag":574,"props":815,"children":816},{},[817],{"type":45,"tag":65,"props":818,"children":820},{"className":819},[],[821],{"type":51,"value":822},"Theme.AccentDisabled",{"type":45,"tag":574,"props":824,"children":825},{},[826],{"type":45,"tag":65,"props":827,"children":829},{"className":828},[],[830],{"type":51,"value":831},"AccentFillColorDisabledBrush",{"type":45,"tag":574,"props":833,"children":834},{},[835],{"type":51,"value":836},"Disabled accent controls",{"type":45,"tag":54,"props":838,"children":839},{},[840],{"type":45,"tag":112,"props":841,"children":842},{},[843],{"type":51,"value":844},"Control fill:",{"type":45,"tag":539,"props":846,"children":847},{},[848,866],{"type":45,"tag":543,"props":849,"children":850},{},[851],{"type":45,"tag":547,"props":852,"children":853},{},[854,858,862],{"type":45,"tag":551,"props":855,"children":856},{},[857],{"type":51,"value":555},{"type":45,"tag":551,"props":859,"children":860},{},[861],{"type":51,"value":560},{"type":45,"tag":551,"props":863,"children":864},{},[865],{"type":51,"value":565},{"type":45,"tag":567,"props":867,"children":868},{},[869,895,921,947,973],{"type":45,"tag":547,"props":870,"children":871},{},[872,881,890],{"type":45,"tag":574,"props":873,"children":874},{},[875],{"type":45,"tag":65,"props":876,"children":878},{"className":877},[],[879],{"type":51,"value":880},"Theme.ControlFill",{"type":45,"tag":574,"props":882,"children":883},{},[884],{"type":45,"tag":65,"props":885,"children":887},{"className":886},[],[888],{"type":51,"value":889},"ControlFillColorDefaultBrush",{"type":45,"tag":574,"props":891,"children":892},{},[893],{"type":51,"value":894},"Default rest state for standard controls",{"type":45,"tag":547,"props":896,"children":897},{},[898,907,916],{"type":45,"tag":574,"props":899,"children":900},{},[901],{"type":45,"tag":65,"props":902,"children":904},{"className":903},[],[905],{"type":51,"value":906},"Theme.ControlFillSecondary",{"type":45,"tag":574,"props":908,"children":909},{},[910],{"type":45,"tag":65,"props":911,"children":913},{"className":912},[],[914],{"type":51,"value":915},"ControlFillColorSecondaryBrush",{"type":45,"tag":574,"props":917,"children":918},{},[919],{"type":51,"value":920},"Hover state of standard controls",{"type":45,"tag":547,"props":922,"children":923},{},[924,933,942],{"type":45,"tag":574,"props":925,"children":926},{},[927],{"type":45,"tag":65,"props":928,"children":930},{"className":929},[],[931],{"type":51,"value":932},"Theme.ControlFillTertiary",{"type":45,"tag":574,"props":934,"children":935},{},[936],{"type":45,"tag":65,"props":937,"children":939},{"className":938},[],[940],{"type":51,"value":941},"ControlFillColorTertiaryBrush",{"type":45,"tag":574,"props":943,"children":944},{},[945],{"type":51,"value":946},"Pressed state of standard controls",{"type":45,"tag":547,"props":948,"children":949},{},[950,959,968],{"type":45,"tag":574,"props":951,"children":952},{},[953],{"type":45,"tag":65,"props":954,"children":956},{"className":955},[],[957],{"type":51,"value":958},"Theme.ControlFillDisabled",{"type":45,"tag":574,"props":960,"children":961},{},[962],{"type":45,"tag":65,"props":963,"children":965},{"className":964},[],[966],{"type":51,"value":967},"ControlFillColorDisabledBrush",{"type":45,"tag":574,"props":969,"children":970},{},[971],{"type":51,"value":972},"Disabled state of standard controls",{"type":45,"tag":547,"props":974,"children":975},{},[976,985,994],{"type":45,"tag":574,"props":977,"children":978},{},[979],{"type":45,"tag":65,"props":980,"children":982},{"className":981},[],[983],{"type":51,"value":984},"Theme.ControlFillInputActive",{"type":45,"tag":574,"props":986,"children":987},{},[988],{"type":45,"tag":65,"props":989,"children":991},{"className":990},[],[992],{"type":51,"value":993},"ControlFillColorInputActiveBrush",{"type":45,"tag":574,"props":995,"children":996},{},[997],{"type":51,"value":998},"Active\u002Ffocused text input field backgrounds",{"type":45,"tag":54,"props":1000,"children":1001},{},[1002],{"type":45,"tag":112,"props":1003,"children":1004},{},[1005],{"type":51,"value":1006},"Surfaces & backgrounds:",{"type":45,"tag":539,"props":1008,"children":1009},{},[1010,1028],{"type":45,"tag":543,"props":1011,"children":1012},{},[1013],{"type":45,"tag":547,"props":1014,"children":1015},{},[1016,1020,1024],{"type":45,"tag":551,"props":1017,"children":1018},{},[1019],{"type":51,"value":555},{"type":45,"tag":551,"props":1021,"children":1022},{},[1023],{"type":51,"value":560},{"type":45,"tag":551,"props":1025,"children":1026},{},[1027],{"type":51,"value":565},{"type":45,"tag":567,"props":1029,"children":1030},{},[1031,1057,1083,1109,1135],{"type":45,"tag":547,"props":1032,"children":1033},{},[1034,1043,1052],{"type":45,"tag":574,"props":1035,"children":1036},{},[1037],{"type":45,"tag":65,"props":1038,"children":1040},{"className":1039},[],[1041],{"type":51,"value":1042},"Theme.SolidBackground",{"type":45,"tag":574,"props":1044,"children":1045},{},[1046],{"type":45,"tag":65,"props":1047,"children":1049},{"className":1048},[],[1050],{"type":51,"value":1051},"SolidBackgroundFillColorBaseBrush",{"type":45,"tag":574,"props":1053,"children":1054},{},[1055],{"type":51,"value":1056},"App and page-level background (base layer)",{"type":45,"tag":547,"props":1058,"children":1059},{},[1060,1069,1078],{"type":45,"tag":574,"props":1061,"children":1062},{},[1063],{"type":45,"tag":65,"props":1064,"children":1066},{"className":1065},[],[1067],{"type":51,"value":1068},"Theme.CardBackground",{"type":45,"tag":574,"props":1070,"children":1071},{},[1072],{"type":45,"tag":65,"props":1073,"children":1075},{"className":1074},[],[1076],{"type":51,"value":1077},"CardBackgroundFillColorDefaultBrush",{"type":45,"tag":574,"props":1079,"children":1080},{},[1081],{"type":51,"value":1082},"Card and elevated surface backgrounds",{"type":45,"tag":547,"props":1084,"children":1085},{},[1086,1095,1104],{"type":45,"tag":574,"props":1087,"children":1088},{},[1089],{"type":45,"tag":65,"props":1090,"children":1092},{"className":1091},[],[1093],{"type":51,"value":1094},"Theme.LayerFill",{"type":45,"tag":574,"props":1096,"children":1097},{},[1098],{"type":45,"tag":65,"props":1099,"children":1101},{"className":1100},[],[1102],{"type":51,"value":1103},"LayerFillColorDefaultBrush",{"type":45,"tag":574,"props":1105,"children":1106},{},[1107],{"type":51,"value":1108},"Flyout, dialog, and pane backgrounds",{"type":45,"tag":547,"props":1110,"children":1111},{},[1112,1121,1130],{"type":45,"tag":574,"props":1113,"children":1114},{},[1115],{"type":45,"tag":65,"props":1116,"children":1118},{"className":1117},[],[1119],{"type":51,"value":1120},"Theme.SubtleFill",{"type":45,"tag":574,"props":1122,"children":1123},{},[1124],{"type":45,"tag":65,"props":1125,"children":1127},{"className":1126},[],[1128],{"type":51,"value":1129},"SubtleFillColorSecondaryBrush",{"type":45,"tag":574,"props":1131,"children":1132},{},[1133],{"type":51,"value":1134},"Subtle control highlights and section backgrounds",{"type":45,"tag":547,"props":1136,"children":1137},{},[1138,1147,1156],{"type":45,"tag":574,"props":1139,"children":1140},{},[1141],{"type":45,"tag":65,"props":1142,"children":1144},{"className":1143},[],[1145],{"type":51,"value":1146},"Theme.SmokeFill",{"type":45,"tag":574,"props":1148,"children":1149},{},[1150],{"type":45,"tag":65,"props":1151,"children":1153},{"className":1152},[],[1154],{"type":51,"value":1155},"SmokeFillColorDefaultBrush",{"type":45,"tag":574,"props":1157,"children":1158},{},[1159],{"type":51,"value":1160},"Semi-transparent overlay behind modal dialogs",{"type":45,"tag":54,"props":1162,"children":1163},{},[1164],{"type":45,"tag":112,"props":1165,"children":1166},{},[1167],{"type":51,"value":1168},"Stroke & border:",{"type":45,"tag":539,"props":1170,"children":1171},{},[1172,1190],{"type":45,"tag":543,"props":1173,"children":1174},{},[1175],{"type":45,"tag":547,"props":1176,"children":1177},{},[1178,1182,1186],{"type":45,"tag":551,"props":1179,"children":1180},{},[1181],{"type":51,"value":555},{"type":45,"tag":551,"props":1183,"children":1184},{},[1185],{"type":51,"value":560},{"type":45,"tag":551,"props":1187,"children":1188},{},[1189],{"type":51,"value":565},{"type":45,"tag":567,"props":1191,"children":1192},{},[1193,1219,1245,1271,1297],{"type":45,"tag":547,"props":1194,"children":1195},{},[1196,1205,1214],{"type":45,"tag":574,"props":1197,"children":1198},{},[1199],{"type":45,"tag":65,"props":1200,"children":1202},{"className":1201},[],[1203],{"type":51,"value":1204},"Theme.CardStroke",{"type":45,"tag":574,"props":1206,"children":1207},{},[1208],{"type":45,"tag":65,"props":1209,"children":1211},{"className":1210},[],[1212],{"type":51,"value":1213},"CardStrokeColorDefaultBrush",{"type":45,"tag":574,"props":1215,"children":1216},{},[1217],{"type":51,"value":1218},"Borders on cards and elevated containers",{"type":45,"tag":547,"props":1220,"children":1221},{},[1222,1231,1240],{"type":45,"tag":574,"props":1223,"children":1224},{},[1225],{"type":45,"tag":65,"props":1226,"children":1228},{"className":1227},[],[1229],{"type":51,"value":1230},"Theme.SurfaceStroke",{"type":45,"tag":574,"props":1232,"children":1233},{},[1234],{"type":45,"tag":65,"props":1235,"children":1237},{"className":1236},[],[1238],{"type":51,"value":1239},"SurfaceStrokeColorDefaultBrush",{"type":45,"tag":574,"props":1241,"children":1242},{},[1243],{"type":51,"value":1244},"Borders on flyouts, dialogs, and pane surfaces",{"type":45,"tag":547,"props":1246,"children":1247},{},[1248,1257,1266],{"type":45,"tag":574,"props":1249,"children":1250},{},[1251],{"type":45,"tag":65,"props":1252,"children":1254},{"className":1253},[],[1255],{"type":51,"value":1256},"Theme.DividerStroke",{"type":45,"tag":574,"props":1258,"children":1259},{},[1260],{"type":45,"tag":65,"props":1261,"children":1263},{"className":1262},[],[1264],{"type":51,"value":1265},"DividerStrokeColorDefaultBrush",{"type":45,"tag":574,"props":1267,"children":1268},{},[1269],{"type":51,"value":1270},"Horizontal or vertical dividers between content",{"type":45,"tag":547,"props":1272,"children":1273},{},[1274,1283,1292],{"type":45,"tag":574,"props":1275,"children":1276},{},[1277],{"type":45,"tag":65,"props":1278,"children":1280},{"className":1279},[],[1281],{"type":51,"value":1282},"Theme.ControlStroke",{"type":45,"tag":574,"props":1284,"children":1285},{},[1286],{"type":45,"tag":65,"props":1287,"children":1289},{"className":1288},[],[1290],{"type":51,"value":1291},"ControlStrokeColorDefaultBrush",{"type":45,"tag":574,"props":1293,"children":1294},{},[1295],{"type":51,"value":1296},"Borders on interactive controls at rest",{"type":45,"tag":547,"props":1298,"children":1299},{},[1300,1309,1318],{"type":45,"tag":574,"props":1301,"children":1302},{},[1303],{"type":45,"tag":65,"props":1304,"children":1306},{"className":1305},[],[1307],{"type":51,"value":1308},"Theme.ControlStrokeSecondary",{"type":45,"tag":574,"props":1310,"children":1311},{},[1312],{"type":45,"tag":65,"props":1313,"children":1315},{"className":1314},[],[1316],{"type":51,"value":1317},"ControlStrokeColorSecondaryBrush",{"type":45,"tag":574,"props":1319,"children":1320},{},[1321],{"type":51,"value":1322},"Bottom edge of controls for depth effect",{"type":45,"tag":54,"props":1324,"children":1325},{},[1326],{"type":45,"tag":112,"props":1327,"children":1328},{},[1329],{"type":51,"value":1330},"System signal:",{"type":45,"tag":539,"props":1332,"children":1333},{},[1334,1352],{"type":45,"tag":543,"props":1335,"children":1336},{},[1337],{"type":45,"tag":547,"props":1338,"children":1339},{},[1340,1344,1348],{"type":45,"tag":551,"props":1341,"children":1342},{},[1343],{"type":51,"value":555},{"type":45,"tag":551,"props":1345,"children":1346},{},[1347],{"type":51,"value":560},{"type":45,"tag":551,"props":1349,"children":1350},{},[1351],{"type":51,"value":565},{"type":45,"tag":567,"props":1353,"children":1354},{},[1355,1381,1406,1431,1456,1482],{"type":45,"tag":547,"props":1356,"children":1357},{},[1358,1367,1376],{"type":45,"tag":574,"props":1359,"children":1360},{},[1361],{"type":45,"tag":65,"props":1362,"children":1364},{"className":1363},[],[1365],{"type":51,"value":1366},"Theme.SystemAttention",{"type":45,"tag":574,"props":1368,"children":1369},{},[1370],{"type":45,"tag":65,"props":1371,"children":1373},{"className":1372},[],[1374],{"type":51,"value":1375},"SystemFillColorAttentionBrush",{"type":45,"tag":574,"props":1377,"children":1378},{},[1379],{"type":51,"value":1380},"Informational indicators and badges",{"type":45,"tag":547,"props":1382,"children":1383},{},[1384,1392,1401],{"type":45,"tag":574,"props":1385,"children":1386},{},[1387],{"type":45,"tag":65,"props":1388,"children":1390},{"className":1389},[],[1391],{"type":51,"value":519},{"type":45,"tag":574,"props":1393,"children":1394},{},[1395],{"type":45,"tag":65,"props":1396,"children":1398},{"className":1397},[],[1399],{"type":51,"value":1400},"SystemFillColorSuccessBrush",{"type":45,"tag":574,"props":1402,"children":1403},{},[1404],{"type":51,"value":1405},"Success states and confirmations",{"type":45,"tag":547,"props":1407,"children":1408},{},[1409,1417,1426],{"type":45,"tag":574,"props":1410,"children":1411},{},[1412],{"type":45,"tag":65,"props":1413,"children":1415},{"className":1414},[],[1416],{"type":51,"value":527},{"type":45,"tag":574,"props":1418,"children":1419},{},[1420],{"type":45,"tag":65,"props":1421,"children":1423},{"className":1422},[],[1424],{"type":51,"value":1425},"SystemFillColorCautionBrush",{"type":45,"tag":574,"props":1427,"children":1428},{},[1429],{"type":51,"value":1430},"Warning states and cautionary indicators",{"type":45,"tag":547,"props":1432,"children":1433},{},[1434,1442,1451],{"type":45,"tag":574,"props":1435,"children":1436},{},[1437],{"type":45,"tag":65,"props":1438,"children":1440},{"className":1439},[],[1441],{"type":51,"value":511},{"type":45,"tag":574,"props":1443,"children":1444},{},[1445],{"type":45,"tag":65,"props":1446,"children":1448},{"className":1447},[],[1449],{"type":51,"value":1450},"SystemFillColorCriticalBrush",{"type":45,"tag":574,"props":1452,"children":1453},{},[1454],{"type":51,"value":1455},"Error states and critical alerts",{"type":45,"tag":547,"props":1457,"children":1458},{},[1459,1468,1477],{"type":45,"tag":574,"props":1460,"children":1461},{},[1462],{"type":45,"tag":65,"props":1463,"children":1465},{"className":1464},[],[1466],{"type":51,"value":1467},"Theme.SystemNeutral",{"type":45,"tag":574,"props":1469,"children":1470},{},[1471],{"type":45,"tag":65,"props":1472,"children":1474},{"className":1473},[],[1475],{"type":51,"value":1476},"SystemFillColorNeutralBrush",{"type":45,"tag":574,"props":1478,"children":1479},{},[1480],{"type":51,"value":1481},"Neutral status indicators",{"type":45,"tag":547,"props":1483,"children":1484},{},[1485,1494,1503],{"type":45,"tag":574,"props":1486,"children":1487},{},[1488],{"type":45,"tag":65,"props":1489,"children":1491},{"className":1490},[],[1492],{"type":51,"value":1493},"Theme.SystemSolidNeutral",{"type":45,"tag":574,"props":1495,"children":1496},{},[1497],{"type":45,"tag":65,"props":1498,"children":1500},{"className":1499},[],[1501],{"type":51,"value":1502},"SystemFillColorSolidNeutralBrush",{"type":45,"tag":574,"props":1504,"children":1505},{},[1506],{"type":51,"value":1507},"Solid neutral fill for icons and non-text indicators",{"type":45,"tag":54,"props":1509,"children":1510},{},[1511],{"type":45,"tag":112,"props":1512,"children":1513},{},[1514],{"type":51,"value":1515},"System signal backgrounds:",{"type":45,"tag":539,"props":1517,"children":1518},{},[1519,1537],{"type":45,"tag":543,"props":1520,"children":1521},{},[1522],{"type":45,"tag":547,"props":1523,"children":1524},{},[1525,1529,1533],{"type":45,"tag":551,"props":1526,"children":1527},{},[1528],{"type":51,"value":555},{"type":45,"tag":551,"props":1530,"children":1531},{},[1532],{"type":51,"value":560},{"type":45,"tag":551,"props":1534,"children":1535},{},[1536],{"type":51,"value":565},{"type":45,"tag":567,"props":1538,"children":1539},{},[1540,1566,1592,1618,1644,1670],{"type":45,"tag":547,"props":1541,"children":1542},{},[1543,1552,1561],{"type":45,"tag":574,"props":1544,"children":1545},{},[1546],{"type":45,"tag":65,"props":1547,"children":1549},{"className":1548},[],[1550],{"type":51,"value":1551},"Theme.SystemAttentionBackground",{"type":45,"tag":574,"props":1553,"children":1554},{},[1555],{"type":45,"tag":65,"props":1556,"children":1558},{"className":1557},[],[1559],{"type":51,"value":1560},"SystemFillColorAttentionBackgroundBrush",{"type":45,"tag":574,"props":1562,"children":1563},{},[1564],{"type":51,"value":1565},"Background for attention\u002Finfo banners",{"type":45,"tag":547,"props":1567,"children":1568},{},[1569,1578,1587],{"type":45,"tag":574,"props":1570,"children":1571},{},[1572],{"type":45,"tag":65,"props":1573,"children":1575},{"className":1574},[],[1576],{"type":51,"value":1577},"Theme.SystemSuccessBackground",{"type":45,"tag":574,"props":1579,"children":1580},{},[1581],{"type":45,"tag":65,"props":1582,"children":1584},{"className":1583},[],[1585],{"type":51,"value":1586},"SystemFillColorSuccessBackgroundBrush",{"type":45,"tag":574,"props":1588,"children":1589},{},[1590],{"type":51,"value":1591},"Background for success banners and info bars",{"type":45,"tag":547,"props":1593,"children":1594},{},[1595,1604,1613],{"type":45,"tag":574,"props":1596,"children":1597},{},[1598],{"type":45,"tag":65,"props":1599,"children":1601},{"className":1600},[],[1602],{"type":51,"value":1603},"Theme.SystemCautionBackground",{"type":45,"tag":574,"props":1605,"children":1606},{},[1607],{"type":45,"tag":65,"props":1608,"children":1610},{"className":1609},[],[1611],{"type":51,"value":1612},"SystemFillColorCautionBackgroundBrush",{"type":45,"tag":574,"props":1614,"children":1615},{},[1616],{"type":51,"value":1617},"Background for warning banners and info bars",{"type":45,"tag":547,"props":1619,"children":1620},{},[1621,1630,1639],{"type":45,"tag":574,"props":1622,"children":1623},{},[1624],{"type":45,"tag":65,"props":1625,"children":1627},{"className":1626},[],[1628],{"type":51,"value":1629},"Theme.SystemCriticalBackground",{"type":45,"tag":574,"props":1631,"children":1632},{},[1633],{"type":45,"tag":65,"props":1634,"children":1636},{"className":1635},[],[1637],{"type":51,"value":1638},"SystemFillColorCriticalBackgroundBrush",{"type":45,"tag":574,"props":1640,"children":1641},{},[1642],{"type":51,"value":1643},"Background for error banners and info bars",{"type":45,"tag":547,"props":1645,"children":1646},{},[1647,1656,1665],{"type":45,"tag":574,"props":1648,"children":1649},{},[1650],{"type":45,"tag":65,"props":1651,"children":1653},{"className":1652},[],[1654],{"type":51,"value":1655},"Theme.SystemNeutralBackground",{"type":45,"tag":574,"props":1657,"children":1658},{},[1659],{"type":45,"tag":65,"props":1660,"children":1662},{"className":1661},[],[1663],{"type":51,"value":1664},"SystemFillColorNeutralBackgroundBrush",{"type":45,"tag":574,"props":1666,"children":1667},{},[1668],{"type":51,"value":1669},"Background for neutral status banners",{"type":45,"tag":547,"props":1671,"children":1672},{},[1673,1682,1691],{"type":45,"tag":574,"props":1674,"children":1675},{},[1676],{"type":45,"tag":65,"props":1677,"children":1679},{"className":1678},[],[1680],{"type":51,"value":1681},"Theme.SystemSolidAttention",{"type":45,"tag":574,"props":1683,"children":1684},{},[1685],{"type":45,"tag":65,"props":1686,"children":1688},{"className":1687},[],[1689],{"type":51,"value":1690},"SystemFillColorSolidAttentionBackgroundBrush",{"type":45,"tag":574,"props":1692,"children":1693},{},[1694],{"type":51,"value":1695},"Solid background for high-contrast attention surfaces",{"type":45,"tag":54,"props":1697,"children":1698},{},[1699,1701,1707],{"type":51,"value":1700},"For any WinUI resource not exposed as a named token, use ",{"type":45,"tag":65,"props":1702,"children":1704},{"className":1703},[],[1705],{"type":51,"value":1706},"Theme.Ref(\"ResourceKeyBrush\")",{"type":51,"value":170},{"type":45,"tag":458,"props":1709,"children":1711},{"id":1710},"custom-theme-resource-references",[1712],{"type":51,"value":1713},"Custom Theme Resource References",{"type":45,"tag":346,"props":1715,"children":1717},{"className":348,"code":1716,"language":350,"meta":351,"style":351},"\u002F\u002F Reference any WinUI resource by key\nBorder(child).Background(Theme.Ref(\"AcrylicBackgroundFillColorDefaultBrush\"))\nBorder(child).WithBorder(Theme.Ref(\"SurfaceStrokeColorFlyoutBrush\"), 1)\n",[1718],{"type":45,"tag":65,"props":1719,"children":1720},{"__ignoreMap":351},[1721,1729,1737],{"type":45,"tag":357,"props":1722,"children":1723},{"class":359,"line":360},[1724],{"type":45,"tag":357,"props":1725,"children":1726},{},[1727],{"type":51,"value":1728},"\u002F\u002F Reference any WinUI resource by key\n",{"type":45,"tag":357,"props":1730,"children":1731},{"class":359,"line":369},[1732],{"type":45,"tag":357,"props":1733,"children":1734},{},[1735],{"type":51,"value":1736},"Border(child).Background(Theme.Ref(\"AcrylicBackgroundFillColorDefaultBrush\"))\n",{"type":45,"tag":357,"props":1738,"children":1739},{"class":359,"line":378},[1740],{"type":45,"tag":357,"props":1741,"children":1742},{},[1743],{"type":51,"value":1744},"Border(child).WithBorder(Theme.Ref(\"SurfaceStrokeColorFlyoutBrush\"), 1)\n",{"type":45,"tag":458,"props":1746,"children":1748},{"id":1747},"per-subtree-theme-override",[1749],{"type":51,"value":1750},"Per-Subtree Theme Override",{"type":45,"tag":54,"props":1752,"children":1753},{},[1754],{"type":51,"value":1755},"Force a subtree to a specific theme variant:",{"type":45,"tag":346,"props":1757,"children":1759},{"className":348,"code":1758,"language":350,"meta":351,"style":351},"\u002F\u002F Sidebar always renders in dark theme\nVStack(sidebarContent).RequestedTheme(ElementTheme.Dark)\n",[1760],{"type":45,"tag":65,"props":1761,"children":1762},{"__ignoreMap":351},[1763,1771],{"type":45,"tag":357,"props":1764,"children":1765},{"class":359,"line":360},[1766],{"type":45,"tag":357,"props":1767,"children":1768},{},[1769],{"type":51,"value":1770},"\u002F\u002F Sidebar always renders in dark theme\n",{"type":45,"tag":357,"props":1772,"children":1773},{"class":359,"line":369},[1774],{"type":45,"tag":357,"props":1775,"children":1776},{},[1777],{"type":51,"value":1778},"VStack(sidebarContent).RequestedTheme(ElementTheme.Dark)\n",{"type":45,"tag":54,"props":1780,"children":1781},{},[1782,1784,1790],{"type":51,"value":1783},"See ",{"type":45,"tag":159,"props":1785,"children":1787},{"href":1786},"design-docs\u002Ftheme-aware-resources.md",[1788],{"type":51,"value":1789},"theme-aware-resources.md",{"type":51,"value":1791}," for full token list and pairing rules.",{"type":45,"tag":326,"props":1793,"children":1795},{"id":1794},"_2-lightweight-styling-per-control-resource-overrides",[1796],{"type":51,"value":1797},"2. Lightweight Styling (Per-Control Resource Overrides)",{"type":45,"tag":54,"props":1799,"children":1800},{},[1801,1803,1809],{"type":51,"value":1802},"Override control template resources using ",{"type":45,"tag":65,"props":1804,"children":1806},{"className":1805},[],[1807],{"type":51,"value":1808},".Resources()",{"type":51,"value":1810}," to customize visual states without replacing the entire template:",{"type":45,"tag":346,"props":1812,"children":1814},{"className":348,"code":1813,"language":350,"meta":351,"style":351},"\u002F\u002F Correct: override button resources for a subtle button\nButton(\"Action\", onClick).Resources(r => r\n    .Set(\"ButtonBackground\", Theme.SubtleFill)\n    .Set(\"ButtonBackgroundPointerOver\", Theme.Ref(\"SubtleFillColorSecondaryBrush\"))\n    .Set(\"ButtonBackgroundPressed\", Theme.Ref(\"SubtleFillColorTertiaryBrush\"))\n    .Set(\"ButtonBorderBrush\", Theme.SubtleFill)\n    .Set(\"ButtonBorderBrushPointerOver\", Theme.SubtleFill)\n    .Set(\"ButtonBorderBrushPressed\", Theme.SubtleFill))\n\n\u002F\u002F Wrong: setting Background directly — loses hover\u002Fpressed\u002Fdisabled states\nButton(\"Action\", onClick).Background(Theme.SubtleFill)\n",[1815],{"type":45,"tag":65,"props":1816,"children":1817},{"__ignoreMap":351},[1818,1826,1834,1842,1850,1858,1866,1874,1882,1890,1899],{"type":45,"tag":357,"props":1819,"children":1820},{"class":359,"line":360},[1821],{"type":45,"tag":357,"props":1822,"children":1823},{},[1824],{"type":51,"value":1825},"\u002F\u002F Correct: override button resources for a subtle button\n",{"type":45,"tag":357,"props":1827,"children":1828},{"class":359,"line":369},[1829],{"type":45,"tag":357,"props":1830,"children":1831},{},[1832],{"type":51,"value":1833},"Button(\"Action\", onClick).Resources(r => r\n",{"type":45,"tag":357,"props":1835,"children":1836},{"class":359,"line":378},[1837],{"type":45,"tag":357,"props":1838,"children":1839},{},[1840],{"type":51,"value":1841},"    .Set(\"ButtonBackground\", Theme.SubtleFill)\n",{"type":45,"tag":357,"props":1843,"children":1844},{"class":359,"line":387},[1845],{"type":45,"tag":357,"props":1846,"children":1847},{},[1848],{"type":51,"value":1849},"    .Set(\"ButtonBackgroundPointerOver\", Theme.Ref(\"SubtleFillColorSecondaryBrush\"))\n",{"type":45,"tag":357,"props":1851,"children":1852},{"class":359,"line":396},[1853],{"type":45,"tag":357,"props":1854,"children":1855},{},[1856],{"type":51,"value":1857},"    .Set(\"ButtonBackgroundPressed\", Theme.Ref(\"SubtleFillColorTertiaryBrush\"))\n",{"type":45,"tag":357,"props":1859,"children":1860},{"class":359,"line":406},[1861],{"type":45,"tag":357,"props":1862,"children":1863},{},[1864],{"type":51,"value":1865},"    .Set(\"ButtonBorderBrush\", Theme.SubtleFill)\n",{"type":45,"tag":357,"props":1867,"children":1868},{"class":359,"line":415},[1869],{"type":45,"tag":357,"props":1870,"children":1871},{},[1872],{"type":51,"value":1873},"    .Set(\"ButtonBorderBrushPointerOver\", Theme.SubtleFill)\n",{"type":45,"tag":357,"props":1875,"children":1876},{"class":359,"line":424},[1877],{"type":45,"tag":357,"props":1878,"children":1879},{},[1880],{"type":51,"value":1881},"    .Set(\"ButtonBorderBrushPressed\", Theme.SubtleFill))\n",{"type":45,"tag":357,"props":1883,"children":1885},{"class":359,"line":1884},9,[1886],{"type":45,"tag":357,"props":1887,"children":1888},{"emptyLinePlaceholder":400},[1889],{"type":51,"value":403},{"type":45,"tag":357,"props":1891,"children":1893},{"class":359,"line":1892},10,[1894],{"type":45,"tag":357,"props":1895,"children":1896},{},[1897],{"type":51,"value":1898},"\u002F\u002F Wrong: setting Background directly — loses hover\u002Fpressed\u002Fdisabled states\n",{"type":45,"tag":357,"props":1900,"children":1902},{"class":359,"line":1901},11,[1903],{"type":45,"tag":357,"props":1904,"children":1905},{},[1906],{"type":51,"value":1907},"Button(\"Action\", onClick).Background(Theme.SubtleFill)\n",{"type":45,"tag":54,"props":1909,"children":1910},{},[1911,1913,1919,1921,1927,1929,1935],{"type":51,"value":1912},"Resource keys target the ",{"type":45,"tag":65,"props":1914,"children":1916},{"className":1915},[],[1917],{"type":51,"value":1918},"SolidColorBrush",{"type":51,"value":1920}," resource (ending in ",{"type":45,"tag":65,"props":1922,"children":1924},{"className":1923},[],[1925],{"type":51,"value":1926},"Brush",{"type":51,"value":1928},"), not the ",{"type":45,"tag":65,"props":1930,"children":1932},{"className":1931},[],[1933],{"type":51,"value":1934},"Color",{"type":51,"value":170},{"type":45,"tag":346,"props":1937,"children":1939},{"className":348,"code":1938,"language":350,"meta":351,"style":351},"\u002F\u002F Correct\n.Set(\"ButtonBackground\", Theme.Ref(\"ControlFillColorDefaultBrush\"))\n\n\u002F\u002F Wrong — Color, not Brush\n.Set(\"ButtonBackground\", Theme.Ref(\"ControlFillColorDefault\"))\n",[1940],{"type":45,"tag":65,"props":1941,"children":1942},{"__ignoreMap":351},[1943,1951,1959,1966,1974],{"type":45,"tag":357,"props":1944,"children":1945},{"class":359,"line":360},[1946],{"type":45,"tag":357,"props":1947,"children":1948},{},[1949],{"type":51,"value":1950},"\u002F\u002F Correct\n",{"type":45,"tag":357,"props":1952,"children":1953},{"class":359,"line":369},[1954],{"type":45,"tag":357,"props":1955,"children":1956},{},[1957],{"type":51,"value":1958},".Set(\"ButtonBackground\", Theme.Ref(\"ControlFillColorDefaultBrush\"))\n",{"type":45,"tag":357,"props":1960,"children":1961},{"class":359,"line":378},[1962],{"type":45,"tag":357,"props":1963,"children":1964},{"emptyLinePlaceholder":400},[1965],{"type":51,"value":403},{"type":45,"tag":357,"props":1967,"children":1968},{"class":359,"line":387},[1969],{"type":45,"tag":357,"props":1970,"children":1971},{},[1972],{"type":51,"value":1973},"\u002F\u002F Wrong — Color, not Brush\n",{"type":45,"tag":357,"props":1975,"children":1976},{"class":359,"line":396},[1977],{"type":45,"tag":357,"props":1978,"children":1979},{},[1980],{"type":51,"value":1981},".Set(\"ButtonBackground\", Theme.Ref(\"ControlFillColorDefault\"))\n",{"type":45,"tag":326,"props":1983,"children":1985},{"id":1984},"_3-high-contrast-rules-strict",[1986],{"type":51,"value":1987},"3. High Contrast Rules (Strict)",{"type":45,"tag":54,"props":1989,"children":1990},{},[1991],{"type":51,"value":1992},"High Contrast users rely on a fixed set of 8 system color brushes. Your UI must work with these constraints.",{"type":45,"tag":54,"props":1994,"children":1995},{},[1996],{"type":45,"tag":112,"props":1997,"children":1998},{},[1999],{"type":51,"value":2000},"Allowed HC system brushes:",{"type":45,"tag":539,"props":2002,"children":2003},{},[2004,2018],{"type":45,"tag":543,"props":2005,"children":2006},{},[2007],{"type":45,"tag":547,"props":2008,"children":2009},{},[2010,2014],{"type":45,"tag":551,"props":2011,"children":2012},{},[2013],{"type":51,"value":1926},{"type":45,"tag":551,"props":2015,"children":2016},{},[2017],{"type":51,"value":565},{"type":45,"tag":567,"props":2019,"children":2020},{},[2021,2038,2055,2072,2089,2106,2123,2140],{"type":45,"tag":547,"props":2022,"children":2023},{},[2024,2033],{"type":45,"tag":574,"props":2025,"children":2026},{},[2027],{"type":45,"tag":65,"props":2028,"children":2030},{"className":2029},[],[2031],{"type":51,"value":2032},"SystemColorWindowTextColorBrush",{"type":45,"tag":574,"props":2034,"children":2035},{},[2036],{"type":51,"value":2037},"Text on window background",{"type":45,"tag":547,"props":2039,"children":2040},{},[2041,2050],{"type":45,"tag":574,"props":2042,"children":2043},{},[2044],{"type":45,"tag":65,"props":2045,"children":2047},{"className":2046},[],[2048],{"type":51,"value":2049},"SystemColorWindowColorBrush",{"type":45,"tag":574,"props":2051,"children":2052},{},[2053],{"type":51,"value":2054},"Window\u002Fcontent background",{"type":45,"tag":547,"props":2056,"children":2057},{},[2058,2067],{"type":45,"tag":574,"props":2059,"children":2060},{},[2061],{"type":45,"tag":65,"props":2062,"children":2064},{"className":2063},[],[2065],{"type":51,"value":2066},"SystemColorHighlightTextColorBrush",{"type":45,"tag":574,"props":2068,"children":2069},{},[2070],{"type":51,"value":2071},"Selected text foreground",{"type":45,"tag":547,"props":2073,"children":2074},{},[2075,2084],{"type":45,"tag":574,"props":2076,"children":2077},{},[2078],{"type":45,"tag":65,"props":2079,"children":2081},{"className":2080},[],[2082],{"type":51,"value":2083},"SystemColorHighlightColorBrush",{"type":45,"tag":574,"props":2085,"children":2086},{},[2087],{"type":51,"value":2088},"Selection\u002Fhover background",{"type":45,"tag":547,"props":2090,"children":2091},{},[2092,2101],{"type":45,"tag":574,"props":2093,"children":2094},{},[2095],{"type":45,"tag":65,"props":2096,"children":2098},{"className":2097},[],[2099],{"type":51,"value":2100},"SystemColorButtonTextColorBrush",{"type":45,"tag":574,"props":2102,"children":2103},{},[2104],{"type":51,"value":2105},"Button text",{"type":45,"tag":547,"props":2107,"children":2108},{},[2109,2118],{"type":45,"tag":574,"props":2110,"children":2111},{},[2112],{"type":45,"tag":65,"props":2113,"children":2115},{"className":2114},[],[2116],{"type":51,"value":2117},"SystemColorButtonFaceColorBrush",{"type":45,"tag":574,"props":2119,"children":2120},{},[2121],{"type":51,"value":2122},"Button background",{"type":45,"tag":547,"props":2124,"children":2125},{},[2126,2135],{"type":45,"tag":574,"props":2127,"children":2128},{},[2129],{"type":45,"tag":65,"props":2130,"children":2132},{"className":2131},[],[2133],{"type":51,"value":2134},"SystemColorGrayTextColorBrush",{"type":45,"tag":574,"props":2136,"children":2137},{},[2138],{"type":51,"value":2139},"Disabled\u002Finactive text",{"type":45,"tag":547,"props":2141,"children":2142},{},[2143,2152],{"type":45,"tag":574,"props":2144,"children":2145},{},[2146],{"type":45,"tag":65,"props":2147,"children":2149},{"className":2148},[],[2150],{"type":51,"value":2151},"SystemColorHotlightColorBrush",{"type":45,"tag":574,"props":2153,"children":2154},{},[2155],{"type":51,"value":2156},"Hyperlinks",{"type":45,"tag":54,"props":2158,"children":2159},{},[2160],{"type":45,"tag":112,"props":2161,"children":2162},{},[2163],{"type":51,"value":2164},"HC color pairings:",{"type":45,"tag":539,"props":2166,"children":2167},{},[2168,2189],{"type":45,"tag":543,"props":2169,"children":2170},{},[2171],{"type":45,"tag":547,"props":2172,"children":2173},{},[2174,2179,2184],{"type":45,"tag":551,"props":2175,"children":2176},{},[2177],{"type":51,"value":2178},"Background",{"type":45,"tag":551,"props":2180,"children":2181},{},[2182],{"type":51,"value":2183},"Foreground",{"type":45,"tag":551,"props":2185,"children":2186},{},[2187],{"type":51,"value":2188},"Use Case",{"type":45,"tag":567,"props":2190,"children":2191},{},[2192,2218,2244,2270,2295],{"type":45,"tag":547,"props":2193,"children":2194},{},[2195,2204,2213],{"type":45,"tag":574,"props":2196,"children":2197},{},[2198],{"type":45,"tag":65,"props":2199,"children":2201},{"className":2200},[],[2202],{"type":51,"value":2203},"SystemColorWindowColor",{"type":45,"tag":574,"props":2205,"children":2206},{},[2207],{"type":45,"tag":65,"props":2208,"children":2210},{"className":2209},[],[2211],{"type":51,"value":2212},"SystemColorWindowTextColor",{"type":45,"tag":574,"props":2214,"children":2215},{},[2216],{"type":51,"value":2217},"General content",{"type":45,"tag":547,"props":2219,"children":2220},{},[2221,2230,2239],{"type":45,"tag":574,"props":2222,"children":2223},{},[2224],{"type":45,"tag":65,"props":2225,"children":2227},{"className":2226},[],[2228],{"type":51,"value":2229},"SystemColorHighlightColor",{"type":45,"tag":574,"props":2231,"children":2232},{},[2233],{"type":45,"tag":65,"props":2234,"children":2236},{"className":2235},[],[2237],{"type":51,"value":2238},"SystemColorHighlightTextColor",{"type":45,"tag":574,"props":2240,"children":2241},{},[2242],{"type":51,"value":2243},"Selected\u002Fhover states",{"type":45,"tag":547,"props":2245,"children":2246},{},[2247,2256,2265],{"type":45,"tag":574,"props":2248,"children":2249},{},[2250],{"type":45,"tag":65,"props":2251,"children":2253},{"className":2252},[],[2254],{"type":51,"value":2255},"SystemColorButtonFaceColor",{"type":45,"tag":574,"props":2257,"children":2258},{},[2259],{"type":45,"tag":65,"props":2260,"children":2262},{"className":2261},[],[2263],{"type":51,"value":2264},"SystemColorButtonTextColor",{"type":45,"tag":574,"props":2266,"children":2267},{},[2268],{"type":51,"value":2269},"Buttons",{"type":45,"tag":547,"props":2271,"children":2272},{},[2273,2281,2290],{"type":45,"tag":574,"props":2274,"children":2275},{},[2276],{"type":45,"tag":65,"props":2277,"children":2279},{"className":2278},[],[2280],{"type":51,"value":2203},{"type":45,"tag":574,"props":2282,"children":2283},{},[2284],{"type":45,"tag":65,"props":2285,"children":2287},{"className":2286},[],[2288],{"type":51,"value":2289},"SystemColorGrayTextColor",{"type":45,"tag":574,"props":2291,"children":2292},{},[2293],{"type":51,"value":2294},"Disabled content",{"type":45,"tag":547,"props":2296,"children":2297},{},[2298,2306,2315],{"type":45,"tag":574,"props":2299,"children":2300},{},[2301],{"type":45,"tag":65,"props":2302,"children":2304},{"className":2303},[],[2305],{"type":51,"value":2203},{"type":45,"tag":574,"props":2307,"children":2308},{},[2309],{"type":45,"tag":65,"props":2310,"children":2312},{"className":2311},[],[2313],{"type":51,"value":2314},"SystemColorHotlightColor",{"type":45,"tag":574,"props":2316,"children":2317},{},[2318],{"type":51,"value":2156},{"type":45,"tag":54,"props":2320,"children":2321},{},[2322],{"type":45,"tag":112,"props":2323,"children":2324},{},[2325],{"type":51,"value":2326},"Rules:",{"type":45,"tag":220,"props":2328,"children":2329},{},[2330,2335,2340,2345,2350,2355,2372,2389,2406],{"type":45,"tag":188,"props":2331,"children":2332},{},[2333],{"type":51,"value":2334},"No hardcoded colors in HC mode.",{"type":45,"tag":188,"props":2336,"children":2337},{},[2338],{"type":51,"value":2339},"No opacity on elements or brushes in HC — encode translucency in the alpha channel for Light\u002FDark only.",{"type":45,"tag":188,"props":2341,"children":2342},{},[2343],{"type":51,"value":2344},"No accent colors or regular WinUI brushes in HC.",{"type":45,"tag":188,"props":2346,"children":2347},{},[2348],{"type":51,"value":2349},"No gradient animations in HC — use a single system brush.",{"type":45,"tag":188,"props":2351,"children":2352},{},[2353],{"type":51,"value":2354},"Use 2px border thickness for flyouts, dialogs, and cards in HC.",{"type":45,"tag":188,"props":2356,"children":2357},{},[2358,2363,2365,2370],{"type":45,"tag":112,"props":2359,"children":2360},{},[2361],{"type":51,"value":2362},"No partial theme updates",{"type":51,"value":2364}," — when changing Light\u002FDark visual resources via ",{"type":45,"tag":65,"props":2366,"children":2368},{"className":2367},[],[2369],{"type":51,"value":1808},{"type":51,"value":2371},", include matching HC-safe values in the same change. Don't leave HC untested.",{"type":45,"tag":188,"props":2373,"children":2374},{},[2375,2380,2382,2387],{"type":45,"tag":112,"props":2376,"children":2377},{},[2378],{"type":51,"value":2379},"Interactive containers in HC need a highlight border",{"type":51,"value":2381}," — for clickable cards or list items, add a ",{"type":45,"tag":65,"props":2383,"children":2385},{"className":2384},[],[2386],{"type":51,"value":2229},{"type":51,"value":2388}," border in HC to indicate interactivity.",{"type":45,"tag":188,"props":2390,"children":2391},{},[2392,2397,2399,2404],{"type":45,"tag":112,"props":2393,"children":2394},{},[2395],{"type":51,"value":2396},"Empty HC dictionary is valid",{"type":51,"value":2398}," — when ",{"type":45,"tag":65,"props":2400,"children":2402},{"className":2401},[],[2403],{"type":51,"value":1808},{"type":51,"value":2405}," overrides target only Light\u002FDark and WinUI defaults already satisfy accessibility, you don't need to add HC-specific overrides.",{"type":45,"tag":188,"props":2407,"children":2408},{},[2409,2411,2417,2419],{"type":51,"value":2410},"Set ",{"type":45,"tag":65,"props":2412,"children":2414},{"className":2413},[],[2415],{"type":51,"value":2416},"HighContrastAdjustment",{"type":51,"value":2418}," at app level to prevent system overrides:\n",{"type":45,"tag":346,"props":2420,"children":2422},{"className":348,"code":2421,"language":350,"meta":351,"style":351},"Application.Current.HighContrastAdjustment = ApplicationHighContrastAdjustment.None;\n",[2423],{"type":45,"tag":65,"props":2424,"children":2425},{"__ignoreMap":351},[2426],{"type":45,"tag":357,"props":2427,"children":2428},{"class":359,"line":360},[2429],{"type":45,"tag":357,"props":2430,"children":2431},{},[2432],{"type":51,"value":2421},{"type":45,"tag":54,"props":2434,"children":2435},{},[2436,2438,2443],{"type":51,"value":2437},"Using ",{"type":45,"tag":65,"props":2439,"children":2441},{"className":2440},[],[2442],{"type":51,"value":342},{"type":51,"value":2444}," tokens correctly means HC usually \"just works\" because WinUI resolves them to appropriate system colors. Test to verify.",{"type":45,"tag":326,"props":2446,"children":2448},{"id":2447},"_4-typography-must-use-semantic-styles",[2449],{"type":51,"value":2450},"4. Typography Must Use Semantic Styles",{"type":45,"tag":54,"props":2452,"children":2453},{},[2454,2456,2461,2463,2468],{"type":51,"value":2455},"Use the predefined text factories or WinUI style tokens. Never set ",{"type":45,"tag":65,"props":2457,"children":2459},{"className":2458},[],[2460],{"type":51,"value":265},{"type":51,"value":2462}," and ",{"type":45,"tag":65,"props":2464,"children":2466},{"className":2465},[],[2467],{"type":51,"value":273},{"type":51,"value":2469}," directly for standard UI text.",{"type":45,"tag":54,"props":2471,"children":2472},{},[2473],{"type":45,"tag":112,"props":2474,"children":2475},{},[2476],{"type":51,"value":2477},"Reactor text factories:",{"type":45,"tag":539,"props":2479,"children":2480},{},[2481,2506],{"type":45,"tag":543,"props":2482,"children":2483},{},[2484],{"type":45,"tag":547,"props":2485,"children":2486},{},[2487,2492,2497,2502],{"type":45,"tag":551,"props":2488,"children":2489},{},[2490],{"type":51,"value":2491},"Factory",{"type":45,"tag":551,"props":2493,"children":2494},{},[2495],{"type":51,"value":2496},"Size",{"type":45,"tag":551,"props":2498,"children":2499},{},[2500],{"type":51,"value":2501},"Weight",{"type":45,"tag":551,"props":2503,"children":2504},{},[2505],{"type":51,"value":2188},{"type":45,"tag":567,"props":2507,"children":2508},{},[2509,2536,2562,2595,2621,2647,2680,2706,2739],{"type":45,"tag":547,"props":2510,"children":2511},{},[2512,2521,2526,2531],{"type":45,"tag":574,"props":2513,"children":2514},{},[2515],{"type":45,"tag":65,"props":2516,"children":2518},{"className":2517},[],[2519],{"type":51,"value":2520},"Caption(\"text\")",{"type":45,"tag":574,"props":2522,"children":2523},{},[2524],{"type":51,"value":2525},"12px",{"type":45,"tag":574,"props":2527,"children":2528},{},[2529],{"type":51,"value":2530},"Regular",{"type":45,"tag":574,"props":2532,"children":2533},{},[2534],{"type":51,"value":2535},"Small labels, timestamps",{"type":45,"tag":547,"props":2537,"children":2538},{},[2539,2548,2553,2557],{"type":45,"tag":574,"props":2540,"children":2541},{},[2542],{"type":45,"tag":65,"props":2543,"children":2545},{"className":2544},[],[2546],{"type":51,"value":2547},"TextBlock(\"text\")",{"type":45,"tag":574,"props":2549,"children":2550},{},[2551],{"type":51,"value":2552},"14px",{"type":45,"tag":574,"props":2554,"children":2555},{},[2556],{"type":51,"value":2530},{"type":45,"tag":574,"props":2558,"children":2559},{},[2560],{"type":51,"value":2561},"Default body text",{"type":45,"tag":547,"props":2563,"children":2564},{},[2565,2574,2578,2582],{"type":45,"tag":574,"props":2566,"children":2567},{},[2568],{"type":45,"tag":65,"props":2569,"children":2571},{"className":2570},[],[2572],{"type":51,"value":2573},"Body(\"text\")",{"type":45,"tag":574,"props":2575,"children":2576},{},[2577],{"type":51,"value":2552},{"type":45,"tag":574,"props":2579,"children":2580},{},[2581],{"type":51,"value":2530},{"type":45,"tag":574,"props":2583,"children":2584},{},[2585,2587,2593],{"type":51,"value":2586},"WinUI ",{"type":45,"tag":65,"props":2588,"children":2590},{"className":2589},[],[2591],{"type":51,"value":2592},"BodyTextBlockStyle",{"type":51,"value":2594}," body text",{"type":45,"tag":547,"props":2596,"children":2597},{},[2598,2607,2611,2616],{"type":45,"tag":574,"props":2599,"children":2600},{},[2601],{"type":45,"tag":65,"props":2602,"children":2604},{"className":2603},[],[2605],{"type":51,"value":2606},"BodyStrong(\"text\")",{"type":45,"tag":574,"props":2608,"children":2609},{},[2610],{"type":51,"value":2552},{"type":45,"tag":574,"props":2612,"children":2613},{},[2614],{"type":51,"value":2615},"Semibold",{"type":45,"tag":574,"props":2617,"children":2618},{},[2619],{"type":51,"value":2620},"Emphasized inline labels",{"type":45,"tag":547,"props":2622,"children":2623},{},[2624,2633,2638,2642],{"type":45,"tag":574,"props":2625,"children":2626},{},[2627],{"type":45,"tag":65,"props":2628,"children":2630},{"className":2629},[],[2631],{"type":51,"value":2632},"BodyLarge(\"text\")",{"type":45,"tag":574,"props":2634,"children":2635},{},[2636],{"type":51,"value":2637},"18px",{"type":45,"tag":574,"props":2639,"children":2640},{},[2641],{"type":51,"value":2530},{"type":45,"tag":574,"props":2643,"children":2644},{},[2645],{"type":51,"value":2646},"Prominent body text",{"type":45,"tag":547,"props":2648,"children":2649},{},[2650,2659,2664,2668],{"type":45,"tag":574,"props":2651,"children":2652},{},[2653],{"type":45,"tag":65,"props":2654,"children":2656},{"className":2655},[],[2657],{"type":51,"value":2658},"Subtitle(\"text\")",{"type":45,"tag":574,"props":2660,"children":2661},{},[2662],{"type":51,"value":2663},"20px",{"type":45,"tag":574,"props":2665,"children":2666},{},[2667],{"type":51,"value":2615},{"type":45,"tag":574,"props":2669,"children":2670},{},[2671,2672,2678],{"type":51,"value":2586},{"type":45,"tag":65,"props":2673,"children":2675},{"className":2674},[],[2676],{"type":51,"value":2677},"SubtitleTextBlockStyle",{"type":51,"value":2679}," — section headings",{"type":45,"tag":547,"props":2681,"children":2682},{},[2683,2692,2696,2701],{"type":45,"tag":574,"props":2684,"children":2685},{},[2686],{"type":45,"tag":65,"props":2687,"children":2689},{"className":2688},[],[2690],{"type":51,"value":2691},"SubHeading(\"text\")",{"type":45,"tag":574,"props":2693,"children":2694},{},[2695],{"type":51,"value":2663},{"type":45,"tag":574,"props":2697,"children":2698},{},[2699],{"type":51,"value":2700},"600",{"type":45,"tag":574,"props":2702,"children":2703},{},[2704],{"type":51,"value":2705},"Section headers, card titles (Reactor preset)",{"type":45,"tag":547,"props":2707,"children":2708},{},[2709,2718,2723,2727],{"type":45,"tag":574,"props":2710,"children":2711},{},[2712],{"type":45,"tag":65,"props":2713,"children":2715},{"className":2714},[],[2716],{"type":51,"value":2717},"Title(\"text\")",{"type":45,"tag":574,"props":2719,"children":2720},{},[2721],{"type":51,"value":2722},"28px",{"type":45,"tag":574,"props":2724,"children":2725},{},[2726],{"type":51,"value":2615},{"type":45,"tag":574,"props":2728,"children":2729},{},[2730,2731,2737],{"type":51,"value":2586},{"type":45,"tag":65,"props":2732,"children":2734},{"className":2733},[],[2735],{"type":51,"value":2736},"TitleTextBlockStyle",{"type":51,"value":2738}," — page titles",{"type":45,"tag":547,"props":2740,"children":2741},{},[2742,2751,2755,2760],{"type":45,"tag":574,"props":2743,"children":2744},{},[2745],{"type":45,"tag":65,"props":2746,"children":2748},{"className":2747},[],[2749],{"type":51,"value":2750},"Heading(\"text\")",{"type":45,"tag":574,"props":2752,"children":2753},{},[2754],{"type":51,"value":2722},{"type":45,"tag":574,"props":2756,"children":2757},{},[2758],{"type":51,"value":2759},"700",{"type":45,"tag":574,"props":2761,"children":2762},{},[2763],{"type":51,"value":2764},"Page titles (Reactor preset, slightly heavier)",{"type":45,"tag":54,"props":2766,"children":2767},{},[2768,2770,2776,2777,2783,2784,2790,2791,2797,2798,2804,2806,2812,2813,2819],{"type":51,"value":2769},"The ",{"type":45,"tag":65,"props":2771,"children":2773},{"className":2772},[],[2774],{"type":51,"value":2775},"Title",{"type":51,"value":267},{"type":45,"tag":65,"props":2778,"children":2780},{"className":2779},[],[2781],{"type":51,"value":2782},"Subtitle",{"type":51,"value":267},{"type":45,"tag":65,"props":2785,"children":2787},{"className":2786},[],[2788],{"type":51,"value":2789},"Body",{"type":51,"value":267},{"type":45,"tag":65,"props":2792,"children":2794},{"className":2793},[],[2795],{"type":51,"value":2796},"BodyStrong",{"type":51,"value":267},{"type":45,"tag":65,"props":2799,"children":2801},{"className":2800},[],[2802],{"type":51,"value":2803},"BodyLarge",{"type":51,"value":2805}," factories map 1:1 to\nWinUI's named TextBlock styles (Spec 039 §17.6). Prefer them when matching\nWinUI design specs; the ",{"type":45,"tag":65,"props":2807,"children":2809},{"className":2808},[],[2810],{"type":51,"value":2811},"Heading",{"type":51,"value":267},{"type":45,"tag":65,"props":2814,"children":2816},{"className":2815},[],[2817],{"type":51,"value":2818},"SubHeading",{"type":51,"value":2820}," factories are the older\nReactor presets and remain valid.",{"type":45,"tag":54,"props":2822,"children":2823},{},[2824],{"type":45,"tag":112,"props":2825,"children":2826},{},[2827],{"type":51,"value":2828},"Font weight helpers:",{"type":45,"tag":539,"props":2830,"children":2831},{},[2832,2851],{"type":45,"tag":543,"props":2833,"children":2834},{},[2835],{"type":45,"tag":547,"props":2836,"children":2837},{},[2838,2843,2847],{"type":45,"tag":551,"props":2839,"children":2840},{},[2841],{"type":51,"value":2842},"Helper",{"type":45,"tag":551,"props":2844,"children":2845},{},[2846],{"type":51,"value":2501},{"type":45,"tag":551,"props":2848,"children":2849},{},[2850],{"type":51,"value":2188},{"type":45,"tag":567,"props":2852,"children":2853},{},[2854,2875],{"type":45,"tag":547,"props":2855,"children":2856},{},[2857,2866,2870],{"type":45,"tag":574,"props":2858,"children":2859},{},[2860],{"type":45,"tag":65,"props":2861,"children":2863},{"className":2862},[],[2864],{"type":51,"value":2865},".SemiBold()",{"type":45,"tag":574,"props":2867,"children":2868},{},[2869],{"type":51,"value":2700},{"type":45,"tag":574,"props":2871,"children":2872},{},[2873],{"type":51,"value":2874},"Emphasized body text, inline labels, field headers",{"type":45,"tag":547,"props":2876,"children":2877},{},[2878,2887,2891],{"type":45,"tag":574,"props":2879,"children":2880},{},[2881],{"type":45,"tag":65,"props":2882,"children":2884},{"className":2883},[],[2885],{"type":51,"value":2886},".Bold()",{"type":45,"tag":574,"props":2888,"children":2889},{},[2890],{"type":51,"value":2759},{"type":45,"tag":574,"props":2892,"children":2893},{},[2894,2896,2901],{"type":51,"value":2895},"Reserved for ",{"type":45,"tag":65,"props":2897,"children":2899},{"className":2898},[],[2900],{"type":51,"value":243},{"type":51,"value":2902}," page titles — avoid elsewhere",{"type":45,"tag":346,"props":2904,"children":2906},{"className":348,"code":2905,"language":350,"meta":351,"style":351},"TextBlock(\"Important label\").SemiBold()\nTextBlock(\"Page Title\").Bold()\n",[2907],{"type":45,"tag":65,"props":2908,"children":2909},{"__ignoreMap":351},[2910,2918],{"type":45,"tag":357,"props":2911,"children":2912},{"class":359,"line":360},[2913],{"type":45,"tag":357,"props":2914,"children":2915},{},[2916],{"type":51,"value":2917},"TextBlock(\"Important label\").SemiBold()\n",{"type":45,"tag":357,"props":2919,"children":2920},{"class":359,"line":369},[2921],{"type":45,"tag":357,"props":2922,"children":2923},{},[2924],{"type":51,"value":2925},"TextBlock(\"Page Title\").Bold()\n",{"type":45,"tag":54,"props":2927,"children":2928},{},[2929],{"type":45,"tag":112,"props":2930,"children":2931},{},[2932,2934,2940],{"type":51,"value":2933},"WinUI type ramp (via ",{"type":45,"tag":65,"props":2935,"children":2937},{"className":2936},[],[2938],{"type":51,"value":2939},".ApplyStyle()",{"type":51,"value":2941},"):",{"type":45,"tag":539,"props":2943,"children":2944},{},[2945,2969],{"type":45,"tag":543,"props":2946,"children":2947},{},[2948],{"type":45,"tag":547,"props":2949,"children":2950},{},[2951,2956,2960,2964],{"type":45,"tag":551,"props":2952,"children":2953},{},[2954],{"type":51,"value":2955},"Style",{"type":45,"tag":551,"props":2957,"children":2958},{},[2959],{"type":51,"value":2496},{"type":45,"tag":551,"props":2961,"children":2962},{},[2963],{"type":51,"value":2501},{"type":45,"tag":551,"props":2965,"children":2966},{},[2967],{"type":51,"value":2968},"Recommendation",{"type":45,"tag":567,"props":2970,"children":2971},{},[2972,2997,3021,3046,3070,3094,3118,3144],{"type":45,"tag":547,"props":2973,"children":2974},{},[2975,2984,2988,2992],{"type":45,"tag":574,"props":2976,"children":2977},{},[2978],{"type":45,"tag":65,"props":2979,"children":2981},{"className":2980},[],[2982],{"type":51,"value":2983},"CaptionTextBlockStyle",{"type":45,"tag":574,"props":2985,"children":2986},{},[2987],{"type":51,"value":2525},{"type":45,"tag":574,"props":2989,"children":2990},{},[2991],{"type":51,"value":2530},{"type":45,"tag":574,"props":2993,"children":2994},{},[2995],{"type":51,"value":2996},"Secondary labels, timestamps, footnotes",{"type":45,"tag":547,"props":2998,"children":2999},{},[3000,3008,3012,3016],{"type":45,"tag":574,"props":3001,"children":3002},{},[3003],{"type":45,"tag":65,"props":3004,"children":3006},{"className":3005},[],[3007],{"type":51,"value":2592},{"type":45,"tag":574,"props":3009,"children":3010},{},[3011],{"type":51,"value":2552},{"type":45,"tag":574,"props":3013,"children":3014},{},[3015],{"type":51,"value":2530},{"type":45,"tag":574,"props":3017,"children":3018},{},[3019],{"type":51,"value":3020},"Default body text, paragraphs, descriptions",{"type":45,"tag":547,"props":3022,"children":3023},{},[3024,3033,3037,3041],{"type":45,"tag":574,"props":3025,"children":3026},{},[3027],{"type":45,"tag":65,"props":3028,"children":3030},{"className":3029},[],[3031],{"type":51,"value":3032},"BodyStrongTextBlockStyle",{"type":45,"tag":574,"props":3034,"children":3035},{},[3036],{"type":51,"value":2552},{"type":45,"tag":574,"props":3038,"children":3039},{},[3040],{"type":51,"value":2615},{"type":45,"tag":574,"props":3042,"children":3043},{},[3044],{"type":51,"value":3045},"Emphasized body text, inline labels",{"type":45,"tag":547,"props":3047,"children":3048},{},[3049,3058,3062,3066],{"type":45,"tag":574,"props":3050,"children":3051},{},[3052],{"type":45,"tag":65,"props":3053,"children":3055},{"className":3054},[],[3056],{"type":51,"value":3057},"BodyLargeTextBlockStyle",{"type":45,"tag":574,"props":3059,"children":3060},{},[3061],{"type":51,"value":2637},{"type":45,"tag":574,"props":3063,"children":3064},{},[3065],{"type":51,"value":2530},{"type":45,"tag":574,"props":3067,"children":3068},{},[3069],{"type":51,"value":2646},{"type":45,"tag":547,"props":3071,"children":3072},{},[3073,3081,3085,3089],{"type":45,"tag":574,"props":3074,"children":3075},{},[3076],{"type":45,"tag":65,"props":3077,"children":3079},{"className":3078},[],[3080],{"type":51,"value":2677},{"type":45,"tag":574,"props":3082,"children":3083},{},[3084],{"type":51,"value":2663},{"type":45,"tag":574,"props":3086,"children":3087},{},[3088],{"type":51,"value":2615},{"type":45,"tag":574,"props":3090,"children":3091},{},[3092],{"type":51,"value":3093},"Section headings, card group labels",{"type":45,"tag":547,"props":3095,"children":3096},{},[3097,3105,3109,3113],{"type":45,"tag":574,"props":3098,"children":3099},{},[3100],{"type":45,"tag":65,"props":3101,"children":3103},{"className":3102},[],[3104],{"type":51,"value":2736},{"type":45,"tag":574,"props":3106,"children":3107},{},[3108],{"type":51,"value":2722},{"type":45,"tag":574,"props":3110,"children":3111},{},[3112],{"type":51,"value":2615},{"type":45,"tag":574,"props":3114,"children":3115},{},[3116],{"type":51,"value":3117},"Page titles, dialog headings",{"type":45,"tag":547,"props":3119,"children":3120},{},[3121,3130,3135,3139],{"type":45,"tag":574,"props":3122,"children":3123},{},[3124],{"type":45,"tag":65,"props":3125,"children":3127},{"className":3126},[],[3128],{"type":51,"value":3129},"TitleLargeTextBlockStyle",{"type":45,"tag":574,"props":3131,"children":3132},{},[3133],{"type":51,"value":3134},"40px",{"type":45,"tag":574,"props":3136,"children":3137},{},[3138],{"type":51,"value":2615},{"type":45,"tag":574,"props":3140,"children":3141},{},[3142],{"type":51,"value":3143},"Primary page titles on feature pages",{"type":45,"tag":547,"props":3145,"children":3146},{},[3147,3156,3161,3165],{"type":45,"tag":574,"props":3148,"children":3149},{},[3150],{"type":45,"tag":65,"props":3151,"children":3153},{"className":3152},[],[3154],{"type":51,"value":3155},"DisplayTextBlockStyle",{"type":45,"tag":574,"props":3157,"children":3158},{},[3159],{"type":51,"value":3160},"68px",{"type":45,"tag":574,"props":3162,"children":3163},{},[3164],{"type":51,"value":2615},{"type":45,"tag":574,"props":3166,"children":3167},{},[3168],{"type":51,"value":3169},"Hero banners — one per page at most",{"type":45,"tag":54,"props":3171,"children":3172},{},[3173,3175,3180],{"type":51,"value":3174},"For sizes not covered by the factories, use ",{"type":45,"tag":65,"props":3176,"children":3178},{"className":3177},[],[3179],{"type":51,"value":2939},{"type":51,"value":3181}," to apply WinUI text block styles. This sets size, weight, line height, and optical sizing in one call:",{"type":45,"tag":346,"props":3183,"children":3185},{"className":348,"code":3184,"language":350,"meta":351,"style":351},"\u002F\u002F Preferred: .ApplyStyle() for WinUI styles\nTextBlock(\"Title\").ApplyStyle(\"TitleTextBlockStyle\")\nTextBlock(\"Subtitle\").ApplyStyle(\"SubtitleTextBlockStyle\")\nTextBlock(\"Body Strong\").ApplyStyle(\"BodyStrongTextBlockStyle\")\nTextBlock(\"Caption\").ApplyStyle(\"CaptionTextBlockStyle\")\n\n\u002F\u002F Also correct: use the Reactor factories for common sizes\nHeading(\"Page Title\")\nSubHeading(\"Section\")\nCaption(\"Fine print\")\n\n\u002F\u002F Escape hatch: .Set() for styles not exposed via .ApplyStyle()\nTextBlock(\"Prominent text\").Set(tb => tb.Style =\n    (Style)Application.Current.Resources[\"BodyLargeTextBlockStyle\"])\n\n\u002F\u002F Wrong: raw font properties for standard UI text\nTextBlock(\"Title\").FontSize(28).FontWeight(new FontWeight(700))\n",[3186],{"type":45,"tag":65,"props":3187,"children":3188},{"__ignoreMap":351},[3189,3197,3205,3213,3221,3229,3236,3244,3252,3260,3268,3275,3284,3293,3302,3310,3319],{"type":45,"tag":357,"props":3190,"children":3191},{"class":359,"line":360},[3192],{"type":45,"tag":357,"props":3193,"children":3194},{},[3195],{"type":51,"value":3196},"\u002F\u002F Preferred: .ApplyStyle() for WinUI styles\n",{"type":45,"tag":357,"props":3198,"children":3199},{"class":359,"line":369},[3200],{"type":45,"tag":357,"props":3201,"children":3202},{},[3203],{"type":51,"value":3204},"TextBlock(\"Title\").ApplyStyle(\"TitleTextBlockStyle\")\n",{"type":45,"tag":357,"props":3206,"children":3207},{"class":359,"line":378},[3208],{"type":45,"tag":357,"props":3209,"children":3210},{},[3211],{"type":51,"value":3212},"TextBlock(\"Subtitle\").ApplyStyle(\"SubtitleTextBlockStyle\")\n",{"type":45,"tag":357,"props":3214,"children":3215},{"class":359,"line":387},[3216],{"type":45,"tag":357,"props":3217,"children":3218},{},[3219],{"type":51,"value":3220},"TextBlock(\"Body Strong\").ApplyStyle(\"BodyStrongTextBlockStyle\")\n",{"type":45,"tag":357,"props":3222,"children":3223},{"class":359,"line":396},[3224],{"type":45,"tag":357,"props":3225,"children":3226},{},[3227],{"type":51,"value":3228},"TextBlock(\"Caption\").ApplyStyle(\"CaptionTextBlockStyle\")\n",{"type":45,"tag":357,"props":3230,"children":3231},{"class":359,"line":406},[3232],{"type":45,"tag":357,"props":3233,"children":3234},{"emptyLinePlaceholder":400},[3235],{"type":51,"value":403},{"type":45,"tag":357,"props":3237,"children":3238},{"class":359,"line":415},[3239],{"type":45,"tag":357,"props":3240,"children":3241},{},[3242],{"type":51,"value":3243},"\u002F\u002F Also correct: use the Reactor factories for common sizes\n",{"type":45,"tag":357,"props":3245,"children":3246},{"class":359,"line":424},[3247],{"type":45,"tag":357,"props":3248,"children":3249},{},[3250],{"type":51,"value":3251},"Heading(\"Page Title\")\n",{"type":45,"tag":357,"props":3253,"children":3254},{"class":359,"line":1884},[3255],{"type":45,"tag":357,"props":3256,"children":3257},{},[3258],{"type":51,"value":3259},"SubHeading(\"Section\")\n",{"type":45,"tag":357,"props":3261,"children":3262},{"class":359,"line":1892},[3263],{"type":45,"tag":357,"props":3264,"children":3265},{},[3266],{"type":51,"value":3267},"Caption(\"Fine print\")\n",{"type":45,"tag":357,"props":3269,"children":3270},{"class":359,"line":1901},[3271],{"type":45,"tag":357,"props":3272,"children":3273},{"emptyLinePlaceholder":400},[3274],{"type":51,"value":403},{"type":45,"tag":357,"props":3276,"children":3278},{"class":359,"line":3277},12,[3279],{"type":45,"tag":357,"props":3280,"children":3281},{},[3282],{"type":51,"value":3283},"\u002F\u002F Escape hatch: .Set() for styles not exposed via .ApplyStyle()\n",{"type":45,"tag":357,"props":3285,"children":3287},{"class":359,"line":3286},13,[3288],{"type":45,"tag":357,"props":3289,"children":3290},{},[3291],{"type":51,"value":3292},"TextBlock(\"Prominent text\").Set(tb => tb.Style =\n",{"type":45,"tag":357,"props":3294,"children":3296},{"class":359,"line":3295},14,[3297],{"type":45,"tag":357,"props":3298,"children":3299},{},[3300],{"type":51,"value":3301},"    (Style)Application.Current.Resources[\"BodyLargeTextBlockStyle\"])\n",{"type":45,"tag":357,"props":3303,"children":3305},{"class":359,"line":3304},15,[3306],{"type":45,"tag":357,"props":3307,"children":3308},{"emptyLinePlaceholder":400},[3309],{"type":51,"value":403},{"type":45,"tag":357,"props":3311,"children":3313},{"class":359,"line":3312},16,[3314],{"type":45,"tag":357,"props":3315,"children":3316},{},[3317],{"type":51,"value":3318},"\u002F\u002F Wrong: raw font properties for standard UI text\n",{"type":45,"tag":357,"props":3320,"children":3322},{"class":359,"line":3321},17,[3323],{"type":45,"tag":357,"props":3324,"children":3325},{},[3326],{"type":51,"value":3327},"TextBlock(\"Title\").FontSize(28).FontWeight(new FontWeight(700))\n",{"type":45,"tag":54,"props":3329,"children":3330},{},[3331],{"type":45,"tag":112,"props":3332,"children":3333},{},[3334],{"type":51,"value":2326},{"type":45,"tag":220,"props":3336,"children":3337},{},[3338,3365,3370,3455,3467,3508],{"type":45,"tag":188,"props":3339,"children":3340},{},[3341,3342,3348,3350,3356,3358,3363],{"type":51,"value":336},{"type":45,"tag":65,"props":3343,"children":3345},{"className":3344},[],[3346],{"type":51,"value":3347},"SemiBold",{"type":51,"value":3349}," (600), never ",{"type":45,"tag":65,"props":3351,"children":3353},{"className":3352},[],[3354],{"type":51,"value":3355},"Bold",{"type":51,"value":3357}," (700) for emphasis — except ",{"type":45,"tag":65,"props":3359,"children":3361},{"className":3360},[],[3362],{"type":51,"value":243},{"type":51,"value":3364}," which intentionally uses 700 for page titles.",{"type":45,"tag":188,"props":3366,"children":3367},{},[3368],{"type":51,"value":3369},"Minimum font size: 12px. Anything smaller makes complex scripts unreadable.",{"type":45,"tag":188,"props":3371,"children":3372},{},[3373,3374,3380,3382,3388,3390,3396,3398,3421,3423,3429,3431,3437,3439,3445,3447,3453],{"type":51,"value":336},{"type":45,"tag":65,"props":3375,"children":3377},{"className":3376},[],[3378],{"type":51,"value":3379},"SymbolThemeFontFamily",{"type":51,"value":3381}," for icon fonts, applied with the ",{"type":45,"tag":65,"props":3383,"children":3385},{"className":3384},[],[3386],{"type":51,"value":3387},".FontFamily(...)",{"type":51,"value":3389}," modifier (not ",{"type":45,"tag":65,"props":3391,"children":3393},{"className":3392},[],[3394],{"type":51,"value":3395},".Set",{"type":51,"value":3397},", which re-runs every update and is never unwound):\n",{"type":45,"tag":346,"props":3399,"children":3401},{"className":348,"code":3400,"language":350,"meta":351,"style":351},"TextBlock(\"\\uE710\")\n    .FontFamily((FontFamily)Application.Current.Resources[\"SymbolThemeFontFamily\"])\n",[3402],{"type":45,"tag":65,"props":3403,"children":3404},{"__ignoreMap":351},[3405,3413],{"type":45,"tag":357,"props":3406,"children":3407},{"class":359,"line":360},[3408],{"type":45,"tag":357,"props":3409,"children":3410},{},[3411],{"type":51,"value":3412},"TextBlock(\"\\uE710\")\n",{"type":45,"tag":357,"props":3414,"children":3415},{"class":359,"line":369},[3416],{"type":45,"tag":357,"props":3417,"children":3418},{},[3419],{"type":51,"value":3420},"    .FontFamily((FontFamily)Application.Current.Resources[\"SymbolThemeFontFamily\"])\n",{"type":51,"value":3422},"\nWhere no live ",{"type":45,"tag":65,"props":3424,"children":3426},{"className":3425},[],[3427],{"type":51,"value":3428},"Application.Current",{"type":51,"value":3430}," is available, the explicit\n",{"type":45,"tag":65,"props":3432,"children":3434},{"className":3433},[],[3435],{"type":51,"value":3436},"\"Segoe Fluent Icons, Segoe MDL2 Assets\"",{"type":51,"value":3438}," stack is an acceptable static fallback.\nNever a bare ",{"type":45,"tag":65,"props":3440,"children":3442},{"className":3441},[],[3443],{"type":51,"value":3444},"\"Segoe MDL2 Assets\"",{"type":51,"value":3446}," (Windows 10 legacy) or a bare\n",{"type":45,"tag":65,"props":3448,"children":3450},{"className":3449},[],[3451],{"type":51,"value":3452},"\"Segoe Fluent Icons\"",{"type":51,"value":3454}," (drops the Windows 10 tail).",{"type":45,"tag":188,"props":3456,"children":3457},{},[3458,3460,3465],{"type":51,"value":3459},"When icons and text are paired, ",{"type":45,"tag":112,"props":3461,"children":3462},{},[3463],{"type":51,"value":3464},"top-align both",{"type":51,"value":3466}," in wrapping scenarios to prevent visual drift at larger text scales.",{"type":45,"tag":188,"props":3468,"children":3469},{},[3470,3475,3477,3483,3485,3491,3492,3498,3500,3506],{"type":45,"tag":112,"props":3471,"children":3472},{},[3473],{"type":51,"value":3474},"TextWrapping:",{"type":51,"value":3476}," ",{"type":45,"tag":65,"props":3478,"children":3480},{"className":3479},[],[3481],{"type":51,"value":3482},"NoWrap",{"type":51,"value":3484}," is the default — use ",{"type":45,"tag":65,"props":3486,"children":3488},{"className":3487},[],[3489],{"type":51,"value":3490},"TextWrapping.Wrap",{"type":51,"value":126},{"type":45,"tag":65,"props":3493,"children":3495},{"className":3494},[],[3496],{"type":51,"value":3497},"TextWrapping.WrapWholeWords",{"type":51,"value":3499}," when text should flow to multiple lines. Choose ",{"type":45,"tag":65,"props":3501,"children":3503},{"className":3502},[],[3504],{"type":51,"value":3505},"WrapWholeWords",{"type":51,"value":3507}," for body text to avoid mid-word breaks.",{"type":45,"tag":188,"props":3509,"children":3510},{},[3511,3516,3518,3524,3526],{"type":45,"tag":112,"props":3512,"children":3513},{},[3514],{"type":51,"value":3515},"Smart tooltips for trimmed text:",{"type":51,"value":3517}," When text is trimmed with ",{"type":45,"tag":65,"props":3519,"children":3521},{"className":3520},[],[3522],{"type":51,"value":3523},"TextTrimming",{"type":51,"value":3525},", add a tooltip that only appears when the text is actually trimmed:\n",{"type":45,"tag":346,"props":3527,"children":3529},{"className":348,"code":3528,"language":350,"meta":351,"style":351},"TextBlock(longText)\n    .TextTrimming(TextTrimming.CharacterEllipsis)\n    .ToolTip(longText)\n",[3530],{"type":45,"tag":65,"props":3531,"children":3532},{"__ignoreMap":351},[3533,3541,3549],{"type":45,"tag":357,"props":3534,"children":3535},{"class":359,"line":360},[3536],{"type":45,"tag":357,"props":3537,"children":3538},{},[3539],{"type":51,"value":3540},"TextBlock(longText)\n",{"type":45,"tag":357,"props":3542,"children":3543},{"class":359,"line":369},[3544],{"type":45,"tag":357,"props":3545,"children":3546},{},[3547],{"type":51,"value":3548},"    .TextTrimming(TextTrimming.CharacterEllipsis)\n",{"type":45,"tag":357,"props":3550,"children":3551},{"class":359,"line":378},[3552],{"type":45,"tag":357,"props":3553,"children":3554},{},[3555],{"type":51,"value":3556},"    .ToolTip(longText)\n",{"type":45,"tag":54,"props":3558,"children":3559},{},[3560,3561,3567],{"type":51,"value":1783},{"type":45,"tag":159,"props":3562,"children":3564},{"href":3563},"design-docs\u002Ftypography-and-colors.md",[3565],{"type":51,"value":3566},"typography-and-colors.md",{"type":51,"value":3568}," for the full type ramp and color token list.",{"type":45,"tag":326,"props":3570,"children":3572},{"id":3571},"_5-layout-and-scaling",[3573],{"type":51,"value":3574},"5. Layout and Scaling",{"type":45,"tag":458,"props":3576,"children":3578},{"id":3577},"_4px-grid",[3579],{"type":51,"value":3580},"4px Grid",{"type":45,"tag":54,"props":3582,"children":3583},{},[3584],{"type":51,"value":3585},"Use multiples of 4 for all margins, padding, and sizing values. The spacing scale is built on a 4px base unit:",{"type":45,"tag":539,"props":3587,"children":3588},{},[3589,3610],{"type":45,"tag":543,"props":3590,"children":3591},{},[3592],{"type":45,"tag":547,"props":3593,"children":3594},{},[3595,3600,3605],{"type":45,"tag":551,"props":3596,"children":3597},{},[3598],{"type":51,"value":3599},"Value",{"type":45,"tag":551,"props":3601,"children":3602},{},[3603],{"type":51,"value":3604},"Name",{"type":45,"tag":551,"props":3606,"children":3607},{},[3608],{"type":51,"value":3609},"Usage",{"type":45,"tag":567,"props":3611,"children":3612},{},[3613,3631,3649,3667,3685,3702,3720,3738,3756],{"type":45,"tag":547,"props":3614,"children":3615},{},[3616,3621,3626],{"type":45,"tag":574,"props":3617,"children":3618},{},[3619],{"type":51,"value":3620},"0px",{"type":45,"tag":574,"props":3622,"children":3623},{},[3624],{"type":51,"value":3625},"Flush",{"type":45,"tag":574,"props":3627,"children":3628},{},[3629],{"type":51,"value":3630},"No gap between elements",{"type":45,"tag":547,"props":3632,"children":3633},{},[3634,3639,3644],{"type":45,"tag":574,"props":3635,"children":3636},{},[3637],{"type":51,"value":3638},"2px",{"type":45,"tag":574,"props":3640,"children":3641},{},[3642],{"type":51,"value":3643},"Hairline",{"type":45,"tag":574,"props":3645,"children":3646},{},[3647],{"type":51,"value":3648},"Tight spacing between related inline items",{"type":45,"tag":547,"props":3650,"children":3651},{},[3652,3657,3662],{"type":45,"tag":574,"props":3653,"children":3654},{},[3655],{"type":51,"value":3656},"4px",{"type":45,"tag":574,"props":3658,"children":3659},{},[3660],{"type":51,"value":3661},"Compact",{"type":45,"tag":574,"props":3663,"children":3664},{},[3665],{"type":51,"value":3666},"Icon-to-label gaps and small control internals",{"type":45,"tag":547,"props":3668,"children":3669},{},[3670,3675,3680],{"type":45,"tag":574,"props":3671,"children":3672},{},[3673],{"type":51,"value":3674},"8px",{"type":45,"tag":574,"props":3676,"children":3677},{},[3678],{"type":51,"value":3679},"Standard",{"type":45,"tag":574,"props":3681,"children":3682},{},[3683],{"type":51,"value":3684},"Default gap between sibling controls",{"type":45,"tag":547,"props":3686,"children":3687},{},[3688,3692,3697],{"type":45,"tag":574,"props":3689,"children":3690},{},[3691],{"type":51,"value":2525},{"type":45,"tag":574,"props":3693,"children":3694},{},[3695],{"type":51,"value":3696},"Relaxed",{"type":45,"tag":574,"props":3698,"children":3699},{},[3700],{"type":51,"value":3701},"Padding inside cards and grouped sections",{"type":45,"tag":547,"props":3703,"children":3704},{},[3705,3710,3715],{"type":45,"tag":574,"props":3706,"children":3707},{},[3708],{"type":51,"value":3709},"16px",{"type":45,"tag":574,"props":3711,"children":3712},{},[3713],{"type":51,"value":3714},"Spacious",{"type":45,"tag":574,"props":3716,"children":3717},{},[3718],{"type":51,"value":3719},"Between distinct content sections",{"type":45,"tag":547,"props":3721,"children":3722},{},[3723,3728,3733],{"type":45,"tag":574,"props":3724,"children":3725},{},[3726],{"type":51,"value":3727},"24px",{"type":45,"tag":574,"props":3729,"children":3730},{},[3731],{"type":51,"value":3732},"Section",{"type":45,"tag":574,"props":3734,"children":3735},{},[3736],{"type":51,"value":3737},"Major section boundaries and card padding",{"type":45,"tag":547,"props":3739,"children":3740},{},[3741,3746,3751],{"type":45,"tag":574,"props":3742,"children":3743},{},[3744],{"type":51,"value":3745},"36px",{"type":45,"tag":574,"props":3747,"children":3748},{},[3749],{"type":51,"value":3750},"Page",{"type":45,"tag":574,"props":3752,"children":3753},{},[3754],{"type":51,"value":3755},"Page-level margins around content",{"type":45,"tag":547,"props":3757,"children":3758},{},[3759,3764,3769],{"type":45,"tag":574,"props":3760,"children":3761},{},[3762],{"type":51,"value":3763},"48px",{"type":45,"tag":574,"props":3765,"children":3766},{},[3767],{"type":51,"value":3768},"Hero",{"type":45,"tag":574,"props":3770,"children":3771},{},[3772],{"type":51,"value":3773},"Large spacing for hero areas and visual breaks",{"type":45,"tag":346,"props":3775,"children":3777},{"className":348,"code":3776,"language":350,"meta":351,"style":351},"\u002F\u002F Correct: multiples of 4\nVStack(8, children).Padding(16)\nBorder(child).Margin(12).Padding(8)\nHStack(4, items)\n\n\u002F\u002F Wrong: odd values cause blurry rendering at fractional scales\nVStack(5, children).Padding(15)\nBorder(child).Margin(3)\n",[3778],{"type":45,"tag":65,"props":3779,"children":3780},{"__ignoreMap":351},[3781,3789,3797,3805,3813,3820,3828,3836],{"type":45,"tag":357,"props":3782,"children":3783},{"class":359,"line":360},[3784],{"type":45,"tag":357,"props":3785,"children":3786},{},[3787],{"type":51,"value":3788},"\u002F\u002F Correct: multiples of 4\n",{"type":45,"tag":357,"props":3790,"children":3791},{"class":359,"line":369},[3792],{"type":45,"tag":357,"props":3793,"children":3794},{},[3795],{"type":51,"value":3796},"VStack(8, children).Padding(16)\n",{"type":45,"tag":357,"props":3798,"children":3799},{"class":359,"line":378},[3800],{"type":45,"tag":357,"props":3801,"children":3802},{},[3803],{"type":51,"value":3804},"Border(child).Margin(12).Padding(8)\n",{"type":45,"tag":357,"props":3806,"children":3807},{"class":359,"line":387},[3808],{"type":45,"tag":357,"props":3809,"children":3810},{},[3811],{"type":51,"value":3812},"HStack(4, items)\n",{"type":45,"tag":357,"props":3814,"children":3815},{"class":359,"line":396},[3816],{"type":45,"tag":357,"props":3817,"children":3818},{"emptyLinePlaceholder":400},[3819],{"type":51,"value":403},{"type":45,"tag":357,"props":3821,"children":3822},{"class":359,"line":406},[3823],{"type":45,"tag":357,"props":3824,"children":3825},{},[3826],{"type":51,"value":3827},"\u002F\u002F Wrong: odd values cause blurry rendering at fractional scales\n",{"type":45,"tag":357,"props":3829,"children":3830},{"class":359,"line":415},[3831],{"type":45,"tag":357,"props":3832,"children":3833},{},[3834],{"type":51,"value":3835},"VStack(5, children).Padding(15)\n",{"type":45,"tag":357,"props":3837,"children":3838},{"class":359,"line":424},[3839],{"type":45,"tag":357,"props":3840,"children":3841},{},[3842],{"type":51,"value":3843},"Border(child).Margin(3)\n",{"type":45,"tag":458,"props":3845,"children":3847},{"id":3846},"margin-vs-padding",[3848],{"type":51,"value":3849},"Margin vs Padding",{"type":45,"tag":54,"props":3851,"children":3852},{},[3853,3858],{"type":45,"tag":112,"props":3854,"children":3855},{},[3856],{"type":51,"value":3857},"Margin",{"type":51,"value":3859}," pushes an element away from its neighbors. It works on every Reactor element.",{"type":45,"tag":54,"props":3861,"children":3862},{},[3863,3868,3870,3876,3877,3883,3885,3891,3892,3898,3900,3906,3907,3913,3915,3921,3923,3929,3931,3936],{"type":45,"tag":112,"props":3864,"children":3865},{},[3866],{"type":51,"value":3867},"Padding",{"type":51,"value":3869}," adds space between a container's edge and its content. It only works on ",{"type":45,"tag":65,"props":3871,"children":3873},{"className":3872},[],[3874],{"type":51,"value":3875},"Border",{"type":51,"value":2462},{"type":45,"tag":65,"props":3878,"children":3880},{"className":3879},[],[3881],{"type":51,"value":3882},"Control",{"type":51,"value":3884},"-based elements (",{"type":45,"tag":65,"props":3886,"children":3888},{"className":3887},[],[3889],{"type":51,"value":3890},"Button",{"type":51,"value":80},{"type":45,"tag":65,"props":3893,"children":3895},{"className":3894},[],[3896],{"type":51,"value":3897},"TextBox",{"type":51,"value":3899},", etc.). Layout panels like ",{"type":45,"tag":65,"props":3901,"children":3903},{"className":3902},[],[3904],{"type":51,"value":3905},"VStack",{"type":51,"value":80},{"type":45,"tag":65,"props":3908,"children":3910},{"className":3909},[],[3911],{"type":51,"value":3912},"HStack",{"type":51,"value":3914},", and ",{"type":45,"tag":65,"props":3916,"children":3918},{"className":3917},[],[3919],{"type":51,"value":3920},"Grid",{"type":51,"value":3922}," do not support ",{"type":45,"tag":65,"props":3924,"children":3926},{"className":3925},[],[3927],{"type":51,"value":3928},".Padding()",{"type":51,"value":3930}," — wrap content in a ",{"type":45,"tag":65,"props":3932,"children":3934},{"className":3933},[],[3935],{"type":51,"value":3875},{"type":51,"value":3937}," if you need inner padding on a stack.",{"type":45,"tag":539,"props":3939,"children":3940},{},[3941,3969],{"type":45,"tag":543,"props":3942,"children":3943},{},[3944],{"type":45,"tag":547,"props":3945,"children":3946},{},[3947,3952,3961],{"type":45,"tag":551,"props":3948,"children":3949},{},[3950],{"type":51,"value":3951},"Element",{"type":45,"tag":551,"props":3953,"children":3954},{},[3955],{"type":45,"tag":65,"props":3956,"children":3958},{"className":3957},[],[3959],{"type":51,"value":3960},".Margin()",{"type":45,"tag":551,"props":3962,"children":3963},{},[3964],{"type":45,"tag":65,"props":3965,"children":3967},{"className":3966},[],[3968],{"type":51,"value":3928},{"type":45,"tag":567,"props":3970,"children":3971},{},[3972,3992,4011,4030,4051,4070,4089,4108],{"type":45,"tag":547,"props":3973,"children":3974},{},[3975,3983,3988],{"type":45,"tag":574,"props":3976,"children":3977},{},[3978],{"type":45,"tag":65,"props":3979,"children":3981},{"className":3980},[],[3982],{"type":51,"value":3875},{"type":45,"tag":574,"props":3984,"children":3985},{},[3986],{"type":51,"value":3987},"✓",{"type":45,"tag":574,"props":3989,"children":3990},{},[3991],{"type":51,"value":3987},{"type":45,"tag":547,"props":3993,"children":3994},{},[3995,4003,4007],{"type":45,"tag":574,"props":3996,"children":3997},{},[3998],{"type":45,"tag":65,"props":3999,"children":4001},{"className":4000},[],[4002],{"type":51,"value":3890},{"type":45,"tag":574,"props":4004,"children":4005},{},[4006],{"type":51,"value":3987},{"type":45,"tag":574,"props":4008,"children":4009},{},[4010],{"type":51,"value":3987},{"type":45,"tag":547,"props":4012,"children":4013},{},[4014,4022,4026],{"type":45,"tag":574,"props":4015,"children":4016},{},[4017],{"type":45,"tag":65,"props":4018,"children":4020},{"className":4019},[],[4021],{"type":51,"value":3897},{"type":45,"tag":574,"props":4023,"children":4024},{},[4025],{"type":51,"value":3987},{"type":45,"tag":574,"props":4027,"children":4028},{},[4029],{"type":51,"value":3987},{"type":45,"tag":547,"props":4031,"children":4032},{},[4033,4042,4046],{"type":45,"tag":574,"props":4034,"children":4035},{},[4036],{"type":45,"tag":65,"props":4037,"children":4039},{"className":4038},[],[4040],{"type":51,"value":4041},"TextBlock",{"type":45,"tag":574,"props":4043,"children":4044},{},[4045],{"type":51,"value":3987},{"type":45,"tag":574,"props":4047,"children":4048},{},[4049],{"type":51,"value":4050},"—",{"type":45,"tag":547,"props":4052,"children":4053},{},[4054,4062,4066],{"type":45,"tag":574,"props":4055,"children":4056},{},[4057],{"type":45,"tag":65,"props":4058,"children":4060},{"className":4059},[],[4061],{"type":51,"value":3905},{"type":45,"tag":574,"props":4063,"children":4064},{},[4065],{"type":51,"value":3987},{"type":45,"tag":574,"props":4067,"children":4068},{},[4069],{"type":51,"value":4050},{"type":45,"tag":547,"props":4071,"children":4072},{},[4073,4081,4085],{"type":45,"tag":574,"props":4074,"children":4075},{},[4076],{"type":45,"tag":65,"props":4077,"children":4079},{"className":4078},[],[4080],{"type":51,"value":3912},{"type":45,"tag":574,"props":4082,"children":4083},{},[4084],{"type":51,"value":3987},{"type":45,"tag":574,"props":4086,"children":4087},{},[4088],{"type":51,"value":4050},{"type":45,"tag":547,"props":4090,"children":4091},{},[4092,4100,4104],{"type":45,"tag":574,"props":4093,"children":4094},{},[4095],{"type":45,"tag":65,"props":4096,"children":4098},{"className":4097},[],[4099],{"type":51,"value":3920},{"type":45,"tag":574,"props":4101,"children":4102},{},[4103],{"type":51,"value":3987},{"type":45,"tag":574,"props":4105,"children":4106},{},[4107],{"type":51,"value":4050},{"type":45,"tag":547,"props":4109,"children":4110},{},[4111,4120,4124],{"type":45,"tag":574,"props":4112,"children":4113},{},[4114],{"type":45,"tag":65,"props":4115,"children":4117},{"className":4116},[],[4118],{"type":51,"value":4119},"Image",{"type":45,"tag":574,"props":4121,"children":4122},{},[4123],{"type":51,"value":3987},{"type":45,"tag":574,"props":4125,"children":4126},{},[4127],{"type":51,"value":4050},{"type":45,"tag":346,"props":4129,"children":4131},{"className":348,"code":4130,"language":350,"meta":351,"style":351},"\u002F\u002F Margin — works on ALL elements\nTextBlock(\"Hello\").Margin(8)\nVStack(children).Margin(16)\nBorder(child).Margin(12)\n\n\u002F\u002F Padding — only on Border and Control (Button, TextBox, etc.)\nBorder(child).Padding(16)    \u002F\u002F ✓ works\nButton(\"Go\").Padding(12)     \u002F\u002F ✓ works\n\n\u002F\u002F VStack\u002FHStack don't support Padding — wrap in Border instead:\nBorder(\n    VStack(8, items)\n).Padding(16)  \u002F\u002F ✓ padding applied to the Border\n",[4132],{"type":45,"tag":65,"props":4133,"children":4134},{"__ignoreMap":351},[4135,4143,4151,4159,4167,4174,4182,4190,4198,4205,4213,4221,4229],{"type":45,"tag":357,"props":4136,"children":4137},{"class":359,"line":360},[4138],{"type":45,"tag":357,"props":4139,"children":4140},{},[4141],{"type":51,"value":4142},"\u002F\u002F Margin — works on ALL elements\n",{"type":45,"tag":357,"props":4144,"children":4145},{"class":359,"line":369},[4146],{"type":45,"tag":357,"props":4147,"children":4148},{},[4149],{"type":51,"value":4150},"TextBlock(\"Hello\").Margin(8)\n",{"type":45,"tag":357,"props":4152,"children":4153},{"class":359,"line":378},[4154],{"type":45,"tag":357,"props":4155,"children":4156},{},[4157],{"type":51,"value":4158},"VStack(children).Margin(16)\n",{"type":45,"tag":357,"props":4160,"children":4161},{"class":359,"line":387},[4162],{"type":45,"tag":357,"props":4163,"children":4164},{},[4165],{"type":51,"value":4166},"Border(child).Margin(12)\n",{"type":45,"tag":357,"props":4168,"children":4169},{"class":359,"line":396},[4170],{"type":45,"tag":357,"props":4171,"children":4172},{"emptyLinePlaceholder":400},[4173],{"type":51,"value":403},{"type":45,"tag":357,"props":4175,"children":4176},{"class":359,"line":406},[4177],{"type":45,"tag":357,"props":4178,"children":4179},{},[4180],{"type":51,"value":4181},"\u002F\u002F Padding — only on Border and Control (Button, TextBox, etc.)\n",{"type":45,"tag":357,"props":4183,"children":4184},{"class":359,"line":415},[4185],{"type":45,"tag":357,"props":4186,"children":4187},{},[4188],{"type":51,"value":4189},"Border(child).Padding(16)    \u002F\u002F ✓ works\n",{"type":45,"tag":357,"props":4191,"children":4192},{"class":359,"line":424},[4193],{"type":45,"tag":357,"props":4194,"children":4195},{},[4196],{"type":51,"value":4197},"Button(\"Go\").Padding(12)     \u002F\u002F ✓ works\n",{"type":45,"tag":357,"props":4199,"children":4200},{"class":359,"line":1884},[4201],{"type":45,"tag":357,"props":4202,"children":4203},{"emptyLinePlaceholder":400},[4204],{"type":51,"value":403},{"type":45,"tag":357,"props":4206,"children":4207},{"class":359,"line":1892},[4208],{"type":45,"tag":357,"props":4209,"children":4210},{},[4211],{"type":51,"value":4212},"\u002F\u002F VStack\u002FHStack don't support Padding — wrap in Border instead:\n",{"type":45,"tag":357,"props":4214,"children":4215},{"class":359,"line":1901},[4216],{"type":45,"tag":357,"props":4217,"children":4218},{},[4219],{"type":51,"value":4220},"Border(\n",{"type":45,"tag":357,"props":4222,"children":4223},{"class":359,"line":3277},[4224],{"type":45,"tag":357,"props":4225,"children":4226},{},[4227],{"type":51,"value":4228},"    VStack(8, items)\n",{"type":45,"tag":357,"props":4230,"children":4231},{"class":359,"line":3286},[4232],{"type":45,"tag":357,"props":4233,"children":4234},{},[4235],{"type":51,"value":4236},").Padding(16)  \u002F\u002F ✓ padding applied to the Border\n",{"type":45,"tag":54,"props":4238,"children":4239},{},[4240,4242,4247,4248,4253],{"type":51,"value":4241},"Both ",{"type":45,"tag":65,"props":4243,"children":4245},{"className":4244},[],[4246],{"type":51,"value":3960},{"type":51,"value":2462},{"type":45,"tag":65,"props":4249,"children":4251},{"className":4250},[],[4252],{"type":51,"value":3928},{"type":51,"value":4254}," accept three overloads:",{"type":45,"tag":346,"props":4256,"children":4258},{"className":348,"code":4257,"language":350,"meta":351,"style":351},"\u002F\u002F Uniform — same on all sides\nelement.Margin(16)\n\n\u002F\u002F Horizontal, Vertical\nelement.Margin(horizontal: 24, vertical: 8)\n\n\u002F\u002F Per-side: left, top, right, bottom\nelement.Margin(left: 4, top: 8, right: 16, bottom: 24)\n",[4259],{"type":45,"tag":65,"props":4260,"children":4261},{"__ignoreMap":351},[4262,4270,4278,4285,4293,4301,4308,4316],{"type":45,"tag":357,"props":4263,"children":4264},{"class":359,"line":360},[4265],{"type":45,"tag":357,"props":4266,"children":4267},{},[4268],{"type":51,"value":4269},"\u002F\u002F Uniform — same on all sides\n",{"type":45,"tag":357,"props":4271,"children":4272},{"class":359,"line":369},[4273],{"type":45,"tag":357,"props":4274,"children":4275},{},[4276],{"type":51,"value":4277},"element.Margin(16)\n",{"type":45,"tag":357,"props":4279,"children":4280},{"class":359,"line":378},[4281],{"type":45,"tag":357,"props":4282,"children":4283},{"emptyLinePlaceholder":400},[4284],{"type":51,"value":403},{"type":45,"tag":357,"props":4286,"children":4287},{"class":359,"line":387},[4288],{"type":45,"tag":357,"props":4289,"children":4290},{},[4291],{"type":51,"value":4292},"\u002F\u002F Horizontal, Vertical\n",{"type":45,"tag":357,"props":4294,"children":4295},{"class":359,"line":396},[4296],{"type":45,"tag":357,"props":4297,"children":4298},{},[4299],{"type":51,"value":4300},"element.Margin(horizontal: 24, vertical: 8)\n",{"type":45,"tag":357,"props":4302,"children":4303},{"class":359,"line":406},[4304],{"type":45,"tag":357,"props":4305,"children":4306},{"emptyLinePlaceholder":400},[4307],{"type":51,"value":403},{"type":45,"tag":357,"props":4309,"children":4310},{"class":359,"line":415},[4311],{"type":45,"tag":357,"props":4312,"children":4313},{},[4314],{"type":51,"value":4315},"\u002F\u002F Per-side: left, top, right, bottom\n",{"type":45,"tag":357,"props":4317,"children":4318},{"class":359,"line":424},[4319],{"type":45,"tag":357,"props":4320,"children":4321},{},[4322],{"type":51,"value":4323},"element.Margin(left: 4, top: 8, right: 16, bottom: 24)\n",{"type":45,"tag":458,"props":4325,"children":4327},{"id":4326},"corner-radius",[4328],{"type":51,"value":4329},"Corner Radius",{"type":45,"tag":54,"props":4331,"children":4332},{},[4333,4335,4341,4343,4349],{"type":51,"value":4334},"Use system values — ",{"type":45,"tag":65,"props":4336,"children":4338},{"className":4337},[],[4339],{"type":51,"value":4340},"ControlCornerRadius",{"type":51,"value":4342}," (4px) for controls and ",{"type":45,"tag":65,"props":4344,"children":4346},{"className":4345},[],[4347],{"type":51,"value":4348},"OverlayCornerRadius",{"type":51,"value":4350}," (8px) for overlays.",{"type":45,"tag":54,"props":4352,"children":4353},{},[4354,4356,4362],{"type":51,"value":4355},"WinUI provides two corner radius theme resources. Use ",{"type":45,"tag":65,"props":4357,"children":4359},{"className":4358},[],[4360],{"type":51,"value":4361},"ThemeResource.CornerRadius()",{"type":51,"value":4363}," to resolve the system values at render time, ensuring your UI adapts if these values are customized:",{"type":45,"tag":346,"props":4365,"children":4367},{"className":348,"code":4366,"language":350,"meta":351,"style":351},"\u002F\u002F Preferred: resolve system values at render time\nvar controlRadius = ThemeResource.CornerRadius(\"ControlCornerRadius\");\nvar overlayRadius = ThemeResource.CornerRadius(\"OverlayCornerRadius\");\n\n\u002F\u002F Apply to elements\nBorder(child).CornerRadius(controlRadius.TopLeft)   \u002F\u002F controls, buttons, cards\nBorder(dialog).CornerRadius(overlayRadius.TopLeft)   \u002F\u002F dialogs, flyouts, menus\n\n\u002F\u002F Also acceptable: hardcoded system values\nBorder(child).CornerRadius(4)   \u002F\u002F ControlCornerRadius equivalent\nBorder(child).CornerRadius(8)   \u002F\u002F OverlayCornerRadius equivalent\n\n\u002F\u002F Selective rounding (top corners only)\nBorder(child).CornerRadius(8, 8, 0, 0)\n\n\u002F\u002F Wrong: non-standard radii (even if from Figma)\nBorder(child).CornerRadius(3)\nBorder(child).CornerRadius(6)\n",[4368],{"type":45,"tag":65,"props":4369,"children":4370},{"__ignoreMap":351},[4371,4379,4387,4395,4402,4410,4418,4426,4433,4441,4449,4457,4464,4472,4480,4487,4495,4503],{"type":45,"tag":357,"props":4372,"children":4373},{"class":359,"line":360},[4374],{"type":45,"tag":357,"props":4375,"children":4376},{},[4377],{"type":51,"value":4378},"\u002F\u002F Preferred: resolve system values at render time\n",{"type":45,"tag":357,"props":4380,"children":4381},{"class":359,"line":369},[4382],{"type":45,"tag":357,"props":4383,"children":4384},{},[4385],{"type":51,"value":4386},"var controlRadius = ThemeResource.CornerRadius(\"ControlCornerRadius\");\n",{"type":45,"tag":357,"props":4388,"children":4389},{"class":359,"line":378},[4390],{"type":45,"tag":357,"props":4391,"children":4392},{},[4393],{"type":51,"value":4394},"var overlayRadius = ThemeResource.CornerRadius(\"OverlayCornerRadius\");\n",{"type":45,"tag":357,"props":4396,"children":4397},{"class":359,"line":387},[4398],{"type":45,"tag":357,"props":4399,"children":4400},{"emptyLinePlaceholder":400},[4401],{"type":51,"value":403},{"type":45,"tag":357,"props":4403,"children":4404},{"class":359,"line":396},[4405],{"type":45,"tag":357,"props":4406,"children":4407},{},[4408],{"type":51,"value":4409},"\u002F\u002F Apply to elements\n",{"type":45,"tag":357,"props":4411,"children":4412},{"class":359,"line":406},[4413],{"type":45,"tag":357,"props":4414,"children":4415},{},[4416],{"type":51,"value":4417},"Border(child).CornerRadius(controlRadius.TopLeft)   \u002F\u002F controls, buttons, cards\n",{"type":45,"tag":357,"props":4419,"children":4420},{"class":359,"line":415},[4421],{"type":45,"tag":357,"props":4422,"children":4423},{},[4424],{"type":51,"value":4425},"Border(dialog).CornerRadius(overlayRadius.TopLeft)   \u002F\u002F dialogs, flyouts, menus\n",{"type":45,"tag":357,"props":4427,"children":4428},{"class":359,"line":424},[4429],{"type":45,"tag":357,"props":4430,"children":4431},{"emptyLinePlaceholder":400},[4432],{"type":51,"value":403},{"type":45,"tag":357,"props":4434,"children":4435},{"class":359,"line":1884},[4436],{"type":45,"tag":357,"props":4437,"children":4438},{},[4439],{"type":51,"value":4440},"\u002F\u002F Also acceptable: hardcoded system values\n",{"type":45,"tag":357,"props":4442,"children":4443},{"class":359,"line":1892},[4444],{"type":45,"tag":357,"props":4445,"children":4446},{},[4447],{"type":51,"value":4448},"Border(child).CornerRadius(4)   \u002F\u002F ControlCornerRadius equivalent\n",{"type":45,"tag":357,"props":4450,"children":4451},{"class":359,"line":1901},[4452],{"type":45,"tag":357,"props":4453,"children":4454},{},[4455],{"type":51,"value":4456},"Border(child).CornerRadius(8)   \u002F\u002F OverlayCornerRadius equivalent\n",{"type":45,"tag":357,"props":4458,"children":4459},{"class":359,"line":3277},[4460],{"type":45,"tag":357,"props":4461,"children":4462},{"emptyLinePlaceholder":400},[4463],{"type":51,"value":403},{"type":45,"tag":357,"props":4465,"children":4466},{"class":359,"line":3286},[4467],{"type":45,"tag":357,"props":4468,"children":4469},{},[4470],{"type":51,"value":4471},"\u002F\u002F Selective rounding (top corners only)\n",{"type":45,"tag":357,"props":4473,"children":4474},{"class":359,"line":3295},[4475],{"type":45,"tag":357,"props":4476,"children":4477},{},[4478],{"type":51,"value":4479},"Border(child).CornerRadius(8, 8, 0, 0)\n",{"type":45,"tag":357,"props":4481,"children":4482},{"class":359,"line":3304},[4483],{"type":45,"tag":357,"props":4484,"children":4485},{"emptyLinePlaceholder":400},[4486],{"type":51,"value":403},{"type":45,"tag":357,"props":4488,"children":4489},{"class":359,"line":3312},[4490],{"type":45,"tag":357,"props":4491,"children":4492},{},[4493],{"type":51,"value":4494},"\u002F\u002F Wrong: non-standard radii (even if from Figma)\n",{"type":45,"tag":357,"props":4496,"children":4497},{"class":359,"line":3321},[4498],{"type":45,"tag":357,"props":4499,"children":4500},{},[4501],{"type":51,"value":4502},"Border(child).CornerRadius(3)\n",{"type":45,"tag":357,"props":4504,"children":4506},{"class":359,"line":4505},18,[4507],{"type":45,"tag":357,"props":4508,"children":4509},{},[4510],{"type":51,"value":4511},"Border(child).CornerRadius(6)\n",{"type":45,"tag":54,"props":4513,"children":4514},{},[4515,4520,4522,4527,4529,4534],{"type":45,"tag":112,"props":4516,"children":4517},{},[4518],{"type":51,"value":4519},"Mixed radii for nested surfaces:",{"type":51,"value":4521}," When nesting controls inside overlay containers, the outer container uses ",{"type":45,"tag":65,"props":4523,"children":4525},{"className":4524},[],[4526],{"type":51,"value":4348},{"type":51,"value":4528}," while inner controls use ",{"type":45,"tag":65,"props":4530,"children":4532},{"className":4531},[],[4533],{"type":51,"value":4340},{"type":51,"value":4535},":",{"type":45,"tag":346,"props":4537,"children":4539},{"className":348,"code":4538,"language":350,"meta":351,"style":351},"var cr = ThemeResource.CornerRadius(\"ControlCornerRadius\");\nvar or = ThemeResource.CornerRadius(\"OverlayCornerRadius\");\n\n\u002F\u002F Dialog with control-radius inner elements\nBorder(\n    VStack(12,\n        TextBox(\"\", placeholderText: \"Username\").CornerRadius(cr.TopLeft),\n        Button(\"Sign In\", onClick)\n            .Background(Theme.Accent)\n            .CornerRadius(cr.TopLeft)\n    ).Margin(24)\n)\n.Background(Theme.LayerFill)\n.WithBorder(Theme.SurfaceStroke)\n.CornerRadius(or.TopLeft)  \u002F\u002F outer overlay radius\n",[4540],{"type":45,"tag":65,"props":4541,"children":4542},{"__ignoreMap":351},[4543,4551,4559,4566,4574,4581,4589,4597,4605,4613,4621,4629,4637,4645,4653],{"type":45,"tag":357,"props":4544,"children":4545},{"class":359,"line":360},[4546],{"type":45,"tag":357,"props":4547,"children":4548},{},[4549],{"type":51,"value":4550},"var cr = ThemeResource.CornerRadius(\"ControlCornerRadius\");\n",{"type":45,"tag":357,"props":4552,"children":4553},{"class":359,"line":369},[4554],{"type":45,"tag":357,"props":4555,"children":4556},{},[4557],{"type":51,"value":4558},"var or = ThemeResource.CornerRadius(\"OverlayCornerRadius\");\n",{"type":45,"tag":357,"props":4560,"children":4561},{"class":359,"line":378},[4562],{"type":45,"tag":357,"props":4563,"children":4564},{"emptyLinePlaceholder":400},[4565],{"type":51,"value":403},{"type":45,"tag":357,"props":4567,"children":4568},{"class":359,"line":387},[4569],{"type":45,"tag":357,"props":4570,"children":4571},{},[4572],{"type":51,"value":4573},"\u002F\u002F Dialog with control-radius inner elements\n",{"type":45,"tag":357,"props":4575,"children":4576},{"class":359,"line":396},[4577],{"type":45,"tag":357,"props":4578,"children":4579},{},[4580],{"type":51,"value":4220},{"type":45,"tag":357,"props":4582,"children":4583},{"class":359,"line":406},[4584],{"type":45,"tag":357,"props":4585,"children":4586},{},[4587],{"type":51,"value":4588},"    VStack(12,\n",{"type":45,"tag":357,"props":4590,"children":4591},{"class":359,"line":415},[4592],{"type":45,"tag":357,"props":4593,"children":4594},{},[4595],{"type":51,"value":4596},"        TextBox(\"\", placeholderText: \"Username\").CornerRadius(cr.TopLeft),\n",{"type":45,"tag":357,"props":4598,"children":4599},{"class":359,"line":424},[4600],{"type":45,"tag":357,"props":4601,"children":4602},{},[4603],{"type":51,"value":4604},"        Button(\"Sign In\", onClick)\n",{"type":45,"tag":357,"props":4606,"children":4607},{"class":359,"line":1884},[4608],{"type":45,"tag":357,"props":4609,"children":4610},{},[4611],{"type":51,"value":4612},"            .Background(Theme.Accent)\n",{"type":45,"tag":357,"props":4614,"children":4615},{"class":359,"line":1892},[4616],{"type":45,"tag":357,"props":4617,"children":4618},{},[4619],{"type":51,"value":4620},"            .CornerRadius(cr.TopLeft)\n",{"type":45,"tag":357,"props":4622,"children":4623},{"class":359,"line":1901},[4624],{"type":45,"tag":357,"props":4625,"children":4626},{},[4627],{"type":51,"value":4628},"    ).Margin(24)\n",{"type":45,"tag":357,"props":4630,"children":4631},{"class":359,"line":3277},[4632],{"type":45,"tag":357,"props":4633,"children":4634},{},[4635],{"type":51,"value":4636},")\n",{"type":45,"tag":357,"props":4638,"children":4639},{"class":359,"line":3286},[4640],{"type":45,"tag":357,"props":4641,"children":4642},{},[4643],{"type":51,"value":4644},".Background(Theme.LayerFill)\n",{"type":45,"tag":357,"props":4646,"children":4647},{"class":359,"line":3295},[4648],{"type":45,"tag":357,"props":4649,"children":4650},{},[4651],{"type":51,"value":4652},".WithBorder(Theme.SurfaceStroke)\n",{"type":45,"tag":357,"props":4654,"children":4655},{"class":359,"line":3304},[4656],{"type":45,"tag":357,"props":4657,"children":4658},{},[4659],{"type":51,"value":4660},".CornerRadius(or.TopLeft)  \u002F\u002F outer overlay radius\n",{"type":45,"tag":458,"props":4662,"children":4664},{"id":4663},"sizing",[4665],{"type":51,"value":4666},"Sizing",{"type":45,"tag":346,"props":4668,"children":4670},{"className":348,"code":4669,"language":350,"meta":351,"style":351},"\u002F\u002F Correct: MinHeight for flexible sizing\nButton(\"Action\").MinHeight(40)\nVStack(children).MinWidth(200)\n\n\u002F\u002F Wrong: fixed Height clips at larger text scales\nButton(\"Action\").Height(32)\nTextBox(text, setText).Height(30)\n",[4671],{"type":45,"tag":65,"props":4672,"children":4673},{"__ignoreMap":351},[4674,4682,4690,4698,4705,4713,4721],{"type":45,"tag":357,"props":4675,"children":4676},{"class":359,"line":360},[4677],{"type":45,"tag":357,"props":4678,"children":4679},{},[4680],{"type":51,"value":4681},"\u002F\u002F Correct: MinHeight for flexible sizing\n",{"type":45,"tag":357,"props":4683,"children":4684},{"class":359,"line":369},[4685],{"type":45,"tag":357,"props":4686,"children":4687},{},[4688],{"type":51,"value":4689},"Button(\"Action\").MinHeight(40)\n",{"type":45,"tag":357,"props":4691,"children":4692},{"class":359,"line":378},[4693],{"type":45,"tag":357,"props":4694,"children":4695},{},[4696],{"type":51,"value":4697},"VStack(children).MinWidth(200)\n",{"type":45,"tag":357,"props":4699,"children":4700},{"class":359,"line":387},[4701],{"type":45,"tag":357,"props":4702,"children":4703},{"emptyLinePlaceholder":400},[4704],{"type":51,"value":403},{"type":45,"tag":357,"props":4706,"children":4707},{"class":359,"line":396},[4708],{"type":45,"tag":357,"props":4709,"children":4710},{},[4711],{"type":51,"value":4712},"\u002F\u002F Wrong: fixed Height clips at larger text scales\n",{"type":45,"tag":357,"props":4714,"children":4715},{"class":359,"line":406},[4716],{"type":45,"tag":357,"props":4717,"children":4718},{},[4719],{"type":51,"value":4720},"Button(\"Action\").Height(32)\n",{"type":45,"tag":357,"props":4722,"children":4723},{"class":359,"line":415},[4724],{"type":45,"tag":357,"props":4725,"children":4726},{},[4727],{"type":51,"value":4728},"TextBox(text, setText).Height(30)\n",{"type":45,"tag":220,"props":4730,"children":4731},{},[4732,4766,4771],{"type":45,"tag":188,"props":4733,"children":4734},{},[4735,4737,4743,4744,4750,4752,4758,4759,4765],{"type":51,"value":4736},"Prefer ",{"type":45,"tag":65,"props":4738,"children":4740},{"className":4739},[],[4741],{"type":51,"value":4742},"MinHeight",{"type":51,"value":267},{"type":45,"tag":65,"props":4745,"children":4747},{"className":4746},[],[4748],{"type":51,"value":4749},"MinWidth",{"type":51,"value":4751}," over fixed ",{"type":45,"tag":65,"props":4753,"children":4755},{"className":4754},[],[4756],{"type":51,"value":4757},"Height",{"type":51,"value":267},{"type":45,"tag":65,"props":4760,"children":4762},{"className":4761},[],[4763],{"type":51,"value":4764},"Width",{"type":51,"value":170},{"type":45,"tag":188,"props":4767,"children":4768},{},[4769],{"type":51,"value":4770},"Avoid fixed widths on buttons — let content drive width.",{"type":45,"tag":188,"props":4772,"children":4773},{},[4774,4776,4781],{"type":51,"value":4775},"Buttons achieve correct height through padding, not explicit ",{"type":45,"tag":65,"props":4777,"children":4779},{"className":4778},[],[4780],{"type":51,"value":4757},{"type":51,"value":170},{"type":45,"tag":458,"props":4783,"children":4785},{"id":4784},"container-choice",[4786],{"type":51,"value":4787},"Container Choice",{"type":45,"tag":54,"props":4789,"children":4790},{},[4791,4793,4813,4815,4821,4822,4828,4830,4835,4836,4841],{"type":51,"value":4792},"Pick the right container. ",{"type":45,"tag":112,"props":4794,"children":4795},{},[4796,4797,4803,4805,4811],{"type":51,"value":4736},{"type":45,"tag":65,"props":4798,"children":4800},{"className":4799},[],[4801],{"type":51,"value":4802},"FlexRow",{"type":51,"value":4804}," \u002F ",{"type":45,"tag":65,"props":4806,"children":4808},{"className":4807},[],[4809],{"type":51,"value":4810},"FlexColumn",{"type":51,"value":4812}," as the default for\nlinear layout",{"type":51,"value":4814}," — they follow CSS Flexbox semantics (grow, shrink, basis, gap,\nwrap, ",{"type":45,"tag":65,"props":4816,"children":4818},{"className":4817},[],[4819],{"type":51,"value":4820},"justify-content",{"type":51,"value":80},{"type":45,"tag":65,"props":4823,"children":4825},{"className":4824},[],[4826],{"type":51,"value":4827},"align-items",{"type":51,"value":4829},"), which matches the mental model web-\ntrained engineers and designers already have. ",{"type":45,"tag":65,"props":4831,"children":4833},{"className":4832},[],[4834],{"type":51,"value":3905},{"type":51,"value":4804},{"type":45,"tag":65,"props":4837,"children":4839},{"className":4838},[],[4840],{"type":51,"value":3912},{"type":51,"value":4842}," remain a good\nchoice when you specifically want StackPanel's shrink-wrap cross-axis behavior\nor are porting from existing StackPanel code.",{"type":45,"tag":539,"props":4844,"children":4845},{},[4846,4867],{"type":45,"tag":543,"props":4847,"children":4848},{},[4849],{"type":45,"tag":547,"props":4850,"children":4851},{},[4852,4857,4862],{"type":45,"tag":551,"props":4853,"children":4854},{},[4855],{"type":51,"value":4856},"Need",{"type":45,"tag":551,"props":4858,"children":4859},{},[4860],{"type":51,"value":4861},"Use",{"type":45,"tag":551,"props":4863,"children":4864},{},[4865],{"type":51,"value":4866},"Not",{"type":45,"tag":567,"props":4868,"children":4869},{},[4870,4903,4938,4971,5010,5032],{"type":45,"tag":547,"props":4871,"children":4872},{},[4873,4878,4887],{"type":45,"tag":574,"props":4874,"children":4875},{},[4876],{"type":51,"value":4877},"Single child with background\u002Fborder",{"type":45,"tag":574,"props":4879,"children":4880},{},[4881],{"type":45,"tag":65,"props":4882,"children":4884},{"className":4883},[],[4885],{"type":51,"value":4886},"Border(child)",{"type":45,"tag":574,"props":4888,"children":4889},{},[4890,4895,4896,4901],{"type":45,"tag":65,"props":4891,"children":4893},{"className":4892},[],[4894],{"type":51,"value":3920},{"type":51,"value":126},{"type":45,"tag":65,"props":4897,"children":4899},{"className":4898},[],[4900],{"type":51,"value":4810},{"type":51,"value":4902}," with one child",{"type":45,"tag":547,"props":4904,"children":4905},{},[4906,4911,4928],{"type":45,"tag":574,"props":4907,"children":4908},{},[4909],{"type":51,"value":4910},"Linear vertical layout",{"type":45,"tag":574,"props":4912,"children":4913},{},[4914,4920,4922],{"type":45,"tag":65,"props":4915,"children":4917},{"className":4916},[],[4918],{"type":51,"value":4919},"FlexColumn(children)",{"type":51,"value":4921}," (preferred), or ",{"type":45,"tag":65,"props":4923,"children":4925},{"className":4924},[],[4926],{"type":51,"value":4927},"VStack(children)",{"type":45,"tag":574,"props":4929,"children":4930},{},[4931,4933],{"type":51,"value":4932},"Nested ",{"type":45,"tag":65,"props":4934,"children":4936},{"className":4935},[],[4937],{"type":51,"value":3920},{"type":45,"tag":547,"props":4939,"children":4940},{},[4941,4946,4962],{"type":45,"tag":574,"props":4942,"children":4943},{},[4944],{"type":51,"value":4945},"Linear horizontal layout",{"type":45,"tag":574,"props":4947,"children":4948},{},[4949,4955,4956],{"type":45,"tag":65,"props":4950,"children":4952},{"className":4951},[],[4953],{"type":51,"value":4954},"FlexRow(children)",{"type":51,"value":4921},{"type":45,"tag":65,"props":4957,"children":4959},{"className":4958},[],[4960],{"type":51,"value":4961},"HStack(children)",{"type":45,"tag":574,"props":4963,"children":4964},{},[4965,4966],{"type":51,"value":4932},{"type":45,"tag":65,"props":4967,"children":4969},{"className":4968},[],[4970],{"type":51,"value":3920},{"type":45,"tag":547,"props":4972,"children":4973},{},[4974,4986,5005],{"type":45,"tag":574,"props":4975,"children":4976},{},[4977,4979,4984],{"type":51,"value":4978},"Grow\u002Fshrink, wrapping, or ",{"type":45,"tag":65,"props":4980,"children":4982},{"className":4981},[],[4983],{"type":51,"value":4820},{"type":51,"value":4985}," distribution",{"type":45,"tag":574,"props":4987,"children":4988},{},[4989,4995,4997,5003],{"type":45,"tag":65,"props":4990,"children":4992},{"className":4991},[],[4993],{"type":51,"value":4994},"Flex(children)",{"type":51,"value":4996}," with ",{"type":45,"tag":65,"props":4998,"children":5000},{"className":4999},[],[5001],{"type":51,"value":5002},".Flex(grow\u002Fshrink\u002Fbasis)",{"type":51,"value":5004}," on children",{"type":45,"tag":574,"props":5006,"children":5007},{},[5008],{"type":51,"value":5009},"Complex nested stacks",{"type":45,"tag":547,"props":5011,"children":5012},{},[5013,5018,5027],{"type":45,"tag":574,"props":5014,"children":5015},{},[5016],{"type":51,"value":5017},"Positional row\u002Fcolumn layout",{"type":45,"tag":574,"props":5019,"children":5020},{},[5021],{"type":45,"tag":65,"props":5022,"children":5024},{"className":5023},[],[5025],{"type":51,"value":5026},"Grid(columns, rows, children)",{"type":45,"tag":574,"props":5028,"children":5029},{},[5030],{"type":51,"value":5031},"Canvas or absolute positioning",{"type":45,"tag":547,"props":5033,"children":5034},{},[5035,5040,5057],{"type":45,"tag":574,"props":5036,"children":5037},{},[5038],{"type":51,"value":5039},"Text that needs trimming",{"type":45,"tag":574,"props":5041,"children":5042},{},[5043,5048,5049,5055],{"type":45,"tag":65,"props":5044,"children":5046},{"className":5045},[],[5047],{"type":51,"value":3920},{"type":51,"value":4996},{"type":45,"tag":65,"props":5050,"children":5052},{"className":5051},[],[5053],{"type":51,"value":5054},"\"*\"",{"type":51,"value":5056}," column",{"type":45,"tag":574,"props":5058,"children":5059},{},[5060,5065,5066,5071],{"type":45,"tag":65,"props":5061,"children":5063},{"className":5062},[],[5064],{"type":51,"value":3912},{"type":51,"value":4804},{"type":45,"tag":65,"props":5067,"children":5069},{"className":5068},[],[5070],{"type":51,"value":4802},{"type":51,"value":5072}," (children get unbounded main-axis width)",{"type":45,"tag":54,"props":5074,"children":5075},{},[5076,5078,5083,5084,5089,5090,5095,5096,5101],{"type":51,"value":5077},"Remove wrapper containers (",{"type":45,"tag":65,"props":5079,"children":5081},{"className":5080},[],[5082],{"type":51,"value":3875},{"type":51,"value":80},{"type":45,"tag":65,"props":5085,"children":5087},{"className":5086},[],[5088],{"type":51,"value":3920},{"type":51,"value":80},{"type":45,"tag":65,"props":5091,"children":5093},{"className":5092},[],[5094],{"type":51,"value":4810},{"type":51,"value":80},{"type":45,"tag":65,"props":5097,"children":5099},{"className":5098},[],[5100],{"type":51,"value":3905},{"type":51,"value":5102},") that exist only for nesting without contributing layout, styling, or semantic purpose.",{"type":45,"tag":54,"props":5104,"children":5105},{},[5106,5111,5112,5117,5119,5124,5126,5131,5133,5138,5140,5146,5148,5154,5156,5161],{"type":45,"tag":112,"props":5107,"children":5108},{},[5109],{"type":51,"value":5110},"Text trimming caveat:",{"type":51,"value":3476},{"type":45,"tag":65,"props":5113,"children":5115},{"className":5114},[],[5116],{"type":51,"value":3912},{"type":51,"value":5118}," (StackPanel) and ",{"type":45,"tag":65,"props":5120,"children":5122},{"className":5121},[],[5123],{"type":51,"value":4802},{"type":51,"value":5125}," both give children unbounded width on the main axis, so ",{"type":45,"tag":65,"props":5127,"children":5129},{"className":5128},[],[5130],{"type":51,"value":3523},{"type":51,"value":5132}," never activates inside them. Use a ",{"type":45,"tag":65,"props":5134,"children":5136},{"className":5135},[],[5137],{"type":51,"value":3920},{"type":51,"value":5139}," with a ",{"type":45,"tag":65,"props":5141,"children":5143},{"className":5142},[],[5144],{"type":51,"value":5145},"GridSize.Star()",{"type":51,"value":5147}," column. Note: ",{"type":45,"tag":65,"props":5149,"children":5151},{"className":5150},[],[5152],{"type":51,"value":5153},"GridSize.Auto",{"type":51,"value":5155}," also sizes to content and prevents trimming — always use ",{"type":45,"tag":65,"props":5157,"children":5159},{"className":5158},[],[5160],{"type":51,"value":5145},{"type":51,"value":5162}," for the column that contains trimmable text.",{"type":45,"tag":346,"props":5164,"children":5166},{"className":348,"code":5165,"language":350,"meta":351,"style":351},"\u002F\u002F Correct: Grid constrains width so trimming works\nGrid(\n    columns: [GridSize.Auto, GridSize.Star()],\n    rows: [GridSize.Auto],\n    Image(source).Size(32, 32).Grid(column: 0),\n    TextBlock(title).TextTrimming(TextTrimming.CharacterEllipsis).Grid(column: 1))\n\n\u002F\u002F Wrong: TextTrimming never fires inside HStack\nHStack(8,\n    Image(source).Size(32, 32),\n    TextBlock(title).TextTrimming(TextTrimming.CharacterEllipsis))\n",[5167],{"type":45,"tag":65,"props":5168,"children":5169},{"__ignoreMap":351},[5170,5178,5186,5194,5202,5210,5218,5225,5233,5241,5249],{"type":45,"tag":357,"props":5171,"children":5172},{"class":359,"line":360},[5173],{"type":45,"tag":357,"props":5174,"children":5175},{},[5176],{"type":51,"value":5177},"\u002F\u002F Correct: Grid constrains width so trimming works\n",{"type":45,"tag":357,"props":5179,"children":5180},{"class":359,"line":369},[5181],{"type":45,"tag":357,"props":5182,"children":5183},{},[5184],{"type":51,"value":5185},"Grid(\n",{"type":45,"tag":357,"props":5187,"children":5188},{"class":359,"line":378},[5189],{"type":45,"tag":357,"props":5190,"children":5191},{},[5192],{"type":51,"value":5193},"    columns: [GridSize.Auto, GridSize.Star()],\n",{"type":45,"tag":357,"props":5195,"children":5196},{"class":359,"line":387},[5197],{"type":45,"tag":357,"props":5198,"children":5199},{},[5200],{"type":51,"value":5201},"    rows: [GridSize.Auto],\n",{"type":45,"tag":357,"props":5203,"children":5204},{"class":359,"line":396},[5205],{"type":45,"tag":357,"props":5206,"children":5207},{},[5208],{"type":51,"value":5209},"    Image(source).Size(32, 32).Grid(column: 0),\n",{"type":45,"tag":357,"props":5211,"children":5212},{"class":359,"line":406},[5213],{"type":45,"tag":357,"props":5214,"children":5215},{},[5216],{"type":51,"value":5217},"    TextBlock(title).TextTrimming(TextTrimming.CharacterEllipsis).Grid(column: 1))\n",{"type":45,"tag":357,"props":5219,"children":5220},{"class":359,"line":415},[5221],{"type":45,"tag":357,"props":5222,"children":5223},{"emptyLinePlaceholder":400},[5224],{"type":51,"value":403},{"type":45,"tag":357,"props":5226,"children":5227},{"class":359,"line":424},[5228],{"type":45,"tag":357,"props":5229,"children":5230},{},[5231],{"type":51,"value":5232},"\u002F\u002F Wrong: TextTrimming never fires inside HStack\n",{"type":45,"tag":357,"props":5234,"children":5235},{"class":359,"line":1884},[5236],{"type":45,"tag":357,"props":5237,"children":5238},{},[5239],{"type":51,"value":5240},"HStack(8,\n",{"type":45,"tag":357,"props":5242,"children":5243},{"class":359,"line":1892},[5244],{"type":45,"tag":357,"props":5245,"children":5246},{},[5247],{"type":51,"value":5248},"    Image(source).Size(32, 32),\n",{"type":45,"tag":357,"props":5250,"children":5251},{"class":359,"line":1901},[5252],{"type":45,"tag":357,"props":5253,"children":5254},{},[5255],{"type":51,"value":5256},"    TextBlock(title).TextTrimming(TextTrimming.CharacterEllipsis))\n",{"type":45,"tag":458,"props":5258,"children":5260},{"id":5259},"scrollview-configuration",[5261],{"type":51,"value":5262},"ScrollView Configuration",{"type":45,"tag":220,"props":5264,"children":5265},{},[5266,5278,5290],{"type":45,"tag":188,"props":5267,"children":5268},{},[5269,5270,5276],{"type":51,"value":336},{"type":45,"tag":65,"props":5271,"children":5273},{"className":5272},[],[5274],{"type":51,"value":5275},"Auto",{"type":51,"value":5277}," scrollbar visibility — scrollbar appears only when content overflows.",{"type":45,"tag":188,"props":5279,"children":5280},{},[5281,5282,5288],{"type":51,"value":2410},{"type":45,"tag":65,"props":5283,"children":5285},{"className":5284},[],[5286],{"type":51,"value":5287},"HorizontalContentAlignment = Stretch",{"type":51,"value":5289}," on the ScrollView to prevent content from collapsing.",{"type":45,"tag":188,"props":5291,"children":5292},{},[5293],{"type":51,"value":5294},"Only the content area should scroll — headers and action bars remain outside the ScrollView.",{"type":45,"tag":346,"props":5296,"children":5298},{"className":348,"code":5297,"language":350,"meta":351,"style":351},"\u002F\u002F Correct: header stays fixed, content scrolls\nVStack(\n    Heading(\"Page Title\"),\n    ScrollView(VStack(8, contentItems)))\n",[5299],{"type":45,"tag":65,"props":5300,"children":5301},{"__ignoreMap":351},[5302,5310,5318,5326],{"type":45,"tag":357,"props":5303,"children":5304},{"class":359,"line":360},[5305],{"type":45,"tag":357,"props":5306,"children":5307},{},[5308],{"type":51,"value":5309},"\u002F\u002F Correct: header stays fixed, content scrolls\n",{"type":45,"tag":357,"props":5311,"children":5312},{"class":359,"line":369},[5313],{"type":45,"tag":357,"props":5314,"children":5315},{},[5316],{"type":51,"value":5317},"VStack(\n",{"type":45,"tag":357,"props":5319,"children":5320},{"class":359,"line":378},[5321],{"type":45,"tag":357,"props":5322,"children":5323},{},[5324],{"type":51,"value":5325},"    Heading(\"Page Title\"),\n",{"type":45,"tag":357,"props":5327,"children":5328},{"class":359,"line":387},[5329],{"type":45,"tag":357,"props":5330,"children":5331},{},[5332],{"type":51,"value":5333},"    ScrollView(VStack(8, contentItems)))\n",{"type":45,"tag":458,"props":5335,"children":5337},{"id":5336},"window-title-bar",[5338],{"type":51,"value":5339},"Window Title Bar",{"type":45,"tag":54,"props":5341,"children":5342},{},[5343,5344,5350,5352,5358,5359,5365],{"type":51,"value":4736},{"type":45,"tag":65,"props":5345,"children":5347},{"className":5346},[],[5348],{"type":51,"value":5349},"TitleBar(...)",{"type":51,"value":5351}," as the top-of-window element for Reactor desktop apps\nwhere a title makes sense (most main windows, document shells, settings\nwindows). It integrates with the Windows caption (drag region, system menu,\nmin\u002Fmax\u002Fclose) and themes with the rest of the app, and it accepts inline\n",{"type":45,"tag":65,"props":5353,"children":5355},{"className":5354},[],[5356],{"type":51,"value":5357},"Content",{"type":51,"value":2462},{"type":45,"tag":65,"props":5360,"children":5362},{"className":5361},[],[5363],{"type":51,"value":5364},"RightHeader",{"type":51,"value":5366}," for branding, document context, or small inline\ncontrols — which avoids the common mistake of stacking a custom header row\nbelow the system chrome and ending up with two visual title zones.",{"type":45,"tag":346,"props":5368,"children":5370},{"className":348,"code":5369,"language":350,"meta":351,"style":351},"\u002F\u002F Preferred: real Windows title bar with app title + subtitle + inline content\nvar titleBar = (TitleBar(\"MyApp\") with\n{\n    Subtitle = currentDoc,\n    Content = ModeSwitcher(mode, setMode),\n    RightHeader = TextBlock($\"{rowsLoaded:N0} rows\").FontSize(12).Opacity(0.6),\n}).Flex(shrink: 0);\n\nreturn FlexColumn(titleBar, MainContent());\n",[5371],{"type":45,"tag":65,"props":5372,"children":5373},{"__ignoreMap":351},[5374,5382,5390,5398,5406,5414,5422,5430,5437],{"type":45,"tag":357,"props":5375,"children":5376},{"class":359,"line":360},[5377],{"type":45,"tag":357,"props":5378,"children":5379},{},[5380],{"type":51,"value":5381},"\u002F\u002F Preferred: real Windows title bar with app title + subtitle + inline content\n",{"type":45,"tag":357,"props":5383,"children":5384},{"class":359,"line":369},[5385],{"type":45,"tag":357,"props":5386,"children":5387},{},[5388],{"type":51,"value":5389},"var titleBar = (TitleBar(\"MyApp\") with\n",{"type":45,"tag":357,"props":5391,"children":5392},{"class":359,"line":378},[5393],{"type":45,"tag":357,"props":5394,"children":5395},{},[5396],{"type":51,"value":5397},"{\n",{"type":45,"tag":357,"props":5399,"children":5400},{"class":359,"line":387},[5401],{"type":45,"tag":357,"props":5402,"children":5403},{},[5404],{"type":51,"value":5405},"    Subtitle = currentDoc,\n",{"type":45,"tag":357,"props":5407,"children":5408},{"class":359,"line":396},[5409],{"type":45,"tag":357,"props":5410,"children":5411},{},[5412],{"type":51,"value":5413},"    Content = ModeSwitcher(mode, setMode),\n",{"type":45,"tag":357,"props":5415,"children":5416},{"class":359,"line":406},[5417],{"type":45,"tag":357,"props":5418,"children":5419},{},[5420],{"type":51,"value":5421},"    RightHeader = TextBlock($\"{rowsLoaded:N0} rows\").FontSize(12).Opacity(0.6),\n",{"type":45,"tag":357,"props":5423,"children":5424},{"class":359,"line":415},[5425],{"type":45,"tag":357,"props":5426,"children":5427},{},[5428],{"type":51,"value":5429},"}).Flex(shrink: 0);\n",{"type":45,"tag":357,"props":5431,"children":5432},{"class":359,"line":424},[5433],{"type":45,"tag":357,"props":5434,"children":5435},{"emptyLinePlaceholder":400},[5436],{"type":51,"value":403},{"type":45,"tag":357,"props":5438,"children":5439},{"class":359,"line":1884},[5440],{"type":45,"tag":357,"props":5441,"children":5442},{},[5443],{"type":51,"value":5444},"return FlexColumn(titleBar, MainContent());\n",{"type":45,"tag":54,"props":5446,"children":5447},{},[5448,5450,5456],{"type":51,"value":5449},"Small dialogs, embedded pop-outs, and tool windows that already have a\ndistinct visual header don't need ",{"type":45,"tag":65,"props":5451,"children":5453},{"className":5452},[],[5454],{"type":51,"value":5455},"TitleBar",{"type":51,"value":5457}," — use it where you'd otherwise\nreach for a custom header row across the full window width.",{"type":45,"tag":458,"props":5459,"children":5461},{"id":5460},"spacing",[5462],{"type":51,"value":5463},"Spacing",{"type":45,"tag":54,"props":5465,"children":5466},{},[5467,5468,5474,5475,5481,5483,5489,5490,5496,5498,5504,5505,5511],{"type":51,"value":336},{"type":45,"tag":65,"props":5469,"children":5471},{"className":5470},[],[5472],{"type":51,"value":5473},"FlexColumn(...) with { RowGap = n }",{"type":51,"value":4804},{"type":45,"tag":65,"props":5476,"children":5478},{"className":5477},[],[5479],{"type":51,"value":5480},"FlexRow(...) with { ColumnGap = n }",{"type":51,"value":5482}," (or ",{"type":45,"tag":65,"props":5484,"children":5486},{"className":5485},[],[5487],{"type":51,"value":5488},"VStack(spacing, ...)",{"type":51,"value":4804},{"type":45,"tag":65,"props":5491,"children":5493},{"className":5492},[],[5494],{"type":51,"value":5495},"HStack(spacing, ...)",{"type":51,"value":5497},") or Grid ",{"type":45,"tag":65,"props":5499,"children":5501},{"className":5500},[],[5502],{"type":51,"value":5503},"RowSpacing",{"type":51,"value":267},{"type":45,"tag":65,"props":5506,"children":5508},{"className":5507},[],[5509],{"type":51,"value":5510},"ColumnSpacing",{"type":51,"value":5512}," — not spacer elements.",{"type":45,"tag":346,"props":5514,"children":5516},{"className":348,"code":5515,"language":350,"meta":351,"style":351},"\u002F\u002F Correct\nVStack(8, TextBlock(\"A\"), TextBlock(\"B\"), TextBlock(\"C\"))\n\n\u002F\u002F Wrong: spacer element for spacing\nVStack(\n    TextBlock(\"A\"),\n    Border(null).Height(8),  \u002F\u002F Don't do this\n    TextBlock(\"B\"))\n",[5517],{"type":45,"tag":65,"props":5518,"children":5519},{"__ignoreMap":351},[5520,5527,5535,5542,5550,5557,5565,5573],{"type":45,"tag":357,"props":5521,"children":5522},{"class":359,"line":360},[5523],{"type":45,"tag":357,"props":5524,"children":5525},{},[5526],{"type":51,"value":1950},{"type":45,"tag":357,"props":5528,"children":5529},{"class":359,"line":369},[5530],{"type":45,"tag":357,"props":5531,"children":5532},{},[5533],{"type":51,"value":5534},"VStack(8, TextBlock(\"A\"), TextBlock(\"B\"), TextBlock(\"C\"))\n",{"type":45,"tag":357,"props":5536,"children":5537},{"class":359,"line":378},[5538],{"type":45,"tag":357,"props":5539,"children":5540},{"emptyLinePlaceholder":400},[5541],{"type":51,"value":403},{"type":45,"tag":357,"props":5543,"children":5544},{"class":359,"line":387},[5545],{"type":45,"tag":357,"props":5546,"children":5547},{},[5548],{"type":51,"value":5549},"\u002F\u002F Wrong: spacer element for spacing\n",{"type":45,"tag":357,"props":5551,"children":5552},{"class":359,"line":396},[5553],{"type":45,"tag":357,"props":5554,"children":5555},{},[5556],{"type":51,"value":5317},{"type":45,"tag":357,"props":5558,"children":5559},{"class":359,"line":406},[5560],{"type":45,"tag":357,"props":5561,"children":5562},{},[5563],{"type":51,"value":5564},"    TextBlock(\"A\"),\n",{"type":45,"tag":357,"props":5566,"children":5567},{"class":359,"line":415},[5568],{"type":45,"tag":357,"props":5569,"children":5570},{},[5571],{"type":51,"value":5572},"    Border(null).Height(8),  \u002F\u002F Don't do this\n",{"type":45,"tag":357,"props":5574,"children":5575},{"class":359,"line":424},[5576],{"type":45,"tag":357,"props":5577,"children":5578},{},[5579],{"type":51,"value":5580},"    TextBlock(\"B\"))\n",{"type":45,"tag":458,"props":5582,"children":5584},{"id":5583},"shadows",[5585],{"type":51,"value":5586},"Shadows",{"type":45,"tag":54,"props":5588,"children":5589},{},[5590,5596,5598,5603],{"type":45,"tag":65,"props":5591,"children":5593},{"className":5592},[],[5594],{"type":51,"value":5595},"ThemeShadow",{"type":51,"value":5597}," requires elevation to be visible. Add ",{"type":45,"tag":65,"props":5599,"children":5601},{"className":5600},[],[5602],{"type":51,"value":295},{"type":51,"value":5604}," and ensure the parent has padding (12px) to prevent shadow clipping:",{"type":45,"tag":346,"props":5606,"children":5608},{"className":348,"code":5607,"language":350,"meta":351,"style":351},"Border(\n    ScrollView(VStack(16, content))\n).Background(Theme.Ref(\"AcrylicBackgroundFillColorDefaultBrush\"))\n .WithBorder(Theme.Ref(\"SurfaceStrokeColorFlyoutBrush\"), 1)\n .CornerRadius(8)\n .Translation(0, 0, 32)\n .Set(b =>\n {\n     b.BackgroundSizing = BackgroundSizing.InnerBorderEdge;\n     b.Shadow = new ThemeShadow();\n })\n",[5609],{"type":45,"tag":65,"props":5610,"children":5611},{"__ignoreMap":351},[5612,5619,5627,5635,5643,5651,5659,5667,5675,5683,5691],{"type":45,"tag":357,"props":5613,"children":5614},{"class":359,"line":360},[5615],{"type":45,"tag":357,"props":5616,"children":5617},{},[5618],{"type":51,"value":4220},{"type":45,"tag":357,"props":5620,"children":5621},{"class":359,"line":369},[5622],{"type":45,"tag":357,"props":5623,"children":5624},{},[5625],{"type":51,"value":5626},"    ScrollView(VStack(16, content))\n",{"type":45,"tag":357,"props":5628,"children":5629},{"class":359,"line":378},[5630],{"type":45,"tag":357,"props":5631,"children":5632},{},[5633],{"type":51,"value":5634},").Background(Theme.Ref(\"AcrylicBackgroundFillColorDefaultBrush\"))\n",{"type":45,"tag":357,"props":5636,"children":5637},{"class":359,"line":387},[5638],{"type":45,"tag":357,"props":5639,"children":5640},{},[5641],{"type":51,"value":5642}," .WithBorder(Theme.Ref(\"SurfaceStrokeColorFlyoutBrush\"), 1)\n",{"type":45,"tag":357,"props":5644,"children":5645},{"class":359,"line":396},[5646],{"type":45,"tag":357,"props":5647,"children":5648},{},[5649],{"type":51,"value":5650}," .CornerRadius(8)\n",{"type":45,"tag":357,"props":5652,"children":5653},{"class":359,"line":406},[5654],{"type":45,"tag":357,"props":5655,"children":5656},{},[5657],{"type":51,"value":5658}," .Translation(0, 0, 32)\n",{"type":45,"tag":357,"props":5660,"children":5661},{"class":359,"line":415},[5662],{"type":45,"tag":357,"props":5663,"children":5664},{},[5665],{"type":51,"value":5666}," .Set(b =>\n",{"type":45,"tag":357,"props":5668,"children":5669},{"class":359,"line":424},[5670],{"type":45,"tag":357,"props":5671,"children":5672},{},[5673],{"type":51,"value":5674}," {\n",{"type":45,"tag":357,"props":5676,"children":5677},{"class":359,"line":1884},[5678],{"type":45,"tag":357,"props":5679,"children":5680},{},[5681],{"type":51,"value":5682},"     b.BackgroundSizing = BackgroundSizing.InnerBorderEdge;\n",{"type":45,"tag":357,"props":5684,"children":5685},{"class":359,"line":1892},[5686],{"type":45,"tag":357,"props":5687,"children":5688},{},[5689],{"type":51,"value":5690},"     b.Shadow = new ThemeShadow();\n",{"type":45,"tag":357,"props":5692,"children":5693},{"class":359,"line":1901},[5694],{"type":45,"tag":357,"props":5695,"children":5696},{},[5697],{"type":51,"value":5698}," })\n",{"type":45,"tag":54,"props":5700,"children":5701},{},[5702,5703,5709],{"type":51,"value":1783},{"type":45,"tag":159,"props":5704,"children":5706},{"href":5705},"design-docs\u002Flayout-and-scaling.md",[5707],{"type":51,"value":5708},"layout-and-scaling.md",{"type":51,"value":5710}," for full layout rules.",{"type":45,"tag":326,"props":5712,"children":5714},{"id":5713},"_6-data-flow-and-state",[5715],{"type":51,"value":5716},"6. Data Flow and State",{"type":45,"tag":54,"props":5718,"children":5719},{},[5720],{"type":51,"value":5721},"Reactor uses hooks, not MVVM data binding. Follow these patterns:",{"type":45,"tag":458,"props":5723,"children":5725},{"id":5724},"state-driven-ui-preferred",[5726],{"type":51,"value":5727},"State-Driven UI (Preferred)",{"type":45,"tag":346,"props":5729,"children":5731},{"className":348,"code":5730,"language":350,"meta":351,"style":351},"var (items, setItems) = UseState(new List\u003CItem>());\nvar (filter, setFilter) = UseState(\"\");\n\nvar filtered = UseMemo(() =>\n    items.Where(i => i.Name.Contains(filter, StringComparison.OrdinalIgnoreCase)).ToList(),\n    items, filter);\n\nreturn VStack(\n    TextBox(filter, setFilter, placeholderText: \"Filter...\"),\n    VStack(filtered.Select(item =>\n        TextBlock(item.Name).WithKey(item.Id)\n    ).ToArray()));\n",[5732],{"type":45,"tag":65,"props":5733,"children":5734},{"__ignoreMap":351},[5735,5743,5751,5758,5766,5774,5782,5789,5797,5805,5813,5821],{"type":45,"tag":357,"props":5736,"children":5737},{"class":359,"line":360},[5738],{"type":45,"tag":357,"props":5739,"children":5740},{},[5741],{"type":51,"value":5742},"var (items, setItems) = UseState(new List\u003CItem>());\n",{"type":45,"tag":357,"props":5744,"children":5745},{"class":359,"line":369},[5746],{"type":45,"tag":357,"props":5747,"children":5748},{},[5749],{"type":51,"value":5750},"var (filter, setFilter) = UseState(\"\");\n",{"type":45,"tag":357,"props":5752,"children":5753},{"class":359,"line":378},[5754],{"type":45,"tag":357,"props":5755,"children":5756},{"emptyLinePlaceholder":400},[5757],{"type":51,"value":403},{"type":45,"tag":357,"props":5759,"children":5760},{"class":359,"line":387},[5761],{"type":45,"tag":357,"props":5762,"children":5763},{},[5764],{"type":51,"value":5765},"var filtered = UseMemo(() =>\n",{"type":45,"tag":357,"props":5767,"children":5768},{"class":359,"line":396},[5769],{"type":45,"tag":357,"props":5770,"children":5771},{},[5772],{"type":51,"value":5773},"    items.Where(i => i.Name.Contains(filter, StringComparison.OrdinalIgnoreCase)).ToList(),\n",{"type":45,"tag":357,"props":5775,"children":5776},{"class":359,"line":406},[5777],{"type":45,"tag":357,"props":5778,"children":5779},{},[5780],{"type":51,"value":5781},"    items, filter);\n",{"type":45,"tag":357,"props":5783,"children":5784},{"class":359,"line":415},[5785],{"type":45,"tag":357,"props":5786,"children":5787},{"emptyLinePlaceholder":400},[5788],{"type":51,"value":403},{"type":45,"tag":357,"props":5790,"children":5791},{"class":359,"line":424},[5792],{"type":45,"tag":357,"props":5793,"children":5794},{},[5795],{"type":51,"value":5796},"return VStack(\n",{"type":45,"tag":357,"props":5798,"children":5799},{"class":359,"line":1884},[5800],{"type":45,"tag":357,"props":5801,"children":5802},{},[5803],{"type":51,"value":5804},"    TextBox(filter, setFilter, placeholderText: \"Filter...\"),\n",{"type":45,"tag":357,"props":5806,"children":5807},{"class":359,"line":1892},[5808],{"type":45,"tag":357,"props":5809,"children":5810},{},[5811],{"type":51,"value":5812},"    VStack(filtered.Select(item =>\n",{"type":45,"tag":357,"props":5814,"children":5815},{"class":359,"line":1901},[5816],{"type":45,"tag":357,"props":5817,"children":5818},{},[5819],{"type":51,"value":5820},"        TextBlock(item.Name).WithKey(item.Id)\n",{"type":45,"tag":357,"props":5822,"children":5823},{"class":359,"line":3277},[5824],{"type":45,"tag":357,"props":5825,"children":5826},{},[5827],{"type":51,"value":5828},"    ).ToArray()));\n",{"type":45,"tag":458,"props":5830,"children":5832},{"id":5831},"useobservable-for-external-models",[5833],{"type":51,"value":5834},"UseObservable for External Models",{"type":45,"tag":54,"props":5836,"children":5837},{},[5838,5840,5846],{"type":51,"value":5839},"When integrating with existing ",{"type":45,"tag":65,"props":5841,"children":5843},{"className":5842},[],[5844],{"type":51,"value":5845},"INotifyPropertyChanged",{"type":51,"value":5847}," objects:",{"type":45,"tag":346,"props":5849,"children":5851},{"className":348,"code":5850,"language":350,"meta":351,"style":351},"var model = UseObservable(externalModel);\n\nreturn VStack(\n    TextBlock(model.Title),\n    Slider(model.Volume, 0, 100, v => model.Volume = v));\n",[5852],{"type":45,"tag":65,"props":5853,"children":5854},{"__ignoreMap":351},[5855,5863,5870,5877,5885],{"type":45,"tag":357,"props":5856,"children":5857},{"class":359,"line":360},[5858],{"type":45,"tag":357,"props":5859,"children":5860},{},[5861],{"type":51,"value":5862},"var model = UseObservable(externalModel);\n",{"type":45,"tag":357,"props":5864,"children":5865},{"class":359,"line":369},[5866],{"type":45,"tag":357,"props":5867,"children":5868},{"emptyLinePlaceholder":400},[5869],{"type":51,"value":403},{"type":45,"tag":357,"props":5871,"children":5872},{"class":359,"line":378},[5873],{"type":45,"tag":357,"props":5874,"children":5875},{},[5876],{"type":51,"value":5796},{"type":45,"tag":357,"props":5878,"children":5879},{"class":359,"line":387},[5880],{"type":45,"tag":357,"props":5881,"children":5882},{},[5883],{"type":51,"value":5884},"    TextBlock(model.Title),\n",{"type":45,"tag":357,"props":5886,"children":5887},{"class":359,"line":396},[5888],{"type":45,"tag":357,"props":5889,"children":5890},{},[5891],{"type":51,"value":5892},"    Slider(model.Volume, 0, 100, v => model.Volume = v));\n",{"type":45,"tag":458,"props":5894,"children":5896},{"id":5895},"hook-rules-critical",[5897],{"type":51,"value":5898},"Hook Rules (Critical)",{"type":45,"tag":184,"props":5900,"children":5901},{},[5902,5920,5936],{"type":45,"tag":188,"props":5903,"children":5904},{},[5905,5910,5912,5918],{"type":45,"tag":112,"props":5906,"children":5907},{},[5908],{"type":51,"value":5909},"Same order every render",{"type":51,"value":5911}," — no hooks inside ",{"type":45,"tag":65,"props":5913,"children":5915},{"className":5914},[],[5916],{"type":51,"value":5917},"if",{"type":51,"value":5919}," blocks, no hooks in variable-length loops.",{"type":45,"tag":188,"props":5921,"children":5922},{},[5923,5934],{"type":45,"tag":112,"props":5924,"children":5925},{},[5926,5928],{"type":51,"value":5927},"Only call from ",{"type":45,"tag":65,"props":5929,"children":5931},{"className":5930},[],[5932],{"type":51,"value":5933},"Render()",{"type":51,"value":5935}," — or from within a function component body.",{"type":45,"tag":188,"props":5937,"children":5938},{},[5939,5951],{"type":45,"tag":112,"props":5940,"children":5941},{},[5942,5943,5949],{"type":51,"value":336},{"type":45,"tag":65,"props":5944,"children":5946},{"className":5945},[],[5947],{"type":51,"value":5948},"UseCallback",{"type":51,"value":5950}," for stable references",{"type":51,"value":5952}," — handlers passed to children should be memoized.",{"type":45,"tag":346,"props":5954,"children":5956},{"className":348,"code":5955,"language":350,"meta":351,"style":351},"\u002F\u002F Correct: hooks at top level, unconditional\nvar (count, setCount) = UseState(0);\nvar (name, setName) = UseState(\"\");\nvar increment = UseCallback(() => setCount(count + 1), count);\n\n\u002F\u002F Wrong: conditional hook\nif (showCounter)\n{\n    var (count, setCount) = UseState(0);  \u002F\u002F BREAKS hook ordering\n}\n",[5957],{"type":45,"tag":65,"props":5958,"children":5959},{"__ignoreMap":351},[5960,5968,5976,5984,5992,5999,6007,6015,6022,6030],{"type":45,"tag":357,"props":5961,"children":5962},{"class":359,"line":360},[5963],{"type":45,"tag":357,"props":5964,"children":5965},{},[5966],{"type":51,"value":5967},"\u002F\u002F Correct: hooks at top level, unconditional\n",{"type":45,"tag":357,"props":5969,"children":5970},{"class":359,"line":369},[5971],{"type":45,"tag":357,"props":5972,"children":5973},{},[5974],{"type":51,"value":5975},"var (count, setCount) = UseState(0);\n",{"type":45,"tag":357,"props":5977,"children":5978},{"class":359,"line":378},[5979],{"type":45,"tag":357,"props":5980,"children":5981},{},[5982],{"type":51,"value":5983},"var (name, setName) = UseState(\"\");\n",{"type":45,"tag":357,"props":5985,"children":5986},{"class":359,"line":387},[5987],{"type":45,"tag":357,"props":5988,"children":5989},{},[5990],{"type":51,"value":5991},"var increment = UseCallback(() => setCount(count + 1), count);\n",{"type":45,"tag":357,"props":5993,"children":5994},{"class":359,"line":396},[5995],{"type":45,"tag":357,"props":5996,"children":5997},{"emptyLinePlaceholder":400},[5998],{"type":51,"value":403},{"type":45,"tag":357,"props":6000,"children":6001},{"class":359,"line":406},[6002],{"type":45,"tag":357,"props":6003,"children":6004},{},[6005],{"type":51,"value":6006},"\u002F\u002F Wrong: conditional hook\n",{"type":45,"tag":357,"props":6008,"children":6009},{"class":359,"line":415},[6010],{"type":45,"tag":357,"props":6011,"children":6012},{},[6013],{"type":51,"value":6014},"if (showCounter)\n",{"type":45,"tag":357,"props":6016,"children":6017},{"class":359,"line":424},[6018],{"type":45,"tag":357,"props":6019,"children":6020},{},[6021],{"type":51,"value":5397},{"type":45,"tag":357,"props":6023,"children":6024},{"class":359,"line":1884},[6025],{"type":45,"tag":357,"props":6026,"children":6027},{},[6028],{"type":51,"value":6029},"    var (count, setCount) = UseState(0);  \u002F\u002F BREAKS hook ordering\n",{"type":45,"tag":357,"props":6031,"children":6032},{"class":359,"line":1892},[6033],{"type":45,"tag":357,"props":6034,"children":6035},{},[6036],{"type":51,"value":6037},"}\n",{"type":45,"tag":326,"props":6039,"children":6041},{"id":6040},"_7-accessibility",[6042],{"type":51,"value":6043},"7. Accessibility",{"type":45,"tag":458,"props":6045,"children":6047},{"id":6046},"tier-1-modifiers-every-control",[6048],{"type":51,"value":6049},"Tier 1 Modifiers (Every Control)",{"type":45,"tag":54,"props":6051,"children":6052},{},[6053],{"type":51,"value":6054},"These modifiers are zero-cost — apply them by default:",{"type":45,"tag":346,"props":6056,"children":6058},{"className":348,"code":6057,"language":350,"meta":351,"style":351},"\u002F\u002F Icon-only buttons MUST have AutomationName\nButton(Content: Image(iconSource), onClick)\n    .AutomationName(\"Close dialog\")\n\n\u002F\u002F Headings for screen reader navigation\nHeading(\"Settings\").HeadingLevel(AutomationHeadingLevel.Level1)\nSubHeading(\"General\").HeadingLevel(AutomationHeadingLevel.Level2)\n\n\u002F\u002F Tab order and access keys\nButton(\"Save\", onSave).IsTabStop(true).TabIndex(0).AccessKey(\"S\")\n",[6059],{"type":45,"tag":65,"props":6060,"children":6061},{"__ignoreMap":351},[6062,6070,6078,6086,6093,6101,6109,6117,6124,6132],{"type":45,"tag":357,"props":6063,"children":6064},{"class":359,"line":360},[6065],{"type":45,"tag":357,"props":6066,"children":6067},{},[6068],{"type":51,"value":6069},"\u002F\u002F Icon-only buttons MUST have AutomationName\n",{"type":45,"tag":357,"props":6071,"children":6072},{"class":359,"line":369},[6073],{"type":45,"tag":357,"props":6074,"children":6075},{},[6076],{"type":51,"value":6077},"Button(Content: Image(iconSource), onClick)\n",{"type":45,"tag":357,"props":6079,"children":6080},{"class":359,"line":378},[6081],{"type":45,"tag":357,"props":6082,"children":6083},{},[6084],{"type":51,"value":6085},"    .AutomationName(\"Close dialog\")\n",{"type":45,"tag":357,"props":6087,"children":6088},{"class":359,"line":387},[6089],{"type":45,"tag":357,"props":6090,"children":6091},{"emptyLinePlaceholder":400},[6092],{"type":51,"value":403},{"type":45,"tag":357,"props":6094,"children":6095},{"class":359,"line":396},[6096],{"type":45,"tag":357,"props":6097,"children":6098},{},[6099],{"type":51,"value":6100},"\u002F\u002F Headings for screen reader navigation\n",{"type":45,"tag":357,"props":6102,"children":6103},{"class":359,"line":406},[6104],{"type":45,"tag":357,"props":6105,"children":6106},{},[6107],{"type":51,"value":6108},"Heading(\"Settings\").HeadingLevel(AutomationHeadingLevel.Level1)\n",{"type":45,"tag":357,"props":6110,"children":6111},{"class":359,"line":415},[6112],{"type":45,"tag":357,"props":6113,"children":6114},{},[6115],{"type":51,"value":6116},"SubHeading(\"General\").HeadingLevel(AutomationHeadingLevel.Level2)\n",{"type":45,"tag":357,"props":6118,"children":6119},{"class":359,"line":424},[6120],{"type":45,"tag":357,"props":6121,"children":6122},{"emptyLinePlaceholder":400},[6123],{"type":51,"value":403},{"type":45,"tag":357,"props":6125,"children":6126},{"class":359,"line":1884},[6127],{"type":45,"tag":357,"props":6128,"children":6129},{},[6130],{"type":51,"value":6131},"\u002F\u002F Tab order and access keys\n",{"type":45,"tag":357,"props":6133,"children":6134},{"class":359,"line":1892},[6135],{"type":45,"tag":357,"props":6136,"children":6137},{},[6138],{"type":51,"value":6139},"Button(\"Save\", onSave).IsTabStop(true).TabIndex(0).AccessKey(\"S\")\n",{"type":45,"tag":539,"props":6141,"children":6142},{},[6143,6158],{"type":45,"tag":543,"props":6144,"children":6145},{},[6146],{"type":45,"tag":547,"props":6147,"children":6148},{},[6149,6154],{"type":45,"tag":551,"props":6150,"children":6151},{},[6152],{"type":51,"value":6153},"Modifier",{"type":45,"tag":551,"props":6155,"children":6156},{},[6157],{"type":51,"value":565},{"type":45,"tag":567,"props":6159,"children":6160},{},[6161,6178,6195,6212,6229],{"type":45,"tag":547,"props":6162,"children":6163},{},[6164,6173],{"type":45,"tag":574,"props":6165,"children":6166},{},[6167],{"type":45,"tag":65,"props":6168,"children":6170},{"className":6169},[],[6171],{"type":51,"value":6172},".AutomationName(\"text\")",{"type":45,"tag":574,"props":6174,"children":6175},{},[6176],{"type":51,"value":6177},"Screen reader label — required on icon-only controls",{"type":45,"tag":547,"props":6179,"children":6180},{},[6181,6190],{"type":45,"tag":574,"props":6182,"children":6183},{},[6184],{"type":45,"tag":65,"props":6185,"children":6187},{"className":6186},[],[6188],{"type":51,"value":6189},".HeadingLevel(Level1..Level9)",{"type":45,"tag":574,"props":6191,"children":6192},{},[6193],{"type":51,"value":6194},"Heading hierarchy for screen reader navigation",{"type":45,"tag":547,"props":6196,"children":6197},{},[6198,6207],{"type":45,"tag":574,"props":6199,"children":6200},{},[6201],{"type":45,"tag":65,"props":6202,"children":6204},{"className":6203},[],[6205],{"type":51,"value":6206},".IsTabStop(true\u002Ffalse)",{"type":45,"tag":574,"props":6208,"children":6209},{},[6210],{"type":51,"value":6211},"Include\u002Fexclude from tab order",{"type":45,"tag":547,"props":6213,"children":6214},{},[6215,6224],{"type":45,"tag":574,"props":6216,"children":6217},{},[6218],{"type":45,"tag":65,"props":6219,"children":6221},{"className":6220},[],[6222],{"type":51,"value":6223},".TabIndex(n)",{"type":45,"tag":574,"props":6225,"children":6226},{},[6227],{"type":51,"value":6228},"Explicit tab order",{"type":45,"tag":547,"props":6230,"children":6231},{},[6232,6241],{"type":45,"tag":574,"props":6233,"children":6234},{},[6235],{"type":45,"tag":65,"props":6236,"children":6238},{"className":6237},[],[6239],{"type":51,"value":6240},".AccessKey(\"X\")",{"type":45,"tag":574,"props":6242,"children":6243},{},[6244],{"type":51,"value":6245},"Alt+X keyboard shortcut",{"type":45,"tag":458,"props":6247,"children":6249},{"id":6248},"tier-2-modifiers-lazy-allocated",[6250],{"type":51,"value":6251},"Tier 2 Modifiers (Lazy-Allocated)",{"type":45,"tag":54,"props":6253,"children":6254},{},[6255,6257,6263],{"type":51,"value":6256},"These allocate an ",{"type":45,"tag":65,"props":6258,"children":6260},{"className":6259},[],[6261],{"type":51,"value":6262},"AutomationProperties",{"type":51,"value":6264}," peer only when set:",{"type":45,"tag":346,"props":6266,"children":6268},{"className":348,"code":6267,"language":350,"meta":351,"style":351},"TextBox(name, setName)\n    .HelpText(\"Enter your full legal name\")\n    .Required()\n\n\u002F\u002F Hide decorative elements from screen readers\nImage(decorativeSource).AccessibilityHidden()\n\n\u002F\u002F Position-in-set for screen readers on list items\nitems.Select((item, i) =>\n    TextBlock(item.Name)\n        .PositionInSet(i + 1, items.Count)\n        .WithKey(item.Id))\n",[6269],{"type":45,"tag":65,"props":6270,"children":6271},{"__ignoreMap":351},[6272,6280,6288,6296,6303,6311,6319,6326,6334,6342,6350,6358],{"type":45,"tag":357,"props":6273,"children":6274},{"class":359,"line":360},[6275],{"type":45,"tag":357,"props":6276,"children":6277},{},[6278],{"type":51,"value":6279},"TextBox(name, setName)\n",{"type":45,"tag":357,"props":6281,"children":6282},{"class":359,"line":369},[6283],{"type":45,"tag":357,"props":6284,"children":6285},{},[6286],{"type":51,"value":6287},"    .HelpText(\"Enter your full legal name\")\n",{"type":45,"tag":357,"props":6289,"children":6290},{"class":359,"line":378},[6291],{"type":45,"tag":357,"props":6292,"children":6293},{},[6294],{"type":51,"value":6295},"    .Required()\n",{"type":45,"tag":357,"props":6297,"children":6298},{"class":359,"line":387},[6299],{"type":45,"tag":357,"props":6300,"children":6301},{"emptyLinePlaceholder":400},[6302],{"type":51,"value":403},{"type":45,"tag":357,"props":6304,"children":6305},{"class":359,"line":396},[6306],{"type":45,"tag":357,"props":6307,"children":6308},{},[6309],{"type":51,"value":6310},"\u002F\u002F Hide decorative elements from screen readers\n",{"type":45,"tag":357,"props":6312,"children":6313},{"class":359,"line":406},[6314],{"type":45,"tag":357,"props":6315,"children":6316},{},[6317],{"type":51,"value":6318},"Image(decorativeSource).AccessibilityHidden()\n",{"type":45,"tag":357,"props":6320,"children":6321},{"class":359,"line":415},[6322],{"type":45,"tag":357,"props":6323,"children":6324},{"emptyLinePlaceholder":400},[6325],{"type":51,"value":403},{"type":45,"tag":357,"props":6327,"children":6328},{"class":359,"line":424},[6329],{"type":45,"tag":357,"props":6330,"children":6331},{},[6332],{"type":51,"value":6333},"\u002F\u002F Position-in-set for screen readers on list items\n",{"type":45,"tag":357,"props":6335,"children":6336},{"class":359,"line":1884},[6337],{"type":45,"tag":357,"props":6338,"children":6339},{},[6340],{"type":51,"value":6341},"items.Select((item, i) =>\n",{"type":45,"tag":357,"props":6343,"children":6344},{"class":359,"line":1892},[6345],{"type":45,"tag":357,"props":6346,"children":6347},{},[6348],{"type":51,"value":6349},"    TextBlock(item.Name)\n",{"type":45,"tag":357,"props":6351,"children":6352},{"class":359,"line":1901},[6353],{"type":45,"tag":357,"props":6354,"children":6355},{},[6356],{"type":51,"value":6357},"        .PositionInSet(i + 1, items.Count)\n",{"type":45,"tag":357,"props":6359,"children":6360},{"class":359,"line":3277},[6361],{"type":45,"tag":357,"props":6362,"children":6363},{},[6364],{"type":51,"value":6365},"        .WithKey(item.Id))\n",{"type":45,"tag":539,"props":6367,"children":6368},{},[6369,6383],{"type":45,"tag":543,"props":6370,"children":6371},{},[6372],{"type":45,"tag":547,"props":6373,"children":6374},{},[6375,6379],{"type":45,"tag":551,"props":6376,"children":6377},{},[6378],{"type":51,"value":6153},{"type":45,"tag":551,"props":6380,"children":6381},{},[6382],{"type":51,"value":565},{"type":45,"tag":567,"props":6384,"children":6385},{},[6386,6403,6420,6437,6454,6471,6488,6505],{"type":45,"tag":547,"props":6387,"children":6388},{},[6389,6398],{"type":45,"tag":574,"props":6390,"children":6391},{},[6392],{"type":45,"tag":65,"props":6393,"children":6395},{"className":6394},[],[6396],{"type":51,"value":6397},".HelpText(\"text\")",{"type":45,"tag":574,"props":6399,"children":6400},{},[6401],{"type":51,"value":6402},"Extended description (read after name)",{"type":45,"tag":547,"props":6404,"children":6405},{},[6406,6415],{"type":45,"tag":574,"props":6407,"children":6408},{},[6409],{"type":45,"tag":65,"props":6410,"children":6412},{"className":6411},[],[6413],{"type":51,"value":6414},".FullDescription(\"text\")",{"type":45,"tag":574,"props":6416,"children":6417},{},[6418],{"type":51,"value":6419},"Detailed description for complex elements",{"type":45,"tag":547,"props":6421,"children":6422},{},[6423,6432],{"type":45,"tag":574,"props":6424,"children":6425},{},[6426],{"type":45,"tag":65,"props":6427,"children":6429},{"className":6428},[],[6430],{"type":51,"value":6431},".AccessibilityHidden()",{"type":45,"tag":574,"props":6433,"children":6434},{},[6435],{"type":51,"value":6436},"Hide decorative elements from AT",{"type":45,"tag":547,"props":6438,"children":6439},{},[6440,6449],{"type":45,"tag":574,"props":6441,"children":6442},{},[6443],{"type":45,"tag":65,"props":6444,"children":6446},{"className":6445},[],[6447],{"type":51,"value":6448},".AccessibilityView(Raw\u002FControl\u002FContent)",{"type":45,"tag":574,"props":6450,"children":6451},{},[6452],{"type":51,"value":6453},"Control AT tree visibility",{"type":45,"tag":547,"props":6455,"children":6456},{},[6457,6466],{"type":45,"tag":574,"props":6458,"children":6459},{},[6460],{"type":45,"tag":65,"props":6461,"children":6463},{"className":6462},[],[6464],{"type":51,"value":6465},".Landmark(LandmarkType)",{"type":45,"tag":574,"props":6467,"children":6468},{},[6469],{"type":51,"value":6470},"Navigation landmark (see below)",{"type":45,"tag":547,"props":6472,"children":6473},{},[6474,6483],{"type":45,"tag":574,"props":6475,"children":6476},{},[6477],{"type":45,"tag":65,"props":6478,"children":6480},{"className":6479},[],[6481],{"type":51,"value":6482},".Required()",{"type":45,"tag":574,"props":6484,"children":6485},{},[6486],{"type":51,"value":6487},"Marks a field as required for AT",{"type":45,"tag":547,"props":6489,"children":6490},{},[6491,6500],{"type":45,"tag":574,"props":6492,"children":6493},{},[6494],{"type":45,"tag":65,"props":6495,"children":6497},{"className":6496},[],[6498],{"type":51,"value":6499},".LiveRegion(Polite\u002FAssertive)",{"type":45,"tag":574,"props":6501,"children":6502},{},[6503],{"type":51,"value":6504},"Announce dynamic content changes",{"type":45,"tag":547,"props":6506,"children":6507},{},[6508,6517],{"type":45,"tag":574,"props":6509,"children":6510},{},[6511],{"type":45,"tag":65,"props":6512,"children":6514},{"className":6513},[],[6515],{"type":51,"value":6516},".PositionInSet(pos, size)",{"type":45,"tag":574,"props":6518,"children":6519},{},[6520],{"type":51,"value":6521},"Position in a virtual list for AT",{"type":45,"tag":458,"props":6523,"children":6525},{"id":6524},"navigation-landmarks",[6526],{"type":51,"value":6527},"Navigation Landmarks",{"type":45,"tag":54,"props":6529,"children":6530},{},[6531],{"type":51,"value":6532},"Landmarks let screen reader users jump between page regions:",{"type":45,"tag":346,"props":6534,"children":6536},{"className":348,"code":6535,"language":350,"meta":351,"style":351},"NavigationView(navItems, content)\n    .Landmark(AutomationLandmarkType.Navigation)\n\nFlexColumn(mainContent)\n    .Landmark(AutomationLandmarkType.Main)\n\nVStack(searchControls)\n    .Landmark(AutomationLandmarkType.Search)\n\nVStack(formFields)\n    .Landmark(AutomationLandmarkType.Form)\n",[6537],{"type":45,"tag":65,"props":6538,"children":6539},{"__ignoreMap":351},[6540,6548,6556,6563,6571,6579,6586,6594,6602,6609,6617],{"type":45,"tag":357,"props":6541,"children":6542},{"class":359,"line":360},[6543],{"type":45,"tag":357,"props":6544,"children":6545},{},[6546],{"type":51,"value":6547},"NavigationView(navItems, content)\n",{"type":45,"tag":357,"props":6549,"children":6550},{"class":359,"line":369},[6551],{"type":45,"tag":357,"props":6552,"children":6553},{},[6554],{"type":51,"value":6555},"    .Landmark(AutomationLandmarkType.Navigation)\n",{"type":45,"tag":357,"props":6557,"children":6558},{"class":359,"line":378},[6559],{"type":45,"tag":357,"props":6560,"children":6561},{"emptyLinePlaceholder":400},[6562],{"type":51,"value":403},{"type":45,"tag":357,"props":6564,"children":6565},{"class":359,"line":387},[6566],{"type":45,"tag":357,"props":6567,"children":6568},{},[6569],{"type":51,"value":6570},"FlexColumn(mainContent)\n",{"type":45,"tag":357,"props":6572,"children":6573},{"class":359,"line":396},[6574],{"type":45,"tag":357,"props":6575,"children":6576},{},[6577],{"type":51,"value":6578},"    .Landmark(AutomationLandmarkType.Main)\n",{"type":45,"tag":357,"props":6580,"children":6581},{"class":359,"line":406},[6582],{"type":45,"tag":357,"props":6583,"children":6584},{"emptyLinePlaceholder":400},[6585],{"type":51,"value":403},{"type":45,"tag":357,"props":6587,"children":6588},{"class":359,"line":415},[6589],{"type":45,"tag":357,"props":6590,"children":6591},{},[6592],{"type":51,"value":6593},"VStack(searchControls)\n",{"type":45,"tag":357,"props":6595,"children":6596},{"class":359,"line":424},[6597],{"type":45,"tag":357,"props":6598,"children":6599},{},[6600],{"type":51,"value":6601},"    .Landmark(AutomationLandmarkType.Search)\n",{"type":45,"tag":357,"props":6603,"children":6604},{"class":359,"line":1884},[6605],{"type":45,"tag":357,"props":6606,"children":6607},{"emptyLinePlaceholder":400},[6608],{"type":51,"value":403},{"type":45,"tag":357,"props":6610,"children":6611},{"class":359,"line":1892},[6612],{"type":45,"tag":357,"props":6613,"children":6614},{},[6615],{"type":51,"value":6616},"VStack(formFields)\n",{"type":45,"tag":357,"props":6618,"children":6619},{"class":359,"line":1901},[6620],{"type":45,"tag":357,"props":6621,"children":6622},{},[6623],{"type":51,"value":6624},"    .Landmark(AutomationLandmarkType.Form)\n",{"type":45,"tag":458,"props":6626,"children":6628},{"id":6627},"heading-hierarchy",[6629],{"type":51,"value":6630},"Heading Hierarchy",{"type":45,"tag":54,"props":6632,"children":6633},{},[6634],{"type":51,"value":6635},"Maintain a logical heading structure for screen reader navigation:",{"type":45,"tag":346,"props":6637,"children":6639},{"className":348,"code":6638,"language":350,"meta":351,"style":351},"\u002F\u002F Good: proper hierarchy\nHeading(\"Settings\").HeadingLevel(AutomationHeadingLevel.Level1)\nSubHeading(\"General\").HeadingLevel(AutomationHeadingLevel.Level2)\nSubHeading(\"Advanced\").HeadingLevel(AutomationHeadingLevel.Level2)\n\n\u002F\u002F Bad: skipping levels\nHeading(\"Settings\").HeadingLevel(AutomationHeadingLevel.Level1)\nCaption(\"Detail\").HeadingLevel(AutomationHeadingLevel.Level4) \u002F\u002F skipped 2 and 3\n",[6640],{"type":45,"tag":65,"props":6641,"children":6642},{"__ignoreMap":351},[6643,6651,6658,6665,6673,6680,6688,6695],{"type":45,"tag":357,"props":6644,"children":6645},{"class":359,"line":360},[6646],{"type":45,"tag":357,"props":6647,"children":6648},{},[6649],{"type":51,"value":6650},"\u002F\u002F Good: proper hierarchy\n",{"type":45,"tag":357,"props":6652,"children":6653},{"class":359,"line":369},[6654],{"type":45,"tag":357,"props":6655,"children":6656},{},[6657],{"type":51,"value":6108},{"type":45,"tag":357,"props":6659,"children":6660},{"class":359,"line":378},[6661],{"type":45,"tag":357,"props":6662,"children":6663},{},[6664],{"type":51,"value":6116},{"type":45,"tag":357,"props":6666,"children":6667},{"class":359,"line":387},[6668],{"type":45,"tag":357,"props":6669,"children":6670},{},[6671],{"type":51,"value":6672},"SubHeading(\"Advanced\").HeadingLevel(AutomationHeadingLevel.Level2)\n",{"type":45,"tag":357,"props":6674,"children":6675},{"class":359,"line":396},[6676],{"type":45,"tag":357,"props":6677,"children":6678},{"emptyLinePlaceholder":400},[6679],{"type":51,"value":403},{"type":45,"tag":357,"props":6681,"children":6682},{"class":359,"line":406},[6683],{"type":45,"tag":357,"props":6684,"children":6685},{},[6686],{"type":51,"value":6687},"\u002F\u002F Bad: skipping levels\n",{"type":45,"tag":357,"props":6689,"children":6690},{"class":359,"line":415},[6691],{"type":45,"tag":357,"props":6692,"children":6693},{},[6694],{"type":51,"value":6108},{"type":45,"tag":357,"props":6696,"children":6697},{"class":359,"line":424},[6698],{"type":45,"tag":357,"props":6699,"children":6700},{},[6701],{"type":51,"value":6702},"Caption(\"Detail\").HeadingLevel(AutomationHeadingLevel.Level4) \u002F\u002F skipped 2 and 3\n",{"type":45,"tag":458,"props":6704,"children":6706},{"id":6705},"focus-trapping-dialogs-modals",[6707],{"type":51,"value":6708},"Focus Trapping (Dialogs \u002F Modals)",{"type":45,"tag":54,"props":6710,"children":6711},{},[6712,6713,6719],{"type":51,"value":336},{"type":45,"tag":65,"props":6714,"children":6716},{"className":6715},[],[6717],{"type":51,"value":6718},"UseFocusTrap",{"type":51,"value":6720}," to keep focus inside a modal:",{"type":45,"tag":346,"props":6722,"children":6724},{"className":348,"code":6723,"language":350,"meta":351,"style":351},"var trap = UseFocusTrap(isActive: true);\n\nreturn Border(\n    VStack(12,\n        Heading(\"Confirm\"),\n        TextBlock(\"Are you sure?\"),\n        HStack(8,\n            Button(\"Cancel\", onCancel),\n            Button(\"Confirm\", onConfirm))\n    ).Padding(24)\n).FocusTrap(trap);  \u002F\u002F Tab cycles within this container\n",[6725],{"type":45,"tag":65,"props":6726,"children":6727},{"__ignoreMap":351},[6728,6736,6743,6751,6758,6766,6774,6782,6790,6798,6806],{"type":45,"tag":357,"props":6729,"children":6730},{"class":359,"line":360},[6731],{"type":45,"tag":357,"props":6732,"children":6733},{},[6734],{"type":51,"value":6735},"var trap = UseFocusTrap(isActive: true);\n",{"type":45,"tag":357,"props":6737,"children":6738},{"class":359,"line":369},[6739],{"type":45,"tag":357,"props":6740,"children":6741},{"emptyLinePlaceholder":400},[6742],{"type":51,"value":403},{"type":45,"tag":357,"props":6744,"children":6745},{"class":359,"line":378},[6746],{"type":45,"tag":357,"props":6747,"children":6748},{},[6749],{"type":51,"value":6750},"return Border(\n",{"type":45,"tag":357,"props":6752,"children":6753},{"class":359,"line":387},[6754],{"type":45,"tag":357,"props":6755,"children":6756},{},[6757],{"type":51,"value":4588},{"type":45,"tag":357,"props":6759,"children":6760},{"class":359,"line":396},[6761],{"type":45,"tag":357,"props":6762,"children":6763},{},[6764],{"type":51,"value":6765},"        Heading(\"Confirm\"),\n",{"type":45,"tag":357,"props":6767,"children":6768},{"class":359,"line":406},[6769],{"type":45,"tag":357,"props":6770,"children":6771},{},[6772],{"type":51,"value":6773},"        TextBlock(\"Are you sure?\"),\n",{"type":45,"tag":357,"props":6775,"children":6776},{"class":359,"line":415},[6777],{"type":45,"tag":357,"props":6778,"children":6779},{},[6780],{"type":51,"value":6781},"        HStack(8,\n",{"type":45,"tag":357,"props":6783,"children":6784},{"class":359,"line":424},[6785],{"type":45,"tag":357,"props":6786,"children":6787},{},[6788],{"type":51,"value":6789},"            Button(\"Cancel\", onCancel),\n",{"type":45,"tag":357,"props":6791,"children":6792},{"class":359,"line":1884},[6793],{"type":45,"tag":357,"props":6794,"children":6795},{},[6796],{"type":51,"value":6797},"            Button(\"Confirm\", onConfirm))\n",{"type":45,"tag":357,"props":6799,"children":6800},{"class":359,"line":1892},[6801],{"type":45,"tag":357,"props":6802,"children":6803},{},[6804],{"type":51,"value":6805},"    ).Padding(24)\n",{"type":45,"tag":357,"props":6807,"children":6808},{"class":359,"line":1901},[6809],{"type":45,"tag":357,"props":6810,"children":6811},{},[6812],{"type":51,"value":6813},").FocusTrap(trap);  \u002F\u002F Tab cycles within this container\n",{"type":45,"tag":54,"props":6815,"children":6816},{},[6817,6823,6825,6831,6833,6839,6841,6847],{"type":45,"tag":65,"props":6818,"children":6820},{"className":6819},[],[6821],{"type":51,"value":6822},"UseFocusTrap(isActive)",{"type":51,"value":6824}," returns a ",{"type":45,"tag":65,"props":6826,"children":6828},{"className":6827},[],[6829],{"type":51,"value":6830},"FocusTrapHandle",{"type":51,"value":6832},". Apply it with\n",{"type":45,"tag":65,"props":6834,"children":6836},{"className":6835},[],[6837],{"type":51,"value":6838},".FocusTrap(handle)",{"type":51,"value":6840},". Focus is trapped while ",{"type":45,"tag":65,"props":6842,"children":6844},{"className":6843},[],[6845],{"type":51,"value":6846},"isActive",{"type":51,"value":6848}," is true.",{"type":45,"tag":458,"props":6850,"children":6852},{"id":6851},"useannounce-live-announcements",[6853],{"type":51,"value":6854},"UseAnnounce (Live Announcements)",{"type":45,"tag":54,"props":6856,"children":6857},{},[6858],{"type":51,"value":6859},"For dynamic status updates that aren't tied to a visible element:",{"type":45,"tag":346,"props":6861,"children":6863},{"className":348,"code":6862,"language":350,"meta":351,"style":351},"var announce = UseAnnounce();\n\n\u002F\u002F The announce region must be in the visual tree\nreturn VStack(12,\n    announce.Region,  \u002F\u002F invisible — just hosts the live region\n    Button(\"Save\", async () =>\n    {\n        await Save();\n        announce.Announce(\"Document saved successfully\");\n    }),\n    Button(\"Error demo\", () =>\n        announce.Announce(\"Upload failed — check your connection\", assertive: true))\n);\n",[6864],{"type":45,"tag":65,"props":6865,"children":6866},{"__ignoreMap":351},[6867,6875,6882,6890,6898,6906,6914,6922,6930,6938,6946,6954,6962],{"type":45,"tag":357,"props":6868,"children":6869},{"class":359,"line":360},[6870],{"type":45,"tag":357,"props":6871,"children":6872},{},[6873],{"type":51,"value":6874},"var announce = UseAnnounce();\n",{"type":45,"tag":357,"props":6876,"children":6877},{"class":359,"line":369},[6878],{"type":45,"tag":357,"props":6879,"children":6880},{"emptyLinePlaceholder":400},[6881],{"type":51,"value":403},{"type":45,"tag":357,"props":6883,"children":6884},{"class":359,"line":378},[6885],{"type":45,"tag":357,"props":6886,"children":6887},{},[6888],{"type":51,"value":6889},"\u002F\u002F The announce region must be in the visual tree\n",{"type":45,"tag":357,"props":6891,"children":6892},{"class":359,"line":387},[6893],{"type":45,"tag":357,"props":6894,"children":6895},{},[6896],{"type":51,"value":6897},"return VStack(12,\n",{"type":45,"tag":357,"props":6899,"children":6900},{"class":359,"line":396},[6901],{"type":45,"tag":357,"props":6902,"children":6903},{},[6904],{"type":51,"value":6905},"    announce.Region,  \u002F\u002F invisible — just hosts the live region\n",{"type":45,"tag":357,"props":6907,"children":6908},{"class":359,"line":406},[6909],{"type":45,"tag":357,"props":6910,"children":6911},{},[6912],{"type":51,"value":6913},"    Button(\"Save\", async () =>\n",{"type":45,"tag":357,"props":6915,"children":6916},{"class":359,"line":415},[6917],{"type":45,"tag":357,"props":6918,"children":6919},{},[6920],{"type":51,"value":6921},"    {\n",{"type":45,"tag":357,"props":6923,"children":6924},{"class":359,"line":424},[6925],{"type":45,"tag":357,"props":6926,"children":6927},{},[6928],{"type":51,"value":6929},"        await Save();\n",{"type":45,"tag":357,"props":6931,"children":6932},{"class":359,"line":1884},[6933],{"type":45,"tag":357,"props":6934,"children":6935},{},[6936],{"type":51,"value":6937},"        announce.Announce(\"Document saved successfully\");\n",{"type":45,"tag":357,"props":6939,"children":6940},{"class":359,"line":1892},[6941],{"type":45,"tag":357,"props":6942,"children":6943},{},[6944],{"type":51,"value":6945},"    }),\n",{"type":45,"tag":357,"props":6947,"children":6948},{"class":359,"line":1901},[6949],{"type":45,"tag":357,"props":6950,"children":6951},{},[6952],{"type":51,"value":6953},"    Button(\"Error demo\", () =>\n",{"type":45,"tag":357,"props":6955,"children":6956},{"class":359,"line":3277},[6957],{"type":45,"tag":357,"props":6958,"children":6959},{},[6960],{"type":51,"value":6961},"        announce.Announce(\"Upload failed — check your connection\", assertive: true))\n",{"type":45,"tag":357,"props":6963,"children":6964},{"class":359,"line":3286},[6965],{"type":45,"tag":357,"props":6966,"children":6967},{},[6968],{"type":51,"value":6969},");\n",{"type":45,"tag":54,"props":6971,"children":6972},{},[6973,6978,6979,6985],{"type":45,"tag":112,"props":6974,"children":6975},{},[6976],{"type":51,"value":6977},"Important:",{"type":51,"value":3476},{"type":45,"tag":65,"props":6980,"children":6982},{"className":6981},[],[6983],{"type":51,"value":6984},"announce.Region",{"type":51,"value":6986}," must be in the visual tree or announcements\nare silently lost. Place it once near the root of your page.",{"type":45,"tag":458,"props":6988,"children":6990},{"id":6989},"semanticpanel-custom-roles",[6991],{"type":51,"value":6992},"SemanticPanel (Custom Roles)",{"type":45,"tag":54,"props":6994,"children":6995},{},[6996],{"type":51,"value":6997},"For controls that don't map to standard WinUI automation peers:",{"type":45,"tag":346,"props":6999,"children":7001},{"className":348,"code":7000,"language":350,"meta":351,"style":351},"Border(child).Semantics(\n    role: \"Slider\",\n    value: $\"{percent}%\",\n    rangeMin: 0,\n    rangeMax: 100,\n    rangeValue: percent);\n",[7002],{"type":45,"tag":65,"props":7003,"children":7004},{"__ignoreMap":351},[7005,7013,7021,7029,7037,7045],{"type":45,"tag":357,"props":7006,"children":7007},{"class":359,"line":360},[7008],{"type":45,"tag":357,"props":7009,"children":7010},{},[7011],{"type":51,"value":7012},"Border(child).Semantics(\n",{"type":45,"tag":357,"props":7014,"children":7015},{"class":359,"line":369},[7016],{"type":45,"tag":357,"props":7017,"children":7018},{},[7019],{"type":51,"value":7020},"    role: \"Slider\",\n",{"type":45,"tag":357,"props":7022,"children":7023},{"class":359,"line":378},[7024],{"type":45,"tag":357,"props":7025,"children":7026},{},[7027],{"type":51,"value":7028},"    value: $\"{percent}%\",\n",{"type":45,"tag":357,"props":7030,"children":7031},{"class":359,"line":387},[7032],{"type":45,"tag":357,"props":7033,"children":7034},{},[7035],{"type":51,"value":7036},"    rangeMin: 0,\n",{"type":45,"tag":357,"props":7038,"children":7039},{"class":359,"line":396},[7040],{"type":45,"tag":357,"props":7041,"children":7042},{},[7043],{"type":51,"value":7044},"    rangeMax: 100,\n",{"type":45,"tag":357,"props":7046,"children":7047},{"class":359,"line":406},[7048],{"type":45,"tag":357,"props":7049,"children":7050},{},[7051],{"type":51,"value":7052},"    rangeValue: percent);\n",{"type":45,"tag":458,"props":7054,"children":7056},{"id":7055},"accessibilityscanner-automated-testing",[7057],{"type":51,"value":7058},"AccessibilityScanner (Automated Testing)",{"type":45,"tag":54,"props":7060,"children":7061},{},[7062],{"type":51,"value":7063},"Run WCAG checks programmatically:",{"type":45,"tag":346,"props":7065,"children":7067},{"className":348,"code":7066,"language":350,"meta":351,"style":351},"var results = AccessibilityScanner.Scan(rootElement);\n\n\u002F\u002F Built-in checks include:\n\u002F\u002F - Missing AutomationName on interactive controls\n\u002F\u002F - Missing HeadingLevel on heading text\n\u002F\u002F - Color contrast ratio \u003C 4.5:1\n\u002F\u002F - Touch target size \u003C 44x44\n\u002F\u002F - Missing landmark regions\n\u002F\u002F - Tab order gaps\n\u002F\u002F - Missing PositionInSet on list items\n\u002F\u002F - AccessKey conflicts\n\nAccessibilityScanner.ExportJson(results, \"a11y-report.json\");\n",[7068],{"type":45,"tag":65,"props":7069,"children":7070},{"__ignoreMap":351},[7071,7079,7086,7094,7102,7110,7118,7126,7134,7142,7150,7158,7165],{"type":45,"tag":357,"props":7072,"children":7073},{"class":359,"line":360},[7074],{"type":45,"tag":357,"props":7075,"children":7076},{},[7077],{"type":51,"value":7078},"var results = AccessibilityScanner.Scan(rootElement);\n",{"type":45,"tag":357,"props":7080,"children":7081},{"class":359,"line":369},[7082],{"type":45,"tag":357,"props":7083,"children":7084},{"emptyLinePlaceholder":400},[7085],{"type":51,"value":403},{"type":45,"tag":357,"props":7087,"children":7088},{"class":359,"line":378},[7089],{"type":45,"tag":357,"props":7090,"children":7091},{},[7092],{"type":51,"value":7093},"\u002F\u002F Built-in checks include:\n",{"type":45,"tag":357,"props":7095,"children":7096},{"class":359,"line":387},[7097],{"type":45,"tag":357,"props":7098,"children":7099},{},[7100],{"type":51,"value":7101},"\u002F\u002F - Missing AutomationName on interactive controls\n",{"type":45,"tag":357,"props":7103,"children":7104},{"class":359,"line":396},[7105],{"type":45,"tag":357,"props":7106,"children":7107},{},[7108],{"type":51,"value":7109},"\u002F\u002F - Missing HeadingLevel on heading text\n",{"type":45,"tag":357,"props":7111,"children":7112},{"class":359,"line":406},[7113],{"type":45,"tag":357,"props":7114,"children":7115},{},[7116],{"type":51,"value":7117},"\u002F\u002F - Color contrast ratio \u003C 4.5:1\n",{"type":45,"tag":357,"props":7119,"children":7120},{"class":359,"line":415},[7121],{"type":45,"tag":357,"props":7122,"children":7123},{},[7124],{"type":51,"value":7125},"\u002F\u002F - Touch target size \u003C 44x44\n",{"type":45,"tag":357,"props":7127,"children":7128},{"class":359,"line":424},[7129],{"type":45,"tag":357,"props":7130,"children":7131},{},[7132],{"type":51,"value":7133},"\u002F\u002F - Missing landmark regions\n",{"type":45,"tag":357,"props":7135,"children":7136},{"class":359,"line":1884},[7137],{"type":45,"tag":357,"props":7138,"children":7139},{},[7140],{"type":51,"value":7141},"\u002F\u002F - Tab order gaps\n",{"type":45,"tag":357,"props":7143,"children":7144},{"class":359,"line":1892},[7145],{"type":45,"tag":357,"props":7146,"children":7147},{},[7148],{"type":51,"value":7149},"\u002F\u002F - Missing PositionInSet on list items\n",{"type":45,"tag":357,"props":7151,"children":7152},{"class":359,"line":1901},[7153],{"type":45,"tag":357,"props":7154,"children":7155},{},[7156],{"type":51,"value":7157},"\u002F\u002F - AccessKey conflicts\n",{"type":45,"tag":357,"props":7159,"children":7160},{"class":359,"line":3277},[7161],{"type":45,"tag":357,"props":7162,"children":7163},{"emptyLinePlaceholder":400},[7164],{"type":51,"value":403},{"type":45,"tag":357,"props":7166,"children":7167},{"class":359,"line":3286},[7168],{"type":45,"tag":357,"props":7169,"children":7170},{},[7171],{"type":51,"value":7172},"AccessibilityScanner.ExportJson(results, \"a11y-report.json\");\n",{"type":45,"tag":458,"props":7174,"children":7176},{"id":7175},"roslyn-analyzers",[7177],{"type":51,"value":7178},"Roslyn Analyzers",{"type":45,"tag":54,"props":7180,"children":7181},{},[7182],{"type":51,"value":7183},"Three compile-time analyzers catch accessibility issues:",{"type":45,"tag":539,"props":7185,"children":7186},{},[7187,7203],{"type":45,"tag":543,"props":7188,"children":7189},{},[7190],{"type":45,"tag":547,"props":7191,"children":7192},{},[7193,7198],{"type":45,"tag":551,"props":7194,"children":7195},{},[7196],{"type":51,"value":7197},"Analyzer",{"type":45,"tag":551,"props":7199,"children":7200},{},[7201],{"type":51,"value":7202},"Checks",{"type":45,"tag":567,"props":7204,"children":7205},{},[7206,7229,7257],{"type":45,"tag":547,"props":7207,"children":7208},{},[7209,7218],{"type":45,"tag":574,"props":7210,"children":7211},{},[7212],{"type":45,"tag":65,"props":7213,"children":7215},{"className":7214},[],[7216],{"type":51,"value":7217},"REACTOR_A11Y_001",{"type":45,"tag":574,"props":7219,"children":7220},{},[7221,7223],{"type":51,"value":7222},"Icon-only Button\u002FToggleButton missing ",{"type":45,"tag":65,"props":7224,"children":7226},{"className":7225},[],[7227],{"type":51,"value":7228},".AutomationName()",{"type":45,"tag":547,"props":7230,"children":7231},{},[7232,7241],{"type":45,"tag":574,"props":7233,"children":7234},{},[7235],{"type":45,"tag":65,"props":7236,"children":7238},{"className":7237},[],[7239],{"type":51,"value":7240},"REACTOR_A11Y_002",{"type":45,"tag":574,"props":7242,"children":7243},{},[7244,7246,7251,7252],{"type":51,"value":7245},"Image missing ",{"type":45,"tag":65,"props":7247,"children":7249},{"className":7248},[],[7250],{"type":51,"value":7228},{"type":51,"value":126},{"type":45,"tag":65,"props":7253,"children":7255},{"className":7254},[],[7256],{"type":51,"value":6431},{"type":45,"tag":547,"props":7258,"children":7259},{},[7260,7269],{"type":45,"tag":574,"props":7261,"children":7262},{},[7263],{"type":45,"tag":65,"props":7264,"children":7266},{"className":7265},[],[7267],{"type":51,"value":7268},"REACTOR_A11Y_003",{"type":45,"tag":574,"props":7270,"children":7271},{},[7272],{"type":51,"value":7273},"Form field (TextBox\u002FNumberBox\u002FPasswordBox) missing label",{"type":45,"tag":54,"props":7275,"children":7276},{},[7277],{"type":51,"value":7278},"These run as warnings by default. Promote to errors in CI:",{"type":45,"tag":346,"props":7280,"children":7284},{"className":7281,"code":7282,"language":7283,"meta":351,"style":351},"language-xml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CWarningsAsErrors>REACTOR_A11Y_001;REACTOR_A11Y_002;REACTOR_A11Y_003\u003C\u002FWarningsAsErrors>\n","xml",[7285],{"type":45,"tag":65,"props":7286,"children":7287},{"__ignoreMap":351},[7288],{"type":45,"tag":357,"props":7289,"children":7290},{"class":359,"line":360},[7291],{"type":45,"tag":357,"props":7292,"children":7293},{},[7294],{"type":51,"value":7282},{"type":45,"tag":458,"props":7296,"children":7298},{"id":7297},"accessible-forms-pattern",[7299],{"type":51,"value":7300},"Accessible Forms Pattern",{"type":45,"tag":54,"props":7302,"children":7303},{},[7304],{"type":51,"value":7305},"Combine validation with accessibility:",{"type":45,"tag":346,"props":7307,"children":7309},{"className":348,"code":7308,"language":350,"meta":351,"style":351},"var validation = UseValidationContext();\nvar (email, setEmail) = UseState(\"\");\n\nreturn FormField(\n    TextBox(email, setEmail)\n        .Validate(\"email\", email, Validate.Required(), Validate.Email())\n        .Required()\n        .HelpText(\"We'll send a confirmation to this address\"),\n    label: \"Email\",\n    required: true,\n    showWhen: ShowWhen.WhenTouched)\n.Landmark(AutomationLandmarkType.Form);\n",[7310],{"type":45,"tag":65,"props":7311,"children":7312},{"__ignoreMap":351},[7313,7321,7329,7336,7344,7352,7360,7368,7376,7384,7392,7400],{"type":45,"tag":357,"props":7314,"children":7315},{"class":359,"line":360},[7316],{"type":45,"tag":357,"props":7317,"children":7318},{},[7319],{"type":51,"value":7320},"var validation = UseValidationContext();\n",{"type":45,"tag":357,"props":7322,"children":7323},{"class":359,"line":369},[7324],{"type":45,"tag":357,"props":7325,"children":7326},{},[7327],{"type":51,"value":7328},"var (email, setEmail) = UseState(\"\");\n",{"type":45,"tag":357,"props":7330,"children":7331},{"class":359,"line":378},[7332],{"type":45,"tag":357,"props":7333,"children":7334},{"emptyLinePlaceholder":400},[7335],{"type":51,"value":403},{"type":45,"tag":357,"props":7337,"children":7338},{"class":359,"line":387},[7339],{"type":45,"tag":357,"props":7340,"children":7341},{},[7342],{"type":51,"value":7343},"return FormField(\n",{"type":45,"tag":357,"props":7345,"children":7346},{"class":359,"line":396},[7347],{"type":45,"tag":357,"props":7348,"children":7349},{},[7350],{"type":51,"value":7351},"    TextBox(email, setEmail)\n",{"type":45,"tag":357,"props":7353,"children":7354},{"class":359,"line":406},[7355],{"type":45,"tag":357,"props":7356,"children":7357},{},[7358],{"type":51,"value":7359},"        .Validate(\"email\", email, Validate.Required(), Validate.Email())\n",{"type":45,"tag":357,"props":7361,"children":7362},{"class":359,"line":415},[7363],{"type":45,"tag":357,"props":7364,"children":7365},{},[7366],{"type":51,"value":7367},"        .Required()\n",{"type":45,"tag":357,"props":7369,"children":7370},{"class":359,"line":424},[7371],{"type":45,"tag":357,"props":7372,"children":7373},{},[7374],{"type":51,"value":7375},"        .HelpText(\"We'll send a confirmation to this address\"),\n",{"type":45,"tag":357,"props":7377,"children":7378},{"class":359,"line":1884},[7379],{"type":45,"tag":357,"props":7380,"children":7381},{},[7382],{"type":51,"value":7383},"    label: \"Email\",\n",{"type":45,"tag":357,"props":7385,"children":7386},{"class":359,"line":1892},[7387],{"type":45,"tag":357,"props":7388,"children":7389},{},[7390],{"type":51,"value":7391},"    required: true,\n",{"type":45,"tag":357,"props":7393,"children":7394},{"class":359,"line":1901},[7395],{"type":45,"tag":357,"props":7396,"children":7397},{},[7398],{"type":51,"value":7399},"    showWhen: ShowWhen.WhenTouched)\n",{"type":45,"tag":357,"props":7401,"children":7402},{"class":359,"line":3277},[7403],{"type":45,"tag":357,"props":7404,"children":7405},{},[7406],{"type":51,"value":7407},".Landmark(AutomationLandmarkType.Form);\n",{"type":45,"tag":54,"props":7409,"children":7410},{},[7411,7417,7419,7425,7427,7433],{"type":45,"tag":65,"props":7412,"children":7414},{"className":7413},[],[7415],{"type":51,"value":7416},"FormField",{"type":51,"value":7418}," automatically wires ",{"type":45,"tag":65,"props":7420,"children":7422},{"className":7421},[],[7423],{"type":51,"value":7424},"AutomationName",{"type":51,"value":7426}," from the label and\nassociates error messages with the input via ",{"type":45,"tag":65,"props":7428,"children":7430},{"className":7429},[],[7431],{"type":51,"value":7432},"DescribedBy",{"type":51,"value":170},{"type":45,"tag":458,"props":7435,"children":7437},{"id":7436},"accessibility-rules",[7438],{"type":51,"value":7439},"Accessibility Rules",{"type":45,"tag":220,"props":7441,"children":7442},{},[7443,7454,7459,7464,7469,7488,7493,7498,7503,7508,7519,7530],{"type":45,"tag":188,"props":7444,"children":7445},{},[7446,7447,7452],{"type":51,"value":2410},{"type":45,"tag":65,"props":7448,"children":7450},{"className":7449},[],[7451],{"type":51,"value":7424},{"type":51,"value":7453}," on every control without visible text.",{"type":45,"tag":188,"props":7455,"children":7456},{},[7457],{"type":51,"value":7458},"Maintain heading hierarchy — don't skip levels.",{"type":45,"tag":188,"props":7460,"children":7461},{},[7462],{"type":51,"value":7463},"Use landmarks on major page regions.",{"type":45,"tag":188,"props":7465,"children":7466},{},[7467],{"type":51,"value":7468},"Focus-trap all dialogs and modals.",{"type":45,"tag":188,"props":7470,"children":7471},{},[7472,7474,7479,7481,7487],{"type":51,"value":7473},"Place ",{"type":45,"tag":65,"props":7475,"children":7477},{"className":7476},[],[7478],{"type":51,"value":6984},{"type":51,"value":7480}," in the tree before calling ",{"type":45,"tag":65,"props":7482,"children":7484},{"className":7483},[],[7485],{"type":51,"value":7486},".Announce()",{"type":51,"value":170},{"type":45,"tag":188,"props":7489,"children":7490},{},[7491],{"type":51,"value":7492},"Test with Narrator + keyboard-only navigation.",{"type":45,"tag":188,"props":7494,"children":7495},{},[7496],{"type":51,"value":7497},"Test Light, Dark, and High Contrast themes (especially NightSky).",{"type":45,"tag":188,"props":7499,"children":7500},{},[7501],{"type":51,"value":7502},"Test at 100%, 150%, 200%, 250% display scaling.",{"type":45,"tag":188,"props":7504,"children":7505},{},[7506],{"type":51,"value":7507},"Test with maximum text scaling (Settings > Accessibility > Text size).",{"type":45,"tag":188,"props":7509,"children":7510},{},[7511,7513,7518],{"type":51,"value":7512},"Hit-test targets for light-dismiss must be visible: ",{"type":45,"tag":65,"props":7514,"children":7516},{"className":7515},[],[7517],{"type":51,"value":454},{"type":51,"value":170},{"type":45,"tag":188,"props":7520,"children":7521},{},[7522,7523,7528],{"type":51,"value":336},{"type":45,"tag":65,"props":7524,"children":7526},{"className":7525},[],[7527],{"type":51,"value":1265},{"type":51,"value":7529}," for dividers — custom brushes with opacity break in HC.",{"type":45,"tag":188,"props":7531,"children":7532},{},[7533],{"type":51,"value":7534},"Enable Roslyn analyzers in CI to catch common issues at build time.",{"type":45,"tag":54,"props":7536,"children":7537},{},[7538,7539,7545],{"type":51,"value":1783},{"type":45,"tag":159,"props":7540,"children":7542},{"href":7541},"design-docs\u002Fcode-review-checklist.md",[7543],{"type":51,"value":7544},"code-review-checklist.md",{"type":51,"value":7546}," for the full accessibility checklist.",{"type":45,"tag":326,"props":7548,"children":7550},{"id":7549},"_8-acrylic-surface-pairings",[7551],{"type":51,"value":7552},"8. Acrylic Surface Pairings",{"type":45,"tag":54,"props":7554,"children":7555},{},[7556],{"type":51,"value":7557},"Acrylic backgrounds have specific border pairings. Using the wrong combination produces incorrect visuals.",{"type":45,"tag":539,"props":7559,"children":7560},{},[7561,7580],{"type":45,"tag":543,"props":7562,"children":7563},{},[7564],{"type":45,"tag":547,"props":7565,"children":7566},{},[7567,7572,7576],{"type":45,"tag":551,"props":7568,"children":7569},{},[7570],{"type":51,"value":7571},"Surface Type",{"type":45,"tag":551,"props":7573,"children":7574},{},[7575],{"type":51,"value":2178},{"type":45,"tag":551,"props":7577,"children":7578},{},[7579],{"type":51,"value":3875},{"type":45,"tag":567,"props":7581,"children":7582},{},[7583,7609],{"type":45,"tag":547,"props":7584,"children":7585},{},[7586,7591,7600],{"type":45,"tag":574,"props":7587,"children":7588},{},[7589],{"type":51,"value":7590},"Flyouts, tooltips",{"type":45,"tag":574,"props":7592,"children":7593},{},[7594],{"type":45,"tag":65,"props":7595,"children":7597},{"className":7596},[],[7598],{"type":51,"value":7599},"AcrylicBackgroundFillColorDefaultBrush",{"type":45,"tag":574,"props":7601,"children":7602},{},[7603],{"type":45,"tag":65,"props":7604,"children":7606},{"className":7605},[],[7607],{"type":51,"value":7608},"SurfaceStrokeColorFlyoutBrush",{"type":45,"tag":547,"props":7610,"children":7611},{},[7612,7617,7626],{"type":45,"tag":574,"props":7613,"children":7614},{},[7615],{"type":51,"value":7616},"UI surfaces",{"type":45,"tag":574,"props":7618,"children":7619},{},[7620],{"type":45,"tag":65,"props":7621,"children":7623},{"className":7622},[],[7624],{"type":51,"value":7625},"AcrylicBackgroundFillColorBaseBrush",{"type":45,"tag":574,"props":7627,"children":7628},{},[7629],{"type":45,"tag":65,"props":7630,"children":7632},{"className":7631},[],[7633],{"type":51,"value":1239},{"type":45,"tag":346,"props":7635,"children":7637},{"className":348,"code":7636,"language":350,"meta":351,"style":351},"\u002F\u002F Correct: flyout acrylic pairing\nBorder(content)\n    .Background(Theme.Ref(\"AcrylicBackgroundFillColorDefaultBrush\"))\n    .WithBorder(Theme.Ref(\"SurfaceStrokeColorFlyoutBrush\"), 1)\n    .CornerRadius(8)\n    .Translation(0, 0, 32)\n    .Set(b =>\n    {\n        b.BackgroundSizing = BackgroundSizing.InnerBorderEdge;\n        b.Shadow = new ThemeShadow();\n    })\n",[7638],{"type":45,"tag":65,"props":7639,"children":7640},{"__ignoreMap":351},[7641,7649,7657,7665,7673,7681,7689,7697,7704,7712,7720],{"type":45,"tag":357,"props":7642,"children":7643},{"class":359,"line":360},[7644],{"type":45,"tag":357,"props":7645,"children":7646},{},[7647],{"type":51,"value":7648},"\u002F\u002F Correct: flyout acrylic pairing\n",{"type":45,"tag":357,"props":7650,"children":7651},{"class":359,"line":369},[7652],{"type":45,"tag":357,"props":7653,"children":7654},{},[7655],{"type":51,"value":7656},"Border(content)\n",{"type":45,"tag":357,"props":7658,"children":7659},{"class":359,"line":378},[7660],{"type":45,"tag":357,"props":7661,"children":7662},{},[7663],{"type":51,"value":7664},"    .Background(Theme.Ref(\"AcrylicBackgroundFillColorDefaultBrush\"))\n",{"type":45,"tag":357,"props":7666,"children":7667},{"class":359,"line":387},[7668],{"type":45,"tag":357,"props":7669,"children":7670},{},[7671],{"type":51,"value":7672},"    .WithBorder(Theme.Ref(\"SurfaceStrokeColorFlyoutBrush\"), 1)\n",{"type":45,"tag":357,"props":7674,"children":7675},{"class":359,"line":396},[7676],{"type":45,"tag":357,"props":7677,"children":7678},{},[7679],{"type":51,"value":7680},"    .CornerRadius(8)\n",{"type":45,"tag":357,"props":7682,"children":7683},{"class":359,"line":406},[7684],{"type":45,"tag":357,"props":7685,"children":7686},{},[7687],{"type":51,"value":7688},"    .Translation(0, 0, 32)\n",{"type":45,"tag":357,"props":7690,"children":7691},{"class":359,"line":415},[7692],{"type":45,"tag":357,"props":7693,"children":7694},{},[7695],{"type":51,"value":7696},"    .Set(b =>\n",{"type":45,"tag":357,"props":7698,"children":7699},{"class":359,"line":424},[7700],{"type":45,"tag":357,"props":7701,"children":7702},{},[7703],{"type":51,"value":6921},{"type":45,"tag":357,"props":7705,"children":7706},{"class":359,"line":1884},[7707],{"type":45,"tag":357,"props":7708,"children":7709},{},[7710],{"type":51,"value":7711},"        b.BackgroundSizing = BackgroundSizing.InnerBorderEdge;\n",{"type":45,"tag":357,"props":7713,"children":7714},{"class":359,"line":1892},[7715],{"type":45,"tag":357,"props":7716,"children":7717},{},[7718],{"type":51,"value":7719},"        b.Shadow = new ThemeShadow();\n",{"type":45,"tag":357,"props":7721,"children":7722},{"class":359,"line":1901},[7723],{"type":45,"tag":357,"props":7724,"children":7725},{},[7726],{"type":51,"value":7727},"    })\n",{"type":45,"tag":54,"props":7729,"children":7730},{},[7731,7740],{"type":45,"tag":112,"props":7732,"children":7733},{},[7734],{"type":45,"tag":65,"props":7735,"children":7737},{"className":7736},[],[7738],{"type":51,"value":7739},"BackgroundSizing = InnerBorderEdge",{"type":51,"value":7741}," is required on any bordered acrylic surface. It prevents the background from bleeding through the border edge. Always set it on acrylic containers with a border.",{"type":45,"tag":220,"props":7743,"children":7744},{},[7745,7757],{"type":45,"tag":188,"props":7746,"children":7747},{},[7748,7750,7756],{"type":51,"value":7749},"Overlays on acrylic use ",{"type":45,"tag":65,"props":7751,"children":7753},{"className":7752},[],[7754],{"type":51,"value":7755},"LayerOnAcrylicFillColorDefaultBrush",{"type":51,"value":170},{"type":45,"tag":188,"props":7758,"children":7759},{},[7760],{"type":51,"value":7761},"Keep one acrylic layer per visual surface to avoid stacked-material artifacts.",{"type":45,"tag":458,"props":7763,"children":7765},{"id":7764},"window-backdrops-mica-acrylic",[7766],{"type":51,"value":7767},"Window Backdrops (Mica \u002F Acrylic)",{"type":45,"tag":54,"props":7769,"children":7770},{},[7771,7773,7779,7781,7787,7789,7795,7797,7803],{"type":51,"value":7772},"For ",{"type":45,"tag":7774,"props":7775,"children":7776},"em",{},[7777],{"type":51,"value":7778},"window-level",{"type":51,"value":7780}," material (Mica\u002FAcrylic showing through the title bar and\nchrome), use the ",{"type":45,"tag":65,"props":7782,"children":7784},{"className":7783},[],[7785],{"type":51,"value":7786},".Backdrop(BackdropKind)",{"type":51,"value":7788}," modifier on the root element —\nnot a brush. The modifier walks up to the host's ",{"type":45,"tag":65,"props":7790,"children":7792},{"className":7791},[],[7793],{"type":51,"value":7794},"Window",{"type":51,"value":7796}," and assigns the\nright ",{"type":45,"tag":65,"props":7798,"children":7800},{"className":7799},[],[7801],{"type":51,"value":7802},"SystemBackdrop",{"type":51,"value":4535},{"type":45,"tag":346,"props":7805,"children":7807},{"className":348,"code":7806,"language":350,"meta":351,"style":351},"return Grid([GridSize.Star()], [GridSize.Auto, GridSize.Star()],\n    titleBar.Grid(row: 0),\n    content.Grid(row: 1)\n).Backdrop(BackdropKind.Mica);\n",[7808],{"type":45,"tag":65,"props":7809,"children":7810},{"__ignoreMap":351},[7811,7819,7827,7835],{"type":45,"tag":357,"props":7812,"children":7813},{"class":359,"line":360},[7814],{"type":45,"tag":357,"props":7815,"children":7816},{},[7817],{"type":51,"value":7818},"return Grid([GridSize.Star()], [GridSize.Auto, GridSize.Star()],\n",{"type":45,"tag":357,"props":7820,"children":7821},{"class":359,"line":369},[7822],{"type":45,"tag":357,"props":7823,"children":7824},{},[7825],{"type":51,"value":7826},"    titleBar.Grid(row: 0),\n",{"type":45,"tag":357,"props":7828,"children":7829},{"class":359,"line":378},[7830],{"type":45,"tag":357,"props":7831,"children":7832},{},[7833],{"type":51,"value":7834},"    content.Grid(row: 1)\n",{"type":45,"tag":357,"props":7836,"children":7837},{"class":359,"line":387},[7838],{"type":45,"tag":357,"props":7839,"children":7840},{},[7841],{"type":51,"value":7842},").Backdrop(BackdropKind.Mica);\n",{"type":45,"tag":54,"props":7844,"children":7845},{},[7846,7848,7854,7855,7861,7862,7868,7869,7875,7877,7883,7885,7891,7893,7898],{"type":51,"value":7847},"Available kinds: ",{"type":45,"tag":65,"props":7849,"children":7851},{"className":7850},[],[7852],{"type":51,"value":7853},"BackdropKind.None",{"type":51,"value":80},{"type":45,"tag":65,"props":7856,"children":7858},{"className":7857},[],[7859],{"type":51,"value":7860},"Mica",{"type":51,"value":80},{"type":45,"tag":65,"props":7863,"children":7865},{"className":7864},[],[7866],{"type":51,"value":7867},"MicaAlt",{"type":51,"value":80},{"type":45,"tag":65,"props":7870,"children":7872},{"className":7871},[],[7873],{"type":51,"value":7874},"DesktopAcrylic",{"type":51,"value":7876},",\n",{"type":45,"tag":65,"props":7878,"children":7880},{"className":7879},[],[7881],{"type":51,"value":7882},"AcrylicThin",{"type":51,"value":7884},". On ",{"type":45,"tag":65,"props":7886,"children":7888},{"className":7887},[],[7889],{"type":51,"value":7890},"ReactorHostControl",{"type":51,"value":7892}," (windowless host) the modifier\nno-ops cleanly. For Mica to show through, the root element must not\npaint an opaque background — drop ",{"type":45,"tag":65,"props":7894,"children":7896},{"className":7895},[],[7897],{"type":51,"value":1042},{"type":51,"value":7899}," from the root\nwhen applying a backdrop. Spec 033 §6.",{"type":45,"tag":458,"props":7901,"children":7903},{"id":7902},"flyout-surface-pattern",[7904],{"type":51,"value":7905},"Flyout Surface Pattern",{"type":45,"tag":54,"props":7907,"children":7908},{},[7909],{"type":51,"value":7910},"Flyout\u002Fpopup surfaces should follow a standard elevation pattern:",{"type":45,"tag":346,"props":7912,"children":7914},{"className":348,"code":7913,"language":350,"meta":351,"style":351},"Border(\n    ScrollView(VStack(8, flyoutContent))\n)\n.Background(Theme.Ref(\"FlyoutPresenterBackground\"))\n.WithBorder(Theme.Ref(\"FlyoutBorderThemeBrush\"), 1)\n.CornerRadius(8)\n.Translation(0, 0, 32)\n.Set(b =>\n{\n    b.BackgroundSizing = BackgroundSizing.InnerBorderEdge;\n    b.Shadow = new ThemeShadow();\n})\n",[7915],{"type":45,"tag":65,"props":7916,"children":7917},{"__ignoreMap":351},[7918,7925,7933,7940,7948,7956,7964,7972,7980,7987,7995,8003],{"type":45,"tag":357,"props":7919,"children":7920},{"class":359,"line":360},[7921],{"type":45,"tag":357,"props":7922,"children":7923},{},[7924],{"type":51,"value":4220},{"type":45,"tag":357,"props":7926,"children":7927},{"class":359,"line":369},[7928],{"type":45,"tag":357,"props":7929,"children":7930},{},[7931],{"type":51,"value":7932},"    ScrollView(VStack(8, flyoutContent))\n",{"type":45,"tag":357,"props":7934,"children":7935},{"class":359,"line":378},[7936],{"type":45,"tag":357,"props":7937,"children":7938},{},[7939],{"type":51,"value":4636},{"type":45,"tag":357,"props":7941,"children":7942},{"class":359,"line":387},[7943],{"type":45,"tag":357,"props":7944,"children":7945},{},[7946],{"type":51,"value":7947},".Background(Theme.Ref(\"FlyoutPresenterBackground\"))\n",{"type":45,"tag":357,"props":7949,"children":7950},{"class":359,"line":396},[7951],{"type":45,"tag":357,"props":7952,"children":7953},{},[7954],{"type":51,"value":7955},".WithBorder(Theme.Ref(\"FlyoutBorderThemeBrush\"), 1)\n",{"type":45,"tag":357,"props":7957,"children":7958},{"class":359,"line":406},[7959],{"type":45,"tag":357,"props":7960,"children":7961},{},[7962],{"type":51,"value":7963},".CornerRadius(8)\n",{"type":45,"tag":357,"props":7965,"children":7966},{"class":359,"line":415},[7967],{"type":45,"tag":357,"props":7968,"children":7969},{},[7970],{"type":51,"value":7971},".Translation(0, 0, 32)\n",{"type":45,"tag":357,"props":7973,"children":7974},{"class":359,"line":424},[7975],{"type":45,"tag":357,"props":7976,"children":7977},{},[7978],{"type":51,"value":7979},".Set(b =>\n",{"type":45,"tag":357,"props":7981,"children":7982},{"class":359,"line":1884},[7983],{"type":45,"tag":357,"props":7984,"children":7985},{},[7986],{"type":51,"value":5397},{"type":45,"tag":357,"props":7988,"children":7989},{"class":359,"line":1892},[7990],{"type":45,"tag":357,"props":7991,"children":7992},{},[7993],{"type":51,"value":7994},"    b.BackgroundSizing = BackgroundSizing.InnerBorderEdge;\n",{"type":45,"tag":357,"props":7996,"children":7997},{"class":359,"line":1901},[7998],{"type":45,"tag":357,"props":7999,"children":8000},{},[8001],{"type":51,"value":8002},"    b.Shadow = new ThemeShadow();\n",{"type":45,"tag":357,"props":8004,"children":8005},{"class":359,"line":3277},[8006],{"type":45,"tag":357,"props":8007,"children":8008},{},[8009],{"type":51,"value":8010},"})\n",{"type":45,"tag":54,"props":8012,"children":8013},{},[8014,8015,8021,8022,8028],{"type":51,"value":336},{"type":45,"tag":65,"props":8016,"children":8018},{"className":8017},[],[8019],{"type":51,"value":8020},"FlyoutPresenterBackground",{"type":51,"value":2462},{"type":45,"tag":65,"props":8023,"children":8025},{"className":8024},[],[8026],{"type":51,"value":8027},"FlyoutBorderThemeBrush",{"type":51,"value":8029}," for standard popup surfaces. Use the explicit acrylic resource pairings (above) only when building custom surfaces that don't use WinUI's flyout presenter resources.",{"type":45,"tag":326,"props":8031,"children":8033},{"id":8032},"_9-animation-and-motion",[8034],{"type":51,"value":8035},"9. Animation and Motion",{"type":45,"tag":458,"props":8037,"children":8039},{"id":8038},"implicit-transitions-recommended",[8040],{"type":51,"value":8041},"Implicit Transitions (Recommended)",{"type":45,"tag":54,"props":8043,"children":8044},{},[8045],{"type":51,"value":8046},"Animate property changes smoothly — the framework handles interpolation:",{"type":45,"tag":346,"props":8048,"children":8050},{"className":348,"code":8049,"language":350,"meta":351,"style":351},"\u002F\u002F Opacity fade\nBorder(child)\n    .OpacityTransition()\n    .Opacity(isVisible ? 1.0 : 0.0)\n\n\u002F\u002F Background color crossfade\nVStack(children)\n    .BackgroundTransition()\n    .Background(isActive ? Theme.Accent : Theme.ControlFill)\n\n\u002F\u002F Scale bounce\nBorder(child)\n    .ScaleTransition()\n    .Scale(isPressed ? 0.95f : 1.0f)\n",[8051],{"type":45,"tag":65,"props":8052,"children":8053},{"__ignoreMap":351},[8054,8062,8070,8078,8086,8093,8101,8109,8117,8125,8132,8140,8147,8155],{"type":45,"tag":357,"props":8055,"children":8056},{"class":359,"line":360},[8057],{"type":45,"tag":357,"props":8058,"children":8059},{},[8060],{"type":51,"value":8061},"\u002F\u002F Opacity fade\n",{"type":45,"tag":357,"props":8063,"children":8064},{"class":359,"line":369},[8065],{"type":45,"tag":357,"props":8066,"children":8067},{},[8068],{"type":51,"value":8069},"Border(child)\n",{"type":45,"tag":357,"props":8071,"children":8072},{"class":359,"line":378},[8073],{"type":45,"tag":357,"props":8074,"children":8075},{},[8076],{"type":51,"value":8077},"    .OpacityTransition()\n",{"type":45,"tag":357,"props":8079,"children":8080},{"class":359,"line":387},[8081],{"type":45,"tag":357,"props":8082,"children":8083},{},[8084],{"type":51,"value":8085},"    .Opacity(isVisible ? 1.0 : 0.0)\n",{"type":45,"tag":357,"props":8087,"children":8088},{"class":359,"line":396},[8089],{"type":45,"tag":357,"props":8090,"children":8091},{"emptyLinePlaceholder":400},[8092],{"type":51,"value":403},{"type":45,"tag":357,"props":8094,"children":8095},{"class":359,"line":406},[8096],{"type":45,"tag":357,"props":8097,"children":8098},{},[8099],{"type":51,"value":8100},"\u002F\u002F Background color crossfade\n",{"type":45,"tag":357,"props":8102,"children":8103},{"class":359,"line":415},[8104],{"type":45,"tag":357,"props":8105,"children":8106},{},[8107],{"type":51,"value":8108},"VStack(children)\n",{"type":45,"tag":357,"props":8110,"children":8111},{"class":359,"line":424},[8112],{"type":45,"tag":357,"props":8113,"children":8114},{},[8115],{"type":51,"value":8116},"    .BackgroundTransition()\n",{"type":45,"tag":357,"props":8118,"children":8119},{"class":359,"line":1884},[8120],{"type":45,"tag":357,"props":8121,"children":8122},{},[8123],{"type":51,"value":8124},"    .Background(isActive ? Theme.Accent : Theme.ControlFill)\n",{"type":45,"tag":357,"props":8126,"children":8127},{"class":359,"line":1892},[8128],{"type":45,"tag":357,"props":8129,"children":8130},{"emptyLinePlaceholder":400},[8131],{"type":51,"value":403},{"type":45,"tag":357,"props":8133,"children":8134},{"class":359,"line":1901},[8135],{"type":45,"tag":357,"props":8136,"children":8137},{},[8138],{"type":51,"value":8139},"\u002F\u002F Scale bounce\n",{"type":45,"tag":357,"props":8141,"children":8142},{"class":359,"line":3277},[8143],{"type":45,"tag":357,"props":8144,"children":8145},{},[8146],{"type":51,"value":8069},{"type":45,"tag":357,"props":8148,"children":8149},{"class":359,"line":3286},[8150],{"type":45,"tag":357,"props":8151,"children":8152},{},[8153],{"type":51,"value":8154},"    .ScaleTransition()\n",{"type":45,"tag":357,"props":8156,"children":8157},{"class":359,"line":3295},[8158],{"type":45,"tag":357,"props":8159,"children":8160},{},[8161],{"type":51,"value":8162},"    .Scale(isPressed ? 0.95f : 1.0f)\n",{"type":45,"tag":458,"props":8164,"children":8166},{"id":8165},"layout-animations",[8167],{"type":51,"value":8168},"Layout Animations",{"type":45,"tag":54,"props":8170,"children":8171},{},[8172],{"type":51,"value":8173},"Animate children being added, removed, or repositioned:",{"type":45,"tag":346,"props":8175,"children":8177},{"className":348,"code":8176,"language":350,"meta":351,"style":351},"VStack(items.Select(item =>\n    TextBlock(item.Name).WithKey(item.Id)\n).ToArray()).LayoutAnimation()\n",[8178],{"type":45,"tag":65,"props":8179,"children":8180},{"__ignoreMap":351},[8181,8189,8197],{"type":45,"tag":357,"props":8182,"children":8183},{"class":359,"line":360},[8184],{"type":45,"tag":357,"props":8185,"children":8186},{},[8187],{"type":51,"value":8188},"VStack(items.Select(item =>\n",{"type":45,"tag":357,"props":8190,"children":8191},{"class":359,"line":369},[8192],{"type":45,"tag":357,"props":8193,"children":8194},{},[8195],{"type":51,"value":8196},"    TextBlock(item.Name).WithKey(item.Id)\n",{"type":45,"tag":357,"props":8198,"children":8199},{"class":359,"line":378},[8200],{"type":45,"tag":357,"props":8201,"children":8202},{},[8203],{"type":51,"value":8204},").ToArray()).LayoutAnimation()\n",{"type":45,"tag":458,"props":8206,"children":8208},{"id":8207},"element-enterexit-transitions",[8209],{"type":51,"value":8210},"Element Enter\u002FExit Transitions",{"type":45,"tag":346,"props":8212,"children":8214},{"className":348,"code":8213,"language":350,"meta":351,"style":351},"\u002F\u002F Fade + slide from bottom on mount\nBorder(child).WithTransitions(\n    Transition.Fade,\n    Transition.Slide(Edge.Bottom))\n",[8215],{"type":45,"tag":65,"props":8216,"children":8217},{"__ignoreMap":351},[8218,8226,8234,8242],{"type":45,"tag":357,"props":8219,"children":8220},{"class":359,"line":360},[8221],{"type":45,"tag":357,"props":8222,"children":8223},{},[8224],{"type":51,"value":8225},"\u002F\u002F Fade + slide from bottom on mount\n",{"type":45,"tag":357,"props":8227,"children":8228},{"class":359,"line":369},[8229],{"type":45,"tag":357,"props":8230,"children":8231},{},[8232],{"type":51,"value":8233},"Border(child).WithTransitions(\n",{"type":45,"tag":357,"props":8235,"children":8236},{"class":359,"line":378},[8237],{"type":45,"tag":357,"props":8238,"children":8239},{},[8240],{"type":51,"value":8241},"    Transition.Fade,\n",{"type":45,"tag":357,"props":8243,"children":8244},{"class":359,"line":387},[8245],{"type":45,"tag":357,"props":8246,"children":8247},{},[8248],{"type":51,"value":8249},"    Transition.Slide(Edge.Bottom))\n",{"type":45,"tag":54,"props":8251,"children":8252},{},[8253],{"type":45,"tag":112,"props":8254,"children":8255},{},[8256],{"type":51,"value":2326},{"type":45,"tag":220,"props":8258,"children":8259},{},[8260,8271,8276,8296],{"type":45,"tag":188,"props":8261,"children":8262},{},[8263,8264,8269],{"type":51,"value":336},{"type":45,"tag":65,"props":8265,"children":8267},{"className":8266},[],[8268],{"type":51,"value":5595},{"type":51,"value":8270}," instead of composition drop shadows.",{"type":45,"tag":188,"props":8272,"children":8273},{},[8274],{"type":51,"value":8275},"Avoid gradient animations in High Contrast.",{"type":45,"tag":188,"props":8277,"children":8278},{},[8279,8280,8286,8288,8294],{"type":51,"value":336},{"type":45,"tag":65,"props":8281,"children":8283},{"className":8282},[],[8284],{"type":51,"value":8285},"BrushTransition",{"type":51,"value":8287}," (via ",{"type":45,"tag":65,"props":8289,"children":8291},{"className":8290},[],[8292],{"type":51,"value":8293},"BackgroundTransition()",{"type":51,"value":8295},") for smooth color changes.",{"type":45,"tag":188,"props":8297,"children":8298},{},[8299,8301,8306,8308,8313],{"type":51,"value":8300},"Always set ",{"type":45,"tag":65,"props":8302,"children":8304},{"className":8303},[],[8305],{"type":51,"value":295},{"type":51,"value":8307}," when using ",{"type":45,"tag":65,"props":8309,"children":8311},{"className":8310},[],[8312],{"type":51,"value":5595},{"type":51,"value":170},{"type":45,"tag":326,"props":8315,"children":8317},{"id":8316},"_10-reconciliation-and-performance",[8318],{"type":51,"value":8319},"10. Reconciliation and Performance",{"type":45,"tag":458,"props":8321,"children":8323},{"id":8322},"keys-for-lists",[8324],{"type":51,"value":8325},"Keys for Lists",{"type":45,"tag":54,"props":8327,"children":8328},{},[8329,8330,8336],{"type":51,"value":8300},{"type":45,"tag":65,"props":8331,"children":8333},{"className":8332},[],[8334],{"type":51,"value":8335},".WithKey()",{"type":51,"value":8337}," on items in dynamic lists. Without keys, the reconciler matches by position, causing unnecessary re-mounts on insert\u002Freorder:",{"type":45,"tag":346,"props":8339,"children":8341},{"className":348,"code":8340,"language":350,"meta":351,"style":351},"\u002F\u002F Correct: keyed children — stable identity\nVStack(items.Select(item =>\n    HStack(8,\n        Image(item.Avatar).Size(32, 32),\n        TextBlock(item.Name)\n    ).WithKey(item.Id)\n).ToArray())\n\n\u002F\u002F Wrong: unkeyed — insert at index 0 re-renders everything\nVStack(items.Select(item =>\n    HStack(8,\n        Image(item.Avatar).Size(32, 32),\n        TextBlock(item.Name)\n    ).ToArray())\n",[8342],{"type":45,"tag":65,"props":8343,"children":8344},{"__ignoreMap":351},[8345,8353,8360,8368,8376,8384,8392,8400,8407,8415,8422,8429,8436,8443],{"type":45,"tag":357,"props":8346,"children":8347},{"class":359,"line":360},[8348],{"type":45,"tag":357,"props":8349,"children":8350},{},[8351],{"type":51,"value":8352},"\u002F\u002F Correct: keyed children — stable identity\n",{"type":45,"tag":357,"props":8354,"children":8355},{"class":359,"line":369},[8356],{"type":45,"tag":357,"props":8357,"children":8358},{},[8359],{"type":51,"value":8188},{"type":45,"tag":357,"props":8361,"children":8362},{"class":359,"line":378},[8363],{"type":45,"tag":357,"props":8364,"children":8365},{},[8366],{"type":51,"value":8367},"    HStack(8,\n",{"type":45,"tag":357,"props":8369,"children":8370},{"class":359,"line":387},[8371],{"type":45,"tag":357,"props":8372,"children":8373},{},[8374],{"type":51,"value":8375},"        Image(item.Avatar).Size(32, 32),\n",{"type":45,"tag":357,"props":8377,"children":8378},{"class":359,"line":396},[8379],{"type":45,"tag":357,"props":8380,"children":8381},{},[8382],{"type":51,"value":8383},"        TextBlock(item.Name)\n",{"type":45,"tag":357,"props":8385,"children":8386},{"class":359,"line":406},[8387],{"type":45,"tag":357,"props":8388,"children":8389},{},[8390],{"type":51,"value":8391},"    ).WithKey(item.Id)\n",{"type":45,"tag":357,"props":8393,"children":8394},{"class":359,"line":415},[8395],{"type":45,"tag":357,"props":8396,"children":8397},{},[8398],{"type":51,"value":8399},").ToArray())\n",{"type":45,"tag":357,"props":8401,"children":8402},{"class":359,"line":424},[8403],{"type":45,"tag":357,"props":8404,"children":8405},{"emptyLinePlaceholder":400},[8406],{"type":51,"value":403},{"type":45,"tag":357,"props":8408,"children":8409},{"class":359,"line":1884},[8410],{"type":45,"tag":357,"props":8411,"children":8412},{},[8413],{"type":51,"value":8414},"\u002F\u002F Wrong: unkeyed — insert at index 0 re-renders everything\n",{"type":45,"tag":357,"props":8416,"children":8417},{"class":359,"line":1892},[8418],{"type":45,"tag":357,"props":8419,"children":8420},{},[8421],{"type":51,"value":8188},{"type":45,"tag":357,"props":8423,"children":8424},{"class":359,"line":1901},[8425],{"type":45,"tag":357,"props":8426,"children":8427},{},[8428],{"type":51,"value":8367},{"type":45,"tag":357,"props":8430,"children":8431},{"class":359,"line":3277},[8432],{"type":45,"tag":357,"props":8433,"children":8434},{},[8435],{"type":51,"value":8375},{"type":45,"tag":357,"props":8437,"children":8438},{"class":359,"line":3286},[8439],{"type":45,"tag":357,"props":8440,"children":8441},{},[8442],{"type":51,"value":8383},{"type":45,"tag":357,"props":8444,"children":8445},{"class":359,"line":3295},[8446],{"type":45,"tag":357,"props":8447,"children":8448},{},[8449],{"type":51,"value":8450},"    ).ToArray())\n",{"type":45,"tag":458,"props":8452,"children":8454},{"id":8453},"memoize-expensive-computations",[8455],{"type":51,"value":8456},"Memoize Expensive Computations",{"type":45,"tag":346,"props":8458,"children":8460},{"className":348,"code":8459,"language":350,"meta":351,"style":351},"var sorted = UseMemo(() =>\n    items.OrderBy(x => x.Name).ToList(),\n    items);\n\nvar handler = UseCallback(() => save(count), count);\n",[8461],{"type":45,"tag":65,"props":8462,"children":8463},{"__ignoreMap":351},[8464,8472,8480,8488,8495],{"type":45,"tag":357,"props":8465,"children":8466},{"class":359,"line":360},[8467],{"type":45,"tag":357,"props":8468,"children":8469},{},[8470],{"type":51,"value":8471},"var sorted = UseMemo(() =>\n",{"type":45,"tag":357,"props":8473,"children":8474},{"class":359,"line":369},[8475],{"type":45,"tag":357,"props":8476,"children":8477},{},[8478],{"type":51,"value":8479},"    items.OrderBy(x => x.Name).ToList(),\n",{"type":45,"tag":357,"props":8481,"children":8482},{"class":359,"line":378},[8483],{"type":45,"tag":357,"props":8484,"children":8485},{},[8486],{"type":51,"value":8487},"    items);\n",{"type":45,"tag":357,"props":8489,"children":8490},{"class":359,"line":387},[8491],{"type":45,"tag":357,"props":8492,"children":8493},{"emptyLinePlaceholder":400},[8494],{"type":51,"value":403},{"type":45,"tag":357,"props":8496,"children":8497},{"class":359,"line":396},[8498],{"type":45,"tag":357,"props":8499,"children":8500},{},[8501],{"type":51,"value":8502},"var handler = UseCallback(() => save(count), count);\n",{"type":45,"tag":458,"props":8504,"children":8506},{"id":8505},"avoid-deep-nesting",[8507],{"type":51,"value":8508},"Avoid Deep Nesting",{"type":45,"tag":54,"props":8510,"children":8511},{},[8512,8514,8519,8521,8526,8527,8532],{"type":51,"value":8513},"Flatten visual tree depth where possible. Use ",{"type":45,"tag":65,"props":8515,"children":8517},{"className":8516},[],[8518],{"type":51,"value":3875},{"type":51,"value":8520}," instead of single-child ",{"type":45,"tag":65,"props":8522,"children":8524},{"className":8523},[],[8525],{"type":51,"value":3920},{"type":51,"value":267},{"type":45,"tag":65,"props":8528,"children":8530},{"className":8529},[],[8531],{"type":51,"value":3905},{"type":51,"value":170},{"type":45,"tag":346,"props":8534,"children":8536},{"className":348,"code":8535,"language":350,"meta":351,"style":351},"\u002F\u002F Correct: flat\nBorder(TextBlock(\"Hello\")).Background(Theme.CardBackground).Padding(16)\n\n\u002F\u002F Even better: the Card(child) factory bakes in CardBackground +\n\u002F\u002F CardStroke 1px hairline + 8px corner radius + 16px padding.\nCard(TextBlock(\"Hello\"))\n\n\u002F\u002F Wrong: unnecessary nesting\nVStack(\n    Grid([GridSize.Star()], [GridSize.Star()],\n        TextBlock(\"Hello\")\n    ).Background(Theme.CardBackground)\n).Padding(16)\n",[8537],{"type":45,"tag":65,"props":8538,"children":8539},{"__ignoreMap":351},[8540,8548,8556,8563,8571,8579,8587,8594,8602,8609,8617,8625,8633],{"type":45,"tag":357,"props":8541,"children":8542},{"class":359,"line":360},[8543],{"type":45,"tag":357,"props":8544,"children":8545},{},[8546],{"type":51,"value":8547},"\u002F\u002F Correct: flat\n",{"type":45,"tag":357,"props":8549,"children":8550},{"class":359,"line":369},[8551],{"type":45,"tag":357,"props":8552,"children":8553},{},[8554],{"type":51,"value":8555},"Border(TextBlock(\"Hello\")).Background(Theme.CardBackground).Padding(16)\n",{"type":45,"tag":357,"props":8557,"children":8558},{"class":359,"line":378},[8559],{"type":45,"tag":357,"props":8560,"children":8561},{"emptyLinePlaceholder":400},[8562],{"type":51,"value":403},{"type":45,"tag":357,"props":8564,"children":8565},{"class":359,"line":387},[8566],{"type":45,"tag":357,"props":8567,"children":8568},{},[8569],{"type":51,"value":8570},"\u002F\u002F Even better: the Card(child) factory bakes in CardBackground +\n",{"type":45,"tag":357,"props":8572,"children":8573},{"class":359,"line":396},[8574],{"type":45,"tag":357,"props":8575,"children":8576},{},[8577],{"type":51,"value":8578},"\u002F\u002F CardStroke 1px hairline + 8px corner radius + 16px padding.\n",{"type":45,"tag":357,"props":8580,"children":8581},{"class":359,"line":406},[8582],{"type":45,"tag":357,"props":8583,"children":8584},{},[8585],{"type":51,"value":8586},"Card(TextBlock(\"Hello\"))\n",{"type":45,"tag":357,"props":8588,"children":8589},{"class":359,"line":415},[8590],{"type":45,"tag":357,"props":8591,"children":8592},{"emptyLinePlaceholder":400},[8593],{"type":51,"value":403},{"type":45,"tag":357,"props":8595,"children":8596},{"class":359,"line":424},[8597],{"type":45,"tag":357,"props":8598,"children":8599},{},[8600],{"type":51,"value":8601},"\u002F\u002F Wrong: unnecessary nesting\n",{"type":45,"tag":357,"props":8603,"children":8604},{"class":359,"line":1884},[8605],{"type":45,"tag":357,"props":8606,"children":8607},{},[8608],{"type":51,"value":5317},{"type":45,"tag":357,"props":8610,"children":8611},{"class":359,"line":1892},[8612],{"type":45,"tag":357,"props":8613,"children":8614},{},[8615],{"type":51,"value":8616},"    Grid([GridSize.Star()], [GridSize.Star()],\n",{"type":45,"tag":357,"props":8618,"children":8619},{"class":359,"line":1901},[8620],{"type":45,"tag":357,"props":8621,"children":8622},{},[8623],{"type":51,"value":8624},"        TextBlock(\"Hello\")\n",{"type":45,"tag":357,"props":8626,"children":8627},{"class":359,"line":3277},[8628],{"type":45,"tag":357,"props":8629,"children":8630},{},[8631],{"type":51,"value":8632},"    ).Background(Theme.CardBackground)\n",{"type":45,"tag":357,"props":8634,"children":8635},{"class":359,"line":3286},[8636],{"type":45,"tag":357,"props":8637,"children":8638},{},[8639],{"type":51,"value":8640},").Padding(16)\n",{"type":45,"tag":458,"props":8642,"children":8644},{"id":8643},"use-set-sparingly",[8645,8646,8652],{"type":51,"value":336},{"type":45,"tag":65,"props":8647,"children":8649},{"className":8648},[],[8650],{"type":51,"value":8651},".Set()",{"type":51,"value":8653}," Sparingly",{"type":45,"tag":54,"props":8655,"children":8656},{},[8657,8662],{"type":45,"tag":65,"props":8658,"children":8660},{"className":8659},[],[8661],{"type":51,"value":8651},{"type":51,"value":8663}," is an escape hatch to raw WinUI. It's valid but bypasses the virtual element model — use it for properties Reactor doesn't expose, not as a general pattern.",{"type":45,"tag":346,"props":8665,"children":8667},{"className":348,"code":8666,"language":350,"meta":351,"style":351},"\u002F\u002F Good: property not exposed by Reactor\nTextBlock(\"Clock\").Set(tb => tb.Typography.NumeralAlignment = FontNumeralAlignment.Tabular)\n\n\u002F\u002F Bad: property that Reactor exposes as a modifier\nTextBlock(\"Hello\").Set(tb => tb.Margin = new Thickness(16))  \u002F\u002F Use .Margin(16) instead\n",[8668],{"type":45,"tag":65,"props":8669,"children":8670},{"__ignoreMap":351},[8671,8679,8687,8694,8702],{"type":45,"tag":357,"props":8672,"children":8673},{"class":359,"line":360},[8674],{"type":45,"tag":357,"props":8675,"children":8676},{},[8677],{"type":51,"value":8678},"\u002F\u002F Good: property not exposed by Reactor\n",{"type":45,"tag":357,"props":8680,"children":8681},{"class":359,"line":369},[8682],{"type":45,"tag":357,"props":8683,"children":8684},{},[8685],{"type":51,"value":8686},"TextBlock(\"Clock\").Set(tb => tb.Typography.NumeralAlignment = FontNumeralAlignment.Tabular)\n",{"type":45,"tag":357,"props":8688,"children":8689},{"class":359,"line":378},[8690],{"type":45,"tag":357,"props":8691,"children":8692},{"emptyLinePlaceholder":400},[8693],{"type":51,"value":403},{"type":45,"tag":357,"props":8695,"children":8696},{"class":359,"line":387},[8697],{"type":45,"tag":357,"props":8698,"children":8699},{},[8700],{"type":51,"value":8701},"\u002F\u002F Bad: property that Reactor exposes as a modifier\n",{"type":45,"tag":357,"props":8703,"children":8704},{"class":359,"line":396},[8705],{"type":45,"tag":357,"props":8706,"children":8707},{},[8708],{"type":51,"value":8709},"TextBlock(\"Hello\").Set(tb => tb.Margin = new Thickness(16))  \u002F\u002F Use .Margin(16) instead\n",{"type":45,"tag":326,"props":8711,"children":8713},{"id":8712},"_11-formatting-conventions",[8714],{"type":51,"value":8715},"11. Formatting Conventions",{"type":45,"tag":220,"props":8717,"children":8718},{},[8719,8731,8736,8741],{"type":45,"tag":188,"props":8720,"children":8721},{},[8722,8723,8729],{"type":51,"value":336},{"type":45,"tag":65,"props":8724,"children":8726},{"className":8725},[],[8727],{"type":51,"value":8728},"using static Microsoft.UI.Reactor.Factories;",{"type":51,"value":8730}," to access the DSL without prefix.",{"type":45,"tag":188,"props":8732,"children":8733},{},[8734],{"type":51,"value":8735},"One element per line when nesting gets deep.",{"type":45,"tag":188,"props":8737,"children":8738},{},[8739],{"type":51,"value":8740},"Group modifiers logically: layout first, then appearance, then behavior.",{"type":45,"tag":188,"props":8742,"children":8743},{},[8744,8746,8751],{"type":51,"value":8745},"Use trailing ",{"type":45,"tag":65,"props":8747,"children":8749},{"className":8748},[],[8750],{"type":51,"value":8335},{"type":51,"value":8752}," as the last modifier.",{"type":45,"tag":346,"props":8754,"children":8756},{"className":348,"code":8755,"language":350,"meta":351,"style":351},"\u002F\u002F Good: readable modifier order\nBorder(\n    VStack(16,\n        Heading(\"Title\"),\n        TextBlock(\"Description\").Foreground(Theme.SecondaryText),\n        HStack(8,\n            Button(\"Cancel\", onCancel),\n            Button(\"Save\", onSave).Resources(r => r\n                .Set(\"ButtonBackground\", Theme.Accent)\n                .Set(\"ButtonForeground\", Theme.Ref(\"TextOnAccentFillColorPrimaryBrush\")))\n        )\n    )\n)\n.Padding(24)\n.CornerRadius(8)\n.Background(Theme.CardBackground)\n.WithBorder(Theme.CardStroke, 1)\n.AutomationName(\"Settings card\")\n",[8757],{"type":45,"tag":65,"props":8758,"children":8759},{"__ignoreMap":351},[8760,8768,8775,8783,8791,8799,8806,8813,8821,8829,8837,8845,8853,8860,8868,8875,8883,8891],{"type":45,"tag":357,"props":8761,"children":8762},{"class":359,"line":360},[8763],{"type":45,"tag":357,"props":8764,"children":8765},{},[8766],{"type":51,"value":8767},"\u002F\u002F Good: readable modifier order\n",{"type":45,"tag":357,"props":8769,"children":8770},{"class":359,"line":369},[8771],{"type":45,"tag":357,"props":8772,"children":8773},{},[8774],{"type":51,"value":4220},{"type":45,"tag":357,"props":8776,"children":8777},{"class":359,"line":378},[8778],{"type":45,"tag":357,"props":8779,"children":8780},{},[8781],{"type":51,"value":8782},"    VStack(16,\n",{"type":45,"tag":357,"props":8784,"children":8785},{"class":359,"line":387},[8786],{"type":45,"tag":357,"props":8787,"children":8788},{},[8789],{"type":51,"value":8790},"        Heading(\"Title\"),\n",{"type":45,"tag":357,"props":8792,"children":8793},{"class":359,"line":396},[8794],{"type":45,"tag":357,"props":8795,"children":8796},{},[8797],{"type":51,"value":8798},"        TextBlock(\"Description\").Foreground(Theme.SecondaryText),\n",{"type":45,"tag":357,"props":8800,"children":8801},{"class":359,"line":406},[8802],{"type":45,"tag":357,"props":8803,"children":8804},{},[8805],{"type":51,"value":6781},{"type":45,"tag":357,"props":8807,"children":8808},{"class":359,"line":415},[8809],{"type":45,"tag":357,"props":8810,"children":8811},{},[8812],{"type":51,"value":6789},{"type":45,"tag":357,"props":8814,"children":8815},{"class":359,"line":424},[8816],{"type":45,"tag":357,"props":8817,"children":8818},{},[8819],{"type":51,"value":8820},"            Button(\"Save\", onSave).Resources(r => r\n",{"type":45,"tag":357,"props":8822,"children":8823},{"class":359,"line":1884},[8824],{"type":45,"tag":357,"props":8825,"children":8826},{},[8827],{"type":51,"value":8828},"                .Set(\"ButtonBackground\", Theme.Accent)\n",{"type":45,"tag":357,"props":8830,"children":8831},{"class":359,"line":1892},[8832],{"type":45,"tag":357,"props":8833,"children":8834},{},[8835],{"type":51,"value":8836},"                .Set(\"ButtonForeground\", Theme.Ref(\"TextOnAccentFillColorPrimaryBrush\")))\n",{"type":45,"tag":357,"props":8838,"children":8839},{"class":359,"line":1901},[8840],{"type":45,"tag":357,"props":8841,"children":8842},{},[8843],{"type":51,"value":8844},"        )\n",{"type":45,"tag":357,"props":8846,"children":8847},{"class":359,"line":3277},[8848],{"type":45,"tag":357,"props":8849,"children":8850},{},[8851],{"type":51,"value":8852},"    )\n",{"type":45,"tag":357,"props":8854,"children":8855},{"class":359,"line":3286},[8856],{"type":45,"tag":357,"props":8857,"children":8858},{},[8859],{"type":51,"value":4636},{"type":45,"tag":357,"props":8861,"children":8862},{"class":359,"line":3295},[8863],{"type":45,"tag":357,"props":8864,"children":8865},{},[8866],{"type":51,"value":8867},".Padding(24)\n",{"type":45,"tag":357,"props":8869,"children":8870},{"class":359,"line":3304},[8871],{"type":45,"tag":357,"props":8872,"children":8873},{},[8874],{"type":51,"value":7963},{"type":45,"tag":357,"props":8876,"children":8877},{"class":359,"line":3312},[8878],{"type":45,"tag":357,"props":8879,"children":8880},{},[8881],{"type":51,"value":8882},".Background(Theme.CardBackground)\n",{"type":45,"tag":357,"props":8884,"children":8885},{"class":359,"line":3321},[8886],{"type":45,"tag":357,"props":8887,"children":8888},{},[8889],{"type":51,"value":8890},".WithBorder(Theme.CardStroke, 1)\n",{"type":45,"tag":357,"props":8892,"children":8893},{"class":359,"line":4505},[8894],{"type":45,"tag":357,"props":8895,"children":8896},{},[8897],{"type":51,"value":8898},".AutomationName(\"Settings card\")\n",{"type":45,"tag":326,"props":8900,"children":8902},{"id":8901},"_12-text-scaling-and-localization",[8903],{"type":51,"value":8904},"12. Text Scaling and Localization",{"type":45,"tag":54,"props":8906,"children":8907},{},[8908],{"type":51,"value":8909},"Every UI change must survive text scaling and long strings:",{"type":45,"tag":220,"props":8911,"children":8912},{},[8913,8931,8936,8948],{"type":45,"tag":188,"props":8914,"children":8915},{},[8916,8917,8922,8924,8929],{"type":51,"value":336},{"type":45,"tag":65,"props":8918,"children":8920},{"className":8919},[],[8921],{"type":51,"value":4742},{"type":51,"value":8923}," instead of ",{"type":45,"tag":65,"props":8925,"children":8927},{"className":8926},[],[8928],{"type":51,"value":4757},{"type":51,"value":8930}," on containers with text.",{"type":45,"tag":188,"props":8932,"children":8933},{},[8934],{"type":51,"value":8935},"Avoid fixed widths on buttons and text containers.",{"type":45,"tag":188,"props":8937,"children":8938},{},[8939,8940,8946],{"type":51,"value":336},{"type":45,"tag":65,"props":8941,"children":8943},{"className":8942},[],[8944],{"type":51,"value":8945},"VAlign(VerticalAlignment.Center)",{"type":51,"value":8947}," instead of margin-based centering.",{"type":45,"tag":188,"props":8949,"children":8950},{},[8951,8953],{"type":51,"value":8952},"Use tabular numerals for changing numbers (clock, battery, progress):\n",{"type":45,"tag":346,"props":8954,"children":8956},{"className":348,"code":8955,"language":350,"meta":351,"style":351},"TextBlock($\"{percent}%\").Set(tb =>\n    tb.Typography.NumeralAlignment = FontNumeralAlignment.Tabular)\n",[8957],{"type":45,"tag":65,"props":8958,"children":8959},{"__ignoreMap":351},[8960,8968],{"type":45,"tag":357,"props":8961,"children":8962},{"class":359,"line":360},[8963],{"type":45,"tag":357,"props":8964,"children":8965},{},[8966],{"type":51,"value":8967},"TextBlock($\"{percent}%\").Set(tb =>\n",{"type":45,"tag":357,"props":8969,"children":8970},{"class":359,"line":369},[8971],{"type":45,"tag":357,"props":8972,"children":8973},{},[8974],{"type":51,"value":8975},"    tb.Typography.NumeralAlignment = FontNumeralAlignment.Tabular)\n",{"type":45,"tag":326,"props":8977,"children":8979},{"id":8978},"_13-avoid-setting-winui-defaults",[8980],{"type":51,"value":8981},"13. Avoid Setting WinUI Defaults",{"type":45,"tag":54,"props":8983,"children":8984},{},[8985],{"type":51,"value":8986},"Do not explicitly set properties to their WinUI default values — it blocks future WinUI updates.",{"type":45,"tag":346,"props":8988,"children":8990},{"className":348,"code":8989,"language":350,"meta":351,"style":351},"\u002F\u002F Wrong: these are all WinUI defaults\nButton(\"Action\")\n    .Padding(12)       \u002F\u002F Default button padding\n    .CornerRadius(4)   \u002F\u002F Default ControlCornerRadius\n    .Height(32)        \u002F\u002F Default button height\n\n\u002F\u002F Correct: only set what differs\nButton(\"Action\").MinHeight(40)\n",[8991],{"type":45,"tag":65,"props":8992,"children":8993},{"__ignoreMap":351},[8994,9002,9010,9018,9026,9034,9041,9049],{"type":45,"tag":357,"props":8995,"children":8996},{"class":359,"line":360},[8997],{"type":45,"tag":357,"props":8998,"children":8999},{},[9000],{"type":51,"value":9001},"\u002F\u002F Wrong: these are all WinUI defaults\n",{"type":45,"tag":357,"props":9003,"children":9004},{"class":359,"line":369},[9005],{"type":45,"tag":357,"props":9006,"children":9007},{},[9008],{"type":51,"value":9009},"Button(\"Action\")\n",{"type":45,"tag":357,"props":9011,"children":9012},{"class":359,"line":378},[9013],{"type":45,"tag":357,"props":9014,"children":9015},{},[9016],{"type":51,"value":9017},"    .Padding(12)       \u002F\u002F Default button padding\n",{"type":45,"tag":357,"props":9019,"children":9020},{"class":359,"line":387},[9021],{"type":45,"tag":357,"props":9022,"children":9023},{},[9024],{"type":51,"value":9025},"    .CornerRadius(4)   \u002F\u002F Default ControlCornerRadius\n",{"type":45,"tag":357,"props":9027,"children":9028},{"class":359,"line":396},[9029],{"type":45,"tag":357,"props":9030,"children":9031},{},[9032],{"type":51,"value":9033},"    .Height(32)        \u002F\u002F Default button height\n",{"type":45,"tag":357,"props":9035,"children":9036},{"class":359,"line":406},[9037],{"type":45,"tag":357,"props":9038,"children":9039},{"emptyLinePlaceholder":400},[9040],{"type":51,"value":403},{"type":45,"tag":357,"props":9042,"children":9043},{"class":359,"line":415},[9044],{"type":45,"tag":357,"props":9045,"children":9046},{},[9047],{"type":51,"value":9048},"\u002F\u002F Correct: only set what differs\n",{"type":45,"tag":357,"props":9050,"children":9051},{"class":359,"line":424},[9052],{"type":45,"tag":357,"props":9053,"children":9054},{},[9055],{"type":51,"value":4689},{"type":45,"tag":54,"props":9057,"children":9058},{},[9059],{"type":51,"value":9060},"Defaults you should not set:",{"type":45,"tag":220,"props":9062,"children":9063},{},[9064,9083,9101,9112],{"type":45,"tag":188,"props":9065,"children":9066},{},[9067,9069,9074,9076,9081],{"type":51,"value":9068},"Default ",{"type":45,"tag":65,"props":9070,"children":9072},{"className":9071},[],[9073],{"type":51,"value":2183},{"type":51,"value":9075}," on Text (it's ",{"type":45,"tag":65,"props":9077,"children":9079},{"className":9078},[],[9080],{"type":51,"value":591},{"type":51,"value":9082}," already)",{"type":45,"tag":188,"props":9084,"children":9085},{},[9086,9092,9093,9099],{"type":45,"tag":65,"props":9087,"children":9089},{"className":9088},[],[9090],{"type":51,"value":9091},"Padding(0)",{"type":51,"value":126},{"type":45,"tag":65,"props":9094,"children":9096},{"className":9095},[],[9097],{"type":51,"value":9098},"Margin(0)",{"type":51,"value":9100}," (zero is the default)",{"type":45,"tag":188,"props":9102,"children":9103},{},[9104,9110],{"type":45,"tag":65,"props":9105,"children":9107},{"className":9106},[],[9108],{"type":51,"value":9109},"Opacity(1.0)",{"type":51,"value":9111}," (1.0 is the default)",{"type":45,"tag":188,"props":9113,"children":9114},{},[9115,9121,9123,9128],{"type":45,"tag":65,"props":9116,"children":9118},{"className":9117},[],[9119],{"type":51,"value":9120},"CornerRadius(4)",{"type":51,"value":9122}," on buttons (WinUI default is ",{"type":45,"tag":65,"props":9124,"children":9126},{"className":9125},[],[9127],{"type":51,"value":4340},{"type":51,"value":9129},")",{"type":45,"tag":9131,"props":9132,"children":9133},"hr",{},[],{"type":45,"tag":177,"props":9135,"children":9137},{"id":9136},"code-review-checklist",[9138],{"type":51,"value":9139},"Code Review Checklist",{"type":45,"tag":54,"props":9141,"children":9142},{},[9143],{"type":51,"value":9144},"When reviewing Reactor UI code, verify:",{"type":45,"tag":54,"props":9146,"children":9147},{},[9148],{"type":45,"tag":112,"props":9149,"children":9150},{},[9151],{"type":51,"value":9152},"Theming:",{"type":45,"tag":220,"props":9154,"children":9157},{"className":9155},[9156],"contains-task-list",[9158,9177,9193,9202,9211,9226,9242],{"type":45,"tag":188,"props":9159,"children":9162},{"className":9160},[9161],"task-list-item",[9163,9168,9170,9175],{"type":45,"tag":9164,"props":9165,"children":9167},"input",{"disabled":400,"type":9166},"checkbox",[],{"type":51,"value":9169}," Uses ",{"type":45,"tag":65,"props":9171,"children":9173},{"className":9172},[],[9174],{"type":51,"value":342},{"type":51,"value":9176}," tokens for colors\u002Fbrushes — no hardcoded hex on themed surfaces",{"type":45,"tag":188,"props":9178,"children":9180},{"className":9179},[9161],[9181,9184,9186,9191],{"type":45,"tag":9164,"props":9182,"children":9183},{"disabled":400,"type":9166},[],{"type":51,"value":9185}," Resource keys end in ",{"type":45,"tag":65,"props":9187,"children":9189},{"className":9188},[],[9190],{"type":51,"value":1926},{"type":51,"value":9192}," (not Color name)",{"type":45,"tag":188,"props":9194,"children":9196},{"className":9195},[9161],[9197,9200],{"type":45,"tag":9164,"props":9198,"children":9199},{"disabled":400,"type":9166},[],{"type":51,"value":9201}," No opacity on elements in High Contrast",{"type":45,"tag":188,"props":9203,"children":9205},{"className":9204},[9161],[9206,9209],{"type":45,"tag":9164,"props":9207,"children":9208},{"disabled":400,"type":9166},[],{"type":51,"value":9210}," Acrylic surfaces use correct background + border pairings",{"type":45,"tag":188,"props":9212,"children":9214},{"className":9213},[9161],[9215,9218,9219,9224],{"type":45,"tag":9164,"props":9216,"children":9217},{"disabled":400,"type":9166},[],{"type":51,"value":3476},{"type":45,"tag":65,"props":9220,"children":9222},{"className":9221},[],[9223],{"type":51,"value":7739},{"type":51,"value":9225}," set on bordered acrylic containers",{"type":45,"tag":188,"props":9227,"children":9229},{"className":9228},[9161],[9230,9233,9235,9240],{"type":45,"tag":9164,"props":9231,"children":9232},{"disabled":400,"type":9166},[],{"type":51,"value":9234}," No partial theme changes — Light\u002FDark ",{"type":45,"tag":65,"props":9236,"children":9238},{"className":9237},[],[9239],{"type":51,"value":1808},{"type":51,"value":9241}," updates tested with HC in the same change",{"type":45,"tag":188,"props":9243,"children":9245},{"className":9244},[9161],[9246,9249],{"type":45,"tag":9164,"props":9247,"children":9248},{"disabled":400,"type":9166},[],{"type":51,"value":9250}," Interactive containers (cards, list items) have visible borders in HC",{"type":45,"tag":54,"props":9252,"children":9253},{},[9254],{"type":45,"tag":112,"props":9255,"children":9256},{},[9257],{"type":51,"value":9258},"Typography:",{"type":45,"tag":220,"props":9260,"children":9262},{"className":9261},[9156],[9263,9292,9314,9328,9337],{"type":45,"tag":188,"props":9264,"children":9266},{"className":9265},[9161],[9267,9270,9272,9277,9278,9283,9284,9290],{"type":45,"tag":9164,"props":9268,"children":9269},{"disabled":400,"type":9166},[],{"type":51,"value":9271}," Uses semantic text factories (",{"type":45,"tag":65,"props":9273,"children":9275},{"className":9274},[],[9276],{"type":51,"value":2811},{"type":51,"value":80},{"type":45,"tag":65,"props":9279,"children":9281},{"className":9280},[],[9282],{"type":51,"value":2818},{"type":51,"value":80},{"type":45,"tag":65,"props":9285,"children":9287},{"className":9286},[],[9288],{"type":51,"value":9289},"Caption",{"type":51,"value":9291},") or WinUI style tokens",{"type":45,"tag":188,"props":9293,"children":9295},{"className":9294},[9161],[9296,9299,9300,9305,9307,9312],{"type":45,"tag":9164,"props":9297,"children":9298},{"disabled":400,"type":9166},[],{"type":51,"value":3476},{"type":45,"tag":65,"props":9301,"children":9303},{"className":9302},[],[9304],{"type":51,"value":273},{"type":51,"value":9306}," is SemiBold (600), not Bold (700) — except ",{"type":45,"tag":65,"props":9308,"children":9310},{"className":9309},[],[9311],{"type":51,"value":243},{"type":51,"value":9313}," page titles",{"type":45,"tag":188,"props":9315,"children":9317},{"className":9316},[9161],[9318,9321,9323],{"type":45,"tag":9164,"props":9319,"children":9320},{"disabled":400,"type":9166},[],{"type":51,"value":9322}," No fixed heights on text containers — uses ",{"type":45,"tag":65,"props":9324,"children":9326},{"className":9325},[],[9327],{"type":51,"value":4742},{"type":45,"tag":188,"props":9329,"children":9331},{"className":9330},[9161],[9332,9335],{"type":45,"tag":9164,"props":9333,"children":9334},{"disabled":400,"type":9166},[],{"type":51,"value":9336}," Trimmed text has a tooltip for overflow content",{"type":45,"tag":188,"props":9338,"children":9340},{"className":9339},[9161],[9341,9344],{"type":45,"tag":9164,"props":9342,"children":9343},{"disabled":400,"type":9166},[],{"type":51,"value":9345}," Icons and text top-aligned in wrapping scenarios",{"type":45,"tag":54,"props":9347,"children":9348},{},[9349],{"type":45,"tag":112,"props":9350,"children":9351},{},[9352],{"type":51,"value":9353},"Layout:",{"type":45,"tag":220,"props":9355,"children":9357},{"className":9356},[9156],[9358,9367,9376,9397,9425,9434,9454,9478,9500],{"type":45,"tag":188,"props":9359,"children":9361},{"className":9360},[9161],[9362,9365],{"type":45,"tag":9164,"props":9363,"children":9364},{"disabled":400,"type":9166},[],{"type":51,"value":9366}," Layout values use multiples of 4",{"type":45,"tag":188,"props":9368,"children":9370},{"className":9369},[9161],[9371,9374],{"type":45,"tag":9164,"props":9372,"children":9373},{"disabled":400,"type":9166},[],{"type":51,"value":9375}," Corner radius is 4 (controls) or 8 (overlays) — no non-standard values",{"type":45,"tag":188,"props":9377,"children":9379},{"className":9378},[9161],[9380,9383,9384,9389,9390,9395],{"type":45,"tag":9164,"props":9381,"children":9382},{"disabled":400,"type":9166},[],{"type":51,"value":9169},{"type":45,"tag":65,"props":9385,"children":9387},{"className":9386},[],[9388],{"type":51,"value":4742},{"type":51,"value":267},{"type":45,"tag":65,"props":9391,"children":9393},{"className":9392},[],[9394],{"type":51,"value":4749},{"type":51,"value":9396}," instead of fixed sizing for text containers",{"type":45,"tag":188,"props":9398,"children":9400},{"className":9399},[9161],[9401,9404,9405,9410,9412,9417,9418,9423],{"type":45,"tag":9164,"props":9402,"children":9403},{"disabled":400,"type":9166},[],{"type":51,"value":9169},{"type":45,"tag":65,"props":9406,"children":9408},{"className":9407},[],[9409],{"type":51,"value":3875},{"type":51,"value":9411}," for single-child containers (not ",{"type":45,"tag":65,"props":9413,"children":9415},{"className":9414},[],[9416],{"type":51,"value":3905},{"type":51,"value":267},{"type":45,"tag":65,"props":9419,"children":9421},{"className":9420},[],[9422],{"type":51,"value":3920},{"type":51,"value":9424}," wrappers)",{"type":45,"tag":188,"props":9426,"children":9428},{"className":9427},[9161],[9429,9432],{"type":45,"tag":9164,"props":9430,"children":9431},{"disabled":400,"type":9166},[],{"type":51,"value":9433}," No unnecessary wrapper containers without layout or styling purpose",{"type":45,"tag":188,"props":9435,"children":9437},{"className":9436},[9161],[9438,9441,9442,9447,9449],{"type":45,"tag":9164,"props":9439,"children":9440},{"disabled":400,"type":9166},[],{"type":51,"value":3476},{"type":45,"tag":65,"props":9443,"children":9445},{"className":9444},[],[9446],{"type":51,"value":3912},{"type":51,"value":9448}," does not contain text that needs ",{"type":45,"tag":65,"props":9450,"children":9452},{"className":9451},[],[9453],{"type":51,"value":3523},{"type":45,"tag":188,"props":9455,"children":9457},{"className":9456},[9161],[9458,9461,9463,9468,9470,9476],{"type":45,"tag":9164,"props":9459,"children":9460},{"disabled":400,"type":9166},[],{"type":51,"value":9462}," Text trimming columns use ",{"type":45,"tag":65,"props":9464,"children":9466},{"className":9465},[],[9467],{"type":51,"value":5054},{"type":51,"value":9469}," (not ",{"type":45,"tag":65,"props":9471,"children":9473},{"className":9472},[],[9474],{"type":51,"value":9475},"\"Auto\"",{"type":51,"value":9477},", which also prevents trimming)",{"type":45,"tag":188,"props":9479,"children":9481},{"className":9480},[9161],[9482,9485,9486,9491,9493,9498],{"type":45,"tag":9164,"props":9483,"children":9484},{"disabled":400,"type":9166},[],{"type":51,"value":3476},{"type":45,"tag":65,"props":9487,"children":9489},{"className":9488},[],[9490],{"type":51,"value":5595},{"type":51,"value":9492}," has ",{"type":45,"tag":65,"props":9494,"children":9496},{"className":9495},[],[9497],{"type":51,"value":295},{"type":51,"value":9499}," and 12px parent padding",{"type":45,"tag":188,"props":9501,"children":9503},{"className":9502},[9161],[9504,9507,9509],{"type":45,"tag":9164,"props":9505,"children":9506},{"disabled":400,"type":9166},[],{"type":51,"value":9508}," ScrollView content uses ",{"type":45,"tag":65,"props":9510,"children":9512},{"className":9511},[],[9513],{"type":51,"value":5287},{"type":45,"tag":54,"props":9515,"children":9516},{},[9517],{"type":45,"tag":112,"props":9518,"children":9519},{},[9520],{"type":51,"value":9521},"Controls and Styling:",{"type":45,"tag":220,"props":9523,"children":9525},{"className":9524},[9156],[9526,9549,9558,9567,9583],{"type":45,"tag":188,"props":9527,"children":9529},{"className":9528},[9161],[9530,9533,9534,9539,9541,9547],{"type":45,"tag":9164,"props":9531,"children":9532},{"disabled":400,"type":9166},[],{"type":51,"value":3476},{"type":45,"tag":65,"props":9535,"children":9537},{"className":9536},[],[9538],{"type":51,"value":1808},{"type":51,"value":9540}," used for button visual state overrides (not ",{"type":45,"tag":65,"props":9542,"children":9544},{"className":9543},[],[9545],{"type":51,"value":9546},".Background()",{"type":51,"value":9548}," directly)",{"type":45,"tag":188,"props":9550,"children":9552},{"className":9551},[9161],[9553,9556],{"type":45,"tag":9164,"props":9554,"children":9555},{"disabled":400,"type":9166},[],{"type":51,"value":9557}," All visual states covered when overriding — rest + hover + pressed + disabled",{"type":45,"tag":188,"props":9559,"children":9561},{"className":9560},[9161],[9562,9565],{"type":45,"tag":9164,"props":9563,"children":9564},{"disabled":400,"type":9166},[],{"type":51,"value":9566}," No explicit setting of WinUI default values",{"type":45,"tag":188,"props":9568,"children":9570},{"className":9569},[9161],[9571,9574,9576,9581],{"type":45,"tag":9164,"props":9572,"children":9573},{"disabled":400,"type":9166},[],{"type":51,"value":9575}," No no-op ",{"type":45,"tag":65,"props":9577,"children":9579},{"className":9578},[],[9580],{"type":51,"value":1808},{"type":51,"value":9582}," overrides that repeat WinUI defaults",{"type":45,"tag":188,"props":9584,"children":9586},{"className":9585},[9161],[9587,9590],{"type":45,"tag":9164,"props":9588,"children":9589},{"disabled":400,"type":9166},[],{"type":51,"value":9591}," Uses existing WinUI styles before creating custom overrides",{"type":45,"tag":54,"props":9593,"children":9594},{},[9595],{"type":45,"tag":112,"props":9596,"children":9597},{},[9598],{"type":51,"value":9599},"Accessibility:",{"type":45,"tag":220,"props":9601,"children":9603},{"className":9602},[9156],[9604,9619,9635,9658],{"type":45,"tag":188,"props":9605,"children":9607},{"className":9606},[9161],[9608,9611,9612,9617],{"type":45,"tag":9164,"props":9609,"children":9610},{"disabled":400,"type":9166},[],{"type":51,"value":3476},{"type":45,"tag":65,"props":9613,"children":9615},{"className":9614},[],[9616],{"type":51,"value":7424},{"type":51,"value":9618}," set on icon-only controls",{"type":45,"tag":188,"props":9620,"children":9622},{"className":9621},[9161],[9623,9626,9627,9633],{"type":45,"tag":9164,"props":9624,"children":9625},{"disabled":400,"type":9166},[],{"type":51,"value":3476},{"type":45,"tag":65,"props":9628,"children":9630},{"className":9629},[],[9631],{"type":51,"value":9632},"HeadingLevel",{"type":51,"value":9634}," set on heading text",{"type":45,"tag":188,"props":9636,"children":9638},{"className":9637},[9161],[9639,9642,9643,9649,9650,9656],{"type":45,"tag":9164,"props":9640,"children":9641},{"disabled":400,"type":9166},[],{"type":51,"value":3476},{"type":45,"tag":65,"props":9644,"children":9646},{"className":9645},[],[9647],{"type":51,"value":9648},"PositionInSet",{"type":51,"value":4804},{"type":45,"tag":65,"props":9651,"children":9653},{"className":9652},[],[9654],{"type":51,"value":9655},"SizeOfSet",{"type":51,"value":9657}," set on list items",{"type":45,"tag":188,"props":9659,"children":9661},{"className":9660},[9161],[9662,9665,9667,9672],{"type":45,"tag":9164,"props":9663,"children":9664},{"disabled":400,"type":9166},[],{"type":51,"value":9666}," Hit-test targets for light-dismiss are visible (",{"type":45,"tag":65,"props":9668,"children":9670},{"className":9669},[],[9671],{"type":51,"value":454},{"type":51,"value":9129},{"type":45,"tag":54,"props":9674,"children":9675},{},[9676],{"type":45,"tag":112,"props":9677,"children":9678},{},[9679],{"type":51,"value":9680},"State and Reconciliation:",{"type":45,"tag":220,"props":9682,"children":9684},{"className":9683},[9156],[9685,9700,9709,9724],{"type":45,"tag":188,"props":9686,"children":9688},{"className":9687},[9161],[9689,9692,9693,9698],{"type":45,"tag":9164,"props":9690,"children":9691},{"disabled":400,"type":9166},[],{"type":51,"value":3476},{"type":45,"tag":65,"props":9694,"children":9696},{"className":9695},[],[9697],{"type":51,"value":8335},{"type":51,"value":9699}," set on items in dynamic lists",{"type":45,"tag":188,"props":9701,"children":9703},{"className":9702},[9161],[9704,9707],{"type":45,"tag":9164,"props":9705,"children":9706},{"disabled":400,"type":9166},[],{"type":51,"value":9708}," Hooks are unconditional and in consistent order",{"type":45,"tag":188,"props":9710,"children":9712},{"className":9711},[9161],[9713,9716,9717,9722],{"type":45,"tag":9164,"props":9714,"children":9715},{"disabled":400,"type":9166},[],{"type":51,"value":3476},{"type":45,"tag":65,"props":9718,"children":9720},{"className":9719},[],[9721],{"type":51,"value":5948},{"type":51,"value":9723}," wraps handlers passed to child components",{"type":45,"tag":188,"props":9725,"children":9727},{"className":9726},[9161],[9728,9731,9732,9738],{"type":45,"tag":9164,"props":9729,"children":9730},{"disabled":400,"type":9166},[],{"type":51,"value":3476},{"type":45,"tag":65,"props":9733,"children":9735},{"className":9734},[],[9736],{"type":51,"value":9737},"UseMemo",{"type":51,"value":9739}," wraps expensive computations",{"type":45,"tag":54,"props":9741,"children":9742},{},[9743],{"type":45,"tag":112,"props":9744,"children":9745},{},[9746],{"type":51,"value":9747},"PR Hygiene:",{"type":45,"tag":220,"props":9749,"children":9751},{"className":9750},[9156],[9752,9761],{"type":45,"tag":188,"props":9753,"children":9755},{"className":9754},[9161],[9756,9759],{"type":45,"tag":9164,"props":9757,"children":9758},{"disabled":400,"type":9166},[],{"type":51,"value":9760}," PR scope excludes unrelated churn — every change maps to a concrete UX reason",{"type":45,"tag":188,"props":9762,"children":9764},{"className":9763},[9161],[9765,9768,9770,9775],{"type":45,"tag":9164,"props":9766,"children":9767},{"disabled":400,"type":9166},[],{"type":51,"value":9769}," No broad ",{"type":45,"tag":65,"props":9771,"children":9773},{"className":9772},[],[9774],{"type":51,"value":1808},{"type":51,"value":9776}," or styling edits unrelated to the feature being changed",{"type":45,"tag":54,"props":9778,"children":9779},{},[9780,9785],{"type":45,"tag":112,"props":9781,"children":9782},{},[9783],{"type":51,"value":9784},"If changing colors:",{"type":51,"value":9786}," Test in NightSky HC theme, hover on interactive elements.",{"type":45,"tag":54,"props":9788,"children":9789},{},[9790,9795],{"type":45,"tag":112,"props":9791,"children":9792},{},[9793],{"type":51,"value":9794},"If changing text\u002Fcontainers:",{"type":51,"value":9796}," Test with scaled text and long strings.",{"type":45,"tag":54,"props":9798,"children":9799},{},[9800,9805],{"type":45,"tag":112,"props":9801,"children":9802},{},[9803],{"type":51,"value":9804},"If changing layout:",{"type":51,"value":9806}," Test at 100%, 150%, 200%, 250% display scaling.",{"type":45,"tag":9131,"props":9808,"children":9809},{},[],{"type":45,"tag":177,"props":9811,"children":9813},{"id":9812},"testing-guidance",[9814],{"type":51,"value":9815},"Testing Guidance",{"type":45,"tag":220,"props":9817,"children":9818},{},[9819,9823,9828,9833,9838,9843,9848],{"type":45,"tag":188,"props":9820,"children":9821},{},[9822],{"type":51,"value":7497},{"type":45,"tag":188,"props":9824,"children":9825},{},[9826],{"type":51,"value":9827},"Test hover\u002Fpressed states on all interactive elements.",{"type":45,"tag":188,"props":9829,"children":9830},{},[9831],{"type":51,"value":9832},"Test at 100%, 150%, 200%, and 250% display scaling.",{"type":45,"tag":188,"props":9834,"children":9835},{},[9836],{"type":51,"value":9837},"Test with text scaling and long\u002Flocalized strings for clipping and trimming.",{"type":45,"tag":188,"props":9839,"children":9840},{},[9841],{"type":51,"value":9842},"Verify acrylic pairings and shadow clipping after layout changes.",{"type":45,"tag":188,"props":9844,"children":9845},{},[9846],{"type":51,"value":9847},"Validate Figma implementation measurements at 100% scale factor.",{"type":45,"tag":188,"props":9849,"children":9850},{},[9851],{"type":51,"value":9852},"Capture before\u002Fafter screenshots for visual changes including Light\u002FDark\u002FHC evidence.",{"type":45,"tag":9131,"props":9854,"children":9855},{},[],{"type":45,"tag":177,"props":9857,"children":9859},{"id":9858},"references",[9860],{"type":51,"value":9861},"References",{"type":45,"tag":54,"props":9863,"children":9864},{},[9865],{"type":51,"value":9866},"Consult these for detailed guidance:",{"type":45,"tag":220,"props":9868,"children":9869},{},[9870,9878,9886,9894,9903],{"type":45,"tag":188,"props":9871,"children":9872},{},[9873],{"type":45,"tag":159,"props":9874,"children":9875},{"href":1786},[9876],{"type":51,"value":9877},"Theme-aware resources",{"type":45,"tag":188,"props":9879,"children":9880},{},[9881],{"type":45,"tag":159,"props":9882,"children":9883},{"href":3563},[9884],{"type":51,"value":9885},"Typography and colors",{"type":45,"tag":188,"props":9887,"children":9888},{},[9889],{"type":45,"tag":159,"props":9890,"children":9891},{"href":5705},[9892],{"type":51,"value":9893},"Layout and scaling",{"type":45,"tag":188,"props":9895,"children":9896},{},[9897],{"type":45,"tag":159,"props":9898,"children":9900},{"href":9899},"design-docs\u002Fcontrol-styles.md",[9901],{"type":51,"value":9902},"Control styles",{"type":45,"tag":188,"props":9904,"children":9905},{},[9906],{"type":45,"tag":159,"props":9907,"children":9908},{"href":7541},[9909],{"type":51,"value":9910},"Code review checklist",{"type":45,"tag":177,"props":9912,"children":9914},{"id":9913},"external-references",[9915],{"type":51,"value":9916},"External References",{"type":45,"tag":220,"props":9918,"children":9919},{},[9920,9931,9941,9951,9961,9971,9981],{"type":45,"tag":188,"props":9921,"children":9922},{},[9923],{"type":45,"tag":159,"props":9924,"children":9928},{"href":9925,"rel":9926},"https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fwindows\u002Fapps\u002Fdesign\u002Fguidelines-overview",[9927],"nofollow",[9929],{"type":51,"value":9930},"Microsoft Design Guidelines",{"type":45,"tag":188,"props":9932,"children":9933},{},[9934],{"type":45,"tag":159,"props":9935,"children":9938},{"href":9936,"rel":9937},"https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fwindows\u002Fapps\u002Fdesign\u002Fsignature-experiences\u002Fcolor",[9927],[9939],{"type":51,"value":9940},"Color in Windows",{"type":45,"tag":188,"props":9942,"children":9943},{},[9944],{"type":45,"tag":159,"props":9945,"children":9948},{"href":9946,"rel":9947},"https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fwindows\u002Fapps\u002Fdesign\u002Fsignature-experiences\u002Ftypography",[9927],[9949],{"type":51,"value":9950},"Typography in Windows",{"type":45,"tag":188,"props":9952,"children":9953},{},[9954],{"type":45,"tag":159,"props":9955,"children":9958},{"href":9956,"rel":9957},"https:\u002F\u002Fapps.microsoft.com\u002Fdetail\u002F9P3JFPWWDZRC",[9927],[9959],{"type":51,"value":9960},"WinUI 3 Gallery App",{"type":45,"tag":188,"props":9962,"children":9963},{},[9964],{"type":45,"tag":159,"props":9965,"children":9968},{"href":9966,"rel":9967},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fmicrosoft-ui-xaml\u002Fblob\u002Fwinui2\u002Fmain\u002Fdev\u002FCommonStyles\u002FButton_themeresources.xaml",[9927],[9969],{"type":51,"value":9970},"WinUI Button Theme Resources",{"type":45,"tag":188,"props":9972,"children":9973},{},[9974],{"type":45,"tag":159,"props":9975,"children":9978},{"href":9976,"rel":9977},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fmicrosoft-ui-xaml\u002Fblob\u002Fwinui2\u002Fmain\u002Fdev\u002FCommonStyles\u002FTextBlock_themeresources.xaml",[9927],[9979],{"type":51,"value":9980},"WinUI TextBlock Theme Resources",{"type":45,"tag":188,"props":9982,"children":9983},{},[9984],{"type":45,"tag":159,"props":9985,"children":9988},{"href":9986,"rel":9987},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fmicrosoft-ui-xaml\u002Fblob\u002Fwinui2\u002Fmain\u002Fdev\u002FCommonStyles\u002FCommon_themeresources_any.xaml",[9927],[9989],{"type":51,"value":9990},"WinUI Common Theme Resources",{"type":45,"tag":9992,"props":9993,"children":9994},"style",{},[9995],{"type":51,"value":9996},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":9998,"total":369},[9999,10007],{"slug":4,"name":4,"fn":5,"description":6,"org":10000,"tags":10001,"stars":28,"repoUrl":29,"updatedAt":30},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10002,10003,10004,10005,10006],{"name":13,"slug":14,"type":15},{"name":20,"slug":21,"type":15},{"name":26,"slug":27,"type":15},{"name":23,"slug":24,"type":15},{"name":17,"slug":18,"type":15},{"slug":10008,"name":10008,"fn":10009,"description":10010,"org":10011,"tags":10012,"stars":28,"repoUrl":29,"updatedAt":10018},"reactor-docking","build IDE-style docking window layouts","Reactor docking windows — `DockManager`, `DockSplit`\u002F`DockTabGroup`\u002F`Document`\u002F`ToolWindow`, drag-to-float\u002Fredock, roles (`DocumentArea`\u002F`ToolWindowStrip`), persistence. Use when building IDE-\u002FOffice-shaped layouts with dockable, tear-out tool windows and document wells. READ THIS BEFORE wiring `DockManager` — the content-vs-shape ownership model is the #1 thing people get wrong.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10013,10016,10017],{"name":10014,"slug":10015,"type":15},"Desktop","desktop",{"name":9,"slug":8,"type":15},{"name":23,"slug":24,"type":15},"2026-07-03T16:32:06.396776",{"items":10020,"total":10215},[10021,10043,10064,10085,10100,10117,10128,10141,10156,10171,10190,10203],{"slug":10022,"name":10022,"fn":10023,"description":10024,"org":10025,"tags":10026,"stars":10040,"repoUrl":10041,"updatedAt":10042},"rushstack-best-practices","manage Rush monorepos with best practices","Provides best practices and guidance for working with Rush monorepos. Use when the user is working in a Rush-based repository, asks about Rush commands (install, update, build, rebuild), needs help with project selection, dependency management, build caching, subspace configuration, or troubleshooting Rush-specific issues.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10027,10030,10033,10034,10037],{"name":10028,"slug":10029,"type":15},"Engineering","engineering",{"name":10031,"slug":10032,"type":15},"Local Development","local-development",{"name":9,"slug":8,"type":15},{"name":10035,"slug":10036,"type":15},"Project Management","project-management",{"name":10038,"slug":10039,"type":15},"Rush","rush",6484,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Frushstack","2026-04-06T18:34:44.965032",{"slug":10044,"name":10044,"fn":10045,"description":10046,"org":10047,"tags":10048,"stars":10061,"repoUrl":10062,"updatedAt":10063},"azure-ai-agents-persistent-dotnet","build AI agents with Azure .NET SDK","Azure AI Agents Persistent SDK for .NET. Low-level SDK for creating and managing AI agents with threads, messages, runs, and tools. Use for agent CRUD, conversation threads, streaming responses, function calling, file search, and code interpreter. Triggers: \"PersistentAgentsClient\", \"persistent agents\", \"agent threads\", \"agent runs\", \"streaming agents\", \"function calling agents .NET\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10049,10052,10055,10058],{"name":10050,"slug":10051,"type":15},".NET","net",{"name":10053,"slug":10054,"type":15},"Agents","agents",{"name":10056,"slug":10057,"type":15},"Azure","azure",{"name":10059,"slug":10060,"type":15},"LLM","llm",2804,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills","2026-07-03T16:32:10.297433",{"slug":10065,"name":10065,"fn":10066,"description":10067,"org":10068,"tags":10069,"stars":10061,"repoUrl":10062,"updatedAt":10084},"azure-ai-anomalydetector-java","build anomaly detection applications with Java","Build anomaly detection applications with Azure AI Anomaly Detector SDK for Java. Use when implementing univariate\u002Fmultivariate anomaly detection, time-series analysis, or AI-powered monitoring.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10070,10073,10074,10077,10080,10081],{"name":10071,"slug":10072,"type":15},"Analytics","analytics",{"name":10056,"slug":10057,"type":15},{"name":10075,"slug":10076,"type":15},"Data Analysis","data-analysis",{"name":10078,"slug":10079,"type":15},"Java","java",{"name":9,"slug":8,"type":15},{"name":10082,"slug":10083,"type":15},"Monitoring","monitoring","2026-05-13T06:14:16.261754",{"slug":10086,"name":10086,"fn":10087,"description":10088,"org":10089,"tags":10090,"stars":10061,"repoUrl":10062,"updatedAt":10099},"azure-ai-contentsafety-java","build content moderation applications with Azure AI","Build content moderation applications with Azure AI Content Safety SDK for Java. Use when implementing text\u002Fimage analysis, blocklist management, or harm detection for hate, violence, sexual content, and self-harm.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10091,10094,10095,10096],{"name":10092,"slug":10093,"type":15},"AI Infrastructure","ai-infrastructure",{"name":10056,"slug":10057,"type":15},{"name":10078,"slug":10079,"type":15},{"name":10097,"slug":10098,"type":15},"Security","security","2026-07-07T06:53:31.293235",{"slug":10101,"name":10101,"fn":10102,"description":10103,"org":10104,"tags":10105,"stars":10061,"repoUrl":10062,"updatedAt":10116},"azure-ai-contentsafety-py","detect harmful content with Azure AI Content Safety","Azure AI Content Safety SDK for Python. Use for detecting harmful content in text and images with multi-severity classification.\nTriggers: \"azure-ai-contentsafety\", \"ContentSafetyClient\", \"content moderation\", \"harmful content\", \"text analysis\", \"image analysis\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10106,10107,10110,10111,10112,10115],{"name":10056,"slug":10057,"type":15},{"name":10108,"slug":10109,"type":15},"Compliance","compliance",{"name":10059,"slug":10060,"type":15},{"name":9,"slug":8,"type":15},{"name":10113,"slug":10114,"type":15},"Python","python",{"name":10097,"slug":10098,"type":15},"2026-07-18T05:14:23.017504",{"slug":10118,"name":10118,"fn":10119,"description":10120,"org":10121,"tags":10122,"stars":10061,"repoUrl":10062,"updatedAt":10127},"azure-ai-language-conversations-py","implement conversational language understanding with Python","Implement Conversational Language Understanding (CLU) using the azure-ai-language-conversations Python SDK. Use when working with ConversationAnalysisClient to analyze conversation intent and entities, building NLP features, or integrating language understanding into applications.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10123,10124,10125,10126],{"name":10071,"slug":10072,"type":15},{"name":10056,"slug":10057,"type":15},{"name":10059,"slug":10060,"type":15},{"name":10113,"slug":10114,"type":15},"2026-07-31T05:54:29.068751",{"slug":10129,"name":10129,"fn":10130,"description":10131,"org":10132,"tags":10133,"stars":10061,"repoUrl":10062,"updatedAt":10140},"azure-ai-translation-text-py","translate text using Azure AI services","Azure AI Text Translation SDK for real-time text translation, transliteration, language detection, and dictionary lookup. Use for translating text content in applications.\nTriggers: \"text translation\", \"translator\", \"translate text\", \"transliterate\", \"TextTranslationClient\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10134,10137,10138,10139],{"name":10135,"slug":10136,"type":15},"API Development","api-development",{"name":10056,"slug":10057,"type":15},{"name":9,"slug":8,"type":15},{"name":10113,"slug":10114,"type":15},"2026-07-18T05:14:16.988376",{"slug":10142,"name":10142,"fn":10143,"description":10144,"org":10145,"tags":10146,"stars":10061,"repoUrl":10062,"updatedAt":10155},"azure-ai-vision-imageanalysis-py","analyze images with Azure AI Vision","Azure AI Vision Image Analysis SDK for captions, tags, objects, OCR, people detection, and smart cropping. Use for computer vision and image understanding tasks.\nTriggers: \"image analysis\", \"computer vision\", \"OCR\", \"object detection\", \"ImageAnalysisClient\", \"image caption\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10147,10148,10151,10154],{"name":10056,"slug":10057,"type":15},{"name":10149,"slug":10150,"type":15},"Computer Vision","computer-vision",{"name":10152,"slug":10153,"type":15},"Images","images",{"name":10113,"slug":10114,"type":15},"2026-07-18T05:14:18.007737",{"slug":10157,"name":10157,"fn":10158,"description":10159,"org":10160,"tags":10161,"stars":10061,"repoUrl":10062,"updatedAt":10170},"azure-appconfiguration-java","manage configuration with Azure App Configuration","Azure App Configuration SDK for Java. Centralized application configuration management with key-value settings, feature flags, and snapshots.\nTriggers: \"ConfigurationClient java\", \"app configuration java\", \"feature flag java\", \"configuration setting java\", \"azure config java\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10162,10163,10166,10169],{"name":10056,"slug":10057,"type":15},{"name":10164,"slug":10165,"type":15},"Configuration","configuration",{"name":10167,"slug":10168,"type":15},"Feature Flags","feature-flags",{"name":10078,"slug":10079,"type":15},"2026-07-03T16:32:01.278468",{"slug":10172,"name":10172,"fn":10173,"description":10174,"org":10175,"tags":10176,"stars":10061,"repoUrl":10062,"updatedAt":10189},"azure-cosmos-rust","build applications with Azure Cosmos DB","Azure Cosmos DB library for Rust (NoSQL API). Document CRUD, containers, and globally distributed data.\nTriggers: \"cosmos db rust\", \"CosmosClient rust\", \"document crud rust\", \"NoSQL rust\", \"partition key rust\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10177,10180,10183,10186],{"name":10178,"slug":10179,"type":15},"Cosmos DB","cosmos-db",{"name":10181,"slug":10182,"type":15},"Database","database",{"name":10184,"slug":10185,"type":15},"NoSQL","nosql",{"name":10187,"slug":10188,"type":15},"Rust","rust","2026-07-31T05:54:27.021432",{"slug":10191,"name":10191,"fn":10173,"description":10192,"org":10193,"tags":10194,"stars":10061,"repoUrl":10062,"updatedAt":10202},"azure-cosmos-ts","Azure Cosmos DB JavaScript\u002FTypeScript SDK (@azure\u002Fcosmos) for data plane operations. Use for CRUD operations on documents, queries, bulk operations, and container management. Triggers: \"Cosmos DB\", \"@azure\u002Fcosmos\", \"CosmosClient\", \"document CRUD\", \"NoSQL queries\", \"bulk operations\", \"partition key\", \"container.items\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10195,10196,10197,10198,10199],{"name":10178,"slug":10179,"type":15},{"name":10181,"slug":10182,"type":15},{"name":9,"slug":8,"type":15},{"name":10184,"slug":10185,"type":15},{"name":10200,"slug":10201,"type":15},"TypeScript","typescript","2026-07-03T16:31:19.368382",{"slug":10204,"name":10204,"fn":10205,"description":10206,"org":10207,"tags":10208,"stars":10061,"repoUrl":10062,"updatedAt":10214},"azure-data-tables-java","build table storage applications with Java","Build table storage applications with Azure Tables SDK for Java. Use when working with Azure Table Storage or Cosmos DB Table API for NoSQL key-value data, schemaless storage, or structured data at scale.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10209,10210,10211,10212,10213],{"name":10056,"slug":10057,"type":15},{"name":10178,"slug":10179,"type":15},{"name":10181,"slug":10182,"type":15},{"name":10078,"slug":10079,"type":15},{"name":10184,"slug":10185,"type":15},"2026-05-13T06:14:17.582229",267]