@lostgradient/cinder 0.1.1 → 0.2.0

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

@@ -0,0 +1,17 @@
+/**
+ * @cinder
+ * @category form
+ * @status alpha
+ * @purpose Selectable answer tile used inside a ChoiceGrid; carries selected, disabled, correct, incorrect, and pending states without shifting cell dimensions.
+ * @tag form
+ * @tag selection
+ * @tag quiz
+ * @useWhen Composing individual answer choices inside a ChoiceGrid parent.
+ * @avoidWhen Used outside a ChoiceGrid — this leaf requires the parent context.
+ * @related choice-grid
+ */
+export type { ChoiceGridItemProps, ChoiceGridItemState, } from '../choice-grid/choice-grid.types.ts';
+import type { ChoiceGridItemProps } from './choice-grid-item.types.ts';
+declare const ChoiceGridItem: import("svelte").Component<ChoiceGridItemProps, {}, "">;
+type ChoiceGridItem = ReturnType<typeof ChoiceGridItem>;
+export default ChoiceGridItem;

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { ChoiceGridItemState } from '../choice-grid/choice-grid.types.ts';
+export type { ChoiceGridItemState };
+/**
+ * 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-item/choice-grid-item.variables.d.ts

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

package/dist/components/choice-grid-item/choice-grid-item.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-item/choice-grid-item.variables.ts
+var variables = [];
+var choice_grid_item_variables_default = variables;
+export {
+  choice_grid_item_variables_default as default
+};
+
+//# debugId=C37A4017AAFABCAE64756E2164756E21

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

@@ -0,0 +1,5 @@
+import './choice-grid-item.css';
+import ChoiceGridItem from './choice-grid-item.svelte';
+export default ChoiceGridItem;
+export type { ChoiceGridItemProps, ChoiceGridItemState } from './choice-grid-item.types.ts';
+export { ChoiceGridItem };

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

@@ -0,0 +1,203 @@
+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-item/index.ts
+import"@lostgradient/cinder/choice-grid-item/styles";
+
+// src/components/choice-grid-item/choice-grid-item.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { untrack } from "svelte";
+
+// src/components/choice-grid/choice-grid-context.ts
+import { createContext } from "svelte";
+var [getChoiceGridContextStrict, setChoiceGridContext] = createContext();
+var getChoiceGridContext = getChoiceGridContextStrict;
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/_internal/collection.ts
+function createSingleSelection(getValue, setValue) {
+  return {
+    get value() {
+      return getValue();
+    },
+    select(next) {
+      setValue(next);
+    },
+    isSelected(candidate) {
+      return getValue() === candidate;
+    }
+  };
+}
+function createMultiSelection(getValues, setValues) {
+  return {
+    get values() {
+      return getValues();
+    },
+    toggle(item) {
+      const current = getValues();
+      const index = current.indexOf(item);
+      if (index === -1) {
+        setValues([...current, item]);
+      } else {
+        setValues(current.filter((existing) => existing !== item));
+      }
+    },
+    isSelected(candidate) {
+      return getValues().includes(candidate);
+    }
+  };
+}
+function rovingTabIndex(isActive) {
+  return isActive ? 0 : -1;
+}
+
+// ../../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/choice-grid-item/choice-grid-item.svelte
+var root = $.from_html(`<div><span class="cinder-choice-grid-item__content"><!></span></div>`);
+function Choice_grid_item($$anchor, $$props) {
+  $.push($$props, true);
+  const ITEM_STATES = ["neutral", "correct", "incorrect", "pending"];
+  let stateProp = $.prop($$props, "state", 3, "neutral"), disabled = $.prop($$props, "disabled", 3, false);
+  const feedbackState = $.derived(() => ITEM_STATES.includes(stateProp()) ? stateProp() : "neutral");
+  $.user_effect(() => {
+    if (!ITEM_STATES.includes(stateProp())) {
+      devWarn(`ChoiceGridItem: invalid state "${String(stateProp())}". Expected one of ${ITEM_STATES.join(", ")}. Falling back to "neutral".`);
+    }
+  });
+  const context = getChoiceGridContext();
+  const registeredValue = untrack(() => $$props.value);
+  $.user_effect(() => {
+    if ($$props.value !== registeredValue) {
+      devWarn(`ChoiceGridItem: \`value\` changed from "${registeredValue}" to "${$$props.value}" after mount. ChoiceGridItem.value must be stable — give the item a fixed value (use {#key} to remount if the value must change). The grid keeps using the original value.`);
+    }
+  });
+  const isSelected = $.derived(() => context.isSelected(registeredValue));
+  const isDisabled = $.derived(() => disabled() || context.disabled);
+  const isFocusable = $.derived(() => context.isFocusable(registeredValue));
+  const tabIndex = $.derived(() => rovingTabIndex($.get(isFocusable)));
+  const role = $.derived(() => context.multiple ? "checkbox" : "radio");
+  let elementRef = $.state(null);
+  $.user_effect(() => {
+    const el = $.get(elementRef);
+    if (!el)
+      return;
+    untrack(() => {
+      context.register(registeredValue, el, $.get(isDisabled));
+    });
+    return () => {
+      untrack(() => {
+        context.unregister(registeredValue);
+      });
+    };
+  });
+  $.user_effect(() => {
+    const nextDisabled = $.get(isDisabled);
+    untrack(() => {
+      context.setItemDisabled(registeredValue, nextDisabled);
+    });
+  });
+  function handleClick() {
+    if ($.get(isDisabled))
+      return;
+    context.select(registeredValue);
+  }
+  function handleKeydown(event) {
+    context.handleKeydown(event);
+  }
+  var div = root();
+  var span = $.child(div);
+  var node = $.child(span);
+  $.snippet(node, () => $$props.children);
+  $.reset(span);
+  $.reset(div);
+  $.bind_this(div, ($$value) => $.set(elementRef, $$value), () => $.get(elementRef));
+  $.template_effect(($0) => {
+    $.set_attribute(div, "role", $.get(role));
+    $.set_attribute(div, "aria-checked", $.get(isSelected));
+    $.set_attribute(div, "aria-disabled", $.get(isDisabled) || undefined);
+    $.set_attribute(div, "tabindex", $.get(tabIndex));
+    $.set_class(div, 1, $0);
+    $.set_attribute(div, "data-cinder-selected", $.get(isSelected) || undefined);
+    $.set_attribute(div, "data-cinder-disabled", $.get(isDisabled) || undefined);
+    $.set_attribute(div, "data-cinder-state", $.get(feedbackState) !== "neutral" ? $.get(feedbackState) : undefined);
+  }, [
+    () => $.clsx(classNames("cinder-choice-grid-item", $$props.class))
+  ]);
+  $.delegated("click", div, handleClick);
+  $.delegated("keydown", div, handleKeydown);
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["click", "keydown"]);
+
+// src/components/choice-grid-item/index.ts
+var choice_grid_item_default = Choice_grid_item;
+export {
+  choice_grid_item_default as default,
+  Choice_grid_item as ChoiceGridItem
+};
+
+//# debugId=30048C2A7938691664756E2164756E21

package/dist/components/color-field/color-field.css

@@ -36,20 +36,17 @@
 
   .cinder-color-field__swatch[data-cinder-alpha]:not([data-cinder-empty]) {
     /* structural-pattern: transparency checkerboard so partially-transparent
-     * swatches stay visible — a fixed light/neutral grid signalling "see-through",
-     * not a themeable surface. Raw values declared once here with markers. */
-    --_cinder-color-field-checker-base: #fff; /* cinder-allow-raw-color: structural-pattern — checkerboard backing */
-    --_cinder-color-field-checker-tile: #ccc; /* cinder-allow-raw-color: structural-pattern — checkerboard tile */
-    background-color: var(--_cinder-color-field-checker-base);
+     * swatches stay visible while following the shared checker tokens. */
+    background-color: var(--cinder-color-checker-base);
     background-image:
       linear-gradient(
         var(--cinder-color-field-swatch, transparent),
         var(--cinder-color-field-swatch, transparent)
       ),
