@lostgradient/cinder 0.4.1 → 0.6.0

package/src/components/time-field/time-field.schema.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "id": {
+      "type": "string"
+    },
+    "value": {
+      "type": "string"
+    },
+    "defaultValue": {
+      "type": "string"
+    },
+    "granularity": {
+      "enum": ["minute", "second"]
+    },
+    "timezones": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "timezone": {
+      "type": "string"
+    },
+    "timezoneName": {
+      "type": "string"
+    },
+    "label": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
+    "error": {
+      "type": "string"
+    },
+    "disabled": {
+      "type": "boolean"
+    },
+    "readonly": {
+      "type": "boolean"
+    },
+    "required": {
+      "type": "boolean"
+    },
+    "name": {
+      "type": "string"
+    },
+    "class": {
+      "type": "string"
+    },
+    "aria-label": {
+      "type": "string"
+    },
+    "aria-labelledby": {
+      "type": "string"
+    },
+    "aria-describedby": {
+      "type": "string"
+    },
+    "aria-invalid": {
+      "enum": [false, true, "true", "false"]
+    }
+  },
+  "additionalProperties": false,
+  "required": ["id"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "onchange",
+        "reason": "function-or-snippet",
+        "description": "Called when the user commits a time or timezone change."
+      }
+    ]
+  }
+}

package/src/components/time-field/time-field.variables.json

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

package/src/components/timeline/timeline.schema.json

@@ -0,0 +1,90 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "entries": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "string",
+            "description": "Stable id used as the keyed list identity."
+          },
+          "datetime": {
+            "type": "string",
+            "description": "Machine-readable ISO datetime rendered into `<time datetime>`."
+          },
+          "timestamp": {
+            "type": "string",
+            "description": "Visible timestamp label rendered inside `<time>`."
+          },
+          "title": {
+            "type": "string",
+            "description": "Visible event title."
+          },
+          "tone": {
+            "enum": ["info", "success", "warning", "error"],
+            "description": "Semantic marker tone.",
+            "default": "info"
+          },
+          "groupLabel": {
+            "type": "string",
+            "description": "Optional day/week group label override. The first entry in a group wins."
+          }
+        },
+        "additionalProperties": false,
+        "required": ["datetime", "id", "timestamp", "title"]
+      },
+      "description": "Timeline entries rendered in source order."
+    },
+    "orientation": {
+      "enum": ["vertical", "horizontal"],
+      "description": "Layout orientation.",
+      "default": "vertical"
+    },
+    "groupBy": {
+      "enum": ["none", "day", "week"],
+      "description": "Optional adjacent UTC day/week grouping mode.",
+      "default": "none"
+    },
+    "weekStartsOn": {
+      "enum": ["sunday", "monday"],
+      "description": "Week start used for UTC week grouping.",
+      "default": "monday"
+    },
+    "groupHeaderLevel": {
+      "enum": [1, 2, 3, 4, 5, 6],
+      "description": "Heading level applied to rendered group headers.",
+      "default": 3
+    },
+    "gapThresholdMinutes": {
+      "type": "number",
+      "description": "Hide the following connector when adjacent valid timestamps exceed this gap (in minutes)."
+    },
+    "label": {
+      "type": "string",
+      "description": "Fallback accessible label used only when aria-label and aria-labelledby are absent."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with `.cinder-timeline`."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["entries"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet",
+        "description": "Optional per-entry body content."
+      },
+      {
+        "name": "marker",
+        "reason": "function-or-snippet",
+        "description": "Decorative per-entry marker content. Must not contain interactive descendants."
+      }
+    ]
+  }
+}

package/src/components/timeline/timeline.variables.json

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

package/src/components/toast-region/toast-region.examples.json

