@rogieking/figui3 1.0.90 → 1.0.92

package/example.html

@@ -19,13 +19,28 @@
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>
     <br />
+    <fig-button-combo>
+        <fig-button disabled>Button 1</fig-button>
+        <fig-button disabled>Button 2</fig-button>
+        <fig-button disabled>Button 3</fig-button>
+    </fig-button-combo>
+    <br /><br />
+    <fig-button-combo>
+        <fig-button variant="secondary"
+                    disabled>Button 1</fig-button>
+        <fig-button variant="secondary"
+                    disabled>Button 2</fig-button>
+        <fig-button variant="secondary"
+                    disabled>Button 3</fig-button>
+    </fig-button-combo>
+    <br /><br />
     <fig-dropdown>
         <option>One</option>
         <option>Two</option>
         <option>Three</option>
         <option selected>Four</option>
     </fig-dropdown>
-    <br />
+    <br /><br />
     <fig-slider min="0"
                 max="1"
                 transform="100"
@@ -40,7 +55,7 @@
                     step="0.1"
                     transform="100"
                     type="number"
-                    style="width: 100px;"
+                    autoresize="true"
                     value="0.5"
                     text="true">
         <span slot="append">%</span>

package/fig.css

@@ -696,7 +696,7 @@ fig-button {
     }
   }
 
-  &[variant="ghost"][disabled="true"] {
+  &[variant="ghost"][disabled]:not([disabled="false"]) {
     background-color: transparent;
   }
 
@@ -732,11 +732,18 @@ fig-button {
   }
 
   /* Disabled */
-  &[disabled="true"],
-  &[disabled="true"] > button {
+  &[disabled]:not([disabled="false"]){
     background-color: var(--figma-color-bg-disabled);
-    color: var(--figma-color-text-disabled);
+    
     pointer-events: none;
+    &:not([variant="secondary"]){
+      color: var(--figma-color-text-ondisabled);
+      box-shadow: none;
+    }
+    &[variant="secondary"]{
+      color: var(--figma-color-text-disabled);
+      background-color: transparent;
+    }
   }
 
   /* Size */
@@ -795,18 +802,62 @@ fig-button {
 
   &:focus,
   &:focus-within {
-    outline: 0;
-    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+    &:not(:active) {
+      outline: 0;
+      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+    }
   }
 }
 
-fig-button > button {
-  width: 100%;
+/* 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;
+    &[disabled]:not([disabled="false"]) {
+      border-left: 1px solid var(--figma-color-border-disabled);
+    }
+  }
+  > *[variant="secondary"]:not(:first-child) {
+    border-left: transparent;
+    margin-left: -1px;
+    &[disabled]:not([disabled="false"]) {
+      border-left: transparent;
+    }
+  }
 }
 
 /* Tabs */
 fig-tab,
-.tab {
+.fig-tab {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -838,7 +889,7 @@ fig-tab,
   }
 
   &:has(:checked),
-  &[selected] {
+  &[selected]:not([selected="false"]) {
     background-color: var(--figma-color-bg-secondary);
     font-weight: var(--body-medium-strong-fontWeight);
     color: var(--figma-color-text);
@@ -1116,45 +1167,7 @@ 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 {
@@ -1983,30 +1996,6 @@ fig-tabs {
   }
 }
 
-/* Text input */
-fig-input-text {
-  display: inline-flex;
-  user-select: all;
-  gap: 0;
-
-  &[multiline] {
-    display: block;
-  }
-  &[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,
 fig-radio {
@@ -2069,9 +2058,30 @@ fig-input-text {
   background-color: var(--figma-color-bg-secondary);
   border: 0;
   border-radius: var(--radius-medium);
-  display: flex;
+  display: inline-flex;
   flex-wrap: nowrap;
   justify-content: center;
+  user-select: all;
+  gap: 0;
+
+  &[multiline] {
+    display: block;
+    display: flex;
+  }
+  &[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;
+  }
 
   & label,
   & [slot] {

package/fig.js

@@ -805,25 +805,28 @@ class FigSlider extends HTMLElement {
   }
   handleTextInput() {
     if (this.figInputText) {
-      this.input.value = Number(this.figInputText.value);
-      this.handleInput();
+      this.value = this.input.value = this.figInputText.value;
+      this.#syncProperties();
     }
   }
   #calculateNormal(value) {
     let min = Number(this.input.min);
     let max = Number(this.input.max);
-    let val = Number(value);
+    let val = value;
     return (val - min) / (max - min);
   }
-
-  handleInput() {
-    let val = Number(this.input.value);
-    this.value = val;
-    let complete = this.#calculateNormal(val);
+  #syncProperties() {
+    let complete = this.#calculateNormal(this.value);
     let defaultValue = this.#calculateNormal(this.default);
     this.style.setProperty("--slider-complete", complete);
     this.style.setProperty("--default", defaultValue);
     this.style.setProperty("--unchanged", complete === defaultValue ? 1 : 0);
+  }
+
+  handleInput() {
+    let val = this.input.value;
+    this.value = val;
+    this.#syncProperties();
     if (this.figInputText) {
       this.figInputText.setAttribute("value", val);
     }
@@ -902,10 +905,10 @@ class FigInputText extends HTMLElement {
     this.input.focus();
   }
   #transformNumber(value) {
-    return Number(value) * (this.transform || 1);
+    return value * (this.transform || 1);
   }
   #handleInput(e) {
-    let value = Number(e.target.value);
+    let value = e.target.value;
     if (this.type === "number") {
       this.value = value / (this.transform || 1);
     } else {

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.90"
+  "version": "1.0.92"
 }