@ctrliq/quantic-components 1.68.0 → 1.68.1

package/dist/shared/shared.utils.test.js

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { clamp, emitValueChanged } from './shared.utils';
+import { clamp, emitValueChanged, setHostVar } from './shared.utils';
 function fakeHost() {
     const dispatchEvent = vi.fn();
     return { host: { dispatchEvent }, dispatchEvent };
@@ -63,3 +63,68 @@ describe('emitValueChanged', () => {
         expect(event.detail).toEqual({ value: 42 });
     });
 });
+function browserHost() {
+    const setProperty = vi.fn();
+    const setAttribute = vi.fn();
+    return {
+        style: { setProperty },
+        getAttribute: vi.fn(),
+        setAttribute,
+        setProperty,
+    };
+}
+function ssrHost(styleAttr) {
+    const attrs = {};
+    if (styleAttr !== undefined)
+        attrs.style = styleAttr;
+    return {
+        getAttribute: (name) => attrs[name] ?? null,
+        setAttribute: (name, value) => {
+            attrs[name] = value;
+        },
+        attrs,
+    };
+}
+describe('setHostVar', () => {
+    it('uses style.setProperty when CSSStyleDeclaration is available', () => {
+        const host = browserHost();
+        setHostVar(host, '--icon-size', '32px');
+        expect(host.setProperty).toHaveBeenCalledWith('--icon-size', '32px');
+        expect(host.setAttribute).not.toHaveBeenCalled();
+    });
+    it('does not treat a style object without setProperty as a browser host', () => {
+        const host = ssrHost();
+        setHostVar({ ...host, style: {} }, '--icon-size', '32px');
+        expect(host.attrs.style).toBe('--icon-size: 32px');
+    });
+    it('writes the style attribute when the SSR shim has no style', () => {
+        const host = ssrHost();
+        setHostVar(host, '--icon-size', '32px');
+        expect(host.attrs.style).toBe('--icon-size: 32px');
+    });
+    it('appends the custom property without clobbering existing declarations', () => {
+        const host = ssrHost('color: red');
+        setHostVar(host, '--icon-size', '32px');
+        expect(host.attrs.style).toBe('color: red; --icon-size: 32px');
+    });
+    it('appends after a trailing semicolon', () => {
+        const host = ssrHost('color: red;');
+        setHostVar(host, '--icon-size', '32px');
+        expect(host.attrs.style).toBe('color: red; --icon-size: 32px');
+    });
+    it('replaces an existing custom property', () => {
+        const host = ssrHost('--icon-size: 16px; color: red');
+        setHostVar(host, '--icon-size', '32px');
+        expect(host.attrs.style).toBe('--icon-size: 32px; color: red');
+    });
+    it('replaces a compact declaration without spaces', () => {
+        const host = ssrHost('color:red;--icon-size:16px');
+        setHostVar(host, '--icon-size', '32px');
+        expect(host.attrs.style).toBe('color:red;--icon-size: 32px');
+    });
+    it('does not replace a longer custom property with the same prefix', () => {
+        const host = ssrHost('--icon-size-extra: 8px');
+        setHostVar(host, '--icon-size', '32px');
+        expect(host.attrs.style).toBe('--icon-size-extra: 8px; --icon-size: 32px');
+    });
+});

package/dist/shared/slot-utils.d.ts

@@ -31,6 +31,10 @@ import { type CSSResult } from 'lit';
  * - `:host(:has([slot="name"])) { rules }` — standard shadow DOM (Safari, Firefox)
  * - `@scope { :scope:has([slot="name"]) { rules } }` — Chrome DSD
  *
