@sylwellsoftware/fray 0.7.0 → 1.0.0

package/styles/structural.css

@@ -1,158 +1,129 @@
 /* Generated by scripts/build-structural-css.mjs. Do not edit directly. */
 
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    scroll-behavior: auto !important;
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-@media (forced-colors: active) {
-  :focus-visible {
-    outline: 2px solid Highlight !important;
-    outline-offset: 2px !important;
-  }
-}
-
-/* uiline */
-button,
-th[aria-sort] > [data-part="sort"],
-th[aria-sort] > [data-part="filter-toggle"],
-fray-tab-line > button[role="tab"],
-fieldset:has(> [data-part="options"]) > [data-part="options"],
-fieldset:has(> [data-part="options"]) [role="radio"] {
-  box-sizing: border-box;
-  min-height: var(--control-min-height, 2rem);
-  cursor: pointer;
-  user-select: none;
-}
-
-/* button */
-button,
-th[aria-sort] > [data-part="sort"],
-th[aria-sort] > [data-part="filter-toggle"],
-fray-tab-line > button[role="tab"],
-fieldset:has(> [data-part="options"]) [role="radio"] {
-  box-sizing: border-box;
-  cursor: default;
-  user-select: none;
-}
-
-/* button:disabled */
-button:disabled,
-th[aria-sort] > [data-part="sort"]:disabled,
-th[aria-sort] > [data-part="filter-toggle"]:disabled,
-fray-tab-line > button[role="tab"]:disabled,
-fieldset:has(> [data-part="options"]) [role="radio"]:disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* labeledinput */
-fray-color-picker,
-fray-dropdown,
-fray-textbox,
-fray-theme-picker {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  gap: .5em;
-}
-
-/* inputline */
-fray-color-picker,
-fray-color-picker > select,
-fray-dropdown,
-fray-dropdown > select,
-fray-list-view > [role="listbox"] > [role="option"],
-fray-textbox,
-fray-textbox > input,
-fray-theme-picker,
-fray-theme-picker > select {
-  display: flex;
-  flex-flow: row nowrap;
-  position: relative;
-  min-height: var(--control-min-height, 2rem);
-  box-sizing: border-box;
-}
-
-/* input */
-fray-color-picker > select,
-fray-dropdown > select,
-fray-textbox > input,
-fray-theme-picker > select {
-  pointer-events: all;
-  width: var(--input-width, 15rem);
-  box-sizing: border-box;
-  white-space: nowrap;
-}
-
-/* after */
-fray-placeholder::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-/* working */
-fray-placeholder::after {
-  display: inline;
-  position: absolute;
-  z-index: 1;
-  margin: auto;
-  animation: fray-placeholder-progress 0.8s 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;
-}
-
-/* noselect */
-th[aria-sort] {
-  user-select: var(--noselect-user-select);
-  cursor: var(--noselect-cursor);
-}
-
-/* inputlike */
-fray-list-view {
-  pointer-events: all;
-  box-sizing: border-box;
-  white-space: nowrap;
-}
-
-button {
+.fray-fill-horizontal,
+        .fray-fill-vertical {
+            box-sizing: border-box;
+            background: var(--application-background);
+        }
+
+        .fray-fill-horizontal {
+            width: 100vw;
+            max-width: 100vw;
+            min-width: 0;
+            overflow-x: auto;
+        }
+
+        .fray-fill-vertical {
+            height: 100vh;
+            max-height: 100vh;
+            min-height: 0;
+            overflow-y: auto;
+        }
+
+        .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);
+        }
+
+        .fray-fill-horizontal.island,
+        .fray-fill-horizontal .island {
+            max-width: calc(100% - (2 * var(--island-margin)));
+            overflow-x: auto;
+        }
+
+        .fray-fill-vertical.island,
+        .fray-fill-vertical .island {
+            max-height: calc(100% - (2 * var(--island-margin)));
+            overflow-y: auto;
+        }
+
+fray-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;
         }
 
-fray-check-box {
-            display: inline-block;
+        fray-button > button:hover:not(:disabled, [aria-disabled="true"]) {
+            background: var(--button-background-hover);
+        }
+
+        fray-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);
+        }
+
+        fray-button > button:focus-visible {
+            outline: 2px solid transparent;
+            outline-offset: 1px;
+            box-shadow: var(--focus-ring);
+        }
+
+        fray-button > button:disabled,
+        fray-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;
         }
 
