@rogieking/figui3 1.0.95 → 1.0.97

package/example.html

@@ -18,6 +18,9 @@
     </fig-header>
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>
+    <form onsubmit="console.log('submit'); return false;">
+        <fig-button type="submit">Submit</fig-button>
+    </form>
     <br />
     <fig-button id="button-progressive-blur"
                 variant="ghost"
@@ -64,6 +67,7 @@
     <fig-slider min="0"
                 max="1"
                 transform="100"
+                variant="minimal"
                 step="0.01"
                 text="true"
                 style="width:300px;"

package/fig.css

@@ -1430,6 +1430,7 @@ details {
 .fig-slider,
 fig-slider {
   --slider-height: 1rem;
+  --slider-thumb-size: var(--slider-height);
   --slider-percent: calc(var(--slider-complete) * 100%);
   --start-percent: calc(var(--default, 0) * 100%);
   --slider-tick-size: calc(var(--slider-height) / 4);
@@ -1560,9 +1561,10 @@ fig-slider {
     &::-webkit-slider-thumb {
       appearance: none;
       -webkit-appearance: none;
-      border-radius: 0.5rem;
-      height: var(--slider-height);
-      width: var(--slider-height);
+      border-radius: 100%;
+      height: var(--slider-thumb-size);
+      width: var(--slider-thumb-size);
+      margin-top: calc(var(--slider-height) / 2 - var(--slider-thumb-size) / 2);
       aspect-ratio: 1;
       border: none;
       position: relative;
@@ -1628,9 +1630,9 @@ fig-slider {
 
     &::-moz-range-thumb {
       appearance: none;
-      border-radius: 0.5rem;
-      height: var(--slider-height);
-      width: var(--slider-height);
+      border-radius: 100%;
+      height: var(--slider-thumb-size);
+      width: var(--slider-thumb-size);
       aspect-ratio: 1;
       border: none;
       position: relative;
@@ -1707,8 +1709,52 @@ fig-slider {
       }
     }
   }
+  &[variant="minimal"]{
+    transition: all 0.2s ease-in-out;
+  }
+  &[variant="minimal"] {
+    --slider-height: 0.25rem;
+    --slider-thumb-size: 0.5rem;
+    height: 1.5rem;
+    .fig-slider-input-container {
+      height: var(--slider-height);
+      position: relative;
+      display: block;
+      width: 100%;
+
+      /* Track */
+      &::before {
+        box-shadow: none;
+        background: var(--figma-color-text-onbrand-tertiary);
+      }
+
+      input[type="range"] {
+        &::-webkit-slider-runnable-track {
+          box-shadow: none;
+        }
+      }
+    }
+    fig-input-text {
+      height: calc(var(--slider-height) * 2);
+      background-color: transparent;
+    }
+    &:hover,
+    &:focus-within {
+      --slider-height: 1rem;
+      --slider-thumb-size: 1rem;
+      .fig-slider-input-container {
+      &::before {
+          background: var(--figma-color-bg-brand);
+        }
+      }
+      fig-input-text {
+        height: auto;
+      }
+    }
+  }
 }
 
+
 /* Popovers/Dialogs */
 .dialog,
 dialog,

package/fig.js

@@ -8,14 +8,14 @@ function supportsPopover() {
 if (window.customElements && !window.customElements.get("fig-button")) {
   /* Button */
   class FigButton extends HTMLElement {
-    #type;
+    type;
     #selected;
     constructor() {
       super();
       this.attachShadow({ mode: "open" });
     }
     connectedCallback() {
-      this.#type = this.getAttribute("type") || "button";
+      this.type = this.getAttribute("type") || "button";
       this.shadowRoot.innerHTML = `
             <style>
                 button, button:hover, button:active {
@@ -36,7 +36,7 @@ if (window.customElements && !window.customElements.get("fig-button")) {
                     height: var(--spacer-4);
                 }
             </style>
-            <button type="${this.#type}">
+            <button type="${this.type}">
                 <slot></slot>
             </button>
             `;
@@ -44,45 +44,54 @@ if (window.customElements && !window.customElements.get("fig-button")) {
       this.#selected =
         this.hasAttribute("selected") &&
         this.getAttribute("selected") !== "false";
-      this.addEventListener("click", this.#handleClick.bind(this));
 
       requestAnimationFrame(() => {
-        this.button = this.querySelector("button");
+        this.button = this.shadowRoot.querySelector("button");
+        this.button.addEventListener("click", this.#handleClick.bind(this));
       });
     }
 
     get type() {
-      return this.#type;
+      return this.type;
     }
     set type(value) {
-      this.#type = value;
-      this.button.type = value;
       this.setAttribute("type", value);
     }
     get selected() {
       return this.#selected;
     }
     set selected(value) {
-      this.#selected = value;
       this.setAttribute("selected", value);
     }
 
-    #handleClick(event) {
-      if (this.#type === "toggle") {
-        this.selected = !this.#selected;
+    #handleClick() {
+      if (this.type === "toggle") {
+        this.toggleAttribute("selected", !this.hasAttribute("selected"));
       }
-      if (this.#type === "submit") {
-        this.button.click();
+      if (this.type === "submit") {
+        this.closest("form").dispatchEvent(new Event("submit"));
       }
     }
     static get observedAttributes() {
-      return ["disabled"];
+      return ["disabled", "selected"];
     }
     attributeChangedCallback(name, oldValue, newValue) {
       if (this.button) {
         this.button[name] = newValue;
-        if (newValue === "false") {
-          this.button.removeAttribute(name);
+        switch (name) {
+          case "disabled":
+            this.disabled = this.button.disabled =
+              newValue === "true" ||
+              (newValue === undefined && newValue !== null);
+            break;
+          case "type":
+            this.type = newValue;
+            this.button.type = this.type;
+            this.button.setAttribute("type", this.type);
+            break;
+          case "selected":
+            this.#selected = newValue === "true";
+            break;
         }
       }
     }

package/index.ts

@@ -0,0 +1 @@
+console.log("Hello via Bun!");

package/package.json

@@ -1,4 +1,15 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.95"
+  "version": "1.0.97",
+  "module": "index.ts",
+  "type": "module",
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "bun build fig.js --minify --outdir dist"
+  }
 }

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}