@attrus-ds/core 1.0.20 → 1.2.0

package/dist/css/components/buttons.css

@@ -142,9 +142,11 @@
 .btn-primary:focus-visible { box-shadow: var(--shadow-focus); }
 
 
-/* SECONDARY — soft neutral fill + hairline border */
+/* SECONDARY — hairline border, no resting fill. The fill arrives on hover:
+   a filled secondary at rest competed with the primary for weight, and on a
+   subtle surface it read as a disabled block rather than a button. */
 .btn-secondary {
-  background: var(--color-background-subtle);
+  background: transparent;
   color: var(--color-foreground-default);
   border-color: var(--color-border-default);
 }
@@ -216,7 +218,7 @@
 
 /* DANGER OUTLINE — destructive contextual */
 .btn-danger-outline {
-  background: var(--color-background-surface);
+  background: transparent;
   color: var(--color-danger-500);
   border-color: var(--color-feedback-danger-border);
 }
@@ -400,3 +402,54 @@
 .btn-group .btn-danger[aria-pressed="true"] + .btn-danger,
 .btn-group .btn-inverse[aria-pressed="true"] + .btn-inverse { box-shadow: none; }
 
+
+/* ----------------------------------------------------------------
+   HOVER GLOW — coloured buttons emit light under the pointer
+   ----------------------------------------------------------------
+   Light, not shadow: three centred layers of the fill colour lifted toward
+   white (a tight core, a mid bloom, a wide falloff) plus a 1px top highlight.
+   Flat at rest, it switches on on hover and is the hover feedback; neutral
+   variants have no fill to glow and stay flat.
+
+   The primary glows in the ACCENT, not the brand: navy is near-black and cannot
+   emit light — its halo read as a dark smudge and vanished on inverse.
+
+   Motion: the rest rule carries the LEAVE curve (ease-in, 360ms, so it fades
+   rather than cuts); :hover carries the ENTER curve (ease-out, 280ms, so it
+   swells and settles). Rest declares the same four layers at zero so the
+   browser interpolates layer-by-layer instead of snapping.
+
+   Focus keeps its ring — hover + focus stacks the ring on top of the light.
+   Disabled and grouped segments never glow. Reduced motion drops the
+   transition only (handled by the .btn rule above).
+   ---------------------------------------------------------------- */
+.btn-primary, .btn-danger, .btn-success {
+  box-shadow: inset 0 1px 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
+  transition:
+    background var(--transition-fast), border-color var(--transition-fast),
+    color var(--transition-fast), transform var(--transition-fast),
+    box-shadow 360ms cubic-bezier(.4, 0, 1, 1);
+}
+.btn-primary:hover, .btn-danger:hover, .btn-success:hover {
+  transition:
+    background var(--transition-fast), border-color var(--transition-fast),
+    color var(--transition-fast), transform var(--transition-fast),
+    box-shadow 280ms cubic-bezier(0, 0, .2, 1);
+}
+.btn-primary:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, white 28%, transparent), 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--color-accent-solid) 72%, white) 60%, transparent), 0 0 20px color-mix(in srgb, var(--color-accent-solid) 38%, transparent), 0 0 42px color-mix(in srgb, var(--color-accent-solid) 18%, transparent); }
+.btn-danger:hover  { box-shadow: inset 0 1px 0 color-mix(in srgb, white 28%, transparent), 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--color-danger-500) 72%, white) 60%, transparent), 0 0 20px color-mix(in srgb, var(--color-danger-500) 38%, transparent), 0 0 42px color-mix(in srgb, var(--color-danger-500) 18%, transparent); }
+.btn-success:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, white 28%, transparent), 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--color-success-500) 72%, white) 60%, transparent), 0 0 20px color-mix(in srgb, var(--color-success-500) 38%, transparent), 0 0 42px color-mix(in srgb, var(--color-success-500) 18%, transparent); }
+
+.btn-primary:hover:focus-visible { box-shadow: var(--shadow-focus), inset 0 1px 0 color-mix(in srgb, white 28%, transparent), 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--color-accent-solid) 72%, white) 60%, transparent), 0 0 20px color-mix(in srgb, var(--color-accent-solid) 38%, transparent), 0 0 42px color-mix(in srgb, var(--color-accent-solid) 18%, transparent); }
+.btn-danger:hover:focus-visible  { box-shadow: var(--shadow-focus-danger), inset 0 1px 0 color-mix(in srgb, white 28%, transparent), 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--color-danger-500) 72%, white) 60%, transparent), 0 0 20px color-mix(in srgb, var(--color-danger-500) 38%, transparent), 0 0 42px color-mix(in srgb, var(--color-danger-500) 18%, transparent); }
+.btn-success:hover:focus-visible { box-shadow: var(--shadow-focus-success), inset 0 1px 0 color-mix(in srgb, white 28%, transparent), 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--color-success-500) 72%, white) 60%, transparent), 0 0 20px color-mix(in srgb, var(--color-success-500) 38%, transparent), 0 0 42px color-mix(in srgb, var(--color-success-500) 18%, transparent); }
+
+/* Press: the light dims and settles under the finger */
+.btn-primary:active, .btn-danger:active, .btn-success:active { transition-duration: var(--duration-fast, 120ms); }
+.btn-primary:active { box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), 0 0 4px color-mix(in srgb, var(--color-accent-solid) 35%, transparent), 0 0 10px color-mix(in srgb, var(--color-accent-solid) 18%, transparent), 0 0 0 transparent; }
+.btn-danger:active  { box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), 0 0 4px color-mix(in srgb, var(--color-danger-500) 35%, transparent), 0 0 10px color-mix(in srgb, var(--color-danger-500) 18%, transparent), 0 0 0 transparent; }
+.btn-success:active { box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), 0 0 4px color-mix(in srgb, var(--color-success-500) 35%, transparent), 0 0 10px color-mix(in srgb, var(--color-success-500) 18%, transparent), 0 0 0 transparent; }
+
+.btn-primary[disabled], .btn-danger[disabled], .btn-success[disabled],
+.btn-primary.is-disabled, .btn-danger.is-disabled, .btn-success.is-disabled,
+.btn-group .btn-primary, .btn-group .btn-danger, .btn-group .btn-success { box-shadow: none; }

