@warp-ds/elements 2.10.0-next.9 → 2.10.0

package/dist/packages/textfield/styles/w-textfield.styles.js

@@ -1,61 +1,63 @@
-import { css } from 'lit';
+import { css } from "lit";
 /* For some reason the pseudoselectors for webkit and moz must be separate blocks :shrug: */
 export const wTextfieldStyles = css `
-  .w-textfield {
-    --_input-padding-top: 12px;
-    --_input-padding-left: 8px;
-    --_input-padding-right: 8px;
-    position: relative;
-  }
-
-  .w-textfield--has-prefix {
-    --_input-padding-left: 40px;
-  }
-
-  .w-textfield--has-suffix {
-    --_input-padding-right: var(--w-prefix-width, 40px);
-  }
-
-  .w-textfield__input-wrapper {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .w-textfield__input-wrapper:focus-within .w-textfield__mask {
-    display: none;
-  }
-
-  /* Hide the native browser controls */
-  input[type="number"] {
-    -moz-appearance:textfield;
-  }
-
-  input[type="number"]::-webkit-inner-spin-button {
-    display: none;
-  }
-
-
-  /* It's supposed to behave like a placeholder, but look like a value. Don't tell the designers 🤫 */
-  input::placeholder {
-    color: var(--w-textfield-placeholder-color-text, var(--w-s-color-text-placeholder));
-  }
-
-  /* Could also consider giving the input mask a background color instead of this */
-  .w-textfield__input-wrapper:has(.w-textfield__mask):not(:focus-within) input {
-    color: transparent;
-  }
-
-  .w-textfield__mask {
-    display: block;
-    border: 1px solid transparent;
-    top: var(--_input-padding-top);
-    left: var(--_input-padding-left);
-    right: var(--_input-padding-right);
-    position: absolute;
-    pointer-events: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    z-index: 1;
-  }
+	.w-textfield {
+		--_input-padding-top: 12px;
+		--_input-padding-left: 8px;
+		--_input-padding-right: 8px;
+		position: relative;
+	}
+
+	.w-textfield--has-prefix {
+		--_input-padding-left: 40px;
+	}
+
+	.w-textfield--has-suffix {
+		--_input-padding-right: var(--w-prefix-width, 40px);
+	}
+
+	.w-textfield__input-wrapper {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.w-textfield__input-wrapper:focus-within .w-textfield__mask {
+		display: none;
+	}
+
+	/* Hide the native browser controls */
+	input[type="number"] {
+		-moz-appearance: textfield;
+	}
+
+	input[type="number"]::-webkit-inner-spin-button {
+		display: none;
+	}
+
+	/* It's supposed to behave like a placeholder, but look like a value. Don't tell the designers 🤫 */
+	input::placeholder {
+		color: var(
+			--w-textfield-placeholder-color-text,
+			var(--w-s-color-text-placeholder)
+		);
+	}
+
+	/* Could also consider giving the input mask a background color instead of this */
+	.w-textfield__input-wrapper:has(.w-textfield__mask):not(:focus-within) input {
+		color: transparent;
+	}
+
+	.w-textfield__mask {
+		display: block;
+		border: 1px solid transparent;
+		top: var(--_input-padding-top);
+		left: var(--_input-padding-left);
+		right: var(--_input-padding-right);
+		position: absolute;
+		pointer-events: none;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		z-index: 1;
+	}
 `;

package/dist/packages/textfield/styles.js

@@ -1,2 +1,2 @@
-import { css } from 'lit';
-export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;
+import { unsafeCSS } from "lit";
+export const styles = unsafeCSS("*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.visible{visibility:visible}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}");

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

@@ -1,10 +1,15 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 declare const WarpTextField_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * A single-line input component used for entering and editing textual or numeric data.
  *
  * @slot suffix - Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).
  * @slot prefix - Use with `<w-affix>` to include a prefix, for example a search icon.
+ *
+ * ## Accessibility Note for Affixes
+ * Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references.
+ * For non-interactive affixes (text labels like currency symbols), consider including that information
+ * in the main label or placeholder text instead for better screen reader support.
  */
 declare class WarpTextField extends WarpTextField_base {
     #private;
@@ -12,11 +17,12 @@ declare class WarpTextField extends WarpTextField_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
+        customElementRegistry?: CustomElementRegistry | null;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
     };
+    constructor();
     /**
      * Keep in mind that using disabled in its current form is an anti-pattern.
      *
@@ -36,46 +42,50 @@ declare class WarpTextField extends WarpTextField_base {
     /**
      * Either a `label` or an `aria-label` must be provided.
      */
-    label: string;
+    label: string | undefined;
     /**
      * Use in combination with `invalid` to show as a validation error message,
      * or on its own to show a help text.
      *
      * @summary Description shown below the input field
      */
-    helpText: string;
+    helpText: string | undefined;
+    /**
+     * Whether to show the optional indicator after the label.
+     */
+    optional: boolean;
     /**
      * Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.
      */
-    size: string;
+    size: string | undefined;
     /**
      * Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).
      */
