@warp-ds/elements 2.2.0-next.3 → 2.2.0-next.30

package/dist/packages/attention/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"attention.aria.callout\":[\"En grøn taleboble der introducerer noget nyt\"],\"attention.aria.close\":[\"Luk\"],\"attention.aria.highlight\":[\"En opmærksomhedsskabende taleboble med vigtig information\"],\"attention.aria.pointingDown\":[\"peger nedad\"],\"attention.aria.pointingLeft\":[\"peger til venstre\"],\"attention.aria.pointingRight\":[\"peger til højre\"],\"attention.aria.pointingUp\":[\"peger opad\"],\"attention.aria.popover\":[\"En hvid taleboble med mere information\"],\"attention.aria.tooltip\":[\"En sort taleboble med flere oplysninger\"]}");

package/dist/packages/attention/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"attention.aria.callout\":[\"A green speech bubble introducing something new\"],\"attention.aria.close\":[\"Close\"],\"attention.aria.highlight\":[\"An attention speech bubble with important information\"],\"attention.aria.pointingDown\":[\"pointing down\"],\"attention.aria.pointingLeft\":[\"pointing left\"],\"attention.aria.pointingRight\":[\"pointing right\"],\"attention.aria.pointingUp\":[\"pointing up\"],\"attention.aria.popover\":[\"A white speech bubble providing additional information\"],\"attention.aria.tooltip\":[\"A black speech bubble providing complementary information\"]}");

package/dist/packages/attention/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"attention.aria.callout\":[\"Vihreä puhekupla, joka esittelee jotain uutta\"],\"attention.aria.close\":[\"Sulje\"],\"attention.aria.highlight\":[\"Puhekupla, joka sisältää tärkeää tietoa\"],\"attention.aria.pointingDown\":[\"osoittaa alas\"],\"attention.aria.pointingLeft\":[\"osoittaa vasemmalle\"],\"attention.aria.pointingRight\":[\"osoittaa oikealle\"],\"attention.aria.pointingUp\":[\"osoittaa ylös\"],\"attention.aria.popover\":[\"Valkoinen puhekupla, joka tarjoaa lisätietoa\"],\"attention.aria.tooltip\":[\"Musta puhekupla, joka tarjoaa täydentävää tietoa\"]}");

package/dist/packages/attention/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"attention.aria.callout\":[\"Grønn taleboble som introduserer noe nytt\"],\"attention.aria.close\":[\"Lukk\"],\"attention.aria.highlight\":[\"En uthevet taleboble med viktig informasjon\"],\"attention.aria.pointingDown\":[\"peker ned\"],\"attention.aria.pointingLeft\":[\"peker til venstre\"],\"attention.aria.pointingRight\":[\"peker til høyre\"],\"attention.aria.pointingUp\":[\"peker opp\"],\"attention.aria.popover\":[\"En hvit taleboble som gir tilleggsinformasjon\"],\"attention.aria.tooltip\":[\"En svart taleboble som forklarer konteksten\"]}");

package/dist/packages/attention/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"attention.aria.callout\":[\"En grön pratbubbla som introducerar något nytt\"],\"attention.aria.close\":[\"Stäng\"],\"attention.aria.highlight\":[\"En pratbubbla med viktig information\"],\"attention.aria.pointingDown\":[\"pekar ned\"],\"attention.aria.pointingLeft\":[\"pekar vänster\"],\"attention.aria.pointingRight\":[\"pekar höger\"],\"attention.aria.pointingUp\":[\"pekar upp\"],\"attention.aria.popover\":[\"En vit pratbubbla som ger ytterligare information\"],\"attention.aria.tooltip\":[\"En svart pratbubbla som ger kompletterande information\"]}");

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import React from 'react';
+import { WarpAttention } from './index';
+declare class Component extends LitElement {
+}
+declare const BaseAttention: import("@lit/react").ReactWebComponent<Component, {
+    onClose: string;
+    onclose: string;
+}>;
+type BaseProps = React.ComponentProps<typeof BaseAttention>;
+export type AttentionProps = Omit<BaseProps, 'popover'> & {
+    popover?: boolean;
+} & Partial<Omit<WarpAttention, keyof HTMLElement>>;
+export declare const Attention: React.FC<AttentionProps>;
+export {};

