@warp-ds/elements 2.10.1-next.1 → 2.11.0

package/dist/packages/modal-footer/react.js

@@ -4,13 +4,19 @@ import React from "react";
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
+const BaseModalFooter = createComponent({
+    tagName: "w-modal-footer",
+    elementClass: Component,
+    react: React,
+});
 /**
  * The footer section of a modal, typically where you place actions.
  *
  * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
  */
-export const ModalFooter = createComponent({
-    tagName: "w-modal-footer",
-    elementClass: Component,
-    react: React,
-});
+export const ModalFooter = React.forwardRef(({ ...props }, ref) => React.createElement(BaseModalFooter, {
+    slot: "footer",
+    ...props,
+    ref,
+}));
+ModalFooter.displayName = "ModalFooter";

package/dist/packages/modal-header/react.js

@@ -19,6 +19,7 @@ const BaseModalHeader = createComponent({
  * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
  */
 export const ModalHeader = React.forwardRef(({ noClose, ...props }, ref) => React.createElement(BaseModalHeader, {
+    slot: "header",
     ...props,
     ...(noClose ? { "no-close": true } : {}),
     ref,

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.10.0",
+  "version": "2.11.0-next.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -953,7 +953,7 @@
         },
         {
           "name": "w-card",
-          "description": "Card is a layout component used for separating content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)\n---\n",
+          "description": "Card is a layout component used for grouping interactive content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -989,8 +989,7 @@
                 "name": "clickable",
                 "description": "Whether the whole card is interactive.\n\nWhen set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.",
                 "type": "boolean"
-              },
-              { "name": "buttonText" }
+              }
             ],
             "events": []
           }
@@ -1543,7 +1542,7 @@
         },
         {
           "name": "w-modal",
-          "description": "Modals (or dialogs) display important information that users need to acknowledge.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)\n---\n\n\n### **Events:**\n - **shown**\n- **hidden**\n\n### **Slots:**\n - **header** - Typically where you would use the `w-modal-header` component.\n- **content** - The main content of the modal.\n- **footer** - Typically where you would use the `w-modal-footer` component, for things like actions.\n\n### **CSS Properties:**\n - **--w-c-modal-backdrop-color** - undefined _(default: undefined)_\n- **--w-c-modal-bg** - undefined _(default: undefined)_\n- **--w-c-modal-box-shadow** - undefined _(default: undefined)_\n- **--w-c-modal-color** - undefined _(default: undefined)_\n- **--w-c-modal-height** - undefined _(default: undefined)_\n- **--w-c-modal-max-height** - undefined _(default: undefined)_\n- **--w-c-modal-min-height** - undefined _(default: undefined)_\n- **--w-c-modal-translate-distance** - undefined _(default: undefined)_\n- **--w-c-modal-width** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **dialog** - the root element inside the component (`<dialog>` element).\n- **wrapper** - container for all elements, direct child of `<dialog>`.\n- **content** - the container for the `content` slot items (children).",
+          "description": "Modals (or dialogs) display important information that users need to acknowledge.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)\n---\n\n\n### **Events:**\n - **shown**\n- **hidden**\n\n### **Slots:**\n - **header** - Typically where you would use the `w-modal-header` component.\n- **content** - The main content of the modal.\n- **footer** - Typically where you would use the `w-modal-footer` component, for things like actions.\n\n### **CSS Properties:**\n - **--w-c-modal-backdrop-color** - undefined _(default: undefined)_\n- **--w-c-modal-bg** - undefined _(default: undefined)_\n- **--w-c-modal-box-shadow** - undefined _(default: undefined)_\n- **--w-c-modal-color** - undefined _(default: undefined)_\n- **--w-c-modal-height** - undefined _(default: undefined)_\n- **--w-c-modal-max-height** - undefined _(default: undefined)_\n- **--w-c-modal-min-height** - undefined _(default: undefined)_\n- **--w-c-modal-translate-distance** - undefined _(default: undefined)_\n- **--w-c-modal-padding-bottom** - undefined _(default: undefined)_\n- **--w-c-modal-width** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **dialog** - the root element inside the component (`<dialog>` element).\n- **wrapper** - container for all elements, direct child of `<dialog>`.\n- **content** - the container for the `content` slot items (children).",
           "doc-url": "",
           "attributes": [
             {
@@ -2853,6 +2852,7 @@
         { "name": "--w-c-modal-max-height" },
         { "name": "--w-c-modal-min-height" },
         { "name": "--w-c-modal-translate-distance" },
+        { "name": "--w-c-modal-padding-bottom" },
         { "name": "--w-c-modal-width" },
         {
           "name": "--w-c-modal-footer-gap",