Changelog

Attachment Field 관련 컴포넌트를 추가합니다. 555525a

• Attachment Field: 파일을 선택하거나 드래그 앤 드롭으로 직접 업로드할 때 사용합니다.
• Attachment Display Field: 외부 소스에서 URL로 제공된 미디어를 표시·관리할 때 사용합니다.

Attachment Field 관련 컴포넌트를 추가합니다. 555525a

• Attachment Field: 파일을 선택하거나 드래그 앤 드롭으로 직접 업로드할 때 사용합니다.
• Attachment Display Field: 외부 소스에서 URL로 제공된 미디어를 표시·관리할 때 사용합니다.

Attachment Field 관련 컴포넌트를 추가합니다. 555525a

• Attachment Field: 파일을 선택하거나 드래그 앤 드롭으로 직접 업로드할 때 사용합니다.
• Attachment Display Field: 외부 소스에서 URL로 제공된 미디어를 표시·관리할 때 사용합니다.

Menu 컴포넌트를 추가합니다. 69e3b97

Drawer를 연 뒤 Drawer 뒤 요소에 포커스가 남아 있는 문제를 수정합니다. Drawer가 열리는 경우 Drawer.Content에 자동으로 포커스가 이동합니다.

• Drawer.RootProps의 autoFocus 기본값을 false에서 true로 변경합니다.
• 스크린 리더가 modal=true (기본값)인 Dialog 및 Drawer 뒤 요소를 읽을 수 있는 문제를 수정합니다.

Dialog(AlertDialog, MenuSheet)와 Drawer(BottomSheet)를 @radix-ui/react-dismissable-layer에서 자체 useDismissibleLayer 훅 기반으로 리팩터링하고 불필요하게 외부로 노출되던 내부 옵션들을 제거합니다.

• DialogRoot 및 DrawerRoot의 onOpenChange 두 번째 인자 details.reason이 interactOutside인 경우 details.event의 타입을 PointerEvent | FocusEvent에서 PointerEvent | TouchEvent | FocusEvent로 변경합니다.
• DialogRoot 및 DrawerRoot 두 번째 인자 details의 reason으로 cascadeDismiss를 추가합니다. 두 개 이상의 오버레이 컴포넌트를 표시한 상황에서 하위 컴포넌트가 dismiss되는 경우 상위 컴포넌트는 cascadeDismiss와 함께 onOpenChange가 호출됩니다.
• @seed-design/react 패키지에서 @radix-ui/react-dialog 의존성을 제거합니다.

1.2에서 deprecate된 옵션을 제거합니다. 60d1a82

• 색상 토큰
  • $color.bg.layer-fill: 라이트 및 다크 모드에서 모두 테스트 후 $color.bg.neutral-weak으로 대체할 수 있습니다.
• 그라디언트 토큰
  • $gradient.fade-layer-floating
  • $gradient.fade-layer-default
• Chip Tabs의 brandSolid variant
• AppBar의 divider 옵션
• Image Frame의 rounded variant: borderRadius 옵션을 사용해주세요.
• Switch의 small 및 medium size: 각각 16과 32를 사용해주세요.
• Checkbox의 default 및 stronger weight: 각각 regular와 bold를 사용해주세요.
• <Box display="inlineFlex" /> 등 유틸리티 컴포넌트 레이아웃 프로퍼티의 camelCase 옵션: kebab-case 옵션을 사용해주세요.
  • display, justifyContent, justify, alignItems, align, alignContent, alignSelf, flexDirection, direction
• AppBar의 divider 옵션
  • 하단 구분선이 더 이상 표시되지 않습니다.
• BottomSheetRoot (DrawerRoot)의 noBodyStyles 옵션
  • 제거되어 기본값(true)처럼 동작합니다.
• BottomSheetRoot (DrawerRoot)의 preventScrollRestoration 옵션
  • 제거되어 기본값(false)처럼 동작합니다.
• BottomSheetRoot의 direction 옵션
  • BottomSheet는 항상 아래에서 올라오므로 direction을 받지 않습니다.
• BottomSheetBackdrop (DrawerBackdrop)의 forceMount 옵션
  • 제거되어 BottomSheetRoot (DrawerRoot)의 lazyMount/unmountOnExit 옵션으로 대체할 수 있습니다.
• BottomSheetContent (DrawerContent)의 onPointerDownOutside, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onInteractOutside, forceMount, onFocusOutside 옵션
  • 제거되어 BottomSheetRoot (DrawerRoot)의 onOpenChange 두 번째 인자 details를 통해 대체할 수 있습니다.

Menu 컴포넌트를 추가합니다. 69e3b97

Drawer를 연 뒤 Drawer 뒤 요소에 포커스가 남아 있는 문제를 수정합니다. Drawer가 열리는 경우 Drawer.Content에 자동으로 포커스가 이동합니다.

• Drawer.RootProps의 autoFocus 기본값을 false에서 true로 변경합니다.
• 스크린 리더가 modal=true (기본값)인 Dialog 및 Drawer 뒤 요소를 읽을 수 있는 문제를 수정합니다.

