devaction_ui

# Changelog

Every release lists new components, improvements, fixes and breaking changes. While the version is 0.x a minor release may break compatibility, and every break is listed with the step to follow.

## 0.3.3

Found by the audit of the 0.3.x components against the artboards (issues 74 to 80).

### Improved

- `Shell` `variant="centered"` follows the LayoutTemas artboard: it keeps the panel frame and, with a `sidebar`, draws it as a bar on top like `topbar`.
- `Tabs` `:line` selects with weight 500 and the `counts: :chip` count is the 20px mono chip of the artboard; `Pagination` cells have the 1px border of the artboard.
- `Breadcrumb` with `max` closes the collapsed list on Esc (focus goes back to its summary) and on a press outside; it takes an optional `id`.
- `Shell` below 1024px keeps focus inside the open drawer (Tab and Shift+Tab wrap) and gives it back to the opener when it closes.
- Light theme: `--muted-chrome` keeps the text of the shell and the sidebar at 4.5:1 on the frame, the Composer placeholder and file size are readable, and the attachment preview is allowed by the site CSP (`blob:`).

### Fixed

- The build of a host app no longer needs the `@tiptap/*` packages unless an editor is rendered: `editor_tiptap.js` loads them with `import()` and a `.catch`, so esbuild only warns, and a mounted editor without them names the missing package.
- `Shell`: below 1024px the closed drawer is out of the tab order (`visibility: hidden`) and the open one makes the page behind `inert`; in the rail the name of an item shows on keyboard focus too, and beside the item instead of over its icon.
- `Tabs`: a horizontal list scrolls on its own instead of widening the page on a narrow screen, its tabs do not wrap or shrink, and an unselected tab turns ink on hover. Tabs nested in a panel no longer answer the keys and clicks of the tabs around them.
- `Pagination`: the previous and next controls stay on the first and last page as dimmed, `aria-disabled` spans, so the row does not change width; `size={:sm}` draws the 30px cells of a table footer.
- `Composer`: a file button drawn as a `label` opens the chooser with Enter and Space, and the field says `aria-invalid` over its limit and points at the counter with `aria-describedby`.
- `DataTable`: the scrolling box is a named, focusable region (a keyboard can scroll a wide table), and the buttons of the bulk bar keep their light text on the dark bar whatever their own variant.
- `RowMenu`: the menu is the compact one of the artboard (190px, 5px of padding, 34px items; `Dropdown compact`), and a `danger` item hovers in the risk tone.

## 0.3.2

### Improved

- `DataTable` variations that add up: `variant={:minimal}` (no border, a transparent head in sentence case, for tables inside cards), `striped`, an `expanded` slot (a chevron with `aria-expanded` opens a detail row; the browser toggles it and a redraw keeps it), `group_by` with a `group` slot, a `tfoot` slot for totals, `stack` with `primary` columns (each row becomes a card under 640px, the cell captions come from the column label), an `action` slot for the `⋯` cell with no box, `sticky_actions`, and `align` and `mono` on a column. Shift+click on a row checkbox ticks the range. `action_label` and `expand_label` are required with their slots.
- `Pagination`: `total`, `per_page`, `noun` and `summary_label` (`__FROM__`, `__TO__`, `__TOTAL__`, `__NOUN__`) draw the range of the page before the links.
- The "App" template (Projects) is the new artboard: owner with avatar, hours with a bar, `updated` as relative time, a light head and the row menu in the `action` slot; the table fits the panel without a sideways scroll.
- The README states one rule for `@source` and the keyframes, explains `pdfjs-dist` and `worker_src`, lists the requirements and the fonts, and has a row for every component.

## 0.3.1

0.3.0 shipped a stylesheet with a block left open, which stops Tailwind in the host app: use 0.3.1.

### Fixed

- The stylesheet closes every block (a test now counts the braces).
- On the documentation site, an open drawer, modal or palette in an example card stays over the page rail.

### New

- The "App" template (Projects): a full app page with the shell, the page header with tabs, the toolbar and a table with pinned columns, progress cells and a row menu.

### Improved

- `Composer`: `suggest_event` with a `suggestions` slot for `/` commands and `@` mentions, `edit_last_event` for ↑ with an empty field, the mode picker as `Dropdown variant={:chip}`, file chips with `kind` and `detail`.
- `Shell`: `sidebar_search/1` and `sidebar_user/1`.
- `Tabs`: an `icon` slot, `counts={:chip}` and `size={:sm}`.
- `Breadcrumb`: `underline={false}`. `PageHeader`: `size={:md}`. `Avatar`: `initials` and the `:ink` tone.

## 0.3.0

### New components

- `DevactionUI.Shell`: the frame of an app with a sidebar that collapses to a rail (⌘B, the `dui_sidebar` cookie, a drawer on small screens), `sidebar_head/1`, `sidebar_nav/1`, `sidebar_group/1`, `sidebar_item/1`, `sidebar_foot/1`, the variants `classic`, `topbar`, `split`, `centered` and `docs`, and the `DevactionUI.Shell.SidebarCookie` plug with `DevactionUI.Shell.on_mount/4`.
- `DevactionUI.ScrollArea`: a thin scrollbar and a shadow only at the edges that still have content.
- `DevactionUI.Composer`: the message field of the AI chat, comments and notes (grows with the text, Enter sends, a stop button while it runs, pasted and dropped files), with `Composer.button/1` and `Composer.file/1`.
- `DevactionUI.RowMenu`: the "..." menu of a table row, fixed to the window so no `overflow` cuts it.

### Improved