package/dist/css/components/callout.css

@@ -69,16 +69,22 @@
 .callout-icon {
   flex-shrink: 0;
   align-self: flex-start;
-  /* Optical: pull the 18px glyph onto the cap line of the first row of text
-     (line-height 15.6px), rather than centring it on the whole block. */
-  margin-top: -1px;
   width: 18px;
   height: 18px;
-  flex-shrink: 0;
-  margin-top: 1px;
+  /* Centre the 18px glyph on the FIRST line of text, not on the block. The
+     offset derives from that line's own tokens, so it holds if the type scale
+     changes. (This rule used to declare margin-top twice — -1px, then 1px —
+     and the second won, leaving the icon 2.2px below the line.) */
+  margin-top: calc((var(--fs-sm) * var(--lh-snug) - 18px) / 2);
   color: var(--callout-fg);
   stroke-width: var(--icon-stroke);
 }
+/* Rich callout: the first line is the title, which sits on its own scale */
+.callout:has(.callout-title):not(.callout-sm):not(.callout-bar) > i,
+.callout:has(.callout-title):not(.callout-sm):not(.callout-bar) > svg,
+.callout:has(.callout-title):not(.callout-sm):not(.callout-bar) > .callout-icon {
+  margin-top: calc((var(--fs-md) * var(--lh-tight) - 18px) / 2);
+}
 
 /* content column — wrap title + body + actions for rich callouts */
 .callout-content {
@@ -173,6 +179,17 @@
 }
 .callout-dismiss:hover { background: color-mix(in srgb, var(--callout-tint) 14%, transparent); color: var(--color-foreground-default); }
 .callout-dismiss > i, .callout-dismiss > svg { width: 16px; height: 16px; stroke-width: var(--icon-stroke); }
+/* Centre the 26px dismiss on the first line (body, or title in a rich callout)
+   and hand the overhang back at the bottom, so it neither sits below the text
+   nor stretches a one-line callout. The bar and the small size own their own. */
+.callout:not(.callout-bar):not(.callout-sm) .callout-dismiss {
+  margin-top: calc((var(--fs-sm) * var(--lh-snug) - 26px) / 2);
+  margin-bottom: calc((var(--fs-sm) * var(--lh-snug) - 26px) / 2);
+}
+.callout:has(.callout-title):not(.callout-bar):not(.callout-sm) .callout-dismiss {
+  margin-top: calc((var(--fs-md) * var(--lh-tight) - 26px) / 2);
+  margin-bottom: calc((var(--fs-md) * var(--lh-tight) - 26px) / 2);
+}
 
 /* ---- tonal variants ---- */
 .callout-warn    { --callout-tint: var(--color-warning-500); --callout-fg: var(--color-feedback-warning-foreground); }
@@ -191,6 +208,39 @@
 .callout-sm > i, .callout-sm > svg, .callout-sm .callout-icon { width: 16px; height: 16px; }
 .callout-sm .callout-body { font-size: var(--fs-xs); }
 .callout-sm .callout-title { font-size: var(--fs-sm); }
