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

package/dist/packages/utils/index.js

@@ -0,0 +1,37 @@
+import { classMap } from 'lit/directives/class-map.js';
+const camelCaseToKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+// Source: https://medium.com/@dayton-bobbitt/generating-attributes-for-litelement-properties-f972ef658137
+export function kebabCaseAttributes(constructor) {
+    return class extends constructor {
+        static createProperty(name, options) {
+            let customOptions = options;
+            // derive the attribute name if not already defined or disabled
+            if (typeof options?.attribute === 'undefined' || options?.attribute === true) {
+                customOptions = Object.assign({}, options, {
+                    attribute: camelCaseToKebabCase(name.toString()),
+                });
+            }
+            super.createProperty(name, customOptions);
+        }
+    };
+}
+export function classes(defn) {
+    const classes = [];
+    for (const [key, value] of Object.entries(defn)) {
+        if (value)
+            classes.push(key);
+    }
+    return classes.join(' ');
+}
+export function fclasses(definition) {
+    const defn = {};
+    for (const [key, value] of Object.entries(definition)) {
+        for (const className of key.split(' ')) {
+            defn[className] = value;
+        }
+    }
+    return classMap(defn);
+}
+export function generateRandomId() {
+    return `m${Math.random().toString(36).slice(2)}`;
+}

package/dist/packages/utils/unstyled-heading.d.ts