@@ -7,73 +7,73 @@
       "id": "action-button",
       "title": "Action button",
       "description": "Default action dismisses after firing; keepOpen: true keeps the toast visible after the action runs.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n  let undoCount = $state(0);\n  let pauseCount = $state(0);\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Dismiss-after-action\"\n        onclick={() =>\n          toast.show('Item moved to trash.', {\n            variant: 'info',\n            duration: 0,\n            action: {\n              label: 'Undo',\n              onAction: () => (undoCount += 1),\n            },\n          })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Keep open after action\"\n        onclick={() =>\n          toast.show('Syncing in the background…', {\n            variant: 'info',\n            duration: 0,\n            action: {\n              label: 'Pause',\n              keepOpen: true,\n              onAction: () => (pauseCount += 1),\n            },\n          })}\n      />\n    </div>\n    <p style=\"margin-top: 0.75rem; font-size: 0.875rem;\">\n      Undo fired: {undoCount} · Pause fired: {pauseCount}\n    </p>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n  let undoCount = $state(0);\n  let pauseCount = $state(0);\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Dismiss-after-action\"\n        onclick={() =>\n          toast.show('Item moved to trash.', {\n            variant: 'info',\n            duration: 0,\n            action: {\n              label: 'Undo',\n              onAction: () => (undoCount += 1),\n            },\n          })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Keep open after action\"\n        onclick={() =>\n          toast.show('Syncing in the background…', {\n            variant: 'info',\n            duration: 0,\n            action: {\n              label: 'Pause',\n              keepOpen: true,\n              onAction: () => (pauseCount += 1),\n            },\n          })}\n      />\n    </div>\n    <p style=\"margin-top: 0.75rem; font-size: 0.875rem;\">\n      Undo fired: {undoCount} · Pause fired: {pauseCount}\n    </p>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "basic",
       "title": "Basic toast region",
       "description": "Click the trigger to dispatch a transient toast into the live region.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show success\"\n        onclick={() => toast.show('Saved your changes.', { variant: 'success' })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Show info\"\n        onclick={() => toast.show('A new version is available.', { variant: 'info' })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show success\"\n        onclick={() => toast.show('Saved your changes.', { variant: 'success' })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Show info\"\n        onclick={() => toast.show('A new version is available.', { variant: 'info' })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "dismissible",
       "title": "Dismissible sticky toast",
       "description": "duration: 0 keeps the toast until the user dismisses it.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show sticky warning\"\n        variant=\"secondary\"\n        onclick={() =>\n          toast.show('Your session expires in 5 minutes.', {\n            variant: 'warning',\n            duration: 0,\n            dismissible: true,\n          })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show sticky warning\"\n        variant=\"secondary\"\n        onclick={() =>\n          toast.show('Your session expires in 5 minutes.', {\n            variant: 'warning',\n            duration: 0,\n            dismissible: true,\n          })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "keyboard",
       "title": "Keyboard dismiss",
       "description": "Focus a toast control and press Escape to dismiss the active notification.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show keyboard toast\"\n      onclick={() =>\n        toast.show('Tab to this toast, then press Escape.', {\n          duration: 0,\n          action: {\n            label: 'Action',\n            keepOpen: true,\n            onAction: () => {},\n          },\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show keyboard toast\"\n      onclick={() =>\n        toast.show('Tab to this toast, then press Escape.', {\n          duration: 0,\n          action: {\n            label: 'Action',\n            keepOpen: true,\n            onAction: () => {},\n          },\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "modal-scoped",
       "title": "Modal-scoped region",
       "description": "Nest <ToastRegion> inside a Modal to scope toasts to the modal content. When the modal body unmounts on close, the region tears down with it and pending timers are cleared.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { Modal } from '@lostgradient/cinder/modal';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n  let open = $state(false);\n  let triggerRef: HTMLElement | null = $state(null);\n</script>\n\n<Button\n  label=\"Open modal\"\n  onclick={(event) => {\n    triggerRef = event.currentTarget;\n    open = true;\n  }}\n/>\n\n<Modal bind:open title=\"Modal-scoped toasts\" {triggerRef}>\n  <ToastRegion>\n    {#snippet children()}\n      {@const toast = useToast()}\n      <p>\n        Toasts dispatched here belong to this modal's region. When the modal closes, its region\n        unmounts and any active toasts are torn down.\n      </p>\n      <div class=\"example-preview-row\">\n        <Button\n          label=\"Show success\"\n          onclick={() => toast.show('Saved inside the modal.', { variant: 'success' })}\n        />\n        <Button\n          variant=\"danger\"\n          label=\"Show danger\"\n          onclick={() => toast.show('Something went wrong.', { variant: 'danger' })}\n        />\n      </div>\n    {/snippet}\n  </ToastRegion>\n  {#snippet footer()}\n    <div style=\"display: flex; gap: 0.5rem; justify-content: flex-end;\">\n      <Button variant=\"secondary\" label=\"Close\" onclick={() => (open = false)} />\n    </div>\n  {/snippet}\n</Modal>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { Modal } from '@lostgradient/cinder/modal';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n  let open = $state(false);\n  let triggerRef: HTMLElement | null = $state(null);\n</script>\n\n<Button\n  label=\"Open modal\"\n  onclick={(event) => {\n    triggerRef = event.currentTarget;\n    open = true;\n  }}\n/>\n\n<Modal bind:open title=\"Modal-scoped toasts\" {triggerRef}>\n  <ToastRegion>\n    {#snippet children()}\n      {@const toast = useToast()}\n      <p>\n        Toasts dispatched here belong to this modal's region. When the modal closes, its region\n        unmounts and any active toasts are torn down.\n      </p>\n      <div class=\"example-preview-row\">\n        <Button\n          label=\"Show success\"\n          onclick={() => toast.show('Saved inside the modal.', { variant: 'success' })}\n        />\n        <Button\n          variant=\"danger\"\n          label=\"Show danger\"\n          onclick={() => toast.show('Something went wrong.', { variant: 'danger' })}\n        />\n      </div>\n    {/snippet}\n  </ToastRegion>\n  {#snippet footer()}\n    <div style=\"display: flex; gap: 0.5rem; justify-content: flex-end;\">\n      <Button variant=\"secondary\" label=\"Close\" onclick={() => (open = false)} />\n    </div>\n  {/snippet}\n</Modal>\n"
     },
     {
       "id": "pause-on-hover",
       "title": "Pause on hover",
       "description": "Pointer hover and keyboard focus pause auto-dismiss for the whole stack.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion defaultDuration={2500}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show timed toast\"\n      onclick={() =>\n        toast.show('Hover or focus the stack to pause this countdown.', {\n          action: {\n            label: 'Keep',\n            keepOpen: true,\n            onAction: () => {},\n          },\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion defaultDuration={2500}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show timed toast\"\n      onclick={() =>\n        toast.show('Hover or focus the stack to pause this countdown.', {\n          action: {\n            label: 'Keep',\n            keepOpen: true,\n            onAction: () => {},\n          },\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "positions",
       "title": "Positions",
       "description": "Anchor the toast region to any viewport corner or horizontal center.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n  import type { ToastPosition } from '@lostgradient/cinder/toast-region';\n\n  const positions: ToastPosition[] = [\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-left',\n    'bottom-center',\n    'bottom-right',\n  ];\n\n  let position: ToastPosition = $state('bottom-right');\n</script>\n\n<ToastRegion {position}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      {#each positions as nextPosition}\n        <Button\n          size=\"sm\"\n          variant={position === nextPosition ? 'primary' : 'secondary'}\n          label={nextPosition}\n          onclick={() => {\n            position = nextPosition;\n            toast.show(`Position: ${nextPosition}`, { id: 'position-demo' });\n          }}\n        />\n      {/each}\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n  import type { ToastPosition } from '@lostgradient/cinder/toast-region';\n\n  const positions: ToastPosition[] = [\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-left',\n    'bottom-center',\n    'bottom-right',\n  ];\n\n  let position: ToastPosition = $state('bottom-right');\n</script>\n\n<ToastRegion {position}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      {#each positions as nextPosition}\n        <Button\n          size=\"sm\"\n          variant={position === nextPosition ? 'primary' : 'secondary'}\n          label={nextPosition}\n          onclick={() => {\n            position = nextPosition;\n            toast.show(`Position: ${nextPosition}`, { id: 'position-demo' });\n          }}\n        />\n      {/each}\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "programmatic-dismiss",
       "title": "Programmatic dismiss",
       "description": "show() returns the toast id. Capture it to dismiss a specific toast, or call dismissAll() to clear both stacks.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n  let lastId: string | null = $state(null);\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show sticky\"\n        onclick={() => {\n          lastId = toast.show('Sticky toast — dismiss me programmatically.', {\n            variant: 'info',\n            duration: 0,\n          });\n        }}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Dismiss last\"\n        onclick={() => {\n          if (lastId) {\n            toast.dismiss(lastId);\n            lastId = null;\n          }\n        }}\n      />\n      <Button variant=\"secondary\" label=\"Dismiss all\" onclick={() => toast.dismissAll()} />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n  let lastId: string | null = $state(null);\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show sticky\"\n        onclick={() => {\n          lastId = toast.show('Sticky toast — dismiss me programmatically.', {\n            variant: 'info',\n            duration: 0,\n          });\n        }}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Dismiss last\"\n        onclick={() => {\n          if (lastId) {\n            toast.dismiss(lastId);\n            lastId = null;\n          }\n        }}\n      />\n      <Button variant=\"secondary\" label=\"Dismiss all\" onclick={() => toast.dismissAll()} />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "promise",
       "title": "Promise",
       "description": "Show a sticky loading toast that resolves into success or danger output.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n\n  function waitThen<T>(value: T, reject = false) {\n    return new Promise<T>((resolve, rejectPromise) => {\n      setTimeout(() => {\n        if (reject) {\n          rejectPromise(new Error('Sync failed.'));\n        } else {\n          resolve(value);\n        }\n      }, 900);\n    });\n  }\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Resolve\"\n        onclick={() =>\n          toast.promise(waitThen('profile'), {\n            id: 'profile-sync',\n            loading: 'Saving profile...',\n            success: (value) => `Saved ${value}.`,\n            error: 'Save failed.',\n          })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Reject\"\n        onclick={() =>\n          toast.promise(waitThen('profile', true), {\n            id: 'profile-sync',\n            loading: 'Saving profile...',\n            success: 'Saved profile.',\n            error: (error) => (error instanceof Error ? error.message : 'Save failed.'),\n          })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n\n  function waitThen<T>(value: T, reject = false) {\n    return new Promise<T>((resolve, rejectPromise) => {\n      setTimeout(() => {\n        if (reject) {\n          rejectPromise(new Error('Sync failed.'));\n        } else {\n          resolve(value);\n        }\n      }, 900);\n    });\n  }\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Resolve\"\n        onclick={() =>\n          toast.promise(waitThen('profile'), {\n            id: 'profile-sync',\n            loading: 'Saving profile...',\n            success: (value) => `Saved ${value}.`,\n            error: 'Save failed.',\n          })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Reject\"\n        onclick={() =>\n          toast.promise(waitThen('profile', true), {\n            id: 'profile-sync',\n            loading: 'Saving profile...',\n            success: 'Saved profile.',\n            error: (error) => (error instanceof Error ? error.message : 'Save failed.'),\n          })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "stacking",
       "title": "Stacking",
       "description": "Rapid notifications stack with bounded overflow and visual depth.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n\n  let count = $state(0);\n</script>\n\n<ToastRegion maxStack={5} defaultDuration={0}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Add five toasts\"\n      onclick={() => {\n        for (let index = 0; index < 5; index += 1) {\n          count += 1;\n          toast.show(`Stacked notification ${count}`, {\n            variant: index % 2 === 0 ? 'info' : 'success',\n          });\n        }\n      }}\n    />\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n\n  let count = $state(0);\n</script>\n\n<ToastRegion maxStack={5} defaultDuration={0}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Add five toasts\"\n      onclick={() => {\n        for (let index = 0; index < 5; index += 1) {\n          count += 1;\n          toast.show(`Stacked notification ${count}`, {\n            variant: index % 2 === 0 ? 'info' : 'success',\n          });\n        }\n      }}\n    />\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "swipe-to-dismiss",
       "title": "Swipe to dismiss",
       "description": "Dismiss a toast by dragging it horizontally past the threshold.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show swipe toast\"\n      onclick={() =>\n        toast.show('Drag this notification left or right to dismiss it.', {\n          duration: 0,\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show swipe toast\"\n      onclick={() =>\n        toast.show('Drag this notification left or right to dismiss it.', {\n          duration: 0,\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "variants",
       "title": "All four variants",
       "description": "info and success route to the polite (status) region; warning and danger route to the assertive (alert) region.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Info\"\n        onclick={() => toast.show('A new version is available.', { variant: 'info' })}\n      />\n      <Button\n        label=\"Success\"\n        onclick={() => toast.show('Saved your changes.', { variant: 'success' })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Warning\"\n        onclick={() => toast.show('Your session expires in 5 minutes.', { variant: 'warning' })}\n      />\n      <Button\n        variant=\"danger\"\n        label=\"Danger\"\n        onclick={() => toast.show('Failed to save your changes.', { variant: 'danger' })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Info\"\n        onclick={() => toast.show('A new version is available.', { variant: 'info' })}\n      />\n      <Button\n        label=\"Success\"\n        onclick={() => toast.show('Saved your changes.', { variant: 'success' })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Warning\"\n        onclick={() => toast.show('Your session expires in 5 minutes.', { variant: 'warning' })}\n      />\n      <Button\n        variant=\"danger\"\n        label=\"Danger\"\n        onclick={() => toast.show('Failed to save your changes.', { variant: 'danger' })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     }
   ]
 }

