@rogieking/figui3 6.25.0 → 6.26.0

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

@@ -87,6 +87,8 @@ export default defineConfig({
 - Preserve value shape expectations:
   - `fig-input-color` expects solid color data (`detail.color`, optional `detail.alpha`) from the picker.
   - `fig-fill-picker` custom modes use JSON with `type` set to mode name and remaining data in payload.
+- Direct color events expose additive `{ color, alpha, opacity }` aliases: opaque `#RRGGBB`, `0–1`, and `0–100`, respectively.
+- Keep `fig-input-color`'s legacy `value`, `hex`, and `rgba` event-detail fields unchanged; consume the aliases for a shared contract.
 
 ## Critical Rules
 
@@ -180,7 +182,7 @@ attributeChangedCallback(name, oldValue, newValue) {
 ```txt
 Event contract quick map:
 - fig-slider: input/change -> current value on e.target.value
-- fig-input-color: input/change -> value on e.target.value, structured color via e.detail (when available)
+- fig-input-color: input/change -> legacy value/hex/rgba plus color/alpha/opacity aliases in e.detail
 - fig-input-fill / fig-fill-picker: input/change -> fill payload in e.detail
 ```
 

package/README.md

@@ -559,8 +559,8 @@ A compact solid-color swatch. Uses `<fig-fill-picker>` when the optional picker
 
 | Event | Detail |
 |---|---|
-| `input` | `{ color, opacity? }` — while editing |
-| `change` | `{ color, opacity? }` — on commit |
+| `input` | `{ color, alpha, opacity }` — while editing |
+| `change` | `{ color, alpha, opacity }` — on commit |
 | `add` | — (when `control="add"` is clicked) |
 | `remove` | — (when `control="remove"` is clicked) |
 
@@ -588,8 +588,10 @@ A compact solid-color swatch. Uses `<fig-fill-picker>` when the optional picker
 
 | Event | Detail |
 |---|---|
-| `input` | `{ color, alpha, hsv: { h, s, v, a } }` |
-| `change` | `{ color, alpha, hsv: { h, s, v, a } }` |
+| `input` | `{ value, hex, rgba, color, alpha, opacity }` |
+| `change` | `{ value, hex, rgba, color, alpha, opacity }` |
+
+`value`, `hex`, and `rgba` retain their legacy values. The additive aliases use opaque `#RRGGBB` for `color`, `0–1` for `alpha`, and `0–100` for `opacity`.
 
 ```html
 <fig-input-color value="#FF5733" text="true"></fig-input-color>
@@ -959,8 +961,8 @@ A draggable handle element. Positioned on a `drag-surface` container with axis c
 |---|---|
 | `input` | `{ x, y, px, py, shiftKey }` — while dragging |
 | `change` | `{ x, y, px, py }` — on release |
-| `input` | `{ color, opacity }` — while editing a `type="color"` handle |
-| `change` | `{ color, opacity }` — when committing a `type="color"` handle |
+| `input` | `{ color, alpha, opacity }` — while editing a `type="color"` handle |
+| `change` | `{ color, alpha, opacity }` — when committing a `type="color"` handle |
 | `add` | — (when `tip="add"`) |
 | `remove` | — (when `tip="remove"`) |
 | `hitareadown` | `{ originalEvent }` — when `hit-area-mode="delegate"` and the hit area is clicked |
@@ -1008,6 +1010,8 @@ A composite point control with optional radius circle, angle handle, or second p
 | `input` | Value object (shape depends on type) — while dragging |
 | `change` | Value object (shape depends on type) — on release |
 
+For `type="color"`, color edits add `{ color, alpha, opacity }` to the positional value object.
+
 For `point-point`, both handles support direct drag (with a dynamic directional resize cursor) and rotation via their hit area (dragging from the hit area rotates around the opposite handle at fixed distance, with a rotate cursor).
 
 ```html
@@ -1255,6 +1259,8 @@ A thin styled layer for arbitrary visual content. Use it for generated previews,
 | `full` | boolean | `false` | Stretch to the available width |
 | `checkerboard` | boolean | `false` | Show checkerboard behind transparent content |
 
+Set `--fig-preview-background` to customize the surface color, including `transparent` to remove it.
+
 ```html
 <fig-preview full style="height: 96px">
   <canvas width="320" height="180"></canvas>
@@ -1345,7 +1351,7 @@ Use `slot="overlay"` for custom overlay controls. Slotted overlays stay as direc
 
 `<fig-card>` — [demo](https://rog.ie/figui3/#card)
 
-A media card with a truncated label, optional link, and attribute-only selection chrome. Composes a generated `fig-image` (or an authored `fig-image` / `fig-media` / `fig-preview` child).
+A media card with a truncated label, optional link, and attribute-only selection chrome. With `src`, it composes a generated `fig-image`. Without `src`, authored children stay in place and only generated label content is added.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
@@ -1368,8 +1374,13 @@ A media card with a truncated label, optional link, and attribute-only selection
 <fig-card src="photo.jpg" label="Shader pill" sublabel="Generative tools/effects" selected></fig-card>
 <fig-card src="photo.jpg" label="Open asset" href="#asset"></fig-card>
 <fig-card src="photo.jpg" label="Wide card" aspect-ratio="16/9" full></fig-card>
+<fig-card label="Custom preview">
+  <fig-preview>...</fig-preview>
+</fig-card>
 ```
 
+When `src` is omitted, authored direct children such as `fig-image`, `fig-media`, or `fig-preview` remain direct children of the card.
+
 Place cards in a CSS grid for multi-column layouts — there is no built-in columns attribute. Prefer `full` in fluid layouts for consistency with other FigUI controls.
 
 ---

package/components.css

@@ -1153,7 +1153,8 @@ fig-tabs,
 .tabs {
   --fig-overflow-size: calc(var(--spacer-4) + var(--spacer-2));
   --fig-tabs-inline-padding: 0;
-  --fig-tabs-inline-margin: var(--spacer-2-5);
+  --fig-tabs-margin-left: var(--spacer-1);
+  --fig-tabs-margin-right: var(--spacer-2);
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
@@ -1161,11 +1162,14 @@ fig-tabs,
   gap: var(--spacer-1);
   min-width: 0;
   overflow: auto hidden;
-  padding: var(--spacer-2) var(--fig-tabs-inline-padding);
-  margin: 0 var(--fig-tabs-inline-margin);
+  padding: var(--spacer-2) 0;
+  padding-inline: var(--fig-tabs-inline-padding);
+  margin: 0;
+  margin-left: var(--fig-tabs-margin-left);
+  margin-right: var(--fig-tabs-margin-right);
   position: relative;
   scrollbar-width: none;
-  width: calc(100% - var(--fig-tabs-inline-margin) * 2);
+  width: calc(100% - var(--fig-tabs-margin-left) - var(--fig-tabs-margin-right));
 
   > fig-tab {
     flex-shrink: 0;
@@ -1562,6 +1566,10 @@ fig-video {
     width: 100%;
   }
 
+  &[aspect-ratio] {
+    width: 100%;
+  }
+
   > fig-preview {
     --fig-preview-fit: var(--fig-media-fit);
     width: 100%;
@@ -3165,12 +3173,13 @@ fig-tooltip {
 
 fig-preview {
   --fig-preview-fit: contain;
+  --fig-preview-background: var(--figma-color-bg-secondary);
 
   display: block;
   place-items: center;
   min-width: 0;
   max-width: 100%;
-  background-color: var(--figma-color-bg-secondary);
+  background-color: var(--fig-preview-background);
   border-radius: var(--radius-medium);
   position: relative;
   overflow: hidden;
@@ -4992,7 +5001,9 @@ fig-chooser {
 fig-card {
   --fig-card-label-line-clamp: 1;
   --fig-card-media-radius: var(--radius-medium);
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacer-1);
   width: 100%;
   min-width: 0;
 
@@ -5000,6 +5011,12 @@ fig-card {
     width: 100%;
   }
 
+  &:is(:not([src]), [src=""]) {
+    padding: var(--spacer-1);
+    border-radius: 0.5625rem;
+    box-sizing: border-box;
+  }
+
   .fig-card-link {
     display: flex;
     flex-direction: column;
@@ -5019,17 +5036,12 @@ fig-card {
     outline-offset: var(--figma-focus-outline-offset);
   }
 
-  .fig-card-media {
-    position: relative;
-    border-radius: var(--fig-card-media-radius);
-    background: var(--figma-color-bg-secondary);
-    overflow: hidden;
-    min-width: 0;
-  }
-
-  .fig-card-media > fig-image,
-  .fig-card-media > fig-media,
-  .fig-card-media > fig-preview {
+  .fig-card-link > fig-image,
+  .fig-card-link > fig-media,
+  .fig-card-link > fig-preview,
+  &:is(:not([src]), [src=""]) > fig-image,
+  &:is(:not([src]), [src=""]) > fig-media,
+  &:is(:not([src]), [src=""]) > fig-preview {
     display: block;
     width: 100%;
     max-width: none;
@@ -5037,9 +5049,12 @@ fig-card {
     border-radius: var(--fig-card-media-radius);
   }
 
-  .fig-card-media > fig-image > fig-preview,
-  .fig-card-media > fig-media > fig-preview,
-  .fig-card-media > fig-preview {
+  .fig-card-link > fig-image > fig-preview,
+  .fig-card-link > fig-media > fig-preview,
+  .fig-card-link > fig-preview,
+  &:is(:not([src]), [src=""]) > fig-image > fig-preview,
+  &:is(:not([src]), [src=""]) > fig-media > fig-preview,
+  &:is(:not([src]), [src=""]) > fig-preview {
     width: 100%;
     max-width: none;
     border-radius: var(--fig-card-media-radius);
@@ -5092,24 +5107,39 @@ fig-card {
   &:hover:not([selected]:not([selected="false"])):not(
       [disabled]:not([disabled="false"])
     ):not([aria-disabled="true"])
-    .fig-card-link {
+    .fig-card-link,
+  &:is(:not([src]), [src=""]):hover:not(
+      [selected]:not([selected="false"])
+    ):not([disabled]:not([disabled="false"])):not([aria-disabled="true"]) {
     background: var(--figma-color-bg-secondary);
   }
 
-  &[selected]:not([selected="false"]) .fig-card-link {
+  &[selected]:not([selected="false"]) .fig-card-link,
+  &:is(:not([src]), [src=""])[selected]:not([selected="false"]) {
     background: var(--figma-color-bg-selected);
   }
 
-  &[selected]:not([selected="false"]) .fig-card-media {
+  &[selected]:not([selected="false"])
+    .fig-card-link
+    > :is(fig-image, fig-media, fig-preview),
+  &:is(:not([src]), [src=""])[selected]:not([selected="false"])
+    > :is(fig-image, fig-media, fig-preview) {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
 
   &[selected]:not([selected="false"])
-    .fig-card-media
+    .fig-card-link
+    > :is(fig-image, fig-media)
+    > fig-preview::after,
+  &[selected]:not([selected="false"])
+    .fig-card-link
+    > fig-preview::after,
+  &:is(:not([src]), [src=""])[selected]:not([selected="false"])
     > :is(fig-image, fig-media)
     > fig-preview::after,
-  &[selected]:not([selected="false"]) .fig-card-media > fig-preview::after {
+  &:is(:not([src]), [src=""])[selected]:not([selected="false"])
+    > fig-preview::after {
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
   }