@symbo.ls/element 3.14.2 → 3.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/element",
-  "version": "3.14.2",
+  "version": "3.14.3",
   "description": "Core element creation, update, and disposal engine for smbls v3.14",
   "type": "module",
   "main": "./index.js",
@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@symbo.ls/signal": "^3.14.0",
-    "@symbo.ls/state": "^3.14.0",
-    "@symbo.ls/utils": "^3.14.0",
+    "@symbo.ls/state": "^3.14.2",
+    "@symbo.ls/utils": "^3.14.2",
     "css-in-props": "^3.14.0",
     "attrs-in-props": "^3.14.0"
   },

package/src/create.js

@@ -1116,9 +1116,17 @@ function injectScopedCSS(node, rules) {
       for (const k in val) {
         const v = val[k]
         if (typeof v === 'object') {
-          const nestedSelector = k.replace(/&/g, '.' + id)
-          const nestedSuffix = ' ' + nestedSelector.replace('.' + id, '')
-          const fullSelector = resolvedSelector.split(', ').map(s => s + nestedSuffix).join(', ')
+          // `&` in the nested key references the outer's resolved selector
+          // (standard CSS-nesting semantics). `&.X` chains on the outer,
+          // `& .X` is a descendant of the outer, `&:hover` / `&[disabled]`
+          // chain a pseudo/attr selector — all of these work because the
+          // replace preserves the user's whitespace and punctuation between
+          // `&` and the rest. When the nested key has no `&`, treat it as
+          // an implicit descendant (preserves keys like `'> h1'` rendering
+          // as `outer > h1`).
+          const fullSelector = k.includes('&')
+            ? resolvedSelector.split(', ').map(s => k.replace(/&/g, s)).join(', ')
+            : resolvedSelector.split(', ').map(s => `${s} ${k}`).join(', ')
           let nestedProps = ''
           for (const nk in v) {
             nestedProps += `${nk.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${v[nk]};`
@@ -1300,6 +1308,18 @@ function applyCssInProps(element) {
         cssStyles[prop] = val
         hasStyles = true
       }
+    } else if (prop.charAt(0) === '&') {
+      // Top-level scope-anchored selector — e.g. `'& .token': { '&.keyword': {color} }`
+      // — flows straight to the atomic CSS engine, which substitutes `&` with
+      // the generated class. The `:` and `@` branches below already do this for
+      // pseudo-classes and at-rules; without this branch, top-level `&` keys
+      // were silently dropped and projects had to wrap every scope rule in a
+      // `style: {}` block (or inject a `<style>` child as a workaround).
+      const val = element[prop]
+      if (val && typeof val === 'object') {
+        cssStyles[prop] = val
+        hasStyles = true
+      }
     } else if (prop.charAt(0) === '@' || prop.charAt(0) === ':') {
       // Selector-based CSS: @dark, @media, :hover
       const val = element[prop]