@robr0/design-system 0.12.0 → 0.13.0

package/README.md

@@ -18,7 +18,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 | Part | Description |
 |---|---|
 | **Portfolio website** (`/website`) | Next.js app with case studies, work history, writing, and about pages, all built exclusively with the design system components below. **[Live site →](https://robertritacca.com/)** |
-| **Design system** (`/src`) | <!-- component-count -->109<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
+| **Design system** (`/src`) | <!-- component-count -->114<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
 | **AI layer** (`ai` components in `/src`, chat in `/website`, `/evals`) | A site-wide chat that answers questions about the work: built from the library's own `ai` components, grounded in a corpus generated from the site's published content, and scored by a golden-set eval. |
 
 ---
@@ -28,7 +28,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 ### Components
 
 <!-- component-list:start -->
-Accordion · Agent plan · Agent status · AI button · Alert · Alert dialog · Anchor nav · App layout · App sidebar · Area chart · Avatar · Badge · Bar chart · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Funnel chart · Globe · Input · Instructions · Interrupt card · Kbd · Legend tile · Line chart · Link list · Map callout · Map legend · Message actions · Message card · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Reasoning · Scatter chart · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Sparkline · Spinner · Stacked bar chart · Stat · Stepper · Swatch · Table · Tabs · Tag input · Textarea · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip · Tree view · Treemap
+Accordion · Agent plan · Agent status · AI button · Alert · Alert dialog · Anchor nav · App layout · App sidebar · Area chart · Avatar · Avatar group · Badge · Bar chart · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gauge · Globe · Input · Instructions · Interrupt card · Kbd · Legend tile · Line chart · Link list · Map callout · Map legend · Message actions · Message card · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Reasoning · Scatter chart · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Sparkline · Spinner · Split pane · Stacked bar chart · Stat · Stepper · Streaming text · Swatch · Table · Tabs · Tag input · Textarea · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip · Tree view · Treemap
 <!-- component-list:end -->
 
 ### Ambient background

package/components/AvatarGroup/AvatarGroup.css

@@ -0,0 +1,61 @@
+/* ============================================
+   AVATAR GROUP COMPONENT
+   Overlapping avatar stack with a "+N" counter.
+   The pixel size ladder matches Avatar's sizes
+   so the counter circle sits flush in the row.
+   ============================================ */
+
+/* Base */
+
+.ds-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Items — each avatar (and the counter) sits in a ring-bearing wrapper
+   so the overlaps stay legible on any surface. */
+
+.ds-avatar-group__item {
+  position: relative;
+  display: inline-flex;
+  border-radius: var(--radius-full);
+  box-shadow: 0 0 0 var(--border-md) var(--color-bg-page-primary);
+}
+
+.ds-avatar-group__item + .ds-avatar-group__item {
+  margin-left: calc(var(--gap-sm) * -1);
+}
+
+/* Overflow counter */
+
+.ds-avatar-group__overflow {
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-color: var(--color-bg-container-secondary);
+  color: var(--color-text-secondary);
+  font-family: var(--font-paragraph-em-family);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: 1;
+  user-select: none;
+}
+
+/* Sizes — matching Avatar's ladder */
+
+.ds-avatar-group--sm .ds-avatar-group__overflow {
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+}
+
+.ds-avatar-group--md .ds-avatar-group__overflow {
+  width: 40px;
+  height: 40px;
+  font-size: 14px;
+}
+
+.ds-avatar-group--lg .ds-avatar-group__overflow {
+  width: 56px;
+  height: 56px;
+  font-size: 18px;
+}

package/components/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+/** Props owned by AvatarGroup itself — everything else falls through to the root div. */
+type AvatarGroupOwnProps = {
+    /** The avatars to stack, in display order — normally `Avatar` elements. */
+    children: React.ReactNode;
+    /** Avatars shown before the rest collapse into a "+N" counter. */
+    max?: number;
+    /**
+     * Size applied to every avatar in the stack and to the overflow counter.
+     * Cloned onto the children so the group cannot render mixed sizes.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Accessible label for the overflow counter. Defaults to "N more" —
+     * override it to localise or add context, e.g. "4 more reviewers".
+     */
+    overflowLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface AvatarGroupProps extends AvatarGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof AvatarGroupOwnProps> {
+}
+/**
+ * AvatarGroup — an overlapping stack of avatars with a "+N" counter for the
+ * overflow, the "who's here" affordance in collaboration UIs. Purely
+ * presentational: it lays out the `Avatar` children it is given (forcing a
+ * uniform size onto them) and counts the rest, so it renders from a Server
+ * Component. Each avatar carries a page-coloured ring so the overlaps stay
+ * legible on any surface.
+ */
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./AvatarGroup.css";
+const AvatarGroup = React.forwardRef(
+  ({ children, max = 5, size = "md", overflowLabel, className = "", ...rest }, ref) => {
+    const baseClass = "ds-avatar-group";
+    const classes = [baseClass, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+    const allChildren = React.Children.toArray(children);
+    const visible = allChildren.slice(0, Math.max(max, 0));
+    const overflow = allChildren.length - visible.length;
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, role: "group", children: [
+      visible.map((child, index) => /* @__PURE__ */ jsx("span", { className: `${baseClass}__item`, children: React.isValidElement(child) ? React.cloneElement(child, { size }) : child }, index)),
+      overflow > 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `${baseClass}__item ${baseClass}__overflow`,
+          role: "img",
+          "aria-label": overflowLabel ?? `${overflow} more`,
+          children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+            "+",
+            overflow
+          ] })
+        }
+      )
+    ] });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+export {
+  AvatarGroup
+};

