@ctrliq/quantic-components 1.82.0 → 1.83.0

package/dist/button-group/button-group.d.ts

@@ -1,10 +1,12 @@
-import { ButtonGroupSize } from './index.constants';
-import { QuanticElement } from '../shared/quantic-element';
+import { ButtonBar } from '../button-bar/button-bar';
 import type { ComponentMeta } from '../shared/meta.types';
-export declare class ButtonGroup extends QuanticElement {
+/**
+ * @deprecated Renamed to `ButtonBar` (`quantic-button-bar`). This element
+ * never grouped buttons: it joins borders and gives its items a pressed state, which is a
+ * button bar. Removed in the next major. For a spaced row of related actions use
+ * `ActionGroup`; the `ButtonGroup` name is retired rather than reused.
+ */
+export declare class ButtonGroup extends ButtonBar {
     static meta: ComponentMeta;
-    size: ButtonGroupSize;
-    ariaLabel: string | null;
-    static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
+    protected defaultLabel: string;
 }

package/dist/button-group/button-group.js

@@ -4,73 +4,32 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html } from 'lit';
-import { provide } from '@lit/context';
-import { ButtonGroupSize } from './index.constants';
-import { sizeContext } from './index.context';
-import { quanticElement, QuanticElement } from '../shared/quantic-element';
-import { prop } from '../shared/component-meta.decorators';
-let ButtonGroup = class ButtonGroup extends QuanticElement {
+import { quanticElement } from '../shared/quantic-element';
+import { ButtonBar } from '../button-bar/button-bar';
+/**
+ * @deprecated Renamed to `ButtonBar` (`quantic-button-bar`). This element
+ * never grouped buttons: it joins borders and gives its items a pressed state, which is a
+ * button bar. Removed in the next major. For a spaced row of related actions use
+ * `ActionGroup`; the `ButtonGroup` name is retired rather than reused.
+ */
+let ButtonGroup = class ButtonGroup extends ButtonBar {
     constructor() {
         super(...arguments);
-        this.size = ButtonGroupSize.Medium;
-        this.ariaLabel = null;
-    }
-    render() {
-        return html `
-      <div
-        class="container"
-        role="toolbar"
-        aria-label=${this.ariaLabel || 'Button group'}
-      >
-        <slot></slot>
-      </div>
-    `;
+        this.defaultLabel = 'Button group';
     }
 };
 ButtonGroup.meta = {
+    ...ButtonBar.meta,
     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.',
-    category: 'action',
+    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.',
+    deprecated: {
+        use: 'quantic-button-bar',
+        reason: 'The name describes a row of buttons, which this is not. Use quantic-action-group for that.',
+    },
     slots: { '': { description: 'One or more quantic-button-group-item elements.' } },
     subComponents: ['quantic-button-group-item'],
-    relatedTo: ['quantic-button'],
 };
-ButtonGroup.styles = css `
-    :host {
-      --quantic-component-button-group-padding-block: var(--quantic-spacing-2);
-      --quantic-component-button-group-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-button-group-font-size: var(
-        --quantic-font-size-body-sm
-      );
-      --quantic-component-button-group-line-height: var(
-        --quantic-line-height-body-sm
-      );
-      --quantic-component-button-group-item-max-width: var(--quantic-width-xxs);
-      --quantic-component-button-group-border-radius: var(--quantic-radius-md);
-      --quantic-component-button-group-border-color: var(
-        --quantic-border-primary
-      );
-
-      max-width: 100%;
-      display: inline-flex;
-      overflow: visible;
-    }
-
-    .container {
-      display: inline-flex;
-      border: 1px solid var(--quantic-component-button-group-border-color);
-      border-radius: var(--quantic-component-button-group-border-radius);
-    }
-  `;
-__decorate([
-    provide({ context: sizeContext }),
-    prop({ type: 'ButtonGroupSize', options: Object.values(ButtonGroupSize), default: ButtonGroupSize.Medium, description: 'Size applied to all child items via context.' })
-], ButtonGroup.prototype, "size", void 0);
-__decorate([
-    prop({ type: 'string', attribute: 'aria-label', description: 'Accessible label for the toolbar role.' })
-], ButtonGroup.prototype, "ariaLabel", void 0);
 ButtonGroup = __decorate([
     quanticElement('quantic-button-group')
 ], ButtonGroup);

package/dist/button-group/index.constants.d.ts

@@ -1,6 +1,9 @@
+import { ButtonBarSize } from '../button-bar/index.constants';
+/** @deprecated Renamed to `ButtonBarSize`. Removed in the next major. */
 export declare const ButtonGroupSize: {
     readonly Small: "sm";
     readonly Medium: "md";
     readonly Large: "lg";
 };
-export type ButtonGroupSize = (typeof ButtonGroupSize)[keyof typeof ButtonGroupSize];
+/** @deprecated Renamed to `ButtonBarSize`. Removed in the next major. */
+export type ButtonGroupSize = ButtonBarSize;

package/dist/button-group/index.constants.js

@@ -1,5 +1,3 @@
-export const ButtonGroupSize = {
-    Small: 'sm',
-    Medium: 'md',
-    Large: 'lg',
-};
+import { ButtonBarSize } from '../button-bar/index.constants';
+/** @deprecated Renamed to `ButtonBarSize`. Removed in the next major. */
+export const ButtonGroupSize = ButtonBarSize;

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from './badge';
 export * from './capacity-bar';
 export * from './button';
 export * from './button-group';
+export * from './button-bar';
 export * from './card';
 export * from './code-input';
 export * from './checkbox';

package/dist/index.js

@@ -4,6 +4,7 @@ export * from './badge';
 export * from './capacity-bar';
 export * from './button';
 export * from './button-group';
+export * from './button-bar';
 export * from './card';
 export * from './code-input';
 export * from './checkbox';