@rogieking/figui3 1.0.92 → 1.0.94

package/example.html

@@ -19,6 +19,11 @@
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>
     <br />
+    <fig-button disabled>Button 1</fig-button>
+    <br /><br />
+    <fig-button variant="secondary"
+                disabled>Button 1</fig-button>
+    <br /><br />
     <fig-button-combo>
         <fig-button disabled>Button 1</fig-button>
         <fig-button disabled>Button 2</fig-button>
@@ -34,11 +39,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"
@@ -215,7 +220,8 @@
             <fig-button-combo>
                 <fig-button>Primary</fig-button>
                 <fig-button icon="true"
-                            type="select">
+                            type="select"
+                            size="compact">
                     <svg width="24"
                          height="24"
                          viewBox="0 0 24 24"

package/fig.css

@@ -584,7 +584,7 @@ textarea {
 select,
 input[type="text"][list] {
   height: var(--spacer-4);
-  padding: 0 var(--spacer-2);
+  padding: 0 calc(var(--spacer-2) - 1px);
   appearance: none;
   border-radius: var(--radius-medium);
   display: flex;
@@ -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,13 +638,13 @@ fig-dropdown,
   }
   > select {
     display: block;
+    width: 100%;
   }
 }
 
 /* Button */
 .fig-button,
 fig-button {
-  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
   color: var(--figma-color-text-onbrand);
   display: flex;
   align-items: center;
@@ -656,25 +659,6 @@ fig-button {
   background-color: var(--figma-color-bg-brand);
   font-weight: 500;
 
-  & > button {
-    background: transparent;
-    box-shadow: none;
-    border: 0;
-    appearance: none;
-    outline: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-medium);
-    height: var(--spacer-4);
-    padding: 0 var(--spacer-2);
-    color: currentColor;
-  }
-
-  &:has(> button) {
-    padding: 0;
-  }
-
   &:active {
     background-color: var(--figma-color-bg-brand-pressed);
   }
@@ -706,7 +690,8 @@ fig-button {
 
   /* Variant: Secondary */
   &[variant="secondary"] {
-    box-shadow: inset 0 0 0 1px var(--figma-color-border);
+    border: 1px solid var(--figma-color-border);
+    padding: 0 calc(var(--spacer-2) - 1px);
     background: none;
     color: var(--figma-color-text);
 
@@ -722,13 +707,16 @@ fig-button {
   }
 
   /* Icon only */
-  &[icon],
-  &[icon] > button {
+  &[icon]{
     width: var(--spacer-4);
     padding: 0;
     flex-grow: 0;
     flex-shrink: 0;
     flex-basis: var(--spacer-4);
+    &[size="compact"]{
+      width: var(--spacer-3);
+      flex-basis: var(--spacer-3);
+    }
   }
 
   /* Disabled */
@@ -839,18 +827,16 @@ fig-input-combo {
 }
 .fig-button-combo,
 fig-button-combo {
-  > *:not(:first-child) {
-    border-left: 1px solid var(--figma-color-bg-brand-hover);
-    margin-left: -1px;
+  > *:not([variant="secondary"]):not(:first-child) {
+    box-shadow: inset 1px 0 0 0 var(--figma-color-bg-brand-hover);
     &[disabled]:not([disabled="false"]) {
-      border-left: 1px solid var(--figma-color-border-disabled);
+       box-shadow: inset 1px 0 0 0 var(--figma-color-border-disabled);
     }
   }
   > *[variant="secondary"]:not(:first-child) {
-    border-left: transparent;
-    margin-left: -1px;
+    border-left-width: 0 !important;
     &[disabled]:not([disabled="false"]) {
-      border-left: transparent;
+      border-left-width: 0 !important;
     }
   }
 }
@@ -1438,44 +1424,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;
@@ -1508,6 +1458,7 @@ fig-slider {
       position: absolute;
       left: 0;
       top: 0;
+      pointer-events: none;
       bottom: 0;
       border-radius: 0.5rem;
       min-width: var(--slider-height);
@@ -1594,11 +1545,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;
     }
@@ -1617,6 +1566,8 @@ fig-slider {
       border: none;
       position: relative;
       z-index: 1;
+      cursor: grab;
+      cursor: -webkit-grab;
       box-shadow: var(--slider-handle-shadow);
     }
 
@@ -1663,19 +1614,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;
@@ -1685,6 +1634,8 @@ fig-slider {
       border: none;
       position: relative;
       z-index: 1;
+      cursor: grab;
+      cursor: -moz-grab;
       box-shadow: var(--slider-handle-shadow);
     }
 

package/package.json

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