@warp-ds/elements 2.9.1-next.2 → 2.9.1-next.4

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.1-next.1",
+  "version": "2.9.1-next.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -484,7 +484,10 @@
             {
               "name": "placement",
               "description": "Preferred placement relative to the trigger element.\nSets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.",
-              "value": { "type": "Directions", "default": "'bottom'" }
+              "value": {
+                "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'",
+                "default": "'bottom'"
+              }
             },
             {
               "name": "tooltip",
@@ -553,7 +556,7 @@
               {
                 "name": "placement",
                 "description": "Preferred placement relative to the trigger element.\nSets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.",
-                "type": "Directions"
+                "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'"
               },
               {
                 "name": "tooltip",
@@ -724,11 +727,20 @@
         },
         {
           "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",
+          "description": "Shows the navigation structure for the current page.\nRenders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)\n---\n",
           "doc-url": "",
           "attributes": [],
           "events": [],
-          "js": { "properties": [{ "name": "ariaLabel" }], "events": [] }
+          "js": {
+            "properties": [
+              {
+                "name": "ariaLabel",
+                "description": "Accessible label for the breadcrumb navigation.\nDefaults to the localized \"You are here\" label. Set `aria-label` when the default label is not specific enough for the page.",
+                "type": "string | null"
+              }
+            ],
+            "events": []
+          }
         },
         {
           "name": "w-card",
@@ -1703,50 +1715,95 @@
         },
         {
           "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 - **thumbreset**\n- **slidervalidity**",
+          "description": "Component to place inside a `<w-slider>`.\n---\n\n\n### **Events:**\n - **thumbreset** - Internal event used by (and stopped by) `w-slider`.\n- **slidervalidity** - Internal event used by (and stopped by) `w-slider`.",
           "doc-url": "",
           "attributes": [
-            { "name": "aria-label", "value": { "type": "string" } },
-            { "name": "aria-description", "value": { "type": "string" } },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "placeholder", "value": { "type": "string" } }
+            {
+              "name": "aria-label",
+              "description": "Label for the range input.",
+              "value": {
+                "type": "string",
+                "default": "`label` from `w-slider`"
+              }
+            },
+            {
+              "name": "aria-description",
+              "description": "Contextual information for assistive technology, should it be needed",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "name",
+              "description": "The name of this input field in the form. The canonical source of the value is the text field.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "value",
+              "description": "The initial value, if any",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder in empty text fields",
+              "value": { "type": "string" }
+            }
           ],
           "events": [
-            { "name": "thumbreset", "type": "CustomEvent" },
-            { "name": "slidervalidity", "type": "CustomEvent" }
+            {
+              "name": "thumbreset",
+              "type": "CustomEvent",
+              "description": "Internal event used by (and stopped by) `w-slider`."
+            },
+            {
+              "name": "slidervalidity",
+              "type": "CustomEvent",
+              "description": "Internal event used by (and stopped by) `w-slider`."
+            }
           ],
           "js": {
             "properties": [
-              { "name": "ariaLabel", "type": "string" },
-              { "name": "ariaDescription", "type": "string" },
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" },
-              { "name": "placeholder", "type": "string" },
-              { "name": "range", "type": "HTMLInputElement" },
-              { "name": "tooltipTarget", "type": "HTMLOutputElement" },
-              { "name": "textfield", "type": "WarpTextField" },
-              { "name": "boundaryValue", "type": "string" },
               {
-                "name": "textFieldDisplayValue",
-                "description": "Value to display in the textfield (shows boundary when focused on empty value)"
+                "name": "ariaLabel",
+                "description": "Label for the range input.",
+                "type": "string"
+              },
+              {
+                "name": "ariaDescription",
+                "description": "Contextual information for assistive technology, should it be needed",
+                "type": "string"
               },
               {
-                "name": "tooltipDisplayValue",
-                "description": "Value to display in the tooltip",
-                "type": "string | number"
+                "name": "name",
+                "description": "The name of this input field in the form. The canonical source of the value is the text field.",
+                "type": "string"
               },
-              { "name": "ariaDescriptionText" }
+              {
+                "name": "value",
+                "description": "The initial value, if any",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder in empty text fields",
+                "type": "string"
+              }
             ],
             "events": [
-              { "name": "thumbreset", "type": "CustomEvent" },
-              { "name": "slidervalidity", "type": "CustomEvent" }
+              {
+                "name": "thumbreset",
+                "type": "CustomEvent",
+                "description": "Internal event used by (and stopped by) `w-slider`."
+              },
+              {
+                "name": "slidervalidity",
+                "type": "CustomEvent",
+                "description": "Internal event used by (and stopped by) `w-slider`."
+              }
             ]
           }
         },
         {
           "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.",
+          "description": "Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.\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": [
             {
@@ -1763,32 +1820,54 @@
               "description": "Whether or not to allow values outside the range such as \"Before 1950\" and \"2025+\".",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "error", "value": { "type": "string" } },
-            { "name": "help-text", "value": { "type": "string" } },
+            {
+              "name": "error",
+              "description": "Validation error text, if any",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "help-text",
+              "description": "Additional description to show below the fieldset",
+              "value": { "type": "string" }
+            },
             {
               "name": "invalid",
+              "description": "Sets the form fields and fieldset in an invalid state",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required",
-              "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
+              "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": "min",
+              "description": "The minimum allowed value in the range inputs",
+              "value": { "type": "string", "default": "0" }
+            },
+            {
+              "name": "max",
+              "description": "The maximum allowed value in the range inputs",
+              "value": { "type": "string", "default": "100" }
+            },
             {
               "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": "step",
+              "description": "ets step on the range input to jump between values when dragging",
+              "value": { "type": "number" }
+            },
             {
               "name": "suffix",
-              "description": "Suffix used in text input fields and for the min and max values of the slider.",
+              "description": "Suffix used in text input fields and for the min and max values of the slider",
               "value": { "type": "string" }
             },
             {
               "name": "hidden-textfield",
+              "description": "Should only be used in special cases",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
@@ -1828,52 +1907,71 @@
                 "description": "Whether or not to allow values outside the range such as \"Before 1950\" and \"2025+\".",
                 "type": "boolean"
               },
-              { "name": "error", "type": "string" },
-              { "name": "helpText", "type": "string" },
-              { "name": "invalid", "type": "boolean" },
+              {
+                "name": "error",
+                "description": "Validation error text, if any",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "Additional description to show below the fieldset",
+                "type": "string"
+              },
+              {
+                "name": "invalid",
+                "description": "Sets the form fields and fieldset in an invalid state",
+                "type": "boolean"
+              },
               {
                 "name": "required",
-                "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
+                "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": "min",
+                "description": "The minimum allowed value in the range inputs",
+                "type": "string"
+              },
+              {
+                "name": "max",
+                "description": "The maximum allowed value in the range inputs",
+                "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": "step",
+                "description": "ets step on the range input to jump between values when dragging",
+                "type": "number"
+              },
               {
                 "name": "suffix",
-                "description": "Suffix used in text input fields and for the min and max values of the slider.",
+                "description": "Suffix used in text input fields and for the min and max values of the slider",
                 "type": "string"
               },
-              { "name": "hiddenTextfield", "type": "boolean" },
+              {
+                "name": "hiddenTextfield",
+                "description": "Should only be used in special cases",
+                "type": "boolean"
+              },
               {
                 "name": "valueFormatter",
-                "description": "Formatter for the tooltip and input mask values.",
+                "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.",
+                "description": "Overrides valueFormatter for the tooltip.\n\nUse 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" },
-              { "name": "_tabbableElements", "type": "Array<HTMLElement>" },
-              { "name": "edgeMin" },
-              { "name": "edgeMax" },
-              { "name": "componentHasError", "type": "boolean" },
-              { "name": "errorText", "type": "string" }
+              }
             ],
             "events": []
           }
