@teseor/css 1.0.0

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

@@ -0,0 +1,15 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'spinner.docs.json');
+
+test.describe('spinner visual regression', () => {
+  // TODO: Skip grid rhythm until #154 is resolved (CSS var resolution issue)
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    // await validateGridRhythm(page, 'spinner');
+    await saveForLostPixel(page, 'spinner');
+    await expect(page.locator('body')).toHaveScreenshot('spinner.visual.png');
+  });
+});

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

@@ -0,0 +1,85 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Status - visual status indicator
+// Small dot or badge to show state
+
+@layer components.tokens {
+  .status {
+    --_size: var(--ui-status-size, calc(#{t.$unit} * 1));
+    --_color: var(--ui-status-color, var(--ui-color-text-muted));
+    --_gap: var(--ui-status-gap, calc(#{t.$unit} * 1));
+  }
+
+  .status--success {
+    --_color: var(--ui-color-success);
+  }
+
+  .status--warning {
+    --_color: var(--ui-color-warning);
+  }
+
+  .status--danger {
+    --_color: var(--ui-color-danger);
+  }
+
+  .status--info {
+    --_color: var(--ui-color-primary);
+  }
+}
+
+@layer components.styles {
+  .status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--_gap);
+  }
+
+  .status__dot {
+    flex-shrink: 0;
+
+    block-size: var(--_size);
+    inline-size: var(--_size);
+
+    background: var(--_color);
+    border-radius: 50%;
+  }
+
+  // Pulse animation for active status
+  .status--pulse .status__dot {
+    position: relative;
+  }
+
+  .status--pulse .status__dot::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+
+    background: var(--_color);
+    border-radius: 50%;
+
+    animation: status-pulse 2s infinite;
+  }
+
+  @keyframes status-pulse {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(2.5);
+    }
+  }
+
+  // Size variants
+  .status--sm {
+    --_size: calc(#{t.$unit} * 0.75);
+    --_gap: calc(#{t.$unit} * 0.75);
+  }
+
+  .status--lg {
+    --_size: calc(#{t.$unit} * 1.5);
+    --_gap: calc(#{t.$unit} * 1.5);
+  }
+}

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

@@ -0,0 +1,19 @@
+{
+  "name": "status",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-status-size",
+      "default": "calc(#{t.$unit} * 1"
+    },
+    {
+      "name": "--ui-status-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-status-gap",
+      "default": "calc(#{t.$unit} * 1"
+    }
+  ]
+}

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

@@ -0,0 +1,60 @@
+{
+  "id": "status",
+  "type": "component",
+  "title": "Status",
+  "description": "Visual status indicator with colored dot to show state.",
+  "api": "./status.api.json",
+  "sections": [
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "html": "<div style=\"display: flex; flex-direction: column; gap: var(--ui-space-2);\"><span class=\"ui-status\"><span class=\"ui-status__dot\"></span>Default</span><span class=\"ui-status ui-status--success\"><span class=\"ui-status__dot\"></span>Online</span><span class=\"ui-status ui-status--warning\"><span class=\"ui-status__dot\"></span>Away</span><span class=\"ui-status ui-status--danger\"><span class=\"ui-status__dot\"></span>Busy</span><span class=\"ui-status ui-status--info\"><span class=\"ui-status__dot\"></span>In a meeting</span></div>",
+          "code": "<span class=\"ui-status ui-status--success\">\n  <span class=\"ui-status__dot\"></span>\n  Online\n</span>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "html": "<div style=\"display: flex; gap: var(--ui-space-4); align-items: center;\"><span class=\"ui-status ui-status--success ui-status--sm\"><span class=\"ui-status__dot\"></span>Small</span><span class=\"ui-status ui-status--success\"><span class=\"ui-status__dot\"></span>Default</span><span class=\"ui-status ui-status--success ui-status--lg\"><span class=\"ui-status__dot\"></span>Large</span></div>",
+          "code": "<span class=\"ui-status ui-status--sm\">...</span>\n<span class=\"ui-status\">...</span>\n<span class=\"ui-status ui-status--lg\">...</span>"
+        }
+      ]
+    },
+    {
+      "title": "Pulse Animation",
+      "description": "For live or active indicators",
+      "api": "./status.api.json",
+      "examples": [
+        {
+          "html": "<span class=\"ui-status ui-status--success ui-status--pulse\"><span class=\"ui-status__dot\"></span>Live</span>",
+          "code": "<span class=\"ui-status ui-status--success ui-status--pulse\">\n  <span class=\"ui-status__dot\"></span>\n  Live\n</span>"
+        }
+      ]
+    },
+    {
+      "title": "Dot Only",
+      "examples": [
+        {
+          "html": "<div style=\"display: flex; gap: var(--ui-space-2);\"><span class=\"ui-status ui-status--success\"><span class=\"ui-status__dot\"></span></span><span class=\"ui-status ui-status--warning\"><span class=\"ui-status__dot\"></span></span><span class=\"ui-status ui-status--danger\"><span class=\"ui-status__dot\"></span></span></div>",
+          "code": "<span class=\"ui-status ui-status--success\">\n  <span class=\"ui-status__dot\"></span>\n</span>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    { "token": "--ui-status-size", "default": "var(--unit)", "description": "Dot size" },
+    {
+      "token": "--ui-status-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Default dot color"
+    },
+    {
+      "token": "--ui-status-gap",
+      "default": "var(--unit)",
+      "description": "Gap between dot and text"
+    }
+  ]
+}

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

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

@@ -0,0 +1,60 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Token definitions
+@layer components.tokens {
+  .table {
+    --_font-size: var(--ui-table-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_border-color: var(--ui-table-border-color, var(--ui-color-border, #{t.$color-border}));
+    --_header-bg: var(--ui-table-header-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_cell-padding-x: var(--ui-table-cell-padding-x, var(--ui-space-2, #{t.$space-2}));
+    --_cell-padding-y: var(--ui-table-cell-padding-y, var(--ui-space-1, #{t.$space-1}));
+  }
+
+  .table--compact {
+    --_cell-padding-y: var(--ui-space-0, #{t.$space-0});
+    --_cell-padding-x: var(--ui-space-1, #{t.$space-1});
+    --_font-size: var(--ui-font-size-xs, #{t.$font-size-xs});
+  }
+}
+
+// Implementation
+@layer components.styles {
+  .table {
+    inline-size: 100%;
+
+    font-size: var(--_font-size);
+    // Use separate to avoid sub-pixel border issues
+    border-collapse: separate;
+    border-spacing: 0;
+
+    th,
+    td {
+      // Subtract border from bottom padding to keep row on grid
+      padding-block-start: var(--_cell-padding-y);
+      padding-block-end: calc(var(--_cell-padding-y) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+      padding-inline: var(--_cell-padding-x);
+      // Grid-aligned line-height (3 units = 24px at 8px unit)
+      line-height: calc(var(--unit, #{t.$unit}) * 3);
+      text-align: start;
+
+      border-block-end: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    }
+
+    th {
+      font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+
+      background: var(--_header-bg);
+    }
+
+    // Striped variant
+    &--striped {
+      tbody tr:nth-child(odd) {
+        background: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+      }
+
+      th {
+        background: var(--ui-color-bg-muted, #{t.$color-bg-muted});
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+{
+  "name": "table",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-table-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-table-border-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-table-header-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-table-cell-padding-x",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-table-cell-padding-y",
+      "default": "var(--ui-space-1)"
+    }
+  ]
+}

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

@@ -0,0 +1,59 @@
+{
+  "id": "table",
+  "type": "component",
+  "title": "Table",
+  "description": "Styled table with header formatting and optional variants.",
+  "api": "./table.api.json",
+  "componentName": "table",
+  "sections": [
+    {
+      "title": "Basic table",
+      "examples": [
+        {
+          "title": "Default",
+          "html": "<table class=\"ui-table\"><thead><tr><th>Name</th><th>Value</th></tr></thead><tbody><tr><td>Alpha</td><td>100</td></tr><tr><td>Beta</td><td>200</td></tr></tbody></table>"
+        }
+      ]
+    },
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "title": "Compact",
+          "html": "<table class=\"ui-table ui-table--compact\"><thead><tr><th>Token</th><th>Value</th></tr></thead><tbody><tr><td><code class=\"ui-code ui-code--sm\">--space-1</code></td><td>0.5rem</td></tr><tr><td><code class=\"ui-code ui-code--sm\">--space-2</code></td><td>1rem</td></tr></tbody></table>"
+        },
+        {
+          "title": "Striped",
+          "html": "<table class=\"ui-table ui-table--striped\"><thead><tr><th>Item</th><th>Status</th></tr></thead><tbody><tr><td>Task 1</td><td>Done</td></tr><tr><td>Task 2</td><td>Pending</td></tr><tr><td>Task 3</td><td>Done</td></tr></tbody></table>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-table-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Table font size"
+    },
+    {
+      "token": "--ui-table-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    {
+      "token": "--ui-table-header-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Header background"
+    },
+    {
+      "token": "--ui-table-cell-padding-x",
+      "default": "var(--ui-space-2)",
+      "description": "Cell horizontal padding"
+    },
+    {
+      "token": "--ui-table-cell-padding-y",
+      "default": "var(--ui-space-1)",
+      "description": "Cell vertical padding"
+    }
+  ]
+}

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

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

@@ -0,0 +1,77 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Token definitions
+@layer components.tokens {
+  .tabs {
+    --_border-color: var(--ui-tabs-border-color, var(--ui-color-border, #{t.$color-border}));
+    --_tab-padding-x: var(--ui-tabs-tab-padding-x, var(--ui-space-2, #{t.$space-2}));
+    --_tab-padding-y: var(--ui-tabs-tab-padding-y, var(--ui-space-1, #{t.$space-1}));
+    --_tab-bg: var(--ui-tabs-tab-bg, transparent);
+    --_tab-bg-active: var(--ui-tabs-tab-bg-active, var(--ui-color-bg, #{t.$color-bg}));
+    --_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, #{t.$space-3}));
+  }
+}
+
+// Implementation
+@layer components.styles {
+  .tabs__list {
+    display: flex;
+    align-items: stretch;
+    gap: var(--ui-space-1, #{t.$space-1});
+
+    box-sizing: border-box;
+    block-size: var(--ui-row-2, #{t.$row-2});
+
+    // Use box-shadow instead of border to avoid affecting height
+    box-shadow: inset 0 calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1) 0 var(--_border-color);
+  }
+
+  .tabs__tab {
+    display: inline-flex;
+    align-items: center;
+
+    box-sizing: border-box;
+    block-size: var(--ui-row-2, #{t.$row-2});
+    padding-inline: var(--_tab-padding-x);
+    margin: 0;
+
+    font-family: var(--ui-font-sans, #{t.$font-sans});
+    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    line-height: 1;
+    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+
+    background: var(--_tab-bg);
+    border: none;
+    // Use box-shadow for indicator to avoid affecting height
+    box-shadow: inset 0 calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 transparent;
+    cursor: pointer;
+
+    transition:
+      color var(--ui-duration-base) var(--ui-ease-default),
+      box-shadow var(--ui-duration-base) var(--ui-ease-default);
+
+    &:hover {
+      color: var(--ui-color-text, #{t.$color-text});
+    }
+
+    &--active {
+      color: var(--ui-color-primary, #{t.$color-primary});
+
+      background: var(--_tab-bg-active);
+      box-shadow: inset 0 calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 var(--ui-color-primary, #{t.$color-primary});
+    }
+  }
+
+  .tabs__panel {
+    display: none;
+
+    padding: var(--_panel-padding);
+
+    line-height: var(--ui-row-1, #{t.$row});
+
+    &--active {
+      display: block;
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+{
+  "name": "tabs",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-tabs-border-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-tabs-tab-padding-x",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-tabs-tab-padding-y",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-tabs-tab-bg",
+      "default": "transparent"
+    },
+    {
+      "name": "--ui-tabs-tab-bg-active",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-tabs-panel-padding",
+      "default": "var(--ui-space-3)"
+    }
+  ]
+}

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

@@ -0,0 +1,61 @@
+{
+  "api": "./tabs.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "data": {
+        "tabs": [
+          { "label": "Tab 1", "active": true, "content": "Panel 1 content" },
+          { "label": "Tab 2", "active": false, "content": "Panel 2 content" },
+          { "label": "Tab 3", "active": false, "content": "Panel 3 content" }
+        ]
+      },
+      "examples": [
+        {
+          "html": "<div class=\"ui-tabs\"><div class=\"ui-tabs__list\"><button class=\"ui-tabs__tab ui-tabs__tab--active\">Tab 1</button><button class=\"ui-tabs__tab\">Tab 2</button><button class=\"ui-tabs__tab\">Tab 3</button></div><div class=\"ui-tabs__panel ui-tabs__panel--active\">Panel 1 content</div><div class=\"ui-tabs__panel\">Panel 2 content</div><div class=\"ui-tabs__panel\">Panel 3 content</div></div>",
+          "code": "<div class=\"ui-tabs\">\n  <div class=\"ui-tabs__list\">\n{% for t in tabs %}    <button class=\"ui-tabs__tab{% if t.active %} ui-tabs__tab--active{% endif %}\">{{ t.label }}</button>\n{% endfor %}  </div>\n{% for t in tabs %}  <div class=\"ui-tabs__panel{% if t.active %} ui-tabs__panel--active{% endif %}\">{{ t.content }}</div>\n{% endfor %}</div>"
+        }
+      ]
+    },
+    {
+      "title": "Two Tabs",
+      "data": {
+        "tabs": [{ "label": "Preview", "active": true }, { "label": "Code", "active": false }]
+      },
+      "examples": [
+        {
+          "html": "<div class=\"ui-tabs\"><div class=\"ui-tabs__list\"><button class=\"ui-tabs__tab ui-tabs__tab--active\">Preview</button><button class=\"ui-tabs__tab\">Code</button></div><div class=\"ui-tabs__panel ui-tabs__panel--active\"><div class=\"ui-card\">Preview content goes here</div></div><div class=\"ui-tabs__panel\"><pre class=\"ui-code-block\"><code>&lt;div&gt;Code snippet&lt;/div&gt;</code></pre></div></div>",
+          "code": "<div class=\"ui-tabs\">\n  <div class=\"ui-tabs__list\">\n{% for t in tabs %}    <button class=\"ui-tabs__tab{% if t.active %} ui-tabs__tab--active{% endif %}\">{{ t.label }}</button>\n{% endfor %}  </div>\n  <div class=\"ui-tabs__panel ui-tabs__panel--active\">...</div>\n  <div class=\"ui-tabs__panel\">...</div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-tabs-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Tab list border color"
+    },
+    {
+      "token": "--ui-tabs-tab-padding-x",
+      "default": "var(--ui-space-2)",
+      "description": "Tab horizontal padding"
+    },
+    {
+      "token": "--ui-tabs-tab-padding-y",
+      "default": "var(--ui-space-1)",
+      "description": "Tab vertical padding"
+    },
+    { "token": "--ui-tabs-tab-bg", "default": "transparent", "description": "Tab background" },
+    {
+      "token": "--ui-tabs-tab-bg-active",
+      "default": "var(--ui-color-bg)",
+      "description": "Active tab background"
+    },
+    {
+      "token": "--ui-tabs-panel-padding",
+      "default": "var(--ui-space-3)",
+      "description": "Panel padding"
+    }
+  ]
+}

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

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

@@ -0,0 +1,98 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component tag
+// @element span
+
+@layer components.tokens {
+  .tag {
+    --_height: var(--ui-tag-height, calc(#{t.$unit} * 3));
+    --_padding-x: var(--ui-tag-padding-x, var(--ui-space-1, #{t.$space-1}));
+    --_gap: var(--ui-tag-gap, calc(#{t.$unit} * 0.5));
+    --_radius: var(--ui-tag-radius, var(--ui-radius-full, #{t.$radius-full}));
+    --_font-size: var(--ui-tag-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_bg: var(--ui-tag-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_color: var(--ui-tag-color, var(--ui-color-text, #{t.$color-text}));
+  }
+
+  // @modifier size
+  .tag--sm {
+    --_height: var(--ui-tag-height-sm, calc(#{t.$unit} * 2.5));
+    --_padding-x: var(--ui-tag-padding-x-sm, calc(#{t.$unit} * 1));
+    --_font-size: var(--ui-tag-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+  }
+
+  // @modifier variant
+  .tag--primary {
+    --_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, #{t.$color-primary}));
+    --_color: var(--ui-tag-primary-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+  }
+
+  .tag--success {
+    --_bg: var(--ui-tag-success-bg, var(--ui-color-success, #{t.$color-success}));
+    --_color: var(--ui-tag-success-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+  }
+
+  .tag--warning {
+    --_bg: var(--ui-tag-warning-bg, var(--ui-color-warning, #{t.$color-warning}));
+    --_color: var(--ui-tag-warning-color, var(--ui-color-text, #{t.$color-text}));
+  }
+
+  .tag--danger {
+    --_bg: var(--ui-tag-danger-bg, var(--ui-color-danger, #{t.$color-danger}));
+    --_color: var(--ui-tag-danger-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+  }
+}
+
+@layer components.styles {
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--_gap);
+
+    block-size: var(--_height);
+    padding-inline: var(--_padding-x);
+
+    font-size: var(--_font-size);
+    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    line-height: 1;
+    white-space: nowrap;
+    color: var(--_color);
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .tag__remove {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    padding: 0;
+    margin-inline-start: calc(var(--_gap) * -0.5);
+
+    color: currentcolor;
+
+    background: none;
+    border: none;
+    opacity: 0.7;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  // Tag group for multiple tags
+  .tag-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(#{t.$unit} * 0.5);
+  }
+}