@ds-mo/ui 15.11.2 → 15.12.1

package/dist/mcp-data/registry/registry.json

@@ -3313,7 +3313,8 @@
           "states": [
             "Rows expose distinct rest, hover, pressed, keyboard-focus, and inactive states.",
             "An empty sections array or groups with no items render the configured empty message.",
-            "The application owns loading, error, permission, routing, and post-activation consequences and reflects availability through the supplied item data."
+            "The application owns data fetching, error, permission, routing, and post-activation consequences and reflects availability through the supplied item data.",
+            "isLoading preserves the section and row layout while skeletonizing all headings, labels, and values; actions become inert and the card exposes its busy state."
           ],
           "responsiveBehavior": [
             "The card fills its parent width and never establishes a product breakpoint.",
@@ -3373,6 +3374,10 @@
             "type": "string",
             "required": false
           },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
           "sections": {
             "type": "ReadonlyArray<CardActionCenterSection>",
             "required": false
@@ -3398,6 +3403,7 @@
       ],
       "registryDependencies": [
         "divider",
+        "skeleton",
         "tag",
         "text"
       ]
@@ -3448,7 +3454,8 @@
           "states": [
             "Custom mode provides flexible body chrome and does not mutate chart or legend interaction.",
             "Chart mode keeps a slotted external legend static by disabling hover emphasis.",
-            "showFilter adds the standard filter action and emits dsFilterClick without owning filter state."
+            "showFilter adds the standard filter action and emits dsFilterClick without owning filter state.",
+            "isLoading preserves card geometry, skeletonizes the heading and standard filter control, and replaces a chart canvas with one quiet placeholder. The owner supplies skeletons for custom body content and slotted actions."
           ],
           "responsiveBehavior": [
             "The sm, md, or lg width sets a matching token-based minimum height and remains constrained by its parent.",
@@ -3521,6 +3528,10 @@
             "type": "string",
             "required": true
           },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
           "showFilter": {
             "type": "boolean",
             "required": false
@@ -3550,6 +3561,7 @@
       ],
       "registryDependencies": [
         "button-unfilled",
+        "skeleton",
         "text"
       ]
     },
@@ -3606,7 +3618,8 @@
             "In content mode, the native link owns those interaction states only across the header while the body remains application-owned.",
             "An empty or unsafe href renders non-interactive card chrome without a false keyboard target.",
             "Copy is always stacked, so a missing description keeps the heading at the start of the column instead of centering it in the header.",
-            "The application owns destination loading, authorization, not-found, and recovery states after navigation."
+            "The application owns destination loading, authorization, not-found, and recovery states after navigation.",
+            "isLoading preserves card geometry and copy wrapping while showing skeletons and preventing navigation."
           ],
           "responsiveBehavior": [
             "Choose sm, md, or lg from the parent layout; the surface never exceeds its parent width.",
@@ -3691,6 +3704,10 @@
             "type": "string",
             "required": true
           },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
           "variant": {
             "type": "CardNavigationVariant",
             "required": false
@@ -3717,6 +3734,7 @@
       ],
       "registryDependencies": [
         "icon",
+        "skeleton",
         "text"
       ]
     },
@@ -3777,7 +3795,7 @@
             "Trend is supplied already resolved as a direction, a formatted value, and a tone. Whether a rise reads well is a product decision, so the component never infers tone from the numbers. Derive it with resolveMetricTrend.",
             "Omit a trend when there is nothing to report; resolveMetricTrend returns null in that case so no zero change is rendered.",
             "Omit score to render a centered Score unavailable cell with a tertiary border and no score fill. Set scoreErrorMessage to replace that copy while the measures remain readable.",
-            "Loading replaces the score and measures with skeletons and does not alter the slotted period control. Score loading replaces only the fill figure; the overview still skeletons the score-copy spacer and trend. When measures are already supplied, their count preserves the resolved grid shape; otherwise five measure placeholders join the score in the standard six-cell grid.",
+            "Loading replaces the score, measures, and fixed period copy with skeletons. The owner supplies loading atoms for slotted controls. Score loading replaces only the fill figure; the overview still skeletons the score-copy spacer and trend. When measures are already supplied, their count preserves the resolved grid shape; otherwise five measure placeholders join the score in the standard six-cell grid.",
             "At most seven measures are shown. Keep larger collections outside the summary bar rather than turning it into a dense dashboard.",
             "The period and filter controls are slotted rather than owned. Use the period slot when the current range is selectable; otherwise periodLabel supplies fixed current copy in the same md control-frame and label-inset anatomy. Use the filter slot for the application-owned comparison-window control. Slotted Selects use hasBorder false so the 48px bar owns their surrounding boundary and allowClear false because both controls always require one selected reporting period.",
             "A numeric safety score infers fair from 0–50, good from 51–80, and excellent from 81–100. The level can be supplied explicitly when the displayed value is not numeric. The deprecated band field is ignored.",
@@ -3992,7 +4010,8 @@
             "The parent owns read-only versus editable body composition, dirty state, validation, persistence, loading, success, and error consequences.",
             "A save request keeps the section editing while validation or persistence is pending; the parent exits only after success.",
             "A cancel request does not persist changes; the parent restores its chosen value snapshot and exits editing.",
-            "The immediate variant keeps the resting card surface and omits header actions even if editing is supplied. The application applies and persists each control change independently."
+            "The immediate variant keeps the resting card surface and omits header actions even if editing is supplied. The application applies and persists each control change independently.",
+            "isLoading replaces header copy and actions with skeletons while retaining card geometry; projected body loading remains owned by the application."
           ],
           "responsiveBehavior": [
             "Choose sm, md, or lg from the parent layout. Empty editable cards use the matching minimum height. Cards with body content, and immediate cards, fit that content.",
@@ -4089,6 +4108,10 @@
             "type": "string",
             "required": true
           },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
           "saveLabel": {
             "type": "string",
             "required": false
@@ -4119,6 +4142,7 @@
       "registryDependencies": [
         "button-filled",
         "button-unfilled",
+        "skeleton",
         "text"
       ]
     },
