@seed-design/lynx-react 0.7.0 → 0.7.1

package/lib/components/AppBar/AppBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/AppBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,4CAA4C,CAAC;AACpD,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAGxC,OAAO,KAAK,EACV,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,sBAAsB,EAEtB,aAAa,EAEd,MAAM,aAAa,CAAC;AAoCrB,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,sBAAsB;CAAG;AAEtF,eAAO,MAAM,UAAU,iFA2BrB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,UAAU,iFA4BrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,WAAW,kFA4BtB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE1F,eAAO,MAAM,UAAU,iFAmCrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;CAAG;AAE7D,eAAO,MAAM,WAAW,kFAYtB,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;CAAG;AAEhE,eAAO,MAAM,cAAc,qFAYzB,CAAC;AAKH,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,EAAE,kBAAkB;IACjF,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC7D,uBAAuB,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;CAChE;AAED,eAAO,MAAM,gBAAgB,uFA2B3B,CAAC;AAGH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;CAAG;AAElE,eAAO,MAAM,UAAU,iFAYrB,CAAC"}
+{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/AppBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,4CAA4C,CAAC;AACpD,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAGxC,OAAO,KAAK,EACV,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,sBAAsB,EAEtB,aAAa,EAEd,MAAM,aAAa,CAAC;AAqCrB,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,sBAAsB;CAAG;AAEtF,eAAO,MAAM,UAAU,iFA2BrB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,UAAU,iFA4BrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,gBAAgB,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,WAAW,kFA4BtB,CAAC;AAKH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE1F,eAAO,MAAM,UAAU,iFAmCrB,CAAC;AAGH,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;CAAG;AAE7D,eAAO,MAAM,WAAW,kFAYtB,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;CAAG;AAEhE,eAAO,MAAM,cAAc,qFAYzB,CAAC;AAKH,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,EAAE,kBAAkB;IACjF,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC7D,uBAAuB,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;CAChE;AAED,eAAO,MAAM,gBAAgB,uFA6B3B,CAAC;AAGH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;CAAG;AAElE,eAAO,MAAM,UAAU,iFAYrB,CAAC"}

package/lib/components/AppBar/AppBar.jsx

@@ -1,6 +1,6 @@
 import { mergeProps } from "../../utils/merge-props.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
-import { Icon } from "../Icon/Icon.jsx";
+import { Icon, IconSlotProvider } from "../Icon/Icon.jsx";
 import { AppBarProvider, useAppBarContext } from "./context.js";
 import { getLayoutWidth, getMainLayoutStyle, useAppBar } from "./useAppBar.js";
 import * as React from "@lynx-js/react";
@@ -117,7 +117,12 @@ var AppBarIconButton = React.forwardRef((props, ref) => {
 	const classNames = useAppBarClassNames("AppBarIconButton");
 	if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) console.warn("AppBarIconButton requires `accessibility-label` for accessibility.");
 	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-traits={accessibilityTraits} className={clsx(classNames.iconButton, className)}>
-      {icon ? <Icon className={classNames.icon} icon={icon} /> : children}
+      <IconSlotProvider value={{
+		classNames: { icon: classNames.icon },
+		deps: [classNames.icon]
+	}}>
+        {icon ? <Icon icon={icon} /> : children}
+      </IconSlotProvider>
     </view>;
 });
 AppBarIconButton.displayName = "AppBarIconButton";

package/lib/components/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,oBAAoB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC7F,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGnF,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,YAAY,GAAG,YAAY,CAAC;AAIhE,UAAU,oBAAoB;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IACnD,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAWD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB,qBAyCA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA;AAeD,wBAAgB,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,YAAY,GAAG,IAAI,CAI1E;AAaD,MAAM,WAAW,SAAU,SAAQ,sBAAsB;IACvD,IAAI,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;CAAG;AAErD,MAAM,WAAW,eAAgB,SAAQ,SAAS;CAAG;AA2GrD,eAAO,MAAM,IAAI,2EAA8D,CAAC;AAChF,eAAO,MAAM,UAAU,iFAItB,CAAC;AACF,eAAO,MAAM,UAAU,iFAItB,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,IAAI,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,mFA6BvB,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,oBAAoB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC7F,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGnF,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,YAAY,GAAG,YAAY,CAAC;AAIhE,UAAU,oBAAoB;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IACnD,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAWD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB,qBAyCA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA;AAeD,wBAAgB,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,YAAY,GAAG,IAAI,CAI1E;AAaD,MAAM,WAAW,SAAU,SAAQ,sBAAsB;IACvD,IAAI,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;CAAG;AAErD,MAAM,WAAW,eAAgB,SAAQ,SAAS;CAAG;AA+GrD,eAAO,MAAM,IAAI,2EAA8D,CAAC;AAChF,eAAO,MAAM,UAAU,iFAItB,CAAC;AACF,eAAO,MAAM,UAAU,iFAItB,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,IAAI,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,mFA6BvB,CAAC"}

