@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/combobox/index.js

@@ -1902,7 +1902,8 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   dir: element.getAttribute("dir"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const inheritedDir = inheritAttributes && source ? source.closest("[dir]")?.getAttribute("dir") : null;
+  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
     element.setAttribute("dir", nextDir);
@@ -2063,6 +2064,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) {
@@ -2318,6 +2340,10 @@ function createBodyScrollLock() {
     return release;
   };
 }
+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) => {
@@ -2325,17 +2351,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;
         }
       }
@@ -2641,20 +2669,35 @@ function Popover($$anchor, $$props) {
 }
 
 // src/components/combobox/combobox.svelte
-var root_12 = $5.from_html(`<label class="cinder-combobox__label"> </label>`);
-var root_5 = $5.from_html(`<img class="cinder-combobox__option-avatar" alt="" loading="lazy"/>`);
-var root_6 = $5.from_html(`<span class="cinder-combobox__option-description"> </span>`);
-var root_4 = $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_32 = $5.from_html(`<ul role="presentation" class="cinder-combobox__listbox"></ul>`);
-var root_7 = $5.from_html(`<p class="cinder-combobox__description"> </p>`);
+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>`);
 function Combobox($$anchor, $$props) {
   $5.push($$props, true);
-  let value = $5.prop($$props, "value", 15, ""), inputValue = $5.prop($$props, "inputValue", 15, ""), disabled = $5.prop($$props, "disabled", 3, false), maxVisibleOptions = $5.prop($$props, "maxVisibleOptions", 3, 200);
+  let value = $5.prop($$props, "value", 15, ""), inputValue = $5.prop($$props, "inputValue", 15, ""), maxVisibleOptions = $5.prop($$props, "maxVisibleOptions", 3, 200);
+  const context = getFormFieldContext();
+  const field = $5.derived(() => resolveFieldControl({
+    id: $$props.id,
+    generatedId: $$props.id,
+    context,
+    hasDescription: !!$$props.description,
+    hasError: !!$$props.error,
+    localIdNamespace: "combobox",
+    consumerDescribedBy: $$props["aria-describedby"],
+    required: $$props.required,
+    disabled: $$props.disabled
+  }));
+  const resolvedDisabled = $5.derived(() => $5.get(field).disabled);
+  const resolvedRequired = $5.derived(() => $5.get(field).required);
+  const describedBy = $5.derived(() => $5.get(field).describedBy);
   const listboxId = $5.derived(() => `${$$props.id}-listbox`);
-  const descriptionId = $5.derived(() => describeId($$props.id, !!$$props.description));
-  const errId = $5.derived(() => errorId($$props.id, !!$$props.error));
-  const describedBy = $5.derived(() => composeDescribedBy($5.get(descriptionId), $5.get(errId), $$props["aria-describedby"]));
+  const descriptionId = $5.derived(() => $5.get(field).ownDescriptionId);
+  const stableLocalErrorId = $5.derived(() => context?.errorId === `${$5.get(field).id}-error` ? `${$5.get(field).id}-combobox-error` : `${$5.get(field).id}-error`);
   const defaultFilter = (option, query) => {
     if (!query)
       return true;
@@ -2699,7 +2742,7 @@ function Combobox($$anchor, $$props) {
       }
     }
   });
-  function handleEscape(event2) {
+  function handleEscape(event2 = undefined) {
     const wasOpen = $5.get(open);
     $5.set(open, false);
     if (inputValue() !== $5.get(committedLabel)) {
@@ -2724,7 +2767,7 @@ function Combobox($$anchor, $$props) {
     $5.set(activeIndex, $5.get(filteredOptions).length > 0 ? 0 : -1, true);
   }
   function handleFocus() {
-    if (!disabled())
+    if (!$5.get(resolvedDisabled))
       $5.set(open, true);
   }
   function handleBlur(event2) {
@@ -2784,20 +2827,31 @@ function Combobox($$anchor, $$props) {
   var div = root3();
   var node = $5.child(div);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       var label_1 = root_12();
-      var text = $5.child(label_1, true);
+      var text = $5.child(label_1);
+      var node_1 = $5.sibling(text);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_22();
+          $5.append($$anchor3, span);
+        };
+        $5.if(node_1, ($$render) => {
+          if ($5.get(resolvedRequired))
+            $$render(consequent);
+        });
+      }
       $5.reset(label_1);
       $5.template_effect(() => {
         $5.set_attribute(label_1, "for", $$props.id);
-        $5.set_attribute(label_1, "data-disabled", disabled() || undefined);
-        $5.set_text(text, $$props.label);
+        $5.set_attribute(label_1, "data-disabled", $5.get(resolvedDisabled) || undefined);
+        $5.set_text(text, `${$$props.label ?? ""} `);
       });
       $5.append($$anchor2, label_1);
     };
     $5.if(node, ($$render) => {
       if ($$props.label)
-        $$render(consequent);
+        $$render(consequent_1);
     });
   }
   var div_1 = $5.sibling(node, 2);
@@ -2805,9 +2859,9 @@ function Combobox($$anchor, $$props) {
   $5.remove_input_defaults(input);
   $5.bind_this(input, ($$value) => $5.set(inputElement, $$value), () => $5.get(inputElement));
   $5.reset(div_1);
-  var node_1 = $5.sibling(div_1, 2);
+  var node_2 = $5.sibling(div_1, 2);
   {
-    var consequent_3 = ($$anchor2) => {
+    var consequent_4 = ($$anchor2) => {
       Popover($$anchor2, {
         get id() {
           return $5.get(listboxId);
@@ -2828,41 +2882,41 @@ function Combobox($$anchor, $$props) {
           $5.set(open, $$value, true);
         },
         children: ($$anchor3, $$slotProps) => {
-          var ul = root_32();
+          var ul = root_4();
           $5.each(ul, 23, () => $5.get(filteredOptions), (option) => option.value, ($$anchor4, option, index) => {
-            var li = root_4();
-            var node_2 = $5.child(li);
+            var li = root_5();
+            var node_3 = $5.child(li);
             {
-              var consequent_1 = ($$anchor5) => {
-                var img = root_5();
+              var consequent_2 = ($$anchor5) => {
+                var img = root_6();
                 $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_2, ($$render) => {
+              $5.if(node_3, ($$render) => {
                 if ($5.get(d))
-                  $$render(consequent_1);
+                  $$render(consequent_2);
               });
             }
-            var span = $5.sibling(node_2, 2);
-            var span_1 = $5.child(span);
-            var text_1 = $5.child(span_1, true);
-            $5.reset(span_1);
-            var node_3 = $5.sibling(span_1, 2);
+            var span_1 = $5.sibling(node_3, 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 consequent_2 = ($$anchor5) => {
-                var span_2 = root_6();
-                var text_2 = $5.child(span_2, true);
-                $5.reset(span_2);
+              var consequent_3 = ($$anchor5) => {
+                var span_3 = root_7();
+                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_2);
+                $5.append($$anchor5, span_3);
               };
-              $5.if(node_3, ($$render) => {
+              $5.if(node_4, ($$render) => {
                 if ($5.get(option).description)
-                  $$render(consequent_2);
+                  $$render(consequent_3);
               });
             }
-            $5.reset(span);
+            $5.reset(span_1);
             $5.reset(li);
             $5.template_effect(() => {
               $5.set_attribute(li, "id", `${$$props.id ?? ""}-option-${$5.get(index) ?? ""}`);
@@ -2888,18 +2942,18 @@ function Combobox($$anchor, $$props) {
         $$slots: { default: true }
       });
     };
-    $5.if(node_1, ($$render) => {
+    $5.if(node_2, ($$render) => {
       if ($5.get(open) && $5.get(filteredOptions).length > 0)
-        $$render(consequent_3);
+        $$render(consequent_4);
     });
   }
-  var div_2 = $5.sibling(node_1, 2);
+  var div_2 = $5.sibling(node_2, 2);
   var text_3 = $5.child(div_2, true);
   $5.reset(div_2);
-  var node_4 = $5.sibling(div_2, 2);
+  var node_5 = $5.sibling(div_2, 2);
   {
-    var consequent_4 = ($$anchor2) => {
-      var p = root_7();
+    var consequent_5 = ($$anchor2) => {
+      var p = root_8();
       var text_4 = $5.child(p, true);
       $5.reset(p);
       $5.template_effect(() => {
@@ -2908,36 +2962,34 @@ function Combobox($$anchor, $$props) {
       });
       $5.append($$anchor2, p);
     };
-    $5.if(node_4, ($$render) => {
+    $5.if(node_5, ($$render) => {
       if ($$props.description)
-        $$render(consequent_4);
+        $$render(consequent_5);
     });
   }
-  var p_1 = $5.sibling(node_4, 2);
+  var p_1 = $5.sibling(node_5, 2);
   var text_5 = $5.child(p_1, true);
   $5.reset(p_1);
   $5.reset(div);
-  $5.template_effect(($0, $1) => {
+  $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 = disabled();
+    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", $1);
+    $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(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", `${$$props.id ?? ""}-error`);
+    $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)),
-    () => ariaInvalid(!!$$props.error)
-  ]);
+  }, [() => $5.clsx(classNames("cinder-combobox", $$props.class))]);
   $5.delegated("input", input, handleInput);
   $5.event("focus", input, handleFocus);
   $5.event("blur", input, handleBlur);
@@ -2954,4 +3006,4 @@ export {
   Combobox
 };
 
-//# debugId=156AF064BEFE0CCA64756E2164756E21
+//# debugId=4FC6265A733AFAA364756E2164756E21

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

@@ -29,6 +29,16 @@
   .cinder-command-item[data-cinder-active] {
     background: var(--cinder-accent);
     color: var(--cinder-accent-contrast);
+    /* Keyboard-cursor ring for WCAG 1.4.11 (non-text contrast, ≥3:1). The ring
+       sits ON the accent fill, so it must contrast against --cinder-accent — NOT
+       against a neutral surface. --cinder-ring-color is engineered for ~4.5:1
+       against near-white surfaces and collapses to ~1.1–1.3:1 on the accent fill
+       (invisible), which is why the shared _floating-surface.css ring works there
+       (it sits on a neutral hover surface) but cannot be reused here verbatim.
+       --cinder-accent-contrast is the only token already proven to clear AA on the
+       accent fill (it is the text color on this fill; check-token-contrast.test.ts
+       gates it), giving ~6.5:1 (light) / ~7.8:1 (dark) for the ring. */
+    box-shadow: inset 0 0 0 1px var(--cinder-accent-contrast);
   }
 
   @media (forced-colors: active) {

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

@@ -38,6 +38,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`."
@@ -80,4 +88,4 @@ export {
   command_item_schema_default as default
 };
 
-//# debugId=A8493CDC80A009B264756E2164756E21
+//# debugId=F8E38942CE2014A164756E2164756E21

package/dist/components/command-item/command-item.types.d.ts

@@ -6,6 +6,10 @@ type CommandItemBaseProps = {
     disabled?: boolean;
     /** Optional secondary text shown below the main label. */
     description?: string;
+    /** Accessible name for the option when the rendered row contains secondary text or rich content. */
+    accessibleLabel?: string | undefined;
+    /** Keyboard shortcut exposed through `aria-keyshortcuts`, e.g. `Meta+N`. */
+    keyboardShortcut?: string | undefined;
     /** Leading content (icon, avatar). Rendered with aria-hidden. */
     leading?: Snippet;
     /** Trailing content (kbd hint, badge). Rendered with aria-hidden. */

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

@@ -81,6 +81,12 @@ function Command_item($$anchor, $$props) {
     });
   };
   const isActive = $.derived(() => $.get(itemId) !== null && commandList.activeItemId === $.get(itemId));
+  const normalizedAccessibleLabel = $.derived(() => normalizeOptionalAttribute($$props.accessibleLabel));
+  const normalizedKeyboardShortcut = $.derived(() => normalizeOptionalAttribute($$props.keyboardShortcut));
+  function normalizeOptionalAttribute(value) {
+    const trimmed = value?.trim();
+    return trimmed ? trimmed : undefined;
+  }
   function handlePointerEnter() {
     if (!disabled() && $.get(itemId) !== null) {
       commandList.setActiveById($.get(itemId));
@@ -150,6 +156,8 @@ function Command_item($$anchor, $$props) {
     $.set_class(li, 1, $0);
     $.set_attribute(li, "aria-selected", $.get(isActive));
     $.set_attribute(li, "aria-disabled", disabled() || undefined);
+    $.set_attribute(li, "aria-label", $.get(normalizedAccessibleLabel));
+    $.set_attribute(li, "aria-keyshortcuts", $.get(normalizedKeyboardShortcut));
     $.set_attribute(li, "data-cinder-active", $.get(isActive) ? "" : undefined);
     $.set_attribute(li, "data-cinder-disabled", disabled() || undefined);
   }, [
@@ -170,4 +178,4 @@ export {
   Command_item as CommandItem
 };
 
-//# debugId=5BDD42121CEF164B64756E2164756E21
+//# debugId=B06CC7140A38242664756E2164756E21