@lostgradient/cinder 0.5.0 → 0.7.0

package/src/components/access-gate/access-gate.schema.ts

@@ -0,0 +1,43 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    granted: {
+      type: 'boolean',
+      description: 'Whether the consumer-authorized action or section is available.',
+    },
+    variant: {
+      enum: ['inline', 'section'],
+      description: 'Presentation mode.',
+      default: 'inline',
+    },
+    reason: {
+      type: 'string',
+      description: 'Human-readable explanation shown to users and wired to assistive technology.',
+    },
+    requirement: {
+      type: 'string',
+      description:
+        'Named scope, permission, or policy requirement shown in the section placeholder.',
+    },
+    class: {
+      type: 'string',
+      description: 'Custom class merged with the denied-state wrapper or section placeholder.',
+    },
+  },
+  additionalProperties: false,
+  required: ['granted', 'reason'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        description: 'Gated content. Rendered untouched when access is granted.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/access-gate/access-gate.svelte

@@ -1,62 +1,22 @@
 <script lang="ts" module>
-  /**
-   * @cinder
-   * @category feedback
-   * @status alpha
-   * @purpose Authorization-scope gate that keeps unavailable actions visible with an accessible reason or replaces locked sections with a scope-required placeholder.
-   * @tag feedback
-   * @tag authorization
-   * @tag permission
-   * @useWhen Showing a mutating action that the current user cannot activate because an application authorization scope is missing.
-   * @useWhen Replacing a panel, tab, or administrative section with a lock state that names the missing scope or permission.
-   * @avoidWhen Checking browser permissions, media capabilities, or feature support — use capability-gate instead.
-   * @avoidWhen Resolving roles, scopes, or policies — compute granted in application code and pass the boolean in.
-   * @related capability-gate, button, callout, empty-state
-   * @a11yNote Denied inline gates render content inert before hydration, then disable controls, remove them from sequential focus, and wire the reason through aria-describedby.
-   */
-  export type { AccessGateProps, AccessGateVariant } from './access-gate.types.ts';
+export {};
 </script>
 
 <script lang="ts">
-  import { Lock } from 'lucide-svelte';
-
-  import { classNames } from '../../utilities/class-names.ts';
-
-  import AccessGateInline from './access-gate-inline.svelte';
-  import type { AccessGateProps } from './access-gate.types.ts';
-
-  let {
-    granted,
-    variant = 'inline',
-    reason,
-    requirement,
-    children,
-    class: customClassName,
-    ...rest
-  }: AccessGateProps = $props();
-
-  const baseId = $props.id();
-  const sectionTitleId = `${baseId}-title`;
-  const sectionReasonId = `${baseId}-description`;
-  const sectionRequirementId = `${baseId}-requirement`;
-  const sectionDescriptionIds = $derived(
-    requirement ? `${sectionReasonId} ${sectionRequirementId}` : sectionReasonId,
-  );
-  const passthroughAttributes = $derived(
-    stripOwnedAccessibilityAttributes(rest as Record<string, unknown>),
-  );
-
-  function stripOwnedAccessibilityAttributes(
-    attributes: Record<string, unknown>,
-  ): Record<string, unknown> {
-    const {
-      role: _role,
-      ['aria-describedby']: _ariaDescribedBy,
-      ['aria-labelledby']: _ariaLabelledBy,
-      ...passthrough
-    } = attributes;
+import { Lock } from 'lucide-svelte';
+import { classNames } from '../../utilities/class-names.ts';
+import AccessGateInline from './access-gate-inline.svelte';
+let { granted, variant = 'inline', reason, requirement, children, class: customClassName, ...rest } = $props();
+const baseId = $props.id();
+const sectionTitleId = `${baseId}-title`;
+const sectionReasonId = `${baseId}-description`;
+const sectionRequirementId = `${baseId}-requirement`;
+const sectionDescriptionIds = $derived(requirement ? `${sectionReasonId} ${sectionRequirementId}` : sectionReasonId);
+const passthroughAttributes = $derived(stripOwnedAccessibilityAttributes(rest));
+function stripOwnedAccessibilityAttributes(attributes) {
+    const { role: _role, ['aria-describedby']: _ariaDescribedBy, ['aria-labelledby']: _ariaLabelledBy, ...passthrough } = attributes;
     return passthrough;
-  }
+}
 </script>
 
 {#if granted}

package/src/components/access-gate/access-gate.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/access-gate/access-gate.variables.ts

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

package/src/components/accordion/accordion.context.ts

@@ -1,16 +1,16 @@
-import { createContext } from 'svelte';
-
+import { strictStableContext } from '../../_internal/strict-stable-context.ts';
 import type { AccordionContext } from './accordion.types.ts';
 
 export type { AccordionContext };
 
-const [getAccordionContextStrict, setAccordionContext] = createContext<AccordionContext>();
-
-export { setAccordionContext };
-
 /**
  * Read the nearest enclosing `<Accordion>` context. Throws when no `<Accordion>`
  * ancestor has provided the context — an `<AccordionItem>` outside an `<Accordion>`
  * is a programmer error, not a supported state.
  */
-export const getAccordionContext = getAccordionContextStrict;
+const [getAccordionContext, setAccordionContext] = strictStableContext<AccordionContext>(
+  '@lostgradient/cinder/accordion/context',
+  'AccordionItem must be rendered inside an Accordion',
+);
+
+export { getAccordionContext, setAccordionContext };

package/src/components/accordion/accordion.schema.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "multiple": {
+      "type": "boolean",
+      "description": "When true, multiple items may be expanded simultaneously.",
+      "default": false
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional CSS class merged with `.cinder-accordion`."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet",
+        "required": true,
+        "description": "AccordionItem children."
+      }
+    ]
+  }
+}

