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

package/dist/custom-elements.json

@@ -7219,6 +7219,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether this step is active.\n\nThe active step displays a filled indicator.",
               "attribute": "active",
               "reflects": true
             },
@@ -7229,6 +7230,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether this step is completed.\n\nCompleted steps display a checkmark icon and a filled indicator.",
               "attribute": "completed",
               "reflects": true
             },
@@ -7279,6 +7281,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether this step is active.\n\nThe active step displays a filled indicator.",
               "fieldName": "active"
             },
             {
@@ -7287,6 +7290,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether this step is completed.\n\nCompleted steps display a checkmark icon and a filled indicator.",
               "fieldName": "completed"
             }
           ],
@@ -7294,6 +7298,10 @@
             "name": "LitElement",
             "package": "lit"
           },
+          "parent": {
+            "name": "w-step-indicator",
+            "description": ""
+          },
           "tagName": "w-step",
           "customElement": true,
           "modulePath": "packages/step/step.ts",
@@ -7325,7 +7333,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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)",
+          "description": "Steps are used to show progress through a process or to guide users through a multi-step task.",
           "name": "WarpStepIndicator",
           "members": [
             {
@@ -7335,6 +7343,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Display steps horizontally instead of vertically",
               "attribute": "horizontal",
               "reflects": true
             },
@@ -7345,15 +7354,9 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Align steps to the right (vertical layout only)",
               "attribute": "right",
               "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "updateStepsContext",
-              "type": {
-                "text": "updateStepsContext() => void"
-              }
             }
           ],
           "attributes": [
@@ -7363,6 +7366,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Display steps horizontally instead of vertically",
               "fieldName": "horizontal"
             },
             {
@@ -7371,6 +7375,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Align steps to the right (vertical layout only)",
               "fieldName": "right"
             }
           ],
@@ -7409,24 +7414,16 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "The Switch component allows users to toggle between two states.",
           "name": "WarpSwitch",
           "members": [
-            {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
-            },
             {
               "kind": "field",
               "name": "name",
               "type": {
                 "text": "string"
               },
+              "description": "Name used when submitting an HTML form.",
               "attribute": "name",
               "reflects": true
             },
@@ -7436,6 +7433,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "Value submitted when the switch is checked.\n\nThe component reports `null` as the value in the `change` event when `value` is an empty string.",
               "attribute": "value",
               "reflects": true
             },
@@ -7446,6 +7444,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the switch is on (checked).",
               "attribute": "checked",
               "reflects": true
             },
@@ -7456,6 +7455,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the switch is disabled.",
               "attribute": "disabled",
               "reflects": true
             },
@@ -7485,8 +7485,9 @@
             {
               "name": "change",
               "type": {
-                "text": "CustomEvent"
-              }
+                "text": "WarpSwitchChangeEvent"
+              },
+              "description": "Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`."
             }
           ],
           "attributes": [
@@ -7495,6 +7496,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "Name used when submitting an HTML form.",
               "fieldName": "name"
             },
             {
@@ -7502,6 +7504,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "Value submitted when the switch is checked.\n\nThe component reports `null` as the value in the `change` event when `value` is an empty string.",
               "fieldName": "value"
             },
             {
@@ -7510,6 +7513,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the switch is on (checked).",
               "fieldName": "checked"
             },
             {
@@ -7518,6 +7522,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the switch is disabled.",
               "fieldName": "disabled"
             }
           ],

package/dist/docs/slider/examples.md

@@ -25,11 +25,7 @@
     aria-label="From value"
     name="from"
   ></w-slider-thumb>
-  <w-slider-thumb
-    slot="to"
-    aria-label="To value"
-    name="to"
-  ></w-slider-thumb>
+  <w-slider-thumb slot="to" aria-label="To value" name="to"></w-slider-thumb>
 </w-slider>
 ```
 
@@ -47,20 +43,20 @@ Users can also choose to enter values into the input field that are outside the
   
 ```html
 <form id="openended">
-  <w-slider label="Production year" min="1950" max="2025" open-ended>
+  <w-slider label="Production year" min="1950" max="2025" open-ended data-testid="open-ended">
     <w-slider-thumb slot="from" name="from-year"></w-slider-thumb>
     <w-slider-thumb slot="to" name="to-year"></w-slider-thumb>
   </w-slider>
 </form>
 <script>