@@ -4155,6 +4179,7 @@
             "The shared text-action recipe supplies brand foreground, hover underline, and keyboard focus indication."
           ],
           "states": [
+            "Loading retains the card surface, sentence wrapping, and control footprints while replacing each fragment with an inert text skeleton. Text actions mask only their labels, preserving the surrounding button's hit area.",
             "The application owns the selected area, profile, available choices, permissions, and empty-state copy. Existing complete area-trigger labels remain compatible. Applications that separate the localizable settings noun from the control supply the area-only trigger label and noun together.",
             "The card reports popup requests without changing selection or expanded state.",
             "The surface follows the active theme rather than imposing always-dark colors."
@@ -4215,6 +4240,10 @@
             "type": "string",
             "required": false
           },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
           "managingLabel": {
             "type": "string",
             "required": false
@@ -4263,6 +4292,7 @@
         "@ds-mo/tokens"
       ],
       "registryDependencies": [
+        "skeleton",
         "text"
       ]
     },
@@ -7204,6 +7234,7 @@
             "Do not use placeholder text as the only label. Keep label text concise and put format or consequence guidance in description."
           ],
           "states": [
+            "Loading masks field copy and the slotted control in place. The control remains mounted with its value, native form association, and accessible label intact; the field is inert until loading ends.",
             "The visible label is optional. Omit it when a nearby heading already names the field; Field still associates description and error text with the slotted control.",
             "Label, control, description, and error content follow the shared 4px vertical field flow without changing the slotted control's width or semantics. When the slotted control is borderless, description and error copy inset to that control's text origin instead of the resting bordered edge.",
             "Field exposes data-focused, data-filled, data-dirty, data-touched, data-invalid, data-disabled, and data-required hooks while the slotted control remains the source of value and interaction behavior.",
@@ -7269,6 +7300,10 @@
             "type": "string | undefined",
             "required": false
           },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
           "label": {
             "type": "string",
             "required": false
@@ -7288,6 +7323,7 @@
         "@ds-mo/tokens"
       ],
       "registryDependencies": [
+        "skeleton",
         "text"
       ]
     },
@@ -7827,7 +7863,8 @@
           "states": [
             "The description renders verbatim in every state in which the owning settings card projects the component.",
             "The component has no internal visibility, editing, or dismissal state; the owning settings card controls whether it is present.",
-            "The content height is intrinsic: the banner contributes 8px block padding and its inner content container contributes 4px block padding. A single body-small line is 24px inside that container (4px + 16px line-height + 4px), followed by the tertiary bottom boundary."
+            "The content height is intrinsic: the banner contributes 8px block padding and its inner content container contributes 4px block padding. A single body-small line is 24px inside that container (4px + 16px line-height + 4px), followed by the tertiary bottom boundary.",
+            "isLoading replaces the copy with a wrapping text skeleton inside the original banner geometry."
           ],
           "responsiveBehavior": [
             "The component fills the available inline size and lets body-small copy wrap naturally.",
@@ -7874,6 +7911,10 @@
           "description": {
             "type": "string",
             "required": true
+          },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
           }
         },
         "events": [],
@@ -7890,6 +7931,7 @@
         "@ds-mo/tokens"
       ],
       "registryDependencies": [
+        "skeleton",
         "text"
       ]
     },
@@ -11331,7 +11373,8 @@
             "Zero results display Page 1 of 1. A partial final page still derives from totalItems. Assistive status keeps the complete item range.",
             "loading preserves the full pagination surface, applies aria-busy to the navigation region, and prevents page or page-size requests.",
             "fitToPage appends a Fit to page choice. fitPageSize supplies its effective whole-item capacity; the closed trigger says Fit while page position reflects the resulting window. fitToPageInactive keeps that choice visible but unavailable when fitting is not meaningful for the current data shape. Pagination does not measure layouts itself.",
-            "showFirstLastButtons defaults to false. Enable it when direct jumps to both result boundaries materially help the workflow."
+            "showFirstLastButtons defaults to false. Enable it when direct jumps to both result boundaries materially help the workflow.",
+            "chromeLoading shows separate skeletons for the page-size label, selector, page position and each configured navigation control, retaining their intrinsic and responsive geometry. It also prevents requests."
           ],
           "responsiveBehavior": [
             "The full-width controls remain on one line with noun, selected size, a vertical divider, page position, Previous and Next, plus optional First and Last navigation.",
@@ -11361,6 +11404,10 @@
           }
         },
         "props": {
+          "chromeLoading": {
+            "type": "boolean",
+            "required": false
+          },
           "fitPageSize": {
             "type": "number | undefined",
             "required": false
@@ -11448,6 +11495,7 @@
         "button-unfilled",
         "divider",
         "select",
+        "skeleton",
         "text"
       ]
     },
@@ -12640,7 +12688,8 @@
             "Description-rich options grow beyond the fixed density height while retaining its minimum target size and primitive-owned selection anatomy.",
             "A visible group label uses the same density height and horizontal text origin as a menu section heading above the option list without adding a second interaction target. Copy uses text-body-small emphasis.",
             "Vertical form options use a 4px gap; a medium single-line option and its group label each use the shared 32px control height.",
-            "Form and settings usage omits a row hover or pressed wash by default; set hasInteractionFill only when each radio option is presented as a choice-list row."
+            "Form and settings usage omits a row hover or pressed wash by default; set hasInteractionFill only when each radio option is presented as a choice-list row.",
+            "isLoading preserves option geometry and the submitted form value while skeletonizing the circles and copy. Loading options cannot receive focus or change selection."
           ],
           "responsiveBehavior": [
             "Choose size from the density of the containing form or settings row.",
@@ -12740,6 +12789,10 @@
             "type": "boolean",
             "required": false
           },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
           "name": {
             "type": "string | undefined",
             "required": false
@@ -12784,6 +12837,7 @@
         "@ds-mo/tokens"
       ],
       "registryDependencies": [
+        "skeleton",
         "text"
       ]
     },
@@ -13932,7 +13986,8 @@
             "The row is a neutral padded composition; selected, focus, and inactive states belong to the slotted Radio without a choice-list hover or pressed wash.",
             "The owning application handles dsChange and updates the slotted Radio value.",
             "Heading, saved-value choice, and slotted Radio stay mounted. presentation reflects on the host so view/edit is CSS visibility only; do not swap Host children or ngIf the Radio.",
-            "View presentation hides the slotted Radio with ::slotted host CSS and shows the saved option label plus optional consequence copy. The Radio stays in the tree."
+            "View presentation hides the slotted Radio with ::slotted host CSS and shows the saved option label plus optional consequence copy. The Radio stays in the tree.",
+            "isLoading preserves the heading and saved-value copy as text skeletons. The owner also sets isLoading on the slotted Radio when its editing presentation is pending."
           ],
           "responsiveBehavior": [
             "The row never exceeds its parent width; the slotted Radio keeps its option copy in the flexible column and wraps descriptions when needed."
@@ -13962,6 +14017,10 @@
             "type": "string",
             "required": false
           },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
           "label": {
             "type": "string",
             "required": false
@@ -13989,6 +14048,7 @@
         "@ds-mo/tokens"
       ],
       "registryDependencies": [
+        "skeleton",
         "text"
       ]
     },
@@ -14027,7 +14087,8 @@
             "The application accepts or rejects change requests by updating the controlled checked value and owns persistence and errors.",
             "Name the enabled setting consistently; the label must not change when the switch is toggled.",
             "Non-emphasis rows without supporting copy use ds-text color secondary (foreground-secondary) on the title. Non-emphasis rows with description keep a primary title.",
-            "Supporting copy is text-body-small in every variant."
+            "Supporting copy is text-body-small in every variant.",
+            "isLoading preserves the copy wrapping and switch footprint, replaces them with skeletons, and prevents value changes."
           ],
           "responsiveBehavior": [
             "The copy wraps while the switch keeps its natural size in the trailing column, including at narrow widths."
@@ -14066,6 +14127,10 @@
             "type": "boolean",
             "required": false
           },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
           "label": {
             "type": "string",
             "required": true
@@ -14094,6 +14159,7 @@
         "@ds-mo/tokens"
       ],
       "registryDependencies": [
+        "skeleton",
         "switch",
         "text"
       ]
@@ -14204,7 +14270,8 @@
             "Managed page-header capacity follows only the fixed shell breakpoint: roomy on desktop and compact on tablet. Opening PanelTools does not compact or constrain BarTitle.",
             "Mobile keeps at most the first eligible ordered icon command visible and moves labeled buttons, menu choices, split actions, and explicit overflow commands into one shell-owned text-only page-actions menu.",
             "The bottom bar remains visible at all route and tool depths in the foundation release.",
-            "A mobile shell banner paints a fixed top edge with its resolved background through exit motion. Color variants and theme changes follow the banner automatically; native Safari status-area tint remains a device-verified browser behavior."
+            "A mobile shell banner paints a fixed top edge with its resolved background through exit motion. Color variants and theme changes follow the banner automatically; native Safari status-area tint remains a device-verified browser behavior.",
+            "The routed content lane owns a size-query container. Full-height page compositions consume --ds-shell-content-block-size and subtract their page-local header; banners and desktop or mobile navigation resize that lane automatically."
           ],
           "frameworkCaveats": {
             "customElements": [
@@ -14853,11 +14920,14 @@
             "Shimmer is on by default and may be disabled for a static placeholder. Reduced motion always produces the static final shape.",
             "Rounded is an optional visual treatment for icon and control atoms rather than a semantic state.",
             "Omitted background is for primary and secondary surfaces. Explicit faint documents a faint parent while using the same standard base and shimmer tokens; other contexts use matching surface tokens.",
-            "The owner decides whether to delay initial visibility and when to replace the complete composition."
+            "The owner decides whether to delay initial visibility and when to replace the complete composition.",
+            "preserveLayout uses projected text or a control as the hidden, inert size source, retaining wrapping and responsive dimensions; set isLoading false to reveal that same mounted content. Use one atom per text or control, not a whole page.",
+            "Control appearance mirrors the pending control: filled masks the entire container; outlined retains its border with icon or text atoms; borderless masks only those contents. Set controlContent to match the control anatomy and preserveLayout to retain its exact footprint."
           ],
           "responsiveBehavior": [
             "The owning layout changes placeholder count, width, visibility, and arrangement to match its real responsive content.",
-            "Skeleton does not infer breakpoints or rearrange sibling atoms."
+            "Set collapseLabel on a control skeleton when its real control opts into compact table-caption behavior. It follows the same table or standalone data-toolbar measurement, replacing icon-and-label anatomy with a centered icon while preserving the enclosing control footprint.",
+            "Other skeletons do not infer breakpoints or rearrange sibling atoms. Icon canvases retain their square geometry in flex layouts."
           ],
           "frameworkCaveats": {
             "customElements": [
@@ -14897,7 +14967,11 @@
                   "textVariant",
                   "iconSize",
                   "controlSize",
-                  "rounded"
+                  "rounded",
+                  "preserveLayout",
+                  "isLoading",
+                  "controlAppearance",
+                  "controlContent"
                 ]
               },
               {
@@ -14910,7 +14984,9 @@
                 "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
                 "props": [
                   "background",
-                  "variant"
+                  "variant",
+                  "controlAppearance",
+                  "controlContent"
                 ]
               }
             ],
@@ -14922,6 +14998,18 @@
             "type": "SkeletonBackground | undefined",
             "required": false
           },
+          "collapseLabel": {
+            "type": "boolean",
+            "required": false
+          },
+          "controlAppearance": {
+            "type": "SkeletonControlAppearance",
+            "required": false
+          },
+          "controlContent": {
+            "type": "SkeletonControlContent",
+            "required": false
+          },
           "controlSize": {
             "type": "ControlSize",
             "required": false
@@ -14930,6 +15018,14 @@
             "type": "IconSize",
             "required": false
           },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
