@vonage/vivid 3.0.0-next.8 → 3.0.0-next.80

package/progress/index.js

@@ -1,18 +1,19 @@
 import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
-import { h as classofRaw, _ as _export, f as functionUncurryThis } from '../shared/web.dom-collections.iterator.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 = ".base {\n  height: 6px;\n  align-items: center;\n  margin: 0;\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.base:not(.connotation-pacific):not(.connotation-cta):not(.connotation-alert):not(.connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.base.connotation-pacific {\n  --connotation: linear-gradient(to right, var(--vvd-color-info-30), var(--vvd-color-cta-70));\n}\n\n.indeterminate {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  border-radius: 3px;\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 100%;\n}\n.progress .indeterminate {\n  background-color: var(--connotation);\n}\n\n.determinate {\n  background-color: var(--connotation);\n  block-size: 100%;\n  border-radius: 3px;\n  transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n  background-image: var(--connotation);\n}\n\n.indeterminate-indicator-1, .indeterminate-indicator-2 {\n  position: absolute;\n  animation: indeterminate-1 2s infinite;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 30%;\n  opacity: 0;\n}\n\n.indeterminate-indicator-2 {\n  animation: indeterminate-2 2s infinite;\n  inline-size: 60%;\n}\n\n.connotation-pacific .indeterminate-indicator-1, .connotation-pacific .indeterminate-indicator-2 {\n  background-image: var(--connotation);\n}\n\n.reverse .indeterminate-indicator-1, .reverse .indeterminate-indicator-2 {\n  animation-direction: reverse;\n}\n.reverse .determinate {\n  position: absolute;\n  right: 0;\n}\n\n.base.shape-sharp .determinate, .base.shape-sharp .indeterminate {\n  border-radius: 0;\n}\n\n.base.paused .indeterminate-indicator-1,\n.base.paused .indeterminate-indicator-2 {\n  animation-play-state: paused;\n  background-color: var(--connotation);\n}\n\n.base.paused .determinate {\n  background-color: var(--vvd-color-neutral-40);\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}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 19 Oct 2022 08:48:31 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
+// eslint-disable-next-line es-x/no-array-isarray -- safe
 var isArray$1 = Array.isArray || function isArray(argument) {
   return classof(argument) == 'Array';
 };
@@ -21,7 +22,7 @@ var $ = _export;
 var uncurryThis = functionUncurryThis;
 var isArray = isArray$1;
 
-var un$Reverse = uncurryThis([].reverse);
+var nativeReverse = uncurryThis([].reverse);
 var test = [1, 2];
 
 // `Array.prototype.reverse` method
@@ -32,7 +33,7 @@ $({ 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 un$Reverse(this);
+    return nativeReverse(this);
   }
 });
 
@@ -57,35 +58,41 @@ let _2 = t => t,
     _t2,
     _t3;
 
-const getClasses = _ => classNames('base', [`connotation-${_.connotation}`, !!_.connotation], [`shape-${_.shape}`, !!_.shape], ['reverse', _.reverse]);
+const getClasses = ({
+  connotation,
+  shape,
+  reverse,
+  paused
+}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`shape-${shape}`, Boolean(shape)], ['reverse', Boolean(reverse)], ['paused', Boolean(paused)]);
 