@@ -1953,68 +2051,55 @@
         },
         {
           "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",
+          "description": "Individual tab component used within w-tabs container.\n---\n",
           "doc-url": "",
           "attributes": [
-            { "name": "id", "value": { "type": "string" } },
-            { "name": "for", "value": { "type": "string" } },
-            {
-              "name": "aria-controls",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "aria-selected",
-              "value": { "type": "'true' | 'false'" }
-            },
             {
-              "name": "active",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "for",
+              "description": "The `id` of the `<w-tab-panel>` this tab controls.",
+              "value": { "type": "string" }
             },
             {
               "name": "over",
+              "description": "Whether to show the `icon` slot over the tab title instead of inline.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "id", "type": "string" },
-              { "name": "for", "type": "string" },
               {
-                "name": "tabIndex",
-                "description": "Override tabIndex setter to set _parentTabIndex (for backwards compatibility).",
-                "type": "number"
+                "name": "for",
+                "description": "The `id` of the `<w-tab-panel>` this tab controls.",
+                "type": "string"
               },
               {
-                "name": "_computedAriaSelected",
-                "description": "Computed aria-selected: prefers parent-managed, falls back to own property",
-                "type": "'true' | 'false' | undefined"
-              },
-              { "name": "ariaSelected", "type": "'true' | 'false'" },
-              { "name": "active", "type": "boolean" },
-              { "name": "over", "type": "boolean" }
+                "name": "over",
+                "description": "Whether to show the `icon` slot over the tab title instead of inline.",
+                "type": "boolean"
+              }
             ],
             "events": []
           }
         },
         {
           "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",
+          "description": "Tab panel component that holds content for individual tabs.\nEach tab panel should have a name that matches a corresponding tab.\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "active",
-              "description": "Whether this panel is active (visible).\nSet by parent w-tabs via the _parentActive property.",
-              "value": { "type": "boolean" }
+              "name": "id",
+              "description": "Required so `<w-tab>` has something to target.",
+              "value": { "type": "string" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "active",
-                "description": "Whether this panel is active (visible).\nSet by parent w-tabs via the _parentActive property.",
-                "type": "boolean"
+                "name": "id",
+                "description": "Required so `<w-tab>` has something to target.",
+                "type": "string"
               }
             ],
             "events": []
