@ctrliq/quantic-components 1.82.0 → 1.84.0

package/dist/meta/serialize.js

@@ -12,6 +12,7 @@ export function serializeComponent(component) {
         description: component.description,
         category: component.category,
         ...(component.ascii ? { ascii: component.ascii } : {}),
+        ...(component.deprecated ? { deprecated: component.deprecated } : {}),
         ...(props ? { props } : {}),
         ...(events ? { events } : {}),
         ...(slots ? { slots } : {}),

package/dist/meta.json

@@ -1,7 +1,42 @@
 {
   "schemaVersion": 1,
-  "generated": "2026-08-27T18:52:16.874Z",
+  "generated": "2026-08-27T20:51:41.571Z",
   "components": [
+    {
+      "tag": "quantic-action-group",
+      "description": "A row of related actions sharing one accessible name and a consistent gap. Takes quantic-button, and quantic-dropdown-menu or quantic-popover when the trigger is a button. Wraps when the row runs out of width. Gap: --quantic-component-action-group-gap. Use quantic-button-bar when the buttons should read as one joined control.",
+      "category": "action",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "description": "Accessible name for the group.",
+          "type": "string"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "quantic-button elements, or a quantic-dropdown-menu or quantic-popover triggered by one."
+        }
+      ],
+      "examples": [
+        "<quantic-action-group ><quantic-button variant=\"outline\">Cancel</quantic-button><quantic-button variant=\"primary\">Save</quantic-button></quantic-action-group>",
+        "<quantic-action-group aria-label=\"Asset actions\">\n      <quantic-button variant=\"ghost\" size=\"sm\">\n        <quantic-icon-lucide-copy size=\"xs\"></quantic-icon-lucide-copy>\n      </quantic-button>\n      <quantic-button variant=\"ghost\" size=\"sm\">\n        <quantic-icon-lucide-download size=\"xs\"></quantic-icon-lucide-download>\n      </quantic-button>\n    </quantic-action-group>",
+        "<quantic-dialog open>\n      <quantic-dialog-title slot=\"header\">Confirm action</quantic-dialog-title>\n      <p>Are you sure you want to perform this action? This cannot be undone.</p>\n      <quantic-dialog-actions slot=\"footer\">\n        <quantic-button variant=\"outline\">Cancel</quantic-button>\n        <quantic-button variant=\"primary\">Confirm</quantic-button>\n      </quantic-dialog-actions>\n    </quantic-dialog>",
+        "<quantic-action-group ><quantic-button variant=\"outline\">Delete</quantic-button><quantic-button variant=\"outline\">Duplicate</quantic-button><quantic-button variant=\"primary\">Publish</quantic-button></quantic-action-group>",
+        "<quantic-action-group aria-label=\"Record actions\"><quantic-button variant=\"outline\">Cancel</quantic-button><quantic-button variant=\"primary\">Save</quantic-button></quantic-action-group>"
+      ],
+      "relatedTo": [
+        "quantic-button",
+        "quantic-button-bar",
+        "quantic-dialog-actions"
+      ],
+      "subComponents": [
+        "quantic-button",
+        "quantic-dropdown-menu",
+        "quantic-popover"
+      ]
+    },
     {
       "tag": "quantic-alert",
       "description": "Inline alert banner with severity styles and optional dismiss action. Visibility is owned by the consumer.",
@@ -146,6 +181,38 @@
         "quantic-status-badge"
       ]
     },