-const ProgressTemplate = _ => {
+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} ${0}"
+      class="${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`
-                  <div class="progress">
-                      <div
-                          class="determinate"
-                          style="width: ${0}%"
-                      ></div>
-                  </div>
-              `), x => x.percentComplete)), when(x => typeof x.value !== 'number', html(_t3 || (_t3 = _2`
-                  <div class="progress indeterminate">
-                      <span class="indeterminate" name="indeterminate">
-                        <span class="indeterminate-indicator-1"></span>
-                        <span class="indeterminate-indicator-2"></span>
-                      </span>
-                  </div>
-              `))));
+		<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({

package/progress-ring/index.js

@@ -1,22 +1,26 @@
 import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.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 = ".base {\n  width: 36px;\n  height: 36px;\n  align-items: center;\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.base:not(.connotation-cta):not(.connotation-alert):not(.connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.base.base-large {\n  width: 48px;\n  height: 48px;\n}\n\n.base.base-small {\n  width: 24px;\n  height: 24px;\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: var(--connotation);\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: var(--connotation);\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  stroke: var(--vvd-color-neutral);\n}\n\n.base.paused .determinate {\n  stroke: var(--vvd-color-neutral);\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}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 19 Oct 2022 08:48:31 GMT\n */\n.base {\n  align-items: center;\n  block-size: var(--_density);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_density);\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.density-5 {\n  --_density: calc(5 * 4px);\n}\n.base.density-6 {\n  --_density: calc(6 * 4px);\n}\n.base.density-7 {\n  --_density: calc(7 * 4px);\n}\n.base.density-8 {\n  --_density: calc(8 * 4px);\n}\n.base.density-9 {\n  --_density: calc(9 * 4px);\n}\n.base.density-11 {\n  --_density: calc(11 * 4px);\n}\n.base.density-12 {\n  --_density: calc(12 * 4px);\n}\n.base.density-13 {\n  --_density: calc(13 * 4px);\n}\n.base:not(.density-5, .density-6, .density-7, .density-8, .density-9, .density-11, .density-12, .density-13) {\n  --_density: calc(10 * 4px);\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", String)], ProgressRing.prototype, "connotation", void 0);
+
+__decorate([attr, __metadata("design:type", Number)], ProgressRing.prototype, "density", void 0);
 
 let _2 = t => t,
     _t,
     _t2,
     _t3;
 
-const getClasses = _ => classNames('base', [`connotation-${_.connotation}`, !!_.connotation]);
+const getClasses = ({
+  connotation,
+  density,
+  paused
+}) => classNames('base', ['disabled', !!paused], [`connotation-${connotation}`, !!connotation], [`density-${(density ? Number(density) : 0) + 10}`, !!density]);
 
 const progressSegments = 44;
 const ProgressRingTemplate = _ => html(_t || (_t = _2`

package/radio/index.js

