@vonage/vivid 3.26.0 → 3.27.0

package/shared/definition42.js

@@ -1,604 +1,90 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, n as nullableNumberConverter, g as global$1, l as fails$1, k as functionUncurryThis, G as _export, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { f as focusRegistries } from './definition4.js';
-import { t as toString$1 } from './to-string.js';
-import { w as whitespaces$1, s as stringTrim } from './string-trim.js';
-import './es.regexp.to-string.js';
-import { D as Direction, g as getDirection } from './direction.js';
-import { l as limit$1 } from './numbers.js';
-import { F as FormAssociated } from './form-associated.js';
-import { O as Orientation } from './aria.js';
-import { a as keyHome, k as keyEnd, b as keyArrowDown, i as keyArrowLeft, c as keyArrowUp, h as keyArrowRight } from './key-codes.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import { r as ref } from './ref.js';
-import { O as Orientation$1 } from './aria2.js';
+import { F as FoundationElement, V as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-/**
- * Converts a pixel coordinate on the track to a percent of the track's range
- */
-function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
-    let pct = limit$1(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
-    if (direction === Direction.rtl) {
-        pct = 1 - pct;
-    }
-    return pct;
-}
-
-class _Slider extends FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Slider:class)} component.
- *
- * @internal
- */
-class FormAssociatedSlider extends FormAssociated(_Slider) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
-}
-
-/**
- * The selection modes of a {@link @microsoft/fast-foundation#(Slider:class)}.
- * @public
- */
-const SliderMode = {
-    singleValue: "single-value",
-};
-/**
- * A Slider Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#slider | ARIA slider }.
- *
- * @slot track - The track of the slider
- * @slot track-start - The track-start visual indicator
- * @slot thumb - The slider thumb
- * @slot - The default slot for labels
- * @csspart positioning-region - The region used to position the elements of the slider
- * @csspart track-container - The region containing the track elements
- * @csspart track-start - The element wrapping the track start slot
- * @csspart thumb-container - The thumb container element which is programatically positioned
- * @fires change - Fires a custom 'change' event when the slider value changes
- *
- * @public
- */
-class Slider$1 extends FormAssociatedSlider {
-    constructor() {
-        super(...arguments);
-        /**
-         * @internal
-         */
-        this.direction = Direction.ltr;
-        /**
-         * @internal
-         */
-        this.isDragging = false;
-        /**
-         * @internal
-         */
-        this.trackWidth = 0;
-        /**
-         * @internal
-         */
-        this.trackMinWidth = 0;
-        /**
-         * @internal
-         */
-        this.trackHeight = 0;
-        /**
-         * @internal
-         */
-        this.trackLeft = 0;
-        /**
-         * @internal
-         */
-        this.trackMinHeight = 0;
-        /**
-         * Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
-         *
-         * @public
-         */
-        this.valueTextFormatter = () => null;
-        /**
-         * The minimum allowed value.
-         *
-         * @defaultValue - 0
-         * @public
-         * @remarks
-         * HTML Attribute: min
-         */
-        this.min = 0; // Map to proxy element.
-        /**
-         * The maximum allowed value.
-         *
-         * @defaultValue - 10
-         * @public
-         * @remarks
-         * HTML Attribute: max
-         */
-        this.max = 10; // Map to proxy element.
-        /**
-         * Value to increment or decrement via arrow keys, mouse click or drag.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: step
-         */
-        this.step = 1; // Map to proxy element.
-        /**
-         * The orientation of the slider.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: orientation
-         */
-        this.orientation = Orientation.horizontal;
-        /**
-         * The selection mode.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: mode
-         */
-        this.mode = SliderMode.singleValue;
-        this.keypressHandler = (e) => {
-            if (this.readOnly) {
-                return;
-            }
-            if (e.key === keyHome) {
-                e.preventDefault();
-                this.value = `${this.min}`;
-            }
-            else if (e.key === keyEnd) {
-                e.preventDefault();
-                this.value = `${this.max}`;
-            }
-            else if (!e.shiftKey) {
-                switch (e.key) {
-                    case keyArrowRight:
-                    case keyArrowUp:
-                        e.preventDefault();
-                        this.increment();
-                        break;
-                    case keyArrowLeft:
-                    case keyArrowDown:
-                        e.preventDefault();
-                        this.decrement();
-                        break;
-                }
-            }
-        };
-        this.setupTrackConstraints = () => {
-            const clientRect = this.track.getBoundingClientRect();
-            this.trackWidth = this.track.clientWidth;
-            this.trackMinWidth = this.track.clientLeft;
-            this.trackHeight = clientRect.bottom;
-            this.trackMinHeight = clientRect.top;
-            this.trackLeft = this.getBoundingClientRect().left;
-            if (this.trackWidth === 0) {
-                this.trackWidth = 1;
-            }
-        };
-        this.setupListeners = (remove = false) => {
-            const eventAction = `${remove ? "remove" : "add"}EventListener`;
-            this[eventAction]("keydown", this.keypressHandler);
-            this[eventAction]("mousedown", this.handleMouseDown);
-            this.thumb[eventAction]("mousedown", this.handleThumbMouseDown, {
-                passive: true,
-            });
-            this.thumb[eventAction]("touchstart", this.handleThumbMouseDown, {
-                passive: true,
-            });
-            // removes handlers attached by mousedown handlers
-            if (remove) {
-                this.handleMouseDown(null);
-                this.handleThumbMouseDown(null);
-            }
-        };
-        /**
-         * @internal
-         */
-        this.initialValue = "";
-        /**
-         *  Handle mouse moves during a thumb drag operation
-         *  If the event handler is null it removes the events
-         */
-        this.handleThumbMouseDown = (event) => {
-            if (event) {
-                if (this.readOnly || this.disabled || event.defaultPrevented) {
-                    return;
-                }
-                event.target.focus();
-            }
-            const eventAction = `${event !== null ? "add" : "remove"}EventListener`;
-            window[eventAction]("mouseup", this.handleWindowMouseUp);
-            window[eventAction]("mousemove", this.handleMouseMove, { passive: true });
-            window[eventAction]("touchmove", this.handleMouseMove, { passive: true });
-            window[eventAction]("touchend", this.handleWindowMouseUp);
-            this.isDragging = event !== null;
-        };
-        /**
-         *  Handle mouse moves during a thumb drag operation
-         */
-        this.handleMouseMove = (e) => {
-            if (this.readOnly || this.disabled || e.defaultPrevented) {
-                return;
-            }
-            // update the value based on current position
-            const sourceEvent = window.TouchEvent && e instanceof TouchEvent
-                ? e.touches[0]
-                : e;
-            const eventValue = this.orientation === Orientation.horizontal
-                ? sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft
-                : sourceEvent.pageY - document.documentElement.scrollTop;
-            this.value = `${this.calculateNewValue(eventValue)}`;
-        };
-        this.calculateNewValue = (rawValue) => {
-            // update the value based on current position
-            const newPosition = convertPixelToPercent(rawValue, this.orientation === Orientation.horizontal
-                ? this.trackMinWidth
-                : this.trackMinHeight, this.orientation === Orientation.horizontal
-                ? this.trackWidth
-                : this.trackHeight, this.direction);
-            const newValue = (this.max - this.min) * newPosition + this.min;
-            return this.convertToConstrainedValue(newValue);
-        };
-        /**
-         * Handle a window mouse up during a drag operation
-         */
-        this.handleWindowMouseUp = (event) => {
-            this.stopDragging();
-        };
-        this.stopDragging = () => {
-            this.isDragging = false;
-            this.handleMouseDown(null);
-            this.handleThumbMouseDown(null);
-        };
-        /**
-         *
-         * @param e - MouseEvent or null. If there is no event handler it will remove the events
-         */
-        this.handleMouseDown = (e) => {
-            const eventAction = `${e !== null ? "add" : "remove"}EventListener`;
-            if (e === null || (!this.disabled && !this.readOnly)) {
-                window[eventAction]("mouseup", this.handleWindowMouseUp);
-                window.document[eventAction]("mouseleave", this.handleWindowMouseUp);
-                window[eventAction]("mousemove", this.handleMouseMove);
-                if (e) {
-                    e.preventDefault();
-                    this.setupTrackConstraints();
-                    e.target.focus();
-                    const controlValue = this.orientation === Orientation.horizontal
-                        ? e.pageX - document.documentElement.scrollLeft - this.trackLeft
-                        : e.pageY - document.documentElement.scrollTop;
-                    this.value = `${this.calculateNewValue(controlValue)}`;
-                }
-            }
-        };
-        this.convertToConstrainedValue = (value) => {
-            if (isNaN(value)) {
-                value = this.min;
-            }
-            /**
-             * The following logic intends to overcome the issue with math in JavaScript with regards to floating point numbers.
-             * This is needed as the `step` may be an integer but could also be a float. To accomplish this the step  is assumed to be a float
-             * and is converted to an integer by determining the number of decimal places it represent, multiplying it until it is an
-             * integer and then dividing it to get back to the correct number.
-             */
-            let constrainedValue = value - this.min;
-            const roundedConstrainedValue = Math.round(constrainedValue / this.step);
-            const remainderValue = constrainedValue -
-                (roundedConstrainedValue * (this.stepMultiplier * this.step)) /
-                    this.stepMultiplier;
-            constrainedValue =
-                remainderValue >= Number(this.step) / 2
-                    ? constrainedValue - remainderValue + Number(this.step)
-                    : constrainedValue - remainderValue;
-            return constrainedValue + this.min;
-        };
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
-    /**
-     * The value property, typed as a number.
-     *
-     * @public
-     */
-    get valueAsNumber() {
-        return parseFloat(super.value);
-    }
-    set valueAsNumber(next) {
-        this.value = next.toString();
-    }
-    /**
-     * @internal
-     */
-    valueChanged(previous, next) {
-        super.valueChanged(previous, next);
-        if (this.$fastController.isConnected) {
-            this.setThumbPositionForOrientation(this.direction);
-        }
-        this.$emit("change");
-    }
-    minChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.min = `${this.min}`;
-        }
-        this.validate();
-    }
-    maxChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.max = `${this.max}`;
-        }
-        this.validate();
-    }
-    stepChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.step = `${this.step}`;
-        }
-        this.updateStepMultiplier();
-        this.validate();
-    }
-    orientationChanged() {
-        if (this.$fastController.isConnected) {
-            this.setThumbPositionForOrientation(this.direction);
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.proxy.setAttribute("type", "range");
-        this.direction = getDirection(this);
-        this.updateStepMultiplier();
-        this.setupTrackConstraints();
-        this.setupListeners();
-        this.setupDefaultValue();
-        this.setThumbPositionForOrientation(this.direction);
-    }
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-        this.setupListeners(true);
-    }
-    /**
-     * Increment the value by the step
-     *
-     * @public
-     */
-    increment() {
-        const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
-            ? Number(this.value) + Number(this.step)
-            : Number(this.value) - Number(this.step);
-        const incrementedVal = this.convertToConstrainedValue(newVal);
-        const incrementedValString = incrementedVal < Number(this.max) ? `${incrementedVal}` : `${this.max}`;
-        this.value = incrementedValString;
-    }
-    /**
-     * Decrement the value by the step
-     *
-     * @public
-     */
-    decrement() {
-        const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
-            ? Number(this.value) - Number(this.step)
-            : Number(this.value) + Number(this.step);
-        const decrementedVal = this.convertToConstrainedValue(newVal);
-        const decrementedValString = decrementedVal > Number(this.min) ? `${decrementedVal}` : `${this.min}`;
-        this.value = decrementedValString;
-    }
-    /**
-     * Places the thumb based on the current value
-     *
-     * @public
-     * @param direction - writing mode
-     */
-    setThumbPositionForOrientation(direction) {
-        const newPct = convertPixelToPercent(Number(this.value), Number(this.min), Number(this.max), direction);
-        const percentage = (1 - newPct) * 100;
-        if (this.orientation === Orientation.horizontal) {
-            this.position = this.isDragging
-                ? `right: ${percentage}%; transition: none;`
-                : `right: ${percentage}%; transition: all 0.2s ease;`;
-        }
-        else {
-            this.position = this.isDragging
-                ? `bottom: ${percentage}%; transition: none;`
-                : `bottom: ${percentage}%; transition: all 0.2s ease;`;
-        }
-    }
-    /**
-     * Update the step multiplier used to ensure rounding errors from steps that
-     * are not whole numbers
-     */
-    updateStepMultiplier() {
-        const stepString = this.step + "";
-        const decimalPlacesOfStep = !!(this.step % 1)
-            ? stepString.length - stepString.indexOf(".") - 1
-            : 0;
-        this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
-    }
-    get midpoint() {
-        return `${this.convertToConstrainedValue((this.max + this.min) / 2)}`;
-    }
-    setupDefaultValue() {
-        if (typeof this.value === "string") {
-            if (this.value.length === 0) {
-                this.initialValue = this.midpoint;
-            }
-            else {
-                const value = parseFloat(this.value);
-                if (!Number.isNaN(value) && (value < this.min || value > this.max)) {
-                    this.value = this.midpoint;
-                }
-            }
-        }
-    }
-}
-__decorate([
-    attr({ attribute: "readonly", mode: "boolean" })
-], Slider$1.prototype, "readOnly", void 0);
-__decorate([
-    observable
-], Slider$1.prototype, "direction", void 0);
-__decorate([
-    observable
-], Slider$1.prototype, "isDragging", void 0);
-__decorate([
-    observable
-], Slider$1.prototype, "position", void 0);
-__decorate([
-    observable
-], Slider$1.prototype, "trackWidth", void 0);
-__decorate([
-    observable
-], Slider$1.prototype, "trackMinWidth", void 0);
-__decorate([
-    observable
-], Slider$1.prototype, "trackHeight", void 0);
-__decorate([
-    observable
-], Slider$1.prototype, "trackLeft", void 0);
-__decorate([
-    observable
-], Slider$1.prototype, "trackMinHeight", void 0);
-__decorate([
-    observable
-], Slider$1.prototype, "valueTextFormatter", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], Slider$1.prototype, "min", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], Slider$1.prototype, "max", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], Slider$1.prototype, "step", void 0);
-__decorate([
-    attr
-], Slider$1.prototype, "orientation", void 0);
-__decorate([
-    attr
-], Slider$1.prototype, "mode", void 0);
-
-/**
- * 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);
-}
-
-var css_248z = ":host {\n  display: inline-block;\n  width: 100%;\n}\n\n:host([orientation=vertical]) {\n  height: 100%;\n  min-height: calc(var(--_thumb-interaction-indicator-size) * 5);\n}\n\n.control {\n  --_thumb-size: 12px;\n  --_thumb-interaction-indicator-size: 36px;\n  height: var(--_thumb-interaction-indicator-size);\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control .positioning-region {\n  position: relative;\n}\n.control .track {\n  position: absolute;\n  background: var(--_track-background-color);\n  border-radius: 4px;\n}\n.control .track .track-start {\n  position: absolute;\n  left: 0;\n  height: 100%;\n  background: var(--_track-start-background-color);\n  border-radius: 4px;\n}\n.control .thumb-container {\n  position: absolute;\n  width: var(--_thumb-interaction-indicator-size);\n  height: var(--_thumb-interaction-indicator-size);\n  cursor: inherit;\n  touch-action: none;\n}\n.control .thumb-container::before {\n  position: absolute;\n  display: block;\n  width: var(--_thumb-interaction-indicator-size);\n  height: var(--_thumb-interaction-indicator-size);\n  background-color: var(--_track-start-background-color);\n  border-radius: 50%;\n  content: \"\";\n  opacity: var(--_thumb-interaction-indicator-alpha, 0);\n  transition: opacity 0.2s ease-out 0s;\n}\n.control .thumb-container::after {\n  position: absolute;\n  display: block;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  background-color: var(--_track-start-background-color);\n  border-radius: 50%;\n  content: \"\";\n  inset: calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);\n}\n.control[aria-orientation=horizontal] {\n  width: calc(100% - var(--_thumb-size));\n  min-width: var(--_thumb-size);\n  margin-left: calc(var(--_thumb-size) / 2);\n}\n.control[aria-orientation=horizontal] .track {\n  top: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);\n  right: 0;\n  left: 0;\n  height: 2px;\n}\n.control[aria-orientation=horizontal] .track .mark {\n  width: 100%;\n  height: 4px;\n}\n.control[aria-orientation=horizontal] .thumb-container {\n  transform: translateX(calc(var(--_thumb-interaction-indicator-size) / 2));\n}\n.control[aria-orientation=vertical] {\n  height: calc(100% - var(--_thumb-interaction-indicator-size));\n  min-height: var(--_thumb-interaction-indicator-size);\n  margin-top: calc(var(--_thumb-interaction-indicator-size) / 2);\n}\n.control[aria-orientation=vertical] .positioning-region {\n  height: 100%;\n}\n.control[aria-orientation=vertical] .track {\n  left: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);\n  width: 2px;\n  height: 100%;\n}\n.control[aria-orientation=vertical] .track .mark {\n  width: 4px;\n  height: 100%;\n}\n.control[aria-orientation=vertical] .track-start {\n  top: 0;\n  width: 100%;\n  height: auto;\n}\n.control[aria-orientation=vertical] .thumb-container {\n  transform: translateY(calc(var(--_thumb-interaction-indicator-size) / 2));\n}\n.control.disabled {\n  --_track-background-color: var(--vvd-color-neutral-100);\n  --_track-start-background-color: var(--vvd-color-neutral-500);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control:not(.disabled) {\n  --_track-background-color: var(--vvd-color-neutral-300);\n  --_track-start-background-color: var(--vvd-color-canvas-text);\n}\n.control:not(.disabled) .thumb-container:hover {\n  --_thumb-interaction-indicator-alpha: 0.12;\n}\n.control:not(.disabled) .thumb-container:active {\n  --_thumb-interaction-indicator-alpha: 0.25;\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 50%;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
-
-var global = global$1;
-var fails = fails$1;
-var uncurryThis = functionUncurryThis;
-var toString = toString$1;
-var trim = stringTrim.trim;
-var whitespaces = whitespaces$1;
-
-var charAt = uncurryThis(''.charAt);
-var $parseFloat$1 = global.parseFloat;
-var Symbol = global.Symbol;
-var ITERATOR = Symbol && Symbol.iterator;
-var FORCED = 1 / $parseFloat$1(whitespaces + '-0') !== -Infinity
-  // MS Edge 18- broken with boxed symbols
-  || (ITERATOR && !fails(function () { $parseFloat$1(Object(ITERATOR)); }));
-
-// `parseFloat` method
-// https://tc39.es/ecma262/#sec-parsefloat-string
-var numberParseFloat = FORCED ? function parseFloat(string) {
-  var trimmedString = trim(toString(string));
-  var result = $parseFloat$1(trimmedString);
-  return result === 0 && charAt(trimmedString, 0) == '-' ? -0 : result;
-} : $parseFloat$1;
-
-var $ = _export;
-var $parseFloat = numberParseFloat;
-
-// `parseFloat` method
-// https://tc39.es/ecma262/#sec-parsefloat-string
-$({ global: true, forced: parseFloat != $parseFloat }, {
-  parseFloat: $parseFloat
-});
-
-class Slider extends Slider$1 {
+var _SideDrawer_instances, _SideDrawer_close, _SideDrawer_open;
+class SideDrawer extends FoundationElement {
   constructor() {
     super(...arguments);
-    this.markers = false;
+    _SideDrawer_instances.add(this);
+    this.alternate = false;
+    this.modal = false;
+    this.open = false;
+    this.trailing = false;
   }
-  valueChanged(previous, next) {
-    if (this.$fastController.isConnected) {
-      const nextAsNumber = parseFloat(next);
-      const value = limit(this.min, this.max, this['convertToConstrainedValue'](nextAsNumber)).toString();
-      if (value !== next) {
-        this.value = value;
-        return;
-      }
-      super.valueChanged(previous, value);
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    switch (name) {
+      case 'open':
+        {
+          this.open ? __classPrivateFieldGet(this, _SideDrawer_instances, "m", _SideDrawer_open).call(this) : __classPrivateFieldGet(this, _SideDrawer_instances, "m", _SideDrawer_close).call(this);
+        }
     }
   }
 }
+_SideDrawer_instances = new WeakSet(), _SideDrawer_close = function _SideDrawer_close() {
+  this.$emit('close', undefined, {
+    bubbles: false
+  });
+}, _SideDrawer_open = function _SideDrawer_open() {
+  this.$emit('open', undefined, {
+    bubbles: 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)], Slider.prototype, "markers", void 0);
+}), __metadata("design:type", Object)], SideDrawer.prototype, "open", void 0);
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n.control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\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.scrim {\n  background-color: var(--vvd-color-canvas-text, currentColor);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
 
 let _ = t => t,
   _t,
   _t2;
 const getClasses = ({
-  disabled
-}) => classNames('control', ['disabled', Boolean(disabled)]);
-const getMarkersTemplate = (isHorizontal, numMarkers) => {
-  const placeholder = isHorizontal ? ['right', 'center', '', '100% repeat-x'] : ['bottom', 'top', '100%', 'repeat-y'];
-  return html(_t || (_t = _`
-	<div class="mark" style="
-	background: linear-gradient(to ${0}, currentcolor 3px, transparent 0px)
-	0px ${0} / ${0} calc((100% - 3px) / ${0}) ${0}
-	"></div>`), placeholder[0], placeholder[1], placeholder[2], numMarkers, placeholder[3]);
-};
-const SliderTemplate = context => {
-  const focusTemplate = focusTemplateFactory(context);
-  return html(_t2 || (_t2 = _`
-	<div
-		role="slider"
-		tabindex="${0}"
-		aria-valuetext="${0}"
-		aria-valuenow="${0}"
-		aria-valuemin="${0}"
-		aria-valuemax="${0}"
-		aria-disabled="${0}"
-		aria-orientation="${0}"
-		class="${0} ${0}"
-	>
-		<div class="positioning-region">
-			<div ${0} class="track">
-				<div class="track-start" style="${0}"></div>
-				${0}
-			</div>
-			<div ${0} class="thumb-container" style="${0}">
-				${0}
-			</div>
-		</div>
-	</div>`), x => x.disabled ? null : 0, x => x.valueTextFormatter(x.value), x => x.value, x => x.min, x => x.max, x => x.disabled ? true : void 0, x => x.orientation, getClasses, x => x.orientation, ref('track'), x => x.position, x => x.markers ? getMarkersTemplate(x.orientation === Orientation$1.horizontal, Math.floor((x.max - x.min) / x.step)) : void 0, ref('thumb'), x => x.position, () => focusTemplate);
+  modal,
+  open,
+  trailing
+}) => classNames('control', ['modal', modal], ['open', open], ['trailing', trailing]);
+const getScrimClasses = ({
+  open
+}) => classNames('scrim', ['open', open]);
+const sideDrawerTemplate = () => html(_t || (_t = _`
+	<aside class="${0}" part="base ${0}"
+	 @keydown="${0}">
+    <slot></slot>
+	</aside>
+
+	<div class="side-drawer-app-content" ?inert="${0}">
+		<slot name="app-content"></slot>
+	</div>
+
+	${0}
+`), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', (x, c) => handleKeydown(x, c.event), x => x.open && x.modal, when(x => x.modal, html(_t2 || (_t2 = _`<div class="${0}" @click="${0}"></div>`), getScrimClasses, x => x.open = false)));
+const handleKeydown = (x, {
+  key
+}) => {
+  if (key === 'Escape') {
+    x.open = false;
+  } else {
+    return true;
+  }
 };
 
-const sliderDefinition = Slider.compose({
-  baseName: 'slider',
-  template: SliderTemplate,
+const sideDrawerDefinition = SideDrawer.compose({
+  baseName: 'side-drawer',
+  template: sideDrawerTemplate,
   styles: css_248z
 });
-const sliderRegistries = [sliderDefinition(), ...focusRegistries];
-const registerSlider = registerFactory(sliderRegistries);
+const sideDrawerRegistries = [sideDrawerDefinition()];
+const registerSideDrawer = registerFactory(sideDrawerRegistries);
 
-export { sliderRegistries as a, registerSlider as r, sliderDefinition as s };
+export { sideDrawerRegistries as a, registerSideDrawer as r, sideDrawerDefinition as s };