@longline/aqua-ui 1.0.339 → 1.0.341

package/containers/Message/Error.d.ts

@@ -6,6 +6,8 @@ interface IProps {
     onRetry?: () => void;
     /** If set, add a margin around the message box. */
     margin?: boolean;
+    /** Optional inline styles applied to the outer element. */
+    style?: React.CSSProperties;
 }
 declare const Error: {
     (props: IProps): React.JSX.Element;

package/containers/Message/Error.js

@@ -3,7 +3,7 @@ import { Message } from './Message';
 import { TertiaryButton } from '../../controls/TertiaryButton';
 var Error = function (props) {
     var _a;
-    return React.createElement(Message, { margin: props.margin }, (_a = props.children) !== null && _a !== void 0 ? _a : "An error occurred.",
+    return React.createElement(Message, { margin: props.margin, style: props.style }, (_a = props.children) !== null && _a !== void 0 ? _a : "An error occurred.",
         props.onRetry && React.createElement(TertiaryButton, { onClick: props.onRetry }, "RETRY"));
 };
 Error.displayName = "Message.Error";

package/containers/Message/Message.d.ts

@@ -7,6 +7,11 @@ interface IMessageProps extends ITestable {
     children?: React.ReactNode;
     /** If set, add a margin around the message box. */
     margin?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A `Message` is used to communicate to the user that something unusual

package/containers/Message/Message.js

@@ -19,7 +19,7 @@ import { NoData } from './NoData';
 import { NoFilteredData } from './NoFilteredData';
 import { Error } from './Error';
 var MessageBase = function (props) {
-    return React.createElement("div", { "data-testid": props['data-testid'] || "Message", className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": props['data-testid'] || "Message", className: props.className, style: props.style }, props.children);
 };
 var MessageStyled = styled(MessageBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position:\n  margin: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  align-items: center;\n  gap: 16px;\n\n  // Appearance:\n  color: ", ";\n  user-select: none;\n  padding: 16px 16px 16px 16px;\n  border-radius: ", "px;\n  background-color: ", ";  \n  line-height: 22px;\n"], ["\n  // Position:\n  margin: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  align-items: center;\n  gap: 16px;\n\n  // Appearance:\n  color: ", ";\n  user-select: none;\n  padding: 16px 16px 16px 16px;\n  border-radius: ", "px;\n  background-color: ", ";  \n  line-height: 22px;\n"
     /**

package/containers/Message/NoData.d.ts

@@ -4,6 +4,8 @@ interface IProps {
     children?: React.ReactNode;
     /** If set, add a margin around the message box. */
     margin?: boolean;
+    /** Optional inline styles applied to the outer element. */
+    style?: React.CSSProperties;
 }
 declare const NoData: {
     (props: IProps): React.JSX.Element;

package/containers/Message/NoData.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Message } from './Message';
 var NoData = function (props) {
     var _a;
-    return React.createElement(Message, { margin: props.margin }, (_a = props.children) !== null && _a !== void 0 ? _a : "There are no records yet.");
+    return React.createElement(Message, { margin: props.margin, style: props.style }, (_a = props.children) !== null && _a !== void 0 ? _a : "There are no records yet.");
 };
 NoData.displayName = "Message.NoData";
 export { NoData };

package/containers/Message/NoFilteredData.d.ts

@@ -6,6 +6,8 @@ interface IProps {
     onClear?: () => void;
     /** If set, add a margin around the message box. */
     margin?: boolean;
+    /** Optional inline styles applied to the outer element. */
+    style?: React.CSSProperties;
 }
 declare const NoFilteredData: {
     (props: IProps): React.JSX.Element;

package/containers/Message/NoFilteredData.js

@@ -3,7 +3,7 @@ import { Message } from './Message';
 import { TertiaryButton } from '../../controls/TertiaryButton';
 var NoFilteredData = function (props) {
     var _a;
-    return React.createElement(Message, { margin: props.margin }, (_a = props.children) !== null && _a !== void 0 ? _a : "No records found. Your query may be too restrictive.",
+    return React.createElement(Message, { margin: props.margin, style: props.style }, (_a = props.children) !== null && _a !== void 0 ? _a : "No records found. Your query may be too restrictive.",
         props.onClear && React.createElement(TertiaryButton, { onClick: props.onClear }, "CLEAR FILTER"));
 };
 NoFilteredData.displayName = "Message.NoFilteredData";

package/containers/Openable/Openable.d.ts

@@ -22,6 +22,11 @@ interface IOpenableProps extends ITestable {
      * Fired when Openable must close.
      */
     onClose: () => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 declare const Openable: {
     ({ width, ...props }: IOpenableProps): React.JSX.Element;

package/containers/Openable/Openable.js

@@ -30,18 +30,18 @@ import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { useOutsideClose } from '../../hooks/useOutsideClose';
 var Openable = function (_a) {
-    var _b;
-    var _c = _a.width, width = _c === void 0 ? 250 : _c, props = __rest(_a, ["width"]);
+    var _b, _c, _d;
+    var _e = _a.width, width = _e === void 0 ? 250 : _e, props = __rest(_a, ["width"]);
     var toggleRef = React.useRef(null);
     var paneRef = React.useRef(null);
     useOutsideClose({
-        open: props.open,
+        open: (_b = props.open) !== null && _b !== void 0 ? _b : false,
         refs: [toggleRef, paneRef],
         onClose: props.onClose,
         escapeToClose: true,
         blurToClose: false
     });
-    var _d = usePopper(toggleRef.current, paneRef.current, {
+    var _f = usePopper(toggleRef.current, paneRef.current, {
         placement: 'bottom-end',
         modifiers: [
             {
@@ -51,15 +51,15 @@ var Openable = function (_a) {
                 },
             }
         ]
-    }), styles = _d.styles, attributes = _d.attributes, update = _d.update;
+    }), styles = _f.styles, attributes = _f.attributes, update = _f.update;
     React.useEffect(function () {
         update === null || update === void 0 ? void 0 : update();
     }, [props.open]);
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "Openable", ref: toggleRef },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Openable", style: props.style, ref: toggleRef },
         props.toggle,
-        createPortal(React.createElement(Pane, __assign({ "data-testid": "Openable.Pane", "$open": props.open, "$width": width, style: styles.popper }, attributes.popper, { ref: paneRef }), props.open && props.content), // If in fullscreen mode, Openable must portal into fullscreen element,
+        createPortal(React.createElement(Pane, __assign({ "data-testid": "Openable.Pane", "$open": (_c = props.open) !== null && _c !== void 0 ? _c : false, "$width": width, style: styles.popper }, attributes.popper, { ref: paneRef }), props.open && props.content), // If in fullscreen mode, Openable must portal into fullscreen element,
         // else content will be hidden.
-        (_b = document.fullscreenElement) !== null && _b !== void 0 ? _b : document.body)));
+        (_d = document.fullscreenElement) !== null && _d !== void 0 ? _d : document.body)));
 };
 var Pane = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  width: ", "px;\n  z-index: 4000;\n"], ["\n  display: ", ";\n  width: ", "px;\n  z-index: 4000;\n"])), function (p) { return p.$open ? 'block' : 'none'; }, function (p) { return p.$width; });
 Openable.displayName = "Openable";

package/containers/PublicRoute/PublicRoute.d.ts

@@ -7,6 +7,14 @@ interface IProps extends ITestable {
     children?: React.ReactNode;
     logoUrl: string;
     help?: React.ReactNode;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
-declare const PublicRoute: (props: IProps) => React.JSX.Element;
+declare const PublicRoute: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { PublicRoute };

package/containers/PublicRoute/PublicRoute.js

@@ -22,15 +22,10 @@ import { SVG } from '../../svg';
 import { ParticleGlobe } from '../../modules/ParticleGlobe/ParticleGlobe';
 var PublicRouteBase = function (props) {
     var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "PublicRoute", className: props.className },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "PublicRoute", className: props.className, style: props.style },
         React.createElement(ParticleGlobe, { landmass: 'day', globe: true, glow: 20, trails: 5, pointSize: 1.0, numParticles: 100000, brightness: 0.9, speedFactor: 750, minLifetime: 1000, maxLifetime: 1000, responsive: true }),
         React.createElement(Content, null,
-            React.createElement(Help, { active: showHelp },
-                "Help content",
-                React.createElement("br", null),
-                "Help content",
-                React.createElement("br", null),
-                "Help content"),
+            React.createElement(Help, { active: showHelp }, props.help),
             React.createElement(InfoBox, { width: 400, padded: true, header: React.createElement(Header, null,
                     React.createElement(Logo, null,
                         React.createElement("use", { xlinkHref: props.logoUrl })),
@@ -41,5 +36,6 @@ var Header = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateOb
 var Content = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  width: 400px;\n  max-width: 90vw;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n"], ["\n  position: absolute;\n  width: 400px;\n  max-width: 90vw;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n"])));
 var PublicRouteStyled = styled(PublicRouteBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position:    absolute;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  overflow:    hidden;  \n  background:  conic-gradient(from 0deg at 0 0, #071119 0deg, #071119 90deg, #243961 180deg, #243961 -1deg);\n  background-blend-mode: multiply;  \n"], ["\n  position:    absolute;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  overflow:    hidden;  \n  background:  conic-gradient(from 0deg at 0 0, #071119 0deg, #071119 90deg, #243961 180deg, #243961 -1deg);\n  background-blend-mode: multiply;  \n"])));
 var PublicRoute = function (props) { return React.createElement(PublicRouteStyled, __assign({}, props)); };
+PublicRoute.displayName = "PublicRoute";
 export { PublicRoute };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/containers/Tabs/Pane.d.ts

@@ -18,6 +18,11 @@ interface IPaneProps extends ITestable {
      * @default 0
      */
     padding?: number;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * Label and ontent for a single tab pane. The `label` can be JSX.

package/containers/Tabs/Pane.js

@@ -22,9 +22,9 @@ var PaneBase = function (props) {
     // By default, all children are rendered (but hidden when
     // not active). With nohiddenrender enabled, only the active
     // tab is rendered.
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "Tabs.Pane", className: props.className }, shouldRender() ? props.children : null));
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Tabs.Pane", className: props.className, style: props.style }, shouldRender() ? props.children : null));
 };
-var PaneStyled = styled(PaneBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  display: ", ";\n  height: 100%;\n  padding-top: ", "px;\n  font: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  display: ", ";\n  height: 100%;\n  padding-top: ", "px;\n  font: ", ";\n"
+var PaneStyled = styled(PaneBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: ", ";\n  flex-direction: column;\n  height: 100%;\n  padding-top: ", "px;\n  font: ", ";\n"], ["\n  position: relative;\n  display: ", ";\n  flex-direction: column;\n  height: 100%;\n  padding-top: ", "px;\n  font: ", ";\n"
     /**
      * Label and ontent for a single tab pane. The `label` can be JSX.
      *
@@ -32,7 +32,7 @@ var PaneStyled = styled(PaneBase)(templateObject_1 || (templateObject_1 = __make
      * accommodate maps or images that must be rendered right against the tab bar
      * itself. The `padding` prop can be used to add some top padding.
      */
-])), function (p) { return !p.active ? 'none' : ''; }, function (p) { var _a; return (_a = p.padding) !== null && _a !== void 0 ? _a : 0; }, function (p) { return p.theme.font.bodyMedium; });
+])), function (p) { return p.active ? 'flex' : 'none'; }, function (p) { var _a; return (_a = p.padding) !== null && _a !== void 0 ? _a : 0; }, function (p) { return p.theme.font.bodyMedium; });
 /**
  * Label and ontent for a single tab pane. The `label` can be JSX.
  *

package/containers/Tabs/Tabs.d.ts

@@ -23,6 +23,11 @@ interface ITabsProps extends ITestable {
      * Event triggered when active tab changes. `idx` is the index of the new active tab.
      */
     onChange?: (idx: number) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * Collection of tabs.

package/containers/Tabs/Tabs.js

@@ -31,8 +31,8 @@ var TabsBase = function (props) {
             setIndex(props.active);
     }, [props.active]);
     var tabClicked = function (idx) {
-        // Only interesting if active tab changes.
-        if (idx != index)
+        // Only interesting if active tab changes (ignore clicks on the active tab).
+        if (idx == index)
             return;
         setIndex(idx);
         if (props.onChange) {
@@ -65,7 +65,7 @@ var TabsBase = function (props) {
             });
         });
     };
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "Tabs", className: props.className },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Tabs", className: props.className, style: props.style },
         React.createElement(TabBar, { active: index, onChange: tabClicked, tabWidth: props.tabWidth }, getTabs()),
         React.createElement(Panes, null, getPanes())));
 };

