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

package/dist/packages/affix/affix.stories.d.ts

@@ -8,3 +8,6 @@ declare const meta: Meta<typeof args>;
 export default meta;
 type Story = StoryObj<typeof args>;
 export declare const Default: Story;
+export declare const Search: Story;
+export declare const Clear: Story;
+export declare const Icon: Story;

package/dist/packages/affix/affix.stories.js

@@ -23,3 +23,19 @@ export const Default = {
         label: 'kr',
     },
 };
+export const Search = {
+    args: {
+        search: true,
+    },
+};
+export const Clear = {
+    args: {
+        clear: true,
+    },
+};
+export const Icon = {
+    args: {
+        icon: 'AwardMedal',
+        ariaLabel: 'Award Medal',
+    },
+};

package/dist/packages/affix/affix.test.js

@@ -7,3 +7,10 @@ test('renders the affix', async () => {
     const page = render(component);
     await expect.element(page.getByText('kr')).toBeVisible();
 });
+test('renders an icon when icon prop is set', async () => {
+    const page = render(html `<w-affix data-testid="affix" icon="AwardMedal"></w-affix>`);
+    const affix = (await page.getByTestId('affix').element());
+    const icon = affix.shadowRoot?.querySelector('w-icon');
+    expect(icon).toBeTruthy();
+    expect(icon?.getAttribute('name')).toBe('AwardMedal');
+});

package/dist/packages/affix/locales/da/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/affix/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"affix.aria.clearInput\":[\"Ryd input\"],\"affix.aria.search\":[\"Søg\"]}");

package/dist/packages/affix/locales/en/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/affix/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"affix.aria.clearInput\":[\"Clear input\"],\"affix.aria.search\":[\"Search\"]}");

package/dist/packages/affix/locales/fi/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/affix/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"affix.aria.clearInput\":[\"Tyhjennä syöte\"],\"affix.aria.search\":[\"Hae\"]}");

package/dist/packages/affix/locales/nb/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/affix/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"affix.aria.clearInput\":[\"Tøm inndata\"],\"affix.aria.search\":[\"Søk\"]}");

package/dist/packages/affix/locales/sv/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/affix/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"affix.aria.clearInput\":[\"Rensa inmatning\"],\"affix.aria.search\":[\"Sök\"]}");

package/dist/packages/badge/badge.react.stories.d.ts

@@ -4,7 +4,7 @@ import { Badge } from './react';
 declare const _default: {
     title: string;
     component: import("@lit/react").ReactWebComponent<import("./badge").WarpBadge, {}>;
-    render(args: Omit<React.HTMLAttributes<import("./badge").WarpBadge>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "variant" | "position" | "_class"> & {} & Partial<Omit<import("./badge").WarpBadge, keyof HTMLElement>> & React.RefAttributes<import("./badge").WarpBadge>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import("./badge").WarpBadge>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "variant" | "position" | "_class"> & {} & Partial<Omit<import("./badge").WarpBadge, keyof HTMLElement>> & React.RefAttributes<import("./badge").WarpBadge>): React.JSX.Element;
 };
 export default _default;
 export type Story = StoryObj<typeof Badge>;

package/dist/packages/box/box.react.stories.d.ts

@@ -4,7 +4,7 @@ import { Box } from './react';
 declare const _default: {
     title: string;
     component: import("@lit/react").ReactWebComponent<import("./box").WarpBox, {}>;
-    render(args: Omit<React.HTMLAttributes<import("./box").WarpBox>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "info" | "neutral" | "_class" | "bleed" | "bordered" | "_optOutRoleWithDefault"> & {} & Partial<Omit<import("./box").WarpBox, keyof HTMLElement>> & React.RefAttributes<import("./box").WarpBox>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import("./box").WarpBox>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "info" | "neutral" | "_class" | "bleed" | "bordered" | "_optOutRoleWithDefault"> & {} & Partial<Omit<import("./box").WarpBox, keyof HTMLElement>> & React.RefAttributes<import("./box").WarpBox>): React.JSX.Element;
 };
 export default _default;
 export type Story = StoryObj<typeof Box>;

