optikos 0.0.0-stage → 0.1.0

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,117 @@
+@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 keeps its words */
+  @media (max-width: 40rem) {
+    .op-stepper__step:not(.is-current) .op-stepper__text {
+      display: none;
+    }
+    .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,99 @@
+@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));
+    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 {
+    display: inline-flex;
+    border-radius: var(--op-radius-sm);
+  }
+  .op-tabs__close:hover {
+    background: var(--op-color-hover);
+  }
+  .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);
+  }
+}

package/dist/css/toast.css

@@ -0,0 +1,91 @@
+@layer optikos {
+  :root {
+    --op-toast-width: 22rem;
+    --op-z-toast: 2;
+  }
+  .op-toast-region {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-toast-gap, var(--op-space-2));
+    padding: var(--op-space-4);
+    max-inline-size: 100%;
+    z-index: var(--op-z-toast);
+    pointer-events: none;
+  }
+  .op-toast-region > * {
+    pointer-events: auto;
+  }
+  .op-toast-region[data-pos^='top'] {
+    inset-block-start: 0;
+  }
+  .op-toast-region[data-pos^='bottom'] {
+    inset-block-end: 0;
+  }
+  .op-toast-region[data-pos$='right'] {
+    inset-inline-end: 0;
+  }
+  .op-toast-region[data-pos$='left'] {
+    inset-inline-start: 0;
+  }
+  .op-toast-region[data-pos='top'],
+  .op-toast-region[data-pos='bottom'] {
+    inset-inline: 0;
+    align-items: center;
+  }
+  .op-toast {
+    --_accent: var(--op-toast-accent-info, var(--op-color-info));
+    display: flex;
+    align-items: flex-start;
+    gap: var(--op-space-2);
+    box-sizing: border-box;
+    inline-size: var(--op-toast-width);
+    max-inline-size: 100%;
+    padding: var(--op-space-3);
+    color: var(--op-toast-fg, var(--op-color-fg));
+    background: var(--op-toast-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-inline-start: var(--op-space-1) solid var(--_accent);
+    border-radius: var(--op-toast-radius, var(--op-radius));
+    box-shadow: var(--op-toast-shadow, var(--op-shadow));
+    animation: op-toast-in var(--op-duration) var(--op-easing);
+  }
+  .op-toast--success {
+    --_accent: var(--op-toast-accent-success, var(--op-color-success));
+  }
+  .op-toast--warning {
+    --_accent: var(--op-toast-accent-warning, var(--op-color-warning));
+  }
+  .op-toast--error {
+    --_accent: var(--op-toast-accent-error, var(--op-color-danger));
+  }
+  .op-toast__icon {
+    color: var(--_accent);
+    display: inline-flex;
+  }
+  .op-toast__body {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .op-toast__title {
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-toast__close {
+    display: inline-flex;
+    padding: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+  }
+  .op-toast__close:hover {
+    background: var(--op-color-hover);
+  }
+  @keyframes op-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(calc(var(--op-space-2) * -1));
+    }
+  }
+}

package/dist/css/toolbar.css

