@warp-ds/elements 2.3.0-next.3 → 2.3.0-next.30

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

@@ -1,5 +1,4 @@
 import { LitElement, PropertyValues } from 'lit';
-declare const WarpSlider_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
  *
@@ -11,7 +10,7 @@ declare const WarpSlider_base: import("@open-wc/form-control").Constructor<impor
  * @slot from - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
  * @slot to - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
  */
-declare class WarpSlider extends WarpSlider_base {
+declare class WarpSlider extends LitElement {
     #private;
     static shadowRootOptions: {
         delegatesFocus: boolean;
@@ -27,6 +26,9 @@ 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. */
     required: boolean;
@@ -38,9 +40,16 @@ declare class WarpSlider extends WarpSlider_base {
     /** Suffix used in text input fields and for the min and max values of the slider. */
     suffix: string;
     /** Function to format the to- and from labels and value in the slider thumb tooltip. */
-    formatter: (value: string) => string;
+    formatter: (value: string, type: 'to' | 'from') => string;
+    _invalidMessage: string;
+    _hasInternalError: boolean;
+    constructor();
+    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,13 @@
-var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=l=>{throw TypeError(l)};var u=(l,r,e,t)=>{for(var n=t>1?void 0:t?re(r,e):r,a=l.length-1,v;a>=0;a--)(v=l[a])&&(n=(t?v(r,e,n):v(n))||n);return t&&n&&ee(r,e,n),n};var oe=(l,r,e)=>r.has(l)||N("Cannot "+e);var R=(l,r,e)=>r.has(l)?N("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(l):r.set(l,e);var m=(l,r,e)=>(oe(l,r,"access private method"),e);var s=function(l,r,e,t){if(e==="a"&&!t)throw new TypeError("Private accessor was defined without a getter");if(typeof r=="function"?l!==r||!t:!r.has(l))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?t:e==="a"?t.call(l):t?t.value:r.get(l)},c=function(l,r,e,t,n){if(t==="m")throw new TypeError("Private method is not writable");if(t==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof r=="function"?l!==r||!n:!r.has(l))throw new TypeError("Cannot write private member to an object whose class did not declare it");return t==="a"?n.call(l,e):n?n.value=e:r.set(l,e),e};function W(l){var r,e,t,n,a,v,k,K,z,P,j,S,E,C,T,x,A,X,Z;class Q extends l{constructor(...o){var i,d,b;super(...o),r.add(this),this.internals=this.attachInternals(),e.set(this,!1),t.set(this,!1),n.set(this,!1),a.set(this,void 0),v.set(this,void 0),k.set(this,!0),z.set(this,""),P.set(this,()=>{c(this,n,!0,"f"),c(this,e,!0,"f"),s(this,r,"m",x).call(this)}),j.set(this,()=>{c(this,e,!1,"f"),s(this,r,"m",A).call(this,this.shouldFormValueUpdate()?s(this,z,"f"):""),!this.validity.valid&&s(this,n,"f")&&c(this,t,!0,"f");let f=s(this,r,"m",x).call(this);this.validationMessageCallback&&this.validationMessageCallback(f?this.internals.validationMessage:"")}),S.set(this,()=>{var f;s(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),c(this,k,!1,"f")),c(this,n,!0,"f"),c(this,t,!0,"f"),s(this,r,"m",x).call(this),(f=this===null||this===void 0?void 0:this.validationMessageCallback)===null||f===void 0||f.call(this,this.showError?this.internals.validationMessage:"")}),E.set(this,void 0),C.set(this,!1),T.set(this,Promise.resolve()),(i=this.addEventListener)===null||i===void 0||i.call(this,"focus",s(this,P,"f")),(d=this.addEventListener)===null||d===void 0||d.call(this,"blur",s(this,j,"f")),(b=this.addEventListener)===null||b===void 0||b.call(this,"invalid",s(this,S,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let o=this.validators.map(b=>b.attribute).flat(),i=super.observedAttributes||[];return[...new Set([...i,...o])]}static getValidator(o){return this.validators.find(i=>i.attribute===o)||null}static getValidators(o){return this.validators.filter(i=>{var d;if(i.attribute===o||!((d=i.attribute)===null||d===void 0)&&d.includes(o))return!0})}get form(){return this.internals.form}get showError(){return s(this,r,"m",x).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(o,i,d){var b;(b=super.attributeChangedCallback)===null||b===void 0||b.call(this,o,i,d);let V=this.constructor.getValidators(o);V!=null&&V.length&&this.validationTarget&&this.setValue(s(this,z,"f"))}setValue(o){var i;c(this,t,!1,"f"),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,""),c(this,z,o,"f");let b=this.shouldFormValueUpdate()?o:null;this.internals.setFormValue(b),s(this,r,"m",A).call(this,b),this.valueChangedCallback&&this.valueChangedCallback(b),s(this,r,"m",x).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(o=>o(s(this,T,"f")))}formResetCallback(){var o,i;c(this,n,!1,"f"),c(this,t,!1,"f"),s(this,r,"m",x).call(this),(o=this.resetFormControl)===null||o===void 0||o.call(this),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,s(this,r,"m",x).call(this)?this.validationMessage:"")}}return e=new WeakMap,t=new WeakMap,n=new WeakMap,a=new WeakMap,v=new WeakMap,k=new WeakMap,z=new WeakMap,P=new WeakMap,j=new WeakMap,S=new WeakMap,E=new WeakMap,C=new WeakMap,T=new WeakMap,r=new WeakSet,K=function(){let o=this.getRootNode(),i=`${this.localName}[name="${this.getAttribute("name")}"]`;return o.querySelectorAll(i)},x=function(){if(this.hasAttribute("disabled"))return!1;let o=s(this,t,"f")||s(this,n,"f")&&!this.validity.valid&&!s(this,e,"f");return o&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),o},A=function(o){let i=this.constructor,d={},b=i.validators,f=[],V=b.some(p=>p.isValid instanceof Promise);s(this,C,"f")||(c(this,T,new Promise(p=>{c(this,E,p,"f")}),"f"),c(this,C,!0,"f")),s(this,a,"f")&&(s(this,a,"f").abort(),c(this,v,s(this,a,"f"),"f"));let M=new AbortController;c(this,a,M,"f");let Y,q=!1;b.length&&(b.forEach(p=>{let I=p.key||"customError",y=p.isValid(this,o,M.signal);y instanceof Promise?(f.push(y),y.then($=>{$!=null&&(d[I]=!$,Y=s(this,r,"m",Z).call(this,p,o),s(this,r,"m",X).call(this,d,Y))})):(d[I]=!y,this.validity[I]!==!y&&(q=!0),!y&&!Y&&(Y=s(this,r,"m",Z).call(this,p,o)))}),Promise.allSettled(f).then(()=>{var p;M!=null&&M.signal.aborted||(c(this,C,!1,"f"),(p=s(this,E,"f"))===null||p===void 0||p.call(this))}),(q||!V)&&s(this,r,"m",X).call(this,d,Y))},X=function(o,i){if(this.validationTarget)this.internals.setValidity(o,i,this.validationTarget),c(this,k,!1,"f");else{if(this.internals.setValidity(o,i),this.internals.validity.valid)return;c(this,k,!0,"f")}},Z=function(o,i){if(this.validityCallback){let d=this.validityCallback(o.key||"customError");if(d)return d}return o.message instanceof Function?o.message(this,i):o.message},Q}import{html as G,LitElement as D,nothing as ae}from"lit";import{property as w}from"lit/decorators.js";import{css as O}from"lit";var U=O`
+var ke=Object.create;var N=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var ye=Object.getOwnPropertyNames;var _e=Object.getPrototypeOf,ze=Object.prototype.hasOwnProperty;var H=o=>{throw TypeError(o)};var U=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports);var Me=(o,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of ye(e))!ze.call(o,a)&&a!==r&&N(o,a,{get:()=>e[a],enumerable:!(t=X(e,a))||t.enumerable});return o};var Ee=(o,e,r)=>(r=o!=null?ke(_e(o)):{},Me(e||!o||!o.__esModule?N(r,"default",{value:o,enumerable:!0}):r,o));var b=(o,e,r,t)=>{for(var a=t>1?void 0:t?X(e,r):e,i=o.length-1,n;i>=0;i--)(n=o[i])&&(a=(t?n(e,r,a):n(a))||a);return t&&a&&N(e,r,a),a};var Te=(o,e,r)=>e.has(o)||H("Cannot "+r);var Z=(o,e,r)=>e.has(o)?H("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,r);var p=(o,e,r)=>(Te(o,e,"access private method"),r);var B=U(x=>{"use strict";Object.defineProperty(x,"__esModule",{value:!0});x.errorMessages=x.ErrorType=void 0;var y;(function(o){o.MalformedUnicode="MALFORMED_UNICODE",o.MalformedHexadecimal="MALFORMED_HEXADECIMAL",o.CodePointLimit="CODE_POINT_LIMIT",o.OctalDeprecation="OCTAL_DEPRECATION",o.EndOfString="END_OF_STRING"})(y=x.ErrorType||(x.ErrorType={}));x.errorMessages=new Map([[y.MalformedUnicode,"malformed Unicode character escape sequence"],[y.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[y.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[y.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[y.EndOfString,"malformed escape sequence at end of string"]])});var K=U(m=>{"use strict";Object.defineProperty(m,"__esModule",{value:!0});m.unraw=m.errorMessages=m.ErrorType=void 0;var g=B();Object.defineProperty(m,"ErrorType",{enumerable:!0,get:function(){return g.ErrorType}});Object.defineProperty(m,"errorMessages",{enumerable:!0,get:function(){return g.errorMessages}});function Ce(o){return!o.match(/[^a-f0-9]/i)?parseInt(o,16):NaN}function T(o,e,r){let t=Ce(o);if(Number.isNaN(t)||r!==void 0&&r!==o.length)throw new SyntaxError(g.errorMessages.get(e));return t}function Oe(o){let e=T(o,g.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function J(o,e){let r=T(o,g.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=T(e,g.ErrorType.MalformedUnicode,4);return String.fromCharCode(r,t)}return String.fromCharCode(r)}function Se(o){return o.charAt(0)==="{"&&o.charAt(o.length-1)==="}"}function Le(o){if(!Se(o))throw new SyntaxError(g.errorMessages.get(g.ErrorType.MalformedUnicode));let e=o.slice(1,-1),r=T(e,g.ErrorType.MalformedUnicode);try{return String.fromCodePoint(r)}catch(t){throw t instanceof RangeError?new SyntaxError(g.errorMessages.get(g.ErrorType.CodePointLimit)):t}}function Ie(o,e=!1){if(e)throw new SyntaxError(g.errorMessages.get(g.ErrorType.OctalDeprecation));let r=parseInt(o,8);return String.fromCharCode(r)}var Ne=new Map([["b","\b"],["f","\f"],["n",`
+`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function De(o){return Ne.get(o)||o}var je=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function G(o,e=!1){return o.replace(je,function(r,t,a,i,n,s,l,h,f){if(t!==void 0)return"\\";if(a!==void 0)return Oe(a);if(i!==void 0)return Le(i);if(n!==void 0)return J(n,s);if(l!==void 0)return J(l);if(h==="0")return"\0";if(h!==void 0)return Ie(h,!e);if(f!==void 0)return De(f);throw new SyntaxError(g.errorMessages.get(g.ErrorType.EndOfString))})}m.unraw=G;m.default=G});import{html as z,LitElement as he,nothing as S}from"lit";import{property as u,state as me}from"lit/decorators.js";var ee=Ee(K(),1);var v=o=>typeof o=="string",Ae=o=>typeof o=="function",Q=new Map,re="en";function P(o){return[...Array.isArray(o)?o:[o],re]}function Y(o,e,r){let t=P(o);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return C(()=>O("date",t,r),()=>new Intl.DateTimeFormat(t,a)).format(v(e)?new Date(e):e)}function Pe(o,e,r){let t;if(r||(r="default"),typeof r=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=r;return Y(o,e,t)}function D(o,e,r){let t=P(o);return C(()=>O("number",t,r),()=>new Intl.NumberFormat(t,r)).format(e)}function W(o,e,r,{offset:t=0,...a}){var s,l;let i=P(o),n=e?C(()=>O("plural-ordinal",i),()=>new Intl.PluralRules(i,{type:"ordinal"})):C(()=>O("plural-cardinal",i),()=>new Intl.PluralRules(i,{type:"cardinal"}));return(l=(s=a[r])!=null?s:a[n.select(r-t)])!=null?l:a.other}function C(o,e){let r=o(),t=Q.get(r);return t||(t=e(),Q.set(r,t)),t}function O(o,e,r){let t=e.join("-");return`${o}-${t}-${JSON.stringify(r)}`}var oe=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,te="%__lingui_octothorpe__%",Ye=(o,e,r={})=>{let t=e||o,a=n=>typeof n=="object"?n:r[n],i=(n,s)=>{let l=Object.keys(r).length?a("number"):void 0,h=D(t,n,l);return s.replace(new RegExp(te,"g"),h)};return{plural:(n,s)=>{let{offset:l=0}=s,h=W(t,!1,n,s);return i(n-l,h)},selectordinal:(n,s)=>{let{offset:l=0}=s,h=W(t,!0,n,s);return i(n-l,h)},select:Fe,number:(n,s)=>D(t,n,a(s)||{style:s}),date:(n,s)=>Y(t,n,a(s)||s),time:(n,s)=>Pe(t,n,a(s)||s)}},Fe=(o,e)=>{var r;return(r=e[o])!=null?r:e.other};function Re(o,e,r){return(t={},a)=>{let i=Ye(e,r,a),n=(l,h=!1)=>Array.isArray(l)?l.reduce((f,M)=>{if(M==="#"&&h)return f+te;if(v(M))return f+M;let[q,w,V]=M,L={};w==="plural"||w==="selectordinal"||w==="select"?Object.entries(V).forEach(([I,xe])=>{L[I]=n(xe,w==="plural"||w==="selectordinal")}):L=V;let E;if(w){let I=i[w];E=I(t[q],L)}else E=t[q];return E==null?f:f+E},""):l,s=n(o);return v(s)&&oe.test(s)?(0,ee.unraw)(s):v(s)?s:s?String(s):""}}var $e=Object.defineProperty,qe=(o,e,r)=>e in o?$e(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,Ve=(o,e,r)=>(qe(o,typeof e!="symbol"?e+"":e,r),r),j=class{constructor(){Ve(this,"_events",{})}on(e,r){var a;var t;return(a=(t=this._events)[e])!=null||(t[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(r);~a&&t.splice(a,1)}emit(e,...r){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},Xe=Object.defineProperty,He=(o,e,r)=>e in o?Xe(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,k=(o,e,r)=>(He(o,typeof e!="symbol"?e+"":e,r),r),A=class extends j{constructor(e){var r;super(),k(this,"_locale",""),k(this,"_locales"),k(this,"_localeData",{}),k(this,"_messages",{}),k(this,"_missing"),k(this,"_messageCompiler"),k(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((r=e.locale)!=null?r:re,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,r){let t=this._localeData[e];t?Object.assign(t,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,r){let t=this._messages[e];t?Object.assign(t,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:t}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,t){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=t==null?void 0:t.message;e||(e=""),v(e)||(r=e.values||r,a=e.message,e=e.id);let i=this.messages[e],n=i===void 0,s=this._missing;if(s&&n)return Ae(s)?s(this._locale,e):s;n&&this.emit("missing",{id:e,locale:this._locale});let l=i||a||e;return v(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
+
+> ${l}
+
+That means you use raw catalog or your catalog doesn't have a translation for the message and fallback was used.
+ICU features such as interpolation and plurals will not work properly for that message. 
+
+Please compile your catalog first. 
+`)),v(l)&&oe.test(l)?JSON.parse(`"${l}"`):v(l)?l:Re(l,this._locale,this._locales)(r,t==null?void 0:t.formats)}date(e,r){return Y(this._locales||this._locale,e,r)}number(e,r){return D(this._locales||this._locale,e,r)}};function Ue(o={}){return new A(o)}var F=Ue();var Ze=["en","nb","fi","da","sv"],ie="en",ae=o=>Ze.find(e=>o===e||o.toLowerCase().includes(e))||ie;function Be(){if(typeof window=="undefined"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return ae(o)}try{let o=document.documentElement.lang;return ae(o)}catch(o){return console.warn("could not detect locale, falling back to source locale",o),ie}}var Je=(o,e,r,t,a,i)=>o==="nb"?r:o==="fi"?t:o==="da"?a:o==="sv"?i:e,ne=(o,e,r,t,a)=>{let i=Be(),n=Je(i,o,e,r,t,a);F.load(i,n),F.activate(i)};var se=JSON.parse('{"slider.error.overlap":["Maksimumv\xE6rdien m\xE5 ikke v\xE6re mindre end minimumv\xE6rdien"],"slider.error.required":["Dette felt er p\xE5kr\xE6vet"],"slider.error.out_of_bounds":["V\xE6rdien skal v\xE6re mellem ",["min"]," og ",["max"]]}');var le=JSON.parse('{"slider.error.overlap":["The maximum value cannot be less than the minimum"],"slider.error.required":["This field is required"],"slider.error.out_of_bounds":["Value must be between ",["min"]," and ",["max"]]}');var de=JSON.parse('{"slider.error.overlap":["Maksimiarvo ei voi olla pienempi kuin minimiarvo"],"slider.error.required":["T\xE4m\xE4 kentt\xE4 on pakollinen"],"slider.error.out_of_bounds":["Arvon on oltava v\xE4lill\xE4 ",["min"]," - ",["max"]]}');var ce=JSON.parse('{"slider.error.overlap":["Maksimumsverdien kan ikke v\xE6re mindre enn minimumsverdien"],"slider.error.required":["Dette feltet er p\xE5krevd"],"slider.error.out_of_bounds":["Verdien m\xE5 v\xE6re mellom ",["min"]," og ",["max"]]}');var be=JSON.parse('{"slider.error.overlap":["Maxv\xE4rdet kan inte vara mindre \xE4n minimiv\xE4rdet"],"slider.error.required":["Detta f\xE4lt \xE4r obligatoriskt"],"slider.error.out_of_bounds":["V\xE4rdet m\xE5ste vara mellan ",["min"]," och ",["max"]]}');import{css as ge}from"lit";var pe=ge`
   *,
   :before,
   :after {
@@ -271,7 +280,7 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=l=>{th
   svg {
     pointer-events: none;
   }
-`,de=O`*, :before, :after {
+`,cr=ge`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,7 +2446,7 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=l=>{th
                     display: none
                 }
             }
-        `;import{css as te}from"lit";var B=te`
+        `;import{css as Ge}from"lit";var ue=Ge`
   .w-slider {
     position: relative;
     border: none;
@@ -2446,9 +2455,10 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=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 +2466,9 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=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 +2479,45 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=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 +2559,16 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=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 +2582,15 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=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 +2602,21 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=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,19 +2625,41 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=l=>{th
     bottom: 0;
     grid-area: slider;
   }
-`;var g,_,H,J,L,h=class extends W(D){constructor(){super(...arguments);R(this,g);this.disabled=!1;this.invalid=!1;this.required=!1}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.step&&this.style.setProperty("--step",String(this.step)),this.style.setProperty("--min",this.min),this.style.setProperty("--max",this.max),this.markers&&this.style.setProperty("--markers",String(this.markers)),m(this,g,_).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"))&&m(this,g,_).call(this)}render(){return G`
-      <fieldset id="fieldset" class="w-slider" @input="${m(this,g,H)}" @slidervalidity="${m(this,g,J)}">
-        <legend class="w-slider__label">
-          <slot id="label" name="label">${this.label}</slot>
-        </legend>
+`;var c,_,ve,fe,we,R,$,d=class extends he{constructor(){super();Z(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;ne(le,ce,de,se,be)}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)),p(this,c,_).call(this)}updated(r){(r.has("disabled")||r.has("invalid")||r.has("required")||r.has("min")||r.has("step")||r.has("max")||r.has("suffix")||r.has("formatter")||r.has("_invalidMessage")||r.has("_hasInternalError"))&&p(this,c,_).call(this)}get componentHasError(){return this.invalid||this._hasInternalError}get errorText(){return this.componentHasError?this.error||this._invalidMessage:""}render(){return z`
+      <fieldset
+        id="fieldset"
+        class="w-slider"
+        @input="${p(this,c,ve)}"
+        @slidervalidity="${p(this,c,we)}"
+        aria-invalid="${this.errorText?"true":S}"
+      >
+        ${this.label?z`<legend class="w-slider__label">
+              <slot id="label" name="label">${this.label}</slot>
+            </legend>`:S}
         <slot class="w-slider__description" name="description"></slot>
-        ${this.markers?G`<div class="w-slider__markers"></div>`:ae}
+        ${this.markers?z`<div class="w-slider__markers"></div>`:S}
         <div class="w-slider__range">
           <div class="w-slider__active-range"></div>
         </div>
-        <slot class="w-slider__slider" @slotchange=${m(this,g,_)}></slot>
-        <slot class="w-slider__slider" name="from" @slotchange=${m(this,g,_)}></slot>
-        <slot class="w-slider__slider" name="to" @slotchange=${m(this,g,_)}></slot>
+        <slot
+          class="w-slider__slider"
+          @slotchange=${p(this,c,_)}
+        ></slot>
+        <slot
+          class="w-slider__slider"
+          name="from"
+          @slotchange=${p(this,c,_)}
+        ></slot>
+        <slot
+          class="w-slider__slider"
+          name="to"
+          @slotchange=${p(this,c,_)}
+        ></slot>
+        ${this.errorText?z`<p class="w-slider__error" aria-describes="fieldset">
+              ${this.errorText}
+            </p>`:this.helpText?z`<p class="w-slider__help-text" aria-describes="fieldset">
+                ${this.helpText}
+              </p>`:S}
       </fieldset>
-    `}};g=new WeakSet,_=function(){let e=this.querySelectorAll("w-slider-thumb"),t=!1;for(let a of e.values())a.min=this.min,a.max=this.max,a.step=this.step,a.suffix=this.suffix,a.required=this.required,a.formatter=this.formatter,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")&&(t=!0),a.forceDisabled=this.disabled,a.forceInvalid=this.invalid,m(this,g,L).call(this,a);let n=this.shadowRoot.querySelector("fieldset");t?(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")},H=function(e){let t=e.target;m(this,g,L).call(this,t)},J=function(e){e.stopPropagation(),this.invalid=e.detail.invalid},L=function(e){var n,a;let t=e.slot;if(t||this.style.setProperty("--from","0"),t==="from"){let v=(n=e.value)!=null?n:e.value=this.min;this.style.setProperty("--from",v)}if(!t||t==="to"){let v=(a=e.value)!=null?a:e.value=this.max;this.style.setProperty("--to",v)}},h.shadowRootOptions={...D.shadowRootOptions,delegatesFocus:!0},h.styles=[U,B],u([w({reflect:!0})],h.prototype,"label",2),u([w({type:Boolean,reflect:!0})],h.prototype,"disabled",2),u([w({type:Boolean,reflect:!0})],h.prototype,"invalid",2),u([w({type:Boolean,reflect:!0})],h.prototype,"required",2),u([w({reflect:!0})],h.prototype,"min",2),u([w({reflect:!0})],h.prototype,"max",2),u([w({type:Number,reflect:!0})],h.prototype,"markers",2),u([w({type:Number,reflect:!0})],h.prototype,"step",2),u([w({reflect:!0})],h.prototype,"suffix",2),u([w({attribute:!1})],h.prototype,"formatter",2);customElements.get("w-slider")||customElements.define("w-slider",h);export{h as WarpSlider};
+    `}};c=new WeakSet,_=function(){let r=this.querySelectorAll("w-slider-thumb"),t=!1;for(let i of r.values())i.min=this.edgeMin,i.max=this.edgeMax,i.step=this.step,i.suffix=this.suffix,i.required=this.required,i.formatter=this.formatter,i.allowValuesOutsideRange=this.allowValuesOutsideRange,i.ariaLabel||(i.slot||(i.ariaLabel=this.label),i.slot==="from"&&(i.ariaLabel=`${this.label} min`),i.slot==="to"&&(i.ariaLabel=`${this.label} max`)),(i.slot==="from"||i.slot==="to")&&(t=!0),i.disabled=this.disabled,i.invalid=this.invalid||this._hasInternalError,p(this,c,$).call(this,i);let a=this.shadowRoot.querySelector("fieldset");t?(a.style.setProperty("--active-range-inline-start-padding","var(--w-slider-thumb-size)"),a.style.setProperty("--active-range-inline-end-padding","var(--w-slider-thumb-size)")):a.style.setProperty("--active-range-border-radius","4px")},ve=function(r){let t=r.target;p(this,c,$).call(this,t),t.slot&&p(this,c,fe).call(this)},fe=function(){let r,t,a=this.querySelectorAll("w-slider-thumb");for(let i of a.values())i.slot==="from"&&(r=i),i.slot==="to"&&(t=i);!r||!t||!r.invalid&&t.invalid},we=function(r){r.stopPropagation();let t=this._hasInternalError||this.invalid,a=r.target;if(this._hasInternalError=!!r.detail.invalid||this.invalid,this._invalidMessage=r.detail.invalid,t===!0&&this._hasInternalError===!1){let i=this.querySelectorAll("w-slider-thumb");for(let n of i.values())n!==a&&n.updateFieldAfterValidation()}},R=function(r,t){return(t.value===void 0||t.value===null)&&(t.value=this.allowValuesOutsideRange?"":r),t.value===""?r:t.value},$=function(r){let t=r.slot;t||this.style.setProperty("--from","0"),t==="from"&&this.style.setProperty("--from",p(this,c,R).call(this,this.edgeMin,r)),(!t||t==="to")&&this.style.setProperty("--to",p(this,c,R).call(this,this.edgeMax,r))},d.shadowRootOptions={...he.shadowRootOptions,delegatesFocus:!0},d.styles=[pe,ue],b([u({reflect:!0})],d.prototype,"label",2),b([u({type:Boolean,reflect:!0})],d.prototype,"disabled",2),b([u({type:Boolean,attribute:"allow-values-outside-range"})],d.prototype,"allowValuesOutsideRange",2),b([u({type:String,reflect:!0})],d.prototype,"error",2),b([u({type:String,reflect:!0,attribute:"help-text"})],d.prototype,"helpText",2),b([u({type:Boolean,reflect:!0})],d.prototype,"invalid",2),b([u({type:Boolean,reflect:!0})],d.prototype,"required",2),b([u({reflect:!0})],d.prototype,"min",2),b([u({reflect:!0})],d.prototype,"max",2),b([u({type:Number,reflect:!0})],d.prototype,"markers",2),b([u({type:Number,reflect:!0})],d.prototype,"step",2),b([u({reflect:!0})],d.prototype,"suffix",2),b([u({attribute:!1})],d.prototype,"formatter",2),b([me()],d.prototype,"_invalidMessage",2),b([me()],d.prototype,"_hasInternalError",2);customElements.get("w-slider")||customElements.define("w-slider",d);export{d as WarpSlider};
 //# sourceMappingURL=slider.js.map