@mcp-b/web-components 0.2.0

package/dist/listbox-C3XXRWGX.js

@@ -0,0 +1,1257 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./listbox-item-CwD9s3VY.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 { SigveloBlurEvent, SigveloChangeEvent, SigveloFocusEvent, SigveloInputEvent } from "@mcp-b/wc-support/events/form";
+import formControlStyles from "@mcp-b/wc-support/styles/form-control.styles";
+//#region src/components/listbox/listbox.styles.ts
+var listbox_styles_default = css`
+  #listbox {
+    display: flex;
+    flex-direction: column;
+    height: 12.125em;
+    padding: 0.25em 0;
+    padding: 0.25em;
+    overflow: 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);
+    scrollbar-color: var(--sigvelo-color-neutral-bg) transparent;
+    scrollbar-width: thin;
+  }
+
+  /* Focus state for the listbox */
+  :host(:state(focused)) #listbox {
+    outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
+      var(--sigvelo-color-focus);
+    outline-offset: calc(-1 * var(--sigvelo-border-width));
+  }
+
+  :host(:state(disabled)),
+  :host(:state(disabled)) ::slotted(sigvelo-listbox-item) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .readonly ::slotted(sigvelo-listbox-item) {
+    cursor: default;
+  }
+`;
+//#endregion
+//#region src/components/listbox/listbox.ts
+const nativeFileInput = document.createElement("input");
+nativeFileInput.name = "sigvelo-faux-input";
+nativeFileInput.type = "text";
+nativeFileInput.required = true;
+const VALIDATION_MESSAGE = nativeFileInput.validationMessage;
+/**
+* <sigvelo-listbox>
+*
+* @summary Displays a list of options, allowing users to select one or more items from the available choices.
+* @tag sigvelo-listbox
+* @documentation https://design-system.sigvelo.com/docs/components/listbox
+* @status stable
+* @since 1.0
+*
+* @dependency listbox-item
+*
+* @slot - Listbox items to show in the listbox.
+* @slot label - The listbox's label. For plain-text labels, you can use the `label` attribute instead.
+* @slot description - The listbox's description. For plain-text descriptions, you can use the `description` attribute
+*  instead.
+*
+* @event sigvelo-blur - Emitted when the list box loses focus. This event does not bubble.
+* @event sigvelo-change - Emitted when the user commits changes to the list box's selection. In single select mode, it
+*  occurs when a change is made and the listbox loses focus. In multiselect mode, it occurs whenever an option is
+*  toggled even while the listbox has focus.
+* @event sigvelo-focus - Emitted when the list box receives focus. This event does not bubble.
+* @event sigvelo-input - Emitted when the list box's selection changes from user input.
+*
+* @csspart label - The element that contains the text field's label.
+* @csspart description - The element that contains the text field's description.
+* @csspart listbox - The internal listbox container that holds listbox items.
+*
+* @cssstate disabled - Applied when the text field is disabled.
+* @cssstate blank - Applied when the text field has a blank value.
+* @cssstate focused - Applied when the text field has focus.
+* @cssstate user-valid - Applied when the text field is valid and the user has sufficiently interacted with it.
+* @cssstate user-invalid - Applied when the text field is invalid and the user has sufficiently interacted with it.
+*
+* @example Default
+* Listboxes follow the ARIA APG listbox pattern for accessibility. The listbox is labeled for assistive devices and listbox items are announced as options. To function more like native listboxes, the alternate selection model is used for keyboard interaction.
+*
+* ```html
+* <sigvelo-listbox label="Our kittens" description="Select your new friends." multiple>
+*   <sigvelo-listbox-item value="1">Bella</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="2">Luna</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="3">Meowy McGee</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="4">Milo</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="5">Mittens</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="6">Oliver</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="7">Pepper</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="8">Shadow</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="9">Simba</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="10">Whiskers</sigvelo-listbox-item>
+* </sigvelo-listbox>
+* ```
+*
+* @example Labels and descriptions
+* You can use the `label` and `description` attributes to provide plain text labels and descriptions for the listbox. If you want to provide HTML, use the `label` and `description` slots instead.
+*
+* ```html
+* <sigvelo-listbox>
+*   <span slot="label">Feline <strong>Friends</strong></span>
+*   <span slot="description">
+*     For adoption information, <a href="https://example.com/" target="_blank">visit our cat sanctuary</a>.
+*   </span>
+*   <sigvelo-listbox-item value="1">Whiskers (3 years old)</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="2">Mittens (2 years old)</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="3">Shadow (5 years old)</sigvelo-listbox-item>
+* </sigvelo-listbox>
+* ```
+*
+* @example Providing options
+* Create listbox options by adding `<sigvelo-listbox-item>` elements inside the listbox. Each item should have a `value` attribute that will be submitted with the form.
+*
+* ```html
+* <sigvelo-listbox label="Favorite Cat Toys">
+*   <sigvelo-listbox-item value="feather">Feather Wand</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="laser">Laser Pointer</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="catnip">Catnip Mouse</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="tunnel">Crinkle Tunnel</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="box">Cardboard Box</sigvelo-listbox-item>
+* </sigvelo-listbox>
+* ```
+*
+* Listbox items can have structured content, too.
+*
+* ```html
+* <sigvelo-listbox label="Favorite Cat Toys" id="listbox__options">
+*   <sigvelo-listbox-item value="feather">
+*     <h4>Feather Wand</h4>
+*     <small aria-hidden="true">Interactive toy that mimics bird movements</small>
+*   </sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="laser">
+*     <h4>Laser Pointer</h4>
+*     <small aria-hidden="true">Creates a moving red dot for cats to chase</small>
+*   </sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="catnip">
+*     <h4>Catnip Mouse</h4>
+*     <small aria-hidden="true">Soft toy filled with enticing catnip</small>
+*   </sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="tunnel">
+*     <h4>Crinkle Tunnel</h4>
+*     <small aria-hidden="true">Collapsible tunnel with crinkly material cats love</small>
+*   </sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="box">
+*     <h4>Cardboard Box</h4>
+*     <small aria-hidden="true">Simple but beloved hiding spot for feline friends</small>
+*   </sigvelo-listbox-item>
+* </sigvelo-listbox>
+*
+* <style>
+*   #listbox__options {
+*     &::part(listbox) {
+*       height: auto;
+*     }
+*
+*     h4 {
+*       font-size: 1.125rem;
+*       font-weight: var(--sigvelo-font-weight-semibold);
+*       line-height: 1.4;
+*       margin-block: 0;
+*     }
+*
+*     sigvelo-listbox-item:state(selected) small {
+*       color: var(--sigvelo-color-primary-text-on-subtle);
+*     }
+*   }
+* </style>
+* ```
+*
+* **Warning:** Avoid placing interactive elements such as buttons and links inside the listbox item, as this will hinder accessibility and can lead to unexpected behaviors.
+*
+* @example Providing an initial value
+* Add the `selected` attribute to the listbox item you want to select initially. When using `multiple`, you can apply `selected` to more than one option.
+*
+* ```html
+* <sigvelo-listbox label="Favorite Nap Location">
+*   <sigvelo-listbox-item value="windowsill">Sunny Windowsill</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="lap" selected>Human's Lap</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="bed">Middle of the Bed</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="keyboard">Computer Keyboard</sigvelo-listbox-item>
+* </sigvelo-listbox>
+* ```
+*
+* @example Getting and setting the selection
+* Listboxes provide several properties for interacting with their selection state programmatically. Use the `value` property for getting/setting a single value. Use the `selectedValues` property for multiple values. If you need to get or set a list of selected `<sigvelo-listbox-item>` elements, use the `selectedItems` property.
+*
+* #### Getting the selection
+*
+* Use `value` to get a single value. To get all selected values, use `selectedValues`. If you need to get an array of DOM elements, use `selectedItems`.
+*
+* ```js
+* // Get the first selected value
+* const value = listbox.value;
+*
+* // Get an array of all selected values
+* const values = listbox.selectedValues;
+*
+* // Get an array of all selected listbox item elements
+* const items = listbox.selectedItems;
+* ```
+*
+* #### Setting the selection
+*
+* Use `value` to set a single value. To set multiple values, use `selectedValues`. If you need to get or set the selection via DOM elements, use `selectedItems`.
+*
+* ```js
+* // Set a single value
+* listbox.value = 'a';
+*
+* // Set multiple values
+* listbox.selectedValues = ['a', 'b', 'c'];
+*
+* // Set using DOM elements
+* const itemA = document.querySelector('sigvelo-listbox-item#a');
+* const itemB = document.querySelector('sigvelo-listbox-item#b');
+* const itemC = document.querySelector('sigvelo-listbox-item#c');
+*
+* listbox.selectedItems = [itemA, itemB, itemC];
+* ```
+*
+* #### Convenience methods
+*
+* Use `selectAll()` and `deselectAll()` as a quick way to select all or no items.
+*
+* ```js
+* // Select all items
+* listbox.selectAll();
+*
+* // Deselect all items
+* listbox.deselectAll();
+* ```
+*
+* @example Disabling items
+* Add the `disabled` attribute to individual listbox items to make them non-selectable.
+*
+* ```html
+* <sigvelo-listbox label="Feeding Schedule">
+*   <sigvelo-listbox-item value="morning">Morning (7am)</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="noon">Noon (12pm)</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="night" disabled>Night (10pm) - Currently unavailable</sigvelo-listbox-item>
+* </sigvelo-listbox>
+* ```
+*
+* @example Multiple selection
+* Use the `multiple` attribute to enable multi-selection mode. Users can select multiple items using <sigvelo-hotkey keys="$command" platform="mac"></sigvelo-hotkey> or <sigvelo-hotkey keys="$control" platform="windows"></sigvelo-hotkey> + click, <sigvelo-hotkey keys="$shift"></sigvelo-hotkey> + click for ranges, or <sigvelo-hotkey keys="$cmdctrl A"></sigvelo-hotkey> to select all. For coarse pointers, such as touch, tapping an item will toggle the selection.
+*
+* ```html
+* <sigvelo-listbox label="Kitty Behavior" description="Select your cat's typical antics." multiple>
+*   <sigvelo-listbox-item value="1">Midnight Zoomies</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="2" selected>Knocking Things Off Tables</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="3" selected>Ignoring Expensive Toys</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="4">Sitting on Open Books</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="5">Watching Birds Through Windows</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="6">Following You to the Bathroom</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="7" selected>Demanding Pets Then Biting</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="8">Sleeping in Weird Positions</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="9">Hiding in Paper Bags</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="10">Sudden Grooming Sessions</sigvelo-listbox-item>
+* </sigvelo-listbox>
+* ```
+*
+* @example Changing the size
+* Use the `size` attribute to change the listbox's size.
+*
+* ```html
+* <sigvelo-select label="Select a size" 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-listbox
+*   size="xs"
+*   label="Cat Accessories"
+*   description="Size changes dynamically based on selection above"
+*   id="listbox__size"
+*   multiple
+* >
+*   <sigvelo-listbox-item value="cat-tree">Cat Tree</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="food-bowl">Food Bowl</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="scratching-post">Scratching Post</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="toy-mouse">Toy Mouse</sigvelo-listbox-item>
+* </sigvelo-listbox>
+*
+* <script>
+*   const listbox = document.getElementById('listbox__size');
+*   const select = listbox.previousElementSibling;
+*
+*   select.addEventListener('sigvelo-change', () => {
+*     listbox.size = select.value;
+*   });
+* <\/script>
+* ```
+*
+* @example Disabling
+* Add the `disabled` attribute to disable the entire listbox.
+*
+* ```html
+* <sigvelo-listbox label="Treat Options" description="Treats temporarily unavailable." disabled>
+*   <sigvelo-listbox-item value="1">Tuna Treats</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="2" selected>Chicken Bites</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="3">Salmon Flakes</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="4">Cheese Nibbles</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="5">Catnip Crisps</sigvelo-listbox-item>
+* </sigvelo-listbox>
+* ```
+*
+* @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 listbox. You can control the width of the label by setting the `--label-width` custom property.
+*
+* ```html
+* <sigvelo-listbox
+*   class="sigvelo-side-label"
+*   style="--label-width: 10ch;"
+*   name="fur"
+*   label="Fur Type"
+*   description="What's your cat's coat like?"
+* >
+*   <sigvelo-listbox-item value="short">Short-haired</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="long">Long-haired</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="curly">Curly-coated</sigvelo-listbox-item>
+* </sigvelo-listbox>
+* <br>
+* <sigvelo-listbox
+*   class="sigvelo-side-label"
+*   style="--label-width: 10ch;"
+*   name="eye"
+*   label="Eye Color"
+*   description="What color are your cat's eyes?"
+* >
+*   <sigvelo-listbox-item value="green">Green</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="blue">Blue</sigvelo-listbox-item>
+*   <sigvelo-listbox-item value="amber">Amber</sigvelo-listbox-item>
+* </sigvelo-listbox>
+* ```
+*
+* @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-listbox name="meow" label="Meow Volume" required>
+*     <sigvelo-listbox-item value="1">Barely Audible</sigvelo-listbox-item>
+*     <sigvelo-listbox-item value="2">Conversational</sigvelo-listbox-item>
+*     <sigvelo-listbox-item value="3">Wake the Neighbors</sigvelo-listbox-item>
+*   </sigvelo-listbox>
+*   <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 listbox 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="listbox__custom-validation">
+*   <sigvelo-listbox
+*     name="purr"
+*     label="Purr Intensity"
+*     description="This field will be invalid until custom validation is removed"
+*   >
+*     <sigvelo-listbox-item value="1">Gentle Rumble</sigvelo-listbox-item>
+*     <sigvelo-listbox-item value="2">Medium Motor</sigvelo-listbox-item>
+*     <sigvelo-listbox-item value="3">Thunderous Vibration</sigvelo-listbox-item>
+*   </sigvelo-listbox>
+*   <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('listbox__custom-validation');
+*   const listbox = form.querySelector('sigvelo-listbox');
+*
+*   listbox.setCustomValidity('Not so fast, bubba!');
+* <\/script>
+* ```
+*
+* @example Styling validation
+* You can style valid and invalid listboxes using the `:valid` and `:invalid` pseudo classes.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="listbox__validation-pseudo">
+*   <sigvelo-listbox
+*     name="claws"
+*     label="Claw Trimming"
+*     description="This field is required for grooming appointments"
+*     required
+*   >
+*     <sigvelo-listbox-item value="1">Front Paws Only</sigvelo-listbox-item>
+*     <sigvelo-listbox-item value="2">All Paws</sigvelo-listbox-item>
+*     <sigvelo-listbox-item value="3">No Trimming Needed</sigvelo-listbox-item>
+*   </sigvelo-listbox>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .listbox__validation-pseudo {
+*     sigvelo-listbox:valid {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-listbox: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="listbox__validation-custom">
+*   <sigvelo-listbox
+*     name="diet"
+*     label="Dietary Needs"
+*     description="Please select your cat's dietary preference"
+*     required
+*   >
+*     <sigvelo-listbox-item value="1">Grain-Free Formula</sigvelo-listbox-item>
+*     <sigvelo-listbox-item value="2">Senior Cat Diet</sigvelo-listbox-item>
+*     <sigvelo-listbox-item value="3">Hairball Control</sigvelo-listbox-item>
+*   </sigvelo-listbox>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .listbox__validation-custom {
+*     sigvelo-listbox:state(user-valid) {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-listbox:state(user-invalid) {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Styling listboxes
+* Listboxes are styled like form controls for consistency, but feel free to customize them to your liking. Here's an example you might see in an email client.
+*
+* ```html
+* <sigvelo-listbox
+*   label="Select a message to view"
+*   class="sigvelo-vh-label"
+*   id="listbox__styling"
+* >
+*   <sigvelo-listbox-item value="1000">
+*     <sigvelo-avatar 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>
+*     <h4 class="name">Sir Fluffington III</h4>
+*     <time class="time" datetime="2025-03-20T14:45">2:45 PM</time>
+*     <div class="summary" aria-hidden="true">Just knocked your favorite vase off the shelf. Not sorry.</div>
+*     <sigvelo-icon class="attachment" name="paperclip" label="1 attachment"></sigvelo-icon>
+*   </sigvelo-listbox-item>
+*
+*   <sigvelo-listbox-item value="1001">
+*     <sigvelo-avatar 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>
+*     <h4 class="name">Captain Whiskers</h4>
+*     <time class="time" datetime="2025-03-20T13:37">1:37 PM</time>
+*     <div class="summary" aria-hidden="true">Require immediate attention. Food bowl is half empty. This is an emergency.</div>
+*     <sigvelo-icon class="attachment" name="flag" family="filled" label="Urgent!"></sigvelo-icon>
+*   </sigvelo-listbox-item>
+*
+*   <sigvelo-listbox-item value="1002">
+*     <sigvelo-avatar 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>
+*     <h4 class="name">Lady Purrlington</h4>
+*     <time class="time" datetime="2025-03-20T11:15">11:15 AM</time>
+*     <div class="summary" aria-hidden="true">Your lap is required for napping purposes at 3 PM sharp. Clear your schedule.</div>
+*   </sigvelo-listbox-item>
+*
+*   <sigvelo-listbox-item value="1003">
+*     <sigvelo-avatar 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>
+*     <h4 class="name">Meowy McGee</h4>
+*     <time class="time" datetime="2025-03-20T10:22">10:22 AM</time>
+*     <div class="summary" aria-hidden="true">Spotted a bird outside. Making weird chattering noises. Send help.</div>
+*     <sigvelo-icon class="attachment" name="paperclip" label="1 attachment"></sigvelo-icon>
+*   </sigvelo-listbox-item>
+*
+*   <sigvelo-listbox-item value="1004">
+*     <sigvelo-avatar image="https://images.unsplash.com/photo-1579014868745-23e405c5605d?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*     <h4 class="name">Chairman Meow</h4>
+*     <time class="time" datetime="2025-03-20T09:30">9:30 AM</time>
+*     <div class="summary" aria-hidden="true">Have claimed the new cardboard box. All other cats shall bow to my superiority.</div>
+*   </sigvelo-listbox-item>
+* </sigvelo-listbox>
+*
+* <style>
+*   #listbox__styling {
+*     max-width: 600px;
+*     font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+*
+*     &::part(listbox) {
+*       height: auto;
+*       padding: 0;
+*     }
+*
+*     sigvelo-listbox-item {
+*       display: grid;
+*       grid-template-areas:
+*         "avatar name time"
+*         "avatar summary attachment";
+*       grid-template-columns: auto 1fr auto;
+*       grid-gap: 4px .75em;
+*       padding: .75em;
+*       border-bottom-color: var(--sigvelo-color-neutral-border-subtle);
+*       border-radius: 0;
+*       align-items: center;
+*     }
+*
+*     sigvelo-listbox-item:has(+ sigvelo-listbox-item:state(selected)),
+*     sigvelo-listbox-item:state(selected) {
+*       border-bottom-color: var(--sigvelo-color-neutral-border-muted);
+*     }
+*
+*     &:state(focused) {
+*       sigvelo-listbox-item:has(+ sigvelo-listbox-item:state(selected)),
+*       sigvelo-listbox-item:state(selected) {
+*         border-bottom-color: var(--sigvelo-color-primary-border-muted);
+*       }
+*     }
+*
+*     sigvelo-avatar {
+*       grid-area: avatar;
+*       margin-right: 0.25rem;
+*     }
+*
+*     .name {
+*       grid-area: name;
+*       margin: 0;
+*       font-size: 0.9375rem;
+*       font-weight: var(--sigvelo-font-weight-semibold);
+*     }
+*
+*     .time {
+*       grid-area: time;
+*       font-size: 0.875em;
+*       color: var(--sigvelo-color-text-muted);
+*       justify-self: end;
+*       font-style: normal;
+*     }
+*
+*     .summary {
+*       grid-area: summary;
+*       color: var(--sigvelo-color-text-muted);
+*       font-size: 0.875rem;
+*       white-space: nowrap;
+*       overflow: hidden;
+*       text-overflow: ellipsis;
+*       margin: 0;
+*     }
+*
+*     .attachment {
+*       grid-area: attachment;
+*       color: var(--sigvelo-color-text-muted);
+*       justify-self: end;
+*       font-size: 0.875rem;
+*
+*       &[name="flag"] {
+*         color: crimson;
+*       }
+*     }
+*
+*     sigvelo-listbox-item:state(selected) {
+*       .name,
+*       .time,
+*       .summary,
+*       .attachment {
+*         color: var(--sigvelo-color-primary-text-on-subtle);
+*       }
+*     }
+*   }
+* </style>
+* ```
+*
+* **Note:** Note the use of `aria-hidden` on summaries, which reduces verbosity when used with screen readers.
+*/
+var SigveloListbox = class extends SigveloFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.firstSelectedValue = "";
+		this.hadUserInteraction = false;
+		this.isInvalid = false;
+		this.lastSelectedIndex = -1;
+		this.previousValue = "";
+		this.typeaheadBuffer = "";
+		this.typeaheadTimeout = null;
+		this.wasChanged = false;
+		this.wasSubmitted = false;
+		this.multiple = false;
+		this.disabled = false;
+		this.readonly = false;
+		this.size = "md";
+		this.required = false;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [
+			hostStyles,
+			formControlStyles,
+			listbox_styles_default
+		];
+	}
+	/** The listbox's value. For multiple selection, this will be the value of the first selected item. */
+	get value() {
+		return this.firstSelectedValue;
+	}
+	set value(newValue) {
+		const oldValue = this.firstSelectedValue;
+		if (newValue !== oldValue) {
+			this.firstSelectedValue = newValue;
+			this.updateItemSelectionFromValue(newValue);
+			this.requestUpdate("value", oldValue);
+		}
+	}
+	/**
+	* Gets or sets the currently selected values as an array. This property provides a consistent way to access or modify
+	* the selection state regardless of whether the listbox is in single or multiple selection mode.
+	*
+	* In single selection mode, it returns an array with either zero or one value. In multiple selection mode, it returns
+	* an array of all selected values.
+	*
+	* When setting this property in single mode, the first value in the array (if any) becomes the selected value. In
+	* multiple mode, all values in the array become selected.
+	*/
+	get selectedValues() {
+		return this.getSelectedValues();
+	}
+	set selectedValues(values) {
+		this.setSelectedValues(values);
+	}
+	/** Gets or sets an array of selected listbox items. */
+	get selectedItems() {
+		return this.getItems(true).filter((item) => item.selected);
+	}
+	set selectedItems(items) {
+		if (!Array.isArray(items)) {
+			this.deselectAll();
+			return;
+		}
+		const values = items.map((item) => item?.value).filter(Boolean);
+		this.selectedValues = values;
+	}
+	get focusableAnchor() {
+		return this.listbox;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("invalid", this.handleHostInvalid);
+		this.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("invalid", this.handleHostInvalid);
+		this.removeEventListener("keydown", this.handleKeyDown);
+		this.clearTypeaheadTimeout();
+	}
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this.initializeValueFromSelectedItems();
+		this.initializeItems();
+	}
+	updated(changedProperties) {
+		this.updateValidity();
+		if (changedProperties.has("value")) {
+			this.customStates.set("blank", this.firstSelectedValue === "");
+			this.updateFormValue();
+			this.updateSelectedItems();
+			this.resetRovingTabIndex();
+		}
+		if (changedProperties.has("disabled")) {
+			this.customStates.set("disabled", this.disabled);
+			this.updateListboxAttributesOnItems();
+		}
+		const hadUserInteraction = this.hadUserInteraction || this.wasSubmitted;
+		this.customStates.set("user-invalid", hadUserInteraction && this.isInvalid);
+		this.customStates.set("user-valid", hadUserInteraction && !this.isInvalid);
+	}
+	formDisabledCallback(isDisabled) {
+		this.disabled = isDisabled;
+	}
+	formResetCallback() {
+		this.isInvalid = false;
+		this.wasChanged = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.firstSelectedValue = this.getAttribute("value") ?? "";
+		const initiallySelectedItems = this.getItems(true).filter((item) => item.hasAttribute("selected"));
+		this.getItems(true).forEach((item) => {
+			item.selected = initiallySelectedItems.includes(item);
+		});
+		if (initiallySelectedItems.length > 0) this.firstSelectedValue = initiallySelectedItems[0].value;
+		this.updateFormValue();
+		this.updateSelectedItems();
+	}
+	clearTypeaheadTimeout() {
+		if (this.typeaheadTimeout) {
+			window.clearTimeout(this.typeaheadTimeout);
+			this.typeaheadTimeout = null;
+		}
+	}
+	getItems(includeDisabled = false) {
+		const selector = includeDisabled ? "sigvelo-listbox-item" : "sigvelo-listbox-item:not(:state(disabled))";
+		return [...this.querySelectorAll(selector)];
+	}
+	getSelectedItems() {
+		return this.getItems().filter((item) => item.selected);
+	}
+	initializeValueFromSelectedItems() {
+		const initiallySelectedItems = this.getItems(true).filter((item) => item.hasAttribute("selected") || item.selected);
+		if (initiallySelectedItems.length > 0) if (!this.multiple && initiallySelectedItems.length > 1) {
+			const firstItem = initiallySelectedItems[0];
+			initiallySelectedItems.slice(1).forEach((item) => {
+				item.selected = false;
+			});
+			this.firstSelectedValue = firstItem.value;
+		} else this.firstSelectedValue = initiallySelectedItems[0].value;
+		this.updateFormValue();
+	}
+	initializeItems() {
+		const items = this.getItems();
+		if (items.length > 0) {
+			const selectedItems = this.getSelectedItems();
+			const initialItem = selectedItems.length > 0 ? selectedItems[0] : items[0];
+			this.setActiveItem(initialItem);
+			this.resetRovingTabIndex();
+		}
+	}
+	updateItemSelectionFromValue(newValue) {
+		this.getItems(true).forEach((item) => {
+			item.selected = item.value === newValue;
+		});
+	}
+	updateFormValue() {
+		const selectedItems = this.selectedItems;
+		if (this.multiple && selectedItems.length > 0) {
+			const formData = new FormData();
+			selectedItems.forEach((item) => {
+				formData.append(this.name || "", item.value);
+			});
+			this.internals.setFormValue(formData);
+		} else this.internals.setFormValue(this.firstSelectedValue);
+	}
+	updateSelectedItems() {
+		if (!this.multiple) this.getItems(true).forEach((item) => {
+			item.selected = item.value === this.firstSelectedValue;
+		});
+	}
+	/**
+	* Updates the current value to align with selected items. We track user interaction to allow us to dispatch events
+	* when human changes are made and suppress them for programmatic changes.
+	*/
+	updateValueFromSelectedItems(isUserInteraction = false) {
+		const selectedItems = this.selectedItems;
+		this.previousValue = this.firstSelectedValue;
+		this.firstSelectedValue = selectedItems.length > 0 ? selectedItems[0].value : "";
+		if (isUserInteraction) {
+			this.hadUserInteraction = true;
+			if (this.multiple) {
+				this.dispatchEvent(new SigveloInputEvent());
+				this.dispatchEvent(new Event("input", {
+					bubbles: true,
+					composed: true
+				}));
+				this.dispatchEvent(new SigveloChangeEvent());
+				this.dispatchEvent(new Event("change", {
+					bubbles: true,
+					composed: true
+				}));
+			} else if (this.previousValue !== this.firstSelectedValue) {
+				this.dispatchEvent(new SigveloInputEvent());
+				this.dispatchEvent(new Event("input", {
+					bubbles: true,
+					composed: true
+				}));
+				this.wasChanged = true;
+			}
+		}
+		this.updateFormValue();
+	}
+	handleFocus() {
+		this.customStates.set("focused", true);
+		this.dispatchEvent(new SigveloFocusEvent());
+		if (this.getSelectedItems().length === 0) {
+			const items = this.getItems();
+			if (items.length > 0) {
+				const firstItem = items[0];
+				this.setActiveItem(firstItem);
+				this.updateValueFromSelectedItems();
+			}
+		}
+		this.updateListboxAttributesOnItems();
+	}
+	handleBlur() {
+		this.customStates.set("focused", false);
+		this.dispatchEvent(new SigveloBlurEvent());
+		if (!this.multiple && this.wasChanged && this.previousValue !== this.firstSelectedValue) {
+			this.dispatchEvent(new SigveloChangeEvent());
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+		this.wasChanged = false;
+		this.updateListboxAttributesOnItems();
+	}
+	handleHostInvalid() {
+		this.wasSubmitted = true;
+	}
+	handleLabelClick() {
+		if (!this.disabled) this.focus();
+	}
+	handleListboxPointerDown(event) {
+		event.preventDefault();
+	}
+	handleItemClick(event) {
+		if (this.disabled) return;
+		const item = event.target.closest("sigvelo-listbox-item");
+		if (item?.disabled) return;
+		if (!item) {
+			this.deselectAll();
+			this.updateValueFromSelectedItems(true);
+			return;
+		}
+		const clickedIndex = this.getItems().indexOf(item);
+		if (clickedIndex === -1) return;
+		if (this.lastSelectedIndex === -1) this.lastSelectedIndex = clickedIndex;
+		if (!this.readonly) this.handleItemSelection(item, clickedIndex, event);
+		this.setActiveItem(item);
+		this.listbox.focus();
+		event.preventDefault();
+	}
+	handleItemSelection(item, itemIndex, event) {
+		const mouseEvent = event;
+		const modifiers = {
+			ctrl: mouseEvent.ctrlKey,
+			meta: mouseEvent.metaKey,
+			shift: mouseEvent.shiftKey
+		};
+		let selectionChanged = false;
+		const isCoarsePointer = event instanceof PointerEvent && (event.pointerType === "touch" || window.matchMedia("(pointer: coarse)").matches);
+		if (this.multiple && (modifiers.ctrl || modifiers.meta)) {
+			item.selected = !item.selected;
+			this.lastSelectedIndex = itemIndex;
+			selectionChanged = true;
+		} else if (this.multiple && modifiers.shift) {
+			const items = this.getItems();
+			const start = Math.min(this.lastSelectedIndex !== -1 ? this.lastSelectedIndex : 0, itemIndex);
+			const end = Math.max(this.lastSelectedIndex !== -1 ? this.lastSelectedIndex : 0, itemIndex);
+			selectionChanged = items.some((listItem, i) => {
+				return i >= start && i <= end && !listItem.selected;
+			});
+			if (selectionChanged) items.forEach((listItem, i) => {
+				if (i >= start && i <= end) listItem.selected = true;
+			});
+		} else if (this.multiple && isCoarsePointer) {
+			item.selected = !item.selected;
+			this.lastSelectedIndex = itemIndex;
+			selectionChanged = true;
+		} else if (this.multiple) {
+			const items = this.getItems();
+			selectionChanged = items.some((listItem, i) => {
+				return i === itemIndex && !listItem.selected || i !== itemIndex && listItem.selected;
+			});
+			if (selectionChanged) items.forEach((listItem, i) => {
+				listItem.selected = i === itemIndex;
+			});
+			this.lastSelectedIndex = itemIndex;
+		} else if (!item.selected) {
+			this.selectSingleItem(item);
+			selectionChanged = true;
+		}
+		requestAnimationFrame(() => {
+			if (selectionChanged) this.updateValueFromSelectedItems(true);
+			this.resetRovingTabIndex();
+		});
+	}
+	handleKeyDown(event) {
+		if (event.key.length === 1 && !event.metaKey && !event.ctrlKey) {
+			if (!this.readonly) this.handleTypeahead(event);
+			return;
+		}
+		const items = this.getItems();
+		if (items.length === 0) return;
+		if (this.getSelectedItems().length === 0) {
+			if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+				event.preventDefault();
+				this.navigateToItem(0, items, event);
+				return;
+			} else if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+				event.preventDefault();
+				this.navigateToItem(items.length - 1, items, event);
+				return;
+			}
+		}
+		let activeItem = this.querySelector("sigvelo-listbox-item[active]");
+		let activeIndex = activeItem ? items.indexOf(activeItem) : -1;
+		if (activeIndex === -1) {
+			activeItem = this.getSelectedItems()[0] || items[0];
+			activeIndex = items.indexOf(activeItem);
+			this.setActiveItem(activeItem);
+			event.preventDefault();
+			return;
+		}
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowRight":
+				event.preventDefault();
+				this.navigateToItem(activeIndex + 1, items, event);
+				break;
+			case "ArrowUp":
+			case "ArrowLeft":
+				event.preventDefault();
+				this.navigateToItem(activeIndex - 1, items, event);
+				break;
+			case "Home":
+				event.preventDefault();
+				if (!this.readonly && this.multiple && event.ctrlKey && event.shiftKey) {
+					const currentIndex = items.indexOf(activeItem);
+					for (let i = 0; i <= currentIndex; i++) items[i].selected = true;
+					this.updateValueFromSelectedItems(true);
+					this.navigateToItem(0, items, {
+						shiftKey: false,
+						ctrlKey: true,
+						metaKey: event.metaKey
+					});
+				} else this.navigateToItem(0, items, event);
+				break;
+			case "End":
+				event.preventDefault();
+				if (!this.readonly && this.multiple && event.ctrlKey && event.shiftKey) {
+					const currentIndex = items.indexOf(activeItem);
+					for (let i = currentIndex; i < items.length; i++) items[i].selected = true;
+					this.updateValueFromSelectedItems(true);
+					this.navigateToItem(items.length - 1, items, {
+						shiftKey: false,
+						ctrlKey: true,
+						metaKey: event.metaKey
+					});
+				} else this.navigateToItem(items.length - 1, items, event);
+				break;
+			case " ":
+			case "Enter":
+				event.preventDefault();
+				if (!this.readonly) if (this.multiple && event.shiftKey && !event.ctrlKey && !event.metaKey) {
+					const start = Math.min(this.lastSelectedIndex !== -1 ? this.lastSelectedIndex : 0, activeIndex);
+					const end = Math.max(this.lastSelectedIndex !== -1 ? this.lastSelectedIndex : 0, activeIndex);
+					items.forEach((item, i) => {
+						if (i >= start && i <= end) item.selected = true;
+					});
+					this.updateValueFromSelectedItems(true);
+				} else this.selectWithKeyboard(activeItem, activeIndex, event);
+				break;
+			case "a":
+				if (!this.readonly && (event.ctrlKey || event.metaKey) && this.multiple) {
+					event.preventDefault();
+					this.selectAll();
+				}
+				break;
+		}
+		this.listbox.focus();
+	}
+	/**
+	* Moves the active item, applying the selection semantics implied by the
+	* modifier keys.
+	*
+	* Takes only the modifier flags rather than the `KeyboardEvent`, because two
+	* call sites synthesise a modifier combination that did not happen (Ctrl is
+	* forced on for Ctrl+Shift+Home/End). Spreading a real event to fake that
+	* produced a plain object with none of the event prototype's accessors.
+	*/
+	navigateToItem(index, items, event) {
+		index = Math.max(0, Math.min(index, items.length - 1));
+		const newActiveItem = items[index];
+		this.setActiveItem(newActiveItem);
+		if (this.multiple && !this.readonly) {
+			if (event.shiftKey && !event.ctrlKey && !event.metaKey) {
+				newActiveItem.selected = !newActiveItem.selected;
+				this.lastSelectedIndex = index;
+				this.updateValueFromSelectedItems(true);
+				this.resetRovingTabIndex();
+			} else if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
+				this.selectSingleItem(newActiveItem);
+				this.updateValueFromSelectedItems(true);
+				this.resetRovingTabIndex();
+			}
+		} else if (!this.readonly) {
+			this.selectSingleItem(newActiveItem);
+			this.updateValueFromSelectedItems(true);
+			this.resetRovingTabIndex();
+		}
+	}
+	updateListboxAttributesOnItems() {
+		const isFocused = this.customStates.has("focused");
+		this.getItems(true).forEach((item) => {
+			item.customStates.set("controller-disabled", this.disabled);
+			item.customStates.set("controller-readonly", this.readonly);
+			item.customStates.set("controller-focused", isFocused);
+		});
+	}
+	selectWithKeyboard(activeItem, activeIndex, event) {
+		if (!activeItem) return;
+		const modifiers = {
+			ctrl: event.ctrlKey || event.metaKey,
+			shift: event.shiftKey
+		};
+		if (this.multiple && modifiers.ctrl) {
+			activeItem.selected = !activeItem.selected;
+			this.lastSelectedIndex = activeIndex;
+		} else if (this.multiple && modifiers.shift) {
+			const items = this.getItems();
+			const start = Math.min(this.lastSelectedIndex !== -1 ? this.lastSelectedIndex : 0, activeIndex);
+			const end = Math.max(this.lastSelectedIndex !== -1 ? this.lastSelectedIndex : 0, activeIndex);
+			items.forEach((item, i) => {
+				if (i >= start && i <= end) item.selected = true;
+			});
+		} else this.selectSingleItem(activeItem);
+		this.updateValueFromSelectedItems(true);
+		this.resetRovingTabIndex();
+	}
+	handleSlotChange() {
+		this.updateListboxAttributesOnItems();
+		this.updateSelectedItems();
+		this.resetRovingTabIndex();
+	}
+	selectSingleItem(item) {
+		this.getItems().forEach((listItem) => {
+			listItem.selected = listItem === item;
+		});
+		this.lastSelectedIndex = this.getItems().indexOf(item);
+	}
+	handleTypeahead(event) {
+		if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1) return;
+		this.clearTypeaheadTimeout();
+		this.typeaheadBuffer += event.key.toLowerCase();
+		this.typeaheadTimeout = window.setTimeout(() => {
+			this.typeaheadBuffer = "";
+			this.typeaheadTimeout = null;
+		}, 1e3);
+		const match = this.findTypeaheadMatch();
+		if (match) {
+			this.selectSingleItem(match);
+			this.setActiveItem(match);
+			this.updateValueFromSelectedItems(true);
+		}
+	}
+	findTypeaheadMatch() {
+		const items = this.getItems();
+		const matchText = (idx) => (items[idx].textContent || "").trim().toLowerCase().startsWith(this.typeaheadBuffer);
+		for (let i = 0; i < items.length; i++) if (matchText(i)) return items[i];
+		return null;
+	}
+	setActiveItem(item) {
+		this.getItems(true).forEach((i) => {
+			const isActive = i === item;
+			i.toggleAttribute("active", isActive);
+			i.setAttribute("aria-current", isActive ? "true" : "false");
+		});
+		if (item) requestAnimationFrame(() => this.scrollItemIntoView(item));
+	}
+	scrollItemIntoView(item) {
+		const listbox = this.listbox;
+		const r1 = listbox.getBoundingClientRect();
+		const r2 = item.getBoundingClientRect();
+		const isRTL = this.localize.dir() === "rtl";
+		if (r2.bottom > r1.bottom) listbox.scrollTop += r2.bottom - r1.bottom;
+		else if (r2.top < r1.top) listbox.scrollTop -= r1.top - r2.top;
+		if (isRTL) {
+			if (r1.right < r2.right) listbox.scrollLeft -= r2.right - r1.right;
+			else if (r1.left > r2.left) listbox.scrollLeft += r1.left - r2.left;
+		} else if (r1.left > r2.left) listbox.scrollLeft += r2.left - r1.left;
+		else if (r1.right < r2.right) listbox.scrollLeft -= r1.right - r2.right;
+	}
+	async updateValidity() {
+		await this.updateComplete;
+		const isValueMissing = this.required && this.firstSelectedValue === "";
+		const hasCustomValidity = this.getCustomValidity().length > 0;
+		this.isInvalid = isValueMissing || hasCustomValidity;
+		this.internals.setValidity({
+			badInput: false,
+			customError: hasCustomValidity,
+			patternMismatch: false,
+			rangeOverflow: false,
+			rangeUnderflow: false,
+			stepMismatch: false,
+			tooLong: false,
+			tooShort: false,
+			typeMismatch: false,
+			valueMissing: isValueMissing
+		}, isValueMissing ? VALIDATION_MESSAGE : this.getCustomValidity(), this.focusableAnchor);
+	}
+	/**
+	* @internal Manage tab order and focus tracking for keyboard navigation
+	*/
+	resetRovingTabIndex() {
+		const items = this.getItems();
+		const selectedItem = this.getSelectedItems()[0];
+		const targetIndex = selectedItem ? items.indexOf(selectedItem) : 0;
+		items.forEach((item, index) => {
+			item.tabIndex = -1;
+			item.setAttribute("aria-current", index === targetIndex ? "true" : "false");
+		});
+	}
+	/** Returns an array of all selected values. */
+	getSelectedValues() {
+		return this.selectedItems.map((item) => item.value);
+	}
+	/**
+	* Sets the selected items by value(s) without triggering events.
+	* Works for both single and multiple selection modes.
+	* @param {string|string[]} values - Value(s) to select
+	*/
+	setSelectedValues(values) {
+		const items = this.getItems(true);
+		const valueArray = Array.isArray(values) ? values : [values];
+		if (this.multiple) items.forEach((item) => {
+			item.selected = valueArray.includes(item.value);
+		});
+		else {
+			const firstValue = valueArray[0];
+			items.forEach((item) => {
+				item.selected = item.value === firstValue;
+			});
+		}
+		this.updateValueFromSelectedItems(false);
+	}
+	/** Convenience method for selecting all items. */
+	selectAll() {
+		if (!this.multiple) return;
+		this.getItems().forEach((item) => item.selected = true);
+		this.updateValueFromSelectedItems();
+	}
+	/** Convenience method for deselecting all items. */
+	deselectAll() {
+		this.getItems().forEach((item) => item.selected = false);
+		this.updateValueFromSelectedItems();
+	}
+	/** Sets focus to the listbox. */
+	focus() {
+		this.listbox.focus();
+	}
+	/** Removes focus from the listbox. */
+	blur() {
+		this.listbox.blur();
+	}
+	render() {
+		const hasLabel = this.label || this.slotsWithContent.has("label");
+		const hasDescription = this.description || this.slotsWithContent.has("description");
+		return html`
+      <label
+        id="label"
+        part="label"
+        for="listbox"
+        class=${classMap({ vh: !hasLabel })}
+        @click=${this.handleLabelClick}
+      >
+        <slot name="label">${this.label}</slot>
+      </label>
+
+      <div id="description" part="description" class=${classMap({ vh: !hasDescription })}>
+        <slot name="description">${this.description}</slot>
+      </div>
+
+      <div
+        id="listbox"
+        part="listbox"
+        class=${classMap({
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			disabled: this.disabled,
+			readonly: this.readonly,
+			multiple: this.multiple
+		})}
+        role="listbox"
+        aria-multiselectable=${this.multiple ? "true" : "false"}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-readonly=${this.readonly ? "true" : "false"}
+        aria-required=${this.required ? "true" : "false"}
+        aria-labelledby="label"
+        aria-describedby="description"
+        tabindex=${this.disabled ? "-1" : "0"}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @pointerdown=${this.handleListboxPointerDown}
+        @click=${this.handleItemClick}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+__decorate([query("#listbox")], SigveloListbox.prototype, "listbox", void 0);
+__decorate([state()], SigveloListbox.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloListbox.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloListbox.prototype, "lastSelectedIndex", void 0);
+__decorate([state()], SigveloListbox.prototype, "previousValue", void 0);
+__decorate([state()], SigveloListbox.prototype, "typeaheadBuffer", void 0);
+__decorate([state()], SigveloListbox.prototype, "typeaheadTimeout", void 0);
+__decorate([state()], SigveloListbox.prototype, "wasChanged", void 0);
+__decorate([state()], SigveloListbox.prototype, "wasSubmitted", void 0);
+__decorate([property()], SigveloListbox.prototype, "label", void 0);
+__decorate([property()], SigveloListbox.prototype, "description", void 0);
+__decorate([property({ reflect: true })], SigveloListbox.prototype, "name", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloListbox.prototype, "multiple", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloListbox.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloListbox.prototype, "readonly", void 0);
+__decorate([property({ reflect: true })], SigveloListbox.prototype, "size", void 0);
+__decorate([property()], SigveloListbox.prototype, "form", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloListbox.prototype, "required", void 0);
+__decorate([property()], SigveloListbox.prototype, "value", null);
+__decorate([property({ type: Array })], SigveloListbox.prototype, "selectedValues", null);
+SigveloListbox.disableWarning?.("change-in-update");
+customElements.define("sigvelo-listbox", SigveloListbox);
+//#endregion
+export { SigveloListbox as t };