@rogieking/figui3 1.0.63 → 1.0.65

package/example.html

@@ -16,6 +16,83 @@
     <fig-header>
         <h3>UI3 Components</h3>
     </fig-header>
+    <br />
+    <fig-field direction="horizontal">
+        <label>Opacity</label>
+        <fig-slider type="opacity"
+                    full
+                    value="0.75"
+                    color="#ff0000"
+                    units="%"
+                    text="true"></fig-slider>
+        <fig-button variant="ghost"
+                    type="toggle"
+                    icon="true">
+            <svg class="svg"
+                 xmlns="http://www.w3.org/2000/svg"
+                 width="16"
+                 height="16"
+                 viewBox="0 0 16 16">
+                <path fill="currentColor"
+                      fill-opacity="1"
+                      fill-rule="evenodd"
+                      stroke="none"
+                      d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z">
+                </path>
+            </svg>
+        </fig-button>
+    </fig-field>
+    <br />
+    <fig-field direction="horizontal">
+        <label>Blend mode</label>
+        <fig-dropdown full
+                      type="dropdown">
+            <option>One</option>
+            <option>Two</option>
+        </fig-dropdown>
+        <fig-button variant="ghost"
+                    type="toggle"
+                    icon="true">
+            <svg class="svg"
+                 xmlns="http://www.w3.org/2000/svg"
+                 width="16"
+                 height="16"
+                 viewBox="0 0 16 16">
+                <path fill="currentColor"
+                      fill-opacity="1"
+                      fill-rule="evenodd"
+                      stroke="none"
+                      d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z">
+                </path>
+            </svg>
+        </fig-button>
+    </fig-field>
+    <br />
+    <fig-field direction="horizontal">
+        <label>Description</label>
+        <fig-input-text multiline="true"
+                        value=""
+                        full
+                        autoresize="true"
+                        resizable="true"
+                        placeholder="Anthropic API key"></fig-input-text>
+        <fig-button variant="ghost"
+                    type="toggle"
+                    icon="true">
+            <svg class="svg"
+                 xmlns="http://www.w3.org/2000/svg"
+                 width="16"
+                 height="16"
+                 viewBox="0 0 16 16">
+                <path fill="currentColor"
+                      fill-opacity="1"
+                      fill-rule="evenodd"
+                      stroke="none"
+                      d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z">
+                </path>
+            </svg>
+        </fig-button>
+    </fig-field>
     <fig-avatar src="https://avatars.githubusercontent.com/u/12345678?v=4"
                 name="John Doe"></fig-avatar>
     <fig-avatar size="large"
@@ -47,6 +124,68 @@
             <fig-button>Primary</fig-button>
             <fig-button variant="secondary">Secondary</fig-button>
             <fig-button variant="ghost">Ghost</fig-button>
