@lostgradient/cinder 0.2.0 → 0.3.0

package/src/components/event-stream-viewer/event-stream-viewer.svelte

@@ -0,0 +1,298 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category data-display
+   * @status beta
+   * @purpose Dense append-only log of timestamped events with follow-latest scrolling, severity tones, expandable JSON details, and copy actions.
+   * @tag log
+   * @tag stream
+   * @tag events
+   * @useWhen Displaying real-time or historical operational events such as workflow steps, job logs, or webhook traces.
+   * @useWhen Showing an append-only diagnostic stream with filtering, copy, and structured detail expansion.
+   * @avoidWhen Showing a social activity feed or notification timeline — use feed instead.
+   * @avoidWhen Rendering paginated historical records with sorting — use data-table instead.
+   * @related feed, timeline, json-viewer, connection-indicator, copy-button
+   */
+  export type {
+    EventSeverity,
+    EventStreamState,
+    EventStreamViewerProps,
+    StreamEvent,
+  } from './event-stream-viewer.types.ts';
+</script>
+
+<script lang="ts">
+  import type { EventStreamViewerProps, StreamEvent } from './event-stream-viewer.types.ts';
+  import { classNames } from '../../utilities/class-names.ts';
+  import ConnectionIndicator from '../connection-indicator/connection-indicator.svelte';
+  import CopyButton from '../copy-button/copy-button.svelte';
+  import JsonViewer from '../json-viewer/json-viewer.svelte';
+
+  // Stable per-instance id namespace for generated DOM ids (details panels).
+  // Event ids are consumer-supplied and may contain spaces, punctuation, or
+  // duplicates across composed viewers, so we never use them directly in an
+  // `id`/`aria-controls` — we scope by this instance id plus the row index.
+  const instanceId = $props.id();
+
+  let {
+    events,
+    connectionState,
+    followLatest = $bindable(true),
+    truncated = false,
+    loading = false,
+    label = 'Event stream',
+    oncopyvisible,
+    onfilter,
+    filterQuery = '',
+    class: className,
+    ...rest
+  }: EventStreamViewerProps = $props();
+
+  // IDs for expanded details panels — keyed by event id
+  let expandedIds = $state(new Set<string>());
+
+  // Track the scroll container element for auto-scroll
+  let scrollContainerEl = $state<HTMLElement | null>(null);
+
+  // Guard flag: set true before programmatic scrollTop writes so handleScroll
+  // ignores the intermediate scroll events they fire (especially under smooth-scroll).
+  let programmaticScroll = false;
+
+  // Live region message for copy-visible announcements
+  let liveMessage = $state('');
+
+  const isEmpty = $derived(!loading && events.length === 0);
+
+  // Track event count and tail identity so fixed-size retained streams still
+  // auto-scroll when they drop the oldest event and append a new tail event.
+  const eventCount = $derived(events.length);
+  const latestEvent = $derived(events.at(-1));
+
+  function toggleDetails(id: string) {
+    const next = new Set(expandedIds);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    expandedIds = next;
+  }
+
+  function formatEventAsText(event: StreamEvent): string {
+    const parts: string[] = [];
+    parts.push(`[${event.timestamp ?? event.datetime}]`);
+    if (event.severity) parts.push(`[${event.severity.toUpperCase()}]`);
+    if (event.source) parts.push(`[${event.source}]`);
+    parts.push(event.summary);
+    if (event.details !== undefined) {
+      try {
+        parts.push(JSON.stringify(event.details, null, 2));
+      } catch {
+        // skip unserializable details
+      }
+    }
+    return parts.join(' ');
+  }
+
+  function handleCopyVisible() {
+    const text = events.map(formatEventAsText).join('\n');
+    if (!oncopyvisible) return;
+    oncopyvisible(text);
+    liveMessage = `${events.length} event${events.length !== 1 ? 's' : ''} sent to copy handler`;
+    setTimeout(() => {
+      liveMessage = '';
+    }, 2000);
+  }
+
+  function handleScroll(event: Event) {
+    // Ignore scroll events fired by our own programmatic scrollTop writes.
+    if (programmaticScroll) return;
+    const target = event.target as HTMLElement;
+    const atBottom = target.scrollHeight - target.scrollTop - target.clientHeight < 2;
+    if (atBottom && !followLatest) {
+      followLatest = true;
+    } else if (!atBottom && followLatest) {
+      followLatest = false;
+    }
+  }
+
+  function scrollToBottom(el: HTMLElement) {
+    programmaticScroll = true;
+    el.scrollTop = el.scrollHeight;
+    // Clear the guard after the browser has processed all resulting scroll events.
+    requestAnimationFrame(() => {
+      programmaticScroll = false;
+    });
+  }
+
+  function resumeFollowing() {
+    followLatest = true;
+    if (scrollContainerEl) {
+      scrollToBottom(scrollContainerEl);
+    }
+  }
+
+  // Scroll to bottom when new events arrive and followLatest is active
+  $effect(() => {
+    // Access eventCount to subscribe to changes
+    const count = eventCount;
+    const tail = latestEvent;
+    if (followLatest && count > 0 && tail && scrollContainerEl) {
+      scrollToBottom(scrollContainerEl);
+    }
+  });
+</script>
+
+<div
+  {...rest}
+  class={classNames('cinder-event-stream-viewer', className)}
+  data-cinder-loading={loading || undefined}
+  data-cinder-empty={isEmpty || undefined}
+  data-cinder-paused={!followLatest || undefined}
+>
+  <!-- Toolbar -->
+  <div class="cinder-event-stream-viewer__toolbar" role="group" aria-label="Stream controls">
+    <div class="cinder-event-stream-viewer__toolbar-start">
+      {#if connectionState}
+        <ConnectionIndicator state={connectionState} />
+      {/if}
+      {#if !followLatest}
+        <button
+          type="button"
+          class="cinder-event-stream-viewer__resume-button"
+          onclick={resumeFollowing}
+        >
+          Resume following
+        </button>
+      {/if}
+    </div>
+    <div class="cinder-event-stream-viewer__toolbar-end">
+      {#if onfilter !== undefined}
+        <input
+          type="search"
+          class="cinder-event-stream-viewer__filter-input"
+          placeholder="Filter events…"
+          aria-label="Filter events"
+          value={filterQuery}
+          oninput={(e) => onfilter?.((e.currentTarget as HTMLInputElement).value)}
+        />
+      {/if}
+      {#if oncopyvisible !== undefined}
+        <button
+          type="button"
+          class="cinder-event-stream-viewer__copy-all-button"
+          onclick={handleCopyVisible}
+          aria-label="Copy all visible events"
+          disabled={events.length === 0}
+        >
+          Copy visible
+        </button>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Truncation notice -->
+  {#if truncated}
+    <div class="cinder-event-stream-viewer__truncation-notice" role="status" aria-live="polite">
+      Stream truncated — only the most recent events are shown.
+    </div>
+  {/if}
+
+  <!-- Scroll viewport: role="log" gives this element a legitimate keyboard-focus
+       need (scrollable live region). svelte:element avoids the a11y_no_noninteractive_tabindex
+       lint warning while retaining the exact same rendered HTML as a plain div. -->
+  <svelte:element
+    this={'div'}
+    class="cinder-event-stream-viewer__viewport"
+    role="log"
+    aria-label={label}
+    onscroll={handleScroll}
+    bind:this={scrollContainerEl}
+    tabindex={0}
+  >
+    {#if loading}
+      <div class="cinder-event-stream-viewer__loading" role="status" aria-label="Loading events">
+        <div class="cinder-event-stream-viewer__skeleton" aria-hidden="true"></div>
+        <div class="cinder-event-stream-viewer__skeleton" aria-hidden="true"></div>
+        <div class="cinder-event-stream-viewer__skeleton" aria-hidden="true"></div>
+      </div>
+    {:else if isEmpty}
+      <div class="cinder-event-stream-viewer__empty" role="status">
+        <p class="cinder-event-stream-viewer__empty-message">No events to display.</p>
+      </div>
+    {:else}
+      <ol class="cinder-event-stream-viewer__list">
+        {#each events as event, eventIndex (event.id)}
+          {@const isExpanded = expandedIds.has(event.id)}
+          {@const detailsId = `${instanceId}-details-${eventIndex}`}
+          <li
+            class="cinder-event-stream-viewer__event"
+            data-cinder-severity={event.severity ?? 'info'}
+          >
+            <div class="cinder-event-stream-viewer__event-bar" aria-hidden="true"></div>
+            <div class="cinder-event-stream-viewer__event-body">
+              <div class="cinder-event-stream-viewer__event-meta">
+                <time
+                  class="cinder-event-stream-viewer__event-time"
+                  datetime={event.datetime}
+                  title={event.datetime}
+                >
+                  {event.timestamp ?? event.datetime}
+                </time>
+                {#if event.severity}
+                  <span
+                    class="cinder-event-stream-viewer__event-severity"
+                    aria-label={`Severity: ${event.severity}`}
+                  >
+                    {event.severity}
+                  </span>
+                {/if}
+                {#if event.source}
+                  <span class="cinder-event-stream-viewer__event-source">
+                    {event.source}
+                  </span>
+                {/if}
+              </div>
+              <p class="cinder-event-stream-viewer__event-summary">{event.summary}</p>
+              {#if event.details !== undefined}
+                <div class="cinder-event-stream-viewer__event-details-section">
+                  <button
+                    type="button"
+                    class="cinder-event-stream-viewer__details-toggle"
+                    aria-expanded={isExpanded}
+                    aria-controls={isExpanded ? detailsId : undefined}
+                    onclick={() => toggleDetails(event.id)}
+                  >
+                    {isExpanded ? 'Hide details' : 'Show details'}
+                  </button>
+                  {#if isExpanded}
+                    <div id={detailsId} class="cinder-event-stream-viewer__event-details">
+                      <JsonViewer value={event.details} />
+                    </div>
+                  {/if}
+                </div>
+              {/if}
+            </div>
+            <div class="cinder-event-stream-viewer__event-actions">
+              <CopyButton
+                value={formatEventAsText(event)}
+                label={`Copy event: ${event.summary}`}
+                copiedLabel="Event copied"
+                class="cinder-event-stream-viewer__copy-event-button"
+              />
+            </div>
+          </li>
+        {/each}
+      </ol>
+    {/if}
+  </svelte:element>
+
+  <!-- Visually hidden live region for copy-visible announcements.
+       Lives in the DOM always; content toggled via state (never {#if}). -->
+  <span
+    class="cinder-event-stream-viewer__live-region"
+    role="status"
+    aria-live="polite"
+    aria-atomic="true">{liveMessage}</span
+  >
+</div>

package/src/components/event-stream-viewer/event-stream-viewer.types.ts

@@ -0,0 +1,85 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+/** Severity / tone of an event entry. */
+export type EventSeverity = 'debug' | 'info' | 'success' | 'warning' | 'error';
+
+/** Connection state for the event stream source. */
+export type EventStreamState = 'connected' | 'connecting' | 'disconnected' | 'error';
+
+/**
+ * A single event entry in the stream.
+ *
+ * `id` must be stable and unique across the lifetime of the viewer — it drives
+ * React-style keyed reconciliation. Use a server-assigned ID or a deterministic
+ * hash, not `Math.random()`.
+ */
+export type StreamEvent = {
+  /** Stable unique identifier used as the keyed list identity. */
+  id: string;
+  /** Machine-readable ISO 8601 datetime string rendered into `<time datetime>`. */
+  datetime: string;
+  /** Human-readable timestamp label (e.g. "12:04:32", "2m ago"). Falls back to `datetime`. */
+  timestamp?: string;
+  /** Severity tone that drives visual styling and the accessible label prefix. */
+  severity?: EventSeverity;
+  /** Origin label identifying which service, worker, or activity produced the event. */
+  source?: string;
+  /** One-line summary of the event. */
+  summary: string;
+  /** Optional structured JSON payload. Rendered in a collapsible JsonViewer. */
+  details?: unknown;
+};
+
+/**
+ * Props for the EventStreamViewer component.
+ */
+export type EventStreamViewerProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+  /** Events to render in chronological order, oldest first. */
+  events: StreamEvent[];
+  /**
+   * Current connection state. When provided, renders a ConnectionIndicator in
+   * the toolbar. Omit when the stream has no live transport.
+   */
+  connectionState?: EventStreamState;
+  /**
+   * When true, new events automatically scroll the list to the bottom.
+   * Set to false to pause follow-latest (e.g. while the user reads earlier events).
+   * Bindable so the parent can read the paused state the component sets internally.
+   */
+  followLatest?: boolean;
+  /**
+   * Whether to show the "events were truncated" notice. This is a boolean flag,
+   * not a count: the viewer never slices `events` itself. Set it to `true` when
+   * you have already trimmed the array (e.g. capped retention) and want users to
+   * know earlier events are not shown.
+   */
+  truncated?: boolean;
+  /**
+   * Show a loading skeleton instead of the event list. Use while the first
+   * batch of events is in flight.
+   */
+  loading?: boolean;
+  /**
+   * Accessible label for the event list region. Required for accessibility.
+   * Defaults to "Event stream".
+   */
+  label?: string;
+  /**
+   * Callback fired when the user clicks the "Copy visible" toolbar action.
+   * Receives the text of all currently visible events. When omitted the copy
+   * action is hidden.
+   */
+  oncopyvisible?: (text: string) => void;
+  /**
+   * Callback fired when the user updates the filter query in the toolbar's
+   * search field. The consumer is responsible for filtering `events` in
+   * response. When omitted the filter input is hidden.
+   */
+  onfilter?: (query: string) => void;
+  /**
+   * Current filter query value, for controlled usage. Pairs with `onfilter`.
+   */
+  filterQuery?: string;
+  /** Additional CSS classes applied to the root element. */
+  class?: string;
+};

package/src/components/event-stream-viewer/index.ts

@@ -0,0 +1,11 @@
+import './event-stream-viewer.css';
+import EventStreamViewer from './event-stream-viewer.svelte';
+
+export default EventStreamViewer;
+export type {
+  EventSeverity,
+  EventStreamState,
+  EventStreamViewerProps,
+  StreamEvent,
+} from './event-stream-viewer.types.ts';
+export { EventStreamViewer };

package/src/components/faceted-filter-bar/README.md

@@ -0,0 +1,170 @@
+# FacetedFilterBar
+
+Composed filtering toolbar with a leading search field, select-based or custom facet controls, removable applied-filter chips, and a clear-all action. Designed for dense operational list views such as workflow queues, failure triage dashboards, and schedule browsers.
+
+## Overview
+
+`FacetedFilterBar` composes `SearchField`, `Chip` (removable mode), and native select controls into one accessible filtering surface. It owns no routing, persistence, or data fetching — it emits change events and the consumer owns the filter state and data loading.
+
+The bar supports two facet types:
+
+- **`select`** — a fixed list of options rendered as a styled native select. Use for status, category, queue, or any enumerable dimension.
+- **`custom`** — a consumer-supplied snippet that renders any control (combobox, date-range picker, etc.) and receives the current value plus a change callback.
+
+Applied filters are displayed as removable chips. A visually-hidden live region announces the active filter count and each applied value to screen readers whenever the filter state changes.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { FacetedFilterBar } from '@lostgradient/cinder/faceted-filter-bar';
+  import type { AppliedFilter, FacetDefinition } from '@lostgradient/cinder/faceted-filter-bar';
+
+  const facets: FacetDefinition[] = [
+    {
+      type: 'select',
+      key: 'status',
+      label: 'Status',
+      placeholder: 'All statuses',
+      options: [
+        { value: 'running', label: 'Running' },
+        { value: 'failed', label: 'Failed' },
+        { value: 'paused', label: 'Paused' },
+      ],
+    },
+    {
+      type: 'select',
+      key: 'queue',
+      label: 'Queue',
+      placeholder: 'All queues',
+      options: [
+        { value: 'default', label: 'Default' },
+        { value: 'priority', label: 'Priority' },
+      ],
+    },
+  ];
+
+  let appliedFilters = $state<AppliedFilter[]>([]);
+  let searchQuery = $state('');
+
+  function handleFacetChange(key: string, value: string) {
+    if (!value) {
+      appliedFilters = appliedFilters.filter((f) => f.key !== key);
+      return;
+    }
+    const facet = facets.find((f) => f.key === key);
+    appliedFilters = [
+      ...appliedFilters.filter((f) => f.key !== key),
+      { key, value, label: facet?.label ?? key },
+    ];
+  }
+
+  function handleFilterRemove(key: string) {
+    appliedFilters = appliedFilters.filter((f) => f.key !== key);
+  }
+
+  function handleClearAll() {
+    appliedFilters = [];
+    searchQuery = '';
+  }
+</script>
+
+<FacetedFilterBar
+  aria-label="Workflow filters"
+  {facets}
+  {appliedFilters}
+  {searchQuery}
+  onsearchchange={(q) => (searchQuery = q)}
+  onfacetchange={handleFacetChange}
+  onfilterremove={handleFilterRemove}
+  onclearall={handleClearAll}
+/>
+```
+
+### Custom facet (snippet escape-hatch)
+
+Use `type: 'custom'` with a `control` snippet for any facet that cannot be expressed as a select list, such as a date-range picker or combobox:
+
+```svelte
+<script lang="ts">
+  import { FacetedFilterBar } from '@lostgradient/cinder/faceted-filter-bar';
+  import type { FacetDefinition } from '@lostgradient/cinder/faceted-filter-bar';
+</script>
+
+{#snippet dateRangeControl({ value, onchange }: { value: string; onchange: (v: string) => void })}
+  <!-- render your date-range control here; call onchange(value) on selection -->
+{/snippet}
+
+<FacetedFilterBar
+  aria-label="Order filters"
+  facets={[
+    {
+      type: 'custom',
+      key: 'dateRange',
+      label: 'Date range',
+      control: dateRangeControl,
+    },
+  ]}
+/>
+```
+
+## Props
+
+| Prop                | Type                                   | Default     | Description                                                                           |
+| ------------------- | -------------------------------------- | ----------- | ------------------------------------------------------------------------------------- |
+| `aria-label`        | `string`                               | `'Filters'` | Accessible label for the filter toolbar region.                                       |
+| `searchQuery`       | `string`                               | —           | Controlled search query. When provided, the search field is controlled by the parent. |
+| `searchPlaceholder` | `string`                               | `'Search…'` | Placeholder text shown in the leading search field.                                   |
+| `searchAriaLabel`   | `string`                               | `'Search'`  | Accessible label for the search input.                                                |
+| `facets`            | `FacetDefinition[]`                    | `[]`        | Facet definitions rendered as filter controls after the search field.                 |
+| `appliedFilters`    | `AppliedFilter[]`                      | `[]`        | Applied filters displayed as removable chips.                                         |
+| `disabled`          | `boolean`                              | `false`     | When true, all filter controls and chips are disabled.                                |
+| `class`             | `string`                               | —           | Additional CSS classes applied to the root element.                                   |
+| `onsearchchange`    | `(query: string) => void`              | —           | Fires when the search query changes.                                                  |
+| `onfacetchange`     | `(key: string, value: string) => void` | —           | Fires when a facet value changes.                                                     |
+| `onfilterremove`    | `(key: string) => void`                | —           | Fires when a specific applied filter chip is removed.                                 |
+| `onclearall`        | `() => void`                           | —           | Fires when the clear-all button is clicked.                                           |
+
+### FacetDefinition
+
+```ts
+// Select facet — fixed options list
+type SelectFacet = {
+  type: 'select';
+  key: string;
+  label: string;
+  placeholder?: string;
+  options: { value: string; label: string; disabled?: boolean }[];
+  disabled?: boolean;
+};
+
+// Custom facet — consumer-supplied snippet
+type CustomFacet = {
+  type: 'custom';
+  key: string;
+  label: string;
+  control: Snippet<[{ value: string; onchange: (value: string) => void }]>;
+};
+```
+
+### AppliedFilter
+
+```ts
+type AppliedFilter = {
+  key: string; // matches a FacetDefinition key
+  value: string; // the selected value
+  label: string; // human-readable label shown in the chip
+};
+```
+
+## Accessibility
+
+`FacetedFilterBar` uses `role="search"` on the root element to expose the filtering surface as a landmark. Consumers should provide a meaningful `aria-label` prop (e.g. `"Workflow filters"`) so screen reader users can navigate to it by landmark.
+
+Each select facet receives an `aria-label` attribute equal to its `label` prop, and an associated visually-hidden `label` element is rendered via the `cinder-sr-only` class for redundancy.
+
+Applied-filter chip remove buttons are labeled `"Remove filter: {label}: {value}"` so screen reader users know exactly which filter they are removing.
+
+A `role="status"` live region (polite) always stays in the DOM and announces the active filter count and each applied value whenever the `appliedFilters` prop changes. The region is never conditionally rendered with `{#if}` — this ensures assistive technologies register it before any content is injected.
+
+See `faceted-filter-bar.a11y.md` for the full keyboard and pointer interaction model.

package/src/components/faceted-filter-bar/faceted-filter-bar.css

@@ -0,0 +1,121 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  /* ========================================
+   * FACETED FILTER BAR
+   * ======================================== */
+
+  .cinder-faceted-filter-bar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+  }
+
+  /* Controls row: search + facet selects in a flex row */
+  .cinder-faceted-filter-bar__controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-faceted-filter-bar__search {
+    flex: 1 1 14rem;
+    min-inline-size: min(14rem, 100%);
+  }
+
+  /* Facet wrapper: positions the select + chevron overlay */
+  .cinder-faceted-filter-bar__facet {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  /* Native select styled to match cinder input frame */
+  .cinder-faceted-filter-bar__select {
+    appearance: none;
+    padding-block: var(--cinder-space-2);
+    padding-inline-start: var(--cinder-space-3);
+    padding-inline-end: var(--cinder-space-8);
+    background: var(--cinder-surface-raised);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    color: var(--cinder-text);
+    font: inherit;
+    font-size: var(--cinder-text-sm);
+    line-height: var(--cinder-leading-normal);
+    block-size: var(--cinder-control-height-sm, 2rem);
+    cursor: pointer;
+    transition:
+      border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  @media (hover: hover) {
+    .cinder-faceted-filter-bar__select:hover:not(:disabled) {
+      border-color: var(--cinder-border-strong);
+    }
+  }
+
+  .cinder-faceted-filter-bar__select:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow:
+      0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
+      0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-faceted-filter-bar__select:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+    }
+  }
+
+  .cinder-faceted-filter-bar__select:disabled {
+    background: var(--cinder-surface-inset);
+    border-color: var(--cinder-border-muted);
+    color: var(--cinder-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Decorative chevron overlaid on the select */
+  .cinder-faceted-filter-bar__select-chevron {
+    pointer-events: none;
+    position: absolute;
+    inset-inline-end: var(--cinder-space-3);
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-faceted-filter-bar__select-chevron::after {
+    content: '';
+    display: block;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-inline-end: 1.5px solid currentcolor;
+    border-block-end: 1.5px solid currentcolor;
+    transform: rotate(45deg) translateY(-25%);
+  }
+
+  /* Applied-filters chip row */
+  .cinder-faceted-filter-bar__chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--cinder-space-2);
+  }
+
+  /* Disabled state on the root affects the controls row visually */
+  .cinder-faceted-filter-bar[data-disabled] .cinder-faceted-filter-bar__select {
+    background: var(--cinder-surface-inset);
+    border-color: var(--cinder-border-muted);
+    color: var(--cinder-text-disabled);
+    cursor: not-allowed;
+  }
+}