@jolly-pixel/ui 1.0.1

package/dist/containers/Rail.js

@@ -0,0 +1,52 @@
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+// Import Third-party Dependencies
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// Import Internal Dependencies
+import { kFallback } from "../theme/styles/fallbacks.js";
+let Rail = class Rail extends LitElement {
+    static styles = css `
+    :host {
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      flex-direction: column;
+      gap: var(--jolly-space-1, 4px);
+      width: calc(var(--jolly-icon-button-size, 32px) + (var(--jolly-space-1, 4px) * 2));
+      padding: var(--jolly-space-1, 4px);
+      border: 0;
+      background: var(--jolly-surface-sunken, ${kFallback.controlBg});
+    }
+
+    :host([orientation="horizontal"]) {
+      flex-direction: row;
+      width: auto;
+      height: calc(var(--jolly-icon-button-size, 32px) + (var(--jolly-space-1, 4px) * 2));
+    }
+  `;
+    constructor() {
+        super();
+        this.orientation = "vertical";
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Rail.prototype, "orientation", void 0);
+Rail = __decorate([
+    customElement("jolly-rail"),
+    __metadata("design:paramtypes", [])
+], Rail);
+export { Rail };
+//# sourceMappingURL=Rail.js.map

package/dist/containers/Rail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rail.js","sourceRoot":"","sources":["../../src/containers/Rail.ts"],"names":[],"mappings":";;;;;;;;;AAAA,kCAAkC;AAClC,OAAO,EACL,UAAU,EACV,GAAG,EACH,IAAI,EAEL,MAAM,KAAK,CAAC;AACb,OAAO,EACL,aAAa,EACb,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAE3B,+BAA+B;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAKlD,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAU,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;gDAUkB,SAAS,CAAC,SAAS;;;;;;;;GAQhE,CAAC;IAKF;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;IAChC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAVO;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;yCACL;AAtB1B,IAAI;IADhB,aAAa,CAAC,YAAY,CAAC;;GACf,IAAI,CAiChB"}

package/dist/containers/Tab.d.ts

@@ -0,0 +1,17 @@
+import { LitElement, type TemplateResult } from "lit";
+export declare class Tab extends LitElement {
+    static styles: import("lit").CSSResult;
+    label: string;
+    value: string;
+    disabled: boolean;
+    active: boolean;
+    constructor();
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-tab": Tab;
+    }
+}
+//# sourceMappingURL=Tab.d.ts.map

package/dist/containers/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/containers/Tab.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EAGV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,0BAUpB;IAGM,KAAK,EAAE,MAAM,CAAC;IAGd,KAAK,EAAE,MAAM,CAAC;IAGd,QAAQ,EAAE,OAAO,CAAC;IAGlB,MAAM,EAAE,OAAO,CAAC;;IAWf,iBAAiB,IAAI,IAAI;IAKzB,MAAM,IAAI,cAAc;CAGlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,GAAG,CAAC;KAClB;CACF"}

package/dist/containers/Tab.js

@@ -0,0 +1,61 @@
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+// Import Third-party Dependencies
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+let Tab = class Tab extends LitElement {
+    static styles = css `
+    :host {
+      display: none;
+      box-sizing: border-box;
+      height: 100%;
+    }
+
+    :host([active]) {
+      display: block;
+    }
+  `;
+    constructor() {
+        super();
+        this.label = "";
+        this.value = "";
+        this.disabled = false;
+        this.active = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "tabpanel");
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Tab.prototype, "label", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Tab.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "active", void 0);
+Tab = __decorate([
+    customElement("jolly-tab"),
+    __metadata("design:paramtypes", [])
+], Tab);
+export { Tab };
+//# sourceMappingURL=Tab.js.map

package/dist/containers/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/containers/Tab.ts"],"names":[],"mappings":";;;;;;;;;AAAA,kCAAkC;AAClC,OAAO,EACL,UAAU,EACV,GAAG,EACH,IAAI,EAEL,MAAM,KAAK,CAAC;AACb,OAAO,EACL,aAAa,EACb,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAGpB,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAU,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;GAU3B,CAAC;IAcF;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AA3BO;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kCACL;AAGd;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kCACL;AAGd;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;qCACjB;AAGlB;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;mCACnB;AAvBb,GAAG;IADf,aAAa,CAAC,WAAW,CAAC;;GACd,GAAG,CA0Cf"}

