@warp-ds/elements 2.2.0-next.27 → 2.2.0-next.29

package/dist/custom-elements.json

@@ -143,6 +143,107 @@
         }
       ]
     },
+    {
+      "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",
@@ -267,7 +368,7 @@
               "attribute": "variant",
               "reflects": true,
               "parsedType": {
-                "text": "'primary' | 'secondary' | 'negative' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
+                "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
               }
             },
             {
@@ -375,7 +476,7 @@
               "default": "'secondary'",
               "fieldName": "variant",
               "parsedType": {
-                "text": "'primary' | 'secondary' | 'negative' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
+                "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
               }
             },
             {
@@ -535,7 +636,7 @@
               "attribute": "variant",
               "reflects": true,
               "parsedType": {
-                "text": "'primary' | 'secondary' | 'negative' | 'utility' | 'pill' | 'link'"
+                "text": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
               }
             },
             {
@@ -660,7 +761,7 @@
               "default": "'secondary'",
               "fieldName": "variant",
               "parsedType": {
-                "text": "'primary' | 'secondary' | 'negative' | 'utility' | 'pill' | 'link'"
+                "text": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
               }
             },
             {
@@ -787,7 +888,7 @@
           "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`, }"
+          "default": "{ base: 'border-2 relative flex items-center', 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', }"
         },
         {
           "kind": "class",
@@ -1131,107 +1232,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/badge/index.ts",
@@ -5972,14 +5972,6 @@
               },
               "description": "Function to format the to- and from labels and value in the slider thumb tooltip."
             },
-            {
-              "kind": "field",
-              "name": "#thumbSize",
-              "privacy": "private",
-              "type": {
-                "text": "number"
-              }
-            },
             {
               "kind": "method",
               "name": "#syncSliderThumbs",
@@ -6029,16 +6021,6 @@
                 }
               ],
               "description": "We use CSS variables to fill the active track with a background color."
-            },
-            {
-              "kind": "method",
-              "name": "#getActiveRangeWidth",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              }
             }
           ],
           "attributes": [

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 
 import type { ccSuffix, ccPrefix, WarpAffix } from "./packages/affix/index.ts";
+import type { WarpAlert } from "./packages/alert/index.ts";
 import type { WarpLink } from "./packages/link/index.ts";
 import type { ccButton, WarpButton } from "./packages/button/index.ts";
 import type { ccAttention, WarpAttention } from "./packages/attention/index.ts";
-import type { WarpAlert } from "./packages/alert/index.ts";
 import type { WarpBadge } from "./packages/badge/index.ts";
 import type { WarpBox } from "./packages/box/index.ts";
 import type { ccBreadcrumbs, WarpBreadcrumbs } from "./packages/breadcrumbs/index.ts";
@@ -131,6 +131,18 @@ Set an `aria-label` that explains the action when using this. */
 }
 
 
+export type WarpAlertProps = {
+  /**  */
+  "variant"?: WarpAlert['variant'];
+  /**  */
+  "show"?: WarpAlert['show'];
+  /**  */
+  "role"?: WarpAlert['role'];
+
+
+}
+
+
 export type WarpLinkProps = {
   /**  */
   "autofocus"?: WarpLink['autofocus'];
@@ -247,18 +259,6 @@ export type WarpAttentionProps = {
 }
 
 
-export type WarpAlertProps = {
-  /**  */
-  "variant"?: WarpAlert['variant'];
-  /**  */
-  "show"?: WarpAlert['show'];
-  /**  */
-  "role"?: WarpAlert['role'];
-
-
-}
-
-
 export type WarpBadgeProps = {
   /**  */
   "variant"?: WarpBadge['variant'];
@@ -944,6 +944,24 @@ export type WarpToastContainerProps = {
     "w-affix": Partial<WarpAffixProps & BaseProps<WarpAffix> & BaseEvents>;
 
 
+  /**
+     * Alert is an inline component used for displaying different types of messages.
+ * 
+ * For accessibility reasons, alert should appear close to the element that triggered it.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `variant`: undefined 
+ * - `show`: undefined 
+ * - `role`: undefined 
+  */
+    "w-alert": Partial<WarpAlertProps & BaseProps<WarpAlert> & BaseEvents>;
+
+
   /**
      * Buttons are used to perform actions, with different visuals for different needs.
  * 
@@ -1034,24 +1052,6 @@ export type WarpToastContainerProps = {
     "w-attention": Partial<WarpAttentionProps & BaseProps<WarpAttention> & BaseEvents>;
 
 
-  /**
-     * Alert is an inline component used for displaying different types of messages.
- * 
- * For accessibility reasons, alert should appear close to the element that triggered it.
- * 
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `variant`: undefined 
- * - `show`: undefined 
- * - `role`: undefined 
-  */
-    "w-alert": Partial<WarpAlertProps & BaseProps<WarpAlert> & BaseEvents>;
-
-
   /**
      * `w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.
  * 

package/dist/packages/attention/index.d.ts

@@ -27,7 +27,6 @@ export declare const ccAttention: {
     arrowHighlight: string;
     content: string;
     notCallout: string;
-    closeBtn: string;
 };
 declare class WarpAttention extends LitElement {
     show: boolean;