@vonage/vivid 5.3.0 → 5.5.0

package/unbundled/definition6.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+const vividElement = require('./vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Elevation extends vividElement.VividElement {
+}
+__decorateClass([
+  fastElement.attr
+], Elevation.prototype, "dp");
+__decorateClass([
+  fastElement.attr({ attribute: "no-shadow", mode: "boolean" })
+], Elevation.prototype, "noShadow");
+__decorateClass([
+  fastElement.attr({ attribute: "not-relative", mode: "boolean" })
+], Elevation.prototype, "notRelative");
+
+const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}";
+
+const getClasses = ({ dp, noShadow, notRelative }) => fastWebUtilities.classNames(
+  "control",
+  [`dp-${dp}`, Boolean(dp)],
+  ["no-shadow", Boolean(noShadow)],
+  ["not-relative", Boolean(notRelative)]
+);
+const elevationTemplate = fastElement.html` <div
+	class="${getClasses}"
+	part="base"
+>
+	<slot></slot>
+</div>`;
+
+const elevationDefinition = vividElement.defineVividComponent(
+  "elevation",
+  Elevation,
+  elevationTemplate,
+  [],
+  {
+    styles
+  }
+);
+const registerElevation = vividElement.createRegisterFunction(elevationDefinition);
+
+exports.Elevation = Elevation;
+exports.elevationDefinition = elevationDefinition;
+exports.registerElevation = registerElevation;

package/unbundled/definition6.js

@@ -0,0 +1,52 @@
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from './vivid-element.js';
+import { attr, html } from '@microsoft/fast-element';
+import { classNames } from '@microsoft/fast-web-utilities';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Elevation extends VividElement {
+}
+__decorateClass([
+  attr
+], Elevation.prototype, "dp");
+__decorateClass([
+  attr({ attribute: "no-shadow", mode: "boolean" })
+], Elevation.prototype, "noShadow");
+__decorateClass([
+  attr({ attribute: "not-relative", mode: "boolean" })
+], Elevation.prototype, "notRelative");
+
+const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}";
+
+const getClasses = ({ dp, noShadow, notRelative }) => classNames(
+  "control",
+  [`dp-${dp}`, Boolean(dp)],
+  ["no-shadow", Boolean(noShadow)],
+  ["not-relative", Boolean(notRelative)]
+);
+const elevationTemplate = html` <div
+	class="${getClasses}"
+	part="base"
+>
+	<slot></slot>
+</div>`;
+
+const elevationDefinition = defineVividComponent(
+  "elevation",
+  Elevation,
+  elevationTemplate,
+  [],
+  {
+    styles
+  }
+);
+const registerElevation = createRegisterFunction(elevationDefinition);
+
+export { Elevation as E, elevationDefinition as e, registerElevation as r };

package/unbundled/listbox.cjs

@@ -2,7 +2,7 @@
 
 const fastElement = require('@microsoft/fast-element');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const option = require('./option.cjs');
+const option_definition = require('./definition3.cjs');
 const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
@@ -55,14 +55,6 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
   get firstSelectedOption() {
     return this.selectedOptions[0] ?? null;
   }
-  /**
-   * Returns true if there is one or more selectable option.
-   *
-   * @internal
-   */
-  get hasSelectableOptions() {
-    return this.options.length > 0 && !this.options.every((o) => o.disabled);
-  }
   /**
    * The number of options.
    *
@@ -81,8 +73,19 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
     return this._options;
   }
   set options(value) {
+    const prev = this._options;
     this._options = value;
     fastElement.Observable.notify(this, "options");
+    if (this.$fastController.isConnected) {
+      const newSelectedIndex = this._newDefaultSelectedIndex(
+        prev,
+        value,
+        this.selectedIndex
+      );
+      if (newSelectedIndex !== null) {
+        this.selectedIndex = newSelectedIndex;
+      }
+    }
   }
   static {
     /**
@@ -91,7 +94,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
      * @param n - element to filter
      * @public
      */
