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

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import type { WIcon } from "./packages/icon/icon.ts";
+import type { WarpTextField } from "./packages/textfield/textfield.ts";
 import type { WarpAffix } from "./packages/affix/affix.ts";
 import type { WarpAlert } from "./packages/alert/alert.ts";
 import type { WarpLink } from "./packages/link/link.ts";
@@ -22,7 +23,6 @@ import type { WarpPill } from "./packages/pill/pill.ts";
 import type { WRadio } from "./packages/radio/radio.ts";
 import type { WRadioGroup } from "./packages/radio-group/radio-group.ts";
 import type { WarpSelect } from "./packages/select/select.ts";
-import type { WarpTextField } from "./packages/textfield/textfield.ts";
 import type { WarpSliderThumb } from "./packages/slider-thumb/slider-thumb.ts";
 import type { WarpSlider } from "./packages/slider/slider.ts";
 import type { WarpStep } from "./packages/step/step.ts";
@@ -128,6 +128,125 @@ export type WIconSolidJsProps = {
   textContent?: string | number;
 };
 
+export type WarpTextFieldProps = {
+  /**  */
+  disabled?: WarpTextField["disabled"];
+  /**  */
+  invalid?: WarpTextField["invalid"];
+  /**  */
+  id?: WarpTextField["id"];
+  /**  */
+  label?: WarpTextField["label"];
+  /**  */
+  "help-text"?: WarpTextField["helpText"];
+  /**  */
+  helpText?: WarpTextField["helpText"];
+  /**  */
+  size?: WarpTextField["size"];
+  /**  */
+  max?: WarpTextField["max"];
+  /**  */
+  min?: WarpTextField["min"];
+  /**  */
+  "min-length"?: WarpTextField["minLength"];
+  /**  */
+  minLength?: WarpTextField["minLength"];
+  /**  */
+  "max-length"?: WarpTextField["maxLength"];
+  /**  */
+  maxLength?: WarpTextField["maxLength"];
+  /**  */
+  pattern?: WarpTextField["pattern"];
+  /**  */
+  placeholder?: WarpTextField["placeholder"];
+  /** @deprecated Use the native readonly attribute instead.  */
+  "read-only"?: WarpTextField["readOnly"];
+  /** @deprecated Use the native readonly attribute instead.  */
+  readOnly?: WarpTextField["readOnly"];
+  /**  */
+  readonly?: WarpTextField["readonly"];
+  /**  */
+  required?: WarpTextField["required"];
+  /**  */
+  type?: WarpTextField["type"];
+  /**  */
+  value?: WarpTextField["value"];
+  /**  */
+  name?: WarpTextField["name"];
+  /**  */
+  step?: WarpTextField["step"];
+  /**  */
+  autocomplete?: WarpTextField["autocomplete"];
+  /**  */
+  formatter?: WarpTextField["formatter"];
+  /**  */
+  _hasPrefix?: WarpTextField["_hasPrefix"];
+  /**  */
+  _hasSuffix?: WarpTextField["_hasSuffix"];
+};
+
+export type WarpTextFieldSolidJsProps = {
+  /**  */
+  "prop:disabled"?: WarpTextField["disabled"];
+  /**  */
+  "prop:invalid"?: WarpTextField["invalid"];
+  /**  */
+  "prop:id"?: WarpTextField["id"];
+  /**  */
+  "prop:label"?: WarpTextField["label"];
+  /**  */
+  "attr:help-text"?: WarpTextField["helpText"];
+  /**  */
+  "prop:helpText"?: WarpTextField["helpText"];
+  /**  */
+  "prop:size"?: WarpTextField["size"];
+  /**  */
+  "prop:max"?: WarpTextField["max"];
+  /**  */
+  "prop:min"?: WarpTextField["min"];
+  /**  */
+  "attr:min-length"?: WarpTextField["minLength"];
+  /**  */
+  "prop:minLength"?: WarpTextField["minLength"];
+  /**  */
+  "attr:max-length"?: WarpTextField["maxLength"];
+  /**  */
+  "prop:maxLength"?: WarpTextField["maxLength"];
+  /**  */
+  "prop:pattern"?: WarpTextField["pattern"];
+  /**  */
+  "prop:placeholder"?: WarpTextField["placeholder"];
+  /** @deprecated Use the native readonly attribute instead.  */
+  "bool:read-only"?: WarpTextField["readOnly"];
+  /** @deprecated Use the native readonly attribute instead.  */
+  "prop:readOnly"?: WarpTextField["readOnly"];
+  /**  */
+  "prop:readonly"?: WarpTextField["readonly"];
+  /**  */
+  "prop:required"?: WarpTextField["required"];
+  /**  */
+  "prop:type"?: WarpTextField["type"];
+  /**  */
+  "prop:value"?: WarpTextField["value"];
+  /**  */
+  "prop:name"?: WarpTextField["name"];
+  /**  */
+  "prop:step"?: WarpTextField["step"];
+  /**  */
+  "prop:autocomplete"?: WarpTextField["autocomplete"];
+  /**  */
+  "prop:formatter"?: WarpTextField["formatter"];
+  /**  */
+  "prop:_hasPrefix"?: WarpTextField["_hasPrefix"];
+  /**  */
+  "prop:_hasSuffix"?: WarpTextField["_hasSuffix"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
 export type WarpAffixProps = {
   /**  */
   "aria-label"?: WarpAffix["ariaLabel"];
@@ -137,12 +256,12 @@ export type WarpAffixProps = {
 
 Set an `aria-label` that explains the action when using this. */
   clear?: WarpAffix["clear"];
-  /** Add this property to render a clickable Warp search icon.
-
-Set an `aria-label` that explains the action when using this. */
+  /** Add this property to render a clickable Warp search icon. */
   search?: WarpAffix["search"];
   /**  */
   label?: WarpAffix["label"];
+  /**  */
+  icon?: WarpAffix["icon"];
 };
 
 export type WarpAffixSolidJsProps = {
@@ -154,12 +273,12 @@ export type WarpAffixSolidJsProps = {
 
 Set an `aria-label` that explains the action when using this. */
   "prop:clear"?: WarpAffix["clear"];
-  /** Add this property to render a clickable Warp search icon.
-
-Set an `aria-label` that explains the action when using this. */
+  /** Add this property to render a clickable Warp search icon. */
   "prop:search"?: WarpAffix["search"];
   /**  */
   "prop:label"?: WarpAffix["label"];
+  /**  */
+  "prop:icon"?: WarpAffix["icon"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1293,125 +1412,6 @@ export type WarpSelectSolidJsProps = {
   textContent?: string | number;
 };
 
-export type WarpTextFieldProps = {
-  /**  */
-  disabled?: WarpTextField["disabled"];
-  /**  */
-  invalid?: WarpTextField["invalid"];
-  /**  */
-  id?: WarpTextField["id"];
-  /**  */
-  label?: WarpTextField["label"];
-  /**  */
-  "help-text"?: WarpTextField["helpText"];
-  /**  */
-  helpText?: WarpTextField["helpText"];
-  /**  */
-  size?: WarpTextField["size"];
-  /**  */
-  max?: WarpTextField["max"];
-  /**  */
-  min?: WarpTextField["min"];
-  /**  */
-  "min-length"?: WarpTextField["minLength"];
-  /**  */
-  minLength?: WarpTextField["minLength"];
-  /**  */
-  "max-length"?: WarpTextField["maxLength"];
-  /**  */
-  maxLength?: WarpTextField["maxLength"];
-  /**  */
-  pattern?: WarpTextField["pattern"];
-  /**  */
-  placeholder?: WarpTextField["placeholder"];
-  /** @deprecated Use the native readonly attribute instead.  */
-  "read-only"?: WarpTextField["readOnly"];
-  /** @deprecated Use the native readonly attribute instead.  */
-  readOnly?: WarpTextField["readOnly"];
-  /**  */
-  readonly?: WarpTextField["readonly"];
-  /**  */
-  required?: WarpTextField["required"];
-  /**  */
-  type?: WarpTextField["type"];
-  /**  */
-  value?: WarpTextField["value"];
-  /**  */
-  name?: WarpTextField["name"];
-  /**  */
-  step?: WarpTextField["step"];
-  /**  */
-  autocomplete?: WarpTextField["autocomplete"];
-  /**  */
-  formatter?: WarpTextField["formatter"];
-  /**  */
-  _hasPrefix?: WarpTextField["_hasPrefix"];
-  /**  */
-  _hasSuffix?: WarpTextField["_hasSuffix"];
-};
-
-export type WarpTextFieldSolidJsProps = {
-  /**  */
-  "prop:disabled"?: WarpTextField["disabled"];
-  /**  */
-  "prop:invalid"?: WarpTextField["invalid"];
-  /**  */
-  "prop:id"?: WarpTextField["id"];
-  /**  */
-  "prop:label"?: WarpTextField["label"];
-  /**  */
-  "attr:help-text"?: WarpTextField["helpText"];
-  /**  */
-  "prop:helpText"?: WarpTextField["helpText"];
-  /**  */
-  "prop:size"?: WarpTextField["size"];
-  /**  */
-  "prop:max"?: WarpTextField["max"];
-  /**  */
-  "prop:min"?: WarpTextField["min"];
-  /**  */
-  "attr:min-length"?: WarpTextField["minLength"];
-  /**  */
-  "prop:minLength"?: WarpTextField["minLength"];
-  /**  */
-  "attr:max-length"?: WarpTextField["maxLength"];
-  /**  */
-  "prop:maxLength"?: WarpTextField["maxLength"];
-  /**  */
-  "prop:pattern"?: WarpTextField["pattern"];
-  /**  */
-  "prop:placeholder"?: WarpTextField["placeholder"];
-  /** @deprecated Use the native readonly attribute instead.  */
-  "bool:read-only"?: WarpTextField["readOnly"];
-  /** @deprecated Use the native readonly attribute instead.  */
-  "prop:readOnly"?: WarpTextField["readOnly"];
-  /**  */
-  "prop:readonly"?: WarpTextField["readonly"];
-  /**  */
-  "prop:required"?: WarpTextField["required"];
-  /**  */
-  "prop:type"?: WarpTextField["type"];
-  /**  */
-  "prop:value"?: WarpTextField["value"];
-  /**  */
-  "prop:name"?: WarpTextField["name"];
-  /**  */
-  "prop:step"?: WarpTextField["step"];
-  /**  */
-  "prop:autocomplete"?: WarpTextField["autocomplete"];
-  /**  */
-  "prop:formatter"?: WarpTextField["formatter"];
-  /**  */
-  "prop:_hasPrefix"?: WarpTextField["_hasPrefix"];
-  /**  */
-  "prop:_hasSuffix"?: WarpTextField["_hasSuffix"];
-
-  /** Set the innerHTML of the element */
-  innerHTML?: string;
-  /** Set the textContent of the element */
-  textContent?: string | number;
-};
-
 export type WarpSliderThumbProps = {
   /**  */
   "aria-label"?: WarpSliderThumb["ariaLabel"];
@@ -1878,6 +1878,52 @@ export type CustomElements = {
    */
   "w-icon": Partial<WIconProps & BaseProps<WIcon> & BaseEvents>;
 
+  /**
+   * A single line text input element.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `disabled`: undefined
+   * - `invalid`: undefined
+   * - `id`: undefined
+   * - `label`: undefined
+   * - `help-text`/`helpText`: undefined
+   * - `size`: undefined
+   * - `max`: undefined
+   * - `min`: undefined
+   * - `min-length`/`minLength`: undefined
+   * - `max-length`/`maxLength`: undefined
+   * - `pattern`: undefined
+   * - `placeholder`: undefined
+   * - `read-only`/`readOnly`: undefined
+   * - `readonly`: undefined
+   * - `required`: undefined
+   * - `type`: undefined
+   * - `value`: undefined
+   * - `name`: undefined
+   * - `step`: undefined
+   * - `autocomplete`: undefined
+   * - `formatter`: undefined (property only)
+   * - `_hasPrefix`: undefined (property only)
+   * - `_hasSuffix`: undefined (property only)
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   * - `handler(e: Event) => void`: undefined
+   * - `prefixSlotChange() => void`: undefined
+   * - `suffixSlotChange() => void`: undefined
+   */
+  "w-textfield": Partial<
+    WarpTextFieldProps & BaseProps<WarpTextField> & BaseEvents
+  >;
+
   /**
    * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
    *
@@ -1892,9 +1938,9 @@ export type CustomElements = {
    *
    * Set an `aria-label` that explains the action when using this.
    * - `search`: Add this property to render a clickable Warp search icon.
-   *
-   * Set an `aria-label` that explains the action when using this.
    * - `label`: undefined
+   * - `icon`: undefined
+   * - `_icon`: undefined (property only) (readonly)
    */
   "w-affix": Partial<WarpAffixProps & BaseProps<WarpAffix> & BaseEvents>;
 
@@ -2525,52 +2571,6 @@ export type CustomElements = {
    */
   "w-select": Partial<WarpSelectProps & BaseProps<WarpSelect> & BaseEvents>;
 
-  /**
-   * A single line text input element.
-   *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
-   *
-   * ## Attributes & Properties
-   *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
-   *
-   * - `disabled`: undefined
-   * - `invalid`: undefined
-   * - `id`: undefined
-   * - `label`: undefined
-   * - `help-text`/`helpText`: undefined
-   * - `size`: undefined
-   * - `max`: undefined
-   * - `min`: undefined
-   * - `min-length`/`minLength`: undefined
-   * - `max-length`/`maxLength`: undefined
-   * - `pattern`: undefined
-   * - `placeholder`: undefined
-   * - `read-only`/`readOnly`: undefined
-   * - `readonly`: undefined
-   * - `required`: undefined
-   * - `type`: undefined
-   * - `value`: undefined
-   * - `name`: undefined
-   * - `step`: undefined
-   * - `autocomplete`: undefined
-   * - `formatter`: undefined (property only)
-   * - `_hasPrefix`: undefined (property only)
-   * - `_hasSuffix`: undefined (property only)
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `resetFormControl() => void`: undefined
-   * - `handler(e: Event) => void`: undefined
-   * - `prefixSlotChange() => void`: undefined
-   * - `suffixSlotChange() => void`: undefined
-   */
-  "w-textfield": Partial<
-    WarpTextFieldProps & BaseProps<WarpTextField> & BaseEvents
-  >;
-
   /**
    * Component to place inside a `<w-slider>`.
    *
@@ -2853,6 +2853,55 @@ export type CustomElementsSolidJs = {
     WIconProps & WIconSolidJsProps & BaseProps<WIcon> & BaseEvents
   >;
 
+  /**
+   * A single line text input element.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `disabled`: undefined
+   * - `invalid`: undefined
+   * - `id`: undefined
+   * - `label`: undefined
+   * - `help-text`/`helpText`: undefined
+   * - `size`: undefined
+   * - `max`: undefined
+   * - `min`: undefined
+   * - `min-length`/`minLength`: undefined
+   * - `max-length`/`maxLength`: undefined
+   * - `pattern`: undefined
+   * - `placeholder`: undefined
+   * - `read-only`/`readOnly`: undefined
+   * - `readonly`: undefined
+   * - `required`: undefined
+   * - `type`: undefined
+   * - `value`: undefined
+   * - `name`: undefined
+   * - `step`: undefined
+   * - `autocomplete`: undefined
+   * - `formatter`: undefined (property only)
+   * - `_hasPrefix`: undefined (property only)
+   * - `_hasSuffix`: undefined (property only)
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   * - `handler(e: Event) => void`: undefined
+   * - `prefixSlotChange() => void`: undefined
+   * - `suffixSlotChange() => void`: undefined
+   */
+  "w-textfield": Partial<
+    WarpTextFieldProps &
+      WarpTextFieldSolidJsProps &
+      BaseProps<WarpTextField> &
+      BaseEvents
+  >;
+
   /**
    * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
    *
@@ -2867,9 +2916,9 @@ export type CustomElementsSolidJs = {
    *
    * Set an `aria-label` that explains the action when using this.
    * - `search`: Add this property to render a clickable Warp search icon.
-   *
-   * Set an `aria-label` that explains the action when using this.
    * - `label`: undefined
+   * - `icon`: undefined
+   * - `_icon`: undefined (property only) (readonly)
    */
   "w-affix": Partial<
     WarpAffixProps & WarpAffixSolidJsProps & BaseProps<WarpAffix> & BaseEvents
@@ -3563,55 +3612,6 @@ export type CustomElementsSolidJs = {
       BaseEvents
   >;
 
-  /**
-   * A single line text input element.
-   *
-   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
-   *
-   * ## Attributes & Properties
-   *
-   * Component attributes and properties that can be applied to the element or by using JavaScript.
-   *
-   * - `disabled`: undefined
-   * - `invalid`: undefined
-   * - `id`: undefined
-   * - `label`: undefined
-   * - `help-text`/`helpText`: undefined
-   * - `size`: undefined
-   * - `max`: undefined
-   * - `min`: undefined
-   * - `min-length`/`minLength`: undefined
-   * - `max-length`/`maxLength`: undefined
-   * - `pattern`: undefined
-   * - `placeholder`: undefined
-   * - `read-only`/`readOnly`: undefined
-   * - `readonly`: undefined
-   * - `required`: undefined
-   * - `type`: undefined
-   * - `value`: undefined
-   * - `name`: undefined
-   * - `step`: undefined
-   * - `autocomplete`: undefined
-   * - `formatter`: undefined (property only)
-   * - `_hasPrefix`: undefined (property only)
-   * - `_hasSuffix`: undefined (property only)
-   *
-   * ## Methods
-   *
-   * Methods that can be called to access component functionality.
-   *
-   * - `resetFormControl() => void`: undefined
-   * - `handler(e: Event) => void`: undefined
-   * - `prefixSlotChange() => void`: undefined
-   * - `suffixSlotChange() => void`: undefined
-   */
-  "w-textfield": Partial<
-    WarpTextFieldProps &
-      WarpTextFieldSolidJsProps &
-      BaseProps<WarpTextField> &
-      BaseEvents
-  >;
-
   /**
    * Component to place inside a `<w-slider>`.
    *

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

@@ -1,39 +1,43 @@
 import { LitElement } from 'lit';
 import '../icon/icon.js';
+declare const WarpAffix_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
  *
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
  */
-declare class WarpAffix extends LitElement {
+declare class WarpAffix extends WarpAffix_base {
     /**
-     * @summary
-     * @description
+     * @summary Accessible label for icon-button variants.
+     * @description Used to override the default `aria-label`s for the internal button when `search` or `clear` is enabled.
      */
-    ariaLabel: string;
+    ariaLabel: string | null;
     /**
      * Add this property to render a clickable Warp close icon.
      *
      * Set an `aria-label` that explains the action when using this.
-     
-     * @summary
-     * @description
+     *
+     * @summary Renders a clear icon button.
+     * @description Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.
     */
     clear: boolean;
     /**
      * Add this property to render a clickable Warp search icon.
      *
-     * Set an `aria-label` that explains the action when using this.
-     
-     * @summary
-     * @description
+     * @summary Renders a search icon button.
+     * @description Shows a clickable search icon, typically in a prefix slot for search fields.
     */
     search: boolean;
     /**
-     * @summary
-     * @description
+     * @summary Text label shown as prefix/suffix content.
+     * @description Displays plain text such as a currency or unit label (for example `kr` or `%`) instead of an icon button.
      */
     label: string;
+    /**
+     * @summary Icon name rendered as prefix/suffix content.
+     * @description Displays a non-interactive `w-icon` in the affix area using the provided icon name (for example `Search` or `Close`) instead of text.
+     */
+    icon: string | null;
     static styles: import("lit").CSSResult[];
     /** @internal */
     get _classBase(): {
@@ -45,13 +49,18 @@ declare class WarpAffix extends LitElement {
     /** @internal */
     get _classes(): string;
     /** @internal */
+    resetContainingTextField(e: Event): void;
+    /** @internal */
+    submitContainingForm(e: Event): void;
+    /** @internal */
     get _searchButton(): import("lit").TemplateResult<1>;
     /** @internal */
     get _clearButton(): import("lit").TemplateResult<1>;
+    get _icon(): "" | import("lit").TemplateResult<1>;
     /** @internal */
     get _text(): import("lit").TemplateResult<1>;
     /** @internal */
-    get _markup(): import("lit").TemplateResult<1>;
+    get _markup(): "" | import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }
 export { WarpAffix };