@ctrliq/quantic-components 1.86.0 → 1.87.0

package/dist/meta.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "generated": "2026-08-28T17:09:40.905Z",
+  "generated": "2026-08-28T17:44:32.197Z",
   "components": [
     {
       "tag": "quantic-action-group",
@@ -29,10 +29,7 @@
       "relatedTo": [
         "quantic-button",
         "quantic-button-bar",
-        "quantic-dialog-actions"
-      ],
-      "subComponents": [
-        "quantic-button",
+        "quantic-dialog-actions",
         "quantic-dropdown-menu",
         "quantic-popover"
       ]
@@ -150,6 +147,20 @@
           "default": "false"
         }
       ],
+      "slots": [
+        {
+          "name": "before",
+          "description": "Content before the label (e.g. icon)."
+        },
+        {
+          "name": "",
+          "description": "Badge label text or icon."
+        },
+        {
+          "name": "after",
+          "description": "Content after the label."
+        }
+      ],
       "examples": [
         "<quantic-badge color=\"blue\">Blue</quantic-badge>",
         "<quantic-badge color=\"blue-light\">Blue Light</quantic-badge>",
@@ -206,10 +217,7 @@
       ],
       "relatedTo": [
         "quantic-badge",
-        "quantic-tag-group"
-      ],
-      "subComponents": [
-        "quantic-badge",
+        "quantic-tag-group",
         "quantic-status-badge"
       ]
     },
@@ -323,6 +331,12 @@
           "type": "string"
         }
       ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Button label or icon content."
+        }
+      ],
       "examples": [
         "<quantic-button as=\"a\" variant=\"primary\" href=\"/dashboard\">Go to Dashboard</quantic-button>",
         "<quantic-button as=\"a\" variant=\"primary\" href=\"/files/document.pdf\" download=\"document.pdf\">Download File</quantic-button>",
@@ -425,7 +439,8 @@
       "relatedTo": [
         "quantic-button-bar",
         "quantic-button"
-      ]
+      ],
+      "subComponentOf": "quantic-button-bar"
     },
     {
       "tag": "quantic-button-group",
@@ -495,7 +510,8 @@
       ],
       "relatedTo": [
         "quantic-button-group"
-      ]
+      ],
+      "subComponentOf": "quantic-button-group"
     },
     {
       "tag": "quantic-capacity-bar",
@@ -637,6 +653,24 @@
           "type": "string"
         }
       ],
+      "slots": [
+        {
+          "name": "header",
+          "description": "Header area. Place quantic-card-title and quantic-card-meta here."
+        },
+        {
+          "name": "",
+          "description": "Main body content."
+        },
+        {
+          "name": "footer",
+          "description": "Footer content, pinned to the bottom of the card."
+        },
+        {
+          "name": "action-icon",
+          "description": "Icon in the top-right corner; only visible on interactive cards."
+        }
+      ],
       "examples": [
         "<quantic-card as=\"button\" variant=\"solid\" size=\"md\" type=\"button\" style=\"max-width: 360px\">\n      <quantic-card-title slot=\"header\">Button Card</quantic-card-title>\n      Click anywhere on this card to trigger an action. Rendered as a native\n      button element with full keyboard support.\n      <quantic-icon-lucide-chevron-right slot=\"action-icon\" size=\"md\"></quantic-icon-lucide-chevron-right>\n    </quantic-card>",
         "<quantic-card as=\"button\" variant=\"outline\" size=\"md\" disabled type=\"button\" style=\"max-width: 360px\">\n      <quantic-card-title slot=\"header\">Disabled Card</quantic-card-title>\n      This card is disabled and cannot be interacted with.\n      <quantic-icon-lucide-chevron-right slot=\"action-icon\" size=\"md\"></quantic-icon-lucide-chevron-right>\n    </quantic-card>",
@@ -661,9 +695,9 @@
         "quantic-panel"
       ],
       "subComponents": [
-        "quantic-card-title",
         "quantic-card-image",
-        "quantic-card-meta"
+        "quantic-card-meta",
+        "quantic-card-title"
       ]
     },
     {
@@ -779,7 +813,8 @@
       ],
       "relatedTo": [
         "quantic-card"
-      ]
+      ],
+      "subComponentOf": "quantic-card"
     },
     {
       "tag": "quantic-card-meta",
@@ -799,7 +834,8 @@
       ],
       "relatedTo": [
         "quantic-card"
-      ]
+      ],
+      "subComponentOf": "quantic-card"
     },
     {
       "tag": "quantic-card-title",
@@ -840,7 +876,8 @@
       ],
       "relatedTo": [
         "quantic-card"
-      ]
+      ],
+      "subComponentOf": "quantic-card"
     },
     {
       "tag": "quantic-checkbox",
@@ -1048,9 +1085,6 @@
       "relatedTo": [
         "quantic-checkbox",
         "quantic-field"
-      ],
-      "subComponents": [
-        "quantic-checkbox"
       ]
     },
     {
@@ -1710,8 +1744,8 @@
         "quantic-button"
       ],
       "subComponents": [
-        "quantic-dialog-title",
-        "quantic-dialog-actions"
+        "quantic-dialog-actions",
+        "quantic-dialog-title"
       ]
     },
     {
@@ -1729,9 +1763,7 @@
         "quantic-button",
         "quantic-action-group"
       ],
