Jelly UI v1.1은 실제 폼 컨트롤과 말랑한 소프트 바디 물리 효과를 결합한 의존성 없는 웹 컴포넌트 라이브러리로, 40개 커스텀 엘리먼트를 제공함- 하나의 모듈 스크립트로 설치하며
다크 모드, 운영체제 테마 자동 추적, 강조색 변경, 오른쪽에서 왼쪽으로 쓰는 RTL 배치를 지원함 - 버튼은 네이티브
<button>

, 슬라이더는 숨겨진range

입력을 이용해 키보드 조작·스크린 리더·폼 참여를 위한네이티브 의미 구조를 유지함 - 체크박스와 입력창부터 토스트·탭·다이얼로그까지 다양한 요소에 눌림·늘어남·물결·튕김 같은
촉각적 애니메이션을 적용함 - WCAG AA 색상 토큰과 ARIA 패턴을 내장해 부드러운 시각 효과를 살리면서도
접근 가능한 제품 인터페이스를 구성할 수 있음

설치와 테마

• Jelly UI는
  의존성 없이, 40개 커스텀 엘리먼트와 하나의<script type="module">

태그만으로 사용할 수 있음<script type="module" src="https://jelly-ui.com/package.js"></script>; <jelly-theme mode="auto"> <jelly-button variant="mint">Publish</jelly-button> </jelly-theme>

<jelly-theme>

는 하위 트리에 디자인 토큰을 한정 적용하는 테마 공급자임mode

는auto

,light

,dark

를 지원해 운영체제 설정을 따르거나 특정 테마를 강제할 수 있음accent

로강조색을 다시 지정할 수 있음

• 공통 색상 변형은
  azure

,rose

,amber

,mint

,graphite

,platinum

,white

이며, 크기는 주로small

,medium

,large

로 구성됨

버튼과 동작 요소

<jelly-button>

은 내부에 실제 네이티브<button>

을 넣어 키보드와 스크린 리더를 지원하는캡슐형 버튼임- 색상·크기와
pill

·square

형태, 비활성화 및 블록 배치를 설정할 수 있음

• 색상·크기와
  <jelly-icon-button>

은 아이콘 하나에 맞춘 사각형 또는 원형 버튼임label

속성으로 스크린 리더가 인식할 이름을 지정함

폼 입력 컨트롤

<jelly-checkbox>

는 폼에 참여하며checked

와불확정 상태(indeterminate

)를 지원하고, 상태가 바뀔 때 젤리 사각형이 튀어 오름<jelly-input>

은text

,email

,password

용 한 줄 입력 필드임- 포커스를 받으면 표면이 들리고 테두리가 나타나며, 입력할 때마다 캐럿 위치에서 물결이 번짐
disabled

와readonly

를 지원함

<jelly-label>

은for

로 컨트롤과 연결됨- 클릭하면 대상에 포커스하고 라벨 텍스트가
접근 가능한 이름이 되며, 필수 여부와 크기를 지정할 수 있음

• 클릭하면 대상에 포커스하고 라벨 텍스트가
  <jelly-otp>

는 숫자마다 상자 하나를 제공하는일회용 코드 입력기임- 입력, 백스페이스, 화살표 키, 붙여넣기를 처리하며 길이·색상·크기·비활성화를 설정할 수 있음

<jelly-radio>

는 같은 루트에서 동일한name

을 공유하는 항목끼리 그룹을 형성함- 이동식
tabindex

와 문서 방향을 고려한화살표 키 탐색을 지원함

• 이동식
  <jelly-radio-group>

은jelly-radio

를 위한 라벨 있는radiogroup

컨테이너임- 범례, 가로·세로 흐름 배치, 자식 요소로의 크기 전달을 제공함

<jelly-range>

는 최솟값과 최댓값 구간을 고르는이중 핸들 슬라이더임- 두 손잡이에
role="slider"

, 포커스, ARIA를 적용하며 드래그할 때 젤리 손잡이가 눌림

• 두 손잡이에
  <jelly-segmented>

는 상호 배타적인 선택지를 담은 캡슐형 트랙임- 선택 표시는 구간 사이를 이동하면서 기울고 늘어나는 젤리 알약 형태로 동작함

<jelly-select>

는 ARIAcombobox

·listbox

패턴을 사용하는 폼 연동 드롭다운임- 트리거와 옵션 패널 모두 소프트 바디 표면으로 구성됨

• 패널은 필드에서 펼쳐지며 아래 공간이 부족하면
  위쪽으로 전환됨

<jelly-slider>

