@rogieking/figui3 1.1.3 → 1.1.5

package/README.md

@@ -36,7 +36,7 @@ The library includes the following components:
 ## Installation
 
 ```bash
-npm install fig-js
+npm install @rogieking/figui3
 ```
 
 ```jsx
@@ -74,7 +74,7 @@ or
 
 ## Documentation
 
-For detailed documentation and examples, visit our [documentation site](https://your-docs-site.com).
+For detailed documentation and examples, visit our [documentation site](https://github.com/rogie/figui3#readme).
 
 ## Browser Support
 

package/example.html

@@ -471,9 +471,11 @@
                       size="large"></fig-chit>
         </hstack>
         <br />
-        <fig-tooltip text="Tooltip text">
-            <p>Tooltip</p>
-        </fig-tooltip>
+        <p>Some paragraph text here with a
+            <fig-tooltip text="Tooltip text">
+                <em>Tooltip</em>
+            </fig-tooltip> for more information.
+        </p>
         <br /><br />
         <hstack>
             <input type="radio"

package/fig.css

@@ -422,7 +422,8 @@
   --elevation-500-modal-window: 0px 0px 0.5px rgba(0, 0, 0, 0.08),
     0px 10px 24px rgba(0, 0, 0, 0.18), 0px 2px 5px rgba(0, 0, 0, 0.15);
 
-  --figma-elevation-500-modal-window: box-shadow: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.08), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
+  --figma-elevation-500-modal-window: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.08),
+    0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
 
   color-scheme: light dark;
   /* Icons */
@@ -434,6 +435,10 @@
 
   --figma-elevation-200: 0px 1px 3px 0px rgba(0, 0, 0, 0.102),
     0px 3px 8px 0px rgba(0, 0, 0, 0.102), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
+
+  --font-family: "Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next,
+    avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto,
+    arial, sans-serif;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -452,7 +457,6 @@
   }
 }
 
-
 html {
   width: 100%;
   height: 100%;
@@ -461,9 +465,7 @@ html {
   color: var(--figma-color-text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, avenir next, avenir,
-    segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
-    sans-serif;
+  font-family: var(--font-family);
   font-size: 16px;
   font-weight: var(--body-medium-fontWeight);
   letter-spacing: var(--body-letter-spacing);
@@ -481,11 +483,12 @@ body {
   letter-spacing: var(--body-letter-spacing);
 }
 
-h1,h2{
+h1,
+h2 {
   font-weight: var(--body-large-strong-fontWeight);
   font-size: var(--body-large-fontSize);
 }
-h3{
+h3 {
   font-weight: var(--body-medium-strong-fontWeight);
   font-size: var(--body-medium-fontSize);
 }
@@ -561,14 +564,16 @@ input[type="number"],
   font: inherit;
   display: flex;
   color: inherit;
+  -moz-appearance: textfield;
 
   &:focus {
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
     outline: 0;
   }
-
+  &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     display: none;
+    margin: 0;
   }
 }
 
@@ -595,9 +600,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;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 
   &:focus {
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
@@ -707,29 +712,29 @@ fig-button {
   }
 
   /* Icon only */
-  &[icon]{
+  &[icon] {
     width: var(--spacer-4);
     padding: 0;
     flex-grow: 0;
     flex-shrink: 0;
     flex-basis: var(--spacer-4);
-    &[size="compact"]{
+    &[size="compact"] {
       width: var(--spacer-3);
       flex-basis: var(--spacer-3);
     }
   }
 
   /* Disabled */
-  &[disabled]:not([disabled="false"]){
+  &[disabled]:not([disabled="false"]) {
     background-color: var(--figma-color-bg-disabled);
     pointer-events: none;
     cursor: not-allowed;
-    &:not([variant="secondary"]){
+    &:not([variant="secondary"]) {
       color: var(--figma-color-text-ondisabled);
       box-shadow: none;
     }
     &[variant="secondary"],
-    &[variant="ghost"]{
+    &[variant="ghost"] {
       color: var(--figma-color-text-disabled);
       background-color: transparent;
     }
@@ -831,7 +836,7 @@ fig-button-combo {
   > *:not([variant="secondary"]):not(:first-child) {
     box-shadow: inset 1px 0 0 0 var(--figma-color-bg-brand-hover);
     &[disabled]:not([disabled="false"]) {
-       box-shadow: inset 1px 0 0 0 var(--figma-color-border-disabled);
+      box-shadow: inset 1px 0 0 0 var(--figma-color-border-disabled);
     }
   }
   > *[variant="secondary"]:not(:first-child) {
@@ -927,7 +932,7 @@ fig-avatar,
       background: var(--checkerboard);
     }
   }
-  &[borderless] img{
+  &[borderless] img {
     box-shadow: none;
   }
 
@@ -987,7 +992,6 @@ input[type="color"] {
       rgba(0, 0, 0, var(--alpha)) 50%
     );
   }
-  
 }
 
 input[type="color"] {
@@ -1007,7 +1011,6 @@ input[type="color"] {
   }
 }
 
-
 fig-chit {
   --gradient-color-1: #ff90ff;
   --gradient-color-2: #0000ff;
@@ -1068,7 +1071,7 @@ fig-chit {
   }
 
   &[type="gradient"],
-  &[type="image"]{
+  &[type="image"] {
     &::after {
       content: "";
       width: 0.875rem;
@@ -1086,11 +1089,14 @@ fig-chit {
     input[type="color"]::-webkit-color-swatch-wrapper {
       background: none;
     }
+    input[type="color"]::-moz-color-swatch {
+      opacity: 0;
+    }
     input[type="color"]::-webkit-color-swatch {
       opacity: 0;
     }
   }
-  
+
   &[type="image"] {
     &:not([src])::after {
       background: var(--checkerboard);
@@ -1154,8 +1160,6 @@ fig-image {
   }
 }
 
-
-
 /* Combo input */
 .input-combo {
   display: inline-flex;
@@ -1399,7 +1403,9 @@ details {
       transition: transform var(--transition-duration)
         var(--transition-timing-function);
     }
-
+    &::-webkit-details-marker {
+      display: none;
+    }
     &::marker {
       content: "";
     }
@@ -1425,7 +1431,6 @@ details {
   content: var(--icon-chevron);
 }
 
-
 /* Sliders */
 .fig-slider,
 fig-slider {
@@ -1566,6 +1571,7 @@ fig-slider {
 
     &::-webkit-slider-thumb {
       appearance: none;
+      background: transparent;
       -webkit-appearance: none;
       transition: var(--slider-transition);
       border-radius: 100%;
@@ -1621,7 +1627,7 @@ fig-slider {
   input[type="range"] {
     height: var(--slider-height);
     appearance: none;
-    -webkit-appearance: none;
+    -moz-appearance: none;
     border-radius: calc(var(--slider-height) / 2);
     display: block;
     width: 100%;
@@ -1639,6 +1645,8 @@ fig-slider {
 
     &::-moz-range-thumb {
       appearance: none;
+      -moz-appearance: none;
+      background: transparent;
       border-radius: 100%;
       height: var(--slider-thumb-size);
       width: var(--slider-thumb-size);
@@ -1691,7 +1699,7 @@ fig-slider {
   datalist {
     position: absolute;
     inset: 0;
-    top: calc((var(--slider-field-height) - var(--slider-height))/2);
+    top: calc((var(--slider-field-height) - var(--slider-height)) / 2);
     display: flex;
     transition: var(--slider-transition);
     background: transparent;
@@ -1757,23 +1765,22 @@ fig-slider {
       --slider-tick-size: calc(var(--slider-height) / 4);
       .fig-slider-input-container {
         &::before {
-            box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-            background: var(--figma-color-bg-brand);
-          }
+          box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+          background: var(--figma-color-bg-brand);
         }
-        input[type="range"] {
-          &::-webkit-slider-runnable-track {
-            box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-          }
-        }
-        fig-input-text {
-          height: auto;
+      }
+      input[type="range"] {
+        &::-webkit-slider-runnable-track {
+          box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
         }
+      }
+      fig-input-text {
+        height: auto;
+      }
     }
   }
 }
 
-
 /* Popovers/Dialogs */
 .dialog,
 dialog,
@@ -1907,7 +1914,7 @@ fig-dialog,
 }
 
 /* Tooltip */
-fig-tooltip{
+fig-tooltip {
   display: contents;
 }
 .fig-tooltip {
@@ -2013,7 +2020,6 @@ fig-tabs {
   }
 }
 
-
 fig-checkbox,
 fig-radio {
   align-items: center;
@@ -2195,7 +2201,7 @@ fig-field,
 
   &[direction="horizontal"] {
     gap: var(--spacer-2);
-    align-items: center;
+    align-items: start;
     flex-direction: row;
 
     & > label {

package/fig.js

@@ -1132,9 +1132,7 @@ class FigInputColor extends HTMLElement {
     );
     let html = ``;
     if (this.getAttribute("text")) {
-      let label = `<fig-input-text type="text" placeholder="Text" value="${this.getAttribute(
-        "value"
-      )}"></fig-input-text>`;
+      let label = `<fig-input-text type="text" placeholder="Text" value="${this.value}"></fig-input-text>`;
       if (this.getAttribute("alpha") === "true") {
         label += `<fig-tooltip text="Opacity">
                     <fig-input-text 
@@ -1254,9 +1252,12 @@ class FigInputColor extends HTMLElement {
     switch (name) {
       case "value":
         if (this.textInput) {
-          this.value = this.#swatch.value = this.textInput.value = newValue;
+          this.value =
+            this.#swatch.value =
+            this.textInput.value =
+              newValue.toUpperCase();
         } else {
-          this.value = newValue;
+          this.value = newValue.toUpperCase();
         }
         this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
         break;
@@ -1279,13 +1280,13 @@ class FigInputColor extends HTMLElement {
 
     // If alpha is 1, return 6-digit hex
     if (a === 1) {
-      return `#${hexR}${hexG}${hexB}`;
+      return `#${hexR}${hexG}${hexB}`.toUpperCase();
     }
 
     // Otherwise, include alpha in 8-digit hex
     const alpha = Math.round(a * 255);
     const hexA = alpha.toString(16).padStart(2, "0");
-    return `#${hexR}${hexG}${hexB}${hexA}`;
+    return `#${hexR}${hexG}${hexB}${hexA}`.toUpperCase();
   }
 
   convertToRGBA(color) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {