@capillaryjs/capillary-ui 1.0.0-alpha.1 → 1.1.0

package/styles/structural.css

@@ -145,8 +145,12 @@ cap-breadcrumb {
         }
 
 cap-button > button {
-            min-height: var(--control-min-height, 2rem);
-            padding: var(--space-xs) var(--space-sm);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-height: var(--control-min-height, 2em);
+            margin: 0;
+            padding: 0 5px;
             color: var(--button-color);
             background: var(--button-background);
             border: var(--button-border);
@@ -154,9 +158,7 @@ cap-button > button {
             box-shadow: var(--button-shadow);
             box-sizing: border-box;
             cursor: default;
-            font-family: inherit;
-            font-size: var(--ui-font-size);
-            line-height: calc(var(--ui-font-size) + var(--ui-padding) + var(--ui-padding));
+            font: inherit;
             user-select: none;
             white-space: nowrap;
         }
@@ -165,6 +167,11 @@ cap-button > button {
             display: inline-flex;
             position: relative;
             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"]) {
@@ -187,7 +194,7 @@ cap-button > button {
         cap-button > button[aria-disabled="true"] {
             color: var(--input-color-disabled);
             background: var(--button-background-disabled);
-            border: var(--button-border-disabled);
+            border-color: var(--button-border-disabled);
             cursor: not-allowed;
             pointer-events: none;
         }
@@ -310,7 +317,11 @@ cap-tricheckbox {
             display: inline-flex;
             position: relative;
             flex-flow: row wrap;
-            line-height: 1;
+            align-items: center;
+            align-content: center;
+            font-family: inherit;
+            font-size: var(--ui-font-size);
+            line-height: 1.2;
         }
 
         cap-checkbox > label,
@@ -320,17 +331,13 @@ cap-tricheckbox {
             display: flex;
             flex-flow: row nowrap;
             position: relative;
-            line-height: calc(var(--ui-font-size) + var(--ui-padding) + var(--ui-padding));
-            font-size: var(--ui-font-size);
-            height: calc(var(--ui-font-size) + var(--ui-padding-h) + var(--ui-padding-h));
+            min-height: 1.2em;
+            margin: 0;
             color: var(--ui-text-color);
             border-radius: var(--ui-border-radius);
             box-sizing: border-box;
             align-items: center;
             gap: .3em;
-            align-content: center;
-            justify-content: center;
-            justify-items: center;
             cursor: pointer;
             user-select: none;
         }
@@ -371,7 +378,7 @@ cap-tricheckbox {
             flex: 0 0 1em;
             box-sizing: border-box;
             text-align: center;
-            line-height: 120%;
+            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));
@@ -471,66 +478,76 @@ cap-tricheckbox > label > input[value="require"] + cap-checkshell {
 
 cap-dropdown,
 cap-datepicker,
-cap-timepicker,
+cap-datetimepicker,
 cap-textbox,
+cap-timepicker,
 cap-toggle {
             display: flex;
             flex-flow: row nowrap;
             position: relative;
             align-items: center;
             gap: .5em;
-            min-height: var(--control-min-height, 2rem);
+            min-height: var(--control-min-height, 2em);
             color: var(--ui-text-color);
+            font-family: inherit;
             font-size: var(--ui-font-size);
-            line-height: normal;
+            line-height: 1.2;
             box-sizing: border-box;
             user-select: none;
         }
 
         cap-groupbox > cap-content > cap-layout > cap-dropdown,
         cap-groupbox > cap-content > cap-layout > cap-datepicker,
-        cap-groupbox > cap-content > cap-layout > cap-timepicker,
+        cap-groupbox > cap-content > cap-layout > cap-datetimepicker,
         cap-groupbox > cap-content > cap-layout > cap-textbox,
+        cap-groupbox > cap-content > cap-layout > cap-timepicker,
         cap-groupbox > cap-content > cap-layout > cap-toggle {
             align-self: stretch;
         }
 
         cap-dropdown > label,
         cap-datepicker > label,
-        cap-timepicker > label,
+        cap-datetimepicker > label,
         cap-textbox > label,
+        cap-timepicker > label,
         cap-toggle > label {
             align-self: center;
             user-select: none;
             white-space: nowrap;
         }
 
-cap-dropdown,
-cap-timepicker {
+cap-dropdown {
+            display: grid;
+            grid-template-columns: minmax(var(--input-min-width, 6rem), 1fr);
             min-width: 0;
         }
 
-        cap-dropdown > cap-selectshell,
-        cap-timepicker > cap-selectshell {
+        cap-dropdown:has(> label) {
+            grid-template-columns: max-content minmax(var(--input-min-width, 6rem), 1fr);
+        }
+
+        cap-dropdown > cap-selectshell {
             display: flex;
             flex-flow: row nowrap;
             position: relative;
             isolation: isolate;
-            min-height: var(--control-min-height, 2rem);
-            min-width: 0;
+            min-height: var(--control-min-height, 2em);
+            width: var(--input-width, 15rem);
+            max-width: 100%;
+            min-width: var(--input-min-width, 6rem);
             box-sizing: border-box;
             margin-left: auto;
         }
 
-        cap-dropdown > cap-selectshell > select,
-        cap-timepicker > cap-selectshell > select {
+        cap-dropdown > cap-selectshell > select {
             position: relative;
             z-index: 1;
-            min-height: var(--control-min-height, 2rem);
+            min-height: var(--control-min-height, 2em);
             width: var(--input-width, 15rem);
             max-width: 100%;
             min-width: var(--input-min-width, 6rem);
-            padding: var(--space-xs) var(--space-sm);
+            margin: 0;
+            padding: 0 5px;
             padding-inline-end: var(--dropdown-padding-inline-end);
             color: var(--input-color);
             background: var(--dropdown-select-background);
@@ -545,8 +562,7 @@ cap-timepicker {
             white-space: nowrap;
         }
 
-        cap-dropdown > cap-selectshell::after,
-        cap-timepicker > cap-selectshell::after {
+        cap-dropdown > cap-selectshell::after {
             content: var(--dropdown-underlay-content);
             position: absolute;
             z-index: 0;
@@ -561,8 +577,7 @@ cap-timepicker {
             pointer-events: none;
         }
 
-        cap-dropdown > cap-selectshell::before,
-        cap-timepicker > cap-selectshell::before {
+        cap-dropdown > cap-selectshell::before {
             content: var(--dropdown-trigger-content);
             position: absolute;
             z-index: 2;
@@ -582,42 +597,36 @@ cap-timepicker {
             pointer-events: none;
         }
 
-        cap-dropdown > cap-selectshell:has(> select:hover:not(:disabled))::before,
-        cap-timepicker > cap-selectshell:has(> select:hover:not(:disabled))::before {
+        cap-dropdown > cap-selectshell:has(> select:hover:not(:disabled))::before {
             background: var(--dropdown-trigger-background-hover);
             box-shadow: var(--dropdown-trigger-shadow-hover);
         }
 
-        cap-dropdown > cap-selectshell:has(> select:disabled)::before,
-        cap-timepicker > cap-selectshell:has(> select:disabled)::before {
+        cap-dropdown > cap-selectshell:has(> select:disabled)::before {
             color: var(--input-color-disabled);
             background: var(--dropdown-trigger-background-disabled);
             border: var(--dropdown-trigger-border-disabled);
         }
 
-        cap-dropdown > cap-selectshell:has(> select:disabled)::after,
-        cap-timepicker > cap-selectshell:has(> select:disabled)::after {
+        cap-dropdown > cap-selectshell:has(> select:disabled)::after {
             background: var(--dropdown-underlay-background-disabled);
             border: var(--dropdown-underlay-border-disabled);
         }
 
-        cap-dropdown > cap-selectshell > select:focus-visible,
-        cap-timepicker > cap-selectshell > select:focus-visible {
+        cap-dropdown > cap-selectshell > select:focus-visible {
             outline: 2px solid transparent;
             outline-offset: 1px;
             box-shadow: var(--focus-ring);
         }
 
-        cap-dropdown > cap-selectshell:has(> select[aria-busy="true"]:not([aria-invalid="true"]))::after,
-        cap-timepicker > cap-selectshell:has(> select[aria-busy="true"]:not([aria-invalid="true"]))::after {
+        cap-dropdown > cap-selectshell:has(> select[aria-busy="true"]:not([aria-invalid="true"]))::after {
             background: var(--working-background-image), var(--dropdown-underlay-background);
             background-repeat: repeat, no-repeat;
             background-size: 2rem 2rem, 100% 100%;
             animation: cap-working-progress .55s linear infinite;
         }
 
-        cap-dropdown > cap-selectshell > select[aria-busy="true"]:not([aria-invalid="true"]),
-        cap-timepicker > cap-selectshell > select[aria-busy="true"]:not([aria-invalid="true"]) {
+        cap-dropdown > cap-selectshell > select[aria-busy="true"]:not([aria-invalid="true"]) {
             background: var(--working-background-image), var(--dropdown-select-background);
             background-repeat: repeat, no-repeat;
             background-size: 2rem 2rem, 100% 100%;
@@ -625,39 +634,30 @@ cap-timepicker {
         }
 
         cap-dropdown > cap-selectshell:has(> select[aria-invalid="true"])::before,
-        cap-timepicker > cap-selectshell:has(> select[aria-invalid="true"])::before,
         cap-dropdown > cap-selectshell:has(> select[aria-invalid="true"])::after,
-        cap-timepicker > cap-selectshell:has(> select[aria-invalid="true"])::after,
-        cap-dropdown > cap-selectshell > select[aria-invalid="true"],
-        cap-timepicker > cap-selectshell > select[aria-invalid="true"] {
+        cap-dropdown > cap-selectshell > select[aria-invalid="true"] {
             border-color: var(--error-color);
         }
 
         @media (prefers-reduced-motion: reduce) {
             cap-dropdown > cap-selectshell:has(> select[aria-busy="true"])::after,
-            cap-timepicker > cap-selectshell:has(> select[aria-busy="true"])::after,
-            cap-dropdown > cap-selectshell > select[aria-busy="true"],
-            cap-timepicker > cap-selectshell > select[aria-busy="true"] {
+            cap-dropdown > cap-selectshell > select[aria-busy="true"] {
                 animation: none !important;
             }
         }
 
         @media (forced-colors: active) {
             cap-dropdown > cap-selectshell::before,
-            cap-timepicker > cap-selectshell::before,
-            cap-dropdown > cap-selectshell::after,
-            cap-timepicker > cap-selectshell::after {
+            cap-dropdown > cap-selectshell::after {
                 display: none;
             }
 
-            cap-dropdown > cap-selectshell > select,
-            cap-timepicker > cap-selectshell > select {
+            cap-dropdown > cap-selectshell > select {
                 appearance: auto;
                 padding-inline-end: var(--space-sm);
             }
 
-            cap-dropdown > cap-selectshell > select[aria-invalid="true"],
-            cap-timepicker > cap-selectshell > select[aria-invalid="true"] {
+            cap-dropdown > cap-selectshell > select[aria-invalid="true"] {
                 outline: 2px solid Mark;
                 outline-offset: 1px;
             }
@@ -666,6 +666,10 @@ cap-timepicker {
 cap-datatable {
             display: block;
             position: relative;
+            flex: 1 1 auto;
+            min-inline-size: 0;
+            min-block-size: 0;
+            max-block-size: 100%;
             overflow: auto;
         }
 
@@ -724,18 +728,6 @@ cap-datatable {
             height: var(--ui-font-size);
         }
 
-        cap-datatable > table[aria-busy="true"] > tbody > tr[data-cap-selectable-row] > td::after {
-            content: "";
-            position: absolute;
-            z-index: 1;
-            inset: 0;
-            background-image: var(--working-background-image);
-            background-repeat: repeat;
-            background-size: 2rem 2rem;
-            animation: cap-working-progress .55s linear infinite;
-            pointer-events: none;
-        }
-
         cap-datatable:has(> cap-error) {
             outline: 1px solid var(--error-color);
             outline-offset: -1px;
@@ -745,12 +737,6 @@ cap-datatable {
             border-color: var(--error-color);
         }
 
-        @media (prefers-reduced-motion: reduce) {
-            cap-datatable > table[aria-busy="true"] > tbody > tr[data-cap-selectable-row] > td::after {
-                animation: none !important;
-            }
-        }
-
         @media (forced-colors: active) {
             cap-datatable:has(> cap-error) {
                 outline: 2px solid Mark;
@@ -789,12 +775,27 @@ cap-placeholder {
             }
         }
 
+        @media (forced-colors: active) {
+            cap-placeholder {
+                background: CanvasText;
+                forced-color-adjust: none;
+            }
+
+            cap-placeholder::after {
+                display: none;
+            }
+        }
+
 cap-datatable > table > thead {
             color: var(--table-header-color);
             background: var(--ui-gradient);
         }
 
         cap-datatable > table > thead > tr > th {
+            position: sticky;
+            inset-block-start: 0;
+            z-index: 2;
+            background: var(--ui-gradient);
             border: 2px groove #fff7;
             border-left: none;
         }
@@ -804,7 +805,8 @@ cap-datatable > table > thead {
         }
 
 cap-datatable > table > thead > tr > th[aria-sort] {
-            position: relative;
+            position: sticky;
+            inset-block-start: 0;
             padding-right: 24px;
             user-select: var(--noselect-user-select);
             cursor: var(--noselect-cursor);
@@ -900,22 +902,31 @@ cap-filterpanel {
             }
         }
 
-cap-datepicker {
-            display: flex;
-            flex-flow: row nowrap;
+cap-datepicker,
+cap-datetimepicker,
+cap-timepicker {
+            display: grid;
+            grid-template-columns: minmax(var(--input-min-width, 6rem), 1fr);
             align-items: center;
-            gap: 0.5em;
-            position: relative;
-            min-height: var(--control-min-height, 2rem);
             min-width: 0;
         }
 
-        cap-datepicker > input {
-            min-height: var(--control-min-height, 2rem);
-            width: var(--input-width, 10rem);
+        cap-datepicker:has(> label),
+        cap-datetimepicker:has(> label),
+        cap-timepicker:has(> label) {
+            grid-template-columns: max-content minmax(var(--input-min-width, 6rem), 1fr);
+        }
+
+        cap-datepicker > input,
+        cap-datetimepicker > input,
+        cap-timepicker > input {
+            min-height: var(--control-min-height, 2em);
+            width: var(--input-width, max-content);
             max-width: 100%;
             min-width: var(--input-min-width, 6rem);
-            padding: var(--space-xs) var(--space-sm);
+            margin: 0;
+            margin-left: auto;
+            padding: 0 5px;
             color: var(--input-color);
             background: var(--input-background);
             border: var(--input-border);
@@ -923,207 +934,68 @@ cap-datepicker {
             box-shadow: var(--input-shadow);
             box-sizing: border-box;
             font: inherit;
-            user-select: text;
-            cursor: text;
         }
 
         cap-datepicker > input:disabled,
-        cap-datepicker > input[readonly] {
+        cap-datetimepicker > input:disabled,
+        cap-timepicker > input:disabled,
+        cap-datepicker > input[readonly],
+        cap-datetimepicker > input[readonly],
+        cap-timepicker > input[readonly] {
             color: var(--input-color-disabled);
             background: var(--input-background-disabled);
             border-color: var(--ui-input-border-disabled);
             cursor: not-allowed;
         }
 
-        cap-datepicker > input:focus-visible {
+        cap-datepicker > input:focus-visible,
+        cap-datetimepicker > input:focus-visible,
+        cap-timepicker > input:focus-visible {
             outline: 2px solid transparent;
             outline-offset: 1px;
             box-shadow: var(--focus-ring);
         }
 
-        cap-datepicker > button {
-            min-height: var(--control-min-height, 2rem);
-            min-width: 2rem;
-            padding: var(--space-xs) var(--space-sm);
-            color: var(--button-color);
-            background: var(--button-background);
-            border: var(--button-border);
-            border-radius: var(--radius-md);
-            cursor: pointer;
-            font: inherit;
-            user-select: none;
-        }
-
-        cap-datepicker > button:disabled {
-            color: var(--input-color-disabled);
-            background: var(--input-background-disabled);
-            cursor: not-allowed;
-        }
-
-        cap-datepicker > dialog {
-            position: absolute;
-            inset-block-start: 100%;
-            inset-inline-start: 0;
-            z-index: 1;
-            margin: 0.25em 0 0;
-            padding: 0.5em;
-            min-width: 16rem;
-            background: var(--island-background, var(--application-background));
-            border: var(--island-border, var(--input-border));
-            border-radius: var(--radius-md);
-            box-shadow: var(--island-shadow, var(--input-shadow));
-            color: var(--ui-color);
-        }
-
-        cap-datepicker > dialog::backdrop {
-            display: none;
-        }
-
-        cap-datepicker > input[aria-busy="true"]:not([aria-invalid="true"]) {
+        cap-datepicker > input[aria-busy="true"]:not([aria-invalid="true"]),
+        cap-datetimepicker > input[aria-busy="true"]:not([aria-invalid="true"]),
+        cap-timepicker > input[aria-busy="true"]:not([aria-invalid="true"]) {
             background: var(--working-background-image), var(--input-background);
             background-repeat: repeat, no-repeat;
             background-size: 2rem 2rem, 100% 100%;
             animation: cap-working-progress .55s linear infinite;
         }
 
-        cap-datepicker > input[aria-invalid="true"] {
-            border-color: var(--error-color);
-        }
-
-        cap-datepicker > dialog .cap-calendar {
-            display: inline-block;
-            font: inherit;
-            user-select: none;
-        }
-
-        cap-datepicker > dialog .cap-calendar .cap-calendar-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 0.5em;
-            padding: 0.25em 0.5em;
-            font: inherit;
-            text-align: center;
-        }
-
-        cap-datepicker > dialog .cap-calendar .cap-calendar-header button {
-            min-inline-size: 2em;
-            min-block-size: 2em;
-            padding: 0.25em;
-            cursor: pointer;
-        }
-
-        cap-datepicker > dialog .cap-calendar table[role="grid"] {
-            border-collapse: collapse;
-            width: 100%;
-            font: inherit;
-        }
-
-        cap-datepicker > dialog .cap-calendar table[role="grid"] th,
-        cap-datepicker > dialog .cap-calendar table[role="grid"] td {
-            padding: 0.125em;
-            text-align: center;
-        }
-
-        cap-datepicker > dialog .cap-calendar table[role="grid"] th {
-            font-weight: 600;
-        }
-
-        cap-datepicker > dialog .cap-calendar table[role="grid"] td button {
-            inline-size: 2em;
-            block-size: 2em;
-            padding: 0;
-            border: 1px solid transparent;
-            border-radius: var(--radius-sm, 0.25rem);
-            background: transparent;
-            color: inherit;
-            font: inherit;
-            cursor: pointer;
-        }
-
-        cap-datepicker > dialog .cap-calendar table[role="grid"] td button:focus-visible {
-            outline: 2px solid transparent;
-            outline-offset: 1px;
-            box-shadow: var(--focus-ring);
-        }
-
-        cap-datepicker > dialog .cap-calendar table[role="grid"] td button[data-today="true"] {
-            border-color: var(--palette-primary-500);
-        }
-
-        cap-datepicker > dialog .cap-calendar table[role="grid"] td button[data-selected="true"] {
-            background: var(--palette-primary-500);
-            color: var(--palette-primary-contrast);
+        cap-datepicker > input:disabled[aria-busy="true"]:not([aria-invalid="true"]),
+        cap-datetimepicker > input:disabled[aria-busy="true"]:not([aria-invalid="true"]),
+        cap-timepicker > input:disabled[aria-busy="true"]:not([aria-invalid="true"]) {
+            background: var(--working-background-image), var(--input-background-disabled);
+            background-repeat: repeat, no-repeat;
+            background-size: 2rem 2rem, 100% 100%;
         }
 
-        cap-datepicker > dialog .cap-calendar table[role="grid"] td button:disabled,
-        cap-datepicker > dialog .cap-calendar table[role="grid"] td button[aria-disabled="true"] {
-            color: var(--input-color-disabled);
-            cursor: not-allowed;
+        cap-datepicker > input[aria-invalid="true"],
+        cap-datetimepicker > input[aria-invalid="true"],
+        cap-timepicker > input[aria-invalid="true"] {
+            border-color: var(--error-color);
         }
 
         @media (prefers-reduced-motion: reduce) {
-            cap-datepicker > input[aria-busy="true"] {
+            cap-datepicker > input[aria-busy="true"],
+            cap-datetimepicker > input[aria-busy="true"],
+            cap-timepicker > input[aria-busy="true"] {
                 animation: none !important;
             }
         }
 
         @media (forced-colors: active) {
-            cap-datepicker > input[aria-invalid="true"] {
-                outline: 2px solid Mark;
-                outline-offset: 1px;
-            }
-
-            cap-datepicker > dialog .cap-calendar table[role="grid"] td button[data-selected="true"] {
-                outline: 2px solid ButtonText;
-            }
-        }
-
-cap-datetimepicker {
-            display: block;
-            position: relative;
-            min-width: 0;
-        }
-
-        cap-datetimepicker > fieldset {
-            margin: 0;
-            padding: 0;
-            min-inline-size: 0;
-            border: 0;
-            display: flex;
-            flex-flow: row wrap;
-            align-items: flex-start;
-            gap: 0.5em;
-            width: 100%;
-        }
-
-        cap-datetimepicker > fieldset > legend {
-            display: block;
-            width: 100%;
-            padding: 0;
-            margin: 0 0 0.25em;
-            font: inherit;
-            user-select: none;
-        }
-
-        cap-datetimepicker > fieldset[aria-invalid="true"] cap-datepicker > input,
-        cap-datetimepicker > fieldset[aria-invalid="true"] cap-timepicker > cap-selectshell::before,
-        cap-datetimepicker > fieldset[aria-invalid="true"] cap-timepicker > cap-selectshell::after,
-        cap-datetimepicker > fieldset[aria-invalid="true"] cap-timepicker > cap-selectshell > select {
-            border-color: var(--error-color);
-        }
-
-        @media (forced-colors: active) {
-            cap-datetimepicker > fieldset[aria-invalid="true"] {
+            cap-datepicker > input[aria-invalid="true"],
+            cap-datetimepicker > input[aria-invalid="true"],
+            cap-timepicker > input[aria-invalid="true"] {
                 outline: 2px solid Mark;
                 outline-offset: 1px;
             }
         }
 
-cap-timepicker > cap-selectshell > select {
-            min-width: 7rem;
-        }
-
 cap-descriptionlist {
             display: block;
             user-select: none;
@@ -1226,15 +1098,20 @@ cap-optionsbox {
             box-sizing: border-box;
             gap: var(--cap-groupbox-gap, 0 0.35rem);
             padding: var(--cap-groupbox-padding, 0.125rem 0.35rem 0.125rem 0.125rem);
+            padding-top: var(--cap-groupbox-padding-top, .125rem);
             border: var(--cap-groupbox-border, 1px solid var(--ui-border-color));
             border-radius: var(--ui-border-radius);
             position: relative;
             min-width: 0;
             min-height: 0;
+            flex: var(--cap-groupbox-flex, 0 1 auto);
         }
 
         cap-groupbox > cap-header,
         cap-optionsbox > cap-header {
+            position: var(--cap-groupbox-header-position, static);
+            left: var(--cap-groupbox-header-inset, auto);
+            top: var(--cap-groupbox-header-inset, auto);
             display: grid;
             place-items: var(--cap-groupbox-header-align, center);
             box-sizing: border-box;
@@ -1258,12 +1135,11 @@ cap-optionsbox {
             min-width: 0;
             min-height: 0;
             margin-left: var(--cap-groupbox-content-margin, .25em);
+            flex: 1 1 auto;
         }
 
-        .cap-layout-horizontal cap-groupbox > cap-content > cap-layout,
-        .cap-layout-horizontal cap-optionsbox > cap-content > cap-layout,
-        .cap-layout-vertical cap-groupbox > cap-content > cap-layout,
-        .cap-layout-vertical cap-optionsbox > cap-content > cap-layout {
+        cap-groupbox > cap-content > cap-layout,
+        cap-optionsbox > cap-content > cap-layout {
             gap: .5rem;
             justify-content: flex-start;
             align-content: flex-start;
@@ -1289,6 +1165,10 @@ cap-optionsbox {
             --cap-groupbox-header-writing: vertical-rl;
             --cap-groupbox-header-transform: rotate(180deg);
             --cap-groupbox-content-margin: .25em;
+            --cap-groupbox-flex: 0 1 auto;
+            --cap-groupbox-padding-top: .125rem;
+            --cap-groupbox-header-position: static;
+            --cap-groupbox-header-inset: auto;
         }
 
         [data-cap-context='form'] {
@@ -1298,45 +1178,191 @@ cap-optionsbox {
             --cap-groupbox-border: 1px solid var(--ui-border-color);
             --cap-groupbox-header-align: center start;
             --cap-groupbox-header-width: auto;
-            --cap-groupbox-header-padding: 0;
+            --cap-groupbox-header-padding: 2px 5px;
             --cap-groupbox-header-color: var(--text-color);
-            --cap-groupbox-header-background: none;
+            --cap-groupbox-header-background: var(--panel-background);
             --cap-groupbox-header-shadow: none;
             --cap-groupbox-header-writing: horizontal-tb;
             --cap-groupbox-header-transform: none;
             --cap-groupbox-content-margin: 0;
+            --cap-groupbox-flex: 0 1 auto;
+            --cap-groupbox-padding-top: 1em;
+            --cap-groupbox-header-position: absolute;
+            --cap-groupbox-header-inset: calc(0px - var(--ui-font-size) / 2);
         }
 
-        [data-cap-context='form'] cap-groupbox,
-        [data-cap-context='form'] cap-optionsbox {
-            flex: 1 1 auto;
+        .cap-layout-horizontal > cap-groupbox,
+        .cap-layout-horizontal > cap-optionsbox {
+            max-inline-size: max-content;
+            min-inline-size: min-content;
+        }
+
+        cap-groupbox.cap-groupbox-section,
+        cap-optionsbox.cap-groupbox-section {
+            display: grid;
+            grid-template-columns: max-content minmax(0, 1fr);
+            grid-template-rows: max-content minmax(max-content, 1fr);
             align-self: stretch;
-            padding-top: 1em;
+            align-items: start;
+            gap: 0;
+            padding: 0;
+            padding-top: 0;
+            border: 0;
+            border-radius: 0;
+            min-inline-size: 0;
+            max-inline-size: none;
+            flex: 0 0 auto;
+        }
+
+        cap-groupbox.cap-groupbox-section::before,
+        cap-optionsbox.cap-groupbox-section::before {
+            content: "";
+            grid-column: 2;
+            grid-row: 1;
+            align-self: center;
+            border-block-start: 1px solid var(--ui-border-color);
+        }
+
+        cap-groupbox.cap-groupbox-section > cap-header,
+        cap-optionsbox.cap-groupbox-section > cap-header {
+            position: static;
+            grid-column: 1;
+            grid-row: 1;
+            display: block;
+            width: auto;
+            min-width: 0;
+            min-height: 0;
+            padding: 0 0.5rem 0 0;
+            border-radius: 0;
+            color: var(--text-color);
+            background: transparent;
+            box-shadow: none;
+            writing-mode: horizontal-tb;
+            transform: none;
+            font-size: var(--groupbox-section-font-size, 1.2em);
+            font-weight: 600;
         }
 
-        .cap-layout-horizontal cap-groupbox,
-        .cap-layout-horizontal cap-optionsbox {
-            max-width: 15rem;
+        cap-groupbox.cap-groupbox-section > cap-content,
+        cap-optionsbox.cap-groupbox-section > cap-content {
+            grid-column: 1 / -1;
+            grid-row: 2;
+            margin-left: 0;
+            padding-block: 0.75rem;
             min-width: 0;
         }
 
-        .cap-layout-vertical  cap-groupbox,
-        .cap-layout-vertical  cap-optionsbox {
-            max-height: 15rem;
+        .cap-layout-horizontal > cap-groupbox.cap-groupbox-section,
+        .cap-layout-horizontal > cap-optionsbox.cap-groupbox-section {
+            grid-template-columns: max-content minmax(0, 1fr);
+            grid-template-rows: max-content minmax(max-content, 1fr);
+        }
+
+        .cap-layout-horizontal > cap-groupbox.cap-groupbox-section::before,
+        .cap-layout-horizontal > cap-optionsbox.cap-groupbox-section::before {
+            grid-column: 1;
+            grid-row: 2;
+            justify-self: stretch;
+            align-self: stretch;
+            border-block-start: 0;
+            border-inline-end: 1px solid var(--ui-border-color);
+        }
+
+        .cap-layout-horizontal > cap-groupbox.cap-groupbox-section > cap-header,
+        .cap-layout-horizontal > cap-optionsbox.cap-groupbox-section > cap-header {
+            padding: 0 0.5rem 0.5rem 0;
+        }
+
+        .cap-layout-horizontal > cap-groupbox.cap-groupbox-section > cap-content,
+        .cap-layout-horizontal > cap-optionsbox.cap-groupbox-section > cap-content {
+            grid-column: 2;
+            grid-row: 1 / -1;
+            padding-block: 0;
+            padding-inline: 0.75rem;
+            min-block-size: 0;
+        }
+
+        cap-groupbox.cap-groupbox-column,
+        cap-optionsbox.cap-groupbox-column {
+            gap: 0;
+            padding: 0 1rem;
+            padding-top: 0;
+            border: 0;
+            border-radius: 0;
+            flex: 0 1 auto;
+        }
+
+        cap-groupbox.cap-groupbox-column > cap-header,
+        cap-optionsbox.cap-groupbox-column > cap-header {
+            position: static;
+            display: block;
+            width: auto;
+            min-width: 0;
             min-height: 0;
+            padding: 0;
+            margin-block-end: 0.75rem;
+            border-radius: 0;
+            color: var(--text-color);
+            background: transparent;
+            box-shadow: none;
+            writing-mode: horizontal-tb;
+            transform: none;
+            font-size: var(--ui-font-size);
+            font-weight: 600;
         }
 
-        [data-cap-context='form'] cap-groupbox > cap-header {
-            position: absolute;
-            left: calc(0px - var(--ui-font-size) / 2);
-            top: calc(0px - var(--ui-font-size) / 2);
-            background: var(--panel-background);
-            padding: 2px 5px;
+        cap-groupbox.cap-groupbox-column > cap-content,
+        cap-optionsbox.cap-groupbox-column > cap-content {
+            margin-left: 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,
+        .cap-layout-vertical > cap-optionsbox.cap-groupbox-column {
+            align-self: stretch;
+        }
+
+        .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);
+        }
+
+        .cap-layout-horizontal > cap-groupbox.cap-groupbox-column:first-child,
+        .cap-layout-horizontal > cap-optionsbox.cap-groupbox-column:first-child {
+            padding-inline-start: 0;
+        }
+
+        .cap-layout-horizontal > cap-groupbox.cap-groupbox-column:last-child,
+        .cap-layout-horizontal > cap-optionsbox.cap-groupbox-column:last-child {
+            padding-inline-end: 0;
+        }
+
+        .cap-layout-vertical > cap-groupbox.cap-groupbox-column,
+        .cap-layout-vertical > cap-optionsbox.cap-groupbox-column {
+            padding-inline: 0;
+            padding-block: 1rem;
+        }
+
+        .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);
+        }
+
+        .cap-layout-vertical > cap-groupbox.cap-groupbox-column:first-child,
+        .cap-layout-vertical > cap-optionsbox.cap-groupbox-column:first-child {
+            padding-block-start: 0;
+        }
+
+        .cap-layout-vertical > cap-groupbox.cap-groupbox-column:last-child,
+        .cap-layout-vertical > cap-optionsbox.cap-groupbox-column:last-child {
+            padding-block-end: 0;
         }
 
 cap-header {
             display: block;
             color: var(--section-header-color);
+            font-size: var(--section-header-font-size);
             border-radius: var(--ui-border-radius) var(--ui-border-radius) 0 0;
             padding: .25em;
             background: var(--section-header-background);
@@ -1387,9 +1413,12 @@ cap-infopanel {
 cap-listview {
             display: flex;
             position: relative;
+            flex: 1 1 auto;
             flex-direction: column;
-            overflow-y: auto;
-            height: 100%;
+            min-inline-size: 0;
+            min-block-size: 0;
+            max-block-size: 100%;
+            overflow: auto;
             padding: var(--ui-padding-v) var(--ui-padding-h);
             color: var(--ui-text-color);
             background: var(--ui-input-bg);
@@ -1411,7 +1440,8 @@ cap-listview {
             list-style: none;
         }
 
-        cap-listview > [role="listbox"] > [role="option"] {
+        cap-listview > [role="listbox"] > [role="option"],
+        cap-listview > ul[aria-hidden="true"] > li {
             display: flex;
             flex-flow: row nowrap;
             position: relative;
@@ -1422,19 +1452,11 @@ cap-listview {
             border-radius: var(--ui-border-radius);
             box-sizing: border-box;
             user-select: none;
+            align-items: center;
         }
 
-        cap-listview > [role="listbox"][aria-busy="true"] > [role="option"]::after {
-            content: "";
-            position: absolute;
-            z-index: 1;
-            inset: 0;
-            background-image: var(--working-background-image);
-            background-repeat: repeat;
-            background-size: 2rem 2rem;
-            border-radius: inherit;
-            animation: cap-working-progress .55s linear infinite;
-            pointer-events: none;
+        cap-listview > ul[aria-hidden="true"] cap-placeholder {
+            font-size: var(--ui-font-size);
         }
 
         cap-listview > [role="listbox"] > [role="option"]:hover {
@@ -1454,12 +1476,6 @@ cap-listview {
             border-color: var(--error-color);
         }
 
-        @media (prefers-reduced-motion: reduce) {
-            cap-listview > [role="listbox"][aria-busy="true"] > [role="option"]::after {
-                animation: none !important;
-            }
-        }
-
         @media (forced-colors: active) {
             cap-listview:has(> cap-error) {
                 outline: 2px solid Mark;
@@ -1612,7 +1628,7 @@ cap-optionsbox > cap-content {
             flex-direction: column;
             align-self: stretch;
             flex: 1 1 0;
-            gap: .5em;
+            gap: 1rem;
         }
 
         cap-optionsbox > cap-content * > fieldset > legend {
@@ -1624,8 +1640,8 @@ cap-optionsbox > cap-content {
             color: var(--palette-neutral-950);
             gap: 0.5rem;
             width: 100%;
-            padding: 0 0 0.25em;
-            margin-bottom: 0.25em;
+            padding: 0 0 0.25rem;
+            margin-bottom: 0.25rem;
             border-bottom: 1px solid var(--ui-border-color);
             user-select: none;
         }
@@ -1639,7 +1655,7 @@ cap-optionsbox > cap-content {
             align-content: stretch;
             box-sizing: border-box;
             width: 100%;
-            gap: 0;
+            gap: .33rem;
             padding: .25em 0 .5em 0;
         }
 
@@ -1661,8 +1677,12 @@ cap-panel {
             flex: 1 1 auto;
             min-width: 0;
             min-height: 0;
-            padding: var(--panel-padding, 0.75rem);
-            gap: var(--spacing-medium, 1rem);
+            padding: var(--panel-content-padding, var(--panel-padding, 0.75rem));
+            gap: var(--spacing-small, 1rem);
+        }
+
+        cap-panel.island:has(> cap-header) > cap-layout.panel-content:has(> [data-cap-surface='data']:only-child) {
+            --panel-content-padding: 0;
         }
 
         cap-panel[aria-disabled="true"] {
@@ -1854,30 +1874,24 @@ cap-routeoutlet {
 
 cap-sidebar {
             display: flex;
-            min-width: 0;
-            min-height: 0;
-        }
-
-        cap-sidebar > aside {
-            display: flex;
-            flex: 1 1 auto;
             flex-direction: column;
             min-width: 0;
             min-height: 0;
+            flex: 1 1 auto;
             overflow: hidden;
         }
 
-        cap-sidebar > aside > cap-header,
-        cap-sidebar > aside > cap-toolbarcontent {
+        cap-sidebar > cap-header,
+        cap-sidebar > cap-toolbarcontent {
             flex: none;
         }
 
-        cap-sidebar > aside > cap-toolbarcontent {
+        cap-sidebar > cap-toolbarcontent {
             min-width: 0;
             overflow-x: auto;
         }
 
-        cap-sidebar > aside > cap-content {
+        cap-sidebar > cap-content {
             flex: 1;
             min-height: 0;
             overflow: auto;
@@ -2062,20 +2076,23 @@ cap-tabpanel {
         }
 
 cap-textbox {
-            display: flex;
-            flex-flow: row nowrap;
+            display: grid;
+            grid-template-columns: minmax(var(--input-min-width, 6rem), 1fr);
             align-items: center;
-            justify-content: center;
-            min-height: var(--control-min-height, 2rem);
             min-width: 0;
-            line-height: normal;
+        }
+
+        cap-textbox:has(> label) {
+            grid-template-columns: max-content minmax(var(--input-min-width, 6rem), 1fr);
         }
 
         cap-textbox > input {
-            min-height: var(--control-min-height, 2rem);
+            min-height: var(--control-min-height, 2em);
             width: var(--input-width, 15rem);
             max-width: 100%;
             min-width: var(--input-min-width, 6rem);
+            margin: 0;
+            padding: 0 5px;
             color: var(--input-color);
             background: var(--input-background);
             border: var(--input-border);
@@ -2083,6 +2100,7 @@ cap-textbox {
             box-shadow: var(--input-shadow);
             box-sizing: border-box;
             font: inherit;
+            appearance: none;
             pointer-events: all;
             user-select: text;
             white-space: nowrap;
@@ -2134,7 +2152,7 @@ cap-textbox {
         }
 
 cap-toggle {
-            min-height: var(--control-min-height, 2rem);
+            min-height: var(--control-min-height, 2em);
             display: flex;
             position: relative;
             flex-flow: row nowrap;
@@ -2152,7 +2170,7 @@ cap-toggle {
 
         cap-toggle > cap-options {
             display: flex;
-            min-height: var(--control-min-height, 2rem);
+            min-height: var(--control-min-height, 2em);
             border-radius: var(--radius-md);
             box-shadow: var(--toggle-group-shadow);
             box-sizing: border-box;
@@ -2162,63 +2180,98 @@ cap-toggle {
         }
 
         cap-toggle > cap-options > button[role="radio"] {
-            min-height: var(--control-min-height, 2rem);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-height: var(--control-min-height, 2em);
+            min-width: 2em;
+            margin: 0;
+            padding: 0 6px;
             position: relative;
-            font-family: inherit;
-            font-size: var(--ui-font-size);
+            isolation: isolate;
+            font: inherit;
             color: var(--button-color);
-            background: var(--toggle-button-background);
+            background: transparent;
             user-select: none;
             white-space: nowrap;
             box-sizing: border-box;
+            border: 0;
+            border-radius: 0;
+            cursor: default;
+        }
+
+        /* Chrome may overlap adjacent segments, but never moves their text. */
+        cap-toggle > cap-options > button[role="radio"]::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            z-index: -1;
+            pointer-events: none;
+            box-sizing: border-box;
+            background: var(--toggle-button-background);
             border: var(--button-border);
             border-left: none;
             border-right: none;
-            border-radius: 0;
+            border-radius: inherit;
             box-shadow: var(--toggle-button-shadow);
-            cursor: default;
         }
 
-        cap-toggle > cap-options > button[role="radio"]:hover:not(:disabled)[aria-checked="false"] {
+        cap-toggle > cap-options > 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);
+        }
+
+        cap-toggle > cap-options > button[role="radio"]:first-of-type::before {
             border: var(--button-border);
             border-right: none;
         }
 
         cap-toggle > cap-options > button[role="radio"]:last-of-type {
             border-radius: 0 var(--radius-md) var(--radius-md) 0;
+        }
+
+        cap-toggle > cap-options > button[role="radio"]:only-of-type {
+            border-radius: var(--radius-md);
+        }
+
+        cap-toggle > cap-options > button[role="radio"]:last-of-type::before {
             border: var(--button-border);
             border-left: none;
         }
 
         cap-toggle > cap-options > button[role="radio"][aria-checked="false"]
-        + [role="radio"][aria-checked="false"] {
+        + [role="radio"][aria-checked="false"]::before {
             border-inline-start: var(--button-border);
             border-inline-start-color: var(--toggle-inactive-shared-border-color);
         }
 
         cap-toggle > cap-options > button[role="radio"][aria-checked="true"] {
             color: var(--selection-color);
+            z-index: var(--toggle-button-selected-z-index);
+        }
+
+        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;
-            margin-inline: var(--toggle-button-selected-inline-overlap);
-            z-index: var(--toggle-button-selected-z-index);
+            inset-inline: var(--toggle-button-selected-inline-overlap);
         }
 
         cap-toggle > cap-options > button[role="radio"]:disabled {
             color: var(--input-color-disabled);
+            cursor: not-allowed;
+        }
+
+        cap-toggle > cap-options > button[role="radio"]:disabled::before {
             background: var(--button-background-disabled);
             border: var(--button-border-disabled);
-            cursor: not-allowed;
         }
 
         cap-toggle > cap-options[aria-busy="true"]:not([aria-invalid="true"])
-        > button[role="radio"] {
+        > button[role="radio"]::before {
             background: var(--working-background-image), var(--toggle-button-background);
             background-repeat: repeat, no-repeat;
             background-size: 2rem 2rem, 100% 100%;
@@ -2226,13 +2279,13 @@ cap-toggle {
         }
 
         cap-toggle > cap-options[aria-busy="true"]:not([aria-invalid="true"])
-        > button[role="radio"][aria-checked="true"] {
+        > button[role="radio"][aria-checked="true"]::before {
             background: var(--working-background-image), var(--toggle-button-background-checked);
             background-repeat: repeat, no-repeat;
             background-size: 2rem 2rem, 100% 100%;
         }
 
-        cap-toggle > cap-options[aria-invalid="true"] > button[role="radio"] {
+        cap-toggle > cap-options[aria-invalid="true"] > button[role="radio"]::before {
             border-color: var(--error-color);
         }
 
@@ -2247,7 +2300,7 @@ cap-toggle {
         }
 
         @media (prefers-reduced-motion: reduce) {
-            cap-toggle > cap-options[aria-busy="true"] > button[role="radio"] {
+            cap-toggle > cap-options[aria-busy="true"] > button[role="radio"]::before {
                 animation: none !important;
             }
         }
@@ -2284,9 +2337,11 @@ cap-toolbar {
 cap-treeview {
             display: flex;
             position: relative;
+            flex: 1 1 auto;
             flex-direction: column;
-            min-width: 0;
-            min-height: 0;
+            min-inline-size: 0;
+            min-block-size: 0;
+            max-block-size: 100%;
             overflow: auto;
         }
 
@@ -2317,18 +2372,6 @@ cap-treeview {
             height: var(--ui-font-size);
         }
 
-        cap-treeview > [role="tree"][aria-busy="true"] > [role="treeitem"]::after {
-            content: "";
-            position: absolute;
-            z-index: 1;
-            inset: 0;
-            background-image: var(--working-background-image);
-            background-repeat: repeat;
-            background-size: 2rem 2rem;
-            animation: cap-working-progress .55s linear infinite;
-            pointer-events: none;
-        }
-
         cap-treeview [role="treeitem"]:hover {
             background: var(--button-background-hover);
         }
@@ -2370,12 +2413,6 @@ cap-treeview {
             outline-offset: -1px;
         }
 
-        @media (prefers-reduced-motion: reduce) {
-            cap-treeview > [role="tree"][aria-busy="true"] > [role="treeitem"]::after {
-                animation: none !important;
-            }
-        }
-
         @media (forced-colors: active) {
             cap-treeview [role="treeitem"][aria-selected="true"] {
                 outline: 2px solid Highlight;