@hjmds/react 1.11.0 → 1.12.0

package/dist/styles.css

@@ -245,6 +245,9 @@
 /* 라벨은 자르지 않고 두 줄까지 접는다(buttonRecipe.label). 잘린 행동 라벨은 무엇을 하는
    버튼인지 잃고, 무제한 줄바꿈은 하단 CTA 행 같은 남의 레이아웃을 밀어낸다. */
 .hjm-button__label { min-inline-size: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--hjm-button-label-lines, 2); overflow: hidden; }
+/* Keep the original content in layout for stable width; the sole visible busy cue sits at the frame center. */
+.hjm-button[data-state="loading"] > :not(.hjm-button__loading-indicator) { opacity: 0; }
+.hjm-button__loading-indicator { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
 /* 큰 글자 설정에서는 상한을 푼다 — 사용자가 키운 글자를 잘라 내용을 숨기면 WCAG 1.4.4다. */
 [data-large-text="true"] .hjm-button__label { display: block; overflow: visible; }
 .hjm-button__spinner,
@@ -1230,6 +1233,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 /* Provider guideline colors cannot follow the theme without failing provider review.
    HJM owns geometry and an outer focus ring that remains visible on every brand fill. */
 .hjm-auth-provider-button {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1247,6 +1251,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   cursor: pointer;
 }
 .hjm-auth-provider-button:disabled { cursor: default; opacity: var(--hjm-opacity-disabled, 0.5); }
+.hjm-auth-provider-button[data-busy="true"]:disabled { opacity: 1; }
 .hjm-auth-provider-button:focus-visible {
   outline: 2px solid var(--hjm-color-focus);
   outline-offset: var(--hjm-provider-focus-offset);
@@ -1260,6 +1265,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   color: var(--hjm-provider-content);
 }
 .hjm-auth-provider-button__label { min-inline-size: 0; overflow-wrap: anywhere; }
+.hjm-auth-provider-button[data-busy="true"] > :not(.hjm-auth-provider-button__loading-indicator) { opacity: 0; }
+.hjm-auth-provider-button__loading-indicator { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
 .hjm-auth-provider-button__spinner {
   flex: 0 0 auto;
   inline-size: 1em;
@@ -2155,6 +2162,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-select__native { appearance: none; padding-inline-end: calc(var(--hjm-space-lg) + var(--hjm-space-sm)); cursor: pointer; }
 .hjm-select__anchor { position: relative; min-inline-size: 0; }
 .hjm-select__trigger { inline-size: 100%; justify-content: space-between; gap: var(--hjm-space-sm); color: var(--hjm-color-text); font: inherit; text-align: start; cursor: pointer; }
+.hjm-select__trigger[data-busy="true"] { position: relative; }
+.hjm-select__trigger[data-busy="true"] > :not(.hjm-select__busy-overlay) { opacity: 0; }
+.hjm-select__busy-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
 .hjm-select__trigger:disabled { cursor: not-allowed; }
 .hjm-select__trigger[aria-disabled="true"] { cursor: progress; }
 .hjm-select__leading, .hjm-select__option-leading { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--hjm-color-text-muted); }

package/dist/styles.layered.css

@@ -246,6 +246,9 @@
 /* 라벨은 자르지 않고 두 줄까지 접는다(buttonRecipe.label). 잘린 행동 라벨은 무엇을 하는
    버튼인지 잃고, 무제한 줄바꿈은 하단 CTA 행 같은 남의 레이아웃을 밀어낸다. */
 .hjm-button__label { min-inline-size: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--hjm-button-label-lines, 2); overflow: hidden; }
+/* Keep the original content in layout for stable width; the sole visible busy cue sits at the frame center. */
+.hjm-button[data-state="loading"] > :not(.hjm-button__loading-indicator) { opacity: 0; }
+.hjm-button__loading-indicator { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
 /* 큰 글자 설정에서는 상한을 푼다 — 사용자가 키운 글자를 잘라 내용을 숨기면 WCAG 1.4.4다. */
 [data-large-text="true"] .hjm-button__label { display: block; overflow: visible; }
 .hjm-button__spinner,
@@ -1231,6 +1234,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 /* Provider guideline colors cannot follow the theme without failing provider review.
    HJM owns geometry and an outer focus ring that remains visible on every brand fill. */
 .hjm-auth-provider-button {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1248,6 +1252,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   cursor: pointer;
 }
 .hjm-auth-provider-button:disabled { cursor: default; opacity: var(--hjm-opacity-disabled, 0.5); }
+.hjm-auth-provider-button[data-busy="true"]:disabled { opacity: 1; }
 .hjm-auth-provider-button:focus-visible {
   outline: 2px solid var(--hjm-color-focus);
   outline-offset: var(--hjm-provider-focus-offset);
@@ -1261,6 +1266,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   color: var(--hjm-provider-content);
 }
 .hjm-auth-provider-button__label { min-inline-size: 0; overflow-wrap: anywhere; }
+.hjm-auth-provider-button[data-busy="true"] > :not(.hjm-auth-provider-button__loading-indicator) { opacity: 0; }
+.hjm-auth-provider-button__loading-indicator { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
 .hjm-auth-provider-button__spinner {
   flex: 0 0 auto;
   inline-size: 1em;
@@ -2156,6 +2163,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-select__native { appearance: none; padding-inline-end: calc(var(--hjm-space-lg) + var(--hjm-space-sm)); cursor: pointer; }
 .hjm-select__anchor { position: relative; min-inline-size: 0; }
 .hjm-select__trigger { inline-size: 100%; justify-content: space-between; gap: var(--hjm-space-sm); color: var(--hjm-color-text); font: inherit; text-align: start; cursor: pointer; }
+.hjm-select__trigger[data-busy="true"] { position: relative; }
+.hjm-select__trigger[data-busy="true"] > :not(.hjm-select__busy-overlay) { opacity: 0; }
+.hjm-select__busy-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
 .hjm-select__trigger:disabled { cursor: not-allowed; }
 .hjm-select__trigger[aria-disabled="true"] { cursor: progress; }
 .hjm-select__leading, .hjm-select__option-leading { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--hjm-color-text-muted); }

package/dist/supplemental-navigation.js

@@ -101,6 +101,6 @@ export const LoadMore = forwardRef(function LoadMore({ descriptor, mode = loadMo
         return () => observer.disconnect();
     }, [descriptor.state, intersectionRoot, mode, request, rootMargin]);
     const { state, labels } = descriptor;
-    return (_jsxs("div", { ...props, ref: ref, className: classNames("hjm-load-more", className), "data-mode": mode, "data-density": density, "data-state": state.status, "aria-busy": state.status === "loading" || undefined, children: [_jsx("span", { ref: sentinelRef, className: "hjm-load-more__sentinel", "aria-hidden": "true" }), state.status === "ready" ? (_jsx("button", { type: "button", className: "hjm-load-more__trigger", onClick: () => void request(state, "manual"), children: labels.loadMore })) : state.status === "loading" ? (_jsxs("div", { className: "hjm-load-more__status", role: "status", children: [_jsx("span", { className: "hjm-load-more__spinner", "aria-hidden": "true" }), labels.loading] })) : state.status === "error" ? (_jsxs("div", { className: "hjm-load-more__error", children: [_jsx("span", { role: "alert", children: state.message }), _jsx("button", { type: "button", className: "hjm-load-more__trigger", onClick: () => void request(state, "retry"), children: labels.retry })] })) : (_jsx("div", { className: "hjm-load-more__end", children: labels.complete }))] }));
+    return (_jsxs("div", { ...props, ref: ref, className: classNames("hjm-load-more", className), "data-mode": mode, "data-density": density, "data-state": state.status, "aria-busy": state.status === "loading" || undefined, children: [_jsx("span", { ref: sentinelRef, className: "hjm-load-more__sentinel", "aria-hidden": "true" }), state.status === "ready" ? (_jsx("button", { type: "button", className: "hjm-load-more__trigger", onClick: () => void request(state, "manual"), children: labels.loadMore })) : state.status === "loading" ? (_jsxs("div", { className: "hjm-load-more__status", role: "status", children: [_jsx("span", { className: "hjm-load-more__spinner", "aria-hidden": "true" }), _jsx("span", { className: "hjm-visually-hidden", children: labels.loading })] })) : state.status === "error" ? (_jsxs("div", { className: "hjm-load-more__error", children: [_jsx("span", { role: "alert", children: state.message }), _jsx("button", { type: "button", className: "hjm-load-more__trigger", onClick: () => void request(state, "retry"), children: labels.retry })] })) : (_jsx("div", { className: "hjm-load-more__end", children: labels.complete }))] }));
 });
 //# sourceMappingURL=supplemental-navigation.js.map

package/dist/supplemental-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"supplemental-navigation.js","sourceRoot":"","sources":["../src/supplemental-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createLoadMoreController,\n  validateLoadMoreDescriptor,\n  type LoadMoreController,\n  type LoadMoreControllerSnapshot,\n  type LoadMoreDescriptor,\n  type LoadMoreMode,\n  type LoadMoreRequestHandler,\n  type LoadMoreRequestOutcome,\n  type LoadMoreRequestReason,\n} from \"@hjmds/design-contracts/components/load-more\";\nimport {\n  loadMoreRecipe,\n  type LoadMoreDensity,\n} from \"@hjmds/design-contracts/recipes\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { classNames } from \"./internal.js\";\n\nfunction createLoadMoreControllerFacade(): Readonly<{\n  facade: LoadMoreController;\n  attach(controller: LoadMoreController): () => void;\n}> {\n  const detachedSnapshot: LoadMoreControllerSnapshot = {\n    mode: \"automatic\",\n    inFlightRequestKey: null,\n    disposed: true,\n  };\n  let active: LoadMoreController | null = null;\n  return {\n    facade: {\n      getSnapshot: () => active?.getSnapshot() ?? detachedSnapshot,\n      request: (state, reason) => {\n        if (!active) throw new Error(\"Cannot use a detached LoadMore controller\");\n        return active.request(state, reason);\n      },\n      dispose: () => active?.dispose() ?? false,\n    },\n    attach(controller) {\n      active = controller;\n      return () => {\n        if (active === controller) active = null;\n      };\n    },\n  };\n}\n\nexport type LoadMoreProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> &\n  Readonly<{\n    descriptor: LoadMoreDescriptor;\n    mode?: LoadMoreMode;\n    density?: LoadMoreDensity;\n    onLoadMore: LoadMoreRequestHandler;\n    onRequestOutcome?: (\n      outcome: LoadMoreRequestOutcome,\n      reason: LoadMoreRequestReason,\n    ) => void;\n    onRequestError?: (error: unknown, reason: LoadMoreRequestReason) => void;\n    intersectionRoot?: Element | Document | null;\n    rootMargin?: string;\n  }>;\n\n/**\n * A collection footer that keeps product data controlled while the shared\n * controller prevents overlapping cursor requests.\n */\nexport const LoadMore = forwardRef<HTMLDivElement, LoadMoreProps>(\n  function LoadMore(\n    {\n      descriptor,\n      mode = loadMoreRecipe.defaults.mode,\n      density = loadMoreRecipe.defaults.density,\n      onLoadMore,\n      onRequestOutcome,\n      onRequestError,\n      intersectionRoot = null,\n      rootMargin = \"200px 0px\",\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    validateLoadMoreDescriptor(descriptor);\n    const onLoadMoreRef = useRef(onLoadMore);\n    onLoadMoreRef.current = onLoadMore;\n    const [controllerFacade] = useState(createLoadMoreControllerFacade);\n    const controller = controllerFacade.facade;\n    const sentinelRef = useRef<HTMLSpanElement>(null);\n    const currentRequestIdentityRef = useRef<string | null>(null);\n    const completedRequestIdentityRef = useRef<string | null>(null);\n    const currentRequestIdentity =\n      descriptor.state.status === \"ready\" || descriptor.state.status === \"error\"\n        ? `${descriptor.state.status}:${descriptor.state.requestKey}`\n        : null;\n\n    useLayoutEffect(() => {\n      currentRequestIdentityRef.current = currentRequestIdentity;\n    }, [currentRequestIdentity]);\n\n    const request = useCallback(\n      async (\n        state: LoadMoreDescriptor[\"state\"],\n        reason: LoadMoreRequestReason,\n      ) => {\n        if (state.status === \"loading\" || state.status === \"complete\") return;\n        const requestIdentity = `${state.status}:${state.requestKey}`;\n        // IntersectionObserver may deliver an already queued callback after\n        // disconnect. Only events for the currently committed descriptor may\n        // enter the shared request controller.\n        if (currentRequestIdentityRef.current !== requestIdentity) return;\n        // Once a request settles successfully, retire that exact state/key\n        // until the product commits a new cursor or a retryable error state.\n        if (completedRequestIdentityRef.current === requestIdentity) return;\n        try {\n          const outcome = await controller.request(state, reason);\n          if (outcome === \"started\") {\n            completedRequestIdentityRef.current = requestIdentity;\n          }\n          onRequestOutcome?.(outcome, reason);\n        } catch (error) {\n          onRequestError?.(error, reason);\n        }\n      },\n      [controller, onRequestError, onRequestOutcome],\n    );\n\n    useEffect(() => {\n      const attached = createLoadMoreController({\n        mode,\n        onLoadMore: (nextRequest) => onLoadMoreRef.current(nextRequest),\n      });\n      const detach = controllerFacade.attach(attached);\n      return () => {\n        detach();\n        attached.dispose();\n      };\n    }, [controllerFacade, mode]);\n\n    useEffect(() => {\n      if (\n        mode !== \"automatic\" ||\n        descriptor.state.status !== \"ready\" ||\n        typeof IntersectionObserver === \"undefined\"\n      ) {\n        return;\n      }\n      const sentinel = sentinelRef.current;\n      if (!sentinel) return;\n      const observer = new IntersectionObserver(\n        (entries) => {\n          if (entries.some((entry) => entry.isIntersecting)) {\n            void request(descriptor.state, \"viewport\");\n          }\n        },\n        { root: intersectionRoot, rootMargin },\n      );\n      observer.observe(sentinel);\n      return () => observer.disconnect();\n    }, [descriptor.state, intersectionRoot, mode, request, rootMargin]);\n\n    const { state, labels } = descriptor;\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={classNames(\"hjm-load-more\", className)}\n        data-mode={mode}\n        data-density={density}\n        data-state={state.status}\n        aria-busy={state.status === \"loading\" || undefined}\n      >\n        <span ref={sentinelRef} className=\"hjm-load-more__sentinel\" aria-hidden=\"true\" />\n        {state.status === \"ready\" ? (\n          <button\n            type=\"button\"\n            className=\"hjm-load-more__trigger\"\n            onClick={() => void request(state, \"manual\")}\n          >\n            {labels.loadMore}\n          </button>\n        ) : state.status === \"loading\" ? (\n          <div className=\"hjm-load-more__status\" role=\"status\">\n            <span className=\"hjm-load-more__spinner\" aria-hidden=\"true\" />\n            {labels.loading}\n          </div>\n        ) : state.status === \"error\" ? (\n          <div className=\"hjm-load-more__error\">\n            <span role=\"alert\">{state.message}</span>\n            <button\n              type=\"button\"\n              className=\"hjm-load-more__trigger\"\n              onClick={() => void request(state, \"retry\")}\n            >\n              {labels.retry}\n            </button>\n          </div>\n        ) : (\n          <div className=\"hjm-load-more__end\">{labels.complete}</div>\n        )}\n      </div>\n    );\n  },\n);\n"]}
+{"version":3,"file":"supplemental-navigation.js","sourceRoot":"","sources":["../src/supplemental-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createLoadMoreController,\n  validateLoadMoreDescriptor,\n  type LoadMoreController,\n  type LoadMoreControllerSnapshot,\n  type LoadMoreDescriptor,\n  type LoadMoreMode,\n  type LoadMoreRequestHandler,\n  type LoadMoreRequestOutcome,\n  type LoadMoreRequestReason,\n} from \"@hjmds/design-contracts/components/load-more\";\nimport {\n  loadMoreRecipe,\n  type LoadMoreDensity,\n} from \"@hjmds/design-contracts/recipes\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { classNames } from \"./internal.js\";\n\nfunction createLoadMoreControllerFacade(): Readonly<{\n  facade: LoadMoreController;\n  attach(controller: LoadMoreController): () => void;\n}> {\n  const detachedSnapshot: LoadMoreControllerSnapshot = {\n    mode: \"automatic\",\n    inFlightRequestKey: null,\n    disposed: true,\n  };\n  let active: LoadMoreController | null = null;\n  return {\n    facade: {\n      getSnapshot: () => active?.getSnapshot() ?? detachedSnapshot,\n      request: (state, reason) => {\n        if (!active) throw new Error(\"Cannot use a detached LoadMore controller\");\n        return active.request(state, reason);\n      },\n      dispose: () => active?.dispose() ?? false,\n    },\n    attach(controller) {\n      active = controller;\n      return () => {\n        if (active === controller) active = null;\n      };\n    },\n  };\n}\n\nexport type LoadMoreProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> &\n  Readonly<{\n    descriptor: LoadMoreDescriptor;\n    mode?: LoadMoreMode;\n    density?: LoadMoreDensity;\n    onLoadMore: LoadMoreRequestHandler;\n    onRequestOutcome?: (\n      outcome: LoadMoreRequestOutcome,\n      reason: LoadMoreRequestReason,\n    ) => void;\n    onRequestError?: (error: unknown, reason: LoadMoreRequestReason) => void;\n    intersectionRoot?: Element | Document | null;\n    rootMargin?: string;\n  }>;\n\n/**\n * A collection footer that keeps product data controlled while the shared\n * controller prevents overlapping cursor requests.\n */\nexport const LoadMore = forwardRef<HTMLDivElement, LoadMoreProps>(\n  function LoadMore(\n    {\n      descriptor,\n      mode = loadMoreRecipe.defaults.mode,\n      density = loadMoreRecipe.defaults.density,\n      onLoadMore,\n      onRequestOutcome,\n      onRequestError,\n      intersectionRoot = null,\n      rootMargin = \"200px 0px\",\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    validateLoadMoreDescriptor(descriptor);\n    const onLoadMoreRef = useRef(onLoadMore);\n    onLoadMoreRef.current = onLoadMore;\n    const [controllerFacade] = useState(createLoadMoreControllerFacade);\n    const controller = controllerFacade.facade;\n    const sentinelRef = useRef<HTMLSpanElement>(null);\n    const currentRequestIdentityRef = useRef<string | null>(null);\n    const completedRequestIdentityRef = useRef<string | null>(null);\n    const currentRequestIdentity =\n      descriptor.state.status === \"ready\" || descriptor.state.status === \"error\"\n        ? `${descriptor.state.status}:${descriptor.state.requestKey}`\n        : null;\n\n    useLayoutEffect(() => {\n      currentRequestIdentityRef.current = currentRequestIdentity;\n    }, [currentRequestIdentity]);\n\n    const request = useCallback(\n      async (\n        state: LoadMoreDescriptor[\"state\"],\n        reason: LoadMoreRequestReason,\n      ) => {\n        if (state.status === \"loading\" || state.status === \"complete\") return;\n        const requestIdentity = `${state.status}:${state.requestKey}`;\n        // IntersectionObserver may deliver an already queued callback after\n        // disconnect. Only events for the currently committed descriptor may\n        // enter the shared request controller.\n        if (currentRequestIdentityRef.current !== requestIdentity) return;\n        // Once a request settles successfully, retire that exact state/key\n        // until the product commits a new cursor or a retryable error state.\n        if (completedRequestIdentityRef.current === requestIdentity) return;\n        try {\n          const outcome = await controller.request(state, reason);\n          if (outcome === \"started\") {\n            completedRequestIdentityRef.current = requestIdentity;\n          }\n          onRequestOutcome?.(outcome, reason);\n        } catch (error) {\n          onRequestError?.(error, reason);\n        }\n      },\n      [controller, onRequestError, onRequestOutcome],\n    );\n\n    useEffect(() => {\n      const attached = createLoadMoreController({\n        mode,\n        onLoadMore: (nextRequest) => onLoadMoreRef.current(nextRequest),\n      });\n      const detach = controllerFacade.attach(attached);\n      return () => {\n        detach();\n        attached.dispose();\n      };\n    }, [controllerFacade, mode]);\n\n    useEffect(() => {\n      if (\n        mode !== \"automatic\" ||\n        descriptor.state.status !== \"ready\" ||\n        typeof IntersectionObserver === \"undefined\"\n      ) {\n        return;\n      }\n      const sentinel = sentinelRef.current;\n      if (!sentinel) return;\n      const observer = new IntersectionObserver(\n        (entries) => {\n          if (entries.some((entry) => entry.isIntersecting)) {\n            void request(descriptor.state, \"viewport\");\n          }\n        },\n        { root: intersectionRoot, rootMargin },\n      );\n      observer.observe(sentinel);\n      return () => observer.disconnect();\n    }, [descriptor.state, intersectionRoot, mode, request, rootMargin]);\n\n    const { state, labels } = descriptor;\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={classNames(\"hjm-load-more\", className)}\n        data-mode={mode}\n        data-density={density}\n        data-state={state.status}\n        aria-busy={state.status === \"loading\" || undefined}\n      >\n        <span ref={sentinelRef} className=\"hjm-load-more__sentinel\" aria-hidden=\"true\" />\n        {state.status === \"ready\" ? (\n          <button\n            type=\"button\"\n            className=\"hjm-load-more__trigger\"\n            onClick={() => void request(state, \"manual\")}\n          >\n            {labels.loadMore}\n          </button>\n        ) : state.status === \"loading\" ? (\n          <div className=\"hjm-load-more__status\" role=\"status\">\n            <span className=\"hjm-load-more__spinner\" aria-hidden=\"true\" />\n            <span className=\"hjm-visually-hidden\">{labels.loading}</span>\n          </div>\n        ) : state.status === \"error\" ? (\n          <div className=\"hjm-load-more__error\">\n            <span role=\"alert\">{state.message}</span>\n            <button\n              type=\"button\"\n              className=\"hjm-load-more__trigger\"\n              onClick={() => void request(state, \"retry\")}\n            >\n              {labels.retry}\n            </button>\n          </div>\n        ) : (\n          <div className=\"hjm-load-more__end\">{labels.complete}</div>\n        )}\n      </div>\n    );\n  },\n);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hjmds/react",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "Accessible React 19 renderers for HJM design contracts.",
   "license": "MIT",
   "publishConfig": {
@@ -466,7 +466,7 @@
     "THIRD_PARTY_NOTICES.md"
   ],
   "peerDependencies": {
-    "@hjmds/design-contracts": ">=1.11.0 <1.12.0",
+    "@hjmds/design-contracts": ">=1.12.0 <1.13.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "@number-flow/react": "0.6.2",
@@ -503,7 +503,7 @@
     "blobatar": "2.7.0",
     "@blobatar/react": "2.7.0",
     "lucide-react": "1.49.0",
-    "@hjmds/design-contracts": "1.11.0"
+    "@hjmds/design-contracts": "1.12.0"
   },
   "peerDependenciesMeta": {
     "@number-flow/react": {