@vonage/vivid 4.13.0 → 4.14.1

package/shared/definition40.cjs

@@ -1,13 +1,59 @@
 'use strict';
 
-const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
+const formAssociated = require('./form-associated.cjs');
 const keyCodes = require('./key-codes.cjs');
-const aria = require('./aria.cjs');
-const radio = require('./radio.cjs');
-const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
 
-const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}";
+
+class _Radio extends vividElement.VividElement {
+}
+class FormAssociatedRadio extends formAssociated.CheckableFormAssociated(_Radio) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+    this.#validateValueMissingWithSiblings = () => {
+      const siblings = this.#radioSiblings;
+      if (siblings && siblings.length > 1) {
+        const isSiblingChecked = siblings.some((x) => x.checked);
+        if (isSiblingChecked) {
+          this.setValidity({ valueMissing: false });
+        }
+      }
+    };
+    this.#syncSiblingsRequiredValidationStatus = () => {
+      if (this.elementInternals && !this.validity.valueMissing) {
+        const siblings = this.#radioSiblings;
+        if (siblings && siblings.length > 1) {
+          siblings.forEach((x) => {
+            x.elementInternals.setValidity({ valueMissing: false });
+          });
+        }
+      }
+    };
+    this.validate = (anchor) => {
+      super.validate(anchor);
+      if (this.validity.valueMissing) {
+        this.#validateValueMissingWithSiblings();
+      } else {
+        this.#syncSiblingsRequiredValidationStatus();
+      }
+    };
+  }
+  get #radioSiblings() {
+    const siblings = this.parentElement?.querySelectorAll(
+      `${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`
+    );
+    if (siblings) {
+      return Array.from(siblings);
+    }
+    return [];
+  }
+  #validateValueMissingWithSiblings;
+  #syncSiblingsRequiredValidationStatus;
+}
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,272 +64,157 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class RadioGroup extends index.FoundationElement {
+class Radio extends FormAssociatedRadio {
   constructor() {
-    super(...arguments);
-    this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
-    aria.Orientation.horizontal;
-    this.slottedRadioButtons = [];
-    this.radioChangeHandler = (e) => {
-      const changedRadio = e.target;
-      if (changedRadio.checked) {
-        this.slottedRadioButtons.forEach((radio) => {
-          if (radio !== changedRadio) {
-            radio.checked = false;
-          }
-        });
-        this.value = changedRadio.value;
-        this.#setTabRovingTarget(changedRadio);
-      }
-      e.stopPropagation();
-    };
-    this.moveToRadioByIndex = (group, index) => {
-      const radio = group[index];
-      if (!this.isInsideToolbar && !radio.readOnly) {
-        radio.checked = true;
-      }
-      radio.focus();
-    };
-    this.moveRightOffGroup = () => {
-      this.nextElementSibling?.focus();
-    };
-    this.moveLeftOffGroup = () => {
-      this.previousElementSibling?.focus();
-    };
-    this.moveRight = (e) => {
-      const radio = e.target;
-      const group = this.#focusableRadioButtons;
-      let index = 0;
-      index = group.indexOf(radio) + 1;
-      if (index === group.length && this.isInsideToolbar && e.key === keyCodes.keyArrowRight) {
-        this.moveRightOffGroup();
-        return;
-      }
-      if (index === group.length) {
-        index = 0;
-      }
-      this.moveToRadioByIndex(group, index);
-    };
-    this.moveLeft = (e) => {
-      const radio = e.target;
-      const group = this.#focusableRadioButtons;
-      let index = group.indexOf(radio) - 1;
-      if (this.isInsideToolbar && e.key === keyCodes.keyArrowLeft && index < 0) {
-        this.moveLeftOffGroup();
-        return;
-      }
-      index = index < 0 ? group.length - 1 : index;
-      this.moveToRadioByIndex(group, index);
-    };
+    super();
+    this.ariaLabel = null;
     /**
-     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
-     * navigation is different when there is an ancestor with role='toolbar'
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="radio"]
      *
      * @internal
      */
-    this.keydownHandler = (e) => {
+    this.initialValue = "on";
+    this.defaultSlottedNodes = [];
+    /**
+     * @internal
+     */
+    this.keypressHandler = (e) => {
       switch (e.key) {
-        case keyCodes.keyEnter:
-          this.checkFocusedRadio(e.target);
-          break;
-        case keyCodes.keyArrowRight:
-        case keyCodes.keyArrowDown:
-          this.moveRight(e);
-          break;
-        case keyCodes.keyArrowLeft:
-        case keyCodes.keyArrowUp:
-          this.moveLeft(e);
-          break;
-        default:
-          return true;
+        case keyCodes.keySpace:
+          if (!this.checked && !this.readOnly) {
+            this.checked = true;
+          }
+          return;
       }
+      return true;
     };
+    this.proxy.setAttribute("type", "radio");
+    this.proxy.setAttribute("name", this.name);
   }
+  // Map to proxy element
   /**
    * @internal
    */
   readOnlyChanged() {
-    this.slottedRadioButtons.forEach((radio) => {
-      if (this.readOnly) {
-        radio.readOnly = true;
-      } else {
-        radio.readOnly = false;
-      }
-    });
-  }
-  /**
-   * @internal
-   */
-  disabledChanged() {
-    this.slottedRadioButtons.forEach((radio) => {
-      if (this.disabled) {
-        radio.disabled = true;
-      } else {
-        radio.disabled = false;
-      }
-    });
-  }
-  nameChanged() {
-    this.slottedRadioButtons.forEach((radio) => {
-      radio.setAttribute("name", this.name);
-    });
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
   }
   /**
    * @internal
    */
-  valueChanged() {
-    this.slottedRadioButtons.forEach((radio) => {
-      if (radio.value === this.value) {
-        radio.checked = true;
+  defaultCheckedChanged() {
+    if (this.$fastController.isConnected && !this.dirtyChecked) {
+      if (!this.isInsideRadioGroup()) {
+        this.checked = this.defaultChecked;
+        this.dirtyChecked = false;
       }
-    });
-    this.$emit("change");
-  }
-  get #focusableRadioButtons() {
-    return this.slottedRadioButtons.filter((radio) => !radio.disabled);
+    }
   }
   /**
    * @internal
    */
-  slottedRadioButtonsChanged() {
-    if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
-      this.setupRadioButtons();
+  nameChanged(previous, next) {
+    if (super.nameChanged) {
+      super.nameChanged(previous, next);
     }
-  }
-  get isInsideToolbar() {
-    return !!this.closest('[role="toolbar"]');
+    next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
+    vividElement.DOM.queueUpdate(this.validate);
   }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    this.setupRadioButtons();
-  }
-  disconnectedCallback() {
-    this.slottedRadioButtons.forEach((radio) => {
-      radio.removeEventListener(
-        "change",
-        this.radioChangeHandler
-      );
-    });
-  }
-  setupRadioButtons() {
-    let foundMatchingVal = false;
-    for (const radio of this.slottedRadioButtons) {
-      if (this.name !== void 0) {
-        radio.setAttribute("name", this.name);
-      }
-      if (this.disabled) {
-        radio.disabled = true;
-      }
-      if (this.readOnly) {
-        radio.readOnly = true;
-      }
-      if (this.value && this.value === radio.value) {
-        radio.checked = true;
-        this.#setTabRovingTarget(radio);
-        foundMatchingVal = true;
-      } else {
-        radio.checked = false;
+    vividElement.DOM.queueUpdate(this.validate);
+    if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
+      if (!this.disabled) {
+        this.setAttribute("tabindex", "0");
       }
-      radio.addEventListener(
-        "change",
-        this.radioChangeHandler
-      );
     }
-    if (this.value === void 0 && this.slottedRadioButtons.length > 0) {
-      const checkedRadios = this.slottedRadioButtons.filter(
-        (radio) => radio.hasAttribute("checked")
-      );
-      if (checkedRadios.length > 0 && !foundMatchingVal) {
-        const lastCheckedRadio = checkedRadios[checkedRadios.length - 1];
-        lastCheckedRadio.checked = true;
-        this.#setTabRovingTarget(lastCheckedRadio);
-      } else {
-        this.#setTabRovingTarget(this.slottedRadioButtons[0]);
+    if (this.checkedAttribute) {
+      if (!this.dirtyChecked) {
+        if (!this.isInsideRadioGroup()) {
+          this.checked = this.defaultChecked;
+          this.dirtyChecked = false;
+        }
       }
     }
   }
+  isInsideRadioGroup() {
+    const parent = this.closest(
+      "[role=radiogroup]"
+    );
+    return parent !== null;
+  }
   /**
    * @internal
    */
-  focusInHandler(e) {
-    this.#setTabRovingTarget(e.target);
-  }
-  #setTabRovingTarget(radio) {
-    radio.setAttribute("tabindex", "0");
-    for (const slottedRadio of this.slottedRadioButtons) {
-      if (slottedRadio !== radio) {
-        slottedRadio.setAttribute("tabindex", "-1");
-      }
-    }
-  }
-  checkFocusedRadio(target) {
-    if (!target.readOnly) {
-      target.checked = true;
+  clickHandler(_) {
+    if (!this.disabled && !this.readOnly && !this.checked) {
+      this.checked = true;
     }
   }
 }
 __decorateClass([
-  index.attr
-], RadioGroup.prototype, "label");
-__decorateClass([
-  index.attr({ attribute: "readonly", mode: "boolean" })
-], RadioGroup.prototype, "readOnly");
+  vividElement.attr({ attribute: "aria-label" })
+], Radio.prototype, "ariaLabel");
 __decorateClass([
-  index.attr({ attribute: "disabled", mode: "boolean" })
-], RadioGroup.prototype, "disabled");
+  vividElement.attr
+], Radio.prototype, "label");
 __decorateClass([
-  index.attr
-], RadioGroup.prototype, "name");
+  vividElement.attr
+], Radio.prototype, "connotation");
 __decorateClass([
-  index.attr
-], RadioGroup.prototype, "value");
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+], Radio.prototype, "readOnly");
 __decorateClass([
-  index.attr
-], RadioGroup.prototype, "orientation");
+  vividElement.attr
+], Radio.prototype, "name");
 __decorateClass([
-  index.observable
-], RadioGroup.prototype, "slottedRadioButtons");
+  vividElement.observable
+], Radio.prototype, "defaultSlottedNodes");
 
