@ag.ds-next/loading - npm Package Compare versions

Comparing version 6.0.0 to 7.0.0

CHANGELOG.md

 # @ag.ds-next/loading
 
+## 7.0.0
+
+### Minor Changes
+
+- ad9dcc4e1: New `label` prop. Replaces `aria-label`.
+
+### Patch Changes
+
+- 3f1a09f96: Render spans instead of divs
+- def4b6687: Sort package.json files
+- 30726c674: Improved a11y in windows high contrast mode
+- Updated dependencies [4f0759ad3]
+- Updated dependencies [38f4a514d]
+- Updated dependencies [0ba460044]
+- Updated dependencies [30726c674]
+- Updated dependencies [e4c7ceb5f]
+- Updated dependencies [def4b6687]
+- Updated dependencies [70aa65c52]
+- Updated dependencies [c128d8632]
+- Updated dependencies [74ca5f4c6]
+- Updated dependencies [355806633]
+  - @ag.ds-next/a11y@1.2.2
+  - @ag.ds-next/content@10.0.0
+  - @ag.ds-next/box@8.0.0
+  - @ag.ds-next/core@4.1.0
+  - @ag.ds-next/text@11.0.0
+
 ## 6.0.0
@@ -4,0 +31,0 @@

dist/ag.ds-next-loading.cjs.dev.js

@@ -10,4 +10,7 @@ 'use strict';
 var text = require('@ag.ds-next/text');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var web = require('@react-spring/web');
 var core = require('@ag.ds-next/core');
+var a11y = require('@ag.ds-next/a11y');
 
@@ -65,2 +68,3 @@ var LoadingBlanketContainer = function LoadingBlanketContainer(_ref) {
     lineHeight: "heading",
+    role: "status",
     children: children
@@ -70,2 +74,8 @@ });
 
