@lostgradient/cinder 0.4.0 → 0.4.1

package/dist/components/chat-conversation-header/index.js

@@ -2604,7 +2604,7 @@ function Dropdown_item($$anchor, $$props) {
   const anchorAttributes = $5.derived(() => rest);
   const buttonAttributes = $5.derived(() => rest);
   const buttonType = $5.derived(() => $$props.type ?? "button");
-  const ariaChecked = $5.derived(() => itemRole() === "menuitemradio" ? checked() : undefined);
+  const ariaChecked = $5.derived(() => itemRole() === "menuitemcheckbox" || itemRole() === "menuitemradio" ? checked() : undefined);
   var fragment = $5.comment();
   var node = $5.first_child(fragment);
   {
@@ -3043,6 +3043,50 @@ function observeTextDirection(element, onChange) {
   return () => observer.disconnect();
 }
 
+// src/utilities/typeahead.ts
+function isTypeaheadKey(event2) {
+  return event2.key.length === 1 && event2.key !== " " && !event2.ctrlKey && !event2.metaKey && !event2.altKey && !event2.isComposing;
+}
+function findTypeaheadMatch(candidates, prefix, currentIndex) {
+  if (candidates.length === 0)
+    return;
+  const normalizedPrefix = prefix.toLocaleLowerCase();
+  const startIndex = currentIndex < 0 ? -1 : currentIndex;
+  for (let offset3 = 1;offset3 <= candidates.length; offset3 += 1) {
+    const index = (startIndex + offset3) % candidates.length;
+    const candidate = candidates[index];
+    if (!candidate || candidate.disabled)
+      continue;
+    if (candidate.label.toLocaleLowerCase().startsWith(normalizedPrefix)) {
+      return candidate.value;
+    }
+  }
+  return;
+}
+
+class TypeaheadBuffer {
+  #value = "";
+  #timer = null;
+  push(character) {
+    this.clearTimer();
+    this.#value += character.toLocaleLowerCase();
+    this.#timer = setTimeout(() => {
+      this.reset();
+    }, 500);
+    return this.#value;
+  }
+  reset() {
+    this.clearTimer();
+    this.#value = "";
+  }
+  clearTimer() {
+    if (this.#timer === null)
+      return;
+    clearTimeout(this.#timer);
+    this.#timer = null;
+  }
+}
+
 // src/components/dropdown-menu/dropdown-menu.svelte
 var root_13 = $7.from_html(`<div><!></div>`);
 function Dropdown_menu($$anchor, $$props) {
@@ -3070,6 +3114,7 @@ function Dropdown_menu($$anchor, $$props) {
   const fallbackAnchorElement = $7.derived(() => context.fallbackAnchorElement === undefined ? context.anchorElement : context.fallbackAnchorElement);
   let menuElement = $7.state(null);
   let focusedFallbackOpen = false;
+  const typeaheadBuffer = new TypeaheadBuffer;
   const anchoredFallback = createAnchoredOverlay({
     open: () => context.isOpen && !context.supportsPopover && Boolean($7.get(fallbackAnchorElement)),
     anchor: () => $7.get(fallbackAnchorElement),
@@ -3090,6 +3135,13 @@ function Dropdown_menu($$anchor, $$props) {
     registerMenu($7.get(menuElement));
     return () => registerMenu(null);
   });
+  $7.user_effect(() => {
+    return () => typeaheadBuffer.reset();
+  });
+  $7.user_effect(() => {
+    if (!context.isOpen)
+      typeaheadBuffer.reset();
+  });
   $7.user_effect(() => {
     if ($$props.dir && $$props.dir !== "auto")
       return;
@@ -3112,7 +3164,11 @@ function Dropdown_menu($$anchor, $$props) {
   function getOwnedMenuItems() {
     if (!$7.get(menuElement))
       return [];
-    return Array.from($7.get(menuElement).querySelectorAll('[role="menuitem"]:not([data-disabled]), [role="menuitemradio"]:not([data-disabled])')).filter((item) => item.closest('[role="menu"]') === $7.get(menuElement));
+    return Array.from($7.get(menuElement).querySelectorAll([
+      '[role="menuitem"]:not([data-disabled])',
+      '[role="menuitemcheckbox"]:not([data-disabled])',
+      '[role="menuitemradio"]:not([data-disabled])'
+    ].join(", "))).filter((item) => item.closest('[role="menu"]') === $7.get(menuElement));
   }
   function focusMenuItem(index) {
     const items = getOwnedMenuItems();
@@ -3155,6 +3211,16 @@ function Dropdown_menu($$anchor, $$props) {
       event2.preventDefault();
       event2.stopPropagation();
       focusMenuItem(itemsArray.length - 1);
+    } else if (isTypeaheadKey(event2)) {
+      event2.preventDefault();
+      event2.stopPropagation();
+      const match = findTypeaheadMatch(itemsArray.map((item, index) => ({
+        value: index,
+        label: item.textContent?.trim() ?? "",
+        disabled: item.hasAttribute("data-disabled")
+      })), typeaheadBuffer.push(event2.key), currentIndex);
+      if (match !== undefined)
+        focusMenuItem(match);
     }
   }
   function handleToggle(event2) {
@@ -4054,4 +4120,4 @@ export {
   Chat_conversation_header as ChatConversationHeader
 };
 
-//# debugId=548A70D250FFAE6964756E2164756E21
+//# debugId=B3DD56751DD50D7064756E2164756E21

package/dist/components/combobox/combobox.schema.js

@@ -30,6 +30,10 @@ var schema = {
       type: "string",
       description: "Unique identifier — required for label association and ARIA wiring."
     },
+    name: {
+      type: "string",
+      description: "Native form field name. Renders a hidden input carrying the selected value."
+    },
     inputValue: {
       type: "string",
       description: "Free-text input value (the text the user has typed). Bindable."
@@ -104,4 +108,4 @@ export {
   combobox_schema_default as default
 };
 
-//# debugId=869944A85071F13464756E2164756E21
+//# debugId=0BD15EB0B013E9E964756E2164756E21

package/dist/components/combobox/combobox.types.d.ts

@@ -37,6 +37,8 @@ export type ComboboxProps<T extends string = string> = {
     id: string;
     /** Currently selected value. Bindable. `''` when nothing is selected. */
     value?: NoInfer<T> | '';
+    /** Native form field name. Renders a hidden input carrying the selected value. */
+    name?: string | undefined;
     /** Free-text input value (the text the user has typed). Bindable. */
     inputValue?: string;
     /** Full set of options to filter. The sole inference source for T. */

package/dist/components/combobox/index.js

@@ -2671,12 +2671,13 @@ function Popover($$anchor, $$props) {
 // src/components/combobox/combobox.svelte
 var root_22 = $5.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
 var root_12 = $5.from_html(`<label class="cinder-combobox__label"> <!></label>`);
-var root_6 = $5.from_html(`<img class="cinder-combobox__option-avatar" alt="" loading="lazy"/>`);
-var root_7 = $5.from_html(`<span class="cinder-combobox__option-description"> </span>`);
-var root_5 = $5.from_html(`<li role="option" class="cinder-_option-row cinder-combobox__option"><!> <span class="cinder-combobox__option-text"><span class="cinder-combobox__option-label"> </span> <!></span></li>`);
-var root_4 = $5.from_html(`<ul role="presentation" class="cinder-combobox__listbox"></ul>`);
-var root_8 = $5.from_html(`<p class="cinder-combobox__description"> </p>`);
-var root3 = $5.from_html(`<div><!> <div class="cinder-combobox__control"><input type="text" role="combobox" class="cinder-combobox__input" autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list"/></div> <!> <div class="cinder-combobox__empty" role="status"> </div> <!> <p class="cinder-combobox__error" aria-live="polite"> </p></div>`);
+var root_32 = $5.from_html(`<input type="hidden"/>`);
+var root_7 = $5.from_html(`<img class="cinder-combobox__option-avatar" alt="" loading="lazy"/>`);
+var root_8 = $5.from_html(`<span class="cinder-combobox__option-description"> </span>`);
+var root_6 = $5.from_html(`<li role="option" class="cinder-_option-row cinder-combobox__option"><!> <span class="cinder-combobox__option-text"><span class="cinder-combobox__option-label"> </span> <!></span></li>`);
+var root_5 = $5.from_html(`<ul role="presentation" class="cinder-combobox__listbox"></ul>`);
+var root_9 = $5.from_html(`<p class="cinder-combobox__description"> </p>`);
+var root3 = $5.from_html(`<div><!> <div class="cinder-combobox__control"><input type="text" role="combobox" class="cinder-combobox__input" autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list"/></div> <!> <!> <div class="cinder-combobox__empty" role="status"> </div> <!> <p class="cinder-combobox__error" aria-live="polite"> </p></div>`);
 function Combobox($$anchor, $$props) {
   $5.push($$props, true);
   let value = $5.prop($$props, "value", 15, ""), inputValue = $5.prop($$props, "inputValue", 15, ""), maxVisibleOptions = $5.prop($$props, "maxVisibleOptions", 3, 200);
@@ -2719,8 +2720,12 @@ function Combobox($$anchor, $$props) {
   let open = $5.state(false);
   let activeIndex = $5.state(-1);
   let inputElement = $5.state(null);
+  let hiddenInputElement = $5.state(null);
   let listboxElement = $5.state(null);
   let committedLabel = $5.state("");
+  let resetSyncTimeout;
+  const initialValue = untrack2(() => value());
+  const initialInputValue = untrack2(() => inputValue());
   $5.user_effect(() => {
     $5.get(filteredOptions);
     if ($5.get(activeIndex) >= $5.get(filteredOptions).length) {
@@ -2789,6 +2794,43 @@ function Combobox($$anchor, $$props) {
     $5.set(committedLabel, option.label, true);
     $5.set(open, false);
   }
+  function resetToInitialValue(event2) {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (event2.defaultPrevented)
+        return;
+      value(initialValue);
+      const matched = $$props.options.find((option) => option.value === initialValue);
+      const nextInputValue = matched?.label ?? initialInputValue;
+      inputValue(nextInputValue);
+      $5.set(committedLabel, matched?.label ?? "", true);
+      $5.set(open, false);
+      $5.set(activeIndex, -1);
+      if ($5.get(inputElement))
+        $5.get(inputElement).value = nextInputValue;
+      if ($5.get(hiddenInputElement))
+        $5.get(hiddenInputElement).value = initialValue;
+    }, 0);
+  }
+  $5.user_effect(() => {
+    const input = $5.get(hiddenInputElement);
+    if (input === null)
+      return;
+    const form = input.form;
+    form?.addEventListener("reset", resetToInitialValue);
+    return () => {
+      form?.removeEventListener("reset", resetToInitialValue);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+  $5.user_effect(() => {
+    $5.get(inputElement)?.setCustomValidity($5.get(resolvedRequired) && !value() || inputValue() !== $5.get(committedLabel) ? "Please select an option." : "");
+  });
   function handleKeydown(event2) {
     if (event2.key === "ArrowDown") {
       event2.preventDefault();
@@ -2855,13 +2897,31 @@ function Combobox($$anchor, $$props) {
     });
   }
   var div_1 = $5.sibling(node, 2);
-  var input = $5.child(div_1);
-  $5.remove_input_defaults(input);
-  $5.bind_this(input, ($$value) => $5.set(inputElement, $$value), () => $5.get(inputElement));
+  var input_1 = $5.child(div_1);
+  $5.remove_input_defaults(input_1);
+  $5.bind_this(input_1, ($$value) => $5.set(inputElement, $$value), () => $5.get(inputElement));
   $5.reset(div_1);
   var node_2 = $5.sibling(div_1, 2);
   {
-    var consequent_4 = ($$anchor2) => {
+    var consequent_2 = ($$anchor2) => {
+      var input_2 = root_32();
+      $5.remove_input_defaults(input_2);
+      $5.bind_this(input_2, ($$value) => $5.set(hiddenInputElement, $$value), () => $5.get(hiddenInputElement));
+      $5.template_effect(() => {
+        $5.set_attribute(input_2, "name", $$props.name);
+        $5.set_value(input_2, value());
+        input_2.disabled = $5.get(resolvedDisabled);
+      });
+      $5.append($$anchor2, input_2);
+    };
+    $5.if(node_2, ($$render) => {
+      if ($$props.name)
+        $$render(consequent_2);
+    });
+  }
+  var node_3 = $5.sibling(node_2, 2);
+  {
+    var consequent_5 = ($$anchor2) => {
       Popover($$anchor2, {
         get id() {
           return $5.get(listboxId);
@@ -2882,38 +2942,38 @@ function Combobox($$anchor, $$props) {
           $5.set(open, $$value, true);
         },
         children: ($$anchor3, $$slotProps) => {
-          var ul = root_4();
+          var ul = root_5();
           $5.each(ul, 23, () => $5.get(filteredOptions), (option) => option.value, ($$anchor4, option, index) => {
-            var li = root_5();
-            var node_3 = $5.child(li);
+            var li = root_6();
+            var node_4 = $5.child(li);
             {
-              var consequent_2 = ($$anchor5) => {
-                var img = root_6();
+              var consequent_3 = ($$anchor5) => {
+                var img = root_7();
                 $5.template_effect(() => $5.set_attribute(img, "src", $5.get(option).avatar));
                 $5.append($$anchor5, img);
               };
               var d = $5.derived(() => $5.get(option).avatar?.trim());
-              $5.if(node_3, ($$render) => {
+              $5.if(node_4, ($$render) => {
                 if ($5.get(d))
-                  $$render(consequent_2);
+                  $$render(consequent_3);
               });
             }
-            var span_1 = $5.sibling(node_3, 2);
+            var span_1 = $5.sibling(node_4, 2);
             var span_2 = $5.child(span_1);
             var text_1 = $5.child(span_2, true);
             $5.reset(span_2);
-            var node_4 = $5.sibling(span_2, 2);
+            var node_5 = $5.sibling(span_2, 2);
             {
-              var consequent_3 = ($$anchor5) => {
-                var span_3 = root_7();
+              var consequent_4 = ($$anchor5) => {
+                var span_3 = root_8();
                 var text_2 = $5.child(span_3, true);
                 $5.reset(span_3);
                 $5.template_effect(() => $5.set_text(text_2, $5.get(option).description));
                 $5.append($$anchor5, span_3);
               };
-              $5.if(node_4, ($$render) => {
+              $5.if(node_5, ($$render) => {
                 if ($5.get(option).description)
-                  $$render(consequent_3);
+                  $$render(consequent_4);
               });
             }
             $5.reset(span_1);
@@ -2942,18 +3002,18 @@ function Combobox($$anchor, $$props) {
         $$slots: { default: true }
       });
     };
-    $5.if(node_2, ($$render) => {
+    $5.if(node_3, ($$render) => {
       if ($5.get(open) && $5.get(filteredOptions).length > 0)
-        $$render(consequent_4);
+        $$render(consequent_5);
     });
   }
-  var div_2 = $5.sibling(node_2, 2);
+  var div_2 = $5.sibling(node_3, 2);
   var text_3 = $5.child(div_2, true);
   $5.reset(div_2);
-  var node_5 = $5.sibling(div_2, 2);
+  var node_6 = $5.sibling(div_2, 2);
   {
-    var consequent_5 = ($$anchor2) => {
-      var p = root_8();
+    var consequent_6 = ($$anchor2) => {
+      var p = root_9();
       var text_4 = $5.child(p, true);
       $5.reset(p);
       $5.template_effect(() => {
@@ -2962,38 +3022,39 @@ function Combobox($$anchor, $$props) {
       });
       $5.append($$anchor2, p);
     };
-    $5.if(node_5, ($$render) => {
+    $5.if(node_6, ($$render) => {
       if ($$props.description)
-        $$render(consequent_5);
+        $$render(consequent_6);
     });
   }
-  var p_1 = $5.sibling(node_5, 2);
+  var p_1 = $5.sibling(node_6, 2);
   var text_5 = $5.child(p_1, true);
   $5.reset(p_1);
   $5.reset(div);
   $5.template_effect(($0) => {
     $5.set_class(div, 1, $0);
     $5.set_attribute(div_1, "data-cinder-open", $5.get(open) || undefined);
-    $5.set_attribute(input, "id", $$props.id);
-    input.disabled = $5.get(resolvedDisabled);
-    $5.set_attribute(input, "placeholder", $$props.placeholder);
-    $5.set_value(input, inputValue());
-    $5.set_attribute(input, "aria-expanded", $5.get(open));
-    $5.set_attribute(input, "aria-controls", $5.get(listboxId));
-    $5.set_attribute(input, "aria-activedescendant", $5.get(activeOptionId));
-    $5.set_attribute(input, "aria-invalid", $5.get(field).ariaInvalid);
-    $5.set_attribute(input, "aria-required", $5.get(resolvedRequired) || undefined);
-    $5.set_attribute(input, "aria-describedby", $5.get(describedBy));
+    $5.set_attribute(input_1, "id", $$props.id);
+    input_1.disabled = $5.get(resolvedDisabled);
+    input_1.required = $5.get(resolvedRequired);
+    $5.set_attribute(input_1, "placeholder", $$props.placeholder);
+    $5.set_value(input_1, inputValue());
+    $5.set_attribute(input_1, "aria-expanded", $5.get(open));
+    $5.set_attribute(input_1, "aria-controls", $5.get(listboxId));
+    $5.set_attribute(input_1, "aria-activedescendant", $5.get(activeOptionId));
+    $5.set_attribute(input_1, "aria-invalid", $5.get(field).ariaInvalid);
+    $5.set_attribute(input_1, "aria-required", $5.get(resolvedRequired) || undefined);
+    $5.set_attribute(input_1, "aria-describedby", $5.get(describedBy));
     $5.set_attribute(div_2, "data-cinder-active", $5.get(open) && $5.get(filteredOptions).length === 0 || undefined);
     $5.set_text(text_3, $5.get(open) && $5.get(filteredOptions).length === 0 ? "No results" : "");
     $5.set_attribute(p_1, "id", $5.get(field).ownErrorId ?? $5.get(stableLocalErrorId));
     $5.set_attribute(p_1, "data-cinder-error", !!$$props.error || undefined);
     $5.set_text(text_5, $$props.error ?? "");
   }, [() => $5.clsx(classNames("cinder-combobox", $$props.class))]);
-  $5.delegated("input", input, handleInput);
-  $5.event("focus", input, handleFocus);
-  $5.event("blur", input, handleBlur);
-  $5.delegated("keydown", input, handleKeydown);
+  $5.delegated("input", input_1, handleInput);
+  $5.event("focus", input_1, handleFocus);
+  $5.event("blur", input_1, handleBlur);
+  $5.delegated("keydown", input_1, handleKeydown);
   $5.append($$anchor, div);
   $5.pop();
 }
@@ -3006,4 +3067,4 @@ export {
   Combobox
 };
 
-//# debugId=4FC6265A733AFAA364756E2164756E21
+//# debugId=83CED0F56BF1837C64756E2164756E21

package/dist/components/command-menu/index.js

@@ -2296,17 +2296,21 @@ function hasCommandListContext() {
 import * as $5 from "svelte/internal/client";
 
 // src/utilities/document-order.ts
+var DOCUMENT_POSITION_PRECEDING = 2;
+var DOCUMENT_POSITION_FOLLOWING = 4;
 function inDocumentOrder(items) {
-  return items.toSorted((a, b) => {
+  const sortedItems = [...items];
+  sortedItems.sort((a, b) => {
     if (a.node === b.node)
       return 0;
     const position = a.node.compareDocumentPosition(b.node);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+    if (position & DOCUMENT_POSITION_FOLLOWING)
       return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+    if (position & DOCUMENT_POSITION_PRECEDING)
       return 1;
     return 0;
   });
+  return sortedItems;
 }
 
 // src/components/_internal/create-command-list-state.svelte.ts
@@ -2669,4 +2673,4 @@ export {
   Command_menu as CommandMenu
 };
 
-//# debugId=270F83915598742564756E2164756E21
+//# debugId=89CFB51BF25119F264756E2164756E21

package/dist/components/command-palette/index.js

@@ -134,17 +134,21 @@ function hasCommandListContext() {
 import * as $ from "svelte/internal/client";
 
 // src/utilities/document-order.ts
+var DOCUMENT_POSITION_PRECEDING = 2;
+var DOCUMENT_POSITION_FOLLOWING = 4;
 function inDocumentOrder(items) {
-  return items.toSorted((a, b) => {
+  const sortedItems = [...items];
+  sortedItems.sort((a, b) => {
     if (a.node === b.node)
       return 0;
     const position = a.node.compareDocumentPosition(b.node);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+    if (position & DOCUMENT_POSITION_FOLLOWING)
       return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+    if (position & DOCUMENT_POSITION_PRECEDING)
       return 1;
     return 0;
   });
+  return sortedItems;
 }
 
 // src/components/_internal/create-command-list-state.svelte.ts
@@ -508,4 +512,4 @@ export {
   Command_palette as CommandPalette
 };
 
-//# debugId=504E793111C17A4F64756E2164756E21
+//# debugId=4BC42367FCA200B164756E2164756E21

package/dist/components/context-menu/index.js

@@ -2309,7 +2309,7 @@ function Dropdown_item($$anchor, $$props) {
   const anchorAttributes = $5.derived(() => rest);
   const buttonAttributes = $5.derived(() => rest);
   const buttonType = $5.derived(() => $$props.type ?? "button");
-  const ariaChecked = $5.derived(() => itemRole() === "menuitemradio" ? checked() : undefined);
+  const ariaChecked = $5.derived(() => itemRole() === "menuitemcheckbox" || itemRole() === "menuitemradio" ? checked() : undefined);
   var fragment = $5.comment();
   var node = $5.first_child(fragment);
   {
@@ -2775,6 +2775,50 @@ function observeTextDirection(element, onChange) {
   return () => observer.disconnect();
 }
 
+// src/utilities/typeahead.ts
+function isTypeaheadKey(event) {
+  return event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey && !event.isComposing;
+}
+function findTypeaheadMatch(candidates, prefix, currentIndex) {
+  if (candidates.length === 0)
+    return;
+  const normalizedPrefix = prefix.toLocaleLowerCase();
+  const startIndex = currentIndex < 0 ? -1 : currentIndex;
+  for (let offset3 = 1;offset3 <= candidates.length; offset3 += 1) {
+    const index = (startIndex + offset3) % candidates.length;
+    const candidate = candidates[index];
+    if (!candidate || candidate.disabled)
+      continue;
+    if (candidate.label.toLocaleLowerCase().startsWith(normalizedPrefix)) {
+      return candidate.value;
+    }
+  }
+  return;
+}
+
+class TypeaheadBuffer {
+  #value = "";
+  #timer = null;
+  push(character) {
+    this.clearTimer();
+    this.#value += character.toLocaleLowerCase();
+    this.#timer = setTimeout(() => {
+      this.reset();
+    }, 500);
+    return this.#value;
+  }
+  reset() {
+    this.clearTimer();
+    this.#value = "";
+  }
+  clearTimer() {
+    if (this.#timer === null)
+      return;
+    clearTimeout(this.#timer);
+    this.#timer = null;
+  }
+}
+
 // src/components/dropdown-menu/dropdown-menu.svelte
 var root_12 = $8.from_html(`<div><!></div>`);
 function Dropdown_menu($$anchor, $$props) {
@@ -2802,6 +2846,7 @@ function Dropdown_menu($$anchor, $$props) {
   const fallbackAnchorElement = $8.derived(() => context.fallbackAnchorElement === undefined ? context.anchorElement : context.fallbackAnchorElement);
   let menuElement = $8.state(null);
   let focusedFallbackOpen = false;
+  const typeaheadBuffer = new TypeaheadBuffer;
   const anchoredFallback = createAnchoredOverlay({
     open: () => context.isOpen && !context.supportsPopover && Boolean($8.get(fallbackAnchorElement)),
     anchor: () => $8.get(fallbackAnchorElement),
@@ -2822,6 +2867,13 @@ function Dropdown_menu($$anchor, $$props) {
     registerMenu($8.get(menuElement));
     return () => registerMenu(null);
   });
+  $8.user_effect(() => {
+    return () => typeaheadBuffer.reset();
+  });
+  $8.user_effect(() => {
+    if (!context.isOpen)
+      typeaheadBuffer.reset();
+  });
   $8.user_effect(() => {
     if ($$props.dir && $$props.dir !== "auto")
       return;
@@ -2844,7 +2896,11 @@ function Dropdown_menu($$anchor, $$props) {
   function getOwnedMenuItems() {
     if (!$8.get(menuElement))
       return [];
-    return Array.from($8.get(menuElement).querySelectorAll('[role="menuitem"]:not([data-disabled]), [role="menuitemradio"]:not([data-disabled])')).filter((item) => item.closest('[role="menu"]') === $8.get(menuElement));
+    return Array.from($8.get(menuElement).querySelectorAll([
+      '[role="menuitem"]:not([data-disabled])',
+      '[role="menuitemcheckbox"]:not([data-disabled])',
+      '[role="menuitemradio"]:not([data-disabled])'
+    ].join(", "))).filter((item) => item.closest('[role="menu"]') === $8.get(menuElement));
   }
   function focusMenuItem(index) {
     const items = getOwnedMenuItems();
@@ -2887,6 +2943,16 @@ function Dropdown_menu($$anchor, $$props) {
       event.preventDefault();
       event.stopPropagation();
       focusMenuItem(itemsArray.length - 1);
+    } else if (isTypeaheadKey(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const match = findTypeaheadMatch(itemsArray.map((item, index) => ({
+        value: index,
+        label: item.textContent?.trim() ?? "",
+        disabled: item.hasAttribute("data-disabled")
+      })), typeaheadBuffer.push(event.key), currentIndex);
+      if (match !== undefined)
+        focusMenuItem(match);
     }
   }
   function handleToggle(event) {
@@ -3339,4 +3405,4 @@ export {
   ContextMenu
 };
 
-//# debugId=63A347BCCED5B3B764756E2164756E21
+//# debugId=2701D23C377C637E64756E2164756E21

package/dist/components/data-table/data-table.css

@@ -6,6 +6,7 @@
  * an unstyled table and the scroll override below has no base behaviour to
  * extend. Sibling-leaf paths resolve identically in `src/` and `dist/`. */
 @import '../table/table.css';
+@import '../checkbox/checkbox.css';
 
 @layer cinder.components {
   /* ========================================
@@ -38,6 +39,25 @@
     contain: layout paint;
   }
 
+  .cinder-data-table[data-cinder-selectable] .cinder-table__cell--selection,
+  .cinder-data-table[data-cinder-selectable] .cinder-table__header-cell--selection {
+    width: 1px;
+    padding-inline: var(--cinder-space-3);
+    padding-block: var(--cinder-space-2);
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  .cinder-data-table .cinder-table__cell--selection .cinder-checkbox-field,
+  .cinder-data-table .cinder-table__header-cell--selection .cinder-checkbox-field {
+    display: inline-block;
+  }
+
+  .cinder-data-table .cinder-table__cell--selection .cinder-checkbox-row,
+  .cinder-data-table .cinder-table__header-cell--selection .cinder-checkbox-row {
+    display: inline-flex;
+  }
+
   .cinder-data-table[data-cinder-virtualized] .cinder-table__row[data-cinder-virtual-row] {
     block-size: var(--_cinder-data-table-row-height, 44px);
   }

package/dist/components/data-table/data-table.schema.js

@@ -30,6 +30,14 @@ var schema = {
       type: "string",
       description: "Visual caption rendered as a `<caption>` element above the table."
     },
+    selectable: {
+      enum: ["none", "single", "multiple"],
+      description: 'Enables checkbox-based row selection. `"none"` renders no selection controls,\n`"single"` allows one selected row id, and `"multiple"` allows any number.\nSelection state is exposed through row checkbox controls; native table rows\ndo not emit `aria-selected`.\nDefaults to `"none"`.'
+    },
+    selectAllLabel: {
+      type: "string",
+      description: "Accessible label for the multiple-selection header checkbox."
+    },
     stickyHeader: {
       type: "boolean",
       description: "When true, the header sticks to the top of the scrolling container."
@@ -82,12 +90,33 @@ change the viewport.`
         required: true,
         description: "Column descriptors defining the headers and cell rendering for each column."
       },
+      {
+        name: "getRowId",
+        reason: "function-or-snippet",
+        description: "Resolves the stable row id used for selection. Defaults to `row.id` when it\nis a string or number, otherwise the row's current positional index."
+      },
+      {
+        name: "isRowSelectionDisabled",
+        reason: "function-or-snippet",
+        description: "Returns true when a row should render a disabled selection checkbox."
+      },
       {
         name: "rows",
         reason: "generic-type-parameter",
         required: true,
         description: "Row data. Each entry is read via `column.key` for each column."
       },
+      {
+        name: "rowSelectionLabel",
+        reason: "function-or-snippet",
+        description: "Accessible label for an individual row selection checkbox."
+      },
+      {
+        name: "selectedRowIds",
+        reason: "unknown-shape",
+        description: `Bound selected row ids. Arrays stay arrays on update; Sets stay Sets.
+When omitted, DataTable starts with an empty array.`
+      },
       {
         name: "sort",
         reason: "unknown-shape",
@@ -101,4 +130,4 @@ export {
   data_table_schema_default as default
 };
 
-//# debugId=4910CFBF249E1E5464756E2164756E21
+//# debugId=E30EEB12E6C4EA1464756E2164756E21