Dialog(AlertDialog, MenuSheet)와 Drawer(BottomSheet)를 @radix-ui/react-dismissable-layer에서 자체 useDismissibleLayer 훅 기반으로 리팩터링하고 불필요하게 외부로 노출되던 내부 옵션들을 제거합니다.

• DialogRoot 및 DrawerRoot의 onOpenChange 두 번째 인자 details.reason이 interactOutside인 경우 details.event의 타입을 PointerEvent | FocusEvent에서 PointerEvent | TouchEvent | FocusEvent로 변경합니다.
• DialogRoot 및 DrawerRoot 두 번째 인자 details의 reason으로 cascadeDismiss를 추가합니다. 두 개 이상의 오버레이 컴포넌트를 표시한 상황에서 하위 컴포넌트가 dismiss되는 경우 상위 컴포넌트는 cascadeDismiss와 함께 onOpenChange가 호출됩니다.
• @seed-design/react 패키지에서 @radix-ui/react-dialog 의존성을 제거합니다.

1.2에서 deprecate된 옵션을 제거합니다. 60d1a82

• 색상 토큰
  • $color.bg.layer-fill: 라이트 및 다크 모드에서 모두 테스트 후 $color.bg.neutral-weak으로 대체할 수 있습니다.
• 그라디언트 토큰
  • $gradient.fade-layer-floating
  • $gradient.fade-layer-default
• Chip Tabs의 brandSolid variant
• AppBar의 divider 옵션
• Image Frame의 rounded variant: borderRadius 옵션을 사용해주세요.
• Switch의 small 및 medium size: 각각 16과 32를 사용해주세요.
• Checkbox의 default 및 stronger weight: 각각 regular와 bold를 사용해주세요.
• <Box display="inlineFlex" /> 등 유틸리티 컴포넌트 레이아웃 프로퍼티의 camelCase 옵션: kebab-case 옵션을 사용해주세요.
  • display, justifyContent, justify, alignItems, align, alignContent, alignSelf, flexDirection, direction
• AppBar의 divider 옵션
  • 하단 구분선이 더 이상 표시되지 않습니다.
• BottomSheetRoot (DrawerRoot)의 noBodyStyles 옵션
  • 제거되어 기본값(true)처럼 동작합니다.
• BottomSheetRoot (DrawerRoot)의 preventScrollRestoration 옵션
  • 제거되어 기본값(false)처럼 동작합니다.
• BottomSheetRoot의 direction 옵션
  • BottomSheet는 항상 아래에서 올라오므로 direction을 받지 않습니다.
• BottomSheetBackdrop (DrawerBackdrop)의 forceMount 옵션
  • 제거되어 BottomSheetRoot (DrawerRoot)의 lazyMount/unmountOnExit 옵션으로 대체할 수 있습니다.
• BottomSheetContent (DrawerContent)의 onPointerDownOutside, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onInteractOutside, forceMount, onFocusOutside 옵션
  • 제거되어 BottomSheetRoot (DrawerRoot)의 onOpenChange 두 번째 인자 details를 통해 대체할 수 있습니다.

Menu 컴포넌트를 추가합니다. 69e3b97

Drawer를 연 뒤 Drawer 뒤 요소에 포커스가 남아 있는 문제를 수정합니다. Drawer가 열리는 경우 Drawer.Content에 자동으로 포커스가 이동합니다.

• Drawer.RootProps의 autoFocus 기본값을 false에서 true로 변경합니다.
• 스크린 리더가 modal=true (기본값)인 Dialog 및 Drawer 뒤 요소를 읽을 수 있는 문제를 수정합니다.

Dialog(AlertDialog, MenuSheet)와 Drawer(BottomSheet)를 @radix-ui/react-dismissable-layer에서 자체 useDismissibleLayer 훅 기반으로 리팩터링하고 불필요하게 외부로 노출되던 내부 옵션들을 제거합니다.

• DialogRoot 및 DrawerRoot의 onOpenChange 두 번째 인자 details.reason이 interactOutside인 경우 details.event의 타입을 PointerEvent | FocusEvent에서 PointerEvent | TouchEvent | FocusEvent로 변경합니다.
• DialogRoot 및 DrawerRoot 두 번째 인자 details의 reason으로 cascadeDismiss를 추가합니다. 두 개 이상의 오버레이 컴포넌트를 표시한 상황에서 하위 컴포넌트가 dismiss되는 경우 상위 컴포넌트는 cascadeDismiss와 함께 onOpenChange가 호출됩니다.
• @seed-design/react 패키지에서 @radix-ui/react-dialog 의존성을 제거합니다.

Snackbar 내부 액션 버튼 클릭 시 onAction 핸들러 호출 이후 스낵바가 닫히는 동작을 기본값으로 제공합니다. afb77c5

• snippet에 존재하던 deprecate된 shouldCloseOnAction 옵션(default: true)을 제거합니다.
• 해당 동작을 React 컴포넌트로 이전하여 항상 true처럼 동작하도록 변경합니다.

Accordion 컴포넌트를 추가합니다. 31bf164

• 여러 개의 관련된 콘텐츠 섹션을 수직으로 나열하고, 각 섹션을 펼치거나 접어 정보를 탐색할 수 있는 컴포넌트입니다.