+var _excluded = ["label", "aria-live", "role", "className", "size"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -97,3 +107,3 @@ var loadingDotsSizes = {
   styles: "border-radius:50%;background:currentColor;label:LoadingDots;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxvYWRpbmdEb3RzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRUsiLCJmaWxlIjoiTG9hZGluZ0RvdHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSFRNTEF0dHJpYnV0ZXMgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFpbCwgYW5pbWF0ZWQgfSBmcm9tICdAcmVhY3Qtc3ByaW5nL3dlYic7XG5pbXBvcnQgeyBCb3gsIEZsZXggfSBmcm9tICdAYWcuZHMtbmV4dC9ib3gnO1xuaW1wb3J0IHsgbWFwU3BhY2luZywgdXNlUHJlZmVyc1JlZHVjZWRNb3Rpb24gfSBmcm9tICdAYWcuZHMtbmV4dC9jb3JlJztcblxuY29uc3QgbG9hZGluZ0RvdHNTaXplcyA9IHtcblx0c206IHsgZ2FwOiAwLjUsIGRvdFNpemU6IG1hcFNwYWNpbmcoMC41KSwgZG90czogMyB9LFxuXHRtZDogeyBnYXA6IDAuNSwgZG90U2l6ZTogbWFwU3BhY2luZygwLjc1KSwgZG90czogMyB9LFxuXHRsZzogeyBnYXA6IDAuNSwgZG90U2l6ZTogbWFwU3BhY2luZygwLjc1KSwgZG90czogNSB9LFxufSBhcyBjb25zdDtcblxuY29uc3QgQW5pbWF0ZWRCb3ggPSBhbmltYXRlZChCb3gpO1xuXG50eXBlIExvYWRpbmdEb3RzU2l6ZXMgPSBrZXlvZiB0eXBlb2YgbG9hZGluZ0RvdHNTaXplcztcblxudHlwZSBEaXZQcm9wcyA9IEhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PjtcblxuZXhwb3J0IHR5cGUgTG9hZGluZ0RvdHNQcm9wcyA9IHtcblx0LyoqIERlc2NyaWJlcyB0aGUgbG9hZGluZyBlbGVtZW50IHRvIGFzc2lzdGl2ZSB0ZWNobm9sb2dpZXMuICovXG5cdCdhcmlhLWxhYmVsJz86IERpdlByb3BzWydhcmlhLWxhYmVsJ107XG5cdC8qKiBJbmRpY2F0ZXMgdGhhdCBhbiBlbGVtZW50IHdpbGwgYmUgdXBkYXRlZCwgYW5kIGRlc2NyaWJlcyB0aGUgdHlwZXMgb2YgdXBkYXRlcyB0aGUgdXNlciBhZ2VudHMsIGFzc2lzdGl2ZSB0ZWNobm9sb2dpZXMsIGFuZCB1c2VyIGNhbiBleHBlY3QgZnJvbSB0aGUgbGl2ZSByZWdpb24uICovXG5cdCdhcmlhLWxpdmUnPzogRGl2UHJvcHNbJ2FyaWEtbGl2ZSddO1xuXHQvKiogQVJJQSByb2xlcyBwcm92aWRlIHNlbWFudGljIG1lYW5pbmcgdG8gY29udGVudC4gKi9cblx0cm9sZT86IERpdlByb3BzWydyb2xlJ107XG5cdC8qKiBUaGUgQ1NTIGNsYXNzIG5hbWUsIHR5cGljYWxseSBnZW5lcmF0ZWQgZnJvbSB0aGUgYGNzc2AgcHJvcC4gKi9cblx0Y2xhc3NOYW1lPzogc3RyaW5nO1xuXHQvKiogVGhlIHNpemUgYW5kIG51bWJlciBvZiB0aGUgZG90cy4gKi9cblx0c2l6ZT86IExvYWRpbmdEb3RzU2l6ZXM7XG59O1xuXG5leHBvcnQgY29uc3QgTG9hZGluZ0RvdHMgPSAoe1xuXHQnYXJpYS1sYWJlbCc6IGFyaWFMYWJlbCxcblx0J2FyaWEtbGl2ZSc6IGFyaWFMaXZlLFxuXHRyb2xlLFxuXHRjbGFzc05hbWUsXG5cdHNpemUgPSAnbWQnLFxufTogTG9hZGluZ0RvdHNQcm9wcykgPT4ge1xuXHRjb25zdCB7IGdhcCwgZG90cywgZG90U2l6ZSB9ID0gbG9hZGluZ0RvdHNTaXplc1tzaXplXTtcblxuXHRjb25zdCBwcmVmZXJzUmVkdWNlZE1vdGlvbiA9IHVzZVByZWZlcnNSZWR1Y2VkTW90aW9uKCk7XG5cdGNvbnN0IHRyYWlsID0gdXNlVHJhaWwoXG5cdFx0ZG90cyxcblx0XHRwcmVmZXJzUmVkdWNlZE1vdGlvblxuXHRcdFx0PyB7IGZyb206IHsgb3BhY2l0eTogMSB9LCB0bzogeyBvcGFjaXR5OiAxIH0gfVxuXHRcdFx0OiB7XG5cdFx0XHRcdFx0ZnJvbTogeyBvcGFjaXR5OiAwIH0sXG5cdFx0XHRcdFx0dG86IHsgb3BhY2l0eTogMSB9LFxuXHRcdFx0XHRcdGxvb3A6IHsgcmV2ZXJzZTogdHJ1ZSwgZGVsYXk6IDAgfSxcblx0XHRcdFx0XHRyZXNldDogdHJ1ZSxcblx0XHRcdCAgfVxuXHQpO1xuXG5cdHJldHVybiAoXG5cdFx0PEZsZXhcblx0XHRcdGdhcD17Z2FwfVxuXHRcdFx0Y2xhc3NOYW1lPXtjbGFzc05hbWV9XG5cdFx0XHRhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG5cdFx0XHRhcmlhLWxpdmU9e2FyaWFMaXZlfVxuXHRcdFx0cm9sZT17cm9sZX1cblx0XHQ+XG5cdFx0XHR7dHJhaWwubWFwKChzdHlsZSwgaWR4KSA9PiAoXG5cdFx0XHRcdDxBbmltYXRlZEJveFxuXHRcdFx0XHRcdGtleT17aWR4fVxuXHRcdFx0XHRcdGhlaWdodD17ZG90U2l6ZX1cblx0XHRcdFx0XHR3aWR0aD17ZG90U2l6ZX1cblx0XHRcdFx0XHRzdHlsZT17c3R5bGV9XG5cdFx0XHRcdFx0Y3NzPXt7IGJvcmRlclJhZGl1czogJzUwJScsIGJhY2tncm91bmQ6ICdjdXJyZW50Q29sb3InIH19XG5cdFx0XHRcdC8+XG5cdFx0XHQpKX1cblx0XHQ8L0ZsZXg+XG5cdCk7XG59O1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxvYWRpbmdEb3RzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RUsiLCJmaWxlIjoiTG9hZGluZ0RvdHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSFRNTEF0dHJpYnV0ZXMgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFpbCwgYW5pbWF0ZWQgfSBmcm9tICdAcmVhY3Qtc3ByaW5nL3dlYic7XG5pbXBvcnQgeyBCb3gsIEZsZXggfSBmcm9tICdAYWcuZHMtbmV4dC9ib3gnO1xuaW1wb3J0IHsgbWFwU3BhY2luZywgdXNlUHJlZmVyc1JlZHVjZWRNb3Rpb24gfSBmcm9tICdAYWcuZHMtbmV4dC9jb3JlJztcbmltcG9ydCB7IFZpc3VhbGx5SGlkZGVuIH0gZnJvbSAnQGFnLmRzLW5leHQvYTExeSc7XG5cbmNvbnN0IGxvYWRpbmdEb3RzU2l6ZXMgPSB7XG5cdHNtOiB7IGdhcDogMC41LCBkb3RTaXplOiBtYXBTcGFjaW5nKDAuNSksIGRvdHM6IDMgfSxcblx0bWQ6IHsgZ2FwOiAwLjUsIGRvdFNpemU6IG1hcFNwYWNpbmcoMC43NSksIGRvdHM6IDMgfSxcblx0bGc6IHsgZ2FwOiAwLjUsIGRvdFNpemU6IG1hcFNwYWNpbmcoMC43NSksIGRvdHM6IDUgfSxcbn0gYXMgY29uc3Q7XG5cbmNvbnN0IEFuaW1hdGVkQm94ID0gYW5pbWF0ZWQoQm94KTtcblxudHlwZSBMb2FkaW5nRG90c1NpemVzID0ga2V5b2YgdHlwZW9mIGxvYWRpbmdEb3RzU2l6ZXM7XG5cbnR5cGUgRGl2UHJvcHMgPSBIVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD47XG5cbmV4cG9ydCB0eXBlIExvYWRpbmdEb3RzUHJvcHMgPSB7XG5cdC8qKiBEZXNjcmliZXMgdGhlIGxvYWRpbmcgZWxlbWVudCB0byBhc3Npc3RpdmUgdGVjaG5vbG9naWVzLiAqL1xuXHRsYWJlbD86IHN0cmluZztcblx0LyoqIEluZGljYXRlcyB0aGF0IGFuIGVsZW1lbnQgd2lsbCBiZSB1cGRhdGVkLCBhbmQgZGVzY3JpYmVzIHRoZSB0eXBlcyBvZiB1cGRhdGVzIHRoZSB1c2VyIGFnZW50cywgYXNzaXN0aXZlIHRlY2hub2xvZ2llcywgYW5kIHVzZXIgY2FuIGV4cGVjdCBmcm9tIHRoZSBsaXZlIHJlZ2lvbi4gKi9cblx0J2FyaWEtbGl2ZSc/OiBEaXZQcm9wc1snYXJpYS1saXZlJ107XG5cdC8qKiBBUklBIHJvbGVzIHByb3ZpZGUgc2VtYW50aWMgbWVhbmluZyB0byBjb250ZW50LiAqL1xuXHRyb2xlPzogRGl2UHJvcHNbJ3JvbGUnXTtcblx0LyoqIFRoZSBDU1MgY2xhc3MgbmFtZSwgdHlwaWNhbGx5IGdlbmVyYXRlZCBmcm9tIHRoZSBgY3NzYCBwcm9wLiAqL1xuXHRjbGFzc05hbWU/OiBzdHJpbmc7XG5cdC8qKiBUaGUgc2l6ZSBhbmQgbnVtYmVyIG9mIHRoZSBkb3RzLiAqL1xuXHRzaXplPzogTG9hZGluZ0RvdHNTaXplcztcbn07XG5cbmV4cG9ydCBjb25zdCBMb2FkaW5nRG90cyA9ICh7XG5cdGxhYmVsLFxuXHQnYXJpYS1saXZlJzogYXJpYUxpdmUsXG5cdHJvbGUsXG5cdGNsYXNzTmFtZSxcblx0c2l6ZSA9ICdtZCcsXG5cdC4uLnByb3BzXG59OiBMb2FkaW5nRG90c1Byb3BzKSA9PiB7XG5cdGNvbnN0IHsgZ2FwLCBkb3RzLCBkb3RTaXplIH0gPSBsb2FkaW5nRG90c1NpemVzW3NpemVdO1xuXG5cdGNvbnN0IHByZWZlcnNSZWR1Y2VkTW90aW9uID0gdXNlUHJlZmVyc1JlZHVjZWRNb3Rpb24oKTtcblx0Y29uc3QgdHJhaWwgPSB1c2VUcmFpbChcblx0XHRkb3RzLFxuXHRcdHByZWZlcnNSZWR1Y2VkTW90aW9uXG5cdFx0XHQ/IHsgZnJvbTogeyBvcGFjaXR5OiAxIH0sIHRvOiB7IG9wYWNpdHk6IDEgfSB9XG5cdFx0XHQ6IHtcblx0XHRcdFx0XHRmcm9tOiB7IG9wYWNpdHk6IDAgfSxcblx0XHRcdFx0XHR0bzogeyBvcGFjaXR5OiAxIH0sXG5cdFx0XHRcdFx0bG9vcDogeyByZXZlcnNlOiB0cnVlLCBkZWxheTogMCB9LFxuXHRcdFx0XHRcdHJlc2V0OiB0cnVlLFxuXHRcdFx0ICB9XG5cdCk7XG5cblx0cmV0dXJuIChcblx0XHQ8RmxleFxuXHRcdFx0YXM9XCJzcGFuXCJcblx0XHRcdGdhcD17Z2FwfVxuXHRcdFx0Y2xhc3NOYW1lPXtjbGFzc05hbWV9XG5cdFx0XHRhcmlhLWxpdmU9e2FyaWFMaXZlfVxuXHRcdFx0YXJpYS1hdG9taWM9XCJmYWxzZVwiXG5cdFx0XHRyb2xlPXtyb2xlfVxuXHRcdFx0ey4uLnByb3BzfVxuXHRcdD5cblx0XHRcdHtsYWJlbCAmJiA8VmlzdWFsbHlIaWRkZW4+e2xhYmVsfTwvVmlzdWFsbHlIaWRkZW4+fVxuXHRcdFx0e3RyYWlsLm1hcCgoc3R5bGUsIGlkeCkgPT4gKFxuXHRcdFx0XHQ8QW5pbWF0ZWRCb3hcblx0XHRcdFx0XHRhcz1cInNwYW5cIlxuXHRcdFx0XHRcdGtleT17aWR4fVxuXHRcdFx0XHRcdGhlaWdodD17ZG90U2l6ZX1cblx0XHRcdFx0XHR3aWR0aD17ZG90U2l6ZX1cblx0XHRcdFx0XHRoaWdoQ29udHJhc3RPdXRsaW5lXG5cdFx0XHRcdFx0c3R5bGU9e3N0eWxlfVxuXHRcdFx0XHRcdGNzcz17eyBib3JkZXJSYWRpdXM6ICc1MCUnLCBiYWNrZ3JvdW5kOiAnY3VycmVudENvbG9yJyB9fVxuXHRcdFx0XHRcdGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG5cdFx0XHRcdC8+XG5cdFx0XHQpKX1cblx0XHQ8L0ZsZXg+XG5cdCk7XG59O1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
@@ -103,3 +113,3 @@ };
 var LoadingDots = function LoadingDots(_ref) {
-  var ariaLabel = _ref['aria-label'],
+  var label = _ref.label,
       ariaLive = _ref['aria-live'],
@@ -109,3 +119,5 @@ role = _ref.role,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size;
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   var _loadingDotsSizes$siz = loadingDotsSizes[size],
@@ -136,17 +148,24 @@ gap = _loadingDotsSizes$siz.gap,
   });
