@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/code-block/index.js

@@ -23,7 +23,6 @@ function devWarn(message, ...args) {
 
 // src/components/copy-button/copy-button.svelte
 import * as $5 from "svelte/internal/server";
-import { onDestroy } from "svelte";
 
 // ../../node_modules/lucide-svelte/dist/icons/check.svelte
 import * as $2 from "svelte/internal/server";
@@ -231,10 +230,6 @@ function Copy_button($$renderer, $$props) {
         copied = false;
       }, confirmDuration);
     }
-    onDestroy(() => {
-      if (resetTimer)
-        clearTimeout(resetTimer);
-    });
     $$renderer2.push(`<button${$5.attributes({
       ...rest,
       type: "button",
@@ -337,4 +332,4 @@ export {
   Code_block as CodeBlock
 };
 
-//# debugId=73113DA0B742CA5064756E2164756E21
+//# debugId=D5156BC6EDF54B2164756E2164756E21

package/dist/server/components/collapsible/collapsible.schema.js

@@ -42,7 +42,7 @@ manages.`,
         description: "Panel content shown when open."
       },
       {
-        name: "onToggle",
+        name: "ontoggle",
         reason: "function-or-snippet",
         description: "Fired on every successful toggle with the next open state. Not called while disabled."
       }
@@ -54,4 +54,4 @@ export {
   collapsible_schema_default as default
 };
 
-//# debugId=DC22AB2136C36D4564756E2164756E21
+//# debugId=2121F2B1C83EEF7164756E2164756E21

package/dist/server/components/collapsible/index.js