@@ -1,11 +1,10 @@
-export class UnstyledHeading extends WarpElement {
+export class UnstyledHeading extends LitElement {
     static properties: {
         level: {
             type: NumberConstructor;
         };
     };
-    static styles: (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[][];
     get _markup(): string;
-    render(): import(".pnpm/lit-html@3.2.0/node_modules/lit-html/directive.js").DirectiveResult<typeof import("lit/directives/unsafe-html.js").UnsafeHTMLDirective>;
+    render(): import("lit/async-directive.js").DirectiveResult<typeof import("lit/directives/unsafe-html.js").UnsafeHTMLDirective>;
 }
-import WarpElement from '@warp-ds/elements-core';
+import { LitElement } from 'lit';

package/dist/packages/utils/unstyled-heading.js

@@ -0,0 +1,22 @@
+import { html, LitElement } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+class UnstyledHeading extends LitElement {
+    static { this.properties = {
+        level: { type: Number },
+    }; }
+    get _markup() {
+        return `<h${this.level}
+    style="margin: 0; font-weight: unset; font-size: unset; line-height: unset;"
+  >
+    <slot></slot>
+  </h${this.level}>
+`;
+    }
+    render() {
+        return !this.level ? html `<slot></slot>` : unsafeHTML(this._markup);
+    }
+}
+if (!customElements.get('w-unstyled-heading')) {
+    customElements.define('w-unstyled-heading', UnstyledHeading);
+}
+export { UnstyledHeading };

package/dist/packages/utils/window-exists.js

@@ -0,0 +1 @@
+export const windowExists = typeof window !== 'undefined';

package/dist/setup-tests.d.ts

@@ -0,0 +1 @@
+import 'vitest-browser-lit';

package/dist/setup-tests.js

@@ -0,0 +1 @@
+import 'vitest-browser-lit';

package/dist/vscode.css-custom-data.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "properties": [],
+  "pseudoElements": []
+}

package/dist/vscode.html-custom-data.json

@@ -0,0 +1,296 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "w-affix",
+      "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)\n\n---\n\n",
+      "attributes": [
+        { "name": "aria-label", "values": [] },
+        {
+          "name": "clear",
+          "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.",
+          "values": []
+        },
+        {
+          "name": "search",
+          "description": "Add this property to render a clickable Warp search icon.\n\nSet an `aria-label` that explains the action when using this.",
+          "values": []
+        },
+        { "name": "label", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-alert",
+      "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)\n\n---\n\n",
+      "attributes": [
+        {
+          "name": "variant",
+          "values": [
+            { "name": "negative" },
+            { "name": "positive" },
+            { "name": "warning" },
+            { "name": "info" }
+          ]
+        },
+        { "name": "show", "values": [] },
+        { "name": "role", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-button",
+      "description": "Buttons are used to perform actions, widh different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)\n\n---\n\n",
+      "attributes": [
+        {
+          "name": "type",
+          "values": [
+            { "name": "button" },
+            { "name": "submit" },
+            { "name": "reset" }
+          ]
+        },
+        { "name": "autofocus", "values": [] },
+        {
+          "name": "variant",
+          "values": [
+            { "name": "negative" },
+            { "name": "primary" },
+            { "name": "secondary" },
+            { "name": "utility" },
+            { "name": "pill" },
+            { "name": "link" }
+          ]
+        },
+        { "name": "quiet", "values": [] },
+        { "name": "small", "values": [] },
+        { "name": "loading", "values": [] },
+        { "name": "href", "values": [] },
+        { "name": "target", "values": [] },
+        { "name": "rel", "values": [] },
+        { "name": "full-width", "values": [] },
+        { "name": "button-class", "values": [] },
+        { "name": "name", "values": [] },
+        { "name": "value", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-attention",
+      "description": "\n\n---\n\n",
+      "attributes": [
+        { "name": "show", "values": [] },
+        { "name": "placement", "values": [{ "name": "Directions" }] },
+        { "name": "tooltip", "values": [] },
+        { "name": "callout", "values": [] },
+        { "name": "popover", "values": [] },
+        { "name": "highlight", "values": [] },
+        { "name": "can-close", "values": [] },
+        { "name": "no-arrow", "values": [] },
+        { "name": "distance", "values": [] },
+        { "name": "skidding", "values": [] },
+        { "name": "flip", "values": [] },
+        { "name": "cross-axis", "values": [] },
+        {
+          "name": "fallback-placements",
+          "values": [{ "name": "Directions[]" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-badge",
+      "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)\n\n---\n\n",
+      "attributes": [
+        {
+          "name": "variant",
+          "values": [
+            { "name": "neutral" },
+            { "name": "info" },
+            { "name": "positive" },
+            { "name": "warning" },
+            { "name": "negative" },
+            { "name": "disabled" },
+            { "name": "price" },
+            { "name": "sponsored" }
+          ]
+        },
+        {
+          "name": "position",
+          "values": [
+            { "name": "top-left" },
+            { "name": "top-right" },
+            { "name": "bottom-right" },
+            { "name": "bottom-left" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-box",
+      "description": "Box is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)\n\n---\n\n",
+      "attributes": [
+        { "name": "bleed", "values": [] },
+        { "name": "bordered", "values": [] },
+        { "name": "info", "values": [] },
+        { "name": "neutral", "values": [] },
+        { "name": "role", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-breadcrumbs",
+      "description": "Breadcrumbs show the navigation structure for the current location.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)\n\n---\n\n",
+      "attributes": [{ "name": "aria-label", "values": [] }],
+      "references": []
+    },
+    {
+      "name": "w-card",
+      "description": "Card is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)\n\n---\n\n",
+      "attributes": [
+        { "name": "selected", "values": [] },
+        { "name": "flat", "values": [] },
+        { "name": "clickable", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-expandable",
+      "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)\n\n---\n\n\n\n### **Slots:**\n - **title** - Alternative to the `title` attribute should you need to provide some additional markup.",
+      "attributes": [
+        { "name": "expanded", "values": [] },
+        { "name": "title", "values": [] },
+        { "name": "box", "values": [] },
+        { "name": "bleed", "values": [] },
+        { "name": "button-class", "values": [] },
+        { "name": "content-class", "values": [] },
+        { "name": "no-chevron", "values": [] },
+        { "name": "animated", "values": [] },
+        { "name": "heading-level", "values": [] },
+        { "name": "_hasTitle", "values": [] },
+        { "name": "_showChevronUp", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-pill",
+      "description": "Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-pill--docs)\n\n---\n\n\n\n### **Events:**\n - **w-pill-click**\n- **w-pill-close**",
+      "attributes": [
+        { "name": "can-close", "values": [] },
+        { "name": "suggestion", "values": [] },
+        { "name": "open-sr-label", "values": [] },
+        { "name": "open-aria-label", "values": [] },
+        { "name": "close-sr-label", "values": [] },
+        { "name": "close-aria-label", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-select",
+      "description": "A dropdown component for selecting a single value.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)\n\n---\n\n",
+      "attributes": [
+        {
+          "name": "auto-focus",
+          "description": "Whether the element should receive focus on render",
+          "values": []
+        },
+        {
+          "name": "invalid",
+          "description": "Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error",
+          "values": []
+        },
+        {
+          "name": "always",
+          "description": "Whether to always show a hint",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "The content displayed as the help text",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The content to disply as the label",
+          "values": []
+        },
+        {
+          "name": "optional",
+          "description": "Whether to show optional text",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Renders the field in a disabled state.",
+          "values": []
+        },
+        {
+          "name": "read-only",
+          "description": "Renders the field in a readonly state.",
+          "values": []
+        },
+        { "name": "name", "values": [] },
+        { "name": "value", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-textfield",
+      "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)\n\n---\n\n",
+      "attributes": [
+        { "name": "disabled", "values": [] },
+        { "name": "invalid", "values": [] },
+        { "name": "id", "values": [] },
+        { "name": "label", "values": [] },
+        { "name": "help-text", "values": [] },
+        { "name": "size", "values": [] },
+        { "name": "max", "values": [] },
+        { "name": "min", "values": [] },
+        { "name": "min-length", "values": [] },
+        { "name": "max-length", "values": [] },
+        { "name": "pattern", "values": [] },
+        { "name": "placeholder", "values": [] },
+        { "name": "read-only", "values": [] },
+        { "name": "required", "values": [] },
+        { "name": "type", "values": [] },
+        { "name": "value", "values": [] },
+        { "name": "name", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-modal-footer",
+      "description": "The footer section of a modal, typically where you place actions.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)\n\n---\n\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "w-modal-header",
+      "description": "The header section of a modal, typically where you place the title and a close button.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)\n\n---\n\n\n\n### **Events:**\n - **backClicked**\n\n### **Slots:**\n - **top** - Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.",
+      "attributes": [
+        { "name": "title", "values": [] },
+        { "name": "back", "values": [] },
+        { "name": "no-close", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-modal",
+      "description": "Modals (or dialogs) display important information that users need to acknowledge.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)\n\n---\n\n\n\n### **Events:**\n - **shown**\n- **hidden**\n\n### **Slots:**\n - **header** - Typically where you would use the `w-modal-header` component.\n- **content** - The main content of the modal.\n- **footer** - Typically where you would use the `w-modal-footer` component, for things like actions.",
+      "attributes": [
+        { "name": "show", "values": [] },
+        { "name": "content-id", "values": [] },
+        { "name": "ignore-backdrop-clicks", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-toast-container",
+      "description": "\n\n---\n\n",
+      "attributes": [],
+      "references": []
+    }
+  ]
+}