@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/chat-conversation-header/index.css

@@ -69,7 +69,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 {
@@ -201,10 +201,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/server/components/chat-conversation-header/index.js

@@ -275,6 +275,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) => {
@@ -282,17 +286,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;
         }
       }
@@ -534,6 +540,8 @@ function Dropdown_item($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let {
       variant = "default",
+      itemRole = "menuitem",
+      checked = false,
       inset = false,
       disabled,
       closeOnSelect = true,
@@ -578,15 +586,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,
@@ -604,9 +614,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,
@@ -654,23 +665,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,
@@ -680,7 +873,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();
@@ -740,12 +933,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-->");
@@ -778,7 +973,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);
@@ -1465,4 +1663,4 @@ export {
   Chat_conversation_header as ChatConversationHeader
 };
 
-//# debugId=66065F49E353045764756E2164756E21
+//# debugId=9F40C5E82C8DEDAC64756E2164756E21

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

@@ -55,6 +55,14 @@
     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;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-chat-conversation-list__title {
     grid-column: 1;
     grid-row: 1;

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

@@ -43,6 +43,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."
       }
     ]
   }
@@ -52,4 +57,4 @@ export {
   checkbox_schema_default as default
 };
 
-//# debugId=8C85301F76301F8264756E2164756E21
+//# debugId=1EEFD85EB5503D6E64756E2164756E21

package/dist/server/components/checkbox/index.css

@@ -123,6 +123,9 @@
   }
 
   .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/server/components/checkbox/index.js

