@vonage/vivid 4.24.0 → 4.25.0

package/shared/definition41.cjs

@@ -1,59 +1,15 @@
 'use strict';
 
 const vividElement = require('./vivid-element.cjs');
-const formAssociated = require('./form-associated.cjs');
+const definition = require('./definition42.cjs');
+const mixins = require('./mixins.cjs');
 const keyCodes = require('./key-codes.cjs');
-const classNames = require('./class-names.cjs');
+const aria = require('./aria.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
+const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
 
-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(--vvd-color-neutral-500)}.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(--vvd-color-neutral-700)}.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-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
-
-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;
-}
+const styles = ".base{display:flex;flex-direction:column;gap:8px;--_low-ink-color: var(--vvd-color-neutral-600)}.positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}fieldset{display:block;padding:0;border:none;margin:0}legend{padding:0;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -64,153 +20,340 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Radio extends FormAssociatedRadio {
+class RadioGroup extends mixins.WithFeedback(vividElement.VividElement) {
   constructor() {
-    super();
-    this.ariaLabel = null;
+    super(...arguments);
+    this.errorValidationMessage = "";
+    this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    aria.Orientation.horizontal;
+    this.slottedRadioButtons = [];
+    this.radioErrorHandler = (e) => {
+      const radio = e.target;
+      this.errorValidationMessage = radio.errorValidationMessage || "";
+    };
+    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);
+    };
     /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="radio"]
+     * 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'
      *
      * @internal
      */
-    this.initialValue = "on";
-    this.defaultSlottedNodes = [];
-    /**
-     * @internal
-     */
-    this.keypressHandler = (e) => {
+    this.keydownHandler = (e) => {
       switch (e.key) {
-        case keyCodes.keySpace:
-          if (!this.checked && !this.readOnly) {
-            this.checked = true;
-          }
-          return;
+        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;
       }
-      return true;
     };
-    this.proxy.setAttribute("type", "radio");
-    this.proxy.setAttribute("name", this.name);
   }
-  // Map to proxy element
+  /**
+   * @internal
+   */
+  requiredChanged() {
+    this.slottedRadioButtons?.forEach((radio) => {
+      if (this.required) {
+        radio.required = true;
+      } else {
+        radio.required = false;
+      }
+    });
+  }
   /**
    * @internal
    */
   readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-    }
+    this.slottedRadioButtons?.forEach((radio) => {
+      if (this.readOnly) {
+        radio.readOnly = true;
+      } else {
+        radio.readOnly = false;
+      }
+    });
   }
   /**
    * @internal
    */
-  defaultCheckedChanged() {
-    if (this.$fastController.isConnected && !this.dirtyChecked) {
-      if (!this.isInsideRadioGroup()) {
-        this.checked = this.defaultChecked;
-        this.dirtyChecked = false;
+  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);
+    });
+  }
+  /**
+   * @internal
+   */
+  valueChanged() {
+    this.slottedRadioButtons?.forEach((radio) => {
+      if (radio.value === this.value) {
+        radio.checked = true;
+      }
+    });
+    this.$emit("change");
+  }
+  /**
+   * @internal
+   */
+  handleSlotChange() {
+    if (this.errorText) {
+      this.slottedRadioButtons?.forEach((radio) => {
+        radio.errorText = this.errorText;
+      });
     }
   }
   /**
    * @internal
    */
-  nameChanged(previous, next) {
-    if (super.nameChanged) {
-      super.nameChanged(previous, next);
+  errorTextChanged(_, newErrorText) {
+    if (newErrorText) {
+      this.errorValidationMessage = newErrorText;
+    } else {
+      this.errorValidationMessage = "";
     }
-    next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
-    vividElement.DOM.queueUpdate(this.validate);
+  }
+  get #focusableRadioButtons() {
+    return this.slottedRadioButtons?.filter((radio) => !radio.disabled);
+  }
+  /**
+   * @internal
+   */
+  slottedRadioButtonsChanged() {
+    if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
+      this.setupRadioButtons();
+    }
+  }
+  get isInsideToolbar() {
+    return !!this.closest('[role="toolbar"]');
   }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    vividElement.DOM.queueUpdate(this.validate);
-    if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
-      if (!this.disabled) {
-        this.setAttribute("tabindex", "0");
+    this.setupRadioButtons();
+  }
+  disconnectedCallback() {
+    this.slottedRadioButtons?.forEach((radio) => {
+      radio.removeEventListener(
+        "change",
+        this.radioChangeHandler
+      );
+      radio.removeEventListener(
+        "invalid",
+        this.radioErrorHandler
+      );
+    });
+  }
+  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.required) {
+        radio.required = true;
+      }
+      if (this.value && this.value === radio.value) {
+        radio.checked = true;
+        this.#setTabRovingTarget(radio);
+        foundMatchingVal = true;
+      } else {
+        radio.checked = false;
+      }
+      radio.addEventListener(
+        "change",
+        this.radioChangeHandler
+      );
+      radio.addEventListener(
+        "invalid",
+        this.radioErrorHandler
+      );
     }
