@vonage/vivid 3.14.0 → 3.16.0

package/shared/definition42.js

@@ -1,147 +1,90 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { i as iconRegistries } from './definition3.js';
-import { f as focusRegistries } from './definition4.js';
-import { C as CheckableFormAssociated } from './form-associated.js';
-import { e as keySpace, d as keyEnter } from './key-codes.js';
-import './affix.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import './form-elements.js';
+import { F as FoundationElement, U 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';
 
-class _Switch extends FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Switch:class)} component.
- *
- * @internal
- */
-class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
-}
-
-/**
- * A Switch Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
- *
- * @slot - The deafult slot for the label
- * @slot checked-message - The message when in a checked state
- * @slot unchecked-message - The message when in an unchecked state
- * @csspart label - The label
- * @csspart switch - The element representing the switch, which wraps the indicator
- * @csspart status-message - The wrapper for the status messages
- * @csspart checked-message - The checked message
- * @csspart unchecked-message - The unchecked message
- * @fires change - Emits a custom change event when the checked state changes
- *
- * @public
- */
-class Switch$1 extends FormAssociatedSwitch {
-    constructor() {
-        super();
-        /**
-         * The element's value to be included in form submission when checked.
-         * Default to "on" to reach parity with input[type="checkbox"]
-         *
-         * @internal
-         */
-        this.initialValue = "on";
-        /**
-         * @internal
-         */
-        this.keypressHandler = (e) => {
-            if (this.readOnly) {
-                return;
-            }
-            switch (e.key) {
-                case keyEnter:
-                case keySpace:
-                    this.checked = !this.checked;
-                    break;
-            }
-        };
-        /**
-         * @internal
-         */
-        this.clickHandler = (e) => {
-            if (!this.disabled && !this.readOnly) {
-                this.checked = !this.checked;
-            }
-        };
-        this.proxy.setAttribute("type", "checkbox");
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
+var _SideDrawer_instances, _SideDrawer_close, _SideDrawer_open;
+class SideDrawer extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    _SideDrawer_instances.add(this);
+    this.alternate = false;
+    this.modal = false;
+    this.open = false;
+    this.trailing = false;
+  }
+  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);
         }
-        this.readOnly
-            ? this.classList.add("readonly")
-            : this.classList.remove("readonly");
-    }
-    /**
-     * @internal
-     */
-    checkedChanged(prev, next) {
-        super.checkedChanged(prev, next);
-        /**
-         * @deprecated - this behavior already exists in the template and should not exist in the class.
-         */
-        this.checked ? this.classList.add("checked") : this.classList.remove("checked");
     }
+  }
 }
-__decorate([
-    attr({ attribute: "readonly", mode: "boolean" })
-], Switch$1.prototype, "readOnly", void 0);
-__decorate([
-    observable
-], Switch$1.prototype, "defaultSlottedNodes", void 0);
-
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 30 May 2023 12:49:14 GMT\n */\n.control {\n  display: inline-flex;\n  gap: 8px;\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-switch-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-switch-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-switch-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-switch-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-switch-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-switch-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-switch-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-switch-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-switch-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-switch-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-switch-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-switch-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-switch-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-switch-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-switch-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));\n}\n.control:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  /* @cssprop [--vvd-switch-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-switch-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-switch-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-switch-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-switch-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));\n}\n.control {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-800);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.switch {\n  --_switch-inline-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 1.8);\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  border-radius: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / .5);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  inline-size: var(--_switch-inline-size);\n  transition: all 0.2s ease-in-out 0s;\n}\n\n.checked-indicator {\n  --_switch-checked-indicator-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / 1.6667);\n  --_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);\n  block-size: var(--_switch-checked-indicator-size);\n  border-radius: inherit;\n  inline-size: var(--_switch-checked-indicator-size);\n  margin-inline-start: auto;\n  transition: all 0.2s ease-in-out 0s;\n}\n.control.appearance-filled .checked-indicator {\n  background-color: var(--vvd-color-neutral-100);\n}\n.control:not(.appearance-filled) .checked-indicator {\n  background-color: var(--_appearance-color-outline);\n}\n.control:not(.checked) .checked-indicator {\n  transform: translateX(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)));\n}\n.control.checked .checked-indicator {\n  transform: translateX(calc(-1 * var(--_switch-gutter)));\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -4px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 14px;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+_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)], SideDrawer.prototype, "open", void 0);
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
 
-class Switch extends Switch$1 {}
-__decorate([attr, __metadata("design:type", String)], Switch.prototype, "label", void 0);
-__decorate([attr, __metadata("design:type", String)], Switch.prototype, "connotation", void 0);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 07 Jun 2023 09:55:04 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 _2 = t => t,
+let _ = t => t,
   _t,
   _t2;
-const getClasses = _ => classNames('control', ['appearance-filled', _.checked && !_.disabled && !_.readOnly], ['checked', _.checked], ['disabled', _.disabled], ['readonly', _.readOnly], [`connotation-${_.connotation}`, Boolean(_.checked) && Boolean(_.connotation)]);
-const SwitchTemplate = context => {
-  const focusTemplate = focusTemplateFactory(context);
-  return html(_t || (_t = _2`
-		<div
-				class="${0}"
-				role="switch"
-				aria-checked="${0}"
-				aria-disabled="${0}"
-				aria-readonly="${0}"
-				tabindex="${0}"
-				@keypress="${0}"
-				@click="${0}"
-		>
-			<div class="switch">
-				<span class="checked-indicator"></span>
-				${0}
-			</div>
-			${0}
-		</div>
-		`), getClasses, x => x.checked, x => x.disabled, x => x.readOnly, x => x.disabled ? null : 0, (x, c) => x.keypressHandler(c.event), (x, c) => x.clickHandler(c.event), () => focusTemplate, when(x => x.label, html(_t2 || (_t2 = _2`<div class="label">
-				${0}
-		</div>`), x => x.label)));
-};
+const getClasses = ({
+  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>
 
-const switchDefinition = Switch.compose({
-  baseName: 'switch',
-  template: SwitchTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
+	<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 sideDrawerDefinition = SideDrawer.compose({
+  baseName: 'side-drawer',
+  template: sideDrawerTemplate,
+  styles: css_248z
 });
-const switchRegistries = [switchDefinition(), ...iconRegistries, ...focusRegistries];
-const registerSwitch = registerFactory(switchRegistries);
+const sideDrawerRegistries = [sideDrawerDefinition()];
+const registerSideDrawer = registerFactory(sideDrawerRegistries);
 
-export { switchRegistries as a, registerSwitch as r, switchDefinition as s };
+export { sideDrawerRegistries as a, registerSideDrawer as r, sideDrawerDefinition as s };