+/* Optical alignment for the small size. The base offsets were tuned for an 18px
+   glyph on a ~15.6px line; at sm the line is ~14.3px, so they left the icon 2px
+   and the X 4px below the text, and the 26px dismiss stretched a one-line
+   callout. Each is re-centred on the FIRST line (still flex-start, so a wrapping
+   message keeps them on line one, not the block's middle):
+     the small line is 11px × 1.3 = 14.3px (measured — not --lh-normal)
+     icon: (14.3 − 16) / 2         → −0.85px
+     X:    a 20px box, (14.3 − 20)/2 → −2.85px top
+   The dismiss keeps a 26px hit area through ::before, so the target does not
+   shrink — only its layout footprint does. */
+.callout-sm > i, .callout-sm > svg, .callout-sm .callout-icon {
+  margin-top: calc((var(--fs-xs) * var(--lh-snug) - 16px) / 2);
+}
+.callout-sm .callout-dismiss {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  margin: calc((var(--fs-xs) * var(--lh-snug) - 20px) / 2) 0 calc((var(--fs-xs) * var(--lh-snug) - 20px) / 2) var(--space-2);
+}
+.callout-sm .callout-dismiss::before {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border-radius: var(--radius-sm);
+}
+.callout-sm .callout-dismiss > i, .callout-sm .callout-dismiss > svg { width: 14px; height: 14px; }
+.callout-sm:has(.callout-title) > i, .callout-sm:has(.callout-title) > svg, .callout-sm:has(.callout-title) .callout-icon {
+  margin-top: calc((var(--fs-sm) * var(--lh-tight) - 16px) / 2);
+}
+.callout-sm:has(.callout-title) .callout-dismiss {
+  margin-top: calc((var(--fs-sm) * var(--lh-tight) - 20px) / 2);
+  margin-bottom: calc((var(--fs-sm) * var(--lh-tight) - 20px) / 2);
+}
 
 /* ---- alert bar — full-width banner, items centered, actions right ---- */
 .callout-bar {

package/dist/css/components/combobox.css

@@ -333,3 +333,21 @@
   .combobox-chevron { transition: none; }
   .combobox-option { transition: none; }
 }
+
+/* ----------------------------------------------------------------
+   SIZE + ICON-ONLY
+   ---------------------------------------------------------------- */
+/* sm — the 32px trigger that sits beside sm buttons in a table toolbar. */
+.combobox-sm .combobox-trigger { height: var(--control-h-sm); padding: 0 var(--space-2) 0 var(--space-3); gap: var(--space-2); font-size: var(--fs-sm); }
+/* icon-only — the glyph IS the value (a sort order, a view mode). The label is
+   kept as sr-only so the trigger still announces what is selected. */
+.combobox.is-icon-only { display: inline-block; width: auto; align-self: flex-start; }
+.combobox.is-icon-only .combobox-trigger { width: auto; padding: 0 var(--space-2) 0 var(--space-2-5); gap: var(--space-1); }
+.combobox.is-icon-only .combobox-trigger-icon { color: var(--color-foreground-default); }
+/* Option glyph in the list (always shown when the option carries one) */
+.combobox-option-icon { flex-shrink: 0; display: inline-flex; color: var(--color-foreground-secondary); }
+.combobox-option-icon > svg, .combobox-option-icon > i { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke); }
+/* The trigger icon rule sizes the span; an svg/i passed as the icon kept its own
+   24px and spilled out. Size the glyph itself, like .combobox-option-icon. */
+.combobox-trigger-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.combobox-trigger-icon > svg, .combobox-trigger-icon > i { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke); }

package/dist/css/components/filters.css

