@rogieking/figui3 9.3.0 → 9.4.1

package/README.md

@@ -76,6 +76,7 @@ Agent skills ship in `.cursor/skills/` (included in the npm package):
 
 - `figui3` — core `fig.js` components
 - `fig-editor` — `fig-select` and `fig-fill-picker`
+- `fig-lab` — experimental audio, wheel, reorder, canvas, and AI components
 - `propkit` — property-row composition; examples are included in `/figui3`
 
 Minimal example:
@@ -103,6 +104,7 @@ Minimal example:
 | [Radio](#radio) | `<fig-radio>` | Radio button |
 | [Switch](#switch) | `<fig-switch>` | Toggle switch |
 | [Slider](#slider) | `<fig-slider>` | Range, hue, opacity, delta, stepper |
+| [Audio Input](#audio-input) | `<fig-input-audio>` | Audio upload with responsive waveform preview |
 | [Input Wheel](#input-wheel) | `<fig-input-wheel>` | Standalone SVG tick-and-handle numeric scrubber |
 | [Text Input](#text-input) | `<fig-input-text>` | Styled text/textarea input |
 | [Number Input](#number-input) | `<fig-input-number>` | Numeric input with units |
@@ -114,10 +116,12 @@ Minimal example:
 | [Gradient Input](#gradient-input) | `<fig-input-gradient>` | Gradient editor with stops |
 | [Fill Input](#fill-input) | `<fig-input-fill>` | Solid, gradient, image, video fill |
 | [Fill Picker](#fill-picker) | `<fig-fill-picker>` | Full fill picker dialog |
+| [Toolbelt](#toolbelt) | `<fig-toolbelt>` / `<fig-toolbelt-group>` / `<fig-toolbelt-item>` | Groupable selectable toolbar with directional overflow |
 | [Tabs](#tabs) | `<fig-tabs>` / `<fig-tab>` | Tabbed navigation |
 | [Segmented Control](#segmented-control) | `<fig-segmented-control>` / `<fig-segment>` | Segmented button group |
 | [Chooser](#chooser) | `<fig-chooser>` / `<fig-choice>` | Selection list with drag scroll |
 | [Field](#field) | `<fig-field>` | Form field wrapper with layout |
+| [Group](#group) | `<fig-group>` | Named or collapsible section group |
 | [Joystick](#joystick) | `<fig-joystick>` | 2D position input |
 | [Origin Grid](#origin-grid) | `<fig-origin-grid>` | Transform-origin grid |
 | [Easing Curve](#easing-curve) | `<fig-easing-curve>` | Bezier/spring curve editor |
@@ -402,6 +406,37 @@ For `type="range"`, omitting `value` follows native range behavior and starts at
 
 ---
 
+#### Audio Input
+
+`<fig-input-audio>`
+
+An experimental single-audio upload control with a responsive waveform preview. Requires `fig-lab.js` and `fig-lab.css`. The waveform is preview-only and has no playback or seeking controls.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `url` | string | — | CORS-enabled audio URL to decode and preview |
+| `filename` | string | URL filename | Display filename for URL-backed audio |
+| `label` | string | `"Upload audio"` | Empty-state upload label |
+| `accepts` | string | `"audio/*"` | Native file accept filter |
+| `variant` | string | `"input"` | Upload button variant |
+| `disabled` | boolean | `false` | Disable upload, replacement, and removal |
+| `full` | boolean | `false` | Fill the available width |
+
+Set `--fig-input-audio-waveform-stroke-width` (default `2px`) to control waveform bar thickness.
+
+`files` and `value` mirror the composed file input. `clear()` removes the current source. The component emits bubbling, composed `input` and `change` events with `{ files }` and `{ files, cleared: true }` when cleared. URL fetch or decode failures render a quiet flat waveform fallback.
+
+```html
+<fig-input-audio></fig-input-audio>
+<fig-input-audio
+  url="https://example.com/audio.wav"
+  filename="audio.wav"
+  full
+></fig-input-audio>
+```
+
+---
+
 #### Input Wheel
 
 `<fig-input-wheel>`
@@ -735,6 +770,37 @@ Webcam JSON is `{ type: "webcam", webcam: { live, snapshot, deviceId, scaleMode,
 
 ### Selection
 
+#### Toolbelt
+
+`<fig-toolbelt>` / `<fig-toolbelt-group>` / `<fig-toolbelt-item>`
+
+A selectable horizontal or vertical toolbar that keeps authored items in the light DOM. Its internal `part="viewport"` owns scrolling and overflow fades, while generated paging buttons remain outside the masked viewport.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `value` | string | — | Selected item value |
+| `disabled` | boolean | `false` | Disable all items |
+| `layout` | `horizontal` \| `vertical` | `horizontal` | Item and keyboard-navigation direction |
+| `overflow` | `buttons` \| `scrollbar` | `scrollbar` | Generated paging buttons or buttonless scrolling; scrollbars remain hidden |
+
+Wrap related items in `fig-toolbelt-group`; adjacent groups receive a direction-aware separator. Add `aria-label` to groups when the grouping has a meaningful name. Items support `value`, `selected`, and `disabled`. `input` and `change` bubble from the toolbelt with the selected value. ArrowLeft/ArrowRight navigate horizontal toolbelts; ArrowUp/ArrowDown navigate vertical toolbelts. Home and End move to the edges; Enter or Space selects the focused item.
+
+Use `--fig-toolbelt-gap`, `--fig-toolbelt-group-gap`, `--fig-toolbelt-group-separator-color`, `--fig-toolbelt-overflow-fade-size`, `--fig-toolbelt-padding-block`, `--fig-toolbelt-padding-inline`, `--fig-toolbelt-item-height`, and `--fig-toolbelt-item-padding` to customize layout. The toolbelt fade defaults to `calc(var(--spacer-6) + var(--spacer-2))`.
+
+```html
+<fig-toolbelt layout="horizontal" overflow="buttons" value="move" aria-label="Design tools">
+  <fig-toolbelt-group aria-label="Transform tools">
+    <fig-toolbelt-item value="move" selected>Move</fig-toolbelt-item>
+    <fig-toolbelt-item value="frame">Frame</fig-toolbelt-item>
+  </fig-toolbelt-group>
+  <fig-toolbelt-group aria-label="Shape tools">
+    <fig-toolbelt-item value="shape">Shape</fig-toolbelt-item>
+  </fig-toolbelt-group>
+</fig-toolbelt>
+```
+
+---
+
 #### Tabs
 
 `<fig-tabs>` / `<fig-tab>` — [demo](https://rog.ie/figui3/#tabs)
@@ -1175,6 +1241,33 @@ A form field wrapper with flexible layout. Automatically links `<label>` to the
 
 ---
 
+#### Group
+
+`<fig-group>` — [demo](https://rog.ie/figui3/#group)
+
+A section group with an optional generated or authored header. In collapsible groups, the `h3` is the keyboard-accessible toggle and the chevron is clickable; controls placed beside the `h3` in an authored `fig-header` remain independent.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `name` | string | — | Generated header text |
+| `collapsible` | boolean | `false` | Enables collapse behavior |
+| `open` | boolean | `false` | Expanded state |
+| `compact` | boolean | `false` | Adds `compact` to the direct `fig-header` |
+
+```html
+<fig-group collapsible open>
+  <fig-header borderless>
+    <h3>Export</h3>
+    <fig-button variant="ghost" icon aria-label="Add export">
+      <fig-icon name="add"></fig-icon>
+    </fig-button>
+  </fig-header>
+  <fig-field>...</fig-field>
+</fig-group>
+```
+
+---
+
 #### Dialog
 
 `<fig-dialog>` — [demo](https://rog.ie/figui3/#dialog)

package/components.css

@@ -1290,6 +1290,70 @@ fig-tab {
     cursor: default;
   }
 }
+
+
+
+fig-toolbelt-item {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  height: var(--fig-toolbelt-item-height, var(--control-height));
+  padding-inline: var(--fig-toolbelt-item-padding, var(--spacer-2));
+  border-radius: var(--radius-medium);
+  color: var(--figma-color-text-secondary);
+  line-height: var(--line-height);
+  cursor: default;
+  user-select: none;
+
+  &:has(> fig-tooltip > fig-button[icon]:not([icon="false"])) {
+    padding-inline: 0;
+  }
+
+  &[selected]:not([selected="false"]) {
+    color: var(--figma-color-text);
+    background-color: var(--figma-color-bg-secondary);
+
+    fig-button{
+      color: var(--figma-color-icon-onbrand);
+      background-color: var(--figma-color-bg-brand);
+    }
+  }
+
+  &:hover {
+    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;
+  }
+}
+
+fig-toolbelt-group {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: stretch;
+  gap: var(--fig-toolbelt-gap);
+  min-width: 0;
+
+  & + fig-toolbelt-group {
+    margin-inline-start: calc(
+      var(--fig-toolbelt-group-gap) - var(--fig-toolbelt-gap)
+    );
+    padding-inline-start: var(--fig-toolbelt-group-gap);
+    border-inline-start: 1px solid
+      var(--fig-toolbelt-group-separator-color);
+  }
+}
+
 fig-tab-content {
   display: block;
   width: 100%;
@@ -1410,6 +1474,171 @@ fig-tabs,
   }
 }
 
+fig-toolbelt {
+  --fig-toolbelt-gap: var(--spacer-1);
+  --fig-toolbelt-group-gap: var(--spacer-2);
+  --fig-toolbelt-group-separator-color: var(--figma-color-border);
+  --fig-toolbelt-overflow-fade-size: calc(var(--spacer-6) + var(--spacer-2));
+  --fig-toolbelt-padding-block: var(--spacer-2);
+  --fig-toolbelt-padding-inline: var(--spacer-2);
+
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  background: var(--figma-color-bg) !important;
+  border-radius: var(--radius-large);
+
+  &::after{
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 10;
+    box-shadow: var(--figma-elevation-100-canvas);
+    border-radius: var(--radius-large);
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+  }
+
+  &::part(frame) {
+    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &::part(viewport) {
+    display: flex;
+    flex: 1 1 auto;
+    flex-flow: row nowrap;
+    box-sizing: border-box;
+    gap: var(--fig-toolbelt-gap);
+    width: 100%;
+    min-width: 0;
+    padding: var(--fig-toolbelt-padding-block)
+      var(--fig-toolbelt-padding-inline);
+    overflow: auto hidden;
+    scrollbar-width: none;
+  }
+
+  &::part(viewport)::-webkit-scrollbar {
+    display: none;
+  }
+
+  > .fig-overflow {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 3;
+    width: var(--control-height);
+    height: auto;
+    margin: 0;
+  }
+
+  > .fig-overflow-start {
+    left: 0;
+    right: auto;
+    box-shadow: 1px 0 0 0 var(--figma-color-bordertranslucent);
+
+    &::before {
+      border-radius: var(--radius-medium) 0 0 var(--radius-medium);
+    }
+
+    .fig-overflow-chevron {
+      rotate: 90deg;
+    }
+  }
+
+  > .fig-overflow-end {
+    right: 0;
+    left: auto;
+    box-shadow: -1px 0 0 0 var(--figma-color-bordertranslucent);
+
+    &::before {
+      border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
+    }
+
+    .fig-overflow-chevron {
+      rotate: -90deg;
+    }
+  }
+
+  &[layout="vertical"] {
+    width: fit-content;
+    max-width: 100%;
+
+    &::part(frame),
+    &::part(viewport) {
+      flex-flow: column nowrap;
+    }
+
+    &::part(viewport) {
+      overflow: hidden auto;
+    }
+
+    fig-toolbelt-group {
+      flex-flow: column nowrap;
+      width: 100%;
+
+      & + fig-toolbelt-group {
+        margin-block-start: calc(
+          var(--fig-toolbelt-group-gap) - var(--fig-toolbelt-gap)
+        );
+        margin-inline-start: 0;
+        padding-block-start: var(--fig-toolbelt-group-gap);
+        padding-inline-start: 0;
+        border-block-start: 1px solid
+          var(--fig-toolbelt-group-separator-color);
+        border-inline-start: 0;
+      }
+    }
+
+    > .fig-overflow {
+      top: auto;
+      right: 0;
+      left: 0;
+      width: auto;
+      height: var(--control-height);
+    }
+
+    > .fig-overflow-start {
+      top: 0;
+      bottom: auto;
+      box-shadow: 0 1px 0 0 var(--figma-color-bordertranslucent);
+
+      &::before {
+        border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+      }
+
+      .fig-overflow-chevron {
+        rotate: 180deg;
+      }
+    }
+
+    > .fig-overflow-end {
+      top: auto;
+      bottom: 0;
+      box-shadow: 0 -1px 0 0 var(--figma-color-bordertranslucent);
+
+      &::before {
+        border-radius: 0 0 var(--radius-medium) var(--radius-medium);
+      }
+
+      .fig-overflow-chevron {
+        rotate: 0deg;
+      }
+    }
+  }
+}
+
 /* Avatar */
 fig-avatar,
 .fig-avatar {
@@ -3810,18 +4039,11 @@ fig-group {
     }
   }
 
-  &[compact]:not([compact="false"]) {
-    & > fig-header{
-      --fig-header-height: var(--spacer-5);
-    }
-  }
-
-
   & > fig-header {
     cursor: default;
     gap: 0;
       
-    &:focus-visible {
+    &:has(> h3:focus-visible) {
       --figma-focus-outline-radius: var(--radius-medium);
       outline: var(--figma-focus-outline);
       outline-offset: var(--figma-focus-outline-offset);
@@ -3833,10 +4055,12 @@ fig-group {
       display: block;
       margin:0;
       padding-left: 0;
+      outline: none;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
       max-width: 100%;
+      cursor: default;
     }
     & > .fig-group-chevron {
       --icon: var(--icon-16-chevron);
@@ -3847,6 +4071,7 @@ fig-group {
       transition: transform var(--transition-duration)
         var(--transition-timing-function);
       margin-left: calc(var(--spacer-2) * -1);
+      cursor: default;
     }
   }
 
@@ -3859,7 +4084,7 @@ fig-group {
     margin-bottom: 0;
     fig-header {
       color: var(--figma-color-text-secondary);
-      &:hover {
+      &:has(> h3:hover, > .fig-group-chevron:hover) {
         color: var(--figma-color-text);
         .fig-group-chevron {
           color: inherit;
@@ -3877,10 +4102,6 @@ fig-group {
     display: none;
   }
 
-  &[compact]:not([compact="false"]) > fig-header {
-    --fig-header-height: var(--spacer-5);
-    height: var(--fig-header-height);
-  }
 }
 
 fig-footer {
@@ -5389,6 +5610,13 @@ fig-skeleton {
   overflow-y: auto;
 }
 
+fig-toolbelt::part(viewport) {
+  --fig-overflow-fade-size: var(--fig-toolbelt-overflow-fade-size);
+  --fig-overflow-fade-clear-top: 0px;
+
+  overflow-y: auto;
+}
+
 .fig-overflow-fade.fig-overflow-fade-horizontal {
   --fig-overflow-fade-clear-left: 0px;
 
@@ -5396,8 +5624,16 @@ fig-skeleton {
   overflow-y: hidden;
 }
 
+fig-toolbelt:not([layout="vertical"])::part(viewport) {
+  --fig-overflow-fade-clear-left: 0px;
+
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
 @supports (animation-timeline: scroll(self block)) {
-  .fig-overflow-fade:not(.fig-overflow-fade-horizontal) {
+  .fig-overflow-fade:not(.fig-overflow-fade-horizontal),
+  fig-toolbelt[layout="vertical"]::part(viewport) {
     mask-image: linear-gradient(
       to bottom,
       black 0,
@@ -5531,7 +5767,8 @@ fig-skeleton {
 }
 
 @supports (animation-timeline: scroll(self inline)) {
-  .fig-overflow-fade.fig-overflow-fade-horizontal {
+  .fig-overflow-fade.fig-overflow-fade-horizontal,
+  fig-toolbelt:not([layout="vertical"])::part(viewport) {
     mask-image: linear-gradient(
       to right,
       black 0,