@birdycom/omniaui 0.11.0 → 0.11.1

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

@@ -1,91 +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; }
+/* 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

@@ -1,89 +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;
-}
-
-.oc-color-select-option:has(input:disabled) {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* 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; }
+/* 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

@@ -1,51 +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; }
+/* 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

@@ -1,94 +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; }
+/* 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; }