@epam/ai-dial-ui-kit 0.15.0-dev.7 → 0.15.0

package/dist/migration-guides/0.15.0/legacy-theme-variable-fallbacks-removal.md

@@ -0,0 +1,69 @@
+# Migrating legacy theme variables — v0.14.x → v0.15.0
+
+## Why this changed
+
+0.14.0 renamed several theme variables by role but kept the old names in each token's fallback chain (`var(--new, var(--old, #default))`), so a theme could set either name. Two names for one value meant a theme had to know which one won, and the chain never shrank. The kit now reads only the current name.
+
+## What changed
+
+| Old variable (no longer read)             | Current variable                            |
+| ----------------------------------------- | ------------------------------------------- |
+| `--bg-control-neutral-hover`              | `--bg-control-neutral-hover-muted`          |
+| `--stroke-focus-black`                    | `--stroke-focus`                            |
+| `--bg-control-accent-gradient-from`       | `--bg-gradient-1`, `--bg-gradient-1-active` |
+| `--bg-control-accent-gradient-to`         | `--bg-gradient-2`, `--bg-gradient-2-hover`  |
+| `--bg-control-accent-gradient-hover-from` | `--bg-gradient-1-hover`                     |
+| `--bg-control-accent-gradient-active-to`  | `--bg-gradient-2-active`                    |
+
+Tailwind class names (`bg-control-neutral-hover-muted`, `border-focus`, `bg-control-accent-gradient`, …) are unchanged. A theme that sets only an old variable now gets the kit's default colour instead of its own.
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+grep -rEn -- "--(bg-control-neutral-hover|stroke-focus-black|bg-control-accent-gradient-(from|to|hover-from|active-to))\b" src/
+```
+
+### 2. Rename the variables in your theme
+
+**Before:**
+
+```css
+:root {
+  --bg-control-neutral-hover: #e0e6f0;
+  --stroke-focus-black: #161b2d;
+  --bg-control-accent-gradient-from: #1d4ed8;
+  --bg-control-accent-gradient-to: #885df2;
+  --bg-control-accent-gradient-hover-from: #6785fb;
+  --bg-control-accent-gradient-active-to: #7c3aed;
+}
+```
+
+**After:**
+
+```css
+:root {
+  --bg-control-neutral-hover-muted: #e0e6f0;
+  --stroke-focus: #161b2d;
+  --bg-gradient-1: #1d4ed8;
+  --bg-gradient-1-active: #1d4ed8;
+  --bg-gradient-2: #885df2;
+  --bg-gradient-2-hover: #885df2;
+  --bg-gradient-1-hover: #6785fb;
+  --bg-gradient-2-active: #7c3aed;
+}
+```
+
+`--bg-control-accent-gradient-from` and `-to` each fed two stops, so set both of their replacements to keep the same gradient in every state.
+
+### 3. Verify
+
+```bash
+npm run typecheck
+npm run test
+```
+
+## Notes
+
+The font hooks (`--theme-font` → `--font-inter`, `--theme-font-mono` → `--font-fira-code`) are not legacy names and still chain.

package/dist/migration-guides/0.15.0/slider-redesign.md

@@ -0,0 +1,110 @@
+# Migrating the redesigned `Slider` — v0.14.x → v0.15.0
+
+## Why this changed
+
+The 2.0 design system redrew the slider. Its thumb is now a solid accent disc
+rather than a white disc with a border, its unfilled track is an accent tint
+rather than grey, and hover, focus and drag grow a soft halo around the thumb.
+The props API is unchanged, so typecheck stays green — but every `Slider` in an
+app renders differently, and any host CSS written against the old thumb has to
+be checked.
+
+## What changed
+
+| Part                         | Before (0.14.x)                                         | After (0.15.0)                                            |
+| ---------------------------- | ------------------------------------------------------- | --------------------------------------------------------- |
+| Thumb size                   | 16px                                                    | 12px                                                      |
+| Thumb fill / border          | `bg-control-neutral`, 1px `border-default`, soft shadow | `bg-control-accent`, no border, no shadow                 |
+| Thumb hover / focus / active | `border-accent` plus `shadow-md` / `shadow-xs`          | 4px halo in `--stroke-accent-alpha`                       |
+| Thumb keyboard focus         | `outline-focus`, offset 2px                             | `outline-focus`, offset 4px (outside the halo)            |
+| Thumb disabled               | `bg-control-disable-secondary`, grey border             | `bg-control-disable-secondary`, no border                 |
+| Unfilled track               | `bg-control-neutral-active`                             | `bg-control-accent-alpha-hover`                           |
+| Fill end at `min` / `max`    | 8px in from the track ends                              | 6px in (half the new thumb)                               |
+| New, opt-in                  | —                                                       | `showTooltip`, `showTicks`, `leftContent`, `rightContent` |
+
+The pointer target is unchanged: the full-width, 24px-tall row. The
+`dial-kit-slider` class keeps its name and stays on the range input.
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+# Every 2.0 Slider in the app
+grep -rn "<Slider" src/
+# Host CSS that restyles the thumb or the track
+grep -rn "dial-kit-slider\|slider-thumb\|range-thumb" src/
+```
+
+### 2. Review host overrides of the thumb
+
+A rule that recoloured the old white thumb, or relied on its border, now sits
+on a borderless accent disc. Re-check it against the new look, or remove it if
+it only existed to approximate this design.
+
+**Before:**
+
+```css
+.my-panel .dial-kit-slider::-webkit-slider-thumb {
+  border-color: var(--stroke-accent);
+}
+```
+
+**After:** usually nothing — the thumb is accent-coloured by default. To change
+its colour, set the theme variable instead of overriding the pseudo-element:
+
+```css
+.my-panel {
+  --bg-control-accent: #0f766e;
+}
+```
+
+### 3. Re-check `trackClassName`
+
+The unfilled track default moved from `bg-control-neutral-active` to
+`bg-control-accent-alpha-hover`. A caller that passed `trackClassName` keeps
+its own colour; a caller that matched the old grey on purpose can pass
+`trackClassName="bg-control-neutral-active"` to keep it.
+
+### 4. Opt into the new parts of the design
+
+```tsx
+<Slider
+  id="volume"
+  labelProps={{ label: 'Volume' }}
+  value={volume}
+  min={0}
+  max={100}
+  step={1}
+  showTooltip
+  formatValue={(v) => `${v}%`}
+  leftContent={<IconMicrophone aria-hidden="true" />}
+  rightContent={
+    <NumberInput
+      aria-label="Volume value"
+      value={volume}
+      onChange={(v) => setVolume(Number(v))}
+    />
+  }
+  onChange={setVolume}
+/>
+```
+
+`showTooltip` reserves 28px above the track for the bubble, so turning it on
+makes the field taller. `rightContent` is not synced by the kit: pass the field
+the same `value` and setter as the slider.
+
+### 5. Verify
+
+```bash
+npm run typecheck
+npm run test
+```
+
+Then check the sliders visually — none of the change is visible to typecheck.
+
+## Notes
+
+The thumb is a pseudo-element styled in unlayered CSS, so a Tailwind class
+passed through `className` still cannot reach it; theme variables are the
+supported way to recolour it.

