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

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

@@ -17,19 +17,13 @@ export class ProfileCardFoundation {
     initialize() {
         this._adapter.setProfileButtonListener(this._profileListener);
         this._adapter.setSignOutButtonListener(this._signOutListener);
-        if (this._showSignOutButton || this._showProfileButton) {
-            this._requestInitialFocus();
-        }
-        this._setActionVisibility();
-        this._adapter.setSignOutButtonText(this._signOutButtonText);
-        this._adapter.setProfileButtonText(this._profileButtonText);
     }
-    _requestInitialFocus() {
+    focus(options) {
         if (this._showSignOutButton) {
-            this._adapter.requestSignOutButtonFocus();
+            this._adapter.requestSignOutButtonFocus(Object.assign(Object.assign({}, options), { focusVisible: true }));
         }
         else if (this._showProfileButton) {
-            this._adapter.requestProfileButtonFocus();
+            this._adapter.requestProfileButtonFocus(Object.assign(Object.assign({}, options), { focusVisible: true }));
         }
     }
     _setActionVisibility() {
@@ -51,8 +45,12 @@ export class ProfileCardFoundation {
     }
     set fullName(value) {
         if (this._fullName !== value) {
-            this._fullName = value;
+            this._fullName = value !== null && value !== void 0 ? value : '';
             this._adapter.setFullName(this._fullName);
+            if (!this._avatarText) {
+                this._adapter.setAvatarText(this._fullName);
+            }
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.FULL_NAME, !!this._fullName, this._fullName);
         }
     }
     get email() {
@@ -60,8 +58,9 @@ export class ProfileCardFoundation {
     }
     set email(value) {
         if (this._email !== value) {
-            this._email = value;
+            this._email = value !== null && value !== void 0 ? value : '';
             this._adapter.setEmail(this._email);
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.EMAIL, !!this._email, this._email);
         }
     }
     get avatarText() {
@@ -69,8 +68,9 @@ export class ProfileCardFoundation {
     }
     set avatarText(value) {
         if (this._avatarText !== value) {
-            this._avatarText = value;
+            this._avatarText = value !== null && value !== void 0 ? value : '';
             this._adapter.setAvatarText(this._avatarText);
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_TEXT, !!this._avatarText, this._avatarText);
         }
     }
     get avatarIcon() {
@@ -78,8 +78,9 @@ export class ProfileCardFoundation {
     }
     set avatarIcon(value) {
         if (this._avatarIcon !== value) {
-            this._avatarIcon = value;
+            this._avatarIcon = value !== null && value !== void 0 ? value : '';
             this._adapter.setAvatarIcon(this._avatarIcon);
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_ICON, !!this._avatarIcon, this._avatarIcon);
         }
     }
     get avatarImageUrl() {
@@ -89,6 +90,7 @@ export class ProfileCardFoundation {
         if (this._avatarImageUrl !== value) {
             this._avatarImageUrl = value;
             this._adapter.setAvatarImageUrl(this._avatarImageUrl);
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_IMAGE_URL, !!this._avatarImageUrl, this._avatarImageUrl);
         }
     }
     get avatarLetterCount() {
@@ -98,24 +100,29 @@ export class ProfileCardFoundation {
         if (this._avatarLetterCount !== value) {
             this._avatarLetterCount = value;
             this._adapter.setAvatarLetterCount(this._avatarLetterCount);
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_LETTER_COUNT, !!this._avatarLetterCount, `${this._avatarLetterCount}`);
         }
     }
     get signOut() {
         return this._showSignOutButton;
     }
     set signOut(value) {
+        value = Boolean(value);
         if (this._showSignOutButton !== value) {
             this._showSignOutButton = value;
             this._setActionVisibility();
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT, this._showSignOutButton);
         }
     }
     get profile() {
         return this._showProfileButton;
     }
     set profile(value) {
+        value = Boolean(value);
         if (this._showProfileButton !== value) {
             this._showProfileButton = value;
             this._setActionVisibility();
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.PROFILE, this._showProfileButton);
         }
     }
     get signOutText() {
@@ -125,6 +132,8 @@ export class ProfileCardFoundation {
         if (this._signOutButtonText !== value) {
             this._signOutButtonText = value || PROFILE_CARD_CONSTANTS.defaults.SIGN_OUT_BUTTON_TEXT;
             this._adapter.setSignOutButtonText(this._signOutButtonText);
+            const hasSignOutTextAttr = this._signOutButtonText !== PROFILE_CARD_CONSTANTS.defaults.SIGN_OUT_BUTTON_TEXT;
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT_TEXT, hasSignOutTextAttr, this._signOutButtonText);
         }
     }
     get profileText() {
@@ -134,6 +143,8 @@ export class ProfileCardFoundation {
         if (this._profileButtonText !== value) {
             this._profileButtonText = value || PROFILE_CARD_CONSTANTS.defaults.PROFILE_BUTTON_TEXT;
             this._adapter.setProfileButtonText(this._profileButtonText);
+            const hasProfileAttr = value !== PROFILE_CARD_CONSTANTS.defaults.PROFILE_BUTTON_TEXT;
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.PROFILE_TEXT, hasProfileAttr, this._profileButtonText);
         }
     }
 }

package/esm/profile-card/profile-card.d.ts

