@rogieking/figui3 1.0.93 → 1.0.95

package/example.html

@@ -19,6 +19,21 @@
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>
     <br />
+    <fig-button id="button-progressive-blur"
+                variant="ghost"
+                icon="true"
+                class=""
+                disabled="true"><svg width="16"
+             height="16"
+             viewBox="0 0 16 16"
+             fill="none"
+             xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M6.5 6C7.32843 6 8 5.32843 8 4.5C8 3.67157 7.32843 3 6.5 3C5.67157 3 5 3.67157 5 4.5C5 5.32843 5.67157 6 6.5 6ZM6.5 7C7.70948 7 8.71836 6.14112 8.94999 5H14V4H8.94999C8.71836 2.85888 7.70948 2 6.5 2C5.29052 2 4.28164 2.85888 4.05001 4H2V5H4.05001C4.28164 6.14112 5.29052 7 6.5 7ZM9.5 13C8.67157 13 8 12.3284 8 11.5C8 10.6716 8.67157 10 9.5 10C10.3284 10 11 10.6716 11 11.5C11 12.3284 10.3284 13 9.5 13ZM9.5 14C8.29052 14 7.28164 13.1411 7.05001 12H2V11H7.05001C7.28164 9.85888 8.29052 9 9.5 9C10.7095 9 11.7184 9.85888 11.95 11H14V12H11.95C11.7184 13.1411 10.7095 14 9.5 14Z"
+                  fill="currentColor"></path>
+        </svg></fig-button>
+    <br /> <br />
     <fig-button disabled>Button 1</fig-button>
     <br /><br />
     <fig-button variant="secondary"
@@ -39,11 +54,11 @@
                     disabled>Button 3</fig-button>
     </fig-button-combo>
     <br /><br />
-    <fig-dropdown>
+    <fig-dropdown style="width:100px;">
         <option>One</option>
         <option>Two</option>
         <option>Three</option>
-        <option selected>Four</option>
+        <option selected>Fourhundred sixty two</option>
     </fig-dropdown>
     <br /><br />
     <fig-slider min="0"

package/fig.css

@@ -595,6 +595,9 @@ input[type="text"][list] {
   background-color: var(--figma-color-bg);
   box-shadow: inset 0 0 0 1px var(--figma-color-border);
   accent-color: var(--figma-color-bg-brand);
+  overflow:hidden; 
+  white-space:nowrap; 
+  text-overflow:ellipsis;
 
   &:focus {
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
@@ -635,6 +638,7 @@ fig-dropdown,
   }
   > select {
     display: block;
+    width: 100%;
   }
 }
 