-  const openEndedSlider = document.querySelector("w-slider");
-
+  const openEndedSlider = document.querySelector('w-slider[data-testid="open-ended"]');
   openEndedSlider.labelFormatter = function (slot) {
     if (slot === "from") {
       return "Before 1950";
     }
     return "2025+";
   };
+  
   openEndedSlider.valueFormatter = function (value, slot) {
     if (slot === "from" && value === "") {
       return "Min";
@@ -70,13 +66,8 @@ Users can also choose to enter values into the input field that are outside the
     }
     return value;
   };
-
-  document.forms["openended"].addEventListener("input", function () {
-    const formData = new FormData(this);
-    const from = formData.get("from-year");
-    const to = formData.get("to-year");
-  });
 </script>
+
 ```
 
 </elements-example>
@@ -92,8 +83,7 @@ You can set a `suffix` on `<w-slider>` and have it apply to any input field in t
   label="Apartment size"
   min="0"
   max="250"
-  suffix="${suffix}"
-  data-testid="sqm"
+  suffix="sqm"
 >
   <w-slider-thumb
     slot="from"
@@ -114,34 +104,22 @@ You can set a `suffix` on `<w-slider>` and have it apply to any input field in t
 
 If you need to format numbers, use the [`valueFormatter`](#valueformatter) and [`labelFormatter`](#labelFormatter) properties.
 
-<elements-example>
+<elements-example >
 
 ```html
-<w-slider
-  label="Price"
-  min="0"
-  max="250000"
-  suffix="${suffix}"
-  data-testid="currency"
->
+<w-slider label="Price" min="0" max="250000" suffix="kr" data-testid="currency">
   <w-slider-thumb
     slot="from"
     aria-label="From price"
     name="from"
   ></w-slider-thumb>
-  <w-slider-thumb
-    slot="to"
-    aria-label="To price"
-    name="to"
-  ></w-slider-thumb>
+  <w-slider-thumb slot="to" aria-label="To price" name="to"></w-slider-thumb>
 </w-slider>
