@warp-ds/elements 1.4.0-next.2 → 1.4.0

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.3/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.9.6/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",
@@ -1297,15 +1297,24 @@ var alert = {
   infoIcon: "s-icon-info"
 };
 var input = {
-  default: "block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-selected rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current",
-  textArea: "min-h-[42] sm:min-h-[45]",
-  disabled: "s-bg-disabled-subtle s-border-disabled hover:s-border-disabled! s-text-disabled pointer-events-none",
-  invalid: "s-border-negative s-text-negative! hover:s-border-negative-hover! outline-[--w-s-color-border-negative]!",
-  readOnly: "pl-0 bg-transparent! border-0! pointer-events-none",
-  placeholder: "placeholder:s-text-placeholder",
+  // wrapper classes
   wrapper: "relative",
+  // input classes
+  base: "block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",
+  // true
+  default: "border-1 s-text s-bg s-border hover:s-border-hover active:s-border-selected",
+  // !isInvalid && !isDisabled && !isReadOnly
+  disabled: "border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",
+  // !isInvalid && isDisabled && !isReadOnly
+  invalid: "border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",
+  // isInvalid && !isDisabled && !isReadOnly
+  readOnly: "pl-0 bg-transparent pointer-events-none",
+  // !isInvalid && !isDisabled && isReadOnly
+  placeholder: "placeholder:s-text-placeholder",
   suffix: "pr-40",
-  prefix: "pl-40"
+  prefix: "pl-[var(--w-prefix-width,_40px)]",
+  // textarea classes
+  textArea: "min-h-[42] sm:min-h-[45]"
 };
 var select = {
   default: "block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current",
@@ -5152,19 +5161,18 @@ var WarpTextField = class extends WarpElement13 {
     this.type = "text";
   }
   get _inputStyles() {
-    return fclasses({
-      [input.default]: true,
-      [input.invalid]: this.invalid,
-      [input.disabled]: this.disabled,
-      [input.readOnly]: this.readOnly,
+    return classes({
+      [input.base]: true,
+      [input.default]: !this.invalid && !this.disabled && !this.readOnly,
+      [input.invalid]: this.invalid && !this.disabled && !this.readOnly,
+      [input.disabled]: !this.invalid && this.disabled && !this.readOnly,
+      [input.readOnly]: !this.invalid && !this.disabled && this.readOnly,
       [input.suffix]: this._hasSuffix,
-      // we style input with prefix here because we cannot use
-      // arbitrary values with commas in UnoCSS like pl-[var(--w-prefix-width, 40px)]
-      "warp-input-with-prefix": this._hasPrefix
+      [input.prefix]: this._hasPrefix
     });
   }
   get _helpTextStyles() {
-    return fclasses({
+    return classes({
       [helpText.helpText]: true,
       [helpText.helpTextColor]: !this.invalid,
       [helpText.helpTextColorInvalid]: this.invalid
@@ -5255,9 +5263,6 @@ __publicField(WarpTextField, "styles", [
       ::slotted(:last-child) {
         margin-bottom: 0px !important;
       }
-      .warp-input-with-prefix {
-        padding-left: var(--w-prefix-width, 40px);
-      }
     `
 ]);
 if (!customElements.get("w-textfield")) {