@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/utilities/attachments.d.ts

@@ -14,8 +14,8 @@ import type { Attachment } from 'svelte/attachments';
  * ```
  */
 export declare function createBodyScrollLock(): Attachment<HTMLElement>;
-/** Pointer/click events the outside-dismiss listener can key off. */
-export type ClickOutsideEventType = 'click' | 'pointerdown' | 'mousedown';
+/** Pointer/click/touch events the outside-dismiss listener can key off. */
+export type ClickOutsideEventType = 'click' | 'pointerdown' | 'mousedown' | 'touchstart';
 export type ClickOutsideOptions = {
     /** Callback when an outside interaction occurs */
     handler: () => void;
@@ -42,10 +42,10 @@ export type ClickOutsideOptions = {
 };
 /**
  * Creates an outside-interaction attachment that calls a handler when a `click`, `pointerdown`,
- * or `mousedown` lands outside the attached element (and outside any `ignoreRefs`). This is the
- * single canonical mechanism for overlay light-dismiss — dropdowns, menus, popovers — so each
- * overlay does not hand-roll its own `document` listener and inside/trigger exclusion (see
- * `OVERLAY-POLICY.md` § Outside-click).
+ * `mousedown`, or `touchstart` lands outside the attached element (and outside any `ignoreRefs`).
+ * This is the single canonical mechanism for overlay light-dismiss — dropdowns, menus, popovers —
+ * so each overlay does not hand-roll its own `document` listener and inside/trigger exclusion
+ * (see `OVERLAY-POLICY.md` § Outside-click).
  *
  * @example
  * ```svelte

package/dist/utilities/value-change.d.ts

@@ -0,0 +1,2 @@
+export type ValueChangeHandler<T> = (next: T) => T | void;
+export declare function commitValue<T>(proposed: T, onValueChange: ValueChangeHandler<T> | undefined, setValue: (next: T) => void): T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lostgradient/cinder",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A Svelte 5 component library and design system focused on accessibility, theming, and per-component tree-shaking.",
   "keywords": [
     "svelte",
@@ -180,6 +180,29 @@
       "import": "./src/components/alert-dialog/alert-dialog.examples.json",
       "default": "./src/components/alert-dialog/alert-dialog.examples.json"
     },
