@ctrliq/quantic-components 1.82.0 → 1.84.0

package/dist/button-bar/index.stories.js

@@ -0,0 +1,107 @@
+import { story } from '../shared/story';
+import { ButtonBarSize } from './index.constants';
+export default {
+    title: 'Components/Actions/Button Bar',
+    component: 'quantic-button-bar',
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: Object.values(ButtonBarSize),
+            description: 'The size of the button bar',
+        },
+        items: {
+            control: 'object',
+            description: 'Array of button labels',
+        },
+        activeIndex: {
+            control: 'number',
+            description: 'Index of the active button (optional)',
+        },
+    },
+};
+const base = story({
+    args: {
+        size: undefined,
+        items: ['Text', 'Text', 'Text'],
+        activeIndex: undefined,
+    },
+}).render(({ size, items, activeIndex }) => {
+    const sizeAttr = size ? `size="${size}"` : '';
+    const itemsHtml = items
+        .map((item, index) => `<quantic-button-bar-item ${activeIndex === index ? 'active' : ''}>${item}</quantic-button-bar-item>`)
+        .join('');
+    return `<quantic-button-bar ${sizeAttr}>${itemsHtml}</quantic-button-bar>`;
+});
+export const Default = base;
+export const Small = base.override({ size: ButtonBarSize.Small });
+export const Medium = base.override({ size: ButtonBarSize.Medium });
+export const Large = base.override({ size: ButtonBarSize.Large });
+export const WithActiveItem = base.override({ activeIndex: 1 });
+export const ManyItems = base.override({
+    items: ['Text', 'Text', 'Text', 'Text', 'Text', 'Text', 'Text', 'Text'],
+});
+export const WithIcons = story().render(() => `
+    <quantic-button-bar>
+      <quantic-button-bar-item>
+        <quantic-icon-lucide-align-left size="xs"></quantic-icon-lucide-align-left>
+      </quantic-button-bar-item>
+      <quantic-button-bar-item active>
+        <quantic-icon-lucide-align-center size="xs"></quantic-icon-lucide-align-center>
+      </quantic-button-bar-item>
+      <quantic-button-bar-item>
+        <quantic-icon-lucide-align-right size="xs"></quantic-icon-lucide-align-right>
+      </quantic-button-bar-item>
+    </quantic-button-bar>
+  `);
+export const WithIconsAndText = story().render(() => `
+    <quantic-button-bar>
+      <quantic-button-bar-item>
+        <quantic-icon-lucide-chevron-left size="xs"></quantic-icon-lucide-chevron-left>
+      </quantic-button-bar-item>
+      <quantic-button-bar-item>
+        Text
+      </quantic-button-bar-item>
+      <quantic-button-bar-item active>
+        <quantic-icon-lucide-plus size="xs"></quantic-icon-lucide-plus>
+      </quantic-button-bar-item>
+      <quantic-button-bar-item>
+        <quantic-icon-lucide-chevron-right size="xs"></quantic-icon-lucide-chevron-right>
+      </quantic-button-bar-item>
+    </quantic-button-bar>
+  `);
+export const Disabled = story().render(() => `
+    <quantic-button-bar>
+      <quantic-button-bar-item>Text</quantic-button-bar-item>
+      <quantic-button-bar-item disabled>Disabled item</quantic-button-bar-item>
+      <quantic-button-bar-item>Text</quantic-button-bar-item>
+    </quantic-button-bar>
+  `);
+export const WithClickEvent = story({
+    args: { size: ButtonBarSize.Medium, items: [], activeIndex: undefined },
+}).render(({ size }) => `
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <quantic-button-bar size="${size}">
+        <quantic-button-bar-item onclick="handleClick('Option 1')">Option 1</quantic-button-bar-item>
+        <quantic-button-bar-item onclick="handleClick('Option 2')">Option 2</quantic-button-bar-item>
+        <quantic-button-bar-item onclick="handleClick('Option 3')">Option 3</quantic-button-bar-item>
+      </quantic-button-bar>
+      <quantic-card variant="solid" size="sm" id="output">
+        Click a button to see the event
+      </quantic-card>
+    </div>
+    <script>
+      function handleClick(option) {
+        document.getElementById('output').textContent = option + ' clicked at ' + new Date().toLocaleTimeString();
+      }
+    </script>
+  `);
+export const WithLongText = story().render(() => `
+    <quantic-button-bar>
+      <quantic-button-bar-item>Short</quantic-button-bar-item>
+      <quantic-button-bar-item>Text</quantic-button-bar-item>
+      <quantic-button-bar-item>This is a very long button text that should be clamped with ellipsis</quantic-button-bar-item>
+      <quantic-button-bar-item>Medium</quantic-button-bar-item>
+      <quantic-button-bar-item>Text</quantic-button-bar-item>
+    </quantic-button-bar>
+  `);

