@vonage/vivid 3.0.0-next.12 → 3.0.0-next.120

package/shared/key-codes.js

@@ -0,0 +1,97 @@
+/**
+ * Key Code values
+ * @deprecated - KeyCodes are deprecated, use individual string key exports
+ */
+var KeyCodes;
+(function (KeyCodes) {
+    KeyCodes[KeyCodes["alt"] = 18] = "alt";
+    KeyCodes[KeyCodes["arrowDown"] = 40] = "arrowDown";
+    KeyCodes[KeyCodes["arrowLeft"] = 37] = "arrowLeft";
+    KeyCodes[KeyCodes["arrowRight"] = 39] = "arrowRight";
+    KeyCodes[KeyCodes["arrowUp"] = 38] = "arrowUp";
+    KeyCodes[KeyCodes["back"] = 8] = "back";
+    KeyCodes[KeyCodes["backSlash"] = 220] = "backSlash";
+    KeyCodes[KeyCodes["break"] = 19] = "break";
+    KeyCodes[KeyCodes["capsLock"] = 20] = "capsLock";
+    KeyCodes[KeyCodes["closeBracket"] = 221] = "closeBracket";
+    KeyCodes[KeyCodes["colon"] = 186] = "colon";
+    KeyCodes[KeyCodes["colon2"] = 59] = "colon2";
+    KeyCodes[KeyCodes["comma"] = 188] = "comma";
+    KeyCodes[KeyCodes["ctrl"] = 17] = "ctrl";
+    KeyCodes[KeyCodes["delete"] = 46] = "delete";
+    KeyCodes[KeyCodes["end"] = 35] = "end";
+    KeyCodes[KeyCodes["enter"] = 13] = "enter";
+    KeyCodes[KeyCodes["equals"] = 187] = "equals";
+    KeyCodes[KeyCodes["equals2"] = 61] = "equals2";
+    KeyCodes[KeyCodes["equals3"] = 107] = "equals3";
+    KeyCodes[KeyCodes["escape"] = 27] = "escape";
+    KeyCodes[KeyCodes["forwardSlash"] = 191] = "forwardSlash";
+    KeyCodes[KeyCodes["function1"] = 112] = "function1";
+    KeyCodes[KeyCodes["function10"] = 121] = "function10";
+    KeyCodes[KeyCodes["function11"] = 122] = "function11";
+    KeyCodes[KeyCodes["function12"] = 123] = "function12";
+    KeyCodes[KeyCodes["function2"] = 113] = "function2";
+    KeyCodes[KeyCodes["function3"] = 114] = "function3";
+    KeyCodes[KeyCodes["function4"] = 115] = "function4";
+    KeyCodes[KeyCodes["function5"] = 116] = "function5";
+    KeyCodes[KeyCodes["function6"] = 117] = "function6";
+    KeyCodes[KeyCodes["function7"] = 118] = "function7";
+    KeyCodes[KeyCodes["function8"] = 119] = "function8";
+    KeyCodes[KeyCodes["function9"] = 120] = "function9";
+    KeyCodes[KeyCodes["home"] = 36] = "home";
+    KeyCodes[KeyCodes["insert"] = 45] = "insert";
+    KeyCodes[KeyCodes["menu"] = 93] = "menu";
+    KeyCodes[KeyCodes["minus"] = 189] = "minus";
+    KeyCodes[KeyCodes["minus2"] = 109] = "minus2";
+    KeyCodes[KeyCodes["numLock"] = 144] = "numLock";
+    KeyCodes[KeyCodes["numPad0"] = 96] = "numPad0";
+    KeyCodes[KeyCodes["numPad1"] = 97] = "numPad1";
+    KeyCodes[KeyCodes["numPad2"] = 98] = "numPad2";
+    KeyCodes[KeyCodes["numPad3"] = 99] = "numPad3";
+    KeyCodes[KeyCodes["numPad4"] = 100] = "numPad4";
+    KeyCodes[KeyCodes["numPad5"] = 101] = "numPad5";
+    KeyCodes[KeyCodes["numPad6"] = 102] = "numPad6";
+    KeyCodes[KeyCodes["numPad7"] = 103] = "numPad7";
+    KeyCodes[KeyCodes["numPad8"] = 104] = "numPad8";
+    KeyCodes[KeyCodes["numPad9"] = 105] = "numPad9";
+    KeyCodes[KeyCodes["numPadDivide"] = 111] = "numPadDivide";
+    KeyCodes[KeyCodes["numPadDot"] = 110] = "numPadDot";
+    KeyCodes[KeyCodes["numPadMinus"] = 109] = "numPadMinus";
+    KeyCodes[KeyCodes["numPadMultiply"] = 106] = "numPadMultiply";
+    KeyCodes[KeyCodes["numPadPlus"] = 107] = "numPadPlus";
+    KeyCodes[KeyCodes["openBracket"] = 219] = "openBracket";
+    KeyCodes[KeyCodes["pageDown"] = 34] = "pageDown";
+    KeyCodes[KeyCodes["pageUp"] = 33] = "pageUp";
+    KeyCodes[KeyCodes["period"] = 190] = "period";
+    KeyCodes[KeyCodes["print"] = 44] = "print";
+    KeyCodes[KeyCodes["quote"] = 222] = "quote";
+    KeyCodes[KeyCodes["scrollLock"] = 145] = "scrollLock";
+    KeyCodes[KeyCodes["shift"] = 16] = "shift";
+    KeyCodes[KeyCodes["space"] = 32] = "space";
+    KeyCodes[KeyCodes["tab"] = 9] = "tab";
+    KeyCodes[KeyCodes["tilde"] = 192] = "tilde";
+    KeyCodes[KeyCodes["windowsLeft"] = 91] = "windowsLeft";
+    KeyCodes[KeyCodes["windowsOpera"] = 219] = "windowsOpera";
+    KeyCodes[KeyCodes["windowsRight"] = 92] = "windowsRight";
+})(KeyCodes || (KeyCodes = {}));
+/**
+ * String values for use with KeyboardEvent.key
+ */
+const keyArrowDown = "ArrowDown";
+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";
+const ArrowKeys = {
+    ArrowDown: keyArrowDown,
+    ArrowLeft: keyArrowLeft,
+    ArrowRight: keyArrowRight,
+    ArrowUp: keyArrowUp,
+};
+
+export { ArrowKeys as A, keySpace as a, keyEscape as b, keyTab as c, keyEnd as d, keyArrowUp as e, keyArrowDown as f, keyHome as g, keyArrowLeft as h, keyArrowRight as i, keyEnter as k };