@@ -26,8 +26,6 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-profile-card>` custom element.
- *
  * @tag forge-profile-card
  */
 export declare class ProfileCardComponent extends BaseComponent implements IProfileCardComponent {
@@ -46,4 +44,5 @@ export declare class ProfileCardComponent extends BaseComponent implements IProf
     avatarIcon: string;
     avatarImageUrl: string;
     avatarLetterCount: number;
+    focus(options?: FocusOptions): void;
 }

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

@@ -10,13 +10,12 @@ import { ProfileCardFoundation } from './profile-card-foundation';
 import { PROFILE_CARD_CONSTANTS } from './profile-card-constants';
 import { ButtonComponent } from '../button';
 import { AvatarComponent } from '../avatar';
+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=\"forge-profile-card__info\" part=\"info-container\"><div class=\"forge-profile-card__info-avatar\" part=\"avatar-container\"><forge-avatar part=\"avatar\"></forge-avatar></div><div class=\"forge-profile-card__info-text\" part=\"info-text\"><div class=\"forge-profile-card__full-name\" part=\"name\"></div><div class=\"forge-profile-card__email\" part=\"email\"></div></div></div><slot></slot><forge-toolbar inverted id=\"action-toolbar\" part=\"footer\"><forge-button type=\"outlined\" slot=\"end\" style=\"margin-right: 8px;\" part=\"profile-button\"><button type=\"button\" id=\"profile-button\" aria-label=\"View profile\" part=\"profile-button-element\">Profile</button></forge-button><forge-button slot=\"end\" part=\"sign-out-button\"><button type=\"button\" id=\"sign-out-button\" aria-label=\"Sign out\" part=\"sign-out-button-element\">Sign out</button></forge-button></forge-toolbar></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)}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);-webkit-transition:opacity 280ms cubic-bezier(.4, 0, .2, 1);transition:opacity 280ms cubic-bezier(.4, 0, .2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color,#fff)}.forge-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size, .875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, .0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:64px;border:none;outline:0;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle}.forge-button .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.forge-button::-moz-focus-inner{padding:0;border:0}.forge-button:active{outline:0}.forge-button:hover{cursor:pointer}.forge-button:disabled{cursor:default;pointer-events:none}.forge-button .forge-button__icon{margin-left:0;margin-right:8px;display:inline-block;font-size:1.125rem;height:1.125rem;vertical-align:top;width:1.125rem}.forge-button .forge-button__icon[dir=rtl],[dir=rtl] .forge-button .forge-button__icon{margin-left:8px;margin-right:0}.forge-button__label~.forge-button__icon{margin-left:8px;margin-right:0}.forge-button__label~.forge-button__icon[dir=rtl],[dir=rtl] .forge-button__label~.forge-button__icon{margin-left:0;margin-right:8px}svg.forge-button__icon{fill:currentColor}.forge-button--outlined .forge-button__icon,.forge-button--raised .forge-button__icon,.forge-button--unelevated .forge-button__icon{margin-left:-4px;margin-right:8px}.forge-button--outlined .forge-button__icon[dir=rtl],.forge-button--raised .forge-button__icon[dir=rtl],.forge-button--unelevated .forge-button__icon[dir=rtl],[dir=rtl] .forge-button--outlined .forge-button__icon,[dir=rtl] .forge-button--raised .forge-button__icon,[dir=rtl] .forge-button--unelevated .forge-button__icon{margin-left:8px;margin-right:-4px}.forge-button--outlined .forge-button__label~.forge-button__icon,.forge-button--raised .forge-button__label~.forge-button__icon,.forge-button--unelevated .forge-button__label~.forge-button__icon{margin-left:8px;margin-right:-4px}.forge-button--outlined .forge-button__label~.forge-button__icon[dir=rtl],.forge-button--raised .forge-button__label~.forge-button__icon[dir=rtl],.forge-button--unelevated .forge-button__label~.forge-button__icon[dir=rtl],[dir=rtl] .forge-button--outlined .forge-button__label~.forge-button__icon,[dir=rtl] .forge-button--raised .forge-button__label~.forge-button__icon,[dir=rtl] .forge-button--unelevated .forge-button__label~.forge-button__icon{margin-left:-4px;margin-right:8px}.forge-button{--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}.forge-button .forge-button__ripple::after,.forge-button .forge-button__ripple::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-button .forge-button__ripple::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)}.forge-button .forge-button__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-button.mdc-ripple-upgraded .forge-button__ripple::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-button.mdc-ripple-upgraded .forge-button__ripple::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-button.mdc-ripple-upgraded--unbounded .forge-button__ripple::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-button.mdc-ripple-upgraded--foreground-activation .forge-button__ripple::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}.forge-button.mdc-ripple-upgraded--foreground-deactivation .forge-button__ripple::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))}.forge-button .forge-button__ripple::after,.forge-button .forge-button__ripple::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-button.mdc-ripple-upgraded .forge-button__ripple::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-button .forge-button__ripple{position:absolute;-webkit-box-sizing:content-box;box-sizing:content-box;width:100%;height:100%;overflow:hidden}.forge-button:not(.forge-button--outlined) .forge-button__ripple{top:0;left:0}.forge-button--raised{-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-webkit-transition:-webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);transition:-webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1);transition:box-shadow 280ms cubic-bezier(.4, 0, .2, 1);transition:box-shadow 280ms cubic-bezier(.4, 0, .2, 1),-webkit-box-shadow 280ms cubic-bezier(.4, 0, .2, 1)}.forge-button--raised:focus,.forge-button--raised:hover{-webkit-box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.forge-button--raised:active{-webkit-box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.forge-button--raised:disabled{-webkit-box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}.forge-button--outlined{border-style:solid}.forge-button{height:36px;border-radius:4px;border-radius:var(--mdc-shape-small,4px);padding:0 8px 0 8px}.forge-button:not(:disabled){background-color:transparent}.forge-button:disabled{background-color:transparent}.forge-button:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-button .forge-button__ripple::after,.forge-button .forge-button__ripple::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button.mdc-ripple-surface--hover .forge-button__ripple::before,.forge-button:hover .forge-button__ripple::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-button.mdc-ripple-upgraded--background-focused .forge-button__ripple::before,.forge-button:not(.mdc-ripple-upgraded):focus .forge-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-button:not(.mdc-ripple-upgraded) .forge-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button:not(.mdc-ripple-upgraded):active .forge-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-button .forge-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button--unelevated{padding:0 16px 0 16px;height:36px;border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button--unelevated:not(:disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee)}.forge-button--unelevated:disabled{background-color:rgba(0,0,0,.38);background-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))}.forge-button--unelevated:not(:disabled){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-button--unelevated:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-button--unelevated .forge-button__ripple::after,.forge-button--unelevated .forge-button__ripple::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-button--unelevated.mdc-ripple-surface--hover .forge-button__ripple::before,.forge-button--unelevated:hover .forge-button__ripple::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-button--unelevated.mdc-ripple-upgraded--background-focused .forge-button__ripple::before,.forge-button--unelevated:not(.mdc-ripple-upgraded):focus .forge-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-button--unelevated:not(.mdc-ripple-upgraded) .forge-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button--unelevated:not(.mdc-ripple-upgraded):active .forge-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-button--unelevated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-button--unelevated .forge-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button--raised{padding:0 16px 0 16px;height:36px;border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button--raised:not(:disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee)}.forge-button--raised:disabled{background-color:rgba(0,0,0,.38);background-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))}.forge-button--raised:not(:disabled){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-button--raised:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-button--raised .forge-button__ripple::after,.forge-button--raised .forge-button__ripple::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-button--raised.mdc-ripple-surface--hover .forge-button__ripple::before,.forge-button--raised:hover .forge-button__ripple::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-button--raised.mdc-ripple-upgraded--background-focused .forge-button__ripple::before,.forge-button--raised:not(.mdc-ripple-upgraded):focus .forge-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-button--raised:not(.mdc-ripple-upgraded) .forge-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button--raised:not(.mdc-ripple-upgraded):active .forge-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-button--raised.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-button--raised .forge-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button--outlined{height:36px;border-radius:4px;border-radius:var(--mdc-shape-small,4px);padding:0 15px 0 15px;border-width:1px}.forge-button--outlined:not(:disabled){background-color:transparent}.forge-button--outlined:disabled{background-color:transparent}.forge-button--outlined:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-button--outlined:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-button--outlined .forge-button__ripple::after,.forge-button--outlined .forge-button__ripple::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button--outlined.mdc-ripple-surface--hover .forge-button__ripple::before,.forge-button--outlined:hover .forge-button__ripple::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-button--outlined.mdc-ripple-upgraded--background-focused .forge-button__ripple::before,.forge-button--outlined:not(.mdc-ripple-upgraded):focus .forge-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-button--outlined:not(.mdc-ripple-upgraded) .forge-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button--outlined:not(.mdc-ripple-upgraded):active .forge-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-button--outlined.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-button--outlined .forge-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button--outlined:not(:disabled){border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.forge-button--outlined:disabled{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))}.forge-button--outlined .forge-button__ripple{top:-1px;left:-1px;border:1px solid transparent}.forge-button--dense{height:24px;margin-top:0;margin-bottom:0;height:1.5rem}forge-button{display:inline-block}forge-button[hidden]{display:none}forge-button[disabled]{cursor:not-allowed}a.forge-hyperlink{color:#6200ee;color:var(--mdc-theme-primary,#6200ee);text-decoration:none}a.forge-hyperlink:visited{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}a.forge-hyperlink[disabled]{pointer-events:none;cursor:default}a.forge-hyperlink:focus,a.forge-hyperlink:hover:not([disabled]){text-decoration:underline}button.forge-hyperlink{color:#6200ee;color:var(--mdc-theme-primary,#6200ee);cursor:pointer;border:none;background-color:transparent;font-size:inherit;padding:0;outline:0;text-align:left}button.forge-hyperlink[disabled]{pointer-events:none;cursor:default}button.forge-hyperlink:hover:not([disabled]){text-decoration:underline}.forge-profile-card{min-width:360px;border-radius:4px}@media (max-width:399px){.forge-profile-card{width:100vw;min-width:unset;overflow:auto}}.forge-profile-card__info{padding:8px 16px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-profile-card__info-avatar{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:8px;margin-right:16px;--forge-avatar-size:56px}.forge-profile-card__info-text{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:start;align-items:flex-start}.forge-profile-card__full-name{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1rem;font-size:var(--forge-typography-subtitle1-secondary-font-size, 1rem);line-height:1.75rem;line-height:var(--forge-typography-subtitle1-secondary-line-height, 1.75rem);font-weight:500;font-weight:var(--forge-typography-subtitle1-secondary-font-weight,500);letter-spacing:.01em;letter-spacing:var(--forge-typography-subtitle1-secondary-letter-spacing, .01em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-subtitle1-secondary-text-decoration,inherit);text-decoration:var(--forge-typography-subtitle1-secondary-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-subtitle1-secondary-text-transform,inherit);line-height:1.25rem}.forge-profile-card__email{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size, .875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height, 1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, .0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}forge-toolbar#action-toolbar::part(root){border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host{display:inline}:host([hidden]){display:none}forge-toolbar{--mdc-theme-surface:var(--forge-theme-elevated-surface)}';
+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}';
 /**
- * The web component class behind the `<forge-profile-card>` custom element.
- *
  * @tag forge-profile-card
  */
 let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
@@ -51,16 +50,16 @@ let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
                 this.email = newValue;
                 break;
             case PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT:
-                this.signOut = coerceBoolean(PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT);
+                this.signOut = coerceBoolean(newValue);
                 break;
             case PROFILE_CARD_CONSTANTS.attributes.PROFILE:
-                this.profile = coerceBoolean(PROFILE_CARD_CONSTANTS.attributes.PROFILE);
+                this.profile = coerceBoolean(newValue);
                 break;
             case PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT_TEXT:
-                this.signOutText = PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT_TEXT;
+                this.signOutText = newValue;
                 break;
             case PROFILE_CARD_CONSTANTS.attributes.PROFILE_TEXT:
-                this.profileText = PROFILE_CARD_CONSTANTS.attributes.PROFILE_TEXT;
+                this.profileText = newValue;
                 break;
             case PROFILE_CARD_CONSTANTS.attributes.AVATAR_TEXT:
                 this.avatarText = newValue;
@@ -76,6 +75,9 @@ let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
                 break;
         }
     }
+    focus(options) {
+        this._foundation.focus(options);
+    }
 };
 __decorate([
     FoundationProperty()
@@ -113,6 +115,7 @@ ProfileCardComponent = __decorate([
         dependencies: [
             ToolbarComponent,
             ButtonComponent,
+            IconComponent,
             AvatarComponent
         ]
     })

package/esm/quantity-field/quantity-field-constants.js

@@ -25,8 +25,8 @@ const selectors = {
     ROOT: `.${classes.ROOT}`,
     INCREMENT_BUTTON_SLOT: `slot[name=${slots.INCREMENT_BUTTON}]`,
     DECREMENT_BUTTON_SLOT: `slot[name=${slots.DECREMENT_BUTTON}]`,
-    INCREMENT_BUTTON: `[slot=${slots.INCREMENT_BUTTON}] button, button[slot=${slots.INCREMENT_BUTTON}]`,
-    DECREMENT_BUTTON: `[slot=${slots.DECREMENT_BUTTON}] button, button[slot=${slots.DECREMENT_BUTTON}]`,
+    INCREMENT_BUTTON: `[slot=${slots.INCREMENT_BUTTON}], button[slot=${slots.INCREMENT_BUTTON}]`,
+    DECREMENT_BUTTON: `[slot=${slots.DECREMENT_BUTTON}], button[slot=${slots.DECREMENT_BUTTON}]`,
     TEXT_FIELD: 'forge-text-field',
     INPUT: 'input[type=number]',
     LABEL: `[slot=${slots.LABEL}]`,

package/esm/select/core/base-select-foundation.js

@@ -445,7 +445,9 @@ export class BaseSelectFoundation extends ListDropdownAwareFoundation {
         }, 300);
         this._options = this._adapter.getOptions();
         // TODO: Enhance this to cycle through closest matches (see the native select)
-        const matchedOption = this._flatOptions.find(option => !option.disabled && option.label.toLowerCase().startsWith(this._filterString.toLowerCase()));
+        const matchedOption = this._flatOptions.find(({ disabled, label }) => {
+            return !disabled && label.trim().toLowerCase().startsWith(this._filterString.trim().toLowerCase());
+        });
         if (matchedOption) {
             const optionIndex = this._flatOptions.indexOf(matchedOption);
             if (this._open) {

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

@@ -37,7 +37,7 @@ export interface ISliderAdapter extends IBaseAdapter {
     setStartAriaLabel(value: string | null): void;
     setEndAriaLabel(value: string | null): void;
 }
-export declare class SliderAdapter extends BaseAdapter<ISliderComponent> {
+export declare class SliderAdapter extends BaseAdapter<ISliderComponent> implements ISliderAdapter {
     private readonly _rootElement;
     private readonly _trackElement;
     private readonly _handleContainerElement;

package/esm/slider/slider-adapter.js

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { getShadowElement, toggleAttribute, toggleClass } from '@tylertech/forge-core';
+import { internals } from '../constants';
 import { BaseAdapter } from '../core/base/base-adapter';
 import { elementsOverlapping, isPointerOverElement } from '../core/utils/utils';
 import { STATE_LAYER_CONSTANTS } from '../state-layer';
@@ -87,10 +88,10 @@ export class SliderAdapter extends BaseAdapter {
             const data = new FormData();
             data.append(this._component.nameStart, String(valueStart));
             data.append(this._component.nameEnd, String(valueEnd));
-            this._component.internals.setFormValue(data);
+            this._component[internals].setFormValue(data);
         }
         else {
-            this._component.internals.setFormValue(String(valueEnd));
+            this._component[internals].setFormValue(String(valueEnd));
         }
     }
     setRange(value) {

package/esm/slider/slider-constants.js

@@ -59,9 +59,9 @@ const events = {
     CHANGE: 'forge-slider-change'
 };
 const cssCustomProperties = {
-    START_FRACTION: '--_start-fraction',
-    END_FRACTION: '--_end-fraction',
-    TICK_COUNT: '--_tick-count'
+    START_FRACTION: '--_slider-start-fraction',
+    END_FRACTION: '--_slider-end-fraction',
+    TICK_COUNT: '--_slider-tick-count'
 };
 const numbers = {
     DEFAULT_STEP: 1,

package/esm/slider/slider.d.ts

@@ -3,10 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { internals } from '../constants';
+import { BaseFormComponent, IBaseFormComponent } from '../core/base/base-form-component';
 import { SliderLabelBuilder, ISliderRangeEventData } from './slider-constants';
-export interface ISliderComponent extends IBaseComponent {
-    value: number;
+export interface ISliderComponent extends IBaseFormComponent<number> {
     valueStart: number;
     valueEnd: number;
     label: string;
@@ -19,14 +19,8 @@ export interface ISliderComponent extends IBaseComponent {
     range: boolean;
     tickmarks: boolean;
     labeled: boolean;
-    disabled: boolean;
-    readonly: boolean;
-    form: HTMLFormElement | null;
-    name: string;
     nameStart: string;
     nameEnd: string;
-    labels: NodeList;
-    internals: ElementInternals;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -129,7 +123,7 @@ declare global {
  * @csspart handle-start-label - Styles the start handle label element.
  * @csspart handle-start-label-content - Styles the start handle label content element.
  */
-export declare class SliderComponent extends BaseComponent implements ISliderComponent {
+export declare class SliderComponent extends BaseFormComponent<number> implements ISliderComponent {
     static get observedAttributes(): string[];
     static formAssociated: boolean;
     get form(): HTMLFormElement | null;
@@ -140,13 +134,14 @@ export declare class SliderComponent extends BaseComponent implements ISliderCom
     set nameStart(value: string);
     get nameEnd(): string;
     set nameEnd(value: string);
-    readonly internals: ElementInternals;
+    readonly [internals]: ElementInternals;
     private readonly _foundation;
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string | Array<[string, string]> | null): void;
+    formDisabledCallback(isDisabled: boolean): void;
     value: number;
     valueStart: number;
     valueEnd: number;

package/esm/slider/slider.js

@@ -5,14 +5,15 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, coerceNumber, CustomElement, FoundationProperty, toggleAttribute } from '@tylertech/forge-core';
-import { BaseComponent } from '../core/base/base-component';
+import { internals } from '../constants';
+import { BaseFormComponent } from '../core/base/base-form-component';
 import { FocusIndicatorComponent } from '../focus-indicator/focus-indicator';
 import { StateLayerComponent } from '../state-layer/state-layer';
 import { SliderAdapter } from './slider-adapter';
 import { SLIDER_CONSTANTS } from './slider-constants';
 import { SliderFoundation } from './slider-foundation';
-const template = '<template><div part=\"root\" class=\"forge-slider\"><input type=\"range\" class=\"end\" id=\"end\" min=\"0\" max=\"100\" step=\"1\" aria-valuetext=\"0\"><div class=\"track\" part=\"track\"></div><div class=\"handle-container-padded\"><div class=\"handle-container-block\"><div class=\"handle-container\"><div class=\"handle end\" part=\"handle-end\"><forge-state-layer exportparts=\"surface:state-layer__surface\" target=\"end\"></forge-state-layer><forge-focus-indicator exportparts=\"indicator:focus-indicator__indicator\" target=\"end\"></forge-focus-indicator><div class=\"handle-thumb\" part=\"handle-end-thumb\"></div><div class=\"handle-label\" part=\"handle-end-label\"><span class=\"handle-label-content\" part=\"handle-end-label-content\"></span></div></div></div></div></div></div></template>';
-const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-inline-size:100%}:host([hidden]){display:none}.forge-slider{--_start-fraction:0;--_end-fraction:0;--_tick-count:100;--_track-height:var(--forge-slider-track-height, 4px);--_active-track-color:var(--forge-slider-active-track-color, var(--forge-theme-primary, #3f51b5));--_active-track-height:var(--forge-slider-active-track-height, var(--_track-height));--_active-track-shape:var(--forge-slider-active-track-shape, var(--forge-shape-full, 9999px));--_disabled-active-track-color:var(--forge-slider-disabled-active-track-color, var(--forge-theme-surface-container-high, #9e9e9e));--_disabled-active-track-opacity:var(--forge-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color:var(--forge-slider-disabled-handle-color, var(--forge-theme-surface-container-high, #9e9e9e));--_disabled-inactive-track-color:var(--forge-slider-disabled-inactive-track-color, var(--forge-theme-surface-container-high, #9e9e9e));--_disabled-inactive-track-opacity:var(--forge-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color:var(--forge-slider-focus-handle-color, var(--forge-theme-primary, #3f51b5));--_handle-color:var(--forge-slider-handle-color, var(--forge-theme-primary, #3f51b5));--_handle-height:var(--forge-slider-handle-height, 20px);--_handle-shape:var(--forge-slider-handle-shape, var(--forge-shape-round, 50%));--_handle-width:var(--forge-slider-handle-width, 20px);--_hover-handle-color:var(--forge-slider-hover-handle-color, var(--forge-theme-primary, #3f51b5));--_inactive-track-color:var(--forge-slider-inactive-track-color, var(--forge-theme-primary-container, #d1d5ed));--_inactive-track-height:var(--forge-slider-inactive-track-height, var(--_track-height));--_inactive-track-shape:var(--forge-slider-inactive-track-shape, var(--forge-shape-full, 9999px));--_label-container-shape:var(--forge-slider-label-container-shape, var(--forge-shape-full, 9999px));--_label-container-color:var(--forge-slider-label-container-color, var(--forge-theme-primary, #3f51b5));--_label-container-height:var(--forge-slider-label-container-height, 28px);--_label-text-color:var(--forge-slider-label-text-color, var(--forge-theme-on-primary, #ffffff));--_pressed-handle-color:var(--forge-slider-pressed-handle-color, var(--forge-theme-primary, #3f51b5));--_state-layer-size:var(--forge-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color:var(--forge-slider-with-overlap-handle-outline-color, var(--forge-theme-on-primary, #ffffff));--_with-overlap-handle-outline-width:var(--forge-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color:var(--forge-slider-with-tick-marks-active-container-color, var(--forge-theme-on-primary, #ffffff));--_with-tick-marks-container-size:var(--forge-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-active-container-color:var(--forge-slider-with-tick-marks-disabled-active-container-color, var(--forge-theme-on-surface-container-high, #000000));--_with-tick-marks-disabled-inactive-container-color:var(--forge-slider-with-tick-marks-disabled-inactive-container-color, var(--forge-theme-on-surface-container-high, #000000));--_with-tick-marks-inactive-container-color:var(--forge-slider-with-tick-marks-inactive-container-color, var(--forge-theme-primary, #3f51b5));-webkit-box-flex:1;flex:1;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.forge-slider.range :host-context([dir=rtl]) input.start{-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))));clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))))}.forge-slider.range :host([dir=rtl]) input.start{-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))));clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))))}.forge-slider.range input.start:dir(rtl){-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))));clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))))}.forge-slider.range input.start{-webkit-clip-path:inset(0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))) 0 0);clip-path:inset(0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))) 0 0)}.forge-slider.range input.end{-webkit-clip-path:inset(0 0 0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)));clip-path:inset(0 0 0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)))}.forge-slider.range :host-context([dir=rtl]) input.end{-webkit-clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0);clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0)}.forge-slider.range :host([dir=rtl]) input.end{-webkit-clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0);clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0)}.forge-slider.range input.end:dir(rtl){-webkit-clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0);clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0)}.track{position:absolute;inset:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.track::after,.track::before{content:\"\";position:absolute;inset-inline-start:calc(var(--_state-layer-size)/ 2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/ 2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size) * 2)/ var(--_tick-count)) 100%}.track::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape);background-color:var(--_inactive-track-color)}.track::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)));background-color:var(--_active-track-color)}.track.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-inactive-container-color) 0,var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}.track.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-active-container-color) 0,var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}.handle-container-block,.handle-container-padded{position:relative;block-size:100%;inline-size:100%}.handle-container-padded{padding-inline:calc(var(--_state-layer-size)/ 2)}.handle-container{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100% * var(--_start-fraction));inline-size:calc(100% * (var(--_end-fraction) - var(--_start-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:grid;place-items:center}.handle.start{inset-inline-start:calc(0px - var(--_state-layer-size)/ 2)}.handle.end{inset-inline-end:calc(0px - var(--_state-layer-size)/ 2)}.handle-thumb{-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color)}.handle-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)));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);position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;padding:4px;place-items:center;border-radius:var(--_label-container-shape);color:var(--_label-text-color);font-weight:500;white-space:nowrap;inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);-webkit-transition:-webkit-transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:-webkit-transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1)),-webkit-transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform:scale(0);transform:scale(0)}.handle-label::after,.handle-label::before{content:\"\";position:absolute;display:block;background:inherit}.handle-label::before{inline-size:calc(var(--_label-container-height)/ 2);block-size:calc(var(--_label-container-height)/ 2);bottom:calc(var(--_label-container-height)/ -10);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.handle-label::after{inset:0;border-radius:inherit}.handle-label-content{z-index:1}.handle-container.hover .handle-thumb{background:var(--_hover-handle-color)}:host(:not([disabled])) input.end:active~.handle-container-padded .handle.end>.handle-thumb,:host(:not([disabled])) input.start:active~.handle-container-padded .handle.start>.handle-thumb{background:var(--_pressed-handle-color)}:host([disabled]) .handle-thumb{-webkit-box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);background:var(--_disabled-handle-color)}:host([disabled]) .handle-label{background:var(--_disabled-handle-color)}:host([disabled]) .track::before{opacity:calc(1 / var(--_disabled-active-track-opacity) * var(--_disabled-inactive-track-opacity));background-color:var(--_disabled-inactive-track-color)}:host([disabled]) .track::after{background-color:var(--_disabled-active-track-color)}:host([disabled]) .track.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-disabled-inactive-container-color) 0,var(--_with-tick-marks-disabled-inactive-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}:host([disabled]) .track.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-disabled-active-container-color) 0,var(--_with-tick-marks-disabled-active-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}:host([disabled]) input[type=range]{cursor:not-allowed}:host-context([dir=rtl]) .track::after{-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .track::after{-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.track:dir(rtl)::after{-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}input.end:focus~.handle-container-padded .handle.end>.handle-thumb,input.start:focus~.handle-container-padded .handle.start>.handle-thumb{background:var(--_focus-handle-color)}.on-top.overlapping .handle-label,.on-top.overlapping .handle-label::before,.on-top.overlapping .handle-thumb{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle-container.hover .handle-label,:host(:focus-within) .handle-label,:where(:has(input:active)) .handle-label{-webkit-transform:scale(1);transform:scale(1)}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;width:100%;margin:0;background:0 0;cursor:pointer;pointer-events:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none}input[type=range]::-moz-range-track{-moz-appearance:none;appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);-webkit-transform:scaleX(0);transform:scaleX(0);opacity:0;z-index:2}input[type=range]::-moz-range-thumb{-moz-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.on-top{z-index:1}@media (prefers-reduced-motion){.handle-label{-webkit-transition-duration:0;transition-duration:0}}forge-focus-indicator{--forge-focus-indicator-shape:50%;--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_handle-color)}';
+const template = '<template><div part=\"root\" class=\"forge-slider\"><input type=\"range\" class=\"end\" id=\"end\" min=\"0\" max=\"100\" step=\"1\" aria-valuetext=\"0\"><div class=\"track\" part=\"track\"></div><div class=\"handle-container-padded\"><div class=\"handle-container-block\"><div class=\"handle-container\"><div class=\"handle end\" part=\"handle-end\"><forge-state-layer exportparts=\"surface:state-layer\" target=\"end\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" target=\"end\"></forge-focus-indicator><div class=\"handle-thumb\" part=\"handle-end-thumb\"></div><div class=\"handle-label\" part=\"handle-end-label\"><span class=\"handle-label-content\" part=\"handle-end-label-content\"></span></div></div></div></div></div></div></template>';
+const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-inline-size:100%}:host([hidden]){display:none}.forge-slider{--_slider-start-fraction:0;--_slider-end-fraction:0;--_slider-tick-count:100;--_slider-track-height:var(--forge-slider-track-height, 4px);--_slider-active-track-color:var(--forge-slider-active-track-color, var(--forge-theme-primary, #3f51b5));--_slider-active-track-height:var(--forge-slider-active-track-height, var(--_slider-track-height));--_slider-active-track-shape:var(--forge-slider-active-track-shape, var(--forge-shape-full, 9999px));--_slider-disabled-active-track-color:var(--forge-slider-disabled-active-track-color, var(--forge-theme-surface-container-high, #9e9e9e));--_slider-disabled-active-track-opacity:var(--forge-slider-disabled-active-track-opacity, 0.38);--_slider-disabled-handle-color:var(--forge-slider-disabled-handle-color, var(--forge-theme-surface-container-high, #9e9e9e));--_slider-disabled-inactive-track-color:var(--forge-slider-disabled-inactive-track-color, var(--forge-theme-surface-container-high, #9e9e9e));--_slider-disabled-inactive-track-opacity:var(--forge-slider-disabled-inactive-track-opacity, 0.12);--_slider-focus-handle-color:var(--forge-slider-focus-handle-color, var(--forge-theme-primary, #3f51b5));--_slider-handle-color:var(--forge-slider-handle-color, var(--forge-theme-primary, #3f51b5));--_slider-handle-height:var(--forge-slider-handle-height, 20px);--_slider-handle-shape:var(--forge-slider-handle-shape, var(--forge-shape-round, 50%));--_slider-handle-width:var(--forge-slider-handle-width, 20px);--_slider-hover-handle-color:var(--forge-slider-hover-handle-color, var(--forge-theme-primary, #3f51b5));--_slider-inactive-track-color:var(--forge-slider-inactive-track-color, var(--forge-theme-primary-container, #d1d5ed));--_slider-inactive-track-height:var(--forge-slider-inactive-track-height, var(--_slider-track-height));--_slider-inactive-track-shape:var(--forge-slider-inactive-track-shape, var(--forge-shape-full, 9999px));--_slider-label-container-shape:var(--forge-slider-label-container-shape, var(--forge-shape-full, 9999px));--_slider-label-container-color:var(--forge-slider-label-container-color, var(--forge-theme-primary, #3f51b5));--_slider-label-container-height:var(--forge-slider-label-container-height, 28px);--_slider-label-text-color:var(--forge-slider-label-text-color, var(--forge-theme-on-primary, #ffffff));--_slider-pressed-handle-color:var(--forge-slider-pressed-handle-color, var(--forge-theme-primary, #3f51b5));--_slider-state-layer-size:var(--forge-slider-state-layer-size, 40px);--_slider-with-overlap-handle-outline-color:var(--forge-slider-with-overlap-handle-outline-color, var(--forge-theme-on-primary, #ffffff));--_slider-with-overlap-handle-outline-width:var(--forge-slider-with-overlap-handle-outline-width, 1px);--_slider-with-tick-marks-active-container-color:var(--forge-slider-with-tick-marks-active-container-color, var(--forge-theme-on-primary, #ffffff));--_slider-with-tick-marks-container-size:var(--forge-slider-with-tick-marks-container-size, 2px);--_slider-with-tick-marks-disabled-active-container-color:var(--forge-slider-with-tick-marks-disabled-active-container-color, var(--forge-theme-on-surface-container-high, #000000));--_slider-with-tick-marks-disabled-inactive-container-color:var(--forge-slider-with-tick-marks-disabled-inactive-container-color, var(--forge-theme-on-surface-container-high, #000000));--_slider-with-tick-marks-inactive-container-color:var(--forge-slider-with-tick-marks-inactive-container-color, var(--forge-theme-primary, #3f51b5))}.forge-slider{-webkit-box-flex:1;flex:1;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;block-size:var(--_slider-state-layer-size);pointer-events:none;touch-action:none}.forge-slider.range :host-context([dir=rtl]) input.start{-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))));clip-path:inset(0 0 0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))))}.forge-slider.range :host([dir=rtl]) input.start{-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))));clip-path:inset(0 0 0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))))}.forge-slider.range input.start:dir(rtl){-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))));clip-path:inset(0 0 0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))))}.forge-slider.range input.start{-webkit-clip-path:inset(0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))) 0 0);clip-path:inset(0 calc(100% - (var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2)))) 0 0)}.forge-slider.range input.end{-webkit-clip-path:inset(0 0 0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))));clip-path:inset(0 0 0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))))}.forge-slider.range :host-context([dir=rtl]) input.end{-webkit-clip-path:inset(0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))) 0 0);clip-path:inset(0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))) 0 0)}.forge-slider.range :host([dir=rtl]) input.end{-webkit-clip-path:inset(0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))) 0 0);clip-path:inset(0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))) 0 0)}.forge-slider.range input.end:dir(rtl){-webkit-clip-path:inset(0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))) 0 0);clip-path:inset(0 calc(var(--_slider-state-layer-size)/ 2 + (100% - var(--_slider-state-layer-size)) * (var(--_slider-start-fraction) + ((var(--_slider-end-fraction) - var(--_slider-start-fraction))/ 2))) 0 0)}.track{position:absolute;inset:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.track::after,.track::before{content:\"\";position:absolute;inset-inline-start:calc((var(--_slider-state-layer-size)/ 2) - var(--_slider-with-tick-marks-container-size));inset-inline-end:calc((var(--_slider-state-layer-size)/ 2) - var(--_slider-with-tick-marks-container-size));background-size:calc((100% - var(--_slider-with-tick-marks-container-size) * 2)/ var(--_slider-tick-count)) 100%}.track::before{block-size:var(--_slider-inactive-track-height);border-radius:var(--_slider-inactive-track-shape);background-color:var(--_slider-inactive-track-color)}.track::after{block-size:var(--_slider-active-track-height);border-radius:var(--_slider-active-track-shape);-webkit-clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)));clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)));background-color:var(--_slider-active-track-color)}.track.tickmarks::before{background-image:radial-gradient(circle at var(--_slider-with-tick-marks-container-size) center,var(--_slider-with-tick-marks-inactive-container-color) 0,var(--_slider-with-tick-marks-inactive-container-color) calc(var(--_slider-with-tick-marks-container-size)/ 2),transparent calc(var(--_slider-with-tick-marks-container-size)/ 2))}.track.tickmarks::after{background-image:radial-gradient(circle at var(--_slider-with-tick-marks-container-size) center,var(--_slider-with-tick-marks-active-container-color) 0,var(--_slider-with-tick-marks-active-container-color) calc(var(--_slider-with-tick-marks-container-size)/ 2),transparent calc(var(--_slider-with-tick-marks-container-size)/ 2))}.handle-container-block,.handle-container-padded{position:relative;block-size:100%;inline-size:100%}.handle-container-padded{padding-inline:calc(var(--_slider-state-layer-size)/ 2)}.handle-container{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100% * var(--_slider-start-fraction));inline-size:calc(100% * (var(--_slider-end-fraction) - var(--_slider-start-fraction)))}.handle{position:absolute;block-size:var(--_slider-state-layer-size);inline-size:var(--_slider-state-layer-size);border-radius:var(--_slider-handle-shape);display:grid;place-items:center}.handle.start{inset-inline-start:calc(0px - var(--_slider-state-layer-size)/ 2)}.handle.end{inset-inline-end:calc(0px - var(--_slider-state-layer-size)/ 2)}.handle-thumb{-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);position:absolute;height:var(--_slider-handle-height);width:var(--_slider-handle-width);border-radius:var(--_slider-handle-shape);background:var(--_slider-handle-color)}.handle-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)));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);position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;padding:4px;place-items:center;border-radius:var(--_slider-label-container-shape);color:var(--_slider-label-text-color);font-weight:500;white-space:nowrap;inset-block-end:100%;min-inline-size:var(--_slider-label-container-height);min-block-size:var(--_slider-label-container-height);background:var(--_slider-label-container-color);-webkit-transition:-webkit-transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:-webkit-transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1)),-webkit-transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform:scale(0);transform:scale(0)}.handle-label::after,.handle-label::before{content:\"\";position:absolute;display:block;background:inherit}.handle-label::before{inline-size:calc(var(--_slider-label-container-height)/ 2);block-size:calc(var(--_slider-label-container-height)/ 2);bottom:calc(var(--_slider-label-container-height)/ -10);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.handle-label::after{inset:0;border-radius:inherit}.handle-label-content{z-index:1}.handle-container.hover .handle-thumb{background:var(--_slider-hover-handle-color)}:host(:not([disabled])) input.end:active~.handle-container-padded .handle.end>.handle-thumb,:host(:not([disabled])) input.start:active~.handle-container-padded .handle.start>.handle-thumb{background:var(--_slider-pressed-handle-color)}:host([disabled]) .handle-thumb{-webkit-box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);background:var(--_slider-disabled-handle-color)}:host([disabled]) .handle-label{background:var(--_slider-disabled-handle-color)}:host([disabled]) .track::before{opacity:calc((1 / var(--_slider-disabled-active-track-opacity)) * var(--_slider-disabled-inactive-track-opacity));background-color:var(--_slider-disabled-inactive-track-color)}:host([disabled]) .track::after{background-color:var(--_slider-disabled-active-track-color)}:host([disabled]) .track.tickmarks::before{background-image:radial-gradient(circle at var(--_slider-with-tick-marks-container-size) center,var(--_slider-with-tick-marks-disabled-inactive-container-color) 0,var(--_slider-with-tick-marks-disabled-inactive-container-color) calc(var(--_slider-with-tick-marks-container-size)/ 2),transparent calc(var(--_slider-with-tick-marks-container-size)/ 2))}:host([disabled]) .track.tickmarks::after{background-image:radial-gradient(circle at var(--_slider-with-tick-marks-container-size) center,var(--_slider-with-tick-marks-disabled-active-container-color) 0,var(--_slider-with-tick-marks-disabled-active-container-color) calc(var(--_slider-with-tick-marks-container-size)/ 2),transparent calc(var(--_slider-with-tick-marks-container-size)/ 2))}:host([disabled]) input[type=range]{cursor:not-allowed}:host-context([dir=rtl]) .track::after{-webkit-clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))));clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))))}:host([dir=rtl]) .track::after{-webkit-clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))));clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))))}.track:dir(rtl)::after{-webkit-clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))));clip-path:inset(0 calc(calc(var(--_slider-with-tick-marks-container-size) * min(var(--_slider-start-fraction) * 1e9,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * var(--_slider-start-fraction)) 0 calc(calc(var(--_slider-with-tick-marks-container-size) * min((1 - var(--_slider-end-fraction)) * 1000000000,1)) + calc(100% - var(--_slider-with-tick-marks-container-size) * 2) * (1 - var(--_slider-end-fraction))))}input.end:focus~.handle-container-padded .handle.end>.handle-thumb,input.start:focus~.handle-container-padded .handle.start>.handle-thumb{background:var(--_slider-focus-handle-color)}.on-top.overlapping .handle-label,.on-top.overlapping .handle-label::before,.on-top.overlapping .handle-thumb{border:var(--_slider-with-overlap-handle-outline-color) solid var(--_slider-with-overlap-handle-outline-width)}.handle-container.hover .handle-label,:host(:focus-within) .handle-label,:where(:has(input:active)) .handle-label{-webkit-transform:scale(1);transform:scale(1)}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;width:100%;margin:0;background:0 0;cursor:pointer;pointer-events:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none}input[type=range]::-moz-range-track{-moz-appearance:none;appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_slider-state-layer-size);inline-size:var(--_slider-state-layer-size);-webkit-transform:scaleX(0);transform:scaleX(0);opacity:0;z-index:2}input[type=range]::-moz-range-thumb{-moz-appearance:none;appearance:none;block-size:var(--_slider-state-layer-size);inline-size:var(--_slider-state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.on-top{z-index:1}@media (prefers-reduced-motion){.handle-label{-webkit-transition-duration:0;transition-duration:0}}forge-focus-indicator{--forge-focus-indicator-shape:50%;--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_slider-handle-color)}';
 /**
  * @tag forge-slider
  *
@@ -105,7 +106,7 @@ const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-al
  * @csspart handle-start-label - Styles the start handle label element.
  * @csspart handle-start-label-content - Styles the start handle label content element.
  */
-let SliderComponent = class SliderComponent extends BaseComponent {
+let SliderComponent = class SliderComponent extends BaseFormComponent {
     static get observedAttributes() {
         return [
             SLIDER_CONSTANTS.attributes.ARIA_LABEL,
@@ -128,10 +129,10 @@ let SliderComponent = class SliderComponent extends BaseComponent {
         ];
     }
     get form() {
-        return this.internals.form;
+        return this[internals].form;
     }
     get labels() {
-        return this.internals.labels;
+        return this[internals].labels;
     }
     get name() {
         var _a;
@@ -157,7 +158,7 @@ let SliderComponent = class SliderComponent extends BaseComponent {
     constructor() {
         super();
         attachShadowTemplate(this, template, styles);
-        this.internals = this.attachInternals();
+        this[internals] = this.attachInternals();
         this._foundation = new SliderFoundation(new SliderAdapter(this));
     }
     connectedCallback() {
@@ -241,6 +242,9 @@ let SliderComponent = class SliderComponent extends BaseComponent {
         this.value = Number(state);
         this.range = false;
     }
+    formDisabledCallback(isDisabled) {
+        this.disabled = isDisabled;
+    }
 };
 SliderComponent.formAssociated = true;
 __decorate([

package/esm/split-button/index.d.ts

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

package/esm/split-button/index.js

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

package/esm/split-button/split-button-adapter.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ButtonTheme } from '../button';
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { ISplitButtonComponent } from './split-button';
+import { SplitButtonVariant } from './split-button-constants';
+export interface ISplitButtonAdapter extends IBaseAdapter {
+    setVariant(variant: SplitButtonVariant): void;
+    setTheme(theme: ButtonTheme): void;
+    setDisabled(value: boolean): void;
+    setDense(value: boolean): void;
+    setPill(value: boolean): void;
+    startButtonObserver(): void;
+    destroyButtonObserver(): void;
+}
+export declare class SplitButtonAdapter extends BaseAdapter<ISplitButtonComponent> implements ISplitButtonAdapter {
+    private _buttonChangeObserver;
+    constructor(component: ISplitButtonComponent);
+    startButtonObserver(): void;
+    destroyButtonObserver(): void;
+    setVariant(variant: SplitButtonVariant): void;
+    setTheme(theme: ButtonTheme): void;
+    setDisabled(value: boolean): void;
+    setDense(value: boolean): void;
+    setPill(value: boolean): void;
+    private _getButtons;
+}