@uniai-fe/uds-primitives 0.12.14 → 0.13.1

package/README.md

@@ -46,6 +46,74 @@ Button은 기존 priority 범위를 유지한다.
 `Input.Time.Template`과 standalone `TimePicker.Template`, `TimePickerUtils`도 root public
 entry에서 제공한다.
 
+`Fab.Button`은 아이콘 전용 주요 액션, `Fab.Expand`는 아이콘과 라벨을 표시한다.
+필수 `icon`은 ReactNode이며 `size`는 `small | medium | large`다. Button과 같은
+`fill="solid" | "outlined"`와 `priority`를 독립적으로 조합한다. 두 fill 모두 `priority`가
+필수이며 Button.Default와 같은 `primary`, `secondary`, `tertiary`, `green`, `yellow`,
+`orange`, `teal`, `pink`, `red`, `darkGray`, `lightGray`를 지원한다. 색상과 상태별 배경은
+Button 토큰을 재사용하며 outlined의 기본 면은 불투명 흰색이다.
+아이콘 전용 Button에는 행동 이름인 `aria-label`도 필수다. 화면 고정 배치는 소비자가 정한다.
+`Fab.Default`, `Fab.Extended`, `Fab.Label`은 기존 사용처와의 호환을 유지한다.
+
+```tsx
+import { Fab } from "@uniai-fe/uds-primitives";
+
+<Fab.Button
+  icon={<span aria-hidden="true">+</span>}
+  aria-label="항목 추가"
+  fill="solid"
+  priority="primary"
+  size="medium"
+/>;
+```
+
+관련 액션을 원형 버튼으로 펼치는 구성은 `Fab.Template`으로 시작하거나
+`Fab.Root` 안에 `Fab.Trigger`, `Fab.Menu.List`, `Fab.Menu.Item`을 직접 조립한다.
+`Fab.Expand`는 라벨 확장형이고, 메뉴를 펼치는 동작은 `Fab.Trigger`가 담당한다.
+`Root`는 hover·focus·click·keyboard, 메뉴 ID·ARIA 연결, 닫기와 focus 복귀를 소유한다.
+`direction`은 `up | down | left | right`이며 기본값은 `up`이다. 열림 상태는
+`open`과 `onOpenChange`로 제어하거나 `defaultOpen`으로 초기화한다.
+
+```tsx
+<Fab.Template
+  triggerProps={{
+    icon: <span aria-hidden="true">+</span>,
+    "aria-label": "콘텐츠 추가 방법",
+    fill: "solid",
+    priority: "primary",
+    size: "medium",
+  }}
+  items={[
+    {
+      id: "write",
+      icon: <span aria-hidden="true">✎</span>,
+      "aria-label": "새 글 작성",
+      fill: "solid",
+      priority: "secondary",
+      size: "small",
+      onClick: () => console.info("새 글 작성"),
+    },
+  ]}
+/>
+```
+
+`Root` 하나에 `Trigger` 하나와 `Menu.List` 하나를 두고 그 안에 `Menu.Item`을 조립한다.
+이 부품들은 Root 밖에서 사용하면 오류를 발생시킨다. `Menu.Item`의
+`aria-label`은 행동 이름과 Tooltip 문구이며 `persistentTooltips`로 열린 메뉴의
+문구를 계속 표시할 수 있다. 항목은 native `onClick`을 실행한 뒤 닫고 trigger로
+focus를 돌려준다. 소비자가 `event.preventDefault()`를 호출하면 이 자동 처리를 막는다.
+`Fab.Menu.Label`은 기존 `Tooltip.Text`를 재사용하는 메뉴명 표현 부품이며 Tooltip의
+스타일 문맥에서 사용한다. Speed Dial은 이 조합의 사용 사례 이름이며 별도 namespace가 아니다.
+Template 항목의 `id`는 DOM ID로도 쓰이므로 같은 화면에서 고유하게 지정한다.
+Template의 `className`, `style`, ref는 Root 하나에만 적용한다. 내부 버튼의
+`className`은 입력에서 제외하며 런타임 입력도 무시한다. 내부 스타일은 최상위
+`className` 아래 nested selector 또는 data attribute로 조정한다. 직접 조립하는
+Trigger·Menu.Item의 `className`은 유지한다.
+
+Hover로 열린 메뉴의 첫 포인터 클릭은 열림을 유지하고 이후 클릭·Enter·Space는
+토글한다. 닫힌 Trigger에서는 모든 방향키로 첫 액션에 진입하며, 열린 메뉴의
+반대 방향키는 Trigger에서 멈춘다.
+
 Select와 Dropdown이 함께 사용하는 `SelectedValue`, `toSelectedValueKey`,
 `isSameSelectedValue`, `isSameSelectedValueList`, `normalizeSingleSelectedValue`,
 `normalizeSelectedValuesByMode`도 root public entry에서 제공한다.

