@rogieking/figui3 6.15.0 → 6.17.0

package/fig-lab.css

@@ -83,6 +83,124 @@ propskit-switch {
   }
 }
 
+propskit-color {
+  --propskit-color-height: 2rem;
+  --propskit-color-vertical-padding: var(--spacer-1);
+  --propskit-color-horizontal-padding: var(--spacer-3);
+  --figma-focus-outline-offset: 1px;
+
+  display: block;
+  width: 100%;
+  height: var(--propskit-color-height);
+  padding: var(--propskit-color-vertical-padding)
+    var(--propskit-color-horizontal-padding);
+
+  &[size="large"] {
+    --propskit-color-vertical-padding: 0px;
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+
+    label {
+      color: var(--figma-color-text-disabled);
+    }
+  }
+
+  fig-field:not([direction="vertical"]) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    height: 100%;
+    padding-left: var(--spacer-2);
+    border-radius: var(--radius-medium);
+    background-color: var(--figma-color-bg-secondary);
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+    }
+
+    &:hover::after {
+      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    }
+
+    & > label {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      flex: 0 0 auto;
+      width: auto;
+      max-width: 50%;
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      color: var(--figma-color-text-secondary);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: none;
+
+      fig-icon:first-child {
+        margin-left: calc(var(--spacer-1) * -1);
+      }
+    }
+
+    fig-input-color {
+      --figma-focus-outline-offset: 1px;
+
+      position: relative;
+      align-self: center;
+      flex: 0 1 auto !important;
+      width: fit-content !important;
+      max-width: none;
+      min-width: 0;
+      margin-left: auto;
+      height: calc(
+        var(--propskit-color-height) - var(--propskit-color-vertical-padding) * 2
+      );
+      border-radius: var(--radius-medium);
+      background-color: transparent;
+      box-shadow: none;
+
+      > .input-combo {
+        flex: 0 0 auto;
+        width: auto;
+      }
+
+      fig-input-text {
+        flex: 0 0 3.25rem;
+        width: 3.25rem;
+
+        input {
+          field-sizing: fixed;
+          box-sizing: border-box;
+          width: 100%;
+          min-width: 0;
+        }
+      }
+
+      fig-input-number {
+        flex: 0 0 3rem;
+        width: 3rem;
+        min-width: 3rem;
+
+        input {
+          field-sizing: fixed;
+          box-sizing: border-box;
+          width: 100%;
+          min-width: 0;
+        }
+      }
+    }
+  }
+}
+
 propskit-select {
   --propskit-select-height: 2rem;
   --propskit-select-vertical-padding: var(--spacer-1);
@@ -148,21 +266,21 @@ propskit-select {
       }
     }
 
-    fig-dropdown {
+    fig-select {
       position: relative;
       flex: 0 0 auto;
       width: fit-content;
       min-width: 0;
       margin-left: auto;
       border-radius: var(--radius-medium);
+      background: transparent;
+      box-shadow: none;
 
-      select {
-        field-sizing: content;
-        width: auto;
-        min-width: 0;
-        background: transparent;
-        box-shadow: none;
+      &::after {
+        right: 0;
       }
+
+      --fig-select-trigger-width: auto;
     }
   }
 }
