@lostgradient/cinder 0.1.0

package/dist/components/chat/input/attachment-kind.d.ts

@@ -0,0 +1,10 @@
+/** Discriminant for attachment rendering strategy. */
+export type AttachmentKind = 'image' | 'code' | 'document';
+/**
+ * Derive the attachment kind from a MIME type string.
+ *
+ * - `image/*` → `'image'`
+ * - `text/*` and known code MIME types → `'code'`
+ * - Everything else → `'document'`
+ */
+export declare function deriveAttachmentKind(mimeType: string): AttachmentKind;

package/dist/components/chat/input/chat-attachment-preview.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ChatAttachment } from './chat-attachment.ts';
+export interface ChatAttachmentPreviewProps {
+    attachment: ChatAttachment;
+    class?: string;
+}
+declare const ChatAttachmentPreview: import("svelte").Component<ChatAttachmentPreviewProps, {}, "">;
+type ChatAttachmentPreview = ReturnType<typeof ChatAttachmentPreview>;
+export default ChatAttachmentPreview;

package/dist/components/chat/input/chat-attachment.d.ts

@@ -0,0 +1,11 @@
+import type { AttachmentKind } from './attachment-kind.js';
+/** Attachment metadata for files (images, code, documents). */
+export interface ChatAttachment {
+    id: string;
+    file: File;
+    previewUrl: string;
+    kind: AttachmentKind;
+    textContent?: string;
+    status: 'pending' | 'uploading' | 'ready' | 'error';
+    error?: string;
+}

package/dist/components/chat/input/chat-input.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import type { HTMLFormAttributes } from 'svelte/elements';
+import type { MessageInput } from '../conversation-model.ts';
+import type { ChatAttachment } from './chat-attachment.ts';
+export type { ChatAttachment } from './chat-attachment.ts';
+export type ChatInputProps = Omit<HTMLFormAttributes, 'onsubmit' | 'class'> & {
+    /** Unique ID for accessibility (required) */
+    id: string;
+    /** Current markdown content (two-way bindable) */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether a submission is in progress */
+    sending?: boolean;
+    /** Error message to display */
+    error?: string | undefined;
+    /** Additional CSS class */
+    class?: string;
+    /** Form action URL (enables form action mode) */
+    action?: string;
+    /** Name for the hidden input field (default: 'content') */
+    name?: string;
+    /** Whether to clear input after submit (default: true). Set to false for error recovery. */
+    clearOnSubmit?: boolean;
+    /** Enable file attachments (default: true) */
+    allowAttachments?: boolean;
+    /** Maximum file size in bytes (default: 10MB) */
+    maxFileSize?: number;
+    /** Accepted MIME types (default: ['image/*']) */
+    acceptedTypes?: string[];
+    /** Called when the message is submitted */
+    onsubmit?: (message: MessageInput, attachments: ChatAttachment[]) => void;
+    /** Called when stop is requested (transforms send button into stop button when sending=true) */
+    onstop?: (() => void) | undefined;
+    /** Called when an attachment is added */
+    onattachmentadd?: ((attachment: ChatAttachment) => void) | undefined;
+    /** Called when an attachment is removed */
+    onattachmentremove?: ((attachment: ChatAttachment) => void) | undefined;
+    /** Called when an attachment fails validation */
+    onattachmentfailure?: ((file: File, error: string) => void) | undefined;
+    /** Custom actions area (e.g., additional buttons) */
+    actions?: Snippet;
+};
+declare const ChatInput: import("svelte").Component<ChatInputProps, {
+    focus: () => void;
+    clear: () => void;
+    getAttachments: () => ChatAttachment[];
+    addFiles: (files: File[]) => void;
+}, "value">;
+type ChatInput = ReturnType<typeof ChatInput>;
+export default ChatInput;

package/dist/components/chat/input/index.d.ts

@@ -0,0 +1,4 @@
+export { deriveAttachmentKind, type AttachmentKind } from './attachment-kind.js';
+export { default as ChatAttachmentPreview } from './chat-attachment-preview.svelte';
+export type { ChatAttachment } from './chat-attachment.ts';
+export { default as ChatInput } from './chat-input.svelte';

package/dist/components/chat/message/chat-date-separator.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type ChatDateSeparatorProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    /** The date to display */
+    date: Date | string;
+    /** Custom date formatter for testing/localization */
+    dateFormatter?: (date: Date) => string;
+    /** Additional CSS class */
+    class?: string;
+};
+declare const ChatDateSeparator: import("svelte").Component<ChatDateSeparatorProps, {}, "">;
+type ChatDateSeparator = ReturnType<typeof ChatDateSeparator>;
+export default ChatDateSeparator;

package/dist/components/chat/message/chat-message.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Message, ToolCallPair } from '../conversation-model.ts';
+/**
+ * Role labels for display purposes.
+ * Maps message roles to human-readable labels.
+ */
+export declare const ROLE_LABELS: Record<Message['role'], string>;
+export type ChatMessageProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /** The message to render */
+    message: Message;
+    /** Paired tool calls (from pairToolCallsWithResults) - used for tool-call messages */
+    toolCallPairs?: ToolCallPair[];
+    /** Whether long content is expanded */
+    expanded?: boolean;
+    /** Additional CSS class */
+    class?: string;
+    /** Whether this message is the active in-conversation search match */
+    searchMatch?: boolean;
+    /** Actions region snippet (copy, edit, retry buttons) */
+    actions?: Snippet;
+    /** Status indicator snippet (sending, delivered, error) */
+    status?: Snippet;
+    /** Show built-in copy button alongside custom actions (default: true) */
+    showDefaultActions?: boolean;
+    /** Whether this message is currently streaming */
+    streaming?: boolean;
+    /** Override content for streaming (partial token buffer) */
+    overrideContent?: string | undefined;
+    /** Called when expanded state changes */
+    onexpandedchange?: ((expanded: boolean) => void) | undefined;
+    /** Called when retry is requested on a failed message */
+    onretry?: ((messageId: string) => void) | undefined;
+    /** Called when user edits a message (fires with new content). Only applies to user messages. */
+    onedit?: ((event: {
+        messageId: string;
+        content: string;
+    }) => void) | undefined;
+};
+declare const ChatMessage: import("svelte").Component<ChatMessageProps, {}, "expanded">;
+type ChatMessage = ReturnType<typeof ChatMessage>;
+export default ChatMessage;

package/dist/components/chat/message/image-lightbox.svelte.d.ts

@@ -0,0 +1,17 @@
+export type LightboxImage = {
+    src: string;
+    alt: string;
+};
+export type ImageLightboxProps = {
+    /** Images to display in the lightbox */
+    images: LightboxImage[];
+    /** Index of the image to show initially */
+    initialIndex?: number;
+    /** Whether the lightbox is open */
+    open?: boolean;
+    /** Called when the lightbox is closed */
+    onclose?: () => void;
+};
+declare const ImageLightbox: import("svelte").Component<ImageLightboxProps, {}, "open">;
+type ImageLightbox = ReturnType<typeof ImageLightbox>;
+export default ImageLightbox;

package/dist/components/chat/message/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ChatDateSeparator } from './chat-date-separator.svelte';
+export { default as ChatMessage } from './chat-message.svelte';
+export { default as ImageLightbox } from './image-lightbox.svelte';
+export { default as MessageAttachments } from './message-attachments.svelte';
+export { default as MessageContent } from './message-content.svelte';
+export { default as ToolCallGroup } from './tool-call-group.svelte';

package/dist/components/chat/message/markdown-preview.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type ChatMarkdownPreviewProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    content: string;
+    class?: string;
+};
+declare const MarkdownPreview: import("svelte").Component<ChatMarkdownPreviewProps, {}, "">;
+type MarkdownPreview = ReturnType<typeof MarkdownPreview>;
+export default MarkdownPreview;

package/dist/components/chat/message/message-attachments.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { MultiModalContent } from '../conversation-model.ts';
+export type MessageAttachmentsProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    /** Image parts from the message content */
+    images: ReadonlyArray<MultiModalContent>;
+    /** Lazy loading strategy */
+    loading?: 'lazy' | 'eager';
+    /** Called when an image loads */
+    onimageload?: (index: number) => void;
+    /** Called when an image fails to load */
+    onimageerror?: (index: number, error: Event) => void;
+    /** Additional CSS class */
+    class?: string;
+};
+declare const MessageAttachments: import("svelte").Component<MessageAttachmentsProps, {}, "">;
+type MessageAttachments = ReturnType<typeof MessageAttachments>;
+export default MessageAttachments;

package/dist/components/chat/message/message-content.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type MessageContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    /** Raw markdown/text content to render */
+    content: string;
+    /** Whether content is fully expanded */
+    expanded?: boolean;
+    /** Character threshold for truncation */
+    threshold?: number;
+    /** Whether this message is currently streaming */
+    streaming?: boolean;
+    /** Override content for streaming (partial token buffer) */
+    overrideContent?: string | undefined;
+    /** Additional CSS class */
+    class?: string;
+};
+declare const MessageContent: import("svelte").Component<MessageContentProps, {}, "">;
+type MessageContent = ReturnType<typeof MessageContent>;
+export default MessageContent;