+    {
+      "tag": "quantic-badge-group",
+      "description": "A run of quantic-badge or quantic-status-badge sharing one accessible name and a consistent gap. Wraps across lines, and each badge keeps its own size. Gap: --quantic-component-badge-group-gap. Use quantic-tag-group for tags.",
+      "category": "display",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "description": "Accessible name for the group.",
+          "type": "string"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "quantic-badge or quantic-status-badge elements."
+        }
+      ],
+      "examples": [
+        "<quantic-badge-group ><quantic-badge color=\"gray\" size=\"sm\">Backgrounds</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Email signatures</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Headers</quantic-badge></quantic-badge-group>",
+        "<quantic-badge-group aria-label=\"Service status\">\n      <quantic-status-badge color=\"success\" size=\"sm\">Running</quantic-status-badge>\n      <quantic-status-badge color=\"warning\" size=\"sm\">Degraded</quantic-status-badge>\n      <quantic-status-badge color=\"error\" size=\"sm\">Offline</quantic-status-badge>\n    </quantic-badge-group>",
+        "<quantic-badge-group aria-label=\"Asset types\"><quantic-badge color=\"gray\" size=\"sm\">Backgrounds</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Email signatures</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Headers</quantic-badge></quantic-badge-group>",
+        "<quantic-badge-group ><quantic-badge color=\"gray\" size=\"sm\">Backgrounds</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Email signatures</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Headers</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Social graphics</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Slide templates</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Press kits</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Advisory cards</quantic-badge></quantic-badge-group>"
+      ],
+      "relatedTo": [
+        "quantic-badge",
+        "quantic-tag-group"
+      ],
+      "subComponents": [
+        "quantic-badge",
+        "quantic-status-badge"
+      ]
+    },
     {
       "tag": "quantic-button",
       "description": "Clickable action trigger for form submission, primary CTAs, and secondary actions. Supports icon-only mode and polymorphic rendering as an <a> or <span>. Prefer over quantic-icon-label when the element needs to be interactive.",
@@ -279,19 +346,19 @@
         "<quantic-button variant=\"primary\"><quantic-icon-lucide-rocket size=\"xxs\"></quantic-icon-lucide-rocket> Launch</quantic-button>"
       ],
       "relatedTo": [
-        "quantic-button-group",
+        "quantic-button-bar",
         "quantic-icon-label"
       ]
     },
     {
-      "tag": "quantic-button-group",
-      "description": "Toolbar container that groups multiple action buttons with joined borders and shared sizing. Use when two or more related actions should appear as a single cohesive control.",
+      "tag": "quantic-button-bar",
+      "description": "Toolbar of related buttons joined into one cohesive control, with shared sizing. Use for switching between views or modes, and for a compact run of icon actions. Items carry aria-pressed via active, so a set can behave as exclusive options or as independent toggles. Focus follows the toolbar pattern: one tab stop, arrow keys move between items, Home and End jump to the ends. Prefer quantic-button for a standalone action, and quantic-tabs when each segment reveals a panel.",
       "category": "action",
       "props": [
         {
           "name": "size",
           "description": "Size applied to all child items via context.",
-          "type": "ButtonGroupSize",
+          "type": "ButtonBarSize",
           "options": [
             "sm",
             "md",
@@ -301,28 +368,96 @@
         },
         {
           "name": "ariaLabel",
-          "description": "Accessible label for the toolbar role.",
+          "description": "Accessible label for the group.",
           "type": "string"
         }
       ],
       "slots": [
         {
           "name": "",
-          "description": "One or more quantic-button-group-item elements."
+          "description": "One or more quantic-button-bar-item elements."
         }
       ],
       "examples": [
-        "<quantic-button-group ><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item></quantic-button-group>",
-        "<quantic-button-group>\n      <quantic-button-group-item>Text</quantic-button-group-item>\n      <quantic-button-group-item disabled>Disabled item</quantic-button-group-item>\n      <quantic-button-group-item>Text</quantic-button-group-item>\n    </quantic-button-group>",
-        "<quantic-button-group size=\"lg\"><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item></quantic-button-group>",
-        "<quantic-button-group ><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item></quantic-button-group>",
-        "<quantic-button-group size=\"md\"><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item></quantic-button-group>",
-        "<quantic-button-group size=\"sm\"><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item></quantic-button-group>",
-        "<quantic-button-group ><quantic-button-group-item >Text</quantic-button-group-item><quantic-button-group-item active>Text</quantic-button-group-item><quantic-button-group-item >Text</quantic-button-group-item></quantic-button-group>",
-        "<div style=\"display: flex; flex-direction: column; gap: 16px;\">\n      <quantic-button-group size=\"md\">\n        <quantic-button-group-item onclick=\"handleClick('Option 1')\">Option 1</quantic-button-group-item>\n        <quantic-button-group-item onclick=\"handleClick('Option 2')\">Option 2</quantic-button-group-item>\n        <quantic-button-group-item onclick=\"handleClick('Option 3')\">Option 3</quantic-button-group-item>\n      </quantic-button-group>\n      <quantic-card variant=\"solid\" size=\"sm\" id=\"output\">\n        Click a button to see the event\n      </quantic-card>\n    </div>\n    <script>\n      function handleClick(option) {\n        document.getElementById('output').textContent = option + ' clicked at ' + new Date().toLocaleTimeString();\n      }\n    </script>",
-        "<quantic-button-group>\n      <quantic-button-group-item>\n        <quantic-icon-lucide-align-left size=\"xs\"></quantic-icon-lucide-align-left>\n      </quantic-button-group-item>\n      <quantic-button-group-item active>\n        <quantic-icon-lucide-align-center size=\"xs\"></quantic-icon-lucide-align-center>\n      </quantic-button-group-item>\n      <quantic-button-group-item>\n        <quantic-icon-lucide-align-right size=\"xs\"></quantic-icon-lucide-align-right>\n      </quantic-button-group-item>\n    </quantic-button-group>",
-        "<quantic-button-group>\n      <quantic-button-group-item>\n        <quantic-icon-lucide-chevron-left size=\"xs\"></quantic-icon-lucide-chevron-left>\n      </quantic-button-group-item>\n      <quantic-button-group-item>\n        Text\n      </quantic-button-group-item>\n      <quantic-button-group-item active>\n        <quantic-icon-lucide-plus size=\"xs\"></quantic-icon-lucide-plus>\n      </quantic-button-group-item>\n      <quantic-button-group-item>\n        <quantic-icon-lucide-chevron-right size=\"xs\"></quantic-icon-lucide-chevron-right>\n      </quantic-button-group-item>\n    </quantic-button-group>",
-        "<quantic-button-group>\n      <quantic-button-group-item>Short</quantic-button-group-item>\n      <quantic-button-group-item>Text</quantic-button-group-item>\n      <quantic-button-group-item>This is a very long button text that should be clamped with ellipsis</quantic-button-group-item>\n      <quantic-button-group-item>Medium</quantic-button-group-item>\n      <quantic-button-group-item>Text</quantic-button-group-item>\n    </quantic-button-group>"
+        "<quantic-button-bar ><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item></quantic-button-bar>",
+        "<quantic-button-bar>\n      <quantic-button-bar-item>Text</quantic-button-bar-item>\n      <quantic-button-bar-item disabled>Disabled item</quantic-button-bar-item>\n      <quantic-button-bar-item>Text</quantic-button-bar-item>\n    </quantic-button-bar>",
+        "<quantic-button-bar size=\"lg\"><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item></quantic-button-bar>",
+        "<quantic-button-bar ><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item></quantic-button-bar>",
+        "<quantic-button-bar size=\"md\"><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item></quantic-button-bar>",
+        "<quantic-button-bar size=\"sm\"><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item></quantic-button-bar>",
+        "<quantic-button-bar ><quantic-button-bar-item >Text</quantic-button-bar-item><quantic-button-bar-item active>Text</quantic-button-bar-item><quantic-button-bar-item >Text</quantic-button-bar-item></quantic-button-bar>",
+        "<div style=\"display: flex; flex-direction: column; gap: 16px;\">\n      <quantic-button-bar size=\"md\">\n        <quantic-button-bar-item onclick=\"handleClick('Option 1')\">Option 1</quantic-button-bar-item>\n        <quantic-button-bar-item onclick=\"handleClick('Option 2')\">Option 2</quantic-button-bar-item>\n        <quantic-button-bar-item onclick=\"handleClick('Option 3')\">Option 3</quantic-button-bar-item>\n      </quantic-button-bar>\n      <quantic-card variant=\"solid\" size=\"sm\" id=\"output\">\n        Click a button to see the event\n      </quantic-card>\n    </div>\n    <script>\n      function handleClick(option) {\n        document.getElementById('output').textContent = option + ' clicked at ' + new Date().toLocaleTimeString();\n      }\n    </script>",
+        "<quantic-button-bar>\n      <quantic-button-bar-item>\n        <quantic-icon-lucide-align-left size=\"xs\"></quantic-icon-lucide-align-left>\n      </quantic-button-bar-item>\n      <quantic-button-bar-item active>\n        <quantic-icon-lucide-align-center size=\"xs\"></quantic-icon-lucide-align-center>\n      </quantic-button-bar-item>\n      <quantic-button-bar-item>\n        <quantic-icon-lucide-align-right size=\"xs\"></quantic-icon-lucide-align-right>\n      </quantic-button-bar-item>\n    </quantic-button-bar>",
+        "<quantic-button-bar>\n      <quantic-button-bar-item>\n        <quantic-icon-lucide-chevron-left size=\"xs\"></quantic-icon-lucide-chevron-left>\n      </quantic-button-bar-item>\n      <quantic-button-bar-item>\n        Text\n      </quantic-button-bar-item>\n      <quantic-button-bar-item active>\n        <quantic-icon-lucide-plus size=\"xs\"></quantic-icon-lucide-plus>\n      </quantic-button-bar-item>\n      <quantic-button-bar-item>\n        <quantic-icon-lucide-chevron-right size=\"xs\"></quantic-icon-lucide-chevron-right>\n      </quantic-button-bar-item>\n    </quantic-button-bar>",
+        "<quantic-button-bar>\n      <quantic-button-bar-item>Short</quantic-button-bar-item>\n      <quantic-button-bar-item>Text</quantic-button-bar-item>\n      <quantic-button-bar-item>This is a very long button text that should be clamped with ellipsis</quantic-button-bar-item>\n      <quantic-button-bar-item>Medium</quantic-button-bar-item>\n      <quantic-button-bar-item>Text</quantic-button-bar-item>\n    </quantic-button-bar>"
+      ],
+      "relatedTo": [
+        "quantic-button"
+      ],
+      "subComponents": [
+        "quantic-button-bar-item"
+      ]
+    },
+    {
+      "tag": "quantic-button-bar-item",
+      "description": "Single segment within a quantic-button-bar. Renders as a native button with shared sizing from the parent context and a pressed state via active.",
+      "category": "action",
+      "props": [
+        {
+          "name": "disabled",
+          "description": "Prevents interaction and reduces opacity.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "active",
+          "description": "Marks this item as the currently selected/active option.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Button label or icon content."
+        }
+      ],
+      "relatedTo": [
+        "quantic-button-bar",
+        "quantic-button"
+      ]
+    },
+    {
+      "tag": "quantic-button-group",
+      "description": "Deprecated alias of quantic-button-bar. Use quantic-button-bar.",
+      "category": "action",
+      "deprecated": {
+        "use": "quantic-button-bar",
+        "reason": "The name describes a row of buttons, which this is not. Use quantic-action-group for that."
+      },
+      "props": [
+        {
+          "name": "size",
+          "description": "Size applied to all child items via context.",
+          "type": "ButtonBarSize",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        {
+          "name": "ariaLabel",
+          "description": "Accessible label for the group.",
+          "type": "string"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "One or more quantic-button-group-item elements."
+        }
       ],
       "relatedTo": [
         "quantic-button"
@@ -333,8 +468,11 @@
     },
     {
       "tag": "quantic-button-group-item",
-      "description": "Individual button within a quantic-button-group. Renders as a native button with shared sizing from the parent group context and a toggle-style active state.",
+      "description": "Deprecated alias of quantic-button-bar-item. Use quantic-button-bar-item.",
       "category": "action",
+      "deprecated": {
+        "use": "quantic-button-bar-item"
+      },
       "props": [
         {
           "name": "disabled",
@@ -356,8 +494,7 @@
         }
       ],
       "relatedTo": [
-        "quantic-button-group",
-        "quantic-button"
+        "quantic-button-group"
       ]
     },
     {
@@ -1585,7 +1722,7 @@
     },
     {
       "tag": "quantic-dialog-actions",
-      "description": "Footer actions bar sub-component for quantic-dialog. Lays out action buttons (confirm/cancel) flush to the right.",
+      "description": "Footer actions bar for quantic-dialog. Lays action buttons out as a quantic-action-group, flush to the right.",
       "category": "feedback",
       "slots": [
         {
@@ -1595,7 +1732,11 @@
       ],
       "relatedTo": [
         "quantic-dialog",
-        "quantic-button"
+        "quantic-button",
+        "quantic-action-group"
+      ],
+      "subComponents": [
+        "quantic-action-group"
       ]
     },
     {
@@ -2844,7 +2985,7 @@
         "<div style=\"display: flex; flex-direction: column; gap: 16px;\">\n      <quantic-pagination\n        size=\"md\"\n        current-page=\"5\"\n        total-pages=\"10\"\n        max-displayed-pages=\"3\"\n        id=\"pagination\"\n      ></quantic-pagination>\n      <quantic-card variant=\"solid\" size=\"sm\" id=\"output\">\n        Click a page to see the event\n      </quantic-card>\n    </div>\n    <script>\n      (() => {\n        const pagination = document.getElementById('pagination');\n        const output = document.getElementById('output');\n\n        pagination.addEventListener('page-change', (event) => {\n          const page = event.detail.page;\n          output.textContent = 'Page changed to: ' + page + ' at ' + new Date().toLocaleTimeString();\n          pagination.setAttribute('current-page', page);\n        });\n      })();\n    </script>"
       ],
       "relatedTo": [
-        "quantic-button-group"
+        "quantic-button-bar"
       ]
     },
     {
@@ -4631,6 +4772,40 @@
         "quantic-badge"
       ]
     },
+    {
+      "tag": "quantic-tag-group",
+      "description": "A run of quantic-tag, quantic-status-tag or quantic-count-tag sharing one accessible name and a consistent gap. Wraps across lines, and each tag keeps its own size. Gap: --quantic-component-tag-group-gap. Use quantic-badge-group for badges.",
+      "category": "display",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "description": "Accessible name for the group.",
+          "type": "string"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "quantic-tag, quantic-status-tag or quantic-count-tag elements."
+        }
+      ],
+      "examples": [
+        "<quantic-tag-group ><quantic-tag size=\"md\">Compute</quantic-tag><quantic-tag size=\"md\">Storage</quantic-tag><quantic-tag size=\"md\">Networking</quantic-tag></quantic-tag-group>",
+        "<quantic-tag-group aria-label=\"Applied filters\">\n      <quantic-tag dismissible>Compute</quantic-tag>\n      <quantic-tag dismissible>Storage</quantic-tag>\n      <quantic-tag dismissible>Networking</quantic-tag>\n    </quantic-tag-group>",
+        "<quantic-tag-group aria-label=\"Cluster state\">\n      <quantic-tag>Compute</quantic-tag>\n      <quantic-status-tag color=\"success\">Healthy</quantic-status-tag>\n      <quantic-count-tag count=\"12\">Nodes</quantic-count-tag>\n    </quantic-tag-group>",
+        "<quantic-tag-group aria-label=\"Cluster capabilities\"><quantic-tag size=\"md\">Compute</quantic-tag><quantic-tag size=\"md\">Storage</quantic-tag><quantic-tag size=\"md\">Networking</quantic-tag></quantic-tag-group>",
+        "<quantic-tag-group ><quantic-tag size=\"md\">Compute</quantic-tag><quantic-tag size=\"md\">Storage</quantic-tag><quantic-tag size=\"md\">Networking</quantic-tag><quantic-tag size=\"md\">Scheduling</quantic-tag><quantic-tag size=\"md\">Monitoring</quantic-tag><quantic-tag size=\"md\">Provisioning</quantic-tag><quantic-tag size=\"md\">Authentication</quantic-tag><quantic-tag size=\"md\">Observability</quantic-tag></quantic-tag-group>"
+      ],
+      "relatedTo": [
+        "quantic-tag",
+        "quantic-badge-group"
+      ],
+      "subComponents": [
+        "quantic-tag",
+        "quantic-status-tag",
+        "quantic-count-tag"
+      ]
+    },
     {
       "tag": "quantic-text",
       "description": "Typography component for rendering text with consistent sizing, weight, and color tokens. Renders any HTML element via the `as` prop for semantic correctness.",

package/dist/pagination/pagination.component.js

@@ -8,16 +8,16 @@ import { css, html } from 'lit';
 import { QuanticElement, quanticElement } from '../shared/quantic-element';
 import { provide } from '@lit/context';
 import { PaginationSize } from './index.constants';
-import { sizeContext } from '../button-group/index.context';
+import { sizeContext } from '../button-bar/index.context';
 import { getPageNumbers } from './pagination.utils';
-import { ButtonGroup, ButtonGroupItem } from '../button-group';
+import { ButtonBar, ButtonBarItem } from '../button-bar';
 import { LucideIconArrowLeft } from '../icon/__generated__/lucide/arrow-left';
 import { LucideIconArrowRight } from '../icon/__generated__/lucide/arrow-right';
 import { event, prop } from '../shared/component-meta.decorators';
 LucideIconArrowLeft.ensureDefined();
 LucideIconArrowRight.ensureDefined();
-ButtonGroup.ensureDefined();
-ButtonGroupItem.ensureDefined();
+ButtonBar.ensureDefined();
+ButtonBarItem.ensureDefined();
 let Pagination = class Pagination extends QuanticElement {
     constructor() {
         super(...arguments);
@@ -48,8 +48,8 @@ let Pagination = class Pagination extends QuanticElement {
         const pageNumbers = getPageNumbers(this.currentPage, this.totalPages, this.maxDisplayedPages);
         return html `
       <nav role="navigation" aria-label="Pagination">
-        <quantic-button-group size=${this.size}>
-          <quantic-button-group-item
+        <quantic-button-bar size=${this.size}>
+          <quantic-button-bar-item
             ?disabled=${isPrevDisabled}
             @click=${this._handlePrevious}
             aria-label="Go to previous page"
@@ -58,26 +58,26 @@ let Pagination = class Pagination extends QuanticElement {
               size="xs"
               class="icon"
             ></quantic-icon-lucide-arrow-left>
-          </quantic-button-group-item>
+          </quantic-button-bar-item>
 
           ${pageNumbers.map((page) => page === 'ellipsis'
             ? html `
-                  <quantic-button-group-item disabled>
+                  <quantic-button-bar-item disabled>
                     ...
-                  </quantic-button-group-item>
+                  </quantic-button-bar-item>
                 `
             : html `
-                  <quantic-button-group-item
+                  <quantic-button-bar-item
                     ?active=${page === this.currentPage}
                     @click=${() => this._handlePageChange(page)}
                     aria-label="Go to page ${page}"
                     aria-current=${page === this.currentPage ? 'page' : 'false'}
                   >
                     ${page}
-                  </quantic-button-group-item>
+                  </quantic-button-bar-item>
                 `)}
 
-          <quantic-button-group-item
+          <quantic-button-bar-item
             ?disabled=${isNextDisabled}
             @click=${this._handleNext}
             aria-label="Go to next page"
@@ -86,8 +86,8 @@ let Pagination = class Pagination extends QuanticElement {
               size="xs"
               class="icon"
             ></quantic-icon-lucide-arrow-right>
-          </quantic-button-group-item>
-        </quantic-button-group>
+          </quantic-button-bar-item>
+        </quantic-button-bar>
       </nav>
     `;
     }
@@ -97,7 +97,7 @@ Pagination.meta = {
     description: 'Page navigation control with previous/next and numbered page buttons. ' +
         'Emits page-change events; the host is responsible for updating currentPage.',
     category: 'navigation',
-    relatedTo: ['quantic-button-group'],
+    relatedTo: ['quantic-button-bar'],
 };
 Pagination.styles = css `
     .icon {