@warp-ds/elements 1.4.1-next.1 → 1.4.1-next.2

package/dist/index.js

@@ -1043,7 +1043,7 @@ var require_parser = __commonJS({
 // packages/affix/index.js
 import { html as html3 } from "lit";
 
-// node_modules/.pnpm/@warp-ds+css@1.9.6/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.9.7/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",
@@ -1452,7 +1452,7 @@ var attention = {
 import WarpElement from "@warp-ds/elements-core";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/search-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/search-16.js
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
 
@@ -1818,7 +1818,7 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/search-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/search-16.js
 var messages = JSON.parse('{"icon.title.search":"Forst\xF8rrelsesglass"}');
 var messages2 = JSON.parse('{"icon.title.search":"Magnifying glass"}');
 var messages3 = JSON.parse('{"icon.title.search":"Suurennuslasi"}');
@@ -1907,7 +1907,7 @@ if (!customElements.get("w-icon-search-16")) {
   customElements.define("w-icon-search-16", IconSearch16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/close-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/close-16.js
 import { LitElement as LitElement2 } from "lit";
 import { unsafeStatic as unsafeStatic2, html as html2 } from "lit/static-html.js";
 var messages4 = JSON.parse('{"icon.title.close":"Kryss"}');
@@ -2109,7 +2109,7 @@ var r = function() {
 // packages/alert/index.js
 import WarpElement2 from "@warp-ds/elements-core";
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/info-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/info-16.js
 import { LitElement as LitElement3 } from "lit";
 import { unsafeStatic as unsafeStatic3, html as html4 } from "lit/static-html.js";
 var messages5 = JSON.parse('{"icon.title.info":"Informasjonssirkel"}');
@@ -2200,7 +2200,7 @@ if (!customElements.get("w-icon-info-16")) {
   customElements.define("w-icon-info-16", IconInfo16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/warning-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/warning-16.js
 import { LitElement as LitElement4 } from "lit";
 import { unsafeStatic as unsafeStatic4, html as html5 } from "lit/static-html.js";
 var messages6 = JSON.parse('{"icon.title.warning":"Varseltrekant med utropstegn"}');
@@ -2291,7 +2291,7 @@ if (!customElements.get("w-icon-warning-16")) {
   customElements.define("w-icon-warning-16", IconWarning16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/error-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/error-16.js
 import { LitElement as LitElement5 } from "lit";
 import { unsafeStatic as unsafeStatic5, html as html6 } from "lit/static-html.js";
 var messages7 = JSON.parse('{"icon.title.error":"\xC5ttekant med utropstegn"}');
@@ -2382,7 +2382,7 @@ if (!customElements.get("w-icon-error-16")) {
   customElements.define("w-icon-error-16", IconError16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/success-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/success-16.js
 import { LitElement as LitElement6 } from "lit";
 import { unsafeStatic as unsafeStatic6, html as html7 } from "lit/static-html.js";
 var messages8 = JSON.parse('{"icon.title.success":"Sirkel med sjekkmerke"}');
@@ -3691,7 +3691,7 @@ var computePosition2 = (reference, floating, options) => {
   }));
 };
 
-// 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
+// node_modules/.pnpm/@warp-ds+core@1.1.2_@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";
@@ -3746,8 +3746,6 @@ var rotation = {
   [BOTTOM]: -135,
   [BOTTOM_END]: -135
 };
-var middlePosition = "calc(50% - 7px)";
-var isDirectionVertical = (name) => [TOP_START, TOP, TOP_END, BOTTOM_START, BOTTOM, BOTTOM_END].includes(name);
 var arrowDirectionClassname = (dir) => {
   let direction;
   if (/-/.test(dir)) {
@@ -3770,17 +3768,6 @@ var applyArrowStyles = (arrowEl, arrowRotation2, dir) => {
     transform: `rotate(${arrowRotation2}deg)`
   });
 };
-function computeCalloutArrow({ actualDirection, directionName = BOTTOM, arrowEl }) {
-  if (!arrowEl)
-    return;
-  actualDirection = directionName;
-  const directionIsVertical = isDirectionVertical(directionName);
-  Object.assign((arrowEl == null ? void 0 : arrowEl.style) || {}, {
-    left: directionIsVertical ? middlePosition : "",
-    top: !directionIsVertical ? middlePosition : ""
-  });
-  applyArrowStyles(arrowEl, arrowRotation(actualDirection), actualDirection);
-}
 async function useRecompute(state) {
   var _a, _b, _c;
   if (!(state == null ? void 0 : state.isShowing))
@@ -3788,33 +3775,34 @@ async function useRecompute(state) {
   if (state == null ? void 0 : state.waitForDOM) {
     await (state == null ? void 0 : state.waitForDOM());
   }
-  if (state == null ? void 0 : state.isCallout)
-    return computeCalloutArrow(state);
   if (!(state == null ? void 0 : state.targetEl) || !(state == null ? void 0 : state.attentionEl))
     return;
-  const targetEl = state == null ? void 0 : state.targetEl;
-  const attentionEl = state == null ? void 0 : state.attentionEl;
+  let targetEl = state == null ? void 0 : state.targetEl;
+  const attentionEl = state.attentionEl;
   computePosition2(targetEl, attentionEl, {
     placement: (_a = state == null ? void 0 : state.directionName) != null ? _a : BOTTOM,
     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({
+        // when flip is set to true it will move the attentionEl's placement to its opposite side or to the preferred placements if fallbackPlacements has a value
         crossAxis: state == null ? void 0 : state.crossAxis,
         fallbackPlacements: state == null ? void 0 : state.fallbackPlacements
       }),
       !(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'.
+      // 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;
-    Object.assign(attentionEl == null ? void 0 : attentionEl.style, {
-      left: `${x}px`,
-      top: `${y}px`
-    });
+    if (!(state == null ? void 0 : state.isCallout)) {
+      Object.assign(attentionEl.style, {
+        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, {
+      const { referenceHidden } = middlewareData.hide;
+      Object.assign(attentionEl.style, {
         visibility: referenceHidden ? "hidden" : ""
       });
     }
@@ -3822,26 +3810,26 @@ async function useRecompute(state) {
     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: x2, y: y2 } = middlewareData == null ? void 0 : middlewareData.arrow;
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
       let top = "";
       let right = "";
       let bottom = "";
       let left = "";
       if (arrowPlacement === "start") {
-        const value = typeof x2 === "number" ? `calc(33px - ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
-        top = typeof y2 === "number" ? `calc(33px -  ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
+        const value = typeof arrowX === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
+        top = typeof arrowY === "number" ? `calc(24px -  ${arrowEl.offsetWidth / 2}px)` : "";
         right = isRtl ? value : "";
         left = isRtl ? "" : value;
       } else if (arrowPlacement === "end") {
-        const value = typeof x2 === "number" ? `calc(33px - ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
+        const value = typeof arrowX === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
         right = isRtl ? "" : value;
         left = isRtl ? value : "";
-        bottom = typeof y2 === "number" ? `calc(33px - ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
+        bottom = typeof arrowY === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
       } else {
-        left = typeof x2 === "number" ? `${x2}px` : "";
-        top = typeof y2 === "number" ? `${y2}px` : "";
+        left = typeof arrowX === "number" ? `${arrowX}px` : "";
+        top = typeof arrowY === "number" ? `${arrowY}px` : "";
       }
-      Object.assign((arrowEl == null ? void 0 : arrowEl.style) || {}, {
+      Object.assign(arrowEl.style, {
         top,
         right,
         bottom,
@@ -4326,7 +4314,7 @@ if (!customElements.get("w-box")) {
 // packages/breadcrumbs/index.js
 import { html as html12 } from "lit";
 
-// node_modules/.pnpm/@warp-ds+core@1.1.1_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/breadcrumbs/index.js
+// node_modules/.pnpm/@warp-ds+core@1.1.2_@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);
 }
@@ -4676,7 +4664,7 @@ import { css as css5, html as html18 } from "lit";
 import WarpElement10 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined4 } from "lit/directives/if-defined.js";
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
 import { LitElement as LitElement7 } from "lit";
 import { unsafeStatic as unsafeStatic7, html as html16 } from "lit/static-html.js";
 var messages18 = JSON.parse('{"icon.title.chevron-down":"Nedoverpil"}');
@@ -4767,7 +4755,7 @@ if (!customElements.get("w-icon-chevron-down-16")) {
   customElements.define("w-icon-chevron-down-16", IconChevronDown16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/chevron-up-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/chevron-up-16.js
 import { LitElement as LitElement8 } from "lit";
 import { unsafeStatic as unsafeStatic8, html as html17 } from "lit/static-html.js";
 var messages19 = JSON.parse('{"icon.title.chevron-up":"Oppoverpil"}');