@warp-ds/elements 2.10.0-next.11 → 2.10.0-next.12

package/dist/packages/slider/slider.stories.js

@@ -1,5 +1,6 @@
 import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
 import { html } from 'lit';
+// @ts-expect-error No types for this virtual file
 import 'virtual:uno.css';
 import '../affix/affix.js';
 import '../attention/attention.js';

package/dist/packages/slider-thumb/react.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { WarpSliderThumb } from './slider-thumb.js';
 export declare const SliderThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpSliderThumb>, "value" | "form" | "name" | "textfield" | "disabled" | "invalid" | "max" | "min" | "placeholder" | "required" | "step" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "suffix" | "range" | "openEnded" | "markers" | "valueFormatter" | "tooltipFormatter" | "labelFormatter" | "tooltipTarget" | "_showTooltip" | "_inputHasFocus" | "_hiddenTextfield" | "anchorPositioningStyleElement" | "updateFieldAfterValidation" | "boundaryValue" | "textFieldDisplayValue" | "tooltipDisplayValue" | "ariaDescriptionText" | "onSliderValidity" | "onslider-validity"> & {
-    onSliderValidity?: (e: CustomEvent<any>) => void;
-    'onslider-validity'?: (e: CustomEvent<any>) => void;
+    onSliderValidity?: ((e: CustomEvent<any>) => void) | undefined;
+    'onslider-validity'?: ((e: CustomEvent<any>) => void) | undefined;
 } & Partial<Omit<WarpSliderThumb, keyof HTMLElement>> & React.RefAttributes<WarpSliderThumb>, "ref">, "aria-description" | "aria-label"> & {
     ariaLabel?: string;
     ariaDescription?: string;

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

@@ -15,7 +15,7 @@ declare class WarpSliderThumb extends WarpSliderThumb_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
+        customElementRegistry?: CustomElementRegistry | null;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
@@ -26,19 +26,19 @@ declare class WarpSliderThumb extends WarpSliderThumb_base {
      *
      * @default `label` from `w-slider`
      */
-    ariaLabel: string;
+    ariaLabel: string | null;
     /**
      * Contextual information for assistive technology, should it be needed
      */
-    ariaDescription: string;
+    ariaDescription: string | null;
     /**
      * The name of this input field in the form. The canonical source of the value is the text field.
      */
-    name: string;
+    name: string | undefined;
     /**
      * The initial value, if any
      */
-    value: string;
+    value: string | undefined;
     /**
      * @internal Set by `<w-slider>`
      */
@@ -54,31 +54,31 @@ declare class WarpSliderThumb extends WarpSliderThumb_base {
     /**
      * Placeholder in empty text fields
      */
-    placeholder: string;
+    placeholder: string | undefined;
     /** @internal Set by `<w-slider>` */
-    markers: string;
+    markers: string | undefined;
     /** @internal Set by `<w-slider>` */
     required: boolean;
     /** @internal Set by `<w-slider>` */
-    step: number;
+    step: number | undefined;
     /** @internal Set by `<w-slider>` */
-    min: string;
+    min: string | undefined;
     /** @internal Set by `<w-slider>` */
-    max: string;
+    max: string | undefined;
     /** @internal Set by `<w-slider>` */
     suffix: string;
     /**
      * @internal Formatter for the tooltip and input mask values. Set by `<w-slider>`.
      */
-    valueFormatter: (value: string, slot: SliderSlot) => string;
+    valueFormatter: ((value: string, slot: SliderSlot) => string) | undefined;
     /**
      * @internal Replaces {@link valueFormatter} for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. Set by `<w-slider>`.
      */
-    tooltipFormatter: (value: string, slot: SliderSlot) => string;
+    tooltipFormatter: ((value: string, slot: SliderSlot) => string) | undefined;
     /**
      * @internal Formatter for the min and max labels below the range. Set by `<w-slider>`.
      */
-    labelFormatter: (slot: SliderSlot) => string;
+    labelFormatter: ((slot: SliderSlot) => string) | undefined;
     /** @internal */
     range: HTMLInputElement;
     /** @internal */
@@ -108,7 +108,7 @@ declare class WarpSliderThumb extends WarpSliderThumb_base {
      * Value to display in the textfield (shows boundary when focused on empty value)
      * @internal
      */
-    get textFieldDisplayValue(): string;
+    get textFieldDisplayValue(): string | undefined;
     /**
      * Value to display in the tooltip
      * @internal

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

@@ -2636,7 +2636,7 @@ Please compile your catalog first.
   w-textfield {
     --w-textfield-placeholder-color-text: var(--w-s-color-text);
   }
-`;var D,d,B,G,ce,j,U,he,Ee,Fe,u=class extends xe(Ce){constructor(){super(...arguments);te(this,d);this.disabled=!1;this.invalid=!1;this.openEnded=!1;this.suffix="";this._showTooltip=!1;this._inputHasFocus=!1;this._hiddenTextfield=!1;te(this,D,null);this.anchorPositioningStyleElement=null}resetFormControl(){this.value=re(this,D),this.dispatchEvent(new CustomEvent("thumbreset",{bubbles:!0}))}async updateFieldAfterValidation(){let e=this.shadowRoot.querySelector("w-textfield");await m(this,d,U).call(this,e.value,!0)}async connectedCallback(){if(super.connectedCallback(),oe(this,D,this.value),this.setValue(this.value),this.slot&&!this.ariaDescription&&(this.slot==="from"?this.ariaDescription=E.t({id:"slider.label.from",comment:"Accessible label for the 'from value' input field in a range slider",message:"From"}):this.slot==="to"&&(this.ariaDescription=E.t({id:"slider.label.to",comment:"Accessible label for the 'to value' input field in a range slider",message:"To"}))),"anchorName"in document.documentElement.style)await this.updateComplete;else{let a=import.meta.url.substring(0,import.meta.url.lastIndexOf("/"));try{let[{default:i}]=await Promise.all([import(`${a}/oddbird-css-anchor-positioning.js`),this.updateComplete]);this.anchorPositioningStyleElement||(this.anchorPositioningStyleElement=document.createElement("style"),this.shadowRoot.prepend(this.anchorPositioningStyleElement)),this.anchorPositioningStyleElement.textContent=`
+`;var D,d,B,G,ce,j,U,he,Ee,Fe,u=class extends xe(Ce){constructor(){super(...arguments);te(this,d);this.ariaLabel=null;this.ariaDescription=null;this.disabled=!1;this.invalid=!1;this.openEnded=!1;this.required=!1;this.suffix="";this._showTooltip=!1;this._inputHasFocus=!1;this._hiddenTextfield=!1;te(this,D);this.anchorPositioningStyleElement=null}resetFormControl(){this.value=re(this,D),this.dispatchEvent(new CustomEvent("thumbreset",{bubbles:!0}))}async updateFieldAfterValidation(){let e=this.shadowRoot.querySelector("w-textfield");await m(this,d,U).call(this,e.value,!0)}async connectedCallback(){if(super.connectedCallback(),oe(this,D,this.value),this.setValue(this.value),this.slot&&!this.ariaDescription&&(this.slot==="from"?this.ariaDescription=E.t({id:"slider.label.from",comment:"Accessible label for the 'from value' input field in a range slider",message:"From"}):this.slot==="to"&&(this.ariaDescription=E.t({id:"slider.label.to",comment:"Accessible label for the 'to value' input field in a range slider",message:"To"}))),"anchorName"in document.documentElement.style)await this.updateComplete;else{let a=import.meta.url.substring(0,import.meta.url.lastIndexOf("/"));try{let[{default:i}]=await Promise.all([import(`${a}/oddbird-css-anchor-positioning.js`),this.updateComplete]);this.anchorPositioningStyleElement||(this.anchorPositioningStyleElement=document.createElement("style"),this.shadowRoot.prepend(this.anchorPositioningStyleElement)),this.anchorPositioningStyleElement.textContent=`
         /*
          * The polyfill can only anchor to ::before and ::after pseudo elements, not the pseudo element slider thumb.
          * We work around that by recreating a transparent version of the active range
@@ -2770,5 +2770,5 @@ Please compile your catalog first.
           ${this.ariaDescriptionText}
         </span>
       </div>
-    `}};D=new WeakMap,d=new WeakSet,B=function(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()},G=function(){this._showTooltip=!1},ce=function(){this.range&&(this.value===""?this.range.value=this.boundaryValue:this.value&&(this.range.value=this.value))},j=function(e){this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:e,slot:this.slot}}))},U=async function(e,t){let a=this.suffix??"",i=Number.parseInt(e);if(this.openEnded&&!t&&this.step&&!(this.slot==="to"&&i>=Number(this.max)-1||this.slot==="from"&&i<=Number(this.min)+1)){let y=1/this.step;i=Math.round(i*y)/y,e=i.toString()}let n=Number.parseInt(this.max),s=Number.parseInt(this.min);if(!this.openEnded&&(i>n||i<s))return m(this,d,j).call(this,E.t({id:"slider.error.out_of_bounds",message:"Value must be between {min} and {max}",values:{min:`${this.min} ${a}`.trim(),max:`${this.max} ${a}`.trim()}})),{shouldCancel:!0};e===""&&this.required&&m(this,d,j).call(this,E.t({id:"slider.error.required",message:"This field is required"})),this.value=e;let b=e===this.max||e===this.min,f=!1;if(this.slot){let F=this.parentElement.querySelector('w-slider-thumb[slot="to"]'),y=this.parentElement.querySelector('w-slider-thumb[slot="from"]'),$=F.textfield.value||this.max,x=y.textfield.value||this.min,z=Number.parseInt($),M=Number.parseInt(x),k=E.t({id:"slider.error.overlap",message:"The maximum value cannot be less than the minimum"});if(this.slot==="from"){let _=this.openEnded&&z>n?z:Math.min(z,this.openEnded?n-1:n);i>_&&(f=!0,this.openEnded&&b?this.value=String(_):this.value=$,t&&(m(this,d,j).call(this,k),await this.updateComplete,this.textfield.value=e))}else{let _=this.openEnded&&M<s?M:Math.max(Number.parseInt(x),this.openEnded?s+1:s);i<_&&(f=!0,this.openEnded&&b?this.value=String(_):this.value=x,t&&(m(this,d,j).call(this,k),await this.updateComplete,this.textfield.value=e))}}return f?{shouldCancel:!0}:(m(this,d,j).call(this,""),this.range.value=Math.min(Math.max(Number(e),Number(this.min)),Number(this.max)).toString(),this.value=this.openEnded&&!t&&b?"":e,this.shadowRoot.querySelector("w-attention").handleDone(),{shouldCancel:!1})},he=async function(e){let t=e.currentTarget.tagName==="W-TEXTFIELD";if(e instanceof CustomEvent)return;let a=e.currentTarget.value;return(await m(this,d,U).call(this,a,t)).shouldCancel?(e.preventDefault(),!1):!0},Ee=async function(e){if(e.key==="Enter"&&this.internals.form){this.internals.form.requestSubmit();return}if(!this.openEnded||e.key!=="ArrowLeft"&&e.key!=="ArrowRight")return;let t=Number(this.range.value),a=this.step||1,i;e.key==="ArrowLeft"?i=t-a:i=t+a,i=Math.min(Math.max(i,Number(this.min)),Number(this.max)),(await m(this,d,U).call(this,i.toString(),!1)).shouldCancel&&e.preventDefault()},Fe=async function(e){if(e.key==="Enter"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.textfield.value)return;let t="";this.slot==="from"?e.key==="ArrowUp"?t=String(Number(this.min)+1)||"1":e.key==="ArrowDown"&&(t=String(Number(this.min))||"0"):e.key==="ArrowUp"?t=String(Number(this.max))||"100":e.key==="ArrowDown"&&(t=String(Number(this.max)-1)||"99"),t&&(e.preventDefault(),await m(this,d,U).call(this,t,!0))},u.shadowRootOptions={...Ce.shadowRootOptions,delegatesFocus:!0},u.styles=[_e,ke,ze],p([V({attribute:"aria-label"})],u.prototype,"ariaLabel",2),p([V({attribute:"aria-description"})],u.prototype,"ariaDescription",2),p([V({reflect:!0})],u.prototype,"name",2),p([V({reflect:!0})],u.prototype,"value",2),p([V({type:Boolean,reflect:!0})],u.prototype,"disabled",2),p([V({type:Boolean,reflect:!0})],u.prototype,"invalid",2),p([V({attribute:!1,reflect:!1})],u.prototype,"openEnded",2),p([V({reflect:!0})],u.prototype,"placeholder",2),p([P()],u.prototype,"markers",2),p([P()],u.prototype,"required",2),p([P()],u.prototype,"step",2),p([P()],u.prototype,"min",2),p([P()],u.prototype,"max",2),p([P()],u.prototype,"suffix",2),p([V({attribute:!1})],u.prototype,"valueFormatter",2),p([V({attribute:!1})],u.prototype,"tooltipFormatter",2),p([V({attribute:!1})],u.prototype,"labelFormatter",2),p([de('input[type="range"]')],u.prototype,"range",2),p([de(".w-slider-thumb__tooltip-target")],u.prototype,"tooltipTarget",2),p([de("w-textfield")],u.prototype,"textfield",2),p([P()],u.prototype,"_showTooltip",2),p([P()],u.prototype,"_inputHasFocus",2),p([P()],u.prototype,"_hiddenTextfield",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",u);export{u as WarpSliderThumb};
+    `}};D=new WeakMap,d=new WeakSet,B=function(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()},G=function(){this._showTooltip=!1},ce=function(){this.range&&(this.value===""?this.range.value=this.boundaryValue:this.value&&(this.range.value=this.value))},j=function(e){this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:e,slot:this.slot}}))},U=async function(e,t){let a=this.suffix??"",i=Number.parseInt(e);if(this.openEnded&&!t&&this.step&&!(this.slot==="to"&&i>=Number(this.max)-1||this.slot==="from"&&i<=Number(this.min)+1)){let y=1/this.step;i=Math.round(i*y)/y,e=i.toString()}let n=Number.parseInt(this.max),s=Number.parseInt(this.min);if(!this.openEnded&&(i>n||i<s))return m(this,d,j).call(this,E.t({id:"slider.error.out_of_bounds",message:"Value must be between {min} and {max}",values:{min:`${this.min} ${a}`.trim(),max:`${this.max} ${a}`.trim()}})),{shouldCancel:!0};e===""&&this.required&&m(this,d,j).call(this,E.t({id:"slider.error.required",message:"This field is required"})),this.value=e;let b=e===this.max||e===this.min,f=!1;if(this.slot){let F=this.parentElement.querySelector('w-slider-thumb[slot="to"]'),y=this.parentElement.querySelector('w-slider-thumb[slot="from"]'),$=F.textfield.value||this.max,x=y.textfield.value||this.min,z=Number.parseInt($),M=Number.parseInt(x),k=E.t({id:"slider.error.overlap",message:"The maximum value cannot be less than the minimum"});if(this.slot==="from"){let _=this.openEnded&&z>n?z:Math.min(z,this.openEnded?n-1:n);i>_&&(f=!0,this.openEnded&&b?this.value=String(_):this.value=$,t&&(m(this,d,j).call(this,k),await this.updateComplete,this.textfield.value=e))}else{let _=this.openEnded&&M<s?M:Math.max(Number.parseInt(x),this.openEnded?s+1:s);i<_&&(f=!0,this.openEnded&&b?this.value=String(_):this.value=x,t&&(m(this,d,j).call(this,k),await this.updateComplete,this.textfield.value=e))}}return f?{shouldCancel:!0}:(m(this,d,j).call(this,""),this.range.value=Math.min(Math.max(Number(e),Number(this.min)),Number(this.max)).toString(),this.value=this.openEnded&&!t&&b?"":e,this.shadowRoot.querySelector("w-attention").handleDone(),{shouldCancel:!1})},he=async function(e){let t=e.currentTarget.tagName==="W-TEXTFIELD";if(e instanceof CustomEvent)return!1;let a=e.currentTarget.value;return(await m(this,d,U).call(this,a,t)).shouldCancel?(e.preventDefault(),!1):!0},Ee=async function(e){if(e.key==="Enter"&&this.internals.form){this.internals.form.requestSubmit();return}if(!this.openEnded||e.key!=="ArrowLeft"&&e.key!=="ArrowRight")return;let t=Number(this.range.value),a=this.step||1,i;e.key==="ArrowLeft"?i=t-a:i=t+a,i=Math.min(Math.max(i,Number(this.min)),Number(this.max)),(await m(this,d,U).call(this,i.toString(),!1)).shouldCancel&&e.preventDefault()},Fe=async function(e){if(e.key==="Enter"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.textfield.value)return;let t="";this.slot==="from"?e.key==="ArrowUp"?t=String(Number(this.min)+1)||"1":e.key==="ArrowDown"&&(t=String(Number(this.min))||"0"):e.key==="ArrowUp"?t=String(Number(this.max))||"100":e.key==="ArrowDown"&&(t=String(Number(this.max)-1)||"99"),t&&(e.preventDefault(),await m(this,d,U).call(this,t,!0))},u.shadowRootOptions={...Ce.shadowRootOptions,delegatesFocus:!0},u.styles=[_e,ke,ze],p([V({attribute:"aria-label"})],u.prototype,"ariaLabel",2),p([V({attribute:"aria-description"})],u.prototype,"ariaDescription",2),p([V({reflect:!0})],u.prototype,"name",2),p([V({reflect:!0})],u.prototype,"value",2),p([V({type:Boolean,reflect:!0})],u.prototype,"disabled",2),p([V({type:Boolean,reflect:!0})],u.prototype,"invalid",2),p([V({attribute:!1,reflect:!1})],u.prototype,"openEnded",2),p([V({reflect:!0})],u.prototype,"placeholder",2),p([P()],u.prototype,"markers",2),p([P()],u.prototype,"required",2),p([P()],u.prototype,"step",2),p([P()],u.prototype,"min",2),p([P()],u.prototype,"max",2),p([P()],u.prototype,"suffix",2),p([V({attribute:!1})],u.prototype,"valueFormatter",2),p([V({attribute:!1})],u.prototype,"tooltipFormatter",2),p([V({attribute:!1})],u.prototype,"labelFormatter",2),p([de('input[type="range"]')],u.prototype,"range",2),p([de(".w-slider-thumb__tooltip-target")],u.prototype,"tooltipTarget",2),p([de("w-textfield")],u.prototype,"textfield",2),p([P()],u.prototype,"_showTooltip",2),p([P()],u.prototype,"_inputHasFocus",2),p([P()],u.prototype,"_hiddenTextfield",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",u);export{u as WarpSliderThumb};
 //# sourceMappingURL=slider-thumb.js.map