@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/docs/number-field.json

@@ -0,0 +1,668 @@
+{
+  "family": "number-field",
+  "ui": "number-field",
+  "binding": "angular",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Number input with steppers and formatting."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "variant": [
+      "outline",
+      "subtle",
+      "plain"
+    ],
+    "stepper": [
+      "stacked",
+      "split",
+      "none"
+    ],
+    "clamp": [
+      "blur",
+      "strict",
+      "none"
+    ],
+    "formatOn": [
+      "change",
+      "commit"
+    ]
+  },
+  "members": {
+    "numberField": {
+      "nativeElement": "input",
+      "defaults": {
+        "size": "md",
+        "variant": "outline",
+        "stepper": "stacked",
+        "step": 1,
+        "clamp": "blur",
+        "formatOn": "change",
+        "snapToStep": false,
+        "wheel": false
+      },
+      "capabilities": [
+        "value",
+        "appearance",
+        "size",
+        "content",
+        "disabled",
+        "invalid",
+        "required",
+        "readOnly",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "invalid",
+        "readonly"
+      ],
+      "parts": [
+        "root",
+        "input",
+        "start",
+        "end",
+        "scrub",
+        "stepper",
+        "decrement",
+        "increment"
+      ]
+    }
+  },
+  "docs": {
+    "numberField": {
+      "imports": {
+        "source": "import {\n  provideNumberFieldDefaults,\n  SlNumberField,\n  SlNumberFieldEnd,\n  SlNumberFieldInput,\n  SlNumberFieldScrub,\n  SlNumberFieldStart,\n} from '@slotted/angular/number-field';",
+        "selector": "[slNumberField]",
+        "exportAs": "slNumberField"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the element carrying slNumberField",
+          "required": true,
+          "purpose": "The frame. It carries data-ui=\"number-field\", data-size, data-variant and data-stepper, and data-disabled, data-invalid, data-readonly and data-scrubbing while they apply. It has no role: a spinbutton may hold only non-interactive children, so the two buttons are siblings of the input inside a box that announces nothing."
+        },
+        {
+          "part": "input",
+          "element": "input[slNumberFieldInput], as text with role=\"spinbutton\"",
+          "required": true,
+          "purpose": "The control. It holds the formatted text, the id, and aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext, and it is a ControlValueAccessor, so it binds to a reactive or template-driven form as it stands. It is type=\"text\" because type=\"number\" empties itself whenever the text is not a plain decimal number, so no grouping separator or currency symbol would survive it."
+        },
+        {
+          "part": "start",
+          "element": "any element carrying slNumberFieldStart",
+          "required": false,
+          "purpose": "Content before the value in the reading direction. It sits beside the number and is never selected, copied or parsed with it. A symbol that belongs inside the value comes from format instead."
+        },
+        {
+          "part": "end",
+          "element": "any element carrying slNumberFieldEnd",
+          "required": false,
+          "purpose": "Content after the value in the reading direction, such as a unit or a currency code."
+        },
+        {
+          "part": "scrub",
+          "element": "any element carrying slNumberFieldScrub, inside an adornment",
+          "required": false,
+          "purpose": "A mark that moves the value when it is dragged sideways: one step per sensitivity pixels towards the inline end, largeStep with Shift and smallStep with Alt. The mark and the frame carry data-scrubbing while it is dragged. It is hidden from assistive technology, because the arrow keys in the input make the same change."
+        },
+        {
+          "part": "stepper",
+          "element": "span, rendered by the frame",
+          "required": false,
+          "purpose": "The column that holds both buttons under stepper=\"stacked\", inset from the frame and drawn without a border of its own; each button takes the inset back as hit area. It is not rendered under split, where the buttons are direct children of the frame."
+        },
+        {
+          "part": "decrement",
+          "element": "button[type=button][tabindex=-1], rendered by the frame",
+          "required": false,
+          "purpose": "Steps down by step, by largeStep with Shift and by smallStep with Alt, and repeats while it is held. It is disabled at min, and it is out of the tab order because the arrow keys in the input make the same change."
+        },
+        {
+          "part": "increment",
+          "element": "button[type=button][tabindex=-1], rendered by the frame",
+          "required": false,
+          "purpose": "Steps up by the same amounts and is disabled at max. Both buttons carry a translatable accessible name and aria-controls pointing at the input."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "number | null",
+          "defaultValue": "—",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "Makes the value controlled for the life of the component. null is empty, and empty is not zero: a required amount left blank and an amount of zero are different values."
+        },
+        {
+          "name": "defaultValue",
+          "type": "number | null",
+          "defaultValue": "—",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "The value an uncontrolled number field starts from. It is read once, in ngOnInit, because Angular binds inputs after it creates the directives."
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "The smallest value. The decrement button is disabled at it, Home moves to it, and the snapToStep grid is counted from it."
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "The largest value. The increment button is disabled at it, and End moves to it."
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "defaultValue": "1",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "What the arrow keys and the two buttons add or subtract."
+        },
+        {
+          "name": "largeStep",
+          "type": "number",
+          "defaultValue": "step × 10",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "What Shift with an arrow, Page Up and Page Down add or subtract, so a wide range is crossed without holding a key."
+        },
+        {
+          "name": "smallStep",
+          "type": "number",
+          "defaultValue": "step ÷ 10",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "What Alt with an arrow adds or subtracts."
+        },
+        {
+          "name": "stepFrom",
+          "type": "number",
+          "defaultValue": "min, or 0",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "The value the first step produces when the number field is empty."
+        },
+        {
+          "name": "snapToStep",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "Steps to multiples of step counted from min, so with min 2 and step 3 the values are 2, 5, 8 and 11. A typed value moves to the nearest multiple when the number field commits."
+        },
+        {
+          "name": "clamp",
+          "type": "'blur' | 'strict' | 'none'",
+          "defaultValue": "blur",
+          "appliesTo": "input[slNumberFieldInput], provideNumberFieldDefaults",
+          "description": "What happens to a value outside min and max. blur returns it to the range when the number field commits, strict refuses the keystroke that would leave the range, and none keeps the value and sets aria-invalid and data-invalid while it is out of range."
+        },
+        {
+          "name": "format",
+          "type": "Intl.NumberFormatOptions",
+          "defaultValue": "—",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "How the value is written and read back. Currency, percent and unit are formats of one number, and precision is set with minimumFractionDigits and maximumFractionDigits. When the number field commits, the number is rounded to the precision the input shows."
+        },
+        {
+          "name": "formatOn",
+          "type": "'change' | 'commit'",
+          "defaultValue": "change",
+          "appliesTo": "input[slNumberFieldInput], provideNumberFieldDefaults",
+          "description": "When the text takes the format. change regroups it on every keystroke; commit keeps the typed text until blur, Enter, a stepper press or an arrow key. Under both, the number changes on every keystroke that parses."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "the locale of provideSlotted, then en-US",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "A BCP 47 tag. It sets the decimal separator, the grouping and the digits, for the text written and the text read back."
+        },
+        {
+          "name": "stepper",
+          "type": "'stacked' | 'split' | 'none'",
+          "defaultValue": "stacked",
+          "appliesTo": "[slNumberField], provideNumberFieldDefaults",
+          "description": "Where the two buttons sit. split places them at either end of the frame, and its targets are at least 24 CSS pixels in both directions; none removes them."
+        },
+        {
+          "name": "wheel",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "Lets the mouse wheel step the value while the input has focus and the pointer is over it. It is off by default, so scrolling a form never changes an amount."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "[slNumberField], provideNumberFieldDefaults",
+          "description": "The step of the control scale. When unset, the number field takes the size of its field, then of provideNumberFieldDefaults. Height, padding, type and glyphs come from the control scale the theme sets per density."
+        },
+        {
+          "name": "variant",
+          "type": "'outline' | 'subtle' | 'plain'",
+          "defaultValue": "outline",
+          "appliesTo": "[slNumberField], provideNumberFieldDefaults",
+          "description": "How much frame the number field draws. plain draws no border at rest and keeps the same box, for a dense table cell."
+        },
+        {
+          "name": "start",
+          "type": "slNumberFieldStart",
+          "defaultValue": "—",
+          "appliesTo": "any projected element",
+          "description": "Content before the value in the reading direction. It is never selected, copied or parsed with the number."
+        },
+        {
+          "name": "end",
+          "type": "slNumberFieldEnd",
+          "defaultValue": "—",
+          "appliesTo": "any projected element",
+          "description": "Content after the value in the reading direction."
+        },
+        {
+          "name": "sensitivity",
+          "type": "number",
+          "defaultValue": "2",
+          "appliesTo": "slNumberFieldScrub",
+          "description": "Pixels of horizontal drag per step. Use fewer pixels for a wide range and more for a fine one."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "Unset rather than false, so the number field follows the field around it. When set, it wins over the field and writes the native disabled, which removes the input from the tab order and from form submission. A disabled form control sets it too."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "Unset rather than false, so the number field follows the field around it. Writes the native readonly: the input stays focusable, selectable and submitted, and both buttons are disabled."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "Unset rather than false, so the number field follows the field around it. Writes aria-invalid on the input and data-invalid on the frame."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "The element’s own attribute, written only by you. Inside a required field, the input receives aria-required instead, because the native attribute turns on the browser’s constraint validation."
+        },
+        {
+          "name": "name / form",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "Read as static attributes and moved to a hidden input beside the visible one, which submits the raw number: 1480, not \"$1,480.00\"."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<NumberFieldMessages>",
+          "defaultValue": "—",
+          "appliesTo": "[slNumberField]",
+          "description": "Replaces words of the active language, key by key: increment and decrement are the accessible names of the two buttons."
+        }
+      ],
+      "composition": [
+        {
+          "name": "exportAs",
+          "type": "'slNumberField' / 'slNumberFieldInput'",
+          "defaultValue": "—",
+          "appliesTo": "both directives",
+          "description": "Hands the directive instance to the template. The input’s instance exposes inputElement, which has focus(), select() and setSelectionRange(), and increment() and decrement(), which move by one step within the bounds and report the reason programmatic."
+        },
+        {
+          "name": "ControlValueAccessor",
+          "type": "NG_VALUE_ACCESSOR",
+          "defaultValue": "—",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "Binds the input to a reactive or template-driven form, which receives the number rather than the formatted text. The directive provides no validator: min and max are reported through aria-invalid only under clamp=\"none\", and when an error is shown is the form’s decision."
+        },
+        {
+          "name": "ng-content",
+          "type": "[slNumberFieldStart], [slNumberFieldEnd], the input",
+          "defaultValue": "—",
+          "appliesTo": "[slNumberField]",
+          "description": "Projects your own elements into three slots, so a span, an icon or a kbd keeps its own semantics. The frame is a directive on your own element."
+        },
+        {
+          "name": "provideNumberFieldDefaults",
+          "type": "{ size, variant, stepper, formatOn, clamp }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "Sets size, variant, stepper, formatOn and clamp once for every number field under the injector. A number field that states a value keeps it. The locale comes from provideSlotted, so every amount in the application is written and read the same way."
+        },
+        {
+          "name": "HostAttributeToken",
+          "type": "id, name, form, inputmode, aria-describedby, aria-invalid, aria-required, readonly",
+          "defaultValue": "—",
+          "appliesTo": "input[slNumberFieldInput]",
+          "description": "Each is read before the host bindings run, so a static attribute you write is never overwritten."
+        }
+      ],
+      "events": [
+        {
+          "name": "(valueChange)",
+          "payload": "ChangeRequest<number | null>",
+          "when": "Before the value changes. value is the new number and previous the number it replaces. reason is keyboard for typing, an arrow, a page key, Home, End or Enter; pointer for a stepper press, a wheel turn or a scrub; blur for the commit that formats, rounds and clamps on blur; programmatic for increment() and decrement(). source is the originating event, and cancel() refuses the change before it is applied. There is no [(value)], because a two-way binding carries only the value, without the reason or cancel()."
+        },
+        {
+          "name": "ControlValueAccessor",
+          "payload": "writeValue, registerOnChange, registerOnTouched, setDisabledState",
+          "when": "Whenever a reactive or template-driven form reads or writes the input. The form receives the number, never the formatted text, and a disabled form control disables the input and both buttons."
+        },
+        {
+          "name": "the element’s own events",
+          "payload": "(input), (keydown), (blur), (focus)",
+          "when": "Whenever the input fires them. Your listener runs alongside the directive’s, and calling preventDefault() on a key stops the directive from acting on it."
+        }
+      ],
+      "accessibility": [
+        "SlNumberField follows the WAI-ARIA APG Spinbutton pattern: role=\"spinbutton\" on the input with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext, ArrowUp and ArrowDown to step, Home and End to reach the bounds, and Page Up and Page Down for the larger step.",
+        "aria-valuetext carries the formatted text, so a screen reader announces \"$1,480.00\" rather than 1480. When the number field is empty, neither aria-valuenow nor aria-valuetext is set: no value is not the value zero.",
+        "The frame has no role. WAI-ARIA requires the children of a spinbutton to be non-interactive, so the two buttons are siblings of the input inside a box that announces nothing.",
+        "The buttons are out of the tab order, as the APG pattern recommends, and stay in the accessibility tree with translatable names and aria-controls pointing at the input. A button at a bound is disabled, so its name is still announced and its appearance shows why it does nothing.",
+        "Inside a required field the input receives aria-required, never the native required, which would turn on the browser’s constraint validation. disabled and readonly are the native attributes.",
+        "The input is type=\"text\", and its inputmode comes from the inputs: numeric for a whole number at or above zero, decimal when the format allows a fraction, and text when min allows a negative, because neither numeric keypad offers a minus sign on every platform.",
+        "The mouse wheel is not bound unless wheel is set, and Escape is not bound at all, so scrolling a form never changes an amount."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-lg",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-lg",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-inner-size-lg",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-invalid-edge-width",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-radius",
+    "--slotted-control-shadow",
+    "--slotted-control-shadow-focus-geometry",
+    "--slotted-control-surface",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-background",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-number-field-action-size",
+    "--slotted-number-field-adornment-color",
+    "--slotted-number-field-background",
+    "--slotted-number-field-border-color",
+    "--slotted-number-field-color",
+    "--slotted-number-field-disabled-background",
+    "--slotted-number-field-disabled-border-color",
+    "--slotted-number-field-disabled-color",
+    "--slotted-number-field-hover-border-color",
+    "--slotted-number-field-icon-size-min",
+    "--slotted-number-field-invalid-border-color",
+    "--slotted-number-field-invalid-edge-width",
+    "--slotted-number-field-invalid-focus-ring-color",
+    "--slotted-number-field-placeholder-color",
+    "--slotted-number-field-plain-hover-background",
+    "--slotted-number-field-radius",
+    "--slotted-number-field-readonly-background",
+    "--slotted-number-field-readonly-border-color",
+    "--slotted-number-field-scrub-active-color",
+    "--slotted-number-field-shadow",
+    "--slotted-number-field-stepper-active-background",
+    "--slotted-number-field-stepper-color",
+    "--slotted-number-field-stepper-disabled-background",
+    "--slotted-number-field-stepper-disabled-color",
+    "--slotted-number-field-stepper-hover-background",
+    "--slotted-number-field-stepper-size",
+    "--slotted-number-field-subtle-background",
+    "--slotted-number-field-subtle-border-color",
+    "--slotted-number-field-subtle-hover-background",
+    "--slotted-radius-none",
+    "--slotted-radius-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One control with every axis on it, driven by the controls below the canvas. Type a number, then hold the increment button: it steps once, waits, and then repeats.",
+      "language": "html",
+      "source": "<div slField>\n  <label slFieldLabel>Quantidade</label>\n  <div slNumberField>\n    <input slNumberFieldInput defaultValue=\"3\" min=\"1\" max=\"99\" />\n  </div>\n  <span slFieldDescription>Máximo de 99 unidades por pedido.</span>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "The step the control sits at",
+      "note": "Three steps, and inside a field the control takes the field’s rather than its own: a small field holding a medium control is a field and a control disagreeing about one row.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-sizes',\n  imports: [SlNumberField, SlNumberFieldInput, SlStack],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slNumberField size=\"sm\">\n        <input slNumberFieldInput aria-label=\"Units per case\" defaultValue=\"24\" min=\"1\" />\n      </div>\n      <div slNumberField size=\"md\">\n        <input slNumberFieldInput aria-label=\"Cases ordered\" defaultValue=\"12\" min=\"1\" />\n      </div>\n      <div slNumberField size=\"lg\">\n        <input slNumberFieldInput aria-label=\"Pallets ordered\" defaultValue=\"2\" min=\"1\" />\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldSizes {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "variants",
+      "title": "How much frame the control shows",
+      "note": "outline takes the ground it is placed on, subtle sinks into the page, and plain shows nothing until the pointer or the caret arrives — which is what a dense table cell of amounts needs.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-variants',\n  imports: [SlField, SlFieldLabel, SlNumberField, SlNumberFieldInput, SlStack],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Unit price</label>\n        <div slNumberField variant=\"outline\">\n          <input\n            slNumberFieldInput\n            defaultValue=\"18\"\n            min=\"0\"\n            [format]=\"{ currency: 'USD', style: 'currency' }\"\n          />\n        </div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Discount</label>\n        <div slNumberField variant=\"subtle\">\n          <input\n            slNumberFieldInput\n            defaultValue=\"0.05\"\n            min=\"0\"\n            max=\"1\"\n            step=\"0.01\"\n            [format]=\"{ style: 'percent' }\"\n          />\n        </div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Freight</label>\n        <div slNumberField variant=\"plain\" stepper=\"none\">\n          <input\n            slNumberFieldInput\n            defaultValue=\"32.38\"\n            min=\"0\"\n            [format]=\"{ currency: 'USD', style: 'currency' }\"\n          />\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldVariants {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "stepper",
+      "title": "Where the two buttons sit, and whether they sit at all",
+      "note": "stacked is one column at the inline end; split puts decrement and increment at either end of the frame with the value centred between them, which is the only arrangement whose targets clear 24 pixels in both axes.",
+      "language": "html",
+      "source": "<div slNumberField stepper=\"stacked\"><input slNumberFieldInput defaultValue=\"12\" /></div>\n\n<!-- The arrangement a thumb can hit, and the one a quantity wants. -->\n<div slNumberField stepper=\"split\">\n  <input slNumberFieldInput defaultValue=\"3\" min=\"1\" max=\"99\" />\n</div>\n\n<!-- Typed and never spun, which is what a dense table asks for. -->\n<div slNumberField stepper=\"none\"><input slNumberFieldInput defaultValue=\"1480\" /></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "range",
+      "title": "The bounds, the step, and what happens at the edge",
+      "note": "The stepper that would leave the range is disabled rather than silently inert. Type 400 into the first control and tab away: clamp=\"blur\" brings it back, while clamp=\"none\" leaves it where you put it and says so.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-range',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlNumberField, SlNumberFieldInput, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Pallets on the trailer</label>\n        <div slNumberField>\n          <input slNumberFieldInput defaultValue=\"26\" min=\"0\" max=\"26\" />\n        </div>\n        <span slFieldDescription>A 53-foot trailer holds 26 pallets.</span>\n      </div>\n      <div slField>\n        <label slFieldLabel>Bottles of Chartreuse verte</label>\n        <div slNumberField>\n          <input slNumberFieldInput defaultValue=\"12\" min=\"6\" step=\"6\" snapToStep />\n        </div>\n        <span slFieldDescription>Sold in cases of 6. Type 20 and leave the field.</span>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldRange {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "format",
+      "title": "Currency, percent and unit are formattings, not types",
+      "note": "One numeric value, written by Intl.NumberFormat. The symbol inside the value comes from format and is part of what a reader copies; a symbol beside the value is an adornment instead, and the two sit side by side below.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-format',\n  imports: [SlField, SlFieldLabel, SlNumberField, SlNumberFieldInput, SlStack],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Credit limit</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            defaultValue=\"25000\"\n            min=\"0\"\n            step=\"500\"\n            [format]=\"{ currency: 'USD', style: 'currency' }\"\n          />\n        </div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Sales tax</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            defaultValue=\"0.0825\"\n            min=\"0\"\n            max=\"1\"\n            step=\"0.0025\"\n            [format]=\"{ maximumFractionDigits: 2, style: 'percent' }\"\n          />\n        </div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Pallet volume</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            defaultValue=\"1.8\"\n            min=\"0\"\n            step=\"0.1\"\n            [format]=\"{ style: 'unit', unit: 'liter', unitDisplay: 'long' }\"\n          />\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldFormat {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "formatOn",
+      "title": "When the grouping appears",
+      "note": "The two amounts below are the same under both settings; the axis decides only what the field shows between two keystrokes. The number itself moves on every keystroke that parses either way.",
+      "language": "html",
+      "source": "<!-- The default. The caret stays on the character it was on, because it is\n     counted in the reader's own characters rather than in string indices. -->\n<div slNumberField><input slNumberFieldInput locale=\"pt-BR\" /></div>\n\n<!-- The reader's own text until blur, Enter, a stepper press or a key step.\n     For an amount that is pasted and audited rather than typed. -->\n<div slNumberField>\n  <input slNumberFieldInput locale=\"pt-BR\" formatOn=\"commit\" />\n</div>\n\n<!-- Rounding and padding belong to the commit under both: 1,50 keeps its\n     nought while it is being typed, and 1, keeps its separator. -->\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "locale",
+      "title": "The separator, the grouping and the numerals",
+      "note": "Paste “R$ 1.480,00” into the Brazilian control and “١٬٤٨٠” into the Arabic one: both parse, because the parser is built from the same Intl parts the formatter writes with.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-locale',\n  imports: [SlField, SlFieldLabel, SlNumberField, SlNumberFieldInput, SlStack],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Invoice total, United States</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            defaultValue=\"14800.5\"\n            locale=\"en-US\"\n            [format]=\"{ currency: 'USD', style: 'currency' }\"\n          />\n        </div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Invoice total, Germany</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            defaultValue=\"14800.5\"\n            locale=\"de-DE\"\n            [format]=\"{ currency: 'EUR', style: 'currency' }\"\n          />\n        </div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Invoice total, Egypt</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            defaultValue=\"14800.5\"\n            locale=\"ar-EG\"\n            [format]=\"{ currency: 'EGP', style: 'currency' }\"\n          />\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldLocale {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "adornments",
+      "title": "What sits beside the number",
+      "note": "start and end name the reading direction rather than a side, and neither is ever squeezed: the value gives up width first. Switch the toolbar to rtl and the mark stays before the amount.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlNumberField,\n  SlNumberFieldEnd,\n  SlNumberFieldInput,\n  SlNumberFieldStart,\n} from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-adornments',\n  imports: [\n    SlField,\n    SlFieldLabel,\n    SlNumberField,\n    SlNumberFieldEnd,\n    SlNumberFieldInput,\n    SlNumberFieldStart,\n    SlStack,\n  ],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Purchase price</label>\n        <div slNumberField>\n          <span slNumberFieldStart>$</span>\n          <input\n            slNumberFieldInput\n            defaultValue=\"1480\"\n            min=\"0\"\n            [format]=\"{ minimumFractionDigits: 2 }\"\n          />\n          <span slNumberFieldEnd>USD</span>\n        </div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Lead time</label>\n        <div slNumberField>\n          <input slNumberFieldInput defaultValue=\"14\" min=\"0\" max=\"120\" />\n          <span slNumberFieldEnd>days</span>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldAdornments {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "scrub",
+      "title": "Drag the mark to move the number",
+      "note": "The design tools’ gesture. Press the mark and drag sideways: two pixels per step, Shift for the large step, Alt for the small one. A right-to-left document steps up towards the left, the inline end.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlGrid } from '@slotted/angular/grid';\nimport {\n  SlNumberField,\n  SlNumberFieldEnd,\n  SlNumberFieldInput,\n  SlNumberFieldScrub,\n  SlNumberFieldStart,\n} from '@slotted/angular/number-field';\n\n@Component({\n  selector: 'app-number-field-scrub',\n  imports: [\n    SlField,\n    SlFieldLabel,\n    SlGrid,\n    SlNumberField,\n    SlNumberFieldEnd,\n    SlNumberFieldInput,\n    SlNumberFieldScrub,\n    SlNumberFieldStart,\n  ],\n  template: `\n    <div slGrid [columns]=\"2\" [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Label width</label>\n        <div slNumberField>\n          <span slNumberFieldStart><span slNumberFieldScrub>W</span></span>\n          <input slNumberFieldInput defaultValue=\"100\" min=\"20\" max=\"210\" />\n          <span slNumberFieldEnd>mm</span>\n        </div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Label height</label>\n        <div slNumberField>\n          <span slNumberFieldStart><span slNumberFieldScrub [sensitivity]=\"4\">H</span></span>\n          <input slNumberFieldInput defaultValue=\"150\" min=\"20\" max=\"297\" />\n          <span slNumberFieldEnd>mm</span>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldScrubExample {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "states",
+      "title": "The states the frame paints",
+      "note": "Read-only keeps full-strength ink and softens its edge, because the value is real and still submitted; disabled is muted to a measured colour rather than faded, and both withdraw the steppers by disabling them rather than removing them.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-states',\n  imports: [\n    SlField,\n    SlFieldDescription,\n    SlFieldError,\n    SlFieldLabel,\n    SlNumberField,\n    SlNumberFieldInput,\n    SlStack,\n  ],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField invalid>\n        <label slFieldLabel>Quantity to ship</label>\n        <div slNumberField><input slNumberFieldInput defaultValue=\"120\" min=\"1\" /></div>\n        <span slFieldError>Only 39 units of Chai are in stock.</span>\n      </div>\n      <div slField readOnly>\n        <label slFieldLabel>Units on order</label>\n        <div slNumberField><input slNumberFieldInput defaultValue=\"40\" /></div>\n        <span slFieldDescription>Counted from open purchase orders.</span>\n      </div>\n      <div slField disabled>\n        <label slFieldLabel>Units reserved</label>\n        <div slNumberField><input slNumberFieldInput defaultValue=\"12\" /></div>\n        <span slFieldDescription>Released when the order ships.</span>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldStates {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "content",
+      "title": "Numbers the family did not choose",
+      "note": "A value longer than the control ellipsises rather than clipping mid-glyph; a negative keeps its sign in front of the digits in both directions; and at 240 pixels the value surrenders width while the steppers keep their target size.",
+      "language": "html",
+      "source": "<div slNumberField>\n  <input slNumberFieldInput defaultValue=\"1480320559774.25\" locale=\"pt-BR\" />\n</div>\n\n<!-- The digits are tabular, so nothing shifts as they are typed over,\n     and the minus stays in front of the amount in an Arabic document. -->\n<div slNumberField>\n  <span slNumberFieldStart>R$</span>\n  <input slNumberFieldInput defaultValue=\"-1480\" locale=\"pt-BR\" />\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Setting it once, reaching past it, and putting it in a form",
+      "note": "ControlValueAccessor is the two-way binding the ecosystem expects; exportAs hands the template the directive, which carries increment(), decrement() and the native element; name submits the raw number through a hidden input.",
+      "language": "html",
+      "source": "<div slNumberField>\n  <input slNumberFieldInput [formControl]=\"quantity\" min=\"1\" max=\"99\" />\n</div>\n\n<div slNumberField>\n  <input slNumberFieldInput #campo=\"slNumberFieldInput\" defaultValue=\"3\" />\n</div>\n<button type=\"button\" (click)=\"campo.increment()\">Mais um</button>\n\n<!-- The hidden input carries 1480, never \"R$ 1.480,00\". -->\n<div slNumberField>\n  <input\n    slNumberFieldInput\n    name=\"amount\"\n    defaultValue=\"1480\"\n    [format]=\"{ style: 'currency', currency: 'BRL' }\"\n  />\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "What the keyboard does, and what it deliberately does not",
+      "note": "Arrows step, Shift and the page keys move by the large amount, Alt by the small one, Home and End reach the bounds. Tab never lands on a stepper: twenty amounts in a form would be forty extra stops.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-keyboard',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlNumberField, SlNumberFieldInput, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Shipping weight</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            defaultValue=\"12.5\"\n            min=\"0\"\n            step=\"1\"\n            largeStep=\"10\"\n            smallStep=\"0.1\"\n            [format]=\"{ maximumFractionDigits: 1, style: 'unit', unit: 'kilogram' }\"\n          />\n        </div>\n        <span slFieldDescription>Arrows: 1 kg. Shift or Page keys: 10 kg. Alt: 0.1 kg.</span>\n      </div>\n      <div slField>\n        <label slFieldLabel>Safety stock</label>\n        <div slNumberField>\n          <input slNumberFieldInput defaultValue=\"15\" min=\"0\" wheel />\n        </div>\n        <span slFieldDescription>With the field focused, the mouse wheel steps the value.</span>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldKeyboard {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlNumberField, SlNumberFieldEnd, SlNumberFieldInput } from '@slotted/angular/number-field';\n\n@Component({\n  selector: 'app-number-field-basic',\n  imports: [\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n    SlNumberField,\n    SlNumberFieldEnd,\n    SlNumberFieldInput,\n  ],\n  template: `\n    <div slField required>\n      <label slFieldLabel>Reorder point</label>\n      <div slNumberField>\n        <input slNumberFieldInput defaultValue=\"25\" min=\"0\" max=\"500\" step=\"5\" />\n        <span slNumberFieldEnd>units</span>\n      </div>\n      <span slFieldDescription>Chai is reordered when stock falls to this level.</span>\n    </div>\n  `,\n})\nexport class NumberFieldBasic {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "clamp",
+      "title": "clamp.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlNumberField, SlNumberFieldEnd, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-clamp',\n  imports: [\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n    SlNumberField,\n    SlNumberFieldEnd,\n    SlNumberFieldInput,\n    SlStack,\n  ],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Line discount</label>\n        <div slNumberField>\n          <input slNumberFieldInput clamp=\"blur\" defaultValue=\"10\" min=\"0\" max=\"25\" />\n          <span slNumberFieldEnd>%</span>\n        </div>\n        <span slFieldDescription>Type 40 and leave the field: it returns to 25.</span>\n      </div>\n      <div slField>\n        <label slFieldLabel>Order discount</label>\n        <div slNumberField>\n          <input slNumberFieldInput clamp=\"strict\" defaultValue=\"10\" min=\"0\" max=\"25\" />\n          <span slNumberFieldEnd>%</span>\n        </div>\n        <span slFieldDescription>A keystroke that would pass 25 is refused.</span>\n      </div>\n      <div slField>\n        <label slFieldLabel>Contract discount</label>\n        <div slNumberField>\n          <input slNumberFieldInput clamp=\"none\" defaultValue=\"10\" min=\"0\" max=\"25\" />\n          <span slNumberFieldEnd>%</span>\n        </div>\n        <span slFieldDescription>40 stays, and the field is marked invalid.</span>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldClamp {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\n@Component({\n  selector: 'app-number-field-controlled',\n  imports: [SlButton, SlField, SlFieldLabel, SlInline, SlNumberField, SlNumberFieldInput, SlStack],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Credit limit for Ernst Handel</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            min=\"0\"\n            step=\"500\"\n            stepFrom=\"5000\"\n            [format]=\"{ currency: 'USD', style: 'currency' }\"\n            [value]=\"limit()\"\n            (valueChange)=\"limit.set($event.value)\"\n          />\n        </div>\n      </div>\n      <div slInline [gap]=\"3\" justify=\"between\">\n        <span>{{ summary() }}</span>\n        <button slButton variant=\"outline\" [disabled]=\"limit() === null\" (click)=\"limit.set(null)\">\n          Remove limit\n        </button>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldControlled {\n  readonly limit = signal<number | null>(5000);\n  readonly summary = computed(() => {\n    const limit = this.limit();\n    return limit === null ? 'No credit limit' : `Orders up to ${USD.format(limit)}`;\n  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "decimals",
+      "title": "decimals.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-decimals',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlNumberField, SlNumberFieldInput, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Exchange rate, EUR to USD</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            defaultValue=\"1.0842\"\n            min=\"0\"\n            step=\"0.0001\"\n            [format]=\"{ maximumFractionDigits: 4, minimumFractionDigits: 4 }\"\n          />\n        </div>\n        <span slFieldDescription>Four decimals: 1.1 becomes 1.1000 on blur.</span>\n      </div>\n      <div slField>\n        <label slFieldLabel>Cartons</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            defaultValue=\"40\"\n            min=\"0\"\n            [format]=\"{ maximumFractionDigits: 0 }\"\n          />\n        </div>\n        <span slFieldDescription>Whole cartons: the decimal separator is refused.</span>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldDecimals {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlGrid } from '@slotted/angular/grid';\nimport {\n  provideNumberFieldDefaults,\n  SlNumberField,\n  SlNumberFieldInput,\n} from '@slotted/angular/number-field';\n\n@Component({\n  selector: 'app-number-field-defaults',\n  imports: [SlField, SlFieldLabel, SlGrid, SlNumberField, SlNumberFieldInput],\n  providers: [provideNumberFieldDefaults({ size: 'sm', stepper: 'split', variant: 'subtle' })],\n  template: `\n    <div slGrid [gap]=\"3\" minItemWidth=\"xs\">\n      <div slField>\n        <label slFieldLabel>Cases</label>\n        <div slNumberField><input slNumberFieldInput defaultValue=\"6\" min=\"0\" /></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Loose units</label>\n        <div slNumberField><input slNumberFieldInput defaultValue=\"11\" min=\"0\" /></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Pallets</label>\n        <div slNumberField stepper=\"stacked\">\n          <input slNumberFieldInput defaultValue=\"1\" min=\"0\" />\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldDefaults {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "format-on",
+      "title": "format-on.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-format-on',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlNumberField, SlNumberFieldInput, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Annual purchase budget</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            formatOn=\"change\"\n            min=\"0\"\n            [format]=\"{ currency: 'USD', style: 'currency' }\"\n          />\n        </div>\n        <span slFieldDescription>Type 1250000: the grouping appears with each digit.</span>\n      </div>\n      <div slField>\n        <label slFieldLabel>Amount from bank statement</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            formatOn=\"commit\"\n            min=\"0\"\n            [format]=\"{ currency: 'USD', style: 'currency' }\"\n          />\n        </div>\n        <span slFieldDescription>Your text stays as typed until Enter or blur.</span>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldFormatOn {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "handle",
+      "title": "handle.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-handle',\n  imports: [SlButton, SlField, SlFieldLabel, SlInline, SlNumberField, SlNumberFieldInput, SlStack],\n  template: `\n    <div slStack [gap]=\"3\">\n      <div slField>\n        <label slFieldLabel>Cases of Chang</label>\n        <div slNumberField>\n          <input slNumberFieldInput #cases=\"slNumberFieldInput\" defaultValue=\"4\" min=\"0\" max=\"48\" />\n        </div>\n      </div>\n      <div slInline [gap]=\"2\">\n        <button slButton variant=\"outline\" (click)=\"cases.decrement()\">Remove a case</button>\n        <button slButton variant=\"outline\" (click)=\"cases.increment()\">Add a case</button>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldHandleExample {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "order-line",
+      "title": "order-line.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlGrid } from '@slotted/angular/grid';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst LINES = [\n  { id: 'cabrales', product: 'Queso Cabrales', price: 14, stock: 22 },\n  { id: 'hokkien', product: 'Singaporean Hokkien Fried Mee', price: 9.8, stock: 26 },\n  { id: 'mozzarella', product: 'Mozzarella di Giovanni', price: 34.8, stock: 14 },\n];\n\n@Component({\n  selector: 'app-number-field-order-line',\n  imports: [SlGrid, SlInline, SlNumberField, SlNumberFieldInput, SlStack, SlText],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slStack [gap]=\"4\">\n        @for (line of lines; track line.id) {\n          <div slGrid [columns]=\"3\" [gap]=\"4\" minItemWidth=\"xs\">\n            <div slStack [gap]=\"1\">\n              <span slText weight=\"medium\">{{ line.product }}</span>\n              <span slText size=\"sm\" tone=\"muted\"\n                >{{ usd(line.price) }} each · {{ line.stock }} in stock</span\n              >\n            </div>\n            <div slStack justify=\"center\">\n              <div slNumberField size=\"sm\" stepper=\"split\">\n                <input\n                  slNumberFieldInput\n                  min=\"0\"\n                  [attr.aria-label]=\"'Quantity of ' + line.product\"\n                  [max]=\"line.stock\"\n                  [value]=\"quantities()[line.id] ?? null\"\n                  (valueChange)=\"set(line.id, $event.value)\"\n                />\n              </div>\n            </div>\n            <div slStack justify=\"center\">\n              <span slText align=\"end\" numeric=\"tabular\">{{\n                usd(line.price * (quantities()[line.id] ?? 0))\n              }}</span>\n            </div>\n          </div>\n        }\n      </div>\n      <div slInline [gap]=\"4\" justify=\"between\">\n        <span slText weight=\"semibold\">Order total</span>\n        <span slText numeric=\"tabular\" weight=\"semibold\">{{ usd(total()) }}</span>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldOrderLine {\n  readonly lines = LINES;\n  readonly quantities = signal<Record<string, number | null>>({\n    cabrales: 12,\n    hokkien: 10,\n    mozzarella: 5,\n  });\n  readonly total = computed(() =>\n    LINES.reduce((sum, line) => sum + line.price * (this.quantities()[line.id] ?? 0), 0),\n  );\n\n  usd(amount: number): string {\n    return USD.format(amount);\n  }\n\n  set(id: string, value: number | null): void {\n    this.quantities.update((current) => ({ ...current, [id]: value }));\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "price-editor",
+      "title": "price-editor.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlGrid } from '@slotted/angular/grid';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\n\n@Component({\n  selector: 'app-number-field-price-editor',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlGrid, SlNumberField, SlNumberFieldInput],\n  template: `\n    <div slGrid [gap]=\"4\" minItemWidth=\"xs\">\n      <div slField required>\n        <label slFieldLabel>Unit cost</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            min=\"0\"\n            step=\"0.5\"\n            [format]=\"currency\"\n            [value]=\"cost()\"\n            (valueChange)=\"cost.set($event.value)\"\n          />\n        </div>\n      </div>\n      <div slField required>\n        <label slFieldLabel>Markup</label>\n        <div slNumberField>\n          <input\n            slNumberFieldInput\n            min=\"0\"\n            max=\"3\"\n            step=\"0.01\"\n            largeStep=\"0.1\"\n            [format]=\"{ style: 'percent' }\"\n            [value]=\"markup()\"\n            (valueChange)=\"markup.set($event.value)\"\n          />\n        </div>\n      </div>\n      <div slField readOnly>\n        <label slFieldLabel>List price</label>\n        <div slNumberField stepper=\"none\">\n          <input slNumberFieldInput [format]=\"currency\" [value]=\"price()\" />\n        </div>\n        <span slFieldDescription>Unit cost plus markup.</span>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldPriceEditor {\n  readonly currency: Intl.NumberFormatOptions = { currency: 'USD', style: 'currency' };\n  readonly cost = signal<number | null>(175);\n  readonly markup = signal<number | null>(0.5);\n  readonly price = computed(() => {\n    const cost = this.cost();\n    const markup = this.markup();\n    return cost === null || markup === null ? null : Math.round(cost * (1 + markup) * 100) / 100;\n  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "steppers",
+      "title": "steppers.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-steppers',\n  imports: [SlField, SlFieldLabel, SlNumberField, SlNumberFieldInput, SlStack],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Reorder quantity</label>\n        <div slNumberField stepper=\"stacked\">\n          <input slNumberFieldInput defaultValue=\"40\" min=\"0\" step=\"10\" />\n        </div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Quantity</label>\n        <div slNumberField stepper=\"split\">\n          <input slNumberFieldInput defaultValue=\"3\" min=\"1\" max=\"99\" />\n        </div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Units in stock</label>\n        <div slNumberField stepper=\"none\">\n          <input slNumberFieldInput defaultValue=\"39\" min=\"0\" />\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class NumberFieldSteppers {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "validation",
+      "title": "validation.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlField, SlFieldDescription, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-number-field-validation',\n  imports: [\n    ReactiveFormsModule,\n    SlButton,\n    SlField,\n    SlFieldDescription,\n    SlFieldError,\n    SlFieldLabel,\n    SlInline,\n    SlNumberField,\n    SlNumberFieldInput,\n    SlStack,\n  ],\n  template: `\n    <form novalidate (submit)=\"submit($event)\">\n      <div slStack [gap]=\"4\">\n        <div slField required [invalid]=\"error() !== '' ? true : undefined\">\n          <label slFieldLabel>Units of Chai to ship</label>\n          <div slNumberField>\n            <input\n              slNumberFieldInput\n              name=\"quantity\"\n              min=\"1\"\n              max=\"39\"\n              [formControl]=\"quantity\"\n              (valueChange)=\"sent.set('')\"\n            />\n          </div>\n          <span slFieldDescription>39 units in stock.</span>\n          <span slFieldError live=\"polite\" reserve>{{ error() }}</span>\n        </div>\n        <div slInline [gap]=\"3\">\n          <button slButton type=\"submit\">Create shipment</button>\n          @if (sent() !== '') {\n            <span role=\"status\">{{ sent() }}</span>\n          }\n        </div>\n      </div>\n    </form>\n  `,\n})\nexport class NumberFieldValidation {\n  readonly quantity = new FormControl<number | null>(null, Validators.required);\n  readonly value = toSignal(this.quantity.valueChanges, { initialValue: this.quantity.value });\n  readonly submitted = signal(false);\n  readonly sent = signal('');\n  readonly error = computed(() =>\n    this.submitted() && this.value() === null ? 'Enter how many units to ship.' : '',\n  );\n\n  submit(event: Event): void {\n    event.preventDefault();\n    this.submitted.set(true);\n    const data = new FormData(event.target as HTMLFormElement);\n    this.sent.set(this.quantity.valid ? `Sent quantity=${String(data.get('quantity'))}` : '');\n  }\n}\n",
+      "verdict": "example"
+    }
+  ]
+}