@teseor/css 1.0.0

package/src/04-components/code/code.docs.json

@@ -0,0 +1,84 @@
+{
+  "id": "code",
+  "type": "component",
+  "title": "Code",
+  "description": "Inline code and code blocks with monospace font.",
+  "api": "./code.api.json",
+  "componentName": "code",
+  "sections": [
+    {
+      "title": "Inline code",
+      "examples": [
+        {
+          "title": "Default",
+          "html": "<p>Use the <code class=\"ui-code\">--space-2</code> token for padding.</p>"
+        },
+        {
+          "title": "Small (for tables)",
+          "html": "<code class=\"ui-code ui-code--sm\">--button-height</code>"
+        }
+      ]
+    },
+    {
+      "title": "Code block",
+      "examples": [
+        {
+          "title": "Default",
+          "html": "<pre class=\"ui-code-block\"><code>.button {\n  display: inline-flex;\n  align-items: center;\n}</code></pre>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-code-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Inline code font size"
+    },
+    {
+      "token": "--ui-code-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Inline code background"
+    },
+    {
+      "token": "--ui-code-padding-x",
+      "default": "var(--ui-space-1)",
+      "description": "Inline code horizontal padding"
+    },
+    {
+      "token": "--ui-code-padding-y",
+      "default": "var(--ui-space-0)",
+      "description": "Inline code vertical padding"
+    },
+    {
+      "token": "--ui-code-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Inline code border radius"
+    },
+    {
+      "token": "--ui-code-font-size-block",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Code block font size"
+    },
+    {
+      "token": "--ui-code-bg-block",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Code block background"
+    },
+    {
+      "token": "--ui-code-padding-block",
+      "default": "var(--ui-space-3)",
+      "description": "Code block padding"
+    },
+    {
+      "token": "--ui-code-radius-block",
+      "default": "var(--ui-radius-md)",
+      "description": "Code block border radius"
+    },
+    {
+      "token": "--ui-code-border-color-block",
+      "default": "var(--ui-color-border)",
+      "description": "Code block border color"
+    }
+  ]
+}

package/src/04-components/code/code.visual.spec.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'code.docs.json');
+
+test.describe('code visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'code');
+    await saveForLostPixel(page, 'code');
+    await expect(page.locator('body')).toHaveScreenshot('code.visual.png');
+  });
+});

package/src/04-components/code/index.scss

