@bigtablet/design-system 3.14.1 → 3.14.2

package/dist/index.js

@@ -121,6 +121,15 @@ function unlockBodyScroll() {
     body.dataset[COUNTER] = String(remaining);
   }
 }
+
+// src/utils/spring-motion.ts
+function springEnterFrom(reduced, transform) {
+  if (reduced) return {};
+  return { from: transform === void 0 ? { opacity: 0 } : { opacity: 0, transform } };
+}
+var OVERLAY_PANEL_CLOSED_TRANSFORM = "scale(0.96) translateY(-4px)";
+var OVERLAY_PANEL_OPEN_TRANSFORM = "scale(1) translateY(0px)";
+var OVERLAY_SPRING_CONFIG = { tension: 280, friction: 28, clamp: true };
 var useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
 // src/utils/use-anchored-position.ts
@@ -368,7 +377,10 @@ function useSpringPresence({
 }) {
   const reduced = useReducedMotion();
   return useSpring({
-    from: { opacity: 0, transform: from },
+    // reduced-motion 에서는 `from` 을 생략한다 - 주면 첫 프레임에 from 이 DOM 에 커밋된 뒤
+    // immediate 가 목표값으로 점프해 모션 대신 한 프레임 깜빡임이 남는다. Toast 는 항상
+    // visible=true 로 마운트하므로 이 경로를 무조건 탄다. 자세한 근거는 springEnterFrom JSDoc.
+    ...springEnterFrom(reduced, from),
     to: {
       opacity: visible ? 1 : 0,
       transform: visible ? "translateY(0px)" : from
@@ -2815,18 +2827,22 @@ var AlertModal = ({
   if (isOpen && !shouldRender) setShouldRender(true);
   const reduced = useReducedMotion();
   const overlayStyle = useSpring({
-    opacity: isOpen ? 1 : 0,
+    ...springEnterFrom(reduced),
+    to: { opacity: isOpen ? 1 : 0 },
     immediate: reduced,
-    config: { tension: 280, friction: 28, clamp: !isOpen },
+    config: OVERLAY_SPRING_CONFIG,
     onRest: (result) => {
       if (!isOpen && result.finished) setShouldRender(false);
     }
   });
   const panelStyle = useSpring({
-    opacity: isOpen ? 1 : 0,
-    transform: isOpen ? "scale(1) translateY(0px)" : "scale(0.96) translateY(-4px)",
+    ...springEnterFrom(reduced, OVERLAY_PANEL_CLOSED_TRANSFORM),
+    to: {
+      opacity: isOpen ? 1 : 0,
+      transform: isOpen ? OVERLAY_PANEL_OPEN_TRANSFORM : OVERLAY_PANEL_CLOSED_TRANSFORM
+    },
     immediate: reduced,
-    config: { tension: 280, friction: 28, clamp: !isOpen }
+    config: OVERLAY_SPRING_CONFIG
   });
   React16.useEffect(() => {
     if (!shouldRender) return;
@@ -2838,7 +2854,6 @@ var AlertModal = ({
   const cancelVariant = "outline";
   const modalClassName = cn("alert_modal", `alert_variant_${variant}`);
   return createPortal(
-    // biome-ignore lint/a11y/noStaticElementInteractions: modal overlay pattern
     /* @__PURE__ */ jsx(
       animated.div,
       {
@@ -4921,9 +4936,10 @@ var Modal = ({
   if (open && !shouldRender) setShouldRender(true);
   const reduced = useReducedMotion();
   const overlayStyle = useSpring({
-    opacity: open ? 1 : 0,
+    ...springEnterFrom(reduced),
+    to: { opacity: open ? 1 : 0 },
     immediate: reduced,
-    config: { tension: 280, friction: 28, clamp: !open },
+    config: OVERLAY_SPRING_CONFIG,
     onRest: (result) => {
       if (open || !result.finished) return;
       setShouldRender(false);
@@ -4931,10 +4947,13 @@ var Modal = ({
     }
   });
   const panelStyle = useSpring({
-    opacity: open ? 1 : 0,
-    transform: open ? "scale(1) translateY(0px)" : "scale(0.96) translateY(-4px)",
+    ...springEnterFrom(reduced, OVERLAY_PANEL_CLOSED_TRANSFORM),
+    to: {
+      opacity: open ? 1 : 0,
+      transform: open ? OVERLAY_PANEL_OPEN_TRANSFORM : OVERLAY_PANEL_CLOSED_TRANSFORM
+    },
     immediate: reduced,
-    config: { tension: 280, friction: 28, clamp: !open }
+    config: OVERLAY_SPRING_CONFIG
   });
   React16.useEffect(() => {
     if (!open) return;
@@ -4983,6 +5002,9 @@ var Modal = ({
               // 늘어나는 정도의 비용이다.
               // 다만 초기 포커스 대상에서는 제외한다 - 안쪽에 첫 입력이 있는데 빈 wrapper 에
               // 포커스가 놓이면 열자마자 어디에 있는지 알 수 없다.
+              // 스크롤 가능한 영역은 키보드로도 스크롤할 수 있어야 한다 (WCAG 2.1.1) - 포커스
+              // 가능해야 화살표 키가 먹는다.
+              // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable region needs keyboard scroll
               /* @__PURE__ */ jsx("div", { className: "modal_body", tabIndex: 0, "data-focus-trap-skip-autofocus": "", children: content.children }),
               content.footer && /* @__PURE__ */ jsx("div", { className: cn("modal_footer", `modal_footer_${footerAlign}`), children: content.footer })
             ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "3.14.1",
+	"version": "3.14.2",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",
@@ -49,6 +49,7 @@
 		"lint:css": "stylelint 'src/ui/**/*.scss' 'src/styles/**/*.scss' 'src/vanilla/**/*.scss'",
 		"check:css-vars": "scripts/check-css-vars.sh",
 		"check:prose": "scripts/check-prose-headings.sh",
+		"check:defaults": "python3 scripts/check-prop-defaults.py",
 		"size": "size-limit",
 		"prepare": "husky"
 	},