@redvars/peacock 3.3.1 → 3.3.2

package/dist/custom-elements-jsdocs.json

@@ -1381,31 +1381,143 @@
     }
   },
   {
-    "rawTag": "chart-doughnut",
-    "label": "Chart Doughnut",
+    "rawTag": "card",
+    "label": "Card",
     "jsdoc": {
       "@label": [
         {
           "kind": "text",
-          "text": "Chart Doughnut"
+          "text": "Card"
         }
       ],
       "@tag": [
         {
           "kind": "text",
-          "text": "wc-chart-doughnut"
+          "text": "wc-card"
         }
       ],
       "@rawTag": [
         {
           "kind": "text",
-          "text": "chart-doughnut"
+          "text": "card"
         }
       ],
       "@summary": [
         {
           "kind": "text",
-          "text": "A doughnut chart is a circular chart with a blank center. The area in the center can be used to display information."
+          "text": "A Material 3 inspired card surface for grouping related content."
+        }
+      ],
+      "@cssprop": [
+        {
+          "kind": "text",
+          "text": "--card-gap - Gap between slotted children."
+        }
+      ],
+      "@example": [
+        {
+          "kind": "code",
+          "text": "```html\n<wc-card variant=\"outlined\">\n  <h3>Title</h3>\n  <p>Supportive text</p>\n</wc-card>\n```"
+        }
+      ]
+    },
+    "customElement": {
+      "kind": "class",
+      "description": "",
+      "name": "Card",
+      "cssProperties": [
+        {
+          "description": "Inner padding for the card container. Defaults to 1rem.",
+          "name": "--card-padding"
+        },
+        {
+          "description": "Corner radius for the card container. Defaults to a large radius.",
+          "name": "--card-shape"
+        },
+        {
+          "description": "Gap between slotted children.",
+          "name": "--card-gap"
+        }
+      ],
+      "members": [
+        {
+          "kind": "field",
+          "name": "variant",
+          "type": {
+            "text": "CardVariant"
+          },
+          "default": "'elevated'",
+          "attribute": "variant",
+          "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "elevation",
+          "type": {
+            "text": "CardElevation"
+          },
+          "default": "1",
+          "attribute": "elevation",
+          "reflects": true
+        }
+      ],
+      "attributes": [
+        {
+          "name": "variant",
+          "type": {
+            "text": "CardVariant"
+          },
+          "default": "'elevated'",
+          "fieldName": "variant"
+        },
+        {
+          "name": "elevation",
+          "type": {
+            "text": "CardElevation"
+          },
+          "default": "1",
+          "fieldName": "elevation"
+        }
+      ],
+      "superclass": {
+        "name": "LitElement",
+        "package": "lit"
+      },
+      "tagName": "wc-card",
+      "customElement": true,
+      "summary": "A Material 3 inspired card surface for grouping related content.",
+      "rawTag": {
+        "name": "card",
+        "description": ""
+      }
+    }
+  },
+  {
+    "rawTag": "chart-bar",
+    "label": "Chart Bar",
+    "jsdoc": {
+      "@label": [
+        {
+          "kind": "text",
+          "text": "Chart Bar"
+        }
+      ],
+      "@tag": [
+        {
+          "kind": "text",
+          "text": "wc-chart-bar"
+        }
+      ],
+      "@rawTag": [
+        {
+          "kind": "text",
+          "text": "chart-bar"
+        }
+      ],
+      "@summary": [
+        {
+          "kind": "text",
+          "text": "A vertical bar chart that follows Material Design 3 color and spacing tokens."
         }
       ],
       "@tags": [
@@ -1417,14 +1529,14 @@
       "@example": [
         {
           "kind": "code",
-          "text": "```html\n<wc-chart-doughnut width=\"400\" label=\"Total\"></wc-chart-doughnut>\n<script>\n  document.querySelector('wc-chart-doughnut').data = [\n    { name: 'A', value: 30, label: 'Category A' },\n    { name: 'B', value: 50, label: 'Category B' },\n    { name: 'C', value: 20, label: 'Category C' },\n  ];\n</script>\n```"
+          "text": "```html\n<wc-chart-bar width=\"520\" height=\"320\"></wc-chart-bar>\n<script>\n  document.querySelector('wc-chart-bar').data = [\n    { name: 'apples', label: 'Apples', value: 20 },\n    { name: 'bananas', label: 'Bananas', value: 35 },\n    { name: 'cherries', label: 'Cherries', value: 15 },\n  ];\n</script>\n```"
         }
       ]
     },
     "customElement": {
       "kind": "class",
       "description": "",
-      "name": "ChartDoughnut",
+      "name": "ChartBar",
       "members": [
         {
           "kind": "field",
@@ -1441,37 +1553,36 @@
             "text": "number"
           },
           "default": "0",
-          "description": "Width (and height) of the chart in pixels.",
+          "description": "Width of the chart in pixels.",
           "attribute": "width",
           "reflects": true
         },
         {
           "kind": "field",
-          "name": "margin",
+          "name": "height",
           "type": {
             "text": "number"
           },
-          "default": "10",
-          "description": "Margin around the chart.",
-          "attribute": "margin",
+          "default": "320",
+          "description": "Height of the chart in pixels.",
+          "attribute": "height",
           "reflects": true
         },
         {
           "kind": "field",
-          "name": "showLabels",
+          "name": "margin",
           "type": {
-            "text": "boolean"
+            "text": "number"
           },
-          "default": "true",
-          "description": "Whether to show labels outside the chart.",
-          "attribute": "show-labels",
-          "reflects": true
+          "default": "24",
+          "description": "Margin around the chart drawing area.",
+          "attribute": "margin"
         },
         {
           "kind": "field",
           "name": "data",
           "type": {
-            "text": "ChartDoughnutItem[]"
+            "text": "ChartBarItem[]"
           },
           "default": "[]",
           "description": "Chart data array. Each item should have name, value, and optional label and color.",
@@ -1479,12 +1590,13 @@
         },
         {
           "kind": "field",
-          "name": "label",
+          "name": "showValues",
           "type": {
-            "text": "string | undefined"
+            "text": "boolean"
           },
-          "description": "Label displayed in the center of the doughnut.",
-          "attribute": "label"
+          "default": "true",
+          "description": "Whether to render value labels above bars.",
+          "attribute": "show-values"
         },
         {
           "kind": "field",
@@ -1502,33 +1614,33 @@
         },
         {
           "kind": "method",
-          "name": "_getRadius",
-          "privacy": "private",
-          "return": {
-            "type": {
-              "text": "number"
-            }
-          }
+          "name": "_getPaletteScale",
+          "privacy": "private"
         },
         {
           "kind": "method",
-          "name": "_getTotal",
+          "name": "_resolveColor",
           "privacy": "private",
-          "return": {
-            "type": {
-              "text": "number"
+          "parameters": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "override",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "name": "scale",
+              "type": {
+                "text": "d3.ScaleOrdinal<string, string>"
+              }
             }
-          }
-        },
-        {
-          "kind": "method",
-          "name": "_getPieData",
-          "privacy": "private"
-        },
-        {
-          "kind": "method",
-          "name": "_getColorScale",
-          "privacy": "private"
+          ]
         },
         {
           "kind": "method",
@@ -1551,84 +1663,85 @@
             "text": "number"
           },
           "default": "0",
-          "description": "Width (and height) of the chart in pixels.",
+          "description": "Width of the chart in pixels.",
           "fieldName": "width"
         },
         {
-          "name": "margin",
+          "name": "height",
           "type": {
             "text": "number"
           },
-          "default": "10",
-          "description": "Margin around the chart.",
-          "fieldName": "margin"
+          "default": "DEFAULT_HEIGHT",
+          "description": "Height of the chart in pixels.",
+          "fieldName": "height"
         },
         {
-          "name": "show-labels",
+          "name": "margin",
           "type": {
-            "text": "boolean"
+            "text": "number"
           },
-          "default": "true",
-          "description": "Whether to show labels outside the chart.",
-          "fieldName": "showLabels"
+          "default": "24",
+          "description": "Margin around the chart drawing area.",
+          "fieldName": "margin"
         },
         {
           "name": "data",
           "type": {
-            "text": "ChartDoughnutItem[]"
+            "text": "ChartBarItem[]"
           },
           "default": "[]",
           "description": "Chart data array. Each item should have name, value, and optional label and color.",
           "fieldName": "data"
         },
         {
-          "name": "label",
+          "name": "show-values",
           "type": {
-            "text": "string | undefined"
+            "text": "boolean"
           },
-          "description": "Label displayed in the center of the doughnut.",
-          "fieldName": "label"
+          "default": "true",
+          "description": "Whether to render value labels above bars.",
+          "fieldName": "showValues"
         }
       ],
       "superclass": {
         "name": "LitElement",
         "package": "lit"
       },
-      "tagName": "wc-chart-doughnut",
+      "tagName": "wc-chart-bar",
       "customElement": true,