-  return jsxRuntime.jsx(box.Flex, {
+  return jsxRuntime.jsxs(box.Flex, _objectSpread(_objectSpread({
+    as: "span",
     gap: gap,
     className: className,
-    "aria-label": ariaLabel,
     "aria-live": ariaLive,
-    role: role,
-    children: trail.map(function (style, idx) {
+    "aria-atomic": "false",
+    role: role
+  }, props), {}, {
+    children: [label && jsxRuntime.jsx(a11y.VisuallyHidden, {
+      children: label
+    }), trail.map(function (style, idx) {
       return jsxRuntime.jsx(AnimatedBox, {
+        as: "span",
         height: dotSize,
         width: dotSize,
+        highContrastOutline: true,
         style: style,
-        css: _ref2
+        css: _ref2,
+        "aria-hidden": "true"
       }, idx);
-    })
-  });
+    })]
+  }));
 };
@@ -162,4 +181,2 @@
       children: [jsxRuntime.jsx(LoadingDots, {
-        "aria-label": "loading",
-        role: "status",
         size: fullScreen ? 'lg' : 'md'
@@ -166,0 +183,0 @@ }), jsxRuntime.jsx(LoadingBlanketLabel, {

dist/ag.ds-next-loading.cjs.prod.js

@@ -10,4 +10,7 @@ 'use strict';
 var text = require('@ag.ds-next/text');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var web = require('@react-spring/web');
 var core = require('@ag.ds-next/core');
+var a11y = require('@ag.ds-next/a11y');
 
@@ -58,2 +61,3 @@ var LoadingBlanketContainer = function LoadingBlanketContainer(_ref) {
     lineHeight: "heading",
+    role: "status",
     children: children
@@ -63,2 +67,7 @@ });
 
+var _excluded = ["label", "aria-live", "role", "className", "size"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var loadingDotsSizes = {
@@ -89,3 +98,3 @@ sm: {
 var LoadingDots = function LoadingDots(_ref) {
-  var ariaLabel = _ref['aria-label'],
+  var label = _ref.label,
       ariaLive = _ref['aria-live'],
@@ -95,3 +104,5 @@ role = _ref.role,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size;
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   var _loadingDotsSizes$siz = loadingDotsSizes[size],
@@ -122,17 +133,24 @@ gap = _loadingDotsSizes$siz.gap,
   });
-  return jsxRuntime.jsx(box.Flex, {
+  return jsxRuntime.jsxs(box.Flex, _objectSpread(_objectSpread({
+    as: "span",
     gap: gap,
     className: className,
-    "aria-label": ariaLabel,
     "aria-live": ariaLive,
-    role: role,
-    children: trail.map(function (style, idx) {
+    "aria-atomic": "false",
+    role: role
+  }, props), {}, {
+    children: [label && jsxRuntime.jsx(a11y.VisuallyHidden, {
+      children: label
+    }), trail.map(function (style, idx) {
       return jsxRuntime.jsx(AnimatedBox, {
+        as: "span",
         height: dotSize,
         width: dotSize,
+        highContrastOutline: true,
         style: style,
-        css: _ref2
+        css: _ref2,
+        "aria-hidden": "true"
       }, idx);
-    })
-  });
+    })]
+  }));
 };
@@ -148,4 +166,2 @@
       children: [jsxRuntime.jsx(LoadingDots, {
-        "aria-label": "loading",
-        role: "status",
         size: fullScreen ? 'lg' : 'md'
@@ -152,0 +168,0 @@ }), jsxRuntime.jsx(LoadingBlanketLabel, {

dist/ag.ds-next-loading.esm.js

@@ -6,4 +6,7 @@ import { css } from '@emotion/react';
 import { Text } from '@ag.ds-next/text';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { animated, useTrail } from '@react-spring/web';
 import { mapSpacing, usePrefersReducedMotion } from '@ag.ds-next/core';
+import { VisuallyHidden } from '@ag.ds-next/a11y';
 
@@ -61,2 +64,3 @@ var LoadingBlanketContainer = function LoadingBlanketContainer(_ref) {
     lineHeight: "heading",
+    role: "status",
     children: children
@@ -66,2 +70,8 @@ });
 
+var _excluded = ["label", "aria-live", "role", "className", "size"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -93,3 +103,3 @@ var loadingDotsSizes = {
   styles: "border-radius:50%;background:currentColor;label:LoadingDots;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxvYWRpbmdEb3RzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRUsiLCJmaWxlIjoiTG9hZGluZ0RvdHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSFRNTEF0dHJpYnV0ZXMgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFpbCwgYW5pbWF0ZWQgfSBmcm9tICdAcmVhY3Qtc3ByaW5nL3dlYic7XG5pbXBvcnQgeyBCb3gsIEZsZXggfSBmcm9tICdAYWcuZHMtbmV4dC9ib3gnO1xuaW1wb3J0IHsgbWFwU3BhY2luZywgdXNlUHJlZmVyc1JlZHVjZWRNb3Rpb24gfSBmcm9tICdAYWcuZHMtbmV4dC9jb3JlJztcblxuY29uc3QgbG9hZGluZ0RvdHNTaXplcyA9IHtcblx0c206IHsgZ2FwOiAwLjUsIGRvdFNpemU6IG1hcFNwYWNpbmcoMC41KSwgZG90czogMyB9LFxuXHRtZDogeyBnYXA6IDAuNSwgZG90U2l6ZTogbWFwU3BhY2luZygwLjc1KSwgZG90czogMyB9LFxuXHRsZzogeyBnYXA6IDAuNSwgZG90U2l6ZTogbWFwU3BhY2luZygwLjc1KSwgZG90czogNSB9LFxufSBhcyBjb25zdDtcblxuY29uc3QgQW5pbWF0ZWRCb3ggPSBhbmltYXRlZChCb3gpO1xuXG50eXBlIExvYWRpbmdEb3RzU2l6ZXMgPSBrZXlvZiB0eXBlb2YgbG9hZGluZ0RvdHNTaXplcztcblxudHlwZSBEaXZQcm9wcyA9IEhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PjtcblxuZXhwb3J0IHR5cGUgTG9hZGluZ0RvdHNQcm9wcyA9IHtcblx0LyoqIERlc2NyaWJlcyB0aGUgbG9hZGluZyBlbGVtZW50IHRvIGFzc2lzdGl2ZSB0ZWNobm9sb2dpZXMuICovXG5cdCdhcmlhLWxhYmVsJz86IERpdlByb3BzWydhcmlhLWxhYmVsJ107XG5cdC8qKiBJbmRpY2F0ZXMgdGhhdCBhbiBlbGVtZW50IHdpbGwgYmUgdXBkYXRlZCwgYW5kIGRlc2NyaWJlcyB0aGUgdHlwZXMgb2YgdXBkYXRlcyB0aGUgdXNlciBhZ2VudHMsIGFzc2lzdGl2ZSB0ZWNobm9sb2dpZXMsIGFuZCB1c2VyIGNhbiBleHBlY3QgZnJvbSB0aGUgbGl2ZSByZWdpb24uICovXG5cdCdhcmlhLWxpdmUnPzogRGl2UHJvcHNbJ2FyaWEtbGl2ZSddO1xuXHQvKiogQVJJQSByb2xlcyBwcm92aWRlIHNlbWFudGljIG1lYW5pbmcgdG8gY29udGVudC4gKi9cblx0cm9sZT86IERpdlByb3BzWydyb2xlJ107XG5cdC8qKiBUaGUgQ1NTIGNsYXNzIG5hbWUsIHR5cGljYWxseSBnZW5lcmF0ZWQgZnJvbSB0aGUgYGNzc2AgcHJvcC4gKi9cblx0Y2xhc3NOYW1lPzogc3RyaW5nO1xuXHQvKiogVGhlIHNpemUgYW5kIG51bWJlciBvZiB0aGUgZG90cy4gKi9cblx0c2l6ZT86IExvYWRpbmdEb3RzU2l6ZXM7XG59O1xuXG5leHBvcnQgY29uc3QgTG9hZGluZ0RvdHMgPSAoe1xuXHQnYXJpYS1sYWJlbCc6IGFyaWFMYWJlbCxcblx0J2FyaWEtbGl2ZSc6IGFyaWFMaXZlLFxuXHRyb2xlLFxuXHRjbGFzc05hbWUsXG5cdHNpemUgPSAnbWQnLFxufTogTG9hZGluZ0RvdHNQcm9wcykgPT4ge1xuXHRjb25zdCB7IGdhcCwgZG90cywgZG90U2l6ZSB9ID0gbG9hZGluZ0RvdHNTaXplc1tzaXplXTtcblxuXHRjb25zdCBwcmVmZXJzUmVkdWNlZE1vdGlvbiA9IHVzZVByZWZlcnNSZWR1Y2VkTW90aW9uKCk7XG5cdGNvbnN0IHRyYWlsID0gdXNlVHJhaWwoXG5cdFx0ZG90cyxcblx0XHRwcmVmZXJzUmVkdWNlZE1vdGlvblxuXHRcdFx0PyB7IGZyb206IHsgb3BhY2l0eTogMSB9LCB0bzogeyBvcGFjaXR5OiAxIH0gfVxuXHRcdFx0OiB7XG5cdFx0XHRcdFx0ZnJvbTogeyBvcGFjaXR5OiAwIH0sXG5cdFx0XHRcdFx0dG86IHsgb3BhY2l0eTogMSB9LFxuXHRcdFx0XHRcdGxvb3A6IHsgcmV2ZXJzZTogdHJ1ZSwgZGVsYXk6IDAgfSxcblx0XHRcdFx0XHRyZXNldDogdHJ1ZSxcblx0XHRcdCAgfVxuXHQpO1xuXG5cdHJldHVybiAoXG5cdFx0PEZsZXhcblx0XHRcdGdhcD17Z2FwfVxuXHRcdFx0Y2xhc3NOYW1lPXtjbGFzc05hbWV9XG5cdFx0XHRhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG5cdFx0XHRhcmlhLWxpdmU9e2FyaWFMaXZlfVxuXHRcdFx0cm9sZT17cm9sZX1cblx0XHQ+XG5cdFx0XHR7dHJhaWwubWFwKChzdHlsZSwgaWR4KSA9PiAoXG5cdFx0XHRcdDxBbmltYXRlZEJveFxuXHRcdFx0XHRcdGtleT17aWR4fVxuXHRcdFx0XHRcdGhlaWdodD17ZG90U2l6ZX1cblx0XHRcdFx0XHR3aWR0aD17ZG90U2l6ZX1cblx0XHRcdFx0XHRzdHlsZT17c3R5bGV9XG5cdFx0XHRcdFx0Y3NzPXt7IGJvcmRlclJhZGl1czogJzUwJScsIGJhY2tncm91bmQ6ICdjdXJyZW50Q29sb3InIH19XG5cdFx0XHRcdC8+XG5cdFx0XHQpKX1cblx0XHQ8L0ZsZXg+XG5cdCk7XG59O1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxvYWRpbmdEb3RzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RUsiLCJmaWxlIjoiTG9hZGluZ0RvdHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSFRNTEF0dHJpYnV0ZXMgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFpbCwgYW5pbWF0ZWQgfSBmcm9tICdAcmVhY3Qtc3ByaW5nL3dlYic7XG5pbXBvcnQgeyBCb3gsIEZsZXggfSBmcm9tICdAYWcuZHMtbmV4dC9ib3gnO1xuaW1wb3J0IHsgbWFwU3BhY2luZywgdXNlUHJlZmVyc1JlZHVjZWRNb3Rpb24gfSBmcm9tICdAYWcuZHMtbmV4dC9jb3JlJztcbmltcG9ydCB7IFZpc3VhbGx5SGlkZGVuIH0gZnJvbSAnQGFnLmRzLW5leHQvYTExeSc7XG5cbmNvbnN0IGxvYWRpbmdEb3RzU2l6ZXMgPSB7XG5cdHNtOiB7IGdhcDogMC41LCBkb3RTaXplOiBtYXBTcGFjaW5nKDAuNSksIGRvdHM6IDMgfSxcblx0bWQ6IHsgZ2FwOiAwLjUsIGRvdFNpemU6IG1hcFNwYWNpbmcoMC43NSksIGRvdHM6IDMgfSxcblx0bGc6IHsgZ2FwOiAwLjUsIGRvdFNpemU6IG1hcFNwYWNpbmcoMC43NSksIGRvdHM6IDUgfSxcbn0gYXMgY29uc3Q7XG5cbmNvbnN0IEFuaW1hdGVkQm94ID0gYW5pbWF0ZWQoQm94KTtcblxudHlwZSBMb2FkaW5nRG90c1NpemVzID0ga2V5b2YgdHlwZW9mIGxvYWRpbmdEb3RzU2l6ZXM7XG5cbnR5cGUgRGl2UHJvcHMgPSBIVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD47XG5cbmV4cG9ydCB0eXBlIExvYWRpbmdEb3RzUHJvcHMgPSB7XG5cdC8qKiBEZXNjcmliZXMgdGhlIGxvYWRpbmcgZWxlbWVudCB0byBhc3Npc3RpdmUgdGVjaG5vbG9naWVzLiAqL1xuXHRsYWJlbD86IHN0cmluZztcblx0LyoqIEluZGljYXRlcyB0aGF0IGFuIGVsZW1lbnQgd2lsbCBiZSB1cGRhdGVkLCBhbmQgZGVzY3JpYmVzIHRoZSB0eXBlcyBvZiB1cGRhdGVzIHRoZSB1c2VyIGFnZW50cywgYXNzaXN0aXZlIHRlY2hub2xvZ2llcywgYW5kIHVzZXIgY2FuIGV4cGVjdCBmcm9tIHRoZSBsaXZlIHJlZ2lvbi4gKi9cblx0J2FyaWEtbGl2ZSc/OiBEaXZQcm9wc1snYXJpYS1saXZlJ107XG5cdC8qKiBBUklBIHJvbGVzIHByb3ZpZGUgc2VtYW50aWMgbWVhbmluZyB0byBjb250ZW50LiAqL1xuXHRyb2xlPzogRGl2UHJvcHNbJ3JvbGUnXTtcblx0LyoqIFRoZSBDU1MgY2xhc3MgbmFtZSwgdHlwaWNhbGx5IGdlbmVyYXRlZCBmcm9tIHRoZSBgY3NzYCBwcm9wLiAqL1xuXHRjbGFzc05hbWU/OiBzdHJpbmc7XG5cdC8qKiBUaGUgc2l6ZSBhbmQgbnVtYmVyIG9mIHRoZSBkb3RzLiAqL1xuXHRzaXplPzogTG9hZGluZ0RvdHNTaXplcztcbn07XG5cbmV4cG9ydCBjb25zdCBMb2FkaW5nRG90cyA9ICh7XG5cdGxhYmVsLFxuXHQnYXJpYS1saXZlJzogYXJpYUxpdmUsXG5cdHJvbGUsXG5cdGNsYXNzTmFtZSxcblx0c2l6ZSA9ICdtZCcsXG5cdC4uLnByb3BzXG59OiBMb2FkaW5nRG90c1Byb3BzKSA9PiB7XG5cdGNvbnN0IHsgZ2FwLCBkb3RzLCBkb3RTaXplIH0gPSBsb2FkaW5nRG90c1NpemVzW3NpemVdO1xuXG5cdGNvbnN0IHByZWZlcnNSZWR1Y2VkTW90aW9uID0gdXNlUHJlZmVyc1JlZHVjZWRNb3Rpb24oKTtcblx0Y29uc3QgdHJhaWwgPSB1c2VUcmFpbChcblx0XHRkb3RzLFxuXHRcdHByZWZlcnNSZWR1Y2VkTW90aW9uXG5cdFx0XHQ/IHsgZnJvbTogeyBvcGFjaXR5OiAxIH0sIHRvOiB7IG9wYWNpdHk6IDEgfSB9XG5cdFx0XHQ6IHtcblx0XHRcdFx0XHRmcm9tOiB7IG9wYWNpdHk6IDAgfSxcblx0XHRcdFx0XHR0bzogeyBvcGFjaXR5OiAxIH0sXG5cdFx0XHRcdFx0bG9vcDogeyByZXZlcnNlOiB0cnVlLCBkZWxheTogMCB9LFxuXHRcdFx0XHRcdHJlc2V0OiB0cnVlLFxuXHRcdFx0ICB9XG5cdCk7XG5cblx0cmV0dXJuIChcblx0XHQ8RmxleFxuXHRcdFx0YXM9XCJzcGFuXCJcblx0XHRcdGdhcD17Z2FwfVxuXHRcdFx0Y2xhc3NOYW1lPXtjbGFzc05hbWV9XG5cdFx0XHRhcmlhLWxpdmU9e2FyaWFMaXZlfVxuXHRcdFx0YXJpYS1hdG9taWM9XCJmYWxzZVwiXG5cdFx0XHRyb2xlPXtyb2xlfVxuXHRcdFx0ey4uLnByb3BzfVxuXHRcdD5cblx0XHRcdHtsYWJlbCAmJiA8VmlzdWFsbHlIaWRkZW4+e2xhYmVsfTwvVmlzdWFsbHlIaWRkZW4+fVxuXHRcdFx0e3RyYWlsLm1hcCgoc3R5bGUsIGlkeCkgPT4gKFxuXHRcdFx0XHQ8QW5pbWF0ZWRCb3hcblx0XHRcdFx0XHRhcz1cInNwYW5cIlxuXHRcdFx0XHRcdGtleT17aWR4fVxuXHRcdFx0XHRcdGhlaWdodD17ZG90U2l6ZX1cblx0XHRcdFx0XHR3aWR0aD17ZG90U2l6ZX1cblx0XHRcdFx0XHRoaWdoQ29udHJhc3RPdXRsaW5lXG5cdFx0XHRcdFx0c3R5bGU9e3N0eWxlfVxuXHRcdFx0XHRcdGNzcz17eyBib3JkZXJSYWRpdXM6ICc1MCUnLCBiYWNrZ3JvdW5kOiAnY3VycmVudENvbG9yJyB9fVxuXHRcdFx0XHRcdGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG5cdFx0XHRcdC8+XG5cdFx0XHQpKX1cblx0XHQ8L0ZsZXg+XG5cdCk7XG59O1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
@@ -99,3 +109,3 @@ };
 var LoadingDots = function LoadingDots(_ref) {
-  var ariaLabel = _ref['aria-label'],
+  var label = _ref.label,
       ariaLive = _ref['aria-live'],
@@ -105,3 +115,5 @@ role = _ref.role,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size;
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   var _loadingDotsSizes$siz = loadingDotsSizes[size],
@@ -132,17 +144,24 @@ gap = _loadingDotsSizes$siz.gap,
   });
-  return jsx(Flex, {
+  return jsxs(Flex, _objectSpread(_objectSpread({
+    as: "span",
     gap: gap,
     className: className,
-    "aria-label": ariaLabel,
     "aria-live": ariaLive,
-    role: role,
-    children: trail.map(function (style, idx) {
+    "aria-atomic": "false",
+    role: role
+  }, props), {}, {
+    children: [label && jsx(VisuallyHidden, {
+      children: label
+    }), trail.map(function (style, idx) {
       return jsx(AnimatedBox, {
+        as: "span",
         height: dotSize,
         width: dotSize,
+        highContrastOutline: true,
         style: style,
-        css: _ref2
+        css: _ref2,
+        "aria-hidden": "true"
       }, idx);
-    })
-  });
+    })]
+  }));
 };
@@ -158,4 +177,2 @@
       children: [jsx(LoadingDots, {
-        "aria-label": "loading",
-        role: "status",
         size: fullScreen ? 'lg' : 'md'
@@ -162,0 +179,0 @@ }), jsx(LoadingBlanketLabel, {

dist/declarations/src/LoadingDots.d.ts

@@ -23,3 +23,3 @@ import { HTMLAttributes } from 'react';
     /** Describes the loading element to assistive technologies. */
-    'aria-label'?: DivProps['aria-label'];
+    label?: string;
     /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
@@ -34,3 +34,3 @@ 'aria-live'?: DivProps['aria-live'];
 };
-export declare const LoadingDots: ({ "aria-label": ariaLabel, "aria-live": ariaLive, role, className, size, }: LoadingDotsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LoadingDots: ({ label, "aria-live": ariaLive, role, className, size, ...props }: LoadingDotsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package.json

 {
 	"name": "@ag.ds-next/loading",
-	"version": "6.0.0",
+	"version": "7.0.0",
+	"license": "MIT",
 	"main": "dist/ag.ds-next-loading.cjs.js",
 	"module": "dist/ag.ds-next-loading.esm.js",
-	"license": "MIT",
-	"peerDependencies": {
-		"@ag.ds-next/box": "7.0.0",
-		"@ag.ds-next/content": "9.0.0",
-		"@ag.ds-next/core": "4.0.0",
-		"@ag.ds-next/text": "10.0.0",
-		"@emotion/react": "^11.7.0",
-		"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
+	"dependencies": {
+		"@babel/runtime": "^7.4.5",
+		"@react-spring/web": "^9.4.5"
 	},
 	"devDependencies": {
+		"@ag.ds-next/a11y": "*",
 		"@ag.ds-next/box": "*",
@@ -23,6 +20,11 @@ "@ag.ds-next/content": "*",
 	},
-	"dependencies": {
-		"@babel/runtime": "^7.4.5",
-		"@react-spring/web": "^9.4.5"
+	"peerDependencies": {
+		"@ag.ds-next/a11y": "^1.2.2",
+		"@ag.ds-next/box": "8.0.0",
+		"@ag.ds-next/content": "10.0.0",
+		"@ag.ds-next/core": "4.1.0",
+		"@ag.ds-next/text": "11.0.0",
+		"@emotion/react": "^11.7.0",
+		"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
 	}
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47185

increased by16.17%

Number of package files

25

increased by4.17%

Lines of code

924

increased by9.74%

Worsened metrics

Dependency count

9

increased by12.5%

Dev dependency count

7

increased by16.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes