optikos 0.1.0 → 0.2.0

package/dist/optikos.css

@@ -37,74 +37,74 @@
     --op-amber-600: #d97706;
     --op-amber-700: #b45309;
 
-    /* semantic colors */
-    --op-color-bg: var(--op-gray-50);
+    /* semantic colors: steel blue on cool grey, made for long sessions in grids and forms */
+    --op-color-bg: #edf0f4;
     --op-color-surface: var(--op-gray-0);
-    --op-color-surface-2: var(--op-gray-100);
-    --op-color-fg: var(--op-gray-900);
-    --op-color-fg-muted: var(--op-gray-500);
-    --op-color-border: var(--op-gray-200);
-    --op-color-border-strong: var(--op-gray-300);
-    --op-color-hover: var(--op-gray-100);
-    --op-color-selected: var(--op-blue-100);
-    --op-color-primary: var(--op-blue-600);
-    --op-color-primary-hover: var(--op-blue-700);
+    --op-color-surface-2: #f3f5f8;
+    --op-color-fg: #1b2430;
+    --op-color-fg-muted: #5b6676; /* keeps 4.5:1 on surface-2 */
+    --op-color-border: #d8dee6;
+    --op-color-border-strong: #a9b3c1;
+    --op-color-hover: #eaeff6;
+    --op-color-selected: #d9e6f7;
+    --op-color-primary: #1f4e8c;
+    --op-color-primary-hover: #173d6f;
     --op-color-primary-fg: var(--op-gray-0);
-    --op-color-primary-soft: var(--op-blue-50);
-    --op-color-danger: var(--op-red-600);
-    --op-color-danger-hover: var(--op-red-700);
+    --op-color-primary-soft: #e4edf8;
+    --op-color-danger: #b3261e;
+    --op-color-danger-hover: #8f1d17;
     --op-color-danger-fg: var(--op-gray-0);
-    --op-color-danger-soft: var(--op-red-50);
-    --op-color-success: var(--op-green-600);
-    --op-color-success-soft: var(--op-green-50);
-    --op-color-warning: var(--op-amber-600);
-    --op-color-warning-soft: var(--op-amber-50);
-    --op-color-info: var(--op-blue-600);
-    --op-color-info-soft: var(--op-blue-50);
-    --op-color-focus: var(--op-blue-500);
-    --op-color-disabled-fg: var(--op-gray-400);
-    --op-color-disabled-bg: var(--op-gray-100);
-    --op-color-overlay: rgb(15 23 42 / 0.5);
-    --op-color-inverse-bg: var(--op-gray-800);
-    --op-color-inverse-fg: var(--op-gray-50);
+    --op-color-danger-soft: #fbe4e2;
+    --op-color-success: #1e7a4d;
+    --op-color-success-soft: #dff2e8;
+    --op-color-warning: #9a5b00;
+    --op-color-warning-soft: #fcecc9;
+    --op-color-info: #1f5fa8;
+    --op-color-info-soft: #dfeaf8;
+    --op-color-focus: #2f7bd6;
+    --op-color-disabled-fg: #9aa4b2;
+    --op-color-disabled-bg: #eef1f5;
+    --op-color-overlay: rgb(16 24 38 / 0.5);
+    --op-color-inverse-bg: #14213a;
+    --op-color-inverse-fg: #eaf0fa;
 
     /* typography */
-    --op-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --op-font-family: 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
     --op-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
-    --op-font-size: 0.875rem;
-    --op-font-size-sm: 0.75rem;
-    --op-font-size-lg: 1rem;
-    --op-font-size-xl: 1.25rem;
-    --op-line-height: 1.4;
+    --op-font-size: 0.9375rem;
+    --op-font-size-sm: 0.8125rem;
+    --op-font-size-lg: 1.0625rem;
+    --op-font-size-xl: 1.3125rem;
+    --op-line-height: 1.45;
     --op-font-weight: 400;
     --op-font-weight-medium: 500;
     --op-font-weight-bold: 600;
 
-    /* spacing, density, shape */
+    /* spacing, density, shape: comfortable, small radii, hairline borders */
     --op-space-1: 0.25rem;
     --op-space-2: 0.5rem;
-    --op-space-3: 0.75rem;
-    --op-space-4: 1rem;
+    --op-space-3: 0.875rem;
+    --op-space-4: 1.125rem;
     --op-space-5: 1.5rem;
-    --op-space-6: 2rem;
-    --op-control-height: 2.25rem;
-    --op-control-padding-x: 0.75rem;
-    --op-row-height: 2.25rem;
+    --op-space-6: 2.25rem;
+    --op-control-height: 2.375rem;
+    --op-control-padding-x: 0.875rem;
+    --op-row-height: 2.75rem;
     --op-border-width: 1px;
-    --op-radius-sm: 0.25rem;
-    --op-radius: 0.375rem;
-    --op-radius-lg: 0.75rem;
+    --op-radius-sm: 0.1875rem;
+    --op-radius: 0.25rem;
+    --op-radius-lg: 0.375rem;
     --op-radius-pill: 62.5rem;
     --op-focus-width: 2px;
-    --op-focus-offset: 2px;
-    --op-icon-size: 1.25em;
-    --op-icon-stroke: 2;
+    --op-focus-offset: 1px;
+    --op-icon-size: 1.3em;
+    --op-icon-stroke: 1.75;
 
-    /* elevation and motion */
-    --op-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
-    --op-shadow: 0 4px 12px rgb(15 23 42 / 0.12);
-    --op-shadow-lg: 0 12px 32px rgb(15 23 42 / 0.2);
-    --op-duration: 120ms;
+    /* elevation and motion: flat at rest, shadows only on what floats */
+    --op-shadow-sm: none;
+    --op-shadow: 0 2px 6px rgb(16 24 38 / 0.14);
+    --op-shadow-lg: 0 10px 28px rgb(16 24 38 / 0.28);
+    --op-duration: 90ms;
 
     /* scrollbars follow the theme: thin, thumb from the strong border, track transparent */
     --op-scrollbar-width: thin;
@@ -115,6 +115,26 @@
     --op-z-layer: 1000;
   }
 
