It is live: hover, focus and its own controls respond. Actions that would change data (approve, send, delete) are for your app to wire. The width is a real 390 px, 768 px or 1280 px box, shrunk to fit your screen.
<style>
.odl-filter-bar { box-sizing: border-box; container-type: inline-size; inline-size: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-inline-sm); padding: var(--ds-space-inset-sm);
background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container);
font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-filter-bar *, .odl-filter-bar *::before { box-sizing: border-box; }
.odl-filter-bar svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-filter-bar .odl-search { display: flex; align-items: center; gap: var(--ds-space-inline-xs); flex: 1 1 14rem; max-inline-size: 20rem; min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
padding: 0 var(--ds-space-inset-sm); border: var(--ds-border-width-default) solid var(--ds-color-border-input); background: var(--ds-color-bg-field); color: var(--ds-color-icon-subtle);
/* concentric with the bar's corner (outer minus the gap); a pill control stays a pill */
border-radius: max(calc(var(--ds-radius-container) - var(--ds-space-inset-sm)), calc(var(--ds-radius-control) - 4 * var(--ds-radius-container)));
transition: border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-filter-bar .odl-search:hover { border-color: var(--ds-color-border-strong); }
.odl-filter-bar .odl-search:has(input:focus-visible) { border-color: var(--ds-color-border-focus); box-shadow: 0 0 0 var(--ds-border-width-default) var(--ds-color-border-focus); }
.odl-filter-bar .odl-search input { flex: 1; min-inline-size: 0; align-self: stretch; border: 0; padding: 0; background: transparent; color: var(--ds-color-text-primary); font: var(--ds-text-body-md); outline: none; }
.odl-filter-bar .odl-search input::placeholder { color: var(--ds-color-text-tertiary); }
.odl-filter-bar .odl-search input::-webkit-search-cancel-button { appearance: none; }
.odl-filter-bar kbd { padding: 0 var(--ds-space-4); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-detail); background: var(--ds-color-surface-raised);
color: var(--ds-color-text-tertiary); font: var(--ds-text-code-sm); }
.odl-filter-bar .odl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-inline-xs); }
.odl-filter-bar .odl-chip, .odl-filter-bar .odl-ghost, .odl-filter-bar .odl-sort { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); min-block-size: max(var(--ds-size-control-sm), var(--ds-size-target-min));
padding: 0 var(--ds-space-inset-sm); border-radius: var(--ds-radius-control); font: var(--ds-text-label-lg); white-space: nowrap; cursor: pointer;
transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard), border-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-filter-bar .odl-chip { border: var(--ds-border-width-default) dashed var(--ds-color-border-default); background: transparent; color: var(--ds-color-text-secondary); }
.odl-filter-bar .odl-chip:hover { border-style: solid; background: var(--ds-color-bg-neutral-subtle-hover); color: var(--ds-color-text-primary); }
.odl-filter-bar .odl-chip svg { color: var(--ds-color-icon-subtle); }
.odl-filter-bar .odl-active { display: inline-flex; align-items: stretch; border: var(--ds-border-width-default) solid var(--ds-color-border-accent); border-radius: var(--ds-radius-control); background: var(--ds-color-bg-accent-subtle); }
.odl-filter-bar .odl-active .odl-chip { border: 0; border-start-end-radius: 0; border-end-end-radius: 0; background: transparent; color: var(--ds-color-text-secondary); padding-inline-end: var(--ds-space-4); }
.odl-filter-bar .odl-active .odl-chip strong { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); font-variant-numeric: tabular-nums; }
.odl-filter-bar .odl-active .odl-chip:hover, .odl-filter-bar .odl-active .odl-x:hover { background: var(--ds-color-bg-accent-subtle-hover); }
.odl-filter-bar .odl-x { display: grid; place-items: center; min-inline-size: max(var(--ds-size-control-sm), var(--ds-size-target-min)); padding: 0; border: 0; border-start-end-radius: var(--ds-radius-control); border-end-end-radius: var(--ds-radius-control);
background: transparent; color: var(--ds-color-icon-accent); cursor: pointer; }
.odl-filter-bar .odl-ghost { border: 0; background: transparent; color: var(--ds-color-text-link); font-weight: var(--ds-font-weight-label); }
.odl-filter-bar .odl-ghost:hover { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-filter-bar .odl-end { display: flex; align-items: center; gap: var(--ds-space-inline-md); margin-inline-start: auto; }
.odl-filter-bar .odl-count { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odl-filter-bar .odl-count strong { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-label); }
.odl-filter-bar .odl-sort { border: var(--ds-border-width-default) solid var(--ds-color-border-default); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); }
.odl-filter-bar .odl-sort:hover { background: var(--ds-color-bg-neutral-subtle-hover); }
.odl-filter-bar .odl-sort span { margin-inline-end: var(--ds-space-2); color: var(--ds-color-text-secondary); }
.odl-filter-bar .odl-sort svg { color: var(--ds-color-icon-subtle); }
.odl-filter-bar button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); position: relative; }
@container (max-width: 899.98px) {
.odl-filter-bar .odl-filters { order: 3; flex-basis: 100%; }
.odl-filter-bar .odl-search { max-inline-size: none; }
}
@container (max-width: 560px) {
.odl-filter-bar .odl-end { order: 4; }
.odl-filter-bar .odl-search { flex-basis: 100%; max-inline-size: none; }
.odl-filter-bar .odl-search kbd { display: none; }
.odl-filter-bar .odl-filters > * { flex: 1 1 auto; justify-content: center; }
.odl-filter-bar .odl-active .odl-chip { flex: 1 1 auto; justify-content: center; }
.odl-filter-bar .odl-end { flex-basis: 100%; justify-content: space-between; padding-block-start: var(--ds-space-stack-xs); border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
}
@media (prefers-reduced-motion: reduce) { .odl-filter-bar, .odl-filter-bar *, .odl-filter-bar *::before { transition: none !important; animation: none !important; } }
</style>
<div class="odl-filter-bar" role="search" aria-label="Filter receipts">
<label class="odl-search"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="m10.5 10.5 3 3"/></svg>
<input type="search" placeholder="Search customer or reference" aria-label="Search receipts"><kbd>/</kbd></label>
<div class="odl-filters" role="group" aria-label="Filters">
<span class="odl-active"><button type="button" class="odl-chip" aria-haspopup="dialog">Received <strong>Oct 1 – 14</strong></button><button type="button" class="odl-x" aria-label="Remove filter: received Oct 1 to 14"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m5 5 6 6M11 5l-6 6"/></svg></button></span>
<button type="button" class="odl-chip" aria-haspopup="dialog"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="8" r="5.75"/><path d="M8 5.5v5M5.5 8h5"/></svg>Match status</button>
<button type="button" class="odl-chip" aria-haspopup="dialog"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="8" r="5.75"/><path d="M8 5.5v5M5.5 8h5"/></svg>Paid by</button>
<button type="button" class="odl-ghost" aria-haspopup="menu"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M8 3v10M3 8h10"/></svg>Add filter</button>
</div>
<div class="odl-end">
<p class="odl-count" aria-live="polite"><strong>192</strong> receipts</p>
<button type="button" class="odl-sort" aria-haspopup="menu" aria-expanded="false"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M5 3v10M2.5 10.5 5 13l2.5-2.5M11 13V3M8.5 5.5 11 3l2.5 2.5"/></svg><span>Sort:</span>Newest first</button>
</div>
</div>
<script>
document.querySelectorAll(".odl-filter-bar").forEach((root) => {
if (root.dataset.odlReady) return; root.dataset.odlReady = "1";
const count = root.querySelector(".odl-count strong");
root.querySelectorAll(".odl-x").forEach((x) => x.addEventListener("click", () => {
const wrap = x.closest(".odl-active"), chip = wrap.querySelector(".odl-chip"), plus = root.querySelector(".odl-filters > .odl-chip svg").cloneNode(true);
chip.replaceChildren(plus, chip.firstChild.textContent.trim()); wrap.replaceWith(chip); count.textContent = "2,418"; chip.focus();
}));
});
</script>
Pick a start and end day from two months side by side, or one quick range such as last 7 days, then apply it to a report.
Six boxes for a verification code that move to the next box as you type and fill all at once when you paste, with a resend countdown and a wrong-code error.
A calm drop area for statements or documents, with a browse link, the accepted types, and each file's state: uploaded, uploading with progress, or failed with a retry.