@@ -0,0 +1,123 @@
+/* ============================================================
+   TABLE FILTERS — components/filters.css
+   DTFilters (apply | live) + DateRangePicker + the apply hint.
+   Sits in DTToolbar's filters zone. Status tabs live OUTSIDE the
+   table and always apply at once; this bar owns search + period.
+   ============================================================ */
+
+.dt-filters { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
+.dt-filters-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); min-width: 0; }
+
+/* "Search by [Name | ID | Value]" + the field that opens beside it */
+.dt-filters-scope { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
+.dt-filters-scope-label { font-size: var(--fs-sm); color: var(--color-foreground-secondary); white-space: nowrap; }
+/* The field animates its WIDTH open (max-width 0 → 320) instead of popping in.
+   The 4px padding and matching negative margin keep the focus ring inside the
+   clip while it is closed. */
+.dt-filters-field {
+  max-width: 0; opacity: 0; overflow: hidden; padding: 4px; margin: -4px;
+  transition: max-width var(--duration-base) var(--ease-entrance), opacity var(--duration-fast) var(--ease-standard);
+}
+.dt-filters-field.is-open { max-width: 320px; opacity: 1; }
+.dt-filters-field > .input { width: 300px; max-width: 100%; }
+
+/* Second row (apply mode) — opens while something is pending or applied.
+   grid 0fr → 1fr animates to the row's own height, not a guessed one. */
+.dt-filters-apply {
+  display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden;
+  transition: grid-template-rows var(--duration-base) var(--ease-entrance), opacity var(--duration-base) var(--ease-standard);
+}
+.dt-filters-apply.is-open { grid-template-rows: 1fr; opacity: 1; }
+.dt-filters-apply-inner {
+  min-height: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
+  transition: margin-top var(--duration-base) var(--ease-entrance), padding-top var(--duration-base) var(--ease-entrance);
+}
+/* the hairline between the controls and this row */
+.dt-filters-apply.is-open .dt-filters-apply-inner {
+  margin-top: var(--space-3); padding-top: var(--space-3);
+  border-top: var(--border-hairline) solid var(--color-border-subtle);
+}
+/* the clip must lift once open, or the hint balloon is cut */
+.dt-filters-apply.is-open, .dt-filters-apply.is-open .dt-filters-apply-inner { animation: dt-filters-unclip 0s var(--duration-base) forwards; }
+@keyframes dt-filters-unclip { to { overflow: visible; } }
+.dt-filters-vsep { align-self: stretch; width: var(--border-hairline); min-height: 20px; background: var(--color-border-subtle); margin: 0 var(--space-1); }
+
+/* An applied filter: a 32px pill, the height of the buttons beside it. The ✕ /
+   undo is its own button, so the pill is not one large hit area. */
+.dt-filter-pill {
+  display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box;
+  height: var(--control-h-sm); padding: 0 var(--space-1) 0 var(--space-3);
+  border: var(--border-hairline) solid var(--color-border-default); border-radius: var(--radius-pill);
+  background: var(--color-background-surface); color: var(--color-foreground-secondary);
+  font-size: var(--fs-sm); line-height: 1; white-space: nowrap;
+}
+.dt-filter-pill-label { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; }
+.dt-filter-pill-action {
+  appearance: none; display: inline-flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-pill);
+  background: none; color: inherit; font: inherit; cursor: pointer;
+}
+.dt-filter-pill-action > svg { width: var(--icon-xs); height: var(--icon-xs); }
+.dt-filter-pill-action:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.dt-filter-pill-action:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+/* Marked for removal — still applied until the next Apply. */
+.dt-filter-pill.is-pending { border-style: dashed; color: var(--color-foreground-muted); }
+.dt-filter-pill.is-pending .dt-filter-pill-label { text-decoration: line-through; }
+
+/* Presence — items enter and leave the apply row the same way */
+.dt-filters-item { transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-entrance); }
+.dt-filters-item.is-entering, .dt-filters-item.is-leaving { opacity: 0; transform: translateX(-6px); }
+
+/* Apply with a hint balloon while anything is pending (and on hover) */
+.dt-filters-applywrap { position: relative; display: inline-flex; }
+.dt-filters-hint {
+  position: absolute; left: 0; bottom: calc(100% + var(--space-2)); z-index: 8000;
+  width: max-content; max-width: 260px; padding: var(--space-2) var(--space-3);
+  background: var(--color-background-inverse); color: var(--color-foreground-inverse-default);
+  border-radius: var(--radius-sm); font-size: var(--fs-xs); line-height: var(--lh-snug);
+  box-shadow: var(--shadow-md); pointer-events: none;
+  opacity: 0; transform: translateY(2px);
+  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
+}
+.dt-filters-hint::after {
+  content: ""; position: absolute; left: var(--space-4); top: 100%;
+  border: 5px solid transparent; border-top-color: var(--color-background-inverse);
+}
+.dt-filters-hint.is-visible, .dt-filters-applywrap:hover .dt-filters-hint { opacity: 1; transform: none; }
+
+/* ------------------------------------------------------------
+   DATE RANGE PICKER
+   ------------------------------------------------------------ */
+.date-range { position: relative; display: inline-flex; }
+.date-range > .date-trigger { width: 300px; max-width: 100%; }
+.date-range-label { display: inline-flex; align-items: center; gap: var(--space-2-5); min-width: 0; }
+.date-range-label > svg, .date-range-label > i { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); }
+.date-range-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.date-range-sm > .date-trigger { height: var(--control-h-sm); font-size: var(--fs-sm); }
+.date-range-panel {
+  z-index: 7000; display: flex; gap: var(--space-4); box-sizing: border-box;
+  padding: var(--space-4); width: max-content; max-width: calc(100vw - var(--space-6));
+  background: var(--color-background-surface); color: var(--color-foreground-default);
+  border: var(--border-hairline) solid var(--color-border-default); border-radius: var(--shape-overlay, var(--radius-lg));
+  box-shadow: var(--shadow-lg);
+}
+.date-range:not(.is-portal) .date-range-panel { position: absolute; top: calc(100% + var(--space-2)); left: 0; }
+.date-range-presets { display: flex; flex-direction: column; gap: var(--space-1); min-width: 140px; padding-right: var(--space-4); border-right: var(--border-hairline) solid var(--color-border-subtle); }
+.date-range-preset {
+  appearance: none; text-align: left; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm);
+  background: none; font: inherit; font-size: var(--fs-sm); color: var(--color-foreground-secondary); cursor: pointer;
+}
+.date-range-preset:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.date-range-preset.is-active { background: var(--color-background-selected); color: var(--color-foreground-brand); }
+.date-range-preset:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.date-range-fields { display: flex; flex-direction: column; gap: var(--space-3); }
+.date-range-field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-xs); color: var(--color-foreground-muted); }
+.date-range-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: auto; }
+@media (max-width: 640px) {
+  .date-range-panel { flex-direction: column; }
+  .date-range-presets { flex-direction: row; flex-wrap: wrap; border-right: 0; padding-right: 0; border-bottom: var(--border-hairline) solid var(--color-border-subtle); padding-bottom: var(--space-3); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dt-filters-field, .dt-filters-apply, .dt-filters-apply-inner, .dt-filters-item, .dt-filters-hint { transition: none; }
+}

package/dist/css/components/inputs.css

@@ -248,6 +248,36 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
     border-color var(--transition-fast),
     box-shadow var(--transition-fast);
 }