@@ -34,7 +34,7 @@ function Collapsible($$renderer, $$props) {
       trigger,
       children,
       open = false,
-      onToggle,
+      ontoggle,
       disabled = false,
       idBase,
       class: className,
@@ -53,7 +53,7 @@ function Collapsible($$renderer, $$props) {
         return;
       const next = !open;
       open = next;
-      onToggle?.(next);
+      ontoggle?.(next);
     }
     $$renderer2.push(`<div${$2.attributes({
       ...rest,
@@ -90,4 +90,4 @@ export {
   Collapsible
 };
 
-//# debugId=511748EF8520777464756E2164756E21
+//# debugId=2BD730369B703B9D64756E2164756E21

package/dist/server/components/color-field/color-field.schema.js

@@ -51,11 +51,11 @@ committed hex value to native form submission.`
       type: "string",
       description: "Placeholder text for the inner `<input>`."
     },
-    ariaLabel: {
+    "aria-label": {
       type: "string",
       description: "Accessible label applied directly to the inner `<input>` when no `FormField` wraps it."
     },
-    ariaLabelledby: {
+    "aria-labelledby": {
       type: "string",
       description: "Id of an external element that labels the inner `<input>`."
     },
@@ -89,4 +89,4 @@ export {
   color_field_schema_default as default
 };
 
-//# debugId=632BA044A28544EC64756E2164756E21
+//# debugId=6ECED5ADAB37344564756E2164756E21

package/dist/server/components/color-field/index.js

@@ -247,6 +247,13 @@ function setFormFieldContext(context) {
 }
 var getFormFieldContext = optionalContext(getFormFieldContextStrict);
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/input/input.svelte
 function calendarIcon($$renderer) {
   $$renderer.push(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
@@ -256,6 +263,7 @@ function Input($$renderer, $$props) {
     let {
       id,
       value = "",
+      onValueChange,
       label,
       description,
       error,
@@ -268,44 +276,80 @@ function Input($$renderer, $$props) {
       leadingInteractive = false,
       trailingInteractive = false,
       "aria-describedby": consumerDescribedBy,
+      "aria-invalid": consumerInvalid,
+      oninput: consumerOninput,
       $$slots,
       $$events,
       ...rest
     } = $$props;
     const context = getFormFieldContext();
-    const defaultDescriptionId = $.derived(() => describeId(id, !!description));
-    const defaultErrorId = $.derived(() => errorId(id, !!error));
-    const ownDescriptionId = $.derived(() => description && defaultDescriptionId() === context?.descriptionId ? `${id}-input-description` : defaultDescriptionId());
-    const ownErrorId = $.derived(() => error && defaultErrorId() === context?.errorId ? `${id}-input-error` : defaultErrorId());
-    const resolvedDescriptionId = $.derived(() => ownDescriptionId() ?? context?.descriptionId);
-    const resolvedErrorId = $.derived(() => ownErrorId() ?? context?.errorId);
-    const describedBy = $.derived(() => composeDescribedBy(resolvedDescriptionId(), resolvedErrorId(), consumerDescribedBy));
-    const resolvedAriaInvalid = $.derived(() => error ? ariaInvalid(true) : context?.invalid ?? rest["aria-invalid"] ?? ariaInvalid(false));
-    const resolvedRequired = $.derived(() => required ?? context?.required ?? false);
-    const resolvedDisabled = $.derived(() => disabled ?? context?.disabled ?? false);
+    const field = $.derived(() => resolveFieldControl({
+      id,
+      generatedId: id,
+      context,
+      hasDescription: !!description,
+      hasError: !!error,
+      localIdNamespace: "input",
+      consumerDescribedBy,
+      consumerInvalid,
+      required,
+      disabled
+    }));
+    const ownDescriptionId = $.derived(() => field().ownDescriptionId);
+    const ownErrorId = $.derived(() => field().ownErrorId);
+    const describedBy = $.derived(() => field().describedBy);
+    const resolvedAriaInvalid = $.derived(() => field().ariaInvalid);
+    const resolvedRequired = $.derived(() => field().required);
+    const resolvedDisabled = $.derived(() => field().disabled);
     const isNativeDateInput = $.derived(() => type === "date");
     const rendersNativeDateIcon = $.derived(() => isNativeDateInput() && !trailing);
     const hasTrailing = $.derived(() => !!trailing || isNativeDateInput());
     const hasGroupWrapper = $.derived(() => !!leading || hasTrailing());
-    const isInvalid = $.derived(() => resolvedAriaInvalid() === "true" || resolvedAriaInvalid() === true);
+    const isInvalid = $.derived(() => resolvedAriaInvalid() === "true");
+    let inputNode = undefined;
+    let resetSyncTimeout;
+    function syncValueAfterFormReset() {
+      if (resetSyncTimeout !== undefined)
+        clearTimeout(resetSyncTimeout);
+      resetSyncTimeout = setTimeout(() => {
+        resetSyncTimeout = undefined;
+        if (inputNode)
+          value = inputNode.value;
+      }, 0);
+    }
+    function handleInput(event) {
+      const target = event.currentTarget;
+      const committed = commitValue(target.value, onValueChange, (next) => {
+        value = next;
+      });
+      target.value = committed;
+      consumerOninput?.(event);
+    }
     function inputElement($$renderer3) {
       $$renderer3.push(`<input${$.attributes({
         id,
         type,
+        ...rest,
         disabled: resolvedDisabled(),
         required: resolvedRequired(),
         value,
         class: $.clsx(classNames("cinder-input", className)),
         "data-cinder-native-date": rendersNativeDateIcon() ? "" : undefined,
         "aria-invalid": resolvedAriaInvalid(),
-        "aria-describedby": describedBy(),
-        ...rest
+        "aria-describedby": describedBy()
       }, undefined, undefined, undefined, 4)}/>`);
     }
     $$renderer2.push(`<div class="cinder-input-field">`);
     if (label) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<label${$.attr("for", id)} class="cinder-input-field__label"${$.attr("data-disabled", resolvedDisabled() || undefined)}>${$.escape(label)}</label>`);
+      $$renderer2.push(`<label${$.attr("for", id)} class="cinder-input-field__label"${$.attr("data-disabled", resolvedDisabled() || undefined)}>${$.escape(label)} `);
+      if (resolvedRequired()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></label>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
@@ -376,8 +420,8 @@ function Color_field($$renderer, $$props) {
       readonly = false,
       name,
       placeholder,
-      ariaLabel,
-      ariaLabelledby,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
       errorMessage,
       enterBehavior = "commit-then-submit",
       onchange
@@ -645,4 +689,4 @@ export {
   Color_field as ColorField
 };
 
-//# debugId=FCD237139D95A34764756E2164756E21
+//# debugId=E970244BEEE948C364756E2164756E21

package/dist/server/components/color-picker/index.js

@@ -366,34 +366,51 @@ function Color_swatch_picker($$renderer, $$props) {
     } = $$props;
     let internalValue = untrack(() => defaultValue) ?? "";
     const selected = $3.derived(() => value ?? internalValue);
+    const renderableColors = $3.derived(() => {
+      const seen = new Set;
+      const result = [];
+      let hasDuplicates = false;
+      for (const swatch of colors) {
+        if (seen.has(swatch.color)) {
+          hasDuplicates = true;
+        } else {
+          seen.add(swatch.color);
+          result.push(swatch);
+        }
+      }
+      if (hasDuplicates) {
+        devWarn("[ColorSwatchPicker] Duplicate color values detected in palette. " + "Only the first matching swatch will be shown as selected. Duplicates were removed.");
+      }
+      return result;
+    });
     let userFocusIndex = null;
     const effectiveFocusIndex = $3.derived(() => {
-      if (colors.length === 0)
+      if (renderableColors().length === 0)
         return -1;
-      if (userFocusIndex !== null && userFocusIndex < colors.length && !colors[userFocusIndex]?.disabled) {
+      if (userFocusIndex !== null && userFocusIndex < renderableColors().length && !renderableColors()[userFocusIndex]?.disabled) {
         return userFocusIndex;
       }
-      const selectedIndex2 = colors.findIndex((s) => s.color === selected());
-      if (selectedIndex2 !== -1 && !colors[selectedIndex2]?.disabled) {
+      const selectedIndex2 = renderableColors().findIndex((s) => s.color === selected());
+      if (selectedIndex2 !== -1 && !renderableColors()[selectedIndex2]?.disabled) {
         return selectedIndex2;
       }
-      const firstEnabled = colors.findIndex((s) => !s.disabled);
+      const firstEnabled = renderableColors().findIndex((s) => !s.disabled);
       if (firstEnabled !== -1)
         return firstEnabled;
       return 0;
     });
     let liRefs = [];
-    const selectedIndex = $3.derived(() => colors.findIndex((s) => s.color === selected()));
+    const selectedIndex = $3.derived(() => renderableColors().findIndex((s) => s.color === selected()));
     function isItemDisabledForRoving(index) {
-      return colors[index]?.disabled === true;
+      return renderableColors()[index]?.disabled === true;
     }
     function isInteractive(index) {
-      return !disabled && !colors[index]?.disabled;
+      return !disabled && !renderableColors()[index]?.disabled;
     }
     function selectSwatch(index) {
       if (!isInteractive(index))
         return;
-      const swatch = colors[index];
+      const swatch = renderableColors()[index];
       if (!swatch)
         return;
       internalValue = swatch.color;
@@ -410,7 +427,7 @@ function Color_swatch_picker($$renderer, $$props) {
         selectSwatch(effectiveFocusIndex());
         return;
       }
-      const newIndex = handleRovingKeydown(event, effectiveFocusIndex(), colors.length, {
+      const newIndex = handleRovingKeydown(event, effectiveFocusIndex(), renderableColors().length, {
         vertical: true,
         horizontal: layout === "grid",
         isDisabled: isItemDisabledForRoving
@@ -431,7 +448,7 @@ function Color_swatch_picker($$renderer, $$props) {
       selectSwatch(index);
     }
     $$renderer2.push(`<ul role="listbox"${$3.attr("aria-label", label)}${$3.attr("aria-disabled", disabled ? "true" : undefined)}${$3.attr("aria-orientation", layout === "stack" ? "vertical" : undefined)}${$3.attr_class($3.clsx(classNames("cinder-color-swatch-picker", className)))}${$3.attr("data-cinder-size", size)}${$3.attr("data-cinder-shape", shape)}${$3.attr("data-cinder-layout", layout)}><!--[-->`);
-    const each_array = $3.ensure_array_like(colors);
+    const each_array = $3.ensure_array_like(renderableColors());
     for (let index = 0, $$length = each_array.length;index < $$length; index++) {
       let swatch = each_array[index];
       const isSelected = index === selectedIndex();
@@ -908,4 +925,4 @@ export {
   Color_picker as ColorPicker
 };
 
-//# debugId=FA3B6A778C4BAC0364756E2164756E21
+//# debugId=354B39DF82DCC64A64756E2164756E21

package/dist/server/components/color-swatch-picker/index.js

@@ -362,34 +362,51 @@ function Color_swatch_picker($$renderer, $$props) {
     } = $$props;
     let internalValue = untrack(() => defaultValue) ?? "";
     const selected = $3.derived(() => value ?? internalValue);
+    const renderableColors = $3.derived(() => {
+      const seen = new Set;
+      const result = [];
+      let hasDuplicates = false;
+      for (const swatch of colors) {
+        if (seen.has(swatch.color)) {
+          hasDuplicates = true;
+        } else {
+          seen.add(swatch.color);
+          result.push(swatch);
+        }
+      }
+      if (hasDuplicates) {
+        devWarn("[ColorSwatchPicker] Duplicate color values detected in palette. " + "Only the first matching swatch will be shown as selected. Duplicates were removed.");
+      }
+      return result;
+    });
     let userFocusIndex = null;
     const effectiveFocusIndex = $3.derived(() => {
-      if (colors.length === 0)
+      if (renderableColors().length === 0)
         return -1;
-      if (userFocusIndex !== null && userFocusIndex < colors.length && !colors[userFocusIndex]?.disabled) {
+      if (userFocusIndex !== null && userFocusIndex < renderableColors().length && !renderableColors()[userFocusIndex]?.disabled) {
         return userFocusIndex;
       }
-      const selectedIndex2 = colors.findIndex((s) => s.color === selected());
-      if (selectedIndex2 !== -1 && !colors[selectedIndex2]?.disabled) {
+      const selectedIndex2 = renderableColors().findIndex((s) => s.color === selected());
+      if (selectedIndex2 !== -1 && !renderableColors()[selectedIndex2]?.disabled) {
         return selectedIndex2;
       }
-      const firstEnabled = colors.findIndex((s) => !s.disabled);
+      const firstEnabled = renderableColors().findIndex((s) => !s.disabled);
       if (firstEnabled !== -1)
         return firstEnabled;
       return 0;
     });
     let liRefs = [];
-    const selectedIndex = $3.derived(() => colors.findIndex((s) => s.color === selected()));
+    const selectedIndex = $3.derived(() => renderableColors().findIndex((s) => s.color === selected()));
     function isItemDisabledForRoving(index) {
-      return colors[index]?.disabled === true;
+      return renderableColors()[index]?.disabled === true;
     }
     function isInteractive(index) {
-      return !disabled && !colors[index]?.disabled;
+      return !disabled && !renderableColors()[index]?.disabled;
     }
     function selectSwatch(index) {
       if (!isInteractive(index))
         return;
-      const swatch = colors[index];
+      const swatch = renderableColors()[index];
       if (!swatch)
         return;
       internalValue = swatch.color;
@@ -406,7 +423,7 @@ function Color_swatch_picker($$renderer, $$props) {
         selectSwatch(effectiveFocusIndex());
         return;
       }
-      const newIndex = handleRovingKeydown(event, effectiveFocusIndex(), colors.length, {
+      const newIndex = handleRovingKeydown(event, effectiveFocusIndex(), renderableColors().length, {
         vertical: true,
         horizontal: layout === "grid",
         isDisabled: isItemDisabledForRoving
@@ -427,7 +444,7 @@ function Color_swatch_picker($$renderer, $$props) {
       selectSwatch(index);
     }
     $$renderer2.push(`<ul role="listbox"${$3.attr("aria-label", label)}${$3.attr("aria-disabled", disabled ? "true" : undefined)}${$3.attr("aria-orientation", layout === "stack" ? "vertical" : undefined)}${$3.attr_class($3.clsx(classNames("cinder-color-swatch-picker", className)))}${$3.attr("data-cinder-size", size)}${$3.attr("data-cinder-shape", shape)}${$3.attr("data-cinder-layout", layout)}><!--[-->`);
-    const each_array = $3.ensure_array_like(colors);
+    const each_array = $3.ensure_array_like(renderableColors());
     for (let index = 0, $$length = each_array.length;index < $$length; index++) {
       let swatch = each_array[index];
       const isSelected = index === selectedIndex();
@@ -463,4 +480,4 @@ export {
   Color_swatch_picker as ColorSwatchPicker
 };
 
-//# debugId=527364CCAFE01AEA64756E2164756E21
+//# debugId=6C4D632F3ADE364264756E2164756E21

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

@@ -33,7 +33,11 @@ var schema = {
     },
     disabled: {
       type: "boolean",
-      description: "Disables the combobox."
+      description: "Disables the combobox. Inherited from a wrapping FormField when unset."
+    },
+    required: {
+      type: "boolean",
+      description: "Marks the field required: renders the required marker on the label and\nsets `aria-required` on the input. Inherited from a wrapping FormField\nwhen unset."
     },
     maxVisibleOptions: {
       type: "number",
@@ -81,4 +85,4 @@ export {
   combobox_schema_default as default
 };
 
-//# debugId=B87E00F7007C76F364756E2164756E21
+//# debugId=799A99BF4A880DFB64756E2164756E21

package/dist/server/components/combobox/index.js

@@ -148,6 +148,27 @@ function resolveFieldControl(input) {
   };
 }
 
+// src/_internal/form-field-context.ts
+import { createContext } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/form-field-context.ts
+var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext();
+function setFormFieldContext(context) {
+  setFormFieldContextRaw(context);
+}
+var getFormFieldContext = optionalContext(getFormFieldContextStrict);
+
 // src/_internal/overlay.ts
 var escapeStack = [];
 function pushEscapeHandler(handler) {
@@ -255,6 +276,10 @@ function restoreFocusTo(target) {
 }
 
 // src/utilities/attachments.ts
+function isInsideEventPath(event, element) {
+  const path = event.composedPath();
+  return path.some((entry) => entry instanceof Node && element.contains(entry));
+}
 function createClickOutside(options) {
   const { handler, enabled = true, eventType = "click", capture = true, ignoreRefs } = options;
   return (node) => {
@@ -262,17 +287,19 @@ function createClickOutside(options) {
       const isEnabled = typeof enabled === "function" ? enabled() : enabled;
       if (!isEnabled)
         return;
+      if (event.type === "touchstart" && !event.cancelable)
+        return;
       const target = event.target;
       if (!(target instanceof Node)) {
         handler();
         return;
       }
-      if (node.contains(target))
+      if (isInsideEventPath(event, node))
         return;
       if (ignoreRefs) {
         for (const ref of ignoreRefs) {
           const element = ref();
-          if (element && element.contains(target))
+          if (element && isInsideEventPath(event, element))
             return;
         }
       }
@@ -472,15 +499,30 @@ function Combobox($$renderer, $$props) {
       filter,
       description,
       error,
-      disabled = false,
+      disabled,
+      required,
       maxVisibleOptions = 200,
       class: className,
       "aria-describedby": consumerDescribedBy
     } = $$props;
+    const context = getFormFieldContext();
+    const field = $5.derived(() => resolveFieldControl({
+      id,
+      generatedId: id,
+      context,
+      hasDescription: !!description,
+      hasError: !!error,
+      localIdNamespace: "combobox",
+      consumerDescribedBy,
+      required,
+      disabled
+    }));
+    const resolvedDisabled = $5.derived(() => field().disabled);
+    const resolvedRequired = $5.derived(() => field().required);
+    const describedBy = $5.derived(() => field().describedBy);
     const listboxId = $5.derived(() => `${id}-listbox`);
-    const descriptionId = $5.derived(() => describeId(id, !!description));
-    const errId = $5.derived(() => errorId(id, !!error));
-    const describedBy = $5.derived(() => composeDescribedBy(descriptionId(), errId(), consumerDescribedBy));
+    const descriptionId = $5.derived(() => field().ownDescriptionId);
+    const stableLocalErrorId = $5.derived(() => context?.errorId === `${field().id}-error` ? `${field().id}-combobox-error` : `${field().id}-error`);
     const defaultFilter = (option, query) => {
       if (!query)
         return true;
@@ -504,7 +546,7 @@ function Combobox($$renderer, $$props) {
     let inputElement = null;
     let listboxElement = null;
     let committedLabel = "";
-    function handleEscape(event) {
+    function handleEscape(event = undefined) {
       const wasOpen = open;
       open = false;
       if (inputValue !== committedLabel) {
@@ -523,7 +565,7 @@ function Combobox($$renderer, $$props) {
       activeIndex = filteredOptions().length > 0 ? 0 : -1;
     }
     function handleFocus() {
-      if (!disabled)
+      if (!resolvedDisabled())
         open = true;
     }
     function handleBlur(event) {
@@ -586,11 +628,18 @@ function Combobox($$renderer, $$props) {
       $$renderer3.push(`<div${$5.attr_class($5.clsx(classNames("cinder-combobox", className)))}>`);
       if (label) {
         $$renderer3.push("<!--[0-->");
-        $$renderer3.push(`<label${$5.attr("for", id)} class="cinder-combobox__label"${$5.attr("data-disabled", disabled || undefined)}>${$5.escape(label)}</label>`);
+        $$renderer3.push(`<label${$5.attr("for", id)} class="cinder-combobox__label"${$5.attr("data-disabled", resolvedDisabled() || undefined)}>${$5.escape(label)} `);
+        if (resolvedRequired()) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+        }
+        $$renderer3.push(`<!--]--></label>`);
       } else {
         $$renderer3.push("<!--[-1-->");
       }
-      $$renderer3.push(`<!--]--> <div class="cinder-combobox__control"${$5.attr("data-cinder-open", open || undefined)}><input${$5.attr("id", id)} type="text" role="combobox" class="cinder-combobox__input" autocomplete="off" autocorrect="off" spellcheck="false"${$5.attr("disabled", disabled, true)}${$5.attr("placeholder", placeholder)}${$5.attr("value", inputValue)} aria-autocomplete="list"${$5.attr("aria-expanded", open)}${$5.attr("aria-controls", listboxId())}${$5.attr("aria-activedescendant", activeOptionId())}${$5.attr("aria-invalid", ariaInvalid(!!error))}${$5.attr("aria-describedby", describedBy())}/></div> `);
+      $$renderer3.push(`<!--]--> <div class="cinder-combobox__control"${$5.attr("data-cinder-open", open || undefined)}><input${$5.attr("id", id)} type="text" role="combobox" class="cinder-combobox__input" autocomplete="off" autocorrect="off" spellcheck="false"${$5.attr("disabled", resolvedDisabled(), true)}${$5.attr("placeholder", placeholder)}${$5.attr("value", inputValue)} aria-autocomplete="list"${$5.attr("aria-expanded", open)}${$5.attr("aria-controls", listboxId())}${$5.attr("aria-activedescendant", activeOptionId())}${$5.attr("aria-invalid", field().ariaInvalid)}${$5.attr("aria-required", resolvedRequired() || undefined)}${$5.attr("aria-describedby", describedBy())}/></div> `);
       if (open && filteredOptions().length > 0) {
         $$renderer3.push("<!--[0-->");
         Popover($$renderer3, {
@@ -644,7 +693,7 @@ function Combobox($$renderer, $$props) {
       } else {
         $$renderer3.push("<!--[-1-->");
       }
-      $$renderer3.push(`<!--]--> <p${$5.attr("id", `${$5.stringify(id)}-error`)} class="cinder-combobox__error" aria-live="polite"${$5.attr("data-cinder-error", !!error || undefined)}>${$5.escape(error ?? "")}</p></div>`);
+      $$renderer3.push(`<!--]--> <p${$5.attr("id", field().ownErrorId ?? stableLocalErrorId())} class="cinder-combobox__error" aria-live="polite"${$5.attr("data-cinder-error", !!error || undefined)}>${$5.escape(error ?? "")}</p></div>`);
     }
     do {
       $$settled = true;
@@ -663,4 +712,4 @@ export {
   Combobox
 };
 
-//# debugId=AAF48518A419195664756E2164756E21
+//# debugId=4872E7BE93AB10D564756E2164756E21

package/dist/server/components/command-item/command-item.schema.js

@@ -19,6 +19,14 @@ var schema = {
       type: "string",
       description: "Optional secondary text shown below the main label."
     },
+    accessibleLabel: {
+      type: "string",
+      description: "Accessible name for the option when the rendered row contains secondary text or rich content."
+    },
+    keyboardShortcut: {
+      type: "string",
+      description: "Keyboard shortcut exposed through `aria-keyshortcuts`, e.g. `Meta+N`."
+    },
     class: {
       type: "string",
       description: "Class merged with `.cinder-command-item`."
@@ -61,4 +69,4 @@ export {
   command_item_schema_default as default
 };
 
-//# debugId=B8A8803F6636B12D64756E2164756E21
+//# debugId=52BA04870951E71264756E2164756E21

package/dist/server/components/command-item/index.css

@@ -22,6 +22,7 @@
   .cinder-command-item[data-cinder-active] {
     background: var(--cinder-accent);
     color: var(--cinder-accent-contrast);
+    box-shadow: inset 0 0 0 1px var(--cinder-accent-contrast);
   }
 
   @media (forced-colors: active) {

package/dist/server/components/command-item/index.js

@@ -41,6 +41,8 @@ function Command_item($$renderer, $$props) {
       selectionMode = "item",
       disabled = false,
       description,
+      accessibleLabel,
+      keyboardShortcut,
       leading,
       trailing,
       children,
@@ -64,6 +66,12 @@ function Command_item($$renderer, $$props) {
       });
     };
     const isActive = $.derived(() => itemId !== null && commandList.activeItemId === itemId);
+    const normalizedAccessibleLabel = $.derived(() => normalizeOptionalAttribute(accessibleLabel));
+    const normalizedKeyboardShortcut = $.derived(() => normalizeOptionalAttribute(keyboardShortcut));
+    function normalizeOptionalAttribute(value2) {
+      const trimmed = value2?.trim();
+      return trimmed ? trimmed : undefined;
+    }
     function handlePointerEnter() {
       if (!disabled && itemId !== null) {
         commandList.setActiveById(itemId);
@@ -77,7 +85,7 @@ function Command_item($$renderer, $$props) {
         commandList.activateItemById(itemId);
       }
     }
-    $$renderer2.push(`<li${$.attr("id", itemId ?? undefined)} role="option"${$.attr_class($.clsx(classNames("cinder-command-item", className)))}${$.attr("aria-selected", isActive())}${$.attr("aria-disabled", disabled || undefined)}${$.attr("data-cinder-active", isActive() ? "" : undefined)}${$.attr("data-cinder-disabled", disabled || undefined)}>`);
+    $$renderer2.push(`<li${$.attr("id", itemId ?? undefined)} role="option"${$.attr_class($.clsx(classNames("cinder-command-item", className)))}${$.attr("aria-selected", isActive())}${$.attr("aria-disabled", disabled || undefined)}${$.attr("aria-label", normalizedAccessibleLabel())}${$.attr("aria-keyshortcuts", normalizedKeyboardShortcut())}${$.attr("data-cinder-active", isActive() ? "" : undefined)}${$.attr("data-cinder-disabled", disabled || undefined)}>`);
     if (leading) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<span class="cinder-command-item__leading" aria-hidden="true">`);
@@ -115,4 +123,4 @@ export {
   Command_item as CommandItem
 };
 
-//# debugId=24DA35BE7E72D00B64756E2164756E21
+//# debugId=0549BC66D526EB5664756E2164756E21

package/dist/server/components/command-menu/index.css

@@ -22,6 +22,7 @@
   .cinder-command-item[data-cinder-active] {
     background: var(--cinder-accent);
     color: var(--cinder-accent-contrast);
+    box-shadow: inset 0 0 0 1px var(--cinder-accent-contrast);
   }
 
   @media (forced-colors: active) {