@teseor/css 1.0.0

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

@@ -0,0 +1,59 @@
+{
+  "id": "breadcrumb",
+  "type": "component",
+  "title": "Breadcrumb",
+  "description": "Navigation hierarchy showing current page location in site structure.",
+  "api": "./breadcrumb.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<nav class=\"ui-breadcrumb\" aria-label=\"Breadcrumb\"><ol class=\"ui-breadcrumb\"><li class=\"ui-breadcrumb__item\"><a href=\"#\" class=\"ui-breadcrumb__link\">Home</a></li><li class=\"ui-breadcrumb__item\"><a href=\"#\" class=\"ui-breadcrumb__link\">Products</a></li><li class=\"ui-breadcrumb__item\"><span class=\"ui-breadcrumb__current\" aria-current=\"page\">Shoes</span></li></ol></nav>",
+          "code": "<nav aria-label=\"Breadcrumb\">\n  <ol class=\"ui-breadcrumb\">\n    <li class=\"ui-breadcrumb__item\">\n      <a href=\"#\" class=\"ui-breadcrumb__link\">Home</a>\n    </li>\n    <li class=\"ui-breadcrumb__item\">\n      <a href=\"#\" class=\"ui-breadcrumb__link\">Products</a>\n    </li>\n    <li class=\"ui-breadcrumb__item\">\n      <span aria-current=\"page\">Shoes</span>\n    </li>\n  </ol>\n</nav>"
+        }
+      ]
+    },
+    {
+      "title": "With Icons",
+      "examples": [
+        {
+          "html": "<nav aria-label=\"Breadcrumb\"><ol class=\"ui-breadcrumb\"><li class=\"ui-breadcrumb__item\"><a href=\"#\" class=\"ui-breadcrumb__link\"><svg class=\"ui-icon ui-icon--sm\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"/></svg></a></li><li class=\"ui-breadcrumb__item\"><a href=\"#\" class=\"ui-breadcrumb__link\">Settings</a></li><li class=\"ui-breadcrumb__item\"><span class=\"ui-breadcrumb__current\" aria-current=\"page\">Profile</span></li></ol></nav>",
+          "code": "<ol class=\"ui-breadcrumb\">\n  <li class=\"ui-breadcrumb__item\">\n    <a href=\"#\" class=\"ui-breadcrumb__link\">\n      <svg class=\"ui-icon\">...</svg>\n    </a>\n  </li>\n  ...\n</ol>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-breadcrumb-height",
+      "default": "var(--ui-row-1)",
+      "description": "Container height"
+    },
+    {
+      "token": "--ui-breadcrumb-gap",
+      "default": "var(--unit)",
+      "description": "Gap between items"
+    },
+    {
+      "token": "--ui-breadcrumb-separator",
+      "default": "\"/\"",
+      "description": "Separator character"
+    },
+    {
+      "token": "--ui-breadcrumb-separator-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Separator color"
+    },
+    {
+      "token": "--ui-breadcrumb-link-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Link color"
+    },
+    {
+      "token": "--ui-breadcrumb-current-color",
+      "default": "var(--ui-color-text)",
+      "description": "Current page color"
+    }
+  ]
+}

package/src/04-components/breadcrumb/breadcrumb.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, 'breadcrumb.docs.json');
+
+test.describe('breadcrumb visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'breadcrumb');
+    await saveForLostPixel(page, 'breadcrumb');
+    await expect(page.locator('body')).toHaveScreenshot('breadcrumb.visual.png');
+  });
+});

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

