@plastic-js/tsumiki 0.1.33 → 0.1.35

package/docs/v0.1.33-migration.md

@@ -1,163 +0,0 @@
-# v0.1.33 — Migration & Release Notes
-
-> What changed in `@plastic-js/tsumiki` 0.1.33 and how to update your code.
-
-This release upgrades the design-token system and adds drag/dismiss, affix, and
-icon behaviors. **No code changes are required** for the vast majority of
-consumers — most items below are new tokens or purely visual. Breaking behavior
-is limited to the new `BottomSheet` grabber and the re-tuned radius/transition
-tokens; each is called out with an explicit "Action" section.
-
----
-
-## 1. Design token system upgrade
-
-The token layer (`src/styles/`) gained new variables and two tokens changed meaning.
-
-### New tokens
-
-- **Transitions** — explicit durations, easings, and composites, with
-  enter/exit asymmetry for overlays:
-  - `--tsu-duration-fast: 150ms`, `--tsu-duration-normal: 250ms`
-  - `--tsu-duration-overlay-enter: 350ms`, `--tsu-duration-overlay-exit: 200ms`
-  - `--tsu-ease-standard: cubic-bezier(0.2, 0, 0, 1)`
-  - `--tsu-ease-out: cubic-bezier(0.32, 0.72, 0, 1)` (enter — decelerate)
-  - `--tsu-ease-in: cubic-bezier(0.4, 0, 1, 1)` (exit — accelerate)
-  - `--tsu-transition-fast`, `--tsu-transition-normal`,
-    `--tsu-transition-overlay-enter`, `--tsu-transition-overlay-exit`
-- **Typography** — exactly three font weights plus semantic type roles:
-  - `--tsu-font-weight-regular: 400`, `--tsu-font-weight-medium: 500`,
-    `--tsu-font-weight-semibold: 600`
-  - Roles (size/weight/line-height triples):
-    `--tsu-text-title-*`, `--tsu-text-body-*`, `--tsu-text-label-*`,
-    `--tsu-text-caption-*`
-- **Colors** — pressed-state and muted-surface feedback tokens:
-  - `--tsu-color-pressed`, `--tsu-color-pressed-accent`
-  - `--tsu-color-muted`, `--tsu-color-muted-subtle`
-- **Shadows** — `--tsu-shadow-sm/md/lg` are now two-layer (tight ambient +
-  soft key) for more natural depth.
-
-### Behavior changes
-
-- `--tsu-transition-overlay` is now a **deprecated alias** for
-  `--tsu-transition-overlay-enter`. Overlays (e.g. `BottomSheet`) now enter in
-  **350ms on a decelerating curve** and exit in **200ms on an accelerating one**
-  (previously a symmetric `0.3s ease`).
-- `--tsu-radius-l1/l2/l3-*` values were aligned to the concentric formula
-  `L2 = L1 + 4px`, `L3 = L2 + 8px`:
-
-  | size | L1 | L2 | L3 |
-  |------|----|----|----|
-  | xs   | 2  | 6  | 14 |
-  | sm   | 2  | 6  | 14 |
-  | md   | 4  | 8  | 16 |
-  | lg   | 6  | 10 | 18 |
-  | xl   | 8  | 12 | 20 |
-  | xxl  | 16 | 20 | 28 |
-
-  (Previously L3 was `16px` and L2 `8px` across all sizes, so `lg`–`xxl`
-  radii are now slightly larger and `xs`/`sm` slightly smaller.)
-
-- Internal: components' `fontWeight: 500 / 600` literals were migrated to
-  `--tsu-font-weight-medium / semibold` — **appearance-neutral**.
-
-### Action
-
-No code changes required. All `--tsu-*` names your CSS already references are
-stable. If you want the pre-0.1.33 look, override the affected tokens in your
-own stylesheet **after** the library import:
-
-```css
-:root {
-  --tsu-transition-overlay: 0.3s ease;          /* old symmetric transition */
-  --tsu-radius-l3-lg: 16px;                     /* old radius */
-  --tsu-radius-l2-lg: 8px;
-}
-```
-
-New tokens (weights, type roles, pressed/muted colors, two-layer shadows) are
-ready for you to consume.
-
----
-
-## 2. BottomSheet — drag-to-dismiss
-
-`BottomSheet` now ships a grabber handle and can be dragged to close:
-
-- New `draggable` prop (default `true`). When enabled, a grabber bar renders at
-  the top of the sheet.
-- Drag **down** follows your finger; drag **up** meets rubber-band resistance.
-- Release past **30%** of the sheet height, or a **fast downward flick**, closes
-  the sheet.
-- Backdrop-click dismissal is unchanged and still respects `dismissible`.
-
-### Action
-
-- If you don't want the grabber or drag behavior, pass `draggable={false}`.
-- If you render your own content flush with the top edge, the grabber now
-  occupies that top strip while `draggable` is on.
-
-```jsx
-<BottomSheet open={open} onOpenChange={v => open(v.open)} draggable={false}>
-  {children}
-</BottomSheet>
-```
-
----
-
-## 3. Input — `hasPrefix` / `hasSuffix` boundary padding
-
-When a `prefix`, `suffix`, or the built-in password toggle is present, the
-matching side padding on the input wrapper is now reduced to **half** the normal
-horizontal padding, so edge affixes sit closer to the boundary instead of
-floating at full text padding.
-
-### Action
-
-Purely visual — no code changes required. If you previously compensated for the
-full padding (e.g. absolute-positioned affixes), you may need to adjust.
-
----
-
-## 4. BottomNavigation — `activeIcon` + stroke-width token
-
-`BottomNavigationItem` gains an optional `activeIcon` prop:
-
-- When the item is active **and** `activeIcon` is provided, it replaces `icon`
-  (reactively, via a memo). Backward compatible — omitting `activeIcon` keeps
-  the old behavior.
-- The icon's SVG stroke width is now controlled by the `--tsu-nav-icon-stroke-width`
-  token (default `2`). Set it on the nav to thin or thicken all icon strokes.
-
-### Action
-
-Optional. Typical use is a filled icon for the active tab:
-
-```jsx
-<BottomNavigationItem
-  icon={<MyOutlineIcon />}
-  activeIcon={<MyFilledIcon />}
-  label="Home"
-  active={active() === 0}
-  onClick={() => active(0)}
-/>
-```
-
-Tune stroke thickness with one variable:
-
-```jsx
-<BottomNavigation style={{ '--tsu-nav-icon-stroke-width': 1.5 }}>
-  ...
-</BottomNavigation>
-```
-
----
-
-## Summary
-
-| Area | Change | Code needed? |
-|------|--------|--------------|
-| Tokens | New transition/typography/color/shadow tokens; `--tsu-transition-overlay` alias; radius re-tuned | No (optional overrides) |
-| `BottomSheet` | Grabber + drag-to-dismiss via `draggable` (default on) | Opt out with `draggable={false}` |
-| `Input` | Reduced boundary padding when prefix/suffix/password present | No |
-| `BottomNavigation` | New `activeIcon` prop; `--tsu-nav-icon-stroke-width` token | Optional |