@warp-ds/elements 1.4.0-next.1 → 1.4.0-next.3

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",
@@ -2554,8 +2563,6 @@ import { ifDefined as ifDefined2 } from "lit/directives/if-defined.js";
 
 // node_modules/.pnpm/@floating-ui+utils@0.2.1/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var sides = ["top", "right", "bottom", "left"];
-var alignments = ["start", "end"];
-var placements = /* @__PURE__ */ sides.reduce((acc, side2) => acc.concat(side2, side2 + "-" + alignments[0], side2 + "-" + alignments[1]), []);
 var min = Math.min;
 var max = Math.max;
 var round = Math.round;
@@ -2924,106 +2931,6 @@ var arrow = (options) => ({
     };
   }
 });
-function getPlacementList(alignment, autoAlignment, allowedPlacements) {
-  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter((placement) => getAlignment(placement) === alignment), ...allowedPlacements.filter((placement) => getAlignment(placement) !== alignment)] : allowedPlacements.filter((placement) => getSide(placement) === placement);
-  return allowedPlacementsSortedByAlignment.filter((placement) => {
-    if (alignment) {
-      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
-    }
-    return true;
-  });
-}
-var autoPlacement = function(options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: "autoPlacement",
-    options,
-    async fn(state) {
-      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
-      const {
-        rects,
-        middlewareData,
-        placement,
-        platform: platform2,
-        elements
-      } = state;
-      const _a = evaluate(options, state), {
-        crossAxis = false,
-        alignment,
-        allowedPlacements = placements,
-        autoAlignment = true
-      } = _a, detectOverflowOptions = __objRest(_a, [
-        "crossAxis",
-        "alignment",
-        "allowedPlacements",
-        "autoAlignment"
-      ]);
-      const placements$1 = alignment !== void 0 || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
-      const overflow = await detectOverflow(state, detectOverflowOptions);
-      const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
-      const currentPlacement = placements$1[currentIndex];
-      if (currentPlacement == null) {
-        return {};
-      }
-      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)));
-      if (placement !== currentPlacement) {
-        return {
-          reset: {
-            placement: placements$1[0]
-          }
-        };
-      }
-      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
-      const allOverflows = [...((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || [], {
-        placement: currentPlacement,
-        overflows: currentOverflows
-      }];
-      const nextPlacement = placements$1[currentIndex + 1];
-      if (nextPlacement) {
-        return {
-          data: {
-            index: currentIndex + 1,
-            overflows: allOverflows
-          },
-          reset: {
-            placement: nextPlacement
-          }
-        };
-      }
-      const placementsSortedByMostSpace = allOverflows.map((d) => {
-        const alignment2 = getAlignment(d.placement);
-        return [d.placement, alignment2 && crossAxis ? (
-          // Check along the mainAxis and main crossAxis side.
-          d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0)
-        ) : (
-          // Check only the mainAxis.
-          d.overflows[0]
-        ), d.overflows];
-      }).sort((a, b) => a[1] - b[1]);
-      const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter((d) => d[2].slice(
-        0,
-        // Aligned placements should not check their opposite crossAxis
-        // side.
-        getAlignment(d[0]) ? 2 : 3
-      ).every((v) => v <= 0));
-      const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
-      if (resetPlacement !== placement) {
-        return {
-          data: {
-            index: currentIndex + 1,
-            overflows: allOverflows
-          },
-          reset: {
-            placement: resetPlacement
-          }
-        };
-      }
-      return {};
-    }
-  };
-};
 var flip = function(options) {
   if (options === void 0) {
     options = {};
@@ -3124,6 +3031,65 @@ var flip = function(options) {
     }
   };
 };
