optikos 0.0.0-stage → 0.2.0

package/dist/css/inputgroup.css

@@ -0,0 +1,58 @@
+@layer optikos {
+  /* the field's control becomes a row: [prefix][input box][suffix], the inner corners squared off */
+  .op-inputgroup__row {
+    display: flex;
+    align-items: stretch;
+  }
+  .op-inputgroup__row > :not(.op-inputgroup__affix) {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .op-inputgroup__affix {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding-inline: var(--op-control-padding-x);
+    color: var(--op-inputgroup-affix-fg, var(--op-color-fg-muted));
+    background: var(--op-inputgroup-affix-bg, var(--op-color-surface-2));
+    border: var(--op-border-width) solid var(--op-textfield-border, var(--op-color-border-strong));
+    white-space: nowrap;
+  }
+  .op-inputgroup__btn {
+    color: var(--op-color-fg);
+    font: inherit;
+    font-weight: var(--op-font-weight-medium);
+    cursor: pointer;
+  }
+  .op-inputgroup__btn:hover {
+    background: var(--op-color-hover);
+  }
+  .op-inputgroup__btn:focus-visible {
+    position: relative;
+    z-index: 1;
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+  }
+  .op-inputgroup__affix--prefix {
+    margin-inline-end: calc(var(--op-border-width) * -1);
+    border-start-start-radius: var(--op-textfield-radius, var(--op-radius));
+    border-end-start-radius: var(--op-textfield-radius, var(--op-radius));
+  }
+  .op-inputgroup__affix--suffix {
+    margin-inline-start: calc(var(--op-border-width) * -1);
+    border-start-end-radius: var(--op-textfield-radius, var(--op-radius));
+    border-end-end-radius: var(--op-textfield-radius, var(--op-radius));
+  }
+  /* every text-based field (Select, DateField, NumberField...) draws its box on .op-textfield__input */
+  .op-inputgroup .has-prefix .op-textfield__input {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .op-inputgroup .has-suffix .op-textfield__input {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .op-inputgroup .op-textfield__input:focus {
+    position: relative;
+    z-index: 1; /* the focus ring stays above the joined segments */
+  }
+}

package/dist/css/label.css

@@ -0,0 +1,12 @@
+@layer optikos {
+  .op-label {
+    color: var(--op-label-fg, var(--op-color-fg));
+  }
+  .op-label--muted {
+    color: var(--op-label-muted-fg, var(--op-color-fg-muted));
+  }
+  .op-label--title {
+    font-size: var(--op-label-title-size, var(--op-font-size-lg));
+    font-weight: var(--op-label-title-weight, var(--op-font-weight-bold));
+  }
+}

package/dist/css/layout.css

@@ -0,0 +1,116 @@
+@layer optikos {
+  [hidden] {
+    display: none !important;
+  }
+  .op-layout {
+    box-sizing: border-box;
+  }
+  .op-layout-fit {
+    display: flex;
+    flex-direction: column;
+  }
+  .op-layout-fit > * {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+  }
+  .op-layout-hbox,
+  .op-layout-vbox {
+    display: flex;
+    gap: var(--op-layout-gap, var(--op-space-2));
+    align-items: var(--op-layout-align, stretch);
+    justify-content: var(--op-layout-justify, flex-start);
+    flex-wrap: var(--op-layout-wrap, nowrap);
+  }
+  .op-layout-hbox {
+    flex-direction: row;
+  }
+  .op-layout-vbox {
+    flex-direction: column;
+  }
+  .op-layout-hbox > *,
+  .op-layout-vbox > * {
+    min-width: 0;
+    min-height: 0;
+  }
+  /* a column keeps its children at their natural height (the container scrolls or clips instead of squashing them);
+     a child that sets `flex` (e.g. a grid with flex: 1) still grows and shrinks as asked */
+  .op-layout-vbox > * {
+    flex-shrink: 0;
+  }
+  /* content that is taller than its column scrolls inside it; it never spills over what comes next */
+  .op-layout-vbox {
+    overflow: auto;
+  }
+  .op-layout-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--op-layout-columns, 1), minmax(0, 1fr));
+    gap: var(--op-layout-gap, var(--op-space-2));
+  }
+  .op-layout-border {
+    display: grid;
+    grid-template-areas: 'north north north' 'west center east' 'south south south';
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    gap: var(--op-layout-gap, 0);
+  }
+  .op-layout-border > * {
+    min-width: 0;
+    min-height: 0;
+  }
+  .op-layout-hbox.op-layout-stack.is-narrow {
+    flex-direction: column;
+  }
+  /* stacked children take their natural height (a `flex: 1` meant for the row would squash them in a column) */
+  .op-layout-hbox.op-layout-stack.is-narrow > * {
+    flex: 0 0 auto !important;
+  }
+  .op-layout-grid.is-narrow {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .op-layout-grid.is-narrow > * {
+    grid-column: auto !important;
+  }
+
+  /* narrow border layout: one column; west/east become drawers sliding over the center */
+  :root {
+    --op-region-drawer-width: 20rem;
+    --op-region-drawer-z: 3;
+  }
+  .op-layout-border {
+    position: relative;
+  }
+  .op-layout-border.is-narrow {
+    grid-template-areas: 'north' 'center' 'south';
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .op-layout-border.is-narrow > [data-region='west'],
+  .op-layout-border.is-narrow > [data-region='east'] {
+    position: absolute;
+    inset-block: 0;
+    z-index: var(--op-region-drawer-z);
+    inline-size: min(var(--op-region-drawer-width), 100%) !important;
+    visibility: hidden;
+    transition: transform var(--op-duration) var(--op-easing), visibility var(--op-duration);
+    box-shadow: var(--op-shadow-lg);
+  }
+  .op-layout-border.is-narrow > [data-region='west'] {
+    inset-inline-start: 0;
+    transform: translateX(-100%);
+  }
+  .op-layout-border.is-narrow > [data-region='east'] {
+    inset-inline-end: 0;
+    transform: translateX(100%);
+  }
+  .op-layout-border.is-narrow > [data-region].is-open {
+    visibility: visible;
+    transform: none;
+  }
+  .op-layout-border.is-narrow.has-open-region::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: calc(var(--op-region-drawer-z) - 1);
+    background: var(--op-color-overlay);
+  }
+}

package/dist/css/listbox.css

@@ -0,0 +1,50 @@
+@layer optikos {
+  :root {
+    --op-listbox-max-height: 15rem;
+  }
+  .op-listbox {
+    position: relative;
+    box-sizing: border-box;
+    max-block-size: var(--op-listbox-max-height);
+    overflow: auto;
+    background: var(--op-listbox-bg, var(--op-color-surface));
+    color: var(--op-color-fg);
+  }
+  .op-listbox__item {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: var(--op-listbox-item-padding-y, 0) var(--op-listbox-item-padding-x, var(--op-control-padding-x));
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .op-listbox__item.is-active {
+    background: var(--op-listbox-item-active-bg, var(--op-color-hover));
+  }
+  .op-listbox__item.is-selected {
+    color: var(--op-listbox-item-selected-fg, var(--op-color-primary));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-listbox__item.is-disabled {
+    color: var(--op-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  .op-listbox__mark {
+    color: inherit;
+    background: var(--op-color-primary-soft);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-listbox__hint {
+    margin-inline-start: auto;
+    padding-inline-start: var(--op-space-3);
+    color: var(--op-listbox-hint-fg, var(--op-color-fg-muted));
+    font-size: var(--op-font-size-sm);
+    font-weight: normal;
+  }
+  .op-listbox__empty {
+    padding: var(--op-space-3);
+    color: var(--op-listbox-empty-fg, var(--op-color-fg-muted));
+  }
+}

package/dist/css/menu.css

@@ -0,0 +1,92 @@
+@layer optikos {
+  :root {
+    --op-menu-min-width: 10rem;
+    --op-menu-max-height: 22rem;
+    --op-menu-group-tracking: 0.04em;
+  }
+  .op-menu {
+    box-sizing: border-box;
+    min-inline-size: var(--op-menu-min-width);
+    padding: var(--op-menu-padding, var(--op-space-1));
+    color: var(--op-color-fg);
+    background: var(--op-menu-bg, var(--op-color-surface));
+  }
+  .op-menu__item {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    min-block-size: var(--op-menu-item-height, var(--op-control-height));
+    padding: 0 var(--op-menu-item-padding-x, var(--op-space-3)) 0 var(--op-space-2);
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+    outline: none;
+  }
+  .op-menu__item:hover,
+  .op-menu__item:focus {
+    background: var(--op-menu-item-hover-bg, var(--op-color-hover));
+  }
+  .op-menu__item[aria-disabled='true'] {
+    color: var(--op-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  .op-menu__icon {
+    display: inline-flex;
+    inline-size: var(--op-icon-size);
+  }
+  .op-menu__text {
+    flex: 1;
+    white-space: nowrap;
+  }
+  .op-menu__arrow {
+    display: inline-flex;
+    color: var(--op-color-fg-muted);
+  }
+  .op-menu__sep {
+    margin-block: var(--op-space-1);
+    block-size: var(--op-border-width);
+    background: var(--op-menu-sep, var(--op-color-border));
+  }
+  /* with search: the field on top, the items scroll under it */
+  .op-menu__search {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--op-control-height);
+    margin-block-end: var(--op-space-1);
+    padding: 0 var(--op-space-2);
+    color: var(--op-color-fg);
+    background: var(--op-color-surface);
+    border: var(--op-border-width) solid var(--op-color-border-strong);
+    border-radius: var(--op-radius-sm);
+    font: inherit;
+  }
+  .op-menu__search:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-menu__list {
+    max-block-size: var(--op-menu-max-height);
+    overflow: auto;
+  }
+  .op-menu__empty {
+    padding: var(--op-space-2) var(--op-space-3);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-menu.is-searching .op-menu__sep,
+  .op-menu__group:not(:has(.op-menu__item:not([hidden]))) {
+    display: none;
+  }
+  /* groups: a quiet header over the items that share it */
+  .op-menu__group + .op-menu__group,
+  .op-menu__item + .op-menu__group {
+    margin-block-start: var(--op-space-1);
+  }
+  .op-menu__group-label {
+    padding: var(--op-space-2) var(--op-space-3) var(--op-space-1) var(--op-space-2);
+    color: var(--op-menu-group-fg, var(--op-color-fg-muted));
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+    letter-spacing: var(--op-menu-group-tracking);
+    text-transform: uppercase;
+  }
+}

package/dist/css/messagebox.css

@@ -0,0 +1,6 @@
+@layer optikos {
+  .op-messagebox__icon {
+    font-size: var(--op-font-size-xl);
+    color: var(--op-color-primary);
+  }
+}

package/dist/css/motion.css

@@ -0,0 +1,29 @@
+@layer optikos {
+  :root {
+    --op-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --op-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --op-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --op-motion-press-scale: 0.97;
+    --op-motion-press-duration: 100ms;
+    --op-motion-popover-scale: 0.95;
+    --op-motion-dropdown-duration: 200ms;
+    --op-motion-exit-ratio: 0.8;
+    --op-motion-stagger-step: 30ms;
+    --op-motion-blur: 4px;
+  }
+  /* Rule 4: interactive things shrink a little under the finger. Rule 14: while held, only transform may animate. */
+  .op-button:active:not(:disabled),
+  .op-dataview__item:active,
+  [data-op-press]:active {
+    transform: scale(var(--op-motion-press-scale));
+    transition-property: transform;
+    transition-duration: var(--op-motion-press-duration);
+    transition-timing-function: var(--op-motion-ease-out);
+  }
+  [data-op-press] {
+    transition: transform var(--op-motion-press-duration) var(--op-motion-ease-out);
+  }
+  .op-dataview__item {
+    transition: transform var(--op-motion-press-duration) var(--op-motion-ease-out), box-shadow var(--op-duration) var(--op-easing);
+  }
+}

package/dist/css/navmenu.css

@@ -0,0 +1,115 @@
+@layer optikos {
+  :root {
+    --op-navmenu-rail-width: 3.5rem;
+    --op-navmenu-indent: 1rem;
+    --op-navmenu-group-tracking: 0.04em;
+    --op-navmenu-badge-min-width: 1.25rem;
+  }
+  .op-navmenu {
+    display: block;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    color: var(--op-navmenu-fg, var(--op-color-fg));
+    background: var(--op-navmenu-bg, var(--op-color-surface));
+    overflow: auto;
+  }
+  .op-navmenu__tree,
+  .op-navmenu__group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .op-navmenu__tree {
+    padding: var(--op-space-2);
+  }
+  .op-navmenu__item {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-3);
+    box-sizing: border-box;
+    min-block-size: var(--op-navmenu-item-height, var(--op-control-height));
+    padding: 0 var(--op-space-3);
+    padding-inline-start: calc(var(--op-space-3) + var(--_level, 0) * var(--op-navmenu-indent));
+    border-radius: var(--op-radius);
+    border-inline-start: var(--op-space-1) solid transparent;
+    cursor: pointer;
+    user-select: none;
+  }
+  .op-navmenu__item:hover:not(.is-disabled) {
+    background: var(--op-navmenu-item-hover-bg, var(--op-color-hover));
+  }
+  .op-navmenu__item:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-navmenu__item.is-active {
+    color: var(--op-navmenu-active-fg, var(--op-color-primary));
+    background: var(--op-navmenu-active-bg, var(--op-color-primary-soft));
+    border-inline-start-color: var(--op-navmenu-active-bar, var(--op-color-primary));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-navmenu__item.is-disabled {
+    color: var(--op-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  .op-navmenu__item.is-group {
+    color: var(--op-navmenu-group-fg, var(--op-color-fg-muted));
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+    letter-spacing: var(--op-navmenu-group-tracking);
+    text-transform: uppercase;
+  }
+  .op-navmenu__icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--op-icon-size);
+  }
+  .op-navmenu__text {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-navmenu__badge {
+    flex: none;
+    min-inline-size: var(--op-navmenu-badge-min-width);
+    padding: 0 var(--op-space-2);
+    color: var(--op-navmenu-badge-fg, var(--op-color-primary-fg));
+    background: var(--op-navmenu-badge-bg, var(--op-color-primary));
+    border-radius: var(--op-radius-pill);
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+    text-align: center;
+  }
+  .op-navmenu__chevron {
+    display: inline-flex;
+    flex: none;
+    transition: transform var(--op-duration) var(--op-easing);
+  }
+  .op-navmenu__item.is-group:not(.is-expanded) .op-navmenu__chevron {
+    transform: rotate(-90deg);
+  }
+  /* rail: icons only; a group is just a thin rule between its neighbours */
+  .op-navmenu.is-rail {
+    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 {
+    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;
+  }
+  .op-navmenu.is-rail .op-navmenu__badge {
+    display: none;
+  }
+}

package/dist/css/pagination.css

@@ -0,0 +1,23 @@
+@layer optikos {
+  .op-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-pagination-gap, var(--op-space-1));
+    color: var(--op-color-fg);
+  }
+  .op-pagination__btn.is-current {
+    color: var(--op-color-primary-fg);
+    background: var(--op-color-primary);
+  }
+  .op-pagination__gap {
+    padding-inline: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+  }
+  .op-pagination__info {
+    margin-inline-start: auto;
+    padding-inline-start: var(--op-space-3);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+}

package/dist/css/panel.css

@@ -0,0 +1,84 @@
+@layer optikos {
+  .op-panel {
+    --_bg: var(--op-panel-bg, var(--op-color-surface));
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    color: var(--op-panel-fg, var(--op-color-fg));
+    background: var(--_bg);
+    border: var(--op-border-width) solid var(--op-panel-border, var(--op-color-border));
+    border-radius: var(--op-panel-radius, var(--op-radius));
+    box-shadow: var(--op-panel-shadow, none);
+    overflow: hidden;
+  }
+  .op-panel__header {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    padding: var(--op-panel-header-padding, var(--op-space-2) var(--op-space-3));
+    background: var(--op-panel-header-bg, var(--op-color-surface-2));
+    color: var(--op-panel-header-fg, var(--op-color-fg));
+    border-block-end: var(--op-border-width) solid var(--op-panel-header-border, var(--op-panel-border, var(--op-color-border-strong)));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-panel__title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-panel--collapsible .op-panel__title {
+    cursor: pointer;
+  }
+  .op-panel__tools {
+    display: flex;
+    gap: var(--op-space-1);
+  }
+  .op-panel__tool {
+    display: inline-flex;
+    padding: var(--op-space-1);
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+  }
+  .op-panel__tool:hover {
+    background: var(--op-color-hover);
+  }
+  .op-panel__tool:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: 0;
+  }
+  .op-panel.is-collapsed .op-panel__header {
+    border-block-end: 0;
+  }
+  .op-panel.is-collapsed .op-panel__tool:first-child .op-icon {
+    transform: rotate(180deg);
+  }
+  .op-panel__body {
+    flex: 1;
+    min-height: 0;
+    padding: var(--op-panel-body-padding, var(--op-space-3));
+    overflow: auto;
+  }
+  .op-panel__tbar,
+  .op-panel__bbar,
+  .op-panel__footer {
+    border-block-end: var(--op-border-width) solid var(--op-color-border);
+  }
+  .op-panel__bbar,
+  .op-panel__footer {
+    border-block-end: 0;
+    border-block-start: var(--op-border-width) solid var(--op-color-border);
+  }
+  /* the ↻ tool turns while the panel reloads */
+  .op-panel.is-reloading > .op-panel__header .op-panel__tool svg {
+    animation: op-spin 700ms linear infinite;
+  }
+  .op-motion-off .op-panel.is-reloading > .op-panel__header .op-panel__tool svg {
+    animation: none;
+  }
+}

package/dist/css/pickerfield.css

@@ -0,0 +1,85 @@
+@layer optikos {
+  .op-picker__trigger {
+    position: absolute;
+    inset-inline-end: var(--op-space-1);
+    display: inline-flex;
+    padding: var(--op-space-1);
+    color: var(--op-picker-arrow-fg, var(--op-color-fg-muted));
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+    transition: transform var(--op-duration) var(--op-easing);
+  }
+  .op-picker.is-open .op-picker__trigger {
+    transform: rotate(180deg);
+  }
+  .op-picker:has(.op-picker__trigger) .op-textfield__input {
+    padding-inline-end: calc(var(--op-icon-size) + var(--op-space-3));
+  }
+  .op-picker.is-readonly .op-textfield__input,
+  .op-select .op-textfield__input {
+    cursor: pointer;
+    text-overflow: ellipsis;
+  }
+  /* stableSize: room for the spinner is always there, so the text does not shift when a search starts */
+  .op-suggest.op-stable .op-textfield__input {
+    padding-inline-end: calc(var(--op-icon-size) + var(--op-space-3));
+  }
+  .op-picker.is-searching .op-picker__spinner {
+    display: inline-block;
+  }
+  .op-picker__spinner {
+    --op-spinner-size: var(--op-icon-size);
+    position: absolute;
+    inset-inline-end: var(--op-space-2);
+    display: none;
+  }
+  .op-picker__trigger:disabled {
+    cursor: not-allowed;
+  }
+  .op-suggest__icon {
+    position: absolute;
+    inset-inline-start: var(--op-space-2);
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    color: var(--op-picker-arrow-fg, var(--op-color-fg-muted));
+    pointer-events: none;
+  }
+  .op-textfield__wrap.has-icon .op-textfield__input {
+    padding-inline-start: calc(var(--op-icon-size) + var(--op-space-3));
+  }
+  /* the lookup's magnifier button sits where the arrow would; the spinner moves left of it */
+  .op-lookup .op-picker__spinner {
+    inset-inline-end: calc(var(--op-icon-size) + var(--op-space-4));
+  }
+  .op-lookup.op-stable .op-textfield__input {
+    padding-inline-end: calc(var(--op-icon-size) * 2 + var(--op-space-5));
+  }
+  /* showValue: the record's id as a badge at the start of the field */
+  .op-picker__id {
+    position: absolute;
+    inset-inline-start: var(--op-space-2);
+    inset-block: 50% auto;
+    transform: translateY(-50%);
+    padding: 0 var(--op-space-2);
+    color: var(--op-picker-id-fg, var(--op-color-fg-muted));
+    background: var(--op-picker-id-bg, var(--op-color-surface-2));
+    border-radius: var(--op-radius-pill);
+    font-size: var(--op-font-size-sm);
+    pointer-events: none;
+  }
+  .op-picker__id[hidden] {
+    display: none;
+  }
+  .op-textfield__wrap.has-id .op-textfield__input {
+    padding-inline-start: calc(var(--op-picker-id-width) + var(--op-space-4));
+  }
+  .op-textfield__wrap.has-id.has-icon .op-picker__id {
+    inset-inline-start: calc(var(--op-icon-size) + var(--op-space-3));
+  }
+  .op-textfield__wrap.has-id.has-icon .op-textfield__input {
+    padding-inline-start: calc(var(--op-icon-size) + var(--op-picker-id-width) + var(--op-space-5));
+  }
+}