@jolly-pixel/ui 1.0.1 → 2.0.0

package/dist/containers/DockLayout.js

@@ -31,10 +31,10 @@ const kGrabInset = 24;
  * single persisted snapshot of that, and any drag that crosses a container.
  */
 let DockLayout = class DockLayout extends LitElement {
-    static styles = css `
-    :host {
-      display: contents;
-    }
+    static styles = css `
+    :host {
+      display: contents;
+    }
   `;
     #declared = null;
     #snapshot = emptyLayout();

package/dist/containers/Floating.js

@@ -76,29 +76,29 @@ let Floating = class Floating extends LitElement {
         this.#managed = this.closest("jolly-dock-layout") !== null;
     }
     render() {
-        return html `
-      <div
-        class="content"
-        @jolly-pane-drag=${this.#onPaneDrag}
-        @jolly-toggle=${this.#onPaneToggle}
-      >
-        <slot @slotchange=${this.#onSlotChange}></slot>
-      </div>
-      <div
-        class="resize-handle right"
-        part="resize-handle-right"
-        aria-label="Resize floating pane width"
-      ></div>
-      <div
-        class="resize-handle bottom"
-        part="resize-handle-bottom"
-        aria-label="Resize floating pane height"
-      ></div>
-      <div
-        class="resize-handle corner bottom-right"
-        part="resize-handle-corner"
-        aria-hidden="true"
-      ></div>
+        return html `
+      <div
+        class="content"
+        @jolly-pane-drag=${this.#onPaneDrag}
+        @jolly-toggle=${this.#onPaneToggle}
+      >
+        <slot @slotchange=${this.#onSlotChange}></slot>
+      </div>
+      <div
+        class="resize-handle right"
+        part="resize-handle-right"
+        aria-label="Resize floating pane width"
+      ></div>
+      <div
+        class="resize-handle bottom"
+        part="resize-handle-bottom"
+        aria-label="Resize floating pane height"
+      ></div>
+      <div
+        class="resize-handle corner bottom-right"
+        part="resize-handle-corner"
+        aria-hidden="true"
+      ></div>
     `;
     }
     willUpdate() {

package/dist/containers/Floating.styles.js

@@ -3,121 +3,121 @@ import { css } from "lit";
 // Import Internal Dependencies
 import { kFallback } from "../theme/styles/fallbacks.js";
 import { focusRing } from "../theme/styles/mixins.js";
-export const floatingStyles = css `
-  /*
-   * A floating window is a plane and genuinely detached, so it owns both the
-   * raised surface and the shadow. The pane it holds paints nothing.
-   */
-  :host {
-    position: fixed;
-    display: block;
-    box-sizing: border-box;
-    width: 320px;
-    height: 360px;
-    min-width: 0;
-    min-height: 0;
-    border-radius: var(--jolly-radius-md, 6px);
-    background: var(--jolly-surface-raised, ${kFallback.controlBg});
-    box-shadow: var(--jolly-shadow-floating, 0 4px 16px rgb(0 0 0 / 0.3));
-  }
-
-  /*
-   * A dragged window ghosts as a whole, surface and shadow included, so the
-   * dock it is aiming at stays readable underneath it. The pane inside does
-   * not dim on its own here: the window is the source being moved.
-   */
-  :host([dragging]) {
-    opacity: 0.4;
-  }
-
-  .content {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border-radius: var(--jolly-radius-md, 6px);
-  }
-
-  ::slotted(jolly-pane) {
-    width: 100%;
-    height: 100%;
-    background: transparent;
-  }
-
-  .resize-handle {
-    position: absolute;
-    z-index: 1;
-    border: 0;
-    background: transparent;
-    touch-action: none;
-  }
-
-  .resize-handle::after {
-    position: absolute;
-    background: var(--jolly-groove);
-    content: "";
-    opacity: 0;
-  }
-
-  .resize-handle:hover::after,
-  .resize-handle:focus-visible::after {
-    opacity: 1;
-  }
-
-  /*
-   * Inset by the host's own border-radius so the strip (and its hover line)
-   * stops before the rounded corner instead of running past the visible
-   * surface into the void the radius cuts away. The corner handle below
-   * fills the gap this leaves.
-   */
-  .resize-handle.right {
-    top: var(--jolly-radius-md, 6px);
-    right: -4px;
-    bottom: var(--jolly-radius-md, 6px);
-    width: 8px;
-    cursor: ew-resize;
-  }
-
-  .resize-handle.right::after {
-    top: 0;
-    bottom: 0;
-    left: 3px;
-    width: 2px;
-  }
-
-  .resize-handle.bottom {
-    right: var(--jolly-radius-md, 6px);
-    bottom: -4px;
-    left: var(--jolly-radius-md, 6px);
-    height: 8px;
-    cursor: ns-resize;
-  }
-
-  .resize-handle.bottom::after {
-    top: 3px;
-    right: 0;
-    left: 0;
-    height: 2px;
-  }
-
-  .resize-handle.corner {
-    right: -4px;
-    bottom: -4px;
-    width: calc(var(--jolly-radius-md, 6px) + 8px);
-    height: calc(var(--jolly-radius-md, 6px) + 8px);
-    cursor: nwse-resize;
-  }
-
-  .resize-handle.corner::after {
-    right: 4px;
-    bottom: 4px;
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-  }
-
-  .resize-handle:focus-visible {
-    ${focusRing}
-    outline-offset: -2px;
-  }
+export const floatingStyles = css `
+  /*
+   * A floating window is a plane and genuinely detached, so it owns both the
+   * raised surface and the shadow. The pane it holds paints nothing.
+   */
+  :host {
+    position: fixed;
+    display: block;
+    box-sizing: border-box;
+    width: 320px;
+    height: 360px;
+    min-width: 0;
+    min-height: 0;
+    border-radius: var(--jolly-radius-md, 6px);
+    background: var(--jolly-surface-raised, ${kFallback.controlBg});
+    box-shadow: var(--jolly-shadow-floating, 0 4px 16px rgb(0 0 0 / 0.3));
+  }
+
+  /*
+   * A dragged window ghosts as a whole, surface and shadow included, so the
+   * dock it is aiming at stays readable underneath it. The pane inside does
+   * not dim on its own here: the window is the source being moved.
+   */
+  :host([dragging]) {
+    opacity: 0.4;
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: var(--jolly-radius-md, 6px);
+  }
+
+  ::slotted(jolly-pane) {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+  }
+
+  .resize-handle {
+    position: absolute;
+    z-index: 1;
+    border: 0;
+    background: transparent;
+    touch-action: none;
+  }
+
+  .resize-handle::after {
+    position: absolute;
+    background: var(--jolly-groove);
+    content: "";
+    opacity: 0;
+  }
+
+  .resize-handle:hover::after,
+  .resize-handle:focus-visible::after {
+    opacity: 1;
+  }
+
+  /*
+   * Inset by the host's own border-radius so the strip (and its hover line)
+   * stops before the rounded corner instead of running past the visible
+   * surface into the void the radius cuts away. The corner handle below
+   * fills the gap this leaves.
+   */
+  .resize-handle.right {
+    top: var(--jolly-radius-md, 6px);
+    right: -4px;
+    bottom: var(--jolly-radius-md, 6px);
+    width: 8px;
+    cursor: ew-resize;
+  }
+
+  .resize-handle.right::after {
+    top: 0;
+    bottom: 0;
+    left: 3px;
+    width: 2px;
+  }
+
+  .resize-handle.bottom {
+    right: var(--jolly-radius-md, 6px);
+    bottom: -4px;
+    left: var(--jolly-radius-md, 6px);
+    height: 8px;
+    cursor: ns-resize;
+  }
+
+  .resize-handle.bottom::after {
+    top: 3px;
+    right: 0;
+    left: 0;
+    height: 2px;
+  }
+
+  .resize-handle.corner {
+    right: -4px;
+    bottom: -4px;
+    width: calc(var(--jolly-radius-md, 6px) + 8px);
+    height: calc(var(--jolly-radius-md, 6px) + 8px);
+    cursor: nwse-resize;
+  }
+
+  .resize-handle.corner::after {
+    right: 4px;
+    bottom: 4px;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+  }
+
+  .resize-handle:focus-visible {
+    ${focusRing}
+    outline-offset: -2px;
+  }
 `;
 //# sourceMappingURL=Floating.styles.js.map

package/dist/containers/Folder.js

@@ -67,40 +67,40 @@ let Folder = class Folder extends LitElement {
         }
     }
     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>
+        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"
+        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"
+        return html `<div class="title"><span
+      class="gutter"
+      aria-hidden="true"
     ></span><span class="label">${this.label}</span></div>`;
     }
     headerRect() {