-    if (this.checkedAttribute) {
-      if (!this.dirtyChecked) {
-        if (!this.isInsideRadioGroup()) {
-          this.checked = this.defaultChecked;
-          this.dirtyChecked = false;
-        }
+    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]);
       }
     }
   }
-  isInsideRadioGroup() {
-    const parent = this.closest(
-      "[role=radiogroup]"
-    );
-    return parent !== null;
-  }
   /**
    * @internal
    */
-  clickHandler(_) {
-    if (!this.disabled && !this.readOnly && !this.checked) {
-      this.checked = true;
+  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;
     }
   }
 }
 __decorateClass([
-  vividElement.attr({ attribute: "aria-label" })
-], Radio.prototype, "ariaLabel");
+  vividElement.attr
+], RadioGroup.prototype, "label");
+__decorateClass([
+  vividElement.attr({ attribute: "required", mode: "boolean" })
+], RadioGroup.prototype, "required");
+__decorateClass([
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+], RadioGroup.prototype, "readOnly");
+__decorateClass([
+  vividElement.attr({ attribute: "disabled", mode: "boolean" })
+], RadioGroup.prototype, "disabled");
 __decorateClass([
   vividElement.attr
-], Radio.prototype, "label");
+], RadioGroup.prototype, "name");
 __decorateClass([
   vividElement.attr
-], Radio.prototype, "connotation");
+], RadioGroup.prototype, "value");
 __decorateClass([
-  vividElement.attr({ attribute: "readonly", mode: "boolean" })
-], Radio.prototype, "readOnly");
+  vividElement.observable
+], RadioGroup.prototype, "errorValidationMessage");
+__decorateClass([
+  vividElement.attr({ attribute: "error-text" })
+], RadioGroup.prototype, "errorText");
 __decorateClass([
   vividElement.attr
-], Radio.prototype, "name");
+], RadioGroup.prototype, "orientation");
 __decorateClass([
   vividElement.observable
-], Radio.prototype, "defaultSlottedNodes");
+], RadioGroup.prototype, "slottedRadioButtons");
 
-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
-	aria-checked="${(x) => x.checked}"
-	aria-disabled="${(x) => x.disabled}"
-	aria-required="${(x) => x.required}"
-	@keypress="${(x, c) => x.keypressHandler(c.event)}"
-	@click="${(x, c) => x.clickHandler(c.event)}"
-	role="radio"
->
-	<div class="${getClasses}">
-		<div class="control"></div>
-		${when.when(
-  (x) => x.label,
-  vividElement.html`<label class="label">${(x) => x.label}</label>`
-)}
-	</div>
-</template>`;
+const RadioGroupTemplate = (context) => {
+  return vividElement.html`
+		<template
+			@keydown="${(x, c) => x.keydownHandler(c.event)}"
+			@focusin="${(x, c) => x.focusInHandler(c.event)}"
+		>
+			<div class="base">
+				<fieldset
+					${delegatesAria.delegateAria({
+    role: "radiogroup",
+    ariaDisabled: (x) => x.disabled,
+    ariaReadOnly: (x) => x.readOnly,
+    ariaOrientation: (x) => x.orientation
+  })}
+					aria-labelledby="label"
+					aria-describedby="${(x) => x._feedbackDescribedBy}"
+					aria-invalid="${(x) => x.errorText ? "true" : "false"}"
+					class="control positioning-region ${(x) => x.orientation === aria.Orientation.horizontal ? "horizontal" : "vertical"}"
+				>
+					${when.when(
+    (x) => x.label,
+    vividElement.html`<legend id="label">${(x) => x.label}</legend>`
+  )}
+					<slot
+						${slotted.slotted({
+    property: "slottedRadioButtons",
+    filter: slotted.elements(context.tagFor(definition.Radio))
+  })}
+						@slotchange="${(x) => x.handleSlotChange()}"
+					></slot>
+				</fieldset>
+				${(x) => x._getFeedbackTemplate(context)}
+			</div>
+		</template>
+	`;
+};
 
-const radioDefinition = vividElement.defineVividComponent(
-  "radio",
-  Radio,
-  RadioTemplate,
-  [],
+const radioGroupDefinition = vividElement.defineVividComponent(
+  "radio-group",
+  RadioGroup,
+  RadioGroupTemplate,
+  [definition.radioDefinition, mixins.feedbackMessageDefinition],
   {
     styles
   }
 );
-const registerRadio = vividElement.createRegisterFunction(radioDefinition);
+const registerRadioGroup = vividElement.createRegisterFunction(radioGroupDefinition);
 
-exports.Radio = Radio;
-exports.radioDefinition = radioDefinition;
-exports.registerRadio = registerRadio;
+exports.RadioGroup = RadioGroup;
+exports.radioGroupDefinition = radioGroupDefinition;
+exports.registerRadioGroup = registerRadioGroup;