@teseor/css 1.7.0 → 1.9.0

package/src/{04-components → components}/typography/code-block/index.scss

@@ -1,23 +1,42 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component code-block
+// @element pre
+// @related code
 
 // Token definitions
 @layer components.tokens {
   .code-block {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_font-mono: var(--ui-font-mono, #{t.$font-mono});
+    --_space-4: var(--ui-space-4, #{t.$space-4});
+    --_space-2: var(--ui-space-2, #{t.$space-2});
+    // @desc Background color
     --_bg: var(--ui-code-block-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    // @desc Text color
     --_color: var(--ui-code-block-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Border color
     --_border-color: var(--ui-code-block-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Padding on all sides
     --_padding: var(--ui-code-block-padding, var(--ui-space-3, #{t.$space-3}));
+    // @desc Font size
     --_font-size: var(--ui-code-block-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Line height
     --_line-height: var(--ui-code-block-line-height, var(--ui-leading-tight-sm, #{t.$leading-tight-sm}));
+    // @desc Corner radius
     --_radius: var(--ui-code-block-radius, var(--ui-radius-md, #{t.$radius-md}));
   }
 
+  // @modifier boolean compact
   .code-block--compact {
+    // @desc Padding compact
     --_padding: var(--ui-code-block-padding-compact, var(--ui-space-1, #{t.$space-1}));
   }
 
+  // @modifier boolean line-numbers
   .code-block--line-numbers {
+    // @desc Line number color
     --_line-number-color: var(--ui-code-block-line-number-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Line number border color
     --_line-number-border-color: var(--ui-code-block-line-number-border-color, var(--ui-color-border, #{t.$color-border}));
   }
 }
@@ -27,17 +46,17 @@
   .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}));
+    padding: calc(var(--_padding) - var(--_border-width-sm));
     overflow-x: auto;
 
-    font-family: var(--ui-font-mono, #{t.$font-mono});
+    font-family: var(--_font-mono);
     font-size: var(--_font-size);
     line-height: var(--_line-height);
     white-space: pre;
     color: var(--_color);
 
     background: var(--_bg);
-    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border: var(--_border-width-sm) solid var(--_border-color);
     border-radius: var(--_radius);
   }
 
@@ -67,16 +86,16 @@
       counter-increment: line-number;
 
       box-sizing: border-box;
-      min-inline-size: var(--ui-space-4, #{t.$space-4});
-      padding-inline-end: var(--ui-space-2, #{t.$space-2});
-      margin-inline-end: var(--ui-space-2, #{t.$space-2});
+      min-inline-size: var(--_space-4);
+      padding-inline-end: var(--_space-2);
+      margin-inline-end: var(--_space-2);
 
       font-variant-numeric: tabular-nums;
 
       text-align: end;
       color: var(--_line-number-color);
 
-      border-inline-end: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_line-number-border-color);
+      border-inline-end: var(--_border-width-sm) solid var(--_line-number-border-color);
       user-select: none;
 
       &::before {

package/src/components/typography/heading/heading.api.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "heading",
+  "element": "h2",
+  "modifiers": {
+    "size": {
+      "values": ["4xl", "3xl", "2xl", "xl", "lg", "md", "sm"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-heading-font-size",
+      "default": "var(--ui-font-size-xl)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-heading-line-height",
+      "default": "var(--ui-leading-xl)",
+      "description": "Line height"
+    },
+    {
+      "name": "--ui-heading-weight",
+      "default": "var(--ui-weight-bold)",
+      "description": "Weight"
+    },
+    {
+      "name": "--ui-heading-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-heading-font-size-4xl",
+      "default": "var(--ui-font-size-4xl)",
+      "description": "Font size 4xl"
+    },
+    {
+      "name": "--ui-heading-line-height-4xl",
+      "default": "var(--ui-leading-4xl)",
+      "description": "Line height 4xl"
+    },
+    {
+      "name": "--ui-heading-font-size-3xl",
+      "default": "var(--ui-font-size-3xl)",
+      "description": "Font size 3xl"
+    },
+    {
+      "name": "--ui-heading-line-height-3xl",
+      "default": "var(--ui-leading-3xl)",
+      "description": "Line height 3xl"
+    },
+    {
+      "name": "--ui-heading-font-size-2xl",
+      "default": "var(--ui-font-size-2xl)",
+      "description": "Font size 2xl"
+    },
+    {
+      "name": "--ui-heading-line-height-2xl",
+      "default": "var(--ui-leading-2xl)",
+      "description": "Line height 2xl"
+    },
+    {
+      "name": "--ui-heading-font-size-xl",
+      "default": "var(--ui-font-size-xl)",
+      "description": "Font size at extra-large size"
+    },
+    {
+      "name": "--ui-heading-line-height-xl",
+      "default": "var(--ui-leading-xl)",
+      "description": "Line height at extra-large size"
+    },
+    {
+      "name": "--ui-heading-font-size-lg",
+      "default": "var(--ui-font-size-lg)",
+      "description": "Font size at large size"
+    },
+    {
+      "name": "--ui-heading-line-height-lg",
+      "default": "var(--ui-leading-lg)",
+      "description": "Line height at large size"
+    },
+    {
+      "name": "--ui-heading-font-size-md",
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at medium size"
+    },
+    {
+      "name": "--ui-heading-line-height-md",
+      "default": "var(--ui-leading-tight-md)",
+      "description": "Line height at medium size"
+    },
+    {
+      "name": "--ui-heading-font-size-sm",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size at small size"
+    },
+    {
+      "name": "--ui-heading-line-height-sm",
+      "default": "var(--ui-leading-tight-sm)",
+      "description": "Line height at small size"
+    }
+  ]
+}

package/src/{04-components → components}/typography/heading/heading.docs.json

@@ -9,8 +9,16 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
-          "html": "<h1 class=\"ui-heading ui-heading--4xl\">Heading 4xl</h1><h2 class=\"ui-heading ui-heading--3xl\">Heading 3xl</h2><h3 class=\"ui-heading ui-heading--2xl\">Heading 2xl</h3><h4 class=\"ui-heading ui-heading--xl\">Heading xl</h4><h5 class=\"ui-heading ui-heading--lg\">Heading lg</h5><h6 class=\"ui-heading ui-heading--md\">Heading md</h6><p class=\"ui-heading ui-heading--sm\">Heading sm</p>",
+          "layout": "column",
+          "items": [
+            { "tag": "h1", "class": "ui-heading ui-heading--4xl", "text": "Heading 4xl" },
+            { "tag": "h2", "class": "ui-heading ui-heading--3xl", "text": "Heading 3xl" },
+            { "tag": "h3", "class": "ui-heading ui-heading--2xl", "text": "Heading 2xl" },
+            { "tag": "h4", "class": "ui-heading ui-heading--xl", "text": "Heading xl" },
+            { "tag": "h5", "class": "ui-heading ui-heading--lg", "text": "Heading lg" },
+            { "tag": "h6", "class": "ui-heading ui-heading--md", "text": "Heading md" },
+            { "tag": "p", "class": "ui-heading ui-heading--sm", "text": "Heading sm" }
+          ],
           "code": "<h1 class=\"ui-heading ui-heading--4xl\">4xl</h1>\n<h2 class=\"ui-heading ui-heading--3xl\">3xl</h2>\n<h3 class=\"ui-heading ui-heading--2xl\">2xl</h3>\n<h4 class=\"ui-heading ui-heading--xl\">xl</h4>\n<h5 class=\"ui-heading ui-heading--lg\">lg</h5>\n<h6 class=\"ui-heading ui-heading--md\">md</h6>\n<p class=\"ui-heading ui-heading--sm\">sm</p>"
         }
       ]
@@ -20,8 +28,11 @@
       "description": "Use any size with any semantic level.",
       "examples": [
         {
-          "layout": "stack",
-          "html": "<h2 class=\"ui-heading ui-heading--3xl\">h2 styled as 3xl</h2><h1 class=\"ui-heading ui-heading--lg\">h1 styled as lg</h1>",
+          "layout": "column",
+          "items": [
+            { "tag": "h2", "class": "ui-heading ui-heading--3xl", "text": "h2 styled as 3xl" },
+            { "tag": "h1", "class": "ui-heading ui-heading--lg", "text": "h1 styled as lg" }
+          ],
           "code": "<h2 class=\"ui-heading ui-heading--3xl\">h2 as 3xl</h2>\n<h1 class=\"ui-heading ui-heading--lg\">h1 as lg</h1>"
         }
       ]
@@ -31,8 +42,19 @@
       "description": "Combine with text utilities for color and other styles.",
       "examples": [
         {
-          "layout": "stack",
-          "html": "<h2 class=\"ui-heading ui-heading--2xl ui-text-muted\">Muted heading</h2><h2 class=\"ui-heading ui-heading--2xl ui-text-primary\">Primary heading</h2>",
+          "layout": "column",
+          "items": [
+            {
+              "tag": "h2",
+              "class": "ui-heading ui-heading--2xl ui-text-muted",
+              "text": "Muted heading"
+            },
+            {
+              "tag": "h2",
+              "class": "ui-heading ui-heading--2xl ui-text-primary",
+              "text": "Primary heading"
+            }
+          ],
           "code": "<h2 class=\"ui-heading ui-text-muted\">Muted</h2>\n<h2 class=\"ui-heading ui-text-primary\">Primary</h2>"
         }
       ]

package/src/{04-components → components}/typography/heading/index.scss

@@ -1,49 +1,67 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component heading
 // @element h2
 
 @layer components.tokens {
   .heading {
+    // @desc Font size
     --_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, #{t.$font-size-xl}));
+    // @desc Line height
     --_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, #{t.$leading-xl}));
+    // @desc Weight
     --_weight: var(--ui-heading-weight, var(--ui-weight-bold, #{t.$weight-bold}));
+    // @desc Text color
     --_color: var(--ui-heading-color, var(--ui-color-text, #{t.$color-text}));
   }
 
   // @modifier size
   .heading--4xl {
+    // @desc Font size 4xl
     --_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, #{t.$font-size-4xl}));
+    // @desc Line height 4xl
     --_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, #{t.$leading-4xl}));
   }
 
   .heading--3xl {
+    // @desc Font size 3xl
     --_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, #{t.$font-size-3xl}));
+    // @desc Line height 3xl
     --_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, #{t.$leading-3xl}));
   }
 
   .heading--2xl {
+    // @desc Font size 2xl
     --_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, #{t.$font-size-2xl}));
+    // @desc Line height 2xl
     --_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, #{t.$leading-2xl}));
   }
 
   .heading--xl {
+    // @desc Font size at extra-large size
     --_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, #{t.$font-size-xl}));
+    // @desc Line height at extra-large size
     --_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, #{t.$leading-xl}));
   }
 
   .heading--lg {
+    // @desc Font size at large size
     --_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, #{t.$font-size-lg}));
+    // @desc Line height at large size
     --_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, #{t.$leading-lg}));
   }
 
   .heading--md {
+    // @desc Font size at medium size
     --_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, #{t.$font-size-md}));
+    // @desc Line height at medium size
     --_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, #{t.$leading-tight-md}));
   }
 
   .heading--sm {
+    // @desc Font size at small size
     --_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Line height at small size
     --_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, #{t.$leading-tight-sm}));
   }
 

package/src/{04-components → components}/typography/kbd/index.scss

@@ -1,14 +1,26 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component kbd
+// @element kbd
 
 @layer components.tokens {
   .kbd {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_space-quarter: var(--ui-space-quarter, #{t.$space-quarter});
+    // @desc Font size
     --_font-size: var(--ui-kbd-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Font family
     --_font-family: var(--ui-kbd-font-family, var(--ui-font-mono, #{t.$font-mono}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-kbd-padding-x, var(--ui-space-0, #{t.$space-0}));
+    // @desc Vertical padding
     --_padding-y: var(--ui-kbd-padding-y, var(--ui-space-0, #{t.$space-0}));
+    // @desc Background color
     --_bg: var(--ui-kbd-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    // @desc Border color
     --_border-color: var(--ui-kbd-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Corner radius
     --_radius: var(--ui-kbd-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    // @desc Text color
     --_color: var(--ui-kbd-color, var(--ui-color-text, #{t.$color-text}));
   }
 }
@@ -26,8 +38,8 @@
     color: var(--_color);
 
     background: var(--_bg);
-    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border: var(--_border-width-sm) solid var(--_border-color);
     border-radius: var(--_radius);
-    box-shadow: 0 var(--ui-space-quarter, #{t.$space-quarter}) 0 var(--_border-color);
+    box-shadow: 0 var(--_space-quarter) 0 var(--_border-color);
   }
 }

package/src/components/typography/kbd/kbd.api.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "kbd",
+  "element": "kbd",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-kbd-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-kbd-font-family",
+      "default": "var(--ui-font-mono)",
+      "description": "Font family"
+    },
+    {
+      "name": "--ui-kbd-padding-x",
+      "default": "var(--ui-space-0)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-kbd-padding-y",
+      "default": "var(--ui-space-0)",
+      "description": "Vertical padding"
+    },
+    {
+      "name": "--ui-kbd-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-kbd-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-kbd-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-kbd-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    }
+  ]
+}

package/src/{04-components → components}/typography/kbd/kbd.docs.json

@@ -35,7 +35,7 @@
             { "tag": "kbd", "class": "ui-kbd", "text": "Shift" },
             { "tag": "kbd", "class": "ui-kbd", "text": "Space" }
           ],
-          "layout": "cluster"
+          "layout": "row"
         }
       ]
     }

package/src/{04-components → components}/typography/link/index.scss

@@ -1,20 +1,31 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component link
 // @element a
 
 @layer components.tokens {
   .link {
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-focus: var(--ui-color-focus, var(--ui-color-primary));
+    --_color-text-muted: var(--ui-color-text-muted);
+    // @desc Text color
     --_color: var(--ui-link-color, var(--ui-color-primary));
+    // @desc Color hover
     --_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--_color) 85%, black)));
+    // @desc Color visited
     --_color-visited: var(--ui-link-color-visited, var(--_color));
+    // @desc Decoration
     --_decoration: var(--ui-link-decoration, underline);
+    // @desc Decoration hover
     --_decoration-hover: var(--ui-link-decoration-hover, underline);
   }
 
   // @modifier variant
   .link--muted {
+    // @desc Color muted
     --_color: var(--ui-link-color-muted, var(--ui-color-text-muted));
+    // @desc Color muted hover
     --_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text));
   }
 
@@ -31,7 +42,7 @@
 
     cursor: pointer;
 
-    transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: color var(--_duration-fast) var(--_ease-default);
     text-underline-offset: calc(#{t.$unit} / 4);
 
     &:hover {
@@ -41,7 +52,7 @@
 
     &:focus-visible {
       border-radius: calc(#{t.$unit} / 4);
-      outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
+      outline: 2px solid var(--_color-focus);
       outline-offset: calc(#{t.$unit} / 4);
     }
 
@@ -51,9 +62,10 @@
   }
 
   // Disabled link
+  // @modifier boolean disabled
   .link--disabled,
   .link[aria-disabled="true"] {
-    color: var(--ui-color-text-muted);
+    color: var(--_color-text-muted);
 
     opacity: 0.6;
     cursor: not-allowed;
@@ -61,6 +73,7 @@
   }
 
   // External link indicator
+  // @modifier boolean external
   .link--external::after {
 
     content: "\2197"; // ↗

package/src/components/typography/link/link.api.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "link",
+  "element": "a",
+  "modifiers": {
+    "variant": {
+      "values": ["muted", "subtle"]
+    },
+    "disabled": {
+      "type": "boolean"
+    },
+    "external": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-link-color",
+      "default": "var(--ui-color-primary)",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-link-color-hover",
+      "default": "var(--ui-color-primary-hover)",
+      "description": "Color hover"
+    },
+    {
+      "name": "--ui-link-color-visited",
+      "default": "var(--_color)",
+      "description": "Color visited"
+    },
+    {
+      "name": "--ui-link-decoration",
+      "default": "underline",
+      "description": "Decoration"
+    },
+    {
+      "name": "--ui-link-decoration-hover",
+      "default": "underline",
+      "description": "Decoration hover"
+    },
+    {
+      "name": "--ui-link-color-muted",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Color muted"
+    },
+    {
+      "name": "--ui-link-color-muted-hover",
+      "default": "var(--ui-color-text)",
+      "description": "Color muted hover"
+    }
+  ]
+}

package/src/{04-components → components}/typography/link/link.docs.json

@@ -9,7 +9,9 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<a href=\"#\" class=\"ui-link\">Default link</a>",
+          "items": [
+            { "tag": "a", "class": "ui-link", "attrs": { "href": "#" }, "text": "Default link" }
+          ],
           "code": "<a href=\"#\" class=\"ui-link\">Default link</a>"
         }
       ]
@@ -20,7 +22,14 @@
       "api": "./link.api.json",
       "examples": [
         {
-          "html": "<a href=\"#\" class=\"ui-link ui-link--muted\">Muted link</a>",
+          "items": [
+            {
+              "tag": "a",
+              "class": "ui-link ui-link--muted",
+              "attrs": { "href": "#" },
+              "text": "Muted link"
+            }
+          ],
           "code": "<a href=\"#\" class=\"ui-link ui-link--muted\">Muted link</a>"
         }
       ]
@@ -31,7 +40,14 @@
       "api": "./link.api.json",
       "examples": [
         {
-          "html": "<a href=\"#\" class=\"ui-link ui-link--subtle\">Subtle link</a>",
+          "items": [
+            {
+              "tag": "a",
+              "class": "ui-link ui-link--subtle",
+              "attrs": { "href": "#" },
+              "text": "Subtle link"
+            }
+          ],
           "code": "<a href=\"#\" class=\"ui-link ui-link--subtle\">Subtle link</a>"
         }
       ]
@@ -42,7 +58,14 @@
       "api": "./link.api.json",
       "examples": [
         {
-          "html": "<a href=\"#\" class=\"ui-link ui-link--external\">External link</a>",
+          "items": [
+            {
+              "tag": "a",
+              "class": "ui-link ui-link--external",
+              "attrs": { "href": "#" },
+              "text": "External link"
+            }
+          ],
           "code": "<a href=\"#\" class=\"ui-link ui-link--external\">External link</a>"
         }
       ]
@@ -51,7 +74,14 @@
       "title": "Disabled",
       "examples": [
         {
-          "html": "<a href=\"#\" class=\"ui-link ui-link--disabled\" aria-disabled=\"true\">Disabled link</a>",
+          "items": [
+            {
+              "tag": "a",
+              "class": "ui-link ui-link--disabled",
+              "attrs": { "href": "#", "aria-disabled": "true" },
+              "text": "Disabled link"
+            }
+          ],
           "code": "<a href=\"#\" class=\"ui-link ui-link--disabled\" aria-disabled=\"true\">\n  Disabled link\n</a>"
         }
       ]
@@ -62,7 +92,22 @@
       "api": "./link.api.json",
       "examples": [
         {
-          "html": "<p style=\"font-size: var(--ui-size-sm);\">Read our <a href=\"#\" class=\"ui-link\">privacy policy</a> for more information.</p>",
+          "items": [
+            {
+              "tag": "p",
+              "attrs": { "style": "font-size: var(--ui-size-sm);" },
+              "children": [
+                { "text": "Read our " },
+                {
+                  "tag": "a",
+                  "class": "ui-link",
+                  "attrs": { "href": "#" },
+                  "text": "privacy policy"
+                },
+                { "text": " for more information." }
+              ]
+            }
+          ],
           "code": "<p>\n  Read our <a href=\"#\" class=\"ui-link\">privacy policy</a>\n  for more information.\n</p>"
         }
       ]

package/src/{04-components → components}/typography/list/index.scss

@@ -1,12 +1,18 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component list
+// @element ul
 
 // Ordered and unordered lists with spacing and layout variants
 
 @layer components.tokens {
   .list {
+    // @desc Spacing
     --_spacing: var(--ui-list-spacing, #{t.$unit});
+    // @desc Marker color
     --_marker-color: var(--ui-list-marker-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Indent
     --_indent: var(--ui-list-indent, var(--ui-space-3, #{t.$space-3}));
+    // @desc Line height
     --_line-height: var(--ui-list-line-height, var(--ui-leading-md, #{t.$leading-md}));
   }
 
@@ -38,6 +44,7 @@
   }
 
   // Removes markers and indent
+  // @modifier style
   .list--unstyled {
     padding-inline-start: 0;