-        fray-check-box > label {
+fray-checkbox,
+fray-quadcheckbox,
+fray-tricheckbox {
             display: inline-flex;
+            line-height: 1;
+        }
+
+        fray-checkbox > label,
+        fray-quadcheckbox > label,
+        fray-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: 0.35em;
+            gap: .3em;
+            align-content: center;
+            justify-content: center;
+            justify-items: center;
             cursor: pointer;
+            user-select: none;
         }
 
-        fray-check-box[data-disabled] > label {
+        fray-checkbox > label:has(> input:disabled),
+        fray-quadcheckbox > label:has(> input:disabled),
+        fray-tricheckbox > label:has(> input:disabled) {
+            color: var(--checkable-label-color-disabled);
             cursor: not-allowed;
         }
 
-        fray-check-box input[type="checkbox"] {
+        fray-checkbox > label > input,
+        fray-quadcheckbox > label > input,
+        fray-tricheckbox > label > input {
             position: absolute;
             width: 1px;
             height: 1px;
@@ -166,218 +137,548 @@ fray-check-box {
             font-size: var(--ui-font-size, inherit);
         }
 
-        fray-check-box input[type="checkbox"] + .checkboxshell {
+        fray-checkbox > label > input + fray-checkshell,
+        fray-quadcheckbox > label > input + fray-checkshell,
+        fray-tricheckbox > label > input + fray-checkshell {
             position: relative;
-            display: inline-grid;
+            display: grid;
             width: 1em;
             height: 1em;
             flex: 0 0 1em;
-            overflow: hidden;
             box-sizing: border-box;
-            line-height: 1;
-            place-items: center;
+            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;
         }
 
-        fray-check-box input[type="checkbox"]:checked + .checkboxshell {
+        fray-checkbox > label > input:checked + fray-checkshell,
+        fray-quadcheckbox > label > input:checked + fray-checkshell,
+        fray-tricheckbox > label > input:checked + fray-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);
         }
 
-        fray-check-box input[type="checkbox"]:focus-visible + .checkboxshell {
+        fray-checkbox > label > input:focus-visible + fray-checkshell,
+        fray-quadcheckbox > label > input:focus-visible + fray-checkshell,
+        fray-tricheckbox > label > input:focus-visible + fray-checkshell {
             outline: 2px solid var(--focus-color, var(--ui-accent-color, Highlight));
             outline-offset: 1px;
         }
 
-        fray-check-box input[type="checkbox"]:disabled + .checkboxshell {
+        fray-checkbox > label > input:disabled + fray-checkshell,
+        fray-quadcheckbox > label > input:disabled + fray-checkshell,
+        fray-tricheckbox > label > input:disabled + fray-checkshell {
             opacity: 0.6;
+            filter: saturate(0.6);
+        }
+
+fray-checkbox > label > input[value="require"] + fray-checkshell,
+fray-quadcheckbox > label > input[value="require"] + fray-checkshell,
+fray-tricheckbox > label > input[value="require"] + fray-checkshell {
+            color: var(--palette-contrast-light);
+            background: var(--palette-green);
+            box-shadow: var(--checkbox-box-shadow-checked);
         }
 
-fray-color-picker {
+        fray-checkbox > label > input[value="deny"] + fray-checkshell,
+        fray-quadcheckbox > label > input[value="deny"] + fray-checkshell,
+        fray-tricheckbox > label > input[value="deny"] + fray-checkshell {
+            color: var(--palette-contrast-light);
+            background: var(--palette-red);
+            box-shadow: var(--checkbox-box-shadow-checked);
+        }
+
+fray-colorpicker,
+fray-dropdown,
+fray-textbox,
+fray-themepicker {
+            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: calc(var(--ui-font-size) + var(--ui-padding) + var(--ui-padding));
+            box-sizing: border-box;
+            user-select: none;
+        }
+
+        fray-colorpicker > label,
+        fray-dropdown > label,
+        fray-textbox > label,
+        fray-themepicker > label {
+            user-select: none;
+            white-space: nowrap;
+        }
+
+fray-colorpicker > fray-selectshell,
+fray-dropdown > fray-selectshell,
+fray-themepicker > fray-selectshell {
+            display: flex;
+            flex-flow: row nowrap;
+            position: relative;
+            isolation: isolate;
+            min-height: var(--control-min-height, 2rem);
+            box-sizing: border-box;
+        }
+
+        fray-colorpicker > fray-selectshell > select,
+        fray-dropdown > fray-selectshell > select,
+        fray-themepicker > fray-selectshell > select {
             position: relative;
+            z-index: 1;
+            min-height: var(--control-min-height, 2rem);
+            width: var(--input-width, 15rem);
+            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;
+            white-space: nowrap;
+        }
+
+        fray-colorpicker > fray-selectshell::after,
+        fray-dropdown > fray-selectshell::after,
+        fray-themepicker > fray-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;
         }
 
-        fray-color-picker > select {
+        fray-colorpicker > fray-selectshell::before,
+        fray-dropdown > fray-selectshell::before,
+        fray-themepicker > fray-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;
+        }
+
+        fray-colorpicker > fray-selectshell:has(> select:hover:not(:disabled))::before,
+        fray-dropdown > fray-selectshell:has(> select:hover:not(:disabled))::before,
+        fray-themepicker > fray-selectshell:has(> select:hover:not(:disabled))::before {
+            background: var(--dropdown-trigger-background-hover);
+            box-shadow: var(--dropdown-trigger-shadow-hover);
+        }
+
+        fray-colorpicker > fray-selectshell:has(> select:disabled)::before,
+        fray-dropdown > fray-selectshell:has(> select:disabled)::before,
+        fray-themepicker > fray-selectshell:has(> select:disabled)::before {
+            color: var(--input-color-disabled);
+            background: var(--dropdown-trigger-background-disabled);
+            border: var(--dropdown-trigger-border-disabled);
+        }
+
+        fray-colorpicker > fray-selectshell:has(> select:disabled)::after,
+        fray-dropdown > fray-selectshell:has(> select:disabled)::after,
+        fray-themepicker > fray-selectshell:has(> select:disabled)::after {
+            background: var(--dropdown-underlay-background-disabled);
+            border: var(--dropdown-underlay-border-disabled);
+        }
+
+        fray-colorpicker > fray-selectshell > select:focus-visible,
+        fray-dropdown > fray-selectshell > select:focus-visible,
+        fray-themepicker > fray-selectshell > select:focus-visible {
+            outline: 2px solid transparent;
+            outline-offset: 1px;
+            box-shadow: var(--focus-ring);
+        }
+
+        @media (forced-colors: active) {
+            fray-colorpicker > fray-selectshell::before,
+            fray-dropdown > fray-selectshell::before,
+            fray-themepicker > fray-selectshell::before,
+            fray-colorpicker > fray-selectshell::after,
+            fray-dropdown > fray-selectshell::after,
+            fray-themepicker > fray-selectshell::after {
+                display: none;
+            }
+
+            fray-colorpicker > fray-selectshell > select,
+            fray-dropdown > fray-selectshell > select,
+            fray-themepicker > fray-selectshell > select {
+                appearance: auto;
+                padding-inline-end: var(--space-sm);
+            }
+        }
+
+fray-colorpicker > fray-selectshell > select,
+fray-themepicker > fray-selectshell > select {
             min-width: 8rem;
         }
 
-fray-data-table {
+fray-datatable {
+            display: block;
             overflow: auto;
         }
 
-        fray-data-table > table {
-            width: 100%;
+        fray-datatable > p {
+            margin: 0;
+        }
+
+        fray-datatable > table {
             border-collapse: collapse;
+            width: 100%;
         }
 
-        fray-data-table thead:has([aria-expanded="true"]) {
+        fray-datatable thead:has([aria-expanded="true"]) {
             position: relative;
             z-index: 1100;
         }
 
-        fray-data-table th,
-        fray-data-table td {
-            padding: var(--ui-padding-v) var(--ui-padding-h);
-            text-align: start;
+        fray-datatable th,
+        fray-datatable td {
+            text-align: left;
+            padding: 0 var(--ui-padding);
+            font-weight: normal;
         }
 
-        fray-data-table tbody tr[data-fray-selectable-row] {
-            cursor: default;
+        fray-datatable,
+        fray-datatable table,
+        fray-datatable tbody tr,
+        fray-datatable tbody tr td {
             user-select: none;
+            pointer-events: all;
+        }
+
+        fray-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));
+        }
+
+        fray-datatable > table > tbody > tr:nth-child(even) > td {
+            background: var(--ui-table-bg-color2);
+        }
+
+        fray-datatable > table > tbody > tr[aria-selected="true"] > td {
+            color: var(--ui-select-text-color);
+            background: var(--ui-select-bg);
+        }
+
+        fray-datatable > table > tbody > tr:nth-child(even)[aria-selected="true"] > td {
+            background: var(--ui-select-bg-dark);
+        }
+
+        fray-datatable tr td fray-placeholder {
+            font-size: var(--ui-font-size);
+            height: var(--ui-font-size);
         }
 
 fray-placeholder {
             display: block;
-            min-width: 3rem;
+            width: 5em;
             height: 1em;
-            overflow: hidden;
-            background: currentColor;
+            background: #ccc;
             border-radius: var(--ui-border-radius);
-            opacity: 0.18;
             position: relative;
         }
 
+        fray-placeholder::after {
+            content: "";
+            display: block;
+            position: absolute;
+            z-index: 1;
+            inset: 0;
+            margin: auto;
+            animation: fray-placeholder-progress 0.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;
+        }
+
         @keyframes fray-placeholder-progress {
-            from { background-position: 0 0; }
+            from { background-position: 0rem 0; }
             to { background-position: 2rem 0; }
         }
 
-th[aria-sort] {
+        @media (prefers-reduced-motion: reduce) {
+            fray-placeholder::after {
+                animation: none;
+            }
+        }
+
+fray-datatable > table > thead {
+            color: var(--table-header-color);
+            background: var(--ui-gradient);
+        }
+
+        fray-datatable > table > thead > tr > th {
+            border: 2px groove #fff7;
+            border-left: none;
+        }
+
+        fray-datatable > table > thead > tr > th:last-child {
+            border-right: none;
+        }
+
+fray-datatable > table > thead > tr > th[aria-sort] {
             position: relative;
-            text-align: start;
+            padding-right: 24px;
+            user-select: var(--noselect-user-select);
+            cursor: var(--noselect-cursor);
+        }
+
+        fray-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;
+        }
+
+        fray-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;
         }
 
-        th[aria-sort] > [data-part="sort"],
-        th[aria-sort] > [data-part="filter-toggle"] {
-            width: auto;
+        fray-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;
         }
 
-        th[aria-sort] > [data-part="filter-toggle"] {
-            margin-inline-start: var(--ui-padding-h);
-            font-size: 0.75em;
+        fray-datatable > table > thead > tr > th[aria-sort] > button.filter:hover {
+            opacity: 1;
         }
 
-fray-filter-panel {
-            position: fixed;
-            z-index: 1100;
-            inset-block-start: 0;
-            inset-inline-end: 0;
+fray-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;
-            min-width: 12rem;
-            padding: var(--ui-padding);
             flex-flow: column nowrap;
-            align-items: stretch;
-            overflow-y: auto;
-        }
-
-div:has(> dt + dd) {
-            display: grid;
-            grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
-            gap: var(--spacing-small, 0.5rem);
-            padding-block: var(--spacing-small, 0.5rem);
+            align-items: flex-start;
+            left: 100%;
+            top: 0;
         }
 
-        div:has(> dt + dd) > dd {
-            min-width: 0;
+        fray-filterpanel > p {
             margin: 0;
-            overflow-wrap: anywhere;
         }
 
-        @media (max-width: 36rem) {
-            div:has(> dt + dd) {
-                grid-template-columns: minmax(0, 1fr);
-                gap: 0.15rem;
-            }
+fray-descriptionlist {
+            display: block;
         }
 
-dl:has(> div > dt + dd) {
+        fray-descriptionlist > dl {
             display: grid;
             margin: 0;
         }
 
-dialog {
+fray-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;
+        }
+
+        fray-dialog > dialog[open] {
+            display: flex;
+            flex-direction: column;
+        }
+
+        fray-dialog > dialog::backdrop {
+            background: var(--dialog-backdrop-background);
         }
 
-        dialog > header,
-        dialog > p,
-        dialog > [data-part="content"],
-        dialog > footer {
+        fray-dialog > dialog > header,
+        fray-dialog > dialog > p,
+        fray-dialog > dialog > fray-content,
+        fray-dialog > dialog > footer {
             padding: var(--panel-padding, 0.75rem);
         }
 
-        dialog > header h2,
-        dialog > p {
+        fray-dialog > dialog > header {
+            position: relative;
+            z-index: 1;
+            color: var(--dialog-header-color);
+            background: var(--dialog-header-background);
+            box-shadow: var(--section-header-shadow);
+        }
+
+        fray-dialog > dialog > header h2,
+        fray-dialog > dialog > p {
             margin: 0;
         }
 
-        dialog > [data-part="content"] {
+        fray-dialog > dialog > header h2 {
+            font-size: 1.1em;
+            font-weight: 700;
+        }
+
+        fray-dialog > dialog > fray-content {
+            position: relative;
+            z-index: 0;
+            display: block;
+            flex: 1 1 auto;
+            min-height: 0;
             overflow: auto;
         }
 
-        dialog > footer {
+        fray-dialog > dialog > footer {
             display: flex;
             justify-content: flex-end;
             gap: var(--spacing-small, 0.5rem);
         }
 
         @media (forced-colors: active) {
-            dialog {
+            fray-dialog > dialog {
                 border: 2px solid CanvasText;
             }
-        }
 
-fray-dropdown {
-            position: relative;
+            fray-dialog > dialog::backdrop {
+                background: Canvas;
+            }
         }
 
-fray-list-view {
+fray-listview {
             display: flex;
             flex-direction: column;
             overflow-y: auto;
-            min-height: 0;
+            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;
         }
 
-        fray-list-view > [role="listbox"],
-        fray-list-view > [data-part="loading"] {
+        fray-listview > [role="listbox"],
+        fray-listview > ul[aria-hidden="true"] {
             display: flex;
             flex-direction: column;
+            margin: 0;
+            padding: 0;
+            list-style: none;
         }
 
-        fray-list-view > [role="listbox"] > [role="option"] {
-            cursor: default;
+        fray-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;
         }
 
-        fray-list-view > [role="status"],
-        fray-list-view > [role="alert"] {
+        fray-listview > [role="listbox"] > [role="option"]:hover {
+            background: var(--hover-bg-color, #f5f5f5);
+        }
+
+        fray-listview > [role="listbox"] > [role="option"][aria-selected="true"] {
+            background: var(--selected-bg-color, #e0e7ff);
+        }
+
+        fray-listview > [role="status"],
+        fray-listview > [role="alert"] {
             margin: 0;
             padding: var(--ui-padding);
         }
 
 fray-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;
             overflow: auto;
             flex: 0 0 auto;
         }
 
-        fray-panel > header h2 {
-            margin: 0;
-            font: inherit;
-        }
-
-        fray-panel > [data-part="content"] {
+        fray-panel > fray-content {
             display: flex;
             flex: 1;
             overflow: auto;
@@ -385,52 +686,44 @@ fray-panel {
             gap: var(--spacing-medium, 1rem);
         }
 
-        fray-panel > [data-part="content"][data-orientation="horizontal"] {
+        fray-panel > fray-content.horizontal {
             flex-direction: row;
         }
 
-        fray-panel > [data-part="content"][data-orientation="vertical"] {
+        fray-panel > fray-content.vertical {
             flex-direction: column;
         }
 
-fray-progress-bar {
-            display: grid;
-            gap: var(--spacing-small, 0.5rem);
-        }
-
-        fray-progress-bar > [data-part="label-line"] {
-            display: flex;
-            justify-content: space-between;
-            gap: var(--spacing-medium, 1rem);
-        }
-
-        fray-progress-bar > progress {
-            width: 100%;
-            min-height: 0.8rem;
-        }
-
-        @media (forced-colors: active) {
-            fray-progress-bar > progress {
-                forced-color-adjust: auto;
-            }
-        }
-
-fray-quad-checkbox {
-            display: inline-block;
+        fray-panel[aria-disabled="true"] {
+            opacity: .65;
         }
 
-        fray-quad-checkbox > label {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.35em;
-            cursor: pointer;
+fray-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;
+        }
+
+        fray-header > h1,
+        fray-header > h2,
+        fray-header > h3,
+        fray-header > h4,
+        fray-header > h5,
+        fray-header > h6 {
+            margin: 0;
+            font: inherit;
         }
 
-        fray-quad-checkbox[data-disabled] > label {
-            cursor: not-allowed;
+fray-progressbar {
+            display: block;
         }
 
-        fray-quad-checkbox input[type="checkbox"] {
+        fray-progressbar > label,
+        fray-progressbar > progress {
             position: absolute;
             width: 1px;
             height: 1px;
@@ -440,166 +733,407 @@ fray-quad-checkbox {
             clip: rect(0 0 0 0);
             white-space: nowrap;
             border: 0;
-            font: inherit;
-            font-size: var(--ui-font-size, inherit);
         }
 
-        fray-quad-checkbox input[type="checkbox"] + .checkboxshell {
+        fray-progressbar > fray-content {
             position: relative;
-            display: inline-grid;
-            width: 1em;
-            height: 1em;
-            flex: 0 0 1em;
+            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;
-            line-height: 1;
-            place-items: center;
-            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));
-            font-family: inherit;
-            font-size: 1em;
-            user-select: none;
         }
 
-        fray-quad-checkbox input[type="checkbox"]:checked + .checkboxshell {
-            color: var(--checkbox-symbol-color, var(--selection-color, currentColor));
-            background: var(--checkbox-box-background-checked,
-                var(--selection-background, var(--ui-accent-color, Highlight)));
+        fray-progressbar > fray-content > fray-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);
         }
 
-        fray-quad-checkbox input[type="checkbox"]:focus-visible + .checkboxshell {
-            outline: 2px solid var(--focus-color, var(--ui-accent-color, Highlight));
-            outline-offset: 1px;
+        fray-progressbar > fray-content > fray-progress > fray-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;
         }
 
-        fray-quad-checkbox input[type="checkbox"]:disabled + .checkboxshell {
-            opacity: 0.6;
+        fray-progressbar > fray-content > fray-label {
+            position: relative;
+            z-index: 0;
+            display: block;
+            height: 100%;
+            white-space: nowrap;
+        }
+
+        fray-progressbar:has(> progress:indeterminate) > fray-content > fray-progress {
+            display: none;
+        }
+
+        fray-progressbar:has(> progress:indeterminate) > fray-content > fray-label {
+            z-index: 2;
+        }
+
+        fray-progressbar:has(> progress:indeterminate) > fray-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: fray-progressbar-indeterminate 0.55s linear infinite;
+            opacity: .5;
+        }
+
+        @keyframes fray-progressbar-indeterminate {
+            from { background-position: 0 0; }
+            to { background-position: 2rem 0; }
         }
 
-aside {
+        @media (forced-colors: active) {
+            fray-progressbar > fray-content {
+                border: 1px solid CanvasText;
+                background: Canvas;
+                box-shadow: none;
+                color: CanvasText;
+            }
+
+            fray-progressbar > fray-content > fray-progress {
+                background: Highlight;
+                box-shadow: none;
+            }
+
+            fray-progressbar > fray-content > fray-progress > fray-inverse {
+                color: HighlightText;
+            }
+        }
+
+fray-sidebar {
             display: flex;
-            flex-direction: column;
             min-width: 0;
             min-height: 0;
-            overflow: hidden;
         }
 
-        aside > header,
-        aside > [data-part="toolbar"] {
-            flex: 0 0 auto;
+        fray-sidebar > aside {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
         }
 
-        aside > header h2 {
-            margin: 0;
-            font: inherit;
+        fray-sidebar > aside > fray-header,
+        fray-sidebar > aside > fray-toolbarcontent {
+            flex: none;
         }
 
-        aside > [data-part="content"] {
-            flex: 1 1 auto;
-            min-width: 0;
+        fray-sidebar > aside > fray-content {
+            flex: 1;
             min-height: 0;
-            overflow-x: hidden;
-            overflow-y: auto;
+            overflow: auto;
         }
 
-fray-split-view {
-            display: grid;
+fray-splitview {
+            display: flex;
             flex: 1 1 auto;
             min-width: 0;
             min-height: 0;
             overflow: hidden;
         }
 
-        fray-split-view[data-direction="horizontal"] {
-            grid-template-columns:
-                var(--split-primary-size, minmax(16rem, 0.8fr))
-                minmax(0, 1.2fr);
+        fray-splitview.horizontal {
+            flex-direction: row;
         }
 
-        fray-split-view[data-direction="vertical"] {
-            grid-template-rows:
-                var(--split-primary-size, minmax(12rem, 0.8fr))
-                minmax(0, 1.2fr);
+        fray-splitview.vertical {
+            flex-direction: column;
         }
 
-        fray-split-view > [data-part] {
+        fray-splitview > fray-primary {
+            flex: 0 1 var(--split-primary-size, 40%);
+        }
+
+        fray-splitview > fray-secondary {
+            flex: 1;
+        }
+
+        fray-splitview > fray-primary,
+        fray-splitview > fray-secondary {
             min-width: 0;
             min-height: 0;
             overflow: auto;
         }
 
-        fray-split-view[data-direction="horizontal"] > [data-part="primary"] {
+        fray-splitview.horizontal > fray-primary {
             border-inline-end: 1px solid var(--ui-border-color);
         }
 
-        fray-split-view[data-direction="vertical"] > [data-part="primary"] {
+        fray-splitview.vertical > fray-primary {
             border-block-end: 1px solid var(--ui-border-color);
         }
 
-fray-tab-line {
+fray-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;
         }
 
-fray-tab-panel {
+        fray-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;
+        }
+
+        fray-tabline > button[role="tab"]:hover:not(:disabled)[aria-selected="false"] {
+            background: var(--button-background-hover);
+        }
+
+        fray-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;
+        }
+
+        fray-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;
+        }
+
+        fray-tabline > button[role="tab"]:disabled {
+            color: var(--input-color-disabled);
+            background: var(--button-background-disabled);
+            border: var(--button-border-disabled);
+            cursor: not-allowed;
+        }
+
+fray-tabpanel {
+            background: var(--panel-background);
+            border-radius: var(--panel-radius);
+            box-shadow: var(--panel-shadow);
             display: flex;
             flex-direction: column;
             width: 100%;
-            min-height: 0;
+            height: 100%;
             overflow: hidden;
         }
 
-        fray-tab-panel > [data-part="content"] {
+        fray-tabpanel > section[role="tabpanel"] {
             display: flex;
             flex-direction: column;
             flex: 1;
             overflow: auto;
+            padding: 3px;
+            z-index: 2;
+        }
+
+        fray-tabpanel > section[role="tabpanel"][hidden] {
+            display: none;
+        }
+
+        fray-tabpanel > section[role="tabpanel"] > fray-toolbar[role="toolbar"]:first-child {
+            width: calc(100% + 6px);
+            margin-block-start: -3px;
+            margin-inline-start: -3px;
         }
 
-fray-textbox input {
+fray-textbox > input {
+            min-height: var(--control-min-height, 2rem);
+            width: var(--input-width, 15rem);
+            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;
+            pointer-events: all;
+            user-select: text;
+            white-space: nowrap;
             cursor: text;
         }
 
+        fray-textbox > input:disabled {
+            color: var(--input-color-disabled);
+            background: var(--input-background-disabled);
+            border-color: var(--ui-input-border-disabled);
+            cursor: not-allowed;
+        }
+
+        fray-textbox > input:focus-visible {
+            outline: 2px solid transparent;
+            outline-offset: 1px;
+            box-shadow: var(--focus-ring);
+        }
+
         fray-textbox > [role="alert"] {
             margin: 0;
         }
 
-fray-theme-picker {
+fray-toggle {
+            display: inline-block;
+            inline-size: fit-content;
+            max-inline-size: 100%;
+        }
+
+        fray-toggle > fray-label,
+        fray-toggle > fray-error {
+            display: block;
+        }
+
+        fray-toggle > fray-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;
+        }
+
+        fray-toggle > fray-options > button[role="radio"] {
             position: relative;
+            min-height: var(--control-min-height, 2rem);
+            padding: var(--space-xs) var(--space-sm);
+            color: var(--button-color);
+            background: var(--toggle-button-background);
+            border: var(--button-border);
+            border-radius: 0;
+            border-left: none;
+            border-right: none;
+            box-shadow: var(--toggle-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;
         }
 
-        fray-theme-picker > select {
-            min-width: 8rem;
+        fray-toggle > fray-options > button[role="radio"]:hover:not(:disabled)[aria-checked="false"] {
+            background: var(--button-background-hover);
         }
 
-fieldset:has(> [data-part="options"]) {
-            margin: 0;
-            padding: 0;
-            border: 0;
+        fray-toggle > fray-options > button[role="radio"]:first-of-type {
+            border-radius: var(--radius-md) 0 0 var(--radius-md);
+            border: var(--button-border);
+            border-right: none;
         }
 
-        fieldset:has(> [data-part="options"]) > [data-part="options"] {
-            display: flex;
-            padding: 0;
+        fray-toggle > fray-options > button[role="radio"]:last-of-type {
+            border-radius: 0 var(--radius-md) var(--radius-md) 0;
+            border: var(--button-border);
+            border-left: none;
+        }
+
+        fray-toggle > fray-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);
+        }
+
+        fray-toggle > fray-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: var(--toggle-button-shadow-checked);
+            margin-inline: var(--toggle-button-selected-inline-overlap);
+            z-index: var(--toggle-button-selected-z-index);
+        }
+
+        fray-toggle > fray-options > button[role="radio"]:disabled {
+            color: var(--input-color-disabled);
+            background: var(--button-background-disabled);
+            border: var(--button-border-disabled);
+            cursor: not-allowed;
+        }
+
+        fray-toggle > fray-options > button[role="radio"]:active:not(:disabled) {
+            border-style: var(--button-border-style-active);
+        }
+
+        fray-toggle > fray-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);
         }
 
 fray-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(--spacing-small, 0.5rem);
             padding: var(--ui-padding);
         }
 
-        fray-toolbar[data-orientation="vertical"] {
+        fray-toolbar > * {
+            margin: 0;
+        }
+
+        fray-toolbar[aria-orientation="vertical"] {
             flex-direction: column;
             align-items: stretch;
         }
 
-fray-tree-view {
+fray-treeview {
             display: flex;
             flex-direction: column;
             min-width: 0;
@@ -607,12 +1141,15 @@ fray-tree-view {
             overflow: auto;
         }
 
-        fray-tree-view > [role="tree"] {
+        fray-treeview > [role="tree"] {
             display: grid;
             align-content: start;
+            margin: 0;
+            padding: 0;
+            list-style: none;
         }
 
-        fray-tree-view [role="treeitem"] {
+        fray-treeview [role="treeitem"] {
             display: flex;
             align-items: flex-start;
             gap: 0.35rem;
@@ -623,91 +1160,44 @@ fray-tree-view {
             user-select: none;
         }
 
-        fray-tree-view [data-part="expander"] {
+        fray-treeview [role="treeitem"]:hover {
+            background: var(--button-background-hover);
+        }
+
+        fray-treeview [role="treeitem"]:focus-visible {
+            outline: 2px solid transparent;
+            outline-offset: -2px;
+            box-shadow: var(--focus-ring);
+        }
+
+        fray-treeview [role="treeitem"][aria-selected="true"] {
+            color: var(--ui-select-text-color);
+            background: var(--ui-select-bg);
+        }
+
+        fray-treeview fray-expander {
             flex: 0 0 1rem;
             text-align: center;
         }
 
-        fray-tree-view [data-part="expander"][data-expandable] {
+        fray-treeview [role="treeitem"][aria-expanded] > fray-expander {
             cursor: pointer;
         }
 
-        fray-tree-view [data-part="label"] {
+        fray-treeview fray-label {
             min-width: 0;
             overflow-wrap: anywhere;
         }
 
-        fray-tree-view > [role="status"] {
+        fray-treeview > [role="status"],
+        fray-treeview > [role="alert"] {
             margin: 0;
             padding: var(--ui-padding, 0.75rem);
         }
 
         @media (forced-colors: active) {
-            fray-tree-view [role="treeitem"][aria-selected="true"] {
+            fray-treeview [role="treeitem"][aria-selected="true"] {
                 outline: 2px solid Highlight;
                 forced-color-adjust: auto;
             }
         }
-
-fray-tri-checkbox {
-            display: inline-block;
-        }
-
-        fray-tri-checkbox > label {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.35em;
-            cursor: pointer;
-        }
-
-        fray-tri-checkbox[data-disabled] > label {
-            cursor: not-allowed;
-        }
-
-        fray-tri-checkbox input[type="checkbox"] {
-            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);
-        }
-
-        fray-tri-checkbox input[type="checkbox"] + .checkboxshell {
-            position: relative;
-            display: inline-grid;
-            width: 1em;
-            height: 1em;
-            flex: 0 0 1em;
-            overflow: hidden;
-            box-sizing: border-box;
-            line-height: 1;
-            place-items: center;
-            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));
-            font-family: inherit;
-            font-size: 1em;
-            user-select: none;
-        }
-
-        fray-tri-checkbox input[type="checkbox"]:checked + .checkboxshell {
-            color: var(--checkbox-symbol-color, var(--selection-color, currentColor));
-            background: var(--checkbox-box-background-checked,
-                var(--selection-background, var(--ui-accent-color, Highlight)));
-        }
-
-        fray-tri-checkbox input[type="checkbox"]:focus-visible + .checkboxshell {
-            outline: 2px solid var(--focus-color, var(--ui-accent-color, Highlight));
-            outline-offset: 1px;
-        }
-
-        fray-tri-checkbox input[type="checkbox"]:disabled + .checkboxshell {
-            opacity: 0.6;
-        }