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

package/dist/packages/badge/badge.test.js

@@ -1,23 +1,25 @@
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './badge.js';
-test('renders the slotted label', async () => {
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./badge.js";
+test("renders the slotted label", async () => {
     const component = html `<w-badge>This is also not a button</w-badge>`;
     const page = render(component);
-    await expect.element(page.getByText('This is also not a button')).toBeVisible();
+    await expect
+        .element(page.getByText("This is also not a button"))
+        .toBeVisible();
 });
-test('defaults to neutral variant when no variant attribute is set', async () => {
+test("defaults to neutral variant when no variant attribute is set", async () => {
     const component = html `<w-badge data-testid="badge">Default badge</w-badge>`;
     const page = render(component);
-    const el = page.getByTestId('badge').element();
+    const el = page.getByTestId("badge").element();
     // The variant attribute should not be reflected (to avoid hydration mismatch)
-    expect(el.hasAttribute('variant')).toBe(false);
+    expect(el.hasAttribute("variant")).toBe(false);
     // But the neutral styles should still be applied
     await expect
         .poll(() => {
-        const inner = el.shadowRoot?.querySelector('div');
-        return inner?.className.includes('bg-[--w-color-badge-neutral-background]');
+        const inner = el.shadowRoot?.querySelector("div");
+        return inner?.className.includes("bg-[--w-color-badge-neutral-background]");
     })
         .toBe(true);
 });

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

@@ -1,2 +1,7 @@
-import { WarpBadge } from './badge.js';
+import type { WarpBadge } from "./badge.js";
+/**
+ * Badge is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/badge/frameworks/elements)
+ */
 export declare const Badge: import("@lit/react").ReactWebComponent<WarpBadge, {}>;

package/dist/packages/badge/react.js

@@ -1,11 +1,16 @@
-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 {
 }
+/**
+ * Badge is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/badge/frameworks/elements)
+ */
 export const Badge = createComponent({
-    tagName: 'w-badge',
+    tagName: "w-badge",
     elementClass: Component,
     react: React,
 });

package/dist/packages/badge/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}.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.bg-\\[--w-black\\/70\\]{background-color:rgba(var(--w-rgb-black),.7)}.bg-\\[--w-color-badge-info-background\\]{background-color:var(--w-color-badge-info-background)}.bg-\\[--w-color-badge-negative-background\\]{background-color:var(--w-color-badge-negative-background)}.bg-\\[--w-color-badge-neutral-background\\]{background-color:var(--w-color-badge-neutral-background)}.bg-\\[--w-color-badge-positive-background\\]{background-color:var(--w-color-badge-positive-background)}.bg-\\[--w-color-badge-sponsored-background\\]{background-color:var(--w-color-badge-sponsored-background)}.bg-\\[--w-color-badge-warning-background\\]{background-color:var(--w-color-badge-warning-background)}.border-0{border-width:0}.rounded-4{border-radius:4px}.rounded-bl-0{border-bottom-left-radius:0}.rounded-br-0{border-bottom-right-radius:0}.rounded-tl-0{border-top-left-radius:0}.rounded-tr-0{border-top-right-radius:0}.inline-flex{display:inline-flex}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.absolute{position:absolute}.static{position:static}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-text{color:var(--w-s-color-text)}.s-text-inverted-static{color:var(--w-s-color-text-inverted-static)}.px-8{padding-left:.8rem;padding-right:.8rem}.py-4{padding-top:.4rem;padding-bottom:.4rem}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}`;
+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}.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.bg-\\[--w-black\\/70\\]{background-color:rgba(var(--w-rgb-black),.7)}.bg-\\[--w-color-badge-info-background\\]{background-color:var(--w-color-badge-info-background)}.bg-\\[--w-color-badge-negative-background\\]{background-color:var(--w-color-badge-negative-background)}.bg-\\[--w-color-badge-neutral-background\\]{background-color:var(--w-color-badge-neutral-background)}.bg-\\[--w-color-badge-positive-background\\]{background-color:var(--w-color-badge-positive-background)}.bg-\\[--w-color-badge-sponsored-background\\]{background-color:var(--w-color-badge-sponsored-background)}.bg-\\[--w-color-badge-warning-background\\]{background-color:var(--w-color-badge-warning-background)}.border-0{border-width:0}.rounded-4{border-radius:4px}.rounded-bl-0{border-bottom-left-radius:0}.rounded-br-0{border-bottom-right-radius:0}.rounded-tl-0{border-top-left-radius:0}.rounded-tr-0{border-top-right-radius:0}.inline-flex{display:inline-flex}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-text{color:var(--w-s-color-text)}.s-text-inverted-static{color:var(--w-s-color-text-inverted-static)}.px-8{padding-left:.8rem;padding-right:.8rem}.py-4{padding-top:.4rem;padding-bottom:.4rem}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}");

package/dist/packages/box/box.d.ts

@@ -1,9 +1,9 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 declare const WarpBox_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * Box is a layout component used for separating content areas on a page.
  *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)
+ * [Warp component reference](https://warp-ds.github.io/docs/components/box/frameworks/elements)
  */
 declare class WarpBox extends WarpBox_base {
     /**
@@ -38,4 +38,9 @@ declare class WarpBox extends WarpBox_base {
     get _class(): string;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-box": WarpBox;
+    }
+}
 export { WarpBox };

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

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

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

@@ -1,35 +1,35 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './box.js';
-describe('w-box React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./box.js";
+describe("w-box React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-box', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-box", {});
         expect(warnings).toEqual([]);
     });
-    test('info box hydrates without warnings', async () => {
-        const warnings = await testHydration('w-box', {
+    test("info box hydrates without warnings", async () => {
+        const warnings = await testHydration("w-box", {
             info: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('neutral box hydrates without warnings', async () => {
-        const warnings = await testHydration('w-box', {
+    test("neutral box hydrates without warnings", async () => {
+        const warnings = await testHydration("w-box", {
             neutral: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('bordered box hydrates without warnings', async () => {
-        const warnings = await testHydration('w-box', {
+    test("bordered box hydrates without warnings", async () => {
+        const warnings = await testHydration("w-box", {
             bordered: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('bleed box hydrates without warnings', async () => {
-        const warnings = await testHydration('w-box', {
+    test("bleed box hydrates without warnings", async () => {
+        const warnings = await testHydration("w-box", {
             bleed: true,
         });
         expect(warnings).toEqual([]);