@warp-ds/elements 2.2.0-next.12 → 2.2.0-next.14

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.2.0-next.11",
+  "version": "2.2.0-next.13",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -356,6 +356,179 @@
             "events": []
           }
         },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "options",
+              "description": "The available options to select from",
+              "value": { "type": "ComboboxOption[]", "default": "[]" }
+            },
+            {
+              "name": "label",
+              "description": "Label above input",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Input placeholder",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "value",
+              "description": "The input value",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "open-on-focus",
+              "description": "Whether the popover opens when focus is on the text field",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "select-on-blur",
+              "description": "Select active option on blur",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "match-text-segments",
+              "description": "Whether the matching text segments in the options should be highlighted",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disable-static-filtering",
+              "description": "Disable client-side static filtering",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "invalid",
+              "description": "Renders the input field in an invalid state",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "help-text",
+              "description": "The content to display as the help text",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "disabled",
+              "description": "Whether the element is disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Whether the element is required",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "optional",
+              "description": "Whether to show optional text",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "class-name",
+              "description": "Additional container styling",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "list-class-name",
+              "description": "Additional list styling",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "name",
+              "description": "Name attribute for form submission",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "options",
+                "description": "The available options to select from",
+                "type": "ComboboxOption[]"
+              },
+              {
+                "name": "label",
+                "description": "Label above input",
+                "type": "string | undefined"
+              },
+              {
+                "name": "placeholder",
+                "description": "Input placeholder",
+                "type": "string | undefined"
+              },
+              {
+                "name": "value",
+                "description": "The input value",
+                "type": "string"
+              },
+              {
+                "name": "openOnFocus",
+                "description": "Whether the popover opens when focus is on the text field",
+                "type": "boolean"
+              },
+              {
+                "name": "selectOnBlur",
+                "description": "Select active option on blur",
+                "type": "boolean"
+              },
+              {
+                "name": "matchTextSegments",
+                "description": "Whether the matching text segments in the options should be highlighted",
+                "type": "boolean"
+              },
+              {
+                "name": "disableStaticFiltering",
+                "description": "Disable client-side static filtering",
+                "type": "boolean"
+              },
+              {
+                "name": "invalid",
+                "description": "Renders the input field in an invalid state",
+                "type": "boolean"
+              },
+              {
+                "name": "helpText",
+                "description": "The content to display as the help text",
+                "type": "string | undefined"
+              },
+              {
+                "name": "disabled",
+                "description": "Whether the element is disabled",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Whether the element is required",
+                "type": "boolean"
+              },
+              {
+                "name": "optional",
+                "description": "Whether to show optional text",
+                "type": "boolean"
+              },
+              {
+                "name": "containerClassName",
+                "description": "Additional container styling",
+                "type": "string | undefined"
+              },
+              {
+                "name": "listClassName",
+                "description": "Additional list styling",
+                "type": "string | undefined"
+              },
+              {
+                "name": "name",
+                "description": "Name attribute for form submission",
+                "type": "string | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "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",
@@ -820,6 +993,214 @@
             "events": []
           }
         },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            { "name": "disabled", "value": { "type": "boolean" } },