package/dist/packages/attention/react.js

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+import { createComponent } from '@lit/react';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+const BaseAttention = createComponent({
+    tagName: 'w-attention',
+    elementClass: Component,
+    react: React,
+    events: {
+        onClose: 'close',
+        // additionally support React v19 syntax for CE events
+        onclose: 'close',
+    },
+});
+export const Attention = BaseAttention;

package/dist/packages/attention/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/attention/styles.js

@@ -0,0 +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}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.bg-transparent{background-color:#0000}.bg-\\[--w-color-button-primary-background\\]{background-color:var(--w-color-button-primary-background)}.bg-\\[--w-color-callout-background\\]{background-color:var(--w-color-callout-background)}.bg-\\[--w-s-color-surface-elevated-300\\]{background-color:var(--w-s-color-surface-elevated-300)}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.hover\\:bg-\\[--w-color-button-primary-background-hover\\]:hover{background-color:var(--w-color-button-primary-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.active\\:bg-\\[--w-color-button-primary-background-active\\]:active{background-color:var(--w-color-button-primary-background-active)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b-0{border-bottom-width:0}.border-r-0{border-right-width:0}.border-\\[--w-color-callout-border\\]{border-color:var(--w-color-callout-border)}.border-\\[--w-s-color-background-inverted\\]{border-color:var(--w-s-color-background-inverted)}.border-\\[--w-s-color-surface-elevated-300\\]{border-color:var(--w-s-color-surface-elevated-300)}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.rounded-full{border-radius:9999px}.rounded-tl-4{border-top-left-radius:4px}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.contents{display:contents}.hidden{display:none}.hover\\:underline:hover,.focus\\:underline:focus,.active\\:underline:active{text-decoration-line:underline}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.items-start{align-items:flex-start}.items-center{align-items:center}.-bottom-\\[8px\\]{bottom:-8px}.-left-\\[8px\\]{left:-8px}.-right-\\[8px\\]{right:-8px}.-top-\\[8px\\]{top:-8px}.justify-center{justify-content:center}.justify-self-end{justify-self:end}.absolute{position:absolute}.relative{position:relative}.static{position:static}.z-50{z-index:50}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-inverted{background-color:var(--w-s-color-background-inverted)}.s-bg-negative{background-color:var(--w-s-color-background-negative)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-negative-hover:hover{background-color:var(--w-s-color-background-negative-hover)}.hover\\:s-bg-negative-subtle-hover:hover{background-color:var(--w-s-color-background-negative-subtle-hover)}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-negative-active:active{background-color:var(--w-s-color-background-negative-active)}.active\\:s-bg-negative-subtle-active:active{background-color:var(--w-s-color-background-negative-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-inverted-static{color:var(--w-s-color-text-inverted-static)}.s-text-link{color:var(--w-s-color-text-link)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-icon{color:var(--w-s-color-icon)}.hover\\:s-icon-hover:hover{color:var(--w-s-color-icon-hover)}.active\\:s-icon-active:active{color:var(--w-s-color-icon-active)}.s-border{border-color:var(--w-s-color-border)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.drop-shadow-m{filter:drop-shadow(0 3px 8px #4040403d)drop-shadow(0 3px 6px #40404029)}.shadow-m{box-shadow:var(--w-shadow-m)}.h-\\[14px\\]{height:14px}.w-\\[14px\\]{width:14px}.-mr-8{margin-right:-.8rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.ml-8{margin-left:.8rem}.p-16{padding:1.6rem}.p-4{padding:.4rem}.px-16{padding-left:1.6rem;padding-right:1.6rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.py-8{padding-top:.8rem;padding-bottom:.8rem}.font-bold{font-weight:700}.resize{resize:both}.translate-z-0{--w-translate-z:0rem;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))}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-\\[24\\]{line-height:2.4rem}`;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Badge } from './react';
+declare const _default: {
+    title: string;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpBadge, {}>;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpBadge>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "variant" | "position" | "_class"> & {} & Partial<Omit<import(".").WarpBadge, keyof HTMLElement>> & React.RefAttributes<import(".").WarpBadge>): React.JSX.Element;
+};
+export default _default;
+export type Story = StoryObj<typeof Badge>;
+export declare const Neutral: Story;
+export declare const Info: Story;
+export declare const Positive: Story;
+export declare const Warning: Story;
+export declare const Negative: Story;
+export declare const Price: Story;
+export declare const Sponsored: Story;
+export declare const Positioned: Story;

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Badge } from './react';
+export default {
+    title: 'Layout/Badge',
+    component: Badge,
+    render(args) {
+        return React.createElement(Badge, { ...args }, "Badge Text");
+    },
+};
+export const Neutral = {
+    args: {
+        variant: 'neutral',
+    },
+};
+export const Info = {
+    args: {
+        variant: 'info',
+    },
+};
+export const Positive = {
+    args: {
+        variant: 'positive',
+    },
+};
+export const Warning = {
+    args: {
+        variant: 'warning',
+    },
+};
+export const Negative = {
+    args: {
+        variant: 'negative',
+    },
+};
+export const Price = {
+    args: {
+        variant: 'price',
+    },
+};
+export const Sponsored = {
+    args: {
+        variant: 'sponsored',
+    },
+};
+export const Positioned = {
+    args: {
+        variant: 'price',
+        position: 'top-right',
+    },
+    render(args) {
+        return (React.createElement("div", { style: {
+                position: 'relative',
+                width: '200px',
+                height: '100px',
+                background: '#f0f0f0',
+                borderRadius: '8px',
+            } },
+            React.createElement(Badge, { ...args }, "Badge")));
+    },
+};

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { WarpBadge } from './index.js';
+import './index.js';
+declare const args: Partial<WarpBadge> & {
+    [key: string]: any;
+};
+declare const meta: Meta<typeof args>;
+export default meta;
+type Story = StoryObj<typeof args>;
+export declare const Neutral: Story;
+export declare const Info: Story;
+export declare const Positive: Story;
+export declare const Warning: Story;
+export declare const Negative: Story;
+export declare const Price: Story;
+export declare const Sponsored: Story;
+export declare const Positioned: Story;

