@ihabdevteam/core 0.13.2 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -55,6 +55,10 @@
|
|
|
55
55
|
--scb-wrong-bg: #ef4444;
|
|
56
56
|
--scb-wrong-border: #ef4444;
|
|
57
57
|
--scb-wrong-fg: #ffffff;
|
|
58
|
+
/* 호버·포커스도 상태 색과 같은 방식으로 연다 — 소비자가 바꿔 끼울 수 있게. */
|
|
59
|
+
--scb-idle-hover-bg: var(--color-whiteLine);
|
|
60
|
+
--scb-idle-hover-border: var(--color-lightGray);
|
|
61
|
+
--scb-focus-ring: var(--color-main);
|
|
58
62
|
}
|
|
59
63
|
|
|
60
64
|
.sound-compass__speaker-btn--idle {
|
|
@@ -132,6 +136,26 @@
|
|
|
132
136
|
}
|
|
133
137
|
|
|
134
138
|
/* 스피커 버튼 wrap의 정적 속성만 분리(나머지는 상태·좌표 기반 동적 값이라 인라인 유지) */
|
|
139
|
+
/* 호버·포커스 — `all: unset` 이 브라우저 기본 상태까지 지워, 누를 수 있는 자리인지
|
|
140
|
+
눈으로 알 길이 없었다(실측: 이 파일에 :hover·:focus 규칙이 0개였다). 커서만
|
|
141
|
+
pointer 로 바뀔 뿐이었다.
|
|
142
|
+
|
|
143
|
+
고를 수 없을 때는 감싼 자리가 `pointer-events: none` 이라 :hover 가 애초에 안
|
|
144
|
+
걸리고, tabIndex 도 -1 이라 :focus-visible 도 안 걸린다. 그래서 이 규칙들은
|
|
145
|
+
clickable 일 때만 보인다. */
|
|
146
|
+
.sound-compass__speaker-btn:hover {
|
|
147
|
+
box-shadow: 0 0 0 4px color-mix(in srgb, var(--scb-focus-ring) 14%, transparent);
|
|
148
|
+
}
|
|
149
|
+
.sound-compass__speaker-btn--idle:hover {
|
|
150
|
+
background: var(--scb-idle-hover-bg);
|
|
151
|
+
border-color: var(--scb-idle-hover-border);
|
|
152
|
+
}
|
|
153
|
+
/* :focus-visible 이라 마우스로 누를 때는 링이 안 뜨고 키보드로 옮길 때만 뜬다. */
|
|
154
|
+
.sound-compass__speaker-btn:focus-visible {
|
|
155
|
+
outline: 2px solid var(--scb-focus-ring);
|
|
156
|
+
outline-offset: 2px;
|
|
157
|
+
}
|
|
158
|
+
|
|
135
159
|
.sound-compass__speaker-pos {
|
|
136
160
|
position: absolute;
|
|
137
161
|
}
|
|
@@ -162,6 +162,6 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
|
|
|
162
162
|
const iconSize = Math.round(Math.max(10, Math.min(56, BTN * 0.38)));
|
|
163
163
|
const numberSize = Math.round(Math.max(7, Math.min(18, BTN * 0.2)));
|
|
164
164
|
const numberOnlySize = Math.round(Math.max(10, Math.min(56, BTN * 0.4)));
|
|
165
|
-
return (_jsxs("div", { className: "sound-compass__speaker-pos", style: { ...baseStyle, left: x - BTN / 2, top: y - BTN / 2 },
|
|
165
|
+
return (_jsxs("div", { className: "sound-compass__speaker-pos", style: { ...baseStyle, left: x - BTN / 2, top: y - BTN / 2 }, children: [pulse && _jsx("div", { className: "sound-compass__pulse", style: { width: BTN, height: BTN } }), _jsxs("button", { type: "button", tabIndex: clickable ? 0 : -1, "aria-disabled": clickable ? undefined : true, onClick: clickable ? () => onSelectSpeaker?.(sp.id) : undefined, className: `sound-compass__speaker-btn sound-compass__speaker-btn--${state}`, style: { width: BTN, height: BTN }, "aria-label": sp.label, children: [showIcon && getStateIcon(state, iconSize), _jsx("span", { className: "sound-compass__speaker-number", style: { fontSize: showIcon ? numberSize : numberOnlySize }, children: idx + 1 })] })] }, sp.id));
|
|
166
166
|
})] }) }));
|
|
167
167
|
}
|