@capillaryjs/capillary-ui 1.0.0-alpha.1

package/styles/structural.css

@@ -0,0 +1,2388 @@
+/* Generated by scripts/build-structural-css.mjs. Do not edit directly. */
+
+.cap-fill-horizontal,
+        .cap-fill-vertical {
+            box-sizing: border-box;
+            background: var(--application-background);
+            color: var(--ui-color);
+            font-family: var(--font-family);
+            font-size: var(--font-size);
+            line-height: var(--line-height);
+        }
+
+        .cap-fill-horizontal {
+            width: 100vw;
+            max-width: 100vw;
+            min-width: 0;
+            overflow-x: auto;
+        }
+
+        .cap-fill-vertical {
+            height: 100vh;
+            max-height: 100vh;
+            min-height: 0;
+            overflow-y: auto;
+        }
+
+        .cap-layout-horizontal,
+        .cap-layout-vertical {
+            display: flex;
+            align-items: stretch;
+            min-inline-size: 0;
+            min-block-size: 0;
+        }
+
+        .cap-layout-horizontal {
+            flex-direction: row;
+        }
+
+        .cap-layout-vertical {
+            flex-direction: column;
+        }
+
+        .cap-size-natural {
+            flex: 0 0 auto;
+        }
+
+        .cap-size-flexible {
+            flex: 1 1 0;
+            min-inline-size: 0;
+            min-block-size: 0;
+        }
+
+        .cap-scroll {
+            overflow: auto;
+            min-inline-size: 0;
+            min-block-size: 0;
+        }
+
+        .colored {
+            --colored-base-bg:
+                    linear-gradient(
+                            15deg,
+                            var(--c1) 0%,
+                            var(--c2) 65%,
+                            var(--c2) 65%,
+                            var(--c3) 100%
+                    );
+
+            background: var(--colored-base-bg);
+            box-shadow: var(--colored-shadow);
+            border-radius: var(--ui-border-radius);
+        }
+
+        .app-footer.island,
+        .island {
+            box-sizing: border-box;
+            min-width: 0;
+            min-height: 0;
+            margin: var(--island-margin);
+            padding: var(--island-padding);
+            background: var(--island-background);
+            border: var(--island-border);
+            border-radius: var(--island-radius);
+            box-shadow: var(--island-shadow);
+        }
+
+        .cap-fill-horizontal.island,
+        .cap-fill-horizontal .island {
+            max-width: calc(100% - (2 * var(--island-margin)));
+            overflow-x: auto;
+        }
+
+        .cap-fill-vertical.island,
+        .cap-fill-vertical .island {
+            max-height: calc(100% - (2 * var(--island-margin)));
+            overflow-y: auto;
+        }
+
+        label[data-cap] {
+            user-select: none;
+        }
+
+cap-breadcrumb {
+            display: block;
+            min-width: 0;
+            user-select: none;
+        }
+
+        cap-breadcrumb > nav > ol {
+            display: flex;
+            flex-flow: row wrap;
+            align-items: center;
+            gap: var(--breadcrumb-gap, 0.375rem);
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            min-width: 0;
+        }
+
+        cap-breadcrumb > nav > ol > li {
+            display: inline-flex;
+            align-items: center;
+            min-width: 0;
+        }
+
+        cap-breadcrumb > nav > ol > li + li::before {
+            content: "/";
+            margin-inline-end: var(--breadcrumb-gap, 0.375rem);
+            color: var(--breadcrumb-separator-color, var(--muted-color, currentColor));
+            opacity: 0.6;
+        }
+
+        cap-breadcrumb > nav > ol > li > a {
+            color: var(--breadcrumb-link-color, inherit);
+            text-decoration: none;
+            white-space: nowrap;
+        }
+
+        cap-breadcrumb > nav > ol > li > a:hover {
+            text-decoration: underline;
+        }
+
+        cap-breadcrumb > nav > ol > li > [aria-current="page"] {
+            font-weight: var(--breadcrumb-current-font-weight, 600);
+        }
+
+cap-button > button {
+            min-height: var(--control-min-height, 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);
+            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));
+            user-select: none;
+            white-space: nowrap;
+        }
+
+        cap-button {
+            display: inline-flex;
+            position: relative;
+            flex-flow: row wrap;
+        }
+
+        cap-button > button:hover:not(:disabled, [aria-disabled="true"]) {
+            background: var(--button-background-hover);
+        }
+
+        cap-button > button:active:not(:disabled, [aria-disabled="true"]) {
+            background: var(--button-background-active);
+            border-style: var(--button-border-style-active);
+            box-shadow: var(--button-shadow-active);
+        }
+
+        cap-button > button:focus-visible {
+            outline: 2px solid transparent;
+            outline-offset: 1px;
+            box-shadow: var(--focus-ring);
+        }
+
+        cap-button > button:disabled,
+        cap-button > button[aria-disabled="true"] {
+            color: var(--input-color-disabled);
+            background: var(--button-background-disabled);
+            border: var(--button-border-disabled);
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+
+        cap-button > button[aria-busy="true"]:not([aria-invalid="true"]) {
+            background: var(--working-background-image), var(--button-background-disabled);
+            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);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            cap-button > button[aria-busy="true"] {
+                animation: none !important;
+            }
+        }
+
+        @media (forced-colors: active) {
+            cap-button > button[aria-invalid="true"] {
+                outline: 2px solid Mark;
+                outline-offset: 1px;
+            }
+        }
+
+cap-error {
+            position: absolute;
+            z-index: 1200;
+            inset-block-start: -.35em;
+            inset-inline-end: -.35em;
+            display: block;
+            width: 1.25em;
+            height: 1.25em;
+            margin: 0;
+            color: var(--error-color);
+            font-size: .875em;
+            line-height: 1.35;
+            outline: none;
+            box-sizing: border-box;
+        }
+
+        cap-error > cap-erroricon {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            width: 1.25em;
+            height: 1.25em;
+            color: var(--error-contrast);
+            background: var(--error-color);
+            border: 1px solid var(--error-color);
+            border-radius: 50%;
+            box-sizing: border-box;
+            font-weight: 700;
+            line-height: 1;
+            place-items: center;
+        }
+
+        cap-error > cap-erroricon::before {
+            content: "!";
+        }
+
+        cap-error > cap-errortext {
+            position: absolute;
+            z-index: 1;
+            inset-block-start: calc(100% + .25em);
+            inset-inline-end: 0;
+            display: block;
+            visibility: hidden;
+            width: max-content;
+            max-width: min(22rem, 80vw);
+            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);
+            box-shadow: var(--ui-shadow);
+            opacity: 0;
+            overflow-wrap: anywhere;
+            pointer-events: none;
+            transform: translateY(-.2em);
+            transition: opacity var(--motion-fast), transform var(--motion-fast), visibility 0s linear var(--motion-fast);
+        }
+
+        cap-error > cap-erroricon:hover + cap-errortext,
+        cap-error:focus-visible > cap-errortext {
+            visibility: visible;
+            opacity: 1;
+            transform: translateY(0);
+            transition-delay: 0s;
+        }
+
+        cap-error:focus-visible > cap-erroricon {
+            outline: 2px solid transparent;
+            outline-offset: 1px;
+            box-shadow: var(--focus-ring);
+        }
+
+        @media (forced-colors: active) {
+            cap-error > cap-erroricon,
+            cap-error > cap-errortext {
+                color: CanvasText;
+                background: Canvas;
+                border-color: Mark;
+                forced-color-adjust: auto;
+            }
+        }
+
+@keyframes cap-working-progress {
+            from { background-position: 0 0, 0 0; }
+            to { background-position: 2rem 0, 0 0; }
+        }
+
+cap-checkbox,
+cap-quadcheckbox,
+cap-radiobutton,
+cap-tricheckbox {
+            display: inline-flex;
+            position: relative;
+            flex-flow: row wrap;
+            line-height: 1;
+        }
+
+        cap-checkbox > label,
+        cap-quadcheckbox > label,
+        cap-radiobutton > label,
+        cap-tricheckbox > label {
+            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));
+            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;
+        }
+
+        cap-checkbox > label:has(> input:disabled),
+        cap-quadcheckbox > label:has(> input:disabled),
+        cap-radiobutton > label:has(> input:disabled),
+        cap-tricheckbox > label:has(> input:disabled) {
+            color: var(--checkable-label-color-disabled);
+            cursor: not-allowed;
+        }
+
+        cap-checkbox > label > input,
+        cap-quadcheckbox > label > input,
+        cap-radiobutton > label > input,
+        cap-tricheckbox > label > input {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            white-space: nowrap;
+            border: 0;
+            font: inherit;
+            font-size: var(--ui-font-size, inherit);
+        }
+
+        cap-checkbox > label > input + cap-checkshell,
+        cap-quadcheckbox > label > input + cap-checkshell,
+        cap-radiobutton > label > input + cap-checkshell,
+        cap-tricheckbox > label > input + cap-checkshell {
+            position: relative;
+            display: grid;
+            width: 1em;
+            height: 1em;
+            flex: 0 0 1em;
+            box-sizing: border-box;
+            text-align: center;
+            line-height: 120%;
+            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);
+            font-family: inherit;
+            font-size: 1em;
+            user-select: none;
+            place-items: center;
+        }
+
+        cap-checkbox > label > input:checked + cap-checkshell,
+        cap-quadcheckbox > label > input:checked + cap-checkshell,
+        cap-radiobutton > label > input:checked + cap-checkshell,
+        cap-tricheckbox > label > input:checked + cap-checkshell {
+            color: var(--checkbox-symbol-color, var(--selection-color, currentColor));
+            background: var(--checkbox-box-background-checked,
+                var(--selection-background, var(--ui-accent-color, Highlight)));
+            box-shadow: var(--checkbox-box-shadow-checked);
+        }
+
+        cap-checkbox > label > input:focus-visible + cap-checkshell,
+        cap-quadcheckbox > label > input:focus-visible + cap-checkshell,
+        cap-radiobutton > label > input:focus-visible + cap-checkshell,
+        cap-tricheckbox > label > input:focus-visible + cap-checkshell {
+            outline: 2px solid var(--focus-color, var(--ui-accent-color, Highlight));
+            outline-offset: 1px;
+        }
+
+        cap-checkbox > label > input:disabled + cap-checkshell,
+        cap-quadcheckbox > label > input:disabled + cap-checkshell,
+        cap-radiobutton > label > input:disabled + cap-checkshell,
+        cap-tricheckbox > label > input:disabled + cap-checkshell {
+            opacity: 0.6;
+            filter: saturate(0.6);
+        }
+
+        cap-checkbox > label > input[aria-busy="true"]:not([aria-invalid="true"]) + cap-checkshell,
+        cap-quadcheckbox > label > input[aria-busy="true"]:not([aria-invalid="true"]) + cap-checkshell,
+        cap-radiobutton > label > input[aria-busy="true"]:not([aria-invalid="true"]) + cap-checkshell,
+        cap-tricheckbox > label > input[aria-busy="true"]:not([aria-invalid="true"]) + cap-checkshell {
+            background: var(--working-background-image), var(--checkbox-box-background,
+                var(--ui-input-bg, transparent));
+            background-repeat: repeat, no-repeat;
+            background-size: 2rem 2rem, 100% 100%;
+            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);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            cap-checkbox > label > input[aria-busy="true"] + cap-checkshell,
+            cap-quadcheckbox > label > input[aria-busy="true"] + cap-checkshell,
+            cap-radiobutton > label > input[aria-busy="true"] + cap-checkshell,
+            cap-tricheckbox > label > input[aria-busy="true"] + cap-checkshell {
+                animation: none !important;
+            }
+        }
+
+        @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 {
+                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-timepicker,
+cap-textbox,
+cap-toggle {
+            display: flex;
+            flex-flow: row nowrap;
+            position: relative;
+            align-items: center;
+            gap: .5em;
+            min-height: var(--control-min-height, 2rem);
+            color: var(--ui-text-color);
+            font-size: var(--ui-font-size);
+            line-height: normal;
+            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-textbox,
+        cap-groupbox > cap-content > cap-layout > cap-toggle {
+            align-self: stretch;
+        }
+
+        cap-dropdown > label,
+        cap-datepicker > label,
+        cap-timepicker > label,
+        cap-textbox > label,
+        cap-toggle > label {
+            align-self: center;
+            user-select: none;
+            white-space: nowrap;
+        }
+
+cap-dropdown,
+cap-timepicker {
+            min-width: 0;
+        }
+
+        cap-dropdown > cap-selectshell,
+        cap-timepicker > cap-selectshell {
+            display: flex;
+            flex-flow: row nowrap;
+            position: relative;
+            isolation: isolate;
+            min-height: var(--control-min-height, 2rem);
+            min-width: 0;
+            box-sizing: border-box;
+            margin-left: auto;
+        }
+
+        cap-dropdown > cap-selectshell > select,
+        cap-timepicker > cap-selectshell > select {
+            position: relative;
+            z-index: 1;
+            min-height: var(--control-min-height, 2rem);
+            width: var(--input-width, 15rem);
+            max-width: 100%;
+            min-width: var(--input-min-width, 6rem);
+            padding: var(--space-xs) var(--space-sm);
+            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);
+            box-shadow: var(--dropdown-select-shadow);
+            box-sizing: border-box;
+            font: inherit;
+            appearance: var(--dropdown-appearance);
+            pointer-events: all;
+            user-select: none;
+            white-space: nowrap;
+        }
+
+        cap-dropdown > cap-selectshell::after,
+        cap-timepicker > cap-selectshell::after {
+            content: var(--dropdown-underlay-content);
+            position: absolute;
+            z-index: 0;
+            inset: 0;
+            background: var(--dropdown-underlay-background);
+            border: var(--dropdown-underlay-border);
+            border-radius: 0;
+            border-start-start-radius: var(--dropdown-underlay-start-radius);
+            border-end-start-radius: var(--dropdown-underlay-start-radius);
+            box-shadow: var(--dropdown-underlay-shadow);
+            box-sizing: border-box;
+            pointer-events: none;
+        }
+
+        cap-dropdown > cap-selectshell::before,
+        cap-timepicker > cap-selectshell::before {
+            content: var(--dropdown-trigger-content);
+            position: absolute;
+            z-index: 2;
+            inset-block: 0;
+            inset-inline-end: 0;
+            display: grid;
+            inline-size: var(--dropdown-trigger-width);
+            place-items: center;
+            color: var(--dropdown-trigger-color);
+            background: var(--dropdown-trigger-background);
+            border: var(--dropdown-trigger-border);
+            border-radius: 0;
+            border-start-end-radius: var(--dropdown-trigger-end-radius);
+            border-end-end-radius: var(--dropdown-trigger-end-radius);
+            box-shadow: var(--dropdown-trigger-shadow);
+            box-sizing: border-box;
+            pointer-events: none;
+        }
+
+        cap-dropdown > cap-selectshell:has(> select:hover:not(:disabled))::before,
+        cap-timepicker > 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 {
+            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 {
+            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 {
+            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 {
+            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"]) {
+            background: var(--working-background-image), var(--dropdown-select-background);
+            background-repeat: repeat, no-repeat;
+            background-size: 2rem 2rem, 100% 100%;
+            animation: cap-working-progress .55s linear infinite;
+        }
+
+        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"] {
+            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"] {
+                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 {
+                display: none;
+            }
+
+            cap-dropdown > cap-selectshell > select,
+            cap-timepicker > 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"] {
+                outline: 2px solid Mark;
+                outline-offset: 1px;
+            }
+        }
+
+cap-datatable {
+            display: block;
+            position: relative;
+            overflow: auto;
+        }
+
+        cap-datatable > p {
+            margin: 0;
+        }
+
+        cap-datatable > table {
+            border-collapse: collapse;
+            width: 100%;
+        }
+
+        cap-datatable thead:has([aria-expanded="true"]) {
+            position: relative;
+            z-index: 1100;
+        }
+
+        cap-datatable th,
+        cap-datatable td {
+            position: relative;
+            text-align: left;
+            padding: 0 var(--ui-padding);
+            font-weight: normal;
+        }
+
+        cap-datatable,
+        cap-datatable table,
+        cap-datatable tbody tr,
+        cap-datatable tbody tr td {
+            user-select: none;
+            pointer-events: all;
+        }
+
+        cap-datatable tr td {
+            background: var(--ui-table-bg-color);
+            line-height: calc(var(--ui-font-size) + var(--ui-padding));
+            font-size: var(--ui-font-size);
+            height: calc(var(--ui-font-size) + var(--ui-padding-h));
+        }
+
+        cap-datatable > table > tbody > tr:nth-child(even) > td {
+            background: var(--ui-table-bg-color2);
+        }
+
+        cap-datatable > table > tbody > tr[aria-selected="true"] > td {
+            color: var(--ui-select-text-color);
+            background: var(--ui-select-bg);
+        }
+
+        cap-datatable > table > tbody > tr:nth-child(even)[aria-selected="true"] > td {
+            background: var(--ui-select-bg-dark);
+        }
+
+        cap-datatable tr td cap-placeholder {
+            font-size: var(--ui-font-size);
+            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;
+        }
+
+        cap-datatable:has(> cap-error) > button {
+            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;
+            }
+        }
+
+cap-placeholder {
+            display: block;
+            width: 5em;
+            height: 1em;
+            background: #ccc;
+            border-radius: var(--ui-border-radius);
+            position: relative;
+        }
+
+        cap-placeholder::after {
+            content: "";
+            display: block;
+            position: absolute;
+            z-index: 1;
+            inset: 0;
+            margin: auto;
+            animation: cap-working-progress .55s linear infinite;
+            background-repeat: repeat;
+            background-size: 2rem 2rem;
+            background-image: var(--working-background-image);
+            border: 0 solid transparent;
+            border-radius: inherit;
+            box-sizing: border-box;
+            pointer-events: none;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            cap-placeholder::after {
+                animation: none !important;
+            }
+        }
+
+cap-datatable > table > thead {
+            color: var(--table-header-color);
+            background: var(--ui-gradient);
+        }
+
+        cap-datatable > table > thead > tr > th {
+            border: 2px groove #fff7;
+            border-left: none;
+        }
+
+        cap-datatable > table > thead > tr > th:last-child {
+            border-right: none;
+        }
+
+cap-datatable > table > thead > tr > th[aria-sort] {
+            position: relative;
+            padding-right: 24px;
+            user-select: var(--noselect-user-select);
+            cursor: var(--noselect-cursor);
+        }
+
+        cap-datatable > table > thead > tr > th[aria-sort] > button.sort {
+            appearance: none;
+            display: block;
+            width: 100%;
+            padding: 0;
+            color: inherit;
+            background: transparent;
+            border: 0;
+            font-family: inherit;
+            font-size: inherit;
+            font-weight: inherit;
+            line-height: inherit;
+            text-align: inherit;
+            cursor: pointer;
+        }
+
+        cap-datatable > table > thead > tr > th[aria-sort] > button.sort > span.sortindicator {
+            position: absolute;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 1em;
+            text-align: center;
+        }
+
+        cap-datatable > table > thead > tr > th[aria-sort] > button.filter {
+            appearance: none;
+            position: absolute;
+            right: 2px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 1em;
+            padding: 0;
+            color: inherit;
+            background: transparent;
+            border: 0;
+            font-family: inherit;
+            font-size: inherit;
+            line-height: inherit;
+            text-align: center;
+            cursor: pointer;
+            opacity: 0.5;
+        }
+
+        cap-datatable > table > thead > tr > th[aria-sort] > button.filter:hover {
+            opacity: 1;
+        }
+
+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);
+            z-index: 1000;
+            display: flex;
+            flex-flow: column nowrap;
+            align-items: flex-start;
+            left: 100%;
+            top: 0;
+            user-select: none;
+        }
+
+        cap-filterpanel > p {
+            margin: 0;
+        }
+
+        cap-filterpanel[aria-busy="true"]::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-filterpanel:has(> cap-error) {
+            border-color: var(--error-color);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            cap-filterpanel[aria-busy="true"]::after {
+                animation: none !important;
+            }
+        }
+
+cap-datepicker {
+            display: flex;
+            flex-flow: row nowrap;
+            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);
+            max-width: 100%;
+            min-width: var(--input-min-width, 6rem);
+            padding: var(--space-xs) var(--space-sm);
+            color: var(--input-color);
+            background: var(--input-background);
+            border: var(--input-border);
+            border-radius: var(--radius-md);
+            box-shadow: var(--input-shadow);
+            box-sizing: border-box;
+            font: inherit;
+            user-select: text;
+            cursor: text;
+        }
+
+        cap-datepicker > input:disabled,
+        cap-datepicker > 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 {
+            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"]) {
+            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 > 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;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            cap-datepicker > 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"] {
+                outline: 2px solid Mark;
+                outline-offset: 1px;
+            }
+        }
+
+cap-timepicker > cap-selectshell > select {
+            min-width: 7rem;
+        }
+
+cap-descriptionlist {
+            display: block;
+            user-select: none;
+        }
+
+        cap-descriptionlist > dl {
+            display: grid;
+            margin: 0;
+        }
+
+cap-dialog > dialog {
+            z-index: 2;
+            width: min(38rem, calc(100vw - 2rem));
+            max-height: min(42rem, calc(100dvh - 2rem));
+            padding: 0;
+            color: var(--panel-color);
+            background: var(--panel-background);
+            border: var(--panel-border);
+            border-radius: var(--panel-radius);
+            box-shadow: var(--dialog-shadow);
+            overflow: hidden;
+            isolation: isolate;
+        }
+
+        cap-dialog > dialog[open] {
+            display: flex;
+            flex-direction: column;
+        }
+
+        cap-dialog > dialog::backdrop {
+            background: var(--dialog-backdrop-background);
+        }
+
+        cap-dialog > dialog > header,
+        cap-dialog > dialog > p,
+        cap-dialog > dialog > cap-content,
+        cap-dialog > dialog > footer {
+            padding: var(--panel-padding, 0.75rem);
+        }
+
+        cap-dialog > dialog > header {
+            position: relative;
+            z-index: 1;
+            color: var(--dialog-header-color);
+            background: var(--dialog-header-background);
+            box-shadow: var(--section-header-shadow);
+            user-select: none;
+        }
+
+        cap-dialog > dialog > header h2,
+        cap-dialog > dialog > p {
+            margin: 0;
+        }
+
+        cap-dialog > dialog > header h2 {
+            font-size: 1.1em;
+            font-weight: 700;
+        }
+
+        cap-dialog > dialog > cap-content {
+            position: relative;
+            z-index: 0;
+            display: block;
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow: auto;
+        }
+
+        cap-dialog > dialog > footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: var(--spacing-small, 0.5rem);
+        }
+
+        @media (forced-colors: active) {
+            cap-dialog > dialog {
+                border: 2px solid CanvasText;
+            }
+
+            cap-dialog > dialog::backdrop {
+                background: Canvas;
+            }
+        }
+
+cap-app {
+            box-sizing: border-box;
+            display: block;
+            background: var(--application-background);
+            color: var(--ui-color);
+            font-family: var(--font-family);
+            font-size: var(--font-size);
+            line-height: var(--line-height);
+        }
+
+cap-groupbox,
+cap-optionsbox {
+            display: flex;
+            flex-flow: var(--cap-groupbox-flow, row nowrap);
+            align-items: stretch;
+            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);
+            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;
+        }
+
+        cap-groupbox > cap-header,
+        cap-optionsbox > cap-header {
+            display: grid;
+            place-items: var(--cap-groupbox-header-align, center);
+            box-sizing: border-box;
+            width: var(--cap-groupbox-header-width, 1.7em);
+            padding: var(--cap-groupbox-header-padding, 0.125em);
+            border-radius: var(--ui-border-radius);
+            color: var(--cap-groupbox-header-color, var(--section-header-color));
+            background: var(--cap-groupbox-header-background, var(--section-header-background));
+            box-shadow: var(--cap-groupbox-header-shadow, var(--section-header-shadow));
+            writing-mode: var(--cap-groupbox-header-writing, vertical-rl);
+            transform: var(--cap-groupbox-header-transform, rotate(180deg));
+            font-weight: normal;
+            font-size: var(--ui-font-size);
+            min-width: 0;
+            min-height: 0;
+        }
+
+        cap-groupbox > cap-content,
+        cap-optionsbox > cap-content {
+            display: block;
+            min-width: 0;
+            min-height: 0;
+            margin-left: var(--cap-groupbox-content-margin, .25em);
+        }
+
+        .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 {
+            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
+           defaults declared as var() fallbacks above. */
+        [data-cap-context='control'] {
+            --cap-groupbox-flow: row nowrap;
+            --cap-groupbox-gap: 0 0.35rem;
+            --cap-groupbox-padding: 0.125rem 0.35rem 0.125rem 0.125rem;
+            --cap-groupbox-border: 1px solid var(--ui-border-color);
+            --cap-groupbox-header-align: center;
+            --cap-groupbox-header-width: 1.7em;
+            --cap-groupbox-header-padding: 0.125em;
+            --cap-groupbox-header-color: var(--section-header-color);
+            --cap-groupbox-header-background: var(--section-header-background);
+            --cap-groupbox-header-shadow: var(--section-header-shadow);
+            --cap-groupbox-header-writing: vertical-rl;
+            --cap-groupbox-header-transform: rotate(180deg);
+            --cap-groupbox-content-margin: .25em;
+        }
+
+        [data-cap-context='form'] {
+            --cap-groupbox-flow: column nowrap;
+            --cap-groupbox-gap: 0.25rem 0;
+            --cap-groupbox-padding: 0.5rem;
+            --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-color: var(--text-color);
+            --cap-groupbox-header-background: none;
+            --cap-groupbox-header-shadow: none;
+            --cap-groupbox-header-writing: horizontal-tb;
+            --cap-groupbox-header-transform: none;
+            --cap-groupbox-content-margin: 0;
+        }
+
+        [data-cap-context='form'] cap-groupbox,
+        [data-cap-context='form'] cap-optionsbox {
+            flex: 1 1 auto;
+            align-self: stretch;
+            padding-top: 1em;
+        }
+
+        .cap-layout-horizontal cap-groupbox,
+        .cap-layout-horizontal cap-optionsbox {
+            max-width: 15rem;
+            min-width: 0;
+        }
+
+        .cap-layout-vertical  cap-groupbox,
+        .cap-layout-vertical  cap-optionsbox {
+            max-height: 15rem;
+            min-height: 0;
+        }
+
+        [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-header {
+            display: block;
+            color: var(--section-header-color);
+            border-radius: var(--ui-border-radius) var(--ui-border-radius) 0 0;
+            padding: .25em;
+            background: var(--section-header-background);
+            box-shadow: var(--section-header-shadow);
+            z-index: 1;
+            user-select: none;
+        }
+
+        cap-header > h1,
+        cap-header > h2,
+        cap-header > h3,
+        cap-header > h4,
+        cap-header > h5,
+        cap-header > h6 {
+            margin: 0;
+            font: inherit;
+        }
+
+cap-infopanel {
+            background: var(--panel-background);
+            border: var(--panel-border);
+            border-radius: var(--panel-radius);
+            box-shadow: var(--panel-shadow);
+            color: var(--panel-color);
+            display: flex;
+            flex-direction: column;
+            overflow: auto;
+            user-select: none;
+        }
+
+        cap-infopanel > dl {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            gap: var(--space-sm, 0.375rem) var(--space-md, 1rem);
+            margin: 0;
+            padding: var(--panel-padding, 0.75rem);
+        }
+
+        cap-infopanel > dl > dt {
+            font-weight: 600;
+            color: var(--info-panel-label-color, var(--ui-muted-text-color));
+        }
+
+        cap-infopanel > dl > dd {
+            margin: 0;
+        }
+
+cap-listview {
+            display: flex;
+            position: relative;
+            flex-direction: column;
+            overflow-y: auto;
+            height: 100%;
+            padding: var(--ui-padding-v) var(--ui-padding-h);
+            color: var(--ui-text-color);
+            background: var(--ui-input-bg);
+            border: var(--ui-input-border);
+            border-radius: var(--ui-border-radius);
+            box-shadow: var(--input-shadow);
+            box-sizing: border-box;
+            pointer-events: all;
+            user-select: none;
+            white-space: nowrap;
+        }
+
+        cap-listview > [role="listbox"],
+        cap-listview > ul[aria-hidden="true"] {
+            display: flex;
+            flex-direction: column;
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        cap-listview > [role="listbox"] > [role="option"] {
+            display: flex;
+            flex-flow: row nowrap;
+            position: relative;
+            min-height: calc(var(--ui-font-size) + var(--ui-padding-h) + var(--ui-padding-h));
+            line-height: calc(var(--ui-font-size) + var(--ui-padding) + var(--ui-padding));
+            font-size: var(--ui-font-size);
+            color: var(--ui-text-color);
+            border-radius: var(--ui-border-radius);
+            box-sizing: border-box;
+            user-select: none;
+        }
+
+        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 > [role="listbox"] > [role="option"]:hover {
+            background: var(--hover-bg-color, #f5f5f5);
+        }
+
+        cap-listview > [role="listbox"] > [role="option"][aria-selected="true"] {
+            background: var(--selected-bg-color, #e0e7ff);
+        }
+
+        cap-listview > [role="status"] {
+            margin: 0;
+            padding: var(--ui-padding);
+        }
+
+        cap-listview:has(> cap-error) {
+            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;
+                outline-offset: -2px;
+            }
+        }
+
+cap-navigationbar {
+            display: block;
+            flex: 0 0 auto;
+            min-width: 0;
+            color: var(--navigation-bar-color);
+            background: var(--navigation-bar-background);
+            border: var(--navigation-bar-border);
+            box-shadow: var(--navigation-bar-shadow);
+            user-select: none;
+        }
+
+        cap-navigationbar > nav,
+        cap-navigationbar > nav > ul {
+            min-width: 0;
+        }
+
+        cap-navigationbar > nav > ul {
+            display: flex;
+            flex-flow: row wrap;
+            gap: var(--navigation-bar-gap);
+
+            align-items: center;
+            justify-content: center;
+            margin: 0;
+            padding: var(--navigation-bar-padding);
+            list-style: none;
+        }
+
+        cap-navigationbar > nav > ul > li {
+            display: flex;
+        }
+
+        cap-navigationbar > nav > ul > li > a,
+        cap-navigationbar > nav > ul > li > span[aria-disabled="true"] {
+            display: inline-flex;
+            align-items: center;
+            min-height: var(--control-min-height, 2rem);
+            padding: var(--navigation-link-padding);
+            box-sizing: border-box;
+            color: var(--navigation-link-color);
+            background: var(--navigation-link-background);
+            border: var(--navigation-link-border);
+            border-radius: var(--navigation-link-radius);
+            box-shadow: var(--navigation-link-shadow);
+            font-family: inherit;
+            font-size: 1.1rem;
+            line-height: calc(var(--ui-font-size) + var(--ui-padding) + var(--ui-padding));
+            text-decoration: none;
+            white-space: nowrap;
+        }
+
+        cap-navigationbar > nav > ul > li > a:hover {
+            color: var(--navigation-link-color-hover);
+            background: var(--navigation-link-background-hover);
+        }
+
+        cap-navigationbar > nav > ul > li > a:active {
+            color: var(--navigation-link-color-active);
+            background: var(--navigation-link-background-active);
+        }
+
+        cap-navigationbar > nav > ul > li > a[aria-current="page"] {
+            color: var(--navigation-link-color-current);
+            background: var(--navigation-link-background-current);
+            box-shadow: var(--navigation-link-shadow-current);
+            font-weight: var(--navigation-link-font-weight-current);
+        }
+
+        cap-navigationbar > nav > ul > li > a:focus-visible {
+            outline: 2px solid transparent;
+            outline-offset: 1px;
+            box-shadow: var(--focus-ring);
+        }
+
+        cap-navigationbar > nav > ul > li > span[aria-disabled="true"] {
+            color: var(--navigation-link-color-disabled);
+            background: var(--navigation-link-background-disabled);
+            border: var(--navigation-link-border);
+            cursor: not-allowed;
+        }
+
+cap-optiongroup {
+            display: block;
+            position: relative;
+            min-width: 0;
+        }
+
+        cap-optiongroup > fieldset {
+            margin: 0;
+            padding: 0;
+            min-inline-size: 0;
+            border: 0;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        cap-optiongroup > fieldset > legend {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+            gap: 0.5rem;
+            width: 100%;
+            padding: 0 0 0.25em;
+            margin-bottom: 0.5em;
+            border-bottom: 1px solid var(--ui-border-color);
+            font: inherit;
+            user-select: none;
+        }
+
+        cap-optiongroup > fieldset > legend > span {
+            flex: 1;
+            min-width: 0;
+        }
+
+        cap-optiongroup > fieldset[aria-busy="true"]:not([aria-invalid="true"]) {
+            background-image: var(--working-background-image);
+            background-repeat: repeat;
+            background-size: 2rem 2rem;
+            animation: cap-working-progress .55s linear infinite;
+        }
+
+        cap-optiongroup > fieldset[aria-invalid="true"] {
+            border: 1px solid var(--error-color);
+            border-radius: var(--radius-md);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            cap-optiongroup > fieldset[aria-busy="true"] {
+                animation: none !important;
+            }
+        }
+
+        @media (forced-colors: active) {
+            cap-optiongroup > fieldset[aria-invalid="true"] {
+                outline: 2px solid Mark;
+                outline-offset: 1px;
+            }
+        }
+
+cap-optionsbox > cap-content {
+            display: flex;
+            flex-direction: column;
+            align-self: stretch;
+            flex: 1 1 0;
+            gap: .5em;
+        }
+
+        cap-optionsbox > cap-content * > fieldset > legend {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+            font-size: var(--ui-font-size);
+            color: var(--palette-neutral-950);
+            gap: 0.5rem;
+            width: 100%;
+            padding: 0 0 0.25em;
+            margin-bottom: 0.25em;
+            border-bottom: 1px solid var(--ui-border-color);
+            user-select: none;
+        }
+
+        cap-optionsbox > cap-content * > fieldset {
+            display: flex;
+            flex-flow: column;
+            justify-content: stretch;
+            justify-items: stretch;
+            align-items: stretch;
+            align-content: stretch;
+            box-sizing: border-box;
+            width: 100%;
+            gap: 0;
+            padding: .25em 0 .5em 0;
+        }
+
+cap-panel {
+            background: var(--panel-background);
+            border: var(--panel-border);
+            border-radius: var(--panel-radius);
+            box-shadow: var(--panel-shadow);
+            color: var(--panel-color);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+            flex: 0 0 auto;
+        }
+
+        cap-panel > cap-layout.panel-content {
+            flex: 1 1 auto;
+            min-width: 0;
+            min-height: 0;
+            padding: var(--panel-padding, 0.75rem);
+            gap: var(--spacing-medium, 1rem);
+        }
+
+        cap-panel[aria-disabled="true"] {
+            opacity: .65;
+        }
+
+cap-progressbar {
+            display: block;
+        }
+
+        cap-progressbar > label,
+        cap-progressbar > progress {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        cap-progressbar > cap-content {
+            position: relative;
+            display: block;
+            width: 100%;
+            min-height: var(--control-min-height);
+            border-radius: var(--ui-border-radius);
+            overflow: hidden;
+            background: var(--progress-track-background);
+            box-shadow: var(--progress-track-shadow);
+            color: var(--progress-track-color);
+            text-align: center;
+            line-height: var(--control-min-height);
+            box-sizing: border-box;
+            user-select: none;
+        }
+
+        cap-progressbar > cap-content > cap-progress {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: 0;
+            display: block;
+            width: var(--progress-width, 0%);
+            height: 100%;
+            border-radius: inherit;
+            overflow: hidden;
+            background: var(--progress-value-background);
+            box-shadow: var(--progress-value-shadow);
+        }
+
+        cap-progressbar > cap-content > cap-progress > cap-inverse {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: block;
+            width: var(--progress-inverse-width, 10000%);
+            height: 100%;
+            color: var(--progress-value-color);
+            text-align: center;
+            white-space: nowrap;
+        }
+
+        cap-progressbar > cap-content > cap-label {
+            position: relative;
+            z-index: 0;
+            display: block;
+            height: 100%;
+            white-space: nowrap;
+        }
+
+        cap-progressbar:has(> progress:indeterminate) > cap-content > cap-progress {
+            display: none;
+        }
+
+        cap-progressbar:has(> progress:indeterminate) > cap-content > cap-label {
+            z-index: 2;
+        }
+
+        cap-progressbar:has(> progress:indeterminate) > cap-content::after {
+            position: absolute;
+            z-index: 1;
+            inset: 1px;
+            content: "";
+            border-radius: inherit;
+            background-image: var(--working-background-image);
+            background-repeat: repeat;
+            background-size: 2rem 2rem;
+            animation: cap-working-progress .55s linear infinite;
+            opacity: .5;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            cap-progressbar:has(> progress:indeterminate) > cap-content::after {
+                animation: none !important;
+            }
+        }
+
+        @media (forced-colors: active) {
+            cap-progressbar > cap-content {
+                border: 1px solid CanvasText;
+                background: Canvas;
+                box-shadow: none;
+                color: CanvasText;
+            }
+
+            cap-progressbar > cap-content > cap-progress {
+                background: Highlight;
+                box-shadow: none;
+            }
+
+            cap-progressbar > cap-content > cap-progress > cap-inverse {
+                color: HighlightText;
+            }
+        }
+
+cap-radiogroup > fieldset {
+            display: flex;
+            flex-flow: column wrap;
+            gap: 0;
+            margin: 0;
+            padding: 0;
+            min-inline-size: 0;
+            border: 0;
+            user-select: none;
+        }
+
+        cap-radiogroup {
+            position: relative;
+        }
+
+        cap-radiogroup > fieldset > legend {
+            flex: 0 0 100%;
+            padding: 0;
+            margin-bottom: .5em;
+            border-bottom: 1px solid #aaa;
+        }
+
+        cap-radiogroup > fieldset[aria-invalid="true"] cap-checkshell {
+            border-color: var(--error-color);
+        }
+
+        cap-radiogroup > fieldset[aria-invalid="true"] cap-radiobutton > label {
+            color: var(--error-color);
+        }
+
+        @media (forced-colors: active) {
+            cap-radiogroup > fieldset[aria-invalid="true"] {
+                outline: 2px solid Mark;
+                outline-offset: 1px;
+            }
+        }
+
+cap-radiobutton > label > input[type="radio"] + cap-checkshell {
+            border-radius: 50%;
+        }
+
+        cap-radiobutton > label > input[type="radio"]:checked + cap-checkshell::after {
+            width: .4em;
+            height: .4em;
+            content: "";
+            border-radius: 50%;
+            background: var(--checkbox-symbol-color);
+        }
+
+cap-routeoutlet {
+            display: flex;
+            flex: 1 1 auto;
+            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] {
+            display: none;
+        }
+
+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;
+            overflow: hidden;
+        }
+
+        cap-sidebar > aside > cap-header,
+        cap-sidebar > aside > cap-toolbarcontent {
+            flex: none;
+        }
+
+        cap-sidebar > aside > cap-toolbarcontent {
+            min-width: 0;
+            overflow-x: auto;
+        }
+
+        cap-sidebar > aside > cap-content {
+            flex: 1;
+            min-height: 0;
+            overflow: auto;
+        }
+
+cap-splitview {
+            display: flex;
+            flex: 1 1 auto;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+        }
+
+        cap-splitview.horizontal {
+            flex-direction: row;
+        }
+
+        cap-splitview.vertical {
+            flex-direction: column;
+        }
+
+        cap-splitview > cap-primary {
+            flex: 0 0 var(--split-primary-size, 40%);
+        }
+
+        cap-splitview > cap-secondary {
+            flex: 1 1 0;
+        }
+
+        cap-splitview.horizontal > cap-primary {
+            min-inline-size: var(--split-primary-min-size, 96px);
+        }
+
+        cap-splitview.horizontal > cap-secondary {
+            min-inline-size: var(--split-secondary-min-size, 96px);
+        }
+
+        cap-splitview.vertical > cap-primary {
+            min-block-size: var(--split-primary-min-size, 96px);
+        }
+
+        cap-splitview.vertical > cap-secondary {
+            min-block-size: var(--split-secondary-min-size, 96px);
+        }
+
+        cap-splitview > cap-separator {
+            position: relative;
+            flex: none;
+            box-sizing: border-box;
+            background: var(--ui-border-color);
+            touch-action: none;
+            user-select: none;
+        }
+
+        cap-splitview > cap-separator::after {
+            content: '';
+            position: absolute;
+            border-radius: 999px;
+            background: currentColor;
+            opacity: 0;
+        }
+
+        cap-splitview > cap-separator:hover::after,
+        cap-splitview > cap-separator:focus-visible::after {
+            opacity: .45;
+        }
+
+        cap-splitview.horizontal > cap-separator {
+            inline-size: .45rem;
+            cursor: col-resize;
+        }
+
+        cap-splitview.horizontal > cap-separator::after {
+            inset-block: 35%;
+            inset-inline: 1px;
+        }
+
+        cap-splitview.vertical > cap-separator {
+            block-size: .45rem;
+            cursor: row-resize;
+        }
+
+        cap-splitview.vertical > cap-separator::after {
+            inset-inline: 35%;
+            inset-block: 1px;
+        }
+
+        cap-splitview[data-resizable="false"] > cap-separator {
+            cursor: default;
+        }
+
+cap-tabline {
+            display: flex;
+            background: var(--tabline-background);
+            flex-flow: row wrap;
+            overflow: hidden;
+            padding-top: 3px;
+            padding-inline-start: var(--tabline-padding-inline-start);
+            flex: 0 0 auto;
+            z-index: 0;
+        }
+
+        cap-tabline > button[role="tab"] {
+            position: relative;
+            min-height: calc(var(--control-min-height, 2rem) - 5px);
+            padding-block: 0;
+            padding-inline: var(--space-sm);
+            color: var(--button-color);
+            background: var(--tab-button-background);
+            border: none;
+            border-radius: var(--radius-md) var(--radius-md) 0 0;
+            box-shadow: var(--tab-button-shadow);
+            box-sizing: border-box;
+            align-self: flex-end;
+            cursor: default;
+            font-family: inherit;
+            font-size: var(--ui-font-size);
+            line-height: calc(var(--ui-font-size) + var(--ui-padding) + var(--ui-padding));
+            margin-block-start: 3px;
+            user-select: none;
+            white-space: nowrap;
+        }
+
+        cap-tabline > button[role="tab"]:hover:not(:disabled)[aria-selected="false"] {
+            background: var(--button-background-hover);
+        }
+
+        cap-tabline > button[role="tab"]:not(:disabled)[aria-selected="true"] {
+            min-height: var(--control-min-height, 2rem);
+            padding-block-start: 3px;
+            background: var(--tab-button-background-active);
+            box-shadow: var(--tab-button-shadow-active);
+            margin-block-start: 0;
+            z-index: 1;
+        }
+
+        cap-tabline > button[role="tab"]:not(:disabled)[aria-selected="false"]::after {
+            content: '';
+            position: absolute;
+            inset-inline: 0;
+            block-size: 1px;
+            inset-block-end: -1px;
+            box-shadow: var(--tab-button-inactive-bottom-shadow);
+            z-index: 1;
+        }
+
+        cap-tabline > button[role="tab"]:disabled {
+            color: var(--input-color-disabled);
+            background: var(--button-background-disabled);
+            border: var(--button-border-disabled);
+            cursor: not-allowed;
+        }
+
+cap-tabpanel {
+            background: var(--panel-background);
+            border-radius: var(--panel-radius);
+            box-shadow: var(--panel-shadow);
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        cap-tabpanel > section[role="tabpanel"] {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            overflow: auto;
+            padding: 3px;
+            z-index: 2;
+        }
+
+        cap-tabpanel > section[role="tabpanel"][hidden] {
+            display: none;
+        }
+
+        cap-tabpanel > section[role="tabpanel"] > cap-toolbar[role="toolbar"]:first-child {
+            width: calc(100% + 6px);
+            margin-block-start: -3px;
+            margin-inline-start: -3px;
+        }
+
+cap-textbox {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            justify-content: center;
+            min-height: var(--control-min-height, 2rem);
+            min-width: 0;
+            line-height: normal;
+        }
+
+        cap-textbox > input {
+            min-height: var(--control-min-height, 2rem);
+            width: var(--input-width, 15rem);
+            max-width: 100%;
+            min-width: var(--input-min-width, 6rem);
+            color: var(--input-color);
+            background: var(--input-background);
+            border: var(--input-border);
+            border-radius: var(--radius-md);
+            box-shadow: var(--input-shadow);
+            box-sizing: border-box;
+            font: inherit;
+            pointer-events: all;
+            user-select: text;
+            white-space: nowrap;
+            cursor: text;
+            margin-left: auto;
+        }
+
+        cap-textbox > input:disabled {
+            color: var(--input-color-disabled);
+            background: var(--input-background-disabled);
+            border-color: var(--ui-input-border-disabled);
+            cursor: not-allowed;
+        }
+
+        cap-textbox > input:focus-visible {
+            outline: 2px solid transparent;
+            outline-offset: 1px;
+            box-shadow: var(--focus-ring);
+        }
+
+        cap-textbox > 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-textbox > 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-textbox > input[aria-invalid="true"] {
+            border-color: var(--error-color);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            cap-textbox > input[aria-busy="true"] {
+                animation: none !important;
+            }
+        }
+
+        @media (forced-colors: active) {
+            cap-textbox > input[aria-invalid="true"] {
+                outline: 2px solid Mark;
+                outline-offset: 1px;
+            }
+        }
+
+cap-toggle {
+            min-height: var(--control-min-height, 2rem);
+            display: flex;
+            position: relative;
+            flex-flow: row nowrap;
+            align-content: center;
+            align-items: center;
+            gap: .75em;
+            color: var(--text-color);
+            outline: none;
+        }
+
+        cap-toggle > cap-label {
+            display: block;
+            align-self: center;
+        }
+
+        cap-toggle > cap-options {
+            display: flex;
+            min-height: var(--control-min-height, 2rem);
+            border-radius: var(--radius-md);
+            box-shadow: var(--toggle-group-shadow);
+            box-sizing: border-box;
+            cursor: pointer;
+            user-select: none;
+            margin-left: auto;
+        }
+
+        cap-toggle > cap-options > button[role="radio"] {
+            min-height: var(--control-min-height, 2rem);
+            position: relative;
+            font-family: inherit;
+            font-size: var(--ui-font-size);
+            color: var(--button-color);
+            background: var(--toggle-button-background);
+            user-select: none;
+            white-space: nowrap;
+            box-sizing: border-box;
+            border: var(--button-border);
+            border-left: none;
+            border-right: none;
+            border-radius: 0;
+            box-shadow: var(--toggle-button-shadow);
+            cursor: default;
+        }
+
+        cap-toggle > cap-options > button[role="radio"]:hover:not(:disabled)[aria-checked="false"] {
+            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: 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;
+            border: var(--button-border);
+            border-left: none;
+        }
+
+        cap-toggle > cap-options > button[role="radio"][aria-checked="false"]
+        + [role="radio"][aria-checked="false"] {
+            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);
+            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);
+        }
+
+        cap-toggle > cap-options > button[role="radio"]:disabled {
+            color: var(--input-color-disabled);
+            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"] {
+            background: var(--working-background-image), var(--toggle-button-background);
+            background-repeat: repeat, no-repeat;
+            background-size: 2rem 2rem, 100% 100%;
+            animation: cap-working-progress .55s linear infinite;
+        }
+
+        cap-toggle > cap-options[aria-busy="true"]:not([aria-invalid="true"])
+        > button[role="radio"][aria-checked="true"] {
+            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"] {
+            border-color: var(--error-color);
+        }
+
+        cap-toggle > cap-options > button[role="radio"][aria-checked="false"]
+        + [role="radio"][aria-checked="false"]::after {
+            content: '';
+            position: absolute;
+            inset-block: var(--toggle-inactive-separator-block-inset);
+            inline-size: 1px;
+            inset-inline-start: -1px;
+            background: var(--toggle-inactive-separator-background);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            cap-toggle > cap-options[aria-busy="true"] > button[role="radio"] {
+                animation: none !important;
+            }
+        }
+
+        @media (forced-colors: active) {
+            cap-toggle > cap-options[aria-invalid="true"] {
+                outline: 2px solid Mark;
+                outline-offset: 1px;
+            }
+        }
+
+cap-toolbar {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            color: var(--toolbar-color);
+            background: var(--toolbar-background);
+            border: var(--toolbar-border);
+            box-shadow: var(--toolbar-shadow);
+            gap: var(--toolbar-spacing, 1.5rem);
+            padding: var(--ui-padding);
+            user-select: none;
+        }
+
+        cap-toolbar > * {
+            margin: 0;
+        }
+
+        cap-toolbar[aria-orientation="vertical"] {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+cap-treeview {
+            display: flex;
+            position: relative;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            overflow: auto;
+        }
+
+        cap-treeview > [role="tree"],
+        cap-treeview > ul[aria-hidden="true"] {
+            display: grid;
+            align-content: start;
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        cap-treeview [role="treeitem"],
+        cap-treeview > ul[aria-hidden="true"] > li {
+            display: flex;
+            position: relative;
+            align-items: flex-start;
+            gap: 0.35rem;
+            min-width: 0;
+            padding: 0.38rem 0.5rem;
+            padding-inline-start: calc(0.5rem + var(--tree-depth) * 1.1rem);
+            cursor: default;
+            user-select: none;
+        }
+
+        cap-treeview > ul[aria-hidden="true"] cap-placeholder {
+            align-self: center;
+            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);
+        }
+
+        cap-treeview [role="treeitem"]:focus-visible {
+            outline: 2px solid transparent;
+            outline-offset: -2px;
+            box-shadow: var(--focus-ring);
+        }
+
+        cap-treeview [role="treeitem"][aria-selected="true"] {
+            color: var(--ui-select-text-color);
+            background: var(--ui-select-bg);
+        }
+
+        cap-treeview cap-expander {
+            flex: 0 0 1rem;
+            text-align: center;
+        }
+
+        cap-treeview [role="treeitem"][aria-expanded] > cap-expander {
+            cursor: pointer;
+        }
+
+        cap-treeview cap-label {
+            display: block;
+            flex: 1 1 auto;
+            min-width: 0;
+            overflow-wrap: anywhere;
+        }
+
+        cap-treeview > [role="status"] {
+            margin: 0;
+            padding: var(--ui-padding, 0.75rem);
+        }
+
+        cap-treeview:has(> cap-error) {
+            outline: 1px solid var(--error-color);
+            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;
+                forced-color-adjust: auto;
+            }
+
+            cap-treeview:has(> cap-error) {
+                outline: 2px solid Mark;
+            }
+        }