@warp-ds/elements 2.2.0-next.20 → 2.2.0-next.21

package/dist/custom-elements.json

@@ -2,6 +2,107 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "packages/alert/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)",
+          "name": "WarpAlert",
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "AlertVariants"
+              },
+              "default": "'info'",
+              "attribute": "variant",
+              "reflects": true,
+              "parsedType": {
+                "text": "'negative' | 'positive' | 'warning' | 'info'"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "show",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "show",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "'alert'",
+              "attribute": "role",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "AlertVariants"
+              },
+              "default": "'info'",
+              "fieldName": "variant",
+              "parsedType": {
+                "text": "'negative' | 'positive' | 'warning' | 'info'"
+              }
+            },
+            {
+              "name": "show",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "show"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "'alert'",
+              "fieldName": "role"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "w-alert",
+          "customElement": true,
+          "modulePath": "packages/alert/index.ts",
+          "definitionPath": "packages/alert/index.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "w-alert",
+          "declaration": {
+            "name": "WarpAlert",
+            "module": "packages/alert/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpAlert",
+          "declaration": {
+            "name": "WarpAlert",
+            "module": "packages/alert/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "packages/affix/index.ts",
@@ -143,107 +244,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/alert/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)",
-          "name": "WarpAlert",
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "AlertVariants"
-              },
-              "default": "'info'",
-              "attribute": "variant",
-              "reflects": true,
-              "parsedType": {
-                "text": "'negative' | 'positive' | 'warning' | 'info'"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "show",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "show",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "'alert'",
-              "attribute": "role",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "AlertVariants"
-              },
-              "default": "'info'",
-              "fieldName": "variant",
-              "parsedType": {
-                "text": "'negative' | 'positive' | 'warning' | 'info'"
-              }
-            },
-            {
-              "name": "show",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "show"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "'alert'",
-              "fieldName": "role"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "w-alert",
-          "customElement": true,
-          "modulePath": "packages/alert/index.ts",
-          "definitionPath": "packages/alert/index.ts"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "w-alert",
-          "declaration": {
-            "name": "WarpAlert",
-            "module": "packages/alert/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WarpAlert",
-          "declaration": {
-            "name": "WarpAlert",
-            "module": "packages/alert/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/utils/index.js",
@@ -333,1169 +333,1169 @@
     },
     {
       "kind": "javascript-module",
-      "path": "packages/attention/index.ts",
+      "path": "packages/link/index.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "ccAttention",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ base: 'border-2 relative flex items-start', tooltip: 's-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8', callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8', highlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0', popover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0', arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform', arrowDirectionLeftStart: '-left-[8px]', arrowDirectionLeft: '-left-[8px]', arrowDirectionLeftEnd: '-left-[8px]', arrowDirectionRightStart: '-right-[8px]', arrowDirectionRight: '-right-[8px]', arrowDirectionRightEnd: '-right-[8px]', arrowDirectionBottomStart: '-bottom-[8px]', arrowDirectionBottom: '-bottom-[8px]', arrowDirectionBottomEnd: '-bottom-[8px]', arrowDirectionTopStart: '-top-[8px]', arrowDirectionTop: '-top-[8px]', arrowDirectionTopEnd: '-top-[8px]', arrowTooltip: 's-bg-inverted border-[--w-s-color-background-inverted]', arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]', arrowPopover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]', arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]', content: 'last-child:mb-0', notCallout: 'absolute z-50', closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`, }"
-        },
         {
           "kind": "class",
-          "description": "",
-          "name": "WarpAttention",
+          "description": "Buttons are used to perform actions, with different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)",
+          "name": "WarpLink",
           "members": [
             {
               "kind": "field",
-              "name": "show",
+              "name": "shadowRootOptions",
               "type": {
-                "text": "boolean"
+                "text": "object"
               },
-              "default": "false",
-              "attribute": "show",
-              "reflects": true
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "autofocus",
               "type": {
-                "text": "Directions"
+                "text": "boolean"
               },
-              "default": "'bottom'",
-              "attribute": "placement",
+              "attribute": "autofocus",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltip",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "ButtonVariant"
               },
-              "default": "false",
-              "attribute": "tooltip",
-              "reflects": true
+              "default": "'secondary'",
+              "attribute": "variant",
+              "reflects": true,
+              "parsedType": {
+                "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
+              }
             },
             {
               "kind": "field",
-              "name": "callout",
+              "name": "quiet",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "attribute": "callout",
+              "attribute": "quiet",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "popover",
+              "name": "small",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "attribute": "popover",
+              "attribute": "small",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "highlight",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "highlight",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "canClose",
+              "name": "href",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "attribute": "can-close",
+              "attribute": "href",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "noArrow",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "attribute": "no-arrow",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "distance",
+              "name": "target",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "8",
-              "attribute": "distance",
+              "attribute": "target",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "skidding",
+              "name": "rel",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "attribute": "skidding",
+              "attribute": "rel",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "flip",
+              "name": "fullWidth",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "attribute": "flip",
+              "attribute": "full-width",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "crossAxis",
+              "name": "buttonClass",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "attribute": "cross-axis",
+              "attribute": "button-class",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "fallbackPlacements",
+              "name": "name",
               "type": {
-                "text": "Directions[]"
+                "text": "string"
               },
-              "attribute": "fallback-placements",
+              "attribute": "name",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "handleDone",
-              "type": {
-                "text": "handleDone() => void"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "pointingAtDirection",
-              "type": {
-                "text": "pointingAtDirection() => void"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "activeAttentionType",
-              "type": {
-                "text": "activeAttentionType() => void"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "defaultAriaLabel",
-              "type": {
-                "text": "defaultAriaLabel() => void"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setAriaLabels",
-              "type": {
-                "text": "setAriaLabels() => void"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "close",
-              "type": {
-                "text": "close() => void"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "keypressed",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
+              "kind": "field",
+              "name": "classes",
               "type": {
-                "text": "keypressed(e: KeyboardEvent) => void"
+                "text": "string"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_initialPlacement"
-            },
-            {
-              "kind": "field",
-              "name": "_actualDirection"
             }
           ],
           "attributes": [
             {
-              "name": "show",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "show"
-            },
-            {
-              "name": "placement",
-              "type": {
-                "text": "Directions"
-              },
-              "default": "'bottom'",
-              "fieldName": "placement"
-            },
-            {
-              "name": "tooltip",
+              "name": "autofocus",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "fieldName": "tooltip"
+              "fieldName": "autofocus"
             },
             {
-              "name": "callout",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "ButtonVariant"
               },
-              "default": "false",
-              "fieldName": "callout"
+              "default": "'secondary'",
+              "fieldName": "variant",
+              "parsedType": {
+                "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
+              }
             },
             {
-              "name": "popover",
+              "name": "quiet",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "fieldName": "popover"
+              "fieldName": "quiet"
             },
             {
-              "name": "highlight",
+              "name": "small",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "fieldName": "highlight"
+              "fieldName": "small"
             },
             {
-              "name": "can-close",
+              "name": "href",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "canClose"
+              "fieldName": "href"
             },
             {
-              "name": "no-arrow",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "fieldName": "noArrow"
+              "fieldName": "disabled"
             },
             {
-              "name": "distance",
+              "name": "target",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "8",
-              "fieldName": "distance"
+              "fieldName": "target"
             },
             {
-              "name": "skidding",
+              "name": "rel",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "fieldName": "skidding"
+              "fieldName": "rel"
             },
             {
-              "name": "flip",
+              "name": "full-width",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "fieldName": "flip"
+              "fieldName": "fullWidth"
             },
             {
-              "name": "cross-axis",
+              "name": "button-class",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "crossAxis"
+              "fieldName": "buttonClass"
             },
             {
-              "name": "fallback-placements",
+              "name": "name",
               "type": {
-                "text": "Directions[]"
+                "text": "string"
               },
-              "fieldName": "fallbackPlacements"
+              "fieldName": "name"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@open-wc/form-control"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "w-attention",
+          "tagName": "w-link",
           "customElement": true,
-          "modulePath": "packages/attention/index.ts",
-          "definitionPath": "packages/attention/index.ts"
+          "modulePath": "packages/link/index.ts",
+          "definitionPath": "packages/link/index.ts"
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "ccAttention",
-          "declaration": {
-            "name": "ccAttention",
-            "module": "packages/attention/index.ts"
-          }
-        },
         {
           "kind": "custom-element-definition",
-          "name": "w-attention",
+          "name": "w-link",
           "declaration": {
-            "name": "WarpAttention",
-            "module": "packages/attention/index.ts"
+            "name": "WarpLink",
+            "module": "packages/link/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WarpAttention",
+          "name": "WarpLink",
           "declaration": {
-            "name": "WarpAttention",
-            "module": "packages/attention/index.ts"
+            "name": "WarpLink",
+            "module": "packages/link/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "packages/badge/index.ts",
+      "path": "packages/button/index.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "ccButton",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ // Buttontypes secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`, secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`, secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`, secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`, secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`, secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`, secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`, secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`, secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.inProgress}`, secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`, secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`, primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`, primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`, primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `, primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`, primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`, primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`, primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`, primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`, primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.primary}`, primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`, primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`, utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`, utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`, utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`, utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`, utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`, utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`, utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`, utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`, utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`, negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`, negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`, negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`, negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`, negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`, negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`, negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`, negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`, negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`, pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`, pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`, pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`, link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`, linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`, linkAsButton: 'inline-block active:no-underline hover:no-underline focus:no-underline text-center', a11y: 'sr-only', fullWidth: 'w-full max-w-full', contentWidth: 'max-w-max', }"
+        },
         {
           "kind": "class",
-          "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)",
-          "name": "WarpBadge",
+          "description": "Buttons are used to perform actions, widh different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)",
+          "name": "WarpButton",
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "shadowRootOptions",
               "type": {
-                "text": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'"
+                "text": "object"
               },
-              "default": "'neutral'",
-              "attribute": "variant",
-              "reflects": true
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "type",
               "type": {
-                "text": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"
+                "text": "ButtonType"
               },
-              "attribute": "position",
+              "default": "'button'",
+              "attribute": "type",
+              "reflects": true,
+              "parsedType": {
+                "text": "'button' | 'submit' | 'reset'"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "autofocus",
               "reflects": true
-            }
-          ],
-          "attributes": [
+            },
             {
+              "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'"
+                "text": "ButtonVariant"
               },
-              "default": "'neutral'",
-              "fieldName": "variant"
+              "default": "'secondary'",
+              "attribute": "variant",
+              "reflects": true,
+              "parsedType": {
+                "text": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
+              }
             },
             {
-              "name": "position",
+              "kind": "field",
+              "name": "quiet",
               "type": {
-                "text": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"
+                "text": "boolean"
               },
-              "fieldName": "position"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "w-badge",
-          "customElement": true,
-          "modulePath": "packages/badge/index.ts",
-          "definitionPath": "packages/badge/index.ts"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "w-badge",
-          "declaration": {
-            "name": "WarpBadge",
-            "module": "packages/badge/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WarpBadge",
-          "declaration": {
-            "name": "WarpBadge",
-            "module": "packages/badge/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "packages/box/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Box is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)",
-          "name": "WarpBox",
-          "members": [
+              "attribute": "quiet",
+              "reflects": true
+            },
             {
               "kind": "field",
-              "name": "bleed",
+              "name": "small",
               "type": {
                 "text": "boolean"
               },
-              "attribute": "bleed",
+              "attribute": "small",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "bordered",
+              "name": "loading",
               "type": {
                 "text": "boolean"
               },
-              "attribute": "bordered",
+              "attribute": "loading",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "info",
+              "name": "href",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "attribute": "info",
+              "attribute": "href",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "neutral",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "target",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "rel",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
               "type": {
                 "text": "boolean"
               },
-              "attribute": "neutral",
+              "attribute": "full-width",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "role",
+              "name": "buttonClass",
               "type": {
                 "text": "string"
               },
-              "attribute": "role",
+              "attribute": "button-class",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "value",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaValueTextLoading"
             }
           ],
           "attributes": [
             {
-              "name": "bleed",
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "default": "'button'",
+              "fieldName": "type",
+              "parsedType": {
+                "text": "'button' | 'submit' | 'reset'"
+              }
+            },
+            {
+              "name": "autofocus",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "bleed"
+              "fieldName": "autofocus"
             },
             {
-              "name": "bordered",
+              "name": "variant",
+              "type": {
+                "text": "ButtonVariant"
+              },
+              "default": "'secondary'",
+              "fieldName": "variant",
+              "parsedType": {
+                "text": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
+              }
+            },
+            {
+              "name": "quiet",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "bordered"
+              "fieldName": "quiet"
             },
             {
-              "name": "info",
+              "name": "small",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "info"
+              "fieldName": "small"
             },
             {
-              "name": "neutral",
+              "name": "loading",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "neutral"
+              "fieldName": "loading"
             },
             {
-              "name": "role",
+              "name": "href",
               "type": {
                 "text": "string"
               },
-              "fieldName": "role"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "w-box",
-          "customElement": true,
-          "modulePath": "packages/box/index.ts",
-          "definitionPath": "packages/box/index.ts"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "w-box",
-          "declaration": {
-            "name": "WarpBox",
-            "module": "packages/box/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WarpBox",
-          "declaration": {
-            "name": "WarpBox",
-            "module": "packages/box/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "packages/breadcrumbs/index.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ccBreadcrumbs",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ wrapper: 'flex space-x-8', text: 's-text', link: 's-text-link', separator: 'select-none s-icon', a11y: 'sr-only', }"
-        },
-        {
-          "kind": "class",
-          "description": "Breadcrumbs show the navigation structure for the current location.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)",
-          "name": "WarpBreadcrumbs",
-          "members": [
+              "fieldName": "href"
+            },
             {
-              "kind": "field",
-              "name": "ariaLabel",
+              "name": "target",
               "type": {
                 "text": "string"
               },
-              "attribute": "aria-label"
-            }
-          ],
-          "attributes": [
+              "fieldName": "target"
+            },
             {
-              "name": "aria-label",
+              "name": "rel",
               "type": {
                 "text": "string"
               },
-              "fieldName": "ariaLabel"
+              "fieldName": "rel"
+            },
+            {
+              "name": "full-width",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "fullWidth"
+            },
+            {
+              "name": "button-class",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "buttonClass"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "value"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@open-wc/form-control"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "w-breadcrumbs",
+          "tagName": "w-button",
           "customElement": true,
-          "modulePath": "packages/breadcrumbs/index.ts",
-          "definitionPath": "packages/breadcrumbs/index.ts"
+          "modulePath": "packages/button/index.ts",
+          "definitionPath": "packages/button/index.ts"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ccBreadcrumbs",
+          "name": "ccButton",
           "declaration": {
-            "name": "ccBreadcrumbs",
-            "module": "packages/breadcrumbs/index.ts"
+            "name": "ccButton",
+            "module": "packages/button/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "w-breadcrumbs",
+          "name": "w-button",
           "declaration": {
-            "name": "WarpBreadcrumbs",
-            "module": "packages/breadcrumbs/index.ts"
+            "name": "WarpButton",
+            "module": "packages/button/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WarpBreadcrumbs",
+          "name": "WarpButton",
           "declaration": {
-            "name": "WarpBreadcrumbs",
-            "module": "packages/breadcrumbs/index.ts"
+            "name": "WarpButton",
+            "module": "packages/button/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "packages/link/index.ts",
+      "path": "packages/attention/index.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "ccAttention",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ base: 'border-2 relative flex items-start', tooltip: 's-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8', callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8', highlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0', popover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0', arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform', arrowDirectionLeftStart: '-left-[8px]', arrowDirectionLeft: '-left-[8px]', arrowDirectionLeftEnd: '-left-[8px]', arrowDirectionRightStart: '-right-[8px]', arrowDirectionRight: '-right-[8px]', arrowDirectionRightEnd: '-right-[8px]', arrowDirectionBottomStart: '-bottom-[8px]', arrowDirectionBottom: '-bottom-[8px]', arrowDirectionBottomEnd: '-bottom-[8px]', arrowDirectionTopStart: '-top-[8px]', arrowDirectionTop: '-top-[8px]', arrowDirectionTopEnd: '-top-[8px]', arrowTooltip: 's-bg-inverted border-[--w-s-color-background-inverted]', arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]', arrowPopover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]', arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]', content: 'last-child:mb-0', notCallout: 'absolute z-50', closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`, }"
+        },
         {
           "kind": "class",
-          "description": "Buttons are used to perform actions, with different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)",
-          "name": "WarpLink",
+          "description": "",
+          "name": "WarpAttention",
           "members": [
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "show",
               "type": {
-                "text": "object"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
+              "default": "false",
+              "attribute": "show",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "autofocus",
+              "name": "placement",
+              "type": {
+                "text": "Directions"
+              },
+              "default": "'bottom'",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tooltip",
               "type": {
                 "text": "boolean"
               },
-              "attribute": "autofocus",
+              "default": "false",
+              "attribute": "tooltip",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "callout",
               "type": {
-                "text": "ButtonVariant"
+                "text": "boolean"
               },
-              "default": "'secondary'",
-              "attribute": "variant",
-              "reflects": true,
-              "parsedType": {
-                "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
-              }
+              "default": "false",
+              "attribute": "callout",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "quiet",
+              "name": "popover",
               "type": {
                 "text": "boolean"
               },
-              "attribute": "quiet",
+              "default": "false",
+              "attribute": "popover",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "small",
+              "name": "highlight",
               "type": {
                 "text": "boolean"
               },
-              "attribute": "small",
+              "default": "false",
+              "attribute": "highlight",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "canClose",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "attribute": "href",
+              "default": "false",
+              "attribute": "can-close",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "noArrow",
               "type": {
                 "text": "boolean"
               },
-              "attribute": "disabled",
+              "default": "false",
+              "attribute": "no-arrow",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "distance",
+              "type": {
+                "text": "number"
+              },
+              "default": "8",
+              "attribute": "distance",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "target",
+              "kind": "field",
+              "name": "skidding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "attribute": "skidding",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "flip",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "flip",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "crossAxis",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "cross-axis",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "fallbackPlacements",
+              "type": {
+                "text": "Directions[]"
+              },
+              "attribute": "fallback-placements",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleDone",
+              "type": {
+                "text": "handleDone() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "pointingAtDirection",
+              "type": {
+                "text": "pointingAtDirection() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "activeAttentionType",
+              "type": {
+                "text": "activeAttentionType() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "defaultAriaLabel",
+              "type": {
+                "text": "defaultAriaLabel() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setAriaLabels",
               "type": {
-                "text": "string"
-              },
-              "attribute": "target",
-              "reflects": true
+                "text": "setAriaLabels() => void"
+              }
             },
             {
-              "kind": "field",
-              "name": "rel",
+              "kind": "method",
+              "name": "close",
               "type": {
-                "text": "string"
-              },
-              "attribute": "rel",
-              "reflects": true
+                "text": "close() => void"
+              }
             },
             {
-              "kind": "field",
-              "name": "fullWidth",
+              "kind": "method",
+              "name": "keypressed",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
               "type": {
-                "text": "boolean"
-              },
-              "attribute": "full-width",
-              "reflects": true
+                "text": "keypressed(e: KeyboardEvent) => void"
+              }
             },
             {
               "kind": "field",
-              "name": "buttonClass",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "button-class",
-              "reflects": true
+              "name": "_initialPlacement"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "_actualDirection"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "show",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "attribute": "name",
-              "reflects": true
+              "default": "false",
+              "fieldName": "show"
             },
             {
-              "kind": "field",
-              "name": "classes",
+              "name": "placement",
               "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "attributes": [
+                "text": "Directions"
+              },
+              "default": "'bottom'",
+              "fieldName": "placement"
+            },
             {
-              "name": "autofocus",
+              "name": "tooltip",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "autofocus"
+              "default": "false",
+              "fieldName": "tooltip"
             },
             {
-              "name": "variant",
+              "name": "callout",
               "type": {
-                "text": "ButtonVariant"
+                "text": "boolean"
               },
-              "default": "'secondary'",
-              "fieldName": "variant",
-              "parsedType": {
-                "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
-              }
+              "default": "false",
+              "fieldName": "callout"
             },
             {
-              "name": "quiet",
+              "name": "popover",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "quiet"
+              "default": "false",
+              "fieldName": "popover"
             },
             {
-              "name": "small",
+              "name": "highlight",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "small"
+              "default": "false",
+              "fieldName": "highlight"
             },
             {
-              "name": "href",
+              "name": "can-close",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "fieldName": "href"
+              "default": "false",
+              "fieldName": "canClose"
             },
             {
-              "name": "disabled",
+              "name": "no-arrow",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "disabled"
+              "default": "false",
+              "fieldName": "noArrow"
             },
             {
-              "name": "target",
+              "name": "distance",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "fieldName": "target"
+              "default": "8",
+              "fieldName": "distance"
             },
             {
-              "name": "rel",
+              "name": "skidding",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "fieldName": "rel"
+              "default": "0",
+              "fieldName": "skidding"
             },
             {
-              "name": "full-width",
+              "name": "flip",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "fullWidth"
+              "default": "false",
+              "fieldName": "flip"
             },
             {
-              "name": "button-class",
+              "name": "cross-axis",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "fieldName": "buttonClass"
+              "default": "false",
+              "fieldName": "crossAxis"
             },
             {
-              "name": "name",
+              "name": "fallback-placements",
               "type": {
-                "text": "string"
+                "text": "Directions[]"
               },
-              "fieldName": "name"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FormControlMixin",
-              "package": "@open-wc/form-control"
+              "fieldName": "fallbackPlacements"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "w-link",
+          "tagName": "w-attention",
           "customElement": true,
-          "modulePath": "packages/link/index.ts",
-          "definitionPath": "packages/link/index.ts"
+          "modulePath": "packages/attention/index.ts",
+          "definitionPath": "packages/attention/index.ts"
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "ccAttention",
+          "declaration": {
+            "name": "ccAttention",
+            "module": "packages/attention/index.ts"
+          }
+        },
         {
           "kind": "custom-element-definition",
-          "name": "w-link",
+          "name": "w-attention",
           "declaration": {
-            "name": "WarpLink",
-            "module": "packages/link/index.ts"
+            "name": "WarpAttention",
+            "module": "packages/attention/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WarpLink",
+          "name": "WarpAttention",
           "declaration": {
-            "name": "WarpLink",
-            "module": "packages/link/index.ts"
+            "name": "WarpAttention",
+            "module": "packages/attention/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "packages/button/index.ts",
+      "path": "packages/badge/index.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "ccButton",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ // Buttontypes secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`, secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`, secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`, secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`, secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`, secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`, secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`, secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`, secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.inProgress}`, secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`, secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`, primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`, primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`, primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `, primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`, primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`, primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`, primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`, primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`, primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.primary}`, primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`, primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`, utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`, utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`, utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`, utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`, utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`, utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`, utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`, utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`, utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`, negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`, negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`, negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`, negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`, negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`, negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`, negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`, negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`, negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`, pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`, pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`, pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`, link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`, linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`, linkAsButton: 'inline-block active:no-underline hover:no-underline focus:no-underline text-center', a11y: 'sr-only', fullWidth: 'w-full max-w-full', contentWidth: 'max-w-max', }"
-        },
         {
           "kind": "class",
-          "description": "Buttons are used to perform actions, widh different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)",
-          "name": "WarpButton",
+          "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)",
+          "name": "WarpBadge",
           "members": [
-            {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "ButtonType"
-              },
-              "default": "'button'",
-              "attribute": "type",
-              "reflects": true,
-              "parsedType": {
-                "text": "'button' | 'submit' | 'reset'"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "attribute": "autofocus",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "ButtonVariant"
+                "text": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'"
               },
-              "default": "'secondary'",
+              "default": "'neutral'",
               "attribute": "variant",
-              "reflects": true,
-              "parsedType": {
-                "text": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "quiet",
-              "type": {
-                "text": "boolean"
-              },
-              "attribute": "quiet",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "small",
-              "type": {
-                "text": "boolean"
-              },
-              "attribute": "small",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "position",
               "type": {
-                "text": "boolean"
+                "text": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"
               },
-              "attribute": "loading",
+              "attribute": "position",
               "reflects": true
-            },
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "href",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'"
               },
-              "attribute": "href",
-              "reflects": true
+              "default": "'neutral'",
+              "fieldName": "variant"
             },
             {
-              "kind": "field",
-              "name": "target",
+              "name": "position",
               "type": {
-                "text": "string"
+                "text": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"
               },
-              "attribute": "target",
-              "reflects": true
-            },
+              "fieldName": "position"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "w-badge",
+          "customElement": true,
+          "modulePath": "packages/badge/index.ts",
+          "definitionPath": "packages/badge/index.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "w-badge",
+          "declaration": {
+            "name": "WarpBadge",
+            "module": "packages/badge/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpBadge",
+          "declaration": {
+            "name": "WarpBadge",
+            "module": "packages/badge/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "packages/box/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Box is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)",
+          "name": "WarpBox",
+          "members": [
             {
               "kind": "field",
-              "name": "rel",
+              "name": "bleed",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "attribute": "rel",
+              "attribute": "bleed",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "fullWidth",
+              "name": "bordered",
               "type": {
                 "text": "boolean"
               },
-              "attribute": "full-width",
+              "attribute": "bordered",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "buttonClass",
+              "name": "info",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "attribute": "button-class",
+              "attribute": "info",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "neutral",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "attribute": "name",
+              "attribute": "neutral",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "role",
               "type": {
                 "text": "string"
               },
-              "attribute": "value",
+              "attribute": "role",
               "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "ariaValueTextLoading"
             }
           ],
           "attributes": [
             {
-              "name": "type",
-              "type": {
-                "text": "ButtonType"
-              },
-              "default": "'button'",
-              "fieldName": "type",
-              "parsedType": {
-                "text": "'button' | 'submit' | 'reset'"
-              }
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "ButtonVariant"
-              },
-              "default": "'secondary'",
-              "fieldName": "variant",
-              "parsedType": {
-                "text": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
-              }
-            },
-            {
-              "name": "quiet",
+              "name": "bleed",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "quiet"
+              "fieldName": "bleed"
             },
             {
-              "name": "small",
+              "name": "bordered",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "small"
+              "fieldName": "bordered"
             },
             {
-              "name": "loading",
+              "name": "info",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "loading"
-            },
-            {
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "href"
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "target"
-            },
-            {
-              "name": "rel",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "rel"
+              "fieldName": "info"
             },
             {
-              "name": "full-width",
+              "name": "neutral",
               "type": {
                 "text": "boolean"
               },
-              "fieldName": "fullWidth"
+              "fieldName": "neutral"
             },
             {
-              "name": "button-class",
+              "name": "role",
               "type": {
                 "text": "string"
               },
-              "fieldName": "buttonClass"
-            },
+              "fieldName": "role"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "w-box",
+          "customElement": true,
+          "modulePath": "packages/box/index.ts",
+          "definitionPath": "packages/box/index.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "w-box",
+          "declaration": {
+            "name": "WarpBox",
+            "module": "packages/box/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpBox",
+          "declaration": {
+            "name": "WarpBox",
+            "module": "packages/box/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "packages/breadcrumbs/index.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ccBreadcrumbs",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ wrapper: 'flex space-x-8', text: 's-text', link: 's-text-link', separator: 'select-none s-icon', a11y: 'sr-only', }"
+        },
+        {
+          "kind": "class",
+          "description": "Breadcrumbs show the navigation structure for the current location.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)",
+          "name": "WarpBreadcrumbs",
+          "members": [
             {
-              "name": "name",
+              "kind": "field",
+              "name": "ariaLabel",
               "type": {
                 "text": "string"
               },
-              "fieldName": "name"
-            },
+              "attribute": "aria-label"
+            }
+          ],
+          "attributes": [
             {
-              "name": "value",
+              "name": "aria-label",
               "type": {
                 "text": "string"
               },
-              "fieldName": "value"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FormControlMixin",
-              "package": "@open-wc/form-control"
+              "fieldName": "ariaLabel"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "w-button",
+          "tagName": "w-breadcrumbs",
           "customElement": true,
-          "modulePath": "packages/button/index.ts",
-          "definitionPath": "packages/button/index.ts"
+          "modulePath": "packages/breadcrumbs/index.ts",
+          "definitionPath": "packages/breadcrumbs/index.ts"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ccButton",
+          "name": "ccBreadcrumbs",
           "declaration": {
-            "name": "ccButton",
-            "module": "packages/button/index.ts"
+            "name": "ccBreadcrumbs",
+            "module": "packages/breadcrumbs/index.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "w-button",
+          "name": "w-breadcrumbs",
           "declaration": {
-            "name": "WarpButton",
-            "module": "packages/button/index.ts"
+            "name": "WarpBreadcrumbs",
+            "module": "packages/breadcrumbs/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WarpButton",
+          "name": "WarpBreadcrumbs",
           "declaration": {
-            "name": "WarpButton",
-            "module": "packages/button/index.ts"
+            "name": "WarpBreadcrumbs",
+            "module": "packages/breadcrumbs/index.ts"
           }
         }
       ]
@@ -2595,7 +2595,8 @@
                 "text": "'radio' | 'checkbox'"
               },
               "default": "'radio'",
-              "attribute": "type"
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -4832,7 +4833,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{ base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current', default: 's-text s-bg pl-8 border-1 s-border-strong hover:s-border-strong-hover active:s-border-active', disabled: 's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none', invalid: 's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!', readOnly: 's-text bg-transparent pl-0 border-0 pointer-events-none before:hidden', wrapper: 'relative', selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `, chevron: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer', chevronDisabled: 'opacity-25', }"
+          "default": "{ base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current', default: 's-text s-bg pl-8 border-1 s-border-strong hover:s-border-strong-hover active:s-border-active', disabled: 's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none', invalid: 's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!', readOnly: 's-text bg-transparent pl-0 border-0 pointer-events-none before:hidden', wrapper: 'relative', selectWrapper: 'relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none ', chevron: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer', chevronDisabled: 'opacity-25', }"
         },
         {
           "kind": "variable",
@@ -5009,11 +5010,6 @@
               "type": {
                 "text": "onChange({ target }) => void"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_options",
-              "attribute": "_options"
             }
           ],
           "attributes": [
@@ -5081,10 +5077,6 @@
               "description": "Renders the field in a readonly state.",
               "fieldName": "readOnly"
             },
-            {
-              "name": "_options",
-              "fieldName": "_options"
-            },
             {
               "name": "name",
               "type": {
@@ -5598,7 +5590,8 @@
               "type": {
                 "text": "string"
               },
-              "attribute": "aria-label"
+              "attribute": "aria-label",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -5606,7 +5599,8 @@
               "type": {
                 "text": "string"
               },
-              "attribute": "aria-description"
+              "attribute": "aria-description",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -5614,7 +5608,8 @@
               "type": {
                 "text": "string"
               },
-              "attribute": "label"
+              "attribute": "label",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -5622,7 +5617,8 @@
               "type": {
                 "text": "string"
               },
-              "attribute": "name"
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -5885,7 +5881,8 @@
                 "text": "string"
               },
               "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead.",
-              "attribute": "label"
+              "attribute": "label",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -5943,7 +5940,8 @@
                 "text": "number"
               },
               "description": "Pass a value similar to step to create visual markers at that interval",
-              "attribute": "markers"
+              "attribute": "markers",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -5951,7 +5949,8 @@
               "type": {
                 "text": "number"
               },
-              "attribute": "step"
+              "attribute": "step",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -5960,7 +5959,8 @@
                 "text": "string"
               },
               "description": "Suffix used in text input fields and for the min and max values of the slider.",
-              "attribute": "suffix"
+              "attribute": "suffix",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -6283,14 +6283,253 @@
               }
             },
             {
-              "kind": "method",
-              "name": "getAriaLabel",
+              "kind": "method",
+              "name": "getAriaLabel",
+              "type": {
+                "text": "getAriaLabel() => void"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "active"
+            },
+            {
+              "name": "completed",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "completed"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "w-step",
+          "customElement": true,
+          "modulePath": "packages/steps/index.ts",
+          "definitionPath": "packages/steps/index.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "w-steps",
+          "declaration": {
+            "name": "WarpSteps",
+            "module": "packages/steps/index.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "w-step",
+          "declaration": {
+            "name": "WarpStep",
+            "module": "packages/steps/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpSteps",
+          "declaration": {
+            "name": "WarpSteps",
+            "module": "packages/steps/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpStep",
+          "declaration": {
+            "name": "WarpStep",
+            "module": "packages/steps/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "packages/switch/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "WarpSwitch",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "value"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "w-switch",
+          "customElement": true,
+          "modulePath": "packages/switch/index.ts",
+          "definitionPath": "packages/switch/index.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "WarpSwitch",
+          "declaration": {
+            "name": "WarpSwitch",
+            "module": "packages/switch/index.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "w-switch",
+          "declaration": {
+            "name": "WarpSwitch",
+            "module": "packages/switch/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "packages/tabs/tab.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Individual tab component used within w-tabs container.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)",
+          "name": "WarpTab",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "over",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "over",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tabClass",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "tab-class",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_classes",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_hasChildren",
+              "privacy": "private",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "name"
+            },
+            {
+              "name": "label",
               "type": {
-                "text": "getAriaLabel() => void"
-              }
-            }
-          ],
-          "attributes": [
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
             {
               "name": "active",
               "type": {
@@ -6300,140 +6539,122 @@
               "fieldName": "active"
             },
             {
-              "name": "completed",
+              "name": "over",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "completed"
+              "fieldName": "over"
+            },
+            {
+              "name": "tab-class",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "tabClass"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "w-step",
+          "tagName": "w-tab",
           "customElement": true,
-          "modulePath": "packages/steps/index.ts",
-          "definitionPath": "packages/steps/index.ts"
+          "modulePath": "packages/tabs/tab.ts",
+          "definitionPath": "packages/tabs/tab.ts"
         }
       ],
       "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "w-steps",
-          "declaration": {
-            "name": "WarpSteps",
-            "module": "packages/steps/index.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "w-step",
-          "declaration": {
-            "name": "WarpStep",
-            "module": "packages/steps/index.ts"
-          }
-        },
         {
           "kind": "js",
-          "name": "WarpSteps",
+          "name": "WarpTab",
           "declaration": {
-            "name": "WarpSteps",
-            "module": "packages/steps/index.ts"
+            "name": "WarpTab",
+            "module": "packages/tabs/tab.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "WarpStep",
+          "kind": "custom-element-definition",
+          "name": "w-tab",
           "declaration": {
-            "name": "WarpStep",
-            "module": "packages/steps/index.ts"
+            "name": "WarpTab",
+            "module": "packages/tabs/tab.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "packages/switch/index.ts",
+      "path": "packages/tabs/tab-panel.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "WarpSwitch",
+          "description": "Tab panel component that holds content for individual tabs.\nEach tab panel should have a name that matches a corresponding tab.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)",
+          "name": "WarpTabPanel",
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "attribute": "value",
+              "attribute": "name",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "hidden",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "attribute": "disabled",
+              "default": "true",
+              "attribute": "hidden",
               "reflects": true
             }
           ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
           "attributes": [
             {
-              "name": "value",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "value"
+              "fieldName": "name"
             },
             {
-              "name": "disabled",
+              "name": "hidden",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "fieldName": "disabled"
+              "default": "true",
+              "fieldName": "hidden"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "w-switch",
+          "tagName": "w-tab-panel",
           "customElement": true,
-          "modulePath": "packages/switch/index.ts",
-          "definitionPath": "packages/switch/index.ts"
+          "modulePath": "packages/tabs/tab-panel.ts",
+          "definitionPath": "packages/tabs/tab-panel.ts"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "WarpSwitch",
+          "name": "WarpTabPanel",
           "declaration": {
-            "name": "WarpSwitch",
-            "module": "packages/switch/index.ts"
+            "name": "WarpTabPanel",
+            "module": "packages/tabs/tab-panel.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "w-switch",
+          "name": "w-tab-panel",
           "declaration": {
-            "name": "WarpSwitch",
-            "module": "packages/switch/index.ts"
+            "name": "WarpTabPanel",
+            "module": "packages/tabs/tab-panel.ts"
           }
         }
       ]
@@ -6505,212 +6726,76 @@
               "name": "_updateSelectionIndicatorDebounced",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "_initializeActiveTab",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_handleTabClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_notifyTabChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updateSelectionIndicator",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updatePanels",
-              "privacy": "private"
-            },
             {
               "kind": "field",
-              "name": "_handleKeyDown",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_tabCount",
-              "privacy": "private",
+              "name": "tabs",
               "readonly": true
             },
             {
               "kind": "field",
-              "name": "_gridClass",
-              "privacy": "private",
+              "name": "activeTab",
               "readonly": true
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "active"
-            },
-            {
-              "name": "tab-class",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "tabClass"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "w-tabs",
-          "customElement": true,
-          "modulePath": "packages/tabs/tabs.ts",
-          "definitionPath": "packages/tabs/tabs.ts"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "WarpTabs",
-          "declaration": {
-            "name": "WarpTabs",
-            "module": "packages/tabs/tabs.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "w-tabs",
-          "declaration": {
-            "name": "WarpTabs",
-            "module": "packages/tabs/tabs.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "packages/tabs/tab.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Individual tab component used within w-tabs container.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)",
-          "name": "WarpTab",
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "name",
-              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "label",
-              "reflects": true
+              "kind": "method",
+              "name": "_initializeActiveTab",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "active",
-              "reflects": true
+              "name": "_handleTabClick",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "over",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "over",
-              "reflects": true
+              "kind": "method",
+              "name": "_notifyTabChange",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "tabClass",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "tab-class",
-              "reflects": true
+              "kind": "method",
+              "name": "updateSelectionIndicator",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updatePanels",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_handleClick",
+              "name": "_handleKeyDown",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_classes",
+              "name": "_tabCount",
               "privacy": "private",
               "readonly": true
             },
             {
               "kind": "field",
-              "name": "_hasChildren",
+              "name": "_gridClass",
               "privacy": "private",
               "readonly": true
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "name",
+              "name": "change",
               "type": {
-                "text": "string"
-              },
-              "fieldName": "name"
-            },
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "name": "label",
+              "name": "active",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "label"
-            },
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "active"
             },
-            {
-              "name": "over",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "over"
-            },
             {
               "name": "tab-class",
               "type": {
@@ -6724,150 +6809,230 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "w-tab",
+          "tagName": "w-tabs",
           "customElement": true,
-          "modulePath": "packages/tabs/tab.ts",
-          "definitionPath": "packages/tabs/tab.ts"
+          "modulePath": "packages/tabs/tabs.ts",
+          "definitionPath": "packages/tabs/tabs.ts"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "WarpTab",
+          "name": "WarpTabs",
           "declaration": {
-            "name": "WarpTab",
-            "module": "packages/tabs/tab.ts"
+            "name": "WarpTabs",
+            "module": "packages/tabs/tabs.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "w-tab",
+          "name": "w-tabs",
+          "declaration": {
+            "name": "WarpTabs",
+            "module": "packages/tabs/tabs.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "packages/tabs/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "WarpTab",
           "declaration": {
             "name": "WarpTab",
-            "module": "packages/tabs/tab.ts"
+            "module": "./tab.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpTabPanel",
+          "declaration": {
+            "name": "WarpTabPanel",
+            "module": "./tab-panel.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TabChangeEvent",
+          "declaration": {
+            "name": "TabChangeEvent",
+            "module": "./tabs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpTabs",
+          "declaration": {
+            "name": "WarpTabs",
+            "module": "./tabs.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "packages/tabs/tab-panel.ts",
+      "path": "packages/toast/toast.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "packages/toast/toast-container.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Tab panel component that holds content for individual tabs.\nEach tab panel should have a name that matches a corresponding tab.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)",
-          "name": "WarpTabPanel",
+          "description": "",
+          "name": "WarpToastContainer",
           "members": [
             {
               "kind": "field",
-              "name": "name",
+              "name": "_toasts",
               "type": {
-                "text": "string"
+                "text": "Map<string | number, ToastInternal>"
               },
-              "attribute": "name",
-              "reflects": true
+              "privacy": "private",
+              "default": "new Map()"
             },
             {
               "kind": "field",
-              "name": "hidden",
+              "name": "_interval",
               "type": {
-                "text": "boolean"
+                "text": "NodeJS.Timeout | undefined"
               },
-              "default": "true",
-              "attribute": "hidden",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "privacy": "private"
+            },
             {
-              "name": "name",
+              "kind": "method",
+              "name": "init",
+              "privacy": "public",
+              "static": true,
               "type": {
-                "text": "string"
+                "text": "init() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "get",
+              "return": {
+                "type": {
+                  "text": "ToastInternal | undefined"
+                }
               },
-              "fieldName": "name"
+              "parameters": [
+                {
+                  "name": "id",
+                  "type": {
+                    "text": "string | number"
+                  }
+                }
+              ],
+              "type": {
+                "text": "get(id: string | number) => ToastInternal | undefined"
+              }
             },
             {
-              "name": "hidden",
+              "kind": "method",
+              "name": "set",
+              "return": {
+                "type": {
+                  "text": "Map<string | number, ToastInternal>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "toast",
+                  "type": {
+                    "text": "ToastOptions"
+                  }
+                }
+              ],
               "type": {
-                "text": "boolean"
+                "text": "set(toast: ToastOptions) => Map<string | number, ToastInternal>"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "del",
+              "return": {
+                "type": {
+                  "text": "Promise<boolean>"
+                }
               },
-              "default": "true",
-              "fieldName": "hidden"
+              "parameters": [
+                {
+                  "name": "id",
+                  "type": {
+                    "text": "string | number"
+                  }
+                }
+              ],
+              "type": {
+                "text": "del(id: string | number) => Promise<boolean>"
+              }
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "w-tab-panel",
+          "tagName": "w-toast-container",
           "customElement": true,
-          "modulePath": "packages/tabs/tab-panel.ts",
-          "definitionPath": "packages/tabs/tab-panel.ts"
+          "modulePath": "packages/toast/toast-container.ts",
+          "definitionPath": "packages/toast/toast-container.ts"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "WarpTabPanel",
+          "name": "WarpToastContainer",
           "declaration": {
-            "name": "WarpTabPanel",
-            "module": "packages/tabs/tab-panel.ts"
+            "name": "WarpToastContainer",
+            "module": "packages/toast/toast-container.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "w-tab-panel",
+          "name": "w-toast-container",
           "declaration": {
-            "name": "WarpTabPanel",
-            "module": "packages/tabs/tab-panel.ts"
+            "name": "WarpToastContainer",
+            "module": "packages/toast/toast-container.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "packages/tabs/index.ts",
+      "path": "packages/toast/index.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "WarpTabs",
+          "name": "removeToast",
           "declaration": {
-            "name": "WarpTabs",
-            "module": "./tabs.js"
+            "name": "removeToast",
+            "module": "./api"
           }
         },
         {
           "kind": "js",
-          "name": "WarpTab",
+          "name": "toast",
           "declaration": {
-            "name": "WarpTab",
-            "module": "./tab.js"
+            "name": "toast",
+            "module": "./api"
           }
         },
         {
           "kind": "js",
-          "name": "WarpTabPanel",
+          "name": "updateToast",
           "declaration": {
-            "name": "WarpTabPanel",
-            "module": "./tab-panel.js"
+            "name": "updateToast",
+            "module": "./api"
           }
         },
-        {
-          "kind": "js",
-          "name": "TabChangeEvent",
-          "declaration": {
-            "name": "TabChangeEvent",
-            "module": "./tabs.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "packages/toast/index.ts",
-      "declarations": [],
-      "exports": [
         {
           "kind": "js",
           "name": "WarpToast",
@@ -6883,30 +7048,6 @@
             "name": "WarpToastContainer",
             "module": "./toast-container"
           }
-        },
-        {
-          "kind": "js",
-          "name": "toast",
-          "declaration": {
-            "name": "toast",
-            "module": "./api"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "updateToast",
-          "declaration": {
-            "name": "updateToast",
-            "module": "./api"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "removeToast",
-          "declaration": {
-            "name": "removeToast",
-            "module": "./api"
-          }
         }
       ]
     },