@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/components/json-schema-editor/json-schema-editor-state.svelte.d.ts

@@ -12,17 +12,8 @@
  * Validation runs on the JSON draft (parse) immediately, on the committed
  * schema (meta-schema) and compile (debounced).
  */
-import type { JsonSchemaDraft, JsonSchemaEditorChangeEvent, JsonSchemaEditorRevertEvent, JsonSchemaEditorView, JsonSchemaKnownDraft, JsonSchemaValidationResult, JsonSchemaValidationStatus, JsonSchemaValue } from './json-schema-editor-types.ts';
-export interface CreateEditorStateOptions {
-    schema: JsonSchemaValue | string;
-    original?: JsonSchemaValue | string;
-    draftOverride?: JsonSchemaKnownDraft;
-    readonly?: boolean;
-    maxHistory?: number;
-    onchange?: (event: JsonSchemaEditorChangeEvent) => void;
-    onrevert?: (event: JsonSchemaEditorRevertEvent) => void;
-    onvalidate?: (result: JsonSchemaValidationResult) => void;
-}
+import type { CreateEditorStateOptions } from './json-schema-editor-state.types.ts';
+import type { JsonSchemaDraft, JsonSchemaEditorView, JsonSchemaKnownDraft, JsonSchemaValidationResult, JsonSchemaValidationStatus, JsonSchemaValue } from './json-schema-editor-types.ts';
 export declare function createEditorState(options: CreateEditorStateOptions): {
     view: JsonSchemaEditorView;
     readonly readonly: boolean;
@@ -63,4 +54,3 @@ export declare function createEditorState(options: CreateEditorStateOptions): {
     reload(schemaInput: JsonSchemaValue | string, originalInput?: JsonSchemaValue | string): void;
     destroy(): void;
 };
-export type EditorState = ReturnType<typeof createEditorState>;

package/dist/components/json-schema-editor/json-schema-editor-state.types.d.ts

@@ -0,0 +1,13 @@
+import type { createEditorState } from './json-schema-editor-state.svelte.ts';
+import type { JsonSchemaEditorChangeEvent, JsonSchemaEditorRevertEvent, JsonSchemaKnownDraft, JsonSchemaValidationResult, JsonSchemaValue } from './json-schema-editor-types.ts';
+export interface CreateEditorStateOptions {
+    schema: JsonSchemaValue | string;
+    original?: JsonSchemaValue | string;
+    draftOverride?: JsonSchemaKnownDraft;
+    readonly?: boolean;
+    maxHistory?: number;
+    onchange?: (event: JsonSchemaEditorChangeEvent) => void;
+    onrevert?: (event: JsonSchemaEditorRevertEvent) => void;
+    onvalidate?: (result: JsonSchemaValidationResult) => void;
+}
+export type EditorState = ReturnType<typeof createEditorState>;

package/dist/components/json-schema-editor/json-schema-editor.css

@@ -202,7 +202,11 @@
     display: flex;
     align-items: center;
     gap: var(--cinder-space-2);
-    padding: var(--cinder-space-1-5) var(--cinder-space-3);
+    padding-block: var(--cinder-space-1-5);
+    padding-inline-end: var(--cinder-space-3);
+    padding-inline-start: calc(
+      var(--cinder-space-3) + var(--cinder-jse-property-depth, 0) * var(--cinder-space-4)
+    );
     min-height: var(--cinder-button-height-md);
   }
 
@@ -271,6 +275,7 @@
     flex-direction: column;
     gap: var(--cinder-space-3);
     padding: var(--cinder-space-3) var(--cinder-space-3) var(--cinder-space-4);
+    margin-inline-start: calc(var(--cinder-jse-property-depth, 0) * var(--cinder-space-4));
     background: transparent;
   }
 