AlertDialog, MenuSheet 등 Dialog 기반 컴포넌트가 열릴 때 첫 항목 대신 컨테이너에 포커스가 가도록 수정합니다. 26b1de5

• URL로 직접 진입해 열었을 때 첫 항목에 포커스 링이 노출되던 문제를 수정합니다.
• 스크린리더가 다이얼로그의 제목과 설명을 먼저 읽도록 초기 포커스를 컨테이너로 옮깁니다.

Snackbar가 표시된 상태에서 새 Snackbar를 create할 때의 동작을 정의하는 strategy 옵션을 추가합니다. 기본값은 immediate로, 새 Snackbar가 기존 Snackbar를 즉시 교체합니다. 840f5d5

• 기존 스낵바에 할당된 시간이 모두 지난 뒤 새 Snackbar가 표시되는 이전 버전의 기존 동작을 선호하는 경우 SnackbarProvider 또는 useSnackbarAdapter 옵션으로 queued를 사용할 수 있습니다.
• immediate 옵션을 모방하기 위해 dismiss() 후 setTimeout(() => create(...), 0)하던 workaround와 함께 사용해도 정상 동작하지만, 동작이 동일하므로 workaround는 제거하는 것을 권장합니다.

TabsCarousel의 autoHeight와 lazyMount를 함께 사용할 때 lazy content 마운트 후 높이가 갱신되지 않는 문제를 수정합니다. db6ea04

• Embla v8 AutoHeight 플러그인이 slide 내부 content의 높이 변화를 감지하지 못하는 알려진 이슈에 대해 watchResize workaround를 적용합니다.

마우스/키보드 사용 환경에서 Slider의 사용성을 개선합니다. fe1cdb3

• Slider valueIndicatorTrigger에 "auto" 옵션을 추가하여 마우스를 사용하는 환경에서 thumb에 hover할 때, 터치 환경에서 thumb을 누를 때 value indicator가 표시되도록 하고 valueIndicatorTrigger 기본값을 "active"에서 "auto"로 변경합니다.
• Slider thumb에 focus할 때 value indicator가 표시되도록 수정합니다.

AlertDialogRoot, MenuSheetRoot 및 BottomSheetRoot의 onOpenChange 두 번째 인자로 details를 제공합니다. details.reason과 details.event를 사용할 수 있습니다. 576c2e6

DialogAction을 DialogPrimitive.CloseButton으로 교체합니다. AlertDialogAction onClick 핸들러에서 event.preventDefault()를 호출하여 닫기 동작을 방지할 수 있습니다. (예제)

AlertDialogRoot, MenuSheetRoot 및 BottomSheetRoot의 onOpenChange 두 번째 인자로 details를 제공합니다. details.reason과 details.event를 사용할 수 있습니다. 576c2e6

DialogAction을 DialogPrimitive.CloseButton으로 교체합니다. AlertDialogAction onClick 핸들러에서 event.preventDefault()를 호출하여 닫기 동작을 방지할 수 있습니다. (예제)

AlertDialog 닫힐 때 focus 복원으로 인해 BottomSheet가 즉시 닫히는 문제 수정 8188130

• onFocusOutside에서 항상 preventDefault 호출
• onInteractOutside에서 defaultPrevented 체크 추가

BottomSheet showCloseButton variant 변경 및 animation 버그 수정 9cbeba0

• showCloseButton variant 변경: CloseButton 미사용 시 header padding 조정 가능
• hasEntered 상태 추가: modal prop 변경 시 enter animation 재실행 방지

Checkbox 관련 컴포넌트를 추가합니다. 98dbac4

• CheckboxGroup snippet 컴포넌트가 추가되었습니다. 사용하려면 snippet을 다시 내려받아 주세요.
  • npx @seed-design/cli@latest add ui:checkbox
  • CheckboxGroup은 자체적으로 gap과 100% width를 갖습니다. VStack을 사용하여 Checkbox를 묶지 않아도 됩니다.
    • 기존 Checkbox를 CheckboxGroup으로 감쌀 필요는 없습니다. CheckboxGroup은 선택적으로 사용할 수 있습니다.
  • label, description, errorMessage, indicator, showRequiredIndicator, labelWeight prop을 사용할 수 있습니다.

Radio Group 관련 컴포넌트를 업데이트합니다.

• 1.1 → 1.2 업그레이드 시 snippet 업데이트 필요: RadioGroup snippet의 내부 구조가 변경되었습니다. snippet을 다시 내려받아 주세요.

  • npx @seed-design/cli@latest add ui:radio-group
  • RadioGroup이 자체적으로 gap과 100% width를 갖습니다. VStack을 사용하여 RadioGroupItem을 묶는 코드를 제거합니다.
    • 1.1 → 1.2 업그레이드 시 변경 필요: RadioGroupItem을 묶어서 사용하던 VStack을 제거하여 RadioGroupItem이 RadioGroup의 direct child가 되도록 변경하세요.
  • label, description, errorMessage, indicator, showRequiredIndicator, labelWeight prop을 사용할 수 있습니다.
  • @seed-design/react의 RadioGroup.Root를 레이아웃 컴포넌트로 변경합니다.
    • @seed-design/react에서 직접 import해서 사용하는 코드가 있다면 RadioGroup.Root를 @seed-design/react/primitive의 RadioGroup.Root로 변경해주세요.

