@vonage/vivid 2.36.3 → 3.0.0-next.100

package/package.json

@@ -1,328 +1,70 @@
 {
   "name": "@vonage/vivid",
-  "version": "2.36.3",
-  "description": "A bundled version of all Vivid components",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "version": "3.0.0-next.100",
+  "type": "module",
+  "module": "./index.js",
+  "main": "./index.js",
+  "homepage": "https://vivid.deno.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vonage/vivid-3",
+    "directory": "libs/components"
   },
-  "sideEffects": false,
-  "keywords": [
-    "Vivid",
-    "Components",
-    "All"
-  ],
-  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Vonage/vivid-3/issues"
+  },
+  "license": "Apache-2.0",
+  "exports": {
+    "./accordion": "./accordion",
+    "./accordion-item": "./accordion-item",
+    "./action-group": "./action-group",
+    "./avatar": "./avatar",
+    "./badge": "./badge",
+    "./banner": "./banner",
+    "./breadcrumb": "./breadcrumb",
+    "./breadcrumb-item": "./breadcrumb-item",
+    "./button": "./button",
+    "./calendar": "./calendar",
+    "./calendar-event": "./calendar-event",
+    "./card": "./card",
+    "./checkbox": "./checkbox",
+    "./elevation": "./elevation",
+    "./dialog": "./dialog",
+    "./divider": "./divider",
+    "./fab": "./fab",
+    "./icon": "./icon",
+    "./layout": "./layout",
+    "./listbox": "./listbox",
+    "./menu": "./menu",
+    "./menu-item": "./menu-item",
+    "./nav": "./nav",
+    "./nav-disclosure": "./nav-disclosure",
+    "./nav-item": "./nav-item",
+    "./number-field": "./number-field",
+    "./note": "./note",
+    "./option": "./listbox-option",
+    "./popup": "./popup",
+    "./progress": "./progress",
+    "./progress-ring": "./progress-ring",
+    "./radio": "./radio",
+    "./radio-group": "./radio-group",
+    "./side-drawer": "./side-drawer",
+    "./slider": "./slider",
+    "./switch": "./switch",
+    "./text-field": "./text-field",
+    "./text-area": "./text-area",
+    "./tooltip": "./tooltip"
+  },
+  "types": "./index.d.ts",
   "dependencies": {
-    "@vonage/vwc-breadcrumb": "2.36.3",
-    "@vonage/vwc-icon-button-toggle": "2.36.3",
-    "@vonage/vwc-notched-outline": "2.36.3",
-    "@vonage/vwc-scheme-select": "2.36.3",
-    "@vonage/vwc-top-app-bar-fixed": "2.36.3",
-    "@vonage/vwc-audio": "2.36.3",
-    "@vonage/vwc-button-toggle-group": "2.36.3",
-    "@vonage/vwc-card": "2.36.3",
-    "@vonage/vwc-checkbox": "2.36.3",
-    "@vonage/vwc-circular-progress": "2.36.3",
-    "@vonage/vwc-datepicker": "2.36.3",
-    "@vonage/vwc-dialog": "2.36.3",
-    "@vonage/vwc-fab": "2.36.3",
-    "@vonage/vwc-file-picker": "2.36.3",
-    "@vonage/vwc-formfield": "2.36.3",
-    "@vonage/vwc-helper-message": "2.36.3",
-    "@vonage/vwc-icon-button": "2.36.3",
-    "@vonage/vwc-icon": "2.36.3",
-    "@vonage/vwc-keypad": "2.36.3",
-    "@vonage/vwc-layout": "2.36.3",
-    "@vonage/vwc-linear-progress": "2.36.3",
-    "@vonage/vwc-menu": "2.36.3",
-    "@vonage/vwc-note": "2.36.3",
-    "@vonage/vwc-pagination": "2.36.3",
-    "@vonage/vwc-radio": "2.36.3",
-    "@vonage/vwc-slider": "2.36.3",
-    "@vonage/vwc-snackbar": "2.36.3",
-    "@vonage/vwc-dropdown": "2.36.3",
-    "@vonage/vwc-surface": "2.36.3",
-    "@vonage/vwc-switch": "2.36.3",
-    "@vonage/vwc-elevation": "2.36.3",
-    "@vonage/vwc-textarea": "2.36.3",
-    "@vonage/vwc-theme-switch": "2.36.3",
-    "@vonage/vwc-top-app-bar": "2.36.3",
-    "@vonage/vwc-accordion": "2.36.3",
-    "@vonage/vwc-action-group": "2.36.3",
-    "@vonage/vwc-badge": "2.36.3",
-    "@vonage/vwc-drawer": "2.36.3",
-    "@vonage/vwc-popup": "2.36.3",
-    "@vonage/vwc-select": "2.36.3",
-    "@vonage/vwc-side-drawer": "2.36.3",
-    "@vonage/vwc-tags": "2.36.3",
-    "@vonage/vwc-empty-state": "2.36.3",
-    "@vonage/vwc-text": "2.36.3",
-    "@vonage/vwc-tooltip": "2.36.3",
-    "@vonage/vwc-banner": "2.36.3",
-    "@vonage/vwc-button": "2.36.3",
-    "@vonage/vwc-expansion-panel": "2.36.3",
-    "@vonage/vwc-media-controller": "2.36.3",
-    "@vonage/vwc-breadcrumb-item": "2.36.3",
-    "@vonage/vwc-carousel": "2.36.3",
-    "@vonage/vwc-tab-bar": "2.36.3",
-    "@vonage/vwc-data-grid": "2.36.3",
-    "@vonage/vwc-textfield": "2.36.3",
-    "@vonage/vwc-calendar": "2.36.3",
-    "@vonage/vwc-list": "2.36.3",
-    "@vonage/vvd-core": "2.36.3",
-    "@vonage/vvd-context": "2.36.3"
+    "rollup-plugin-postcss": "4.0.2",
+    "@microsoft/fast-element": "1.11.0",
+    "@microsoft/fast-foundation": "2.47.0",
+    "@microsoft/fast-web-utilities": "5.4.1",
+    "ramda": "0.27.2",
+    "dialog-polyfill": "0.5.6",
+    "@floating-ui/dom": "0.5.4",
+    "markdown-it": "12.3.2"
   },
