@tylertech/forge 3.0.0-next.15 → 3.0.0-next.17

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.js

@@ -57,7 +57,7 @@ export class RadioGroupManager {
                 checked: radio.checked
             });
             radio[internals].setValidity({ valueMissing: invalid }, validationMessage);
-            radio[setDefaultAria]({ 'ariaInvalid': invalid ? 'true' : 'false' }, { overwrite: true });
+            radio[setDefaultAria]({ 'ariaInvalid': invalid ? 'true' : 'false' });
         });
     }
     /**

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

@@ -16,9 +16,7 @@ export class RadioAdapter extends BaseAdapter {
         this._stateLayerElement = getShadowElement(component, RADIO_CONSTANTS.selectors.STATE_LAYER);
     }
     setChecked(checked, value) {
-        this._component[setDefaultAria]({
-            ariaChecked: checked ? 'true' : 'false'
-        }, { overwrite: true });
+        this._component[setDefaultAria]({ ariaChecked: checked ? 'true' : 'false' });
         if (checked) {
             RadioGroupManager.setSelectedRadioInGroup(this._component);
         }
@@ -40,22 +38,18 @@ export class RadioAdapter extends BaseAdapter {
         if (!value && group && group.disabled) {
             return false;
         }
-        this._component[setDefaultAria]({
-            ariaDisabled: value ? 'true' : 'false'
-        }, { overwrite: true });
+        this._component[setDefaultAria]({ ariaDisabled: `${!!value}` });
         this._component[isFocusable] = !value;
         return true;
     }
     setRequired(value) {
         this._component[setDefaultAria]({
             ariaRequired: value ? 'true' : 'false'
-        }, { overwrite: true });
+        }, { setAttribute: true });
         RadioGroupManager.setRadioGroupValidity(this._component);
     }
     setReadonly(value) {
-        this._component[setDefaultAria]({
-            ariaDisabled: value ? 'true' : 'false'
-        }, { overwrite: true });
+        this._component[setDefaultAria]({ ariaDisabled: `${!!value}` });
     }
     disableStateLayer(value) {
         this._stateLayerElement.disabled = value;

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

@@ -3,7 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { ARIAAttribute } from '../../core/utils/a11y-utils';
 export declare const RADIO_CONSTANTS: {
     elementName: "forge-radio";
     attributes: {
@@ -26,7 +25,6 @@ export declare const RADIO_CONSTANTS: {
         CHANGE: string;
         INPUT: string;
     };
-    observedAriaAttributes: ARIAAttribute[];
 };
 /**
  * This symbol is used to attempt to check a radio while navigating between its siblings in a

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

@@ -4,7 +4,6 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
-import { supportsElementInternalsAria } from '../../core/utils/feature-detection';
 const elementName = `${COMPONENT_NAME_PREFIX}radio`;
 const attributes = {
     CHECKED: 'checked',
@@ -26,23 +25,11 @@ const events = {
     CHANGE: 'change',
     INPUT: 'input'
 };
-const observedAriaAttributes = supportsElementInternalsAria()
-    ? []
-    : [
-        'role',
-        'aria-checked',
-        'aria-disabled',
-        'aria-invalid',
-        'aria-label',
-        'aria-readonly',
-        'aria-required'
-    ];
 export const RADIO_CONSTANTS = {
     elementName,
     attributes,
     selectors,
-    events,
-    observedAriaAttributes
+    events
 };
 /**
  * This symbol is used to attempt to check a radio while navigating between its siblings in a

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

@@ -4,10 +4,15 @@
  * License: Apache-2.0
  */
 import { getFormState, getFormValue } from '../../constants';
