@pnx-mixtape/mxds 0.0.30 → 0.1.0-rc.0

package/src/Component/Filters/README.md

@@ -0,0 +1,389 @@
+# Filters
+
+A search/refinement form built from a collection of `FilterItem`s. Supports live per-item counters, a total counter that enables/disables Apply/Clear buttons, "show all" toggling for long option lists, a mobile-only collapsed state (via `AccordionMobile`), and an optional off-canvas "slide from right" mobile drawer.
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Component/Filters/filters.css";
+/* Filters re-uses Accordion and Form styles. */
+@import "@pnx-mixtape/mxds/src/Component/Accordion/accordion.css";
+@import "@pnx-mixtape/mxds/src/Form/form.css";
+```
+
+**Import the JS** (registers `<mx-filters>`, `<mx-accordion>`, `<mx-accordionmobile>`):
+
+```js
+import "@pnx-mixtape/mxds/src/Component/Filters/filters.entry.js"
+```
+
+---
+
+## Twig
+
+```twig
+{% include '@mixtape/Component/Filters/filters.twig' with {
+  title: 'Filters',
+  action: '/search',
+  collapsible: true,
+  counter: true,
+  direction: 'down',
+  items: [
+    filter_item_1,
+    filter_item_2,
+  ],
+  actions: [
+    apply_button,
+    reset_button,
+  ],
+} %}
+```
+
+**`filters.twig` props** (`Filters` type from `ids-shape`):
+
+| Prop          | Type                         | Required | Default   | Description                                                                                                     |
+| ------------- | ---------------------------- | -------- | --------- | --------------------------------------------------------------------------------------------------------------- |
+| `title`       | `string`                     | yes      | `Filters` | Title shown above the form, and used as the collapsed accordion summary on mobile                               |
+| `action`      | `string`                     | yes      | —         | The form `action` attribute                                                                                     |
+| `items`       | `FilterItem[] \| Collection` | yes      | —         | Rendered FilterItem strings                                                                                     |
+| `actions`     | `Button[] \| Collection`     | —        | —         | Submit/reset buttons rendered inside `.mx-form-actions`                                                         |
+| `collapsible` | `boolean`                    | —        | `false`   | Wraps the whole component in `<mx-accordionmobile>` so it collapses below `720px` and stays open above it       |
+| `counter`     | `boolean`                    | —        | `false`   | Shows a total-count tag next to the title (requires `collapsible`)                                              |
+| `direction`   | `"down" \| "right"`          | —        | `"down"`  | On mobile: `down` collapses vertically, `right` slides in from the right as a full-height drawer                |
+| `instant`     | `boolean`                    | —        | `false`   | Adds `mx-filters--auto` — indicates the form is submitted on change (you must wire that up yourself, e.g. AJAX) |
+| `sticky`      | `boolean`                    | —        | `false`   | Adds `mx-filters--sticky` for sticky positioning on desktop                                                     |
+
+**`filter-item.twig` props** (`FilterItem` type from `ids-shape` — extends `FormItem`):
+
+```twig
+{% include '@mixtape/Component/Filters/filter-item.twig' with {
+  id: 'filter-categories',
+  as: 'fieldset',
+  collapsible: {
+    title: 'Categories',
+    counter: true,
+    open: true,
+  },
+  shownItems: 5,
+  fields: [ checkbox_1, checkbox_2, ... ],
+} %}
+```
+
+| Prop               | Type                       | Required | Default | Description                                                                                                                                                                |
+| ------------------ | -------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`               | `string`                   | yes      | —       | Item id; when `collapsible` is set, used on the inner `<details id="{id}-container">`                                                                                      |
+| `fields`           | `FormInput \| FormInput[]` | yes      | —       | One or many form controls (`FormText`, `FormTextArea`, `FormSelect`, `FormControl`)                                                                                        |
+| `label`            | `FormLabel`                | —        | —       | Optional Label component. Omit when `collapsible` is set — use the input's `aria-label` instead, since the accordion summary already labels the group                      |
+| `descriptionStart` | `FormDescription`          | —        | —       | Description rendered before the fields                                                                                                                                     |
+| `descriptionEnd`   | `FormDescription`          | —        | —       | Description rendered after the fields                                                                                                                                      |
+| `status`           | `FormStatus`               | —        | —       | Validation/status message rendered after the fields                                                                                                                        |
+| `as`               | `"div" \| "fieldset"`      | —        | `"div"` | Wrap in a `<fieldset>` (with `mx-fieldset`) for checkbox/radio groups                                                                                                      |
+| `inline`           | `boolean`                  | —        | `false` | Adds `mx-form-item--inline`                                                                                                                                                |
+| `collapsible`      | `Collapsible`              | —        | —       | When set, wraps the item in `<mx-accordion>` / `<details>` — see below                                                                                                     |
+| `shownItems`       | `number`                   | —        | —       | Show only the first N `fields`; the rest are placed in a `<div data-hide>` with a "Show all ({{count}})" toggle button. Requires the parent `<mx-filters>` JS to function. |
+
+**`collapsible` object** (`Collapsible` type):
+
+| Prop      | Type      | Description                                                                                    |
+| --------- | --------- | ---------------------------------------------------------------------------------------------- |
+| `title`   | `string`  | Summary label for the accordion toggle                                                         |
+| `counter` | `boolean` | Render a `<span data-counter>` tag inside the summary (populated by the parent `<mx-filters>`) |
+| `open`    | `boolean` | Set the `<details>` `open` attribute by default                                                |
+
+---
+
+## HTML
+
+The `<mx-filters>` custom element wraps a `<form>` and enhances it with:
+
+- A running count attribute (`count`) — total number of fields with values, drives `disabled` on submit/reset
+- Per-item counters — any `.mx-filter-item` with a `[data-counter]` span gets its selected-option count written in
+- A total counter — any `[data-counters]` span inside the wrapper gets the total written in
+- "Show all" toggling for items with `[data-show]` + `[data-hide]`
+- Close handler for the right-drawer variant (`[data-close]`)
+
+### Standard (always visible) filters
+
+```html
+<mx-filters class="mx-filters">
+  <h2 class="mx-filters__title">Filters</h2>
+
+  <form class="mx-filters__form mx-vertical-flow" action="/search">
+    <div class="mx-form-item mx-filter-item">
+      <label class="mx-label" for="filter-keywords">Keywords</label>
+      <input class="mx-input__text" id="filter-keywords" name="keywords" type="text" />
+    </div>
+
+    <fieldset class="mx-form-item mx-fieldset mx-filter-item">
+      <legend class="mx-legend">Categories</legend>
+      <div class="mx-checkbox">
+        <input id="cat-news" type="checkbox" name="categories" value="news" />
+        <label for="cat-news">News</label>
+      </div>
+      <!-- more checkboxes -->
+    </fieldset>
+
+    <div class="mx-form-actions">
+      <button class="mx-button mx-button--dark" type="submit">Apply filters</button>
+      <button class="mx-button mx-button--light" type="reset">Clear all filters</button>
+    </div>
+  </form>
+</mx-filters>
+```
+
+### Collapsible on mobile (with counter) — wraps in `<mx-accordionmobile>`
+
+```html
+<mx-filters class="mx-filters mx-filters--down">
+  <mx-accordionmobile>
+    <details class="mx-accordion">
+      <summary class="mx-accordion__toggle mx-filters__title">
+        Filters
+        <span class="mx-tag" data-counters></span>
+        <span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span>
+      </summary>
+
+      <form class="mx-filters__form mx-vertical-flow" action="/search">
+        <!-- FilterItems that are themselves <mx-accordion> entries -->
+        <mx-accordion>
+          <details class="mx-accordion mx-filter-item" id="filter-categories-container" open>
+            <summary class="mx-accordion__toggle">
+              Categories
+              <span class="mx-tag" data-counter></span>
+              <span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span>
+            </summary>
+            <fieldset class="mx-form-item mx-fieldset mx-accordion__content">
+              <!-- checkboxes -->
+            </fieldset>
+          </details>
+        </mx-accordion>
+
+        <div class="mx-form-actions">
+          <button class="mx-button mx-button--dark" type="submit">Apply filters</button>
+          <button class="mx-button mx-button--light" type="reset">Clear all filters</button>
+        </div>
+      </form>
+    </details>
+  </mx-accordionmobile>
+</mx-filters>
+```
+
+### Off-canvas mobile drawer (`mx-filters--right`)
+
+Slides in from the right on mobile; renders normally on desktop. Requires an in-form `[data-close]` button.
+
+```html
+<mx-filters class="mx-filters mx-filters--right">
+  <mx-accordionmobile>
+    <details class="mx-accordion">
+      <summary class="mx-accordion__toggle mx-filters__title">
+        Filters
+        <span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span>
+      </summary>
+
+      <form class="mx-filters__form mx-vertical-flow" action="/search">
+        <div class="mx-filters__title">
+          Filters
+          <button class="mx-button mx-button--icon-only mx-icon mx-icon--close" data-close>
+            Close filters
+          </button>
+        </div>
+        <!-- items, actions -->
+      </form>
+    </details>
+  </mx-accordionmobile>
+</mx-filters>
+```
+
+### Show all (for long checkbox/radio lists)
+
+Wrap overflow options in `<div data-hide>` and add a `<button data-show>` after. The JS hides the wrapper with `hidden="until-found"` on mount and unhides it when the button is clicked.
+
+```html
+<fieldset class="mx-form-item mx-fieldset mx-filter-item">
+  <legend class="mx-legend">Categories</legend>
+  <!-- first N visible items -->
+  <div data-hide>
+    <!-- overflow items -->
+  </div>
+  <button data-show class="mx-button mx-button--light" type="button">Show all (12)</button>
+</fieldset>
+```
+
+---
+
+## React
+
+```tsx
+import { Filters, FilterItem } from "@pnx-mixtape/mxds/react"
+import { FormLabel, FormCheckbox, FormText, FormDescription } from "@pnx-mixtape/mxds/react"
+;<Filters
+  title="Filters"
+  action="/search"
+  collapsible
+  counter
+  direction="down"
+  items={[
+    <FilterItem
+      id="filter-keywords"
+      label={<FormLabel id="filter-keywords" text="Keywords" />}
+      fields={[<FormText id="filter-keywords" name="keywords" aria-label="Keywords" />]}
+      descriptionStart={<FormDescription id="filter-keywords" description="Search by keywords" />}
+    />,
+    <FilterItem
+      id="filter-categories"
+      name="categories"
+      as="fieldset"
+      collapsible={{ title: "Categories", counter: true, open: true }}
+      fields={[
+        <FormCheckbox id="cat-news" name="categories" value="news" label="News" />,
+        <FormCheckbox id="cat-media" name="categories" value="media" label="Media Releases" />,
+      ]}
+    />,
+  ]}
+  actions={[
+    <button type="submit" className="mx-button mx-button--dark">
+      Apply filters
+    </button>,
+    <button type="reset" className="mx-button mx-button--light">
+      Clear all filters
+    </button>,
+  ]}
+/>
+```
+
+Active-filter counts are tracked via `FormData` on the form's `onChange` event. Submit and reset buttons should be typed `type="submit"` and `type="reset"` respectively — no `onClick` handlers are needed.
+
+### `useFiltersContext`
+
+`FilterItem` components read their per-item count from `FiltersContext`. The context is provided automatically by `<Filters>`. If you render a `FilterItem` outside of `<Filters>`, counter badges will not appear (the context gracefully returns empty counts).
+
+```ts
+import { useFiltersContext } from "@pnx-mixtape/mxds"
+const { counts } = useFiltersContext() // Map<fieldName, activeCount>
+```
+
+**`<Filters>` props:**
+
+| Prop          | Type               | Default | Description                                                                                                |
+| ------------- | ------------------ | ------- | ---------------------------------------------------------------------------------------------------------- |
+| `title`       | `string`           | —       | Title shown above the form / inside the collapsible `<summary>`                                            |
+| `action`      | `string`           | —       | `action` on the `<form>`                                                                                   |
+| `items`       | `ReactNode[]`      | —       | `FilterItem` components to render inside the form                                                          |
+| `actions`     | `ReactNode[]`      | —       | Submit/reset buttons rendered inside `.mx-form-actions`                                                    |
+| `collapsible` | `boolean`          | `false` | Wraps title + form in a `<details>` accordion — collapses on mobile                                        |
+| `counter`     | `boolean`          | `false` | Shows a total active-filter count tag next to the title                                                    |
+| `direction`   | `"down"`           | —       | Layout variant. `"right"` (off-canvas drawer) is not yet supported — requires AccordionMobile React parity |
+| `instant`     | `boolean`          | `false` | Adds `mx-filters--auto` CSS class (wire auto-submit behaviour yourself)                                    |
+| `sticky`      | `boolean`          | `false` | Adds `mx-filters--sticky` for sticky desktop positioning                                                   |
+| `onSubmit`    | `FormEventHandler` | —       | Form submit handler                                                                                        |
+| `onReset`     | `FormEventHandler` | —       | Form reset handler (also clears internal counts)                                                           |
+| `className`   | `string`           | —       | Extra class on the outer `<div>`                                                                           |
+| `children`    | `ReactNode`        | —       | Rendered inside the form alongside `items`                                                                 |
+
+**`<FilterItem>` props:**
+
+| Prop               | Type                                                   | Default | Description                                                                                                                  |
+| ------------------ | ------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `id`               | `string`                                               | —       | `id` on the inner form element                                                                                               |
+| `name`             | `string`                                               | —       | Form field name — used to look up this item's active count from `FiltersContext` for the counter badge                       |
+| `as`               | `"div" \| "fieldset"`                                  | `"div"` | Element type for the inner form wrapper                                                                                      |
+| `label`            | `ReactNode`                                            | —       | `FormLabel` or `<legend>` element                                                                                            |
+| `fields`           | `ReactNode[]`                                          | —       | Form inputs (checkboxes, radios, text, select)                                                                               |
+| `descriptionStart` | `ReactNode`                                            | —       | `FormDescription` rendered above the fields                                                                                  |
+| `descriptionEnd`   | `ReactNode`                                            | —       | `FormDescription` rendered below the fields                                                                                  |
+| `status`           | `ReactNode`                                            | —       | Status/error message                                                                                                         |
+| `shownItems`       | `number`                                               | —       | Truncate `fields` to N items with a "Show all" toggle                                                                        |
+| `inline`           | `boolean`                                              | `false` | Adds `mx-form-item--inline`                                                                                                  |
+| `collapsible`      | `{ title: string; open?: boolean; counter?: boolean }` | —       | Wraps the item in an `Accordion` with the given title. Set `counter: true` with a `name` prop to show a per-item count badge |
+| `children`         | `ReactNode`                                            | —       | Used when `fields` is empty — renders directly inside the form element                                                       |
+
+---
+
+## Modifiers
+
+| Class                | Prop value                                 | Visual intent                                                                             |
+| -------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------- |
+| `mx-filters`         | (base)                                     | Default static layout: title + form, always visible                                       |
+| `mx-filters--down`   | `direction: "down"` + `collapsible: true`  | Mobile-only accordion collapse, chevron rotates vertically                                |
+| `mx-filters--right`  | `direction: "right"` + `collapsible: true` | Mobile-only off-canvas drawer sliding from the right                                      |
+| `mx-filters--auto`   | `instant: true`                            | Flags a form that submits automatically on change (style hook; behaviour is app-supplied) |
+| `mx-filters--sticky` | `sticky: true`                             | Sticky positioning hook on desktop                                                        |
+
+FilterItem classes:
+
+| Class                   | Applied when                                                                   | Purpose                                                                                 |
+| ----------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- |
+| `mx-filter-item`        | always (when not `collapsible`) or on the inner `<details>` when `collapsible` | Marks the element the parent `<mx-filters>` JS scans for counters                       |
+| `mx-form-item`          | always                                                                         | Base form-item layout                                                                   |
+| `mx-fieldset`           | `as: "fieldset"`                                                               | Fieldset visual treatment                                                               |
+| `mx-accordion__content` | `collapsible` is set                                                           | Applied to the inner form-item instead of `mx-filter-item` when wrapped in an accordion |
+
+There is no standalone `modifiers` enum for Filters in `ids-shape` — all variants are driven by the boolean / string props above.
+
+---
+
+## Accessibility
+
+- The outer title is a real `<h2>` in the static variant, or a `<summary>` inside `<details>` in the collapsible variant — both are discoverable by assistive tech
+- When `collapsible: true`, the chevron icon is `aria-hidden="true"` — the `<details>`/`<summary>` native semantics convey expand/collapse state
+- When a FilterItem uses `collapsible`, the inner `<fieldset>` is wrapped in its own `<details>` inside `<mx-accordion>`; omit `label` on that item so the `<summary>` (not a duplicate label) names the group — expose the individual input label via `aria-label`
+- The close button in the right-drawer variant has visible text ("Close filters") even when shown as icon-only, so screen readers announce it
+- Apply and Clear buttons are disabled (via the `disabled` attribute) until at least one filter has a value — the `<mx-filters>` JS manages this by reading its own `count` attribute
+- "Show all" uses `hidden="until-found"` so that in-page search (Chrome's Ctrl/Cmd+F) can reveal hidden options automatically
+
+---
+
+## Customisation via CSS custom properties
+
+```css
+.mx-filters {
+  --gap: var(--gap-m); /* grid gap between title, form, and items */
+}
+
+.mx-filters__title {
+  --heading-font-size: var(--font-size-l);
+  --font-size-diff: 0.3; /* fluid font-size range */
+}
+
+/* Right-drawer variant on mobile uses: */
+.mx-filters--right {
+  --background: var(--colour-background);
+  --gutter: clamp(var(--spacing-s), 6vw, var(--spacing-l));
+  --block-padding: var(--gap);
+}
+```
+
+---
+
+## Responsive behaviour
+
+Filters relies on **`<mx-accordionmobile>`** (from the Accordion component) for its mobile collapse. It's the same web component used as a "mobile-only accordion" elsewhere — it wraps a `<details>` element and:
+
+- Adds `open=""` to the `<details>` when the viewport is **above** the breakpoint
+- Removes `open` when the viewport is **below** the breakpoint (so the user must tap the summary to expand)
+- Listens to the `MediaQueryList` and toggles on resize
+
+**Breakpoint:** defaults to `(max-width: 720px)` — i.e. `--medium-down` in the token system (`breakpoint.m = 720px`). Override per-instance with the `mq` attribute:
+
+```html
+<mx-accordionmobile mq="(max-width: 540px)"> ... </mx-accordionmobile>
+```
+
+**How `mx-filters--down` renders across breakpoints:**
+
+| Viewport   | Behaviour                                                                                                                                                                                                                         |
+| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `< 720px`  | `<details>` is closed by default — user taps the title to expand/collapse. Chevron is visible. Per-item counters and the total counter are visible.                                                                               |
+| `>= 720px` | `<details>` is forced open; the title's pointer events are disabled and the chevron is hidden (via CSS `&:defined`). Total counter hides on desktop (it's only useful when the form is collapsed). Behaves like a static sidebar. |
+
+**How `mx-filters--right` renders across breakpoints:**
+
+| Viewport   | Behaviour                                                                                                                                                                                                                                      |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `< 720px`  | The form becomes a fixed full-viewport overlay (`position: fixed; inset: 0`) that transitions in from `translateX(100%)`. A `[data-close]` button inside the form closes the drawer. The outer `<summary>` acts as the "Open filters" trigger. |
+| `>= 720px` | The outer `.mx-filters__title` (the summary) is displayed, the inner drawer-header `.mx-filters__title` is hidden, and the form renders statically like `--down`.                                                                              |
+
+**Individual FilterItems** always use the standard `<mx-accordion>` (not `mx-accordionmobile`) when `collapsible` is set — meaning they can be individually collapsed/expanded by the user at any viewport size.
+
+**Before the custom elements upgrade** (`&:not(:defined)`), the CSS includes fallbacks so the native `<details>` still works without JS: `[data-show]` wrappers are hidden, and the chevron rotates based on the `<details>` `open` state.