package/controls/Chip/Chip.d.ts

@@ -14,9 +14,21 @@ interface IChipProps extends ITestable {
     disabled?: boolean;
     /**
      * Triggered when the X button on the `Chip` is clicked, or when
-     * Delete/Backspace is pressed while the `Chip` has focus.
+     * Delete/Backspace is pressed while the `Chip` has focus. The originating
+     * mouse or keyboard event is always passed; handlers that don't need it can
+     * omit the parameter.
      */
-    onClick: (e?: React.MouseEvent | React.KeyboardEvent) => void;
+    onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Accessible label for the remove button.
+     * @default "Remove chip"
+     */
+    removeLabel?: string;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A compact element representing a user input, selection, or filter that can be removed.
@@ -60,7 +72,7 @@ interface IChipProps extends ITestable {
  * No additional margin styling is needed when placing chips side by side.
  */
 declare const Chip: {
-    ({ disabled, ...props }: IChipProps): React.JSX.Element;
+    ({ disabled, removeLabel, ...props }: IChipProps): React.JSX.Element;
     displayName: string;
 };
 export { Chip };

package/controls/Chip/Chip.js

@@ -34,17 +34,18 @@ var ChipBase = function (props) {
             return;
         // Pressing Delete or Backspace fires the onClick event.
         if (e.key === 'Delete' || e.key === 'Backspace') {
+            e.preventDefault();
             e.stopPropagation();
             props.onClick(e);
         }
     };
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "Chip", className: props.className, tabIndex: 0, onKeyDown: handleKeyDown, "aria-disabled": props.disabled },
-        React.createElement("span", { className: "inner", tabIndex: -1 }, props.children),
-        React.createElement("button", { type: "button", onClick: props.onClick, "aria-label": "Remove chip", disabled: props.disabled, "aria-disabled": props.disabled },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Chip", className: props.className, style: props.style, tabIndex: 0, onKeyDown: handleKeyDown, "aria-disabled": props.disabled },
+        React.createElement("span", { className: "inner" }, props.children),
+        React.createElement("button", { type: "button", tabIndex: -1, onClick: props.onClick, "aria-label": props.removeLabel, disabled: props.disabled, "aria-disabled": props.disabled },
             React.createElement("svg", null,
                 React.createElement("use", { xlinkHref: SVG.Icons.Cross })))));
 };