package/dist/components/json-schema-editor/json-schema-toolbar.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { EditorState } from './json-schema-editor-state.svelte.ts';
+import type { EditorState } from './json-schema-editor-state.types.ts';
 export type JsonSchemaToolbarProps = {
     state: EditorState;
+    localValidationErrorCount?: number;
     onUndo?: () => void;
     onRedo?: () => void;
     onRevert?: () => void;

package/dist/components/json-schema-editor/json-view.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { EditorState } from './json-schema-editor-state.svelte.ts';
+import type { EditorState } from './json-schema-editor-state.types.ts';
 export type JsonViewProps = {
     state: EditorState;
     idPrefix: string;

package/dist/components/json-schema-editor/property-editor.svelte.d.ts

@@ -10,6 +10,8 @@ export type PropertyEditorProps = {
     depth?: number;
     /** Whether the editor is read-only. */
     readonly?: boolean;
+    /** Called when nested form-only validation errors change. */
+    onvalidationerrorcount?: ((count: number) => void) | undefined;
     /** Called whenever the value changes. */
     onchange: (next: JsonSchemaValue, options?: {
         coalesceKey?: string;

package/dist/components/json-schema-editor/property-list-validation.d.ts

@@ -0,0 +1 @@
+export declare function calculatePropertyValidationErrorCount(propertyNames: string[], childValidationCounts: Record<string, number>, hasRenameError: boolean): number;

package/dist/components/json-schema-editor/property-list.svelte.d.ts

@@ -6,6 +6,7 @@ export type PropertyListProps = {
     path: string;
     depth?: number;
     readonly?: boolean;
+    onvalidationerrorcount?: ((count: number) => void) | undefined;
     onchange: (properties: Record<string, JsonSchemaValue>, required: string[]) => void;
 };
 declare const PropertyList: import("svelte").Component<PropertyListProps, {}, "">;

package/dist/components/json-viewer/_json-viewer-node.svelte.d.ts

@@ -8,6 +8,9 @@ export type JsonViewerNodeProps = {
     depth: number;
     initialDepth: number;
     maxDepth: number;
+    position: number;
+    setSize: number;
+    root?: boolean;
 };
 declare const JsonViewerNode: import("svelte").Component<JsonViewerNodeProps, {}, "">;
 type JsonViewerNode = ReturnType<typeof JsonViewerNode>;

package/dist/components/json-viewer/index.js

@@ -39,17 +39,18 @@ function classNames(...parts) {
 }
 
 // src/components/json-viewer/_json-viewer-node.svelte
-var root_2 = $.from_html(`<span class="cinder-json-viewer__key"> </span>`);
-var root_3 = $.from_html(`<span class="cinder-json-viewer__summary"> </span> <span class="cinder-json-viewer__brace"> </span>`, 1);
-var root_5 = $.from_html(`<li><!></li>`);
-var root_4 = $.from_html(`<ul class="cinder-json-viewer__children"></ul> <span class="cinder-json-viewer__brace"> </span>`, 1);
-var root_1 = $.from_html(`<span><button type="button" class="cinder-json-viewer__toggle"><!> <span class="cinder-json-viewer__caret"></span> <span class="cinder-json-viewer__brace"> </span> <!></button> <!></span>`);
-var root_7 = $.from_html(`<span class="cinder-json-viewer__key"> </span>`);
-var root_6 = $.from_html(`<span class="cinder-json-viewer__node"><!> <span class="cinder-json-viewer__too-deep">…</span></span>`);
-var root_9 = $.from_html(`<span class="cinder-json-viewer__key"> </span>`);
-var root_8 = $.from_html(`<span class="cinder-json-viewer__node"><!> <span class="cinder-json-viewer__value"><!></span></span>`);
+var root_3 = $.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_4 = $.from_html(`<span class="cinder-json-viewer__summary"> </span> <span class="cinder-json-viewer__brace"> </span>`, 1);
+var root_6 = $.from_html(`<li role="none"><!></li>`);
+var root_5 = $.from_html(`<ul class="cinder-json-viewer__children" role="group"></ul> <span class="cinder-json-viewer__brace"> </span>`, 1);
+var root_2 = $.from_html(`<span role="treeitem"><button type="button" class="cinder-json-viewer__toggle" tabindex="-1"><!> <span class="cinder-json-viewer__caret"></span> <span class="cinder-json-viewer__brace"> </span> <!></button> <!></span>`);
+var root_8 = $.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_7 = $.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__too-deep">…</span></span>`);
+var root_10 = $.from_html(`<span class="cinder-json-viewer__key"> </span>`);
+var root_9 = $.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__value"><!></span></span>`);
 function _json_viewer_node($$anchor, $$props) {
   $.push($$props, true);
+  let root = $.prop($$props, "root", 3, false);
   const isObject = $.derived(() => $$props.value !== null && typeof $$props.value === "object");
   const isArray = $.derived(() => Array.isArray($$props.value));
   const tooDeep = $.derived(() => $$props.depth >= $$props.maxDepth);
@@ -80,12 +81,12 @@ function _json_viewer_node($$anchor, $$props) {
   var node = $.first_child(fragment);
   {
     var consequent_3 = ($$anchor2) => {
-      var span = root_1();
+      var span = root_2();
       var button = $.child(span);
       var node_1 = $.child(button);
       {
         var consequent = ($$anchor3) => {
-          var span_1 = root_2();
+          var span_1 = root_3();
           var text2 = $.child(span_1);
           $.reset(span_1);
           $.template_effect(() => $.set_text(text2, `${$$props.keyName ?? ""}:`));
@@ -103,7 +104,7 @@ function _json_viewer_node($$anchor, $$props) {
       var node_2 = $.sibling(span_3, 2);
       {
         var consequent_1 = ($$anchor3) => {
-          var fragment_1 = root_3();
+          var fragment_1 = root_4();
           var span_4 = $.first_child(fragment_1);
           var text_2 = $.child(span_4);
           $.reset(span_4);
@@ -125,16 +126,17 @@ function _json_viewer_node($$anchor, $$props) {
       var node_3 = $.sibling(button, 2);
       {
         var consequent_2 = ($$anchor3) => {
-          var fragment_2 = root_4();
+          var fragment_2 = root_5();
           var ul = $.first_child(fragment_2);
-          $.each(ul, 21, () => $.get(entries), ([k, v]) => k, ($$anchor4, $$item) => {
+          $.each(ul, 23, () => $.get(entries), ([k, v]) => k, ($$anchor4, $$item, index) => {
             var $$array = $.derived(() => $.to_array($.get($$item), 2));
             let k = () => $.get($$array)[0];
             let v = () => $.get($$array)[1];
-            var li = root_5();
+            var li = root_6();
             var node_4 = $.child(li);
             {
               let $0 = $.derived(() => $$props.depth + 1);
+              let $1 = $.derived(() => $.get(index) + 1);
               _json_viewer_node(node_4, {
                 get value() {
                   return v();
@@ -150,6 +152,12 @@ function _json_viewer_node($$anchor, $$props) {
                 },
                 get maxDepth() {
                   return $$props.maxDepth;
+                },
+                get position() {
+                  return $.get($1);
+                },
+                get setSize() {
+                  return $.get(entries).length;
                 }
               });
             }
@@ -171,7 +179,12 @@ function _json_viewer_node($$anchor, $$props) {
       $.reset(span);
       $.template_effect(($0) => {
         $.set_class(span, 1, $0);
-        $.set_attribute(button, "aria-expanded", !$.get(collapsed));
+        $.set_attribute(span, "aria-expanded", !$.get(collapsed));
+        $.set_attribute(span, "aria-label", $.get(toggleLabel));
+        $.set_attribute(span, "aria-level", $$props.depth + 1);
+        $.set_attribute(span, "aria-posinset", $$props.position);
+        $.set_attribute(span, "aria-setsize", $$props.setSize);
+        $.set_attribute(span, "tabindex", root() ? 0 : -1);
         $.set_attribute(button, "aria-label", $.get(toggleLabel));
         $.set_attribute(span_2, "data-cinder-collapsed", $.get(collapsed) || undefined);
         $.set_text(text_1, $.get(isArray) ? "[" : "{");
@@ -180,11 +193,11 @@ function _json_viewer_node($$anchor, $$props) {
       $.append($$anchor2, span);
     };
     var consequent_5 = ($$anchor2) => {
-      var span_7 = root_6();
+      var span_7 = root_7();
       var node_5 = $.child(span_7);
       {
         var consequent_4 = ($$anchor3) => {
-          var span_8 = root_7();
+          var span_8 = root_8();
           var text_5 = $.child(span_8);
           $.reset(span_8);
           $.template_effect(() => $.set_text(text_5, `${$$props.keyName ?? ""}:`));
@@ -197,14 +210,20 @@ function _json_viewer_node($$anchor, $$props) {
       }
       $.next(2);
       $.reset(span_7);
+      $.template_effect(() => {
+        $.set_attribute(span_7, "tabindex", root() ? 0 : -1);
+        $.set_attribute(span_7, "aria-level", $$props.depth + 1);
+        $.set_attribute(span_7, "aria-posinset", $$props.position);
+        $.set_attribute(span_7, "aria-setsize", $$props.setSize);
+      });
       $.append($$anchor2, span_7);
     };
     var alternate_1 = ($$anchor2) => {
-      var span_9 = root_8();
+      var span_9 = root_9();
       var node_6 = $.child(span_9);
       {
         var consequent_6 = ($$anchor3) => {
-          var span_10 = root_9();
+          var span_10 = root_10();
           var text_6 = $.child(span_10);
           $.reset(span_10);
           $.template_effect(() => $.set_text(text_6, `${$$props.keyName ?? ""}:`));
@@ -237,7 +256,13 @@ function _json_viewer_node($$anchor, $$props) {
       }
       $.reset(span_11);
       $.reset(span_9);
-      $.template_effect(($0) => $.set_attribute(span_11, "data-cinder-type", $0), [() => valueClass($$props.value)]);
+      $.template_effect(($0) => {
+        $.set_attribute(span_9, "tabindex", root() ? 0 : -1);
+        $.set_attribute(span_9, "aria-level", $$props.depth + 1);
+        $.set_attribute(span_9, "aria-posinset", $$props.position);
+        $.set_attribute(span_9, "aria-setsize", $$props.setSize);
+        $.set_attribute(span_11, "data-cinder-type", $0);
+      }, [() => valueClass($$props.value)]);
       $.append($$anchor2, span_9);
     };
     $.if(node, ($$render) => {
@@ -255,8 +280,9 @@ function _json_viewer_node($$anchor, $$props) {
 $.delegate(["click"]);
 
 // src/components/json-viewer/json-viewer.svelte
-var root_12 = $2.from_html(`<div class="cinder-json-viewer__fallback" role="status"><p>This value can't be serialized as JSON (it may contain a circular reference or a BigInt).</p> <p>Pass a plain JSON-serializable value, or use the consumer's download or copy action.</p></div>`);
+var root_1 = $2.from_html(`<div class="cinder-json-viewer__fallback" role="status"><p>This value can't be serialized as JSON (it may contain a circular reference or a BigInt).</p> <p>Pass a plain JSON-serializable value, or use the consumer's download or copy action.</p></div>`);
 var root_22 = $2.from_html(`<div class="cinder-json-viewer__fallback" role="status"><p> </p> <p>Use the consumer's download or copy action to inspect the raw JSON.</p></div>`);
+var root_32 = $2.from_html(`<div role="tree" aria-label="JSON tree" tabindex="-1"><!></div>`);
 var root = $2.from_html(`<div><!></div>`);
 function Json_viewer($$anchor, $$props) {
   $2.push($$props, true);
@@ -273,11 +299,62 @@ function Json_viewer($$anchor, $$props) {
   });
   const unserializable = $2.derived(() => !$2.get(serialized).ok);
   const tooLarge = $2.derived(() => $2.get(serialized).ok && $2.get(serialized).size > maxBytes());
+  function handleTreeKeydown(event) {
+    const tree = event.currentTarget;
+    const items = Array.from(tree.querySelectorAll('[role="treeitem"]'));
+    const eventTarget = event.target instanceof HTMLElement ? event.target : null;
+    const current = eventTarget?.closest('[role="treeitem"]') ?? null;
+    const targetIsToggle = eventTarget?.closest(".cinder-json-viewer__toggle") !== null;
+    const currentIndex = current ? items.indexOf(current) : -1;
+    function focusItem(index) {
+      const item = items[index];
+      item?.focus();
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusItem(Math.min(currentIndex + 1, items.length - 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusItem(Math.max(currentIndex - 1, 0));
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      focusItem(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      focusItem(items.length - 1);
+    } else if (event.key === "ArrowRight" && current && !targetIsToggle) {
+      if (current.getAttribute("aria-expanded") === "false") {
+        event.preventDefault();
+        current.querySelector(".cinder-json-viewer__toggle")?.click();
+      } else if (current.getAttribute("aria-expanded") === "true") {
+        const firstChild = current.querySelector('.cinder-json-viewer__children [role="treeitem"]');
+        if (firstChild) {
+          event.preventDefault();
+          firstChild.focus();
+        }
+      }
+    } else if (event.key === "ArrowLeft" && current && !targetIsToggle) {
+      if (current.getAttribute("aria-expanded") === "true") {
+        event.preventDefault();
+        current.querySelector(".cinder-json-viewer__toggle")?.click();
+      } else {
+        const parent = current.parentElement?.closest('[role="treeitem"]');
+        if (parent) {
+          event.preventDefault();
+          parent.focus();
+        }
+      }
+    } else if ((event.key === "Enter" || event.key === " " || event.key === "Spacebar") && current && !targetIsToggle) {
+      event.preventDefault();
+      const toggle = current.querySelector(".cinder-json-viewer__toggle");
+      toggle?.click();
+    }
+  }
   var div = root();
   var node = $2.child(div);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_12();
+      var div_1 = root_1();
       $2.append($$anchor2, div_1);
     };
     var consequent_1 = ($$anchor2) => {
@@ -295,7 +372,9 @@ function Json_viewer($$anchor, $$props) {
       $2.append($$anchor2, div_2);
     };
     var alternate = ($$anchor2) => {
-      _json_viewer_node($$anchor2, {
+      var div_3 = root_32();
+      var node_1 = $2.child(div_3);
+      _json_viewer_node(node_1, {
         get value() {
           return $$props.value;
         },
@@ -305,8 +384,14 @@ function Json_viewer($$anchor, $$props) {
         },
         get maxDepth() {
           return maxDepth();
-        }
+        },
+        position: 1,
+        setSize: 1,
+        root: true
       });
+      $2.reset(div_3);
+      $2.delegated("keydown", div_3, handleTreeKeydown);
+      $2.append($$anchor2, div_3);
     };
     $2.if(node, ($$render) => {
       if ($2.get(unserializable))
@@ -324,6 +409,7 @@ function Json_viewer($$anchor, $$props) {
   $2.append($$anchor, div);
   $2.pop();
 }
+$2.delegate(["keydown"]);
 
 // src/components/json-viewer/index.ts
 var json_viewer_default = Json_viewer;
@@ -332,4 +418,4 @@ export {
   Json_viewer as JsonViewer
 };
 
-//# debugId=32D01CD3AD4AAFEC64756E2164756E21
+//# debugId=B45173EF74715AF664756E2164756E21

package/dist/components/json-viewer/json-viewer.css

@@ -61,11 +61,22 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  .cinder-json-viewer__node[role='treeitem']:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    border-radius: var(--cinder-radius-sm);
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
   @media (forced-colors: active) {
     .cinder-json-viewer__toggle:focus-visible {
       outline: var(--cinder-ring-width) solid ButtonText;
       outline-offset: 3px;
     }
+
+    .cinder-json-viewer__node[role='treeitem']:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+    }
   }
 
   .cinder-json-viewer__caret {

package/dist/components/kanban-board/index.js

@@ -839,9 +839,9 @@ var root_8 = $4.from_html(`<!>   <!>`, 1);
 var root_11 = $4.from_html(`<li class="cinder-kanban-board__card cinder-kanban-board__drop-placeholder cinder-sortable-item--placeholder" role="presentation" aria-hidden="true"></li>`);
 var root_12 = $4.from_html(`<li class="cinder-kanban-board__empty"><!></li>`);
 var root_7 = $4.from_html(`<ul class="cinder-kanban-board__cards cinder-sortable-list" role="list"><!> <!> <!></ul>`);
-var root_1 = $4.from_html(`<section class="cinder-kanban-board__column" role="listitem"><header class="cinder-kanban-board__column-header"><!> <div class="cinder-kanban-board__column-title"><!></div> <!> <!></header> <!></section>`);
+var root_1 = $4.from_html(`<section class="cinder-kanban-board__column" role="listitem"><header class="cinder-kanban-board__column-header"><!> <div class="cinder-kanban-board__column-title"><!> <span class="cinder-kanban-board__card-count"> </span></div> <!> <!></header> <!></section>`);
 var root2 = $4.from_html(`<section><p class="cinder-sr-only">Press Space to lift a card, arrow keys to move it, Space to drop, and Escape to cancel.</p> <p class="cinder-sr-only">Press Space to lift a column, Left and Right arrows to move it, Space to drop, and Escape to
-    cancel.</p> <div class="cinder-kanban-board__columns" role="list"></div></section> <div role="alert" aria-atomic="true" class="cinder-sr-only"> </div>`, 1);
+    cancel.</p> <p class="cinder-kanban-board__keyboard-hint">Space lifts. Arrow keys move. Space drops. Escape cancels.</p> <div class="cinder-kanban-board__columns" role="list"></div></section> <div role="alert" aria-atomic="true" class="cinder-sr-only"> </div>`, 1);
 function Kanban_board($$anchor, $$props) {
   const baseId = $4.props_id();
   $4.push($$props, true);
@@ -1134,12 +1134,12 @@ function Kanban_board($$anchor, $$props) {
       return true;
     }
   });
-  function cancelCardLift(itemLabel) {
+  function cancelCardLift(itemLabel = undefined) {
     cardController.cancel(itemLabel);
     $4.set(cardTarget, null);
     $4.set(pointerColumnIndex, null);
   }
-  function cancelColumnLift(columnTitle) {
+  function cancelColumnLift(columnTitle = undefined) {
     $4.set(columnLiftedKey, null);
     $4.set(columnTargetIndex, null);
     if (columnTitle)
@@ -1225,7 +1225,7 @@ function Kanban_board($$anchor, $$props) {
   var section = $4.first_child(fragment);
   var p = $4.child(section);
   var p_1 = $4.sibling(p, 2);
-  var div = $4.sibling(p_1, 2);
+  var div = $4.sibling(p_1, 4);
   $4.each(div, 23, () => $4.get(visualColumns), (column, columnIndex) => $4.get(invalidKeys) ? `${column.id}-${columnIndex}` : column.id, ($$anchor2, column, columnIndex) => {
     const columnContext = $4.derived(() => makeColumnContext($4.get(column), $4.get(columnIndex)));
     var section_1 = root_1();
@@ -1270,6 +1270,9 @@ function Kanban_board($$anchor, $$props) {
           $$render(alternate, -1);
       });
     }
+    var span = $4.sibling(node_1, 2);
+    var text_1 = $4.child(span);
+    $4.reset(span);
     $4.reset(div_1);
     var node_3 = $4.sibling(div_1, 2);
     {
@@ -1289,12 +1292,12 @@ function Kanban_board($$anchor, $$props) {
     {
       var consequent_3 = ($$anchor3) => {
         var button_1 = root_6();
-        var text_1 = $4.child(button_1, true);
+        var text_2 = $4.child(button_1, true);
         $4.reset(button_1);
         $4.template_effect(() => {
-          $4.set_attribute(button_1, "aria-label", `${$4.get(column).collapsed ? "Expand" : "Collapse"} ${$4.get(column).title}`);
+          $4.set_attribute(button_1, "aria-label", `${$4.get(column).collapsed ? "Expand" : "Collapse"} ${$4.get(column).title} (${$4.get(column).cards.length} ${$4.get(column).cards.length === 1 ? "card" : "cards"})`);
           $4.set_attribute(button_1, "aria-expanded", !$4.get(column).collapsed);
-          $4.set_text(text_1, $4.get(column).collapsed ? "+" : "-");
+          $4.set_text(text_2, $4.get(column).collapsed ? "+" : "-");
         });
         $4.delegated("click", button_1, () => toggleColumn($4.get(column)));
         $4.append($$anchor3, button_1);
@@ -1396,8 +1399,8 @@ function Kanban_board($$anchor, $$props) {
                 $4.append($$anchor5, fragment_4);
               };
               var alternate_1 = ($$anchor5) => {
-                var text_2 = $4.text("No cards");
-                $4.append($$anchor5, text_2);
+                var text_3 = $4.text("No cards");
+                $4.append($$anchor5, text_3);
               };
               $4.if(node_13, ($$render) => {
                 if ($$props.emptyColumn)
@@ -1428,6 +1431,8 @@ function Kanban_board($$anchor, $$props) {
     $4.template_effect(($0) => {
       $4.set_attribute(section_1, "aria-label", $0);
       $4.set_attribute(section_1, "data-cinder-collapsed", $4.get(column).collapsed ? "" : undefined);
+      $4.set_text(text_1, `${$4.get(column).cards.length ?? ""} 
+              ${$4.get(column).cards.length === 1 ? "card" : "cards"}`);
     }, [() => getColumnLabel($4.get(column))]);
     $4.append($$anchor2, section_1);
   });
@@ -1435,7 +1440,7 @@ function Kanban_board($$anchor, $$props) {
   $4.bind_this(div, ($$value) => $4.set(columnsElement, $$value), () => $4.get(columnsElement));
   $4.reset(section);
   var div_4 = $4.sibling(section, 2);
-  var text_3 = $4.child(div_4, true);
+  var text_4 = $4.child(div_4, true);
   $4.reset(div_4);
   $4.template_effect(($0) => {
     $4.set_class(section, 1, $0);
@@ -1443,7 +1448,7 @@ function Kanban_board($$anchor, $$props) {
     $4.set_attribute(section, "data-cinder-invalid-keys", $4.get(invalidKeys) ? "" : undefined);
     $4.set_attribute(p, "id", instructionsId);
     $4.set_attribute(p_1, "id", columnInstructionsId);
-    $4.set_text(text_3, announcer.message);
+    $4.set_text(text_4, announcer.message);
   }, [
     () => $4.clsx(classNames("cinder-kanban-board", $$props.class))
   ]);
@@ -1459,4 +1464,4 @@ export {
   Kanban_board as KanbanBoard
 };
 
-//# debugId=0DF9527BBA79039264756E2164756E21
+//# debugId=9DE0CE021AED6B1F64756E2164756E21

package/dist/components/kanban-board/kanban-board.css

@@ -9,6 +9,29 @@
     display: block;
     overflow-x: auto;
     padding-block-end: var(--cinder-space-2);
+    background:
+      linear-gradient(90deg, var(--cinder-surface) 30%, transparent) left center / 2rem 100%
+        no-repeat local,
+      linear-gradient(270deg, var(--cinder-surface) 30%, transparent) right center / 2rem 100%
+        no-repeat local,
+      /* cinder-allow-raw-color: structural-pattern — neutral scroll-edge shadow, not a themeable surface */
+        linear-gradient(90deg, oklch(0% 0 0 / 12%), transparent) left center / 1rem 100% no-repeat
+        scroll,
+      /* cinder-allow-raw-color: structural-pattern — neutral scroll-edge shadow, not a themeable surface */
+        linear-gradient(270deg, oklch(0% 0 0 / 12%), transparent) right center / 1rem 100% no-repeat
+        scroll;
+  }
+
+  .cinder-kanban-board__keyboard-hint {
+    margin: 0 0 var(--cinder-space-2);
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    opacity: 0;
+    transition: opacity var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  .cinder-kanban-board:focus-within .cinder-kanban-board__keyboard-hint {
+    opacity: 1;
   }
 
   .cinder-kanban-board__columns {
@@ -48,10 +71,24 @@
     min-inline-size: 0;
     overflow-wrap: anywhere;
     font-size: var(--cinder-text-sm);
-    font-weight: 600;
+    font-weight: var(--cinder-font-semibold);
     color: var(--cinder-text);
   }
 
+  .cinder-kanban-board__card-count {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: var(--cinder-space-2);
+    min-block-size: 1.25rem;
+    padding-inline: var(--cinder-space-1-5);
+    border: 1px solid var(--cinder-border-muted);
+    border-radius: var(--cinder-radius-sm);
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    white-space: nowrap;
+  }
+
   .cinder-kanban-board__column-actions {
     display: inline-flex;
     gap: var(--cinder-space-1);
@@ -63,8 +100,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    inline-size: 1.75rem;
-    block-size: 1.75rem;
+    inline-size: 2rem;
+    block-size: 2rem;
     padding: 0;
     border: 1px solid var(--cinder-border-muted);
     border-radius: var(--cinder-radius-sm);
@@ -73,6 +110,10 @@
     cursor: pointer;
   }
 
+  .cinder-kanban-board__column-handle svg {
+    fill: currentcolor;
+  }
+
   .cinder-kanban-board__column-handle:focus-visible,
   .cinder-kanban-board__collapse:focus-visible {
     outline: var(--cinder-ring-width) solid transparent;
@@ -81,6 +122,18 @@
       0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
   }
 
+  @media (forced-colors: active) {
+    .cinder-kanban-board__column-handle:focus-visible,
+    .cinder-kanban-board__collapse:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      /* 3px separates the outline from ButtonBorder (which renders in forced-colors
+         on all bordered controls and shares the ButtonText color family in HCM);
+         at 2px the ring and border can visually merge. */
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   @media (hover: hover) {
     .cinder-kanban-board__column-handle:hover,
     .cinder-kanban-board__collapse:hover {

package/dist/components/keyboard-shortcuts/index.js

@@ -96,7 +96,7 @@ function Keyboard_shortcuts($$anchor, $$props) {
     "class"
   ]);
   const groupHeadingId = (index2) => `${baseId}-group-${index2}`;
-  function resolveKeysLabel(keys, keysLabel) {
+  function resolveKeysLabel(keys, keysLabel = undefined) {
     if (keysLabel)
       return keysLabel;
     return keys.join(" plus ");
@@ -205,4 +205,4 @@ export {
   Keyboard_shortcuts as KeyboardShortcuts
 };
 
-//# debugId=2D3811DB02E915F364756E2164756E21
+//# debugId=964741D66CB7CAF364756E2164756E21

package/dist/components/keyboard-shortcuts/keyboard-shortcuts.css

@@ -8,7 +8,7 @@
 
   .cinder-keyboard-shortcuts__heading {
     font-size: var(--cinder-text-lg);
-    font-weight: 600;
+    font-weight: var(--cinder-font-semibold);
     color: var(--cinder-text);
     margin: 0;
   }
@@ -26,7 +26,7 @@
 
   .cinder-keyboard-shortcuts__group-label {
     font-size: var(--cinder-text-xs);
-    font-weight: 600;
+    font-weight: var(--cinder-font-semibold);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--cinder-text-muted);

package/dist/components/label/index.js

@@ -34,7 +34,7 @@ function classNames(...parts) {
 }
 
 // src/components/label/label.svelte
-var root_1 = $.from_html(`<span class="cinder-label__required" aria-hidden="true"></span>`);
+var root_1 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
 var root = $.from_html(`<label><!> <!></label>`);
 function Label($$anchor, $$props) {
   $.push($$props, true);
@@ -80,4 +80,4 @@ export {
   Label
 };
 
-//# debugId=2DA5EAC909F41C6364756E2164756E21
+//# debugId=8FAA9F5FFA870D9F64756E2164756E21