package/dist/packages/badge/badge.stories.js

@@ -0,0 +1,68 @@
+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 './index.js';
+const { events, args, argTypes } = getStorybookHelpers('w-badge');
+const meta = {
+    title: 'Layout/Badge',
+    render(args) {
+        return html `<w-badge ${spread(prespread(args))}>Badge text</w-badge>`;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const Neutral = {
+    args: {
+        variant: 'neutral',
+    },
+};
+export const Info = {
+    args: {
+        variant: 'info',
+    },
+};
+export const Positive = {
+    args: {
+        variant: 'positive',
+    },
+};
+export const Warning = {
+    args: {
+        variant: 'warning',
+    },
+};
+export const Negative = {
+    args: {
+        variant: 'negative',
+    },
+};
+export const Price = {
+    args: {
+        variant: 'price',
+    },
+};
+export const Sponsored = {
+    args: {
+        variant: 'sponsored',
+    },
+};
+export const Positioned = {
+    args: {
+        variant: 'price',
+        position: 'top-right',
+    },
+    render(args) {
+        return html `
+      <div style="position: relative; width: 200px; height: 100px; background: #f0f0f0; border-radius: 8px;">
+        <w-badge ${spread(prespread(args))}>Badge</w-badge>
+      </div>
+    `;
+    },
+};

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

@@ -0,0 +1 @@
+import './index.js';

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

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './index.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();
+});

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

@@ -1,15 +1,15 @@
-export class WarpBadge extends WarpElement {
-    static properties: {
-        variant: {
-            type: number;
-        };
-        position: {
-            type: number;
-        };
-    };
-    static styles: (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[][];
-    variant: string;
+import { LitElement } from 'lit';
+/**
+ * `w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)
+ */
+declare class WarpBadge extends LitElement {
+    variant: 'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored';
+    position: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+    static styles: import("lit").CSSResult[];
+    /** @internal */
     get _class(): string;
     render(): import("lit").TemplateResult<1>;
 }
-import WarpElement from '@warp-ds/elements-core';
+export { WarpBadge };