feat(tasty): selector affix for sub-elements

Author: tenphi

.changeset/selector-affix-enhancement.md

@@ -0,0 +1,6 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Enhanced selector affix syntax (`$`) for sub-element styling in tasty. Capitalized words in the affix are now automatically transformed to sub-element selectors, allowing complex selector chains like `$: '> Body > Row >'` which generates `.table > [data-element="Body"] > [data-element="Row"] > [data-element="Cell"]`.
+

src/stories/Tasty.docs.mdx

@@ -567,6 +567,33 @@ const Card = tasty({
 </Card>
 ```
 
+#### Selector Affix (`$`)
+
+Control sub-element selector combinator using the `$` property:
+
+```jsx
+const Table = tasty({
+  styles: {
+    // Direct child selector
+    Row: {
+      $: '>',                     // .table > [data-element="Row"]
+      padding: '1x',
+    },
+    
+    // Chained selectors (auto-transforms capitalized words)
+    Cell: {
+      $: '> Body > Row >',        // .table > [data-element="Body"] > [data-element="Row"] > [data-element="Cell"]
+      border: '1bw solid #border',
+    },
+    
+    // Default: descendant selector (space)
+    Text: {
+      color: '#text',             // .table [data-element="Text"]
+    },
+  },
+});
+```
+
 ### Variants & Theming
 
 Create themed component variations:

src/tasty/tasty.test.tsx

@@ -1170,6 +1170,66 @@ describe('tastyGlobal() API', () => {
     expect(styleContent).not.toMatch(/>\s*\[data-element="Content"\]/);
   });
 
+  it('should support empty affix for sub-elements with $: ""', () => {
+    const Card = tasty({
+      styles: {
+        padding: '2x',
+        Content: {
+          $: '',
+          color: '#primary',
+        },
+      },
+    });
+
+    render(
+      <Card>
+        <div data-element="Content">Content text</div>
+      </Card>,
+    );
+
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    // Empty affix should result in descendant selector (space only)
+    expect(styleContent).toMatch(/\s+\[data-element="Content"\]/);
+    expect(styleContent).not.toMatch(/>\s*\[data-element="Content"\]/);
+  });
+
+  it('should support complex selector chain with $: "> Body > Row >"', () => {
+    const Table = tasty({
+      styles: {
+        display: 'table',
+        Cell: {
+          $: '> Body > Row >',
+          padding: '1x',
+          border: '1px solid #border',
+        },
+      },
+    });
+
+    render(
+      <Table>
+        <div data-element="Body">
+          <div data-element="Row">
+            <div data-element="Cell">Cell content</div>
+          </div>
+        </div>
+      </Table>,
+    );
+
+    const styleElements = document.head.querySelectorAll('[data-tasty]');
+    const styleContent = Array.from(styleElements)
+      .map((el) => el.textContent)
+      .join('');
+
+    // Should transform to: > [data-element="Body"] > [data-element="Row"] > [data-element="Cell"]
+    expect(styleContent).toMatch(
+      />\s*\[data-element="Body"\]\s*>\s*\[data-element="Row"\]\s*>\s*\[data-element="Cell"\]/,
+    );
+  });
+
   it('should support multiple global style components with different selectors', () => {
     const GlobalHeading = tasty('h1.special', {
       preset: 'h1',