-      "subComponents": [
-        "quantic-action-group"
-      ]
+      "subComponentOf": "quantic-dialog"
     },
     {
       "tag": "quantic-dialog-backdrop",
@@ -1788,7 +1820,8 @@
       ],
       "relatedTo": [
         "quantic-dialog"
-      ]
+      ],
+      "subComponentOf": "quantic-dialog"
     },
     {
       "tag": "quantic-dropdown-menu",
@@ -1897,8 +1930,8 @@
         "<div style=\"padding: 100px; display: flex; justify-content: center;\">\n      <quantic-dropdown-menu>\n        <quantic-button slot=\"trigger\">Sort By</quantic-button>\n        <quantic-dropdown-menu-item value=\"name\" selected>Name</quantic-dropdown-menu-item>\n        <quantic-dropdown-menu-item value=\"date\">Date</quantic-dropdown-menu-item>\n        <quantic-dropdown-menu-item value=\"size\">Size</quantic-dropdown-menu-item>\n        <quantic-dropdown-menu-item value=\"type\">Type</quantic-dropdown-menu-item>\n      </quantic-dropdown-menu>\n    </div>"
       ],
       "subComponents": [
-        "quantic-dropdown-menu-item",
-        "quantic-dropdown-menu-group"
+        "quantic-dropdown-menu-group",
+        "quantic-dropdown-menu-item"
       ]
     },
     {
@@ -1926,7 +1959,8 @@
       "relatedTo": [
         "quantic-dropdown-menu",
         "quantic-dropdown-menu-item"
-      ]
+      ],
+      "subComponentOf": "quantic-dropdown-menu"
     },
     {
       "tag": "quantic-dropdown-menu-item",
@@ -2006,7 +2040,8 @@
       "relatedTo": [
         "quantic-dropdown-menu",
         "quantic-dropdown-menu-group"
-      ]
+      ],
+      "subComponentOf": "quantic-dropdown-menu"
     },
     {
       "tag": "quantic-field",
@@ -2094,6 +2129,15 @@
           "description": "Validation message shown when status is set."
         }
       ],