+ * Pass `''` for the default (unnamed) slot — matches light DOM children without
+ * a `slot` attribute. Text-only default content still relies on the mixin's
+ * slotchange JS path.
+ *
  * @example
  * whenSlotPresent('action-icon', css`
  *   .main { padding-right: calc(var(--quantic-component-card-padding) * 2); }

package/dist/shared/slot-utils.js

@@ -45,6 +45,10 @@ import { unsafeCSS } from 'lit';
  * - `:host(:has([slot="name"])) { rules }` — standard shadow DOM (Safari, Firefox)
  * - `@scope { :scope:has([slot="name"]) { rules } }` — Chrome DSD
  *
+ * Pass `''` for the default (unnamed) slot — matches light DOM children without
+ * a `slot` attribute. Text-only default content still relies on the mixin's
+ * slotchange JS path.
+ *
  * @example
  * whenSlotPresent('action-icon', css`
  *   .main { padding-right: calc(var(--quantic-component-card-padding) * 2); }
@@ -52,6 +56,10 @@ import { unsafeCSS } from 'lit';
  */
 export function whenSlotPresent(slotName, rules) {
     const r = rules.cssText;
+    if (slotName === '') {
+        return unsafeCSS(`:host(:has(> :not([slot]))) { ${r} } ` +
+            `@scope { :scope:has(> :not([slot])) { ${r} } }`);
+    }
     const name = escapeCssString(slotName);
     return unsafeCSS(`:host(:has([slot="${name}"])) { ${r} } ` +
         `@scope { :scope:has([slot="${name}"]) { ${r} } }`);

package/dist/tabs/button.component.d.ts

@@ -12,6 +12,7 @@ export declare class TabButton extends QuanticElement {
     tabsId: string;
     disabled: boolean;
     index: number;
+    protected willUpdate(): void;
     private buttonRef;
     private _onClick;
     static styles: import("lit").CSSResult;

package/dist/tabs/button.component.js

@@ -7,11 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css } from 'lit';
 import { QuanticElement, quanticElement } from '../shared/quantic-element';
 import { consume } from '@lit/context';
-import { TabsSize, TabsOrientation } from './index.constants';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import { TabsSize, TabsOrientation, buttonsSlot } from './index.constants';
 import { idContext, sizeContext, orientationContext, selectedIndexContext, } from './index.context';
-import { getButtonId, getPanelId } from './index.utils';
+import { getButtonId, getPanelId, ensureHostSlot } from './index.utils';
 import { event, prop } from '../shared/component-meta.decorators';
 let TabButton = class TabButton extends QuanticElement {
     constructor() {
@@ -26,6 +26,11 @@ let TabButton = class TabButton extends QuanticElement {
         this.disabled = false;
         this.buttonRef = createRef();
     }
+    willUpdate() {
+        // DSD projects named slots from the light-DOM `slot` attr at parse/SSR time.
+        ensureHostSlot(this, buttonsSlot);
+        this.toggleAttribute('selected', this.selectedIndex === this.index);
+    }
     _onClick() {
         if (this.disabled)
             return;
@@ -54,6 +59,7 @@ let TabButton = class TabButton extends QuanticElement {
       <button
         ${ref(this.buttonRef)}
         class=${classes}
+        part="button"
         id=${getButtonId(this.tabsId, this.index)}
         role="tab"
         aria-selected=${isActive}
@@ -65,6 +71,7 @@ let TabButton = class TabButton extends QuanticElement {
       >
         <slot name="icon"></slot>
         <slot></slot>
+        <span class="indicator" part="indicator" aria-hidden="true"></span>
       </button>
     `;
     }
@@ -73,13 +80,17 @@ TabButton.meta = {
     tag: 'quantic-tab-button',
     description: 'Individual tab trigger button within quantic-tabs. ' +
         'Set index to match the corresponding quantic-tab-panel. ' +
-        'Size and orientation are inherited via context from the parent quantic-tabs.',
+        'Size and orientation are inherited via context from the parent quantic-tabs. ' +
+        'Reflects a selected attribute while active. Restyle the mark with ::part(indicator) ' +
+        'or --quantic-component-tab-indicator-* / --quantic-component-tab-active-bg.',
     category: 'navigation',
     slots: {
         icon: {
             description: 'Icon element, displayed before the label and scaled to the tab size.',
         },
-        '': { description: 'Tab label text.' },
+        '': {
+            description: 'Tab label text or custom content.',
+        },
     },
     relatedTo: ['quantic-tabs', 'quantic-tab-panel'],
 };
@@ -94,7 +105,12 @@ TabButton.styles = css `
       color: var(--quantic-text-quaternary);
       font-family: var(--quantic-font-family-body);
       border: none;
-      background: none;
+      background-color: var(--quantic-component-tab-bg, transparent);
+      border-radius: var(
+        --quantic-component-tab-radius,
+        var(--quantic-radius-sm)
+      );
+      box-sizing: border-box;
       position: relative;
       padding: var(--quantic-spacing-2) var(--quantic-spacing-3);
       font-weight: var(--quantic-font-weight-semibold);
@@ -103,6 +119,7 @@ TabButton.styles = css `
       display: inline-flex;
       align-items: center;
       gap: var(--quantic-spacing-2);
+      transition: background-color 0.15s ease-in-out;
     }
 
     ::slotted([slot='icon']) {
@@ -129,6 +146,16 @@ TabButton.styles = css `
 
     .orientation--vertical {
       text-align: left;
+      width: 100%;
+      --indicator-inset: 0 auto 0 0;
+      --indicator-width: var(
+        --quantic-component-tab-indicator-thickness,
+        var(--quantic-spacing-0-5)
+      );
+      --indicator-height: auto;
+      --indicator-hidden: scaleY(0);
+      --indicator-shown: scaleY(1);
+      --indicator-origin: top;
     }
 
     .size--xs {
@@ -158,6 +185,11 @@ TabButton.styles = css `
 
     .is-active {
       color: var(--quantic-text-primary);
+      background-color: var(--quantic-component-tab-active-bg, transparent);
+    }
+
+    .main:hover:not(.is-active):not(.is-disabled) {
+      background-color: var(--quantic-component-tab-hover-bg, transparent);
     }
 
     /* focus ring */
@@ -167,7 +199,10 @@ TabButton.styles = css `
       display: block;
       position: absolute;
       inset: 0;
-      border-radius: var(--quantic-radius-sm);
+      border-radius: var(
+        --quantic-component-tab-radius,
+        var(--quantic-radius-sm)
+      );
       border: 2px solid var(--quantic-focus-ring);
       transition: all 0.2s ease-in-out;
       opacity: 0;
@@ -179,42 +214,50 @@ TabButton.styles = css `
       border: 2px solid var(--quantic-focus-ring);
     }
 
-    /* active indicator */
-    .main::after {
-      content: '';
+    .orientation--horizontal {
+      --indicator-inset: auto 0 -1px 0;
+      --indicator-width: auto;
+      --indicator-height: var(
+        --quantic-component-tab-indicator-thickness,
+        3px
+      );
+      --indicator-hidden: scaleX(0);
+      --indicator-shown: scaleX(1);
+      --indicator-origin: left;
+    }
+
+    .indicator {
       display: block;
+      pointer-events: none;
       position: absolute;
-      background-color: var(--quantic-fg-brand-primary);
+      inset: var(--quantic-component-tab-indicator-inset, var(--indicator-inset));
+      width: var(--quantic-component-tab-indicator-width, var(--indicator-width));
+      height: var(
+        --quantic-component-tab-indicator-height,
+        var(--indicator-height)
+      );
+      background-color: var(
+        --quantic-component-tab-indicator-color,
+        var(--quantic-fg-brand-primary)
+      );
+      border-radius: var(--quantic-component-tab-indicator-radius, 0);
+      transform: var(
+        --quantic-component-tab-indicator-transform,
+        var(--indicator-hidden)
+      );
+      transform-origin: var(
+        --quantic-component-tab-indicator-origin,
+        var(--indicator-origin)
+      );
       transition: transform 0.2s ease-in-out;
-      opacity: 1;
-    }
-
-    .orientation--horizontal::after {
-      bottom: -1px;
-      left: 0;
-      right: 0;
-      height: 3px;
-      transform: scaleX(0);
-      transform-origin: left;
-    }
-
-    .orientation--horizontal:hover::after,
-    .orientation--horizontal.is-active::after {
-      transform: scaleX(1);
-    }
-
-    .orientation--vertical::after {
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: var(--quantic-spacing-0-5);
-      transform: scaleY(0);
-      transform-origin: top;
     }
 
-    .orientation--vertical:hover::after,
-    .orientation--vertical.is-active::after {
-      transform: scaleY(1);
+    .main:hover .indicator,
+    .is-active .indicator {
+      transform: var(
+        --quantic-component-tab-indicator-transform,
+        var(--indicator-shown)
+      );
     }
 
     .is-disabled {
@@ -224,7 +267,7 @@ TabButton.styles = css `
       opacity: 0.5;
     }
 
-    .is-disabled::after {
+    .is-disabled .indicator {
       display: none;
     }
   `;

package/dist/tabs/index.constants.d.ts

@@ -18,3 +18,5 @@ export type TabsSize = (typeof TabsSize)[keyof typeof TabsSize];
 export declare const tabsTag = "quantic-tabs";
 export declare const buttonTag = "quantic-tab-button";
 export declare const panelTag = "quantic-tab-panel";
+export declare const buttonsSlot = "buttons";
+export declare const panelsSlot = "panels";

package/dist/tabs/index.constants.js

@@ -15,3 +15,5 @@ export const TabsSize = {
 export const tabsTag = 'quantic-tabs';
 export const buttonTag = 'quantic-tab-button';
 export const panelTag = 'quantic-tab-panel';
+export const buttonsSlot = 'buttons';
+export const panelsSlot = 'panels';

package/dist/tabs/index.stories.d.ts

@@ -40,7 +40,10 @@ export declare const Small: import("../shared/story").StoryObject<Args>;
 export declare const Medium: import("../shared/story").StoryObject<Args>;
 export declare const Large: import("../shared/story").StoryObject<Args>;
 export declare const CustomGap: import("../shared/story").StoryObject<Args>;
+export declare const CustomIndicator: import("../shared/story").StoryObject<Args>;
 export declare const WithDisabled: import("../shared/story").StoryObject<Args>;
 export declare const NavigationOnly: import("../shared/story").StoryObject<Args>;
 export declare const WithIcons: import("../shared/story").StoryObject<Args>;
 export declare const NestedTabs: import("../shared/story").StoryObject<Args>;
+export declare const IndependentlyScrollable: import("../shared/story").StoryObject<Args>;
+export declare const CollapseBelow: import("../shared/story").StoryObject<Args>;

package/dist/tabs/index.stories.js

@@ -101,6 +101,69 @@ CustomGap.parameters = {
         },
     },
 };
+export const CustomIndicator = story({
+    args: {
+        selectedIndex: 0,
+        orientation: TabsOrientation.Vertical,
+        size: TabsSize.Medium,
+    },
+}).render(({ html, selectedIndex = 0, orientation, size }) => html `
+  <style>
+    .dot-tabs {
+      --quantic-component-tab-indicator-inset: 50% var(--quantic-spacing-3) auto auto;
+      --quantic-component-tab-indicator-width: var(--quantic-spacing-2);
+      --quantic-component-tab-indicator-height: var(--quantic-spacing-2);
+      --quantic-component-tab-indicator-radius: 50%;
+      --quantic-component-tab-indicator-origin: center;
+      --quantic-component-tab-indicator-transform: translateY(-50%) scale(0);
+      --quantic-component-tab-active-bg: var(--quantic-bg-active);
+      --quantic-component-tab-hover-bg: var(--quantic-bg-secondary-hover);
+      --quantic-component-tab-radius: var(--quantic-radius-md);
+    }
+    .dot-tabs quantic-tab-button[selected] {
+      --quantic-component-tab-indicator-transform: translateY(-50%) scale(1);
+    }
+    .dot-tabs quantic-tab-button::part(button) {
+      width: 100%;
+      padding-inline-end: var(--quantic-spacing-8);
+    }
+    .dot-tabs::part(nav) {
+      gap: var(--quantic-spacing-1);
+    }
+  </style>
+  <quantic-tabs
+    class="dot-tabs"
+    selected-index=${selectedIndex}
+    size=${size}
+    orientation=${orientation}
+  >
+    <quantic-tab-button index="0">Profile</quantic-tab-button>
+    <quantic-tab-button index="1">Notifications</quantic-tab-button>
+    <quantic-tab-button index="2">Security</quantic-tab-button>
+
+    <quantic-tab-panel index="0">
+      <quantic-text size="lg">Jane Doe</quantic-text>
+      <quantic-text>Email: jane.doe@example.com</quantic-text>
+    </quantic-tab-panel>
+    <quantic-tab-panel index="1">
+      <quantic-text size="md">Email Notifications: Enabled</quantic-text>
+    </quantic-tab-panel>
+    <quantic-tab-panel index="2">
+      <quantic-text size="md">Change Password</quantic-text>
+    </quantic-tab-panel>
+  </quantic-tabs>
+`);
+CustomIndicator.parameters = {
+    ...CustomIndicator.parameters,
+    docs: {
+        ...CustomIndicator.parameters?.docs,
+        description: {
+            story: 'The active mark is `::part(indicator)`. Selected tabs reflect a `selected` attribute. ' +
+                'Override `--quantic-component-tab-indicator-*`, `--quantic-component-tab-active-bg`, ' +
+                'and `--quantic-component-tab-hover-bg` to change the default line into a trailing dot with a filled background.',
+        },
+    },
+};
 export const WithDisabled = story({
     args: {
         selectedIndex: 0,
@@ -256,3 +319,107 @@ NavigationOnly.parameters = {
         },
     },
 };
+export const IndependentlyScrollable = story({
+    args: {
+        selectedIndex: 0,
+        orientation: TabsOrientation.Vertical,
+        size: TabsSize.Medium,
+    },
+}).render(({ html, selectedIndex = 0, orientation, size }) => html `
+  <style>
+    .scroll-tabs-frame {
+      height: 16rem;
+      border: 1px solid var(--quantic-border-secondary);
+      border-radius: var(--quantic-radius-md);
+      padding: var(--quantic-spacing-4);
+    }
+    .scroll-tabs-frame quantic-tabs {
+      height: 100%;
+    }
+    .scroll-tabs-frame quantic-tabs::part(panels) {
+      overflow: auto;
+    }
+  </style>
+  <div class="scroll-tabs-frame">
+    <quantic-tabs
+      selected-index=${selectedIndex}
+      size=${size}
+      orientation=${orientation}
+    >
+      <quantic-tab-button index="0">Profile</quantic-tab-button>
+      <quantic-tab-button index="1">Notifications</quantic-tab-button>
+      <quantic-tab-button index="2">Security</quantic-tab-button>
+
+      <quantic-tab-panel index="0">
+        ${Array.from({ length: 12 }, (_, i) => html `<quantic-text>Profile row ${i + 1}</quantic-text>`)}
+      </quantic-tab-panel>
+      <quantic-tab-panel index="1">
+        <quantic-text>Email Notifications: Enabled</quantic-text>
+      </quantic-tab-panel>
+      <quantic-tab-panel index="2">
+        <quantic-text>Change Password</quantic-text>
+      </quantic-tab-panel>
+    </quantic-tabs>
+  </div>
+`);
+IndependentlyScrollable.parameters = {
+    ...IndependentlyScrollable.parameters,
+    docs: {
+        ...IndependentlyScrollable.parameters?.docs,
+        description: {
+            story: 'Give the tabs a bounded height, then opt the panel column into scrolling with `::part(panels) { overflow: auto }`. ' +
+                'The tab list (`::part(nav)`) stays put. Default overflow is unchanged, so unconstrained tabs still grow with their content.',
+        },
+    },
+};
+export const CollapseBelow = story({
+    args: {
+        selectedIndex: 0,
+        orientation: TabsOrientation.Vertical,
+        size: TabsSize.Medium,
+    },
+}).render(({ html, selectedIndex = 0, orientation, size }) => html `
+  <style>
+    .stack-tabs-frame {
+      width: 28rem;
+      max-width: 100%;
+      border: 1px solid var(--quantic-border-secondary);
+      border-radius: var(--quantic-radius-md);
+      padding: var(--quantic-spacing-4);
+      resize: horizontal;
+      overflow: auto;
+    }
+  </style>
+  <div class="stack-tabs-frame">
+    <quantic-tabs
+      selected-index=${selectedIndex}
+      size=${size}
+      orientation=${orientation}
+      collapse-below="640px"
+    >
+      <quantic-tab-button index="0">Profile</quantic-tab-button>
+      <quantic-tab-button index="1">Notifications</quantic-tab-button>
+      <quantic-tab-button index="2">Security</quantic-tab-button>
+
+      <quantic-tab-panel index="0">
+        <quantic-text>Stacked when the tabs container is 640px wide or less.</quantic-text>
+      </quantic-tab-panel>
+      <quantic-tab-panel index="1">
+        <quantic-text>Email Notifications: Enabled</quantic-text>
+      </quantic-tab-panel>
+      <quantic-tab-panel index="2">
+        <quantic-text>Change Password</quantic-text>
+      </quantic-tab-panel>
+    </quantic-tabs>
+  </div>
+`);
+CollapseBelow.parameters = {
+    ...CollapseBelow.parameters,
+    docs: {
+        ...CollapseBelow.parameters?.docs,
+        description: {
+            story: 'Same opt-in as splitter: set `collapse-below` to a pixel width (for example `640px`). ' +
+                'Vertical tabs stay side-by-side above that size, then stack list-above-panels below it. Unset means they never stack.',
+        },
+    },
+};

package/dist/tabs/index.utils.d.ts

@@ -1,2 +1,4 @@
 export declare const getButtonId: (id: string, index: number) => string;
 export declare const getPanelId: (id: string, index: number) => string;
+/** Named-slot projection in DSD requires `slot` on the child tag at SSR time. */
+export declare function ensureHostSlot(el: HTMLElement, slotName: string): void;

package/dist/tabs/index.utils.js

@@ -1,2 +1,8 @@
 export const getButtonId = (id, index) => `tabbutton-${id}-${index}`;
 export const getPanelId = (id, index) => `tabpanel-${id}-${index}`;
+/** Named-slot projection in DSD requires `slot` on the child tag at SSR time. */
+export function ensureHostSlot(el, slotName) {
+    if (!el.hasAttribute('slot')) {
+        el.setAttribute('slot', slotName);
+    }
+}

package/dist/tabs/panel.component.d.ts

@@ -6,6 +6,7 @@ export declare class TabPanel extends QuanticElement {
     selectedIndex: number;
     tabsId: string;
     index: number;
+    protected willUpdate(): void;
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/tabs/panel.component.js

@@ -9,7 +9,8 @@ import { QuanticElement, quanticElement } from '../shared/quantic-element';
 import { consume } from '@lit/context';
 import { classMap } from 'lit/directives/class-map.js';
 import { idContext, selectedIndexContext } from './index.context';
-import { getButtonId, getPanelId } from './index.utils';
+import { getButtonId, getPanelId, ensureHostSlot } from './index.utils';
+import { panelsSlot } from './index.constants';
 import { prop } from '../shared/component-meta.decorators';
 let TabPanel = class TabPanel extends QuanticElement {
     constructor() {
@@ -18,6 +19,10 @@ let TabPanel = class TabPanel extends QuanticElement {
         this.selectedIndex = this.defaultSelectedIndex;
         this.tabsId = '';
     }
+    willUpdate() {
+        // DSD projects named slots from the light-DOM `slot` attr at parse/SSR time.
+        ensureHostSlot(this, panelsSlot);
+    }
     render() {
         const active = this.selectedIndex === this.index;
         const classes = classMap({

package/dist/tabs/tabs.component.d.ts

@@ -1,3 +1,4 @@
+import { type PropertyValues } from 'lit';
 import { QuanticElement } from '../shared/quantic-element';
 import { TabsSize, TabsOrientation } from './index.constants';
 import type { ComponentMeta } from '../shared/meta.types';
@@ -7,11 +8,17 @@ export declare class Tabs extends QuanticElement {
     orientation: TabsOrientation;
     selectedIndex: number;
     id: string;
-    private _panelElements;
+    collapseBelow: string;
+    private resizeObserver;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     firstUpdated(): void;
+    protected updated(changed: PropertyValues): void;
+    private setupResizeObserver;
+    private checkStacked;
+    private checkStackedForSize;
     private _assignSlots;
     private _onTabSelect;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     render(): import("lit").TemplateResult<1>;
 }