chore: sync dev changes to main

.changeset/accordion-a11y-region-inert.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/accordion": patch
+---
+
+Fix Accordion accessibility: link Trigger and Content via generated `id`/`aria-controls`/`aria-labelledby` (now sourced from `@sipe-team/hooks`'s `useId`) so assistive tech can associate each panel with its trigger, expose each panel as an `aria-labelledby`-named `<section>` (implicit `role="region"`), and mark closed panels `inert` so their focusable descendants are removed from the tab order and accessibility tree instead of merely being visually clipped. The generated `id`/`aria-controls` on Trigger now always take precedence over any `id`/`aria-controls` passed via props, since they are managed internally to keep Trigger and Content in sync.

.changeset/accordion-grid-compile-styles.md

@@ -0,0 +1,6 @@
+---
+"@sipe-team/accordion": patch
+"@sipe-team/grid": patch
+---
+
+Compile vanilla-extract styles so `./styles.css` resolves. Both packages declared a local `tsup` config without the vanilla-extract plugin, so their `.css.ts` styles were never compiled and the `dist/index.css` referenced by `publishConfig.exports["./styles.css"]` was absent from the published tarball. They now reuse the shared root config like every other component package, and shipped without styles until now.

.changeset/accordion-single-mode.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/accordion": minor
+---
+
+Add single/multiple open mode support to Accordion component. When `type="single"` is set on `Accordion.Root`, only one item can be open at a time. Also supports controlled mode via `value` and `onValueChange` props.

.changeset/add-card-ghost-variant.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/card": minor
+---
+
+Add ghost variant to Card component with transparent background, no border, and no padding

.changeset/add-hooks-package.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/hooks": minor
+---
+
+Add `@sipe-team/hooks`, a shared package for cross-component React hooks. Starts with `useId()`, a thin wrapper around React's `useId()` that prefixes generated ids with `side-` for consistent, brand-namespaced DOM ids across Sipe Design System components. Accepts an optional `deterministicId` argument that passes through as-is, matching the `useId(props.id)` pattern already used ad hoc in components like Checkbox.

.changeset/add-member-card.md

@@ -0,0 +1,12 @@
+---
+"@sipe-team/member-card": minor
+---
+
+Add MemberCard component
+
+- Ported from sipe.team's `UserCard` into the design system
+- Uses semantic design tokens for colors, spacing, radius, and typography
+- Composes `@sipe-team/avatar` for the profile image and `@sipe-team/typography` for text
+- Supports 7 social icon types: GitHub, LinkedIn, Instagram, YouTube, Kakao, Email, Link (with automatic URL normalization)
+- Includes `isOrganizer` badge, `introduce`, and `review` sections
+- Provides `filled` (default) and `outline` variants

.changeset/beige-cows-know.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/tooltip": major
+---
+
+Refactor tooltip API: replace trigger prop with disableHoverListener, add controlled mode (open/onOpen/onClose), improve WCAG compliance, and fix animation on mount

.changeset/bright-flex-responsive.md

@@ -0,0 +1,6 @@
+---
+"@sipe-team/flex": minor
+"@sipe-team/side": patch
+---
+
+Extend Flex props to accept responsive breakpoint values for direction, align, justify, wrap, and gap.

.changeset/button-semantic-tokens.md

@@ -0,0 +1,12 @@
+---
+"@sipe-team/button": patch
+---
+
+Apply new semantic design tokens to Button
+
+- Replace hardcoded brand colors (`#FF7C27`, gradient, `#FE4E07`, `#000`) with `vars.color.accent.{default,hover,subtle}` and `vars.color.foreground.onAccent`
+- Replace primitive `color.gray500/600` used for disabled state with `vars.color.background.muted` and `vars.color.foreground.subtle` (`foreground.muted` is reserved for non-readable text per token spec)
+- Use `vars.color.border.focus` for the focus-visible outline color
+- Unify size padding/radius via `vars.spacing.component.*` and `vars.radius.component.md|lg`
+- Add `opacity: 0.9` to fill `:active` for hover/press visual hierarchy
+- Split the `border` shorthand into `borderWidth/Style/Color` to work around a vanilla-extract parsing issue with CSS custom properties in the `border` shorthand

.changeset/button-v2-redesign.md

@@ -0,0 +1,14 @@
+---
+"@sipe-team/button": major
+"@sipe-team/tokens": minor
+---
+
+Redesign Button component based on 5th generation design system
+
+- **BREAKING**: Rename `ButtonVariant.filled` to `ButtonVariant.fill`
+- **BREAKING**: Expand `ButtonSize` from `sm | lg` to `sm | md | lg | xl`
+- Add `leftIcon` and `rightIcon` props for icon support
+- Apply 5th design colors via `createVar()` (button-scoped CSS variables)
+- Add interaction states: hover (gradient), pressed (`#FE4E07`), disabled (`gray500/600`)
+- Fix disabled CSS specificity bug by moving styles into recipe base selectors
+- Add `theme5th` color token to `@sipe-team/tokens`

.changeset/card-semantic-tokens.md

@@ -0,0 +1,10 @@
+---
+"@sipe-team/card": patch
+---
+
+Apply new semantic design tokens to Card
+
+- Replace primitive `color.gray50/100/200` and `color.cyan300` with `vars.color.background.{base,subtle}` and `vars.color.border.{default,strong}`
+- outline variant border uses `border.strong` instead of `accent.default` to separate divider semantics from the interactive `accent` scale
+- Standardize hardcoded `borderRadius: 12px` and `padding: 20px` to `vars.radius.component.lg` and `vars.spacing.component.lg` per token spec ("카드 모서리" / "카드 내부 패딩")
+- Split the `border` shorthand into `borderWidth/Style/Color` to work around a vanilla-extract parsing issue with CSS custom properties in the `border` shorthand

.changeset/checkbox-shared-use-id.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/checkbox": patch
+---
+
+Source Checkbox's internal `id` from `@sipe-team/hooks`'s `useId` instead of calling React's `useId` directly. The `props.id ?? internalId` fallback pattern is now handled by `useId`'s `deterministicId` argument. Behavior is unchanged aside from the generated id now carrying a `side-` prefix when no `id` prop is passed.

.changeset/chip-normalize-package-json.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/chip": patch
+---
+
+Normalize `@sipe-team/chip` package.json to match the canonical structure used across other `@sipe-team/*` packages. Adds `publishConfig` with `access`/`registry`/`exports`, moves source `exports` to `./src/index.ts`, adds `type: "module"`, `repository`, `sideEffects: ["**/*.css"]`, and aligns scripts/dependencies. Consumer module resolution now uses the `import`/`require` branches declared under `publishConfig.exports`.

.changeset/fix-avatar-error-loop-and-aschild.md

@@ -0,0 +1,12 @@
+---
+'@sipe-team/avatar': patch
+---
+
+Fix two rendering bugs.
+
+- **`onError` loop**: when a broken `src` fell back to `fallback` and that URL also failed, the
+  handler reassigned the same URL endlessly. It now clears itself (`onerror = null`) before
+  swapping, so a failing fallback stops cleanly.
+- **`asChild` sizing**: the `image` style (`width/height: 100%`) was declared after `size`, so
+  when `asChild` merged both onto the same `<img>` the `100%` won and the avatar filled its parent
+  instead of keeping its size. `image` is now declared first, so `size` wins the tie.

.changeset/fix-checkbox-assets-and-controlled.md

@@ -0,0 +1,8 @@
+---
+"@sipe-team/checkbox": patch
+---
+
+Fix two issues.
+
+- **SVG assets**: `Checkbox.css.ts` referenced `url("public/check.svg")` / `url("public/indeterminate.svg")`, which esbuild (tsup) resolved but source-compiling consumers (webpack + `@vanilla-extract/webpack-plugin`, e.g. the Docusaurus docs site) could not, breaking their production build. The icons are now inlined as `data:` URIs so both bundlers render identical marks with no external asset resolution.
+- **`checked` + `defaultChecked` warning**: `Root` did not consume `defaultChecked`, so it leaked through context onto the `<input>` alongside the always-set `checked`, triggering React's "input with both checked and defaultChecked" warning. `Root` now destructures `defaultChecked` (it only seeds the uncontrolled initial state), so the input receives just `checked`.

.changeset/fix-radio-legend-style.md

@@ -0,0 +1,8 @@
+---
+"@sipe-team/radio": patch
+---
+
+Apply the `radioGroupLegend` style to the `RadioGroup` legend. The style was
+defined but never wired to the `<legend>` element, so the group label rendered
+with browser-default styling instead of the intended weight, size, spacing, and
+token color.

.changeset/fix-token-css-chain.md

@@ -0,0 +1,19 @@
+---
+'@sipe-team/tokens': minor
+---
+
+토큰 CSS 체인을 복구하고 `./styles.css` 진입점을 추가합니다.
+
+`packages/tokens/tsup.config.ts`가 21개 패키지 중 유일하게 루트 tsup 설정을 상속하지 않아 vanilla-extract esbuild 플러그인이 누락돼 있었습니다. 그 결과:
+
+- `contract.css.ts`가 일반 TS로 번들되어 **`dist`를 import하면 런타임 예외**가 발생했습니다 (`Styles were unable to be assigned to a file`). `@sipe-team/tokens`를 re-export하는 `@sipe-team/side`도 함께 영향받았습니다.
+- `createGlobalTheme` 호출이 `sideEffects: false`로 트리셰이킹되어 `--side-*` 브릿지 CSS가 방출되지 않았습니다.
+- 소비자가 토큰 CSS를 가져갈 진입점이 없어, `vars.*`를 쓰는 컴포넌트(Button)의 padding·radius·font-size·font-family·gap이 전부 무효화됐습니다.
+
+**변경 사항**
+
+- `tsup.config.ts`가 루트 설정을 상속합니다 (다른 20개 패키지와 동일한 패턴).
+- `sideEffects`를 `["**/*.css"]`로 변경해 소비자의 CSS import가 번들러에 제거되지 않게 합니다.
+- `./styles.css` 진입점을 추가합니다. Style Dictionary 값층(`--color-*`, `--spacing-*`)과 vanilla-extract 브릿지(`--side-*`)를 **한 파일로** 제공합니다 — 둘 중 하나만 로드하면 체인이 조용히 끊기기 때문입니다.
+
+**소비자 액션 필요:** 개별 패키지를 사용한다면 `import '@sipe-team/tokens/styles.css'`를 추가해야 컴포넌트 스타일이 적용됩니다.

.changeset/fix-tooltip-ssr-portal-and-ref.md

@@ -0,0 +1,13 @@
+---
+"@sipe-team/tooltip": patch
+---
+
+Fix two bugs.
+
+- **SSR crash**: `createPortal` ran into `document.body` whenever `isVisible` was true, even on
+  the server, where `document` doesn't exist. The portal is now deferred behind a `mounted` flag,
+  so it only renders after the client mounts.
+- **Broken `ref` when `tooltipContent` is falsy**: the early `return <>{children}</>` skipped the
+  `wrapperRef` wiring entirely, leaving the forwarded `ref` permanently `null`. The trigger now
+  always renders through the normal `ref` path; only the tooltip markup is skipped when there's no
+  content.

.changeset/input-semantic-tokens.md

@@ -0,0 +1,11 @@
+---
+"@sipe-team/input": minor
+---
+
+Apply semantic design tokens and field API updates to Input
+
+- Replace local color/spacing/typography with semantic `vars`
+- Fix `fontWeight` to regular (prop removed pending design review)
+- Move field chrome (border/focus) onto the `input` element; use `span` wrapper
+- Add `validation` prop for border-only `error` / `success` states (FormField-ready)
+- Style native `readOnly` distinctly from `disabled` (muted background, default cursor)

.changeset/package-json-divergence-cleanup.md

@@ -0,0 +1,14 @@
+---
+"@sipe-team/accordion": patch
+"@sipe-team/avatar": patch
+"@sipe-team/checkbox": patch
+"@sipe-team/divider": patch
+"@sipe-team/plugin-figma-codegen": patch
+"@sipe-team/radio": patch
+"@sipe-team/side": patch
+"@sipe-team/switch": patch
+"@sipe-team/theme": patch
+"@sipe-team/typography": patch
+---
+
+Align existing `@sipe-team/*` `package.json` metadata with the canonical shape. Adds `publishConfig.registry` to divider/radio/side/switch, unifies `lint` scripts on `pnpm exec biome lint`, normalizes `workspace:^` → `workspace:*` in avatar/switch/typography, and moves accordion/theme/checkbox direct `react`, `@types/react`, `react-dom`, and `@vanilla-extract/css` specifiers to the pnpm catalog.

.changeset/provider-wonju.md

@@ -0,0 +1,13 @@
+---
+"@sipe-team/theme": major
+"@sipe-team/tokens": minor
+---
+
+Replace brand-color ThemeProvider with light/dark mode toggle and align design tokens with SSOT.
+
+- `ThemeProvider` now applies themes via `data-theme` attribute instead of `assignInlineVars`
+- `theme` prop changed from brand-color objects to `'light' | 'dark'` string union
+- `ThemeMode` type is now exported from `@sipe-team/tokens`
+- VE contract structure for `color`, `spacing`, and `radius` reorganized into semantic token hierarchy
+- Token values in `themes.css.ts` now reference Style Dictionary CSS variables instead of hardcoded JS constants
+- Removed `@vanilla-extract/dynamic` dependency from `@sipe-team/theme`

.changeset/radio-shared-use-id.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/radio": patch
+---
+
+Source Radio's and RadioGroup's internal `id`/`name` fallback from `@sipe-team/hooks`'s `useId` instead of calling React's `useId` directly. Behavior is unchanged aside from the generated id now carrying a `side-` prefix.

.changeset/reset-css-export-path.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/reset": patch
+---
+
+Point the `./reset.css` export at the emitted stylesheet. It referenced `./dist/reset.css`, but the build emits `./dist/index.css`, so importing `@sipe-team/reset/reset.css` failed to resolve.

.changeset/semantic-tokens-foundation.md

@@ -0,0 +1,30 @@
+---
+"@sipe-team/tokens": major
+"@sipe-team/button": patch
+---
+
+redesign token contract structure with semantic color, spacing, and radius hierarchy
+
+## Breaking Changes
+
+### `vars` path changes
+
+| Token | Before | After |
+|-------|--------|-------|
+| color | `vars.color.primary` `vars.color.background` `vars.color.text` | `vars.color.accent.{default\|hover\|subtle}` `vars.color.background.{base\|subtle\|muted}` `vars.color.foreground.{default\|subtle\|muted\|onAccent}` `vars.color.border.{default\|strong\|focus}` `vars.color.status.{success\|warning\|danger\|info}.{foreground\|background\|border}` |
+| spacing | `vars.spacing.{xs\|sm\|md\|lg\|xl}` | `vars.spacing.component.{xs\|sm\|md\|lg\|xl}` `vars.spacing.layout.{sm\|md\|lg\|xl}` |
+| radius | `vars.radius.{none\|sm\|md\|lg\|xl\|full}` | `vars.radius.component.{sm\|md\|lg\|xl\|full}` `vars.radius.layout.{sm\|md\|lg}` |
+
+`vars.color.gradient` and `vars.color.secondary` have been removed.
+
+### `defaultTheme` export removed
+
+`defaultTheme` is no longer exported from `@sipe-team/tokens`. Theme variables are now applied automatically via `createGlobalTheme` on `:root`. Remove any explicit `defaultTheme` import or usage.
+
+### Default color mode changed to dark
+
+The `:root` theme now defaults to `mode: 'dark'` (previously `mode: 'light'`). If your app relied on the light-mode defaults from `:root`, you will need to apply a `[data-theme]` attribute or supply your own light-mode overrides.
+
+### Deprecated named exports
+
+`opacity`, `zIndex`, `borderWidth`, `borderStyle`, `shadows`, `breakpoints`, `breakpointQuery`, `responsiveStyle`, `grid` and their associated types are deprecated and will be removed in a future release.

.changeset/spicy-wasps-clap.md

@@ -0,0 +1,20 @@
+---
+"@sipe-team/accordion": patch
+"@sipe-team/checkbox": patch
+"@sipe-team/skeleton": patch
+"@sipe-team/divider": patch
+"@sipe-team/tooltip": patch
+"@sipe-team/button": patch
+"@sipe-team/switch": patch
+"@sipe-team/badge": patch
+"@sipe-team/input": patch
+"@sipe-team/radio": patch
+"@sipe-team/reset": patch
+"@sipe-team/card": patch
+"@sipe-team/flex": patch
+"@sipe-team/grid": patch
+"@sipe-team/side": patch
+"@sipe-team/typography": patch
+---
+
+Preserve CSS imports in `sideEffects` so consumer bundlers don't tree-shake `./styles.css`.

.changeset/tidy-planets-divide.md

@@ -0,0 +1,6 @@
+---
+"@sipe-team/image": minor
+"@sipe-team/side": minor
+---
+
+Add @sipe-team/image and refine after PR review. Forward onLoad callbacks and add radius token prop.

.changeset/tokenize-tooltip-styles.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/tooltip": patch
+---
+
+Replace tooltip styles with design token references while preserving the rendered values.

.changeset/tokens-token-names-resolution.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/tokens": patch
+---
+
+Fix `@sipe-team/tokens/token-names` failing to resolve under node16 ESM. The generated barrel declaration re-exported `./primitive` and `./semantic` without runtime extensions, and the types-only semantic layer had no runtime module behind it, so TypeScript could not resolve the sibling declarations. The barrel now emits extension-qualified specifiers and a runtime stub for the semantic layer.

.changeset/tooltip-shared-use-id.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/tooltip": patch
+---
+
+Source Tooltip's internal `id` from `@sipe-team/hooks`'s `useId` instead of calling React's `useId` directly. Behavior is unchanged aside from the generated id now carrying a `side-` prefix.

.changeset/wet-pants-train.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/tooltip": patch
+---
+
+improve accessibility and refactor styles for Tooltip

.mise.toml

@@ -1,3 +1,3 @@
 [tools]
-node = "22.22.2"
+node = "24.19.0"
 pnpm = "10.33.0"

AGENTS.md

@@ -11,8 +11,8 @@
 ## 빌드, 테스트, 개발 명령어
 
 ```bash
-mise install                        # Node v22.22.2 + pnpm 10.33.0 설치 (.mise.toml 기반)
-pnpm install                        # 의존성 설치 (pnpm 10.33.0, Node v22.22.2)
+mise install                        # Node v24.19.0 + pnpm 10.33.0 설치 (.mise.toml 기반)
+pnpm install                        # 의존성 설치 (pnpm 10.33.0, Node v24.19.0)
 pnpm dev:storybook                  # Storybook 개발 서버 실행 (:6006)
 pnpm build:storybook                # Storybook 빌드
 pnpm lint                           # Biome 린트 + 수정 (변경된 패키지)

package.json

@@ -35,7 +35,7 @@
     "@storybook/react": "catalog:",
     "@storybook/react-vite": "catalog:",
     "@tsconfig/strictest": "^2.0.5",
-    "@types/node": "^22.8.1",
+    "@types/node": "^24",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vanilla-extract/esbuild-plugin": "catalog:",
@@ -61,7 +61,7 @@
   },
   "packageManager": "pnpm@10.33.0",
   "engines": {
-    "node": ">=22.22.2 <23",
+    "node": "24.x",
     "pnpm": "10.33.0"
   },
   "lint-staged": {

packages/accordion/package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "catalog:",
+    "@sipe-team/hooks": "workspace:*",
     "@sipe-team/tokens": "workspace:*",
     "@vanilla-extract/css": "catalog:",
     "@vanilla-extract/recipes": "catalog:",