@deepfuture/dui-components 0.0.1

package/tooltip/index.js

@@ -0,0 +1,3 @@
+export { DuiTooltip, openChangeEvent } from "./tooltip.js";
+export { DuiTooltipTrigger } from "./tooltip-trigger.js";
+export { DuiTooltipPopup } from "./tooltip-popup.js";

package/tooltip/register.d.ts

@@ -0,0 +1 @@
+export {};

package/tooltip/register.js

@@ -0,0 +1,12 @@
+import { DuiTooltip } from "./tooltip.js";
+import { DuiTooltipTrigger } from "./tooltip-trigger.js";
+import { DuiTooltipPopup } from "./tooltip-popup.js";
+if (!customElements.get(DuiTooltip.tagName)) {
+    customElements.define(DuiTooltip.tagName, DuiTooltip);
+}
+if (!customElements.get(DuiTooltipTrigger.tagName)) {
+    customElements.define(DuiTooltipTrigger.tagName, DuiTooltipTrigger);
+}
+if (!customElements.get(DuiTooltipPopup.tagName)) {
+    customElements.define(DuiTooltipPopup.tagName, DuiTooltipPopup);
+}

package/tooltip/tooltip-context.d.ts

@@ -0,0 +1,17 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
+export type TooltipSide = "top" | "bottom";
+export type TooltipContext = {
+    readonly open: boolean;
+    readonly triggerId: string;
+    readonly popupId: string;
+    readonly side: TooltipSide;
+    readonly sideOffset: number;
+    readonly disabled: boolean;
+    readonly openTooltip: () => void;
+    readonly closeTooltip: () => void;
+    readonly setTriggerEl: (el: HTMLElement | undefined) => void;
+    readonly triggerEl: HTMLElement | undefined;
+};
+export declare const tooltipContext: {
+    __context__: TooltipContext;
+};

package/tooltip/tooltip-context.js

@@ -0,0 +1,3 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
+import { createContext } from "@lit/context";
+export const tooltipContext = createContext(Symbol("dui-tooltip"));

package/tooltip/tooltip-popup.d.ts