는 단일 값을 선택하는 슬라이더임- 숨겨진 네이티브
range

입력이 의미 구조와 폼 참여를 담당하고, 화면에는 눌리는 젤리 손잡이가 표시됨

• 숨겨진 네이티브
  <jelly-switch>

는 드래그 가능한 스위치로, 손잡이가 액체 방울처럼 늘어나고 꺼짐·켜짐 색상이 교차 전환됨<jelly-textarea>

는 여러 줄 입력에 따라 최소·최대 높이 사이에서 자동으로 커짐- 표면도 높이에 맞춰 늘어나며 입력 시 캐럿 위치에서 물결이 발생하고,
disabled

와readonly

를 지원함

• 표면도 높이에 맞춰 늘어나며 입력 시 캐럿 위치에서 물결이 발생하고,

상태와 피드백

<jelly-alert>

는info

,success

,warning

,danger

네 가지 톤과 선택적인닫기 버튼을 제공하는 배너임<jelly-badge>

는 배지·태그·상태 표시에 쓰는 작은 요소로, 텍스트가 바뀔 때 튀어 오름- 채움·외곽선, 알약·사각형 형태와
live

,instant

동작을 설정할 수 있음

• 채움·외곽선, 알약·사각형 형태와
  <jelly-progress>

는 진행에 따라 채움의 앞부분이 흔들리는 진행 표시줄임불확정 모드에서는 덩어리가 양쪽 벽 사이를 튕김

<jelly-skeleton>

은 반짝임 대신 부드럽게 호흡하듯 흔들리는 로딩 자리표시자임line

,rect

,circle

형태를 지원함

<jelly-spinner>

는 세 점 사이를 이동하는 점액 덩어리형dots

와 형태를 바꾸며 회전하는blob

표시기를 제공함<jelly-toaster>

는 인라인 끝 방향에서 나타났다가 사라지는 토스트 알림을 관리함- 일반적으로
jellyToast('Saved!', { tone: 'success' })

헬퍼로 호출함 - 배치된 요소에
position="bottom"

을 주면 알림 스택이 위로 자라남

• 일반적으로

콘텐츠 표면

<jelly-accordion>

은 여러<jelly-collapsible>

항목을 묶음single

모드에서는 하나가 열릴 때 나머지가 튕기듯 닫힘

<jelly-card>

는 콘텐츠 아래에 놓이는 젤리 표면 컨테이너임squish

를 추가하면 부드러운 쿠션처럼 눌리면서버튼 역할을 함

<jelly-chip>

은 정적 라벨, 전환 가능한 필터 또는 제거 가능한 태그로 사용할 수 있음- 선택 가능·선택 상태·제거 가능·비활성화 여부를 설정함

<jelly-collapsible>

은 헤더 버튼으로 패널을 튕기듯 열고 닫는 펼침·접기 영역임- 텍스트가 아니라
표면이 움직이도록구성됨

• 텍스트가 아니라
  <jelly-divider>

는 가로·세로 또는 라벨이 있는 가는 구분선임<jelly-kbd>

는 눌러 볼 수 있는 젤리 키캡임key

로 실제 키와 연결하면 페이지 어디서든 해당 키를 누르는 동안 키캡도 내려감

탐색과 레이아웃

<jelly-resizable>

은 젤리 구분선을 드래그하거나 키보드로 크기를 조절하는패널 그리드임row

,vertical

,both

방향을 지원함

<jelly-tabs>

는 실제tablist

의미 구조를 사용하는 탭 보기임- 젤리 알약 형태의 선택 표시가 이동하고 탭 패널이 튕기며 나타남

오버레이

<jelly-dialog>

는 젤리처럼 튀며 나타나는 모달 대화상자임- 페이지를 잠그고 닫힌 뒤 이전 위치로
포커스를 반환함 - Escape 키, 닫기 버튼 또는 배경 클릭으로 닫을 수 있음

• 페이지를 잠그고 닫힌 뒤 이전 위치로
  <jelly-drawer>

는 끝에서 약간 넘어갔다 돌아오는 스프링 효과로 나타나는 플로팅 시트임- 인라인 시작·끝 또는 아래쪽에서 열 수 있음

<jelly-popover>

는 클릭으로 여는 비모달 패널임- 트리거에 고정되며 Escape 키나 외부 클릭으로 닫힘
top

,bottom

,start

,end

배치를 지원함

<jelly-tooltip>

은 마우스를 올리거나 키보드 포커스를 받을 때 트리거 위에 테마가 적용된 말풍선을 표시함- 네 방향 배치와 세 가지 크기를 지원함