@rogieking/figui3 3.9.2 → 3.13.0

package/components.css

@@ -327,6 +327,7 @@
   --icon-close: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.2242 7.08154C16.4182 6.95348 16.6823 6.97551 16.8531 7.146C17.024 7.31683 17.0457 7.58084 16.9176 7.7749L16.8531 7.85303L12.7067 11.9995L16.8531 16.146L16.9176 16.2241C17.0457 16.4182 17.024 16.6822 16.8531 16.853C16.6823 17.0239 16.4183 17.0456 16.2242 16.9175L16.1461 16.853L11.9996 12.7065L7.85315 16.853C7.65789 17.0483 7.34138 17.0483 7.14612 16.853C6.95128 16.6577 6.95101 16.3411 7.14612 16.146L11.2926 11.9995L7.14612 7.85303L7.08167 7.7749C6.95389 7.58087 6.97541 7.3167 7.14612 7.146C7.31683 6.97532 7.58101 6.95376 7.77502 7.08154L7.85315 7.146L11.9996 11.2925L16.1461 7.146L16.2242 7.08154Z' fill='currentColor'/%3E%3C/svg%3E");
   --icon-rotate: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");
   --icon-swap: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");
+  --tip-pointer: path("M3 3L0 0H6L3 3Z");
 
   /* Elevations — light-dark() handles theme switching inline */
   --figma-elevation-100:
@@ -601,7 +602,7 @@ input[type="text"][list] {
           margin: 0 calc(var(--spacer-1) * -1);
           margin-left: calc((var(--spacer-1) * 2 + var(--spacer-1)) * -1);
         }
