@warp-ds/elements 2.8.2-next.5 → 2.9.0-next.1

package/dist/packages/datepicker/styles/w-datepicker.styles.js

@@ -57,21 +57,15 @@ export const wDatepickerStyles = css `
 
   /* custom calendar button */
   .w-datepicker-button {
+    --padding-x: 14px;
+    --padding-y: 14px;
+    --border-radius: 2px; /* override to better fit inside the input field */
     position: absolute;
     right: 2px;
     top: 2px;
-    height: 44px;
-    width: 44px !important;
-    border-radius: 2px !important;
-    border: none;
-    cursor: pointer;
     pointer-events: auto; /* override parent’s none */
   }
 
-  .w-datepicker-button:not(:hover) {
-    background-color: var(--w-s-color-background) !important;
-  }
-
   input[type='date']::-webkit-inner-spin-button,
   input[type='date']::-webkit-calendar-picker-indicator {
     display: none;

package/dist/packages/link/link.js

@@ -1,4 +1,4 @@
-var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(d,n,r,i)=>{for(var a=i>1?void 0:i?h(n,r):n,c=d.length-1,l;c>=0;c--)(l=d[c])&&(a=(i?l(n,r,a):l(a))||a);return i&&a&&u(n,r,a),a};import{html as m,LitElement as g}from"lit";import{property as t}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{css as s}from"lit";var b=s`
+var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var e=(n,a,d,i)=>{for(var t=i>1?void 0:i?u(a,d):a,c=n.length-1,l;c>=0;c--)(l=n[c])&&(t=(i?l(a,d,t):l(t))||t);return i&&t&&h(a,d,t),t};import{html as m,LitElement as g,nothing as f}from"lit";import{property as o}from"lit/decorators.js";import{css as s}from"lit";var b=s`
   *,
   :before,
   :after {
@@ -2437,246 +2437,226 @@ var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(d,n,r,i
                     display: none
                 }
             }
-        `;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 */
+        `;import{css as w}from"lit";var v=w`
+  /* If not a link variant this should look like a button */
+  :host(:not([variant="link"])) {
     --_background: var(--background, var(--w-s-color-background));
-    --_background-hover: var(--background-hover, var(--w-s-color-background-hover));
-    --_background-active: var(--background-active, var(--w-s-color-background-active));
+    --_background-hover: var(
+      --background-hover,
+      var(--w-s-color-background-hover)
+    );
+    --_background-active: var(
+      --background-active,
+      var(--w-s-color-background-active)
+    );
     --_text-color: var(--color, var(--w-s-color-text-link));
+    --_text-color-hover: var(--color-hover, var(--w-s-color-text-link));
+    --_text-color-active: var(--color-active, var(--w-s-color-text-link));
     --_border-width: var(--border-width, 2px);
     --_border: var(--border, var(--w-s-color-border));
     --_border-hover: var(--border-hover, var(--w-s-color-border-hover));
     --_border-active: var(--border-active, var(--w-s-color-border-active));
-    --_border-radius: var(--w-button-radius-default, 8px);
+    --_border-radius: var(--border-radius, var(--w-button-radius-default, 8px));
     --_font-size: var(--font-size, var(--w-font-size-m));
     --_line-height: var(--line-height, var(--w-line-height-m));
     --_font-weight: var(--font-weight, bold);
     --_padding-x: var(--padding-x, 16px);
     --_padding-y: var(--padding-y, 13px);
+  }
 
