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

package/dist/packages/utils/index.js

@@ -1,2 +1,37 @@
-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
+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/vscode.html-custom-data.json

@@ -39,37 +39,6 @@
       ],
       "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",
@@ -187,130 +156,6 @@
       ],
       "references": []
     },
-    {
-      "name": "w-combobox",
-      "description": "A combobox element for text input with selectable options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)\n\n---\n\n",
-      "attributes": [
-        {
-          "name": "options",
-          "description": "The available options to select from",
-          "values": [{ "name": "ComboboxOption[]" }]
-        },
-        { "name": "label", "description": "Label above input", "values": [] },
-        {
-          "name": "placeholder",
-          "description": "Input placeholder",
-          "values": []
-        },
-        { "name": "value", "description": "The input value", "values": [] },
-        {
-          "name": "open-on-focus",
-          "description": "Whether the popover opens when focus is on the text field",
-          "values": []
-        },
-        {
-          "name": "select-on-blur",
-          "description": "Select active option on blur",
-          "values": []
-        },
-        {
-          "name": "match-text-segments",
-          "description": "Whether the matching text segments in the options should be highlighted",
-          "values": []
-        },
-        {
-          "name": "disable-static-filtering",
-          "description": "Disable client-side static filtering",
-          "values": []
-        },
-        {
-          "name": "invalid",
-          "description": "Renders the input field in an invalid state",
-          "values": []
-        },
-        {
-          "name": "help-text",
-          "description": "The content to display as the help text",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Whether the element is disabled",
-          "values": []
-        },
-        {
-          "name": "required",
-          "description": "Whether the element is required",
-          "values": []
-        },
-        {
-          "name": "optional",
-          "description": "Whether to show optional text",
-          "values": []
-        },
-        {
-          "name": "class-name",
-          "description": "Additional container styling",
-          "values": []
-        },
-        {
-          "name": "list-class-name",
-          "description": "Additional list styling",
-          "values": []
-        },
-        {
-          "name": "name",
-          "description": "Name attribute for form submission",
-          "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": [] },
-        { "name": "disabled", "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.",
@@ -329,60 +174,6 @@
       ],
       "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**",
@@ -396,164 +187,6 @@
       ],
       "references": []
     },
-    {
-      "name": "w-checkbox",
-      "description": "\n\n---\n\n\n\n### **Events:**\n - **change**\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.",
-      "attributes": [
-        { "name": "title", "values": [] },
-        {
-          "name": "name",
-          "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "The value of the checkbox, submitted as a name/value pair with form data.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The checkbox's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the checkbox.",
-          "values": []
-        },
-        {
-          "name": "indeterminate",
-          "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-          "values": []
-        },
-        {
-          "name": "checked",
-          "description": "The default value of the form control. Primarily used for resetting the form control.",
-          "values": []
-        },
-        {
-          "name": "form",
-          "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-          "values": []
-        },
-        {
-          "name": "required",
-          "description": "Makes the checkbox a required field.",
-          "values": []
-        },
-        {
-          "name": "hint",
-          "description": "The checkbox's hint. If you need to display HTML, use the `hint` slot instead.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "w-radio",
-      "description": "\n\n---\n\n",
-      "attributes": [
-        {
-          "name": "form",
-          "description": "The string pointing to a form's id.",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "The radio's value. When selected, the radio group will receive this value.",
-          "values": []
-        },
-        {
-          "name": "appearance",
-          "description": "The radio's value. When selected, the radio group will receive this value.",
-          "values": [
-            { "name": "default" },
-            { "name": "button" },
-            { "name": "clickable" }
-          ]
-        },
-        {
-          "name": "size",
-          "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the radio.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "w-radio-group",
-      "description": "\n\n---\n\n\n\n### **Events:**\n - **input**\n- **change**\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio group.\n\n### **Slots:**\n - **label** - Alternative to the `label` attribute should you need custom HTML.",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-          "values": []
-        },
-        {
-          "name": "hint",
-          "description": "The radio groups's hint. If you need to display HTML, use the `hint` slot instead.",
-          "values": []
-        },
-        {
-          "name": "name",
-          "description": "The name of the radio group, submitted as a name/value pair with form data.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the radio group and all child radios.",
-          "values": []
-        },
-        {
-          "name": "orientation",
-          "description": "The orientation in which to show radio items.",
-          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
-        },
-        {
-          "name": "value",
-          "description": "The default value of the form control. Primarily used for resetting the form control.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "required",
-          "description": "Ensures a child radio is checked before allowing the containing form to submit.",
-          "values": []
-        },
-        {
-          "name": "with-label",
-          "description": "Used for SSR. if true, will show slotted label on initial render.",
-          "values": []
-        },
-        {
-          "name": "with-hint",
-          "description": "Used for SSR. if true, will show slotted hint on initial render.",
-          "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",
@@ -628,104 +261,28 @@
       "references": []
     },
     {
-      "name": "w-slider-thumb",
-      "description": "Component to place inside a `<w-slider>`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)\n\n---\n\n\n\n### **Events:**\n - **slidervalidity**",
-      "attributes": [
-        { "name": "aria-label", "values": [] },
-        { "name": "aria-description", "values": [] },
-        { "name": "label", "values": [] },
-        { "name": "name", "values": [] },
-        { "name": "value", "values": [] },
-        { "name": "disabled", "values": [] }
-      ],
-      "references": []
-    },
-    {
-      "name": "w-slider",
-      "description": "Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)\n\n---\n\n\n\n### **Slots:**\n - _default_ - For single sliders place a `<w-slider-thumb>` in the default slot.\n- **label** - Label for the slider or range slider as a whole.\n- **description** - Optional description between the label and slider.\n- **from** - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.\n- **to** - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead.",
-          "values": []
-        },
-        { "name": "disabled", "values": [] },
-        { "name": "invalid", "values": [] },
-        {
-          "name": "required",
-          "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
-          "values": []
-        },
-        { "name": "min", "values": [] },
-        { "name": "max", "values": [] },
-        {
-          "name": "markers",
-          "description": "Pass a value similar to step to create visual markers at that interval",
-          "values": []
-        },
-        { "name": "step", "values": [] },
-        {
-          "name": "suffix",
-          "description": "Suffix used in text input fields and for the min and max values of the slider.",
-          "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-tab",
-      "description": "Individual tab component used within w-tabs container.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n\n---\n\n",
-      "attributes": [
-        { "name": "name", "values": [] },
-        { "name": "label", "values": [] },
-        { "name": "active", "values": [] },
-        { "name": "over", "values": [] },
-        { "name": "tab-class", "values": [] }
-      ],
+      "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-tab-panel",
-      "description": "Tab panel component that holds content for individual tabs.\nEach tab panel should have a name that matches a corresponding tab.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n\n---\n\n",
+      "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": "name", "values": [] },
-        { "name": "hidden", "values": [] }
+        { "name": "title", "values": [] },
+        { "name": "back", "values": [] },
+        { "name": "no-close", "values": [] }
       ],
       "references": []
     },
     {
-      "name": "w-tabs",
-      "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n\n---\n\n\n\n### **Events:**\n - **change**",
+      "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": "active", "values": [] },
-        { "name": "tab-class", "values": [] }
+        { "name": "show", "values": [] },
+        { "name": "content-id", "values": [] },
+        { "name": "ignore-backdrop-clicks", "values": [] }
       ],
       "references": []
     },