package/dist/components/chat/message/tool-call-group.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ToolCallPair } from '../conversation-model.ts';
+export type ToolCallGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    /** The tool call pair (call + optional result) */
+    pair: ToolCallPair;
+    /** Whether the details are expanded */
+    expanded?: boolean;
+    /** Called when toggle is clicked */
+    ontoggle?: () => void;
+    /** Additional CSS class */
+    class?: string;
+};
+declare const ToolCallGroup: import("svelte").Component<ToolCallGroupProps, {}, "">;
+type ToolCallGroup = ReturnType<typeof ToolCallGroup>;
+export default ToolCallGroup;

package/dist/components/chat/message/tool-payload-code.svelte.d.ts

@@ -0,0 +1,9 @@
+export type ToolPayloadCodeProps = {
+    /** Structured payload text to render. */
+    code: string;
+    /** Additional CSS class. */
+    class?: string;
+};
+declare const ToolPayloadCode: import("svelte").Component<ToolPayloadCodeProps, {}, "">;
+type ToolPayloadCode = ReturnType<typeof ToolPayloadCode>;
+export default ToolPayloadCode;

package/dist/components/chat/utilities/conversation.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Cinder-owned conversation-reading helpers.
+ *
+ * These reimplement the small slice of conversation-reading behavior Chat needs
+ * (message ordering and tool-call pairing) so Chat depends only on the vendored
+ * {@link ConversationHistory}/{@link Message} shapes, not on a runtime library.
+ * Behavior is transcribed from `conversationalist`'s `getOrderedMessages`/`getMessages`
+ * and `pairToolCallsWithResults`; tests pin the contract so any divergence is visible.
+ */
+import type { ConversationHistory, Message, ToolCallPair } from '../conversation-model.ts';
+/**
+ * Returns a conversation's messages in canonical order.
+ *
+ * Walks `conversation.ids` in order, resolving each id from the `messages`
+ * record. Ids with no matching record are skipped (no throw); records not
+ * referenced by `ids` are excluded. Hidden messages are filtered out unless
+ * `includeHidden` is true.
+ *
+ * @param conversation - The conversation snapshot to read
+ * @param options - `includeHidden` keeps hidden messages in the result
+ * @returns Ordered messages
+ */
+export declare function getMessages(conversation: ConversationHistory, options?: {
+    includeHidden?: boolean;
+}): Message[];
+/**
+ * Pairs tool calls with their results from an already-ordered message array.
+ *
+ * Consumes an ordered array only — pass {@link getMessages} output — so pairing
+ * can never disagree with render ordering or surface a stale message that
+ * `getMessages` would have excluded. Two passes: collect results by their
+ * `callId`, then emit one pair per message bearing a `toolCall`, attaching the
+ * matching result if one exists. When two results share a `callId`, the later
+ * one wins (last write to the map).
+ *
+ * @param messages - Messages in canonical order
+ * @returns One pair per tool call, in call order
+ */
+export declare function pairToolCallsWithResults(messages: ReadonlyArray<Message>): ToolCallPair[];

package/dist/components/chat/utilities/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Chat data model helpers.
+ *
+ * Conversation-reading helpers ({@link getMessages}, {@link pairToolCallsWithResults})
+ * and content/markdown utilities, all built on the vendored conversation model.
+ */
+export { getMessages, pairToolCallsWithResults } from './conversation';
+export { type ChatExportOptions, type DeliveryStatus } from './types';
+export { formatMessageAsMarkdown, getMessageParts, getMessageRoleLabel, getMessageText, messagesToMarkdown, toMultiModalArray, } from './utilities';

package/dist/components/chat/utilities/types.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Chat data model types built on top of the vendored conversation model.
+ *
+ * Core types live in `../conversation-model.ts`; this module provides only
+ * project-specific extensions.
+ */
+import type { ToMarkdownOptions } from '../conversation-model.ts';
+/**
+ * Delivery status for messages in the UI.
+ * This is transient state stored in message metadata with a `_` prefix
+ * (e.g., `_deliveryStatus`) so it's automatically stripped on export.
+ */
+export type DeliveryStatus = 'draft' | 'sending' | 'sent' | 'failed';
+/**
+ * Options for exporting a chat transcript. Equivalent to the vendored
+ * {@link ToMarkdownOptions} (which already carries `includeHidden`,
+ * `redactHiddenContent`, and the redaction controls); exposed under a
+ * chat-specific name for the public `@lostgradient/cinder/chat` surface.
+ */
+export type ChatExportOptions = ToMarkdownOptions;