@@ -0,0 +1,174 @@
+import '../focus/index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { C as CheckableFormAssociated } from '../shared/form-associated.js';
+import { a as keySpace } from '../shared/key-codes.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';
+
+class _Radio extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Radio:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
+
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual radio control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+class Radio$1 extends FormAssociatedRadio {
+    constructor() {
+        super();
+        /**
+         * The element's value to be included in form submission when checked.
+         * Default to "on" to reach parity with input[type="radio"]
+         *
+         * @internal
+         */
+        this.initialValue = "on";
+        /**
+         * @internal
+         */
+        this.keypressHandler = (e) => {
+            switch (e.key) {
+                case keySpace:
+                    if (!this.checked && !this.readOnly) {
+                        this.checked = true;
+                    }
+                    return;
+            }
+            return true;
+        };
+        this.proxy.setAttribute("type", "radio");
+    }
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.readOnly = this.readOnly;
+        }
+    }
+    /**
+     * @internal
+     */
+    defaultCheckedChanged() {
+        var _a;
+        if (this.$fastController.isConnected && !this.dirtyChecked) {
+            // Setting this.checked will cause us to enter a dirty state,
+            // but if we are clean when defaultChecked is changed, we want to stay
+            // in a clean state, so reset this.dirtyChecked
+            if (!this.isInsideRadioGroup()) {
+                this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
+                this.dirtyChecked = false;
+            }
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        var _a, _b;
+        super.connectedCallback();
+        this.validate();
+        if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "radiogroup" &&
+            this.getAttribute("tabindex") === null) {
+            if (!this.disabled) {
+                this.setAttribute("tabindex", "0");
+            }
+        }
+        if (this.checkedAttribute) {
+            if (!this.dirtyChecked) {
+                // Setting this.checked will cause us to enter a dirty state,
+                // but if we are clean when defaultChecked is changed, we want to stay
+                // in a clean state, so reset this.dirtyChecked
+                if (!this.isInsideRadioGroup()) {
+                    this.checked = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;
+                    this.dirtyChecked = false;
+                }
+            }
+        }
+    }
+    isInsideRadioGroup() {
+        const parent = this.closest("[role=radiogroup]");
+        return parent !== null;
+    }
+    /**
+     * @internal
+     */
+    clickHandler(e) {
+        if (!this.disabled && !this.readOnly && !this.checked) {
+            this.checked = true;
+        }
+    }
+}
+__decorate([
+    attr({ attribute: "readonly", mode: "boolean" })
+], Radio$1.prototype, "readOnly", void 0);
+__decorate([
+    observable
+], Radio$1.prototype, "name", void 0);
+__decorate([
+    observable
+], Radio$1.prototype, "defaultSlottedNodes", void 0);
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 19 Oct 2022 08:48:31 GMT\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-primary-text: var(--vvd-color-canvas);\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\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: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n@supports selector(:focus-visible) {\n  .base:focus {\n    outline: none;\n  }\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(--vvd-color-canvas);\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-outline);\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-font-base);\n}\n.base.disabled label {\n  color: var(--vvd-color-neutral-400);\n  cursor: not-allowed;\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 50%;\n}\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+
+class Radio extends Radio$1 {}
+
+__decorate([attr, __metadata("design:type", String)], Radio.prototype, "label", void 0);
+
+let _ = t => t,
+    _t,
+    _t2;
+
+const getClasses = ({
+  checked,
+  disabled
+}) => classNames('base', ['checked', Boolean(checked)], ['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}"
+		tabindex="${0}"
+		@keypress="${0}"
+		@click="${0}"
+	>
+		<div class="control">
+			${0}
+		</div>
+		${0}
+	</span>
+	`), getClasses, x => x.checked, x => x.required, x => x.disabled, x => x.disabled ? null : 0, (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,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+designSystem.register(vividRadio());
+
+export { vividRadio };

package/shared/anchor.js

@@ -1,11 +1,18 @@
 import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { A as ARIAGlobalStatesAndProperties, S as StartEnd } from './aria-global.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { S as StartEnd } from './start-end.js';
 
 /**
  * An Anchor Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
  *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
  * @public
  */
 class Anchor extends FoundationElement {
@@ -20,7 +27,8 @@ class Anchor extends FoundationElement {
             var _a;
             // Check to see if delegatesFocus is supported
             if (window.ShadowRoot &&
-                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
                 this.focus = () => {
                     this.control.focus();
                 };

package/shared/aria-global.js

@@ -1,88 +1,4 @@
-import { A as AttachedBehaviorHTMLDirective, h as html, _ as __decorate, a as attr } from './index.js';
-
-/**
- * The runtime behavior for template references.
- * @public
- */
-class RefBehavior {
-    /**
-     * Creates an instance of RefBehavior.
-     * @param target - The element to reference.
-     * @param propertyName - The name of the property to assign the reference to.
-     */
-    constructor(target, propertyName) {
-        this.target = target;
-        this.propertyName = propertyName;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     */
-    bind(source) {
-        source[this.propertyName] = this.target;
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     */
-    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
-    unbind() { }
-}
-/**
- * A directive that observes the updates a property with a reference to the element.
- * @param propertyName - The name of the property to assign the reference to.
- * @public
- */
-function ref(propertyName) {
-    return new AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
-}
-
-/**
- * A mixin class implementing start and end elements.
- * These are generally used to decorate text elements with icons or other visual indicators.
- * @public
- */
-class StartEnd {
-    handleStartContentChange() {
-        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
-    }
-    handleEndContentChange() {
-        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
-    }
-}
-/**
- * The template for the end element.
- * For use with {@link StartEnd}
- *
- * @public
- * @deprecated - use endSlotTemplate
- */
-html `
-    <span part="end" ${ref("endContainer")}>
-        <slot
-            name="end"
-            ${ref("end")}
-            @slotchange="${x => x.handleEndContentChange()}"
-        ></slot>
-    </span>
-`;
-/**
- * The template for the start element.
- * For use with {@link StartEnd}
- *
- * @public
- * @deprecated - use startSlotTemplate
- */
-html `
-    <span part="start" ${ref("startContainer")}>
-        <slot
-            name="start"
-            ${ref("start")}
-            @slotchange="${x => x.handleStartContentChange()}"
-        ></slot>
-    </span>
-`;
+import { _ as __decorate, a as attr } from './index.js';
 
 /**
  * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
@@ -153,4 +69,4 @@ __decorate([
     attr({ attribute: "aria-roledescription" })
 ], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
 
-export { ARIAGlobalStatesAndProperties as A, StartEnd as S, ref as r };
+export { ARIAGlobalStatesAndProperties as A };

package/shared/base-progress.js

@@ -4,6 +4,11 @@ import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumber
  * An Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
  * @public
  */
 class BaseProgress extends FoundationElement {

package/shared/breadcrumb-item.js

@@ -1,7 +1,7 @@
 import { _ as __decorate, o as observable } from './index.js';
 import { A as Anchor, D as DelegatesARIALink } from './anchor.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { S as StartEnd } from './aria-global.js';
+import { S as StartEnd } from './start-end.js';
 
 /**
  * A Breadcrumb Item Custom HTML Element.