@@ -80,6 +80,13 @@ function devWarn(message, ...args) {
   console.warn(message, ...args);
 }
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/checkbox/checkbox.svelte
 function Checkbox($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
@@ -87,6 +94,7 @@ function Checkbox($$renderer, $$props) {
     let {
       id,
       checked = false,
+      onValueChange,
       indeterminate = false,
       label,
       description,
@@ -96,6 +104,7 @@ function Checkbox($$renderer, $$props) {
       class: className,
       "aria-describedby": consumerDescribedBy,
       "aria-invalid": consumerInvalid,
+      onchange: consumerOnchange,
       $$slots,
       $$events,
       ...rest
@@ -114,20 +123,48 @@ function Checkbox($$renderer, $$props) {
       required: required ?? undefined
     }));
     let inputElement = undefined;
+    let resetSyncTimeout;
+    function syncCheckedAfterFormReset() {
+      if (resetSyncTimeout !== undefined)
+        clearTimeout(resetSyncTimeout);
+      resetSyncTimeout = setTimeout(() => {
+        resetSyncTimeout = undefined;
+        if (!inputElement)
+          return;
+        checked = inputElement.checked;
+        inputElement.indeterminate = indeterminate && !inputElement.checked;
+      }, 0);
+    }
+    function handleChange(event) {
+      const target = event.currentTarget;
+      const committed = commitValue(target.checked, onValueChange, (next) => {
+        checked = next;
+      });
+      target.checked = committed;
+      target.indeterminate = indeterminate && !committed;
+      consumerOnchange?.(event);
+    }
     $$renderer2.push(`<div class="cinder-checkbox-field"><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input${$.attributes({
       id: field().id,
       type: "checkbox",
+      ...rest,
       disabled: field().disabled,
       required: field().required,
       checked,
       class: $.clsx(classNames("cinder-checkbox", className)),
       "aria-invalid": field().ariaInvalid,
-      "aria-describedby": field().describedBy,
-      ...rest
+      "aria-describedby": field().describedBy
     }, undefined, undefined, undefined, 4)}/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> `);
     if (label) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<label${$.attr("for", field().id)} class="cinder-checkbox-field__label"${$.attr("data-disabled", field().disabled || undefined)}>${$.escape(label)}</label>`);
+      $$renderer2.push(`<label${$.attr("for", field().id)} class="cinder-checkbox-field__label"${$.attr("data-disabled", field().disabled || undefined)}>${$.escape(label)} `);
+      if (field().required) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></label>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
@@ -157,4 +194,4 @@ export {
   Checkbox
 };
 
-//# debugId=2BD538DEBCC1FFAF64756E2164756E21
+//# debugId=7E44179FEE71A5D664756E2164756E21

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

@@ -7,9 +7,9 @@ var schema = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   type: "object",
   properties: {
-    legend: {
+    label: {
       type: "string",
-      description: "Optional legend rendered as a `<legend>` inside the `<fieldset>`."
+      description: "Visible group caption. Rendered as a `<legend>` inside the `<fieldset>`.\nNamed `label` for consistency with every other form control — the element\nis a `<legend>` because the group is a fieldset."
     },
     description: {
       type: "string",
@@ -25,7 +25,7 @@ var schema = {
     },
     required: {
       type: "boolean",
-      description: "Marks the group as visually required. Sets `data-cinder-required` on the\nfieldset so consumers can target it (e.g. legend asterisk).\n\nThis is a visual/data-attribute hint. It does NOT set `required` on any\nchild `<input>` and does NOT enforce constraint validation. Per-control\n`required` must be set on the individual `<Checkbox>`."
+      description: 'Marks the group required: sets `aria-required="true"` and\n`data-cinder-required` on the fieldset and renders the required asterisk in\nthe legend.\n\nIt does NOT set `required` on any child `<input>` and does NOT enforce\nnative constraint validation. Per-control `required` must be set on the\nindividual `<Checkbox>`.'
     },
     variant: {
       enum: ["default", "card"],
@@ -53,4 +53,4 @@ export {
   checkbox_group_schema_default as default
 };
 
-//# debugId=D4C7A647215154C164756E2164756E21
+//# debugId=11EC5C287E6005C564756E2164756E21

package/dist/server/components/checkbox-group/index.css

@@ -12,6 +12,9 @@
   }
 
   .cinder-checkbox-group__legend {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
     font-size: var(--cinder-text-xs);
     font-weight: var(--cinder-font-medium);
     color: var(--cinder-text);

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

@@ -48,12 +48,23 @@ function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
+// ../../node_modules/esm-env/false.js
+var false_default = false;
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
 // src/components/checkbox-group/checkbox-group.svelte
 function Checkbox_group($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     const groupId = $.props_id($$renderer2);
     let {
-      legend,
+      label: legend,
       description,
       error,
       disabled = false,
@@ -65,10 +76,18 @@ function Checkbox_group($$renderer, $$props) {
     const descriptionId = $.derived(() => describeId(groupId, !!description));
     const errId = $.derived(() => errorId(groupId, !!error));
     const describedBy = $.derived(() => composeDescribedBy(descriptionId(), errId()));
-    $$renderer2.push(`<fieldset${$.attr_class($.clsx(classNames("cinder-checkbox-group", className)))}${$.attr("disabled", disabled, true)}${$.attr("aria-invalid", ariaInvalid(!!error))}${$.attr("aria-describedby", describedBy())}${$.attr("data-cinder-disabled", disabled || undefined)}${$.attr("data-cinder-required", required || undefined)}${$.attr("data-variant", variant)}>`);
+    let hasWarnedNoLegend = false;
+    $$renderer2.push(`<fieldset${$.attr_class($.clsx(classNames("cinder-checkbox-group", className)))}${$.attr("disabled", disabled, true)}${$.attr("aria-invalid", ariaInvalid(!!error))}${$.attr("aria-describedby", describedBy())}${$.attr("aria-required", required || undefined)}${$.attr("data-cinder-disabled", disabled || undefined)}${$.attr("data-cinder-required", required || undefined)}${$.attr("data-variant", variant)}>`);
     if (legend) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<legend class="cinder-checkbox-group__legend">${$.escape(legend)}</legend>`);
+      $$renderer2.push(`<legend class="cinder-checkbox-group__legend">${$.escape(legend)} `);
+      if (required) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></legend>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
@@ -99,4 +118,4 @@ export {
   Checkbox_group as CheckboxGroup
 };
 
-//# debugId=C3EE8AA821A16A7C64756E2164756E21
+//# debugId=DB409EC16A16579E64756E2164756E21

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

@@ -92,7 +92,7 @@ function Choice_grid_item($$renderer, $$props) {
     function handleKeydown(event) {
       context.handleKeydown(event);
     }
-    $$renderer2.push(`<div${$.attr("role", role())}${$.attr("aria-checked", isSelected())}${$.attr("aria-disabled", isDisabled() || undefined)}${$.attr("tabindex", tabIndex())}${$.attr_class($.clsx(classNames("cinder-choice-grid-item", className)))}${$.attr("data-cinder-selected", isSelected() || undefined)}${$.attr("data-cinder-disabled", isDisabled() || undefined)}${$.attr("data-cinder-state", feedbackState() !== "neutral" ? feedbackState() : undefined)}><span class="cinder-choice-grid-item__content">`);
+    $$renderer2.push(`<div${$.attr("role", role())}${$.attr("aria-checked", isSelected())}${$.attr("aria-disabled", isDisabled() || undefined)}${$.attr("tabindex", tabIndex())}${$.attr_class($.clsx(classNames("cinder-choice-grid-item", className)))}${$.attr("data-cinder-selected", isSelected() ? "" : undefined)}${$.attr("data-cinder-disabled", isDisabled() || undefined)}${$.attr("data-cinder-state", feedbackState() !== "neutral" ? feedbackState() : undefined)}><span class="cinder-choice-grid-item__content">`);
     children($$renderer2);
     $$renderer2.push(`<!----></span></div>`);
   });
