@warp-ds/elements 2.6.0 → 2.7.0-next.2

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

@@ -58,9 +58,13 @@ describe('WCAG 4.1.2 - Name, Role, Value', () => {
       `);
         const completedStep = document.querySelector('w-step[completed]');
         expect(completedStep).toBeTruthy();
-        await expect.poll(() => completedStep?.shadowRoot?.querySelector('[aria-label="Step indicator completed circle"]')).toBeTruthy();
+        await expect
+            .poll(() => completedStep?.shadowRoot?.querySelector('[aria-label="Step indicator completed circle"]'))
+            .toBeTruthy();
         const incompleteStep = document.querySelector('w-step:not([completed])');
         expect(incompleteStep).toBeTruthy();
-        await expect.poll(() => incompleteStep?.shadowRoot?.querySelector('[aria-label="Step indicator completed circle"]')).toBeFalsy();
+        await expect
+            .poll(() => incompleteStep?.shadowRoot?.querySelector('[aria-label="Step indicator completed circle"]'))
+            .toBeFalsy();
     });
 });

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

@@ -1,7 +1,7 @@
+import { i18n } from '@lingui/core';
 import { html } from 'lit';
 import { describe, expect, test } from 'vitest';
 import { render } from 'vitest-browser-lit';
-import { i18n } from '@lingui/core';
 import { messages } from './locales/en/messages.mjs';
 import './textarea.js';
 // Initialize i18n with English locale for tests

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

@@ -165,7 +165,8 @@ test('restores original help text when validation passes', async () => {
     await expect.poll(() => wTextArea.invalid).toBe(true);
     await expect.poll(() => wTextArea.helpText).not.toBe('Enter your message');
     // Fill in a value
-    await textarea.fill('Hello');
+    wTextArea.value = 'Hello';
+    await wTextArea.updateComplete;
     // Wait for value + validity to update, then restore original help text
     await expect.poll(() => wTextArea.value).toBe('Hello');
     await expect.poll(() => wTextArea.checkValidity()).toBe(true);

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

@@ -34,6 +34,12 @@ export const wTextfieldStyles = css `
     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;

package/dist/packages/textfield/textfield.js

@@ -1,4 +1,4 @@
-var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{throw TypeError(a)};var d=(a,e,r,o)=>{for(var l=o>1?void 0:o?ae(e,r):e,u=a.length-1,w;u>=0;u--)(w=a[u])&&(l=(o?w(e,r,l):w(l))||l);return o&&l&&te(e,r,l),l};var U=(a,e,r)=>e.has(a)||R("Cannot "+r);var H=(a,e,r)=>(U(a,e,"read from private field"),r?r.call(a):e.get(a)),D=(a,e,r)=>e.has(a)?R("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(a):e.set(a,r),G=(a,e,r,o)=>(U(a,e,"write to private field"),o?o.call(a,r):e.set(a,r),r);var j=function(){for(var a=[],e=arguments.length;e--;)a[e]=arguments[e];return a.reduce(function(r,o){return r.concat(typeof o=="string"?o:Array.isArray(o)?j.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(l){return o[l]?l:""}):"")},[]).join(" ")};var n=function(a,e,r,o){if(r==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?a!==e||!o:!e.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?o:r==="a"?o.call(a):o?o.value:e.get(a)},h=function(a,e,r,o,l){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!l)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?a!==e||!l:!e.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?l.call(a,r):l?l.value=r:e.set(a,r),r};function J(a){var e,r,o,l,u,w,k,re,_,A,F,L,E,z,Y,f,X,O,Z;class oe extends a{constructor(...t){var i,b,p;super(...t),e.add(this),this.internals=this.attachInternals(),r.set(this,!1),o.set(this,!1),l.set(this,!1),u.set(this,void 0),w.set(this,void 0),k.set(this,!0),_.set(this,""),A.set(this,()=>{h(this,l,!0,"f"),h(this,r,!0,"f"),n(this,e,"m",f).call(this)}),F.set(this,()=>{h(this,r,!1,"f"),n(this,e,"m",X).call(this,this.shouldFormValueUpdate()?n(this,_,"f"):""),!this.validity.valid&&n(this,l,"f")&&h(this,o,!0,"f");let m=n(this,e,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(m?this.internals.validationMessage:"")}),L.set(this,()=>{var m;n(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),h(this,k,!1,"f")),h(this,l,!0,"f"),h(this,o,!0,"f"),n(this,e,"m",f).call(this),(m=this===null||this===void 0?void 0:this.validationMessageCallback)===null||m===void 0||m.call(this,this.showError?this.internals.validationMessage:"")}),E.set(this,void 0),z.set(this,!1),Y.set(this,Promise.resolve()),(i=this.addEventListener)===null||i===void 0||i.call(this,"focus",n(this,A,"f")),(b=this.addEventListener)===null||b===void 0||b.call(this,"blur",n(this,F,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"invalid",n(this,L,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let t=this.validators.map(p=>p.attribute).flat(),i=super.observedAttributes||[];return[...new Set([...i,...t])]}static getValidator(t){return this.validators.find(i=>i.attribute===t)||null}static getValidators(t){return this.validators.filter(i=>{var b;if(i.attribute===t||!((b=i.attribute)===null||b===void 0)&&b.includes(t))return!0})}get form(){return this.internals.form}get showError(){return n(this,e,"m",f).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(t,i,b){var p;(p=super.attributeChangedCallback)===null||p===void 0||p.call(this,t,i,b);let $=this.constructor.getValidators(t);$!=null&&$.length&&this.validationTarget&&this.setValue(n(this,_,"f"))}setValue(t){var i;h(this,o,!1,"f"),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,""),h(this,_,t,"f");let p=this.shouldFormValueUpdate()?t:null;this.internals.setFormValue(p),n(this,e,"m",X).call(this,p),this.valueChangedCallback&&this.valueChangedCallback(p),n(this,e,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(t=>t(n(this,Y,"f")))}formResetCallback(){var t,i;h(this,l,!1,"f"),h(this,o,!1,"f"),n(this,e,"m",f).call(this),(t=this.resetFormControl)===null||t===void 0||t.call(this),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,n(this,e,"m",f).call(this)?this.validationMessage:"")}}return r=new WeakMap,o=new WeakMap,l=new WeakMap,u=new WeakMap,w=new WeakMap,k=new WeakMap,_=new WeakMap,A=new WeakMap,F=new WeakMap,L=new WeakMap,E=new WeakMap,z=new WeakMap,Y=new WeakMap,e=new WeakSet,re=function(){let t=this.getRootNode(),i=`${this.localName}[name="${this.getAttribute("name")}"]`;return t.querySelectorAll(i)},f=function(){if(this.hasAttribute("disabled"))return!1;let t=n(this,o,"f")||n(this,l,"f")&&!this.validity.valid&&!n(this,r,"f");return t&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),t},X=function(t){let i=this.constructor,b={},p=i.validators,m=[],$=p.some(v=>v.isValid instanceof Promise);n(this,z,"f")||(h(this,Y,new Promise(v=>{h(this,E,v,"f")}),"f"),h(this,z,!0,"f")),n(this,u,"f")&&(n(this,u,"f").abort(),h(this,w,n(this,u,"f"),"f"));let M=new AbortController;h(this,u,M,"f");let S,B=!1;p.length&&(p.forEach(v=>{let N=v.key||"customError",y=v.isValid(this,t,M.signal);y instanceof Promise?(m.push(y),y.then(I=>{I!=null&&(b[N]=!I,S=n(this,e,"m",Z).call(this,v,t),n(this,e,"m",O).call(this,b,S))})):(b[N]=!y,this.validity[N]!==!y&&(B=!0),!y&&!S&&(S=n(this,e,"m",Z).call(this,v,t)))}),Promise.allSettled(m).then(()=>{var v;M!=null&&M.signal.aborted||(h(this,z,!1,"f"),(v=n(this,E,"f"))===null||v===void 0||v.call(this))}),(B||!$)&&n(this,e,"m",O).call(this,b,S))},O=function(t,i){if(this.validationTarget)this.internals.setValidity(t,i,this.validationTarget),h(this,k,!1,"f");else{if(this.internals.setValidity(t,i),this.internals.validity.valid)return;h(this,k,!0,"f")}},Z=function(t,i){if(this.validityCallback){let b=this.validityCallback(t.key||"customError");if(b)return b}return t.message instanceof Function?t.message(this,i):t.message},oe}import{html as P,LitElement as ee,nothing as se}from"lit";import{property as c,query as le}from"lit/decorators.js";import{classMap as de}from"lit/directives/class-map.js";import{ifDefined as g}from"lit/directives/if-defined.js";import{css as K}from"lit";var Q=K`
+var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{throw TypeError(a)};var d=(a,e,r,o)=>{for(var l=o>1?void 0:o?ae(e,r):e,u=a.length-1,w;u>=0;u--)(w=a[u])&&(l=(o?w(e,r,l):w(l))||l);return o&&l&&te(e,r,l),l};var U=(a,e,r)=>e.has(a)||R("Cannot "+r);var H=(a,e,r)=>(U(a,e,"read from private field"),r?r.call(a):e.get(a)),D=(a,e,r)=>e.has(a)?R("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(a):e.set(a,r),G=(a,e,r,o)=>(U(a,e,"write to private field"),o?o.call(a,r):e.set(a,r),r);var j=function(){for(var a=[],e=arguments.length;e--;)a[e]=arguments[e];return a.reduce(function(r,o){return r.concat(typeof o=="string"?o:Array.isArray(o)?j.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(l){return o[l]?l:""}):"")},[]).join(" ")};var n=function(a,e,r,o){if(r==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?a!==e||!o:!e.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?o:r==="a"?o.call(a):o?o.value:e.get(a)},h=function(a,e,r,o,l){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!l)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?a!==e||!l:!e.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?l.call(a,r):l?l.value=r:e.set(a,r),r};function J(a){var e,r,o,l,u,w,k,re,_,A,F,L,E,z,Y,f,X,O,Z;class oe extends a{constructor(...t){var i,b,p;super(...t),e.add(this),this.internals=this.attachInternals(),r.set(this,!1),o.set(this,!1),l.set(this,!1),u.set(this,void 0),w.set(this,void 0),k.set(this,!0),_.set(this,""),A.set(this,()=>{h(this,l,!0,"f"),h(this,r,!0,"f"),n(this,e,"m",f).call(this)}),F.set(this,()=>{h(this,r,!1,"f"),n(this,e,"m",X).call(this,this.shouldFormValueUpdate()?n(this,_,"f"):""),!this.validity.valid&&n(this,l,"f")&&h(this,o,!0,"f");let m=n(this,e,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(m?this.internals.validationMessage:"")}),L.set(this,()=>{var m;n(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),h(this,k,!1,"f")),h(this,l,!0,"f"),h(this,o,!0,"f"),n(this,e,"m",f).call(this),(m=this===null||this===void 0?void 0:this.validationMessageCallback)===null||m===void 0||m.call(this,this.showError?this.internals.validationMessage:"")}),E.set(this,void 0),z.set(this,!1),Y.set(this,Promise.resolve()),(i=this.addEventListener)===null||i===void 0||i.call(this,"focus",n(this,A,"f")),(b=this.addEventListener)===null||b===void 0||b.call(this,"blur",n(this,F,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"invalid",n(this,L,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let t=this.validators.map(p=>p.attribute).flat(),i=super.observedAttributes||[];return[...new Set([...i,...t])]}static getValidator(t){return this.validators.find(i=>i.attribute===t)||null}static getValidators(t){return this.validators.filter(i=>{var b;if(i.attribute===t||!((b=i.attribute)===null||b===void 0)&&b.includes(t))return!0})}get form(){return this.internals.form}get showError(){return n(this,e,"m",f).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(t,i,b){var p;(p=super.attributeChangedCallback)===null||p===void 0||p.call(this,t,i,b);let $=this.constructor.getValidators(t);$!=null&&$.length&&this.validationTarget&&this.setValue(n(this,_,"f"))}setValue(t){var i;h(this,o,!1,"f"),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,""),h(this,_,t,"f");let p=this.shouldFormValueUpdate()?t:null;this.internals.setFormValue(p),n(this,e,"m",X).call(this,p),this.valueChangedCallback&&this.valueChangedCallback(p),n(this,e,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(t=>t(n(this,Y,"f")))}formResetCallback(){var t,i;h(this,l,!1,"f"),h(this,o,!1,"f"),n(this,e,"m",f).call(this),(t=this.resetFormControl)===null||t===void 0||t.call(this),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,n(this,e,"m",f).call(this)?this.validationMessage:"")}}return r=new WeakMap,o=new WeakMap,l=new WeakMap,u=new WeakMap,w=new WeakMap,k=new WeakMap,_=new WeakMap,A=new WeakMap,F=new WeakMap,L=new WeakMap,E=new WeakMap,z=new WeakMap,Y=new WeakMap,e=new WeakSet,re=function(){let t=this.getRootNode(),i=`${this.localName}[name="${this.getAttribute("name")}"]`;return t.querySelectorAll(i)},f=function(){if(this.hasAttribute("disabled"))return!1;let t=n(this,o,"f")||n(this,l,"f")&&!this.validity.valid&&!n(this,r,"f");return t&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),t},X=function(t){let i=this.constructor,b={},p=i.validators,m=[],$=p.some(v=>v.isValid instanceof Promise);n(this,z,"f")||(h(this,Y,new Promise(v=>{h(this,E,v,"f")}),"f"),h(this,z,!0,"f")),n(this,u,"f")&&(n(this,u,"f").abort(),h(this,w,n(this,u,"f"),"f"));let M=new AbortController;h(this,u,M,"f");let S,B=!1;p.length&&(p.forEach(v=>{let I=v.key||"customError",y=v.isValid(this,t,M.signal);y instanceof Promise?(m.push(y),y.then(N=>{N!=null&&(b[I]=!N,S=n(this,e,"m",Z).call(this,v,t),n(this,e,"m",O).call(this,b,S))})):(b[I]=!y,this.validity[I]!==!y&&(B=!0),!y&&!S&&(S=n(this,e,"m",Z).call(this,v,t)))}),Promise.allSettled(m).then(()=>{var v;M!=null&&M.signal.aborted||(h(this,z,!1,"f"),(v=n(this,E,"f"))===null||v===void 0||v.call(this))}),(B||!$)&&n(this,e,"m",O).call(this,b,S))},O=function(t,i){if(this.validationTarget)this.internals.setValidity(t,i,this.validationTarget),h(this,k,!1,"f");else{if(this.internals.setValidity(t,i),this.internals.validity.valid)return;h(this,k,!0,"f")}},Z=function(t,i){if(this.validityCallback){let b=this.validityCallback(t.key||"customError");if(b)return b}return t.message instanceof Function?t.message(this,i):t.message},oe}import{html as P,LitElement as ee,nothing as se}from"lit";import{property as c,query as le}from"lit/decorators.js";import{classMap as de}from"lit/directives/class-map.js";import{ifDefined as g}from"lit/directives/if-defined.js";import{css as K}from"lit";var Q=K`
   *,
   :before,
   :after {
@@ -2471,6 +2471,12 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{th
     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;