{ "version": "0.2.0-preview.1", "content_digest": "70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721", "status": "preview", "authority": { "repository": "cloakedinc/design", "path": "packages/design-system", "catalog": "packages/design-system/catalog.json", "status": "preview" }, "provenance": { "repo": "cloakedinc/automation", "commit": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1", "path": "packages/design-system", "imported_spec_status": "approved" }, "adaptations": [ { "id": "button-content-gap", "status": "preview", "description": "Use the specification's 4px content gap instead of the inherited 8px implementation gap." }, { "id": "keyboard-focus", "status": "preview", "description": "Add visible Button and Input keyboard focus and an overridable inset focus default for shared button resets, including FAQ cards and ListItem rows." }, { "id": "supporting-text-contrast", "status": "preview", "description": "Map light secondary text to the existing grey-04-strong primitive for readable helper text on white and cream." }, { "id": "danger-text-contrast", "status": "preview", "description": "Separate readable danger text/borders from destructive fills; preserve the primary danger-button fill and label pair." }, { "id": "preview-status", "status": "preview", "description": "Local components, specs and token adaptations await human sign-off; upstream approved status is provenance only." }, { "id": "motion-comparison-accessibility", "status": "preview", "description": "Preserve the original MotionShowcase comparisons while requiring explicit replay, responding to live reduced-motion changes, and keeping duration tracks usable on small screens." }, { "id": "list-item-ownership", "status": "preview", "description": "List owns listitem wrappers for its content rows, while section labels stay outside the row count and standalone rows retain their existing semantics." }, { "id": "card-delta-text-contrast", "status": "preview", "description": "Mix Card.Delta foregrounds from 60% existing tone solid and 40% primary text for readable contrast in both themes; preserve the four original tone fills." }, { "id": "carousel-keyboard-access", "status": "preview", "description": "Keep all native-scrolling carousel slide controls exposed to assistive technology and keyboard navigation; pause autoplay while focus is inside the carousel." } ], "id": "riskmeter", "name": "RiskMeter", "category": "Visualizations", "contract_status": "preview", "contract_kind": "source-derived", "review": { "local_status": "not-reviewed", "source_approval": null, "imported_spec_status": "approved", "spec_origin": "imported-adapted", "local_spec_source_status": "approved", "imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1", "note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract." }, "approval": "required", "visual_reference": { "stories": [ { "id": "cloaked-design-system-visualizations-riskmeter--default", "name": "Default", "title": "Cloaked Design System/Visualizations/RiskMeter", "exportName": "Default", "source_path": "packages/design-system/src/components/visualizations/RiskMeter/RiskMeter.stories.tsx", "source_digest": "a444968a664d565250aca4b3fae31d3746928f8f5e4bd2d57cf8e2b89c483797", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-visualizations-riskmeter--default&viewMode=story" }, { "id": "cloaked-design-system-visualizations-riskmeter--pointer", "name": "Pointer", "title": "Cloaked Design System/Visualizations/RiskMeter", "exportName": "Pointer", "source_path": "packages/design-system/src/components/visualizations/RiskMeter/RiskMeter.stories.tsx", "source_digest": "a444968a664d565250aca4b3fae31d3746928f8f5e4bd2d57cf8e2b89c483797", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-visualizations-riskmeter--pointer&viewMode=story" }, { "id": "cloaked-design-system-visualizations-riskmeter--empty", "name": "Empty", "title": "Cloaked Design System/Visualizations/RiskMeter", "exportName": "Empty", "source_path": "packages/design-system/src/components/visualizations/RiskMeter/RiskMeter.stories.tsx", "source_digest": "a444968a664d565250aca4b3fae31d3746928f8f5e4bd2d57cf8e2b89c483797", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-visualizations-riskmeter--empty&viewMode=story" }, { "id": "cloaked-design-system-visualizations-riskmeter--full", "name": "Full", "title": "Cloaked Design System/Visualizations/RiskMeter", "exportName": "Full", "source_path": "packages/design-system/src/components/visualizations/RiskMeter/RiskMeter.stories.tsx", "source_digest": "a444968a664d565250aca4b3fae31d3746928f8f5e4bd2d57cf8e2b89c483797", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-visualizations-riskmeter--full&viewMode=story" }, { "id": "cloaked-design-system-visualizations-riskmeter--hidden-loading", "name": "Hidden Loading", "title": "Cloaked Design System/Visualizations/RiskMeter", "exportName": "HiddenLoading", "source_path": "packages/design-system/src/components/visualizations/RiskMeter/RiskMeter.stories.tsx", "source_digest": "a444968a664d565250aca4b3fae31d3746928f8f5e4bd2d57cf8e2b89c483797", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-visualizations-riskmeter--hidden-loading&viewMode=story" }, { "id": "cloaked-design-system-visualizations-riskmeter--dark-theme", "name": "Dark Theme", "title": "Cloaked Design System/Visualizations/RiskMeter", "exportName": "DarkTheme", "source_path": "packages/design-system/src/components/visualizations/RiskMeter/RiskMeter.stories.tsx", "source_digest": "a444968a664d565250aca4b3fae31d3746928f8f5e4bd2d57cf8e2b89c483797", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-visualizations-riskmeter--dark-theme&viewMode=story" } ], "name": "RiskMeter", "id": "riskmeter", "category": "Visualizations" }, "stories_source": { "path": "packages/design-system/src/components/visualizations/RiskMeter/RiskMeter.stories.tsx", "code": "import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { buildRadioArgType } from '../../../storybook/controlOptions';\nimport { RiskMeter } from './RiskMeter';\n\nconst RISK_MARKERS = ['thumb', 'pointer'] as const;\n\nconst meta: Meta = {\n title: 'Cloaked Design System/Visualizations/RiskMeter',\n component: RiskMeter,\n parameters: {\n a11y: { test: 'error' },\n docs: {\n description: {\n component:\n 'A horizontal 0–100 track carrying a low→high risk gradient. Use it when the value ' +\n 'has severity meaning (an exposure/risk score), not plain progress — for that use ' +\n '`HalfGauge` or `Progress`. The `marker` picks the reading: `thumb` (default) is a ' +\n 'handle with the track dimmed past the value, for progress-like \"how bad is it\"; ' +\n '`pointer` keeps the full gradient visible with a triangle pointing at the value, for ' +\n '\"you are here on the scale.\" Set `hidden` to keep loading semantics while masking ' +\n 'the value.',\n },\n },\n },\n argTypes: {\n value: {\n control: { type: 'range', min: 0, max: 100, step: 1 },\n description: 'Risk value from 0 to 100.',\n },\n marker: {\n ...buildRadioArgType(RISK_MARKERS),\n description:\n '`thumb`: handle + dimmed remainder (progress). `pointer`: full gradient + you-are-here arrow.',\n },\n hidden: { control: 'boolean', description: 'Masks the value while preserving loading semantics.' },\n ariaLabel: { control: 'text', description: 'Accessible label; sets `role=\"img\"`.' },\n testId: { control: 'text', description: 'Test selector on the meter root.' },\n },\n};\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = { args: { value: 72, ariaLabel: 'Meter score' } };\nexport const Pointer: Story = {\n parameters: {\n docs: {\n description: { story: '`marker=\"pointer\"` — full gradient stays lit; the arrow marks \"you are here\".' },\n },\n },\n args: { value: 91, marker: 'pointer', ariaLabel: 'Meter score' },\n};\nexport const Empty: Story = {\n parameters: { docs: { description: { story: 'Value 0 — lowest risk.' } } },\n args: { value: 0, ariaLabel: 'Minimum meter score' },\n};\nexport const Full: Story = {\n parameters: { docs: { description: { story: 'Value 100 — highest risk.' } } },\n args: { value: 100, ariaLabel: 'Maximum meter score' },\n};\nexport const HiddenLoading: Story = {\n parameters: { docs: { description: { story: '`hidden` masks the value but keeps loading semantics.' } } },\n args: { value: 72, hidden: true, ariaLabel: 'Meter score loading' },\n};\nexport const DarkTheme: Story = { args: { value: 72, ariaLabel: 'Meter score' }, globals: { theme: 'dark' } };\n" }, "specification": { "$schema": "../../../specs/component-spec.schema.json", "identity": { "name": "RiskMeter", "status": "preview", "version": "1.0.0", "summary": "A horizontal 0-100 track carrying a low-to-high risk gradient for a single severity value, marked with a thumb handle or a you-are-here pointer." }, "parts": [ { "id": "track", "label": "Track", "description": "The rounded 0-100 rail that carries the risk gradient and background.", "required": true }, { "id": "gradient", "label": "Risk gradient", "description": "The low-to-high severity fill painted across the track." }, { "id": "thumb", "label": "Thumb", "description": "The circular handle placed at the value in the default thumb marker." }, { "id": "pointer", "label": "Pointer", "description": "The triangle that points up at the value when the pointer marker is used." } ], "allowedDesignChoices": { "variants": { "base": { "label": "Base", "description": "The value and marker change the reading without changing the component treatment." } }, "sizes": {}, "markers": { "thumb": { "label": "Thumb", "description": "A circular handle with the track dimmed past the value, for a progress-like reading." }, "pointer": { "label": "Pointer", "description": "The full gradient stays lit and a triangle points at the value, for you-are-here." } } }, "variants": [ { "id": "base", "label": "Base", "description": "A single gradient track whose marker and value are set by props.", "platforms": [ "ios", "android", "web" ] } ], "sizes": [], "measurements": [ { "id": "track-height", "label": "Track height", "kind": "exact", "token": "--cds-size-12", "value": 12, "unit": "px", "appliesTo": [ "track" ] }, { "id": "thumb-size", "label": "Thumb diameter", "kind": "exact", "token": "--cds-size-20", "value": 20, "unit": "px", "appliesTo": [ "thumb" ] }, { "id": "track-radius", "label": "Track corner radius", "kind": "exact", "token": "--cds-radius-xs", "value": 8, "unit": "px", "appliesTo": [ "track" ] }, { "id": "pointer-half-width", "label": "Pointer triangle half-width", "kind": "exact", "token": "--cds-size-8", "value": 8, "unit": "px", "appliesTo": [ "pointer" ], "notes": "Each triangle side border is one --cds-size-8, so the pointer is twice that wide and is clamped by its half-width so it never spills past the track ends at 0 or 100." } ], "layout": { "alignment": "The track stretches to the container width; the marker is positioned along it by value.", "flow": "A single-row track; the pointer marker adds a triangle in-flow beneath the track.", "notes": [ "The thumb marker dims the track past the value; the pointer marker keeps the full gradient lit." ] }, "typographyAndColor": { "typography": [ { "label": "Adjacent caption", "description": "Surrounding score labels and captions use the body-small ramp; the meter draws no text itself.", "token": "--cds-type-body-small-size" } ], "colors": [ { "label": "Track background", "description": "The unfilled track and the dimming overlay past the value.", "token": "--cds-graph-bg" }, { "label": "Low risk", "description": "The good end of the severity gradient.", "token": "--cds-risk-good" }, { "label": "Medium risk", "description": "The fair midpoint of the severity gradient.", "token": "--cds-risk-fair" }, { "label": "High risk", "description": "The critical end of the severity gradient.", "token": "--cds-risk-critical" }, { "label": "Thumb ring", "description": "The surface-colored ring around the thumb handle.", "token": "--cds-bg-surface" }, { "label": "Thumb edge", "description": "The hairline that separates the thumb from the track.", "token": "--cds-divider" } ] }, "states": [ { "id": "value", "label": "Value shown", "description": "The marker sits at the clamped 0-100 value and exposes it to assistive technology." }, { "id": "loading", "label": "Loading", "description": "With hidden set the value is masked and the meter reports aria-busy while a score calculates." }, { "id": "decorative", "label": "Decorative", "description": "Without an accessible label the meter is presentational and exposes no progressbar role." } ], "behavior": [ { "label": "Clamped value", "description": "Values outside 0-100 are clamped so the marker never leaves the track." }, { "label": "Marker reading", "description": "Use thumb for progress-like severity and pointer for a you-are-here position on the scale." }, { "label": "Masked loading", "description": "Set hidden to keep loading semantics while the value is still being computed." } ], "accessibility": [ { "label": "Meaningful value", "description": "Pass an accessible label so the meter exposes a progressbar with min, max, and the current value." }, { "label": "Decorative meter", "description": "Omit the label when a nearby number already states the score, leaving the meter presentational." }, { "label": "Loading is announced", "description": "While hidden the meter reports busy and withholds the value rather than announcing a stale one." } ], "contentAdaptation": [ { "label": "Severity only", "description": "Use RiskMeter when the value has severity meaning; use HalfGauge or Progress for neutral completion." }, { "label": "Full-width rail", "description": "The track fills its container, so give it a bounded width in narrow rows." } ], "motionHaptics": { "motion": [ { "label": "Value transition", "description": "The marker eases to a new value; honor reduced-motion by letting the platform shorten the ease." } ], "haptics": [ { "label": "No feedback", "description": "The meter is a display and requests no haptic feedback." } ] }, "platformDifferences": [] }, "specification_source": "packages/design-system/src/components/visualizations/RiskMeter/RiskMeter.spec.json", "guidance": { "summary": "A horizontal 0-100 track carrying a low-to-high risk gradient for a single severity value, marked with a thumb handle or a you-are-here pointer.", "guidance": [ { "heading": "Overview", "body": "A horizontal 0-100 track carrying a low-to-high risk gradient for a single severity value." }, { "heading": "When to use", "body": "Use RiskMeter when the value has severity meaning — an exposure or risk score — not plain\nprogress. For neutral completion use `HalfGauge`; for a bare linear bar use `Progress`.\n\nThe `marker` picks the reading. `thumb` (default) is a handle with the track dimmed past the\nvalue, for a progress-like \"how bad is it.\" `pointer` keeps the full gradient visible with a\ntriangle pointing at the value, for \"you are here on the scale.\" Set `hidden` to keep loading\nsemantics while masking the value.\n\nUsed on Playlist Home in `DigitalRiskWidget` and `DigitalRiskDetail` (thumb, masked while the\nscore calculates) and in `WebsiteDataView`'s `RiskBand` (pointer)." } ], "usage": [], "examples": [], "source": "packages/design-system/src/components/visualizations/RiskMeter/RiskMeter.mdx", "status": "local-preview", "note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification." }, "links": { "human": "/component-riskmeter", "json": "/data/visual/components/riskmeter.json", "storybook": "/storybook/?path=/story/cloaked-design-system-visualizations-riskmeter--default" } }