@rogieking/figui3 9.0.7 → 9.0.9

package/README.md

@@ -702,6 +702,7 @@ Tabs use `role="tablist"` / `role="tab"` and roving focus. Use `content="#panel-
 | `value` | string | — | Selected segment value |
 | `animated` | boolean | `false` | Animate indicator transitions |
 | `sizing` | string | `"equal"` | `"equal"` or `"auto"` width mode |
+| `size` | string | — | Set to `"large"` for a 32px-tall control |
 
 **Events:** `input`, `change` — detail contains the selected value.
 

package/components.css

@@ -1365,7 +1365,6 @@ fig-tabs,
 /* Avatar */
 fig-avatar,
 .fig-avatar {
-  contain: layout paint;
   --size: 1.5rem;
   width: var(--size);
   flex-shrink: 0;
@@ -1873,10 +1872,6 @@ fig-media-controls {
     align-items: center;
   }
 
-  fig-icon {
-    contain: none;
-  }
-
   &[overlay]:not([overlay="false"]) {
     border-radius: var(--radius-medium);
     background-color: var(--figma-color-bg);
@@ -2479,7 +2474,6 @@ input[type="checkbox"].switch {
   --width: 2rem;
   --height: 1rem;
   --figma-focus-outline-offset: 1px;
-  contain: strict;
   display: inline-flex;
   margin: 0;
   vertical-align: middle;
@@ -2642,7 +2636,6 @@ label.checkbox:has([type="checkbox"]) {
 
 /* Radio */
 input[type="radio"] {
-  contain: strict;
   --figma-focus-outline-offset: 1px;
   appearance: none;
   border-radius: 0.5rem;
@@ -4520,13 +4513,13 @@ 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);
   border: 0;
   border-radius: var(--radius-medium);
-  height: 1.5rem;
+  --fig-segmented-control-height: 1.5rem;
+  height: var(--fig-segmented-control-height);
   padding: 1px;
   gap: 0;
   align-items: stretch;
@@ -4560,7 +4553,7 @@ fig-segmented-control {
   & fig-segment {
     --figma-focus-outline-offset: 0;
     flex: 1 1 0;
-    min-width: 0;
+    min-width: var(--fig-segmented-control-height);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -4577,6 +4570,10 @@ fig-segmented-control {
     transition: none;
     text-transform: capitalize;
 
+    &:has(> :is(svg, fig-icon):only-child) {
+      padding: 0;
+    }
+
     &[selected]:not([selected="false"]),
     &[selected="true"] {
       color: var(--figma-color-text);
@@ -4603,8 +4600,17 @@ fig-segmented-control {
   &:not([sizing]),
   &[sizing=""],
   &[sizing="equal"] {
+    display: inline-grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+
     & fig-segment {
-      flex: 1 1 0;
+      flex: none;
+    }
+
+    &[full]:not([full="false"]) {
+      display: grid;
+      grid-auto-columns: minmax(0, 1fr);
     }
   }
 
@@ -4637,11 +4643,7 @@ fig-segmented-control {
   }
 
   &[size="large"] {
-    height: var(--spacer-5);
-
-    & fig-segment {
-      padding: 0 var(--spacer-3);
-    }
+    --fig-segmented-control-height: var(--spacer-5);
   }
 
   &[disabled]:not([disabled="false"]) {
@@ -5370,9 +5372,6 @@ fig-skeleton {
 
 .fig-mask-icon,
 fig-icon {
-  /* size only — paint containment skips mask-image when `name` / `--icon` updates
-     until a sibling hover (e.g. fig-preview) forces a repaint. */
-  contain: size;
   --size: var(--spacer-4);
   --icon: var(--icon-24-add);
 
@@ -5428,9 +5427,13 @@ fig-chooser {
   --fig-chooser-gap: var(--spacer-2);
   --fig-chooser-inline-padding: var(--spacer-2);
   --fig-chooser-block-padding: var(--spacer-2);
-  --fig-chooser-inline-margin: var(--spacer-3);
+  --fig-chooser-inline-margin: 0px;
+  --fig-choice-selection-ring-width: 2px;
+  --fig-choice-selection-ring-gutter: calc(
+    var(--fig-choice-selection-ring-width) * 2
+  );
 
-  box-sizing: border-box;
+  box-sizing: content-box;
   display: flex;
   flex-direction: column;
   gap: var(--fig-chooser-gap);
@@ -5439,8 +5442,12 @@ fig-chooser {
   max-width: inherit;
   min-width: 0;
   overflow: hidden auto;
-  padding: 0;
-  margin: 0 var(--fig-chooser-inline-margin);
+  padding: var(--fig-choice-selection-ring-gutter);
+  margin: calc(var(--fig-choice-selection-ring-gutter) * -1)
+    calc(
+      var(--fig-chooser-inline-margin) -
+        var(--fig-choice-selection-ring-gutter)
+    );
   scroll-behavior: smooth;
   scrollbar-width: none;
   width: calc(100% - var(--fig-chooser-inline-margin) * 2);
@@ -5454,7 +5461,7 @@ fig-chooser {
   }
 
   fig-field > &{
-    --fig-chooser-inline-margin:0;
+    --fig-chooser-inline-margin: 0px;
   }
 
   > :not(.fig-overflow) {
@@ -5517,15 +5524,17 @@ fig-chooser {
       flex: 0 0 var(--chooser-fade-size);
       height: auto;
       width: var(--chooser-fade-size);
-      margin-top: 0;
-      margin-bottom: 0;
+      margin-top: calc(var(--fig-choice-selection-ring-gutter) * -1);
+      margin-bottom: calc(var(--fig-choice-selection-ring-gutter) * -1);
     }
 
     > .fig-overflow-start {
       box-shadow: 1px 0 0 0 var(--figma-color-bordertranslucent);
-      inset-inline-start: 0;
-      left: 0;
-      margin-block-end: 0;
+      inset-inline-start: calc(
+        var(--fig-choice-selection-ring-gutter) * -1
+      );
+      left: calc(var(--fig-choice-selection-ring-gutter) * -1);
+      margin-block-end: calc(var(--fig-choice-selection-ring-gutter) * -1);
       margin-inline-end: calc(-1 * var(--chooser-fade-size));
       right: auto;
       top: 0;
@@ -5542,11 +5551,11 @@ fig-chooser {
     > .fig-overflow-end {
       bottom: auto;
       box-shadow: -1px 0 0 0 var(--figma-color-bordertranslucent);
-      inset-inline-end: 0;
+      inset-inline-end: calc(var(--fig-choice-selection-ring-gutter) * -1);
       left: auto;
-      margin-block-start: 0;
+      margin-block-start: calc(var(--fig-choice-selection-ring-gutter) * -1);
       margin-inline-start: calc(-1 * var(--chooser-fade-size));
-      right: 0;
+      right: calc(var(--fig-choice-selection-ring-gutter) * -1);
       top: 0;
 
       &:before {
@@ -5558,17 +5567,27 @@ fig-chooser {
       }
     }
   }
+  &:not([layout]),
+  &[layout=""],
   &[layout="vertical"], 
   &[layout="grid"]{
    &>.fig-overflow{
-    margin-left:0;
-    margin-right:0;
+    margin-left: calc(var(--fig-choice-selection-ring-gutter) * -1);
+    margin-right: calc(var(--fig-choice-selection-ring-gutter) * -1);
+    width: calc(100% + var(--fig-choice-selection-ring-gutter) * 2);
+   }
+   &>.fig-overflow-start {
+    top: calc(var(--fig-choice-selection-ring-gutter) * -1);
+   }
+   &>.fig-overflow-end {
+    bottom: calc(var(--fig-choice-selection-ring-gutter) * -1);
    }
   }
 
   &[layout="grid"] {
     display: grid;
-    gap: var(--fig-chooser-gap);
+    column-gap: var(--fig-chooser-gap);
+    row-gap: 0;
     grid-template-columns: repeat(
       var(--fig-chooser-grid-columns, 2),
       minmax(0, 1fr)
@@ -5578,20 +5597,15 @@ fig-chooser {
 
     > :not(.fig-overflow) {
       margin: 0;
+      margin-block-start: var(--fig-chooser-gap);
     }
 
-    > :not(.fig-overflow) + :not(.fig-overflow) {
-      margin: 0;
-    }
-
-    > .fig-overflow-start + :not(.fig-overflow),
-    > :not(.fig-overflow):has(+ .fig-overflow-end) {
-      margin: 0;
+    > [data-fig-chooser-first-row] {
+      margin-block-start: 0;
     }
 
     > .fig-overflow {
       grid-column: 1 / -1;
-      margin-inline: 0;
     }
 
     > .fig-overflow-start {
@@ -5694,7 +5708,6 @@ fig-card {
   }
 
   .fig-card-label {
-    font-size: var(--font-size-small);
     line-height: var(--line-height);
     color: var(--figma-color-text);
     min-width: 0;
@@ -5716,7 +5729,6 @@ fig-card {
   .fig-card-sublabel {
     box-sizing: border-box;
     display: block;
-    font-size: var(--font-size-small);
     line-height: var(--line-height);
     color: var(--figma-color-text-secondary);
     padding-inline: var(--spacer-1);
@@ -5765,7 +5777,6 @@ fig-card {
 }
 
 fig-choice {
-  --fig-choice-selection-ring-width: 2px;
   --fig-choice-padding: 0px;
   --fig-choice-text-padding-inline: var(--spacer-2);
   --fig-choice-border-radius: var(--radius-medium);
@@ -5813,9 +5824,9 @@ fig-choice {
       );
       pointer-events: none;
       z-index: 1;
-      outline: var(--fig-choice-selection-ring-width) solid
+      outline: var(--fig-choice-selection-ring-width, 2px) solid
         var(--figma-color-border-selected);
-      outline-offset: calc(var(--fig-choice-selection-ring-width) * -1);
+      outline-offset: var(--fig-choice-selection-ring-width, 2px);
     }
     background-color: var(--figma-color-bg-secondary);
   }
@@ -5902,6 +5913,11 @@ fig-handle {
     outline-offset: var(--figma-focus-outline-offset);
   }
 
+  &[data-fig-pointer-focus]:focus-visible {
+    outline: var(--fig-handle-outline);
+    outline-offset: var(--fig-handle-outline-offset);
+  }
+
   /* Default handle (no type) hover/selected */
   &:hover:not([type]),
   &[selected]:not([selected="false"]):not([type]) {
@@ -5995,7 +6011,6 @@ fig-color-tip {
   --tip-selection-scale: 1;
   --beak-offset: 50%;
 
-  contain: layout;
   inset: unset;
   display: inline-grid;
   place-items: center;
@@ -6087,7 +6102,7 @@ fig-menu::part(listbox) {
 }
 
 fig-menu-item {
-  --fig-menu-item-padding: var(--spacer-1) var(--spacer-4);
+  --fig-menu-item-padding: var(--spacer-1,0.25rem) var(--spacer-4,1rem);
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
@@ -6161,14 +6176,14 @@ fig-menu-item {
 :is(fig-separator, fig-menu-separator) {
   --fig-separator-color: var(--figma-color-border);
   --fig-separator-label-color: var(--figma-color-text-secondary);
-  --fig-separator-padding: 0 var(--spacer-3);
+  --fig-separator-padding: 0 var(--spacer-4,1rem);
 
   display: block;
   box-sizing: border-box;
   flex-shrink: 0;
   width: 100%;
   height: 1px;
-  margin: var(--spacer-2) 0;
+  margin: var(--spacer-2,0.5rem) 0;
   padding: var(--fig-separator-padding);
   border: 0;
   background: var(--fig-separator-color);
@@ -6199,17 +6214,17 @@ fig-menu-item {
   &[label]:not([label=""]) {
     display: flex;
     flex-direction: column;
-    gap: var(--spacer-2);
+    gap: var(--spacer-2,0.5rem);
     height: auto;
-    margin: var(--spacer-2) 0;
-    margin-bottom: var(--spacer-1);
+    margin: var(--spacer-2,0.5rem) 0;
+    margin-bottom: var(--spacer-1,0.25rem);
     background: transparent;
 
     &::before {
       content: "";
       display: block;
       height: 1px;
-      margin-inline: calc(-1 * var(--spacer-3));
+      margin-inline: calc(-1 * var(--spacer-4,1rem));
       background: var(--fig-separator-color);
     }
 
@@ -6217,14 +6232,8 @@ fig-menu-item {
       content: attr(label);
       display: block;
       color: var(--fig-separator-label-color);
-      line-height: var(--spacer-4);
-      min-height: var(--spacer-4);
-    }
-
-    &:first-child{
-      &::before {
-        display: none;
-      }
+      line-height: var(--spacer-4,1rem);
+      min-height: var(--spacer-4,1rem);
     }
 
     &[sticky]:not([sticky="false"]) {
@@ -6234,14 +6243,14 @@ fig-menu-item {
       background: var(--fig-popup-bg-color, var(--figma-color-bg));
 
       &[stuck] {
-        --fig-separator-padding: var(--spacer-2) var(--spacer-3);
+        --fig-separator-padding: var(--spacer-2,0.5rem) var(--spacer-4,1rem);
         &::before {
           display: none;
         }
       }
 
       :is(fig-select-options, .fig-menu-options, fig-menu).overflow-start > & {
-        top: var(--fig-vertical-overflow-size, var(--spacer-4));
+        top: var(--fig-vertical-overflow-size, var(--spacer-4,1rem));
       }
     }
   }