package/shared/numbers.js

@@ -0,0 +1,25 @@
+/**
+ * This method keeps a given value within the bounds of a min and max value. If the value
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Determines if a number value is within a specified range.
+ *
+ * @param value - the value to check
+ * @param min - the range start
+ * @param max - the range end
+ */
+function inRange(value, min, max = 0) {
+    [min, max] = [min, max].sort((a, b) => a - b);
+    return min <= value && value < max;
+}
+
+export { inRange as i, limit as l };

package/shared/patterns/affix.d.ts

@@ -6,4 +6,4 @@ export declare class AffixIcon {
 export declare class AffixIconWithTrailing extends AffixIcon {
     iconTrailing: boolean;
 }
-export declare const affixIconTemplateFactory: (context: ElementDefinitionContext) => (icon?: string) => ViewTemplate<AffixIcon> | null;
+export declare const affixIconTemplateFactory: (context: ElementDefinitionContext) => (icon?: string, className?: string) => ViewTemplate<AffixIcon> | null;

package/shared/patterns/focus.d.ts

@@ -0,0 +1,3 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+export declare const focusTemplateFactory: (context: ElementDefinitionContext) => ViewTemplate | null;

package/shared/patterns/form-elements/form-elements.d.ts

@@ -0,0 +1,31 @@
+import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+export interface FormElement {
+    charCount: boolean;
+    errorValidationMessage: boolean;
+    helperText: string;
+    successText: string;
+    label: string;
+    userValid: boolean;
+    dirtyValue: boolean;
+}
+export declare function formElements<T extends {
+    new (...args: any[]): Record<string, any>;
+}>(constructor: T): {
+    new (...args: any[]): {
+        [x: string]: any;
+        label?: string | undefined;
+        helperText?: string | undefined;
+        successText?: string | undefined;
+        charCount: boolean;
+        userValid: boolean;
+        "__#7518@#blurred": boolean;
+        readonly errorValidationMessage: any;
+        connectedCallback(): void;
+        "__#7518@#handleInvalidEvent": () => void;
+        disconnectedCallback(): void;
+        validate: () => void;
+    };
+} & T;
+declare type FeedbackType = 'error' | 'helper' | 'success';
+export declare function getFeedbackTemplate(messageType: FeedbackType, context: ElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<FormElement, any>;
+export {};

package/shared/patterns/form-elements/index.d.ts

@@ -0,0 +1 @@
+export * from './form-elements';

package/shared/patterns/index.d.ts

@@ -1 +1,3 @@
 export * from './affix';
+export * from './focus';
+export * from './form-elements';

package/shared/radio.js

@@ -0,0 +1,127 @@
+import { F as FoundationElement, _ as __decorate, a as attr, N as observable, b as __metadata } from './index.js';
+import { C as CheckableFormAssociated } from './form-associated.js';
+import { a as keySpace } from './key-codes.js';
+
+class _Radio extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Radio:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
+
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual radio control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+class Radio$1 extends FormAssociatedRadio {
+    constructor() {
+        super();
+        /**
+         * The element's value to be included in form submission when checked.
+         * Default to "on" to reach parity with input[type="radio"]
+         *
+         * @internal
+         */
+        this.initialValue = "on";
+        /**
+         * @internal
+         */
+        this.keypressHandler = (e) => {
+            switch (e.key) {
+                case keySpace:
+                    if (!this.checked && !this.readOnly) {
+                        this.checked = true;
+                    }
+                    return;
+            }
+            return true;
+        };
+        this.proxy.setAttribute("type", "radio");
+    }
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.readOnly = this.readOnly;
+        }
+    }
+    /**
+     * @internal
+     */
+    defaultCheckedChanged() {
+        var _a;
+        if (this.$fastController.isConnected && !this.dirtyChecked) {
+            // Setting this.checked will cause us to enter a dirty state,
+            // but if we are clean when defaultChecked is changed, we want to stay
+            // in a clean state, so reset this.dirtyChecked
+            if (!this.isInsideRadioGroup()) {
+                this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
+                this.dirtyChecked = false;
+            }
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        var _a, _b;
+        super.connectedCallback();
+        this.validate();
+        if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "radiogroup" &&
+            this.getAttribute("tabindex") === null) {
+            if (!this.disabled) {
+                this.setAttribute("tabindex", "0");
+            }
+        }
+        if (this.checkedAttribute) {
+            if (!this.dirtyChecked) {
+                // Setting this.checked will cause us to enter a dirty state,
+                // but if we are clean when defaultChecked is changed, we want to stay
+                // in a clean state, so reset this.dirtyChecked
+                if (!this.isInsideRadioGroup()) {
+                    this.checked = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;
+                    this.dirtyChecked = false;
+                }
+            }
+        }
+    }
+    isInsideRadioGroup() {
+        const parent = this.closest("[role=radiogroup]");
+        return parent !== null;
+    }
+    /**
+     * @internal
+     */
+    clickHandler(e) {
+        if (!this.disabled && !this.readOnly && !this.checked) {
+            this.checked = true;
+        }
+    }
+}
+__decorate([
+    attr({ attribute: "readonly", mode: "boolean" })
+], Radio$1.prototype, "readOnly", void 0);
+__decorate([
+    observable
+], Radio$1.prototype, "name", void 0);
+__decorate([
+    observable
+], Radio$1.prototype, "defaultSlottedNodes", void 0);
+
+class Radio extends Radio$1 {}
+__decorate([attr, __metadata("design:type", String)], Radio.prototype, "label", void 0);
+
+export { Radio as R };