+      "examples": [
+        "<quantic-field\n      fieldId=\"color-input\"\n      label=\"Favorite Color\"\n      hint=\"Pick your favorite color\"\n      required\n    >\n      <input\n        type=\"color\"\n        id=\"color-input\"\n        aria-labelledby=\"color-input\"\n        aria-describedby=\"hint-color-input\"\n        style=\"width: 100%; height: 48px; border: 1px solid var(--quantic-border-secondary); border-radius: var(--quantic-radius-md); cursor: pointer;\"\n      />\n    </quantic-field>",
+        "<quantic-field\n      fieldId=\"datetime-input\"\n      label=\"Appointment Date & Time\"\n      message=\"Appointment successfully scheduled\"\n      status=\"success\"\n      required\n    >\n      <quantic-text-input\n        type=\"datetime-local\"\n        id=\"datetime-input\"\n        aria-labelledby=\"datetime-input\"\n        aria-describedby=\"message-datetime-input\"\n      ></quantic-text-input>\n    </quantic-field>",
+        "<quantic-field\n      fieldId=\"custom-input-error\"\n      label=\"File Upload\"\n      hint=\"Maximum file size: 5MB\"\n      message=\"File size exceeds the maximum limit\"\n      status=\"error\"\n      required\n    >\n      <input\n        type=\"file\"\n        id=\"custom-input-error\"\n        aria-labelledby=\"custom-input-error\"\n        aria-describedby=\"hint-custom-input-error message-custom-input-error\"\n        aria-invalid=\"true\"\n        style=\"width: 100%; padding: 8px; border: 2px solid var(--quantic-border-error); border-radius: var(--quantic-radius-md);\"\n      />\n    </quantic-field>",
+        "<quantic-field\n      fieldId=\"custom-textarea\"\n      label=\"Comments\"\n      hint=\"Please provide detailed feedback\"\n      required\n    >\n      <textarea\n        id=\"custom-textarea\"\n        rows=\"5\"\n        placeholder=\"Enter your comments here...\"\n        aria-labelledby=\"custom-textarea\"\n        aria-describedby=\"hint-custom-textarea\"\n        style=\"width: 100%; padding: 12px; font-family: inherit; font-size: 14px; border: 1px solid var(--quantic-border-secondary); border-radius: var(--quantic-radius-md); resize: vertical;\"\n      ></textarea>\n    </quantic-field>",
+        "<quantic-field\n      fieldId=\"phone-input\"\n      label=\"Phone Number\"\n      hint=\"Enter your phone number with country code\"\n      required\n    >\n      <div style=\"display: flex; gap: 8px;\">\n        <quantic-text-input\n          placeholder=\"+1\"\n          maxlength=\"3\"\n          aria-labelledby=\"phone-input\"\n          aria-describedby=\"hint-phone-input\"\n          style=\"max-width: 60px;\"\n        ></quantic-text-input>\n        <quantic-text-input\n          placeholder=\"(555) 123-4567\"\n          aria-labelledby=\"phone-input\"\n          aria-describedby=\"hint-phone-input\"\n        ></quantic-text-input>\n      </div>\n    </quantic-field>",
+        "<quantic-field\n      fieldId=\"with-hint\"\n      label=\"Username\"\n      hint=\"Must be 3–20 characters\"\n      size=\"md\"\n      hint-position=\"below\"\n    >\n      <quantic-text-input\n        id=\"with-hint\"\n        aria-labelledby=\"with-hint\"\n        aria-describedby=\"hint-with-hint\"\n        placeholder=\"Enter username\"\n        size=\"md\"\n      ></quantic-text-input>\n    </quantic-field>",
+        "<quantic-field\n      fieldId=\"with-select\"\n      label=\"Country\"\n      hint=\"Select your country of residence\"\n      size=\"md\"\n      hint-position=\"below\"\n    >\n      <quantic-select\n        id=\"with-select\"\n        aria-labelledby=\"with-select\"\n        aria-describedby=\"hint-with-select\"\n        placeholder=\"Select a country\"\n      >\n        <option value=\"us\">United States</option>\n        <option value=\"ca\">Canada</option>\n        <option value=\"uk\">United Kingdom</option>\n        <option value=\"au\">Australia</option>\n      </quantic-select>\n    </quantic-field>"
+      ],
       "relatedTo": [
         "quantic-field-group",
         "quantic-fieldset"
@@ -2388,10 +2432,12 @@
         "<quantic-layout>\n      <span slot=\"titlebar\">Dashboard</span>\n      <quantic-navbar slot=\"navbar\"></quantic-navbar>\n      <quantic-sidebar slot=\"sidebar\" collapsible>\n        <div\n          slot=\"header\"\n          style=\"display: flex; align-items: center; gap: var(--quantic-spacing-2); padding: var(--quantic-spacing-2); border-bottom: 1px solid var(--quantic-border-secondary); margin-bottom: var(--quantic-spacing-2);\"\n        >\n          <quantic-icon-brand-fuzzball-solid\n            size=\"sm\"\n          ></quantic-icon-brand-fuzzball-solid>\n          <span\n            style=\"font-weight: var(--quantic-font-weight-semibold); font-size: var(--quantic-font-size-sm);\"\n            >CIQ Engineering</span\n          >\n        </div>\n        \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 1\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 2\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 3\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 4\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 5\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 6\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 7\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 8\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 9\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 10\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 11\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 12\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 13\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 14\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 15\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 16\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 17\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 18\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 19\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n            <quantic-sidebar-menu-item href=\"#\" label=\"Nav item 20\">\n              <quantic-icon-lucide-circle\n                slot=\"icon\"\n                size=\"sm\"\n              ></quantic-icon-lucide-circle>\n            </quantic-sidebar-menu-item>\n          \n      </quantic-sidebar>\n      <quantic-page slot=\"body\">\n        <quantic-panel variant=\"solid\">\n          <quantic-panel-header slot=\"header\"\n            >Sticky sidebar header</quantic-panel-header\n          >\n          Scroll the sidebar — the header above the nav items stays fixed.\n        </quantic-panel>\n      </quantic-page>\n    </quantic-layout>",
         "<quantic-layout>\n      <span slot=\"titlebar\">Volumes</span>\n      <quantic-navbar slot=\"navbar\"></quantic-navbar>\n      <quantic-sidebar slot=\"sidebar\" collapsible>\n        <quantic-sidebar-menu-item href=\"#\" label=\"Volumes\" selected>\n          <quantic-icon-lucide-hard-drive\n            slot=\"icon\"\n            size=\"sm\"\n          ></quantic-icon-lucide-hard-drive>\n        </quantic-sidebar-menu-item>\n        <quantic-sidebar-menu-item href=\"#\" label=\"Nodes\">\n          <quantic-icon-lucide-network\n            slot=\"icon\"\n            size=\"sm\"\n          ></quantic-icon-lucide-network>\n        </quantic-sidebar-menu-item>\n      </quantic-sidebar>\n      <div\n        slot=\"toolbar\"\n        style=\"display: flex; align-items: center; gap: var(--quantic-spacing-2); padding: var(--quantic-spacing-3) var(--quantic-spacing-4); border-bottom: 1px solid var(--quantic-border-primary);\"\n      >\n        <quantic-button size=\"sm\" variant=\"outline\">Filter</quantic-button>\n        <quantic-button size=\"sm\" variant=\"outline\">Sort</quantic-button>\n        <quantic-button size=\"sm\" variant=\"primary\" style=\"margin-left: auto;\"\n          >New Volume</quantic-button\n        >\n      </div>\n      <quantic-page slot=\"body\">\n        \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 1</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 2</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 3</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 4</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 5</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 6</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 7</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 8</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 9</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 10</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 11</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 12</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 13</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 14</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 15</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 16</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 17</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 18</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 19</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 20</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 21</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 22</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 23</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 24</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 25</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 26</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 27</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 28</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 29</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n            <quantic-card variant=\"solid\" size=\"xs\">\n              <quantic-card-title>Volume 30</quantic-card-title>\n              The toolbar above stays fixed while this body scrolls.\n            </quantic-card>\n          \n      </quantic-page>\n    </quantic-layout>"
       ],
