@mcp-b/web-components 0.2.0

package/dist/search-list-Clmrg8EV.js

@@ -0,0 +1,884 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { exactSearch, fuzzySearch } from "@mcp-b/wc-support/utilities/search";
+//#region src/components/search-list/search-list.styles.ts
+var search_list_styles_default = css`
+  :host {
+    display: block;
+  }
+
+  slot[name="controller"]::slotted(input),
+  slot[name="controller"]::slotted(sigvelo-text-field) {
+    margin-block-end: 1em;
+  }
+
+  #items {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: 1em;
+  }
+`;
+//#endregion
+//#region src/components/search-list/search-list.ts
+/**
+* <sigvelo-search-list>
+*
+* @summary Queries a collection of items based on their content and keywords.
+* @tag sigvelo-search-list
+* @documentation https://design-system.sigvelo.com/docs/components/search-list
+* @status stable
+* @since 1.0
+*
+* @slot - One or more elements to be searched. Each element must be a direct descendent of the host, i.e. do not wrap
+*  items in other containers. If desired, you can apply flex and grid styles to the `items` part to control how items
+*  appear in the list. By default, items will be displayed in a flex column.
+* @slot controller - A `<sigvelo-text-field>` or `<input>` element that will control the search list.
+* @slot initial - Optional content to display when no search query has been entered.
+* @slot empty - Optional content to display when the search yields no results.
+*
+* @csspart items - The container that wraps the slotted items. Displays as a flex column by default.
+*
+* @cssstate empty - Applied when a query is entered and no matching results are found.
+* @cssstate initial - Applied when the query is empty and the `initial` slot is showing.
+*
+* @example Default
+* Search Lists provide real-time filtering of on-page content as the user types, supporting exact or fuzzy matching, custom keywords, and customizable empty states. The component works with just about any type of content and can be customized with different layouts and styling.
+*
+* ```html
+* <sigvelo-search-list match="fuzzy" id="search-list__overview">
+*   <!-- Controller -->
+*   <sigvelo-text-field
+*     slot="controller"
+*     label="Search cats"
+*     description="Results will update as you type"
+*     type="search"
+*     with-clear
+*     pill
+*   >
+*     <sigvelo-icon slot="start" name="search"></sigvelo-icon>
+*   </sigvelo-text-field>
+*
+*   <!-- Items -->
+*   <sigvelo-card orientation="horizontal">
+*     <sigvelo-avatar slot="header" image="https://images.unsplash.com/photo-1672487209629-4d52e0c043d0?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*     <div>
+*       <h4 class="name">Meowy McGee</h4>
+*       <div class="tagline">Freedom's just another word for nothing left to lose.</div>
+*     </div>
+*     <sigvelo-button slot="actions" icon-label="Settings" variant="ghost" pill>
+*       <sigvelo-icon name="dots"></sigvelo-icon>
+*     </sigvelo-button>
+*   </sigvelo-card>
+*
+*   <sigvelo-card orientation="horizontal">
+*     <sigvelo-avatar slot="header" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*     <div>
+*       <h4 class="name">Wonder Whiskers</h4>
+*       <div class="tagline">Living my best nine lives, one nap at a time.</div>
+*     </div>
+*     <sigvelo-button slot="actions" icon-label="Settings" variant="ghost" pill>
+*       <sigvelo-icon name="dots"></sigvelo-icon>
+*     </sigvelo-button>
+*   </sigvelo-card>
+*
+*   <sigvelo-card orientation="horizontal">
+*     <sigvelo-avatar slot="header" image="https://images.unsplash.com/photo-1569591159212-b02ea8a9f239?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*     <div>
+*       <h4 class="name">Maine Attraction</h4>
+*       <div class="tagline">Big fluff, bigger personality.</div>
+*     </div>
+*     <sigvelo-button slot="actions" icon-label="Settings" variant="ghost" pill>
+*       <sigvelo-icon name="dots"></sigvelo-icon>
+*     </sigvelo-button>
+*   </sigvelo-card>
+*
+*   <sigvelo-card orientation="horizontal">
+*     <sigvelo-avatar slot="header" image="https://images.unsplash.com/photo-1735820474275-dd0ff4f28d71?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*     <div>
+*       <h4 class="name">Sir Pounce-a-lot</h4>
+*       <div class="tagline">Professional sunbeam chaser and nap enthusiast.</div>
+*     </div>
+*     <sigvelo-button slot="actions" icon-label="Settings" variant="ghost" pill>
+*       <sigvelo-icon name="dots"></sigvelo-icon>
+*     </sigvelo-button>
+*   </sigvelo-card>
+*
+*   <!-- Empty state -->
+*   <sigvelo-empty-state slot="empty">
+*     <sigvelo-icon slot="illustration" name="cat"></sigvelo-icon>
+*     <p>No matching results</p>
+*   </sigvelo-empty-state>
+* </sigvelo-search-list>
+*
+* <style>
+*   #search-list__overview {
+*     sigvelo-card {
+*       --spacing: 1rem;
+*
+*       sigvelo-avatar {
+*         --size: 3rem;
+*       }
+*
+*       .name,
+*       .tagline {
+*         margin: 0;
+*         line-height: 1.2;
+*         display: inline;
+*       }
+*
+*       .name {
+*         display: block;
+*         font-size: 1.125rem;
+*       }
+*
+*       .tagline {
+*         color: var(--sigvelo-color-text-muted);
+*         font-size: 0.875rem;
+*       }
+*     }
+*
+*     div[slot="empty"] {
+*       text-align: center;
+*       color: var(--sigvelo-color-text-muted);
+*       margin-block-start: 1rem;
+*
+*       sigvelo-icon {
+*         font-size: 2.5rem;
+*         stroke-width: 1px;
+*       }
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Providing a controller and items
+* Every search list must have a search box, or _controller_, that maintains the query. Controllers can be `<sigvelo-text-field>` or native `<input>` elements. To link a controller, place it in the search list's `controller` slot or assign an external one. Make sure to add a label and description to ensure it's accessible.
+*
+* Searchable items can be just about any element, but they _must_ be direct descendants of the `<sigvelo-search-list>` element. By default, an item's text content will be used to determine a match, but you can also specify keywords. A case-insensitive search is performed by default, but basic fuzzy matching and custom matching are also available.
+*
+* As the user types in the controller, the search list will update and show the matching results. When no query is entered, all items are shown. An optional empty state can be provided to show a custom message when a query is entered and no matches are found.
+*
+* A minimal implementation looks something like this. Note the use of `label` and `description`, which are important for accessibility.
+*
+* ```html
+* <sigvelo-search-list>
+*   <!-- Controller -->
+*   <sigvelo-text-field
+*     slot="controller"
+*     label="Search"
+*     description="Results will update as you type"
+*   ></sigvelo-text-field>
+*
+*   <!-- Items -->
+*   <div>Item 1</div>
+*   <div>Item 2</div>
+*   <div>Item 3</div>
+* </sigvelo-search-list>
+* ```
+*
+* Here's an example using a native `<input>` element.
+*
+* ```html
+* <sigvelo-search-list>
+*   <!-- Controller -->
+*   <label slot="controller" for="search">Search</label>
+*   <input slot="controller" id="search" aria-description="Results will update as you type">
+*
+*   <!-- Items -->
+*   <div>Item 1</div>
+*   <div>Item 2</div>
+*   <div>Item 3</div>
+* </sigvelo-search-list>
+* ```
+*
+* Items aren't given any styles by the component — that part is up to you! The item's container, however, is styled as a flex column container by default. To change the layout, apply the desired CSS using the `::part(items)` selector. Both flex and grid layouts work really well here.
+*
+* Here is the example from above, modified with example styles.
+*
+* ```html
+* <sigvelo-search-list id="search-list__search">
+*   <sigvelo-text-field
+*     slot="controller"
+*     label="Search"
+*     description="Results will update as you type"
+*   ></sigvelo-text-field>
+*
+*   <div>Item 1</div>
+*   <div>Item 2</div>
+*   <div>Item 3</div>
+* </sigvelo-search-list>
+*
+* <style>
+*   #search-list__search {
+*     &::part(items) {
+*       display: grid;
+*       grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
+*     }
+*
+*     > div {
+*       border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-subtle);
+*       border-radius: var(--sigvelo-radius-md);
+*       background-color: var(--sigvelo-color-surface);
+*       box-shadow: var(--sigvelo-elevation-hairline);
+*       text-align: center;
+*       padding: 1rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* **Note:** Search lists are designed to listen for user input dispatched by their controllers. As such, canceling the controller's `input` event or programmatically modifying its value will cause the search list to get out of sync. In that case, you can use the `setQuery()` method to programmatically update the search list.
+*
+* @example Fuzzy matching
+* By default, the search list shows results based on case-insensitive, exact matches. For a more permissive search, add `match="fuzzy"` which is more forgiving to typos.
+*
+* ```html
+* <sigvelo-search-list match="fuzzy" id="search-list__fuzzy">
+*   <!-- Controller -->
+*   <sigvelo-text-field
+*     slot="controller"
+*     label="Search for names"
+*     type="search"
+*     with-clear
+*     pill
+*   >
+*     <sigvelo-icon slot="start" name="search"></sigvelo-icon>
+*   </sigvelo-text-field>
+*
+*   <!-- Items -->
+*   <div class="item">Luna</div>
+*   <div class="item">Oliver</div>
+*   <div class="item">Bella</div>
+*   <div class="item">Whiskers</div>
+*   <div class="item">Maple</div>
+*   <div class="item">Sushi</div>
+*   <div class="item">Pepper</div>
+*   <div class="item">Mittens</div>
+*   <div class="item">Shadow</div>
+*   <div class="item">Oreo</div>
+*   <div class="item">Mochi</div>
+*   <div class="item">Nova</div>
+*   <div class="item">Tiger</div>
+*   <div class="item">Ziggy</div>
+* </sigvelo-search-list>
+*
+* <style>
+*   #search-list__fuzzy {
+*     <!-- Style the items in a flex row -->
+*     &::part(items) {
+*       flex-direction: row;
+*       gap: 0.5rem;
+*     }
+*
+*     <!-- Custom item styles -->
+*     .item {
+*       border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-subtle);
+*       border-radius: var(--sigvelo-radius-full);
+*       background-color: var(--sigvelo-color-surface);
+*       box-shadow: var(--sigvelo-elevation-hairline);
+*       padding: 0.5rem 1rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* **Note:** For even more control over the matching algorithm, you can specific a [custom match function](#using-a-custom-match-function).
+*
+* @example Adding keywords
+* Add the `data-keywords` attribute to any item to include additional keywords the search list should match by. This is useful for adding terms you'd like the item to match on even when the term doesn't appear in regular content.
+*
+* ```html
+* <sigvelo-search-list id="search-list__keywords">
+*   <!-- Controller -->
+*   <sigvelo-text-field
+*     slot="controller"
+*     label="Search by color"
+*     description="e.g. brown, orange, white, gray, black"
+*     type="search"
+*     with-clear
+*     pill
+*   >
+*     <sigvelo-icon slot="start" name="search"></sigvelo-icon>
+*   </sigvelo-text-field>
+*
+*   <!-- Items -->
+*   <img
+*     data-keywords="orange"
+*     src="https://images.unsplash.com/photo-1628612380382-e6204e135307?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     alt="An orange kitten meows while perched on a stone wall"
+*   >
+*   <img
+*     data-keywords="white gray brown"
+*     src="https://images.unsplash.com/photo-1595252849939-1ec8070a354a?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     alt="A multicolored cat walking through the grass stops to look at the camera"
+*   >
+*   <img
+*     data-keywords="white gray"
+*     src="https://images.unsplash.com/photo-1583399704033-3db671c65f5c?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     alt="A white fluffy kitten lays comfortably on the arm of a chair"
+*   >
+*   <img
+*     data-keywords="gray black"
+*     src="https://images.unsplash.com/photo-1625060241508-22488e1e9264?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     alt="A gray tabby lays in a bed and looks out past the camera"
+*   >
+*   <img
+*     data-keywords="white black"
+*     src="https://images.unsplash.com/photo-1692901573513-41cda579d689?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     alt="A black and white kitten lays on its bed and looks at the camera"
+*   >
+*   <img
+*     data-keywords="gray black"
+*     src="https://images.unsplash.com/photo-1622273414093-27fd902ac078?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     alt="A young gray tabby lays on the steps and yawns"
+*   >
+*   <img
+*     data-keywords="white black brown"
+*     src="https://images.unsplash.com/photo-1601217155197-0419cd3fd698?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     alt="A multi-colored kitten poses for a picture"
+*   >
+*   <img
+*     data-keywords="gray brown"
+*     src="https://images.unsplash.com/photo-1622273509381-59a1e99afefd?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     alt="A young tabby rests its eyes while playfully putting its paw up"
+*   >
+*   <img
+*     data-keywords="brown"
+*     src="https://images.unsplash.com/photo-1644625986841-fdedeb19d37c?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+*     alt="A brown cat looks up at the camera"
+*   >
+* </sigvelo-search-list>
+*
+* <style>
+*   #search-list__keywords {
+*     &::part(items) {
+*       display: grid;
+*       grid-template-columns: repeat(auto-fill, minmax(min(145px, 100%), 1fr));
+*     }
+*
+*     img {
+*       height: 100%;
+*       object-fit: cover;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Providing an initial state
+* To change what users see before they enter a query, use the `initial` slot. When provided, this content will appear instead of the items when no query is entered. Once the user starts typing, the matching items or the empty state will be shown.
+*
+* ```html
+* <sigvelo-search-list id="search-list__initial">
+*   <!-- Controller -->
+*   <sigvelo-text-field
+*     slot="controller"
+*     label="Search cats"
+*     description="Find your perfect feline friend"
+*     type="search"
+*     with-clear
+*     pill
+*   >
+*     <sigvelo-icon slot="start" name="search"></sigvelo-icon>
+*   </sigvelo-text-field>
+*
+*   <!-- Initial state -->
+*   <sigvelo-empty-state slot="initial">
+*     <sigvelo-icon slot="illustration" name="hearts"></sigvelo-icon>
+*     <h4>Ready to Meet Some Cats?</h4>
+*     <p><small>Start typing to discover our adorable cats</small></p>
+*   </sigvelo-empty-state>
+*
+*   <!-- Items -->
+*   <sigvelo-card orientation="horizontal">
+*     <sigvelo-avatar slot="header" image="https://images.unsplash.com/photo-1672487209629-4d52e0c043d0?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*     <div>
+*       <h4 class="name">Meowy McGee</h4>
+*       <div class="tagline">Freedom's just another word for nothing left to lose.</div>
+*     </div>
+*     <sigvelo-button slot="actions" icon-label="Settings" variant="ghost" pill>
+*       <sigvelo-icon name="dots"></sigvelo-icon>
+*     </sigvelo-button>
+*   </sigvelo-card>
+*
+*   <sigvelo-card orientation="horizontal">
+*     <sigvelo-avatar slot="header" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*     <div>
+*       <h4 class="name">Wonder Whiskers</h4>
+*       <div class="tagline">Living my best nine lives, one nap at a time.</div>
+*     </div>
+*     <sigvelo-button slot="actions" icon-label="Settings" variant="ghost" pill>
+*       <sigvelo-icon name="dots"></sigvelo-icon>
+*     </sigvelo-button>
+*   </sigvelo-card>
+*
+*   <sigvelo-card orientation="horizontal">
+*     <sigvelo-avatar slot="header" image="https://images.unsplash.com/photo-1569591159212-b02ea8a9f239?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*     <div>
+*       <h4 class="name">Maine Attraction</h4>
+*       <div class="tagline">Big fluff, bigger personality.</div>
+*     </div>
+*     <sigvelo-button slot="actions" icon-label="Settings" variant="ghost" pill>
+*       <sigvelo-icon name="dots"></sigvelo-icon>
+*     </sigvelo-button>
+*   </sigvelo-card>
+*
+*   <sigvelo-card orientation="horizontal">
+*     <sigvelo-avatar slot="header" image="https://images.unsplash.com/photo-1735820474275-dd0ff4f28d71?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*     <div>
+*       <h4 class="name">Sir Pounce-a-lot</h4>
+*       <div class="tagline">Professional sunbeam chaser and nap enthusiast.</div>
+*     </div>
+*     <sigvelo-button slot="actions" icon-label="Settings" variant="ghost" pill>
+*       <sigvelo-icon name="dots"></sigvelo-icon>
+*     </sigvelo-button>
+*   </sigvelo-card>
+*
+*   <!-- Empty state -->
+*   <sigvelo-empty-state slot="empty">
+*     <sigvelo-icon slot="illustration" name="cat"></sigvelo-icon>
+*     <h4>No Cats Found</h4>
+*     <p><small>Try different search terms to find your match</small></p>
+*   </sigvelo-empty-state>
+* </sigvelo-search-list>
+*
+* <style>
+*   #search-list__initial {
+*     sigvelo-card {
+*       --spacing: 1rem;
+*
+*       sigvelo-avatar {
+*         --size: 3rem;
+*       }
+*
+*       .name,
+*       .tagline {
+*         margin: 0;
+*         line-height: 1.2;
+*         display: inline;
+*       }
+*
+*       .name {
+*         display: block;
+*         font-size: 1.125rem;
+*       }
+*
+*       .tagline {
+*         color: var(--sigvelo-color-text-muted);
+*         font-size: 0.875rem;
+*       }
+*     }
+*
+*     div[slot="initial"],
+*     div[slot="empty"] {
+*       text-align: center;
+*       color: var(--sigvelo-color-text-muted);
+*       margin-block-start: 1rem;
+*
+*       sigvelo-icon {
+*         font-size: 2.5rem;
+*         stroke-width: 1px;
+*       }
+*
+*       h4 {
+*         margin: 0.5rem 0 0 0;
+*       }
+*
+*       small {
+*         display: block;
+*         margin-top: 0.5rem;
+*       }
+*     }
+*   }
+* </style>
+* ```
+*
+* **Note:** The initial state will only be shown when the `initial` slot is provided and no query has been entered.
+*
+* @example Providing an empty state
+* An optional empty state will be shown when no results are found. Use the `empty` slot to add text, icons, or illustrations to it. Empty state content is not styled by the component, so feel free to bring your own look to it.
+*
+* ```html
+* <sigvelo-search-list id="search-list__empty">
+*   <!-- Controller -->
+*   <sigvelo-text-field
+*     slot="controller"
+*     label="Search"
+*     type="search"
+*     value="foo"
+*     with-clear
+*     pill
+*   >
+*     <sigvelo-icon slot="start" name="search"></sigvelo-icon>
+*   </sigvelo-text-field>
+*
+*   <!-- Items -->
+*   <div class="item">Luna</div>
+*   <div class="item">Oliver</div>
+*   <div class="item">Bella</div>
+*   <div class="item">Whiskers</div>
+*   <div class="item">Maple</div>
+*   <div class="item">Sushi</div>
+*   <div class="item">Pepper</div>
+*   <div class="item">Mittens</div>
+*   <div class="item">Shadow</div>
+*   <div class="item">Oreo</div>
+*   <div class="item">Mochi</div>
+*   <div class="item">Nova</div>
+*   <div class="item">Tiger</div>
+*   <div class="item">Ziggy</div>
+*
+*   <!-- The empty state -->
+*   <sigvelo-empty-state slot="empty">
+*     <sigvelo-icon slot="illustration" name="cat"></sigvelo-icon>
+*     No matching results
+*   </sigvelo-empty-state>
+* </sigvelo-search-list>
+*
+* <style>
+*   #search-list__empty {
+*     &::part(items) {
+*       flex-direction: row;
+*       gap: 0.5rem;
+*     }
+*
+*     .item {
+*       border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-subtle);
+*       border-radius: var(--sigvelo-radius-md);
+*       background-color: var(--sigvelo-color-surface);
+*       box-shadow: var(--sigvelo-elevation-hairline);
+*       padding: 0.5rem 1rem;
+*     }
+*
+*     <!-- Empty state styles -->
+*     div[slot="empty"] {
+*       width: 100%;
+*       text-align: center;
+*       color: var(--sigvelo-color-text-muted);
+*       margin-block-start: 1rem;
+*
+*       sigvelo-icon {
+*         font-size: 2.5rem;
+*         stroke-width: 1px;
+*       }
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Using a custom match function
+* For more control over the matching algorithm, set the `match` attribute to `custom` and provide a callback using the `isMatch` property. The function runs on each item whenever the search query changes.
+*
+* The callback receives three arguments: `query` (the current search term), `content` (the element's searchable content, including its `textContent` and `data-keywords`), and `el` (a reference to the element being searched). Return `true` if the element is a match and `false` otherwise.
+*
+* ```html
+* <sigvelo-search-list match="custom" id="search-list__custom">
+*   <!-- Controller -->
+*   <sigvelo-text-field
+*     slot="controller"
+*     label="Search cats"
+*     description="Add @indoor or @outdoor to filter by environment"
+*     type="search"
+*     with-clear
+*     pill
+*   >
+*     <sigvelo-icon slot="start" name="search"></sigvelo-icon>
+*   </sigvelo-text-field>
+*
+*   <!-- Items -->
+*   <div class="item" data-environment="indoor">
+*     <h4>Luna</h4>
+*     <p>Sweet and friendly, loves window watching</p>
+*   </div>
+*
+*   <div class="item" data-environment="outdoor">
+*     <h4>Oliver</h4>
+*     <p>Adventurous explorer, loves the garden</p>
+*   </div>
+*
+*   <div class="item" data-environment="indoor">
+*     <h4>Milo</h4>
+*     <p>Gentle soul who loves napping in sunbeams</p>
+*   </div>
+*
+*   <div class="item" data-environment="outdoor">
+*     <h4>Bella</h4>
+*     <p>Free spirit, enjoys climbing trees</p>
+*   </div>
+*
+*   <div class="item" data-environment="indoor">
+*     <h4>Charlie</h4>
+*     <p>Playful cat who chases laser pointers</p>
+*   </div>
+*
+*   <div class="item" data-environment="outdoor">
+*     <h4>Lucy</h4>
+*     <p>Independent nature lover, great hunter</p>
+*   </div>
+*
+*   <!-- Empty state -->
+*   <sigvelo-empty-state slot="empty">
+*     <sigvelo-icon slot="illustration" name="cat"></sigvelo-icon>
+*     <h4>No cats match your search</h4>
+*     <p><small>Try searching by name or using the @indoor or @outdoor tags</small></p>
+*   </sigvelo-empty-state>
+* </sigvelo-search-list>
+*
+* <script>
+*   const searchList = document.getElementById('search-list__custom');
+*
+*   // A very contrived custom match function
+*   searchList.isMatch = (query, content, el) => {
+*     query = query.toLowerCase().trim();
+*
+*     // If no query, show all items
+*     if (!query) return true;
+*
+*     const environment = el.getAttribute('data-environment');
+*     const envMatch = query.match(/@(indoor|outdoor)/);
+*
+*     // Look for @indoor or @outdoor in the query
+*     if (envMatch) {
+*       // Remove the environment tag from the query for text search
+*       const searchEnvironment = envMatch[1];
+*       const textQuery = query.replace(/@(indoor|outdoor)/, '').trim();
+*
+*       // Must match both environment and text (if any text remains)
+*       return environment === searchEnvironment && (!textQuery || content.toLowerCase().includes(textQuery));
+*     }
+*
+*     // If no environment tag was found, fall back to text search
+*     return content.toLowerCase().includes(query);
+*   };
+* <\/script>
+*
+* <style>
+*   #search-list__custom {
+*     &::part(items) {
+*       display: grid;
+*       grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
+*       gap: 1rem;
+*     }
+*
+*     .item {
+*       border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-subtle);
+*       border-radius: var(--sigvelo-radius-md);
+*       background-color: var(--sigvelo-color-surface);
+*       box-shadow: var(--sigvelo-elevation-hairline);
+*       padding: 1rem;
+*
+*       h4 {
+*         margin: 0;
+*         font-size: 1.125rem;
+*       }
+*
+*       p {
+*         color: var(--sigvelo-color-text-muted);
+*         margin: 0.5rem 0;
+*         font-size: 0.875rem;
+*         margin-block-end: 0;
+*       }
+*     }
+*
+*     div[slot="empty"] {
+*       text-align: center;
+*       color: var(--sigvelo-color-text-muted);
+*       margin-block-start: 1rem;
+*
+*       sigvelo-icon {
+*         font-size: 2.5rem;
+*         stroke-width: 1px;
+*       }
+*
+*       small {
+*         display: block;
+*         margin-top: 0.5rem;
+*       }
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Using an external controller
+* In some cases, the controller might need to exist outside of the component. In this case, give the controller an ID and set the search list's `controller` attribute to match.
+*
+* ```html
+* <sigvelo-text-field
+*   id="external-controller"
+*   label="Search"
+*   description="Results will update as you type"
+* ></sigvelo-text-field>
+*
+* <sigvelo-search-list controller="external-controller" id="search-list__external">
+*   <div>Item 1</div>
+*   <div>Item 2</div>
+*   <div>Item 3</div>
+* </sigvelo-search-list>
+*
+* <style>
+*   #search-list__external {
+*     margin-block-start: 1rem;
+*
+*     &::part(items) {
+*       display: grid;
+*       grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
+*     }
+*
+*     > div {
+*       border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-subtle);
+*       border-radius: var(--sigvelo-radius-md);
+*       background-color: var(--sigvelo-color-surface);
+*       box-shadow: var(--sigvelo-elevation-hairline);
+*       text-align: center;
+*       padding: 1rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* **Note:** When using an external controller, make sure the position of it makes sense in reference to the search list. It should usually come immediately before the search list to ensure all users can interact with it properly.
+*/
+var SigveloSearchList = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.items = [];
+		this.localize = new Localize(this);
+		this.query = "";
+		this.isEmpty = false;
+		this.isInitial = false;
+		this.resultsMessage = "";
+		this.match = "exact";
+		this.debounce = 300;
+		this.handleControllerInput = (event) => {
+			const target = event.target;
+			clearTimeout(this.debounceTimeout);
+			this.debounceTimeout = setTimeout(() => {
+				this.query = target.value;
+				this.updateResults();
+			}, this.debounce);
+		};
+		this.handleDocumentInput = (event) => {
+			if (event.target.id === this.controller) this.handleControllerInput(event);
+		};
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [hostStyles, search_list_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("input", this.handleDocumentInput);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("input", this.handleDocumentInput);
+		window.clearTimeout(this.debounceTimeout);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("controller")) {
+			const controller = this.getController();
+			if (controller) {
+				this.query = controller.value || "";
+				this.updateResults();
+			}
+		}
+		if (changedProperties.has("match")) this.updateResults();
+		if (changedProperties.has("isEmpty")) this.customStates.set("empty", this.isEmpty);
+		if (changedProperties.has("isInitial")) this.customStates.set("initial", this.isInitial);
+	}
+	/** Gets the controller or returns `null` if one can't be found. */
+	getController() {
+		const root = this.getRootNode();
+		if (this.controller) return root.getElementById(this.controller);
+		else return this.querySelector("[slot=\"controller\"]");
+	}
+	handleDefaultSlotChange() {
+		this.items = [...this.children].filter((el) => !el.hasAttribute("slot"));
+		this.updateResults();
+	}
+	async handleControllerSlotChange() {
+		const controller = this.getController();
+		if (controller?.localName === "sigvelo-text-field") await customElements.whenDefined("sigvelo-text-field");
+		if (controller && controller.value !== this.query) {
+			this.query = controller.value;
+			this.updateResults();
+		}
+	}
+	updateResults() {
+		const hasQuery = this.query.length > 0;
+		let numResults = 0;
+		let wasWarned = false;
+		this.isInitial = !hasQuery && this.slotsWithContent.has("initial");
+		if (!this.isInitial) this.items.forEach((item) => {
+			const searchableContent = `${item.textContent || ""} ${item.dataset.keywords || ""}`;
+			if (hasQuery) {
+				let isMatch = false;
+				if (this.match === "exact") isMatch = exactSearch(this.query, searchableContent);
+				if (this.match === "fuzzy") isMatch = fuzzySearch(this.query, searchableContent);
+				if (this.match === "custom") if (typeof this.isMatch === "function") isMatch = this.isMatch(this.query, searchableContent, item);
+				else {
+					if (!wasWarned) {
+						console.warn(`A custom search type was specified but no isMatch function was provided.`, this);
+						wasWarned = true;
+					}
+					isMatch = exactSearch(this.query, searchableContent);
+				}
+				item.hidden = !isMatch;
+				if (isMatch) numResults++;
+			} else item.hidden = false;
+		});
+		this.isEmpty = this.isInitial ? true : this.items.some((item) => item.hidden !== true);
+		clearTimeout(this.resultsTimeout);
+		this.resultsTimeout = setTimeout(() => {
+			if (this.isInitial) this.resultsMessage = "";
+			else if (hasQuery) this.resultsMessage = this.localize.term("showingNumberOfTotalItems", numResults, this.items.length);
+			else this.resultsMessage = this.localize.term("showingAllNumberItems", this.items.length);
+		}, 1e3);
+	}
+	/** Sets the search query and updates the results. To clear the search, set this to an empty string. */
+	setQuery(searchQuery = "") {
+		this.query = searchQuery;
+		this.updateResults();
+		const controller = this.getController();
+		if (controller && "value" in controller) controller.value = this.query;
+	}
+	render() {
+		const showInitial = this.query === "" && this.slotsWithContent.has("initial");
+		return html`
+      <slot
+        name="controller"
+        @input=${this.handleControllerInput}
+        @slotchange=${this.handleControllerSlotChange}
+      ></slot>
+
+      <div id="results" class="vh" role="region" aria-live="polite">${this.resultsMessage}</div>
+
+      <div id="items" part="items" ?hidden=${showInitial}>
+        <slot @slotchange=${this.handleDefaultSlotChange} ?hidden=${!this.isEmpty}></slot>
+      </div>
+
+      <slot name="empty" ?hidden=${this.isEmpty || showInitial}></slot>
+      <slot name="initial" ?hidden=${!showInitial}></slot>
+    `;
+	}
+};
+__decorate([query("#results")], SigveloSearchList.prototype, "results", void 0);
+__decorate([state()], SigveloSearchList.prototype, "query", void 0);
+__decorate([state()], SigveloSearchList.prototype, "isEmpty", void 0);
+__decorate([state()], SigveloSearchList.prototype, "isInitial", void 0);
+__decorate([state()], SigveloSearchList.prototype, "resultsMessage", void 0);
+__decorate([property({ reflect: true })], SigveloSearchList.prototype, "controller", void 0);
+__decorate([property()], SigveloSearchList.prototype, "match", void 0);
+__decorate([property({ type: Number })], SigveloSearchList.prototype, "debounce", void 0);
+__decorate([property({ attribute: false })], SigveloSearchList.prototype, "isMatch", void 0);
+SigveloSearchList.disableWarning?.("change-in-update");
+customElements.define("sigvelo-search-list", SigveloSearchList);
+//#endregion
+export { SigveloSearchList as t };