@ctrliq/quantic-components 1.82.0 → 1.84.0

package/dist/shared/meta.types.d.ts

@@ -19,6 +19,10 @@ export interface ComponentMeta {
     description: string;
     category: 'action' | 'form' | 'display' | 'layout' | 'feedback' | 'navigation' | 'data';
     ascii?: string;
+    deprecated?: {
+        use: string;
+        reason?: string;
+    };
     props?: Record<string, PropMeta>;
     slots?: Record<string, SlotMeta>;
     events?: Record<string, EventMeta>;

package/dist/tabs/index.stories.js

@@ -315,7 +315,7 @@ NavigationOnly.parameters = {
     docs: {
         ...NavigationOnly.parameters?.docs,
         description: {
-            story: 'Tabs can be used for navigation without content panels, similar to a segmented control or navigation bar.',
+            story: 'Tabs can be used for navigation without content panels, similar to a button bar or navigation bar.',
         },
     },
 };

package/dist/tag/index.d.ts

@@ -1,4 +1,5 @@
 export * from './tag.component';
 export * from './status-tag.component';
 export * from './count-tag.component';
+export * from './tag-group.component';
 export { TagSize } from './index.constants';

package/dist/tag/index.js

@@ -1,4 +1,5 @@
 export * from './tag.component';
 export * from './status-tag.component';
 export * from './count-tag.component';
+export * from './tag-group.component';
 export { TagSize } from './index.constants';

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

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

package/dist/tag/tag-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 TagGroup = class TagGroup extends QuanticElement {
+    constructor() {
+        super(...arguments);
+        this.ariaLabel = null;
+    }
+    render() {
+        return html `
+      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Tags'}>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+TagGroup.meta = {
+    tag: 'quantic-tag-group',
+    description: 'A run of quantic-tag, quantic-status-tag or quantic-count-tag sharing one accessible name and a consistent gap. ' +
+        'Wraps across lines, and each tag keeps its own size. Gap: --quantic-component-tag-group-gap. ' +
+        'Use quantic-badge-group for badges.',
+    category: 'display',
+    slots: {
+        '': {
+            description: 'quantic-tag, quantic-status-tag or quantic-count-tag elements.',
+        },
+    },
+    subComponents: ['quantic-tag', 'quantic-status-tag', 'quantic-count-tag'],
+    relatedTo: ['quantic-tag', 'quantic-badge-group'],
+};
+TagGroup.styles = css `
+    :host {
+      display: block;
+    }
+
+    .group {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(
+        --quantic-component-tag-group-gap,
+        var(--quantic-spacing-1)
+      );
+    }
+  `;
+__decorate([
+    prop({
+        type: 'string',
+        attribute: 'aria-label',
+        description: 'Accessible name for the group.',
+    })
+], TagGroup.prototype, "ariaLabel", void 0);
+TagGroup = __decorate([
+    quanticElement('quantic-tag-group')
+], TagGroup);
+export { TagGroup };

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

@@ -0,0 +1,34 @@
+import { TagSize } from './index.constants';
+interface Args {
+    label: string | undefined;
+    size: TagSize;
+    tags: string[];
+}
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: ("sm" | "md" | "lg")[];
+            description: string;
+        };
+        tags: {
+            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 Dismissible: import("../shared/story").StoryObject<object>;
+export declare const MixedTagTypes: import("../shared/story").StoryObject<object>;

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

@@ -0,0 +1,65 @@
+import { story } from '../shared/story';
+import { TagSize } from './index.constants';
+export default {
+    title: 'Components/Display/Tag/TagGroup',
+    component: 'quantic-tag-group',
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Accessible name for the group. Defaults to "Tags".',
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(TagSize),
+            description: 'Size set on each tag. The group does not own sizing.',
+        },
+        tags: {
+            control: 'object',
+            description: 'Tag labels',
+        },
+    },
+};
+const base = story({
+    args: {
+        label: undefined,
+        size: TagSize.Medium,
+        tags: ['Compute', 'Storage', 'Networking'],
+    },
+}).render(({ label, size, tags }) => {
+    const labelAttr = label === undefined ? '' : `aria-label="${label}"`;
+    const items = tags
+        .map((tag) => `<quantic-tag size="${size}">${tag}</quantic-tag>`)
+        .join('');
+    return `<quantic-tag-group ${labelAttr}>${items}</quantic-tag-group>`;
+});
+export const Default = base;
+export const WithAccessibleName = base.override({ label: 'Cluster capabilities' });
+// The group has no gap, axis or wrap props on purpose: a run of tags always wraps the
+// same way, so the rhythm is a decision rather than a knob.
+export const Wrapping = base.override({
+    tags: [
+        'Compute',
+        'Storage',
+        'Networking',
+        'Scheduling',
+        'Monitoring',
+        'Provisioning',
+        'Authentication',
+        'Observability',
+    ],
+});
+export const Dismissible = story().render(() => `
+    <quantic-tag-group aria-label="Applied filters">
+      <quantic-tag dismissible>Compute</quantic-tag>
+      <quantic-tag dismissible>Storage</quantic-tag>
+      <quantic-tag dismissible>Networking</quantic-tag>
+    </quantic-tag-group>
+  `);
+export const MixedTagTypes = story().render(() => `
+    <quantic-tag-group aria-label="Cluster state">
+      <quantic-tag>Compute</quantic-tag>
+      <quantic-status-tag color="success">Healthy</quantic-status-tag>
+      <quantic-count-tag count="12">Nodes</quantic-count-tag>
+    </quantic-tag-group>
+  `);

package/dist/types/action-group/action-group.component.d.ts

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

package/dist/types/action-group/index.d.ts

@@ -0,0 +1 @@
+export * from './action-group.component';

package/dist/types/action-group/index.stories.d.ts

@@ -0,0 +1,25 @@
+interface Args {
+    label: string | undefined;
+    actions: string[];
+}
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+            description: string;
+        };
+        actions: {
+            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 ThreeActions: import("../shared/story").StoryObject<Args>;
+export declare const IconActions: import("../shared/story").StoryObject<object>;
+export declare const InsideADialogFooter: import("../shared/story").StoryObject<object>;