package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Breadcrumbs } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./breadcrumbs").WarpBreadcrumbs>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "_children"> & {} & Partial<Omit<import("./breadcrumbs").WarpBreadcrumbs, keyof HTMLElement>> & React.RefAttributes<import("./breadcrumbs").WarpBreadcrumbs>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import("./breadcrumbs").WarpBreadcrumbs>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "_children"> & {} & Partial<Omit<import("./breadcrumbs").WarpBreadcrumbs, keyof HTMLElement>> & React.RefAttributes<import("./breadcrumbs").WarpBreadcrumbs>): React.JSX.Element;
     component: import("@lit/react").ReactWebComponent<import("./breadcrumbs").WarpBreadcrumbs, {}>;
 };
 export default _default;

package/dist/packages/button/button.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Button } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "rel" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "variant" | "quiet" | "href" | "disabled" | "target" | "fullWidth" | "type" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "updated" | "firstUpdated" | "_handleButtonClick" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>): React.JSX.Element;
     component: import("@lit/react").ReactWebComponent<import("./button").WarpButton, {}>;
 };
 export default _default;

package/dist/packages/card/card.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Card } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./card").WarpCard>, "flat" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "keypressed" | "buttonText" | "selected" | "clickable" | "_containerClasses" | "_outlineClasses" | "_interactiveElement"> & {} & Partial<Omit<import("./card").WarpCard, keyof HTMLElement>> & React.RefAttributes<import("./card").WarpCard>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import("./card").WarpCard>, "flat" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "keypressed" | "buttonText" | "selected" | "clickable" | "_containerClasses" | "_outlineClasses" | "_interactiveElement"> & {} & Partial<Omit<import("./card").WarpCard, keyof HTMLElement>> & React.RefAttributes<import("./card").WarpCard>): React.JSX.Element;
     component: import("@lit/react").ReactWebComponent<import("./card").WarpCard, {}>;
 };
 export default _default;

package/dist/packages/combobox/combobox.react.stories.d.ts

@@ -9,7 +9,7 @@ declare const _default: {
         onChange: string;
         onchange: string;
     }>;
-    render(args: Omit<React.HTMLAttributes<import("./combobox").WarpCombobox>, "value" | "form" | "label" | "name" | "onchange" | "onselect" | "onChange" | "onSelect" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "required" | "optional" | "helpText" | "options" | "placeholder" | "autocomplete" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering"> & {
+    render(args: Omit<React.HTMLAttributes<import("./combobox").WarpCombobox>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "required" | "autocomplete" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "onselect" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onSelect" | "optional" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering"> & {
         onSelect?: (e: Event) => void;
         onselect?: (e: Event) => void;
         onChange?: (e: Event) => void;

package/dist/packages/datepicker/datepicker.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { DatePicker } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./datepicker").WarpDatepicker>, "value" | "input" | "form" | "label" | "name" | "locale" | "onchange" | "onChange" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "month" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {
+    render(args: Omit<React.HTMLAttributes<import("./datepicker").WarpDatepicker>, "value" | "input" | "form" | "label" | "name" | "locale" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "month" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {
         onChange?: (e: Event) => void;
         onchange?: (e: Event) => void;
     } & Partial<Omit<import("./datepicker").WarpDatepicker, keyof HTMLElement>> & React.RefAttributes<import("./datepicker").WarpDatepicker>): React.JSX.Element;

package/dist/packages/expandable/expandable.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Expandable } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./expandable").WarpExpandable>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "buttonClass" | "updated" | "firstUpdated" | "bleed" | "expanded" | "box" | "contentClass" | "noChevron" | "animated" | "headingLevel" | "_hasTitle" | "_showChevronUp" | "_expandableSlot"> & {} & Partial<Omit<import("./expandable").WarpExpandable, keyof HTMLElement>> & React.RefAttributes<import("./expandable").WarpExpandable>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import("./expandable").WarpExpandable>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "render" | "renderOptions" | "buttonClass" | "bleed" | "expanded" | "box" | "contentClass" | "noChevron" | "animated" | "headingLevel" | "_hasTitle" | "_showChevronUp" | "_expandableSlot"> & {} & Partial<Omit<import("./expandable").WarpExpandable, keyof HTMLElement>> & React.RefAttributes<import("./expandable").WarpExpandable>): React.JSX.Element;
     component: import("@lit/react").ReactWebComponent<import("./expandable").WarpExpandable, {}>;
 };
 export default _default;

package/dist/packages/link/link.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Link } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./link").WarpLink>, "small" | "rel" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "variant" | "href" | "disabled" | "target" | "fullWidth" | "firstUpdated"> & {} & Partial<Omit<import("./link").WarpLink, keyof HTMLElement>> & React.RefAttributes<import("./link").WarpLink>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import("./link").WarpLink>, "small" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "firstUpdated" | "render" | "renderOptions" | "target" | "rel" | "variant" | "href" | "fullWidth"> & {} & Partial<Omit<import("./link").WarpLink, keyof HTMLElement>> & React.RefAttributes<import("./link").WarpLink>): React.JSX.Element;
     component: import("@lit/react").ReactWebComponent<import("./link").WarpLink, {}>;
 };
 export default _default;

package/dist/packages/page-indicator/page-indicator.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { PageIndicator } from './react';
 declare const _default: {
     title: string;
-    render: ({ pageCount, selectedPage }: Omit<React.HTMLAttributes<import("./page-indicator").WarpPageIndicator>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "selectedPage" | "pageCount"> & {} & Partial<Omit<import("./page-indicator").WarpPageIndicator, keyof HTMLElement>> & React.RefAttributes<import("./page-indicator").WarpPageIndicator>) => React.JSX.Element;
+    render: ({ pageCount, selectedPage }: Omit<React.HTMLAttributes<import("./page-indicator").WarpPageIndicator>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "selectedPage" | "pageCount"> & {} & Partial<Omit<import("./page-indicator").WarpPageIndicator, keyof HTMLElement>> & React.RefAttributes<import("./page-indicator").WarpPageIndicator>) => React.JSX.Element;
     component: import("@lit/react").ReactWebComponent<import("./page-indicator").WarpPageIndicator, {}>;
 };
 export default _default;

package/dist/packages/pagination/pagination.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Pagination } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./pagination").WarpPagination>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "_currentPage" | "_visiblePages" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
+    render(args: Omit<React.HTMLAttributes<import("./pagination").WarpPagination>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "_currentPage" | "_visiblePages" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
         onPageClick?: (e: Event) => void;
         'onpage-click'?: (e: Event) => void;
     } & Partial<Omit<import("./pagination").WarpPagination, keyof HTMLElement>> & React.RefAttributes<import("./pagination").WarpPagination>): React.JSX.Element;

package/dist/packages/pill/pill.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Pill } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./pill").WarpPill>, "onclick" | "onclose" | "onClick" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "canClose" | "onClose" | "suggestion" | "openSrLabel" | "openAriaLabel" | "closeSrLabel" | "closeAriaLabel" | "openFilterSrText" | "removeFilterSrText" | "_labelClasses" | "_closeClasses" | "_onClick" | "_onClose"> & {
+    render(args: Omit<React.HTMLAttributes<import("./pill").WarpPill>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onclick" | "onclose" | "render" | "renderOptions" | "onClick" | "canClose" | "onClose" | "suggestion" | "openSrLabel" | "openAriaLabel" | "closeSrLabel" | "closeAriaLabel" | "openFilterSrText" | "removeFilterSrText" | "_labelClasses" | "_closeClasses" | "_onClick" | "_onClose"> & {
         onClick?: (e: Event) => void;
         onclick?: (e: Event) => void;
         onClose?: (e: Event) => void;

package/dist/packages/select/select.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Select } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./select").WarpSelect>, "value" | "form" | "label" | "name" | "onchange" | "autoFocus" | "onChange" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "optional" | "helpText" | "readOnly" | "readonly" | "willUpdate" | "formStateRestoreCallback" | "always" | "hint" | "_options" | "_setValue" | "handleKeyDown"> & {
+    render(args: Omit<React.HTMLAttributes<import("./select").WarpSelect>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "readOnly" | "readonly" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "autoFocus" | "onChange" | "optional" | "willUpdate" | "formStateRestoreCallback" | "always" | "hint" | "_options" | "_setValue" | "handleKeyDown"> & {
         onChange?: (e: Event) => void;
         onchange?: (e: Event) => void;
     } & Partial<Omit<import("./select").WarpSelect, keyof HTMLElement>> & React.RefAttributes<import("./select").WarpSelect>): React.JSX.Element;

