@olundot/ui 0.10.2 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,150 @@
 # @olundot/ui
 
+## 0.13.0
+
+### Minor Changes
+
+- 0f4ad55: Card: promote `interactive` from a variant to an orthogonal boolean prop (breaking)
+
+  `interactive` is removed from the `variant` enum and becomes a standalone `interactive?: boolean` prop. A clickable card can now combine with any resting surface — `default`, `elevated`, or `notice` — whereas the old `variant="interactive"` was mutually exclusive with those.
+
+  - **Before:** `<Card variant="interactive">`
+  - **After:** `<Card interactive>` (and now also `<Card variant="notice" interactive>`, `<Card variant="elevated" interactive>`).
+
+  Interactive hover lifts the shadow one step above the variant's resting depth: default/notice rest at `--shadow-2` → hover `--shadow-4`; elevated rests at `--shadow-4` → hover `--shadow-8`. The pointer cursor, hover border (`--border-strong`) / background (`--action-hover`), and neutral focus-ring (`--focus-ring`) are unchanged. `selected` / `disabled` relationships are unchanged.
+
+  `notice`'s accent border is retained; it is now documented under accent rationing role ③ (read-only emphasis context only), not treated as an exception.
+
+- 8a0bfe3: Align Card with the v0.14 flattened surface model (breaking-visual)
+
+  After v0.14 flattening (card fill == page background), Card was the one component still leaning on removed lift affordances. Its rest/selected/focus handoff is now brought back in line. Public API (`variant`, `surface`, `selected`, `disabled`, slots) is unchanged — only rendered classes/visuals change.
+
+  - **Rest edge/radius:** base border `--border-subtle` → `--border` (0.10 alpha) and corner `--radius-md` (8px) → `--radius-lg` (12px, the "cards" radius). The `default` variant now carries a resting `--shadow-2` so a flat card still reads as a bounded surface.
+  - **Elevated:** `--shadow-2` → `--shadow-4`, keeping its meaning as the more-raised card now that `default` owns `--shadow-2`.
+  - **Selected:** fill `--bg-canvas` (a lift that vanished under flattening) → `--action-selected`, the same neutral surface-lift used by DataTable/TreeView selected rows; `--border-strong` retained.
+  - **Focus:** `interactive` focus drops the accent border + lime glow (`--border-accent` + `--glow-sm`) for the house neutral focus-ring convention (`--focus-ring` border + `0 0 0 1px --focus-ring` ring), matching Input. The dark `hover` accent glow is also removed (hover = `--border-strong` + `--shadow-2`), honoring accent rationing (accent is never used for action/focus surfaces).
+
+  `notice` (accent border) is unchanged.
+
+- dca4628: Remove DataTable's built-in selection bar; consolidate bulk actions on BulkActionBar (breaking)
+
+  DataTable now exposes a single bulk-action surface. The internal top selection strip is deleted and all bulk actions move to the floating bottom `BulkActionBar` — matching the "one batch-action surface, no persistent chrome" baseline.
+
+  **Breaking — DataTable:**
+
+  - Removed the `selectionBar` (`'top' | 'none'`) and `bulkActions` props, the `DataTableBulkAction` type/export, and the built-in `data-slot="data-table-selection-bar"` strip (which always reserved a 48px row and showed a "선택된 행 없음" placeholder).
+  - **Kept** the selection mechanism: `selectable`, `selectedIds`, `onSelectionChange`, header select-all (indeterminate) + per-row checkboxes. The selected-count announcement is preserved as a visually-hidden `aria-live` region (`data-slot="data-table-selection-status"`), so there is no accessibility regression.
+  - Migration: drop `bulkActions`/`selectionBar` and render a sibling `<BulkActionBar count={selectedIds.size} onClear={…} actions={…} />`. See `docs/MIGRATION-0.13.0-to-0.14.0.md` §5.
+
+  **BulkActionBar hardening:**
+
+  - Bottom offset now respects the iOS safe area: `bottom: calc(var(--space-4) + env(safe-area-inset-bottom))`.
+  - Subtle entrance motion when it appears (`olun-bulk-action-bar-in`: translateY 8px + fade, `var(--dur-fast) var(--ease-out)`), opted out under `prefers-reduced-motion` via `motion-reduce:animate-none` + the global reduced-motion guard.
+  - Do not use on the same screen as `ActionFooter` — both occupy the bottom and overlap at `z-index` 1100 (documented, not enforced in code).
+
+- 676476c: Align internal token references to v0.14 canonical names
+
+  `@olundot/ui` now references the canonical v0.14 token names directly instead of the pre-v0.14 aliases that survive in `@olundot/tokens`' compat layer. Public component APIs are unchanged; only the token names emitted in class strings/styles change.
+
+  - **Accent:** `--accent-fg` → `--accent`, `--accent-solid` → `--accent-pop`, `--accent-on-solid` → `--accent-on-fill` (button, chip, icon-button); two-tier-badge's legacy `text-accent-fg` utility class → `text-[var(--accent)]`.
+  - **Elevation:** `shadow-[var(--elevation-{1,2,4})]` → `shadow-[var(--shadow-{1,2,4})]` (card, confirm-dialog, form-modal, info-modal, mode-toggle, popover, sheet-drawer, toast, theme-fab); legacy `shadow-elevation-{2,8}` utility classes → `shadow-{2,8}` (dropdown-menu, dialog).
+  - **Motion:** `--duration-fast` → `--dur-fast` and `theme.ts`'s `var(--duration-${d})` template → an explicit `--dur-*`/literal mapping (mode-toggle, tabs, tree-view, `lib/theme.ts`). Sheet's public `easing` prop keeps its `standard/decel/accel/sharp/bounce` surface; its internal map now uses canonical `--ease-standard/--ease-in/--ease-out`, with `decel`/`sharp` still referencing the compat-frozen `--easing-decel`/`--easing-sharp` beziers (no canonical equivalent).
+  - **Semantic:** the `tokens.css` `@theme` block maps `--color-semantic-*` off `--semantic-*-fg` (was `--semantic-*`).
+
+  The canonical motion tokens carry the intended v0.14 re-tuning (fast/base/slow 150/200/300 → 120/180/260ms), so transition timings shift accordingly.
+
+- 52714f9: Rewrite TwoTierBadge to the handoff horizontal-pill model (breaking)
+
+  TwoTierBadge moves from a vertical two-box stack with dual independent intents to the design-canonical **horizontal two-segment pill**: a `primary` lead segment and an optional `secondary` qualifier split by a hairline vertical divider, clipped to a full-round pill. It now shares the Badge/StatusBadge/Chip grammar.
+
+  **Breaking API change:**
+
+  - **Removed:** `primaryIntent`, `secondaryIntent`, `align`, `primaryClassName`, `secondaryClassName`, the `brand`/`muted` intents, and the `twoTierBadgeVariants` / `twoTierBadgeLineVariants` / `TwoTierBadgeIntent` exports.
+  - **Added:** a single `tone` axis (`neutral` · `info` · `success` · `warning` · `error`) that colors the **lead segment only** — the qualifier always stays neutral, and the brand lime is never spent here (accent rationing). Plus `emphasis` (`subtle`/`strong`, mirrors StatusBadge), `size` (`xs`/`sm`/`md`), and `showDot`. New type exports: `TwoTierBadgeTone`, `TwoTierBadgeEmphasis`, `TwoTierBadgeSize`.
+  - The root element is now a `<span>` (was `<div>`); `data-slot` names are unchanged (`two-tier-badge` / `-primary` / `-secondary`).
+
+  ### Before
+
+  ```tsx
+  <TwoTierBadge
+    primary="예약"
+    secondary="검토 필요"
+    primaryIntent="brand"
+    secondaryIntent="warning"
+  />
+  ```
+
+  ### After
+
+  ```tsx
+  <TwoTierBadge primary="예약" tone="info" secondary="검토 필요" />
+  <TwoTierBadge primary="반려" tone="error" emphasis="strong" secondary="중복 문항" />
+  ```
+
+  Map old intents to tone: `brand`→(drop, use `info`/neutral — lime is never used), `muted`→`neutral`, `danger`→`error`, `success`/`warning`/`info` unchanged. The old `secondaryIntent` has no equivalent — the qualifier is always neutral by design.
+
+### Patch Changes
+
+- Updated dependencies [966c3f6]
+  - @olundot/tokens@0.14.0
+
+## 0.12.0
+
+### Minor Changes
+
+- **v0.13.0 "dot-only reconcile"** — design↔repo drift reconciliation: dot-only status redesign, repo bug/a11y fixes, and four gap components.
+
+  **Tokens (additive)**
+
+  - Added `--semantic-{error|warning|info|success|neutral}-fg` (dot/text/border color, aliasing the existing role tokens) and `--semantic-neutral-bg`, across all theme blocks. These back the dot-only status model.
+
+  **UI — dot-only status redesign (BREAKING)**
+
+  Status surfaces now carry color on a leading dot + text only; the surface stays neutral in the default (`subtle`) emphasis. A second `emphasis` axis (`subtle | strong`) controls weight. Lucide status icons are removed — the dot is the signal.
+
+  - **Badge** — collapsed to a single `tone` axis (`error | warning | info | success | neutral | brand`). `tone="danger"` → `tone="error"`; the old `variant` axis (`semantic | vibrant | pill | …`) is removed (use `StatusBadge emphasis="strong"` for a tinted fill). `size`/`disabled` removed.
+  - **StatusBadge** — adds `emphasis` (default `subtle`) and `size`. `status="active"` now maps to **info (blue)** instead of success (green) so a live cue never reads as "done". Neutral/terminal states get a hollow-ring dot.
+  - **Alert / InlineAlert** — adds `emphasis` (default `error`→strong, else subtle); the `icon` override prop is removed (7px dot replaces it).
+  - **Toast** — adds a `description` line; `icon` removed; default duration 3000→4000ms (error 7000). Capitalized `Toast` namespace alongside the `toast` alias.
+
+  **UI — repo bug / a11y fixes**
+
+  - IconButton no longer emits `aria-pressed` on non-toggle buttons. CopyButton clears its pending revert timer on rapid re-click. ConfirmDialog uses `role="alertdialog"`. FileUploadZone error text gets `role="alert"`. OtpField gains a Korean cell `aria-label`, a neutral caret, and a required marker. Input/Textarea/Select labels use `--text-secondary`; required `*` markers are bold. Button gets a 2px focus ring, an active-press scale, and a loading width-freeze. Chip's removable `×` is a separately focusable button. DataTable reserves the sort-icon slot to prevent header shift. BulkActionBar is low-chrome (borderless text/icon actions + hairline dividers) with built-in hover/focus. Pagination renders a constant 7-slot page list. Sheet defaults `showCloseButton` to false and adds `SheetBody`.
+
+  **UI — new gap components**
+
+  - **Breadcrumb** — collapsing nav (`maxItems`, root + ellipsis + tail), `aria-current="page"`.
+  - **PageSizeSelect** — standalone items-per-page picker; Pagination gains `showPageSize` (default true) to opt out and avoid duplication.
+  - **DataLayout** — pure list/table page scaffold (header / toolbar / body / footer / floating bulk-bar slots).
+  - **PageHeader** — adds `headingLevel` (1–6, default 1) to demote the title tag in nested contexts without changing its look.
+
+  Migration guide: `docs/MIGRATION-0.12.0-to-0.13.0.md`.
+
+### Patch Changes
+
+- Updated dependencies
+  - @olundot/tokens@0.13.0
+
+## 0.11.0
+
+### Minor Changes
+
+- 7b589b3: **v0.12.0 "Linear refresh"** — breaking visual + token redesign (light-first, near-monochrome, accent-rationed à la Linear).
+
+  - **Spacing rebased to the Tailwind v4 4px scale** (`--space-1`=4px … `--space-32`=128px). Legacy `--space-0-5` / `--space-1-5` removed. All `@olundot/ui` components were migrated by a value-preserving key shift, so rendered spacing is unchanged — only the token keys move (`--space-1`→`--space-2`, `--space-0-5`→`--space-1`, etc.).
+  - **Accent rationing (Linear-faithful)** — the signature lime/olive is reserved for the brand mark, text links, read-only signal dots (unread/new/live), and opt-in accent variants (badge/chip/icon-button accent tone); everything else is monochrome or neutral. `--primary` (near-black on light / near-white on dark) is the **monochrome fill** for the **primary CTA button**, checkbox/radio/switch checked states, and progress/loading. The **focus ring** (`--focus-ring`) is neutral — set to `--text-secondary` (light #3C4149 / dark #B4B8C0), not accent. **Selection/active** states (active tab, selected chip, current nav item, selected row) use a **neutral surface-lift** (`--action-selected` + `--border-strong` + foreground text), not an accent tint. Brand olive surfaces live on `bg-brand` only.
+  - **Radius squared up**: default `--radius-md` 12px→8px; `sm` 8→6, `lg` 16→12, `xl` 24→16, new `--radius-2xl` 24px.
+  - **Type scale reduced**: display 72→56, h1 56→40, h2 42→30, h3 32→24, h4 24→20, h5 20→17, body 16→15px. `--fs-h6` and `--fs-body-lg/md/sm` are kept as deprecated aliases mapping to the nearest new size.
+  - **Pretendard Variable is now the primary font** (self-hosted woff2 vendored into `dist/fonts/`), replacing the Inter-first stack. Inter is reserved for Latin subtitle/eyebrow flourishes and tabular numerals.
+  - Surfaces/text/borders re-tuned for a lighter near-monochrome light-first canvas; new `--gradient-app` / `--gradient-hairline` / `--scrim` atmosphere tokens; `--primary*`, `--accent-pop` added.
+
+  Migration guide: `docs/MIGRATION-0.11.0-to-0.12.0.md`.
+
+### Patch Changes
+
+- Updated dependencies [7b589b3]
+  - @olundot/tokens@0.12.0
+
 ## 0.10.2
 
 ### Patch Changes

package/README.md

@@ -36,4 +36,4 @@ This beta package is extracted from the OLUN CBT/LMS shared UI implementation. A
 
 ## Accent Contract
 
-Filled accent buttons must pair `--accent-solid` for the background/border with `--accent-on-solid` for text and icons. `--accent-on-fill` remains a backward-compatible alias only and is not allowed in new `Button` source.
+Primary and default buttons are monochrome: pair `--primary` for the background and border with `--primary-fg` for text and icons. Brand and opt-in accent fills use the canonical `--accent-pop` + `--accent-on-fill` pair. The pre-v0.14 names `--accent-solid` and `--accent-on-solid` remain deprecated compatibility aliases and must not be used in new component source.