@jolly-pixel/ui 1.0.1

package/dist/containers/Folder.js

@@ -0,0 +1,220 @@
+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, state } from "lit/decorators.js";
+// Import Internal Dependencies
+import { emitContainerEvent } from "./events.js";
+import { folderStyles } from "./Folder.styles.js";
+// Registers the chevron and grip glyphs.
+import "../icon/Icon.js";
+import { isButtonElement } from "../dom.js";
+import { LocalStorageAdapter } from "../storage/LocalStorageAdapter.js";
+import { PersistedState } from "../storage/PersistedState.js";
+import { hiddenStyles } from "../theme/styles/hiddenStyles.js";
+let Folder = class Folder extends LitElement {
+    static styles = [
+        folderStyles,
+        hiddenStyles
+    ];
+    #persistenceKey = "";
+    #state = new PersistedState(this, {
+        isManaged: () => this.closest("jolly-dock-layout") !== null,
+        namespace: () => this.#namespace(),
+        storage: () => this.storage,
+        onManagedWrite: () => {
+            emitContainerEvent(this, "jolly-layout-dirty", undefined);
+        }
+    });
+    get persistenceKey() {
+        return this.#persistenceKey;
+    }
+    set persistenceKey(value) {
+        if (this.#persistenceKey === value) {
+            return;
+        }
+        this.#persistenceKey = value;
+        this.#restoreOpen();
+    }
+    constructor() {
+        super();
+        this.label = "";
+        this.key = "";
+        this.open = true;
+        this.collapsible = true;
+        this.reorderable = false;
+        this.dragging = false;
+        this.flush = false;
+        this.storageKey = "";
+        this.storage = new LocalStorageAdapter();
+        this._reordering = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        queueMicrotask(() => this.#restoreOpen());
+    }
+    // A folder that cannot collapse has no way back open, so it stays open.
+    willUpdate() {
+        if (!this.collapsible) {
+            this.open = true;
+        }
+    }
+    render() {
+        return html `
+      <div class="header" part="header">
+        ${this.collapsible ? this.#renderToggle() : this.#renderTitle()}
+        <slot name="actions"></slot>
+        <button
+          class="grip"
+          type="button"
+          aria-label=${`Reorder ${this.label}`}
+          aria-pressed=${String(this._reordering)}
+          @pointerdown=${this.#onGripPointerDown}
+          @keydown=${this.#onGripKeyDown}
+        ><jolly-icon name="drag" aria-hidden="true"></jolly-icon></button>
+      </div>
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+    `;
+    }
+    #renderToggle() {
+        return html `<button
+      class="toggle"
+      type="button"
+      aria-expanded=${String(this.open)}
+      @click=${this.#toggle}
+    ><jolly-icon
+      class="chevron"
+      name="chevron"
+      aria-hidden="true"
+    ></jolly-icon><span class="label">${this.label}</span></button>`;
+    }
+    #renderTitle() {
+        return html `<div class="title"><span
+      class="gutter"
+      aria-hidden="true"
+    ></span><span class="label">${this.label}</span></div>`;
+    }
+    headerRect() {
+        const header = this.renderRoot.querySelector(".header");
+        return (header ?? this).getBoundingClientRect();
+    }
+    #toggle = () => {
+        this.open = !this.open;
+        this.#state.write("open", String(this.open));
+        emitContainerEvent(this, "jolly-toggle", { open: this.open });
+    };
+    #restoreOpen() {
+        if (!this.collapsible) {
+            return;
+        }
+        const stored = this.#state.read("open");
+        if (stored === "true" || stored === "false") {
+            this.open = stored === "true";
+        }
+    }
+    #onGripKeyDown = (event) => {
+        if (event.key === " ") {
+            event.preventDefault();
+            this._reordering = !this._reordering;
+            this.#emitReorder(this._reordering ? "start" : "finish");
+            return;
+        }
+        if (!this._reordering) {
+            return;
+        }
+        const commands = {
+            ArrowUp: "up",
+            ArrowDown: "down",
+            Escape: "cancel"
+        };
+        const command = commands[event.key];
+        if (command === undefined) {
+            return;
+        }
+        event.preventDefault();
+        this.#emitReorder(command);
+        if (command === "cancel") {
+            this._reordering = false;
+        }
+    };
+    #onGripPointerDown = (event) => {
+        if (!isButtonElement(event.currentTarget) ||
+            event.button !== 0 ||
+            !this.reorderable) {
+            return;
+        }
+        event.preventDefault();
+        emitContainerEvent(this, "jolly-folder-drag", {
+            folder: this,
+            event
+        });
+    };
+    #emitReorder(command) {
+        emitContainerEvent(this, "jolly-folder-reorder", {
+            folder: this,
+            command
+        });
+    }
+    #namespace() {
+        const folderName = this.key || this.label;
+        return this.storageKey || this.persistenceKey || `jolly-folder:${folderName}`;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Folder.prototype, "label", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Folder.prototype, "key", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Folder.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Folder.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Folder.prototype, "reorderable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Folder.prototype, "dragging", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Folder.prototype, "flush", void 0);
+__decorate([
+    property({
+        type: String,
+        attribute: "storage-key"
+    }),
+    __metadata("design:type", String)
+], Folder.prototype, "storageKey", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], Folder.prototype, "storage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], Folder.prototype, "_reordering", void 0);
+Folder = __decorate([
+    customElement("jolly-folder"),
+    __metadata("design:paramtypes", [])
+], Folder);
+export { Folder };
+//# sourceMappingURL=Folder.js.map

