no-frills-ui 0.0.14-alpha.2 → 0.0.14-alpha.4

package/dist/index.js

@@ -75,27 +75,27 @@ function CheckCircle(props) {
 }
 
 var constants = {
-    PRIMARY: '#2283d2',
+    PRIMARY: '#1f7ac5',
     PRIMARY_LIGHT: '#64baff',
     PRIMARY_LIGHTER: '#cfe9ff',
     BACKDROP_COLOR: '#2681da80',
-    INFO: '#2283d2',
+    INFO: '#1d6eaf',
     INFO_LIGHT: '#64baff',
-    SUCCESS: '#22d295',
+    SUCCESS: '#1a835f',
     SUCCESS_LIGHT: '#80eac6',
-    WARNING: '#cc9500',
+    WARNING: '#916b01',
     WARNING_LIGHT: '#ffba00',
-    ERROR: '#d63b3b',
+    ERROR: '#bb2828',
     ERROR_LIGHT: '#f1a5a5',
     BORDER_COLOR: '#555555',
     TOAST: '#5f5f5f',
-    TOOLTIP_COLOR: 'rgba(0,0,0,0.5)',
+    TOOLTIP_COLOR: 'rgba(0,0,0,0.6)',
     BORDER_LIGHT_COLOR: '#eeeeee',
     BACKGROUND: '#ffffff',
     DISABLED_BACKGROUND: '#fafafa',
     DISABLED_BORDER: '#aaa',
     LIGHT_GREY: '#ccc',
-    DISABLED: '#777',
+    DISABLED: '#737373',
     SHADOW: '0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06)',
     HOVER_SHADOW: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
     MODAL_SHADOW: '0px 8px 17px 2px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12), 0px 5px 5px -3px rgba(0,0,0,0.2)',
@@ -193,18 +193,26 @@ const Card = styled.div `
 
 const Step$1 = styled(Card) `
     transition: all 0.6s ease;
+    overflow: visible;
 
     ${(props) => props.open &&
     `
         margin: 20px 5px;
     `}
-
-    ${(props) => props.focused && `box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});`}
 `;
-const StepHeader = styled.div `
+const StepHeader = styled.button `
     padding: 20px 15px;
     display: flex;
     justify-content: space-between;
+    background: none;
+    border: none;
+    border-radius: 10px;
+    width: 100%;
+    font-size: inherit;
+
+    &:focus-visible {
+        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
+    }
 
     & input {
         appearance: none;
@@ -219,7 +227,7 @@ const StepHeader = styled.div `
 
     ${(props) => props.disabled
     ? `
-        color: ${constants.LIGHT_GREY};
+        color: ${constants.DISABLED};
     `
     : `
         cursor: pointer;
@@ -278,15 +286,14 @@ const AccordionStepFooter = styled.div `
 `;
 function AccordionStep(props) {
     const [height, setHeight] = React.useState(0);
-    const [focused, setFocused] = React.useState(false);
     const { open, disabled, header, errorText, completed, onStepClick } = props;
+    // Generate unique IDs for ARIA relationships
+    const headerId = React.useId();
+    const regionId = React.useId();
     const ref = (el) => setHeight((el === null || el === void 0 ? void 0 : el.scrollHeight) || 0);
-    const toggleFocus = () => {
-        setFocused(!focused);
-    };
-    return (jsxRuntime.jsxs(Step$1, Object.assign({}, props, { focused: focused, elevated: props.open, children: [jsxRuntime.jsxs(StepHeader, { open: open, disabled: disabled, onClick: onStepClick, children: [jsxRuntime.jsxs(HeaderContainer, { open: open, completed: completed, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: open, disabled: disabled, onFocus: toggleFocus, onBlur: toggleFocus }), jsxRuntime.jsx(FiberManualRecord, {}), jsxRuntime.jsx(Ellipsis, { children: header })] }), jsxRuntime.jsxs(ExpandContainer, { open: open, children: [errorText && (jsxRuntime.jsx(Badge, { css: react.css `
+    return (jsxRuntime.jsxs(Step$1, Object.assign({}, props, { elevated: props.open, children: [jsxRuntime.jsxs(StepHeader, { open: open, disabled: disabled, onClick: onStepClick, "aria-expanded": open ? 'true' : 'false', "aria-controls": regionId, id: headerId, children: [jsxRuntime.jsxs(HeaderContainer, { open: open, completed: completed, children: [jsxRuntime.jsx(FiberManualRecord, { "aria-hidden": "true" }), jsxRuntime.jsx(Ellipsis, { children: header })] }), jsxRuntime.jsxs(ExpandContainer, { open: open, children: [errorText && (jsxRuntime.jsx(Badge, { css: react.css `
                                 margin-right: 15px;
-                            `, inline: true, type: exports.BADGE_TYPE.DANGER, children: errorText })), jsxRuntime.jsx(ExpandMore, {})] })] }), jsxRuntime.jsx(StepBody, { ref: ref, height: open ? height : 0, children: open && props.children })] })));
+                            `, inline: true, type: exports.BADGE_TYPE.DANGER, children: errorText })), jsxRuntime.jsx(ExpandMore, { "aria-hidden": "true" })] })] }), jsxRuntime.jsx(StepBody, { ref: ref, height: open ? height : 0, role: "region", id: regionId, "aria-labelledby": headerId, "aria-hidden": open ? 'false' : 'true', children: open && props.children })] })));
 }
 AccordionStep.propTypes = {
     /** Header text for the step */
@@ -303,7 +310,7 @@ AccordionStep.defaultProps = {
     disabled: false,
 };
 
-var Button$2 = styled.button `
+const StyledButton = styled.button `
     border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
     border-radius: 5px;
     height: 32px;
@@ -338,11 +345,14 @@ var Button$2 = styled.button `
     }
 
     &:disabled {
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+        background-color: var(--border-light-color, ${constants.DISABLED_BACKGROUND});
         border-color: var(--light-grey, ${constants.LIGHT_GREY});
         color: var(--disabled, ${constants.DISABLED});
     }
 `;
+StyledButton.defaultProps = {
+    type: 'button',
+};
 
 var LinkButton = styled.button `
     min-width: 100px;
@@ -374,7 +384,7 @@ var LinkButton = styled.button `
 
     &:disabled {
         border-color: ${constants.BORDER_COLOR};
-        color: ${constants.DISABLED_BORDER};
+        color: ${constants.DISABLED};
     }
 `;
 
@@ -414,7 +424,7 @@ var RaisedButton = styled.button `
     }
 
     &:disabled {
-        background-color: ${constants.BORDER_LIGHT_COLOR};
+        background-color: ${constants.DISABLED_BACKGROUND};
         border-color: ${constants.LIGHT_GREY};
         color: ${constants.DISABLED};
     }
@@ -458,8 +468,8 @@ var ActionButton = styled.button `
     }
 
     &:disabled {
-        border: 1px solid ${constants.LIGHT_GREY};
-        background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+        border: 1px solid ${constants.BORDER_LIGHT_COLOR};
+        background-color: var(--border-light-color, ${constants.DISABLED_BACKGROUND});
         color: var(--disabled, ${constants.DISABLED});
     }
 `;
@@ -541,7 +551,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const Container$8 = styled.div `
+const Container$8 = styled.span `
     padding: 5px;
     padding-left: 15px;
     border-radius: 16px;
@@ -556,22 +566,28 @@ const Container$8 = styled.div `
     }
 `;
 const Button$1 = styled.button `
