@nova-design-system/nova-webcomponents 3.31.2-beta.4 → 3.33.0

package/dist/esm/nv-notification.entry.js

@@ -5,7 +5,7 @@ import { u as useFade } from './fade.animation-DcRL9lcm.js';
 import './style-value-types.es-xlgmw4x8.js';
 import { u as useSlide } from './slide.animation-CmH5d1of.js';
 import { p as parallel } from './timeline.animation-CgHCo_Ho.js';
-import { v as v4 } from './v4-BdYh22OP.js';
+import { v as v4 } from './v4-CK3_k8jD.js';
 
 const nvNotificationCss = () => `nv-notification{display:block}nv-notification [data-scope=container]{display:flex;position:relative;max-width:512px;width:100%;padding:var(--notification-padding);align-items:flex-start;gap:var(--notification-gap-x);border-radius:var(--notification-radius);border-style:solid;box-shadow:0 var(--shadow-y-axis-lg-1, 4px) var(--shadow-blur-lg-1, 6px) var(--shadow-spread-lg-1, -2px) var(--shadow-color-opacity-1, rgba(14, 14, 14, 0.06)), 0 var(--shadow-y-axis-lg-2, 10px) var(--shadow-blur-lg-2, 15px) var(--shadow-spread-lg-2, -3px) var(--shadow-color-opacity-2, rgba(14, 14, 14, 0.1))}nv-notification [data-scope=container] [data-scope=icon]{flex-shrink:0}nv-notification [data-scope=container] [data-scope=dismiss]{padding:var(--button-sm-icon-button-padding, 8px);justify-content:center;align-items:center;gap:var(--button-sm-gap, 6px);display:flex;position:absolute;right:8px;top:8px;border-radius:var(--button-sm-border-radius, 4px);background:var(--components-button-lower-background, rgba(255, 255, 255, 0));color:var(--components-button-lower-icon)}nv-notification [data-scope=container] [data-scope=content]{display:flex;padding-right:var(--notification-padding-right);flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);flex:1 0 0}nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]{display:flex;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;color:var(--components-notification-content-title);font-size:var(--notification-title-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:20px;}nv-notification [data-scope=container] [data-scope=content] [data-scope=message]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);align-self:stretch;color:var(--components-notification-content-description);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-sm, 14px);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-sm, 20px)}nv-notification [data-scope=container] [data-scope=content] [data-scope=actions]{display:flex;padding:var(--spacing-2, 8px) 0;padding-bottom:0px;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;margin-left:calc(-1 * var(--button-sm-padding-x))}nv-notification[feedback=information] [data-scope=container]{background-color:var(--components-notification-information-background);border-color:var(--components-notification-information-border)}nv-notification[feedback=information] [data-scope=container] [data-scope=icon]{color:var(--components-notification-information-icon)}nv-notification[feedback=information]>[data-scope=close]:focus,nv-notification[feedback=information]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=information]>[data-scope=close]:focus-visible,nv-notification[feedback=information]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=warning] [data-scope=container]{background-color:var(--components-notification-warning-background);border-color:var(--components-notification-warning-border)}nv-notification[feedback=warning] [data-scope=container] [data-scope=icon]{color:var(--components-notification-warning-icon)}nv-notification[feedback=warning]>[data-scope=close]:focus,nv-notification[feedback=warning]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=warning]>[data-scope=close]:focus-visible,nv-notification[feedback=warning]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=error] [data-scope=container]{background-color:var(--components-notification-error-background);border-color:var(--components-notification-error-border)}nv-notification[feedback=error] [data-scope=container] [data-scope=icon]{color:var(--components-notification-error-icon)}nv-notification[feedback=error]>[data-scope=close]:focus,nv-notification[feedback=error]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=error]>[data-scope=close]:focus-visible,nv-notification[feedback=error]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=success] [data-scope=container]{background-color:var(--components-notification-success-background);border-color:var(--components-notification-success-border)}nv-notification[feedback=success] [data-scope=container] [data-scope=icon]{color:var(--components-notification-success-icon)}nv-notification[feedback=success]>[data-scope=close]:focus,nv-notification[feedback=success]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=success]>[data-scope=close]:focus-visible,nv-notification[feedback=success]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=neutral] [data-scope=container]{background-color:var(--components-notification-neutral-background);border-color:var(--components-notification-neutral-border)}nv-notification[feedback=neutral] [data-scope=container] [data-scope=icon]{color:var(--components-notification-neutral-icon)}nv-notification[feedback=neutral]>[data-scope=close]:focus,nv-notification[feedback=neutral]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=neutral]>[data-scope=close]:focus-visible,nv-notification[feedback=neutral]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[emphasis=high] [data-scope=container]{border-width:1px;border-left-width:var(--notification-border-width-high-emphasis);padding-left:calc(var(--notification-padding) - var(--notification-border-width-high-emphasis) + 1px)}nv-notification[emphasis=medium] [data-scope=container]{border-width:var(--notification-border-width-low-emphasis);border-color:var(--color-content-low-border, #E3E3E3)}`;
 