+function getSideOffsets(overflow, rect) {
+  return {
+    top: overflow.top - rect.height,
+    right: overflow.right - rect.width,
+    bottom: overflow.bottom - rect.height,
+    left: overflow.left - rect.width
+  };
+}
+function isAnySideFullyClipped(overflow) {
+  return sides.some((side2) => overflow[side2] >= 0);
+}
+var hide = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "hide",
+    options,
+    async fn(state) {
+      const {
+        rects
+      } = state;
+      const _a = evaluate(options, state), {
+        strategy = "referenceHidden"
+      } = _a, detectOverflowOptions = __objRest(_a, [
+        "strategy"
+      ]);
+      switch (strategy) {
+        case "referenceHidden": {
+          const overflow = await detectOverflow(state, __spreadProps(__spreadValues({}, detectOverflowOptions), {
+            elementContext: "reference"
+          }));
+          const offsets = getSideOffsets(overflow, rects.reference);
+          return {
+            data: {
+              referenceHiddenOffsets: offsets,
+              referenceHidden: isAnySideFullyClipped(offsets)
+            }
+          };
+        }
+        case "escaped": {
+          const overflow = await detectOverflow(state, __spreadProps(__spreadValues({}, detectOverflowOptions), {
+            altBoundary: true
+          }));
+          const offsets = getSideOffsets(overflow, rects.floating);
+          return {
+            data: {
+              escapedOffsets: offsets,
+              escaped: isAnySideFullyClipped(offsets)
+            }
+          };
+        }
+        default: {
+          return {};
+        }
+      }
+    }
+  };
+};
 async function convertValueToCoords(state, options) {
   const {
     placement,
@@ -3190,75 +3156,6 @@ var offset = function(options) {
     }
   };
 };
-var shift = function(options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: "shift",
-    options,
-    async fn(state) {
-      const {
-        x,
-        y,
-        placement
-      } = state;
-      const _a = evaluate(options, state), {
-        mainAxis: checkMainAxis = true,
-        crossAxis: checkCrossAxis = false,
-        limiter = {
-          fn: (_ref) => {
-            let {
-              x: x2,
-              y: y2
-            } = _ref;
-            return {
-              x: x2,
-              y: y2
-            };
-          }
-        }
-      } = _a, detectOverflowOptions = __objRest(_a, [
-        "mainAxis",
-        "crossAxis",
-        "limiter"
-      ]);
-      const coords = {
-        x,
-        y
-      };
-      const overflow = await detectOverflow(state, detectOverflowOptions);
-      const crossAxis = getSideAxis(getSide(placement));
-      const mainAxis = getOppositeAxis(crossAxis);
-      let mainAxisCoord = coords[mainAxis];
-      let crossAxisCoord = coords[crossAxis];
-      if (checkMainAxis) {
-        const minSide = mainAxis === "y" ? "top" : "left";
-        const maxSide = mainAxis === "y" ? "bottom" : "right";
-        const min2 = mainAxisCoord + overflow[minSide];
-        const max2 = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = clamp(min2, mainAxisCoord, max2);
-      }
-      if (checkCrossAxis) {
-        const minSide = crossAxis === "y" ? "top" : "left";
-        const maxSide = crossAxis === "y" ? "bottom" : "right";
-        const min2 = crossAxisCoord + overflow[minSide];
-        const max2 = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = clamp(min2, crossAxisCoord, max2);
-      }
-      const limitedCoords = limiter.fn(__spreadProps(__spreadValues({}, state), {
-        [mainAxis]: mainAxisCoord,
-        [crossAxis]: crossAxisCoord
-      }));
-      return __spreadProps(__spreadValues({}, limitedCoords), {
-        data: {
-          x: limitedCoords.x - x,
-          y: limitedCoords.y - y
-        }
-      });
-    }
-  };
-};
 
 // node_modules/.pnpm/@floating-ui+utils@0.2.1/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
 function getNodeName(node) {
@@ -3776,9 +3673,8 @@ var platform = {
   isElement,
   isRTL
 };
-var autoPlacement2 = autoPlacement;
-var shift2 = shift;
 var flip2 = flip;
+var hide2 = hide;
 var arrow2 = arrow;
 var computePosition2 = (reference, floating, options) => {
   const cache2 = /* @__PURE__ */ new Map();
@@ -3793,7 +3689,7 @@ var computePosition2 = (reference, floating, options) => {
   }));
 };
 
-// node_modules/.pnpm/@warp-ds+core@1.1.0_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
+// node_modules/.pnpm/@warp-ds+core@1.1.1_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
 var TOP_START = "top-start";
 var TOP = "top";
 var TOP_END = "top-end";
