@ctrliq/quantic-components 1.83.0 → 1.84.1

package/dist/select/index.js

@@ -144,9 +144,9 @@ Select.styles = css `
       border-radius: var(--quantic-component-select-border-radius, var(--quantic-radius-sm));
       padding: var(
           --quantic-component-select-padding-block,
-          var(--quantic-spacing-md)
+          var(--quantic-internal-select-padding-block, var(--quantic-spacing-md))
         )
-        var(--quantic-component-select-padding-inline, var(--quantic-spacing-3));
+        var(--quantic-component-select-padding-inline, var(--quantic-internal-select-padding-inline, var(--quantic-spacing-3)));
       font-size: var(
         --quantic-component-select-font-size,
         var(--quantic-font-size-body-md)
@@ -173,14 +173,14 @@ Select.styles = css `
 
     .main.size--xs {
       font-size: 13px;
-      --quantic-component-select-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-select-padding-block: var(--quantic-spacing-xxs);
+      --quantic-internal-select-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-select-padding-block: var(--quantic-spacing-xxs);
     }
 
     .main.size--sm {
       font-size: var(--quantic-font-size-body-sm);
-      --quantic-component-select-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-select-padding-block: var(--quantic-spacing-sm);
+      --quantic-internal-select-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-select-padding-block: var(--quantic-spacing-sm);
     }
 
     .main.size--md {
@@ -189,8 +189,8 @@ Select.styles = css `
 
     .main.size--lg {
       font-size: var(--quantic-font-size-body-lg);
-      --quantic-component-select-padding-inline: var(--quantic-spacing-4);
-      --quantic-component-select-padding-block: var(--quantic-spacing-3);
+      --quantic-internal-select-padding-inline: var(--quantic-spacing-4);
+      --quantic-internal-select-padding-block: var(--quantic-spacing-3);
     }
 
     select {

package/dist/spinner/index.js

@@ -97,7 +97,11 @@ Spinner.styles = css `
       width: 24px;
       height: 24px;
       border-radius: 50%;
-      border: 3px solid var(--quantic-component-spinner-color, currentColor);
+      border: 3px solid
+        var(
+          --quantic-component-spinner-color,
+          var(--quantic-internal-spinner-color, currentColor)
+        );
       border-top-color: transparent;
     }
 