package/dist/esm/nv-popover.entry.js

@@ -2,7 +2,7 @@ import { S as StencilCore, r as registerInstance, a as createEvent, h, d as Host
 import { u as useFade } from './fade.animation-DcRL9lcm.js';
 import { u as useGrow } from './grow.animation-D7ep_aVl.js';
 import './style-value-types.es-xlgmw4x8.js';
-import { a as addEventListeners, r as removeEventListeners } from './events.utils-B6GgGra-.js';
+import { a as addEventListeners, r as removeEventListeners } from './events.utils-BysSxG1C.js';
 import { a as asElement } from './dom.utils-CuXVGECR.js';
 
 /**
@@ -23,10 +23,6 @@ const oppositeSideMap = {
   bottom: 'top',
   top: 'bottom'
 };
-const oppositeAlignmentMap = {
-  start: 'end',
-  end: 'start'
-};
 function clamp(start, value, end) {
   return max(start, min(value, end));
 }
@@ -46,7 +42,8 @@ function getAxisLength(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
 function getSideAxis(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+  const firstChar = placement[0];
+  return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
 }
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
@@ -69,21 +66,21 @@ function getExpandedPlacements(placement) {
   return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
 }
 function getOppositeAlignmentPlacement(placement) {
-  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+  return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
 }
+const lrPlacement = ['left', 'right'];
+const rlPlacement = ['right', 'left'];
+const tbPlacement = ['top', 'bottom'];
+const btPlacement = ['bottom', 'top'];
 function getSideList(side, isStart, rtl) {
-  const lr = ['left', 'right'];
-  const rl = ['right', 'left'];
-  const tb = ['top', 'bottom'];
-  const bt = ['bottom', 'top'];
   switch (side) {
     case 'top':
     case 'bottom':
-      if (rtl) return isStart ? rl : lr;
-      return isStart ? lr : rl;
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
     case 'left':
     case 'right':
-      return isStart ? tb : bt;
+      return isStart ? tbPlacement : btPlacement;
     default:
       return [];
   }
@@ -100,7 +97,8 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
   return list;
 }
 function getOppositePlacement(placement) {
-  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+  const side = getSide(placement);
+  return oppositeSideMap[side] + placement.slice(side.length);
 }
 function expandPaddingObject(padding) {
   return {
@@ -194,6 +192,74 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   return coords;
 }
 
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
+// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
+const MAX_RESET_COUNT = 50;
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -208,7 +274,10 @@ const computePosition$1 = async (reference, floating, config) => {
     middleware = [],
     platform
   } = config;
-  const validMiddleware = middleware.filter(Boolean);
+  const platformWithDetectOverflow = platform.detectOverflow ? platform : {
+    ...platform,
+    detectOverflow
+  };
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
   let rects = await platform.getElementRects({
     reference,
@@ -220,13 +289,17 @@ const computePosition$1 = async (reference, floating, config) => {
     y
   } = computeCoordsFromPlacement(rects, placement, rtl);
   let statefulPlacement = placement;
-  let middlewareData = {};
   let resetCount = 0;
-  for (let i = 0; i < validMiddleware.length; i++) {
+  const middlewareData = {};
+  for (let i = 0; i < middleware.length; i++) {
+    const currentMiddleware = middleware[i];
+    if (!currentMiddleware) {
+      continue;
+    }
     const {
       name,
       fn
-    } = validMiddleware[i];
+    } = currentMiddleware;
     const {
       x: nextX,
       y: nextY,
@@ -240,7 +313,7 @@ const computePosition$1 = async (reference, floating, config) => {
       strategy,
       middlewareData,
       rects,
-      platform,
+      platform: platformWithDetectOverflow,
       elements: {
         reference,
         floating
@@ -248,14 +321,11 @@ const computePosition$1 = async (reference, floating, config) => {
     });
     x = nextX != null ? nextX : x;
     y = nextY != null ? nextY : y;
-    middlewareData = {
-      ...middlewareData,
-      [name]: {
-        ...middlewareData[name],
-        ...data
-      }
+    middlewareData[name] = {
+      ...middlewareData[name],
+      ...data
     };
-    if (reset && resetCount <= 50) {
+    if (reset && resetCount < MAX_RESET_COUNT) {
       resetCount++;
       if (typeof reset === 'object') {
         if (reset.placement) {
@@ -285,71 +355,6 @@ const computePosition$1 = async (reference, floating, config) => {
   };
 };
 
-/**
- * Resolves with an object of overflow side offsets that determine how much the
- * element is overflowing a given clipping boundary on each side.
- * - positive = overflowing the boundary by that number of pixels
- * - negative = how many pixels left before it will overflow
- * - 0 = lies flush with the boundary
- * @see https://floating-ui.com/docs/detectOverflow
- */
-async function detectOverflow(state, options) {
-  var _await$platform$isEle;
-  if (options === void 0) {
-    options = {};
-  }
-  const {
-    x,
-    y,
-    platform,
-    rects,
-    elements,
-    strategy
-  } = state;
-  const {
-    boundary = 'clippingAncestors',
-    rootBoundary = 'viewport',
-    elementContext = 'floating',
-    altBoundary = false,
-    padding = 0
-  } = evaluate(options, state);
-  const paddingObject = getPaddingObject(padding);
-  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
-  const element = elements[altBoundary ? altContext : elementContext];
-  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
-    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
-    boundary,
-    rootBoundary,
-    strategy
-  }));
-  const rect = elementContext === 'floating' ? {
-    x,
-    y,
-    width: rects.floating.width,
-    height: rects.floating.height
-  } : rects.reference;
-  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
-  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
-    x: 1,
-    y: 1
-  } : {
-    x: 1,
-    y: 1
-  };
-  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
-    elements,
-    rect,
-    offsetParent,
-    strategy
-  }) : rect);
-  return {
-    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
-    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
-    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
-    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
-  };
-}
-
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
@@ -473,14 +478,16 @@ const flip$1 = function (options) {
         return {};
       }
       const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
       const isBasePlacement = getSide(initialPlacement) === initialPlacement;
       const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
       const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
