shelving 1.282.0 → 1.282.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.282.0",
+	"version": "1.282.2",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/button/Button.md

@@ -48,6 +48,8 @@ import { getButtonClass } from "shelving/ui";
 
 `Button` paints from the [tint ladder](/ui/TINT_CLASS). Override these hooks at `:root` or any ancestor scope; apply `color=` / `status=` (on the button or an ancestor scope) to recolour the whole button, or use a per-property hook for one change.
 
+`--button-padding` and `--button-small-padding` set the `padding` shorthand, so a single value pads both axes equally and a two-value override pads block and inline separately (e.g. `var(--space-small) var(--space-normal)`).
+
 | Variable | Styles | Default |
 |---|---|---|
 | `--button-background` | Surface fill | `var(--tint-90)` |
@@ -76,8 +78,9 @@ import { getButtonClass } from "shelving/ui";
 **Global tokens it reads:** the tint ladder `--tint-50` / `--tint-80` / `--tint-90` / `--tint-95` / `--tint-100` / `--tint-55`, plus `--space-small`, `--space-xxsmall`, `--radius-xsmall`, `--stroke-normal`, `--stroke-focus`, `--color-focus`, `--font-body`, `--weight-strong`, `--size-normal`, `--leading`, and `--duration-fast`.
 
 ```css
-/* Theme: pill-shaped buttons. */
+/* Theme: pill-shaped buttons, with roomier inline padding. */
 :root {
   --button-radius: 999px;
+  --button-padding: var(--space-small) var(--space-normal);
 }
 ```

package/ui/button/Button.module.css

@@ -17,8 +17,7 @@
 		max-inline-size: 100%;
 		border-radius: var(--button-radius, var(--radius-xsmall));
 		border: var(--button-border, var(--button-stroke, var(--stroke-normal)) solid var(--tint-80));
-		padding-block: var(--button-padding, var(--space-small));
-		padding-inline: var(--button-padding, var(--space-small));
+		padding: var(--button-padding, var(--space-small));
 		margin-inline: 0;
 		margin-block: var(--button-space, var(--space-small));
 
@@ -61,8 +60,7 @@
 		/* Variants */
 		&.small {
 			gap: var(--button-small-gap, var(--space-xxsmall));
-			padding-block: var(--button-small-padding, var(--space-xxsmall));
-			padding-inline: var(--button-small-padding, var(--space-xxsmall));
+			padding: var(--button-small-padding, var(--space-xxsmall));
 		}
 
 		&.full {

package/ui/dialog/Dialog.md

@@ -58,7 +58,7 @@ function DeleteButton({ id }: { id: string }) {
 |---|---|---|
 | `--dialog-padding` | Padding around the centred content | `var(--space-normal)` (16px) |
 | `--dialog-color-overlay` | Backdrop fill behind the content | `var(--color-shadow)` |
-| `--dialog-transition` | Open / close transition | `all var(--duration-fast)` (150ms) |
+| `--dialog-transition` | Open / close transition (a fixed discrete `display` transition runs alongside it so the fade animates across the show / hide toggle) | `all var(--duration-fast)` (150ms) |
 | `--dialog-close-offset` | Inset of the close button from the top-right corner | `var(--space-small)` (8px) |
 
 **Global tokens it reads** — move these to retheme broadly: `--space-normal`, `--space-small`, `--color-shadow`, and `--duration-fast`.

package/ui/dialog/Dialog.module.css

@@ -21,9 +21,12 @@
 		/* Style */
 		background: var(--dialog-color-overlay, var(--shadow-color));
 		opacity: 0;
-		transition: var(--dialog-transition, all var(--duration-fast));
+		transition:
+			var(--dialog-transition, all var(--duration-fast)),
+			display var(--duration-fast) allow-discrete;
 
 		&[open] {
+			display: flex;
 			opacity: 1;
 		}
 

package/ui/table/Table.md

@@ -34,10 +34,12 @@ import { Table } from "shelving/ui";
 
 `Table` exposes hooks for its rhythm, cell padding, and border; it paints no surface of its own, so it inherits the surrounding tint.
 
+`--table-padding` sets the `padding` shorthand on each cell, so a single value pads both axes equally and a two-value override pads block and inline separately (e.g. `var(--space-xxsmall) var(--space-small)`). The outermost columns still drop their outer inline padding, and `<thead>` / `<tfoot>` their outer block padding, so the table stays flush with its container.
+
 | Variable | Styles | Default |
 |---|---|---|
 | `--table-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
-| `--table-padding` | Cell padding (block + inline) | `var(--space-xsmall)` |
+| `--table-padding` | Cell padding | `var(--space-xsmall)` |
 | `--table-border` | Cell border shorthand | `var(--table-stroke)` |
 | `--table-stroke` | Cell border thickness/colour | `var(--stroke-normal) solid var(--tint-80)` |
 | `--table-header-weight` | Weight of `<thead>` / `<tfoot>` / `<tbody> <th>` cells | `var(--weight-strong)` |

package/ui/table/Table.module.css

@@ -20,8 +20,7 @@
 		/* Children */
 		th,
 		td {
-			padding-block: var(--table-padding, var(--space-xsmall));
-			padding-inline: var(--table-padding, var(--space-xsmall));
+			padding: var(--table-padding, var(--space-xsmall));
 			border-block: var(--table-border, var(--table-stroke, var(--stroke-normal) solid var(--tint-80)));
 		}