RadioGroupItem, RadioChipItem, RadioSelectBoxItem, ListRadioItem에서 invalid prop이 제거되었습니다.

• 1.1 → 1.2 업그레이드 시 확인 필요: invalid 상태는 group/field 레벨에서 설정해주세요. 각 항목을 data-invalid 속성으로 스타일링하는 경우 확인이 필요합니다.

Select Box 관련 컴포넌트를 업데이트합니다. 2643d17

• 1.1 → 1.2 업그레이드 시 snippet을 다시 내려받아 주세요.
  • npx @seed-design/cli@latest add ui:select-box
• CheckSelectBoxGroup, RadioSelectBoxRoot의 children이 기본적으로 gap이 포함된 그리드 레이아웃으로 정렬됩니다.
  • 1.1 → 1.2 업그레이드 시 변경 필요: CheckSelectBox, RadioSelectBoxItem을 묶어서 사용하던 VStack을 제거하여 CheckSelectBox와 RadioSelectBoxItem이 CheckSelectBoxGroup 또는 RadioSelectBoxRoot의 direct child가 되도록 변경하세요. VStack에 gap 이외의 스타일이 적용된 경우 <VStack paddingX="x4"><CheckSelectBoxGroup>...</CheckSelectBoxGroup></VStack>와 같이 VStack을 외부에 남겨두세요.
  • 기능 추가: CheckSelectBoxGroup와 RadioSelectBoxRoot에 columns를 지정할 수 있습니다. columns가 2 이상인 경우 하위 항목에 기본적으로 layout="vertical"이 적용됩니다. 기본 layout은 하위 항목에서 오버라이드할 수 있습니다.
  • 기능 추가: CheckSelectBoxGroup과 RadioSelectBoxRoot에 label, description, errorMessage, indicator 등 Fieldset 관련 prop을 사용할 수 있습니다.
• 1.1 → 1.2 업그레이드 시 변경 필요: CheckSelectBox, RadioSelectBoxItem에 기본적으로 표시되던 Checkmark와 RadioMark가 이제 표시되지 않습니다. suffix prop을 통해 선택적으로 추가할 수 있습니다.
  • 단순 마이그레이션 시 suffix={<CheckSelectBoxCheckmark />}와 suffix={<RadioSelectBoxRadiomark />}를 추가하세요.
• 기능 추가: prefixIcon, footer, footerVisibility prop 추가
  • footer에 넣는 요소는 기본적으로 해당 CheckSelectBox 또는 RadioSelectBoxItem가 선택된 상태일 때 표시됩니다. footerVisibility="always"를 설정하여 footer 요소를 항상 표시할 수 있습니다.
• label이 기본적으로 가로 나열되며 $dimension.x2 gap을 갖는 flex container로 변경되었습니다.
  • 1.1 → 1.2 업그레이드 시 확인 권장: label={<HStack gap="x2">{/* ... */}</HStack>}와 같은 코드는 HStack을 Fragment 등으로 대체할 수 있습니다.
• 문제 수정: CheckSelectBox와 RadioSelectBoxItem에서 사용되지 않는 children을 타입 정의에서 제거합니다.
• CheckSelectBoxGroup에 label, aria-label, aria-labelledby 중 아무것도 설정하지 않은 경우 경고를 표시합니다. (RadioSelectBoxRoot는 기존에도 표시)

@seed-design/[email protected] 및 @seed-design/[email protected]에서 제거되는 토큰 및 옵션에 관한 경고를 추가합니다. 50ee0a6

• 1.3에서 제거 예정인 색상 토큰
  • $color.bg.layer-fill
  • $gradient.fade-layer-floating
  • $gradient.fade-layer-default
• 1.3에서 제거 예정인 컴포넌트 variant
  • ChipTabs
    • variant="brandSolid"
      • 1.2까지 사용 가능, 1.3부터 디자인 변경 필요
  • Checkbox
    • weight="default"
      • 0.2.4부터 weight="regular" 사용 가능
      • weight="default"는 1.2까지 사용 가능, 1.3부터 weight="regular"만 허용
    • weight="stronger"
      • 0.2.4부터 weight="bold" 사용 가능
      • weight="stronger"는 1.2까지 사용 가능, 1.3부터 weight="bold"만 허용
  • Switch
    • size="small"
      • 0.1.9부터 size="16" 사용 가능
      • size="small"은 1.2까지 사용 가능, 1.3부터 size="16"만 허용
    • size="medium"
      • 0.1.9부터 size="32" 사용 가능
      • size="medium"은 1.2까지 사용 가능, 1.3부터 size="32"만 허용
  • StyleProps를 상속하는 컴포넌트
    • display, justifyContent/justify, alignItems/align, alignContent, alignSelf, flexDirection/direction 프로퍼티에서의 camelCase 값 제거 예정
      • 0.0.15부터 kebab-case 값 사용 가능
      • camelCase 값은 1.2까지 사용 가능, 1.3부터 kebab-case 값만 허용
      • 예: justifyContent="spaceBetween" → justifyContent="space-between"
    • 영향 범위인 컴포넌트: Box, Flex, HStack, VStack, Article, List (List.Root) 및 ListItem, ListButtonItem, ListLinkItem, ListSwitchItem, ListCheckItem, ListRadioItem (List.Item), BottomSheetBody (BottomSheet.Body), ResponsivePair, Inline (deprecated), Columns, Column (deprecated), Stack (deprecated)