package/lib/components/Icon/Icon.jsx

@@ -101,7 +101,7 @@ var IconSlotBase = React.forwardRef((props, ref) => {
 		slot
 	]);
 	if (!hasValidIcon) return null;
-	return <view {...mergeProps({ "main-thread:ref": sourceRef }, ref ? { ref } : {}, nativeProps)} className={clsx(baseClassName, slotClassName, className)} style={mergeWrapperStyle({
+	return <view {...mergeProps({ "main-thread:ref": sourceRef }, ref ? { ref } : {}, nativeProps)} className={clsx(slotClassName && baseClassName ? `${baseClassName}-slot` : baseClassName, slotClassName, className)} style={mergeWrapperStyle({
 		size,
 		color,
 		style

package/lib/hooks/useScaleFeedback.d.ts

@@ -39,7 +39,7 @@ export interface UseScaleFeedbackReturn {
  * The target's transform is owned by this hook. Use a separate content layer
  * when the element already uses translate, rotate, or another transform.
  *
- * Supported on Lynx Engine 3.9 and later. Missing or unknown
+ * Supported on Lynx Engine 3.6 and later. Missing or unknown
  * `GlobalProps.motion` values preserve the default motion; only the exact
  * `"reduced"` value disables scaling.
  */

package/lib/hooks/useScaleFeedback.js

@@ -42,7 +42,7 @@ function readScaleFeedbackScale(target) {
 * The target's transform is owned by this hook. Use a separate content layer
 * when the element already uses translate, rotate, or another transform.
 *
-* Supported on Lynx Engine 3.9 and later. Missing or unknown
+* Supported on Lynx Engine 3.6 and later. Missing or unknown
 * `GlobalProps.motion` values preserve the default motion; only the exact
 * `"reduced"` value disables scaling.
 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -34,12 +34,12 @@
   "peerDependencies": {
     "@lynx-js/react": ">=0.117.0",
     "@lynx-js/types": ">=3.9.0",
-    "@seed-design/lynx-css": "0.0.0 || >=0.11.0 <1.0.0"
+    "@seed-design/lynx-css": "0.0.0 || >=0.11.1 <1.0.0"
   },
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.9.0",
-    "@seed-design/lynx-css": "0.11.0",
+    "@seed-design/lynx-css": "0.11.1",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",

package/src/components/ActionButton/ActionButton.test.tsx

@@ -88,9 +88,9 @@ describe("ActionButton", () => {
     const { getByText } = getRenderedQueries();
     const root = getRenderedRoot();
 
-    expect(root.querySelector(".seed-prefix-icon")).toHaveClass("seed-action-button__prefixIcon");
-    expect(root.querySelector(".seed-suffix-icon")).toHaveClass("seed-action-button__suffixIcon");
-    expect(root.querySelector(".seed-prefix-icon image")).toHaveStyle({
+    expect(root.querySelector(".seed-prefix-icon-slot")).toHaveClass("seed-action-button__prefixIcon");
+    expect(root.querySelector(".seed-suffix-icon-slot")).toHaveClass("seed-action-button__suffixIcon");
+    expect(root.querySelector(".seed-prefix-icon-slot image")).toHaveStyle({
       width: "100%",
       height: "100%",
     });
@@ -106,8 +106,8 @@ describe("ActionButton", () => {
 
     const root = getRenderedRoot();
 
-    expect(root.querySelector(".seed-prefix-icon")).toHaveClass("seed-action-button__prefixIcon");
-    expect(root.querySelector(".seed-suffix-icon")).toHaveClass("seed-action-button__suffixIcon");
+    expect(root.querySelector(".seed-prefix-icon-slot")).toHaveClass("seed-action-button__prefixIcon");
+    expect(root.querySelector(".seed-suffix-icon-slot")).toHaveClass("seed-action-button__suffixIcon");
   });
 
   it("supports icon-only child slot", () => {
@@ -119,7 +119,7 @@ describe("ActionButton", () => {
 
     const root = getRenderedRoot();
 
-    expect(root.querySelector(".seed-icon")).toHaveClass("seed-action-button__icon");
+    expect(root.querySelector(".seed-icon-slot")).toHaveClass("seed-action-button__icon");
   });
 
   it("maps accessibility props to the root view", () => {
@@ -141,7 +141,7 @@ describe("ActionButton", () => {
 
     const root = getRenderedRoot();
 
-    expect(root.querySelector(".seed-icon")).toHaveClass("seed-action-button__icon");
+    expect(root.querySelector(".seed-icon-slot")).toHaveClass("seed-action-button__icon");
   });
 
   it("throws in development when icon-only layout has no Icon child", () => {

package/src/components/AppBar/AppBar.test.tsx

@@ -1,4 +1,7 @@
 import "@testing-library/jest-dom";
+import * as React from "@lynx-js/react";
+import type { MainThread } from "@lynx-js/types";
+import type { LynxIconElementProps } from "../../types";
 import {
   act,
   fireEvent,
@@ -9,6 +12,7 @@ import {
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import * as AppBar from "./AppBar.namespace";
+import { Icon } from "../Icon/Icon";
 
 type TestSystemInfo = { platform?: string };
 
@@ -268,3 +272,25 @@ describe("AppBar", () => {
     });
   });
 });
+
+describe("AppBar icon recipe ownership", () => {
+  const TestIcon = React.forwardRef<MainThread.Element, LynxIconElementProps>((props, ref) => (
+    <image {...props} {...(ref ? { "main-thread:ref": ref } : {})} />
+  ));
+  it.each(["prop", "children"])("connects the %s icon without fallback styles", (mode) => {
+    const icon = <TestIcon />;
+    const { container } = render(
+      <AppBar.Root theme="cupertino">
+        <AppBar.Left>
+          <AppBar.IconButton accessibility-label="Close" {...(mode === "prop" ? { icon } : {})}>
+            {mode === "children" ? <Icon icon={icon} /> : null}
+          </AppBar.IconButton>
+        </AppBar.Left>
+      </AppBar.Root>,
+    );
+    const wrapper = container.querySelector(".seed-app-bar__icon")!;
+    expect(wrapper).not.toBeNull();
+    expect(wrapper.classList.contains("seed-icon-slot")).toBe(true);
+    expect(wrapper.classList.contains("seed-icon")).toBe(false);
+  });
+});

package/src/components/AppBar/AppBar.tsx

@@ -17,6 +17,7 @@ import type {
 } from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
 import { Icon } from "../Icon";
+import { IconSlotProvider } from "../Icon/Icon";
 import { AppBarProvider, useAppBarContext } from "./context";
 import { getLayoutWidth, getMainLayoutStyle, useAppBar } from "./useAppBar";
 import { mergeProps } from "../../utils/merge-props";
@@ -263,7 +264,9 @@ export const AppBarIconButton = React.forwardRef<unknown, AppBarIconButtonProps>
       accessibility-traits={accessibilityTraits}
       className={clsx(classNames.iconButton, className)}
     >
-      {icon ? <Icon className={classNames.icon} icon={icon} /> : children}
+      <IconSlotProvider value={{ classNames: { icon: classNames.icon }, deps: [classNames.icon] }}>
+        {icon ? <Icon icon={icon} /> : children}
+      </IconSlotProvider>
     </view>
   );
 });

package/src/components/Icon/Icon.test.tsx

@@ -1,10 +1,13 @@
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+
 import * as React from "@lynx-js/react";
 import { act, render, waitSchedule } from "@lynx-js/react/testing-library";
 import type { MainThread } from "@lynx-js/types";
 import { describe, expect, it } from "vitest";
 
 import type { LynxIconElementProps } from "../../types";
-import { InternalIcon, PrefixIcon } from "./Icon";
+import { Icon, IconSlotProvider, InternalIcon, PrefixIcon, SuffixIcon } from "./Icon";
 
 const TestIcon = React.forwardRef<
   MainThread.Element,
@@ -101,7 +104,8 @@ describe("InternalIcon", () => {
     await waitSchedule();
 
     expect(frames.size).toBe(1);
-    expect(image.getAttribute("tint-color")).toBeNull();
+    // The immediate read uses the old native style; the next frame must refresh it.
+    expect(image.getAttribute("tint-color")).toBe("rgb(134, 139, 148)");
 
     computedColor = "rgb(255, 102, 0)";
     runNextFrame();
@@ -149,3 +153,54 @@ describe("PrefixIcon", () => {
     expect(getSourceAndImage().image.getAttribute("tint-color")).toBeNull();
   });
 });
+
+describe("icon recipe ownership", () => {
+  it.each([
+    [Icon, "icon", "seed-icon"],
+    [PrefixIcon, "prefixIcon", "seed-prefix-icon"],
+    [SuffixIcon, "suffixIcon", "seed-suffix-icon"],
+  ] as const)("keeps fallback styles exclusive to unbound %s", (Component, slot, baseClass) => {
+    const { container, rerender } = render(<Component icon={<TestIcon />} />);
+    expect(container.querySelector(`.${baseClass}`)).not.toBeNull();
+    rerender(
+      <IconSlotProvider value={{ classNames: { [slot]: "test-recipe-icon" }, deps: [] }}>
+        <Component size={28} color="#2475e8" className="user-icon" icon={<TestIcon />} />
+      </IconSlotProvider>,
+    );
+    const wrapper = container.querySelector(".test-recipe-icon")!;
+    expect(wrapper.classList.contains(`${baseClass}-slot`)).toBe(true);
+    expect(wrapper.classList.contains("user-icon")).toBe(true);
+    expect(wrapper.classList.contains(baseClass)).toBe(false);
+    expect(wrapper.getAttribute("style")).toContain("28px");
+  });
+});
+
+// This checks generated CSS cascade only; native state/theme invalidation is verified separately.
+describe("generated icon CSS import order", () => {
+  const { JSDOM } = createRequire(`${process.cwd()}/package.json`)("jsdom") as {
+    JSDOM: new (html: string) => { window: Window & typeof globalThis };
+  };
+  const base = readFileSync("../lynx-css/base.css", "utf8");
+  const recipe = readFileSync("../lynx-css/recipes/callout.css", "utf8");
+
+  it("keeps the legacy standalone fallback selectors", () => {
+    const dom = new JSDOM(`<style>${base}</style><div class="seed-suffix-icon"></div>`);
+    const style = dom.window.getComputedStyle(dom.window.document.querySelector("div")!);
+    expect(style.width).toBe("var(--seed-suffix-icon-size)");
+    expect(style.height).toBe("var(--seed-suffix-icon-size)");
+    expect(style.color).toBe("var(--seed-suffix-icon-color, currentcolor)");
+    dom.window.close();
+  });
+
+  it.each(["base-first", "recipe-first"])("preserves Callout slot styles with %s", (order) => {
+    const dom = new JSDOM(`<style>${order === "base-first" ? base + recipe : recipe + base}</style>
+      <div class="seed-suffix-icon-slot seed-callout__suffixIcon seed-callout__suffixIcon--tone_neutral"></div>`);
+    const icon = dom.window.document.querySelector("div")!;
+    const style = dom.window.getComputedStyle(icon);
+    expect(style.width).toBe("var(--seed-dimension-x4)");
+    expect(style.height).toBe("var(--seed-dimension-x4)");
+    expect(style.color).toBe("var(--seed-color-fg-neutral)");
+    expect(style.flexShrink).toBe("0");
+    dom.window.close();
+  });
+});

package/src/components/Icon/Icon.tsx

@@ -205,7 +205,11 @@ const IconSlotBase = React.forwardRef<unknown, IconSlotBaseProps>((props, ref) =
         ref ? { ref: ref as LynxViewRef } : {},
         nativeProps,
       )}
-      className={clsx(baseClassName, slotClassName, className)}
+      className={clsx(
+        slotClassName && baseClassName ? `${baseClassName}-slot` : baseClassName,
+        slotClassName,
+        className,
+      )}
       style={mergeWrapperStyle({ size, color, style })}
     >
       {cloneElement(icon, {

package/src/components/ReactionButton/ReactionButton.test.tsx

@@ -69,7 +69,7 @@ describe("ReactionButton", () => {
     const queries = getQueriesForElement(getRenderedRoot());
 
     expect(root).toHaveClass("seed-reaction-button__root--size_small");
-    expect(root.querySelector(".seed-prefix-icon")).toHaveClass("seed-reaction-button__prefixIcon");
+    expect(root.querySelector(".seed-prefix-icon-slot")).toHaveClass("seed-reaction-button__prefixIcon");
     expect(queries.getByText("좋아요")).toHaveClass("seed-reaction-button__label");
     expect(queries.getByText("12")).toHaveClass("seed-count", "seed-reaction-button__count");
 

package/src/hooks/useScaleFeedback.ts

@@ -119,7 +119,7 @@ function readScaleFeedbackScale(target: ScaleFeedbackElement | null): number | n
  * The target's transform is owned by this hook. Use a separate content layer
  * when the element already uses translate, rotate, or another transform.
  *
- * Supported on Lynx Engine 3.9 and later. Missing or unknown
+ * Supported on Lynx Engine 3.6 and later. Missing or unknown
  * `GlobalProps.motion` values preserve the default motion; only the exact
  * `"reduced"` value disables scaling.
  */