@warp-ds/elements 2.9.0-next.3 → 2.9.0-next.5

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.9.0-next.2",
+  "version": "2.9.0-next.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -49,12 +49,89 @@
             "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", "default": "false" }
+            },
+            {
+              "name": "invalid",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "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", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "type", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "step", "value": { "type": "number" } },
+            {
+              "name": "autocomplete",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "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": "readonly", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              { "name": "type", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "step", "type": "number" },
+              { "name": "autocomplete", "type": "string | undefined" },
+              { "name": "formatter", "type": "(value: string) => string" },
+              { "name": "_hasPrefix" },
+              { "name": "_hasSuffix" }
+            ],
+            "events": []
+          }
+        },
         {
           "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",
           "doc-url": "",
           "attributes": [
-            { "name": "aria-label", "value": { "type": "string" } },
+            {
+              "name": "aria-label",
+              "value": { "type": "string | null", "default": "null" }
+            },
             {
               "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.",
@@ -62,26 +139,44 @@
             },
             {
               "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.",
+              "description": "Add this property to render a clickable Warp search icon.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "label", "value": { "type": "string" } }
+            { "name": "label", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "icon",
+              "value": { "type": "string | null", "default": "null" }
+            }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "ariaLabel", "type": "string" },
+              {
+                "name": "ariaLabel",
+                "description": "Used to override the default `aria-label`s for the internal button when `search` or `clear` is enabled.",
+                "type": "string | null"
+              },
               {
                 "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.",
+                "description": "Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.",
                 "type": "boolean"
               },
               {
                 "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.",
+                "description": "Shows a clickable search icon, typically in a prefix slot for search fields.",
                 "type": "boolean"
               },
-              { "name": "label", "type": "string" }
+              {
+                "name": "label",
+                "description": "Displays plain text such as a currency or unit label (for example `kr` or `%`) instead of an icon button.",
+                "type": "string"
+              },
+              {
+                "name": "icon",
+                "description": "Displays a non-interactive `w-icon` in the affix area using the provided icon name (for example `Search` or `Close`) instead of text.",
+                "type": "string | null"
+              },
+              { "name": "_icon" }
             ],
             "events": []
           }
@@ -687,81 +782,21 @@
           "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": "name",
-                "description": "Name attribute for form submission",
-                "type": "string | undefined"
-              },
-              {
-                "name": "autocomplete",
-                "description": "Autocomplete attribute for the input field",
-                "type": "string | undefined"
-              }
+              { "name": "options", "type": "ComboboxOption[]" },
+              { "name": "label", "type": "string | undefined" },
+              { "name": "placeholder", "type": "string | undefined" },
+              { "name": "value", "type": "string" },
+              { "name": "openOnFocus", "type": "boolean" },
+              { "name": "selectOnBlur", "type": "boolean" },
+              { "name": "matchTextSegments", "type": "boolean" },
+              { "name": "disableStaticFiltering", "type": "boolean" },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "helpText", "type": "string | undefined" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              { "name": "optional", "type": "boolean" },
+              { "name": "name", "type": "string | undefined" },
+              { "name": "autocomplete", "type": "string | undefined" }
             ],
             "events": []
           }
@@ -799,33 +834,13 @@
           "js": {
             "properties": [
               { "name": "label", "type": "string" },
-              {
-                "name": "lang",
-                "description": "Takes precedence over the `<html>` lang attribute.",
-                "type": "string"
-              },
+              { "name": "lang", "type": "string" },
               { "name": "name", "type": "string" },
               { "name": "value", "type": "string" },
-              {
-                "name": "headerFormat",
-                "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).",
-                "type": "string"
-              },
-              {
-                "name": "weekdayFormat",
-                "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).",
-                "type": "string"
-              },
-              {
-                "name": "isDayDisabled",
-                "description": "Lets you control if a date in the calendar should be disabled.\n\nThis needs to be set on the element instance in JavaScript, not as an HTML attribute.",
-                "type": "(day: Date) => boolean"
-              },
-              {
-                "name": "dayFormat",
-                "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).",
-                "type": "string"
-              },
+              { "name": "headerFormat", "type": "string" },
+              { "name": "weekdayFormat", "type": "string" },
+              { "name": "isDayDisabled", "type": "(day: Date) => boolean" },
+              { "name": "dayFormat", "type": "string" },
               { "name": "isCalendarOpen", "type": "boolean" },
               { "name": "navigationDate", "type": "Date" },
               { "name": "selectedDate", "type": "Date | null" },
@@ -1018,16 +1033,8 @@
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "selectedPage",
-                "description": "Currently selected page (1-based index, clamped to valid range)",
-                "type": "number"
-              },
-              {
-                "name": "pageCount",
-                "description": "Total number of pages (minimum 1)",
-                "type": "number"
-              }
+              { "name": "selectedPage", "type": "number" },
+              { "name": "pageCount", "type": "number" }
             ],
             "events": []
           }
