@mcp-b/web-components 0.2.0

package/dist/combobox-B6al50UG.js

@@ -0,0 +1,1693 @@
+import { Localize } from "./utilities/localize.js";
+import "./icon-BPVkNsY4.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./combobox-item-yM6tDrGG.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 { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { animateWithClass } from "@mcp-b/wc-support/utilities/animate";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { SigveloBeforeCloseEvent, SigveloBeforeOpenEvent, SigveloCloseEvent, SigveloOpenEvent } from "@mcp-b/wc-support/events/open-close";
+import { SigveloBlurEvent, SigveloChangeEvent, SigveloFocusEvent, SigveloInputEvent } from "@mcp-b/wc-support/events/form";
+import formControlStyles from "@mcp-b/wc-support/styles/form-control.styles";
+import { autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
+import { styleMap } from "lit/directives/style-map.js";
+//#region src/components/combobox/combobox.styles.ts
+var combobox_styles_default = css`
+  :host {
+    --text-box-min-width: 12ch;
+    --show-duration: var(--sigvelo-motion-duration-interaction);
+  }
+
+  /* Visual box base styles */
+  #visual-box {
+    display: flex;
+    position: relative;
+    align-items: center;
+    min-width: 0;
+    padding: 0 0.75em;
+    overflow: hidden;
+    gap: 0.5em;
+    font: inherit;
+    cursor: text;
+
+    /* Collapse padding when a tag is present and there's no start content */
+    &:has(.tag):not(.has-start) {
+      padding-inline-start: 0.25em;
+    }
+
+    /* Appearance styles */
+    &.normal {
+      border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+        var(--sigvelo-color-neutral-border-muted);
+      border-radius: var(--sigvelo-radius-md);
+      background-color: var(--sigvelo-color-surface);
+      color: var(--sigvelo-color-text);
+    }
+
+    &.filled {
+      border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+        var(--sigvelo-color-neutral-bg-subtle);
+      border-radius: var(--sigvelo-radius-md);
+      background-color: var(--sigvelo-color-neutral-bg-subtle);
+    }
+
+    &.unstyled {
+      padding: 0;
+      border: none;
+      background: none;
+    }
+
+    /* Disabled state */
+    #visual-box.disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    /* Pill modifier */
+    &.pill {
+      padding: 0 1.25em;
+      border-radius: 1.4em; /* fake a pill shape so when it wraps, tags still fit */
+
+      .tag {
+        border-radius: var(--sigvelo-radius-full);
+      }
+    }
+
+    /* Sizes */
+    &.xs {
+      min-height: calc(var(--sigvelo-control-height-xs) - 0.5em);
+      padding-block: 0.25em;
+      font-size: var(--sigvelo-control-text-xs);
+    }
+
+    &.sm {
+      min-height: calc(var(--sigvelo-control-height-sm) - 0.5em);
+      padding-block: 0.25em;
+      font-size: var(--sigvelo-control-text-sm);
+    }
+
+    &.md {
+      min-height: calc(var(--sigvelo-control-height-md));
+      padding-block: 0.25em;
+      font-size: var(--sigvelo-control-text-md);
+    }
+
+    &.lg {
+      min-height: calc(var(--sigvelo-control-height-lg) - 0.5em);
+      padding-block: 0.25em;
+      font-size: var(--sigvelo-control-text-lg);
+    }
+
+    &.xl {
+      min-height: calc(var(--sigvelo-control-height-xl) - 0.5em);
+      padding-block: 0.25em;
+      font-size: var(--sigvelo-control-text-xl);
+    }
+  }
+
+  /* Focus styles */
+  :not(:host([variant="unstyled"])) #visual-box:has(#text-box:focus-visible) {
+    outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
+      var(--sigvelo-color-focus);
+    outline-offset: calc(-1 * var(--sigvelo-border-width));
+  }
+
+  /* Input area - single flex container for all content */
+  #input-area {
+    display: flex;
+    flex: 1 1 0;
+    flex-wrap: wrap;
+    align-items: center;
+    min-width: 0;
+    gap: 0.25em;
+  }
+
+  /* Individual tags */
+  .tag {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    min-width: 0; /* Allow tags to shrink */
+    max-width: 100%;
+    padding: 0.25em 0.5em;
+    overflow: hidden;
+    gap: 0.25em;
+    border-radius: var(--sigvelo-radius-sm);
+    background-color: var(--sigvelo-color-neutral-bg-subtle);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .tag-remove {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 1.25em;
+    height: 1.25em;
+    margin: 0;
+    margin-inline-start: 0.125em;
+    margin-inline-end: -0.125em;
+    padding: 0;
+    border: none;
+    border-radius: var(--sigvelo-radius-sm);
+    background: transparent;
+    color: var(--sigvelo-color-text-muted);
+    font-size: inherit;
+    cursor: pointer;
+    transition: var(--sigvelo-motion-duration-interaction) translate ease;
+
+    sigvelo-icon {
+      stroke-width: 0.1667em;
+    }
+  }
+
+  .tag-remove:active {
+    translate: 0 var(--sigvelo-motion-distance-xs);
+  }
+
+  #visual-box.filled .tag {
+    background-color: var(--sigvelo-color-neutral-bg-muted);
+  }
+
+  /* Text input - base styles */
+  #text-box {
+    appearance: none;
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    border: none;
+    background: none;
+    color: var(--sigvelo-color-text);
+    font: inherit;
+    cursor: inherit;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--sigvelo-control-placeholder-color);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+  }
+
+  #visual-box.xs {
+    .tag,
+    #text-box {
+      height: calc(var(--sigvelo-control-height-xs) - (2 * var(--sigvelo-border-width)) - 0.5em);
+      min-height: 0;
+    }
+  }
+
+  #visual-box.sm {
+    .tag,
+    #text-box {
+      height: calc(var(--sigvelo-control-height-sm) - (2 * var(--sigvelo-border-width)) - 0.5em);
+      min-height: 0;
+    }
+  }
+
+  #visual-box.md {
+    .tag,
+    #text-box {
+      height: calc(var(--sigvelo-control-height-md) - (2 * var(--sigvelo-border-width)) - 0.5em);
+      min-height: 0;
+    }
+  }
+
+  #visual-box.lg {
+    .tag,
+    #text-box {
+      height: calc(var(--sigvelo-control-height-lg) - (2 * var(--sigvelo-border-width)) - 0.5em);
+      min-height: 0;
+    }
+  }
+  #visual-box.xl {
+    .tag,
+    #text-box {
+      height: calc(var(--sigvelo-control-height-xl) - (2 * var(--sigvelo-border-width)) - 0.5em);
+      min-height: 0;
+    }
+  }
+
+  #visual-box:has(.tag) #text-box {
+    margin-inline: 0.5em;
+  }
+
+  /* Multiple select mode - dynamic width with constraints */
+  #visual-box.multiple #text-box {
+    flex: 1 1 var(--text-box-min-width);
+    width: auto;
+    min-width: var(--text-box-min-width);
+  }
+
+  /* When tags wrap to multiple lines, let input take full width of new line */
+  #visual-box.multiple #text-box:first-child,
+  #visual-box.multiple #text-box:only-child {
+    flex: 1 1 100%;
+  }
+
+  /* RTL support for clear button */
+  :host(:dir(rtl)) #visual-box.has-clear {
+    padding-inline-start: 2.5em;
+    padding-inline-end: 0.75em;
+
+    #clear-button {
+      right: auto;
+      left: 0.25em;
+    }
+  }
+
+  /* Clear button styles */
+  .text-box-button {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    align-self: stretch;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    padding-inline: 0.25em;
+    border: none;
+    background: none;
+    color: var(--sigvelo-color-text-muted);
+    font: inherit;
+    font-size: 1.25em;
+    cursor: pointer;
+    transition: var(--sigvelo-motion-duration-interaction) translate ease;
+
+    &:active {
+      translate: 0 1px;
+    }
+  }
+
+  /* Start and end slot styles */
+  slot[name="start"]::slotted(*),
+  slot[name="end"]::slotted(*) {
+    color: var(--sigvelo-color-text-muted) !important;
+  }
+
+  slot[name="start"]::slotted(sigvelo-icon),
+  slot[name="end"]::slotted(sigvelo-icon) {
+    font-size: 1.25em !important;
+    pointer-events: none;
+  }
+
+  slot[name="start"]::slotted(svg),
+  slot[name="end"]::slotted(svg) {
+    width: 1.25em;
+    height: 1.25em;
+    pointer-events: none;
+  }
+
+  #chevron {
+    flex: 0 0 auto;
+    font-size: 1.25em;
+    pointer-events: none;
+  }
+
+  /* Dropdown styles */
+  #dropdown {
+    display: flex;
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    left: 0;
+    flex-direction: column;
+    width: max-content;
+    margin: 0;
+    padding: 0.25em;
+    overflow-y: auto;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-muted);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-surface);
+    box-shadow: var(--sigvelo-elevation-floating);
+
+    /* Popover API overrides */
+    &[popover] {
+      margin: 0;
+      inset: auto;
+      padding: 0.25em;
+      border-radius: var(--sigvelo-radius-md);
+    }
+
+    &.show {
+      animation: show var(--show-duration) ease;
+    }
+
+    &.hide {
+      animation: show var(--show-duration) ease reverse;
+    }
+  }
+
+  /* Placement origins */
+  :host([data-placement^="top"]) #dropdown {
+    transform-origin: bottom;
+  }
+
+  :host([data-placement^="bottom"]) #dropdown {
+    transform-origin: top;
+  }
+
+  :host([data-placement="bottom-start"]) #dropdown {
+    transform-origin: top left;
+  }
+
+  :host([data-placement="bottom-end"]) #dropdown {
+    transform-origin: top right;
+  }
+
+  :host([data-placement="top-start"]) #dropdown {
+    transform-origin: bottom left;
+  }
+
+  :host([data-placement="top-end"]) #dropdown {
+    transform-origin: bottom right;
+  }
+
+  /* Hide items when filtered out */
+  ::slotted(sigvelo-combobox-item[hidden]) {
+    display: none !important;
+  }
+
+  @keyframes show {
+    from {
+      scale: 0.9;
+      opacity: 0;
+    }
+    to {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+`;
+//#endregion
+//#region src/components/combobox/combobox.ts
+/**
+* <sigvelo-combobox>
+*
+* @summary Allows users to select from a list of options with type-ahead search.
+* @tag sigvelo-combobox
+* @documentation https://design-system.sigvelo.com/docs/components/combobox
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+* @dependency sigvelo-combobox-item
+*
+* @slot - One or more `<sigvelo-combobox-item>` elements to show as options.
+* @slot label - The combobox's label. For plain-text labels, use the `label` attribute instead.
+* @slot description - The combobox's description. For plain-text descriptions, use the `description` attribute instead.
+* @slot start - An icon or similar element to place before the input. Works great with `<sigvelo-icon>`.
+* @slot end - An icon or similar element to place after the input. Works great with `<sigvelo-icon>`.
+*
+* @event sigvelo-blur - Emitted when the combobox loses focus.
+* @event sigvelo-change - Emitted when the user commits changes to the combobox's value.
+* @event sigvelo-focus - Emitted when the combobox receives focus.
+* @event sigvelo-input - Emitted when the combobox receives input.
+* @event sigvelo-before-open - Emitted when the dropdown is instructed to open but before it is shown.
+* @event sigvelo-open - Emitted when the dropdown opens.
+* @event sigvelo-before-close - Emitted when the dropdown is instructed to close but before it is hidden.
+* @event sigvelo-close - Emitted when the dropdown closes.
+*
+* @csspart label - The element that contains the combobox's label.
+* @csspart description - The element that contains the combobox's description.
+* @csspart visual-box - The element that wraps the internal text box.
+* @csspart input-area - The wrapper surrounding tags and the internal text box.
+* @csspart tag - Individual tag elements.
+* @csspart tag-remove - The remove button for tags.
+* @csspart text-box - The internal text box, an `<input>` element.
+* @csspart chevron - The chevron icon, a `<sigvelo-icon>` element.
+* @csspart chevron__svg - The chevron icon's `<svg>` part.
+* @csspart clear-button - The clear button.
+* @csspart dropdown - The dropdown container.
+*
+* @cssstate open - Applied when the dropdown is open.
+* @cssstate disabled - Applied when the combobox is disabled.
+* @cssstate focused - Applied when the combobox has focus.
+* @cssstate blank - Applied when the combobox has no value.
+* @cssstate user-valid - Applied when valid after user interaction.
+* @cssstate user-invalid - Applied when invalid after user interaction.
+*
+* @cssproperty [--text-box-min-width=12ch] - The minimum width of the input field when shown next to tags. Only
+*  available in `multiple` mode.
+* @cssproperty [--show-duration=50ms] - The duration of the show/hide animation for the dropdown.
+*
+* @example Default
+* Comboboxes implement the ARIA APG combobox pattern for roles and keyboard navigation, with enhanced screen reader announcements via ARIA live regions for improved context while navigating options.
+*
+* ```html
+* <sigvelo-combobox
+*   label="Select a cat breed"
+*   description="Type to search or select from the list"
+*   placeholder="Search breeds"
+*   with-clear
+* >
+*   <sigvelo-combobox-item value="persian">Persian</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="siamese">Siamese</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="tabby">Tabby</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="ragdoll">Ragdoll</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="bengal">Bengal</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="sphynx">Sphynx</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="calico">Calico</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="russian">Russian Blue</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* @example Labels and descriptions
+* You can use the `label` and `description` attributes to provide plain text labels and descriptions for the combobox. If you want to provide HTML, use the `label` and `description` slots instead.
+*
+* ```html
+* <sigvelo-combobox placeholder="Type to search">
+*   <span slot="label">Choose your <strong>purrfect</strong> companion</span>
+*   <span slot="description">
+*     Browse our available cats or <a href="https://example.com/" target="_blank">schedule a visit</a>.
+*   </span>
+*   <sigvelo-combobox-item value="luna">Luna (Tabby, 2 years)</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="milo">Milo (Orange, 1 year)</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="bella">Bella (Calico, 3 years)</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* @example Providing options
+* Create combobox options by adding `<sigvelo-combobox-item>` elements inside the combobox. Each item should have a `value` attribute that will be submitted with the form. If no value is provided, the text content is used.
+*
+* ```html
+* <sigvelo-combobox label="Cat personalities" placeholder="Search personalities">
+*   <sigvelo-combobox-item value="playful">Playful and Energetic</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="cuddly">Cuddly Lap Cat</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="independent">Independent Spirit</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="social">Social Butterfly</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="curious">Curious Explorer</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* Combobox items can have structured content with icons and details.
+*
+* ```html
+* <sigvelo-combobox label="Adoption status" placeholder="Filter by status" id="combobox__structured">
+*   <sigvelo-combobox-item value="available">
+*     <sigvelo-icon slot="icon" name="circle-check" color="success"></sigvelo-icon>
+*     <span>Available Now</span>
+*     <span slot="details">Ready for adoption</span>
+*   </sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="pending">
+*     <sigvelo-icon slot="icon" name="clock" color="informative"></sigvelo-icon>
+*     <span>Adoption Pending</span>
+*     <span slot="details">Application in review</span>
+*   </sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="medical">
+*     <sigvelo-icon slot="icon" name="heart" color="critical"></sigvelo-icon>
+*     <span>Medical Hold</span>
+*     <span slot="details">Recovering from treatment</span>
+*   </sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="foster">
+*     <sigvelo-icon slot="icon" name="home" color="primary"></sigvelo-icon>
+*     <span>Foster Only</span>
+*     <span slot="details">Temporary care needed</span>
+*   </sigvelo-combobox-item>
+* </sigvelo-combobox>
+*
+* <style>
+*   #combobox__structured {
+*     sigvelo-combobox-item {
+*       padding-block: 0.75rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* **Warning:** Avoid placing interactive elements such as buttons and links inside the combobox item, as this will hinder accessibility and can lead to unexpected behaviors.
+*
+* @example Providing an initial value
+* Add the `selected` attribute to the combobox item you want to select initially. When using `multiple`, you can apply `selected` to more than one option.
+*
+* ```html
+* <sigvelo-combobox label="Preferred feeding time" placeholder="Select a time">
+*   <sigvelo-combobox-item value="morning">Morning (6-9 AM)</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="noon" selected>Noon (11 AM-1 PM)</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="evening">Evening (5-7 PM)</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="night">Night (8-10 PM)</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* @example Getting and setting the value
+* The combobox's value can be accessed and modified through JavaScript. For single selection, use the `value` property. For multiple selection, `value` will be an array.
+*
+* ```js
+* // Single selection
+* const combobox = document.querySelector('sigvelo-combobox');
+* console.log(combobox.value); // "persian"
+* combobox.value = 'siamese';
+*
+* // Multiple selection
+* const multiCombobox = document.querySelector('sigvelo-combobox[multiple]');
+* console.log(multiCombobox.value); // ["persian", "siamese"]
+* multiCombobox.value = ['bengal', 'ragdoll'];
+* ```
+*
+* @example Adding a clear button
+* Add the `with-clear` attribute to show a clear button when the combobox has a value. This allows users to quickly clear their selection.
+*
+* ```html
+* <sigvelo-combobox
+*   label="With clear button"
+*   placeholder="Select and then clear"
+*   with-clear
+* >
+*   <sigvelo-combobox-item value="yes" selected>Yes, I want treats!</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="no">No treats needed</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="maybe">Maybe later</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* @example Multiple selection
+* Use the `multiple` attribute to enable multi-selection mode. Selected items appear as tags in the input area. Users can remove tags by clicking the × button or pressing Backspace.
+*
+* ```html
+* <sigvelo-combobox
+*   label="Cat behaviors"
+*   description="Select all behaviors your cat exhibits"
+*   placeholder="Search behaviors"
+*   multiple
+*   with-clear
+* >
+*   <sigvelo-combobox-item value="purring" selected>Purring</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="kneading">Kneading (Making Biscuits)</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="chirping" selected>Chirping at Birds</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="head-bunting">Head Bunting</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="slow-blinking">Slow Blinking</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="zoomies">Midnight Zoomies</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="bringing-gifts">Bringing "Gifts"</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="chattering">Teeth Chattering</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* **Note:** In multiple mode, the dropdown stays open after selecting an item, allowing users to quickly select multiple options. Press Escape or click outside to close the dropdown.
+*
+* @example Start and end content
+* Use the `start` and `end` slots to add presentational icons or text. Avoid interactive elements such as buttons, links, etc. Works well with `<sigvelo-icon>` and `<svg>` elements.
+*
+* ```html
+* <sigvelo-combobox name="breed" label="Cat breed" with-clear>
+*   <sigvelo-icon slot="start" name="cat"></sigvelo-icon>
+*   <sigvelo-combobox-item value="persian">Persian</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="siamese">Siamese</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="tabby">Tabby</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="ragdoll">Ragdoll</sigvelo-combobox-item>
+* </sigvelo-combobox>
+*
+* <br>
+*
+* <sigvelo-combobox name="toy" label="Cat toy" placeholder="Choose a toy" with-clear>
+*   <sigvelo-icon slot="end" name="gift"></sigvelo-icon>
+*   <sigvelo-combobox-item value="feather-wand">Feather Wand</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="laser-pointer">Laser Pointer</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="catnip-mouse">Catnip Mouse</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="puzzle-feeder">Puzzle Feeder</sigvelo-combobox-item>
+* </sigvelo-combobox>
+*
+* <br>
+*
+* <sigvelo-combobox name="vet-visit" label="Visit type" multiple with-clear>
+*   <sigvelo-icon slot="start" name="cat"></sigvelo-icon>
+*   <sigvelo-icon slot="end" name="clipboard-heart"></sigvelo-icon>
+*   <sigvelo-combobox-item value="checkup">Annual Checkup</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="vaccination">Vaccination</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="dental">Dental Cleaning</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="grooming">Grooming</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* @example Filled and unstyled comboboxes
+* Use the `variant` attribute to change the visual style of the combobox. Options are `normal` (default), `filled`, and `unstyled`.
+*
+* ```html
+* <sigvelo-combobox
+*   label="Normal appearance"
+*   variant="normal"
+*   placeholder="Select one"
+* >
+*   <sigvelo-combobox-item value="1">Fluffy</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="2">Sleek</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="3">Short-haired</sigvelo-combobox-item>
+* </sigvelo-combobox>
+*
+* <br>
+*
+* <sigvelo-combobox
+*   label="Filled appearance"
+*   variant="filled"
+*   placeholder="Select one"
+* >
+*   <sigvelo-combobox-item value="1">Fluffy</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="2">Sleek</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="3">Short-haired</sigvelo-combobox-item>
+* </sigvelo-combobox>
+*
+* <br>
+*
+* <sigvelo-combobox
+*   label="Unstyled appearance"
+*   variant="unstyled"
+*   placeholder="Select one"
+* >
+*   <sigvelo-combobox-item value="1">Fluffy</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="2">Sleek</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="3">Short-haired</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* @example Pill-shaped comboboxes
+* Add the `pill` attribute to give the combobox rounded edges.
+*
+* ```html
+* <sigvelo-combobox
+*   label="Cat's favorite treat"
+*   placeholder="Choose a treat"
+*   pill
+*   with-clear
+* >
+*   <sigvelo-combobox-item value="salmon">Salmon Bites</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="chicken">Chicken Strips</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="tuna">Tuna Flakes</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="catnip">Catnip Cookies</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="cheese">Cheese Cubes</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* When using `multiple`, tags become pill-shaped and the combobox will curve to wrap around them.
+*
+* ```html
+* <sigvelo-combobox
+*   label="Cat's daily activities"
+*   description="Select all that apply"
+*   placeholder="What does your cat enjoy?"
+*   pill
+*   multiple
+*   with-clear
+* >
+*   <sigvelo-combobox-item value="window-watching" selected>Bird Watching</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="sunbathing" selected>Sunbathing</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="toy-hunting" selected>Toy Hunting</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="box-sitting" selected>Box Sitting</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="treat-begging" selected>Treat Begging</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="midnight-racing" selected>Midnight Racing</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="lap-napping" selected>Lap Napping</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* @example Changing the size
+* Use the `size` attribute to change the combobox's size. Available sizes are `xs`, `sm`, `md` (default), `lg`, and `xl`.
+*
+* ```html
+* <sigvelo-select label="Select a size" value="xs" style="max-width: 18rem; margin-block-end: 2rem;">
+*   <option value="xs">Extra small</option>
+*   <option value="sm">Small</option>
+*   <option value="md">Medium</option>
+*   <option value="lg">Large</option>
+*   <option value="xl">Extra large</option>
+* </sigvelo-select>
+*
+* <sigvelo-combobox
+*   size="xs"
+*   label="Cat coat pattern"
+*   description="Size changes dynamically based on selection above"
+*   placeholder="Search patterns"
+*   id="combobox__size"
+*   with-clear
+* >
+*   <sigvelo-combobox-item value="solid">Solid Color</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="tabby">Tabby Stripes</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="calico">Calico</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="tortoiseshell">Tortoiseshell</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="tuxedo">Tuxedo</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="pointed">Pointed (Siamese)</sigvelo-combobox-item>
+* </sigvelo-combobox>
+*
+* <script>
+*   const combobox = document.getElementById('combobox__size');
+*   const select = combobox.previousElementSibling;
+*
+*   select.addEventListener('sigvelo-change', () => {
+*     combobox.size = select.value;
+*   });
+* <\/script>
+* ```
+*
+* @example Disabling the combobox
+* Add the `disabled` attribute to disable the entire combobox.
+*
+* ```html
+* <sigvelo-combobox
+*   label="Grooming services"
+*   description="Currently unavailable"
+*   placeholder="Service selection disabled"
+*   disabled
+* >
+*   <sigvelo-combobox-item value="bath">Bath & Blow-dry</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="trim" selected>Nail Trim</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="full">Full Grooming</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* @example Disabling items
+* Add the `disabled` attribute to individual combobox items to make them non-selectable. Disabled items will still appear in search results but cannot be selected.
+*
+* ```html
+* <sigvelo-combobox label="Veterinary services" placeholder="Select service">
+*   <sigvelo-combobox-item value="checkup">Annual Checkup</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="vaccination">Vaccination</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="spay-neuter" disabled>Spay/Neuter (Fully booked)</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="dental">Dental Cleaning</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="emergency" disabled>Emergency Care (Call first)</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* @example Showing labels on the side
+* With the `sigvelo-side-label` utility, you can show labels on the side instead of on top of the combobox. You can control the width of the label by setting the `--label-width` custom property.
+*
+* ```html
+* <sigvelo-combobox
+*   class="sigvelo-side-label"
+*   style="--label-width: 12ch;"
+*   name="age"
+*   label="Cat's age"
+*   description="How old is your cat?"
+*   placeholder="Select age range"
+* >
+*   <sigvelo-combobox-item value="kitten">Kitten (0-1 year)</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="young">Young (1-3 years)</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="adult">Adult (3-7 years)</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="senior">Senior (7+ years)</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* <br>
+* <sigvelo-combobox
+*   class="sigvelo-side-label"
+*   style="--label-width: 12ch;"
+*   name="activity"
+*   label="Activity level"
+*   description="How active is your cat?"
+*   placeholder="Select activity"
+* >
+*   <sigvelo-combobox-item value="low">Couch Potato</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="moderate">Moderately Active</sigvelo-combobox-item>
+*   <sigvelo-combobox-item value="high">Very Energetic</sigvelo-combobox-item>
+* </sigvelo-combobox>
+* ```
+*
+* @example Validation
+* The `required` attribute can be used to enable validation using the Constraint Validation API.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank">
+*   <sigvelo-combobox
+*     name="emergency-contact"
+*     label="Emergency vet contact"
+*     placeholder="Select a veterinarian"
+*     required
+*   >
+*     <sigvelo-combobox-item value="dr-smith">Dr. Smith - City Animal Hospital</sigvelo-combobox-item>
+*     <sigvelo-combobox-item value="dr-jones">Dr. Jones - Pet Emergency Center</sigvelo-combobox-item>
+*     <sigvelo-combobox-item value="dr-brown">Dr. Brown - 24/7 Pet Care</sigvelo-combobox-item>
+*   </sigvelo-combobox>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+* ```
+*
+* @example Using custom validation
+* Use the `setCustomValidity()` method to make the combobox invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, call the method with an empty string.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" id="combobox__custom-validation">
+*   <sigvelo-combobox
+*     name="special-diet"
+*     label="Special dietary needs"
+*     description="This field demonstrates custom validation"
+*     placeholder="Select diet"
+*   >
+*     <sigvelo-combobox-item value="regular">Regular Diet</sigvelo-combobox-item>
+*     <sigvelo-combobox-item value="grain-free">Grain-Free</sigvelo-combobox-item>
+*     <sigvelo-combobox-item value="prescription">Prescription Diet</sigvelo-combobox-item>
+*   </sigvelo-combobox>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+* </form>
+*
+* <script type="module">
+*   import { allDefined } from '/dist/sigvelo.js';
+*
+*   await allDefined();
+*
+*   const form = document.getElementById('combobox__custom-validation');
+*   const combobox = form.querySelector('sigvelo-combobox');
+*
+*   combobox.setCustomValidity('Please consult with your vet first!');
+*
+*   // Clear validation after user selects an option
+*   combobox.addEventListener('sigvelo-change', () => {
+*     combobox.setCustomValidity('');
+*   });
+* <\/script>
+* ```
+*
+* @example Styling validation
+* You can style valid and invalid comboboxes using the `:valid` and `:invalid` pseudo classes.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="combobox__validation-pseudo">
+*   <sigvelo-combobox
+*     name="chip-id"
+*     label="Microchip ID"
+*     description="Required for registration"
+*     placeholder="Enter or select chip ID"
+*     required
+*   >
+*     <sigvelo-combobox-item value="chip-12345">CHIP-12345</sigvelo-combobox-item>
+*     <sigvelo-combobox-item value="chip-67890">CHIP-67890</sigvelo-combobox-item>
+*     <sigvelo-combobox-item value="chip-24680">CHIP-24680</sigvelo-combobox-item>
+*   </sigvelo-combobox>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .combobox__validation-pseudo {
+*     sigvelo-combobox:valid {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-combobox:invalid {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* However, these selectors will match even before the user has had a chance to interact with the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="combobox__validation-custom">
+*   <sigvelo-combobox
+*     name="insurance"
+*     label="Pet insurance provider"
+*     description="Select your insurance company"
+*     placeholder="Search providers"
+*     required
+*   >
+*     <sigvelo-combobox-item value="pawguard-plus">PawGuard Plus</sigvelo-combobox-item>
+*     <sigvelo-combobox-item value="furry-shield">Furry Shield</sigvelo-combobox-item>
+*     <sigvelo-combobox-item value="petcare-prime">PetCare Prime</sigvelo-combobox-item>
+*     <sigvelo-combobox-item value="whiskers-wellness">Whiskers Wellness</sigvelo-combobox-item>
+*   </sigvelo-combobox>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .combobox__validation-custom {
+*     sigvelo-combobox:state(user-valid) {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-combobox:state(user-invalid) {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloCombobox = class extends SigveloFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.optionIdCounter = 0;
+		this.localize = new Localize(this);
+		this.open = false;
+		this.inputValue = "";
+		this.activeItem = null;
+		this.selectedItems = [];
+		this.filteredItems = [];
+		this.inputWidth = "auto";
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.liveAnnouncement = "";
+		this.value = "";
+		this.disabled = false;
+		this.required = false;
+		this.multiple = false;
+		this.withClear = false;
+		this.variant = "normal";
+		this.size = "md";
+		this.pill = false;
+		this.placement = "bottom-start";
+		this.distance = 0;
+		this.offset = 0;
+		this.handleInput = () => {
+			this.inputValue = this.textBox.value;
+			this.filterItems(this.inputValue);
+			if (!this.open && this.inputValue && this.filteredItems.length > 0) this.open = true;
+			if (!this.multiple) {
+				const matchingItem = this.findMatchingItem(this.inputValue);
+				if (matchingItem && !matchingItem.disabled) {
+					this.selectedItems.forEach((i) => i.selected = false);
+					matchingItem.selected = true;
+					this.selectedItems = [matchingItem];
+					this.value = matchingItem.value || matchingItem.textContent || "";
+					this.updateFormValue();
+				} else if (this.selectedItems.length > 0) {
+					this.selectedItems[0].selected = false;
+					this.selectedItems = [];
+					this.value = "";
+					this.updateFormValue();
+				}
+			}
+			this.dispatchEvent(new SigveloInputEvent());
+		};
+		this.handleFocus = () => {
+			this.customStates.set("focused", true);
+			this.dispatchEvent(new SigveloFocusEvent());
+			if (!this.open && this.filteredItems.length > 0) this.open = true;
+		};
+		this.handleInputClick = (event) => {
+			event.stopPropagation();
+			if (this.customStates.has("focused") && this.filteredItems.length > 0 && !this.open) this.open = true;
+		};
+		this.handleBlur = (event) => {
+			this.customStates.set("focused", false);
+			const relatedTarget = event.relatedTarget;
+			if (!(relatedTarget && (this.contains(relatedTarget) || this.dropdown?.contains(relatedTarget)))) {
+				this.clearInvalidInput();
+				this.open = false;
+			}
+			this.dispatchEvent(new SigveloBlurEvent());
+		};
+		this.handleKeyDown = (event) => {
+			if (this.disabled) return;
+			if (event.key === "Backspace" && !this.inputValue && this.multiple && this.selectedItems.length > 0) {
+				const lastItem = this.selectedItems[this.selectedItems.length - 1];
+				this.deselectItem(lastItem);
+				return;
+			}
+			if (!this.open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+				event.preventDefault();
+				this.open = true;
+				return;
+			}
+			if (!this.open) return;
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					this.navigateItems(1);
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					this.navigateItems(-1);
+					break;
+				case "Enter":
+					event.preventDefault();
+					if (this.activeItem) this.selectItem(this.activeItem);
+					break;
+				case "Escape":
+					event.preventDefault();
+					this.open = false;
+					break;
+				case "Home":
+					event.preventDefault();
+					if (this.filteredItems.length > 0) this.setActiveItem(this.filteredItems[0], true);
+					break;
+				case "End":
+					event.preventDefault();
+					if (this.filteredItems.length > 0) this.setActiveItem(this.filteredItems[this.filteredItems.length - 1], true);
+					break;
+			}
+		};
+		this.handleDocumentClick = (event) => {
+			const path = event.composedPath();
+			const visualBox = this.shadowRoot?.querySelector("#visual-box");
+			const dropdown = this.dropdown;
+			if (!path.includes(visualBox) && !path.includes(dropdown)) this.open = false;
+		};
+		this.handleDocumentKeyDown = (event) => {
+			if (event.key === "Escape") this.open = false;
+		};
+		this.handleVisualBoxClick = (event) => {
+			if (this.disabled) return;
+			const target = event.target;
+			if (target.closest("#clear-button") || target.closest(".tag-remove")) return;
+			event.stopPropagation();
+			if (this.customStates.has("focused")) this.open = !this.open;
+			this.textBox.focus();
+		};
+		this.handleClear = () => {
+			this.value = this.multiple ? [] : "";
+			this.selectedItems.forEach((item) => item.selected = false);
+			this.selectedItems = [];
+			this.inputValue = "";
+			this.filterItems("");
+			this.updateFormValue();
+			this.hadUserInteraction = true;
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				composed: true,
+				cancelable: false
+			}));
+			this.dispatchEvent(new SigveloChangeEvent());
+			this.textBox.focus();
+		};
+		this.handleSlotChange = () => {
+			this.updateItems();
+		};
+		this.handleItemClick = (event) => {
+			const item = event.target.closest("sigvelo-combobox-item");
+			if (item && !item.disabled) this.selectItem(item);
+		};
+		this.handleItemPointerMove = (event) => {
+			const hoveredItem = event.target.closest("sigvelo-combobox-item");
+			if (!hoveredItem || this.disabled) return;
+			if (hoveredItem !== this.activeItem) {
+				if (this.activeItem) {
+					this.activeItem.active = false;
+					this.activeItem.removeAttribute("data-keyboard-nav");
+				}
+			}
+		};
+		this.handleHostInvalid = () => {
+			this.wasSubmitted = true;
+		};
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [
+			hostStyles,
+			formControlStyles,
+			combobox_styles_default
+		];
+	}
+	get focusableAnchor() {
+		return this.textBox;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("invalid", this.handleHostInvalid);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("invalid", this.handleHostInvalid);
+		this.cleanup?.();
+		this.clearAnnouncementTimers();
+	}
+	firstUpdated() {
+		this.updateItems();
+		this.updateFormValue();
+		this.updateInputWidth();
+	}
+	updated(changedProperties) {
+		this.updateValidity();
+		if (changedProperties.has("open")) {
+			this.customStates.set("open", this.open);
+			if (this.open) this.showDropdown();
+			else this.hideDropdown();
+		}
+		if (changedProperties.has("value")) {
+			this.syncSelectedItems();
+			this.updateFormValue();
+			this.customStates.set("blank", this.isBlank());
+		}
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+		if (this.hadUserInteraction || this.wasSubmitted) {
+			this.customStates.set("user-invalid", this.isInvalid);
+			this.customStates.set("user-valid", !this.isInvalid);
+		} else {
+			this.customStates.set("user-invalid", false);
+			this.customStates.set("user-valid", false);
+		}
+		if (changedProperties.has("multiple")) {
+			this.value = this.multiple ? [] : "";
+			this.selectedItems = [];
+			this.inputValue = "";
+		}
+		if (changedProperties.has("inputValue")) this.updateInputWidth();
+	}
+	formDisabledCallback(disabled) {
+		this.disabled = disabled;
+	}
+	formResetCallback() {
+		const initiallySelectedItems = this.getItems(true).filter((item) => item.hasAttribute("selected"));
+		this.getItems(true).forEach((item) => {
+			item.selected = initiallySelectedItems.includes(item);
+		});
+		if (this.multiple) {
+			this.value = initiallySelectedItems.map((item) => item.value || item.textContent || "");
+			this.selectedItems = initiallySelectedItems;
+		} else {
+			this.value = initiallySelectedItems.length > 0 ? initiallySelectedItems[0].value || initiallySelectedItems[0].textContent || "" : "";
+			this.selectedItems = initiallySelectedItems.length > 0 ? [initiallySelectedItems[0]] : [];
+			this.inputValue = initiallySelectedItems.length > 0 ? initiallySelectedItems[0].getLabelText() : "";
+		}
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.isInvalid = false;
+		this.updateFormValue();
+	}
+	/** Gets all <sigvelo-combobox-item> elements that aren't disabled (by default). */
+	getItems(includeDisabled = false) {
+		const items = [...this.querySelectorAll("sigvelo-combobox-item")];
+		return includeDisabled ? items : items.filter((item) => !item.disabled);
+	}
+	updateItems() {
+		const items = this.getItems(true);
+		items.forEach((item) => {
+			if (!item.id) item.id = `sigvelo-combobox-option-${this.optionIdCounter++}`;
+			item.combobox = this;
+		});
+		this.filteredItems = this.getItems();
+		if (!this.value || Array.isArray(this.value) && this.value.length === 0) {
+			const selectedItems = items.filter((item) => item.hasAttribute("selected"));
+			if (selectedItems.length > 0) {
+				if (this.multiple) {
+					this.value = selectedItems.map((item) => item.value || item.textContent || "");
+					this.selectedItems = selectedItems;
+				} else {
+					this.value = selectedItems[0].value || selectedItems[0].textContent || "";
+					this.selectedItems = [selectedItems[0]];
+				}
+				selectedItems.forEach((item) => item.selected = true);
+			}
+		} else this.syncSelectedItems();
+	}
+	syncSelectedItems() {
+		const items = this.getItems(true);
+		const values = Array.isArray(this.value) ? this.value : [this.value].filter(Boolean);
+		const existingSelectedMap = new Map(this.selectedItems.map((item) => [item.value || item.textContent || "", item]));
+		const newSelectedItems = [];
+		values.forEach((value) => {
+			if (existingSelectedMap.has(value)) {
+				const item = existingSelectedMap.get(value);
+				if (items.includes(item)) newSelectedItems.push(item);
+			} else {
+				const item = items.find((i) => (i.value || i.textContent || "") === value);
+				if (item) newSelectedItems.push(item);
+			}
+		});
+		items.forEach((item) => {
+			const itemValue = item.value || item.textContent || "";
+			item.selected = values.includes(itemValue);
+		});
+		this.selectedItems = newSelectedItems;
+		if (!this.multiple && this.selectedItems.length > 0) this.inputValue = this.selectedItems[0].getLabelText();
+	}
+	findMatchingItem(searchQuery) {
+		return this.getItems(true).find((item) => item.getLabelText().toLowerCase() === searchQuery.trim().toLowerCase());
+	}
+	filterItems(searchQuery, preserveActiveItem = false) {
+		const items = this.getItems();
+		const currentActiveItem = preserveActiveItem ? this.activeItem : null;
+		if (!searchQuery) {
+			this.filteredItems = items;
+			items.forEach((item) => item.hidden = false);
+			if (this.filteredItems.length > 0 && this.customStates.has("focused")) {
+				this.open = true;
+				this.announceFilterResults(this.filteredItems.length);
+			}
+		} else {
+			const lowerQuery = searchQuery.toLowerCase();
+			this.filteredItems = [];
+			items.forEach((item) => {
+				const matches = item.getLabelText().toLowerCase().includes(lowerQuery);
+				item.hidden = !matches;
+				if (matches) this.filteredItems.push(item);
+			});
+			this.announceFilterResults(this.filteredItems.length);
+		}
+		if (this.filteredItems.length === 0 && this.open) this.open = false;
+		else if (this.filteredItems.length > 0 && this.open) if (preserveActiveItem && currentActiveItem && this.filteredItems.includes(currentActiveItem)) this.setActiveItem(currentActiveItem);
+		else this.setActiveItem(this.filteredItems[0]);
+	}
+	setActiveItem(item, isKeyboard = false) {
+		if (this.activeItem) {
+			this.activeItem.active = false;
+			this.activeItem.removeAttribute("data-keyboard-nav");
+		}
+		this.activeItem = item;
+		if (item) {
+			item.active = true;
+			if (isKeyboard) item.setAttribute("data-keyboard-nav", "");
+			item.scrollIntoView({ block: "nearest" });
+			this.announceOption(item);
+		}
+	}
+	navigateItems(direction) {
+		if (this.filteredItems.length === 0) return;
+		if (!this.activeItem) {
+			if (direction > 0) this.setActiveItem(this.filteredItems[0], true);
+			else this.setActiveItem(this.filteredItems[this.filteredItems.length - 1], true);
+			return;
+		}
+		let index = this.filteredItems.indexOf(this.activeItem);
+		index += direction;
+		if (index < 0) index = this.filteredItems.length - 1;
+		else if (index >= this.filteredItems.length) index = 0;
+		this.setActiveItem(this.filteredItems[index], true);
+	}
+	clearInvalidInput() {
+		if (!this.inputValue.trim()) return;
+		const matchingItem = this.findMatchingItem(this.inputValue);
+		if (!matchingItem || matchingItem.disabled) {
+			if (!this.multiple) this.inputValue = this.selectedItems.length > 0 ? this.selectedItems[0].getLabelText() : "";
+			else this.inputValue = "";
+			this.filterItems("");
+			return;
+		}
+	}
+	selectItem(item) {
+		if (item.disabled) return;
+		if (this.multiple) {
+			if (item.selected) this.deselectItem(item);
+			else {
+				item.selected = true;
+				this.selectedItems.push(item);
+				const values = this.selectedItems.map((i) => i.value || i.textContent || "");
+				this.value = values;
+				this.inputValue = "";
+				this.setActiveItem(item);
+				this.filterItems("", true);
+				this.announceChange(this.localize.term("itemAdded", item.textContent || ""));
+			}
+			this.textBox.focus();
+		} else {
+			this.selectedItems.forEach((i) => i.selected = false);
+			item.selected = true;
+			this.selectedItems = [item];
+			this.value = item.value || item.textContent || "";
+			this.inputValue = item.getLabelText();
+			this.open = false;
+			this.announceChange(this.localize.term("itemSelected", item.textContent || ""));
+		}
+		this.hadUserInteraction = true;
+		this.updateFormValue();
+		this.dispatchEvent(new SigveloChangeEvent());
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	deselectItem(item) {
+		item.selected = false;
+		const index = this.selectedItems.indexOf(item);
+		if (index > -1) this.selectedItems.splice(index, 1);
+		if (this.multiple) {
+			const values = this.selectedItems.map((i) => i.value || i.textContent || "");
+			this.value = values;
+			this.announceChange(this.localize.term("itemRemoved", item.textContent || ""));
+		} else {
+			this.value = "";
+			this.inputValue = "";
+		}
+		this.updateFormValue();
+		this.dispatchEvent(new SigveloChangeEvent());
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	removeTag(item, event) {
+		event.stopPropagation();
+		this.deselectItem(item);
+		this.textBox.focus();
+		this.filterItems(this.inputValue);
+	}
+	clearAnnouncementTimers() {
+		if (this.liveRegionTimeoutId) {
+			clearTimeout(this.liveRegionTimeoutId);
+			this.liveRegionTimeoutId = void 0;
+		}
+		if (this.navigationDebounceId) {
+			clearTimeout(this.navigationDebounceId);
+			this.navigationDebounceId = void 0;
+		}
+	}
+	announceChange(message) {
+		requestAnimationFrame(() => {
+			this.liveAnnouncement = "";
+			requestAnimationFrame(() => {
+				this.liveAnnouncement = message;
+			});
+		});
+	}
+	announceOption(item) {
+		this.clearAnnouncementTimers();
+		const position = this.filteredItems.indexOf(item) + 1;
+		const total = this.filteredItems.length;
+		let announcement = `${item.textContent}`;
+		if (total > 0) announcement += `, ${this.localize.term("numberOfTotal", position, total)}`;
+		if (item.selected) announcement += `, ${this.localize.term("selected")}`;
+		if (item.disabled) announcement += `, ${this.localize.term("disabled")}`;
+		this.navigationDebounceId = setTimeout(() => {
+			this.liveAnnouncement = "";
+			requestAnimationFrame(() => {
+				this.liveAnnouncement = announcement;
+			});
+		}, 75);
+	}
+	announceFilterResults(count) {
+		if (this.liveRegionTimeoutId) clearTimeout(this.liveRegionTimeoutId);
+		const announcement = count === 0 ? this.localize.term("noResultsFound") : this.localize.term("resultsAvailable", count);
+		requestAnimationFrame(() => {
+			this.liveAnnouncement = "";
+			requestAnimationFrame(() => {
+				this.liveAnnouncement = announcement;
+			});
+		});
+	}
+	async showDropdown() {
+		if (!this.dropdown) return;
+		const beforeOpenEvent = new SigveloBeforeOpenEvent();
+		this.dispatchEvent(beforeOpenEvent);
+		if (beforeOpenEvent.defaultPrevented) {
+			this.open = false;
+			return;
+		}
+		this.dispatchEvent(new SigveloOpenEvent());
+		this.dropdown.hidden = false;
+		this.dropdown.showPopover();
+		document.addEventListener("click", this.handleDocumentClick);
+		document.addEventListener("keydown", this.handleDocumentKeyDown);
+		this.cleanup = autoUpdate(this.textBox, this.dropdown, () => this.positionDropdown());
+		await animateWithClass(this.dropdown, "show");
+		if (this.filteredItems.length > 0) this.setActiveItem(this.filteredItems[0], false);
+	}
+	async hideDropdown() {
+		if (!this.dropdown || this.dropdown.hidden) return;
+		const beforeCloseEvent = new SigveloBeforeCloseEvent({ source: this });
+		this.dispatchEvent(beforeCloseEvent);
+		if (beforeCloseEvent.defaultPrevented) {
+			this.open = true;
+			return;
+		}
+		document.removeEventListener("click", this.handleDocumentClick);
+		document.removeEventListener("keydown", this.handleDocumentKeyDown);
+		await animateWithClass(this.dropdown, "hide");
+		this.dropdown.hidden = true;
+		this.dropdown.hidePopover();
+		this.cleanup?.();
+		if (this.activeItem) this.activeItem.removeAttribute("data-keyboard-nav");
+		this.dispatchEvent(new SigveloCloseEvent());
+	}
+	async positionDropdown() {
+		const visualBox = this.shadowRoot?.querySelector("#visual-box");
+		if (!visualBox) return;
+		computePosition(visualBox, this.dropdown, {
+			placement: this.placement,
+			middleware: [
+				offset({
+					mainAxis: this.distance,
+					crossAxis: this.offset
+				}),
+				flip(),
+				shift(),
+				size({
+					apply: ({ availableWidth, availableHeight, elements }) => {
+						const referenceWidth = elements.reference.getBoundingClientRect().width;
+						Object.assign(this.dropdown.style, {
+							minWidth: `${referenceWidth}px`,
+							maxWidth: `${Math.min(400, availableWidth)}px`,
+							maxHeight: `${Math.min(300, availableHeight)}px`
+						});
+					},
+					padding: 8
+				})
+			]
+		}).then(({ x, y, placement }) => {
+			this.setAttribute("data-placement", placement);
+			Object.assign(this.dropdown.style, {
+				left: `${x}px`,
+				top: `${y}px`
+			});
+		});
+	}
+	isBlank() {
+		if (this.multiple) return !this.value || Array.isArray(this.value) && this.value.length === 0;
+		return !this.value;
+	}
+	updateFormValue() {
+		if (this.multiple && Array.isArray(this.value)) {
+			const formData = new FormData();
+			this.value.forEach((val) => {
+				formData.append(this.name || "", String(val));
+			});
+			this.internals.setFormValue(formData);
+		} else this.internals.setFormValue(String(this.value || ""));
+	}
+	async updateValidity() {
+		await this.updateComplete;
+		let flags = { valueMissing: this.required && this.isBlank() };
+		const customError = this.getCustomValidity();
+		if (customError) flags.customError = true;
+		this.isInvalid = Object.values(flags).some(Boolean);
+		const message = customError || (flags.valueMissing ? this.localize.term("pleaseSelectAnOption") : "");
+		this.internals.setValidity(flags, message, this.focusableAnchor);
+	}
+	updateInputWidth() {
+		if (!this.multiple) {
+			this.inputWidth = "auto";
+			return;
+		}
+		const text = this.inputValue || this.placeholder || "";
+		const chars = Math.max(8, Math.min(text.length + 2, 50));
+		this.inputWidth = `${chars}ch`;
+	}
+	/**
+	* A custom function for rendering tag content. By default, this function returns the item's full `textContent`. You
+	* can override it to customize the content that gets rendered in tags in `multiple` mode.
+	*/
+	getTagContent(item) {
+		return html`${item.textContent}`;
+	}
+	/** Sets focus to the combobox. */
+	focus() {
+		this.textBox?.focus();
+	}
+	/** Removes focus from the combobox. */
+	blur() {
+		this.textBox?.blur();
+	}
+	render() {
+		const hasLabel = this.label || this.slotsWithContent.has("label");
+		const hasDescription = this.description || this.slotsWithContent.has("description");
+		const hasStart = this.slotsWithContent.has("start");
+		const hasEnd = this.slotsWithContent.has("end");
+		const inputStyles = { width: this.multiple ? this.inputWidth : void 0 };
+		const comboboxDescription = [];
+		if (hasDescription) comboboxDescription.push("description");
+		comboboxDescription.push("combobox-instructions");
+		const ariaDescribedBy = comboboxDescription.join(" ");
+		return html`
+      <label id="label" part="label" for="text-box" class=${classMap({ vh: !hasLabel })}>
+        <slot name="label">${this.label}</slot>
+      </label>
+
+      <div id="description" part="description" class=${classMap({ vh: !hasDescription })}>
+        <slot name="description">${this.description}</slot>
+      </div>
+
+      <!-- Screen reader instructions -->
+      <div id="combobox-instructions" class="vh">
+        ${this.localize.term("useArrowKeysToNavigateEnterToSelect")}
+        ${this.multiple ? this.localize.term("multipleSelectionsAllowed") : ""}
+      </div>
+
+      <div
+        id="visual-box"
+        part="visual-box"
+        class=${classMap({
+			normal: this.variant === "normal",
+			filled: this.variant === "filled",
+			unstyled: this.variant === "unstyled",
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			pill: this.pill,
+			disabled: this.disabled,
+			multiple: this.multiple,
+			"has-clear": this.withClear && !this.isBlank() && !this.disabled,
+			"has-start": hasStart,
+			"has-end": hasEnd
+		})}
+        @click=${this.handleVisualBoxClick}
+      >
+        <slot name="start"></slot>
+
+        <div id="input-area" part="input-area">
+          ${this.multiple ? this.selectedItems.map((item) => html`
+                  <span
+                    part="tag"
+                    class="tag"
+                    @pointerdown=${(event) => event.preventDefault()}
+                  >
+                    ${this.getTagContent(item)}
+                    <button
+                      part="tag-remove"
+                      class="tag-remove"
+                      type="button"
+                      tabindex="-1"
+                      aria-label="${this.localize.term("removeItem", item.textContent || "")}"
+                      @click=${(event) => this.removeTag(item, event)}
+                    >
+                      <sigvelo-icon library="system" name="x"></sigvelo-icon>
+                    </button>
+                  </span>
+                `) : ""}
+
+          <input
+            id="text-box"
+            part="text-box"
+            type="text"
+            role="combobox"
+            aria-expanded=${this.open ? "true" : "false"}
+            aria-autocomplete="list"
+            aria-haspopup="listbox"
+            aria-controls="dropdown"
+            aria-describedby=${ariaDescribedBy}
+            aria-invalid=${this.isInvalid ? "true" : "false"}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            placeholder=${ifDefined(this.placeholder)}
+            .value=${this.inputValue}
+            autocomplete="off"
+            style=${styleMap(inputStyles)}
+            @input=${this.handleInput}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            @keydown=${this.handleKeyDown}
+            @click=${this.handleInputClick}
+          />
+        </div>
+
+        ${this.withClear && !this.isBlank() && !this.disabled ? html`
+              <button
+                id="clear-button"
+                part="clear-button"
+                class="text-box-button"
+                type="button"
+                tabindex="-1"
+                aria-label="${this.localize.term("clearEntry")}"
+                @click=${this.handleClear}
+              >
+                <sigvelo-icon library="system" name="circle-x"></sigvelo-icon>
+              </button>
+            ` : ""}
+
+        <slot name="end"></slot>
+
+        <sigvelo-icon
+          id="chevron"
+          part="chevron"
+          exportparts="svg:chevron__svg"
+          library="system"
+          name="selector"
+        ></sigvelo-icon>
+      </div>
+
+      <div
+        id="dropdown"
+        part="dropdown"
+        role="listbox"
+        aria-label="${this.label}"
+        aria-multiselectable="${this.multiple ? "true" : "false"}"
+        popover="manual"
+        hidden
+        @click=${this.handleItemClick}
+        @pointerdown=${(event) => event.preventDefault()}
+        @pointermove=${this.handleItemPointerMove}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+
+      <div
+        id="live-region"
+        class="vh"
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        aria-relevant="additions text"
+      >
+        ${this.liveAnnouncement}
+      </div>
+    `;
+	}
+};
+__decorate([query("#dropdown")], SigveloCombobox.prototype, "dropdown", void 0);
+__decorate([query("#text-box")], SigveloCombobox.prototype, "textBox", void 0);
+__decorate([state()], SigveloCombobox.prototype, "open", void 0);
+__decorate([state()], SigveloCombobox.prototype, "inputValue", void 0);
+__decorate([state()], SigveloCombobox.prototype, "activeItem", void 0);
+__decorate([state()], SigveloCombobox.prototype, "selectedItems", void 0);
+__decorate([state()], SigveloCombobox.prototype, "filteredItems", void 0);
+__decorate([state()], SigveloCombobox.prototype, "inputWidth", void 0);
+__decorate([state()], SigveloCombobox.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloCombobox.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloCombobox.prototype, "wasSubmitted", void 0);
+__decorate([state()], SigveloCombobox.prototype, "liveAnnouncement", void 0);
+__decorate([property()], SigveloCombobox.prototype, "label", void 0);
+__decorate([property()], SigveloCombobox.prototype, "description", void 0);
+__decorate([property({ reflect: true })], SigveloCombobox.prototype, "name", void 0);
+__decorate([property()], SigveloCombobox.prototype, "value", void 0);
+__decorate([property()], SigveloCombobox.prototype, "placeholder", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloCombobox.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloCombobox.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloCombobox.prototype, "multiple", void 0);
+__decorate([property({
+	attribute: "with-clear",
+	type: Boolean,
+	reflect: true
+})], SigveloCombobox.prototype, "withClear", void 0);
+__decorate([property({ reflect: true })], SigveloCombobox.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], SigveloCombobox.prototype, "size", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloCombobox.prototype, "pill", void 0);
+__decorate([property()], SigveloCombobox.prototype, "placement", void 0);
+__decorate([property({ type: Number })], SigveloCombobox.prototype, "distance", void 0);
+__decorate([property({ type: Number })], SigveloCombobox.prototype, "offset", void 0);
+__decorate([property()], SigveloCombobox.prototype, "form", void 0);
+SigveloCombobox.disableWarning?.("change-in-update");
+customElements.define("sigvelo-combobox", SigveloCombobox);
+//#endregion
+export { SigveloCombobox as t };