package/src/components/toast-region/toast-region.schema.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "maxStack": {
+      "type": "number",
+      "description": "Maximum simultaneous toasts in each region. Default 5."
+    },
+    "defaultDuration": {
+      "type": "number",
+      "description": "Default auto-dismiss duration in ms. Default 5000. Set to 0 for sticky."
+    },
+    "position": {
+      "enum": [
+        "top-left",
+        "top-center",
+        "top-right",
+        "bottom-left",
+        "bottom-center",
+        "bottom-right"
+      ],
+      "description": "Viewport anchor for both live-region channels. Default `bottom-right`."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with `.cinder-toast-region`."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet",
+        "description": "Optional children. When provided, the region wraps them so descendants\ncan call `useToast()` and read the region's context. Most apps mount\n`<ToastRegion>` as a self-closing tag at the root of their layout and\nleave this empty — but some patterns (modal-scoped regions, tests)\nbenefit from explicit child composition."
+      }
+    ]
+  }
+}

package/src/components/toast-region/toast-region.variables.json

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

package/src/components/toggle/toggle.schema.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "id": {
+      "type": "string",
+      "description": "Native id placed on the `<button>`; the rendered label uses `aria-labelledby` to name it (label id is derived as `${id}-label`)."
+    },
+    "checked": {
+      "type": "boolean",
+      "description": "Whether the toggle is currently checked. Bindable — defaults to false."
+    },
+    "label": {
+      "type": "string",
+      "description": "Visible label text. Always the accessible name, even when `hideLabel` is set. Required."
+    },
+    "disabled": {
+      "type": "boolean",
+      "description": "Prevents interaction when true. Sets `disabled` attribute."
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "description": "Visually hide the rendered label while keeping it as the accessible name. Use for icon-only or inline contexts."
+    },
+    "name": {
+      "type": "string",
+      "description": "Form field name. When set, a hidden checkbox mirrors `checked` so the toggle\nparticipates in native form submission. Omit for purely client-side toggles\n(no hidden input is rendered, so there is zero overhead)."
+    },
+    "value": {
+      "type": "string",
+      "description": "Value submitted for the hidden checkbox when `checked` and `name` is set.\nMirrors native checkbox semantics: the pair `name=value` is sent only while\nchecked. Defaults to `'on'`. Ignored when `name` is unset."
+    },
+    "form": {
+      "type": "string",
+      "description": "Associates the hidden checkbox with a form by id, matching the native\n`form` attribute. Lets the toggle submit with a form it is not nested in.\nIgnored when `name` is unset."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with `.cinder-toggle` on the switch button."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["id", "label"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "onValueChange",
+        "reason": "function-or-snippet",
+        "description": "Intercept a proposed checked state before the bindable value is written. Return a replacement value to transform it."
+      }
+    ]
+  }
+}