package/dist/components/chat/utilities/utilities.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Utility functions for chat message operations.
+ *
+ * These helpers work with the vendored {@link Message} type to extract
+ * content for copy/export operations.
+ */
+import type { Message, MultiModalContent } from '../conversation-model.ts';
+/**
+ * Normalizes content to a multi-modal array.
+ *
+ * Strings are wrapped in a single text part; a single content item is wrapped
+ * in an array; an array is returned as-is. The `ReadonlyArray` in/out signature
+ * matches {@link Message.content} so callers pass `message.content` with zero casts.
+ *
+ * @param input - String, single content item, or readonly content array
+ * @returns The content as a readonly multi-modal array
+ */
+export declare function toMultiModalArray(input: string | MultiModalContent | ReadonlyArray<MultiModalContent>): ReadonlyArray<MultiModalContent>;
+/**
+ * Extracts all content parts from a message as a multi-modal array.
+ * `content` is `string | ReadonlyArray<MultiModalContent>` and never nullish.
+ * A string yields a single text part (an empty string yields one empty text
+ * part); an array is returned as-is, so an empty array yields an empty array.
+ *
+ * @param message - The message to extract parts from
+ * @returns A readonly array of content parts
+ */
+export declare function getMessageParts(message: Message): ReadonlyArray<MultiModalContent>;
+/**
+ * Extracts all text content from a message, joined by newlines.
+ * Non-text parts (images, etc.) are excluded from the result.
+ *
+ * This is useful for copying a message's text content to clipboard
+ * without including non-text attachments.
+ *
+ * @param message - The message to extract text from
+ * @returns The concatenated text content
+ *
+ * @example
+ * ```typescript
+ * const text = getMessageText(message);
+ * await copyToClipboard(text);
+ * ```
+ */
+export declare function getMessageText(message: Message): string;
+/**
+ * Gets the role label for a message.
+ * Maps internal role values to human-readable labels.
+ *
+ * @param message - The message to get the role label for
+ * @returns A human-readable role label
+ */
+export declare function getMessageRoleLabel(message: Message): string;
+/**
+ * Formats a single message as Markdown for copy operations.
+ *
+ * Currently returns just the text content without role labels,
+ * since the UI context makes the source obvious. The separate function
+ * exists for API clarity and future extensibility (e.g., adding code
+ * fences for tool results).
+ *
+ * @param message - The message to format
+ * @returns Markdown-formatted message content
+ */
+export declare function formatMessageAsMarkdown(message: Message): string;
+/**
+ * Converts a list of messages to Markdown format.
+ *
+ * This is a browser-compatible markdown serialization for chat transcripts,
+ * avoiding the Node.js APIs (createRequire) used by server-side exporters.
+ *
+ * @param messages - The messages to convert
+ * @returns Markdown-formatted conversation
+ */
+export declare function messagesToMarkdown(messages: Message[]): string;

package/dist/components/checkbox/checkbox.css

