@ctrliq/quantic-components 1.82.0 → 1.84.0

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

@@ -115,7 +115,7 @@ Button.meta = {
         'Supports icon-only mode and polymorphic rendering as an <a> or <span>. ' +
         'Prefer over quantic-icon-label when the element needs to be interactive.',
     category: 'action',
-    relatedTo: ['quantic-button-group', 'quantic-icon-label'],
+    relatedTo: ['quantic-button-bar', 'quantic-icon-label'],
 };
 Button.formAssociated = true;
 Button.styles = css `

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

@@ -0,0 +1,14 @@
+import { ButtonBarSize } from './index.constants';
+import { QuanticElement } from '../shared/quantic-element';
+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;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,202 @@
+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 { query, state } from 'lit/decorators.js';
+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 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,
+            [`size--${this.size}`]: !!this.size,
+            [`is-active`]: this.active,
+        });
+        return html `
+      <button
+        type="button"
+        class=${classes}
+        tabindex=${this.disabled || !this.tabbable ? -1 : 0}
+        ?disabled=${this.disabled}
+        aria-pressed=${this.active ? 'true' : 'false'}
+      >
+        <div class="content">
+          <slot></slot>
+        </div>
+      </button>
+    `;
+    }
+};
+ButtonBarItem.meta = {
+    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',
+    slots: { '': { description: 'Button label or icon content.' } },
+    relatedTo: ['quantic-button-bar', 'quantic-button'],
+};
+ButtonBarItem.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;
+      width: 100%;
+      color: var(--quantic-text-primary);
+      cursor: pointer;
+      outline: none;
+      box-sizing: border-box;
+      padding: var(
+          --quantic-component-button-bar-padding-block,
+          var(--quantic-internal-button-bar-item-padding-block)
+        )
+        var(
+          --quantic-component-button-bar-padding-inline,
+          var(--quantic-internal-button-bar-item-padding-inline)
+        );
+      font-size: var(
+        --quantic-component-button-bar-font-size,
+        var(--quantic-internal-button-bar-item-font-size)
+      );
+      line-height: var(
+        --quantic-component-button-bar-line-height,
+        var(--quantic-internal-button-bar-item-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-bar-item-max-width);
+    }
+
+    .is-active {
+      background-color: var(--quantic-bg-active);
+    }
+
+    .size--sm {
+      --quantic-internal-button-bar-item-padding-block: var(--quantic-spacing-1);
+      --quantic-internal-button-bar-item-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-button-bar-item-font-size: var(
+        --quantic-font-size-body-xs
+      );
+      --quantic-internal-button-bar-item-line-height: var(
+        --quantic-line-height-body-xs
+      );
+    }
+
+    .size--md {
+      --quantic-internal-button-bar-item-padding-block: var(--quantic-spacing-2);
+      --quantic-internal-button-bar-item-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-button-bar-item-font-size: var(
+        --quantic-font-size-body-sm
+      );
+      --quantic-internal-button-bar-item-line-height: var(
+        --quantic-line-height-body-sm
+      );
+    }
+
+    .size--lg {
+      --quantic-internal-button-bar-item-padding-block: 10px;
+      --quantic-internal-button-bar-item-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-button-bar-item-font-size: var(
+        --quantic-font-size-body-md
+      );
+      --quantic-internal-button-bar-item-line-height: var(
+        --quantic-line-height-body-md
+      );
+    }
+
+    ::slotted(*) {
+      display: flex;
+      align-items: center;
+    }
+  `;
+__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',
+        default: 'false',
+        description: 'Prevents interaction and reduces opacity.',
+        reflect: true,
+    })
+], ButtonBarItem.prototype, "disabled", void 0);
+__decorate([
+    prop({
+        type: 'boolean',
+        default: 'false',
+        description: 'Marks this item as the currently selected/active option.',
+        reflect: true,
+    })
+], ButtonBarItem.prototype, "active", void 0);
+ButtonBarItem = __decorate([
+    quanticElement('quantic-button-bar-item')
+], ButtonBarItem);
+export { ButtonBarItem };

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

@@ -0,0 +1,20 @@
+import { ButtonBarSize } from './index.constants';
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+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

@@ -0,0 +1,127 @@
+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 { provide } from '@lit/context';
+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}
+        @keydown=${this.handleKeydown}
+        @focusin=${this.handleFocusIn}
+      >
+        <slot @slotchange=${() => this.syncFocusStop()}></slot>
+      </div>
+    `;
+    }
+};
+ButtonBar.meta = {
+    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',
+    slots: { '': { description: 'One or more quantic-button-bar-item elements.' } },
+    subComponents: ['quantic-button-bar-item'],
+    relatedTo: ['quantic-button'],
+};
+ButtonBar.styles = css `
+    :host {
+      --quantic-internal-button-bar-item-padding-block: var(--quantic-spacing-2);
+      --quantic-internal-button-bar-item-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-button-bar-item-font-size: var(--quantic-font-size-body-sm);
+      --quantic-internal-button-bar-item-line-height: var(--quantic-line-height-body-sm);
+      --quantic-component-button-bar-item-max-width: var(--quantic-width-xxs);
+      --quantic-component-button-bar-border-radius: var(--quantic-radius-md);
+      --quantic-component-button-bar-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-bar-border-color);
+      border-radius: var(--quantic-component-button-bar-border-radius);
+    }
+  `;
+__decorate([
+    provide({ context: sizeContext }),
+    prop({ type: 'ButtonBarSize', options: Object.values(ButtonBarSize), default: ButtonBarSize.Medium, description: 'Size applied to all child items via context.' })
+], ButtonBar.prototype, "size", void 0);
+__decorate([
+    prop({ type: 'string', attribute: 'aria-label', description: 'Accessible label for the group.' })
+], ButtonBar.prototype, "ariaLabel", void 0);
+ButtonBar = __decorate([
+    quanticElement('quantic-button-bar')
+], ButtonBar);
+export { ButtonBar };

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

@@ -0,0 +1,6 @@
+export declare const ButtonBarSize: {
+    readonly Small: "sm";
+    readonly Medium: "md";
+    readonly Large: "lg";
+};
+export type ButtonBarSize = (typeof ButtonBarSize)[keyof typeof ButtonBarSize];

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

@@ -0,0 +1,5 @@
+export const ButtonBarSize = {
+    Small: 'sm',
+    Medium: 'md',
+    Large: 'lg',
+};

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

@@ -0,0 +1,4 @@
+import { ButtonBarSize } from './index.constants';
+export declare const sizeContext: {
+    __context__: ButtonBarSize;
+};

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

@@ -0,0 +1,2 @@
+import { createContext } from '@lit/context';
+export const sizeContext = createContext('button-bar.size');

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

@@ -0,0 +1,3 @@
+export * from './button-bar';
+export * from './button-bar-item';
+export * from './index.constants';

package/dist/button-bar/index.js

@@ -0,0 +1,3 @@
+export * from './button-bar';
+export * from './button-bar-item';
+export * from './index.constants';

package/dist/{types/button-group → button-bar}/index.stories.d.ts

@@ -1,6 +1,6 @@
-import { ButtonGroupSize } from './index.constants';
+import { ButtonBarSize } from './index.constants';
 interface Args {
-    size: ButtonGroupSize | undefined;
+    size: ButtonBarSize | undefined;
     items: string[];
     activeIndex: number | undefined;
 }