@ctrliq/quantic-components 1.81.0 → 1.83.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,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "generated": "2026-08-27T02:04:07.067Z",
+  "generated": "2026-08-27T20:08:17.213Z",
   "components": [
     {
       "tag": "quantic-alert",
@@ -279,19 +279,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. 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 +301,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. This element never grouped buttons: it joins borders and gives its items a pressed state. 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 +401,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 +427,7 @@
         }
       ],
       "relatedTo": [
-        "quantic-button-group",
-        "quantic-button"
+        "quantic-button-group"
       ]
     },
     {
@@ -2844,7 +2914,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"
       ]
     },
     {

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 {