@@ -718,13 +722,14 @@ fig-button {
   /* Disabled */
   &[disabled]:not([disabled="false"]){
     background-color: var(--figma-color-bg-disabled);
-    
     pointer-events: none;
+    cursor: not-allowed;
     &:not([variant="secondary"]){
       color: var(--figma-color-text-ondisabled);
       box-shadow: none;
     }
-    &[variant="secondary"]{
+    &[variant="secondary"],
+    &[variant="ghost"]{
       color: var(--figma-color-text-disabled);
       background-color: transparent;
     }
@@ -922,7 +927,7 @@ fig-avatar,
       background: var(--checkerboard);
     }
   }
-  &[borderless] {
+  &[borderless] img{
     box-shadow: none;
   }
 
@@ -1420,44 +1425,8 @@ details {
   content: var(--icon-chevron);
 }
 
-/* Details 
-
-  details summary{
-    cursor: pointer;
-    user-select: none;
-    padding: 0 1rem;
-    min-height: 2rem;
-    list-style: none;
-    pointer-events: none;
-  }
-  details summary>*{
-    pointer-events: all;
-  }
-  details summary:before{
-    content: '▸';
-    display: inline-flex;
-    align-items: start;
-    justify-content: center;
-    width: 0.75rem;
-    margin-right: -0.75rem;
-    transform: translateX(-100%);
-    color: inherit;
-    visibility: hidden;
-  }
-  details summary:hover:before{
-    visibility: visible;
-  }
-  details[open] summary:before{
-     content: '▾';
-  }
-  details summary:first-child:last-child:before{
-    content: '';
-  }
-  details summary:first-child:last-child h3{
-    pointer-events: none;
-  }
-  */
 
+/* Sliders */
 .fig-slider,
 fig-slider {
   --slider-height: 1rem;
@@ -1490,6 +1459,7 @@ fig-slider {
       position: absolute;
       left: 0;
       top: 0;
+      pointer-events: none;
       bottom: 0;
       border-radius: 0.5rem;
       min-width: var(--slider-height);
@@ -1576,11 +1546,9 @@ fig-slider {
     border-radius: calc(var(--slider-height) / 2);
     display: block;
     width: 100%;
-    cursor: grab;
-    cursor: -webkit-grab;
     background-color: transparent;
 
-    &:active {
+    &:active::-webkit-slider-thumb {
       cursor: grabbing;
       cursor: -webkit-grabbing;
     }
@@ -1599,6 +1567,8 @@ fig-slider {
       border: none;
       position: relative;
       z-index: 1;
+      cursor: grab;
+      cursor: -webkit-grab;
       box-shadow: var(--slider-handle-shadow);
     }
 
@@ -1645,19 +1615,17 @@ fig-slider {
     border-radius: calc(var(--slider-height) / 2);
     display: block;
     width: 100%;
-    cursor: grab;
-    cursor: -moz-grab;
     background-color: transparent;
 
-    &:active {
-      cursor: grabbing;
-      cursor: -moz-grabbing;
-    }
-
     &:focus {
       outline: none;
     }
 
+    &:active::-moz-range-thumb {
+      cursor: grabbing;
+      cursor: -webkit-grabbing;
+    }
+
     &::-moz-range-thumb {
       appearance: none;
       border-radius: 0.5rem;
@@ -1667,6 +1635,8 @@ fig-slider {
       border: none;
       position: relative;
       z-index: 1;
+      cursor: grab;
+      cursor: -moz-grab;
       box-shadow: var(--slider-handle-shadow);
     }
 

package/fig.js

@@ -15,9 +15,6 @@ if (window.customElements && !window.customElements.get("fig-button")) {
       this.attachShadow({ mode: "open" });
     }
     connectedCallback() {
-      this.render();
-    }
-    render() {
       this.#type = this.getAttribute("type") || "button";
       this.shadowRoot.innerHTML = `
             <style>
@@ -47,10 +44,13 @@ if (window.customElements && !window.customElements.get("fig-button")) {
       this.#selected =
         this.hasAttribute("selected") &&
         this.getAttribute("selected") !== "false";
-      this.addEventListener("click", this.handleClick.bind(this));
+      this.addEventListener("click", this.#handleClick.bind(this));
 
-      this.button = this.querySelector("button");
+      requestAnimationFrame(() => {
+        this.button = this.querySelector("button");
+      });
     }
+
     get type() {
       return this.#type;
     }
@@ -67,7 +67,7 @@ if (window.customElements && !window.customElements.get("fig-button")) {
       this.setAttribute("selected", value);
     }
 
-    handleClick(event) {
+    #handleClick(event) {
       if (this.#type === "toggle") {
         this.selected = !this.#selected;
       }
@@ -145,7 +145,6 @@ if (window.customElements && !window.customElements.get("fig-dropdown")) {
     }
 
     #handleSelectInput(e) {
-      console.log("FigDropdown #handleSelectInput:", e.target.value);
       this.value = e.target.value;
       this.setAttribute("value", this.value);
     }
@@ -181,7 +180,6 @@ if (window.customElements && !window.customElements.get("fig-dropdown")) {
     attributeChangedCallback(name, oldValue, newValue) {
       if (name === "value") {
         this.#syncSelectedValue(newValue);
-        console.log("val:", this.value);
       }
       if (name === "type") {
         this.type = newValue;

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.93"
+  "version": "1.0.95"
 }