+          "preserveLayout": {
+            "type": "boolean",
+            "required": false
+          },
           "rounded": {
             "type": "boolean",
             "required": false
@@ -14952,7 +15048,9 @@
           }
         },
         "events": [],
-        "slots": [],
+        "slots": [
+          ""
+        ],
         "exports": {
           "customElement": "ds-skeleton",
           "react": "DsSkeleton",
@@ -14964,7 +15062,9 @@
         "@ds-mo/ui",
         "@ds-mo/tokens"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "skeleton"
+      ]
     },
     {
       "name": "slider",
@@ -15886,7 +15986,8 @@
             "While any checkbox selection is active, row activation toggles selection instead of opening details. Clearing the selection restores ordinary row activation. Nested controls retain their own intent, and disabled or non-selectable rows cannot be selected by activating their row.",
             "Use surfaceOpenRowId to identify the interactive row associated with a visible detail panel or other contextual surface. The application owns opening, same-row toggling, switching records, and closing; retain the identity through exit motion, then clear it. Move it when panel navigation changes the displayed record. This pressed wash spans sticky and scrolling cells, follows stable row identity through virtualization, and never checks a checkbox or changes selectedRowIds. Group expansion remains an inline disclosure.",
             "An external ds-data-preferences may own column controls. Hide only the built-in Customize trigger, keep column customization enabled, and share hidden-column and ordering state with the external surface.",
-            "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback."
+            "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback.",
+            "chromeLoading replaces column header labels and selection chrome with skeletons, preserving column geometry and accessible names as well as table-owned caption controls."
           ],
           "responsiveBehavior": [
             "Editable cells compose the shared borderless controls with cell-owned interaction and focus chrome. Only the active cell mounts a field. Single-select choices complete the edit immediately; multiline fields reserve Enter for a newline and use Ctrl/Command+Enter to commit. Date and time fields keep their picker keyboard behavior and emit canonical scalar values. Drafts stay local until a controlled change is proposed.",

package/dist/mcp-data/registry/setting-row-radio.json

@@ -37,7 +37,8 @@
         "The row is a neutral padded composition; selected, focus, and inactive states belong to the slotted Radio without a choice-list hover or pressed wash.",
         "The owning application handles dsChange and updates the slotted Radio value.",
         "Heading, saved-value choice, and slotted Radio stay mounted. presentation reflects on the host so view/edit is CSS visibility only; do not swap Host children or ngIf the Radio.",
-        "View presentation hides the slotted Radio with ::slotted host CSS and shows the saved option label plus optional consequence copy. The Radio stays in the tree."
+        "View presentation hides the slotted Radio with ::slotted host CSS and shows the saved option label plus optional consequence copy. The Radio stays in the tree.",
+        "isLoading preserves the heading and saved-value copy as text skeletons. The owner also sets isLoading on the slotted Radio when its editing presentation is pending."
       ],
       "responsiveBehavior": [
         "The row never exceeds its parent width; the slotted Radio keeps its option copy in the flexible column and wraps descriptions when needed."
@@ -72,6 +73,15 @@
           "mutable": false,
           "description": "Optional consequence or supporting copy for the saved option."
         },
+        "isLoading": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-loading",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Skeletonize the row copy without changing the saved choice or edit presentation."
+        },
         "label": {
           "type": "string",
           "resolvedType": "string | undefined",
@@ -111,6 +121,15 @@
         "mutable": false,
         "description": "Optional consequence or supporting copy for the saved option."
       },