package/dist/migration-guides/README.md

@@ -28,6 +28,8 @@ migration-guides/
 | 0.14.0 | [button-tooltip-2-0](0.14.0/button-tooltip-2-0.md) | `Button` and `IconButton` wrap the 2.0 `Tooltip` with `asChild`: `placement` takes `TooltipPlacement`, and the trigger `<span>` is gone |
 | 0.14.0 | [tag-single-size](0.14.0/tag-single-size.md) | `Tag` drops `size` for one 32px pill; the selectable chip gets a semibold selected label |
 | 0.14.0 | [shadow-token-per-step-rename](0.14.0/shadow-token-per-step-rename.md) | Shadow scale rebuilt per step: `sm` moves to the side panels, controls keep their shadow under `dial-kit-control-shadow` |
+| 0.15.0 | [legacy-theme-variable-fallbacks-removal](0.15.0/legacy-theme-variable-fallbacks-removal.md) | Old theme variable names (`--bg-control-neutral-hover`, `--stroke-focus-black`, `--bg-control-accent-gradient-*`) dropped from the fallback chains |
+| 0.15.0 | [slider-redesign](0.15.0/slider-redesign.md) | `Slider` redrawn: 12px accent thumb with a hover/focus halo, accent-tint track; adds `showTooltip`, `showTicks`, `leftContent`, `rightContent` |
 
 ---