@cloudscape-design/board-components 3.0.14 → 3.0.16

package/board/styles.css.js

@@ -1,12 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "placeholder": "awsui_placeholder_1h7dk_obfdn_1",
-  "placeholder--active": "awsui_placeholder--active_1h7dk_obfdn_5",
-  "placeholder--hover": "awsui_placeholder--hover_1h7dk_obfdn_8",
-  "root": "awsui_root_1h7dk_obfdn_12",
-  "empty": "awsui_empty_1h7dk_obfdn_16",
-  "current-operation-reorder": "awsui_current-operation-reorder_1h7dk_obfdn_25",
-  "current-operation-resize": "awsui_current-operation-resize_1h7dk_obfdn_29"
+  "placeholder": "awsui_placeholder_1h7dk_11u65_1",
+  "placeholder--active": "awsui_placeholder--active_1h7dk_11u65_5",
+  "placeholder--hover": "awsui_placeholder--hover_1h7dk_11u65_8",
+  "root": "awsui_root_1h7dk_11u65_12",
+  "empty": "awsui_empty_1h7dk_11u65_16",
+  "current-operation-reorder": "awsui_current-operation-reorder_1h7dk_11u65_25",
+  "current-operation-resize": "awsui_current-operation-resize_1h7dk_11u65_29"
 };
   

package/board/styles.scoped.css