-      "subComponents": [
-        "quantic-sidebar",
+      "relatedTo": [
         "quantic-navbar",
         "quantic-page"
+      ],
+      "subComponents": [
+        "quantic-sidebar"
       ]
     },
     {
@@ -2635,6 +2681,12 @@
           "detail": "{ value: number | null }"
         }
       ],
+      "slots": [
+        {
+          "name": "prefix",
+          "description": "Leading content (e.g. icon or unit symbol)."
+        }
+      ],
       "examples": [
         "<quantic-number-input\n    value=\"16\"\n    placeholder=\"0\"\n    size=\"md\"\n    name=\"number-input\"\n  ></quantic-number-input>",
         "<quantic-number-input\n    value=\"16\"\n    placeholder=\"0\"\n    size=\"md\"\n    name=\"number-input\"\n    disabled\n  ></quantic-number-input>",
@@ -2771,7 +2823,8 @@
       "relatedTo": [
         "quantic-option-card-group",
         "quantic-field"
-      ]
+      ],
+      "subComponentOf": "quantic-option-card-group"
     },
     {
       "tag": "quantic-option-card-group",
@@ -3082,9 +3135,6 @@
       ],
       "relatedTo": [
         "quantic-panel"
-      ],
-      "subComponents": [
-        "quantic-panel"
       ]
     },
     {
@@ -3145,7 +3195,8 @@
       ],
       "relatedTo": [
         "quantic-panel"
-      ]
+      ],
+      "subComponentOf": "quantic-panel"
     },
     {
       "tag": "quantic-popover",
@@ -3299,7 +3350,8 @@
       ],
       "relatedTo": [
         "quantic-popover"
-      ]
+      ],
+      "subComponentOf": "quantic-popover"
     },
     {
       "tag": "quantic-progress",
@@ -3500,6 +3552,12 @@
           "detail": "{ checked: boolean }"
         }
       ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Label content, used when the label prop is not set."