-      linear-gradient(45deg, var(--_cinder-color-field-checker-tile) 25%, transparent 25%),
-      linear-gradient(-45deg, var(--_cinder-color-field-checker-tile) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--_cinder-color-field-checker-tile) 75%),
-      linear-gradient(-45deg, transparent 75%, var(--_cinder-color-field-checker-tile) 75%);
+      linear-gradient(45deg, var(--cinder-color-checker-tile) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--cinder-color-checker-tile) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--cinder-color-checker-tile) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--cinder-color-checker-tile) 75%);
     background-size:
       auto,
       6px 6px,

package/dist/components/color-picker/color-picker.css

@@ -13,12 +13,21 @@
     width: 100%;
     max-width: 280px;
 
-    /* structural-pattern: the transparency checkerboard (shown behind alpha
-     * channels by the alpha slider and the preview chip) is a fixed light/neutral
-     * grid that signals "see-through", not a themeable surface. Declared once here
-     * and reused by both checkerboards below so the raw values have a single home. */
-    --_cinder-color-picker-checker-base: #fff; /* cinder-allow-raw-color: structural-pattern — checkerboard backing */
-    --_cinder-color-picker-checker-tile: #ccc; /* cinder-allow-raw-color: structural-pattern — checkerboard tile */
+    /* structural-pattern: the thumb sits over arbitrary picked colors, so the
+     * white ring and dark edge stay fixed; dark chrome gets one extra outer ring. */
+    --_cinder-color-picker-thumb-border: #fff; /* cinder-allow-raw-color: structural-pattern — thumb contrast ring over arbitrary picked color */
+    /* prettier-ignore */
+    --_cinder-color-picker-thumb-shadow-edge: rgba(0, 0, 0, 0.5); /* cinder-allow-raw-color: structural-pattern — thumb outline over arbitrary picked color */
+    --_cinder-color-picker-thumb-shadow-support-light: transparent;
+    /* prettier-ignore */
+    --_cinder-color-picker-thumb-shadow-support-dark: rgba(255, 255, 255, 0.65); /* cinder-allow-raw-color: structural-pattern — thumb outline over dark chrome */
+    --_cinder-color-picker-thumb-shadow-support: light-dark(
+      var(--_cinder-color-picker-thumb-shadow-support-light),
+      var(--_cinder-color-picker-thumb-shadow-support-dark)
+    );
+    --_cinder-color-picker-thumb-shadow:
+      0 0 0 1px var(--_cinder-color-picker-thumb-shadow-edge),
+      0 0 0 2px var(--_cinder-color-picker-thumb-shadow-support);
   }
 
   .cinder-color-picker[data-cinder-disabled] {
@@ -62,12 +71,11 @@
     width: 14px;
     height: 14px;
     /* structural-pattern: the draggable thumb sits over the user's chosen color,
-     * so its white ring + dark outline are fixed contrast devices (visible on any
-     * hue), not themeable chrome. */
-    border: 2px solid #fff; /* cinder-allow-raw-color: structural-pattern — thumb contrast ring over arbitrary picked color */
+     * so its white ring + contrast outline are hue-agnostic devices. */
+    border: 2px solid var(--_cinder-color-picker-thumb-border);
     border-radius: 50%;
     transform: translate(-50%, -50%);
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); /* cinder-allow-raw-color: structural-pattern — thumb dark outline for contrast on light hues */
+    box-shadow: var(--_cinder-color-picker-thumb-shadow);
     pointer-events: none;
   }
 