package/src/Component/Filters/__snapshots__/FilterItem.stories.ts.snap

@@ -12,25 +12,23 @@ exports[`Collapsible 1`] = `
 <fieldset class="mx-form-item mx-fieldset mx-accordion__content">
   
   
-                    
+      
 <div class="mx-checkbox">
   <input id="category-news" type="checkbox" name="categories" value="news" checked="checked">
   <label for="category-news">News</label>
 </div>
 
-              
 <div class="mx-checkbox">
   <input id="category-media" type="checkbox" name="categories" value="media" checked="checked">
   <label for="category-media">Media Releases</label>
 </div>
 
-              
 <div class="mx-checkbox">
   <input id="category-publications" type="checkbox" name="categories" value="publications">
   <label for="category-publications">Publications</label>
 </div>
 
-              
+    
   
 </fieldset>
 
@@ -44,9 +42,11 @@ exports[`Filters 1`] = `
 
 <div class="mx-form-item mx-filter-item">
     
-<label class="mx-label" for="filter-keywords">Keywords</label>
+<label class="mx-label" for="filter-keywords">
+  Keywords
+  </label>
 
-  <div class="mx-description" id="unique-0" role="tooltip">
+  <div class="mx-description" id="unique-0">
   Search by keywords
 </div>
 
@@ -65,28 +65,32 @@ exports[`Shown Items 1`] = `
 
 <fieldset class="mx-form-item mx-fieldset mx-filter-item">
     
-<label class="mx-label" for="filter-categories">Categories</label>
+<label class="mx-label" for="filter-categories">
+  Categories
+  </label>
 
   
-                    
+      
 <div class="mx-checkbox">
   <input id="category-news" type="checkbox" name="categories" value="news" checked="checked">
   <label for="category-news">News</label>
 </div>
-              
+
 <div class="mx-checkbox">
   <input id="category-media" type="checkbox" name="categories" value="media" checked="checked">
   <label for="category-media">Media Releases</label>
 </div>
-                          <div data-hide="">
-                                                      
+
+    <div data-hide="">
+      
 <div class="mx-checkbox">
   <input id="category-publications" type="checkbox" name="categories" value="publications">
   <label for="category-publications">Publications</label>
 </div>
-              </div>
-      <button data-show="" class="mx-button mx-button--light" type="button">Show all (3)</button>
-        
+
+    </div>
+    <button data-show="" class="mx-button mx-button--light" type="button">Show all (3)</button>
+    
   
 </fieldset>
 

package/src/Component/Filters/__snapshots__/FilterItem.stories.tsx.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Collapsible 1`] = `"<div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-categories-container" aria-expanded="true">Categories<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-categories-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><div class="mx-form-item mx-accordion__content" id="filter-categories"><fieldset class="mx-form-item mx-fieldset" aria-label="Categories" role="group" id="react-aria-_r_1_"><div class="mx-checkbox"><input id="_r_6_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_6_">News</label></div><div class="mx-checkbox"><input id="_r_9_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_9_">Media Releases</label></div><div class="mx-checkbox"><input id="_r_c_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="publications" name="categories"><label for="_r_c_">Publications</label></div></fieldset></div></section></div>"`;
+
+exports[`Filter Item Default 1`] = `"<div class="mx-form-item mx-filter-item" id="filter-keywords"><label class="mx-label" for="filter-keywords">Keywords</label><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div>"`;
+
+exports[`Shown Items 1`] = `"<div class="mx-form-item mx-filter-item" id="filter-categories"><label class="mx-label" for="filter-categories">Categories</label><fieldset class="mx-form-item mx-fieldset" aria-label="Categories" role="group" id="react-aria-_r_f_"><div class="mx-checkbox"><input id="_r_k_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_k_">News</label></div><div class="mx-checkbox"><input id="_r_n_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_n_">Media Releases</label></div><div class="mx-checkbox"><input id="_r_q_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="publications" name="categories"><label for="_r_q_">Publications</label></div></fieldset></div>"`;