@uni-design-system/uni-core 10.2.1 → 10.4.0

package/CHANGELOG.md

@@ -1,5 +1,93 @@
 # @uni-design-system/uni-core
 
+## 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
+
+- [`ab1689a`](https://github.com/uni-design-system/uni/commit/ab1689a8e6ddf26943403ec32e5d4871bc9f0fb6) Thanks [@gaenglish](https://github.com/gaenglish)! - `uni-button`: the focus ring is themed, and the theme now outranks the reset.
+
+  **Five of the twelve variants had no visible keyboard focus ring.** The ring
+  resolved the variant _name_ as a colour token — the pattern 10.2.0 removed from
+  checkbox, radio and toggle, missed on the one component where it costs an
+  accessibility failure rather than a wrong colour:
+
+  ```ts
+  outline: `2px solid ${this.theme.colors()[this.variant()]}`;
+  ```
+
+  `ghost` resolves to `transparent`, so its ring was drawn invisibly.
+  `light`, `onLight`, `dark` and `onDark` have no colour token at all, so the
+  declaration became `2px solid undefined` and the parser dropped it — as would
+  any intent a consumer registers. In every case `outline-offset` survived, so
+  the element still shifted on focus and the missing ring went unnoticed. This
+  was live without the registry involved.
+
+  The colour now comes from the variant's theme entry via `variantOptions`, the
+  mechanism the selection controls already use, and falls back to the reserved
+  `primary` accent rather than to nothing. Each variant keeps the ring colour it
+  had; `ghost` gains a visible one. The ring also routes through the shared
+  `focusRingStyle`, so a theme defining `focusRing` primitives restyles the button
+  alongside every other control.
+
+  **A theme could not give a button a border.** `border`, `outline`, `overflow`
+  and `transition` were applied _after_ the theme's styles, so a variant
+  declaring a border was silently erased and `!important` was the only way
+  through — which then spread to every state adjusting that border, since the
+  shorthand outranks the longhand.
+
+  The base theme was caught by its own reset: `secondary` is commented "Hollow"
+  and declares `1px solid`, and has been rendering borderless. **It now renders
+  its border** — the one visible change here for anyone on the default theme.
+
+  Those four properties move ahead of the theme's styles, resolving the
+  `TODO: Set priority on theme-defined styles` that sat on this line. Structure
+  the component genuinely owns — `position` for the ripple, the symbol slots —
+  stays after, and the reset still applies to every variant that does not
+  override it.
+
+  **`uni-icon-button`'s hover moved to the theme too.** It branched on
+  `variant() === 'ghost'` to choose between a raised shadow and a translucent
+  wash, after the theme's own styles. Being a binary partition, every intent a
+  consumer registered fell into the not-ghost half and was given a lift whether
+  or not it suited — a recessive intent included — and no theme could correct it.
+  Both themes in this repo declare a ghost hover and had it silently overridden.
+
+  Both treatments now live in `iconButton.variants` beside the colours they belong
+  with. Rendering is unchanged for the variants the theme styles; a variant it
+  does not style no longer receives a hover it never asked for, and the `disabled`
+  variant loses one it should never have had, since its block is also spread into
+  `&:disabled`.
+
+  **`uni-icon-button` had no focus indicator at all.** Its structural block cleared
+  the user-agent outline and put nothing back, in every variant — so the close
+  affordance in every dialog and drawer header was unreachable-looking under
+  keyboard navigation. This was not reported; it was found while verifying the
+  button fix above.
+
+  It now draws the shared ring, with its colour read from the same
+  `variantOptions.focusColor` the button uses. The indicator is applied last on
+  purpose: its appearance is the theme's, through `focusColor` and the `focusRing`
+  primitives, but whether one exists is not a style a theme should be able to
+  switch off by accident.
+
 ## 10.2.1
 
 ## 10.2.0

package/dist/cjs/index.cjs

@@ -1031,6 +1031,16 @@ var BaseMotion = {
 		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",
@@ -1123,9 +1133,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,
@@ -1240,17 +1251,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,6 +1275,7 @@ var buildComponents = (c) => ({
 		height: 48,
 		textRole: "title-large",
 		textAlign: "center",
+		divider: void 0,
 		closeButtonIcon: "close",
 		closeButtonSize: "md"
 	} },
@@ -1559,6 +1572,15 @@ var buildComponents = (c) => ({
 			cursor: "pointer",
 			transition: "all 0.28s ease"
 		},
+		variantOptions: {
+			primary: { focusColor: "primary" },
+			secondary: { focusColor: "secondary" },
+			tertiary: { focusColor: "tertiary" },
+			warn: { focusColor: "warn" },
+			success: { focusColor: "success" },
+			disabled: { focusColor: "disabled" },
+			ghost: { focusColor: "primary" }
+		},
 		variants: {
 			ghost: {
 				backgroundColor: "transparent",
@@ -1630,30 +1652,45 @@ var buildComponents = (c) => ({
 	},
 	iconButton: {
 		options: { borderRadius: "max" },
+		variantOptions: {
+			primary: { focusColor: "primary" },
+			secondary: { focusColor: "secondary" },
+			tertiary: { focusColor: "tertiary" },
+			warn: { focusColor: "warn" },
+			success: { focusColor: "success" },
+			disabled: { focusColor: "disabled" },
+			ghost: { focusColor: "primary" }
+		},
 		variants: {
 			ghost: {
 				backgroundColor: "transparent",
-				color: "currentcolor"
+				color: "currentcolor",
+				"&:hover": { backgroundColor: "rgba(0,0,0,0.1)" }
 			},
 			primary: {
 				backgroundColor: c.primary,
-				color: c["on-primary"]
+				color: c["on-primary"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			secondary: {
 				backgroundColor: c.secondary,
-				color: c["on-secondary"]
+				color: c["on-secondary"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			tertiary: {
 				backgroundColor: c.tertiary,
-				color: c["on-tertiary"]
+				color: c["on-tertiary"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			warn: {
 				backgroundColor: c.warn,
-				color: c["on-warn"]
+				color: c["on-warn"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			success: {
 				backgroundColor: c.success,
-				color: c["on-success"]
+				color: c["on-success"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			disabled: {
 				backgroundColor: "transparent !important",
@@ -1909,7 +1946,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,
@@ -1925,6 +1962,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 		...BaseMotion,
 		...motion
 	},
+	backdrops: {
+		...BaseBackdrops,
+		...backdrops
+	},
 	thicknesses: {
 		...BaseThicknesses,
 		...thicknesses