-  "com_vonage": {
-    "components": [
-      {
-        "component_name": "vwc-icon-button-toggle",
-        "export_name": "VWCIconButtonToggle"
-      },
-      {
-        "component_name": "vwc-notched-outline",
-        "export_name": "VWCNotchedOutline"
-      },
-      {
-        "component_name": "vwc-scheme-select",
-        "export_name": "VWCSchemeSelect"
-      },
-      {
-        "component_name": "vwc-top-app-bar-fixed",
-        "export_name": "VWCTopAppBarFixed"
-      },
-      {
-        "component_name": "vwc-audio",
-        "export_name": "VWCAudio"
-      },
-      {
-        "component_name": "vwc-button-toggle-group",
-        "export_name": "VWCButtonToggleGroup"
-      },
-      {
-        "component_name": "vwc-card",
-        "export_name": "VWCCard"
-      },
-      {
-        "component_name": "vwc-checkbox",
-        "export_name": "VWCCheckbox"
-      },
-      {
-        "component_name": "vwc-circular-progress",
-        "export_name": "VWCCircularProgress"
-      },
-      {
-        "component_name": "vwc-datepicker",
-        "export_name": "VWCDatepicker"
-      },
-      {
-        "component_name": "vwc-dialog",
-        "export_name": "VWCDialog"
-      },
-      {
-        "component_name": "vwc-fab",
-        "export_name": "VWCFab"
-      },
-      {
-        "component_name": "vwc-file-picker",
-        "export_name": "VWCFilePicker"
-      },
-      {
-        "component_name": "vwc-formfield",
-        "export_name": "VWCFormfield"
-      },
-      {
-        "component_name": "vwc-helper-message",
-        "export_name": "VWCHelperMessage"
-      },
-      {
-        "component_name": "vwc-icon-button",
-        "export_name": "VWCIconButton"
-      },
-      {
-        "component_name": "vwc-icon",
-        "export_name": "VWCIcon"
-      },
-      {
-        "component_name": "vwc-keypad",
-        "export_name": "VWCKeypad"
-      },
-      {
-        "component_name": "vwc-layout",
-        "export_name": "VWCLayout"
-      },
-      {
-        "component_name": "vwc-linear-progress",
-        "export_name": "VWCLinearProgress"
-      },
-      {
-        "component_name": "vwc-menu",
-        "export_name": "VWCMenu"
-      },
-      {
-        "component_name": "vwc-note",
-        "export_name": "VWCNote"
-      },
-      {
-        "component_name": "vwc-pagination",
-        "export_name": "VWCPagination"
-      },
-      {
-        "component_name": "vwc-radio",
-        "export_name": "VWCRadio"
-      },
-      {
-        "component_name": "vwc-slider",
-        "export_name": "VWCSlider"
-      },
-      {
-        "component_name": "vwc-snackbar",
-        "export_name": "VWCSnackbar"
-      },
-      {
-        "component_name": "vwc-dropdown",
-        "export_name": "VWCDropdown"
-      },
-      {
-        "component_name": "vwc-surface",
-        "export_name": "VWCSurface"
-      },
-      {
-        "component_name": "vwc-switch",
-        "export_name": "VWCSwitch"
-      },
-      {
-        "component_name": "vwc-elevation",
-        "export_name": "VWCElevation"
-      },
-      {
-        "component_name": "vwc-textarea",
-        "export_name": "VWCTextarea"
-      },
-      {
-        "component_name": "vwc-theme-switch",
-        "export_name": "VWCThemeSwitch"
-      },
-      {
-        "component_name": "vwc-top-app-bar",
-        "export_name": "VWCTopAppBar"
-      },
-      {
-        "component_name": "vwc-accordion",
-        "export_name": "VWCAccordion"
-      },
-      {
-        "component_name": "vwc-action-group",
-        "export_name": "VWCActionGroup"
-      },
-      {
-        "component_name": "vwc-badge",
-        "export_name": "VWCBadge"
-      },
-      {
-        "component_name": "vwc-drawer",
-        "export_name": "VWCDrawer"
-      },
-      {
-        "component_name": "vwc-popup",
-        "export_name": "VWCPopup"
-      },
-      {
-        "component_name": "vwc-select",
-        "export_name": "VWCSelect"
-      },
-      {
-        "component_name": "vwc-side-drawer",
-        "export_name": "VWCSideDrawer"
-      },
-      {
-        "component_name": "vwc-tag",
-        "export_name": "VWCTag"
-      },
-      {
-        "component_name": "vwc-empty-state",
-        "export_name": "VWCEmptyState"
-      },
-      {
-        "component_name": "vwc-text",
-        "export_name": "VWCText"
-      },
-      {
-        "component_name": "vwc-tooltip",
-        "export_name": "VWCTooltip"
-      },
-      {
-        "component_name": "vwc-banner",
-        "export_name": "VWCBanner"
-      },
-      {
-        "component_name": "vwc-button",
-        "export_name": "VWCButton"
-      },
-      {
-        "component_name": "vwc-expansion-panel",
-        "export_name": "VWCExpansionPanel"
-      },
-      {
-        "component_name": "vwc-media-controller",
-        "export_name": "VWCMediaController"
-      },
-      {
-        "component_name": "vwc-scrub-bar",
-        "export_name": "VWCScrubBar"
-      },
-      {
-        "component_name": "vwc-carousel-item",
-        "export_name": "VWCCarouselItem"
-      },
-      {
-        "component_name": "vwc-carousel",
-        "export_name": "VWCCarousel"
-      },
-      {
-        "component_name": "vwc-tab-bar",
-        "export_name": "VWCTabBar"
-      },
-      {
-        "component_name": "vwc-tab",
-        "export_name": "VWCTab"
-      },
-      {
-        "component_name": "vwc-data-grid",
-        "export_name": "VWCDataGrid"
-      },
-      {
-        "component_name": "vwc-textfield",
-        "export_name": "VWCTextfield"
-      },
-      {
-        "component_name": "vwc-calendar-event",
-        "export_name": "VWCCalendarEvent"
-      },
-      {
-        "component_name": "vwc-calendar",
-        "export_name": "VWCCalendar"
-      },
-      {
-        "component_name": "vwc-check-list-item",
-        "export_name": "VWCCheckListItem"
-      },
-      {
-        "component_name": "vwc-list-expansion-panel",
-        "export_name": "VWCListExpansionPanel"
-      },
-      {
-        "component_name": "vwc-list-item",
-        "export_name": "VWCListItem"
-      },
-      {
-        "component_name": "vwc-list",
-        "export_name": "VWCList"
-      },
-      {
-        "component_name": "vwc-radio-list-item",
-        "export_name": "VWCRadioListItem"
-      }
-    ]
-  }
-}
+  "peerDependencies": {}
+}

