@vonage/vivid 3.0.0-next.13 → 3.0.0-next.16

package/popup/index.js

@@ -11,8 +11,10 @@ import { r as ref } from '../shared/aria-global.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../icon/index.js';
 import '../shared/_has.js';
-import '../shared/index2.js';
+import '../focus/index.js';
+import '../shared/focus2.js';
 import '../shared/affix.js';
+import '../shared/focus.js';
 import '../shared/apply-mixins.js';
 
 var anObject$2 = anObject$3;
@@ -811,7 +813,8 @@ async function detectOverflow(middlewareArguments, options) {
   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
+    rootBoundary,
+    strategy
   }));
   const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
     rect: elementContext === 'floating' ? { ...rects.floating,
@@ -875,6 +878,7 @@ const arrow = options => ({
       y
     };
     const axis = getMainAxisFromPlacement(placement);
+    const alignment = getAlignment(placement);
     const length = getLengthFromAxis(axis);
     const arrowDimensions = await platform.getDimensions(element);
     const minProp = axis === 'y' ? 'top' : 'left';
@@ -882,15 +886,25 @@ const arrow = options => ({
     const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
     const startDiff = coords[axis] - rects.reference[axis];
     const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
-    const clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
+    let clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
+
+    if (clientSize === 0) {
+      clientSize = rects.floating[length];
+    }
+
     const centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the floating element if the center
-    // point is outside of the floating element's bounds
+    // point is outside the floating element's bounds
 
     const min = paddingObject[minProp];
     const max = clientSize - arrowDimensions[length] - paddingObject[maxProp];
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset = within(min, center, max);
+    const offset = within(min, center, max); // Make sure that arrow points at the reference
+
+    const alignmentPadding = alignment === 'start' ? paddingObject[minProp] : paddingObject[maxProp];
+    const shouldAddOffset = alignmentPadding > 0 && center !== offset && rects.reference[length] <= rects.floating[length];
+    const alignmentOffset = shouldAddOffset ? center < min ? min - center : max - center : 0;
     return {
+      [axis]: coords[axis] - alignmentOffset,
       data: {
         [axis]: offset,
         centerOffset: center - offset
@@ -1027,9 +1041,9 @@ const flip = function (options) {
         switch (fallbackStrategy) {
           case 'bestFit':
             {
-              var _overflowsData$slice$;
+              var _overflowsData$map$so;
 
-              const placement = (_overflowsData$slice$ = overflowsData.slice().sort((a, b) => a.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0) - b.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0))[0]) == null ? void 0 : _overflowsData$slice$.placement;
+              const placement = (_overflowsData$map$so = overflowsData.map(d => [d, 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].placement;
 
               if (placement) {
                 resetPlacement = placement;
@@ -1128,26 +1142,25 @@ const hide = function (_temp) {
   };
 };
 
-function convertValueToCoords(placement, rects, value, rtl) {
-  if (rtl === void 0) {
-    rtl = false;
-  }
-
+async function convertValueToCoords(middlewareArguments, value) {
+  const {
+    placement,
+    platform,
+    elements
+  } = middlewareArguments;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getMainAxisFromPlacement(placement) === 'x';
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = typeof value === 'function' ? value({ ...rects,
-    placement
-  }) : value;
-  const isNumber = typeof rawValue === 'number'; // eslint-disable-next-line prefer-const
+  const rawValue = typeof value === 'function' ? value(middlewareArguments) : value; // eslint-disable-next-line prefer-const
 
   let {
     mainAxis,
     crossAxis,
     alignmentAxis
-  } = isNumber ? {
+  } = typeof rawValue === 'number' ? {
     mainAxis: rawValue,
     crossAxis: 0,
     alignmentAxis: null
@@ -1187,13 +1200,9 @@ const offset = function (value) {
     async fn(middlewareArguments) {
       const {
         x,
-        y,
-        placement,
-        rects,
-        platform,
-        elements
+        y
       } = middlewareArguments;
-      const diffCoords = convertValueToCoords(placement, rects, value, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+      const diffCoords = await convertValueToCoords(middlewareArguments, value);
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
@@ -1325,7 +1334,7 @@ const inline = function (options) {
 };
 
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === '[object Window]';
+  return value && value.document && value.location && value.alert && value.setInterval;
 }
 function getWindow(node) {
   if (node == null) {
@@ -1348,6 +1357,16 @@ function getNodeName(node) {
   return isWindow(node) ? '' : node ? (node.nodeName || '').toLowerCase() : '';
 }
 
+function getUAString() {
+  const uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands) {
+    return uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
+  }
+
+  return navigator.userAgent;
+}
+
 function isHTMLElement(value) {
   return value instanceof getWindow(value).HTMLElement;
 }
@@ -1358,6 +1377,11 @@ function isNode(value) {
   return value instanceof getWindow(value).Node;
 }
 function isShadowRoot(node) {
+  // Browsers without `ShadowRoot` support
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+
   const OwnElement = getWindow(node).ShadowRoot;
   return node instanceof OwnElement || node instanceof ShadowRoot;
 }
@@ -1375,23 +1399,38 @@ function isTableElement(element) {
 }
 function isContainingBlock(element) {
   // TODO: Try and use feature detection here instead
-  const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
+  const isFirefox = /firefox/i.test(getUAString());
   const css = getComputedStyle$1(element); // This is non-exhaustive but covers the most common CSS properties that
   // create a containing block.
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
 
-  return css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].includes(css.willChange) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false);
+  return css.transform !== 'none' || css.perspective !== 'none' || // @ts-ignore (TS 4.1 compat)
+  css.contain === 'paint' || ['transform', 'perspective'].includes(css.willChange) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false);
+}
+function isLayoutViewport() {
+  // Not Safari
+  return !/^((?!chrome|android).)*safari/i.test(getUAString()); // Feature detection for this fails in various ways
+  // • Always-visible scrollbar or not
+  // • Width of <html>, etc.
+  // const vV = win.visualViewport;
+  // return vV ? Math.abs(win.innerWidth / vV.scale - vV.width) < 0.5 : true;
 }
 
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
 
-function getBoundingClientRect(element, includeScale) {
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+  var _win$visualViewport$o, _win$visualViewport, _win$visualViewport$o2, _win$visualViewport2;
+
   if (includeScale === void 0) {
     includeScale = false;
   }
 
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
   const clientRect = element.getBoundingClientRect();
   let scaleX = 1;
   let scaleY = 1;
@@ -1401,15 +1440,21 @@ function getBoundingClientRect(element, includeScale) {
     scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
   }
 
+  const win = isElement(element) ? getWindow(element) : window;
+  const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  const x = (clientRect.left + (addVisualOffsets ? (_win$visualViewport$o = (_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) != null ? _win$visualViewport$o : 0 : 0)) / scaleX;
+  const y = (clientRect.top + (addVisualOffsets ? (_win$visualViewport$o2 = (_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) != null ? _win$visualViewport$o2 : 0 : 0)) / scaleY;
+  const width = clientRect.width / scaleX;
+  const height = clientRect.height / scaleY;
   return {
-    width: clientRect.width / scaleX,
-    height: clientRect.height / scaleY,
-    top: clientRect.top / scaleY,
-    right: clientRect.right / scaleX,
-    bottom: clientRect.bottom / scaleY,
-    left: clientRect.left / scaleX,
-    x: clientRect.left / scaleX,
-    y: clientRect.top / scaleY
+    width,
+    height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x,
+    y
   };
 }
 
@@ -1418,16 +1463,16 @@ function getDocumentElement(node) {
 }
 
 function getNodeScroll(element) {
-  if (isWindow(element)) {
+  if (isElement(element)) {
     return {
-      scrollLeft: element.pageXOffset,
-      scrollTop: element.pageYOffset
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
     };
   }
 
   return {
-    scrollLeft: element.scrollLeft,
-    scrollTop: element.scrollTop
+    scrollLeft: element.pageXOffset,
+    scrollTop: element.pageYOffset
   };
 }
 
@@ -1445,7 +1490,8 @@ function isScaled(element) {
 function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
   const documentElement = getDocumentElement(offsetParent);
-  const rect = getBoundingClientRect(element, isOffsetParentAnElement && isScaled(offsetParent));
+  const rect = getBoundingClientRect(element, // @ts-ignore - checked above (TS 4.1 compat)
+  isOffsetParentAnElement && isScaled(offsetParent), strategy === 'fixed');
   let scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -1594,7 +1640,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   };
 }
 
-function getViewportRect(element) {
+function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
   const visualViewport = win.visualViewport;
@@ -1605,12 +1651,10 @@ function getViewportRect(element) {
 
   if (visualViewport) {
     width = visualViewport.width;
-    height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
-    // In Chrome, it returns a value very close to 0 (+/-) but contains rounding
-    // errors due to floating point numbers, so we need to check precision.
-    // Safari returns a number <= 0, usually < -1 when pinch-zoomed
+    height = visualViewport.height;
+    const layoutViewport = isLayoutViewport();
 
-    if (Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) < 0.01) {
+    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
     }
@@ -1677,13 +1721,13 @@ function getOverflowAncestors(node, list) {
   const target = isBody ? [win].concat(win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []) : scrollableAncestor;
   const updatedList = list.concat(target);
   return isBody ? updatedList : // @ts-ignore: isBody tells us target will be an HTMLElement here
-  updatedList.concat(getOverflowAncestors(getParentNode(target)));
+  updatedList.concat(getOverflowAncestors(target));
 }
 
 function contains(parent, child) {
-  const rootNode = child.getRootNode == null ? void 0 : child.getRootNode(); // First, attempt with faster native method
+  const rootNode = child == null ? void 0 : child.getRootNode == null ? void 0 : child.getRootNode(); // First, attempt with faster native method
 
-  if (parent.contains(child)) {
+  if (parent != null && parent.contains(child)) {
     return true;
   } // then fallback to custom implementation with Shadow DOM support
   else if (rootNode && isShadowRoot(rootNode)) {
@@ -1703,8 +1747,8 @@ function contains(parent, child) {
   return false;
 }
 
-function getInnerBoundingClientRect(element) {
-  const clientRect = getBoundingClientRect(element);
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, false, strategy === 'fixed');
   const top = clientRect.top + element.clientTop;
   const left = clientRect.left + element.clientLeft;
   return {
@@ -1719,13 +1763,13 @@ function getInnerBoundingClientRect(element) {
   };
 }
 
-function getClientRectFromClippingAncestor(element, clippingParent) {
+function getClientRectFromClippingAncestor(element, clippingParent, strategy) {
   if (clippingParent === 'viewport') {
-    return rectToClientRect(getViewportRect(element));
+    return rectToClientRect(getViewportRect(element, strategy));
   }
 
   if (isElement(clippingParent)) {
-    return getInnerBoundingClientRect(clippingParent);
+    return getInnerBoundingClientRect(clippingParent, strategy);
   }
 
   return rectToClientRect(getDocumentRect(getDocumentElement(element)));
@@ -1753,19 +1797,20 @@ function getClippingRect(_ref) {
   let {
     element,
     boundary,
-    rootBoundary
+    rootBoundary,
+    strategy
   } = _ref;
   const mainClippingAncestors = boundary === 'clippingAncestors' ? getClippingAncestors(element) : [].concat(boundary);
   const clippingAncestors = [...mainClippingAncestors, rootBoundary];
   const firstClippingAncestor = clippingAncestors[0];
   const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
-    const rect = getClientRectFromClippingAncestor(element, clippingAncestor);
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
     accRect.top = max(rect.top, accRect.top);
     accRect.right = min(rect.right, accRect.right);
     accRect.bottom = min(rect.bottom, accRect.bottom);
     accRect.left = max(rect.left, accRect.left);
     return accRect;
-  }, getClientRectFromClippingAncestor(element, firstClippingAncestor));
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
   return {
     width: clippingRect.right - clippingRect.left,
     height: clippingRect.bottom - clippingRect.top,
@@ -1811,13 +1856,11 @@ function autoUpdate(reference, floating, update, options) {
   const {
     ancestorScroll: _ancestorScroll = true,
     ancestorResize: _ancestorResize = true,
-    elementResize: _elementResize = true,
+    elementResize = true,
     animationFrame = false
   } = options;
-  let cleanedUp = false;
   const ancestorScroll = _ancestorScroll && !animationFrame;
   const ancestorResize = _ancestorResize && !animationFrame;
-  const elementResize = _elementResize && !animationFrame;
   const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)] : [];
   ancestors.forEach(ancestor => {
     ancestorScroll && ancestor.addEventListener('scroll', update, {
@@ -1829,7 +1872,7 @@ function autoUpdate(reference, floating, update, options) {
 
   if (elementResize) {
     observer = new ResizeObserver(update);
-    isElement(reference) && observer.observe(reference);
+    isElement(reference) && !animationFrame && observer.observe(reference);
     observer.observe(floating);
   }
 
@@ -1841,10 +1884,6 @@ function autoUpdate(reference, floating, update, options) {
   }
 
   function frameLoop() {
-    if (cleanedUp) {
-      return;
-    }
-
     const nextRefRect = getBoundingClientRect(reference);
 
     if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
@@ -1855,10 +1894,13 @@ function autoUpdate(reference, floating, update, options) {
     frameId = requestAnimationFrame(frameLoop);
   }
 
+  if (!elementResize) {
+    update();
+  }
+
   return () => {
     var _observer;
 
-    cleanedUp = true;
     ancestors.forEach(ancestor => {
       ancestorScroll && ancestor.removeEventListener('scroll', update);
       ancestorResize && ancestor.removeEventListener('resize', update);
@@ -2026,7 +2068,7 @@ __decorate([attr({
 
 __decorate([attr, __metadata("design:type", String)], Popup.prototype, "anchor", void 0);
 
-var css_248z = ".control {\n  width: min-content;\n  background-color: var(--vvd-color-surface-4dp);\n  border-radius: inherit;\n  contain: layout;\n}\n.control:not(.open) {\n  display: none;\n}\n\n.popup-wrapper {\n  position: fixed;\n  border-radius: 6px;\n}\n\n.popup-content {\n  display: grid;\n  color: var(--vvd-color-on-canvas);\n}\n.dismissible .popup-content {\n  align-content: start;\n  grid-template-columns: 1fr auto;\n}\n\n.arrow {\n  position: absolute;\n  z-index: -1;\n  width: 8px;\n  height: 8px;\n  background-color: var(--vvd-color-surface-4dp);\n  transform: rotate(45deg);\n}\n\n.dismissible {\n  align-self: flex-start;\n  margin-block-start: 0.25rem;\n  margin-inline-end: 0.25rem;\n}";
+var css_248z = ".control {\n  background-color: var(--vvd-color-surface-4dp);\n  border-radius: inherit;\n  contain: layout;\n  inline-size: -moz-fit-content;\n  inline-size: fit-content;\n}\n.control:not(.open) {\n  display: none;\n}\n\n.popup-wrapper {\n  position: fixed;\n  border-radius: 6px;\n}\n\n.popup-content {\n  display: grid;\n  color: var(--vvd-color-on-canvas);\n}\n.dismissible .popup-content {\n  align-content: start;\n  grid-template-columns: 1fr auto;\n}\n\n.arrow {\n  position: absolute;\n  z-index: -1;\n  width: 8px;\n  height: 8px;\n  background-color: var(--vvd-color-surface-4dp);\n  transform: rotate(45deg);\n}\n\n.dismissible {\n  align-self: flex-start;\n  margin-block-start: 0.25rem;\n  margin-inline-end: 0.25rem;\n}";
 styleInject(css_248z);
 
 let _ = t => t,
@@ -2053,14 +2095,14 @@ const popupTemplate = () => html(_t || (_t = _`
 				${0}
 			</div>
     </div>
-  </vwc-elevation>`), ref('popupEl'), getClasses, x => x.open ? 'false' : 'true', x => x.alternate ? 'vvd-theme-alternate' : '', when(x => x.dismissible, html(_t2 || (_t2 = _`<vwc-button size="condensed" @click="${0}"
+  </vwc-elevation>`), ref('popupEl'), getClasses, x => x.open ? 'false' : 'true', x => x.alternate ? 'vvd-theme-alternate' : '', when(x => x.dismissible, html(_t2 || (_t2 = _`<vwc-button density="condensed" @click="${0}"
 						class="dismissible" icon="close-small-solid" shape="pill"></vwc-button>`), x => x.open = false)), when(x => x.arrow, html(_t3 || (_t3 = _`<div class="arrow" ${0}></div>`), ref('arrowEl'))));
 
-const VIVIDPopup = Popup.compose({
+const vividPopup = Popup.compose({
   baseName: 'popup',
   template: popupTemplate,
   styles: css_248z
 });
-designSystem.register(VIVIDPopup());
+designSystem.register(vividPopup());
 
-export { VIVIDPopup };
+export { vividPopup };

package/progress/index.js

@@ -6,7 +6,7 @@ import { B as BaseProgress } from '../shared/base-progress.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 
-var css_248z = ".base {\n  height: 6px;\n  align-items: center;\n  margin: 0;\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.base:not(.connotation-pacific):not(.connotation-cta):not(.connotation-alert):not(.connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.base.connotation-pacific {\n  --connotation: linear-gradient(to right, var(--vvd-color-info-30), var(--vvd-color-cta-70));\n}\n\n.indeterminate {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  border-radius: 3px;\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 100%;\n}\n.progress .indeterminate {\n  background-color: var(--connotation);\n}\n\n.determinate {\n  background-color: var(--connotation);\n  block-size: 100%;\n  border-radius: 3px;\n  transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n  background-image: var(--connotation);\n}\n\n.indeterminate-indicator-1, .indeterminate-indicator-2 {\n  position: absolute;\n  animation: indeterminate-1 2s infinite;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 30%;\n  opacity: 0;\n}\n\n.indeterminate-indicator-2 {\n  animation: indeterminate-2 2s infinite;\n  inline-size: 60%;\n}\n\n.connotation-pacific .indeterminate-indicator-1, .connotation-pacific .indeterminate-indicator-2 {\n  background-image: var(--connotation);\n}\n\n.reverse .indeterminate-indicator-1, .reverse .indeterminate-indicator-2 {\n  animation-direction: reverse;\n}\n.reverse .determinate {\n  position: absolute;\n  right: 0;\n}\n\n.base.shape-sharp .determinate, .base.shape-sharp .indeterminate {\n  border-radius: 0;\n}\n\n.base.paused .indeterminate-indicator-1,\n.base.paused .indeterminate-indicator-2 {\n  animation-play-state: paused;\n  background-color: var(--connotation);\n}\n\n.base.paused .determinate {\n  background-color: var(--vvd-color-neutral-40);\n}\n\n@keyframes indeterminate-1 {\n  0% {\n    opacity: 1;\n    transform: translateX(-100%);\n  }\n  70% {\n    opacity: 1;\n    transform: translateX(300%);\n  }\n  70.01% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(300%);\n  }\n}\n@keyframes indeterminate-2 {\n  0% {\n    opacity: 0;\n    transform: translateX(-150%);\n  }\n  29.99% {\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n    transform: translateX(-150%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(166.66%);\n  }\n}";
+var css_248z = ".base {\n  height: 6px;\n  align-items: center;\n  margin: 0;\n  outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n.base:not(.connotation-pacific).connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n.base:not(.connotation-pacific).connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n.base:not(.connotation-pacific):not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n.base.connotation-pacific {\n  --connotation: linear-gradient(to right, var(--vvd-color-info-30), var(--vvd-color-cta-70));\n}\n\n.indeterminate {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  border-radius: 3px;\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 100%;\n}\n.progress .indeterminate {\n  background-color: var(--connotation);\n}\n\n.determinate {\n  background-color: var(--connotation);\n  block-size: 100%;\n  border-radius: 3px;\n  transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n  background-image: var(--connotation);\n}\n\n.indeterminate-indicator-1, .indeterminate-indicator-2 {\n  position: absolute;\n  animation: indeterminate-1 2s infinite;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 30%;\n  opacity: 0;\n}\n\n.indeterminate-indicator-2 {\n  animation: indeterminate-2 2s infinite;\n  inline-size: 60%;\n}\n\n.connotation-pacific .indeterminate-indicator-1, .connotation-pacific .indeterminate-indicator-2 {\n  background-image: var(--connotation);\n}\n\n.reverse .indeterminate-indicator-1, .reverse .indeterminate-indicator-2 {\n  animation-direction: reverse;\n}\n.reverse .determinate {\n  position: absolute;\n  right: 0;\n}\n\n.base.shape-sharp .determinate, .base.shape-sharp .indeterminate {\n  border-radius: 0;\n}\n\n.base.paused .indeterminate-indicator-1,\n.base.paused .indeterminate-indicator-2 {\n  animation-play-state: paused;\n  background-color: var(--connotation);\n}\n\n.base.paused .determinate {\n  background-color: var(--vvd-color-neutral-40);\n}\n\n@keyframes indeterminate-1 {\n  0% {\n    opacity: 1;\n    transform: translateX(-100%);\n  }\n  70% {\n    opacity: 1;\n    transform: translateX(300%);\n  }\n  70.01% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(300%);\n  }\n}\n@keyframes indeterminate-2 {\n  0% {\n    opacity: 0;\n    transform: translateX(-150%);\n  }\n  29.99% {\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n    transform: translateX(-150%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(166.66%);\n  }\n}";
 styleInject(css_248z);
 
 var classof = classofRaw;

package/progress-ring/index.js

@@ -4,19 +4,24 @@ import { B as BaseProgress } from '../shared/base-progress.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 
-var css_248z = ".base {\n  width: 36px;\n  height: 36px;\n  align-items: center;\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.base:not(.connotation-cta):not(.connotation-alert):not(.connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.base.base-large {\n  width: 48px;\n  height: 48px;\n}\n\n.base.base-small {\n  width: 24px;\n  height: 24px;\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n  stroke: var(--vvd-color-neutral);\n}\n\n.base.paused .determinate {\n  stroke: var(--vvd-color-neutral);\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
+var css_248z = ".base {\n  align-items: center;\n  block-size: var(--_density);\n  inline-size: var(--_density);\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n.base.density-4 {\n  --_density: calc(4 * 4px);\n}\n.base.density-5 {\n  --_density: calc(5 * 4px);\n}\n.base.density-6 {\n  --_density: calc(6 * 4px);\n}\n.base.density-7 {\n  --_density: calc(7 * 4px);\n}\n.base.density-8 {\n  --_density: calc(8 * 4px);\n}\n.base.density-10 {\n  --_density: calc(10 * 4px);\n}\n.base.density-11 {\n  --_density: calc(11 * 4px);\n}\n.base.density-12 {\n  --_density: calc(12 * 4px);\n}\n.base:not(.density-4, .density-5, .density-6, .density-7, .density-8, .density-10, .density-11, .density-12) {\n  --_density: calc(9 * 4px);\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n  stroke: var(--vvd-color-neutral);\n}\n\n.base.paused .determinate {\n  stroke: var(--vvd-color-neutral);\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
 styleInject(css_248z);
 
 class ProgressRing extends BaseProgress {}
 
-__decorate([attr(), __metadata("design:type", String)], ProgressRing.prototype, "connotation", void 0);
+__decorate([attr, __metadata("design:type", String)], ProgressRing.prototype, "connotation", void 0);
+
+__decorate([attr, __metadata("design:type", Number)], ProgressRing.prototype, "density", void 0);
 
 let _2 = t => t,
     _t,
     _t2,
     _t3;
 
-const getClasses = _ => classNames('base', [`connotation-${_.connotation}`, !!_.connotation]);
+const getClasses = ({
+  connotation,
+  density
+}) => classNames('base', [`connotation-${connotation}`, !!connotation], [`density-${(density ? Number(density) : 0) + 9}`, !!density]);
 
 const progressSegments = 44;
 const ProgressRingTemplate = _ => html(_t || (_t = _2`

package/shared/enums.js

@@ -0,0 +1,80 @@
+var Connotation;
+
+(function (Connotation) {
+  Connotation["Canvas"] = "canvas";
+  Connotation["Primary"] = "primary";
+  Connotation["CTA"] = "cta";
+  Connotation["Success"] = "success";
+  Connotation["Alert"] = "alert";
+  Connotation["Warning"] = "warning";
+  Connotation["Info"] = "info";
+  Connotation["Announcement"] = "announcement";
+})(Connotation || (Connotation = {}));
+
+var ConnotationDecorative;
+
+(function (ConnotationDecorative) {
+  ConnotationDecorative["Pacific"] = "pacific";
+})(ConnotationDecorative || (ConnotationDecorative = {}));
+
+var Shape;
+
+(function (Shape) {
+  Shape["Rounded"] = "rounded";
+  Shape["Pill"] = "pill";
+  Shape["Circled"] = "circled";
+  Shape["Sharp"] = "sharp";
+})(Shape || (Shape = {}));
+
+var Appearance;
+
+(function (Appearance) {
+  Appearance["Text"] = "text";
+  Appearance["Filled"] = "filled";
+  Appearance["Outlined"] = "outlined";
+  Appearance["Duotone"] = "duotone";
+  Appearance["Subtle"] = "subtle";
+  Appearance["Ghost"] = "ghost";
+})(Appearance || (Appearance = {}));
+
+var Density;
+
+(function (Density) {
+  Density["Condensed"] = "condensed";
+  Density["Normal"] = "normal";
+  Density["Extended"] = "extended";
+})(Density || (Density = {}));
+
+var Size;
+
+(function (Size) {
+  Size["Small"] = "small";
+  Size["Medium"] = "medium";
+  Size["Large"] = "large";
+})(Size || (Size = {}));
+
+var Position;
+
+(function (Position) {
+  Position["Top"] = "TOP";
+  Position["Bottom"] = "BOTTOM";
+  Position["Start"] = "START";
+  Position["Center"] = "CENTER";
+  Position["End"] = "END";
+})(Position || (Position = {}));
+
+var Role;
+
+(function (Role) {
+  Role["Status"] = "status";
+  Role["Alert"] = "alert";
+})(Role || (Role = {}));
+
+var AriaLive;
+
+(function (AriaLive) {
+  AriaLive["Polite"] = "polite";
+  AriaLive["Assertive"] = "assertive";
+})(AriaLive || (AriaLive = {}));
+
+export { Connotation as C };