+  /* The light look's component colors (a navy sidebar, a tinted grid header). Literal values, and not on :root under
+     another theme, so a theme that does not set them keeps the component defaults. dark.css sets its own. */
+  :root:not([data-op-theme]),
+  [data-op-theme~='light'],
+  [data-op-theme='compact'] {
+    --op-navmenu-item-height: 2.5rem;
+    --op-navmenu-bg: #14213a;
+    --op-navmenu-fg: #d5ddeb;
+    --op-navmenu-group-fg: #8195b4;
+    --op-navmenu-item-hover-bg: #1d2f52;
+    --op-navmenu-active-bg: #203c6a;
+    --op-navmenu-active-fg: #ffffff;
+    --op-navmenu-active-bar: #5ea6f5;
+    --op-navmenu-badge-bg: #5ea6f5;
+    --op-navmenu-badge-fg: #0a1730;
+    --op-grid-header-bg: #e6ebf1;
+    --op-grid-header-fg: #2a3547;
+    --op-field-label-weight: 600;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     :root,
     [data-op-theme] {
@@ -428,9 +448,50 @@
   }
 }
 
+@layer optikos {
+  :root {
+    --op-badge-dot-size: 0.5rem;
+    --op-badge-height: 1.5em;
+    --op-badge-icon-size: 1em;
+  }
+  .op-badge {
+    --_fg: var(--op-color-fg);
+    --_bg: var(--op-color-surface-2);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding: 0 var(--op-badge-padding-x, var(--op-space-2));
+    min-block-size: var(--op-badge-height);
+    box-sizing: border-box;
+    color: var(--op-badge-fg, var(--_fg));
+    background: var(--op-badge-bg, var(--_bg));
+    border-radius: var(--op-badge-radius, var(--op-radius-pill));
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-badge-font-weight, var(--op-font-weight-bold));
+    line-height: 1;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+  .op-badge--primary { --_fg: var(--op-color-primary-text, var(--op-color-primary)); --_bg: var(--op-color-primary-soft); }
+  .op-badge--success { --_fg: var(--op-color-success); --_bg: var(--op-color-success-soft); }
+  .op-badge--warning { --_fg: var(--op-color-warning); --_bg: var(--op-color-warning-soft); }
+  .op-badge--danger { --_fg: var(--op-color-danger); --_bg: var(--op-color-danger-soft); }
+  .op-badge--info { --_fg: var(--op-color-info); --_bg: var(--op-color-info-soft); }
+  .op-badge__dot {
+    inline-size: var(--op-badge-dot-size);
+    block-size: var(--op-badge-dot-size);
+    border-radius: 50%;
+    background: currentColor;
+  }
+  .op-badge .op-icon {
+    --op-icon-size: var(--op-badge-icon-size);
+  }
+}
+
 @layer optikos {
   :root {
     --op-button-spinner-size: 1em;
+    --op-button-primary-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.25);
   }
 
   .op-button {
@@ -502,6 +563,7 @@
     --_border: var(--op-button-primary-bg, var(--op-color-primary));
     --_hover: var(--op-button-primary-hover-bg, var(--op-color-primary-hover));
     --_active: var(--op-button-primary-hover-bg, var(--op-color-primary-hover));
+    box-shadow: var(--op-button-primary-shadow);
   }
   .op-button--danger {
     --_bg: var(--op-button-danger-bg, var(--op-color-danger));
@@ -530,6 +592,181 @@
   }
 }
 
