@rogieking/figui3 1.9.6 → 2.0.0

package/fig.js

@@ -26,7 +26,7 @@ class FigButton extends HTMLElement {
   #selected;
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
+    this.attachShadow({ mode: "open", delegatesFocus: true });
   }
   connectedCallback() {
     this.type = this.getAttribute("type") || "button";
@@ -48,6 +48,11 @@ class FigButton extends HTMLElement {
                     background: transparent;
                     margin: calc(var(--spacer-2)*-1);
                     height: var(--spacer-4);
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    width: 100%;
+                    min-width: 0;
                 }
             </style>
             <button type="${this.type}">
@@ -62,6 +67,16 @@ class FigButton extends HTMLElement {
     requestAnimationFrame(() => {
       this.button = this.shadowRoot.querySelector("button");
       this.button.addEventListener("click", this.#handleClick.bind(this));
+
+      // Forward focus-visible state to host element
+      this.button.addEventListener("focus", () => {
+        if (this.button.matches(":focus-visible")) {
+          this.setAttribute("data-focus-visible", "");
+        }
+      });
+      this.button.addEventListener("blur", () => {
+        this.removeAttribute("data-focus-visible");
+      });
     });
   }
 
@@ -592,20 +607,232 @@ customElements.define("fig-popover", FigPopover);
  * @attr {boolean} modal - Whether the dialog should be modal
  */
 class FigDialog extends HTMLDialogElement {
+  #isDragging = false;
+  #dragOffset = { x: 0, y: 0 };
+  #boundPointerDown;
+  #boundPointerMove;
+  #boundPointerUp;
+  #offset = 16; // 1rem in pixels
+  #positionInitialized = false;
+
+  constructor() {
+    super();
+    this.#boundPointerDown = this.#handlePointerDown.bind(this);
+    this.#boundPointerMove = this.#handlePointerMove.bind(this);
+    this.#boundPointerUp = this.#handlePointerUp.bind(this);
+  }
+
   connectedCallback() {
     this.modal =
       this.hasAttribute("modal") && this.getAttribute("modal") !== "false";
+
+    // Set up drag functionality
+    this.drag =
+      this.hasAttribute("drag") && this.getAttribute("drag") !== "false";
+
     requestAnimationFrame(() => {
       this.#addCloseListeners();
+      this.#setupDragListeners();
+      this.#applyPosition();
     });
   }
 
+  disconnectedCallback() {
+    this.#removeDragListeners();
+  }
+
   #addCloseListeners() {
     this.querySelectorAll("fig-button[close-dialog]").forEach((button) => {
       button.removeEventListener("click", this.close);
       button.addEventListener("click", this.close.bind(this));
     });
   }
+
+  #applyPosition() {
+    const position = this.getAttribute("position") || "";
+
+    // Apply common styles
+    this.style.position = "fixed";
+    this.style.margin = "0";
+
+    // Reset position properties
+    this.style.top = "auto";
+    this.style.bottom = "auto";
+    this.style.left = "auto";
+    this.style.right = "auto";
+    this.style.transform = "none";
+
+    // Parse position attribute
+    const hasTop = position.includes("top");
+    const hasBottom = position.includes("bottom");
+    const hasLeft = position.includes("left");
+    const hasRight = position.includes("right");
+    const hasVCenter = position.includes("center") && !hasTop && !hasBottom;
+    const hasHCenter = position.includes("center") && !hasLeft && !hasRight;
+
+    // Vertical positioning
+    if (hasTop) {
+      this.style.top = `${this.#offset}px`;
+    } else if (hasBottom) {
+      this.style.bottom = `${this.#offset}px`;
+    } else if (hasVCenter) {
+      this.style.top = "50%";
+    }
+
+    // Horizontal positioning
+    if (hasLeft) {
+      this.style.left = `${this.#offset}px`;
+    } else if (hasRight) {
+      this.style.right = `${this.#offset}px`;
+    } else if (hasHCenter) {
+      this.style.left = "50%";
+    }
+
+    // Apply transform for centering
+    if (hasVCenter && hasHCenter) {
+      this.style.transform = "translate(-50%, -50%)";
+    } else if (hasVCenter) {
+      this.style.transform = "translateY(-50%)";
+    } else if (hasHCenter) {
+      this.style.transform = "translateX(-50%)";
+    }
+
+    this.#positionInitialized = true;
+  }
+
+  #setupDragListeners() {
+    if (this.drag) {
+      this.addEventListener("pointerdown", this.#boundPointerDown);
+      // Set move cursor only on fig-header elements
+      const header = this.querySelector("fig-header, header");
+      if (header) {
+        header.style.cursor = "move";
+      }
+    }
+  }
+
+  #removeDragListeners() {
+    this.removeEventListener("pointerdown", this.#boundPointerDown);
+    document.removeEventListener("pointermove", this.#boundPointerMove);
+    document.removeEventListener("pointerup", this.#boundPointerUp);
+  }
+
+  #isInteractiveElement(element) {
+    // List of interactive element types and attributes to avoid dragging on
+    const interactiveSelectors = [
+      "input",
+      "button",
+      "select",
+      "textarea",
+      "a",
+      "label",
+      '[contenteditable="true"]',
+      "[tabindex]",
+      "fig-button",
+      "fig-input-text",
+      "fig-input-number",
+      "fig-slider",
+      "fig-checkbox",
+      "fig-radio",
+      "fig-tab",
+      "fig-dropdown",
+      "fig-chit",
+    ];
+
+    // Check if the element itself is interactive
+    if (interactiveSelectors.some((selector) => element.matches?.(selector))) {
+      return true;
+    }
+
+    // Check if any parent element up to the dialog is interactive
+    let parent = element.parentElement;
+    while (parent && parent !== this) {
+      if (interactiveSelectors.some((selector) => parent.matches?.(selector))) {
+        return true;
+      }
+      parent = parent.parentElement;
+    }
+
+    return false;
+  }
+
+  #handlePointerDown(e) {
+    if (!this.drag || this.#isInteractiveElement(e.target)) {
+      return;
+    }
+
+    this.#isDragging = true;
+    this.setPointerCapture(e.pointerId);
+
+    // Get current position from computed style
+    const rect = this.getBoundingClientRect();
+
+    // Ensure we are using top/left for dragging by converting current position
+    this.style.top = `${rect.top}px`;
+    this.style.left = `${rect.left}px`;
+    this.style.bottom = "auto";
+    this.style.right = "auto";
+
+    // Store offset from pointer to dialog top-left corner
+    this.#dragOffset.x = e.clientX - rect.left;
+    this.#dragOffset.y = e.clientY - rect.top;
+
+    document.addEventListener("pointermove", this.#boundPointerMove);
+    document.addEventListener("pointerup", this.#boundPointerUp);
+
+    e.preventDefault();
+  }
+
+  #handlePointerMove(e) {
+    if (!this.#isDragging) return;
+
+    // Calculate new position based on pointer position minus offset
+    const newLeft = e.clientX - this.#dragOffset.x;
+    const newTop = e.clientY - this.#dragOffset.y;
+
+    // Apply position directly with pixels
+    this.style.left = `${newLeft}px`;
+    this.style.top = `${newTop}px`;
+
+    e.preventDefault();
+  }
+
+  #handlePointerUp(e) {
+    if (!this.#isDragging) return;
+
+    this.#isDragging = false;
+    this.releasePointerCapture(e.pointerId);
+
+    document.removeEventListener("pointermove", this.#boundPointerMove);
+    document.removeEventListener("pointerup", this.#boundPointerUp);
+
+    e.preventDefault();
+  }
+
+  static get observedAttributes() {
+    return ["modal", "drag", "position"];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "drag") {
+      this.drag = newValue !== null && newValue !== "false";
+
+      if (this.drag) {
+        this.#setupDragListeners();
+      } else {
+        this.#removeDragListeners();
+        // Remove move cursor from header
+        const header = this.querySelector("fig-header, header");
+        if (header) {
+          header.style.cursor = "";
+        }
+      }
+    }
+
+    if (name === "position" && this.#positionInitialized) {
+      this.#applyPosition();
+    }
+  }
 }
 customElements.define("fig-dialog", FigDialog, { extends: "dialog" });
 
@@ -2078,8 +2305,7 @@ class FigCheckbox extends HTMLElement {
     this.input.setAttribute("id", figUniqueId());
     this.input.setAttribute("name", this.name);
     this.input.setAttribute("type", "checkbox");
-    this.labelElement = document.createElement("label");
-    this.labelElement.setAttribute("for", this.input.id);
+    this.labelElement = null;
   }
   connectedCallback() {
     this.checked = this.input.checked =
@@ -2095,7 +2321,12 @@ class FigCheckbox extends HTMLElement {
     }
 
     this.append(this.input);
-    this.append(this.labelElement);
+
+    // Only create label if label attribute is present
+    if (this.hasAttribute("label")) {
+      this.#createLabel();
+      this.labelElement.innerText = this.getAttribute("label");
+    }
 
     this.render();
   }
@@ -2103,6 +2334,14 @@ class FigCheckbox extends HTMLElement {
     return ["disabled", "label", "checked", "name", "value"];
   }
 
+  #createLabel() {
+    if (!this.labelElement) {
+      this.labelElement = document.createElement("label");
+      this.labelElement.setAttribute("for", this.input.id);
+      this.append(this.labelElement);
+    }
+  }
+
   render() {}
 
   focus() {
@@ -2116,7 +2355,13 @@ class FigCheckbox extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
       case "label":
-        this.labelElement.innerText = newValue;
+        if (newValue) {
+          this.#createLabel();
+          this.labelElement.innerText = newValue;
+        } else if (this.labelElement) {
+          this.labelElement.remove();
+          this.labelElement = null;
+        }
         break;
       case "checked":
         this.checked = this.input.checked =
@@ -2174,29 +2419,139 @@ class FigSwitch extends FigCheckbox {
 }
 window.customElements.define("fig-switch", FigSwitch);
 
-/* Bell */
-class FigBell extends HTMLElement {
+/* Toast */
+/**
+ * A toast notification element for non-modal, time-based messages.
+ * Always positioned at bottom center of the screen.
+ * @attr {number} duration - Auto-dismiss duration in ms (0 = no auto-dismiss, default: 5000)
+ * @attr {number} offset - Distance from bottom edge in pixels (default: 16)
+ * @attr {string} theme - Visual theme: "dark" (default), "light", "danger", "brand"
+ * @attr {boolean} open - Whether the toast is visible
+ */
+class FigToast extends HTMLDialogElement {
+  #defaultOffset = 16; // 1rem in pixels
+  #autoCloseTimer = null;
+
   constructor() {
     super();
   }
-}
-window.customElements.define("fig-bell", FigBell);
 
-/* Badge */
-class FigBadge extends HTMLElement {
-  constructor() {
-    super();
+  get #offset() {
+    return parseInt(this.getAttribute("offset") ?? this.#defaultOffset);
   }
-}
-window.customElements.define("fig-badge", FigBadge);
 
-/* Accordion */
-class FigAccordion extends HTMLElement {
-  constructor() {
-    super();
+  connectedCallback() {
+    // Set default theme if not specified
+    if (!this.hasAttribute("theme")) {
+      this.setAttribute("theme", "dark");
+    }
+
+    // Ensure toast is closed by default
+    // Remove native open attribute if present and not explicitly "true"
+    const shouldOpen =
+      this.getAttribute("open") === "true" || this.getAttribute("open") === "";
+    if (this.hasAttribute("open") && !shouldOpen) {
+      this.removeAttribute("open");
+    }
+
+    // Close the dialog initially (override native behavior)
+    if (!shouldOpen) {
+      this.close();
+    }
+
+    requestAnimationFrame(() => {
+      this.#addCloseListeners();
+      this.#applyPosition();
+
+      // Auto-show if open attribute is explicitly true
+      if (shouldOpen) {
+        this.showToast();
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    this.#clearAutoClose();
+  }
+
+  #addCloseListeners() {
+    this.querySelectorAll("[close-toast]").forEach((button) => {
+      button.removeEventListener("click", this.#handleClose);
+      button.addEventListener("click", this.#handleClose.bind(this));
+    });
+  }
+
+  #handleClose() {
+    this.hideToast();
+  }
+
+  #applyPosition() {
+    // Always bottom center
+    this.style.position = "fixed";
+    this.style.margin = "0";
+    this.style.top = "auto";
+    this.style.bottom = `${this.#offset}px`;
+    this.style.left = "50%";
+    this.style.right = "auto";
+    this.style.transform = "translateX(-50%)";
+  }
+
+  #startAutoClose() {
+    this.#clearAutoClose();
+
+    const duration = parseInt(this.getAttribute("duration") ?? "5000");
+    if (duration > 0) {
+      this.#autoCloseTimer = setTimeout(() => {
+        this.hideToast();
+      }, duration);
+    }
+  }
+
+  #clearAutoClose() {
+    if (this.#autoCloseTimer) {
+      clearTimeout(this.#autoCloseTimer);
+      this.#autoCloseTimer = null;
+    }
+  }
+
+  /**
+   * Show the toast notification (non-modal)
+   */
+  showToast() {
+    this.show(); // Non-modal show
+    this.#applyPosition();
+    this.#startAutoClose();
+    this.dispatchEvent(new CustomEvent("toast-show", { bubbles: true }));
+  }
+
+  /**
+   * Hide the toast notification
+   */
+  hideToast() {
+    this.#clearAutoClose();
+    this.close();
+    this.dispatchEvent(new CustomEvent("toast-hide", { bubbles: true }));
+  }
+
+  static get observedAttributes() {
+    return ["duration", "offset", "open", "theme"];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "offset") {
+      this.#applyPosition();
+    }
+
+    if (name === "open") {
+      if (newValue !== null && newValue !== "false") {
+        this.showToast();
+      } else {
+        this.hideToast();
+      }
+    }
   }
 }
-window.customElements.define("fig-accordion", FigAccordion);
+customElements.define("fig-toast", FigToast, { extends: "dialog" });
 
 /* Combo Input */
 /**
@@ -2871,15 +3226,14 @@ class FigInputAngle extends HTMLElement {
         </div>
         ${
           this.text
-            ? `<fig-input-text 
-                type="number"
+            ? `<fig-input-number 
                 name="angle"
                 step="0.1"
                 value="${this.angle}"
                 min="0"
-                max="360">
-                <span slot="append">°</span>
-              </fig-input-text>`
+                max="360"
+                units="°">
+              </fig-input-number>`
             : ""
         }
     `;
@@ -2888,7 +3242,7 @@ class FigInputAngle extends HTMLElement {
   #setupListeners() {
     this.handle = this.querySelector(".fig-input-angle-handle");
     this.plane = this.querySelector(".fig-input-angle-plane");
-    this.angleInput = this.querySelector("fig-input-text[name='angle']");
+    this.angleInput = this.querySelector("fig-input-number[name='angle']");
     this.plane.addEventListener("mousedown", this.#handleMouseDown.bind(this));
     this.plane.addEventListener(
       "touchstart",
@@ -2897,7 +3251,6 @@ class FigInputAngle extends HTMLElement {
     window.addEventListener("keydown", this.#handleKeyDown.bind(this));
     window.addEventListener("keyup", this.#handleKeyUp.bind(this));
     if (this.text && this.angleInput) {
-      this.angleInput = this.querySelector("fig-input-text");
       this.angleInput.addEventListener(
         "input",
         this.#handleAngleInput.bind(this)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.9.6",
+  "version": "2.0.0",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {