@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/components/choice-grid/choice-grid.schema.js

@@ -0,0 +1,121 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/choice-grid/choice-grid.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    value: {
+      anyOf: [
+        {
+          type: "string"
+        },
+        {
+          type: "null"
+        }
+      ],
+      description: "The currently selected value (single-select mode). Bindable.\nPass `null` or omit to start with no selection."
+    },
+    values: {
+      type: "array",
+      items: {
+        type: "string"
+      },
+      description: "Currently selected values (multi-select mode). Bindable. Only used when\n`multiple` is `true` — set `multiple` explicitly to switch modes; binding\n`values` alone does NOT enable multi-select."
+    },
+    multiple: {
+      type: "boolean",
+      description: "When true the grid allows multiple simultaneous selections and reads/writes\n`values` instead of `value`. The ARIA role switches to `group` (items become\n`checkbox`); single-select uses `radiogroup` (items become `radio`)."
+    },
+    columns: {
+      enum: ["responsive", 1, 2, 3, 4],
+      description: "Column layout.\n- `'responsive'` — `auto-fill` at a minimum cell width (default).\n- `1 | 2 | 3 | 4` — fixed number of columns."
+    },
+    minColumnWidth: {
+      type: "string",
+      description: 'Minimum cell width for `columns="responsive"`. Accepts any CSS\n`<length>` (e.g. `"12rem"`, `"200px"`). Default: `"10rem"`.'
+    },
+    ariaLabel: {
+      type: "string",
+      description: "Accessible label for the grid (required unless `ariaLabelledby` is set)."
+    },
+    ariaLabelledby: {
+      type: "string",
+      description: "Id of an external element that labels this grid."
+    },
+    disabled: {
+      type: "boolean",
+      description: "Disables all items in the grid."
+    }
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "children",
+        reason: "function-or-snippet"
+      },
+      {
+        name: "class",
+        reason: "unknown-shape"
+      }
+    ]
+  }
+};
+var choice_grid_schema_default = schema;
+export {
+  choice_grid_schema_default as default
+};
+
+//# debugId=BB10EC11608C9B1764756E2164756E21

package/dist/components/choice-grid/choice-grid.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @cinder
+ * @category form
+ * @status alpha
+ * @purpose Responsive grid of large selectable choices with roving keyboard focus, selection state, and optional correct/incorrect/pending feedback for quiz and assessment surfaces.
+ * @tag form
+ * @tag selection
+ * @tag quiz
+ * @tag assessment
+ * @useWhen Presenting a small fixed set of large selectable answers where all options should stay visible (quiz or assessment surfaces).
+ * @useWhen Building a touch-friendly selector grid with stable cell dimensions that must not shift when feedback states are applied.
+ * @avoidWhen Selecting from a long dynamic list — use combobox or select instead.
+ * @avoidWhen Choosing one of two to five short values in a compact inline context — use segmented-control instead.
+ * @related choice-grid-item, segmented-control, radio-group, checkbox-group
+ */
+export type { ChoiceGridColumns, ChoiceGridContext, ChoiceGridItemState, ChoiceGridProps, } from './choice-grid.types.ts';
+import type { ChoiceGridProps } from './choice-grid.types.ts';
+declare const ChoiceGrid: import("svelte").Component<ChoiceGridProps, {}, "value" | "values">;
+type ChoiceGrid = ReturnType<typeof ChoiceGrid>;
+export default ChoiceGrid;

package/dist/components/choice-grid/choice-grid.types.d.ts

