@birdycom/omniaui 0.0.0-stage → 0.11.1

package/dist/parts/forms-affix-input.css

@@ -0,0 +1,75 @@
+/* File: packages/ui/src/parts/forms-affix-input.css
+   Map: --affix group (frame on the wrapper) -> inner input -> inline affix (€, %, @) -> states -> --end alignment
+   Affix input: extends .oc-input-group with the modifier .oc-input-group--affix.
+   The symbol sits INSIDE the field (no grey addon box). Same markup as input-group, one extra class. */
+
+/* The wrapper owns the border; children lose theirs. */
+.oc-input-group--affix {
+  align-items: center;
+  border: 1px solid var(--oc-input);
+  border-radius: var(--oc-radius);
+  transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
+}
+
+.oc-input-group--affix:focus-within {
+  border-color: var(--oc-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
+}
+
+/* Input: borderless and without its own focus ring (the frame shows focus).
+   Selectors repeat .oc-input-group to beat the base :first-child / :last-child radius rules. */
+.oc-input-group.oc-input-group--affix .oc-input {
+  border: 0;
+  border-radius: var(--oc-radius);
+  box-shadow: none;
+  min-inline-size: 0;
+}
+
+/* Symbol column: same chrome as the Korrekt / OmniaDesk fields (€, %, @, barcode icon).
+   A divider separates the symbol from the value. */
+.oc-input-group.oc-input-group--affix .oc-input-addon {
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 2.25rem;
+  padding-inline: 0.5rem;
+  border: 0;
+  border-inline-end: 1px solid var(--oc-input);
+  border-radius: 0;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  pointer-events: none;
+  user-select: none;
+}
+
+/* A symbol after the value (rare) gets the divider on its left. */
+.oc-input-group.oc-input-group--affix .oc-input-addon:last-child:not(:first-child) {
+  border-inline-end: 0;
+  border-inline-start: 1px solid var(--oc-input);
+}
+
+.oc-input-group.oc-input-group--affix .oc-input-addon svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+/* Numbers (currency, percent) read better right-aligned. */
+.oc-input-group--end .oc-input {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Invalid: modifier, aria-invalid or the browser's own check (type="email", pattern...) after input. */
+.oc-input-group--affix.oc-input-group--error,
+.oc-input-group--affix:has([aria-invalid="true"]),
+.oc-input-group--affix:has(.oc-input:user-invalid) {
+  border-color: var(--oc-destructive);
+}
+
+/* Disabled: dim the whole frame. */
+.oc-input-group--affix:has(.oc-input:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.oc-input-group--affix:has(.oc-input:disabled) .oc-input { opacity: 1; }

package/dist/parts/forms-barcode-input.css

@@ -0,0 +1,75 @@
+/* File: packages/ui/src/parts/forms-barcode-input.css
+   Map: wrapper (field + preview stacked) -> monospace field -> preview area -> placeholder bars -> code caption -> empty / invalid states
+   Barcode input: a field for an EAN/article code and a preview area below it.
+   The preview slot shows CSS placeholder bars; put a real <svg>/<canvas> barcode in it if you render one. */
+
+/* Wrapper: field on top, preview below. */
+.oc-barcode-input {
+  display: grid;
+  gap: 0.5rem;
+  max-inline-size: 22rem;
+}
+
+/* Field: add next to .oc-input, inside the affix group (icon column + value). */
+.oc-barcode-input-field {
+  min-inline-size: 0;
+}
+
+.oc-barcode-input-field:user-invalid { border-color: var(--oc-destructive); }
+
+/* Preview area: light card with the bars and the code text. */
+.oc-barcode-preview {
+  display: grid;
+  justify-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0.75rem 1rem;
+  border: 1px dashed var(--oc-border-strong);
+  border-radius: var(--oc-radius);
+  background: var(--oc-surface);
+}
+
+/* Real barcode graphics placed in the slot scale to the preview width. */
+.oc-barcode-preview > svg,
+.oc-barcode-preview > canvas,
+.oc-barcode-preview > img {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+/* Placeholder bars: a decorative stripe pattern (not a scannable code). */
+.oc-barcode-preview-bars {
+  inline-size: 100%;
+  block-size: 3.5rem;
+  background: repeating-linear-gradient(
+    90deg,
+    var(--oc-foreground) 0 2px,
+    transparent 2px 4px,
+    var(--oc-foreground) 4px 5px,
+    transparent 5px 8px,
+    var(--oc-foreground) 8px 11px,
+    transparent 11px 12px
+  );
+}
+
+/* Code text under the bars. */
+.oc-barcode-preview-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.8rem;
+  letter-spacing: 0.2em;
+  color: var(--oc-foreground);
+}
+
+/* Empty state: faded bars and a hint instead of the code. */
+.oc-barcode-preview--empty .oc-barcode-preview-bars { opacity: 0.15; }
+.oc-barcode-preview--empty .oc-barcode-preview-code {
+  font-family: inherit;
+  letter-spacing: 0;
+  color: var(--oc-muted-foreground);
+}
+
+/* Field invalid: the preview border turns red as well. */
+.oc-barcode-input:has(.oc-barcode-input-field:user-invalid) .oc-barcode-preview,
+.oc-barcode-input:has([aria-invalid="true"]) .oc-barcode-preview {
+  border-color: var(--oc-destructive);
+}

package/dist/parts/forms-chip-filter.css

@@ -0,0 +1,91 @@
+/* File: packages/ui/src/parts/forms-chip-filter.css
+   Map: group -> chip (label + hidden checkbox/radio) -> count bubble -> states -> --scroll / --sm
+   Chip filter: rounded filter chips. Checkboxes = pick several, radios = pick one.
+   :has(input:checked) highlights the chip; no JavaScript. */
+
+/* Group: wrapping row of chips. */
+.oc-chip-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+/* Chip: pill-shaped label around one input. */
+.oc-chip-filter-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.3rem 0.85rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  font-size: 0.8rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--oc-transition-fast), color var(--oc-transition-fast), border-color var(--oc-transition-fast);
+}
+
+/* Invisible but focusable input. */
+.oc-chip-filter-item input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.oc-chip-filter-item:hover {
+  border-color: var(--oc-border-strong);
+  color: var(--oc-foreground);
+}
+
+/* Selected: tinted primary background and border. */
+.oc-chip-filter-item:has(input:checked) {
+  border-color: var(--oc-primary);
+  background: color-mix(in srgb, var(--oc-primary) 14%, transparent);
+  color: var(--oc-foreground);
+}
+
+.oc-chip-filter-item:has(input:focus-visible) {
+  outline: 2px solid var(--oc-ring);
+  outline-offset: 2px;
+}
+
+.oc-chip-filter-item:has(input:disabled) {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Optional count bubble inside a chip. */
+.oc-chip-filter-count {
+  min-inline-size: 1.25rem;
+  padding: 0 0.35rem;
+  border-radius: 999px;
+  background: var(--oc-surface-strong);
+  font-size: 0.7rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+.oc-chip-filter-item:has(input:checked) .oc-chip-filter-count {
+  background: var(--oc-primary);
+  color: var(--oc-primary-foreground);
+}
+
+/* Scroll: one line that scrolls sideways (mobile toolbars). */
+.oc-chip-filter--scroll {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  padding-block: 0.25rem;
+  scrollbar-width: thin;
+}
+
+/* Small chips. */
+.oc-chip-filter--sm .oc-chip-filter-item { padding: 0.15rem 0.6rem; font-size: 0.72rem; }

package/dist/parts/forms-color-select.css

@@ -0,0 +1,97 @@
+/* File: packages/ui/src/parts/forms-color-select.css
+   Map: group (swatch grid) -> option (label + hidden radio) -> swatch -> states -> --list variant (swatch + name) -> --sm
+   Color select: pick one color from a set of swatches. Radio inputs inside labels, so keyboard,
+   forms and "name" grouping work natively. Each option sets its color with --oc-swatch (an Omnia token). */
+
+/* Group: wrapping row of swatches (role="radiogroup"). */
+.oc-color-select {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+/* Option: the label around one radio. --oc-swatch is set inline, e.g. style="--oc-swatch: var(--color-red-70)". */
+.oc-color-select-option {
+  --oc-swatch: var(--oc-muted);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 999px;
+  color: var(--oc-foreground);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+/* The radio is invisible but stays focusable. */
+.oc-color-select-option input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+/* Swatch: round color dot with a thin inner border so light colors stay visible. */
+.oc-color-select-swatch {
+  flex: none;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  border-radius: 999px;
+  background: var(--oc-swatch);
+  box-shadow: inset 0 0 0 1px oklch(from var(--oc-foreground) l c h / 0.15);
+  transition: box-shadow var(--oc-transition-fast), transform var(--oc-transition-fast);
+}
+
+.oc-color-select-option:hover .oc-color-select-swatch { transform: scale(1.08); }
+
+/* Selected: a ring in the background color, then a ring in the swatch color. */
+.oc-color-select-option:has(input:checked) .oc-color-select-swatch {
+  box-shadow: 0 0 0 2px var(--oc-background), 0 0 0 4px var(--oc-swatch);
+}
+
+.oc-color-select-option:has(input:focus-visible) .oc-color-select-swatch {
+  outline: 2px solid var(--oc-ring);
+  outline-offset: 4px;
+}
+
+/* Disabled (e.g. a color already in use): faded, a diagonal line through the swatch, no hover zoom.
+   Give the label a title ("Purple, in use") so the reason shows on hover. */
+.oc-color-select-option:has(input:disabled) {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.oc-color-select-option:has(input:disabled) .oc-color-select-swatch {
+  background:
+    linear-gradient(135deg, transparent calc(50% - 1.5px), var(--oc-background) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
+    var(--oc-swatch);
+  transform: none;
+}
+
+/* Name next to the swatch (visible in --list; screen-reader text in the grid). */
+.oc-color-select-name { line-height: 1.2; }
+.oc-color-select:not(.oc-color-select--list) .oc-color-select-name {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* List variant: one row per color with its name, e.g. inside a popover. */
+.oc-color-select--list { flex-direction: column; gap: 0.125rem; }
+.oc-color-select--list .oc-color-select-option {
+  padding: 0.375rem 0.5rem;
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+.oc-color-select--list .oc-color-select-option:hover { background: var(--oc-surface); }
+.oc-color-select--list .oc-color-select-option:has(input:checked) { background: var(--oc-surface-strong); font-weight: 500; }
+.oc-color-select--list .oc-color-select-swatch { inline-size: 1rem; block-size: 1rem; }
+.oc-color-select--list .oc-color-select-option:hover .oc-color-select-swatch { transform: none; }
+
+/* Small swatches. */
+.oc-color-select--sm .oc-color-select-swatch { inline-size: 1.25rem; block-size: 1.25rem; }

package/dist/parts/forms-decimal-input.css

@@ -0,0 +1,51 @@
+/* File: packages/ui/src/parts/forms-decimal-input.css
+   Map: field (right-aligned tabular digits) -> unit suffix wrapper -> states -> --start alignment
+   Decimal input: a text field for locale numbers like 1.234,56 (inputmode="decimal").
+   Plain HTML validates with pattern + :user-invalid; the React/Vue wrappers format the value on blur. */
+
+/* Field: add next to .oc-input. Digits line up in columns (tabular figures). */
+.oc-decimal-input {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Left-aligned variant, e.g. inside a sentence or a narrow table cell. */
+.oc-decimal-input--start { text-align: start; }
+
+/* Wrapper with a unit after the value (m², kg, h). The unit sits inside the frame. */
+.oc-decimal-field {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--oc-input);
+  border-radius: var(--oc-radius);
+  transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
+}
+
+.oc-decimal-field:focus-within {
+  border-color: var(--oc-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
+}
+
+/* Inside the wrapper the input has no frame of its own. */
+.oc-decimal-field > .oc-decimal-input {
+  flex: 1;
+  min-inline-size: 0;
+  border: 0;
+  box-shadow: none;
+}
+
+.oc-decimal-field-unit {
+  padding-inline: 0 0.75rem;
+  color: var(--oc-muted-foreground);
+  font-size: 0.875rem;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/* Invalid after user input (pattern mismatch), or via aria-invalid. */
+.oc-decimal-input:user-invalid { border-color: var(--oc-destructive); }
+.oc-decimal-field:has(.oc-decimal-input:user-invalid),
+.oc-decimal-field:has([aria-invalid="true"]) { border-color: var(--oc-destructive); }
+
+/* Disabled wrapper. */
+.oc-decimal-field:has(.oc-decimal-input:disabled) { opacity: 0.5; cursor: not-allowed; }

package/dist/parts/forms-filter-counts.css

@@ -0,0 +1,94 @@
+/* File: packages/ui/src/parts/forms-filter-counts.css
+   Map: group (grid of tiles) -> tile (label + hidden radio) -> value / label / hint -> tones -> states -> --compact
+   Filter counts: pick a view (e.g. Active / Deleted / All) from tiles that show how many items each has.
+   Radio inputs inside labels; the checked tile gets the accent color. No JavaScript. */
+
+/* Group: responsive grid of equal tiles (role="radiogroup"). */
+.oc-filter-counts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: 0.75rem;
+  /* A <fieldset> shrinks to its content by default; fill the row so auto-fit can make columns. */
+  inline-size: 100%;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+/* Tile: --oc-filter-accent drives the tone (primary by default). */
+.oc-filter-counts-item {
+  --oc-filter-accent: var(--oc-primary);
+  position: relative;
+  display: grid;
+  gap: 0.125rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  cursor: pointer;
+  transition: border-color var(--oc-transition-fast), background var(--oc-transition-fast);
+}
+
+/* Invisible but focusable radio. */
+.oc-filter-counts-item input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.oc-filter-counts-item:hover { background: var(--oc-surface); }
+
+/* Big number. */
+.oc-filter-counts-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+  color: var(--oc-filter-accent);
+}
+
+.oc-filter-counts-label { font-size: 0.875rem; font-weight: 600; }
+.oc-filter-counts-hint { font-size: 0.75rem; color: var(--oc-muted-foreground); }
+
+/* Tones per tile. */
+.oc-filter-counts-item--success { --oc-filter-accent: var(--oc-success); }
+.oc-filter-counts-item--destructive { --oc-filter-accent: var(--oc-destructive); }
+.oc-filter-counts-item--muted { --oc-filter-accent: var(--oc-muted-foreground); }
+
+/* Selected: accent border + soft accent background. */
+.oc-filter-counts-item:has(input:checked) {
+  border-color: var(--oc-filter-accent);
+  background: color-mix(in srgb, var(--oc-filter-accent) 10%, var(--oc-card));
+}
+
+.oc-filter-counts-item:has(input:focus-visible) {
+  outline: 2px solid var(--oc-ring);
+  outline-offset: 2px;
+}
+
+.oc-filter-counts-item:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
+
+/* Compact: inline pills "Active 12", for toolbars above a table. */
+.oc-filter-counts--compact {
+  display: inline-flex;
+  inline-size: auto;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.oc-filter-counts--compact .oc-filter-counts-item {
+  display: inline-flex;
+  flex-direction: row-reverse;
+  align-items: baseline;
+  gap: 0.375rem;
+  padding: 0.3rem 0.75rem;
+  border-radius: 999px;
+}
+
+.oc-filter-counts--compact .oc-filter-counts-value { font-size: 0.8rem; }
+.oc-filter-counts--compact .oc-filter-counts-label { font-size: 0.8rem; font-weight: 500; }
+.oc-filter-counts--compact .oc-filter-counts-hint { display: none; }

package/dist/parts/forms-language-select.css

@@ -0,0 +1,89 @@
+/* File: packages/ui/src/parts/forms-language-select.css
+   Map: wrapper (icon + native select) -> icon -> select control -> chevron -> states -> --ghost / --currency
+   Language select: compact locale (or currency) switcher for a site header.
+   A native <select> inside a small frame with a leading icon or symbol. The app reacts to "change". */
+
+/* Wrapper: inline frame; the select is stretched over it so the whole pill is clickable. */
+.oc-language-select {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-inline: 0.625rem 0.5rem;
+  border: 1px solid var(--oc-input);
+  border-radius: 999px;
+  color: var(--oc-foreground);
+  font-size: 0.8rem;
+  transition: border-color var(--oc-transition-fast), background var(--oc-transition-fast);
+}
+
+.oc-language-select:hover { background: var(--oc-surface); }
+
+.oc-language-select:focus-within {
+  border-color: var(--oc-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
+}
+
+/* Leading icon (inline SVG globe) or symbol (€, $). Decorative: aria-hidden="true". */
+.oc-language-select-icon {
+  display: inline-flex;
+  flex: none;
+  inline-size: 1rem;
+  justify-content: center;
+  color: var(--oc-muted-foreground);
+  font-weight: 600;
+}
+
+.oc-language-select-icon svg { inline-size: 1rem; block-size: 1rem; }
+
+/* Native select without its own frame; room on the right for the chevron. */
+.oc-language-select-control {
+  appearance: none;
+  padding: 0.375rem 1.25rem 0.375rem 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+.oc-language-select-control option {
+  background: var(--oc-background);
+  color: var(--oc-foreground);
+}
+
+/* Chevron drawn with two borders (no image, follows currentColor). */
+.oc-language-select::after {
+  content: "";
+  position: absolute;
+  inset-inline-end: 0.7rem;
+  inset-block-start: 50%;
+  inline-size: 0.35rem;
+  block-size: 0.35rem;
+  border-inline-end: 1.5px solid var(--oc-muted-foreground);
+  border-block-end: 1.5px solid var(--oc-muted-foreground);
+  transform: translateY(-70%) rotate(45deg);
+  pointer-events: none;
+}
+
+.oc-language-select:has(.oc-language-select-control:disabled) { opacity: 0.5; cursor: not-allowed; }
+
+/* Ghost: no frame, for dense headers and footers. */
+.oc-language-select--ghost { border-color: transparent; }
+
+/* Currency: the symbol in the icon slot gets the primary color. */
+.oc-language-select--currency .oc-language-select-icon { color: var(--oc-primary); }
+
+/* Menu: the same pill as a <button> that opens an OmniaUI dropdown (popovertarget + .oc-dropdown-menu),
+   for a list of links per language. Room on the right for the chevron. */
+button.oc-language-select {
+  padding-block: 0.375rem;
+  padding-inline-end: 1.6rem;
+  background: transparent;
+  font: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+  outline: none;
+}
+button.oc-language-select:hover { background: var(--oc-surface); }

package/dist/parts/forms-number-input.css

@@ -0,0 +1,98 @@
+/* File: packages/ui/src/parts/forms-number-input.css
+   Map: wrapper -> step buttons (- / +) -> number field (native spinners hidden) -> states -> sizes / block
+   Number input: input type="number" between a minus and a plus button.
+   The field works on its own (arrow keys, min/max/step); the buttons call stepDown()/stepUp() (tiny script or wrapper). */
+
+/* Wrapper: one frame around the buttons and the field. */
+.oc-number-input {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid var(--oc-input);
+  border-radius: var(--oc-radius);
+  overflow: hidden;
+  transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
+}
+
+.oc-number-input:focus-within {
+  border-color: var(--oc-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
+}
+
+/* Step buttons: square, muted, with a divider towards the field. */
+.oc-number-input-step {
+  flex: none;
+  inline-size: 2.25rem;
+  padding: 0;
+  border: 0;
+  background: var(--oc-surface);
+  color: var(--oc-muted-foreground);
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--oc-transition-fast), color var(--oc-transition-fast);
+}
+
+.oc-number-input-step:first-child { border-inline-end: 1px solid var(--oc-input); }
+.oc-number-input-step:last-child { border-inline-start: 1px solid var(--oc-input); }
+
+.oc-number-input-step:hover {
+  background: var(--oc-surface-strong);
+  color: var(--oc-foreground);
+}
+
+.oc-number-input-step:focus-visible {
+  outline: 2px solid var(--oc-ring);
+  outline-offset: -2px;
+}
+
+.oc-number-input-step:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Field: centered digits, no native spinner arrows (the buttons replace them). */
+.oc-number-input-field {
+  inline-size: 4.5rem;
+  min-inline-size: 0;
+  padding: 0.5rem 0.25rem;
+  border: 0;
+  background: transparent;
+  color: var(--oc-foreground);
+  font: inherit;
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  outline: none;
+  appearance: textfield;
+}
+
+.oc-number-input-field::-webkit-inner-spin-button,
+.oc-number-input-field::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+/* Invalid: outside min/max (after user input), aria-invalid or the modifier. */
+.oc-number-input--error,
+.oc-number-input:has([aria-invalid="true"]),
+.oc-number-input:has(.oc-number-input-field:user-invalid) {
+  border-color: var(--oc-destructive);
+}
+
+/* Disabled: dim the whole control. */
+.oc-number-input:has(.oc-number-input-field:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Inside a grid the control keeps its own width (no empty strip next to the +); --block fills the cell. */
+.oc-number-input { justify-self: start; }
+
+/* Full width: the field grows, buttons keep their size. */
+.oc-number-input--block { display: flex; inline-size: 100%; justify-self: stretch; }
+.oc-number-input--block .oc-number-input-field { flex: 1; inline-size: auto; }
+
+/* Small size. */
+.oc-number-input--sm .oc-number-input-step { inline-size: 1.75rem; font-size: 0.875rem; }
+.oc-number-input--sm .oc-number-input-field { padding-block: 0.25rem; font-size: 0.8rem; inline-size: 3.5rem; }