@uni-design-system/uni-core 10.3.0 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,126 @@
 # @uni-design-system/uni-core
 
+## 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
+
+- [`85a1ec5`](https://github.com/uni-design-system/uni/commit/85a1ec569446f7a353410e8338ef70d473dc72ae) Thanks [@gaenglish](https://github.com/gaenglish)! - Fix unreadable text in `uni-card` under dark themes. The card's theme entry painted `backgroundColor` without the matching `color`, so any unstyled text inside it fell back to the user-agent default black. On a light theme that happened to read; on every dark theme it rendered black on a near-black surface — 1.11:1 against a 4.5:1 AA requirement, reported from the theme switcher's preview card.
+
+  The card now states `on-background` alongside its background, as `cardHeader` already did for each of its variants. All six registered themes measure between 13.8:1 and 18.1:1 on that text.
+
+  Added with the fix: a spec asserting the invariant across every component entry in the shipped themes — anything that paints a `backgroundColor` must also state a `color` — so the next half-painted surface fails a test rather than reaching a consumer.
+
+## 10.4.0
+
+### Minor Changes
+
+- [`cb5f08f`](https://github.com/uni-design-system/uni/commit/cb5f08f7bc7f73492688d33388c905941762ea0b) Thanks [@gaenglish](https://github.com/gaenglish)! - Give `uni-dialog` the drawer's three-row layout: a pinned `[uni-dialog-header]`, a scrolling body, and pinned `[uni-dialog-buttons]`.
+
+  The surface is now a flex column that is `overflow: clip` on both axes, so it is never the scroll container — previously a long form scrolled the dialog's own title and action buttons off the screen. Unlike the drawer, the dialog declares no height and stays sized by its content, growing until it reaches `calc(100dvh - 2 × inset)` and only then scrolling its body.
+
+  New theme options: `dialog.inset` (gap from the viewport edge before the body scrolls, default `lg`), `dialog.bodyPadding` (pads the scrolling row alone; `dialog.padding` still insets all three rows), and `divider` on `dialogHeader` / `dialogButtons` for a border between a pinned row and the body — all off or unchanged by default, so existing dialogs keep their appearance.
+
+  `[uni-dialog-header]` gains the shorter `[dialog-header]` alias, matching `[dialog-buttons]`; the long form keeps working. The `defaultCloseButton` now actually floats in the corner — its `position: absolute` was being lost to the icon button's own class, which left it inline at the top of the surface.
+
+  The drawer's overlay scrim now fades in and out with the panel instead of snapping. Its `::backdrop` had a background and no animation at all, so the dimming appeared and vanished instantly around a panel that took 250ms to slide. A new `drawer.motion` option (default `panel`) times the slide, the scrim's fade and the side panel's width transition together, replacing the hardcoded 250ms literals. The global reduced-motion rule now also reaches `::backdrop`, so both the drawer's and the dialog's scrim honour the preference (WCAG 2.3.3).
+
+  Dialog and drawer scrims now come from one token. `UniTheme` gains a `backdrops` scale — open and named like `shadows` and `motion` — and both components' `backdrop` option points at a name (`'scrim'`) instead of carrying its own CSS. They had drifted: the dialog washed the page white and blurred it while the drawer dimmed it dark, and a theme that dressed the dialog left the drawer on the library default. A raw style object is still accepted on either option, so a theme that states one keeps working.
+
+  The dialog's fade now reads the theme's `motion` token too (new `dialog.motion` option, default `panel`), replacing a hardcoded `350ms ease-in`. It shared the drawer's scrim but not its timing, so the same surface arrived at two speeds; both are now 250ms and a theme retimes them together.
+
 ## 10.3.0
 
 ### Minor Changes

package/dist/cjs/index.cjs

@@ -741,6 +741,10 @@ var BaseIcons = {
 	chevronRight: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='m517.85-480-184-184L376-706.15 602.15-480 376-253.85 333.85-296l184-184Z'/%3e%3c/svg%3e",
 	arrowLeft: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='m294.92-450 227.85 227.85L480-180 180-480l300-300 42.77 42.15L294.92-510H780v60H294.92Z'/%3e%3c/svg%3e",
 	arrowRight: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M665.08-450H180v-60h485.08L437.23-737.85 480-780l300 300-300 300-42.77-42.15L665.08-450Z'/%3e%3c/svg%3e",
+	arrowUp: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M450-180v-485.08L222.15-437.23 180-480l300-300 300 300-42.15 42.77L510-665.08V-180h-60Z'/%3e%3c/svg%3e",
+	arrowDown: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M450-780v485.08L222.15-522.77 180-480l300 300 300-300-42.15-42.77L510-294.92V-780h-60Z'/%3e%3c/svg%3e",
+	chevronsLeft: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M445-253.85 218.85-480 445-706.15 487.15-664 303.77-480l183.38 184L445-253.85Zm254 0L472.85-480 699-706.15 741.15-664 557.77-480l183.38 184L699-253.85Z'/%3e%3c/svg%3e",
+	chevronsRight: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M402.23-480 218.85-664 261-706.15 487.15-480 261-253.85 218.85-296l183.38-184Zm254 0L472.85-664 515-706.15 741.15-480 515-253.85 472.85-296l183.38-184Z'/%3e%3c/svg%3e",
 	home: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M240-200h133.85v-237.69h212.3V-200H720v-360L480-740.77 240-560v360Zm-60 60v-450l300-225.77L780-590v450H526.15v-237.69h-92.3V-140H180Zm300-330.38Z'/%3e%3c/svg%3e",
 	building: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M130-136.92v-540h160v-160h380v320h160v380H530v-160H430v160H130Zm60-60h100v-100H190v100Zm0-160h100v-100H190v100Zm0-160h100v-100H190v100Zm160 160h100v-100H350v100Zm0-160h100v-100H350v100Zm0-160h100v-100H350v100Zm160 320h100v-100H510v100Zm0-160h100v-100H510v100Zm0-160h100v-100H510v100Zm160 480h100v-100H670v100Zm0-160h100v-100H670v100Z'/%3e%3c/svg%3e",
 	externalLink: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M212.31-140Q182-140 161-161q-21-21-21-51.31v-535.38Q140-778 161-799q21-21 51.31-21h252.3v60h-252.3q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v535.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85h535.38q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46v-252.3h60v252.3Q820-182 799-161q-21 21-51.31 21H212.31Zm176.46-206.62-42.15-42.15L717.85-760H560v-60h260v260h-60v-157.85L388.77-346.62Z'/%3e%3c/svg%3e",
@@ -1029,8 +1033,22 @@ var BaseMotion = {
 	control: {
 		duration: 300,
 		easing: "ease"
+	},
+	snap: {
+		duration: 120,
+		easing: "ease"
 	}
 };
+/**
+* The one wash every modal surface lays over the page it covers. Dialog and
+* drawer both point at `scrim` by name, so a theme redresses them together —
+* before this they owned a `backdrop` blob each and had drifted apart, the
+* dialog washing the page white and blurred while the drawer dimmed it dark.
+*/
+var BaseBackdrops = { scrim: {
+	background: "rgba(255, 255, 255, 0.6)",
+	backdropFilter: "blur(2px)"
+} };
 var BaseRadii = {
 	none: "none",
 	xxs: "4px",
@@ -1105,7 +1123,7 @@ var buildComponents = (c) => ({
 		typeface: "label",
 		color: "on-background-variant",
 		currentColor: "on-background",
-		separatorSymbol: "chevron_right",
+		separatorIcon: "chevronRight",
 		gap: "xs"
 	} },
 	appBar: { options: {
@@ -1123,9 +1141,10 @@ var buildComponents = (c) => ({
 		divider: "light",
 		elevation: "menu",
 		padding: "md",
-		backdrop: { background: "rgba(0, 0, 0, 0.4)" },
+		backdrop: "scrim",
 		scrim: true,
-		background: "solid"
+		background: "solid",
+		motion: "panel"
 	} },
 	drawerHeader: { options: {
 		color: void 0,
@@ -1152,7 +1171,7 @@ var buildComponents = (c) => ({
 		options: {
 			borderRadius: "max",
 			typeface: "subtitle-2",
-			fallbackSymbol: "person"
+			fallbackIcon: "profile"
 		},
 		variants: {
 			primary: {
@@ -1209,8 +1228,8 @@ var buildComponents = (c) => ({
 		ringWidth: 2
 	} },
 	searchInput: { options: {
-		searchSymbol: "search",
-		clearSymbol: "close",
+		searchIcon: "search",
+		clearIcon: "close",
 		listColor: "primary-surface",
 		listShadow: "menu",
 		listBorderRadius: "xs",
@@ -1219,6 +1238,7 @@ var buildComponents = (c) => ({
 	} },
 	checkbox: {
 		options: {
+			motion: "control",
 			size: 20,
 			boxColor: "surface",
 			borderRadius: 2,
@@ -1240,17 +1260,18 @@ var buildComponents = (c) => ({
 		color: "primary-surface",
 		border: "quaternary",
 		padding: "sm",
+		bodyPadding: void 0,
+		inset: "lg",
 		elevation: "dialog",
-		backdrop: {
-			background: "rgba(255, 255, 255, 0.6)",
-			backdropFilter: "blur(2px)"
-		}
+		backdrop: "scrim",
+		motion: "panel"
 	} },
 	dialogButtons: { options: {
 		gap: "md",
 		padding: "md",
 		paddingBottom: "lg",
 		justifyContent: "center",
+		divider: void 0,
 		confirmButtonVariant: "primary",
 		cancelButtonVariant: "warn",
 		buttonSize: "lg",
@@ -1263,9 +1284,26 @@ var buildComponents = (c) => ({
 		height: 48,
 		textRole: "title-large",
 		textAlign: "center",
+		divider: void 0,
 		closeButtonIcon: "close",
 		closeButtonSize: "md"
 	} },
+	select: { options: {
+		toggleIcon: "chevronDown",
+		toggleColor: "on-background-variant",
+		toggleSize: 20
+	} },
+	buttonGroup: { options: {
+		border: "quaternary",
+		borderRadius: 4
+	} },
+	progressBar: { options: {
+		trackColor: "primary-surface",
+		fillColor: "secondary-surface",
+		completeColor: "secondary",
+		borderColor: "on-background-variant",
+		strokeWidth: 1
+	} },
 	dropdown: { options: {
 		border: "none",
 		borderRadius: "xxs",
@@ -1293,7 +1331,7 @@ var buildComponents = (c) => ({
 			typeface: "label",
 			textColor: void 0,
 			hoverColor: "primary-container",
-			activeSymbol: "check",
+			activeIcon: "check",
 			motion: "control"
 		},
 		variants: {
@@ -1317,7 +1355,7 @@ var buildComponents = (c) => ({
 		maxWidth: "38ch",
 		offset: 7,
 		arrowSize: 8,
-		closeSymbol: "close",
+		closeIcon: "close",
 		headerTypeface: "title-small",
 		tooltipPadding: "4px 8px",
 		tooltipOpenDelay: 500,
@@ -1325,12 +1363,6 @@ var buildComponents = (c) => ({
 		motion: "panel"
 	} },
 	expand: { options: { motion: "reveal" } },
-	footer: { options: {
-		height: 52,
-		color: "primary",
-		logoHeight: 18.6,
-		logoPadding: "md"
-	} },
 	input: { options: {
 		typeface: "input",
 		color: "primary-surface",
@@ -1389,6 +1421,7 @@ var buildComponents = (c) => ({
 		}
 	},
 	tabs: { options: {
+		motion: "snap",
 		typeface: "title-small",
 		textColor: "on-surface-variant",
 		activeTextColor: "primary",
@@ -1416,14 +1449,14 @@ var buildComponents = (c) => ({
 			typeface: "tag",
 			gap: "xs",
 			removeIcon: "close",
-			selectedIcon: "check"
+			selectedIcon: "check",
+			motion: "control"
 		},
 		fixed: {
 			display: "inline-flex",
 			alignItems: "center",
 			maxWidth: "100%",
-			border: "1px solid transparent",
-			transition: "background-color .2s ease, color .2s ease"
+			border: "1px solid transparent"
 		},
 		variants: {
 			...tagVariant(c, "primary"),
@@ -1489,8 +1522,8 @@ var buildComponents = (c) => ({
 			dayBorderRadius: "max",
 			typeface: "label",
 			gap: "xxs",
-			navPrevSymbol: "chevron_left",
-			navNextSymbol: "chevron_right",
+			navPrevIcon: "chevronLeft",
+			navNextIcon: "chevronRight",
 			weekdayFormat: "short",
 			showOutsideDays: false,
 			todayStyle: "outline"
@@ -1529,13 +1562,13 @@ var buildComponents = (c) => ({
 		descriptionColor: "on-primary-surface-variant"
 	} },
 	dateInput: { options: {
-		toggleSymbol: "calendar_month",
+		toggleIcon: "calendar",
 		popupShadow: "menu",
 		popupBorderRadius: "xs",
 		popupColor: "primary-surface"
 	} },
 	timeInput: { options: {
-		toggleSymbol: "schedule",
+		toggleIcon: "clock",
 		listColor: "primary-surface",
 		listShadow: "menu",
 		listBorderRadius: "xs",
@@ -1549,15 +1582,15 @@ var buildComponents = (c) => ({
 	button: {
 		options: {
 			borderRadius: "max",
-			typeface: "button"
+			typeface: "button",
+			motion: "control"
 		},
 		fixed: {
 			position: "relative",
 			overflow: "hidden",
 			outline: "0",
 			border: "0",
-			cursor: "pointer",
-			transition: "all 0.28s ease"
+			cursor: "pointer"
 		},
 		variantOptions: {
 			primary: { focusColor: "primary" },
@@ -1638,7 +1671,10 @@ var buildComponents = (c) => ({
 		}
 	},
 	iconButton: {
-		options: { borderRadius: "max" },
+		options: {
+			borderRadius: "max",
+			motion: "control"
+		},
 		variantOptions: {
 			primary: { focusColor: "primary" },
 			secondary: { focusColor: "secondary" },
@@ -1715,6 +1751,13 @@ var buildComponents = (c) => ({
 			}
 		}
 	},
+	inlineButton: { options: {
+		linkColor: "primary",
+		underline: false,
+		underlineOnHover: true,
+		underlineOffset: "0.15em",
+		gap: "xxs"
+	} },
 	progressGauge: {
 		fixed: { textFill: c["on-background"] },
 		variants: {
@@ -1750,7 +1793,8 @@ var buildComponents = (c) => ({
 		options: { borderRadius: "xs" },
 		fixed: {
 			overflow: "hidden",
-			backgroundColor: c.background
+			backgroundColor: c.background,
+			color: c["on-background"]
 		}
 	},
 	cardHeader: {
@@ -1786,6 +1830,7 @@ var buildComponents = (c) => ({
 		placeholderColor: "disabled"
 	} },
 	dataTable: { options: {
+		motion: "control",
 		color: "primary-surface",
 		border: "light",
 		borderRadius: "sm",
@@ -1849,7 +1894,7 @@ var buildComponents = (c) => ({
 		tooltipTextColor: "on-inverse-surface",
 		tooltipShadow: "menu",
 		tooltipBorderRadius: "xs",
-		transitionMs: 120
+		motion: "snap"
 	} },
 	skeleton: { options: {
 		color: "surface-variant",
@@ -1898,6 +1943,7 @@ var buildComponents = (c) => ({
 		}
 	},
 	tooltip: { options: {
+		motion: "notification",
 		border: void 0,
 		borderRadius: "xs",
 		shadow: "raised",
@@ -1912,7 +1958,7 @@ var buildComponents = (c) => ({
 		padding: "16px",
 		headerTypeface: "title-small",
 		typeface: "label",
-		closeSymbol: "close",
+		closeIcon: "close",
 		arrowSize: 8,
 		offset: 12,
 		scrimColor: "rgba(0, 0, 0, 0.45)",
@@ -1933,7 +1979,7 @@ var deepMerge = (base, override) => {
 	for (const [key, value] of Object.entries(override)) out[key] = isRecord$1(value) && isRecord$1(out[key]) ? deepMerge(out[key], value) : value;
 	return out;
 };
-var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, motion, typography, borders, thicknesses, spacing, components }) => ({
+var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, motion, backdrops, typography, borders, thicknesses, spacing, components }) => ({
 	id,
 	name,
 	colors,
@@ -1949,6 +1995,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 		...BaseMotion,
 		...motion
 	},
+	backdrops: {
+		...BaseBackdrops,
+		...backdrops
+	},
 	thicknesses: {
 		...BaseThicknesses,
 		...thicknesses