package/dist/containers/Tabs.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, type TemplateResult } from "lit";
+import type { Tab } from "./Tab.ts";
+export type TabsOrientation = "horizontal" | "vertical";
+export declare class Tabs extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    value: string;
+    orientation: TabsOrientation;
+    _tabs: Tab[];
+    _slot: HTMLSlotElement;
+    constructor();
+    render(): TemplateResult;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    protected updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-tabs": Tabs;
+    }
+}
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/containers/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/containers/Tabs.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EAEV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAUb,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAQpC,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AAExD,qBACa,IAAK,SAAQ,UAAU;;IAClC,OAAgB,MAAM,4BAEpB;IAGM,KAAK,EAAE,MAAM,CAAC;IAGd,WAAW,EAAE,eAAe,CAAC;IAG7B,KAAK,EAAE,GAAG,EAAE,CAAC;IAGb,KAAK,EAAE,eAAe,CAAC;;IAYtB,MAAM,IAAI,cAAc;cA8Bd,UAAU,CAC3B,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GACjC,IAAI;cAMY,OAAO,IAAI,IAAI;CAwHnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,IAAI,CAAC;KACpB;CACF"}

package/dist/containers/Tabs.js

@@ -0,0 +1,166 @@
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+// Import Third-party Dependencies
+import { LitElement, html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+// Import Internal Dependencies
+import { emitContainerEvent } from "./events.js";
+import { tabsStyles } from "./Tabs.styles.js";
+import { nextEnabledIndex } from "../controls/roving.js";
+import { isButtonElement } from "../dom.js";
+// CONSTANTS
+let kTabsId = 0;
+let Tabs = class Tabs extends LitElement {
+    static styles = [
+        tabsStyles
+    ];
+    #generatedId = `jolly-tabs-${++kTabsId}`;
+    constructor() {
+        super();
+        this.value = "";
+        this.orientation = "horizontal";
+        this._tabs = [];
+    }
+    render() {
+        return html `
+      <div
+        class="list"
+        part="list"
+        role="tablist"
+        aria-orientation=${this.orientation}
+        @keydown=${this.#onKeyDown}
+      >
+        ${this._tabs.map((tab, index) => html `
+          <button
+            id=${this.#buttonId(index)}
+            part=${tab.value === this.value ? "tab tab-selected" : "tab"}
+            type="button"
+            role="tab"
+            aria-controls=${this.#panelId(index)}
+            aria-selected=${String(tab.value === this.value)}
+            tabindex=${tab.value === this.value ? "0" : "-1"}
+            ?disabled=${tab.disabled}
+            data-index=${index}
+            @click=${this.#onSelect}
+          >${tab.label}</button>
+        `)}
+      </div>
+      <div class="panels">
+        <slot @slotchange=${this.#onSlotChange}></slot>
+      </div>
+    `;
+    }
+    willUpdate(changed) {
+        if (changed.has("value") || changed.has("_tabs")) {
+            this.value = this.#resolveValue();
+        }
+    }
+    updated() {
+        this.#synchroniseTabs();
+    }
+    #onSlotChange = () => {
+        this._tabs = this._slot.assignedElements({ flatten: true })
+            .filter((element) => element.tagName === "JOLLY-TAB");
+    };
+    #resolveValue() {
+        if (this._tabs.length === 0) {
+            return this.value;
+        }
+        const requested = this._tabs.find((tab) => tab.value === this.value && !tab.disabled);
+        const selected = requested ?? this._tabs.find((tab) => !tab.disabled);
+        return selected?.value ?? "";
+    }
+    #synchroniseTabs() {
+        for (let index = 0; index < this._tabs.length; index++) {
+            const tab = this._tabs[index];
+            tab.active = tab.value === this.value && !tab.disabled;
+            tab.id = this.#panelId(index);
+            tab.setAttribute("aria-labelledby", this.#buttonId(index));
+        }
+    }
+    #onSelect = (event) => {
+        if (!isButtonElement(event.currentTarget)) {
+            return;
+        }
+        const index = Number(event.currentTarget.dataset.index);
+        this.#selectIndex(index, true);
+    };
+    #onKeyDown = (event) => {
+        const current = this._tabs.findIndex((tab) => tab.value === this.value);
+        const enabled = this._tabs.map((tab) => !tab.disabled);
+        let next = -1;
+        if (event.key === "Home") {
+            next = enabled.indexOf(true);
+        }
+        else if (event.key === "End") {
+            next = enabled.lastIndexOf(true);
+        }
+        else {
+            const backward = this.orientation === "horizontal" ?
+                "ArrowLeft" :
+                "ArrowUp";
+            const forward = this.orientation === "horizontal" ?
+                "ArrowRight" :
+                "ArrowDown";
+            if (event.key === backward) {
+                next = nextEnabledIndex(enabled, current, -1);
+            }
+            else if (event.key === forward) {
+                next = nextEnabledIndex(enabled, current, 1);
+            }
+        }
+        if (next === -1) {
+            return;
+        }
+        event.preventDefault();
+        this.#selectIndex(next, true);
+        void this.updateComplete.then(() => {
+            this.renderRoot.querySelectorAll("[role=tab]")[next]?.focus();
+        });
+    };
+    #selectIndex(index, userChange) {
+        const tab = this._tabs[index];
+        if (tab === undefined || tab.disabled) {
+            return;
+        }
+        this.value = tab.value;
+        if (userChange) {
+            emitContainerEvent(this, "jolly-tab-change", { value: tab.value });
+        }
+    }
+    #buttonId(index) {
+        return `${this.id || this.#generatedId}-tab-${index}`;
+    }
+    #panelId(index) {
+        return `${this.id || this.#generatedId}-panel-${index}`;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Tabs.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Tabs.prototype, "orientation", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], Tabs.prototype, "_tabs", void 0);
+__decorate([
+    query("slot"),
+    __metadata("design:type", HTMLSlotElement)
+], Tabs.prototype, "_slot", void 0);
+Tabs = __decorate([
+    customElement("jolly-tabs"),
+    __metadata("design:paramtypes", [])
+], Tabs);
+export { Tabs };
+//# sourceMappingURL=Tabs.js.map