package/src/components/accordion/accordion.schema.ts

@@ -0,0 +1,30 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    multiple: {
+      type: 'boolean',
+      description: 'When true, multiple items may be expanded simultaneously.',
+      default: false,
+    },
+    class: {
+      type: 'string',
+      description: 'Additional CSS class merged with `.cinder-accordion`.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+        description: 'AccordionItem children.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/accordion/accordion.svelte

@@ -1,64 +1,32 @@
 <script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status stable
-   * @purpose Composite root that coordinates a stack of collapsible accordion-item panels with single or multiple expansion.
-   * @tag disclosure
-   * @tag collapsible
-   * @useWhen Progressively disclosing several sections of content that share a parent heading.
-   * @useWhen Letting the consumer expand one or multiple panels at once via the multiple prop.
-   * @avoidWhen Switching between mutually exclusive views of the same region. | tabs
-   * @avoidWhen Hiding a single optional region — reach for a plain disclosure instead. | collapsible
-   * @related accordion-item, tabs, tree
-   * @a11yPattern WAI-ARIA Accordion
-   * @keyboardShortcut Tab | Moves focus to the next focusable element (accordion header buttons are in the natural tab order).
-   * @keyboardShortcut Shift + Tab | Moves focus to the previous focusable element.
-   * @keyboardShortcut Enter / Space | When focus is on a header button, toggles the associated panel open or closed.
-   * @a11yNote Each trigger is a native button exposing aria-expanded and aria-controls, so screen readers announce open/closed state.
-   * @a11yNote Panels intentionally omit role="region" to keep the page's landmark list clean.
-   * @a11yNote Disabled items set the native disabled attribute on their trigger, removing them from the tab order.
-   */
-  export type { AccordionContext, AccordionProps } from './accordion.types.ts';
+export {};
 </script>
 
 <script lang="ts">
-  import { createMultiSelection } from '../../_internal/collection.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import { setAccordionContext } from './accordion.context.ts';
-  import type { AccordionProps } from './accordion.types.ts';
-
-  let {
-    multiple = false,
-    expandedIds = $bindable([]),
-    class: className,
-    children,
-  }: AccordionProps = $props();
-
-  // Multi-mode delegates to the shared collection helper; single-mode keeps the
-  // "open one at a time" invariant local. Both update `expandedIds` in place so
-  // the bindable parent prop sees the change.
-  const multi = createMultiSelection<string>(
-    () => expandedIds,
-    (next) => {
-      expandedIds = next;
-    },
-  );
-
-  function toggle(id: string): void {
+import { createMultiSelection } from '../../_internal/collection.ts';
+import { classNames } from '../../utilities/class-names.ts';
+import { setAccordionContext } from './accordion.context.ts';
+let { multiple = false, expandedIds = $bindable([]), class: className, children, } = $props();
+// Multi-mode delegates to the shared collection helper; single-mode keeps the
+// "open one at a time" invariant local. Both update `expandedIds` in place so
+// the bindable parent prop sees the change.
+const multi = createMultiSelection(() => expandedIds, (next) => {
+    expandedIds = next;
+});
+function toggle(id) {
     if (multiple) {
-      multi.toggle(id);
-    } else {
-      expandedIds = expandedIds.includes(id) ? [] : [id];
+        multi.toggle(id);
     }
-  }
-
-  setAccordionContext({
+    else {
+        expandedIds = expandedIds.includes(id) ? [] : [id];
+    }
+}
+setAccordionContext({
     get expandedIds() {
-      return expandedIds;
+        return expandedIds;
     },
     toggle,
-  });
+});
 </script>
 
 <div class={classNames('cinder-accordion', className)}>

package/src/components/accordion/accordion.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/accordion/accordion.variables.ts

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

package/src/components/accordion-item/accordion-item.schema.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "id": {
+      "type": "string",
+      "description": "Unique identifier matched against Accordion's expandedIds."
+    },
+    "title": {
+      "type": "string",
+      "description": "Visible header label for the item."
+    },
+    "disabled": {
+      "type": "boolean",
+      "description": "When true, the item cannot be toggled.",
+      "default": false
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional CSS class merged with `.cinder-accordion-item`."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["id", "title"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet",
+        "required": true,
+        "description": "Panel content rendered when the item is expanded."
+      }
+    ]
+  }
+}