package/shared/ref.js

@@ -0,0 +1,41 @@
+import { R as AttachedBehaviorHTMLDirective } from './index.js';
+
+/**
+ * The runtime behavior for template references.
+ * @public
+ */
+class RefBehavior {
+    /**
+     * Creates an instance of RefBehavior.
+     * @param target - The element to reference.
+     * @param propertyName - The name of the property to assign the reference to.
+     */
+    constructor(target, propertyName) {
+        this.target = target;
+        this.propertyName = propertyName;
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     */
+    bind(source) {
+        source[this.propertyName] = this.target;
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
+    unbind() { }
+}
+/**
+ * A directive that observes the updates a property with a reference to the element.
+ * @param propertyName - The name of the property to assign the reference to.
+ * @public
+ */
+function ref(propertyName) {
+    return new AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
+}
+
+export { ref as r };

package/shared/slotted.js

@@ -1,4 +1,4 @@
-import { O as Observable, e as emptyArray, A as AttachedBehaviorHTMLDirective } from './index.js';
+import { V as Observable, T as emptyArray, R as AttachedBehaviorHTMLDirective } from './index.js';
 
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.

package/shared/start-end.js

@@ -0,0 +1,50 @@
+import { h as html } from './index.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>
+`;
+
+export { StartEnd as S };

package/shared/string-trim.js

@@ -0,0 +1,40 @@
+import { i as functionUncurryThis, P as requireObjectCoercible$1 } from './index.js';
+import { t as toString$1 } from './to-string.js';
+
+// a string of all valid unicode whitespaces
+var whitespaces$1 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' +
+  '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
+
+var uncurryThis = functionUncurryThis;
+var requireObjectCoercible = requireObjectCoercible$1;
+var toString = toString$1;
+var whitespaces = whitespaces$1;
+
+var replace = uncurryThis(''.replace);
+var whitespace = '[' + whitespaces + ']';
+var ltrim = RegExp('^' + whitespace + whitespace + '*');
+var rtrim = RegExp(whitespace + whitespace + '*$');
+
+// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
+var createMethod = function (TYPE) {
+  return function ($this) {
+    var string = toString(requireObjectCoercible($this));
+    if (TYPE & 1) string = replace(string, ltrim, '');
+    if (TYPE & 2) string = replace(string, rtrim, '');
+    return string;
+  };
+};
+
+var stringTrim = {
+  // `String.prototype.{ trimLeft, trimStart }` methods
+  // https://tc39.es/ecma262/#sec-string.prototype.trimstart
+  start: createMethod(1),
+  // `String.prototype.{ trimRight, trimEnd }` methods
+  // https://tc39.es/ecma262/#sec-string.prototype.trimend
+  end: createMethod(2),
+  // `String.prototype.trim` method
+  // https://tc39.es/ecma262/#sec-string.prototype.trim
+  trim: createMethod(3)
+};
+
+export { stringTrim as s, whitespaces$1 as w };

package/shared/text-anchor.js

@@ -4,9 +4,7 @@ import { A as Anchor } from './anchor.js';
 import { a as applyMixins } from './apply-mixins.js';
 
 class TextAnchor extends Anchor {}
-
 __decorate([attr, __metadata("design:type", String)], TextAnchor.prototype, "text", void 0);
-
 applyMixins(TextAnchor, AffixIcon);
 
 export { TextAnchor as T };

package/shared/text-anchor.template.js

@@ -1,18 +1,18 @@
 import { a as affixIconTemplateFactory } from './affix.js';
+import { f as focusTemplateFactory } from './focus2.js';
 import { h as html } from './index.js';
-import { r as ref } from './aria-global.js';
+import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
 let _ = t => t,
-    _t;
-
+  _t;
 const getClasses = ({
   text,
   icon
 }) => classNames('control', ['icon-only', !text && !!icon]);
-
 const textAnchorTemplate = context => {
   const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
   return html(_t || (_t = _`<a
         class="${0}"
         download="${0}"
@@ -47,8 +47,9 @@ const textAnchorTemplate = context => {
     >
       ${0}
       ${0}
+      ${0}
     </a>
-`), getClasses, x => x.download, x => x.href, x => x.hreflang, x => x.ping, x => x.referrerpolicy, x => x.rel, x => x.target, x => x.type, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), x => affixIconTemplate(x.icon), x => x.text);
+`), getClasses, x => x.download, x => x.href, x => x.hreflang, x => x.ping, x => x.referrerpolicy, x => x.rel, x => x.target, x => x.type, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, x => affixIconTemplate(x.icon), x => x.text);
 };
 
 export { textAnchorTemplate as t };