-    color: #fff;
-    background-color: var(--disabled-border, ${constants.DISABLED_BORDER});
+    color: var(--background-color, ${constants.BACKGROUND});
+    background-color: var(--border-color, ${constants.DISABLED});
     border-radius: 50%;
     border: none;
-    padding: 0;
+    padding: 4px;
     display: inline-flex;
     margin-left: 5px;
 `;
 function Chip(props) {
-    const { label, onCloseClick } = props, rest = __rest(props, ["label", "onCloseClick"]);
+    const { label, onCloseClick, closeButtonAriaLabel } = props, rest = __rest(props, ["label", "onCloseClick", "closeButtonAriaLabel"]);
     const keyUpHandler = (e) => {
-        if (e.keyCode === 8 || e.keyCode === 46) {
-            onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
+        if (e.key === 'Backspace' || e.key === 'Delete') {
+            onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick(e);
         }
     };
-    return (jsxRuntime.jsxs(Container$8, Object.assign({}, rest, { onKeyUp: keyUpHandler, children: [label, jsxRuntime.jsx(Button$1, { onClick: onCloseClick, "aria-label": `Remove ${label}`, children: jsxRuntime.jsx(Close, { height: 20, width: 20 }) })] })));
+    const buttonKeyDownHandler = (e) => {
+        // Stop propagation to prevent DragAndDrop from capturing Space/Enter
+        if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {
+            e.stopPropagation();
+        }
+    };
+    return (jsxRuntime.jsxs(Container$8, Object.assign({}, rest, { onKeyUp: keyUpHandler, children: [label, jsxRuntime.jsx(Button$1, { onClick: onCloseClick, onKeyDown: buttonKeyDownHandler, "aria-label": closeButtonAriaLabel !== null && closeButtonAriaLabel !== void 0 ? closeButtonAriaLabel : `Remove ${label}`, children: jsxRuntime.jsx(Close, { height: 16, width: 16 }) })] })));
 }
 
 exports.ORIENTATION = void 0;
@@ -586,23 +602,36 @@ const Item = styled.div `
     cursor: ${(props) => (props.showIndicator ? 'default' : 'move')};
     display: flex;
     user-select: ${(props) => (props.showIndicator ? 'auto' : 'none')};
-    border-top: 2px solid
+    border-top: 2px dashed
         ${(props) => props.orientation === exports.ORIENTATION.VERTICAL && props.active > 0
     ? constants.PRIMARY
     : 'transparent'};
-    border-bottom: 2px solid
+    border-bottom: 2px dashed
         ${(props) => props.orientation === exports.ORIENTATION.VERTICAL && props.active < 0
     ? constants.PRIMARY
     : 'transparent'};
-    border-left: 2px solid
+    border-left: 2px dashed
         ${(props) => props.orientation === exports.ORIENTATION.HORIZONTAL && props.active > 0
     ? constants.PRIMARY
     : 'transparent'};
-    border-right: 2px solid
+    border-right: 2px dashed
         ${(props) => props.orientation === exports.ORIENTATION.HORIZONTAL && props.active < 0
     ? constants.PRIMARY
     : 'transparent'};
     opacity: ${(props) => (props.dragging ? 0.5 : 1)};
+    border-radius: 10px;
+
+    &:focus {
+        box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
+    }
+
+    &:focus:not(:focus-visible) {
+        box-shadow: none;
+    }
+
+    &:focus-visible {
+        box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
+    }
 `;
 /** Styled component for the drag handle indicator */
 const DragKnob = styled.div `
