:root {
  --ld-color-background-level1: #ffffff;        /* light */
  --ld-color-background-level2: #f1f5f9;
  --ld-color-text: #0f172a;
  --ld-color-text-secondary: #64748b;
  --ld-color-border: #e2e8f0;
  --ld-color-divider: #e5e7eb;
  --ld-radius-md: 8px;
  --ld-radius-lg: 16px;
  --ld-shadow-lg: 0 8px 24px rgba(0,0,0,.18);
  --ld-color-primary: #3b82f6;
}

:root[data-theme="dark"] {
  --ld-color-background-level1: #0e0e12;
  --ld-color-background-level2: #12131a;
  --ld-color-text: #e5e7eb;
  --ld-color-text-secondary: #9ca3af;
  --ld-color-border: #1f2937;
  --ld-color-divider: rgba(255,255,255,.12);
}

## [0.14.1] - 2025-08-18

### Fixed in 0.14.1

- **Switch**: Auto-generate meaningful, document-unique `id`/`name` for the native input (e.g., `libdev-r0-1`), removing autofill and audit warnings about missing/duplicate identifiers.
- **Switch**: Prevent non-HTML props from leaking to the native `<input>` (notably `as="input"`), via `shouldForwardProp` on `HiddenInput`.
- **Switch**: Eliminate layout/baseline shifts caused by a physical track border; `filled` now uses `--ld-switch-track-border-w: 0px` (no layout impact), others keep explicit widths.
- **Switch**: Stable inline alignment in mixed text contexts (`vertical-align: middle; line-height: 1` on root).

### Notes in 0.14.12

- No breaking changes. If you previously relied on absent `id`/`name`, the input now always exposes a deterministic value derived from `useId()`.

## [0.14.0] - 2025-08-18

### Added in 0.14.0

- New `Switch` component:
  - Motion-driven thumb for smooth on/off transitions.
  - In-track animated border with modes: `gradient`, `glow`, `pulse` (stays within the eye; no overflow).
  - Visual variants: `filled`, `outlined`, `ghost`.
  - Sizes: `sm`, `md`, `lg`.
  - Colors: `primary`, `success`, `danger`, `warning`, `info`, plus custom tokens via the style system.
  - Decorators: `startDecorator`, `endDecorator` (string, node, or function of state).
  - Controlled and uncontrolled usage with `checked` / `defaultChecked` and `onChange`.
  - Slots and `slotProps` for `root`, `track`, `thumb`, `action`, `input`, `startDecorator`, `endDecorator`.
  - System style overrides via `sl` and layout props interop.
  - Accessibility: `role="switch"`, `aria-checked`, keyboard interaction with Space.

## [0.13.3] - 2025-08-17

### Fixed in 0.13.3

- **Spacing system**: Removed implicit ×8 scaling for numeric values.
  - Before: `gap={2}` → `16px`
  - Now: `gap={2}` → `2px`
- Updated `defaultTheme.spacing` to return raw numbers and normalized `scaleIfSpacing`
  to always append `px` units.
- This makes all spacing props (`gap`, `margin`, `padding`, etc.) behave as expected
  with direct pixel values.

## [0.13.2] — 2025-08-17

### Fixed in 0.13.2

- **RadioGroup / Radio**
  - Correct default variant to **`outlined`** when no `variant` is provided in `RadioGroup` or `Radio`.
  - Ensure **`plain`** variant renders **no outer ring/border** while still showing the **inner dot** when checked.
  - Keep custom icon centering and motion animation behavior intact.

## [0.13.1] — 2025-08-17

### Fixed in 0.13.1

- **Radio**
  - Fixed alignment of custom icons (`checkedIcon`, `uncheckedIcon`) → now properly centered inside the action area.
  - Removed invalid `as` prop from `motion.span`, which was causing a **TypeScript error**.
  - Preserved original styling for the **solid variant** (no changes compared to 0.13.0).

## [0.13.0] — 2025-08-17

### Added in 0.13.0

- **Radio** and **RadioGroup** components
  - Controlled & uncontrolled modes (`checked`/`defaultChecked`, `value`/`defaultValue`)
  - Full **Slots API** (`root`, `action`, `radio`, `icon`, `input`, `label`) with `slots` and `slotProps`
  - **Motion** animations (Framer Motion) for dot appearance/disappearance with spring transitions
  - **Default dot** (uses `currentColor`) when no `checkedIcon` is provided
  - **Custom icons** support for `checkedIcon` / `uncheckedIcon`
  - **Overlay** mode for composition with list items (action area fills the positioned parent)
  - **Theming** via design tokens and `sl` system prop (no hardcoded colors)
  - **Sizes:** `sm | md | lg`
  - **Variants:** `outlined | plain | soft | solid`
  - **Colors:** `primary | secondary | success | danger | warning | info` (+ custom string)
  - **ARIA & A11y:** native `<input type="radio" />`, `role="radiogroup"`, focus-visible ring, keyboard support (Arrow keys / Space / Enter)

