dev ← minor

.changeset/bright-lynx-banner.md

@@ -0,0 +1,8 @@
+---
+"@seed-design/lynx-css": minor
+"@seed-design/lynx-react": minor
+---
+
+Lynx에 `PageBanner` 컴포넌트를 추가합니다.
+
+- `npx @seed-design/cli@latest add ui:page-banner`로 Registry 컴포넌트를 설치할 수 있습니다.

.changeset/calm-cards-arrive.md

@@ -0,0 +1,10 @@
+---
+"@seed-design/lynx-css": minor
+"@seed-design/lynx-react": minor
+---
+
+Lynx용 Select Box 컴포넌트를 추가합니다.
+
+Checkbox와 Radio Group 방식의 선택형 카드, 다열 배치, 선택 상태에 따른 Footer 표시를 지원합니다.
+
+표준 멀티컬러 아이콘을 자동으로 감지해 원본 색상을 유지합니다. 자동 감지되지 않는 아이콘은 `multicolor` 옵션으로 지정할 수 있습니다.

.changeset/lynx-notification-badge.md

@@ -0,0 +1,9 @@
+---
+"@seed-design/lynx-react": minor
+"@seed-design/lynx-css": minor
+---
+
+Lynx Notification Badge 컴포넌트를 추가합니다.
+
+- `@seed-design/lynx-react`에서 `NotificationBadge`와 `NotificationBadgePositioner`를 사용할 수 있습니다.
+- `@seed-design/lynx-css/recipes/notification-badge`와 `notification-badge-positioner`에서 스타일 Recipe를 제공합니다.

.changeset/quiet-moons-gather.md

@@ -0,0 +1,10 @@
+---
+"@seed-design/css": patch
+"@seed-design/lynx-css": patch
+---
+
+컴포넌트 vars의 gradient가 문자열 대신 `{ serialized, stops? }` 객체로 제공됩니다.
+
+- `serialized`: 기존과 동일한 CSS gradient 문자열입니다. `linear-gradient(88deg, ${vars.toneMagic.enabled.root.gradient.serialized})`처럼 사용합니다.
+- `stops`: `{ color, position }` 배열로, position이 0~1 원본 값이라 stop마다 `calc()`로 위치를 계산하는 등 동적으로 다룰 수 있습니다. 테마별로 값이 다른 gradient에는 제공되지 않습니다.
+- 생성되는 CSS는 이전과 동일합니다.

.changeset/steady-segments-slide.md

@@ -0,0 +1,8 @@
+---
+"@seed-design/lynx-css": minor
+"@seed-design/lynx-react": minor
+---
+
+Lynx용 Segmented Control 컴포넌트를 추가합니다.
+
+- `npx @seed-design/cli@latest add ui:segmented-control`로 Registry 컴포넌트를 설치할 수 있습니다.

.changeset/tidy-lions-wander.md

@@ -0,0 +1,13 @@
+---
+"@seed-design/css": minor
+"@seed-design/lynx-css": minor
+"@seed-design/rootage-artifacts": minor
+"@seed-design/tailwind3-plugin": minor
+"@seed-design/tailwind4-theme": minor
+---
+
+`$gradient.fade-mask` 토큰을 추가하고, ScrollFog의 fog 마스크를 easing 그라데이션으로 개선합니다.
+
+- `$gradient.fade-mask`(`--seed-gradient-fade-mask`)를 추가합니다. 콘텐츠를 부드럽게 가리는 마스크용 불투명도(alpha) easing 곡선이며, 라이트/다크 테마에서 동일합니다.
+- ScrollFog의 가장자리 페이드가 기존 선형 2단계에서 16단계 easing 곡선으로 바뀌어 더 부드럽게 표현됩니다.
+- ScrollFog spec의 `fromColor`/`toColor` 프로퍼티가 `gradient` 하나로 대체됩니다.

.changeset/warm-manners-arrive.md

@@ -0,0 +1,6 @@
+---
+"@seed-design/lynx-css": minor
+"@seed-design/lynx-react": minor
+---
+
+Lynx용 `MannerTemp`, `MannerTempEmote`, `MannerTempBadge` 컴포넌트를 추가합니다.

docs/content/lynx/components/manner-temp-badge.mdx

@@ -0,0 +1,55 @@
+---
+title: Manner Temp Badge
+description: 매너온도를 작은 배지 형태로 표현하는 컴포넌트입니다.
+compatibility:
+  lynx:
+    engine: "1.0"
+---
+
+<AvailableSince packages="@seed-design/lynx-react@0.6.0, @seed-design/lynx-css@0.10.0" />
+
+<LynxComponentExample name="lynx/manner-temp-badge/preview">
+  ```json doc-gen:file
+  {
+    "file": "examples/lynx/manner-temp-badge/preview.tsx",
+    "codeblock": true
+  }
+  ```
+</LynxComponentExample>
+
+## 설치
+
+```package-install
+@seed-design/lynx-react @seed-design/lynx-css
+```
+
+<Callout>
+Lynx `MannerTempBadge`는 별도 `ui:manner-temp-badge` snippet 없이 `@seed-design/lynx-react` 패키지에서 직접 제공합니다.
+</Callout>
+
+## 속성
+
+<react-type-table path="../packages/lynx-react/src/components/MannerTempBadge/MannerTempBadge.tsx" name="MannerTempBadgeProps" />
+
+## 사용법
+
+`level`에 매너온도 구간을 지정하고 자식으로 표시할 온도를 전달합니다.
+
+```tsx
+import { MannerTempBadge } from "@seed-design/lynx-react";
+
+export function App() {
+  return <MannerTempBadge level="l4">36.5°C</MannerTempBadge>;
+}
+```
+
+## 웹 버전과의 차이
+
+<Callout type="warning">
+
+- **렌더링 요소.** HTML `<span>` 대신 native `<view>`와 `<text>`를 렌더링합니다.
+- **공개 경로.** React 문서의 `ui:manner-temp-badge` snippet과 달리 Lynx에서는 패키지 API를 직접 사용합니다.
+- **온도 변환.** Lynx 패키지는 `temperature`를 `level`로 바꾸지 않습니다. 제품의 매너온도 기준에 따라 `level`을 계산해 전달하세요.
+- **다형 렌더링.** 웹의 `asChild`와 HTML attribute 표면은 제공하지 않습니다.
+
+</Callout>

