@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.18

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,5 @@
-import React from 'react';
-import { WarpLink } from './link.js';
+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"> & {
     fullWidth?: boolean;
 } & React.RefAttributes<WarpLink>>;

package/dist/packages/link/react.js

@@ -1,17 +1,17 @@
-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,
 });
 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,85 +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;
-  }
+		display: inline;
+		padding: 0;
+	}
 
-  :host([variant='link']:not([disabled])) a[part='base']:hover {
-    text-decoration: underline;
-    background-color: transparent;
-    border-color: transparent;
-  }
+	:host([variant="link"]:not([disabled])) a[part="base"]:hover {
+		text-decoration: underline;
+		background-color: transparent;
+		border-color: transparent;
+	}
 
-  /* ===== Sizes (shared from button) ===== */
-  ${buttonSharedSizing}
+	/* ===== Sizes (shared from button) ===== */
+	${buttonSharedSizing}
 
-  /* ===== Layout ===== */
+	/* ===== Layout ===== */
   :host([full-width]) {
-    display: block;
-    width: 100%;
-  }
+		display: block;
+		width: 100%;
+	}
 
-  :host([full-width]) a[part='base'] {
-    width: 100%;
-  }
+	:host([full-width]) a[part="base"] {
+		width: 100%;
+	}
 
-  /* ===== Disabled (shared from button) ===== */
-  ${buttonSharedDisabled}
+	/* ===== 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,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement } from "lit";
 declare const WarpModal_base: import("./util.js").Constructor<{
     handleSlotChange: (evt: Event) => void;
 }> & typeof LitElement;

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

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

package/dist/packages/modal/modal.hydration.test.js

@@ -1,24 +1,24 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './index.js';
-describe('w-modal React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./index.js";
+describe("w-modal React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-modal', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-modal", {});
         expect(warnings).toEqual([]);
     });
-    test('with content-id hydrates without warnings', async () => {
-        const warnings = await testHydration('w-modal', {
-            'content-id': 'modal-content',
+    test("with content-id hydrates without warnings", async () => {
+        const warnings = await testHydration("w-modal", {
+            "content-id": "modal-content",
         });
         expect(warnings).toEqual([]);
     });
-    test('with ignore-backdrop-clicks hydrates without warnings', async () => {
-        const warnings = await testHydration('w-modal', {
-            'ignore-backdrop-clicks': true,
+    test("with ignore-backdrop-clicks hydrates without warnings", async () => {
+        const warnings = await testHydration("w-modal", {
+            "ignore-backdrop-clicks": true,
         });
         expect(warnings).toEqual([]);
     });