$color.bg.layer-basement 위에서 컴포넌트의 가시성을 보장하기 위해 $color.bg.neutral-weak-alpha 토큰을 추가합니다. 94bebf8

• Chip variant=solid에 적용
• ChipTab variant=neutralSolid에 적용
• SegmentedControl root에 적용

Stackflow와 함께 AppScreen 사용 시 최상위 AppScreen이 push/pop될 때, 이외의 AppScreen이 고유한 transitionStyle을 재생하는 문제를 수정합니다. 같은 스택 내에 여러 transitionStyle이 공존할 때 자연스러운 트랜지션을 제공하기 위해 최상위 AppScreen의 transitionStyle을 재생합니다. (데모) 6d30b72

• 예를 들면, transitionStyle="fadeFromBottomAndroid"인 0번 AppScreen 위에 transitionStyle="slideFromLeftIOS"인 1번 AppScreen이 push되는 경우, 0번 AppScreen이 slideFromLeftIOS 트랜지션을 재생하도록 수정합니다.
  • 0번 AppScreen이 자연스럽게 좌측으로 조금 밀려나며 어두워지고(slideFromLeftIOS) 1번 AppScreen이 우측에서 슬라이드 인(slideFromLeftIOS)

신규 Elevation 가이드에 맞는 shadow 토큰을 추가합니다. cc4a45a

• React: Box, Flex, HStack 등 StyleProps를 사용하는 컴포넌트에서 boxShadow prop을 사용하여 shadow 토큰을 쉽게 사용할 수 있습니다.

• seedFontMultiplier: 폰트 크기 스케일링 계수 (e.g. 0.8, 1.35, 1.5, 1)
• seedFontScaling: 폰트 크기 스케일링 활성화 여부 (e.g. "enabled")

Field(TextField)의 스타일을 수정합니다. a12e49b

• maxGraphemeCount를 사용하지만 description을 사용하지 않는 경우 maxGraphemeCount가 우측이 아닌 좌측에 표시되는 문제를 수정합니다.
• Tailwind Preflight 사용 시 Character Count 영역이 디자인 의도보다 높이를 더 많이 차지하는 문제를 수정합니다.

(BREAKING CHANGE: TextField snippet을 다시 설치해야 합니다.) Text Field 관련 컴포넌트를 업데이트합니다. d6bb84d

• 스타일 업데이트
• size 통일 및 variant (underline) 추가
• 내부적으로 Field 컴포넌트를 사용하도록 변경하여 스타일 일관성 향상

Field Button 컴포넌트를 추가합니다.

(BREAKING CHANGE: TextField snippet을 다시 설치해야 합니다.) Text Field 관련 컴포넌트를 업데이트합니다. d6bb84d

• 스타일 업데이트
• size 통일 및 variant (underline) 추가
• 내부적으로 Field 컴포넌트를 사용하도록 변경하여 스타일 일관성 향상

Field Button 컴포넌트를 추가합니다.

AppBar의 스타일을 업데이트합니다. 1902dfa

• Top Navigation의 title 및 description에 lineHeight 값을 정의합니다. (React AppBar 컴포넌트에 반영됩니다.)
• <Icon /> 컴포넌트를 활용하여 <AppBarIconButton /> 내부 아이콘을 커스터마이징할 수 있도록 수정합니다.

Article 유틸리티 컴포넌트를 추가하고 Text 컴포넌트를 업데이트합니다. f2ddf29

• Article 컴포넌트는 일관된 selection 스타일 및 줄바꿈 정책을 사용할 수 있게 돕습니다.
• Text 컴포넌트에서 textDecorationLine="underline" 및 whiteSpace, userSelect prop을 지원합니다.

HelpBubble의 스타일을 업데이트하고, 신규 기능을 지원합니다. 0b8a02e

• arrowTip이 content에서 떨어져 보이던 문제를 수정합니다.
• title과 description에서 \n을 줄바꿈으로 렌더링하도록 수정합니다.
• closeOnInteractOutside를 false로 설정하여 Help Bubble 외부와 상호작용 시에도 닫히지 않도록 설정할 수 있습니다. (기본값: true)

• Snackbar의 배경색이 다크모드에서 흰색으로 변경됩니다.
• Prefix 요소유무에 따라 여백이 변경됩니다.
• npx @seed-design/cli@latest add ui:snackbar 명령어로 설치하세요.

(BREAKING CHANGE: Snippet을 다시 설치해야 합니다.) Manner Temp, Manner Temp Badge 컴포넌트를 업데이트합니다. e038490