-<script type="module">
-  const numberFormatter = window.getNumberFormatter(
-    "${locale}",
-  ).format;
-  const currencySlider = document.querySelector(
-    'w-slider[data-testid="currency"]',
-  );
+<script>
+  const numberFormatter = new Intl.NumberFormat("en", {
+    maximumFractionDigits: 0,
+  }).format;
+  const currencySlider = document.querySelector('w-slider[data-testid="currency"]');
   currencySlider.valueFormatter = numberFormatter;
   currencySlider.labelFormatter = (slot) => {
     if (slot === "from") return "0";
@@ -159,7 +137,7 @@ Sets the [`step` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HT
 <elements-example>
 
 ```html
-<w-slider label="Single" step="${step}" min="0" max="100">
+<w-slider label="Single" step="5" min="0" max="100">
   <w-slider-thumb name="value"></w-slider-thumb>
 </w-slider>
 ```
@@ -173,13 +151,7 @@ Show tick markers along the slider. Only works with a single slider.
 <elements-example>
 
 ```html
-<w-slider
-  label="Single"
-  min="0"
-  max="100"
-  step="5"
-  markers="5"
->
+<w-slider label="Single" min="0" max="100" step="5" markers="5">
   <w-slider-thumb name="value"></w-slider-thumb>
 </w-slider>
 ```
@@ -228,11 +200,7 @@ Show tick markers along the slider. Only works with a single slider.
 <elements-example>
 
 ```html
-<w-slider
-  min="1950"
-  max="2025"
-  help-text="Model year of the car"
->
+<w-slider min="1950" max="2025" help-text="Model year of the car">
   <legend class="sr-only" slot="label">Model year</legend>
   <w-slider-thumb slot="from" name="from"></w-slider-thumb>
   <w-slider-thumb slot="to" name="to"></w-slider-thumb>
@@ -241,7 +209,6 @@ Show tick markers along the slider. Only works with a single slider.
 
 </elements-example>
 
-
 ### Hidden min and max value labels
 
 Give the component a label formatter and always return the empty string.
@@ -249,21 +216,13 @@ Give the component a label formatter and always return the empty string.
 <elements-example>
 
 ```html
-
-<w-slider
-  min="1950"
-  max="2025"
-  help-text="Model year of the car"
-  data-testid="hidden-minmax-label"
->
+<w-slider min="1950" max="2025" help-text="Model year of the car" data-testid="hidden-minmax-label">
   <legend class="sr-only" slot="label">Model year</legend>
   <w-slider-thumb slot="from" name="from"></w-slider-thumb>
   <w-slider-thumb slot="to" name="to"></w-slider-thumb>
 </w-slider>
 <script>
-  const hiddenMinMaxSlider = document.querySelector(
-    'w-slider[data-testid="hidden-minmax-label"]',
-  );
+  const hiddenMinMaxSlider = document.querySelector('w-slider[data-testid="hidden-minmax-label"]');
   hiddenMinMaxSlider.labelFormatter = () => "";
 </script>
 ```
@@ -279,7 +238,7 @@ The text field doubles as a visualization of the exact value, which is difficult
 ```html
 <output class="text-xs">
   <span class="font-bold">Distance:</span>
-  <span id="distance-value"></span>
+  <span data-testid="distance-value"></span>
 </output>
 <form name="map">
   <w-slider min="0" max="20" hidden-textfield data-testid="map-radius">
@@ -288,44 +247,40 @@ The text field doubles as a visualization of the exact value, which is difficult
   </w-slider>
 </form>
 <script>
+  const mapRadiusSlider = document.querySelector('w-slider[data-testid="map-radius"]');
+
   const radiusSteps = [
-    200, 300, 400, 500, 700, 1000, 1500, 2000, 3000, 5000, 7000, 10000,
-    20000, 30000, 50000, 75000, 100000, 200000, 300000, 400000, 500000,
+    200, 300, 400, 500, 700, 1000, 1500, 2000, 3000, 5000, 7000, 10000, 20000,
+    30000, 50000, 75000, 100000, 200000, 300000, 400000, 500000,
   ];
-  const mapRadiusSlider = document.querySelector(
-    'w-slider[data-testid="map-radius"]',
-  );
-  const formatter = window.getNumberFormatter("${locale}");
-  function formatDistance(value) {
+  const formatter = new Intl.NumberFormat("en", { maximumFractionDigits: 0 });
+  
+  const formatDistance = (value) => {
     const index = Number.parseInt(value);
     const numValue = radiusSteps[index];
 
     let formattedValue = "";
 
     if (numValue < 1000) {
-      // Use non-breaking space here
       formattedValue = formatter.format(numValue) + " m";
     } else {
       formattedValue = formatter.format(numValue / 1000) + " km";
     }
     return formattedValue;
   };
+  
   mapRadiusSlider.labelFormatter = (slot) => {
     if (slot === "from") {
       return formatDistance("0");
     }
     return formatDistance(String(radiusSteps.length - 1));
   };
+  
   mapRadiusSlider.valueFormatter = (value) => {
     const formattedValue = formatDistance(value);
-    document.getElementById("distance-value").innerText = formattedValue;
+    document.querySelector('[data-testid="distance-value"]').innerText = formattedValue;
     return formattedValue;
   };
-
-  document.forms["map"].addEventListener("input", function () {
-    const formData = new FormData(this);
-    const distance = formData.get("distance");
-  });
 </script>
 ```
 

package/dist/docs/slider/slider.md

@@ -45,11 +45,7 @@ Sliders come in two main variants:
     aria-label="From value"
     name="from"
   ></w-slider-thumb>
-  <w-slider-thumb
-    slot="to"
-    aria-label="To value"
-    name="to"
-  ></w-slider-thumb>
+  <w-slider-thumb slot="to" aria-label="To value" name="to"></w-slider-thumb>
 </w-slider>
 ```
 
@@ -67,20 +63,20 @@ Users can also choose to enter values into the input field that are outside the
   
 ```html
 <form id="openended">
-  <w-slider label="Production year" min="1950" max="2025" open-ended>
+  <w-slider label="Production year" min="1950" max="2025" open-ended data-testid="open-ended">
     <w-slider-thumb slot="from" name="from-year"></w-slider-thumb>
     <w-slider-thumb slot="to" name="to-year"></w-slider-thumb>
   </w-slider>
 </form>
 <script>
-  const openEndedSlider = document.querySelector("w-slider");
-
+  const openEndedSlider = document.querySelector('w-slider[data-testid="open-ended"]');
   openEndedSlider.labelFormatter = function (slot) {
     if (slot === "from") {
       return "Before 1950";
     }
     return "2025+";
   };
+  
   openEndedSlider.valueFormatter = function (value, slot) {
     if (slot === "from" && value === "") {
       return "Min";
@@ -90,13 +86,8 @@ Users can also choose to enter values into the input field that are outside the
     }
     return value;
   };
-
-  document.forms["openended"].addEventListener("input", function () {
-    const formData = new FormData(this);
-    const from = formData.get("from-year");
-    const to = formData.get("to-year");
-  });
 </script>
+
 ```
 
 </elements-example>
@@ -112,8 +103,7 @@ You can set a `suffix` on `<w-slider>` and have it apply to any input field in t
   label="Apartment size"
   min="0"
   max="250"
-  suffix="${suffix}"
-  data-testid="sqm"
+  suffix="sqm"
 >
   <w-slider-thumb
     slot="from"
@@ -134,34 +124,22 @@ You can set a `suffix` on `<w-slider>` and have it apply to any input field in t
 
 If you need to format numbers, use the [`valueFormatter`](#valueformatter) and [`labelFormatter`](#labelFormatter) properties.
 
-<elements-example>
+<elements-example >
 
 ```html
-<w-slider
-  label="Price"
-  min="0"
-  max="250000"
-  suffix="${suffix}"
-  data-testid="currency"
->
+<w-slider label="Price" min="0" max="250000" suffix="kr" data-testid="currency">
   <w-slider-thumb
     slot="from"
     aria-label="From price"
     name="from"
   ></w-slider-thumb>
-  <w-slider-thumb
-    slot="to"
-    aria-label="To price"
-    name="to"
-  ></w-slider-thumb>
+  <w-slider-thumb slot="to" aria-label="To price" name="to"></w-slider-thumb>
 </w-slider>
-<script type="module">
-  const numberFormatter = window.getNumberFormatter(
-    "${locale}",
-  ).format;
-  const currencySlider = document.querySelector(
-    'w-slider[data-testid="currency"]',
-  );
+<script>
+  const numberFormatter = new Intl.NumberFormat("en", {
+    maximumFractionDigits: 0,
+  }).format;
+  const currencySlider = document.querySelector('w-slider[data-testid="currency"]');
   currencySlider.valueFormatter = numberFormatter;
   currencySlider.labelFormatter = (slot) => {
     if (slot === "from") return "0";
@@ -179,7 +157,7 @@ Sets the [`step` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HT
 <elements-example>
 
 ```html
-<w-slider label="Single" step="${step}" min="0" max="100">
+<w-slider label="Single" step="5" min="0" max="100">
   <w-slider-thumb name="value"></w-slider-thumb>
 </w-slider>
 ```
@@ -193,13 +171,7 @@ Show tick markers along the slider. Only works with a single slider.
 <elements-example>
 
 ```html
-<w-slider
-  label="Single"
-  min="0"
-  max="100"
-  step="5"
-  markers="5"
->
+<w-slider label="Single" min="0" max="100" step="5" markers="5">
   <w-slider-thumb name="value"></w-slider-thumb>
 </w-slider>
 ```
@@ -248,11 +220,7 @@ Show tick markers along the slider. Only works with a single slider.
 <elements-example>
 
 ```html
-<w-slider
-  min="1950"
-  max="2025"
-  help-text="Model year of the car"
->
+<w-slider min="1950" max="2025" help-text="Model year of the car">
   <legend class="sr-only" slot="label">Model year</legend>
   <w-slider-thumb slot="from" name="from"></w-slider-thumb>
   <w-slider-thumb slot="to" name="to"></w-slider-thumb>
@@ -261,7 +229,6 @@ Show tick markers along the slider. Only works with a single slider.
 
 </elements-example>
 
-
 ### Hidden min and max value labels
 
 Give the component a label formatter and always return the empty string.
@@ -269,21 +236,13 @@ Give the component a label formatter and always return the empty string.
 <elements-example>
 
 ```html
-
-<w-slider
-  min="1950"
-  max="2025"
-  help-text="Model year of the car"
-  data-testid="hidden-minmax-label"
->
+<w-slider min="1950" max="2025" help-text="Model year of the car" data-testid="hidden-minmax-label">
   <legend class="sr-only" slot="label">Model year</legend>
   <w-slider-thumb slot="from" name="from"></w-slider-thumb>
   <w-slider-thumb slot="to" name="to"></w-slider-thumb>
 </w-slider>
 <script>
-  const hiddenMinMaxSlider = document.querySelector(
-    'w-slider[data-testid="hidden-minmax-label"]',
-  );
+  const hiddenMinMaxSlider = document.querySelector('w-slider[data-testid="hidden-minmax-label"]');
   hiddenMinMaxSlider.labelFormatter = () => "";
 </script>
 ```
@@ -299,7 +258,7 @@ The text field doubles as a visualization of the exact value, which is difficult
 ```html
 <output class="text-xs">
   <span class="font-bold">Distance:</span>
-  <span id="distance-value"></span>
+  <span data-testid="distance-value"></span>
 </output>
 <form name="map">
   <w-slider min="0" max="20" hidden-textfield data-testid="map-radius">
@@ -308,44 +267,40 @@ The text field doubles as a visualization of the exact value, which is difficult
   </w-slider>
 </form>
 <script>
+  const mapRadiusSlider = document.querySelector('w-slider[data-testid="map-radius"]');
+
   const radiusSteps = [
-    200, 300, 400, 500, 700, 1000, 1500, 2000, 3000, 5000, 7000, 10000,
-    20000, 30000, 50000, 75000, 100000, 200000, 300000, 400000, 500000,
+    200, 300, 400, 500, 700, 1000, 1500, 2000, 3000, 5000, 7000, 10000, 20000,
+    30000, 50000, 75000, 100000, 200000, 300000, 400000, 500000,
   ];
-  const mapRadiusSlider = document.querySelector(
-    'w-slider[data-testid="map-radius"]',
-  );
-  const formatter = window.getNumberFormatter("${locale}");
-  function formatDistance(value) {
+  const formatter = new Intl.NumberFormat("en", { maximumFractionDigits: 0 });
+  
+  const formatDistance = (value) => {
     const index = Number.parseInt(value);
     const numValue = radiusSteps[index];
 
     let formattedValue = "";
 
     if (numValue < 1000) {
-      // Use non-breaking space here
       formattedValue = formatter.format(numValue) + " m";
     } else {
       formattedValue = formatter.format(numValue / 1000) + " km";
     }
     return formattedValue;
   };
+  
   mapRadiusSlider.labelFormatter = (slot) => {
     if (slot === "from") {
       return formatDistance("0");
     }
     return formatDistance(String(radiusSteps.length - 1));
   };
+  
   mapRadiusSlider.valueFormatter = (value) => {
     const formattedValue = formatDistance(value);
-    document.getElementById("distance-value").innerText = formattedValue;
+    document.querySelector('[data-testid="distance-value"]').innerText = formattedValue;
     return formattedValue;
   };
-
-  document.forms["map"].addEventListener("input", function () {
-    const formData = new FormData(this);
-    const distance = formData.get("distance");
-  });
 </script>
 ```
 

package/dist/docs/step/api.md

@@ -1,26 +1,28 @@
-## `<w-step>` API
+### `<w-step>` API
 
-Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
-
-### Properties
+#### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| active | `boolean` | `false` | - |
-| completed | `boolean` | `false` | - |
+| active | `boolean` | `false` | Whether this step is active. |
+| completed | `boolean` | `false` | Whether this step is completed. |
 
-### Property Details
+#### Property Details
 
-#### active
+##### active
 
+Whether this step is active.
 
+The active step displays a filled indicator.
 
 - Type: `boolean`
 - Default: `false`
 
-#### completed
+##### completed
 
+Whether this step is completed.
 
+Completed steps display a checkmark icon and a filled indicator.
 
 - Type: `boolean`
 - Default: `false`