+@layer optikos {
+  .op-chip {
+    display: inline-flex;
+    align-items: center;
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    min-block-size: var(--op-chip-height, calc(var(--op-control-height) * 0.8));
+    color: var(--op-chip-fg, var(--op-color-fg));
+    background: var(--op-chip-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-chip-border, var(--op-color-border-strong));
+    border-radius: var(--op-chip-radius, var(--op-radius-pill));
+    font-size: var(--op-font-size-sm);
+    vertical-align: middle;
+  }
+  .op-chip__main,
+  .op-chip__remove {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding: 0 var(--op-space-3);
+    min-block-size: inherit;
+    color: inherit;
+    background: none;
+    border: 0;
+    border-radius: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  .op-chip__main {
+    min-inline-size: 0;
+  }
+  .op-chip__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-chip__remove {
+    padding-inline: var(--op-space-1) var(--op-space-2);
+    color: var(--op-color-fg-muted);
+  }
+  .op-chip__remove:hover:not(:disabled) {
+    color: var(--op-color-danger);
+  }
+  .op-chip__main:focus-visible,
+  .op-chip__remove:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-chip:hover:not(.is-disabled) {
+    border-color: var(--op-chip-hover-border, var(--op-color-primary));
+  }
+  .op-chip.is-selected {
+    color: var(--op-chip-selected-fg, var(--op-color-primary-text, var(--op-color-primary)));
+    background: var(--op-chip-selected-bg, var(--op-color-primary-soft));
+    border-color: var(--op-chip-selected-border, var(--op-color-primary));
+  }
+  .op-chip.is-disabled {
+    color: var(--op-color-disabled-fg);
+    border-color: var(--op-color-border);
+  }
+  .op-chip.is-disabled button {
+    cursor: default;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-codeviewer-font-size: 0.8125rem;
+    --op-codeviewer-line-height: 1.6;
+    --op-codeviewer-tab-size: 2;
+    --op-codeviewer-gutter-gap: 1.25rem;
+    --op-codeviewer-max-height: 32rem;
+  }
+  .op-codeviewer {
+    overflow: hidden;
+    color: var(--op-codeviewer-fg, var(--op-color-fg));
+    background: var(--op-codeviewer-bg, var(--op-color-surface-2));
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-radius-lg);
+  }
+  .op-codeviewer__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--op-space-2);
+    min-block-size: var(--op-control-height);
+    padding-inline: var(--op-space-3) var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    border-block-end: var(--op-border-width) solid var(--op-color-border);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-codeviewer__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-codeviewer__pre {
+    margin: 0;
+    padding: var(--op-space-3) var(--op-space-4);
+    max-block-size: var(--op-codeviewer-max-height);
+    overflow: auto;
+    font-family: var(--op-font-mono);
+    font-size: var(--op-codeviewer-font-size);
+    line-height: var(--op-codeviewer-line-height);
+    tab-size: var(--op-codeviewer-tab-size);
+  }
+  .op-codeviewer__pre:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  /* the global op-* rule would give lines and tokens the base font: everything inside the code keeps the mono one */
+  .op-codeviewer__pre * {
+    font-family: inherit;
+    font-size: inherit;
+  }
+  /* lines stretch to the widest one, so a marked line is marked across the whole scroll width */
+  .op-codeviewer__code {
+    display: block;
+    min-inline-size: 100%;
+    inline-size: max-content;
+    font: inherit;
+  }
+  .op-codeviewer.is-wrapped .op-codeviewer__code {
+    inline-size: auto;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .op-codeviewer__line {
+    position: relative;
+    display: block;
+    margin-inline: calc(var(--op-space-4) * -1);
+    padding-inline: var(--op-space-4);
+  }
+  .op-codeviewer__line.is-marked {
+    background: var(--op-codeviewer-mark-bg, var(--op-color-selected));
+    box-shadow: inset calc(var(--op-border-width) * 3) 0 0 var(--op-color-primary);
+  }
+  /* line numbers: a CSS counter in the gutter, never part of the text (selection and screen readers skip it) */
+  .op-codeviewer.has-numbers .op-codeviewer__line {
+    padding-inline-start: calc(var(--op-space-4) + var(--op-codeviewer-gutter, 2ch) + var(--op-codeviewer-gutter-gap));
+  }
+  .op-codeviewer.has-numbers .op-codeviewer__line::before {
+    counter-increment: op-codeline;
+    content: counter(op-codeline);
+    position: absolute;
+    inset-inline-start: var(--op-space-4);
+    inline-size: var(--op-codeviewer-gutter, 2ch);
+    color: var(--op-codeviewer-gutter-fg, var(--op-color-fg-muted));
+    text-align: end;
+    user-select: none;
+  }
+  /* syntax colors are pulled towards the text color, so they keep their contrast in every theme */
+  .op-codeviewer__tok--keyword {
+    color: var(--op-codeviewer-keyword, color-mix(in srgb, var(--op-color-primary) 80%, var(--op-color-fg)));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-codeviewer__tok--string {
+    color: var(--op-codeviewer-string, color-mix(in srgb, var(--op-color-success) 70%, var(--op-color-fg)));
+  }
+  .op-codeviewer__tok--comment {
+    color: var(--op-codeviewer-comment, var(--op-color-fg-muted));
+    font-style: italic;
+  }
+  .op-codeviewer__tok--number {
+    color: var(--op-codeviewer-number, color-mix(in srgb, var(--op-color-warning) 65%, var(--op-color-fg)));
+  }
+  .op-codeviewer__tok--property,
+  .op-codeviewer__tok--attr {
+    color: var(--op-codeviewer-property, color-mix(in srgb, var(--op-color-info) 70%, var(--op-color-fg)));
+  }
+  .op-codeviewer__tok--tag {
+    color: var(--op-codeviewer-tag, color-mix(in srgb, var(--op-color-danger) 70%, var(--op-color-fg)));
+  }
+}
+
 @layer optikos {
   .op-icon {
     display: inline-flex;
@@ -677,7 +914,6 @@
     margin-inline-start: var(--op-space-3);
     margin-block-start: var(--op-space-2);
     font-size: var(--op-font-size-sm);
-    opacity: 0.7;
   }
   .op-chat__status {
     display: inline-flex;
@@ -794,6 +1030,40 @@
   }
 }
 
+@layer optikos {
+  /* the editor fills the cell: no label, no error line, the row height */
+  .op-grid__cell.is-editing {
+    position: relative;
+    padding-block: 0;
+    padding-inline: var(--op-grid-editor-inset, var(--op-space-1));
+    overflow: visible;
+  }
+  .op-grid__editor {
+    inline-size: 100%;
+  }
+  .op-grid__editor .op-textfield__input {
+    min-block-size: 0;
+    block-size: calc(var(--op-grid-row-height, var(--op-row-height)) - 2 * var(--op-space-1));
+  }
+  .op-grid__editor.is-invalid .op-textfield__input {
+    border-color: var(--op-color-danger);
+  }
+  .op-grid__editor .op-field__error {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 100%;
+    padding: var(--op-space-1) var(--op-space-2);
+    color: var(--op-color-danger-fg);
+    background: var(--op-color-danger);
+    border-radius: var(--op-radius-sm);
+    font-size: var(--op-font-size-sm);
+    white-space: nowrap;
+  }
+  .op-grid__editor .op-field__error:empty {
+    display: none;
+  }
+}
+
 @layer optikos {
   :root {
     --op-dataview-item-width: 10rem;
@@ -988,6 +1258,7 @@
     --op-grid-action-gap: var(--op-space-1);
     --op-grid-action-idle-opacity: 0.45;
     --op-grid-action-disabled-opacity: 0.3;
+    --op-grid-selected-bar-width: 0.125rem;
   }
   .op-grid {
     --_border: var(--op-grid-border, var(--op-color-border));
@@ -1002,9 +1273,18 @@
     border-radius: var(--op-grid-radius, var(--op-radius));
     overflow: hidden;
   }
-  .op-grid:focus-visible {
+  /* header + rows: the focusable role=grid part, between the bulk bar and the pager */
+  .op-grid__table {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    position: relative;
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+  .op-grid__table:focus-visible {
     outline: var(--op-focus-width) solid var(--op-color-focus);
-    outline-offset: 0;
+    outline-offset: calc(var(--op-focus-width) * -1);
   }
   .op-grid__header {
     position: relative;
@@ -1012,7 +1292,7 @@
     overflow: hidden;
     color: var(--op-grid-header-fg, var(--op-color-fg));
     background: var(--op-grid-header-bg, var(--op-color-surface-2));
-    border-block-end: var(--op-border-width) solid var(--_border);
+    border-block-end: var(--op-border-width) solid var(--op-grid-header-border, var(--op-color-border-strong));
     font-weight: var(--op-font-weight-bold);
   }
   .op-grid__row {
@@ -1041,6 +1321,7 @@
   }
   .op-grid__body-row.is-selected {
     background: var(--op-grid-row-selected-bg, var(--op-color-selected));
+    box-shadow: inset var(--op-grid-selected-bar-width) 0 0 var(--op-grid-selected-bar, var(--op-color-primary));
   }
   .op-grid__body-row.is-active {
     outline: var(--op-focus-width) solid var(--op-color-focus);
@@ -1444,6 +1725,101 @@
   }
 }
 
+@layer optikos {
+  :root {
+    --op-tree-indent: 1.25rem;
+    --op-tree-check-size: 1rem;
+    --op-tree-check-icon-size: 0.8em;
+  }
+  .op-tree {
+    display: block;
+    min-inline-size: 0;
+    overflow: auto;
+    color: var(--op-tree-fg, var(--op-color-fg));
+    background: var(--op-tree-bg, transparent);
+  }
+  .op-tree__root,
+  .op-tree__group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .op-tree__item {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    box-sizing: border-box;
+    min-block-size: var(--op-tree-item-height, var(--op-row-height));
+    padding-inline: var(--op-space-1) var(--op-space-3);
+    padding-inline-start: calc(var(--op-space-1) + var(--_level, 0) * var(--op-tree-indent));
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+    user-select: none;
+  }
+  .op-tree__item:hover:not(.is-disabled) {
+    background: var(--op-tree-hover-bg, var(--op-color-hover));
+  }
+  .op-tree__item:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-tree__item.is-selected {
+    color: var(--op-tree-selected-fg, var(--op-color-fg));
+    background: var(--op-tree-selected-bg, var(--op-color-selected));
+  }
+  .op-tree__item.is-disabled {
+    color: var(--op-color-disabled-fg);
+    cursor: default;
+  }
+  .op-tree__toggle {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    inline-size: var(--op-tree-indent);
+    color: var(--op-color-fg-muted);
+  }
+  .op-tree__toggle .op-icon {
+    transition: transform var(--op-duration) var(--op-easing);
+  }
+  .op-tree__item.is-expanded > .op-tree__toggle .op-icon {
+    transform: rotate(90deg);
+  }
+  .op-tree__spinner {
+    --op-spinner-size: var(--op-tree-check-size);
+  }
+  .op-tree__check {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--op-tree-check-size);
+    block-size: var(--op-tree-check-size);
+    border: var(--op-border-width) solid var(--op-color-border-strong);
+    border-radius: var(--op-radius-sm);
+    background: var(--op-color-surface);
+    --op-icon-size: var(--op-tree-check-icon-size);
+  }
+  .op-tree__check.is-checked,
+  .op-tree__check.is-mixed {
+    color: var(--op-color-primary-fg);
+    background: var(--op-color-primary);
+    border-color: var(--op-color-primary);
+  }
+  .op-tree__icon {
+    display: inline-flex;
+    color: var(--op-tree-icon-fg, var(--op-color-fg-muted));
+  }
+  .op-tree__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-tree__empty {
+    padding: var(--op-space-3);
+    color: var(--op-color-fg-muted);
+  }
+}
+
 @layer optikos {
   :root {
     --op-calendar-day-size: 2.25rem;
@@ -1619,55 +1995,272 @@
 }
 
 @layer optikos {
-  :root {
-    --op-listbox-max-height: 15rem;
+  .op-checkboxgroup__options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-checkboxgroup-gap, var(--op-space-1));
   }
-  .op-listbox {
-    position: relative;
-    box-sizing: border-box;
-    max-block-size: var(--op-listbox-max-height);
-    overflow: auto;
-    background: var(--op-listbox-bg, var(--op-color-surface));
-    color: var(--op-color-fg);
+  .op-checkboxgroup__options--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--op-checkboxgroup-gap, var(--op-space-4));
   }
-  .op-listbox__item {
-    box-sizing: border-box;
+}
+
+@layer optikos {
+  :root {
+    --op-dial-spacing: 0.75rem;
+    --op-dial-item-spacing: 3.5rem;
+    --op-dial-height: 3.75rem;
+    --op-dial-size: 13rem;
+    --op-dial-readout-size: 2.75rem;
+    --op-dial-readout-size-circle: 2rem;
+    --op-dial-roll-duration: 380ms;
+    --op-dial-tick-height: 0.75rem;
+    --op-dial-major-height: 1.375rem;
+    --op-dial-needle-width: 0.1875rem;
+    --op-dial-label-gap: 0.25rem;
+    --op-dial-ring-inset: 0.5rem;
+    --op-dial-hub: 0.625rem;
+    --op-dial-digit-height: 1em; /* one line of the readout: a reel moves by this per digit */
+  }
+  .op-dial {
+    --_sp: var(--op-dial-spacing);
+  }
+  .op-dial--list {
+    --_sp: var(--op-dial-item-spacing);
+  }
+  .op-dial__box {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    padding: var(--op-listbox-item-padding-y, 0) var(--op-listbox-item-padding-x, var(--op-control-padding-x));
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .op-listbox__item.is-active {
-    background: var(--op-listbox-item-active-bg, var(--op-color-hover));
+    gap: var(--op-space-2);
   }
-  .op-listbox__item.is-selected {
-    color: var(--op-listbox-item-selected-fg, var(--op-color-primary));
+
+  /* the readout: digits roll like an odometer (each reel is the column 0–9, moved by --d) */
+  .op-dial__readout {
+    display: flex;
+    justify-content: center;
+    min-block-size: var(--op-dial-digit-height);
+    color: var(--op-dial-readout-fg, var(--op-color-fg));
+    font-size: var(--op-dial-readout-size);
     font-weight: var(--op-font-weight-bold);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    white-space: pre;
   }
-  .op-listbox__item.is-disabled {
-    color: var(--op-color-disabled-fg);
-    cursor: not-allowed;
+  .op-dial__digit,
+  .op-dial__reel {
+    font-size: inherit; /* the global op-* rule would reset them to the base size */
   }
-  .op-listbox__mark {
-    color: inherit;
-    background: var(--op-color-primary-soft);
-    font-weight: var(--op-font-weight-bold);
+  .op-dial__digit {
+    display: inline-block;
+    block-size: var(--op-dial-digit-height);
+    overflow: hidden;
   }
-  .op-listbox__hint {
-    margin-inline-start: auto;
-    padding-inline-start: var(--op-space-3);
-    color: var(--op-listbox-hint-fg, var(--op-color-fg-muted));
-    font-size: var(--op-font-size-sm);
-    font-weight: normal;
+  .op-dial__reel {
+    display: flex;
+    flex-direction: column;
+    transform: translateY(calc(var(--d, 0) * -10%));
+    transition: transform var(--op-dial-roll-duration) var(--op-motion-ease-out);
   }
-  .op-listbox__empty {
-    padding: var(--op-space-3);
-    color: var(--op-listbox-empty-fg, var(--op-color-fg-muted));
+  .op-dial__reel > span {
+    display: block;
+    block-size: var(--op-dial-digit-height);
   }
-}
+
+  /* the face: a flat ruler sliding under a fixed needle */
+  .op-dial__face {
+    position: relative;
+    inline-size: 100%;
+    block-size: var(--op-dial-height);
+    border-radius: var(--op-radius);
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+  .op-dial__face:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-dial.is-dragging .op-dial__face {
+    cursor: grabbing;
+  }
+  .op-dial__window {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
+  }
+  .op-dial__tape {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 50%;
+    /* --pos (set by the component) is the item under the needle, fractional while dragging */
+    transform: translateX(calc(var(--pos, 0) * -1 * var(--_sp)));
+    transition: transform var(--op-dial-roll-duration) var(--op-motion-ease-out);
+  }
+  .op-dial.is-dragging .op-dial__tape {
+    transition: none;
+  }
+  .op-dial.is-gliding .op-dial__tape {
+    transition-timing-function: var(--op-motion-ease-out);
+  }
+  .op-dial__tick {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(var(--i) * var(--_sp));
+    inline-size: var(--op-border-width);
+    block-size: var(--op-dial-tick-height);
+    background: var(--op-dial-tick-fg, var(--op-color-border-strong));
+    transform: translateX(-50%);
+  }
+  .op-dial__tick.is-major {
+    inline-size: calc(var(--op-border-width) * 2);
+    block-size: var(--op-dial-major-height);
+    background: var(--op-dial-major-fg, var(--op-color-fg-muted));
+  }
+  .op-dial__tick-label {
+    position: absolute;
+    inset-block-start: calc(100% + var(--op-dial-label-gap));
+    inset-inline-start: 50%;
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    white-space: nowrap;
+    transform: translateX(-50%);
+    transition: color var(--op-duration) var(--op-easing);
+  }
+  .op-dial__tick.is-current .op-dial__tick-label {
+    color: var(--op-color-primary-text, var(--op-color-primary));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-dial__needle {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 50%;
+    inline-size: var(--op-dial-needle-width);
+    block-size: calc(var(--op-dial-major-height) + var(--op-space-1));
+    background: var(--op-dial-needle, var(--op-color-primary));
+    border-radius: var(--op-radius-pill);
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+
+  /* circle: a clock face, the ticks around the ring and a hand from the center */
+  .op-dial--circle .op-dial__face {
+    inline-size: var(--op-dial-size);
+    block-size: var(--op-dial-size);
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: 50%;
+  }
+  .op-dial--circle .op-dial__window {
+    overflow: visible;
+    mask-image: none;
+  }
+  .op-dial--circle .op-dial__tape {
+    inset: 0;
+    transform: none;
+    transition: none;
+  }
+  .op-dial--circle .op-dial__tick {
+    inset-block-start: var(--op-dial-ring-inset);
+    inset-inline-start: 50%;
+    transform-origin: 50% calc(var(--op-dial-size) / 2 - var(--op-dial-ring-inset) - var(--op-border-width));
+    transform: translateX(-50%) rotate(var(--a));
+  }
+  .op-dial--circle .op-dial__tick-label {
+    transform: translateX(-50%) rotate(calc(var(--a) * -1));
+  }
+  .op-dial--circle .op-dial__needle {
+    inset-block-start: auto;
+    inset-block-end: 50%;
+    block-size: calc(var(--op-dial-size) / 2 - var(--op-dial-ring-inset) - var(--op-dial-major-height) - var(--op-space-5) - var(--op-space-2));
+    transform-origin: 50% 100%;
+    transition: transform var(--op-dial-roll-duration) var(--op-motion-ease-out);
+  }
+  .op-dial--circle.is-dragging .op-dial__needle {
+    transition: none;
+  }
+  /* the hub the hand turns on */
+  .op-dial--circle .op-dial__needle::after {
+    content: '';
+    position: absolute;
+    inset-block-end: calc(var(--op-dial-hub) / -2);
+    inset-inline-start: 50%;
+    inline-size: var(--op-dial-hub);
+    block-size: var(--op-dial-hub);
+    background: inherit;
+    border-radius: 50%;
+    transform: translateX(-50%);
+  }
+  .op-dial--circle .op-dial__readout {
+    font-size: var(--op-dial-readout-size-circle);
+  }
+
+  .op-dial.is-disabled .op-dial__face {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .op-dial.is-readonly .op-dial__face {
+    cursor: default;
+  }
+  .op-motion-off .op-dial__reel,
+  .op-motion-off .op-dial__tape,
+  .op-motion-off .op-dial__needle {
+    transition: none;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-listbox-max-height: 15rem;
+  }
+  .op-listbox {
+    position: relative;
+    box-sizing: border-box;
+    max-block-size: var(--op-listbox-max-height);
+    overflow: auto;
+    background: var(--op-listbox-bg, var(--op-color-surface));
+    color: var(--op-color-fg);
+  }
+  .op-listbox__item {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: var(--op-listbox-item-padding-y, 0) var(--op-listbox-item-padding-x, var(--op-control-padding-x));
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .op-listbox__item.is-active {
+    background: var(--op-listbox-item-active-bg, var(--op-color-hover));
+  }
+  .op-listbox__item.is-selected {
+    color: var(--op-listbox-item-selected-fg, var(--op-color-primary));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-listbox__item.is-disabled {
+    color: var(--op-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  .op-listbox__mark {
+    color: inherit;
+    background: var(--op-color-primary-soft);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-listbox__hint {
+    margin-inline-start: auto;
+    padding-inline-start: var(--op-space-3);
+    color: var(--op-listbox-hint-fg, var(--op-color-fg-muted));
+    font-size: var(--op-font-size-sm);
+    font-weight: normal;
+  }
+  .op-listbox__empty {
+    padding: var(--op-space-3);
+    color: var(--op-listbox-empty-fg, var(--op-color-fg-muted));
+  }
+}
 
 @layer optikos {
   .op-picker__trigger {
@@ -2063,6 +2656,158 @@
   }
 }
 
+@layer optikos {
+  :root {
+    --op-toggle-width: 2.25rem;
+    --op-toggle-height: 1.25rem;
+    --op-toggle-knob-inset: 0.1875rem;
+  }
+  /* the checkbox box becomes a track; its knob is a pseudo-element that slides */
+  .op-toggle .op-checkbox__box {
+    inline-size: var(--op-toggle-width);
+    block-size: var(--op-toggle-height);
+    border-radius: var(--op-radius-pill);
+    background: var(--op-toggle-track-bg, var(--op-color-border-strong));
+    border-color: transparent;
+    transition: background var(--op-duration) var(--op-easing);
+  }
+  .op-toggle .op-checkbox__box > * {
+    display: none;
+  }
+  .op-toggle .op-checkbox__box::after {
+    content: '';
+    position: absolute;
+    inset-block: var(--op-toggle-knob-inset);
+    inset-inline-start: var(--op-toggle-knob-inset);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(--op-toggle-knob-bg, var(--op-color-surface));
+    box-shadow: var(--op-shadow-sm);
+    transition: translate var(--op-duration) var(--op-easing);
+  }
+  .op-toggle.is-checked .op-checkbox__box {
+    background: var(--op-toggle-on-bg, var(--op-color-primary));
+  }
+  .op-toggle.is-checked .op-checkbox__box::after {
+    translate: calc(var(--op-toggle-width) - var(--op-toggle-height)) 0;
+  }
+  [dir='rtl'] .op-toggle.is-checked .op-checkbox__box::after {
+    translate: calc((var(--op-toggle-width) - var(--op-toggle-height)) * -1) 0;
+  }
+}
+
+@layer optikos {
+  .op-fieldgroup__body {
+    --op-layout-gap: var(--op-fieldgroup-gap, var(--op-space-2));
+  }
+  /* the fields share the row; each still has its label for screen readers, but only the group's label shows */
+  .op-fieldgroup__body > .op-field {
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+  .op-fieldgroup__body .op-field__label {
+    position: absolute;
+    inline-size: 0;
+    block-size: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .op-fieldgroup__body .op-field__help,
+  .op-fieldgroup__body .op-field__error,
+  .op-fieldgroup__body .op-field.op-stable > .op-field__error:empty {
+    display: none; /* the group has the one error line (and beats the reserved line of stableSize) */
+  }
+  .op-fieldgroup > .op-field__label {
+    cursor: default;
+  }
+}
+
+@layer optikos {
+  .op-fieldlist__box {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--op-fieldlist-gap, var(--op-space-2));
+  }
+  .op-fieldlist__rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-fieldlist-row-gap, var(--op-space-2));
+    align-self: stretch;
+  }
+  .op-fieldlist__row {
+    --op-layout-gap: var(--op-space-2);
+  }
+  .op-fieldlist__row > .op-field {
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+  /* the labels read as a column header: shown on the first row, kept for screen readers on the others */
+  .op-fieldlist__row:not(.is-first) .op-field__label {
+    position: absolute;
+    inline-size: 0;
+    block-size: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .op-fieldlist__row:not(.is-first) .op-field__help {
+    display: none;
+  }
+  .op-fieldlist__tools {
+    display: flex;
+    flex: none;
+    gap: var(--op-space-1);
+    align-self: flex-start;
+    min-block-size: var(--op-control-height);
+    align-items: center;
+  }
+  /* on the first row the tools line up with the inputs, under the labels */
+  .op-fieldlist__row.is-first > .op-fieldlist__tools {
+    margin-block-start: calc(var(--op-font-size) * var(--op-line-height) + var(--op-field-gap, var(--op-space-1)));
+  }
+  .op-fieldlist__tool,
+  .op-fieldlist__add {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    font: inherit;
+    cursor: pointer;
+  }
+  .op-fieldlist__tool {
+    padding: var(--op-space-1);
+  }
+  .op-fieldlist__add {
+    padding: var(--op-space-1) var(--op-space-2);
+    color: var(--op-color-primary-text, var(--op-color-primary));
+    font-weight: var(--op-font-weight-medium);
+  }
+  .op-fieldlist__tool:hover:not(:disabled),
+  .op-fieldlist__add:hover:not(:disabled) {
+    color: var(--op-color-fg);
+    background: var(--op-color-hover);
+  }
+  .op-fieldlist__tool:disabled,
+  .op-fieldlist__add:disabled {
+    color: var(--op-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  .op-fieldlist__tool:focus-visible,
+  .op-fieldlist__add:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-fieldlist__empty {
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+}
+
 @layer optikos {
   .op-form {
     --op-layout-gap: var(--op-form-gap, var(--op-space-3));
@@ -2072,6 +2817,192 @@
   }
 }
 
+@layer optikos {
+  .op-formactions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-space-2) var(--op-space-3);
+    padding: var(--op-formactions-padding, var(--op-space-3) 0 0);
+    border-block-start: var(--op-border-width) solid var(--op-formactions-border, var(--op-color-border));
+  }
+  .op-formactions__status {
+    flex: 1;
+    min-inline-size: 0;
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-formactions__status:not(:empty)::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--op-space-2);
+    block-size: var(--op-space-2);
+    margin-inline-end: var(--op-space-2);
+    background: var(--op-color-warning);
+    border-radius: 50%;
+  }
+  .op-formactions__buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--op-space-2);
+    margin-inline-start: auto;
+  }
+  /* sticky: stays at the bottom of the scrolling area while the form scrolls under it */
+  .op-formactions.is-sticky {
+    position: sticky;
+    inset-block-end: 0;
+    z-index: 1;
+    padding: var(--op-formactions-padding, var(--op-space-3));
+    background: var(--op-formactions-bg, var(--op-color-surface));
+    box-shadow: var(--op-shadow-sm);
+  }
+}
+
+@layer optikos {
+  .op-formerrors {
+    padding: var(--op-space-3) var(--op-space-4);
+    color: var(--op-formerrors-fg, var(--op-color-fg));
+    background: var(--op-formerrors-bg, var(--op-color-danger-soft));
+    border: var(--op-border-width) solid var(--op-formerrors-border, var(--op-color-danger));
+    border-inline-start-width: calc(var(--op-border-width) * 4);
+    border-radius: var(--op-radius);
+  }
+  .op-formerrors:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-formerrors__title {
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-formerrors__list {
+    margin: var(--op-space-2) 0 0;
+    padding-inline-start: var(--op-space-4);
+  }
+  .op-formerrors__link {
+    padding: 0;
+    color: var(--op-color-danger);
+    background: none;
+    border: 0;
+    font: inherit;
+    text-align: start;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .op-formerrors__link:hover {
+    text-decoration-thickness: calc(var(--op-border-width) * 2);
+  }
+  .op-formerrors__link:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+    border-radius: var(--op-radius-sm);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-formsection-aside-width: 16rem;
+    --op-formsection-gap: var(--op-space-6);
+  }
+  /* side by side when the section itself is wide enough: a container query, so it works inside any panel or window */
+  .op-formsection {
+    display: flow-root; /* holds the floated aside */
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+  .op-formsection__aside,
+  .op-formsection__body {
+    min-inline-size: 0;
+  }
+  .op-formsection__body {
+    --op-layout-gap: var(--op-form-gap, var(--op-space-3));
+    margin-block-start: var(--op-space-3);
+  }
+  .op-formsection__title {
+    margin: 0;
+    font-size: var(--op-font-size-lg);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-formsection__desc {
+    margin: var(--op-space-1) 0 0;
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-formsection--divided + .op-formsection--divided {
+    margin-block-start: var(--op-space-4);
+    padding-block-start: var(--op-space-5);
+    border-block-start: var(--op-border-width) solid var(--op-formsection-divider, var(--op-color-border));
+  }
+  @container (min-width: 40rem) {
+    .op-formsection:not(.op-formsection--stacked) > .op-formsection__aside {
+      float: inline-start;
+      inline-size: var(--op-formsection-aside-width);
+    }
+    .op-formsection:not(.op-formsection--stacked) > .op-formsection__body {
+      margin-block-start: 0;
+      margin-inline-start: calc(var(--op-formsection-aside-width) + var(--op-formsection-gap));
+    }
+  }
+}
+
+@layer optikos {
+  /* the field's control becomes a row: [prefix][input box][suffix], the inner corners squared off */
+  .op-inputgroup__row {
+    display: flex;
+    align-items: stretch;
+  }
+  .op-inputgroup__row > :not(.op-inputgroup__affix) {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .op-inputgroup__affix {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding-inline: var(--op-control-padding-x);
+    color: var(--op-inputgroup-affix-fg, var(--op-color-fg-muted));
+    background: var(--op-inputgroup-affix-bg, var(--op-color-surface-2));
+    border: var(--op-border-width) solid var(--op-textfield-border, var(--op-color-border-strong));
+    white-space: nowrap;
+  }
+  .op-inputgroup__btn {
+    color: var(--op-color-fg);
+    font: inherit;
+    font-weight: var(--op-font-weight-medium);
+    cursor: pointer;
+  }
+  .op-inputgroup__btn:hover {
+    background: var(--op-color-hover);
+  }
+  .op-inputgroup__btn:focus-visible {
+    position: relative;
+    z-index: 1;
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+  }
+  .op-inputgroup__affix--prefix {
+    margin-inline-end: calc(var(--op-border-width) * -1);
+    border-start-start-radius: var(--op-textfield-radius, var(--op-radius));
+    border-end-start-radius: var(--op-textfield-radius, var(--op-radius));
+  }
+  .op-inputgroup__affix--suffix {
+    margin-inline-start: calc(var(--op-border-width) * -1);
+    border-start-end-radius: var(--op-textfield-radius, var(--op-radius));
+    border-end-end-radius: var(--op-textfield-radius, var(--op-radius));
+  }
+  /* every text-based field (Select, DateField, NumberField...) draws its box on .op-textfield__input */
+  .op-inputgroup .has-prefix .op-textfield__input {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .op-inputgroup .has-suffix .op-textfield__input {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .op-inputgroup .op-textfield__input:focus {
+    position: relative;
+    z-index: 1; /* the focus ring stays above the joined segments */
+  }
+}
+
 @layer optikos {
   :root {
     --op-stepform-review-label-width: 9rem;
@@ -2156,6 +3087,42 @@
   .op-fieldset.is-collapsed {
     padding-block-end: 0;
   }
+  .op-fieldset__desc {
+    margin: 0 0 var(--op-space-3);
+    padding-inline: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-fieldset__body {
+    --op-layout-gap: var(--op-form-gap, var(--op-space-3));
+  }
+  /* line: no frame, a rule under the legend; plain: just the legend */
+  .op-fieldset--line,
+  .op-fieldset--plain {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+  }
+  .op-fieldset--line > .op-fieldset__legend,
+  .op-fieldset--plain > .op-fieldset__legend {
+    inline-size: 100%;
+    margin-block-end: var(--op-space-3);
+    padding: 0;
+  }
+  .op-fieldset--line > .op-fieldset__legend {
+    padding-block-end: var(--op-space-2);
+    border-block-end: var(--op-border-width) solid var(--op-fieldset-border, var(--op-color-border));
+  }
+  .op-fieldset--line > .op-fieldset__desc,
+  .op-fieldset--plain > .op-fieldset__desc {
+    margin-block-start: calc(var(--op-space-2) * -1);
+    padding: 0;
+  }
+  .op-fieldset--collapsible-title .op-fieldset__title,
+  .op-fieldset__toggle + .op-fieldset__title {
+    cursor: pointer;
+    user-select: none;
+  }
 }
 
 @layer optikos {
@@ -2179,7 +3146,7 @@
     padding: var(--op-panel-header-padding, var(--op-space-2) var(--op-space-3));
     background: var(--op-panel-header-bg, var(--op-color-surface-2));
     color: var(--op-panel-header-fg, var(--op-color-fg));
-    border-block-end: var(--op-border-width) solid var(--op-panel-border, var(--op-color-border));
+    border-block-end: var(--op-border-width) solid var(--op-panel-header-border, var(--op-panel-border, var(--op-color-border-strong)));
     font-weight: var(--op-font-weight-bold);
   }
   .op-panel__title {
@@ -2234,6 +3201,13 @@
     border-block-end: 0;
     border-block-start: var(--op-border-width) solid var(--op-color-border);
   }
+  /* the ↻ tool turns while the panel reloads */
+  .op-panel.is-reloading > .op-panel__header .op-panel__tool svg {
+    animation: op-spin 700ms linear infinite;
+  }
+  .op-motion-off .op-panel.is-reloading > .op-panel__header .op-panel__tool svg {
+    animation: none;
+  }
 }
 
 @layer optikos {
@@ -2543,10 +3517,15 @@
   .op-stepper__step.is-error .op-stepper__btn {
     color: var(--op-color-danger);
   }
-  /* phones: only the current step keeps its words */
+  /* phones: only the current step shows its words; the others keep them for screen readers (the button's name) */
   @media (max-width: 40rem) {
     .op-stepper__step:not(.is-current) .op-stepper__text {
-      display: none;
+      position: absolute;
+      inline-size: 0;
+      block-size: 0;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
     }
     .op-stepper__step:not(.is-current) {
       flex: none;
@@ -2575,7 +3554,7 @@
     display: flex;
     flex: none;
     gap: var(--op-tabs-gap, var(--op-space-1));
-    background: var(--op-tabs-bar-bg, var(--op-color-surface));
+    background: var(--op-tabs-bar-bg, var(--op-color-surface-2));
     border-block-end: var(--op-border-width) solid var(--op-color-border);
     overflow-x: auto;
     overflow-y: hidden;
@@ -2616,13 +3595,22 @@
     color: var(--op-color-disabled-fg);
     cursor: not-allowed;
   }
-  .op-tabs__close {
+  .op-tabs__close,
+  .op-tabs__reload {
     display: inline-flex;
     border-radius: var(--op-radius-sm);
   }
-  .op-tabs__close:hover {
+  .op-tabs__close:hover,
+  .op-tabs__reload:hover {
     background: var(--op-color-hover);
   }
+  /* the ↻ turns while the tab reloads */
+  .op-tabs__tab.is-reloading .op-tabs__reload svg {
+    animation: op-spin 700ms linear infinite;
+  }
+  .op-motion-off .op-tabs__tab.is-reloading .op-tabs__reload svg {
+    animation: none;
+  }
   .op-tabs__panels {
     flex: 1;
     min-width: 0;
@@ -2842,6 +3830,8 @@
 @layer optikos {
   :root {
     --op-menu-min-width: 10rem;
+    --op-menu-max-height: 22rem;
+    --op-menu-group-tracking: 0.04em;
   }
   .op-menu {
     box-sizing: border-box;
@@ -2885,6 +3875,49 @@
     block-size: var(--op-border-width);
     background: var(--op-menu-sep, var(--op-color-border));
   }
+  /* with search: the field on top, the items scroll under it */
+  .op-menu__search {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--op-control-height);
+    margin-block-end: var(--op-space-1);
+    padding: 0 var(--op-space-2);
+    color: var(--op-color-fg);
+    background: var(--op-color-surface);
+    border: var(--op-border-width) solid var(--op-color-border-strong);
+    border-radius: var(--op-radius-sm);
+    font: inherit;
+  }
+  .op-menu__search:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-menu__list {
+    max-block-size: var(--op-menu-max-height);
+    overflow: auto;
+  }
+  .op-menu__empty {
+    padding: var(--op-space-2) var(--op-space-3);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-menu.is-searching .op-menu__sep,
+  .op-menu__group:not(:has(.op-menu__item:not([hidden]))) {
+    display: none;
+  }
+  /* groups: a quiet header over the items that share it */
+  .op-menu__group + .op-menu__group,
+  .op-menu__item + .op-menu__group {
+    margin-block-start: var(--op-space-1);
+  }
+  .op-menu__group-label {
+    padding: var(--op-space-2) var(--op-space-3) var(--op-space-1) var(--op-space-2);
+    color: var(--op-menu-group-fg, var(--op-color-fg-muted));
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+    letter-spacing: var(--op-menu-group-tracking);
+    text-transform: uppercase;
+  }
 }
 
 @layer optikos {
@@ -3010,6 +4043,8 @@
     --op-widget-height: 26rem;
     --op-widget-wide: 36rem;
     --op-widget-offset: var(--op-space-4);
+    --op-widget-grip: 0.5rem;
+    --op-widget-corner: 1rem;
   }
   .op-widget {
     min-block-size: 0;
@@ -3080,6 +4115,62 @@
   .op-widget.is-dragging {
     transition: none;
   }
+  /* resize: an invisible strip on the inner edge (a line shows on hover/focus); a corner grip once the widget was moved */
+  .op-widget__resize {
+    position: absolute;
+    z-index: 1;
+    touch-action: none;
+  }
+  .op-widget--right .op-widget__resize,
+  .op-widget--left .op-widget__resize {
+    inset-block: 0;
+    inline-size: var(--op-widget-grip);
+    cursor: ew-resize;
+  }
+  .op-widget--right .op-widget__resize {
+    inset-inline-start: calc(var(--op-widget-grip) / -2);
+  }
+  .op-widget--left .op-widget__resize {
+    inset-inline-end: calc(var(--op-widget-grip) / -2);
+  }
+  .op-widget--top .op-widget__resize,
+  .op-widget--bottom .op-widget__resize {
+    inset-inline: 0;
+    block-size: var(--op-widget-grip);
+    cursor: ns-resize;
+  }
+  .op-widget--top .op-widget__resize {
+    inset-block-end: calc(var(--op-widget-grip) / -2);
+  }
+  .op-widget--bottom .op-widget__resize {
+    inset-block-start: calc(var(--op-widget-grip) / -2);
+  }
+  .op-widget__resize:hover,
+  .op-widget__resize:focus-visible,
+  .op-widget.is-resizing .op-widget__resize {
+    background: linear-gradient(var(--op-color-primary), var(--op-color-primary)) center / var(--op-focus-width) 100% no-repeat;
+    outline: none;
+  }
+  .op-widget--top .op-widget__resize:is(:hover, :focus-visible),
+  .op-widget--bottom .op-widget__resize:is(:hover, :focus-visible),
+  .op-widget--top.is-resizing .op-widget__resize,
+  .op-widget--bottom.is-resizing .op-widget__resize {
+    background-size: 100% var(--op-focus-width);
+  }
+  .op-widget.is-moved .op-widget__resize {
+    inset: auto 0 0 auto;
+    inline-size: var(--op-widget-corner);
+    block-size: var(--op-widget-corner);
+    background: linear-gradient(135deg, transparent 55%, var(--op-color-border-strong) 55% 62%, transparent 62% 75%, var(--op-color-border-strong) 75% 82%, transparent 82%);
+    cursor: nwse-resize;
+  }
+  .op-widget.is-moved .op-widget__resize:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+  }
+  .op-widget.is-resizing {
+    transition: none;
+    user-select: none;
+  }
 }
 
 @layer optikos {
@@ -3091,6 +4182,10 @@
     inset: 0;
     background: var(--op-backdrop-bg, var(--op-color-overlay));
   }
+  /* mask: false — still modal (the page is inert and takes no clicks), just not dimmed */
+  .op-window-backdrop.is-clear {
+    background: transparent;
+  }
   .op-window {
     position: fixed;
     inline-size: var(--op-window-width);