-var ChipStyled = styled(ChipBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  & > button {\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"], ["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  & > button {\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"
+var ChipStyled = styled(ChipBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"], ["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"
     /**
      * A compact element representing a user input, selection, or filter that can be removed.
      *
@@ -129,8 +130,8 @@ var ChipStyled = styled(ChipBase)(templateObject_2 || (templateObject_2 = __make
  * No additional margin styling is needed when placing chips side by side.
  */
 var Chip = function (_a) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, props = __rest(_a, ["disabled"]);
-    return React.createElement(ChipStyled, __assign({ disabled: disabled }, props));
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.removeLabel, removeLabel = _c === void 0 ? "Remove chip" : _c, props = __rest(_a, ["disabled", "removeLabel"]);
+    return React.createElement(ChipStyled, __assign({ disabled: disabled, removeLabel: removeLabel }, props));
 };
 Chip.displayName = "Chip";
 export { Chip };

package/controls/CircularProgress/CircularProgress.d.ts

@@ -10,6 +10,7 @@ interface ICircularProgressProps extends ITestable {
     value: number;
     /**
      * Color of the progress arc.
+     * @default theme primary
      */
     color?: string;
     /**
@@ -22,6 +23,16 @@ interface ICircularProgressProps extends ITestable {
      * @default 2
      */
     strokeWidth?: number;
+    /**
+     * Optional accessible label describing what is progressing. Announced by
+     * screen readers alongside the percentage value.
+     */
+    label?: string;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A circular progress indicator that displays a percentage value as an arc.

package/controls/CircularProgress/CircularProgress.js

@@ -26,22 +26,30 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled from 'styled-components';
+// Default prop values, referenced both by the CircularProgressBase fallbacks
+// and the CircularProgress wrapper below.
+var DEFAULT_SIZE = 100;
+var DEFAULT_STROKE_WIDTH = 2;
+/** Text label displayed at the center of the circle. */
+var Text = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  font: ", ";\n"], ["\n  position: relative;\n  z-index: 1;\n  font: ", ";\n"])), function (p) { return p.theme.font.labelSmall; });
 var CircularProgressBase = function (props) {
-    // Clamp progress value between 0 and 100:
-    var value = Math.min(Math.max(props.value, 0), 100);
-    var radius = (props.size - props.strokeWidth) / 2;
+    var _a, _b;
+    var size = (_a = props.size) !== null && _a !== void 0 ? _a : DEFAULT_SIZE;
+    var strokeWidth = (_b = props.strokeWidth) !== null && _b !== void 0 ? _b : DEFAULT_STROKE_WIDTH;
+    // Clamp progress value between 0 and 100 (guarding against non-finite input):
+    var raw = Number.isFinite(props.value) ? props.value : 0;
+    var value = Math.min(Math.max(raw, 0), 100);
+    var radius = (size - strokeWidth) / 2;
     var circumference = 2 * Math.PI * radius;
     var offset = circumference * (1 - value / 100);
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "CircularProgress", className: props.className, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 },
-        React.createElement("svg", { width: props.size, height: props.size },
-            React.createElement("circle", { cx: props.size / 2, cy: props.size / 2, r: radius, fill: "none", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", transform: "rotate(-90 ".concat(props.size / 2, " ").concat(props.size / 2, ")") })),
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "CircularProgress", className: props.className, style: props.style, role: "progressbar", "aria-label": props.label, "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100 },
+        React.createElement("svg", { width: size, height: size },
+            React.createElement("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", transform: "rotate(-90 ".concat(size / 2, " ").concat(size / 2, ")") })),
         React.createElement(Text, null,
             Math.round(value),
             "%")));
 };
-/** Text label displayed at the center of the circle. */
-var Text = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  font: ", ";\n"], ["\n  position: relative;\n  z-index: 1;\n  font: ", ";\n"])), function (p) { return p.theme.font.labelSmall; });
-var CircularProgressStyled = styled(CircularProgressBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    position: absolute;\n    inset: 0;\n    stroke: ", ";\n    stroke-width: ", ";\n  }\n"], ["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    position: absolute;\n    inset: 0;\n    stroke: ", ";\n    stroke-width: ", ";\n  }\n"
+var CircularProgressStyled = styled(CircularProgressBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    position: absolute;\n    inset: 0;\n    stroke: ", ";\n    stroke-width: ", ";\n  }\n  svg circle {\n    transition: stroke-dashoffset ", "ms ease;\n  }\n"], ["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    position: absolute;\n    inset: 0;\n    stroke: ", ";\n    stroke-width: ", ";\n  }\n  svg circle {\n    transition: stroke-dashoffset ", "ms ease;\n  }\n"
     /**
      * A circular progress indicator that displays a percentage value as an arc.
      *
@@ -77,7 +85,7 @@ var CircularProgressStyled = styled(CircularProgressBase)(templateObject_2 || (t
      * | `strokeWidth` | `2` | Arc thickness in pixels |
      * | `color` | theme primary | Arc color (CSS color value) |
      */
-])), function (p) { return p.size; }, function (p) { return p.size; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; }, function (p) { return p.strokeWidth; });
+])), function (p) { return p.size; }, function (p) { return p.size; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; }, function (p) { return p.strokeWidth; }, function (p) { return p.theme.animation.duration; });
 /**
  * A circular progress indicator that displays a percentage value as an arc.
  *
@@ -114,7 +122,7 @@ var CircularProgressStyled = styled(CircularProgressBase)(templateObject_2 || (t
  * | `color` | theme primary | Arc color (CSS color value) |
  */
 var CircularProgress = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 100 : _b, _c = _a.strokeWidth, strokeWidth = _c === void 0 ? 2 : _c, props = __rest(_a, ["size", "strokeWidth"]);