package/popup/index.js

@@ -0,0 +1,27 @@
+import '../shared/index3.js';
+import '../shared/index2.js';
+import '../shared/index.js';
+export { v as vividPopup } from '../shared/index6.js';
+import '../shared/class-names.js';
+import '../icon/index.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/string-trim.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+import '../focus/index.js';
+import '../shared/focus.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-keys.js';
+import '../shared/affix.js';
+import '../shared/button.js';
+import '../shared/apply-mixins.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
+import '../shared/aria-global.js';
+import '../shared/start-end.js';
+import '../shared/ref.js';
+import '../shared/focus2.js';
+import '../shared/es.object.assign.js';

package/progress/index.js

@@ -0,0 +1,97 @@
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import '../shared/web.dom-collections.iterator.js';
+import { c as classofRaw, _ as _export, f as functionUncurryThis } from '../shared/export.js';
+import { B as BaseProgress } from '../shared/base-progress.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/object-keys.js';
+import '../shared/iterators.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 15 Nov 2022 13:39:19 GMT\n */\n.base {\n  height: 6px;\n  align-items: center;\n  margin: 0;\n  outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.base:not(.connotation-pacific).connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base:not(.connotation-pacific).connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base:not(.connotation-pacific):not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.base.connotation-pacific {\n  --_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600));\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 100%;\n  inline-size: 100%;\n  /* Shape */\n}\n.base:not(.shape-sharp) .progress {\n  border-radius: 3px;\n}\n\n.indeterminate {\n  display: flex;\n  background-color: var(--_connotation-color-primary);\n  block-size: 100%;\n  border-radius: inherit;\n  inline-size: 100%;\n}\n\n.determinate {\n  background-color: var(--_connotation-color-primary);\n  block-size: 100%;\n  border-radius: inherit;\n  transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n  background-image: var(--_connotation-color-primary);\n}\n.reverse .determinate {\n  position: absolute;\n  right: 0;\n}\n.paused .determinate {\n  background-color: var(--vvd-color-neutral-300);\n}\n\n.indicator-1 {\n  animation: indeterminate-1 2s infinite;\n  inline-size: 30%;\n}\n\n.indicator-2 {\n  animation: indeterminate-2 2s infinite;\n  inline-size: 60%;\n}\n\n.indicator-1,\n.indicator-2 {\n  position: absolute;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 100%;\n  opacity: 0;\n}\n.connotation-pacific .indicator-1,\n.connotation-pacific .indicator-2 {\n  background-image: var(--_connotation-color-primary);\n}\n.paused .indicator-1,\n.paused .indicator-2 {\n  animation-play-state: paused;\n  background-color: var(--_connotation-color-primary);\n}\n.reverse .indicator-1,\n.reverse .indicator-2 {\n  animation-direction: reverse;\n}\n\n@keyframes indeterminate-1 {\n  0% {\n    opacity: 1;\n    transform: translateX(-100%);\n  }\n  70% {\n    opacity: 1;\n    transform: translateX(300%);\n  }\n  70.01% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(300%);\n  }\n}\n@keyframes indeterminate-2 {\n  0% {\n    opacity: 0;\n    transform: translateX(-150%);\n  }\n  29.99% {\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n    transform: translateX(-150%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(166.66%);\n  }\n}";
+
+var classof = classofRaw;
+
+// `IsArray` abstract operation
+// https://tc39.es/ecma262/#sec-isarray
+// eslint-disable-next-line es/no-array-isarray -- safe
+var isArray$1 = Array.isArray || function isArray(argument) {
+  return classof(argument) == 'Array';
+};
+
+var $ = _export;
+var uncurryThis = functionUncurryThis;
+var isArray = isArray$1;
+
+var nativeReverse = uncurryThis([].reverse);
+var test = [1, 2];
+
+// `Array.prototype.reverse` method
+// https://tc39.es/ecma262/#sec-array.prototype.reverse
+// fix for Safari 12.0 bug
+// https://bugs.webkit.org/show_bug.cgi?id=188794
+$({ target: 'Array', proto: true, forced: String(test) === String(test.reverse()) }, {
+  reverse: function reverse() {
+    // eslint-disable-next-line no-self-assign -- dirty hack
+    if (isArray(this)) this.length = this.length;
+    return nativeReverse(this);
+  }
+});
+
+class Progress extends BaseProgress {
+  constructor() {
+    super(...arguments);
+    this.reverse = false;
+  }
+}
+__decorate([attr(), __metadata("design:type", String)], Progress.prototype, "shape", void 0);
+__decorate([attr(), __metadata("design:type", String)], Progress.prototype, "connotation", void 0);
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Progress.prototype, "reverse", void 0);
+
+let _2 = t => t,
+  _t,
+  _t2,
+  _t3;
+const getClasses = ({
+  connotation,
+  shape,
+  reverse,
+  paused
+}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`shape-${shape}`, Boolean(shape)], ['reverse', Boolean(reverse)], ['paused', Boolean(paused)]);
+function determinate() {
+  return html(_t || (_t = _2`
+		<span class="determinate" style="width: ${0}%"></span>`), x => x.percentComplete);
+}
+function indeterminate() {
+  return html(_t2 || (_t2 = _2`
+		<span class="indeterminate" name="indeterminate">
+			<span class="indicator-1"></span>
+			<span class="indicator-2"></span>
+		 </span>`));
+}
+const ProgressTemplate = _ => {
+  return html(_t3 || (_t3 = _2`
+    <div
+      role="progressbar"
+      aria-valuenow="${0}"
+      aria-valuemin="${0}"
+      aria-valuemax="${0}"
+      class="${0}"
+    >
+		<div class="progress">
+		  ${0}
+		  ${0}
+    	</div>
+	</div>
+  `), x => x.value, x => x.min, x => x.max, getClasses, when(x => typeof x.value === 'number', determinate()), when(x => typeof x.value !== 'number', indeterminate()));
+};
+
+const vividProgress = Progress.compose({
+  baseName: 'progress',
+  template: ProgressTemplate,
+  styles: css_248z
+});
+designSystem.register(vividProgress());
+
+export { vividProgress };

