@rogieking/figui3 6.8.8 → 6.9.1

package/.cursor/skills/figui3/SKILL.md

@@ -223,7 +223,7 @@ Rule of thumb: `fig-dialog` = dialog UX, `fig-popup` = popup primitive.
 2. **Confirm API surface impact.** Identify affected attributes, events, and slots.
 3. **Implement with compatibility in mind.** Preserve defaults and old usage unless explicitly changed.
 4. **Update docs/demo in same pass.** Keep examples and behavior synchronized.
-5. **Run project checks.** Use `bun dev` for interactive verification and `bun build` for output sanity.
+5. **Run project checks.** Use `bun build` for output sanity. Never kill the playground/dev server when running tests, building, or updating code; treat existing `npm run dev:playground`, Vite, `bun dev`, and local preview servers as user-owned long-running processes. Only start a dev server if none is already running.
 6. **Verify accessibility and theming.** Check keyboard flow, labels, disabled states, and both light/dark appearance.
 
 ## Release-Ready Checklist

package/base.css

@@ -12,6 +12,7 @@ html,
   font-weight: var(--body-medium-fontWeight);
   letter-spacing: var(--body-letter-spacing);
   background-color: var(--figma-color-bg);
+  line-height: 1rem;
 }
 body,
 :host {
@@ -36,6 +37,9 @@ strong{
 section{
   padding: var(--spacer-1) var(--spacer-3);
   margin-bottom: var(--spacer-2);
+  &:last-child{
+    margin-bottom: 0;
+  }
 }
 fieldset{
   padding: var(--spacer-1) var(--spacer-3);
@@ -113,15 +117,16 @@ iframe{
 
 /* Defaults */
 p {
-  margin: var(--spacer-2) 0;
-  line-height: 1rem;
-  color: var(--figma-color-text-secondary);
-  &:last-child{
-    margin-bottom: 0;
-  }
+  margin-block: 1em;
+}
+p:first-child {
+  margin-block-start: 0;
+}
+p:last-child {
+  margin-block-end: 0;
 }
 
-label {
+label, p, li {
   color: var(--figma-color-text-secondary);
 }
 

package/components.css

@@ -479,6 +479,98 @@ input[type="tel"],
   }
 }
 
+progress {
+  --progress-height: 0.375rem;
+  --progress-radius: calc(var(--progress-height) / 2);
+
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: var(--progress-height);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  color: transparent;
+  font-size: 0;
+  overflow: hidden;
+  background: var(--figma-color-bg-secondary);
+  border-radius: var(--progress-radius);
+
+  &::-webkit-progress-bar {
+    background: var(--figma-color-bg-secondary);
+    border-radius: var(--progress-radius);
+  }
+
+  &::-webkit-progress-value {
+    background: var(--figma-color-bg-brand);
+    border-radius: var(--progress-radius);
+    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    min-width: var(--progress-height);
+  }
+
+  &:not([value]) {
+    --progress-indeterminate-width: 30%;
+
+    background-image:
+      radial-gradient(
+        circle at var(--progress-radius) 50%,
+        var(--figma-color-bg-brand) 0 var(--progress-radius),
+        transparent calc(var(--progress-radius) + 0.5px)
+      ),
+      linear-gradient(
+        90deg,
+        transparent 0 var(--progress-radius),
+        var(--figma-color-bg-brand) var(--progress-radius)
+          calc(100% - var(--progress-radius)),
+        transparent calc(100% - var(--progress-radius)) 100%
+      ),
+      radial-gradient(
+        circle at calc(100% - var(--progress-radius)) 50%,
+        var(--figma-color-bg-brand) 0 var(--progress-radius),
+        transparent calc(var(--progress-radius) + 0.5px)
+      );
+    will-change: background-position;
+    background-repeat: no-repeat;
+    background-size: var(--progress-indeterminate-width) 100%;
+    animation: fig-progress-indeterminate 1s infinite linear;
+  }
+
+  &:not([value])::-webkit-progress-bar {
+    background: transparent;
+  }
+
+  &:not([value])::-webkit-progress-value {
+    background: transparent;
+    box-shadow: none;
+    min-width: 0;
+  }
+
+  &::-moz-progress-bar {
+    background: var(--figma-color-bg-brand);
+    border-radius: var(--progress-radius);
+    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    min-width: var(--progress-height);
+  }
+
+  &:not([value])::-moz-progress-bar {
+    background: transparent;
+    box-shadow: none;
+    min-width: 0;
+  }
+}
+
+@keyframes fig-progress-indeterminate {
+  from {
+    background-position: calc(-1 * var(--progress-indeterminate-width)) 0;
+  }
+
+  to {
+    background-position: calc(100% + var(--progress-indeterminate-width)) 0;
+  }
+}
+
 fig-input-number .fig-steppers {
   order: 3;
   display: flex;
@@ -828,7 +920,6 @@ select,
 }
 
 /* Button */
-.fig-button,
 button,
 fig-button {
   color: var(--figma-color-text-onbrand);
@@ -841,6 +932,7 @@ fig-button {
   border: 0;
   min-width: 0;
   outline: 0;
+  line-height: 1rem;
   border-radius: var(--radius-medium);
   background-color: var(--figma-color-bg-brand);
   font-weight: 500;
@@ -1101,8 +1193,7 @@ fig-button-combo {
 }
 
 /* Tabs */
-fig-tab,
-.fig-tab {
+fig-tab {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -1114,6 +1205,7 @@ fig-tab,
   cursor: default;
   gap: 0 !important;
   user-select: none;
+  line-height: 1rem;
   border-radius: var(--radius-medium);
   color: var(--figma-color-text-secondary);
   position: relative;
@@ -1393,6 +1485,7 @@ fig-chit {
   background-color: var(--figma-color-bg-secondary);
   box-shadow: inset 0 0 0 calc(var(--selected) * 1px)
     var(--figma-color-border-selected);
+  flex-shrink: 0;
 
   &::before,
   &::after,
@@ -1639,9 +1732,10 @@ fig-video {
   > fig-preview > img,
   > fig-preview > .fig-media-element[data-generated] {
     display: block;
-    width: stretch;
-    height: stretch;
-    position: static;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
     object-fit: var(--fig-preview-fit);
     object-position: center;
     z-index: 0;
@@ -2981,7 +3075,7 @@ dialog,
   min-width: min(var(--popover-min-width), var(--dialog-max-width));
   box-shadow: var(--figma-elevation-500-modal-window);
   max-height: calc(60vh - var(--spacer-4));
-  max-width: var(--dialog-max-width);
+  max-width: min(var(--dialog-max-width), 30rem);
   height: max-content;
   & > fig-content,
   &> main {
@@ -3000,25 +3094,11 @@ dialog,
     display: flex;
     flex-direction: column;
   }
-
-  & header {
-    height: var(--spacer-6);
-    margin: 0;
-    padding: var(--spacer-2);
-    display: flex;
-    align-items: center;
-    font-weight: var(--body-medium-strong-fontWeight);
-    box-shadow: inset 0 -1px 0 0 var(--figma-color-border);
-
-    & h3 {
-      font: inherit;
-    }
-
-    & > :first-child {
-      padding-left: var(--spacer-2);
+  >fig-header{
+    fig-button[icon][variant="ghost"]:not(fig-input-text fig-button) {
+      margin: 0;
     }
   }
-
 }
 dialog[is="fig-dialog"] {
   --z-index: 999999;
@@ -3070,7 +3150,6 @@ dialog[is="fig-popup"] {
     display: block;
   }
 
-  
 
   &[theme="dark"] {
     color-scheme: dark;
@@ -3232,8 +3311,10 @@ fig-preview {
 
   > :is(img, video, canvas, svg) {
     display: block;
-    width: stretch;
-    height: stretch;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
     object-fit: var(--fig-preview-fit);
     object-position: center;
   }
@@ -3460,6 +3541,7 @@ fig-footer {
   }
 }
 
+main,
 fig-content {
   padding: var(--spacer-2-5) 0;
   display: block;
@@ -3685,16 +3767,32 @@ fig-input-fill {
   }
   fig-chit ~ fig-input-text > input,
   fig-chit ~ label,
-  fig-fill-picker ~ fig-input-text > input,
-  fig-fill-picker ~ label {
+  fig-fill-picker ~ fig-input-text > input {
     padding-left: 0 !important;
   }
 
+  & > .input-combo > fig-input-text > input {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   & > .input-combo {
     flex: 1;
     min-width: 0;
   }
 
+  & > .input-combo > fig-tooltip {
+    display: contents;
+  }
+
+  & > .input-combo > fig-tooltip > .fig-input-fill-opacity {
+    flex: 0 0 3rem;
+    width: 3rem;
+    min-width: 3rem;
+  }
+
   fig-input-number {
     flex: 0;
     flex-basis: 3rem;
@@ -3714,6 +3812,43 @@ fig-input-fill {
     min-width: 0;
   }
 }
+
+fig-input-fill {
+  & > .input-combo > fig-fill-picker {
+    display: contents;
+  }
+
+  & > .input-combo > :is(.fig-input-fill-hex, .fig-input-fill-label) {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  & > .input-combo > .fig-input-fill-label {
+    height: auto;
+    margin-left: 0;
+    overflow: hidden;
+    padding: var(--spacer-1) var(--spacer-2);
+    padding-left: 0 !important;
+    font: inherit;
+    line-height: 1rem !important;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+fig-input-color {
+  & > .input-combo > fig-tooltip > fig-input-number {
+    flex: 0 0 3rem;
+    width: 3rem;
+    min-width: 3rem;
+  }
+
+  & > .input-combo > fig-input-text {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}
+
 fig-input-gradient {
   --fig-input-gradient-height: 1.5rem;
   --fig-input-gradient-padding: var(--spacer-1);
@@ -3722,7 +3857,7 @@ fig-input-gradient {
   position: relative;
   height: var(--fig-input-gradient-height);
   width: 100%;
-  min-width: 0;
+  min-width: var(--spacer-4);
 
   fig-handle[type="color"]{
     --height: var(--fig-input-gradient-handle-size);
@@ -4002,6 +4137,10 @@ fig-field {
     grid-area: input;
   }
 
+  & > progress {
+    align-self: center;
+  }
+
   & > .fig-field-chevron {
     --icon: var(--icon-16-chevron);
     --size: 1rem;
@@ -4120,9 +4259,11 @@ fig-segmented-control {
     --figma-focus-outline-offset: 0;
     flex: 1 1 0;
     min-width: 0;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
-    line-height: calc(1.5rem - 2px);
+    line-height: 1;
     position: relative;
     z-index: 1;
     appearance: none;
@@ -4814,8 +4955,10 @@ fig-choice {
   --fig-choice-text-padding-inline: var(--spacer-2);
   --fig-choice-border-radius: var(--radius-medium);
   --fig-choice-min-height: 1.5rem;
+  --fig-choice-min-width: 1.5rem;
 
   min-height: var(--fig-choice-min-height);
+  min-width: var(--fig-choice-min-width);
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/base.css

@@ -1 +1 @@
-html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing);line-height:1.4545em}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}strong{font-weight:var(--body-medium-strong-fontWeight)}section{padding:var(--spacer-1) var(--spacer-3);margin-bottom:var(--spacer-2)}fieldset{padding:var(--spacer-1) var(--spacer-3)}hr{background-color:var(--figma-color-border);width:100%;height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}iframe{background-color:#0000;border:0;flex:auto;width:100%;max-width:100%;height:max-content;min-height:0;max-height:100%;margin:0;display:block}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin:var(--spacer-2) 0;color:var(--figma-color-text-secondary);line-height:1rem;&:last-child{margin-bottom:0}}label{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}a{color:var(--figma-color-text-brand);text-decoration:none;&:hover{text-decoration:underline}}
+html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0;line-height:1rem}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing);line-height:1.4545em}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}strong{font-weight:var(--body-medium-strong-fontWeight)}section{padding:var(--spacer-1) var(--spacer-3);margin-bottom:var(--spacer-2);&:last-child{margin-bottom:0}}fieldset{padding:var(--spacer-1) var(--spacer-3)}hr{background-color:var(--figma-color-border);width:100%;height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}iframe{background-color:#0000;border:0;flex:auto;width:100%;max-width:100%;height:max-content;min-height:0;max-height:100%;margin:0;display:block}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin-block:1em}p:first-child{margin-block-start:0}p:last-child{margin-block-end:0}label,p,li{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}a{color:var(--figma-color-text-brand);text-decoration:none;&:hover{text-decoration:underline}}