@warp-ds/elements 1.3.3 → 1.3.4-next.1

package/dist/index.js

@@ -1045,7 +1045,7 @@ import { html as html3 } from "lit";
 import WarpElement from "@warp-ds/elements-core";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-// node_modules/.pnpm/@warp-ds+css@1.9.1/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.9.3/node_modules/@warp-ds/css/component-classes/index.js
 var badge = {
   base: "py-4 px-8 border-0 rounded-4 text-xs inline-flex",
   neutral: "bg-[--w-color-badge-neutral-background] s-text",
@@ -1070,11 +1070,14 @@ var box = {
   bleed: "-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",
   // We target L and R to override the default rounded-8
   info: "s-bg-info-subtle",
-  neutral: "bg-[--w-s-color-surface-sunken]",
+  neutral: "s-surface-sunken",
   bordered: "border-2 s-border s-bg",
-  infoClickable: "hover:s-bg-info-subtle-hover active:s-bg-info-subtle-hover",
-  neutralClickable: "hover:s-bg-subtle-hover active:s-bg-subtle-hover",
-  borderedClickable: "hover:s-bg-hover active:s-bg-hover hover:s-border-hover active:s-border-hover"
+  infoClickable: "hover:s-bg-info-subtle-hover active:s-bg-info-subtle-active",
+  // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
+  neutralClickable: "hover:s-bg-hover active:s-bg-active",
+  // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
+  borderedClickable: "hover:s-bg-hover active:s-bg-active hover:s-border-hover active:s-border-active"
+  // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
 };
 var pill = {
   pill: "flex items-center",
@@ -1089,15 +1092,16 @@ var pill = {
 };
 var card = {
   card: "cursor-pointer overflow-hidden relative transition-all",
-  cardShadow: "rounded-8 shadow-s hover:shadow-m hover:s-bg-subtle-hover tap-highlight-transparent",
+  cardShadow: "group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active",
+  cardUnselected: "",
+  // TODO: Remove in v2 - Not used after introducing surface
+  cardSelected: "!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active",
+  cardOutline: "absolute border-2 rounded-8 inset-0 transition-all",
+  cardOutlineUnselected: "border-transparent group-active:s-border-active",
+  cardOutlineSelected: "s-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active",
   cardFlat: "border-2 rounded-4",
-  cardFlatUnselected: "s-bg s-border hover:s-bg-hover hover:s-border-hover active:s-bg-active active:s-border-active",
-  cardFlatSelected: "s-border-selected s-bg-selected hover:s-bg-selected-hover hover:s-border-selected-hover active:s-border-selected-active active:s-bg-selected-active",
-  cardUnselected: "s-bg",
-  cardSelected: "s-border-selected s-bg-selected hover:s-border-selected-hover hover:s-bg-selected-hover active:s-border-selected-active active:s-bg-selected-active",
-  cardOutline: "active:s-border absolute rounded-8 inset-0 transition-all border-2",
-  cardOutlineUnselected: "border-transparent",
-  cardOutlineSelected: "s-border-selected hover:s-border-selected-hover",
+  cardFlatUnselected: "s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active",
+  cardFlatSelected: "s-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active",
   a11y: "sr-only"
 };
 var toaster = {
@@ -1123,7 +1127,7 @@ var buttonReset = "focus:outline-none appearance-none cursor-pointer bg-transpar
 var expandable = {
   expandable: "will-change-height",
   expandableTitle: "font-bold s-text",
-  expandableBox: "s-bg-subtle hover:s-bg-subtle-hover py-0 px-0 " + box.box,
+  expandableBox: "s-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 " + box.box,
   expandableInfo: "s-bg-info-subtle! hover:s-bg-info-subtle-hover!",
   expandableBleed: box.bleed,
   chevron: "inline-block align-middle s-icon",
@@ -1164,7 +1168,7 @@ var buttonTypes = {
   utility: `border rounded-4 ${buttonDefaultStyling}`,
   negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
   pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
-  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`
+  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${buttonColors.link}`
 };
 var buttonSizes = {
   xsmall: "py-6 px-16",
@@ -1254,7 +1258,7 @@ var button = {
   pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
   link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,
   linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,
-  linkAsButton: "inline-block hover:no-underline text-center",
+  linkAsButton: "inline-block active:no-underline hover:no-underline focus:no-underline text-center",
   a11y: "sr-only",
   fullWidth: "w-full max-w-full",
   contentWidth: "max-w-max"
@@ -3637,16 +3641,16 @@ var WarpCard = class extends WarpElement9 {
     this.flat = false;
     this.clickable = false;
   }
-  get _outerClasses() {
+  get _containerClasses() {
     return fclasses({
       [card.card]: true,
       [card.cardShadow]: !this.flat,
-      [this.selected ? card.cardSelected : card.cardUnselected]: !this.flat,
+      [card.cardSelected]: !this.flat && this.selected,
       [card.cardFlat]: this.flat,
       [this.selected ? card.cardFlatSelected : card.cardFlatUnselected]: this.flat
     });
   }
-  get _innerClasses() {
+  get _outlineClasses() {
     return fclasses({
       [card.cardOutline]: true,
       [this.selected ? card.cardOutlineSelected : card.cardOutlineUnselected]: true
@@ -3668,9 +3672,9 @@ var WarpCard = class extends WarpElement9 {
   }
   render() {
     return html15`
-      <div tabindex=${ifDefined3(this.clickable ? "0" : void 0)} class="${this._outerClasses}" @keydown=${this.keypressed}>
+      <div tabindex=${ifDefined3(this.clickable ? "0" : void 0)} class="${this._containerClasses}" @keydown=${this.keypressed}>
         ${this.clickable ? this.uuButton : ""} ${!this.clickable && this.selected ? this.uuSpan : ""}
-        <div class="${this._innerClasses}"></div>
+        <div class="${this._outlineClasses}"></div>
         <slot></slot>
       </div>
     `;