@tartaguti/ui-components 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @tartaguti/ui-components
 
+## 0.3.0
+
+### Minor Changes
+
+- c710ef2: tt-auth: an unknown mode draws sign-in with one console warning instead of throwing and rendering nothing; kebab-case names (sign-in, sign-up, forgot-password, reset-password) work. New fields slot for extra sign-up fields, sent in tt-sign-up's detail.fields.
+- 8d20455: `tt-chart` is colourful by default: `--tt-chart-1` to `-5` are now the content hues plus amber (blue, amber, purple, teal, pink), 3:1 or better against the card in light and dark, instead of five greys. It also repaints whenever those tokens change on the chart or any element around it (a `style`, a class such as `.dark`, a `data-theme`), not only on `<html>`, resolves palettes written with `color-mix()`, and never gives a pie's last slice the colour of the first one it touches.
+- c710ef2: tt-company-card: status and status-variant show a tier badge after the name; new badge and meta slots.
+- c710ef2: tt-contact-list: whatsapp (a wa.me link), email and role optional, primary lists the main contact first with a badge.
+- 956641c: New `tt-dock` and `tt-dock-item`: a few big targets on one edge of the screen, a phone's tab bar (`variant="bar"`) or a floating pill (`variant="floating"`), on the `bottom`, `top`, `left` or `right` (`position`). It is a `<nav>` that marks the current item with `aria-current="page"` and moves it on a tap by itself, sends `tt-dock-select`, pads itself by the safe area of the edge it touches, and stays sticky in the flow so the last line of a page always scrolls clear of it. `labels-hidden` keeps the labels as names for a screen reader. More items than fit in a row scroll sideways on a `tt-scroller`.
+
+  `tt-scroller` now also measures and scrolls to items that another component passes into it through its own slot.
+
+- c710ef2: tt-file-upload: setStatus(file, status) shows per-file upload progress, done, and failed with a reason and a Retry button (tt-retry { file }).
+- 8d20455: `tt-key-values` has a `layout` attribute: `columns` (the default, as before) or `split`, which puts each value at the end of its label's row, like a receipt, and keeps the pair on one row on a phone. Its link underline on hover now applies only where the pointer can hover.
+- 769e0a0: `tt-layout` gets `contained` (the page scrolls, the navbar and sidebar stay pinned, and the phone drawer opens inside the layout instead of against the window, so it works in a preview or a builder design) and a public `mobileMenuOpen` property, and announces the closes it decides itself (Escape, backdrop, menu click) with `tt-menu-toggle`. The phone drawer, the navbar's menu button inside the layout and the sidebar's drawer rules now follow the layout's own width (under 768px, so a 768px tablet keeps the column) instead of the window's, and the drawer sits under the real navbar height instead of a fixed 60px.
+- c710ef2: Chart.js and Prism load the first time a tt-chart or tt-code-block is shown, not on import. The documentation components (tt-preview, tt-example, tt-code-block, tt-switcher, tt-component-doc, tt-knowledge-doc) moved out of the root import into "@tartaguti/ui-components/docs"; import that if you use them. The root import drops from about 208 KB to 134 KB gzipped.
+- c710ef2: tt-select and tt-combobox: multiple with a values array. tt-select keeps the list open and marks choices; tt-combobox shows chips and Backspace removes the last. tt-change sends { values }, and a form gets one entry per value.
+- 80e82b9: `tt-product` is reworked into one clean card with two choices that always look right: `orientation` (vertical tile or horizontal row) and the new `size` (`medium`, or `small` for two across on a phone, where the button becomes a round bag icon). New: `href` (the name becomes one link over the whole card), `clickable` (the card is one button that emits `tt-product-open`), `heading-level` (default 3), and the slots `media`, `meta` and `actions`, which add to the photo, rating and button rather than replace them. A sale reads as "Sale price X, was Y", the rating as "Rating 4.6", badges on the photo get the card behind them, and `disabled` (sold out) greys the photo and turns the button off but keeps the text readable and the link working. `tt-icon` gains a `heart`.
+
+  Moving from 0.2: `variant` and `layout` are removed (drop them; `layout="compact"` is now `size="small"`, and `layout="overlay"` has no replacement, since text on a photo failed contrast). `button-link` is removed: use `href`, which links the whole card in the same tab. An empty `button-label` now means no built-in button, and that button's own `tt-button-click` no longer escapes the card (listen for `tt-product-action`). The card no longer wraps tt-card, so style the surface through `::part(card)`; the `foot` part is now `actions`, plus new `link` and `meta` parts. The photo is decorative (`alt=""`), since the heading names the product.
+
+- 8d20455: `tt-progress` has a `budget` attribute for "higher is worse": the bar is green under 75%, amber from 75% and red at the maximum or over, for spending, storage and quotas.
+- 5758c56: New `tt-scroller`: children side by side in one row that scrolls sideways when they do not fit, with no scrollbar. The side that has more fades out, `controls` adds Scroll left and Scroll right arrows where a pointer can hover, Tab brings each child fully into view, and `snap` (start or center), `gap`, `item-width` and `label` cover chip rows and card shelves. `scrollToItem(item)` scrolls only the row, never the page.
+
+  `tt-switcher`'s tab row is now a `tt-scroller`: no scrollbar, a fade and an arrow say there is more, and a tab chosen in code no longer scrolls the page to the switcher. Its API is unchanged; the gap between tabs is now `--tt-space-2`.
+
+- 769e0a0: `tt-sidebar` has a `sticky` option: the sidebar is one screen tall (`100dvh`, or `--tt-viewport-height`), stays put while the page scrolls beside it and scrolls its own menu, so its footer sits on the bottom edge and the collapse arrow is always in reach. It is not pinned on phones. Its hover styles (rows, group headings, the account row, the arrow, the scrollbar) now apply only where the pointer can hover.
+- c710ef2: New strings registry: setStrings() replaces the text components write themselves (Verified, Close, Pagination, Clear selection, Chosen files, Actions, Unread, form messages and more) for the whole page, and each of those components takes a strings property for its own. tt-dropdown-menu's label now defaults to "" and shows the translated "Actions".
+
+### Patch Changes
+
+- c710ef2: tt-form: collect() sends a tt-file-upload's files as files (it sent the text "on"); a failed check shows each control's message inline in the form's words and focuses the first, instead of the browser's bubble on the first field only. New setErrors({ field: message }) for server errors, validate() and clearErrors(). Controls slotted into a tt-form are collected too. tt-file-upload gains checkValidity(), so a required one blocks tt-form.
+- c710ef2: tt-grid gap takes none, small, medium, large and spacing steps ("4" is --tt-space-4); a bare number used to give no gap. toast() mounts a tt-toast in <body> when the page has none, instead of only a console warning.
+- 9b39854: Touch screens no longer keep a hover colour after a tap. Every hover style in the library (buttons, toggles, table and inbox rows, menu items, fields, cards, links and the rest) now applies only where the pointer can hover, `@media (hover: hover)`, so a tapped button or row goes back to its resting look. With a mouse nothing changes; focus rings and pressed states are as before.
+- 83b427d: tt-sidebar: a collapsible sidebar is no longer cut off when it has less room than it asked for. The collapse arrow and the icon rail now work at every window width; they are switched off only in tt-layout's sidebar slot at 768px and below, where the sidebar is a drawer (before, every window up to 768px lost them, so a phone had no arrow while a wide phone on its side had one). An open collapsible sidebar no longer clips its rows and its arrow in a column narrower than its `width`, and the floating variant keeps its right edge: the content is held at full width only while the panel slides open. The sidebar also keeps its `width` in a flex row instead of being squeezed by the content beside it.
+- 8d20455: `tt-toast` spans a phone's width (up to 480px) with a gutter each side in every position. The centred positions used to squeeze toasts into half the screen. The close button's hover colour now applies only where the pointer can hover.
+
+## 0.2.0
+
+### Minor Changes
+
+- 4e3b89f: tt-data-table can be virtualized: `visible-rows` makes it a box that many rows tall holding only the rows in view, so 10,000 rows scroll as smoothly as 10. Screen readers still hear the true row position, columns no longer jump while scrolling, and `tt-range-change` reports which rows are in view. Cells use tighter sides on phones.
+
 ## 0.1.0
 
 First public release: 85 Lit web components, design tokens with dark

package/README.md

@@ -34,8 +34,20 @@ import "@tartaguti/ui-components";
 // Or per component, so the bundle only carries what you touched.
 import "@tartaguti/ui-components/tt-button";
 import "@tartaguti/ui-components/tt-data-table";
+
+// The documentation components (tt-code-block, tt-component-doc, ...)
+// are a separate entry point, for docs sites.
+import "@tartaguti/ui-components/docs";
 ```
 
+Chart.js and Prism, the two heavy dependencies, load the first time a
+`tt-chart` or `tt-code-block` is shown, so an app without them never
+downloads them.
+
+The text components write by themselves ("Close", "Pagination", form
+messages) can be translated once with `setStrings({ close: "Mbyll" })`,
+or per element with its `strings` property.
+
 **Importing is registration.** There is no `register()` call. Importing
 the module runs `@customElement`, which defines the tag. This is why
 `sideEffects` is `true` in the manifest and must never be set to `false`: