@deepfuture/dui-components 0.0.1

package/textarea/textarea.js

@@ -0,0 +1,170 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/textarea */
+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 { live } from "lit/directives/live.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+export const textareaChangeEvent = customEvent("textarea-change", { bubbles: true, composed: true });
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="textarea"] {
+    box-sizing: border-box;
+    width: 100%;
+    font-family: inherit;
+    outline: none;
+    resize: vertical;
+    transition-property: border-color, box-shadow, background, filter, transform;
+  }
+
+  [part="textarea"][data-resize="none"] {
+    resize: none;
+  }
+
+  [part="textarea"][data-resize="vertical"] {
+    resize: vertical;
+  }
+
+  [part="textarea"][data-resize="horizontal"] {
+    resize: horizontal;
+  }
+
+  [part="textarea"][data-resize="both"] {
+    resize: both;
+  }
+
+  [part="textarea"][data-resize="auto"] {
+    resize: none;
+    field-sizing: content;
+  }
+
+  [part="textarea"]:disabled {
+    cursor: not-allowed;
+  }
+`;
+/**
+ * A multi-line text input with resize modes including auto-grow.
+ */
+export class DuiTextarea extends LitElement {
+    static { this.tagName = "dui-textarea"; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = "";
+    /** Current textarea value. */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #placeholder_accessor_storage = "";
+    /** Placeholder text. */
+    get placeholder() { return this.#placeholder_accessor_storage; }
+    set placeholder(value) { this.#placeholder_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #required_accessor_storage = false;
+    get required() { return this.#required_accessor_storage; }
+    set required(value) { this.#required_accessor_storage = value; }
+    #readonly_accessor_storage = false;
+    get readonly() { return this.#readonly_accessor_storage; }
+    set readonly(value) { this.#readonly_accessor_storage = value; }
+    #rows_accessor_storage = undefined;
+    /** Number of visible text rows. */
+    get rows() { return this.#rows_accessor_storage; }
+    set rows(value) { this.#rows_accessor_storage = value; }
+    #minLength_accessor_storage = undefined;
+    get minLength() { return this.#minLength_accessor_storage; }
+    set minLength(value) { this.#minLength_accessor_storage = value; }
+    #maxLength_accessor_storage = undefined;
+    get maxLength() { return this.#maxLength_accessor_storage; }
+    set maxLength(value) { this.#maxLength_accessor_storage = value; }
+    #name_accessor_storage = "";
+    get name() { return this.#name_accessor_storage; }
+    set name(value) { this.#name_accessor_storage = value; }
+    #variant_accessor_storage = "default";
+    /** Visual variant: "default" or "ghost" (no border/background). */
+    get variant() { return this.#variant_accessor_storage; }
+    set variant(value) { this.#variant_accessor_storage = value; }
+    #resize_accessor_storage = "vertical";
+    /** Resize behavior: "none" | "vertical" | "horizontal" | "both" | "auto". */
+    get resize() { return this.#resize_accessor_storage; }
+    set resize(value) { this.#resize_accessor_storage = value; }
+    #maxHeight_accessor_storage = undefined;
+    /** Maximum height (CSS value). Textarea scrolls when content exceeds this. */
+    get maxHeight() { return this.#maxHeight_accessor_storage; }
+    set maxHeight(value) { this.#maxHeight_accessor_storage = value; }
+    #onInput = (event) => {
+        const target = event.target;
+        this.value = target.value;
+        this.dispatchEvent(textareaChangeEvent({ value: this.value }));
+    };
+    render() {
+        const textAreaStyles = styleMap({
+            overflowY: this.maxHeight === undefined ? "auto" : "initial",
+            maxHeight: this.maxHeight ?? "initial",
+        });
+        return html `
+      <textarea
+        part="textarea"
+        style=${textAreaStyles}
+        .value=${live(this.value)}
+        placeholder=${this.placeholder}
+        rows=${this.rows ?? ""}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ?readonly=${this.readonly}
+        minlength=${this.minLength ?? ""}
+        maxlength=${this.maxLength ?? ""}
+        name=${this.name}
+        data-resize=${this.resize}
+        @input=${this.#onInput}
+      ></textarea>
+    `;
+    }
+}
+__decorate([
+    property()
+], DuiTextarea.prototype, "value", null);
+__decorate([
+    property()
+], DuiTextarea.prototype, "placeholder", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiTextarea.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean })
+], DuiTextarea.prototype, "required", null);
+__decorate([
+    property({ type: Boolean })
+], DuiTextarea.prototype, "readonly", null);
+__decorate([
+    property({ type: Number })
+], DuiTextarea.prototype, "rows", null);
+__decorate([
+    property({ type: Number, attribute: "minlength" })
+], DuiTextarea.prototype, "minLength", null);
+__decorate([
+    property({ type: Number, attribute: "maxlength" })
+], DuiTextarea.prototype, "maxLength", null);
+__decorate([
+    property()
+], DuiTextarea.prototype, "name", null);
+__decorate([
+    property({ reflect: true })
+], DuiTextarea.prototype, "variant", null);
+__decorate([
+    property()
+], DuiTextarea.prototype, "resize", null);
+__decorate([
+    property({ attribute: "max-height" })
+], DuiTextarea.prototype, "maxHeight", null);

package/toggle/index.d.ts

@@ -0,0 +1,3 @@
+export { DuiToggle, pressedChangeEvent } from "./toggle.js";
+export { DuiToggleGroup, valueChangeEvent } from "./toggle-group.js";
+export type { ToggleGroupContext } from "./toggle-group-context.js";

package/toggle/index.js

@@ -0,0 +1,2 @@
+export { DuiToggle, pressedChangeEvent } from "./toggle.js";
+export { DuiToggleGroup, valueChangeEvent } from "./toggle-group.js";

package/toggle/register.d.ts

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

package/toggle/register.js

@@ -0,0 +1,8 @@
+import { DuiToggle } from "./toggle.js";
+import { DuiToggleGroup } from "./toggle-group.js";
+if (!customElements.get(DuiToggle.tagName)) {
+    customElements.define(DuiToggle.tagName, DuiToggle);
+}
+if (!customElements.get(DuiToggleGroup.tagName)) {
+    customElements.define(DuiToggleGroup.tagName, DuiToggleGroup);
+}

package/toggle/toggle-group-context.d.ts

@@ -0,0 +1,9 @@
+export type ToggleGroupContext = {
+    readonly value: string[];
+    readonly disabled: boolean;
+    readonly type: "single" | "multiple";
+    readonly toggle: (itemValue: string) => void;
+};
+export declare const toggleGroupContext: {
+    __context__: ToggleGroupContext;
+};

package/toggle/toggle-group-context.js

@@ -0,0 +1,2 @@
+import { createContext } from "@lit/context";
+export const toggleGroupContext = createContext(Symbol("dui-toggle-group"));

package/toggle/toggle-group.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, type TemplateResult } from "lit";
+export declare const valueChangeEvent: (detail: {
+    value: string[];
+}) => CustomEvent<{
+    value: string[];
+}>;
+/**
+ * `<dui-toggle-group>` — Groups toggle buttons with shared single/multi selection.
+ *
+ * @slot - `dui-toggle` children.
+ * @csspart root - The group container.
+ * @fires value-change - Fired when selection changes. Detail: { value: string[] }
+ */
+export declare class DuiToggleGroup extends LitElement {
+    #private;
+    static tagName: "dui-toggle-group";
+    static styles: import("lit").CSSResult[];
+    accessor value: string[] | undefined;
+    accessor defaultValue: string[];
+    accessor type: "single" | "multiple";
+    accessor orientation: "horizontal" | "vertical";
+    accessor disabled: boolean;
+    accessor loop: boolean;
+    connectedCallback(): void;
+    willUpdate(): void;
+    render(): TemplateResult;
+}

package/toggle/toggle-group.js

@@ -0,0 +1,163 @@
+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 valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: inline-flex;
+  }
+
+  [part="root"] {
+    display: inline-flex;
+  }
+
+  :host([orientation="vertical"]) [part="root"] {
+    flex-direction: column;
+  }
+`;
+/**
+ * `<dui-toggle-group>` — Groups toggle buttons with shared single/multi selection.
+ *
+ * @slot - `dui-toggle` children.
+ * @csspart root - The group container.
+ * @fires value-change - Fired when selection changes. Detail: { value: string[] }
+ */
+export class DuiToggleGroup extends LitElement {
+    static { this.tagName = "dui-toggle-group"; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = undefined;
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #defaultValue_accessor_storage = [];
+    get defaultValue() { return this.#defaultValue_accessor_storage; }
+    set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
+    #type_accessor_storage = "single";
+    get type() { return this.#type_accessor_storage; }
+    set type(value) { this.#type_accessor_storage = value; }
+    #orientation_accessor_storage = "horizontal";
+    get orientation() { return this.#orientation_accessor_storage; }
+    set orientation(value) { this.#orientation_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #loop_accessor_storage = true;
+    get loop() { return this.#loop_accessor_storage; }
+    set loop(value) { this.#loop_accessor_storage = value; }
+    #internalValue_accessor_storage = [];
+    get #internalValue() { return this.#internalValue_accessor_storage; }
+    set #internalValue(value) { this.#internalValue_accessor_storage = value; }
+    get #currentValue() {
+        return this.value ?? this.#internalValue;
+    }
+    #toggle = (itemValue) => {
+        if (this.disabled)
+            return;
+        const current = this.#currentValue;
+        let next;
+        if (this.type === "single") {
+            next = current.includes(itemValue) ? [] : [itemValue];
+        }
+        else {
+            next = current.includes(itemValue)
+                ? current.filter((v) => v !== itemValue)
+                : [...current, itemValue];
+        }
+        if (this.value === undefined) {
+            this.#internalValue = next;
+        }
+        this.dispatchEvent(valueChangeEvent({ value: next }));
+    };
+    #ctx_accessor_storage = this.#buildContext();
+    get #ctx() { return this.#ctx_accessor_storage; }
+    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    #buildContext() {
+        return {
+            value: this.#currentValue,
+            disabled: this.disabled,
+            type: this.type,
+            toggle: this.#toggle,
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.value === undefined && this.defaultValue.length > 0) {
+            this.#internalValue = [...this.defaultValue];
+        }
+        this.#ctx = this.#buildContext();
+    }
+    willUpdate() {
+        this.#ctx = this.#buildContext();
+    }
+    #onKeyDown = (e) => {
+        const isHorizontal = this.orientation === "horizontal";
+        const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+        const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+        if (e.key !== nextKey && e.key !== prevKey)
+            return;
+        e.preventDefault();
+        const toggles = [
+            ...this.querySelectorAll("dui-toggle"),
+        ];
+        const focusable = toggles.filter((t) => !t.hasAttribute("disabled"));
+        if (focusable.length === 0)
+            return;
+        const active = this.shadowRoot?.activeElement ??
+            document.activeElement;
+        const currentToggle = toggles.find((t) => t === active || t.shadowRoot?.activeElement === active || t.contains(active));
+        const currentIndex = currentToggle
+            ? focusable.indexOf(currentToggle)
+            : -1;
+        let nextIndex;
+        if (e.key === nextKey) {
+            nextIndex = currentIndex + 1;
+            if (nextIndex >= focusable.length) {
+                nextIndex = this.loop ? 0 : focusable.length - 1;
+            }
+        }
+        else {
+            nextIndex = currentIndex - 1;
+            if (nextIndex < 0) {
+                nextIndex = this.loop ? focusable.length - 1 : 0;
+            }
+        }
+        focusable[nextIndex]?.focus();
+    };
+    render() {
+        return html `
+      <div
+        part="root"
+        role="group"
+        aria-orientation="${this.orientation}"
+        @keydown="${this.#onKeyDown}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], DuiToggleGroup.prototype, "value", null);
+__decorate([
+    property({ type: Array, attribute: "default-value" })
+], DuiToggleGroup.prototype, "defaultValue", null);
+__decorate([
+    property({ reflect: true })
+], DuiToggleGroup.prototype, "type", null);
+__decorate([
+    property({ reflect: true })
+], DuiToggleGroup.prototype, "orientation", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiToggleGroup.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean })
+], DuiToggleGroup.prototype, "loop", null);

package/toggle/toggle.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, type TemplateResult } from "lit";
+export declare const pressedChangeEvent: (detail: {
+    pressed: boolean;
+}) => CustomEvent<{
+    pressed: boolean;
+}>;
+/**
+ * `<dui-toggle>` — A two-state toggle button. Works standalone or inside a toggle group.
+ *
+ * @slot - Toggle content (text and/or icons).
+ * @csspart root - The button element.
+ * @fires pressed-change - Fired when toggled. Detail: { pressed: boolean }
+ */
+export declare class DuiToggle extends LitElement {
+    #private;
+    static tagName: "dui-toggle";
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    accessor pressed: boolean | undefined;
+    accessor defaultPressed: boolean;
+    accessor disabled: boolean;
+    accessor value: string | undefined;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}

package/toggle/toggle.js

@@ -0,0 +1,124 @@
+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 pressedChangeEvent = customEvent("pressed-change", { bubbles: true, composed: true });
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: inline-block;
+  }
+
+  [part="root"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+  }
+
+  [part="root"]:disabled {
+    cursor: not-allowed;
+  }
+`;
+/**
+ * `<dui-toggle>` — A two-state toggle button. Works standalone or inside a toggle group.
+ *
+ * @slot - Toggle content (text and/or icons).
+ * @csspart root - The button element.
+ * @fires pressed-change - Fired when toggled. Detail: { pressed: boolean }
+ */
+export class DuiToggle extends LitElement {
+    static { this.tagName = "dui-toggle"; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.styles = [base, styles]; }
+    #pressed_accessor_storage = undefined;
+    get pressed() { return this.#pressed_accessor_storage; }
+    set pressed(value) { this.#pressed_accessor_storage = value; }
+    #defaultPressed_accessor_storage = false;
+    get defaultPressed() { return this.#defaultPressed_accessor_storage; }
+    set defaultPressed(value) { this.#defaultPressed_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #value_accessor_storage = undefined;
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #internalPressed_accessor_storage = false;
+    get #internalPressed() { return this.#internalPressed_accessor_storage; }
+    set #internalPressed(value) { this.#internalPressed_accessor_storage = value; }
+    #groupCtx_accessor_storage;
+    get #groupCtx() { return this.#groupCtx_accessor_storage; }
+    set #groupCtx(value) { this.#groupCtx_accessor_storage = value; }
+    get #isPressed() {
+        if (this.#groupCtx && this.value !== undefined) {
+            return this.#groupCtx.value.includes(this.value);
+        }
+        return this.pressed ?? this.#internalPressed;
+    }
+    get #isDisabled() {
+        return this.disabled || (this.#groupCtx?.disabled ?? false);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.pressed === undefined && this.defaultPressed) {
+            this.#internalPressed = true;
+        }
+    }
+    #handleClick = () => {
+        if (this.#isDisabled)
+            return;
+        if (this.#groupCtx && this.value !== undefined) {
+            this.#groupCtx.toggle(this.value);
+            return;
+        }
+        const newPressed = !this.#isPressed;
+        if (this.pressed === undefined) {
+            this.#internalPressed = newPressed;
+        }
+        this.dispatchEvent(pressedChangeEvent({ pressed: newPressed }));
+    };
+    render() {
+        const isPressed = this.#isPressed;
+        const isDisabled = this.#isDisabled;
+        return html `
+      <button
+        part="root"
+        type="button"
+        aria-pressed="${String(isPressed)}"
+        ?disabled="${isDisabled}"
+        ?data-pressed="${isPressed}"
+        ?data-disabled="${isDisabled}"
+        @click="${this.#handleClick}"
+      >
+        <slot></slot>
+      </button>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], DuiToggle.prototype, "pressed", null);
+__decorate([
+    property({ type: Boolean, attribute: "default-pressed" })
+], DuiToggle.prototype, "defaultPressed", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiToggle.prototype, "disabled", null);
+__decorate([
+    property()
+], DuiToggle.prototype, "value", null);

package/toolbar/index.d.ts

@@ -0,0 +1 @@
+export { DuiToolbar } from "./toolbar.js";

package/toolbar/index.js

@@ -0,0 +1 @@
+export { DuiToolbar } from "./toolbar.js";

package/toolbar/register.d.ts

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

package/toolbar/register.js

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

package/toolbar/toolbar.d.ts

@@ -0,0 +1,15 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/toolbar */
+import { LitElement, type TemplateResult } from "lit";
+export declare class DuiToolbar extends LitElement {
+    static tagName: "dui-toolbar";
+    static styles: import("lit").CSSResult[];
+    /** Sets a minimum height using the corresponding `--component-height-*` token. */
+    accessor size: "sm" | "md" | "lg" | "xl" | undefined;
+    /** Adds horizontal and vertical padding. */
+    accessor inset: boolean;
+    /** Reduces left inset padding when a button is the first item. */
+    accessor hasButtonLeft: boolean;
+    /** Reduces right inset padding when a button is the last item. */
+    accessor hasButtonRight: boolean;
+    render(): TemplateResult;
+}

package/toolbar/toolbar.js

@@ -0,0 +1,89 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/toolbar */
+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";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="root"] {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  [part="left"] {
+    justify-self: start;
+    display: flex;
+    align-items: center;
+  }
+
+  [part="center"] {
+    justify-self: center;
+    grid-column: 2;
+    display: flex;
+    align-items: center;
+  }
+
+  [part="right"] {
+    justify-self: end;
+    grid-column: 3;
+    display: flex;
+    align-items: center;
+  }
+`;
+export class DuiToolbar extends LitElement {
+    static { this.tagName = "dui-toolbar"; }
+    static { this.styles = [base, styles]; }
+    #size_accessor_storage;
+    /** Sets a minimum height using the corresponding `--component-height-*` token. */
+    get size() { return this.#size_accessor_storage; }
+    set size(value) { this.#size_accessor_storage = value; }
+    #inset_accessor_storage = false;
+    /** Adds horizontal and vertical padding. */
+    get inset() { return this.#inset_accessor_storage; }
+    set inset(value) { this.#inset_accessor_storage = value; }
+    #hasButtonLeft_accessor_storage = false;
+    /** Reduces left inset padding when a button is the first item. */
+    get hasButtonLeft() { return this.#hasButtonLeft_accessor_storage; }
+    set hasButtonLeft(value) { this.#hasButtonLeft_accessor_storage = value; }
+    #hasButtonRight_accessor_storage = false;
+    /** Reduces right inset padding when a button is the last item. */
+    get hasButtonRight() { return this.#hasButtonRight_accessor_storage; }
+    set hasButtonRight(value) { this.#hasButtonRight_accessor_storage = value; }
+    render() {
+        return html `
+      <nav part="root" role="toolbar">
+        <div part="left">
+          <slot name="left"></slot>
+        </div>
+        <div part="center">
+          <slot name="center"></slot>
+        </div>
+        <div part="right">
+          <slot name="right"></slot>
+        </div>
+      </nav>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], DuiToolbar.prototype, "size", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiToolbar.prototype, "inset", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "has-button-left" })
+], DuiToolbar.prototype, "hasButtonLeft", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "has-button-right" })
+], DuiToolbar.prototype, "hasButtonRight", null);

package/tooltip/index.d.ts

@@ -0,0 +1,5 @@
+export { DuiTooltip, openChangeEvent } from "./tooltip.js";
+export type { TooltipOpenChangeDetail } from "./tooltip.js";
+export { DuiTooltipTrigger } from "./tooltip-trigger.js";
+export { DuiTooltipPopup } from "./tooltip-popup.js";
+export type { TooltipContext, TooltipSide } from "./tooltip-context.js";