feat(meter): add kol-meter component derived from Progress (#9687)

Author: deleonio

packages/adapters/hydrate/test/__snapshots__/components.spec.js.mocha-snapshot

@@ -134,9 +134,9 @@ exports["Component hydration snapshots/renders kol-popover-button with renderToS
 
 exports["Component hydration snapshots/renders kol-popover-button with streamToString(0)"] = "<kol-popover-button _label=\"Test kol-popover-button\" s-mode=\"default\" class=\"sc-kol-popover-button-default-h hydrated\" style=\"visibility: hidden;\"><template shadowrootmode=\"open\"><style>/* CSS normalized */</style><kol-popover-button-wc class=\"sc-kol-popover-button-default hydrated\"><kol-button-wc class=\"kol-popover-button kol-popover-button--standalone hydrated\"><button aria-controls=\"[id]\" aria-expanded=\"false\" class=\"kol-button kol-button--normal kol-button--standalone\" type=\"button\"><span class=\"kol-span kol-button__text\"><span class=\"kol-span__container\"><span class=\"kol-span__label\">Test kol-popover-button</span><span aria-hidden=\"true\" class=\"kol-span__label\" hidden><slot name=\"expert\" slot=\"expert\" class=\"sc-kol-popover-button-default\"></slot></span></span></span></button></kol-button-wc><div id=\"[id]\" class=\"kol-popover kol-popover-button__popover\" popover=\"auto\"><div class=\"kol-popover__arrow kol-popover__arrow--bottom\"></div><slot class=\"sc-kol-popover-button-default\"></slot></div></kol-popover-button-wc></template>Test content</kol-popover-button>";
 
-exports["Component hydration snapshots/renders kol-progress with renderToString(0)"] = "<kol-progress _label=\"Test kol-progress\" _max=\"1\" _value=\"1\" s-mode=\"default\" class=\"sc-kol-progress-default-h hydrated\" style=\"visibility: hidden;\"><template shadowrootmode=\"open\"><style>/* CSS normalized */</style><div class=\"kol-progress sc-kol-progress-default\"><div aria-hidden=\"true\" class=\"kol-progress__bar sc-kol-progress-default\"><div class=\"kol-progress__bar-label sc-kol-progress-default\">Test kol-progress</div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\" class=\"sc-kol-progress-default\"><rect class=\"kol-progress__bar-background sc-kol-progress-default\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100%\"></rect><rect class=\"kol-progress__bar-border sc-kol-progress-default\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100%\"></rect><rect class=\"kol-progress__bar-progress sc-kol-progress-default\" x=\"3\" y=\"3\" height=\"7\" rx=\"3.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" style=\"width: calc(100% - 4px);\"></rect></svg><div class=\"kol-progress__bar-value sc-kol-progress-default\" style=\"width: 3ch;\">100</div><div class=\"kol-progress__bar-unit sc-kol-progress-default\">%</div></div><progress class=\"visually-hidden sc-kol-progress-default\" aria-busy=\"false\" max=\"1\" value=\"1\"></progress><span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden sc-kol-progress-default\">100 %</span></div></template></kol-progress>";
+exports["Component hydration snapshots/renders kol-progress with renderToString(0)"] = "<kol-progress _label=\"Test kol-progress\" _max=\"1\" _value=\"1\" s-mode=\"default\" class=\"sc-kol-progress-default-h hydrated\" style=\"visibility: hidden;\"><template shadowrootmode=\"open\"><style>/* CSS normalized */</style><div class=\"kol-progress sc-kol-progress-default\"><div aria-hidden=\"true\" class=\"kol-progress__bar sc-kol-progress-default\"><div class=\"kol-progress__bar-label sc-kol-progress-default\">Test kol-progress</div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\" class=\"sc-kol-progress-default\"><rect class=\"kol-progress__bar-background sc-kol-progress-default\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100%\"></rect><rect class=\"kol-progress__bar-border sc-kol-progress-default\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100%\"></rect><rect class=\"kol-progress__bar-progress sc-kol-progress-default\" x=\"3\" y=\"3\" height=\"7\" rx=\"3.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" style=\"width: calc(100% - 4px);\"></rect></svg><div class=\"kol-progress__bar-value sc-kol-progress-default\" style=\"width: 3ch;\">100</div><div class=\"kol-progress__bar-unit sc-kol-progress-default\">%</div></div><progress class=\"visually-hidden sc-kol-progress-default\" aria-busy=\"false\" max=\"1\" value=\"1\"></progress><span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden sc-kol-progress-default\">kol-live-value</span></div></template></kol-progress>";
 
-exports["Component hydration snapshots/renders kol-progress with streamToString(0)"] = "<kol-progress _label=\"Test kol-progress\" _max=\"1\" _value=\"1\" s-mode=\"default\" class=\"sc-kol-progress-default-h hydrated\" style=\"visibility: hidden;\"><template shadowrootmode=\"open\"><style>/* CSS normalized */</style><div class=\"kol-progress sc-kol-progress-default\"><div aria-hidden=\"true\" class=\"kol-progress__bar sc-kol-progress-default\"><div class=\"kol-progress__bar-label sc-kol-progress-default\">Test kol-progress</div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\" class=\"sc-kol-progress-default\"><rect class=\"kol-progress__bar-background sc-kol-progress-default\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100%\"></rect><rect class=\"kol-progress__bar-border sc-kol-progress-default\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100%\"></rect><rect class=\"kol-progress__bar-progress sc-kol-progress-default\" x=\"3\" y=\"3\" height=\"7\" rx=\"3.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" style=\"width: calc(100% - 4px);\"></rect></svg><div class=\"kol-progress__bar-value sc-kol-progress-default\" style=\"width: 3ch;\">100</div><div class=\"kol-progress__bar-unit sc-kol-progress-default\">%</div></div><progress class=\"visually-hidden sc-kol-progress-default\" aria-busy=\"false\" max=\"1\" value=\"1\"></progress><span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden sc-kol-progress-default\">100 %</span></div></template></kol-progress>";
+exports["Component hydration snapshots/renders kol-progress with streamToString(0)"] = "<kol-progress _label=\"Test kol-progress\" _max=\"1\" _value=\"1\" s-mode=\"default\" class=\"sc-kol-progress-default-h hydrated\" style=\"visibility: hidden;\"><template shadowrootmode=\"open\"><style>/* CSS normalized */</style><div class=\"kol-progress sc-kol-progress-default\"><div aria-hidden=\"true\" class=\"kol-progress__bar sc-kol-progress-default\"><div class=\"kol-progress__bar-label sc-kol-progress-default\">Test kol-progress</div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\" class=\"sc-kol-progress-default\"><rect class=\"kol-progress__bar-background sc-kol-progress-default\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100%\"></rect><rect class=\"kol-progress__bar-border sc-kol-progress-default\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100%\"></rect><rect class=\"kol-progress__bar-progress sc-kol-progress-default\" x=\"3\" y=\"3\" height=\"7\" rx=\"3.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" style=\"width: calc(100% - 4px);\"></rect></svg><div class=\"kol-progress__bar-value sc-kol-progress-default\" style=\"width: 3ch;\">100</div><div class=\"kol-progress__bar-unit sc-kol-progress-default\">%</div></div><progress class=\"visually-hidden sc-kol-progress-default\" aria-busy=\"false\" max=\"1\" value=\"1\"></progress><span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden sc-kol-progress-default\">kol-live-value</span></div></template></kol-progress>";
 
 exports["Component hydration snapshots/renders kol-quote with renderToString(0)"] = "<kol-quote _href=\"Test value\" _label=\"Test kol-quote\" _quote=\"Test value\" s-mode=\"default\" class=\"sc-kol-quote-default-h hydrated\" style=\"visibility: hidden;\"><template shadowrootmode=\"open\"><style>/* CSS normalized */</style><figure class=\"kol-quote kol-quote--inline sc-kol-quote-default\"><q class=\"kol-quote__quote sc-kol-quote-default\" cite=\"Test value\">Test value<span aria-hidden=\"true\" hidden class=\"sc-kol-quote-default\"><slot name=\"expert\" class=\"sc-kol-quote-default\"></slot></span></q><figcaption class=\"kol-quote__figcaption sc-kol-quote-default\"><cite class=\"kol-quote__cite sc-kol-quote-default\"><kol-link class=\"sc-kol-quote-default sc-kol-link-default-h hydrated\" s-mode=\"default\" style=\"visibility: hidden;\"><template shadowrootmode=\"open\"><style>/* CSS normalized */</style><kol-link-wc class=\"sc-kol-link-default hydrated\"><a href=\"Test value\" target=\"_blank\" rel=\"noopener\" class=\"kol-link kol-link--external-link kol-link--inline\"><span class=\"kol-span kol-link__text\"><span class=\"kol-span__container\"><span class=\"kol-span__label\">Test kol-quote</span><span aria-hidden=\"true\" class=\"kol-span__label\" hidden><slot name=\"expert\" slot=\"expert\" class=\"sc-kol-link-default\"></slot></span></span></span><i aria-label=\"kol-open-link-in-tab\" class=\"kol-icon kol-icon__icon kolicon-link-external kol-link__icon\" role=\"img\"></i></a></kol-link-wc></template></kol-link></cite></figcaption></figure></template></kol-quote>";
 
@@ -198,3 +198,7 @@ exports["Component hydration snapshots/renders kol-version with renderToString(0
 
 exports["Component hydration snapshots/renders kol-version with streamToString(0)"] = "<kol-version _label=\"Test kol-version\" s-mode=\"default\" class=\"sc-kol-version-default-h kol-version sc-kol-version-default hydrated\" style=\"visibility: hidden;\"><template shadowrootmode=\"open\"><style>/* CSS normalized */</style><kol-badge class=\"sc-kol-version-default sc-kol-badge-default-h hydrated\" s-mode=\"default\" style=\"visibility: hidden;\"><template shadowrootmode=\"open\"><style>/* CSS normalized */</style><span class=\"kol-badge sc-kol-badge-default\" style=\"background-color: #bec5c9; color: #323537;\"><span class=\"kol-span kol-badge__label sc-kol-badge-default\"><span class=\"kol-span__container sc-kol-badge-default\"><i aria-label=\"kol-version\" class=\"kol-icon kol-icon__icon kolicon-version kol-span__icon kol-span__icon--left sc-kol-badge-default\" role=\"img\"></i><span class=\"kol-span__label md sc-kol-badge-default\">Test kol-version</span><span aria-hidden=\"true\" class=\"kol-span__label sc-kol-badge-default\" hidden></span></span></span></span></template></kol-badge></template></kol-version>";
 
+exports["Component hydration snapshots/renders kol-meter with renderToString(0)"] = "<kol-meter _label=\"Test kol-meter\" _max=\"1\" _value=\"1\" s-mode=\"default\" class=\"sc-kol-meter-default-h hydrated\" style=\"visibility: hidden;\"><template shadowrootmode=\"open\"><style>/* CSS normalized */</style><div class=\"kol-meter sc-kol-meter-default\"><div aria-hidden=\"true\" class=\"kol-meter__bar sc-kol-meter-default\"><div class=\"kol-meter__bar-label sc-kol-meter-default\">Test kol-meter</div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\" class=\"sc-kol-meter-default\"><rect class=\"kol-meter__bar-background sc-kol-meter-default\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100%\"></rect><rect class=\"kol-meter__bar-border sc-kol-meter-default\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100%\"></rect><rect class=\"kol-meter__bar-fill kol-meter__bar-fill--optimum sc-kol-meter-default\" x=\"3\" y=\"3\" height=\"7\" rx=\"3.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" style=\"width: calc(100% - 4px);\"></rect></svg><span class=\"kol-meter__value-unit sc-kol-meter-default\"><span class=\"kol-meter__value sc-kol-meter-default\" style=\"width: 3ch;\">100</span> <span class=\"kol-meter__unit sc-kol-meter-default\">%</span></span></div><meter aria-label=\"Test kol-meter\" class=\"visually-hidden sc-kol-meter-default\" max=\"1\" min=\"0\" value=\"1\"></meter><span aria-live=\"polite\" aria-relevant=\"additions text\" class=\"visually-hidden sc-kol-meter-default\">kol-live-value</span></div></template></kol-meter>";
+
+exports["Component hydration snapshots/renders kol-meter with streamToString(0)"] = "<kol-meter _label=\"Test kol-meter\" _max=\"1\" _value=\"1\" s-mode=\"default\" class=\"sc-kol-meter-default-h hydrated\" style=\"visibility: hidden;\"><template shadowrootmode=\"open\"><style>/* CSS normalized */</style><div class=\"kol-meter sc-kol-meter-default\"><div aria-hidden=\"true\" class=\"kol-meter__bar sc-kol-meter-default\"><div class=\"kol-meter__bar-label sc-kol-meter-default\">Test kol-meter</div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\" class=\"sc-kol-meter-default\"><rect class=\"kol-meter__bar-background sc-kol-meter-default\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100%\"></rect><rect class=\"kol-meter__bar-border sc-kol-meter-default\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100%\"></rect><rect class=\"kol-meter__bar-fill kol-meter__bar-fill--optimum sc-kol-meter-default\" x=\"3\" y=\"3\" height=\"7\" rx=\"3.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" style=\"width: calc(100% - 4px);\"></rect></svg><span class=\"kol-meter__value-unit sc-kol-meter-default\"><span class=\"kol-meter__value sc-kol-meter-default\" style=\"width: 3ch;\">100</span> <span class=\"kol-meter__unit sc-kol-meter-default\">%</span></span></div><meter aria-label=\"Test kol-meter\" class=\"visually-hidden sc-kol-meter-default\" max=\"1\" min=\"0\" value=\"1\"></meter><span aria-live=\"polite\" aria-relevant=\"additions text\" class=\"visually-hidden sc-kol-meter-default\">kol-live-value</span></div></template></kol-meter>";
+

packages/components/src/components/component-list.ts

@@ -32,6 +32,7 @@ import { KolKolibri } from './kolibri/shadow';
 import { KolLinkButton } from './link-button/shadow';
 import { KolLinkWc } from './link/component';
 import { KolLink } from './link/shadow';
+import { KolMeter } from './meter/component';
 import { KolModal } from './modal/shadow';
 import { KolNav } from './nav/shadow';
 import { KolPagination } from './pagination/shadow';
@@ -89,6 +90,7 @@ export const COMPONENTS = [
 	KolLink,
 	KolLinkButton,
 	KolLinkWc,
+	KolMeter,
 	KolModal,
 	KolNav,
 	KolPagination,