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

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

@@ -0,0 +1,194 @@
+import { css } from 'lit';
+/* For some reason the pseudoselectors for webkit and moz must be separate blocks :shrug: */
+export const wSliderThumbStyles = css `
+  .w-slider-thumb {
+    position: relative;
+    display: grid;
+    pointer-events: none; /* For range inputs we position two of these on top of each other. Let clicks go through the top one. */
+    grid-template-areas:
+      "slider slider slider"
+      "frommarker . tomarker"
+      "fromtextfield . totextfield";
+    grid-template-columns: 1fr 24px 1fr;
+  }
+
+  .w-slider-thumb__range {
+    appearance: none;
+    background-color: transparent;
+    grid-area: slider;
+    height: 44px; /* touch target */
+    margin-left: 0;
+    pointer-events: none; /* let clicks pass through for range slider where we place two inputs over each other */
+  }
+
+  .w-slider-thumb__range::-webkit-slider-runnable-track {
+    box-shadow: none;
+    color: var(--w-s-color-text);
+    height: var(--w-slider-track-height);
+  }
+
+  /*
+    Use anchor positioning to place the tooltip target in relation to the slider thumb.
+    We use a polyfill to bring support to older Safari, Firefox at time of writing.
+   */
+  .w-slider-thumb__range::-webkit-slider-thumb {
+    anchor-name: --thumb;
+
+    appearance: none;
+    cursor: pointer;
+    background: var(--w-slider-thumb-background);
+    border-radius: 50%;
+    height: var(--w-slider-thumb-size, 28px);
+    margin-top: calc(
+      -1 * calc(var(--w-slider-thumb-offset) - calc(
+              var(--w-slider-track-height) / 2
+            ))
+    );
+    pointer-events: initial;
+    width: var(--w-slider-thumb-size, 28px);
+    z-index: 1;
+  }
+
+  .w-slider-thumb__range[disabled]::-webkit-slider-thumb {
+    cursor: auto;
+  }
+
+  .w-slider-thumb__range::-moz-range-thumb {
+    anchor-name: --thumb;
+
+    appearance: none;
+    cursor: pointer;
+    background: var(--w-slider-thumb-background);
+    border-radius: 50%;
+    border-color: transparent;
+    height: var(--w-slider-thumb-size, 28px);
+    margin-top: calc(
+      -1 * calc(var(--w-slider-thumb-offset) - calc(
+              var(--w-slider-track-height) / 2
+            ))
+    );
+    pointer-events: initial;
+    width: var(--w-slider-thumb-size, 28px);
+    z-index: 1;
+
+    box-shadow: none;
+  }
+
+  .w-slider-thumb__range[disabled]::-moz-range-thumb {
+    cursor: auto;
+  }
+
+  .w-slider-thumb__range:active::-webkit-slider-thumb,
+  .w-slider-thumb__range:hover::-webkit-slider-thumb {
+    background: var(--w-slider-thumb-background);
+    box-shadow: var(--w-shadow-slider-handle-hover);
+  }
+
+  .w-slider-thumb__range:focus,
+  .w-slider-thumb__range:focus-visible {
+    outline: none;
+  }
+
+  .w-slider-thumb__range:focus-visible::-webkit-slider-thumb {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+    box-shadow: none;
+  }
+
+  .w-slider-thumb__range:active::-moz-range-thumb,
+  .w-slider-thumb__range:hover::-moz-range-thumb {
+    background: var(--w-s-color-background-primary-hover);
+    box-shadow: var(--w-shadow-slider-handle-hover);
+  }
+
+  .w-slider-thumb__range:focus-visible::-moz-range-thumb {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+    box-shadow: none;
+  }
+
+  .w-slider-thumb__tooltip-target {
+    display: block;
+    pointer-events: none;
+    position: absolute;
+    border: 2px solid transparent;
+    border-radius: 20px;
+    width: 8px;
+    height: 8px;
+    position-anchor: --thumb;
+    position-area: center; /* Position the tooltip target right on the range thumb */
+  }
+
+  /* Uncomment this to debug the invisible anchor target */
+  /* .w-slider-thumb__tooltip-target { border-color: lime; } */
+
+  .w-slider-thumb__from-marker,
+  .w-slider-thumb__to-marker {
+    margin-inline: 2px; /* visual alignment with input border, slider thumb */
+    color: var(--w-s-color-text-subtle);
+    font-size: var(--w-font-size-s);
+    line-height: var(--w-line-height-s);
+  }
+
+  .w-slider-thumb__from-marker {
+    grid-area: frommarker;
+  }
+
+  .w-slider-thumb__to-marker {
+    grid-area: tomarker;
+    text-align: right;
+  }
+
+  .w-slider-thumb__textfield {
+    margin-top: 12px;
+    pointer-events: auto;
+    grid-row: 3 / 4;
+    grid-column: 1 / 3; /* Single sliders should have the text field use the fromtextfield _and_ gap portion of the CSS grid. */
+  }
+
+  :host([slot="from"]) .w-slider-thumb__textfield {
+    grid-column: 1 / 2; /* Range sliders should leave the gap empty. */
+  }
+
+  :host([slot="from"]) .w-slider-thumb__range {
+    margin-left: var(--w-slider-thumb-size, 28px);
+  }
+
+  :host([slot="to"]) .w-slider-thumb__range {
+    margin-right: var(--w-slider-thumb-size, 28px);
+  }
+
+
+  :host([slot="from"]) .w-slider-thumb__tooltip-target {
+    transform: translateX(calc(-1 * var(--transform-offset, 0px) - 1px));
+  }
+
+  :host([slot="from"]) .w-slider-thumb__range::-webkit-slider-thumb {
+    transform: translateX(calc(-1 * var(--w-slider-thumb-size, 28px) - 1px));
+  }
+
+  :host([slot="from"]) .w-slider-thumb__range::-moz-range-thumb {
+    transform: translateX(calc(-1 * var(--w-slider-thumb-size, 28px) - 1px));
+  }
+
+  :host([slot="to"]) .w-slider-thumb__textfield {
+    grid-row: 3 / 4;
+    grid-column: 3 / 4;
+  }
+
+  :host([slot="to"]) .w-slider-thumb__tooltip-target {
+    transform: translateX(calc(var(--transform-offset, 0px) - 1px));
+  }
+
+  :host([slot="to"]) .w-slider-thumb__range::-webkit-slider-thumb {
+    transform: translateX(calc(var(--w-slider-thumb-size, 28px) - 1px));
+  }
+
+  :host([slot="to"]) .w-slider-thumb__range::-moz-range-thumb {
+    transform: translateX(calc(var(--w-slider-thumb-size, 28px) - 1px));
+  }
+
+  w-textfield {
+    --w-textfield-placeholder-color-text: var(--w-s-color-text);
+  }
+`;

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;