@capillaryjs/capillary-ui 1.2.0 → 1.3.0

package/styles/structural.css

@@ -30,6 +30,7 @@
             align-items: stretch;
             min-inline-size: 0;
             min-block-size: 0;
+            gap: calc(var(--_cap-island-flow, 0) * var(--island-gap, 0px));
         }
 
         .cap-layout-horizontal {
@@ -51,11 +52,55 @@
         }
 
         .cap-scroll {
+            /* Move the clip into the surrounding gutter without moving the
+             * content. The inherited allowance is owned by the parent layout,
+             * so local gaps and nested scrollports do not add extra spacing. */
+            --_cap-scroll-gutter: calc(var(--_cap-island-flow, 0) * var(--_cap-island-gutter, 0px));
+            margin: calc(-1 * var(--_cap-scroll-gutter));
+            padding: var(--_cap-scroll-gutter);
             overflow: auto;
             min-inline-size: 0;
             min-block-size: 0;
         }
 
+        /* The mode crosses wrappers; each layout resolves its own public gap.
+         * Only the first enabled scope contributes a perimeter inset. */
+        .cap-island-layout {
+            --_cap-island-flow: 1;
+            --_cap-island-margin: 0px;
+            --_cap-island-separator-background: transparent;
+            box-sizing: border-box;
+            padding: var(--_cap-island-outer-inset, var(--island-inset, 0px));
+            gap: calc(var(--_cap-island-flow, 0) * var(--island-gap, 0px));
+        }
+
+        .cap-island-layout > * {
+            --_cap-island-outer-inset: 0px;
+        }
+
+        .cap-layout-horizontal > *,
+        .cap-layout-vertical > *,
+        .cap-island-layout > * {
+            --_cap-island-gutter: calc(var(--_cap-island-flow, 0) * var(--island-gap, 0px) / 2);
+        }
+
+        .cap-island-layout.cap-scroll {
+            padding: calc(var(--_cap-island-outer-inset, var(--island-inset, 0px))
+                + var(--_cap-scroll-gutter));
+        }
+
+        .cap-island-layout-off {
+            --_cap-island-flow: 0;
+            --_cap-island-margin: initial;
+            --_cap-island-separator-background: initial;
+        }
+
+        .cap-island-layout-off > *,
+        .island > * {
+            --_cap-island-outer-inset: initial;
+            --_cap-island-gutter: 0px;
+        }
+
         .colored {
             --colored-base-bg:
                     linear-gradient(
@@ -73,10 +118,12 @@
 
         .app-footer.island,
         .island {
+            --_cap-island-flow: 0;
+            --_cap-island-separator-background: initial;
             box-sizing: border-box;
             min-width: 0;
             min-height: 0;
-            margin: var(--island-margin);
+            margin: var(--_cap-island-margin, var(--island-margin));
             padding: var(--island-padding);
             background: var(--island-background);
             border: var(--island-border);
@@ -86,13 +133,13 @@
 
         .cap-fill-horizontal.island,
         .cap-fill-horizontal .island {
-            max-width: calc(100% - (2 * var(--island-margin)));
+            max-width: calc(100% - (2 * var(--_cap-island-margin, var(--island-margin))));
             overflow-x: auto;
         }
 
         .cap-fill-vertical.island,
         .cap-fill-vertical .island {
-            max-height: calc(100% - (2 * var(--island-margin)));
+            max-height: calc(100% - (2 * var(--_cap-island-margin, var(--island-margin))));
             overflow-y: auto;
         }
 
@@ -144,17 +191,40 @@ cap-breadcrumb {
             font-weight: var(--breadcrumb-current-font-weight, 600);
         }
 
+cap-button,
+cap-checkbox,
+cap-dropdown,
+cap-datepicker,
+cap-datetimepicker,
+cap-progressbar,
+cap-quadcheckbox,
+cap-radiobutton,
+cap-textbox,
+cap-timepicker,
+cap-toggle,
+cap-tricheckbox {
+            --_cap-control-row-min: var(--_cap-control-compact-min,
+                max(var(--control-min-height, 2em), var(--control-row-min-height, 0px)));
+            min-height: calc(var(--_cap-control-row-min)
+                + 2 * var(--control-row-padding-block, .25em));
+            padding-block: var(--control-row-padding-block, .25em);
+            box-sizing: border-box;
+            font-family: inherit;
+            font-size: var(--ui-font-size);
+            line-height: 1.2;
+        }
+
 cap-button > button {
             display: inline-flex;
             align-items: center;
             justify-content: center;
             min-height: var(--control-min-height, 2em);
             margin: 0;
-            padding: 0 5px;
+            padding: var(--ui-control-padding);
             color: var(--button-color);
             background: var(--button-background);
             border: var(--button-border);
-            border-radius: var(--radius-md);
+            border-radius: var(--ui-border-radius);
             box-shadow: var(--button-shadow);
             box-sizing: border-box;
             cursor: default;
@@ -169,9 +239,6 @@ cap-button > button {
             flex-flow: row wrap;
             align-items: center;
             align-content: center;
-            font-family: inherit;
-            font-size: var(--ui-font-size);
-            line-height: 1.2;
         }
 
         cap-button > button:hover:not(:disabled, [aria-disabled="true"]) {
@@ -190,8 +257,8 @@ cap-button > button {
             box-shadow: var(--focus-ring);
         }
 
-        cap-button > button:disabled,
-        cap-button > button[aria-disabled="true"] {
+        cap-button > button:disabled:not([aria-busy="true"]),
+        cap-button > button[aria-disabled="true"]:not([aria-busy="true"]) {
             color: var(--input-color-disabled);
             background: var(--button-background-disabled);
             border-color: var(--button-border-disabled);
@@ -200,14 +267,17 @@ cap-button > button {
         }
 
         cap-button > button[aria-busy="true"]:not([aria-invalid="true"]) {
-            background: var(--working-background-image), var(--button-background-disabled);
+            /* Busy is unavailable for activation, but remains a normal button
+             * surface with the loading texture layered on top. */
+            background: var(--working-background-image), var(--button-background);
             background-repeat: repeat, no-repeat;
             background-size: 2rem 2rem, 100% 100%;
             animation: cap-working-progress .55s linear infinite;
         }
 
         cap-button > button[aria-invalid="true"] {
-            border-color: var(--error-color);
+            border-color: var(--error-control-border);
+            box-shadow: var(--error-control-shadow);
         }
 
         @media (prefers-reduced-motion: reduce) {
@@ -226,8 +296,8 @@ cap-button > button {
 cap-error {
             position: absolute;
             z-index: 1200;
-            inset-block-start: -.35em;
-            inset-inline-end: -.35em;
+            inset-block-start: -.5rem;
+            inset-inline-end: -.5rem;
             display: block;
             width: 1.25em;
             height: 1.25em;
@@ -241,18 +311,20 @@ cap-error {
 
         cap-error > cap-erroricon {
             position: absolute;
-            inset: 0;
-            display: grid;
-            width: 1.25em;
-            height: 1.25em;
+            display: flex;
+            width: 1rem;
+            height: 1rem;
+            font-size: .9rem;
             color: var(--error-contrast);
             background: var(--error-color);
-            border: 1px solid var(--error-color);
+            border: var(--error-icon-border);
             border-radius: 50%;
+            box-shadow: var(--error-icon-shadow);
             box-sizing: border-box;
-            font-weight: 700;
-            line-height: 1;
-            place-items: center;
+            font-weight: bold;
+            justify-content: center;
+            align-items: center;
+
         }
 
         cap-error > cap-erroricon::before {
@@ -271,8 +343,8 @@ cap-error {
             padding: var(--space-xs) var(--space-sm);
             color: var(--ui-color);
             background: var(--error-bg-neutral, var(--application-background));
-            border: 1px solid var(--error-color);
-            border-radius: var(--radius-md);
+            border: 1px solid var(--error-control-border);
+            border-radius: var(--ui-border-radius);
             box-shadow: var(--ui-shadow);
             opacity: 0;
             overflow-wrap: anywhere;
@@ -319,9 +391,14 @@ cap-tricheckbox {
             flex-flow: row wrap;
             align-items: center;
             align-content: center;
-            font-family: inherit;
-            font-size: var(--ui-font-size);
-            line-height: 1.2;
+            --_cap-checkable-label-color: var(--ui-text-color);
+            --_cap-checkable-cursor: pointer;
+            --_cap-checkable-box-background: var(--checkbox-box-background,
+                var(--ui-input-bg, transparent));
+            --_cap-checkable-box-border: var(--checkbox-box-border,
+                var(--cbx-o-border, 1px solid currentColor));
+            --_cap-checkable-box-shadow: var(--checkbox-box-shadow);
+            --_cap-checkable-box-filter: none;
         }
 
         cap-checkbox > label,
@@ -331,14 +408,14 @@ cap-tricheckbox {
             display: flex;
             flex-flow: row nowrap;
             position: relative;
-            min-height: 1.2em;
+            min-height: var(--_cap-control-row-min);
             margin: 0;
-            color: var(--ui-text-color);
+            color: var(--_cap-checkable-label-color);
             border-radius: var(--ui-border-radius);
             box-sizing: border-box;
             align-items: center;
             gap: .3em;
-            cursor: pointer;
+            cursor: var(--_cap-checkable-cursor);
             user-select: none;
         }
 
@@ -350,6 +427,18 @@ cap-tricheckbox {
             cursor: not-allowed;
         }
 
+        cap-checkbox > label:has(> input[aria-readonly="true"]:not(:disabled)),
+        cap-quadcheckbox > label:has(> input[aria-readonly="true"]:not(:disabled)),
+        cap-radiobutton > label:has(> input[aria-readonly="true"]:not(:disabled)),
+        cap-tricheckbox > label:has(> input[aria-readonly="true"]:not(:disabled)) {
+            --_cap-checkable-label-color: var(--checkable-label-color-readonly);
+            --_cap-checkable-cursor: default;
+            --_cap-checkable-box-background: var(--checkbox-box-background-readonly);
+            --_cap-checkable-box-border: var(--checkbox-box-border-readonly);
+            --_cap-checkable-box-shadow: var(--checkbox-box-shadow-readonly);
+            --_cap-checkable-box-filter: saturate(.78);
+        }
+
         cap-checkbox > label > input,
         cap-quadcheckbox > label > input,
         cap-radiobutton > label > input,
@@ -372,22 +461,25 @@ cap-tricheckbox {
         cap-radiobutton > label > input + cap-checkshell,
         cap-tricheckbox > label > input + cap-checkshell {
             position: relative;
-            display: grid;
-            width: 1em;
-            height: 1em;
-            flex: 0 0 1em;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: var(--checkbox-box-size, 1em);
+            height: var(--checkbox-box-size, 1em);
+            flex: 0 0 var(--checkbox-box-size, 1em);
             box-sizing: border-box;
             text-align: center;
             line-height: 1;
             color: var(--input-color, var(--ui-text-color, currentColor));
-            background: var(--checkbox-box-background, var(--ui-input-bg, transparent));
-            border: var(--checkbox-box-border, var(--cbx-o-border, 1px solid currentColor));
-            border-radius: var(--cbx-border-radius, var(--radius-sm, 0.2rem));
-            box-shadow: var(--checkbox-box-shadow);
+            background: var(--_cap-checkable-box-background);
+            border: var(--_cap-checkable-box-border);
+            border-radius: var(--checkbox-box-radius,
+                var(--cbx-border-radius, var(--radius-sm, 0.2rem)));
+            box-shadow: var(--_cap-checkable-box-shadow);
+            filter: var(--_cap-checkable-box-filter);
             font-family: inherit;
             font-size: 1em;
             user-select: none;
-            place-items: center;
         }
 
         cap-checkbox > label > input:checked + cap-checkshell,
@@ -397,9 +489,58 @@ cap-tricheckbox {
             color: var(--checkbox-symbol-color, var(--selection-color, currentColor));
             background: var(--checkbox-box-background-checked,
                 var(--selection-background, var(--ui-accent-color, Highlight)));
+            border: var(--checkbox-box-border-checked, var(--checkbox-box-border,
+                var(--cbx-o-border, 1px solid currentColor)));
             box-shadow: var(--checkbox-box-shadow-checked);
         }
 
+
+
+cap-checkbox > label:has(> input:required:invalid:not(:disabled):not([aria-invalid="true"]))::before,
+cap-quadcheckbox > label:has(> input:required:invalid:not(:disabled):not([aria-invalid="true"]))::before,
+cap-radiobutton > label:has(> input:required:invalid:not(:disabled):not([aria-invalid="true"]))::before,
+cap-tricheckbox > label:has(> input:required:invalid:not(:disabled):not([aria-invalid="true"]))::before {
+    content: "";
+    position: absolute;
+    z-index: 0;
+    inset-block: -4px;
+    inset-inline-start: -4px;
+    inset-inline-end: calc(-4px - 1em);
+    border: 1px dashed var(--required-color);
+    border-radius: inherit;
+    pointer-events: none;
+}
+
+
+cap-checkbox > label:has(> input:required:invalid:not(:disabled):not([aria-invalid="true"]))::after,
+cap-quadcheckbox > label:has(> input:required:invalid:not(:disabled):not([aria-invalid="true"]))::after,
+cap-radiobutton > label:has(> input:required:invalid:not(:disabled):not([aria-invalid="true"]))::after,
+cap-tricheckbox > label:has(> input:required:invalid:not(:disabled):not([aria-invalid="true"]))::after {
+    content: "✲";
+    position: absolute;
+    z-index: 1;
+    inset-block-start: -.5em;
+    inset-inline-end: -1em;
+    display: flex;
+    inline-size: 1rem;
+    block-size: 1rem;
+    align-items: center;
+    justify-content: center;
+    color: var(--required-indicator-color);
+    background: var(--required-indicator-background);
+    font-size: .75rem;
+    font-weight: 700;
+    line-height: 1;
+    pointer-events: none;
+}
+
+        cap-checkbox > label:has(> input[aria-invalid="true"]),
+        cap-quadcheckbox > label:has(> input[aria-invalid="true"]),
+        cap-radiobutton > label:has(> input[aria-invalid="true"]),
+        cap-tricheckbox > label:has(> input[aria-invalid="true"]) {
+            box-shadow: var(--error-control-shadow);
+        }
+
         cap-checkbox > label > input:focus-visible + cap-checkshell,
         cap-quadcheckbox > label > input:focus-visible + cap-checkshell,
         cap-radiobutton > label > input:focus-visible + cap-checkshell,
@@ -427,18 +568,12 @@ cap-tricheckbox {
             animation: cap-working-progress .55s linear infinite;
         }
 
-        cap-checkbox > label:has(> input[aria-invalid="true"]),
-        cap-quadcheckbox > label:has(> input[aria-invalid="true"]),
-        cap-radiobutton > label:has(> input[aria-invalid="true"]),
-        cap-tricheckbox > label:has(> input[aria-invalid="true"]) {
-            color: var(--error-color);
-        }
-
         cap-checkbox > label > input[aria-invalid="true"] + cap-checkshell,
         cap-quadcheckbox > label > input[aria-invalid="true"] + cap-checkshell,
         cap-radiobutton > label > input[aria-invalid="true"] + cap-checkshell,
         cap-tricheckbox > label > input[aria-invalid="true"] + cap-checkshell {
-            border-color: var(--error-color);
+            border-color: var(--error-control-border);
+            box-shadow: none;
         }
 
         @media (prefers-reduced-motion: reduce) {
@@ -451,31 +586,15 @@ cap-tricheckbox {
         }
 
         @media (forced-colors: active) {
-            cap-checkbox > label > input[aria-invalid="true"] + cap-checkshell,
-            cap-quadcheckbox > label > input[aria-invalid="true"] + cap-checkshell,
-            cap-radiobutton > label > input[aria-invalid="true"] + cap-checkshell,
-            cap-tricheckbox > label > input[aria-invalid="true"] + cap-checkshell {
+            cap-checkbox > label:has(> input[aria-invalid="true"]),
+            cap-quadcheckbox > label:has(> input[aria-invalid="true"]),
+            cap-radiobutton > label:has(> input[aria-invalid="true"]),
+            cap-tricheckbox > label:has(> input[aria-invalid="true"]) {
                 outline: 2px solid Mark;
                 outline-offset: 1px;
             }
         }
 
-cap-checkbox > label > input[value="require"] + cap-checkshell,
-cap-quadcheckbox > label > input[value="require"] + cap-checkshell,
-cap-tricheckbox > label > input[value="require"] + cap-checkshell {
-            color: var(--palette-contrast-light);
-            background: var(--palette-green);
-            box-shadow: var(--checkbox-box-shadow-checked);
-        }
-
-        cap-checkbox > label > input[value="deny"] + cap-checkshell,
-        cap-quadcheckbox > label > input[value="deny"] + cap-checkshell,
-        cap-tricheckbox > label > input[value="deny"] + cap-checkshell {
-            color: var(--palette-contrast-light);
-            background: var(--palette-red);
-            box-shadow: var(--checkbox-box-shadow-checked);
-        }
-
 cap-dropdown,
 cap-datepicker,
 cap-datetimepicker,
@@ -487,15 +606,40 @@ cap-toggle {
             position: relative;
             align-items: center;
             gap: .5em;
-            min-height: var(--control-min-height, 2em);
             color: var(--ui-text-color);
-            font-family: inherit;
-            font-size: var(--ui-font-size);
-            line-height: 1.2;
-            box-sizing: border-box;
             user-select: none;
         }
 
+        /* GroupBox owns the ordinary body layout. Labeled controls fill its
+           direct body so their label/control row keeps labels left and native
+           input surfaces right; an explicitly nested Layout remains supported
+           for non-standard arrangements. */
+        cap-groupbox > cap-content > cap-dropdown,
+        /* GroupBox owns the ordinary body layout. Labeled controls fill its
+           direct body so their label/control row keeps labels left and native
+           input surfaces right; an explicitly nested Layout remains supported
+           for non-standard arrangements. */
+        cap-groupbox > cap-content > cap-datepicker,
+        /* GroupBox owns the ordinary body layout. Labeled controls fill its
+           direct body so their label/control row keeps labels left and native
+           input surfaces right; an explicitly nested Layout remains supported
+           for non-standard arrangements. */
+        cap-groupbox > cap-content > cap-datetimepicker,
+        /* GroupBox owns the ordinary body layout. Labeled controls fill its
+           direct body so their label/control row keeps labels left and native
+           input surfaces right; an explicitly nested Layout remains supported
+           for non-standard arrangements. */
+        cap-groupbox > cap-content > cap-textbox,
+        /* GroupBox owns the ordinary body layout. Labeled controls fill its
+           direct body so their label/control row keeps labels left and native
+           input surfaces right; an explicitly nested Layout remains supported
+           for non-standard arrangements. */
+        cap-groupbox > cap-content > cap-timepicker,
+        /* GroupBox owns the ordinary body layout. Labeled controls fill its
+           direct body so their label/control row keeps labels left and native
+           input surfaces right; an explicitly nested Layout remains supported
+           for non-standard arrangements. */
+        cap-groupbox > cap-content > cap-toggle,
         cap-groupbox > cap-content > cap-layout > cap-dropdown,
         cap-groupbox > cap-content > cap-layout > cap-datepicker,
         cap-groupbox > cap-content > cap-layout > cap-datetimepicker,
@@ -547,12 +691,12 @@ cap-dropdown {
             max-width: 100%;
             min-width: var(--input-min-width, 6rem);
             margin: 0;
-            padding: 0 5px;
+            padding: var(--ui-control-padding);
             padding-inline-end: var(--dropdown-padding-inline-end);
             color: var(--input-color);
             background: var(--dropdown-select-background);
             border: var(--dropdown-select-border);
-            border-radius: var(--radius-md);
+            border-radius: var(--ui-border-radius);
             box-shadow: var(--dropdown-select-shadow);
             box-sizing: border-box;
             font: inherit;
@@ -562,6 +706,11 @@ cap-dropdown {
             white-space: nowrap;
         }
 
+        cap-dropdown > cap-selectshell > select[aria-readonly="true"]:not(:disabled) {
+            color: var(--input-color-readonly);
+            cursor: default;
+        }
+
         cap-dropdown > cap-selectshell::after {
             content: var(--dropdown-underlay-content);
             position: absolute;
@@ -583,9 +732,10 @@ cap-dropdown {
             z-index: 2;
             inset-block: 0;
             inset-inline-end: 0;
-            display: grid;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             inline-size: var(--dropdown-trigger-width);
-            place-items: center;
             color: var(--dropdown-trigger-color);
             background: var(--dropdown-trigger-background);
             border: var(--dropdown-trigger-border);
@@ -597,7 +747,7 @@ cap-dropdown {
             pointer-events: none;
         }
 
-        cap-dropdown > cap-selectshell:has(> select:hover:not(:disabled))::before {
+        cap-dropdown > cap-selectshell:has(> select:hover:not(:disabled):not([aria-readonly="true"]))::before {
             background: var(--dropdown-trigger-background-hover);
             box-shadow: var(--dropdown-trigger-shadow-hover);
         }
@@ -613,6 +763,46 @@ cap-dropdown {
             border: var(--dropdown-underlay-border-disabled);
         }
 
+        cap-dropdown > cap-selectshell:has(> select[aria-readonly="true"]:not(:disabled))::before {
+            color: var(--dropdown-trigger-color-readonly);
+            background: var(--dropdown-trigger-background-readonly);
+            border: var(--dropdown-trigger-border-readonly);
+            box-shadow: var(--dropdown-trigger-shadow-readonly);
+        }
+
+        cap-dropdown > cap-selectshell:has(> select[aria-readonly="true"]:not(:disabled))::after {
+            background: var(--dropdown-underlay-background-readonly);
+            border: var(--dropdown-underlay-border-readonly);
+            box-shadow: var(--dropdown-underlay-shadow-readonly);
+        }
+
+
+
+cap-dropdown > cap-selectshell:has(> select:required:invalid:not(:disabled):not([aria-invalid="true"])) {
+    outline: 1px dashed var(--required-color);
+    outline-offset: 3px;
+}
+
+
+cap-dropdown:has(> cap-selectshell > select:required:invalid:not(:disabled):not([aria-invalid="true"]))::after {
+    content: "✲";
+    position: absolute;
+    z-index: 3;
+    inset-block-start: max(calc(var(--control-row-padding-block, .25em) + .15em), .3em);
+    inset-inline-end: calc(var(--dropdown-trigger-width) + .5em);
+    display: flex;
+    inline-size: 1rem;
+    block-size: 1rem;
+    align-items: center;
+    justify-content: center;
+    color: var(--required-indicator-color);
+    background: var(--required-indicator-background);
+    font-size: .75rem;
+    font-weight: 700;
+    line-height: 1;
+    pointer-events: none;
+}
+
         cap-dropdown > cap-selectshell > select:focus-visible {
             outline: 2px solid transparent;
             outline-offset: 1px;
@@ -633,10 +823,21 @@ cap-dropdown {
             animation: cap-working-progress .55s linear infinite;
         }
 
+        cap-dropdown > cap-selectshell:has(> select[aria-readonly="true"][aria-busy="true"]:not([aria-invalid="true"]))::after {
+            background: var(--working-background-image), var(--dropdown-underlay-background-readonly);
+            background-repeat: repeat, no-repeat;
+            background-size: 2rem 2rem, 100% 100%;
+        }
+
         cap-dropdown > cap-selectshell:has(> select[aria-invalid="true"])::before,
         cap-dropdown > cap-selectshell:has(> select[aria-invalid="true"])::after,
         cap-dropdown > cap-selectshell > select[aria-invalid="true"] {
-            border-color: var(--error-color);
+            border-color: var(--error-control-border);
+        }
+
+        cap-dropdown > cap-selectshell:has(> select[aria-invalid="true"]) {
+            border-radius: var(--ui-border-radius);
+            box-shadow: var(--error-control-shadow);
         }
 
         @media (prefers-reduced-motion: reduce) {
@@ -682,6 +883,19 @@ cap-datatable {
             width: 100%;
         }
 
+        cap-datatable[data-cap-retained-loading]::after {
+            content: "";
+            position: absolute;
+            z-index: 3;
+            inset: 0;
+            opacity: 0.33;
+            animation: cap-working-progress .55s linear infinite;
+            background-image: var(--working-background-image);
+            background-repeat: repeat;
+            background-size: 2rem 2rem;
+            pointer-events: none;
+        }
+
         cap-datatable thead:has([aria-expanded="true"]) {
             position: relative;
             z-index: 1100;
@@ -741,6 +955,16 @@ cap-datatable {
             cap-datatable:has(> cap-error) {
                 outline: 2px solid Mark;
             }
+
+            cap-datatable[data-cap-retained-loading]::after {
+                display: none;
+            }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            cap-datatable[data-cap-retained-loading]::after {
+                animation: none !important;
+            }
         }
 
 cap-placeholder {
@@ -862,11 +1086,13 @@ cap-datatable > table > thead > tr > th[aria-sort] {
 
 cap-filterpanel {
             position: absolute;
-            background: white;
-            border: 1px solid #ccc;
-            padding: 8px;
-            min-width: 180px;
-            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+            color: var(--filter-panel-color);
+            background: var(--filter-panel-background);
+            border: var(--filter-panel-border);
+            border-radius: var(--filter-panel-radius);
+            padding: var(--filter-panel-padding);
+            min-width: var(--filter-panel-min-width);
+            box-shadow: var(--filter-panel-shadow);
             z-index: 1000;
             display: flex;
             flex-flow: column nowrap;
@@ -926,11 +1152,11 @@ cap-timepicker {
             min-width: var(--input-min-width, 6rem);
             margin: 0;
             margin-left: auto;
-            padding: 0 5px;
+            padding: var(--ui-control-padding);
             color: var(--input-color);
             background: var(--input-background);
             border: var(--input-border);
-            border-radius: var(--radius-md);
+            border-radius: var(--ui-border-radius);
             box-shadow: var(--input-shadow);
             box-sizing: border-box;
             font: inherit;
@@ -938,16 +1164,54 @@ cap-timepicker {
 
         cap-datepicker > input:disabled,
         cap-datetimepicker > input:disabled,
-        cap-timepicker > input:disabled,
-        cap-datepicker > input[readonly],
-        cap-datetimepicker > input[readonly],
-        cap-timepicker > input[readonly] {
+        cap-timepicker > input:disabled {
             color: var(--input-color-disabled);
             background: var(--input-background-disabled);
             border-color: var(--ui-input-border-disabled);
             cursor: not-allowed;
         }
 
+        cap-datepicker > input[readonly]:not(:disabled),
+        cap-datetimepicker > input[readonly]:not(:disabled),
+        cap-timepicker > input[readonly]:not(:disabled) {
+            color: var(--input-color-readonly);
+            background: var(--input-background-readonly);
+            border: var(--input-border-readonly);
+            box-shadow: var(--input-shadow-readonly);
+            cursor: default;
+        }
+
+
+
+cap-datepicker > input:required:invalid:not(:disabled):not([readonly]):not([aria-invalid="true"]),
+cap-datetimepicker > input:required:invalid:not(:disabled):not([readonly]):not([aria-invalid="true"]),
+cap-timepicker > input:required:invalid:not(:disabled):not([readonly]):not([aria-invalid="true"]) {
+    outline: 1px dashed var(--required-color);
+    outline-offset: 3px;
+}
+
+
+cap-datepicker:has(> input:required:invalid:not(:disabled):not([readonly]):not([aria-invalid="true"]))::after,
+cap-datetimepicker:has(> input:required:invalid:not(:disabled):not([readonly]):not([aria-invalid="true"]))::after,
+cap-timepicker:has(> input:required:invalid:not(:disabled):not([readonly]):not([aria-invalid="true"]))::after {
+    content: "✲";
+    position: absolute;
+    z-index: 3;
+    inset-block-start: max(calc(var(--control-row-padding-block, .25em) + .15em), .3em);
+    inset-inline-end: .35em;
+    display: flex;
+    inline-size: 1rem;
+    block-size: 1rem;
+    align-items: center;
+    justify-content: center;
+    color: var(--required-indicator-color);
+    background: var(--required-indicator-background);
+    font-size: .75rem;
+    font-weight: 700;
+    line-height: 1;
+    pointer-events: none;
+}
+
         cap-datepicker > input:focus-visible,
         cap-datetimepicker > input:focus-visible,
         cap-timepicker > input:focus-visible {
@@ -973,10 +1237,19 @@ cap-timepicker {
             background-size: 2rem 2rem, 100% 100%;
         }
 
+        cap-datepicker > input[readonly]:not(:disabled)[aria-busy="true"]:not([aria-invalid="true"]),
+        cap-datetimepicker > input[readonly]:not(:disabled)[aria-busy="true"]:not([aria-invalid="true"]),
+        cap-timepicker > input[readonly]:not(:disabled)[aria-busy="true"]:not([aria-invalid="true"]) {
+            background: var(--working-background-image), var(--input-background-readonly);
+            background-repeat: repeat, no-repeat;
+            background-size: 2rem 2rem, 100% 100%;
+        }
+
         cap-datepicker > input[aria-invalid="true"],
         cap-datetimepicker > input[aria-invalid="true"],
         cap-timepicker > input[aria-invalid="true"] {
-            border-color: var(--error-color);
+            border-color: var(--error-control-border);
+            box-shadow: var(--error-control-shadow);
         }
 
         @media (prefers-reduced-motion: reduce) {
@@ -1002,7 +1275,8 @@ cap-descriptionlist {
         }
 
         cap-descriptionlist > dl {
-            display: grid;
+            display: flex;
+            flex-flow: column nowrap;
             margin: 0;
         }
 
@@ -1090,6 +1364,13 @@ cap-app {
             line-height: var(--line-height);
         }
 
+        /* A direct shell header delegates content spacing to its navbar,
+         * toolbar, and branding rows. Keep the inherited island token intact. */
+        cap-app > header.island,
+        cap-app > cap-header.island {
+            padding: 0;
+        }
+
 cap-groupbox,
 cap-optionsbox {
             display: flex;
@@ -1131,22 +1412,18 @@ cap-optionsbox {
 
         cap-groupbox > cap-content,
         cap-optionsbox > cap-content {
-            display: block;
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: flex-start;
+            align-content: flex-start;
+            align-items: flex-start;
+            gap: var(--groupbox-content-gap, .5rem);
             min-width: 0;
             min-height: 0;
             margin-left: var(--cap-groupbox-content-margin, .25em);
             flex: 1 1 auto;
         }
 
-        cap-groupbox > cap-content > cap-layout,
-        cap-optionsbox > cap-content > cap-layout {
-            gap: .5rem;
-            justify-content: flex-start;
-            align-content: flex-start;
-            justify-items: flex-start;
-            align-items: flex-start;
-        }
-
         /* Presentation contexts: each marker sets the complete context-sensitive
            property set, so the nearest marked ancestor wins through ordinary
            custom-property inheritance. Unmarked containers keep the control
@@ -1220,7 +1497,7 @@ cap-optionsbox {
             grid-column: 2;
             grid-row: 1;
             align-self: center;
-            border-block-start: 1px solid var(--ui-border-color);
+            border-block-start: var(--groupbox-section-separator);
         }
 
         cap-groupbox.cap-groupbox-section > cap-header,
@@ -1234,7 +1511,7 @@ cap-optionsbox {
             min-height: 0;
             padding: 0 0.5rem 0 0;
             border-radius: 0;
-            color: var(--text-color);
+            color: var(--groupbox-section-header-color);
             background: transparent;
             box-shadow: none;
             writing-mode: horizontal-tb;
@@ -1247,6 +1524,7 @@ cap-optionsbox {
         cap-optionsbox.cap-groupbox-section > cap-content {
             grid-column: 1 / -1;
             grid-row: 2;
+            flex-flow: row nowrap;
             margin-left: 0;
             padding-block: 0.75rem;
             min-width: 0;
@@ -1265,7 +1543,7 @@ cap-optionsbox {
             justify-self: stretch;
             align-self: stretch;
             border-block-start: 0;
-            border-inline-end: 1px solid var(--ui-border-color);
+            border-inline-end: var(--groupbox-section-separator);
         }
 
         .cap-layout-horizontal > cap-groupbox.cap-groupbox-section > cap-header,
@@ -1302,7 +1580,7 @@ cap-optionsbox {
             padding: 0;
             margin-block-end: 0.75rem;
             border-radius: 0;
-            color: var(--text-color);
+            color: var(--groupbox-column-header-color);
             background: transparent;
             box-shadow: none;
             writing-mode: horizontal-tb;
@@ -1316,6 +1594,34 @@ cap-optionsbox {
             margin-left: 0;
         }
 
+        /* A section's own content body is the ordinary horizontal column row.
+           Preserve the same stretch, edge padding, and separators formerly
+           provided when an application inserted a Layout just for that row. */
+        cap-groupbox.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column,
+        /* A section's own content body is the ordinary horizontal column row.
+           Preserve the same stretch, edge padding, and separators formerly
+           provided when an application inserted a Layout just for that row. */
+        cap-optionsbox.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column {
+            align-self: stretch;
+        }
+
+        cap-groupbox.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column
+            + cap-groupbox.cap-groupbox-column,
+        cap-optionsbox.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column
+            + cap-groupbox.cap-groupbox-column {
+            border-inline-start: var(--groupbox-column-separator);
+        }
+
+        cap-groupbox.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column:first-child,
+        cap-optionsbox.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column:first-child {
+            padding-inline-start: 0;
+        }
+
+        cap-groupbox.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column:last-child,
+        cap-optionsbox.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column:last-child {
+            padding-inline-end: 0;
+        }
+
         .cap-layout-horizontal > cap-groupbox.cap-groupbox-column,
         .cap-layout-horizontal > cap-optionsbox.cap-groupbox-column,
         .cap-layout-vertical > cap-groupbox.cap-groupbox-column,
@@ -1325,7 +1631,7 @@ cap-optionsbox {
 
         .cap-layout-horizontal > cap-groupbox.cap-groupbox-column + cap-groupbox.cap-groupbox-column,
         .cap-layout-horizontal > cap-optionsbox.cap-groupbox-column + cap-optionsbox.cap-groupbox-column {
-            border-inline-start: 1px solid var(--ui-border-color);
+            border-inline-start: var(--groupbox-column-separator);
         }
 
         .cap-layout-horizontal > cap-groupbox.cap-groupbox-column:first-child,
@@ -1346,7 +1652,7 @@ cap-optionsbox {
 
         .cap-layout-vertical > cap-groupbox.cap-groupbox-column + cap-groupbox.cap-groupbox-column,
         .cap-layout-vertical > cap-optionsbox.cap-groupbox-column + cap-optionsbox.cap-groupbox-column {
-            border-block-start: 1px solid var(--ui-border-color);
+            border-block-start: var(--groupbox-column-separator);
         }
 
         .cap-layout-vertical > cap-groupbox.cap-groupbox-column:first-child,
@@ -1363,6 +1669,7 @@ cap-header {
             display: block;
             color: var(--section-header-color);
             font-size: var(--section-header-font-size);
+            font-weight: var(--section-header-font-weight);
             border-radius: var(--ui-border-radius) var(--ui-border-radius) 0 0;
             padding: .25em;
             background: var(--section-header-background);
@@ -1440,6 +1747,19 @@ cap-listview {
             list-style: none;
         }
 
+        cap-listview[data-cap-retained-loading]::after {
+            content: "";
+            position: absolute;
+            z-index: 1;
+            inset: 0;
+            opacity: 0.33;
+            animation: cap-working-progress .55s linear infinite;
+            background-image: var(--working-background-image);
+            background-repeat: repeat;
+            background-size: 2rem 2rem;
+            pointer-events: none;
+        }
+
         cap-listview > [role="listbox"] > [role="option"],
         cap-listview > ul[aria-hidden="true"] > li {
             display: flex;
@@ -1481,6 +1801,16 @@ cap-listview {
                 outline: 2px solid Mark;
                 outline-offset: -2px;
             }
+
+            cap-listview[data-cap-retained-loading]::after {
+                display: none;
+            }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            cap-listview[data-cap-retained-loading]::after {
+                animation: none !important;
+            }
         }
 
 cap-navigationbar {
@@ -1606,8 +1936,9 @@ cap-optiongroup {
         }
 
         cap-optiongroup > fieldset[aria-invalid="true"] {
-            border: 1px solid var(--error-color);
-            border-radius: var(--radius-md);
+            border: 1px solid var(--error-control-border);
+            border-radius: var(--ui-border-radius);
+            box-shadow: var(--error-control-shadow);
         }
 
         @media (prefers-reduced-motion: reduce) {
@@ -1623,15 +1954,20 @@ cap-optiongroup {
             }
         }
 
-cap-optionsbox > cap-content {
+cap-optionsbox {
+            --_cap-control-compact-min: 0px;
+            --control-row-padding-block: 0px;
+        }
+
+        cap-optionsbox > cap-content {
             display: flex;
             flex-direction: column;
             align-self: stretch;
             flex: 1 1 0;
-            gap: 1rem;
+            gap: 2px;
         }
 
-        cap-optionsbox > cap-content * > fieldset > legend {
+        cap-optionsbox > cap-content cap-optiongroup > fieldset > legend {
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -1640,23 +1976,30 @@ cap-optionsbox > cap-content {
             color: var(--palette-neutral-950);
             gap: 0.5rem;
             width: 100%;
-            padding: 0 0 0.25rem;
-            margin-bottom: 0.25rem;
+            padding: 0 0 1px;
+            margin-bottom: 1px;
             border-bottom: 1px solid var(--ui-border-color);
             user-select: none;
         }
 
-        cap-optionsbox > cap-content * > fieldset {
+        cap-optionsbox > cap-content cap-optiongroup > fieldset {
             display: flex;
-            flex-flow: column;
+            flex-flow: column nowrap;
             justify-content: stretch;
             justify-items: stretch;
             align-items: stretch;
             align-content: stretch;
             box-sizing: border-box;
             width: 100%;
-            gap: .33rem;
-            padding: .25em 0 .5em 0;
+            gap: 2px;
+            padding: 1px 0 2px;
+        }
+
+        /* OptionsBox is deliberately a dense, vertical filter surface. Keep
+           RadioGroup in the same rhythm as checkbox options, regardless of
+           theme-level RadioGroup spacing. */
+        cap-optionsbox > cap-content cap-radiogroup > fieldset {
+            gap: 2px;
         }
 
 cap-panel {
@@ -1690,7 +2033,10 @@ cap-panel {
         }
 
 cap-progressbar {
-            display: block;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            min-width: 0;
         }
 
         cap-progressbar > label,
@@ -1756,17 +2102,17 @@ cap-progressbar {
             white-space: nowrap;
         }
 
-        cap-progressbar:has(> progress:indeterminate) > cap-content > cap-progress {
+        cap-progressbar:has(> progress:indeterminate[aria-busy="true"]) > cap-content > cap-progress {
             display: none;
         }
 
-        cap-progressbar:has(> progress:indeterminate) > cap-content > cap-label {
+        cap-progressbar:has(> progress:indeterminate[aria-busy="true"]) > cap-content > cap-label {
             z-index: 2;
         }
 
-        cap-progressbar:has(> progress:indeterminate) > cap-content::after {
+        cap-progressbar:has(> progress[aria-busy="true"]) > cap-content::after {
             position: absolute;
-            z-index: 1;
+            z-index: 2;
             inset: 1px;
             content: "";
             border-radius: inherit;
@@ -1775,10 +2121,15 @@ cap-progressbar {
             background-size: 2rem 2rem;
             animation: cap-working-progress .55s linear infinite;
             opacity: .5;
+            pointer-events: none;
+        }
+
+        cap-progressbar:has(> progress[aria-busy="true"]) > cap-content > cap-label {
+            z-index: 3;
         }
 
         @media (prefers-reduced-motion: reduce) {
-            cap-progressbar:has(> progress:indeterminate) > cap-content::after {
+            cap-progressbar:has(> progress[aria-busy="true"]) > cap-content::after {
                 animation: none !important;
             }
         }
@@ -1801,10 +2152,37 @@ cap-progressbar {
             }
         }
 
+cap-quadcheckbox > label > input[value="require"] + cap-checkshell,
+cap-tricheckbox > label > input[value="require"] + cap-checkshell {
+        color: var(--checkbox-positive-color);
+        background: var(--checkbox-positive-background);
+        background-color: var(--palette-status-positive);
+        border: var(--checkbox-positive-border);
+        box-shadow: var(--checkbox-positive-shadow);
+    }
+
+    cap-quadcheckbox > label > input[value="deny"] + cap-checkshell,
+    cap-tricheckbox > label > input[value="deny"] + cap-checkshell {
+        color: var(--checkbox-negative-color);
+        background: var(--checkbox-negative-background);
+        background-color: var(--palette-status-negative);
+        border: var(--checkbox-negative-border);
+        box-shadow: var(--checkbox-negative-shadow);
+    }
+
+    cap-quadcheckbox > label > input[value="prefer"] + cap-checkshell,
+    cap-tricheckbox > label > input[value="prefer"] + cap-checkshell {
+        color: var(--checkbox-neutral-color);
+        background: var(--checkbox-neutral-background);
+        background-color: var(--palette-status-neutral);
+        border: var(--checkbox-neutral-border);
+        box-shadow: var(--checkbox-neutral-shadow);
+    }
+
 cap-radiogroup > fieldset {
             display: flex;
             flex-flow: column wrap;
-            gap: 0;
+            gap: var(--radio-group-gap, 0px);
             margin: 0;
             padding: 0;
             min-inline-size: 0;
@@ -1824,11 +2202,19 @@ cap-radiogroup > fieldset {
         }
 
         cap-radiogroup > fieldset[aria-invalid="true"] cap-checkshell {
-            border-color: var(--error-color);
+            border-color: var(--error-control-border);
+            box-shadow: var(--error-control-shadow);
         }
 
-        cap-radiogroup > fieldset[aria-invalid="true"] cap-radiobutton > label {
-            color: var(--error-color);
+        /* RadioGroup owns changes for its child buttons, so the readonly
+           presentation is applied here rather than to each child input. */
+        cap-radiogroup > fieldset[aria-readonly="true"] > cap-radiobutton {
+            --_cap-checkable-label-color: var(--checkable-label-color-readonly);
+            --_cap-checkable-cursor: default;
+            --_cap-checkable-box-background: var(--checkbox-box-background-readonly);
+            --_cap-checkable-box-border: var(--checkbox-box-border-readonly);
+            --_cap-checkable-box-shadow: var(--checkbox-box-shadow-readonly);
+            --_cap-checkable-box-filter: saturate(.78);
         }
 
         @media (forced-colors: active) {
@@ -1840,14 +2226,26 @@ cap-radiogroup > fieldset {
 
 cap-radiobutton > label > input[type="radio"] + cap-checkshell {
             border-radius: 50%;
+            height: var(--checkbox-box-size, 1em);
+        }
+
+        /* Radios may keep their neutral ring when selected and paint only the
+           center dot; the generic checked checkbox treatment is the fallback. */
+        cap-radiobutton > label > input[type="radio"]:checked + cap-checkshell {
+            background: var(--radio-box-background-checked,
+                var(--checkbox-box-background-checked));
+            border: var(--radio-box-border-checked,
+                var(--checkbox-box-border-checked));
+            box-shadow: var(--radio-box-shadow-checked,
+                var(--checkbox-box-shadow-checked));
         }
 
         cap-radiobutton > label > input[type="radio"]:checked + cap-checkshell::after {
-            width: .4em;
-            height: .4em;
+            width: var(--radio-symbol-size, .4em);
+            height: var(--radio-symbol-size, .4em);
             content: "";
             border-radius: 50%;
-            background: var(--checkbox-symbol-color);
+            background: var(--radio-symbol-color, var(--checkbox-symbol-color));
         }
 
 cap-routeoutlet {
@@ -1856,16 +2254,10 @@ cap-routeoutlet {
             flex-direction: column;
             min-width: 0;
             min-height: 0;
-            overflow: hidden;
         }
 
         cap-routeoutlet > div {
-            display: flex;
             flex: 1 1 auto;
-            flex-direction: column;
-            min-width: 0;
-            min-height: 0;
-            overflow: auto;
         }
 
         cap-routeoutlet > div[hidden] {
@@ -1902,7 +2294,10 @@ cap-splitview {
             flex: 1 1 auto;
             min-width: 0;
             min-height: 0;
-            overflow: hidden;
+        }
+
+        cap-splitview > * {
+            --_cap-island-gutter: calc(var(--_cap-island-flow, 0) * var(--island-gap, 0px) / 2);
         }
 
         cap-splitview.horizontal {
@@ -1921,6 +2316,13 @@ cap-splitview {
             flex: 1 1 0;
         }
 
+        /* Pane sizes describe content allocation. The compensated scrollport
+         * padding must stay outside that size, even on an explicit islands scope. */
+        cap-splitview > cap-primary.cap-scroll:not(.island),
+        cap-splitview > cap-secondary.cap-scroll:not(.island) {
+            box-sizing: content-box;
+        }
+
         cap-splitview.horizontal > cap-primary {
             min-inline-size: var(--split-primary-min-size, 96px);
         }
@@ -1941,9 +2343,17 @@ cap-splitview {
             position: relative;
             flex: none;
             box-sizing: border-box;
-            background: var(--ui-border-color);
+            background: var(--_cap-island-separator-background, var(--ui-border-color));
             touch-action: none;
             user-select: none;
+            z-index: 1;
+        }
+
+        /* Keep a pointer target even when a flush theme gives the track zero
+         * size. This area overlaps pane edges and never changes allocation. */
+        cap-splitview > cap-separator::before {
+            content: '';
+            position: absolute;
         }
 
         cap-splitview > cap-separator::after {
@@ -1960,23 +2370,43 @@ cap-splitview {
         }
 
         cap-splitview.horizontal > cap-separator {
-            inline-size: .45rem;
+            inline-size: calc((1 - var(--_cap-island-flow, 0)) * .45rem
+                + var(--_cap-island-flow, 0) * var(--island-gap, 0px));
             cursor: col-resize;
         }
 
+        cap-splitview.horizontal > cap-separator::before {
+            inset-block: 0;
+            left: 50%;
+            width: max(100%, .45rem);
+            transform: translateX(-50%);
+        }
+
         cap-splitview.horizontal > cap-separator::after {
             inset-block: 35%;
-            inset-inline: 1px;
+            left: 50%;
+            width: 3px;
+            transform: translateX(-50%);
         }
 
         cap-splitview.vertical > cap-separator {
-            block-size: .45rem;
+            block-size: calc((1 - var(--_cap-island-flow, 0)) * .45rem
+                + var(--_cap-island-flow, 0) * var(--island-gap, 0px));
             cursor: row-resize;
         }
 
+        cap-splitview.vertical > cap-separator::before {
+            inset-inline: 0;
+            top: 50%;
+            height: max(100%, .45rem);
+            transform: translateY(-50%);
+        }
+
         cap-splitview.vertical > cap-separator::after {
             inset-inline: 35%;
-            inset-block: 1px;
+            top: 50%;
+            height: 3px;
+            transform: translateY(-50%);
         }
 
         cap-splitview[data-resizable="false"] > cap-separator {
@@ -2002,7 +2432,7 @@ cap-tabline {
             color: var(--button-color);
             background: var(--tab-button-background);
             border: none;
-            border-radius: var(--radius-md) var(--radius-md) 0 0;
+            border-radius: var(--ui-border-radius) var(--ui-border-radius) 0 0;
             box-shadow: var(--tab-button-shadow);
             box-sizing: border-box;
             align-self: flex-end;
@@ -2092,11 +2522,11 @@ cap-textbox {
             max-width: 100%;
             min-width: var(--input-min-width, 6rem);
             margin: 0;
-            padding: 0 5px;
+            padding: var(--ui-control-padding);
             color: var(--input-color);
             background: var(--input-background);
             border: var(--input-border);
-            border-radius: var(--radius-md);
+            border-radius: var(--ui-border-radius);
             box-shadow: var(--input-shadow);
             box-sizing: border-box;
             font: inherit;
@@ -2115,6 +2545,41 @@ cap-textbox {
             cursor: not-allowed;
         }
 
+        cap-textbox > input[readonly]:not(:disabled) {
+            color: var(--input-color-readonly);
+            background: var(--input-background-readonly);
+            border: var(--input-border-readonly);
+            box-shadow: var(--input-shadow-readonly);
+            cursor: text;
+        }
+
+
+
+cap-textbox > input:required:invalid:not(:disabled):not([readonly]):not([aria-invalid="true"]) {
+    outline: 1px dashed var(--required-color);
+    outline-offset: 3px;
+}
+
+
+cap-textbox:has(> input:required:invalid:not(:disabled):not([readonly]):not([aria-invalid="true"]))::after {
+    content: "✲";
+    position: absolute;
+    z-index: 3;
+    inset-block-start: max(calc(var(--control-row-padding-block, .25em) + .15em), .3em);
+    inset-inline-end: .35em;
+    display: flex;
+    inline-size: 1rem;
+    block-size: 1rem;
+    align-items: center;
+    justify-content: center;
+    color: var(--required-indicator-color);
+    background: var(--required-indicator-background);
+    font-size: .75rem;
+    font-weight: 700;
+    line-height: 1;
+    pointer-events: none;
+}
+
         cap-textbox > input:focus-visible {
             outline: 2px solid transparent;
             outline-offset: 1px;
@@ -2134,8 +2599,15 @@ cap-textbox {
             background-size: 2rem 2rem, 100% 100%;
         }
 
+        cap-textbox > input[readonly]:not(:disabled)[aria-busy="true"]:not([aria-invalid="true"]) {
+            background: var(--working-background-image), var(--input-background-readonly);
+            background-repeat: repeat, no-repeat;
+            background-size: 2rem 2rem, 100% 100%;
+        }
+
         cap-textbox > input[aria-invalid="true"] {
-            border-color: var(--error-color);
+            border-color: var(--error-control-border);
+            box-shadow: var(--error-control-shadow);
         }
 
         @media (prefers-reduced-motion: reduce) {
@@ -2152,7 +2624,6 @@ cap-textbox {
         }
 
 cap-toggle {
-            min-height: var(--control-min-height, 2em);
             display: flex;
             position: relative;
             flex-flow: row nowrap;
@@ -2171,7 +2642,7 @@ cap-toggle {
         cap-toggle > cap-options {
             display: flex;
             min-height: var(--control-min-height, 2em);
-            border-radius: var(--radius-md);
+            border-radius: var(--ui-border-radius);
             box-shadow: var(--toggle-group-shadow);
             box-sizing: border-box;
             cursor: pointer;
@@ -2186,7 +2657,7 @@ cap-toggle {
             min-height: var(--control-min-height, 2em);
             min-width: 2em;
             margin: 0;
-            padding: 0 6px;
+            padding: var(--ui-control-padding);
             position: relative;
             isolation: isolate;
             font: inherit;
@@ -2216,12 +2687,13 @@ cap-toggle {
             box-shadow: var(--toggle-button-shadow);
         }
 
-        cap-toggle > cap-options > button[role="radio"]:hover:not(:disabled)[aria-checked="false"]::before {
+        cap-toggle > cap-options:not([aria-readonly="true"])
+        > button[role="radio"]:hover:not(:disabled)[aria-checked="false"]::before {
             background: var(--button-background-hover);
         }
 
         cap-toggle > cap-options > button[role="radio"]:first-of-type {
-            border-radius: var(--radius-md) 0 0 var(--radius-md);
+            border-radius: var(--ui-border-radius) 0 0 var(--ui-border-radius);
         }
 
         cap-toggle > cap-options > button[role="radio"]:first-of-type::before {
@@ -2230,11 +2702,11 @@ cap-toggle {
         }
 
         cap-toggle > cap-options > button[role="radio"]:last-of-type {
-            border-radius: 0 var(--radius-md) var(--radius-md) 0;
+            border-radius: 0 var(--ui-border-radius) var(--ui-border-radius) 0;
         }
 
         cap-toggle > cap-options > button[role="radio"]:only-of-type {
-            border-radius: var(--radius-md);
+            border-radius: var(--ui-border-radius);
         }
 
         cap-toggle > cap-options > button[role="radio"]:last-of-type::before {
@@ -2256,7 +2728,7 @@ cap-toggle {
         cap-toggle > cap-options > button[role="radio"][aria-checked="true"]::before {
             background: var(--toggle-button-background-checked);
             border: var(--toggle-button-border-checked);
-            box-shadow: none;
+            box-shadow: var(--toggle-button-shadow-checked);
             inset-inline: var(--toggle-button-selected-inline-overlap);
         }
 
@@ -2270,6 +2742,51 @@ cap-toggle {
             border: var(--button-border-disabled);
         }
 
+        cap-toggle > cap-options[aria-readonly="true"] > button[role="radio"]:not(:disabled) {
+            cursor: default;
+        }
+
+        cap-toggle > cap-options[aria-readonly="true"] > button[role="radio"]:not(:disabled)::before {
+            filter: saturate(.78);
+        }
+
+        cap-toggle > cap-options[aria-readonly="true"]
+        > button[role="radio"][aria-checked="false"]
+        + [role="radio"][aria-checked="false"]::before {
+            border-inline-start: none;
+        }
+
+        cap-toggle > cap-options[aria-readonly="true"]
+        > button[role="radio"][aria-checked="false"]
+        + [role="radio"][aria-checked="false"]::after {
+            display: none;
+        }
+
+        cap-toggle > cap-options[aria-readonly="true"]
+        > button[role="radio"]:not(:disabled)[aria-checked="false"]::before {
+            background: var(--toggle-button-background-readonly);
+            border: var(--toggle-button-border-readonly);
+            box-shadow: var(--toggle-button-shadow-readonly);
+        }
+
+        /* A fixed choice is one contiguous surface. Retain the outer outline,
+           but do not draw segment seams. This follows the inactive border
+           rule so it also clears that rule's inline borders. */
+        cap-toggle > cap-options[aria-readonly="true"]
+        > button[role="radio"]:not(:disabled)[aria-checked]::before {
+            border-inline: none;
+        }
+
+        cap-toggle > cap-options[aria-readonly="true"]
+        > button[role="radio"][aria-checked]:first-of-type::before {
+            border-inline-start: var(--toggle-button-border-readonly);
+        }
+
+        cap-toggle > cap-options[aria-readonly="true"]
+        > button[role="radio"][aria-checked]:last-of-type::before {
+            border-inline-end: var(--toggle-button-border-readonly);
+        }
+
         cap-toggle > cap-options[aria-busy="true"]:not([aria-invalid="true"])
         > button[role="radio"]::before {
             background: var(--working-background-image), var(--toggle-button-background);
@@ -2286,7 +2803,12 @@ cap-toggle {
         }
 
         cap-toggle > cap-options[aria-invalid="true"] > button[role="radio"]::before {
-            border-color: var(--error-color);
+            border-color: var(--error-control-border);
+        }
+
+        cap-toggle > cap-options[aria-invalid="true"] {
+            border-radius: var(--ui-border-radius);
+            box-shadow: var(--error-control-shadow);
         }
 
         cap-toggle > cap-options > button[role="radio"][aria-checked="false"]
@@ -2347,13 +2869,27 @@ cap-treeview {
 
         cap-treeview > [role="tree"],
         cap-treeview > ul[aria-hidden="true"] {
-            display: grid;
-            align-content: start;
+            display: flex;
+            flex-flow: column nowrap;
+            align-items: stretch;
             margin: 0;
             padding: 0;
             list-style: none;
         }
 
+        cap-treeview[data-cap-retained-loading]::after {
+            content: "";
+            position: absolute;
+            z-index: 1;
+            inset: 0;
+            opacity: 0.33;
+            animation: cap-working-progress .55s linear infinite;
+            background-image: var(--working-background-image);
+            background-repeat: repeat;
+            background-size: 2rem 2rem;
+            pointer-events: none;
+        }
+
         cap-treeview [role="treeitem"],
         cap-treeview > ul[aria-hidden="true"] > li {
             display: flex;
@@ -2422,4 +2958,14 @@ cap-treeview {
             cap-treeview:has(> cap-error) {
                 outline: 2px solid Mark;
             }
+
+            cap-treeview[data-cap-retained-loading]::after {
+                display: none;
+            }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            cap-treeview[data-cap-retained-loading]::after {
+                animation: none !important;
+            }
         }