package/dist/button-bar/index.utils.d.ts

@@ -0,0 +1,6 @@
+export interface FocusStopCandidate {
+    tabbable: boolean;
+    active: boolean;
+}
+export declare function resolveFocusStop(items: FocusStopCandidate[], hasSynced: boolean): number | null;
+export declare function nextFocusIndex(key: string, current: number, count: number): number | null;

package/dist/button-bar/index.utils.js

@@ -0,0 +1,31 @@
+const KEY_STEPS = {
+    ArrowRight: 1,
+    ArrowDown: 1,
+    ArrowLeft: -1,
+    ArrowUp: -1,
+    Home: 'first',
+    End: 'last',
+};
+export function resolveFocusStop(items, hasSynced) {
+    if (!items.length)
+        return null;
+    if (hasSynced) {
+        const tabbable = items.findIndex((item) => item.tabbable);
+        if (tabbable !== -1)
+            return tabbable;
+    }
+    const active = items.findIndex((item) => item.active);
+    return active === -1 ? 0 : active;
+}
+export function nextFocusIndex(key, current, count) {
+    const step = KEY_STEPS[key];
+    if (step === undefined)
+        return null;
+    if (count < 2 || current < 0 || current >= count)
+        return null;
+    if (step === 'first')
+        return 0;
+    if (step === 'last')
+        return count - 1;
+    return (current + step + count) % count;
+}

package/dist/button-bar/index.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/button-bar/index.utils.test.js

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+import { nextFocusIndex, resolveFocusStop } from './index.utils';
+const item = (tabbable, active = false) => ({ tabbable, active });
+describe('resolveFocusStop', () => {
+    it('starts on the active item', () => {
+        expect(resolveFocusStop([item(true), item(true, true), item(true)], false)).toBe(1);
+    });
+    it('starts on the first item when none is active', () => {
+        expect(resolveFocusStop([item(true), item(true)], false)).toBe(0);
+    });
+    it('keeps the existing stop once synced, so a resync does not move focus', () => {
+        expect(resolveFocusStop([item(false), item(true), item(false, true)], true)).toBe(1);
+    });
+    it('rehomes the stop when the item holding it is gone', () => {
+        expect(resolveFocusStop([item(false), item(false, true)], true)).toBe(1);
+        expect(resolveFocusStop([item(false), item(false)], true)).toBe(0);
+    });
+    it('has nothing to do without items', () => {
+        expect(resolveFocusStop([], false)).toBeNull();
+        expect(resolveFocusStop([], true)).toBeNull();
+    });
+});
+describe('nextFocusIndex', () => {
+    it('moves forward and back', () => {
+        expect(nextFocusIndex('ArrowRight', 0, 3)).toBe(1);
+        expect(nextFocusIndex('ArrowLeft', 2, 3)).toBe(1);
+    });
+    it('treats the vertical arrows the same, so a wrapped bar still navigates', () => {
+        expect(nextFocusIndex('ArrowDown', 0, 3)).toBe(1);
+        expect(nextFocusIndex('ArrowUp', 1, 3)).toBe(0);
+    });
+    it('wraps at both ends', () => {
+        expect(nextFocusIndex('ArrowRight', 2, 3)).toBe(0);
+        expect(nextFocusIndex('ArrowLeft', 0, 3)).toBe(2);
+    });
+    it('jumps to the ends', () => {
+        expect(nextFocusIndex('Home', 2, 3)).toBe(0);
+        expect(nextFocusIndex('End', 0, 3)).toBe(2);
+    });
+    it('ignores keys it does not own, so Tab and Enter still behave natively', () => {
+        expect(nextFocusIndex('Tab', 0, 3)).toBeNull();
+        expect(nextFocusIndex('Enter', 0, 3)).toBeNull();
+        expect(nextFocusIndex(' ', 0, 3)).toBeNull();
+    });
+    it('does nothing without at least two items', () => {
+        expect(nextFocusIndex('ArrowRight', 0, 1)).toBeNull();
+        expect(nextFocusIndex('ArrowRight', 0, 0)).toBeNull();
+    });
+    it('does nothing when the event came from outside the items', () => {
+        expect(nextFocusIndex('ArrowRight', -1, 3)).toBeNull();
+        expect(nextFocusIndex('ArrowRight', 3, 3)).toBeNull();
+    });
+});

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

