optikos 0.2.0 → 0.4.0

package/dist/optikos.css

@@ -61,6 +61,15 @@
     --op-color-warning-soft: #fcecc9;
     --op-color-info: #1f5fa8;
     --op-color-info-soft: #dfeaf8;
+
+    /* categorical series colors (charts, avatars): distinct for color-blind eyes, 3:1 or more on the surface; the first one, unless a theme sets it, is its primary */
+    --op-chart-2: #b45309;
+    --op-chart-3: #1e7a4d;
+    --op-chart-4: #7e3fa8;
+    --op-chart-5: #0e7490;
+    --op-chart-6: #b3261e;
+    --op-chart-7: #8a6d00;
+    --op-chart-8: #5b6676;
     --op-color-focus: #2f7bd6;
     --op-color-disabled-fg: #9aa4b2;
     --op-color-disabled-bg: #eef1f5;
@@ -266,6 +275,42 @@
     outline: var(--op-focus-width) solid var(--op-color-focus);
     outline-offset: var(--op-focus-offset);
   }
+
+  /* print: the page, not the application chrome (Grid has printGrid for what its virtual list does not render) */
+  @media print {
+    .op-no-print,
+    .op-layer,
+    .op-navmenu,
+    .op-formactions,
+    .op-pagination,
+    .op-toast,
+    .op-mask,
+    .op-tabs__list,
+    .op-viewport > .op-toolbar,
+    .op-button {
+      display: none !important;
+    }
+    .op-viewport,
+    .op-viewport > *,
+    .op-panel,
+    .op-form {
+      position: static !important;
+      overflow: visible !important;
+      block-size: auto !important;
+      box-shadow: none !important;
+    }
+    .op-field,
+    .op-panel,
+    .op-fieldset {
+      break-inside: avoid;
+    }
+    .op-field__control input,
+    .op-field__control textarea {
+      border-color: transparent;
+      background: none;
+      padding-inline: 0;
+    }
+  }
 }
 
 @layer optikos {
@@ -448,6 +493,75 @@
   }
 }
 
+@layer optikos {
+  :root {
+    --op-avatar-size: 2.25rem;
+    --op-avatar-dot: 0.625rem;
+    --op-avatar-size-sm: 1.5rem;
+    --op-avatar-size-lg: 3rem;
+    --op-avatar-size-xl: 4.5rem;
+    --op-avatar-ring: 2px;
+  }
+  .op-avatar {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    inline-size: var(--op-avatar-size);
+    block-size: var(--op-avatar-size);
+    background: var(--op-avatar-c, var(--op-chart-1, var(--op-color-primary)));
+    color: var(--op-color-surface);
+    font-family: var(--op-font-family);
+    font-size: calc(var(--op-avatar-size) * 0.4);
+    font-weight: 600;
+    line-height: 1;
+    user-select: none;
+  }
+  .op-avatar--circle {
+    border-radius: 50%;
+  }
+  .op-avatar--square {
+    border-radius: var(--op-avatar-radius, var(--op-radius));
+  }
+  .op-avatar--sm {
+    --op-avatar-size: var(--op-avatar-size-sm);
+  }
+  .op-avatar--lg {
+    --op-avatar-size: var(--op-avatar-size-lg);
+  }
+  .op-avatar--xl {
+    --op-avatar-size: var(--op-avatar-size-xl);
+  }
+  .op-avatar__img {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+  }
+  .op-avatar__status {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inline-size: var(--op-avatar-dot);
+    block-size: var(--op-avatar-dot);
+    border-radius: 50%;
+    background: var(--op-color-fg-muted);
+    box-shadow: 0 0 0 var(--op-avatar-ring) var(--op-color-surface);
+  }
+  .op-avatar__status.is-online {
+    background: var(--op-color-success);
+  }
+  .op-avatar__status.is-away {
+    background: var(--op-color-warning);
+  }
+  .op-avatar__status.is-busy {
+    background: var(--op-color-danger);
+  }
+}
+
 @layer optikos {
   :root {
     --op-badge-dot-size: 0.5rem;
@@ -784,6 +898,129 @@
   }
 }
 
+@layer optikos {
+  :root {
+    --op-image-icon-size: 2em;
+  }
+  .op-image {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    background: var(--op-image-bg, var(--op-color-surface-2));
+    color: var(--op-color-fg-muted);
+    min-inline-size: 0;
+  }
+  .op-image--rounded {
+    border-radius: var(--op-image-radius, var(--op-radius));
+  }
+  .op-image__fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--op-image-icon-size);
+  }
+  .op-image__img {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    opacity: 0;
+    transition: opacity var(--op-duration) var(--op-easing);
+  }
+  .op-image.has-image .op-image__img {
+    opacity: 1;
+  }
+  .op-image--cover .op-image__img {
+    object-fit: cover;
+  }
+  .op-image--contain .op-image__img {
+    object-fit: contain;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .op-image__img {
+      transition: none;
+    }
+  }
+}
+
+@layer optikos {
+  .op-imagecanvas {
+    position: relative;
+    overflow: hidden;
+    aspect-ratio: 4 / 3;
+    background: var(--op-imagecanvas-bg, var(--op-color-surface-2));
+    border-radius: var(--op-imagecanvas-radius, var(--op-radius));
+    font-family: var(--op-font-family);
+  }
+  .op-imagecanvas__stage {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    touch-action: none;
+  }
+  .op-imagecanvas.is-zoomed .op-imagecanvas__stage {
+    cursor: grab;
+  }
+  .op-imagecanvas.is-dragging .op-imagecanvas__stage {
+    cursor: grabbing;
+  }
+  .op-imagecanvas__stage:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-imagecanvas__img {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    user-select: none;
+    transition: transform var(--op-duration) var(--op-easing);
+  }
+  .op-imagecanvas.is-dragging .op-imagecanvas__img {
+    transition: none;
+  }
+  .op-imagecanvas.is-error .op-imagecanvas__img {
+    visibility: hidden;
+  }
+  .op-imagecanvas__status {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    padding: var(--op-space-3);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    text-align: center;
+    pointer-events: none;
+  }
+  .op-imagecanvas__tools {
+    position: absolute;
+    inset-block-end: var(--op-space-2);
+    inset-inline-end: var(--op-space-2);
+    display: flex;
+    gap: var(--op-border-width);
+    overflow: hidden;
+    border-radius: var(--op-radius);
+    box-shadow: var(--op-shadow);
+  }
+  .op-imagecanvas__tool {
+    display: inline-flex;
+    padding: var(--op-space-2);
+    color: var(--op-imagecanvas-tools-fg, var(--op-color-fg));
+    background: var(--op-imagecanvas-tools-bg, var(--op-color-surface));
+    border: 0;
+    cursor: pointer;
+  }
+  .op-imagecanvas__tool:hover {
+    background: var(--op-color-primary-soft);
+  }
+  .op-imagecanvas__tool:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+}
+
 @layer optikos {
   .op-label {
     color: var(--op-label-fg, var(--op-color-fg));
@@ -797,6 +1034,240 @@
   }
 }
 