package/components/FilterBar/FilterBar.css

@@ -0,0 +1,202 @@
+/* ============================================
+   FILTER BAR COMPONENT
+   A row of filter chips, each opening a
+   popover listbox. The chips share Chip's pill
+   language; active state uses the teal fill
+   convention from Chip's selected state.
+   ============================================ */
+
+/* Base */
+
+.ds-filter-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--gap-sm);
+}
+
+.ds-filter-bar__filter {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Chip shell — the pill holding the trigger and the clear button */
+
+.ds-filter-bar__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  padding: var(--padding-xs) var(--padding-sm-md);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-page-primary);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  transition:
+    background-color var(--motion-duration-base) var(--motion-ease-standard),
+    border-color var(--motion-duration-base) var(--motion-ease-standard),
+    color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-filter-bar--compact .ds-filter-bar__chip {
+  gap: var(--gap-xs);
+  padding: var(--padding-xxxs) var(--padding-sm);
+}
+
+.ds-filter-bar__chip:hover:not(.ds-filter-bar__chip--active) {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-filter-bar__chip--open:not(.ds-filter-bar__chip--active) {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+/* Active — teal fill, matching Chip's selected convention */
+
+.ds-filter-bar__chip--active {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-filter-bar__chip--active:hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* Trigger + clear share the shell's typography and colour */
+
+.ds-filter-bar__trigger,
+.ds-filter-bar__chip-clear {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.ds-filter-bar__trigger:focus-visible,
+.ds-filter-bar__chip-clear:focus-visible,
+.ds-filter-bar__clear-all:focus-visible {
+  outline: var(--border-md) solid var(--color-action-primary-bg);
+  outline-offset: var(--gap-xxs);
+  border-radius: var(--radius-full);
+}
+
+.ds-filter-bar__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+}
+
+.ds-filter-bar__caret {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-filter-bar__chip--open .ds-filter-bar__caret {
+  transform: rotate(180deg);
+}
+
+.ds-filter-bar__chip-clear {
+  flex-shrink: 0;
+  border-radius: var(--radius-full);
+}
+
+.ds-filter-bar__chip-clear .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+}
+
+/* Popover listbox */
+
+.ds-filter-bar__panel {
+  position: absolute;
+  top: calc(100% + var(--gap-xxs));
+  left: 0;
+  z-index: 10;
+  min-width: 100%;
+  max-height: 280px;
+  overflow-y: auto;
+  margin: 0;
+  padding: var(--padding-xxs);
+  list-style: none;
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-container-primary);
+  box-shadow: var(--shadow-floating);
+}
+
+.ds-filter-bar__option {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  padding: var(--padding-xs) var(--padding-sm);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-filter-bar__option:hover,
+.ds-filter-bar__option--focused {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-filter-bar__option--selected {
+  color: var(--color-text-primary);
+}
+
+.ds-filter-bar__option-check {
+  flex-shrink: 0;
+  width: var(--icon-size-sm);
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+  color: var(--color-action-primary-bg);
+}
+
+/* Clear all */
+
+.ds-filter-bar__clear-all {
+  margin: 0;
+  padding: var(--padding-xs) var(--padding-sm);
+  border: none;
+  background: none;
+  border-radius: var(--radius-full);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-filter-bar__clear-all:hover {
+  color: var(--color-text-primary);
+}
+
+/* Icons take the colour of the text around them (see Chip.css for why
+   this is explicit rather than inherited). */
+.ds-filter-bar .material-symbols-rounded {
+  color: inherit;
+}

package/components/FilterBar/FilterBar.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+/** One choice inside a filter's popover. */
+export interface FilterBarOption {
+    /** Stored value, reported through `onValuesChange`. */
+    value: string;
+    /** Display label. */
+    label: string;
+}
+/** One filter: a chip on the bar with a popover of options behind it. */
+export interface FilterBarFilter {
+    /** Stable key for this filter — the key under which its values are reported. */
+    id: string;
+    /** Chip label, e.g. "Status". */
+    label: string;
+    /** Material Symbol icon name shown before the label. */
+    icon?: string;
+    /** The choices this filter offers. */
+    options: FilterBarOption[];
+    /** Whether several options can be active at once. Single-select closes on choice. */
+    multiple?: boolean;
+}
+/** Props owned by FilterBar itself — everything else falls through to the root div. */
+type FilterBarOwnProps = {
+    /** The filters on the bar, in display order. */
+    filters: FilterBarFilter[];
+    /** Active options per filter id (controlled). Pair with `onValuesChange`. */
+    values?: Record<string, string[]>;
+    /** Active options per filter id (uncontrolled initial state). */
+    defaultValues?: Record<string, string[]>;
+    /**
+     * Fires with the full active-filter map on every change. Filters with
+     * nothing active are absent from the map, so an empty object means
+     * unfiltered.
+     */
+    onValuesChange?: (values: Record<string, string[]>) => void;
+    /** Label for the button that clears every filter at once. */
+    clearLabel?: string;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface FilterBarProps extends FilterBarOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FilterBarOwnProps | 'children'> {
+}
+/**
+ * FilterBar — a row of filter chips for narrowing a collection: each chip
+ * opens a popover of options, active filters show their choice and grow a
+ * clear button, and a clear-all appears once anything is active. State is one
+ * map of filter id to active values, controlled or uncontrolled, so wiring it
+ * to a DataTable is a single callback. Popovers are real listboxes: arrow
+ * keys move, Enter and Space toggle, Escape closes, focus never leaves the
+ * chip.
+ */
+export declare const FilterBar: React.ForwardRefExoticComponent<FilterBarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/FilterBar/FilterBar.js

@@ -0,0 +1,249 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useState, useRef, useCallback, useEffect } from "react";
+import "./FilterBar.css";
+import "../../fonts/material-symbols.css";
+const FilterBar = React.forwardRef(
+  ({
+    filters,
+    values,
+    defaultValues,
+    onValuesChange,
+    clearLabel = "Clear all",
+    size = "default",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-filter-bar";
+    const generatedId = useId();
+    const [uncontrolledValues, setUncontrolledValues] = useState(
+      defaultValues ?? {}
+    );
+    const [openId, setOpenId] = useState(null);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const filterRefs = useRef(/* @__PURE__ */ new Map());
+    const activeValues = values ?? uncontrolledValues;
+    const applyValues = (next) => {
+      if (values === void 0) setUncontrolledValues(next);
+      onValuesChange?.(next);
+    };
+    const closePopover = useCallback(() => {
+      setOpenId(null);
+      setFocusedIndex(-1);
+    }, []);
+    useEffect(() => {
+      if (!openId) return;
+      const handler = (e) => {
+        const node = filterRefs.current.get(openId);
+        if (node && !node.contains(e.target)) closePopover();
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, [openId, closePopover]);
+    const toggleOption = (filter, optionValue) => {
+      const current = activeValues[filter.id] ?? [];
+      let nextForFilter;
+      if (filter.multiple === false) {
+        nextForFilter = current[0] === optionValue ? [] : [optionValue];
+      } else {
+        nextForFilter = current.includes(optionValue) ? current.filter((v) => v !== optionValue) : [...current, optionValue];
+      }
+      const next = { ...activeValues };
+      if (nextForFilter.length > 0) next[filter.id] = nextForFilter;
+      else delete next[filter.id];
+      applyValues(next);
+      if (filter.multiple === false) closePopover();
+    };
+    const clearFilter = (filterId) => {
+      const next = { ...activeValues };
+      delete next[filterId];
+      applyValues(next);
+      if (openId === filterId) closePopover();
+    };
+    const handleTriggerClick = (filter) => {
+      setFocusedIndex(-1);
+      setOpenId((current) => current === filter.id ? null : filter.id);
+    };
+    const handleTriggerKeyDown = (e, filter) => {
+      const isOpen = openId === filter.id;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (!isOpen) {
+            setOpenId(filter.id);
+            setFocusedIndex(0);
+          } else if (focusedIndex >= 0) {
+            toggleOption(filter, filter.options[focusedIndex].value);
+          } else {
+            closePopover();
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) {
+            setOpenId(filter.id);
+            setFocusedIndex(0);
+          } else {
+            setFocusedIndex((prev) => Math.min(prev + 1, filter.options.length - 1));
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (isOpen) setFocusedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Home":
+          if (isOpen) {
+            e.preventDefault();
+            setFocusedIndex(0);
+          }
+          break;
+        case "End":
+          if (isOpen) {
+            e.preventDefault();
+            setFocusedIndex(filter.options.length - 1);
+          }
+          break;
+        case "Escape":
+        case "Tab":
+          closePopover();
+          break;
+      }
+    };
+    const summarize = (filter) => {
+      const active = activeValues[filter.id] ?? [];
+      if (active.length === 0) return filter.label;
+      if (active.length === 1) {
+        const option = filter.options.find((o) => o.value === active[0]);
+        return `${filter.label}: ${option?.label ?? active[0]}`;
+      }
+      return `${filter.label}: ${active.length}`;
+    };
+    const anyActive = filters.some((f) => (activeValues[f.id] ?? []).length > 0);
+    const classes = [baseClass, size === "compact" && `${baseClass}--compact`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      filters.map((filter) => {
+        const isOpen = openId === filter.id;
+        const active = activeValues[filter.id] ?? [];
+        const isActive = active.length > 0;
+        const listboxId = `${generatedId}-${filter.id}-listbox`;
+        const activeDescendant = isOpen && focusedIndex >= 0 ? `${generatedId}-${filter.id}-option-${focusedIndex}` : void 0;
+        const chipClasses = [
+          `${baseClass}__chip`,
+          isActive && `${baseClass}__chip--active`,
+          isOpen && `${baseClass}__chip--open`
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `${baseClass}__filter`,
+            ref: (node) => {
+              if (node) filterRefs.current.set(filter.id, node);
+              else filterRefs.current.delete(filter.id);
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: chipClasses, children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: `${baseClass}__trigger`,
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": isOpen,
+                    "aria-controls": isOpen ? listboxId : void 0,
+                    "aria-activedescendant": activeDescendant,
+                    onClick: () => handleTriggerClick(filter),
+                    onKeyDown: (e) => handleTriggerKeyDown(e, filter),
+                    children: [
+                      filter.icon && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${baseClass}__icon material-symbols-rounded`,
+                          "aria-hidden": "true",
+                          children: filter.icon
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary`, children: summarize(filter) }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${baseClass}__caret material-symbols-rounded`,
+                          "aria-hidden": "true",
+                          children: "expand_more"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                isActive && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `${baseClass}__chip-clear`,
+                    "aria-label": `Clear ${filter.label}`,
+                    onClick: () => clearFilter(filter.id),
+                    children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+                  }
+                )
+              ] }),
+              isOpen && /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  id: listboxId,
+                  className: `${baseClass}__panel`,
+                  role: "listbox",
+                  "aria-label": filter.label,
+                  "aria-multiselectable": filter.multiple !== false || void 0,
+                  children: filter.options.map((option, index) => {
+                    const selected = active.includes(option.value);
+                    const optionClasses = [
+                      `${baseClass}__option`,
+                      selected && `${baseClass}__option--selected`,
+                      index === focusedIndex && `${baseClass}__option--focused`
+                    ].filter(Boolean).join(" ");
+                    return /* @__PURE__ */ jsxs(
+                      "li",
+                      {
+                        id: `${generatedId}-${filter.id}-option-${index}`,
+                        className: optionClasses,
+                        role: "option",
+                        "aria-selected": selected,
+                        onClick: () => toggleOption(filter, option.value),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: `${baseClass}__option-check material-symbols-rounded`,
+                              "aria-hidden": "true",
+                              children: selected ? "check" : ""
+                            }
+                          ),
+                          option.label
+                        ]
+                      },
+                      option.value
+                    );
+                  })
+                }
+              )
+            ]
+          },
+          filter.id
+        );
+      }),
+      anyActive && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__clear-all`,
+          onClick: () => applyValues({}),
+          children: clearLabel
+        }
+      )
+    ] });
+  }
+);
+FilterBar.displayName = "FilterBar";
+export {
+  FilterBar
+};