@@ -1,11 +1,9 @@
-import { ButtonGroupSize } from './index.constants';
-import { QuanticElement } from '../shared/quantic-element';
+import { ButtonBarItem } from '../button-bar/button-bar-item';
 import type { ComponentMeta } from '../shared/meta.types';
-export declare class ButtonGroupItem extends QuanticElement {
+/**
+ * @deprecated Renamed to `ButtonBarItem` (`quantic-button-bar-item`).
+ * Removed in the next major.
+ */
+export declare class ButtonGroupItem extends ButtonBarItem {
     static meta: ComponentMeta;
-    size?: ButtonGroupSize;
-    disabled: boolean;
-    active: boolean;
-    static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
 }

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

@@ -4,177 +4,21 @@ 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 { consume } from '@lit/context';
-import { classMap } from 'lit/directives/class-map.js';
-import { sizeContext } from './index.context';
-import { quanticElement, QuanticElement } from '../shared/quantic-element';
-import { prop } from '../shared/component-meta.decorators';
-let ButtonGroupItem = class ButtonGroupItem extends QuanticElement {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.active = false;
-    }
-    render() {
-        const classes = classMap({
-            main: true,
-            [`size--${this.size}`]: !!this.size,
-            [`is-active`]: this.active,
-        });
-        return html `
-      <button
-        class=${classes}
-        tabindex=${this.disabled ? -1 : 0}
-        ?disabled=${this.disabled}
-        aria-pressed=${this.active ? 'true' : 'false'}
-      >
-        <div class="content">
-          <slot></slot>
-        </div>
-      </button>
-    `;
-    }
+import { quanticElement } from '../shared/quantic-element';
+import { ButtonBarItem } from '../button-bar/button-bar-item';
+/**
+ * @deprecated Renamed to `ButtonBarItem` (`quantic-button-bar-item`).
+ * Removed in the next major.
+ */
+let ButtonGroupItem = class ButtonGroupItem extends ButtonBarItem {
 };
 ButtonGroupItem.meta = {
+    ...ButtonBarItem.meta,
     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.',
-    category: 'action',
-    slots: { '': { description: 'Button label or icon content.' } },
-    relatedTo: ['quantic-button-group', 'quantic-button'],
+    description: 'Deprecated alias of quantic-button-bar-item. Use quantic-button-bar-item.',
+    deprecated: { use: 'quantic-button-bar-item' },
+    relatedTo: ['quantic-button-group'],
 };
-ButtonGroupItem.styles = css `
-    :host {
-      display: inline-flex;
-    }
-
-    :host([disabled]) {
-      pointer-events: none;
-      opacity: 0.5;
-    }
-
-    .main {
-      position: relative;
-      appearance: none;
-      background-color: transparent;
-      border: none;
-      border-right: 1px solid var(--quantic-border-primary);
-      font-family: var(--quantic-font-family-body);
-      font-weight: var(--quantic-font-weight-semibold);
-      white-space: nowrap;
-      text-decoration: none;
-      text-align: center;
-      display: block;
-      align-items: center;
-      justify-content: center;
-      gap: var(--quantic-spacing-2);
-      width: 100%;
-      color: var(--quantic-text-primary);
-      cursor: pointer;
-      outline: none;
-      box-sizing: border-box;
-      padding: var(--quantic-component-button-group-padding-block)
-        var(--quantic-component-button-group-padding-inline);
-      font-size: var(--quantic-component-button-group-font-size);
-      line-height: var(--quantic-component-button-group-line-height);
-      transition:
-        background-color 0.2s ease-in-out,
-        color 0.2s ease-in-out;
-    }
-
-    :host(:last-of-type) .main {
-      border-right: none;
-    }
-
-    .main::before {
-      content: '';
-      display: block;
-      position: absolute;
-      inset: 0;
-      border-radius: var(--quantic-radius-sm);
-      border: 2px solid var(--quantic-focus-ring);
-      transition: all 0.2s ease-in-out;
-      opacity: 0;
-    }
-
-    .main:focus-visible::before {
-      inset: -4px;
-      opacity: 1;
-    }
-
-    .main:hover {
-      background-color: var(--quantic-bg-secondary-hover);
-    }
-
-    .content {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: var(--quantic-component-button-group-item-max-width);
-    }
-
-    .is-active {
-      background-color: var(--quantic-bg-active);
-    }
-
-    .size--sm {
-      --quantic-component-button-group-padding-block: var(--quantic-spacing-1);
-      --quantic-component-button-group-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-button-group-font-size: var(
-        --quantic-font-size-body-xs
-      );
-      --quantic-component-button-group-line-height: var(
-        --quantic-line-height-body-xs
-      );
-    }
-
-    .size--md {
-      --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
-      );
-    }
-
-    .size--lg {
-      --quantic-component-button-group-padding-block: 10px;
-      --quantic-component-button-group-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-button-group-font-size: var(
-        --quantic-font-size-body-md
-      );
-      --quantic-component-button-group-line-height: var(
-        --quantic-line-height-body-md
-      );
-    }
-
-    ::slotted(*) {
-      display: flex;
-      align-items: center;
-    }
-  `;
-__decorate([
-    consume({ context: sizeContext, subscribe: true })
-], ButtonGroupItem.prototype, "size", void 0);
-__decorate([
-    prop({
-        type: 'boolean',
-        default: 'false',
-        description: 'Prevents interaction and reduces opacity.',
-        reflect: true,
-    })
-], ButtonGroupItem.prototype, "disabled", void 0);
-__decorate([
-    prop({
-        type: 'boolean',
-        default: 'false',
-        description: 'Marks this item as the currently selected/active option.',
-        reflect: true,
-    })
-], ButtonGroupItem.prototype, "active", void 0);
 ButtonGroupItem = __decorate([
     quanticElement('quantic-button-group-item')
 ], ButtonGroupItem);

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,31 @@ 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. 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/dialog/dialog-actions.js

@@ -6,34 +6,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css } from 'lit';
 import { html } from 'lit/static-html.js';