## [0.12.0] - 2025-08-16

### Added in 0.12.0

- Introduced new **`Checkbox` component** to the library.
- Supports controlled and uncontrolled usage.
- Variants: `plain`, `soft`, `outlined`, `solid`.
- Colors: `primary`, `success`, `warning`, `danger`, `secondary`, `info`, `neutral`.
- Sizes: `sm`, `md`, `lg`.
- Features:
  - `checkedIcon`, `indeterminateIcon`, `disableIcon`.
  - `indeterminate` visual state with ARIA support.
  - `overlay` mode (action fills container).
  - `slots` and `slotProps` for advanced customization.
  - `disabled` and `readOnly` states with proper styling.
- Includes accessibility improvements (`aria-checked`, focus ring, keyboard navigation).

## [0.11.1] — Popover SSR hardening (2025-08-14)

### Fixed in 0.11.1

- Prevent access to `document/window` during SSR in `Popover`.
- Introduced `useIsoLayoutEffect` (isomorphic: `useLayoutEffect` on client, `useEffect` on server) to silence SSR warnings.
- `PopoverCard` now returns `null` on the server and only portals to `document.body` in the browser.
- `PopoverArrow` migrated to `useIsoLayoutEffect`.
- Docusaurus SSG no longer fails on `/docs/Components/utils/popover`.

### Docs in 0.11.1

- Note: For interactive demos, consider wrapping examples in `<BrowserOnly>` to avoid SSR pitfalls.

## [0.11.0] — Card & RatioBox (2025-08-13)

### Added in 0.11.0

- **Card package** (inspired by MUI Joy) with named subcomponents:
  - `Card` (root), `CardContent`, `CardActions`, `CardCover`, `CardOverflow`.
- **Props & behavior**
  - `color`: accepts `"neutral"` plus global colors (`"primary" | "secondary" | "success" | "danger" | "warning" | "info"`) and arbitrary strings (`"#7c3aed"`, `"tomato"`, `var(...)`).
  - `variant`: `"outlined" | "plain" | "soft" | "solid"` (in addition to global `Variant`).
  - `size`: `"sm" | "md" | "lg"`.
  - `orientation`: `"vertical" | "horizontal"`; `CardActions` also supports `"horizontal-reverse"`.
  - `invertedColors`: inverts implicit text color to match `variant`/`color`.
  - `buttonFlex`: flex value distributed to `CardActions` direct children.
  - `component`: polymorphic root (e.g., `section`).
  - `slots` / `slotProps` with `slotProps.root.sl` support.
  - `sl`: style slot powered by the LibDev style engine (tokens, responsive, shorthands).
  - **CommonLayoutProps** on all components (margin/padding/size/position/overflow/flex/grid interop).
- **RatioBox helper** (AspectRatio-like):
  - **Props:** `ratio` (`number | "16/9" | "4/3" | "1" | "3/4" | "3:4"`), `objectFit` (default `"cover"`), `sl`, `component`, `slots`/`slotProps`.
  - **Slots:** `root`, `content`; intrinsic ratio via padding technique.

### Changed in 0.11.0

- **Color token typing** in `Card.utils.ts`:
  - Generate strict `LDColorToken` via `makeToken(base, part)` before calling `cssVarForColor`.
  - Use `var(--ld-color-white)` for solid-on-text instead of a non-token string.
- **`sl` merging** in `Card.tsx`:
  - New `normalizeSl(...)` flattens style arrays to a valid `SlProp` and prevents nested arrays / TS union issues.
- **Styles integration** in `Card.styles.ts`:
  - Emotion styles now compose variant/color/size/orientation recipes + layout mixin + `sl` (with prop filtering to avoid DOM leaks).
- **API recommendation:**
  - Prefer named components (`Card`, `CardContent`, …). Dot API (`Card.Content`) remains optional and can be disabled if desired.

### Fixed in 011.0