+        }
+      ],
       "examples": [
         "<quantic-radio\n    name=\"radio-example\"\n    value=\"option1\"\n    checked\n    label=\"Radio label\"\n  ></quantic-radio>",
         "<quantic-radio\n    name=\"radio-example\"\n    value=\"option1\"\n    label=\"Radio label\"\n  ></quantic-radio>",
@@ -3702,6 +3760,20 @@
           "detail": "{ value: string }"
         }
       ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Native option elements, read to build the list. Never rendered directly."
+        },
+        {
+          "name": "prefix",
+          "description": "Leading content (e.g. icon)."
+        },
+        {
+          "name": "suffix",
+          "description": "Trailing content, replacing the default chevron."
+        }
+      ],
       "examples": [
         "<div style=\"max-width: 320px\">\n    <quantic-select\n      size=\"md\"\n      name=\"select\"\n      value=\"option2\"\n      placeholder=\"\"\n    >\n      <option value=\"option1\">Option 1</option>\n      <option value=\"option2\">Option 2</option>\n      <option value=\"option3\">Option 3</option>\n    </quantic-select>\n  </div>",
         "<div style=\"max-width: 320px\">\n    <quantic-select\n      size=\"md\"\n      name=\"select\"\n      value=\"option2\"\n      placeholder=\"\"\n      disabled\n    >\n      <option value=\"option1\">Option 1</option>\n      <option value=\"option2\">Option 2</option>\n      <option value=\"option3\">Option 3</option>\n    </quantic-select>\n  </div>",
@@ -3755,6 +3827,7 @@
         "quantic-layout",
         "quantic-sidebar-menu-item"
       ],