+import { ActionGroup } from '../action-group/action-group.component';
 import { quanticElement, QuanticElement } from '../shared/quantic-element';
+ActionGroup.ensureDefined();
 let DialogActions = class DialogActions extends QuanticElement {
     render() {
         return html `
-      <div class="main">
+      <quantic-action-group aria-label="">
         <slot></slot>
-      </div>
+      </quantic-action-group>
     `;
     }
 };
 DialogActions.meta = {
     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: { '': { description: 'Action buttons, typically quantic-button elements.' } },
-    relatedTo: ['quantic-dialog', 'quantic-button'],
+    subComponents: ['quantic-action-group'],
+    relatedTo: ['quantic-dialog', 'quantic-button', 'quantic-action-group'],
 };
 DialogActions.styles = css `
     :host {
       display: block;
     }
 
-    .main {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: var(--quantic-spacing-3);
+    quantic-action-group {
+      width: fit-content;
+      margin-inline-start: auto;
     }
   `;
 DialogActions = __decorate([

package/dist/index.d.ts

@@ -3,7 +3,9 @@ export * from './combobox';
 export * from './badge';
 export * from './capacity-bar';
 export * from './button';
+export * from './action-group';
 export * from './button-group';
+export * from './button-bar';
 export * from './card';
 export * from './code-input';
 export * from './checkbox';

package/dist/index.js

@@ -3,7 +3,9 @@ export * from './combobox';
 export * from './badge';
 export * from './capacity-bar';
 export * from './button';
+export * from './action-group';
 export * from './button-group';
+export * from './button-bar';
 export * from './card';
 export * from './code-input';
 export * from './checkbox';