-import { BaseComponent, IWithElementInternals, IWithFocusable, IWithFormAssociation, IWithLabelAwareness } from '../../core/base';
+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 { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
 import { FormValue } from '../../core/utils/form-utils';
 import { RadioLabelPosition, RadioState, tryCheck } from './radio-constants';
-export interface IRadioComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals {
+import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+export interface IRadioComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria {
     checked: boolean;
     defaultChecked: boolean;
     required: boolean;
@@ -19,7 +24,7 @@ declare global {
         'forge-radio': IRadioComponent;
     }
 }
-declare const BaseRadioClass: import("../../constants").AbstractConstructor<import("../../core/base").WithFormAssociationContract> & import("../../constants").AbstractConstructor<import("../../core/base").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/base").WithFocusableContract> & import("../../constants").AbstractConstructor<import("../../core/base").WithElementInternalsContract> & typeof BaseComponent;
+declare const BaseRadioClass: import("../../constants").AbstractConstructor<import("../../core/mixins/form/with-form-associated").WithFormAssociationContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/focus/with-focusable").WithFocusableContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
 /**
  * @tag forge-radio
  *

package/esm/radio/radio/radio.js

@@ -6,16 +6,21 @@
 import { __decorate } from "tslib";
 import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
 import { getFormState, getFormValue, inputType, internals, setDefaultAria } from '../../constants';
-import { BaseComponent, WithElementInternals, WithFocusable, WithFormAssociation, WithLabelAwareness } from '../../core/base';
+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 { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 import { StateLayerComponent } from '../../state-layer';
 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 style = ':host{display:inline-block}: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-state-layer-state-layer-unchecked-color, var(--_state-layer-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{--_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-state-layer-state-layer-unchecked-color, var(--_state-layer-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);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-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-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(WithElementInternals(BaseComponent, RADIO_CONSTANTS.observedAriaAttributes))));
+const style = ':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-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-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)))));
 /**
  * @tag forge-radio
  *
@@ -92,8 +97,7 @@ let RadioComponent = class RadioComponent extends BaseRadioClass {
             RADIO_CONSTANTS.attributes.REQUIRED,
             RADIO_CONSTANTS.attributes.READONLY,
             RADIO_CONSTANTS.attributes.LABEL_POSITION,
-            RADIO_CONSTANTS.attributes.TABINDEX,
-            ...RADIO_CONSTANTS.observedAriaAttributes
+            RADIO_CONSTANTS.attributes.TABINDEX
         ];
     }
     constructor() {
@@ -158,9 +162,7 @@ let RadioComponent = class RadioComponent extends BaseRadioClass {
         this.click();
     }
     labelChangedCallback(value) {
-        this[setDefaultAria]({
-            ariaLabel: value !== null && value !== void 0 ? value : undefined
-        });
+        this[setDefaultAria]({ ariaLabel: value });
     }
     [tryCheck]() {
         return this._foundation.tryCheck();

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

@@ -15,9 +15,7 @@ export class RadioGroupAdapter extends BaseAdapter {
         label.forElement = this._component;
     }
     setDisabled(value) {
-        this._component[setDefaultAria]({
-            ariaDisabled: value ? 'true' : null
-        }, { overwrite: true });
+        this._component[setDefaultAria]({ ariaDisabled: value ? 'true' : null });
         this._disableRadios(value);
     }
     _disableRadios(value) {

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

@@ -3,11 +3,9 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { ARIAAttribute } from '../../core/utils/a11y-utils';
 export declare const RADIO_GROUP_CONSTANTS: {
     elementName: "forge-radio-group";
     attributes: {
         DISABLED: string;
     };
-    observedAriaAttributes: ARIAAttribute[];
 };

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

@@ -4,16 +4,11 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
-import { supportsElementInternalsAria } from '../../core/utils/feature-detection';
 const elementName = `${COMPONENT_NAME_PREFIX}radio-group`;
 const attributes = {
     DISABLED: 'disabled'
 };
-const observedAriaAttributes = supportsElementInternalsAria()
-    ? []
-    : ['role', 'aria-disabled', 'aria-label'];
 export const RADIO_GROUP_CONSTANTS = {
     elementName,
-    attributes,
-    observedAriaAttributes
+    attributes
 };

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

@@ -3,8 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IWithElementInternals, IWithLabelAwareness } from '../../core/base';
-export interface IRadioGroupComponent extends IWithLabelAwareness, IWithElementInternals {
+import { BaseComponent } from '../../core/base/base-component';
+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';
+export interface IRadioGroupComponent extends IWithLabelAwareness, IWithElementInternals, IWithDefaultAria {
     readonly form: HTMLFormElement | null;
     readonly labels: NodeList;
     name: string;
@@ -16,7 +19,7 @@ declare global {
         'forge-radio-group': IRadioGroupComponent;
     }
 }
-declare const BaseRadioGroupClass: import("../../constants").AbstractConstructor<import("../../core/base").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/base").WithElementInternalsContract> & typeof BaseComponent;
+declare const BaseRadioGroupClass: import("../../constants").AbstractConstructor<import("../../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
 /**
  * @tag forge-radio-group
  *

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

@@ -6,12 +6,15 @@
 import { __decorate } from "tslib";
 import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean, toggleAttribute } from '@tylertech/forge-core';
 import { internals, setDefaultAria } from '../../constants';
-import { BaseComponent, WithElementInternals, WithLabelAwareness } from '../../core/base';
+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 { RadioGroupAdapter } from './radio-group-adapter';
 import { RADIO_GROUP_CONSTANTS } from './radio-group-constants';
 import { RadioGroupFoundation } from './radio-group-foundation';
 const template = '<template><slot></slot></template>';
-const BaseRadioGroupClass = WithLabelAwareness(WithElementInternals(BaseComponent, RADIO_GROUP_CONSTANTS.observedAriaAttributes));
+const BaseRadioGroupClass = WithLabelAwareness(WithDefaultAria(WithElementInternals(BaseComponent)));
 /**
  * @tag forge-radio-group
  *
@@ -58,7 +61,6 @@ let RadioGroupComponent = class RadioGroupComponent extends BaseRadioGroupClass
                 this.disabled = coerceBoolean(newValue);
                 break;
         }
-        super.attributeChangedCallback(name, oldValue, newValue);
     }
     formDisabledCallback(isDisabled) {
         this.disabled = isDisabled;

package/esm/slider/slider.d.ts

@@ -75,8 +75,8 @@ declare global {
  * @attribute {string} name-start - Controls the form control name for the start handle in range mode.
  * @attribute {string} name-end - Controls the form control name for the end handle in range mode.
  *
- * @event forge-slider-input {CustomEvent} - Dispatches when the slider value changes.
- * @event forge-slider-change {CustomEvent} - Dispatches when the slider value changes and the value has been committed.
+ * @event {CustomEvent} forge-slider-input - Dispatches when the slider value changes.
+ * @event {CustomEvent} forge-slider-change - Dispatches when the slider value changes and the value has been committed.
  *
  * @cssproperty --mdc-theme-primary - The primary color of the slider.
  * @cssproperty --mdc-theme-on-primary - The color of elements placed on top of the primary color (the label text for example).

package/esm/slider/slider.js

@@ -58,8 +58,8 @@ const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-al
  * @attribute {string} name-start - Controls the form control name for the start handle in range mode.
  * @attribute {string} name-end - Controls the form control name for the end handle in range mode.
  *
- * @event forge-slider-input {CustomEvent} - Dispatches when the slider value changes.
- * @event forge-slider-change {CustomEvent} - Dispatches when the slider value changes and the value has been committed.
+ * @event {CustomEvent} forge-slider-input - Dispatches when the slider value changes.
+ * @event {CustomEvent} forge-slider-change - Dispatches when the slider value changes and the value has been committed.
  *
  * @cssproperty --mdc-theme-primary - The primary color of the slider.
  * @cssproperty --mdc-theme-on-primary - The color of elements placed on top of the primary color (the label text for example).

package/esm/split-view/split-view-panel/split-view-panel.js

@@ -14,7 +14,7 @@ import { SplitViewPanelAdapter } from './split-view-panel-adapter';
 import { IconComponent, IconRegistry } from '../../icon';
 import { RippleComponent } from '../../ripple';
 const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-ripple id=\"ripple\" part=\"ripple\"></forge-ripple></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:8px;min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:um0dz26;animation-name:um0dz26;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes um0dz26{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes um0dz26{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:um0dz2n;animation-name:um0dz2n;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes um0dz2n{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes um0dz2n{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:um0dz39;animation-name:um0dz39;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes um0dz39{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes um0dz39{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:um0dz3o;animation-name:um0dz3o;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes um0dz3o{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes um0dz3o{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:um0dz4b;animation-name:um0dz4b;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes um0dz4b{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes um0dz4b{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:um0dz4k;animation-name:um0dz4k;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes um0dz4k{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes um0dz4k{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:um0dz4u;animation-name:um0dz4u;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes um0dz4u{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes um0dz4u{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:um0dz5u;animation-name:um0dz5u;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes um0dz5u{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes um0dz5u{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:8px;min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:u6ateim;animation-name:u6ateim;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes u6ateim{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes u6ateim{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:u6atej7;animation-name:u6atej7;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes u6atej7{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes u6atej7{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:u6atejh;animation-name:u6atejh;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes u6atejh{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes u6atejh{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:u6atejm;animation-name:u6atejm;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes u6atejm{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes u6atejm{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:u6atejz;animation-name:u6atejz;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes u6atejz{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes u6atejz{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:u6atekl;animation-name:u6atekl;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes u6atekl{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes u6atekl{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:u6atekp;animation-name:u6atekp;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes u6atekp{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes u6atekp{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:u6atel9;animation-name:u6atel9;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes u6atel9{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes u6atel9{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}';
 /**
  * The custom element class behind the `<forge-split-view-panel>` element.
  *