optikos 0.0.0-stage → 0.2.0

package/dist/css/radiogroup.css

@@ -0,0 +1,53 @@
+@layer optikos {
+  :root {
+    --op-radio-size: 1.125rem;
+  }
+  .op-radiogroup__options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-radiogroup-gap, var(--op-space-1));
+  }
+  .op-radiogroup__options--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--op-radiogroup-gap, var(--op-space-4));
+  }
+  .op-radio {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    min-block-size: var(--op-control-height);
+    cursor: pointer;
+  }
+  .op-radio__input {
+    position: absolute;
+    opacity: 0;
+    inline-size: 0;
+    block-size: 0;
+  }
+  .op-radio__dot {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--op-radio-size);
+    block-size: var(--op-radio-size);
+    background: var(--op-radio-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-radio-border, var(--op-color-border-strong));
+    border-radius: 50%;
+  }
+  .op-radio.is-checked .op-radio__dot {
+    background: var(--op-radio-checked-bg, var(--op-color-primary));
+    border-color: var(--op-radio-checked-bg, var(--op-color-primary));
+    box-shadow: inset 0 0 0 var(--op-space-1) var(--op-radio-bg, var(--op-color-surface));
+  }
+  .op-radio__input:focus-visible + .op-radio__dot {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-radio:has(:disabled) {
+    cursor: not-allowed;
+    color: var(--op-color-disabled-fg);
+  }
+  .op-radiogroup.is-invalid .op-radio__dot {
+    border-color: var(--op-field-invalid-border, var(--op-color-danger));
+  }
+}

package/dist/css/searchgrid.css

@@ -0,0 +1,37 @@
+@layer optikos {
+  :root {
+    --op-searchgrid-gap: var(--op-space-3);
+    --op-searchgrid-filters-padding: 0;
+    --op-searchgrid-field-width: 12rem;
+    --op-searchgrid-grid-min-height: 12rem;
+  }
+  .op-searchgrid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-searchgrid-gap);
+    block-size: 100%;
+    min-block-size: 0;
+  }
+  .op-searchgrid__filters {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--op-searchgrid-gap);
+    padding: var(--op-searchgrid-filters-padding);
+    background: var(--op-searchgrid-filters-bg, transparent);
+  }
+  .op-searchgrid__filters > .op-field {
+    flex: 1 1 var(--op-searchgrid-field-width);
+    min-inline-size: 0;
+  }
+  .op-searchgrid__buttons {
+    display: flex;
+    gap: var(--op-space-2);
+    margin-inline-start: auto;
+  }
+  .op-searchgrid > .op-grid {
+    flex: 1;
+    min-block-size: var(--op-searchgrid-grid-min-height);
+  }
+}

package/dist/css/secretfield.css

@@ -0,0 +1,73 @@
+@layer optikos {
+  :root {
+    --op-secret-mask-tracking: 0.1em;
+  }
+  .op-secret__box {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-space-1);
+  }
+  .op-secret .op-textfield__input {
+    padding-inline-end: calc(var(--op-icon-size) + var(--op-space-5));
+  }
+  .op-secret__eye,
+  .op-secret__replace,
+  .op-secret__keep {
+    font: inherit;
+    cursor: pointer;
+  }
+  .op-secret__eye {
+    position: absolute;
+    inset-inline-end: var(--op-space-1);
+    display: inline-flex;
+    padding: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+  }
+  .op-secret__eye:hover,
+  .op-secret__eye[aria-pressed='true'] {
+    color: var(--op-color-primary);
+  }
+  .op-secret__replace,
+  .op-secret__keep {
+    color: var(--op-color-primary);
+    background: transparent;
+    border: 0;
+    text-decoration: underline;
+  }
+  .op-secret__replace {
+    position: absolute;
+    inset-inline-end: var(--op-space-3);
+  }
+  .op-secret__eye:focus-visible,
+  .op-secret__replace:focus-visible,
+  .op-secret__keep:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  /* saved: a mask where the value would be, and a field that looks closed (it opens through the warning) */
+  .op-secret.is-stored .op-textfield__input {
+    cursor: pointer;
+    background: var(--op-color-surface-2);
+  }
+  .op-secret.is-stored .op-textfield__input::placeholder {
+    color: var(--op-secret-mask-fg, var(--op-color-fg));
+    letter-spacing: var(--op-secret-mask-tracking);
+  }
+  .op-secret__hint {
+    display: flex;
+    align-items: baseline;
+    gap: var(--op-space-3);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-secret__hint[hidden],
+  .op-secret__note[hidden],
+  .op-secret__keep[hidden],
+  .op-secret__eye[hidden],
+  .op-secret__replace[hidden] {
+    display: none;
+  }
+}