@@ -1320,141 +1327,22 @@
           "events": [{ "name": "change", "type": "CustomEvent" }],
           "js": {
             "properties": [
-              {
-                "name": "autoFocus",
-                "description": "Whether the element should receive focus on render.",
-                "type": "boolean"
-              },
-              {
-                "name": "autofocus",
-                "description": "Whether the element should receive focus on render",
-                "type": "boolean"
-              },
-              {
-                "name": "helpText",
-                "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
-                "type": "string"
-              },
-              {
-                "name": "invalid",
-                "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
-                "type": "boolean"
-              },
-              {
-                "name": "always",
-                "description": "Whether to always show a hint.",
-                "type": "boolean"
-              },
-              {
-                "name": "hint",
-                "description": "The content displayed as the help text.",
-                "type": "string"
-              },
-              {
-                "name": "label",
-                "description": "The content to disply as the label",
-                "type": "string"
-              },
-              {
-                "name": "optional",
-                "description": "Whether to show optional text",
-                "type": "boolean"
-              },
-              {
-                "name": "disabled",
-                "description": "Renders the field in a disabled state.",
-                "type": "boolean"
-              },
-              {
-                "name": "readOnly",
-                "description": "Renders the field in a readonly state.",
-                "type": "boolean"
-              },
-              {
-                "name": "readonly",
-                "description": "Renders the field in a readonly state.",
-                "type": "boolean"
-              },
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" }
-            ],
-            "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", "default": "false" }
-            },
-            {
-              "name": "invalid",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            { "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", "default": "false" }
-            },
-            {
-              "name": "readonly",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "required",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            { "name": "type", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "step", "value": { "type": "number" } },
-            {
-              "name": "autocomplete",
-              "value": { "type": "string | undefined" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "disabled", "type": "boolean" },
+              { "name": "autoFocus", "type": "boolean" },
+              { "name": "autofocus", "type": "boolean" },
+              { "name": "helpText", "type": "string" },
               { "name": "invalid", "type": "boolean" },
-              { "name": "id", "type": "string" },
+              { "name": "always", "type": "boolean" },
+              { "name": "hint", "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": "optional", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" },
               { "name": "readOnly", "type": "boolean" },
               { "name": "readonly", "type": "boolean" },
-              { "name": "required", "type": "boolean" },
-              { "name": "type", "type": "string" },
-              { "name": "value", "type": "string" },
               { "name": "name", "type": "string" },
-              { "name": "step", "type": "number" },
-              { "name": "autocomplete", "type": "string | undefined" },
-              {
-                "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"
-              }
+              { "name": "value", "type": "string" },
+              { "name": "_options" }
             ],
-            "events": []
+            "events": [{ "name": "change", "type": "CustomEvent" }]
           }
         },
         {
@@ -1492,7 +1380,13 @@
                 "description": "Value to display in the tooltip",
                 "type": "string | number"
               },
