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

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

@@ -18,17 +18,14 @@ export class ProfileCardAdapter extends BaseAdapter {
         this._signOutButton = getShadowElement(component, PROFILE_CARD_CONSTANTS.selectors.SIGN_OUT_BUTTON);
     }
     setFullName(value) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.FULL_NAME, value);
         this._fullNameElement.textContent = value;
     }
     setEmail(value) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.EMAIL, value);
         this._emailElement.textContent = value;
     }
     setAvatarText(value) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_TEXT, value);
-        this._avatarElement.text = value;
         removeAllChildren(this._avatarElement);
+        this._avatarElement.text = value;
     }
     setAvatarIcon(value) {
         if (value) {
@@ -40,11 +37,9 @@ export class ProfileCardAdapter extends BaseAdapter {
         }
     }
     setAvatarImageUrl(value) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_IMAGE_URL, value);
         this._avatarElement.imageUrl = value;
     }
     setAvatarLetterCount(count) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_LETTER_COUNT, String(count));
         this._avatarElement.letterCount = count;
     }
     setActionToolbarVisibility(isVisible) {
@@ -83,16 +78,10 @@ export class ProfileCardAdapter extends BaseAdapter {
     setSignOutButtonListener(listener) {
         this._signOutButton.addEventListener('click', listener);
     }
-    removeProfileButtonListener(listener) {
-        this._profileButton.removeEventListener('click', listener);
-    }
-    removeSignOutButtonListener(listener) {
-        this._signOutButton.removeEventListener('click', listener);
-    }
-    requestProfileButtonFocus() {
-        window.requestAnimationFrame(() => this._profileButton.focus());
+    requestProfileButtonFocus(options) {
+        window.requestAnimationFrame(() => this._profileButton.focus(options));
     }
-    requestSignOutButtonFocus() {
-        window.requestAnimationFrame(() => this._signOutButton.focus());
+    requestSignOutButtonFocus(options) {
+        window.requestAnimationFrame(() => this._signOutButton.focus(options));
     }
 }

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

@@ -18,9 +18,9 @@ const attributes = {
     AVATAR_LETTER_COUNT: 'avatar-letter-count'
 };
 const selectors = {
-    FULL_NAME: '.forge-profile-card__full-name',
-    EMAIL: '.forge-profile-card__email',
-    AVATAR: '.forge-profile-card__info-avatar > forge-avatar',
+    FULL_NAME: '.full-name',
+    EMAIL: '.email',
+    AVATAR: '.avatar > forge-avatar',
     ACTION_TOOLBAR: '#action-toolbar',
     PROFILE_BUTTON: '#profile-button',
     SIGN_OUT_BUTTON: '#sign-out-button'

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

@@ -10,10 +10,13 @@ export interface IProfileCardFoundation extends ICustomElementFoundation {
     email: string;
     signOut: boolean;
     profile: boolean;
+    signOutText: string;
+    profileText: string;
     avatarText: string;
     avatarIcon: string;
     avatarImageUrl: string;
     avatarLetterCount: number;
+    focus(options?: FocusOptions): void;
 }
 export declare class ProfileCardFoundation implements IProfileCardFoundation {
     private _adapter;
@@ -31,7 +34,7 @@ export declare class ProfileCardFoundation implements IProfileCardFoundation {
     private _signOutListener;
     constructor(_adapter: IProfileCardAdapter);
     initialize(): void;
-    private _requestInitialFocus;
+    focus(options?: FocusOptions): void;
     private _setActionVisibility;
     private _onProfileButtonClick;
     private _onSignOutButtonClick;

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 variant=\"outlined\" slot=\"end\" style=\"margin-right: 8px;\" part=\"profile-button\" aria-label=\"View profile\" id=\"profile-button\">Profile</forge-button><forge-button slot=\"end\" part=\"sign-out-button\" id=\"sign-out-button\" aria-label=\"Sign out\">Sign out</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)}.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/slider/slider.js

@@ -12,7 +12,7 @@ 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\" target=\"end\"></forge-state-layer><forge-focus-indicator exportparts=\"indicator: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 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

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:unhj3zh;animation-name:unhj3zh;-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 unhj3zh{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes unhj3zh{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:unhj409;animation-name:unhj409;-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 unhj409{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes unhj409{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:unhj40p;animation-name:unhj40p;-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 unhj40p{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes unhj40p{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:unhj418;animation-name:unhj418;-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 unhj418{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes unhj418{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:unhj426;animation-name:unhj426;-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 unhj426{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes unhj426{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:unhj42f;animation-name:unhj42f;-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 unhj42f{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes unhj42f{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:unhj431;animation-name:unhj431;-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 unhj431{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes unhj431{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:unhj43v;animation-name:unhj43v;-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 unhj43v{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes unhj43v{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:uwzp5n0;animation-name:uwzp5n0;-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 uwzp5n0{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uwzp5n0{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:uwzp5np;animation-name:uwzp5np;-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 uwzp5np{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uwzp5np{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:uwzp5ob;animation-name:uwzp5ob;-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 uwzp5ob{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uwzp5ob{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:uwzp5oh;animation-name:uwzp5oh;-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 uwzp5oh{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uwzp5oh{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:uwzp5ou;animation-name:uwzp5ou;-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 uwzp5ou{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uwzp5ou{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:uwzp5ox;animation-name:uwzp5ox;-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 uwzp5ox{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uwzp5ox{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:uwzp5p7;animation-name:uwzp5p7;-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 uwzp5p7{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uwzp5p7{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:uwzp5ph;animation-name:uwzp5ph;-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 uwzp5ph{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uwzp5ph{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.
  *

package/esm/switch/switch.js

@@ -12,7 +12,7 @@ import { SwitchAdapter } from './switch-adapter';
 import { SWITCH_CONSTANTS } from './switch-constants';
 import { SwitchFoundation } from './switch-foundation';
 import { internals } from '../constants';
-const template = '<template><div class=\"forge-switch\" part=\"switch\"><div id=\"container\" class=\"container\"><slot name=\"input\"><input id=\"input\" class=\"input\" type=\"checkbox\" role=\"switch\"></slot><div class=\"track\" part=\"track\"></div><div class=\"handle\" part=\"handle\"><div id=\"icon-off\" class=\"icon icon__off\" part=\"icon-off\"><slot name=\"icon-off\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 13H4v-2h16v2z\"/></svg></slot></div><div id=\"icon-on\" class=\"icon icon__on\" part=\"icon-on\"><slot name=\"icon-on\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"/></svg></slot></div><forge-state-layer target=\"container\" exportparts=\"surface:state-layer\"></forge-state-layer></div><forge-focus-indicator target=\"container\" exportparts=\"indicator:focus-indicator\"></forge-focus-indicator></div><label id=\"label\" for=\"input\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
+const template = '<template><div class=\"forge-switch\" part=\"switch\"><div id=\"container\" class=\"container\"><slot name=\"input\"><input id=\"input\" class=\"input\" type=\"checkbox\" role=\"switch\"></slot><div class=\"track\" part=\"track\"></div><div class=\"handle\" part=\"handle\"><div id=\"icon-off\" class=\"icon icon__off\" part=\"icon-off\"><slot name=\"icon-off\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 13H4v-2h16v2z\"/></svg></slot></div><div id=\"icon-on\" class=\"icon icon__on\" part=\"icon-on\"><slot name=\"icon-on\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"/></svg></slot></div><forge-state-layer target=\"container\" exportparts=\"surface:state-layer\"></forge-state-layer></div><forge-focus-indicator target=\"container\" part=\"focus-indicator\"></forge-focus-indicator></div><label id=\"label\" for=\"input\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
 const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-handle-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, var(--forge-shape-round, 50%));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, var(--forge-shape-full, 9999px));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, space-between);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-state-layer-state-layer-off-color, var(--_state-layer-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_switch-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_switch-justify);justify-content:var(--_switch-justify);gap:var(--_switch-gap);display:-webkit-box;display:flex;--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;block-size:max(var(--_switch-handle-height),var(--_switch-track-height),var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{-webkit-transition-property:background-color,border-color,border-width;transition-property:background-color,border-color,border-width;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);-webkit-box-sizing:border-box;box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width),var(--_switch-current-state-layer-width))/ 2 - calc(var(--_switch-track-height)/ 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-transition-property:translate;transition-property:translate;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);-webkit-transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);-webkit-box-shadow:var(--_switch-handle-off-elevation);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:opacity,scale;transition-property:opacity,scale;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size:var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .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)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([on]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([on]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height)/ 2) * 2)}:host([on]) .handle::before{scale:var(--_switch-handle-on-scale);-webkit-box-shadow:var(--_switch-handle-on-elevation);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([on]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([on]) .handle .icon__off{opacity:0;scale:0.4}:host([on]) forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);-webkit-box-shadow:var(--_switch-handle-active-off-elevation);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);-webkit-box-shadow:var(--_switch-handle-active-on-elevation);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch{opacity:var(--_switch-disabled-opacity)}:host([disabled]) .forge-switch .container{cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{-webkit-box-shadow:none;box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media (prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_switch-track-shape);--forge-focus-indicator-outward-offset:0px}';
 /**
  * @tag forge-switch

package/esm/tabs/tab/tab.js

@@ -11,7 +11,7 @@ import { TAB_CONSTANTS } from './tab-constants';
 import { BaseComponent } from '../../core/base/base-component';
 import { FocusIndicatorComponent } from '../../focus-indicator/focus-indicator';
 import { StateLayerComponent } from '../../state-layer/state-layer';
-const template = '<template><div class=\"forge-tab\" part=\"container\"><span class=\"content\" part=\"content\"><slot name=\"leading\"></slot><span class=\"label\" part=\"label\"><slot></slot></span><slot name=\"trailing\"></slot><span class=\"indicator\" part=\"indicator\"></span></span><forge-state-layer exportparts=\"surface:state-layer\" target=\":host\"></forge-state-layer><forge-focus-indicator exportparts=\"indicator:focus-indicator\" target=\":host\" inward></forge-focus-indicator></div></template>';
+const template = '<template><div class=\"forge-tab\" part=\"container\"><span class=\"content\" part=\"content\"><slot name=\"leading\"></slot><span class=\"label\" part=\"label\"><slot></slot></span><slot name=\"trailing\"></slot><span class=\"indicator\" part=\"indicator\"></span></span><forge-state-layer exportparts=\"surface:state-layer\" target=\":host\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" target=\":host\" inward></forge-focus-indicator></div></template>';
 const styles = ':host{display:-webkit-inline-box;display:inline-flex;outline:0;-webkit-tap-highlight-color:transparent;vertical-align:middle}:host([hidden]){display:none}.forge-tab{--_tab-active-color:var(--forge-tab-active-color, var(--forge-theme-primary, #3f51b5));--_tab-inactive-color:var(--forge-tab-inactive-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_tab-height:var(--forge-tab-height, 48px);--_tab-stacked-height:var(--forge-tab-stacked-height, 64px);--_tab-disabled-opacity:var(--forge-tab-disabled-opacity, 0.38);--_tab-indicator-color:var(--forge-tab-indicator-color, var(--_tab-active-color));--_tab-indicator-height:var(--forge-tab-indicator-height, 3px);--_tab-indicator-shape:var(--forge-tab-indicator-shape, 3px 3px 0 0);--_tab-vertical-indicator-shape:var(--forge-tab-indicator-shape, 3px 0 0 3px);--_tab-secondary-indicator-height:var(--forge-tab-indicator-height, 2px);--_tab-secondary-indicator-shape:var(--forge-tab-indicator-shape, 0);--_tab-inverted-indicator-shape:var(--forge-tab-indicator-shape, 0 0 3px 3px);--_tab-vertical-inverted-indicator-shape:var(--forge-tab-indicator-shape, 0 3px 3px 0);--_tab-container-color:var(--forge-tab-container-color, transparent);--_tab-container-height:var(--forge-tab-container-height, var(--_tab-height));--_tab-container-shape:var(--forge-tab-container-shape, 0);--_tab-content-height:var(--forge-tab-content-height, var(--_tab-height));--_tab-content-padding:var(--forge-tab-content-padding, var(--forge-spacing-xxsmall, 4px));--_tab-active-focus-icon-color:var(--forge-tab-active-focus-icon-color, var(--_tab-active-color));--_tab-active-hover-icon-color:var(--forge-tab-active-hover-icon-color, var(--_tab-active-color));--_tab-active-icon-color:var(--forge-tab-active-icon-color, var(--_tab-active-color));--_tab-active-pressed-icon-color:var(--forge-tab-active-pressed-icon-color, var(--_tab-active-color));--_tab-icon-size:var(--forge-tab-icon-size, 24px);--_tab-focus-icon-color:var(--forge-tab-focus-icon-color, var(--_tab-inactive-color));--_tab-hover-icon-color:var(--forge-tab-hover-icon-color, var(--_tab-inactive-color));--_tab-icon-color:var(--forge-tab-icon-color, var(--_tab-inactive-color));--_tab-pressed-icon-color:var(--forge-tab-pressed-icon-color, var(--_tab-inactive-color));--_tab-active-focus-label-text-color:var(--forge-tab-active-focus-label-text-color, var(--_tab-active-color));--_tab-active-hover-label-text-color:var(--forge-tab-active-hover-label-text-color, var(--_tab-active-color));--_tab-active-label-text-color:var(--forge-tab-active-label-text-color, var(--_tab-active-color));--_tab-active-pressed-label-text-color:var(--forge-tab-active-pressed-label-text-color, var(--_tab-active-color));--_tab-focus-label-text-color:var(--forge-tab-focus-label-text-color, var(--_tab-inactive-color));--_tab-hover-label-text-color:var(--forge-tab-hover-label-text-color, var(--_tab-inactive-color));--_tab-label-text-color:var(--forge-tab-label-text-color, var(--_tab-inactive-color));--_tab-pressed-label-text-color:var(--forge-tab-pressed-label-text-color, var(--_tab-inactive-color))}.forge-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);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;border:none;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:0 0;text-decoration:none;width:100%;position:relative;padding:0;margin:0;z-index:0;background-color:var(--_tab-container-color);color:var(--_tab-label-text-color);min-height:var(--_tab-container-height)}.forge-tab::-moz-focus-inner{padding:0;border:0}.forge-tab ::slotted([slot=leading]),.forge-tab ::slotted([slot=trailing]){display:-webkit-inline-box;display:inline-flex;position:relative;-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr-tb;writing-mode:horizontal-tb;fill:currentColor;color:var(--_tab-icon-color);font-size:var(--_tab-icon-size);width:var(--_tab-icon-size);height:var(--_tab-icon-size)}.forge-tab:hover{color:var(--_tab-hover-label-text-color);cursor:pointer}.forge-tab:hover ::slotted([slot=leading]),.forge-tab:hover ::slotted([slot=trailing]){color:var(--_tab-hover-icon-color)}.forge-tab .content{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;white-space:nowrap;-webkit-transition:150ms color linear;transition:150ms color linear;max-height:calc(var(--_tab-content-height) + 2 * var(--_tab-content-padding));min-height:var(--_tab-content-height);padding:var(--_tab-content-padding) calc(2 * var(--_tab-content-padding));gap:var(--_tab-content-padding)}.forge-tab .content .label{display:inline-block;line-height:1}.forge-tab .indicator{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:-1;-webkit-transform-origin:bottom left;transform-origin:bottom left;background:var(--_tab-indicator-color);border-radius:var(--_tab-indicator-shape);height:var(--_tab-indicator-height);inset:auto 0 0;opacity:0}::slotted(*),:host{white-space:nowrap}forge-focus-indicator{--forge-focus-indicator-color:var(--_tab-active-color);--forge-focus-indicator-shape:8px}forge-state-layer{--forge-state-layer-color:var(--_tab-inactive-color)}:host(:focus) .forge-tab{color:var(--_tab-focus-label-text-color)}:host(:focus) .forge-tab ::slotted([slot=leading]),:host(:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-focus-icon-color)}:host(:active) .forge-tab{color:var(--_tab-pressed-label-text-color);outline:0}:host(:active) .forge-tab ::slotted([slot=leading]),:host(:active) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-pressed-icon-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .forge-tab{opacity:var(--_tab-disabled-opacity);pointer-events:none}:host([selected]) .forge-tab{color:var(--_tab-active-label-text-color)}:host([selected]) .forge-tab ::slotted([slot=leading]),:host([selected]) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-active-icon-color)}:host([selected]) .forge-tab:hover{color:var(--_tab-active-hover-label-text-color)}:host([selected]) .forge-tab:hover ::slotted([slot=leading]),:host([selected]) .forge-tab:hover ::slotted([slot=trailing]){color:var(--_tab-active-hover-icon-color)}:host([selected]) .forge-tab .indicator{opacity:1}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_tab-active-color)}:host([selected]:not([vertical])) forge-focus-indicator{--forge-focus-indicator-offset-block:0 calc(var(--_tab-indicator-height) + 1px)}:host([selected]:focus) .forge-tab{color:var(--_tab-active-focus-label-text-color)}:host([selected]:focus) .forge-tab ::slotted([slot=leading]),:host([selected]:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-active-focus-icon-color)}:host([selected]:active) .forge-tab{color:var(--_tab-active-pressed-label-text-color)}:host([selected]:active) .forge-tab ::slotted([slot=leading]),:host([selected]:active) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-active-pressed-icon-color)}:host([stacked]) .forge-tab{--_tab-height:var(--_tab-stacked-height)}:host([stacked]) .forge-tab .content{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}:host([secondary]) .forge-tab{--_tab-indicator-height:var(--_tab-secondary-indicator-height);--_tab-indicator-shape:var(--_tab-secondary-indicator-shape)}:host([secondary]) .content{width:100%}:host([secondary]) .indicator{min-width:100%}:host([vertical]) .forge-tab{width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom:none}:host([vertical]) .forge-tab .content{width:100%}:host([vertical]) .forge-tab .indicator{height:100%;min-width:var(--_tab-indicator-height);inset:0 0 0 auto}:host([vertical]) forge-focus-indicator{--forge-focus-indicator-offset-inline:0 calc(var(--_tab-indicator-height) + 1px)}:host([vertical][secondary]) .content{min-height:100%}:host([vertical]:not([secondary])) .forge-tab{--_tab-indicator-shape:var(--_tab-vertical-indicator-shape)}:host([inverted]) .forge-tab{--_tab-indicator-shape:var(--_tab-inverted-indicator-shape)}:host([inverted]) .indicator{inset:0 0 auto;-webkit-transform-origin:top left;transform-origin:top left}:host([inverted][vertical]) .forge-tab{--_tab-indicator-shape:var(--_tab-vertical-inverted-indicator-shape)}:host([inverted][vertical]) .indicator{inset:0 auto 0 0}';
 /**
  * @tag forge-tab

package/esm/toolbar/toolbar.js

@@ -8,7 +8,7 @@ import { CustomElement, attachShadowTemplate, getShadowElement, coerceBoolean }
 import { BaseComponent } from '../core/base/base-component';
 import { TOOLBAR_CONSTANTS } from './toolbar-constants';
 const template = '<template><div class=\"forge-toolbar\" part=\"root\"><div class=\"forge-toolbar__section forge-toolbar__section--align-start\" part=\"section-start\"><slot name=\"start\"></slot><slot></slot></div><div class=\"forge-toolbar__section forge-toolbar__section--align-center\" part=\"section-center\"><slot name=\"center\"></slot></div><div class=\"forge-toolbar__section forge-toolbar__section--align-end\" part=\"section-end\"><slot name=\"end\"></slot></div></div></template>';
-const styles = '.forge-toolbar{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);min-height:56px;min-height:var(--forge-toolbar-min-height,56px);height:56px;height:var(--forge-toolbar-height,56px);padding-inline:16px;padding-inline:var(--forge-toolbar-padding,16px);border-bottom:1px solid var(--forge-theme-border-color,rgba(0,0,0,.12));border-bottom:var(--forge-toolbar-border-bottom,1px solid var(--forge-theme-border-color,rgba(0,0,0,.12)));border-top-left-radius:0;border-top-left-radius:var(--forge-toolbar-border-top-left-radius,0);border-top-right-radius:0;border-top-right-radius:var(--forge-toolbar-border-top-right-radius,0);border-bottom-left-radius:0;border-bottom-left-radius:var(--forge-toolbar-border-bottom-left-radius,0);border-bottom-right-radius:0;border-bottom-right-radius:var(--forge-toolbar-border-bottom-right-radius,0);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);display:grid;grid-template-columns:auto 1fr auto;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-toolbar__section{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-toolbar__section--align-start{grid-column:1}.forge-toolbar__section--align-center{-webkit-box-pack:center;justify-content:center;grid-column:2}.forge-toolbar__section--align-end{-webkit-box-pack:end;justify-content:flex-end;grid-column:3}.forge-toolbar--inverted{border-top:1px solid var(--forge-theme-border-color,rgba(0,0,0,.12));border-top:var(--forge-toolbar-border-top,1px solid var(--forge-theme-border-color,rgba(0,0,0,.12)));border-bottom:none}:host{display:block;contain:layout}:host([hidden]){display:none}:host([no-border]) .forge-toolbar{border:none}:host([no-padding]) .forge-toolbar{padding-inline:0;padding-inline:var(--forge-toolbar-padding,0)}:host([auto-height]) .forge-toolbar{height:auto;height:var(--forge-toolbar-height,auto)}.forge-toolbar ::slotted(h1){margin:0}.forge-toolbar ::slotted(h2){margin:0}.forge-toolbar ::slotted(h3){margin:0}.forge-toolbar ::slotted(h4){margin:0}.forge-toolbar ::slotted(h5){margin:0}.forge-toolbar ::slotted(h6){margin:0}.forge-toolbar ::slotted(p){margin:0}';
+const styles = '.forge-toolbar{min-height:56px;min-height:var(--forge-toolbar-min-height,56px);height:56px;height:var(--forge-toolbar-height,56px);padding-inline:16px;padding-inline:var(--forge-toolbar-padding,16px);border-bottom:1px solid var(--forge-theme-border-color,rgba(0,0,0,.12));border-bottom:var(--forge-toolbar-border-bottom,1px solid var(--forge-theme-border-color,rgba(0,0,0,.12)));border-top-left-radius:0;border-top-left-radius:var(--forge-toolbar-border-top-left-radius,0);border-top-right-radius:0;border-top-right-radius:var(--forge-toolbar-border-top-right-radius,0);border-bottom-left-radius:0;border-bottom-left-radius:var(--forge-toolbar-border-bottom-left-radius,0);border-bottom-right-radius:0;border-bottom-right-radius:var(--forge-toolbar-border-bottom-right-radius,0);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);display:grid;grid-template-columns:auto 1fr auto;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-toolbar__section{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-toolbar__section--align-start{grid-column:1}.forge-toolbar__section--align-center{-webkit-box-pack:center;justify-content:center;grid-column:2}.forge-toolbar__section--align-end{-webkit-box-pack:end;justify-content:flex-end;grid-column:3}.forge-toolbar--inverted{border-top:1px solid var(--forge-theme-border-color,rgba(0,0,0,.12));border-top:var(--forge-toolbar-border-top,1px solid var(--forge-theme-border-color,rgba(0,0,0,.12)));border-bottom:none}:host{display:block;contain:layout}:host([hidden]){display:none}:host([no-border]) .forge-toolbar{border:none}:host([no-padding]) .forge-toolbar{padding-inline:0;padding-inline:var(--forge-toolbar-padding,0)}:host([auto-height]) .forge-toolbar{height:auto;height:var(--forge-toolbar-height,auto)}.forge-toolbar ::slotted(h1){margin:0}.forge-toolbar ::slotted(h2){margin:0}.forge-toolbar ::slotted(h3){margin:0}.forge-toolbar ::slotted(h4){margin:0}.forge-toolbar ::slotted(h5){margin:0}.forge-toolbar ::slotted(h6){margin:0}.forge-toolbar ::slotted(p){margin:0}';
 /**
  * The web component class behind the `<forge-toolbar>` custom element.
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.0.0-next.13",
+  "version": "3.0.0-next.14",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -30,7 +30,6 @@
     "@material/select": "^14.0.0",
     "@material/shape": "^14.0.0",
     "@material/theme": "^14.0.0",
-    "@material/top-app-bar": "^14.0.0",
     "@material/touch-target": "^14.0.0",
     "@material/typography": "^14.0.0",
     "@tylertech/forge-core": "^2.3.0",

package/styles/app-bar/app-bar/_configuration.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+$host-tokens: [background foreground];
+
+@mixin host-configuration {
+  @include tokens($includes: $host-tokens);
+}
+
+@mixin configuration {
+  @include tokens($excludes: $host-tokens);
+}