package/src/components/accordion-item/accordion-item.schema.ts

@@ -0,0 +1,39 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    id: {
+      type: 'string',
+      description: "Unique identifier matched against Accordion's expandedIds.",
+    },
+    title: {
+      type: 'string',
+      description: 'Visible header label for the item.',
+    },
+    disabled: {
+      type: 'boolean',
+      description: 'When true, the item cannot be toggled.',
+      default: false,
+    },
+    class: {
+      type: 'string',
+      description: 'Additional CSS class merged with `.cinder-accordion-item`.',
+    },
+  },
+  additionalProperties: false,
+  required: ['id', 'title'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+        description: 'Panel content rendered when the item is expanded.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/accordion-item/accordion-item.svelte

@@ -1,37 +1,20 @@
 <script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status stable
-   * @purpose Collapsible panel within an accordion that toggles its content visibility under a heading button.
-   * @tag disclosure
-   * @tag collapsible
-   * @useWhen Rendering one expandable section inside an accordion parent.
-   * @useWhen Disabling a single section while leaving siblings interactive via the disabled prop.
-   * @avoidWhen Standing alone outside an accordion — it requires the accordion context to function.
-   * @related accordion
-   */
-  export type { AccordionItemProps } from './accordion-item.types.ts';
+export {};
 </script>
 
 <script lang="ts">
-  import { getAccordionContext } from '../accordion/accordion.context.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import type { AccordionItemProps } from './accordion-item.types.ts';
-
-  let { id, title, disabled = false, class: className, children }: AccordionItemProps = $props();
-
-  const context = getAccordionContext();
-
-  const isExpanded = $derived(context.expandedIds.includes(id));
-
-  const headerId = $derived(`${id}-header`);
-  const panelId = $derived(`${id}-panel`);
-
-  function handleClick(): void {
-    if (disabled) return;
+import { getAccordionContext } from '../accordion/accordion.context.ts';
+import { classNames } from '../../utilities/class-names.ts';
+let { id, title, disabled = false, class: className, children } = $props();
+const context = getAccordionContext();
+const isExpanded = $derived(context.expandedIds.includes(id));
+const headerId = $derived(`${id}-header`);
+const panelId = $derived(`${id}-panel`);
+function handleClick() {
+    if (disabled)
+        return;
     context.toggle(id);
-  }
+}
 </script>
 
 <div

package/src/components/accordion-item/accordion-item.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/accordion-item/accordion-item.variables.ts

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

package/src/components/action-row/action-row.css

@@ -0,0 +1,133 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-action-row {
+    display: block;
+    inline-size: 100%;
+    padding: var(--cinder-space-3) var(--cinder-space-4);
+    border: 0;
+    border-radius: var(--cinder-radius-md);
+    background: transparent;
+    color: var(--cinder-text);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .cinder-action-row[data-cinder-density='condensed'] {
+    padding: var(--cinder-space-2) var(--cinder-space-3);
+  }
+
+  @media (hover: hover) {
+    .cinder-action-row:hover:not(:disabled) {
+      background: var(--cinder-surface-hover);
+    }
+  }
+
+  .cinder-action-row:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  .cinder-action-row:disabled {
+    color: var(--cinder-text-disabled);
+    cursor: not-allowed;
+  }
+
+  .cinder-action-row[data-cinder-selected] {
+    background: color-mix(in oklch, var(--cinder-accent), transparent 92%);
+    color: var(--cinder-accent-text);
+  }
+
+  @media (hover: hover) {
+    .cinder-action-row[data-cinder-selected]:hover:not(:disabled) {
+      background: color-mix(in oklch, var(--cinder-accent), transparent 88%);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .cinder-action-row:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+
+    .cinder-action-row[data-cinder-selected] {
+      outline: 1px solid Highlight;
+      color: HighlightText;
+      background: Highlight;
+    }
+
+    .cinder-action-row[data-cinder-selected] .cinder-action-row__description,
+    .cinder-action-row[data-cinder-selected] .cinder-action-row__meta,
+    .cinder-action-row[data-cinder-selected] .cinder-action-row__trailing {
+      color: HighlightText;
+    }
+  }
+
+  .cinder-action-row__layout {
+    display: grid;
+    align-items: center;
+    column-gap: var(--cinder-space-3);
+    row-gap: var(--cinder-space-2);
+    grid-template-columns: 1fr;
+    grid-template-areas: 'body';
+  }
+
+  .cinder-action-row--has-leading .cinder-action-row__layout {
+    grid-template-columns: auto 1fr;
+    grid-template-areas: 'leading body';
+  }
+
+  .cinder-action-row--has-trailing .cinder-action-row__layout {
+    grid-template-columns: 1fr auto;
+    grid-template-areas: 'body trailing';
+  }
+
+  .cinder-action-row--has-leading.cinder-action-row--has-trailing .cinder-action-row__layout {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas: 'leading body trailing';
+  }
+
+  .cinder-action-row__leading {
+    grid-area: leading;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .cinder-action-row__body {
+    grid-area: body;
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+  }
+
+  .cinder-action-row__trailing {
+    grid-area: trailing;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-action-row__title {
+    color: inherit;
+    font-size: var(--cinder-text-sm);
+    line-height: var(--cinder-leading-snug);
+    overflow-wrap: anywhere;
+  }
+
+  .cinder-action-row__description {
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+    line-height: var(--cinder-leading-snug);
+    overflow-wrap: anywhere;
+  }
+
+  .cinder-action-row__meta {
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    line-height: var(--cinder-leading-snug);
+    overflow-wrap: anywhere;
+  }
+}

package/src/components/action-row/action-row.examples.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "action-row",
+  "import": "@lostgradient/cinder/action-row",
+  "examples": [
+    {
+      "id": "basic",
+      "title": "Selectable action rows",
+      "description": "Rows with button semantics for master-detail lists and timeline selections.",
+      "code": "<script lang=\"ts\">\n  import ActionRow from '@lostgradient/cinder/action-row';\n\n  let selectedRun = $state('run-2');\n\n  const runs = [\n    { id: 'run-1', title: 'Morning sync', status: 'Queued', time: '09:00' },\n    { id: 'run-2', title: 'Webhook replay', status: 'Running', time: '09:12' },\n    { id: 'run-3', title: 'Cleanup sweep', status: 'Finished', time: '09:18' },\n  ];\n</script>\n\n<div style=\"display: grid; gap: var(--cinder-space-1); max-inline-size: 28rem;\">\n  {#each runs as run (run.id)}\n    <ActionRow\n      selected={selectedRun === run.id}\n      onclick={() => {\n        selectedRun = run.id;\n      }}\n    >\n      {#snippet title()}{run.title}{/snippet}\n      {#snippet description()}{run.status}{/snippet}\n      {#snippet meta()}Run {run.id}{/snippet}\n      {#snippet trailing()}{run.time}{/snippet}\n    </ActionRow>\n  {/each}\n</div>\n"
+    },
+    {
+      "id": "timeline-edge",
+      "title": "Timeline edge rows",
+      "description": "Current-step rows use aria-current while preserving the same full-row button layout.",
+      "code": "<script lang=\"ts\">\n  import ActionRow from '@lostgradient/cinder/action-row';\n\n  let currentEdge = $state('edge-2');\n\n  const edges = [\n    {\n      id: 'edge-1',\n      title: 'Validate payload',\n      description: 'Queued after webhook receipt',\n      status: 'Queued',\n      duration: '0.4s',\n    },\n    {\n      id: 'edge-2',\n      title: 'Route to workflow',\n      description: 'Current transition in the timeline',\n      status: 'Current',\n      duration: '1.2s',\n    },\n    {\n      id: 'edge-3',\n      title: 'Persist activity',\n      description: 'Writes the normalized event snapshot',\n      status: 'Pending',\n      duration: '0.8s',\n    },\n  ];\n</script>\n\n<div style=\"display: grid; gap: var(--cinder-space-1); max-inline-size: 30rem;\">\n  {#each edges as edge (edge.id)}\n    <ActionRow\n      selected={currentEdge === edge.id}\n      selectedState=\"current\"\n      currentValue=\"step\"\n      density=\"condensed\"\n      onclick={() => {\n        currentEdge = edge.id;\n      }}\n    >\n      {#snippet leading()}\n        <span aria-hidden=\"true\">→</span>\n      {/snippet}\n      {#snippet title()}{edge.title}{/snippet}\n      {#snippet description()}{edge.description}{/snippet}\n      {#snippet meta()}{edge.status}{/snippet}\n      {#snippet trailing()}{edge.duration}{/snippet}\n    </ActionRow>\n  {/each}\n</div>\n"
+    }
+  ]
+}

package/src/components/action-row/action-row.schema.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "density": {
+      "enum": ["comfortable", "condensed"],
+      "description": "Density token surfaced as `data-cinder-density`.",
+      "default": "comfortable"
+    },
+    "selected": {
+      "type": "boolean",
+      "description": "Whether the row is currently selected.",
+      "default": false
+    },
+    "selectedState": {
+      "enum": ["pressed", "current"],
+      "description": "Accessible state mapping for selected rows.\nUse `pressed` for in-page selectable rows and `current` for navigation/current-item rows.",
+      "default": "pressed"
+    },
+    "currentValue": {
+      "enum": ["page", "step", "location", "date", "time", "true"],
+      "description": "`aria-current` value used when `selectedState=\"current\"` and `selected` is true.",
+      "default": "true"
+    },
+    "type": {
+      "enum": ["button", "submit", "reset"],
+      "description": "Native button type.",
+      "default": "button"
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional classes merged with `.cinder-action-row`."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "description",
+        "reason": "function-or-snippet",
+        "description": "Secondary description below the title."
+      },
+      {
+        "name": "leading",
+        "reason": "function-or-snippet",
+        "description": "Leading visual such as an icon, avatar, marker, or status dot."
+      },
+      {
+        "name": "meta",
+        "reason": "function-or-snippet",
+        "description": "Tertiary metadata such as timestamp, status text, or a compact badge."
+      },
+      {
+        "name": "title",
+        "reason": "function-or-snippet",
+        "required": true,
+        "description": "Primary row label. Required so the row has visible text and an accessible name."
+      },
+      {
+        "name": "trailing",
+        "reason": "function-or-snippet",
+        "description": "Trailing region such as a timestamp, count, badge, chevron, or shortcut hint."
+      }
+    ]
+  }
+}