@gtivr4/a1-design-system-react 0.12.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtivr4/a1-design-system-react",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "React components for the A1 token-driven design system.",
   "type": "module",
   "main": "./src/index.js",

package/src/components/choice-group/choice-group.css

@@ -138,7 +138,6 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--a1-cg-gap);
-  margin-top: var(--a1-cg-items-top-gap);
 }
 
 /* Fixed column count when --a1-cg-columns is set */

package/src/components/sticky-actions/StickyActions.d.ts

@@ -11,4 +11,11 @@ export interface StickyActionsProps extends Omit<HTMLAttributes<HTMLDivElement>,
   children?: ReactNode;
 }
 
+/**
+ * Fixed bottom action bar for flows, wizards, and multi-step forms.
+ *
+ * Renders a position:fixed bar at the bottom of the viewport and an invisible
+ * spacer sibling in document flow. The spacer height is measured via ResizeObserver
+ * and kept in sync automatically — no manual bottom padding needed on the page.
+ */
 export declare function StickyActions(props: StickyActionsProps): JSX.Element;

package/src/components/sticky-actions/StickyActions.jsx

@@ -1,9 +1,21 @@
+import { useEffect, useRef, useState } from "react";
 import "./sticky-actions.css";
 
 const VALID_CONTENT_WIDTHS = ["xs", "sm", "md", "lg", "xl", "2xl"];
 
 export function StickyActions({ contentWidth, className = "", children, ...props }) {
   const resolvedWidth = VALID_CONTENT_WIDTHS.includes(contentWidth) ? contentWidth : null;
+  const barRef = useRef(null);
+  const [offset, setOffset] = useState(0);
+
+  useEffect(() => {
+    if (!barRef.current) return;
+    const ro = new ResizeObserver(([entry]) => {
+      setOffset(entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height);
+    });
+    ro.observe(barRef.current);
+    return () => ro.disconnect();
+  }, []);
 
   const innerClass = [
     "a1-sticky-actions__inner",
@@ -11,10 +23,17 @@ export function StickyActions({ contentWidth, className = "", children, ...props
   ].filter(Boolean).join(" ");
 
   return (
-    <div className={["a1-sticky-actions", className].filter(Boolean).join(" ")} {...props}>
-      <div className={innerClass}>
-        {children}
+    <>
+      {/* Spacer holds the bar's height in document flow so content above is
+          never hidden. Height is measured and kept in sync via ResizeObserver. */}
+      <div style={{ height: offset }} aria-hidden="true" />
+      <div
+        ref={barRef}
+        className={["a1-sticky-actions", className].filter(Boolean).join(" ")}
+        {...props}
+      >
+        <div className={innerClass}>{children}</div>
       </div>
-    </div>
+    </>
   );
 }

package/src/components/sticky-actions/sticky-actions.css

@@ -5,9 +5,6 @@
   z-index: var(--component-sticky-actions-z-index);
   background: var(--component-sticky-actions-background);
   border-block-start: var(--component-sticky-actions-border-width) solid var(--semantic-color-border-subtle);
-  padding-block-start: var(--component-sticky-actions-padding-block);
-  padding-block-end: calc(var(--component-sticky-actions-padding-block) + env(safe-area-inset-bottom, 0px));
-  padding-inline: var(--component-sticky-actions-padding-inline);
   box-sizing: border-box;
 }
 
@@ -15,6 +12,11 @@
   display: flex;
   flex-direction: column;
   gap: var(--component-sticky-actions-gap);
+  /* Padding lives here so max-width + margin-inline: auto center correctly
+     against the full viewport width, not the outer padded content area. */
+  padding-inline: var(--component-sticky-actions-padding-inline);
+  padding-block-start: var(--component-sticky-actions-padding-block);
+  padding-block-end: calc(var(--component-sticky-actions-padding-block) + env(safe-area-inset-bottom, 0px));
   width: 100%;
   margin-inline: auto;
   box-sizing: border-box;