package/shared/to-string.js

@@ -0,0 +1,51 @@
+import { w as wellKnownSymbol$2, c as classofRaw$1, k as isCallable$1 } from './index.js';
+
+var wellKnownSymbol$1 = wellKnownSymbol$2;
+
+var TO_STRING_TAG$1 = wellKnownSymbol$1('toStringTag');
+var test = {};
+
+test[TO_STRING_TAG$1] = 'z';
+
+var toStringTagSupport = String(test) === '[object z]';
+
+var TO_STRING_TAG_SUPPORT = toStringTagSupport;
+var isCallable = isCallable$1;
+var classofRaw = classofRaw$1;
+var wellKnownSymbol = wellKnownSymbol$2;
+
+var TO_STRING_TAG = wellKnownSymbol('toStringTag');
+var $Object = Object;
+
+// ES3 wrong here
+var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments';
+
+// fallback for IE11 Script Access Denied error
+var tryGet = function (it, key) {
+  try {
+    return it[key];
+  } catch (error) { /* empty */ }
+};
+
+// getting tag from ES6+ `Object.prototype.toString`
+var classof$1 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
+  var O, tag, result;
+  return it === undefined ? 'Undefined' : it === null ? 'Null'
+    // @@toStringTag case
+    : typeof (tag = tryGet(O = $Object(it), TO_STRING_TAG)) == 'string' ? tag
+    // builtinTag case
+    : CORRECT_ARGUMENTS ? classofRaw(O)
+    // ES3 arguments fallback
+    : (result = classofRaw(O)) == 'Object' && isCallable(O.callee) ? 'Arguments' : result;
+};
+
+var classof = classof$1;
+
+var $String = String;
+
+var toString = function (argument) {
+  if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
+  return $String(argument);
+};
+
+export { classof$1 as c, toString as t };

