@vonage/vivid 3.48.0 → 3.49.0-preview.1

package/shared/definition35.cjs

@@ -0,0 +1,295 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition26.cjs');
+const definition$1 = require('./definition58.cjs');
+const affix = require('./affix.cjs');
+const ariaGlobal = require('./aria-global.cjs');
+const startEnd = require('./start-end.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const dom = require('./dom.cjs');
+const focus = require('./focus2.cjs');
+require('./index2.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+/**
+ * Determines if the element is a {@link (ListboxOption:class)}
+ *
+ * @param element - the element to test.
+ * @public
+ */
+function isListboxOption(el) {
+    return (dom.isHTMLElement(el) &&
+        (el.getAttribute("role") === "option" ||
+            el instanceof HTMLOptionElement));
+}
+/**
+ * An Option Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
+ *
+ * @slot start - Content which can be provided before the listbox option content
+ * @slot end - Content which can be provided after the listbox option content
+ * @slot - The default slot for listbox option content
+ * @csspart content - Wraps the listbox option content
+ *
+ * @public
+ */
+let ListboxOption$1 = class ListboxOption extends index.FoundationElement {
+    constructor(text, value, defaultSelected, selected) {
+        super();
+        /**
+         * The defaultSelected state of the option.
+         * @public
+         */
+        this.defaultSelected = false;
+        /**
+         * Tracks whether the "selected" property has been changed.
+         * @internal
+         */
+        this.dirtySelected = false;
+        /**
+         * The checked state of the control.
+         *
+         * @public
+         */
+        this.selected = this.defaultSelected;
+        /**
+         * Track whether the value has been changed from the initial value
+         */
+        this.dirtyValue = false;
+        if (text) {
+            this.textContent = text;
+        }
+        if (value) {
+            this.initialValue = value;
+        }
+        if (defaultSelected) {
+            this.defaultSelected = defaultSelected;
+        }
+        if (selected) {
+            this.selected = selected;
+        }
+        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
+        this.proxy.disabled = this.disabled;
+    }
+    /**
+     * Updates the ariaChecked property when the checked property changes.
+     *
+     * @param prev - the previous checked value
+     * @param next - the current checked value
+     *
+     * @public
+     */
+    checkedChanged(prev, next) {
+        if (typeof next === "boolean") {
+            this.ariaChecked = next ? "true" : "false";
+            return;
+        }
+        this.ariaChecked = null;
+    }
+    /**
+     * Updates the proxy's text content when the default slot changes.
+     * @param prev - the previous content value
+     * @param next - the current content value
+     *
+     * @internal
+     */
+    contentChanged(prev, next) {
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.textContent = this.textContent;
+        }
+        this.$emit("contentchange", null, { bubbles: true });
+    }
+    defaultSelectedChanged() {
+        if (!this.dirtySelected) {
+            this.selected = this.defaultSelected;
+            if (this.proxy instanceof HTMLOptionElement) {
+                this.proxy.selected = this.defaultSelected;
+            }
+        }
+    }
+    disabledChanged(prev, next) {
+        this.ariaDisabled = this.disabled ? "true" : "false";
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.disabled = this.disabled;
+        }
+    }
+    selectedAttributeChanged() {
+        this.defaultSelected = this.selectedAttribute;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.defaultSelected = this.defaultSelected;
+        }
+    }
+    selectedChanged() {
+        this.ariaSelected = this.selected ? "true" : "false";
+        if (!this.dirtySelected) {
+            this.dirtySelected = true;
+        }
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.selected = this.selected;
+        }
+    }
+    initialValueChanged(previous, next) {
+        // If the value is clean and the component is connected to the DOM
+        // then set value equal to the attribute value.
+        if (!this.dirtyValue) {
+            this.value = this.initialValue;
+            this.dirtyValue = false;
+        }
+    }
+    get label() {
+        var _a;
+        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get text() {
+        var _a, _b;
+        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
+    }
+    set value(next) {
+        const newValue = `${next !== null && next !== void 0 ? next : ""}`;
+        this._value = newValue;
+        this.dirtyValue = true;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.value = newValue;
+        }
+        index.Observable.notify(this, "value");
+    }
+    get value() {
+        var _a;
+        index.Observable.track(this, "value");
+        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get form() {
+        return this.proxy ? this.proxy.form : null;
+    }
+};
+index.__decorate([
+    index.observable
+], ListboxOption$1.prototype, "checked", void 0);
+index.__decorate([
+    index.observable
+], ListboxOption$1.prototype, "content", void 0);
+index.__decorate([
+    index.observable
+], ListboxOption$1.prototype, "defaultSelected", void 0);
+index.__decorate([
+    index.attr({ mode: "boolean" })
+], ListboxOption$1.prototype, "disabled", void 0);
+index.__decorate([
+    index.attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption$1.prototype, "selectedAttribute", void 0);
+index.__decorate([
+    index.observable
+], ListboxOption$1.prototype, "selected", void 0);
+index.__decorate([
+    index.attr({ attribute: "value", mode: "fromView" })
+], ListboxOption$1.prototype, "initialValue", void 0);
+/**
+ * States and properties relating to the ARIA `option` role.
+ *
+ * @public
+ */
+class DelegatesARIAListboxOption {
+}
+index.__decorate([
+    index.observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
+index.__decorate([
+    index.observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
+index.__decorate([
+    index.observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
+index.__decorate([
+    index.observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
+applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(ListboxOption$1, startEnd.StartEnd, DelegatesARIAListboxOption);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class ListboxOption extends ListboxOption$1 {
+  // #region overrides base class accessor
+  set text(value) {
+    this._text = value;
+  }
+  get text() {
+    return this._text ?? "";
+  }
+  get label() {
+    return this._label ?? this.text;
+  }
+  set label(value) {
+    this._label = value;
+  }
+  // #endregion overrides
+}
+__decorateClass([
+  index.attr({
+    attribute: "text"
+  })
+], ListboxOption.prototype, "_text", 2);
+__decorateClass([
+  index.attr({
+    attribute: "label"
+  })
+], ListboxOption.prototype, "_label", 2);
+applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing);
+
+const getClasses = ({
+  icon,
+  disabled,
+  selected,
+  checked
+}) => classNames.classNames(
+  "base",
+  ["disabled", disabled],
+  ["selected", Boolean(selected)],
+  ["active", Boolean(checked)],
+  ["icon", Boolean(icon)]
+);
+const ListboxOptionTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  const focusTemplate = focus.focusTemplateFactory(context);
+  return index.html`
+	<template
+		aria-checked="${(x) => x.ariaChecked}"
+		aria-disabled="${(x) => x.ariaDisabled}"
+		aria-posinset="${(x) => x.ariaPosInSet}"
+		aria-selected="${(x) => x.ariaSelected}"
+		aria-setsize="${(x) => x.ariaSetSize}"
+		role="option">
+		<div class="${getClasses}">
+			${() => focusTemplate}
+			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
+			${when.when((x) => x.text, index.html`<div class="text">${(x) => x.text}</div>`)}
+		</div>
+	</template>
+	`;
+};
+
+const styles = ":host([disabled]){cursor:not-allowed}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.focus-indicator{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent}:host(:not([aria-checked=true])) .focus-indicator{display:none}\n";
+
+const listboxOptionDefinition = ListboxOption.compose({
+  baseName: "option",
+  template: ListboxOptionTemplate,
+  styles
+});
+const listboxOptionRegistries = [listboxOptionDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const registerOption = index.registerFactory(listboxOptionRegistries);
+
+exports.ListboxOption = ListboxOption;
+exports.isListboxOption = isListboxOption;
+exports.listboxOptionDefinition = listboxOptionDefinition;
+exports.listboxOptionRegistries = listboxOptionRegistries;
+exports.registerOption = registerOption;

package/shared/definition36.cjs

@@ -0,0 +1,219 @@
+'use strict';
+
+const definition = require('./definition11.cjs');
+const index = require('./index.cjs');
+const enums = require('./enums.cjs');
+const slotted = require('./slotted.cjs');
+const ref = require('./ref.cjs');
+const children = require('./children.cjs');
+const repeat = require('./repeat.cjs');
+const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
+
+const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:14px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button[size=normal]{--base-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}\n";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+const MAX_DIGITS_AND_PLACEHOLDERS = 7;
+const totalConverter = {
+  fromView: (value) => parseInt(value, 10),
+  toView: (value) => value.toString()
+};
+class Pagination extends index.FoundationElement {
+  constructor() {
+    super();
+    this.navIcons = false;
+    this.total = 0;
+    this.selectedIndex = 0;
+    this.addEventListener("tabpressed", (e) => {
+      const { value: currentLabel, shiftKey } = e.detail;
+      const index = this.paginationButtons.findIndex((button) => Number(button.label) === currentLabel);
+      const focusDirection = shiftKey ? -1 : 1;
+      const newIndex = index + focusDirection;
+      if (newIndex < 0) {
+        return this.prevButton.focus();
+      }
+      if (newIndex > this.paginationButtons.length - 1) {
+        return this.nextButton.focus();
+      }
+      this.paginationButtons && this.paginationButtons[index + focusDirection].focus();
+    });
+  }
+  get pagesList() {
+    return new Array(this.total < MAX_DIGITS_AND_PLACEHOLDERS ? this.total : MAX_DIGITS_AND_PLACEHOLDERS).fill(0).map((_, i, arr) => {
+      if (i === 0)
+        return 1;
+      if (i === arr.length - 1)
+        return this.total;
+      if (this.selectedIndex !== void 0 && this.total > MAX_DIGITS_AND_PLACEHOLDERS) {
+        if (this.selectedIndex < 4) {
+          if (i === MAX_DIGITS_AND_PLACEHOLDERS - 2)
+            return "...";
+        }
+        if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
+          if (i > 1 && i < MAX_DIGITS_AND_PLACEHOLDERS - 2)
+            return this.selectedIndex + (i - 2);
+          if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2)
+            return "...";
+        }
+        if (this.selectedIndex > this.total - 5) {
+          if (i > 1)
+            return this.total - (6 - i);
+          if (i === 1)
+            return "...";
+        }
+      }
+      return i + 1;
+    });
+  }
+  totalChanged(_, newValue) {
+    if (newValue < 0) {
+      this.total = 0;
+    }
+    this.selectedIndex = 0;
+  }
+  selectedIndexChanged(oldValue, newValue) {
+    if (oldValue === void 0)
+      return;
+    this.$emit("pagination-change", { selectedIndex: newValue, total: this.total, oldIndex: oldValue });
+  }
+  paginationButtonsChanged(_, newValue) {
+    newValue.forEach((button) => {
+      button.shadowRoot.querySelector("button").setAttribute("part", "button");
+    });
+  }
+}
+__decorateClass([
+  index.attr
+], Pagination.prototype, "size", 2);
+__decorateClass([
+  index.attr
+], Pagination.prototype, "shape", 2);
+__decorateClass([
+  index.observable
+], Pagination.prototype, "paginationButtons", 2);
+__decorateClass([
+  index.observable
+], Pagination.prototype, "prevButton", 2);
+__decorateClass([
+  index.observable
+], Pagination.prototype, "nextButton", 2);
+__decorateClass([
+  index.attr({ attribute: "nav-icons", mode: "boolean" })
+], Pagination.prototype, "navIcons", 2);
+__decorateClass([
+  index.volatile
+], Pagination.prototype, "pagesList", 1);
+__decorateClass([
+  index.attr({ mode: "reflect", converter: totalConverter })
+], Pagination.prototype, "total", 2);
+__decorateClass([
+  index.attr({ mode: "reflect", converter: totalConverter, attribute: "selected-index" })
+], Pagination.prototype, "selectedIndex", 2);
+
+const ALLOWED_SIZES = [enums.Size.SuperCondensed, enums.Size.Condensed, enums.Size.Normal];
+const ALLOWED_SHAPES = [enums.Shape.Rounded, enums.Shape.Pill];
+const handleSelection = (value, { parent: x }) => {
+  return x.selectedIndex = Number(value) - 1;
+};
+const handleKeyDown = (value, { event, parent }) => {
+  if (event.key === " " || event.key === "Enter") {
+    handleSelection(value, { parent });
+  }
+  if (event.key === "Tab") {
+    event.target.dispatchEvent(
+      new CustomEvent("tabpressed", { detail: { value, shiftKey: event.shiftKey }, bubbles: true, composed: true })
+    );
+  }
+};
+const getClasses = (_) => classNames.classNames("control");
+function getButtonAppearance(value, { parent }) {
+  return parent.selectedIndex === Number(value) - 1 ? "filled" : "ghost";
+}
+const paginationButtonRenderer = (buttonTag) => index.html`
+	${when.when(
+  (value) => value !== "...",
+  index.html`
+		<${buttonTag} class="vwc-pagination-button"
+									label="${(value) => value}"
+									appearance="${getButtonAppearance}"
+									size="${(_, { parent: x }) => getPaginationSize(x)}"
+									shape="${(_, { parent: x }) => getPaginationShape(x)}"
+									style="inline-size: ${(value) => getPaginationButtonWidth(value)};"
+									tabindex="0"
+									aria-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
+									@click="${handleSelection}"
+									@keydown="${handleKeyDown}">
+		</${buttonTag}>
+	`
+)}
+	${when.when(
+  (value) => value === "...",
+  index.html`
+		<div
+			class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
+			...
+		</div>`
+)}`;
+const getPaginationSize = (x) => {
+  if (!x.size || !ALLOWED_SIZES.includes(x.size)) {
+    return enums.Size.SuperCondensed;
+  }
+  return x.size;
+};
+const getPaginationShape = (x) => {
+  if (!x.shape || !ALLOWED_SHAPES.includes(x.shape)) {
+    return enums.Shape.Rounded;
+  }
+  return x.shape;
+};
+const getPaginationButtonWidth = (value) => {
+  return `calc(var(--base-size) + ${String(value).length - 1}ch)`;
+};
+const PaginationTemplate = (context) => {
+  const buttonTag = context.tagFor(definition.Button);
+  const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
+  return index.html`
+	<div class="${getClasses}">
+		<${buttonTag} class="prev-button" ${ref.ref("prevButton")}
+									label="${(x) => !x.navIcons ? "Previous" : null}"
+									icon="${(x) => x.navIcons ? "chevron-left-line" : null}"
+									size="${getPaginationSize}"
+									shape="${getPaginationShape}"
+									?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
+									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
+		></${buttonTag}>
+		<div id="buttons-wrapper" class="buttons-wrapper" ${children.children({ property: "paginationButtons", filter: slotted.elements(buttonTag) })}>
+			${repeat.repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
+		</div>
+		<${buttonTag} class="next-button" ${ref.ref("nextButton")}
+									label="${(x) => !x.navIcons ? "Next" : null}"
+									icon="${(x) => x.navIcons ? "chevron-right-line" : null}"
+									size="${getPaginationSize}"
+									shape="${getPaginationShape}"
+									?disabled="${(x) => x.total === 0 || x.selectedIndex === x.total - 1}"
+									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex++}"
+		></${buttonTag}>
+</div>`;
+};
+
+const paginationDefinition = Pagination.compose({
+  baseName: "pagination",
+  template: PaginationTemplate,
+  styles
+});
+const paginationRegistries = [paginationDefinition(), definition.buttonRegistries];
+const registerPagination = index.registerFactory(paginationRegistries);
+
+exports.paginationDefinition = paginationDefinition;
+exports.paginationRegistries = paginationRegistries;
+exports.registerPagination = registerPagination;

package/shared/definition37.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+const index = require('./index.cjs');
+const baseProgress = require('./base-progress.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:disabled,.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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.base.size--5{--_size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--4{--_size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--3{--_size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--2{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--1{--_size:calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-1{--_size:calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-2{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-3{--_size:calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-4{--_size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-5{--_size:calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.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)))}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}\n";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class ProgressRing extends baseProgress.BaseProgress {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = null;
+  }
+}
+__decorateClass([
+  index.attr({ attribute: "aria-label" })
+], ProgressRing.prototype, "ariaLabel", 2);
+__decorateClass([
+  index.attr
+], ProgressRing.prototype, "connotation", 2);
+__decorateClass([
+  index.attr
+], ProgressRing.prototype, "size", 2);
+
+const getClasses = ({ connotation, size, paused }) => classNames.classNames(
+  "base",
+  ["disabled", !!paused],
+  [`connotation-${connotation}`, !!connotation],
+  [`size-${size}`, !!size]
+);
+const progressSegments = 44;
+const ProgressRingTemplate = (_) => index.html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
+<div
+        role="progressbar"
+        aria-label="${(x) => x.ariaLabel}"
+        aria-valuenow="${(x) => x.value}"
+        aria-valuemin="${(x) => x.min}"
+        aria-valuemax="${(x) => x.max}"
+        class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
+    >
+        ${when.when(
+  (x) => typeof x.value === "number",
+  index.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.when(
+  (x) => typeof x.value !== "number",
+  index.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>`;
+
+const progressRingDefinition = ProgressRing.compose({
+  baseName: "progress-ring",
+  template: ProgressRingTemplate,
+  styles
+});
+const progressRingRegistries = [progressRingDefinition()];
+const registerProgressRing = index.registerFactory(progressRingRegistries);
+
+exports.ProgressRing = ProgressRing;
+exports.progressRingDefinition = progressRingDefinition;
+exports.progressRingRegistries = progressRingRegistries;
+exports.registerProgressRing = registerProgressRing;