-const RadioGroupTemplate = (context) => {
-  return index.html`
-		<template
-			role="radiogroup"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
-			aria-orientation="${(x) => x.orientation}"
-			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@focusin="${(x, c) => x.focusInHandler(c.event)}"
-		>
-			${when.when(
-    (x) => x.label,
-    index.html`<label>${(x) => x.label}</label>`
-  )}
+const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  ["checked", Boolean(checked)],
+  ["readonly", Boolean(readOnly)],
+  ["disabled", Boolean(disabled)]
+);
+const RadioTemplate = vividElement.html`<template
+	role="${(x) => x.ariaLabel ? "presentation" : null}"
+>
+	<div
+		class="${getClasses}"
+		role="radio"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-checked="${(x) => x.checked}"
+		aria-required="${(x) => x.required}"
+		aria-disabled="${(x) => x.disabled}"
+		@keypress="${(x, c) => x.keypressHandler(c.event)}"
+		@click="${(x, c) => x.clickHandler(c.event)}"
+	>
+		<div class="control"></div>
+		${when.when(
+  (x) => x.label,
+  vividElement.html`<label class="label">${(x) => x.label}</label>`
+)}
+	</div>
+</template>`;
 
-			<div
-				class="positioning-region ${(x) => x.orientation === aria.Orientation.horizontal ? "horizontal" : "vertical"}"
-			>
-				<slot
-					${slotted.slotted({
-    property: "slottedRadioButtons",
-    filter: slotted.elements(context.tagFor(radio.Radio))
-  })}
-				></slot>
-			</div>
-		</template>
-	`;
-};
-
-const radioGroupDefinition = RadioGroup.compose({
-  baseName: "radio-group",
-  template: RadioGroupTemplate,
-  styles
-});
-const radioGroupRegistries = [radioGroupDefinition()];
-const registerRadioGroup = index.registerFactory(radioGroupRegistries);
+const radioDefinition = vividElement.defineVividComponent(
+  "radio",
+  Radio,
+  RadioTemplate,
+  [],
+  {
+    styles
+  }
+);
+const registerRadio = vividElement.createRegisterFunction(radioDefinition);
 
-exports.radioGroupDefinition = radioGroupDefinition;
-exports.radioGroupRegistries = radioGroupRegistries;
-exports.registerRadioGroup = registerRadioGroup;
+exports.Radio = Radio;
+exports.radioDefinition = radioDefinition;
+exports.registerRadio = registerRadio;