fix(components): make the UI kit, theme helpers and reset-css behave for real users

[owjs3901]

Refs #692 (RT-07~RT-19, RT-27, RT-28)

이 PR은 열린 UI 키트 PR #720 #721 #723 #724 #725를 합친 통합 base 위에 쌓여 있습니다(merge 커밋 5개 + 고유 커밋 48fc98f2). 이 PR의 CI는 main 대상으로 도므로 diff에 위 PR들의 변경이 함께 보이고, #720 #721 #723 #724 #725가 먼저 병합되어야 합니다. 병합 충돌은 Checkbox(forwardRef + props.id 우선 id)와 Radio(ref + 올바른 :focus-visible solid outline), Select(위치 effect + 키보드/포커스 effect를 둘 다 유지)에서 났고 양쪽 동작을 모두 보존하도록 풀었습니다. 병합 직후 bun test 5478 pass를 확인한 뒤에 고유 변경을 시작했습니다.

요약

항목마다 통합 base에서 먼저 확인했고, 이미 고쳐진 것은 고치지 않고 아래에 적었습니다. 컴포넌트는 스타일링은 그대로 빌드 타임이고 동작 JS만 바뀝니다.

항목별 결과

base(#720 등)에서 이미 해결됨

• RT-07 Select 제어형 open: 바깥 클릭이 onOpenChange(false)로 가고 제어형일 때는 내부 상태를 바꾸지 않습니다(fix(react,components): support React 18 peers and drop React 19-only APIs #720). 동작 계약(소유자에게 알림, 제어형 유지, 비제어형 닫힘, 내부 클릭 무시, open prop 추종)을 테스트로 고정했습니다.
• RT-08(일부) callback ref가 반환하는 cleanup이 React 18에서 무시되던 누수: effect로 옮겨져 있었습니다(fix(react,components): support React 18 peers and drop React 19-only APIs #720).

이 PR에서 수정

• RT-08(나머지) Select 위치: position: fixed인데 문서 크기와 비교하던 것을 innerWidth/innerHeight(뷰포트)와 비교하고, 한쪽 inset을 쓸 때 반대쪽을 비웁니다. 아래/위/오른쪽 충돌과 resize 시 전환 테스트.
• RT-09 SelectTrigger asChild: 자식 onClick/onKeyDown을 열기 동작과 합성(자식 → 트리거에 준 핸들러 → 열기, preventDefault면 중단), className 병합, 트리거의 상태 aria(aria-expanded 등)가 항상 우선, 자식의 aria-label은 유지, 자식 ref와 트리거 ref를 합성(React 18/19 모두). SelectTrigger는 forwardRef로 바뀌었습니다.
• RT-10 Stepper: callback만 준 비제어 사용도 값이 바뀌고, 제어형(value)은 알리기만 합니다.
• RT-11 Stepper: 소비자의 onClick/onChange는 합성되고(preventDefault면 중단) disabled/value/type은 불변 props가 뒤에 와서 경계 비활성화를 덮어쓸 수 없습니다. text 모드는 입력 전용 속성(type, readOnly, value, onChange)이 없는 <output>으로 렌더링합니다.
• RT-12 Button/Input/Textarea의 강제 aria-label("button"/"input"/"textarea") 제거: 보이는 텍스트나 연결된 <label>이 이름이 됩니다. 아이콘만 있는 버튼은 호출하는 쪽이 aria-label을 줍니다. Input의 장식 아이콘은 aria-hidden.
• RT-12 확장 Select의 강제 ^Gria-label도 제거했습니다(SelectOption의 Select option, SelectContainer의 Select container, SelectTrigger의 Select toggle, 확인 버튼의 Select confirm button). 옵션은 내용이 이름이고,
  ole=listbox인 컨테이너는 트리거를 ^Gria-labelledby로 가리키며(호출자가 준 트리거 id나 ^GsChild 자식의 id를 따라감), 호출자가 ^Gria-label/^Gria-labelledby를 주면 그것이 우선합니다. #725의 테스트 선택자는
  ole/^Gria-haspopup으로 바꿨습니다.
• RT-13 Input 지우기: 가짜 {target:{value:''}} 이벤트 대신 값을 비우고 실제 input 이벤트를 발생시켜 React가 진짜 ChangeEvent를 만들게 합니다(제어형/비제어형 모두, 포커스 복귀). 소유자가 값을 유지하면 지워지지 않습니다.
• RT-14 Input/Textarea: 에러 시 aria-invalid, 에러 메시지에 id와 role="alert", 컨트롤의 aria-describedby에 사용자 값과 메시지 id 병합. 에러가 없으면 아무것도 주장하지 않습니다.
• RT-15 색 변수: Input/Textarea의 변수를 컨테이너로 옮겨 아이콘/지우기 버튼/에러 문구도 상속하고, CSS가 읽는 이름을 공개 키와 맞췄습니다(Input inputBackground, inputDisabledBackground, inputDisabledText, inputPlaceholder, primaryBackground; Textarea disabledBackground, disabledText; Select 팝업 --inputBackground). 키는 추가만 했고 기존 키는 그대로입니다. 컨테이너에서 변수를 상속하는지 테스트.
• RT-16 로딩 Button: aria-busy, 기본으로 비활성화되어 중복 활성화 불가(disableWhileLoading={false}로 끌 수 있음), 화면에 보이지 않는 role="status" 문구(loadingLabel, 기본 "Loading").
• RT-17 ThemeScript: nonce를 포함한 표준 script props를 전달하고, 저장소/matchMedia 읽기가 던져도 중단되지 않고 기본 테마를 설정합니다(생성된 스크립트를 실제로 실행해 검증).
• RT-18 getTheme/setTheme/initTheme: document가 없으면(SSR) 아무것도 하지 않고(getTheme은 null), 저장소 쓰기가 막혀도 현재 페이지에는 적용됩니다.
• RT-19 시스템/탭 간 동기화: 저장된 테마(= setTheme로 명시한 선택)가 있으면 그것이 우선, 없으면 auto일 때 시스템 설정을 따르고 변경도 따라갑니다. 다른 탭이 저장한 테마(storage 이벤트)와 삭제도 따라갑니다. ThemeScript에 같은 리스너가 들어 있고, initTheme은 추종을 멈추는 함수를 반환합니다(반환 타입 void → () => void, 기존 호출은 그대로 동작).
• RT-27 reset-css: 접근성용 숨김 규칙에 clip: rect(0,0,0,0) 추가. 실제 추출 CSS가 sanitize.css 13의 두 규칙과 같은지 테스트.
• RT-28 줄 커버리지가 아닌 사용자 계약 테스트: 이벤트/포커스/ARIA/제어 props(Select 열림·위치·asChild, Stepper, Button, Input/Textarea 이름·설명·지우기, ThemeScript CSP·저장소 실패·다른 탭·시스템 변경, 테마 헬퍼 SSR, reset-css CSS 동등성). 이미 bun-test-env-dom이 기본인 이 저장소 방식(happy-dom)을 따랐습니다.

새로 생기는 오류

빌드 에러는 없습니다. 타입/동작 변경: Button/Input/Textarea에 더 이상 기본 aria-label이 없고, Input의 에러 메시지는 aria-label="error-message" 대신 role="alert"로 조회됩니다(스냅샷/쿼리 갱신).

남는 한계

• (범위 밖, 발견) SelectOption(aria-label="Select option")과 SelectContainer("Select container")도 모든 옵션의 이름을 같은 문구로 덮어씁니다. RT-12와 같은 문제지만 #725의 설계와 기존 테스트가 이 라벨에 기대고 있어 이번에 건드리지 않았습니다.
• 이 base에는 react-18 CI 잡이 없어 React 18 실행은 테스트하지 못했고, React 18에서 쓰이는 API만 사용했습니다(useId, forwardRef, version으로 ref 위치 판별). elementRef는 버전 인자로 두 분기를 모두 단위 테스트합니다.
• (범위 밖, 발견) 추출기가 css() 같은 유틸 호출을 스코프 없이 이름으로만 판별해, 번들을 압축한 라이브러리(css as a)에서 같은 이름(^G)의 지역 변수 호출이 Cannot compose ... at build time 오류로 잘못 잡힙니다. 이 PR의 Stepper가 그 경로를 밟아 landing Next 빌드가 실패해(고유 커밋 714539d) setter를 멤버 호출(stepper.setValue)로 바꿔 피했습니다. 근본 수정은 추출기에서 지역 바인딩이 import를 가리는지 확인하는 것입니다.
• lint 경고 13개는 base의 React 18 호환 구조(forwardRef, Context.Provider, useContext)에서 오며 기존 2개 외에 이 PR이 추가한 것은 SelectTrigger의 forwardRef 하나입니다(React 18에서 ref를 받으려면 필요).

검증

• bun test 5558 pass / 0 fail, 커버리지 100%. bun lint 오류 0. cargo test --workspace, cargo fmt/clippy -D warnings(lint 스크립트 포함) 통과. Rust 변경 없음.
• 변경 파일: packages/components, packages/react(ThemeScript, 테마 헬퍼), packages/reset-css. 체인지팩 Patch(components, react, reset-css).

2026-10-08 업데이트: main 11790bef를 merge commit으로 병합했습니다; 충돌 파일: 없음; 충돌 없이 자동 병합했고, 이미 포함된 squash 원본은 조상 확인 후 ours 전략으로 중복 적용하지 않았습니다.

[github-actions]

Changepacks

@devup-ui/wasm@1.0.83 → 1.0.84 - bindings/devup-ui-wasm/package.json

Patch

• style-order-range only checks styleOrder where the build reads it: a prop of a Devup UI component and a top-level key of a style object passed to css/globalCss/keyframes. A styleOrder key in nested data, in a prop value such as an element passed as a prop, or in a call of a function sharing a name with an Object.prototype member is no longer reported. The array, typography and media rules already skip non-style data, and css-utils-literal-only accepts a css()/keyframes() result held in a const inside a function. No new build errors.
• Tailwind classes in a className: each class compiles on its own and every class Tailwind does not define (custom, plugin and analytics classes) stays as written, where any recognized class used to rebuild the whole className without them and could rewrite part of another class; a class touching a template interpolation (icon-${name}) is left as written, and template classNames no longer get spaces inserted around interpolations. A class whose variant is not understood stays as written instead of applying unconditionally; variants follow Tailwind v4: stacked variants compose (hover:focus: matches the element itself), hover is guarded by @media (hover: hover), group-/peer- use the group/peer marker classes (and group-hover/name), and data-, aria-, has-, nth-, , **, supports-[…] and [&…]/[@media …] variants compile. Utilities emit all their declarations (size-, rounded-t-, truncate, sr-only, not-sr-only, text-sm with its line height, text-sm/6, leading-), translate/rotate/scale/skew compose through Tailwind's individual properties and registered variables (@Property) with negative values kept negative, and arbitrary values follow Tailwind's grammar: spaces for underscores except in url() and var() names, _ for an underscore, spaces around math operators, type hints, [property:value] and (--variable) shorthands. Words that only share a utility's prefix (select-wrapper, order-summary, cursor-foo) are no longer compiled

@devup-ui/bun-plugin@1.0.22 → 1.0.23 - packages/bun-plugin/package.json

Patch

• Bun plugin works with Bun.build: DevupUI() (from @devup-ui/bun-plugin/register) serves the generated stylesheet to the bundler's CSS loader once every other module is loaded, so the build emits a CSS output with the styles of the whole bundle instead of an empty module; class names are short there and readable under the runtime (debug option). Files importing the packages Devup UI takes the place of (@emotion/react, @emotion/styled, styled-components, @vanilla-extract/css), @stylexjs/stylex, or a subpath or re-export of these or @devup-ui/react, are compiled instead of skipped

@devup-ui/components@0.1.60 → 0.1.61 - packages/components/package.json

Patch

• RadioGroup is a radiogroup with an optional label, its radios share a name (generated when not given) so arrow keys move between them, and it keeps the typed values of its options: false, 0 and '' stay selectable and onChange receives the option's own value rather than a string. Button-variant radios are visually hidden instead of display:none, so they stay focusable and show a focus ring, and the default radio's focus outline is valid CSS and shown on :focus-visible. Checkbox uses an id it is given for its labels as well as its input, where the labels used to point at a generated id
• @devup-ui/react and @devup-ui/components take React as a peer of ^18 || ^19 instead of * and no longer depend on React 19 themselves, so a React 18 app no longer gets a second React. Select and Stepper read their context with useContext instead of React 19's use() and provide it with Context.Provider instead of React 19's (which crashes React 18), and Select repositions its container from an effect instead of a callback ref returning cleanup, which React 18 ignores
• Select follows the listbox pattern: the trigger has aria-haspopup, aria-controls and opens with ArrowDown/ArrowUp; the popup is a listbox (aria-multiselectable for checkbox selects) whose options carry role=option, aria-selected and aria-disabled; opening focuses the selected or first option, arrows/Home/End move between enabled options, Enter/Space choose one, and Escape or choosing closes the popup and returns focus to the trigger. An outside click on a controlled select now calls onOpenChange(false) instead of changing hidden internal state
• Toggle is an accessible switch: role=switch with aria-checked, focusable with a visible focus ring, toggled by Space and Enter, labelled through aria-label or aria-labelledby, and submitted under the name it is given; when disabled it leaves the tab order, ignores keys and its hidden input is disabled
• Components behave for keyboard, screen readers and both React 18 and 19: Button, Input and Textarea no longer force generic aria-labels (the visible text or an associated label names them), Input and Textarea mark errors with aria-invalid and aria-describedby pointing at the message, a loading Button sets aria-busy, is disabled by default (disableWhileLoading) and announces loadingLabel, Input clear dispatches a real change event instead of a fabricated one, color customization variables sit on the container so every part sees them and every public color key matches its CSS custom property (new keys inputDisabledBackground, inputDisabledText, inputPlaceholder, primaryBackground, Textarea disabledBackground and disabledText), Select positions against the viewport and clears the opposite inset, SelectTrigger asChild composes the child onClick, onKeyDown and ref with its own, Stepper counts without a controlled value, keeps its bound and disabled safeguards and renders its text mode as an output element. Select no longer forces aria-labels over its trigger, options, confirm button and container: an option is named by its content, the listbox by its trigger (aria-labelledby) or by what the caller passes. ThemeScript takes nonce and other script props and never aborts on blocked storage or missing matchMedia, follows the system while no theme was chosen and themes saved in other tabs; getTheme, setTheme and initTheme are safe on the server and initTheme returns a function that stops following. reset-css clips accessible-hidden content as sanitize.css does. No new build errors.
• Button, Checkbox, Input, Radio and Textarea forward their ref to the button, input or textarea they render, so a ref reaches the form element on React 18 as well as React 19

@devup-ui/eslint-plugin@1.0.22 → 1.0.23 - packages/eslint-plugin/package.json

Patch

• style-order-range only checks styleOrder where the build reads it: a prop of a Devup UI component and a top-level key of a style object passed to css/globalCss/keyframes. A styleOrder key in nested data, in a prop value such as an element passed as a prop, or in a call of a function sharing a name with an Object.prototype member is no longer reported. The array, typography and media rules already skip non-style data, and css-utils-literal-only accepts a css()/keyframes() result held in a const inside a function. No new build errors.

@devup-ui/next-plugin@1.0.90 → 1.0.91 - packages/next-plugin/package.json

Patch

• Auto-update: depends on '@devup-ui/plugin-utils' via a local workspace dependency

@devup-ui/plugin-utils@1.0.17 → 1.0.18 - packages/plugin-utils/package.json

Patch

• Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles

@devup-ui/react@1.0.44 → 1.0.45 - packages/react/package.json

Patch

• @devup-ui/react and @devup-ui/components take React as a peer of ^18 || ^19 instead of * and no longer depend on React 19 themselves, so a React 18 app no longer gets a second React. Select and Stepper read their context with useContext instead of React 19's use() and provide it with Context.Provider instead of React 19's (which crashes React 18), and Select repositions its container from an effect instead of a callback ref returning cleanup, which React 18 ignores
• Components behave for keyboard, screen readers and both React 18 and 19: Button, Input and Textarea no longer force generic aria-labels (the visible text or an associated label names them), Input and Textarea mark errors with aria-invalid and aria-describedby pointing at the message, a loading Button sets aria-busy, is disabled by default (disableWhileLoading) and announces loadingLabel, Input clear dispatches a real change event instead of a fabricated one, color customization variables sit on the container so every part sees them and every public color key matches its CSS custom property (new keys inputDisabledBackground, inputDisabledText, inputPlaceholder, primaryBackground, Textarea disabledBackground and disabledText), Select positions against the viewport and clears the opposite inset, SelectTrigger asChild composes the child onClick, onKeyDown and ref with its own, Stepper counts without a controlled value, keeps its bound and disabled safeguards and renders its text mode as an output element. Select no longer forces aria-labels over its trigger, options, confirm button and container: an option is named by its content, the listbox by its trigger (aria-labelledby) or by what the caller passes. ThemeScript takes nonce and other script props and never aborts on blocked storage or missing matchMedia, follows the system while no theme was chosen and themes saved in other tabs; getTheme, setTheme and initTheme are safe on the server and initTheme returns a function that stops following. reset-css clips accessible-hidden content as sanitize.css does. No new build errors.

@devup-ui/reset-css@1.0.31 → 1.0.32 - packages/reset-css/package.json

Patch

• Components behave for keyboard, screen readers and both React 18 and 19: Button, Input and Textarea no longer force generic aria-labels (the visible text or an associated label names them), Input and Textarea mark errors with aria-invalid and aria-describedby pointing at the message, a loading Button sets aria-busy, is disabled by default (disableWhileLoading) and announces loadingLabel, Input clear dispatches a real change event instead of a fabricated one, color customization variables sit on the container so every part sees them and every public color key matches its CSS custom property (new keys inputDisabledBackground, inputDisabledText, inputPlaceholder, primaryBackground, Textarea disabledBackground and disabledText), Select positions against the viewport and clears the opposite inset, SelectTrigger asChild composes the child onClick, onKeyDown and ref with its own, Stepper counts without a controlled value, keeps its bound and disabled safeguards and renders its text mode as an output element. Select no longer forces aria-labels over its trigger, options, confirm button and container: an option is named by its content, the listbox by its trigger (aria-labelledby) or by what the caller passes. ThemeScript takes nonce and other script props and never aborts on blocked storage or missing matchMedia, follows the system while no theme was chosen and themes saved in other tabs; getTheme, setTheme and initTheme are safe on the server and initTheme returns a function that stops following. reset-css clips accessible-hidden content as sanitize.css does. No new build errors.

@devup-ui/rsbuild-plugin@1.0.67 → 1.0.68 - packages/rsbuild-plugin/package.json

Patch

• Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles

@devup-ui/vite-plugin@1.0.73 → 1.0.74 - packages/vite-plugin/package.json

Patch

• Auto-update: depends on '@devup-ui/plugin-utils' via a local workspace dependency

@devup-ui/webpack-plugin@1.0.71 → 1.0.72 - packages/webpack-plugin/package.json

Patch

• Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
...ackages/components/src/components/Button/index.tsx	100.00% <100.00%> (ø)
...kages/components/src/components/Checkbox/index.tsx	100.00% <100.00%> (ø)
packages/components/src/components/Input/index.tsx	100.00% <100.00%> (ø)
packages/components/src/components/Radio/index.tsx	100.00% <100.00%> (ø)
...ges/components/src/components/RadioGroup/index.tsx	100.00% <100.00%> (ø)
...ackages/components/src/components/Select/index.tsx	100.00% <100.00%> (ø)
...ckages/components/src/components/Stepper/index.tsx	100.00% <100.00%> (ø)
...kages/components/src/components/Textarea/index.tsx	100.00% <100.00%> (ø)
...ackages/components/src/components/Toggle/index.tsx	100.00% <100.00%> (ø)
packages/components/src/contexts/useSelect.ts	100.00% <100.00%> (ø)
... and 6 more

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.