@@ -0,0 +1,64 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Token definitions
+@layer components.tokens {
+  // Inline code
+  .code {
+    --_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_bg: var(--ui-code-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_padding-x: var(--ui-code-padding-x, var(--ui-space-1, #{t.$space-1}));
+    --_padding-y: var(--ui-code-padding-y, var(--ui-space-0, #{t.$space-0}));
+    --_radius: var(--ui-code-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+  }
+
+  .code--sm {
+    --_font-size: var(--ui-font-size-xs, #{t.$font-size-xs});
+  }
+
+  // Code block
+  .code-block {
+    --_font-size: var(--ui-code-font-size-block, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_bg: var(--ui-code-bg-block, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_padding: var(--ui-code-padding-block, var(--ui-space-3, #{t.$space-3}));
+    --_radius: var(--ui-code-radius-block, var(--ui-radius-md, #{t.$radius-md}));
+    --_border-color: var(--ui-code-border-color-block, var(--ui-color-border, #{t.$color-border}));
+  }
+}
+
+// Implementation
+@layer components.styles {
+  .code {
+    padding: var(--_padding-y) var(--_padding-x);
+
+    font-family: var(--ui-font-mono, #{t.$font-mono});
+    font-size: var(--_font-size);
+    line-height: var(--ui-leading-tight-sm, #{t.$leading-tight-sm});
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+  }
+
+  .code-block {
+    display: block;
+    // Subtract border from padding to keep total on grid
+    padding: calc(var(--_padding) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+    overflow-x: auto;
+
+    font-family: var(--ui-font-mono, #{t.$font-mono});
+    font-size: var(--_font-size);
+    line-height: var(--ui-leading-tight-sm, #{t.$leading-tight-sm});
+    white-space: pre;
+
+    background: var(--_bg);
+    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border-radius: var(--_radius);
+
+    code {
+      padding: 0;
+
+      font-size: inherit;
+
+      background: none;
+    }
+  }
+}

package/src/04-components/data-list/data-list.api.json

@@ -0,0 +1,23 @@
+{
+  "name": "data-list",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-data-list-gap",
+      "default": "calc(#{t.$unit} * 2"
+    },
+    {
+      "name": "--ui-data-list-item-gap",
+      "default": "calc(#{t.$unit} * 1"
+    },
+    {
+      "name": "--ui-data-list-label-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-data-list-value-color",
+      "default": "var(--ui-color-text)"
+    }
+  ]
+}

package/src/04-components/data-list/data-list.docs.json

@@ -0,0 +1,79 @@
+{
+  "api": "./data-list.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<dl class=\"ui-data-list\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Name</dt><dd class=\"ui-data-list__value\">John Doe</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Email</dt><dd class=\"ui-data-list__value\">john@example.com</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Role</dt><dd class=\"ui-data-list__value\">Administrator</dd></div></dl>"
+        }
+      ]
+    },
+    {
+      "title": "Horizontal Layout",
+      "description": "Side-by-side label and value",
+      "examples": [
+        {
+          "html": "<dl class=\"ui-data-list ui-data-list--horizontal\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Status</dt><dd class=\"ui-data-list__value\">Active</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Created</dt><dd class=\"ui-data-list__value\">Dec 8, 2025</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Updated</dt><dd class=\"ui-data-list__value\">Dec 8, 2025</dd></div></dl>"
+        }
+      ]
+    },
+    {
+      "title": "Divided",
+      "description": "With separator lines between items",
+      "examples": [
+        {
+          "html": "<dl class=\"ui-data-list ui-data-list--divided\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Order ID</dt><dd class=\"ui-data-list__value\">#12345</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Total</dt><dd class=\"ui-data-list__value\">$99.00</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Payment</dt><dd class=\"ui-data-list__value\">Credit Card</dd></div></dl>"
+        }
+      ]
+    },
+    {
+      "title": "Striped",
+      "description": "Alternating background for readability",
+      "examples": [
+        {
+          "html": "<dl class=\"ui-data-list ui-data-list--striped\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">CPU</dt><dd class=\"ui-data-list__value\">Intel i7</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Memory</dt><dd class=\"ui-data-list__value\">16 GB</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Storage</dt><dd class=\"ui-data-list__value\">512 GB SSD</dd></div><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Display</dt><dd class=\"ui-data-list__value\">14\" Retina</dd></div></dl>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "html": "<dl class=\"ui-data-list ui-data-list--sm\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Small</dt><dd class=\"ui-data-list__value\">Compact display</dd></div></dl>",
+          "layout": "stack"
+        },
+        {
+          "html": "<dl class=\"ui-data-list\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Default</dt><dd class=\"ui-data-list__value\">Standard display</dd></div></dl>",
+          "layout": "stack"
+        },
+        {
+          "html": "<dl class=\"ui-data-list ui-data-list--lg\"><div class=\"ui-data-list__item\"><dt class=\"ui-data-list__label\">Large</dt><dd class=\"ui-data-list__value\">Spacious display</dd></div></dl>",
+          "layout": "stack"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-data-list-gap",
+      "default": "calc(var(--unit) * 2)",
+      "description": "Gap between items"
+    },
+    {
+      "token": "--ui-data-list-item-gap",
+      "default": "var(--unit)",
+      "description": "Gap between label and value"
+    },
+    {
+      "token": "--ui-data-list-label-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Label color"
+    },
+    {
+      "token": "--ui-data-list-value-color",
+      "default": "var(--ui-color-text)",
+      "description": "Value color"
+    }
+  ]
+}

package/src/04-components/data-list/data-list.visual.spec.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'data-list.docs.json');
+
+test.describe('data-list visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'data-list');
+    await saveForLostPixel(page, 'data-list');
+    await expect(page.locator('body')).toHaveScreenshot('data-list.visual.png');
+  });
+});

package/src/04-components/data-list/index.scss

@@ -0,0 +1,98 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Data-List - key-value pairs
+// Display structured data with labels and values
+
+@layer components.tokens {
+  .data-list {
+    --_gap: var(--ui-data-list-gap, calc(#{t.$unit} * 2));
+    --_item-gap: var(--ui-data-list-item-gap, calc(#{t.$unit} * 1));
+    --_label-color: var(--ui-data-list-label-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_value-color: var(--ui-data-list-value-color, var(--ui-color-text, #{t.$color-text}));
+  }
+}
+
+@layer components.styles {
+  .data-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_gap);
+
+    margin: 0;
+
+    line-height: var(--ui-row-1, #{t.$row});
+  }
+
+  .data-list__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_item-gap);
+  }
+
+  .data-list__label {
+    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    line-height: var(--ui-row-1, #{t.$row});
+    color: var(--_label-color);
+  }
+
+  .data-list__value {
+    margin: 0;
+
+    line-height: var(--ui-row-1, #{t.$row});
+    color: var(--_value-color);
+  }
+
+  // Horizontal layout (side-by-side)
+  .data-list--horizontal .data-list__item {
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: calc(#{t.$unit} * 2);
+  }
+
+  .data-list--horizontal .data-list__label {
+    flex-shrink: 0;
+  }
+
+  .data-list--horizontal .data-list__value {
+    text-align: end;
+  }
+
+  // With dividers
+  .data-list--divided .data-list__item {
+    padding-block-end: var(--_gap);
+
+    border-block-end: 1px solid var(--ui-color-border, #{t.$color-border});
+  }
+
+  .data-list--divided .data-list__item:last-child {
+    padding-block-end: 0;
+
+    border-block-end: none;
+  }
+
+  // Striped variant
+  .data-list--striped .data-list__item:nth-child(odd) {
+    padding: calc(#{t.$unit} * 1);
+
+    background: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    border-radius: var(--ui-radius-sm, #{t.$radius-sm});
+  }
+
+  // Compact size
+  .data-list--sm {
+    --_gap: calc(#{t.$unit} * 1);
+    --_item-gap: 0;
+
+    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+  }
+
+  // Large size
+  .data-list--lg {
+    --_gap: calc(#{t.$unit} * 3);
+    --_item-gap: calc(#{t.$unit} * 1);
+
+    font-size: var(--ui-font-size-lg, #{t.$font-size-lg});
+  }
+}

package/src/04-components/dialog/dialog.api.json

@@ -0,0 +1,23 @@
+{
+  "name": "dialog",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-dialog-header-padding",
+      "default": "calc(#{t.$unit} * 2"
+    },
+    {
+      "name": "--ui-dialog-body-padding",
+      "default": "calc(#{t.$unit} * 3"
+    },
+    {
+      "name": "--ui-dialog-footer-padding",
+      "default": "calc(#{t.$unit} * 2"
+    },
+    {
+      "name": "--ui-dialog-border-color",
+      "default": "var(--ui-color-border)"
+    }
+  ]
+}

package/src/04-components/dialog/dialog.docs.json

@@ -0,0 +1,58 @@
+{
+  "id": "dialog",
+  "type": "component",
+  "title": "Dialog",
+  "description": "Structured modal with header, body, and footer sections. Use with modal component for positioning.",
+  "api": "./dialog.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<div style=\"position: relative; height: 240px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-modal ui-modal--visible\" style=\"position: absolute;\"><div class=\"ui-modal__content ui-dialog\" style=\"max-height: 200px;\"><header class=\"ui-dialog__header\"><h2 class=\"ui-dialog__title\">Dialog Title</h2><button class=\"ui-button ui-button--ghost ui-button--sm ui-dialog__close\">X</button></header><div class=\"ui-dialog__body\"><p>Dialog content goes here.</p></div><footer class=\"ui-dialog__footer\"><button class=\"ui-button ui-button--ghost\">Cancel</button><button class=\"ui-button\">Confirm</button></footer></div></div></div>",
+          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content ui-dialog\">\n    <header class=\"ui-dialog__header\">\n      <h2 class=\"ui-dialog__title\">Dialog Title</h2>\n      <button class=\"ui-button ui-button--ghost ui-dialog__close\">X</button>\n    </header>\n    <div class=\"ui-dialog__body\">\n      <p>Dialog content goes here.</p>\n    </div>\n    <footer class=\"ui-dialog__footer\">\n      <button class=\"ui-button ui-button--ghost\">Cancel</button>\n      <button class=\"ui-button\">Confirm</button>\n    </footer>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Borderless",
+      "examples": [
+        {
+          "html": "<div style=\"position: relative; height: 200px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-modal ui-modal--visible\" style=\"position: absolute;\"><div class=\"ui-modal__content ui-dialog ui-dialog--borderless\" style=\"max-height: 180px;\"><header class=\"ui-dialog__header\"><h2 class=\"ui-dialog__title\">Simple Dialog</h2></header><div class=\"ui-dialog__body\"><p>Content without borders.</p></div><footer class=\"ui-dialog__footer\"><button class=\"ui-button\">OK</button></footer></div></div></div>",
+          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content ui-dialog ui-dialog--borderless\">\n    ...\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Confirmation Dialog",
+      "examples": [
+        {
+          "html": "<div style=\"position: relative; height: 200px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-modal ui-modal--sm ui-modal--visible\" style=\"position: absolute;\"><div class=\"ui-modal__content ui-dialog\"><header class=\"ui-dialog__header\"><h2 class=\"ui-dialog__title\">Delete Item?</h2></header><div class=\"ui-dialog__body\"><p>This action cannot be undone.</p></div><footer class=\"ui-dialog__footer\"><button class=\"ui-button ui-button--ghost\">Cancel</button><button class=\"ui-button ui-button--danger\">Delete</button></footer></div></div></div>",
+          "code": "<div class=\"ui-modal ui-modal--sm\">\n  <div class=\"ui-modal__content ui-dialog\">\n    <header class=\"ui-dialog__header\">\n      <h2 class=\"ui-dialog__title\">Delete Item?</h2>\n    </header>\n    <div class=\"ui-dialog__body\">\n      <p>This action cannot be undone.</p>\n    </div>\n    <footer class=\"ui-dialog__footer\">\n      <button class=\"ui-button ui-button--ghost\">Cancel</button>\n      <button class=\"ui-button ui-button--danger\">Delete</button>\n    </footer>\n  </div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-dialog-header-padding",
+      "default": "calc(var(--unit) * 2) calc(var(--unit) * 3)",
+      "description": "Header padding"
+    },
+    {
+      "token": "--ui-dialog-body-padding",
+      "default": "calc(var(--unit) * 3)",
+      "description": "Body padding"
+    },
+    {
+      "token": "--ui-dialog-footer-padding",
+      "default": "calc(var(--unit) * 2) calc(var(--unit) * 3)",
+      "description": "Footer padding"
+    },
+    {
+      "token": "--ui-dialog-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Section border color"
+    }
+  ]
+}

package/src/04-components/dialog/dialog.visual.spec.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'dialog.docs.json');
+
+test.describe('dialog visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'dialog');
+    await saveForLostPixel(page, 'dialog');
+    await expect(page.locator('body')).toHaveScreenshot('dialog.visual.png');
+  });
+});

package/src/04-components/dialog/index.scss

@@ -0,0 +1,74 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Dialog - structured modal with header, body, footer
+// Extends modal with semantic sections
+
+@layer components.tokens {
+  .dialog {
+    --_header-padding: var(--ui-dialog-header-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
+    --_body-padding: var(--ui-dialog-body-padding, calc(#{t.$unit} * 3));
+    --_footer-padding: var(--ui-dialog-footer-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
+    --_border-color: var(--ui-dialog-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
+  }
+}
+
+@layer components.styles {
+  // Dialog content extends modal content but removes default padding
+  .dialog .modal__content {
+    padding: 0;
+  }
+
+  .dialog__header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(#{t.$unit} * 2);
+
+    padding: var(--_header-padding);
+
+    border-block-end: 1px solid var(--_border-color);
+  }
+
+  .dialog__title {
+    margin: 0;
+
+    font-size: var(--ui-font-size-lg, #{t.$font-size-lg});
+    font-weight: var(--ui-weight-semibold, 600);
+    line-height: calc(#{t.$unit} * 3);
+  }
+
+  .dialog__close {
+    flex-shrink: 0;
+
+    margin-inline-start: auto;
+  }
+
+  .dialog__body {
+    flex: 1 1 auto;
+
+    padding: var(--_body-padding);
+    overflow-y: auto;
+  }
+
+  .dialog__footer {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(#{t.$unit} * 1.5);
+
+    padding: var(--_footer-padding);
+
+    border-block-start: 1px solid var(--_border-color);
+  }
+
+  // Variant without borders
+  .dialog--borderless .dialog__header {
+    border-block-end: none;
+  }
+
+  .dialog--borderless .dialog__footer {
+    border-block-start: none;
+  }
+}

package/src/04-components/disclosure/disclosure.api.json

@@ -0,0 +1,31 @@
+{
+  "name": "disclosure",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-disclosure-border-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-disclosure-border-width",
+      "default": "1px"
+    },
+    {
+      "name": "--ui-disclosure-radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-disclosure-trigger-height",
+      "default": "var(--ui-row-3)"
+    },
+    {
+      "name": "--ui-disclosure-padding-x",
+      "default": "calc(#{t.$unit} * 2"
+    },
+    {
+      "name": "--ui-disclosure-padding-y",
+      "default": "calc(#{t.$unit} * 2"
+    }
+  ]
+}

package/src/04-components/disclosure/disclosure.docs.json

@@ -0,0 +1,73 @@
+{
+  "id": "disclosure",
+  "type": "component",
+  "title": "Disclosure",
+  "description": "Expandable/collapsible content section. Uses native details/summary for accessibility without JS.",
+  "api": "./disclosure.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Click to expand<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Hidden content that expands when clicked.</p></div></details>",
+          "code": "<details class=\"ui-disclosure\">\n  <summary class=\"ui-disclosure__trigger\">\n    Click to expand\n    <span class=\"ui-disclosure__icon\">&#9662;</span>\n  </summary>\n  <div class=\"ui-disclosure__content\">\n    <p>Hidden content that expands when clicked.</p>\n  </div>\n</details>"
+        }
+      ]
+    },
+    {
+      "title": "Open by Default",
+      "examples": [
+        {
+          "html": "<details class=\"ui-disclosure\" open><summary class=\"ui-disclosure__trigger\">Already expanded<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>This content is visible by default.</p></div></details>",
+          "code": "<details class=\"ui-disclosure\" open>\n  <summary class=\"ui-disclosure__trigger\">Already expanded</summary>\n  <div class=\"ui-disclosure__content\">...</div>\n</details>"
+        }
+      ]
+    },
+    {
+      "title": "Borderless",
+      "examples": [
+        {
+          "html": "<details class=\"ui-disclosure ui-disclosure--borderless\"><summary class=\"ui-disclosure__trigger\">Borderless disclosure<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>No border around the disclosure.</p></div></details>",
+          "code": "<details class=\"ui-disclosure ui-disclosure--borderless\">\n  ...\n</details>"
+        }
+      ]
+    },
+    {
+      "title": "Animated",
+      "examples": [
+        {
+          "html": "<details class=\"ui-disclosure ui-disclosure--animate\"><summary class=\"ui-disclosure__trigger\">Animated expansion<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Content animates in when opened.</p></div></details>",
+          "code": "<details class=\"ui-disclosure ui-disclosure--animate\">\n  ...\n</details>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-disclosure-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    { "token": "--ui-disclosure-border-width", "default": "1px", "description": "Border width" },
+    {
+      "token": "--ui-disclosure-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-disclosure-trigger-height",
+      "default": "var(--ui-row-3)",
+      "description": "Trigger button height"
+    },
+    {
+      "token": "--ui-disclosure-padding-x",
+      "default": "calc(var(--unit) * 2)",
+      "description": "Horizontal padding"
+    },
+    {
+      "token": "--ui-disclosure-padding-y",
+      "default": "calc(var(--unit) * 2)",
+      "description": "Content vertical padding"
+    }
+  ]
+}