@@ -648,7 +677,7 @@ const Container$7 = styled.div `
  * @returns A draggable item with optional drag indicator and visual feedback
  */
 function DragItem(props) {
-    const { index, orientation, children, showIndicator, dragOver } = props;
+    const { index, orientation, children, showIndicator, dragOver, totalItems, setAnnouncement } = props;
     const [active, setActive] = React.useState(0);
     const [touchTimer, setTouchTimer] = React.useState(null);
     const context = React.useContext(DragContext);
@@ -750,6 +779,71 @@ function DragItem(props) {
             document.body.style.overflow = 'auto';
         }
     };
+    /**
+     * Keyboard navigation handler for reordering items
+     * @param e Keyboard event
+     */
+    const handleKeyDown = (e) => {
+        const isVertical = orientation === exports.ORIENTATION.VERTICAL;
+        const moveUp = isVertical ? 'ArrowUp' : 'ArrowLeft';
+        const moveDown = isVertical ? 'ArrowDown' : 'ArrowRight';
+        const isGrabbed = context.isDragging && context.startIndex === index;
+        // Space to grab/drop
+        if (e.key === ' ' || e.key === 'Spacebar') {
+            e.preventDefault();
+            if (isGrabbed) {
+                // Drop at current position
+                context.drop(index);
+                setAnnouncement(context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {
+                    position: index + 1,
+                }));
+            }
+            else {
+                // Grab item
+                context.startGrab(index);
+                setAnnouncement(context.i18n.replacePlaceholders(context.i18n.grabbedAnnouncementTemplate, {
+                    position: index + 1,
+                }));
+            }
+        }
+        // Enter to drop
+        else if (e.key === 'Enter' && isGrabbed) {
+            e.preventDefault();
+            context.drop(index);
+            setAnnouncement(context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {
+                position: index + 1,
+            }));
+        }
+        // Escape to cancel
+        else if (e.key === 'Escape' && isGrabbed) {
+            e.preventDefault();
+            context.cancel();
+            setAnnouncement(context.i18n.cancelledAnnouncementTemplate);
+        }
+        // Arrow keys to move while grabbed
+        else if (isGrabbed) {
+            if (e.key === moveUp && index > 0) {
+                e.preventDefault();
+                // Move without dropping - just reorder and update startIndex
+                const newIndex = index - 1;
+                context.onDrop(context.startIndex, newIndex);
+                context.setStartIndex(newIndex);
+                setAnnouncement(context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {
+                    position: newIndex + 1,
+                }));
+            }
+            else if (e.key === moveDown && index < totalItems - 1) {
+                e.preventDefault();
+                // Move without dropping - just reorder and update startIndex
+                const newIndex = index + 1;
+                context.onDrop(context.startIndex, newIndex);
+                context.setStartIndex(newIndex);
+                setAnnouncement(context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {
+                    position: newIndex + 1,
+                }));
+            }
+        }
+    };
     /** Cleanup touch timer on unmount */
     React.useEffect(() => {
         return () => {
@@ -767,7 +861,9 @@ function DragItem(props) {
             setActive(0);
         }
     }, [dragOver, context.startIndex, index, context.isDragging]);
-    return (jsxRuntime.jsxs(Item, { draggable: !showIndicator, showIndicator: showIndicator, active: active, dragging: context.isDragging && context.startIndex === index, orientation: orientation, "data-drag-index": index, onDragStart: !showIndicator ? dragStartHandler : undefined, onDragOver: dragOverHandler, onDragLeave: dragExitHandler, onDrop: dropHandler, onTouchStart: !showIndicator ? touchStartHandler : undefined, onTouchMove: touchMoveHandler, onTouchEnd: touchEndHandler, onTouchCancel: touchEndHandler, children: [showIndicator && (jsxRuntime.jsx(DragKnob, { draggable: true, onDragStart: dragStartHandler, onTouchStart: touchStartHandler, children: jsxRuntime.jsx(CheckCircle, {}) })), jsxRuntime.jsx(Container$7, { children: children })] }));
+    return (jsxRuntime.jsxs(Item, { draggable: !showIndicator, showIndicator: showIndicator, active: active, dragging: context.isDragging && context.startIndex === index, orientation: orientation, "data-drag-index": index, tabIndex: 0, role: "listitem", "aria-label": context.i18n.replacePlaceholders(context.i18n.itemAriaLabelTemplate, {
+            position: index + 1,
+        }), "aria-grabbed": context.isDragging && context.startIndex === index, onKeyDown: handleKeyDown, onDragStart: !showIndicator ? dragStartHandler : undefined, onDragOver: dragOverHandler, onDragLeave: dragExitHandler, onDrop: dropHandler, onTouchStart: !showIndicator ? touchStartHandler : undefined, onTouchMove: touchMoveHandler, onTouchEnd: touchEndHandler, onTouchCancel: touchEndHandler, children: [showIndicator && (jsxRuntime.jsx(DragKnob, { draggable: true, role: "button", "aria-label": context.i18n.dragHandleAriaLabel, onDragStart: dragStartHandler, onTouchStart: touchStartHandler, onKeyDown: handleKeyDown, tabIndex: -1, children: jsxRuntime.jsx(CheckCircle, {}) })), jsxRuntime.jsx(Container$7, { children: children })] }));
 }
 
 /** Container Component */
@@ -778,6 +874,18 @@ const Container$6 = styled.div `
     flex-wrap: wrap;
     flex-direction: ${(props) => (props.orientation === exports.ORIENTATION.HORIZONTAL ? 'row' : 'column')};
 `;
+/** Visually hidden but accessible to screen readers */
+const VisuallyHidden$1 = styled.div `
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+`;
 /**
  * A drag and drop container component that enables reordering of child elements.
  *
@@ -804,10 +912,37 @@ const Container$6 = styled.div `
  * @returns {JSX.Element} A draggable container with reorderable items
  */
 function DragAndDrop(props) {
-    const { orientation, children, onDrop, showIndicator } = props;
+    const { orientation, children, onDrop, showIndicator, itemAriaLabelTemplate, dragHandleAriaLabel, grabbedAnnouncementTemplate, movedAnnouncementTemplate, droppedAnnouncementTemplate, cancelledAnnouncementTemplate, } = props;
     const [startIndex, setStartIndex] = React.useState(null);
+    const [originalIndex, setOriginalIndex] = React.useState(null);
     const [isDragging, setIsDragging] = React.useState(false);
     const [dragOver, setDragOver] = React.useState(null);
+    const [announcement, setAnnouncement] = React.useState('');
+    const childrenArray = React.Children.toArray(children);
+    const totalItems = childrenArray.length;
+    /**
+     * Replace placeholders in i18n templates
+     */
+    const replacePlaceholders = (template, data) => {
+        var _a, _b, _c, _d, _e, _f;
+        return template
+            .replace(/\{:position\}/g, String((_a = data.position) !== null && _a !== void 0 ? _a : ''))
+            .replace(/\{:grabKey\}/g, (_b = data.grabKey) !== null && _b !== void 0 ? _b : 'Space')
+            .replace(/\{:dropKey\}/g, (_c = data.dropKey) !== null && _c !== void 0 ? _c : 'Space')
+            .replace(/\{:altDropKey\}/g, (_d = data.altDropKey) !== null && _d !== void 0 ? _d : 'Enter')
+            .replace(/\{:cancelKey\}/g, (_e = data.cancelKey) !== null && _e !== void 0 ? _e : 'Escape')
+            .replace(/\{:moveKeys\}/g, (_f = data.moveKeys) !== null && _f !== void 0 ? _f : (orientation === exports.ORIENTATION.VERTICAL ? 'Arrow Up/Down' : 'Arrow Left/Right'));
+    };
+    // i18n configuration object
+    const i18n = {
+        itemAriaLabelTemplate: itemAriaLabelTemplate,
+        dragHandleAriaLabel: dragHandleAriaLabel,
+        grabbedAnnouncementTemplate: grabbedAnnouncementTemplate,
+        movedAnnouncementTemplate: movedAnnouncementTemplate,
+        droppedAnnouncementTemplate: droppedAnnouncementTemplate,
+        cancelledAnnouncementTemplate: cancelledAnnouncementTemplate,
+        replacePlaceholders,
+    };
     /**
      * Drop handler invoked when a draggable item is released.
      * @param index
@@ -817,15 +952,58 @@ function DragAndDrop(props) {
             onDrop === null || onDrop === void 0 ? void 0 : onDrop(startIndex, index);
         }
         setStartIndex(null);
+        setOriginalIndex(null);
         setIsDragging(false);
     };
-    return (jsxRuntime.jsx(DragContext.Provider, { value: { startIndex, setStartIndex, drop, isDragging, setIsDragging, setDragOver }, children: jsxRuntime.jsx(Container$6, { orientation: orientation, children: React.Children.map(children, (child, index) => (jsxRuntime.jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, dragOver: dragOver, children: child }))) }) }));
+    /**
+     * Cancel handler to restore item to original position
+     */
+    const cancel = () => {
+        if (originalIndex !== null && startIndex !== null && startIndex !== originalIndex) {
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(startIndex, originalIndex);
+        }
+        setStartIndex(null);
+        setOriginalIndex(null);
+        setIsDragging(false);
+    };
+    /**
+     * Start grab handler to track original position
+     */
+    const startGrab = (index) => {
+        setStartIndex(index);
+        setOriginalIndex(index);
+        setIsDragging(true);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DragContext.Provider, { value: {
+                    startIndex,
+                    setStartIndex,
+                    drop,
+                    onDrop,
+                    cancel,
+                    startGrab,
+                    isDragging,
+                    setIsDragging,
+                    setDragOver,
+                    i18n,
+                }, children: jsxRuntime.jsx(Container$6, { orientation: orientation, role: "list", children: React.Children.map(childrenArray, (child, index) => (jsxRuntime.jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, dragOver: dragOver, totalItems: totalItems, setAnnouncement: setAnnouncement, children: child }))) }) }), jsxRuntime.jsx(VisuallyHidden$1, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement })] }));
 }
 DragAndDrop.defaultProps = {
     /** Orientation of the list layout */
     orientation: exports.ORIENTATION.VERTICAL,
     /** Whether to display drag indicators for each list item */
     showIndicator: false,
+    /** Default item aria-label template */
+    itemAriaLabelTemplate: 'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop',
+    /** Default drag handle aria-label */
+    dragHandleAriaLabel: 'Drag to reorder',
+    /** Default grabbed announcement template */
+    grabbedAnnouncementTemplate: 'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel',
+    /** Default moved announcement template */
+    movedAnnouncementTemplate: 'Item moved to position {:position}',
+    /** Default dropped announcement template */
+    droppedAnnouncementTemplate: 'Item dropped at position {:position}',
+    /** Default cancelled announcement template */
+    cancelledAnnouncementTemplate: 'Drag cancelled, item restored to original position',
 };
 
 // Label component for the ChipInput