+            { "name": "invalid", "value": { "type": "boolean" } },
+            { "name": "id", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string" } },
+            { "name": "help-text", "value": { "type": "string" } },
+            { "name": "size", "value": { "type": "string" } },
+            { "name": "max", "value": { "type": "number" } },
+            { "name": "min", "value": { "type": "number" } },
+            { "name": "min-length", "value": { "type": "number" } },
+            { "name": "max-length", "value": { "type": "number" } },
+            { "name": "pattern", "value": { "type": "string" } },
+            { "name": "placeholder", "value": { "type": "string" } },
+            { "name": "read-only", "value": { "type": "boolean" } },
+            { "name": "required", "value": { "type": "boolean" } },
+            {
+              "name": "type",
+              "value": { "type": "string", "default": "'text'" }
+            },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "name", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "disabled", "type": "boolean" },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "id", "type": "string" },
+              { "name": "label", "type": "string" },
+              { "name": "helpText", "type": "string" },
+              { "name": "size", "type": "string" },
+              { "name": "max", "type": "number" },
+              { "name": "min", "type": "number" },
+              { "name": "minLength", "type": "number" },
+              { "name": "maxLength", "type": "number" },
+              { "name": "pattern", "type": "string" },
+              { "name": "placeholder", "type": "string" },
+              { "name": "readOnly", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              { "name": "type", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "name", "type": "string" },
+              {
+                "name": "formatter",
+                "description": "Function to format value when the input field.\n\nOnly active when the input field does not have focus,\nsimilar to the accessible input masking example from Filament Group\n\nhttps://css-tricks.com/input-masking/\nhttps://filamentgroup.github.io/politespace/demo/demo.html",
+                "type": "(value: string) => string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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### **Events:**\n - **slidervalidity**",
+          "doc-url": "",
+          "attributes": [
+            { "name": "aria-label", "value": { "type": "string" } },
+            { "name": "aria-description", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string" } },
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "boolean" } }
+          ],
+          "events": [{ "name": "slidervalidity", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "ariaLabel", "type": "string" },
+              { "name": "ariaDescription", "type": "string" },
+              { "name": "label", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "disabled", "type": "boolean" },
+              {
+                "name": "markers",
+                "description": "Set by `<w-slider>`",
+                "type": "string"
+              },
+              {
+                "name": "step",
+                "description": "Set by `<w-slider>`",
+                "type": "number"
+              },
+              {
+                "name": "min",
+                "description": "Set by `<w-slider>`",
+                "type": "string"
+              },
+              {
+                "name": "max",
+                "description": "Set by `<w-slider>`",
+                "type": "string"
+              },
+              {
+                "name": "suffix",
+                "description": "Set by `<w-slider>`",
+                "type": "string"
+              },
+              {
+                "name": "formatter",
+                "description": "JS hook to help you format the numeric value how you want.",
+                "type": "(value: string) => string"
+              },
+              { "name": "range", "type": "HTMLInputElement" },
+              { "name": "textfield", "type": "WarpTextField" }
+            ],
+            "events": [{ "name": "slidervalidity", "type": "CustomEvent" }]
+          }
+        },
+        {
+          "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### **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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "invalid",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "min", "value": { "type": "string" } },
+            { "name": "max", "value": { "type": "string" } },
+            {
+              "name": "markers",
+              "description": "Pass a value similar to step to create visual markers at that interval",
+              "value": { "type": "number" }
+            },
+            { "name": "step", "value": { "type": "number" } },
+            {
+              "name": "suffix",
+              "description": "Suffix used in text input fields and for the min and max values of the slider.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "For single sliders place a `<w-slider-thumb>` in the default slot."
+            },
+            {
+              "name": "label",
+              "description": "Label for the slider or range slider as a whole."
+            },
+            {
+              "name": "description",
+              "description": "Optional description between the label and slider."
+            },
+            {
+              "name": "from",
+              "description": "Range sliders need to place a `<w-slider-thumb>` in the from and to slots."
+            },
+            {
+              "name": "to",
+              "description": "Range sliders need to place a `<w-slider-thumb>` in the from and to slots."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "invalid", "type": "boolean" },
+              {
+                "name": "required",
+                "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
+                "type": "boolean"
+              },
+              { "name": "min", "type": "string" },
+              { "name": "max", "type": "string" },
+              {
+                "name": "markers",
+                "description": "Pass a value similar to step to create visual markers at that interval",
+                "type": "number"
+              },
+              { "name": "step", "type": "number" },
+              {
+                "name": "suffix",
+                "description": "Suffix used in text input fields and for the min and max values of the slider.",
+                "type": "string"
+              },
+              {
+                "name": "formatter",
+                "description": "Function to format the to- and from labels and value in the slider thumb tooltip.",
+                "type": "(value: string) => string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "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",
@@ -888,56 +1269,6 @@
             ],
             "events": [{ "name": "change", "type": "CustomEvent" }]
           }