@@ -0,0 +1,14 @@
+@layer optikos {
+  .op-toolbar {
+    --op-layout-gap: var(--op-toolbar-gap, var(--op-space-2));
+    flex-wrap: wrap;
+    padding: var(--op-toolbar-padding, var(--op-space-2));
+    background: var(--op-toolbar-bg, var(--op-color-surface));
+    border-block-end: var(--op-border-width) solid var(--op-toolbar-border, var(--op-color-border));
+  }
+  /* toolbar items keep their size and wrap to a new row instead of being squeezed or cut */
+  .op-toolbar > * {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+}

package/dist/css/tooltip.css

@@ -0,0 +1,17 @@
+@layer optikos {
+  :root {
+    --op-tooltip-max-width: 20rem;
+  }
+  .op-tooltip {
+    position: fixed;
+    box-sizing: border-box;
+    max-inline-size: var(--op-tooltip-max-width);
+    padding: var(--op-tooltip-padding, var(--op-space-1) var(--op-space-2));
+    color: var(--op-tooltip-fg, var(--op-color-inverse-fg));
+    background: var(--op-tooltip-bg, var(--op-color-inverse-bg));
+    border-radius: var(--op-tooltip-radius, var(--op-radius-sm));
+    font-size: var(--op-tooltip-font-size, var(--op-font-size-sm));
+    pointer-events: none;
+    overflow-wrap: anywhere;
+  }
+}

package/dist/css/viewport.css

@@ -0,0 +1,9 @@
+@layer optikos {
+  .op-viewport {
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+    color: var(--op-viewport-fg, var(--op-color-fg));
+    background: var(--op-viewport-bg, var(--op-color-bg));
+  }
+}

package/dist/css/widget.css

@@ -0,0 +1,77 @@
+@layer optikos {
+  :root {
+    --op-widget-width: 24rem;
+    --op-widget-height: 26rem;
+    --op-widget-wide: 36rem;
+    --op-widget-offset: var(--op-space-4);
+  }
+  .op-widget {
+    min-block-size: 0;
+    background: var(--op-widget-bg, var(--op-color-surface));
+    border-radius: var(--op-widget-radius, var(--op-radius-lg));
+  }
+  .op-widget.is-floating {
+    --_from: translateX(0);
+    position: fixed;
+    box-shadow: var(--op-widget-shadow, var(--op-shadow-lg));
+    opacity: 0;
+    transform: var(--_from);
+    transition: transform var(--op-duration) var(--op-easing), opacity var(--op-duration) var(--op-easing);
+  }
+  .op-widget.is-floating.is-open {
+    opacity: 1;
+    transform: none;
+  }
+  .op-widget.is-floating[hidden] {
+    display: none;
+  }
+  /* sides: a column on the left/right, a bar (anchored to the end corner) on top/bottom */
+  .op-widget--right.is-floating,
+  .op-widget--left.is-floating {
+    inset-block: var(--op-widget-offset);
+    inline-size: var(--op-widget-size, var(--op-widget-width));
+    max-inline-size: calc(100% - 2 * var(--op-widget-offset));
+  }
+  .op-widget--right.is-floating {
+    inset-inline-end: var(--op-widget-offset);
+    --_from: translateX(calc(100% + var(--op-widget-offset)));
+  }
+  .op-widget--left.is-floating {
+    inset-inline-start: var(--op-widget-offset);
+    --_from: translateX(calc(-100% - var(--op-widget-offset)));
+  }
+  .op-widget--top.is-floating,
+  .op-widget--bottom.is-floating {
+    inset-inline-end: var(--op-widget-offset);
+    inline-size: min(var(--op-widget-wide), calc(100% - 2 * var(--op-widget-offset)));
+    block-size: var(--op-widget-size, var(--op-widget-height));
+    max-block-size: calc(100% - 2 * var(--op-widget-offset));
+  }
+  .op-widget--top.is-floating {
+    inset-block-start: var(--op-widget-offset);
+    --_from: translateY(calc(-100% - var(--op-widget-offset)));
+  }
+  .op-widget--bottom.is-floating {
+    inset-block-end: var(--op-widget-offset);
+    --_from: translateY(calc(100% + var(--op-widget-offset)));
+  }
+  .op-widget [aria-pressed='true'] {
+    color: var(--op-color-primary);
+    background: var(--op-color-primary-soft);
+  }
+  /* dragged: no longer tied to a side; the slide-in becomes a small rise */
+  .op-widget.is-moved.is-floating {
+    --_from: translateY(var(--op-space-3));
+  }
+  .op-widget__handle {
+    cursor: grab;
+    user-select: none;
+    touch-action: none;
+  }
+  .op-widget.is-dragging .op-widget__handle {
+    cursor: grabbing;
+  }
+  .op-widget.is-dragging {
+    transition: none;
+  }
+}