@warp-ds/elements 2.10.0-next.9 → 2.10.1-next.1

package/dist/packages/link/link.react.stories.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Link } from './react';
+import React from "react";
+import { Link } from "./react";
 export default {
-    title: 'Buttons/Link',
+    title: "Buttons/Link",
     render(args) {
         return React.createElement(Link, { ...args }, "Link Button Text");
     },
@@ -9,95 +9,95 @@ export default {
 };
 export const Primary = {
     args: {
-        variant: 'primary',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "primary",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const Secondary = {
     args: {
-        variant: 'secondary',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "secondary",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const Negative = {
     args: {
-        variant: 'negative',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "negative",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const NegativeQuiet = {
     args: {
-        variant: 'negativeQuiet',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "negativeQuiet",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const Utility = {
     args: {
-        variant: 'utility',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "utility",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const UtilityQuiet = {
     args: {
-        variant: 'utilityQuiet',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "utilityQuiet",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const Quiet = {
     args: {
-        variant: 'quiet',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "quiet",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const Overlay = {
     args: {
-        variant: 'overlay',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "overlay",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const OverlayInverted = {
     args: {
-        variant: 'overlayInverted',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "overlayInverted",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const OverlayQuiet = {
     args: {
-        variant: 'overlayQuiet',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "overlayQuiet",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const OverlayInvertedQuiet = {
     args: {
-        variant: 'overlayInvertedQuiet',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "overlayInvertedQuiet",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const Small = {
     args: {
-        variant: 'primary',
+        variant: "primary",
         small: true,
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const FullWidth = {
     args: {
-        variant: 'primary',
+        variant: "primary",
         fullWidth: true,
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
     render(args) {
         return (React.createElement("div", { className: "w-full flex flex-col gap-8" },

package/dist/packages/link/link.react.test.js

@@ -1,3 +1,5 @@
-import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
-import { Link } from './react.js';
-describeReactSsrAttributeMapping('Link', Link, [{ propName: 'fullWidth', attrName: 'full-width' }]);
+import { describeReactSsrAttributeMapping } from "../../tests/react-ssr-attributes";
+import { Link } from "./react.js";
+describeReactSsrAttributeMapping("Link", Link, [
+    { propName: "fullWidth", attrName: "full-width" },
+]);

package/dist/packages/link/link.stories.d.ts

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import type { WarpLink } from './link.js';
-import './link.js';
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import type { WarpLink } from "./link.js";
+import "./link.js";
 declare const args: Partial<WarpLink> & {
     [key: string]: any;
 };

package/dist/packages/link/link.stories.js

@@ -1,11 +1,11 @@
-import { spread } from '@open-wc/lit-helpers';
-import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
-import { html } from 'lit';
-import { prespread } from '../../.storybook/utilities.js';
-import './link.js';
-const { events, args, argTypes } = getStorybookHelpers('w-link');
+import { spread } from "@open-wc/lit-helpers";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import { html } from "lit";
+import { prespread } from "../../.storybook/utilities.js";
+import "./link.js";
+const { events, args, argTypes } = getStorybookHelpers("w-link");
 const meta = {
-    title: 'Buttons/Link',
+    title: "Buttons/Link",
     render(args) {
         return html `<w-link ${spread(prespread(args))}>Link Button Text</w-link>`;
     },
@@ -20,101 +20,101 @@ const meta = {
 export default meta;
 export const Primary = {
     args: {
-        variant: 'primary',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "primary",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const Secondary = {
     args: {
-        variant: 'secondary',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "secondary",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const Negative = {
     args: {
-        variant: 'negative',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "negative",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const NegativeQuiet = {
     args: {
-        variant: 'negativeQuiet',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "negativeQuiet",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const Utility = {
     args: {
-        variant: 'utility',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "utility",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const UtilityQuiet = {
     args: {
-        variant: 'utilityQuiet',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "utilityQuiet",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const Quiet = {
     args: {
-        variant: 'quiet',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "quiet",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const Overlay = {
     args: {
-        variant: 'overlay',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "overlay",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const OverlayInverted = {
     args: {
-        variant: 'overlayInverted',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "overlayInverted",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const OverlayQuiet = {
     args: {
-        variant: 'overlayQuiet',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "overlayQuiet",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const OverlayInvertedQuiet = {
     args: {
-        variant: 'overlayInvertedQuiet',
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "overlayInvertedQuiet",
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const Small = {
     args: {
-        variant: 'primary',
+        variant: "primary",
         small: true,
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
 };
 export const FullWidth = {
     args: {
-        variant: 'primary',
-        'full-width': true,
-        href: 'http://developer.mozilla.org',
-        target: '_new',
+        variant: "primary",
+        "full-width": true,
+        href: "http://developer.mozilla.org",
+        target: "_new",
     },
     render(args) {
         return html `
-      <div class="w-full flex flex-col gap-8">
-        <w-link ${spread(prespread(args))}>Full width</w-link>
-      </div>
-    `;
+			<div class="w-full flex flex-col gap-8">
+				<w-link ${spread(prespread(args))}>Full width</w-link>
+			</div>
+		`;
     },
 };

package/dist/packages/link/link.test.d.ts

@@ -1 +1 @@
-import './link.js';
+import "./link.js";

package/dist/packages/link/link.test.js

@@ -1,9 +1,13 @@
-import { page } from 'vitest/browser';
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import './link.js';
-test('renders a link with role button ', async () => {
-    const component = html `<w-link type="button" href="link yo">This is a link looking like a button</w-link>`;
+import { page } from "vitest/browser";
+import { html } from "lit";
+import { expect, test } from "vitest";
+import "./link.js";
+test("renders a link with role button ", async () => {
+    const component = html `<w-link type="button" href="link yo"
+		>This is a link looking like a button</w-link
+	>`;
     const screen = await page.render(component);
-    await expect.element(screen.getByText('This is a link looking like a button')).toHaveAttribute('href', 'link yo');
+    await expect
+        .element(screen.getByText("This is a link looking like a button"))
+        .toHaveAttribute("href", "link yo");
 });

package/dist/packages/link/react.d.ts

@@ -1,5 +1,10 @@
-import React from 'react';
-import { WarpLink } from './link.js';
-export declare const Link: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpLink>, "small" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "firstUpdated" | "render" | "renderOptions" | "target" | "rel" | "variant" | "href" | "fullWidth"> & {} & Partial<Omit<WarpLink, keyof HTMLElement>> & React.RefAttributes<WarpLink>, "ref">, "full-width"> & {
+import React from "react";
+import type { WarpLink } from "./link.js";
+/**
+ * Link component to use when creating links that look like buttons.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/link/frameworks/elements)
+ */
+export declare const Link: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpLink>, "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "firstUpdated" | "render" | "renderOptions" | "small" | "rel" | "variant" | "href" | "target" | "fullWidth"> & {} & Partial<Omit<WarpLink, keyof HTMLElement>> & React.RefAttributes<WarpLink>, "ref">, "full-width"> & {
     fullWidth?: boolean;
 } & React.RefAttributes<WarpLink>>;

package/dist/packages/link/react.js

@@ -1,17 +1,22 @@
-import { createComponent } from '@lit/react';
-import { LitElement } from 'lit';
-import React from 'react';
+import { createComponent } from "@lit/react";
+import { LitElement } from "lit";
+import React from "react";
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
 const BaseLink = createComponent({
-    tagName: 'w-link',
+    tagName: "w-link",
     elementClass: Component,
     react: React,
 });
+/**
+ * Link component to use when creating links that look like buttons.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/link/frameworks/elements)
+ */
 export const Link = React.forwardRef(({ fullWidth, ...props }, ref) => React.createElement(BaseLink, {
     ...props,
-    ...(fullWidth ? { 'full-width': true } : {}),
+    ...(fullWidth ? { "full-width": true } : {}),
     ref,
 }));
-Link.displayName = 'Link';
+Link.displayName = "Link";

package/dist/packages/link/styles.js

@@ -1,80 +1,85 @@
-import { css } from 'lit';
-import { buttonSharedBase, buttonSharedDisabled, buttonSharedSizing, buttonSharedVariants } from '../button/styles.js';
+import { css } from "lit";
+import { buttonSharedBase, buttonSharedDisabled, buttonSharedSizing, buttonSharedVariants, } from "../button/styles.js";
 /**
  * w-link styles: a link that looks like a button.
  * Imports shared button styling and applies to <a> element.
  */
 export const styles = css `
-  ${buttonSharedBase}
+	${buttonSharedBase}
 
-  /* ============================================================
+	/* ============================================================
    * Link element (anchor with button styling)
    * ============================================================ */
   a[part='base'] {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
 
-    cursor: pointer;
-    text-decoration: none;
+		cursor: pointer;
+		text-decoration: none;
 
-    background-color: var(--_bg);
-    color: var(--_color);
+		background-color: var(--_bg);
+		color: var(--_color);
 
-    border: var(--_border-width) solid var(--_border-color);
-    border-radius: var(--_radius);
+		border: var(--_border-width) solid var(--_border-color);
+		border-radius: var(--_radius);
 
-    padding: calc(var(--_pad-y) - var(--_border-width))
-             calc(var(--_pad-x) - var(--_border-width));
+		padding: calc(var(--_pad-y) - var(--_border-width))
+			calc(var(--_pad-x) - var(--_border-width));
 
-    font-size: var(--_font-size);
-    line-height: var(--_line-height);
-    font-weight: var(--_font-weight);
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+		font-weight: var(--_font-weight);
 
-    transition: var(--_transition);
-  }
+		transition: var(--_transition);
+	}
 
-  :host(:not([disabled])) a[part='base']:hover {
-    background-color: var(--_bg-hover);
-    border-color: var(--_border-color-hover);
-    color: var(--_color-hover);
-  }
+	:host(:not([disabled])) a[part="base"]:hover {
+		background-color: var(--_bg-hover);
+		border-color: var(--_border-color-hover);
+		color: var(--_color-hover);
+	}
 
-  :host(:not([disabled])) a[part='base']:active {
-    background-color: var(--_bg-active);
-    border-color: var(--_border-color-active);
-    color: var(--_color-active);
-  }
+	:host(:not([disabled])) a[part="base"]:active {
+		background-color: var(--_bg-active);
+		border-color: var(--_border-color-active);
+		color: var(--_color-active);
+	}
 
-  :host(:focus-visible) a[part='base'] {
-    outline: var(--_outline-width) solid var(--_outline-color);
-    outline-offset: var(--_outline-offset);
-  }
+	:host(:focus-visible) a[part="base"] {
+		outline: var(--_outline-width) solid var(--_outline-color);
+		outline-offset: var(--_outline-offset);
+	}
 
-  /* ===== Variants (shared from button) ===== */
-  ${buttonSharedVariants}
+	/* ===== Variants (shared from button) ===== */
+	${buttonSharedVariants}
 
-  /* Link-specific: link variant element styles */
+	/* Link-specific: link variant element styles */
   :host([variant='link']) a[part='base'] {
-    display: inline;
-    padding: 0;
-  }
-
-  :host([variant='link']:not([disabled])) a[part='base']:hover {
-    text-decoration: underline;
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  /* ===== Sizes (shared from button) ===== */
-  ${buttonSharedSizing}
-
-  /* ===== Layout ===== */
-  :host([full-width]) a[part='base'] {
-    width: 100%;
-  }
-
-  /* ===== Disabled (shared from button) ===== */
-  ${buttonSharedDisabled}
+		display: inline;
+		padding: 0;
+	}
+
+	:host([variant="link"]:not([disabled])) a[part="base"]:hover {
+		text-decoration: underline;
+		background-color: transparent;
+		border-color: transparent;
+	}
+
+	/* ===== Sizes (shared from button) ===== */
+	${buttonSharedSizing}
+
+	/* ===== Layout ===== */
+  :host([full-width]) {
+		display: block;
+		width: 100%;
+	}
+
+	:host([full-width]) a[part="base"] {
+		width: 100%;
+	}
+
+	/* ===== Disabled (shared from button) ===== */
+	${buttonSharedDisabled}
 `;

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

@@ -1,8 +1,8 @@
-import './modal.js';
-import '../modal-header/modal-header.js';
-import '../modal-footer/modal-footer.js';
-import { WarpModalFooter } from '../modal-footer/modal-footer.js';
-import { WarpModalHeader } from '../modal-header/modal-header.js';
-import { WarpModal } from './modal.js';
-import { CanCloseMixin, ProvidesCanCloseToSlotsMixin } from './util.js';
+import "./modal.js";
+import "../modal-header/modal-header.js";
+import "../modal-footer/modal-footer.js";
+import { WarpModalFooter } from "../modal-footer/modal-footer.js";
+import { WarpModalHeader } from "../modal-header/modal-header.js";
+import { WarpModal } from "./modal.js";
+import { CanCloseMixin, ProvidesCanCloseToSlotsMixin } from "./util.js";
 export { WarpModal as WarpModal, WarpModalHeader as WarpModalHeader, WarpModalFooter as WarpModalFooter, CanCloseMixin as ModalCanCloseMixin, ProvidesCanCloseToSlotsMixin as ModalProvidesCanCloseToSlotsMixin, };

package/dist/packages/modal/index.js

@@ -1,10 +1,10 @@
 // Side-effect imports to register custom elements
-import './modal.js';
-import '../modal-header/modal-header.js';
-import '../modal-footer/modal-footer.js';
+import "./modal.js";
+import "../modal-header/modal-header.js";
+import "../modal-footer/modal-footer.js";
 // Re-exports for backward compatibility
-import { WarpModalFooter } from '../modal-footer/modal-footer.js';
-import { WarpModalHeader } from '../modal-header/modal-header.js';
-import { WarpModal } from './modal.js';
-import { CanCloseMixin, ProvidesCanCloseToSlotsMixin } from './util.js';
+import { WarpModalFooter } from "../modal-footer/modal-footer.js";
+import { WarpModalHeader } from "../modal-header/modal-header.js";
+import { WarpModal } from "./modal.js";
+import { CanCloseMixin, ProvidesCanCloseToSlotsMixin } from "./util.js";
 export { WarpModal as WarpModal, WarpModalHeader as WarpModalHeader, WarpModalFooter as WarpModalFooter, CanCloseMixin as ModalCanCloseMixin, ProvidesCanCloseToSlotsMixin as ModalProvidesCanCloseToSlotsMixin, };

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

@@ -1,22 +1,40 @@
-import { LitElement } from 'lit';
+import { LitElement } from "lit";
 declare const WarpModal_base: import("./util.js").Constructor<{
     handleSlotChange: (evt: Event) => void;
 }> & typeof LitElement;
 /**
  * Modals (or dialogs) display important information that users need to acknowledge.
  *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+ *
  * @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;
-    contentId: string;
+    /** @deprecated This ID has no effect */
+    contentId: string | undefined;
     /**
      * Ignores clicks to the backdrop when set
      */
@@ -29,15 +47,19 @@ 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;
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-modal": WarpModal;
+    }
+}
 export {};