package/side-drawer/index.js

@@ -1,82 +1,6 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import '../shared/web.dom-collections.iterator.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
-import { w as when } from '../shared/when.js';
-import { s as slotted } from '../shared/slotted.js';
-import { c as classNames } from '../shared/class-names.js';
-import '../shared/object-set-prototype-of.js';
+import { r as registerSideDrawer } from '../shared/definition34.js';
+import '../shared/index.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
 
-class SideDrawer extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    this.alternate = false;
-    this.modal = false;
-    this.open = false;
-  }
-
-}
-
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], SideDrawer.prototype, "alternate", void 0);
-
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], SideDrawer.prototype, "modal", void 0);
-
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], SideDrawer.prototype, "open", void 0);
-
-__decorate([attr, __metadata("design:type", String)], SideDrawer.prototype, "position", void 0);
-
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  display: flex;\n  block-size: 100vh;\n}\n\n:host([position=end]) {\n  flex-direction: row-reverse;\n}\n\n.control {\n  position: fixed;\n  z-index: var(--side-drawer-z-index, 6);\n  top: auto;\n  bottom: 0;\n  display: flex;\n  overflow: auto;\n  flex-direction: column;\n  flex-shrink: 0;\n  background-color: var(--side-drawer-background-color, var(--vvd-color-canvas));\n  block-size: inherit;\n  color: var(--side-drawer-color, var(--vvd-color-on-canvas));\n  inline-size: var(--side-drawer-inline-size, 280px);\n}\n.control.alternate {\n  background-color: var(--vvd-color-canvas);\n}\n.control:not(.open).end {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.end) {\n  transform: translateX(-100%);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content {\n  font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  margin-inline-start: var(--side-drawer-inline-size, 280px);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content ::slotted(vwc-top-app-bar),\n.control.control.open:not(.modal) + .side-drawer-app-content ::slotted(vwc-top-app-bar-fixed) {\n  --mdc-top-app-bar-width: calc(100% - var(--side-drawer-inline-size, 280px));\n}\n.control.control.open:not(.modal).end + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-inline-size, 280px);\n  margin-inline-start: 0;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.side-drawer-top-bar {\n  font: 500 condensed 26px / 36px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  padding-inline-end: var(--side-drawer-padding-top-bar, 16px);\n  padding-inline-start: var(--side-drawer-padding-top-bar, 16px);\n}\n\n.side-drawer-content {\n  background-color: inherit;\n  overflow-y: auto;\n  padding-inline-end: var(--side-drawer-padding-body, 16px);\n  padding-inline-start: var(--side-drawer-padding-body, 16px);\n}\n\n.modal:not(.end) {\n  inset-inline-start: 0;\n}\n.modal.end {\n  inset-inline-end: 0;\n}\n\n.scrim {\n  background-color: var(--vvd-color-on-canvas);\n  opacity: 0.5;\n  position: fixed;\n  z-index: calc(6 - 1);\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}";
-styleInject(css_248z);
-
-let _ = t => t,
-    _t,
-    _t2;
-
-const getClasses = ({
-  alternate,
-  modal,
-  open,
-  position
-}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], ['end', position === 'end']);
-
-const sideDrawerTemplate = () => html(_t || (_t = _`
-	<aside class="${0}" part="${0}"
-	 @keydown="${0}">
-
-	 	<header class="side-drawer-top-bar" part="side-drawer-top-bar">
-	 		<slot name="top-bar" ${0}></slot>
- 		</header>
-
-		<div class="side-drawer-content">
-			<slot></slot>
-		</div>
-	</aside>
-
-	<div class="side-drawer-app-content">
-		<slot name="app-content"></slot>
-	</div>
-
-	${0}
-`), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', (x, c) => handleKeydown(x, c.event), slotted('hasTopBar'), when(x => x.modal && x.open, html(_t2 || (_t2 = _`<div class="scrim" @click="${0}" @keydown="${0}"></div>`), x => x.open = false, x => x.open = false)));
-
-const handleKeydown = (x, {
-  key
-}) => {
-  if (key === 'Escape') {
-    x.open = false;
-  }
-};
-
-const VIVIDSideDrawer = SideDrawer.compose({
-  baseName: 'side-drawer',
-  template: sideDrawerTemplate,
-  styles: css_248z
-});
-designSystem.register(VIVIDSideDrawer());
-
-export { VIVIDSideDrawer };
+registerSideDrawer();

package/slider/index.js

@@ -0,0 +1,17 @@
+import { r as registerSlider } from '../shared/definition35.js';
+import '../shared/index.js';
+import '../shared/definition4.js';
+import '../shared/focus.js';
+import '../shared/to-string.js';
+import '../shared/string-trim.js';
+import '../shared/es.regexp.to-string.js';
+import '../shared/direction.js';
+import '../shared/numbers.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
+import '../shared/aria.js';
+import '../shared/focus2.js';
+import '../shared/ref.js';
+import '../shared/class-names.js';
+
+registerSlider();