Implement SVG arc gauge for MeterWidget

[Copilot]

The MeterWidget had a non-functional <input> placeholder using Dashing/Smashing CoffeeScript data-bind-* attribute syntax — none of which was wired to Blazor parameters or rendered any visual gauge.

Changes

MeterWidget.razor — SVG arc gauge

Replaces the dead <input data-bind-*> with an <svg> rendering two arcs (background + value fill) and an optional center label:

<svg class="meter" width="@Width" height="@Height" viewBox="0 0 @Width @Height">
    <path class="meter-background" d="@GetBackgroundArcPath()" stroke-width="@StrokeWidth" />
    @if (Value > Min)
    {
        <path class="meter-value" d="@GetValueArcPath()" stroke-width="@StrokeWidth" />
    }
    @if (DisplayInput)
    {
        @GetCenterTextMarkup()
    }
</svg>

Note: Blazor's Razor parser treats <text> as a special directive (attributes not permitted), so the SVG text element is emitted via a MarkupString helper (GetCenterTextMarkup) with HtmlEncode applied to user-supplied strings.

MeterWidget.razor.cs — new parameters & SVG helpers

• New params: DisplayInput (bool, default true), Prefix (string?), Suffix (string?) — matching the data-displayInput / prefix/suffix semantics from Smashing
• Defaults set on properties: AngleOffset=-125, AngleArc=250, Width=200, Height=200, Max=100 (previously defaulted to 0, breaking any usage without explicit args)
• Arc helpers: GetArcPath converts north-zero clockwise polar degrees to SVG arc path strings using FormattableString.Invariant for culture-safe decimal formatting

MeterWidget.razor.css

Replaces input.meter rules with svg.meter, path.meter-background, path.meter-value, and text.meter-text.

MeterWidget.stories.razor

Adds Value, Min, Max, DisplayInput, Prefix, Suffix arg types; adds a Disable Display Input story (DisplayInput=false, Width/Height=100).

MeterWidgetTest.cs — 9 new tests

SVG presence, value arc visibility at boundary conditions (Value == Min), DisplayInput toggle, prefix/suffix content, default parameter assertions, and coverage for 0%/50%/100% fill.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>meter</issue_title>
<issue_description>- https://github.com/Smashing/smashing/tree/master/templates/project/widgets/meter

---

• jQuery Knob
• https://github.com/aterrien/jQuery-Knob
• http://anthonyterrien.com/knob/
• http://anthonyterrien.com/demo/knob/</issue_description>

Comments on the Issue (you are @copilot in this section)

@AlexHedley  @AlexHedley Smart.Gauge - https://www.htmlelements.com/docs/blazor-gauge/#blazor_get_started @alex-hedley Radzen Blazor Arc Gauge - 📄 https://www.radzen.com/documentation/blazor/gauge/ - https://blazor.radzen.com/arc-gauge @AlexHedley https://github.com/KristofferStrube/Blazor.RadialContextMenu

• Fixes meter #8

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[AlexHedley]

@copilot provide a screenshot of the output

[Copilot]

@copilot provide a screenshot of the output

Here's the rendered output of the MeterWidget on the Demo page (value=75, range 0–100):

The Synergy tile shows the SVG arc gauge with:

• A dim background arc spanning the full range (−125° offset, 250° sweep)
• A bright filled arc proportional to the value (75% → ~187° sweep)
• The center value label ("75") rendered via MarkupString