@@ -129,10 +133,10 @@ Spinner.styles = css `
       border-width: 0;
     }
 
-    ${unsafeCSS(generateColorStyles((color) => `--quantic-component-spinner-color: var(--quantic-utility-${color}-500);`))}
+    ${unsafeCSS(generateColorStyles((color) => `--quantic-internal-spinner-color: var(--quantic-utility-${color}-500);`))}
 
     .color--brand {
-      --quantic-component-spinner-color: var(--quantic-fg-brand-primary);
+      --quantic-internal-spinner-color: var(--quantic-fg-brand-primary);
     }
 
     @keyframes spin {

package/dist/table/table-cell.component.js

@@ -49,8 +49,8 @@ TableCell.meta = {
 TableCell.styles = css `
     :host {
       display: table-cell;
-      padding: var(--quantic-component-table-padding);
-      font-size: var(--quantic-component-table-font-size);
+      padding: var(--quantic-component-table-padding, var(--quantic-internal-table-padding));
+      font-size: var(--quantic-component-table-font-size, var(--quantic-internal-table-font-size));
       color: var(--quantic-component-table-color);
       vertical-align: middle;
       text-align: var(--cell-align, left);

package/dist/table/table-head.component.js

@@ -85,7 +85,7 @@ TableHead.meta = {
 TableHead.styles = css `
     :host {
       display: table-cell;
-      padding: var(--quantic-component-table-padding);
+      padding: var(--quantic-component-table-padding, var(--quantic-internal-table-padding));
       font-weight: var(--quantic-font-weight-semibold);
       color: var(--quantic-component-table-header-color);
       border-bottom: 1px solid var(--quantic-component-table-border-color);

package/dist/table/table.component.js

@@ -65,11 +65,11 @@ Table.styles = css `
       display: block;
       width: fit-content;
       font-family: var(--quantic-font-family-body);
-      font-size: var(--quantic-component-table-font-size);
+      font-size: var(--quantic-component-table-font-size, var(--quantic-internal-table-font-size));
       overflow-x: auto;
 
-      --quantic-component-table-padding: var(--quantic-spacing-3);
-      --quantic-component-table-font-size: var(--quantic-font-size-body-sm);
+      --quantic-internal-table-padding: var(--quantic-spacing-3);
+      --quantic-internal-table-font-size: var(--quantic-font-size-body-sm);
       --quantic-component-table-color: var(--quantic-text-secondary);
       --quantic-component-table-header-color: var(--quantic-text-secondary);
       --quantic-component-table-border-color: var(--quantic-border-secondary);
@@ -86,46 +86,46 @@ Table.styles = css `
 
     /* Size */
     :host([size='xs']) {
-      --quantic-component-table-padding: var(--quantic-spacing-3);
-      --quantic-component-table-font-size: var(--quantic-font-size-body-xs);
+      --quantic-internal-table-padding: var(--quantic-spacing-3);
+      --quantic-internal-table-font-size: var(--quantic-font-size-body-xs);
     }
 
     :host([size='sm']) {
-      --quantic-component-table-padding: var(--quantic-spacing-4);
-      --quantic-component-table-font-size: var(--quantic-font-size-body-sm);
+      --quantic-internal-table-padding: var(--quantic-spacing-4);
+      --quantic-internal-table-font-size: var(--quantic-font-size-body-sm);
     }
 
     :host([size='md']) {
-      --quantic-component-table-padding: var(--quantic-spacing-5);
-      --quantic-component-table-font-size: var(--quantic-font-size-body-md);
+      --quantic-internal-table-padding: var(--quantic-spacing-5);
+      --quantic-internal-table-font-size: var(--quantic-font-size-body-md);
     }
 
     :host([size='lg']) {
-      --quantic-component-table-padding: var(--quantic-spacing-6);
-      --quantic-component-table-font-size: var(--quantic-font-size-body-md);
+      --quantic-internal-table-padding: var(--quantic-spacing-6);
+      --quantic-internal-table-font-size: var(--quantic-font-size-body-md);
     }
 
     /* Dense variants - relative to size */
     :host([dense][size='xs']) {
-      --quantic-component-table-padding: var(--quantic-spacing-1-5);
+      --quantic-internal-table-padding: var(--quantic-spacing-1-5);
     }
 
     :host([dense][size='sm']) {
-      --quantic-component-table-padding: var(--quantic-spacing-2);
+      --quantic-internal-table-padding: var(--quantic-spacing-2);
     }
 
     :host([dense][size='md']) {
-      --quantic-component-table-padding: var(--quantic-spacing-2);
+      --quantic-internal-table-padding: var(--quantic-spacing-2);
     }
 
     :host([dense][size='lg']) {
-      --quantic-component-table-padding: var(--quantic-spacing-3);
+      --quantic-internal-table-padding: var(--quantic-spacing-3);
     }
 
     .toolbar,
     .controls {
       display: block;
-      padding: var(--quantic-component-table-padding);
+      padding: var(--quantic-component-table-padding, var(--quantic-internal-table-padding));
     }
 
     .toolbar {

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

@@ -169,8 +169,8 @@ TextInput.styles = css `
       display: inline-block;
       width: 100%;
 
-      --quantic-component-text-input-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-text-input-padding-block: var(--quantic-spacing-md);
+      --quantic-internal-text-input-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-text-input-padding-block: var(--quantic-spacing-md);
       --quantic-component-text-input-bg: var(--quantic-bg-primary);
       --quantic-component-text-input-color: var(--quantic-text-primary);
     }
@@ -187,8 +187,8 @@ TextInput.styles = css `
       border-radius: var(--quantic-component-text-input-border-radius, var(--quantic-radius-sm));
       color: var(--quantic-component-text-input-color);
       background-color: var(--quantic-component-text-input-bg);
-      padding: var(--quantic-component-text-input-padding-block)
-        var(--quantic-component-text-input-padding-inline);
+      padding: var(--quantic-component-text-input-padding-block, var(--quantic-internal-text-input-padding-block))
+        var(--quantic-component-text-input-padding-inline, var(--quantic-internal-text-input-padding-inline));
       transition:
         border-color 0.2s ease-in-out,
         box-shadow 0.2s ease-in-out;
@@ -208,14 +208,14 @@ TextInput.styles = css `
 
     .main.size--xs {
       font-size: 13px;
-      --quantic-component-text-input-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-text-input-padding-block: var(--quantic-spacing-xxs);
+      --quantic-internal-text-input-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-text-input-padding-block: var(--quantic-spacing-xxs);
     }
 
     .main.size--sm {
       font-size: var(--quantic-font-size-body-sm);
-      --quantic-component-text-input-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-text-input-padding-block: var(--quantic-spacing-sm);
+      --quantic-internal-text-input-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-text-input-padding-block: var(--quantic-spacing-sm);
     }
 
     .main.size--md {
@@ -224,8 +224,8 @@ TextInput.styles = css `
 
     .main.size--lg {
       font-size: var(--quantic-font-size-body-lg);
-      --quantic-component-text-input-padding-inline: var(--quantic-spacing-4);
-      --quantic-component-text-input-padding-block: var(--quantic-spacing-3);
+      --quantic-internal-text-input-padding-inline: var(--quantic-spacing-4);
+      --quantic-internal-text-input-padding-block: var(--quantic-spacing-3);
     }
 
     .input {

package/dist/textarea/index.js

@@ -119,8 +119,8 @@ Textarea.styles = css `
       display: inline-block;
       width: 100%;
 
-      --quantic-component-textarea-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-textarea-padding-block: var(--quantic-spacing-md);
+      --quantic-internal-textarea-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-textarea-padding-block: var(--quantic-spacing-md);
       --quantic-component-textarea-bg: var(--quantic-bg-primary);
       --quantic-component-textarea-color: var(--quantic-text-primary);
     }
@@ -135,8 +135,8 @@ Textarea.styles = css `
       border-radius: var(--quantic-component-textarea-border-radius, var(--quantic-radius-sm));
       color: var(--quantic-component-textarea-color);
       background-color: var(--quantic-component-textarea-bg);
-      padding: var(--quantic-component-textarea-padding-block)
-        var(--quantic-component-textarea-padding-inline);
+      padding: var(--quantic-component-textarea-padding-block, var(--quantic-internal-textarea-padding-block))
+        var(--quantic-component-textarea-padding-inline, var(--quantic-internal-textarea-padding-inline));
       transition:
         border-color 0.2s ease-in-out,
         box-shadow 0.2s ease-in-out;
@@ -156,14 +156,14 @@ Textarea.styles = css `
 
     .main.size--xs {
       font-size: 13px;
-      --quantic-component-textarea-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-textarea-padding-block: var(--quantic-spacing-xxs);
+      --quantic-internal-textarea-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-textarea-padding-block: var(--quantic-spacing-xxs);
     }
 
     .main.size--sm {
       font-size: var(--quantic-font-size-body-sm);
-      --quantic-component-textarea-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-textarea-padding-block: var(--quantic-spacing-sm);
+      --quantic-internal-textarea-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-textarea-padding-block: var(--quantic-spacing-sm);
     }
 
     .main.size--md {
@@ -172,8 +172,8 @@ Textarea.styles = css `
 
     .main.size--lg {
       font-size: var(--quantic-font-size-body-lg);
-      --quantic-component-textarea-padding-inline: var(--quantic-spacing-4);
-      --quantic-component-textarea-padding-block: var(--quantic-spacing-3);
+      --quantic-internal-textarea-padding-inline: var(--quantic-spacing-4);
+      --quantic-internal-textarea-padding-block: var(--quantic-spacing-3);
     }
 
     .input {

package/dist/tooltip/tooltip.js

@@ -236,7 +236,6 @@ Tooltip.styles = css `
       --quantic-component-tooltip-font-size: var(--quantic-font-size-body-sm);
       --quantic-component-tooltip-line-height: var(--quantic-line-height-body-sm);
       --quantic-component-tooltip-z-index: 9999;
-      --quantic-component-tooltip-offset: 20px;
       --quantic-component-tooltip-arrow-size: var(--quantic-spacing-2);
     }
 

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>;