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

package/dist/packages/expandable/expandable.react.stories.d.ts

@@ -1,6 +1,6 @@
-import { StoryObj } from '@storybook/react';
-import React from 'react';
-import { Expandable } from './react';
+import { StoryObj } from "@storybook/react";
+import React from "react";
+import { Expandable } from "./react";
 declare const _default: {
     title: string;
     render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./expandable").WarpExpandable>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "render" | "renderOptions" | "buttonClass" | "bleed" | "expanded" | "box" | "contentClass" | "noChevron" | "animated" | "headingLevel" | "_expandableSlot"> & {} & Partial<Omit<import("./expandable").WarpExpandable, keyof HTMLElement>> & React.RefAttributes<import("./expandable").WarpExpandable>, "ref">, "button-class" | "content-class" | "no-chevron" | "heading-level"> & {

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
-import { Button } from '../button/react';
-import { Expandable } from './react';
+import React, { useState } from "react";
+import { Button } from "../button/react";
+import { Expandable } from "./react";
 export default {
-    title: 'Layout/Expandable',
+    title: "Layout/Expandable",
     render(args) {
         return (React.createElement(Expandable, { ...args },
             React.createElement("p", null, "This is the expandable content that can be shown or hidden."),
@@ -63,7 +63,7 @@ export const WithHeading = {
 };
 export const NoChevron = {
     args: {
-        title: 'I have no chevron',
+        title: "I have no chevron",
         expanded: false,
         box: false,
         bleed: false,
@@ -81,8 +81,8 @@ export const CustomTitle = {
     },
     render(args) {
         return (React.createElement(Expandable, { ...args },
-            React.createElement("div", { slot: "title", style: { display: 'flex', alignItems: 'center' } },
-                React.createElement("span", { style: { marginRight: '8px' } }, "\uD83C\uDFAF"),
+            React.createElement("div", { slot: "title", style: { display: "flex", alignItems: "center" } },
+                React.createElement("span", { style: { marginRight: "8px" } }, "\uD83C\uDFAF"),
                 React.createElement("span", null, "Custom title with icon")),
             React.createElement("p", null, "This expandable has a custom title slot with an icon.")));
     },

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

@@ -1,8 +1,16 @@
-import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
-import { Expandable } from './react.js';
-describeReactSsrAttributeMapping('Expandable', Expandable, [
-    { propName: 'buttonClass', attrName: 'button-class', value: 'button-class-name' },
-    { propName: 'contentClass', attrName: 'content-class', value: 'content-class-name' },
-    { propName: 'noChevron', attrName: 'no-chevron' },
-    { propName: 'headingLevel', attrName: 'heading-level', value: 2 },
+import { describeReactSsrAttributeMapping } from "../../tests/react-ssr-attributes";
+import { Expandable } from "./react.js";
+describeReactSsrAttributeMapping("Expandable", Expandable, [
+    {
+        propName: "buttonClass",
+        attrName: "button-class",
+        value: "button-class-name",
+    },
+    {
+        propName: "contentClass",
+        attrName: "content-class",
+        value: "content-class-name",
+    },
+    { propName: "noChevron", attrName: "no-chevron" },
+    { propName: "headingLevel", attrName: "heading-level", value: 2 },
 ]);

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

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '../utils/expand-transition.js';
-import '../utils/unstyled-heading.js';
-import type { WarpExpandable } from './expandable.js';
-import './expandable.js';
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import "../utils/expand-transition.js";
+import "../utils/unstyled-heading.js";
+import type { WarpExpandable } from "./expandable.js";
+import "./expandable.js";
 declare const args: Partial<WarpExpandable> & {
     [key: string]: any;
 };

package/dist/packages/expandable/expandable.stories.js

@@ -1,20 +1,20 @@
-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 '../utils/expand-transition.js';
-import '../utils/unstyled-heading.js';
-import './expandable.js';
-const { events, args, argTypes } = getStorybookHelpers('w-expandable');
+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 "../utils/expand-transition.js";
+import "../utils/unstyled-heading.js";
+import "./expandable.js";
+const { events, args, argTypes } = getStorybookHelpers("w-expandable");
 const meta = {
-    title: 'Layout/Expandable',
+    title: "Layout/Expandable",
     render(args) {
         return html `
-      <w-expandable ${spread(prespread(args))}>
-        <p>This is the expandable content that can be shown or hidden.</p>
-        <p>It can contain multiple paragraphs and other elements.</p>
-      </w-expandable>
-    `;
+			<w-expandable ${spread(prespread(args))}>
+				<p>This is the expandable content that can be shown or hidden.</p>
+				<p>It can contain multiple paragraphs and other elements.</p>
+			</w-expandable>
+		`;
     },
     args,
     argTypes,
@@ -32,7 +32,7 @@ export const Default = {
         box: false,
         bleed: false,
         animated: false,
-        'no-chevron': false,
+        "no-chevron": false,
     },
 };
 export const Expanded = {
@@ -42,7 +42,7 @@ export const Expanded = {
         box: false,
         bleed: false,
         animated: false,
-        'no-chevron': false,
+        "no-chevron": false,
     },
 };
 export const Box = {
@@ -52,7 +52,7 @@ export const Box = {
         box: true,
         bleed: false,
         animated: false,
-        'no-chevron': false,
+        "no-chevron": false,
     },
 };
 export const Animated = {
@@ -62,7 +62,7 @@ export const Animated = {
         box: true,
         bleed: false,
         animated: true,
-        'no-chevron': false,
+        "no-chevron": false,
     },
 };
 export const WithHeading = {
@@ -72,18 +72,18 @@ export const WithHeading = {
         box: true,
         bleed: false,
         animated: false,
-        'no-chevron': false,
-        'heading-level': 2,
+        "no-chevron": false,
+        "heading-level": 2,
     },
 };
 export const NoChevron = {
     args: {
-        title: 'I have no chevron',
+        title: "I have no chevron",
         expanded: false,
         box: false,
         bleed: false,
         animated: false,
-        'no-chevron': true,
+        "no-chevron": true,
     },
 };
 export const CustomTitle = {
@@ -92,17 +92,17 @@ export const CustomTitle = {
         box: true,
         bleed: false,
         animated: false,
-        'no-chevron': false,
+        "no-chevron": false,
     },
     render(args) {
         return html `
-      <w-expandable ${spread(prespread(args))}>
-        <div slot="title" style="display: flex; align-items: center;">
-          <span>Custom title with icon</span>
-        </div>
-        <p>This expandable has a custom title slot with an icon.</p>
-      </w-expandable>
-    `;
+			<w-expandable ${spread(prespread(args))}>
+				<div slot="title" style="display: flex; align-items: center;">
+					<span>Custom title with icon</span>
+				</div>
+				<p>This expandable has a custom title slot with an icon.</p>
+			</w-expandable>
+		`;
     },
 };
 export const NoTitle = {
@@ -113,20 +113,26 @@ export const NoTitle = {
     },
     render(args) {
         return html `
-      <w-button aria-label="Toggle expandable content without title" aria-controls="expandableWithoutTitle">Toggle</w-button>
-      <w-expandable ${spread(prespread(args))} id="expandableWithoutTitle">
-        <p>with expanded content</p>
-      </w-expandable>
-      <script>
-        document.querySelector('[aria-controls="expandableWithoutTitle"]').addEventListener('click', () => {
-          const expand = document.getElementById('expandableWithoutTitle');
-          if (expand.expanded) {
-            expand.removeAttribute('expanded');
-          } else {
-            expand.setAttribute('expanded', 'true');
-          }
-        });
-      </script>
-    `;
+			<w-button
+				aria-label="Toggle expandable content without title"
+				aria-controls="expandableWithoutTitle"
+				>Toggle</w-button
+			>
+			<w-expandable ${spread(prespread(args))} id="expandableWithoutTitle">
+				<p>with expanded content</p>
+			</w-expandable>
+			<script>
+				document
+					.querySelector('[aria-controls="expandableWithoutTitle"]')
+					.addEventListener("click", () => {
+						const expand = document.getElementById("expandableWithoutTitle");
+						if (expand.expanded) {
+							expand.removeAttribute("expanded");
+						} else {
+							expand.setAttribute("expanded", "true");
+						}
+					});
+			</script>
+		`;
     },
 };

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

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

package/dist/packages/expandable/expandable.test.js

@@ -1,24 +1,26 @@
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './expandable.js';
-test('renders the given title prop and hides the slotted content', async () => {
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./expandable.js";
+test("renders the given title prop and hides the slotted content", async () => {
     const component = html `
-    <w-expandable title="I'm expandable">
-      <p>with expanded content</p>
-    </w-expandable>
-  `;
+		<w-expandable title="I'm expandable">
+			<p>with expanded content</p>
+		</w-expandable>
+	`;
     const page = render(component);
     await expect.element(page.getByText("I'm expandable")).toBeVisible();
-    await expect.element(page.getByText('with expanded content')).not.toBeVisible();
+    await expect
+        .element(page.getByText("with expanded content"))
+        .not.toBeVisible();
 });
-test('clicking the expandable shows the slotted content', async () => {
+test("clicking the expandable shows the slotted content", async () => {
     const component = html `
-    <w-expandable title="I'm expandable">
-      <p>with expanded content</p>
-    </w-expandable>
-  `;
+		<w-expandable title="I'm expandable">
+			<p>with expanded content</p>
+		</w-expandable>
+	`;
     const page = render(component);
-    await page.getByRole('button').click();
-    await expect.element(page.getByText('with expanded content')).toBeVisible();
+    await page.getByRole("button").click();
+    await expect.element(page.getByText("with expanded content")).toBeVisible();
 });

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

@@ -1,5 +1,10 @@
-import React from 'react';
-import { WarpExpandable } from './expandable.js';
+import React from "react";
+import type { WarpExpandable } from "./expandable.js";
+/**
+ * Expandable is a layout component used for creating expandable content areas on a page.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)
+ */
 export declare const Expandable: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpExpandable>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "render" | "renderOptions" | "buttonClass" | "bleed" | "expanded" | "box" | "contentClass" | "noChevron" | "animated" | "headingLevel" | "_expandableSlot"> & {} & Partial<Omit<WarpExpandable, keyof HTMLElement>> & React.RefAttributes<WarpExpandable>, "ref">, "button-class" | "content-class" | "no-chevron" | "heading-level"> & {
     buttonClass?: string;
     contentClass?: string;

package/dist/packages/expandable/react.js

@@ -1,20 +1,25 @@
-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 BaseExpandable = createComponent({
-    tagName: 'w-expandable',
+    tagName: "w-expandable",
     elementClass: Component,
     react: React,
 });
+/**
+ * Expandable is a layout component used for creating expandable content areas on a page.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)
+ */
 export const Expandable = React.forwardRef(({ buttonClass, contentClass, noChevron, headingLevel, ...props }, ref) => React.createElement(BaseExpandable, {
     ...props,
-    ...(buttonClass !== undefined ? { 'button-class': buttonClass } : {}),
-    ...(contentClass !== undefined ? { 'content-class': contentClass } : {}),
-    ...(noChevron ? { 'no-chevron': true } : {}),
-    ...(headingLevel !== undefined ? { 'heading-level': headingLevel } : {}),
+    ...(buttonClass !== undefined ? { "button-class": buttonClass } : {}),
+    ...(contentClass !== undefined ? { "content-class": contentClass } : {}),
+    ...(noChevron ? { "no-chevron": true } : {}),
+    ...(headingLevel !== undefined ? { "heading-level": headingLevel } : {}),
     ref,
 }));
-Expandable.displayName = 'Expandable';
+Expandable.displayName = "Expandable";

package/dist/packages/expandable/styles.js

@@ -1,2 +1,2 @@
-import { css } from 'lit';
-export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.t4{font-weight:700;font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-left{text-align:left}.align-middle{vertical-align:middle}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.will-change-height{will-change:height}.border-0{border-width:0}.border-2{border-width:2px}.rounded-8{border-radius:8px}.rounded-l-0{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:underline:focus-visible{text-decoration-line:underline}.overflow-hidden{overflow:hidden}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.items-center{align-items:center}.justify-between{justify-content:space-between}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-subtle-hover:hover{background-color:var(--w-s-color-background-subtle-hover)}.active\\:s-bg-subtle-active:active{background-color:var(--w-s-color-background-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-icon{color:var(--w-s-color-icon)}.s-border{border-color:var(--w-s-color-border)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.h-0{height:0}.w-full{width:100%}.m-0{margin:0}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.ml-8{margin-left:.8rem}.px-0{padding-left:0;padding-right:0}.px-16{padding-left:1.6rem;padding-right:1.6rem}.py-0{padding-top:0;padding-bottom:0}.py-16{padding-top:1.6rem;padding-bottom:1.6rem}.pt-0{padding-top:0}.pt-16{padding-top:1.6rem}.pt-8{padding-top:.8rem}.invisible{visibility:hidden}.break-words{overflow-wrap:break-word}.cursor-pointer{cursor:pointer}.-rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-down-16-part\\]\\:-rotate-180::part(w-icon-chevron-down-16-part){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-up-16-part\\]\\:rotate-180::part(w-icon-chevron-up-16-part){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform{transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-down-16-part\\]\\:transform::part(w-icon-chevron-down-16-part){transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-up-16-part\\]\\:transform::part(w-icon-chevron-up-16-part){transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform-gpu{transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-down-16-part\\]\\:transform-gpu::part(w-icon-chevron-down-16-part){transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.part-\\[w-icon-chevron-up-16-part\\]\\:transform-gpu::part(w-icon-chevron-up-16-part){transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-down-16-part\\]\\:transition-transform::part(w-icon-chevron-down-16-part){transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-up-16-part\\]\\:transition-transform::part(w-icon-chevron-up-16-part){transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-down-16-part\\]\\:ease-in-out::part(w-icon-chevron-down-16-part){transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-icon-chevron-up-16-part\\]\\:ease-in-out::part(w-icon-chevron-up-16-part){transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:480px){.sm\\:rounded-8{border-radius:8px}.sm\\:mx-0{margin-left:0;margin-right:0}}`;
+import { unsafeCSS } from "lit";
+export const styles = unsafeCSS("*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.t4{font-weight:700;font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-left{text-align:left}.align-middle{vertical-align:middle}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.will-change-height{will-change:height}.border-0{border-width:0}.border-2{border-width:2px}.rounded-8{border-radius:8px}.rounded-l-0{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.hover\\:underline:hover{text-decoration-line:underline}.focus-visible\\:underline:focus-visible{text-decoration-line:underline}.overflow-hidden{overflow:hidden}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.items-center{align-items:center}.justify-between{justify-content:space-between}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-subtle-hover:hover{background-color:var(--w-s-color-background-subtle-hover)}.active\\:s-bg-subtle-active:active{background-color:var(--w-s-color-background-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-icon{color:var(--w-s-color-icon)}.s-border{border-color:var(--w-s-color-border)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.h-0{height:0}.w-full{width:100%}.m-0{margin:0}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.ml-8{margin-left:.8rem}.px-0{padding-left:0;padding-right:0}.px-16{padding-left:1.6rem;padding-right:1.6rem}.py-0{padding-top:0;padding-bottom:0}.py-16{padding-top:1.6rem;padding-bottom:1.6rem}.pt-0{padding-top:0}.pt-16{padding-top:1.6rem}.pt-8{padding-top:.8rem}.invisible{visibility:hidden}.break-words{overflow-wrap:break-word}.cursor-pointer{cursor:pointer}.-rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\\[w-chevrondown\\]\\:-rotate-180::part(w-chevrondown){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\\[w-chevronup\\]\\:rotate-180::part(w-chevronup){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.transform{transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\\[w-chevrondown\\]\\:transform::part(w-chevrondown){transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\\[w-chevronup\\]\\:transform::part(w-chevronup){transform:translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.transform-gpu{transform:translate3d(var(--w-translate-x), var(--w-translate-y), var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\\[w-chevrondown\\]\\:transform-gpu::part(w-chevrondown){transform:translate3d(var(--w-translate-x), var(--w-translate-y), var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\\[w-chevronup\\]\\:transform-gpu::part(w-chevronup){transform:translate3d(var(--w-translate-x), var(--w-translate-y), var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-chevrondown\\]\\:transition-transform::part(w-chevrondown){transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-chevronup\\]\\:transition-transform::part(w-chevronup){transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-chevrondown\\]\\:ease-in-out::part(w-chevrondown){transition-timing-function:cubic-bezier(.4,0,.2,1)}.part-\\[w-chevronup\\]\\:ease-in-out::part(w-chevronup){transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:480px){.sm\\:rounded-8{border-radius:8px}.sm\\:mx-0{margin-left:0;margin-right:0}}");

package/dist/packages/global.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/global.js

@@ -0,0 +1,5 @@
+/* This module is part of entrypoint.js, imported after the components. Use it for global side-effects such as keyboard listeners. */
+import { addListener } from "./interaction-type-detection.js";
+if (typeof window !== "undefined") {
+    addListener();
+}

package/dist/packages/i18n.d.ts

@@ -1,4 +1,4 @@
-import { Messages } from '@lingui/core';
+import { Messages } from "@lingui/core";
 export declare const supportedLocales: readonly ["en", "nb", "fi", "da", "sv"];
 type SupportedLocale = (typeof supportedLocales)[number];
 export declare const defaultLocale = "en";

package/dist/packages/i18n.js

@@ -1,16 +1,16 @@
-import { i18n } from '@lingui/core';
-export const supportedLocales = ['en', 'nb', 'fi', 'da', 'sv'];
-export const defaultLocale = 'en';
+import { i18n } from "@lingui/core";
+export const supportedLocales = ["en", "nb", "fi", "da", "sv"];
+export const defaultLocale = "en";
 export const getSupportedLocale = (usedLocale) => {
-    return (supportedLocales.find((locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)) ||
-        defaultLocale);
+    return (supportedLocales.find((locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)) || defaultLocale);
 };
 export function detectLocale() {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
         /**
          * Server locale detection. This requires e.g LANG environment variable to be set on the server.
          */
-        const serverLocale = process.env.NMP_LANGUAGE || Intl.DateTimeFormat().resolvedOptions().locale;
+        const serverLocale = process.env.NMP_LANGUAGE ||
+            Intl.DateTimeFormat().resolvedOptions().locale;
         return getSupportedLocale(serverLocale);
     }
     try {
@@ -32,37 +32,37 @@ export function detectLocale() {
         return defaultLocale;
     }
     catch (e) {
-        console.warn('could not detect locale, falling back to source locale', e);
+        console.warn("could not detect locale, falling back to source locale", e);
         return defaultLocale;
     }
 }
 export const getMessages = (locale, enMsg, nbMsg, fiMsg, daMsg, svMsg) => {
-    if (locale === 'nb')
+    if (locale === "nb")
         return nbMsg;
-    if (locale === 'fi')
+    if (locale === "fi")
         return fiMsg;
-    if (locale === 'da')
+    if (locale === "da")
         return daMsg;
-    if (locale === 'sv')
+    if (locale === "sv")
         return svMsg;
     // Default to English
     return enMsg;
 };
 export const activateI18n = (enMessages, nbMessages, fiMessages, daMessages, svMessages) => {
     // Load all locales upfront to support dynamic locale switching
-    i18n.load('en', enMessages);
-    i18n.load('nb', nbMessages);
-    i18n.load('fi', fiMessages);
-    i18n.load('da', daMessages);
-    i18n.load('sv', svMessages);
+    i18n.load("en", enMessages);
+    i18n.load("nb", nbMessages);
+    i18n.load("fi", fiMessages);
+    i18n.load("da", daMessages);
+    i18n.load("sv", svMessages);
     const locale = detectLocale();
     i18n.activate(locale);
     notifyI18nChange();
     setupLangObserver();
 };
-export const I18N_CHANGE_EVENT = 'warp-i18n-change';
+export const I18N_CHANGE_EVENT = "warp-i18n-change";
 export function notifyI18nChange() {
-    if (typeof window === 'undefined')
+    if (typeof window === "undefined")
         return;
     window.dispatchEvent(new Event(I18N_CHANGE_EVENT));
 }
@@ -70,7 +70,7 @@ let langObserverInitialized = false;
 function setupLangObserver() {
     if (langObserverInitialized)
         return;
-    if (typeof window === 'undefined')
+    if (typeof window === "undefined")
         return;
     if (!document?.documentElement)
         return;
@@ -84,20 +84,28 @@ function setupLangObserver() {
     };
     const observer = new MutationObserver((mutations) => {
         for (const mutation of mutations) {
-            if (mutation.type === 'attributes' && mutation.attributeName === 'lang') {
+            if (mutation.type === "attributes" && mutation.attributeName === "lang") {
                 handleLangChange();
                 break;
             }
         }
     });
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] });
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["lang"],
+    });
     const parentDocument = getParentDocument();
-    if (parentDocument && parentDocument.documentElement && parentDocument !== document) {
-        observer.observe(parentDocument.documentElement, { attributes: true, attributeFilter: ['lang'] });
+    if (parentDocument &&
+        parentDocument.documentElement &&
+        parentDocument !== document) {
+        observer.observe(parentDocument.documentElement, {
+            attributes: true,
+            attributeFilter: ["lang"],
+        });
     }
     const frameEl = getFrameElement();
     if (frameEl) {
-        observer.observe(frameEl, { attributes: true, attributeFilter: ['lang'] });
+        observer.observe(frameEl, { attributes: true, attributeFilter: ["lang"] });
     }
 }
 function getParentDocument() {
@@ -110,10 +118,10 @@ function getParentDocument() {
 }
 function getDocumentLang(doc) {
     try {
-        return doc?.documentElement?.lang ?? '';
+        return doc?.documentElement?.lang ?? "";
     }
     catch {
-        return '';
+        return "";
     }
 }
 function getFrameElement() {
@@ -126,9 +134,9 @@ function getFrameElement() {
 }
 function getFrameElementLang() {
     try {
-        return window.frameElement?.getAttribute?.('lang') ?? '';
+        return window.frameElement?.getAttribute?.("lang") ?? "";
     }
     catch {
-        return '';
+        return "";
     }
 }

package/dist/packages/icon/icon.d.ts

@@ -1,5 +1,8 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, TemplateResult } from "lit";
 type PixelValue = `${number}px`;
+/**
+ * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)
+ */
 export declare class WarpIcon extends LitElement {
     static styles: import("lit").CSSResult[];
     /** Icon filename (without .svg) */
@@ -9,7 +12,7 @@ export declare class WarpIcon extends LitElement {
      *
      * @default "medium"
      */
-    size: 'small' | 'medium' | 'large' | PixelValue;
+    size: "small" | "medium" | "large" | PixelValue | undefined;
     /**
      * Locale used for `<title>` text.
      *
@@ -31,4 +34,9 @@ export declare class WarpIcon extends LitElement {
 }
 /** @deprecated Exported for backwards compatibility. Use WarpIcon. */
 export declare const WIcon: typeof WarpIcon;
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-icon": WarpIcon;
+    }
+}
 export {};

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

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