@@ -0,0 +1,77 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Breadcrumb - navigation hierarchy
+// Shows current page location in site structure
+
+@layer components.tokens {
+  .breadcrumb {
+    --_height: var(--ui-breadcrumb-height, var(--ui-row-1, #{t.$row}));
+    --_gap: var(--ui-breadcrumb-gap, calc(#{t.$unit} * 1));
+    --_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));
+    --_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));
+    --_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text));
+  }
+}
+
+@layer components.styles {
+  .breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--_gap);
+
+    block-size: var(--_height);
+    padding: 0;
+    margin: 0;
+
+    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    line-height: 1;
+
+    list-style: none;
+  }
+
+  .breadcrumb__item {
+    display: flex;
+    align-items: center;
+    gap: var(--_gap);
+
+    block-size: var(--_height);
+  }
+
+  // Separator after each item except last
+  .breadcrumb__item:not(:last-child)::after {
+
+    content: var(--ui-breadcrumb-separator, "/");
+
+    color: var(--_separator-color);
+  }
+
+  .breadcrumb__link {
+    text-decoration: none;
+    color: var(--_link-color);
+
+    transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+
+    &:hover {
+      text-decoration: underline;
+      color: var(--ui-color-primary);
+    }
+  }
+
+  // Current page (last item)
+  .breadcrumb__item:last-child .breadcrumb__link,
+  .breadcrumb__current {
+    color: var(--_current-color);
+
+    pointer-events: none;
+  }
+
+  // Collapsed state - use data attribute on items to hide
+  .breadcrumb__item--hidden {
+    display: none;
+  }
+
+  .breadcrumb__ellipsis {
+    color: var(--_separator-color);
+  }
+}

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

@@ -0,0 +1,138 @@
+{
+  "name": "button",
+  "element": "button",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "variant": {
+      "values": ["secondary", "ghost", "outline", "danger", "link"]
+    },
+    "icon": {
+      "type": "boolean"
+    },
+    "radius": {
+      "values": ["radius-none", "radius-sm", "radius-lg", "radius-full"]
+    },
+    "block": {
+      "type": "boolean"
+    },
+    "loading": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-button-height",
+      "default": "var(--ui-row-2)"
+    },
+    {
+      "name": "--ui-button-padding-x",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-button-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-button-font-weight",
+      "default": "var(--ui-weight-medium)"
+    },
+    {
+      "name": "--ui-button-radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-button-bg",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-button-bg-hover",
+      "default": "var(--ui-color-primary-dark)"
+    },
+    {
+      "name": "--ui-button-text",
+      "default": "var(--ui-color-text-inverse)"
+    },
+    {
+      "name": "--ui-button-height-sm",
+      "default": "var(--row)"
+    },
+    {
+      "name": "--ui-button-font-size-sm",
+      "default": "var(--ui-font-size-xs)"
+    },
+    {
+      "name": "--ui-button-height-lg",
+      "default": "var(--row)"
+    },
+    {
+      "name": "--ui-button-padding-x-lg",
+      "default": "var(--ui-space-3)"
+    },
+    {
+      "name": "--ui-button-font-size-lg",
+      "default": "var(--ui-font-size-md)"
+    },
+    {
+      "name": "--ui-button-secondary-bg",
+      "default": "var(--ui-color-bg-muted)"
+    },
+    {
+      "name": "--ui-button-secondary-bg-hover",
+      "default": "var(--ui-color-border-strong)"
+    },
+    {
+      "name": "--ui-button-secondary-text",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-button-ghost-bg",
+      "default": "transparent"
+    },
+    {
+      "name": "--ui-button-ghost-bg-hover",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-button-ghost-text",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-button-outline-bg",
+      "default": "transparent"
+    },
+    {
+      "name": "--ui-button-outline-bg-hover",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-button-outline-text",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-button-outline-text-hover",
+      "default": "var(--ui-color-text-inverse)"
+    },
+    {
+      "name": "--ui-button-outline-border",
+      "default": "var(--ui-border-width-sm)"
+    },
+    {
+      "name": "--ui-button-danger-bg",
+      "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-button-danger-bg-hover",
+      "default": "#{t.$color-danger-dark}"
+    },
+    {
+      "name": "--ui-button-link-text",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-button-link-text-hover",
+      "default": "var(--ui-color-primary-dark)"
+    }
+  ]
+}

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