docs/content/lynx/components/manner-temp.mdx

@@ -0,0 +1,66 @@
+---
+title: Manner Temp
+description: 사용자의 매너온도를 온도와 표정 이미지로 표현하는 컴포넌트입니다.
+compatibility:
+  lynx:
+    engine: "2.14"
+---
+
+<AvailableSince packages="@seed-design/lynx-react@0.6.0, @seed-design/lynx-css@0.10.0" />
+
+<LynxComponentExample name="lynx/manner-temp/preview">
+  ```json doc-gen:file
+  {
+    "file": "examples/lynx/manner-temp/preview.tsx",
+    "codeblock": true
+  }
+  ```
+</LynxComponentExample>
+
+## 설치
+
+```package-install
+@seed-design/lynx-react @seed-design/lynx-css
+```
+
+<Callout>
+Lynx `MannerTemp`는 별도 `ui:manner-temp` snippet 없이 `@seed-design/lynx-react` 패키지에서 직접 제공합니다.
+</Callout>
+
+## 속성
+
+### `MannerTemp`
+
+<react-type-table path="../packages/lynx-react/src/components/MannerTemp/MannerTemp.tsx" name="MannerTempProps" />
+
+### `MannerTempEmote`
+
+<react-type-table path="../packages/lynx-react/src/components/MannerTemp/MannerTemp.tsx" name="MannerTempEmoteProps" />
+
+## 사용법
+
+`level`에 매너온도 구간을 지정합니다. `MannerTempEmote`를 자식으로 넣으면 같은 `level`의 표정 이미지를 표시합니다.
+
+```tsx
+import { MannerTemp, MannerTempEmote } from "@seed-design/lynx-react";
+
+export function App() {
+  return (
+    <MannerTemp level="l4">
+      36.5°C
+      <MannerTempEmote />
+    </MannerTemp>
+  );
+}
+```
+
+## 웹 버전과의 차이
+
+<Callout type="warning">
+
+- **렌더링 요소.** HTML `<span>`과 `<img>` 대신 native `<view>`, `<text>`, `<image>`를 렌더링합니다.
+- **공개 경로.** React 문서의 `ui:manner-temp` snippet과 달리 Lynx에서는 패키지 API를 직접 사용합니다.
+- **온도 변환.** Lynx 패키지는 `temperature`를 `level`로 바꾸지 않습니다. 제품의 매너온도 기준에 따라 `level`을 계산해 전달하세요.
+- **다형 렌더링.** 웹의 `asChild`와 HTML attribute 표면은 제공하지 않습니다.
+
+</Callout>

docs/content/lynx/components/notification-badge.mdx

@@ -0,0 +1,48 @@
+---
+title: Notification Badge
+description: 아이콘이나 텍스트에 새로운 알림 또는 읽지 않은 항목이 있음을 표시하는 컴포넌트입니다.
+compatibility:
+  lynx:
+    engine: "1.0"
+---
+
+<AvailableSince packages="@seed-design/lynx-react@0.6.0, @seed-design/lynx-css@0.10.0" />
+
+## Installation
+
+```package-install
+@seed-design/lynx-react @seed-design/lynx-css
+```
+
+<Callout>
+Lynx `NotificationBadge`는 별도 Registry 컴포넌트 없이 `@seed-design/lynx-react` 패키지에서 직접 제공합니다.
+</Callout>
+
+## Usage
+
+<LynxComponentExample name="lynx/notification-badge/preview" height={320}>
+  ```json doc-gen:file
+  {
+    "file": "examples/lynx/notification-badge/preview.tsx",
+    "codeblock": true
+  }
+  ```
+</LynxComponentExample>
+
+`NotificationBadgePositioner`를 알림을 표시할 요소 안에 배치합니다. 부모 요소에는 `position="relative"`를 지정해야 합니다.
+
+`size="large"`는 최대 4자의 알림 수를 표시할 때 사용합니다. `size="small"`은 라벨 없이 알림의 존재만 나타냅니다.
+
+작은 배지는 시각적인 장식으로 숨기고, 함께 사용하는 버튼이나 메뉴에 읽지 않은 상태를 설명하는 접근성 이름을 제공하세요.
+
+## Props
+
+<react-type-table path="../packages/lynx-react/src/components/NotificationBadge/NotificationBadge.tsx" name="NotificationBadgeProps" />
+
+<react-type-table path="../packages/lynx-react/src/components/NotificationBadge/NotificationBadge.tsx" name="NotificationBadgePositionerProps" />
+
+## 웹 버전과의 차이
+
+<Callout type="warning">
+Lynx 버전은 HTML `<span>` 대신 native `<text>`와 `<view>`를 렌더링합니다. HTML attribute와 `asChild`는 제공하지 않으며, native 접근성 속성과 `bind*` 이벤트를 사용합니다.
+</Callout>