@vonage/vivid 5.0.0 → 5.2.0

package/{shared → unbundled}/slider.template.cjs

@@ -1,13 +1,9 @@
 'use strict';
 
-const numbers = require('./numbers.cjs');
-const definition = require('./definition67.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const fastElement = require('@microsoft/fast-element');
+const popup_definition = require('./definition4.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
-const classNames = require('./class-names.cjs');
-const ref = require('./ref.cjs');
-const when = require('./when.cjs');
-const aria = require('./aria.cjs');
-const vividElement = require('./vivid-element.cjs');
 
 const getDecimalPlaces = (num) => {
   const match = num.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
@@ -36,17 +32,17 @@ const defaultToOneConverter = {
 };
 
 const lerp = (a, b, value) => a + (b - a) * value;
-const inverseLerp = (a, b, value) => numbers.limit(0, 1, (value - a) / (b - a));
+const inverseLerp = (a, b, value) => fastWebUtilities.limit(0, 1, (value - a) / (b - a));
 
-const getClasses = ({ disabled, connotation }) => classNames.classNames(
+const getClasses = ({ disabled, connotation }) => fastWebUtilities.classNames(
   "control",
   ["disabled", Boolean(disabled)],
   [`connotation-${connotation}`, Boolean(connotation)]
 );
-const getThumbClasses = ({ _focusVisible }) => classNames.classNames("thumb-container", ["focus-visible", _focusVisible]);
+const getThumbClasses = ({ _focusVisible }) => fastWebUtilities.classNames("thumb-container", ["focus-visible", _focusVisible]);
 const getMarkersTemplate = (isHorizontal, numMarkers) => {
   const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
-  return vividElement.html` <div
+  return fastElement.html` <div
 		class="mark"
 		style="
 	background: linear-gradient(to ${placeholder[0]}, currentcolor 1px, transparent 0px)
@@ -55,8 +51,8 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
 	></div>`;
 };
 const SliderTemplate = (context) => {
-  const popupTag = context.tagFor(definition.Popup);
-  return vividElement.html`<template
+  const popupTag = context.tagFor(popup_definition.Popup);
+  return fastElement.html`<template
 		@focusin="${(x) => x._onFocusIn()}"
 		@focusout="${(x) => x._onFocusOut()}"
 	>
@@ -74,27 +70,27 @@ const SliderTemplate = (context) => {
   })}
 		>
 			<div class="positioning-region">
-				<div ${ref.ref("track")} class="track">
+				<div ${fastElement.ref("track")} class="track">
 					${(x) => x.markers ? getMarkersTemplate(
-    x.orientation === aria.Orientation.horizontal,
+    x.orientation === fastWebUtilities.Orientation.horizontal,
     Math.floor((x.max - x.min) / x.step)
   ) : void 0}
 					<div class="track-start" style="${(x) => x.position}"></div>
 				</div>
 				<div
-					${ref.ref("thumb")}
+					${fastElement.ref("thumb")}
 					class="${(x) => getThumbClasses(x)}"
 					style="${(x) => x.position}"
 				></div>
-				${when.when(
+				${fastElement.when(
     (x) => x.pin,
-    vividElement.html`<${popupTag}
+    fastElement.html`<${popupTag}
 					class="popup"
 					arrow
 					alternate
 					:anchor="${(x) => x.thumb}"
 					:open=${(x) => x._isThumbPopupOpen}
-					:placementStrategy=${(x) => x.orientation === aria.Orientation.horizontal ? definition.PlacementStrategy.AutoPlacementHorizontal : definition.PlacementStrategy.AutoPlacementVertical}
+					:placementStrategy=${(x) => x.orientation === fastWebUtilities.Orientation.horizontal ? popup_definition.PlacementStrategy.AutoPlacementHorizontal : popup_definition.PlacementStrategy.AutoPlacementVertical}
 					animation-frame
 					exportparts="vvd-theme-alternate"
 					aria-hidden="true"

package/{shared → unbundled}/slider.template.js

@@ -1,11 +1,7 @@
-import { l as limit } from './numbers.js';
-import { P as Popup, a as PlacementStrategy } from './definition67.js';
+import { limit, classNames, Orientation } from '@microsoft/fast-web-utilities';
+import { ref, when, html } from '@microsoft/fast-element';
+import { P as Popup, a as PlacementStrategy } from './definition4.js';
 import { d as delegateAria } from './delegates-aria.js';
-import { c as classNames } from './class-names.js';
-import { r as ref } from './ref.js';
-import { w as when } from './when.js';
-import { O as Orientation } from './aria.js';
-import { h as html } from './vivid-element.js';
 
 const getDecimalPlaces = (num) => {
   const match = num.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);

package/unbundled/text-field.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
+
+exports.styles = styles;

package/unbundled/text-field.js

@@ -0,0 +1,3 @@
+const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
+
+export { styles as s };

package/{shared → unbundled}/time-selection-picker.template.cjs

@@ -1,14 +1,12 @@
 'use strict';
 
 const vividElement = require('./vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
 const pickerField_template = require('./picker-field.template.cjs');
 const singleValuePicker = require('./single-value-picker.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const scrollIntoView = require('./scrollIntoView.cjs');
-const when = require('./when.cjs');
-const repeat = require('./repeat.cjs');
-const classNames = require('./class-names.cjs');
 const localized = require('./localized.cjs');
-const ref = require('./ref.cjs');
 
 const isValidTimeStr = (timeStr) => {
   const parts = timeStr.split(":");
@@ -273,7 +271,7 @@ const emitChange = (x, time) => {
   x.$emit("change", time, { bubbles: false, composed: false });
 };
 const renderPicker = (column) => {
-  return vividElement.html`<div class="picker-wrapper">
+  return fastElement.html`<div class="picker-wrapper">
 		<ul
 			id="${column.id}"
 			class="picker"
@@ -283,11 +281,11 @@ const renderPicker = (column) => {
 			aria-activedescendant="${(x) => column.getSelectedOptionValue(x) ? `${column.id}-${column.getSelectedOptionValue(x)}` : void 0}"
 			@keydown="${(x, c) => onPickerKeyDown(x, column, c.event)}"
 		>
-			${repeat.repeat(
+			${fastElement.repeat(
     (x) => column.getOptions(x),
-    vividElement.html`<li
+    fastElement.html`<li
 					id="${(x) => `${column.id}-${x.value}`}"
-					class="${(x, c) => classNames.classNames("option", [
+					class="${(x, c) => fastWebUtilities.classNames("option", [
       "selected",
       column.getSelectedOptionValue(c.parent) === x.value
     ])}"
@@ -302,15 +300,15 @@ const renderPicker = (column) => {
 	</div>`;
 };
 const InlineTimePickerTemplate = () => {
-  return vividElement.html`<div
+  return fastElement.html`<div
 		class="time-pickers"
 		@keydown="${(x, { event }) => onBaseKeyDown(x, event)}"
 		@focusout="${(x) => x._onFocusOut()}"
 		@pointerdown="${(x) => x._onPointerDown()}"
 	>
 		${renderPicker(HoursColumn)} ${renderPicker(MinutesColumn)}
-		${when.when(shouldDisplaySecondsPicker, renderPicker(SecondsColumn))}
-		${when.when(shouldDisplay12hClock, renderPicker(MeridiesColumn))}
+		${fastElement.when(shouldDisplaySecondsPicker, renderPicker(SecondsColumn))}
+		${fastElement.when(shouldDisplay12hClock, renderPicker(MeridiesColumn))}
 	</div>`;
 };
 
@@ -417,25 +415,25 @@ class InlineTimePicker extends localized.Localized(vividElement.VividElement) {
   }
 }
 __decorateClass$2([
-  vividElement.observable
+  fastElement.observable
 ], InlineTimePicker.prototype, "value");
 __decorateClass$2([
-  vividElement.observable
+  fastElement.observable
 ], InlineTimePicker.prototype, "minutesStep");
 __decorateClass$2([
-  vividElement.observable
+  fastElement.observable
 ], InlineTimePicker.prototype, "secondsStep");
 __decorateClass$2([
-  vividElement.observable
+  fastElement.observable
 ], InlineTimePicker.prototype, "clock");
 __decorateClass$2([
-  vividElement.observable
+  fastElement.observable
 ], InlineTimePicker.prototype, "min");
 __decorateClass$2([
-  vividElement.observable
+  fastElement.observable
 ], InlineTimePicker.prototype, "max");
 
-const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker-wrapper{position:relative;display:flex;flex-direction:column;border-radius:4px}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.time-pickers .picker{position:relative;display:flex;overflow:hidden scroll;flex-direction:column;padding:0 4px;border-radius:4px;margin:0 -4px;gap:4px;inline-size:50px;list-style:none;scrollbar-width:none}.time-pickers .picker:hover{scrollbar-width:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .option:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.time-pickers .option:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}";
+const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker-wrapper{position:relative;display:flex;flex-direction:column;border-radius:4px}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.time-pickers .picker{position:relative;display:flex;overflow:hidden scroll;flex-direction:column;padding:0 4px;border-radius:4px;margin:0 -4px;gap:4px;inline-size:50px;list-style:none;scrollbar-width:none}@media (hover: hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.time-pickers .option.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.time-pickers .option.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.time-pickers .option.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}";
 
 const inlineTimePickerDefinition = vividElement.defineVividComponent(
   "inline-time-picker",
@@ -560,11 +558,11 @@ const TimeSelectionPicker = (Base) => {
     #clockChangeHandler;
     #clockChangeObserver;
     #startObservingClockChanges() {
-      this.#clockChangeObserver = vividElement.Observable.binding(
+      this.#clockChangeObserver = fastElement.Observable.binding(
         () => this._use12hClock,
         this.#clockChangeHandler
       );
-      this.#clockChangeObserver.observe(this, vividElement.defaultExecutionContext);
+      this.#clockChangeObserver.observe(this, fastElement.defaultExecutionContext);
     }
     #stopObservingClockChanges() {
       this.#clockChangeObserver.disconnect();
@@ -590,7 +588,7 @@ const TimeSelectionPicker = (Base) => {
     _onPickerButtonClick() {
       super._onPickerButtonClick();
       if (this._popupOpen) {
-        vividElement.DOM.processUpdates();
+        fastElement.DOM.processUpdates();
         this._inlineTimePickerEl.scrollSelectedOptionsToTop();
       }
     }
@@ -612,16 +610,16 @@ const TimeSelectionPicker = (Base) => {
     }
   }
   __decorateClass$1([
-    vividElement.attr({ attribute: "minutes-step", converter: vividElement.nullableNumberConverter })
+    fastElement.attr({ attribute: "minutes-step", converter: fastElement.nullableNumberConverter })
   ], TimeSelectionPickerElement.prototype, "minutesStep", 2);
   __decorateClass$1([
-    vividElement.attr({ attribute: "seconds-step", converter: vividElement.nullableNumberConverter })
+    fastElement.attr({ attribute: "seconds-step", converter: fastElement.nullableNumberConverter })
   ], TimeSelectionPickerElement.prototype, "secondsStep", 2);
   __decorateClass$1([
-    vividElement.attr
+    fastElement.attr
   ], TimeSelectionPickerElement.prototype, "clock", 2);
   __decorateClass$1([
-    vividElement.volatile
+    fastElement.volatile
   ], TimeSelectionPickerElement.prototype, "_use12hClock", 1);
   return TimeSelectionPickerElement;
 };
@@ -750,7 +748,7 @@ class TimePicker extends TimeSelectionPicker(
   _onPickerButtonClick() {
     super._onPickerButtonClick();
     if (this._popupOpen) {
-      vividElement.DOM.processUpdates();
+      fastElement.DOM.processUpdates();
       this._focusableElsWithinDialog()[0]?.focus();
     }
   }
@@ -781,18 +779,18 @@ class TimePicker extends TimeSelectionPicker(
   }
 }
 __decorateClass([
-  vividElement.attr({ converter: ValidTimeFilter })
+  fastElement.attr({ converter: ValidTimeFilter })
 ], TimePicker.prototype, "min");
 __decorateClass([
-  vividElement.attr({ converter: ValidTimeFilter })
+  fastElement.attr({ converter: ValidTimeFilter })
 ], TimePicker.prototype, "max");
 
 const TimeSelectionPickerTemplate = (context, numOptionsVisible) => {
   const inlineTimePickerTag = context.tagFor(InlineTimePicker);
-  return vividElement.html`
+  return fastElement.html`
 		<${inlineTimePickerTag}
 			id='inline-time-picker'
-			${ref.ref("_inlineTimePickerEl")}
+			${fastElement.ref("_inlineTimePickerEl")}
 			style="--_inline-time-picker-num-options-visible: ${() => numOptionsVisible}"
 			tabindex='1'
 			:value='${(x) => x._timeValue || void 0}'

package/{shared → unbundled}/time-selection-picker.template.js

@@ -1,12 +1,10 @@
-import { h as html, V as VividElement, o as observable, f as defineVividComponent, a as attr, O as Observable, i as defaultExecutionContext, D as DOM, n as nullableNumberConverter, v as volatile } from './vivid-element.js';
+import { V as VividElement, d as defineVividComponent } from './vivid-element.js';
+import { when, html, repeat, observable, attr, nullableNumberConverter, Observable, defaultExecutionContext, DOM, volatile, ref } from '@microsoft/fast-element';
 import { i as ignoreEventInFocusTraps, a as PickerField } from './picker-field.template.js';
 import { S as SingleValuePicker } from './single-value-picker.js';
+import { classNames } from '@microsoft/fast-web-utilities';
 import { s as scrollIntoView } from './scrollIntoView.js';
-import { w as when } from './when.js';
-import { r as repeat } from './repeat.js';
-import { c as classNames } from './class-names.js';
 import { L as Localized } from './localized.js';
-import { r as ref } from './ref.js';
 
 const isValidTimeStr = (timeStr) => {
   const parts = timeStr.split(":");
@@ -433,7 +431,7 @@ __decorateClass$2([
   observable
 ], InlineTimePicker.prototype, "max");
 
-const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker-wrapper{position:relative;display:flex;flex-direction:column;border-radius:4px}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.time-pickers .picker{position:relative;display:flex;overflow:hidden scroll;flex-direction:column;padding:0 4px;border-radius:4px;margin:0 -4px;gap:4px;inline-size:50px;list-style:none;scrollbar-width:none}.time-pickers .picker:hover{scrollbar-width:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .option:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.time-pickers .option:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.time-pickers .option:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}";
+const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker-wrapper{position:relative;display:flex;flex-direction:column;border-radius:4px}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.time-pickers .picker{position:relative;display:flex;overflow:hidden scroll;flex-direction:column;padding:0 4px;border-radius:4px;margin:0 -4px;gap:4px;inline-size:50px;list-style:none;scrollbar-width:none}@media (hover: hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.time-pickers .option.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.time-pickers .option.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.time-pickers .option.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}";
 
 const inlineTimePickerDefinition = defineVividComponent(
   "inline-time-picker",

package/unbundled/vivid-element.cjs

@@ -0,0 +1,283 @@
+'use strict';
+
+const fastElement = require('@microsoft/fast-element');
+
+function resolve(templateOrResolveFunction, ctx) {
+  if (templateOrResolveFunction instanceof Function) {
+    return templateOrResolveFunction(ctx);
+  } else {
+    return templateOrResolveFunction;
+  }
+}
+const registeredTags = /* @__PURE__ */ new Set();
+const tagByType = /* @__PURE__ */ new Map();
+const createRegisterFunction = (definition) => (prefix = "vwc") => {
+  const prefixed = (name) => `${prefix}-${name}`;
+  const registerComponent = (componentDefinition) => {
+    const tag = prefixed(componentDefinition.name);
+    let type = componentDefinition.type;
+    type.componentName = componentDefinition.name;
+    if (registeredTags.has(tag)) {
+      return;
+    } else if (tagByType.has(type) && tagByType.get(type) !== tag) {
+      type = class extends type {
+      };
+    }
+    registeredTags.add(tag);
+    tagByType.set(type, tag);
+    for (const dependency of componentDefinition.dependencies) {
+      registerComponent(dependency);
+    }
+    const tagByDependencyType = new Map([
+      [componentDefinition.type, tag],
+      ...componentDefinition.dependencies.map(
+        (dependency) => [dependency.type, prefixed(dependency.name)]
+      )
+    ]);
+    const elementDefinitionContext = {
+      tagFor(type2) {
+        if (!tagByDependencyType.has(type2)) {
+          throw new Error(
+            `Could not get tag for ${type2.name} as it is not a dependency of ${componentDefinition.name}.`
+          );
+        }
+        return tagByDependencyType.get(type2);
+      },
+      tagForNonDependency(name) {
+        return prefixed(name);
+      }
+    };
+    new fastElement.FASTElementDefinition(type, {
+      ...componentDefinition.options,
+      template: resolve(
+        componentDefinition.template,
+        elementDefinitionContext
+      ),
+      name: `${prefix}-${componentDefinition.name}`
+    }).define();
+  };
+  registerComponent(definition);
+};
+
+const defineVividComponent = (name, type, template, dependencies, options) => ({
+  name,
+  type,
+  template,
+  dependencies,
+  options
+});
+
+const ariaChangeSubscribers = /* @__PURE__ */ new WeakMap();
+const getSubscribers = (source) => {
+  let subscribers = ariaChangeSubscribers.get(source);
+  if (!subscribers) {
+    subscribers = [];
+    ariaChangeSubscribers.set(source, subscribers);
+  }
+  return subscribers;
+};
+const subscribeToAriaPropertyChanges = (source, listener) => {
+  getSubscribers(source).push(listener);
+};
+const unsubscribeFromAriaPropertyChanges = (source, listener) => {
+  getSubscribers(source).splice(getSubscribers(source).indexOf(listener), 1);
+};
+const publishAriaPropertyChange = (source, changedAriaProperty) => {
+  getSubscribers(source).forEach((s) => s(source, changedAriaProperty));
+};
+
+const shouldRemoveAriaAttributes = (behavior) => behavior === "delegate";
+const dataPropertyName = (ariaPropertyName) => `vvd${ariaPropertyName.charAt(0).toUpperCase()}${ariaPropertyName.slice(1)}`;
+const reflectAriaProperty = (element, ariaProperty) => {
+  if (shouldRemoveAriaAttributes(element._vividAriaBehaviour)) {
+    const value = element[ariaProperty];
+    element[`_${ariaProperty}`] = null;
+    element.removeAttribute(ariaAttributeName(ariaProperty));
+    element[`_${ariaProperty}`] = value;
+    if (element[ariaProperty] !== null) {
+      element.dataset[dataPropertyName(ariaProperty)] = element[ariaProperty];
+    } else {
+      delete element.dataset[dataPropertyName(ariaProperty)];
+    }
+  } else {
+    fastElement.DOM.setAttribute(
+      element,
+      ariaAttributeName(ariaProperty),
+      element[ariaProperty]
+    );
+  }
+};
+const changedAriaProperties = /* @__PURE__ */ new WeakMap();
+const recordAriaPropertyChange = (element, ariaProperty) => {
+  const changedProperties = changedAriaProperties.get(element);
+  if (!changedProperties) {
+    changedAriaProperties.set(element, /* @__PURE__ */ new Set([ariaProperty]));
+  } else {
+    changedProperties.add(ariaProperty);
+  }
+};
+const handleAriaPropertyChange = (element, ariaProperty) => {
+  if (element.isConnected) {
+    reflectAriaProperty(element, ariaProperty);
+  } else {
+    recordAriaPropertyChange(element, ariaProperty);
+  }
+};
+const handleElementConnectedCallback = (element) => {
+  const changedProperties = changedAriaProperties.get(element);
+  if (changedProperties) {
+    for (const ariaProperty of changedProperties) {
+      reflectAriaProperty(element, ariaProperty);
+    }
+    changedAriaProperties.delete(element);
+  }
+};
+
+const ariaMixinProperties = [
+  "role",
+  "ariaAtomic",
+  "ariaAutoComplete",
+  "ariaBusy",
+  "ariaChecked",
+  "ariaColCount",
+  "ariaColIndex",
+  "ariaColIndexText",
+  "ariaColSpan",
+  "ariaCurrent",
+  "ariaDescription",
+  "ariaDisabled",
+  "ariaExpanded",
+  "ariaHasPopup",
+  "ariaHidden",
+  "ariaInvalid",
+  "ariaKeyShortcuts",
+  "ariaLabel",
+  "ariaLevel",
+  "ariaLive",
+  "ariaModal",
+  "ariaMultiLine",
+  "ariaMultiSelectable",
+  "ariaOrientation",
+  "ariaPlaceholder",
+  "ariaPosInSet",
+  "ariaPressed",
+  "ariaReadOnly",
+  "ariaRequired",
+  "ariaRoleDescription",
+  "ariaRowCount",
+  "ariaRowIndex",
+  "ariaRowIndexText",
+  "ariaRowSpan",
+  "ariaSelected",
+  "ariaSetSize",
+  "ariaSort",
+  "ariaValueMax",
+  "ariaValueMin",
+  "ariaValueNow",
+  "ariaValueText",
+  "ariaRelevant"
+  // Non-standard
+];
+const ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
+const AriaMixin = (Base) => {
+  class AriaMixinElement extends Base {
+    constructor(...args) {
+      super(...args);
+      this._vividAriaBehaviour = "default";
+      for (const ariaProperty of ariaMixinProperties) {
+        this[`_${ariaProperty}`] = null;
+      }
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      handleElementConnectedCallback(this);
+    }
+  }
+  for (const ariaProperty of ariaMixinProperties) {
+    fastElement.attr({
+      attribute: ariaAttributeName(ariaProperty),
+      mode: "fromView"
+    })(AriaMixinElement.prototype, ariaProperty);
+    AriaMixinElement.prototype[`${ariaProperty}Changed`] = function() {
+      handleAriaPropertyChange(this, ariaProperty);
+      if (this._vividAriaBehaviour !== "default") {
+        publishAriaPropertyChange(this, ariaProperty);
+      }
+    };
+  }
+  return AriaMixinElement;
+};
+
+const locateReplacedPropMetadata = fastElement.createMetadataLocator();
+const replaces = (config) => ($target, $prop) => {
+  locateReplacedPropMetadata($target.constructor).push({
+    newPropertyName: $prop,
+    ...config
+  });
+};
+const ReplacedPropHandling = (Base) => {
+  class ReplacedPropHandlingElement extends Base {
+    #handleReplacedProp(replacedProp) {
+      let newDirty = false;
+      let deprecatedDirty = false;
+      const changeCouldBeFromDeprecated = (source) => deprecatedDirty && replacedProp.fromDeprecated(
+        source[replacedProp.deprecatedPropertyName]
+      ) === source[replacedProp.newPropertyName];
+      const changeCouldBeFromNew = (source) => newDirty && replacedProp.toDeprecated && replacedProp.toDeprecated(source[replacedProp.newPropertyName]) === source[replacedProp.deprecatedPropertyName];
+      const subscriber = {
+        handleChange(source, propertyName) {
+          if (propertyName === replacedProp.newPropertyName) {
+            newDirty = true;
+            if (!replacedProp.toDeprecated || changeCouldBeFromDeprecated(source)) {
+              return;
+            }
+            source[replacedProp.deprecatedPropertyName] = replacedProp.toDeprecated(source[replacedProp.newPropertyName]);
+          }
+          if (propertyName === replacedProp.deprecatedPropertyName) {
+            deprecatedDirty = true;
+            if (changeCouldBeFromNew(source)) {
+              return;
+            }
+            source[replacedProp.newPropertyName] = replacedProp.fromDeprecated(
+              source[replacedProp.deprecatedPropertyName]
+            );
+          }
+        }
+      };
+      const notifier = fastElement.Observable.getNotifier(this);
+      notifier.subscribe(subscriber, replacedProp.newPropertyName);
+      notifier.subscribe(subscriber, replacedProp.deprecatedPropertyName);
+    }
+    constructor(...args) {
+      super(...args);
+      for (const replacedProp of locateReplacedPropMetadata(this.constructor)) {
+        this.#handleReplacedProp(replacedProp);
+      }
+    }
+  }
+  return ReplacedPropHandlingElement;
+};
+
+class VividElement extends AriaMixin(ReplacedPropHandling(fastElement.FASTElement)) {
+  static {
+    this.VIVID_VERSION = "5.2.0";
+  }
+  /**
+   * Add data-vvd-component attribute with component name globally,
+   * for referring to the elements in CSS, testing or debugging
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    const name = this.constructor.componentName;
+    this.setAttribute("data-vvd-component", name);
+  }
+}
+
+exports.VividElement = VividElement;
+exports.ariaAttributeName = ariaAttributeName;
+exports.ariaMixinProperties = ariaMixinProperties;
+exports.createRegisterFunction = createRegisterFunction;
+exports.defineVividComponent = defineVividComponent;
+exports.replaces = replaces;
+exports.subscribeToAriaPropertyChanges = subscribeToAriaPropertyChanges;
+exports.unsubscribeFromAriaPropertyChanges = unsubscribeFromAriaPropertyChanges;