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

package/docs/rating.json

@@ -0,0 +1,1053 @@
+{
+  "family": "rating",
+  "ui": "rating",
+  "binding": "angular",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Star rating input, display and summary."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "tone": [
+      "accent",
+      "success",
+      "warning",
+      "danger"
+    ],
+    "variant": [
+      "full",
+      "compact",
+      "histogram"
+    ],
+    "summaryVariant": [
+      "bars",
+      "spectrum"
+    ]
+  },
+  "members": {
+    "rating": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "tone": "warning",
+        "max": 5,
+        "step": 1,
+        "clearable": true
+      },
+      "capabilities": [
+        "value",
+        "appearance",
+        "size",
+        "disabled",
+        "invalid",
+        "required",
+        "readOnly",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "readonly",
+        "invalid",
+        "checked"
+      ],
+      "parts": [
+        "root",
+        "symbols",
+        "item",
+        "input",
+        "symbol",
+        "fill",
+        "value"
+      ]
+    },
+    "ratingDisplay": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "tone": "warning",
+        "max": 5,
+        "variant": "full"
+      },
+      "capabilities": [
+        "measurement",
+        "appearance",
+        "size",
+        "content"
+      ],
+      "states": [
+        "default"
+      ],
+      "parts": [
+        "root",
+        "symbols",
+        "item",
+        "symbol",
+        "fill",
+        "value",
+        "histogram",
+        "bar",
+        "count"
+      ]
+    },
+    "ratingSummary": {
+      "nativeElement": "section",
+      "defaults": {
+        "size": "md",
+        "tone": "warning",
+        "max": 5,
+        "filterable": false,
+        "variant": "bars"
+      },
+      "capabilities": [
+        "measurement",
+        "appearance",
+        "size",
+        "content",
+        "selection"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "pressed"
+      ],
+      "parts": [
+        "root",
+        "aggregate",
+        "value",
+        "scale",
+        "insight",
+        "count",
+        "distribution",
+        "level",
+        "level-label",
+        "track",
+        "indicator",
+        "level-count",
+        "plot",
+        "field",
+        "columns",
+        "column",
+        "bar",
+        "interval",
+        "mean",
+        "mean-label",
+        "axis",
+        "tick",
+        "tick-label",
+        "tick-share",
+        "sentiment",
+        "bucket",
+        "swatch"
+      ]
+    }
+  },
+  "docs": {
+    "rating": {
+      "imports": {
+        "source": "import {\n  provideRating,\n  SlRating,\n  SlRatingCaption,\n  SlRatingDisplay,\n  SlRatingSummary,\n  SlRatingSymbol,\n} from '@slotted/angular/rating';",
+        "selector": "div[slRating]",
+        "exportAs": "slRating"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the div carrying slRating",
+          "required": true,
+          "purpose": "The radio group. Carries data-ui=\"rating\", role=\"radiogroup\" (withdrawn inside a field group), data-size, data-tone, data-max, data-step when the step is a half, data-disabled, data-readonly, data-invalid and data-dragging, and the aria-invalid, aria-readonly and aria-required the platform has no attribute for. The value accessor and the validator are on this element."
+        },
+        {
+          "part": "symbols",
+          "element": "div",
+          "required": true,
+          "purpose": "The row of symbols. It never wraps: ten symbols in a narrow column shrink, each item staying square, rather than breaking onto a second line."
+        },
+        {
+          "part": "item",
+          "element": "span",
+          "required": true,
+          "purpose": "One symbol’s square. On the input member it holds the radios and carries data-checked when one of them is checked; on the display it carries --slotted-rating-fill."
+        },
+        {
+          "part": "input",
+          "element": "input type=\"radio\", one per step",
+          "required": true,
+          "purpose": "The control. Native, sharing one name, named \"3 de 5\" by aria-label. With step 0.5 each item holds two, the half first with data-half, stacked above the whole one over the inline-start half of the symbol."
+        },
+        {
+          "part": "symbol",
+          "element": "span, holding slIcon and the star glyph",
+          "required": true,
+          "purpose": "The unlit shape, painted in the secondary surface with the rating edge around it. It takes no pointer events, so the radio beneath it is the target."
+        },
+        {
+          "part": "fill",
+          "element": "span, holding the same glyph",
+          "required": true,
+          "purpose": "The lit shape over the unlit one, clipped to the lit share of the symbol: the checked radio or the hovered one on the input member, --slotted-rating-fill on the display."
+        },
+        {
+          "part": "value",
+          "element": "span aria-hidden=\"true\"",
+          "required": false,
+          "purpose": "The caption beside the row: projected content marked slRatingCaption, or an ng-template slRatingCaption rendered with the value and the preview. Hidden from assistive technology, because the checked radio already says the value."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "model<number | null>",
+          "defaultValue": "null",
+          "appliesTo": "SlRating",
+          "description": "The rating, null for none. Put on the grid of the scale when drawn: 7 of 5 is 5, 3,2 on whole steps is 4, NaN is none"
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "defaultValue": "5",
+          "appliesTo": "SlRating, provideRating",
+          "description": "How many symbols the row has"
+        },
+        {
+          "name": "step",
+          "type": "1 | 0.5",
+          "defaultValue": "1",
+          "appliesTo": "SlRating",
+          "description": "The smallest move. A half adds a second radio per symbol; smaller fractions are refused because a third of a star is below the minimum target"
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "SlRating, provideRating",
+          "description": "Whether a press on the checked radio, Backspace or Delete empty the value, with the reason clear"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "SlRating, provideRating",
+          "description": "The step of the symbols and the caption. Read from the field or field group first"
+        },
+        {
+          "name": "tone",
+          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "warning",
+          "appliesTo": "SlRating, provideRating",
+          "description": "The colour of a lit symbol. secondary is outside the axis: its solid step is a ground, and a lit star in it reads as unlit"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "generated",
+          "appliesTo": "SlRating",
+          "description": "The submission name every radio shares. Generated when none is written, because an unnamed set of radios is not a group"
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlRating",
+          "description": "The form the radios belong to when the rating sits outside it"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "SlRating",
+          "description": "Native on every radio: the row leaves the tab order. A disabled form control sets it too"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "SlRating",
+          "description": "The platform has no read-only radio, so the press and the keys are refused and aria-readonly is announced; every radio stays focusable"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "SlRating",
+          "description": "Writes aria-invalid and data-invalid, which reddens the edge of every symbol"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "SlRating",
+          "description": "Writes aria-required and makes the Validator demand a value. Never the native attribute, which would engage browser constraint validation"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<RatingMessages>",
+          "defaultValue": "—",
+          "appliesTo": "SlRating",
+          "description": "Words laid over the language in force, key by key. itemLabel names each radio: \"{value} out of {max}\""
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "the language in force",
+          "appliesTo": "SlRating",
+          "description": "The locale the radio names are written in: \"3,5 de 5\" in pt-BR, \"3.5 de 5\" in en"
+        },
+        {
+          "name": "slRatingCaption",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "an element or an ng-template",
+          "description": "The caption in the value part. On an ng-template its context is { value, preview }, and it is rendered again whenever either moves"
+        },
+        {
+          "name": "slRatingSymbol",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "an ng-template",
+          "description": "Replaces the star in both the symbol and the fill parts. Its context is { index, fill }"
+        }
+      ],
+      "composition": [
+        {
+          "name": "exportAs=\"slRating\"",
+          "type": "SlRating",
+          "defaultValue": "—",
+          "appliesTo": "a template",
+          "description": "Reaches the instance: focus() puts focus on the checked radio, or on the first when none is checked; current() reads the value on the grid of the scale"
+        },
+        {
+          "name": "ControlValueAccessor and Validator",
+          "type": "formControl, formControlName, ngModel",
+          "defaultValue": "—",
+          "appliesTo": "the host element",
+          "description": "Both on the root, so a form binding goes where the directive is written. The integration React has no equivalent of"
+        },
+        {
+          "name": "provideRating()",
+          "type": "{ size, tone, max, clearable, insightThresholds }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "The decisions an application takes once, for all three members. insightThresholds merges key by key; an instance input always wins. The words and the locale come from provideSlotted"
+        },
+        {
+          "name": "aria-label, aria-describedby, role",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "the host element",
+          "description": "Static attributes the consumer writes are read before the host bindings; aria-describedby is merged with the field’s description and error"
+        }
+      ],
+      "events": [
+        {
+          "name": "[(value)] and (valueChangeRequest)",
+          "payload": "number | null, and ChangeRequest<number | null>",
+          "when": "The request is emitted before the value moves, with the value asked for, the one it replaces, the reason — pointer, keyboard or clear — the event, and cancel(). A request nobody cancelled moves the model, which emits valueChange for the two-way binding. A value equal to the one held is never requested."
+        },
+        {
+          "name": "(previewChange)",
+          "payload": "number | null",
+          "when": "When the pointer enters a radio, with its value, and null when it leaves the rating. It moves nothing the consumer owns, so it is an event and not a model."
+        },
+        {
+          "name": "ControlValueAccessor and Validator",
+          "payload": "number | null",
+          "when": "Whenever the value moves under formControl, formControlName or ngModel. A radio that loses focus marks the control touched, and required reports { required: true } while the value is null."
+        }
+      ],
+      "accessibility": [
+        "The pattern is the WAI-ARIA APG Rating Radio Group example: a radiogroup of native radios, each named \"3 de 5\" by aria-label. Tab lands on the checked radio or on the first, and Space checks — both the platform’s, because the radios share a name.",
+        "The arrows are the family’s and they do not wrap: the APG radio example wraps from the last star to the first, and a rating that falls from five to one on one key too many is the defect the APG slider example, Ark, MUI and Mantine all avoid. Home and End reach both ends; PageUp and PageDown are declined, because ten symbols are crossed key by key.",
+        "The caption is aria-hidden, because the checked radio already announces the value; the glyphs are aria-hidden inside slIcon. Read-only is enforced by refusing the press and the keys, and every radio keeps its tab stop, its focus ring and its contrast.",
+        "In the light and dark schemes a lit star measures 1,53:1 against the page, the ReUI yellow the family adopted; the value is never left to colour alone, because it is always in the accessible name and usually written beside the row. The high-contrast scheme and forced colours draw a solid edge around every star."
+      ]
+    },
+    "ratingDisplay": {
+      "imports": {
+        "source": "import {\n  provideRating,\n  SlRating,\n  SlRatingCaption,\n  SlRatingDisplay,\n  SlRatingSummary,\n  SlRatingSymbol,\n} from '@slotted/angular/rating';",
+        "selector": "div[slRatingDisplay]",
+        "exportAs": "slRatingDisplay"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the div carrying slRatingDisplay",
+          "required": true,
+          "purpose": "An image: role=\"img\", named \"Avaliação 4,6 de 5, 1.284 avaliações\" from displayLabel or displayLabelWithCount, unless the consumer wrote aria-label. Carries data-size, data-tone and data-variant for compact and histogram."
+        },
+        {
+          "part": "symbols",
+          "element": "div",
+          "required": true,
+          "purpose": "The row of symbols. It never wraps: ten symbols in a narrow column shrink, each item staying square, rather than breaking onto a second line."
+        },
+        {
+          "part": "item",
+          "element": "span",
+          "required": true,
+          "purpose": "One symbol’s square. On the input member it holds the radios and carries data-checked when one of them is checked; on the display it carries --slotted-rating-fill."
+        },
+        {
+          "part": "symbol",
+          "element": "span, holding slIcon and the star glyph",
+          "required": true,
+          "purpose": "The unlit shape, painted in the secondary surface with the rating edge around it. It takes no pointer events, so the radio beneath it is the target."
+        },
+        {
+          "part": "fill",
+          "element": "span, holding the same glyph",
+          "required": true,
+          "purpose": "The lit shape over the unlit one, clipped to the lit share of the symbol: the checked radio or the hovered one on the input member, --slotted-rating-fill on the display."
+        },
+        {
+          "part": "value",
+          "element": "span aria-hidden=\"true\"",
+          "required": false,
+          "purpose": "The number, always to one place in the locale: 4,6. Omitted with showValue false."
+        },
+        {
+          "part": "histogram",
+          "element": "span aria-hidden=\"true\"",
+          "required": false,
+          "purpose": "The distribution, lowest level first, in the histogram variant only."
+        },
+        {
+          "part": "bar",
+          "element": "span",
+          "required": false,
+          "purpose": "One level of the histogram, its height --slotted-rating-share: the level over the largest level."
+        },
+        {
+          "part": "count",
+          "element": "span aria-hidden=\"true\"",
+          "required": false,
+          "purpose": "How many readings, grouped in the locale: \"(1.284)\" beside the stars, \"1.284\" at the end of a histogram row. Present when count is set."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "SlRatingDisplay",
+          "description": "The number drawn. Any fraction; clamped to the scale, NaN drawn as nought"
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "defaultValue": "5",
+          "appliesTo": "SlRatingDisplay, provideRating",
+          "description": "How many symbols the scale has"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "SlRatingDisplay, provideRating",
+          "description": "The step of the symbols and the text"
+        },
+        {
+          "name": "tone",
+          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "warning",
+          "appliesTo": "SlRatingDisplay, provideRating",
+          "description": "The colour of the lit share"
+        },
+        {
+          "name": "variant",
+          "type": "'full' | 'compact' | 'histogram'",
+          "defaultValue": "full",
+          "appliesTo": "SlRatingDisplay",
+          "description": "Every symbol; one lit star with the number; or one star, the number and the distribution"
+        },
+        {
+          "name": "count",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "SlRatingDisplay",
+          "description": "How many readings. Written beside the stars and in the accessible name"
+        },
+        {
+          "name": "distribution",
+          "type": "readonly number[]",
+          "defaultValue": "—",
+          "appliesTo": "SlRatingDisplay",
+          "description": "Counts per level, lowest first, drawn by the histogram variant"
+        },
+        {
+          "name": "showValue",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "SlRatingDisplay",
+          "description": "Whether the number is written beside the stars"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<RatingMessages>",
+          "defaultValue": "—",
+          "appliesTo": "SlRatingDisplay",
+          "description": "Words laid over the language in force, key by key: displayLabel and displayLabelWithCount name the image"
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "the language in force",
+          "appliesTo": "SlRatingDisplay",
+          "description": "The locale the number and the count are written in"
+        }
+      ],
+      "composition": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "defaultValue": "displayLabel",
+          "appliesTo": "the host element",
+          "description": "A static name the consumer writes wins over the family’s sentence"
+        },
+        {
+          "name": "provideRating()",
+          "type": "{ size, tone, max }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "Shared with the other two members"
+        }
+      ],
+      "events": [],
+      "accessibility": [
+        "The display is one image, role=\"img\", named by its whole value and its count: \"Avaliação 4,6 de 5, 1.284 avaliações\". The stars, the number and the count inside it are aria-hidden, so a screen reader hears one sentence rather than five images and two numbers.",
+        "A name the consumer writes as a static aria-label wins, which is how a histogram row says \"opiniões divididas\" as well as the mean.",
+        "The number is always written beside the stars unless showValue is false, because a lit share of a star is not a readable quantity for anyone, at any contrast."
+      ]
+    },
+    "ratingSummary": {
+      "imports": {
+        "source": "import {\n  provideRating,\n  SlRating,\n  SlRatingCaption,\n  SlRatingDisplay,\n  SlRatingSummary,\n  SlRatingSymbol,\n} from '@slotted/angular/rating';",
+        "selector": "section[slRatingSummary]",
+        "exportAs": "slRatingSummary"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the section carrying slRatingSummary",
+          "required": true,
+          "purpose": "A region named by the consumer’s aria-label. data-variant is summary for bars and spectrum for the spectrum, which also carries --slotted-rating-mean, --slotted-rating-low and --slotted-rating-high."
+        },
+        {
+          "part": "aggregate",
+          "element": "div",
+          "required": true,
+          "purpose": "The figure and the scale; then the stars in bars, or the conclusion in the spectrum; then the count."
+        },
+        {
+          "part": "value",
+          "element": "span",
+          "required": false,
+          "purpose": "The mean to one place. Omitted when nothing has been rated: a missing mean is not nought."
+        },
+        {
+          "part": "scale",
+          "element": "span",
+          "required": false,
+          "purpose": "\"de 5\", from the scale message. Omitted with the value."
+        },
+        {
+          "part": "insight",
+          "element": "span data-tone",
+          "required": false,
+          "purpose": "The one conclusion that holds first — divided, few, consensus, mixed — as a pill in its tone. Spectrum only, because it is read from the spread only the spectrum draws; omitted with showInsight false or no readings."
+        },
+        {
+          "part": "count",
+          "element": "span",
+          "required": true,
+          "purpose": "How many readings; for the spectrum, also the margin or the uncertain interval."
+        },
+        {
+          "part": "distribution",
+          "element": "ul aria-label",
+          "required": false,
+          "purpose": "The bars variant’s list of levels, highest first, named by distributionLabel."
+        },
+        {
+          "part": "level",
+          "element": "button aria-pressed, or div role=\"group\"",
+          "required": false,
+          "purpose": "One level: a toggle when filterable, disabled at zero readings; a named group otherwise."
+        },
+        {
+          "part": "level-label",
+          "element": "span",
+          "required": false,
+          "purpose": "The level’s number and a star."
+        },
+        {
+          "part": "track",
+          "element": "span aria-hidden=\"true\"",
+          "required": false,
+          "purpose": "The ground of one level’s bar."
+        },
+        {
+          "part": "indicator",
+          "element": "span",
+          "required": false,
+          "purpose": "The bar, its length --slotted-rating-share: the level’s share of all readings."
+        },
+        {
+          "part": "level-count",
+          "element": "span",
+          "required": false,
+          "purpose": "The level’s count, grouped in the locale."
+        },
+        {
+          "part": "plot",
+          "element": "div",
+          "required": false,
+          "purpose": "The spectrum’s drawing: the field over the axis."
+        },
+        {
+          "part": "field",
+          "element": "div",
+          "required": false,
+          "purpose": "The columns, with the interval and the mean laid over them."
+        },
+        {
+          "part": "columns",
+          "element": "div",
+          "required": false,
+          "purpose": "The five columns, lowest level first."
+        },
+        {
+          "part": "column",
+          "element": "button aria-pressed, or div role=\"group\"",
+          "required": false,
+          "purpose": "One level of the spectrum, its height --slotted-rating-share: the level over the largest level."
+        },
+        {
+          "part": "bar",
+          "element": "span",
+          "required": false,
+          "purpose": "The painted column inside each column target."
+        },
+        {
+          "part": "interval",
+          "element": "span aria-hidden=\"true\"",
+          "required": false,
+          "purpose": "The 95% interval of the mean, from --slotted-rating-low to -high."
+        },
+        {
+          "part": "mean",
+          "element": "span aria-hidden=\"true\"",
+          "required": false,
+          "purpose": "The mean’s mark on the axis, at --slotted-rating-mean."
+        },
+        {
+          "part": "mean-label",
+          "element": "span",
+          "required": false,
+          "purpose": "The mean written on its mark."
+        },
+        {
+          "part": "axis",
+          "element": "div aria-hidden=\"true\"",
+          "required": false,
+          "purpose": "The scale under the columns."
+        },
+        {
+          "part": "tick",
+          "element": "span",
+          "required": false,
+          "purpose": "One level on the axis."
+        },
+        {
+          "part": "tick-label",
+          "element": "span",
+          "required": false,
+          "purpose": "The level’s number and a star."
+        },
+        {
+          "part": "tick-share",
+          "element": "span",
+          "required": false,
+          "purpose": "The level’s share, a whole percent."
+        },
+        {
+          "part": "sentiment",
+          "element": "p",
+          "required": false,
+          "purpose": "The three buckets, when anything has been rated."
+        },
+        {
+          "part": "bucket",
+          "element": "span data-tone",
+          "required": false,
+          "purpose": "Positive, neutral or negative, with its share in strong."
+        },
+        {
+          "part": "swatch",
+          "element": "span aria-hidden=\"true\"",
+          "required": false,
+          "purpose": "The bucket’s colour key."
+        }
+      ],
+      "api": [
+        {
+          "name": "counts",
+          "type": "readonly number[]",
+          "defaultValue": "—",
+          "appliesTo": "SlRatingSummary",
+          "description": "How many readings each level holds, lowest first. Negative and fractional counts are dropped to their whole non-negative part"
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "defaultValue": "5",
+          "appliesTo": "SlRatingSummary, provideRating",
+          "description": "How many levels the scale has. A level missing from counts holds none; a count past it is dropped"
+        },
+        {
+          "name": "variant",
+          "type": "'bars' | 'spectrum'",
+          "defaultValue": "bars",
+          "appliesTo": "SlRatingSummary",
+          "description": "One bar per level, or columns over the scale with the mean, its interval and the buckets"
+        },
+        {
+          "name": "filterable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlRatingSummary",
+          "description": "Each level or column becomes a toggle button, disabled with zero readings"
+        },
+        {
+          "name": "selectedLevels",
+          "type": "model<readonly number[]>",
+          "defaultValue": "[]",
+          "appliesTo": "SlRatingSummary",
+          "description": "The pressed levels, ascending. Two-way; every move is asked first"
+        },
+        {
+          "name": "insightThresholds",
+          "type": "Partial<RatingInsightThresholds>",
+          "defaultValue": "{ divided: 0.25, few: 30, margin: 0.5, consensus: 0.8 }",
+          "appliesTo": "SlRatingSummary, provideRating",
+          "description": "Where each conclusion is drawn, merged key by key. margin also decides when the spectrum says its mean is uncertain"
+        },
+        {
+          "name": "showInsight",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "SlRatingSummary",
+          "description": "Whether the spectrum draws its conclusion. The bars variant draws none"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "SlRatingSummary, provideRating",
+          "description": "The step of the text and the rows"
+        },
+        {
+          "name": "tone",
+          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "warning",
+          "appliesTo": "SlRatingSummary, provideRating",
+          "description": "The colour of the stars and the bars"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<RatingMessages>",
+          "defaultValue": "—",
+          "appliesTo": "SlRatingSummary",
+          "description": "Words laid over the language in force, key by key — every sentence of the summary: summaryCount, summaryEmpty, spectrumCount, spectrumUncertain, levelLabel, distributionLabel, the buckets and the four conclusions"
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "the language in force",
+          "appliesTo": "SlRatingSummary",
+          "description": "The locale every number is written in"
+        }
+      ],
+      "composition": [
+        {
+          "name": "exportAs=\"slRatingSummary\"",
+          "type": "SlRatingSummary",
+          "defaultValue": "—",
+          "appliesTo": "a template",
+          "description": "Reaches the instance: summary() is the whole summariseRatings result, for a caption of one’s own"
+        },
+        {
+          "name": "provideRating()",
+          "type": "{ size, tone, max, insightThresholds }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "Shared with the other two members"
+        }
+      ],
+      "events": [
+        {
+          "name": "[(selectedLevels)] and (selectedLevelsChangeRequest)",
+          "payload": "readonly number[], and ChangeRequest<readonly number[]>",
+          "when": "The request is emitted before the pressed levels move, with the levels asked for in ascending order, the ones they replace, the reason — pointer, or keyboard for Space and Enter — the event and cancel(). A request nobody cancelled moves the model."
+        }
+      ],
+      "accessibility": [
+        "The summary is a section named by the consumer’s aria-label, so it is a region a screen reader can reach by landmark. The figure is plain text, and the stars inside the aggregate are one image named by the mean.",
+        "Each level is named whole — \"5 estrelas: 1.052 avaliações, 82%\" — and the bar, the axis and the mean mark are aria-hidden, because the name already carries what they draw.",
+        "A filterable level is a native toggle button with aria-pressed, so Space and Enter press it; a level with no readings is disabled rather than offered as a filter that returns nothing.",
+        "The conclusion and the three buckets are words, not colours: the tone of the pill and of each swatch repeats a sentence that is already written."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--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-sm",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-invalid-edge-width",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-background",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-instant",
+    "--slotted-duration-long",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-size-4xl",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-font-weight-semibold",
+    "--slotted-highlight-tint-opacity",
+    "--slotted-line-height-4xl",
+    "--slotted-line-height-md",
+    "--slotted-line-height-xs",
+    "--slotted-radius-full",
+    "--slotted-radius-sm",
+    "--slotted-radius-xs",
+    "--slotted-rating-active-background",
+    "--slotted-rating-bar-color",
+    "--slotted-rating-bar-size",
+    "--slotted-rating-edge",
+    "--slotted-rating-empty-color",
+    "--slotted-rating-gap",
+    "--slotted-rating-hover-background",
+    "--slotted-rating-invalid-color",
+    "--slotted-rating-invalid-edge-width",
+    "--slotted-rating-lit-color",
+    "--slotted-rating-symbol-size",
+    "--slotted-space-1",
+    "--slotted-space-10",
+    "--slotted-space-12",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-7",
+    "--slotted-space-8",
+    "--slotted-space-9",
+    "--slotted-surface-inverse",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-inverse",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-danger-solid",
+    "--slotted-tone-danger-surface",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-border",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-surface",
+    "--slotted-tone-success-border",
+    "--slotted-tone-success-solid",
+    "--slotted-tone-success-surface",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-border",
+    "--slotted-tone-warning-solid",
+    "--slotted-tone-warning-surface",
+    "--slotted-tone-warning-text"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One rating with every axis on it, driven by the controls below the canvas. Hover the row: the stars light up to the one under the pointer and the caption says its word before anything is chosen.",
+      "language": "html",
+      "source": "<div slRating aria-label=\"Qualidade do som\" [(value)]=\"nota\">\n  <ng-template slRatingCaption let-value=\"value\" let-preview=\"preview\">\n    {{ palavras[preview ?? value ?? 0] }}\n  </ng-template>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "half",
+      "title": "Half a star at a time",
+      "note": "With step 0.5 each star holds two radios, and the inline-start half of the star asks for the half value. The arrow keys stop ten times on five stars, and each radio is named \"3,5 de 5\" in the locale.",
+      "language": "html",
+      "source": "<div slRating aria-label=\"Conforto\" [step]=\"0.5\" [value]=\"3.5\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "Read-only, disabled and invalid",
+      "note": "Read-only keeps every tab stop and the lit stars, because the value is real, and refuses the press; disabled removes the row from the tab order; invalid reddens the edge and announces aria-invalid.",
+      "language": "html",
+      "source": "<div slRating aria-label=\"Nota publicada\" readOnly [value]=\"4\"></div>\n<div slRating aria-label=\"Nota bloqueada\" disabled [value]=\"2\"></div>\n<div slRating aria-label=\"Nota obrigatória\" invalid required></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "field",
+      "title": "In a field, and in a reactive form",
+      "note": "The field supplies the label, the description, the error and the size; the rating is the value accessor and the validator, so required means \"choose a rating\" and the error appears once the form is touched.",
+      "language": "html",
+      "source": "<div slField required>\n  <label slFieldLabel>Qualidade do som</label>\n  <div slRating formControlName=\"som\"></div>\n  <p slFieldError>Escolha uma nota.</p>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "labels",
+      "title": "Words for each value, and a scale of ten",
+      "note": "The caption is the consumer’s: a word per star on a scale of five, the number on a scale of ten. Each radio’s own name comes from the itemLabel message, which a provider or one instance may reword.",
+      "language": "html",
+      "source": "<div\n  slRating\n  aria-label=\"Recomendaria a um amigo\"\n  [max]=\"10\"\n  [messages]=\"{ itemLabel: 'Nota {value} de {max}' }\"\n>\n  <ng-template slRatingCaption let-value=\"value\" let-preview=\"preview\">\n    {{ preview ?? value ?? 'Sem nota' }}\n  </ng-template>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The keys, which stop at both ends",
+      "note": "The arrows raise and lower by one step and stop at the first and the last, Home and End reach both ends, and Backspace or Delete empty a clearable rating. In a right-to-left page the inline arrows swap.",
+      "language": "html",
+      "source": "<!-- ArrowRight/ArrowUp +1 · ArrowLeft/ArrowDown −1 · Home · End\n     Backspace/Delete empty it when clearable -->\n<div slRating aria-label=\"Atendimento\" [value]=\"3\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "touch",
+      "title": "A finger dragged along the row",
+      "note": "A touch or a pen dragged along the stars checks the one under it, read by ratingAtPoint, and the root carries data-dragging so the fill follows without its transition. The row keeps vertical panning; a mouse does not scrub.",
+      "language": "html",
+      "source": "<div slRating aria-label=\"Bateria\" size=\"lg\" [(value)]=\"nota\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One display with every axis on it. Move the value by a tenth and watch the last star: the display draws any fraction, because nothing here is a target.",
+      "language": "html",
+      "source": "<div slRatingDisplay [value]=\"4.6\" [count]=\"1284\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "fractions",
+      "title": "Any fraction of a star",
+      "note": "Each item reads --slotted-rating-fill from ratingFills: 4,6 lights six tenths of the fifth star, 2,25 a quarter of the third. The number beside the stars is always to one place.",
+      "language": "html",
+      "source": "<div slRatingDisplay [value]=\"4.6\"></div>\n<div slRatingDisplay [value]=\"2.25\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "compact",
+      "title": "One star, for a row or a card",
+      "note": "compact draws one lit star, the number and the count — the form a product card or a table cell has room for. The name still says the whole value and the scale.",
+      "language": "html",
+      "source": "<div slRatingDisplay variant=\"compact\" size=\"sm\" [value]=\"4.6\" [count]=\"1284\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "histogram",
+      "title": "The mean, and the spread behind it",
+      "note": "histogram adds one bar per level, each over the largest. Two products at 3,3 read differently: one split between ones and fives, the other spread evenly — which a mean alone would hide.",
+      "language": "html",
+      "source": "<div\n  slRatingDisplay\n  variant=\"histogram\"\n  aria-label=\"Média 3,3 de 5, 8 avaliações, opiniões divididas\"\n  [value]=\"3.3\"\n  [count]=\"8\"\n  [distribution]=\"[3, 0, 1, 0, 4]\"\n></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "count",
+      "title": "How many readings the number is made of",
+      "note": "count writes the grouped number beside the stars and joins the accessible name through displayLabelWithCount. A rating with no readings says 0,0 and (0) rather than hiding.",
+      "language": "html",
+      "source": "<div slRatingDisplay [value]=\"4.6\" [count]=\"1284\"></div>\n<div slRatingDisplay [value]=\"0\" [count]=\"0\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A scale of ten in a narrow column shrinks each star rather than wrapping the row, a count of twelve million is grouped in the locale, and the row mirrors in a right-to-left page.",
+      "language": "html",
+      "source": "<div slRatingDisplay [max]=\"10\" [value]=\"8.2\" [count]=\"12408117\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "The aggregate beside one bar per level, highest first. The two blocks stand side by side while both fit and stack when they do not; narrow the window to see the break.",
+      "language": "html",
+      "source": "<section\n  slRatingSummary\n  aria-label=\"Avaliações dos clientes\"\n  [counts]=\"[9, 18, 47, 158, 1052]\"\n></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filter",
+      "title": "Levels that filter the reviews",
+      "note": "filterable turns each level into a toggle button with aria-pressed; the pressed levels are selectedLevels, asked for first through selectedLevelsChangeRequest. A level nobody chose is disabled, because a filter that returns nothing is a dead end.",
+      "language": "html",
+      "source": "<section\n  slRatingSummary\n  aria-label=\"Filtrar avaliações\"\n  filterable\n  [counts]=\"contagens\"\n  [(selectedLevels)]=\"niveis\"\n></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "spectrum",
+      "title": "The spectrum: spread, mean and margin",
+      "note": "The same counts as columns over the scale, lowest first, with the mean and its 95% interval laid over them and the readings split into positive, neutral and negative. Eight readings at 3,3 say \"média incerta, entre 2,0 e 4,5\".",
+      "language": "html",
+      "source": "<section\n  slRatingSummary\n  variant=\"spectrum\"\n  aria-label=\"Resumo das avaliações\"\n  filterable\n  [counts]=\"[9, 18, 47, 158, 1052]\"\n></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "insight",
+      "title": "One conclusion, the first that holds",
+      "note": "Divided when both ends hold a quarter each, few below thirty readings or with a margin of half a level, consensus when four fifths are positive, mixed otherwise. The pill belongs to the spectrum; insightThresholds moves each line; showInsight false removes it.",
+      "language": "html",
+      "source": "<section\n  slRatingSummary\n  variant=\"spectrum\"\n  aria-label=\"Avaliações\"\n  [counts]=\"[40, 12, 10, 14, 60]\"\n  [insightThresholds]=\"{ divided: 0.3 }\"\n></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "empty",
+      "title": "Nobody has rated it yet",
+      "note": "With zero readings the figure and the scale are omitted — a missing mean is not nought — the stars are unlit, the count says \"Ainda sem avaliações\", and no conclusion is drawn.",
+      "language": "html",
+      "source": "<section slRatingSummary aria-label=\"Sem avaliações\" [counts]=\"[0, 0, 0, 0, 0]\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "narrow",
+      "title": "In a narrow column",
+      "note": "In a 360-pixel column the aggregate stacks above the distribution and every row of bars keeps its label, its bar and its count aligned with the rows above it.",
+      "language": "html",
+      "source": "<section\n  slRatingSummary\n  size=\"sm\"\n  aria-label=\"Avaliações\"\n  [counts]=\"[9, 18, 47, 158, 1052]\"\n></section>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}