sp-meter

NPM 1.0.1

View Storybook

Try it on webcomponents.dev
Overview API Changelog

Description

An <sp-meter> is a visual representation of a quantity or achievement. The meter's progress is determined by user actions, rather than system actions.

Installation

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/meter

Import the side-effectful registration of <sp-meter> via:

import '@spectrum-web-components/meter/sp-meter.js';

When looking to leverage the Meter base class as a type and/or for extension purposes, do so via:

import { Meter } from '@spectrum-web-components/meter';

Sizes

Small 
<sp-meter size="s" progress="71">Tasks Completed</sp-meter>
 Medium 
<sp-meter size="m" progress="71">Tasks Completed</sp-meter>
 Large 
<sp-meter size="l" progress="71">Tasks Completed</sp-meter>
 Extra Large 
<sp-meter size="xl" progress="71">Tasks Completed</sp-meter>

Variants

Informative

By default, the informative variant can be used to represent a neutral or non-semantic value, such as the number of tutorials completed.

<sp-meter progress="50">Storage Space</sp-meter>

Positive

The positive variant can be used to represent a positive semantic value, such as when there’s a lot of space remaining. Use value variant="positive" to define a positive variant.

<sp-meter variant="positive" progress="50">Storage Space</sp-meter>

Notice

The notice variant can be used to warn users about a situation that may need to be addressed soon, such as when space remaining is becoming limited. Use value variant="notice" to define a notice variant.

<sp-meter variant="notice" progress="73">Storage Space</sp-meter>

Negative

The negative variant can be used to warn users about a critical situation that needs their urgent attention, such as when space remaining is becoming very limited. Use value variant="negative" to define a negative variant.

<sp-meter variant="negative" progress="92">Storage Space</sp-meter>

Side Label

A meter can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean [side-label] attribute to define where this content should appear.

<sp-meter side-label>Side Label</sp-meter>

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/meter

1.0.0 (2024-10-31)

