@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/context-menu/index.js

@@ -108,7 +108,6 @@ function Portal($$renderer, $$props) {
 var portal_default = Portal;
 // src/components/context-menu-trigger/context-menu-trigger.svelte
 import * as $3 from "svelte/internal/server";
-import { onDestroy } from "svelte";
 
 // src/components/dropdown/dropdown.context.ts
 import { createContext } from "svelte";
@@ -152,7 +151,10 @@ function Context_menu_trigger($$renderer, $$props) {
     let startY = 0;
     let suppressClick = false;
     let suppressNextContextmenu = false;
-    onDestroy(clearLongPress);
+    function attachTrigger(node) {
+      registerTrigger(node);
+      return () => registerTrigger(null);
+    }
     function clearLongPress() {
       clearTimeout(longPressTimer);
       longPressTimer = undefined;
@@ -228,7 +230,8 @@ function Context_menu_trigger($$renderer, $$props) {
       event.preventDefault();
       const target = event.target instanceof HTMLElement ? event.target : triggerElement;
       const rect = target?.getBoundingClientRect() ?? triggerElement?.getBoundingClientRect();
-      context.openAt(rect?.left ?? 0, rect?.bottom ?? 0);
+      const x = context.direction === "rtl" ? rect?.right : rect?.left;
+      context.openAt(x ?? 0, rect?.bottom ?? 0);
       callTriggerHandler(onkeydown, event);
     }
     function handlePointerup(event) {
@@ -260,7 +263,7 @@ function Dropdown_group($$renderer, $$props) {
     let {
       class: customClassName,
       children,
-      ariaLabel,
+      label,
       labelledBy,
       $$slots,
       $$events,
@@ -276,20 +279,20 @@ function Dropdown_group($$renderer, $$props) {
       return trimmedValue;
     }
     const resolvedAccessibleName = $4.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${$4.attributes({
       ...rest,
       class: $4.clsx(classNames("cinder-dropdown-group", customClassName)),
       role: "group",
-      "aria-label": resolvedAccessibleName().ariaLabel,
+      "aria-label": resolvedAccessibleName().label,
       "aria-labelledby": resolvedAccessibleName().labelledBy
     })}>`);
     if (children) {
@@ -309,6 +312,8 @@ function Dropdown_item($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let {
       variant = "default",
+      itemRole = "menuitem",
+      checked = false,
       inset = false,
       disabled,
       closeOnSelect = true,
@@ -353,15 +358,17 @@ function Dropdown_item($$renderer, $$props) {
         return;
       event.currentTarget.click();
     }
-    const anchorAttributes = rest;
-    const buttonAttributes = rest;
+    const anchorAttributes = $5.derived(() => rest);
+    const buttonAttributes = $5.derived(() => rest);
     const buttonType = $5.derived(() => rest.type ?? "button");
+    const ariaChecked = $5.derived(() => itemRole === "menuitemradio" ? checked : undefined);
     if (isLink()) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<a${$5.attributes({
-        ...anchorAttributes,
+        ...anchorAttributes(),
         href,
-        role: "menuitem",
+        role: itemRole,
+        "aria-checked": ariaChecked(),
         class: $5.clsx(sharedClass()),
         "data-cinder-variant": variant,
         tabindex: -1,
@@ -379,9 +386,10 @@ function Dropdown_item($$renderer, $$props) {
     } else {
       $$renderer2.push("<!--[-1-->");
       $$renderer2.push(`<button${$5.attributes({
-        ...buttonAttributes,
+        ...buttonAttributes(),
         type: buttonType(),
-        role: "menuitem",
+        role: itemRole,
+        "aria-checked": ariaChecked(),
         class: $5.clsx(sharedClass()),
         "data-cinder-variant": variant,
         tabindex: -1,
@@ -450,23 +458,205 @@ function createAnchoredOverlay(options) {
   };
 }
 
+// src/_internal/locale-context.ts
+import { createContext as createContext3 } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/locale-context.ts
+var [getLocaleContextStrict, setLocaleContextRaw] = createContext3();
+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 = $8.derived(() => {
+      if (direction === "auto") {
+        return resolveTextDirection(context.anchorElement, localeContext?.direction) ?? direction;
+      }
+      return direction ?? resolveTextDirection(context.anchorElement, localeContext?.direction);
+    });
+    const fallbackAnchorElement = $8.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 = $8.derived(() => context.fallbackPositionStyle ?? (fallbackAnchorElement() ? anchoredFallback.positionStyle : undefined));
+    const fallbackPositionReady = $8.derived(() => context.fallbackPositionReady ?? (fallbackAnchorElement() ? anchoredFallback.positionReady : undefined));
     const fallbackPortalAttachment = createPortalAttachment({
       target: () => typeof document === "undefined" ? null : document.body,
       source: () => context.anchorElement,
@@ -476,7 +666,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();
@@ -536,12 +726,14 @@ function Dropdown_menu($$renderer, $$props) {
         id: context.menuId,
         popover: context.supportsPopover ? "auto" : undefined,
         class: $8.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-->");
@@ -653,6 +845,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) => {
@@ -660,17 +856,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;
         }
       }
@@ -767,7 +965,9 @@ function Context_menu($$renderer, $$props) {
     let capturedFocus = null;
     let requestedX = 0;
     let requestedY = 0;
+    let directionRevision = 0;
     let previouslyOpen = false;
+    const localeContext = getLocaleContext();
     function setOpen(nextOpen) {
       if (open === nextOpen)
         return;
@@ -811,11 +1011,14 @@ function Context_menu($$renderer, $$props) {
       };
     }
     const virtualReference = $10.derived(() => open ? makeVirtualReference(anchorPoint?.x ?? requestedX, anchorPoint?.y ?? requestedY) : null);
+    const resolvedDirection = $10.derived(() => {
+      return resolveTextDirection(triggerElement, localeContext?.direction);
+    });
     const anchoredOverlay = createAnchoredOverlay({
       open: () => open,
       anchor: () => virtualReference(),
       panel: () => menuElement,
-      placement: () => "right-start",
+      placement: () => resolvedDirection() === "rtl" ? "left-start" : "right-start",
       offset: () => 0,
       widthMode: () => "menu"
     });
@@ -836,6 +1039,18 @@ function Context_menu($$renderer, $$props) {
       get supportsPopover() {
         return false;
       },
+      get anchorElement() {
+        return triggerElement;
+      },
+      get fallbackAnchorElement() {
+        return null;
+      },
+      get fallbackPositionStyle() {
+        return anchoredOverlay.positionStyle;
+      },
+      get fallbackPositionReady() {
+        return anchoredOverlay.positionReady;
+      },
       get initialFocus() {
         return "first";
       },
@@ -855,6 +1070,9 @@ function Context_menu($$renderer, $$props) {
       get longPressDelay() {
         return longPressDelay;
       },
+      get direction() {
+        return resolvedDirection();
+      },
       openAt,
       close
     });
@@ -880,4 +1098,4 @@ export {
   ContextMenu
 };
 
-//# debugId=B0C0EE24F28ABB7364756E2164756E21
+//# debugId=398EE921F516849964756E2164756E21

package/dist/server/components/context-menu-trigger/index.js

@@ -4,7 +4,6 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/context-menu-trigger/context-menu-trigger.svelte
 import * as $ from "svelte/internal/server";
-import { onDestroy } from "svelte";
 
 // src/utilities/class-names.ts
 function classNames(...parts) {
@@ -53,7 +52,10 @@ function Context_menu_trigger($$renderer, $$props) {
     let startY = 0;
     let suppressClick = false;
     let suppressNextContextmenu = false;
-    onDestroy(clearLongPress);
+    function attachTrigger(node) {
+      registerTrigger(node);
+      return () => registerTrigger(null);
+    }
     function clearLongPress() {
       clearTimeout(longPressTimer);
       longPressTimer = undefined;
@@ -129,7 +131,8 @@ function Context_menu_trigger($$renderer, $$props) {
       event.preventDefault();
       const target = event.target instanceof HTMLElement ? event.target : triggerElement;
       const rect = target?.getBoundingClientRect() ?? triggerElement?.getBoundingClientRect();
-      context.openAt(rect?.left ?? 0, rect?.bottom ?? 0);
+      const x = context.direction === "rtl" ? rect?.right : rect?.left;
+      context.openAt(x ?? 0, rect?.bottom ?? 0);
       callTriggerHandler(onkeydown, event);
     }
     function handlePointerup(event) {
@@ -161,4 +164,4 @@ export {
   Context_menu_trigger as ContextMenuTrigger
 };
 
-//# debugId=0AA58F20F9DA187D64756E2164756E21
+//# debugId=6CEA0773462C082064756E2164756E21

package/dist/server/components/copy-button/index.js

@@ -4,7 +4,6 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // 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";
@@ -217,10 +216,6 @@ function Copy_button($$renderer, $$props) {
         copied = false;
       }, confirmDuration);
     }
-    onDestroy(() => {
-      if (resetTimer)
-        clearTimeout(resetTimer);
-    });
     $$renderer2.push(`<button${$5.attributes({
       ...rest,
       type: "button",
@@ -262,4 +257,4 @@ export {
   Copy_button as CopyButton
 };
 
-//# debugId=1D3C303B2FDFAB1764756E2164756E21
+//# debugId=545ACBF21F063CD164756E2164756E21

package/dist/server/components/data-grid/data-grid.schema.js

@@ -82,12 +82,12 @@ var schema = {
         description: "Stable row identity used for ARIA ids and row-scoped state."
       },
       {
-        name: "onSelectionModelChange",
+        name: "onselectionmodelchange",
         reason: "function-or-snippet",
         description: "Called when row selection changes through cell interaction."
       },
       {
-        name: "onSortModelChange",
+        name: "onsortmodelchange",
         reason: "function-or-snippet",
         description: "Called after the user changes sort order and DataGrid updates `sortModel`."
       },
@@ -114,4 +114,4 @@ export {
   data_grid_schema_default as default
 };
 
-//# debugId=9DF1D5768089BC4264756E2164756E21
+//# debugId=DDE41002E0E8839464756E2164756E21

package/dist/server/components/data-grid/index.css

@@ -7,6 +7,7 @@
     --_cinder-data-grid-content-width: max-content;
     display: block;
     overflow: auto;
+    scrollbar-gutter: stable;
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-md);
     background: var(--cinder-surface);
@@ -18,11 +19,23 @@
     max-inline-size: 100%;
   }
 
+  .cinder-data-grid[data-cinder-virtualized-columns="true"] {
+    --_cinder-data-grid-overflow-shadow: inset 1rem 0 1rem -1rem color-mix(in srgb, var(--cinder-text) 28%, transparent), inset -1rem 0 1rem -1rem color-mix(in srgb, var(--cinder-text) 28%, transparent);
+  }
+
   .cinder-data-grid:focus-visible {
     outline: var(--cinder-ring-width) solid transparent;
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-data-grid:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: calc(-1 * var(--cinder-ring-width));
+      box-shadow: none;
+    }
+  }
+
   .cinder-data-grid__header-row, .cinder-data-grid__row {
     display: grid;
     grid-template-columns: var(--_cinder-data-grid-template-columns);
@@ -32,6 +45,7 @@
 
   .cinder-data-grid__header-row {
     background: var(--cinder-surface-inset);
+    box-shadow: var(--_cinder-data-grid-overflow-shadow, none);
   }
 
   .cinder-data-grid[data-cinder-sticky-header] .cinder-data-grid__header-row {
@@ -42,6 +56,7 @@
 
   .cinder-data-grid__row {
     background: var(--cinder-surface);
+    box-shadow: var(--_cinder-data-grid-overflow-shadow, none);
     transition: background var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
@@ -114,6 +129,14 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-data-grid__sort-button:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-data-grid__header-content {
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/server/components/data-grid/index.js

@@ -167,6 +167,8 @@ function resolveColumn(column, index, columnSizing, columnPinning) {
     resolvedColumn.cell = column.cell;
   if (column.maxWidth !== undefined)
     resolvedColumn.maxWidth = column.maxWidth;
+  if (column.rowHeader !== undefined)
+    resolvedColumn.rowHeader = column.rowHeader;
   if (column.sortable !== undefined)
     resolvedColumn.sortable = column.sortable;
   if (column.sortComparator !== undefined)
@@ -2169,9 +2171,9 @@ function Data_grid($$renderer, $$props) {
       columnPinning,
       selectionMode = "none",
       selectionModel = undefined,
-      onSelectionModelChange,
+      onselectionmodelchange,
       sortModel = [],
-      onSortModelChange,
+      onsortmodelchange,
       rowClass,
       getRowAriaLabel,
       class: className,
@@ -2466,7 +2468,7 @@ function Data_grid($$renderer, $$props) {
         return;
       const nextSortModel = getNextDataGridSortModel(activeSortModel(), column.key, event.shiftKey);
       sortModel = nextSortModel;
-      onSortModelChange?.(nextSortModel);
+      onsortmodelchange?.(nextSortModel);
     }
     function getCellCoordinate(rowIndex, columnIndex) {
       const rowId = rowDomIds()[Math.min(Math.max(rowIndex, 0), rowDomIds().length - 1)];
@@ -2510,7 +2512,7 @@ function Data_grid($$renderer, $$props) {
     }
     function setSelectionModel(nextSelectionModel) {
       selectionModel = nextSelectionModel;
-      onSelectionModelChange?.(nextSelectionModel);
+      onselectionmodelchange?.(nextSelectionModel);
     }
     function updateRowSelection(rowId, event) {
       if (selectionMode === "none")
@@ -2785,7 +2787,7 @@ function Data_grid($$renderer, $$props) {
       const rowId = keyedRow.rowId;
       const rowDomId = keyedRow.rowDomId;
       const rowIndex = renderedRow.visualRowIndex;
-      $$renderer2.push(`<div${$4.attr_class($4.clsx(classNames("cinder-data-grid__row", getRowClass(row, rowIndex))))} role="row"${$4.attr("aria-rowindex", rowIndex + 2)}${$4.attr("aria-label", getResolvedRowAriaLabel(row, rowIndex))}${$4.attr("aria-selected", selectedRowIds().has(rowId) ? "true" : undefined)}${$4.attr("data-cinder-selected", selectedRowIds().has(rowId) ? "true" : undefined)}${$4.attr("data-cinder-virtual-index", rowIndex)}${$4.attr_style(getRowStyle(renderedRow))}><!--[-->`);
+      $$renderer2.push(`<div${$4.attr_class($4.clsx(classNames("cinder-data-grid__row", getRowClass(row, rowIndex))))} role="row"${$4.attr("aria-rowindex", rowIndex + 2)}${$4.attr("aria-label", getResolvedRowAriaLabel(row, rowIndex))}${$4.attr("aria-selected", selectedRowIds().has(rowId) ? "true" : undefined)}${$4.attr("data-cinder-selected", selectedRowIds().has(rowId) ? "" : undefined)}${$4.attr("data-cinder-virtual-index", rowIndex)}${$4.attr_style(getRowStyle(renderedRow))}><!--[-->`);
       const each_array_2 = $4.ensure_array_like(renderedColumns());
       for (let $$index_1 = 0, $$length2 = each_array_2.length;$$index_1 < $$length2; $$index_1++) {
         let column = each_array_2[$$index_1];
@@ -2794,7 +2796,7 @@ function Data_grid($$renderer, $$props) {
         const cellCoordinates = { rowId: rowDomId, columnKey: column.key };
         const isSelectedCell = selectionState.isCellSelected(cellCoordinates);
         const isAnchorCell = selectionState.isAnchorCell(cellCoordinates);
-        $$renderer2.push(`<div${$4.attr("id", cellId)} class="cinder-data-grid__cell" role="gridcell"${$4.attr("aria-colindex", column.colIndex)}${$4.attr("aria-selected", isSelectedCell ? "true" : undefined)} tabindex="-1"${$4.attr("data-cinder-pin", column.pin)}${$4.attr("data-cinder-active", activeCellId() === cellId ? "true" : undefined)}${$4.attr("data-cinder-selected", isSelectedCell ? "true" : undefined)}${$4.attr("data-cinder-anchor", isAnchorCell ? "true" : undefined)}${$4.attr("data-cinder-row-id", rowId)}${$4.attr("data-cinder-row-dom-id", rowDomId)}${$4.attr("data-cinder-column-key", column.key)}${$4.attr("data-cinder-row-index", rowIndex)}${$4.attr_style(getCellStyle(column))}>`);
+        $$renderer2.push(`<div${$4.attr("id", cellId)} class="cinder-data-grid__cell"${$4.attr("role", column.rowHeader ? "rowheader" : "gridcell")}${$4.attr("aria-colindex", column.colIndex)}${$4.attr("aria-selected", isSelectedCell ? "true" : undefined)} tabindex="-1"${$4.attr("data-cinder-pin", column.pin)}${$4.attr("data-cinder-active", activeCellId() === cellId ? "true" : undefined)}${$4.attr("data-cinder-selected", isSelectedCell ? "" : undefined)}${$4.attr("data-cinder-anchor", isAnchorCell ? "true" : undefined)}${$4.attr("data-cinder-row-id", rowId)}${$4.attr("data-cinder-row-dom-id", rowDomId)}${$4.attr("data-cinder-column-key", column.key)}${$4.attr("data-cinder-row-index", rowIndex)}${$4.attr_style(getCellStyle(column))}>`);
         if (column.cell) {
           $$renderer2.push("<!--[0-->");
           column.cell($$renderer2, { row, value, editing: false });
@@ -2819,4 +2821,4 @@ export {
   Data_grid as DataGrid
 };
 
-//# debugId=14E80F45A8E4047764756E2164756E21
+//# debugId=11E67A24B73878AC64756E2164756E21

package/dist/server/components/data-list/data-list.schema.js

@@ -39,18 +39,15 @@ var schema = {
       {
         name: "key",
         reason: "function-or-snippet",
-        description: `Key extractor for efficient DOM updates. Svelte uses this to identify each
-row when the list is reordered, filtered, or updated — without it, rows are
-matched by index and the wrong row instances may receive updated props.
-
-Strongly recommended for any list that can change after initial render:
+        required: true,
+        description: `Key extractor for stable DOM reconciliation. Svelte uses this to identify
+each row when the list is reordered, filtered, or updated. Without a key,
+rows are matched by index and the wrong row instances may receive updated
+props, causing O(n) churn and incorrect rendering.
 
 \`\`\`svelte
 <DataList {items} key={(m) => m.id}>
-\`\`\`
-
-Omit only for truly static, never-reordered lists (e.g. a fixed reference
-list). When omitted, Svelte falls back to index-based reconciliation.`
+\`\`\``
       }
     ]
   }
@@ -60,4 +57,4 @@ export {
   data_list_schema_default as default
 };
 
-//# debugId=15B59C4AE68D6B1064756E2164756E21
+//# debugId=1444D2952031644764756E2164756E21