@tylertech/forge 3.5.1 → 3.6.0

package/sass/core/styles/tokens/checkbox/_tokens.scss

@@ -38,6 +38,7 @@ $tokens: (
   // Label
   gap: utils.module-val(checkbox, gap, 0),
   justify: utils.module-val(checkbox, justify, start),
+  align: utils.module-val(checkbox, align, center),
   direction: utils.module-val(checkbox, direction, initial),
   // State layer
   state-layer-width: utils.module-ref(checkbox, state-layer-width, state-layer-size),

package/sass/core/styles/tokens/radio/_tokens.scss

@@ -33,6 +33,7 @@ $tokens: (
   // Label
   gap: utils.module-val(radio, gap, 0),
   justify: utils.module-val(radio, justify, start),
+  align: utils.module-val(radio, align, center),
   direction: utils.module-val(radio, direction, initial),
   // State layer
   state-layer-width: utils.module-ref(radio, state-layer-width, state-layer-size),

package/sass/core/styles/tokens/switch/_tokens.scss

@@ -52,6 +52,7 @@ $tokens: (
   // Label
   gap: utils.module-val(switch, gap, 0),
   justify: utils.module-val(switch, justify, start),
+  align: utils.module-val(switch, align, center),
   direction: utils.module-val(switch, direction, initial),
   // State layer
   state-layer-width: utils.module-ref(switch, state-layer-width, state-layer-size),

package/sass/dialog/dialog.scss

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 @use './core' as *;
+@use '../utils/mixins' as utils;
 @use './animations';
 @use '../backdrop';
 @use '../core/styles/theme';
@@ -55,6 +56,10 @@ $can-animate: '[visible]:not([animation-type=none])';
     @include surface;
   }
 
+  .visually-hidden {
+    @include utils.visually-hidden;
+  }
+
   //
   // Backdrop
   //

package/sass/icon-button/icon-button.scss

@@ -131,49 +131,49 @@ forge-state-layer {
 // Toggle
 //
 
-:host(:is(:not([toggle]), [toggle]:not([on]))) {
+:host(:is(:not([toggle]), [toggle]:not([pressed]))) {
   slot[name='on'] {
     display: none;
   }
 }
 
-:host([toggle][on]) {
+:host([toggle][pressed]) {
   slot:not([name]) {
     display: none;
   }
 }
 
-:host([toggle][on]:is(:not([variant]), [variant='icon'])) {
+:host([toggle][pressed]:is(:not([variant]), [variant='icon'])) {
   .forge-icon-button {
     @include toggle-on-icon;
   }
 }
 
-:host([toggle][on][variant='outlined']) {
+:host([toggle][pressed][variant='outlined']) {
   .forge-icon-button {
     @include toggle-on-outlined;
   }
 }
 
-:host([toggle]:not([on])[variant='tonal']) {
+:host([toggle]:not([pressed])[variant='tonal']) {
   .forge-icon-button {
     @include toggle-tonal;
   }
 }
 
-:host([toggle][on][variant='tonal']) {
+:host([toggle][pressed][variant='tonal']) {
   .forge-icon-button {
     @include toggle-on-tonal;
   }
 }
 
-:host([toggle]:not([on]):is([variant='filled'], [variant='raised'])) {
+:host([toggle]:not([pressed]):is([variant='filled'], [variant='raised'])) {
   .forge-icon-button {
     @include toggle-filled;
   }
 }
 
-:host([toggle][on]:is([variant='filled'], [variant='raised'])) {
+:host([toggle][pressed]:is([variant='filled'], [variant='raised'])) {
   .forge-icon-button {
     @include toggle-on-filled;
   }
@@ -323,7 +323,7 @@ forge-state-layer {
     }
 
     // Toggle + tonal variant
-    :host([toggle]:not([on])[theme='#{$theme}'][variant='tonal']) {
+    :host([toggle]:not([pressed])[theme='#{$theme}'][variant='tonal']) {
       .forge-icon-button {
         @include override(background-color, theme.variable(#{$theme}-container), value);
       }
@@ -346,7 +346,7 @@ forge-state-layer {
     }
 
     // Toggle + filled & raised variants
-    :host([toggle]:not([on])[theme='#{$theme}']:is([variant='filled'], [variant='raised'])) {
+    :host([toggle]:not([pressed])[theme='#{$theme}']:is([variant='filled'], [variant='raised'])) {
       .forge-icon-button {
         @include override(icon-color, theme.variable($theme), value);
         @include override(background-color, theme.variable(#{$theme}-container), value);

package/sass/radio/radio/_core.scss

@@ -16,8 +16,7 @@
 @mixin radio {
   position: relative;
   flex-direction: #{token(direction)};
-  flex-shrink: 0;
-  align-items: center;
+  align-items: #{token(align)};
   justify-content: #{token(justify)};
   gap: #{token(gap)};
 
@@ -34,6 +33,7 @@
   justify-content: center;
 
   display: flex;
+  flex-shrink: 0;
 
   border-radius: #{token(shape)};
   inline-size: #{token(state-layer-width)};

package/sass/switch/_core.scss

@@ -36,8 +36,7 @@ $_handle-on-translate: calc(#{token(track-width)} - #{$_track-border-radius} * 2
   position: relative;
 
   flex-direction: #{token(direction)};
-  flex-shrink: 0;
-  align-items: center;
+  align-items: #{token(align)};
   justify-content: #{token(justify)};
   gap: #{token(gap)};
 }
@@ -65,6 +64,7 @@ $_handle-on-translate: calc(#{token(track-width)} - #{$_track-border-radius} * 2
   align-items: center;
 
   display: flex;
+  flex-shrink: 0;
 
   block-size: #{$_container-block-size};
 

package/sass/switch/switch.scss

@@ -81,7 +81,7 @@
 }
 
 // On
-:host([on]) {
+:host([checked]) {
   .track {
     @include track-on;
   }
@@ -127,7 +127,7 @@
     }
   }
 }
-:host(:not([disabled]):not([readonly])[on]) {
+:host(:not([disabled]):not([readonly])[checked]) {
   .forge-switch {
     .container:active {
       .track {

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

@@ -1,36 +0,0 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
-import { IAvatarComponent } from './avatar';
-export interface IAvatarAdapter extends IBaseAdapter {
-    setBackgroundImageUrl(url: string): Promise<boolean>;
-    removeBackgroundImage(): void;
-    setText(value: string): void;
-    clearText(): void;
-}
-/**
- * The DOM adapter behind the `<forge-avatar>` element.
- */
-export declare class AvatarAdapter extends BaseAdapter<IAvatarComponent> implements IAvatarAdapter {
-    private _root;
-    private _defaultSlot;
-    constructor(component: IAvatarComponent);
-    /**
-     * Sets the background image URL.
-     * @param url The URL.
-     */
-    setBackgroundImageUrl(url: string): Promise<boolean>;
-    /**
-     * Removes the background image URL.
-     */
-    removeBackgroundImage(): void;
-    /**
-     * Sets the avatar text content.
-     * @param value The text value.
-     */
-    setText(value: string): void;
-    clearText(): void;
-}

package/esm/avatar/avatar-adapter.js

@@ -1,55 +0,0 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { getShadowElement, removeAllChildren } from '@tylertech/forge-core';
-import { BaseAdapter } from '../core/base/base-adapter';
-import { AVATAR_CONSTANTS } from './avatar-constants';
-/**
- * The DOM adapter behind the `<forge-avatar>` element.
- */
-export class AvatarAdapter extends BaseAdapter {
-    constructor(component) {
-        super(component);
-        this._root = getShadowElement(this._component, AVATAR_CONSTANTS.selectors.ROOT);
-        this._defaultSlot = getShadowElement(this._component, AVATAR_CONSTANTS.selectors.DEFAULT_SLOT);
-    }
-    /**
-     * Sets the background image URL.
-     * @param url The URL.
-     */
-    async setBackgroundImageUrl(url) {
-        // Set before loading image to prevent a flash of background color
-        this._root.classList.add('forge-avatar--image');
-        return new Promise(resolve => {
-            const image = new Image();
-            image.onload = () => {
-                this._root.style.backgroundImage = `url(${image.src})`;
-                resolve(true);
-            };
-            image.onerror = () => {
-                this._root.classList.remove('forge-avatar--image');
-                resolve(false);
-            };
-            image.src = url;
-        });
-    }
-    /**
-     * Removes the background image URL.
-     */
-    removeBackgroundImage() {
-        this._root.style.removeProperty('background-image');
-        this._root.classList.remove('forge-avatar--image');
-    }
-    /**
-     * Sets the avatar text content.
-     * @param value The text value.
-     */
-    setText(value) {
-        this._defaultSlot.textContent = value;
-    }
-    clearText() {
-        removeAllChildren(this._defaultSlot);
-    }
-}

package/esm/avatar/avatar-core.d.ts

@@ -1,38 +0,0 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { IAvatarAdapter } from './avatar-adapter';
-export interface IAvatarCore {
-    imageUrl: string;
-    text: string;
-    letterCount: number;
-}
-export declare class AvatarCore implements IAvatarCore {
-    private _adapter;
-    private _imageUrl;
-    private _text;
-    private _letterCount;
-    private _initialized;
-    constructor(_adapter: IAvatarAdapter);
-    initialize(): void;
-    destroy(): void;
-    private _render;
-    private _setBackgroundImageUrl;
-    private _setText;
-    /**
-     * Gets the text content to display in the avatar.
-     * @param {string} value The text to parse.
-     */
-    private _getTextContent;
-    /** Gets/sets the text to display. */
-    get text(): string;
-    set text(value: string);
-    /** Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used. */
-    get letterCount(): number;
-    set letterCount(value: number);
-    /** Sets the background image URL to use. */
-    get imageUrl(): string;
-    set imageUrl(value: string);
-}

package/esm/avatar/avatar-core.js

@@ -1,101 +0,0 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { isDefined, isString } from '@tylertech/forge-core';
-import { AVATAR_CONSTANTS } from './avatar-constants';
-export class AvatarCore {
-    constructor(_adapter) {
-        this._adapter = _adapter;
-        this._text = '';
-        this._letterCount = AVATAR_CONSTANTS.numbers.DEFAULT_LETTER_COUNT;
-        this._initialized = false;
-    }
-    initialize() {
-        this._render();
-        this._initialized = true;
-    }
-    destroy() {
-        this._initialized = false;
-    }
-    _render() {
-        this._setText();
-        this._setBackgroundImageUrl();
-    }
-    async _setBackgroundImageUrl() {
-        if (this._imageUrl) {
-            if (await this._adapter.setBackgroundImageUrl(this._imageUrl)) {
-                this._adapter.clearText();
-            }
-        }
-        else {
-            this._adapter.removeBackgroundImage();
-        }
-    }
-    _setText() {
-        const data = this._getTextContent(this._text, this._letterCount);
-        if (data) {
-            this._adapter.setText(data);
-        }
-        else {
-            this._adapter.clearText();
-        }
-    }
-    /**
-     * Gets the text content to display in the avatar.
-     * @param {string} value The text to parse.
-     */
-    _getTextContent(value, count) {
-        if (!value || !isString(value) || count <= 0) {
-            return '';
-        }
-        let text;
-        if (count === 1) {
-            text = value[0].toUpperCase();
-        }
-        else {
-            const words = value.match(/\S+/g) || [];
-            text = words.slice(0, count).reduce((prev, curr) => (prev += curr[0].toUpperCase()), '');
-        }
-        return text;
-    }
-    /** Gets/sets the text to display. */
-    get text() {
-        return this._text;
-    }
-    set text(value) {
-        if (this._text !== value) {
-            this._text = value || '';
-            this._adapter.setHostAttribute(AVATAR_CONSTANTS.attributes.TEXT, this._text);
-            if (this._initialized) {
-                this._render();
-            }
-        }
-    }
-    /** Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used. */
-    get letterCount() {
-        return this._letterCount;
-    }
-    set letterCount(value) {
-        if (this._letterCount !== value) {
-            this._letterCount = value;
-            this._adapter.setHostAttribute(AVATAR_CONSTANTS.attributes.LETTER_COUNT, isDefined(this._letterCount) ? this._letterCount.toString() : '');
-            if (this._initialized) {
-                this._render();
-            }
-        }
-    }
-    /** Sets the background image URL to use. */
-    get imageUrl() {
-        return this._imageUrl;
-    }
-    set imageUrl(value) {
-        if (this._imageUrl !== value) {
-            this._imageUrl = value;
-            if (this._initialized) {
-                this._render();
-            }
-        }
-    }
-}