-      "summary": "A doughnut chart is a circular chart with a blank center. The area in the center can be used to display information.",
+      "summary": "A vertical bar chart that follows Material Design 3 color and spacing tokens.",
       "rawTag": {
-        "name": "chart-doughnut",
+        "name": "chart-bar",
         "description": ""
       }
     }
   },
   {
-    "rawTag": "chart-pie",
-    "label": "Chart Pie",
+    "rawTag": "chart-donut",
+    "label": "Chart Donut",
     "jsdoc": {
       "@label": [
         {
           "kind": "text",
-          "text": "Chart Pie"
+          "text": "Chart Donut"
         }
       ],
       "@tag": [
         {
           "kind": "text",
-          "text": "wc-chart-pie"
+          "text": "wc-chart-donut"
         }
       ],
       "@rawTag": [
         {
           "kind": "text",
-          "text": "chart-pie"
+          "text": "chart-donut"
         }
       ],
       "@summary": [
         {
           "kind": "text",
-          "text": "A pie chart is a circular statistical graphic that visually represents numerical proportions."
+          "text": "A donut chart is a circular chart with a blank center. The area in the center can be used to display information."
         }
       ],
       "@tags": [
@@ -1640,14 +1753,14 @@
       "@example": [
         {
           "kind": "code",
-          "text": "```html\n<wc-chart-pie width=\"400\"></wc-chart-pie>\n<script>\n  document.querySelector('wc-chart-pie').data = [\n    { name: 'A', value: 30, label: 'Category A' },\n    { name: 'B', value: 50, label: 'Category B' },\n    { name: 'C', value: 20, label: 'Category C' },\n  ];\n</script>\n```"
+          "text": "```html\n<wc-chart-donut width=\"400\" label=\"Total\"></wc-chart-donut>\n<script>\n  document.querySelector('wc-chart-donut').data = [\n    { name: 'A', value: 30, label: 'Category A' },\n    { name: 'B', value: 50, label: 'Category B' },\n    { name: 'C', value: 20, label: 'Category C' },\n  ];\n</script>\n```"
         }
       ]
     },
     "customElement": {
       "kind": "class",
       "description": "",
-      "name": "ChartPie",
+      "name": "ChartDonut",
       "members": [
         {
           "kind": "field",
@@ -1694,12 +1807,21 @@
           "kind": "field",
           "name": "data",
           "type": {
-            "text": "ChartPieItem[]"
+            "text": "ChartDonutItem[]"
           },
           "default": "[]",
           "description": "Chart data array. Each item should have name, value, and optional label and color.",
           "attribute": "data"
         },
+        {
+          "kind": "field",
+          "name": "label",
+          "type": {
+            "text": "string | undefined"
+          },
+          "description": "Label displayed in the center of the donut.",
+          "attribute": "label"
+        },
         {
           "kind": "field",
           "name": "_initialized",
@@ -1724,6 +1846,16 @@
             }
           }
         },
+        {
+          "kind": "method",
+          "name": "_getTotal",
+          "privacy": "private",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          }
+        },
         {
           "kind": "method",
           "name": "_getPieData",
@@ -1779,641 +1911,572 @@
         {
           "name": "data",
           "type": {
-            "text": "ChartPieItem[]"
+            "text": "ChartDonutItem[]"
           },
           "default": "[]",
           "description": "Chart data array. Each item should have name, value, and optional label and color.",
           "fieldName": "data"
+        },
+        {
+          "name": "label",
+          "type": {
+            "text": "string | undefined"
+          },
+          "description": "Label displayed in the center of the donut.",
+          "fieldName": "label"
         }
       ],
       "superclass": {
         "name": "LitElement",
         "package": "lit"
       },
-      "tagName": "wc-chart-pie",
+      "tagName": "wc-chart-donut",
       "customElement": true,
-      "summary": "A pie chart is a circular statistical graphic that visually represents numerical proportions.",
+      "summary": "A donut chart is a circular chart with a blank center. The area in the center can be used to display information.",
       "rawTag": {
-        "name": "chart-pie",
+        "name": "chart-donut",
         "description": ""
       }
     }
   },
   {
-    "rawTag": "chip",
-    "label": "Chip",
+    "rawTag": "chart-doughnut",
+    "label": "Chart Doughnut",
     "jsdoc": {
       "@label": [
         {
           "kind": "text",
-          "text": "Chip"
+          "text": "Chart Doughnut"
         }
       ],
       "@tag": [
         {
           "kind": "text",
-          "text": "wc-chip"
+          "text": "wc-chart-doughnut"
         }
       ],
       "@rawTag": [
         {
           "kind": "text",
-          "text": "chip"
+          "text": "chart-doughnut"
         }
       ],
       "@summary": [
         {
           "kind": "text",
-          "text": "Chip component for displaying compact information with optional actions."
+          "text": "A doughnut chart is a circular chart with a blank center. The area in the center can be used to display information."
         }
       ],
       "@tags": [
         {
           "kind": "text",
-          "text": "display"
+          "text": "charts"
         }
       ],
       "@example": [
         {
           "kind": "code",
-          "text": "```html\n<wc-chip>Chip content</wc-chip>\n```"
+          "text": "```html\n<wc-chart-doughnut width=\"400\" label=\"Total\"></wc-chart-doughnut>\n<script>\n  document.querySelector('wc-chart-doughnut').data = [\n    { name: 'A', value: 30, label: 'Category A' },\n    { name: 'B', value: 50, label: 'Category B' },\n    { name: 'C', value: 20, label: 'Category C' },\n  ];\n</script>\n```"
         }
       ]
     },
     "customElement": {
       "kind": "class",
       "description": "",
-      "name": "Chip",
+      "name": "ChartDoughnut",
       "members": [
         {
           "kind": "field",
-          "name": "dismissible",
+          "name": "svgElement",
           "type": {
-            "text": "boolean"
+            "text": "SVGElement | undefined"
           },
-          "default": "false",
-          "description": "If true, the tag will have a close icon.",
-          "attribute": "dismissible"
+          "privacy": "private"
         },
         {
           "kind": "field",
-          "name": "color",
+          "name": "width",
           "type": {
-            "text": "| 'default'\n    | 'blue'\n    | 'green'\n    | 'red'\n    | 'yellow' | undefined"
+            "text": "number"
           },
-          "default": "'default'",
-          "description": "Tag color.",
-          "attribute": "color",
+          "default": "0",
+          "description": "Width (and height) of the chart in pixels.",
+          "attribute": "width",
           "reflects": true
         },
         {
           "kind": "field",
-          "name": "value",
+          "name": "margin",
           "type": {
-            "text": "string"
+            "text": "number"
           },
-          "default": "''",
-          "description": "Tag value.",
-          "attribute": "value",
+          "default": "10",
+          "description": "Margin around the chart.",
+          "attribute": "margin",
           "reflects": true
         },
         {
           "kind": "field",
-          "name": "selected",
+          "name": "showLabels",
           "type": {
             "text": "boolean"
           },
-          "default": "false",
-          "description": "If true, the tag will be selected.",
-          "attribute": "selected",
+          "default": "true",
+          "description": "Whether to show labels outside the chart.",
+          "attribute": "show-labels",
           "reflects": true
         },
         {
           "kind": "field",
-          "name": "imageSrc",
+          "name": "data",
+          "type": {
+            "text": "ChartDoughnutItem[]"
+          },
+          "default": "[]",
+          "description": "Chart data array. Each item should have name, value, and optional label and color.",
+          "attribute": "data"
+        },
+        {
+          "kind": "field",
+          "name": "label",
           "type": {
             "text": "string | undefined"
           },
-          "description": "Image source.",
-          "attribute": "imageSrc"
+          "description": "Label displayed in the center of the doughnut.",
+          "attribute": "label"
+        },
+        {
+          "kind": "field",
+          "name": "_initialized",
+          "type": {
+            "text": "boolean"
+          },
+          "privacy": "private",
+          "default": "false"
+        },
+        {
+          "kind": "field",
+          "name": "_debouncedRenderChart",
+          "privacy": "private"
         },
         {
           "kind": "method",
-          "name": "_dismissClickHandler",
+          "name": "_getRadius",
           "privacy": "private",
-          "parameters": [
-            {
-              "name": "e",
-              "type": {
-                "text": "MouseEvent"
-              }
+          "return": {
+            "type": {
+              "text": "number"
             }
-          ]
+          }
         },
         {
           "kind": "method",
-          "name": "_renderCloseButton",
+          "name": "_getTotal",
+          "privacy": "private",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          }
+        },
+        {
+          "kind": "method",
+          "name": "_getPieData",
           "privacy": "private"
         },
         {
           "kind": "method",
-          "name": "_renderImage",
+          "name": "_getColorScale",
           "privacy": "private"
-        }
-      ],
-      "events": [
+        },
         {
-          "name": "tag--dismiss",
-          "type": {
-            "text": "CustomEvent"
-          }
+          "kind": "method",
+          "name": "_renderChart",
+          "privacy": "private",
+          "parameters": [
+            {
+              "name": "animate",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ]
         }
       ],
       "attributes": [
         {
-          "name": "dismissible",
+          "name": "width",
           "type": {
-            "text": "boolean"
+            "text": "number"
           },
-          "default": "false",
-          "description": "If true, the tag will have a close icon.",
-          "fieldName": "dismissible"
+          "default": "0",
+          "description": "Width (and height) of the chart in pixels.",
+          "fieldName": "width"
         },
         {
-          "name": "color",
+          "name": "margin",
           "type": {
-            "text": "| 'default'\n    | 'blue'\n    | 'green'\n    | 'red'\n    | 'yellow' | undefined"
+            "text": "number"
           },
-          "default": "'default'",
-          "description": "Tag color.",
-          "fieldName": "color"
+          "default": "10",
+          "description": "Margin around the chart.",
+          "fieldName": "margin"
         },
         {
-          "name": "value",
+          "name": "show-labels",
           "type": {
-            "text": "string"
+            "text": "boolean"
           },
-          "default": "''",
-          "description": "Tag value.",
-          "fieldName": "value"
+          "default": "true",
+          "description": "Whether to show labels outside the chart.",
+          "fieldName": "showLabels"
         },
         {
-          "name": "selected",
+          "name": "data",
           "type": {
-            "text": "boolean"
+            "text": "ChartDoughnutItem[]"
           },
-          "default": "false",
-          "description": "If true, the tag will be selected.",
-          "fieldName": "selected"
+          "default": "[]",
+          "description": "Chart data array. Each item should have name, value, and optional label and color.",
+          "fieldName": "data"
         },
         {
-          "name": "imageSrc",
+          "name": "label",
           "type": {
             "text": "string | undefined"
           },
-          "description": "Image source.",
-          "fieldName": "imageSrc"
+          "description": "Label displayed in the center of the doughnut.",
+          "fieldName": "label"
         }
       ],
       "superclass": {
         "name": "LitElement",
         "package": "lit"
       },
-      "tagName": "wc-chip",
+      "tagName": "wc-chart-doughnut",
       "customElement": true,
-      "summary": "Chip component for displaying compact information with optional actions.",
+      "summary": "A doughnut chart is a circular chart with a blank center. The area in the center can be used to display information.",
       "rawTag": {
-        "name": "chip",
+        "name": "chart-doughnut",
         "description": ""
       }
     }
   },
   {
-    "rawTag": "circular-progress",
-    "label": "Circular Progress",
+    "rawTag": "chart-pie",
+    "label": "Chart Pie",
     "jsdoc": {
       "@label": [
         {
           "kind": "text",
-          "text": "Circular Progress"
+          "text": "Chart Pie"
         }
       ],
       "@tag": [
         {
           "kind": "text",
-          "text": "wc-circular-progress"
+          "text": "wc-chart-pie"
         }
       ],
       "@rawTag": [
         {
           "kind": "text",
-          "text": "circular-progress"
+          "text": "chart-pie"
         }
       ],
       "@summary": [
         {
           "kind": "text",
-          "text": "A circular progress indicator is a visual representation of progress toward a specific goal."
+          "text": "A pie chart is a circular statistical graphic that visually represents numerical proportions."
         }
       ],
       "@tags": [
         {
           "kind": "text",
-          "text": "display"
+          "text": "charts"
         }
       ],
       "@example": [
         {
           "kind": "code",
-          "text": "```html\n<wc-circular-progress value=\"30\"></wc-circular-progress>\n```"
+          "text": "```html\n<wc-chart-pie width=\"400\"></wc-chart-pie>\n<script>\n  document.querySelector('wc-chart-pie').data = [\n    { name: 'A', value: 30, label: 'Category A' },\n    { name: 'B', value: 50, label: 'Category B' },\n    { name: 'C', value: 20, label: 'Category C' },\n  ];\n</script>\n```"
         }
       ]
     },
     "customElement": {
       "kind": "class",
       "description": "",
-      "name": "CircularProgress",
+      "name": "ChartPie",
       "members": [
         {
           "kind": "field",
-          "name": "value",
+          "name": "svgElement",
           "type": {
-            "text": "number | undefined"
+            "text": "SVGElement | undefined"
           },
-          "description": "The current value.",
-          "attribute": "value",
-          "inheritedFrom": {
-            "name": "BaseProgress",
-            "module": "src/progress/base-progress.ts"
-          }
+          "privacy": "private"
         },
         {
           "kind": "field",
-          "name": "indeterminate",
+          "name": "width",
           "type": {
-            "text": "boolean"
+            "text": "number"
           },
-          "default": "false",
-          "attribute": "indeterminate",
-          "inheritedFrom": {
-            "name": "BaseProgress",
-            "module": "src/progress/base-progress.ts"
-          }
+          "default": "0",
+          "description": "Width (and height) of the chart in pixels.",
+          "attribute": "width",
+          "reflects": true
         },
         {
           "kind": "field",
-          "name": "label",
+          "name": "margin",
           "type": {
-            "text": "string | undefined"
+            "text": "number"
           },
-          "description": "A label describing the progress bar.",
-          "attribute": "label",
-          "inheritedFrom": {
-            "name": "BaseProgress",
-            "module": "src/progress/base-progress.ts"
-          }
+          "default": "10",
+          "description": "Margin around the chart.",
+          "attribute": "margin",
+          "reflects": true
         },
         {
           "kind": "field",
-          "name": "helperText",
+          "name": "showLabels",
           "type": {
-            "text": "string | undefined"
+            "text": "boolean"
           },
-          "attribute": "helper-text",
-          "inheritedFrom": {
-            "name": "BaseProgress",
-            "module": "src/progress/base-progress.ts"
-          }
+          "default": "true",
+          "description": "Whether to show labels outside the chart.",
+          "attribute": "show-labels",
+          "reflects": true
         },
         {
           "kind": "field",
-          "name": "inline",
+          "name": "data",
+          "type": {
+            "text": "ChartPieItem[]"
+          },
+          "default": "[]",
+          "description": "Chart data array. Each item should have name, value, and optional label and color.",
+          "attribute": "data"
+        },
+        {
+          "kind": "field",
+          "name": "_initialized",
           "type": {
             "text": "boolean"
           },
-          "default": "false",
-          "attribute": "inline",
-          "inheritedFrom": {
-            "name": "BaseProgress",
-            "module": "src/progress/base-progress.ts"
-          }
+          "privacy": "private",
+          "default": "false"
+        },
+        {
+          "kind": "field",
+          "name": "_debouncedRenderChart",
+          "privacy": "private"
         },
         {
           "kind": "method",
-          "name": "__getPercentageValue",
+          "name": "_getRadius",
+          "privacy": "private",
           "return": {
             "type": {
               "text": "number"
             }
-          },
-          "inheritedFrom": {
-            "name": "BaseProgress",
-            "module": "src/progress/base-progress.ts"
           }
-        }
-      ],
-      "superclass": {
-        "name": "BaseProgress",
-        "module": "/src/progress/base-progress.js"
-      },
-      "tagName": "wc-circular-progress",
-      "customElement": true,
-      "summary": "A circular progress indicator is a visual representation of progress toward a specific goal.",
-      "rawTag": {
-        "name": "circular-progress",
-        "description": ""
-      },
-      "attributes": [
+        },
         {
-          "name": "value",
-          "type": {
-            "text": "number | undefined"
-          },
-          "description": "The current value.",
-          "fieldName": "value",
-          "inheritedFrom": {
-            "name": "BaseProgress",
-            "module": "src/progress/base-progress.ts"
-          }
+          "kind": "method",
+          "name": "_getPieData",
+          "privacy": "private"
         },
         {
-          "name": "indeterminate",
-          "type": {
-            "text": "boolean"
-          },
-          "default": "false",
-          "fieldName": "indeterminate",
-          "inheritedFrom": {
-            "name": "BaseProgress",
-            "module": "src/progress/base-progress.ts"
-          }
+          "kind": "method",
+          "name": "_getColorScale",
+          "privacy": "private"
         },
         {
-          "name": "label",
-          "type": {
-            "text": "string | undefined"
-          },
-          "description": "A label describing the progress bar.",
-          "fieldName": "label",
-          "inheritedFrom": {
-            "name": "BaseProgress",
-            "module": "src/progress/base-progress.ts"
-          }
-        },
+          "kind": "method",
+          "name": "_renderChart",
+          "privacy": "private",
+          "parameters": [
+            {
+              "name": "animate",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ]
+        }
+      ],
+      "attributes": [
         {
-          "name": "helper-text",
+          "name": "width",
           "type": {
-            "text": "string | undefined"
+            "text": "number"
           },
-          "fieldName": "helperText",
-          "inheritedFrom": {
-            "name": "BaseProgress",
-            "module": "src/progress/base-progress.ts"
-          }
+          "default": "0",
+          "description": "Width (and height) of the chart in pixels.",
+          "fieldName": "width"
         },
         {
-          "name": "inline",
+          "name": "margin",
           "type": {
-            "text": "boolean"
+            "text": "number"
           },
-          "default": "false",
-          "fieldName": "inline",
-          "inheritedFrom": {
-            "name": "BaseProgress",
-            "module": "src/progress/base-progress.ts"
-          }
-        }
-      ]
-    }
-  },
-  {
-    "rawTag": "clock",
-    "label": "Clock",
-    "jsdoc": {
-      "@label": [
-        {
-          "kind": "text",
-          "text": "Clock"
-        }
-      ],
-      "@tag": [
-        {
-          "kind": "text",
-          "text": "wc-clock"
-        }
-      ],
-      "@rawTag": [
-        {
-          "kind": "text",
-          "text": "clock"
-        }
-      ],
-      "@summary": [
-        {
-          "kind": "text",
-          "text": "Displays the current time in a given timezone."
-        }
-      ],
-      "@overview": [
-        {
-          "kind": "text",
-          "text": "- Clocks are used to display the current time in a specified timezone.\n - They can be displayed in various formats, including 12-hour and 24-hour time."
-        }
-      ],
-      "@tags": [
-        {
-          "kind": "text",
-          "text": "display"
-        }
-      ],
-      "@example": [
-        {
-          "kind": "code",
-          "text": "```html\n<wc-clock></wc-clock>\n```"
-        }
-      ]
-    },
-    "customElement": {
-      "kind": "class",
-      "description": "",
-      "name": "Clock",
-      "members": [
-        {
-          "kind": "field",
-          "name": "clockController",
-          "default": "new ClockController(this, 100)"
+          "default": "10",
+          "description": "Margin around the chart.",
+          "fieldName": "margin"
         },
         {
-          "kind": "field",
-          "name": "timezone",
+          "name": "show-labels",
           "type": {
-            "text": "string | undefined"
+            "text": "boolean"
           },
-          "attribute": "timezone"
+          "default": "true",
+          "description": "Whether to show labels outside the chart.",
+          "fieldName": "showLabels"
         },
         {
-          "kind": "method",
-          "name": "__formatDate",
-          "parameters": [
-            {
-              "name": "date",
-              "type": {
-                "text": "Date"
-              }
-            }
-          ]
-        }
-      ],
-      "attributes": [
-        {
-          "name": "timezone",
+          "name": "data",
           "type": {
-            "text": "string | undefined"
+            "text": "ChartPieItem[]"
           },
-          "fieldName": "timezone"
+          "default": "[]",
+          "description": "Chart data array. Each item should have name, value, and optional label and color.",
+          "fieldName": "data"
         }
       ],
       "superclass": {
         "name": "LitElement",
         "package": "lit"
       },
-      "tagName": "wc-clock",
+      "tagName": "wc-chart-pie",
       "customElement": true,
-      "summary": "Displays the current time in a given timezone.",
+      "summary": "A pie chart is a circular statistical graphic that visually represents numerical proportions.",
       "rawTag": {
-        "name": "clock",
+        "name": "chart-pie",
         "description": ""
       }
     }
   },
   {
-    "rawTag": "code-editor",
-    "label": "Code Editor",
+    "rawTag": "chart-stacked-bar",
+    "label": "Chart Stacked Bar",
     "jsdoc": {
       "@label": [
         {
           "kind": "text",
-          "text": "Code Editor"
+          "text": "Chart Stacked Bar"
         }
       ],
       "@tag": [
         {
           "kind": "text",
-          "text": "wc-code-editor"
+          "text": "wc-chart-stacked-bar"
         }
       ],
       "@rawTag": [
         {
           "kind": "text",
-          "text": "code-editor"
+          "text": "chart-stacked-bar"
         }
       ],
       "@summary": [
         {
           "kind": "text",
-          "text": "A Monaco-based code editing component with syntax highlighting and theming."
+          "text": "A stacked bar chart that groups series by category using Material Design 3 tokens."
         }
       ],
-      "@overview": [
-        {
-          "kind": "text",
-          "text": "- CodeEditor wraps Monaco Editor as a web component.\n - Supports JS/JSON/HTML languages, read-only mode, line numbers, minimap, and dark/light theme.\n - Emits "
-        },
-        {
-          "kind": "code",
-          "text": "`change`"
-        },
+      "@tags": [
         {
           "kind": "text",
-          "text": " when content is edited and updates value from property changes."
+          "text": "charts"
         }
       ],
       "@example": [
         {
           "kind": "code",
-          "text": "```html\n<wc-code-editor\n  language=\"javascript\"\n  style=\"width: 100%; --code-editor-height: 10rem;\"\n  value=\"function hello() { console.log('Hello'); }\"\n  lineNumbers=\"on\"\n  minimap=\"false\">\n</wc-code-editor>\n```"
-        }
-      ],
-      "@tags": [
-        {
-          "kind": "text",
-          "text": "input, editor"
+          "text": "```html\n<wc-chart-stacked-bar width=\"560\" height=\"360\"></wc-chart-stacked-bar>\n<script>\n  document.querySelector('wc-chart-stacked-bar').data = [\n    {\n      name: 'q1',\n      label: 'Q1',\n      segments: [\n        { name: 'mobile', label: 'Mobile', value: 40 },\n        { name: 'web', label: 'Web', value: 25 },\n        { name: 'store', label: 'Store', value: 15 },\n      ],\n    },\n    {\n      name: 'q2',\n      label: 'Q2',\n      segments: [\n        { name: 'mobile', label: 'Mobile', value: 32 },\n        { name: 'web', label: 'Web', value: 30 },\n        { name: 'store', label: 'Store', value: 18 },\n      ],\n    },\n  ];\n</script>\n```"
         }
       ]
     },
     "customElement": {
       "kind": "class",
       "description": "",
-      "name": "CodeEditor",
+      "name": "ChartStackedBar",
       "members": [
         {
           "kind": "field",
-          "name": "name",
+          "name": "svgElement",
           "type": {
-            "text": "string"
+            "text": "SVGElement | undefined"
           },
-          "default": "\"\"",
-          "attribute": "name"
+          "privacy": "private"
         },
         {
           "kind": "field",
-          "name": "value",
+          "name": "width",
           "type": {
-            "text": "any | undefined"
+            "text": "number"
           },
-          "default": "''",
-          "attribute": "value",
-          "inheritedFrom": {
-            "name": "BaseInput",
-            "module": "src/input/BaseInput.ts"
-          }
+          "default": "0",
+          "description": "Width of the chart in pixels.",
+          "attribute": "width",
+          "reflects": true
         },
         {
           "kind": "field",
-          "name": "language",
+          "name": "height",
           "type": {
-            "text": "'javascript' | 'json' | 'html'"
+            "text": "number"
           },
-          "default": "'javascript'",
-          "attribute": "language"
+          "default": "360",
+          "description": "Height of the chart in pixels.",
+          "attribute": "height",
+          "reflects": true
         },
         {
           "kind": "field",
-          "name": "libSource",
+          "name": "margin",
           "type": {
-            "text": "any"
+            "text": "number"
           },
-          "attribute": "libSource"
+          "default": "28",
+          "description": "Margin around the chart drawing area.",
+          "attribute": "margin"
         },
         {
           "kind": "field",
-          "name": "lineNumbers",
+          "name": "data",
           "type": {
-            "text": "'off' | 'on'"
+            "text": "ChartStackedBarItem[]"
           },
-          "default": "'on'",
-          "attribute": "lineNumbers"
+          "default": "[]",
+          "description": "Chart data array. Each item holds the stacked segments for a category.",
+          "attribute": "data"
         },
         {
           "kind": "field",
-          "name": "minimap",
+          "name": "showValues",
           "type": {
             "text": "boolean"
           },
-          "default": "false",
-          "attribute": "minimap"
+          "default": "true",
+          "description": "Whether to render total value labels above each stack.",
+          "attribute": "show-values"
         },
         {
           "kind": "field",
-          "name": "_isDarkMode",
+          "name": "showLegend",
           "type": {
             "text": "boolean"
           },
-          "privacy": "private"
+          "default": "true",
+          "description": "Whether to render the legend.",
+          "attribute": "show-legend"
         },
         {
           "kind": "field",
-          "name": "hasFocus",
+          "name": "_initialized",
           "type": {
             "text": "boolean"
           },
@@ -2422,290 +2485,1480 @@
         },
         {
           "kind": "field",
-          "name": "editorMonacoInstance",
-          "type": {
-            "text": "any | undefined"
-          },
+          "name": "_debouncedRenderChart",
           "privacy": "private"
         },
         {
-          "kind": "field",
-          "name": "editorElement",
-          "type": {
-            "text": "HTMLElement"
-          },
+          "kind": "method",
+          "name": "_getSegmentKeys",
           "privacy": "private"
         },
-        {
-          "kind": "field",
-          "name": "monaco",
-          "type": {
-            "text": "any"
-          }
-        },
         {
           "kind": "method",
-          "name": "libSourceChanged",
-          "privacy": "private"
+          "name": "_getColorScale",
+          "privacy": "private",
+          "parameters": [
+            {
+              "name": "keys",
+              "type": {
+                "text": "string[]"
+              }
+            }
+          ]
         },
         {
           "kind": "method",
-          "name": "getTheme",
-          "privacy": "private"
+          "name": "_getColorMap",
+          "privacy": "private",
+          "parameters": [
+            {
+              "name": "keys",
+              "type": {
+                "text": "string[]"
+              }
+            },
+            {
+              "name": "scale",
+              "type": {
+                "text": "d3.ScaleOrdinal<string, string>"
+              }
+            }
+          ]
         },
         {
           "kind": "method",
-          "name": "initializeMonaco"
+          "name": "_getSegmentLabel",
+          "privacy": "private",
+          "parameters": [
+            {
+              "name": "key",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
         },
         {
           "kind": "method",
-          "name": "setFocus"
+          "name": "_getTotals",
+          "privacy": "private"
         },
         {
           "kind": "method",
-          "name": "setBlur"
-        },
-        {
-          "kind": "field",
-          "name": "disabled",
-          "type": {
-            "text": "boolean"
-          },
-          "default": "false",
-          "attribute": "disabled",
-          "reflects": true,
-          "inheritedFrom": {
-            "name": "BaseInput",
-            "module": "src/input/BaseInput.ts"
-          }
-        },
-        {
-          "kind": "field",
-          "name": "readonly",
-          "type": {
-            "text": "boolean"
-          },
-          "default": "false",
-          "attribute": "readonly",
-          "reflects": true,
-          "inheritedFrom": {
-            "name": "BaseInput",
-            "module": "src/input/BaseInput.ts"
-          }
-        },
-        {
-          "kind": "field",
-          "name": "required",
-          "type": {
-            "text": "boolean"
-          },
-          "default": "false",
-          "attribute": "required",
-          "reflects": true,
-          "inheritedFrom": {
-            "name": "BaseInput",
-            "module": "src/input/BaseInput.ts"
-          }
-        },
-        {
-          "kind": "field",
-          "name": "skeleton",
-          "type": {
-            "text": "boolean"
-          },
-          "default": "false",
-          "attribute": "skeleton",
-          "reflects": true,
-          "inheritedFrom": {
-            "name": "BaseInput",
-            "module": "src/input/BaseInput.ts"
-          }
+          "name": "_renderChart",
+          "privacy": "private",
+          "parameters": [
+            {
+              "name": "animate",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ]
         }
       ],
       "attributes": [
         {
-          "name": "name",
-          "type": {
-            "text": "string"
-          },
-          "default": "\"\"",
-          "fieldName": "name"
-        },
-        {
-          "name": "value",
-          "type": {
-            "text": "string"
-          },
-          "default": "''",
-          "fieldName": "value"
-        },
-        {
-          "name": "language",
-          "type": {
-            "text": "'javascript' | 'json' | 'html'"
-          },
-          "default": "'javascript'",
-          "fieldName": "language"
-        },
-        {
-          "name": "libSource",
-          "type": {
-            "text": "any"
-          },
-          "fieldName": "libSource"
-        },
-        {
-          "name": "lineNumbers",
+          "name": "width",
           "type": {
-            "text": "'off' | 'on'"
+            "text": "number"
           },
-          "default": "'on'",
-          "fieldName": "lineNumbers"
+          "default": "0",
+          "description": "Width of the chart in pixels.",
+          "fieldName": "width"
         },
         {
-          "name": "minimap",
+          "name": "height",
           "type": {
-            "text": "boolean"
+            "text": "number"
           },
-          "default": "false",
-          "fieldName": "minimap"
+          "default": "DEFAULT_HEIGHT",
+          "description": "Height of the chart in pixels.",
+          "fieldName": "height"
         },
         {
-          "name": "disabled",
+          "name": "margin",
           "type": {
-            "text": "boolean"
+            "text": "number"
           },
-          "default": "false",
-          "fieldName": "disabled",
-          "inheritedFrom": {
-            "name": "BaseInput",
-            "module": "src/input/BaseInput.ts"
-          }
+          "default": "28",
+          "description": "Margin around the chart drawing area.",
+          "fieldName": "margin"
         },
         {
-          "name": "readonly",
+          "name": "data",
           "type": {
-            "text": "boolean"
+            "text": "ChartStackedBarItem[]"
           },
-          "default": "false",
-          "fieldName": "readonly",
-          "inheritedFrom": {
-            "name": "BaseInput",
-            "module": "src/input/BaseInput.ts"
-          }
+          "default": "[]",
+          "description": "Chart data array. Each item holds the stacked segments for a category.",
+          "fieldName": "data"
         },
         {
-          "name": "required",
+          "name": "show-values",
           "type": {
             "text": "boolean"
           },
-          "default": "false",
-          "fieldName": "required",
-          "inheritedFrom": {
-            "name": "BaseInput",
-            "module": "src/input/BaseInput.ts"
-          }
+          "default": "true",
+          "description": "Whether to render total value labels above each stack.",
+          "fieldName": "showValues"
         },
         {
-          "name": "skeleton",
+          "name": "show-legend",
           "type": {
             "text": "boolean"
           },
-          "default": "false",
-          "fieldName": "skeleton",
-          "inheritedFrom": {
-            "name": "BaseInput",
-            "module": "src/input/BaseInput.ts"
-          }
+          "default": "true",
+          "description": "Whether to render the legend.",
+          "fieldName": "showLegend"
         }
       ],
       "superclass": {
-        "name": "BaseInput",
-        "module": "/src/input/BaseInput.js"
+        "name": "LitElement",
+        "package": "lit"
       },
-      "tagName": "wc-code-editor",
+      "tagName": "wc-chart-stacked-bar",
       "customElement": true,
-      "summary": "A Monaco-based code editing component with syntax highlighting and theming.",
+      "summary": "A stacked bar chart that groups series by category using Material Design 3 tokens.",
       "rawTag": {
-        "name": "code-editor",
+        "name": "chart-stacked-bar",
         "description": ""
       }
     }
   },
   {
-    "rawTag": "code-highlighter",
-    "label": "Code Highlighter",
+    "rawTag": "checkbox",
+    "label": "Checkbox",
     "jsdoc": {
       "@label": [
         {
           "kind": "text",
-          "text": "Code Highlighter"
+          "text": "Checkbox"
         }
       ],
       "@tag": [
         {
           "kind": "text",
-          "text": "wc-code-highlighter"
+          "text": "wc-checkbox"
         }
       ],
       "@rawTag": [
         {
           "kind": "text",
-          "text": "code-highlighter"
+          "text": "checkbox"
         }
       ],
       "@summary": [
         {
           "kind": "text",
-          "text": "A component that provides syntax highlighting for code snippets."
+          "text": "Captures boolean input with an optional indeterminate mode."
         }
       ],
-      "@example": [
+      "@overview": [
         {
-          "kind": "code",
-          "text": "```html\n<wc-code-highlighter language=\"javascript\" style=\"height: 9rem\"><pre><code>\n  function helloWorld() {\n    console.log('Hello, world!');\n  }</code></pre>\n</wc-code-highlighter>\n```"
+          "kind": "text",
+          "text": "<p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>\n<p>Material Design 3 checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>"
+        }
+      ],
+      "@cssprop": [
+        {
+          "kind": "text",
+          "text": "--checkbox-state-layer-size: Size of the state layer for touch target."
+        }
+      ],
+      "@fires": [
+        {
+          "kind": "text",
+          "text": "focus - Dispatched when the checkbox receives focus."
         }
       ],
       "@tags": [
         {
           "kind": "text",
-          "text": "display"
+          "text": "input, form"
+        }
+      ],
+      "@example": [
+        {
+          "kind": "code",
+          "text": "```html\n<wc-checkbox label=\"Accept terms\"></wc-checkbox>\n```"
         }
       ]
     },
     "customElement": {
       "kind": "class",
       "description": "",
-      "name": "CodeHighlighter",
-      "members": [
+      "name": "Checkbox",
+      "cssProperties": [
         {
-          "kind": "field",
-          "name": "language",
-          "type": {
-            "text": "BundledLanguage"
-          },
-          "default": "'javascript'",
-          "attribute": "language",
-          "reflects": true
+          "description": "Size of the checkbox container.",
+          "name": "--checkbox-size:"
         },
         {
-          "kind": "field",
-          "name": "lineNumbers",
-          "type": {
-            "text": "boolean"
-          },
-          "default": "false",
-          "attribute": "line-numbers",
-          "reflects": true
+          "description": "Color of the checkbox when selected.",
+          "name": "--checkbox-selected-color:"
+        },
+        {
+          "description": "Color of the checkbox border when unselected.",
+          "name": "--checkbox-unselected-color:"
+        },
+        {
+          "description": "Color of the checkmark icon.",
+          "name": "--checkbox-checkmark-color:"
         },
+        {
+          "description": "Size of the state layer for touch target.",
+          "name": "--checkbox-state-layer-size:"
+        }
+      ],
+      "members": [
         {
           "kind": "field",
-          "name": "value",
+          "name": "name",
           "type": {
             "text": "string"
           },
           "default": "''",
-          "attribute": "value"
+          "description": "The input field name.",
+          "attribute": "name"
+        },
+        {
+          "kind": "field",
+          "name": "label",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "description": "The checkbox label.",
+          "attribute": "label"
+        },
+        {
+          "kind": "field",
+          "name": "value",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "The input field value (checked state).",
+          "attribute": "value",
+          "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "indeterminate",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, displays the checkbox in an indeterminate state.",
+          "attribute": "indeterminate",
+          "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "rounded",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, the checkbox has rounded corners. Defaults to `false`.",
+          "attribute": "rounded"
+        },
+        {
+          "kind": "field",
+          "name": "size",
+          "type": {
+            "text": "'sm' | 'md' | 'lg'"
+          },
+          "default": "'md'",
+          "description": "The checkbox size.\nPossible values are: `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.",
+          "attribute": "size"
+        },
+        {
+          "kind": "field",
+          "name": "required",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, required icon is shown. Defaults to `false`.",
+          "attribute": "required",
+          "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "readonly",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, the checkbox is readonly. Defaults to `false`.",
+          "attribute": "readonly",
+          "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "disabled",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, the user cannot interact with the checkbox. Defaults to `false`.",
+          "attribute": "disabled",
+          "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "configAria",
+          "type": {
+            "text": "Record<string, string>"
+          },
+          "default": "{}",
+          "description": "Configuration object for aria attributes.",
+          "attribute": "configAria"
+        },
+        {
+          "kind": "field",
+          "name": "hasFocus",
+          "type": {
+            "text": "boolean"
+          },
+          "privacy": "private",
+          "default": "false"
+        },
+        {
+          "kind": "field",
+          "name": "isActive",
+          "type": {
+            "text": "boolean"
+          },
+          "privacy": "private",
+          "default": "false"
+        },
+        {
+          "kind": "field",
+          "name": "slotHasContent",
+          "type": {
+            "text": "boolean"
+          },
+          "privacy": "private",
+          "default": "false"
+        },
+        {
+          "kind": "field",
+          "name": "containerElement",
+          "type": {
+            "text": "HTMLElement | undefined"
+          },
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "nativeElement",
+          "type": {
+            "text": "HTMLInputElement | undefined"
+          },
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "tabindex",
+          "type": {
+            "text": "string | undefined"
+          },
+          "privacy": "private"
+        },
+        {
+          "kind": "method",
+          "name": "handleInitialAttributes",
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "windowMouseUp",
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "windowKeyUp",
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "mouseDownHandler",
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "keyDownHandler",
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "clickHandler",
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "blurHandler",
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "focusHandler",
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "handleKeyUp",
+          "privacy": "private"
+        },
+        {
+          "kind": "method",
+          "name": "focus",
+          "description": "Sets focus on the checkbox."
+        },
+        {
+          "kind": "method",
+          "name": "blur",
+          "description": "Removes focus from the checkbox."
+        }
+      ],
+      "events": [
+        {
+          "type": {
+            "text": "CustomEvent"
+          },
+          "description": "Dispatched when the checkbox value changes.",
+          "name": "change"
+        },
+        {
+          "type": {
+            "text": "CustomEvent"
+          },
+          "description": "Dispatched when the checkbox loses focus.",
+          "name": "blur"
+        },
+        {
+          "type": {
+            "text": "CustomEvent"
+          },
+          "description": "Dispatched when the checkbox receives focus.",
+          "name": "focus"
+        }
+      ],
+      "attributes": [
+        {
+          "name": "name",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "description": "The input field name.",
+          "fieldName": "name"
+        },
+        {
+          "name": "label",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "description": "The checkbox label.",
+          "fieldName": "label"
+        },
+        {
+          "name": "value",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "The input field value (checked state).",
+          "fieldName": "value"
+        },
+        {
+          "name": "indeterminate",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, displays the checkbox in an indeterminate state.",
+          "fieldName": "indeterminate"
+        },
+        {
+          "name": "rounded",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, the checkbox has rounded corners. Defaults to `false`.",
+          "fieldName": "rounded"
+        },
+        {
+          "name": "size",
+          "type": {
+            "text": "'sm' | 'md' | 'lg'"
+          },
+          "default": "'md'",
+          "description": "The checkbox size.\nPossible values are: `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.",
+          "fieldName": "size"
+        },
+        {
+          "name": "required",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, required icon is shown. Defaults to `false`.",
+          "fieldName": "required"
+        },
+        {
+          "name": "readonly",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, the checkbox is readonly. Defaults to `false`.",
+          "fieldName": "readonly"
+        },
+        {
+          "name": "disabled",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, the user cannot interact with the checkbox. Defaults to `false`.",
+          "fieldName": "disabled"
+        },
+        {
+          "name": "configAria",
+          "type": {
+            "text": "Record<string, string>"
+          },
+          "default": "{}",
+          "description": "Configuration object for aria attributes.",
+          "fieldName": "configAria"
+        }
+      ],
+      "superclass": {
+        "name": "LitElement",
+        "package": "lit"
+      },
+      "tagName": "wc-checkbox",
+      "customElement": true,
+      "summary": "Captures boolean input with an optional indeterminate mode.",
+      "rawTag": {
+        "name": "checkbox",
+        "description": ""
+      }
+    }
+  },
+  {
+    "rawTag": "chip",
+    "label": "Chip",
+    "jsdoc": {
+      "@label": [
+        {
+          "kind": "text",
+          "text": "Chip"
+        }
+      ],
+      "@tag": [
+        {
+          "kind": "text",
+          "text": "wc-chip"
+        }
+      ],
+      "@rawTag": [
+        {
+          "kind": "text",
+          "text": "chip"
+        }
+      ],
+      "@summary": [
+        {
+          "kind": "text",
+          "text": "Chip component for displaying compact information with optional actions."
+        }
+      ],
+      "@tags": [
+        {
+          "kind": "text",
+          "text": "display"
+        }
+      ],
+      "@example": [
+        {
+          "kind": "code",
+          "text": "```html\n<wc-chip>Chip content</wc-chip>\n```"
+        }
+      ]
+    },
+    "customElement": {
+      "kind": "class",
+      "description": "",
+      "name": "Chip",
+      "members": [
+        {
+          "kind": "field",
+          "name": "dismissible",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, the tag will have a close icon.",
+          "attribute": "dismissible"
+        },
+        {
+          "kind": "field",
+          "name": "color",
+          "type": {
+            "text": "| 'default'\n    | 'blue'\n    | 'green'\n    | 'red'\n    | 'yellow' | undefined"
+          },
+          "default": "'default'",
+          "description": "Tag color.",
+          "attribute": "color",
+          "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "value",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "description": "Tag value.",
+          "attribute": "value",
+          "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "selected",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, the tag will be selected.",
+          "attribute": "selected",
+          "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "imageSrc",
+          "type": {
+            "text": "string | undefined"
+          },
+          "description": "Image source.",
+          "attribute": "imageSrc"
+        },
+        {
+          "kind": "method",
+          "name": "_dismissClickHandler",
+          "privacy": "private",
+          "parameters": [
+            {
+              "name": "e",
+              "type": {
+                "text": "MouseEvent"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "method",
+          "name": "_renderCloseButton",
+          "privacy": "private"
+        },
+        {
+          "kind": "method",
+          "name": "_renderImage",
+          "privacy": "private"
+        }
+      ],
+      "events": [
+        {
+          "name": "tag--dismiss",
+          "type": {
+            "text": "CustomEvent"
+          }
+        }
+      ],
+      "attributes": [
+        {
+          "name": "dismissible",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, the tag will have a close icon.",
+          "fieldName": "dismissible"
+        },
+        {
+          "name": "color",
+          "type": {
+            "text": "| 'default'\n    | 'blue'\n    | 'green'\n    | 'red'\n    | 'yellow' | undefined"
+          },
+          "default": "'default'",
+          "description": "Tag color.",
+          "fieldName": "color"
+        },
+        {
+          "name": "value",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "description": "Tag value.",
+          "fieldName": "value"
+        },
+        {
+          "name": "selected",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "If true, the tag will be selected.",
+          "fieldName": "selected"
+        },
+        {
+          "name": "imageSrc",
+          "type": {
+            "text": "string | undefined"
+          },
+          "description": "Image source.",
+          "fieldName": "imageSrc"
+        }
+      ],
+      "superclass": {
+        "name": "LitElement",
+        "package": "lit"
+      },
+      "tagName": "wc-chip",
+      "customElement": true,
+      "summary": "Chip component for displaying compact information with optional actions.",
+      "rawTag": {
+        "name": "chip",
+        "description": ""
+      }
+    }
+  },
+  {
+    "rawTag": "circular-progress",
+    "label": "Circular Progress",
+    "jsdoc": {
+      "@label": [
+        {
+          "kind": "text",
+          "text": "Circular Progress"
+        }
+      ],
+      "@tag": [
+        {
+          "kind": "text",
+          "text": "wc-circular-progress"
+        }
+      ],
+      "@rawTag": [
+        {
+          "kind": "text",
+          "text": "circular-progress"
+        }
+      ],
+      "@summary": [
+        {
+          "kind": "text",
+          "text": "A circular progress indicator is a visual representation of progress toward a specific goal."
+        }
+      ],
+      "@tags": [
+        {
+          "kind": "text",
+          "text": "display"
+        }
+      ],
+      "@example": [
+        {
+          "kind": "code",
+          "text": "```html\n<wc-circular-progress value=\"30\"></wc-circular-progress>\n```"
+        }
+      ]
+    },
+    "customElement": {
+      "kind": "class",
+      "description": "",
+      "name": "CircularProgress",
+      "members": [
+        {
+          "kind": "field",
+          "name": "value",
+          "type": {
+            "text": "number | undefined"
+          },
+          "description": "The current value.",
+          "attribute": "value",
+          "inheritedFrom": {
+            "name": "BaseProgress",
+            "module": "src/progress/base-progress.ts"
+          }
+        },
+        {
+          "kind": "field",
+          "name": "indeterminate",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "attribute": "indeterminate",
+          "inheritedFrom": {
+            "name": "BaseProgress",
+            "module": "src/progress/base-progress.ts"
+          }
+        },
+        {
+          "kind": "field",
+          "name": "label",
+          "type": {
+            "text": "string | undefined"
+          },
+          "description": "A label describing the progress bar.",
+          "attribute": "label",
+          "inheritedFrom": {
+            "name": "BaseProgress",
+            "module": "src/progress/base-progress.ts"
+          }
+        },
+        {
+          "kind": "field",
+          "name": "helperText",
+          "type": {
+            "text": "string | undefined"
+          },
+          "attribute": "helper-text",
+          "inheritedFrom": {
+            "name": "BaseProgress",
+            "module": "src/progress/base-progress.ts"
+          }
+        },
+        {
+          "kind": "field",
+          "name": "inline",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "attribute": "inline",
+          "inheritedFrom": {
+            "name": "BaseProgress",
+            "module": "src/progress/base-progress.ts"
+          }
+        },
+        {
+          "kind": "method",
+          "name": "__getPercentageValue",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "inheritedFrom": {
+            "name": "BaseProgress",
+            "module": "src/progress/base-progress.ts"
+          }
+        }
+      ],
+      "superclass": {
+        "name": "BaseProgress",
+        "module": "/src/progress/base-progress.js"
+      },
+      "tagName": "wc-circular-progress",
+      "customElement": true,
+      "summary": "A circular progress indicator is a visual representation of progress toward a specific goal.",
+      "rawTag": {
+        "name": "circular-progress",
+        "description": ""
+      },
+      "attributes": [
+        {
+          "name": "value",
+          "type": {
+            "text": "number | undefined"
+          },
+          "description": "The current value.",
+          "fieldName": "value",
+          "inheritedFrom": {
+            "name": "BaseProgress",
+            "module": "src/progress/base-progress.ts"
+          }
+        },
+        {
+          "name": "indeterminate",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "indeterminate",
+          "inheritedFrom": {
+            "name": "BaseProgress",
+            "module": "src/progress/base-progress.ts"
+          }
+        },
+        {
+          "name": "label",
+          "type": {
+            "text": "string | undefined"
+          },
+          "description": "A label describing the progress bar.",
+          "fieldName": "label",
+          "inheritedFrom": {
+            "name": "BaseProgress",
+            "module": "src/progress/base-progress.ts"
+          }
+        },
+        {
+          "name": "helper-text",
+          "type": {
+            "text": "string | undefined"
+          },
+          "fieldName": "helperText",
+          "inheritedFrom": {
+            "name": "BaseProgress",
+            "module": "src/progress/base-progress.ts"
+          }
+        },
+        {
+          "name": "inline",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "inline",
+          "inheritedFrom": {
+            "name": "BaseProgress",
+            "module": "src/progress/base-progress.ts"
+          }
+        }
+      ]
+    }
+  },
+  {
+    "rawTag": "clock",
+    "label": "Clock",
+    "jsdoc": {
+      "@label": [
+        {
+          "kind": "text",
+          "text": "Clock"
+        }
+      ],
+      "@tag": [
+        {
+          "kind": "text",
+          "text": "wc-clock"
+        }
+      ],
+      "@rawTag": [
+        {
+          "kind": "text",
+          "text": "clock"
+        }
+      ],
+      "@summary": [
+        {
+          "kind": "text",
+          "text": "Displays the current time in a given timezone."
+        }
+      ],
+      "@overview": [
+        {
+          "kind": "text",
+          "text": "- Clocks are used to display the current time in a specified timezone.\n - They can be displayed in various formats, including 12-hour and 24-hour time."
+        }
+      ],
+      "@tags": [
+        {
+          "kind": "text",
+          "text": "display"
+        }
+      ],
+      "@example": [
+        {
+          "kind": "code",
+          "text": "```html\n<wc-clock></wc-clock>\n```"
+        }
+      ]
+    },
+    "customElement": {
+      "kind": "class",
+      "description": "",
+      "name": "Clock",
+      "members": [
+        {
+          "kind": "field",
+          "name": "clockController",
+          "default": "new ClockController(this, 100)"
+        },
+        {
+          "kind": "field",
+          "name": "timezone",
+          "type": {
+            "text": "string | undefined"
+          },
+          "attribute": "timezone"
+        },
+        {
+          "kind": "method",
+          "name": "__formatDate",
+          "parameters": [
+            {
+              "name": "date",
+              "type": {
+                "text": "Date"
+              }
+            }
+          ]
+        }
+      ],
+      "attributes": [
+        {
+          "name": "timezone",
+          "type": {
+            "text": "string | undefined"
+          },
+          "fieldName": "timezone"
+        }
+      ],
+      "superclass": {
+        "name": "LitElement",
+        "package": "lit"
+      },
+      "tagName": "wc-clock",
+      "customElement": true,
+      "summary": "Displays the current time in a given timezone.",
+      "rawTag": {
+        "name": "clock",
+        "description": ""
+      }
+    }
+  },
+  {
+    "rawTag": "code-editor",
+    "label": "Code Editor",
+    "jsdoc": {
+      "@label": [
+        {
+          "kind": "text",
+          "text": "Code Editor"
+        }
+      ],
+      "@tag": [
+        {
+          "kind": "text",
+          "text": "wc-code-editor"
+        }
+      ],
+      "@rawTag": [
+        {
+          "kind": "text",
+          "text": "code-editor"
+        }
+      ],
+      "@summary": [
+        {
+          "kind": "text",
+          "text": "A Monaco-based code editing component with syntax highlighting and theming."
+        }
+      ],
+      "@overview": [
+        {
+          "kind": "text",
+          "text": "- CodeEditor wraps Monaco Editor as a web component.\n - Supports JS/JSON/HTML languages, read-only mode, line numbers, minimap, and dark/light theme.\n - Emits "
+        },
+        {
+          "kind": "code",
+          "text": "`change`"
+        },
+        {
+          "kind": "text",
+          "text": " when content is edited and updates value from property changes."
+        }
+      ],
+      "@example": [
+        {
+          "kind": "code",
+          "text": "```html\n<wc-code-editor\n  language=\"javascript\"\n  style=\"width: 100%; --code-editor-height: 10rem;\"\n  value=\"function hello() { console.log('Hello'); }\"\n  lineNumbers=\"on\"\n  minimap=\"false\">\n</wc-code-editor>\n```"
+        }
+      ],
+      "@tags": [
+        {
+          "kind": "text",
+          "text": "input, editor"
+        }
+      ]
+    },
+    "customElement": {
+      "kind": "class",
+      "description": "",
+      "name": "CodeEditor",
+      "members": [
+        {
+          "kind": "field",
+          "name": "name",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"\"",
+          "attribute": "name"
+        },
+        {
+          "kind": "field",
+          "name": "value",
+          "type": {
+            "text": "any | undefined"
+          },
+          "default": "''",
+          "attribute": "value",
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        },
+        {
+          "kind": "field",
+          "name": "language",
+          "type": {
+            "text": "'javascript' | 'json' | 'html'"
+          },
+          "default": "'javascript'",
+          "attribute": "language"
+        },
+        {
+          "kind": "field",
+          "name": "libSource",
+          "type": {
+            "text": "any"
+          },
+          "attribute": "libSource"
+        },
+        {
+          "kind": "field",
+          "name": "lineNumbers",
+          "type": {
+            "text": "'off' | 'on'"
+          },
+          "default": "'on'",
+          "attribute": "lineNumbers"
+        },
+        {
+          "kind": "field",
+          "name": "minimap",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "attribute": "minimap"
+        },
+        {
+          "kind": "field",
+          "name": "_isDarkMode",
+          "type": {
+            "text": "boolean"
+          },
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "hasFocus",
+          "type": {
+            "text": "boolean"
+          },
+          "privacy": "private",
+          "default": "false"
+        },
+        {
+          "kind": "field",
+          "name": "editorMonacoInstance",
+          "type": {
+            "text": "any | undefined"
+          },
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "editorElement",
+          "type": {
+            "text": "HTMLElement"
+          },
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "monaco",
+          "type": {
+            "text": "any"
+          }
+        },
+        {
+          "kind": "method",
+          "name": "libSourceChanged",
+          "privacy": "private"
+        },
+        {
+          "kind": "method",
+          "name": "getTheme",
+          "privacy": "private"
+        },
+        {
+          "kind": "method",
+          "name": "initializeMonaco"
+        },
+        {
+          "kind": "method",
+          "name": "setFocus"
+        },
+        {
+          "kind": "method",
+          "name": "setBlur"
+        },
+        {
+          "kind": "field",
+          "name": "disabled",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "attribute": "disabled",
+          "reflects": true,
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        },
+        {
+          "kind": "field",
+          "name": "readonly",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "attribute": "readonly",
+          "reflects": true,
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        },
+        {
+          "kind": "field",
+          "name": "required",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "attribute": "required",
+          "reflects": true,
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        },
+        {
+          "kind": "field",
+          "name": "skeleton",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "attribute": "skeleton",
+          "reflects": true,
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        }
+      ],
+      "attributes": [
+        {
+          "name": "name",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"\"",
+          "fieldName": "name"
+        },
+        {
+          "name": "value",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "fieldName": "value"
+        },
+        {
+          "name": "language",
+          "type": {
+            "text": "'javascript' | 'json' | 'html'"
+          },
+          "default": "'javascript'",
+          "fieldName": "language"
+        },
+        {
+          "name": "libSource",
+          "type": {
+            "text": "any"
+          },
+          "fieldName": "libSource"
+        },
+        {
+          "name": "lineNumbers",
+          "type": {
+            "text": "'off' | 'on'"
+          },
+          "default": "'on'",
+          "fieldName": "lineNumbers"
+        },
+        {
+          "name": "minimap",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "minimap"
+        },
+        {
+          "name": "disabled",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "disabled",
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        },
+        {
+          "name": "readonly",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "readonly",
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        },
+        {
+          "name": "required",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "required",
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        },
+        {
+          "name": "skeleton",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "skeleton",
+          "inheritedFrom": {
+            "name": "BaseInput",
+            "module": "src/input/BaseInput.ts"
+          }
+        }
+      ],
+      "superclass": {
+        "name": "BaseInput",
+        "module": "/src/input/BaseInput.js"
+      },
+      "tagName": "wc-code-editor",
+      "customElement": true,
+      "summary": "A Monaco-based code editing component with syntax highlighting and theming.",
+      "rawTag": {
+        "name": "code-editor",
+        "description": ""
+      }
+    }
+  },
+  {
+    "rawTag": "code-highlighter",
+    "label": "Code Highlighter",
+    "jsdoc": {
+      "@label": [
+        {
+          "kind": "text",
+          "text": "Code Highlighter"
+        }
+      ],
+      "@tag": [
+        {
+          "kind": "text",
+          "text": "wc-code-highlighter"
+        }
+      ],
+      "@rawTag": [
+        {
+          "kind": "text",
+          "text": "code-highlighter"
+        }
+      ],
+      "@summary": [
+        {
+          "kind": "text",
+          "text": "A component that provides syntax highlighting for code snippets."
+        }
+      ],
+      "@example": [
+        {
+          "kind": "code",
+          "text": "```html\n<wc-code-highlighter language=\"javascript\" style=\"height: 9rem\"><pre><code>\n  function helloWorld() {\n    console.log('Hello, world!');\n  }</code></pre>\n</wc-code-highlighter>\n```"
+        }
+      ],
+      "@tags": [
+        {
+          "kind": "text",
+          "text": "display"
+        }
+      ]
+    },
+    "customElement": {
+      "kind": "class",
+      "description": "",
+      "name": "CodeHighlighter",
+      "members": [
+        {
+          "kind": "field",
+          "name": "language",
+          "type": {
+            "text": "BundledLanguage"
+          },
+          "default": "'javascript'",
+          "attribute": "language",
+          "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "lineNumbers",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "attribute": "line-numbers",
+          "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "value",
+          "type": {
+            "text": "string"
+          },
+          "default": "''",
+          "attribute": "value"
         },
         {
           "kind": "field",
@@ -6642,7 +7895,7 @@
       "@parentRawTag": [
         {
           "kind": "text",
-          "text": "menu-list"
+          "text": "menu"
         }
       ],
       "@summary": [
@@ -8091,392 +9344,655 @@
           ]
         },
         {
-          "kind": "method",
-          "name": "getNormalizedPointerEventCoords",
-          "privacy": "private",
-          "return": {
-            "type": {
-              "text": "{\n    x: number;\n    y: number;\n  }"
-            }
+          "kind": "method",
+          "name": "getNormalizedPointerEventCoords",
+          "privacy": "private",
+          "return": {
+            "type": {
+              "text": "{\n    x: number;\n    y: number;\n  }"
+            }
+          },
+          "parameters": [
+            {
+              "name": "pointerEvent",
+              "type": {
+                "text": "PointerEvent"
+              }
+            }
+          ]
+        }
+      ],
+      "attributes": [
+        {
+          "name": "disabled",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "Disables the ripple.",
+          "fieldName": "disabled"
+        }
+      ],
+      "superclass": {
+        "name": "LitElement",
+        "package": "lit"
+      },
+      "tagName": "wc-ripple",
+      "customElement": true,
+      "summary": "Provides ripple effect for interactive elements.",
+      "rawTag": {
+        "name": "ripple",
+        "description": ""
+      }
+    }
+  },
+  {
+    "rawTag": "skeleton",
+    "label": "Skeleton",
+    "jsdoc": {
+      "@label": [
+        {
+          "kind": "text",
+          "text": "Skeleton"
+        }
+      ],
+      "@tag": [
+        {
+          "kind": "text",
+          "text": "wc-skeleton"
+        }
+      ],
+      "@rawTag": [
+        {
+          "kind": "text",
+          "text": "skeleton"
+        }
+      ],
+      "@summary": [
+        {
+          "kind": "text",
+          "text": "Adds a skeleton effect to an element."
+        }
+      ],
+      "@tags": [
+        {
+          "kind": "text",
+          "text": "display"
+        }
+      ],
+      "@example": [
+        {
+          "kind": "code",
+          "text": "```html\n<wc-skeleton visible></wc-skeleton>\n```"
+        }
+      ]
+    },
+    "customElement": {
+      "kind": "class",
+      "description": "",
+      "name": "Skeleton",
+      "members": [
+        {
+          "kind": "field",
+          "name": "visible",
+          "type": {
+            "text": "boolean"
           },
-          "parameters": [
-            {
-              "name": "pointerEvent",
-              "type": {
-                "text": "PointerEvent"
-              }
-            }
-          ]
+          "default": "false",
+          "attribute": "visible",
+          "reflects": true
         }
       ],
       "attributes": [
         {
-          "name": "disabled",
+          "name": "visible",
           "type": {
             "text": "boolean"
           },
           "default": "false",
-          "description": "Disables the ripple.",
-          "fieldName": "disabled"
+          "fieldName": "visible"
         }
       ],
       "superclass": {
         "name": "LitElement",
         "package": "lit"
       },
-      "tagName": "wc-ripple",
+      "tagName": "wc-skeleton",
       "customElement": true,
-      "summary": "Provides ripple effect for interactive elements.",
+      "summary": "Adds a skeleton effect to an element.",
       "rawTag": {
-        "name": "ripple",
+        "name": "skeleton",
         "description": ""
       }
     }
   },
   {
-    "rawTag": "skeleton",
-    "label": "Skeleton",
+    "rawTag": "slider",
+    "label": "Slider",
     "jsdoc": {
       "@label": [
         {
           "kind": "text",
-          "text": "Skeleton"
+          "text": "Slider"
         }
       ],
       "@tag": [
         {
           "kind": "text",
-          "text": "wc-skeleton"
+          "text": "wc-slider"
         }
       ],
       "@rawTag": [
         {
           "kind": "text",
-          "text": "skeleton"
+          "text": "slider"
         }
       ],
       "@summary": [
         {
           "kind": "text",
-          "text": "Adds a skeleton effect to an element."
+          "text": "Sliders allow users to make selections from a range of values."
         }
       ],
-      "@tags": [
+      "@fires": [
         {
           "kind": "text",
-          "text": "display"
+          "text": "change - Dispatched when the slider interaction ends."
         }
       ],
       "@example": [
         {
           "kind": "code",
-          "text": "```html\n<wc-skeleton visible></wc-skeleton>\n```"
+          "text": "```html\n<wc-slider min=\"0\" max=\"100\" value=\"50\"></wc-slider>\n```"
         }
       ]
     },
     "customElement": {
       "kind": "class",
       "description": "",
-      "name": "Skeleton",
+      "name": "Slider",
       "members": [
         {
           "kind": "field",
-          "name": "visible",
+          "name": "min",
+          "type": {
+            "text": "number"
+          },
+          "default": "0",
+          "description": "The minimum value of the slider.",
+          "attribute": "min"
+        },
+        {
+          "kind": "field",
+          "name": "max",
+          "type": {
+            "text": "number"
+          },
+          "default": "100",
+          "description": "The maximum value of the slider.",
+          "attribute": "max"
+        },
+        {
+          "kind": "field",
+          "name": "value",
+          "type": {
+            "text": "number"
+          },
+          "default": "50",
+          "description": "The current value of the slider.",
+          "attribute": "value",
+          "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "step",
+          "type": {
+            "text": "number"
+          },
+          "default": "1",
+          "description": "The step increment for the slider.",
+          "attribute": "step"
+        },
+        {
+          "kind": "field",
+          "name": "disabled",
           "type": {
             "text": "boolean"
           },
           "default": "false",
-          "attribute": "visible",
+          "description": "Whether the slider is disabled.",
+          "attribute": "disabled",
           "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "labeled",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "true",
+          "description": "Whether to show labels on the slider.",
+          "attribute": "labeled"
+        },
+        {
+          "kind": "field",
+          "name": "isDragging",
+          "type": {
+            "text": "boolean"
+          },
+          "privacy": "private",
+          "default": "false"
+        },
+        {
+          "kind": "field",
+          "name": "container",
+          "type": {
+            "text": "HTMLElement"
+          },
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "thumbElement",
+          "type": {
+            "text": "HTMLElement"
+          },
+          "privacy": "private"
+        },
+        {
+          "kind": "method",
+          "name": "handleInput",
+          "privacy": "private",
+          "parameters": [
+            {
+              "name": "event",
+              "type": {
+                "text": "MouseEvent | TouchEvent"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "method",
+          "name": "onMouseDown",
+          "privacy": "private",
+          "parameters": [
+            {
+              "name": "e",
+              "type": {
+                "text": "MouseEvent | TouchEvent"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "field",
+          "name": "onMouseMove",
+          "privacy": "private"
+        },
+        {
+          "kind": "field",
+          "name": "onMouseUp",
+          "privacy": "private"
+        },
+        {
+          "kind": "method",
+          "name": "handleKeyDown",
+          "privacy": "private",
+          "parameters": [
+            {
+              "name": "e",
+              "type": {
+                "text": "KeyboardEvent"
+              }
+            }
+          ]
+        }
+      ],
+      "events": [
+        {
+          "name": "input",
+          "type": {
+            "text": "CustomEvent"
+          },
+          "description": "Dispatched when the slider value changes during interaction."
+        },
+        {
+          "name": "change",
+          "type": {
+            "text": "CustomEvent"
+          },
+          "description": "Dispatched when the slider interaction ends."
         }
       ],
       "attributes": [
         {
-          "name": "visible",
+          "name": "min",
+          "type": {
+            "text": "number"
+          },
+          "default": "0",
+          "description": "The minimum value of the slider.",
+          "fieldName": "min"
+        },
+        {
+          "name": "max",
+          "type": {
+            "text": "number"
+          },
+          "default": "100",
+          "description": "The maximum value of the slider.",
+          "fieldName": "max"
+        },
+        {
+          "name": "value",
+          "type": {
+            "text": "number"
+          },
+          "default": "50",
+          "description": "The current value of the slider.",
+          "fieldName": "value"
+        },
+        {
+          "name": "step",
+          "type": {
+            "text": "number"
+          },
+          "default": "1",
+          "description": "The step increment for the slider.",
+          "fieldName": "step"
+        },
+        {
+          "name": "disabled",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "Whether the slider is disabled.",
+          "fieldName": "disabled"
+        },
+        {
+          "name": "labeled",
           "type": {
             "text": "boolean"
           },
-          "default": "false",
-          "fieldName": "visible"
+          "default": "true",
+          "description": "Whether to show labels on the slider.",
+          "fieldName": "labeled"
         }
       ],
       "superclass": {
         "name": "LitElement",
         "package": "lit"
       },
-      "tagName": "wc-skeleton",
+      "tagName": "wc-slider",
       "customElement": true,
-      "summary": "Adds a skeleton effect to an element.",
+      "summary": "Sliders allow users to make selections from a range of values.",
       "rawTag": {
-        "name": "skeleton",
+        "name": "slider",
         "description": ""
       }
     }
   },
   {
-    "rawTag": "slider",
-    "label": "Slider",
+    "rawTag": "snackbar",
+    "label": "Snackbar",
     "jsdoc": {
       "@label": [
         {
           "kind": "text",
-          "text": "Slider"
+          "text": "Snackbar"
         }
       ],
       "@tag": [
         {
           "kind": "text",
-          "text": "wc-slider"
+          "text": "wc-snackbar"
         }
       ],
       "@rawTag": [
         {
           "kind": "text",
-          "text": "slider"
+          "text": "snackbar"
         }
       ],
       "@summary": [
         {
           "kind": "text",
-          "text": "Sliders allow users to make selections from a range of values."
+          "text": "Snackbars provide brief messages about app processes at the bottom of the screen."
         }
       ],
-      "@fires": [
+      "@cssprop": [
         {
           "kind": "text",
-          "text": "change - Dispatched when the slider interaction ends."
+          "text": "--snackbar-border-radius - Border radius of the snackbar surface."
         }
       ],
       "@example": [
         {
           "kind": "code",
-          "text": "```html\n<wc-slider min=\"0\" max=\"100\" value=\"50\"></wc-slider>\n```"
+          "text": "```html\n<wc-snackbar open message=\"Message archived\" action-label=\"Undo\"></wc-snackbar>\n```"
+        }
+      ],
+      "@tags": [
+        {
+          "kind": "text",
+          "text": "display, feedback"
         }
       ]
     },
     "customElement": {
       "kind": "class",
       "description": "",
-      "name": "Slider",
-      "members": [
+      "name": "Snackbar",
+      "cssProperties": [
         {
-          "kind": "field",
-          "name": "min",
-          "type": {
-            "text": "number"
-          },
-          "default": "0",
-          "description": "The minimum value of the slider.",
-          "attribute": "min"
+          "description": "Container color for the snackbar.",
+          "name": "--snackbar-container-color"
         },
+        {
+          "description": "Label text color for the snackbar.",
+          "name": "--snackbar-label-text-color"
+        },
+        {
+          "description": "Action text color.",
+          "name": "--snackbar-action-text-color"
+        },
+        {
+          "description": "Close icon color.",
+          "name": "--snackbar-close-icon-color"
+        },
+        {
+          "description": "Border radius of the snackbar surface.",
+          "name": "--snackbar-border-radius"
+        }
+      ],
+      "members": [
         {
           "kind": "field",
-          "name": "max",
+          "name": "open",
           "type": {
-            "text": "number"
+            "text": "boolean"
           },
-          "default": "100",
-          "description": "The maximum value of the slider.",
-          "attribute": "max"
+          "default": "false",
+          "attribute": "open",
+          "reflects": true
         },
         {
           "kind": "field",
-          "name": "value",
+          "name": "message",
           "type": {
-            "text": "number"
+            "text": "string"
           },
-          "default": "50",
-          "description": "The current value of the slider.",
-          "attribute": "value",
-          "reflects": true
+          "default": "''",
+          "attribute": "message"
         },
         {
           "kind": "field",
-          "name": "step",
+          "name": "actionLabel",
           "type": {
-            "text": "number"
+            "text": "string"
           },
-          "default": "1",
-          "description": "The step increment for the slider.",
-          "attribute": "step"
+          "default": "''",
+          "attribute": "action-label"
         },
         {
           "kind": "field",
-          "name": "disabled",
+          "name": "showCloseIcon",
           "type": {
             "text": "boolean"
           },
           "default": "false",
-          "description": "Whether the slider is disabled.",
-          "attribute": "disabled",
-          "reflects": true
+          "attribute": "show-close-icon"
         },
         {
           "kind": "field",
-          "name": "labeled",
+          "name": "duration",
           "type": {
-            "text": "boolean"
+            "text": "number"
           },
-          "default": "true",
-          "description": "Whether to show labels on the slider.",
-          "attribute": "labeled"
+          "default": "4000",
+          "attribute": "duration"
         },
         {
           "kind": "field",
-          "name": "isDragging",
+          "name": "multiline",
           "type": {
             "text": "boolean"
           },
-          "privacy": "private",
-          "default": "false"
+          "default": "false",
+          "attribute": "multiline",
+          "reflects": true
         },
         {
           "kind": "field",
-          "name": "container",
+          "name": "hideTimer",
           "type": {
-            "text": "HTMLElement"
+            "text": "ReturnType<typeof setTimeout> | null"
           },
-          "privacy": "private"
+          "privacy": "private",
+          "default": "null"
         },
         {
-          "kind": "field",
-          "name": "thumbElement",
-          "type": {
-            "text": "HTMLElement"
-          },
-          "privacy": "private"
+          "kind": "method",
+          "name": "show"
         },
         {
           "kind": "method",
-          "name": "handleInput",
-          "privacy": "private",
-          "parameters": [
-            {
-              "name": "event",
-              "type": {
-                "text": "MouseEvent | TouchEvent"
-              }
-            }
-          ]
+          "name": "hide"
         },
         {
           "kind": "method",
-          "name": "onMouseDown",
+          "name": "close",
           "privacy": "private",
           "parameters": [
             {
-              "name": "e",
+              "name": "reason",
               "type": {
-                "text": "MouseEvent | TouchEvent"
+                "text": "SnackbarCloseReason"
               }
             }
           ]
         },
         {
-          "kind": "field",
-          "name": "onMouseMove",
+          "kind": "method",
+          "name": "dispatchActionEvent",
           "privacy": "private"
         },
         {
-          "kind": "field",
-          "name": "onMouseUp",
+          "kind": "method",
+          "name": "handleActionClick",
           "privacy": "private"
         },
         {
           "kind": "method",
-          "name": "handleKeyDown",
-          "privacy": "private",
-          "parameters": [
-            {
-              "name": "e",
-              "type": {
-                "text": "KeyboardEvent"
-              }
-            }
-          ]
+          "name": "handleCloseClick",
+          "privacy": "private"
+        },
+        {
+          "kind": "method",
+          "name": "clearTimer",
+          "privacy": "private"
+        },
+        {
+          "kind": "method",
+          "name": "scheduleAutoHide",
+          "privacy": "private"
         }
       ],
       "events": [
         {
-          "name": "input",
+          "name": "snackbar-close",
           "type": {
             "text": "CustomEvent"
-          },
-          "description": "Dispatched when the slider value changes during interaction."
+          }
         },
         {
-          "name": "change",
+          "name": "snackbar-action",
           "type": {
             "text": "CustomEvent"
-          },
-          "description": "Dispatched when the slider interaction ends."
+          }
         }
       ],
       "attributes": [
         {
-          "name": "min",
+          "name": "open",
           "type": {
-            "text": "number"
+            "text": "boolean"
           },
-          "default": "0",
-          "description": "The minimum value of the slider.",
-          "fieldName": "min"
+          "default": "false",
+          "fieldName": "open"
         },
         {
-          "name": "max",
+          "name": "message",
           "type": {
-            "text": "number"
+            "text": "string"
           },
-          "default": "100",
-          "description": "The maximum value of the slider.",
-          "fieldName": "max"
+          "default": "''",
+          "fieldName": "message"
         },
         {
-          "name": "value",
+          "name": "action-label",
           "type": {
-            "text": "number"
+            "text": "string"
           },
-          "default": "50",
-          "description": "The current value of the slider.",
-          "fieldName": "value"
+          "default": "''",
+          "fieldName": "actionLabel"
         },
         {
-          "name": "step",
+          "name": "show-close-icon",
           "type": {
-            "text": "number"
+            "text": "boolean"
           },
-          "default": "1",
-          "description": "The step increment for the slider.",
-          "fieldName": "step"
+          "default": "false",
+          "fieldName": "showCloseIcon"
         },
         {
-          "name": "disabled",
+          "name": "duration",
           "type": {
-            "text": "boolean"
+            "text": "number"
           },
-          "default": "false",
-          "description": "Whether the slider is disabled.",
-          "fieldName": "disabled"
+          "default": "4000",
+          "fieldName": "duration"
         },
         {
-          "name": "labeled",
+          "name": "multiline",
           "type": {
             "text": "boolean"
           },
-          "default": "true",
-          "description": "Whether to show labels on the slider.",
-          "fieldName": "labeled"
+          "default": "false",
+          "fieldName": "multiline"
         }
       ],
       "superclass": {
         "name": "LitElement",
         "package": "lit"
       },
-      "tagName": "wc-slider",
+      "tagName": "wc-snackbar",
       "customElement": true,
-      "summary": "Sliders allow users to make selections from a range of values.",
+      "summary": "Snackbars provide brief messages about app processes at the bottom of the screen.",
       "rawTag": {
-        "name": "slider",
+        "name": "snackbar",
         "description": ""
       }
     }
@@ -9335,14 +10851,6 @@
           "default": "''",
           "attribute": "disabledReason"
         },
-        {
-          "kind": "field",
-          "name": "icon",
-          "type": {
-            "text": "string | undefined"
-          },
-          "attribute": "icon"
-        },
         {
           "kind": "field",
           "name": "label",
@@ -9413,6 +10921,22 @@
           },
           "default": "false"
         },
+        {
+          "kind": "field",
+          "name": "slotHasIcon",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false"
+        },
+        {
+          "kind": "field",
+          "name": "slotHasBadge",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false"
+        },
         {
           "kind": "field",
           "name": "isPressed",
@@ -9504,13 +11028,6 @@
           "default": "''",
           "fieldName": "disabledReason"
         },
-        {
-          "name": "icon",
-          "type": {
-            "text": "string | undefined"
-          },
-          "fieldName": "icon"
-        },
         {
           "name": "label",
           "type": {
@@ -9645,11 +11162,6 @@
           "attribute": "variant",
           "reflects": true
         },
-        {
-          "kind": "field",
-          "name": "uid",
-          "privacy": "private"
-        },
         {
           "kind": "field",
           "name": "onTabClick",
@@ -9667,13 +11179,25 @@
             }
           ]
         },
+        {
+          "kind": "method",
+          "name": "selectTabByIndex",
+          "parameters": [
+            {
+              "name": "index",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
         {
           "kind": "method",
           "name": "getTabs",
           "privacy": "private",
           "return": {
             "type": {
-              "text": "NodeListOf<HTMLElement>"
+              "text": "HTMLElement[]"
             }
           }
         },
@@ -9683,7 +11207,7 @@
           "privacy": "private",
           "return": {
             "type": {
-              "text": "NodeListOf<HTMLElement>"
+              "text": "HTMLElement[]"
             }
           }
         },
@@ -10351,6 +11875,16 @@
           },
           "attribute": "value",
           "reflects": true
+        },
+        {
+          "kind": "field",
+          "name": "active",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "attribute": "active",
+          "reflects": true
         }
       ],
       "attributes": [
@@ -10360,6 +11894,14 @@
             "text": "string | undefined"
           },
           "fieldName": "value"
+        },
+        {
+          "name": "active",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "active"
         }
       ],
       "superclass": {