@tylertech/forge 3.0.0-next.14 → 3.0.0-next.16

package/esm/popover/popover.js

@@ -0,0 +1,147 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, coerceNumber, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { PopoverAdapter } from './popover-adapter';
+import { POPOVER_CONSTANTS } from './popover-constants';
+import { PopoverFoundation } from './popover-foundation';
+import { OverlayComponent, OVERLAY_CONSTANTS } from '../overlay';
+import { OverlayAware } from '../overlay/base/overlay-aware';
+import { coerceStringToArray } from '../core/utils/utils';
+import { tryDismiss } from '../core/utils/dismissible-stack';
+const template = '<template><forge-overlay exportparts=\"root:overlay\"><div class=\"forge-popover\" part=\"surface\"><slot></slot></div></forge-overlay></template>';
+const styles = '@-webkit-keyframes zoomin{from{-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes zoomin{from{-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes slidein{from{-webkit-transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y));transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}to{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes slidein{from{-webkit-transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y));transform:translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y))}to{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}:host{display:contents;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}forge-overlay{--_popover-background:var(--forge-popover-background, var(--forge-theme-surface-bright, #ffffff));--_popover-border-radius:var(--forge-popover-border-radius, var(--forge-shape-medium, 4px));--_popover-box-shadow:var(--forge-popover-box-shadow, var(--forge-theme-popup-elevation, var(--forge-theme-surface-bright-shadow)));--_popover-border-width:var(--forge-popover-border-width, 0);--_popover-border-style:var(--forge-popover-border-style, solid);--_popover-border-color:var(--forge-popover-border-color, var(--forge-theme-outline, #e0e0e0));--_popover-arrow-size:var(--forge-popover-arrow-size, 12px);--_popover-arrow-height:var(--forge-popover-arrow-height, var(--_popover-arrow-size));--_popover-arrow-width:var(--forge-popover-arrow-width, var(--_popover-arrow-size));--_popover-arrow-background-color:var(--forge-popover-arrow-background-color, var(--_popover-background));--_popover-arrow-top-rotation:var(--forge-popover-arrow-top-rotation, 135deg);--_popover-arrow-right-rotation:var(--forge-popover-arrow-right-rotation, 225deg);--_popover-arrow-bottom-rotation:var(--forge-popover-arrow-bottom-rotation, 315deg);--_popover-arrow-left-rotation:var(--forge-popover-arrow-left-rotation, 45deg);--_popover-arrow-border-width:var(--forge-popover-arrow-border-width, var(--forge-border-thin, 1px));--_popover-animation-timing:var(--forge-popover-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_popover-zoom-duration:var(--forge-popover-zoom-duration, var(--forge-animation-duration-short3, 150ms));--_popover-zoom-timing:var(--forge-popover-zoom-timing, var(--_popover-animating-timing));--_popover-slide-duration:var(--forge-popover-slide-duration, var(--forge-animation-duration-short3, 150ms));--_popover-slide-timing:var(--forge-popover-slide-timing, var(--_popover-animating-timing));--_popover-slide-offset:var(--forge-popover-slide-offset, 24px);--_popover-fade-duration:var(--forge-popover-fade-duration, var(--forge-animation-duration-medium2, 300ms));--_popover-fade-timing:var(--forge-popover-fade-timing, var(--_popover-animating-timing));--_popover-position-inline-start:var(--forge-popover-position-inline-start, auto);--_popover-position-inline-end:var(--forge-popover-position-inline-end, auto);--_popover-position-block-start:var(--forge-popover-position-block-start, auto);--_popover-position-block-end:var(--forge-popover-position-block-end, auto)}.forge-popover{--_popover-arrow-translate-x:0;--_popover-arrow-translate-y:0;--_popover-arrow-rotation:0;--_popover-slidein-x:0;--_popover-slidein-y:0;--_popover-zoomin-origin:50% 50% 0;--_popover-arrow-clip-path:polygon(calc(var(--_popover-border-width) * -1) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(var(--_popover-border-width) * -1), calc(100% + var(--_popover-border-width)) calc(100% + var(--_popover-border-width)))}.forge-popover{position:relative;background:var(--_popover-background);border-radius:var(--_popover-border-radius);-webkit-box-shadow:var(--_popover-box-shadow);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color)}:host([open][no-anchor]) forge-overlay{--forge-overlay-position-inline-start:var(--_popover-position-inline-start);--forge-overlay-position-inline-end:var(--_popover-position-inline-end);--forge-overlay-position-block-start:var(--_popover-position-block-start);--forge-overlay-position-block-end:var(--_popover-position-block-end)}:host([arrow]) .forge-popover{--_popover-border-width:var(--_popover-arrow-border-width)}:host([arrow]) .arrow{position:absolute;background-color:var(--_popover-arrow-background-color);height:var(--_popover-arrow-height);width:var(--_popover-arrow-width);-webkit-box-shadow:var(--_popover-box-shadow);box-shadow:var(--_popover-box-shadow);border-width:var(--_popover-border-width);border-style:var(--_popover-border-style);border-color:var(--_popover-border-color);-webkit-transform:translate(var(--_popover-arrow-translate-x),var(--_popover-arrow-translate-y)) rotate(var(--_popover-arrow-rotation));transform:translate(var(--_popover-arrow-translate-x),var(--_popover-arrow-translate-y)) rotate(var(--_popover-arrow-rotation));-webkit-clip-path:var(--_popover-arrow-clip-path);clip-path:var(--_popover-arrow-clip-path)}:host([arrow]) forge-overlay[position-placement^=top] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-top-rotation))}:host([arrow]) forge-overlay[position-placement^=right] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-right-rotation))}:host([arrow]) forge-overlay[position-placement^=bottom] .arrow{--_popover-arrow-translate-y:var(--forge-popover-arrow-translate-y, var(--_popover-border-width));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-bottom-rotation))}:host([arrow]) forge-overlay[position-placement^=left] .arrow{--_popover-arrow-translate-x:var(--forge-popover-arrow-translate-x, calc(var(--_popover-border-width) * -1));--_popover-arrow-rotation:var(--forge-popover-arrow-rotation, var(--_popover-arrow-left-rotation))}:host(:not([animation-type])) .forge-popover,:host([animation-type=zoom]) .forge-popover{-webkit-animation-duration:var(--_popover-zoom-duration);animation-duration:var(--_popover-zoom-duration);-webkit-animation-timing-function:var(--_popover-zoom-timing);animation-timing-function:var(--_popover-zoom-timing);-webkit-animation-name:fadein,zoomin;animation-name:fadein,zoomin;-webkit-transform-origin:var(--_popover-zoomin-origin);transform-origin:var(--_popover-zoomin-origin)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=top][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, bottom right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=right][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, left bottom)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top left)}:host(:not([animation-type])) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=bottom][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, top right)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left]:not([position-placement*=\"-\"]) .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right center)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-start] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right top)}:host(:not([animation-type])) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover,:host([animation-type=zoom]) forge-overlay[open][position-placement^=left][position-placement$=-end] .forge-popover{--_popover-zoomin-origin:var(--forge-popover-zoomin-origin, right bottom)}:host([animation-type=slide]) .forge-popover{-webkit-animation-duration:var(--_popover-slide-duration);animation-duration:var(--_popover-slide-duration);-webkit-animation-timing-function:var(--_popover-slide-timing);animation-timing-function:var(--_popover-slide-timing);-webkit-animation-name:fadein,slidein;animation-name:fadein,slidein}:host([animation-type=slide]) forge-overlay[open][position-placement^=top] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, var(--_popover-slide-offset))}:host([animation-type=slide]) forge-overlay[open][position-placement^=right] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=bottom] .forge-popover{--_popover-slidein-y:var(--forge-popover-slidein-y, calc(var(--_popover-slide-offset) * -1))}:host([animation-type=slide]) forge-overlay[open][position-placement^=left] .forge-popover{--_popover-slidein-x:var(--forge-popover-slidein-x, var(--_popover-slide-offset))}:host([animation-type=fade]) .forge-popover{-webkit-animation-duration:var(--_popover-fade-duration);animation-duration:var(--_popover-fade-duration);-webkit-animation-timing-function:var(--_popover-fade-timing);animation-timing-function:var(--_popover-fade-timing);-webkit-animation-name:fadein;animation-name:fadein}';
+/**
+ * @tag forge-popover
+ *
+ * @summary Popovers are used to render content in an element that is above all other content on the page.
+ *
+ * @property {boolean} arrow - Whether or not the popover should render an arrow.
+ * @property {PopoverAnimationType} animationType - The animation type to use for the popover. Valid values are `'none'`, `'fade'`, `'slide'`, and `'zoom'` (default).
+ * @property {PopoverTriggerType | PopoverTriggerType[]} triggerType - The trigger type(s) to use for the popover. Valid values are `'click'` (default), `'hover'`, `'focus'`, and `'longpress'`. Multiple can be specified.
+ * @property {number} longpressDelay - The delay in milliseconds before a longpress event is detected.
+ * @property {boolean} persistentHover - Whether or not the popover should remain open when the user hovers outside the popover.
+ * @property {number} hoverDismissDelay - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
+ *
+ * @attribute {string} arrow - Whether or not the popover should render an arrow.
+ * @attribute {string} animation-type - The animation type to use for the popover. Valid values are `'none'`, `'fade'`, `'slide'`, and `'zoom'` (default).
+ * @attribute {string} trigger-type - The trigger type(s) to use for the popover. Valid values are `'click'` (default), `'hover'`, `'focus'`, and `'longpress'`. Multiple can be specified.
+ * @attribute {string} longpress-delay - The delay in milliseconds before a longpress event is detected.
+ * @attribute {string} persistent-hover - Whether or not the popover should remain open when the user hovers outside the popover.
+ * @attribute {string} hover-dismiss-delay - The delay in milliseconds before the popover is dismissed when the user hovers outside of the popover.
+ *
+ * @event {CustomEvent<IPopoverToggleEventData} forge-popover-beforetoggle - Dispatches before the popover is toggled, and is cancelable.
+ * @event {CustomEvent<IPopoverToggleEventData} forge-popover-toggle - Dispatches after the popover is toggled.
+ *
+ * @cssproperty --forge-popover-background - The background color of the popover surface.
+ * @cssproperty --forge-popover-border-radius - The border radius of the popover surface.
+ * @cssproperty --forge-popover-box-shadow - The box shadow of the popover surface.
+ * @cssproperty --forge-popover-border-width - The border width of the popover surface.
+ * @cssproperty --forge-popover-border-style - The border style of the popover surface.
+ * @cssproperty --forge-popover-border-color - The border color of the popover surface.
+ * @cssproperty --forge-popover-arrow-size - The size of the arrow.
+ * @cssproperty --forge-popover-arrow-height - The height of the arrow.
+ * @cssproperty --forge-popover-arrow-width - The width of the arrow.
+ * @cssproperty --forge-popover-arrow-background-color - The background color of the arrow. Defaults to the background color of the popover surface.
+ * @cssproperty --forge-popover-arrow-top-rotation - The rotation of the arrow when the popover is placed on the top.
+ * @cssproperty --forge-popover-arrow-right-rotation - The rotation of the arrow when the popover is placed on the right.
+ * @cssproperty --forge-popover-arrow-bottom-rotation - The rotation of the arrow when the popover is placed on the bottom.
+ * @cssproperty --forge-popover-arrow-left-rotation - The rotation of the arrow when the popover is placed on the left.
+ * @cssproperty --forge-popover-arrow-border-width - The border width of the popover surface and arrow when an arrow is applied.
+ * @cssproperty --forge-popover-arrow-clip-path - The clip path to use for the arrow element.
+ * @cssproperty --forge-popover-animation-timing - The animation timing function to use for the popover animation.
+ * @cssproperty --forge-popover-zoom-duration - The duration of the zoom animation.
+ * @cssproperty --forge-popover-zoom-timing - The timing function to use for the zoom animation.
+ * @cssproperty --forge-popover-slide-duration - The duration of the slide animation.
+ * @cssproperty --forge-popover-slide-timing - The timing function to use for the slide animation.
+ * @cssproperty --forge-popover-slide-offset - The start offset to use for the slide animation.
+ * @cssproperty --forge-popover-fade-duration - The duration of the fade animation.
+ * @cssproperty --forge-popover-fade-timing - The timing function to use for the fade animation.
+ * @cssproperty --forge-popover-position-block-start - The `block-start` position of the popover.
+ * @cssproperty --forge-popover-position-block-end - The `block-end` position of the popover.
+ * @cssproperty --forge-popover-position-inline-start - The `inline-start` position of the popover.
+ * @cssproperty --forge-popover-position-inline-end - The `inline-end` position of the popover.
+ *
+ * @slot - The content to render inside the popover.
+ *
+ * @csspart overlay - The overlay root element.
+ * @csspart surface - The surface container element for the slotted content.
+ */
+let PopoverComponent = class PopoverComponent extends OverlayAware {
+    static get observedAttributes() {
+        return [
+            ...Object.values(OVERLAY_CONSTANTS.observedAttributes),
+            POPOVER_CONSTANTS.attributes.ARROW,
+            POPOVER_CONSTANTS.attributes.ANIMATION_TYPE,
+            POPOVER_CONSTANTS.attributes.TRIGGER_TYPE,
+            POPOVER_CONSTANTS.attributes.LONGPRESS_DELAY,
+            POPOVER_CONSTANTS.attributes.PERSISTENT_HOVER,
+            POPOVER_CONSTANTS.attributes.HOVER_DISMISS_DELAY
+        ];
+    }
+    [tryDismiss](state) {
+        return this._foundation.dispatchBeforeToggleEvent(state);
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new PopoverFoundation(new PopoverAdapter(this));
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.destroy();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case POPOVER_CONSTANTS.attributes.ARROW:
+                this.arrow = coerceBoolean(newValue);
+                return;
+            case POPOVER_CONSTANTS.attributes.ANIMATION_TYPE:
+                this.animationType = newValue;
+                return;
+            case POPOVER_CONSTANTS.attributes.TRIGGER_TYPE:
+                this.triggerType = (newValue === null || newValue === void 0 ? void 0 : newValue.trim()) ? coerceStringToArray(newValue) : POPOVER_CONSTANTS.defaults.TRIGGER_TYPE;
+                return;
+            case POPOVER_CONSTANTS.attributes.LONGPRESS_DELAY:
+                this.longpressDelay = coerceNumber(newValue);
+                return;
+            case POPOVER_CONSTANTS.attributes.PERSISTENT_HOVER:
+                this.persistentHover = coerceBoolean(newValue);
+                return;
+            case POPOVER_CONSTANTS.attributes.HOVER_DISMISS_DELAY:
+                this.hoverDismissDelay = coerceNumber(newValue);
+                return;
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+};
+__decorate([
+    FoundationProperty()
+], PopoverComponent.prototype, "arrow", void 0);
+__decorate([
+    FoundationProperty()
+], PopoverComponent.prototype, "animationType", void 0);
+__decorate([
+    FoundationProperty()
+], PopoverComponent.prototype, "triggerType", void 0);
+__decorate([
+    FoundationProperty()
+], PopoverComponent.prototype, "longpressDelay", void 0);
+__decorate([
+    FoundationProperty()
+], PopoverComponent.prototype, "persistentHover", void 0);
+__decorate([
+    FoundationProperty()
+], PopoverComponent.prototype, "hoverDismissDelay", void 0);
+PopoverComponent = __decorate([
+    CustomElement({
+        name: POPOVER_CONSTANTS.elementName,
+        dependencies: [OverlayComponent]
+    })
+], PopoverComponent);
+export { PopoverComponent };

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

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { PositionPlacement } from '@tylertech/forge-core';
+import { PositionPlacement } from '../core/utils/position-utils';
 export declare const POPUP_CONSTANTS: {
     elementName: "forge-popup";
     classes: {

package/esm/profile-card/profile-card.js

@@ -14,7 +14,7 @@ import { IconComponent } from '../icon/icon';
 import { ToolbarComponent } from '../toolbar';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-profile-card\" part=\"root\"><div class=\"info-container\"><div class=\"avatar\"><forge-avatar part=\"avatar\"></forge-avatar></div><div class=\"info-text\"><div class=\"full-name\" part=\"name\"></div><div class=\"email\" part=\"email\"></div></div></div><slot></slot><forge-toolbar inverted id=\"action-toolbar\"><forge-button variant=\"outlined\" slot=\"end\" style=\"display: none;\" part=\"profile-button\" id=\"profile-button\">Profile</forge-button><forge-button slot=\"end\" part=\"sign-out-button\" id=\"sign-out-button\">Sign out</forge-button></forge-toolbar></div></template>';
-const styles = ':host{display:block}:host([hidden]){display:none}.forge-profile-card{--_profile-card-min-width:var(--forge-profile-card-min-width, 360px);--_profile-card-shape:var(--forge-profile-card-border-radius, var(--forge-shape-medium, 4px));--_profile-card-avatar-size:var(--forge-profile-card-avatar-size, 56px)}.forge-profile-card{min-width:var(--_profile-card-min-width);border-radius:var(--_profile-card-shape)}@media (max-width:399px){.forge-profile-card{width:100vw;min-width:unset;overflow:auto}}.forge-profile-card .info-container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding-block:var(--forge-spacing-xsmall,8px);padding-inline:var(--forge-spacing-medium,16px)}.forge-profile-card .avatar{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:var(--forge-spacing-xsmall,8px);-webkit-margin-end:var(--forge-spacing-medium,16px);margin-inline-end:var(--forge-spacing-medium,16px);--forge-avatar-size:var(--_profile-card-avatar-size)}.forge-profile-card .text{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-profile-card .full-name{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading2-font-size-scale, 1)));font-weight:var(--forge-typography-heading2-font-weight,500);line-height:var(--forge-typography-heading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading2-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-heading2-letter-spacing, .0125em);text-transform:var(--forge-typography-heading2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-heading2-text-decoration,inherit);text-decoration:var(--forge-typography-heading2-text-decoration,inherit)}.forge-profile-card .email{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-subheading1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-subheading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading1-font-size-scale, .875)));font-weight:var(--forge-typography-subheading1-font-weight,400);line-height:var(--forge-typography-subheading1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading1-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-subheading1-letter-spacing, normal);text-transform:var(--forge-typography-subheading1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-subheading1-text-decoration,inherit);text-decoration:var(--forge-typography-subheading1-text-decoration,inherit);color:var(--forge-theme-text-medium,rgba(0,0,0,.54))}#action-toolbar{--forge-toolbar-padding:8px}#action-toolbar forge-button:not(:last-of-type){-webkit-margin-end:8px;margin-inline-end:8px}';
+const styles = ':host{display:block}:host([hidden]){display:none}.forge-profile-card{--_profile-card-min-width:var(--forge-profile-card-min-width, 360px);--_profile-card-shape:var(--forge-profile-card-shape, var(--forge-shape-medium, 4px));--_profile-card-avatar-size:var(--forge-profile-card-avatar-size, 56px)}.forge-profile-card{min-width:var(--_profile-card-min-width);border-radius:var(--_profile-card-shape)}@media (max-width:399px){.forge-profile-card{width:100vw;min-width:unset;overflow:auto}}.forge-profile-card .info-container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding-block:var(--forge-spacing-xsmall,8px);padding-inline:var(--forge-spacing-medium,16px)}.forge-profile-card .avatar{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:var(--forge-spacing-xsmall,8px);-webkit-margin-end:var(--forge-spacing-medium,16px);margin-inline-end:var(--forge-spacing-medium,16px);--forge-avatar-size:var(--_profile-card-avatar-size)}.forge-profile-card .text{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-profile-card .full-name{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading2-font-size-scale, 1)));font-weight:var(--forge-typography-heading2-font-weight,500);line-height:var(--forge-typography-heading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading2-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-heading2-letter-spacing, .0125em);text-transform:var(--forge-typography-heading2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-heading2-text-decoration,inherit);text-decoration:var(--forge-typography-heading2-text-decoration,inherit)}.forge-profile-card .email{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-subheading1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-subheading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading1-font-size-scale, .875)));font-weight:var(--forge-typography-subheading1-font-weight,400);line-height:var(--forge-typography-subheading1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading1-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-subheading1-letter-spacing, normal);text-transform:var(--forge-typography-subheading1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-subheading1-text-decoration,inherit);text-decoration:var(--forge-typography-subheading1-text-decoration,inherit);color:var(--forge-theme-text-medium,rgba(0,0,0,.6))}#action-toolbar{--forge-toolbar-padding:8px}#action-toolbar forge-button:not(:last-of-type){-webkit-margin-end:8px;margin-inline-end:8px}';
 /**
  * @tag forge-profile-card
  */

package/esm/radio/core/radio-group-manager.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IRadioComponent } from '../radio';
+/**
+ * A class for coordinating the states of radio components within a radio group.
+ */
+export declare class RadioGroupManager {
+    private static _radiosRequestingReset;
+    /**
+     * Returns an array of IRadioComponents that belong to the same radio group as the given
+     * IRadioComponent.
+     * If the given IRadioComponent does not have an associated form element, it searches the root
+     * node for all IRadioComponents with the same name.
+     * If the given IRadioComponent has an associated form element, it gets all RadioComponents with
+     * the same name from the form element.
+     *
+     * @param el - The IRadioComponent to get the radio group for.
+     * @returns An array of IRadioComponents that belong to the same radio group as the given
+     * IRadioComponent.
+     */
+    static getRadioGroup(el: IRadioComponent): IRadioComponent[];
+    /**
+     * Sets the validity of a radio group.
+     * If no radio is selected in the group and selection is required, it sets the validity to
+     * `valueMissing`.
+     *
+     * @param el A radio component within the group to set the validity for.
+     */
+    static setRadioGroupValidity(el: IRadioComponent): void;
+    /**
+     * Sets the selected radio in a radio group.
+     *
+     * @param el - The radio component to set as selected.
+     */
+    static setSelectedRadioInGroup(el: IRadioComponent): void;
+    /**
+     * Focuses the next radio in the radio group.
+     *
+     * @param el - The currently focused radio component.
+     */
+    static focusNextRadioInGroup(el: IRadioComponent): void;
+    /**
+     * Focuses the previous radio in the radio group.
+     *
+     * @param el - The currently focused radio component.
+     */
+    static focusPreviousRadioInGroup(el: IRadioComponent): void;
+    /**
+     * Adds or removes each radio in a radio group from the tab order. When no radio is selected and
+     * focus is not in the group, all radios are added to the tab order. Otherwise only the selected
+     * radio is added to the tab order.
+     *
+     * @param el - The focused or blurred radio component.
+     * @param event - The event type (`'focus'` or `'blur'`).
+     */
+    static setUncheckedRadioGroupFocus(el: IRadioComponent, event: 'focus' | 'blur'): void;
+    /**
+     * Resets a radio group to . This will run once each radio has a chance to
+     * update.
+     *
+     * @param el - The radio component requesting the reset.
+     * @returns A promise that resolves when the reset logic is complete.
+     */
+    static requestRadioGroupReset(el: IRadioComponent): Promise<void>;
+    /**
+     * Updates the focus and selection of a radio group based on the currently focused radio and the
+     * direction of the focus change.
+     *
+     * @param el - The currently focused radio element.
+     * @param increment - The direction of the focus change. 1 for forward, -1 for backward.
+     */
+    private static _updateRadioGroupFocus;
+    /**
+     * Determines if a radio selection is required within a group.
+     *
+     * @param group - The radio components within a group.
+     * @returns True if the radio selection is required, false otherwise.
+     */
+    private static _selectionIsRequired;
+}

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

@@ -0,0 +1,201 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getValidationMessage, internals, isFocusable, setDefaultAria } from '../../constants';
+import { task } from '../../core/utils/event-utils';
+import { RADIO_CONSTANTS, tryCheck } from '../radio';
+/**
+ * A class for coordinating the states of radio components within a radio group.
+ */
+export class RadioGroupManager {
+    /**
+     * Returns an array of IRadioComponents that belong to the same radio group as the given
+     * IRadioComponent.
+     * If the given IRadioComponent does not have an associated form element, it searches the root
+     * node for all IRadioComponents with the same name.
+     * If the given IRadioComponent has an associated form element, it gets all RadioComponents with
+     * the same name from the form element.
+     *
+     * @param el - The IRadioComponent to get the radio group for.
+     * @returns An array of IRadioComponents that belong to the same radio group as the given
+     * IRadioComponent.
+     */
+    static getRadioGroup(el) {
+        // 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();
+            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);
+        if (formRadios && Object.prototype.isPrototypeOf.call(RadioNodeList.prototype, formRadios)) {
+            return Array.from(formRadios)
+                .filter((radio) => radio.matches(RADIO_CONSTANTS.elementName));
+        }
+        return [el];
+    }
+    /**
+     * Sets the validity of a radio group.
+     * If no radio is selected in the group and selection is required, it sets the validity to
+     * `valueMissing`.
+     *
+     * @param el A radio component within the group to set the validity for.
+     */
+    static setRadioGroupValidity(el) {
+        const group = RadioGroupManager.getRadioGroup(el);
+        const invalid = RadioGroupManager._selectionIsRequired(group);
+        group.forEach(radio => {
+            const validationMessage = radio[getValidationMessage]({
+                required: invalid,
+                checked: radio.checked
+            });
+            radio[internals].setValidity({ valueMissing: invalid }, validationMessage);
+            radio[setDefaultAria]({ 'ariaInvalid': invalid ? 'true' : 'false' });
+        });
+    }
+    /**
+     * Sets the selected radio in a radio group.
+     *
+     * @param el - The radio component to set as selected.
+     */
+    static setSelectedRadioInGroup(el) {
+        const group = RadioGroupManager.getRadioGroup(el);
+        group.forEach(radio => radio.checked = radio === el);
+    }
+    /**
+     * Focuses the next radio in the radio group.
+     *
+     * @param el - The currently focused radio component.
+     */
+    static focusNextRadioInGroup(el) {
+        RadioGroupManager._updateRadioGroupFocus(el, 1);
+    }
+    /**
+     * Focuses the previous radio in the radio group.
+     *
+     * @param el - The currently focused radio component.
+     */
+    static focusPreviousRadioInGroup(el) {
+        RadioGroupManager._updateRadioGroupFocus(el, -1);
+    }
+    /**
+     * Adds or removes each radio in a radio group from the tab order. When no radio is selected and
+     * focus is not in the group, all radios are added to the tab order. Otherwise only the selected
+     * radio is added to the tab order.
+     *
+     * @param el - The focused or blurred radio component.
+     * @param event - The event type (`'focus'` or `'blur'`).
+     */
+    static setUncheckedRadioGroupFocus(el, event) {
+        const group = RadioGroupManager.getRadioGroup(el);
+        if (event === 'focus') {
+            group.forEach(radio => radio[isFocusable] = radio === el);
+            return;
+        }
+        if (!el.checked || group[0] === el || group[group.length - 1] === el) {
+            group.forEach(radio => radio[isFocusable] = true);
+        }
+    }
+    /**
+     * Resets a radio group to . This will run once each radio has a chance to
+     * update.
+     *
+     * @param el - The radio component requesting the reset.
+     * @returns A promise that resolves when the reset logic is complete.
+     */
+    static async requestRadioGroupReset(el) {
+        this._radiosRequestingReset.add(el);
+        // Wait for any other radios in the group to request a reset. The reset logic should only run
+        // once per group
+        await task();
+        // If the radio has been removed from the set, its group has already been reset and we can
+        // skip it
+        if (!this._radiosRequestingReset.has(el)) {
+            return;
+        }
+        const group = RadioGroupManager.getRadioGroup(el);
+        let checkedRadio = null;
+        // The first loop removes each radio in the group from the set and stores the radio that should
+        // be checked, if any
+        group.forEach(radio => {
+            this._radiosRequestingReset.delete(radio);
+            if (radio.defaultChecked) {
+                checkedRadio = radio;
+            }
+        });
+        // The second loop sets the checked radio and sets each radio to be focusable if there is a no
+        // selection, or only the selected radio if there is
+        group.forEach(radio => {
+            radio.checked = radio === checkedRadio;
+            radio[isFocusable] = !checkedRadio || radio.checked;
+        });
+    }
+    /**
+     * Updates the focus and selection of a radio group based on the currently focused radio and the
+     * direction of the focus change.
+     *
+     * @param el - The currently focused radio element.
+     * @param increment - The direction of the focus change. 1 for forward, -1 for backward.
+     */
+    static _updateRadioGroupFocus(el, increment) {
+        const group = RadioGroupManager.getRadioGroup(el);
+        // Get the next enabled and writable radio in the group
+        let index = group.indexOf(el);
+        let nextRadio = group[index];
+        do {
+            index += increment;
+            if (index < 0) {
+                index = group.length - 1;
+            }
+            else if (index >= group.length) {
+                index = 0;
+            }
+            nextRadio = group[index];
+            if (nextRadio === el) {
+                return;
+            }
+        } while (nextRadio.disabled || nextRadio.readonly);
+        // Attempt to check the next radio, return if the event is cancelled
+        if (!nextRadio[tryCheck]()) {
+            return;
+        }
+        // Add the next radio to the tab order, and focus it
+        nextRadio[isFocusable] = true;
+        nextRadio.focus();
+        // Remove every other radio from the tab order and deselect it
+        group.forEach(radio => {
+            if (radio === nextRadio) {
+                return;
+            }
+            radio[isFocusable] = false;
+            radio.checked = false;
+        });
+    }
+    /**
+     * Determines if a radio selection is required within a group.
+     *
+     * @param group - The radio components within a group.
+     * @returns True if the radio selection is required, false otherwise.
+     */
+    static _selectionIsRequired(group) {
+        let required = false;
+        let selection = false;
+        group.forEach(radio => {
+            if (radio.required) {
+                required = true;
+            }
+            if (radio.checked) {
+                selection = true;
+            }
+        });
+        return required && !selection;
+    }
+}
+RadioGroupManager._radiosRequestingReset = new WeakSet();

