@warp-ds/elements 2.2.0-next.1 → 2.2.0-next.11

package/dist/packages/utils/expand-transition.js

@@ -0,0 +1,59 @@
+import { css, html, LitElement } from 'lit';
+import { collapse, expand } from 'element-collapse';
+import { ifDefined } from 'lit/directives/if-defined.js';
+class ExpandTransition extends LitElement {
+    static { this.properties = {
+        show: {
+            type: Boolean,
+            reflect: true,
+        },
+        _removeElement: { type: Boolean, state: true },
+    }; }
+    constructor() {
+        super();
+        this.show = false;
+        this._mounted = false;
+        this._removeElement = false;
+    }
+    willUpdate() {
+        // Initialise state property with public property value
+        if (!this._mounted) {
+            this._removeElement = !this.show;
+        }
+        if (this.show && this._removeElement) {
+            this._removeElement = false;
+        }
+    }
+    updated() {
+        if (!this._wrapper)
+            return;
+        if (!this._mounted) {
+            this._mounted = true;
+            return;
+        }
+        // If show is set to `true` by user, animate only after component is mount
+        if (this.show) {
+            expand(this._wrapper);
+        }
+        if (!this.show && !this._removeElement) {
+            collapse(this._wrapper, () => (this._removeElement = true));
+        }
+    }
+    get _wrapper() {
+        return this ?? null;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: block;
+      }
+    `,
+    ]; }
+    render() {
+        return html `<div aria-hidden=${ifDefined(!this.show ? 'true' : undefined)}>${this._removeElement ? html `` : html `<slot></slot>`}</div>`;
+    }
+}
+if (!customElements.get('w-expand-transition')) {
+    customElements.define('w-expand-transition', ExpandTransition);
+}
+export { ExpandTransition };

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

@@ -6,5 +6,5 @@ export function kebabCaseAttributes(constructor: any): {
     createProperty(name: any, options: any): void;
 };
 export function classes(defn: any): string;
-export function fclasses(definition: any): import(".pnpm/lit-html@3.2.0/node_modules/lit-html/directive").DirectiveResult<typeof import("lit/directives/class-map").ClassMapDirective>;
+export function fclasses(definition: any): import("lit/async-directive.js").DirectiveResult<typeof import("lit/directives/class-map.js").ClassMapDirective>;
 export function generateRandomId(): string;

package/dist/packages/utils/index.js

@@ -0,0 +1,2 @@
+import{classMap as c}from"lit/directives/class-map.js";var n=r=>r.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();function f(r){return class extends r{static createProperty(t,e){let a=e;(typeof(e==null?void 0:e.attribute)=="undefined"||(e==null?void 0:e.attribute)===!0)&&(a=Object.assign({},e,{attribute:n(t.toString())})),super.createProperty(t,a)}}}function l(r){let t=[];for(let[e,a]of Object.entries(r))a&&t.push(e);return t.join(" ")}function o(r){let t={};for(let[e,a]of Object.entries(r))for(let s of e.split(" "))t[s]=a;return c(t)}function b(){return`m${Math.random().toString(36).slice(2)}`}export{l as classes,o as fclasses,b as generateRandomId,f as kebabCaseAttributes};
+//# sourceMappingURL=index.js.map

package/dist/packages/utils/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/utils/index.js"],
+  "sourcesContent": ["import { classMap } from 'lit/directives/class-map.js';\n\nconst camelCaseToKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n\n// Source: https://medium.com/@dayton-bobbitt/generating-attributes-for-litelement-properties-f972ef658137\nexport function kebabCaseAttributes(constructor) {\n  return class extends constructor {\n    static createProperty(name, options) {\n      let customOptions = options;\n\n      // derive the attribute name if not already defined or disabled\n      if (typeof options?.attribute === 'undefined' || options?.attribute === true) {\n        customOptions = Object.assign({}, options, {\n          attribute: camelCaseToKebabCase(name.toString()),\n        });\n      }\n\n      super.createProperty(name, customOptions);\n    }\n  };\n}\n\nexport function classes(defn) {\n  const classes = [];\n  for (const [key, value] of Object.entries(defn)) {\n    if (value) classes.push(key);\n  }\n  return classes.join(' ');\n}\n\nexport function fclasses(definition) {\n  const defn = {};\n  for (const [key, value] of Object.entries(definition)) {\n    for (const className of key.split(' ')) {\n      defn[className] = value;\n    }\n  }\n  return classMap(defn);\n}\n\nexport function generateRandomId() {\n  return `m${Math.random().toString(36).slice(2)}`;\n}\n"],
+  "mappings": "AAAA,OAAS,YAAAA,MAAgB,8BAEzB,IAAMC,EAAwBC,GAAQA,EAAI,QAAQ,qBAAsB,OAAO,EAAE,YAAY,EAGtF,SAASC,EAAoBC,EAAa,CAC/C,OAAO,cAAcA,CAAY,CAC/B,OAAO,eAAeC,EAAMC,EAAS,CACnC,IAAIC,EAAgBD,GAGhB,OAAOA,GAAA,YAAAA,EAAS,YAAc,cAAeA,GAAA,YAAAA,EAAS,aAAc,MACtEC,EAAgB,OAAO,OAAO,CAAC,EAAGD,EAAS,CACzC,UAAWL,EAAqBI,EAAK,SAAS,CAAC,CACjD,CAAC,GAGH,MAAM,eAAeA,EAAME,CAAa,CAC1C,CACF,CACF,CAEO,SAASC,EAAQC,EAAM,CAC5B,IAAMD,EAAU,CAAC,EACjB,OAAW,CAACE,EAAKC,CAAK,IAAK,OAAO,QAAQF,CAAI,EACxCE,GAAOH,EAAQ,KAAKE,CAAG,EAE7B,OAAOF,EAAQ,KAAK,GAAG,CACzB,CAEO,SAASI,EAASC,EAAY,CACnC,IAAMJ,EAAO,CAAC,EACd,OAAW,CAACC,EAAKC,CAAK,IAAK,OAAO,QAAQE,CAAU,EAClD,QAAWC,KAAaJ,EAAI,MAAM,GAAG,EACnCD,EAAKK,CAAS,EAAIH,EAGtB,OAAOX,EAASS,CAAI,CACtB,CAEO,SAASM,GAAmB,CACjC,MAAO,IAAI,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,CAAC,CAAC,EAChD",
+  "names": ["classMap", "camelCaseToKebabCase", "str", "kebabCaseAttributes", "constructor", "name", "options", "customOptions", "classes", "defn", "key", "value", "fclasses", "definition", "className", "generateRandomId"]
+}

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

@@ -1,10 +1,10 @@
-export class UnstyledHeading {
+export class UnstyledHeading extends LitElement {
     static properties: {
         level: {
             type: NumberConstructor;
         };
     };
-    static styles: any[];
     get _markup(): string;
-    render(): import(".pnpm/lit-html@3.2.0/node_modules/lit-html/directive").DirectiveResult<typeof import("lit/directives/unsafe-html").UnsafeHTMLDirective>;
+    render(): import("lit/async-directive.js").DirectiveResult<typeof import("lit/directives/unsafe-html.js").UnsafeHTMLDirective>;
 }
+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,421 @@
+{
+  "$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-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-link",
+      "description": "Buttons are used to perform actions, with different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)\n\n---\n\n",
+      "attributes": [
+        { "name": "autofocus", "values": [] },
+        {
+          "name": "variant",
+          "values": [
+            { "name": "negative" },
+            { "name": "primary" },
+            { "name": "secondary" },
+            { "name": "negativeQuiet" },
+            { "name": "utility" },
+            { "name": "pill" },
+            { "name": "link" },
+            { "name": "quiet" },
+            { "name": "utilityQuiet" }
+          ]
+        },
+        { "name": "quiet", "values": [] },
+        { "name": "small", "values": [] },
+        { "name": "href", "values": [] },
+        { "name": "disabled", "values": [] },
+        { "name": "target", "values": [] },
+        { "name": "rel", "values": [] },
+        { "name": "full-width", "values": [] },
+        { "name": "button-class", "values": [] },
+        { "name": "name", "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-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-datepicker",
+      "description": "An input for dates.\n\nUses the `lang` attribute on either the element or on `<html>` to determine the locale options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)\n\n---\n\n",
+      "attributes": [
+        { "name": "label", "values": [] },
+        {
+          "name": "lang",
+          "description": "Takes precedence over the `<html>` lang attribute.",
+          "values": []
+        },
+        { "name": "name", "values": [] },
+        { "name": "value", "values": [] },
+        {
+          "name": "header-format",
+          "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+          "values": []
+        },
+        {
+          "name": "weekday-format",
+          "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+          "values": []
+        },
+        {
+          "name": "day-format",
+          "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-dead-toggle",
+      "description": "Dead toggle can be used where the appearance of a checkbox or radio is needed - but for accessibility purposes an actual input element should not be present.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-dead-toggle--docs)\n\n---\n\n",
+      "attributes": [
+        {
+          "name": "type",
+          "values": [{ "name": "radio" }, { "name": "checkbox" }]
+        },
+        { "name": "checked", "values": [] },
+        { "name": "indeterminate", "values": [] },
+        { "name": "invalid", "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-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-pageindicator",
+      "description": "\n\n---\n\n",
+      "attributes": [
+        {
+          "name": "selected-page",
+          "description": "Currently selected page (1-based index)",
+          "values": []
+        },
+        {
+          "name": "page-count",
+          "description": "Total number of pages",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-pagination",
+      "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)\n\n---\n\n\n\n### **Events:**\n - **page-click** - Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.",
+      "attributes": [
+        { "name": "base-url", "values": [] },
+        { "name": "pages", "values": [] },
+        { "name": "current-page", "values": [] },
+        { "name": "visible-pages", "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": "_options", "values": [] },
+        { "name": "name", "values": [] },
+        { "name": "value", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-steps",
+      "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)\n\n---\n\n",
+      "attributes": [
+        { "name": "horizontal", "values": [] },
+        { "name": "right", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-step",
+      "description": "Individual step component that shows a single step in a process\n\n---\n\n",
+      "attributes": [
+        { "name": "active", "values": [] },
+        { "name": "completed", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-switch",
+      "description": "\n\n---\n\n\n\n### **Events:**\n - **change**",
+      "attributes": [
+        { "name": "value", "values": [] },
+        { "name": "disabled", "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": []
+    }
+  ]
+}