+
+            <fig-button-combo>
+                <fig-button>Primary</fig-button>
+                <fig-button icon="true"
+                            type="select">
+                    <svg width="24"
+                         height="24"
+                         viewBox="0 0 24 24"
+                         fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                              clip-rule="evenodd"
+                              d="M9.64645 11.1464C9.84171 10.9512 10.1583 10.9512 10.3536 11.1464L12 12.7929L13.6464 11.1464C13.8417 10.9512 14.1583 10.9512 14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536L9.64645 11.8536C9.45118 11.6583 9.45118 11.3417 9.64645 11.1464Z"
+                              fill="currentColor"
+                              fill-opacity="0.9" />
+                    </svg>
+                    <fig-dropdown>
+                        <option>One</option>
+                        <option>Two</option>
+                    </fig-dropdown>
+                </fig-button>
+            </fig-button-combo>
+            <fig-button-combo>
+                <fig-button variant="secondary">Secondary</fig-button>
+                <fig-button variant="secondary"
+                            icon="true"
+                            type="select">
+                    <svg width="24"
+                         height="24"
+                         viewBox="0 0 24 24"
+                         fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                              clip-rule="evenodd"
+                              d="M9.64645 11.1464C9.84171 10.9512 10.1583 10.9512 10.3536 11.1464L12 12.7929L13.6464 11.1464C13.8417 10.9512 14.1583 10.9512 14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536L9.64645 11.8536C9.45118 11.6583 9.45118 11.3417 9.64645 11.1464Z"
+                              fill="currentColor"
+                              fill-opacity="0.9" />
+                    </svg>
+                    <fig-dropdown>
+                        <option>One</option>
+                        <option>Two</option>
+                    </fig-dropdown>
+                </fig-button>
+            </fig-button-combo>
+            <fig-button icon="true"
+                        type="select">
+                <svg width="24"
+                     height="24"
+                     viewBox="0 0 24 24"
+                     fill="none"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M9.64645 11.1464C9.84171 10.9512 10.1583 10.9512 10.3536 11.1464L12 12.7929L13.6464 11.1464C13.8417 10.9512 14.1583 10.9512 14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536L9.64645 11.8536C9.45118 11.6583 9.45118 11.3417 9.64645 11.1464Z"
+                          fill="currentColor"
+                          fill-opacity="0.9" />
+                </svg>
+                <fig-dropdown>
+                    <option>One</option>
+                    <option>Two</option>
+                </fig-dropdown>
+            </fig-button>
             <fig-button type="select">
                 Select
                 <fig-dropdown>

package/fig.css

@@ -602,17 +602,22 @@ select {
   padding-right: 1.5rem;
 }
 
