@warp-ds/elements 2.3.0-next.19 → 2.3.0-next.20

package/dist/packages/slider/slider.d.ts

@@ -28,6 +28,7 @@ declare class WarpSlider extends WarpSlider_base {
     label: string;
     disabled: boolean;
     allowValuesOutsideRange: boolean;
+    error: string;
     helpText: string;
     invalid: boolean;
     /** Ensures a child slider thumb has a value before allowing the containing form to submit. */
@@ -41,10 +42,14 @@ declare class WarpSlider extends WarpSlider_base {
     suffix: string;
     /** Function to format the to- and from labels and value in the slider thumb tooltip. */
     formatter: (value: string, type: 'to' | 'from') => string;
+    _invalidMessage: string;
+    _hasInternalError: boolean;
     get edgeMin(): string;
     get edgeMax(): string;
     connectedCallback(): Promise<void>;
     updated(changedProperties: PropertyValues<this>): void;
+    get componentHasError(): boolean;
+    get errorText(): string;
     render(): import("lit").TemplateResult<1>;
 }
 export { WarpSlider };

package/dist/packages/slider/slider.js

@@ -1,4 +1,4 @@
-var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var U=l=>{throw TypeError(l)};var p=(l,o,e,r)=>{for(var i=r>1?void 0:r?ae(o,e):o,t=l.length-1,u;t>=0;t--)(u=l[t])&&(i=(r?u(o,e,i):u(i))||i);return r&&i&&te(o,e,i),i};var ie=(l,o,e)=>o.has(l)||U("Cannot "+e);var B=(l,o,e)=>o.has(l)?U("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(l):o.set(l,e);var v=(l,o,e)=>(ie(l,o,"access private method"),e);var n=function(l,o,e,r){if(e==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o=="function"?l!==o||!r:!o.has(l))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?r:e==="a"?r.call(l):r?r.value:o.get(l)},b=function(l,o,e,r,i){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof o=="function"?l!==o||!i:!o.has(l))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?i.call(l,e):i?i.value=e:o.set(l,e),e};function G(l){var o,e,r,i,t,u,k,P,f,j,A,R,S,C,E,y,q,N,O;class oe extends l{constructor(...a){var s,c,h;super(...a),o.add(this),this.internals=this.attachInternals(),e.set(this,!1),r.set(this,!1),i.set(this,!1),t.set(this,void 0),u.set(this,void 0),k.set(this,!0),f.set(this,""),j.set(this,()=>{b(this,i,!0,"f"),b(this,e,!0,"f"),n(this,o,"m",y).call(this)}),A.set(this,()=>{b(this,e,!1,"f"),n(this,o,"m",q).call(this,this.shouldFormValueUpdate()?n(this,f,"f"):""),!this.validity.valid&&n(this,i,"f")&&b(this,r,!0,"f");let x=n(this,o,"m",y).call(this);this.validationMessageCallback&&this.validationMessageCallback(x?this.internals.validationMessage:"")}),R.set(this,()=>{var x;n(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),b(this,k,!1,"f")),b(this,i,!0,"f"),b(this,r,!0,"f"),n(this,o,"m",y).call(this),(x=this===null||this===void 0?void 0:this.validationMessageCallback)===null||x===void 0||x.call(this,this.showError?this.internals.validationMessage:"")}),S.set(this,void 0),C.set(this,!1),E.set(this,Promise.resolve()),(s=this.addEventListener)===null||s===void 0||s.call(this,"focus",n(this,j,"f")),(c=this.addEventListener)===null||c===void 0||c.call(this,"blur",n(this,A,"f")),(h=this.addEventListener)===null||h===void 0||h.call(this,"invalid",n(this,R,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let a=this.validators.map(h=>h.attribute).flat(),s=super.observedAttributes||[];return[...new Set([...s,...a])]}static getValidator(a){return this.validators.find(s=>s.attribute===a)||null}static getValidators(a){return this.validators.filter(s=>{var c;if(s.attribute===a||!((c=s.attribute)===null||c===void 0)&&c.includes(a))return!0})}get form(){return this.internals.form}get showError(){return n(this,o,"m",y).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(a,s,c){var h;(h=super.attributeChangedCallback)===null||h===void 0||h.call(this,a,s,c);let V=this.constructor.getValidators(a);V!=null&&V.length&&this.validationTarget&&this.setValue(n(this,f,"f"))}setValue(a){var s;b(this,r,!1,"f"),(s=this.validationMessageCallback)===null||s===void 0||s.call(this,""),b(this,f,a,"f");let h=this.shouldFormValueUpdate()?a:null;this.internals.setFormValue(h),n(this,o,"m",q).call(this,h),this.valueChangedCallback&&this.valueChangedCallback(h),n(this,o,"m",y).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(a=>a(n(this,E,"f")))}formResetCallback(){var a,s;b(this,i,!1,"f"),b(this,r,!1,"f"),n(this,o,"m",y).call(this),(a=this.resetFormControl)===null||a===void 0||a.call(this),(s=this.validationMessageCallback)===null||s===void 0||s.call(this,n(this,o,"m",y).call(this)?this.validationMessage:"")}}return e=new WeakMap,r=new WeakMap,i=new WeakMap,t=new WeakMap,u=new WeakMap,k=new WeakMap,f=new WeakMap,j=new WeakMap,A=new WeakMap,R=new WeakMap,S=new WeakMap,C=new WeakMap,E=new WeakMap,o=new WeakSet,P=function(){let a=this.getRootNode(),s=`${this.localName}[name="${this.getAttribute("name")}"]`;return a.querySelectorAll(s)},y=function(){if(this.hasAttribute("disabled"))return!1;let a=n(this,r,"f")||n(this,i,"f")&&!this.validity.valid&&!n(this,e,"f");return a&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),a},q=function(a){let s=this.constructor,c={},h=s.validators,x=[],V=h.some(m=>m.isValid instanceof Promise);n(this,C,"f")||(b(this,E,new Promise(m=>{b(this,S,m,"f")}),"f"),b(this,C,!0,"f")),n(this,t,"f")&&(n(this,t,"f").abort(),b(this,u,n(this,t,"f"),"f"));let T=new AbortController;b(this,t,T,"f");let M,L=!1;h.length&&(h.forEach(m=>{let X=m.key||"customError",_=m.isValid(this,a,T.signal);_ instanceof Promise?(x.push(_),_.then(W=>{W!=null&&(c[X]=!W,M=n(this,o,"m",O).call(this,m,a),n(this,o,"m",N).call(this,c,M))})):(c[X]=!_,this.validity[X]!==!_&&(L=!0),!_&&!M&&(M=n(this,o,"m",O).call(this,m,a)))}),Promise.allSettled(x).then(()=>{var m;T!=null&&T.signal.aborted||(b(this,C,!1,"f"),(m=n(this,S,"f"))===null||m===void 0||m.call(this))}),(L||!V)&&n(this,o,"m",N).call(this,c,M))},N=function(a,s){if(this.validationTarget)this.internals.setValidity(a,s,this.validationTarget),b(this,k,!1,"f");else{if(this.internals.setValidity(a,s),this.internals.validity.valid)return;b(this,k,!0,"f")}},O=function(a,s){if(this.validityCallback){let c=this.validityCallback(a.key||"customError");if(c)return c}return a.message instanceof Function?a.message(this,s):a.message},oe}import{html as $,LitElement as K,nothing as Y}from"lit";import{property as w}from"lit/decorators.js";import{css as H}from"lit";var D=H`
+var ae=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var W=l=>{throw TypeError(l)};var p=(l,o,e,r)=>{for(var n=r>1?void 0:r?ie(o,e):o,a=l.length-1,x;a>=0;a--)(x=l[a])&&(n=(r?x(o,e,n):x(n))||n);return r&&n&&ae(o,e,n),n};var se=(l,o,e)=>o.has(l)||W("Cannot "+e);var U=(l,o,e)=>o.has(l)?W("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(l):o.set(l,e);var v=(l,o,e)=>(se(l,o,"access private method"),e);var s=function(l,o,e,r){if(e==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o=="function"?l!==o||!r:!o.has(l))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?r:e==="a"?r.call(l):r?r.value:o.get(l)},b=function(l,o,e,r,n){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof o=="function"?l!==o||!n:!o.has(l))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?n.call(l,e):n?n.value=e:o.set(l,e),e};function B(l){var o,e,r,n,a,x,k,oe,z,P,A,R,Y,C,S,f,$,I,X;class te extends l{constructor(...t){var i,h,g;super(...t),o.add(this),this.internals=this.attachInternals(),e.set(this,!1),r.set(this,!1),n.set(this,!1),a.set(this,void 0),x.set(this,void 0),k.set(this,!0),z.set(this,""),P.set(this,()=>{b(this,n,!0,"f"),b(this,e,!0,"f"),s(this,o,"m",f).call(this)}),A.set(this,()=>{b(this,e,!1,"f"),s(this,o,"m",$).call(this,this.shouldFormValueUpdate()?s(this,z,"f"):""),!this.validity.valid&&s(this,n,"f")&&b(this,r,!0,"f");let w=s(this,o,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(w?this.internals.validationMessage:"")}),R.set(this,()=>{var w;s(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),b(this,k,!1,"f")),b(this,n,!0,"f"),b(this,r,!0,"f"),s(this,o,"m",f).call(this),(w=this===null||this===void 0?void 0:this.validationMessageCallback)===null||w===void 0||w.call(this,this.showError?this.internals.validationMessage:"")}),Y.set(this,void 0),C.set(this,!1),S.set(this,Promise.resolve()),(i=this.addEventListener)===null||i===void 0||i.call(this,"focus",s(this,P,"f")),(h=this.addEventListener)===null||h===void 0||h.call(this,"blur",s(this,A,"f")),(g=this.addEventListener)===null||g===void 0||g.call(this,"invalid",s(this,R,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let t=this.validators.map(g=>g.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 h;if(i.attribute===t||!((h=i.attribute)===null||h===void 0)&&h.includes(t))return!0})}get form(){return this.internals.form}get showError(){return s(this,o,"m",f).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(t,i,h){var g;(g=super.attributeChangedCallback)===null||g===void 0||g.call(this,t,i,h);let F=this.constructor.getValidators(t);F!=null&&F.length&&this.validationTarget&&this.setValue(s(this,z,"f"))}setValue(t){var i;b(this,r,!1,"f"),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,""),b(this,z,t,"f");let g=this.shouldFormValueUpdate()?t:null;this.internals.setFormValue(g),s(this,o,"m",$).call(this,g),this.valueChangedCallback&&this.valueChangedCallback(g),s(this,o,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(t=>t(s(this,S,"f")))}formResetCallback(){var t,i;b(this,n,!1,"f"),b(this,r,!1,"f"),s(this,o,"m",f).call(this),(t=this.resetFormControl)===null||t===void 0||t.call(this),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,s(this,o,"m",f).call(this)?this.validationMessage:"")}}return e=new WeakMap,r=new WeakMap,n=new WeakMap,a=new WeakMap,x=new WeakMap,k=new WeakMap,z=new WeakMap,P=new WeakMap,A=new WeakMap,R=new WeakMap,Y=new WeakMap,C=new WeakMap,S=new WeakMap,o=new WeakSet,oe=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=s(this,r,"f")||s(this,n,"f")&&!this.validity.valid&&!s(this,e,"f");return t&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),t},$=function(t){let i=this.constructor,h={},g=i.validators,w=[],F=g.some(m=>m.isValid instanceof Promise);s(this,C,"f")||(b(this,S,new Promise(m=>{b(this,Y,m,"f")}),"f"),b(this,C,!0,"f")),s(this,a,"f")&&(s(this,a,"f").abort(),b(this,x,s(this,a,"f"),"f"));let V=new AbortController;b(this,a,V,"f");let T,L=!1;g.length&&(g.forEach(m=>{let O=m.key||"customError",y=m.isValid(this,t,V.signal);y instanceof Promise?(w.push(y),y.then(Z=>{Z!=null&&(h[O]=!Z,T=s(this,o,"m",X).call(this,m,t),s(this,o,"m",I).call(this,h,T))})):(h[O]=!y,this.validity[O]!==!y&&(L=!0),!y&&!T&&(T=s(this,o,"m",X).call(this,m,t)))}),Promise.allSettled(w).then(()=>{var m;V!=null&&V.signal.aborted||(b(this,C,!1,"f"),(m=s(this,Y,"f"))===null||m===void 0||m.call(this))}),(L||!F)&&s(this,o,"m",I).call(this,h,T))},I=function(t,i){if(this.validationTarget)this.internals.setValidity(t,i,this.validationTarget),b(this,k,!1,"f");else{if(this.internals.setValidity(t,i),this.internals.validity.valid)return;b(this,k,!0,"f")}},X=function(t,i){if(this.validityCallback){let h=this.validityCallback(t.key||"customError");if(h)return h}return t.message instanceof Function?t.message(this,i):t.message},te}import{html as E,LitElement as J,nothing as j}from"lit";import{property as u,state as K}from"lit/decorators.js";import{css as G}from"lit";var H=G`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var U=l=>{th
   svg {
     pointer-events: none;
   }
-`,be=H`*, :before, :after {
+`,be=G`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,7 +2437,7 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var U=l=>{th
                     display: none
                 }
             }
-        `;import{css as se}from"lit";var J=se`
+        `;import{css as ne}from"lit";var D=ne`
   .w-slider {
     position: relative;
     border: none;
@@ -2446,9 +2446,10 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var U=l=>{th
     display: grid;
     width: 100%;
     grid-template-areas:
-      'label'
-      'description'
-      'slider';
+      "label"
+      "description"
+      "slider"
+      "error";
     grid-template-columns: 1fr;
 
     --w-slider-track-background: var(--w-s-color-background-disabled-subtle);
@@ -2456,7 +2457,9 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var U=l=>{th
     --w-slider-track-height: 4px;
     --w-slider-track-active-height: 6px;
     --w-slider-thumb-background: var(--w-s-color-background-primary);
-    --w-slider-thumb-background-hover: var(--w-s-color-background-primary-hover);
+    --w-slider-thumb-background-hover: var(
+      --w-s-color-background-primary-hover
+    );
     --w-slider-thumb-size: 28px;
     --w-slider-thumb-offset: calc(var(--w-slider-thumb-size) / 2);
     --w-slider-marker-color: var(--w-s-color-border);
@@ -2467,26 +2470,45 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var U=l=>{th
     --_value-range: calc(var(--max) - var(--min));
 
     /** Round up to the nearest --step, which defaults to 1 (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step) */
-    --_from-in-range: round(up, max(calc(var(--from) - var(--min)), 0), var(--step, 1));
+    --_from-in-range: round(
+      up,
+      max(calc(var(--from) - var(--min)), 0),
+      var(--step, 1)
+    );
 
     /* limit to maximum value in range so typing a value larger than max doesn't explode layouts */
-    --_to-in-range: round(up, min(calc(var(--to) - var(--min)), var(--_value-range)), var(--step, 1));
+    --_to-in-range: round(
+      up,
+      min(calc(var(--to) - var(--min)), var(--_value-range)),
+      var(--step, 1)
+    );
 
     /* Position the starting point of the fill in the case of a non-zero --from value in a range slider.
      * In other words, given a width of 100% how many percent should be left unfilled/blank
      * at the beginning of the range slider (dashes in this ASCII-range-slider: |---O******O|) */
-    --_from-as-percent-of-max: calc(var(--_from-in-range) / var(--_value-range) * 100);
+    --_from-as-percent-of-max: calc(
+      var(--_from-in-range) / var(--_value-range) * 100
+    );
     --_blank-values-before: var(--_from-as-percent-of-max);
 
     /* Set the width of the fill as a percentage.
      * In other words, given a width of 100% how many percent should be left unfilled/blank
      * at the end of the slider (dashes in this ASCII-slider: |******O---|) */
-    --_to-as-percent-of-max: calc(var(--_to-in-range) / var(--_value-range) * 100);
-    --_filled-values: calc(var(--_to-as-percent-of-max) - var(--_blank-values-before));
+    --_to-as-percent-of-max: calc(
+      var(--_to-in-range) / var(--_value-range) * 100
+    );
+    --_filled-values: calc(
+      var(--_to-as-percent-of-max) - var(--_blank-values-before)
+    );
 
     /* Vertical position of range and markers */
     --_range-top: calc(
-      var(--w-slider-thumb-size) / 2 + calc(var(--w-slider-track-active-height) - calc(var(--w-slider-track-height) / 2) + 1px)
+      var(--w-slider-thumb-size) / 2 +
+        calc(
+          var(--w-slider-track-active-height) - calc(
+              var(--w-slider-track-height) / 2
+            ) + 1px
+        )
     );
   }
 
@@ -2528,8 +2550,16 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var U=l=>{th
     border-start-start-radius: var(--active-range-border-radius, 0);
     border-end-start-radius: var(--active-range-border-radius, 0);
 
-    margin-left: calc(calc(var(--_blank-values-before) * 1%) - var(--active-range-inline-start-padding, 0px));
-    width: calc(calc(var(--_filled-values) * 1%) + var(--active-range-inline-end-padding, 0px));
+    margin-left: calc(
+      calc(var(--_blank-values-before) * 1%) - var(
+          --active-range-inline-start-padding,
+          0px
+        )
+    );
+    width: calc(
+      calc(var(--_filled-values) * 1%) +
+        var(--active-range-inline-end-padding, 0px)
+    );
     z-index: 1;
   }
 
@@ -2543,13 +2573,15 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var U=l=>{th
        followed by enough transparent that we can repeat the gradient
        along the X axis and have markers visible where we want them. */
     background: linear-gradient(
-      to right,
-      var(--w-slider-marker-color) var(--_marker-width),
-      rgba(0, 0, 0, 0) 1px calc(100% - 1px),
-      var(--w-slider-marker-color) 100%
-    ) repeat-x;
+        to right,
+        var(--w-slider-marker-color) var(--_marker-width),
+        rgba(0, 0, 0, 0) 1px calc(100% - 1px),
+        var(--w-slider-marker-color) 100%
+      )
+      repeat-x;
     --_step-width-as-percent: calc(var(--markers) / var(--_value-range) * 100);
-    background-size: calc(var(--_step-width-as-percent) * 1%) var(--_marker-height);
+    background-size: calc(var(--_step-width-as-percent) * 1%)
+      var(--_marker-height);
 
     background-position: bottom 0 left 8px right 8px;
     position: absolute;
@@ -2561,6 +2593,21 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var U=l=>{th
     margin-inline: var(--w-slider-thumb-offset);
   }
 
+  .w-slider__error {
+    grid-area: error;
+    padding-top: 8px;
+    font-size: var(--w-font-size-xs);
+    line-height: var(--w-line-height-xs);
+    color: var(--w-s-color-text-negative);
+  }
+
+  .w-slider__help-text {
+    grid-area: error;
+    padding-top: 8px;
+    font-size: var(--w-font-size-xs);
+    line-height: var(--w-line-height-xs);
+  }
+
   slot::slotted(w-slider-thumb) {
     position: static;
     top: 0;
@@ -2569,43 +2616,40 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var U=l=>{th
     bottom: 0;
     grid-area: slider;
   }
-`;var d,z,Q,ee,re,Z,I,g=class extends G(K){constructor(){super(...arguments);B(this,d);this.disabled=!1;this.allowValuesOutsideRange=!1;this.helpText="";this.invalid=!1;this.required=!1}get edgeMin(){return this.allowValuesOutsideRange?(Number(this.min)-1).toString():this.min}get edgeMax(){return this.allowValuesOutsideRange?(Number(this.max)+1).toString():this.max}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.step&&this.style.setProperty("--step",String(this.step)),this.style.setProperty("--min",this.edgeMin),this.style.setProperty("--max",this.max),this.markers&&this.style.setProperty("--markers",String(this.markers)),v(this,d,z).call(this)}updated(e){(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("min")||e.has("step")||e.has("max")||e.has("suffix")||e.has("formatter"))&&v(this,d,z).call(this)}render(){return $`
+`;var c,_,Q,ee,re,N,q,d=class extends B(J){constructor(){super(...arguments);U(this,c);this.disabled=!1;this.allowValuesOutsideRange=!1;this.error="";this.helpText="";this.invalid=!1;this.required=!1;this.suffix="";this._invalidMessage="";this._hasInternalError=!1}get edgeMin(){return this.allowValuesOutsideRange?(Number(this.min)-1).toString():this.min}get edgeMax(){return this.allowValuesOutsideRange?(Number(this.max)+1).toString():this.max}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.step&&this.style.setProperty("--step",String(this.step)),this.style.setProperty("--min",this.edgeMin),this.style.setProperty("--max",this.max),this.markers&&this.style.setProperty("--markers",String(this.markers)),v(this,c,_).call(this)}updated(e){(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("min")||e.has("step")||e.has("max")||e.has("suffix")||e.has("formatter")||e.has("_invalidMessage")||e.has("_hasInternalError"))&&v(this,c,_).call(this)}get componentHasError(){return this.invalid||this._hasInternalError}get errorText(){return this.componentHasError?this.error||this._invalidMessage:""}render(){return E`
       <fieldset
         id="fieldset"
         class="w-slider"
-        @input="${v(this,d,Q)}"
-        @slidervalidity="${v(this,d,re)}"
-        aria-invalid="${this.invalid?"true":Y}"
-        aria-describedby="${this.invalid?"error-slot":Y}"
+        @input="${v(this,c,Q)}"
+        @slidervalidity="${v(this,c,re)}"
+        aria-invalid="${this.errorText?"true":j}"
       >
-        ${this.label?$`<legend class="w-slider__label">
+        ${this.label?E`<legend class="w-slider__label">
               <slot id="label" name="label">${this.label}</slot>
-            </legend>`:Y}
+            </legend>`:j}
         <slot class="w-slider__description" name="description"></slot>
-        ${this.markers?$`<div class="w-slider__markers"></div>`:Y}
+        ${this.markers?E`<div class="w-slider__markers"></div>`:j}
         <div class="w-slider__range">
           <div class="w-slider__active-range"></div>
         </div>
         <slot
           class="w-slider__slider"
-          @slotchange=${v(this,d,z)}
+          @slotchange=${v(this,c,_)}
         ></slot>
         <slot
           class="w-slider__slider"
           name="from"
-          @slotchange=${v(this,d,z)}
+          @slotchange=${v(this,c,_)}
         ></slot>
         <slot
           class="w-slider__slider"
           name="to"
-          @slotchange=${v(this,d,z)}
-        ></slot>
-        <slot
-          class="w-slider__error"
-          id="error-slot"
-          name="error"
-          aria-describes="fieldset"
+          @slotchange=${v(this,c,_)}
         ></slot>
+        ${this.errorText?E`<p class="w-slider__error" aria-describes="fieldset">
+              ${this.errorText}
+            </p>`:this.helpText?E`<p class="w-slider__help-text" aria-describes="fieldset">
+            ${this.helpText}</p>`:j}
       </fieldset>
-    `}};d=new WeakSet,z=function(){let e=this.querySelectorAll("w-slider-thumb"),r=!1;for(let t of e.values())t.min=this.edgeMin,t.max=this.edgeMax,t.step=this.step,t.suffix=this.suffix,t.required=this.required,t.formatter=this.formatter,t.allowValuesOutsideRange=this.allowValuesOutsideRange,t.ariaLabel||(t.slot||(t.ariaLabel=this.label),t.slot==="from"&&(t.ariaLabel=`${this.label} min`),t.slot==="to"&&(t.ariaLabel=`${this.label} max`)),(t.slot==="from"||t.slot==="to")&&(r=!0),t.disabled=this.disabled,t.invalid=this.invalid,v(this,d,I).call(this,t);let i=this.shadowRoot.querySelector("fieldset");r?(i.style.setProperty("--active-range-inline-start-padding","var(--w-slider-thumb-size)"),i.style.setProperty("--active-range-inline-end-padding","var(--w-slider-thumb-size)")):i.style.setProperty("--active-range-border-radius","4px")},Q=function(e){let r=e.target;v(this,d,I).call(this,r),r.slot&&v(this,d,ee).call(this)},ee=function(){let e,r,i=this.querySelectorAll("w-slider-thumb");for(let f of i.values())f.slot==="from"&&(e=f),f.slot==="to"&&(r=f);if(!e||!r||!e.invalid&&!r.invalid)return;let t=e.shadowRoot.querySelector("w-textfield"),u=r.shadowRoot.querySelector("w-textfield"),k=Number(t.value)<=Number(u.value),P=Number(u.value)>=Number(t.value);k&&P&&(e.invalid=!1,r.invalid=!1,e.value!==t.value&&(e.value=t.value),r.value!==u.value&&(r.value=u.value))},re=function(e){if(e.stopPropagation(),e.detail.invalid)this.invalid=!0;else{let r=!1,i=this.querySelectorAll("w-slider-thumb");for(let t of i.values())t.invalid&&(r=!0);this.invalid=r}},Z=function(e,r){return(r.value===void 0||r.value===null)&&(r.value=this.allowValuesOutsideRange?"":e),r.value===""?e:r.value},I=function(e){let r=e.slot;r||this.style.setProperty("--from","0"),r==="from"&&this.style.setProperty("--from",v(this,d,Z).call(this,this.edgeMin,e)),(!r||r==="to")&&this.style.setProperty("--to",v(this,d,Z).call(this,this.edgeMax,e))},g.shadowRootOptions={...K.shadowRootOptions,delegatesFocus:!0},g.styles=[D,J],p([w({reflect:!0})],g.prototype,"label",2),p([w({type:Boolean,reflect:!0})],g.prototype,"disabled",2),p([w({type:Boolean,attribute:"allow-values-outside-range"})],g.prototype,"allowValuesOutsideRange",2),p([w({reflect:!0})],g.prototype,"helpText",2),p([w({type:Boolean,reflect:!0})],g.prototype,"invalid",2),p([w({type:Boolean,reflect:!0})],g.prototype,"required",2),p([w({reflect:!0})],g.prototype,"min",2),p([w({reflect:!0})],g.prototype,"max",2),p([w({type:Number,reflect:!0})],g.prototype,"markers",2),p([w({type:Number,reflect:!0})],g.prototype,"step",2),p([w({reflect:!0})],g.prototype,"suffix",2),p([w({attribute:!1})],g.prototype,"formatter",2);customElements.get("w-slider")||customElements.define("w-slider",g);export{g as WarpSlider};
+    `}};c=new WeakSet,_=function(){let e=this.querySelectorAll("w-slider-thumb"),r=!1;for(let a of e.values())a.min=this.edgeMin,a.max=this.edgeMax,a.step=this.step,a.suffix=this.suffix,a.required=this.required,a.formatter=this.formatter,a.allowValuesOutsideRange=this.allowValuesOutsideRange,a.ariaLabel||(a.slot||(a.ariaLabel=this.label),a.slot==="from"&&(a.ariaLabel=`${this.label} min`),a.slot==="to"&&(a.ariaLabel=`${this.label} max`)),(a.slot==="from"||a.slot==="to")&&(r=!0),a.disabled=this.disabled,a.invalid=this.invalid||this._hasInternalError,v(this,c,q).call(this,a);let n=this.shadowRoot.querySelector("fieldset");r?(n.style.setProperty("--active-range-inline-start-padding","var(--w-slider-thumb-size)"),n.style.setProperty("--active-range-inline-end-padding","var(--w-slider-thumb-size)")):n.style.setProperty("--active-range-border-radius","4px")},Q=function(e){let r=e.target;v(this,c,q).call(this,r),r.slot&&v(this,c,ee).call(this)},ee=function(){let e,r,n=this.querySelectorAll("w-slider-thumb");for(let a of n.values())a.slot==="from"&&(e=a),a.slot==="to"&&(r=a);!e||!r||!e.invalid&&r.invalid},re=function(e){e.stopPropagation(),this._hasInternalError=!!e.detail.invalid,this._invalidMessage=e.detail.invalid},N=function(e,r){return(r.value===void 0||r.value===null)&&(r.value=this.allowValuesOutsideRange?"":e),r.value===""?e:r.value},q=function(e){let r=e.slot;r||this.style.setProperty("--from","0"),r==="from"&&this.style.setProperty("--from",v(this,c,N).call(this,this.edgeMin,e)),(!r||r==="to")&&this.style.setProperty("--to",v(this,c,N).call(this,this.edgeMax,e))},d.shadowRootOptions={...J.shadowRootOptions,delegatesFocus:!0},d.styles=[H,D],p([u({reflect:!0})],d.prototype,"label",2),p([u({type:Boolean,reflect:!0})],d.prototype,"disabled",2),p([u({type:Boolean,attribute:"allow-values-outside-range"})],d.prototype,"allowValuesOutsideRange",2),p([u({type:String,reflect:!0})],d.prototype,"error",2),p([u({type:String,reflect:!0,attribute:"help-text"})],d.prototype,"helpText",2),p([u({type:Boolean,reflect:!0})],d.prototype,"invalid",2),p([u({type:Boolean,reflect:!0})],d.prototype,"required",2),p([u({reflect:!0})],d.prototype,"min",2),p([u({reflect:!0})],d.prototype,"max",2),p([u({type:Number,reflect:!0})],d.prototype,"markers",2),p([u({type:Number,reflect:!0})],d.prototype,"step",2),p([u({reflect:!0})],d.prototype,"suffix",2),p([u({attribute:!1})],d.prototype,"formatter",2),p([K()],d.prototype,"_invalidMessage",2),p([K()],d.prototype,"_hasInternalError",2);customElements.get("w-slider")||customElements.define("w-slider",d);export{d as WarpSlider};
 //# sourceMappingURL=slider.js.map