-              { "name": "ariaDescriptionText" }
+              { "name": "ariaDescriptionText" },
+              { "name": "disabled" },
+              { "name": "invalid" },
+              { "name": "openEnded" },
+              { "name": "valueFormatter" },
+              { "name": "tooltipFormatter" },
+              { "name": "labelFormatter" }
             ],
             "events": [
               { "name": "thumbreset", "type": "CustomEvent" },
@@ -1573,54 +1467,32 @@
           "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 (f. ex. `<legend class=\"sr-only\" slot=\"label\">Production year</legend>`)",
-                "type": "string"
-              },
+              { "name": "label", "type": "string" },
               { "name": "disabled", "type": "boolean" },
-              {
-                "name": "openEnded",
-                "description": "Whether or not to allow values outside the range such as \"Before 1950\" and \"2025+\".",
-                "type": "boolean"
-              },
+              { "name": "openEnded", "type": "boolean" },
               { "name": "error", "type": "string" },
               { "name": "helpText", "type": "string" },
               { "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": "required", "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": "markers", "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": "suffix", "type": "string" },
               { "name": "hiddenTextfield", "type": "boolean" },
               {
                 "name": "valueFormatter",
-                "description": "Formatter for the tooltip and input mask values.",
                 "type": "(value: string, slot: SliderSlot) => string"
               },
               {
                 "name": "tooltipFormatter",
-                "description": "Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example \"300+ hk\" instead of \"Max\" in the tooltip.",
                 "type": "(value: string, slot: SliderSlot) => string"
               },
               {
                 "name": "labelFormatter",
-                "description": "Formatter for the min and max labels below the range.",
                 "type": "(slot: SliderSlot) => string"
               },
+              { "name": "fieldset", "type": "HTMLFieldSetElement" },
               { "name": "_invalidMessage", "type": "string" },
               { "name": "_hasInternalError", "type": "boolean" },
               { "name": "_showError", "type": "boolean" },
@@ -1747,7 +1619,9 @@
               },
               { "name": "ariaSelected", "type": "'true' | 'false'" },
               { "name": "active", "type": "boolean" },
-              { "name": "over", "type": "boolean" }
+              { "name": "over", "type": "boolean" },
+              { "name": "_parentTabIndex" },
+              { "name": "_parentAriaSelected" }
             ],
             "events": []
           }
@@ -1770,7 +1644,9 @@
                 "name": "active",
                 "description": "Whether this panel is active (visible).\nSet by parent w-tabs via the _parentActive property.",
                 "type": "boolean"
-              }
+              },
+              { "name": "_parentActive" },
+              { "name": "_parentAriaLabelledBy" }
             ],
             "events": []
           }
@@ -1858,14 +1734,6 @@
             ],
             "events": []
           }
-        },
-        {
-          "name": "w-toast-container",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": { "properties": [], "events": [] }
         }
       ]
     },

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.9.0-next.3",
+  "version": "2.9.0-next.5",
   "packageManager": "pnpm@10.33.0",
   "description": "Custom elements for Warp",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./eik/index.js"
     },
     "./components/affix": "./dist/packages/affix/affix.js",
     "./components/alert": "./dist/packages/alert/alert.js",
@@ -299,7 +299,7 @@
     "test:module-resolution": "cd tests/module-resolution && ./setup.sh && ./test.sh",
     "test:output-validation": "node tests/output-validation/validate-eik-output.js",
     "test:eik-backwards-compat": "node tests/output-validation/validate-eik-backwards-compat.js",
-    "watch:npm": "npx esbuild ./index.js --outdir=dist/ --target=es2017 --bundle --sourcemap --format=esm --minify --watch"
+    "watch:docs": "node ./build/docs-watch.js"
   },
   "repository": {
     "type": "git",

package/dist/docs/toast-container/api.md

@@ -1,14 +0,0 @@
-## API Documentation
-
-### Properties
-
-| Name | Type | Default | Summary |
-|-|-|-|-|
-
-### Property Details
-
-No public fields documented.
-
-### Types
-
-No types documented.

package/dist/docs/toast-container/toast-container.md

@@ -1,20 +0,0 @@
-# ToastContainer (w-toast-container)
-
-## Description
-
-
-
-## API Documentation
-
-### Properties
-
-| Name | Type | Default | Summary |
-|-|-|-|-|
-
-### Property Details
-
-No public fields documented.
-
-### Types
-
-No types documented.