@warp-ds/elements 2.0.2 → 2.1.0-next.2

package/dist/packages/attention/index.js

@@ -645,13 +645,13 @@ var require_moo = __commonJS({
           line: this.line,
           col: this.col
         };
-        var size2 = text.length;
-        this.index += size2;
+        var size3 = text.length;
+        this.index += size3;
         this.line += lineBreaks;
         if (lineBreaks !== 0) {
-          this.col = size2 - nl + 1;
+          this.col = size3 - nl + 1;
         } else {
-          this.col += size2;
+          this.col += size3;
         }
         if (group.shouldThrow) {
           var err = new Error(this.formatError(token, "invalid syntax"));
@@ -1306,17 +1306,17 @@ var I18n = class extends EventEmitter {
     }
     this.emit("change");
   }
-  _load(locale, messages6) {
+  _load(locale, messages7) {
     const maybeMessages = this._messages[locale];
     if (!maybeMessages) {
-      this._messages[locale] = messages6;
+      this._messages[locale] = messages7;
     } else {
-      Object.assign(maybeMessages, messages6);
+      Object.assign(maybeMessages, messages7);
     }
   }
-  load(localeOrMessages, messages6) {
-    if (typeof localeOrMessages == "string" && typeof messages6 === "object") {
-      this._load(localeOrMessages, messages6);
+  load(localeOrMessages, messages7) {
+    if (typeof localeOrMessages == "string" && typeof messages7 === "object") {
+      this._load(localeOrMessages, messages7);
     } else {
       Object.entries(localeOrMessages).forEach(
         ([locale, messages23]) => this._load(locale, messages23)
@@ -1327,10 +1327,10 @@ var I18n = class extends EventEmitter {
   /**
    * @param options {@link LoadAndActivateOptions}
    */
-  loadAndActivate({ locale, locales, messages: messages6 }) {
+  loadAndActivate({ locale, locales, messages: messages7 }) {
     this._locale = locale;
     this._locales = locales || void 0;
-    this._messages[this._locale] = messages6;
+    this._messages[this._locale] = messages7;
     this.emit("change");
   }
   activate(locale, locales) {
@@ -2004,6 +2004,151 @@ 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
+        }
+      });
+    }
+  };
+};
+var size = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "size",
+    options,
+    async fn(state) {
+      const {
+        placement,
+        rects,
+        platform: platform2,
+        elements
+      } = state;
+      const _a = evaluate(options, state), {
+        apply = () => {
+        }
+      } = _a, detectOverflowOptions = __objRest(_a, [
+        "apply"
+      ]);
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const side2 = getSide(placement);
+      const alignment = getAlignment(placement);
+      const isYAxis = getSideAxis(placement) === "y";
+      const {
+        width,
+        height
+      } = rects.floating;
+      let heightSide;
+      let widthSide;
+      if (side2 === "top" || side2 === "bottom") {
+        heightSide = side2;
+        widthSide = alignment === (await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)) ? "start" : "end") ? "left" : "right";
+      } else {
+        widthSide = side2;
+        heightSide = alignment === "end" ? "top" : "bottom";
+      }
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
+      const noShift = !state.middlewareData.shift;
+      let availableHeight = overflowAvailableHeight;
+      let availableWidth = overflowAvailableWidth;
+      if (isYAxis) {
+        availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
+      } else {
+        availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
+      }
+      if (noShift && !alignment) {
+        const xMin = max(overflow.left, 0);
+        const xMax = max(overflow.right, 0);
+        const yMin = max(overflow.top, 0);
+        const yMax = max(overflow.bottom, 0);
+        if (isYAxis) {
+          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
+        } else {
+          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
+        }
+      }
+      await apply(__spreadProps(__spreadValues({}, state), {
+        availableWidth,
+        availableHeight
+      }));
+      const nextDimensions = await platform2.getDimensions(elements.floating);
+      if (width !== nextDimensions.width || height !== nextDimensions.height) {
+        return {
+          reset: {
+            rects: true
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
 
 // node_modules/.pnpm/@floating-ui+utils@0.2.7/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
 function getNodeName(node) {
@@ -2541,7 +2686,9 @@ var platform = {
   isRTL
 };
 var offset2 = offset;
+var shift2 = shift;
 var flip2 = flip;
+var size2 = size;
 var hide2 = hide;
 var arrow2 = arrow;
 var computePosition2 = (reference, floating, options) => {
@@ -2557,7 +2704,7 @@ var computePosition2 = (reference, floating, options) => {
   }));
 };
 
-// node_modules/.pnpm/@warp-ds+core@1.1.5_@floating-ui+dom@1.6.10/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
+// node_modules/.pnpm/@warp-ds+core@1.1.8_@floating-ui+dom@1.6.10/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
 var TOP_START = "top-start";
 var TOP = "top";
 var TOP_END = "top-end";
@@ -2634,6 +2781,8 @@ var applyArrowStyles = (arrowEl, arrowRotation2, dir) => {
     transform: `rotate(${arrowRotation2}deg)`
   });
 };
+var ELEMENT_PADDING = 8;
+var ARROW_OFFSET = 24;
 async function useRecompute(state) {
   var _a, _b, _c;
   if (!(state == null ? void 0 : state.isShowing))
@@ -2656,9 +2805,19 @@ async function useRecompute(state) {
         // checks overflow to trigger a flip. When disabled, it will ignore overflow
         fallbackPlacements: state == null ? void 0 : state.fallbackPlacements
       }),
+      (state == null ? void 0 : state.flip) && shift2({ crossAxis: true }),
+      // shifts the attentionEl to make sure that it stays in view
       !(state == null ? void 0 : state.noArrow) && (state == null ? void 0 : state.arrowEl) && arrow2({ element: state == null ? void 0 : state.arrowEl }),
-      hide2()
+      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'.
+      size2({
+        apply() {
+          Object.assign(attentionEl.style, {
+            paddingRight: `${ELEMENT_PADDING}px`,
+            paddingLeft: `${ELEMENT_PADDING}px`
+          });
+        }
+      })
     ]
   }).then(({ x, y, middlewareData, placement }) => {
     state.actualDirection = placement;
@@ -2674,25 +2833,22 @@ async function useRecompute(state) {
         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)) {
       const arrowEl = state == null ? void 0 : state.arrowEl;
       const { x: arrowX, y: arrowY } = middlewareData.arrow;
-      let top = "";
-      let right = "";
-      let bottom = "";
-      let left = "";
+      const isRtl = window.getComputedStyle(attentionEl).direction === "rtl";
+      const arrowPlacement = arrowDirection(placement).split("-")[1];
+      let top = "", right = "", bottom = "", left = "";
       if (arrowPlacement === "start") {
-        const value = typeof arrowX === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
-        top = typeof arrowY === "number" ? `calc(24px -  ${arrowEl.offsetWidth / 2}px)` : "";
+        const value = typeof arrowX === "number" ? `calc(${ARROW_OFFSET}px - ${arrowEl.offsetWidth / 2}px)` : "";
+        top = typeof arrowY === "number" ? `calc(${ARROW_OFFSET}px - ${arrowEl.offsetWidth / 2}px)` : "";
         right = isRtl ? value : "";
         left = isRtl ? "" : value;
       } else if (arrowPlacement === "end") {
-        const value = typeof arrowX === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
+        const value = typeof arrowX === "number" ? `calc(${ARROW_OFFSET}px - ${arrowEl.offsetWidth / 2}px)` : "";
         right = isRtl ? "" : value;
         left = isRtl ? value : "";
-        bottom = typeof arrowY === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
+        bottom = typeof arrowY === "number" ? `calc(${ARROW_OFFSET}px - ${arrowEl.offsetWidth / 2}px)` : "";
       } else {
         left = typeof arrowX === "number" ? `${arrowX}px` : "";
         top = typeof arrowY === "number" ? `${arrowY}px` : "";
@@ -2943,7 +3099,7 @@ import WarpElement from "@warp-ds/elements-core";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 // packages/i18n.ts
-var supportedLocales = ["en", "nb", "fi", "da"];
+var supportedLocales = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale2 = "en";
 var getSupportedLocale = (usedLocale) => {
   return supportedLocales.find(
@@ -2963,16 +3119,17 @@ function detectLocale() {
     return defaultLocale2;
   }
 }
-var getMessages = (locale, enMsg, nbMsg, fiMsg, daMsg) => {
+var getMessages = (locale, enMsg, nbMsg, fiMsg, daMsg, svMsg) => {
   if (locale === "nb") return nbMsg;
   if (locale === "fi") return fiMsg;
   if (locale === "da") return daMsg;
+  if (locale === "sv") return svMsg;
   return enMsg;
 };
-var activateI18n = (enMessages, nbMessages, fiMessages, daMessages) => {
+var activateI18n = (enMessages, nbMessages, fiMessages, daMessages, svMessages) => {
   const locale = detectLocale();
-  const messages6 = getMessages(locale, enMessages, nbMessages, fiMessages, daMessages);
-  i18n.load(locale, messages6);
+  const messages7 = getMessages(locale, enMessages, nbMessages, fiMessages, daMessages, svMessages);
+  i18n.load(locale, messages7);
   i18n.activate(locale);
 };
 
@@ -3008,13 +3165,17 @@ var messages3 = JSON.parse('{"attention.aria.callout":"Vihre\xE4 puhekupla, joka
 // packages/attention/locales/nb/messages.mjs
 var messages4 = JSON.parse('{"attention.aria.callout":"Gr\xF8nn taleboble som introduserer noe nytt","attention.aria.close":"Lukk","attention.aria.highlight":"En uthevet taleboble med viktig informasjon","attention.aria.pointingDown":"peker ned","attention.aria.pointingLeft":"peker til venstre","attention.aria.pointingRight":"peker til h\xF8yre","attention.aria.pointingUp":"peker opp","attention.aria.popover":"En hvit taleboble som gir tilleggsinformasjon","attention.aria.tooltip":"En svart taleboble som forklarer konteksten"}');
 
-// node_modules/.pnpm/@warp-ds+icons@2.1.0/node_modules/@warp-ds/icons/dist/elements/close-16.js
+// packages/attention/locales/sv/messages.mjs
+var messages5 = JSON.parse('{"attention.aria.callout":"En gr\xF6n pratbubbla som introducerar n\xE5got nytt","attention.aria.close":"St\xE4ng","attention.aria.highlight":"En pratbubbla med viktig information","attention.aria.pointingDown":"pekar ned","attention.aria.pointingLeft":"pekar v\xE4nster","attention.aria.pointingRight":"pekar h\xF6ger","attention.aria.pointingUp":"pekar upp","attention.aria.popover":"En vit pratbubbla som ger ytterligare information","attention.aria.tooltip":"En svart pratbubbla som ger kompletterande information"}');
+
+// node_modules/.pnpm/@warp-ds+icons@2.4.0/node_modules/@warp-ds/icons/dist/elements/close-16.js
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
-var messages5 = JSON.parse('{"icon.title.close":"Kryss"}');
+var messages6 = JSON.parse('{"icon.title.close":"Kryss"}');
 var messages22 = JSON.parse('{"icon.title.close":"Cross"}');
 var messages32 = JSON.parse('{"icon.title.close":"Rasti"}');
 var messages42 = JSON.parse('{"icon.title.close":"Kryds"}');
+var messages52 = JSON.parse('{"icon.title.close":"Kryss"}');
 var supportedLocales2 = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale3 = "en";
 var detectByBrand = () => {
@@ -3077,19 +3238,20 @@ function detectLocale2() {
     return defaultLocale3;
   }
 }
-var getMessages2 = (locale, enMsg, nbMsg, fiMsg, daMsg) => {
+var getMessages2 = (locale, enMsg, nbMsg, fiMsg, daMsg, svMsg) => {
   if (locale === "nb") return nbMsg;
   if (locale === "fi") return fiMsg;
   if (locale === "da") return daMsg;
+  if (locale === "sv") return svMsg;
   return enMsg;
 };
-var activateI18n2 = (enMessages, nbMessages, fiMessages, daMessages) => {
+var activateI18n2 = (enMessages, nbMessages, fiMessages, daMessages, svMessages) => {
   const locale = detectLocale2();
-  const messages52 = getMessages2(locale, enMessages, nbMessages, fiMessages, daMessages);
-  i18n.load(locale, messages52);
+  const messages62 = getMessages2(locale, enMessages, nbMessages, fiMessages, daMessages, svMessages);
+  i18n.load(locale, messages62);
   i18n.activate(locale);
 };
-activateI18n2(messages22, messages5, messages32, messages42);
+activateI18n2(messages22, messages6, messages32, messages42, messages52);
 var IconClose16 = class extends LitElement {
   render() {
     const title = i18n.t({ message: `Cross`, id: "icon.title.close", comment: "Title for close icon" });
@@ -3104,7 +3266,7 @@ if (!customElements.get("w-icon-close-16")) {
 var WarpAttention = class extends kebabCaseAttributes(WarpElement) {
   constructor() {
     super();
-    activateI18n(messages2, messages4, messages3, messages);
+    activateI18n(messages2, messages4, messages3, messages, messages5);
     this.handleDone = this.handleDone.bind(this);
     this.show = false;
     this.placement = "bottom";
@@ -3133,7 +3295,10 @@ ${JSON.stringify(Object.keys(opposites))}`);
 ${JSON.stringify(directions)}`
       );
     }
-    setTimeout(() => this.requestUpdate(), 0);
+    setTimeout(() => {
+      this.requestUpdate();
+      this.handleDone();
+    }, 0);
     if (!this.callout) {
       window.addEventListener("click", this.handleDone);
       window.addEventListener("scroll", this.handleDone);
@@ -3185,7 +3350,7 @@ ${JSON.stringify(directions)}`
     ]);
   }
   get _arrowHtml() {
-    return this.noArrow ? "" : html2`<div id="arrow" role="img" class="${this._arrowClasses}"></div>`;
+    return this.noArrow ? "" : html2`<div id="arrow" class="${this._arrowClasses}"></div>`;
   }
   get _activeVariantClasses() {
     const variantProps = {
@@ -3358,19 +3523,16 @@ ${JSON.stringify(directions)}`
         ${this.placement === "right-start" || this.placement === "right" || this.placement === "right-end" || this.placement === "bottom-start" || this.placement === "bottom" || this.placement === "bottom-end" ? html2`
               <slot name="target"></slot>
 
-              <div
-                id="attention"
-                role="${this.tooltip ? "tooltip" : "img"}"
-                aria-label="${this.defaultAriaLabel()}"
-                class="${this._wrapperClasses}">
-                ${this._arrowHtml}
+              <div id="attention" class="${this._wrapperClasses}">
+                <div role="${this.tooltip ? "tooltip" : "img"}" aria-label="${this.defaultAriaLabel()}">${this._arrowHtml}</div>
                 <slot name="message"></slot>
                 ${this.canClose ? this._closeBtnHtml : nothing}
               </div>
             ` : html2`
               <div id="attention" class="${this._wrapperClasses}">
                 <slot name="message"></slot>
-                ${this._arrowHtml} ${this.canClose ? this._closeBtnHtml : nothing}
+                <div role="${this.tooltip ? "tooltip" : "img"}" aria-label="${this.defaultAriaLabel()}">${this._arrowHtml}</div>
+                ${this.canClose ? this._closeBtnHtml : nothing}
               </div>
               <slot name="target"></slot>
             `}