package/progress-ring/index.js

@@ -0,0 +1,76 @@
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { B as BaseProgress } from '../shared/base-progress.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 15 Nov 2022 13:39:19 GMT\n */\n.base {\n  align-items: center;\n  block-size: var(--_size);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\n  outline: none;\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.size--5 {\n  --_size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 20));\n}\n.base.size--4 {\n  --_size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 16));\n}\n.base.size--3 {\n  --_size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 12));\n}\n.base.size--2 {\n  --_size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 8));\n}\n.base.size--1 {\n  --_size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 4));\n}\n.base.size-1 {\n  --_size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) + 4));\n}\n.base.size-2 {\n  --_size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) + 8));\n}\n.base.size-3 {\n  --_size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) + 12));\n}\n.base:not(.size--5, .size--4, .size--3, .size--2, .size--1, .size-1, .size-2, .size-3) {\n  --_size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
+
+class ProgressRing extends BaseProgress {}
+__decorate([attr, __metadata("design:type", String)], ProgressRing.prototype, "connotation", void 0);
+__decorate([attr, __metadata("design:type", Number)], ProgressRing.prototype, "size", void 0);
+
+let _2 = t => t,
+  _t,
+  _t2,
+  _t3;
+const getClasses = ({
+  connotation,
+  size,
+  paused
+}) => classNames('base', ['disabled', !!paused], [`connotation-${connotation}`, !!connotation], [`size-${size}`, !!size]);
+const progressSegments = 44;
+const ProgressRingTemplate = _ => html(_t || (_t = _2`
+<div
+        role="progressbar"
+        aria-valuenow="${0}"
+        aria-valuemin="${0}"
+        aria-valuemax="${0}"
+        class="${0} ${0}"
+    >
+        ${0}
+        ${0}
+    </div>
+`), x => x.value, x => x.min, x => x.max, x => x.paused ? 'paused' : '', getClasses, when(x => typeof x.value === 'number', html(_t2 || (_t2 = _2`
+                <svg
+                    class="progress"
+                    viewBox="0 0 16 16"
+                >
+                    <circle
+                        class="background"
+                        cx="8px"
+                        cy="8px"
+                        r="7px"
+                    ></circle>
+                    <circle
+                        class="determinate"
+                        style="stroke-dasharray: ${0}px ${0}px"
+                        cx="8px"
+                        cy="8px"
+                        r="7px"
+                    ></circle>
+                </svg>
+            `), x => progressSegments * x.percentComplete / 100, progressSegments)), when(x => typeof x.value !== 'number', html(_t3 || (_t3 = _2`
+            <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>
+            `))));
+
+const vividProgressRing = ProgressRing.compose({
+  baseName: 'progress-ring',
+  template: ProgressRingTemplate,
+  styles: css_248z
+});
+designSystem.register(vividProgressRing());
+
+export { vividProgressRing };

