@rogieking/figui3 9.2.2 → 9.3.0

package/README.md

@@ -76,7 +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`
-- `propkit` — `/propskit` property-row composition
+- `propkit` — property-row composition; examples are included in `/figui3`
 
 Minimal example:
 
@@ -1780,7 +1780,7 @@ git clone https://github.com/rogie/figui3.git
 cd figui3
 bun install
 bun dev                # Component docs at http://localhost:3000
-npm run dev:playground # Playground at http://localhost:5173 (/figui3, /propkit, /sandbox)
+npm run dev:playground # Playground at http://localhost:6600 (/figui3, /lab, /sandbox)
 npm run build          # Build minified dist/ (JS + CSS)
 npm run build:css      # Build minified CSS only
 ```
@@ -1809,8 +1809,8 @@ import "@rogieking/figui3/src/fig.css";  // unminified source
 
 The playground is the fastest way to explore and validate component markup:
 
-- **`/figui3`** — component examples with attribute controls
-- **`/propkit`** — property panel patterns
+- **`/figui3`** — component examples and property panel patterns with attribute controls
+- **`/lab`** — experimental component examples
 - **`/sandbox`** — styled React sample app
 
 ---

package/components.css

@@ -1120,7 +1120,7 @@ fig-property-button {
       stroke: currentColor;
     }
   }
-  &:has(svg:first-child):not([icon]) {
+  &:not(fig-property-button):has(svg:first-child):not([icon]) {
     padding-left: var(--spacer-1);
   }
 
@@ -1200,25 +1200,29 @@ fig-input-combo {
 }
 
 :is(.fig-button-combo, fig-button-combo, .fig-input-combo, fig-input-combo):not(
-    :has(> :not([variant="secondary"]))
-  ) {
+    :has(> :not([variant="secondary"]):not(fig-tooltip))
+  ):not(:has(> fig-tooltip > :not([variant="secondary"]))) {
   gap: 0;
   border-radius: var(--radius-medium);
   box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
 
-  > [variant="secondary"] {
+  > [variant="secondary"],
+  > fig-tooltip > [variant="secondary"] {
     box-shadow: none;
   }
 
-  > [variant="secondary"] + [variant="secondary"] {
-    box-shadow: none;
-    background-image: linear-gradient(
-      var(--figma-color-bordertranslucent),
-      var(--figma-color-bordertranslucent)
-    );
-    background-position: left 1px;
-    background-repeat: no-repeat;
-    background-size: 1px calc(100% - 2px);
+  > :is([variant="secondary"], fig-tooltip:has(> [variant="secondary"])) {
+    + [variant="secondary"],
+    + fig-tooltip > [variant="secondary"] {
+      box-shadow: none;
+      background-image: linear-gradient(
+        var(--figma-color-bordertranslucent),
+        var(--figma-color-bordertranslucent)
+      );
+      background-position: left 1px;
+      background-repeat: no-repeat;
+      background-size: 1px calc(100% - 2px);
+    }
   }
 }