@longline/aqua-ui 1.0.183 → 1.0.186

package/controls/Mouse/Mouse.js

@@ -27,7 +27,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var MouseBase = function (props) {
-    return (React.createElement("svg", { className: props.className, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg" },
+    return (React.createElement("svg", { className: props.className, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" // Hide from assistive tech (for non-interactive icons)
+        , focusable: "false" },
         React.createElement("path", { d: "M14 1.75623C8.69307 1.75623 4.375 6.07429 4.375 11.3812V18.3812C4.375 23.6882 8.69307 28.0062 14 28.0062C19.3069 28.0062 23.625 23.6882 23.625 18.3812V11.3812C23.625 6.07429 19.3069 1.75623 14 1.75623ZM21.875 11.3812V12.2562H16.625V10.5062C16.625 9.36653 15.8911 8.40403 14.875 8.04199V3.55756C18.806 3.99506 21.875 7.33546 21.875 11.3812ZM14 9.63123C14.4834 9.63123 14.875 10.0239 14.875 10.5062V13.1312C14.875 13.6136 14.4834 14.0062 14 14.0062C13.5166 14.0062 13.125 13.6136 13.125 13.1312V10.5062C13.125 10.0239 13.5166 9.63123 14 9.63123ZM6.125 11.3812C6.125 7.33546 9.19403 3.99389 13.125 3.55779V8.04223C12.1089 8.40427 11.375 9.36677 11.375 10.5065V12.2565H6.125V11.3812ZM14 26.2562C9.65767 26.2562 6.125 22.7236 6.125 18.3812V14.0062H11.5358C11.8978 15.0223 12.8603 15.7562 14 15.7562C15.1397 15.7562 16.1022 15.0223 16.4642 14.0062H21.875V18.3812C21.875 22.7236 18.3423 26.2562 14 26.2562Z", fill: props.color }),
         props.left && React.createElement("path", { className: "left", d: "M13.125 3.55798C9.19403 3.99408 6.125 7.33565 6.125 11.3814V12.2567H11.375V10.5067C11.375 9.36696 12.1089 8.40446 13.125 8.04242V3.55798Z" }),
         props.right && React.createElement("path", { className: "right", d: "M21.875 12.2562V11.3812C21.875 7.33539 18.806 3.995 14.875 3.5575V8.04193C15.8911 8.40397 16.625 9.36647 16.625 10.5062V12.2562H21.875Z" }),
@@ -35,17 +36,30 @@ var MouseBase = function (props) {
 };
 var MouseStyled = styled(MouseBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  max-height: 100px;\n  fill: ", ";\n  .left  { fill: ", "; }\n  .right { fill: ", "; }\n  .wheel { fill: ", "; }\n"], ["\n  ", "\n  max-height: 100px;\n  fill: ", ";\n  .left  { fill: ", "; }\n  .right { fill: ", "; }\n  .wheel { fill: ", "; }\n"
     /**
-     * `Mouse` renders an SVG with a mouse image, optionally with its
-     * `left`, `right` or `wheel` buttons pressed.
+     * `Mouse` Renders an SVG mouse shape with optional highlighting of the
+     * left, right, and wheel buttons.
+     *
+     * - `left`, `right`, `wheel`: Whether each button appears "pressed"
+     * - `color`: Main mouse fill color (defaults to theme neutral color)
+     * - `accent`: Fill color of the wheel (defaults to primary theme color)
+     * - `size`: Scales the mouse height in pixels
      */
 ])), function (p) { return p.size && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", "px;\n  "], ["\n    height: ", "px;\n  "])), p.size); }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.accent) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
 /**
- * `Mouse` renders an SVG with a mouse image, optionally with its
- * `left`, `right` or `wheel` buttons pressed.
+ * `Mouse` Renders an SVG mouse shape with optional highlighting of the
+ * left, right, and wheel buttons.
+ *
+ * - `left`, `right`, `wheel`: Whether each button appears "pressed"
+ * - `color`: Main mouse fill color (defaults to theme neutral color)
+ * - `accent`: Fill color of the wheel (defaults to primary theme color)
+ * - `size`: Scales the mouse height in pixels
  */
-var Mouse = function (_a) {
+var Mouse = React.memo(function (_a) {
     var _b = _a.left, left = _b === void 0 ? false : _b, _c = _a.right, right = _c === void 0 ? false : _c, _d = _a.wheel, wheel = _d === void 0 ? false : _d, props = __rest(_a, ["left", "right", "wheel"]);
+    // Component is pure and based solely on props. Wrapping it with React.memo 
+    // helps avoid unnecessary re-renders:
     return React.createElement(MouseStyled, __assign({ left: left, right: right, wheel: wheel }, props));
-};
+});
+Mouse.displayName = "Mouse";
 export { Mouse };
 var templateObject_1, templateObject_2;

package/controls/PrimaryButton/PrimaryButton.d.ts

@@ -39,7 +39,8 @@ interface IProps {
      */
     icon?: string | IIconProps;
     /**
-     * Fired when the button is clicked.
+     * Fired when the button is clicked. The React MouseEvent is passed in,
+     * in case the calling code wants to stop event propagation.
      */
     onClick: (e?: React.MouseEvent) => void;
 }
@@ -55,5 +56,8 @@ interface IProps {
  * with `positive`, `negative` or `color`. The button can be in a `disabled`
  * state where it cannot be clicked.
  */
-declare const PrimaryButton: ({ disabled, positive, negative, ...props }: IProps) => React.JSX.Element;
+declare const PrimaryButton: {
+    ({ disabled, positive, negative, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { PrimaryButton, IProps };

package/controls/PrimaryButton/PrimaryButton.js

@@ -25,19 +25,23 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 import { darken } from '../../helper/darken';
 import { Icon } from '../Icon';
 var PrimaryButtonBase = function (props) {
-    var handleClick = function (e) {
-        if (props.disabled)
-            return;
-        if (props.onClick)
-            props.onClick(e);
+    var theme = useTheme();
+    var icon = function () {
+        // No icon?
+        if (!props.icon)
+            return null;
+        // If a string was provided, use it as the URL for the icon.
+        if (typeof props.icon === "string")
+            return React.createElement(Icon, { color: theme.colors.neutral[100], url: props.icon });
+        // An IIconProps was provided. Use it as the props for the icon.
+        return React.createElement(Icon, __assign({ color: theme.colors.neutral[100] }, props.icon));
     };
-    return (React.createElement("button", { tabIndex: props.disabled ? -1 : 0, className: props.className, onClick: handleClick, title: props.title },
-        props.icon && typeof props.icon == "string" && React.createElement(Icon, { url: props.icon }),
-        props.icon && typeof props.icon != "string" && React.createElement(Icon, __assign({}, props.icon)),
+    return (React.createElement("button", { className: props.className, type: "button", onClick: props.onClick, title: props.title, "aria-disabled": props.disabled, disabled: props.disabled },
+        icon(),
         props.children));
 };
 var PrimaryButtonStyled = styled(PrimaryButtonBase).attrs(function (p) {
@@ -80,5 +84,6 @@ var PrimaryButton = 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, props = __rest(_a, ["disabled", "positive", "negative"]);
     return React.createElement(PrimaryButtonStyled, __assign({ disabled: disabled, positive: positive, negative: negative }, props));
 };
+PrimaryButton.displayName = "PrimaryButton";
 export { PrimaryButton };
 var templateObject_1, templateObject_2;

package/controls/Progress/Progress.d.ts

@@ -3,21 +3,25 @@ interface IProps {
     /** @ignore */
     className?: string;
     /**
-     * Progress value (in range 0..100)
+     * Progress value to display, clamped between `0` and `100`.
+     * Determines how much of the bar is filled.
      */
     value: number;
     /**
-     * If set, a percentage number is shown on the Progress bar.
+     * If `true`, displays the numeric percentage value centered over the
+     * progress bar. Useful for accessible or visually informative UIs.
      * @default false
      */
     numbered?: boolean;
     /**
-     * A padded `Progress` has a margin around it (of 10px).
+     * If `true`, adds a 10px margin around the progress bar.
+     * Helpful when spacing is needed between multiple bars or surrounding content.
      * @default false
      */
     padded?: boolean;
     /**
-     * Set progress bar thickness in pixels. Defaults to 5.
+     * Thickness of the progress bar in pixels.
+     * Adjusts both the container height and corner radius.
      * @default 5
      */
     thickness?: number;
@@ -28,8 +32,20 @@ interface IProps {
     color?: string;
 }
 /**
- * The Progress component shows a progress bar, filled to a percentage equal to
- * value. The bar always stretches to fill all horizontal space available to it.
+ * A visual progress bar component that shows completion of a task, range, or
+ * metric.
+ *
+ * - Automatically clamps `value` between `0` and `100`.
+ * - Fully responsive and stretches to available width.
+ * - Animated bar fill when `value` changes.
+ * - Optionally displays percentage value text.
+ *
+ * The bar always stretches to fill all horizontal space available to it.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={45} numbered color="#00c2a8" thickness={8} />
+ * ```
  */
 declare const Progress: ({ thickness, numbered, padded, ...props }: IProps) => React.JSX.Element;
 export { Progress, IProps };

package/controls/Progress/Progress.js

@@ -26,20 +26,51 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled, { css } from 'styled-components';
+/**
+ * Input value may be less than 0 or more than 100.
+ * Clamp it.
+ */
+var getClampedValue = function (value) {
+    return Math.round(Math.min(100, Math.max(0, value)));
+};
 var ProgressBase = function (props) {
-    return React.createElement("div", { className: props.className });
+    return React.createElement("div", { className: props.className, role: "progressbar", "area-valuenow": getClampedValue(props.value), "area-valuemin": 0, "area-valuemax": 100 });
 };
 var ProgressStyled = styled(ProgressBase).attrs(function (p) { return ({
-    percentageStr: Math.round(Math.min(100, Math.max(0, p.value))).toString() + '%'
+    percentageStr: getClampedValue(p.value).toString() + '%'
 }); })(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  position: relative; \n  box-sizing: border-box;\n  height: ", "px;\n  min-width: 100px;\n  margin: 4px 0 4px 0;\n\n  ", "\n  background-color: ", ";\n  border-radius: ", "px;\n  \n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: ", ";\n    height: 100%;\n    box-sizing: border-box;\n    transition: width ", "ms ease;\n    background-color: ", ";\n    border-radius: ", "px;\n  }\n\n  ", "\n"], [" \n  position: relative; \n  box-sizing: border-box;\n  height: ", "px;\n  min-width: 100px;\n  margin: 4px 0 4px 0;\n\n  ", "\n  background-color: ", ";\n  border-radius: ", "px;\n  \n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: ", ";\n    height: 100%;\n    box-sizing: border-box;\n    transition: width ", "ms ease;\n    background-color: ", ";\n    border-radius: ", "px;\n  }\n\n  ", "\n"
     /**
-     * The Progress component shows a progress bar, filled to a percentage equal to
-     * value. The bar always stretches to fill all horizontal space available to it.
+     * A visual progress bar component that shows completion of a task, range, or
+     * metric.
+     *
+     * - Automatically clamps `value` between `0` and `100`.
+     * - Fully responsive and stretches to available width.
+     * - Animated bar fill when `value` changes.
+     * - Optionally displays percentage value text.
+     *
+     * The bar always stretches to fill all horizontal space available to it.
+     *
+     * @example
+     * ```tsx
+     * <Progress value={45} numbered color="#00c2a8" thickness={8} />
+     * ```
      */
-])), function (p) { return p.thickness; }, function (p) { return p.padded && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["margin: 10px;"], ["margin: 10px;"]))); }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.thickness / 2; }, function (p) { return p.value + '%'; }, function (p) { return p.theme.animation.duration * 2; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; }, function (p) { return p.thickness / 2; }, function (p) { return p.numbered && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    &:after {\n      content: '", "';\n      position: absolute;\n      top: 50%;\n      right: 50%;\n      font-size: 8px;\n      line-height: 0;\n      color: ", ";\n      text-shadow: 0px 0px 4px #000;\n    }\n  "], ["\n    &:after {\n      content: '", "';\n      position: absolute;\n      top: 50%;\n      right: 50%;\n      font-size: 8px;\n      line-height: 0;\n      color: ", ";\n      text-shadow: 0px 0px 4px #000;\n    }\n  "])), p.percentageStr, function (p) { return p.theme.colors.neutral[100]; }); });
+])), function (p) { return p.thickness; }, function (p) { return p.padded && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["margin: 10px;"], ["margin: 10px;"]))); }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.thickness / 2; }, function (p) { return "".concat(p.value, "%"); }, function (p) { return p.theme.animation.duration * 2; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; }, function (p) { return p.thickness / 2; }, function (p) { return p.numbered && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    &:after {\n      content: '", "';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      font-size: 8px;\n      line-height: 0;\n      color: ", ";\n      text-shadow: 0px 0px 4px #000;\n    }\n  "], ["\n    &:after {\n      content: '", "';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      font-size: 8px;\n      line-height: 0;\n      color: ", ";\n      text-shadow: 0px 0px 4px #000;\n    }\n  "])), p.percentageStr, function (p) { return p.theme.colors.neutral[100]; }); });
 /**
- * The Progress component shows a progress bar, filled to a percentage equal to
- * value. The bar always stretches to fill all horizontal space available to it.
+ * A visual progress bar component that shows completion of a task, range, or
+ * metric.
+ *
+ * - Automatically clamps `value` between `0` and `100`.
+ * - Fully responsive and stretches to available width.
+ * - Animated bar fill when `value` changes.
+ * - Optionally displays percentage value text.
+ *
+ * The bar always stretches to fill all horizontal space available to it.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={45} numbered color="#00c2a8" thickness={8} />
+ * ```
  */
 var Progress = function (_a) {
     var _b = _a.thickness, thickness = _b === void 0 ? 5 : _b, _c = _a.numbered, numbered = _c === void 0 ? false : _c, _d = _a.padded, padded = _d === void 0 ? false : _d, props = __rest(_a, ["thickness", "numbered", "padded"]);

package/controls/SecondaryButton/SecondaryButton.d.ts

@@ -33,22 +33,29 @@ interface IProps {
     color?: string;
     /**
      * Optional browser tooltip to show when the button is hovered. This may
-     * be relevant since this type of button has no text.
+     * be relevant since this type of button has no text. This is also used
+     * as an aria-label, so it is mandatory (since the button has no icon).
      */
-    title?: string;
+    title: string;
     /**
-     * Fired when the button is clicked.
+     * Fired when the button is clicked. The synthetic React click event
+     * is passed along so that callers may stop event propagation.
      */
     onClick: (e?: React.MouseEvent) => void;
 }
 /**
  * The `SecondaryButton` is a small button that holds only an icon. It has no
- * other content. It renders as a `<button>` element.
+ * other content. It renders as a `<button>` element. Although the button
+ * shows only an icon, its `title` attribute is mandatory, and used as
+ * a `aria-label`, so screenreaders can understand the button's purpose.
  *
  * The color of the button defaults to a neutral theme color, unless overridden
  * with `positive`, `negative` or `color`.
  *
  * A `disabled` button cannot be clicked at all.
  */
-declare const SecondaryButton: ({ disabled, positive, negative, ...props }: IProps) => React.JSX.Element;
+declare const SecondaryButton: {
+    ({ disabled, positive, negative, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { SecondaryButton, IProps };

package/controls/SecondaryButton/SecondaryButton.js

@@ -25,41 +25,50 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 import { Icon } from '../Icon';
 var SecondaryButtonBase = function (props) {
-    var handleClick = function (e) {
-        if (props.disabled)
-            return;
-        if (props.onClick)
-            props.onClick(e);
-    };
-    return (React.createElement("button", { tabIndex: props.disabled ? -1 : 0, className: props.className, onClick: handleClick, title: props.title },
-        typeof props.icon == "string" && React.createElement(Icon, { url: props.icon }),
-        typeof props.icon != "string" && React.createElement(Icon, __assign({}, props.icon))));
+    var theme = useTheme();
+    return (React.createElement("button", { type: "button", className: props.className, disabled: props.disabled, onClick: props.onClick, title: props.title, "aria-label": props.title },
+        React.createElement(Icon, __assign({ color: theme.colors.neutral[100] }, (typeof props.icon === 'string' ? { url: props.icon } : props.icon)))));
+};
+// 
+// Determine button background color.
+// 
+var getBackgroundColor = function (props) {
+    var disabled = props.disabled, positive = props.positive, negative = props.negative, color = props.color, theme = props.theme;
+    if (disabled)
+        return theme.colors.neutral[50];
+    if (positive)
+        return theme.colors.positive;
+    if (negative)
+        return theme.colors.negative;
+    if (color)
+        return color;
+    return theme.colors.neutral[10];
 };
 var SecondaryButtonStyled = styled(SecondaryButtonBase).attrs(function (p) {
     return {
-        backgroundColor: p.disabled ? p.theme.colors.neutral[50]
-            : p.positive ? p.theme.colors.positive
-                : p.negative ? p.theme.colors.negative
-                    : p.color ? p.color
-                        : p.theme.colors.neutral[10]
+        $backgroundColor: getBackgroundColor(p)
     };
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  // Size:\n  height: 32px;\n  width: 32px;\n\n  // Presentation:\n  background-color: ", ";\n  // (Note that there is no hover state.)\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Button changes background & inset dropshadow when pressed:\n  &:active {\n    // Button background stays the same in case of color buttons:\n    ", "\n    box-shadow: none;\n  }\n\n  svg {\n    width: 13px;\n    height: 13px;\n  }  \n\n  ", "\n"], [" \n  // Size:\n  height: 32px;\n  width: 32px;\n\n  // Presentation:\n  background-color: ", ";\n  // (Note that there is no hover state.)\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Button changes background & inset dropshadow when pressed:\n  &:active {\n    // Button background stays the same in case of color buttons:\n    ", "\n    box-shadow: none;\n  }\n\n  svg {\n    width: 13px;\n    height: 13px;\n  }  \n\n  ", "\n"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  // Size:\n  height: 32px;\n  width: 32px;\n\n  // Presentation:\n  background-color: ", ";\n  // (Note that there is no hover state.)\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Button changes background & removes dropshadow when pressed:\n  &:active {\n    // Button background stays the same in case of color buttons:\n    ", "\n    box-shadow: none;\n  }\n\n  svg {\n    width: 13px;\n    height: 13px;\n  }  \n\n  ", "\n"], [" \n  // Size:\n  height: 32px;\n  width: 32px;\n\n  // Presentation:\n  background-color: ", ";\n  // (Note that there is no hover state.)\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Button changes background & removes dropshadow when pressed:\n  &:active {\n    // Button background stays the same in case of color buttons:\n    ", "\n    box-shadow: none;\n  }\n\n  svg {\n    width: 13px;\n    height: 13px;\n  }  \n\n  ", "\n"
     /**
      * The `SecondaryButton` is a small button that holds only an icon. It has no
-     * other content. It renders as a `<button>` element.
+     * other content. It renders as a `<button>` element. Although the button
+     * shows only an icon, its `title` attribute is mandatory, and used as
+     * a `aria-label`, so screenreaders can understand the button's purpose.
      *
      * The color of the button defaults to a neutral theme color, unless overridden
      * with `positive`, `negative` or `color`.
      *
      * A `disabled` button cannot be clicked at all.
      */
-])), function (p) { return p.backgroundColor; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.shadows.small; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return !p.positive && !p.negative && !p.color && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.neutral[10]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3]); });
+])), function (p) { return p.$backgroundColor; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.shadows.small; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return !p.positive && !p.negative && !p.color && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.neutral[10]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3]); });
 /**
  * The `SecondaryButton` is a small button that holds only an icon. It has no
- * other content. It renders as a `<button>` element.
+ * other content. It renders as a `<button>` element. Although the button
+ * shows only an icon, its `title` attribute is mandatory, and used as
+ * a `aria-label`, so screenreaders can understand the button's purpose.
  *
  * The color of the button defaults to a neutral theme color, unless overridden
  * with `positive`, `negative` or `color`.
@@ -70,5 +79,6 @@ var SecondaryButton = 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, props = __rest(_a, ["disabled", "positive", "negative"]);
     return React.createElement(SecondaryButtonStyled, __assign({ disabled: disabled, positive: positive, negative: negative }, props));
 };
+SecondaryButton.displayName = "SecondaryButton";
 export { SecondaryButton };
 var templateObject_1, templateObject_2, templateObject_3;

package/controls/TabBar/Tab.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var TabBase = React.forwardRef(function (props, ref) {
-    return React.createElement("div", { className: props.className, ref: ref, onClick: props.onClick }, props.children);
+    return React.createElement("div", { role: "tab", "aria-selected": props.active, className: props.className, ref: ref, onClick: props.onClick }, props.children);
 });
 var TabStyled = styled(TabBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: table-cell;\n  vertical-align: middle;\n  text-align: center;\n  white-space: nowrap;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: 40px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n"], ["\n  display: table-cell;\n  vertical-align: middle;\n  text-align: center;\n  white-space: nowrap;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: 40px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n"])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.tabWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["min-width: ", "px;"], ["min-width: ", "px;"])), p.tabWidth); }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.neutral[100]; });
 var Tab = React.forwardRef(function (props, ref) { return React.createElement(TabStyled, __assign({ ref: ref }, props)); });

package/controls/TabBar/TabBar.d.ts

@@ -1,22 +1,32 @@
 import * as React from 'react';
+import { Tab } from './Tab';
 interface IProps {
     /** @ignore */
     className?: string;
     /**
      * Children must be of type `TabBar.Tab`.
+     * @ignore
      */
