shelving 1.291.0 → 1.291.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/ui/dialog/Modal.md +4 -4
  3. package/ui/dialog/Modal.module.css +4 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shelving",
3
- "version": "1.291.0",
3
+ "version": "1.291.1",
4
4
  "author": "Dave Houlbrooke <dave@shax.com>",
5
5
  "repository": {
6
6
  "type": "git",
package/ui/dialog/Modal.md CHANGED
@@ -8,11 +8,11 @@ The panel inside a `<Dialog>`. `<Dialog>` dims the page; `Modal` gives the conte
8
8
  - `Modal` sets its text back to `--tint-00`, so it reads on its own `--tint-100` surface.
9
9
  - `DialogsStore.show()` wraps its content in a `<Dialog>` only. It does not add a `Modal`, so put the `Modal` in the content yourself.
10
10
  - `Modal` only styles the box. Lay out its contents with the usual block components.
11
- - A centred `Modal` fills the width of its `<Dialog>`, so set `--dialog-width` to change it. `--modal-width` sets the width of a `left` or `right` panel.
11
+ - A centred `Modal` fills the width of its `<Dialog>`, so set `--dialog-width` to change it. `--modal-width` sets the width of a `left` or `right` panel, and the maximum width of a `top` or `bottom` panel.
12
12
  - The `padding` variant (for example `padding="large"`) sets the top and bottom padding, and the `indent` variant sets the left and right padding, the same as on `<Panel>`.
13
13
  - The `radius` variant sets the corner radius. On a pinned panel, corners that touch a screen edge stay square.
14
14
  - It has a `--shadow-normal` drop shadow by default. Set `shadow="none"`, `shadow="small"` or `shadow="large"` to change it, the same as on `<Card>`.
15
- - Set `top`, `right`, `bottom`, or `left` to pin the panel to that edge of the screen. A top or bottom panel is full width; a left or right panel is full height. Use these for mobile menus, bottom sheets, and side menus.
15
+ - Set `top`, `right`, `bottom`, or `left` to pin the panel to that edge of the screen. A top or bottom panel is full width up to `--modal-width`, and centred on a wider screen. A left or right panel is full height. Use these for mobile menus, bottom sheets, and side menus.
16
16
  - A centred panel fades in and out with its `<Dialog>`. A pinned panel slides in from its edge and out to it, in its own view-transition layer. With reduced motion, a pinned panel fades in place.
17
17
 
18
18
  ## Usage
@@ -96,11 +96,11 @@ A link click inside a `<Dialog>` closes it, so the menu slides out as the page c
96
96
 
97
97
  ## Styling
98
98
 
99
- `Modal` paints a shadowed surface with no border. Set `--modal-stroke` (for example `var(--stroke-normal)`) to show the themed border, or `--modal-border` to replace it. A pinned panel then keeps only the border on its inner side. On a pinned panel, only the corners that do not touch a screen edge are round. Override these hooks at `:root` (or any ancestor scope) to retheme.
99
+ `Modal` paints a shadowed surface with no border. Set `--modal-stroke` (for example `var(--stroke-normal)`) to show the themed border, or `--modal-border` to replace it. A pinned panel then has no border on the side that touches the screen edge. On a pinned panel, only the corners that do not touch a screen edge are round. Override these hooks at `:root` (or any ancestor scope) to retheme.
100
100
 
101
101
  | Variable | Styles | Default |
102
102
  |---|---|---|
103
- | `--modal-width` | Width of a `left` or `right` panel (a centred panel takes `--dialog-width`) | `var(--width-narrow)` |
103
+ | `--modal-width` | Width of a `left` or `right` panel, and maximum width of a `top` or `bottom` panel (a centred panel takes `--dialog-width`) | `var(--width-narrow)` |
104
104
  | `--modal-stroke` | Border width | `0` (no border) |
105
105
  | `--modal-border` | Border shorthand | `var(--modal-stroke)` solid `--tint-80` |
106
106
  | `--modal-radius` | Corner radius (the `radius` variant wins over it) | `var(--radius-normal)` (16px) |
package/ui/dialog/Modal.module.css CHANGED
@@ -37,10 +37,13 @@
37
37
  view-transition-name: match-element;
38
38
  }
39
39
 
40
+ /* Top and bottom panels fill the screen width up to `--modal-width`, and stay centred when the screen is wider. */
40
41
  &.top,
41
42
  &.bottom {
42
43
  inset-inline: 0;
44
+ margin-inline: auto;
43
45
  width: auto;
46
+ max-width: var(--modal-width, var(--width-narrow));
44
47
  max-height: var(--modal-max-height, 100%);
45
48
  }
46
49
 
@@ -51,18 +54,16 @@
51
54
  width: var(--modal-width, var(--width-narrow));
52
55
  }
53
56
 
54
- /* If a theme sets `--modal-stroke` or `--modal-border`, keep only the border on the inner side, because the other sides touch the edges of the screen. */
57
+ /* If a theme sets `--modal-stroke` or `--modal-border`, remove the border on each side that touches the edge of the screen. */
55
58
  &.top {
56
59
  top: 0;
57
60
  border-top: none;
58
- border-inline: none;
59
61
  view-transition-class: modal-top;
60
62
  }
61
63
 
62
64
  &.bottom {
63
65
  bottom: 0;
64
66
  border-bottom: none;
65
- border-inline: none;
66
67
  view-transition-class: modal-bottom;
67
68
  }
68
69