@@ -92,13 +100,13 @@
   }
 
   .cinder-color-picker__alpha {
-    background-color: var(--_cinder-color-picker-checker-base);
+    background-color: var(--cinder-color-checker-base);
     background-image:
       linear-gradient(to right, transparent, var(--cinder-color-picker-base, currentColor)),
-      linear-gradient(45deg, var(--_cinder-color-picker-checker-tile) 25%, transparent 25%),
-      linear-gradient(-45deg, var(--_cinder-color-picker-checker-tile) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--_cinder-color-picker-checker-tile) 75%),
-      linear-gradient(-45deg, transparent 75%, var(--_cinder-color-picker-checker-tile) 75%);
+      linear-gradient(45deg, var(--cinder-color-checker-tile) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--cinder-color-checker-tile) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--cinder-color-checker-tile) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--cinder-color-checker-tile) 75%);
     background-size:
       auto,
       8px 8px,
@@ -126,13 +134,12 @@
     width: 14px;
     height: 14px;
     /* structural-pattern: slider thumb sits over the hue rail / alpha
-     * checkerboard, so its white ring + dark outline are fixed contrast devices,
-     * not themeable chrome (same rationale as the gradient handle). */
-    border: 2px solid #fff; /* cinder-allow-raw-color: structural-pattern — slider thumb contrast ring */
+     * checkerboard, so its ring + outline follow the gradient handle. */
+    border: 2px solid var(--_cinder-color-picker-thumb-border);
     border-radius: 50%;
     background: transparent;
     transform: translate(-50%, -50%);
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); /* cinder-allow-raw-color: structural-pattern — slider thumb dark outline */
+    box-shadow: var(--_cinder-color-picker-thumb-shadow);
     pointer-events: none;
   }
 
