slexkit 0.2.0

package/dist/components/specs.js

@@ -0,0 +1,1090 @@
+// src/version.ts
+var SLEX_PROTOCOL_VERSION = "0.1";
+
+// src/components/spec-helpers.ts
+var SINCE = "0.1.0";
+function docs(type) {
+  return {
+    href: `/docs/components/${type}`,
+    anchors: {
+      api: `${type}-api-reference`,
+      examples: `${type}-canonical-example`
+    }
+  };
+}
+function isSlexExpression(value) {
+  return typeof value.namespace === "string" && typeof value.layout === "object" && value.layout !== null;
+}
+function example(type, propsOrSource, title = "Basic usage") {
+  return {
+    id: "basic",
+    title,
+    source: isSlexExpression(propsOrSource) ? {
+      slex: propsOrSource.slex ?? SLEX_PROTOCOL_VERSION,
+      ...propsOrSource
+    } : {
+      slex: SLEX_PROTOCOL_VERSION,
+      namespace: `spec_${type.replaceAll("-", "_")}_basic`,
+      layout: {
+        [`${type}:demo`]: propsOrSource
+      }
+    }
+  };
+}
+var semanticTones = ["info", "success", "warning", "danger", "muted"];
+var inputState = ["input", "slider", "select", "tabs", "radio-group"];
+var checkedState = ["checkbox"];
+var enabledState = ["switch"];
+var readableState = ["stat", "text", "progress", "badge", "callout", "code-block", "divider", "link", "table", "section"];
+function stateFor(type) {
+  if (inputState.includes(type))
+    return "value";
+  if (checkedState.includes(type))
+    return "checked";
+  if (enabledState.includes(type))
+    return "enabled";
+  if (readableState.includes(type))
+    return "readable";
+  return "none";
+}
+function component(spec) {
+  return {
+    status: "ready",
+    since: SINCE,
+    docs: docs(spec.type),
+    state: spec.state ?? stateFor(spec.type),
+    ...spec
+  };
+}
+var childContent = {
+  allowed: true,
+  description: "Nested component fields are rendered as child content in field order."
+};
+var noChildren = {
+  allowed: false,
+  description: "This component does not render nested child components."
+};
+
+// src/components/entries/accordion.spec.ts
+var accordionSpec = component({
+  type: "accordion",
+  category: "Disclosure",
+  title: "Accordion",
+  summary: "Expandable grouped panels.",
+  description: "Use accordion to reveal one or more sections from a compact list of panels.",
+  props: {
+    value: { type: "string | string[]", dynamic: true, description: "Current expanded item value; use an array when multiple is true." },
+    multiple: { type: "boolean", default: false, description: "Allow multiple items to be expanded at the same time." },
+    items: { type: "array", description: "Panel definitions with value, label, content, and optional icon." },
+    "items[].icon": { type: "string", description: "Icon name shown before an item trigger label." },
+    onchange: { type: "write-expression", description: "Write expression invoked when expanded items change." }
+  },
+  children: noChildren,
+  examples: [example("accordion", {
+    namespace: "doc_accordion_typical",
+    layout: {
+      "accordion:faq": {
+        multiple: true,
+        value: [
+          "install"
+        ],
+        items: [
+          {
+            value: "install",
+            label: "Install",
+            icon: "download-simple",
+            content: "Prepare dependencies."
+          },
+          {
+            value: "review",
+            label: "Review",
+            icon: "check-circle",
+            content: "Check the result."
+          },
+          {
+            value: "ship",
+            label: "Ship",
+            icon: "rocket-launch",
+            content: "Publish the change."
+          }
+        ]
+      }
+    }
+  })]
+});
+
+// src/components/entries/badge.spec.ts
+var badgeSpec = component({
+  type: "badge",
+  category: "Content",
+  title: "Badge",
+  summary: "Compact label for status or classification.",
+  description: "Use badge to annotate nearby content with a short semantic label.",
+  props: {
+    label: { type: "string", dynamic: true, description: "Badge text." },
+    text: { type: "string", dynamic: true, description: "Alias for label." },
+    content: { type: "string", dynamic: true, description: "Alias for label." },
+    icon: { type: "string", description: "Icon name shown before the badge label." },
+    tone: { type: "string", values: semanticTones, default: "info", description: "Semantic tone applied to the badge." },
+    variant: { type: "string", values: semanticTones, description: "Alias for tone." }
+  },
+  children: noChildren,
+  examples: [example("badge", {
+    namespace: "doc_badge_typical",
+    layout: {
+      "row:badges": {
+        "badge:ready": {
+          label: "ready",
+          icon: "check-circle",
+          tone: "success"
+        },
+        "badge:pending": {
+          label: "pending",
+          tone: "warning"
+        },
+        "badge:info": {
+          label: "info",
+          tone: "info"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/button.spec.ts
+var buttonSpec = component({
+  type: "button",
+  category: "Action",
+  title: "Button",
+  summary: "Action trigger.",
+  description: "Use button for explicit actions in interactive SlexKit layouts.",
+  props: {
+    label: { type: "string", dynamic: true, description: "Visible button text and accessible name." },
+    icon: { type: "string", description: "Icon name shown before the label." },
+    iconOnly: { type: "boolean", default: false, description: "Show only the icon while retaining label as the accessible name." },
+    variant: { type: "string", values: ["primary", "secondary", "danger", "ghost"], default: "primary", description: "Semantic action variant." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable the action." },
+    href: { type: "string", dynamic: true, description: "Render the button surface as a link to this URL." },
+    target: { type: "string", description: "Link target used when href is present." },
+    title: { type: "string", dynamic: true, description: "Tooltip and accessible-label fallback." },
+    selected: { type: "boolean", dynamic: true, description: "Render the icon in its selected visual state." },
+    active: { type: "boolean", dynamic: true, description: "Render the icon in its active visual state." },
+    pressed: { type: "boolean", dynamic: true, description: "Expose pressed state and render the selected icon style." },
+    onclick: { type: "write-expression", description: "Write expression invoked when the button is clicked." }
+  },
+  children: noChildren,
+  examples: [example("button", {
+    namespace: "doc_button_typical",
+    layout: {
+      "row:actions": {
+        "button:save": {
+          label: "Save",
+          icon: "floppy-disk",
+          variant: "primary"
+        },
+        "button:cancel": {
+          label: "Cancel",
+          variant: "secondary"
+        },
+        "button:delete": {
+          label: "Delete",
+          variant: "danger"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/callout.spec.ts
+var calloutSpec = component({
+  type: "callout",
+  category: "Content",
+  title: "Callout",
+  summary: "Highlighted contextual message.",
+  description: "Use callout for notes, warnings, and other contextual blocks.",
+  props: {
+    title: { type: "string", dynamic: true, description: "Callout title." },
+    heading: { type: "string", dynamic: true, description: "Alias for title." },
+    label: { type: "string", dynamic: true, description: "Alias for title." },
+    icon: { type: "string", description: "Icon name shown before the title." },
+    text: { type: "string", dynamic: true, description: "Callout body text." },
+    message: { type: "string", dynamic: true, description: "Alias for text." },
+    content: { type: "string", dynamic: true, description: "Alias for text." },
+    tone: { type: "string", values: ["info", "success", "warning", "danger"], default: "info", description: "Semantic tone for the callout." }
+  },
+  children: childContent,
+  examples: [example("callout", {
+    namespace: "doc_callout_typical",
+    layout: {
+      "callout:notice": {
+        tone: "info",
+        title: "Notice",
+        icon: "info",
+        text: "Use callout for information that should stand out."
+      }
+    }
+  })]
+});
+
+// src/components/entries/card.spec.ts
+var cardSpec = component({
+  type: "card",
+  category: "Layout",
+  title: "Card",
+  summary: "Bordered grouping container.",
+  description: "Use card to group related content on a bounded surface.",
+  props: {
+    title: { type: "string", dynamic: true, description: "Card title." },
+    icon: { type: "string", description: "Icon name shown before the title." },
+    tone: { type: "string", values: semanticTones, description: "Optional semantic tone for the card surface." }
+  },
+  children: childContent,
+  examples: [example("card", {
+    namespace: "doc_card_typical",
+    layout: {
+      "card:metrics": {
+        title: "Metrics",
+        icon: "chart-bar",
+        "grid:items": {
+          columns: 2,
+          "stat:requests": {
+            label: "Requests",
+            value: "1.2k",
+            unit: "/min"
+          },
+          "stat:latency": {
+            label: "Latency",
+            value: "42",
+            unit: "ms"
+          }
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/checkbox.spec.ts
+var checkboxSpec = component({
+  type: "checkbox",
+  category: "Input",
+  title: "Checkbox",
+  summary: "Boolean checkbox input.",
+  description: "Use checkbox for binary choices that can be toggled independently.",
+  props: {
+    checked: { type: "boolean", default: false, dynamic: true, description: "Checked state." },
+    label: { type: "string", dynamic: true, description: "Checkbox label." },
+    icon: { type: "string", description: "Icon name shown before the visible label." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable the checkbox." },
+    haptic: { type: "boolean", default: true, description: "Enable vibration feedback on supported devices." },
+    haptics: { type: "boolean", default: true, description: "Alias for haptic." },
+    onchange: { type: "write-expression", description: "Write expression invoked when checked state changes." }
+  },
+  children: noChildren,
+  examples: [example("checkbox", {
+    namespace: "doc_checkbox_typical",
+    layout: {
+      "checkbox:agree": {
+        checked: true,
+        label: "I agree",
+        icon: "handshake"
+      }
+    }
+  })]
+});
+
+// src/components/entries/code-block.spec.ts
+var codeBlockSpec = component({
+  type: "code-block",
+  category: "Content",
+  title: "Code Block",
+  summary: "Formatted code or log block.",
+  description: "Use code-block for static code samples, configuration snippets, and logs.",
+  props: {
+    code: { type: "string", dynamic: true, description: "Code text content." },
+    source: { type: "string", dynamic: true, description: "Alias for code." },
+    content: { type: "string", dynamic: true, description: "Alias for code." },
+    language: { type: "string", description: "Language label." },
+    title: { type: "string", description: "Code block title." },
+    icon: { type: "string", description: "Icon name shown before the title." },
+    lineNumbers: { type: "boolean", default: true, description: "Show line numbers." }
+  },
+  children: noChildren,
+  examples: [example("code-block", {
+    namespace: "doc_code_block_typical",
+    layout: {
+      "code-block:config": {
+        title: "Config",
+        icon: "code",
+        language: "js",
+        code: "export const enabled = true;"
+      }
+    }
+  })]
+});
+
+// src/components/entries/collapsible.spec.ts
+var collapsibleSpec = component({
+  type: "collapsible",
+  category: "Disclosure",
+  title: "Collapsible",
+  summary: "Single expandable region.",
+  description: "Use collapsible to show or hide one related content region.",
+  props: {
+    open: { type: "boolean", default: false, dynamic: true, description: "Expanded state." },
+    trigger: { type: "string", dynamic: true, description: "Trigger button text." },
+    icon: { type: "string", description: "Icon name shown before trigger text." },
+    content: { type: "string", dynamic: true, description: "Static body content." },
+    onchange: { type: "write-expression", description: "Write expression invoked when open state changes." }
+  },
+  children: childContent,
+  examples: [example("collapsible", {
+    namespace: "doc_collapsible_typical",
+    layout: {
+      "collapsible:more": {
+        open: true,
+        trigger: "Details",
+        icon: "caret-circle-down",
+        content: "This secondary content can be collapsed."
+      }
+    }
+  })]
+});
+
+// src/components/entries/column.spec.ts
+var columnSpec = component({
+  type: "column",
+  category: "Layout",
+  title: "Column",
+  summary: "Vertical layout container.",
+  description: "Use column to stack child components vertically in field order.",
+  props: {},
+  children: childContent,
+  examples: [example("column", {
+    namespace: "doc_column_typical",
+    layout: {
+      "column:form": {
+        "input:name": {
+          placeholder: "Name"
+        },
+        "input:email": {
+          placeholder: "Email"
+        },
+        "button:save": {
+          label: "Save"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/divider.spec.ts
+var dividerSpec = component({
+  type: "divider",
+  category: "Content",
+  title: "Divider",
+  summary: "Visual separator.",
+  description: "Use divider to separate related regions, optionally with a label.",
+  props: {
+    label: { type: "string", dynamic: true, description: "Text shown in the divider." },
+    icon: { type: "string", description: "Icon name shown before the label." }
+  },
+  children: noChildren,
+  examples: [example("divider", {
+    namespace: "doc_divider_typical",
+    layout: {
+      "column:content": {
+        "text:top": {
+          text: "Above"
+        },
+        "divider:line": {
+          label: "Divider",
+          icon: "flag"
+        },
+        "text:bottom": {
+          text: "Below"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/grid.spec.ts
+var gridSpec = component({
+  type: "grid",
+  category: "Layout",
+  title: "Grid",
+  summary: "Responsive grid container.",
+  description: "Use grid to arrange child components in responsive columns.",
+  props: {
+    columns: { type: "number", default: 1, dynamic: true, description: "Base column count." },
+    smColumns: { type: "number", dynamic: true, description: "Column count at the small breakpoint." },
+    mdColumns: { type: "number", dynamic: true, description: "Column count at the medium breakpoint." },
+    lgColumns: { type: "number", dynamic: true, description: "Column count at the large breakpoint." },
+    xlColumns: { type: "number", dynamic: true, description: "Column count at the extra-large breakpoint." },
+    gap: { type: "string", dynamic: true, description: "Spacing between grid items." }
+  },
+  children: childContent,
+  examples: [example("grid", {
+    namespace: "doc_grid_typical",
+    layout: {
+      "grid:stats": {
+        columns: 1,
+        mdColumns: 3,
+        "stat:a": {
+          label: "Requests",
+          value: "1.2k"
+        },
+        "stat:b": {
+          label: "Success",
+          value: "98%"
+        },
+        "stat:c": {
+          label: "Errors",
+          value: "3"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/icon.spec.ts
+var iconSpec = component({
+  type: "icon",
+  category: "Component",
+  title: "Icon",
+  summary: "Shared icon field capability.",
+  description: "Icon is a shared field capability, not an independent icon component type.",
+  props: {
+    icon: { type: "string", description: "Icon name resolved through the global icon manager." },
+    iconOnly: { type: "boolean", description: "Render only the icon while retaining an accessible label where supported." },
+    "items[].icon": { type: "string", description: "Accordion item trigger icon." },
+    "options[].icon": { type: "string", description: "Select or radio option icon." },
+    "columns[].icon": { type: "string", description: "Table column header icon." },
+    "tabs[].icon": { type: "string", description: "Tab trigger icon." },
+    "tabs[].iconOnly": { type: "boolean", description: "Tab trigger icon-only mode." }
+  },
+  children: noChildren,
+  examples: [example("button", { label: "Settings", icon: "gear-six", iconOnly: true, variant: "ghost" }, "Icon field usage")]
+});
+
+// src/components/entries/input.spec.ts
+var inputSpec = component({
+  type: "input",
+  category: "Input",
+  title: "Input",
+  summary: "Text or engineering-value input.",
+  description: "Use input for editable text and engineering numeric values.",
+  props: {
+    value: { type: "string", dynamic: true, description: "Current input value." },
+    label: { type: "string", dynamic: true, description: "Input label." },
+    unit: { type: "string", dynamic: true, description: "Trailing unit text." },
+    description: { type: "string", dynamic: true, description: "Assistive description below the input." },
+    help: { type: "string", dynamic: true, description: "Alias for description." },
+    hint: { type: "string", dynamic: true, description: "Alias for description." },
+    error: { type: "string", dynamic: true, description: "Error text shown below the input and linked with aria-describedby." },
+    errorMessage: { type: "string", dynamic: true, description: "Alias for error." },
+    invalid: { type: "boolean", default: false, dynamic: true, description: "Mark the input as invalid with aria-invalid and error styling." },
+    placeholder: { type: "string", description: "Placeholder text for empty values." },
+    type: { type: "string", default: "text", description: "Input value kind; use engineering for parsed engineering values." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable editing." },
+    readonly: { type: "boolean", default: false, dynamic: true, description: "Make the input read-only." },
+    readOnly: { type: "boolean", default: false, dynamic: true, description: "Alias for readonly." },
+    required: { type: "boolean", default: false, dynamic: true, description: "Mark the input as required." },
+    id: { type: "string", description: "Native input id; defaults to a stable id derived from the component name." },
+    name: { type: "string", description: "Native input name attribute." },
+    min: { type: "string | number", dynamic: true, description: "Minimum value used by numeric input controls." },
+    max: { type: "string | number", dynamic: true, description: "Maximum value used by numeric input controls." },
+    step: { type: "string | number", dynamic: true, description: "Step size used by numeric input controls." },
+    controls: { type: "boolean", default: true, dynamic: true, description: "Show decrement and increment buttons for numeric inputs." },
+    onchange: { type: "write-expression", description: "Write expression invoked when the value changes." }
+  },
+  children: noChildren,
+  examples: [example("input", {
+    namespace: "doc_input_typical",
+    layout: {
+      "input:name": {
+        label: "Project",
+        value: "SlexKit",
+        placeholder: "Enter name",
+        description: "Visible labels keep form fields scannable."
+      }
+    }
+  })]
+});
+
+// src/components/entries/link.spec.ts
+var linkSpec = component({
+  type: "link",
+  category: "Content",
+  title: "Link",
+  summary: "Inline navigation link.",
+  description: "Use link to navigate to another page or resource.",
+  props: {
+    href: { type: "string", description: "Target URL." },
+    text: { type: "string", dynamic: true, description: "Visible link text." },
+    label: { type: "string", dynamic: true, description: "Alias for text." },
+    content: { type: "string", dynamic: true, description: "Alias for text." },
+    icon: { type: "string", description: "Icon name shown before link text." },
+    target: { type: "string", description: "Native link target attribute." },
+    variant: { type: "string", values: ["default", "muted"], default: "default", description: "Link visual variant." }
+  },
+  children: noChildren,
+  examples: [example("link", {
+    namespace: "doc_link_typical",
+    layout: {
+      "column:links": {
+        "link:docs": {
+          href: "/components",
+          icon: "arrow-square-out",
+          text: "View components"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/playground.spec.ts
+var playgroundSpec = component({
+  type: "playground",
+  category: "Tooling",
+  title: "Playground",
+  summary: "Interactive source preview.",
+  description: "Use playground in documentation surfaces to render editable SlexKit or Markdown examples.",
+  props: {
+    source: { type: "object | string", description: "SlexKit or Markdown source to preview." },
+    sourceType: { type: "string", values: ["slex", "markdown", "auto-markdown"], default: "slex", description: "Source parser mode." },
+    title: { type: "string", description: "Playground title." },
+    previewAlign: { type: "string", values: ["center", "start"], default: "center", description: "Vertical preview alignment in render mode." },
+    alignPreview: { type: "string", values: ["center", "start"], description: "Alias for previewAlign." },
+    previewPlacement: { type: "string", values: ["center", "start"], description: "Alias for previewAlign." },
+    previewMinHeight: { type: "string", description: "Minimum preview area height." },
+    previewMaxWidth: { type: "string", description: "Maximum preview content width." },
+    themeToggle: { type: "boolean", default: false, description: "Show the theme toggle action." },
+    showThemeToggle: { type: "boolean", default: false, description: "Alias for themeToggle." },
+    enableThemeToggle: { type: "boolean", default: false, description: "Alias for themeToggle." },
+    themeLabel: { type: "string", description: "Accessible label for the theme toggle action." },
+    themeToggleLabel: { type: "string", description: "Alias for themeLabel." },
+    sourceTypeLabel: { type: "string", description: "Accessible label for the source type selector." },
+    copyLabel: { type: "string", description: "Accessible label for the copy source action." },
+    openWebLabel: { type: "string", description: "Accessible label for opening the source in the standalone playground." },
+    webUrl: { type: "string", description: "Standalone playground URL used by the open action." },
+    playgroundUrl: { type: "string", description: "Alias for webUrl." }
+  },
+  children: noChildren,
+  examples: [example("playground", {
+    namespace: "doc_playground_typical",
+    layout: {
+      "playground:demo": {
+        title: "Stat Playground",
+        previewMinHeight: "180px",
+        source: {
+          namespace: "inner_stat_demo",
+          layout: {
+            "stat:value": {
+              label: "Requests",
+              value: "1.2k",
+              unit: "/min"
+            }
+          }
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/progress.spec.ts
+var progressSpec = component({
+  type: "progress",
+  category: "Feedback",
+  title: "Progress",
+  summary: "Progress bar.",
+  description: "Use progress to show completion as a percentage.",
+  props: {
+    value: { type: "number", default: 0, dynamic: true, description: "Progress percentage from 0 to 100." },
+    label: { type: "string", dynamic: true, description: "Progress label." },
+    icon: { type: "string", description: "Icon name shown before the label." },
+    indeterminate: { type: "boolean", default: false, dynamic: true, description: "Render an indeterminate progress state without aria-valuenow." }
+  },
+  children: noChildren,
+  examples: [example("progress", {
+    namespace: "doc_progress_typical",
+    layout: {
+      "progress:build": {
+        label: "Build progress",
+        icon: "gear-six",
+        value: 64
+      }
+    }
+  })]
+});
+
+// src/components/entries/radio-group.spec.ts
+var radioGroupSpec = component({
+  type: "radio-group",
+  category: "Input",
+  title: "Radio Group",
+  summary: "Single-choice option group.",
+  description: "Use radio-group for one-of-many choices.",
+  props: {
+    value: { type: "string", dynamic: true, description: "Current selected value." },
+    label: { type: "string", dynamic: true, description: "Group label." },
+    icon: { type: "string", description: "Icon name shown before the group label." },
+    options: { type: "array", description: "Options with label, value, and optional icon." },
+    "options[].icon": { type: "string", description: "Icon name shown before a single option label." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable every radio option in the group." },
+    orientation: { type: "string", values: ["vertical", "horizontal"], default: "vertical", description: "Radio option layout direction." },
+    haptic: { type: "boolean", default: true, description: "Enable vibration feedback on supported devices." },
+    haptics: { type: "boolean", default: true, description: "Alias for haptic." },
+    name: { type: "string", description: "Native radio group name shared by options." },
+    onchange: { type: "write-expression", description: "Write expression invoked when selection changes." }
+  },
+  children: noChildren,
+  examples: [example("radio-group", {
+    namespace: "doc_radio_group_typical",
+    layout: {
+      "radio-group:mode": {
+        label: "Mode",
+        icon: "sliders-horizontal",
+        value: "auto",
+        options: [
+          {
+            label: "Auto",
+            value: "auto",
+            icon: "sparkle"
+          },
+          {
+            label: "Manual",
+            value: "manual",
+            icon: "wrench"
+          }
+        ]
+      }
+    }
+  })]
+});
+
+// src/components/entries/row.spec.ts
+var rowSpec = component({
+  type: "row",
+  category: "Layout",
+  title: "Row",
+  summary: "Horizontal layout container.",
+  description: "Use row to place child components horizontally in field order.",
+  props: {
+    justify: { type: "string", values: ["start", "center", "end", "space-between", "space-around"], default: "start", description: "Main-axis distribution." },
+    align: { type: "string", values: ["start", "center", "end", "baseline", "stretch"], default: "center", description: "Cross-axis alignment." },
+    gap: { type: "string", dynamic: true, description: "Spacing between children." }
+  },
+  children: childContent,
+  examples: [example("row", {
+    namespace: "doc_row_typical",
+    layout: {
+      "row:toolbar": {
+        justify: "space-between",
+        "text:title": {
+          text: "Runtime status"
+        },
+        "button:refresh": {
+          label: "Refresh"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/section.spec.ts
+var sectionSpec = component({
+  type: "section",
+  category: "Content",
+  title: "Section",
+  summary: "Page section with optional heading chrome.",
+  description: "Use section to group page content with title, subtitle, and optional action link.",
+  props: {
+    title: { type: "string", dynamic: true, description: "Section title." },
+    icon: { type: "string", description: "Icon name shown before the title." },
+    eyebrow: { type: "string", dynamic: true, description: "Small label above the title." },
+    subtitle: { type: "string", dynamic: true, description: "Subtitle text below the title." },
+    actionLabel: { type: "string", dynamic: true, description: "Optional action link label." },
+    actionHref: { type: "string", description: "Optional action link target." }
+  },
+  children: childContent,
+  examples: [example("section", {
+    namespace: "doc_section_typical",
+    layout: {
+      "section:overview": {
+        eyebrow: "Dashboard",
+        title: "Runtime overview",
+        icon: "chart-bar",
+        subtitle: "This section groups the most important state.",
+        "stat:latency": {
+          label: "Latency",
+          value: "42",
+          unit: "ms"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/select.spec.ts
+var selectSpec = component({
+  type: "select",
+  category: "Input",
+  title: "Select",
+  summary: "Dropdown selection input.",
+  description: "Use select for compact single-choice selection from an option list.",
+  props: {
+    label: { type: "string", dynamic: true, description: "Select label." },
+    icon: { type: "string", description: "Icon name shown before the top label." },
+    value: { type: "string", dynamic: true, description: "Current selected value." },
+    options: { type: "array", description: "Options with label, value, and optional icon." },
+    "options[].icon": { type: "string", description: "Icon name shown before an option label." },
+    placeholder: { type: "string", description: "Placeholder shown when no value is selected." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable the select trigger and native select." },
+    required: { type: "boolean", default: false, dynamic: true, description: "Require a non-placeholder value in the native select." },
+    variant: { type: "string", values: ["default", "toolbar"], default: "default", description: "Select surface variant." },
+    onchange: { type: "write-expression", description: "Write expression invoked when selection changes." }
+  },
+  children: noChildren,
+  examples: [example("select", {
+    namespace: "doc_select_typical",
+    layout: {
+      "select:env": {
+        label: "Environment",
+        icon: "server",
+        value: "prod",
+        options: [
+          {
+            label: "Development",
+            value: "dev",
+            icon: "code"
+          },
+          {
+            label: "Production",
+            value: "prod",
+            icon: "rocket-launch"
+          }
+        ]
+      }
+    }
+  })]
+});
+
+// src/components/entries/slider.spec.ts
+var sliderSpec = component({
+  type: "slider",
+  category: "Input",
+  title: "Slider",
+  summary: "Numeric range input.",
+  description: "Use slider for bounded numeric adjustments such as volume, brightness, or thresholds.",
+  props: {
+    label: { type: "string", dynamic: true, description: "Slider label." },
+    icon: { type: "string", description: "Icon name shown before the label." },
+    value: { type: "number", default: 0, dynamic: true, description: "Current numeric value." },
+    min: { type: "number", default: 0, dynamic: true, description: "Minimum value." },
+    max: { type: "number", default: 100, dynamic: true, description: "Maximum value." },
+    step: { type: "number", default: 1, dynamic: true, description: "Step interval." },
+    unit: { type: "string", dynamic: true, description: "Unit shown after the value." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable the range input." },
+    orientation: { type: "string", values: ["horizontal", "vertical"], default: "horizontal", description: "Slider orientation metadata used for styling." },
+    haptic: { type: "boolean", default: true, description: "Enable vibration feedback on supported devices." },
+    haptics: { type: "boolean", default: true, description: "Alias for haptic." },
+    onchange: { type: "write-expression", description: "Write expression invoked when the value changes." }
+  },
+  children: noChildren,
+  examples: [example("slider", {
+    namespace: "doc_slider_typical",
+    layout: {
+      "slider:volume": {
+        label: "Volume",
+        icon: "speaker-high",
+        value: 42,
+        min: 0,
+        max: 100,
+        step: 1,
+        unit: "%"
+      }
+    }
+  })]
+});
+
+// src/components/entries/stat.spec.ts
+var statSpec = component({
+  type: "stat",
+  category: "Display",
+  title: "Stat",
+  summary: "Metric display.",
+  description: "Use stat to present a labeled metric value with optional unit and semantic tone.",
+  props: {
+    label: { type: "string", dynamic: true, description: "Metric label." },
+    icon: { type: "string", description: "Icon name shown before the label." },
+    value: { type: "string | number", dynamic: true, description: "Metric value." },
+    unit: { type: "string", dynamic: true, description: "Unit shown after the value." },
+    tone: { type: "string", values: semanticTones, description: "Optional semantic tone." },
+    animateInitial: { type: "boolean", default: false, description: "Animate the initial rendered value." }
+  },
+  children: noChildren,
+  examples: [example("stat", {
+    namespace: "doc_stat_typical",
+    layout: {
+      "grid:stats": {
+        columns: 2,
+        "stat:requests": {
+          label: "Requests",
+          icon: "activity",
+          value: "1.2k",
+          unit: "/min"
+        },
+        "stat:success": {
+          label: "Success",
+          icon: "check-circle",
+          value: "98.4",
+          unit: "%",
+          tone: "success"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/submit.spec.ts
+var submitSpec = component({
+  type: "submit",
+  category: "Action",
+  title: "Submit",
+  summary: "ToolHost submit and ignore controls.",
+  description: "Use submit inside tool templates to return selected state fields to the host.",
+  props: {
+    submitLabel: { type: "string", default: "Submit", description: "Submit button text." },
+    ignoreLabel: { type: "string", default: "Ignore", description: "Ignore button text." },
+    returnKeys: { type: "string[]", description: "State field paths returned to ToolHost." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable submit action." }
+  },
+  children: noChildren,
+  examples: [example("submit", {
+    namespace: "doc_submit_typical",
+    layout: {
+      "column:tool": {
+        "input:title": {
+          value: "Release note",
+          placeholder: "Title"
+        },
+        "submit:done": {
+          submitLabel: "Submit",
+          ignoreLabel: "Ignore",
+          returnKeys: [
+            "title"
+          ]
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/switch.spec.ts
+var switchSpec = component({
+  type: "switch",
+  category: "Input",
+  title: "Switch",
+  summary: "Boolean switch input.",
+  description: "Use switch for an on/off setting.",
+  props: {
+    enabled: { type: "boolean", default: false, dynamic: true, description: "Enabled state." },
+    label: { type: "string", dynamic: true, description: "Switch label." },
+    icon: { type: "string", description: "Icon name shown before the visible label." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable the switch." },
+    haptic: { type: "boolean", default: true, description: "Enable vibration feedback on supported devices." },
+    haptics: { type: "boolean", default: true, description: "Alias for haptic." },
+    onchange: { type: "write-expression", description: "Write expression invoked when enabled state changes." }
+  },
+  children: noChildren,
+  examples: [example("switch", {
+    namespace: "doc_switch_typical",
+    layout: {
+      "switch:feature": {
+        enabled: true,
+        label: "Enable sync",
+        icon: "arrows-clockwise"
+      }
+    }
+  })]
+});
+
+// src/components/entries/table.spec.ts
+var tableSpec = component({
+  type: "table",
+  category: "Data",
+  title: "Table",
+  summary: "Simple data table.",
+  description: "Use table to render rows of keyed data against a column definition.",
+  props: {
+    columns: { type: "array", description: "Column definitions with key, label, and optional icon." },
+    "columns[].icon": { type: "string", description: "Icon name shown before a column label." },
+    rows: { type: "array", description: "Row data objects keyed by column key." },
+    items: { type: "array", description: "Alias for rows." }
+  },
+  children: noChildren,
+  examples: [example("table", {
+    namespace: "doc_table_typical",
+    layout: {
+      "table:routes": {
+        columns: [
+          {
+            key: "name",
+            label: "Name",
+            icon: "text-t"
+          },
+          {
+            key: "status",
+            label: "Status",
+            icon: "check-circle"
+          }
+        ],
+        rows: [
+          {
+            name: "Parse",
+            status: "ready"
+          },
+          {
+            name: "Publish",
+            status: "pending"
+          }
+        ]
+      }
+    }
+  })]
+});
+
+// src/components/entries/tabs.spec.ts
+var tabsSpec = component({
+  type: "tabs",
+  category: "Navigation",
+  title: "Tabs",
+  summary: "Tabbed view switcher.",
+  description: "Use tabs to switch between named content panels.",
+  props: {
+    value: { type: "string", dynamic: true, description: "Current active tab value." },
+    tabs: { type: "array", description: "Tab definitions with value, label, content, icon, and iconOnly." },
+    "tabs[].icon": { type: "string", description: "Icon name shown before a tab trigger label." },
+    "tabs[].iconOnly": { type: "boolean", description: "Show only the tab icon while retaining label as accessible text." },
+    orientation: { type: "string", values: ["horizontal", "vertical"], default: "horizontal", description: "Tab list orientation." },
+    onchange: { type: "write-expression", description: "Write expression invoked when the active tab changes." }
+  },
+  children: noChildren,
+  examples: [example("tabs", {
+    namespace: "doc_tabs_typical",
+    layout: {
+      "tabs:main": {
+        value: "overview",
+        tabs: [
+          {
+            value: "overview",
+            label: "Overview"
+          },
+          {
+            value: "settings",
+            label: "Settings"
+          }
+        ]
+      }
+    }
+  })]
+});
+
+// src/components/entries/text.spec.ts
+var textSpec = component({
+  type: "text",
+  category: "Display",
+  title: "Text",
+  summary: "Plain text display.",
+  description: "Use text for short static or dynamic copy inside SlexKit layouts.",
+  props: {
+    text: { type: "string", dynamic: true, description: "Displayed text." },
+    content: { type: "string", dynamic: true, description: "Alias for text." },
+    label: { type: "string", dynamic: true, description: "Alias for text." },
+    variant: { type: "string", values: ["default", "muted"], default: "default", description: "Text visual variant." },
+    class: { type: "string", description: "Additional host-controlled CSS class." }
+  },
+  children: noChildren,
+  examples: [example("text", {
+    namespace: "doc_text_typical",
+    layout: {
+      "text:status": {
+        text: "System is healthy"
+      }
+    }
+  })]
+});
+
+// src/components/entries/toast.spec.ts
+var toastSpec = component({
+  type: "toast",
+  category: "Feedback",
+  title: "Toast",
+  summary: "Transient notification.",
+  description: "Use toast to show an inline notification with semantic status.",
+  props: {
+    title: { type: "string", dynamic: true, description: "Toast title." },
+    heading: { type: "string", dynamic: true, description: "Alias for title." },
+    label: { type: "string", dynamic: true, description: "Alias for title." },
+    icon: { type: "string", description: "Icon name shown at the left of the toast." },
+    description: { type: "string", dynamic: true, description: "Toast body text." },
+    text: { type: "string", dynamic: true, description: "Alias for description." },
+    message: { type: "string", dynamic: true, description: "Alias for description." },
+    content: { type: "string", dynamic: true, description: "Alias for description." },
+    type: { type: "string", values: ["info", "success", "warning", "danger"], default: "info", description: "Semantic notification type." },
+    tone: { type: "string", values: ["info", "success", "warning", "danger"], default: "info", description: "Alias for type." },
+    duration: { type: "number", description: "Auto-hide delay in milliseconds." },
+    dismissable: { type: "boolean", default: true, description: "Show a close button." },
+    dismissible: { type: "boolean", default: true, description: "Alias for dismissable." },
+    closeLabel: { type: "string", default: "Close notification", description: "Accessible close button label." },
+    closeAriaLabel: { type: "string", description: "Alias for closeLabel." }
+  },
+  children: noChildren,
+  examples: [example("toast", {
+    namespace: "doc_toast_typical",
+    layout: {
+      "toast:saved": {
+        type: "success",
+        title: "Saved",
+        icon: "check-circle",
+        description: "Changes have been written."
+      }
+    }
+  })]
+});
+
+// src/components/entries/specs.ts
+var componentSpecs = [
+  accordionSpec,
+  badgeSpec,
+  buttonSpec,
+  calloutSpec,
+  cardSpec,
+  checkboxSpec,
+  codeBlockSpec,
+  collapsibleSpec,
+  columnSpec,
+  dividerSpec,
+  gridSpec,
+  iconSpec,
+  inputSpec,
+  linkSpec,
+  playgroundSpec,
+  progressSpec,
+  radioGroupSpec,
+  rowSpec,
+  sectionSpec,
+  selectSpec,
+  sliderSpec,
+  statSpec,
+  submitSpec,
+  switchSpec,
+  tableSpec,
+  tabsSpec,
+  textSpec,
+  toastSpec
+];
+export {
+  componentSpecs
+};