@tylertech/forge 3.0.0-next.21 → 3.0.0-next.22

package/esm/radio/core/radio-group-manager.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getValidationMessage, internals, isFocusable, setDefaultAria } from '../../constants';
+import { getValidationMessage, internals, isFocusable } from '../../constants';
 import { task } from '../../core/utils/event-utils';
 import { RADIO_CONSTANTS, tryCheck } from '../radio';
 /**
@@ -19,22 +19,25 @@ export class RadioGroupManager {
      * the same name from the form element.
      *
      * @param el - The IRadioComponent to get the radio group for.
+     * @param rootNode - The node to search for radios.
+     * @param form - The form element to get radios from.
      * @returns An array of IRadioComponents that belong to the same radio group as the given
      * IRadioComponent.
      */
-    static getRadioGroup(el) {
+    static getRadioGroup(el, { rootNode, form } = {}) {
+        var _a;
         // If there's no name, it's not part of a radio group
         if (!el.name) {
             return [el];
         }
         // If there's no associated form element search the root node
-        if (!el.form) {
-            const root = el.getRootNode();
+        if (!el.form && !form) {
+            const root = rootNode !== null && rootNode !== void 0 ? rootNode : el.getRootNode();
             const namedRadios = root.querySelectorAll(`${RADIO_CONSTANTS.elementName}[name=${el.name}]`);
             return Array.from(namedRadios).filter(radio => !radio.form);
         }
         // When there is a form element, get all RadioComponents with the same name
-        const formRadios = el.form.elements.namedItem(el.name);
+        const formRadios = ((_a = el.form) !== null && _a !== void 0 ? _a : form).elements.namedItem(el.name);
         if (formRadios && Object.prototype.isPrototypeOf.call(RadioNodeList.prototype, formRadios)) {
             return Array.from(formRadios)
                 .filter((radio) => radio.matches(RADIO_CONSTANTS.elementName));
@@ -52,12 +55,14 @@ export class RadioGroupManager {
         const group = RadioGroupManager.getRadioGroup(el);
         const invalid = RadioGroupManager._selectionIsRequired(group);
         group.forEach(radio => {
+            if (!radio.shadowRoot) {
+                return;
+            }
             const validationMessage = radio[getValidationMessage]({
                 required: invalid,
                 checked: radio.checked
             });
             radio[internals].setValidity({ valueMissing: invalid }, validationMessage);
-            radio[setDefaultAria]({ 'ariaInvalid': invalid ? 'true' : 'false' });
         });
     }
     /**
@@ -69,6 +74,22 @@ export class RadioGroupManager {
         const group = RadioGroupManager.getRadioGroup(el);
         group.forEach(radio => radio.checked = radio === el);
     }
+    /**
+     * Sets the tabindices of radios in a radio group based on the currently checked radio.
+     * @param el - A radio component within the group to update the tab indices for.
+     * @param ignoreSelf - Whether to ignore the passed radio component when updating the tab indices.
+     * @param rootNode - The node to search for radios.
+     * @param form - The form element to get radios from.
+     */
+    static syncRadioFocusableState(el, { ignoreSelf, rootNode, form } = { ignoreSelf: false }) {
+        let group = RadioGroupManager.getRadioGroup(el, { rootNode, form });
+        group = group.filter(radio => (ignoreSelf && radio !== el) || radio.shadowRoot);
+        if (!group.some(radio => radio.checked)) {
+            group.forEach(radio => radio[isFocusable] = !radio.disabled);
+            return;
+        }
+        group.forEach(radio => radio[isFocusable] = radio.checked && !radio.disabled);
+    }
     /**
      * Focuses the next radio in the radio group.
      *

package/esm/radio/radio/radio-adapter.js

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { getShadowElement } from '@tylertech/forge-core';
-import { internals, isFocusable, setDefaultAria } from '../../constants';
+import { internals, setDefaultAria } from '../../constants';
 import { BaseAdapter } from '../../core/base/';
 import { RadioGroupManager } from '../core/radio-group-manager';
 import { RADIO_CONSTANTS } from './radio-constants';
@@ -20,6 +20,8 @@ export class RadioAdapter extends BaseAdapter {
         if (checked) {
             RadioGroupManager.setSelectedRadioInGroup(this._component);
         }
+        // Update tab indices
+        RadioGroupManager.syncRadioFocusableState(this._component);
         // Update the form value, state, and validity
         const formValue = checked ? value : null;
         const formState = checked ? 'checked' : 'unchecked';
@@ -39,7 +41,7 @@ export class RadioAdapter extends BaseAdapter {
             return false;
         }
         this._component[setDefaultAria]({ ariaDisabled: `${!!value}` });
-        this._component[isFocusable] = !value;
+        RadioGroupManager.syncRadioFocusableState(this._component);
         return true;
     }
     setRequired(value) {

package/esm/radio/radio/radio-component-delegate.d.ts

@@ -3,3 +3,41 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { FormFieldComponentDelegate, IBaseComponentDelegateConfig, IFormFieldComponentDelegateOptions } from '../../core';
+import { IRadioComponent } from './radio';
+import { RadioLabelPosition } from './radio-constants';
+export type RadioComponentDelegateProps = Partial<IRadioComponent>;
+export interface IRadioComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
+    id?: string;
+    label?: string;
+}
+export interface IRadioComponentDelegateConfig extends IBaseComponentDelegateConfig<IRadioComponent, IRadioComponentDelegateOptions> {
+}
+export declare class RadioComponentDelegate extends FormFieldComponentDelegate<IRadioComponent, IRadioComponentDelegateOptions> {
+    constructor(config?: IRadioComponentDelegateConfig);
+    get value(): string;
+    set value(value: string);
+    get checked(): boolean;
+    set checked(value: boolean);
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
+    get dense(): boolean;
+    set dense(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get name(): string;
+    set name(value: string);
+    get labelPosition(): RadioLabelPosition;
+    set labelPosition(value: RadioLabelPosition);
+    onChange(listener: (evt: Event) => void): void;
+    onInput(listener: (evt: Event) => void): void;
+    onFocus(listener: (evt: Event) => void): void;
+    onBlur(listener: (evt: Event) => void): void;
+    setLabel(text: string | null): void;
+    protected _build(): IRadioComponent;
+    protected _configure(): void;
+}

package/esm/radio/radio/radio-component-delegate.js

@@ -3,4 +3,91 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-// TODO: implement the radio delegate
+import { FormFieldComponentDelegate } from '../../core';
+import { RADIO_CONSTANTS } from './radio-constants';
+export class RadioComponentDelegate extends FormFieldComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+    get value() {
+        return this._element.value;
+    }
+    set value(value) {
+        this._element.value = value;
+    }
+    get checked() {
+        return this._element.checked;
+    }
+    set checked(value) {
+        this._element.checked = value;
+    }
+    get defaultChecked() {
+        return this._element.defaultChecked;
+    }
+    set defaultChecked(value) {
+        this._element.defaultChecked = value;
+    }
+    get dense() {
+        return this._element.dense;
+    }
+    set dense(value) {
+        this._element.dense = value;
+    }
+    get disabled() {
+        return this._element.disabled;
+    }
+    set disabled(value) {
+        this._element.disabled = value;
+    }
+    get required() {
+        return this._element.required;
+    }
+    set required(value) {
+        this._element.required = value;
+    }
+    get readonly() {
+        return this._element.readonly;
+    }
+    set readonly(value) {
+        this._element.readonly = value;
+    }
+    get name() {
+        return this._element.name;
+    }
+    set name(value) {
+        this._element.name = value;
+    }
+    get labelPosition() {
+        return this._element.labelPosition;
+    }
+    set labelPosition(value) {
+        this._element.labelPosition = value;
+    }
+    onChange(listener) {
+        this._element.addEventListener('change', listener);
+    }
+    onInput(listener) {
+        this._element.addEventListener('input', listener);
+    }
+    onFocus(listener) {
+        this._element.addEventListener('focus', listener);
+    }
+    onBlur(listener) {
+        this._element.addEventListener('blur', listener);
+    }
+    setLabel(text) {
+        this._element.innerText = text !== null && text !== void 0 ? text : '';
+    }
+    _build() {
+        return document.createElement(RADIO_CONSTANTS.elementName);
+    }
+    _configure() {
+        var _a, _b;
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.id) {
+            this._element.id = this._config.options.id;
+        }
+        if ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.label) {
+            this._element.innerText = this._config.options.label;
+        }
+    }
+}

package/esm/radio/radio/radio-constants.d.ts

@@ -5,6 +5,17 @@
  */
 export declare const RADIO_CONSTANTS: {
     elementName: "forge-radio";
+    observedAttributes: {
+        CHECKED: string;
+        DEFAULT_CHECKED: string;
+        VALUE: string;
+        DENSE: string;
+        DISABLED: string;
+        REQUIRED: string;
+        READONLY: string;
+        LABEL_POSITION: string;
+        TABINDEX: string;
+    };
     attributes: {
         CHECKED: string;
         DEFAULT_CHECKED: string;

package/esm/radio/radio/radio-constants.js

@@ -5,7 +5,7 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}radio`;
-const attributes = {
+const observedAttributes = {
     CHECKED: 'checked',
     DEFAULT_CHECKED: 'default-checked',
     VALUE: 'value',
@@ -16,6 +16,7 @@ const attributes = {
     LABEL_POSITION: 'label-position',
     TABINDEX: 'tabindex'
 };
+const attributes = Object.assign({}, observedAttributes);
 const selectors = {
     ROOT: '.forge-radio',
     LABEL: '#label',
@@ -27,6 +28,7 @@ const events = {
 };
 export const RADIO_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
     selectors,
     events

package/esm/radio/radio/radio-foundation.js

@@ -29,6 +29,7 @@ export class RadioFoundation {
         this._adapter.addHostListener('click', this._clickListener);
         this._adapter.addHostListener('keydown', this._keydownListener);
         this._adapter.addHostListener('keyup', this._keyupListener);
+        this._adapter.setChecked(this._checked, this._value);
     }
     // Public methods
     tryCheck() {
@@ -108,8 +109,8 @@ export class RadioFoundation {
         // Emit both change and input events per the spec.
         const changeEvent = new Event(RADIO_CONSTANTS.events.CHANGE, { bubbles: true, cancelable: true });
         const inputEvent = new Event(RADIO_CONSTANTS.events.INPUT, { bubbles: true, cancelable: true, composed: true });
-        this._adapter.dispatchHostEvent(new Event(RADIO_CONSTANTS.events.CHANGE, { bubbles: true, cancelable: true }));
-        this._adapter.dispatchHostEvent(new Event(RADIO_CONSTANTS.events.INPUT, { bubbles: true, cancelable: true, composed: true }));
+        this._adapter.dispatchHostEvent(changeEvent);
+        this._adapter.dispatchHostEvent(inputEvent);
         return !(changeEvent.defaultPrevented || inputEvent.defaultPrevented);
     }
     get checked() {

package/esm/radio/radio/radio.d.ts

@@ -6,15 +6,16 @@
 import { getFormState, getFormValue } from '../../constants';
 import { BaseComponent } from '../../core/base/base-component';
 import { IWithFocusable } from '../../core/mixins/focus/with-focusable';
-import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { IWithFormAssociation } from '../../core/mixins/form/with-form-associated';
+import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
 import { FormValue } from '../../core/utils/form-utils';
 import { RadioLabelPosition, RadioState, tryCheck } from './radio-constants';
-import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 export interface IRadioComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria {
     checked: boolean;
     defaultChecked: boolean;
+    value: string;
     required: boolean;
     dense: boolean;
     labelPosition: RadioLabelPosition;
@@ -83,7 +84,7 @@ declare const BaseRadioClass: import("../../constants").AbstractConstructor<impo
  * @cssproperty --forge-radio-animation-timing-function - The timing function of the radio button's animations.
  * @cssproperty --forge-radio-animation-delay - The delay of the radio button's animations.
  *
- * @csspart radio - Styles the radio's root element.
+ * @csspart root - Styles the radio's root element.
  * @csspart background - Styles the border and background of the radio.
  * @csspart focus-indicator - Styles the focus indicator of the radio.
  * @csspart state-layer - Styles the state layer of the radio.
@@ -93,11 +94,15 @@ declare const BaseRadioClass: import("../../constants").AbstractConstructor<impo
 export declare class RadioComponent extends BaseRadioClass implements IRadioComponent {
     static get observedAttributes(): string[];
     private _foundation;
+    private _rootNode?;
+    private _latestAssociatedForm?;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     [getFormValue](): FormValue | null;
     [getFormState](): RadioState;
+    formAssociatedCallback(form: HTMLFormElement | null): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: RadioState): void;
     labelClickedCallback(): void;

package/esm/radio/radio/radio.js

@@ -4,12 +4,13 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
-import { getFormState, getFormValue, inputType, internals, setDefaultAria } from '../../constants';
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { getFormState, getFormValue, inputType, setDefaultAria } from '../../constants';
 import { BaseComponent } from '../../core/base/base-component';
 import { WithFocusable } from '../../core/mixins/focus/with-focusable';
-import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { WithFormAssociation } from '../../core/mixins/form/with-form-associated';
+import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 import { StateLayerComponent } from '../../state-layer';
@@ -17,8 +18,7 @@ import { RadioGroupManager } from '../core/radio-group-manager';
 import { RadioAdapter } from './radio-adapter';
 import { RADIO_CONSTANTS, tryCheck } from './radio-constants';
 import { RadioFoundation } from './radio-foundation';
-import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
-const template = '<template><div id=\"radio\" class=\"forge-radio\" part=\"radio\"><div id=\"container\" class=\"container\" aria-hidden=\"true\"><div id=\"background\" class=\"background\" part=\"background\"></div><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer></div><span id=\"label\" class=\"label\" for=\"input\" part=\"label\"><slot></slot></span></div></template>';
+const template = '<template><div id=\"radio\" class=\"forge-radio\" part=\"root\"><div id=\"container\" class=\"container\" aria-hidden=\"true\"><div id=\"background\" class=\"background\" part=\"background\"></div><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer></div><span id=\"label\" class=\"label\" for=\"input\" part=\"label\"><slot></slot></span></div></template>';
 const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host(:focus){outline:0}.forge-radio{--_radio-primary-color:var(--forge-radio-primary-color, var(--forge-theme-tertiary, #3d5afe));--_radio-inactive-color:var(--forge-radio-inactive-color, var(--forge-theme-surface-container-high, #9e9e9e));--_radio-size:var(--forge-radio-size, 20px);--_radio-mark-size:var(--forge-radio-mark-size, 12px);--_radio-state-layer-size:var(--forge-radio-state-layer-size, 40px);--_radio-state-layer-dense-size:var(--forge-radio-state-layer-dense-size, 24px);--_radio-width:var(--forge-radio-width, var(--_radio-size));--_radio-height:var(--forge-radio-height, var(--_radio-size));--_radio-border-width:var(--forge-radio-border-width, var(--forge-border-medium, 2px));--_radio-unchecked-border-color:var(--forge-radio-unchecked-border-color, var(--_radio-inactive-color));--_radio-checked-border-color:var(--forge-radio-checked-border-color, var(--_radio-primary-color));--_radio-background:var(--forge-radio-background, transparent);--_radio-shape:var(--forge-radio-shape, var(--forge-shape-round, 50%));--_radio-mark-width:var(--forge-radio-mark-width, var(--_radio-mark-size));--_radio-mark-height:var(--forge-radio-mark-height, var(--_radio-mark-size));--_radio-mark-unchecked-color:var(--forge-radio-mark-unchecked-color, var(--_radio-inactive-color));--_radio-mark-checked-color:var(--forge-radio-mark-checked-color, var(--_radio-primary-color));--_radio-mark-unchecked-background:var(--forge-radio-mark-unchecked-background, transparent);--_radio-mark-checked-background:var(--forge-radio-mark-checked-background, transparent);--_radio-gap:var(--forge-radio-gap, 0);--_radio-justify:var(--forge-radio-justify, space-between);--_radio-direction:var(--forge-radio-direction, initial);--_radio-state-layer-width:var(--forge-radio-state-layer-width, var(--_radio-state-layer-size));--_radio-state-layer-height:var(--forge-radio-state-layer-height, var(--_radio-state-layer-size));--_radio-state-layer-unchecked-color:var(--forge-radio-state-layer-unchecked-color, var(--_radio-color));--_radio-state-layer-checked-color:var(--forge-radio-state-layer-checked-color, var(--_radio-primary-color));--_radio-state-layer-shape:var(--forge-radio-state-layer-shape, var(--_radio-shape));--_radio-state-layer-dense-width:var(--forge-radio-state-layer-dense-width, var(--_radio-state-layer-dense-size));--_radio-state-layer-dense-height:var(--forge-radio-state-layer-dense-height, var(--_radio-state-layer-dense-size));--_radio-disabled-opacity:var(--forge-radio-disabled-opacity, 0.38);--_radio-animation-duration:var(--forge-radio-animation-duration, var(--forge-animation-duration-short4, 200ms));--_radio-animation-timing-function:var(--forge-radio-animation-timing-function, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_radio-animation-delay:var(--forge-radio-animation-delay, 0ms)}.forge-radio{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_radio-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_radio-justify);justify-content:var(--_radio-justify);gap:var(--_radio-gap);display:-webkit-box;display:flex}.forge-radio .container{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;border-radius:var(--_radio-shape);inline-size:var(--_radio-state-layer-width);block-size:var(--_radio-state-layer-height);cursor:pointer}.forge-radio .background{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;overflow:hidden;-webkit-transition-duration:var(--_radio-animation-duration);transition-duration:var(--_radio-animation-duration);-webkit-transition-delay:var(--_radio-animation-delay);transition-delay:var(--_radio-animation-delay);-webkit-transition-timing-function:var(--_radio-animation-timing-function);transition-timing-function:var(--_radio-animation-timing-function);-webkit-transition-property:border-color;transition-property:border-color;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--_radio-shape);border-width:var(--_radio-border-width);border-style:solid;border-color:var(--_radio-unchecked-border-color);inline-size:var(--_radio-width);block-size:var(--_radio-height);background:var(--_radio-background)}.forge-radio .background::after{content:\"\";position:absolute;contain:strict;-webkit-transition-duration:var(--_radio-animation-duration);transition-duration:var(--_radio-animation-duration);-webkit-transition-delay:var(--_radio-animation-delay);transition-delay:var(--_radio-animation-delay);-webkit-transition-timing-function:var(--_radio-animation-timing-function);transition-timing-function:var(--_radio-animation-timing-function);-webkit-transition-property:inline-size,block-size,border-color;transition-property:inline-size,block-size,border-color;border-radius:var(--_radio-shape);border-width:calc(var(--_radio-mark-height)/ 2) calc(var(--_radio-mark-width)/ 2);border-color:var(--_radio-mark-unchecked-color);border-style:solid;inline-size:calc(var(--_radio-width) - 2 * var(--_radio-border-width));block-size:calc(var(--_radio-height) - 2 * var(--_radio-border-width));background:var(--_radio-mark-unchecked-background)}.forge-radio .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);cursor:default}.forge-radio .label:empty{display:none}:host([checked]) .forge-radio .background{border-color:var(--_radio-checked-border-color)}:host([checked]) .forge-radio .background::after{border-color:var(--_radio-mark-checked-color);inline-size:0px;block-size:0px;background:var(--_radio-mark-checked-background)}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_radio-state-layer-checked-color)}:host([dense]) .forge-radio .container{inline-size:var(--_radio-state-layer-dense-width);block-size:var(--_radio-state-layer-dense-height)}:host([disabled]) .forge-radio{opacity:var(--_radio-disabled-opacity)}:host([disabled]) .forge-radio .container{cursor:not-allowed}:host([readonly]) .forge-radio .container{cursor:not-allowed}forge-focus-indicator{--forge-focus-indicator-color:var(--_radio-primary-color);--forge-focus-indicator-outward-offset:0px;--forge-focus-indicator-shape:var(--_radio-state-layer-shape)}forge-state-layer{--forge-state-layer-color:var(--_radio-state-layer-unchecked-color)}';
 const BaseRadioClass = WithFormAssociation(WithLabelAwareness(WithFocusable(WithDefaultAria(WithElementInternals(BaseComponent)))));
 /**
@@ -79,7 +79,7 @@ const BaseRadioClass = WithFormAssociation(WithLabelAwareness(WithFocusable(With
  * @cssproperty --forge-radio-animation-timing-function - The timing function of the radio button's animations.
  * @cssproperty --forge-radio-animation-delay - The delay of the radio button's animations.
  *
- * @csspart radio - Styles the radio's root element.
+ * @csspart root - Styles the radio's root element.
  * @csspart background - Styles the border and background of the radio.
  * @csspart focus-indicator - Styles the focus indicator of the radio.
  * @csspart state-layer - Styles the state layer of the radio.
@@ -88,17 +88,7 @@ const BaseRadioClass = WithFormAssociation(WithLabelAwareness(WithFocusable(With
  */
 let RadioComponent = class RadioComponent extends BaseRadioClass {
     static get observedAttributes() {
-        return [
-            RADIO_CONSTANTS.attributes.CHECKED,
-            RADIO_CONSTANTS.attributes.DEFAULT_CHECKED,
-            RADIO_CONSTANTS.attributes.VALUE,
-            RADIO_CONSTANTS.attributes.DENSE,
-            RADIO_CONSTANTS.attributes.DISABLED,
-            RADIO_CONSTANTS.attributes.REQUIRED,
-            RADIO_CONSTANTS.attributes.READONLY,
-            RADIO_CONSTANTS.attributes.LABEL_POSITION,
-            RADIO_CONSTANTS.attributes.TABINDEX
-        ];
+        return Object.values(RADIO_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
@@ -112,10 +102,14 @@ let RadioComponent = class RadioComponent extends BaseRadioClass {
             role: 'radio',
             ariaChecked: this.checked ? 'true' : 'false',
             ariaDisabled: this.disabled ? 'true' : 'false',
-            ariaInvalid: this[internals].validity.valid ? 'false' : 'true',
             ariaRequired: this.required ? 'true' : 'false'
         });
+        RadioGroupManager.syncRadioFocusableState(this);
         this._foundation.initialize();
+        this._rootNode = this.getRootNode();
+    }
+    disconnectedCallback() {
+        RadioGroupManager.syncRadioFocusableState(this, { ignoreSelf: true, rootNode: this._rootNode, form: this._latestAssociatedForm });
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
@@ -152,6 +146,11 @@ let RadioComponent = class RadioComponent extends BaseRadioClass {
     [getFormState]() {
         return this.checked ? 'checked' : 'unchecked';
     }
+    formAssociatedCallback(form) {
+        if (form) {
+            this._latestAssociatedForm = form;
+        }
+    }
     formResetCallback() {
         RadioGroupManager.requestRadioGroupReset(this);
     }

package/esm/radio/radio-group/radio-group-constants.d.ts

@@ -5,6 +5,9 @@
  */
 export declare const RADIO_GROUP_CONSTANTS: {
     elementName: "forge-radio-group";
+    observedAttributes: {
+        DISABLED: string;
+    };
     attributes: {
         DISABLED: string;
     };

package/esm/radio/radio-group/radio-group-constants.js

@@ -5,10 +5,12 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}radio-group`;
-const attributes = {
+const observedAttributes = {
     DISABLED: 'disabled'
 };
+const attributes = Object.assign({}, observedAttributes);
 export const RADIO_GROUP_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes
 };

package/esm/radio/radio-group/radio-group.js

@@ -4,12 +4,13 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean, toggleAttribute } from '@tylertech/forge-core';
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty, toggleAttribute } from '@tylertech/forge-core';
 import { internals, setDefaultAria } from '../../constants';
 import { BaseComponent } from '../../core/base/base-component';
 import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { RadioComponent } from '../radio/radio';
 import { RadioGroupAdapter } from './radio-group-adapter';
 import { RADIO_GROUP_CONSTANTS } from './radio-group-constants';
 import { RadioGroupFoundation } from './radio-group-foundation';
@@ -39,9 +40,7 @@ let RadioGroupComponent = class RadioGroupComponent extends BaseRadioGroupClass
         toggleAttribute(this, !!value, 'name', value);
     }
     static get observedAttributes() {
-        return [
-            RADIO_GROUP_CONSTANTS.attributes.DISABLED
-        ];
+        return Object.values(RADIO_GROUP_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
@@ -77,7 +76,8 @@ __decorate([
 ], RadioGroupComponent.prototype, "disabled", void 0);
 RadioGroupComponent = __decorate([
     CustomElement({
-        name: RADIO_GROUP_CONSTANTS.elementName
+        name: RADIO_GROUP_CONSTANTS.elementName,
+        dependencies: [RadioComponent]
     })
 ], RadioGroupComponent);
 export { RadioGroupComponent };

package/esm/scaffold/scaffold-constants.d.ts

@@ -5,4 +5,10 @@
  */
 export declare const SCAFFOLD_CONSTANTS: {
     elementName: "forge-scaffold";
+    observedAttributes: {
+        VIEWPORT: string;
+    };
+    attributes: {
+        VIEWPORT: string;
+    };
 };

package/esm/scaffold/scaffold-constants.js

@@ -5,6 +5,12 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}scaffold`;
+const observedAttributes = {
+    VIEWPORT: 'viewport'
+};
+const attributes = Object.assign({}, observedAttributes);
 export const SCAFFOLD_CONSTANTS = {
-    elementName
+    elementName,
+    observedAttributes,
+    attributes
 };

package/esm/scaffold/scaffold.d.ts

@@ -5,6 +5,7 @@
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 export interface IScaffoldComponent extends IBaseComponent {
+    viewport: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -12,10 +13,37 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-scaffold>` element.
- *
  * @tag forge-scaffold
+ *
+ * @summary A scaffold provides a generic layout structure for your content using common named areas.
+ *
+ * @property {boolean} viewport - Whether the scaffold should be full viewport height.
+ *
+ * @attribute {boolean} viewport - Whether the scaffold should be full viewport height.
+ *
+ * @cssproperty --forge-scaffold-height - The `height` of the scaffold.
+ * @cssproperty --forge-scaffold-width - The `width` of the scaffold.
+ * @cssproperty --forge-scaffold-overflow - The `overflow` of the scaffold.
+ * @cssproperty --forge-scaffold-body-position - The `position` of the scaffold body.
+ *
+ * @csspart root - The root container element.
+ * @csspart header - The header of the scaffold.
+ * @csspart body - The body of the scaffold.
+ *
+ * @slot header - Places content in the header.
+ * @slot body - Places content in the body.
+ * @slot footer - Places content in the footer.
+ * @slot left - Places content to the left of all content.
+ * @slot right - Places content to the right of all content.
+ * @slot body-header - Places content in the header of the body.
+ * @slot body-footer - Places content in the footer of the body.
+ * @slot body-left - Places content to the left of the body content.
+ * @slot body-right - Places content to the right of the body content.
  */
 export declare class ScaffoldComponent extends BaseComponent implements IScaffoldComponent {
+    static get observedAttributes(): string[];
     constructor();
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    get viewport(): boolean;
+    set viewport(value: boolean);
 }

package/esm/scaffold/scaffold.js

@@ -7,18 +7,57 @@ import { __decorate } from "tslib";
 import { CustomElement, attachShadowTemplate } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { SCAFFOLD_CONSTANTS } from './scaffold-constants';
-const template = '<template><div class=\"forge-scaffold\" part=\"root\"><slot name=\"left\"></slot><div class=\"forge-scaffold__header\" part=\"header-container\"><slot name=\"header\"></slot></div><div class=\"forge-scaffold__body\" part=\"body-container\"><slot name=\"body-left\"></slot><slot name=\"body-header\"></slot><slot name=\"body\"></slot><slot name=\"body-footer\"></slot><slot name=\"body-right\"></slot></div><slot name=\"footer\"></slot><slot name=\"right\"></slot></div></template>';
-const styles = '.forge-scaffold{height:100%;height:var(--forge-scaffold-height,100%);position:relative;position:var(--forge-scaffold-position,relative);overflow:hidden;overflow:var(--forge-scaffold-overflow,hidden);display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto}.forge-scaffold__header{grid-row:1;grid-column:2;min-width:0}.forge-scaffold__body{width:100%;width:var(--forge-scaffold-width,100%);position:relative;position:var(--forge-scaffold-body-position,relative);display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;grid-row:2;grid-column:2;overflow:hidden}.forge-scaffold__body ::slotted([slot=left]){overflow:auto;grid-column:1;grid-row:1/5}.forge-scaffold__body ::slotted([slot=right]){overflow:auto;grid-column:3;grid-row:1/5}.forge-scaffold__body ::slotted([slot=body-left]){overflow:auto;grid-column:1;grid-row:1/4}.forge-scaffold__body ::slotted([slot=body-right]){overflow:auto;grid-column:3;grid-row:1/4}.forge-scaffold__body ::slotted([slot=body-header]){grid-row:1;grid-column:2}.forge-scaffold__body ::slotted([slot=body]){overflow:auto;grid-row:2;grid-column:2}.forge-scaffold__body ::slotted([slot=body-footer]){grid-row:3;grid-column:2}.forge-scaffold ::slotted([slot=body-left]),.forge-scaffold ::slotted([slot=body-right]),.forge-scaffold ::slotted([slot=left]),.forge-scaffold ::slotted([slot=right]){overflow:auto}.forge-scaffold ::slotted([slot=body-left]){grid-column:1;grid-row:1/4}.forge-scaffold ::slotted([slot=body-right]){grid-column:3;grid-row:1/4}.forge-scaffold ::slotted([slot=footer]){grid-row:3;grid-column:2}.forge-scaffold ::slotted([slot=left]){grid-column:1;grid-row:1/5}.forge-scaffold ::slotted([slot=right]){grid-column:3;grid-row:1/5}:host{display:block;height:100%;width:100%}:host([hidden]){display:none}:host([viewport]){width:100vw;width:var(--forge-scaffold-width,100vw);height:100vh;height:var(--forge-scaffold-height,100vh);--forge-scaffold-height:100vh;--forge-scaffold-width:100vw}:host([viewport]) .forge-scaffold{height:100vh;height:var(--forge-scaffold-height,100vh);--forge-scaffold-height:100vh}:host([viewport]) .forge-scaffold__body{width:100vw;width:var(--forge-scaffold-width,100vw);--forge-scaffold-width:100vw}';
+const template = '<template><div class=\"forge-scaffold\" part=\"root\"><slot name=\"left\"></slot><div class=\"header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"body\" part=\"body\"><slot name=\"body-left\"></slot><slot name=\"body-header\"></slot><slot name=\"body\"></slot><slot name=\"body-footer\"></slot><slot name=\"body-right\"></slot></div><slot name=\"footer\"></slot><slot name=\"right\"></slot></div></template>';
+const styles = ':host{--_scaffold-height:var(--forge-scaffold-height, 100%);--_scaffold-width:var(--forge-scaffold-width, 100%)}:host{display:block;width:var(--_scaffold-width);height:var(--_scaffold-height)}:host([hidden]){display:none}.forge-scaffold{--_scaffold-overflow:var(--forge-scaffold-overflow, hidden);--_scaffold-body-position:var(--forge-scaffold-body-position, relative)}.forge-scaffold{position:relative;display:grid;grid-template-areas:\"left header right\" \"left body right\" \"left footer right\";grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;height:var(--_scaffold-height);width:var(--_scaffold-width);overflow:var(--_scaffold-overflow)}.header{grid-area:header;min-width:0;min-height:0}.body{position:var(--_scaffold-body-position);display:grid;grid-area:body;grid-template-areas:\"body-left body-header body-right\" \"body-left body-inner body-right\" \"body-left body-footer body-right\";grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;width:var(--_scaffold-width);min-width:0;min-height:0;overflow:hidden}::slotted(*){min-width:0;min-height:0}::slotted([slot=left]){grid-area:left}::slotted([slot=right]){grid-area:right}::slotted([slot=body-left]){grid-area:body-left}::slotted([slot=body-right]){grid-area:body-right}::slotted([slot=body-header]){grid-area:body-header}::slotted([slot=body]){overflow:auto;grid-area:body-inner}::slotted([slot=body-footer]){grid-area:body-footer}::slotted([slot=footer]){grid-area:footer}::slotted([slot=body-left]),::slotted([slot=body-right]),::slotted([slot=body]),::slotted([slot=left]),::slotted([slot=right]){overflow:auto}:host([viewport]){--_scaffold-height:var(--forge-scaffold-height, 100dvh);--_scaffold-width:var(--forge-scaffold-width, 100dvw)}';
 /**
- * The custom element class behind the `<forge-scaffold>` element.
- *
  * @tag forge-scaffold
+ *
+ * @summary A scaffold provides a generic layout structure for your content using common named areas.
+ *
+ * @property {boolean} viewport - Whether the scaffold should be full viewport height.
+ *
+ * @attribute {boolean} viewport - Whether the scaffold should be full viewport height.
+ *
+ * @cssproperty --forge-scaffold-height - The `height` of the scaffold.
+ * @cssproperty --forge-scaffold-width - The `width` of the scaffold.
+ * @cssproperty --forge-scaffold-overflow - The `overflow` of the scaffold.
+ * @cssproperty --forge-scaffold-body-position - The `position` of the scaffold body.
+ *
+ * @csspart root - The root container element.
+ * @csspart header - The header of the scaffold.
+ * @csspart body - The body of the scaffold.
+ *
+ * @slot header - Places content in the header.
+ * @slot body - Places content in the body.
+ * @slot footer - Places content in the footer.
+ * @slot left - Places content to the left of all content.
+ * @slot right - Places content to the right of all content.
+ * @slot body-header - Places content in the header of the body.
+ * @slot body-footer - Places content in the footer of the body.
+ * @slot body-left - Places content to the left of the body content.
+ * @slot body-right - Places content to the right of the body content.
  */
 let ScaffoldComponent = class ScaffoldComponent extends BaseComponent {
+    static get observedAttributes() {
+        return Object.values(SCAFFOLD_CONSTANTS.observedAttributes);
+    }
     constructor() {
         super();
         attachShadowTemplate(this, template, styles);
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case SCAFFOLD_CONSTANTS.observedAttributes.VIEWPORT:
+                this.viewport = newValue !== null;
+                break;
+        }
+    }
+    get viewport() {
+        return this.hasAttribute(SCAFFOLD_CONSTANTS.attributes.VIEWPORT);
+    }
+    set viewport(value) {
+        this.toggleAttribute(SCAFFOLD_CONSTANTS.attributes.VIEWPORT, Boolean(value));
+    }
 };
 ScaffoldComponent = __decorate([
     CustomElement({