Lynx
Changelog
최신 업데이트와 변경사항을 기록합니다.
Last updated on
(BREAKING CHANGE: ProgressCircle.Root와 ProgressCircle.Range를 직접 조합한다면 그 사이에 <ProgressCircle.Track />을 추가해야 트랙이 보입니다. seed-progress-circle__root--tone_* CSS 선택자는 seed-progress-circle__track--tone_*로 옮겨야 합니다. Registry 컴포넌트는 npx @seed-design/cli@latest add ui:progress-circle과 npx @seed-design/cli@latest add ui:quantity-picker로 다시 설치해야 합니다.) 524ad2f
ProgressCircle의 배경 트랙을 React와 같이 별도 ProgressCircle.Track 파트로 그립니다.
Root가 tone에 맞는 배경색으로 트랙을 직접 그렸습니다. 이제 Root는 트랙을 그리지 않고, Track이 진행률과 관계없이 전체 링을 tone의 트랙 색으로 그립니다.Track 요소에 적용되므로 tone class가 seed-progress-circle__root--tone_*에서 seed-progress-circle__track--tone_*로 바뀝니다.Track에 className·style을 지정해 트랙만 따로 꾸밀 수 있습니다.(BREAKING CHANGE: Chip.Toggle의 이전 역할을 유지하려면 accessibility-role-description="toggle"을 직접 지정해야 합니다.) 524ad2f
Chip.Toggle과 Chip.RadioRoot의 기본 접근성 역할을 변경합니다.
Chip.Toggle의 기본 accessibility-role-description을 "toggle"에서 "checkbox"로 변경합니다.Chip.RadioRoot에 "radiogroup" 역할을 전달하며, disabled이면 기본 accessibility-traits는 "disabled"입니다. Chip.RadioRoot는 접근성 요소가 아니므로 각 Chip.RadioItem이 따로 노출됩니다.(BREAKING CHANGE: Chip.Toggle의 변경된 선택값을 사용하는 bindtap 작업은 onCheckedChange(next)로, Chip.RadioItem의 작업은 상위 Chip.RadioRoot의 onValueChange(next)로 옮겨야 합니다.) 524ad2f
Chip.Toggle·Chip.RadioItem의 callback 호출 순서를 변경합니다.
bindtap을 호출했지만, 이제 bindtap을 먼저 호출한 뒤 선택 상태를 바꾸고 onCheckedChange·onValueChange로 새 값을 전달합니다.(BREAKING CHANGE: List 선택 행의 이전 접근성 안내가 필요하면 accessibility-value와 accessibility-traits를 직접 지정해야 합니다.) 524ad2f
List.CheckboxItem·List.RadioItem·List.SwitchItem을 각각 하나의 접근성 요소로 안내하도록 기본값을 변경합니다.
accessibility-value는 "선택됨"·"선택 안 됨" 대신 "checked"·"not checked"이며, indeterminate이면 "mixed"입니다.accessibility-value는 "선택됨"·"선택 안 됨" 대신 "selected"·"not selected"입니다.accessibility-value는 "켜짐"·"꺼짐" 대신 "checked"·"not checked"입니다.accessibility-traits="button"을 제거합니다.(BREAKING CHANGE: MenuSheet.List나 .seed-menu-sheet__list로 그룹 배치(flex·gap)를 바꾸고 있었다면 .seed-menu-sheet__listContent를 덮어쓰거나 그룹을 직접 감싼 view로 옮겨야 합니다. AlertDialog.Content의 className·style로 자식 배치를 바꾸고 있었다면 자식을 직접 감싼 view로 옮겨야 합니다. BottomSheet.Body 안에 scroll-view를 두어 긴 내용을 스크롤하고 있었다면 그 scroll-view를 빼고 내용을 Body에 바로 넣고, 높이 제한은 Body의 maxHeight로 옮기고, Body에 준 flex: "none"은 지워야 합니다. Body의 className·style로 자식 배치를 바꾸고 있었다면 .seed-bottom-sheet__scrollContent를 덮어쓰거나 자식을 직접 감싼 view로 옮겨야 하고, Body 안의 ScrollFog에 height: "100%"를 주고 있었다면 고정 높이로 바꿔야 합니다.) 화면 끝을 기준으로 위치를 잡는 Lynx 컴포넌트가 노치·홈 인디케이터·가로 화면의 측면 safe area inset을 피하도록 수정합니다. Backdrop은 그대로 화면 전체를 덮습니다. 20d639c
Dialog·AlertDialog·BottomSheet·MenuSheet는 좌우 inset을 뺀 영역의 가운데에 놓입니다. Dialog의 기본 너비(90%)는 그 영역을 기준으로 계산합니다.Dialog·AlertDialog는 위아래 inset도 피합니다. Dialog의 최대 높이는 화면 높이의 80%와 위아래 inset 사이 높이 중 작은 쪽입니다.AlertDialog.Content는 자식을 세로 scroll-view 안에 렌더해서, 내용이 최대 높이를 넘으면 안에서 스크롤합니다. Content에 준 className·style은 이 scroll-view를 감싼 바깥 view에 적용됩니다.BottomSheet·MenuSheet는 화면 높이의 90%를 넘지 않고, 위쪽 inset이 그보다 크면 inset 아래까지로 제한됩니다. 제한에 닿으면 BottomSheet.Body가 스크롤됩니다.BottomSheet.Body는 자식을 세로 scroll-view 안에 렌더해서, 내용이 넘치면 Body만 스크롤합니다. Body에 준 className·style은 이 scroll-view를 감싼 바깥 view에 적용되고, 자식 배치는 새 scrollContent 슬롯이 맡습니다. Body가 스크롤된 상태에서 시작한 제스처는 Body만 움직이고, Body가 맨 위일 때 아래로 끌어야 시트가 움직입니다.MenuSheet.List는 scroll-view로 렌더해서, 항목이 넘치면 목록만 스크롤하고 헤더와 닫기 버튼은 줄이지 않습니다. List의 className·style·ref는 이 scroll-view에 적용되고, 그룹 배치는 새 listContent 슬롯이 맡습니다. 목록이 스크롤된 상태에서 시작한 제스처는 목록만 움직이고, 목록이 맨 위일 때 아래로 끌어야 시트가 움직입니다.(BREAKING CHANGE: RadioGroup.Root의 value·defaultValue·onValueChange·disabled를 바깥 RadioGroupField.Root로, weight·size·tone을 RadioGroup.Item으로 옮기고 pressed를 제거해야 합니다. Registry 컴포넌트는 npx @seed-design/cli@latest add ui:radio-group와 npx @seed-design/cli@latest add ui:select-box로 다시 설치해야 합니다.) 524ad2f
RadioGroup.Root가 함께 맡던 선택 상태, 항목 스타일, 배치를 분리합니다.
RadioGroup.Root는 항목 배치만 맡고, RadioGroupField.Root가 선택값과 disabled 상태를 제공합니다.weight·size·tone은 Root에서 모든 항목에 적용하는 대신 RadioGroup.Item마다 지정합니다.pressed prop을 제거하고, 각 Item의 실제 눌림에 따라 효과를 표시합니다.@seed-design/lynx-react-radio-group의 RadioGroup.Root로 선택 상태를 관리할 수 있습니다.(BREAKING CHANGE: ReactionButton의 이전 접근성 안내가 필요하면 accessibility-role-description·accessibility-value·accessibility-traits를 직접 지정해야 합니다.) 524ad2f
ReactionButton의 선택 상태를 accessibility-traits="selected" 대신 accessibility-role-description="toggle button"과 accessibility-value="pressed"·"not pressed"로 안내합니다.
disabled 또는 loading이면 기본 accessibility-traits는 "disabled"이며, 직접 지정한 값은 그대로 사용합니다.(BREAKING CHANGE: BottomSheet.Root와 MenuSheet.Root ref의 open()·close() 호출에 의존하던 callback 작업은 앱 코드에서 직접 실행해야 합니다. 제어 상태에서는 ref 호출 대신 open 값을 갱신해야 합니다.) 4f1c681
BottomSheet.Root와 MenuSheet.Root의 onOpenChange를 사용자 동작에 따른 열림 변경 요청으로 구분합니다.
details.reason으로 trigger·closeButton·interactOutside·drag 사유도 전달합니다.open prop 변경은 onOpenChange를 호출하지 않습니다.open을 갱신해야 시트 상태가 바뀝니다. 사유를 사용하지 않는 한 인자 callback은 그대로 사용할 수 있습니다.(BREAKING CHANGE: CheckSelectBox의 이전 접근성 안내가 필요하면 accessibility-value를 직접 지정해야 합니다.) 524ad2f
CheckSelectBox.Root의 기본 accessibility-value를 "selected"·"not selected"에서 "checked"·"not checked"로 변경하고, indeterminate 상태는 "mixed"로 안내합니다.
(BREAKING CHANGE: SelectBoxGroupProps를 CheckSelectBox.GroupProps 또는 RadioSelectBox.GroupProps로, SelectBoxFooterProps를 CheckSelectBox.FooterProps 또는 RadioSelectBox.FooterProps로 변경해야 합니다.) 524ad2f
이전에 공통으로 제공하던 SelectBoxGroupProps·SelectBoxFooterProps export를 제거하고, CheckSelectBox·RadioSelectBox별 GroupProps·FooterProps를 제공합니다.
(BREAKING CHANGE: formatValue에서 읽는 SelectSelectedItem.prefixIcon을 SelectSelectedItem.icon으로 변경해야 합니다.) 524ad2f
formatValue에 전달하는 SelectSelectedItem의 선택 항목 아이콘 필드를 prefixIcon에서 icon으로 변경합니다.
Select.Item에 전달하는 prefixIcon prop은 그대로 사용합니다.(BREAKING CHANGE: Slider.Thumb·Slider.ValueIndicatorRoot·Slider.ValueIndicatorLabel의 index={n}을 thumbIndex={n}으로 변경해야 합니다. 생략한 곳에는 thumbIndex={0}을 지정하고, Registry ui:slider는 npx @seed-design/cli@latest add ui:slider로 다시 설치해야 합니다.) 524ad2f
Slider.Thumb·Slider.ValueIndicatorRoot·Slider.ValueIndicatorLabel이 참조할 thumb를 지정하는 prop을 선택적 index에서 필수 thumbIndex로 변경합니다.
index를 생략하면 첫 thumb를 사용했지만, 이제 각 파트에 thumbIndex를 직접 지정해야 해당 thumb의 위치와 값을 표시합니다.(BREAKING CHANGE: HelpBubble.Arrow 없이 조합한 말풍선의 기존 간격을 유지하려면 HelpBubble.Root에 gutter={oldGutter + 8}을 지정해야 합니다.) 6faa8c1
HelpBubble의 기준 요소와의 간격에 화살표 길이 8px을 더하는 조건을 변경합니다.
HelpBubble.Arrow가 없어도 8px을 더했지만, 이제 화살표를 렌더링할 때만 더합니다.ui:help-bubble의 간격은 그대로 유지합니다.(BREAKING CHANGE: HelpBubble이 첫 바깥 탭을 차단하는 동작에 의존했다면 바깥 요소의 탭 handler에서 말풍선을 닫는 탭에 해당 요소의 동작을 실행하지 않도록 처리해야 합니다.) 6faa8c1
HelpBubble의 closeOnInteractOutside가 바깥 탭을 가로채지 않고 말풍선만 닫도록 변경합니다.
(BREAKING CHANGE: Dialog와 AlertDialog의 dialogContentProps·dialogBackdropProps에서 bindanimationstart·bindanimationend·bindanimationcancel·bindtransitionstart·bindtransitionend를 제거하고, dialogBackdropProps.bindtap은 Backdrop의 onClick으로 옮겨야 합니다. dialogContentProps.bindtap이 실행되면 안 되는 사용처에서는 해당 callback을 제거해야 합니다.) e1a260b
Dialog·AlertDialog의 Content 탭 callback과 AlertDialog.Content에 직접 전달한 접근성 속성을 실제 요소에 적용하도록 변경합니다.
dialogContentProps.bindtap 같은 callback이 Content에서 실행되지 않았습니다. 이제 열림·닫힘 처리용으로 예약된 callback을 제외한 native prop과 callback을 전달합니다.dialogContentProps·dialogBackdropProps의 animation·transition callback과 Backdrop의 nested bindtap은 기존처럼 Dialog의 열림·닫힘 처리를 위해 예약하며, 공개 타입에서도 제외합니다.onClick으로 지정합니다. 이 callback은 clickToClose로 실제로 닫히는 탭에서만 호출됩니다.AlertDialog.Content의 직접 전달한 접근성 속성도 Content에 적용합니다. 같은 속성을 dialogContentProps에도 지정하면 nested 값이 우선합니다.(BREAKING CHANGE: InputButton.*와 InputButtonRoot·InputButtonRootProps 등 InputButton* export를 FieldButton*으로 변경해야 합니다. 직접 사용한 input-button Recipe와 seed-input-button__* class도 field-button 이름으로 변경해야 합니다. Registry ui:field-button은 npx @seed-design/cli@latest add ui:field-button으로 다시 설치하고 inputButtonRef를 controlRef로 변경해야 합니다.) d4a20aa
Lynx 선택값 필드의 이름을 InputButton에서 FieldButton으로 변경하며, 기존 스타일 값은 유지합니다.
InputButton* export를 제거하고 FieldButton* export를 제공합니다.@seed-design/lynx-css/recipes/input-button에서 @seed-design/lynx-css/recipes/field-button으로 바뀝니다.inputButton·inputButtonVariantMap·inputButtonVariantKeys와 InputButtonVariantProps·InputButtonSlotName도 각각 fieldButton*·FieldButton* 이름으로 바뀌며, class는 seed-field-button__*로 생성됩니다.inputButtonRef에서 controlRef로 바뀝니다.(BREAKING CHANGE: Lynx ActionButton의 icon·prefixIcon·suffixIcon prop을 각각 children의 <Icon icon={...} />·<PrefixIcon icon={...} />·<SuffixIcon icon={...} />로 바꿔야 합니다.) 257c335
ActionButton의 아이콘 전달 방식을 React와 같이 children slot으로 통일합니다.
icon·prefixIcon·suffixIcon prop으로 전달한 아이콘도 렌더링했습니다. 이제 이 prop을 제거하고 children에 배치한 Icon·PrefixIcon·SuffixIcon을 렌더링합니다.(BREAKING CHANGE: List.CheckboxItem의 size·variant·tone을 Checkbox.Control로, List.SwitchItem의 size·tone을 Switch.Control로 옮기고 행의 pressed를 제거해야 합니다. List.CheckboxItem의 weight는 제거하고, 글자 굵기가 필요하면 label의 Text에 직접 지정해야 합니다. listItem Recipe를 직접 조합한다면 interactionRoot wrapper를 제거하고 실제 행의 root에 handler와 ref를 연결해야 합니다.) a5af36f
List 선택 행에서 선택 상태와 mark 모양을 분리하고, 행 자체를 조작하는 요소로 사용합니다.
CheckboxItem·SwitchItem의 prop으로 mark 모양을 지정했습니다. 이제 행은 선택 상태를 관리하고, Checkbox.Control·Switch.Control이 각각 size·tone과 Checkbox의 variant를 받습니다.CheckboxItem이 받던 weight를 제거하며, label의 글자 굵기는 Text에서 지정합니다.pressed를 직접 지정하지 않습니다.interactionRoot를 제거하고, handler와 ref를 행의 root에 연결합니다. seed-list-item__interactionRoot class는 더 이상 생성되지 않습니다.(BREAKING CHANGE: Menu.Content를 Menu.Positioner > Menu.Content > Menu.ScrollArea로 감싸고, 기존 native overlay 동작이 필요하면 Menu.Positioner에 실제 native container 이름을 container로 지정해야 합니다. menu Recipe의 backdrop 대신 positioner를 바깥 탭 영역에 사용해야 합니다. Registry 사용자는 npx @seed-design/cli@latest add ui:menu로 재설치해야 합니다.) bb2513e
Menu.Content가 만들던 레이어와 스크롤 영역을 Menu.Positioner·Menu.ScrollArea로 분리합니다.
Content만으로 native overlay와 스크롤 영역을 만들었습니다. 이제 Positioner가 레이어를, Content가 메뉴 표면을, ScrollArea가 목록의 스크롤 영역을 만듭니다.container를 지정하면 기존처럼 host 전체를 덮는 native overlay를 사용합니다.container가 없는 기본 레이어에서는 Android 뒤로 가기로 메뉴가 아닌 host 화면을 닫으며, onOpenChange에 dismiss reason을 전달하지 않습니다.Positioner가 처리하므로 menu Recipe의 backdrop slot을 제거합니다. 최신 Registry snippet은 새 파트 구조를 조합합니다.(BREAKING CHANGE: Accordion.Trigger의 accessibility-value를 expandedAccessibilityValue·collapsedAccessibilityValue로 변경하고, accessibility-traits 사용을 제거해야 합니다. accessibility-traits를 직접 덮어쓰는 대체 API는 제공하지 않습니다.) b1a262d
Lynx 컴포넌트가 일부만 받던 native 속성을 각 파트가 렌더링하는 요소의 속성으로 확장하며, 상태를 알리는 일부 접근성 값은 컴포넌트 상태를 따르도록 변경합니다.
id·accessibility-*·bind*·main-thread:*·data-*와 ref를 전달할 수 있습니다. BottomSheet·MenuSheet의 파트와 AttachmentInput.Root도 지원하며, Box의 터치 handler는 이벤트 인자를 받습니다.className은 합치고 style은 key 단위로 합치며, 이벤트 handler와 ref는 내부 값과 함께 실행합니다.Accordion.Trigger의 accessibility-value·accessibility-traits를 직접 덮어쓸 수 있었습니다. 이제 열림·비활성 상태에 맞는 값을 유지하고, 열림 상태 문구만 expandedAccessibilityValue·collapsedAccessibilityValue로 지정합니다.bindtap·main-thread:bindtap은 기존처럼 호출하지 않습니다. QuantityPicker.DecrementButton의 삭제 상태 문구도 기존처럼 Root.removeAccessibilityLabel로 지정합니다.(BREAKING CHANGE: PrefixIcon·SuffixIcon·Chip.PrefixIcon·Chip.SuffixIcon의 size·color를 제거해야 합니다. 의도적으로 크기나 색상을 덮어쓰려면 style을 사용하고, 독립 아이콘은 Icon의 size·color를 사용해야 합니다. Registry 컴포넌트는 npx @seed-design/cli@latest add ui:attachment-field와 npx @seed-design/cli@latest add ui:attachment-display-field로 다시 설치해야 합니다.) f67beff
Prefix·Suffix 아이콘에서 개별 크기와 색상을 지정하던 size·color prop을 제거하고, 아이콘을 감싼 컴포넌트의 recipe 스타일을 따르도록 변경합니다.
(BREAKING CHANGE: ReactionButton의 변경된 선택값을 사용하는 bindtap 작업은 onPressedChange(next)로 옮겨야 합니다.) 8653a08
ReactionButton의 탭 처리 순서를 선택값 변경 후 bindtap 호출에서 bindtap 호출 후 선택값 변경으로 바꿉니다.
bindtap을 onPressedChange보다 먼저 호출하므로, 변경된 선택값은 onPressedChange(next)에서 받습니다.disabled 또는 loading이면 bindtap과 onPressedChange 모두 호출하지 않습니다.selected trait로 알리던 기본 접근성을 toggle button의 "pressed"·"not pressed" 안내로 변경합니다.(BREAKING CHANGE: ScrollFog 안의 콘텐츠를 직접 <scroll-view scroll-orientation="vertical"> 또는 <scroll-view scroll-orientation="horizontal">로 감싸야 합니다. 자식이 이미 스크롤을 처리하면 추가로 감싸지 않습니다. hideScrollBar 대신 자식 <scroll-view>에 scroll-bar-enable={false}를 지정하고, placement에는 세로 또는 가로 한 축의 방향만 지정해야 합니다. @seed-design/lynx-css/recipes/scroll-fog를 직접 사용한다면 제거된 verticalScroll·horizontalScroll slot에 의존하는 코드를 삭제해야 합니다.) 46ecb70
ScrollFog를 스크롤 영역과 가장자리 mask를 함께 제공하던 컴포넌트에서 mask만 제공하는 컴포넌트로 변경합니다.
<scroll-view>와 hideScrollBar prop을 제거합니다. 스크롤 ref·이벤트·스크롤바는 자식 스크롤 영역에서 제어합니다.placement는 세로 또는 가로 한 축만 지원합니다.scroll-fog Recipe의 verticalScroll·horizontalScroll slot을 제거합니다.(BREAKING CHANGE: Select.Content를 Select.Positioner > Select.Content > Select.ScrollArea로 감싸고, 기존 native overlay 동작이 필요하면 Select.Positioner에 실제 native container 이름을 container로 지정해야 합니다. select Recipe의 backdrop slot을 직접 사용했다면 바깥 탭 영역을 Select.Positioner로 옮겨야 합니다. Registry 사용자는 npx @seed-design/cli@latest add ui:select로 재설치해야 합니다.) e5ebfb1
Select의 선택 목록을 기본 native overlay에서 Lynx view 안의 고정 레이어로 변경하고, 레이어와 스크롤 영역을 별도 파트로 분리합니다.
Content가 레이어와 스크롤 영역을 함께 제공했습니다. 이제 Positioner가 레이어와 바깥 탭 영역을, ScrollArea가 스크롤 영역을 담당합니다.container를 지정하지 않으면 Android 뒤로 가기로 목록이 아닌 host 화면을 닫으며, onOpenChange에 dismiss reason을 전달하지 않습니다. native container를 지정하면 기존 동작을 사용할 수 있습니다.select Recipe의 backdrop slot을 제거합니다.(BREAKING CHANGE: wrap을 사용하는 HStack·VStack의 줄 사이 간격을 확인해야 합니다. 기존 간격을 유지하려면 HStack에 style={{ rowGap: "0px" }}, VStack에 style={{ columnGap: "0px" }}을 지정해야 합니다.) 8cdcd8b
HStack과 VStack의 gap을 한 축에서 가로·세로 두 축에 적용하도록 변경합니다.
HStack의 열 간격과 VStack의 행 간격에만 적용했습니다. 이제 줄바꿈된 HStack의 행 사이와 VStack의 열 사이에도 간격이 생깁니다.style의 rowGap·columnGap은 해당 축에서 gap보다 우선합니다.(BREAKING CHANGE: indeterminate Checkbox에서 이전 접근성 안내를 유지하려면 accessibility-value를 직접 지정해야 합니다.) ee36625
Checkbox.Root의 indeterminate 상태를 기본 접근성 값 "mixed"로 안내합니다.
indeterminate여도 checked에 따라 "checked" 또는 "not checked"를 전달했습니다. 이제 checked 값과 관계없이 "mixed"를 전달합니다.accessibility-value는 기본값보다 우선합니다.(BREAKING CHANGE: SwipeableMenuSheet를 MenuSheet로, SwipeableMenuSheetCloseReason을 MenuSheetOpenChangeReason으로 바꾸고 모든 SwipeableMenuSheet* 타입과 part를 MenuSheet*로 바꿔야 합니다. Registry 사용자는 npx @seed-design/cli@latest add ui:menu-sheet로 새 snippet을 설치하고 ui:swipeable-menu-sheet 호출부와 파일을 제거해야 합니다.) 4f1c681
메뉴 시트의 공개 이름을 SwipeableMenuSheet*에서 MenuSheet*로 변경합니다.
SwipeableMenuSheetCloseReason은 MenuSheetOpenChangeReason으로 바뀝니다.ui:swipeable-menu-sheet에서 ui:menu-sheet으로 바뀝니다. CSS Recipe 이름 menuSheet과 seed-menu-sheet-* class는 그대로입니다.(BREAKING CHANGE: 스크린 리더가 읽어야 하는 Icon·PrefixIcon·SuffixIcon·TextField.PrefixIcon·TextField.SuffixIcon·AttachmentInput.TriggerIcon에는 accessibility-elements-hidden={false}를 지정해야 합니다.) 524ad2f
장식용 아이콘을 기본적으로 접근성 트리에서 숨깁니다.
accessibility-elements-hidden의 기본값이 true이므로 스크린 리더가 별도로 읽지 않습니다.accessibility-label로 설명합니다.(BREAKING CHANGE: <KeyboardAvoidingScrollView>를 <KeyboardAvoidingScrollView.Root>와 그 안의 <KeyboardAvoidingScrollView.Content>로 변경해야 합니다. KeyboardAvoidingScrollViewProps는 KeyboardAvoidingScrollViewRootProps·KeyboardAvoidingScrollViewContentProps로 변경해야 합니다. keyboardGap·scrollBehavior와 바깥 높이는 Root에, 안쪽 여백·스크롤 ref·<scroll-view> 속성과 이벤트는 Content에 전달해야 합니다.) c704e06
하나의 컴포넌트가 키보드 회피와 스크롤을 함께 처리하던 구조를 바깥 레이아웃인 Root와 스크롤 영역인 Content로 나눕니다.
Root는 키보드에 맞춰 영역을 배치하고, Content가 실제 스크롤과 입력 위치 이동을 담당합니다.KeyboardAvoidingScrollView.Footer에는 스크롤 내용과 별도로 키보드 위에 고정할 하단 버튼을 배치할 수 있습니다.(BREAKING CHANGE: 설치한 항목만 남겨 npx @seed-design/cli@latest add ui:switch ui:select-box ui:attachment-field-reorderable ui:attachment-display-field-reorderable ui:callout ui:page-banner ui:dialog ui:alert-dialog ui:list ui:text-field --on-diff backup으로 Registry 컴포넌트를 다시 설치해야 합니다. Switchmark의 상태 prop을 Switch.Root로 옮기고, 로컬 attachment-sortable helper를 @seed-design/lynx-react-sortable로 변경하며, Registry TextField의 nativeInsertionMaxLength 지정을 제거해야 합니다. RadioSelectBoxRoot의 className·style로 grid를 꾸몄다면 안쪽 grid 스타일을 다시 적용해야 합니다.) 524ad2f
패키지 업그레이드만으로는 갱신되지 않는 Registry 컴포넌트를 SEED Lynx 1의 API와 접근성 동작에 맞춰 변경합니다.
Switchmark는 상태를 가진 독립 Root에서 Switch.Root 안의 Control·Thumb 조합으로 바뀝니다. RadioSelectBoxRoot는 Field와 안쪽 grid를 분리하며, className·style은 이제 grid가 아니라 바깥 Field에 적용합니다.HorizontalReorderList·HorizontalReorderItem 대신 Sortable.Root·Sortable.Item을 사용하고, 화면 읽기 프로그램에 이동·삭제·재시도 action을 제공합니다.ActionableCallout·ActionablePageBanner는 이전과 달리 handler가 없어도 button 접근성과 눌림 효과를 제공합니다. DialogAction·AlertDialogAction은 disabled·loading일 때 닫힘을 요청하지 않으며, ListDivider는 직접 지정한 accessibility-element 값을 더 이상 덮어쓰지 않습니다.TextField는 내부에서 관리하는 nativeInsertionMaxLength를 공개 prop에서 제외합니다.(BREAKING CHANGE: thumb·tick·marker의 위치를 직접 지정했다면 --slider-thumb-offset·--slider-tick-offset·--slider-marker-offset을 각각 --slider-thumb-offset-ratio·--slider-tick-offset-ratio·--slider-marker-offset-ratio로 변경하고, 픽셀 값 대신 thumb 크기에 곱할 비율을 사용해야 합니다. --slider-marker-color는 marker의 color 스타일로 변경해야 합니다. Track을 Root보다 좁게 배치했다면 Root와 Track의 가로 범위를 맞추거나 변경된 드래그 범위를 확인해야 합니다.) 524ad2f
슬라이더의 위치 보정을 측정한 픽셀 값에서 thumb 크기에 곱하는 비율로 바꿔, 첫 표시 뒤 thumb 위치가 움직이던 문제를 해결합니다.
--slider-*-offset-ratio를 제공합니다. 직접 작성한 스타일에서는 left: calc(var(--slider-thumb-left) + <thumb 크기> * var(--slider-thumb-offset-ratio))처럼 크기와 비율을 곱합니다. Value Indicator의 픽셀 위치 보정 변수는 유지합니다.--slider-marker-color를 읽지 않고 Recipe의 상태별 색을 사용합니다.Slider.Track 대신 Slider.Root의 가로 범위를 기준으로 계산합니다.(BREAKING CHANGE: AttachmentDisplay.Root·useAttachmentDisplay의 onTriggerTap을 제거하고, 파일 선택 함수를 AttachmentDisplay.Trigger의 bindtap에 연결해야 합니다.) 524ad2f
AttachmentDisplay의 파일 선택 동작을 Root의 callback에서 Trigger의 tap handler로 옮깁니다.
onTriggerTap을 호출하며 addEntries·updateEntryStatus를 인자로 제공했습니다. 이제 Trigger는 자신의 bindtap을 호출합니다.AttachmentDisplay.Context 또는 useAttachmentDisplayContext의 addEntries·updateEntryStatus로 갱신합니다.ui:attachment-display-field의 AttachmentDisplay.onTriggerTap은 유지합니다. 이 변경은 @seed-design/lynx-react에서 가져온 컴포넌트와 훅에만 적용합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
(BREAKING CHANGE: Checkbox.Root의 pressed, checkmark({ pressed })의 pressed, checkmarkVariantMap.pressed 사용을 제거해야 합니다. checkmark Recipe로 ghost mark를 직접 조합한다면 기존 background와 함께 selectedBackground slot도 렌더링해야 합니다.) ee36625
Checkbox의 눌림 색상을 pressed prop과 Recipe variant 대신 Root의 :active 상태로 적용합니다.
background로 선택 여부에 따른 눌림 배경을 그렸지만, 이제 미선택용 background와 선택·indeterminate용 selectedBackground를 따로 사용합니다.(BREAKING CHANGE: Chip.Root를 Chip.Button으로, ChipRoot를 ChipButton으로, Chip.RootProps·ChipRootProps를 Chip.ButtonProps·ChipButtonProps로 변경해야 합니다.) fe5d645
일반 Chip의 공개 이름을 React와 같이 Chip.Button으로 통일합니다.
Chip.Root·ChipRoot도 같은 버튼을 렌더링하는 별칭으로 제공했지만, 이제 이 별칭과 해당 Props 타입을 제거하고 Chip.Button·ChipButton만 제공합니다.(BREAKING CHANGE: indeterminate 상태로 표시할 ProgressCircle에서는 value를 제거해야 합니다.) 6ad3b50
ProgressCircle은 이전에 value·minValue·maxValue를 모두 전달해야 determinate 상태가 되었지만, 이제 숫자 value만으로 진행률을 표시합니다.
value가 없으면 indeterminate 상태로 표시합니다. Registry AttachmentField·AttachmentDisplayField의 업로드 항목도 전달받은 진행률을 표시합니다.(BREAKING CHANGE: Field.Root 밖의 Field.Label·FieldLabel을 Field.Root 안으로 옮겨야 합니다.) 524ad2f
Field.Label을 필드 상태를 읽는 파트로 변경해, 이전과 달리 Field.Root 밖에서 렌더링하면 오류가 발생합니다.
(BREAKING CHANGE: useAttachmentInputItemContext의 removeButtonProps에서 main-thread:bindtap을 읽는 코드는 bindtap을 사용하도록 변경해야 합니다. 반환 객체를 직접 구성한다면 removeButtonProps.bindtap과, imageProps가 있으면 imageProps.alt 문자열을 제공해야 합니다. AttachmentInputContextValue를 직접 구성한다면 acceptType도 "image" 또는 undefined 값으로 제공하고, property 존재 여부 대신 값을 검사해야 합니다.) 524ad2f
첨부 항목 context의 반환 타입에서 삭제 handler와 이미지 대체 설명, 파일 유형의 계약을 명시합니다.
removeButtonProps는 optional tap handler들을 허용하던 타입에서 필수 bindtap만 제공하는 객체로 바뀝니다.imageProps.alt는 optional에서 필수 문자열로 바뀝니다. 이미지 미리보기가 없으면 imageProps 자체는 여전히 undefined입니다.AttachmentInputContextValue.acceptType은 optional property에서 항상 존재하는 property로 바뀌며, 값은 "image" 또는 undefined입니다.Dialog.Title에 기본 accessibility-heading을 추가해 스크린 리더가 제목으로 읽도록 합니다. a499751
accessibility-heading={false}를 지정합니다.HelpBubble.Positioner의 container로 Lynx view 밖까지 덮는 native overlay에 말풍선을 표시하고, overlayLevel로 overlay 사이의 순서를 지정할 수 있습니다. 6faa8c1
Registry의 HelpBubbleTrigger와 HelpBubbleAnchor에서도 container, overlayLevel을 사용할 수 있습니다. npx @seed-design/cli@latest add ui:help-bubble로 최신 snippet을 설치합니다.
Lynx ContentPlaceholder와 React에 대응하는 12개 프리셋을 추가합니다. 7f51d06
Root·Asset과 Registry snippet으로 비어 있는 콘텐츠 영역을 구성합니다.preset으로 전달하며, 사용하지 않는 프리셋은 번들에 포함하지 않습니다.tint-color로 직접 지정합니다.(BREAKING CHANGE: select-trigger·select-item Recipe를 직접 조합했다면 콘텐츠를 scaleContent slot으로 감싸고, root에 지정한 콘텐츠 간격과 직접 자식 selector를 새 slot에 맞게 수정해야 합니다.) a1881c3
Select.Trigger와 Select.Item에 배경과 분리된 콘텐츠 눌림 효과를 추가합니다.
root의 직접 자식이었습니다. 이제 새 scaleContent slot 안에 배치되며, 누르면 배경을 유지한 채 콘텐츠만 축소합니다.gap은 root에서 scaleContent로 이동합니다.@seed-design/lynx-react의 styled 컴포넌트는 기존 children 조합을 그대로 사용할 수 있습니다.Lynx Text에서 최대 줄 수와 텍스트 장식을 지정할 수 있습니다. 6adc7a1
maxLines로 줄 수를 제한하고 넘치는 텍스트를 말줄임표로 표시합니다.textDecorationLine으로 underline 또는 line-through를 적용합니다.세로로 드래그하여 항목을 선택하는 Lynx WheelPicker를 추가합니다. 39d5917
WheelPicker.Root·WheelPicker.Column·WheelPicker.ItemLabel로 여러 열을 조합하고, 각 Column의 options·value·defaultValue·onValueChange로 선택값을 관리합니다.loop로 항목을 반복하고, onIndexChange로 조작 중 지나가는 항목을 확인할 수 있습니다.valueChangeBehavior로 외부 선택값 변경 시 이동 방식을, renderLabel로 항목 표시를 지정합니다. @seed-design/lynx-css/recipes/wheel-picker Recipe를 제공합니다.Column의 accessibility-label로 지정합니다. 키보드·포커스 탐색은 지원하지 않습니다.iOS·Android 네이티브 접근성 트리에 컨트롤의 이름과 항목이 빠지지 않게 합니다. 248941e
accessibility-label을 채웁니다. children에 <text> 같은 native 요소만 있으면 이름을 알 수 없으므로 accessibility-label을 직접 지정하세요(개발 환경에서 경고합니다).accessibility-label을 받습니다.flatten={false}를 기본으로 두어 Android에서 노드가 사라지지 않게 합니다.useAttachmentInputContext·useAttachmentInputItemContext·useAttachmentDisplayContext·useAttachmentDisplayItemContext에 { strict: false } 옵션을 추가해, Provider 안팎에서 함께 쓰는 컴포넌트가 context 유무를 확인할 수 있도록 합니다. 524ad2f
{ strict: false }를 전달하면 null을 반환하며, 옵션을 생략하면 기존처럼 오류가 발생합니다.FieldButton.Root에 values·onValuesChange를 추가해 FieldButton.ClearButton으로 선택값 삭제를 요청할 수 있도록 합니다. 524ad2f
ClearButton.bindtap에서 직접 값을 지워야 했습니다. 이제 버튼을 누르면 onValuesChange([])가 호출되며, 앱에서 values를 갱신합니다.ClearButton.bindtap에서도 값을 지운다면 같은 변경을 중복 처리하지 않아야 합니다.Lynx PullToRefresh 컴포넌트를 추가합니다. b7cad68
PullToRefresh.Root·Indicator·Content와 onPtrRefresh로 콘텐츠를 당겨 새로고침하고 당긴 정도를 표시할 수 있습니다.pluginReactLynx 설정에 enableNewGesture: true를 추가해야 합니다.npx @seed-design/cli@latest add ui:pull-to-refresh로 Registry 컴포넌트를 설치할 수 있습니다.@seed-design/lynx-react-pull-to-refresh를 사용합니다.Lynx Avatar와 AvatarStack을 추가합니다. 83b5ca4
badgeMask로 원·꽃·방패 모양의 투명한 배지 여백을 제공합니다. React와 같은 도형·치수에서 생성한 clip-path를 적용하며, 배지 안의 커스텀 콘텐츠는 그대로 표시합니다.ImageFrame과 이미지 위에 배치하는 오버레이 컴포넌트를 제공합니다. f423482
useImage로 로딩·실패·이미지 교체를 처리하며 비율, 모서리 라운드와 테두리를 지정할 수 있습니다.useToggle 기반 ReactionButton을 함께 제공합니다.style.borderRadius를 이미지 clipping과 stroke에 동일하게 적용합니다.Lynx Bottom Sheet에 닫기 버튼을 추가합니다. 7147073
BottomSheet.CloseButton을 탭하면 시트가 닫히고 onOpenChange에 "closeButton" reason이 전달됩니다.BottomSheetContent에 showCloseButton(기본값 true)을 추가했습니다. npx @seed-design/cli@latest add ui:bottom-sheet로 다시 설치해야 적용됩니다.이 변경으로 함께 업데이트된 패키지 35개
(BREAKING CHANGE: ProgressCircle.Root와 ProgressCircle.Range를 직접 조합한다면 그 사이에 <ProgressCircle.Track />을 추가해야 트랙이 보입니다. seed-progress-circle__root--tone_* CSS 선택자는 seed-progress-circle__track--tone_*로 옮겨야 합니다. Registry 컴포넌트는 npx @seed-design/cli@latest add ui:progress-circle과 npx @seed-design/cli@latest add ui:quantity-picker로 다시 설치해야 합니다.) 524ad2f
ProgressCircle의 배경 트랙을 React와 같이 별도 ProgressCircle.Track 파트로 그립니다.
Root가 tone에 맞는 배경색으로 트랙을 직접 그렸습니다. 이제 Root는 트랙을 그리지 않고, Track이 진행률과 관계없이 전체 링을 tone의 트랙 색으로 그립니다.Track 요소에 적용되므로 tone class가 seed-progress-circle__root--tone_*에서 seed-progress-circle__track--tone_*로 바뀝니다.Track에 className·style을 지정해 트랙만 따로 꾸밀 수 있습니다.(BREAKING CHANGE: MenuSheet.List나 .seed-menu-sheet__list로 그룹 배치(flex·gap)를 바꾸고 있었다면 .seed-menu-sheet__listContent를 덮어쓰거나 그룹을 직접 감싼 view로 옮겨야 합니다. AlertDialog.Content의 className·style로 자식 배치를 바꾸고 있었다면 자식을 직접 감싼 view로 옮겨야 합니다. BottomSheet.Body 안에 scroll-view를 두어 긴 내용을 스크롤하고 있었다면 그 scroll-view를 빼고 내용을 Body에 바로 넣고, 높이 제한은 Body의 maxHeight로 옮기고, Body에 준 flex: "none"은 지워야 합니다. Body의 className·style로 자식 배치를 바꾸고 있었다면 .seed-bottom-sheet__scrollContent를 덮어쓰거나 자식을 직접 감싼 view로 옮겨야 하고, Body 안의 ScrollFog에 height: "100%"를 주고 있었다면 고정 높이로 바꿔야 합니다.) 화면 끝을 기준으로 위치를 잡는 Lynx 컴포넌트가 노치·홈 인디케이터·가로 화면의 측면 safe area inset을 피하도록 수정합니다. Backdrop은 그대로 화면 전체를 덮습니다. 20d639c
Dialog·AlertDialog·BottomSheet·MenuSheet는 좌우 inset을 뺀 영역의 가운데에 놓입니다. Dialog의 기본 너비(90%)는 그 영역을 기준으로 계산합니다.Dialog·AlertDialog는 위아래 inset도 피합니다. Dialog의 최대 높이는 화면 높이의 80%와 위아래 inset 사이 높이 중 작은 쪽입니다.AlertDialog.Content는 자식을 세로 scroll-view 안에 렌더해서, 내용이 최대 높이를 넘으면 안에서 스크롤합니다. Content에 준 className·style은 이 scroll-view를 감싼 바깥 view에 적용됩니다.BottomSheet·MenuSheet는 화면 높이의 90%를 넘지 않고, 위쪽 inset이 그보다 크면 inset 아래까지로 제한됩니다. 제한에 닿으면 BottomSheet.Body가 스크롤됩니다.BottomSheet.Body는 자식을 세로 scroll-view 안에 렌더해서, 내용이 넘치면 Body만 스크롤합니다. Body에 준 className·style은 이 scroll-view를 감싼 바깥 view에 적용되고, 자식 배치는 새 scrollContent 슬롯이 맡습니다. Body가 스크롤된 상태에서 시작한 제스처는 Body만 움직이고, Body가 맨 위일 때 아래로 끌어야 시트가 움직입니다.MenuSheet.List는 scroll-view로 렌더해서, 항목이 넘치면 목록만 스크롤하고 헤더와 닫기 버튼은 줄이지 않습니다. List의 className·style·ref는 이 scroll-view에 적용되고, 그룹 배치는 새 listContent 슬롯이 맡습니다. 목록이 스크롤된 상태에서 시작한 제스처는 목록만 움직이고, 목록이 맨 위일 때 아래로 끌어야 시트가 움직입니다.(BREAKING CHANGE: MenuSheet.Item을 직접 조합한다면 menuSheetItem().divider 요소를 menuSheetItem().root 요소의 다음 형제에서 마지막 자식으로 옮겨야 합니다.) 4f1c681
MenuSheet 구분선을 각 Item 바깥에서 안쪽 하단에 겹쳐 표시하도록 변경해, Item 배경과 올바른 대비를 유지합니다.
(BREAKING CHANGE: --z-index-app-bar를 제거하고 .seed-app-bar__root 또는 AppBar.Root에 z-index를 직접 지정해야 합니다.) f417a4f
AppBar가 scroll container 안에서 배경과 좌우 버튼을 함께 스크롤하도록 자체 stacking context를 만듭니다.
--z-index-app-bar로 쌓임 순서를 조정했지만, 이제 이 변수는 사용하지 않고 Root의 z-index를 직접 적용합니다.(BREAKING CHANGE: badge({ pressed })에서 pressed를 제거하고, 직접 조합한 Badge에 눌림 효과가 필요하면 ScaleFeedback을 별도로 적용해야 합니다.) f164f8b
Badge.Action의 눌림 축소 효과를 recipe의 pressed variant 대신 실제 눌림 동작에 맞춰 적용합니다.
pressed variant와 그 class로 축소를 지정했지만, 이제 recipe에서 이 variant와 class를 제거합니다.Badge.Action 컴포넌트는 눌렀을 때 자동으로 축소되며, GlobalProps.motion="reduced"이면 축소되지 않습니다.(BREAKING CHANGE: InputButton.*와 InputButtonRoot·InputButtonRootProps 등 InputButton* export를 FieldButton*으로 변경해야 합니다. 직접 사용한 input-button Recipe와 seed-input-button__* class도 field-button 이름으로 변경해야 합니다. Registry ui:field-button은 npx @seed-design/cli@latest add ui:field-button으로 다시 설치하고 inputButtonRef를 controlRef로 변경해야 합니다.) d4a20aa
Lynx 선택값 필드의 이름을 InputButton에서 FieldButton으로 변경하며, 기존 스타일 값은 유지합니다.
InputButton* export를 제거하고 FieldButton* export를 제공합니다.@seed-design/lynx-css/recipes/input-button에서 @seed-design/lynx-css/recipes/field-button으로 바뀝니다.inputButton·inputButtonVariantMap·inputButtonVariantKeys와 InputButtonVariantProps·InputButtonSlotName도 각각 fieldButton*·FieldButton* 이름으로 바뀌며, class는 seed-field-button__*로 생성됩니다.inputButtonRef에서 controlRef로 바뀝니다.(BREAKING CHANGE: List.CheckboxItem의 size·variant·tone을 Checkbox.Control로, List.SwitchItem의 size·tone을 Switch.Control로 옮기고 행의 pressed를 제거해야 합니다. List.CheckboxItem의 weight는 제거하고, 글자 굵기가 필요하면 label의 Text에 직접 지정해야 합니다. listItem Recipe를 직접 조합한다면 interactionRoot wrapper를 제거하고 실제 행의 root에 handler와 ref를 연결해야 합니다.) a5af36f
List 선택 행에서 선택 상태와 mark 모양을 분리하고, 행 자체를 조작하는 요소로 사용합니다.
CheckboxItem·SwitchItem의 prop으로 mark 모양을 지정했습니다. 이제 행은 선택 상태를 관리하고, Checkbox.Control·Switch.Control이 각각 size·tone과 Checkbox의 variant를 받습니다.CheckboxItem이 받던 weight를 제거하며, label의 글자 굵기는 Text에서 지정합니다.pressed를 직접 지정하지 않습니다.interactionRoot를 제거하고, handler와 ref를 행의 root에 연결합니다. seed-list-item__interactionRoot class는 더 이상 생성되지 않습니다.(BREAKING CHANGE: Menu.Content를 Menu.Positioner > Menu.Content > Menu.ScrollArea로 감싸고, 기존 native overlay 동작이 필요하면 Menu.Positioner에 실제 native container 이름을 container로 지정해야 합니다. menu Recipe의 backdrop 대신 positioner를 바깥 탭 영역에 사용해야 합니다. Registry 사용자는 npx @seed-design/cli@latest add ui:menu로 재설치해야 합니다.) bb2513e
Menu.Content가 만들던 레이어와 스크롤 영역을 Menu.Positioner·Menu.ScrollArea로 분리합니다.
Content만으로 native overlay와 스크롤 영역을 만들었습니다. 이제 Positioner가 레이어를, Content가 메뉴 표면을, ScrollArea가 목록의 스크롤 영역을 만듭니다.container를 지정하면 기존처럼 host 전체를 덮는 native overlay를 사용합니다.container가 없는 기본 레이어에서는 Android 뒤로 가기로 메뉴가 아닌 host 화면을 닫으며, onOpenChange에 dismiss reason을 전달하지 않습니다.Positioner가 처리하므로 menu Recipe의 backdrop slot을 제거합니다. 최신 Registry snippet은 새 파트 구조를 조합합니다.(BREAKING CHANGE: ScrollFog 안의 콘텐츠를 직접 <scroll-view scroll-orientation="vertical"> 또는 <scroll-view scroll-orientation="horizontal">로 감싸야 합니다. 자식이 이미 스크롤을 처리하면 추가로 감싸지 않습니다. hideScrollBar 대신 자식 <scroll-view>에 scroll-bar-enable={false}를 지정하고, placement에는 세로 또는 가로 한 축의 방향만 지정해야 합니다. @seed-design/lynx-css/recipes/scroll-fog를 직접 사용한다면 제거된 verticalScroll·horizontalScroll slot에 의존하는 코드를 삭제해야 합니다.) 46ecb70
ScrollFog를 스크롤 영역과 가장자리 mask를 함께 제공하던 컴포넌트에서 mask만 제공하는 컴포넌트로 변경합니다.
<scroll-view>와 hideScrollBar prop을 제거합니다. 스크롤 ref·이벤트·스크롤바는 자식 스크롤 영역에서 제어합니다.placement는 세로 또는 가로 한 축만 지원합니다.scroll-fog Recipe의 verticalScroll·horizontalScroll slot을 제거합니다.(BREAKING CHANGE: select-trigger·select-item Recipe를 직접 조합했다면 콘텐츠를 scaleContent slot으로 감싸고, root에 지정한 콘텐츠 간격과 직접 자식 selector를 새 slot에 맞게 수정해야 합니다.) a1881c3
Select.Trigger와 Select.Item에 배경과 분리된 콘텐츠 눌림 효과를 추가합니다.
root의 직접 자식이었습니다. 이제 새 scaleContent slot 안에 배치되며, 누르면 배경을 유지한 채 콘텐츠만 축소합니다.gap은 root에서 scaleContent로 이동합니다.@seed-design/lynx-react의 styled 컴포넌트는 기존 children 조합을 그대로 사용할 수 있습니다.(BREAKING CHANGE: Select.Content를 Select.Positioner > Select.Content > Select.ScrollArea로 감싸고, 기존 native overlay 동작이 필요하면 Select.Positioner에 실제 native container 이름을 container로 지정해야 합니다. select Recipe의 backdrop slot을 직접 사용했다면 바깥 탭 영역을 Select.Positioner로 옮겨야 합니다. Registry 사용자는 npx @seed-design/cli@latest add ui:select로 재설치해야 합니다.) e5ebfb1
Select의 선택 목록을 기본 native overlay에서 Lynx view 안의 고정 레이어로 변경하고, 레이어와 스크롤 영역을 별도 파트로 분리합니다.
Content가 레이어와 스크롤 영역을 함께 제공했습니다. 이제 Positioner가 레이어와 바깥 탭 영역을, ScrollArea가 스크롤 영역을 담당합니다.container를 지정하지 않으면 Android 뒤로 가기로 목록이 아닌 host 화면을 닫으며, onOpenChange에 dismiss reason을 전달하지 않습니다. native container를 지정하면 기존 동작을 사용할 수 있습니다.select Recipe의 backdrop slot을 제거합니다.(BREAKING CHANGE: thumb·tick·marker의 위치를 직접 지정했다면 --slider-thumb-offset·--slider-tick-offset·--slider-marker-offset을 각각 --slider-thumb-offset-ratio·--slider-tick-offset-ratio·--slider-marker-offset-ratio로 변경하고, 픽셀 값 대신 thumb 크기에 곱할 비율을 사용해야 합니다. --slider-marker-color는 marker의 color 스타일로 변경해야 합니다. Track을 Root보다 좁게 배치했다면 Root와 Track의 가로 범위를 맞추거나 변경된 드래그 범위를 확인해야 합니다.) 524ad2f
슬라이더의 위치 보정을 측정한 픽셀 값에서 thumb 크기에 곱하는 비율로 바꿔, 첫 표시 뒤 thumb 위치가 움직이던 문제를 해결합니다.
--slider-*-offset-ratio를 제공합니다. 직접 작성한 스타일에서는 left: calc(var(--slider-thumb-left) + <thumb 크기> * var(--slider-thumb-offset-ratio))처럼 크기와 비율을 곱합니다. Value Indicator의 픽셀 위치 보정 변수는 유지합니다.--slider-marker-color를 읽지 않고 Recipe의 상태별 색을 사용합니다.Slider.Track 대신 Slider.Root의 가로 범위를 기준으로 계산합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
(BREAKING CHANGE: Checkbox.Root의 pressed, checkmark({ pressed })의 pressed, checkmarkVariantMap.pressed 사용을 제거해야 합니다. checkmark Recipe로 ghost mark를 직접 조합한다면 기존 background와 함께 selectedBackground slot도 렌더링해야 합니다.) ee36625
Checkbox의 눌림 색상을 pressed prop과 Recipe variant 대신 Root의 :active 상태로 적용합니다.
background로 선택 여부에 따른 눌림 배경을 그렸지만, 이제 미선택용 background와 선택·indeterminate용 selectedBackground를 따로 사용합니다.(BREAKING CHANGE: reactionButton({ pressed })의 pressed와 reactionButtonVariantMap.pressed 사용을 제거해야 합니다.) 5769ae6
reaction-button Recipe의 눌림 색상을 pressed variant 대신 :active 상태로 적용합니다.
ReactionButton 컴포넌트의 선택 상태를 제어하는 pressed prop도 유지합니다.(BREAKING CHANGE: segmentedControl({ pressed })에서 pressed를 제거하고, 직접 조합한 SegmentedControl에는 itemSelectedBackground slot을 추가해야 합니다.) ac07387
Lynx SegmentedControl의 눌림 배경을 선택 상태별로 분리해, 선택이 바뀌는 순간 사라지는 배경의 색도 바뀌던 문제를 수정합니다.
itemBackground에서 선택 상태에 따라 눌림 색을 바꿨지만, 이제 미선택용 itemBackground와 선택용 itemSelectedBackground에 각각 색을 고정합니다.pressed Recipe variant를 제거하고, Item의 :active 상태에서 선택 여부에 맞는 배경을 표시합니다.Lynx ContentPlaceholder와 React에 대응하는 12개 프리셋을 추가합니다. 7f51d06
Root·Asset과 Registry snippet으로 비어 있는 콘텐츠 영역을 구성합니다.preset으로 전달하며, 사용하지 않는 프리셋은 번들에 포함하지 않습니다.tint-color로 직접 지정합니다.세로로 드래그하여 항목을 선택하는 Lynx WheelPicker를 추가합니다. 39d5917
WheelPicker.Root·WheelPicker.Column·WheelPicker.ItemLabel로 여러 열을 조합하고, 각 Column의 options·value·defaultValue·onValueChange로 선택값을 관리합니다.loop로 항목을 반복하고, onIndexChange로 조작 중 지나가는 항목을 확인할 수 있습니다.valueChangeBehavior로 외부 선택값 변경 시 이동 방식을, renderLabel로 항목 표시를 지정합니다. @seed-design/lynx-css/recipes/wheel-picker Recipe를 제공합니다.Column의 accessibility-label로 지정합니다. 키보드·포커스 탐색은 지원하지 않습니다.AppBar.IconButton에 눌림 배경색과 배경색 전환을 추가해 버튼을 누르는 상태를 구분할 수 있도록 합니다. 이전에는 눌러도 배경이 투명했고 모서리 반경은 r1이었습니다. 이제 누르는 동안 눌림 배경색을 표시하고 모서리 반경은 r2로 적용합니다. 34e7691Lynx PullToRefresh 컴포넌트를 추가합니다. b7cad68
PullToRefresh.Root·Indicator·Content와 onPtrRefresh로 콘텐츠를 당겨 새로고침하고 당긴 정도를 표시할 수 있습니다.pluginReactLynx 설정에 enableNewGesture: true를 추가해야 합니다.npx @seed-design/cli@latest add ui:pull-to-refresh로 Registry 컴포넌트를 설치할 수 있습니다.@seed-design/lynx-react-pull-to-refresh를 사용합니다.Lynx SegmentedControl.Indicator가 처음 표시될 때 서서히 나타나던 문제를 수정해, 초기 선택 위치에 바로 표시하고 이후 선택 변경에만 전환 효과를 적용합니다. 524ad2f
Indicator는 새 transitionEnabled variant로 전환 효과를 켜고 끌 수 있습니다. 초기 배치에는 false를 사용하고 이후 선택 변경부터 true로 전환할 수 있습니다.Lynx Avatar와 AvatarStack을 추가합니다. 83b5ca4
badgeMask로 원·꽃·방패 모양의 투명한 배지 여백을 제공합니다. React와 같은 도형·치수에서 생성한 clip-path를 적용하며, 배지 안의 커스텀 콘텐츠는 그대로 표시합니다.ImageFrame과 이미지 위에 배치하는 오버레이 컴포넌트를 제공합니다. f423482
useImage로 로딩·실패·이미지 교체를 처리하며 비율, 모서리 라운드와 테두리를 지정할 수 있습니다.useToggle 기반 ReactionButton을 함께 제공합니다.style.borderRadius를 이미지 clipping과 stroke에 동일하게 적용합니다.Lynx Bottom Sheet에 닫기 버튼을 추가합니다. 7147073
BottomSheet.CloseButton을 탭하면 시트가 닫히고 onOpenChange에 "closeButton" reason이 전달됩니다.BottomSheetContent에 showCloseButton(기본값 true)을 추가했습니다. npx @seed-design/cli@latest add ui:bottom-sheet로 다시 설치해야 적용됩니다.Lynx SegmentedControl의 폭이 항목 최소 폭보다 좁을 때 선택 Indicator가 선택 항목과 어긋나던 문제를 수정합니다. 7dae990
style에서 --segment-min-width를 지정합니다. Item과 Indicator에 같은 최소 폭이 적용됩니다.Lynx Tabs를 스와이프할 때 Android logcat에 illegal css key 오류가 반복되던 문제를 수정합니다. 7dae990
Tabs.Indicator는 --tabs-indicator-x·--tabs-indicator-width 변수 대신 inline transform·width(px)로 위치와 폭을 지정합니다.AttachmentField 항목이 다시 배치될 때 폭이 줄어들어 썸네일이 보이지 않던 문제를 수정합니다. 7dae990Lynx FloatingActionButton.Label의 축소·확장 전환에서 Label이 사라지거나 줄바꿈·잘림이 발생하던 문제를 수정합니다. 3b4d190
extended={false}일 때 Label을 제거했습니다. 이제 Label을 유지하고 opacity로 숨기거나 표시합니다.Tabs.Indicator가 하단 stroke 위에 떠 있던 문제를 수정하여 stroke와 겹치도록 1px 아래에 배치합니다. 이를 보정하려고 지정한 bottom: -1px은 제거해야 합니다. eb01c01AttachmentField와 AttachmentDisplayField의 readOnly 상태에서 삭제 아이콘에 비활성 색상이 적용되지 않던 문제를 수정합니다. e056828ProgressCircle의 indeterminate 상태와 QuantityPicker의 loading 상태가 매 프레임 JavaScript에서 스타일을 갱신해 CPU 사용과 DevTool 로그가 늘어나던 문제를 수정합니다. e056828BottomSheet.Body가 남는 높이를 모두 차지하던 문제를 수정해 콘텐츠 높이만큼 배치합니다. 524ad2fAttachmentInput과 AttachmentDisplay의 삭제 버튼을 눌렀을 때 scale 피드백이 표시되지 않던 문제를 수정해, 누르는 동안 버튼이 축소되도록 합니다. 524ad2fSelectBox 항목이 좁은 폭에서 라벨과 설명이 겹치거나 잘리던 문제를 수정합니다. 7dae990Lynx BottomSheet의 snap point 레이아웃을 수정합니다. 7dae990
Tabs.Indicator가 하단 stroke 영역에서 잘려 iOS보다 얇게 보이던 문제를 수정합니다. 7dae990Callout의 인라인 링크에 밑줄이 표시되지 않던 문제를 수정합니다. 7dae990AttachmentInput·AttachmentDisplay의 마지막 항목에서 삭제 버튼이 잘리던 문제를 수정해, 항목 영역 밖으로 나온 버튼도 온전히 표시합니다. 26fa233(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 BottomSheet를 조합하는 @seed-design/lynx-react-bottom-sheet를 제공합니다. 0e01546
Root의 open·defaultOpen·onOpenChange로 열림 상태와 변경 사유를 관리합니다.Trigger·Backdrop·Positioner·Content·Handle·CloseButton을 조합하며, Positioner는 container를 지정한 overlay 레이어를 채웁니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 탭 목록과 콘텐츠를 조합할 수 있는 @seed-design/lynx-react-tabs를 추가합니다. eb01c01
Tabs.Root·Tabs.List·Tabs.Trigger·Tabs.Content·Tabs.Indicator·Tabs.Carousel·Tabs.CarouselCamera를 제공합니다.value·defaultValue·onValueChange로 선택값을 관리하고, Tabs.Trigger의 disabled로 해당 탭 선택을 막을 수 있습니다.Tabs.List의 scrollAlign으로 선택된 탭의 스크롤 정렬을 지정하며, Indicator 위치와 carousel 페이지를 선택값에 맞춰 동기화합니다.useTabs·useTabsContext·useTabsTriggerContext·useTabsCarouselContext 등 상태 hook을 제공합니다.Lynx Tabs를 스와이프할 때 Android logcat에 illegal css key 오류가 반복되던 문제를 수정합니다. 7dae990
Tabs.Indicator는 --tabs-indicator-x·--tabs-indicator-width 변수 대신 inline transform·width(px)로 위치와 폭을 지정합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
요소 전체 또는 자식 콘텐츠에 눌림 축소를 적용할 수 있는 @seed-design/lynx-react-scale-feedback을 제공합니다. 8337f8e
ScaleFeedback으로 자식을 감싸 요소 전체에 눌림 축소를 적용합니다.useScaleFeedback의 scaleFeedbackTriggerProps와 scaleFeedbackTargetProps를 각각 눌림을 받는 요소와 축소할 요소에 적용해 콘텐츠만 축소할 수 있습니다.disabled 또는 GlobalProps.motion="reduced"이면 축소하지 않습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 App Bar를 구성할 수 있는 @seed-design/lynx-react-app-bar를 제공합니다. e91d2d9
AppBar.Root·Left·Main·Right·IconButton과 useAppBar·useAppBarSide·useAppBarIconButton을 사용할 수 있습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 원격 첨부 목록을 표시할 수 있는 @seed-design/lynx-react-attachment-display를 추가합니다. 580d5eb
AttachmentDisplay.Root·Trigger·ItemImage·ItemBackdrop·ItemRemoveButton·Description·ErrorMessage를 조합합니다.entries·defaultEntries·onEntriesChange로 목록을 관리합니다.useAttachmentDisplayContext의 addEntries·updateEntryStatus·removeEntry·reorderEntry로 항목과 업로드 상태를 갱신합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
Lynx Callout을 스타일 없이 조합하는 @seed-design/lynx-react-callout을 추가합니다. f1225c4
Root·CloseButton과 open·defaultOpen·onDismiss를 제공합니다.Root의 눌림·접근성 상태를 제공합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 Dialog를 조합하는 @seed-design/lynx-react-dialog를 제공합니다. e1a260b
Root의 제어·비제어 열림 상태와 onOpenChange·skipAnimation을 제공합니다.Trigger·Positioner·Backdrop·Content·Title·Description·CloseButton을 사용할 수 있습니다.Positioner는 container·overlayLevel·dialogViewProps를 지원합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 선택값을 표시하고 지우는 필드를 조합할 수 있는 @seed-design/lynx-react-field-button을 추가합니다. f98c5aa
FieldButton.Root에 values·onValuesChange를 연결하고 Button·ClearButton·Description·ErrorMessage를 조합합니다.ClearButton을 누르면 onValuesChange([])로 값 삭제를 요청합니다.disabled·readOnly 상태에서는 버튼 조작을 차단합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 입력 필드를 조합할 수 있는 @seed-design/lynx-react-field를 추가합니다. caf429b
Field.Root의 required·disabled·readOnly·invalid 상태를 Label·Description·ErrorMessage와 공유합니다.useFieldContext로 필드 상태와 포커스 상태를 읽을 수 있습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 파일 첨부 UI를 조합할 수 있는 @seed-design/lynx-react-file-upload를 추가합니다. 318193f
FileUpload.Root·Trigger와 useFileUpload로 첨부 목록과 업로드 상태를 관리합니다.useFileUploadItem의 결과를 FileUploadItemProvider로 전달해 ItemName·ItemSize·ItemImage·ItemBackdrop·ItemRemoveButton을 조합합니다.onSelectFiles에 앱의 파일 선택 함수를 연결하고, accept·minFileSize·maxFileSize·maxFiles·validate로 첨부 조건을 지정할 수 있습니다.onFileAccept로 시작하고, updateFileEntryStatus로 상태를 갱신합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
기준 요소에 맞춰 콘텐츠 위치를 계산하는 @seed-design/lynx-react-floating을 추가합니다. 6faa8c1
computePosition으로 placement, flip, shift를 지정하고 화살표 위치와 콘텐츠가 사용할 수 있는 너비·높이를 계산합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
키보드에 가려지는 입력과 하단 버튼을 배치할 수 있는 @seed-design/lynx-react-keyboard-avoiding-scroll-view를 추가합니다. 575cdfe
KeyboardAvoidingScrollView.Root 안에 Content·Footer를 조합하고, scroll ref·prop·event는 Content에 전달합니다.useKeyboardAvoidingScrollViewContext로 등록한 Content 안의 입력이 포커스되면 키보드와 하단 영역 위로 스크롤합니다. Footer는 키보드 바로 위로 이동하며, 그 안의 입력은 Content를 스크롤하지 않습니다.Root의 keyboardGap·scrollBehavior로 회피 간격과 이동 방식을 지정합니다.avoid-keyboard와 함께 사용하지 않습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
세로 드래그와 관성 스크롤로 항목을 선택하는 휠 UI를 조합할 수 있는 @seed-design/lynx-react-loop-scroll을 추가합니다. 3a9dbc2
LoopScroll.Root·Track·Highlight를 조합하고 itemCount·itemSize·visibleItemCount로 표시 영역을 지정합니다. Track의 render callback으로 항목 내용을 그립니다.loop로 마지막 항목 다음에 첫 항목이 이어지게 반복합니다.index·defaultIndex로 선택 상태를 지정하고, onIndexChange로 조작 후 정착한 항목을, onActiveIndexChange로 조작 중 지나가는 항목을 확인할 수 있습니다.a8229feWheelPicker가 가까운 항목에 정착하기 전에 렌더 창을 불필요하게 갱신해 항목을 생성하던 문제를 수정합니다. e056828(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 메뉴를 조합하는 @seed-design/lynx-react-menu를 추가합니다. bb2513e
Root·Trigger·Anchor·Positioner·Content·Group·GroupLabel·Item을 제공합니다.useMenu·useMenuItem으로 열림 상태 제어, 항목 비활성화, 바깥 탭 닫기를 지원합니다.Positioner의 container로 native overlay를 선택할 수 있습니다.(BREAKING CHANGE: ToggleContext.Provider를 ToggleProvider로, useToggleContext("호출자 이름")을 useToggleContext()로 변경해야 합니다. Provider 밖에서 선택적으로 호출한다면 useToggleContext({ strict: false })를 사용하고 반환값이 null인 경우를 처리해야 합니다.) bc976a5
Toggle의 context API를 React와 같은 Provider와 strict 옵션 형태로 변경합니다.
ToggleContext export를 제거하고 ToggleProvider를 제공합니다.useToggleContext는 호출자 이름 문자열 대신 { strict } 옵션을 받습니다. 기본 호출은 Provider가 필요하며, strict: false이면 Provider 밖에서 null을 반환합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
(BREAKING CHANGE: Accordion.Trigger의 accessibility-value를 expandedAccessibilityValue·collapsedAccessibilityValue로 변경하고, accessibility-traits 사용을 제거해야 합니다. accessibility-traits를 직접 덮어쓰는 대체 API는 제공하지 않습니다.) b1a262d
Lynx 컴포넌트가 일부만 받던 native 속성을 각 파트가 렌더링하는 요소의 속성으로 확장하며, 상태를 알리는 일부 접근성 값은 컴포넌트 상태를 따르도록 변경합니다.
id·accessibility-*·bind*·main-thread:*·data-*와 ref를 전달할 수 있습니다. BottomSheet·MenuSheet의 파트와 AttachmentInput.Root도 지원하며, Box의 터치 handler는 이벤트 인자를 받습니다.className은 합치고 style은 key 단위로 합치며, 이벤트 handler와 ref는 내부 값과 함께 실행합니다.Accordion.Trigger의 accessibility-value·accessibility-traits를 직접 덮어쓸 수 있었습니다. 이제 열림·비활성 상태에 맞는 값을 유지하고, 열림 상태 문구만 expandedAccessibilityValue·collapsedAccessibilityValue로 지정합니다.bindtap·main-thread:bindtap은 기존처럼 호출하지 않습니다. QuantityPicker.DecrementButton의 삭제 상태 문구도 기존처럼 Root.removeAccessibilityLabel로 지정합니다.useToggle에 사용자 tap·touch handler를 지정해 커스텀 동작과 선택 상태 전환을 함께 처리할 수 있습니다. 8653a08
bindtap·main-thread:bindtap·main-thread:bindtouchstart·main-thread:bindtouchend·main-thread:bindtouchcancel을 지원합니다.bindtap은 선택 상태 변경 전에 호출하며, disabled이면 tap handler와 선택 변경을 막습니다.rootProps에 toggle button의 접근성 역할과 "pressed"·"not pressed" 상태를 추가합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
Lynx PageBanner를 스타일 없이 조합하는 @seed-design/lynx-react-page-banner를 추가합니다. 6bf4f3d
Root·Button·CloseButton과 open·defaultOpen·onDismiss를 제공합니다.Root에서 분리하는 getIndependentActionProps를 제공합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 말풍선을 조합하는 @seed-design/lynx-react-popover를 추가합니다. 6faa8c1
Root·Anchor·Trigger·Positioner·Content·Arrow·CloseButton과 usePopover으로 기준 요소에 맞춘 배치, 화살표, 바깥 탭 닫기를 지원합니다.open·defaultOpen·onOpenChange로 열림 상태를 제어하고, Positioner의 container로 native overlay를 선택할 수 있습니다.HelpBubble·Popover를 좌우로 배치했을 때 좁은 화면에서 말풍선이 트리거를 덮던 문제를 수정하여, 남은 옆 공간에 맞춰 줄바꿈합니다. 7dae990(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
usePressTap에 커스텀 터치 동작과 눌림 상태 관리를 함께 사용할 수 있는 callback을 추가합니다. bc976a5
mainThreadOnTouchStart·mainThreadOnTouchEnd·mainThreadOnTouchCancel을 지정할 수 있습니다.main-thread:bindtouchstart·main-thread:bindtouchend·main-thread:bindtouchcancel handler는 지정한 callback을 호출한 뒤 눌림 상태를 갱신합니다.usePressTap이 disabled로 바뀐 뒤 탭할 때마다 MainThreadFunction: Invalid function object 경고를 남기던 문제를 수정해, 비활성 상태의 탭을 callback 호출이나 경고 없이 무시합니다. d8228c3(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 접히는 영역을 조합할 수 있는 @seed-design/lynx-react-collapsible을 추가합니다. 362cada
Collapsible.Root·Collapsible.Trigger·Collapsible.Content와 useCollapsible로 열림 상태와 내용 높이를 관리합니다.open·defaultOpen·onOpenChange로 열림 상태를 제어하고, disabled로 사용자 열림 전환을 막습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 선택 목록을 조합하는 @seed-design/lynx-react-select를 추가합니다. e5ebfb1
Root·Trigger·Value·Placeholder·Positioner·Content·ScrollArea·Group·GroupLabel·Item과 useSelect으로 단일·다중 선택, 값과 열림 상태 제어, 선택 항목 스크롤을 지원합니다.formatValue로 선택값 표시를 지정하고, disabled·readOnly로 사용자 선택을 제한할 수 있습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 슬라이더를 조합할 수 있는 @seed-design/lynx-react-slider를 추가합니다. 46bab1a
Slider.Root·Thumb·Range·Tick·Marker·ValueIndicatorRoot·ValueIndicatorLabel과 useSlider로 제어·비제어 값, 여러 thumb, 드래그 조작을 지원합니다.step·allowedValues·minStepsBetweenThumbs로 선택 범위를 제한합니다.onValuesChange·onValuesCommit으로 값 변경과 조작 완료를 구분합니다.Slider의 controlled 값을 최솟값으로 바꾸면 Value Indicator 위치 계산이 반복되어 CallLepusMethod called too frequently 경고가 발생하던 문제를 수정합니다. 7dae990(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 텍스트 입력을 조합할 수 있는 @seed-design/lynx-react-text-field를 추가합니다. cbbb6fe
TextField.Root·Input·Textarea와 useTextField·useTextFieldInput으로 제어·비제어 입력과 disabled·readOnly·invalid 상태를 지원합니다.Field.Root의 상태와 포커스를 연동합니다.useTextFieldWithGraphemes로 사용자에게 보이는 글자 단위의 길이를 세고, maxGraphemeCount로 제한한 값을 onValueChange의 slicedValue로 받을 수 있습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
화면 가장자리의 콘텐츠가 시스템 영역과 겹치지 않도록 inset을 읽는 @seed-design/lynx-react-use-safe-area를 추가합니다. useSafeArea는 safeAreaInsetTop·safeAreaInsetRight·safeAreaInsetBottom·safeAreaInsetLeft를 스타일에 쓸 수 있는 문자열로 반환합니다. e91d2d9
px 문자열로 반환하고, 값이 없거나 유효하지 않으면 CSS env(safe-area-inset-*)를 반환합니다. 위·아래 inset은 host 값이 0이어도 env()를 사용합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
iOS·Android 네이티브 접근성 트리에 컨트롤의 이름과 항목이 빠지지 않게 합니다. 248941e
accessibility-label을 채웁니다. children에 <text> 같은 native 요소만 있으면 이름을 알 수 없으므로 accessibility-label을 직접 지정하세요(개발 환경에서 경고합니다).accessibility-label을 받습니다.flatten={false}를 기본으로 두어 Android에서 노드가 사라지지 않게 합니다.SEED 스타일 없이 단일 선택 목록을 조합할 수 있는 @seed-design/lynx-react-radio-group을 추가합니다. 9c724ea
RadioGroup.Root·RadioGroup.Item·RadioGroup.ItemControl·RadioGroup.Label·RadioGroup.Description·RadioGroup.ErrorMessage와 useRadioGroup·useRadioGroupItem 등 상태 hook을 제공합니다.value·defaultValue·onValueChange로 선택값을 관리하고, disabled·invalid 상태를 하위 요소에 전달합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
iOS·Android 네이티브 접근성 트리에 컨트롤의 이름과 항목이 빠지지 않게 합니다. 248941e
accessibility-label을 채웁니다. children에 <text> 같은 native 요소만 있으면 이름을 알 수 없으므로 accessibility-label을 직접 지정하세요(개발 환경에서 경고합니다).accessibility-label을 받습니다.flatten={false}를 기본으로 두어 Android에서 노드가 사라지지 않게 합니다.SEED 스타일 없이 수량 선택기를 조합할 수 있는 @seed-design/lynx-react-quantity-picker를 추가합니다. 77eaa1e
QuantityPicker.Root·DecrementButton·ValueDisplay·IncrementButton으로 수량 감소·표시·증가 영역을 조합합니다.min·max와 step·value·defaultValue·onValueChange로 수량을 관리합니다.removable에 onRemove·removeAccessibilityLabel을 함께 전달하면 최솟값에서 감소 버튼이 삭제 버튼으로 바뀝니다.loading·readOnly·disabled로 조작을 차단할 수 있습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 Accordion을 조합할 수 있는 @seed-design/lynx-react-accordion을 추가합니다. 2d2f4df
Accordion.Root·Accordion.Item·Accordion.Header·Accordion.Trigger·Accordion.Content와 useAccordion·useAccordionItem 등 상태 hook을 제공합니다.values·defaultValues·onValuesChange로 열린 항목을 관리하고, multiple로 여러 항목을 동시에 열 수 있습니다. Root 또는 Item의 disabled로 열림 전환을 막을 수 있습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 버튼 동작을 조합할 수 있는 @seed-design/lynx-react-action-button을 추가합니다. fd2da0b
ActionButton.Root와 useActionButton으로 눌림 상태와 접근성 기본값을 연결하고, bindtap으로 탭 동작을 지정합니다.disabled·loading 상태에서 탭 동작을 차단할 수 있습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 Checkbox를 조합할 수 있는 @seed-design/lynx-react-checkbox를 추가합니다. ee36625
Checkbox.Root·Checkbox.Control과 useCheckbox·useCheckboxContext로 선택 상태, indeterminate, disabled, 눌림 상태와 접근성 속성을 연결합니다.checked·defaultChecked·onCheckedChange로 상태를 관리할 수 있습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 원형 진행 상태를 조합할 수 있는 @seed-design/lynx-react-progress를 추가합니다. ProgressCircle.Root·ProgressCircle.Track·ProgressCircle.Range, useProgress, ProgressCircleProvider와 useProgressCircleContext를 제공합니다. 6ad3b50
value·minValue·maxValue로 진행률과 접근성 값을 계산하며, value를 생략하면 indeterminate 상태가 됩니다.Track은 전체 배경 링, Range는 완료된 구간을 위한 별도 파트입니다. 각 파트의 스타일은 직접 지정합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 단일 선택 세그먼트를 조합할 수 있는 @seed-design/lynx-react-segmented-control을 추가합니다. SegmentedControl.Root·SegmentedControl.Item과 useSegmentedControl·useSegmentedControlContext로 선택 상태와 접근성 속성을 연결합니다. ac07387
value·defaultValue·onValueChange로 선택값을 관리하고, disabled로 선택 변경을 막을 수 있습니다.--segment-count·--segment-index로 직접 만든 선택 표시 요소의 위치와 크기를 지정할 수 있습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
SEED 스타일 없이 Switch를 조합할 수 있는 @seed-design/lynx-react-switch를 추가합니다. 37ae101
Switch.Root·Switch.Control·Switch.Thumb과 useSwitch·useSwitchContext로 선택 상태, disabled, 눌림 상태와 접근성 속성을 연결합니다.checked·defaultChecked·onCheckedChange로 상태를 관리할 수 있습니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
Lynx PullToRefresh 컴포넌트를 추가합니다. b7cad68
PullToRefresh.Root·Indicator·Content와 onPtrRefresh로 콘텐츠를 당겨 새로고침하고 당긴 정도를 표시할 수 있습니다.pluginReactLynx 설정에 enableNewGesture: true를 추가해야 합니다.npx @seed-design/cli@latest add ui:pull-to-refresh로 Registry 컴포넌트를 설치할 수 있습니다.@seed-design/lynx-react-pull-to-refresh를 사용합니다.(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
(BREAKING CHANGE: @seed-design/lynx-react, @seed-design/lynx-css, 직접 설치한 모든 @seed-design/lynx-react-* 패키지를 함께 ^1.0.0으로 올리고 SEED Lynx 1 업그레이드 가이드에 따라 코드를 수정해야 합니다.) a684488
SEED Lynx 패키지를 1.0.0으로 출시하고, 이후 버전부터 semver에 따라 호환성을 안내합니다.
Lynx Tabs를 스와이프할 때 Android logcat에 illegal css key 오류가 반복되던 문제를 수정합니다. 7dae990
Tabs.Indicator는 --tabs-indicator-x·--tabs-indicator-width 변수 대신 inline transform·width(px)로 위치와 폭을 지정합니다.TextField.Input·TextField.Textarea의 value·defaultValue 초기 값이 표시되지 않던 문제를 수정합니다. 524ad2f(BREAKING CHANGE: MenuSheet.Item을 직접 조합한다면 menuSheetItem().divider 요소를 menuSheetItem().root 요소의 다음 형제에서 마지막 자식으로 옮겨야 합니다.) 4f1c681
MenuSheet 구분선을 각 Item 바깥에서 안쪽 하단에 겹쳐 표시하도록 변경해, Item 배경과 올바른 대비를 유지합니다.
Select를 마운트하거나 열 때 모든 항목을 다시 렌더링하던 문제를 수정해, 항목이 많은 목록에서도 렌더링 횟수가 늘지 않도록 합니다. 925b628accessibility-element)가 아니고 accessibility-role-description="alertdialog"도 적용하지 않습니다. iOS에서 열린 Alert Dialog의 제목·설명·action이 접근성 트리에서 가려지던 문제를 고칩니다. Content 자체를 하나의 요소로 노출해야 하면 accessibility-element를 직접 지정하세요. 60141a0(BREAKING CHANGE: badge({ pressed })에서 pressed를 제거하고, 직접 조합한 Badge에 눌림 효과가 필요하면 ScaleFeedback을 별도로 적용해야 합니다.) f164f8b
Badge.Action의 눌림 축소 효과를 recipe의 pressed variant 대신 실제 눌림 동작에 맞춰 적용합니다.
pressed variant와 그 class로 축소를 지정했지만, 이제 recipe에서 이 variant와 class를 제거합니다.Badge.Action 컴포넌트는 눌렀을 때 자동으로 축소되며, GlobalProps.motion="reduced"이면 축소되지 않습니다.BottomSheet.Positioner에 container를 지정했을 때 overlay 레이어의 크기가 잡히지 않아 시트가 화면 밖에 그려지던 문제를 수정합니다. 248aee6
Positioner가 overlay 레이어의 너비와 높이를 채웁니다.npx @seed-design/cli@latest add ui:bottom-sheet로 다시 설치해야 container와 overlayLevel을 전달합니다.HelpBubble의 배치 방향이 바뀔 때 화살표에 이전 방향의 위치 값이 남아 잘못 배치되던 문제를 수정하여, 현재 방향에 맞는 위치만 적용합니다. 6faa8c1Divider의 orientation이나 inset을 바꿀 때 이전 방향의 크기와 여백이 남아 레이아웃이 어긋나던 문제를 수정합니다. 79b5761
Lynx ActionButton·FloatingActionButton·ContextualFloatingButton의 기본 accessibility-traits가 버튼 상태를 올바르게 알리도록 수정합니다. 3b4d190
ActionButton이 disabled·loading 상태에서도 "button"으로 안내됐습니다. 이제 이 상태에서는 "disabled"로 안내합니다.FloatingActionButton과 ContextualFloatingButton은 활성 상태에서 기본 trait가 없었습니다. 이제 "button"을 제공하고, 비활성 상태는 기존처럼 "disabled"로 안내합니다.accessibility-traits는 그대로 사용합니다.Lynx FloatingActionButton.Label의 축소·확장 전환에서 Label이 사라지거나 줄바꿈·잘림이 발생하던 문제를 수정합니다. 3b4d190
extended={false}일 때 Label을 제거했습니다. 이제 Label을 유지하고 opacity로 숨기거나 표시합니다.FloatingActionButton.Root가 disabled로 바뀐 뒤 탭할 때 MainThreadFunction: Invalid function object 경고가 발생하던 문제를 수정합니다. 695429cflatten={false}를 기본으로 둡니다. 2146a67Tabs·ChipTabs의 Carousel이 Trigger의 추가·제거·비활성화 변경으로 선택값을 바꾸고 onValueChange를 호출하던 문제를 수정하여, 실제 swipe에서만 선택값을 바꿉니다. 412f1e8TagGroup.Root가 구분자를 스크린 리더에 노출하거나 ""·0 같은 falsy child 앞에 구분자를 추가하던 문제를 수정해, falsy child를 항목에서 제외하고 구분자는 접근성 트리에서 숨깁니다. c1e30e0TextField.Input·TextField.Textarea를 제거한 뒤 blur 이벤트가 오지 않으면 포커스 상태가 남던 문제를 수정해, 입력을 제거할 때 TextField와 상위 Field의 포커스 상태도 해제합니다. caf429bMannerTempEmote가 label 안의 inline 이미지로 표시되던 문제를 수정해 label 뒤의 emote slot에 표시합니다. 8b58306HelpBubble·Popover를 좌우로 배치했을 때 좁은 화면에서 말풍선이 트리거를 덮던 문제를 수정하여, 남은 옆 공간에 맞춰 줄바꿈합니다. 7dae990ProgressCircle의 indeterminate 상태와 QuantityPicker의 loading 상태가 매 프레임 JavaScript에서 스타일을 갱신해 CPU 사용과 DevTool 로그가 늘어나던 문제를 수정합니다. e056828BottomSheet.Body가 남는 높이를 모두 차지하던 문제를 수정해 콘텐츠 높이만큼 배치합니다. 524ad2fAttachmentInput과 AttachmentDisplay의 삭제 버튼을 눌렀을 때 scale 피드백이 표시되지 않던 문제를 수정해, 누르는 동안 버튼이 축소되도록 합니다. 524ad2fPageBanner.CloseButton에 accessibility-label이 없을 때 같은 개발 경고가 렌더링마다 반복되던 문제를 수정합니다. 이제 마운트하거나 accessibility-element·accessibility-label이 바뀔 때만 누락 여부를 확인해 경고합니다. 524ad2fAttachmentDisplay에서 같은 위치로 reorderEntry를 호출하거나 여러 항목을 허용하는 목록이 가득 찬 상태에서 addEntries를 호출하면, 목록이 그대로인데도 onEntriesChange가 호출되던 문제를 수정합니다. 이제 이 경우에는 목록을 유지하고 onEntriesChange를 호출하지 않습니다. 524ad2fLynx BottomSheet의 snap point 레이아웃을 수정합니다. 7dae990
d0334da308c087HelpBubble이 위치를 매 프레임 다시 계산해 화면이 비거나 입력이 멈추던 문제를 수정합니다. 6c73893처음부터 열린 Accordion.Content가 높이 0px에서 펼쳐지던 문제를 수정합니다. 524ad2f
Accordion.Content·CheckSelectBox.Footer·RadioSelectBox.Footer는 초기 높이를 내용에 맞춰, 처음 표시할 때 펼침 애니메이션 없이 내용을 보여줍니다.(BREAKING CHANGE: segmentedControl({ pressed })에서 pressed를 제거하고, 직접 조합한 SegmentedControl에는 itemSelectedBackground slot을 추가해야 합니다.) ac07387
Lynx SegmentedControl의 눌림 배경을 선택 상태별로 분리해, 선택이 바뀌는 순간 사라지는 배경의 색도 바뀌던 문제를 수정합니다.
itemBackground에서 선택 상태에 따라 눌림 색을 바꿨지만, 이제 미선택용 itemBackground와 선택용 itemSelectedBackground에 각각 색을 고정합니다.pressed Recipe variant를 제거하고, Item의 :active 상태에서 선택 여부에 맞는 배경을 표시합니다.Lynx SegmentedControl.Indicator가 처음 표시될 때 서서히 나타나던 문제를 수정해, 초기 선택 위치에 바로 표시하고 이후 선택 변경에만 전환 효과를 적용합니다. 524ad2f
Indicator는 새 transitionEnabled variant로 전환 효과를 켜고 끌 수 있습니다. 초기 배치에는 false를 사용하고 이후 선택 변경부터 true로 전환할 수 있습니다.Slider의 controlled 값을 최솟값으로 바꾸면 Value Indicator 위치 계산이 반복되어 CallLepusMethod called too frequently 경고가 발생하던 문제를 수정합니다. 7dae990(BREAKING CHANGE: @seed-design/lynx-react에서 가져온 <Badge>와 BadgeProps를 ui:badge snippet의 Badge와 BadgeProps로 교체해야 합니다. npx @seed-design/cli@latest add ui:badge로 snippet을 설치한 뒤 import를 바꾸세요.) Badge에 아이콘을 표시하는 Prefix와 정보 아이콘 버튼을 표시하는 Action을 추가하고, 완성된 Badge를 snippet으로 제공합니다. 19ecbd6
Badge는 JSX 컴포넌트가 아니라 Badge.Root, Badge.Prefix, Badge.Label, Badge.Action으로 구성된 namespace로 바뀌며, BadgeProps export를 제거합니다.Badge에는 라벨을 children으로 전달하며, 기존 tone, variant, size를 그대로 사용할 수 있습니다.prefix에 아이콘 요소를 바로 전달할 수 있습니다.actionProps를 전달하면 고정된 정보 아이콘 버튼을 표시합니다. actionProps에 accessibility-label과 bindtap을 전달해 동작을 연결할 수 있으며, prefix와 함께 사용할 수 있습니다.이 변경으로 함께 업데이트된 패키지 1개
(BREAKING CHANGE: Badge의 기본 최대 너비로 긴 라벨을 말줄임하고 있었다면 최대 너비를 직접 지정해야 합니다.) Badge 스타일에 Prefix와 Action을 추가하고 기본 최대 너비를 제거합니다. 19ecbd6
prefix, action slot(.seed-badge__prefix, .seed-badge__action)을 추가합니다.size="medium" 7.5rem, size="large" 6.75rem)를 제거합니다.Solid 배경 위에 쓰는 전경색 토큰을 추가하고, SEED 컴포넌트가 이 토큰을 사용하도록 변경합니다. d3edadf
$color.fg.on-brand-solid, $color.fg.on-critical-solid, $color.fg.on-informative-solid, $color.fg.on-neutral-solid, $color.fg.on-positive-solid, $color.fg.on-warning-solid를 추가합니다.$color.fg.neutral-inverted 대신 새 전경색 토큰을 참조하도록 변경합니다. 기존과 값이 같아 화면은 그대로이며, Action Button variant="neutralSolid"의 로딩 인디케이터 색만 다크 모드에서 달라집니다.$color.fg.neutral-inverted는 기존 사용처의 하위 호환성을 위해 deprecated 상태로 유지하며, 각 패키지의 다음 major 버전에서 제거할 예정입니다.SEED 컴포넌트가 $color.bg.neutral-inverted 대신 같은 값의 $color.bg.neutral-solid를 사용하도록 변경하고, $color.bg.neutral-inverted와 $color.bg.neutral-inverted-pressed를 deprecated로 표시합니다. 5e34f78
@seed-design/react의 Date Picker를 포함한 기존 사용처는 같은 색상 값을 가진 $color.bg.neutral-solid를 사용합니다.$color.bg.neutral-inverted, $color.bg.neutral-inverted-pressed와 이에 대응하는 CSS 변수를 유지하며, 각 패키지의 다음 major 버전에서 제거할 예정입니다.(BREAKING CHANGE: $color.bg.layer-fill을 같은 값의 $color.bg.neutral-muted로 교체해야 합니다.) deprecated 상태였던 $color.bg.layer-fill을 제거하고 같은 값의 $color.bg.neutral-muted를 추가합니다. 66c3bd9
$color.bg.neutral-muted는 라이트 모드에서 gray-100, 다크 모드에서 gray-200으로, 기존 $color.bg.layer-fill과 값이 같습니다.--seed-color-bg-layer-fill을 --seed-color-bg-neutral-muted로, vars.$color.bg.layerFill을 vars.$color.bg.neutralMuted로 교체하세요.bg="bg.layerFill" 같은 style prop 값은 에러 없이 배경색만 사라지므로 문자열로 검색해 확인하세요.(BREAKING CHANGE: $color.bg.neutral-solid를 직접 사용하는 화면에서 라이트·다크 모드의 배경색과 전경색 대비를 확인해야 합니다.) Neutral Solid 배경 색상과 이를 사용하는 컴포넌트 스타일을 변경합니다. ebdc295
$color.bg.neutral-solid를 라이트 모드에서는 gray-1000에서 gray-900으로, 다크 모드에서는 gray-300에서 gray-1000으로 변경합니다.$color.bg.neutral-solid-pressed를 추가합니다.$color.bg.neutral-solid와 $color.bg.neutral-solid-pressed를 참조하도록 변경합니다.표면과 같은 색상의 $color.bg.neutral-subtle 토큰을 추가합니다. 66c3bd9
gray-00, 다크 모드에서 gray-100을 사용하며, 회색 표면 위에서 주변과 구분되는 영역에 사용합니다.bg-neutral-subtle 색상으로 사용할 수 있습니다(예: bg-bg-neutral-subtle).19ecbd678f0bc1AppBar가 좌우 safe area inset을 반영합니다. ba7cfa8
AppBar의 내용이 좌우 inset만큼 안쪽으로 들어가서, 좌우 inset이 있는 화면에서도 디스플레이 컷아웃에 가려지지 않습니다. cupertino 테마의 가운데 타이틀은 safe area 안에서 가운데에 옵니다.useSafeArea와 Box가 좌우 safe area inset을 지원합니다. 934e3ef
useSafeArea가 호스트 앱의 lynx.__globalProps에서 좌우 inset을 읽어 safeAreaInsetLeft, safeAreaInsetRight로 반환합니다. 호스트가 값을 주지 않으면 env(safe-area-inset-*)로 fallback합니다.Box의 pl, pr에 "safeArea"를 지정합니다.Box, VStack, HStack에 margin과 bleed style prop을 추가합니다. 934e3ef
m, mx, my, mt, mr, mb, ml과 longhand margin prop으로 margin을 지정합니다. SEED 토큰, 길이, "auto"를 받습니다.bleed, bleedX, bleedY, bleedTop, bleedRight, bleedBottom, bleedLeft로 요소를 부모의 padding 영역까지 넓힙니다. px 길이, 0, "safeArea"를 받으며, "safeArea"는 같은 방향의 safe area inset만큼 넓힙니다. Lynx는 inline style의 calc() 안에 있는 CSS 변수를 적용하지 않으므로, bleed는 SEED 토큰을 받지 않습니다.BoxProps, StackProps, VStackProps, HStackProps가 union 타입으로 바뀌었습니다. 이 타입을 interface ... extends로 확장하던 코드는 type MyBoxProps = BoxProps & { ... }처럼 type으로 바꿔야 합니다.ui:result-section snippet은 타입 검사를 통과하지 못합니다. snippet을 다시 내려받아 주세요.
npx @seed-design/cli@latest add ui:result-sectiontheme=cupertino App Bar와 App Screen의 높이가 44px에서 56px로 바뀝니다. cb4c4a1이 변경으로 함께 업데이트된 패키지 1개
theme=cupertino App Bar와 App Screen의 높이가 44px에서 56px로 바뀝니다. cb4c4a1fa699aa이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Dialog와 Alert Dialog 컴포넌트를 추가합니다. fa699aa
이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.ScrollFog 컴포넌트를 추가하고, BottomSheetBody를 스크롤 방식을 직접 구성할 수 있는 view로 변경합니다. TabsList와 ChipTabsList는 native scroll-view prop을 전달받아 같은 fading edge를 직접 적용할 수 있습니다. fa699aa이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx에 Skeleton 컴포넌트를 추가합니다. fa699aa
radius, tone, width, height로 형태와 크기를 조절할 수 있습니다.이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.fa699aa이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.IdentityPlaceholder 컴포넌트를 추가합니다. 사람과 매장 도형은 기존 SVG에서 변환한 640×640 WebP 이미지로 제공합니다. fa699aa이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.fa699aa이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Select 컴포넌트를 추가합니다. fa699aa이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx에 ContextualFloatingButton 컴포넌트를 추가합니다. fa699aa
solid, layer 변형과 텍스트·아이콘 전용 레이아웃을 지원합니다.이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.HelpBubble 컴포넌트를 추가합니다. fa699aa이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx AppBar 아이콘 버튼의 슬롯 양쪽 여백을 React와 같은 규칙으로 자동 보정합니다. fa699aa
edge="leading" | "trailing" | "both"으로 자동 보정 방향을 덮어쓸 수 있습니다.이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Slider 컴포넌트를 추가합니다. 터치 드래그, 다중 범위, 단계·허용값, RTL, 값 표시와 접근성 레이블을 지원합니다. fa699aa이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.React·Rootage 명세에 맞춰 Lynx 컴포넌트의 Scale Feedback과 배경색 전환을 보완하고, List를 처음 누를 때 모서리 형태가 바뀌는 문제를 수정합니다. fa699aa
컴포넌트별 Feedback 변경 사항은 다음과 같습니다.
AppBar.IconButton: 버튼 전체에 Scale Feedback을 추가합니다.ReactionButton: 고정 축소율을 공통 Scale Feedback으로 교체하고, 선택 상태의 배경색 전환과 비활성·로딩 상태의 Feedback 처리를 보완합니다.InputButton: 내용 영역에 Scale Feedback과 버튼 배경색 전환을 추가하고, ClearButton에는 독립적인 Scale Feedback을 추가합니다.List.ButtonItem, List.CheckboxItem, List.RadioItem, List.SwitchItem: 내용 영역에 공통 Scale Feedback을 연결하고, 누름 배경이 처음부터 둥근 모서리를 유지하도록 수정합니다. 내부 선택 컨트롤이 중복으로 축소되지 않도록 처리합니다.Menu.Item: 내용 영역에 Scale Feedback을 추가하고, 누름 배경 Feedback을 보완합니다.SwipeableMenuSheet.Item, SwipeableMenuSheet.CloseButton: 항목의 내용 영역과 닫기 버튼 전체에 각각 Scale Feedback을 추가하고, 누름 배경 Feedback을 보완합니다.PageBanner: 상호작용 가능한 배너의 내용 영역에 Scale Feedback을 추가하고, 내부 Button·CloseButton의 Feedback이 배너의 Feedback과 독립적으로 동작하도록 보완합니다.Callout.CloseButton: 누름 상태의 배경색과 배경색 전환을 추가합니다.이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.fa699aa이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.이 변경으로 함께 업데이트된 패키지 2개
Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa
@seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.disabled로 바뀌면 pressed 상태를 해제합니다.b956124Checkbox, Chip, Progress Circle, Radio Group, Switch의 네이티브 접근성 지원을 확장합니다. 5871638
Lynx Field Button 컴포넌트를 추가합니다. 6201bcb
npx @seed-design/cli@latest add ui:field-button로 Registry 컴포넌트를 설치할 수 있습니다.Lynx 컴포넌트에 누르는 동안 요소가 축소되는 Scale Feedback을 추가합니다. 2c3a308
ScaleFeedback 컴포넌트와 useScaleFeedback 훅을 제공합니다.
요소 전체를 축소하는 Self Scale과 내부 콘텐츠만 축소하는 Content Scale을 구성할 수 있습니다.
mergeProps 유틸을 추가하고 컴포넌트의 props 합성에 적용합니다.
사용자 이벤트와 ref를 내부 동작과 함께 보존하며, Main Thread와 Background Thread의 실행 경계를 유지합니다.
최소 지원 버전은 Lynx Engine 3.9입니다.
3a66eebMenu 컴포넌트를 추가합니다. f8db24aLynx용 SwipeableMenuSheet 컴포넌트를 추가합니다. 441a22e
npx @seed-design/cli@latest add ui:swipeable-menu-sheet로 Registry 컴포넌트를 설치할 수 있습니다.notification prop을 추가합니다. Tabs Trigger에는 선택된 항목을 다시 누르는 동작도 처리할 수 있도록 bindtap prop을 추가합니다. 5871638Lynx 컴포넌트의 pressed 색상 피드백을 개선합니다. 50c7e53
기존 Background Thread의 상태 갱신에 의존하던 pressed 색상 반응을
Main Thread의 :active 기반으로 개선하고, React와 동일한 색상 transition을 적용합니다.
짧은 탭에서도 색상 피드백이 빠르게 시작됩니다.
disabled·loading 상태의 입력 제한과 기존 pressed 상태 처리는 유지합니다.
List 컴포넌트의 Lynx 버전을 추가합니다. ce7fcfe
ListHeader를 제공합니다.npx @seed-design/cli@latest add ui:list로 Registry 컴포넌트를 설치할 수 있습니다.02c08d08c496bda5ced0abe66559Lynx에 PageBanner 컴포넌트를 추가합니다. b618d5c
npx @seed-design/cli@latest add ui:page-banner로 Registry 컴포넌트를 설치할 수 있습니다.Lynx용 Select Box 컴포넌트를 추가합니다. 9070482
Checkbox와 Radio Group 방식의 선택형 카드, 다열 배치, 선택 상태에 따른 Footer 표시를 지원합니다.
표준 멀티컬러 아이콘을 자동으로 감지해 원본 색상을 유지합니다. 자동 감지되지 않는 아이콘은 multicolor 옵션으로 지정할 수 있습니다.
Lynx Notification Badge 컴포넌트를 추가합니다. 174a5a1
@seed-design/lynx-react에서 NotificationBadge와 NotificationBadgePositioner를 사용할 수 있습니다.@seed-design/lynx-css/recipes/notification-badge와 notification-badge-positioner에서 스타일 Recipe를 제공합니다.Lynx용 Segmented Control 컴포넌트를 추가합니다. 0939477
npx @seed-design/cli@latest add ui:segmented-control로 Registry 컴포넌트를 설치할 수 있습니다.Lynx Tabs의 Indicator 위치를 수정합니다. f3755b4
triggerLayout="hug"에서 Indicator가 List의 좌측 gutter와 어긋나는 문제를 수정합니다.6af8a34Lynx에 Callout 컴포넌트를 추가합니다. ff225ee
neutral, informative, positive, warning, critical, magic tone을 지원합니다.npx @seed-design/cli@latest add ui:callout로 Registry 컴포넌트를 설치할 수 있습니다.Lynx용 Accordion 컴포넌트를 추가합니다. bd5cd3b
inline, separated variant와 medium, large size를 제공합니다.Lynx용 Tabs 컴포넌트를 추가합니다. 6f6c626
Tabs.Root, Tabs.List, Tabs.Trigger, Tabs.Content, Tabs.Carousel API로 구성할 수 있습니다.Lynx Checkbox의 ghost 상태 전환을 안정화합니다. ca0931b
@seed-design/lynx-react와 @seed-design/lynx-css를 함께 업데이트해야 합니다.Bottom Sheet의 content 최대 너비를 480px로 맞춥니다. aef119e
BottomSheetContent가 시트를 왼쪽에 고정하던 인라인 left 값을 풀어, 폭이 제한됐을 때 좌우 여백이 같게 배치됩니다. style로 left를 직접 지정하면 그 값이 우선합니다.TextFieldTextarea의 첫 입력 시 자동 높이가 세로 여백만큼 불필요하게 늘어나는 문제를 수정합니다. 598cd3aTagGroup의 문자열 구분자 앞뒤 공백을 제거해 브라우저 프리뷰와 네이티브 Lynx에서 항목 간격이 다르게 보이는 문제를 수정합니다. fdf4575TextFieldTextarea의 자동 높이 영역을 눌렀을 때 포커스가 해제되어 키를 입력할 수 없는 문제를 수정합니다. 5a7ca99ProgressCircle의 indeterminate 상태가 첫 화면부터 표시되도록 수정합니다. 21aa395Lynx 입력 폼 컴포넌트를 추가합니다. ebb4eae
Field, TextField, KeyboardAvoidingScrollView를 제공합니다.TextField.Input과 TextField.Textarea에서 native 입력, controlled value, grapheme 단위 글자 수 제한을 지원합니다.TextField.Textarea는 내용에 따른 자동 높이 조절을 지원합니다.KeyboardAvoidingScrollView는 focus된 입력과 Field footer가 키보드에 가려지지 않도록 스크롤합니다.npx @seed-design/cli@latest add ui:text-field로 조합된 snippet을 설치할 수 있습니다.라이선스를 Apache-2.0으로 명시했습니다. 기존에는 license 필드가 비어 있어 저장소 루트의 Apache License 2.0과 일치하지 않았고, 배포물에 LICENSE와 NOTICE가 포함되지 않아 이용 조건을 확인할 수 없었습니다. 270c93d
당근 로고를 비롯한 브랜드 리소스는 별도 가이드라인을 따르며, 당근을 사칭하거나 당근 서비스와 관련이 있는 것처럼 오인하게 하는 사용은 허용되지 않습니다. 자세한 내용은 NOTICE 파일을 참고해주세요.
(BREAKING CHANGE: @lynx-js/react를 0.117.0 이상으로 업그레이드해야 합니다.) 테마 변경에 반응하는 useSeedClassName 훅을 추가합니다. 2ad8e8c
<page>에서 getSeedClassName() 대신 useSeedClassName()을 사용하면, host가 lynx.__globalProps.theme을 변경할 때 자동으로 리렌더되어 테마가 즉시 반영됩니다.getSeedClassName() 순수 함수는 그대로 유지됩니다. 테마 변경에 반응할 필요가 없는 정적 컨텍스트에서 계속 사용할 수 있습니다.useGlobalProps()에 의존하므로 @lynx-js/react 0.117.0 이상이 필요합니다.Lynx AppBar 컴포넌트를 추가합니다. c8d4c26
AppBar.Root, AppBar.Left, AppBar.Main, AppBar.Right, AppBar.IconButton 등 compound API를 제공합니다.SystemInfo.platform에 따라 Android에서는 android, 그 외 플랫폼에서는 cupertino theme을 기본으로 적용합니다.theme prop으로 platform 기본값을 수동 override할 수 있습니다.LynxAccessibilityProps 타입을 추가했습니다. 컴포넌트가 이 타입을 확장해 accessibility-label/accessibility-role-description/accessibility-value/accessibility-elements-hidden 등을 받아 native element에 전달할 수 있습니다. f039fb3Lynx Badge 컴포넌트를 추가합니다. 26d3517
@seed-design/lynx-react에서 Badge를 직접 import해 사용할 수 있습니다.@seed-design/lynx-css/recipes/badge에서 Badge recipe 스타일을 제공합니다.Lynx BottomSheet가 앱 셸 위에 안정적으로 표시되고, 본문 스크롤 제스처를 내부에서 처리하도록 개선합니다. 4e2ee69
z-index를 높여 앱바 같은 상단 영역까지 backdrop이 덮이도록 수정합니다.BottomSheetBody가 세로 스크롤 영역으로 렌더링되어 본문을 스크롤할 때 뒤쪽 화면이 함께 스크롤되는 문제를 방지합니다.BottomSheetRoot의 handleOnly를 함께 사용할 수 있습니다.SEED Design Lynx의 첫 stable 버전을 릴리즈합니다. 699af2c
@seed-design/lynx-css: Lynx 환경에서 사용할 수 있는 SEED 디자인 토큰, base CSS, component recipe CSS를 제공합니다.@seed-design/lynx-react: Lynx용 SEED React 컴포넌트와 hook을 제공합니다.
ActionButton, BottomSheet, Box, Checkbox, HStack, ProgressCircle, RadioGroup, Switch, TagGroup, Text, VStackuseControllableState, useIconColor, usePressTap, useSafeAreauseSafeArea API로 env(safe-area-inset-*)와 host 앱의 lynx.__globalProps fallback을 함께 지원합니다.@seed-design/cli: Lynx framework 감지, registry snippet 추가, compatibility check, docs lookup 흐름을 지원합니다.