package/dist/packages/textarea/textarea.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Textarea } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "required" | "reportValidity" | "optional" | "helpText" | "placeholder" | "readOnly" | "readonly" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "setCustomValidity" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
+    render(args: Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "optional" | "setCustomValidity" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
         onBlur?: (e: Event) => void;
         onblur?: (e: Event) => void;
         onChange?: (e: Event) => void;

package/dist/packages/textfield/textfield.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { TextField } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./textfield").WarpTextField>, "value" | "form" | "label" | "mask" | "pattern" | "name" | "size" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "type" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "step" | "required" | "helpText" | "max" | "min" | "minLength" | "maxLength" | "placeholder" | "readOnly" | "readonly" | "autocomplete" | "formatter" | "_hasPrefix" | "_hasSuffix" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange"> & {
+    render(args: Omit<React.HTMLAttributes<import("./textfield").WarpTextField>, "value" | "form" | "label" | "mask" | "pattern" | "name" | "size" | "disabled" | "invalid" | "helpText" | "max" | "min" | "minLength" | "maxLength" | "placeholder" | "readOnly" | "readonly" | "required" | "type" | "step" | "autocomplete" | "formatter" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "_hasPrefix" | "_hasSuffix" | "updated" | "firstUpdated" | "resetFormControl" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput"> & {
         onBlur?: (e: Event) => void;
         onblur?: (e: Event) => void;
         onChange?: (e: Event) => void;

package/dist/packages/textfield/textfield.stories.d.ts

@@ -17,5 +17,8 @@ export declare const ReadOnly: Story;
 export declare const Required: Story;
 export declare const WithSuffix: Story;
 export declare const WithPrefix: Story;
+export declare const WithClearAffixResetTextfield: Story;
+export declare const WithSearchAndClearAffixForm: Story;
+export declare const WithIconAffix: Story;
 export declare const Masking: Story;
 export declare const FormParticipation: Story;

package/dist/packages/textfield/textfield.stories.js

@@ -99,6 +99,51 @@ export const WithPrefix = {
     `;
     },
 };
+export const WithClearAffixResetTextfield = {
+    args: {
+        placeholder: '1 000 000',
+        type: 'text',
+    },
+    render(args) {
+        return html `
+      <w-textfield ${spread(prespread(args))}>
+        <w-affix slot="suffix" clear></w-affix>
+      </w-textfield>
+    `;
+    },
+};
+export const WithSearchAndClearAffixForm = {
+    args: {
+        label: 'Price',
+        placeholder: '1 000 000',
+        type: 'text',
+    },
+    render(args) {
+        return html `
+      <form action="javascript:alert('Form submitted!');" method="GET">
+        <w-textfield ${spread(prespread(args))}>
+          <w-affix slot="prefix" search aria-label="Search"></w-affix>
+          <w-affix slot="suffix" clear aria-label="Clear"></w-affix>
+        </w-textfield>
+      </form>
+    `;
+    },
+};
+export const WithIconAffix = {
+    args: {
+        label: 'Price',
+        placeholder: '1 000 000',
+        type: 'text',
+    },
+    render(args) {
+        return html `
+      <w-textfield ${spread(prespread(args))}>
+        <w-affix slot="prefix" icon="AwardMedal" aria-label="Search"></w-affix>
+        <w-affix slot="suffix" icon="Search" aria-label="Clear"></w-affix>
+      </w-textfield>
+    `;
+    },
+};
 export const Masking = {
     args: {
         label: 'Price',

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.3",
+  "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,18 +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": "clear", "type": "boolean" },
-              { "name": "search", "type": "boolean" },
-              { "name": "label", "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": "Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.",
+                "type": "boolean"
+              },
+              {
+                "name": "search",
+                "description": "Shows a clickable search icon, typically in a prefix slot for search fields.",
+                "type": "boolean"
+              },
+              {
+                "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": []
           }
@@ -1242,80 +1345,6 @@
             "events": [{ "name": "change", "type": "CustomEvent" }]
           }
         },
-        {
-          "name": "w-textfield",
-          "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "disabled",
-              "value": { "type": "boolean", "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-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**",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.9.0-next.4",
+  "version": "2.9.0-next.5",
   "packageManager": "pnpm@10.33.0",
   "description": "Custom elements for Warp",
   "exports": {
@@ -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",