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

package/dist/packages/slider/slider.react.stories.js

@@ -114,8 +114,8 @@ export const OpenEnded = {
                     React.createElement(SliderThumb, { slot: "from", "aria-label": "Fra \u00E5r", name: "from", value: openEndedFrom }),
                     React.createElement(SliderThumb, { slot: "to", "aria-label": "Til \u00E5r", name: "to", value: openEndedTo })),
                 React.createElement("button", { type: "button", onClick: () => {
-                        setOpenEndedFrom("");
-                        setOpenEndedTo("");
+                        setOpenEndedFrom('');
+                        setOpenEndedTo('');
                     } }, "What's button type reset lol")),
             React.createElement("p", null, "Drag the slider to show the value below. See the Code tab for how to format the labels."),
             React.createElement("output", null,

package/dist/packages/slider-thumb/slider-thumb.hydration.test.js

@@ -1,5 +1,5 @@
 import { i18n } from '@lingui/core';
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './slider-thumb.js';
 // Activate i18n before tests (normally done by parent w-slider)

package/dist/packages/step/step.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './step.js';
 describe('w-step React SSR hydration', () => {

package/dist/packages/step-indicator/step-indicator.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './index.js';
 describe('w-step-indicator React SSR hydration', () => {

package/dist/packages/switch/switch.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 // Import the custom element definition
 import './switch.js';

package/dist/packages/tab/tab.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './tab.js';
 describe('w-tab React SSR hydration', () => {

package/dist/packages/tab-panel/tab-panel.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './tab-panel.js';
 describe('w-tab-panel React SSR hydration', () => {

package/dist/packages/tabs/tabs.a11y.test.js

@@ -139,7 +139,7 @@ describe('w-tabs, w-tab-panel, w-tab accessibility (WCAG 2.2)', () => {
             await page.container.querySelector('w-tabs').updateComplete;
             // Query by property since aria-selected is set via ElementInternals (no DOM attribute)
             const selectedTab = [...page.container.querySelectorAll('w-tab')].find((tab) => tab.ariaSelected === 'true');
-            await expect.element(selectedTab).toHaveTextContent("Towers");
+            await expect.element(selectedTab).toHaveTextContent('Towers');
         });
     });
     describe('WCAG 2.1.1 - Keyboard', () => {

package/dist/packages/tabs/tabs.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './index.js';
 describe('w-tabs React SSR hydration', () => {

package/dist/packages/tabs/tabs.test.js

@@ -25,7 +25,7 @@ test('renders the different tab components', async () => {
     const page = render(component);
     // defaults to the first tab if the active property is not set
     await expect.element(page.getByText('And my axe!')).toBeVisible();
-    await expect.element(page.getByText('I am on nobody\'s side')).not.toBeVisible();
+    await expect.element(page.getByText("I am on nobody's side")).not.toBeVisible();
     await expect.element(page.getByText('I am no man')).not.toBeVisible();
 });
 test('can control the visible tab with the active attribute', async () => {
@@ -46,7 +46,7 @@ test('can control the visible tab with the active attribute', async () => {
     </w-tab-panel>
   </w-tabs>`;
     const page = render(component);
-    await expect.element(page.getByText('I am on nobody\'s side')).toBeVisible();
+    await expect.element(page.getByText("I am on nobody's side")).toBeVisible();
     await expect.element(page.getByText('And my axe!')).not.toBeVisible();
     await expect.element(page.getByText('I am no man')).not.toBeVisible();
 });
@@ -75,7 +75,7 @@ test('clicking a tab changes the active attribute, visible tab panel', async ()
     await page.container.querySelectorAll('w-tab-panel')[2].updateComplete;
     await expect.element(page.getByText('I am no man')).toBeVisible();
     await expect.element(page.getByText('And my axe!')).not.toBeVisible();
-    await expect.element(page.getByText('I am on nobody\'s side')).not.toBeVisible();
+    await expect.element(page.getByText("I am on nobody's side")).not.toBeVisible();
 });
 test('switches panel content when panels are initialized with hidden attribute', async () => {
     const component = html `<w-tabs active="tab2">

package/dist/packages/textarea/textarea.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './textarea.js';
 describe('w-textarea React SSR hydration', () => {

package/dist/packages/textfield/textfield.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './textfield.js';
 describe('w-textfield React SSR hydration', () => {

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.10.0-next.3",
+  "version": "2.10.0-next.5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1284,59 +1284,83 @@
           "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",
           "doc-url": "",
           "attributes": [
-            { "name": "label", "value": { "type": "string" } },
+            {
+              "name": "label",
+              "description": "The label displayed above the date input.\n\nUse this to give the datepicker a visible and accessible name.",
+              "value": { "type": "string" }
+            },
             {
               "name": "lang",
-              "description": "Takes precedence over the `<html>` lang attribute.",
+              "description": "The locale used for calendar labels and date formatting.\n\nThis takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "name",
+              "description": "The name submitted with the date value.\n\nUse this when the datepicker belongs to a form and its value should be included in form data.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "value",
+              "description": "The selected date value.\n\nUse an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.",
               "value": { "type": "string" }
             },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
             {
               "name": "header-format",
-              "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+              "description": "The date format used in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
               "value": { "type": "string", "default": "'MMMM yyyy'" }
             },
             {
               "name": "weekday-format",
-              "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+              "description": "The weekday format shown above the calendar grid.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
               "value": { "type": "string", "default": "'EEEEEE'" }
             },
             {
               "name": "day-format",
-              "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
+              "description": "The date format used for calendar day accessible names.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
               "value": { "type": "string", "default": "'PPPP'" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "label", "type": "string" },
+              {
+                "name": "label",
+                "description": "The label displayed above the date input.\n\nUse this to give the datepicker a visible and accessible name.",
+                "type": "string"
+              },
               {
                 "name": "lang",
-                "description": "Takes precedence over the `<html>` lang attribute.",
+                "description": "The locale used for calendar labels and date formatting.\n\nThis takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "The name submitted with the date value.\n\nUse this when the datepicker belongs to a form and its value should be included in form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The selected date value.\n\nUse an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.",
                 "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).",
+                "description": "The date format used 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).",
+                "description": "The weekday format shown above the calendar grid.\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.",
+                "description": "Function used to disable dates in the calendar.\n\nSet this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar.",
                 "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).",
+                "description": "The date format used for calendar day accessible names.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
                 "type": "string"
               },
               { "name": "isCalendarOpen", "type": "boolean" },
@@ -1361,33 +1385,46 @@
         },
         {
           "name": "w-expandable",
-          "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)\n---\n\n\n### **Slots:**\n - **title** - Alternative to the `title` attribute should you need to provide some additional markup.",
+          "description": "Expandable is a layout component used for creating expandable content areas on a page.\n---\n\n\n### **Slots:**\n - **title** - Alternative to the `title` attribute should you need to provide some additional markup.",
           "doc-url": "",
           "attributes": [
             {
               "name": "expanded",
+              "description": "Controls component's expanded state",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "title", "value": { "type": "string" } },
+            {
+              "name": "title",
+              "description": "Component title. Used to display the title value which is always present regardless of whether the component is open or closed.",
+              "value": { "type": "string" }
+            },
             {
               "name": "box",
+              "description": "Will make the expandable a Box",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "bleed",
+              "description": "Will make the expandable full-width on the sm breakpoint size",
               "value": { "type": "boolean", "default": "false" }
             },
             { "name": "button-class", "value": { "type": "string" } },
             { "name": "content-class", "value": { "type": "string" } },
             {
               "name": "no-chevron",
+              "description": "Controls chevron visibility",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "animated",
+              "description": "Will animate the expansion/collapse",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "heading-level", "value": { "type": "number" } },
+            {
+              "name": "heading-level",
+              "description": "Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.",
+              "value": { "type": "number" }
+            },
             {
               "name": "_hasTitle",
               "value": { "type": "boolean", "default": "true" }
@@ -1406,17 +1443,43 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "expanded", "type": "boolean" },
-              { "name": "title", "type": "string" },
-              { "name": "box", "type": "boolean" },
-              { "name": "bleed", "type": "boolean" },
+              {
+                "name": "expanded",
+                "description": "Controls component's expanded state",
+                "type": "boolean"
+              },
+              {
+                "name": "title",
+                "description": "Component title. Used to display the title value which is always present regardless of whether the component is open or closed.",
+                "type": "string"
+              },
+              {
+                "name": "box",
+                "description": "Will make the expandable a Box",
+                "type": "boolean"
+              },
+              {
+                "name": "bleed",
+                "description": "Will make the expandable full-width on the sm breakpoint size",
+                "type": "boolean"
+              },
               { "name": "buttonClass", "type": "string" },
               { "name": "contentClass", "type": "string" },
-              { "name": "noChevron", "type": "boolean" },
-              { "name": "animated", "type": "boolean" },
-              { "name": "headingLevel", "type": "number" },
-              { "name": "_hasTitle", "type": "boolean" },
-              { "name": "_showChevronUp", "type": "boolean" }
+              {
+                "name": "noChevron",
+                "description": "Controls chevron visibility",
+                "type": "boolean"
+              },
+              {
+                "name": "animated",
+                "description": "Will animate the expansion/collapse",
+                "type": "boolean"
+              },
+              {
+                "name": "headingLevel",
+                "description": "Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.",
+                "type": "number"
+              }
             ],
             "events": []
           }