@@ -2022,17 +2107,40 @@
         },
         {
           "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### **Events:**\n - **change**",
+          "description": "Tabs are used to organize content by grouping similar information on the same page.\n---\n\n\n### **Events:**\n - **change** - Includes `details.panelId` with the now active tab's ID",
           "doc-url": "",
-          "attributes": [{ "name": "active", "value": { "type": "string" } }],
-          "events": [{ "name": "change", "type": "CustomEvent" }],
+          "attributes": [
+            {
+              "name": "active",
+              "description": "The `id` of the panel that should be active.",
+              "value": {
+                "type": "string",
+                "default": "\"\" (Shows the first tab)"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": "WarpTabsChangeEvent",
+              "description": "Includes `details.panelId` with the now active tab's ID"
+            }
+          ],
           "js": {
             "properties": [
-              { "name": "active", "type": "string" },
-              { "name": "tabs" },
-              { "name": "activeTab" }
+              {
+                "name": "active",
+                "description": "The `id` of the panel that should be active.",
+                "type": "string"
+              }
             ],
-            "events": [{ "name": "change", "type": "CustomEvent" }]
+            "events": [
+              {
+                "name": "change",
+                "type": "WarpTabsChangeEvent",
+                "description": "Includes `details.panelId` with the now active tab's ID"
+              }
+            ]
           }
         },
         {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.9.1-next.2",
-  "packageManager": "pnpm@10.33.0",
+  "version": "2.9.1-next.4",
+  "packageManager": "pnpm@10.33.2",
   "description": "Custom elements for Warp",
   "exports": {
     ".": {
@@ -307,17 +307,17 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "@biomejs/biome": "2.2.6",
+    "@biomejs/biome": "2.4.14",
     "@chbphone55/classnames": "2.0.0",
-    "@custom-elements-manifest/analyzer": "^0.10.5",
-    "@eik/cli": "2.0.38",
-    "@eik/esbuild-plugin": "1.1.47",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@eik/cli": "2.0.39",
+    "@eik/esbuild-plugin": "1.1.54",
     "@itsy/animate": "0.0.9",
-    "@lingui/cli": "5.2.0",
-    "@lingui/conf": "5.2.0",
-    "@lingui/core": "5.2.0",
+    "@lingui/cli": "5.9.5",
+    "@lingui/conf": "5.9.5",
+    "@lingui/core": "5.9.5",
     "@lit-labs/rollup-plugin-minify-html-literals": "^0.1.0",
-    "@oddbird/css-anchor-positioning": "^0.7.0",
+    "@oddbird/css-anchor-positioning": "^0.9.0",
     "@open-wc/form-control": "^1.0.0",
     "@open-wc/lit-helpers": "^0.7.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -333,7 +333,7 @@
     "@storybook/react-vite": "^10.3.5",
     "@storybook/web-components": "^10.3.5",
     "@storybook/web-components-vite": "^10.3.5",
-    "@types/node": "24.10.15",
+    "@types/node": "24.12.2",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^6.0.1",
@@ -341,9 +341,10 @@
     "@vitest/browser-playwright": "^4.1.4",
     "@vitest/utils": "^4.1.4",
     "@warp-ds/core": "1.1.8",
-    "@warp-ds/css": "2.1.1",
-    "@warp-ds/uno": "2.1.0",
+    "@warp-ds/css": "2.4.1",
+    "@warp-ds/uno": "2.2.0",
     "@wc-toolkit/cem-validator": "^1.0.3",
+    "@wc-toolkit/jsdoc-tags": "^1.2.0",
     "@wc-toolkit/jsx-types": "^1.4.2",
     "@wc-toolkit/storybook-helpers": "^10.0.0",
     "@wc-toolkit/type-parser": "^1.2.0",
@@ -352,25 +353,25 @@
     "cz-conventional-changelog": "3.3.0",
     "date-fns": "^4.1.0",
     "element-collapse": "1.1.0",
-    "esbuild": "0.25.10",
-    "express": "4.19.2",
+    "esbuild": "0.28.0",
+    "express": "4.22.1",
     "glob": "13.0.6",
-    "globals": "17.4.0",
+    "globals": "17.6.0",
     "html-format": "1.1.7",
     "husky": "^9.1.7",
     "lightningcss": "^1.30.1",
     "nanoid": "^5.1.5",
     "playwright": "^1.55.0",
-    "prettier": "3.3.2",
+    "prettier": "3.8.3",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "rimraf": "6.0.1",
+    "rimraf": "6.1.3",
     "rollup": "^4.52.3",
     "scroll-doctor": "2.0.2",
     "semantic-release": "25.0.3",
     "storybook": "^10.3.5",
     "tslib": "^2.8.1",
-    "typescript": "5.5.3",
+    "typescript": "5.9.3",
     "unocss": "^66.6.8",
     "vite": "^8.0.8",
     "vitest": "^4.1.4",

package/dist/docs/tab/accessibility.md

@@ -1 +0,0 @@
-## Accessibility

package/dist/docs/tab/examples.md

@@ -1 +0,0 @@
-## Examples

package/dist/docs/tab/usage.md

@@ -1 +0,0 @@
-## Usage

package/dist/docs/tab-panel/accessibility.md

@@ -1 +0,0 @@
-## Accessibility

package/dist/docs/tab-panel/examples.md

@@ -1 +0,0 @@
-## Examples

package/dist/docs/tab-panel/usage.md

@@ -1 +0,0 @@
-## Usage