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

package/dist/packages/expandable/react.d.ts

@@ -1,2 +1,2 @@
-import { WarpExpandable } from '.';
+import { WarpExpandable } from './index.js';
 export declare const Expandable: import("@lit/react").ReactWebComponent<WarpExpandable, {}>;

package/dist/packages/link/index.d.ts

@@ -1,12 +1,11 @@
 import { LitElement } from 'lit';
-type ButtonVariant = 'primary' | 'secondary' | 'negative' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet';
-declare const WarpLink_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+type ButtonVariant = 'primary' | 'secondary' | 'negative' | 'negativeQuiet' | 'utility' | 'link' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet';
 /**
  * Buttons are used to perform actions, with different visuals for different needs.
  *
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
  */
-declare class WarpLink extends WarpLink_base {
+declare class WarpLink extends LitElement {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -15,18 +14,13 @@ declare class WarpLink extends WarpLink_base {
     };
     autofocus: boolean;
     variant: ButtonVariant;
-    quiet: boolean;
     small: boolean;
     href: string;
     disabled: boolean;
     target: string;
     rel: string;
     fullWidth: boolean;
-    buttonClass: string;
-    name: string;
-    classes: string;
     static styles: import("lit").CSSResult[];
-    constructor();
     connectedCallback(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;

package/dist/packages/link/index.js

@@ -1,4 +1,4 @@
-var N=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var h=(b,e,l,a)=>{for(var i=a>1?void 0:a?O(e,l):e,u=b.length-1,m;u>=0;u--)(m=b[u])&&(i=(a?m(e,l,i):m(i))||i);return a&&i&&N(e,l,i),i};var t=function(b,e,l,a){if(l==="a"&&!a)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?b!==e||!a:!e.has(b))throw new TypeError("Cannot read private member from an object whose class did not declare it");return l==="m"?a:l==="a"?a.call(b):a?a.value:e.get(b)},s=function(b,e,l,a,i){if(a==="m")throw new TypeError("Private method is not writable");if(a==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?b!==e||!i:!e.has(b))throw new TypeError("Cannot write private member to an object whose class did not declare it");return a==="a"?i.call(b,l):i?i.value=l:e.set(b,l),l};function Z(b){var e,l,a,i,u,m,f,W,x,Y,E,j,V,y,M,w,S,T,P;class G extends b{constructor(...r){var o,n,d;super(...r),e.add(this),this.internals=this.attachInternals(),l.set(this,!1),a.set(this,!1),i.set(this,!1),u.set(this,void 0),m.set(this,void 0),f.set(this,!0),x.set(this,""),Y.set(this,()=>{s(this,i,!0,"f"),s(this,l,!0,"f"),t(this,e,"m",w).call(this)}),E.set(this,()=>{s(this,l,!1,"f"),t(this,e,"m",S).call(this,this.shouldFormValueUpdate()?t(this,x,"f"):""),!this.validity.valid&&t(this,i,"f")&&s(this,a,!0,"f");let p=t(this,e,"m",w).call(this);this.validationMessageCallback&&this.validationMessageCallback(p?this.internals.validationMessage:"")}),j.set(this,()=>{var p;t(this,f,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),s(this,f,!1,"f")),s(this,i,!0,"f"),s(this,a,!0,"f"),t(this,e,"m",w).call(this),(p=this===null||this===void 0?void 0:this.validationMessageCallback)===null||p===void 0||p.call(this,this.showError?this.internals.validationMessage:"")}),V.set(this,void 0),y.set(this,!1),M.set(this,Promise.resolve()),(o=this.addEventListener)===null||o===void 0||o.call(this,"focus",t(this,Y,"f")),(n=this.addEventListener)===null||n===void 0||n.call(this,"blur",t(this,E,"f")),(d=this.addEventListener)===null||d===void 0||d.call(this,"invalid",t(this,j,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let r=this.validators.map(d=>d.attribute).flat(),o=super.observedAttributes||[];return[...new Set([...o,...r])]}static getValidator(r){return this.validators.find(o=>o.attribute===r)||null}static getValidators(r){return this.validators.filter(o=>{var n;if(o.attribute===r||!((n=o.attribute)===null||n===void 0)&&n.includes(r))return!0})}get form(){return this.internals.form}get showError(){return t(this,e,"m",w).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(r,o,n){var d;(d=super.attributeChangedCallback)===null||d===void 0||d.call(this,r,o,n);let z=this.constructor.getValidators(r);z!=null&&z.length&&this.validationTarget&&this.setValue(t(this,x,"f"))}setValue(r){var o;s(this,a,!1,"f"),(o=this.validationMessageCallback)===null||o===void 0||o.call(this,""),s(this,x,r,"f");let d=this.shouldFormValueUpdate()?r:null;this.internals.setFormValue(d),t(this,e,"m",S).call(this,d),this.valueChangedCallback&&this.valueChangedCallback(d),t(this,e,"m",w).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(r=>r(t(this,M,"f")))}formResetCallback(){var r,o;s(this,i,!1,"f"),s(this,a,!1,"f"),t(this,e,"m",w).call(this),(r=this.resetFormControl)===null||r===void 0||r.call(this),(o=this.validationMessageCallback)===null||o===void 0||o.call(this,t(this,e,"m",w).call(this)?this.validationMessage:"")}}return l=new WeakMap,a=new WeakMap,i=new WeakMap,u=new WeakMap,m=new WeakMap,f=new WeakMap,x=new WeakMap,Y=new WeakMap,E=new WeakMap,j=new WeakMap,V=new WeakMap,y=new WeakMap,M=new WeakMap,e=new WeakSet,W=function(){let r=this.getRootNode(),o=`${this.localName}[name="${this.getAttribute("name")}"]`;return r.querySelectorAll(o)},w=function(){if(this.hasAttribute("disabled"))return!1;let r=t(this,a,"f")||t(this,i,"f")&&!this.validity.valid&&!t(this,l,"f");return r&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),r},S=function(r){let o=this.constructor,n={},d=o.validators,p=[],z=d.some(v=>v.isValid instanceof Promise);t(this,y,"f")||(s(this,M,new Promise(v=>{s(this,V,v,"f")}),"f"),s(this,y,!0,"f")),t(this,u,"f")&&(t(this,u,"f").abort(),s(this,m,t(this,u,"f"),"f"));let C=new AbortController;s(this,u,C,"f");let F,A=!1;d.length&&(d.forEach(v=>{let X=v.key||"customError",k=v.isValid(this,r,C.signal);k instanceof Promise?(p.push(k),k.then(q=>{q!=null&&(n[X]=!q,F=t(this,e,"m",P).call(this,v,r),t(this,e,"m",T).call(this,n,F))})):(n[X]=!k,this.validity[X]!==!k&&(A=!0),!k&&!F&&(F=t(this,e,"m",P).call(this,v,r)))}),Promise.allSettled(p).then(()=>{var v;C!=null&&C.signal.aborted||(s(this,y,!1,"f"),(v=t(this,V,"f"))===null||v===void 0||v.call(this))}),(A||!z)&&t(this,e,"m",T).call(this,n,F))},T=function(r,o){if(this.validationTarget)this.internals.setValidity(r,o,this.validationTarget),s(this,f,!1,"f");else{if(this.internals.setValidity(r,o),this.internals.validity.valid)return;s(this,f,!0,"f")}},P=function(r,o){if(this.validityCallback){let n=this.validityCallback(r.key||"customError");if(n)return n}return r.message instanceof Function?r.message(this,o):r.message},G}import{html as H,LitElement as Q}from"lit";import{property as g}from"lit/decorators.js";import{classMap as D}from"lit/directives/class-map.js";import{css as B}from"lit";var U=B`
+var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var e=(d,a,i,n)=>{for(var t=n>1?void 0:n?h(a,i):a,c=d.length-1,l;c>=0;c--)(l=d[c])&&(t=(n?l(a,i,t):l(t))||t);return n&&t&&u(a,i,t),t};import{html as m,LitElement as g}from"lit";import{property as o}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{css as s}from"lit";var b=s`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var N=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var h=(b,e,l,a
   svg {
     pointer-events: none;
   }
-`,er=B`*, :before, :after {
+`,y=s`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,7 +2437,7 @@ var N=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var h=(b,e,l,a
                     display: none
                 }
             }
-        `;import{css as I}from"lit";var $=I`.w-button,
+        `;import{css as w}from"lit";var v=w`.w-button,
 .w-button--secondary {
     /* Local scoped variables, given the default button (the secondary variant) as a default */
     --_background: var(--background, var(--w-s-color-background));
@@ -2496,9 +2496,9 @@ var N=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var h=(b,e,l,a
 
     /* Variants config */
     .w-button--primary {
-        --background: var(--w-s-color-background-primary);
-        --background-hover: var(--w-s-color-background-primary-hover);
-        --background-active: var(--w-s-color-background-primary-active);
+        --background: var(--w-color-button-primary-background);
+        --background-hover: var(--w-color-button-primary-background-hover);
+        --background-active: var(--w-color-button-primary-background-active);
         --color: var(--w-s-color-text-inverted);
         --border-width: 0px;
     }
@@ -2529,6 +2529,10 @@ var N=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var h=(b,e,l,a
         --color: var(--w-s-color-text);
         --border-width: 0px;
     }
+    .w-button--quiet {
+        --background: transparent;
+        --border-width: 0px;
+    }
     .w-button--overlay {
         --background: var(--w-color-background);
         --background-hover: var(--w-color-background-hover);
@@ -2570,6 +2574,38 @@ var N=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var h=(b,e,l,a
         --font-weight: normal;
         display: inline;
     }
+    .w-button--overlay {
+        --background: var(--w-color-background);
+        --background-hover: var(--w-color-background-hover);
+        --background-active: var(--w-color-background-active);
+        --color: var(--w-s-color-text);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+    .w-button--overlay-quiet {
+        --background: transparent;
+        --background-hover: var(--w-s-color-background-hover);
+        --background-active: var(--w-s-color-background-active);
+        --color: var(--w-s-color-text);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+    .w-button--overlay-inverted {
+        --background: var(--w-s-color-background-inverted);
+        --background-hover: var(--w-s-color-background-inverted-hover);
+        --background-active: var(--w-s-color-background-inverted-active);
+        --color: var(--w-s-color-text-inverted);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+    .w-button--overlay-inverted-quiet {
+        --background: transparent;
+        --background-hover: var(--w-s-color-background-inverted-hover);
+        --background-active: var(--w-s-color-background-inverted-active);
+        --color: var(--w-s-color-text-inverted);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
 
     /* States config,  selects --loading as well since loading is always supposed to be disabled */
     .w-button:disabled,
@@ -2635,12 +2671,12 @@ var N=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var h=(b,e,l,a
         100% {
             background-position: 60px 0;
         }
-    }`;var R=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","pill","link"],c=class extends Z(Q){constructor(){super(),this.variant="secondary"}connectedCallback(){if(super.connectedCallback(),!R.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
-${R.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}render(){let e={"w-button":this.variant!=="link","w-button--primary":this.variant==="primary","w-button--secondary":this.variant==="secondary","w-button--negative":this.variant==="negative","w-button--utility":this.variant==="utility","w-button--quiet":this.variant==="quiet","w-button--negative-quiet":this.variant==="negativeQuiet","w-button--utility-quiet":this.variant==="utilityQuiet","w-button--small":this.small,"w-button--full-width":this.fullWidth,"w-button--disabled":this.disabled};return H`<a
+    }`;var p=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],r=class extends g{constructor(){super(...arguments);this.variant="secondary"}connectedCallback(){if(super.connectedCallback(),!p.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
+${p.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}render(){let i={"w-button":this.variant!=="link","w-button--primary":this.variant==="primary","w-button--secondary":this.variant==="secondary","w-button--negative":this.variant==="negative","w-button--utility":this.variant==="utility","w-button--quiet":this.variant==="quiet","w-button--negative-quiet":this.variant==="negativeQuiet","w-button--utility-quiet":this.variant==="utilityQuiet","w-button--overlay":this.variant==="overlay","w-button--overlay-inverted":this.variant==="overlayInverted","w-button--overlay-quiet":this.variant==="overlayQuiet","w-button--overlay-inverted-quiet":this.variant==="overlayInvertedQuiet","w-button--small":this.small,"w-button--full-width":this.fullWidth,"w-button--disabled":this.disabled};return m`<a
       href=${this.href}
       target=${this.target}
       rel=${this.target==="_blank"?this.rel||"noopener":void 0}
-      class=${D(e)}>
+      class=${f(i)}>
       <slot></slot>
-    </a>`}};c.shadowRootOptions={...Q.shadowRootOptions,delegatesFocus:!0},c.styles=[U,$],h([g({type:Boolean,reflect:!0})],c.prototype,"autofocus",2),h([g({reflect:!0})],c.prototype,"variant",2),h([g({type:Boolean,reflect:!0})],c.prototype,"quiet",2),h([g({type:Boolean,reflect:!0})],c.prototype,"small",2),h([g({reflect:!0})],c.prototype,"href",2),h([g({type:Boolean,reflect:!0})],c.prototype,"disabled",2),h([g({reflect:!0})],c.prototype,"target",2),h([g({reflect:!0})],c.prototype,"rel",2),h([g({attribute:"full-width",type:Boolean,reflect:!0})],c.prototype,"fullWidth",2),h([g({attribute:"button-class",reflect:!0})],c.prototype,"buttonClass",2),h([g({reflect:!0})],c.prototype,"name",2);customElements.get("w-link")||customElements.define("w-link",c);export{c as WarpLink};
+    </a>`}};r.shadowRootOptions={...g.shadowRootOptions,delegatesFocus:!0},r.styles=[b,v],e([o({type:Boolean,reflect:!0})],r.prototype,"autofocus",2),e([o({reflect:!0})],r.prototype,"variant",2),e([o({type:Boolean,reflect:!0})],r.prototype,"small",2),e([o({reflect:!0})],r.prototype,"href",2),e([o({type:Boolean,reflect:!0})],r.prototype,"disabled",2),e([o({reflect:!0})],r.prototype,"target",2),e([o({reflect:!0})],r.prototype,"rel",2),e([o({attribute:"full-width",type:Boolean,reflect:!0})],r.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",r);export{r as WarpLink};
 //# sourceMappingURL=index.js.map