@@ -946,6 +1124,22 @@ const ErrorContainer$4 = styled.div `
     line-height: 14px;
     margin-left: 3px;
 `;
+// Visually hidden but accessible to screen readers
+const VisuallyHidden = styled.ul `
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+
+    & li {
+        list-style: none;
+    }
+`;
 /**
  * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.
  * @component
@@ -964,9 +1158,21 @@ function ChipInput(props) {
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(props.value);
     const InputRef = React.useRef(null);
+    const [announcement, setAnnouncement] = React.useState('');
+    const errorId = React.useId();
+    /**
+     * Replace {:label} placeholder in template string
+     */
+    const replacePlaceholder = (template, label) => {
+        if (!template)
+            return undefined;
+        return template.replace(/\{:label\}/g, label);
+    };
     // Sync internal value with props.value
     React.useEffect(() => {
-        setValue(props.value);
+        if (Array.isArray(props.value)) {
+            setValue(props.value);
+        }
     }, [props.value]);
     /**
      * Update the chip values and notify changes.
@@ -1004,6 +1210,7 @@ function ChipInput(props) {
             const newValue = [...value, text.trim()];
             updateValue(newValue);
             setText('');
+            setAnnouncement(replacePlaceholder(props.addedAnnouncementTemplate, text.trim()));
         }
     };
     /**
@@ -1013,6 +1220,7 @@ function ChipInput(props) {
     const removeChip = (chipToRemove) => {
         const newValue = value.filter((chip) => chip !== chipToRemove);
         updateValue(newValue);
+        setAnnouncement(replacePlaceholder(props.removedAnnouncementTemplate, chipToRemove));
     };
     /**
      * Moves a chip from one position to another.
@@ -1030,7 +1238,7 @@ function ChipInput(props) {
         updateValue(newItems);
     };
     // Render the component
-    return (jsxRuntime.jsxs(Label$6, { text: text, touched: touched, errorText: props.errorText, children: [jsxRuntime.jsx("input", Object.assign({}, props, { ref: InputRef, type: "text", value: text, onChange: handleChange, onFocus: handleFocus, onKeyUp: handleKeyUp, required: props.required && value.length === 0 })), jsxRuntime.jsx("div", { children: (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsxRuntime.jsx(DragAndDrop, { orientation: exports.ORIENTATION.HORIZONTAL, onDrop: onDrop, children: value.map((chip) => (jsxRuntime.jsx(Chip, { label: chip, onCloseClick: () => removeChip(chip) }, chip))) })) }), jsxRuntime.jsx("span", { children: props.label }), props.errorText && jsxRuntime.jsx(ErrorContainer$4, { children: props.errorText })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Label$6, { text: text, touched: touched, errorText: props.errorText, children: [jsxRuntime.jsx("input", Object.assign({}, props, { ref: InputRef, value: text, onChange: handleChange, onFocus: handleFocus, onKeyUp: handleKeyUp, required: props.required && value.length === 0, "aria-required": props.required, "aria-invalid": !!props.errorText, "aria-describedby": props.errorText ? errorId : undefined })), jsxRuntime.jsx("div", { children: (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsxRuntime.jsx(DragAndDrop, { orientation: exports.ORIENTATION.HORIZONTAL, onDrop: onDrop, children: value.map((chip) => (jsxRuntime.jsx(Chip, { label: chip, onCloseClick: () => removeChip(chip), closeButtonAriaLabel: replacePlaceholder(props.closeButtonAriaLabel, chip) }, chip))) })) }), jsxRuntime.jsx("span", { children: props.label }), props.errorText && jsxRuntime.jsx(ErrorContainer$4, { id: errorId, children: props.errorText })] }), jsxRuntime.jsx(VisuallyHidden, { "aria-live": "polite", "aria-atomic": "true", children: announcement })] }));
 }
 ChipInput.propTypes = {
     /** Label for the field */