@@ -0,0 +1,195 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  /* ========================================
+ * CHECKBOX
+ * Styled native <input type="checkbox"> with description and error.
+ * ======================================== */
+
+  .cinder-checkbox-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1-5);
+  }
+
+  .cinder-checkbox-row {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-checkbox {
+    /* Custom-painted but native: keep the input in the layout so screen readers
+   * and form submission see it; restyle via appearance:none. */
+    appearance: none;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin: 0;
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-sm);
+    background: var(--cinder-surface-raised);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition:
+      border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      background var(--cinder-duration-fast) var(--cinder-ease-standard),
+      box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  /* Sticky-hover suppression on touch: wrap hover-only chrome so it doesn't
+ * "stick" after tap on touch devices that emulate :hover. */
+  @media (hover: hover) {
+    .cinder-checkbox:hover:not(:disabled) {
+      border-color: var(--cinder-border-strong);
+    }
+  }
+
+  .cinder-checkbox:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow:
+      0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
+      0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width))
+        var(--_cinder-checkbox-ring, var(--cinder-ring-color));
+  }
+
+  @media (forced-colors: active) {
+    .cinder-checkbox:focus-visible {
+      outline: var(--cinder-ring-width) solid Highlight;
+      outline-offset: 1px;
+    }
+  }
+
+  /* Checked state — paint the box with the accent color. The visible glyph is
+ * drawn by the aria-hidden sibling indicator with `mask-image` so the icon
+ * color tracks `--cinder-accent-contrast` through theme switches. */
+  .cinder-checkbox:checked {
+    background: var(--cinder-accent);
+    border-color: var(--cinder-accent);
+  }
+
+  .cinder-checkbox:indeterminate {
+    background: var(--cinder-accent);
+    border-color: var(--cinder-accent);
+  }
+
+  /* Sibling indicator: a square overlay centered on the input that is masked
+ * to the check or indeterminate glyph. The input still owns the border,
+ * focus ring, and interaction; the indicator is non-interactive. */
+
+  .cinder-checkbox-field__control {
+    position: relative;
+    display: inline-flex;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    flex-shrink: 0;
+  }
+
+  .cinder-checkbox-field__indicator {
+    --_cinder-checkbox-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.7 4.3L6.5 10.6 3.3 7.4 2 8.7l4.5 4.5 7.6-7.6z'/%3E%3C/svg%3E");
+    --_cinder-checkbox-indeterminate-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='2' rx='1'/%3E%3C/svg%3E");
+
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0;
+
+    color: var(--cinder-accent-contrast);
+    background-color: currentColor;
+
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: 0.875rem 0.875rem;
+    mask-size: 0.875rem 0.875rem;
+  }
+
+  .cinder-checkbox:checked + .cinder-checkbox-field__indicator {
+    opacity: 1;
+    -webkit-mask-image: var(--_cinder-checkbox-check-mask);
+    mask-image: var(--_cinder-checkbox-check-mask);
+  }
+
+  .cinder-checkbox:indeterminate + .cinder-checkbox-field__indicator {
+    opacity: 1;
+    -webkit-mask-image: var(--_cinder-checkbox-indeterminate-mask);
+    mask-image: var(--_cinder-checkbox-indeterminate-mask);
+  }
+
+  /* Forced Colors Mode: UA suppresses `background-color: currentColor`, so the
+ * masked indicator becomes invisible. Opt out of forced-color adjustment for
+ * the glyph and paint with a system color that survives the override. */
+  @media (forced-colors: active) {
+    .cinder-checkbox:checked + .cinder-checkbox-field__indicator,
+    .cinder-checkbox:indeterminate + .cinder-checkbox-field__indicator {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+  }
+
+  /* Disabled state */
+  .cinder-checkbox:disabled {
+    cursor: not-allowed;
+    background: var(--cinder-surface-inset);
+    border-color: var(--cinder-border-muted);
+  }
+
+  .cinder-checkbox:disabled:checked,
+  .cinder-checkbox:disabled:indeterminate {
+    background-color: var(--cinder-fill-disabled);
+    border-color: var(--cinder-fill-disabled);
+  }
+
+  /* The checkmark glyph on a disabled box uses the disabled FOREGROUND, not the
+     bright-fill --cinder-accent-contrast (dark ink in both arms). On the dark-mode
+     --cinder-fill-disabled (L 0.30) a dark glyph (L 0.15) is only ~1.45:1 — the
+     mark vanishes. --cinder-text-disabled clears the 3:1 UI floor in both themes
+     (light ~3.8:1, dark ~3.7:1). */
+  .cinder-checkbox:disabled:checked + .cinder-checkbox-field__indicator,
+  .cinder-checkbox:disabled:indeterminate + .cinder-checkbox-field__indicator {
+    color: var(--cinder-text-disabled);
+  }
+
+  /* Error / invalid state */
+  .cinder-checkbox[aria-invalid='true'] {
+    --_cinder-checkbox-ring: var(--cinder-danger);
+    border-color: var(--cinder-danger);
+  }
+
+  /* Label */
+  .cinder-checkbox-field__label {
+    font-size: var(--cinder-text-sm);
+    line-height: var(--cinder-leading-normal);
+    color: var(--cinder-text);
+    cursor: pointer;
+  }
+
+  .cinder-checkbox-field__label[data-disabled] {
+    color: var(--cinder-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Supporting text */
+  .cinder-checkbox-field__description {
+    font-size: var(--cinder-text-xs);
+    line-height: var(--cinder-leading-normal);
+    color: var(--cinder-text-muted);
+    margin: 0;
+    padding-inline-start: calc(1.125rem + var(--cinder-space-2));
+  }
+
+  .cinder-checkbox-field__error {
+    font-size: var(--cinder-text-xs);
+    line-height: var(--cinder-leading-normal);
+    color: var(--cinder-danger);
+    margin: 0;
+    padding-inline-start: calc(1.125rem + var(--cinder-space-2));
+  }
+}

package/dist/components/checkbox/checkbox.schema.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentSchema } from '../../schema-types';
+declare const _default: ComponentSchema;
+export default _default;