package/esm/radio/index.d.ts

@@ -3,6 +3,5 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './radio-constants';
 export * from './radio';
-export declare function defineRadioComponent(): void;
+export * from './radio-group';

package/esm/radio/index.js

@@ -3,10 +3,5 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { defineCustomElement } from '@tylertech/forge-core';
-import { RadioComponent } from './radio';
-export * from './radio-constants';
 export * from './radio';
-export function defineRadioComponent() {
-    defineCustomElement(RadioComponent);
-}
+export * from './radio-group';

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './radio-adapter';
+export * from './radio-constants';
+export * from './radio-foundation';
+export * from './radio';
+export declare function defineRadioComponent(): void;

package/esm/radio/radio/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { RadioComponent } from './radio';
+export * from './radio-adapter';
+export * from './radio-constants';
+export * from './radio-foundation';
+export * from './radio';
+export function defineRadioComponent() {
+    defineCustomElement(RadioComponent);
+}

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

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../../core/base/';
+import { IRadioComponent } from './radio';
+import { RadioLabelPosition } from './radio-constants';
+export interface IRadioAdapter extends IBaseAdapter {
+    setChecked(checked: boolean, value: string): void;
+    trySetDisabled(value: boolean): boolean;
+    setRequired(value: boolean): void;
+    setReadonly(value: boolean): void;
+    setLabelPosition(value: RadioLabelPosition): void;
+    disableStateLayer(value: boolean): void;
+    setUncheckedRadioGroupFocus(event: 'focus' | 'blur'): void;
+    focusNext(): void;
+    focusPrevious(): void;
+}
+export declare class RadioAdapter extends BaseAdapter<IRadioComponent> implements IRadioAdapter {
+    private readonly _rootElement;
+    private readonly _labelElement;
+    private readonly _stateLayerElement;
+    constructor(component: IRadioComponent);
+    setChecked(checked: boolean, value: string): void;
+    /**
+     * Attempts to set the disabled state of the radio. If the radio is in a disabled radio group, it
+     * can't be enabled.
+     *
+     * @param value Whether the radio should be disabled.
+     * @returns Whether the disabled state was set.
+     */
+    trySetDisabled(value: boolean): boolean;
+    setRequired(value: boolean): void;
+    setReadonly(value: boolean): void;
+    disableStateLayer(value: boolean): void;
+    setLabelPosition(value: RadioLabelPosition): void;
+    setUncheckedRadioGroupFocus(event: 'focus' | 'blur'): void;
+    focusNext(): void;
+    focusPrevious(): void;
+}

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

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { internals, isFocusable, setDefaultAria } from '../../constants';
+import { BaseAdapter } from '../../core/base/';
+import { RadioGroupManager } from '../core/radio-group-manager';
+import { RADIO_CONSTANTS } from './radio-constants';
+export class RadioAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(component, RADIO_CONSTANTS.selectors.ROOT);
+        this._labelElement = getShadowElement(component, RADIO_CONSTANTS.selectors.LABEL);
+        this._stateLayerElement = getShadowElement(component, RADIO_CONSTANTS.selectors.STATE_LAYER);
+    }
+    setChecked(checked, value) {
+        this._component[setDefaultAria]({ ariaChecked: checked ? 'true' : 'false' });
+        if (checked) {
+            RadioGroupManager.setSelectedRadioInGroup(this._component);
+        }
+        // Update the form value, state, and validity
+        const formValue = checked ? value : null;
+        const formState = checked ? 'checked' : 'unchecked';
+        this._component[internals].setFormValue(formValue, formState);
+        RadioGroupManager.setRadioGroupValidity(this._component);
+    }
+    /**
+     * Attempts to set the disabled state of the radio. If the radio is in a disabled radio group, it
+     * can't be enabled.
+     *
+     * @param value Whether the radio should be disabled.
+     * @returns Whether the disabled state was set.
+     */
+    trySetDisabled(value) {
+        const group = this._component.closest('forge-radio-group');
+        if (!value && group && group.disabled) {
+            return false;
+        }
+        this._component[setDefaultAria]({ ariaDisabled: `${!!value}` });
+        this._component[isFocusable] = !value;
+        return true;
+    }
+    setRequired(value) {
+        this._component[setDefaultAria]({
+            ariaRequired: value ? 'true' : 'false'
+        }, { setAttribute: true });
+        RadioGroupManager.setRadioGroupValidity(this._component);
+    }
+    setReadonly(value) {
+        this._component[setDefaultAria]({ ariaDisabled: `${!!value}` });
+    }
+    disableStateLayer(value) {
+        this._stateLayerElement.disabled = value;
+    }
+    setLabelPosition(value) {
+        this._labelElement.remove();
+        if (value === 'start') {
+            this._rootElement.prepend(this._labelElement);
+        }
+        else {
+            this._rootElement.append(this._labelElement);
+        }
+    }
+    setUncheckedRadioGroupFocus(event) {
+        RadioGroupManager.setUncheckedRadioGroupFocus(this._component, event);
+    }
+    focusNext() {
+        RadioGroupManager.focusNextRadioInGroup(this._component);
+    }
+    focusPrevious() {
+        RadioGroupManager.focusPreviousRadioInGroup(this._component);
+    }
+}