+/* Small field — the toolbar size (32px), for a search with its own action */
+.group.group-sm { height: var(--control-h-sm); box-sizing: border-box; }
+.group.group-sm > input { font-size: var(--fs-sm); padding: 0 var(--space-3); }
+/* The inset button is tuned for the 40px field; at 32px it keeps a 24px box of
+   its own (4px clear of each edge) and centres its label with line-height 1,
+   instead of inheriting a height that left the text low. */
+.group.group-sm > .fix-btn {
+  height: 24px;
+  align-self: center;
+  margin-top: 0;
+  margin-bottom: 0;
+  /* 1px of bottom padding lifts the label 0.5px: Lato at 11px sits low by its
+     lowercase mass in a box this small, the same correction as the sm pill. */
+  padding: 0 var(--space-3) 1px;
+  font-size: var(--fs-xs);
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+.group.group-sm > .fix-btn:last-child { margin-right: 3px; }
+.group.group-sm > .fix-btn:first-child { margin-left: 3px; }
+/* field-in-group focus */
+/* A field marked .input inside a group still matched .input:focus and drew its
+   own 4px halo — clipped by the group, it showed as an inner band that stopped
+   short of the inset button, notched by the field's own rounded corners. The
+   group owns the ring; the field inside it draws none. */
+.group > .input,
+.group > .input:focus,
+.group > .input:focus-visible { box-shadow: none; border-radius: 0; }
 .group:focus-within {
   border-color: var(--color-border-focus);
   box-shadow: var(--shadow-focus);
@@ -1420,3 +1450,25 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 .group.underline > .fix-btn.is-danger { background: var(--color-danger-500); border-color: transparent; color: var(--color-foreground-on-solid); }
 .group.underline > .fix-btn.is-danger-outline { background: var(--color-background-surface); border-color: var(--color-feedback-danger-border); color: var(--color-danger-500); }
 .group.underline > .fix-btn.is-success { background: var(--color-success-500); border-color: transparent; color: var(--color-foreground-on-solid); }
+
+/* Small search pill — 32px, with the same 24px inset button as .group-sm.
+   Appended last so it outranks the inset-button block, which is tuned for 40px. */
+.pill-search.pill-search-sm { box-sizing: border-box; }
+.pill-search.pill-search-sm:has(> .fix-btn:last-child) { padding-right: 0; }
+.pill-search.pill-search-sm > .fix-btn {
+  height: 24px; align-self: center; margin-top: 0; margin-bottom: 0;
+  padding: 0 var(--space-3) 1px; font-size: var(--fs-xs); line-height: 1;
+  display: inline-flex; align-items: center; box-sizing: border-box;
+}
+.pill-search.pill-search-sm > .fix-btn:last-child { margin-right: 4px; }
+
+/* Disabled wins over every variant — the variant rules above are more specific
+   than the base :disabled, so without this a disabled tertiary kept its fill and
+   still read as clickable. */
+:is(.group, .pill-search) > .fix-btn:disabled,
+:is(.group, .pill-search) > .fix-btn[class*="is-"]:disabled {
+  background: transparent;
+  border-color: transparent;
+  color: var(--color-foreground-disabled);
+  cursor: not-allowed;
+}

package/dist/css/components/sidebar.css

@@ -226,3 +226,11 @@
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .sb.is-glass { background: var(--color-background-surface); }
 }
+
+/* Optical centring for small labels. A badge that inherits a tall line-height
+   (15px on 10px type) is centred on its LINE BOX, and JetBrains Mono carries its
+   ink high in that box — the caps sat 0.7px above centre. The pill model fixes it:
+   line-height 1 inside a fixed-height flex box, which centres the glyph's em box.
+   Heights are unchanged. */
+.sb-count { display: inline-flex; align-items: center; line-height: 1; height: 17px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
+.sb-item .badge { display: inline-flex; align-items: center; line-height: 1; height: 15px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }

package/dist/css/components/status-pills.css

@@ -42,12 +42,19 @@
   align-self: center;
 }
 
-/* Label wrapper — runtime-injected; nudges text up 0.5px to compensate for
-   Lato's optical descender offset, leaving the dot at geometric centre. */
+/* Label lift — moves the text only, so dot, icon and remove stay centred on the
+   box. Sentence-case Lato reads by its lowercase mass, which a box that centres
+   the cap band leaves ~1.2px low; the token lands the label between the cap and
+   x-height bands, where the eye places it. */
 .pill > .pill-label {
   display: inline-block;
-  transform: translateY(-0.5px);
+  transform: translateY(calc(-1 * var(--optical-lift-sans, 0em)));
 }
+/* All caps reads by the cap band, which is already level with the dot. */
+.pill > .pill-label.is-caps,
+.pill.is-caps > .pill-label,
+.pill[style*="uppercase"] > .pill-label,
+.pill > .pill-label[style*="uppercase"] { transform: translateY(calc(-1 * var(--optical-lift-caps, 0em))); }
 
 /* Trailing icon (e.g. clock, arrow) */
 .pill > i, .pill > svg,
@@ -205,3 +212,15 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+
+/* Optical centre for mixed-case labels. Glyphs were centred on the CAP height
+   (geometric error 0.06px), but labels are sentence case — "Approved",
+   "Pending" — and the eye weighs the x-height, ~0.11em lower, so the label read
+   low against the dot. Glyphs drop half that gap (0.055em ≈ 0.6px at 11px),
+   landing between cap and x-height. In em, so it scales with every pill size. */
+.pill > .dot, .pill > svg, .pill > i, .pill > .pill-x, .pill > button { transform: translateY(0.055em); }
+
+/* sm only: the 10px baseline snaps down a pixel in a 20px box, so the label —
+   in either case — gets its own lift. */
+.pill.sm > .pill-label,
+.pill.sm > .pill-label.is-caps { transform: translateY(calc(-1 * var(--optical-lift-sm, 0.06em))); }

package/dist/css/components/table.css

@@ -270,7 +270,22 @@
    ---------------------------------------------------------------- */
 .dt tbody tr {
   border-bottom: 1px solid var(--color-border-subtle);
-  transition: background var(--transition-fast);
+}
+/* Row hover fades in and out. Hover is painted on the <tr> by some rules and on
+   its cells by others (subrow groups, detail rows, actionable rows), so both
+   carry the transition — a fade on the row alone left those snapping. In is
+   quick so the row answers the pointer; out is slower so moving down a column
+   reads as one continuous wash instead of a flicker. */
+.dt tbody tr,
+.dt tbody tr > td {
+  transition: background-color var(--duration-slower) var(--ease-standard);
+}
+.dt tbody tr:hover,
+.dt tbody tr:hover > td {
+  transition-duration: var(--duration-base);
+}
+@media (prefers-reduced-motion: reduce) {
+  .dt tbody tr, .dt tbody tr > td { transition: none; }
 }
 .dt tbody tr:last-child { border-bottom: 0; }
 
@@ -935,11 +950,9 @@
   opacity: 1;
 }
 