- **TypeScript errors**
  - “`string` is not assignable to `LDColorToken`” → resolved by strict token helpers.
  - Missing `size` on subcomponents → added to `CardContentProps`, `CardActionsProps`, `CardOverflowProps`.
  - `SlProp` union issues (`StyleArg[]`not assignable`) → fixed via`normalizeSl`.

## [0.10.0] – 2025-08-13

### Added in 0.10.0

- **Popover** component family:
  - `PopoverForm` – container that manages open state (controlled/uncontrolled), `placement`, `offset`, `disableOutsideClose`, and focus return on close.
  - `PopoverTrigger` – supports `asChild` to avoid nested buttons; keyboard activation fallback when not using a `<button>`.
  - `PopoverAnchor` – optional anchor. When omitted, the trigger acts as the reference.
  - `PopoverCard` – rendered via portal to `document.body`; positioned with `position: fixed`; double `requestAnimationFrame` ensures stable first measurement; proper `transform-origin`.
  - `PopoverClose` – convenience close control.
  - `PopoverArrow` – crisp two-layer border triangle (shadow + fill), no trapezoid artifacts; follows the anchor and clamps inside the card.
- **12 placements**: `top|right|bottom|left` plus `-start|-end` variants.
- **Viewport clamping** with inner padding to keep the card inside the screen.
- **Responsiveness**: arrow “drift” is limited; vertical `*-end` cases bias towards center; guards prevent the arrow from touching bottom edges while scrolling.
- **Accessibility**: `role="dialog"`, `aria-modal`, `aria-expanded` on trigger; closes on `Esc` and outside click; focus returns to the trigger.
- **Styling**: `sl` style prop supported on wrappers (`TriggerWrapper`, `AnchorWrapper`, `CardRoot`, `ArrowRoot`).
- **TypeScript types**: `PopoverPlacement`, `PopoverProps`, `PopoverAnchorProps`, `PopoverTriggerProps`, `PopoverCardProps`, `PopoverCloseProps`, `PopoverArrowProps`, `PopoverContextValue`.

### Fixed in 0.10.0

- Initial position jumping on first open due to premature measurement.
- Arrow visual artifacts (trapezoid look) — replaced with a clean border-triangle approach.
- Undesired arrow “swimming” for vertical `*-end` placements — now clamped and biased naturally.
- Avoid nested `<button>` structures by providing a trigger fallback wrapper.

### Docs in 0.10.0

- New **`Popover.mdx`** with full API docs and a **grid demo** (compass) showcasing all 12 placements.
- Example snippets: **BasicPopover**, **PlacementTester**.

## [0.9.0] - 2025-08-11

### Added in 0.9.0

- **Typography** component (with **Text** alias).
  - Polymorphic root via `as`/`component`.
  - Levels: `h1` | `h2` | `h3` | `h4` | `title-lg` | `title-md` | `title-sm` | `body-lg` | `body-md` | `body-sm` | `body-xs` | `inherit`.
  - Variants: `plain` | `soft` | `solid` | `outlined`.
  - Themed colors via `LDColorToken` (e.g. `text.secondary`, `primary.hover`) or any CSS color / `var(...)`.
  - Decorators: `startDecorator`, `endDecorator`.
  - Wrapping: `wrap="wrap|nowrap|balance|pretty"`, `noWrap`, `truncate`.
  - Typography controls: `align`, `weight`, `gutterBottom`, `levelMapping`.
  - Slots API: `slots` and `slotProps` for `root`, `startDecorator`, `endDecorator`.
  - **sl** style layer (merged before `style`) and full **CommonLayoutProps** support (m/p/size/position/overflow/flex/grid).

## [0.8.0] – 2025-08-11

### Added in 0.8.0

- **New `BoxMotion` component** (layout-friendly motion wrapper).
  - **Entrance animations** (triggered on scroll into view):
    `fadeIn`, `fadeInUp`, `fadeInDown`, `fadeInLeft`, `fadeInRight`,
    `zoomIn`, `zoomOut`,
    `bounceIn`, `bounceInUp`, `bounceInDown`, `bounceInLeft`, `bounceInRight`,
    `slideInUp`, `slideInDown`, `slideInLeft`, `slideInRight`,
    `rotateIn`,
    `lightSpeedIn`,
    `flipInX`, `flipInY`,
    `rollIn`, `jackInTheBox`, `wobble`, `hinge`, `pulse`, `swing`, `tada`,
    `rubberBand`, `bounce`, `flash`, `shake`, `jello`.
  - **Scrolling effects** (live while scrolling): vertical/horizontal parallax, opacity, blur, rotate, scale.
  - **Mouse interactions**: `mouseTrack` (subtle XY translation) and `tilt3d` (rotateX/rotateY with perspective).
  - **API**:
    - `effect`, `speed` (`slow` | `normal` | `fast`), `delay`, `staggerChildren`
    - `viewportOnce`, `viewportAmount` (or pass a custom `viewport`)
    - `disabled`, `variantsOverride`
    - `scroll` `{ vertical, horizontal, opacity, blur, rotate, scale, mouseTrack, tilt3d }`
    - `sl` (Style Layer) + full **CommonLayoutProps** via the layout engine.
  - **Behavior**:
    - Uses `whileInView` by default (`once: true`) for entrance.
    - If a user provides `animate`, the component respects it and **does not** attach `whileInView/viewport` (no conflicts).
    - MotionValues for scroll/mouse/tilt are attached **only when requested**, so entrance variants aren’t overridden unintentionally.
  - **DOM hygiene**: style-only and motion-only props are filtered from the DOM; styles are applied through `$styles` and `applyCommonLayoutStyles`.

## [0.7.2] - 2025-08-10

### Fixed in 0.7.2

- **Container**: Now properly exported from the main package entry (`src/index.ts`), allowing it to be imported via `import { Container } from "@libdev-ui/base"`.
- Added explicit export of `Container` and its types (`ContainerProps`, `ContainerSize`, `ContainerAlign`) from the correct path to ensure availability in the built `dist` output.

## [0.7.1] - 2025-08-10

### Fixed in 0.7.1

- **Container**: Removed local `Responsive` type definition in `Container.types.ts` to avoid conflicts with the global `Responsive` type from `common.types.ts`.
- Updated `Container` to import and use the global `Responsive` type, ensuring full compatibility with `system/responsive.ts` and preventing duplicate export errors in `components/index.ts`.

## [0.7.0] - 2025-08-10

### Added in 0.7.0

- **Container**: A new layout component that constrains the maximum width of page content and ensures consistent horizontal alignment.  
  - Supports responsive `size` (1–4) using the new CSS variables `--ld-container-1`..`--ld-container-4`.
  - Allows horizontal `align` (`left`, `center`, `right`) and integrates with `layoutMixin` for full spacing, sizing, positioning, and overflow control.
  - Supports polymorphic rendering via `as` and `asChild` props.
  - Designed to be part of the Layout component family (`Box`, `Flex`, `Grid`, `Section`).

## [0.6.1] - 2025-08-10

### Added in 0.6.1

- **Margin shorthands:** Introduced `m`, `mx`, `my`, `mt`, `mr`, `mb`, `ml` to `CommonLayoutProps`.
- **layout.mixin:** Responsive CSS mapping for the new margin shorthands (uses `theme.spacing` when available).

### Fixed in 0.6.1

- **DOM leakage:** Added margin shorthands to `STYLE_ONLY_PROPS` filters in **Box**, **Flex**, and **Grid** so they do not appear as DOM attributes.
- **Grid styles:** Ensured margin shorthands are respected via `applyCommonLayoutStyles` and filtered from the DOM.

### Documentation

- **Box docs:** Updated notes to include margin shorthands (m/mx/my/mt/mr/mb/ml) and responsive behavior.

## [0.6.0] - 2025-08-10

### Added in 0.6.0

- **Global responsive system**
  - `src/components/common.types.ts`: added `BreakpointKey`, `Responsive<T>`, `CSSLength`, `Space`, `ResponsiveSpace`.
  - `src/system/responsive.ts`: media query helpers (`getMediaQuery`), value mappers (`toSpace`, `toCssLength`), and `buildResponsiveStyle`.
  - `src/system/layout.types.ts`: `CommonLayoutProps` shared across layout components.
  - `src/system/layout.mixin.ts`: `layoutMixin` / `applyCommonLayoutStyles` to translate common layout props into CSS.
- **New components**
  - `Flex`: responsive flex container with `direction`, `align`, `justify`, `wrap`, `gap`, `gapX`, `gapY` + `CommonLayoutProps`.
  - `Grid`: responsive CSS Grid container with `columns`, `rows`, `areas`, `autoFlow`, alignment props, and gaps + `CommonLayoutProps`.

### Changed in 0.6.0

- **Box**: adopted the shared responsive system via `applyCommonLayoutStyles`. Now supports `CommonLayoutProps` responsively.
- **Polymorphic rendering**:
  - `Box` and `Flex` use `component?: ElementType` for polymorphic roots. Internal `as` is set only when `component` is provided and differs from `"div"`.
  - `shouldForwardProp` guards were added to prevent style-only props from leaking into the DOM.

### Fixed in 0.6.0

- Prevented leaking of style-only props to DOM, e.g. `direction="[object Object]"` or `as="div"`.
- Consistent gap handling for numeric values using the theme spacing scale when available.

### Migration notes

- Prefer `component` over `as` for polymorphic usage:

  ```tsx
  // Before (not recommended)
  // <Flex as="span" ... />

  // After
  <Flex component="span" ... />