package/src/components/toggle/toggle.variables.json

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

package/src/components/toolbar/toolbar.css

@@ -10,6 +10,10 @@
     container-name: cinder-toolbar;
   }
 
+  .cinder-toolbar[data-cinder-orientation='horizontal'] {
+    flex-wrap: wrap;
+  }
+
   .cinder-toolbar[data-cinder-orientation='vertical'] {
     flex-direction: column;
     align-items: stretch;
@@ -29,16 +33,6 @@
     align-items: stretch;
   }
 
-  .cinder-toolbar[data-cinder-orientation='horizontal']
-    > .cinder-toolbar__group
-    + .cinder-toolbar__group::before {
-    content: '';
-    inline-size: 1px;
-    block-size: 1.5rem;
-    background: var(--cinder-border);
-    flex-shrink: 0;
-  }
-
   .cinder-toolbar[data-cinder-orientation='vertical']
     > .cinder-toolbar__group
     + .cinder-toolbar__group::before {
@@ -53,9 +47,14 @@
     min-inline-size: var(--cinder-space-2);
   }
 
+  .cinder-toolbar[data-cinder-orientation='horizontal']
+    > .cinder-toolbar__spacer
+    + .cinder-toolbar__group {
+    margin-inline-start: auto;
+  }
+
   @container cinder-toolbar (max-width: 30rem) {
     .cinder-toolbar[data-cinder-orientation='horizontal'] {
-      flex-wrap: wrap;
       align-items: stretch;
     }
 

package/src/components/toolbar/toolbar.examples.json

@@ -18,7 +18,7 @@
     {
       "id": "with-groups",
       "title": "Toolbar with groups",
-      "description": "Adjacent groups draw their own separators without manual dividers.",
+      "description": "Adjacent groups keep related controls together while the toolbar wraps.",
       "code": "<script lang=\"ts\">\n  import Toolbar from '@lostgradient/cinder/toolbar';\n  import { Button } from '@lostgradient/cinder/button';\n  import Segment from '@lostgradient/cinder/segment';\n  import SegmentedControl from '@lostgradient/cinder/segmented-control';\n</script>\n\n<Toolbar aria-label=\"Preview controls\">\n  <Toolbar.Group>\n    <SegmentedControl id=\"scale\" label=\"Scale\" hideLabel value=\"100\" onchange={() => {}}>\n      <Segment value=\"75\">75%</Segment>\n      <Segment value=\"100\">100%</Segment>\n      <Segment value=\"125\">125%</Segment>\n    </SegmentedControl>\n  </Toolbar.Group>\n\n  <Toolbar.Group>\n    <Button variant=\"ghost\" size=\"sm\">Fit</Button>\n    <Button variant=\"ghost\" size=\"sm\">Grid</Button>\n  </Toolbar.Group>\n</Toolbar>\n"
     },
     {

package/src/components/toolbar/toolbar.schema.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "orientation": {
+      "enum": ["horizontal", "vertical"],
+      "description": "Layout direction for keyboard ownership and vertical group separator placement.",
+      "default": "horizontal"
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class merged with `.cinder-toolbar`."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet",
+        "required": true,
+        "description": "Controls rendered inside the toolbar."
+      }
+    ]
+  }
+}

