docs: explicitly document the part 'root' and fix some mistakes in docs

Author: cray0000

docs/api/jsx-props.md

@@ -87,7 +87,7 @@ Expose an element for external styling via `::part()`.
 ```jsx
 function Button({ children }) {
   return (
-    <button part="root" styleName="button">
+    <button part="root" styleName="root">
       <span part="icon">★</span>
       <span part="text">{children}</span>
     </button>

docs/api/pug.md

@@ -82,7 +82,7 @@ input.input(value=inputValue onChange=handleChange)
 div.wrapper(...props)
 
 // Part attribute
-div.card(part="root")
+div.root(part="root")
 ```
 
 ## Content
@@ -155,7 +155,7 @@ import { pug, styl } from 'cssxjs'
 
 function UserProfile({ user, isOnline, onLogout }) {
   return pug`
-    div.profile(part="root")
+    div.root(part="root")
       div.header(part="header")
         img.avatar(src=user.avatar alt=user.name)
         div.info
@@ -173,7 +173,7 @@ function UserProfile({ user, isOnline, onLogout }) {
   `
 
   styl`
-    .profile
+    .root
       background white
       border-radius 12px
       box-shadow 0 2px 8px rgba(0,0,0,0.1)

docs/examples/card.md

@@ -7,7 +7,7 @@ import { styl } from 'cssxjs'
 
 function Card({ title, subtitle, children, actions }) {
   return (
-    <div part="root" styleName="card">
+    <div part="root" styleName="root">
       <div part="header" styleName="header">
         <h3 part="title" styleName="title">{title}</h3>
         {subtitle && (
@@ -28,7 +28,7 @@ function Card({ title, subtitle, children, actions }) {
   )
 
   styl`
-    .card
+    .root
       background white
       border-radius 12px
       box-shadow 0 2px 8px rgba(0,0,0,0.1)

docs/examples/form.md

@@ -16,7 +16,7 @@ function Input({
   const hasError = !!error
 
   return (
-    <div part="root" styleName="field">
+    <div part="root" styleName="root">
       {label && (
         <label part="label" styleName="label">
           {label}
@@ -40,7 +40,7 @@ function Input({
   )
 
   styl`
-    .field
+    .root
       display flex
       flex-direction column
       gap 6px

docs/examples/modal.md

@@ -24,7 +24,7 @@ function Modal({ isOpen, onClose, title, children, actions }) {
     <div styleName="overlay" onClick={onClose}>
       <div
         part="root"
-        styleName="modal"
+        styleName="root"
         onClick={e => e.stopPropagation()}
         role="dialog"
         aria-modal="true"
@@ -61,7 +61,7 @@ function Modal({ isOpen, onClose, title, children, actions }) {
       padding 20px
       z-index 1000
 
-    .modal
+    .root
       background white
       border-radius 12px
       max-width 480px

docs/guide/component-parts.md

@@ -33,14 +33,14 @@ Use the `part` attribute to mark styleable elements:
 ```jsx
 function Button({ icon, children }) {
   return (
-    <div part="root" styleName="button">
+    <div part="root" styleName="root">
       <span part="icon" styleName="icon">{icon}</span>
       <span part="text" styleName="text">{children}</span>
     </div>
   )
 
   styl`
-    .button
+    .root
       display flex
       align-items center
       gap 8px
@@ -70,6 +70,8 @@ function App() {
   )
 
   styl`
+    .primary-button
+      background #28a745
     .primary-button::part(icon)
       color gold
     .primary-button::part(text)
@@ -101,6 +103,24 @@ styl`
 <Button iconStyle={{ color: 'red' }} />
 ```
 
+### The `root` Part
+
+The `part="root"` is special — it maps to the standard `style` prop instead of `rootStyle`. This means styles applied to a component's class name automatically reach the root element:
+
+```jsx
+// This:
+<Button styleName="my-button" />
+styl`
+  .my-button
+    background green
+`
+
+// Effectively becomes:
+<Button style={{ background: 'green' }} />
+```
+
+You don't need to write `::part(root)` explicitly — just style the class directly. This makes `part="root"` work seamlessly with any component that accepts a `style` prop, including third-party components and React Native built-ins.
+
 ## Complete Example
 
 Here's a full example showing a customizable Card component:
@@ -111,7 +131,7 @@ import { styl } from 'cssxjs'
 
 export function Card({ title, children }) {
   return (
-    <div part="root" styleName="card">
+    <div part="root" styleName="root">
       <div part="header" styleName="header">
         <h3 part="title" styleName="title">{title}</h3>
       </div>
@@ -122,7 +142,7 @@ export function Card({ title, children }) {
   )
 
   styl`
-    .card
+    .root
       background white
       border-radius 12px
       box-shadow 0 2px 8px rgba(0,0,0,0.1)

docs/guide/index.md

@@ -34,27 +34,37 @@ With CSSX, you write real CSS:
 import { styl } from 'cssxjs'
 
 function Button({ children }) {
-  return <div styleName="button">{children}</div>
+  return (
+    <div part="root" styleName="root">
+      {children}
+    </div>
+  )
 
   styl`
-    .button
+    .root
       background-color #007bff
       padding 16px
       border-radius 8px
   `
 }
 ```
 
+The `part="root"` attribute allows parent components to style this element using `::part(root)` — a powerful composition pattern.
+
 You can also use plain CSS if you prefer:
 
 ```jsx
 import { css } from 'cssxjs'
 
 function Button({ children }) {
-  return <div styleName="button">{children}</div>
+  return (
+    <div part="root" styleName="root">
+      {children}
+    </div>
+  )
 
   css`
-    .button {
+    .root {
       background-color: #007bff;
       padding: 16px;
       border-radius: 8px;
@@ -133,25 +143,31 @@ import { styl } from 'cssxjs'
 
 function Card({ children, variant }) {
   return (
-    <div styleName={`card ${variant}`}>
+    <div part="root" styleName={['root', variant]}>
       <div part="header" styleName="header">
-        <span part="title">Title</span>
+        <span part="title" styleName="title">Title</span>
       </div>
-      <div part="content">{children}</div>
+      <div part="content" styleName="content">{children}</div>
     </div>
   )
 
   styl`
-    .card
+    .root
       background white
       border-radius 8px
+
       &.primary
         border 2px solid var(--primary-color)
+
     .header
       padding 2u
+
     .title
       font-size 18px
       font-weight bold
+
+    .content
+      padding 2u
   `
 }
 ```

docs/guide/pug.md

@@ -108,7 +108,7 @@ input.input(value=inputValue onChange=handleChange)
 div.wrapper(...props)
 
 // Part attribute for CSSX
-div.card(part="root")
+div.root(part="root")
 ```
 
 ## Content and Interpolation
@@ -183,7 +183,7 @@ import { pug, styl } from 'cssxjs'
 
 function UserProfile({ user, isOnline, onLogout }) {
   return pug`
-    div.profile(part="root")
+    div.root(part="root")
       div.header(part="header")
         img.avatar(src=user.avatar alt=user.name)
         div.info
@@ -201,7 +201,7 @@ function UserProfile({ user, isOnline, onLogout }) {
   `
 
   styl`
-    .profile
+    .root
       background white
       border-radius 12px
       overflow hidden