+      "isLoading": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-loading",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Skeletonize the row copy without changing the saved choice or edit presentation."
+      },
       "label": {
         "type": "string",
         "resolvedType": "string | undefined",
@@ -179,6 +198,7 @@
     "@ds-mo/tokens"
   ],
   "registryDependencies": [
+    "skeleton",
     "text"
   ],
   "files": [
@@ -189,7 +209,7 @@
     },
     {
       "path": "src/wc/components/SettingRowRadio/SettingRowRadio.tsx",
-      "content": "import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { CONTROL_SUPPORTING_TEXT_VARIANT, CONTROL_TEXT_VARIANT } from '../../utils';\n\nexport type SettingRowRadioPresentation = 'edit' | 'view';\n\ntype SettingsRadio = HTMLElement & {\n  groupLabel: string;\n  ariaLabel: string | null;\n  ariaLabelledby?: string;\n};\n\nlet settingRowRadioHeadingId = 0;\n\n/** Padded settings-row composition for a Radio group. */\n@Component({\n  tag: 'ds-setting-row-radio',\n  styleUrl: 'SettingRowRadio.css',\n  scoped: true,\n})\nexport class SettingRowRadio {\n  @Element() el!: HTMLElement;\n\n  /** Interactive Radio group or non-interactive saved-value readout. */\n  @Prop({ reflect: true }) presentation: SettingRowRadioPresentation = 'edit';\n  /** Settings heading shown in both presentations. Not Radio's form groupLabel. */\n  @Prop() label?: string;\n  /** Saved option label shown in view presentation. */\n  @Prop() valueLabel?: string;\n  /** Optional consequence or supporting copy for the saved option. */\n  @Prop() description?: string;\n\n  private readonly headingId = `ds-setting-row-radio-heading-${++settingRowRadioHeadingId}`;\n\n  componentWillLoad() {\n    this.syncSlottedRadio();\n  }\n\n  componentDidLoad() {\n    this.syncSlottedRadio();\n  }\n\n  private syncSlottedRadio = () => {\n    for (const radio of this.el.querySelectorAll<SettingsRadio>('ds-radio')) {\n      radio.groupLabel = '';\n      if (this.label) {\n        radio.ariaLabelledby = this.headingId;\n        radio.ariaLabel = null;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <ds-text\n          key=\"setting-row-radio-heading\"\n          class=\"setting-row-radio__heading\"\n          as=\"span\"\n          variant={CONTROL_TEXT_VARIANT.md}\n          emphasis\n          textId={this.label ? this.headingId : undefined}\n        >\n          {this.label}\n        </ds-text>\n        <div key=\"setting-row-radio-choice\" class=\"setting-row-radio__choice\">\n          {this.valueLabel ? (\n            <ds-text key=\"setting-row-radio-value\" as=\"span\" variant={CONTROL_TEXT_VARIANT.md}>\n              {this.valueLabel}\n            </ds-text>\n          ) : null}\n          {this.description ? (\n            <ds-text\n              key=\"setting-row-radio-description\"\n              as=\"span\"\n              variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n              color=\"secondary\"\n            >\n              {this.description}\n            </ds-text>\n          ) : null}\n        </div>\n        <slot onSlotchange={this.syncSlottedRadio} />\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { CONTROL_SUPPORTING_TEXT_VARIANT, CONTROL_TEXT_VARIANT } from '../../utils';\n\nexport type SettingRowRadioPresentation = 'edit' | 'view';\n\ntype SettingsRadio = HTMLElement & {\n  groupLabel: string;\n  ariaLabel: string | null;\n  ariaLabelledby?: string;\n};\n\nlet settingRowRadioHeadingId = 0;\n\n/** Padded settings-row composition for a Radio group. */\n@Component({\n  tag: 'ds-setting-row-radio',\n  styleUrl: 'SettingRowRadio.css',\n  scoped: true,\n})\nexport class SettingRowRadio {\n  @Element() el!: HTMLElement;\n\n  /** Interactive Radio group or non-interactive saved-value readout. */\n  @Prop({ reflect: true }) presentation: SettingRowRadioPresentation = 'edit';\n  /** Settings heading shown in both presentations. Not Radio's form groupLabel. */\n  @Prop() label?: string;\n  /** Saved option label shown in view presentation. */\n  @Prop() valueLabel?: string;\n  /** Optional consequence or supporting copy for the saved option. */\n  @Prop() description?: string;\n  /** Skeletonize the row copy without changing the saved choice or edit presentation. */\n  @Prop() isLoading: boolean = false;\n\n  private readonly headingId = `ds-setting-row-radio-heading-${++settingRowRadioHeadingId}`;\n\n  componentWillLoad() {\n    this.syncSlottedRadio();\n  }\n\n  componentDidLoad() {\n    this.syncSlottedRadio();\n  }\n\n  private syncSlottedRadio = () => {\n    for (const radio of this.el.querySelectorAll<SettingsRadio>('ds-radio')) {\n      radio.groupLabel = '';\n      if (this.label) {\n        radio.ariaLabelledby = this.headingId;\n        radio.ariaLabel = null;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host aria-busy={this.isLoading ? 'true' : undefined}>\n        <ds-skeleton\n          preserveLayout\n          isLoading={this.isLoading}\n          textVariant={CONTROL_TEXT_VARIANT.md}\n        >\n          <ds-text\n            key=\"setting-row-radio-heading\"\n            class=\"setting-row-radio__heading\"\n            as=\"span\"\n            variant={CONTROL_TEXT_VARIANT.md}\n            emphasis\n            textId={this.label ? this.headingId : undefined}\n          >\n            {this.label}\n          </ds-text>\n        </ds-skeleton>\n        <div key=\"setting-row-radio-choice\" class=\"setting-row-radio__choice\">\n          {this.valueLabel ? (\n            <ds-skeleton\n              preserveLayout\n              isLoading={this.isLoading}\n              textVariant={CONTROL_TEXT_VARIANT.md}\n            >\n              <ds-text key=\"setting-row-radio-value\" as=\"span\" variant={CONTROL_TEXT_VARIANT.md}>\n                {this.valueLabel}\n              </ds-text>\n            </ds-skeleton>\n          ) : null}\n          {this.description ? (\n            <ds-skeleton\n              preserveLayout\n              isLoading={this.isLoading}\n              textVariant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n            >\n              <ds-text\n                key=\"setting-row-radio-description\"\n                as=\"span\"\n                variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n                color=\"secondary\"\n              >\n                {this.description}\n              </ds-text>\n            </ds-skeleton>\n          ) : null}\n        </div>\n        <slot onSlotchange={this.syncSlottedRadio} />\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/setting-row-toggle.json

@@ -34,7 +34,8 @@
         "The application accepts or rejects change requests by updating the controlled checked value and owns persistence and errors.",
         "Name the enabled setting consistently; the label must not change when the switch is toggled.",
         "Non-emphasis rows without supporting copy use ds-text color secondary (foreground-secondary) on the title. Non-emphasis rows with description keep a primary title.",
-        "Supporting copy is text-body-small in every variant."
+        "Supporting copy is text-body-small in every variant.",
+        "isLoading preserves the copy wrapping and switch footprint, replaces them with skeletons, and prevents value changes."
       ],
       "responsiveBehavior": [
         "The copy wraps while the switch keeps its natural size in the trailing column, including at narrow widths."
@@ -88,6 +89,15 @@
           "mutable": false,
           "description": "Prevent changes while the setting is unavailable."
         },
+        "isLoading": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-loading",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Preserve the real row geometry while replacing copy and switch with skeletons."
+        },
         "label": {
           "type": "string",
           "resolvedType": "string",
@@ -146,6 +156,15 @@
         "mutable": false,
         "description": "Prevent changes while the setting is unavailable."
       },