package/dist/css/slider.css

@@ -0,0 +1,107 @@
+@layer optikos {
+  :root {
+    --op-slider-track-height: 0.375rem;
+    --op-slider-knob-size: 1.25rem;
+    --op-slider-bubble-offset: 0.5rem;
+  }
+  .op-slider__box {
+    padding-block: calc(var(--op-slider-knob-size) / 2 + var(--op-space-2)) var(--op-space-1);
+    padding-inline: calc(var(--op-slider-knob-size) / 2);
+  }
+  .op-slider.has-bubble-always .op-slider__box {
+    padding-block-start: calc(var(--op-slider-knob-size) + var(--op-space-4));
+  }
+  .op-slider__track {
+    position: relative;
+    block-size: var(--op-slider-track-height);
+    background: var(--op-slider-track-bg, var(--op-color-border-strong));
+    border-radius: var(--op-radius-pill);
+    cursor: pointer;
+    touch-action: none;
+  }
+  .op-slider__fill {
+    position: absolute;
+    inset-block: 0;
+    background: var(--op-slider-fill-bg, var(--op-color-primary));
+    border-radius: inherit;
+  }
+  .op-slider__knob {
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: var(--op-slider-knob-size);
+    block-size: var(--op-slider-knob-size);
+    margin-inline-start: calc(var(--op-slider-knob-size) / -2);
+    margin-block-start: calc(var(--op-slider-knob-size) / -2);
+    box-sizing: border-box;
+    background: var(--op-slider-knob-bg, var(--op-color-surface));
+    border: calc(var(--op-border-width) * 2) solid var(--op-slider-knob-border, var(--op-color-primary));
+    border-radius: 50%;
+    box-shadow: var(--op-shadow-sm);
+    cursor: grab;
+    touch-action: none;
+  }
+  .op-slider.is-dragging .op-slider__knob {
+    cursor: grabbing;
+  }
+  .op-slider__knob:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-slider__knob[aria-valuenow] {
+    z-index: 1;
+  }
+  /* the bubble with the value: above the knob, while dragging or focused (or always / never) */
+  .op-slider__bubble {
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-end: calc(100% + var(--op-slider-bubble-offset));
+    padding: 0 var(--op-space-2);
+    color: var(--op-slider-bubble-fg, var(--op-color-inverse-fg));
+    background: var(--op-slider-bubble-bg, var(--op-color-inverse-bg));
+    border-radius: var(--op-radius-sm);
+    font-size: var(--op-font-size-sm);
+    white-space: nowrap;
+    transform: translateX(-50%);
+    opacity: 0;
+    pointer-events: none;
+  }
+  .op-slider.is-dragging .op-slider__bubble,
+  .op-slider.is-focus-knob .op-slider__knob:focus-visible .op-slider__bubble,
+  .op-slider.has-bubble-always .op-slider__bubble {
+    opacity: 1;
+  }
+  .op-slider.has-bubble-never .op-slider__bubble {
+    display: none;
+  }
+  .op-slider__mark {
+    position: absolute;
+    inset-block-start: 100%;
+    inline-size: var(--op-border-width);
+    block-size: var(--op-space-2);
+    margin-block-start: var(--op-space-1);
+    background: var(--op-color-border-strong);
+  }
+  .op-slider__mark-label {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    white-space: nowrap;
+    transform: translateX(-50%);
+  }
+  .op-slider__scale {
+    display: flex;
+    justify-content: space-between;
+    margin-block-start: var(--op-space-3);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-slider.is-disabled .op-slider__track,
+  .op-slider.is-readonly .op-slider__track {
+    cursor: not-allowed;
+  }
+  .op-slider.is-disabled {
+    opacity: 0.6;
+  }
+}

package/dist/css/spacer.css

@@ -0,0 +1,7 @@
+@layer optikos {
+  .op-spacer--line {
+    align-self: stretch;
+    inline-size: var(--op-border-width);
+    background: var(--op-spacer-line, var(--op-color-border));
+  }
+}

package/dist/css/stepform.css

@@ -0,0 +1,46 @@
+@layer optikos {
+  :root {
+    --op-stepform-review-label-width: 9rem;
+  }
+  .op-stepform {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-stepform-gap, var(--op-space-4));
+    min-block-size: 0;
+  }
+  .op-stepform > .op-stepper {
+    flex: none;
+    padding-inline: var(--op-stepform-step-padding, var(--op-space-3));
+  }
+  .op-stepform__body {
+    flex: 1;
+    min-block-size: 0;
+    overflow: auto;
+  }
+  .op-stepform__step {
+    padding: var(--op-stepform-step-padding, var(--op-space-3));
+  }
+  .op-stepform > .op-stepform__footer {
+    flex: none;
+    border-block-end: 0;
+    border-block-start: var(--op-border-width) solid var(--op-color-border);
+  }
+  .op-stepform__review-title {
+    margin: var(--op-space-3) 0 var(--op-space-2);
+    font-size: var(--op-font-size-lg);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-stepform__review-list {
+    display: grid;
+    grid-template-columns: minmax(var(--op-stepform-review-label-width), max-content) minmax(0, 1fr);
+    gap: var(--op-space-1) var(--op-space-4);
+    margin: 0;
+  }
+  .op-stepform__review-list dt {
+    color: var(--op-color-fg-muted);
+  }
+  .op-stepform__review-list dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+}

package/dist/css/stepper.css

@@ -0,0 +1,122 @@
+@layer optikos {
+  :root {
+    --op-stepper-marker-size: 1.75rem;
+  }
+  .op-stepper__list {
+    display: flex;
+    gap: var(--op-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .op-stepper__step {
+    display: flex;
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .op-stepper__step:last-child {
+    flex: none;
+  }
+  /* the line to the next step: fills what is left after the text, level with the middle of the marker */
+  .op-stepper__line {
+    flex: 1;
+    align-self: flex-start;
+    min-inline-size: var(--op-space-3);
+    margin-block-start: calc(var(--op-stepper-marker-size) / 2);
+    margin-inline: var(--op-space-1) var(--op-space-2);
+    block-size: var(--op-border-width);
+    background: var(--op-stepper-line, var(--op-color-border-strong));
+  }
+  .op-stepper__step.is-done .op-stepper__line {
+    background: var(--op-stepper-done-bg, var(--op-color-success));
+  }
+  .op-stepper__btn {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--op-space-2);
+    min-inline-size: 0;
+    padding: 0;
+    font: inherit;
+    color: var(--op-color-fg-muted);
+    text-align: start;
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius);
+    cursor: pointer;
+  }
+  .op-stepper__btn:disabled {
+    cursor: default;
+  }
+  .op-stepper__btn:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-stepper__marker {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--op-stepper-marker-size);
+    block-size: var(--op-stepper-marker-size);
+    background: var(--op-color-surface);
+    border: var(--op-border-width) solid var(--op-stepper-line, var(--op-color-border-strong));
+    border-radius: 50%;
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-stepper__text {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    padding-inline-end: var(--op-space-2);
+    background: inherit;
+  }
+  .op-stepper__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-stepper__desc,
+  .op-stepper__opt {
+    font-size: var(--op-font-size-sm);
+    color: var(--op-color-fg-muted);
+  }
+  .op-stepper__step.is-current .op-stepper__btn {
+    color: var(--op-color-fg);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-stepper__step.is-current .op-stepper__marker {
+    color: var(--op-color-primary-fg);
+    background: var(--op-stepper-current-bg, var(--op-color-primary));
+    border-color: var(--op-stepper-current-bg, var(--op-color-primary));
+  }
+  .op-stepper__step.is-done:not(.is-current) .op-stepper__marker {
+    color: var(--op-color-success);
+    border-color: var(--op-stepper-done-bg, var(--op-color-success));
+  }
+  .op-stepper__step.is-error .op-stepper__marker {
+    color: var(--op-color-danger-fg);
+    background: var(--op-stepper-error-bg, var(--op-color-danger));
+    border-color: var(--op-stepper-error-bg, var(--op-color-danger));
+  }
+  .op-stepper__step.is-error .op-stepper__btn {
+    color: var(--op-color-danger);
+  }
+  /* 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 {
+      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;
+    }
+    .op-stepper__step:not(.is-current) .op-stepper__line {
+      min-inline-size: var(--op-space-2);
+    }
+  }
+}

package/dist/css/table.css

@@ -0,0 +1,36 @@
+@layer optikos {
+  .op-table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    color: var(--op-color-fg);
+    font-size: var(--op-font-size);
+  }
+  .op-table caption {
+    padding: var(--op-space-2);
+    text-align: start;
+    color: var(--op-color-fg-muted);
+  }
+  .op-table th,
+  .op-table td {
+    padding: var(--op-table-cell-padding-y, var(--op-space-2)) var(--op-table-cell-padding-x, var(--op-space-3));
+    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--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);
+  }
+}

package/dist/css/tabs.css

@@ -0,0 +1,108 @@
+@layer optikos {
+  :root {
+    --op-tabs-badge-min-width: 1.25em;
+  }
+  .op-tabs {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    color: var(--op-color-fg);
+  }
+  .op-tabs--left {
+    flex-direction: row;
+  }
+  .op-tabs__bar {
+    display: flex;
+    flex: none;
+    gap: var(--op-tabs-gap, var(--op-space-1));
+    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;
+  }
+  .op-tabs--left > .op-tabs__bar {
+    flex-direction: column;
+    border-block-end: 0;
+    border-inline-end: var(--op-border-width) solid var(--op-color-border);
+    overflow: visible;
+  }
+  .op-tabs__tab {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    padding: var(--op-tabs-tab-padding-y, var(--op-space-2)) var(--op-tabs-tab-padding-x, var(--op-space-4));
+    color: var(--op-tabs-tab-fg, var(--op-color-fg-muted));
+    border-block-end: var(--op-space-1) solid transparent;
+    margin-block-end: calc(var(--op-border-width) * -1);
+    cursor: pointer;
+    white-space: nowrap;
+    user-select: none;
+  }
+  .op-tabs--left > .op-tabs__bar > .op-tabs__tab {
+    border-block-end: 0;
+    border-inline-end: var(--op-space-1) solid transparent;
+    margin-block-end: 0;
+    margin-inline-end: calc(var(--op-border-width) * -1);
+  }
+  .op-tabs__tab:hover {
+    color: var(--op-color-fg);
+  }
+  .op-tabs__tab.is-active {
+    color: var(--op-tabs-tab-active-fg, var(--op-color-primary));
+    border-color: var(--op-tabs-tab-active-border, var(--op-color-primary));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-tabs__tab[aria-disabled='true'] {
+    color: var(--op-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  .op-tabs__close,
+  .op-tabs__reload {
+    display: inline-flex;
+    border-radius: var(--op-radius-sm);
+  }
+  .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;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .op-tabs__panels > * {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+  .op-tabs__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--op-tabs-badge-min-width);
+    padding: 0 var(--op-space-1);
+    color: var(--op-color-danger-fg);
+    background: var(--op-color-danger);
+    border-radius: var(--op-radius-pill);
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-tabs__tab.has-error {
+    color: var(--op-color-danger);
+  }
+  .op-tabs__tab.is-dirty .op-tabs__title::after {
+    content: '•';
+    margin-inline-start: var(--op-space-1);
+    color: var(--op-color-primary);
+  }
+}

package/dist/css/textarea.css

@@ -0,0 +1,11 @@
+@layer optikos {
+  :root {
+    --op-textarea-min-height: 4rem;
+  }
+  .op-textarea__input {
+    min-block-size: var(--op-textarea-min-height);
+    padding-block: var(--op-space-2);
+    resize: vertical;
+    line-height: var(--op-line-height);
+  }
+}

package/dist/css/textfield.css

@@ -0,0 +1,59 @@
+@layer optikos {
+  .op-textfield {
+    --_bg: var(--op-textfield-bg, var(--op-color-surface));
+    --_border: var(--op-textfield-border, var(--op-color-border-strong));
+  }
+  .op-textfield__wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .op-textfield__input {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--op-textfield-height, var(--op-control-height));
+    padding: var(--op-textfield-padding-y, 0) var(--op-textfield-padding-x, var(--op-control-padding-x));
+    font: inherit;
+    color: var(--op-textfield-fg, var(--op-color-fg));
+    background: var(--_bg);
+    border: var(--op-border-width) solid var(--_border);
+    border-radius: var(--op-textfield-radius, var(--op-radius));
+    transition: border-color var(--op-duration) var(--op-easing);
+  }
+  .op-textfield__input::placeholder {
+    color: var(--op-textfield-placeholder, var(--op-color-fg-muted));
+  }
+  .op-textfield__input:focus {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: 0;
+    border-color: var(--op-textfield-border-focus, var(--op-color-focus));
+  }
+  .op-textfield.is-invalid .op-textfield__input {
+    --_border: var(--op-field-invalid-border, var(--op-color-danger));
+  }
+  .op-textfield.is-readonly .op-textfield__input {
+    background: var(--op-color-surface-2);
+  }
+  .op-textfield__input:disabled {
+    color: var(--op-color-disabled-fg);
+    background: var(--op-color-disabled-bg);
+    cursor: not-allowed;
+  }
+  .op-textfield__clear {
+    position: absolute;
+    inset-inline-end: var(--op-space-1);
+    display: none;
+    padding: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+  }
+  .op-textfield.has-value .op-textfield__clear {
+    display: inline-flex;
+  }
+  .op-textfield__clear:hover {
+    color: var(--op-color-fg);
+  }
+}