@uni-design-system/uni-angular 10.4.0 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,128 @@
 # @uni-design-system/uni-angular
 
+## 11.1.0
+
+### Minor Changes
+
+- [`d00b2fe`](https://github.com/uni-design-system/uni/commit/d00b2fee1ef456c546f4d2b0a479cb695962d7c9) Thanks [@gaenglish](https://github.com/gaenglish)! - Selection, hover and density become theme decisions on `uni-tag`, and add `uni-tag-group`.
+
+  `uni-tag` had the right axes but made the app do the work. `selected` painted nothing — it set `aria-pressed` and swapped the lead glyph — so every toggle chip in app markup carried a `[tone]="on() ? 'solid' : 'soft'"` of its own. Interactive chips had no hover state at all. The selected check was added rather than reserved, so picking a chip reflowed the whole row.
+
+  **Selection paints itself.** A selected chip adds a `tag-selected` class and an interactive one adds `tag-interactive`, both as much public theme contract as `&.tone-*` already was. The base theme's `tag` variants use them: selection promotes a chip to its role's solid pair at every tone (`solid` deepens instead of refilling), and `&.tag-interactive:hover` is a `brightness(0.95)` wash that darkens fill, ink and edge together. A theme restyling either writes the rules per variant, beside the colours they belong to.
+
+  **A toggle chip holds the check's place.** Bind `selected` and the chip reserves the glyph's footprint while unselected, so picking one never resizes it. A chip that already has a lead needs no slot — the check replaces the avatar or icon at identical width.
+
+  **`uni-tag-group`** is a row of chips the user picks from. It renders its own chips from `items` and owns the two things an app was otherwise wiring per chip: which one is selected (`value`, plus `multiple`) and which one holds the tab stop. Keyboard model is the toolbar pattern — one tab stop for the whole row, arrow keys within it, on both axes because the row wraps. `layout="justify"` stretches each filled row flush to both edges and leaves the last row at its natural widths, the way justified text leaves its last line alone. It is themed as **`tagGroup`** (`gap`, `rowGap`, `chipSize`, `chipTone`, `chipVariant`), layout only — every colour decision stays on the chips, so a group restyles with them.
+
+  **Visual changes to every existing chip**, including the chips inside `uni-tag-input`:
+  - A lead element and the remove control now **tuck into the rounded end** instead of starting where the radius ends — each sits concentric with the curve it is in, so a small status dot sits further in than a full lead box. A lead is balanced against, so the **label sits centred**; the tuck costs less than the old gutter did, so that balance is largely paid for rather than added. A remove control is not balanced against on its own, since it reads as an affordance rather than as content — a chip with nothing but a remove button keeps its gutter and simply tucks the glyph. A chip whose ends are too square to flow into (`borderRadius: 'xs'`) keeps the size token's gutter at both ends.
+  - The `tag` typeface drops from **weight 600 to 500**. Geometry is unchanged; what made these chips read louder than the ones they replaced was the weight, not the size.
+  - `border-color` and `filter` join the transition list, so an outline↔solid change fades its edge instead of snapping while the fill animates, and the hover wash fades in.
+
+  New `tag` theme option **`endInset`** (`number | 'auto'`) sets how far that tuck goes; `auto` derives it from the chip so the lead sits concentric with the cap. The `tag` size tokens now state `paddingInline` rather than a `padding` shorthand, since the chip reads that number back to balance the label — a theme still stating the shorthand is parsed as before.
+
+  `UniTagComponent` is now generic in its value (`UniTagComponent<T extends UniTagValue = UniTagValue>`), so `value`, `removed` and `activated` carry an app's own type and `$event` flows without a closure. The default type parameter leaves every existing use compiling unchanged.
+
+## 11.0.0
+
+### Major Changes
+
+- [`8fef84f`](https://github.com/uni-design-system/uni/commit/8fef84f25b92c3aea09ca1185304d54acae7e6b7) Thanks [@gaenglish](https://github.com/gaenglish)! - Require Angular 22. `@angular/common`, `@angular/core` and `@angular/forms` move from `^21.2.0` to `^22.0.0`, so 11.x tracks Angular 22 and 10.x remains the Angular 21 line — one major of this package per Angular major, as documented. The old range excluded v22 outright, so an app that had taken Angular 22 could not install this package without a peer override.
+
+  Two consequences of the framework's own changes:
+
+  **`touch` output on every form control.** Angular 22 marks a bound field touched through a dedicated `touch` output rather than through the `touched` model, which the `Field` directive now binds inward only. All sixteen controls that track touched state (input, textarea, checkbox, radio, toggle, select, combobox, multi-select, tag-input, calendar, date/date-time/time inputs, number/number-range inputs, quantity-stepper, slider) emit it wherever they already considered the user done with the control. Without it, `touched()` never flips and error display gated on it never appears.
+
+  **`min` / `max` typing.** The contract now types `min`/`max` as the control's own value type rather than as numbers. Where that still fits, the input was widened (`uni-slider`). Where it does not — a text control's native numeric attributes (`uni-input`), a range control's scalar bounds (`uni-number-range-input`), a tag limit (`uni-tag-input`) — the class member steps aside and the public binding name is preserved by an alias, so **templates are unchanged**. Only code reaching these through a `ViewChild` instance is affected: `min`/`max` are now `minAttr`/`maxAttr` on `uni-input`, `minValue`/`maxValue` on `uni-number-range-input`, and `max` is `maxLength` on `uni-tag-input`. `uni-number-range-input`'s protected `valueOf()` is renamed `partValue()`, since `valueOf` collides with `Object.valueOf`.
+
+  Angular 22 also makes `OnPush` the default change detection; every component here already set it explicitly.
+
+- [`403043a`](https://github.com/uni-design-system/uni/commit/403043a58fa616d13b28a3f563a17fffee76b963) Thanks [@gaenglish](https://github.com/gaenglish)! - Add `uni-inline-button`, and remove the `footer` component name.
+
+  **`uni-inline-button`** is an action that lives inside a sentence. Every other button in the library owns a box — even `ghost` carries padding and a hit area, so dropping one into a paragraph pushes the words apart and breaks the line's rhythm. This one adds no box: it inherits the surrounding type (family, size, weight, line height, letter spacing and colour) and renders as part of the run of text.
+
+  ```html
+  Your data is processed under the terms you accepted. You can
+  <button inline-button underline link>review them</button> at any time.
+  ```
+
+  It is always a real `<button>`, so it can _look_ like a link without claiming to be navigation: Enter and Space activate it and assistive tech announces a button rather than an unfollowable link. Reach for an `<a>` when the thing actually goes somewhere.
+
+  Inputs: `underline` and `link` (both tri-state against the theme's defaults, and both readable as bare attributes), `iconName` / `symbolName` with `iconPosition`, and `disable`. A glyph is sized in `em` rather than px, so the same markup reads correctly in a caption and in a headline and never changes the line height of the paragraph it sits in.
+
+  It is themed as **`inlineButton`**, with `linkColor`, `underline`, `underlineOnHover`, `underlineOffset`, `gap` and `focusColor`. This replaces the `textButton` name that had sat in `ComponentName` since before there was anything to put behind it — **`ComponentName`'s `'textButton'` is renamed to `'inlineButton'`, and the exported options type `UniTextButtonOptions` to `UniInlineButtonOptions`.** Nothing shipped a `textButton` entry, so a theme only needs the rename if it had reached for the unbacked name.
+
+  One documented limit: browsers blockify every `<button>` to `inline-block` whatever `display` it asks for, so the control is an atomic inline box. A long label wraps inside it, but the run moves to the next line whole rather than splitting where the surrounding words would. `display: contents` would fix that and cost the button its focusability, so labels should stay to a few words.
+
+  **`footer` is removed** from `ComponentName` and from the base theme. It was declared and themed but never built, so a theme could set options that reached nothing. Themes that state a `footer` entry now fail to type-check; delete the entry.
+
+- [`2e4a6a4`](https://github.com/uni-design-system/uni/commit/2e4a6a4de0fbecad710298e680a504a337cdc02e) Thanks [@gaenglish](https://github.com/gaenglish)! - Put every remaining hardcoded animation duration on the `motion` scale. Seventeen sites across twelve components carried their own literal, so a theme could retime some of the library and not the rest.
+
+  New `motion` options, each defaulting to the token named: `button`, `iconButton`, `checkbox`, `tabs`, `tooltip`, `dataTable`, `tag`. `uni-sort-header` names `control` directly — it has no theme entry to hang an option on. `combobox`'s chevron now turns with the popup it opens, reading that component's existing `motion` option.
+
+  Timings move where the literal and the token disagreed:
+
+  |                                           | before            | after             | token          |
+  | ----------------------------------------- | ----------------- | ----------------- | -------------- |
+  | button, icon-button, data-table row hover | 280ms ease        | 300ms ease        | `control`      |
+  | checkbox box and dash                     | 200ms ease        | 300ms ease        | `control`      |
+  | checkbox tick (drawn, trails the box)     | 500ms ease        | 350ms ease-in-out | `reveal`       |
+  | tabs ink and indicator                    | 150ms ease        | 120ms ease        | `snap`         |
+  | combobox chevron                          | 150ms ease        | 100ms linear      | `popup`        |
+  | tag fill and ink                          | 200ms ease        | 300ms ease        | `control`      |
+  | sort-header arrow                         | 350ms ease-in-out | 300ms ease        | `control`      |
+  | alert, snackbar dismiss                   | 300ms             | 350ms             | `notification` |
+  | data-table detail expand                  | 300ms ease        | 350ms ease-in-out | `reveal`       |
+  | tooltip fade, data-table loading overlay  | 350ms             | unchanged         | `notification` |
+
+  Two of these lived in the theme rather than in a component: `button.fixed` and `tag.fixed` each baked a `transition`, and the button's won over the component that had already been migrated — so the button kept its old timing regardless. Both are gone; the components own their transitions and follow the token at runtime. A spec now fails if any shipped theme states a duration in a style block.
+
+  `uni-skeleton` still stays out: its shimmer is a loop, not a transition.
+
+- [`2dc4fb5`](https://github.com/uni-design-system/uni/commit/2dc4fb538a1eeb1f232bf6b89ad88a623be9db72) Thanks [@gaenglish](https://github.com/gaenglish)! - Move `uni-slider`'s click-to-jump timing onto the `motion` scale. The `slider.transitionMs` theme option is removed; use `slider.motion` — a token name — instead.
+
+  It was the last duration option outside the scale. The other eight went in 9.0.0, but the slider was rewritten for the numeric family afterwards and reintroduced its own, so a theme could retime every animated component except this one.
+
+  The scale gains a sixth token for it, `snap` (120ms `ease`), which is the slider's exact previous timing — nothing moves faster or slower than before. It is a separate token rather than a reuse of `control` because the two describe different motion: `control` times a state change in place (a hover fill, a check mark) and runs 300ms, where a slider thumb covers distance to a value the user just chose and at 300ms reads as lagging the input rather than answering it. A drag is still never animated.
+
+  Themes setting `slider.transitionMs` should set `motion.snap` instead, which also retimes anything else pointed at that token.
+
+- [`44feb5d`](https://github.com/uni-design-system/uni/commit/44feb5d47814e152155f7d0541d186eb6b2f7a81) Thanks [@gaenglish](https://github.com/gaenglish)! - Composite components now render their glyphs through `uni-icon` theme tokens instead of `uni-symbol` ligatures, completing the rule set in `AGENTS.md`. Thirteen theme options are renamed and retyped from `string` to `IconName`:
+
+  | Component              | before                            | after                                 |
+  | ---------------------- | --------------------------------- | ------------------------------------- |
+  | date-input, time-input | `toggleSymbol`                    | `toggleIcon` (`calendar`, `clock`)    |
+  | calendar               | `navPrevSymbol` / `navNextSymbol` | `navPrevIcon` / `navNextIcon`         |
+  | menu-item              | `activeSymbol`                    | `activeIcon`                          |
+  | avatar                 | `fallbackSymbol`                  | `fallbackIcon` (`person` → `profile`) |
+  | breadcrumb             | `separatorSymbol`                 | `separatorIcon`                       |
+  | search-input           | `searchSymbol` / `clearSymbol`    | `searchIcon` / `clearIcon`            |
+  | callout, popover       | `closeSymbol`                     | `closeIcon`                           |
+
+  `drawer-header` and `dialog-header` shipped both `closeButtonIcon` and `closeButtonSymbol`; the `*Symbol` half is removed, and since `symbolName` outranked `iconName` inside the icon button, those two headers were still rendering the ligature path until now.
+
+  Four glyphs join `BaseIcons` (65 total): `arrowUp`/`arrowDown` and `chevronsLeft`/`chevronsRight`, which is what unblocked `uni-sort-header` and `uni-paginator`. `select-input`, `multi-select-dropdown` and `data-search` also stopped hardcoding ligatures.
+
+  **Migrating:** rename the option in your theme and swap the Material ligature for an icon token — `activeSymbol: 'check'` becomes `activeIcon: 'check'`, `toggleSymbol: 'calendar_month'` becomes `toggleIcon: 'calendar'`. Any glyph you need that `BaseIcons` lacks can be registered through `createTheme({ icons })`.
+
+  `uni-symbol` is unchanged and still the right tool for app-facing inputs that take arbitrary ligature names — `symbolName` on icon-button, tag, alert, snackbar and menu-item, and `symbolLeft`/`symbolRight` on button. One consequence worth knowing: `uni-icon` has no variable-font axes, so a theme setting `symbol: { options: { weight } }` no longer affects these composites' glyphs — they take the icon set's weight (300). The Wellsourced theme, which sets weight 200, has accepted this.
+
+- [`0b1c528`](https://github.com/uni-design-system/uni/commit/0b1c52851188011717b9388298a4b3b3f734e9e5) Thanks [@gaenglish](https://github.com/gaenglish)! - Remove the deprecated `toggle.size` theme option and wire up three component names that were declared but unreachable.
+
+  `toggle.size` was the last `@deprecated` API in the library — the pre-`sizes` geometry (width 2x, knob 0.8x) that outranked the size block for every instance regardless of a toggle's own `size` input. No shipped theme set it. Use the `toggle.sizes` block, which gives each size token its own `width` / `height` / `padding`.
+
+  `select`, `buttonGroup` and `progressBar` were listed in `ComponentName` with no theme entry and no `COMPONENT_NAME` provider behind them, so a theme could not dress them however it tried. Each now has an entry whose defaults are exactly what the component previously hardcoded, so nothing moves:
+  - **`select`** — `toggleIcon`, `toggleColor`, `toggleSize` for the dropdown affordance, matching `uni-combobox`'s (`chevronDown`, `on-background-variant`, 20).
+  - **`buttonGroup`** — `border` and `borderRadius` for the segmented frame, previously a literal `quaternary` border and 4px corners.
+  - **`progressBar`** — `trackColor`, `fillColor`, `completeColor`, `borderColor` and `strokeWidth`, previously read straight off the palette.
+
+  The two remaining names are dealt with separately: `textButton` is renamed `inlineButton` and now backs the new `uni-inline-button`, and `footer` is removed from `ComponentName` altogether.
+
+### Patch Changes
+
+- Updated dependencies [[`8fef84f`](https://github.com/uni-design-system/uni/commit/8fef84f25b92c3aea09ca1185304d54acae7e6b7), [`85a1ec5`](https://github.com/uni-design-system/uni/commit/85a1ec569446f7a353410e8338ef70d473dc72ae), [`403043a`](https://github.com/uni-design-system/uni/commit/403043a58fa616d13b28a3f563a17fffee76b963), [`2e4a6a4`](https://github.com/uni-design-system/uni/commit/2e4a6a4de0fbecad710298e680a504a337cdc02e), [`2dc4fb5`](https://github.com/uni-design-system/uni/commit/2dc4fb538a1eeb1f232bf6b89ad88a623be9db72), [`44feb5d`](https://github.com/uni-design-system/uni/commit/44feb5d47814e152155f7d0541d186eb6b2f7a81), [`0b1c528`](https://github.com/uni-design-system/uni/commit/0b1c52851188011717b9388298a4b3b3f734e9e5)]:
+  - @uni-design-system/uni-core@11.0.0
+
 ## 10.4.0
 
 ### Minor Changes

package/README.md

@@ -31,7 +31,9 @@ npm install @uni-design-system/uni-angular @uni-design-system/uni-core @emotion/
 ```
 
 `@emotion/css` and `@uni-design-system/uni-core` are peer dependencies of the
-host application.
+host application. **11.x requires Angular 22** (`@angular/common`,
+`@angular/core` and `@angular/forms` are peered at `^22.0.0`); stay on 10.x for
+Angular 21.
 
 ## 🏁 Getting Started
 
@@ -151,5 +153,10 @@ every component. Point your coding agent at it. Regenerate with
 - Follows [semver](https://semver.org) with
   [changesets](https://github.com/changesets/changesets); see
   [CHANGELOG.md](./CHANGELOG.md).
-- Each major of this package tracks one Angular major (current: Angular 21).
-  Previous majors receive fixes for six months after the next major ships.
+- Each major of this package tracks one Angular major: **11.x tracks Angular
+  22**, 10.x tracks Angular 21. Previous majors receive fixes for six months
+  after the next major ships.
+- Angular 22 made Signal Forms stable, which is what these form controls
+  implement (`FormValueControl` / `FormCheckboxControl`). They do not implement
+  `ControlValueAccessor`, so `formControlName` and `ngModel` do not bind — an
+  app on `ReactiveFormsModule` needs its own wrapper.