package/dist/styles.css

@@ -290,7 +290,6 @@
   --theme-checkbox-icon-default: transparent;
   --theme-checkbox-icon-selected: var(--color-common-100);
   --theme-checkbox-icon-disabled-selected: var(--color-common-100);
-  --theme-checkbox-focus-ring: rgba(2, 84, 255, 0.32);
   --theme-chip-height: var(--theme-size-small-3);
   /* 변경: Figma text menu item은 기본 chip보다 낮은 24px height를 사용한다. */
   --theme-chip-height-text: 24px;
@@ -417,6 +416,27 @@
   --dropdown-option-padding-block-xsmall: 0px;
   --dropdown-option-radius-xsmall: 4px;
   --dropdown-text-weight-selected-xsmall: var(--dropdown-text-weight);
+  --fab-height-small: var(--theme-size-medium-1);
+  --fab-height-medium: var(--theme-size-medium-2);
+  --fab-height-large: var(--theme-size-medium-3);
+  --fab-content-size-small: var(--theme-size-xsmall-3);
+  --fab-content-size-medium: var(--theme-size-small-1);
+  --fab-content-size-large: var(--theme-size-small-2);
+  --fab-radius: 60px;
+  --fab-padding-inline: var(--spacing-padding-5);
+  --fab-padding-block: var(--spacing-padding-2);
+  --fab-extended-padding-inline: var(--spacing-padding-6);
+  --fab-gap: var(--spacing-gap-4);
+  --fab-font-family: var(--font-family-sans);
+  --fab-font-size-small: var(--font-body-xxsmall-size);
+  --fab-font-size-medium: var(--font-body-xsmall-size);
+  --fab-font-size-large: var(--font-body-small-size);
+  --fab-font-weight: var(--font-body-small-weight);
+  --fab-line-height: var(--font-body-small-line-height);
+  --fab-letter-spacing: var(--font-body-small-letter-spacing);
+  --fab-outlined-background: var(--button-default-outline-bg);
+  --fab-disabled-background: var(--button-default-neutral-disabled-bg);
+  --fab-disabled-foreground: var(--button-default-neutral-disabled-foreground);
   --form-field-width: auto;
   --form-field-flex: 0 0 auto;
   --form-field-gap-x: var(--spacing-gap-5);
@@ -649,7 +669,6 @@
   --theme-radio-card-description-color: var(--color-label-neutral);
   --theme-radio-card-badge-background: var(--color-surface-static-blue);
   --theme-radio-card-badge-color: var(--color-primary-default);
-  --theme-radio-focus-ring: rgba(2, 84, 255, 0.32);
   --theme-radio-disabled-selected-opacity: 0.28;
   /* layout presets */
   --select-width: 100%;
@@ -790,7 +809,6 @@
   --select-multiple-chip-border-color: transparent;
   --select-multiple-chip-remove-color: var(--color-label-strong);
   --select-multiple-chip-remove-hover-color: var(--color-label-strong);
-  --select-multiple-chip-remove-focus-outline-color: var(--color-border-strong);
   --select-multiple-chip-summary-color: var(--color-label-standard);
   --select-multiple-chip-summary-surface: var(--color-surface-standard);
   --select-multiple-chip-summary-border-color: transparent;
@@ -819,7 +837,6 @@
     0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.08);
   --switch-thumb-shadow-checked:
     0px 2px 8px rgba(0, 0, 0, 0.08), 0px 0px 4px rgba(0, 0, 0, 0.12);
-  --switch-focus-ring: var(--color-primary-focus);
   --switch-disabled-opacity: 0.4;
   --switch-text-width: fit-content;
   --switch-text-height-medium: 32px;
@@ -2535,6 +2552,10 @@
   width: var(--calendar-body-width);
 }
 
+.calendar-grid .mantine-focus-auto:focus-visible {
+  outline: none;
+}
+
 .calendar-range-grid {
   width: var(--calendar-body-width);
 }
@@ -3016,8 +3037,7 @@
   transition:
     background-color 0.15s ease,
     border-color 0.15s ease,
-    opacity 0.15s ease,
-    box-shadow 0.15s ease;
+    opacity 0.15s ease;
 }
 .checkbox[data-size="medium"] {
   inline-size: var(--theme-checkbox-frame-size-medium);
@@ -3033,10 +3053,6 @@
   cursor: not-allowed;
 }
 
-.checkbox:focus-visible {
-  box-shadow: 0 0 0 2px var(--theme-checkbox-focus-ring);
-}
-
 .checkbox-surface {
   inline-size: var(--theme-checkbox-indicator-size-medium);
   block-size: var(--theme-checkbox-indicator-size-medium);
@@ -3196,11 +3212,6 @@ figure.chip {
   margin: 0;
 }
 
-.chip:focus-visible {
-  outline: 2px solid var(--color-primary-default);
-  outline-offset: 2px;
-}
-
 .chip:where([data-style="filter"][data-fill="solid"]) {
   --chip-bg: var(--color-surface-standard);
   --chip-label-color: var(--color-label-neutral);
@@ -3770,6 +3781,310 @@ figure.chip {
   padding: 0;
 }
 
+.fab {
+  --fab-hover-shadow: none;
+  --fab-pressed-shadow: none;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--fab-height);
+  height: var(--fab-height);
+  padding: var(--fab-padding-block) var(--fab-padding-inline);
+  border: 0;
+  border-radius: var(--fab-radius);
+  background-color: var(--fab-background);
+  color: var(--fab-foreground);
+  box-shadow: none;
+  cursor: pointer;
+}
+.fab:where([data-fill="solid"][data-priority="primary"]) {
+  --fab-background: var(--button-default-primary-solid-bg);
+  --fab-foreground: var(--button-default-primary-solid-foreground);
+  --fab-hover-background: var(--button-default-primary-solid-hover-bg);
+  --fab-pressed-background: var(--button-default-primary-solid-active-bg);
+}
+.fab:where([data-fill="outlined"][data-priority="primary"]) {
+  --fab-background: var(--fab-outlined-background);
+  --fab-foreground: var(--button-default-primary-outline-foreground);
+  --fab-hover-background: var(--button-default-primary-outline-hover-bg);
+  border: 1px solid var(--button-default-primary-outline-border);
+}
+.fab:where([data-fill="solid"][data-priority="secondary"]) {
+  --fab-background: var(--button-default-secondary-solid-bg);
+  --fab-foreground: var(--button-default-secondary-solid-foreground);
+  --fab-hover-background: var(--button-default-secondary-solid-hover-bg);
+  --fab-pressed-background: var(--button-default-secondary-solid-active-bg);
+}
+.fab:where([data-fill="outlined"][data-priority="secondary"]) {
+  --fab-background: var(--fab-outlined-background);
+  --fab-foreground: var(--button-default-secondary-outline-foreground);
+  --fab-hover-background: var(--button-default-secondary-outline-hover-bg);
+  border: 1px solid var(--button-default-secondary-outline-border);
+}
+.fab:where([data-fill="solid"][data-priority="tertiary"]) {
+  --fab-background: var(--button-default-tertiary-solid-bg);
+  --fab-foreground: var(--button-default-tertiary-solid-foreground);
+  --fab-hover-background: var(--button-default-tertiary-solid-hover-bg);
+  --fab-pressed-background: var(--button-default-tertiary-solid-active-bg);
+}
+.fab:where([data-fill="outlined"][data-priority="tertiary"]) {
+  --fab-background: var(--fab-outlined-background);
+  --fab-foreground: var(--button-default-tertiary-outline-foreground);
+  --fab-hover-background: var(--button-default-tertiary-outline-hover-bg);
+  border: 1px solid var(--button-default-tertiary-outline-border);
+}
+.fab:where([data-fill="solid"][data-priority="green"]) {
+  --fab-background: var(--button-default-green-solid-bg);
+  --fab-foreground: var(--button-default-green-solid-foreground);
+  --fab-hover-background: var(--button-default-green-solid-hover-bg);
+  --fab-pressed-background: var(--button-default-green-solid-active-bg);
+}
+.fab:where([data-fill="outlined"][data-priority="green"]) {
+  --fab-background: var(--fab-outlined-background);
+  --fab-foreground: var(--button-default-green-outline-foreground);
+  --fab-hover-background: var(--button-default-green-outline-hover-bg);
+  --fab-pressed-background: var(--button-default-green-outline-active-bg);
+  border: 1px solid var(--button-default-green-outline-border);
+}
+.fab:where([data-fill="solid"][data-priority="yellow"]) {
+  --fab-background: var(--button-default-yellow-solid-bg);
+  --fab-foreground: var(--button-default-yellow-solid-foreground);
+  --fab-hover-background: var(--button-default-yellow-solid-hover-bg);
+  --fab-pressed-background: var(--button-default-yellow-solid-active-bg);
+}
+.fab:where([data-fill="outlined"][data-priority="yellow"]) {
+  --fab-background: var(--fab-outlined-background);
+  --fab-foreground: var(--button-default-yellow-outline-foreground);
+  --fab-hover-background: var(--button-default-yellow-outline-hover-bg);
+  --fab-pressed-background: var(--button-default-yellow-outline-active-bg);
+  border: 1px solid var(--button-default-yellow-outline-border);
+}
+.fab:where([data-fill="solid"][data-priority="orange"]) {
+  --fab-background: var(--button-default-orange-solid-bg);
+  --fab-foreground: var(--button-default-orange-solid-foreground);
+  --fab-hover-background: var(--button-default-orange-solid-hover-bg);
+  --fab-pressed-background: var(--button-default-orange-solid-active-bg);
+}
+.fab:where([data-fill="outlined"][data-priority="orange"]) {
+  --fab-background: var(--fab-outlined-background);
+  --fab-foreground: var(--button-default-orange-outline-foreground);
+  --fab-hover-background: var(--button-default-orange-outline-hover-bg);
+  --fab-pressed-background: var(--button-default-orange-outline-active-bg);
+  border: 1px solid var(--button-default-orange-outline-border);
+}
+.fab:where([data-fill="solid"][data-priority="teal"]) {
+  --fab-background: var(--button-default-teal-solid-bg);
+  --fab-foreground: var(--button-default-teal-solid-foreground);
+  --fab-hover-background: var(--button-default-teal-solid-hover-bg);
+  --fab-pressed-background: var(--button-default-teal-solid-active-bg);
+}
+.fab:where([data-fill="outlined"][data-priority="teal"]) {
+  --fab-background: var(--fab-outlined-background);
+  --fab-foreground: var(--button-default-teal-outline-foreground);
+  --fab-hover-background: var(--button-default-teal-outline-hover-bg);
+  --fab-pressed-background: var(--button-default-teal-outline-active-bg);
+  border: 1px solid var(--button-default-teal-outline-border);
+}
+.fab:where([data-fill="solid"][data-priority="pink"]) {
+  --fab-background: var(--button-default-pink-solid-bg);
+  --fab-foreground: var(--button-default-pink-solid-foreground);
+  --fab-hover-background: var(--button-default-pink-solid-hover-bg);
+  --fab-pressed-background: var(--button-default-pink-solid-active-bg);
+}
+.fab:where([data-fill="outlined"][data-priority="pink"]) {
+  --fab-background: var(--fab-outlined-background);
+  --fab-foreground: var(--button-default-pink-outline-foreground);
+  --fab-hover-background: var(--button-default-pink-outline-hover-bg);
+  --fab-pressed-background: var(--button-default-pink-outline-active-bg);
+  border: 1px solid var(--button-default-pink-outline-border);
+}
+.fab:where([data-fill="solid"][data-priority="red"]) {
+  --fab-background: var(--button-default-red-solid-bg);
+  --fab-foreground: var(--button-default-red-solid-foreground);
+  --fab-hover-background: var(--button-default-red-solid-hover-bg);
+  --fab-pressed-background: var(--button-default-red-solid-active-bg);
+}
+.fab:where([data-fill="outlined"][data-priority="red"]) {
+  --fab-background: var(--fab-outlined-background);
+  --fab-foreground: var(--button-default-red-outline-foreground);
+  --fab-hover-background: var(--button-default-red-outline-hover-bg);
+  --fab-pressed-background: var(--button-default-red-outline-active-bg);
+  border: 1px solid var(--button-default-red-outline-border);
+}
+.fab:where([data-fill="solid"][data-priority="darkGray"]) {
+  --fab-background: var(--button-default-dark-gray-solid-bg);
+  --fab-foreground: var(--button-default-dark-gray-solid-foreground);
+  --fab-hover-background: var(--button-default-dark-gray-solid-hover-bg);
+  --fab-pressed-background: var(--button-default-dark-gray-solid-active-bg);
+}
+.fab:where([data-fill="outlined"][data-priority="darkGray"]) {
+  --fab-background: var(--fab-outlined-background);
+  --fab-foreground: var(--button-default-dark-gray-outline-foreground);
+  --fab-hover-background: var(--button-default-dark-gray-outline-hover-bg);
+  --fab-pressed-background: var(--button-default-dark-gray-outline-active-bg);
+  border: 1px solid var(--button-default-dark-gray-outline-border);
+}
+.fab:where([data-fill="solid"][data-priority="lightGray"]) {
+  --fab-background: var(--button-default-light-gray-solid-bg);
+  --fab-foreground: var(--button-default-light-gray-solid-foreground);
+  --fab-hover-background: var(--button-default-light-gray-solid-hover-bg);
+  --fab-pressed-background: var(--button-default-light-gray-solid-active-bg);
+}
+.fab:where([data-fill="outlined"][data-priority="lightGray"]) {
+  --fab-background: var(--fab-outlined-background);
+  --fab-foreground: var(--button-default-light-gray-outline-foreground);
+  --fab-hover-background: var(--button-default-light-gray-outline-hover-bg);
+  --fab-pressed-background: var(--button-default-light-gray-outline-active-bg);
+  border: 1px solid var(--button-default-light-gray-outline-border);
+}
+.fab:where([data-fill="outlined"][data-priority="primary"]) {
+  --fab-hover-background: var(--button-default-primary-overlay-outlined-bg);
+  --fab-pressed-background: var(--fab-hover-background);
+  --fab-hover-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
+  --fab-pressed-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
+}
+.fab:where([data-fill="outlined"][data-priority="secondary"]) {
+  --fab-hover-background: var(--button-default-secondary-overlay-outlined-bg);
+  --fab-pressed-background: var(--fab-hover-background);
+  --fab-hover-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
+  --fab-pressed-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
+}
+.fab:where([data-fill="outlined"][data-priority="tertiary"]) {
+  --fab-hover-background: var(--button-default-tertiary-overlay-outlined-bg);
+  --fab-pressed-background: var(--fab-hover-background);
+  --fab-hover-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
+  --fab-pressed-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
+}
+.fab:where([data-fill="solid"][data-priority="tertiary"]) {
+  --fab-hover-background: var(--button-default-tertiary-overlay-solid-bg);
+  --fab-pressed-background: var(--fab-hover-background);
+  --fab-hover-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
+  --fab-pressed-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.48);
+}
+.fab:where(:enabled:hover) {
+  background-color: var(--fab-hover-background);
+  box-shadow: var(--fab-hover-shadow);
+}
+.fab:where(:enabled:active) {
+  background-color: var(--fab-pressed-background);
+  box-shadow: var(--fab-pressed-shadow);
+}
+.fab:where(:disabled) {
+  background-color: var(--fab-disabled-background);
+  border-color: var(--fab-disabled-background);
+  --fab-foreground: var(--fab-disabled-foreground);
+  cursor: not-allowed;
+}
+.fab:where([data-size="small"]) {
+  --fab-height: var(--fab-height-small);
+  --fab-content-size: var(--fab-content-size-small);
+  --fab-font-size: var(--fab-font-size-small);
+}
+.fab:where([data-size="medium"]) {
+  --fab-height: var(--fab-height-medium);
+  --fab-content-size: var(--fab-content-size-medium);
+  --fab-font-size: var(--fab-font-size-medium);
+}
+.fab:where([data-size="large"]) {
+  --fab-height: var(--fab-height-large);
+  --fab-content-size: var(--fab-content-size-large);
+  --fab-font-size: var(--fab-font-size-large);
+}
+.fab:where([data-extended="true"]) {
+  width: fit-content;
+  min-width: var(--fab-height);
+  max-width: none;
+  gap: var(--fab-gap);
+  padding-inline: var(--fab-extended-padding-inline);
+}
+.fab :where(.fab-content) {
+  display: flex;
+  flex: 0 0 var(--fab-content-size);
+  align-items: center;
+  justify-content: center;
+  width: var(--fab-content-size);
+  height: var(--fab-content-size);
+  color: var(--fab-foreground);
+}
+.fab :where(.fab-label) {
+  color: var(--fab-foreground);
+  font-family: var(--fab-font-family);
+  font-size: var(--fab-font-size);
+  font-weight: var(--fab-font-weight);
+  line-height: var(--fab-line-height);
+  letter-spacing: var(--fab-letter-spacing);
+  white-space: nowrap;
+}
+
+.fab-root,
+.fab-menu-list {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.fab-menu-list[data-open="false"] {
+  visibility: hidden;
+}
+
+.fab-root {
+  direction: ltr;
+}
+.fab-root[data-open="false"] {
+  pointer-events: none;
+}
+.fab-root[data-open="false"] .fab-trigger {
+  pointer-events: auto;
+}
+.fab-root[data-direction="up"],
+.fab-root[data-direction="up"] .fab-menu-list {
+  flex-direction: column-reverse;
+}
+.fab-root[data-direction="down"],
+.fab-root[data-direction="down"] .fab-menu-list {
+  flex-direction: column;
+}
+.fab-root[data-direction="left"],
+.fab-root[data-direction="left"] .fab-menu-list {
+  flex-direction: row-reverse;
+}
+.fab-root[data-direction="right"],
+.fab-root[data-direction="right"] .fab-menu-list {
+  flex-direction: row;
+}
+.fab-root[data-open="true"] .fab-trigger .fab-content {
+  transform: rotate(45deg);
+}
+
+.fab-trigger .fab-content {
+  transition: transform 150ms ease;
+}
+
+.fab-root[data-open="true"] .fab-menu-item {
+  animation: fab-menu-enter 150ms ease-out;
+}
+
+@keyframes fab-menu-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.75);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fab-trigger .fab-content {
+    transition: none;
+  }
+  .fab-root[data-open="true"] .fab-menu-item {
+    animation: none;
+  }
+}
+
 .form-field-container {
   display: block;
   width: var(--form-field-width);
@@ -5003,12 +5318,6 @@ figure.chip {
   pointer-events: none;
 }
 
-.bottom-navigation-trigger:focus-visible {
-  outline: none;
-  border-radius: var(--theme-radius-large-1, 12px);
-  box-shadow: 0 0 0 2px var(--color-primary-focus, rgba(0, 97, 255, 0.2));
-}
-
 .navigation-item-icon {
   display: inline-flex;
   align-items: center;
@@ -5247,9 +5556,7 @@ figure.chip {
   border-radius: 0;
   padding: 0;
   cursor: pointer;
-  transition:
-    box-shadow 0.15s ease,
-    transform 0.15s ease;
+  transition: transform 0.15s ease;
 }
 .radio[data-size="large"] {
   inline-size: var(--theme-radio-frame-size-large);
@@ -5260,10 +5567,6 @@ figure.chip {
   opacity: 0.6;
 }
 
-.radio:focus-visible {
-  box-shadow: 0 0 0 2px var(--theme-radio-focus-ring);
-}
-
 .radio-indicator {
   inline-size: var(--theme-radio-indicator-size-medium);
   block-size: var(--theme-radio-indicator-size-medium);
@@ -5544,11 +5847,6 @@ figure.chip {
   opacity: var(--segmented-disabled-opacity);
 }
 
-.segmented-control-button:where(:focus-visible) {
-  outline: 2px solid var(--color-focus-ring, var(--color-primary-default));
-  outline-offset: 2px;
-}
-
 .segmented-control-label {
   display: flex;
   align-items: center;
@@ -6028,10 +6326,6 @@ figure.chip {
   border-radius: 9999px;
   transition: color 150ms ease;
 }
-.select-tag-remove:focus-visible {
-  outline: 0.2rem solid var(--select-multiple-chip-remove-focus-outline-color);
-  outline-offset: 0.1rem;
-}
 .select-tag-remove:hover {
   color: var(--select-multiple-chip-remove-hover-color);
 }
@@ -6104,7 +6398,6 @@ figure.chip {
   cursor: pointer;
   transition:
     background-color 0.2s ease,
-    box-shadow 0.2s ease,
     opacity 0.2s ease;
 }
 
@@ -6119,10 +6412,6 @@ figure.chip {
   background-color: var(--switch-track-background-checked);
 }
 
-.switch:where(:focus-visible) {
-  box-shadow: 0 0 0 2px var(--switch-focus-ring);
-}
-
 .switch:where(:disabled) {
   cursor: not-allowed;
   opacity: var(--switch-disabled-opacity);
@@ -6251,11 +6540,6 @@ figure.chip {
   cursor: not-allowed;
 }
 
-.switch-text-button:where(:focus-visible) {
-  outline: 2px solid var(--switch-focus-ring);
-  outline-offset: 2px;
-}
-
 .switch-text-label {
   display: flex;
   align-items: center;
@@ -6335,11 +6619,6 @@ figure.chip {
   transition: background-color 0.2s ease;
 }
 
-.tab-trigger:where(:focus-visible) {
-  outline: 2px solid var(--color-primary-default);
-  outline-offset: 2px;
-}
-
 .tab-trigger:where([data-disabled="true"]) {
   cursor: not-allowed;
   opacity: var(--tab-disabled-opacity);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.12.14",
+  "version": "0.13.1",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -87,9 +87,9 @@
     "react-hook-form": "^7.86.0",
     "sass": "^1.102.0",
     "typescript": "6.0.3",
-    "@uniai-fe/eslint-config": "0.4.4",
-    "@uniai-fe/next-devkit": "0.4.1",
     "@uniai-fe/tsconfig": "0.2.0",
+    "@uniai-fe/next-devkit": "0.4.1",
+    "@uniai-fe/eslint-config": "0.4.4",
     "@uniai-fe/uds-foundation": "0.6.0",
     "@uniai-fe/util-functions": "0.4.3"
   },

package/src/components/calendar/styles/mantine-calendar.scss

@@ -59,6 +59,11 @@
   width: var(--calendar-body-width);
 }
 
+.calendar-grid .mantine-focus-auto:focus-visible {
+  // Mantine의 공통 초점 테두리만 숨기고 날짜 상태 표시는 유지한다.
+  outline: none;
+}
+
 .calendar-range-grid {
   width: var(--calendar-body-width);
 }

package/src/components/checkbox/styles/index.scss

@@ -22,7 +22,6 @@
   --theme-checkbox-icon-default: transparent;
   --theme-checkbox-icon-selected: var(--color-common-100);
   --theme-checkbox-icon-disabled-selected: var(--color-common-100);
-  --theme-checkbox-focus-ring: rgba(2, 84, 255, 0.32);
 }
 
 .checkbox {
@@ -38,8 +37,7 @@
   transition:
     background-color 0.15s ease,
     border-color 0.15s ease,
-    opacity 0.15s ease,
-    box-shadow 0.15s ease;
+    opacity 0.15s ease;
 
   &[data-size="medium"] {
     inline-size: var(--theme-checkbox-frame-size-medium);
@@ -58,10 +56,6 @@
   }
 }
 
-.checkbox:focus-visible {
-  box-shadow: 0 0 0 2px var(--theme-checkbox-focus-ring);
-}
-
 .checkbox-surface {
   inline-size: var(--theme-checkbox-indicator-size-medium);
   block-size: var(--theme-checkbox-indicator-size-medium);

package/src/components/chip/styles/chip.scss

@@ -42,11 +42,6 @@ figure.chip {
   margin: 0;
 }
 
-.chip:focus-visible {
-  outline: 2px solid var(--color-primary-default);
-  outline-offset: 2px;
-}
-
 .chip:where([data-style="filter"][data-fill="solid"]) {
   --chip-bg: var(--color-surface-standard);
   --chip-label-color: var(--color-label-neutral);

package/src/components/fab/index.scss

@@ -0,0 +1 @@
+@use "./styles";

package/src/components/fab/index.tsx

@@ -0,0 +1,34 @@
+import "./index.scss";
+
+import { Tooltip } from "../tooltip";
+
+import {
+  FabDefault,
+  FabExtended,
+  FabLabel,
+  FabRoot,
+  FabTrigger,
+  FabMenuList,
+  FabMenuItem,
+  FabTemplate,
+} from "./markup";
+
+export const Fab = {
+  Button: FabDefault,
+  Trigger: FabTrigger,
+  Expand: FabExtended,
+  Menu: {
+    List: FabMenuList,
+    Item: FabMenuItem,
+    Label: Tooltip.Text,
+  },
+  Root: FabRoot,
+  Template: FabTemplate,
+  Default: FabDefault,
+  Extended: FabExtended,
+  Label: FabLabel,
+};
+
+export * from "./types/options";
+export type * from "./types";
+export { FabContext, ARROW_KEYS, useFabContext } from "./markup";