package/radio/index.js

@@ -0,0 +1,47 @@
+import '../focus/index.js';
+import { h as html, d as designSystem } from '../shared/index.js';
+import { R as Radio } from '../shared/radio.js';
+import { f as focusTemplateFactory } from '../shared/focus2.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/focus.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 15 Nov 2022 13:39:19 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus) {\n    outline: none;\n  }\n}\n.base {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  gap: 8px;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base.disabled {\n  cursor: not-allowed;\n}\n\n.control {\n  position: relative;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n}\n.control::after {\n  position: absolute;\n  background-color: var(--_appearance-color-text);\n  border-radius: inherit;\n  content: \"\";\n  inset: 5px;\n}\n.base:not(.checked) .control::after {\n  display: none;\n}\n\nlabel {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 50%;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}";
+
+let _ = t => t,
+  _t,
+  _t2;
+const getClasses = ({
+  checked,
+  readOnly,
+  disabled
+}) => classNames('base', ['checked', Boolean(checked)], ['readonly', Boolean(readOnly)], ['disabled', Boolean(disabled)]);
+const RadioTemplate = context => {
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`
+	<span class="${0}"
+		role="radio"
+		aria-checked="${0}"
+		aria-required="${0}"
+		aria-disabled="${0}"
+		@keypress="${0}"
+		@click="${0}"
+	>
+		<div class="control">
+			${0}
+		</div>
+		${0}
+	</span>
+	`), getClasses, x => x.checked, x => x.required, x => x.disabled, (x, c) => x.keypressHandler(c.event), (x, c) => x.clickHandler(c.event), () => focusTemplate, when(x => x.label, html(_t2 || (_t2 = _`<label class="label">${0}</label>`), x => x.label)));
+};
+
+const vividRadio = Radio.compose({
+  baseName: 'radio',
+  template: RadioTemplate,
+  styles: css_248z
+});
+designSystem.register(vividRadio());
+
+export { vividRadio };