-    /* Base setup for all buttons */
+  :host(:not([variant="link"])) a {
     display: inline-flex;
     justify-content: center;
     align-items: center;
     text-align: center;
+    text-decoration: none;
     cursor: pointer;
     transition:
-            color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-            background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-            border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-            fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
-            stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
-    /* Hook the local vars up to the button stuff  */
     background-color: var(--_background);
     color: var(--_text-color);
     border: var(--_border-width) solid var(--_border);
     border-radius: var(--_border-radius);
-    padding: calc(var(--_padding-y) - var(--_border-width)) calc(var(--_padding-x) - var(--_border-width));
+    padding: calc(var(--_padding-y) - var(--_border-width))
+      calc(var(--_padding-x) - var(--_border-width));
     font-size: var(--_font-size);
     line-height: var(--_line-height);
     font-weight: var(--_font-weight);
-}
-
-    .w-button:hover {
-        background-color: var(--_background-hover);
-        border-color: var(--_border-hover);
-    }
-
-    .w-button:active {
-        background-color: var(--_background-active);
-        border-color: var(--_border-active);
-    }
-
-    .w-button:focus-visible {
-        outline: 2px solid var(--w-s-color-border-focus);
-        outline-offset: var(--w-outline-offset, 1px);
-    }
-
-    /* Variants config */
-    .w-button--primary {
-        --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;
-    }
-    .w-button--negative {
-        --background: var(--w-s-color-background-negative);
-        --background-hover: var(--w-s-color-background-negative-hover);
-        --background-active: var(--w-s-color-background-negative-active);
-        --color: var(--w-s-color-text-inverted);
-        --border-width: 0px;
-    }
-    .w-button--negative-quiet {
-        --background: transparent;
-        --background-hover: var(--w-s-color-background-negative-subtle-hover);
-        --background-active: var(--w-s-color-background-negative-subtle-active);
-        --color: var(--w-s-color-text-negative);
-        --border-width: 0px;
-    }
-    .w-button--utility {
-        --background: var(--w-s-color-background);
-        --background-hover: var(--w-s-color-background-hover);
-        --background-active: var(--w-s-color-background-active);
-        --color: var(--w-s-color-text);
-        --border-radius: var(--w-button-radius-utility, 4px);
-        --border-width: 1px;
-    }
-    .w-button--utility-quiet {
-        --background: transparent;
-        --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);
-        --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;
-    }
-
-    .w-button--link {
-        --background: none;
-        --background-hover: none;
-        --background-active: none;
-        --border-width: 0;
-        --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,
-    .w-button--disabled,
-    .w-button--loading {
-        --background: var(--w-s-color-background-disabled);
-        --background-hover: var(--w-s-color-background-disabled);
-        --background-active: var(--w-s-color-background-disabled);
-        --color: var(--w-s-color-text-inverted);
-        --border-width: 0px;
-        pointer-events: none;
-    }
-
-    .w-button--link:hover {
-        text-decoration: underline;
-    }
-
-    /* Sizes config */
-    .w-button--small {
-        --padding-x: 12px;
-        --padding-y: 8px;
-        --font-size: var(--w-font-size-xs);
-        --line-height: var(--w-line-height-xs);
-    }
-
-    /* Width config */
-    .w-button--full-width {
-        width: 100%;
-        max-width: 100%;
-    }
-
-    .w-button--has-icon-only {
-        width: auto;
-        max-width: none;
-        --_padding-x: var(--_padding-y);
-        aspect-ratio: 1 / 1;
-    }
-
-    a.w-button {
-        text-decoration: none !important;
-    }
-
-    /* Copy of loading animation from warp  */
-    .w-button--loading {
-        background-image: linear-gradient(
-                135deg,
-                rgba(0, 0, 0, 0.05) 25%,
-                transparent 25%,
-                transparent 50%,
-                rgba(0, 0, 0, 0.05) 50%,
-                rgba(0, 0, 0, 0.05) 75%,
-                transparent 75%,
-                transparent
-        );
-        background-size: 30px 30px;
-        animation: animate-inprogress 3s linear infinite;
-    }
-
-    @keyframes animate-inprogress {
-        0% {
-            background-position: 0 0;
-        }
-        100% {
-            background-position: 60px 0;
-        }
-    }`;var p=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","quiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],e=class extends g{constructor(){super(...arguments);this.autofocus=!1;this.small=!1;this.disabled=!1;this.fullWidth=!1}connectedCallback(){if(super.connectedCallback(),this.variant&&!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 r=this.variant||"secondary",i={"w-button":r!=="link","w-button--primary":r==="primary","w-button--secondary":r==="secondary"||!this.variant,"w-button--negative":r==="negative","w-button--utility":r==="utility","w-button--quiet":r==="quiet","w-button--negative-quiet":r==="negativeQuiet","w-button--utility-quiet":r==="utilityQuiet","w-button--overlay":r==="overlay","w-button--overlay-inverted":r==="overlayInverted","w-button--overlay-quiet":r==="overlayQuiet","w-button--overlay-inverted-quiet":r==="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=${f(i)}>
-      <slot></slot>
-    </a>`}};e.shadowRootOptions={...g.shadowRootOptions,delegatesFocus:!0},e.styles=[b,v],o([t({type:Boolean,reflect:!0})],e.prototype,"autofocus",2),o([t({reflect:!0})],e.prototype,"variant",2),o([t({type:Boolean,reflect:!0})],e.prototype,"small",2),o([t({reflect:!0})],e.prototype,"href",2),o([t({type:Boolean,reflect:!0})],e.prototype,"disabled",2),o([t({reflect:!0})],e.prototype,"target",2),o([t({reflect:!0})],e.prototype,"rel",2),o([t({attribute:"full-width",type:Boolean,reflect:!0})],e.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",e);export{e as WarpLink};
+  }
+
+  :host(:not([variant="link"])) a:hover {
+    background-color: var(--_background-hover);
+    border-color: var(--_border-hover);
+    color: var(--_text-color-hover);
+  }
+
+  :host(:not([variant="link"])) a:active {
+    background-color: var(--_background-active);
+    border-color: var(--_border-active);
+    color: var(--_text-color-active);
+  }
+
+  :host(:not([variant="link"])) a:focus-visible {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+  }
+
+  /* Variants config */
+  :host([variant="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);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-width: 0px;
+  }
+  :host([variant="quiet"]),
+  :host([quiet]) /* deprecated, backwards compatibility, use variant="quiet" */ {
+    --background: transparent;
+    --color: var(--w-s-color-text-link);
+    --color-hover: var(--w-s-color-text-link-hover);
+    --color-active: var(--w-s-color-text-link-active);
+    --border-width: 0px;
+  }
+  :host([variant="negative"]) {
+    --background: var(--w-s-color-background-negative);
+    --background-hover: var(--w-s-color-background-negative-hover);
+    --background-active: var(--w-s-color-background-negative-active);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-width: 0px;
+  }
+  :host([variant="negativeQuiet"]),
+  :host([quiet][variant="negative"]) /* deprecated, backwards compatibility */ {
+    --background: transparent;
+    --background-hover: var(--w-s-color-background-negative-subtle-hover);
+    --background-active: var(--w-s-color-background-negative-subtle-active);
+    --color: var(--w-s-color-text-negative);
+    --color-hover: var(--w-s-color-text-negative);
+    --color-active: var(--w-s-color-text-negative);
+    --border-width: 0px;
+  }
+  :host([variant="utility"]) {
+    --background: var(--w-s-color-background);
+    --background-hover: var(--w-s-color-background-hover);
+    --background-active: var(--w-s-color-background-active);
+    --color: var(--w-s-color-text);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-radius: var(--w-button-radius-utility, 4px);
+    --border-width: 1px;
+  }
+  :host([variant="utilityQuiet"]),
+  :host([quiet][variant="utility"]) /* deprecated, backwards compatibility */ {
+    --background: transparent;
+    --color: var(--w-s-color-text);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-width: 0px;
+  }
+  :host([variant="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);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-radius: 9999px;
+    --border-width: 0px;
+  }
+  :host([variant="overlayQuiet"]),
+  :host([quiet][variant="overlay"]) /* deprecated, backwards compatibility */ {
+    --background: transparent;
+    --background-hover: var(--w-s-color-background-hover);
+    --background-active: var(--w-s-color-background-active);
+    --color: var(--w-s-color-text);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-radius: 9999px;
+    --border-width: 0px;
+  }
+  :host([variant="overlayInverted"]) {
+    --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);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-radius: 9999px;
+    --border-width: 0px;
+  }
+  :host([variant="overlayInvertedQuiet"]),
+  :host([quiet][variant="overlayInverted"]) /* deprecated, backwards compatibility */ {
+    --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);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-radius: 9999px;
+    --border-width: 0px;
+  }
+
+  :host([variant="link"]) {
+    --background: none;
+    --background-hover: none;
+    --background-active: none;
+    --border-width: 0px;
+    --font-weight: normal;
+    display: inline;
+  }
+
+  /* States config,  selects --loading as well since loading is always supposed to be disabled */
+  :host(:disabled),
+  :host([disabled]) {
+    --background: var(--w-s-color-background-disabled);
+    --background-hover: var(--w-s-color-background-disabled);
+    --background-active: var(--w-s-color-background-disabled);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-width: 0px;
+  }
+
+  :host(:disabled) a,
+  :host([disabled]) a {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  :host([variant="link"]):hover a {
+    text-decoration: underline;
+  }
+
+  /* Sizes config */
+  :host([small]) {
+    --padding-x: 12px;
+    --padding-y: 8px;
+    --font-size: var(--w-font-size-xs);
+    --line-height: var(--w-line-height-xs);
+  }
+
+  /* Width config */
+  :host([full-width]) a {
+    width: 100%;
+    max-width: 100%;
+  }
+`;var p=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","quiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],r=class extends g{constructor(){super(...arguments);this.autofocus=!1;this.small=!1;this.disabled=!1;this.fullWidth=!1}connectedCallback(){if(super.connectedCallback(),this.variant&&!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(){return m`
+      <a
+        href="${this.href}"
+        target="${this.target}"
+        rel="${this.target==="_blank"?this.rel||"noopener":f}"
+        tabindex="0"
+      >
+        <slot></slot>
+      </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=link.js.map