@@ -154,16 +161,16 @@
   }
 
   .cinder-color-picker__preview[data-cinder-alpha] {
-    background-color: var(--_cinder-color-picker-checker-base);
+    background-color: var(--cinder-color-checker-base);
     background-image:
       linear-gradient(
         var(--cinder-color-picker-preview, transparent),
         var(--cinder-color-picker-preview, transparent)
       ),
-      linear-gradient(45deg, var(--_cinder-color-picker-checker-tile) 25%, transparent 25%),
-      linear-gradient(-45deg, var(--_cinder-color-picker-checker-tile) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--_cinder-color-picker-checker-tile) 75%),
-      linear-gradient(-45deg, transparent 75%, var(--_cinder-color-picker-checker-tile) 75%);
+      linear-gradient(45deg, var(--cinder-color-checker-tile) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--cinder-color-checker-tile) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--cinder-color-checker-tile) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--cinder-color-checker-tile) 75%);
     background-size:
       auto,
       8px 8px,

package/dist/components/color-swatch-picker/color-swatch-picker.css

@@ -71,17 +71,14 @@
 
   .cinder-color-swatch-picker__swatch[data-cinder-alpha] {
     /* structural-pattern: transparency checkerboard beneath the color layer — a
-     * fixed light/neutral grid signalling "see-through", not a themeable surface.
-     * Raw values declared once here with markers. */
-    --_cinder-color-swatch-picker-checker-base: #fff; /* cinder-allow-raw-color: structural-pattern — checkerboard backing */
-    --_cinder-color-swatch-picker-checker-tile: #ccc; /* cinder-allow-raw-color: structural-pattern — checkerboard tile */
-    background-color: var(--_cinder-color-swatch-picker-checker-base);
+     * shared grid signalling "see-through" in both light and dark chrome. */
+    background-color: var(--cinder-color-checker-base);
     background-image:
       linear-gradient(var(--swatch-color), var(--swatch-color)),
-      linear-gradient(45deg, var(--_cinder-color-swatch-picker-checker-tile) 25%, transparent 25%),
-      linear-gradient(-45deg, var(--_cinder-color-swatch-picker-checker-tile) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--_cinder-color-swatch-picker-checker-tile) 75%),
-      linear-gradient(-45deg, transparent 75%, var(--_cinder-color-swatch-picker-checker-tile) 75%);
+      linear-gradient(45deg, var(--cinder-color-checker-tile) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--cinder-color-checker-tile) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--cinder-color-checker-tile) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--cinder-color-checker-tile) 75%);
     background-size:
       auto,
       8px 8px,

package/dist/components/confirm-dialog/index.js

@@ -192,7 +192,10 @@ function Button($$anchor, $$props) {
     "aria-disabled",
     "aria-busy",
     "aria-label",
-    "aria-labelledby"
+    "aria-labelledby",
+    "aria-expanded",
+    "aria-controls",
+    "aria-haspopup"
   ]);
   const mergedClassName = $.derived(() => classNames("cinder-button", $$props.class));
   const dataAttributes = $.derived(() => ({
@@ -250,6 +253,9 @@ function Button($$anchor, $$props) {
         "aria-busy": $.get(resolvedAriaBusy),
         "aria-label": $.get(resolvedAriaLabel),
         "aria-labelledby": $.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
         onclick: handleClick
       }));
       var node_10 = $.child(a);
@@ -269,6 +275,9 @@ function Button($$anchor, $$props) {
         "aria-busy": $.get(resolvedAriaBusy),
         "aria-label": $.get(resolvedAriaLabel),
         "aria-labelledby": $.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
         onclick: handleClick
       }));
       var node_11 = $.child(button);
@@ -750,4 +759,4 @@ export {
   Confirm_dialog as ConfirmDialog
 };
 
-//# debugId=D65088F2C8437FD864756E2164756E21
+//# debugId=A2A87F45B7C1DB0D64756E2164756E21