@rogieking/figui3 2.29.3 → 2.30.1

package/.cursor/skills/nested-css-selectors/SKILL.md

@@ -0,0 +1,96 @@
+---
+name: nested-css-selectors
+description: Implements CSS nesting and advanced selectors with progressive enhancement and maintainable specificity. Use when writing or refactoring nested CSS, or when the user mentions :has, :is, :where, :not, or complex selector composition.
+user-invocable: false
+---
+
+# Nested CSS + Selectors
+
+## Purpose
+
+Write modern, readable CSS using nesting and selector composition without breaking fallback behavior or creating specificity traps.
+
+## Core Rules
+
+1. Start with a stable baseline rule first.
+2. Use nesting to improve readability, not to increase selector depth.
+3. Keep selector chains short; avoid deeply coupled DOM paths.
+4. Prefer low-specificity patterns (`:where(...)`) for reusable component styles.
+5. Gate risky/brand-new behavior behind `@supports selector(...)` when needed.
+
+## Nesting Guidelines
+
+- Nest only when the child selector is semantically tied to the parent block.
+- Keep nesting to ~2 levels in normal component styles.
+- Use `&` explicitly for pseudo-classes, variants, and stateful modifiers.
+- Avoid implicit descendant nesting that recreates fragile long selectors.
+
+```css
+.card {
+  padding: 12px;
+
+  &__title {
+    font-weight: 600;
+  }
+
+  &:hover {
+    background: var(--figma-color-bg-secondary);
+  }
+}
+```
+
+## Advanced Selector Guidelines
+
+- Use `:is(...)` to group alternatives without repeating declarations.
+- Use `:where(...)` when you want grouping with near-zero specificity cost.
+- Use `:has(...)` for parent/state relationships that previously required JS classes.
+- Keep `:not(...)` small and explicit; avoid broad negative matching.
+
+```css
+.field :is(input, select, textarea) {
+  font: inherit;
+}
+
+.panel :where(button, [role="button"]) {
+  cursor: pointer;
+}
+```
+
+## Progressive Enhancement Pattern
+
+```css
+/* baseline behavior */
+.form-row {
+  border: 1px solid var(--figma-color-border);
+}
+
+/* enhanced behavior only where supported */
+@supports selector(.form-row:has(input:focus-visible)) {
+  .form-row:has(input:focus-visible) {
+    border-color: var(--figma-color-border-selected);
+  }
+}
+```
+
+## Specificity Guardrails
+
+- Prefer class-based selectors over element+class combinations unless necessary.
+- Avoid IDs in component styling.
+- If a rule should be easy to override, wrap grouping parts in `:where(...)`.
+- If a selector becomes hard to reason about, split it into two simpler rules.
+
+## Refactor Workflow
+
+1. Identify repeated selector/declaration blocks.
+2. Consolidate with `:is(...)` or `:where(...)` where intent matches.
+3. Introduce nesting inside the owning component block.
+4. Recheck specificity effects (especially when replacing comma groups).
+5. Verify hover/focus/disabled/error states are unchanged.
+
+## Quick Checklist
+
+- [ ] Baseline works without advanced selectors.
+- [ ] Nesting depth remains shallow and readable.
+- [ ] `:has(...)` usage is support-gated when compatibility matters.
+- [ ] Specificity is intentional (`:where` for low-cost overrides).
+- [ ] No fragile selector tied to incidental DOM structure.

package/components.css

@@ -792,8 +792,10 @@ fig-button {
     color: var(--figma-color-text);
     box-shadow: 0 0 0 1px var(--figma-color-bordertranslucent);
 
-    &:active {
+    &:active,
+    &:has(:active) {
       background-color: var(--figma-color-bg-secondary);
+      color: var(--figma-color-text);
     }
   }
 
@@ -1588,7 +1590,7 @@ fig-3d-rotate {
 
   & > label {
     align-self: stretch;
-    color: inherit;
+    color: var(--figma-color-text);
   }
 
   & > * {
@@ -2030,8 +2032,7 @@ fig-slider {
       border: none;
       position: relative;
       z-index: 1;
-      cursor: grab;
-      cursor: -webkit-grab;
+      cursor: default;
       box-shadow: var(--slider-handle-shadow);
     }
 
@@ -2105,8 +2106,7 @@ fig-slider {
       border: none;
       position: relative;
       z-index: 1;
-      cursor: grab;
-      cursor: -moz-grab;
+      cursor: default;
       box-shadow: var(--slider-handle-shadow);
       transition: var(--handle-transition);
     }

package/fig.js

@@ -5237,8 +5237,11 @@ class FigImage extends HTMLElement {
   }
   connectedCallback() {
     this.#src = this.getAttribute("src") || "";
-    this.upload = this.getAttribute("upload") === "true";
-    this.download = this.getAttribute("download") === "true";
+    this.upload =
+      this.hasAttribute("upload") && this.getAttribute("upload") !== "false";
+    this.download =
+      this.hasAttribute("download") &&
+      this.getAttribute("download") !== "false";
     this.label = this.getAttribute("label") || "Upload";
     this.size = this.getAttribute("size") || "small";
     this.innerHTML = this.#getInnerHTML();
@@ -5377,7 +5380,7 @@ class FigImage extends HTMLElement {
     this.setAttribute("src", this.blob);
   }
   static get observedAttributes() {
-    return ["src", "upload", "aspect-ratio", "fit"];
+    return ["src", "upload", "download", "aspect-ratio", "fit"];
   }
   get src() {
     return this.#src;
@@ -5400,9 +5403,13 @@ class FigImage extends HTMLElement {
         this.#loadImage(this.#src);
       }
     }
-    if (name === "upload" || name === "download") {
-      this.upload = newValue.toLowerCase() === "true";
-      this.download = newValue.toLowerCase() === "true";
+    if (name === "upload") {
+      this.upload = newValue !== null && newValue !== "false";
+      this.innerHTML = this.#getInnerHTML();
+      this.#updateRefs();
+    }
+    if (name === "download") {
+      this.download = newValue !== null && newValue !== "false";
       this.innerHTML = this.#getInnerHTML();
       this.#updateRefs();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.29.3",
+  "version": "2.30.1",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",
@@ -32,7 +32,9 @@
   ],
   "scripts": {
     "dev": "bun --hot server.ts",
-    "build": "bun build fig.js --minify --outdir dist"
+    "build": "bun build fig.js --minify --outdir dist",
+    "dev:propkit": "cd propkit && npm run dev",
+    "build:propkit": "cd propkit && npm run build"
   },
   "repository": {
     "type": "git",
@@ -71,7 +73,8 @@
     "a11y"
   ],
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "latest",
+    "playwright": "^1.58.2"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"