@@ -349,4 +349,4 @@ export {
   ChoiceGrid
 };
 
-//# debugId=9AC00C72118F0A5764756E2164756E21
+//# debugId=449E3475478B3B8964756E2164756E21

package/dist/server/components/choice-grid-item/index.js

@@ -92,7 +92,7 @@ function Choice_grid_item($$renderer, $$props) {
     function handleKeydown(event) {
       context.handleKeydown(event);
     }
-    $$renderer2.push(`<div${$.attr("role", role())}${$.attr("aria-checked", isSelected())}${$.attr("aria-disabled", isDisabled() || undefined)}${$.attr("tabindex", tabIndex())}${$.attr_class($.clsx(classNames("cinder-choice-grid-item", className)))}${$.attr("data-cinder-selected", isSelected() || undefined)}${$.attr("data-cinder-disabled", isDisabled() || undefined)}${$.attr("data-cinder-state", feedbackState() !== "neutral" ? feedbackState() : undefined)}><span class="cinder-choice-grid-item__content">`);
+    $$renderer2.push(`<div${$.attr("role", role())}${$.attr("aria-checked", isSelected())}${$.attr("aria-disabled", isDisabled() || undefined)}${$.attr("tabindex", tabIndex())}${$.attr_class($.clsx(classNames("cinder-choice-grid-item", className)))}${$.attr("data-cinder-selected", isSelected() ? "" : undefined)}${$.attr("data-cinder-disabled", isDisabled() || undefined)}${$.attr("data-cinder-state", feedbackState() !== "neutral" ? feedbackState() : undefined)}><span class="cinder-choice-grid-item__content">`);
     children($$renderer2);
     $$renderer2.push(`<!----></span></div>`);
   });
@@ -105,4 +105,4 @@ export {
   Choice_grid_item as ChoiceGridItem
 };
 
-//# debugId=11E5413DB3BA071864756E2164756E21
+//# debugId=2B9CCF1565182F1964756E2164756E21

package/dist/server/components/click-away-listener/click-away-listener.schema.js

@@ -9,7 +9,7 @@ var schema = {
   properties: {
     enabled: {
       type: "boolean",
-      description: "When false the document listener is detached and `onClickAway` is never\ncalled. Defaults to `true`."
+      description: "When false the document listener is detached and `onclickaway` is never\ncalled. Defaults to `true`."
     },
     class: {
       type: "string",
@@ -26,7 +26,7 @@ var schema = {
         description: "Content rendered inside the root element. Required."
       },
       {
-        name: "onClickAway",
+        name: "onclickaway",
         reason: "function-or-snippet",
         required: true,
         description: `Called with the triggering PointerEvent (or MouseEvent/TouchEvent on
@@ -41,4 +41,4 @@ export {
   click_away_listener_schema_default as default
 };
 
-//# debugId=2461A21C0876B30964756E2164756E21
+//# debugId=71F72FCEC9034CE164756E2164756E21

package/dist/server/components/click-away-listener/index.js

@@ -14,7 +14,7 @@ function classNames(...parts) {
 function Click_away_listener($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let {
-      onClickAway,
+      onclickaway,
       enabled = true,
       class: className,
       children,
@@ -39,4 +39,4 @@ export {
   Click_away_listener as ClickAwayListener
 };
 
-//# debugId=5AD924F8BFD6FE3664756E2164756E21
+//# debugId=67BE75D670CD9EE364756E2164756E21

package/dist/server/components/code-block/index.css

@@ -85,8 +85,8 @@
     border: 1px solid #0000;
     justify-content: center;
     align-items:  center;
-    min-block-size: 1.75rem;
-    inline-size: 1.75rem;
+    min-block-size: 2rem;
+    inline-size: 2rem;
   }
 
   .cinder-code-block .cinder-code-block__header .cinder-copy-button:focus-visible {
@@ -96,7 +96,8 @@
 
   @media (forced-colors: active) {
     .cinder-code-block .cinder-code-block__header .cinder-copy-button:focus-visible {
-      outline-color: canvastext;
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
       box-shadow: none;
     }
   }