@vonage/vivid 5.19.0 → 5.20.0

package/unbundled/definition6.cjs

@@ -1,88 +1,42 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_decorate = require("./decorate.cjs");
-const require_delegates_aria = require("./delegates-aria.cjs");
-const require_base_progress = require("./base-progress.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
-let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/progress-ring/progress-ring.scss?inline
-var progress_ring_default = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.connotation-cta{--_connotation-color-firm:var(--vvd-progress-ring-cta-firm,var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm:var(--vvd-progress-ring-alert-firm,var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm:var(--vvd-progress-ring-success-firm,var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm:var(--vvd-progress-ring-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}";
-//#endregion
-//#region src/lib/progress-ring/progress-ring.ts
+//#region src/lib/visually-hidden/visually-hidden.ts
 /**
-* @public
-* @component progress-ring
+* @component visually-hidden
 */
-var ProgressRing = class extends require_delegates_aria.DelegatesAria(require_base_progress.BaseProgress) {};
-require_decorate.__decorate([_microsoft_fast_element.attr], ProgressRing.prototype, "connotation", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], ProgressRing.prototype, "size", void 0);
+var VisuallyHidden = class extends require_vivid_element.VividElement {};
 //#endregion
-//#region src/lib/progress-ring/progress-ring.template.ts
-var getClasses = ({ connotation, size, paused }) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", !!paused], [`connotation-${connotation}`, !!connotation], [`size-${size}`, !!size]);
-var progressSegments = 44;
-var ProgressRingTemplate = _microsoft_fast_element.html`<template>
-	<div
-		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
-		${require_delegates_aria.delegateAria({
-	role: "progressbar",
-	ariaValueNow: (x) => x.value,
-	ariaValueMin: (x) => x.min,
-	ariaValueMax: (x) => x.max
-})}
-	>
-		${(0, _microsoft_fast_element.when)((x) => typeof x.value === "number", _microsoft_fast_element.html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="determinate"
-						style="stroke-dasharray: ${(x) => progressSegments * x.percentComplete / 100}px ${progressSegments}px"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`)}
-		${(0, _microsoft_fast_element.when)((x) => typeof x.value !== "number", _microsoft_fast_element.html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="indeterminate-indicator-1"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`)}
-	</div>
-</template>`;
+//#region src/lib/visually-hidden/visually-hidden.scss?inline
+var visually_hidden_default = ":host{display:contents}slot:not(:focus-within){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;display:inline;position:absolute;overflow:hidden}";
 //#endregion
-//#region src/lib/progress-ring/definition.ts
-/**
-* @internal
-*/
-var progressRingDefinition = require_vivid_element.defineVividComponent("progress-ring", ProgressRing, ProgressRingTemplate, [], { styles: progress_ring_default });
+//#region src/lib/visually-hidden/visually-hidden.template.ts
+var VisuallyHiddenTemplate = () => _microsoft_fast_element.html`<slot></slot>`;
+//#endregion
+//#region src/lib/visually-hidden/definition.ts
+var visuallyHiddenDefinition = require_vivid_element.defineVividComponent("visually-hidden", VisuallyHidden, VisuallyHiddenTemplate, [], { styles: visually_hidden_default });
 /**
-* Registers the progress-ring  elements with the design system.
+* Registers the visually-hidden element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerProgressRing = require_vivid_element.createRegisterFunction(progressRingDefinition);
+var registerVisuallyHidden = require_vivid_element.createRegisterFunction(visuallyHiddenDefinition);
 //#endregion
-Object.defineProperty(exports, "ProgressRing", {
+Object.defineProperty(exports, "VisuallyHidden", {
 	enumerable: true,
 	get: function() {
-		return ProgressRing;
+		return VisuallyHidden;
 	}
 });
-Object.defineProperty(exports, "progressRingDefinition", {
+Object.defineProperty(exports, "registerVisuallyHidden", {
 	enumerable: true,
 	get: function() {
-		return progressRingDefinition;
+		return registerVisuallyHidden;
 	}
 });
-Object.defineProperty(exports, "registerProgressRing", {
+Object.defineProperty(exports, "visuallyHiddenDefinition", {
 	enumerable: true,
 	get: function() {
-		return registerProgressRing;
+		return visuallyHiddenDefinition;
 	}
 });

package/unbundled/definition6.js

@@ -1,69 +1,24 @@
-import { c as createRegisterFunction, s as defineVividComponent } from "./vivid-element.js";
-import { t as __decorate } from "./decorate.js";
-import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
-import { t as BaseProgress } from "./base-progress.js";
-import { attr, html, when } from "@microsoft/fast-element";
-import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/progress-ring/progress-ring.scss?inline
-var progress_ring_default = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.connotation-cta{--_connotation-color-firm:var(--vvd-progress-ring-cta-firm,var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm:var(--vvd-progress-ring-alert-firm,var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm:var(--vvd-progress-ring-success-firm,var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm:var(--vvd-progress-ring-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}";
-//#endregion
-//#region src/lib/progress-ring/progress-ring.ts
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { html } from "@microsoft/fast-element";
+//#region src/lib/visually-hidden/visually-hidden.ts
 /**
-* @public
-* @component progress-ring
+* @component visually-hidden
 */
-var ProgressRing = class extends DelegatesAria(BaseProgress) {};
-__decorate([attr], ProgressRing.prototype, "connotation", void 0);
-__decorate([attr], ProgressRing.prototype, "size", void 0);
+var VisuallyHidden = class extends VividElement {};
 //#endregion
-//#region src/lib/progress-ring/progress-ring.template.ts
-var getClasses = ({ connotation, size, paused }) => classNames("base", ["disabled", !!paused], [`connotation-${connotation}`, !!connotation], [`size-${size}`, !!size]);
-var progressSegments = 44;
+//#region src/lib/visually-hidden/visually-hidden.scss?inline
+var visually_hidden_default = ":host{display:contents}slot:not(:focus-within){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;display:inline;position:absolute;overflow:hidden}";
 //#endregion
-//#region src/lib/progress-ring/definition.ts
-/**
-* @internal
-*/
-var progressRingDefinition = defineVividComponent("progress-ring", ProgressRing, html`<template>
-	<div
-		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
-		${delegateAria({
-	role: "progressbar",
-	ariaValueNow: (x) => x.value,
-	ariaValueMin: (x) => x.min,
-	ariaValueMax: (x) => x.max
-})}
-	>
-		${when((x) => typeof x.value === "number", html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="determinate"
-						style="stroke-dasharray: ${(x) => progressSegments * x.percentComplete / 100}px ${progressSegments}px"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`)}
-		${when((x) => typeof x.value !== "number", html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="indeterminate-indicator-1"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`)}
-	</div>
-</template>`, [], { styles: progress_ring_default });
+//#region src/lib/visually-hidden/visually-hidden.template.ts
+var VisuallyHiddenTemplate = () => html`<slot></slot>`;
+//#endregion
+//#region src/lib/visually-hidden/definition.ts
+var visuallyHiddenDefinition = defineVividComponent("visually-hidden", VisuallyHidden, VisuallyHiddenTemplate, [], { styles: visually_hidden_default });
 /**
-* Registers the progress-ring  elements with the design system.
+* Registers the visually-hidden element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerProgressRing = createRegisterFunction(progressRingDefinition);
+var registerVisuallyHidden = createRegisterFunction(visuallyHiddenDefinition);
 //#endregion
-export { registerProgressRing as n, ProgressRing as r, progressRingDefinition as t };
+export { visuallyHiddenDefinition as n, VisuallyHidden as r, registerVisuallyHidden as t };