@vonage/vivid 4.14.0 → 4.14.2

package/shared/definition8.cjs

@@ -2,11 +2,10 @@
 
 const definition = require('./definition11.cjs');
 const definition$1 = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.cjs');
-const vividElement = require('./vivid-element.cjs');
 const localized = require('./localized.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
@@ -71,38 +70,38 @@ class Banner extends vividElement.VividElement {
   #closeOnKeyDown;
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "dismiss-aria-label" })
+  vividElement.attr({ attribute: "dismiss-aria-label" })
 ], Banner.prototype, "dismissButtonAriaLabel");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Banner.prototype, "role");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "action-href" })
+  vividElement.attr({ attribute: "action-href" })
 ], Banner.prototype, "actionHref");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "action-text" })
+  vividElement.attr({ attribute: "action-text" })
 ], Banner.prototype, "actionText");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Banner.prototype, "removable");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-live" })
+  vividElement.attr({ attribute: "aria-live" })
 ], Banner.prototype, "ariaLive");
 __decorateClass([
-  defineVividComponent.attr()
+  vividElement.attr()
 ], Banner.prototype, "text");
 __decorateClass([
-  defineVividComponent.attr()
+  vividElement.attr()
 ], Banner.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Banner.prototype, "actionItemsSlottedContent");
 applyMixins.applyMixins(Banner, affix.AffixIcon);
 applyMixins.applyMixins(Banner, localized.Localized);
 
 const getClasses = (_) => classNames.classNames("control", [`connotation-${_.connotation}`, !!_.connotation]);
 function renderDismissButton(buttonTag) {
-  return defineVividComponent.html`
+  return vividElement.html`
 	  <${buttonTag}
 	  		aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.banner.dismissButtonLabel}"
 			part="${(x) => x.connotation === "warning" ? "" : "vvd-theme-alternate"}"
