@warp-ds/elements 2.8.1 → 2.8.2-next.2

package/dist/packages/slider/slider.test.js

@@ -411,3 +411,44 @@ test('required slider passes required state to thumb', async () => {
     // Verify the slider has required attribute in HTML
     expect(slider.hasAttribute('required')).toBe(true);
 });
+// Hydration mismatch prevention tests
+test('aria-label is not set as host attribute (to avoid hydration mismatch)', async () => {
+    const component = html `
+    <w-slider label="Slider label" min="0" max="100">
+      <w-slider-thumb name="value"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const slider = document.querySelector('w-slider');
+    await slider.updateComplete;
+    const thumb = document.querySelector('w-slider-thumb');
+    await thumb.updateComplete;
+    // aria-label should NOT be a host attribute (to avoid hydration mismatch)
+    expect(thumb.hasAttribute('aria-label')).toBe(false);
+    // But the property should be set by the parent
+    expect(thumb.ariaLabel).toBe('Slider label');
+    // And the internal input should have the aria-label
+    const rangeInput = thumb.shadowRoot.querySelector('input[type="range"]');
+    expect(rangeInput.getAttribute('aria-label')).toBe('Slider label');
+});
+test('aria-description is not set as host attribute (to avoid hydration mismatch)', async () => {
+    const component = html `
+    <w-slider label="Range" min="0" max="100">
+      <w-slider-thumb slot="from" name="from"></w-slider-thumb>
+      <w-slider-thumb slot="to" name="to"></w-slider-thumb>
+    </w-slider>
+  `;
+    render(component);
+    const slider = document.querySelector('w-slider');
+    await slider.updateComplete;
+    const fromThumb = document.querySelector('w-slider-thumb[slot="from"]');
+    const toThumb = document.querySelector('w-slider-thumb[slot="to"]');
+    await fromThumb.updateComplete;
+    await toThumb.updateComplete;
+    // aria-description should NOT be a host attribute (to avoid hydration mismatch)
+    expect(fromThumb.hasAttribute('aria-description')).toBe(false);
+    expect(toThumb.hasAttribute('aria-description')).toBe(false);
+    // But the properties should be set
+    expect(fromThumb.ariaDescription).toBeTruthy();
+    expect(toThumb.ariaDescription).toBeTruthy();
+});

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

@@ -2770,5 +2770,5 @@ Please compile your catalog first.
           ${this.ariaDescriptionText}
         </span>
       </div>
-    `}};B=new WeakMap,b=new WeakSet,W=function(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()},ee=function(){this._showTooltip=!1},pe=function(){this.range&&(this.value===""?this.range.value=this.boundaryValue:this.value&&(this.range.value=this.value))},Y=function(r){this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:r,slot:this.slot}}))},re=async function(r,t){let a=Number.parseInt(r);if(this.openEnded&&!t&&this.step&&!(this.slot==="to"&&a>=Number(this.max)-1||this.slot==="from"&&a<=Number(this.min)+1)){let k=1/this.step;a=Math.round(a*k)/k,r=a.toString()}let s=Number.parseInt(this.max),n=Number.parseInt(this.min);if(!this.openEnded&&(a>s||a<n))return g(this,b,Y).call(this,z.t({id:"slider.error.out_of_bounds",message:"Value must be between {min} and {max}",values:{min:`${this.min} ${this.suffix}`.trim(),max:`${this.max} ${this.suffix}`.trim()}})),{shouldCancel:!0};r===""&&this.required&&g(this,b,Y).call(this,z.t({id:"slider.error.required",message:"This field is required"})),this.value=r;let i=r===this.max||r===this.min,d=!1;if(this.slot){let m=this.parentElement.querySelector('w-slider-thumb[slot="to"]'),k=this.parentElement.querySelector('w-slider-thumb[slot="from"]'),E=m.textfield.value||this.max,$=k.textfield.value||this.min,y=Number.parseInt(E),M=Number.parseInt($),F=z.t({id:"slider.error.overlap",message:"The maximum value cannot be less than the minimum"});if(this.slot==="from"){let f=this.openEnded&&y>s?y:Math.min(y,this.openEnded?s-1:s);a>f&&(d=!0,this.openEnded&&i?this.value=String(f):this.value=E,t&&(g(this,b,Y).call(this,F),await this.updateComplete,this.textfield.value=r))}else{let f=this.openEnded&&M<n?M:Math.max(Number.parseInt($),this.openEnded?n+1:n);a<f&&(d=!0,this.openEnded&&i?this.value=String(f):this.value=$,t&&(g(this,b,Y).call(this,F),await this.updateComplete,this.textfield.value=r))}}return d?{shouldCancel:!0}:(g(this,b,Y).call(this,""),this.range.value=Math.min(Math.max(Number(r),Number(this.min)),Number(this.max)).toString(),this.value=this.openEnded&&!t&&i?"":r,this.shadowRoot.querySelector("w-attention").handleDone(),{shouldCancel:!1})},me=async function(r){let t=r.currentTarget.tagName==="W-TEXTFIELD";if(r instanceof CustomEvent)return;let a=r.currentTarget.value;return(await g(this,b,re).call(this,a,t)).shouldCancel?(r.preventDefault(),!1):!0},Ie=async function(r){if(r.key!=="ArrowLeft"&&r.key!=="ArrowRight")return;let t=Number(this.range.value),a=this.step||1,s;r.key==="ArrowLeft"?s=t-a:s=t+a,s=Math.min(Math.max(s,Number(this.min)),Number(this.max)),(await g(this,b,re).call(this,s.toString(),!1)).shouldCancel&&r.preventDefault()},u.shadowRootOptions={...Ae.shadowRootOptions,delegatesFocus:!0},u.styles=[De,Pe,Le],p([S({attribute:"aria-label",reflect:!0})],u.prototype,"ariaLabel",2),p([S({attribute:"aria-description",reflect:!0})],u.prototype,"ariaDescription",2),p([S({reflect:!0})],u.prototype,"name",2),p([S({reflect:!0})],u.prototype,"value",2),p([S({type:Boolean,reflect:!0})],u.prototype,"disabled",2),p([S({type:Boolean,reflect:!0})],u.prototype,"invalid",2),p([S({attribute:!1,reflect:!1})],u.prototype,"openEnded",2),p([S({reflect:!0})],u.prototype,"placeholder",2),p([N()],u.prototype,"markers",2),p([N()],u.prototype,"required",2),p([N()],u.prototype,"step",2),p([N()],u.prototype,"min",2),p([N()],u.prototype,"max",2),p([N()],u.prototype,"suffix",2),p([S({attribute:!1})],u.prototype,"valueFormatter",2),p([S({attribute:!1})],u.prototype,"tooltipFormatter",2),p([S({attribute:!1})],u.prototype,"labelFormatter",2),p([be('input[type="range"]')],u.prototype,"range",2),p([be(".w-slider-thumb__tooltip-target")],u.prototype,"tooltipTarget",2),p([be("w-textfield")],u.prototype,"textfield",2),p([N()],u.prototype,"_showTooltip",2),p([N()],u.prototype,"_inputHasFocus",2),p([N()],u.prototype,"_hiddenTextfield",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",u);export{u as WarpSliderThumb};
+    `}};B=new WeakMap,b=new WeakSet,W=function(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()},ee=function(){this._showTooltip=!1},pe=function(){this.range&&(this.value===""?this.range.value=this.boundaryValue:this.value&&(this.range.value=this.value))},Y=function(r){this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:r,slot:this.slot}}))},re=async function(r,t){let a=Number.parseInt(r);if(this.openEnded&&!t&&this.step&&!(this.slot==="to"&&a>=Number(this.max)-1||this.slot==="from"&&a<=Number(this.min)+1)){let k=1/this.step;a=Math.round(a*k)/k,r=a.toString()}let s=Number.parseInt(this.max),n=Number.parseInt(this.min);if(!this.openEnded&&(a>s||a<n))return g(this,b,Y).call(this,z.t({id:"slider.error.out_of_bounds",message:"Value must be between {min} and {max}",values:{min:`${this.min} ${this.suffix}`.trim(),max:`${this.max} ${this.suffix}`.trim()}})),{shouldCancel:!0};r===""&&this.required&&g(this,b,Y).call(this,z.t({id:"slider.error.required",message:"This field is required"})),this.value=r;let i=r===this.max||r===this.min,d=!1;if(this.slot){let m=this.parentElement.querySelector('w-slider-thumb[slot="to"]'),k=this.parentElement.querySelector('w-slider-thumb[slot="from"]'),E=m.textfield.value||this.max,$=k.textfield.value||this.min,y=Number.parseInt(E),M=Number.parseInt($),F=z.t({id:"slider.error.overlap",message:"The maximum value cannot be less than the minimum"});if(this.slot==="from"){let f=this.openEnded&&y>s?y:Math.min(y,this.openEnded?s-1:s);a>f&&(d=!0,this.openEnded&&i?this.value=String(f):this.value=E,t&&(g(this,b,Y).call(this,F),await this.updateComplete,this.textfield.value=r))}else{let f=this.openEnded&&M<n?M:Math.max(Number.parseInt($),this.openEnded?n+1:n);a<f&&(d=!0,this.openEnded&&i?this.value=String(f):this.value=$,t&&(g(this,b,Y).call(this,F),await this.updateComplete,this.textfield.value=r))}}return d?{shouldCancel:!0}:(g(this,b,Y).call(this,""),this.range.value=Math.min(Math.max(Number(r),Number(this.min)),Number(this.max)).toString(),this.value=this.openEnded&&!t&&i?"":r,this.shadowRoot.querySelector("w-attention").handleDone(),{shouldCancel:!1})},me=async function(r){let t=r.currentTarget.tagName==="W-TEXTFIELD";if(r instanceof CustomEvent)return;let a=r.currentTarget.value;return(await g(this,b,re).call(this,a,t)).shouldCancel?(r.preventDefault(),!1):!0},Ie=async function(r){if(r.key!=="ArrowLeft"&&r.key!=="ArrowRight")return;let t=Number(this.range.value),a=this.step||1,s;r.key==="ArrowLeft"?s=t-a:s=t+a,s=Math.min(Math.max(s,Number(this.min)),Number(this.max)),(await g(this,b,re).call(this,s.toString(),!1)).shouldCancel&&r.preventDefault()},u.shadowRootOptions={...Ae.shadowRootOptions,delegatesFocus:!0},u.styles=[De,Pe,Le],p([S({attribute:"aria-label"})],u.prototype,"ariaLabel",2),p([S({attribute:"aria-description"})],u.prototype,"ariaDescription",2),p([S({reflect:!0})],u.prototype,"name",2),p([S({reflect:!0})],u.prototype,"value",2),p([S({type:Boolean,reflect:!0})],u.prototype,"disabled",2),p([S({type:Boolean,reflect:!0})],u.prototype,"invalid",2),p([S({attribute:!1,reflect:!1})],u.prototype,"openEnded",2),p([S({reflect:!0})],u.prototype,"placeholder",2),p([N()],u.prototype,"markers",2),p([N()],u.prototype,"required",2),p([N()],u.prototype,"step",2),p([N()],u.prototype,"min",2),p([N()],u.prototype,"max",2),p([N()],u.prototype,"suffix",2),p([S({attribute:!1})],u.prototype,"valueFormatter",2),p([S({attribute:!1})],u.prototype,"tooltipFormatter",2),p([S({attribute:!1})],u.prototype,"labelFormatter",2),p([be('input[type="range"]')],u.prototype,"range",2),p([be(".w-slider-thumb__tooltip-target")],u.prototype,"tooltipTarget",2),p([be("w-textfield")],u.prototype,"textfield",2),p([N()],u.prototype,"_showTooltip",2),p([N()],u.prototype,"_inputHasFocus",2),p([N()],u.prototype,"_hiddenTextfield",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",u);export{u as WarpSliderThumb};
 //# sourceMappingURL=slider-thumb.js.map