-        },
-        {
-          "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",
-          "doc-url": "",
-          "attributes": [
-            { "name": "disabled", "value": { "type": "boolean" } },
-            { "name": "invalid", "value": { "type": "boolean" } },
-            { "name": "id", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } },
-            { "name": "help-text", "value": { "type": "string" } },
-            { "name": "size", "value": { "type": "string" } },
-            { "name": "max", "value": { "type": "number" } },
-            { "name": "min", "value": { "type": "number" } },
-            { "name": "min-length", "value": { "type": "number" } },
-            { "name": "max-length", "value": { "type": "number" } },
-            { "name": "pattern", "value": { "type": "string" } },
-            { "name": "placeholder", "value": { "type": "string" } },
-            { "name": "read-only", "value": { "type": "boolean" } },
-            { "name": "required", "value": { "type": "boolean" } },
-            {
-              "name": "type",
-              "value": { "type": "string", "default": "'text'" }
-            },
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "name", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "disabled", "type": "boolean" },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "id", "type": "string" },
-              { "name": "label", "type": "string" },
-              { "name": "helpText", "type": "string" },
-              { "name": "size", "type": "string" },
-              { "name": "max", "type": "number" },
-              { "name": "min", "type": "number" },
-              { "name": "minLength", "type": "number" },
-              { "name": "maxLength", "type": "number" },
-              { "name": "pattern", "type": "string" },
-              { "name": "placeholder", "type": "string" },
-              { "name": "readOnly", "type": "boolean" },
-              { "name": "required", "type": "boolean" },
-              { "name": "type", "type": "string" },
-              { "name": "value", "type": "string" },
-              { "name": "name", "type": "string" }
-            ],
-            "events": []
-          }
         }
       ]
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.2.0-next.12",
+  "version": "2.2.0-next.14",
   "packageManager": "pnpm@10.15.1",
   "description": "Custom elements for Warp",
   "exports": {
@@ -46,13 +46,14 @@
   "scripts": {
     "clean": "rimraf .pnpm-store node_modules dist eik storybook-static entrypoint.js",
     "build:entrypoint": "node ./build/entrypoint.js",
-    "build:storybook": "pnpm run messages:compile && tsc && pnpm run build:manifest && pnpm run build:entrypoint && storybook build && touch ./storybook-static/.nojekyll",
+    "build:storybook": "pnpm run messages:compile && tsc && pnpm run build:manifest && pnpm run build:entrypoint && storybook build && pnpm run build:polyfill && touch ./storybook-static/.nojekyll",
     "build:manifest": "custom-elements-manifest analyze --config .cem/custom-element-manifest.config.js",
-    "build": "rimraf dist && rimraf eik && pnpm run messages:compile && tsc && pnpm run build:manifest && pnpm run build:editor && pnpm run build:components && pnpm run build:cloak && pnpm run build:bundle",
+    "build": "rimraf dist && rimraf eik && pnpm run messages:compile && tsc && pnpm run build:manifest && pnpm run build:editor && pnpm run build:components && pnpm run build:cloak && pnpm run build:bundle && pnpm run build:polyfill",
     "build:cloak": "node ./build/cloak.js",
     "build:components": "node ./build/components.js",
     "build:editor": "node ./build/editor.js",
     "build:styles": "node ./build/styles.js",
+    "build:polyfill": "node ./build/polyfill.js",
     "build:bundle": "tsc --project tsconfig.json --outDir .tmp --declaration false --sourceMap true && rollup -c ./build/bundle.js && rimraf .tmp",
     "commit": "cz",
     "dev": "pnpm run storybook",
@@ -86,6 +87,7 @@
     "@itsy/animate": "0.0.9",
     "@lingui/cli": "5.2.0",
     "@lingui/conf": "5.2.0",
+    "@oddbird/css-anchor-positioning": "^0.6.1",
     "@open-wc/lit-helpers": "^0.7.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",