@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/chat/input/chat-input.svelte.d.ts

@@ -10,12 +10,14 @@ export type ChatInputProps = Omit<HTMLFormAttributes, 'onsubmit' | 'class'> & {
     value?: string;
     /** Placeholder text */
     placeholder?: string;
+    /** Accessible label passed to the inner message editor */
+    composerLabel?: string;
     /** Whether the input is disabled */
     disabled?: boolean;
     /** Whether a submission is in progress */
     sending?: boolean;
     /** Error message to display */
-    error?: string | undefined;
+    error?: string;
     /** Additional CSS class */
     class?: string;
     /** Form action URL (enables form action mode) */

package/dist/components/chat-conversation-header/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);
@@ -2198,6 +2199,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) => {
@@ -2205,17 +2210,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;
         }
       }
@@ -2546,11 +2553,13 @@ var root_12 = $5.from_html(`<a><!></a>`);
 var root_32 = $5.from_html(`<button><!></button>`);
 function Dropdown_item($$anchor, $$props) {
   $5.push($$props, true);
-  let variant = $5.prop($$props, "variant", 3, "default"), inset = $5.prop($$props, "inset", 3, false), closeOnSelect = $5.prop($$props, "closeOnSelect", 3, true), rest = $5.rest_props($$props, [
+  let variant = $5.prop($$props, "variant", 3, "default"), itemRole = $5.prop($$props, "itemRole", 3, "menuitem"), checked = $5.prop($$props, "checked", 3, false), inset = $5.prop($$props, "inset", 3, false), closeOnSelect = $5.prop($$props, "closeOnSelect", 3, true), rest = $5.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "variant",
+    "itemRole",
+    "checked",
     "inset",
     "disabled",
     "closeOnSelect",
@@ -2592,18 +2601,20 @@ function Dropdown_item($$anchor, $$props) {
       return;
     event2.currentTarget.click();
   }
-  const anchorAttributes = rest;
-  const buttonAttributes = rest;
+  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);
   var fragment = $5.comment();
   var node = $5.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
       var a = root_12();
       $5.attribute_effect(a, () => ({
-        ...anchorAttributes,
+        ...$5.get(anchorAttributes),
         href: $$props.href,
-        role: "menuitem",
+        role: itemRole(),
+        "aria-checked": $5.get(ariaChecked),
         class: $5.get(sharedClass),
         "data-cinder-variant": variant(),
         tabindex: -1,
@@ -2631,9 +2642,10 @@ function Dropdown_item($$anchor, $$props) {
     var alternate = ($$anchor2) => {
       var button = root_32();
       $5.attribute_effect(button, () => ({
-        ...buttonAttributes,
+        ...$5.get(buttonAttributes),
         type: $5.get(buttonType),
-        role: "menuitem",
+        role: itemRole(),
+        "aria-checked": $5.get(ariaChecked),
         class: $5.get(sharedClass),
         "data-cinder-variant": variant(),
         tabindex: -1,
@@ -2839,24 +2851,235 @@ function createAnchoredOverlay(options) {
   };
 }
 
+// src/_internal/locale-context.ts
+import { createContext as createContext2 } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/locale-context.ts
+var [getLocaleContextStrict, setLocaleContextRaw] = createContext2();
+function setLocaleContext(context) {
+  setLocaleContextRaw(context);
+}
+var getLocaleContext = optionalContext(getLocaleContextStrict);
+
+// src/_internal/text-direction.ts
+function resolveTextDirection(element, fallback) {
+  let currentElement = element ?? null;
+  let documentDirection;
+  let styledDirectionElement = null;
+  while (currentElement) {
+    const direction = currentElement.getAttribute("dir")?.toLowerCase();
+    if (direction === "rtl" || direction === "ltr") {
+      if (typeof getComputedStyle === "function" && styledDirectionElement) {
+        const styledDirection2 = getComputedStyle(styledDirectionElement).direction;
+        if (styledDirection2 === "rtl" || styledDirection2 === "ltr")
+          return styledDirection2;
+      }
+      if (currentElement === currentElement.ownerDocument.documentElement) {
+        documentDirection = direction;
+        break;
+      }
+      return direction;
+    }
+    if (direction === "auto" && typeof getComputedStyle === "function") {
+      const computedDirection2 = getComputedStyle(currentElement).direction;
+      if (computedDirection2 === "rtl" || computedDirection2 === "ltr")
+        return computedDirection2;
+    }
+    const styledDirection = currentElement.style.direction;
+    if (!styledDirectionElement && (styledDirection === "rtl" || styledDirection === "ltr")) {
+      styledDirectionElement = currentElement;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  if (typeof getComputedStyle === "function" && styledDirectionElement) {
+    const direction = getComputedStyle(styledDirectionElement).direction;
+    if (direction === "rtl" || direction === "ltr")
+      return direction;
+  }
+  const computedDirection = readComputedTextDirection(element);
+  const rootComputedDirection = readComputedTextDirection(element?.ownerDocument.documentElement);
+  if (computedDirection && computedDirection !== rootComputedDirection)
+    return computedDirection;
+  if (computedDirection && fallback && computedDirection !== fallback && hasDirectionStylingHint(element)) {
+    return computedDirection;
+  }
+  if (!fallback && computedDirection === "rtl")
+    return computedDirection;
+  if (fallback)
+    return fallback;
+  if (documentDirection)
+    return documentDirection;
+  return;
+}
+function readComputedTextDirection(element) {
+  if (!element || typeof getComputedStyle !== "function")
+    return;
+  const direction = getComputedStyle(element).direction;
+  return direction === "rtl" || direction === "ltr" ? direction : undefined;
+}
+function hasDirectionStylingHint(element) {
+  let currentElement = element?.parentElement;
+  while (currentElement && currentElement !== currentElement.ownerDocument.documentElement) {
+    if (currentElement.style.direction)
+      return true;
+    if (matchesDirectionStyleRule(currentElement))
+      return true;
+    currentElement = currentElement.parentElement;
+  }
+  return false;
+}
+function matchesDirectionStyleRule(element) {
+  for (const sheet of Array.from(element.ownerDocument.styleSheets)) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (matchesDirectionStyleRuleList(element, rules))
+      return true;
+  }
+  return false;
+}
+function matchesDirectionStyleRuleList(element, rules) {
+  for (const rule of Array.from(rules)) {
+    if (isCssStyleRule(rule)) {
+      if (!rule.style.direction) {
+        const nestedRules2 = readNestedCssRules(rule);
+        if (nestedRules2 && matchesDirectionStyleRuleList(element, nestedRules2))
+          return true;
+        continue;
+      }
+      try {
+        if (element.matches(rule.selectorText))
+          return true;
+      } catch {
+        continue;
+      }
+    }
+    const nestedRules = readNestedCssRules(rule);
+    if (nestedRules && isConditionalRuleActive(rule) && matchesDirectionStyleRuleList(element, nestedRules)) {
+      return true;
+    }
+  }
+  return false;
+}
+function readNestedCssRules(rule) {
+  if (!("cssRules" in rule))
+    return;
+  try {
+    const nestedRules = Reflect.get(rule, "cssRules");
+    return isCssRuleCollection(nestedRules) ? nestedRules : undefined;
+  } catch {
+    return;
+  }
+}
+function isCssRuleCollection(value) {
+  if (typeof CSSRuleList !== "undefined" && value instanceof CSSRuleList)
+    return true;
+  return Array.isArray(value) && value.every(isCssRule);
+}
+function isCssRule(value) {
+  return typeof value === "object" && value !== null && typeof Reflect.get(value, "cssText") === "string" && typeof Reflect.get(value, "type") === "number";
+}
+function isCssStyleRule(rule) {
+  return typeof Reflect.get(rule, "selectorText") === "string" && typeof Reflect.get(rule, "style") === "object" && Reflect.get(rule, "style") !== null;
+}
+function isConditionalRuleActive(rule) {
+  const conditionText = Reflect.get(rule, "conditionText");
+  if (typeof conditionText !== "string" || !conditionText.trim())
+    return true;
+  if (isMediaRule(rule) && typeof matchMedia === "function") {
+    return matchMedia(conditionText).matches;
+  }
+  if (isSupportsRule(rule) && typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    return CSS.supports(conditionText);
+  }
+  return true;
+}
+function isMediaRule(rule) {
+  return typeof Reflect.get(rule, "media") === "object" && Reflect.get(rule, "media") !== null;
+}
+function isSupportsRule(rule) {
+  return rule.constructor.name === "CSSSupportsRule" || Reflect.get(rule, "type") === 12;
+}
+function observeTextDirection(element, onChange) {
+  if (!element || typeof MutationObserver === "undefined")
+    return;
+  const observedElement = element;
+  const observer = new MutationObserver((mutations) => {
+    if (mutations.some((mutation) => mutation.type === "attributes" && mutation.attributeName === "dir")) {
+      observeDirectionChain();
+    }
+    onChange();
+  });
+  function observeDirectionChain() {
+    observer.disconnect();
+    let currentElement = observedElement;
+    while (currentElement) {
+      const isAutoDirection = currentElement.getAttribute("dir")?.toLowerCase() === "auto";
+      observer.observe(currentElement, {
+        attributes: true,
+        attributeFilter: ["dir", "style", "class"],
+        childList: isAutoDirection,
+        characterData: isAutoDirection,
+        subtree: isAutoDirection
+      });
+      currentElement = currentElement.parentElement;
+    }
+  }
+  observeDirectionChain();
+  return () => observer.disconnect();
+}
+
 // src/components/dropdown-menu/dropdown-menu.svelte
 var root_13 = $7.from_html(`<div><!></div>`);
 function Dropdown_menu($$anchor, $$props) {
   $7.push($$props, true);
-  let rest = $7.rest_props($$props, ["$$slots", "$$events", "$$legacy", "class", "children"]);
+  let rest = $7.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "class",
+    "children",
+    "dir"
+  ]);
   const context = getDropdownContext();
   const registerMenu = getDropdownRegister();
   const setOpen = getDropdownSetOpen();
+  const localeContext = getLocaleContext();
+  let directionRevision = $7.state(0);
+  const resolvedDirection = $7.derived(() => {
+    $7.get(directionRevision);
+    if ($$props.dir === "auto") {
+      return resolveTextDirection(context.anchorElement, localeContext?.direction) ?? $$props.dir;
+    }
+    return $$props.dir ?? resolveTextDirection(context.anchorElement, localeContext?.direction);
+  });
+  const fallbackAnchorElement = $7.derived(() => context.fallbackAnchorElement === undefined ? context.anchorElement : context.fallbackAnchorElement);
   let menuElement = $7.state(null);
   let focusedFallbackOpen = false;
   const anchoredFallback = createAnchoredOverlay({
-    open: () => context.isOpen && !context.supportsPopover && Boolean(context.anchorElement),
-    anchor: () => context.anchorElement,
+    open: () => context.isOpen && !context.supportsPopover && Boolean($7.get(fallbackAnchorElement)),
+    anchor: () => $7.get(fallbackAnchorElement),
     panel: () => $7.get(menuElement),
     placement: () => context.fallbackPlacement ?? "bottom-end",
     offset: () => 4,
     widthMode: () => context.widthMode ?? "menu"
   });
+  const fallbackPositionStyle = $7.derived(() => context.fallbackPositionStyle ?? ($7.get(fallbackAnchorElement) ? anchoredFallback.positionStyle : undefined));
+  const fallbackPositionReady = $7.derived(() => context.fallbackPositionReady ?? ($7.get(fallbackAnchorElement) ? anchoredFallback.positionReady : undefined));
   const fallbackPortalAttachment = createPortalAttachment({
     target: () => typeof document === "undefined" ? null : document.body,
     source: () => context.anchorElement,
@@ -2867,6 +3090,13 @@ function Dropdown_menu($$anchor, $$props) {
     registerMenu($7.get(menuElement));
     return () => registerMenu(null);
   });
+  $7.user_effect(() => {
+    if ($$props.dir && $$props.dir !== "auto")
+      return;
+    return observeTextDirection(context.anchorElement, () => {
+      $7.set(directionRevision, $7.get(directionRevision) + 1);
+    });
+  });
   $7.user_effect(() => {
     if (context.supportsPopover || !context.isOpen) {
       focusedFallbackOpen = false;
@@ -2882,7 +3112,7 @@ function Dropdown_menu($$anchor, $$props) {
   function getOwnedMenuItems() {
     if (!$7.get(menuElement))
       return [];
-    return Array.from($7.get(menuElement).querySelectorAll('[role="menuitem"]: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="menuitemradio"]:not([data-disabled])')).filter((item) => item.closest('[role="menu"]') === $7.get(menuElement));
   }
   function focusMenuItem(index) {
     const items = getOwnedMenuItems();
@@ -2945,14 +3175,16 @@ function Dropdown_menu($$anchor, $$props) {
         id: context.menuId,
         popover: context.supportsPopover ? "auto" : undefined,
         class: $0,
-        style: context.supportsPopover ? `position-anchor: --${context.menuId};` : context.anchorElement ? anchoredFallback.positionStyle : undefined,
+        style: context.supportsPopover ? `position-anchor: --${context.menuId};` : $7.get(fallbackPositionStyle),
         role: "menu",
         "aria-orientation": "vertical",
-        "data-cinder-position-ready": !context.supportsPopover && context.anchorElement ? anchoredFallback.positionReady : undefined,
+        "data-cinder-position-ready": !context.supportsPopover && $7.get(fallbackPositionReady) !== undefined ? $7.get(fallbackPositionReady) : undefined,
         tabindex: -1,
         onkeydown: handleKeydown,
         ontoggle: context.supportsPopover ? handleToggle : undefined,
-        ...rest
+        ...rest,
+        dir: $7.get(resolvedDirection),
+        "data-cinder-explicit-direction": $7.get(resolvedDirection) ? "true" : undefined
       }), [
         () => classNames("cinder-_floating-surface", "cinder-dropdown-menu", $$props.class)
       ]);
@@ -2972,6 +3204,7 @@ function Dropdown_menu($$anchor, $$props) {
       $7.reset(div);
       $7.bind_this(div, ($$value) => $7.set(menuElement, $$value), () => $7.get(menuElement));
       $7.attach(div, () => fallbackPortalAttachment);
+      $7.template_effect(() => div.dir = div.dir);
       $7.append($$anchor2, div);
     };
     $7.if(node, ($$render) => {
@@ -3002,11 +3235,10 @@ function Dropdown_trigger($$anchor, $$props) {
   const context = getDropdownContext();
   const registerTrigger = getDropdownRegisterTrigger();
   const setOpen = getDropdownSetOpen();
-  let triggerElement = $8.state(null);
-  $8.user_effect(() => {
-    registerTrigger($8.get(triggerElement));
+  function attachTrigger(node) {
+    registerTrigger(node);
     return () => registerTrigger(null);
-  });
+  }
   function handleClick(event2) {
     if (typeof $$props.onclick === "function") {
       $$props.onclick(event2);
@@ -3027,32 +3259,32 @@ function Dropdown_trigger($$anchor, $$props) {
     onclick: handleClick,
     ...rest
   }), [() => classNames("cinder-dropdown-trigger", $$props.class)]);
-  var node = $8.child(button);
+  var node_1 = $8.child(button);
   {
     var consequent = ($$anchor2) => {
       var fragment = $8.comment();
-      var node_1 = $8.first_child(fragment);
-      $8.snippet(node_1, () => $$props.children);
+      var node_2 = $8.first_child(fragment);
+      $8.snippet(node_2, () => $$props.children);
       $8.append($$anchor2, fragment);
     };
-    $8.if(node, ($$render) => {
+    $8.if(node_1, ($$render) => {
       if ($$props.children)
         $$render(consequent);
     });
   }
-  var node_2 = $8.sibling(node, 2);
+  var node_3 = $8.sibling(node_1, 2);
   {
     var consequent_1 = ($$anchor2) => {
       var svg = root_2();
       $8.append($$anchor2, svg);
     };
-    $8.if(node_2, ($$render) => {
+    $8.if(node_3, ($$render) => {
       if (showCaret())
         $$render(consequent_1);
     });
   }
   $8.reset(button);
-  $8.bind_this(button, ($$value) => $8.set(triggerElement, $$value), () => $8.get(triggerElement));
+  $8.attach(button, () => attachTrigger);
   $8.append($$anchor, button);
   $8.pop();
 }
@@ -3822,4 +4054,4 @@ export {
   Chat_conversation_header as ChatConversationHeader
 };
 
-//# debugId=023729FE204794C764756E2164756E21
+//# debugId=548A70D250FFAE6964756E2164756E21

package/dist/components/chat-conversation-list/chat-conversation-list.css

@@ -53,6 +53,19 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-chat-conversation-list__button[data-cinder-conversation-interactive]:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      /* ButtonText is correct here: this is a button/navigation control using
+         aria-current="page" (page-nav semantics, not aria-selected list-selection).
+         Highlight/HighlightText would be wrong — those are for selected listbox items.
+         3px separates the ring from ButtonBorder, which renders in forced-colors
+         mode on all button elements regardless of their standard-mode border color. */
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-chat-conversation-list__title {
     grid-column: 1;
     grid-row: 1;

package/dist/components/checkbox/checkbox.css

@@ -165,6 +165,9 @@
 
   /* Label */
   .cinder-checkbox-field__label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
     font-size: var(--cinder-text-sm);
     line-height: var(--cinder-leading-normal);
     color: var(--cinder-text);

package/dist/components/checkbox/checkbox.schema.js

@@ -62,6 +62,11 @@ var schema = {
         name: "class",
         reason: "unknown-shape",
         description: "Extra class names merged with `.cinder-checkbox`."
+      },
+      {
+        name: "onValueChange",
+        reason: "function-or-snippet",
+        description: "Intercept a proposed checked state before the bindable value is written. Return a replacement value to transform it."
       }
     ]
   }
@@ -71,4 +76,4 @@ export {
   checkbox_schema_default as default
 };
 
-//# debugId=BF423CE02B75C9D364756E2164756E21
+//# debugId=2E65471C4E31A57164756E2164756E21

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

@@ -20,6 +20,8 @@ export type CheckboxProps = HTMLInputAttributes & {
     id?: string;
     /** Bound checked state. */
     checked?: boolean;
+    /** Intercept a proposed checked state before the bindable value is written. Return a replacement value to transform it. */
+    onValueChange?: (next: boolean) => boolean | void;
     /** Bound indeterminate state. Mutually exclusive with `checked` visually. */
     indeterminate?: boolean;
     /** Visible label rendered in a `<label>` element associated via `for`. */