• snippet 내 오타 수정
• 신규 10단계 반영
• 업데이트 가이드
  1. @seed-design/css@latest @seed-design/react@latest 설치
  2. npx @seed-design/cli@latest add ui:manner-temp ui:manner-temp-badge로 snippet 최신화
  3. 온도 범위가 변경되었으므로, <MannerTemp level="l1" /> 혹은 <MannerTempBadge level="l1" />과 같이 level을 직접 지정하여 사용하고 있는 경우가 있는지 확인

(BREAKING CHANGE: SwitchMark 사용을 위해서는 Snippet을 다시 설치해야 합니다.) Switch의 토글 영역만을 정의한 Switch Mark 컴포넌트를 추가합니다. a7d07f0

• npx @seed-design/cli@latest add ui:switch 명령어로 설치하세요.

(BREAKING CHANGE: ListHeader 사용을 위해서는 Snippet을 다시 설치해야 합니다.) List Header 컴포넌트를 추가합니다.

• npx @seed-design/cli@latest add ui:list 명령어로 설치하세요.

Segmented Control 컴포넌트를 업데이트합니다. 0ca19c0

• Notification Badge를 표시하는 notification prop을 추가합니다.
• SegmentedControlItem의 children을 string에서 ReactNode로 확대합니다.
• 스타일을 업데이트합니다.

Switch, Checkmark, Radio Mark의 스타일을 업데이트합니다. 8ebe8a5

• tone=neutral variant를 추가합니다.
• Switch의 thumb 크기를 조정합니다.

Checkbox와 Radio의 weight variant를 default, stronger에서 regular, bold로 수정합니다.

다크 모드에서의 색상 대비 보장을 위해 시맨틱 색상을 수정하고 컴포넌트에서의 색상을 변경합니다. f61b80d

• $color.bg.warning-solid: theme-dark에서 $color.palette.yellow-600 → $color.palette.yellow-800
• $color.bg.warning-solid-pressed: theme-dark에서 $color.palette.yellow-700 → $color.palette.yellow-900
• Badge, Page Banner의 tone=warning, variant=solid variant에서 전경 항목 색상 변경: $color.fg.neutral → $color.palette.static-black-alpha-900

ChipTabs 컴포넌트 Variant, Size 변경 및 디자인 수정 a22b8b9

• variant neutralOutline 추가
• variant brandSolid deprecated
• size(medium(default) | large) 추가

List 컴포넌트를 추가하고, Checkbox 및 Radio 컴포넌트를 개선합니다. 12faf5a

• List 컴포넌트를 제공하여, 정보를 구조화된 목록 형태로 표시할 수 있도록 합니다.
• Checkbox와 Radio의 컨트롤 영역만을 표시하는 Checkmark와 RadioMark를 제공합니다.
• Select Box에서 컨트롤 영역을 Checkmark와 RadioMark로 교체합니다.
• RadioGroup 컴포넌트를 제공합니다.

Chip 컴포넌트를 업데이트합니다. 35984d0

• 아이콘에 트랜지션 효과가 적용되지 않던 현상을 수정합니다.
• Button, Toggle 등 사용되는 방식에 따라 적절한 data prop을 받도록 수정합니다.

시맨틱 stroke 컬러 토큰을 업데이트합니다. 8448880

이름이 변경되는 stroke 토큰

• Color Role 규칙에 맞춰 일관적인 토큰 이름을 유지할 수 있도록 업데이트합니다.
• 이름이 변경되는 stroke 토큰을 사용하고 있는 경우, 간단한 Find & Replace 마이그레이션이 필요합니다.

색상이 변경되는 stroke 토큰 (마이그레이션 불필요)

$color.stroke.neutral-contrast (이름 변경 전 $color.stroke.field-focused)

모든 theme mode에서 $color.palette.gray-800 → $color.palette.gray-1000로 변경되었습니다.

신규 stroke 토큰 (마이그레이션 불필요)

font-size, line-height 토큰에 static variant를 추가합니다. c51a261

• --seed-font-size-t1-static ~ --seed-font-size-t10-static
• --seed-line-height-t1-static ~ --seed-line-height-t10-static

Snackbar 컴포넌트를 업데이트합니다. 8299ba9

• root 영역에 maxWidth 스펙을 추가합니다.
• pauseOnInteraction의 기본값을 false에서 true로 변경합니다.

플랫폼별 조건부 폰트 스케일링 제한 (iOS: 135%, Android: 150%) 적용 3de4cec

• CSS 변수 --seed-{font-size|line-height}-limit-{min|max} 도입
• 빌드 타임 basePx 계산을 런타임 static 토큰 참조로 대체
• global.ts에 폰트 스케일링 변수 통합

Snackbar 컴포넌트를 업데이트합니다. 8299ba9

• root 영역에 maxWidth 스펙을 추가합니다.
• pauseOnInteraction의 기본값을 false에서 true로 변경합니다.

Page Banner 컴포넌트를 추가합니다. Inline Banner 컴포넌트를 deprecate합니다. f806356

• Inline Banner 컴포넌트 대비 모든 tone에서 모든 variant를 지원하며, 내부 Button의 충분한 터치 영역을 보장합니다.

시맨틱 색상 토큰을 추가하고 수정합니다.