+    "./approval-card": {
+      "types": "./dist/components/approval-card/index.d.ts",
+      "svelte": "./src/components/approval-card/index.ts",
+      "node": "./dist/server/components/approval-card/index.js",
+      "default": "./dist/components/approval-card/index.js"
+    },
+    "./approval-card/schema": {
+      "types": "./dist/components/approval-card/approval-card.schema.d.ts",
+      "node": "./dist/server/components/approval-card/approval-card.schema.js",
+      "default": "./dist/components/approval-card/approval-card.schema.js"
+    },
+    "./approval-card/variables": {
+      "types": "./dist/components/approval-card/approval-card.variables.d.ts",
+      "node": "./dist/server/components/approval-card/approval-card.variables.js",
+      "default": "./dist/components/approval-card/approval-card.variables.js"
+    },
+    "./approval-card/styles": {
+      "default": "./dist/components/approval-card/approval-card.css"
+    },
+    "./approval-card/examples": {
+      "import": "./src/components/approval-card/approval-card.examples.json",
+      "default": "./src/components/approval-card/approval-card.examples.json"
+    },
     "./area-chart": {
       "types": "./dist/components/area-chart/index.d.ts",
       "svelte": "./src/components/area-chart/index.ts",
@@ -360,6 +383,10 @@
     "./banner/styles": {
       "default": "./dist/components/banner/banner.css"
     },
+    "./banner/examples": {
+      "import": "./src/components/banner/banner.examples.json",
+      "default": "./src/components/banner/banner.examples.json"
+    },
     "./bar-chart": {
       "types": "./dist/components/bar-chart/index.d.ts",
       "svelte": "./src/components/bar-chart/index.ts",
@@ -475,6 +502,10 @@
     "./callout/styles": {
       "default": "./dist/components/callout/callout.css"
     },
+    "./callout/examples": {
+      "import": "./src/components/callout/callout.examples.json",
+      "default": "./src/components/callout/callout.examples.json"
+    },
     "./capability-gate": {
       "types": "./dist/components/capability-gate/index.d.ts",
       "svelte": "./src/components/capability-gate/index.ts",
@@ -629,6 +660,10 @@
     "./checkbox-group/styles": {
       "default": "./dist/components/checkbox-group/checkbox-group.css"
     },
+    "./checkbox-group/examples": {
+      "import": "./src/components/checkbox-group/checkbox-group.examples.json",
+      "default": "./src/components/checkbox-group/checkbox-group.examples.json"
+    },
     "./chip": {
       "types": "./dist/components/chip/index.d.ts",
       "svelte": "./src/components/chip/index.ts",
@@ -825,6 +860,10 @@
     "./color-swatch-picker/styles": {
       "default": "./dist/components/color-swatch-picker/color-swatch-picker.css"
     },
+    "./color-swatch-picker/examples": {
+      "import": "./src/components/color-swatch-picker/color-swatch-picker.examples.json",
+      "default": "./src/components/color-swatch-picker/color-swatch-picker.examples.json"
+    },
     "./combobox": {
       "types": "./dist/components/combobox/index.d.ts",
       "svelte": "./src/components/combobox/index.ts",
@@ -936,25 +975,6 @@
       "import": "./src/components/confirm-dialog/confirm-dialog.examples.json",
       "default": "./src/components/confirm-dialog/confirm-dialog.examples.json"
     },
-    "./connection-indicator": {
-      "types": "./dist/components/connection-indicator/index.d.ts",
-      "svelte": "./src/components/connection-indicator/index.ts",
-      "node": "./dist/server/components/connection-indicator/index.js",
-      "default": "./dist/components/connection-indicator/index.js"
-    },
-    "./connection-indicator/schema": {
-      "types": "./dist/components/connection-indicator/connection-indicator.schema.d.ts",
-      "node": "./dist/server/components/connection-indicator/connection-indicator.schema.js",
-      "default": "./dist/components/connection-indicator/connection-indicator.schema.js"
-    },
-    "./connection-indicator/variables": {
-      "types": "./dist/components/connection-indicator/connection-indicator.variables.d.ts",
-      "node": "./dist/server/components/connection-indicator/connection-indicator.variables.js",
-      "default": "./dist/components/connection-indicator/connection-indicator.variables.js"
-    },
-    "./connection-indicator/styles": {
-      "default": "./dist/components/connection-indicator/connection-indicator.css"
-    },
     "./container": {
       "types": "./dist/components/container/index.d.ts",
       "svelte": "./src/components/container/index.ts",
@@ -1490,6 +1510,10 @@
     "./file-upload/styles": {
       "default": "./dist/components/file-upload/file-upload.css"
     },
+    "./file-upload/examples": {
+      "import": "./src/components/file-upload/file-upload.examples.json",
+      "default": "./src/components/file-upload/file-upload.examples.json"
+    },
     "./floating-action-button": {
       "types": "./dist/components/floating-action-button/index.d.ts",
       "svelte": "./src/components/floating-action-button/index.ts",
@@ -1699,6 +1723,10 @@
     "./image/styles": {
       "default": "./dist/components/image/image.css"
     },
+    "./image/examples": {
+      "import": "./src/components/image/image.examples.json",
+      "default": "./src/components/image/image.examples.json"
+    },
     "./input": {
       "types": "./dist/components/input/index.d.ts",
       "svelte": "./src/components/input/index.ts",
@@ -1952,6 +1980,22 @@
       "import": "./src/components/load-more/load-more.examples.json",
       "default": "./src/components/load-more/load-more.examples.json"
     },
+    "./locale-provider": {
+      "types": "./dist/components/locale-provider/index.d.ts",
+      "svelte": "./src/components/locale-provider/index.ts",
+      "node": "./dist/server/components/locale-provider/index.js",
+      "default": "./dist/components/locale-provider/index.js"
+    },
+    "./locale-provider/schema": {
+      "types": "./dist/components/locale-provider/locale-provider.schema.d.ts",
+      "node": "./dist/server/components/locale-provider/locale-provider.schema.js",
+      "default": "./dist/components/locale-provider/locale-provider.schema.js"
+    },
+    "./locale-provider/variables": {
+      "types": "./dist/components/locale-provider/locale-provider.variables.d.ts",
+      "node": "./dist/server/components/locale-provider/locale-provider.variables.js",
+      "default": "./dist/components/locale-provider/locale-provider.variables.js"
+    },
     "./markdown-editor": {
       "types": "./dist/components/markdown-editor/index.d.ts",
       "svelte": "./src/components/markdown-editor/index.ts",
@@ -2175,6 +2219,10 @@
     "./number-input/styles": {
       "default": "./dist/components/number-input/number-input.css"
     },
+    "./number-input/examples": {
+      "import": "./src/components/number-input/number-input.examples.json",
+      "default": "./src/components/number-input/number-input.examples.json"
+    },
     "./pagination": {
       "types": "./dist/components/pagination/index.d.ts",
       "svelte": "./src/components/pagination/index.ts",
@@ -2929,6 +2977,10 @@
     "./sortable-list/styles": {
       "default": "./dist/components/sortable-list/sortable-list.css"
     },
+    "./sortable-list/examples": {
+      "import": "./src/components/sortable-list/sortable-list.examples.json",
+      "default": "./src/components/sortable-list/sortable-list.examples.json"
+    },
     "./spectrogram": {
       "types": "./dist/components/spectrogram/index.d.ts",
       "svelte": "./src/components/spectrogram/index.ts",
@@ -3148,29 +3200,6 @@
       "import": "./src/components/steps/steps.examples.json",
       "default": "./src/components/steps/steps.examples.json"
     },
-    "./subscription-badge": {
-      "types": "./dist/components/subscription-badge/index.d.ts",
-      "svelte": "./src/components/subscription-badge/index.ts",
-      "node": "./dist/server/components/subscription-badge/index.js",
-      "default": "./dist/components/subscription-badge/index.js"
-    },
-    "./subscription-badge/schema": {
-      "types": "./dist/components/subscription-badge/subscription-badge.schema.d.ts",
-      "node": "./dist/server/components/subscription-badge/subscription-badge.schema.js",
-      "default": "./dist/components/subscription-badge/subscription-badge.schema.js"
-    },
-    "./subscription-badge/variables": {
-      "types": "./dist/components/subscription-badge/subscription-badge.variables.d.ts",
-      "node": "./dist/server/components/subscription-badge/subscription-badge.variables.js",
-      "default": "./dist/components/subscription-badge/subscription-badge.variables.js"
-    },
-    "./subscription-badge/styles": {
-      "default": "./dist/components/subscription-badge/subscription-badge.css"
-    },
-    "./subscription-badge/examples": {
-      "import": "./src/components/subscription-badge/subscription-badge.examples.json",
-      "default": "./src/components/subscription-badge/subscription-badge.examples.json"
-    },
     "./surface": {
       "types": "./dist/components/surface/index.d.ts",
       "svelte": "./src/components/surface/index.ts",
@@ -3438,6 +3467,29 @@
       "import": "./src/components/textarea/textarea.examples.json",
       "default": "./src/components/textarea/textarea.examples.json"
     },
+    "./time-field": {
+      "types": "./dist/components/time-field/index.d.ts",
+      "svelte": "./src/components/time-field/index.ts",
+      "node": "./dist/server/components/time-field/index.js",
+      "default": "./dist/components/time-field/index.js"
+    },
+    "./time-field/schema": {
+      "types": "./dist/components/time-field/time-field.schema.d.ts",
+      "node": "./dist/server/components/time-field/time-field.schema.js",
+      "default": "./dist/components/time-field/time-field.schema.js"
+    },
+    "./time-field/variables": {
+      "types": "./dist/components/time-field/time-field.variables.d.ts",
+      "node": "./dist/server/components/time-field/time-field.variables.js",
+      "default": "./dist/components/time-field/time-field.variables.js"
+    },
+    "./time-field/styles": {
+      "default": "./dist/components/time-field/time-field.css"
+    },
+    "./time-field/examples": {
+      "import": "./src/components/time-field/time-field.examples.json",
+      "default": "./src/components/time-field/time-field.examples.json"
+    },
     "./timeline": {
       "types": "./dist/components/timeline/index.d.ts",
       "svelte": "./src/components/timeline/index.ts",
@@ -3854,25 +3906,6 @@
       "node": "./dist/server/diff/types.js",
       "default": "./dist/diff/types.js"
     },
-    "./experimental/connection-indicator": {
-      "types": "./dist/components/experimental/connection-indicator/index.d.ts",
-      "svelte": "./src/components/experimental/connection-indicator/index.ts",
-      "node": "./dist/server/components/experimental/connection-indicator/index.js",
-      "default": "./dist/components/experimental/connection-indicator/index.js"
-    },
-    "./experimental/connection-indicator/schema": {
-      "types": "./dist/components/connection-indicator/connection-indicator.schema.d.ts",
-      "node": "./dist/server/components/connection-indicator/connection-indicator.schema.js",
-      "default": "./dist/components/connection-indicator/connection-indicator.schema.js"
-    },
-    "./experimental/connection-indicator/variables": {
-      "types": "./dist/components/connection-indicator/connection-indicator.variables.d.ts",
-      "node": "./dist/server/components/connection-indicator/connection-indicator.variables.js",
-      "default": "./dist/components/connection-indicator/connection-indicator.variables.js"
-    },
-    "./experimental/connection-indicator/styles": {
-      "default": "./dist/components/connection-indicator/connection-indicator.css"
-    },
     "./experimental/json-viewer": {
       "types": "./dist/components/experimental/json-viewer/index.d.ts",
       "svelte": "./src/components/experimental/json-viewer/index.ts",
@@ -3965,7 +3998,6 @@
     "@milkdown/kit": "^7.17.3",
     "@milkdown/prose": "^7.17.3",
     "@shikijs/rehype": "^3.21.0",
-    "@standard-schema/spec": "^1.1.0",
     "@tanstack/virtual-core": "^3.17.1",
     "ajv": "^8",
     "comlink": "^4.4.2",
@@ -3993,6 +4025,7 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
+    "@changesets/parse": "0.4.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.2.7",
     "@types/bun": "^1.3.11",

package/src/_internal/locale-context.ts

@@ -0,0 +1,21 @@
+import { createContext } from 'svelte';
+
+import { optionalContext } from './optional-context.ts';
+
+export type TextDirection = 'ltr' | 'rtl';
+
+export type LocaleContext = {
+  /** BCP 47 locale tag used by locale-aware components when no local prop is set. */
+  readonly locale: string | undefined;
+  /** Text direction for components that need direction-aware behavior. */
+  readonly direction: TextDirection | undefined;
+};
+
+const [getLocaleContextStrict, setLocaleContextRaw] = createContext<LocaleContext>();
+
+export function setLocaleContext(context: LocaleContext): void {
+  setLocaleContextRaw(context);
+}
+
+export const getLocaleContext: () => LocaleContext | undefined =
+  optionalContext(getLocaleContextStrict);

package/src/_internal/text-direction.ts

@@ -0,0 +1,213 @@
+import type { TextDirection } from './locale-context.ts';
+
+export function resolveTextDirection(
+  element: HTMLElement | null | undefined,
+  fallback?: TextDirection,
+): TextDirection | undefined {
+  let currentElement: HTMLElement | null = element ?? null;
+  let documentDirection: TextDirection | undefined;
+  let styledDirectionElement: HTMLElement | null = null;
+  while (currentElement) {
+    const direction = currentElement.getAttribute('dir')?.toLowerCase();
+    if (direction === 'rtl' || direction === 'ltr') {
+      if (typeof getComputedStyle === 'function' && styledDirectionElement) {
+        const styledDirection = getComputedStyle(styledDirectionElement).direction;
+        if (styledDirection === 'rtl' || styledDirection === 'ltr') return styledDirection;
+      }
+      if (currentElement === currentElement.ownerDocument.documentElement) {
+        documentDirection = direction;
+        break;
+      }
+      return direction;
+    }
+    if (direction === 'auto' && typeof getComputedStyle === 'function') {
+      const computedDirection = getComputedStyle(currentElement).direction;
+      if (computedDirection === 'rtl' || computedDirection === 'ltr') return computedDirection;
+    }
+    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 undefined;
+}
+
+function readComputedTextDirection(
+  element: HTMLElement | null | undefined,
+): TextDirection | undefined {
+  if (!element || typeof getComputedStyle !== 'function') return undefined;
+  const direction = getComputedStyle(element).direction;
+  return direction === 'rtl' || direction === 'ltr' ? direction : undefined;
+}
+
+function hasDirectionStylingHint(element: HTMLElement | null | undefined): boolean {
+  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: HTMLElement): boolean {
+  for (const sheet of Array.from(element.ownerDocument.styleSheets)) {
+    let rules: CSSRuleList;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (matchesDirectionStyleRuleList(element, rules)) return true;
+  }
+  return false;
+}
+
+function matchesDirectionStyleRuleList(
+  element: HTMLElement,
+  rules: CSSRuleList | Iterable<CSSRule>,
+): boolean {
+  for (const rule of Array.from(rules)) {
+    if (isCssStyleRule(rule)) {
+      if (!rule.style.direction) {
+        const nestedRules = readNestedCssRules(rule);
+        if (nestedRules && matchesDirectionStyleRuleList(element, nestedRules)) 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: CSSRule): CSSRuleList | Iterable<CSSRule> | undefined {
+  if (!('cssRules' in rule)) return undefined;
+  try {
+    const nestedRules: unknown = Reflect.get(rule, 'cssRules');
+    return isCssRuleCollection(nestedRules) ? nestedRules : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function isCssRuleCollection(value: unknown): value is CSSRuleList | Iterable<CSSRule> {
+  if (typeof CSSRuleList !== 'undefined' && value instanceof CSSRuleList) return true;
+  return Array.isArray(value) && value.every(isCssRule);
+}
+
+function isCssRule(value: unknown): value is CSSRule {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    typeof Reflect.get(value, 'cssText') === 'string' &&
+    typeof Reflect.get(value, 'type') === 'number'
+  );
+}
+
+function isCssStyleRule(rule: CSSRule): rule is CSSStyleRule {
+  return (
+    typeof Reflect.get(rule, 'selectorText') === 'string' &&
+    typeof Reflect.get(rule, 'style') === 'object' &&
+    Reflect.get(rule, 'style') !== null
+  );
+}
+
+function isConditionalRuleActive(rule: CSSRule): boolean {
+  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: CSSRule): boolean {
+  return typeof Reflect.get(rule, 'media') === 'object' && Reflect.get(rule, 'media') !== null;
+}
+
+function isSupportsRule(rule: CSSRule): boolean {
+  return rule.constructor.name === 'CSSSupportsRule' || Reflect.get(rule, 'type') === 12;
+}
+
+export function isRightToLeftElement(element: HTMLElement | null | undefined): boolean {
+  return resolveTextDirection(element) === 'rtl';
+}
+
+export function observeTextDirection(
+  element: HTMLElement | null | undefined,
+  onChange: () => void,
+): (() => void) | undefined {
+  if (!element || typeof MutationObserver === 'undefined') return undefined;
+  const observedElement = element;
+  const observer = new MutationObserver((mutations) => {
+    if (
+      mutations.some(
+        (mutation) => mutation.type === 'attributes' && mutation.attributeName === 'dir',
+      )
+    ) {
+      observeDirectionChain();
+    }
+    onChange();
+  });
+
+  function observeDirectionChain(): void {
+    observer.disconnect();
+    let currentElement: HTMLElement | null = observedElement;
+    while (currentElement) {
+      const isAutoDirection = currentElement.getAttribute('dir')?.toLowerCase() === 'auto';
+      observer.observe(currentElement, {
+        attributes: true,
+        attributeFilter: ['dir', 'style', 'class'],
+        childList: isAutoDirection,
+        characterData: isAutoDirection,
+        subtree: isAutoDirection,
+      });
+      currentElement = currentElement.parentElement;
+    }
+  }
+
+  observeDirectionChain();
+  return () => observer.disconnect();
+}

package/src/_internal/tree-context.ts

@@ -44,6 +44,8 @@ export type TreeContext = {
   isExpanded(id: string): boolean;
   isSelected(id: string): boolean;
   isFocused(id: string): boolean;
+  positionInSet(id: string): number | undefined;
+  setSize(id: string): number | undefined;
   isVisible(id: string): boolean;
   hasVisibleDescendant(id: string): boolean;
   matchesFilter(label: string, id: string): boolean;