package/src/components/toolbar/toolbar.variables.json

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

package/src/components/tooltip/tooltip.schema.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "text": {
+      "type": "string",
+      "description": "Text content rendered inside the tooltip."
+    },
+    "placement": {
+      "enum": ["top", "right", "bottom", "left"],
+      "description": "Preferred side of the trigger on which the tooltip appears. Default `top`."
+    },
+    "describe": {
+      "type": "boolean",
+      "description": "Whether to wire tooltip text to the trigger via aria-describedby."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with the component's root class."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["text"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet",
+        "required": true,
+        "description": "The trigger element that the tooltip is anchored to."
+      }
+    ]
+  }
+}

package/src/components/tooltip/tooltip.variables.json

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

package/src/components/transfer-list/transfer-list.schema.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "items": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "string",
+            "description": "Unique stable item identifier stored in `value`."
+          },
+          "label": {
+            "type": "string",
+            "description": "Visible option label."
+          },
+          "disabled": {
+            "type": "boolean",
+            "description": "Prevents selecting or transferring the item from the available list. Already-selected disabled items remain removable."
+          }
+        },
+        "additionalProperties": false,
+        "required": ["id", "label"]
+      },
+      "description": "Full item pool. Item IDs must be unique; duplicate IDs after the first are ignored. The component never mutates this array."
+    },
+    "value": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "Unique IDs currently assigned to the right-side selected list. Supports `bind:value`. Unknown IDs are ignored and dropped on the next transfer."
+    },
+    "leftLabel": {
+      "type": "string",
+      "description": "Accessible and visible label for the left list.",
+      "default": "Available"
+    },
+    "rightLabel": {
+      "type": "string",
+      "description": "Accessible and visible label for the right list.",
+      "default": "Selected"
+    },
+    "class": {
+      "type": "string",
+      "description": "Custom class merged with `.cinder-transfer-list`."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["items"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "onchange",
+        "reason": "function-or-snippet",
+        "description": "Called with the next right-side value after a transfer."
+      }
+    ]
+  }
+}

package/src/components/transfer-list/transfer-list.variables.json

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