package/dist/containers/Folder.js.map

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Folder.styles.d.ts","sourceRoot":"","sources":["../../src/containers/Folder.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,YAAY,yBA6NxB,CAAC"}

package/dist/containers/Folder.styles.js

@@ -0,0 +1,228 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { kFallback } from "../theme/styles/fallbacks.js";
+import { fillTransition, truncate } from "../theme/styles/mixins.js";
+export const folderStyles = css `
+  :host {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    gap: var(--jolly-row-gap, 4px);
+    min-width: 0;
+    margin-block-end: var(--jolly-folder-gap, 2px);
+    color: var(--jolly-text, ${kFallback.text});
+    font: inherit;
+  }
+
+  .header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--jolly-space-1, 4px);
+    min-height: var(--jolly-row-height, 20px);
+    overflow: hidden;
+    padding-inline: var(--jolly-space-1, 4px);
+    border: 0;
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(
+      --jolly-folder-header-bg,
+      ${kFallback.folderHeaderBg}
+    );
+    color: inherit;
+    font: inherit;
+    ${fillTransition}
+  }
+
+  .header::after {
+    position: absolute;
+    z-index: 0;
+    inset-block: 0;
+    inset-inline-end: 0;
+    width: 46%;
+    background: conic-gradient(
+        from 90deg,
+        currentColor 25%,
+        transparent 0 50%,
+        currentColor 0 75%,
+        transparent 0
+      )
+      0 / 8px 8px;
+    color: var(--jolly-accent-text, ${kFallback.focusRing});
+    content: "";
+    opacity: 0.08;
+    pointer-events: none;
+    -webkit-mask-image: linear-gradient(to right, transparent, black 55%);
+    mask-image: linear-gradient(to right, transparent, black 55%);
+    transition: opacity var(--jolly-duration-fast, 100ms)
+      var(--jolly-easing, ease);
+  }
+
+  .header:hover,
+  .header:focus-within {
+    background: var(
+      --jolly-folder-header-bg-hover,
+      ${kFallback.folderHeaderBgHover}
+    );
+  }
+
+  .header:hover::after,
+  .header:focus-within::after {
+    opacity: 0.14;
+  }
+
+  .toggle,
+  .title {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-width: 0;
+    gap: var(--jolly-space-1, 4px);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+  }
+
+  .toggle {
+    cursor: pointer;
+  }
+
+  .toggle .label,
+  .title .label {
+    min-width: 0;
+    ${truncate}
+  }
+
+  ::slotted([slot="actions"]) {
+    position: relative;
+    z-index: 1;
+    flex: 0 0 auto;
+    margin-block: var(--jolly-space-1, 4px);
+  }
+
+  ::slotted(jolly-button[slot="actions"]) {
+    --jolly-text: var(
+      --jolly-folder-action-fg,
+      ${kFallback.folderActionFg}
+    );
+    --jolly-control-bg: var(
+      --jolly-folder-action-bg,
+      ${kFallback.folderActionBg}
+    );
+    --jolly-control-bg-hover: var(--jolly-folder-action-bg-hover);
+    --jolly-control-bg-focus: var(--jolly-folder-action-bg-focus);
+    --jolly-control-bg-active: var(--jolly-folder-action-bg-active);
+  }
+
+  /*
+   * The danger variant paints itself from its own tokens, so it has to be
+   * inverted on its own: a filled red ground, the glyph in the action
+   * foreground.
+   */
+  ::slotted(jolly-button[slot="actions"][variant="danger"]) {
+    --jolly-danger: var(
+      --jolly-folder-action-danger-fg,
+      ${kFallback.folderActionDangerFg}
+    );
+    --jolly-invalid-bg: var(
+      --jolly-folder-action-danger-bg,
+      ${kFallback.folderActionDangerBg}
+    );
+    --jolly-invalid-bg-hover: var(--jolly-folder-action-danger-bg-hover);
+    --jolly-invalid-bg-focus: var(--jolly-folder-action-danger-bg-focus);
+  }
+
+  /*
+   * The gutter holds the chevron's place in a folder that has none, so a
+   * header that cannot collapse still lines its label up with its neighbours.
+   */
+  .toggle .chevron,
+  .title .gutter {
+    flex: 0 0 auto;
+    width: 10px;
+    height: 10px;
+  }
+
+  .toggle .chevron {
+    color: var(--jolly-text-muted, ${kFallback.text});
+    transform-origin: center;
+    transition: transform var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
+  }
+
+  :host([open]) .toggle .chevron {
+    transform: rotate(90deg);
+  }
+
+  .grip {
+    position: relative;
+    z-index: 1;
+    display: none;
+    width: var(--jolly-control-height, 20px);
+    height: var(--jolly-control-height, 20px);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--jolly-text-muted, ${kFallback.text});
+    cursor: grab;
+  }
+
+  .grip jolly-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  :host([reorderable]) .grip {
+    display: inline-grid;
+    place-items: center;
+  }
+
+  .grip {
+    touch-action: none;
+  }
+
+  :host([dragging]) {
+    opacity: 0.4;
+  }
+
+  button:focus-visible {
+    outline: none;
+    background: var(--jolly-control-bg-focus);
+  }
+
+  .content {
+    display: none;
+    flex-direction: column;
+    gap: var(--jolly-row-gap, 4px);
+    padding-inline-start: var(
+      --jolly-folder-indent,
+      var(--jolly-space-1, 4px)
+    );
+  }
+
+  :host([flush]) .content {
+    padding-inline-start: 0;
+  }
+
+  /*
+   * The content takes any height the host is given, so a folder stretched by
+   * its owner hands that height down to a filling child.
+   */
+  :host([open]) .content {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  @media (forced-colors: active) {
+    .header::after {
+      display: none;
+    }
+  }
+`;
+//# sourceMappingURL=Folder.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Folder.styles.js","sourceRoot":"","sources":["../../src/containers/Folder.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;AACzD,OAAO,EACL,cAAc,EACd,QAAQ,EACT,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;+BAQA,SAAS,CAAC,IAAI;;;;;;;;;;;;;;;;QAgBrC,SAAS,CAAC,cAAc;;;;MAI1B,cAAc;;;;;;;;;;;;;;;;;sCAiBkB,SAAS,CAAC,SAAS;;;;;;;;;;;;;;QAcjD,SAAS,CAAC,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAkC/B,QAAQ;;;;;;;;;;;;;QAaN,SAAS,CAAC,cAAc;;;;QAIxB,SAAS,CAAC,cAAc;;;;;;;;;;;;;;;QAexB,SAAS,CAAC,oBAAoB;;;;QAI9B,SAAS,CAAC,oBAAoB;;;;;;;;;;;;;;;;;;qCAkBD,SAAS,CAAC,IAAI;;;;;;;;;;;;;;;;;;qCAkBd,SAAS,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDlD,CAAC"}

package/dist/containers/FolderListController.d.ts

@@ -0,0 +1,28 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+import type { StorageAdapter } from "../storage/StorageAdapter.ts";
+export interface FolderListOptions {
+    content(): HTMLElement;
+    contentSlot(): HTMLSlotElement;
+    namespace(): string;
+    reorderable(): boolean;
+    storage(): StorageAdapter;
+    announce(message: string): void;
+}
+/**
+ * Owns folder identity and ordering for the pane that slots them.
+ */
+export declare class FolderListController implements ReactiveController {
+    #private;
+    constructor(host: ReactiveControllerHost, options: FolderListOptions);
+    hostDisconnected(): void;
+    states(): Record<string, {
+        open: boolean;
+    }>;
+    applyStates(states: Readonly<Record<string, {
+        open: boolean;
+    }>>): void;
+    onContentChange: () => void;
+    onFolderDrag: (event: Event) => void;
+    onReorderCommand: (event: Event) => void;
+}
+//# sourceMappingURL=FolderListController.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderListController.d.ts","sourceRoot":"","sources":["../../src/containers/FolderListController.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,kBAAkB,EAClB,sBAAsB,EACvB,MAAM,KAAK,CAAC;AAYb,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAwBnE,MAAM,WAAW,iBAAiB;IAChC,OAAO,IAAI,WAAW,CAAC;IACvB,WAAW,IAAI,eAAe,CAAC;IAC/B,SAAS,IAAI,MAAM,CAAC;IACpB,WAAW,IAAI,OAAO,CAAC;IACvB,OAAO,IAAI,cAAc,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,qBAAa,oBAAqB,YAAW,kBAAkB;;gBAO3D,IAAI,EAAE,sBAAsB,EAC5B,OAAO,EAAE,iBAAiB;IAM5B,gBAAgB,IAAI,IAAI;IAKxB,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;KAAE,CAAC;IAO5C,WAAW,CACT,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;KAAE,CAAC,CAAC,GACnD,IAAI;IASP,eAAe,aA0Bb;IAEF,YAAY,GACV,OAAO,KAAK,UA4DZ;IAEF,gBAAgB,GACd,OAAO,KAAK,UA4DZ;CAsDH"}