-    children?: React.ReactNode;
+    children?: React.ReactElement<typeof Tab> | React.ReactElement<typeof Tab>[];
     /**
-     * Index of the active tab.
+     * The zero-based index of the currently active tab.
+     * When not provided, the first tab (index 0) is active by default.
+     *
+     * Changing this prop will update the active tab.
+     *
      * @default 0
      */
     active?: number;
     /**
-     * Tabs use a fluid width. A fixed width (in pixels) can be provided.
+     * Optional fixed width (in pixels) to assign each tab.
+     * If omitted, tabs use fluid widths.
      */
     tabWidth?: number;
     /**
-     * Fired when the active tab changes. `idx` is the index of the new tab.
+     * Callback fired when the active tab changes due to user interaction.
+     * The argument is the zero-based index of the newly activated tab.
+     *
+     * @param idx - The index of the new active tab.
      */
     onChange?: (idx: number) => void;
 }
@@ -30,5 +40,6 @@ interface IProps {
 declare const TabBar: {
     ({ active, ...props }: IProps): React.JSX.Element;
     Tab: React.ForwardRefExoticComponent<import("./Tab").IProps & React.RefAttributes<HTMLDivElement>>;
+    displayName: string;
 };
 export { TabBar };

package/controls/TabBar/TabBar.js

@@ -29,16 +29,33 @@ import styled from 'styled-components';
 import { Tab } from './Tab';
 import { Underliner } from './Underliner';
 var TabBarBase = function (props) {
+    var _a;
     // TabBar keeps its own internal "active" index state.
-    var _a = React.useState(props.active), active = _a[0], setActive = _a[1];
+    var _b = React.useState((_a = props.active) !== null && _a !== void 0 ? _a : 0), active = _b[0], setActive = _b[1];
     var underlinerRef = React.useRef(null);
     var barRef = React.useRef(null);
     var sliderRef = React.useRef(null);
+    var wasDragging = React.useRef(false);
     var dragging = React.useRef(false);
+    /**
+     * References to all the individual tab elements.
+     * Used to measure tab dimensions and positions for layout calculations
+     * and to control scroll and underliner positioning.
+     */
+    var tabRefs = React.useRef([]);
+    /**
+     * Stores the last horizontal mouse position on screen during drag start.
+     * Used to calculate drag displacement.
+     */
     var mouseX = React.useRef(0);
+    /**
+     * Stores the starting left offset position of the slider at drag start.
+     * Used as baseline for calculating new slider position during dragging.
+     */
     var startX = React.useRef(0);
     var handleMouseDown = function (e) {
         dragging.current = true;
+        wasDragging.current = false; // Reset flag on fresh mouse down
         // We store the current mouse position on the screen,
         // as well as the current scroll position of the slider.
         mouseX.current = e.screenX;
@@ -50,6 +67,9 @@ var TabBarBase = function (props) {
         // Use the current mouse position to determine the
         // new scroll position of the slider.
         var dMouse = event.screenX - mouseX.current;
+        if (Math.abs(dMouse) > 5) {
+            wasDragging.current = true;
+        }
         var x = startX.current + dMouse; // x is always a negative offset.
         // Check scroll bounds:
         if (x > 0)
@@ -62,6 +82,7 @@ var TabBarBase = function (props) {
     };
     var handleMouseUp = function (event) {
         dragging.current = false;
+        setTimeout(function () { wasDragging.current = false; }, 100); // Slight delay to allow click cancel
     };
     React.useEffect(function () {
         // Listen for document-wide mouseup/mousemove events when TabBar mounts.
@@ -75,33 +96,106 @@ var TabBarBase = function (props) {
             document.removeEventListener('mouseup', handleMouseUp);
         };
     }, []);
+    //
+    // When internal active index changes, move underliner.
+    // 
     React.useEffect(function () {
         moveUnderliner();
     }, [active]);
+    //
+    // If active prop changes, update internal active tab index.
+    //
     React.useEffect(function () {
         setActive(props.active);
     }, [props.active]);
+    //
     // Use refs to move underliner under active tab.
+    //
     var moveUnderliner = function () {
-        var _a = sliderRef.current.children[active], offsetLeft = _a.offsetLeft, offsetWidth = _a.offsetWidth;
-        if (underlinerRef) {
-            underlinerRef.current.style.left = "".concat(offsetLeft, "px");
-            underlinerRef.current.style.width = "".concat(offsetWidth, "px");
+        var _a;
+        var tabElements = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.children;
+        var target = tabElements === null || tabElements === void 0 ? void 0 : tabElements[active];
+        if (target && underlinerRef.current) {
+            underlinerRef.current.style.transform = "translateX(".concat(target.offsetLeft, "px)");
+            underlinerRef.current.style.width = "".concat(target.offsetWidth, "px");
+        }
+    };
+    /**
+     * Ensures the tab at the specified index is fully visible inside the
+     * tab bar viewport by adjusting the slider's horizontal position.
+     *
+     * This function manually calculates whether the tab is fully in view.
+     * If the tab is partially or fully outside the visible area on either
+     * side, the slider is moved to bring the entire tab into view.
+     *
+     * The scroll animation is smooth and lasts 300ms.
+     *
+     * @param {number} index - The index of the tab to ensure visibility for.
+     */
+    var ensureTabFullyVisible = function (index) {
+        var tabEl = tabRefs.current[index];
+        var sliderEl = sliderRef.current;
+        var barEl = barRef.current;
+        if (!tabEl || !sliderEl || !barEl)
+            return;
+        var tabLeft = tabEl.offsetLeft;
+        var tabRight = tabLeft + tabEl.offsetWidth;
+        var currentOffset = parseFloat(sliderEl.style.left) || 0;
+        var visibleLeft = -currentOffset;
+        var visibleRight = visibleLeft + barEl.offsetWidth;
+        var newOffset = currentOffset;
+        if (tabLeft < visibleLeft) {
+            // Tab is too far left
+            newOffset = -tabLeft;
+        }
+        else if (tabRight > visibleRight) {
+            // Tab is too far right
+            newOffset = -(tabRight - barEl.offsetWidth);
         }
+        // Clamp value to slider bounds
+        var maxScroll = sliderEl.offsetWidth - barEl.offsetWidth;
+        newOffset = Math.max(Math.min(newOffset, 0), -maxScroll);
+        // Smoothly animate the scroll
+        sliderEl.style.transition = 'left 0.3s ease';
+        sliderEl.style.left = "".concat(newOffset, "px");
+        // Remove transition after animation to prevent interference with dragging
+        setTimeout(function () {
+            if (sliderEl)
+                sliderEl.style.transition = '';
+        }, 300);
     };
+    /**
+     * Handles the tab click event.
+     *
+     * If the tab clicked is already active, this function does nothing.
+     * If a drag interaction was detected immediately before the click (to avoid
+     * confusing accidental clicks during drag), this function ignores the event.
+     *
+     * Otherwise, this function:
+     *  - Adjusts the scroll position so the clicked tab is fully visible.
+     *  - Updates the active tab state.
+     *  - Calls the `onChange` callback with the new active index.
+     *
+     * @param {number} idx - The index of the tab clicked.
+     */
     var handleTabClick = function (idx) {
+        var _a;
+        // 🛑 Ignore click if it was part of a drag:
+        if (wasDragging.current)
+            return;
         // Only of interest if active tab changes.
-        if (idx == active)
+        if (idx === active)
             return;
+        ensureTabFullyVisible(idx);
         setActive(idx);
-        if (props.onChange)
-            props.onChange(idx);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, idx);
     };
-    return (React.createElement("div", { className: props.className, ref: barRef },
+    return (React.createElement("div", { className: props.className, ref: barRef, "aria-orientation": "horizontal" },
         React.createElement(Slider, { ref: sliderRef, onMouseDown: handleMouseDown },
             React.Children.map(props.children, function (child, idx) {
                 return React.cloneElement(child, {
-                    active: active == idx,
+                    ref: function (el) { return tabRefs.current[idx] = el; },
+                    active: active === idx,
                     tabWidth: props.tabWidth,
                     onClick: function () { return handleTabClick(idx); }
                 });
@@ -130,5 +224,6 @@ var TabBar = function (_a) {
     return React.createElement(TabBarStyled, __assign({ active: active }, props));
 };
 TabBar.Tab = Tab;
+TabBar.displayName = "TabBar";
 export { TabBar };
 var templateObject_1, templateObject_2;

package/controls/TabBar/Underliner.js

@@ -21,7 +21,8 @@ var UnderlinerBase = React.forwardRef(function (props, ref) {
 /**
  * Underliner passes a reference to itself back to its parent.
  */
-var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 38px;\n  width: 0px;\n  height: 0px;\n  border-top: solid 4px ", ";\n  box-sizing: border-box;\n  transition: left ease .3s, width ease .3s;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 38px;\n  width: 0px;\n  height: 0px;\n  border-top: solid 4px ", ";\n  box-sizing: border-box;\n  transition: left ease .3s, width ease .3s;\n"])), function (p) { return p.theme.colors.primary[1]; });
+var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  top: 38px;\n  width: 0px;\n  height: 0px;\n  // Appearance:\n  border-top: solid 4px ", ";\n  box-sizing: border-box;\n  transition: transform ease .3s, width ease .3s;\n"], ["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  top: 38px;\n  width: 0px;\n  height: 0px;\n  // Appearance:\n  border-top: solid 4px ", ";\n  box-sizing: border-box;\n  transition: transform ease .3s, width ease .3s;\n"])), function (p) { return p.theme.colors.primary[1]; });
 var Underliner = React.forwardRef(function (props, ref) { return React.createElement(UnderlinerStyled, __assign({ ref: ref }, props)); });
+Underliner.displayName = "Underliner";
 export { Underliner };
 var templateObject_1;

package/controls/TertiaryButton/TertiaryButton.d.ts

@@ -24,5 +24,8 @@ interface IProps {
  * There is no support for icons (although the React children of the component
  * could force one in).
  */
-declare const TertiaryButton: ({ disabled, ...props }: IProps) => React.JSX.Element;
+declare const TertiaryButton: {
+    ({ disabled, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { TertiaryButton, IProps };