-/* A closed group must not glue to the parent — the parent keeps its own border
-   until the group opens, otherwise two collapsed rows read as one. */
-.dt tbody tr.has-subrows.is-collapsible:not(.is-open) > td {
-  border-bottom: 1px solid var(--color-border-default);
-}
+/* A closed group keeps only the row's own hairline — the chevron already says
+   there is more. A second border on the cells stacked on top of it and read as
+   a heavier underline under every expandable row. */
 
 /* Disclosure control — sits in the parent's lead cell */
 .dt-subrow-toggle {
@@ -1218,7 +1231,11 @@ a.dt-detail-card:focus-visible { outline: none; box-shadow: var(--shadow-focus);
 .dt-toolbar.dt-toolbar-sm { min-height: calc(var(--control-h-sm) + 2 * var(--space-4) + var(--border-hairline)); padding: var(--space-4) var(--space-4); }
 .dt-toolbar-lead { display: inline-flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
 .dt-toolbar-filters { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1 1 auto; }
-.dt-toolbar-actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
+.dt-toolbar-actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
+  /* Pinned to the FIRST row: when the filters grow a second row (an apply bar,
+     a wrapped chip set) the actions must not drift down to the middle. Order is
+     sort | expand/collapse | exports. */
+  align-self: flex-start; }
 /* Selection mode keeps the toolbar on the surface colour. The tint marks WHAT
    is selected; repeating it on the chrome dilutes that signal and the bar stops
    reading as chrome at all. The state is carried by content instead — the count
@@ -1380,3 +1397,100 @@ a.dt-detail-card:focus-visible { outline: none; box-shadow: var(--shadow-focus);
 .dt-outline-set { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
 .dt.on-inverse .dt-outline,
 .dark .dt .dt-outline { border-color: var(--color-border-inverse); color: var(--color-foreground-inverse-default); }
+
+/* Optical centring for small labels. A badge that inherits a tall line-height
+   (15px on 10px type) is centred on its LINE BOX, and JetBrains Mono carries its
+   ink high in that box — the caps sat 0.7px above centre. The pill model fixes it:
+   line-height 1 inside a fixed-height flex box, which centres the glyph's em box.
+   Heights are unchanged. */
+.dt-subrow-count { display: inline-flex; align-items: center; line-height: 1; height: 17px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
+/* Optical nudge. Lato's cap centre sits ~0.3px below its em centre at 11px and
+   pixel-snapping doubled it, so the bare label read 0.6px below the flag. The
+   label is bare text and cannot be targeted, so the row lifts by half a pixel
+   (1px off the bottom of a fixed-height box) and the flag / icon are handed that
+   half-pixel back — only the text moves. */
+.dt-outline { line-height: 1; padding-bottom: 1px; }
+.dt-outline > .flag, .dt-outline > svg, .dt-outline > i, .dt-outline > img { margin-top: 1px; }
+
+/* ----------------------------------------------------------------
+   GROUP DIVIDER META — the summary on the right of a day/section divider
+   ---------------------------------------------------------------- */
+/* Shipped in DTGroupDivider since 1.0.13 with no rule, so the meta ran straight
+   into the label. Floated right (a <td> cannot be a flex row without breaking the
+   table), muted, tabular so day totals line up down the ledger. */
+.dt-row-divider-meta {
+  float: right;
+  margin-left: var(--space-4);
+  color: var(--color-foreground-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ----------------------------------------------------------------
+   ROW ACTION "OPEN" — the row opens something; only the chevron toggles
+   ---------------------------------------------------------------- */
+.dt tbody tr.has-subrows.is-actionable,
+.dt tbody tr.has-detail.is-actionable { cursor: pointer; }
+.dt tbody tr.is-actionable:hover > td { background: var(--color-background-hover); }
+/* The chevron is a live control here (unlike rowAction="toggle"). */
+.dt tbody tr.is-actionable .dt-subrow-toggle { pointer-events: auto; }
+/* The name as a button: looks like the text it replaces, owns the focus ring. */
+.dt-row-button {
+  appearance: none; background: none; border: 0; padding: 0; margin: 0;
+  font: inherit; color: inherit; text-align: inherit; letter-spacing: inherit;
+  cursor: pointer; border-radius: var(--radius-xs);
+}
+.dt-row-button:hover { text-decoration: underline; text-underline-offset: 2px; }
+.dt-row-button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+
+/* ----------------------------------------------------------------
+   TOGGLE SPACER — the chevron's footprint on a row without children
+   ---------------------------------------------------------------- */
+.dt-subrow-toggle.is-spacer { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; pointer-events: none; }
+
+/* ----------------------------------------------------------------
+   LEDGER PATTERN — running balance column
+   ---------------------------------------------------------------- */
+/* Any open-action row (with or without children) takes the pointer; the
+   has-subrows-only rule above covers the parent of a group. */
+.dt tbody tr.is-actionable { cursor: pointer; }
+/* The balance after the entry: the same mono figure as the amount, demoted to
+   regular weight and muted — it is context, the amount is the fact. An entry
+   that has not settled moved no money, so it shows "—" (.is-empty). */
+.dt td.dt-num.dt-balance { font-weight: var(--w-regular); color: var(--color-foreground-muted); }
+.dt td.dt-num.dt-balance.is-empty { color: var(--color-foreground-disabled); }
+/* A void row's balance is not struck: there is nothing to annul, just no value. */
+.dt tbody tr.is-muted td.dt-num.dt-balance { text-decoration: none; }
+
+/* ----------------------------------------------------------------
+   FILTERED BAND — "Showing n of total", above the toolbar
+   ----------------------------------------------------------------
+   A thin strip inside .dt-wrap, above DTToolbar, that exists only while a filter
+   is applied (a status tab other than All counts). Neutral on purpose: it is a
+   state note, not an alert. grid 0fr → 1fr so it takes no space when closed.
+   Use it when the count does not need a fixed place in the toolbar lead; keep
+   the lead count when the total is always worth reading. */
+.dt-filtered {
+  display: grid; grid-template-rows: 0fr;
+  transition: grid-template-rows var(--duration-base) var(--ease-entrance);
+}
+.dt-filtered.is-open { grid-template-rows: 1fr; }
+.dt-filtered-inner {
+  min-height: 0; overflow: hidden;
+  display: flex; align-items: center; gap: var(--space-2);
+  background: var(--color-background-subtle);
+  color: var(--color-foreground-secondary);
+  font-size: var(--fs-xs); line-height: 1; font-variant-numeric: tabular-nums;
+}
+.dt-filtered.is-open .dt-filtered-inner {
+  padding: var(--space-2) var(--space-5);
+  border-bottom: var(--border-hairline) solid var(--color-border-subtle);
+}
+.dt-filtered-inner > svg { width: 13px; height: 13px; flex-shrink: 0; stroke-width: var(--icon-stroke); }
+@media (prefers-reduced-motion: reduce) { .dt-filtered { transition: none; } }
+
+/* A closed subrow is a 1px-tall row that still carried its own hairlines (the
+   row's, and the group-closing one on .is-last), so they stacked under the
+   parent's and read as a heavier underline. Closed, it draws nothing; the
+   parent's hairline is the only separator until the group opens. */
+.dt tbody tr.dt-subrow.is-collapsible:not(.is-open),
+.dt tbody tr.dt-subrow.is-collapsible:not(.is-open) > td { border-bottom: 0; border-top: 0; }

package/dist/css/components/toggle-chip.css

@@ -135,3 +135,12 @@
   flex-wrap: wrap;
   gap: var(--space-2);
 }
+
+/* The label is bare text in the flex row and inherited the page line-height,
+   which put it 0.2–0.6px below centre. line-height 1 centres its em box. */
+.toggle-chip { line-height: 1; }  /* label */
+/* Same optical nudge as .dt-outline: 11px Lato in a 24px box snaps its caps
+   0.6px low. Lift the row half a pixel and hand it back to the glyphs, so only
+   the bare label moves. */
+.toggle-chip-sm { padding-bottom: 1px; }
+.toggle-chip-sm > svg, .toggle-chip-sm > i, .toggle-chip-sm > .toggle-chip-count { margin-top: 1px; }

package/dist/css/index.css

@@ -12,6 +12,7 @@
 @import "./components/cards.css";
 @import "./components/combobox.css";
 @import "./components/empty-states.css";
+@import "./components/filters.css";
 @import "./components/inputs.css";
 @import "./components/number-input.css";
 @import "./components/overlays.css";

package/dist/css/tokens.css

@@ -673,6 +673,13 @@
      Swapping the mono family = change the two lines above/below (and a product
      theme may override the pair). Set to `none` to disable the whole mechanism. */
   --font-mono-adjust: 0.5065;  /* @kind font */
+  /* Optical lift for short labels in a fixed-height box (pills, tags, badges).
+     Tuned by eye: at md and lg the label already reads centred on its dot, so
+     both are 0. The sm pill is the exception — at 10px Lato's baseline lands on
+     a fractional pixel and snaps down, leaving the text ~1px low in a 20px box. */
+  --optical-lift-sans: 0em;  /* @kind font */
+  --optical-lift-caps: 0em;  /* @kind font */
+  --optical-lift-sm: 0.06em;  /* @kind font */  /* 0.6px at 10px — tuned by eye */
   --font-display: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
 
   /* Weights (per manual) */

package/dist/react/Combobox/Combobox.d.ts

@@ -13,6 +13,7 @@ export interface ComboOption {
   disabled?: boolean;
   /** Text used by the search filter when label isn't a plain string. */
   searchText?: string;
+  icon?: React.ReactNode;
 }
 
 export type ComboboxStatus = 'default' | 'error';
@@ -50,6 +51,8 @@ export interface ComboboxProps {
       needs a direction: 'start' grows right (default), 'end' grows left. Use
       'end' for a compact control near the right edge. */
   align?: 'start' | 'end';
+  size?: 'sm' | 'md';
+  iconOnly?: boolean;
   className?: string;
   style?: React.CSSProperties;
   'aria-label'?: string;