+    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.strokeWidth, strokeWidth = _c === void 0 ? DEFAULT_STROKE_WIDTH : _c, props = __rest(_a, ["size", "strokeWidth"]);
     return React.createElement(CircularProgressStyled, __assign({ size: size, strokeWidth: strokeWidth }, props));
 };
 CircularProgress.displayName = "CircularProgress";

package/controls/Dropzone/Dropzone.d.ts

@@ -22,6 +22,16 @@ interface IDropzoneProps extends ITestable {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Accessible label for the dropzone, read by screen readers.
+     * @default "File upload dropzone"
+     */
+    ariaLabel?: string;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A file upload area that accepts files via drag-and-drop or click-to-select.
@@ -65,7 +75,7 @@ interface IDropzoneProps extends ITestable {
  * - Decorative SVG is hidden from assistive technology
  */
 declare const Dropzone: {
-    ({ disabled, ...props }: IDropzoneProps): React.JSX.Element;
+    ({ disabled, ariaLabel, ...props }: IDropzoneProps): React.JSX.Element;
     displayName: string;
 };
 export { Dropzone };

package/controls/Dropzone/Dropzone.js

@@ -32,33 +32,44 @@ var DropzoneBase = function (props) {
     var _b = React.useState(false), hover = _b[0], setHover = _b[1];
     var inputElement = React.useRef(null);
     var handleClick = function () {
-        inputElement.current.click();
+        var _a;
+        (_a = inputElement.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     var handleAddFile = function (e) {
+        if (!e.target.files)
+            return;
         props.onAddFiles(Array.from(e.target.files));
+        // Reset the input so selecting the same file again still fires onChange.
+        e.target.value = '';
     };
     // DragOver and DragLeave add a hover effect.
     var handleDragOver = function (e) {
+        if (props.disabled)
+            return;
         // Limit event to files only:
         if (!e.dataTransfer.types.includes("Files"))
             return;
         setHover(true);
         e.preventDefault();
     };
-    var handleDragLeave = function (e) {
+    var handleDragLeave = function () {
         setHover(false);
     };
     var handleDrop = function (e) {
+        if (props.disabled)
+            return;
         e.preventDefault();
         setHover(false);
-        props.onAddFiles(Array.from(e.dataTransfer.files));
+        var files = Array.from(e.dataTransfer.files);
+        if (files.length)
+            props.onAddFiles(files);
     };
-    return (React.createElement("button", { "data-testid": props['data-testid'] || "Dropzone", type: "button", className: "".concat(props.className, " ").concat(hover ? 'hover' : ''), onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onKeyDown: function (e) {
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "Dropzone", type: "button", className: "".concat(props.className, " ").concat(hover ? 'hover' : ''), style: props.style, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onKeyDown: function (e) {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
                 handleClick();
             }
-        }, disabled: props.disabled, "aria-label": "File upload dropzone" },
+        }, disabled: props.disabled, "aria-label": props.ariaLabel },
         React.createElement("div", { className: "message" }, (_a = props.message) !== null && _a !== void 0 ? _a : "Drop a file here to upload, or click to select."),
         React.createElement("svg", { "aria-hidden": "true", focusable: "false" },
             React.createElement("use", { xlinkHref: SVG.Other.CloudUpload })),
@@ -149,8 +160,8 @@ var DropzoneStyled = styled(DropzoneBase)(templateObject_2 || (templateObject_2
  * - Decorative SVG is hidden from assistive technology
  */
 var Dropzone = function (_a) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, props = __rest(_a, ["disabled"]);
-    return React.createElement(DropzoneStyled, __assign({ disabled: disabled }, props));
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? "File upload dropzone" : _c, props = __rest(_a, ["disabled", "ariaLabel"]);
+    return React.createElement(DropzoneStyled, __assign({ disabled: disabled, ariaLabel: ariaLabel }, props));
 };
 // For React DevTools:
 Dropzone.displayName = "Dropzone";

package/controls/Fab/Fab.d.ts

@@ -41,8 +41,10 @@ interface IFabProps extends ITestable {
      */
     color?: string;
     /**
-     * A button in an `active` state is shown as depressed. This will override
-     * any color settings.
+     * Marks the button as a toggle and sets its pressed state. When provided,
+     * the button is shown as depressed (overriding any color settings) and
+     * exposes `aria-pressed` to assistive technology. Omit it entirely for
+     * plain (non-toggle) action buttons.
      * @default false
      */
     active?: boolean;
@@ -53,10 +55,16 @@ interface IFabProps extends ITestable {
      */
     nofocus?: boolean;
     /**
-     * Fired when the button is clicked. The synthetic React click event
-     * is passed along so that callers may stop event propagation.
+     * Fired when the button is clicked. The synthetic React click event is passed
+     * along so callers may inspect it or stop propagation. Handlers that don't
+     * need the event can simply omit the parameter.
      */
-    onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A floating action button (FAB) for primary or prominent actions.
@@ -102,7 +110,7 @@ interface IFabProps extends ITestable {
  * | `nofocus` | Returns focus to previous element after click |
  */
 declare const Fab: {
-    ({ disabled, positive, negative, active, nofocus, ...props }: IFabProps): React.JSX.Element;
+    ({ disabled, positive, negative, nofocus, ...props }: IFabProps): React.JSX.Element;
     displayName: string;
 };
 export { Fab };

package/controls/Fab/Fab.js

@@ -28,24 +28,11 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from '../Icon';
 var FabBase = function (props) {
-    var previousFocusedElement = React.useRef(null);
-    var handleMouseDown = function () {
-        // Store the element that was focused before the button was clicked
-        previousFocusedElement.current = document.activeElement;
-    };
-    var handleClick = function (e) {
-        var _a;
-        // If "nofocus", restore focus to previously focused element after the
-        // button was clicked.
-        if (props.nofocus) {
-            if (previousFocusedElement.current instanceof HTMLElement) {
-                previousFocusedElement.current.focus();
-            }
-        }
-        // Call user's click handler if provided:
-        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    };
-    return (React.createElement("button", { "data-testid": props['data-testid'] || "Fab", type: "button", className: props.className, onClick: handleClick, onMouseDown: handleMouseDown, title: props.title, disabled: props.disabled, "aria-disabled": props.disabled },
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "Fab", type: "button", className: props.className, style: props.style, onClick: props.onClick, 
+        // When "nofocus", prevent the button from taking focus on click so focus
+        // stays on the previously focused element (deliberate keyboard focus is
+        // unaffected).
+        onMouseDown: props.nofocus ? (function (e) { return e.preventDefault(); }) : undefined, title: props.title, disabled: props.disabled, "aria-disabled": props.disabled, "aria-pressed": props.active, "aria-label": !props.children ? props.title : undefined },
         React.createElement(Icon, __assign({}, (typeof props.icon === 'string' ? { url: props.icon } : props.icon))),
         props.children));
 };
@@ -153,8 +140,8 @@ var FabStyled = styled(FabBase).attrs(function (p) {
  * | `nofocus` | Returns focus to previous element after click |
  */
 var Fab = function (_a) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.positive, positive = _c === void 0 ? false : _c, _d = _a.negative, negative = _d === void 0 ? false : _d, _e = _a.active, active = _e === void 0 ? false : _e, _f = _a.nofocus, nofocus = _f === void 0 ? false : _f, props = __rest(_a, ["disabled", "positive", "negative", "active", "nofocus"]);
-    return React.createElement(FabStyled, __assign({ disabled: disabled, positive: positive, negative: negative, active: active, nofocus: nofocus }, props));
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.positive, positive = _c === void 0 ? false : _c, _d = _a.negative, negative = _d === void 0 ? false : _d, _e = _a.nofocus, nofocus = _e === void 0 ? false : _e, props = __rest(_a, ["disabled", "positive", "negative", "nofocus"]);
+    return React.createElement(FabStyled, __assign({ disabled: disabled, positive: positive, negative: negative, nofocus: nofocus }, props));
 };
 Fab.displayName = "Fab";
 export { Fab };