@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -113,7 +113,7 @@ function Dropdown_group($$renderer, $$props) {
     let {
       class: customClassName,
       children,
-      ariaLabel,
+      label,
       labelledBy,
       $$slots,
       $$events,
@@ -129,20 +129,20 @@ function Dropdown_group($$renderer, $$props) {
       return trimmedValue;
     }
     const resolvedAccessibleName = $3.derived(() => {
-      const trimmedAriaLabel = normalizeAccessibleName(ariaLabel, "ariaLabel");
+      const trimmedLabel = normalizeAccessibleName(label, "label");
       const trimmedLabelledBy = normalizeAccessibleName(labelledBy, "labelledBy");
-      const namedByLabel = trimmedAriaLabel !== undefined;
+      const namedByLabel = trimmedLabel !== undefined;
       const namedByReference = trimmedLabelledBy !== undefined;
       if (namedByLabel === namedByReference) {
-        throw new Error("DropdownGroup requires exactly one accessible naming strategy: ariaLabel or labelledBy.");
+        throw new Error("DropdownGroup requires exactly one accessible naming strategy: label or labelledBy.");
       }
-      return { ariaLabel: trimmedAriaLabel, labelledBy: trimmedLabelledBy };
+      return { label: trimmedLabel, labelledBy: trimmedLabelledBy };
     });
     $$renderer2.push(`<div${$3.attributes({
       ...rest,
       class: $3.clsx(classNames("cinder-dropdown-group", customClassName)),
       role: "group",
-      "aria-label": resolvedAccessibleName().ariaLabel,
+      "aria-label": resolvedAccessibleName().label,
       "aria-labelledby": resolvedAccessibleName().labelledBy
     })}>`);
     if (children) {
@@ -175,6 +175,8 @@ function Dropdown_item($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let {
       variant = "default",
+      itemRole = "menuitem",
+      checked = false,
       inset = false,
       disabled,
       closeOnSelect = true,
@@ -219,15 +221,17 @@ function Dropdown_item($$renderer, $$props) {
         return;
       event.currentTarget.click();
     }
-    const anchorAttributes = rest;
-    const buttonAttributes = rest;
+    const anchorAttributes = $4.derived(() => rest);
+    const buttonAttributes = $4.derived(() => rest);
     const buttonType = $4.derived(() => rest.type ?? "button");
+    const ariaChecked = $4.derived(() => itemRole === "menuitemradio" ? checked : undefined);
     if (isLink()) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<a${$4.attributes({
-        ...anchorAttributes,
+        ...anchorAttributes(),
         href,
-        role: "menuitem",
+        role: itemRole,
+        "aria-checked": ariaChecked(),
         class: $4.clsx(sharedClass()),
         "data-cinder-variant": variant,
         tabindex: -1,
@@ -245,9 +249,10 @@ function Dropdown_item($$renderer, $$props) {
     } else {
       $$renderer2.push("<!--[-1-->");
       $$renderer2.push(`<button${$4.attributes({
-        ...buttonAttributes,
+        ...buttonAttributes(),
         type: buttonType(),
-        role: "menuitem",
+        role: itemRole,
+        "aria-checked": ariaChecked(),
         class: $4.clsx(sharedClass()),
         "data-cinder-variant": variant,
         tabindex: -1,
@@ -316,23 +321,205 @@ 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;
+}
+
 // src/components/dropdown-menu/dropdown-menu.svelte
 function Dropdown_menu($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    let { class: customClassName, children, $$slots, $$events, ...rest } = $$props;
+    let {
+      class: customClassName,
+      children,
+      dir: direction,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
     const context = getDropdownContext();
     const registerMenu = getDropdownRegister();
     const setOpen = getDropdownSetOpen();
+    const localeContext = getLocaleContext();
+    let directionRevision = 0;
+    const resolvedDirection = $7.derived(() => {
+      if (direction === "auto") {
+        return resolveTextDirection(context.anchorElement, localeContext?.direction) ?? direction;
+      }
+      return direction ?? resolveTextDirection(context.anchorElement, localeContext?.direction);
+    });
+    const fallbackAnchorElement = $7.derived(() => context.fallbackAnchorElement === undefined ? context.anchorElement : context.fallbackAnchorElement);
     let menuElement = null;
     let focusedFallbackOpen = false;
     const anchoredFallback = createAnchoredOverlay({
-      open: () => context.isOpen && !context.supportsPopover && Boolean(context.anchorElement),
-      anchor: () => context.anchorElement,
+      open: () => context.isOpen && !context.supportsPopover && Boolean(fallbackAnchorElement()),
+      anchor: () => fallbackAnchorElement(),
       panel: () => menuElement,
       placement: () => context.fallbackPlacement ?? "bottom-end",
       offset: () => 4,
       widthMode: () => context.widthMode ?? "menu"
     });
+    const fallbackPositionStyle = $7.derived(() => context.fallbackPositionStyle ?? (fallbackAnchorElement() ? anchoredFallback.positionStyle : undefined));
+    const fallbackPositionReady = $7.derived(() => context.fallbackPositionReady ?? (fallbackAnchorElement() ? anchoredFallback.positionReady : undefined));
     const fallbackPortalAttachment = createPortalAttachment({
       target: () => typeof document === "undefined" ? null : document.body,
       source: () => context.anchorElement,
@@ -342,7 +529,7 @@ function Dropdown_menu($$renderer, $$props) {
     function getOwnedMenuItems() {
       if (!menuElement)
         return [];
-      return Array.from(menuElement.querySelectorAll('[role="menuitem"]:not([data-disabled])')).filter((item) => item.closest('[role="menu"]') === menuElement);
+      return Array.from(menuElement.querySelectorAll('[role="menuitem"]:not([data-disabled]), [role="menuitemradio"]:not([data-disabled])')).filter((item) => item.closest('[role="menu"]') === menuElement);
     }
     function focusMenuItem(index) {
       const items = getOwnedMenuItems();
@@ -402,12 +589,14 @@ function Dropdown_menu($$renderer, $$props) {
         id: context.menuId,
         popover: context.supportsPopover ? "auto" : undefined,
         class: $7.clsx(classNames("cinder-_floating-surface", "cinder-dropdown-menu", customClassName)),
-        style: context.supportsPopover ? `position-anchor: --${context.menuId};` : context.anchorElement ? anchoredFallback.positionStyle : undefined,
+        style: context.supportsPopover ? `position-anchor: --${context.menuId};` : fallbackPositionStyle(),
         role: "menu",
         "aria-orientation": "vertical",
-        "data-cinder-position-ready": !context.supportsPopover && context.anchorElement ? anchoredFallback.positionReady : undefined,
+        "data-cinder-position-ready": !context.supportsPopover && fallbackPositionReady() !== undefined ? fallbackPositionReady() : undefined,
         tabindex: -1,
-        ...rest
+        ...rest,
+        dir: resolvedDirection(),
+        "data-cinder-explicit-direction": resolvedDirection() ? "true" : undefined
       })}>`);
       if (children) {
         $$renderer2.push("<!--[0-->");
@@ -453,7 +642,10 @@ function Dropdown_trigger($$renderer, $$props) {
     const context = getDropdownContext();
     const registerTrigger = getDropdownRegisterTrigger();
     const setOpen = getDropdownSetOpen();
-    let triggerElement = null;
+    function attachTrigger(node) {
+      registerTrigger(node);
+      return () => registerTrigger(null);
+    }
     function handleClick(event) {
       if (typeof onclick === "function") {
         onclick(event);
@@ -554,6 +746,10 @@ function captureFocus() {
 }
 
 // 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) => {
@@ -561,17 +757,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;
         }
       }
@@ -811,4 +1009,4 @@ export {
   Dropdown2 as Dropdown
 };
 
-//# debugId=D37DDD521240E81B64756E2164756E21
+//# debugId=4A9B4883D0C21BFB64756E2164756E21

package/dist/server/components/dropdown-group/dropdown-group.schema.js

@@ -11,13 +11,13 @@ var schema = {
       type: "string",
       description: "Additional class names merged onto the group root."
     },
-    ariaLabel: {
+    label: {
       type: "string",
-      description: "Accessible label for the group, applied as aria-label. Provide exactly one of `ariaLabel` or `labelledBy`."
+      description: "Accessible label for the group, applied as aria-label. Provide exactly one of `label` or `labelledBy`."
     },
     labelledBy: {
       type: "string",
-      description: "ID of an existing element whose text labels the group, applied as aria-labelledby. Provide exactly one of `ariaLabel` or `labelledBy`."
+      description: "ID of an existing element whose text labels the group, applied as aria-labelledby. Provide exactly one of `label` or `labelledBy`."
     }
   },
   additionalProperties: false,
@@ -36,4 +36,4 @@ export {
   dropdown_group_schema_default as default
 };
 
-//# debugId=E3C4B077686DED4C64756E2164756E21
+//# debugId=BA05CB6F9F3E4F1C64756E2164756E21

package/dist/server/components/dropdown-group/index.js

@@ -16,7 +16,7 @@ function Dropdown_group($$renderer, $$props) {
     let {
       class: customClassName,
       children,
-      ariaLabel,
+      label,
       labelledBy,
       $$slots,
       $$events,
@@ -32,20 +32,20 @@ function Dropdown_group($$renderer, $$props) {
       return trimmedValue;
     }
     const resolvedAccessibleName = $.derived(() => {
-      const trimmedAriaLabel = normalizeAccessibleName(ariaLabel, "ariaLabel");
+      const trimmedLabel = normalizeAccessibleName(label, "label");
       const trimmedLabelledBy = normalizeAccessibleName(labelledBy, "labelledBy");
-      const namedByLabel = trimmedAriaLabel !== undefined;
+      const namedByLabel = trimmedLabel !== undefined;
       const namedByReference = trimmedLabelledBy !== undefined;
       if (namedByLabel === namedByReference) {
-        throw new Error("DropdownGroup requires exactly one accessible naming strategy: ariaLabel or labelledBy.");
+        throw new Error("DropdownGroup requires exactly one accessible naming strategy: label or labelledBy.");
       }
-      return { ariaLabel: trimmedAriaLabel, labelledBy: trimmedLabelledBy };
+      return { label: trimmedLabel, labelledBy: trimmedLabelledBy };
     });
     $$renderer2.push(`<div${$.attributes({
       ...rest,
       class: $.clsx(classNames("cinder-dropdown-group", customClassName)),
       role: "group",
-      "aria-label": resolvedAccessibleName().ariaLabel,
+      "aria-label": resolvedAccessibleName().label,
       "aria-labelledby": resolvedAccessibleName().labelledBy
     })}>`);
     if (children) {
@@ -66,4 +66,4 @@ export {
   Dropdown_group as DropdownGroup
 };
 
-//# debugId=928C6E89DFF8048A64756E2164756E21
+//# debugId=7CA53768073C3C8D64756E2164756E21

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

@@ -11,6 +11,14 @@ var schema = {
       enum: ["default", "danger"],
       description: "Visual style of the item. Use `danger` to signal a destructive action. Default `default`."
     },
+    itemRole: {
+      enum: ["menuitem", "menuitemradio"],
+      description: "ARIA role for the row. Use `menuitemradio` for mutually exclusive menu selections."
+    },
+    checked: {
+      type: "boolean",
+      description: 'Checked state for `itemRole="menuitemradio"`. Omitted for normal menu items.'
+    },
     inset: {
       type: "boolean",
       description: "When true, adds leading padding to align the item with items that have a leading icon or indicator. Default `false`."
@@ -51,4 +59,4 @@ export {
   dropdown_item_schema_default as default
 };
 
-//# debugId=2DBB972F9C2461D464756E2164756E21
+//# debugId=CE7714DED6A0FDF264756E2164756E21

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

@@ -26,6 +26,8 @@ function Dropdown_item($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let {
       variant = "default",
+      itemRole = "menuitem",
+      checked = false,
       inset = false,
       disabled,
       closeOnSelect = true,
@@ -70,15 +72,17 @@ function Dropdown_item($$renderer, $$props) {
         return;
       event.currentTarget.click();
     }
-    const anchorAttributes = rest;
-    const buttonAttributes = rest;
+    const anchorAttributes = $.derived(() => rest);
+    const buttonAttributes = $.derived(() => rest);
     const buttonType = $.derived(() => rest.type ?? "button");
+    const ariaChecked = $.derived(() => itemRole === "menuitemradio" ? checked : undefined);
     if (isLink()) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<a${$.attributes({
-        ...anchorAttributes,
+        ...anchorAttributes(),
         href,
-        role: "menuitem",
+        role: itemRole,
+        "aria-checked": ariaChecked(),
         class: $.clsx(sharedClass()),
         "data-cinder-variant": variant,
         tabindex: -1,
@@ -96,9 +100,10 @@ function Dropdown_item($$renderer, $$props) {
     } else {
       $$renderer2.push("<!--[-1-->");
       $$renderer2.push(`<button${$.attributes({
-        ...buttonAttributes,
+        ...buttonAttributes(),
         type: buttonType(),
-        role: "menuitem",
+        role: itemRole,
+        "aria-checked": ariaChecked(),
         class: $.clsx(sharedClass()),
         "data-cinder-variant": variant,
         tabindex: -1,
@@ -125,4 +130,4 @@ export {
   Dropdown_item as DropdownItem
 };
 
-//# debugId=C335483449E6B8CC64756E2164756E21
+//# debugId=7A940AA86D0B3A3464756E2164756E21