@@ -115,7 +114,7 @@ function renderDismissButton(buttonTag) {
 const BannerTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   const buttonTag = context.tagFor(definition.Button);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<div class="${getClasses}">
 			<header class="header">
 				<div class="content">
@@ -140,7 +139,7 @@ const BannerTemplate = (context) => {
 	`;
 };
 
-const bannerDefinition = defineVividComponent.defineVividComponent(
+const bannerDefinition = vividElement.defineVividComponent(
   "banner",
   Banner,
   BannerTemplate,
@@ -149,7 +148,7 @@ const bannerDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerBanner = defineVividComponent.createRegisterFunction(bannerDefinition);
+const registerBanner = vividElement.createRegisterFunction(bannerDefinition);
 
 exports.bannerDefinition = bannerDefinition;
 exports.registerBanner = registerBanner;

package/shared/definition8.js

@@ -1,10 +1,9 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { i as iconDefinition } from './definition27.js';
-import { a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { C as Connotation } from './enums.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { V as VividElement } from './vivid-element.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
 import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';

package/shared/definition9.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const breadcrumbItem = require('./breadcrumb-item.cjs');
 const textAnchor_template = require('./text-anchor.template.cjs');
 const when = require('./when.cjs');
@@ -12,20 +12,20 @@ const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canv
 const getClasses = (_) => classNames.classNames("base");
 const BreadcrumbItemTemplate = (context) => {
   const iconTag = context.tagFor(definition.Icon);
-  return defineVividComponent.html` <div role="listitem" class="${getClasses}">
-		${when.when((x) => x.text && !x.href, defineVividComponent.html`${(x) => x.text}`)}
+  return vividElement.html` <div role="listitem" class="${getClasses}">
+		${when.when((x) => x.text && !x.href, vividElement.html`${(x) => x.text}`)}
 		${when.when(
     (x) => x.text && x.href && x.href.length > 0,
-    defineVividComponent.html`${textAnchor_template.textAnchorTemplate(context)}`
+    vividElement.html`${textAnchor_template.textAnchorTemplate(context)}`
   )}
 		${when.when(
     (x) => x.separator,
-    defineVividComponent.html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
+    vividElement.html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
   )}
 	</div>`;
 };
 
-const breadcrumbItemDefinition = defineVividComponent.defineVividComponent(
+const breadcrumbItemDefinition = vividElement.defineVividComponent(
   "breadcrumb-item",
   breadcrumbItem.BreadcrumbItem,
   BreadcrumbItemTemplate,
@@ -37,7 +37,7 @@ const breadcrumbItemDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerBreadcrumbItem = defineVividComponent.createRegisterFunction(
+const registerBreadcrumbItem = vividElement.createRegisterFunction(
   breadcrumbItemDefinition
 );
 

package/shared/definition9.js

@@ -1,5 +1,5 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
-import { h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { B as BreadcrumbItem } from './breadcrumb-item.js';
 import { t as textAnchorTemplate } from './text-anchor.template.js';
 import { w as when } from './when.js';

package/shared/form-associated.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 
 const proxySlotName = "form-associated-proxy";
@@ -92,7 +92,7 @@ function FormAssociated(BaseCtor) {
         );
         return Object.freeze(forLabels.concat(Array.from(parentLabels)));
       } else {
-        return defineVividComponent.emptyArray;
+        return vividElement.emptyArray;
       }
     }
     /**
@@ -141,7 +141,7 @@ function FormAssociated(BaseCtor) {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.disabled = this.disabled;
       }
-      defineVividComponent.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
+      vividElement.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
     }
     /**
      * Invoked when the `name` property changes
@@ -168,7 +168,7 @@ function FormAssociated(BaseCtor) {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.required = this.required;
       }
-      defineVividComponent.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
+      vividElement.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
       this.validate();
     }
     /**
@@ -335,12 +335,12 @@ function FormAssociated(BaseCtor) {
       e.stopPropagation();
     }
   };
-  defineVividComponent.attr({ mode: "boolean" })(C.prototype, "disabled");
-  defineVividComponent.attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
-  defineVividComponent.attr({ attribute: "current-value" })(C.prototype, "currentValue");
-  defineVividComponent.attr(C.prototype, "name");
-  defineVividComponent.attr({ mode: "boolean" })(C.prototype, "required");
-  defineVividComponent.observable(C.prototype, "value");
+  vividElement.attr({ mode: "boolean" })(C.prototype, "disabled");
+  vividElement.attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
+  vividElement.attr({ attribute: "current-value" })(C.prototype, "currentValue");
+  vividElement.attr(C.prototype, "name");
+  vividElement.attr({ mode: "boolean" })(C.prototype, "required");
+  vividElement.observable(C.prototype, "value");
   return C;
 }
 function CheckableFormAssociated(BaseCtor) {
@@ -418,16 +418,16 @@ function CheckableFormAssociated(BaseCtor) {
       this.dirtyChecked = false;
     }
   }
-  defineVividComponent.attr({ attribute: "checked", mode: "boolean" })(
+  vividElement.attr({ attribute: "checked", mode: "boolean" })(
     D.prototype,
     "checkedAttribute"
   );
-  defineVividComponent.attr({ attribute: "current-checked", converter: defineVividComponent.booleanConverter })(
+  vividElement.attr({ attribute: "current-checked", converter: vividElement.booleanConverter })(
     D.prototype,
     "currentChecked"
   );
-  defineVividComponent.observable(D.prototype, "defaultChecked");
-  defineVividComponent.observable(D.prototype, "checked");
+  vividElement.observable(D.prototype, "defaultChecked");
+  vividElement.observable(D.prototype, "checked");
   return D;
 }
 

package/shared/form-associated.js

@@ -1,4 +1,4 @@
-import { a as attr, o as observable, c as booleanConverter, e as emptyArray, D as DOM } from './defineVividComponent.js';
+import { a as attr, o as observable, c as booleanConverter, e as emptyArray, D as DOM } from './vivid-element.js';
 import { k as keyEnter } from './key-codes.js';
 
 const proxySlotName = "form-associated-proxy";

package/shared/form-associated2.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes2.cjs');
 
 const proxySlotName = "form-associated-proxy";
@@ -117,7 +117,7 @@ function FormAssociated(BaseCtor) {
                 return Object.freeze(labels);
             }
             else {
-                return defineVividComponent.emptyArray;
+                return vividElement.emptyArray;
             }
         }
         /**
@@ -176,7 +176,7 @@ function FormAssociated(BaseCtor) {
             if (this.proxy instanceof HTMLElement) {
                 this.proxy.disabled = this.disabled;
             }
-            defineVividComponent.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
+            vividElement.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
         }
         /**
          * Invoked when the `name` property changes
@@ -209,7 +209,7 @@ function FormAssociated(BaseCtor) {
             if (this.proxy instanceof HTMLElement) {
                 this.proxy.required = this.required;
             }
-            defineVividComponent.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
+            vividElement.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
             this.validate();
         }
         /**
@@ -371,12 +371,12 @@ function FormAssociated(BaseCtor) {
             e.stopPropagation();
         }
     };
-    defineVividComponent.attr({ mode: "boolean" })(C.prototype, "disabled");
-    defineVividComponent.attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
-    defineVividComponent.attr({ attribute: "current-value" })(C.prototype, "currentValue");
-    defineVividComponent.attr(C.prototype, "name");
-    defineVividComponent.attr({ mode: "boolean" })(C.prototype, "required");
-    defineVividComponent.observable(C.prototype, "value");
+    vividElement.attr({ mode: "boolean" })(C.prototype, "disabled");
+    vividElement.attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
+    vividElement.attr({ attribute: "current-value" })(C.prototype, "currentValue");
+    vividElement.attr(C.prototype, "name");
+    vividElement.attr({ mode: "boolean" })(C.prototype, "required");
+    vividElement.observable(C.prototype, "value");
     return C;
 }
 

package/shared/form-associated2.js

@@ -1,4 +1,4 @@
-import { a as attr, o as observable, e as emptyArray, D as DOM } from './defineVividComponent.js';
+import { a as attr, o as observable, e as emptyArray, D as DOM } from './vivid-element.js';
 import { k as keyEnter } from './key-codes2.js';
 
 const proxySlotName = "form-associated-proxy";

package/shared/form-elements.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
@@ -20,15 +20,15 @@ var __decorateClass = (decorators, target, key, kind) => {
 class FormElementHelperText {
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "helper-text" })
+  vividElement.attr({ attribute: "helper-text" })
 ], FormElementHelperText.prototype, "helperText");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], FormElementHelperText.prototype, "_helperTextSlottedContent");
 class FormElementSuccessText {
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "success-text" })
+  vividElement.attr({ attribute: "success-text" })
 ], FormElementSuccessText.prototype, "successText");
 class FormElementCharCount {
   constructor() {
@@ -36,7 +36,7 @@ class FormElementCharCount {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     attribute: "char-count",
     mode: "boolean"
   })
@@ -87,10 +87,10 @@ function formElements(constructor) {
     }
   }
   __decorateClass([
-    defineVividComponent.attr
+    vividElement.attr
   ], Decorated.prototype, "label");
   __decorateClass([
-    defineVividComponent.observable
+    vividElement.observable
   ], Decorated.prototype, "errorValidationMessage");
   return Decorated;
 }
@@ -121,7 +121,7 @@ const isFeedbackAvailable = (config, x) => Boolean(
   x[config.messageProperty] || config.slot && x[config.slot.slottedContentProperty]?.length
 );
 function getFeedbackTemplate(context) {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<style>
 			${messageStyles}
 		</style>
@@ -144,13 +144,13 @@ function getFeedbackTemplate(context) {
 }
 function getFeedbackTypeTemplate(context, config, shouldShow) {
   const iconTag = context.tagFor(definition.Icon);
-  const messageTemplate = defineVividComponent.html`${(x) => x[config.messageProperty]}`;
-  const innerTemplate = config.slot ? defineVividComponent.html`<slot
+  const messageTemplate = vividElement.html`${(x) => x[config.messageProperty]}`;
+  const innerTemplate = config.slot ? vividElement.html`<slot
 				name="${config.slot.name}"
 				${slotted.slotted(config.slot.slottedContentProperty)}
 				>${messageTemplate}</slot
 		  >` : messageTemplate;
-  return defineVividComponent.html`<div
+  return vividElement.html`<div
 		class="${(x) => classNames.classNames(
     "message",
     `${config.className}-message`,
@@ -162,7 +162,7 @@ function getFeedbackTypeTemplate(context, config, shouldShow) {
 	>
 		${when.when(
     (x) => shouldShow(x) && config.iconType,
-    defineVividComponent.html`<${iconTag} class="message-icon" name="${config.iconType}"></${iconTag}>`
+    vividElement.html`<${iconTag} class="message-icon" name="${config.iconType}"></${iconTag}>`
   )}
 		<span class="message-text">${innerTemplate}</span>
 	</div>`;
@@ -196,7 +196,7 @@ function errorText(constructor) {
     }
   }
   __decorateClass([
-    defineVividComponent.attr({ attribute: "error-text" })
+    vividElement.attr({ attribute: "error-text" })
   ], Decorated.prototype, "errorText");
   return Decorated;
 }

package/shared/form-elements.js

@@ -1,5 +1,5 @@
 import { I as Icon } from './definition27.js';
-import { a as attr, o as observable, h as html } from './defineVividComponent.js';
+import { a as attr, o as observable, h as html } from './vivid-element.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';

package/shared/foundation/progress/base-progress.d.ts

@@ -1,5 +1,5 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-export declare class BaseProgress extends FoundationElement {
+import { VividElement } from '../vivid-element/vivid-element';
+export declare class BaseProgress extends VividElement {
     value: number | null;
     min: number;
     max: number;

package/shared/foundation-element.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -382,7 +382,7 @@ const DI = Object.freeze({
                         : DI.getOrCreateDOMContainer();
                     value = container.get(key);
                     this[diPropertyKey] = value;
-                    if (respectConnection && this instanceof defineVividComponent.FASTElement) {
+                    if (respectConnection && this instanceof vividElement.FASTElement) {
                         const notifier = this.$fastController;
                         const handleChange = () => {
                             const newContainer = DI.findResponsibleContainer(this);
@@ -903,7 +903,7 @@ class ContainerImpl {
         let current = requestor;
         let resolver;
         if (searchAncestors) {
-            let resolutions = defineVividComponent.emptyArray;
+            let resolutions = vividElement.emptyArray;
             while (current != null) {
                 resolver = current.resolvers.get(key);
                 if (resolver != null) {
@@ -921,7 +921,7 @@ class ContainerImpl {
                 if (resolver == null) {
                     current = current.parent;
                     if (current == null) {
-                        return defineVividComponent.emptyArray;
+                        return vividElement.emptyArray;
                     }
                 }
                 else {
@@ -929,7 +929,7 @@ class ContainerImpl {
                 }
             }
         }
-        return defineVividComponent.emptyArray;
+        return vividElement.emptyArray;
     }
     getFactory(Type) {
         let factory = factories.get(Type);
@@ -1262,10 +1262,10 @@ class DefaultComponentPresentation {
             styles === void 0
                 ? null
                 : Array.isArray(styles)
-                    ? defineVividComponent.ElementStyles.create(styles)
-                    : styles instanceof defineVividComponent.ElementStyles
+                    ? vividElement.ElementStyles.create(styles)
+                    : styles instanceof vividElement.ElementStyles
                         ? styles
-                        : defineVividComponent.ElementStyles.create([styles]);
+                        : vividElement.ElementStyles.create([styles]);
     }
     /**
      * Applies the presentation details to the specified element.
@@ -1291,7 +1291,7 @@ class DefaultComponentPresentation {
  *
  * @public
  */
-class FoundationElement extends defineVividComponent.FASTElement {
+class FoundationElement extends vividElement.FASTElement {
     constructor() {
         super(...arguments);
         this._presentation = void 0;
@@ -1344,10 +1344,10 @@ class FoundationElement extends defineVividComponent.FASTElement {
     }
 }
 __decorate([
-    defineVividComponent.observable
+    vividElement.observable
 ], FoundationElement.prototype, "template", void 0);
 __decorate([
-    defineVividComponent.observable
+    vividElement.observable
 ], FoundationElement.prototype, "styles", void 0);
 function resolveOption(option, context, definition) {
     if (typeof option === "function") {

package/shared/foundation-element.js

@@ -1,4 +1,4 @@
-import { F as FASTElement, e as emptyArray, E as ElementStyles, o as observable } from './defineVividComponent.js';
+import { F as FASTElement, e as emptyArray, E as ElementStyles, o as observable } from './vivid-element.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.

package/shared/key-codes2.cjs

@@ -1,54 +1,5 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
-const ref = require('./ref.cjs');
-
-/**
- * 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
- */
-defineVividComponent.html `
-    <span part="end" ${ref.ref("endContainer")}>
-        <slot
-            name="end"
-            ${ref.ref("end")}
-            @slotchange="${x => x.handleEndContentChange()}"
-        ></slot>
-    </span>
-`;
-/**
- * The template for the start element.
- * For use with {@link StartEnd}
- *
- * @public
- * @deprecated - use startSlotTemplate
- */
-defineVividComponent.html `
-    <span part="start" ${ref.ref("startContainer")}>
-        <slot
-            name="start"
-            ${ref.ref("start")}
-            @slotchange="${x => x.handleStartContentChange()}"
-        ></slot>
-    </span>
-`;
-
 /**
  * Key Code values
  * @deprecated - KeyCodes are deprecated, use individual string key exports
@@ -133,20 +84,13 @@ const keyArrowLeft = "ArrowLeft";
 const keyArrowRight = "ArrowRight";
 const keyArrowUp = "ArrowUp";
 const keyEnter = "Enter";
-const keyEscape = "Escape";
 const keyHome = "Home";
 const keyEnd = "End";
-const keySpace = " ";
-const keyTab = "Tab";
 
-exports.StartEnd = StartEnd;
 exports.keyArrowDown = keyArrowDown;
 exports.keyArrowLeft = keyArrowLeft;
 exports.keyArrowRight = keyArrowRight;
 exports.keyArrowUp = keyArrowUp;
 exports.keyEnd = keyEnd;
 exports.keyEnter = keyEnter;
-exports.keyEscape = keyEscape;
 exports.keyHome = keyHome;
-exports.keySpace = keySpace;
-exports.keyTab = keyTab;

package/shared/key-codes2.js

@@ -1,52 +1,3 @@
-import { h as html } from './defineVividComponent.js';
-import { r as ref } from './ref.js';
-
-/**
- * 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>
-`;
-
 /**
  * Key Code values
  * @deprecated - KeyCodes are deprecated, use individual string key exports
@@ -131,10 +82,7 @@ const keyArrowLeft = "ArrowLeft";
 const keyArrowRight = "ArrowRight";
 const keyArrowUp = "ArrowUp";
 const keyEnter = "Enter";
-const keyEscape = "Escape";
 const keyHome = "Home";
 const keyEnd = "End";
-const keySpace = " ";
-const keyTab = "Tab";
 
-export { StartEnd as S, keyArrowRight as a, keyArrowLeft as b, keyArrowDown as c, keyArrowUp as d, keyEnd as e, keyHome as f, keySpace as g, keyEscape as h, keyTab as i, keyEnter as k };
+export { keyArrowRight as a, keyArrowLeft as b, keyArrowDown as c, keyArrowUp as d, keyEnd as e, keyHome as f, keyEnter as k };