-    max: number;
+    max: number | undefined;
     /**
      * Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).
      */
-    min: number;
+    min: number | undefined;
     /**
      * @deprecated Use the native `minlength` attribute
      */
-    minLength: number;
+    minLength: number | undefined;
     /**
      * For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required.
      */
-    minlength: number;
+    minlength: number | undefined;
     /**
      * @deprecated Use the native `maxlength` attribute
      */
-    maxLength: number;
+    maxLength: number | undefined;
     /**
      * For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed.
      */
-    maxlength: number;
+    maxlength: number | undefined;
     /**
      * Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern)
      */
-    pattern: string;
+    pattern: string | undefined;
     /**
      * Set a text that is shown in the textfield when it doesn't have a value.
      *
@@ -83,7 +93,7 @@ declare class WarpTextField extends WarpTextField_base {
      *
      * @summary Shown in the textfield when it doesn't have a value
      */
-    placeholder: string;
+    placeholder: string | undefined;
     /**
      * @deprecated Use the native readonly attribute instead.
      */
@@ -99,15 +109,15 @@ declare class WarpTextField extends WarpTextField_base {
     /**
      * The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
      */
-    type: string;
+    type: string | undefined;
     /**
      * Lets you set the current value.
      */
-    value: string;
+    value: string | undefined;
     /**
      * The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.
      */
-    name: string;
+    name: string | undefined;
     /**
      * When used with `number` this attribute forces inputs to be a whole number of `step`.
      *
@@ -116,11 +126,11 @@ declare class WarpTextField extends WarpTextField_base {
      *
      * @summary Forces `number` inputs to be a whole number of `step`
      */
-    step: number;
+    step: number | undefined;
     /**
      * A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.
      */
-    autocomplete?: string;
+    autocomplete?: HTMLInputElement["autocomplete"];
     /**
      * Function to format value when the input field.
      *
@@ -129,30 +139,30 @@ declare class WarpTextField extends WarpTextField_base {
      *
      * @summary Function to format value when the input field
      * @link https://css-tricks.com/input-masking/
-    */
-    formatter: (value: string) => string;
+     */
+    formatter: ((value: string) => string) | undefined;
     /** @internal */
-    mask: HTMLDivElement;
+    mask: HTMLDivElement | undefined;
     /** @internal */
     _hasPrefix: boolean;
     /** @internal */
     _hasSuffix: boolean;
     updated(changedProperties: PropertyValues<this>): void;
-    firstUpdated(changedProps: Map<string, unknown>): void;
-    resetFormControl(): void;
     static styles: import("lit").CSSResult[];
+    firstUpdated(): void;
+    resetFormControl(): void;
     /** @internal */
     get _inputstyles(): string;
     /** @internal */
     get _helptextstyles(): string;
     /** @internal */
-    get _label(): import("lit").TemplateResult<1>;
+    get _label(): import("lit").TemplateResult<1> | undefined;
     /** @internal */
-    get _helpId(): string;
+    get _helpId(): string | undefined;
     /** @internal */
     get _id(): string;
     /** @internal */
-    get _error(): string;
+    get _error(): string | undefined;
     handler(e: Event): void;
     prefixSlotChange(): void;
     suffixSlotChange(): void;

package/dist/packages/textfield/textfield.hydration.test.d.ts

@@ -1 +1 @@
-import './textfield.js';
+import "./textfield.js";

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

@@ -1,42 +1,42 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './textfield.js';
-describe('w-textfield React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./textfield.js";
+describe("w-textfield React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-textfield', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-textfield", {});
         expect(warnings).toEqual([]);
     });
-    test('with label hydrates without warnings', async () => {
-        const warnings = await testHydration('w-textfield', {
-            label: 'Email',
+    test("with label hydrates without warnings", async () => {
+        const warnings = await testHydration("w-textfield", {
+            label: "Email",
         });
         expect(warnings).toEqual([]);
     });
-    test('with value hydrates without warnings', async () => {
-        const warnings = await testHydration('w-textfield', {
-            value: 'test@example.com',
+    test("with value hydrates without warnings", async () => {
+        const warnings = await testHydration("w-textfield", {
+            value: "test@example.com",
         });
         expect(warnings).toEqual([]);
     });
-    test('with disabled state hydrates without warnings', async () => {
-        const warnings = await testHydration('w-textfield', {
+    test("with disabled state hydrates without warnings", async () => {
+        const warnings = await testHydration("w-textfield", {
             disabled: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('with invalid state hydrates without warnings', async () => {
-        const warnings = await testHydration('w-textfield', {
+    test("with invalid state hydrates without warnings", async () => {
+        const warnings = await testHydration("w-textfield", {
             invalid: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('with help text hydrates without warnings', async () => {
-        const warnings = await testHydration('w-textfield', {
-            'help-text': 'Enter your email address',
+    test("with help text hydrates without warnings", async () => {
+        const warnings = await testHydration("w-textfield", {
+            "help-text": "Enter your email address",
         });
         expect(warnings).toEqual([]);
     });