- `DataTable`: `sticky={:start}` and `sticky={:end}` on a `:col` pin the first column and the actions.
- `Breadcrumb`: `home`, `home_label` and a `home_icon` slot; `underline={false}` for the quiet trail of a shell header.
- `PageHeader`: `toolbar` and `toolbar_end` slots; `size={:md}` for the title of a page inside an app shell.
- `Shell`: `sidebar_search/1` and `sidebar_user/1`.
- `Tabs`: an `icon` slot, `counts={:chip}`, `size={:sm}`, and a tab without content.
- `Avatar`: `initials` and the `:ink` tone.
- `Dropdown` takes `fixed`: the menu opens with `position: fixed` from the rectangle of its button.

## 0.2.6

### Improved

- The site shows the full version (v0.2.6) in the header chips and the component history, and the dedication in the footer is in English with a soft glow that passes between the letters. The package itself is unchanged since 0.2.3.

## 0.2.5

### Improved

- The install instructions (README, home, installation page and the changelog) use the Hex requirement `{:devaction_ui, "~> 0.2.0"}` instead of the GitHub repository. The package itself is unchanged since 0.2.3.

## 0.2.4

### Fixed

- The documentation's example cards no longer cut off a floating panel (combobox, dropdown, popover, date picker) that opens inside them.

### Improved

- The site's changelog lists every release of the series with what it fixed or broke, and the site footer carries the dedication.

## 0.2.3

### Breaking changes

- `toast_group`: rebuilt to the new design: toasts are pushed from the server with `put_toast`/`update_toast`/`dismiss_toast` instead of `:toast` slots; `label` and `dismiss_label` are required.

## 0.2.2

### Fixed

- `toast_group`: the pile is the toasts themselves, each a little behind and smaller than the one in front, and it opens and closes with a glide: the front toast stays where it is and the others slide to their place in the list. The group no longer forces `relative`, so `fixed bottom-4` anchors it.

## 0.2.1

### Fixed

- The documentation site serves its scripts, styles and icons under digested names, so a cache in front of it can no longer hand a page an older script, and its content security policy allows the Cloudflare analytics script.

## 0.2.0

### New

`banner`, `context_menu`, `cookie_consent`, `copy_field`, `date_range`, `description_list`, `diff_view`, `field`, `file_tree`, `filter_pill`, `hover_card`, `notification_center`, `otp_input`, `pdf_viewer`, `pricing`, `resizable`, `separator`, `sortable_list`, `time_field`.

### Improved

- `toast_group`: The notices pile up as soon as there are two, with layers peeking out above the newest; the pile opens on hover or focus.
- `data_table`: Takes a stream, with toolbar and footer slots, a density toggle, loading and error states and sort arrows through slots.
- `dropzone`: `queue/1`: a file queue with progress, errors, retry and cancel.
- `avatar`: `group/1`: overlapped avatars with status dots and a +N chip; `tone: :auto` picks a colour from the name.
- `editor`: `suggest/1`, a compact variant with the toolbar at the bottom, and TipTap loaded only when an editor mounts.
- `calendar`: The week view has an hours grid and the month and week take a legend.
- `date_picker`: A recurring due chip, and the range fields live in `date_range` and `date_input`.
- `timer`: `timer_mini/1` for the app bar and `time_log/1` for what was logged today.
- `kanban`: Cards move with touch and pen, and a move the server rejects is put back.
- `popover`: Left and right placements, edge clamping and a portal mode for scrolling containers.
- `modal`: Body scroll lock, an inert page behind and Esc for the top overlay only.
- `drawer`: A bottom sheet that closes by dragging, stacked with modals in a defined order.
- `tooltip`: Hoverable and dismissible with Esc, and it flips at the edges of the screen.
- `sidebar`: Search and user building blocks and collapsible groups.
- `code_block`: Copy button, line numbers, highlighted lines, diff lines and an Elixir lexer.
- `tone`: Indigo, emerald and chart tones, with strong text tokens.
- `spinner`: `dots/1`, a three-dot indicator.
- `tabs`: Vertical orientation, and the server can set the selected tab.
- `breadcrumb`: A collapsed middle for long paths and a separator as text or chevron.

### Breaking changes

- `confirm_dialog`: Now a thin wrapper over `Modal`: `eyebrow` is gone and the close button is optional.
- `danger_dialog`: `type_label` is a slot, so the name to type can be a `<code>` chip.
- `modal`: Modal and drawer need the `DevactionUI.Overlay` hook: load the package hooks.
- `command_palette`: The scopes are a tablist of their own and no longer use `Segmented`.
- `chart`: A line chart's second series is no longer dashed by default: pass `dashed: true`.
- `tag`: The default size is 11px with `3px 8px`; the old size is `:lg`.
- `callout`: The icon sits inline by default; `icon_layout: :box` is the old tile.
- `avatar`: The sizes follow the canvas: `:md` is 40px, `:sm` 32px and `:xs` 22px.
- `money_input`: The value no longer carries `R$`: the prefix is an add-on.
- `switch`: The thumb is a real element instead of `::after`.
- `dropdown`: The `check_icon` slot is gone: the chosen item shows a leading ring.
- `panel`: `Panel.empty/1` is removed (use `EmptyState`) and `inner_class` has no default.
- `required_texts`: New required text attrs: `nav_label` (AuthLayout), `toolbar_label` (Editor), `hint_label` (Kanban), `meter_label` (PasswordStrength), and the labels of DataTable, Kanban and Editor no longer have English defaults.

## 0.1.0

First public release: function components for Phoenix LiveView with light and dark tokens, keyboard navigation and state on the server.