@warp-ds/elements 2.0.0-next.3 → 2.0.0-next.5

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

@@ -58,6 +58,12 @@ export class WarpButton extends WarpButton_base {
     ariaValueTextLoading: string;
     connectedCallback(): void;
     firstUpdated(): void;
+    get _primaryClasses(): string[];
+    get _secondaryClasses(): string[];
+    get _utilityClasses(): string[];
+    get _negativeClasses(): string[];
+    get _pillClasses(): string[];
+    get _linkClasses(): string[];
     get _classes(): string;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/packages/button/index.js

@@ -1388,41 +1388,7 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// node_modules/.pnpm/@warp-ds+css@2.0.0-next.4_@warp-ds+uno@2.0.0_unocss@0.61.3_postcss@8.4.39_rollup@4.18.1_vite@_fn7nbuinwdlc4yeboswpxt5lie/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: "s-surface-sunken",
-  bordered: "border-2 s-border s-bg"
-};
-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-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",
-  chevronNonBox: "ml-8",
-  chevronBox: "",
-  chevronTransform: "transform transition-transform transform-gpu ease-in-out",
-  chevronExpand: "-rotate-180",
-  chevronCollapse: "rotate-180",
-  elementsTransformChevronDownPart: "part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out",
-  elementsChevronDownExpandPart: "part-[w-icon-chevron-down-16-part]:-rotate-180",
-  elementsTransformChevronUpPart: "part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out",
-  elementsChevronUpCollapsePart: "part-[w-icon-chevron-up-16-part]:rotate-180",
-  expansion: "overflow-hidden",
-  expansionNotExpanded: "h-0 invisible",
-  button: buttonReset + " hover:underline focus-visible:underline",
-  buttonBox: "w-full text-left relative inline-flex items-center justify-between " + box.box,
-  paddingTop: "pt-0",
-  title: "flex w-full justify-between items-center",
-  titleType: "h4"
-};
+// node_modules/.pnpm/@warp-ds+css@2.0.0_@warp-ds+uno@2.0.0_unocss@0.62.0_postcss@8.4.41_rollup@4.20.0_vite@5.3.3_@_vyiy5vwpqfzwy5hpmfkwp3zmle/node_modules/@warp-ds/css/component-classes/index.js
 var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
 var buttonColors = {
   primary: "s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",
@@ -1540,7 +1506,7 @@ var button = {
 };
 var modal = {
   backdrop: "fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px] bg-[--w-black/25]",
-  modal: "pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",
+  base: "pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",
   content: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
   footer: "flex justify-end shrink-0 px-16 sm:px-32",
   transitionTitle: "transition-all duration-300",
@@ -1554,19 +1520,15 @@ var modal = {
   titleButtonIcon: "h-16 w-16 sm:h-24 sm:w-24",
   titleButtonIconRotated: "transform rotate-90"
 };
-var label = {
-  label: "antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",
-  optional: "pl-8 font-normal text-s s-text-subtle"
-};
-var prefixSuffixWrapperBase = "absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ";
+var prefixSuffixWrapper = "absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ";
 var suffix = {
-  wrapper: prefixSuffixWrapperBase + "right-0",
+  wrapper: prefixSuffixWrapper + "right-0",
   wrapperWithLabel: "w-max pr-12",
   wrapperWithIcon: "w-40",
   label: "antialiased block relative cursor-default pb-0 font-bold text-xs s-text"
 };
 var prefix = {
-  wrapper: prefixSuffixWrapperBase + "left-0",
+  wrapper: prefixSuffixWrapper + "left-0",
   wrapperWithLabel: "w-max pl-12",
   wrapperWithIcon: "w-40",
   label: "antialiased block relative cursor-default pb-0 font-bold text-xs s-text"
@@ -1623,15 +1585,9 @@ var deadToggle = {
   wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,
   input: `${toggle.input} hidden`,
   inputVue: "hidden",
+  labelVue: "-mt-2",
   labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,
-  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,
-  labelVue: "-mt-2"
-};
-var clickable = {
-  toggle: "absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",
-  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,
-  buttonOrLink: "bg-transparent focusable",
-  buttonOrLinkStretch: "inset-0 absolute"
+  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`
 };
 var attention = {
   base: "border-2 relative flex items-start",
@@ -1752,59 +1708,66 @@ ${buttonTypes2.join(", ")}.`);
       setTimeout(() => this.focus(), 0);
     }
   }
+  get _primaryClasses() {
+    return [
+      !this.small && !this.quiet && !this.loading && button.primary,
+      this.small && !this.quiet && !this.loading && button.primarySmall,
+      this.small && this.quiet && !this.loading && button.primarySmallQuiet,
+      this.small && this.loading && (this.quiet ? button.primarySmallQuietLoading : button.primarySmallLoading),
+      !this.small && this.quiet && !this.loading && button.primaryQuiet,
+      !this.small && this.loading && (this.quiet ? button.primaryQuietLoading : button.primaryLoading)
+    ];
+  }
+  get _secondaryClasses() {
+    return [
+      !this.small && !this.quiet && !this.loading && button.secondary,
+      this.small && !this.quiet && !this.loading && button.secondarySmall,
+      this.small && this.loading && (this.quiet ? button.secondarySmallQuietLoading : button.secondarySmallLoading),
+      this.small && this.quiet && !this.loading && button.secondarySmallQuiet,
+      !this.small && this.quiet && !this.loading && button.secondaryQuiet,
+      !this.small && this.loading && (this.quiet ? button.secondaryQuietLoading : button.secondaryLoading)
+    ];
+  }
+  get _utilityClasses() {
+    return [
+      !this.small && !this.quiet && !this.loading && button.utility,
+      this.small && !this.quiet && !this.loading && button.utilitySmall,
+      this.small && this.quiet && !this.loading && button.utilitySmallQuiet,
+      this.small && this.loading && (this.quiet ? button.utilitySmallQuietLoading : button.utilitySmallLoading),
+      !this.small && this.quiet && !this.loading && button.utilityQuiet,
+      !this.small && this.loading && (this.quiet ? button.utilityQuietLoading : button.utilityLoading)
+    ];
+  }
+  get _negativeClasses() {
+    return [
+      !this.small && !this.quiet && !this.loading && button.negative,
+      this.small && !this.quiet && !this.loading && button.negativeSmall,
+      this.small && this.quiet && !this.loading && button.negativeSmallQuiet,
+      this.small && this.loading && (this.quiet ? button.negativeSmallQuietLoading : button.negativeSmallLoading),
+      !this.small && this.quiet && !this.loading && button.negativeQuiet,
+      !this.small && this.loading && (this.quiet ? button.negativeQuietLoading : button.negativeLoading)
+    ];
+  }
+  get _pillClasses() {
+    return [
+      !this.loading && (this.small ? button.pillSmall : button.pill),
+      this.loading && (this.small ? button.pillSmallLoading : button.pillLoading)
+    ];
+  }
+  get _linkClasses() {
+    return [this.small ? button.linkSmall : button.link];
+  }
   get _classes() {
-    const primary = this.variant === "primary";
-    const secondary = this.variant === "secondary";
-    const negative = this.variant === "negative";
-    const utility = this.variant === "utility";
-    const pill = this.variant === "pill";
-    const link = this.variant === "link";
-    return r(
-      {
-        [button.secondary]: secondary && !this.small && !this.quiet && !this.loading,
-        [button.secondarySmall]: secondary && this.small && !this.quiet && !this.loading,
-        [button.secondarySmallLoading]: secondary && this.small && !this.quiet && this.loading,
-        [button.secondarySmallQuiet]: secondary && this.small && this.quiet && !this.loading,
-        [button.secondarySmallQuietLoading]: secondary && this.small && this.quiet && this.loading,
-        [button.secondaryQuiet]: secondary && !this.small && this.quiet && !this.loading,
-        [button.secondaryQuietLoading]: secondary && !this.small && this.quiet && this.loading,
-        [button.secondaryLoading]: secondary && !this.small && !this.quiet && this.loading,
-        [button.primary]: primary && !this.small && !this.quiet && !this.loading,
-        [button.primarySmall]: primary && this.small && !this.quiet && !this.loading,
-        [button.primarySmallQuiet]: primary && this.small && this.quiet && !this.loading,
-        [button.primarySmallLoading]: primary && this.small && !this.quiet && this.loading,
-        [button.primarySmallQuietLoading]: primary && this.small && this.quiet && this.loading,
-        [button.primaryQuiet]: primary && !this.small && this.quiet && !this.loading,
-        [button.primaryQuietLoading]: primary && !this.small && this.quiet && this.loading,
-        [button.primaryLoading]: primary && !this.small && !this.quiet && this.loading,
-        [button.utility]: utility && !this.small && !this.quiet && !this.loading,
-        [button.utilitySmall]: utility && this.small && !this.quiet && !this.loading,
-        [button.utilitySmallQuiet]: utility && this.small && this.quiet && !this.loading,
-        [button.utilitySmallLoading]: utility && this.small && !this.quiet && this.loading,
-        [button.utilitySmallQuietLoading]: utility && this.small && this.quiet && this.loading,
-        [button.utilityQuiet]: utility && !this.small && this.quiet && !this.loading,
-        [button.utilityQuietLoading]: utility && !this.small && this.quiet && this.loading,
-        [button.utilityLoading]: utility && !this.small && !this.quiet && this.loading,
-        [button.negative]: negative && !this.small && !this.quiet && !this.loading,
-        [button.negativeSmall]: negative && this.small && !this.quiet && !this.loading,
-        [button.negativeSmallQuiet]: negative && this.small && this.quiet && !this.loading,
-        [button.negativeSmallLoading]: negative && this.small && !this.quiet && this.loading,
-        [button.negativeSmallQuietLoading]: negative && this.small && this.quiet && this.loading,
-        [button.negativeQuiet]: negative && !this.small && this.quiet && !this.loading,
-        [button.negativeQuietLoading]: negative && !this.small && this.quiet && this.loading,
-        [button.negativeLoading]: negative && !this.small && !this.quiet && this.loading,
-        [button.pill]: pill && !this.small && !this.loading,
-        [button.pillSmall]: pill && this.small && !this.loading,
-        [button.pillLoading]: pill && !this.small && this.loading,
-        [button.pillSmallLoading]: pill && this.small && this.loading,
-        [button.link]: link && !this.small,
-        [button.linkSmall]: link && this.small,
-        [button.linkAsButton]: !!this.href,
-        [button.fullWidth]: this.fullWidth,
-        [button.contentWidth]: !this.fullWidth
-      },
-      this.buttonClass
-    );
+    return r(this.buttonClass, [
+      this.variant === "primary" && this._primaryClasses,
+      this.variant === "secondary" && this._secondaryClasses,
+      this.variant === "utility" && this._utilityClasses,
+      this.variant === "negative" && this._negativeClasses,
+      this.variant === "pill" && this._pillClasses,
+      this.variant === "link" && this._linkClasses,
+      this.href && button.linkAsButton,
+      this.fullWidth ? button.fullWidth : button.contentWidth
+    ]);
   }
   render() {
     return html` ${this.href ? html`<a