@rogieking/figui3 6.4.5 → 6.4.7

package/components.css

@@ -1,3 +1,4 @@
+@layer figui.defaults {
 :root,
 :host {
   color-scheme: light dark;
@@ -48,6 +49,10 @@
   --figma-color-bg-warning-secondary: light-dark(#fab815, #e4a711);
   --figma-color-bg-warning-tertiary: light-dark(#fff1c2, #5c4100);
   --figma-color-bg-switch: light-dark(#e6e6e6, #444444);
+  --figma-color-bg-slot: light-dark(
+    rgba(255, 36, 189, 0.25),
+    rgba(243, 22, 176, 0.25)
+  );
 
   /* Border Colors */
   --figma-color-border: light-dark(#e6e6e6, #444444);
@@ -80,6 +85,12 @@
   --figma-color-border-success-strong: light-dark(#009951, #79d297);
   --figma-color-border-warning: light-dark(#ffe8a3, #925711);
   --figma-color-border-warning-strong: light-dark(#b86200, #f7d15f);
+  --figma-color-border-slot: light-dark(#ff24bd, #f316b0);
+
+  /* Focus */
+  --figma-focus-outline: 1px solid var(--figma-color-border-selected);
+  --figma-focus-outline-offset: -1px;
+  --figma-focus-outline-radius: inherit;
 
   /* Icon Colors */
   --figma-color-icon: light-dark(#000000e5, #ffffff);
@@ -89,8 +100,8 @@
   --figma-color-icon-brand-tertiary: light-dark(#bde3ff, #394360);
   --figma-color-icon-component: light-dark(#8638e5, #d1a8ff);
   --figma-color-icon-component-pressed: light-dark(#7c2bda, #d6b6fb);
-  --figma-color-icon-component-secondary: light-dark(#c5b2dc, #7f699b);
-  --figma-color-icon-component-tertiary: light-dark(#c5b2dc, #7f699b);
+  --figma-color-icon-component-secondary: light-dark(#6f3bb2, #d1a8ff);
+  --figma-color-icon-component-tertiary: light-dark(#6f3bb2, #d1a8ff);
   --figma-color-icon-danger: light-dark(#f24822, #e03e1a);
   --figma-color-icon-danger-hover: light-dark(#bd2915, #fbbcb6);
   --figma-color-icon-danger-pressed: light-dark(#bd2915, #fbbcb6);
@@ -121,7 +132,7 @@
   --figma-color-icon-onwarning-secondary: #00000080;
   --figma-color-icon-onwarning-tertiary: #0000004d;
   --figma-color-icon-pressed: light-dark(#007be5, #0a6dc2);
-  --figma-color-icon-secondary: light-dark(#00000080, #ffffffb2);
+  --figma-color-icon-secondary: light-dark(#00000099, #ffffffcc);
   --figma-color-icon-secondary-hover: light-dark(#000000e5, #ffffff);
   --figma-color-icon-selected: light-dark(#007be5, #7cc4f8);
   --figma-color-icon-selected-secondary: light-dark(#007be5, #7cc4f8);
@@ -130,7 +141,7 @@
   --figma-color-icon-success-pressed: light-dark(#008043, #a1e8b9);
   --figma-color-icon-success-secondary: light-dark(#14ae5c, #198f51);
   --figma-color-icon-success-tertiary: light-dark(#14ae5c, #198f51);
-  --figma-color-icon-tertiary: light-dark(#0000004d, #ffffff66);
+  --figma-color-icon-tertiary: light-dark(#00000099, #ffffff99);
   --figma-color-icon-tertiary-hover: light-dark(#000000e5, #ffffff);
   --figma-color-icon-warning: light-dark(#ffcd29, #f3c11b);
   --figma-color-icon-warning-pressed: light-dark(#b86200, #f7d15f);
@@ -144,8 +155,8 @@
   --figma-color-text-brand-tertiary: light-dark(#007be5, #7cc4f8);
   --figma-color-text-component: light-dark(#8638e5, #d1a8ff);
   --figma-color-text-component-pressed: light-dark(#7c2bda, #d6b6fb);
-  --figma-color-text-component-secondary: light-dark(#c5b2dc, #7f699b);
-  --figma-color-text-component-tertiary: light-dark(#c5b2dc, #7f699b);
+  --figma-color-text-component-secondary: light-dark(#6f3bb2, #d1a8ff);
+  --figma-color-text-component-tertiary: light-dark(#6f3bb2, #d1a8ff);
   --figma-color-text-danger: light-dark(#dc3412, #fca397);
   --figma-color-text-danger-secondary: light-dark(#dc3412, #fca397);
   --figma-color-text-danger-tertiary: light-dark(#dc3412, #fca397);
@@ -172,7 +183,7 @@
   --figma-color-text-onwarning: #000000e5;
   --figma-color-text-onwarning-secondary: #00000080;
   --figma-color-text-onwarning-tertiary: #0000004d;
-  --figma-color-text-secondary: light-dark(#00000080, #ffffffb2);
+  --figma-color-text-secondary: light-dark(#00000099, #ffffffcc);
   --figma-color-text-secondary-hover: light-dark(#000000e5, #ffffff);
   --figma-color-text-selection: rgba(13, 153, 255, 0.4);
   --figma-color-text-selected: light-dark(#007be5, #7cc4f8);
@@ -181,14 +192,15 @@
   --figma-color-text-success: light-dark(#009951, #79d297);
   --figma-color-text-success-secondary: light-dark(#009951, #79d297);
   --figma-color-text-success-tertiary: light-dark(#009951, #79d297);
-  --figma-color-text-tertiary: light-dark(#0000004d, #ffffff66);
+  --figma-color-text-tertiary: light-dark(#00000099, #ffffff99);
   --figma-color-text-tertiary-hover: light-dark(#000000e5, #ffffff);
   --figma-color-text-warning: light-dark(#b86200, #f7d15f);
   --figma-color-text-warning-secondary: light-dark(#b86200, #f7d15f);
   --figma-color-text-warning-tertiary: light-dark(#b86200, #f7d15f);
   --figma-color-text-menu: #ffffff;
   --figma-color-text-menu-secondary: rgba(255, 255, 255, 0.7);
-  --figma-color-text-menu-tertiary: rgba(255, 255, 255, 0.4);
+  --figma-color-text-menu-tertiary: rgba(255, 255, 255, 0.7);
+}
 }
 
 :root,
@@ -196,9 +208,8 @@
   /* Typography & Sizing */
   --font-size: 16px;
   --font-family:
-    "Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next, avenir,
-    segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
-    sans-serif;
+    AppleSystemUIFont, BlinkMacSystemFont, avenir next, avenir, segoe ui,
+    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
   --body-medium-fontSize: 0.6875rem;
   --body-large-fontSize: 0.8125rem;
   --body-letter-spacing: 0.055px;
@@ -286,7 +297,7 @@
       rgba(0, 0, 0, 0.2) 0% 25%,
       rgba(255, 255, 255, 0.2) 0% 50%
     )
-    0 0 / 0.875rem 0.875rem;
+    0 0 / 0.4375rem 0.4375rem;
     --checkerboard-slider: repeating-conic-gradient(
       rgba(0, 0, 0, 0.2) 0% 25%,
       rgba(255, 255, 255, 0.2) 0% 50%
@@ -296,7 +307,7 @@
       rgba(0, 0, 0, 0.2) 0% 25%,
       rgba(255, 255, 255, 0.2) 0% 50%
     )
-    0 0 / 0.625rem 0.625rem;
+    0 0 / 0.375rem 0.375rem;
   --bg-hue: linear-gradient(
     90deg,
     rgba(255, 0, 0, 1),
@@ -452,8 +463,8 @@ input[type="tel"],
   -moz-appearance: textfield;
 
   &:focus {
-    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
-    outline: 0;
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
   }
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -567,8 +578,8 @@ input[type="text"][list] {
   text-overflow: ellipsis;
 
   &:focus {
-    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
-    outline: 0;
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
   }
 
   &::-webkit-calendar-picker-indicator {
@@ -1017,9 +1028,11 @@ fig-button {
   }
 
   &:focus-visible,
-  &[data-focus-visible] {
-    outline: 0;
-    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+  &[data-focus-visible],
+  &[type="select"]:focus-within,
+  &[type="upload"]:focus-within {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
   }
   svg {
     *[fill]:not([fill="none"]) {
@@ -1124,6 +1137,12 @@ fig-tab,
     background-color: var(--figma-color-bg-secondary);
   }
 
+  &:focus-visible,
+  &[data-focus-visible] {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
+  }
+
   &[disabled]:not([disabled="false"]) {
     opacity: 0.4;
     pointer-events: none;
@@ -1203,8 +1222,8 @@ input[type="color"] {
   display: inline-grid;
 
   &:focus {
-    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
-    outline: 0;
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
   }
 
   &::-webkit-color-swatch-wrapper {
@@ -1446,6 +1465,11 @@ fig-input-file {
     flex-shrink: 0;
   }
 
+  fig-button:has(> input[type="file"]:focus-visible) {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
+  }
+
   &[dragover] fig-button {
     outline: 1px dashed var(--figma-color-border-brand);
     outline-offset: -1px;
@@ -1457,91 +1481,114 @@ fig-image,
 fig-video {
   --fig-media-fit: contain;
   --fig-media-aspect-ratio: 4/3;
-  --fig-media-size: 100%; 
+  --fig-media-size: 100%;
   display: inline-flex;
-  max-width:var(--fig-media-size); 
-  max-height:var(--fig-media-size); 
-  background-color: var(--figma-color-bg-secondary);
-  border-radius: var(--radius-medium);
-  overflow: hidden;
-  aspect-ratio: var(--fig-media-aspect-ratio);
-  align-items: center;
-  min-height: 4rem;
-  justify-content: center;
+  flex-direction: column;
+  gap: var(--spacer-2);
+  max-width: var(--fig-media-size);
+  align-items: stretch;
   position: relative;
 
+  &:has(> :is([slot="overlay"], fig-input-file[variant="overlay"])) {
+    display: inline-grid;
+    grid-template-areas: "media-preview";
+  }
+
   &[size="small"] {
     --fig-media-size: 2rem;
-    min-height: auto;
     width: var(--fig-media-size);
   }
   &[size="medium"] {
     --fig-media-size: 4rem;
-    min-height: auto;
     width: var(--fig-media-size);
   }
   &[size="large"] {
     --fig-media-size: 6rem;
-    min-height: auto;
     width: var(--fig-media-size);
   }
 
-  & > *{
-    position: absolute;
-    z-index: 1;
+  > fig-preview {
+    --fig-preview-fit: var(--fig-media-fit);
+    width: 100%;
+    max-width: var(--fig-media-size);
+    aspect-ratio: var(--fig-media-aspect-ratio);
+    min-height: 4rem;
   }
 
-  &[checkerboard]:not([checkerboard="false"]) {
+  &[size="small"] > fig-preview,
+  &[size="medium"] > fig-preview,
+  &[size="large"] > fig-preview {
+    min-height: auto;
+  }
+
+  &[checkerboard]:not([checkerboard="false"]) > fig-preview {
     background: var(--checkerboard);
   }
-  &::after{
-    content: "";
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    position: absolute;
-    inset: 0;
-    border: 1px solid var(--figma-color-bordertranslucent);
+
+  > :is(fig-preview, [slot="overlay"], fig-input-file[variant="overlay"]) {
+    grid-area: media-preview;
   }
-  > video, 
-  > img,
-  > .fig-media-element[data-generated] {
+
+  > fig-preview > video,
+  > fig-preview > img,
+  > fig-preview > .fig-media-element[data-generated] {
     display: block;
     width: stretch;
     height: stretch;
     position: static;
-    object-fit: var(--fig-media-fit);
+    object-fit: var(--fig-preview-fit);
     object-position: center;
     z-index: 0;
   }
 
   &:is(:not([src]), [src=""]):is(:not([poster]), [poster=""])
-    > video.fig-media-element[data-generated] {
+    > fig-preview > video.fig-media-element[data-generated] {
     opacity: 0;
     pointer-events: none;
   }
-  &:not(:has(> img.fig-media-element[data-generated][src]:not([src=""]))) > img.fig-media-element[data-generated] {
+  &:not(:has(> fig-preview > img.fig-media-element[data-generated][src]:not([src=""]))) > fig-preview > img.fig-media-element[data-generated] {
     opacity: 0;
     pointer-events: none;
   }
-  > fig-input-file[data-generated] {
+  > fig-preview > fig-input-file:is([data-generated], [variant="overlay"]) {
     opacity: 0;
     pointer-events: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    max-width: calc(100% - var(--spacer-4));
+  }
+  &:not(:has(> fig-preview > img.fig-media-element[data-generated][src]:not([src=""]))) > fig-preview > fig-input-file:is([data-generated], [variant="overlay"]),
+  > fig-preview:hover > fig-input-file:is([data-generated], [variant="overlay"]),
+  > fig-preview:focus-within > fig-input-file:is([data-generated], [variant="overlay"]) {
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  > :is([slot="overlay"], fig-input-file[variant="overlay"]) {
+    place-self: center;
     z-index: 2;
-    max-width:calc(100% - var(--spacer-4));
+    opacity: 0;
+    pointer-events: none;
+    max-width: calc(100% - var(--spacer-4));
   }
-  &:not(:has(> img.fig-media-element[data-generated][src]:not([src=""]))) > fig-input-file[data-generated],
-  &:hover > fig-input-file[data-generated] {
+
+  &:not(:has(> fig-preview > img.fig-media-element[data-generated][src]:not([src=""]))) > :is([slot="overlay"], fig-input-file[variant="overlay"]),
+  &:has(> fig-preview:hover) > :is([slot="overlay"], fig-input-file[variant="overlay"]),
+  &:has(> fig-preview:focus-within) > :is([slot="overlay"], fig-input-file[variant="overlay"]),
+  &:has(> [slot="overlay"]:is(:focus, :focus-within, :active)) > [slot="overlay"],
+  &:has(> fig-input-file[variant="overlay"]:is(:focus, :focus-within, :active)) > fig-input-file[variant="overlay"],
+  > [slot="overlay"]:focus-within,
+  > fig-input-file[variant="overlay"]:focus-within {
     opacity: 1;
     pointer-events: all;
   }
 
   > fig-media-controls[data-generated] {
-    position: absolute;
-    inset: var(--spacer-2);
-    top: auto;
-    width: auto;
-    z-index: 3;
+    position: static;
+    width: 100%;
     pointer-events: auto;
   }
 }
@@ -1969,6 +2016,12 @@ fig-origin-grid {
     cursor: default;
     touch-action: none;
 
+    &:focus-visible {
+      --figma-focus-outline-offset: 1px;
+      outline: var(--figma-focus-outline);
+      outline-offset: var(--figma-focus-outline-offset);
+    }
+
     &.beyond-bounds-x,
     &.beyond-bounds-y {
       -webkit-mask-image: var(--icon-24-arrow-left);
@@ -2053,6 +2106,27 @@ fig-combo-input {
   display: inline-flex;
   flex: 1;
   min-width: 0;
+
+  > .input-combo {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+  }
+
+  fig-input-text {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}
+
+fig-combo-input fig-button[type="select"] {
+  > fig-dropdown,
+  > fig-dropdown > select {
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    padding: 0;
+  }
 }
 
 .input-combo {
@@ -2107,6 +2181,7 @@ input[type="checkbox"].switch {
   --knob-height: 0.5rem;
   --width: 2rem;
   --height: 1rem;
+  --figma-focus-outline-offset: 1px;
   contain: strict;
   display: inline-flex;
   margin: 0;
@@ -2126,7 +2201,6 @@ input[type="checkbox"].switch {
   justify-content: center;
   border-radius: 0.5rem;
   background-color: var(--figma-color-bg-switch);
-  transition: var(--input-transition);
   box-sizing: border-box;
   box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
   &:after {
@@ -2184,12 +2258,9 @@ input[type="checkbox"].switch {
     }
   }
 
-  &:focus {
-    outline: 0;
-  }
-
-  &:checked:focus {
-    outline: 0;
+  &:focus, &:focus-within {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
   }
 }
 
@@ -2198,6 +2269,7 @@ input[type="checkbox"]:not(.switch) {
   contain: strict;
   vertical-align: middle;
   --size: 1rem;
+  --figma-focus-outline-offset: 1px;
   appearance: none;
   border-radius: var(--radius-medium);
   width: var(--size);
@@ -2230,10 +2302,11 @@ input[type="checkbox"]:not(.switch) {
   }
 
   &:focus {
-    outline: 0;
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
 
     &:not(:checked) {
-      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
     }
   }
   &:disabled{
@@ -2274,6 +2347,7 @@ label.checkbox:has([type="checkbox"]) {
 /* Radio */
 input[type="radio"] {
   contain: strict;
+  --figma-focus-outline-offset: 1px;
   appearance: none;
   border-radius: 0.5rem;
   width: 1rem;
@@ -2295,11 +2369,8 @@ input[type="radio"] {
   }
 
   &:focus {
-    outline: 0;
-
-    &:not(:checked) {
-      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
-    }
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
   }
 
   &:hover:not(:checked):not(:disabled) {
@@ -2567,6 +2638,19 @@ fig-slider {
       outline: none;
     }
 
+    &:focus-visible {
+      &::-webkit-slider-thumb {
+        --figma-focus-outline-offset: 1px;
+        outline: var(--figma-focus-outline);
+        outline-offset: var(--figma-focus-outline-offset);
+      }
+      &::-moz-range-thumb {
+        --figma-focus-outline-offset: 1px;
+        outline: var(--figma-focus-outline);
+        outline-offset: var(--figma-focus-outline-offset);
+      }
+    }
+
     &:disabled {
       cursor: not-allowed;
     }
@@ -2727,8 +2811,8 @@ fig-slider {
   &:not([variant="classic"]) {
     --slider-height: 0.375rem;
     --slider-thumb-size: 0.75rem;
-    --slider-tick-width: calc(var(--slider-height) / 3);
-    --slider-tick-height: calc(var(--slider-height) / 3);
+    --slider-tick-width: calc(var(--slider-height) / 2);
+    --slider-tick-height: calc(var(--slider-height) / 2);
     --handle-transition: none;
     --slider-transition: none;
     --slider-handle-shadow:
@@ -3000,70 +3084,6 @@ 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);
-  border-radius: var(--radius-large);
-  padding: var(--spacer-2) var(--spacer-3);
-  align-items: center;
-  gap: var(--spacer-2);
-  height: 2.5rem;
-  justify-content: center;
-  min-width: 0;
-  color: var(--figma-color-text);
-  background-color: var(--figma-color-bg);
-
-  &[open] {
-    display: flex;
-  }
-
-  & p {
-    margin: 0;
-    padding: 0;
-    color: inherit;
-    font-weight: var(--body-medium-strong-fontWeight);
-  }
-
-  hr[vertical] {
-    margin: 0;
-  }
-
-  & fig-button:last-child {
-    margin-right: calc(var(--spacer-2) * -1);
-  }
-
-  /* Theme: Dark (default) - hardcoded to ensure consistency regardless of global theme */
-  &[theme="dark"] {
-    color-scheme: dark;
-  }
-
-  /* Theme: Light - hardcoded to ensure consistency regardless of global theme */
-  &[theme="light"] {
-    color-scheme: light;
-  }
-
-  /* Theme: Danger - hardcoded to ensure consistency regardless of global theme */
-  &[theme="danger"] {
-    background-color: var(--figma-color-bg-danger);
-    color-scheme: dark;
-  }
-
-  /* Theme: Brand - hardcoded to ensure consistency regardless of global theme */
-  &[theme="brand"] {
-    background-color: var(--figma-color-bg-brand);
-    color-scheme: dark;
-  }
-
-  &[theme="success"] {
-    background-color: var(--figma-color-bg-success);
-    color-scheme: dark;
-  }
-}
-
-
-
 /* Tooltip */
 fig-tooltip {
   display: contents;
@@ -3140,6 +3160,7 @@ fig-dropdown {
 
 fig-checkbox,
 fig-radio {
+  
   align-items: center;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -3196,6 +3217,13 @@ fig-group {
   & > fig-header {
     cursor: default;
     padding-left: var(--spacer-3);
+      
+    &:focus-visible {
+      --figma-focus-outline-radius: var(--radius-medium);
+      outline: var(--figma-focus-outline);
+      outline-offset: var(--figma-focus-outline-offset);
+      border-radius: var(--figma-focus-outline-radius);
+    }
     h3 {
       .fig-group-chevron {
         --icon: var(--icon-16-chevron);
@@ -3405,10 +3433,17 @@ fig-input-number {
 
     &:focus,
     &:active {
+      outline: 0;
       box-shadow: none !important;
     }
   }
 
+  & input[type="text"]:focus,
+  & input[type="text"]:active {
+    outline: 0;
+    box-shadow: none !important;
+  }
+
   & input[type="search"] {
     appearance: textfield;
     &::-webkit-search-cancel-button,
@@ -3421,8 +3456,8 @@ fig-input-number {
   }
 
   &:has(input:focus) {
-    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
-    outline: 0;
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
   }
   &:hover {
     box-shadow: inset 0 0 0 1px var(--figma-color-border);
@@ -3458,8 +3493,8 @@ fig-input-fill {
   &:focus,
   &:focus-within,
   &.has-popup-open {
-    outline: 1px solid var(--figma-color-border-selected) !important;
-    outline-offset: -1px !important;
+    outline: var(--figma-focus-outline) !important;
+    outline-offset: var(--figma-focus-outline-offset) !important;
   }
   &:hover {
     outline: 1px solid var(--figma-color-border);
@@ -3479,6 +3514,7 @@ fig-input-fill {
     &:hover {
       background-color: transparent !important;
       box-shadow: none !important;
+      outline: 0 !important;
       border: 0 !important;
       --selected: 0;
     }
@@ -3500,6 +3536,13 @@ fig-input-fill {
     flex-basis: 3rem;
     box-shadow: inset 1px 0 0 0 var(--figma-color-bg) !important;
     background-color: transparent !important;
+    outline: 0 !important;
+
+    &:focus,
+    &:focus-within,
+    &:hover {
+      outline: 0 !important;
+    }
   }
 
   fig-field:not([direction="vertical"]) & {
@@ -3520,13 +3563,17 @@ fig-input-gradient {
   fig-handle[type="color"]{
     --height: var(--fig-input-gradient-handle-size);
     --width: var(--fig-input-gradient-handle-size);
+    --fig-handle-padding: 0.125rem;
+   
   }
 
   &:focus,
-  &:active,
-  &:focus-within {
-    outline: 1px solid var(--figma-color-border-selected) !important;
-    outline-offset: -1px !important;
+  &:active {
+    outline: var(--figma-focus-outline) !important;
+    outline-offset: var(--figma-focus-outline-offset) !important;
+  }
+  &:focus-within:not(:focus) {
+    outline: 0 !important;
   }
   &[mode="tip"]{
     fig-handle[type="color"]{
@@ -3536,6 +3583,7 @@ fig-input-gradient {
       --fig-handle-outline-color: transparent;
       --fig-handle-shadow: none;
       --fig-handle-inner-outline: none;
+      
       fig-color-tip{
         bottom: calc(100%);
       }
@@ -3546,16 +3594,11 @@ fig-input-gradient {
     --fig-input-gradient-chit-border-radius: var(--radius-medium);
   }
 
-  &[edit="false"] {
+  &[edit="false"],
+  &[edit="picker"] {
     pointer-events: none;
     --fig-input-gradient-chit-border-radius: var(--radius-medium);
 
-    &:focus,
-    &:active,
-    &:focus-within {
-      outline: none !important;
-    }
-
   }
 
   &[edit="picker"] {
@@ -3648,6 +3691,10 @@ fig-input-palette {
       height: var(--palette-colors-height);
       fig-input-color {
         width: 100%;
+        &:focus,
+        &:focus-within {
+          outline: 0 !important;
+        }
         fig-chit {
           --border-radius: 0px;
           --width: 100%;
@@ -3677,6 +3724,15 @@ fig-input-palette {
       
     }
   }
+  &:focus-visible {
+    outline: 0;
+  }
+  &:focus-visible > .palette-colors-inline,
+  > .palette-colors-inline:focus-visible,
+  &:has(> .palette-colors-inline :focus-visible) > .palette-colors-inline {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
+  }
   &[open]:not([open="false"]):not([edit="false"]) {
     grid-template-areas:
     "inline    button"
@@ -3889,6 +3945,7 @@ fig-segmented-control {
   }
 
   & fig-segment {
+    --figma-focus-outline-offset: 0;
     flex: 1 1 0;
     min-width: 0;
     display: block;
@@ -3913,6 +3970,11 @@ fig-segmented-control {
       box-shadow: 0 0 0 1px var(--figma-color-border);
     }
 
+    &:focus-visible {
+      outline: var(--figma-focus-outline);
+      outline-offset: var(--figma-focus-outline-offset);
+    }
+
     svg {
       *[fill] {
         fill: currentColor;
@@ -4082,6 +4144,7 @@ fig-joystick {
     line-height: 1;
     letter-spacing: 0.01em;
     font-weight: 700;
+    text-transform: uppercase;
     text-shadow:
       1px 0 0 var(--figma-color-bg-secondary),
       -1px 0 0 var(--figma-color-bg-secondary),
@@ -4176,147 +4239,12 @@ fig-joystick {
       var(--figma-color-bg-secondary);
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
   }
-  .fig-input-joystick-plane-container:focus .fig-input-joystick-guides {
-    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
-  }
-
   fig-handle {
     position: absolute;
     z-index: 4;
   }
 }
 
-/* Layer */
-fig-layer {
-  --indent: var(--spacer-3);
-  display: block;
-  color: var(--figma-color-text);
-  position: relative;
-  user-select: none;
-  width: 100%;
-  padding: 0 var(--spacer-3);
-  border-radius: var(--radius-medium);
-
-  /* When layer has children */
-  &:has(fig-layer) {
-    & > .fig-layer-row {
-      & > .fig-layer-chevron {
-        visibility: visible;
-      }
-    }
-  }
-
-  & > .fig-layer-row {
-    display: flex;
-    align-items: center;
-    gap: var(--spacer-1);
-    padding: var(--spacer-1) var(--spacer-2);
-    height: var(--spacer-4);
-    border-radius: var(--radius-medium);
-    position: relative;
-
-    /* Chevron element - injected by JS when layer has children */
-    .fig-layer-chevron {
-      mask-image: var(--icon-16-chevron);
-      mask-size: contain;
-      mask-repeat: no-repeat;
-      mask-position: center;
-      display: flex;
-      visibility: hidden;
-      background: var(--figma-color-text-tertiary);
-      width: var(--spacer-3);
-      height: var(--spacer-3);
-      flex-shrink: 0;
-      transition: transform 0.15s;
-      position: absolute;
-      left: calc(var(--spacer-3) * -1);
-      top: var(--spacer-1);
-      rotate: -90deg;
-    }
-
-    &:hover {
-      background: var(--figma-color-bg-secondary);
-
-      .fig-layer-actions {
-        opacity: 1;
-      }
-    }
-
-    /* Layer icon */
-    .fig-layer-icon {
-      flex-shrink: 0;
-      width: var(--spacer-3);
-      height: var(--spacer-3);
-      color: var(--figma-color-icon-tertiary);
-      margin-left: calc(var(--spacer-1) * -1);
-    }
-
-    > label {
-      flex: 1;
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      color: var(--figma-color-text);
-    }
-  }
-
-  .fig-layer-actions {
-    display: flex;
-    margin-right: calc(-1 * var(--spacer-1));
-    gap: 0;
-    opacity: 0;
-    transition: opacity 0.15s;
-    flex-shrink: 0;
-
-    > * {
-      flex-shrink: 0;
-    }
-  }
-
-  /* Nested layers indentation */
-  > fig-layer {
-    padding: 0;
-    margin-top: 1px;
-    .fig-layer-row {
-      padding-left: var(--indent);
-    }
-  }
-
-  /* Collapsed state - hide children */
-  &:not([open]) > fig-layer,
-  &[open="false"] > fig-layer {
-    display: none;
-  }
-
-  &[open]:not([open="false"]) {
-    /* Rotate chevron when open */
-    & > .fig-layer-row > .fig-layer-chevron {
-      rotate: 0deg;
-    }
-  }
-
-  /* Dimmed when not visible */
-  &[visible="false"] > .fig-layer-row {
-    & > label {
-      color: var(--figma-color-text-tertiary);
-    }
-  }
-
-  /* Selected state */
-  &[selected]:not([selected="false"]) {
-    /* Open with children */
-    /*&:has(fig-layer) {
-      background: var(--figma-color-bg-selected-secondary);
-    }*/
-    & > .fig-layer-row {
-      background: var(--figma-color-bg-selected);
-      & > .fig-layer-icon {
-        color: var(--figma-color-icon);
-      }
-    }
-  }
-}
 @keyframes fig-shimmer-text {
   from {
     background-position: var(--fig-shimmer-text-from, 100% 0%);
@@ -4740,6 +4668,11 @@ fig-choice {
     background-color: var(--figma-color-bg-secondary);
   }
 
+  &:focus-visible {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
+  }
+
   &[padding]:not([padding="false"]) {
     --fig-choice-padding: var(--spacer-2);
   }
@@ -4775,7 +4708,7 @@ fig-handle {
   --fill: transparent;
   --border-radius: 50%;
   --fig-handle-bg: var(--handle-color);
-  --fig-handle-checkerboard: var(--checkerboard);
+  --fig-handle-checkerboard: var(--checkerboard-handle);
   --fig-handle-height: var(--width);
   --fig-handle-hit-area-opacity: 0;
   --fig-handle-hit-area-size: 0;
@@ -4810,8 +4743,6 @@ fig-handle {
     width: 100%;
     height: 100%;
     background: var(--fig-handle-inner-bg);
-    background-position: 0 0;
-    background-size: calc(var(--fig-handle-width) - var(--fig-handle-padding) * 2) calc(var(--fig-handle-height) - var(--fig-handle-padding) * 2);
     border-radius: var(--fig-handle-inner-radius);
     box-shadow: var(--fig-handle-inner-shadow);
     outline: var(--fig-handle-inner-outline);
@@ -4836,6 +4767,13 @@ fig-handle {
   &:hover,
   &[selected]:not([selected="false"]) {
     --fig-handle-outline-color: var(--figma-color-border-selected);
+    --fig-handle-outline: 2px solid var(--fig-handle-outline-color);
+  }
+
+  &:focus-visible {
+    --figma-focus-outline-offset: 1px;
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
   }
 
   /* Default handle (no type) hover/selected */
@@ -4843,6 +4781,7 @@ fig-handle {
   &[selected]:not([selected="false"]):not([type]) {
    --fig-handle-inner-bg:  var(--figma-color-bg-brand);
    --fig-handle-outline-color: var(--figma-color-border-selected);
+   --fig-handle-outline: 2px solid var(--fig-handle-outline-color);
   }
 
   &[type="canvas"]{
@@ -4863,8 +4802,9 @@ fig-handle {
       --fig-handle-inner-outline-offset: -2px;
       --fig-handle-shadow: var(--figma-elevation-200-canvas);
     }
+    &.dragging,
     &:active{
-      --fig-handle-padding: 2px;
+      --fig-handle-padding: 2px !important;
       --fig-handle-inner-bg: var(--figma-color-bg-brand);
     }
     &[selected]:not([selected="false"]){
@@ -4877,8 +4817,7 @@ fig-handle {
   &[tip="add"],
   &[tip="remove"] {
     --fig-handle-inner-bg: linear-gradient(var(--fill), var(--fill)), var(--fig-handle-checkerboard);
-    --fig-handle-padding: 1px;
-    --fig-handle-shadow: none;
+    --fig-handle-padding: 0.25rem;
     --fig-handle-inner-outline: none;
     position: relative;
     overflow: visible;
@@ -4891,24 +4830,6 @@ fig-handle {
       z-index: 10;
     }
   }
-  &[type="color"]{
-    --width: 0.75rem;
-    --height: 0.75rem;
-    &:hover,
-    &:focus-within,
-    &[selected]:not([selected="false"]){
-      --width: 1rem;
-      --height: 1rem;
-      --fig-handle-outline-color: transparent;
-    }
-    &:active{
-      --fig-handle-padding: 2px;
-    }
-    &[selected]:not([selected="false"]){
-      --fig-handle-padding: 1px;
-    }
-  }
-
   &[disabled]:not([disabled="false"]),
   &[aria-disabled="true"] {
     --fig-handle-outline-color: transparent;
@@ -5037,7 +4958,8 @@ fig-menu-item {
     }
   }
 
-  &[disabled]:not([disabled="false"]) {
+  &[disabled]:not([disabled="false"]),
+  &[aria-disabled="true"] {
     opacity: 0.4;
     pointer-events: none;
   }