-fig-dropdown:has([trigger]) {
-  & select {
-    opacity: 0;
-    position: absolute;
-    inset: 0;
-  }
+fig-dialog > *:not(dialog) {
+  display: none !important;
 }
 
-fig-dialog > *:not(dialog),
-fig-dropdown > *:not(select) {
-  display: none !important;
+/* Dropdown */
+fig-dropdown,
+.fig-dropdown {
+  display: inline-flex;
+  position: relative;
+
+  & > *:not(select) {
+    display: none !important;
+  }
+  > select {
+    display: block;
+  }
 }
 
 /* Button */
@@ -705,23 +710,7 @@ fig-button {
     padding: 0;
     flex-grow: 0;
     flex-shrink: 0;
-
-    &:hover {
-      background-color: var(--figma-color-bg-ghost-hover);
-    }
-  }
-
-  /* Upload */
-  &[upload],
-  &[upload] > button {
-    position: relative;
-
-    & input[type="file"] {
-      opacity: 0;
-      position: absolute;
-      inset: 0;
-      appearance: none;
-    }
+    flex-basis: var(--spacer-4);
   }
 
   /* Disabled */
@@ -763,6 +752,7 @@ fig-button {
   &[type="select"],
   &[type="upload"] {
     position: relative;
+    overflow: hidden;
     > select,
     > input,
     > fig-dropdown {
@@ -1090,6 +1080,46 @@ fig-image {
   }
 }
 
+/* Combo button */
+.fig-button-combo,
+fig-button-combo,
+.fig-input-combo,
+fig-input-combo {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0px;
+  & > * {
+    &:first-child,
+    &:first-child > * {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child,
+    &:last-child > * {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:not(:last-child):not(:first-child),
+    &:not(:last-child):not(:first-child) > * {
+      border-radius: 0;
+    }
+  }
+}
+.fig-button-combo,
+fig-button-combo {
+  > *:not(:first-child) {
+    border-left: 1px solid var(--figma-color-bg-brand-hover);
+    margin-left: -1px;
+  }
+  > *[variant="secondary"]:not(:first-child) {
+    border-left: transparent;
+    margin-left: -1px;
+  }
+}
+
 /* Combo input */
 .input-combo {
   display: inline-flex;
@@ -1857,7 +1887,6 @@ fig-content,
 fig-slider,
 fig-switch,
 fig-input-color,
-fig-input-text,
 fig-checkbox,
 fig-radio,
 fig-tab,
@@ -1872,22 +1901,29 @@ fig-tabs {
   }
 }
 
+/* Text input */
 fig-input-text {
+  display: inline-flex;
   user-select: all;
   gap: 0;
 
   &[multiline] {
     display: block;
   }
-}
-
-fig-input-text[autoresize] textarea,
-fig-input-text[autoresize] input {
-  field-sizing: content;
-}
-
-fig-input-text[resizable] textarea {
-  resize: both;
+  &[autoresize] input,
+  &[autoresize] textarea {
+    field-sizing: content;
+  }
+  &[resizable] input,
+  &[resizable] textarea {
+    resize: both;
+  }
+  &[resizable]:has(textarea[style*="width"]),
+  &[resizable]:has(textarea[style*="height"]),
+  &[resizable]:has(input[style*="width"]),
+  &[resizable]:has(input[style*="height"]) {
+    flex: unset;
+  }
 }
 
 fig-checkbox,
@@ -1936,15 +1972,18 @@ vstack,
 [vstack] {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  align-items: start;
+  gap: var(--spacer-2);
+  flex-wrap: wrap;
 }
 
 hstack,
 .hstack,
 [hstack] {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--spacer-2);
   align-items: start;
+  flex-wrap: nowrap;
 }
 
 fig-input-text {
@@ -2035,7 +2074,7 @@ fig-field,
   flex-direction: column;
   gap: 0;
 
-  & > * {
+  & > [full] {
     flex: 1;
   }
 

package/fig.js

@@ -5,20 +5,21 @@ function supportsPopover() {
   return HTMLElement.prototype.hasOwnProperty("popover");
 }
 
-/* Button */
-class FigButton extends HTMLElement {
-  #type;
-  #selected;
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    this.render();
-  }
-  render() {
-    this.#type = this.getAttribute("type") || "button";
-    this.shadowRoot.innerHTML = `
+if (window.customElements && !window.customElements.get("fig-button")) {
+  /* Button */
+  class FigButton extends HTMLElement {
+    #type;
+    #selected;
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+      this.render();
+    }
+    render() {
+      this.#type = this.getAttribute("type") || "button";
+      this.shadowRoot.innerHTML = `
             <style>
                 button, button:hover, button:active {
                     padding: 0 var(--spacer-2);
@@ -43,108 +44,143 @@ class FigButton extends HTMLElement {
             </button>
             `;
 
-    this.#selected =
-      this.hasAttribute("selected") &&
-      this.getAttribute("selected") !== "false";
-    this.addEventListener("click", this.handleClick.bind(this));
+      this.#selected =
+        this.hasAttribute("selected") &&
+        this.getAttribute("selected") !== "false";
+      this.addEventListener("click", this.handleClick.bind(this));
 
-    this.button = this.querySelector("button");
-  }
-  get 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);
-  }
+      this.button = this.querySelector("button");
+    }
+    get 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(event) {
+      if (this.#type === "toggle") {
+        this.selected = !this.#selected;
+      }
+      if (this.#type === "submit") {
+        this.button.click();
+      }
     }
-    if (this.#type === "submit") {
-      this.button.click();
+    static get observedAttributes() {
+      return ["disabled"];
     }
-  }
-  static get observedAttributes() {
-    return ["disabled"];
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (this.button) {
-      this.button[name] = newValue;
-      if (newValue === "false") {
-        this.button.removeAttribute(name);
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (this.button) {
+        this.button[name] = newValue;
+        if (newValue === "false") {
+          this.button.removeAttribute(name);
+        }
       }
     }
   }
+  window.customElements.define("fig-button", FigButton);
 }
-window.customElements.define("fig-button", FigButton);
 
-/* Dropdown */
-class FigDropdown extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-  }
+if (window.customElements && !window.customElements.get("fig-dropdown")) {
+  /* Dropdown */
+  class FigDropdown extends HTMLElement {
+    constructor() {
+      super();
+      this.select = document.createElement("select");
+      this.optionsSlot = document.createElement("slot");
+      this.attachShadow({ mode: "open" });
+    }
 
-  connectedCallback() {
-    this.type = this.getAttribute("type") || "select";
-    this.value = this.getAttribute("value") || "";
+    connectedCallback() {
+      this.type = this.getAttribute("type") || "select";
+      this.value = this.getAttribute("value") || "";
 
-    this.select = document.createElement("select");
-    this.optionsSlot = document.createElement("slot");
-    this.appendChild(this.select);
-    this.shadowRoot.appendChild(this.optionsSlot);
+      this.appendChild(this.select);
+      this.shadowRoot.appendChild(this.optionsSlot);
 
-    this.optionsSlot.addEventListener("slotchange", this.slotChange.bind(this));
+      this.optionsSlot.addEventListener(
+        "slotchange",
+        this.slotChange.bind(this)
+      );
 
-    this.select.addEventListener("input", this.handleDropdownInput.bind(this));
-  }
+      this.select.addEventListener(
+        "input",
+        this.handleDropdownInput.bind(this)
+      );
+      this.select.addEventListener(
+        "change",
+        this.handleDropdownChange.bind(this)
+      );
+    }
 
-  slotChange() {
-    while (this.select.firstChild) {
-      this.select.firstChild.remove();
-    }
-    if (this.type === "dropdown") {
-      const hiddenOption = document.createElement("option");
-      hiddenOption.setAttribute("hidden", "true");
-      hiddenOption.setAttribute("selected", "true");
-      this.select.appendChild(hiddenOption);
-    }
-    this.optionsSlot.assignedNodes().forEach((option) => {
-      if (option.nodeName === "OPTION" || option.nodeName === "OPTGROUP") {
-        if (option.hasAttribute("value") && option.hasAttribute("selected")) {
-          this.value = option.getAttribute("value");
+    slotChange() {
+      while (this.select.firstChild) {
+        this.select.firstChild.remove();
+      }
+      if (this.type === "dropdown") {
+        const hiddenOption = document.createElement("option");
+        hiddenOption.setAttribute("hidden", "true");
+        hiddenOption.setAttribute("selected", "true");
+        this.select.appendChild(hiddenOption);
+      }
+      this.optionsSlot.assignedNodes().forEach((option) => {
+        if (option.nodeName === "OPTION" || option.nodeName === "OPTGROUP") {
+          if (option.hasAttribute("value") && option.hasAttribute("selected")) {
+            this.value = option.getAttribute("value");
+          }
+          this.select.appendChild(option.cloneNode(true));
         }
-        this.select.appendChild(option.cloneNode(true));
+      });
+      if (this.type === "dropdown") {
+        this.select.selectedIndex = -1;
       }
-    });
-    if (this.type === "dropdown") {
-      this.select.selectedIndex = -1;
     }
-  }
 
-  handleDropdownInput() {
-    if (this.type === "dropdown") {
+    handleDropdownInput() {
       this.value = this.select.value;
       this.setAttribute("value", this.value);
-      this.select.selectedIndex = -1;
+    }
+    handleDropdownChange() {
+      if (this.type === "dropdown") {
+        this.select.selectedIndex = -1;
+      }
+    }
+    focus() {
+      this.select.focus();
+    }
+    blur() {
+      this.select.blur();
+    }
+    get value() {
+      return this.select?.value;
+    }
+    set value(value) {
+      this.setAttribute("value", value);
+    }
+    static get observedAttributes() {
+      return ["value", "type"];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (name === "value") {
+        this.select.value = newValue;
+      }
+      if (name === "type") {
+        this.type = newValue;
+      }
     }
   }
-  focus() {
-    this.select.focus();
-  }
-}
 
-customElements.define("fig-dropdown", FigDropdown);
+  customElements.define("fig-dropdown", FigDropdown);
+}
 
 /* Tooltip */
 class FigTooltip extends HTMLElement {
@@ -1391,7 +1427,9 @@ class FigImage extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "src") {
       this.src = newValue;
-      this.chit.setAttribute("src", this.src);
+      if (this.chit) {
+        this.chit.setAttribute("src", this.src);
+      }
     }
     if (name === "upload") {
       this.upload = newValue.toLowerCase() === "true";

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.63"
+  "version": "1.0.65"
 }