optikos 0.3.0 → 0.5.0

package/dist/css/carousel.css

@@ -0,0 +1,119 @@
+@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;
+    }
+  }
+}

package/dist/css/chart.css

@@ -0,0 +1,168 @@
+@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;
+    }
+  }
+}

package/dist/css/columntotals.css

@@ -0,0 +1,56 @@
+@layer optikos {
+  .op-columntotals {
+    display: grid;
+    grid-template-columns: var(--op-grid-cols);
+    box-sizing: border-box;
+    flex: none;
+    overflow: hidden;
+    min-block-size: var(--op-grid-row-height, var(--op-row-height));
+    border-block-start: var(--op-border-width) solid var(--op-grid-header-border, var(--op-color-border-strong));
+    background: var(--op-grid-total-bg, var(--op-color-surface-2));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-columntotals[hidden] {
+    display: none;
+  }
+  .op-columntotals__cell {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    min-inline-size: 0;
+    padding-inline: var(--op-grid-cell-padding-x, var(--op-control-padding-x));
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .op-columntotals__cell--right { justify-content: flex-end; }
+  .op-columntotals__cell--center { justify-content: center; }
+  .op-columntotals__op {
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-normal, normal);
+  }
+  .op-columntotals__btn {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    margin-inline-start: auto;
+    padding: var(--op-space-1);
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    background: transparent;
+    color: var(--op-color-fg-muted);
+    cursor: pointer;
+  }
+  .op-columntotals__btn:hover {
+    background: var(--op-color-hover);
+    color: var(--op-color-fg);
+  }
+  .op-columntotals__btn:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-columntotals--top {
+    border-block-start: 0;
+    border-block-end: var(--op-border-width) solid var(--op-grid-header-border, var(--op-color-border-strong));
+  }
+}

package/dist/css/core.css

@@ -85,4 +85,40 @@
     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;
+    }
+  }
 }

package/dist/css/datetimefield.css

@@ -0,0 +1,15 @@
+@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%;
+  }
+}

package/dist/css/exportbar.css

@@ -0,0 +1,9 @@
+@layer optikos {
+  .op-exportbar {
+    display: flex;
+    flex: none;
+    gap: var(--op-space-1);
+    margin-inline-start: auto;
+    padding-inline: var(--op-space-2);
+  }
+}

package/dist/css/grid.css

@@ -10,6 +10,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));
@@ -132,6 +133,18 @@
     padding: var(--op-space-2);
     border-block-start: var(--op-border-width) solid var(--_border);
   }
+  .op-grid__footer {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    border-block-start: var(--op-border-width) solid var(--_border);
+  }
+  .op-grid__footer .op-grid__pager {
+    flex: 1 1 auto;
+    border-block-start: 0;
+  }
   .op-grid .op-virtual {
     min-inline-size: var(--op-grid-min-width);
   }
@@ -375,4 +388,43 @@
   .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);
+  }
 }

package/dist/css/gridexport.css

@@ -0,0 +1,35 @@
+@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);
+    }
+  }
+}

package/dist/css/grouping.css

@@ -0,0 +1,56 @@
+@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;
+    }
+  }
+  .op-groupcontrols {
+    display: flex;
+    flex: none;
+    gap: var(--op-space-1);
+    margin-inline-start: auto;
+    padding-inline: var(--op-space-2);
+  }
+}

package/dist/css/image.css

@@ -0,0 +1,46 @@
+@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;
+    }
+  }
+}

package/dist/css/imagecanvas.css

@@ -0,0 +1,75 @@
+@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);
+  }
+}