-        &:not(:first-child) {
+        &:not(:first-child):not(:first-of-type) {
           margin-top: var(--spacer-2);
           padding-top: var(--spacer-3);
 
@@ -1066,6 +1067,7 @@ fig-tab-content,
 /* Avatar */
 fig-avatar,
 .fig-avatar {
+  contain: layout paint;
   --size: 1.5rem;
   width: var(--size);
   display: inline-grid;
@@ -1173,6 +1175,7 @@ input[type="color"] {
 }
 
 fig-chit {
+  contain: layout paint;
   --size: 1.5rem;
   --chit-background: #d9d9d9;
   --chit-bg-size: cover;
@@ -1907,6 +1910,7 @@ fig-origin-grid {
 
 /* Switch */
 input[type="checkbox"].switch {
+  contain: strict;
   display: inline-flex;
   margin: 0;
   vertical-align: middle;
@@ -1976,6 +1980,7 @@ input[type="checkbox"].switch:checked:focus {
 
 /* Checkbox */
 input[type="checkbox"]:not(.switch) {
+  contain: strict;
   --size: 1rem;
   appearance: none;
   border-radius: var(--radius-medium);
@@ -2040,6 +2045,7 @@ label.checkbox:has([type="checkbox"]) {
 
 /* Radio */
 input[type="radio"] {
+  contain: strict;
   appearance: none;
   border-radius: 0.5rem;
   width: 1rem;
@@ -2569,6 +2575,7 @@ fig-slider {
 dialog,
 .popover,
 [popover] {
+  contain: layout;
   padding: 0;
   outline: 0;
   border: 0;
@@ -2659,6 +2666,7 @@ dialog[is="fig-dialog"] {
 }
 
 dialog[is="fig-popup"] {
+  contain: layout;
   --z-index: 999999;
   --beak-offset: 1px;
   z-index: var(--z-index);
@@ -2739,6 +2747,7 @@ dialog[is="fig-popup"] {
 }
 
 dialog[is="fig-toast"] {
+  contain: layout paint;
   --z-index: 999999;
   z-index: var(--z-index);
   box-shadow: var(--figma-elevation-100);
@@ -2808,8 +2817,10 @@ fig-tooltip {
   display: contents;
 }
 .fig-tooltip {
+  contain: layout;
   inset: unset;
   display: inline-block;
+  overflow: visible;
   color: var(--color-tooltip);
   background-color: var(--bg-tooltip);
   padding: var(--spacer-1) var(--spacer-2);
@@ -2818,6 +2829,10 @@ fig-tooltip {
   border-radius: var(--radius-medium, 0.3125rem);
   max-width: 180px;
   width: max-content;
+  box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
+  filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
+    drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
+    drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
 
   & > span {
     text-wrap: balance;
@@ -2831,47 +2846,14 @@ fig-tooltip {
     width: auto;
   }
 
-  &:after {
-    content: "";
-    background-color: var(--bg-tooltip);
-    clip-path: path(
-      "M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z"
-    );
-    width: 1rem;
-    height: 6px;
-    position: absolute;
-    top: calc(100% - 1px);
-    left: var(--beak-offset, 50%);
-    z-index: 2;
-    transform: translate(-50%);
-  }
-
-  &[position="bottom"] {
-    &:after {
-      top: 1px;
-      left: var(--beak-offset, 50%);
-      transform: translate(-50%, -100%) scaleY(-1);
-    }
-  }
-}
-
-.fig-tooltip {
-  overflow: visible;
-  box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
-  filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
-    drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
-    drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
-
   &:after {
     content: "";
     background-color: inherit;
-    clip-path: path(
-      "M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z"
-    );
-    width: 1rem;
-    height: 6px;
+    clip-path: var(--tip-pointer);
+    width: 6px;
+    height: 3px;
     position: absolute;
-    top: calc(100% - 1px);
+    top: 100%;
     left: var(--beak-offset, 50%);
     z-index: 2;
     transform: translate(-50%);
@@ -2879,7 +2861,7 @@ fig-tooltip {
 
   &[position="bottom"] {
     &:after {
-      top: 1px;
+      top: 0px;
       left: var(--beak-offset, 50%);
       transform: translate(-50%, -100%) scaleY(-1);
     }
@@ -2892,6 +2874,7 @@ fig-icon {
 }
 
 fig-icon.close {
+  contain: strict;
   width: 1rem;
   height: 1rem;
   background-color: var(--figma-color-text);
@@ -2906,6 +2889,7 @@ fig-content,
 fig-slider,
 fig-switch,
 fig-input-color,
+fig-input-gradient,
 fig-input-fill,
 fig-checkbox,
 fig-radio,
@@ -3121,14 +3105,39 @@ fig-input-text[type="number"] > [slot] {
 }
 
 fig-input-color,
+fig-input-gradient,
 fig-input-fill {
+  background-color: var(--figma-color-bg-secondary);
+  border-radius: var(--radius-medium);
+  box-shadow: none !important;
+  &:focus,
+  &:focus-within,
+  &.has-popup-open {
+    outline: 1px solid var(--figma-color-border-selected) !important;
+    outline-offset: -1px !important;
+  }
+
   & > .input-combo > fig-chit:not(:only-child),
-  & > .input-combo > fig-chit:not(:only-child) > input,
+  & > .input-combo > fig-chit:not(:only-child) input,
   & > .input-combo > fig-fill-picker:not(:only-child),
   & > .input-combo > fig-fill-picker:not(:only-child) > fig-chit > input,
-  & fig-fill-picker:not(:only-child) {
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+  & > .input-combo > label,
+  & fig-fill-picker:not(:only-child),
+  fig-input-text,
+  fig-chit {
+    &,
+    &:focus,
+    &:hover {
+      background-color: transparent !important;
+      box-shadow: none !important;
+      border: 0 !important;
+    }
+  }
+  fig-chit ~ fig-input-text > input,
+  fig-chit ~ label,
+  fig-fill-picker ~ fig-input-text > input,
+  fig-fill-picker ~ label {
+    padding-left: 0 !important;
   }
 
   & > .input-combo {
@@ -3139,6 +3148,8 @@ fig-input-fill {
   fig-input-number {
     flex: 0;
     flex-basis: 3rem;
+    box-shadow: inset 1px 0 0 0 var(--figma-color-bg) !important;
+    background-color: transparent !important;
   }
 
   &[disabled]:not([disabled="false"]) {
@@ -3152,6 +3163,45 @@ fig-input-fill {
     min-width: 0;
   }
 }
+fig-input-gradient {
+  position: relative;
+
+  &:focus,
+  &:active,
+  &:focus-within {
+    outline: 1px solid var(--figma-color-border-selected) !important;
+    outline-offset: -1px !important;
+  }
+  fig-chit {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    &::before,
+    &::after {
+      width: auto;
+      height: auto;
+      place-self: stretch;
+      border-radius: var(--radius-large) !important;
+    }
+    &[data-type="gradient"]::after {
+      width: calc(100% - 0.625rem);
+      height: 0.875rem;
+      justify-self: center;
+      align-self: center;
+    }
+  }
+
+  .fig-input-gradient-track {
+    position: absolute;
+    inset: calc(var(--spacer-1) + 2px) var(--spacer-2-5);
+    pointer-events: auto;
+
+    fig-handle {
+      pointer-events: auto;
+      cursor: default;
+    }
+  }
+}
 
 fig-slider {
   display: flex;
@@ -3439,6 +3489,7 @@ fig-spinner {
 /* Segmented control */
 .segmented-control,
 fig-segmented-control {
+  contain: layout paint;
   display: inline-flex;
   user-select: none;
   background-color: var(--figma-color-bg-secondary);
@@ -3756,23 +3807,39 @@ fig-joystick {
   fig-handle {
     position: absolute;
     z-index: 4;
-    transform: translate(-50%, -50%);
   }
 }
 
 fig-input-angle {
   --size: 1.5rem;
   display: inline-flex;
+  align-items: center;
   gap: var(--spacer-2);
   user-select: none;
 
+  > fig-input-number {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  &[full]:not([full="false"]) {
+    display: flex;
+    width: 100%;
+
+    > fig-input-number {
+      flex: 1 1 auto;
+      min-width: 0;
+      width: auto;
+    }
+  }
+
   /* When inside horizontal fig-field, grow to fill and let inputs expand */
   fig-field[direction="horizontal"] & {
     flex: 1;
     min-width: 0;
 
     fig-input-number {
-      flex: 1;
+      flex: 0 0 auto;
       width: auto;
     }
   }
@@ -3939,17 +4006,42 @@ fig-layer {
     }
   }
 }
-
+@keyframes fig-shimmer-text {
+  from {
+    background-position: var(--shimmer-text-from, 100% 0%);
+  }
+  to {
+    background-position: var(--shimmer-text-to, 0% 0%);
+  }
+}
+@keyframes fig-shimmer-mask {
+  from {
+    mask-position: var(--shimmer-mask-from, 100% 0%);
+  }
+  to {
+    mask-position: var(--shimmer-mask-to, 0% 0%);
+  }
+}
 /* Shimmer */
 fig-shimmer {
   display: contents;
   --shimmer-angle: 90deg;
   --shimmer-size: 250% 100%;
   --shimmer-duration: 1.5s;
+  --shimmer-mask-from: 100% 0%;
+  --shimmer-mask-to: 0% 0%;
+  --shimmer-text-from: 100% 0%;
+  --shimmer-text-to: 0% 0%;
+  --shimmer-subtle-fill-color: var(--figma-color-bg-transparent);
+  --shimmer-bright-fill-color: var(--figma-color-bg-tertiary);
+  --shimmer-subtle-text-color: var(--figma-color-text-tertiary);
+  --shimmer-bright-text-color: var(--figma-color-text);
 
   &[direction="vertical"] {
     --shimmer-angle: 180deg;
     --shimmer-size: 100% 250%;
+    --shimmer-mask-from: 0% 100%;
+    --shimmer-text-from: 0% 100%;
   }
   &[direction="diagonal"] {
     --shimmer-angle: 135deg;
@@ -3957,30 +4049,116 @@ fig-shimmer {
   }
 
   /* When not playing, remove shimmer effect entirely */
-  &[playing="false"] > * {
+  &[playing="false"] * {
     background: none;
+    background-size: unset;
+    animation: none;
+  }
+  &[playing="false"] :where(*:not(:has(*)):not(:empty)) {
     -webkit-background-clip: unset;
     background-clip: unset;
     -webkit-text-fill-color: unset;
-    animation: none;
+  }
+  /* Only apply shimmer when playing (default) or playing="true" */
+  &:not([playing="false"]) :where(*:has(*), *:empty) {
+    mask: linear-gradient(
+      var(--shimmer-angle),
+      var(--shimmer-subtle-fill-color) 0%,
+      var(--shimmer-subtle-fill-color) 40%,
+      var(--shimmer-bright-fill-color) 50%,
+      var(--shimmer-subtle-fill-color) 60%,
+      var(--shimmer-subtle-fill-color) 100%
+    );
+    mask-size: var(--shimmer-size);
+    animation: fig-shimmer-mask var(--shimmer-duration) linear infinite;
+  }
+  &:not([playing="false"]) :where(*:not(:has(*)):not(:empty)) {
+    mask: none;
+    background: linear-gradient(
+      var(--shimmer-angle),
+      var(--shimmer-subtle-text-color) 0%,
+      var(--shimmer-subtle-text-color) 40%,
+      var(--shimmer-bright-text-color) 50%,
+      var(--shimmer-subtle-text-color) 60%,
+      var(--shimmer-subtle-text-color) 100%
+    );
+    background-size: var(--shimmer-size);
+    animation: fig-shimmer-text var(--shimmer-duration) linear infinite;
+    -webkit-background-clip: text !important;
+    background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
   }
 }
+/* Skeleton */
+fig-skeleton {
+  display: contents;
+  --shimmer-angle: 90deg;
+  --shimmer-size: 250% 100%;
+  --shimmer-duration: 1.5s;
+  --shimmer-mask-from: 100% 0%;
+  --shimmer-mask-to: 0% 0%;
+  --shimmer-subtle-mask-color: rgba(0, 0, 0, 0.75);
+  --shimmer-bright-mask-color: rgba(0, 0, 0, 1);
 
-/* Only apply shimmer when playing (default) or playing="true" */
-fig-shimmer:not([playing="false"]) > * {
-  background: linear-gradient(
-    var(--shimmer-angle),
-    var(--figma-color-text-tertiary) 0%,
-    var(--figma-color-text-tertiary) 40%,
-    var(--figma-color-text) 50%,
-    var(--figma-color-text-tertiary) 60%,
-    var(--figma-color-text-tertiary) 100%
-  );
-  background-size: var(--shimmer-size);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: fig-shimmer var(--shimmer-duration) linear infinite;
+  &[direction="vertical"] {
+    --shimmer-angle: 180deg;
+    --shimmer-size: 100% 400%;
+    --shimmer-mask-from: 0% 100%;
+  }
+  &[direction="diagonal"] {
+    --shimmer-angle: 135deg;
+    --shimmer-size: 250% 250%;
+  }
+
+  &:not([playing="false"]) * {
+    mask: linear-gradient(
+      var(--shimmer-angle),
+      var(--shimmer-subtle-mask-color) 0%,
+      var(--shimmer-subtle-mask-color) 40%,
+      var(--shimmer-bright-mask-color) 50%,
+      var(--shimmer-subtle-mask-color) 60%,
+      var(--shimmer-subtle-mask-color) 100%
+    );
+    mask-size: var(--shimmer-size);
+    animation: fig-shimmer-mask var(--shimmer-duration) linear infinite;
+    * {
+      color: transparent;
+    }
+  }
+  label,
+  h3,
+  h2,
+  p,
+  span {
+    background: var(--figma-color-bg-secondary);
+    border-radius: var(--radius-medium);
+  }
+
+  *:not(fig-field, fig-header) {
+    background: var(--figma-color-bg-secondary) !important;
+    box-shadow: none !important;
+    border-radius: var(--radius-medium);
+    color: var(--figma-color-bg-secondary) !important;
+    pointer-events: none;
+    user-select: none;
+  }
+  *::placeholder {
+    color: transparent !important;
+  }
+  *::after,
+  *::before,
+  *::marker,
+  *::picker-icon,
+  *::-webkit-slider-thumb,
+  *::-webkit-slider-runnable-track,
+  *::-webkit-color-swatch,
+  *::-webkit-color-swatch-wrapper,
+  *::-webkit-details-marker,
+  *::-webkit-inner-spin-button,
+  *::-webkit-outer-spin-button,
+  *::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
 }
 
 /* Fill Picker */
@@ -3992,11 +4170,39 @@ fig-fill-picker {
   }
 }
 
+fig-preview {
+  display: inline-grid;
+  place-items: center;
+  aspect-ratio: 1;
+  width: calc(100% - var(--spacer-3) * 2);
+  margin: 0 var(--spacer-3);
+  margin-top: var(--spacer-2);
+  margin-bottom: var(--spacer-2);
+  border-radius: var(--radius-medium);
+  position: relative;
+  &::before,
+  &::after,
+  > * {
+    grid-area: 1/1;
+    place-self: center;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+  &::after {
+    content: "";
+    grid-area: 1/1;
+    place-self: center;
+    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+  }
+}
+
 .fig-fill-picker-dialog {
+  contain: layout;
   width: 240px;
   padding: 0;
 
-  fig-header {
+  & > fig-header {
     padding: var(--spacer-2);
     display: flex;
     justify-content: space-between;
@@ -4007,294 +4213,298 @@ fig-fill-picker {
     font-size: 0.6875rem;
     padding: var(--spacer-1) var(--spacer-1);
   }
-}
-
-.fig-fill-picker-type-label {
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-medium);
-  color: var(--figma-color-text);
-  padding: var(--spacer-1) var(--spacer-2);
-}
-
-.fig-fill-picker-content {
-  padding: var(--spacer-3);
-}
-
-.fig-fill-picker-tab {
-  display: none;
+  & > fig-content {
+    padding-bottom: var(--spacer-2-5);
+  }
+  .fig-fill-picker-type-label {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    color: var(--figma-color-text);
+    padding: var(--spacer-1) var(--spacer-2);
+  }
 
-  &:first-child {
-    display: block;
+  .fig-fill-picker-gamut {
+    margin-left: auto;
   }
-}
 
-/* Solid Tab */
-.fig-fill-picker-color-area {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 1;
-  border-radius: var(--radius-medium);
-  overflow: visible;
-  margin-bottom: var(--spacer-2);
+  .fig-fill-picker-tab {
+    display: none;
 
-  canvas {
-    width: 100%;
-    height: 100%;
-    border-radius: var(--radius-medium);
+    &:first-child {
+      display: block;
+    }
   }
-}
 
-.fig-fill-picker-handle {
-  position: absolute;
-  width: 1rem;
-  height: 1rem;
-  border-radius: 50%;
-  background: var(--picker-color);
-  box-shadow:
-    inset 0 0 0 0.125rem var(--handle-color),
-    0px 0 0 0.5px rgba(0, 0, 0, 0.1),
-    var(--elevation-100-canvas);
-  transform: translate(-50%, -50%);
-  z-index: 1;
-  &:hover {
-    transform: translate(-50%, -50%);
+  .fig-fill-picker-color-area {
+    canvas {
+      width: 100%;
+      height: 100%;
+      border-radius: var(--radius-medium);
+    }
   }
-}
-
-.fig-fill-picker-sliders {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacer-2);
-  margin-bottom: var(--spacer-2);
 
-  fig-slider {
-    width: 100%;
+  .fig-fill-picker-color-area fig-handle {
+    --width: 1rem;
+    --height: 1rem;
+    --border-radius: 50%;
+    --box-shadow:
+      inset 0 0 0 0.125rem var(--handle-color),
+      0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--elevation-100-canvas);
+    z-index: 1;
   }
-}
 
-.fig-fill-picker-inputs {
-  display: flex;
-  gap: var(--spacer-1);
-  align-items: center;
+  .fig-fill-picker-sliders {
+    display: grid;
+    grid-template-columns: calc(3.5rem + var(--spacer-3)) 1fr;
+    grid-template-rows: 1fr 1fr;
+    align-items: center;
+    padding-right: var(--spacer-3);
+    gap: var(--spacer-2);
+    padding-bottom: var(--spacer-1);
 
-  .fig-fill-picker-color-input {
-    flex: 1;
+    .fig-fill-picker-eyedropper {
+      grid-column: 1;
+      grid-row: 1 / 3;
+      place-self: center;
+      margin-right: calc(var(--spacer-3) * -1);
+      width: 3.5rem;
+      aspect-ratio: 1 / 1;
+      height: 3.5rem;
+    }
+
+    fig-slider {
+      grid-column: 2;
+      min-width: 0;
+    }
   }
-}
 
-/* Gradient Tab */
-.fig-fill-picker-gradient-header {
-  display: flex;
-  gap: var(--spacer-2);
-  align-items: center;
-  margin-bottom: var(--spacer-2);
+  .fig-fill-picker-inputs {
+    .fig-fill-picker-input-mode {
+      width: 3.5rem;
+    }
+    .fig-fill-picker-input-fields {
+      flex: 1;
+      min-width: 0;
+      display: flex;
 
-  & > *:last-child fig-button {
-    margin-left: auto;
-  }
+      .input-combo {
+        flex: 1;
+        min-width: 0;
+      }
 
-  .fig-fill-picker-gradient-center {
-    fig-input-number {
-      width: 48px;
+      fig-input-text {
+        flex: 1;
+        min-width: 0;
+      }
     }
   }
-}
-
-.fig-fill-picker-gradient-preview {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 1;
-  border-radius: var(--radius-medium);
-  overflow: hidden;
-  margin-bottom: var(--spacer-2);
-}
 
-.fig-fill-picker-gradient-bar {
-  position: absolute;
-  inset: 0;
-  border-radius: var(--radius-medium);
-  background: linear-gradient(90deg, #d9d9d9 0%, #737373 100%);
-}
+  /* Gradient Tab */
+  .fig-fill-picker-gradient-header {
+    .fig-fill-picker-gradient-type {
+      flex: 1;
+      min-width: 0;
+    }
 
-.fig-fill-picker-gradient-stops-handles {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-}
+    & > *:last-child fig-button {
+      margin-left: auto;
+    }
 
-.fig-fill-picker-gradient-stops {
-  .fig-fill-picker-gradient-stops-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--spacer-1);
-    font-size: 0.75rem;
-    color: var(--figma-color-text-secondary);
+    .fig-fill-picker-gradient-center {
+      fig-input-number {
+        width: 48px;
+      }
+    }
   }
-}
-
-.fig-fill-picker-gradient-stops-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacer-1);
-}
 
-.fig-fill-picker-gradient-stop-row {
-  display: flex;
-  gap: var(--spacer-1);
-  align-items: center;
+  .fig-fill-picker-gradient-bar {
+    background: linear-gradient(90deg, #d9d9d9 0%, #737373 100%);
+  }
 
-  & > .fig-fill-picker-stop-position {
-    flex: 0;
-    flex-basis: 3rem;
-    min-width: 0;
-    width: 3rem;
+  .fig-fill-picker-gradient-stops-handles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
   }
 
-  .fig-fill-picker-stop-color {
-    flex: 1;
-    min-width: 0;
-    fig-input-text {
-      min-width: 0;
+  .fig-fill-picker-gradient-stops {
+    .fig-fill-picker-gradient-stops-header {
+      > span {
+        flex: 1;
+      }
     }
   }
 
-  .fig-fill-picker-stop-remove {
-    flex-shrink: 0;
+  .fig-fill-picker-gradient-stops-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
   }
-}
 
-/* Media Tabs (Image/Video/Webcam) */
-.fig-fill-picker-media-header {
-  display: flex;
-  gap: var(--spacer-1);
-  align-items: center;
-  margin-bottom: var(--spacer-2);
+  .fig-fill-picker-gradient-stop-row {
+    padding-right: var(--spacer-2);
+    & > .fig-fill-picker-stop-position {
+      flex: 0;
+      flex-basis: 3rem;
+      min-width: 0;
+      width: 3rem;
+    }
 
-  .fig-fill-picker-scale-mode {
-    flex: 1;
-  }
+    .fig-fill-picker-stop-color {
+      flex: 1;
+      min-width: 0;
+      fig-input-text {
+        min-width: 0;
+      }
+    }
 
-  .fig-fill-picker-scale {
-    width: 56px;
+    .fig-fill-picker-stop-remove {
+      flex-shrink: 0;
+    }
   }
-}
 
-.fig-fill-picker-media-preview {
-  position: relative;
-  aspect-ratio: 1;
-  border-radius: var(--radius-medium);
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  /* Media Tabs (Image/Video/Webcam) */
+  .fig-fill-picker-media-header {
+    .fig-fill-picker-scale-mode {
+      flex: 1;
+    }
 
-  &.dragover {
-    outline: 2px dashed var(--figma-color-border-brand);
-    outline-offset: -2px;
+    .fig-fill-picker-scale {
+      width: 56px;
+    }
   }
 
-  &.has-media {
-    fig-button {
-      visibility: hidden;
+  .fig-fill-picker-media-preview {
+    position: relative;
+    aspect-ratio: 1;
+    margin: var(--spacer-1) var(--spacer-3);
+    border-radius: var(--radius-medium);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.dragover {
+      outline: 2px dashed var(--figma-color-border-brand);
+      outline-offset: -2px;
     }
-    &:hover {
+
+    &.has-media {
       fig-button {
-        visibility: visible;
+        visibility: hidden;
+      }
+      &:hover {
+        fig-button {
+          visibility: visible;
+        }
       }
     }
   }
-}
 
-.fig-fill-picker-checkerboard {
-  position: absolute;
-  inset: 0;
-  background-image:
-    linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%),
-    linear-gradient(
-      -45deg,
-      var(--figma-color-bg-tertiary) 25%,
-      transparent 25%
-    ),
-    linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%),
-    linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);
-  background-size: 16px 16px;
-  background-position:
-    0 0,
-    0 8px,
-    8px -8px,
-    -8px 0px;
-}
+  .fig-fill-picker-checkerboard {
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(
+        45deg,
+        var(--figma-color-bg-tertiary) 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        -45deg,
+        var(--figma-color-bg-tertiary) 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        45deg,
+        transparent 75%,
+        var(--figma-color-bg-tertiary) 75%
+      ),
+      linear-gradient(
+        -45deg,
+        transparent 75%,
+        var(--figma-color-bg-tertiary) 75%
+      );
+    background-size: 16px 16px;
+    background-position:
+      0 0,
+      0 8px,
+      8px -8px,
+      -8px 0px;
+  }
 
-.fig-fill-picker-image-preview {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  display: none;
-}
+  .fig-fill-picker-image-preview {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+  }
 
-.fig-fill-picker-video-preview {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: none;
-}
+  .fig-fill-picker-video-preview {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: none;
+  }
 
-.fig-fill-picker-upload {
-  position: relative;
-  z-index: 1;
-}
+  .fig-fill-picker-upload {
+    position: relative;
+    z-index: 1;
+  }
 
-/* Webcam Tab */
-.fig-fill-picker-webcam-preview {
-  position: relative;
-  aspect-ratio: 1;
-  border-radius: var(--radius-medium);
-  overflow: hidden;
-  margin-bottom: var(--spacer-2);
-}
+  /* Webcam Tab */
+  .fig-fill-picker-webcam-preview {
+    position: relative;
+    aspect-ratio: 1;
+    margin: 0 var(--spacer-3);
+    border-radius: var(--radius-medium);
+    overflow: hidden;
+    margin-bottom: var(--spacer-2);
+  }
 
-.fig-fill-picker-webcam-video {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
+  .fig-fill-picker-webcam-video {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 
-.fig-fill-picker-webcam-status {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--figma-color-bg-secondary);
-  color: var(--figma-color-text-secondary);
-  font-size: 0.75rem;
-}
+  .fig-fill-picker-webcam-status {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--figma-color-bg-secondary);
+    color: var(--figma-color-text-secondary);
+    font-size: 0.75rem;
+  }
 
-.fig-fill-picker-webcam-controls {
-  display: flex;
-  gap: var(--spacer-1);
+  .fig-fill-picker-webcam-controls {
+    display: flex;
+    gap: var(--spacer-1);
 
-  .fig-fill-picker-camera-select {
-    flex: 1;
-  }
+    .fig-fill-picker-camera-select {
+      flex: 1;
+    }
 
-  .fig-fill-picker-webcam-capture {
-    flex-shrink: 0;
+    .fig-fill-picker-webcam-capture {
+      flex-shrink: 0;
+    }
   }
 }
 
 /* Utilities */
 
 .fig-mask-icon {
+  contain: strict;
   --size: var(--spacer-4);
   --icon: var(--icon-add);
   display: inline-flex;
@@ -4533,12 +4743,14 @@ fig-choice {
 }
 
 fig-handle {
+  contain: strict;
   --width: 0.75rem;
   --height: 0.75rem;
   --fill: var(--figma-color-bg-brand);
   --border-radius: 50%;
+  --ring-width: 1.25px;
   --box-shadow:
-    inset 0 0 0 0.09375rem var(--handle-color),
+    inset 0 0 0 var(--ring-width) var(--handle-color),
     0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--elevation-100-canvas);
   --outline: none;
   --border: none;
@@ -4551,13 +4763,119 @@ fig-handle {
   box-shadow: var(--box-shadow);
   outline: var(--outline);
   border: var(--border);
+
+  &[size="small"] {
+    --width: 0.5625rem;
+    --height: 0.5625rem;
+  }
+
+  &[drag]:not([drag="false"]) {
+    position: absolute;
+    touch-action: none;
+  }
+
+  &[selected]:not([selected="false"]) {
+    outline: var(--ring-width) solid var(--figma-color-border-selected);
+    outline-offset: var(--ring-width);
+  }
+
+  &[disabled]:not([disabled="false"]),
+  &[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  &[type="color"] {
+    contain: layout style;
+    overflow: visible;
+    position: relative;
+
+    fig-color-tip {
+      position: absolute;
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+    }
+  }
 }
 
-@keyframes fig-shimmer {
-  0% {
-    background-position: 100% 100%;
+fig-color-tip {
+  --tip-selection-width: 1px;
+  --tip-selection-scale: 1;
+  --beak-offset: 50%;
+
+  contain: layout;
+  inset: unset;
+  display: inline-grid;
+  place-items: center;
+  overflow: visible;
+  position: relative;
+  color: var(--text-primary);
+  color-scheme: light only;
+  aspect-ratio: 1 / 1;
+  flex-shrink: 0;
+  min-width: max-content;
+  min-height: max-content;
+  background-color: var(--figma-color-bg);
+  border-radius: var(--radius-medium, 0.3125rem);
+  box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
+  filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
+    drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
+    drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
+
+  fig-chit {
+    input[type="color"] {
+      background: transparent;
+    }
   }
-  100% {
-    background-position: 0% 0%;
+
+  &[selected]:not([selected="false"]) {
+    outline: var(--tip-selection-width) solid var(--figma-color-border-selected);
+  }
+
+  &[selected]:not([selected="false"]):before {
+    content: "";
+    background: var(--figma-color-border-selected);
+    clip-path: var(--tip-pointer);
+    width: 6px;
+    height: 3px;
+    position: absolute;
+    top: calc(100% + 1px);
+    left: var(--beak-offset, 50%);
+    z-index: 1;
+    pointer-events: none;
+    transform: translate(-50%, 0) scale(var(--tip-selection-scale));
+    transform-origin: 50% 0;
+  }
+
+  &:after {
+    content: "";
+    background-color: inherit;
+    clip-path: var(--tip-pointer);
+    width: 6px;
+    height: 3px;
+    position: absolute;
+    top: 100%;
+    left: var(--beak-offset, 50%);
+    z-index: 2;
+    transform: translate(-50%);
+  }
+
+  &[position="bottom"] {
+    &[selected]:not([selected="false"]):before {
+      top: 1px;
+      left: var(--beak-offset, 50%);
+      transform: translate(-50%, -100%) scale(var(--tip-selection-scale))
+        scaleY(-1);
+      transform-origin: 50% 100%;
+    }
+
+    &:after {
+      top: 1px;
+      left: var(--beak-offset, 50%);
+      transform: translate(-50%, -100%) scaleY(-1);
+    }
   }
 }