@@ -0,0 +1,75 @@
+{
+  "api": "./button.api.json",
+  "description": "Buttons trigger actions. Use primary for main CTA, secondary for less important actions.",
+  "modifiers": {
+    "size": {
+      "usage": "Default is 32px (2 rows). Use small for dense UIs, large for prominent CTAs."
+    },
+    "variant": {
+      "usage": "Primary for main actions. Secondary for less important. Outline for subtle. Ghost for toolbar. Danger for destructive. Link for inline."
+    },
+    "icon": {
+      "usage": "Square icon-only buttons. Always add aria-label for accessibility."
+    },
+    "radius": {
+      "usage": "Override border radius. Use radius-full for pill-shaped buttons."
+    },
+    "block": {
+      "usage": "Full width button. Use for mobile or form submit."
+    },
+    "loading": {
+      "usage": "Shows spinner animation. Button becomes non-interactive."
+    }
+  },
+  "sections": [
+    {
+      "title": "Icon Button",
+      "description": "Square icon-only buttons. Use with SVG icons from Lucide or similar sets.",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "button",
+              "class": "ui-button ui-button--icon ui-button--sm",
+              "html": "<svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg>"
+            },
+            {
+              "tag": "button",
+              "class": "ui-button ui-button--icon",
+              "html": "<svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14\"/><path d=\"M12 5v14\"/></svg>"
+            },
+            {
+              "tag": "button",
+              "class": "ui-button ui-button--icon ui-button--lg",
+              "html": "<svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg>"
+            }
+          ],
+          "code": "<button class=\"ui-button ui-button--icon ui-button--sm\">\n  <svg class=\"ui-icon\"><!-- x icon --></svg>\n</button>\n<button class=\"ui-button ui-button--icon\">\n  <svg class=\"ui-icon\"><!-- plus icon --></svg>\n</button>\n<button class=\"ui-button ui-button--icon ui-button--lg\">\n  <svg class=\"ui-icon\"><!-- search icon --></svg>\n</button>"
+        }
+      ]
+    },
+    {
+      "title": "With Icon",
+      "description": "Buttons with icon and text. Use ui-button__icon element with --start or --end modifier.",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "button",
+              "class": "ui-button",
+              "html": "<svg class=\"ui-icon ui-button__icon ui-button__icon--start\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14\"/><path d=\"M12 5v14\"/></svg> Add Item"
+            },
+            {
+              "tag": "button",
+              "class": "ui-button ui-button--secondary",
+              "html": "Next <svg class=\"ui-icon ui-button__icon ui-button__icon--end\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"m9 18 6-6-6-6\"/></svg>"
+            }
+          ],
+          "code": "<button class=\"ui-button\">\n  <svg class=\"ui-icon ui-button__icon ui-button__icon--start\"><!-- plus --></svg>\n  Add Item\n</button>\n<button class=\"ui-button ui-button--secondary\">\n  Next\n  <svg class=\"ui-icon ui-button__icon ui-button__icon--end\"><!-- chevron-right --></svg>\n</button>"
+        }
+      ]
+    }
+  ]
+}

package/src/04-components/button/button.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, 'button.docs.json');
+
+test.describe('button visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'button');
+    await saveForLostPixel(page, 'button');
+    await expect(page.locator('body')).toHaveScreenshot('button.visual.png');
+  });
+});

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

@@ -0,0 +1,222 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component button
+// @element button
+
+// Token definitions - what makes each variant
+@layer components.tokens {
+  .button {
+    --_height: var(--ui-button-height, var(--ui-row-2, #{t.$row-2}));
+    --_padding-x: var(--ui-button-padding-x, var(--ui-space-2, #{t.$space-2}));
+    --_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_radius: var(--ui-button-radius, var(--ui-radius-md, #{t.$radius-md}));
+    --_bg: var(--ui-button-bg, var(--ui-color-primary, #{t.$color-primary}));
+    --_bg-hover: var(--ui-button-bg-hover, var(--ui-color-primary-dark, #{t.$color-primary-dark}));
+    --_text: var(--ui-button-text, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+  }
+
+  // @modifier size
+  .button--sm {
+    --_height: var(--ui-button-height-sm, calc(var(--row, #{t.$row}) * 1.5));
+    --_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+  }
+
+  .button--lg {
+    --_height: var(--ui-button-height-lg, calc(var(--row, #{t.$row}) * 2.5));
+    --_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, #{t.$space-3}));
+    --_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+
+  // @modifier variant
+  .button--secondary {
+    --_bg: var(--ui-button-secondary-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_bg-hover: var(--ui-button-secondary-bg-hover, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_text: var(--ui-button-secondary-text, var(--ui-color-text, #{t.$color-text}));
+  }
+
+  .button--ghost {
+    --_bg: var(--ui-button-ghost-bg, transparent);
+    --_bg-hover: var(--ui-button-ghost-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_text: var(--ui-button-ghost-text, var(--ui-color-primary, #{t.$color-primary}));
+  }
+
+  .button--outline {
+    --_bg: var(--ui-button-outline-bg, transparent);
+    --_bg-hover: var(--ui-button-outline-bg-hover, var(--ui-color-primary, #{t.$color-primary}));
+    --_text: var(--ui-button-outline-text, var(--ui-color-primary, #{t.$color-primary}));
+    --_text-hover: var(--ui-button-outline-text-hover, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+    --_border: var(--ui-button-outline-border, var(--ui-border-width-sm, #{t.$border-width-sm}) solid currentColor);
+  }
+
+  .button--danger {
+    --_bg: var(--ui-button-danger-bg, var(--ui-color-danger, #{t.$color-danger}));
+    --_bg-hover: var(--ui-button-danger-bg-hover, #{t.$color-danger-dark});
+  }
+
+  .button--link {
+    --_bg: transparent;
+    --_bg-hover: transparent;
+    --_text: var(--ui-button-link-text, var(--ui-color-primary, #{t.$color-primary}));
+    --_text-hover: var(--ui-button-link-text-hover, var(--ui-color-primary-dark, #{t.$color-primary-dark}));
+    --_height: auto;
+    --_padding-x: 0;
+    --_radius: 0;
+  }
+
+  // @modifier boolean icon
+  .button--icon {
+    --_padding-x: 0;
+  }
+
+  // @modifier radius
+  .button--radius-none {
+    --_radius: 0;
+  }
+
+  .button--radius-sm {
+    --_radius: var(--ui-radius-sm, #{t.$radius-sm});
+  }
+
+  .button--radius-lg {
+    --_radius: var(--ui-radius-lg, #{t.$radius-lg});
+  }
+
+  .button--radius-full {
+    --_radius: 624.9375rem; // large value for pill shape
+  }
+
+  // @modifier boolean block
+  // @modifier boolean loading
+}
+
+// Implementation - structural styles
+@layer components.styles {
+  .button {
+    // Layout
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-space-1, #{t.$space-1});
+
+    // Size
+    block-size: var(--_height);
+    padding-inline: var(--_padding-x);
+
+    // Visual
+    margin: 0;
+
+    // Typography
+    font-family: var(--ui-font-sans, #{t.$font-sans});
+    font-size: var(--_font-size);
+    font-weight: var(--_font-weight);
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    color: var(--_text);
+
+    background: var(--_bg);
+    border: var(--_border, none);
+    border-radius: var(--_radius);
+    cursor: pointer;
+
+    // Transitions
+    transition:
+      background-color var(--ui-duration-base) var(--ui-ease-default),
+      color var(--ui-duration-base) var(--ui-ease-default),
+      transform var(--ui-duration-fast) var(--ui-ease-default);
+
+    // States - modifiers mirror pseudo-classes for testing/docs
+    &:hover,
+    &--hover {
+      color: var(--_text-hover, var(--_text));
+
+      background: var(--_bg-hover);
+    }
+
+    &:focus-visible,
+    &--focus {
+      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid var(--ui-color-focus, #{t.$color-focus});
+      outline-offset: var(--ui-border-width-md, #{t.$border-width-md});
+    }
+
+    &:active,
+    &--active {
+      transform: scale(0.98);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background: var(--_bg);
+        transform: none;
+      }
+    }
+
+    // Icon-only button
+    &--icon {
+      inline-size: var(--_height);
+    }
+
+    // Full width
+    &--block {
+      inline-size: 100%;
+    }
+
+    // Link variant underline
+    &--link {
+      text-decoration: underline;
+      text-underline-offset: var(--ui-space-quarter);
+
+      &:hover {
+        text-decoration-thickness: var(--ui-space-quarter);
+      }
+    }
+
+    // Icon elements
+    &__icon {
+      flex-shrink: 0;
+
+      block-size: 1em;
+      inline-size: 1em;
+
+      &--start {
+        order: -1;
+      }
+
+      &--end {
+        order: 1;
+      }
+    }
+
+    // Loading state
+    &--loading {
+      position: relative;
+
+      opacity: 0.7;
+      pointer-events: none;
+
+      &::after {
+        content: '';
+        position: absolute;
+
+        block-size: 1em;
+        inline-size: 1em;
+
+        border: 2px solid currentcolor;
+        border-radius: 50%;
+
+        animation: button-spin 0.6s linear infinite;
+        border-inline-end-color: transparent;
+      }
+    }
+  }
+
+  @keyframes button-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/src/04-components/button-group/button-group.api.json

@@ -0,0 +1,11 @@
+{
+  "name": "button-group",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-button-group-radius",
+      "default": "var(--ui-radius-md)"
+    }
+  ]
+}

package/src/04-components/button-group/button-group.docs.json

@@ -0,0 +1,52 @@
+{
+  "id": "button-group",
+  "type": "component",
+  "title": "Button Group",
+  "description": "Container for grouped buttons that share borders and have connected appearance.",
+  "api": "./button-group.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<div class=\"ui-button-group\" role=\"group\"><button class=\"ui-button ui-button--outline\">Left</button><button class=\"ui-button ui-button--outline\">Middle</button><button class=\"ui-button ui-button--outline\">Right</button></div>",
+          "code": "<div class=\"ui-button-group\" role=\"group\">\n  <button class=\"ui-button ui-button--outline\">Left</button>\n  <button class=\"ui-button ui-button--outline\">Middle</button>\n  <button class=\"ui-button ui-button--outline\">Right</button>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Primary Buttons",
+      "examples": [
+        {
+          "html": "<div class=\"ui-button-group\" role=\"group\"><button class=\"ui-button\">Save</button><button class=\"ui-button\">Save & Close</button></div>",
+          "code": "<div class=\"ui-button-group\" role=\"group\">\n  <button class=\"ui-button\">Save</button>\n  <button class=\"ui-button\">Save & Close</button>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Vertical",
+      "examples": [
+        {
+          "html": "<div class=\"ui-button-group ui-button-group--vertical\" role=\"group\"><button class=\"ui-button ui-button--outline\">Top</button><button class=\"ui-button ui-button--outline\">Middle</button><button class=\"ui-button ui-button--outline\">Bottom</button></div>",
+          "code": "<div class=\"ui-button-group ui-button-group--vertical\" role=\"group\">\n  <button class=\"ui-button ui-button--outline\">Top</button>\n  <button class=\"ui-button ui-button--outline\">Middle</button>\n  <button class=\"ui-button ui-button--outline\">Bottom</button>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Icons",
+      "examples": [
+        {
+          "html": "<div class=\"ui-button-group\" role=\"group\" aria-label=\"Text formatting\"><button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Bold\"><svg class=\"ui-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z\"/></svg></button><button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Italic\"><svg class=\"ui-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z\"/></svg></button><button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Underline\"><svg class=\"ui-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z\"/></svg></button></div>",
+          "code": "<div class=\"ui-button-group\" role=\"group\" aria-label=\"Text formatting\">\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Bold\">...</button>\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Italic\">...</button>\n  <button class=\"ui-button ui-button--outline ui-button--icon\" aria-label=\"Underline\">...</button>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-button-group-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius for first and last buttons"
+    }
+  ]
+}