+      "subComponentOf": "quantic-layout",
       "subComponents": [
         "quantic-sidebar-menu-item",
         "quantic-sidebar-menu-item-group"
@@ -3795,6 +3868,10 @@
         }
       ],
       "slots": [
+        {
+          "name": "",
+          "description": "Label content, used when the label prop is not set."
+        },
         {
           "name": "icon",
           "description": "Icon displayed to the left of the label."
@@ -3807,7 +3884,8 @@
       "relatedTo": [
         "quantic-sidebar",
         "quantic-sidebar-menu-item-group"
-      ]
+      ],
+      "subComponentOf": "quantic-sidebar"
     },
     {
       "tag": "quantic-sidebar-menu-item-group",
@@ -3830,7 +3908,8 @@
       "relatedTo": [
         "quantic-sidebar",
         "quantic-sidebar-menu-item"
-      ]
+      ],
+      "subComponentOf": "quantic-sidebar"
     },
     {
       "tag": "quantic-skeleton",
@@ -4062,7 +4141,8 @@
       ],
       "relatedTo": [
         "quantic-splitter-group"
-      ]
+      ],
+      "subComponentOf": "quantic-splitter-group"
     },
     {
       "tag": "quantic-status-badge",
@@ -4269,7 +4349,8 @@
       "relatedTo": [
         "quantic-tabs",
         "quantic-tab-panel"
-      ]
+      ],
+      "subComponentOf": "quantic-tabs"
     },
     {
       "tag": "quantic-tab-panel",
@@ -4298,7 +4379,8 @@
       "relatedTo": [
         "quantic-tabs",
         "quantic-tab-button"
-      ]
+      ],
+      "subComponentOf": "quantic-tabs"
     },
     {
       "tag": "quantic-table",
@@ -4383,13 +4465,13 @@
         "<quantic-table size=\"sm\" variant=\"outline\">\n      <quantic-table-controls slot=\"toolbar\">\n        <quantic-text-input\n          size=\"sm\"\n          placeholder=\"Search by name\"\n          style=\"max-width: 250px;\"\n        ></quantic-text-input>\n        <div slot=\"end\" style=\"display: flex; gap: var(--quantic-spacing-2);\">\n          <quantic-button variant=\"outline\" size=\"sm\" icon>\n            <quantic-icon-lucide-check size=\"xs\"></quantic-icon-lucide-check>\n          </quantic-button>\n          <quantic-button variant=\"outline\" size=\"sm\" icon>\n            <quantic-icon-lucide-download size=\"xs\"></quantic-icon-lucide-download>\n          </quantic-button>\n          <quantic-button variant=\"outline\" size=\"sm\">\n            + Add secret\n          </quantic-button>\n        </div>\n      </quantic-table-controls>\n      \n  <quantic-table-header slot=\"header\">\n    <quantic-table-row>\n      <quantic-table-head sortable sort-key=\"name\">Name</quantic-table-head>\n      <quantic-table-head sortable sort-key=\"scope\">Scope</quantic-table-head>\n      <quantic-table-head>Type</quantic-table-head>\n      <quantic-table-head>Created</quantic-table-head>\n      <quantic-table-head sortable sort-key=\"updated\" sort-direction=\"desc\">Updated</quantic-table-head>\n    </quantic-table-row>\n  </quantic-table-header>\n\n  <quantic-table-body>\n    <quantic-table-row>\n      <quantic-table-cell>Test Secret</quantic-table-cell>\n      <quantic-table-cell>User</quantic-table-cell>\n      <quantic-table-cell>S3</quantic-table-cell>\n      <quantic-table-cell>8/13/25, 11:13pm</quantic-table-cell>\n      <quantic-table-cell>8/13/25, 11:13pm</quantic-table-cell>\n    </quantic-table-row>\n\n    <quantic-table-row>\n      <quantic-table-cell>Test Secret</quantic-table-cell>\n      <quantic-table-cell>User</quantic-table-cell>\n      <quantic-table-cell>S3</quantic-table-cell>\n      <quantic-table-cell>8/13/25, 11:13pm</quantic-table-cell>\n      <quantic-table-cell>8/13/25, 11:13pm</quantic-table-cell>\n    </quantic-table-row>\n\n    <quantic-table-row>\n      <quantic-table-cell>Test Secret</quantic-table-cell>\n      <quantic-table-cell>User</quantic-table-cell>\n      <quantic-table-cell>S3</quantic-table-cell>\n      <quantic-table-cell>8/13/25, 11:13pm</quantic-table-cell>\n      <quantic-table-cell>8/13/25, 11:13pm</quantic-table-cell>\n    </quantic-table-row>\n\n    <quantic-table-row>\n      <quantic-table-cell>Test Secret</quantic-table-cell>\n      <quantic-table-cell>User</quantic-table-cell>\n      <quantic-table-cell>S3</quantic-table-cell>\n      <quantic-table-cell>8/13/25, 11:13pm</quantic-table-cell>\n      <quantic-table-cell>8/13/25, 11:13pm</quantic-table-cell>\n    </quantic-table-row>\n\n    <quantic-table-row>\n      <quantic-table-cell>Test Secret</quantic-table-cell>\n      <quantic-table-cell>User</quantic-table-cell>\n      <quantic-table-cell>S3</quantic-table-cell>\n      <quantic-table-cell>8/13/25, 11:13pm</quantic-table-cell>\n      <quantic-table-cell>8/13/25, 11:13pm</quantic-table-cell>\n    </quantic-table-row>\n  </quantic-table-body>\n\n      <quantic-table-controls slot=\"controls\">\n        <quantic-button variant=\"outline\" size=\"sm\" icon>\n          <quantic-icon-lucide-chevron-left size=\"xs\"></quantic-icon-lucide-chevron-left>\n        </quantic-button>\n        <quantic-button variant=\"outline\" size=\"sm\" icon slot=\"end\">\n          <quantic-icon-lucide-chevron-right size=\"xs\"></quantic-icon-lucide-chevron-right>\n        </quantic-button>\n      </quantic-table-controls>\n    </quantic-table>"
       ],
       "subComponents": [
-        "quantic-table-header",
         "quantic-table-body",
-        "quantic-table-footer",
-        "quantic-table-row",
         "quantic-table-cell",
+        "quantic-table-controls",
+        "quantic-table-footer",
         "quantic-table-head",
-        "quantic-table-controls"
+        "quantic-table-header",
+        "quantic-table-row"
       ]
     },
     {
@@ -4413,7 +4495,8 @@
       "relatedTo": [
         "quantic-table",
         "quantic-table-row"
-      ]
+      ],
+      "subComponentOf": "quantic-table"
     },
     {
       "tag": "quantic-table-cell",
@@ -4452,7 +4535,8 @@
       "relatedTo": [
         "quantic-table-row",
         "quantic-table"
-      ]
+      ],
+      "subComponentOf": "quantic-table"
     },
     {
       "tag": "quantic-table-controls",
@@ -4477,7 +4561,8 @@
       ],
       "relatedTo": [
         "quantic-table"
-      ]
+      ],
+      "subComponentOf": "quantic-table"
     },
     {
       "tag": "quantic-table-footer",
@@ -4500,7 +4585,8 @@
       "relatedTo": [
         "quantic-table",
         "quantic-table-row"
-      ]
+      ],
+      "subComponentOf": "quantic-table"
     },
     {
       "tag": "quantic-table-head",
@@ -4563,7 +4649,8 @@
       "relatedTo": [
         "quantic-table-header",
         "quantic-table"
-      ]
+      ],
+      "subComponentOf": "quantic-table"
     },
     {
       "tag": "quantic-table-header",
@@ -4586,7 +4673,8 @@
       "relatedTo": [
         "quantic-table",
         "quantic-table-head"
-      ]
+      ],
+      "subComponentOf": "quantic-table"
     },
     {
       "tag": "quantic-table-row",
@@ -4609,7 +4697,8 @@
       "relatedTo": [
         "quantic-table-body",
         "quantic-table-cell"
-      ]
+      ],
+      "subComponentOf": "quantic-table"
     },
     {
       "tag": "quantic-tabs",
@@ -4793,10 +4882,7 @@
       ],
       "relatedTo": [
         "quantic-tag",
-        "quantic-badge-group"
-      ],
-      "subComponents": [
-        "quantic-tag",
+        "quantic-badge-group",
         "quantic-status-tag",
         "quantic-count-tag"
       ]