@@ -0,0 +1,16 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-tooltip-popup>` — The tooltip popup content container.
+ *
+ * @slot - Tooltip content.
+ */
+export declare class DuiTooltipPopup extends LitElement {
+    #private;
+    static tagName: "dui-tooltip-popup";
+    static styles: import("lit").CSSResult[];
+    /** Whether to show an arrow pointing to the trigger. */
+    accessor showArrow: boolean;
+    updated(): void;
+    render(): TemplateResult;
+}

package/tooltip/tooltip-popup.js

@@ -0,0 +1,162 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
+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, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { ContextConsumer } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { tooltipContext } from "./tooltip-context.js";
+import { FloatingPortalController } from "@deepfuture/dui-core/floating-portal-controller";
+import { renderArrow, } from "@deepfuture/dui-core/floating-popup-utils";
+const hostStyles = css `
+  :host {
+    display: none;
+  }
+`;
+/** Styles injected into the portal positioner. */
+const portalPopupStyles = [
+    css `
+    .Popup {
+      box-sizing: border-box;
+      padding: var(--space-0_5) var(--space-1_5);
+      border-radius: var(--radius-sm);
+      background: color-mix(
+        in oklch,
+        var(--foreground) 90%,
+        oklch(0 0 0 / 0)
+      );
+      backdrop-filter: blur(5px);
+      color: var(--background);
+      font-family: var(--font-sans);
+      font-size: var(--font-size-xs);
+      line-height: var(--line-height-snug);
+      box-shadow: var(--shadow-sm);
+      max-width: 20rem;
+      pointer-events: auto;
+      transform-origin: var(--transform-origin, center);
+      opacity: 1;
+      transform: scale(1);
+      transition-property: opacity, transform;
+      transition-duration: var(--duration-fastest);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    .Popup[data-starting-style],
+    .Popup[data-ending-style] {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+
+    .Popup[data-side="top"] {
+      --transform-origin: bottom center;
+    }
+
+    .Popup[data-side="bottom"] {
+      --transform-origin: top center;
+    }
+
+    .Arrow {
+      position: absolute;
+      width: 10px;
+      height: 6px;
+    }
+
+    .Arrow[data-side="top"] {
+      bottom: -5px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .Arrow[data-side="bottom"] {
+      top: -5px;
+      left: 50%;
+      transform: translateX(-50%) rotate(180deg);
+    }
+
+    .Arrow .arrow-fill {
+      fill: color-mix(in oklch, var(--foreground) 90%, oklch(0 0 0 / 0));
+    }
+
+    .Arrow .arrow-stroke {
+      fill: none;
+      stroke: none;
+    }
+  `,
+];
+/**
+ * `<dui-tooltip-popup>` — The tooltip popup content container.
+ *
+ * @slot - Tooltip content.
+ */
+export class DuiTooltipPopup extends LitElement {
+    static { this.tagName = "dui-tooltip-popup"; }
+    static { this.styles = [base, hostStyles]; }
+    #showArrow_accessor_storage = true;
+    /** Whether to show an arrow pointing to the trigger. */
+    get showArrow() { return this.#showArrow_accessor_storage; }
+    set showArrow(value) { this.#showArrow_accessor_storage = value; }
+    #side_accessor_storage = "top";
+    get #side() { return this.#side_accessor_storage; }
+    set #side(value) { this.#side_accessor_storage = value; }
+    #ctx = new ContextConsumer(this, {
+        context: tooltipContext,
+        subscribe: true,
+    });
+    #wasOpen = false;
+    #portal = new FloatingPortalController(this, {
+        getAnchor: () => this.#ctx.value?.triggerEl,
+        matchWidth: false,
+        placement: "top",
+        offset: 6,
+        styles: portalPopupStyles,
+        contentContainer: ".Content",
+        onPosition: ({ placement }) => {
+            const actualSide = placement.split("-")[0];
+            if (actualSide !== this.#side) {
+                this.#side = actualSide;
+            }
+        },
+        renderPopup: (portal) => {
+            const popupId = this.#ctx.value?.popupId ?? "";
+            return html `
+        <div
+          class="Popup"
+          id="${popupId}"
+          role="tooltip"
+          ?data-starting-style="${portal.isStarting}"
+          ?data-ending-style="${portal.isEnding}"
+          data-side="${this.#side}"
+        >
+          <div class="Content"></div>
+          ${this.showArrow ? renderArrow(this.#side) : ""}
+        </div>
+      `;
+        },
+    });
+    updated() {
+        const isOpen = this.#ctx.value?.open ?? false;
+        if (isOpen && !this.#wasOpen) {
+            this.#updatePlacement();
+            this.#portal.open();
+        }
+        else if (!isOpen && this.#wasOpen) {
+            this.#portal.close();
+        }
+        this.#wasOpen = isOpen;
+    }
+    #updatePlacement() {
+        const side = this.#ctx.value?.side ?? "top";
+        this.#portal.placement = side;
+        this.#portal.offset = this.#ctx.value?.sideOffset ?? 6;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+__decorate([
+    property({ type: Boolean, attribute: "show-arrow" })
+], DuiTooltipPopup.prototype, "showArrow", null);

package/tooltip/tooltip-trigger.d.ts

@@ -0,0 +1,15 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-tooltip-trigger>` — The element that triggers the tooltip on hover/focus.
+ *
+ * @slot - Content that triggers the tooltip.
+ */
+export declare class DuiTooltipTrigger extends LitElement {
+    #private;
+    static tagName: "dui-tooltip-trigger";
+    static styles: import("lit").CSSResult[];
+    /** Disable the trigger. */
+    accessor disabled: boolean;
+    render(): TemplateResult;
+}

package/tooltip/tooltip-trigger.js

@@ -0,0 +1,110 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
+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, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { ContextConsumer } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { tooltipContext } from "./tooltip-context.js";
+const hostStyles = css `
+  :host {
+    display: contents;
+  }
+`;
+const componentStyles = css `
+  .Trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    cursor: inherit;
+  }
+
+  .Trigger[data-disabled] {
+    cursor: not-allowed;
+  }
+`;
+/**
+ * `<dui-tooltip-trigger>` — The element that triggers the tooltip on hover/focus.
+ *
+ * @slot - Content that triggers the tooltip.
+ */
+export class DuiTooltipTrigger extends LitElement {
+    static { this.tagName = "dui-tooltip-trigger"; }
+    static { this.styles = [base, hostStyles, componentStyles]; }
+    #disabled_accessor_storage = false;
+    /** Disable the trigger. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #ctx = new ContextConsumer(this, {
+        context: tooltipContext,
+        subscribe: true,
+    });
+    #handleMouseEnter = () => {
+        if (this.#isDisabled)
+            return;
+        this.#updateTriggerEl();
+        this.#ctx.value?.openTooltip();
+    };
+    #handleMouseLeave = () => {
+        this.#ctx.value?.closeTooltip();
+    };
+    #handleFocus = () => {
+        if (this.#isDisabled)
+            return;
+        this.#updateTriggerEl();
+        this.#ctx.value?.openTooltip();
+    };
+    #handleBlur = () => {
+        this.#ctx.value?.closeTooltip();
+    };
+    #handleKeyDown = (e) => {
+        if (e.key === "Escape" && this.#ctx.value?.open) {
+            this.#ctx.value?.closeTooltip();
+        }
+    };
+    #updateTriggerEl() {
+        const trigger = this.shadowRoot?.querySelector('[part="trigger"]') ??
+            this;
+        this.#ctx.value?.setTriggerEl(trigger);
+    }
+    get #isDisabled() {
+        return this.disabled || (this.#ctx.value?.disabled ?? false);
+    }
+    render() {
+        const isOpen = this.#ctx.value?.open ?? false;
+        const popupId = this.#ctx.value?.popupId ?? "";
+        const triggerId = this.#ctx.value?.triggerId ?? "";
+        return html `
+      <span
+        class="Trigger"
+        part="trigger"
+        id="${triggerId}"
+        role="button"
+        tabindex="0"
+        aria-describedby="${isOpen ? popupId : ""}"
+        ?data-popup-open="${isOpen}"
+        ?data-disabled="${this.#isDisabled}"
+        @mouseenter="${this.#handleMouseEnter}"
+        @mouseleave="${this.#handleMouseLeave}"
+        @focus="${this.#handleFocus}"
+        @blur="${this.#handleBlur}"
+        @keydown="${this.#handleKeyDown}"
+      >
+        <slot></slot>
+      </span>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiTooltipTrigger.prototype, "disabled", null);

package/tooltip/tooltip.d.ts

@@ -0,0 +1,36 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+import { type TooltipSide } from "./tooltip-context.js";
+export type TooltipOpenChangeDetail = {
+    open: boolean;
+};
+export declare const openChangeEvent: (detail: TooltipOpenChangeDetail) => CustomEvent<TooltipOpenChangeDetail>;
+/**
+ * `<dui-tooltip>` — A tooltip root that provides context for trigger and popup.
+ *
+ * @slot - Default slot for dui-tooltip-trigger and dui-tooltip-popup.
+ * @fires open-change - Dispatched when the tooltip opens or closes.
+ */
+export declare class DuiTooltip extends LitElement {
+    #private;
+    static tagName: "dui-tooltip";
+    static styles: import("lit").CSSResult[];
+    /** Controlled open state. */
+    accessor open: boolean;
+    /** Default open state for uncontrolled usage. */
+    accessor defaultOpen: boolean;
+    /** Which side of the trigger the tooltip appears on. */
+    accessor side: TooltipSide;
+    /** Offset from the trigger in pixels. */
+    accessor sideOffset: number;
+    /** Delay before opening in milliseconds. */
+    accessor delay: number;
+    /** Delay before closing in milliseconds. */
+    accessor closeDelay: number;
+    /** Disable the tooltip. */
+    accessor disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult;
+}

package/tooltip/tooltip.js

@@ -0,0 +1,176 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
+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, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+export const openChangeEvent = customEvent("open-change", { bubbles: true, composed: true });
+const hostStyles = css `
+  :host {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-tooltip>` — A tooltip root that provides context for trigger and popup.
+ *
+ * @slot - Default slot for dui-tooltip-trigger and dui-tooltip-popup.
+ * @fires open-change - Dispatched when the tooltip opens or closes.
+ */
+export class DuiTooltip extends LitElement {
+    static { this.tagName = "dui-tooltip"; }
+    static { this.styles = [base, hostStyles]; }
+    #open_accessor_storage = false;
+    /** Controlled open state. */
+    get open() { return this.#open_accessor_storage; }
+    set open(value) { this.#open_accessor_storage = value; }
+    #defaultOpen_accessor_storage = false;
+    /** Default open state for uncontrolled usage. */
+    get defaultOpen() { return this.#defaultOpen_accessor_storage; }
+    set defaultOpen(value) { this.#defaultOpen_accessor_storage = value; }
+    #side_accessor_storage = "top";
+    /** Which side of the trigger the tooltip appears on. */
+    get side() { return this.#side_accessor_storage; }
+    set side(value) { this.#side_accessor_storage = value; }
+    #sideOffset_accessor_storage = 6;
+    /** Offset from the trigger in pixels. */
+    get sideOffset() { return this.#sideOffset_accessor_storage; }
+    set sideOffset(value) { this.#sideOffset_accessor_storage = value; }
+    #delay_accessor_storage = 500;
+    /** Delay before opening in milliseconds. */
+    get delay() { return this.#delay_accessor_storage; }
+    set delay(value) { this.#delay_accessor_storage = value; }
+    #closeDelay_accessor_storage = 0;
+    /** Delay before closing in milliseconds. */
+    get closeDelay() { return this.#closeDelay_accessor_storage; }
+    set closeDelay(value) { this.#closeDelay_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /** Disable the tooltip. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #internalOpen_accessor_storage = false;
+    get #internalOpen() { return this.#internalOpen_accessor_storage; }
+    set #internalOpen(value) { this.#internalOpen_accessor_storage = value; }
+    #triggerEl_accessor_storage;
+    get #triggerEl() { return this.#triggerEl_accessor_storage; }
+    set #triggerEl(value) { this.#triggerEl_accessor_storage = value; }
+    #openTimeout;
+    #closeTimeout;
+    #triggerId = `tooltip-trigger-${crypto.randomUUID().slice(0, 8)}`;
+    #popupId = `tooltip-popup-${crypto.randomUUID().slice(0, 8)}`;
+    #ctx_accessor_storage = {
+        open: false,
+        triggerId: this.#triggerId,
+        popupId: this.#popupId,
+        side: "top",
+        sideOffset: 6,
+        disabled: false,
+        triggerEl: undefined,
+        openTooltip: () => this.#scheduleOpen(),
+        closeTooltip: () => this.#scheduleClose(),
+        setTriggerEl: (el) => this.#setTriggerEl(el),
+    };
+    get #ctx() { return this.#ctx_accessor_storage; }
+    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.defaultOpen && !this.disabled) {
+            this.#internalOpen = true;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#clearTimeouts();
+    }
+    willUpdate(changed) {
+        const isOpen = this.open || this.#internalOpen;
+        if (changed.has("open") ||
+            changed.has("side") ||
+            changed.has("sideOffset") ||
+            changed.has("disabled") ||
+            this.#ctx.open !== isOpen ||
+            this.#ctx.triggerEl !== this.#triggerEl) {
+            this.#ctx = {
+                ...this.#ctx,
+                open: isOpen,
+                side: this.side,
+                sideOffset: this.sideOffset,
+                disabled: this.disabled,
+                triggerEl: this.#triggerEl,
+            };
+        }
+    }
+    #clearTimeouts() {
+        if (this.#openTimeout) {
+            clearTimeout(this.#openTimeout);
+            this.#openTimeout = undefined;
+        }
+        if (this.#closeTimeout) {
+            clearTimeout(this.#closeTimeout);
+            this.#closeTimeout = undefined;
+        }
+    }
+    #scheduleOpen() {
+        if (this.disabled)
+            return;
+        this.#clearTimeouts();
+        if (this.delay <= 0) {
+            this.#doOpen();
+        }
+        else {
+            this.#openTimeout = setTimeout(() => this.#doOpen(), this.delay);
+        }
+    }
+    #scheduleClose() {
+        this.#clearTimeouts();
+        if (this.closeDelay <= 0) {
+            this.#doClose();
+        }
+        else {
+            this.#closeTimeout = setTimeout(() => this.#doClose(), this.closeDelay);
+        }
+    }
+    #doOpen() {
+        if (this.#internalOpen)
+            return;
+        this.#internalOpen = true;
+        this.dispatchEvent(openChangeEvent({ open: true }));
+    }
+    #doClose() {
+        if (!this.#internalOpen)
+            return;
+        this.#internalOpen = false;
+        this.dispatchEvent(openChangeEvent({ open: false }));
+    }
+    #setTriggerEl(el) {
+        this.#triggerEl = el;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiTooltip.prototype, "open", null);
+__decorate([
+    property({ type: Boolean, attribute: "default-open" })
+], DuiTooltip.prototype, "defaultOpen", null);
+__decorate([
+    property({ reflect: true })
+], DuiTooltip.prototype, "side", null);
+__decorate([
+    property({ type: Number, attribute: "side-offset" })
+], DuiTooltip.prototype, "sideOffset", null);
+__decorate([
+    property({ type: Number })
+], DuiTooltip.prototype, "delay", null);
+__decorate([
+    property({ type: Number, attribute: "close-delay" })
+], DuiTooltip.prototype, "closeDelay", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiTooltip.prototype, "disabled", null);

package/trunc/index.d.ts

@@ -0,0 +1 @@
+export { DuiTrunc } from "./trunc.js";

package/trunc/index.js

@@ -0,0 +1 @@
+export { DuiTrunc } from "./trunc.js";

package/trunc/register.d.ts

@@ -0,0 +1 @@
+export {};

package/trunc/register.js

@@ -0,0 +1,4 @@
+import { DuiTrunc } from "./trunc.js";
+if (!customElements.get(DuiTrunc.tagName)) {
+    customElements.define(DuiTrunc.tagName, DuiTrunc);
+}

package/trunc/trunc.d.ts

@@ -0,0 +1,19 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/trunc */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * Text truncation with ellipsis.
+ *
+ * By default, truncates to a single line using `max-width` (default `20rem`).
+ * Set `max-lines` to clamp to N visible lines instead.
+ * Both attributes can be combined: `max-width` constrains inline size,
+ * `max-lines` constrains block size.
+ */
+export declare class DuiTrunc extends LitElement {
+    static tagName: "dui-trunc";
+    static styles: import("lit").CSSResult[];
+    /** Maximum inline size before single-line truncation kicks in. */
+    accessor maxWidth: string;
+    /** Maximum number of visible lines before clamping. */
+    accessor maxLines: number | undefined;
+    render(): TemplateResult;
+}

package/trunc/trunc.js

@@ -0,0 +1,68 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/trunc */
+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, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { base } from "@deepfuture/dui-core/base";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="root"] {
+    overflow: hidden;
+  }
+
+  :host(:not([max-lines])) [part="root"] {
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  :host([max-lines]) [part="root"] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+`;
+/**
+ * Text truncation with ellipsis.
+ *
+ * By default, truncates to a single line using `max-width` (default `20rem`).
+ * Set `max-lines` to clamp to N visible lines instead.
+ * Both attributes can be combined: `max-width` constrains inline size,
+ * `max-lines` constrains block size.
+ */
+export class DuiTrunc extends LitElement {
+    static { this.tagName = "dui-trunc"; }
+    static { this.styles = [base, styles]; }
+    #maxWidth_accessor_storage = "20rem";
+    /** Maximum inline size before single-line truncation kicks in. */
+    get maxWidth() { return this.#maxWidth_accessor_storage; }
+    set maxWidth(value) { this.#maxWidth_accessor_storage = value; }
+    #maxLines_accessor_storage;
+    /** Maximum number of visible lines before clamping. */
+    get maxLines() { return this.#maxLines_accessor_storage; }
+    set maxLines(value) { this.#maxLines_accessor_storage = value; }
+    render() {
+        const clamp = this.maxLines !== undefined
+            ? Math.max(1, this.maxLines).toString()
+            : undefined;
+        const dynamicStyles = styleMap({
+            "max-width": this.maxWidth,
+            "-webkit-line-clamp": clamp,
+            "line-clamp": clamp,
+        });
+        return html `<div part="root" style=${dynamicStyles}><slot></slot></div>`;
+    }
+}
+__decorate([
+    property({ attribute: "max-width" })
+], DuiTrunc.prototype, "maxWidth", null);
+__decorate([
+    property({ attribute: "max-lines", type: Number, reflect: true })
+], DuiTrunc.prototype, "maxLines", null);

package/vstack/index.d.ts

@@ -0,0 +1 @@
+export { DuiVstack } from "./vstack.js";

package/vstack/index.js

@@ -0,0 +1 @@
+export { DuiVstack } from "./vstack.js";

package/vstack/register.d.ts

@@ -0,0 +1 @@
+export {};