@warp-ds/elements 2.10.0-next.22 → 2.10.0-next.24

package/dist/custom-elements.json

@@ -4649,6 +4649,49 @@
           "kind": "class",
           "description": "Modals (or dialogs) display important information that users need to acknowledge.",
           "name": "WarpModal",
+          "cssProperties": [
+            {
+              "name": "--w-c-modal-backdrop-color"
+            },
+            {
+              "name": "--w-c-modal-bg"
+            },
+            {
+              "name": "--w-c-modal-box-shadow"
+            },
+            {
+              "name": "--w-c-modal-color"
+            },
+            {
+              "name": "--w-c-modal-height"
+            },
+            {
+              "name": "--w-c-modal-max-height"
+            },
+            {
+              "name": "--w-c-modal-min-height"
+            },
+            {
+              "name": "--w-c-modal-translate-distance"
+            },
+            {
+              "name": "--w-c-modal-width"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "the root element inside the component (`<dialog>` element).",
+              "name": "dialog"
+            },
+            {
+              "description": "container for all elements, direct child of `<dialog>`.",
+              "name": "wrapper"
+            },
+            {
+              "description": "the container for the `content` slot items (children).",
+              "name": "content"
+            }
+          ],
           "slots": [
             {
               "description": "Typically where you would use the `w-modal-header` component.",
@@ -4680,6 +4723,7 @@
               "type": {
                 "text": "string | undefined"
               },
+              "deprecated": "This ID has no effect",
               "attribute": "content-id"
             },
             {
@@ -4824,6 +4868,7 @@
               "type": {
                 "text": "string | undefined"
               },
+              "deprecated": "This ID has no effect",
               "fieldName": "contentId"
             },
             {
@@ -4893,6 +4938,18 @@
           "kind": "class",
           "description": "The footer section of a modal, typically where you place actions.",
           "name": "WarpModalFooter",
+          "cssProperties": [
+            {
+              "description": " adjusts the flex gap between actions in the footer.",
+              "name": "--w-c-modal-footer-gap"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "the container for slotted items (children).",
+              "name": "footer"
+            }
+          ],
           "members": [],
           "mixins": [
             {
@@ -4959,6 +5016,39 @@
           "kind": "class",
           "description": "The header section of a modal, typically where you place the title and a close button.",
           "name": "WarpModalHeader",
+          "cssProperties": [
+            {
+              "name": "--w-c-modal-header-font-size"
+            },
+            {
+              "name": "--w-c-modal-header-line-height"
+            },
+            {
+              "name": "--w-c-modal-header-margin-bottom"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "the root element inside the component.",
+              "name": "header"
+            },
+            {
+              "description": "the container for the image (`top` slot).",
+              "name": "top"
+            },
+            {
+              "description": "the back button, if visible.",
+              "name": "back"
+            },
+            {
+              "description": "the title element.",
+              "name": "title"
+            },
+            {
+              "description": "the close button, if visible.",
+              "name": "close"
+            }
+          ],
           "slots": [
             {
               "description": "Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.",
@@ -5012,24 +5102,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "titleClasses",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "backButton",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "closeButton",
-              "privacy": "private",
-              "readonly": true
-            },
             {
               "kind": "method",
               "name": "emitBack",
@@ -8874,6 +8946,16 @@
               "attribute": "optional",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "minHeight",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "maxHeight",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_textarea",

package/dist/docs/modal/api.md

@@ -7,7 +7,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | close (JS only) | `close() => void` | `-` | - |
-| content-id | `string \| undefined` | `-` | - |
+| content-id | `string \| undefined` | `-` | **Deprecated**: This ID has no effect |
 | ignore-backdrop-clicks | `boolean` | `false` | Ignores clicks to the backdrop when set |
 | open (JS only) | `open() => void` | `-` | - |
 | show | `boolean` | `false` | Controls if the modal should show or hide. |
@@ -23,6 +23,8 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 #### content-id
 
+**Deprecated**: This ID has no effect
+
 
 
 - Type: `string | undefined`

package/dist/docs/modal/modal.md

@@ -40,10 +40,8 @@ To open and close the modal using JavaScript, get a reference to the `<w-modal>`
         </p>
     </div>
     <w-modal-footer slot="footer">
-        <div class="flex gap-16">
-            <w-button variant="secondary" data-testid="js-example-cancel">Cancel</w-button>
-            <w-button variant="primary" data-testid="js-example-confirm">Confirm</w-button>
-        </div>
+        <w-button variant="secondary" data-testid="js-example-cancel">Cancel</w-button>
+        <w-button variant="primary" data-testid="js-example-confirm">Confirm</w-button>
     </w-modal-footer>
 </w-modal>
 
@@ -93,10 +91,8 @@ The available commands for `<w-modal>` are:
         </p>
     </div>
     <w-modal-footer slot="footer">
-        <div class="flex gap-16">
-            <w-button variant="secondary" commandfor="invoker-modal" command="--close">Dope</w-button>
-            <w-button variant="primary" commandfor="invoker-modal" command="--confirm">Dope</w-button>
-        </div>
+        <w-button variant="secondary" commandfor="invoker-modal" command="--close">Dope</w-button>
+        <w-button variant="primary" commandfor="invoker-modal" command="--confirm">Dope</w-button>
     </w-modal-footer>
 </w-modal>
 ```
@@ -187,6 +183,81 @@ modal.addEventListener('command', function (event: CommandEvent) {
 
 ## Styling API
 
+Modal supports styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.
+
+### Parts
+
+Use `::part(part-name)` from outside the component.
+
+#### `<w-modal>` parts
+
+- `dialog` - the root element inside the component (`<dialog>` element).
+- `wrapper` - container for all elements, direct child of `<dialog>`.
+- `content` - the container for the `content` slot items (children).
+
+#### `<w-modal-header>` parts
+
+- `header` - the root element inside the component.
+- `top` - the container for the image (`top` slot).
+- `back` - the back button, if visible.
+- `title` - the title element.
+- `close` - the close button, if visible.
+
+#### `<w-modal-footer>` parts
+
+- `footer` - the container for slotted items (children)
+
+### Component tokens
+
+#### `<w-modal>` tokens
+
+Set these on `<w-modal>` to override visuals.
+
+```css
+w-modal {
+    --w-c-modal-backdrop-color: transparent;
+}
+```
+
+##### Layout and typography
+
+- `--w-c-modal-height`
+- `--w-c-modal-max-height`
+- `--w-c-modal-min-height`
+- `--w-c-modal-translate-distance`
+- `--w-c-modal-width`
+
+##### Background
+
+- `--w-c-modal-backdrop-color`
+- `--w-c-modal-bg`
+
+##### Text color
+
+- `--w-c-modal-color`
+
+##### Shadow
+
+- `--w-c-modal-box-shadow`
+
+#### `<w-modal-header>` tokens
+
+Set these on `<w-modal-header>` to override visuals.
+
+##### Layout and typography
+
+- `--w-c-modal-header-font-size`
+- `--w-c-modal-header-line-height`
+- `--w-c-modal-header-margin-bottom`
+
+#### `<w-modal-footer>` tokens
+
+Set these on `<w-modal-footer>` to override visuals.
+
+##### Layout and typography
+
+- `--w-c-modal-footer-gap` - adjusts the flex gap between actions in the footer
+
 ## `<w-modal>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -196,7 +267,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | close (JS only) | `close() => void` | `-` | - |
-| content-id | `string \| undefined` | `-` | - |
+| content-id | `string \| undefined` | `-` | **Deprecated**: This ID has no effect |
 | ignore-backdrop-clicks | `boolean` | `false` | Ignores clicks to the backdrop when set |
 | open (JS only) | `open() => void` | `-` | - |
 | show | `boolean` | `false` | Controls if the modal should show or hide. |
@@ -212,6 +283,8 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 #### content-id
 
+**Deprecated**: This ID has no effect
+
 
 
 - Type: `string | undefined`

package/dist/docs/modal/styling.md

@@ -1 +1,76 @@
 ## Styling API
+
+Modal supports styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.
+
+### Parts
+
+Use `::part(part-name)` from outside the component.
+
+#### `<w-modal>` parts
+
+- `dialog` - the root element inside the component (`<dialog>` element).
+- `wrapper` - container for all elements, direct child of `<dialog>`.
+- `content` - the container for the `content` slot items (children).
+
+#### `<w-modal-header>` parts
+
+- `header` - the root element inside the component.
+- `top` - the container for the image (`top` slot).
+- `back` - the back button, if visible.
+- `title` - the title element.
+- `close` - the close button, if visible.
+
+#### `<w-modal-footer>` parts
+
+- `footer` - the container for slotted items (children)
+
+### Component tokens
+
+#### `<w-modal>` tokens
+
+Set these on `<w-modal>` to override visuals.
+
+```css
+w-modal {
+    --w-c-modal-backdrop-color: transparent;
+}
+```
+
+##### Layout and typography
+
+- `--w-c-modal-height`
+- `--w-c-modal-max-height`
+- `--w-c-modal-min-height`
+- `--w-c-modal-translate-distance`
+- `--w-c-modal-width`
+
+##### Background
+
+- `--w-c-modal-backdrop-color`
+- `--w-c-modal-bg`
+
+##### Text color
+
+- `--w-c-modal-color`
+
+##### Shadow
+
+- `--w-c-modal-box-shadow`
+
+#### `<w-modal-header>` tokens
+
+Set these on `<w-modal-header>` to override visuals.
+
+##### Layout and typography
+
+- `--w-c-modal-header-font-size`
+- `--w-c-modal-header-line-height`
+- `--w-c-modal-header-margin-bottom`
+
+#### `<w-modal-footer>` tokens
+
+Set these on `<w-modal-footer>` to override visuals.
+
+##### Layout and typography
+
+- `--w-c-modal-footer-gap` - adjusts the flex gap between actions in the footer

package/dist/docs/modal/usage.md

@@ -34,10 +34,8 @@ To open and close the modal using JavaScript, get a reference to the `<w-modal>`
         </p>
     </div>
     <w-modal-footer slot="footer">
-        <div class="flex gap-16">
-            <w-button variant="secondary" data-testid="js-example-cancel">Cancel</w-button>
-            <w-button variant="primary" data-testid="js-example-confirm">Confirm</w-button>
-        </div>
+        <w-button variant="secondary" data-testid="js-example-cancel">Cancel</w-button>
+        <w-button variant="primary" data-testid="js-example-confirm">Confirm</w-button>
     </w-modal-footer>
 </w-modal>
 
@@ -87,10 +85,8 @@ The available commands for `<w-modal>` are:
         </p>
     </div>
     <w-modal-footer slot="footer">
-        <div class="flex gap-16">
-            <w-button variant="secondary" commandfor="invoker-modal" command="--close">Dope</w-button>
-            <w-button variant="primary" commandfor="invoker-modal" command="--confirm">Dope</w-button>
-        </div>
+        <w-button variant="secondary" commandfor="invoker-modal" command="--close">Dope</w-button>
+        <w-button variant="primary" commandfor="invoker-modal" command="--confirm">Dope</w-button>
     </w-modal-footer>
 </w-modal>
 ```

package/dist/index.d.ts

@@ -1468,9 +1468,9 @@ export type WarpModalProps = {
 
 You can also call the `open()` and `close()` methods. */
   show?: WarpModal["show"];
-  /**  */
+  /** @deprecated This ID has no effect  */
   "content-id"?: WarpModal["contentId"];
-  /**  */
+  /** @deprecated This ID has no effect  */
   contentId?: WarpModal["contentId"];
   /** Ignores clicks to the backdrop when set */
   "ignore-backdrop-clicks"?: WarpModal["ignoreBackdropClicks"];
@@ -1488,9 +1488,9 @@ export type WarpModalSolidJsProps = {
 
 You can also call the `open()` and `close()` methods. */
   "prop:show"?: WarpModal["show"];
-  /**  */
+  /** @deprecated This ID has no effect  */
   "attr:content-id"?: WarpModal["contentId"];
-  /**  */
+  /** @deprecated This ID has no effect  */
   "prop:contentId"?: WarpModal["contentId"];
   /** Ignores clicks to the backdrop when set */
   "bool:ignore-backdrop-clicks"?: WarpModal["ignoreBackdropClicks"];
@@ -2983,11 +2983,45 @@ export type CustomElements = {
    *
    * - `open() => void`: undefined
    * - `close() => void`: undefined
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-modal-backdrop-color`: undefined (default: `undefined`)
+   * - `--w-c-modal-bg`: undefined (default: `undefined`)
+   * - `--w-c-modal-box-shadow`: undefined (default: `undefined`)
+   * - `--w-c-modal-color`: undefined (default: `undefined`)
+   * - `--w-c-modal-height`: undefined (default: `undefined`)
+   * - `--w-c-modal-max-height`: undefined (default: `undefined`)
+   * - `--w-c-modal-min-height`: undefined (default: `undefined`)
+   * - `--w-c-modal-translate-distance`: undefined (default: `undefined`)
+   * - `--w-c-modal-width`: undefined (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `dialog`: the root element inside the component (`<dialog>` element).
+   * - `wrapper`: container for all elements, direct child of `<dialog>`.
+   * - `content`: the container for the `content` slot items (children).
    */
   "w-modal": Partial<WarpModalProps & BaseProps<WarpModal> & BaseEvents>;
 
   /**
    * The footer section of a modal, typically where you place actions.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-modal-footer-gap`:  adjusts the flex gap between actions in the footer. (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `footer`: the container for slotted items (children).
    */
   "w-modal-footer": Partial<
     WarpModalFooterProps & BaseProps<WarpModalFooter> & BaseEvents
@@ -3015,6 +3049,24 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `top`: Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-modal-header-font-size`: undefined (default: `undefined`)
+   * - `--w-c-modal-header-line-height`: undefined (default: `undefined`)
+   * - `--w-c-modal-header-margin-bottom`: undefined (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `header`: the root element inside the component.
+   * - `top`: the container for the image (`top` slot).
+   * - `back`: the back button, if visible.
+   * - `title`: the title element.
+   * - `close`: the close button, if visible.
    */
   "w-modal-header": Partial<
     WarpModalHeaderProps & BaseProps<WarpModalHeader> & BaseEvents
@@ -4318,6 +4370,28 @@ export type CustomElementsSolidJs = {
    *
    * - `open() => void`: undefined
    * - `close() => void`: undefined
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-modal-backdrop-color`: undefined (default: `undefined`)
+   * - `--w-c-modal-bg`: undefined (default: `undefined`)
+   * - `--w-c-modal-box-shadow`: undefined (default: `undefined`)
+   * - `--w-c-modal-color`: undefined (default: `undefined`)
+   * - `--w-c-modal-height`: undefined (default: `undefined`)
+   * - `--w-c-modal-max-height`: undefined (default: `undefined`)
+   * - `--w-c-modal-min-height`: undefined (default: `undefined`)
+   * - `--w-c-modal-translate-distance`: undefined (default: `undefined`)
+   * - `--w-c-modal-width`: undefined (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `dialog`: the root element inside the component (`<dialog>` element).
+   * - `wrapper`: container for all elements, direct child of `<dialog>`.
+   * - `content`: the container for the `content` slot items (children).
    */
   "w-modal": Partial<
     WarpModalProps & WarpModalSolidJsProps & BaseProps<WarpModal> & BaseEvents
@@ -4325,6 +4399,18 @@ export type CustomElementsSolidJs = {
 
   /**
    * The footer section of a modal, typically where you place actions.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-modal-footer-gap`:  adjusts the flex gap between actions in the footer. (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `footer`: the container for slotted items (children).
    */
   "w-modal-footer": Partial<
     WarpModalFooterProps &
@@ -4355,6 +4441,24 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `top`: Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-modal-header-font-size`: undefined (default: `undefined`)
+   * - `--w-c-modal-header-line-height`: undefined (default: `undefined`)
+   * - `--w-c-modal-header-margin-bottom`: undefined (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `header`: the root element inside the component.
+   * - `top`: the container for the image (`top` slot).
+   * - `back`: the back button, if visible.
+   * - `title`: the title element.
+   * - `close`: the close button, if visible.
    */
   "w-modal-header": Partial<
     WarpModalHeaderProps &
@@ -4898,6 +5002,32 @@ export type CustomElementsSolidJs = {
 };
 
 export type CustomCssProperties = {
+  /**  */
+  "--w-c-modal-backdrop-color"?: string;
+  /**  */
+  "--w-c-modal-bg"?: string;
+  /**  */
+  "--w-c-modal-box-shadow"?: string;
+  /**  */
+  "--w-c-modal-color"?: string;
+  /**  */
+  "--w-c-modal-height"?: string;
+  /**  */
+  "--w-c-modal-max-height"?: string;
+  /**  */
+  "--w-c-modal-min-height"?: string;
+  /**  */
+  "--w-c-modal-translate-distance"?: string;
+  /**  */
+  "--w-c-modal-width"?: string;
+  /**  adjusts the flex gap between actions in the footer. */
+  "--w-c-modal-footer-gap"?: string;
+  /**  */
+  "--w-c-modal-header-font-size"?: string;
+  /**  */
+  "--w-c-modal-header-line-height"?: string;
+  /**  */
+  "--w-c-modal-header-margin-bottom"?: string;
   /**  */
   "--w-c-snackbar-item-radius"?: string;
   /**  */

package/dist/packages/modal/modal.d.ts

@@ -8,14 +8,30 @@ declare const WarpModal_base: import("./util.js").Constructor<{
  * @slot header - Typically where you would use the `w-modal-header` component.
  * @slot content - The main content of the modal.
  * @slot footer - Typically where you would use the `w-modal-footer` component, for things like actions.
+ *
+ * @csspart dialog - the root element inside the component (`<dialog>` element).
+ * @csspart wrapper - container for all elements, direct child of `<dialog>`.
+ * @csspart content - the container for the `content` slot items (children).
+ *
+ * @cssprop --w-c-modal-backdrop-color
+ * @cssprop --w-c-modal-bg
+ * @cssprop --w-c-modal-box-shadow
+ * @cssprop --w-c-modal-color
+ * @cssprop --w-c-modal-height
+ * @cssprop --w-c-modal-max-height
+ * @cssprop --w-c-modal-min-height
+ * @cssprop --w-c-modal-translate-distance
+ * @cssprop --w-c-modal-width
  */
 export declare class WarpModal extends WarpModal_base {
+    static styles: import("lit").CSSResult[];
     /**
      * Controls if the modal should show or hide.
      *
      * You can also call the `open()` and `close()` methods.
      */
     show: boolean;
+    /** @deprecated This ID has no effect */
     contentId: string | undefined;
     /**
      * Ignores clicks to the backdrop when set
@@ -29,14 +45,13 @@ export declare class WarpModal extends WarpModal_base {
     connectedCallback(): void;
     open(): Promise<void>;
     close(): void;
-    render(): import("lit").TemplateResult<1>;
     updated(changedProperties: Map<string, unknown>): void;
     private handleListeners;
     private eventPreventer;
     private closeOnBackdropClick;
     private interceptEscape;
     private modifyBorderRadius;
-    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
 }
 /** @deprecated Exported for backwards compatibility. Use WarpModal. */
 export declare const ModalMain: typeof WarpModal;