@vonage/vivid 3.0.0-next.14 → 3.0.0-next.17

package/popup/index.js

@@ -11,9 +11,12 @@ 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/focus.js';
 import '../shared/affix.js';
+import '../shared/button.js';
 import '../shared/apply-mixins.js';
+import '../shared/focus2.js';
 
 var anObject$2 = anObject$3;
 
@@ -811,7 +814,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 +879,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 +887,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 +1042,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 +1143,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 +1201,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 +1335,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 +1358,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 +1378,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 +1400,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 +1441,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 +1464,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 +1491,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 +1641,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 +1652,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 +1722,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 +1748,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 +1764,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 +1798,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 +1857,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 +1873,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 +1885,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 +1895,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 +2069,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-button {\n  align-self: flex-start;\n  margin-block-start: 0.25rem;\n  margin-inline-end: 0.25rem;\n}";
 styleInject(css_248z);
 
 let _ = t => t,
@@ -2054,13 +2097,13 @@ const popupTemplate = () => html(_t || (_t = _`
 			</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 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'))));
+						class="dismissible-button" 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-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.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\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/button.js

@@ -0,0 +1,188 @@
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { F as FormAssociated } from './focus2.js';
+import { A as ARIAGlobalStatesAndProperties, S as StartEnd } from './aria-global.js';
+
+class _Button extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedButton extends FormAssociated(_Button) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
+
+/**
+ * A Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+ *
+ * @public
+ */
+class Button extends FormAssociatedButton {
+    constructor() {
+        super(...arguments);
+        /**
+         * Prevent events to propagate if disabled and has no slotted content wrapped in HTML elements
+         * @internal
+         */
+        this.handleClick = (e) => {
+            var _a;
+            if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
+                e.stopPropagation();
+            }
+        };
+        /**
+         * Submits the parent form
+         */
+        this.handleSubmission = () => {
+            if (!this.form) {
+                return;
+            }
+            const attached = this.proxy.isConnected;
+            if (!attached) {
+                this.attachProxy();
+            }
+            // Browser support for requestSubmit is not comprehensive
+            // so click the proxy if it isn't supported
+            typeof this.form.requestSubmit === "function"
+                ? this.form.requestSubmit(this.proxy)
+                : this.proxy.click();
+            if (!attached) {
+                this.detachProxy();
+            }
+        };
+        /**
+         * Resets the parent form
+         */
+        this.handleFormReset = () => {
+            var _a;
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
+        };
+        /**
+         * Overrides the focus call for where delegatesFocus is unsupported.
+         * This check works for Chrome, Edge Chromium, FireFox, and Safari
+         * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
+         */
+        this.handleUnsupportedDelegatesFocus = () => {
+            var _a;
+            // Check to see if delegatesFocus is supported
+            if (window.ShadowRoot &&
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                this.focus = () => {
+                    this.control.focus();
+                };
+            }
+        };
+    }
+    formactionChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formAction = this.formaction;
+        }
+    }
+    formenctypeChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formEnctype = this.formenctype;
+        }
+    }
+    formmethodChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formMethod = this.formmethod;
+        }
+    }
+    formnovalidateChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formNoValidate = this.formnovalidate;
+        }
+    }
+    formtargetChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formTarget = this.formtarget;
+        }
+    }
+    typeChanged(previous, next) {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.type = this.type;
+        }
+        next === "submit" && this.addEventListener("click", this.handleSubmission);
+        previous === "submit" && this.removeEventListener("click", this.handleSubmission);
+        next === "reset" && this.addEventListener("click", this.handleFormReset);
+        previous === "reset" && this.removeEventListener("click", this.handleFormReset);
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this.proxy.setAttribute("type", this.type);
+        this.handleUnsupportedDelegatesFocus();
+        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+        if (elements) {
+            elements.forEach((span) => {
+                span.addEventListener("click", this.handleClick);
+            });
+        }
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+        if (elements) {
+            elements.forEach((span) => {
+                span.removeEventListener("click", this.handleClick);
+            });
+        }
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], Button.prototype, "autofocus", void 0);
+__decorate([
+    attr({ attribute: "form" })
+], Button.prototype, "formId", void 0);
+__decorate([
+    attr
+], Button.prototype, "formaction", void 0);
+__decorate([
+    attr
+], Button.prototype, "formenctype", void 0);
+__decorate([
+    attr
+], Button.prototype, "formmethod", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], Button.prototype, "formnovalidate", void 0);
+__decorate([
+    attr
+], Button.prototype, "formtarget", void 0);
+__decorate([
+    attr
+], Button.prototype, "type", void 0);
+__decorate([
+    observable
+], Button.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA button role
+ *
+ * @public
+ */
+class DelegatesARIAButton {
+}
+__decorate([
+    attr({ attribute: "aria-expanded" })
+], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
+__decorate([
+    attr({ attribute: "aria-pressed" })
+], DelegatesARIAButton.prototype, "ariaPressed", void 0);
+applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
+applyMixins(Button, StartEnd, DelegatesARIAButton);
+
+export { Button as B };