+@layer optikos {
+  :root {
+    --op-chart-line-width: 2px;
+    --op-chart-font-size: 0.75rem;
+    --op-chart-area-opacity: 0.18;
+    --op-chart-tip-width: 11rem;
+    --op-chart-swatch: 0.625rem;
+    --op-chart-total-size: 1.125rem;
+    --op-chart-bar-radius: 2px;
+  }
+  .op-chart {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-space-2);
+    min-inline-size: 0;
+    font-family: var(--op-font-family);
+    color: var(--op-chart-fg, var(--op-color-fg));
+  }
+  .op-chart__plot {
+    position: relative;
+  }
+  .op-chart__svg {
+    display: block;
+    inline-size: 100%;
+    overflow: visible;
+    touch-action: pan-y;
+  }
+  .op-chart__svg:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-chart__grid line {
+    stroke: var(--op-chart-grid, var(--op-color-border));
+    stroke-width: var(--op-border-width);
+  }
+  .op-chart__grid .op-chart__axis {
+    stroke: var(--op-color-border-strong);
+  }
+  .op-chart__tick,
+  .op-chart__empty {
+    fill: var(--op-color-fg-muted);
+    font-size: var(--op-chart-font-size);
+  }
+  .op-chart__total {
+    fill: var(--op-chart-fg, var(--op-color-fg));
+    font-size: var(--op-chart-total-size);
+    font-weight: 600;
+  }
+  .op-chart__series {
+    --op-chart-c: var(--op-chart-1, var(--op-color-primary));
+  }
+  .op-chart__bar {
+    fill: var(--op-chart-c);
+  }
+  .op-chart__line {
+    fill: none;
+    stroke: var(--op-chart-c);
+    stroke-width: var(--op-chart-line-width);
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+  .op-chart__area {
+    fill: var(--op-chart-c);
+    fill-opacity: var(--op-chart-area-opacity);
+    stroke: none;
+  }
+  .op-chart__dot {
+    fill: var(--op-color-surface);
+    stroke: var(--op-chart-c);
+    stroke-width: var(--op-chart-line-width);
+  }
+  .op-chart--sparkline .op-chart__dot {
+    fill: var(--op-chart-c);
+  }
+  .op-chart__slice {
+    fill: var(--op-chart-c);
+    stroke: var(--op-color-surface);
+    stroke-width: var(--op-chart-line-width);
+    transition: opacity var(--op-duration) var(--op-easing);
+  }
+  .op-chart__svg:has(.is-active) .op-chart__slice:not(.is-active) {
+    opacity: 0.55;
+  }
+  .op-chart__hit {
+    fill: transparent;
+  }
+  .op-chart__guide {
+    stroke: var(--op-color-border-strong);
+    stroke-width: var(--op-border-width);
+    visibility: hidden;
+  }
+  .op-chart__guide.is-on {
+    visibility: visible;
+  }
+  .op-chart__tip {
+    position: absolute;
+    inset-block-start: 0;
+    z-index: 1;
+    inline-size: max-content;
+    max-inline-size: var(--op-chart-tip-width);
+    padding: var(--op-space-2) var(--op-space-3);
+    transform: translateX(var(--op-space-3));
+    background: var(--op-color-surface);
+    color: var(--op-color-fg);
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-radius);
+    box-shadow: var(--op-shadow);
+    font-size: var(--op-chart-font-size);
+    pointer-events: none;
+  }
+  .op-chart__tip.is-left {
+    transform: translateX(calc(-100% - var(--op-space-3)));
+  }
+  .op-chart__tip-head {
+    font-weight: 600;
+    margin-block-end: var(--op-space-1);
+  }
+  .op-chart__tip-row {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+  }
+  .op-chart__tip-row b {
+    margin-inline-start: auto;
+    padding-inline-start: var(--op-space-3);
+    font-variant-numeric: tabular-nums;
+  }
+  .op-chart__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--op-space-1) var(--op-space-3);
+  }
+  .op-chart__key {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    font-size: var(--op-chart-font-size);
+    color: var(--op-color-fg);
+    cursor: pointer;
+  }
+  .op-chart__key.is-off {
+    color: var(--op-color-fg-muted);
+    text-decoration: line-through;
+  }
+  .op-chart__key:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-chart__swatch {
+    inline-size: var(--op-chart-swatch);
+    block-size: var(--op-chart-swatch);
+    border-radius: var(--op-chart-bar-radius);
+    background: var(--op-chart-c);
+    flex: none;
+  }
+  .op-chart__key.is-off .op-chart__swatch {
+    opacity: 0.35;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .op-chart__slice {
+      transition: none;
+    }
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-stat-value-size: 1.75rem;
+    --op-stat-spark-width: 6rem;
+  }
+  .op-stat {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-space-1);
+    padding: var(--op-space-4);
+    background: var(--op-stat-bg, var(--op-color-surface));
+    color: var(--op-color-fg);
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-stat-radius, var(--op-radius));
+    font-family: var(--op-font-family);
+    min-inline-size: 0;
+  }
+  .op-stat__label {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-stat__row {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: var(--op-space-2);
+  }
+  .op-stat__value {
+    font-size: var(--op-stat-value-size);
+    font-weight: 600;
+    line-height: 1.1;
+    font-variant-numeric: tabular-nums;
+  }
+  .op-stat__delta {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    font-size: var(--op-font-size-sm);
+    font-weight: 600;
+  }
+  .op-stat__delta.is-good {
+    color: var(--op-color-success);
+  }
+  .op-stat__delta.is-bad {
+    color: var(--op-color-danger);
+  }
+  .op-stat__delta.is-flat {
+    color: var(--op-color-fg-muted);
+  }
+  .op-stat__caption {
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-stat__spark {
+    position: absolute;
+    inset-block-end: var(--op-space-3);
+    inset-inline-end: var(--op-space-4);
+    inline-size: var(--op-stat-spark-width);
+  }
+}
+
 @layer optikos {
   :root {
     --op-chat-max-width: 75%;
@@ -1259,6 +1730,7 @@
     --op-grid-action-idle-opacity: 0.45;
     --op-grid-action-disabled-opacity: 0.3;
     --op-grid-selected-bar-width: 0.125rem;
+    --op-grid-lock-shadow-size: 0.375rem;
   }
   .op-grid {
     --_border: var(--op-grid-border, var(--op-color-border));
@@ -1624,6 +2096,131 @@
   .op-grid__colgroup ~ .op-grid__colitem {
     padding-inline-start: var(--op-space-4);
   }
+
+  /* locked columns: body cells stick, header cells are shifted by the scroll (the header scrolls by script, not natively) */
+  .op-grid__cell.is-locked {
+    z-index: 1;
+    background: var(--op-grid-bg, var(--op-color-surface));
+  }
+  .op-grid__body-row .is-locked-start {
+    position: sticky;
+    inset-inline-start: var(--_lock);
+  }
+  .op-grid__body-row .is-locked-end {
+    position: sticky;
+    inset-inline-end: var(--_lock);
+  }
+  .op-grid__hcell.is-locked {
+    position: relative;
+    background: var(--op-grid-header-bg, var(--op-color-surface-2));
+  }
+  .op-grid__hcell.is-locked-start {
+    inset-inline-start: var(--op-grid-scroll-x);
+  }
+  .op-grid__hcell.is-locked-end {
+    inset-inline-start: calc(-1 * var(--op-grid-scroll-end));
+  }
+  .op-grid__body-row:hover .is-locked {
+    background: var(--op-grid-row-hover-bg, var(--op-color-hover));
+  }
+  .op-grid--striped .op-grid__body-row.is-odd .is-locked {
+    background: var(--op-grid-row-stripe-bg, var(--op-color-surface-2));
+  }
+  .op-grid__body-row.is-selected .is-locked {
+    background: var(--op-grid-row-selected-bg, var(--op-color-selected));
+  }
+  .op-grid.is-scrolled-start .is-lock-edge.is-locked-start {
+    box-shadow: var(--op-grid-lock-shadow-size) 0 var(--op-grid-lock-shadow-size) calc(-1 * var(--op-grid-lock-shadow-size)) var(--op-color-border-strong);
+  }
+  .op-grid.is-scrolled-end .is-lock-edge.is-locked-end {
+    box-shadow: calc(-1 * var(--op-grid-lock-shadow-size)) 0 var(--op-grid-lock-shadow-size) calc(-1 * var(--op-grid-lock-shadow-size)) var(--op-color-border-strong);
+  }
+}
+
+@layer optikos {
+  .op-print-sheet {
+    display: none;
+  }
+  @media print {
+    html.op-printing body > *:not(.op-print-sheet) {
+      display: none !important;
+    }
+    html.op-printing .op-print-sheet {
+      display: block;
+      font-family: var(--op-font-family);
+      color: var(--op-color-fg);
+    }
+    .op-print-sheet table {
+      inline-size: 100%;
+      border-collapse: collapse;
+      font-size: var(--op-font-size-sm);
+    }
+    .op-print-sheet thead {
+      display: table-header-group;
+    }
+    .op-print-sheet tr {
+      break-inside: avoid;
+    }
+    .op-print-sheet th,
+    .op-print-sheet td {
+      padding: var(--op-space-1) var(--op-space-2);
+      border-block-end: var(--op-border-width) solid var(--op-color-border);
+      text-align: start;
+    }
+    .op-print-sheet th {
+      border-block-end-color: var(--op-color-fg);
+    }
+  }
+}
+
+@layer optikos {
+  .op-grid__row--group {
+    display: flex;
+    background: var(--op-grid-group-bg, var(--op-color-surface-2));
+    font-weight: var(--op-font-weight-bold);
+    cursor: pointer;
+  }
+  .op-grid__row--group .op-grid__cell {
+    flex: none;
+  }
+  .op-grid__row--group .op-grid__cell.is-group-label {
+    flex: 1;
+    gap: var(--op-space-2);
+  }
+  .op-grid__row--group .op-grid__cell:not(.is-group-label):not(.op-grid__selcell) {
+    display: none;
+  }
+  .op-grid__twist {
+    display: inline-flex;
+    transition: transform var(--op-duration) var(--op-easing);
+  }
+  .op-grid__row--group[aria-expanded='false'] .op-grid__twist {
+    transform: rotate(-90deg);
+  }
+  .op-grid__group-count {
+    color: var(--op-color-fg-muted);
+    font-weight: normal;
+  }
+  .op-grid__row--total {
+    font-weight: var(--op-font-weight-bold);
+    background: var(--op-grid-total-bg, var(--op-color-surface-2));
+    cursor: default;
+  }
+  .op-grid__row--total.is-grand-total {
+    border-block-start: var(--op-border-width) solid var(--op-color-border-strong);
+  }
+  .op-grid__row--total:hover {
+    background: var(--op-grid-total-bg, var(--op-color-surface-2));
+  }
+  .op-grid__body-row.is-grouped > .op-grid__cell:first-child:not(.op-grid__selcell),
+  .op-grid__body-row.is-grouped > .op-grid__selcell + .op-grid__cell {
+    padding-inline-start: calc(var(--op-grid-cell-padding-x, var(--op-control-padding-x)) + var(--op-grid-indent, var(--op-space-4)));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .op-grid__twist {
+      transition: none;
+    }
+  }
 }
 
 @layer optikos {
@@ -1650,6 +2247,46 @@
   }
 }
 
+@layer optikos {
+  .op-grid__body-row.is-row-editing {
+    z-index: 2;
+    background: var(--op-grid-row-selected-bg, var(--op-color-selected));
+  }
+  .op-grid__rowbar {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 100%;
+    inset-inline-start: var(--op-grid-scroll-x);
+    display: flex;
+    gap: var(--op-space-2);
+    padding: var(--op-space-2);
+    background: var(--op-color-surface);
+    border: var(--op-border-width) solid var(--op-color-border-strong);
+    border-block-start: 0;
+    border-end-start-radius: var(--op-radius);
+    border-end-end-radius: var(--op-radius);
+    box-shadow: var(--op-shadow);
+  }
+  .op-grid__rowbtn {
+    padding: var(--op-space-1) var(--op-space-3);
+    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);
+    font: inherit;
+    cursor: pointer;
+  }
+  .op-grid__rowbtn.is-primary {
+    color: var(--op-color-primary-fg);
+    background: var(--op-color-primary);
+    border-color: var(--op-color-primary);
+  }
+  .op-grid__rowbtn:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+}
+
 @layer optikos {
   :root {
     --op-searchgrid-gap: var(--op-space-3);
@@ -1706,22 +2343,163 @@
     text-align: start;
     border-block-end: var(--op-border-width) solid var(--op-table-border, var(--op-color-border));
   }
-  .op-table th {
-    background: var(--op-table-header-bg, var(--op-color-surface-2));
-    font-weight: var(--op-font-weight-bold);
+  .op-table th {
+    background: var(--op-table-header-bg, var(--op-color-surface-2));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-table--striped tbody tr:nth-child(even) {
+    background: var(--op-table-stripe-bg, var(--op-color-surface-2));
+  }
+  .op-table .op-table__cell--right {
+    text-align: end;
+  }
+  .op-table .op-table__cell--center {
+    text-align: center;
+  }
+  .op-table__empty td {
+    text-align: center;
+    color: var(--op-color-fg-muted);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-timeline-marker: 0.875rem;
+    --op-timeline-when-width: 8rem;
+    --op-timeline-lane-width: 8rem;
+    --op-timeline-bar-height: 1.75rem;
+    --op-timeline-line: 2px;
+  }
+  .op-timeline {
+    font-family: var(--op-font-family);
+    color: var(--op-color-fg);
+    min-inline-size: 0;
+  }
+  .op-timeline--list {
+    display: flex;
+    flex-direction: column;
+  }
+  .op-timeline__item {
+    --op-timeline-c: var(--op-color-border-strong);
+    display: grid;
+    grid-template-columns: var(--op-timeline-when-width) var(--op-timeline-marker) 1fr;
+    gap: var(--op-space-3);
+    padding-block-end: var(--op-space-4);
+    border-radius: var(--op-radius);
+  }
+  .op-timeline__item:focus-visible,
+  .op-timeline__bar:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-timeline__item.is-success { --op-timeline-c: var(--op-color-success); }
+  .op-timeline__item.is-warning { --op-timeline-c: var(--op-color-warning); }
+  .op-timeline__item.is-danger { --op-timeline-c: var(--op-color-danger); }
+  .op-timeline__item.is-info { --op-timeline-c: var(--op-color-info); }
+  .op-timeline__when {
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    text-align: end;
+    padding-block-start: var(--op-space-1);
+  }
+  .op-timeline__marker {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--op-timeline-marker);
+    block-size: var(--op-timeline-marker);
+    margin-block-start: var(--op-space-1);
+    border-radius: 50%;
+    background: var(--op-timeline-c);
+    color: var(--op-color-surface);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-timeline__marker::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: calc(50% - var(--op-timeline-line) / 2);
+    block-size: calc(100% + var(--op-space-5));
+    inline-size: var(--op-timeline-line);
+    background: var(--op-color-border);
+  }
+  .op-timeline__item:last-child .op-timeline__marker::after {
+    display: none;
+  }
+  .op-timeline__title {
+    font-weight: 600;
+  }
+  .op-timeline__text {
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+
+  .op-timeline__axis,
+  .op-timeline__lane,
+  .op-timeline__nowrow {
+    display: grid;
+    grid-template-columns: var(--op-timeline-lane-width) 1fr;
+    gap: var(--op-space-2);
+    align-items: center;
+  }
+  .op-timeline__lane {
+    border-block-start: var(--op-border-width) solid var(--op-color-border);
+    padding-block: var(--op-space-1);
+  }
+  .op-timeline__lane-name {
+    font-size: var(--op-font-size-sm);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-timeline__track {
+    position: relative;
+    block-size: var(--op-timeline-bar-height);
+  }
+  .op-timeline__axis .op-timeline__track {
+    block-size: auto;
+    min-block-size: var(--op-space-4);
   }
-  .op-table--striped tbody tr:nth-child(even) {
-    background: var(--op-table-stripe-bg, var(--op-color-surface-2));
+  .op-timeline__tick {
+    position: absolute;
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    white-space: nowrap;
   }
-  .op-table .op-table__cell--right {
-    text-align: end;
+  .op-timeline__bar {
+    --op-timeline-c: var(--op-color-primary);
+    position: absolute;
+    inset-block: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding-inline: var(--op-space-2);
+    overflow: hidden;
+    background: var(--op-timeline-c);
+    color: var(--op-color-primary-fg);
+    border-radius: var(--op-radius);
+    font-size: var(--op-font-size-sm);
+    cursor: pointer;
   }
-  .op-table .op-table__cell--center {
-    text-align: center;
+  .op-timeline__bar.is-success { --op-timeline-c: var(--op-color-success); color: var(--op-color-surface); }
+  .op-timeline__bar.is-warning { --op-timeline-c: var(--op-color-warning); color: var(--op-color-surface); }
+  .op-timeline__bar.is-danger { --op-timeline-c: var(--op-color-danger); color: var(--op-color-danger-fg); }
+  .op-timeline__bar.is-info { --op-timeline-c: var(--op-color-info); color: var(--op-color-surface); }
+  .op-timeline__bar-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-  .op-table__empty td {
-    text-align: center;
-    color: var(--op-color-fg-muted);
+  .op-timeline__nowrow {
+    block-size: 0;
+  }
+  .op-timeline__now {
+    position: absolute;
+    inset-block: calc(-1 * var(--op-space-6)) 0;
+    inline-size: var(--op-timeline-line);
+    background: var(--op-color-danger);
+    pointer-events: none;
   }
 }
 
@@ -1820,6 +2598,42 @@
   }
 }
 
+@layer optikos {
+  :root {
+    --op-grid-indent: 1.25rem;
+    --op-grid-expander-size: 1.25rem;
+  }
+  .op-grid--tree .op-grid__cell:has(> .op-grid__expander) {
+    padding-inline-start: calc(var(--op-grid-cell-padding-x, var(--op-control-padding-x)) + var(--_depth, 0) * var(--op-grid-indent));
+  }
+  .op-grid__expander {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--op-grid-expander-size);
+    block-size: var(--op-grid-expander-size);
+    margin-inline-end: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    cursor: pointer;
+    transition: transform var(--op-duration) var(--op-easing);
+  }
+  .op-grid__body-row[aria-expanded='false'] .op-grid__expander:not(.is-leaf) {
+    transform: rotate(-90deg);
+  }
+  .op-grid__expander.is-leaf {
+    cursor: default;
+  }
+  .op-grid__expander.is-loading {
+    cursor: progress;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .op-grid__expander {
+      transition: none;
+    }
+  }
+}
+
 @layer optikos {
   :root {
     --op-calendar-day-size: 2.25rem;
@@ -2007,6 +2821,22 @@
   }
 }
 
+@layer optikos {
+  .op-datetimefield__parts {
+    display: flex;
+    gap: var(--op-datetimefield-gap, var(--op-space-2));
+  }
+  .op-datetimefield__parts > .op-field {
+    margin: 0;
+  }
+  .op-datetimefield__parts > .op-field:first-child {
+    flex: 1 1 60%;
+  }
+  .op-datetimefield__parts > .op-field:last-child {
+    flex: 1 1 40%;
+  }
+}
+
 @layer optikos {
   :root {
     --op-dial-spacing: 0.75rem;
@@ -2211,6 +3041,110 @@
   }
 }
 
+@layer optikos {
+  :root {
+    --op-imagefield-thumb-size: 4rem;
+    --op-imagefield-remove-icon: 0.875rem;
+  }
+  .op-imagefield__box {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-space-2);
+  }
+  .op-imagefield__picker {
+    display: none;
+  }
+  .op-imagefield__zone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--op-space-2);
+    padding: var(--op-space-4);
+    min-block-size: calc(var(--op-imagefield-thumb-size) * 1.5);
+    box-sizing: border-box;
+    color: var(--op-color-fg-muted);
+    background: var(--op-imagefield-zone-bg, var(--op-color-surface));
+    border: var(--op-border-width) dashed var(--op-imagefield-zone-border, var(--op-color-border-strong));
+    border-radius: var(--op-imagefield-radius, var(--op-radius));
+    font: inherit;
+    font-size: var(--op-font-size-sm);
+    text-align: center;
+    cursor: pointer;
+  }
+  .op-imagefield__zone[hidden] {
+    display: none;
+  }
+  .op-imagefield__zone:hover:not(:disabled),
+  .op-imagefield.is-dragover .op-imagefield__zone {
+    background: var(--op-imagefield-zone-hover-bg, var(--op-color-primary-soft));
+    border-color: var(--op-color-primary);
+  }
+  .op-imagefield__zone:focus-visible,
+  .op-imagefield__remove:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-imagefield__zone:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  .op-imagefield.is-invalid .op-imagefield__zone {
+    border-color: var(--op-color-danger);
+  }
+  .op-imagefield__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--op-space-2);
+  }
+  .op-imagefield__list:empty {
+    display: none;
+  }
+  .op-imagefield__item {
+    position: relative;
+    inline-size: var(--op-imagefield-thumb-size);
+  }
+  .op-imagefield__img {
+    display: block;
+    inline-size: 100%;
+    aspect-ratio: 1;
+    object-fit: cover;
+    background: var(--op-color-surface-2, var(--op-color-bg));
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-imagefield-radius, var(--op-radius));
+  }
+  .op-imagefield__name {
+    display: block;
+    overflow: hidden;
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-imagefield__remove {
+    position: absolute;
+    inset-block-start: var(--op-space-1);
+    inset-inline-end: var(--op-space-1);
+    display: inline-flex;
+    padding: var(--op-space-1);
+    color: var(--op-color-fg);
+    background: var(--op-color-surface);
+    border: var(--op-border-width) solid var(--op-color-border-strong);
+    border-radius: 50%;
+    cursor: pointer;
+  }
+  .op-imagefield__remove[hidden] {
+    display: none;
+  }
+  .op-imagefield__remove:hover:not(:disabled) {
+    color: var(--op-color-danger);
+  }
+  .op-imagefield__remove .op-icon {
+    inline-size: var(--op-imagefield-remove-icon);
+    block-size: var(--op-imagefield-remove-icon);
+  }
+}
+
 @layer optikos {
   :root {
     --op-listbox-max-height: 15rem;
@@ -3047,6 +3981,136 @@
   .op-stepform__review-list dd {
     margin: 0;
     overflow-wrap: anywhere;
+    white-space: pre-line; /* FieldList: one line per row */
+  }
+  /* a step's general message (its validate returned a string) */
+  .op-stepform__note {
+    margin-block-end: var(--op-space-3);
+    padding: var(--op-space-2) var(--op-space-3);
+    color: var(--op-color-danger);
+    background: var(--op-color-danger-soft);
+    border-radius: var(--op-radius);
+    font-size: var(--op-font-size-sm);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-carousel-dot-size: 0.5rem;
+    --op-carousel-gap: 0rem;
+  }
+  .op-carousel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-space-2);
+    min-inline-size: 0;
+    font-family: var(--op-font-family);
+  }
+  .op-carousel__viewport {
+    position: relative;
+  }
+  .op-carousel__track {
+    position: relative;
+    display: flex;
+    gap: var(--op-carousel-gap);
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    border-radius: var(--op-carousel-radius, var(--op-radius));
+  }
+  .op-carousel__track::-webkit-scrollbar {
+    display: none;
+  }
+  .op-carousel__track:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-carousel__track > * {
+    flex: 0 0 calc((100% - (var(--op-carousel-per-view, 1) - 1) * var(--op-carousel-gap)) / var(--op-carousel-per-view, 1));
+    min-inline-size: 0;
+    scroll-snap-align: start;
+  }
+  .op-carousel__prev,
+  .op-carousel__next {
+    position: absolute;
+    inset-block-start: 50%;
+    translate: 0 -50%;
+    display: inline-flex;
+    padding: var(--op-space-2);
+    color: var(--op-carousel-arrow-fg, var(--op-color-fg));
+    background: var(--op-carousel-arrow-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: 50%;
+    box-shadow: var(--op-shadow);
+    cursor: pointer;
+  }
+  .op-carousel__prev {
+    inset-inline-start: var(--op-space-2);
+  }
+  .op-carousel__next {
+    inset-inline-end: var(--op-space-2);
+  }
+  [dir='rtl'] .op-carousel__prev .op-icon,
+  [dir='rtl'] .op-carousel__next .op-icon {
+    scale: -1 1;
+  }
+  .op-carousel__prev:disabled,
+  .op-carousel__next:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+  .op-carousel__bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--op-space-3);
+  }
+  .op-carousel__bar:not(:has(:not([hidden]))) {
+    display: none;
+  }
+  .op-carousel__dots {
+    display: flex;
+    gap: var(--op-space-1);
+  }
+  .op-carousel__dot {
+    inline-size: var(--op-carousel-dot-size);
+    block-size: var(--op-carousel-dot-size);
+    padding: 0;
+    background: var(--op-carousel-dot-bg, var(--op-color-border-strong));
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+  .op-carousel__dot[aria-current] {
+    background: var(--op-carousel-dot-active-bg, var(--op-color-primary));
+  }
+  .op-carousel__toggle {
+    display: inline-flex;
+    padding: var(--op-space-1);
+    color: var(--op-color-fg);
+    background: none;
+    border: 0;
+    border-radius: var(--op-radius);
+    cursor: pointer;
+  }
+  .op-carousel__prev:focus-visible,
+  .op-carousel__next:focus-visible,
+  .op-carousel__dot:focus-visible,
+  .op-carousel__toggle:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-carousel__prev[hidden],
+  .op-carousel__next[hidden],
+  .op-carousel__toggle[hidden],
+  .op-carousel__dots[hidden] {
+    display: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .op-carousel__track {
+      scroll-behavior: auto;
+    }
   }
 }
 