BREAKING CHANGES

  • remove deprecated 'static' references (#4818)

0.49.0 (2024-10-15)

Features

  • add static-color to replace static (#4808) (43cf086)

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/meter

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/meter

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/meter

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/meter

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/meter

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/meter

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/meter

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/meter

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/meter

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/meter

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/meter

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/meter

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/meter

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/meter

0.42.0 (2024-03-19)

Bug Fixes

  • styles, theme: surface exports that omit Spectrum Vars proactively (#4142) (5b524c1)

Features

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/meter

0.41.1 (2024-02-22)

Note: Version bump only for package @spectrum-web-components/meter

0.41.0 (2024-02-13)

Note: Version bump only for package @spectrum-web-components/meter

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/meter

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/meter

0.40.3 (2024-01-11)

Bug Fixes

  • button: adds pending button, fixes #3162 (#3163) (71254ec)

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/meter

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/meter

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/meter

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/meter

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/meter

0.39.2 (2023-10-13)

Bug Fixes

  • update deps graph, update link docs (#3709) (2deb284)

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/meter

0.39.0 (2023-09-25)

Features

  • meter: add "variant" (coalescing various boolean attributes) and remove "over-background" attributes (#3514) (40e5f8a)

0.38.0 (2023-09-05)

Note: Version bump only for package @spectrum-web-components/meter

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/meter

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/meter

0.35.0 (2023-07-31)

Bug Fixes

  • meter, progress-bar, progress-circle: use innerText when label is not provided (#3483) (59358c7)
  • meter: added role meter progressbar in meter component (#3459) (d2eccef)

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/meter

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/meter

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/meter

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/meter

0.31.0 (2023-05-17)

Bug Fixes

  • meter,progress-bar: add i18n to progress delivery (c7e4020)

0.30.0 (2023-05-03)

Bug Fixes

  • address a11y issues raised by updating our dependencies (4f06477)
  • meter: remove comment (27687ec)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update export patterns (b2da444)
  • update to latest spectrum-css packages (a5ca19f)
  • use ObserveSlotText mixin to prevent white space from overriding label attribute (610fb4b)

Features

  • action-button: add action button pattern (03ac00a)
  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • include all Dev Mode files in side effects (f70817c)
  • meter: add meter pattern (fa092ba)
  • meter: update spectrum css input (683bb1a)
  • progress-bar: use core tokens (540552e)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • tabs: add sp-tab-panel element (b17d276)
  • use latest exports specification (a7ecf4b)
  • use SixedMixin to manage "size" property (8819821)

0.8.4 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/meter

0.8.3 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/meter

0.8.2 (2023-03-22)

Note: Version bump only for package @spectrum-web-components/meter

0.8.1 (2023-03-08)

Note: Version bump only for package @spectrum-web-components/meter

0.8.0 (2023-02-08)

Features

  • progress-bar: use core tokens (540552e)

0.7.8 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/meter

0.7.7 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/meter

0.7.6 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/meter

0.7.5 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/meter

0.7.4 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/meter

0.7.3 (2022-10-28)

Note: Version bump only for package @spectrum-web-components/meter

0.7.2 (2022-10-17)

Note: Version bump only for package @spectrum-web-components/meter

0.7.1 (2022-10-10)

Note: Version bump only for package @spectrum-web-components/meter

0.7.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.6.14 (2022-08-04)

Note: Version bump only for package @spectrum-web-components/meter

0.6.13 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/meter

0.6.12 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/meter

0.6.11 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/meter

0.6.10 (2022-05-27)

Note: Version bump only for package @spectrum-web-components/meter

0.6.9 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/meter

0.6.8 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/meter

0.6.7 (2022-03-30)

Note: Version bump only for package @spectrum-web-components/meter

0.6.6 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/meter

0.6.5 (2022-03-04)

Note: Version bump only for package @spectrum-web-components/meter

0.6.4 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/meter

0.6.3 (2022-01-26)

Note: Version bump only for package @spectrum-web-components/meter

0.6.2 (2022-01-07)

Note: Version bump only for package @spectrum-web-components/meter

0.6.1 (2021-12-13)

Note: Version bump only for package @spectrum-web-components/meter

0.6.0 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/meter

0.5.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/meter

0.5.0 (2021-11-02)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.4.10 (2021-10-12)

Note: Version bump only for package @spectrum-web-components/meter

0.4.9 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/meter

0.4.8 (2021-09-13)

Note: Version bump only for package @spectrum-web-components/meter

0.4.7 (2021-08-24)

Note: Version bump only for package @spectrum-web-components/meter

0.4.6 (2021-08-17)

Note: Version bump only for package @spectrum-web-components/meter

0.4.5 (2021-08-03)

Note: Version bump only for package @spectrum-web-components/meter

0.4.4 (2021-07-22)

Note: Version bump only for package @spectrum-web-components/meter

0.4.3 (2021-07-01)

Note: Version bump only for package @spectrum-web-components/meter

0.4.2 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/meter

0.4.1 (2021-06-07)

Bug Fixes

  • use ObserveSlotText mixin to prevent white space from overriding label attribute (610fb4b)

0.4.0 (2021-05-24)

Features

  • tabs: add sp-tab-panel element (b17d276)

0.3.7 (2021-05-12)

Note: Version bump only for package @spectrum-web-components/meter

0.3.6 (2021-04-15)

Note: Version bump only for package @spectrum-web-components/meter

0.3.5 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/meter

0.3.4 (2021-03-29)

Note: Version bump only for package @spectrum-web-components/meter

0.3.3 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/meter

0.3.2 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/meter

0.3.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/meter

0.3.0 (2021-03-04)

Features

  • use latest exports specification (a7ecf4b)

0.2.3 (2021-02-11)

Bug Fixes

  • update to latest spectrum-css packages (a5ca19f)

0.2.2 (2021-02-02)

Note: Version bump only for package @spectrum-web-components/meter

0.2.1 (2021-01-28)

Note: Version bump only for package @spectrum-web-components/meter

0.2.0 (2021-01-21)

Bug Fixes

  • address a11y issues raised by updating our dependencies (4f06477)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update export patterns (b2da444)
  • meter: remove comment (27687ec)

Features

  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • use SixedMixin to manage "size" property (8819821)
  • action-button: add action button pattern (03ac00a)
  • meter: add meter pattern (fa092ba)
  • meter: update spectrum css input (683bb1a)

0.1.0 (2021-01-13)

Bug Fixes

  • stop merging selectors in a way that alters the cascade (369388f)
  • update export patterns (b2da444)
  • meter: remove comment (27687ec)

Features

  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • use SixedMixin to manage "size" property (8819821)
  • action-button: add action button pattern (03ac00a)
  • meter: add meter pattern (fa092ba)
  • meter: update spectrum css input (683bb1a)

Attributes and Properties

Property Attribute Type Default Description label label string '' progress progress number 0 sideLabel side-label boolean false staticColor static-color 'white' | undefined variant variant MeterVariants The variant applies specific styling when set to `negative`, `positive`, `notice` `variant` attribute is removed when not matching one of the above.

Slots

Name Description default slot text labeling the Meter