@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/dropdown/dropdown.css

@@ -93,7 +93,7 @@
     border-radius: var(--cinder-radius-md);
     background: var(--cinder-surface-raised);
     color: var(--cinder-text);
-    box-shadow: var(--cinder-shadow-lg);
+    box-shadow: var(--cinder-shadow-overlay);
   }
 
   .cinder-dropdown__menu {
@@ -265,10 +265,16 @@
       position: fixed;
       inset: auto;
       top: calc(anchor(bottom) + var(--cinder-space-1));
+      left: auto;
       right: anchor(right);
       position-try-fallbacks: flip-block, flip-inline;
     }
 
+    .cinder-dropdown-menu[popover][dir='rtl'] {
+      right: auto;
+      left: anchor(left);
+    }
+
     .cinder-dropdown__menu[popover] {
       position: fixed;
       margin: 0;

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

@@ -8,6 +8,9 @@ export type DropdownContext = {
     get isOpen(): boolean;
     get supportsPopover(): boolean;
     readonly anchorElement?: HTMLElement | null | undefined;
+    readonly fallbackAnchorElement?: HTMLElement | null | undefined;
+    readonly fallbackPositionStyle?: string | undefined;
+    readonly fallbackPositionReady?: boolean | undefined;
     readonly fallbackPlacement?: Placement | undefined;
     readonly widthMode?: AnchoredOverlayWidthMode | undefined;
     readonly initialFocus?: 'first' | 'last' | 'none' | undefined;

package/dist/components/dropdown/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);
@@ -2032,7 +2033,7 @@ function Dropdown_group($$anchor, $$props) {
     "$$legacy",
     "class",
     "children",
-    "ariaLabel",
+    "label",
     "labelledBy"
   ]);
   function normalizeAccessibleName(value, propertyName) {
@@ -2045,21 +2046,21 @@ function Dropdown_group($$anchor, $$props) {
     return trimmedValue;
   }
   const resolvedAccessibleName = $3.derived(() => {
-    const trimmedAriaLabel = normalizeAccessibleName($$props.ariaLabel, "ariaLabel");
+    const trimmedLabel = normalizeAccessibleName($$props.label, "label");
     const trimmedLabelledBy = normalizeAccessibleName($$props.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 };
   });
   var div = root2();
   $3.attribute_effect(div, ($0) => ({
     ...rest,
     class: $0,
     role: "group",
-    "aria-label": $3.get(resolvedAccessibleName).ariaLabel,
+    "aria-label": $3.get(resolvedAccessibleName).label,
     "aria-labelledby": $3.get(resolvedAccessibleName).labelledBy
   }), [() => classNames("cinder-dropdown-group", $$props.class)]);
   var node = $3.child(div);
@@ -2100,11 +2101,13 @@ var root_1 = $4.from_html(`<a><!></a>`);
 var root_3 = $4.from_html(`<button><!></button>`);
 function Dropdown_item($$anchor, $$props) {
   $4.push($$props, true);
-  let variant = $4.prop($$props, "variant", 3, "default"), inset = $4.prop($$props, "inset", 3, false), closeOnSelect = $4.prop($$props, "closeOnSelect", 3, true), rest = $4.rest_props($$props, [
+  let variant = $4.prop($$props, "variant", 3, "default"), itemRole = $4.prop($$props, "itemRole", 3, "menuitem"), checked = $4.prop($$props, "checked", 3, false), inset = $4.prop($$props, "inset", 3, false), closeOnSelect = $4.prop($$props, "closeOnSelect", 3, true), rest = $4.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "variant",
+    "itemRole",
+    "checked",
     "inset",
     "disabled",
     "closeOnSelect",
@@ -2146,18 +2149,20 @@ function Dropdown_item($$anchor, $$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(() => $$props.type ?? "button");
+  const ariaChecked = $4.derived(() => itemRole() === "menuitemradio" ? checked() : undefined);
   var fragment = $4.comment();
   var node = $4.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
       var a = root_1();
       $4.attribute_effect(a, () => ({
-        ...anchorAttributes,
+        ...$4.get(anchorAttributes),
         href: $$props.href,
-        role: "menuitem",
+        role: itemRole(),
+        "aria-checked": $4.get(ariaChecked),
         class: $4.get(sharedClass),
         "data-cinder-variant": variant(),
         tabindex: -1,
@@ -2185,9 +2190,10 @@ function Dropdown_item($$anchor, $$props) {
     var alternate = ($$anchor2) => {
       var button = root_3();
       $4.attribute_effect(button, () => ({
-        ...buttonAttributes,
+        ...$4.get(buttonAttributes),
         type: $4.get(buttonType),
-        role: "menuitem",
+        role: itemRole(),
+        "aria-checked": $4.get(ariaChecked),
         class: $4.get(sharedClass),
         "data-cinder-variant": variant(),
         tabindex: -1,
@@ -2420,24 +2426,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_12 = $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,
@@ -2448,6 +2665,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;
@@ -2463,7 +2687,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();
@@ -2526,14 +2750,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)
       ]);
@@ -2553,6 +2779,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) => {
@@ -2596,11 +2823,10 @@ function Dropdown_trigger($$anchor, $$props) {
   const context = getDropdownContext();
   const registerTrigger = getDropdownRegisterTrigger();
   const setOpen = getDropdownSetOpen();
-  let triggerElement = $9.state(null);
-  $9.user_effect(() => {
-    registerTrigger($9.get(triggerElement));
+  function attachTrigger(node) {
+    registerTrigger(node);
     return () => registerTrigger(null);
-  });
+  }
   function handleClick(event) {
     if (typeof $$props.onclick === "function") {
       $$props.onclick(event);
@@ -2621,32 +2847,32 @@ function Dropdown_trigger($$anchor, $$props) {
     onclick: handleClick,
     ...rest
   }), [() => classNames("cinder-dropdown-trigger", $$props.class)]);
-  var node = $9.child(button);
+  var node_1 = $9.child(button);
   {
     var consequent = ($$anchor2) => {
       var fragment = $9.comment();
-      var node_1 = $9.first_child(fragment);
-      $9.snippet(node_1, () => $$props.children);
+      var node_2 = $9.first_child(fragment);
+      $9.snippet(node_2, () => $$props.children);
       $9.append($$anchor2, fragment);
     };
-    $9.if(node, ($$render) => {
+    $9.if(node_1, ($$render) => {
       if ($$props.children)
         $$render(consequent);
     });
   }
-  var node_2 = $9.sibling(node, 2);
+  var node_3 = $9.sibling(node_1, 2);
   {
     var consequent_1 = ($$anchor2) => {
       var svg = root_2();
       $9.append($$anchor2, svg);
     };
-    $9.if(node_2, ($$render) => {
+    $9.if(node_3, ($$render) => {
       if (showCaret())
         $$render(consequent_1);
     });
   }
   $9.reset(button);
-  $9.bind_this(button, ($$value) => $9.set(triggerElement, $$value), () => $9.get(triggerElement));
+  $9.attach(button, () => attachTrigger);
   $9.append($$anchor, button);
   $9.pop();
 }
@@ -2722,6 +2948,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) => {
@@ -2729,17 +2959,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;
         }
       }
@@ -3067,4 +3299,4 @@ export {
   Dropdown2 as Dropdown
 };
 
-//# debugId=B11A6DC5F8BBAB5B64756E2164756E21
+//# debugId=E4656A6CA8AE02EB64756E2164756E21

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

@@ -30,13 +30,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,
@@ -55,4 +55,4 @@ export {
   dropdown_group_schema_default as default
 };
 
-//# debugId=7BBE5C46ED79E20D64756E2164756E21
+//# debugId=32EDE076981ACF6964756E2164756E21

package/dist/components/dropdown-group/dropdown-group.types.d.ts

@@ -7,12 +7,12 @@ type DropdownGroupBaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'aria-label'
     children?: Snippet;
 };
 export type DropdownGroupProps = DropdownGroupBaseProps & ({
-    /** Accessible label for the group, applied as aria-label. Provide exactly one of `ariaLabel` or `labelledBy`. */
-    ariaLabel: string;
+    /** Accessible label for the group, applied as aria-label. Provide exactly one of `label` or `labelledBy`. */
+    label: string;
     labelledBy?: never;
 } | {
-    ariaLabel?: never;
-    /** ID of an existing element whose text labels the group, applied as aria-labelledby. Provide exactly one of `ariaLabel` or `labelledBy`. */
+    label?: never;
+    /** ID of an existing element whose text labels the group, applied as aria-labelledby. Provide exactly one of `label` or `labelledBy`. */
     labelledBy: string;
 });
 export {};

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

@@ -40,7 +40,7 @@ function Dropdown_group($$anchor, $$props) {
     "$$legacy",
     "class",
     "children",
-    "ariaLabel",
+    "label",
     "labelledBy"
   ]);
   function normalizeAccessibleName(value, propertyName) {
@@ -53,21 +53,21 @@ function Dropdown_group($$anchor, $$props) {
     return trimmedValue;
   }
   const resolvedAccessibleName = $.derived(() => {
-    const trimmedAriaLabel = normalizeAccessibleName($$props.ariaLabel, "ariaLabel");
+    const trimmedLabel = normalizeAccessibleName($$props.label, "label");
     const trimmedLabelledBy = normalizeAccessibleName($$props.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 };
   });
   var div = root();
   $.attribute_effect(div, ($0) => ({
     ...rest,
     class: $0,
     role: "group",
-    "aria-label": $.get(resolvedAccessibleName).ariaLabel,
+    "aria-label": $.get(resolvedAccessibleName).label,
     "aria-labelledby": $.get(resolvedAccessibleName).labelledBy
   }), [() => classNames("cinder-dropdown-group", $$props.class)]);
   var node = $.child(div);
@@ -95,4 +95,4 @@ export {
   Dropdown_group as DropdownGroup
 };
 
-//# debugId=161B7382F8086C3064756E2164756E21
+//# debugId=F4A39801FF7536FB64756E2164756E21

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

@@ -30,6 +30,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`."
@@ -70,4 +78,4 @@ export {
   dropdown_item_schema_default as default
 };
 
-//# debugId=E625FED4A2622B1F64756E2164756E21
+//# debugId=85BA1F701522FDD064756E2164756E21

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

@@ -1,9 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export type DropdownItemVariant = 'default' | 'danger';
+export type DropdownItemRole = 'menuitem' | 'menuitemradio';
 type DropdownItemBase = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
     /** Visual style of the item. Use `danger` to signal a destructive action. Default `default`. */
     variant?: DropdownItemVariant;
+    /** ARIA role for the row. Use `menuitemradio` for mutually exclusive menu selections. */
+    itemRole?: DropdownItemRole;
+    /** Checked state for `itemRole="menuitemradio"`. Omitted for normal menu items. */
+    checked?: boolean;
     /** When true, adds leading padding to align the item with items that have a leading icon or indicator. Default `false`. */
     inset?: boolean;
     /** When true, the parent dropdown closes after this item is activated. Default `true`. */