-    this.slottedOptionFilter = (n) => option.isListboxOption(n) && !n.hidden;
+    this.slottedOptionFilter = (n) => option_definition.isListboxOption(n) && !n.hidden;
   }
   static {
     /**
@@ -156,34 +159,11 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
     const re = new RegExp(`^${pattern}`, "gi");
     return this.options.filter((o) => o.text.trim().match(re));
   }
-  /**
-   * Determines the index of the next option which is selectable, if any.
-   *
-   * @param prev - the previous selected index
-   * @param next - the next index to select
-   *
-   * @internal
-   */
-  getSelectableIndex(prev, next) {
-    const direction = prev > next ? -1 : 1;
-    const potentialDirection = prev + direction;
-    let nextSelectableOption = null;
-    switch (direction) {
-      case -1: {
-        nextSelectableOption = this.options.reduceRight(
-          (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index < potentialDirection ? thisOption : nextSelectableOption2,
-          nextSelectableOption
-        );
-        break;
-      }
-      case 1: {
-        nextSelectableOption = this.options.reduce(
-          (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index > potentialDirection ? thisOption : nextSelectableOption2,
-          nextSelectableOption
-        );
-        break;
-      }
-    }
+  getNextSelectableIndex(fromIndex) {
+    const nextSelectableOption = this.options.reduce(
+      (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index >= fromIndex ? thisOption : nextSelectableOption2,
+      null
+    );
     return this.options.indexOf(nextSelectableOption);
   }
   /**
@@ -301,18 +281,17 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @internal
    */
   selectedIndexChanged(prev, next) {
-    if (!this.hasSelectableOptions) {
-      this.selectedIndex = -1;
-      return;
-    }
-    if (this.options[this.selectedIndex]?.disabled && typeof prev === "number") {
-      const selectableIndex = this.getSelectableIndex(prev, next);
-      const newNext = selectableIndex > -1 ? selectableIndex : prev;
-      this.selectedIndex = newNext;
+    const validNext = this._validSelectedIndex(next);
+    if (next !== validNext) {
+      this.selectedIndex = validNext;
       return;
     }
     this.setSelectedOptions();
   }
+  _validSelectedIndex(index) {
+    const outOfRange = index > this.options.length - 1 || index < -1;
+    return outOfRange ? -1 : index;
+  }
   /**
    * Updates the selectedness of each option when the list of selected options changes.
    *
@@ -367,13 +346,18 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
       this.selectedIndex = this.selectedIndex - 1;
     }
   }
-  /**
-   * Updates the selected index to match the first selected option.
-   *
-   * @internal
-   */
-  setDefaultSelectedOption() {
-    this.selectedIndex = this.options.findIndex((el) => el.defaultSelected);
+  /// For this options change, determine if selectedIndex should change based on defaultSelected. Otherwise, returns null.
+  _newDefaultSelectedIndex(prev, next, currentSelectedIndex) {
+    for (const [index, newOption] of next.entries()) {
+      if (this._isDefaultSelected(newOption) && !prev.includes(newOption)) {
+        return index;
+      }
+    }
+    return null;
+  }
+  /// Whether an option should be considered defaultSelected
+  _isDefaultSelected(option) {
+    return option.defaultSelected;
   }
   /**
    * Sets an option as selected and gives it focus.
@@ -381,11 +365,9 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @public
    */
   setSelectedOptions() {
-    if (this.options.length) {
-      this.selectedOptions = [this.options[this.selectedIndex]];
-      this._activeDescendant = this.firstSelectedOption?.id ?? "";
-      this.focusAndScrollOptionIntoView();
-    }
+    this.selectedOptions = this.selectedIndex !== -1 ? [this.options[this.selectedIndex]] : [];
+    this._activeDescendant = this.firstSelectedOption?.id ?? "";
+    this.focusAndScrollOptionIntoView();
   }
   /**
    * Updates the list of options and resets the selected option when the slotted option content changes.
@@ -394,7 +376,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    */
   slottedOptionsChanged(_, next) {
     this.options = next.reduce((options, item) => {
-      if (option.isListboxOption(item)) {
+      if (option_definition.isListboxOption(item)) {
         options.push(item);
       }
       return options;
@@ -407,10 +389,6 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
       option.ariaPosInSet = `${index + 1}`;
       option.ariaSetSize = setSize;
     });
-    if (this.$fastController.isConnected) {
-      this.setSelectedOptions();
-      this.setDefaultSelectedOption();
-    }
   }
   /**
    * Updates the filtered list of options when the typeahead buffer changes.

package/unbundled/listbox.js

@@ -1,6 +1,6 @@
 import { Observable, attr, observable } from '@microsoft/fast-element';
 import { keySpace, keyEscape, keyEnter, keyTab, keyEnd, keyArrowUp, keyArrowDown, keyHome, findLastIndex, uniqueId } from '@microsoft/fast-web-utilities';
-import { i as isListboxOption } from './option.js';
+import { i as isListboxOption } from './definition3.js';
 import { V as VividElement } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
@@ -53,14 +53,6 @@ const _Listbox = class _Listbox extends VividElement {
   get firstSelectedOption() {
     return this.selectedOptions[0] ?? null;
   }
-  /**
-   * Returns true if there is one or more selectable option.
-   *
-   * @internal
-   */
-  get hasSelectableOptions() {
-    return this.options.length > 0 && !this.options.every((o) => o.disabled);
-  }
   /**
    * The number of options.
    *
@@ -79,8 +71,19 @@ const _Listbox = class _Listbox extends VividElement {
     return this._options;
   }
   set options(value) {
+    const prev = this._options;
     this._options = value;
     Observable.notify(this, "options");
+    if (this.$fastController.isConnected) {
+      const newSelectedIndex = this._newDefaultSelectedIndex(
+        prev,
+        value,
+        this.selectedIndex
+      );
+      if (newSelectedIndex !== null) {
+        this.selectedIndex = newSelectedIndex;
+      }
+    }
   }
   static {
     /**
@@ -154,34 +157,11 @@ const _Listbox = class _Listbox extends VividElement {
     const re = new RegExp(`^${pattern}`, "gi");
     return this.options.filter((o) => o.text.trim().match(re));
   }
-  /**
-   * Determines the index of the next option which is selectable, if any.
-   *
-   * @param prev - the previous selected index
-   * @param next - the next index to select
-   *
-   * @internal
-   */
-  getSelectableIndex(prev, next) {
-    const direction = prev > next ? -1 : 1;
-    const potentialDirection = prev + direction;
-    let nextSelectableOption = null;
-    switch (direction) {
-      case -1: {
-        nextSelectableOption = this.options.reduceRight(
-          (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index < potentialDirection ? thisOption : nextSelectableOption2,
-          nextSelectableOption
-        );
-        break;
-      }
-      case 1: {
-        nextSelectableOption = this.options.reduce(
-          (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index > potentialDirection ? thisOption : nextSelectableOption2,
-          nextSelectableOption
-        );
-        break;
-      }
-    }
+  getNextSelectableIndex(fromIndex) {
+    const nextSelectableOption = this.options.reduce(
+      (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index >= fromIndex ? thisOption : nextSelectableOption2,
+      null
+    );
     return this.options.indexOf(nextSelectableOption);
   }
   /**
@@ -299,18 +279,17 @@ const _Listbox = class _Listbox extends VividElement {
    * @internal
    */
   selectedIndexChanged(prev, next) {
-    if (!this.hasSelectableOptions) {
-      this.selectedIndex = -1;
-      return;
-    }
-    if (this.options[this.selectedIndex]?.disabled && typeof prev === "number") {
-      const selectableIndex = this.getSelectableIndex(prev, next);
-      const newNext = selectableIndex > -1 ? selectableIndex : prev;
-      this.selectedIndex = newNext;
+    const validNext = this._validSelectedIndex(next);
+    if (next !== validNext) {
+      this.selectedIndex = validNext;
       return;
     }
     this.setSelectedOptions();
   }
+  _validSelectedIndex(index) {
+    const outOfRange = index > this.options.length - 1 || index < -1;
+    return outOfRange ? -1 : index;
+  }
   /**
    * Updates the selectedness of each option when the list of selected options changes.
    *
@@ -365,13 +344,18 @@ const _Listbox = class _Listbox extends VividElement {
       this.selectedIndex = this.selectedIndex - 1;
     }
   }
-  /**
-   * Updates the selected index to match the first selected option.
-   *
-   * @internal
-   */
-  setDefaultSelectedOption() {
-    this.selectedIndex = this.options.findIndex((el) => el.defaultSelected);
+  /// For this options change, determine if selectedIndex should change based on defaultSelected. Otherwise, returns null.
+  _newDefaultSelectedIndex(prev, next, currentSelectedIndex) {
+    for (const [index, newOption] of next.entries()) {
+      if (this._isDefaultSelected(newOption) && !prev.includes(newOption)) {
+        return index;
+      }
+    }
+    return null;
+  }
+  /// Whether an option should be considered defaultSelected
+  _isDefaultSelected(option) {
+    return option.defaultSelected;
   }
   /**
    * Sets an option as selected and gives it focus.
@@ -379,11 +363,9 @@ const _Listbox = class _Listbox extends VividElement {
    * @public
    */
   setSelectedOptions() {
-    if (this.options.length) {
-      this.selectedOptions = [this.options[this.selectedIndex]];
-      this._activeDescendant = this.firstSelectedOption?.id ?? "";
-      this.focusAndScrollOptionIntoView();
-    }
+    this.selectedOptions = this.selectedIndex !== -1 ? [this.options[this.selectedIndex]] : [];
+    this._activeDescendant = this.firstSelectedOption?.id ?? "";
+    this.focusAndScrollOptionIntoView();
   }
   /**
    * Updates the list of options and resets the selected option when the slotted option content changes.
@@ -405,10 +387,6 @@ const _Listbox = class _Listbox extends VividElement {
       option.ariaPosInSet = `${index + 1}`;
       option.ariaSetSize = setSize;
     });
-    if (this.$fastController.isConnected) {
-      this.setSelectedOptions();
-      this.setDefaultSelectedOption();
-    }
   }
   /**
    * Updates the filtered list of options when the typeahead buffer changes.

package/unbundled/picker-field.template.cjs

@@ -8,45 +8,13 @@ const vividElement = require('./vivid-element.cjs');
 const withContextualHelp = require('./with-contextual-help.cjs');
 const withErrorText = require('./with-error-text.cjs');
 const formElement = require('./form-element.cjs');
+const trappedFocus = require('./trapped-focus.cjs');
 const localized = require('./localized.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const popup_definition = require('./definition4.cjs');
+const popup_definition = require('./definition5.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const button_definition = require('./definition.cjs');
 
-const ignoredEvents = /* @__PURE__ */ new WeakSet();
-const ignoreEventInFocusTraps = (event) => {
-  ignoredEvents.add(event);
-};
-const TrappedFocus = (Base) => {
-  class TrappedFocusElement extends Base {
-    /**
-     * @returns Whether focus was trapped.
-     * @internal
-     */
-    _trappedFocus(event, getFocusableEls) {
-      if (!ignoredEvents.has(event) && event.key === "Tab") {
-        const focusableEls = getFocusableEls();
-        const firstFocusableEl = focusableEls[0];
-        const lastFocusableEl = focusableEls[focusableEls.length - 1];
-        if (event.shiftKey) {
-          if (this.shadowRoot.activeElement === firstFocusableEl) {
-            lastFocusableEl.focus();
-            return true;
-          }
-        } else {
-          if (this.shadowRoot.activeElement === lastFocusableEl) {
-            firstFocusableEl.focus();
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-  }
-  return TrappedFocusElement;
-};
-
 const pickerFieldStyles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
 
 var __defProp = Object.defineProperty;
@@ -61,7 +29,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 class PickerField extends withContextualHelp.WithContextualHelp(
   mixins.WithFeedback(
     withErrorText.WithErrorText(
-      formElement.FormElement(TrappedFocus(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
+      formElement.FormElement(trappedFocus.TrappedFocus(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
     )
   )
 ) {
@@ -308,5 +276,4 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 
 exports.PickerField = PickerField;
 exports.PickerFieldTemplate = PickerFieldTemplate;
-exports.ignoreEventInFocusTraps = ignoreEventInFocusTraps;
 exports.pickerFieldStyles = pickerFieldStyles;

package/unbundled/picker-field.template.js

@@ -6,45 +6,13 @@ import { V as VividElement } from './vivid-element.js';
 import { W as WithContextualHelp } from './with-contextual-help.js';
 import { W as WithErrorText } from './with-error-text.js';
 import { F as FormElement } from './form-element.js';
+import { T as TrappedFocus } from './trapped-focus.js';
 import { L as Localized } from './localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { P as Popup } from './definition4.js';
+import { P as Popup } from './definition5.js';
 import { VwcTextFieldElement as TextField } from '../text-field/definition.js';
 import { B as Button } from './definition.js';
 
-const ignoredEvents = /* @__PURE__ */ new WeakSet();
-const ignoreEventInFocusTraps = (event) => {
-  ignoredEvents.add(event);
-};
-const TrappedFocus = (Base) => {
-  class TrappedFocusElement extends Base {
-    /**
-     * @returns Whether focus was trapped.
-     * @internal
-     */
-    _trappedFocus(event, getFocusableEls) {
-      if (!ignoredEvents.has(event) && event.key === "Tab") {
-        const focusableEls = getFocusableEls();
-        const firstFocusableEl = focusableEls[0];
-        const lastFocusableEl = focusableEls[focusableEls.length - 1];
-        if (event.shiftKey) {
-          if (this.shadowRoot.activeElement === firstFocusableEl) {
-            lastFocusableEl.focus();
-            return true;
-          }
-        } else {
-          if (this.shadowRoot.activeElement === lastFocusableEl) {
-            firstFocusableEl.focus();
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-  }
-  return TrappedFocusElement;
-};
-
 const pickerFieldStyles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
 
 var __defProp = Object.defineProperty;
@@ -304,4 +272,4 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 		</div>`;
 };
 
-export { PickerFieldTemplate as P, PickerField as a, ignoreEventInFocusTraps as i, pickerFieldStyles as p };
+export { PickerFieldTemplate as P, PickerField as a, pickerFieldStyles as p };

package/unbundled/slider.template.cjs

@@ -2,7 +2,7 @@
 
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const fastElement = require('@microsoft/fast-element');
-const popup_definition = require('./definition4.cjs');
+const popup_definition = require('./definition5.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
 
 const getDecimalPlaces = (num) => {

package/unbundled/slider.template.js

@@ -1,6 +1,6 @@
 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 { P as Popup, a as PlacementStrategy } from './definition5.js';
 import { d as delegateAria } from './delegates-aria.js';
 
 const getDecimalPlaces = (num) => {

package/unbundled/time-selection-picker.template.cjs

@@ -6,6 +6,7 @@ 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 trappedFocus = require('./trapped-focus.cjs');
 const localized = require('./localized.cjs');
 
 const isValidTimeStr = (timeStr) => {
@@ -261,7 +262,7 @@ const onBaseKeyDown = (x, event) => {
     const focusableElements = x.shadowRoot.querySelectorAll(".picker");
     const terminalElement = event.shiftKey ? focusableElements[0] : focusableElements[focusableElements.length - 1];
     if (x.shadowRoot.activeElement !== terminalElement) {
-      pickerField_template.ignoreEventInFocusTraps(event);
+      trappedFocus.ignoreEventInFocusTraps(event);
     }
     x._applyFocusedClass();
   }

package/unbundled/time-selection-picker.template.js

@@ -1,9 +1,10 @@
 import { V as VividElement, d as defineVividComponent } from './vivid-element.js';
 import { when, html, repeat, observable, attr, nullableNumberConverter, Observable, ExecutionContext, Updates, volatile, ref } from '@microsoft/fast-element';
-import { i as ignoreEventInFocusTraps, a as PickerField } from './picker-field.template.js';
+import { 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 { i as ignoreEventInFocusTraps } from './trapped-focus.js';
 import { L as Localized } from './localized.js';
 
 const isValidTimeStr = (timeStr) => {

package/unbundled/trapped-focus.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+const ignoredEvents = /* @__PURE__ */ new WeakSet();
+const ignoreEventInFocusTraps = (event) => {
+  ignoredEvents.add(event);
+};
+const TrappedFocus = (Base) => {
+  class TrappedFocusElement extends Base {
+    /**
+     * @returns Whether focus was trapped.
+     * @internal
+     */
+    _trappedFocus(event, getFocusableEls) {
+      if (!ignoredEvents.has(event) && event.key === "Tab") {
+        const focusableEls = getFocusableEls();
+        const firstFocusableEl = focusableEls[0];
+        const lastFocusableEl = focusableEls[focusableEls.length - 1];
+        if (event.shiftKey) {
+          if (this.shadowRoot.activeElement === firstFocusableEl) {
+            lastFocusableEl.focus();
+            return true;
+          }
+        } else {
+          if (this.shadowRoot.activeElement === lastFocusableEl) {
+            firstFocusableEl.focus();
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+  }
+  return TrappedFocusElement;
+};
+
+exports.TrappedFocus = TrappedFocus;
+exports.ignoreEventInFocusTraps = ignoreEventInFocusTraps;