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

package/dist/custom-elements.json

@@ -143,107 +143,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",
@@ -368,7 +267,7 @@
               "attribute": "variant",
               "reflects": true,
               "parsedType": {
-                "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
+                "text": "'primary' | 'secondary' | 'negative' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
               }
             },
             {
@@ -476,7 +375,7 @@
               "default": "'secondary'",
               "fieldName": "variant",
               "parsedType": {
-                "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
+                "text": "'primary' | 'secondary' | 'negative' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
               }
             },
             {
@@ -636,7 +535,7 @@
               "attribute": "variant",
               "reflects": true,
               "parsedType": {
-                "text": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
+                "text": "'primary' | 'secondary' | 'negative' | 'utility' | 'pill' | 'link'"
               }
             },
             {
@@ -761,7 +660,7 @@
               "default": "'secondary'",
               "fieldName": "variant",
               "parsedType": {
-                "text": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
+                "text": "'primary' | 'secondary' | 'negative' | 'utility' | 'pill' | 'link'"
               }
             },
             {
@@ -1232,6 +1131,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/badge/index.ts",

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,18 +131,6 @@ 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'];
@@ -259,6 +247,18 @@ export type WarpAttentionProps = {
 }
 
 
+export type WarpAlertProps = {
+  /**  */
+  "variant"?: WarpAlert['variant'];
+  /**  */
+  "show"?: WarpAlert['show'];
+  /**  */
+  "role"?: WarpAlert['role'];
+
+
+}
+
+
 export type WarpBadgeProps = {
   /**  */
   "variant"?: WarpBadge['variant'];
@@ -944,24 +944,6 @@ 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.
  * 
@@ -1052,6 +1034,24 @@ 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/modal/index.js

@@ -2571,18 +2571,18 @@ Please compile your catalog first.
         background-color: var(--w-color-button-pill-background-active);
       }
       .header-close-button-on-image {
-        background-color: rgba(var(--w-rgb-black), 0.7);
+        background-color: transparent;
+        color: var(--w-s-color-text-inverted);
         right: 0.8rem;
         top: 0.8rem;
         position: absolute;
         z-index: 10;
-        color: var(--w-s-color-text-inverted);
       }
       .header-close-button-on-image:hover {
-        background-color: rgba(var(--w-rgb-black), 0.85);
+        background-color: var(--w-color-button-pill-background-hover);
       }
       .header-close-button-on-image:active {
-        background-color: var(--w-black);
+        background-color: var(--w-color-button-pill-background-active);
       }
       @media (min-width: 480px) {
         .header-title-bar {