@@ -4976,6 +5062,16 @@
           "detail": "{ value: string }"
         }
       ],
+      "slots": [
+        {
+          "name": "prefix",
+          "description": "Leading content (e.g. icon or currency symbol)."
+        },
+        {
+          "name": "suffix",
+          "description": "Trailing content (e.g. icon or unit label)."
+        }
+      ],
       "examples": [
         "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\"></quantic-text-input>",
         "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\" disabled></quantic-text-input>",
@@ -5491,7 +5587,8 @@
       ],
       "relatedTo": [
         "quantic-tooltip"
-      ]
+      ],
+      "subComponentOf": "quantic-tooltip"
     },
     {
       "tag": "quantic-truncate",

package/dist/number-input/index.js

@@ -179,6 +179,7 @@ NumberInput.meta = {
     description: 'Numeric input field with optional min/max/step constraints. ' +
         'Form-associated. Wrap in quantic-field to add a label and validation messaging.',
     category: 'form',
+    slots: { prefix: { description: 'Leading content (e.g. icon or unit symbol).' } },
     relatedTo: ['quantic-field', 'quantic-text-input'],
 };
 NumberInput.formAssociated = true;

package/dist/option-card/option-card-group.component.js

@@ -221,7 +221,6 @@ OptionCardGroup.meta = {
     slots: {
         '': { description: 'Place quantic-option-card elements here.' },
     },
-    subComponents: ['quantic-option-card'],
     relatedTo: ['quantic-field'],
 };
 OptionCardGroup.formAssociated = true;

package/dist/option-card/option-card.component.js

@@ -176,6 +176,7 @@ OptionCard.meta = {
         'Behaves like a radio or checkbox but displayed as a card. ' +
         'Use inside quantic-option-card-group to manage selection logic.',
     category: 'form',
+    subComponentOf: 'quantic-option-card-group',
     slots: {
         '': { description: 'Main label content of the card.' },
         icon: { description: 'Optional leading icon.' },

package/dist/panel/panel-group.component.js

@@ -35,7 +35,6 @@ PanelGroup.meta = {
     slots: {
         '': { description: 'Place quantic-panel elements here.' },
     },
-    subComponents: ['quantic-panel'],
     relatedTo: ['quantic-panel'],
 };
 PanelGroup.styles = css `

package/dist/panel/panel-header.component.js

@@ -44,6 +44,7 @@ PanelHeader.meta = {
     description: 'Header sub-component for quantic-panel. ' +
         'Contains title, optional pretitle, subtitle, and an actions slot.',
     category: 'display',
+    subComponentOf: 'quantic-panel',
     slots: {
         pretitle: { description: 'Small label above the main title.' },
         '': { description: 'Main title content.' },

package/dist/panel/panel.component.js

@@ -47,7 +47,6 @@ Panel.meta = {
         '': { description: 'Main body content.' },
         footer: { description: 'Footer content.' },
     },
-    subComponents: ['quantic-panel-header'],
     relatedTo: ['quantic-panel-group', 'quantic-card'],
 };
 Panel.styles = css `

package/dist/popover/popover-popup.js

@@ -32,6 +32,7 @@ PopoverPopup.meta = {
         'Positioned fixed relative to the trigger via @floating-ui. ' +
         'Do not use directly — use quantic-popover instead.',
     category: 'feedback',
+    subComponentOf: 'quantic-popover',
     slots: {
         header: { description: 'Optional header section.' },
         '': { description: 'Main popup body content.' },

package/dist/popover/popover.js

@@ -300,7 +300,6 @@ Popover.meta = {
         '': { description: 'Main body content of the popup.' },
         footer: { description: 'Optional footer content inside the popup.' },
     },
-    subComponents: ['quantic-popover-popup'],
 };
 Popover.styles = css `
     :host {