@@ -1,31 +1,31 @@
-.awsui_placeholder_1h7dk_obfdn_1:not(#\9) {
-  border-radius: var(--border-radius-container-gh9ysk, 16px);
+.awsui_placeholder_1h7dk_11u65_1:not(#\9) {
+  border-radius: var(--border-radius-container-b3z48i, 16px);
   height: 100%;
 }
-.awsui_placeholder--active_1h7dk_obfdn_5:not(#\9) {
-  background-color: var(--color-board-placeholder-active-vaxzdf, #e9ebed);
+.awsui_placeholder--active_1h7dk_11u65_5:not(#\9) {
+  background-color: var(--color-board-placeholder-active-ks5yr9, #e9ebed);
 }
-.awsui_placeholder--hover_1h7dk_obfdn_8:not(#\9) {
-  background-color: var(--color-board-placeholder-hover-v1s7kq, #d3e7f9);
+.awsui_placeholder--hover_1h7dk_11u65_8:not(#\9) {
+  background-color: var(--color-board-placeholder-hover-4nulhj, #d3e7f9);
 }
 
-.awsui_root_1h7dk_obfdn_12:not(#\9) {
+.awsui_root_1h7dk_11u65_12:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_empty_1h7dk_obfdn_16:not(#\9) {
+.awsui_empty_1h7dk_11u65_16:not(#\9) {
   box-sizing: border-box;
   width: 100%;
-  padding: var(--space-scaled-m-pv0fmt, 16px) var(--space-scaled-l-t03y3z, 20px) var(--space-scaled-l-t03y3z, 20px);
-  color: var(--color-text-empty-fjv325, #5f6b7a);
+  padding: var(--space-scaled-m-9q5ipc, 16px) var(--space-scaled-l-x5pubp, 20px) var(--space-scaled-l-x5pubp, 20px);
+  color: var(--color-text-empty-qnnj2s, #5f6b7a);
   display: flex;
   justify-content: center;
 }
 
-.awsui_current-operation-reorder_1h7dk_obfdn_25:not(#\9) {
+.awsui_current-operation-reorder_1h7dk_11u65_25:not(#\9) {
   cursor: grabbing;
 }
 
-.awsui_current-operation-resize_1h7dk_obfdn_29:not(#\9) {
+.awsui_current-operation-resize_1h7dk_11u65_29:not(#\9) {
   cursor: nwse-resize;
 }

package/board/styles.selectors.js

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "placeholder": "awsui_placeholder_1h7dk_obfdn_1",
-  "placeholder--active": "awsui_placeholder--active_1h7dk_obfdn_5",
-  "placeholder--hover": "awsui_placeholder--hover_1h7dk_obfdn_8",
-  "root": "awsui_root_1h7dk_obfdn_12",
-  "empty": "awsui_empty_1h7dk_obfdn_16",
-  "current-operation-reorder": "awsui_current-operation-reorder_1h7dk_obfdn_25",
-  "current-operation-resize": "awsui_current-operation-resize_1h7dk_obfdn_29"
+  "placeholder": "awsui_placeholder_1h7dk_11u65_1",
+  "placeholder--active": "awsui_placeholder--active_1h7dk_11u65_5",
+  "placeholder--hover": "awsui_placeholder--hover_1h7dk_11u65_8",
+  "root": "awsui_root_1h7dk_11u65_12",
+  "empty": "awsui_empty_1h7dk_11u65_16",
+  "current-operation-reorder": "awsui_current-operation-reorder_1h7dk_11u65_25",
+  "current-operation-resize": "awsui_current-operation-resize_1h7dk_11u65_29"
 };
   

package/board-item/internal.js

@@ -17,5 +17,5 @@ export function InternalBoardItem({ children, header, settings, disableContentPa
     const dragHandleAriaDescribedBy = useId();
     const resizeHandleAriaLabelledBy = useId();
     const resizeHandleAriaDescribedBy = useId();
-    return (_jsxs("div", { ref: __internalRootRef, className: styles.root, ...getDataAttributes(rest), children: [_jsx(Container, { fitHeight: true, disableHeaderPaddings: true, header: _jsx(WidgetContainerHeader, { handle: _jsx(DragHandle, { ref: dragHandle.ref, ariaLabelledBy: dragHandleAriaLabelledBy, ariaDescribedBy: dragHandleAriaDescribedBy, onPointerDown: dragHandle.onPointerDown, onKeyDown: dragHandle.onKeyDown }), settings: settings, children: header }), footer: footer, disableContentPaddings: disableContentPaddings, className: clsx(styles["container-override"], isActive && styles.active), children: children }), resizeHandle && (_jsx("div", { className: styles.resizer, children: _jsx(ResizeHandle, { ariaLabelledBy: resizeHandleAriaLabelledBy, ariaDescribedBy: resizeHandleAriaDescribedBy, onPointerDown: resizeHandle.onPointerDown, onKeyDown: resizeHandle.onKeyDown }) })), _jsx(ScreenreaderOnly, { id: dragHandleAriaLabelledBy, children: i18nStrings.dragHandleAriaLabel }), _jsx(ScreenreaderOnly, { id: dragHandleAriaDescribedBy, children: i18nStrings.dragHandleAriaDescription }), _jsx(ScreenreaderOnly, { id: resizeHandleAriaLabelledBy, children: i18nStrings.resizeHandleAriaLabel }), _jsx(ScreenreaderOnly, { id: resizeHandleAriaDescribedBy, children: i18nStrings.resizeHandleAriaDescription })] }));
+    return (_jsxs("div", { ref: __internalRootRef, className: styles.root, ...getDataAttributes(rest), children: [_jsx(Container, { fitHeight: true, disableHeaderPaddings: true, header: _jsx(WidgetContainerHeader, { handle: _jsx(DragHandle, { ref: dragHandle.ref, ariaLabelledBy: dragHandleAriaLabelledBy, ariaDescribedBy: dragHandleAriaDescribedBy, onPointerDown: dragHandle.onPointerDown, onKeyDown: dragHandle.onKeyDown, isActive: dragHandle.isActive }), settings: settings, children: header }), footer: footer, disableContentPaddings: disableContentPaddings, className: clsx(styles["container-override"], isActive && styles.active), children: children }), resizeHandle && (_jsx("div", { className: styles.resizer, children: _jsx(ResizeHandle, { ariaLabelledBy: resizeHandleAriaLabelledBy, ariaDescribedBy: resizeHandleAriaDescribedBy, onPointerDown: resizeHandle.onPointerDown, onKeyDown: resizeHandle.onKeyDown, isActive: resizeHandle.isActive }) })), _jsx(ScreenreaderOnly, { id: dragHandleAriaLabelledBy, children: i18nStrings.dragHandleAriaLabel }), _jsx(ScreenreaderOnly, { id: dragHandleAriaDescribedBy, children: i18nStrings.dragHandleAriaDescription }), _jsx(ScreenreaderOnly, { id: resizeHandleAriaLabelledBy, children: i18nStrings.resizeHandleAriaLabel }), _jsx(ScreenreaderOnly, { id: resizeHandleAriaDescribedBy, children: i18nStrings.resizeHandleAriaDescription })] }));
 }

package/board-item/styles.css.js

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_9ckv7_o6rfp_1",
-  "container-override": "awsui_container-override_9ckv7_o6rfp_6",
-  "active": "awsui_active_9ckv7_o6rfp_6",
-  "header": "awsui_header_9ckv7_o6rfp_10",
-  "flexible": "awsui_flexible_9ckv7_o6rfp_16",
-  "handle": "awsui_handle_9ckv7_o6rfp_20",
-  "header-content": "awsui_header-content_9ckv7_o6rfp_24",
-  "settings": "awsui_settings_9ckv7_o6rfp_28",
-  "fixed": "awsui_fixed_9ckv7_o6rfp_33",
-  "resizer": "awsui_resizer_9ckv7_o6rfp_37"
+  "root": "awsui_root_9ckv7_18rkp_1",
+  "container-override": "awsui_container-override_9ckv7_18rkp_6",
+  "active": "awsui_active_9ckv7_18rkp_6",
+  "header": "awsui_header_9ckv7_18rkp_31",
+  "flexible": "awsui_flexible_9ckv7_18rkp_37",
+  "handle": "awsui_handle_9ckv7_18rkp_41",
+  "header-content": "awsui_header-content_9ckv7_18rkp_45",
+  "settings": "awsui_settings_9ckv7_18rkp_49",
+  "fixed": "awsui_fixed_9ckv7_18rkp_54",
+  "resizer": "awsui_resizer_9ckv7_18rkp_58"
 };
   

package/board-item/styles.scoped.css

@@ -1,41 +1,62 @@
-.awsui_root_9ckv7_o6rfp_1:not(#\9) {
+.awsui_root_9ckv7_18rkp_1:not(#\9) {
   display: contents;
 }
 
 /* TODO: use container API instead of styles override */
-.awsui_container-override_9ckv7_o6rfp_6.awsui_active_9ckv7_o6rfp_6:not(#\9) {
-  box-shadow: var(--shadow-container-active-l4kuxc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
+.awsui_container-override_9ckv7_18rkp_6.awsui_active_9ckv7_18rkp_6:not(#\9) {
+  box-shadow: var(--shadow-container-active-jaablg, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
+}
+[data-awsui-focus-visible] .awsui_container-override_9ckv7_18rkp_6.awsui_active_9ckv7_18rkp_6:not(#\9) {
+  position: relative;
+  box-sizing: border-box;
+  outline: none;
+}
+[data-awsui-focus-visible] .awsui_container-override_9ckv7_18rkp_6.awsui_active_9ckv7_18rkp_6:not(#\9) {
+  outline: 2px dotted transparent;
+  outline-offset: -1px;
+}
+[data-awsui-focus-visible] .awsui_container-override_9ckv7_18rkp_6.awsui_active_9ckv7_18rkp_6:not(#\9)::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  left: calc(-1 * 0px);
+  top: calc(-1 * 0px);
+  width: calc(100% + 2 * 0px);
+  height: calc(100% + 2 * 0px);
+  border-radius: var(--border-radius-container-b3z48i, 16px);
+  border: 2px solid var(--color-border-item-focused-nwfxo7, #0972d3);
 }
 
-.awsui_header_9ckv7_o6rfp_10:not(#\9) {
+.awsui_header_9ckv7_18rkp_31:not(#\9) {
   display: flex;
   justify-items: center;
-  padding: var(--space-scaled-s-cu1hzn, 12px) calc(var(--space-container-horizontal-tlw03i, 20px) - var(--space-scaled-xs-6859qs, 8px));
+  padding: var(--space-scaled-s-gczsk7, 12px) calc(var(--space-container-horizontal-6u2610, 20px) - var(--space-scaled-xs-u0e7ft, 8px));
 }
 
-.awsui_flexible_9ckv7_o6rfp_16:not(#\9) {
+.awsui_flexible_9ckv7_18rkp_37:not(#\9) {
   flex: 1 1 min-content;
 }
 
-.awsui_handle_9ckv7_o6rfp_20:not(#\9) {
-  margin-top: calc(var(--space-scaled-xxs-95dhkm, 4px) + 1px);
+.awsui_handle_9ckv7_18rkp_41:not(#\9) {
+  margin-top: calc(var(--space-scaled-xxs-ugy2pw, 4px) + 1px);
 }
 
-.awsui_header-content_9ckv7_o6rfp_24:not(#\9) {
-  margin-left: var(--space-scaled-xxs-95dhkm, 4px);
+.awsui_header-content_9ckv7_18rkp_45:not(#\9) {
+  margin-left: var(--space-scaled-xxs-ugy2pw, 4px);
 }
 
-.awsui_settings_9ckv7_o6rfp_28:not(#\9) {
-  margin-top: calc(var(--space-scaled-xxxs-lo883m, 2px) + 1px);
-  margin-left: var(--space-static-xs-9adq92, 8px);
+.awsui_settings_9ckv7_18rkp_49:not(#\9) {
+  margin-top: calc(var(--space-scaled-xxxs-emyscj, 2px) + 1px);
+  margin-left: var(--space-static-xs-lb1zri, 8px);
 }
 
-.awsui_fixed_9ckv7_o6rfp_33:not(#\9) {
+.awsui_fixed_9ckv7_18rkp_54:not(#\9) {
   flex: 0 0 auto;
 }
 
-.awsui_resizer_9ckv7_o6rfp_37:not(#\9) {
+.awsui_resizer_9ckv7_18rkp_58:not(#\9) {
   position: absolute;
-  bottom: calc(var(--space-static-xs-9adq92, 8px) - var(--space-static-xxxs-k3qmdh, 2px));
-  right: calc(var(--space-static-xs-9adq92, 8px) - var(--space-static-xxxs-k3qmdh, 2px));
+  bottom: calc(var(--space-static-xs-lb1zri, 8px) - var(--space-static-xxxs-lv75px, 2px));
+  right: calc(var(--space-static-xs-lb1zri, 8px) - var(--space-static-xxxs-lv75px, 2px));
 }

package/board-item/styles.selectors.js

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_9ckv7_o6rfp_1",
-  "container-override": "awsui_container-override_9ckv7_o6rfp_6",
-  "active": "awsui_active_9ckv7_o6rfp_6",
-  "header": "awsui_header_9ckv7_o6rfp_10",
-  "flexible": "awsui_flexible_9ckv7_o6rfp_16",
-  "handle": "awsui_handle_9ckv7_o6rfp_20",
-  "header-content": "awsui_header-content_9ckv7_o6rfp_24",
-  "settings": "awsui_settings_9ckv7_o6rfp_28",
-  "fixed": "awsui_fixed_9ckv7_o6rfp_33",
-  "resizer": "awsui_resizer_9ckv7_o6rfp_37"
+  "root": "awsui_root_9ckv7_18rkp_1",
+  "container-override": "awsui_container-override_9ckv7_18rkp_6",
+  "active": "awsui_active_9ckv7_18rkp_6",
+  "header": "awsui_header_9ckv7_18rkp_31",
+  "flexible": "awsui_flexible_9ckv7_18rkp_37",
+  "handle": "awsui_handle_9ckv7_18rkp_41",
+  "header-content": "awsui_header-content_9ckv7_18rkp_45",
+  "settings": "awsui_settings_9ckv7_18rkp_49",
+  "fixed": "awsui_fixed_9ckv7_18rkp_54",
+  "resizer": "awsui_resizer_9ckv7_18rkp_58"
 };
   

package/internal/drag-handle/index.d.ts

@@ -4,6 +4,7 @@ export interface DragHandleProps {
     ariaDescribedBy: string;
     onPointerDown: (event: PointerEvent) => void;
     onKeyDown: (event: KeyboardEvent) => void;
+    isActive: boolean;
 }
 declare const _default: import("react").ForwardRefExoticComponent<DragHandleProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default _default;

package/internal/drag-handle/index.js

@@ -2,10 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { Icon } from "@cloudscape-design/components";
+import clsx from "clsx";
 import { forwardRef } from "react";
 import Handle from "../handle";
 import styles from "./styles.css.js";
-function DragHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown }, ref) {
-    return (_jsx(Handle, { ref: ref, className: styles.handle, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onPointerDown: onPointerDown, onKeyDown: onKeyDown, children: _jsx(Icon, { name: "drag-indicator" }) }));
+function DragHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown, isActive }, ref) {
+    return (_jsx(Handle, { ref: ref, className: clsx(styles.handle, isActive && styles.active), "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onPointerDown: onPointerDown, onKeyDown: onKeyDown, children: _jsx(Icon, { name: "drag-indicator" }) }));
 }
 export default forwardRef(DragHandle);

package/internal/drag-handle/styles.css.js

@@ -1,6 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_umbhe_1e9tr_1"
+  "handle": "awsui_handle_umbhe_1k0eu_1",
+  "active": "awsui_active_umbhe_1k0eu_9"
 };
   

package/internal/drag-handle/styles.scoped.css

@@ -1,7 +1,11 @@
-.awsui_handle_umbhe_1e9tr_1:not(#\9) {
+.awsui_handle_umbhe_1k0eu_1:not(#\9) {
   cursor: grab;
 }
 
-.awsui_handle_umbhe_1e9tr_1:not(#\9):active {
+.awsui_handle_umbhe_1k0eu_1:not(#\9):active {
   cursor: grabbing;
+}
+
+.awsui_active_umbhe_1k0eu_9:not(#\9) {
+  outline: none;
 }

package/internal/drag-handle/styles.selectors.js

@@ -2,6 +2,7 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle": "awsui_handle_umbhe_1e9tr_1"
+  "handle": "awsui_handle_umbhe_1k0eu_1",
+  "active": "awsui_active_umbhe_1k0eu_9"
 };
   

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "board-components";
-export var PACKAGE_VERSION = "3.0.0 (10b335c3)";
+export var PACKAGE_VERSION = "3.0.0 (2a96deaa)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/handle/styles.css.js

@@ -1,6 +1,6 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_cc1pu_jzwgj_1"
+  "handle": "awsui_handle_cc1pu_njct9_1"
 };
   

package/internal/handle/styles.scoped.css

@@ -1,32 +1,11 @@
-.awsui_handle_cc1pu_jzwgj_1:not(#\9) {
+.awsui_handle_cc1pu_njct9_1:not(#\9) {
   -webkit-appearance: none;
           appearance: none;
   background: transparent;
   border: none;
-  padding: var(--space-scaled-xxs-95dhkm, 4px);
-  color: var(--color-text-interactive-default-eg5fsa, #414d5c);
+  padding: var(--space-scaled-xxs-ugy2pw, 4px);
+  color: var(--color-text-interactive-default-pdoaf1, #414d5c);
 }
-.awsui_handle_cc1pu_jzwgj_1:not(#\9):hover {
-  color: var(--color-text-interactive-hover-v3lasm, #000716);
-}
-.awsui_handle_cc1pu_jzwgj_1:not(#\9):focus-visible {
-  position: relative;
-  box-sizing: border-box;
-  outline: none;
-}
-.awsui_handle_cc1pu_jzwgj_1:not(#\9):focus-visible {
-  outline: 2px dotted transparent;
-  outline-offset: 3px;
-}
-.awsui_handle_cc1pu_jzwgj_1:not(#\9):focus-visible::before {
-  content: " ";
-  display: block;
-  position: absolute;
-  box-sizing: border-box;
-  left: calc(-1 * 4px);
-  top: calc(-1 * 4px);
-  width: calc(100% + 2 * 4px);
-  height: calc(100% + 2 * 4px);
-  border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
-  border: 2px solid var(--color-border-item-focused-ap3b6s, #0972d3);
+.awsui_handle_cc1pu_njct9_1:not(#\9):hover {
+  color: var(--color-text-interactive-hover-hi8qzz, #000716);
 }

package/internal/handle/styles.selectors.js

@@ -2,6 +2,6 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle": "awsui_handle_cc1pu_jzwgj_1"
+  "handle": "awsui_handle_cc1pu_njct9_1"
 };
   

package/internal/item-container/index.d.ts

@@ -10,10 +10,12 @@ interface ItemContextType {
         ref: RefObject<HTMLButtonElement>;
         onPointerDown(event: ReactPointerEvent): void;
         onKeyDown(event: KeyboardEvent): void;
+        isActive: boolean;
     };
     resizeHandle: null | {
         onPointerDown(event: ReactPointerEvent): void;
         onKeyDown(event: KeyboardEvent): void;
+        isActive: boolean;
     };
 }
 export declare const ItemContext: import("react").Context<ItemContextType | null>;

package/internal/item-container/index.js

@@ -264,11 +264,13 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
                     ref: dragHandleRef,
                     onPointerDown: onDragHandlePointerDown,
                     onKeyDown: onDragHandleKeyDown,
+                    isActive: isActive && (transition === null || transition === void 0 ? void 0 : transition.operation) === "reorder",
                 },
                 resizeHandle: placed
                     ? {
                         onPointerDown: onResizeHandlePointerDown,
                         onKeyDown: onResizeHandleKeyDown,
+                        isActive: isActive && (transition === null || transition === void 0 ? void 0 : transition.operation) === "resize",
                     }
                     : null,
             }, children: childrenRef.current }) }));

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "10b335c34d6e893cc6d2fa58f8ad884214bfae4f"
+  "commit": "2a96deaaae4c967749f16563f62548f9b51329da"
 }

package/internal/resize-handle/index.d.ts

@@ -4,5 +4,6 @@ export interface ResizeHandleProps {
     ariaDescribedBy: string;
     onPointerDown: (event: PointerEvent) => void;
     onKeyDown: (event: KeyboardEvent) => void;
+    isActive: boolean;
 }
-export default function ResizeHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown }: ResizeHandleProps): JSX.Element;
+export default function ResizeHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown, isActive, }: ResizeHandleProps): JSX.Element;

package/internal/resize-handle/index.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { Icon } from "@cloudscape-design/components";
+import clsx from "clsx";
 import Handle from "../handle";
 import styles from "./styles.css.js";
-export default function ResizeHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown }) {
-    return (_jsx(Handle, { className: styles.handle, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onPointerDown: onPointerDown, onKeyDown: onKeyDown, children: _jsx(Icon, { name: "resize-area" }) }));
+export default function ResizeHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown, isActive, }) {
+    return (_jsx(Handle, { className: clsx(styles.handle, isActive && styles.active), "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onPointerDown: onPointerDown, onKeyDown: onKeyDown, children: _jsx(Icon, { name: "resize-area" }) }));
 }

package/internal/resize-handle/styles.css.js

@@ -1,6 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_19hnz_1caet_1"
+  "handle": "awsui_handle_19hnz_esh5b_1",
+  "active": "awsui_active_19hnz_esh5b_5"
 };
   

package/internal/resize-handle/styles.scoped.css

@@ -1,3 +1,7 @@
-.awsui_handle_19hnz_1caet_1:not(#\9) {
+.awsui_handle_19hnz_esh5b_1:not(#\9) {
   cursor: nwse-resize;
+}
+
+.awsui_active_19hnz_esh5b_5:not(#\9) {
+  outline: none;
 }

package/internal/resize-handle/styles.selectors.js

@@ -2,6 +2,7 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle": "awsui_handle_19hnz_1caet_1"
+  "handle": "awsui_handle_19hnz_esh5b_1",
+  "active": "awsui_active_19hnz_esh5b_5"
 };
   

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/board-components",
-  "version": "3.0.14",
+  "version": "3.0.16",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/board-components.git"