-      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -501,16 +508,22 @@ const flip$1 = function (options) {
         const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
         const nextPlacement = placements[nextIndex];
         if (nextPlacement) {
-          // Try next placement and re-run the lifecycle.
-          return {
-            data: {
-              index: nextIndex,
-              overflows: overflowsData
-            },
-            reset: {
-              placement: nextPlacement
-            }
-          };
+          const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+          if (!ignoreCrossAxisOverflow ||
+          // We leave the current main axis only if every placement on that axis
+          // overflows the main axis.
+          overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
+            // Try next placement and re-run the lifecycle.
+            return {
+              data: {
+                index: nextIndex,
+                overflows: overflowsData
+              },
+              reset: {
+                placement: nextPlacement
+              }
+            };
+          }
         }
 
         // First, find the candidates that fit on the mainAxis side of overflow,
@@ -522,8 +535,17 @@ const flip$1 = function (options) {
           switch (fallbackStrategy) {
             case 'bestFit':
               {
-                var _overflowsData$map$so;
-                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+                var _overflowsData$filter2;
+                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis ||
+                    // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === 'y';
+                  }
+                  return true;
+                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
                 if (placement) {
                   resetPlacement = placement;
                 }
@@ -547,6 +569,8 @@ const flip$1 = function (options) {
   };
 };
 
+const originSides = /*#__PURE__*/new Set(['left', 'top']);
+
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
 
@@ -560,7 +584,7 @@ async function convertValueToCoords(state, options) {
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === 'y';
-  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
 
@@ -574,10 +598,9 @@ async function convertValueToCoords(state, options) {
     crossAxis: 0,
     alignmentAxis: null
   } : {
-    mainAxis: 0,
-    crossAxis: 0,
-    alignmentAxis: null,
-    ...rawValue
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
   };
   if (alignment && typeof alignmentAxis === 'number') {
     crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
@@ -648,7 +671,8 @@ const shift$1 = function (options) {
       const {
         x,
         y,
-        placement
+        placement,
+        platform
       } = state;
       const {
         mainAxis: checkMainAxis = true,
@@ -671,7 +695,7 @@ const shift$1 = function (options) {
         x,
         y
       };
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -699,7 +723,11 @@ const shift$1 = function (options) {
         ...limitedCoords,
         data: {
           x: limitedCoords.x - x,
-          y: limitedCoords.y - y
+          y: limitedCoords.y - y,
+          enabled: {
+            [mainAxis]: checkMainAxis,
+            [crossAxis]: checkCrossAxis
+          }
         }
       };
     }
@@ -757,26 +785,35 @@ function isOverflowElement(element) {
     overflowY,
     display
   } = getComputedStyle(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
 }
 function isTableElement(element) {
-  return ['table', 'td', 'th'].includes(getNodeName(element));
+  return /^(table|td|th)$/.test(getNodeName(element));
 }
 function isTopLayer(element) {
-  return [':popover-open', ':modal'].some(selector => {
-    try {
-      return element.matches(selector);
-    } catch (e) {
-      return false;
+  try {
+    if (element.matches(':popover-open')) {
+      return true;
     }
-  });
+  } catch (_e) {
+    // no-op
+  }
+  try {
+    return element.matches(':modal');
+  } catch (_e) {
+    return false;
+  }
 }
+const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
+const containRe = /paint|layout|strict|content/;
+const isNotNone = value => !!value && value !== 'none';
+let isWebKitValue;
 function isContainingBlock(elementOrCss) {
-  const webkit = isWebKit();
   const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -791,11 +828,13 @@ function getContainingBlock(element) {
   return null;
 }
 function isWebKit() {
-  if (typeof CSS === 'undefined' || !CSS.supports) return false;
-  return CSS.supports('-webkit-backdrop-filter', 'none');
+  if (isWebKitValue == null) {
+    isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
+  }
+  return isWebKitValue;
 }
 function isLastTraversableNode(node) {
-  return ['html', 'body', '#document'].includes(getNodeName(node));
+  return /^(html|body|#document)$/.test(getNodeName(node));
 }
 function getComputedStyle(element) {
   return getWindow(element).getComputedStyle(element);
@@ -847,8 +886,9 @@ function getOverflowAncestors(node, list, traverseIframes) {
   const win = getWindow(scrollableAncestor);
   if (isBody) {
     return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], []);
+  } else {
+    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, []));
   }
-  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, []));
 }
 function getFrameElement(win) {
   return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
@@ -1937,14 +1977,20 @@ const NvPopover = class {
         this.positionPopover();
     }
     disconnectedCallback() {
-        removeEventListeners(this.closeEvents, document, this);
-        if (this.triggerMode === 'click') {
-            removeEventListeners(this.clickEvents, this.triggerElement, this);
-            // Remove document listeners
-            removeEventListeners(this.outsideClickEvents, document, this);
+        removeEventListeners(this.closeEvents, document);
+        switch (this.triggerMode) {
+            case 'click':
+                if (this.triggerElement) {
+                    removeEventListeners(this.clickEvents, this.triggerElement);
+                }
+                removeEventListeners(this.outsideClickEvents, document);
+                break;
+            case 'hover':
+                if (this.triggerElement) {
+                    removeEventListeners(this.hoverEvents, this.triggerElement);
+                }
+                break;
         }
-        if (this.triggerMode === 'hover')
-            removeEventListeners(this.hoverEvents, this.triggerElement, this);
         // Reset flag so events can be reattached if component is reconnected
         this.eventsAttached = false;
         // Clean up any pending timeouts
@@ -1957,7 +2003,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '1a604043f59c8aa04237b6d03838125079ac5c49' }, h("slot", { key: 'c22461b3d5050f7b502635221cbe17c03ef425a9', name: "trigger" }), h("div", { key: '58a438db8308be12d854afe3deda462d4ae528fb', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'af18bf4b8700484ca989a8d45da8295e8d11ea2e', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: 'f3308bfc01d5a4f954a1f0b822cf378cd874f9bd', name: "content" }))));
+        return (h(Host, { key: '1ed63615950c6e634f62130a0b44968b33a672fb' }, h("slot", { key: '46f7ca5bd0f86e79f847d1120d4bb37f6392fd58', name: "trigger" }), h("div", { key: 'b7324fde30b5dccb51a206ac334636bb8161760a', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'ce765381a3d2708afa5cef63d8f8c156555eb903', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '7412a6e56a216bb7ea06b69d1c349f68d6bb1aa1', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/nv-toggle.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-Dtg-LGcy.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
-import { v as v4 } from './v4-BdYh22OP.js';
+import { v as v4 } from './v4-CK3_k8jD.js';
 
 const nvToggleCss = () => `@charset "UTF-8";nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-toggle-border-default);background:var(--components-toggle-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-toggle-border-hover)}nv-toggle .input-container input[type=checkbox]:hover::after{background-color:var(--components-toggle-shape-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:focus::after{background-color:var(--components-toggle-shape-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default-checked);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-toggle-background-disabled);border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked{background:var(--components-toggle-background-disabled-checked);border-color:var(--components-toggle-border-disabled-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-toggle-shape-disabled-checked)}@media print{nv-toggle .input-container input[type=checkbox]::after{content:"●";top:calc(50% - 3.5px);width:auto;height:auto;background:none;color:var(--components-toggle-border-default);font-size:calc(var(--form-toggle-switch-dot-default) * 3);line-height:1}nv-toggle .input-container input[type=checkbox]:checked{background:transparent;border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:"●";top:calc(50% - 3.5px);width:auto;height:auto;left:75%;background:none;color:var(--components-toggle-border-default-checked)}}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}`;
 

package/dist/esm/v4-CK3_k8jD.js

@@ -0,0 +1,50 @@
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+    byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+    return (byteToHex[arr[offset + 0]] +
+        byteToHex[arr[offset + 1]] +
+        byteToHex[arr[offset + 2]] +
+        byteToHex[arr[offset + 3]] +
+        '-' +
+        byteToHex[arr[offset + 4]] +
+        byteToHex[arr[offset + 5]] +
+        '-' +
+        byteToHex[arr[offset + 6]] +
+        byteToHex[arr[offset + 7]] +
+        '-' +
+        byteToHex[arr[offset + 8]] +
+        byteToHex[arr[offset + 9]] +
+        '-' +
+        byteToHex[arr[offset + 10]] +
+        byteToHex[arr[offset + 11]] +
+        byteToHex[arr[offset + 12]] +
+        byteToHex[arr[offset + 13]] +
+        byteToHex[arr[offset + 14]] +
+        byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
+const rnds8 = new Uint8Array(16);
+function rng() {
+    return crypto.getRandomValues(rnds8);
+}
+
+function v4(options, buf, offset) {
+    if (crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    return _v4(options);
+}
+function _v4(options, buf, offset) {
+    options = options || {};
+    const rnds = options.random ?? options.rng?.() ?? rng();
+    if (rnds.length < 16) {
+        throw new Error('Random bytes length must be >= 16');
+    }
+    rnds[6] = (rnds[6] & 0x0f) | 0x40;
+    rnds[8] = (rnds[8] & 0x3f) | 0x80;
+    return unsafeStringify(rnds);
+}
+
+export { v4 as v };