package/dist/containers/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/containers/Tabs.ts"],"names":[],"mappings":"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"}

package/dist/containers/Tabs.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const tabsStyles: import("lit").CSSResult;
+//# sourceMappingURL=Tabs.styles.d.ts.map

package/dist/containers/Tabs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../src/containers/Tabs.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,yBA6FtB,CAAC"}

package/dist/containers/Tabs.styles.js

@@ -0,0 +1,99 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { kFallback } from "../theme/styles/fallbacks.js";
+export const tabsStyles = css `
+  :host {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    flex-direction: column;
+    color: var(--jolly-text, ${kFallback.text});
+    font: inherit;
+  }
+
+  :host([orientation="vertical"]) {
+    flex-direction: row;
+  }
+
+  /*
+   * Tabs sit inside a plane, so the strip paints no surface. The selected tab's
+   * accent edge is what marks the boundary the divider used to draw.
+   */
+  .list {
+    display: flex;
+    flex: 0 0 auto;
+    gap: 1px;
+  }
+
+  :host([orientation="vertical"]) .list {
+    flex-direction: column;
+  }
+
+  button {
+    position: relative;
+    min-height: var(--jolly-control-height, 20px);
+    padding: 0 var(--jolly-space-2, 8px);
+    border: 0;
+    border-bottom: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    transition:
+      background-color var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease),
+      color var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
+  }
+
+  button::after {
+    position: absolute;
+    right: var(--jolly-space-2, 8px);
+    bottom: 0;
+    left: var(--jolly-space-2, 8px);
+    height: 2px;
+    background: transparent;
+    content: "";
+  }
+
+  button:hover:not(:disabled) {
+    background: var(--jolly-control-bg-hover, ${kFallback.controlBg});
+  }
+
+  button[aria-selected="true"] {
+    background: var(--jolly-control-bg, ${kFallback.controlBg});
+  }
+
+  button[aria-selected="true"] {
+    color: var(--jolly-accent-text);
+  }
+
+  button[aria-selected="true"]::after {
+    background: var(--jolly-accent-fill);
+  }
+
+  :host([orientation="vertical"]) button::after {
+    top: var(--jolly-space-1, 4px);
+    right: 0;
+    bottom: var(--jolly-space-1, 4px);
+    left: auto;
+    width: 2px;
+    height: auto;
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  button:focus-visible {
+    background: var(--jolly-control-bg-focus, ${kFallback.controlBg});
+    outline: none;
+  }
+
+  .panels {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+  }
+`;
+//# sourceMappingURL=Tabs.styles.js.map