• $color.bg.positive-solid-pressed: theme-dark에서 $color.palette.green-500 → $color.palette.green-600
• $color.bg.warning-solid-pressed 추가

Badge 컴포넌트를 업데이트합니다. 1982494

• tone=warning variant를 추가합니다.
• maxWidth 스펙을 추가합니다.

신규 시맨틱 색상 토큰을 추가합니다.

• $color.fg.warning
• $color.stroke.warning
• $color.fg.brand-contrast
• $color.bg.brand-weak
• $color.bg.brand-weak-pressed

Help Bubble의 스타일 문제를 수정합니다. 62094b6

• placement=left-* / placement=right-*에서 arrow가 content와 떨어져 표시되는 문제를 수정합니다.

Help Bubble의 스타일 문제를 수정합니다. 62094b6

• placement=left-* / placement=right-*에서 arrow가 content와 떨어져 표시되는 문제를 수정합니다.

Bottom Sheet의 스타일 문제를 수정해요. ef91c21

• Close Button에 브라우저 기본 스타일이 표시되는 문제를 수정해요.

Switch 컴포넌트를 업데이트합니다. 5a025b7

• size: medium → 32, small → 16으로 rename합니다.
  • (React) size="medium"으로 32, size="small"로 16을 사용할 수 있습니다. (deprecated)
• size: 24를 추가합니다.
• 모든 size에 대해 레이블 스타일을 추가합니다. (기존: small에만 존재)

Chip.Root position: relative 속성 추가 ac35731

• 이제 Chip.Toggle을 사용해도 예상치 못한 스크롤이 발생하지 않습니다.

CheckSelectBox, RadioSelectBox의 label, description 영역을 수정합니다. f9041e9

• span 대신 div를 렌더링합니다.
• 기본적으로 grow하도록 만들어 Badge 등 추가 요소를 넣기 쉽게 만듭니다.

iOS의 더 큰 텍스트 기능에 제한을 둡니다. 609b8f3

• iOS는 7단계(XS ~ XXXL)의 텍스트 크기 조절 이외에도, 보다 더 큰 텍스트를 위한 더 큰 텍스트 기능을 제공합니다.
• iOS 네이티브에서는 더 큰 텍스트의 UI 레이아웃 대응이 어렵다고 결정하여, XXXL(135%) 이상의 텍스트 크기 조절을 지원하지 않습니다.
• 웹뷰도 iOS와 동일한 제한을 위한 기능이 추가되었습니다.

MultilineTextField의 스타일 문제를 수정합니다. 4afe80b

• 스크롤바가 요소 끝에 표시되도록 수정합니다.

Menu Sheet 컴포넌트를 추가하는 동시에 Action Sheet과 Extended Action Sheet 컴포넌트를 deprecate합니다. 861ecb4

• Menu Sheet React 문서
• Menu Sheet는 기존 Extended Action Sheet의 모든 기능을 포함하는 동시에, labelAlign prop으로 MenuSheetItem를 left 또는 center로 정렬할 수 있습니다.

Inline Banner의 스타일 문제를 수정합니다. 3889eb6

• title과 description이 inline-flex로 레이아웃되던 문제를 해결합니다.
• title과 description 간의 간격을 조정합니다.
• 닫기 버튼(Dismissible)과 suffix icon, link label이 상단으로 레이아웃되던 문제를 해결합니다.

Callout의 스타일 문제를 수정합니다.

• title과 description 간의 간격을 조정합니다.

Chip의 스타일 문제를 수정합니다.

• Chip.Button의 label이 의도한 글꼴로 표시되도록 수정합니다.

Chip 컴포넌트가 추가되고, ActionChip, ControlChip 컴포넌트가 Deprecated 되었습니다. 0ffcd48

• Chip 컴포넌트
• Chip 컴포넌트는 버튼과 토글 컴포넌트를 모두 포함하고 있습니다.

@seed-design/stackflow 백스와이프 애니메이션 개선 cdc0930

• iOS 스타일 화면 전환 애니메이션의 지속 시간과 타이밍 함수가 300ms에서 350ms로 조정되어 더 부드러운 전환 효과를 제공합니다.
• 스와이프 백 제스처 시 애니메이션이 보다 자연스럽고 일관되게 표현됩니다.
• 스와이프 백 종료 시 CSS 변수를 활용해 전환 상태를 명확히 하여 사용자 경험이 개선되었습니다.

그라디언트 토큰 추가 및 변경 946faf7

• fade-layer-floating, fade-layer-default 토큰이 추가되었습니다.
• $gradient.shimmer-magic 토큰 stop color가 변경되었습니다.

iOS Font Scaling 71c58fd

• iOS 기기에서 시스템 폰트 크기 설정에 따라 동적으로 폰트 크기와 줄 높이를 조정하는 폰트 스케일링 옵션이 추가되었습니다.
• 플러그인(webpack, vite, rsbuild)에서 fontScaling 옵션을 통해 폰트 스케일링 기능을 활성화할 수 있습니다.
• data-seed-font-scaling='enabled' 일 때, 폰트 크기를 조정합니다.

• @seed-design/[email protected]

새로운 black, white alpha 값을 추가합니다 f801300

