@ctrliq/quantic-components 1.83.0 → 1.84.1

package/dist/badge/badge-group.component.d.ts

@@ -0,0 +1,13 @@
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+export declare class BadgeGroup extends QuanticElement {
+    static meta: ComponentMeta;
+    ariaLabel: string | null;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-badge-group': BadgeGroup;
+    }
+}

package/dist/badge/badge-group.component.js

@@ -0,0 +1,62 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { QuanticElement, quanticElement } from '../shared/quantic-element';
+import { prop } from '../shared/component-meta.decorators';
+let BadgeGroup = class BadgeGroup extends QuanticElement {
+    constructor() {
+        super(...arguments);
+        this.ariaLabel = null;
+    }
+    render() {
+        return html `
+      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Badges'}>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+BadgeGroup.meta = {
+    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',
+    slots: {
+        '': {
+            description: 'quantic-badge or quantic-status-badge elements.',
+        },
+    },
+    subComponents: ['quantic-badge', 'quantic-status-badge'],
+    relatedTo: ['quantic-badge', 'quantic-tag-group'],
+};
+BadgeGroup.styles = css `
+    :host {
+      display: block;
+    }
+
+    .group {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(
+        --quantic-component-badge-group-gap,
+        var(--quantic-spacing-1)
+      );
+    }
+  `;
+__decorate([
+    prop({
+        type: 'string',
+        attribute: 'aria-label',
+        description: 'Accessible name for the group.',
+    })
+], BadgeGroup.prototype, "ariaLabel", void 0);
+BadgeGroup = __decorate([
+    quanticElement('quantic-badge-group')
+], BadgeGroup);
+export { BadgeGroup };

package/dist/badge/badge-group.stories.d.ts

@@ -0,0 +1,41 @@
+import { BadgeColor, BadgeSize } from './index.constants';
+interface Args {
+    label: string | undefined;
+    size: BadgeSize;
+    color: BadgeColor;
+    badges: string[];
+}
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: ("xs" | "sm" | "md" | "lg")[];
+            description: string;
+        };
+        color: {
+            control: {
+                type: string;
+            };
+            options: ("success" | "error" | "warning" | "gray" | "brand" | "gray-blue" | "blue-light" | "blue" | "indigo" | "purple" | "pink" | "orange")[];
+            description: string;
+        };
+        badges: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: import("../shared/story").StoryObject<Args>;
+export declare const WithAccessibleName: import("../shared/story").StoryObject<Args>;
+export declare const Wrapping: import("../shared/story").StoryObject<Args>;
+export declare const StatusBadges: import("../shared/story").StoryObject<object>;

package/dist/badge/badge-group.stories.js

@@ -0,0 +1,62 @@
+import { story } from '../shared/story';
+import { BadgeColor, BadgeSize } from './index.constants';
+export default {
+    title: 'Components/Display/Badge/BadgeGroup',
+    component: 'quantic-badge-group',
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Accessible name for the group. Defaults to "Badges".',
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(BadgeSize),
+            description: 'Size set on each badge. The group does not own sizing.',
+        },
+        color: {
+            control: { type: 'select' },
+            options: Object.values(BadgeColor),
+            description: 'Color set on each badge',
+        },
+        badges: {
+            control: 'object',
+            description: 'Badge labels',
+        },
+    },
+};
+const base = story({
+    args: {
+        label: undefined,
+        size: BadgeSize.Small,
+        color: BadgeColor.Gray,
+        badges: ['Backgrounds', 'Email signatures', 'Headers'],
+    },
+}).render(({ label, size, color, badges }) => {
+    const labelAttr = label === undefined ? '' : `aria-label="${label}"`;
+    const items = badges
+        .map((badge) => `<quantic-badge color="${color}" size="${size}">${badge}</quantic-badge>`)
+        .join('');
+    return `<quantic-badge-group ${labelAttr}>${items}</quantic-badge-group>`;
+});
+export const Default = base;
+export const WithAccessibleName = base.override({ label: 'Asset types' });
+// No gap, axis or wrap props on purpose: the rhythm is a decision, not a knob.
+export const Wrapping = base.override({
+    badges: [
+        'Backgrounds',
+        'Email signatures',
+        'Headers',
+        'Social graphics',
+        'Slide templates',
+        'Press kits',
+        'Advisory cards',
+    ],
+});
+export const StatusBadges = story().render(() => `
+    <quantic-badge-group aria-label="Service status">
+      <quantic-status-badge color="success" size="sm">Running</quantic-status-badge>
+      <quantic-status-badge color="warning" size="sm">Degraded</quantic-status-badge>
+      <quantic-status-badge color="error" size="sm">Offline</quantic-status-badge>
+    </quantic-badge-group>
+  `);

package/dist/badge/index.d.ts

@@ -1,3 +1,4 @@
 export * from './badge.component';
 export * from './status-badge.component';
+export * from './badge-group.component';
 export { BadgeSize, BadgeColor } from './index.constants';

package/dist/badge/index.js

@@ -1,3 +1,4 @@
 export * from './badge.component';
 export * from './status-badge.component';
+export * from './badge-group.component';
 export { BadgeSize, BadgeColor } from './index.constants';

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

@@ -4,6 +4,9 @@ import type { ComponentMeta } from '../shared/meta.types';
 export declare class ButtonBarItem extends QuanticElement {
     static meta: ComponentMeta;
     size?: ButtonBarSize;
+    tabbable: boolean;
+    private innerButton?;
+    focus(options?: FocusOptions): void;
     disabled: boolean;
     active: boolean;
     static styles: import("lit").CSSResult;

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

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html } from 'lit';
+import { query, state } from 'lit/decorators.js';
 import { consume } from '@lit/context';
 import { classMap } from 'lit/directives/class-map.js';
 import { sizeContext } from './index.context';
@@ -13,9 +14,13 @@ import { prop } from '../shared/component-meta.decorators';
 let ButtonBarItem = class ButtonBarItem extends QuanticElement {
     constructor() {
         super(...arguments);
+        this.tabbable = true;
         this.disabled = false;
         this.active = false;
     }
+    focus(options) {
+        this.innerButton?.focus(options);
+    }
     render() {
         const classes = classMap({
             main: true,
@@ -26,7 +31,7 @@ let ButtonBarItem = class ButtonBarItem extends QuanticElement {
       <button
         type="button"
         class=${classes}
-        tabindex=${this.disabled ? -1 : 0}
+        tabindex=${this.disabled || !this.tabbable ? -1 : 0}
         ?disabled=${this.disabled}
         aria-pressed=${this.active ? 'true' : 'false'}
       >
@@ -169,6 +174,12 @@ ButtonBarItem.styles = css `
 __decorate([
     consume({ context: sizeContext, subscribe: true })
 ], ButtonBarItem.prototype, "size", void 0);
+__decorate([
+    state()
+], ButtonBarItem.prototype, "tabbable", void 0);
+__decorate([
+    query('button')
+], ButtonBarItem.prototype, "innerButton", void 0);
 __decorate([
     prop({
         type: 'boolean',

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

@@ -5,6 +5,15 @@ export declare class ButtonBar extends QuanticElement {
     static meta: ComponentMeta;
     size: ButtonBarSize;
     ariaLabel: string | null;
+    private disabledObserver?;
+    private hasSynced;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get items();
+    private setFocusStop;
+    private syncFocusStop;
+    private handleFocusIn;
+    private handleKeydown;
     static styles: import("lit").CSSResult;
     protected defaultLabel: string;
     render(): import("lit").TemplateResult<1>;

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

@@ -10,21 +10,71 @@ import { ButtonBarSize } from './index.constants';
 import { sizeContext } from './index.context';
 import { quanticElement, QuanticElement } from '../shared/quantic-element';
 import { prop } from '../shared/component-meta.decorators';
+import { nextFocusIndex, resolveFocusStop } from './index.utils';
+const ITEM_TAGS = 'quantic-button-bar-item, quantic-button-group-item';
 let ButtonBar = class ButtonBar extends QuanticElement {
     constructor() {
         super(...arguments);
         this.size = ButtonBarSize.Medium;
         this.ariaLabel = null;
+        this.hasSynced = false;
         this.defaultLabel = 'Button bar';
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.disabledObserver = new MutationObserver(() => this.syncFocusStop());
+        this.disabledObserver.observe(this, {
+            attributeFilter: ['disabled'],
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.disabledObserver?.disconnect();
+        this.disabledObserver = undefined;
+    }
+    get items() {
+        return [...this.querySelectorAll(ITEM_TAGS)].filter((item) => item.parentElement === this && !item.disabled);
+    }
+    setFocusStop(items, index) {
+        items.forEach((item, position) => {
+            item.tabbable = position === index;
+        });
+    }
+    syncFocusStop() {
+        const items = this.items;
+        const stop = resolveFocusStop(items, this.hasSynced);
+        if (stop === null)
+            return;
+        this.hasSynced = true;
+        this.setFocusStop(items, stop);
+    }
+    handleFocusIn(event) {
+        const items = this.items;
+        const focused = items.findIndex((item) => item.contains(event.target));
+        if (focused !== -1)
+            this.setFocusStop(items, focused);
+    }
+    handleKeydown(event) {
+        const items = this.items;
+        const current = items.findIndex((item) => item.contains(event.target));
+        const next = nextFocusIndex(event.key, current, items.length);
+        if (next === null)
+            return;
+        event.preventDefault();
+        this.setFocusStop(items, next);
+        items[next].focus();
+    }
     render() {
         return html `
       <div
         class="container"
         role="toolbar"
-        aria-label=${this.ariaLabel || this.defaultLabel}
+        aria-label=${this.ariaLabel ?? this.defaultLabel}
+        @keydown=${this.handleKeydown}
+        @focusin=${this.handleFocusIn}
       >
-        <slot></slot>
+        <slot @slotchange=${() => this.syncFocusStop()}></slot>
       </div>
     `;
     }
@@ -34,6 +84,7 @@ ButtonBar.meta = {
     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',
     slots: { '': { description: 'One or more quantic-button-bar-item elements.' } },

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

@@ -1,14 +1,14 @@
 import { story } from '../shared/story';
 import { ButtonBarSize } from './index.constants';
 export default {
-    title: 'Components/Actions/Button Group',
+    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 group',
+            description: 'The size of the button bar',
         },
         items: {
             control: 'object',

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.js

@@ -21,8 +21,7 @@ let ButtonGroup = class ButtonGroup extends ButtonBar {
 ButtonGroup.meta = {
     ...ButtonBar.meta,
     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.',
+    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.',

package/dist/capacity-bar/index.js

@@ -92,77 +92,77 @@ CapacityBar.styles = css `
 
     .label {
       color: var(--quantic-text-secondary);
-      font-size: var(--quantic-component-capacity-bar-label-font-size);
-      line-height: var(--quantic-component-capacity-bar-label-line-height);
+      font-size: var(--quantic-component-capacity-bar-label-font-size, var(--quantic-internal-capacity-bar-label-font-size));
+      line-height: var(--quantic-component-capacity-bar-label-line-height, var(--quantic-internal-capacity-bar-label-line-height));
       white-space: nowrap;
     }
 
     .bar {
       display: flex;
       flex-wrap: nowrap;
-      gap: var(--quantic-component-capacity-bar-gap, 3px);
+      gap: var(--quantic-component-capacity-bar-gap, var(--quantic-internal-capacity-bar-gap, 3px));
     }
 
     .size--xs {
-      --quantic-component-capacity-bar-gap: 2px;
-      --quantic-component-capacity-bar-segment-radius: 2px;
-      --quantic-component-capacity-bar-segment-width: 3px;
-      --quantic-component-capacity-bar-segment-height: var(--quantic-spacing-5);
-      --quantic-component-capacity-bar-label-font-size: var(
+      --quantic-internal-capacity-bar-gap: 2px;
+      --quantic-internal-capacity-bar-segment-radius: 2px;
+      --quantic-internal-capacity-bar-segment-width: 3px;
+      --quantic-internal-capacity-bar-segment-height: var(--quantic-spacing-5);
+      --quantic-internal-capacity-bar-label-font-size: var(
         --quantic-font-size-body-xs
       );
-      --quantic-component-capacity-bar-label-line-height: var(
+      --quantic-internal-capacity-bar-label-line-height: var(
         --quantic-line-height-body-xs
       );
     }
 
     .size--sm {
-      --quantic-component-capacity-bar-gap: 2px;
-      --quantic-component-capacity-bar-segment-radius: 2px;
-      --quantic-component-capacity-bar-segment-width: var(--quantic-spacing-1);
-      --quantic-component-capacity-bar-segment-height: var(--quantic-spacing-6);
-      --quantic-component-capacity-bar-label-font-size: var(
+      --quantic-internal-capacity-bar-gap: 2px;
+      --quantic-internal-capacity-bar-segment-radius: 2px;
+      --quantic-internal-capacity-bar-segment-width: var(--quantic-spacing-1);
+      --quantic-internal-capacity-bar-segment-height: var(--quantic-spacing-6);
+      --quantic-internal-capacity-bar-label-font-size: var(
         --quantic-font-size-body-xs
       );
-      --quantic-component-capacity-bar-label-line-height: var(
+      --quantic-internal-capacity-bar-label-line-height: var(
         --quantic-line-height-body-xs
       );
     }
 
     .size--md {
-      --quantic-component-capacity-bar-gap: 2px;
-      --quantic-component-capacity-bar-segment-radius: 3px;
-      --quantic-component-capacity-bar-segment-width: var(
+      --quantic-internal-capacity-bar-gap: 2px;
+      --quantic-internal-capacity-bar-segment-radius: 3px;
+      --quantic-internal-capacity-bar-segment-width: var(
         --quantic-spacing-1-5
       );
-      --quantic-component-capacity-bar-segment-height: var(--quantic-spacing-8);
-      --quantic-component-capacity-bar-label-font-size: var(
+      --quantic-internal-capacity-bar-segment-height: var(--quantic-spacing-8);
+      --quantic-internal-capacity-bar-label-font-size: var(
         --quantic-font-size-body-sm
       );
-      --quantic-component-capacity-bar-label-line-height: var(
+      --quantic-internal-capacity-bar-label-line-height: var(
         --quantic-line-height-body-sm
       );
     }
 
     .size--lg {
-      --quantic-component-capacity-bar-gap: 3px;
-      --quantic-component-capacity-bar-segment-radius: 4px;
-      --quantic-component-capacity-bar-segment-width: var(--quantic-spacing-2);
-      --quantic-component-capacity-bar-segment-height: var(
+      --quantic-internal-capacity-bar-gap: 3px;
+      --quantic-internal-capacity-bar-segment-radius: 4px;
+      --quantic-internal-capacity-bar-segment-width: var(--quantic-spacing-2);
+      --quantic-internal-capacity-bar-segment-height: var(
         --quantic-spacing-12
       );
-      --quantic-component-capacity-bar-label-font-size: var(
+      --quantic-internal-capacity-bar-label-font-size: var(
         --quantic-font-size-body-md
       );
-      --quantic-component-capacity-bar-label-line-height: var(
+      --quantic-internal-capacity-bar-label-line-height: var(
         --quantic-line-height-body-md
       );
     }
 
     .segment {
-      width: var(--quantic-component-capacity-bar-segment-width, 6px);
-      height: var(--quantic-component-capacity-bar-segment-height, 6px);
-      border-radius: var(--quantic-component-capacity-bar-segment-radius, 4px);
+      width: var(--quantic-component-capacity-bar-segment-width, var(--quantic-internal-capacity-bar-segment-width, 6px));
+      height: var(--quantic-component-capacity-bar-segment-height, var(--quantic-internal-capacity-bar-segment-height, 6px));
+      border-radius: var(--quantic-component-capacity-bar-segment-radius, var(--quantic-internal-capacity-bar-segment-radius, 4px));
     }
 
     .segment--empty {