@@ -3394,19 +4458,21 @@
     inline-size: var(--op-navmenu-rail-width);
   }
   .op-navmenu.is-rail .op-navmenu__text,
-  .op-navmenu.is-rail .op-navmenu__chevron,
-  .op-navmenu.is-rail .op-navmenu__item.is-group .op-navmenu__icon {
+  .op-navmenu.is-rail .op-navmenu__chevron {
     display: none;
   }
   .op-navmenu.is-rail .op-navmenu__item {
     justify-content: center;
     padding-inline: 0;
   }
-  .op-navmenu.is-rail .op-navmenu__item.is-group {
-    min-block-size: var(--op-space-3);
-    border-block-start: var(--op-border-width) solid var(--op-color-border);
-    border-radius: 0;
-    pointer-events: none;
+  /* in the rail a group is an icon that opens a floating menu; it lights up when the active page is inside */
+  .op-navmenu.is-rail .op-navmenu__item.is-group .op-navmenu__icon {
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-navmenu.is-rail .op-navmenu__item.has-active,
+  .op-navmenu.is-rail .op-navmenu__item[aria-expanded='true'] {
+    color: var(--op-navmenu-active-fg, var(--op-color-primary));
+    background: var(--op-navmenu-active-bg, var(--op-color-primary-soft));
   }
   .op-navmenu.is-rail .op-navmenu__badge {
     display: none;
@@ -3918,6 +4984,15 @@
     letter-spacing: var(--op-menu-group-tracking);
     text-transform: uppercase;
   }
+  .op-menu__badge {
+    min-inline-size: var(--op-space-4);
+    padding: 0 var(--op-space-1);
+    color: var(--op-menu-badge-fg, var(--op-color-primary-fg));
+    background: var(--op-menu-badge-bg, var(--op-color-primary));
+    border-radius: var(--op-radius-pill);
+    font-size: var(--op-font-size-sm);
+    text-align: center;
+  }
 }
 
 @layer optikos {
@@ -3927,6 +5002,41 @@
   }
 }
 
+@layer optikos {
+  .op-shortcuts {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-space-1);
+    padding: var(--op-space-3) var(--op-space-4);
+    font-family: var(--op-font-family);
+  }
+  .op-shortcuts__group {
+    margin: var(--op-space-3) 0 var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+  .op-shortcuts__group:first-child {
+    margin-block-start: 0;
+  }
+  .op-shortcuts__row {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--op-space-4);
+    padding-block: var(--op-space-1);
+  }
+  .op-shortcuts__kbd {
+    padding: 0 var(--op-space-2);
+    background: var(--op-color-surface-2);
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-radius);
+    font-family: inherit;
+    font-size: var(--op-font-size-sm);
+    white-space: nowrap;
+  }
+}
+
 @layer optikos {
   :root {
     --op-toast-width: 22rem;
@@ -4176,6 +5286,7 @@
 @layer optikos {
   :root {
     --op-window-width: 28rem;
+    --op-window-max-height: 85dvh;
   }
   .op-window-backdrop {
     position: fixed;
@@ -4190,8 +5301,7 @@
     position: fixed;
     inline-size: var(--op-window-width);
     max-inline-size: calc(100vw - var(--op-space-4));
-    max-block-size: calc(100vh - var(--op-space-4));
-    max-block-size: calc(100dvh - var(--op-space-4));
+    max-block-size: var(--op-window-max-height);
     background: var(--op-window-bg, var(--op-color-surface));
     border-radius: var(--op-window-radius, var(--op-radius-lg));
     box-shadow: var(--op-window-shadow, var(--op-shadow-lg));