@@ -3901,12 +3797,12 @@ async function useRecompute(state) {
     middleware: [
       offset({ mainAxis: (_b = state == null ? void 0 : state.distance) != null ? _b : 8, crossAxis: (_c = state == null ? void 0 : state.skidding) != null ? _c : 0 }),
       (state == null ? void 0 : state.flip) && flip2({
-        fallbackAxisSideDirection: "start",
+        crossAxis: state == null ? void 0 : state.crossAxis,
         fallbackPlacements: state == null ? void 0 : state.fallbackPlacements
       }),
-      !(state == null ? void 0 : state.flip) && autoPlacement2(),
-      shift2({ padding: 16 }),
-      !(state == null ? void 0 : state.noArrow) && (state == null ? void 0 : state.arrowEl) && arrow2({ element: state == null ? void 0 : state.arrowEl })
+      !(state == null ? void 0 : state.noArrow) && (state == null ? void 0 : state.arrowEl) && arrow2({ element: state == null ? void 0 : state.arrowEl }),
+      hide2()
+      //will hide the attentionEl when it appears detached from the targetEl. Can be called multiple times in the middleware-array if you want to use several strategies. Default strategy is 'referenceHidden'.
     ]
   }).then(({ x, y, middlewareData, placement }) => {
     state.actualDirection = placement;
@@ -3914,6 +3810,12 @@ async function useRecompute(state) {
       left: `${x}px`,
       top: `${y}px`
     });
+    if ((middlewareData == null ? void 0 : middlewareData.hide) && !(state == null ? void 0 : state.isCallout)) {
+      const { referenceHidden } = middlewareData == null ? void 0 : middlewareData.hide;
+      Object.assign(attentionEl == null ? void 0 : attentionEl.style, {
+        visibility: referenceHidden ? "hidden" : ""
+      });
+    }
     const isRtl = window.getComputedStyle(attentionEl).direction === "rtl";
     const arrowPlacement = arrowDirection(placement).split("-")[1];
     if ((middlewareData == null ? void 0 : middlewareData.arrow) && (state == null ? void 0 : state.arrowEl)) {
@@ -4010,6 +3912,7 @@ var WarpAttention = class extends kebabCaseAttributes(WarpElement3) {
     this.distance = 8;
     this.skidding = 0;
     this.flip = false;
+    this.crossAxis = false;
     this._initialPlacement = this.placement;
     this._actualDirection = this.placement;
   }
@@ -4094,7 +3997,8 @@ ${JSON.stringify(directions)}`);
     return this.renderRoot.querySelector("#attention");
   }
   get _targetEl() {
-    const targetSlot = this.renderRoot.querySelector("slot[name='target']");
+    var _a;
+    const targetSlot = (_a = this.renderRoot) == null ? void 0 : _a.querySelector("slot[name='target']");
     return targetSlot ? targetSlot.assignedNodes()[0] : null;
   }
   get _messageEl() {
@@ -4140,6 +4044,7 @@ ${JSON.stringify(directions)}`);
       distance: this.distance,
       skidding: this.skidding,
       flip: this.flip,
+      crossAxis: this.crossAxis,
       fallbackPlacements: this.fallbackPlacements
     };
     useRecompute(this.attentionState);
@@ -4244,6 +4149,8 @@ ${JSON.stringify(directions)}`);
     }
   }
   render() {
+    if (!this.callout && this._targetEl === void 0)
+      return html9``;
     return html9`
       <div class=${ifDefined2(this.className ? this.className : void 0)}>
         ${this.placement === "right-start" || this.placement === "right" || this.placement === "right-end" || this.placement === "bottom-start" || this.placement === "bottom" || this.placement === "bottom-end" ? html9`
@@ -4289,6 +4196,8 @@ __publicField(WarpAttention, "properties", {
   skidding: { type: Number, reflect: true },
   // Whether Attention element should flip its placement in order to keep it in view
   flip: { type: Boolean, reflect: true },
+  // Whether Attention element should ignore cross axis overflow when flip is enabled
+  crossAxis: { type: Boolean, reflect: true },
   // Choose which preferred placements the Attention element should flip to
   fallbackPlacements: { type: Array, reflect: true }
 });
@@ -4406,7 +4315,7 @@ if (!customElements.get("w-box")) {
 import { html as html12 } from "lit";
 import WarpElement6 from "@warp-ds/elements-core";
 
-// node_modules/.pnpm/@warp-ds+core@1.1.0_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/breadcrumbs/index.js
+// node_modules/.pnpm/@warp-ds+core@1.1.1_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/breadcrumbs/index.js
 function interleave(array, separator2) {
   return array.flatMap((el) => [el, separator2]).slice(0, -1);
 }
@@ -5252,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
@@ -5355,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")) {