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

package/dist/packages/affix/index.js

@@ -1029,24 +1029,27 @@ 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 box = {
   box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
   // Relative here enables w-clickable
   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 buttonReset = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block";
 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",
@@ -1087,7 +1090,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",
@@ -1177,7 +1180,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"