@@ -1120,3 +1238,269 @@ body.fig-reorder-dragging * {
 .fig-reorder-indicator[data-axis="horizontal"] {
   width: 2px;
 }
+
+/* Select — host chrome; trigger/listbox live in shadow (options slotted) */
+fig-select {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  min-width: 0;
+  height: var(--spacer-4);
+  border-radius: var(--radius-medium);
+  background-color: var(--figma-color-bg);
+  color: var(--figma-color-text);
+  box-shadow: inset 0 0 0 1px var(--figma-color-border);
+
+  &[full]:not([full="false"]) {
+    display: flex;
+    width: 100%;
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+    &::after {
+      background-color: var(--figma-color-icon-disabled);
+    }
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    right: 0.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1rem;
+    height: 1rem;
+    mask-image: var(--icon-16-chevron);
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    background-color: var(--figma-color-icon);
+    pointer-events: none;
+    z-index: 1;
+  }
+}
+
+/*
+ * Internal listbox is a fig-popup inside fig-select's shadow, so document
+ * dialog[is="fig-popup"] rules don't apply. Expose part=listbox and mirror
+ * the menu-theme popup chrome (same tokens as components.css).
+ */
+fig-select::part(listbox) {
+  --z-index: 999999;
+  --fig-popup-radius: var(--radius-large);
+  --fig-popup-bg-color: var(--figma-color-bg-menu);
+
+  z-index: var(--z-index);
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  padding: 0;
+  overflow: hidden;
+  border-radius: var(--fig-popup-radius);
+  background-color: var(--fig-popup-bg-color);
+  color: var(--figma-color-text-menu);
+  color-scheme: dark;
+  box-shadow: var(--figma-elevation-100);
+  /* width/min/max set in JS — ::part width rules override element.style. */
+  max-height: min(20rem, calc(100vh - 1rem));
+  height: max-content;
+}
+
+/* Panel is the scroller; overflow uses top/bottom buttons (fig-chooser pattern). */
+fig-select-options {
+  --fig-select-overflow-size: var(--spacer-4);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  max-width: 100%;
+  max-height: min(20rem, calc(100vh - 1rem));
+  /* No block padding — sticky overflow buttons must sit flush to the popup edges. */
+  padding: 0;
+  overflow: hidden auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  & > :not(.fig-overflow) {
+    flex-shrink: 0;
+  }
+
+  /* List breathing room (not on the scroller itself). */
+  & > :not(.fig-overflow):first-child,
+  & > .fig-overflow-start + :not(.fig-overflow) {
+    margin-top: var(--spacer-2);
+  }
+
+  & > :not(.fig-overflow):last-child,
+  & > :not(.fig-overflow):has(+ .fig-overflow-end) {
+    margin-bottom: var(--spacer-2);
+  }
+
+  & > .fig-overflow {
+    position: sticky;
+    left: 0;
+    flex: 0 0 var(--fig-select-overflow-size);
+    width: 100%;
+    height: var(--fig-select-overflow-size);
+    margin: 0;
+    z-index: 3;
+    /* Menu chrome — not option hover (bg-menu-hover is brand blue). */
+    color: var(--figma-color-text-menu);
+    background: var(--figma-color-bg-menu) !important;
+
+    &::before {
+      inset: 0;
+      border-radius: 0;
+      background: var(--figma-color-bg-menu) !important;
+    }
+
+    &:hover::before {
+      background: light-dark(
+          rgba(0, 0, 0, 0.06),
+          rgba(255, 255, 255, 0.08)
+        )
+        !important;
+    }
+
+    &:hover {
+      color: var(--figma-color-text-menu);
+    }
+  }
+
+  & > .fig-overflow-start {
+    order: -1;
+    top: 0;
+    margin-block-end: calc(-1 * var(--fig-select-overflow-size));
+
+    &::before {
+      border-radius: var(--radius-large) var(--radius-large) 0 0;
+    }
+
+    .fig-overflow-chevron {
+      rotate: 180deg;
+    }
+  }
+
+  & > .fig-overflow-end {
+    order: 1;
+    bottom: 0;
+    margin-block-start: calc(-1 * var(--fig-select-overflow-size));
+
+    &::before {
+      border-radius: 0 0 var(--radius-large) var(--radius-large);
+    }
+  }
+
+  & > fig-menu-separator {
+    --fig-menu-separator-color: var(--figma-color-border-menu);
+    --fig-menu-separator-label-color: var(--figma-color-text-menu-secondary);
+    /* Align label with option text (padding + checkmark column). */
+    --fig-menu-item-padding: calc(var(--spacer-1) * 2 + var(--spacer-1) + 1rem);
+    &[label]:not([label=""]) {
+      padding-left: var(--spacer-5);
+      padding-right: var(--spacer-2);
+    }
+  }
+}
+
+/*
+[label]:not([label=""]) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    height: auto;
+    margin: var(--spacer-2) 0;
+    margin-bottom: var(--spacer-1);
+    padding: 0 var(--spacer-2) 0 var(--fig-menu-item-padding, var(--spacer-4));
+    background: transparent;
+
+    &::before {
+      content: "";
+      display: block;
+      height: 1px;
+      margin-left: calc(-1 * var(--fig-menu-item-padding, var(--spacer-4)));
+      margin-right: calc(-1 * var(--spacer-2));
+      background: var(--fig-menu-separator-color);
+    }
+
+    &::after {
+      content: attr(label);
+      display: block;
+      color: var(--fig-menu-separator-label-color);
+      line-height: var(--spacer-4);
+      min-height: var(--spacer-4);
+    }
+  }*/
+
+fig-select-option {
+  /* Match fig-dropdown[experimental~="modern"] option + option::checkmark */
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-1);
+  position: relative;
+  height: var(--spacer-4);
+  padding: 0 var(--spacer-2);
+  border-radius: var(--radius-medium);
+  color: var(--figma-color-text-menu);
+  font-weight: var(--body-medium-fontWeight);
+  cursor: default;
+  user-select: none;
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    inset: 0 var(--spacer-2);
+    border-radius: var(--radius-medium);
+    z-index: -1;
+    background-color: transparent;
+  }
+
+  &::after {
+    content: "";
+    display: block;
+    flex: 0 0 1rem;
+    order: -1;
+    width: 1rem;
+    height: 1rem;
+    margin-left: var(--spacer-1);
+    background-color: currentColor;
+    -webkit-mask-image: var(--icon-16-checkmark);
+    mask-image: var(--icon-16-checkmark);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    visibility: hidden;
+  }
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    &::before {
+      background-color: var(--figma-color-bg-menu-hover);
+    }
+  }
+
+  &[selected]:not([selected="false"])::after,
+  &[aria-selected="true"]::after {
+    visibility: visible;
+  }
+
+  &[disabled]:not([disabled="false"]),
+  &[aria-disabled="true"] {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}