@rogieking/figui3 6.21.1 → 6.23.0

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

@@ -73,7 +73,7 @@ export default defineConfig({
 - `fig-fill-picker` is optional. Import `fig-editor.js` and `fig-editor.css` when full picker behavior is needed.
 - Do not use `picker` or `picker-anchor` on `fig-input-color`; components auto-detect `fig-fill-picker` at interaction time.
 - `picker-*` attrs on `fig-input-color` are forwarded to `fig-fill-picker` only when the optional picker is registered.
-  - Example: `picker-dialog-position`, `picker-experimental`, etc.
+  - Example: `picker-dialog-position`.
 - For React custom modes, use `fig-fill-picker` + slot API:
   - Add a child with `slot="mode-<name>"` (and optional `label`).
   - Include `<name>` in the `mode` attribute (e.g. `mode="solid,react-demo"`).
@@ -88,19 +88,6 @@ export default defineConfig({
   - `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.
 
-## Experimental Attribute Guidance
-
-- Use `experimental` as a feature-flag string for opt-in behavior. Treat it as progressive enhancement, not guaranteed baseline behavior.
-- Prefer `experimental="modern"` when enabling modern customizable select/picker UI behavior.
-- Keep usage explicit on the component that needs it (for example `fig-dropdown`, `fig-fill-picker`, `fig-input-fill`, `fig-input-color`).
-- Preserve pass-through behavior:
-  - `fig-input-color` and `fig-input-fill` forward experimental-related picker settings into internal `fig-fill-picker` usage.
-  - Avoid adding hidden implicit defaults that enable experimental behavior globally.
-- Backward-compat rule:
-  - Do not reintroduce the old `neue` variant name for dropdown experimental behavior.
-  - Use `variant="classic"` only when a slider needs the previous visual style.
-- Documentation rule: any new experimental token must be documented with activation syntax, intended scope, and fallback behavior in demos + README + changelog.
-
 ## Critical Rules
 
 ### Overlay Components (`fig-dialog`, `fig-popup`)
@@ -142,7 +129,6 @@ export default defineConfig({
 - Update `README.md` component docs when public API or behavior changes.
 - Update demo surfaces (`index.html` and `playground/` routes where relevant) for visible behavior changes.
 - Prefer realistic examples that mirror plugin/property panel usage.
-- If introducing an experimental feature, document activation and fallback behavior clearly.
 
 ### Compatibility and Safety
 

package/.cursor/skills/propkit/SKILL.md

@@ -151,11 +151,11 @@ bootstrap();
 <!-- Fill + blend pair -->
 <fig-field direction="horizontal">
   <label>Fill</label>
-  <fig-input-fill value='{"type":"solid","color":"#667eea"}' experimental="modern"></fig-input-fill>
+  <fig-input-fill value='{"type":"solid","color":"#667eea"}'></fig-input-fill>
 </fig-field>
 <fig-field direction="horizontal">
   <label>Blend</label>
-  <fig-dropdown full experimental="modern">
+  <fig-dropdown full>
     <option selected>Normal</option>
     <option>Multiply</option>
   </fig-dropdown>

package/README.md

@@ -218,7 +218,6 @@ One import for every host (`@rogieking/figui3/propskit.js`). Framework examples
 |---|---|---|---|
 | `value` | string | — | Selected value |
 | `type` | string | `"select"` | `"select"` or `"dropdown"` |
-| `experimental` | string | — | Feature flags (e.g. `"modern"` for `appearance: base-select`) |
 | `label` | string | — | Accessible label for the generated native `<select>` |
 | `disabled` | boolean | `false` | Disabled state |
 
@@ -229,7 +228,7 @@ One import for every host (`@rogieking/figui3/propskit.js`). Framework examples
 </fig-dropdown>
 ```
 
-Keyboard activation follows the native select pattern. Enter opens the closed picker, and when `experimental="modern"` is open, Enter is left to the browser so the focused option commits normally.
+Keyboard activation follows the native select pattern. Enter opens the closed picker.
 
 ---
 
@@ -372,7 +371,7 @@ PropsKit controls that support `size` default to the large layout when the attri
 
 Composes a `<fig-field>` and `<fig-input-color>` into a full-surface property control. Color attributes are forwarded to the inner input and text editing remains enabled.
 
-**Attributes:** `label`, `value`, `alpha`, `disabled`, `experimental`, `size`
+**Attributes:** `label`, `value`, `alpha`, `disabled`, `size`
 
 **Events:** `input`, `change` — forwarded from the inner color input.
 
@@ -626,7 +625,6 @@ A compact solid-color swatch. Uses `<fig-fill-picker>` when the optional picker
 | `text` | boolean | `false` | Show hex text input |
 | `alpha` | boolean | `true` | Show alpha slider; set `alpha="false"` to hide opacity controls |
 | `mode` | string | — | Color mode (`"hex"`, `"rgb"`, `"hsl"`) |
-| `experimental` | string | — | Feature flags |
 | `picker-*` | string | — | Forwarded to `<fig-fill-picker>` when the optional picker is registered |
 | `disabled` | boolean | `false` | Disabled state |
 
@@ -688,7 +686,6 @@ A gradient editor with draggable stops. With `edit="picker"` and the optional pi
 | `edit` | boolean/string | `true` | `true`, `false`, or `"picker"` |
 | `mode` | string | `"handle"` | `"handle"` renders color stop handles without tips; `"tip"` renders persistent color tips |
 | `disabled` | boolean | `false` | Disabled state |
-| `experimental` | string | — | Picker feature flags |
 | `picker-*` | string | — | Passthrough picker attributes |
 
 Supported interpolation spaces: `srgb`, `srgb-linear`, `display-p3`, `oklab`, `oklch` (with `hueInterpolation`: `shorter`, `longer`, `increasing`, `decreasing`).
@@ -719,7 +716,6 @@ A comprehensive fill input supporting solid, gradient, image, and video fills. W
 | `value` | string | — | JSON fill data |
 | `disabled` | boolean | `false` | Disabled state |
 | `mode` | string | — | Lock to a fill mode |
-| `experimental` | string | — | Feature flags |
 | `alpha` | boolean | `true` | Show alpha controls |
 | `picker-*` | string | — | Forwarded to `<fig-fill-picker>` when the optional picker is registered |
 
@@ -750,7 +746,6 @@ Optional full fill picker dialog supporting solid, gradient, image, video, and w
 | `disabled` | boolean | `false` | Disabled state |
 | `alpha` | boolean | `true` | Show alpha controls |
 | `mode` | string | — | Lock to mode: `"solid"`, `"gradient"`, `"image"`, `"video"`, `"webcam"` |
-| `experimental` | string | — | Feature flags |
 
 **Events:**
 
@@ -1112,10 +1107,13 @@ A modal/non-modal dialog. Uses `is="fig-dialog"` on a native `<dialog>` element.
 ```html
 <dialog is="fig-dialog" id="myDialog" modal drag handle="fig-header" position="center center">
   <fig-header>Dialog Title</fig-header>
-  <fig-content><p>Content here.</p></fig-content>
+  <fig-content padding><p>Content here.</p></fig-content>
 </dialog>
 ```
 
+Use `padding` on `fig-content` for prose-only content. Leave it off when
+rendering `fig-field` or `fig-group` children, which provide their own gutters.
+
 Dialog close paths restore focus to the element that opened the dialog.
 
 ---