@@ -0,0 +1,122 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Feedback state for a choice grid item. Neutral means no feedback applied.
+ * Correct / incorrect / pending communicate quiz or assessment results.
+ */
+export type ChoiceGridItemState = 'neutral' | 'correct' | 'incorrect' | 'pending';
+/**
+ * Column layout for the grid. 'responsive' uses auto-fill with a minimum cell
+ * width. A number sets a fixed column count.
+ */
+export type ChoiceGridColumns = 'responsive' | 1 | 2 | 3 | 4;
+/**
+ * Shape of the context object provided to ChoiceGridItem children.
+ *
+ * All members are getter properties on the context object so reads remain
+ * reactive inside `$derived` expressions in the children. Destructuring the
+ * context breaks reactivity; always access via `context.field`.
+ */
+export type ChoiceGridContext = {
+    /**
+     * The currently selected value (single-select mode) or null when nothing
+     * is selected. In multi-select mode this field is unused — children check
+     * `isSelected` instead.
+     */
+    readonly value: string | null;
+    /** True when the grid allows multiple simultaneous selections. */
+    readonly multiple: boolean;
+    /** True when ALL items are disabled (the grid-level disabled prop). */
+    readonly disabled: boolean;
+    /**
+     * True when `candidate` is currently selected (works for both single- and
+     * multi-select modes).
+     */
+    isSelected: (candidate: string) => boolean;
+    /**
+     * Select or toggle `candidate`. In single-select mode this sets the value;
+     * in multi-select mode this toggles the candidate in the values set.
+     */
+    select: (candidate: string) => void;
+    /**
+     * Register an item element with the parent so the parent can drive roving
+     * tabindex focus. `disabled` is tracked so disabled items are skipped by both
+     * the roving-tabindex computation and arrow-key navigation.
+     */
+    register: (value: string, element: HTMLElement, disabled: boolean) => void;
+    /** Update the tracked disabled state for an already-registered item. */
+    setItemDisabled: (value: string, disabled: boolean) => void;
+    /** Remove an item from the registry on unmount. */
+    unregister: (value: string) => void;
+    /**
+     * Whether `candidate` should hold `tabindex="0"`. Must be called inside
+     * a `$derived` to remain reactive.
+     */
+    isFocusable: (candidate: string) => boolean;
+    /** Items forward `keydown` here for shared arrow-key navigation. */
+    handleKeydown: (event: KeyboardEvent) => void;
+};
+/**
+ * Props for the `<ChoiceGrid>` parent component.
+ */
+export type ChoiceGridProps = Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label' | 'aria-labelledby'> & {
+    /**
+     * The currently selected value (single-select mode). Bindable.
+     * Pass `null` or omit to start with no selection.
+     */
+    value?: string | null;
+    /**
+     * Currently selected values (multi-select mode). Bindable. Only used when
+     * `multiple` is `true` — set `multiple` explicitly to switch modes; binding
+     * `values` alone does NOT enable multi-select.
+     */
+    values?: string[];
+    /**
+     * When true the grid allows multiple simultaneous selections and reads/writes
+     * `values` instead of `value`. The ARIA role switches to `group` (items become
+     * `checkbox`); single-select uses `radiogroup` (items become `radio`).
+     */
+    multiple?: boolean;
+    /**
+     * Column layout.
+     * - `'responsive'` — `auto-fill` at a minimum cell width (default).
+     * - `1 | 2 | 3 | 4` — fixed number of columns.
+     */
+    columns?: ChoiceGridColumns;
+    /**
+     * Minimum cell width for `columns="responsive"`. Accepts any CSS
+     * `<length>` (e.g. `"12rem"`, `"200px"`). Default: `"10rem"`.
+     */
+    minColumnWidth?: string;
+    /** Accessible label for the grid (required unless `ariaLabelledby` is set). */
+    ariaLabel?: string;
+    /** Id of an external element that labels this grid. */
+    ariaLabelledby?: string;
+    /** Disables all items in the grid. */
+    disabled?: boolean;
+    /** Additional class names merged with `.cinder-choice-grid`. */
+    class?: string;
+    /** `ChoiceGridItem` children. */
+    children: Snippet;
+};
+/**
+ * Props for the `<ChoiceGridItem>` leaf component.
+ */
+export type ChoiceGridItemProps = {
+    /**
+     * The value this item represents. Used as the key for selection state,
+     * roving tabindex registration, and ARIA attributes.
+     */
+    value: string;
+    /**
+     * Feedback state for assessment / quiz usage. Defaults to `'neutral'`.
+     * Layout dimensions do NOT change across states (stable cell sizing guarantee).
+     */
+    state?: ChoiceGridItemState;
+    /** When true this item cannot be selected or focused. */
+    disabled?: boolean;
+    /** Additional class names merged with `.cinder-choice-grid-item`. */
+    class?: string;
+    /** Item content — label text, an icon, or richer markup. */
+    children: Snippet;
+};

package/dist/components/choice-grid/choice-grid.variables.d.ts

@@ -0,0 +1,2 @@
+declare const variables: readonly string[];
+export default variables;

package/dist/components/choice-grid/choice-grid.variables.js

@@ -0,0 +1,61 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/choice-grid/choice-grid.variables.ts
+var variables = [];
+var choice_grid_variables_default = variables;
+export {
+  choice_grid_variables_default as default
+};
+
+//# debugId=49E45DAAA503F16764756E2164756E21

package/dist/components/choice-grid/index.d.ts

@@ -0,0 +1,13 @@
+import './choice-grid.css';
+/**
+ * `ChoiceGrid` is the parent compound component. It is also a namespace whose
+ * `Item` property exposes the compose-only leaf under its idiomatic name:
+ * `ChoiceGrid.Item`. The leaf remains importable individually from
+ * `@lostgradient/cinder/choice-grid-item`.
+ */
+declare const ChoiceGrid: import("svelte").Component<import("./choice-grid.types.ts").ChoiceGridProps, {}, "value" | "values"> & {
+    Item: import("svelte").Component<import("../choice-grid-item").ChoiceGridItemProps, {}, "">;
+};
+export default ChoiceGrid;
+export type { ChoiceGridColumns, ChoiceGridContext, ChoiceGridItemState, ChoiceGridProps, } from './choice-grid.types.ts';
+export { ChoiceGrid };