@@ -1041,9 +1249,18 @@ ChipInput.propTypes = {
     value: PropTypes.arrayOf(PropTypes.string),
     /** Callback when chips change */
     onChange: PropTypes.func,
+    /** Aria label for the close button on chip. Defaults to "Remove {label}" */
+    closeButtonAriaLabel: PropTypes.string,
+    /** Announcement text when a chip is added. Defaults to "{label} was added" */
+    addedAnnouncementTemplate: PropTypes.string,
+    /** Announcement text when a chip is removed. Defaults to "{label} was removed" */
+    removedAnnouncementTemplate: PropTypes.string,
 };
 ChipInput.defaultProps = {
     value: [],
+    closeButtonAriaLabel: 'Remove {:label}',
+    addedAnnouncementTemplate: '{:label} was added',
+    removedAnnouncementTemplate: '{:label} was removed',
 };
 
 /** Enums for layer position on screen. */
@@ -1115,6 +1332,32 @@ const KEY_CODES$1 = {
  * This way we need not worry about the z-index and can freely keep on creating
  * new layers. The staring layer z-index is 10000. Leaving enough z-index for the
  * user if they desires so.
+ *
+ * @important Usage Pattern
+ * To avoid creating duplicate layers (especially in React Strict Mode or Next.js),
+ * always call `renderLayer` only once - either in a lifecycle method (like `componentDidUpdate`)
+ * or in an imperative method (like `open()`).
+ *
+ * @example
+ * // ❌ Don't call renderLayer in render() method
+ * render() {
+ *   if (this.state.show) {
+ *     const [Component, closeFn] = LayerManager.renderLayer({ ... }); // Creates new layer on every render
+ *     return <Component />;
+ *   }
+ * }
+ *
+ * @example
+ * // ✅ Do call renderLayer once in a method and store the component
+ * open() {
+ *   const [Component, closeFn] = LayerManager.renderLayer({ ... });
+ *   this.setState({ LayerComponent: Component });
+ * }
+ *
+ * render() {
+ *   const { LayerComponent } = this.state;
+ *   return LayerComponent ? <LayerComponent /> : null;
+ * }
  */
 class LayerManager {
     /**
@@ -1154,59 +1397,79 @@ class LayerManager {
          * @param config
          */
         this.renderLayer = (config) => {
+            // SSR guard
+            if (typeof document === 'undefined') {
+                return [() => null, () => { }];
+            }
             // Merge default config with the provided config.
             const layerConfig = Object.assign(Object.assign({}, defaultConfig), config);
             // Get the z-index for the new layer
             const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : this.nextIndex++;
-            // Prepare the div on DOM where the new layer will be mounted.
-            const divElement = document.createElement('div');
-            divElement.setAttribute('id', `nf-layer-manager-${currentIndex}`);
-            document.body.appendChild(divElement);
-            // Add layer to stack.
-            const currentLayer = {
-                id: `nf-layer-manager-${currentIndex}`,
-                config: layerConfig,
-                element: divElement,
-            };
-            this.layers.push(currentLayer);
-            const overlayClickHandler = (layer) => () => {
-                if (layer.config.closeOnOverlayClick !== false) {
+            // Create a unique ID for tracking this layer
+            const layerId = `nf-layer-manager-${currentIndex}`;
+            const overlayClickHandler = () => {
+                const layer = this.layers.find((l) => l.id === layerId);
+                if (layer && layer.config.closeOnOverlayClick !== false) {
                     this.unmount(layer);
                 }
             };
+            const closeFn = (resp) => {
+                const layer = this.layers.find((l) => l.id === layerId);
+                if (layer) {
+                    this.unmount(layer, resp);
+                }
+            };
             // Return callback which will trigger the un-mount.
             return [
-                // Render the layer and then add `nf-layer-enter` class to
-                // the div created above.
-                // This class will help component in triggering the entry animation.
-                function TestLayer() {
+                () => {
+                    const [divElement, setDivElement] = React.useState(null);
                     React.useEffect(() => {
-                        // The delay is introduced to enable entry animation on Firefox.
-                        // Somehow on Firefox, useEffect is triggered before the component
-                        // is rendered it seems.
+                        // Create the div element only once when component mounts
+                        const div = document.createElement('div');
+                        div.setAttribute('id', layerId);
+                        document.body.appendChild(div);
+                        // Add layer to stack
+                        const currentLayer = {
+                            id: layerId,
+                            config: layerConfig,
+                            element: div,
+                        };
+                        this.layers.push(currentLayer);
+                        setDivElement(div);
+                        // Add entry animation class after a short delay
                         setTimeout(() => {
-                            divElement.setAttribute('class', 'nf-layer-enter');
+                            div.setAttribute('class', 'nf-layer-enter');
                         }, 10);
-                        // Cleanup function
+                        // Cleanup function - remove div when component unmounts
                         return () => {
-                            document.body.removeChild(divElement);
+                            if (document.body.contains(div)) {
+                                document.body.removeChild(div);
+                            }
+                            // Remove from layers array
+                            const index = this.layers.findIndex((layer) => layer.id === layerId);
+                            if (index !== -1) {
+                                this.layers.splice(index, 1);
+                            }
                         };
-                    }, []);
-                    return ReactDOM.createPortal(jsxRuntime.jsx(Container$5, Object.assign({ onClick: overlayClickHandler(currentLayer), zIndex: currentIndex }, layerConfig, { children: layerConfig.component })), divElement);
-                },
-                (resp) => {
-                    this.unmount(currentLayer, resp);
+                    }, []); // Empty dependency array - run only once
+                    if (!divElement) {
+                        return null;
+                    }
+                    return ReactDOM.createPortal(jsxRuntime.jsx(Container$5, Object.assign({ onClick: overlayClickHandler, zIndex: currentIndex }, layerConfig, { children: layerConfig.component })), divElement);
                 },
+                closeFn,
             ];
         };
-        document === null || document === void 0 ? void 0 : document.body.addEventListener('keyup', (e) => {
-            if (this.layers.length && e.keyCode === KEY_CODES$1.ESC) {
-                const lastLayer = this.layers.slice(-1)[0];
-                if (lastLayer.config.closeOnEsc !== false) {
-                    this.unmount(lastLayer);
+        if (typeof document !== 'undefined') {
+            document.body.addEventListener('keyup', (e) => {
+                if (this.layers.length && e.keyCode === KEY_CODES$1.ESC) {
+                    const lastLayer = this.layers.slice(-1)[0];
+                    if (lastLayer.config.closeOnEsc !== false) {
+                        this.unmount(lastLayer);
+                    }
                 }
-            }
-        });
+            });
+        }
     }
 }
 // Return the instance of the class to create a Singleton.
@@ -1234,10 +1497,23 @@ class Dialog extends React.Component {
         super(...arguments);
         this.state = {
             show: false,
+            LayerComponent: undefined,
         };
         this.open = (closeCallback) => {
+            const _a = this.props, { closeOnEsc, closeOnOverlayClick, children } = _a, rest = __rest(_a, ["closeOnEsc", "closeOnOverlayClick", "children"]);
+            const [Component, closeFn] = LayerManager$1.renderLayer({
+                exitDelay: 300,
+                overlay: true,
+                closeOnEsc,
+                closeCallback: this.closeCallback,
+                closeOnOverlayClick,
+                position: LAYER_POSITION.DIALOG,
+                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
+            });
+            this.closeDialog = closeFn;
             this.setState({
                 show: true,
+                LayerComponent: Component,
             });
             this.onCloseFn = closeCallback;
         };
@@ -1249,6 +1525,7 @@ class Dialog extends React.Component {
             var _a;
             this.setState({
                 show: false,
+                LayerComponent: undefined,
             });
             (_a = this.onCloseFn) === null || _a === void 0 ? void 0 : _a.call(this, resp);
         };
@@ -1257,19 +1534,9 @@ class Dialog extends React.Component {
         return this.state.show !== nextState.show;
     }
     render() {
-        const _a = this.props, { closeOnEsc, closeOnOverlayClick, children } = _a, rest = __rest(_a, ["closeOnEsc", "closeOnOverlayClick", "children"]);
-        if (this.state.show) {
-            const [Component, closeFn] = LayerManager$1.renderLayer({
-                exitDelay: 300,
-                overlay: true,
-                closeOnEsc,
-                closeCallback: this.closeCallback,
-                closeOnOverlayClick,
-                position: LAYER_POSITION.DIALOG,
-                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
-            });
-            this.closeDialog = closeFn;
-            return jsxRuntime.jsx(Component, {});
+        const { LayerComponent } = this.state;
+        if (this.state.show && LayerComponent) {
+            return jsxRuntime.jsx(LayerComponent, {});
         }
         else {
             return null;
@@ -1300,7 +1567,7 @@ class AlertDialog extends React.Component {
         this.close = () => this.dialog.current.close();
     }
     render() {
-        return (jsxRuntime.jsxs(Dialog, Object.assign({}, this.props.dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [this.props.header && jsxRuntime.jsx(Header$1, { children: this.props.header }), jsxRuntime.jsx(Body$1, { children: this.props.body }), jsxRuntime.jsx(Footer$1, { children: jsxRuntime.jsx(Button$2, { onClick: this.close, children: this.props.buttonText }) })] })));
+        return (jsxRuntime.jsxs(Dialog, Object.assign({}, this.props.dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [this.props.header && jsxRuntime.jsx(Header$1, { children: this.props.header }), jsxRuntime.jsx(Body$1, { children: this.props.body }), jsxRuntime.jsx(Footer$1, { children: jsxRuntime.jsx(StyledButton, { onClick: this.close, children: this.props.buttonText }) })] })));
     }
 }
 AlertDialog.propTypes = {
@@ -1339,7 +1606,7 @@ class ConfirmDialog extends React.Component {
     }
     render() {
         const { header, body, yesText, noText, dialogProps } = this.props;
-        return (jsxRuntime.jsxs(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [header && jsxRuntime.jsx(Header$1, { children: header }), jsxRuntime.jsx(Body$1, { children: body }), jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsx(Button$2, { onClick: this.cancel, children: noText }), jsxRuntime.jsx(ActionButton, { onClick: this.confirm, children: yesText })] })] })));
+        return (jsxRuntime.jsxs(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [header && jsxRuntime.jsx(Header$1, { children: header }), jsxRuntime.jsx(Body$1, { children: body }), jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsx(StyledButton, { onClick: this.cancel, children: noText }), jsxRuntime.jsx(ActionButton, { onClick: this.confirm, children: yesText })] })] })));
     }
 }
 ConfirmDialog.propTypes = {
@@ -1362,7 +1629,6 @@ ConfirmDialog.defaultProps = {
 const Label$5 = styled.label `
     display: inline-flex;
     flex-direction: column;
-    flex: 1;
     position: relative;
     margin: 10px 5px;
 `;
@@ -1503,7 +1769,6 @@ Input$4.propTypes = {
 const Label$4 = styled.label `
     display: inline-flex;
     flex-direction: column;
-    flex: 1;
     position: relative;
     margin: 10px 5px;
 `;
@@ -1642,7 +1907,6 @@ TextArea.propTypes = {
 const Label$3 = styled.label `
     display: inline-flex;
     flex-direction: column;
-    flex: 1;
     position: relative;
     margin: 10px 5px;
     pointer-events: none;
@@ -1898,7 +2162,7 @@ function Checkbox(props) {
             }
         }
     }, [props.indeterminate]);
-    return (jsxRuntime.jsxs(Label$2, { children: [jsxRuntime.jsx(Input$3, Object.assign({}, props, { ref: ref, type: "checkbox" })), jsxRuntime.jsx("span", { children: props.label })] }));
+    return (jsxRuntime.jsxs(Label$2, { children: [jsxRuntime.jsx(Input$3, Object.assign({}, props, { ref: ref, type: "checkbox", "aria-checked": props.indeterminate ? 'mixed' : props.checked })), jsxRuntime.jsx("span", { children: props.label })] }));
 }
 Checkbox.propTypes = {
     /** Label for the field */
@@ -2521,7 +2785,7 @@ class PromptDialog extends React.Component {
     }
     render() {
         const { header, body, inputProps, submitText, cancelText, dialogProps } = this.props;
-        return (jsxRuntime.jsx(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: jsxRuntime.jsxs("form", { onSubmit: this.submit, children: [header && jsxRuntime.jsx(Header$1, { children: header }), jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(BodyText, { children: body }), jsxRuntime.jsx("div", { style: { display: 'flex' }, children: jsxRuntime.jsx(Input$4, Object.assign({ style: { width: 'auto', flex: '1' }, value: this.state.value, onChange: this.valueChange }, inputProps)) })] }), jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsx(Button$2, { type: "button", onClick: this.cancel, children: cancelText }), jsxRuntime.jsx(ActionButton, { children: submitText })] })] }) })));
+        return (jsxRuntime.jsx(Dialog, Object.assign({}, dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: jsxRuntime.jsxs("form", { onSubmit: this.submit, children: [header && jsxRuntime.jsx(Header$1, { children: header }), jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(BodyText, { children: body }), jsxRuntime.jsx("div", { style: { display: 'flex' }, children: jsxRuntime.jsx(Input$4, Object.assign({ style: { width: 'auto', flex: '1' }, value: this.state.value, onChange: this.valueChange }, inputProps)) })] }), jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsx(StyledButton, { type: "button", onClick: this.cancel, children: cancelText }), jsxRuntime.jsx(ActionButton, { children: submitText })] })] }) })));
     }
 }
 PromptDialog.propTypes = {
@@ -3202,56 +3466,83 @@ class Notification {
         /**
          * Adds a notification
          *
-         * @param position
-         * @param options
+         * @param position - The position where the notification should appear
+         * @param options - Configuration options for the notification
+         * @returns The notification ID or a promise that resolves to the notification ID
          */
         this.add = (position, options) => {
-            let notification;
             if (!this.containers.has(position)) {
-                const div = document === null || document === void 0 ? void 0 : document.createElement('div');
-                const ref = React.createRef();
+                /** Callback ref to capture the NotificationManager instance when it mounts */
+                const refCallback = (instance) => {
+                    if (instance) {
+                        const container = this.containers.get(position);
+                        if (container) {
+                            container.manager = instance;
+                        }
+                    }
+                };
                 const [Component] = LayerManager$1.renderLayer({
                     closeOnEsc: false,
                     closeOnOverlayClick: false,
                     position: positionMap[position],
                     alwaysOnTop: true,
-                    component: (jsxRuntime.jsx(NotificationManager, { ref: ref, position: position, onEmpty: () => this.destroy(position) })),
+                    component: (jsxRuntime.jsx(NotificationManager, { ref: refCallback, position: position, onEmpty: () => this.destroy(position) })),
                 });
+                // Create a div to mount the Component
+                const div = document.createElement('div');
+                document.body.appendChild(div);
+                const root = client.createRoot(div);
                 this.containers.set(position, {
-                    ref,
-                    element: div,
-                    root: client.createRoot(div),
+                    manager: null,
+                    root,
+                    div,
                 });
+                // Render the Component which will trigger the LayerManager's useEffect
                 ReactDOM.flushSync(() => {
-                    this.containers.get(position).root.render(jsxRuntime.jsx(Component, {}));
+                    root.render(jsxRuntime.jsx(Component, {}));
                 });
-                notification = ref;
             }
-            else {
-                notification = this.containers.get(position).ref;
+            const container = this.containers.get(position);
+            if (container && container.manager) {
+                return container.manager.add(options);
             }
-            return notification.current.add(options);
+            // If manager is not ready yet, wait a bit and retry
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    const container = this.containers.get(position);
+                    if (container && container.manager) {
+                        resolve(container.manager.add(options));
+                    }
+                }, 10);
+            });
         };
         /**
          * Removes a notification
          *
-         * @param position
-         * @param id
+         * @param position - The position of the notification container
+         * @param id - The unique ID of the notification to remove
          */
         this.remove = (position, id) => {
-            if (this.containers.has(position)) {
-                this.containers.get(position).ref.current.remove(id);
+            const container = this.containers.get(position);
+            if (container && container.manager) {
+                container.manager.remove(id);
             }
         };
         /**
-         * Destroys entire stack of notifications.
+         * Destroys entire stack of notifications at a position.
+         * Unmounts the React root and cleans up DOM elements.
          *
-         * @param position
+         * @param position - The position of the notification container to destroy
          */
         this.destroy = (position) => {
-            const notification = this.containers.get(position);
-            notification.root.unmount();
-            this.containers.delete(position);
+            const container = this.containers.get(position);
+            if (container) {
+                container.root.unmount();
+                if (document.body.contains(container.div)) {
+                    document.body.removeChild(container.div);
+                }
+                this.containers.delete(position);
+            }
         };
     }
 }
@@ -3700,7 +3991,7 @@ exports.AccordionStepFooter = AccordionStepFooter;
 exports.ActionButton = ActionButton;
 exports.AlertDialog = AlertDialog;
 exports.Badge = Badge;
-exports.Button = Button$2;
+exports.Button = StyledButton;
 exports.Card = Card;
 exports.CardBody = Body$1;
 exports.CardFooter = Footer$1;