+      "isLoading": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-loading",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Preserve the real row geometry while replacing copy and switch with skeletons."
+      },
       "label": {
         "type": "string",
         "resolvedType": "string",
@@ -215,18 +234,19 @@
     "@ds-mo/tokens"
   ],
   "registryDependencies": [
+    "skeleton",
     "switch",
     "text"
   ],
   "files": [
     {
       "path": "src/wc/components/SettingRowToggle/SettingRowToggle.css",
-      "content": "@import '../../utils/settings-row.css';\n\n:host {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: start;\n  gap: var(--dimension-space-200);\n}\n\n.setting-row-toggle__copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n  overflow-wrap: anywhere;\n  -webkit-user-select: none;\n  user-select: none;\n}\n",
+      "content": "@import '../../utils/settings-row.css';\n\n:host {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: start;\n  gap: var(--dimension-space-200);\n}\n\n.setting-row-toggle__copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n  overflow-wrap: anywhere;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.setting-row-toggle__line,\n.setting-row-toggle__control {\n  display: grid;\n  min-width: 0;\n  align-items: center;\n}\n\n.setting-row-toggle__line > *,\n.setting-row-toggle__control > * {\n  grid-area: 1 / 1;\n}\n\n:host(.setting-row-toggle--loading) ds-text,\n:host(.setting-row-toggle--loading) ds-switch {\n  visibility: hidden;\n}\n\n.setting-row-toggle__control > ds-skeleton {\n  height: 100%;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/SettingRowToggle/SettingRowToggle.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { CONTROL_SUPPORTING_TEXT_VARIANT } from '../../utils';\n\nlet settingRowToggleSequence = 0;\n\nexport type SettingRowToggleVariant = 'emphasis' | 'non-emphasis';\n\n/** A labeled binary setting that applies immediately through its application owner. */\n@Component({\n  tag: 'ds-setting-row-toggle',\n  styleUrl: 'SettingRowToggle.css',\n  scoped: true,\n})\nexport class SettingRowToggle {\n  /** Name of the enabled setting. */\n  @Prop() label!: string;\n  /** Supporting copy explaining the setting and its alternative. */\n  @Prop() description?: string;\n  /** Controlled enabled state. */\n  @Prop() checked = false;\n  /** Prevent changes while the setting is unavailable. */\n  @Prop() disabled = false;\n  /** Typography recipe for the setting copy. */\n  @Prop() variant: SettingRowToggleVariant = 'emphasis';\n\n  /** Requests the next value; the application owns acceptance and persistence. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private readonly rowId = `ds-setting-row-toggle-${++settingRowToggleSequence}`;\n\n  private handleChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    // Keep the composed switch controlled until the owner accepts this request.\n    (event.target as HTMLDsSwitchElement).checked = this.checked;\n    this.dsChange.emit(event.detail);\n  };\n\n  render() {\n    const hasDescription = Boolean(this.description?.trim());\n    const titleColor = this.variant === 'non-emphasis' && !hasDescription ? 'secondary' : 'primary';\n\n    return (\n      <Host>\n        <div class=\"setting-row-toggle__copy\">\n          <ds-text\n            textId={`${this.rowId}-label`}\n            variant=\"text-body-medium\"\n            color={titleColor}\n            emphasis={this.variant === 'emphasis'}\n          >\n            {this.label}\n          </ds-text>\n          {hasDescription && (\n            <ds-text\n              textId={`${this.rowId}-description`}\n              variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n              color=\"secondary\"\n            >\n              {this.description}\n            </ds-text>\n          )}\n        </div>\n        <ds-switch\n          checked={this.checked}\n          disabled={this.disabled}\n          aria-labelledby={`${this.rowId}-label`}\n          aria-describedby={hasDescription ? `${this.rowId}-description` : undefined}\n          onDsChange={this.handleChange}\n        />\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { CONTROL_SUPPORTING_TEXT_VARIANT } from '../../utils';\n\nlet settingRowToggleSequence = 0;\n\nexport type SettingRowToggleVariant = 'emphasis' | 'non-emphasis';\n\n/** A labeled binary setting that applies immediately through its application owner. */\n@Component({\n  tag: 'ds-setting-row-toggle',\n  styleUrl: 'SettingRowToggle.css',\n  scoped: true,\n})\nexport class SettingRowToggle {\n  /** Name of the enabled setting. */\n  @Prop() label!: string;\n  /** Supporting copy explaining the setting and its alternative. */\n  @Prop() description?: string;\n  /** Controlled enabled state. */\n  @Prop() checked = false;\n  /** Prevent changes while the setting is unavailable. */\n  @Prop() disabled = false;\n  /** Preserve the real row geometry while replacing copy and switch with skeletons. */\n  @Prop() isLoading = false;\n  /** Typography recipe for the setting copy. */\n  @Prop() variant: SettingRowToggleVariant = 'emphasis';\n\n  /** Requests the next value; the application owns acceptance and persistence. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private readonly rowId = `ds-setting-row-toggle-${++settingRowToggleSequence}`;\n\n  private handleChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    // Keep the composed switch controlled until the owner accepts this request.\n    (event.target as HTMLDsSwitchElement).checked = this.checked;\n    if (!this.isLoading) this.dsChange.emit(event.detail);\n  };\n\n  render() {\n    const hasDescription = Boolean(this.description?.trim());\n    const titleColor = this.variant === 'non-emphasis' && !hasDescription ? 'secondary' : 'primary';\n\n    return (\n      <Host\n        aria-busy={this.isLoading ? 'true' : undefined}\n        class={{ 'setting-row-toggle--loading': this.isLoading }}\n      >\n        <div class=\"setting-row-toggle__copy\">\n          <div class=\"setting-row-toggle__line\">\n            <ds-text\n              textId={`${this.rowId}-label`}\n              variant=\"text-body-medium\"\n              color={titleColor}\n              emphasis={this.variant === 'emphasis'}\n            >\n              {this.label}\n            </ds-text>\n            {this.isLoading && <ds-skeleton width=\"75%\" />}\n          </div>\n          {hasDescription && (\n            <div class=\"setting-row-toggle__line\">\n              <ds-text\n                textId={`${this.rowId}-description`}\n                variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n                color=\"secondary\"\n              >\n                {this.description}\n              </ds-text>\n              {this.isLoading && (\n                <ds-skeleton width=\"95%\" textVariant={CONTROL_SUPPORTING_TEXT_VARIANT.md} />\n              )}\n            </div>\n          )}\n        </div>\n        <div class=\"setting-row-toggle__control\" inert={this.isLoading}>\n          <ds-switch\n            checked={this.checked}\n            disabled={this.disabled}\n            aria-labelledby={`${this.rowId}-label`}\n            aria-describedby={hasDescription ? `${this.rowId}-description` : undefined}\n            onDsChange={this.handleChange}\n          />\n          {this.isLoading && <ds-skeleton variant=\"control\" width=\"100%\" rounded={true} />}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/shell-app.json

@@ -105,7 +105,8 @@
         "Managed page-header capacity follows only the fixed shell breakpoint: roomy on desktop and compact on tablet. Opening PanelTools does not compact or constrain BarTitle.",
         "Mobile keeps at most the first eligible ordered icon command visible and moves labeled buttons, menu choices, split actions, and explicit overflow commands into one shell-owned text-only page-actions menu.",
         "The bottom bar remains visible at all route and tool depths in the foundation release.",
-        "A mobile shell banner paints a fixed top edge with its resolved background through exit motion. Color variants and theme changes follow the banner automatically; native Safari status-area tint remains a device-verified browser behavior."
+        "A mobile shell banner paints a fixed top edge with its resolved background through exit motion. Color variants and theme changes follow the banner automatically; native Safari status-area tint remains a device-verified browser behavior.",
+        "The routed content lane owns a size-query container. Full-height page compositions consume --ds-shell-content-block-size and subtract their page-local header; banners and desktop or mobile navigation resize that lane automatically."
       ],
       "frameworkCaveats": {
         "customElements": [
@@ -721,7 +722,7 @@
   "files": [
     {
       "path": "src/wc/components/ShellApp/ShellApp.css",
-      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  font-family: var(--typography-font-family-ui, system-ui);\n  --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n  --ds-shell-gradient-context: flat;\n}\n\n:host {\n  /* Shared solid Chrome base; gradient and paper layers composite above it. */\n  --_shell-chrome-bg: var(--color-chrome-background-theme);\n}\n\n:host(.shell-app--gradient) {\n  --ds-shell-gradient-context: gradient;\n}\n\n.shell-app__row {\n  display: flex;\n  flex: 1 1 0;\n  min-height: 0;\n  position: relative;\n}\n\n.shell-app__banner {\n  --_shell-banner-edge-display: none;\n  flex: 0 0 auto;\n  min-width: 0;\n  position: relative;\n  z-index: 5;\n}\n\n.shell-app__banner ::slotted(ds-banner) {\n  display: grid;\n  width: 100%;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.shell-app__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  overflow: hidden;\n  background-color: var(--_shell-chrome-bg);\n}\n\n:host(.shell-app--gradient) .shell-app__chrome::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n.shell-app__paper-texture {\n  z-index: 2;\n}\n\n.shell-app__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.shell-app__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__panel > ds-panel-nav {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-areas:\n    'bar tools'\n    'content tools';\n  position: relative;\n  z-index: 1;\n}\n\n.shell-app__mobile-sheet-nav,\n.shell-app__mobile-bar-nav {\n  display: none;\n}\n\n.shell-app__bar {\n  grid-area: bar;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.shell-app__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.shell-app__bar ::slotted(ds-bar-title),\n.shell-app__bar ::slotted(ds-bar-page-title) {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-nav {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-title,\n.shell-app__bar > ds-bar-page-title {\n  display: block;\n}\n\n.shell-app__content {\n  grid-area: content;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n  contain: layout;\n}\n\n/* Layout scroller, not a control: keep it keyboard-focusable without a page-sized ring. */\n.shell-app__content:focus,\n.shell-app__content:focus-visible {\n  outline: none;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.shell-app__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.shell-app__tools {\n  grid-area: tools;\n  flex: 0 0 auto;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  overflow: hidden;\n  /* Chrome surface context inherited by PanelTools and its slotted products. */\n  --_shell-tools-border: var(--color-chrome-border-tertiary);\n  --_shell-tools-border-secondary: var(--color-chrome-border-secondary);\n  --_shell-tools-divider: var(--color-chrome-divider);\n  --_shell-tools-background-theme: var(--color-chrome-background-theme);\n  --_shell-tools-fg-primary: var(--color-chrome-foreground-primary);\n  --_shell-tools-fg-secondary: var(--color-chrome-foreground-secondary);\n}\n\n.shell-app__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools ::slotted(ds-shell-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools > ds-shell-tools {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tool-slot-proxy {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.shell-app__content > ds-shell-page {\n  display: block;\n  min-height: 100%;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__row {\n  /* Anchor fixed fullscreen tools to the available stage below the banner. */\n  contain: layout;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__main {\n  /* Above panel chrome while remaining below the global banner layer. */\n  z-index: 3;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__tools {\n  /* Fullscreen tools must outrank retained page-owned overlays in content. */\n  z-index: 2;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__panel,\n:host(.shell-app--tools-fullscreen) .shell-app__bar,\n:host(.shell-app--tools-fullscreen) .shell-app__content {\n  visibility: hidden;\n  /* Descendants can override visibility, but must not paint through tools. */\n  content-visibility: hidden;\n}\n\n:host(.shell-app--mobile) {\n  --_shell-chrome-bg: var(--color-background-primary);\n  padding-block-start: env(safe-area-inset-top);\n  background: var(--ds-shell-safe-area-background, var(--color-background-primary));\n}\n\n:host(.shell-app--mobile) .shell-app__banner {\n  --_shell-banner-edge-display: block;\n}\n\n/* Refresh the Mobile WebKit stage layer without remounting app content. */\n:host(.shell-app--mobile.shell-app--foreground-refresh) .shell-app__main {\n  transform: translateZ(0);\n}\n\n:host(.shell-app--mobile) .shell-app__chrome,\n:host(.shell-app--mobile) .shell-app__panel,\n:host(.shell-app--mobile) .shell-app__bar {\n  display: none;\n}\n\n:host(.shell-app--mobile) .shell-app__main {\n  width: 100%;\n  box-sizing: border-box;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'stage'\n    'mobile-bar-nav';\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__content,\n:host(.shell-app--mobile) .shell-app__tools,\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  grid-area: stage;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n:host(.shell-app--mobile) .shell-app__content {\n  z-index: 1;\n  overflow: auto;\n}\n\n:host(.shell-app--mobile) .shell-app__tools {\n  z-index: 2;\n  width: 100%;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  display: block;\n  z-index: 3;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav {\n  grid-area: mobile-bar-nav;\n  display: block;\n  min-width: 0;\n  position: relative;\n  z-index: 4;\n}\n\n:host(.shell-app--mobile) .shell-app__tools[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav[hidden] {\n  display: none;\n}\n\n:host(.shell-app--mobile-tool-active) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__tools {\n  visibility: hidden;\n}\n",
+      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  font-family: var(--typography-font-family-ui, system-ui);\n  --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n  --ds-shell-gradient-context: flat;\n}\n\n:host {\n  /* Shared solid Chrome base; gradient and paper layers composite above it. */\n  --_shell-chrome-bg: var(--color-chrome-background-theme);\n}\n\n:host(.shell-app--gradient) {\n  --ds-shell-gradient-context: gradient;\n}\n\n.shell-app__row {\n  display: flex;\n  flex: 1 1 0;\n  min-height: 0;\n  position: relative;\n}\n\n.shell-app__banner {\n  --_shell-banner-edge-display: none;\n  flex: 0 0 auto;\n  min-width: 0;\n  position: relative;\n  z-index: 5;\n}\n\n.shell-app__banner ::slotted(ds-banner) {\n  display: grid;\n  width: 100%;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.shell-app__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  overflow: hidden;\n  background-color: var(--_shell-chrome-bg);\n}\n\n:host(.shell-app--gradient) .shell-app__chrome::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n.shell-app__paper-texture {\n  z-index: 2;\n}\n\n.shell-app__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.shell-app__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__panel > ds-panel-nav {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-areas:\n    'bar tools'\n    'content tools';\n  position: relative;\n  z-index: 1;\n}\n\n.shell-app__mobile-sheet-nav,\n.shell-app__mobile-bar-nav {\n  display: none;\n}\n\n.shell-app__bar {\n  grid-area: bar;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.shell-app__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.shell-app__bar ::slotted(ds-bar-title),\n.shell-app__bar ::slotted(ds-bar-page-title) {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-nav {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-title,\n.shell-app__bar > ds-bar-page-title {\n  display: block;\n}\n\n.shell-app__content {\n  grid-area: content;\n  /* Full-height pages use this lane, including banner and mobile navigation reflow. */\n  container-type: size;\n  container-name: ds-shell-content;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n  contain: layout;\n}\n\n/* Layout scroller, not a control: keep it keyboard-focusable without a page-sized ring. */\n.shell-app__content:focus,\n.shell-app__content:focus-visible {\n  outline: none;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.shell-app__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.shell-app__tools {\n  grid-area: tools;\n  flex: 0 0 auto;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  overflow: hidden;\n  /* Chrome surface context inherited by PanelTools and its slotted products. */\n  --_shell-tools-border: var(--color-chrome-border-tertiary);\n  --_shell-tools-border-secondary: var(--color-chrome-border-secondary);\n  --_shell-tools-divider: var(--color-chrome-divider);\n  --_shell-tools-background-theme: var(--color-chrome-background-theme);\n  --_shell-tools-fg-primary: var(--color-chrome-foreground-primary);\n  --_shell-tools-fg-secondary: var(--color-chrome-foreground-secondary);\n}\n\n.shell-app__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools ::slotted(ds-shell-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools > ds-shell-tools {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tool-slot-proxy {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.shell-app__content > ds-shell-page {\n  --ds-shell-content-block-size: 100cqh;\n  display: block;\n  min-height: 100%;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__row {\n  /* Anchor fixed fullscreen tools to the available stage below the banner. */\n  contain: layout;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__main {\n  /* Above panel chrome while remaining below the global banner layer. */\n  z-index: 3;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__tools {\n  /* Fullscreen tools must outrank retained page-owned overlays in content. */\n  z-index: 2;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__panel,\n:host(.shell-app--tools-fullscreen) .shell-app__bar,\n:host(.shell-app--tools-fullscreen) .shell-app__content {\n  visibility: hidden;\n  /* Descendants can override visibility, but must not paint through tools. */\n  content-visibility: hidden;\n}\n\n:host(.shell-app--mobile) {\n  --_shell-chrome-bg: var(--color-background-primary);\n  padding-block-start: env(safe-area-inset-top);\n  background: var(--ds-shell-safe-area-background, var(--color-background-primary));\n}\n\n:host(.shell-app--mobile) .shell-app__banner {\n  --_shell-banner-edge-display: block;\n}\n\n/* Refresh the Mobile WebKit stage layer without remounting app content. */\n:host(.shell-app--mobile.shell-app--foreground-refresh) .shell-app__main {\n  transform: translateZ(0);\n}\n\n:host(.shell-app--mobile) .shell-app__chrome,\n:host(.shell-app--mobile) .shell-app__panel,\n:host(.shell-app--mobile) .shell-app__bar {\n  display: none;\n}\n\n:host(.shell-app--mobile) .shell-app__main {\n  width: 100%;\n  box-sizing: border-box;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'stage'\n    'mobile-bar-nav';\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__content,\n:host(.shell-app--mobile) .shell-app__tools,\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  grid-area: stage;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n:host(.shell-app--mobile) .shell-app__content {\n  z-index: 1;\n  overflow: auto;\n}\n\n:host(.shell-app--mobile) .shell-app__tools {\n  z-index: 2;\n  width: 100%;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  display: block;\n  z-index: 3;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav {\n  grid-area: mobile-bar-nav;\n  display: block;\n  min-width: 0;\n  position: relative;\n  z-index: 4;\n}\n\n:host(.shell-app--mobile) .shell-app__tools[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav[hidden] {\n  display: none;\n}\n\n:host(.shell-app--mobile-tool-active) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__tools {\n  visibility: hidden;\n}\n",
       "type": "registry:ui"
     },
     {