$color.palette.static-black-alpha-50 (예전 값)

• 예전 값: #0000000d (투명도 약 5.1%)
• 변경 값: $color.palette.static-black-alpha-200 (투명도 4.7%)

$color.palette.static-black-alpha-200 (예전 값)

• 예전 값: #00000033 (투명도 20%)
• 변경 값: $color.palette.static-black-alpha-500 (투명도 17.3%)

$color.palette.static-black-alpha-500 (예전 값)

• 예전 값: #00000080 (투명도 약 50.2%)
• 변경 값: $color.palette.static-black-alpha-700 (투명도 45.5%)

$color.palette.static-white-alpha-200 (예전 값)

• 예전 값: #ffffff33 (투명도 20%)
• 변경 값: $color.palette.static-white-alpha-300 (투명도 18%)

$color.palette.static-white-alpha-800 (예전 값)

• 예전 값: #ffffffcc (투명도 약 80%)
• 변경 값: $color.palette.static-white-alpha-800 (투명도 87.1%)
• (참고: 이 값은 이름은 같지만 실제 투명도 값은 80%에서 87.1%로 변경되었습니다.)

• Tabs.Carousel을 사용하는 경우 Hydration 이후 스크롤 애니매이션이 발생하는 문제를 수정합니다. fd7c569
• Tabs.Carousel의 드래그 제스처를 방지하는 영역을 선언할 수 있는 Tabs.carouselPreventDrag api를 추가합니다.
• layout=hug일 때 Indicator에서 발생하는 Layout Shift를 수정합니다.
• lazyMount 옵션이 의도와 다르게 모든 탭이 한꺼번에 마운트되는 문제를 수정합니다.

• Tabs.Carousel을 사용하는 경우 Hydration 이후 스크롤 애니매이션이 발생하는 문제를 수정합니다. fd7c569
• Tabs.Carousel의 드래그 제스처를 방지하는 영역을 선언할 수 있는 Tabs.carouselPreventDrag api를 추가합니다.
• layout=hug일 때 Indicator에서 발생하는 Layout Shift를 수정합니다.
• lazyMount 옵션이 의도와 다르게 모든 탭이 한꺼번에 마운트되는 문제를 수정합니다.

Tabs.Indicator의 width가 첫 렌더링 시 0으로 설정되는 문제를 수정합니다. 739b6bf

Tabs의 불필요한 리렌더링을 줄입니다.

• ContextualFloatingButton과 FloatingActionButton 컴포넌트를 제공합니다. 285cb9b
• 기존의 Fab 및 ExtendedFab를 deprecate합니다.
• Floating 요소들의 위치를 편리하게 제어하도록 Float 유틸리티 컴포넌트를 제공합니다.

• vite dev에서 컴포넌트 스타일시트가 로드되지 않는 버그를 수정합니다. 1bb9f7b
• 플러그인이 컴포넌트 스타일시트를 로드하는 방식을 변경합니다.

• 레이아웃 및 flex 관련 shorthand prop을 추가합니다. (px, py, wrap, align, justify, direction) 4511814
• ActionButton에 flexGrow prop을 추가합니다.
• VStack, HStack 컴포넌트를 추가합니다.
  • Stack, Inline, Columns 컴포넌트를 deprecated 처리합니다.
• 디자인 토큰이 아닌 css prop의 value가 유효한 css value가 되도록 변경합니다.
  • flexStart, spaceBetween 등 camelCase로 제공되는 값을 deprecated 처리합니다.

• vite dev에서 컴포넌트 스타일시트가 로드되지 않는 버그를 수정합니다. 1bb9f7b
• 플러그인이 컴포넌트 스타일시트를 로드하는 방식을 변경합니다.

• 레이아웃 및 flex 관련 shorthand prop을 추가합니다. (px, py, wrap, align, justify, direction) 4511814
• ActionButton에 flexGrow prop을 추가합니다.
• VStack, HStack 컴포넌트를 추가합니다.
  • Stack, Inline, Columns 컴포넌트를 deprecated 처리합니다.
• 디자인 토큰이 아닌 css prop의 value가 유효한 css value가 되도록 변경합니다.
  • flexStart, spaceBetween 등 camelCase로 제공되는 값을 deprecated 처리합니다.

feat: 다크모드에서의 gray200, gray300 색상, 라이트모드 carrot700 색상을 변경해요 d9b01a9

• (light) carrot700: #e84500 -> #e04f00
• (dark) gray300: #2c2f35 -> #2b2e35
• (dark) gray200: #1b1c22 -> #22252b

Notification Badge를 추가합니다. 1424700

• Tabs의 Notification 슬롯을 Notification Badge로 변경합니다.

• neutral tone 색상 변경
• pill shape 삭제

feat: change theming data attribute names 93cfc30

• theming에 사용되는 data attribute 이름을 변경합니다.
• 유저가 선호하는 color scheme과 사전에 지정된 color mode를 구분하기 쉽도록 이름을 부여합니다.
• 파편화된 platform 관련 네이밍을 통일합니다.
• 테마 관련 data attribute가 지정되지 않은 경우 light theme로 fallback하는 동작을 추가합니다.