package/dist/containers/Tabs.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styles.js","sourceRoot":"","sources":["../../src/containers/Tabs.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;+BAME,SAAS,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAgDG,SAAS,CAAC,SAAS;;;;0CAIzB,SAAS,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;gDA0Bb,SAAS,CAAC,SAAS;;;;;;;;;CASlE,CAAC"}

package/dist/containers/Toolbar.d.ts

@@ -0,0 +1,15 @@
+import { LitElement, type TemplateResult } from "lit";
+export type ToolbarOrientation = "horizontal" | "vertical";
+export declare class Toolbar extends LitElement {
+    static styles: import("lit").CSSResult;
+    orientation: ToolbarOrientation;
+    label: string;
+    constructor();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-toolbar": Toolbar;
+    }
+}
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/containers/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/containers/Toolbar.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EAGV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAmBpB;IAGM,WAAW,EAAE,kBAAkB,CAAC;IAGhC,KAAK,EAAE,MAAM,CAAC;;IASb,MAAM,IAAI,cAAc;CASlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,OAAO,CAAC;KAC1B;CACF"}

package/dist/containers/Toolbar.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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+// Import Third-party Dependencies
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+let Toolbar = class Toolbar extends LitElement {
+    static styles = css `
+    :host,
+    div {
+      display: flex;
+      align-items: center;
+      gap: var(--jolly-space-1, 4px);
+    }
+
+    :host {
+      min-width: 0;
+      color: var(--jolly-text);
+      font: inherit;
+    }
+
+    :host([orientation="vertical"]),
+    :host([orientation="vertical"]) div {
+      align-items: stretch;
+      flex-direction: column;
+    }
+  `;
+    constructor() {
+        super();
+        this.orientation = "horizontal";
+        this.label = "";
+    }
+    render() {
+        return html `
+      <div
+        role="toolbar"
+        aria-label=${this.label}
+        aria-orientation=${this.orientation}
+      ><slot></slot></div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Toolbar.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Toolbar.prototype, "label", void 0);
+Toolbar = __decorate([
+    customElement("jolly-toolbar"),
+    __metadata("design:paramtypes", [])
+], Toolbar);
+export { Toolbar };
+//# sourceMappingURL=Toolbar.js.map

package/dist/containers/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../src/containers/Toolbar.ts"],"names":[],"mappings":";;;;;;;;;AAAA,kCAAkC;AAClC,OAAO,EACL,UAAU,EACV,GAAG,EACH,IAAI,EAEL,MAAM,KAAK,CAAC;AACb,OAAO,EACL,aAAa,EACb,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAKpB,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAU,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;GAmB3B,CAAC;IAQF;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,WAAW,GAAG,YAAY,CAAC;QAChC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;qBAGM,IAAI,CAAC,KAAK;2BACJ,IAAI,CAAC,WAAW;;KAEtC,CAAC;IACJ,CAAC;;AApBO;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;4CACF;AAGhC;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sCACL;AA1BX,OAAO;IADnB,aAAa,CAAC,eAAe,CAAC;;GAClB,OAAO,CA4CnB"}

package/dist/containers/dialogHelpers.d.ts

@@ -0,0 +1,24 @@
+import type { StorageAdapter } from "../storage/StorageAdapter.ts";
+export interface PromptOptions {
+    title?: string;
+    label: string;
+    defaultValue?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+}
+export interface ConfirmOptions {
+    title?: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    danger?: boolean;
+}
+export interface StoredPromptOptions extends PromptOptions {
+    storage?: StorageAdapter;
+    storageKey: string;
+    fallbackValue: string;
+}
+export declare function showPrompt({ title, label, defaultValue, confirmLabel, cancelLabel }: PromptOptions): Promise<string | null>;
+export declare function showConfirm({ title, message, confirmLabel, cancelLabel, danger }: ConfirmOptions): Promise<boolean>;
+export declare function resolveStoredPrompt({ storage, storageKey, fallbackValue, ...promptOptions }: StoredPromptOptions): Promise<string>;
+//# sourceMappingURL=dialogHelpers.d.ts.map

package/dist/containers/dialogHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogHelpers.d.ts","sourceRoot":"","sources":["../../src/containers/dialogHelpers.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEnE,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAU,EACV,KAAK,EACL,YAAiB,EACjB,YAAmB,EACnB,WAAsB,EACvB,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA2CxC;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAU,EACV,OAAO,EACP,YAAmB,EACnB,WAAsB,EACtB,MAAc,EACf,EAAE,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC,CA4BnC;AAED,wBAAsB,mBAAmB,CAAC,EACxC,OAAmC,EACnC,UAAU,EACV,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,CAavC"}

package/dist/containers/dialogHelpers.js

@@ -0,0 +1,89 @@
+// Import Internal Dependencies
+import { Dialog } from "./Dialog.js";
+import { Button } from "../controls/Button.js";
+import { Text } from "../controls/Text.js";
+import { detailOf } from "../dom.js";
+import { LocalStorageAdapter } from "../storage/LocalStorageAdapter.js";
+export function showPrompt({ title = "", label, defaultValue = "", confirmLabel = "OK", cancelLabel = "Cancel" }) {
+    const dialog = new Dialog();
+    dialog.heading = title;
+    let value = defaultValue;
+    const field = new Text();
+    field.label = label;
+    field.value = value;
+    field.addEventListener("jolly-input", captureValue);
+    field.addEventListener("jolly-change", captureValue);
+    dialog.append(field);
+    const confirm = actionButton(confirmLabel, "confirm", "accent");
+    const cancel = actionButton(cancelLabel, "cancel", "default");
+    confirm.addEventListener("click", () => dialog.close("confirm"));
+    cancel.addEventListener("click", () => dialog.close("cancel"));
+    dialog.append(cancel, confirm);
+    document.body.append(dialog);
+    return settleHelper(dialog, resolvePrompt);
+    function captureValue(event) {
+        const detail = detailOf(event);
+        if (detail !== null) {
+            value = detail.value;
+        }
+    }
+    function resolvePrompt(returnValue) {
+        return returnValue === "confirm" ? value.trim() : null;
+    }
+}
+export function showConfirm({ title = "", message, confirmLabel = "OK", cancelLabel = "Cancel", danger = false }) {
+    const dialog = new Dialog();
+    dialog.heading = title;
+    const content = document.createElement("p");
+    content.textContent = message;
+    dialog.append(content);
+    const confirm = actionButton(confirmLabel, "confirm", danger ? "danger" : "accent");
+    const cancel = actionButton(cancelLabel, "cancel", "default");
+    confirm.addEventListener("click", () => dialog.close("confirm"));
+    cancel.addEventListener("click", () => dialog.close("cancel"));
+    dialog.append(cancel, confirm);
+    document.body.append(dialog);
+    return settleHelper(dialog, (returnValue) => returnValue === "confirm", confirm);
+}
+export async function resolveStoredPrompt({ storage = new LocalStorageAdapter(), storageKey, fallbackValue, ...promptOptions }) {
+    const stored = storage.get(storageKey)?.trim();
+    if (stored) {
+        return stored;
+    }
+    const prompted = await showPrompt(promptOptions);
+    const value = prompted === null || prompted === "" ?
+        fallbackValue :
+        prompted;
+    storage.set(storageKey, value);
+    return value;
+}
+function actionButton(label, action, variant) {
+    const button = new Button();
+    button.slot = "actions";
+    button.variant = variant;
+    button.dataset.action = action;
+    button.textContent = label;
+    return button;
+}
+function settleHelper(dialog, resolveValue, focusOnOpen) {
+    const { promise, resolve } = Promise.withResolvers();
+    let settled = false;
+    function settle(returnValue) {
+        if (settled) {
+            return;
+        }
+        settled = true;
+        dialog.remove();
+        resolve(resolveValue(returnValue));
+    }
+    dialog.addEventListener("jolly-cancel", () => settle(""));
+    dialog.addEventListener("jolly-close", (event) => {
+        const detail = detailOf(event);
+        if (detail !== null) {
+            settle(detail.returnValue);
+        }
+    });
+    void dialog.showModal().then(() => focusOnOpen?.focus());
+    return promise;
+}
+//# sourceMappingURL=dialogHelpers.js.map