shelving 1.290.0 → 1.291.1

package/package.json

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

package/schema/ChoiceSchema.d.ts

@@ -40,7 +40,7 @@ export interface ChoiceSchemaOptions<O extends string, I = never> extends Schema
     readonly value?: O | I;
     /**
      * Input control hint for downstream UIs.
-     * - When not set, a UI picks the control from the number of options.
+     * @default "radio" for 8 or fewer options, otherwise "select"
      */
     readonly input?: ChoiceInputType | undefined;
 }
@@ -55,7 +55,7 @@ export interface ChoiceSchemaOptions<O extends string, I = never> extends Schema
 export declare class ChoiceSchema<O extends string, I = never> extends Schema<O> {
     readonly value: O | I | undefined;
     readonly options: ChoiceOptions<O>;
-    readonly input: ChoiceInputType | undefined;
+    readonly input: ChoiceInputType;
     constructor({ one, title, placeholder, options, value, input, ...rest }: ChoiceSchemaOptions<O, I>);
     /**
      * Get an unknown value as one of the allowed choices, or `undefined` if it isn't one.

package/schema/ChoiceSchema.js

@@ -1,5 +1,5 @@
 import { isArray } from "../util/array.js";
-import { isProp } from "../util/object.js";
+import { getKeys, isProp } from "../util/object.js";
 import { Schema } from "./Schema.js";
 /** Get a `ChoiceOptions` object for a set of `PossibleChoiceOptions`. */
 function _getChoiceOptions(options) {
@@ -8,6 +8,8 @@ function _getChoiceOptions(options) {
 function _getChoiceOption(k) {
     return [k, k];
 }
+/** Maximum number of options for which a `ChoiceSchema` defaults to radio inputs. */
+const MAX_RADIO_OPTIONS = 8;
 /**
  * Schema that validates a value against a fixed set of allowed string choices.
  *
@@ -22,7 +24,7 @@ export class ChoiceSchema extends Schema {
     constructor({ one = "choice", title = "Choice", placeholder = `No ${one}`, options, value, input, ...rest }) {
         super({ one, title, value, placeholder, ...rest });
         this.options = _getChoiceOptions(options);
-        this.input = input;
+        this.input = input ?? (getKeys(this.options).length <= MAX_RADIO_OPTIONS ? "radio" : "select");
     }
     /**
      * Get an unknown value as one of the allowed choices, or `undefined` if it isn't one.

package/ui/dialog/Modal.md

@@ -8,11 +8,11 @@ The panel inside a `<Dialog>`. `<Dialog>` dims the page; `Modal` gives the conte
 - `Modal` sets its text back to `--tint-00`, so it reads on its own `--tint-100` surface.
 - `DialogsStore.show()` wraps its content in a `<Dialog>` only. It does not add a `Modal`, so put the `Modal` in the content yourself.
 - `Modal` only styles the box. Lay out its contents with the usual block components.
-- 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.
+- 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.
 - 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>`.
 - The `radius` variant sets the corner radius. On a pinned panel, corners that touch a screen edge stay square.
 - 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>`.
-- 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.
+- 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.
 - 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.
 
 ## Usage
@@ -96,11 +96,11 @@ A link click inside a `<Dialog>` closes it, so the menu slides out as the page c
 
 ## Styling
 
-`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.
+`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.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--modal-width` | Width of a `left` or `right` panel (a centred panel takes `--dialog-width`) | `var(--width-narrow)` |
+| `--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)` |
 | `--modal-stroke` | Border width | `0` (no border) |
 | `--modal-border` | Border shorthand | `var(--modal-stroke)` solid `--tint-80` |
 | `--modal-radius` | Corner radius (the `radius` variant wins over it) | `var(--radius-normal)` (16px) |

package/ui/dialog/Modal.module.css

@@ -37,10 +37,13 @@
 			view-transition-name: match-element;
 		}
 
+		/* Top and bottom panels fill the screen width up to `--modal-width`, and stay centred when the screen is wider. */
 		&.top,
 		&.bottom {
 			inset-inline: 0;
+			margin-inline: auto;
 			width: auto;
+			max-width: var(--modal-width, var(--width-narrow));
 			max-height: var(--modal-max-height, 100%);
 		}
 
@@ -51,18 +54,16 @@
 			width: var(--modal-width, var(--width-narrow));
 		}
 
-		/* 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. */
+		/* If a theme sets `--modal-stroke` or `--modal-border`, remove the border on each side that touches the edge of the screen. */
 		&.top {
 			top: 0;
 			border-top: none;
-			border-inline: none;
 			view-transition-class: modal-top;
 		}
 
 		&.bottom {
 			bottom: 0;
 			border-bottom: none;
-			border-inline: none;
 			view-transition-class: modal-bottom;
 		}
 

package/ui/input/SchemaInput.d.ts

@@ -83,7 +83,6 @@ export interface ChoiceSchemaInputProps extends SchemaInputProps<ChoiceSchema<st
  * Show a choice input for a `ChoiceSchema` — radio inputs or a select.
  *
  * - The schema's `input` picks the control: `"radio"` for radio inputs, `"select"` for a select.
- * - When `input` is not set, it shows radio inputs for up to 8 options, otherwise a select.
  * - The value is normalised through the schema's `get()`, so invalid or sentinel values (e.g. a `CountrySchema`'s `"detect"`) resolve to a real option or fall back to the placeholder rather than mis-selecting the first option.
  *
  * @returns A `ChoiceRadioInputs` or `SelectInput` element bound to the schema.

package/ui/input/SchemaInput.js

@@ -14,7 +14,6 @@ import { isArray } from "../../util/array.js";
 import { isData } from "../../util/data.js";
 import { isDictionary } from "../../util/dictionary.js";
 import { getNumber } from "../../util/number.js";
-import { getKeys } from "../../util/object.js";
 import { getSource, requireSource } from "../../util/source.js";
 import { getString } from "../../util/string.js";
 import { Field } from "../form/Field.js";
@@ -97,7 +96,6 @@ export function NumberSchemaInput({ schema, value, ...props }) {
  * Show a choice input for a `ChoiceSchema` — radio inputs or a select.
  *
  * - The schema's `input` picks the control: `"radio"` for radio inputs, `"select"` for a select.
- * - When `input` is not set, it shows radio inputs for up to 8 options, otherwise a select.
  * - The value is normalised through the schema's `get()`, so invalid or sentinel values (e.g. a `CountrySchema`'s `"detect"`) resolve to a real option or fall back to the placeholder rather than mis-selecting the first option.
  *
  * @returns A `ChoiceRadioInputs` or `SelectInput` element bound to the schema.
@@ -108,8 +106,7 @@ export function NumberSchemaInput({ schema, value, ...props }) {
 export function ChoiceSchemaInput({ schema, value, ...props }) {
     const choice = requireSource(ChoiceSchema, schema);
     const string = choice.get(value);
-    const input = choice.input ?? (getKeys(choice.options).length <= 8 ? "radio" : "select");
-    if (input === "radio")
+    if (choice.input === "radio")
         return _jsx(ChoiceRadioInputs, { ...schema, value: string, ...props });
     return _jsx(SelectInput, { ...schema, value: string, ...props });
 }

package/ui/input/SchemaInput.md

@@ -17,8 +17,8 @@ The schema-to-input mapping:
 | `NumberSchema` | `<NumberInput>` (formatted on blur) |
 | `DateSchema` | `<DateInput>` |
 | `BooleanSchema` | `<CheckboxInput>` |
-| `ChoiceSchema` (`input: "radio"`, or ≤ 8 options) | `<ChoiceRadioInputs>` |
-| `ChoiceSchema` (`input: "select"`, or > 8 options) | `<SelectInput>` |
+| `ChoiceSchema` (`input: "radio"`, the default for ≤ 8 options) | `<ChoiceRadioInputs>` |
+| `ChoiceSchema` (`input: "select"`, the default for > 8 options) | `<SelectInput>` |
 | `ArraySchema` | `<ArrayInput>` |
 | `DictionarySchema` | `<DictionaryInput>` |
 | `DataSchema` | `<DataInput>` |

package/ui/input/SchemaInput.tsx

@@ -15,7 +15,6 @@ import { isArray } from "../../util/array.js";
 import { type Data, isData } from "../../util/data.js";
 import { isDictionary } from "../../util/dictionary.js";
 import { getNumber } from "../../util/number.js";
-import { getKeys } from "../../util/object.js";
 import { getSource, requireSource } from "../../util/source.js";
 import { getString } from "../../util/string.js";
 import type { ValidatorType } from "../../util/validate.js";
@@ -151,7 +150,6 @@ export interface ChoiceSchemaInputProps extends SchemaInputProps<ChoiceSchema<st
  * Show a choice input for a `ChoiceSchema` — radio inputs or a select.
  *
  * - The schema's `input` picks the control: `"radio"` for radio inputs, `"select"` for a select.
- * - When `input` is not set, it shows radio inputs for up to 8 options, otherwise a select.
  * - The value is normalised through the schema's `get()`, so invalid or sentinel values (e.g. a `CountrySchema`'s `"detect"`) resolve to a real option or fall back to the placeholder rather than mis-selecting the first option.
  *
  * @returns A `ChoiceRadioInputs` or `SelectInput` element bound to the schema.
@@ -162,8 +160,7 @@ export interface ChoiceSchemaInputProps extends SchemaInputProps<ChoiceSchema<st
 export function ChoiceSchemaInput({ schema, value, ...props }: ChoiceSchemaInputProps): ReactElement {
 	const choice = requireSource(ChoiceSchema, schema);
 	const string = choice.get(value);
-	const input = choice.input ?? (getKeys(choice.options).length <= 8 ? "radio" : "select");
-	if (input === "radio") return <ChoiceRadioInputs {...schema} value={string} {...props} />;
+	if (choice.input === "radio") return <ChoiceRadioInputs {...schema} value={string} {...props} />;
 	return <SelectInput {...schema} value={string} {...props} />;
 }