@tylertech/forge 3.5.1 → 3.6.0-dev.0

package/esm/tabs/tab-bar/tab-bar-core.js

@@ -29,7 +29,6 @@ export class TabBarCore {
         this._scrollForwardButtonListener = () => this._onScrollForward();
     }
     initialize() {
-        this._adapter.initialize();
         this._adapter.addSlotListener(this._tabsChangedListener);
         this._adapter.addHostListener(TAB_CONSTANTS.events.SELECT, this._tabSelectedListener);
         this._adapter.addHostListener('keydown', this._keydownListener);
@@ -43,7 +42,6 @@ export class TabBarCore {
         this._isInitialized = true;
     }
     destroy() {
-        this._adapter.destroy();
         this._adapter.destroyContainerSizeObserver();
         this._adapter.destroyScrollObserver(this._scrollListener);
         this._isInitialized = false;
@@ -54,7 +52,7 @@ export class TabBarCore {
         this._tryScrollActiveTabIntoView();
     }
     _onTabSelected(evt) {
-        this._selectTab(evt.target);
+        this._selectTab({ tab: evt.target, focusTab: true });
     }
     async _onKeydown(evt) {
         const orientation = this._vertical ? 'vertical' : 'horizontal';
@@ -91,14 +89,14 @@ export class TabBarCore {
             return;
         }
         if (this._autoActivate) {
-            this._selectTab(this._tabs[index]);
+            this._selectTab({ tab: this._tabs[index], focusTab: true });
         }
         else {
             this._tabs[index].focus({ preventScroll: true, focusVisible: true });
             await this._adapter.tryScrollTabIntoView(this._tabs[index]);
         }
     }
-    async _selectTab(tab, emitEvent = true) {
+    async _selectTab({ tab, emitEvent = true, focusTab = false }) {
         if (!tab || tab.disabled) {
             return;
         }
@@ -121,7 +119,9 @@ export class TabBarCore {
         }
         // Selecting a tab causes an animation of the indicator to start relative to the currently selected tab
         tab.selected = true;
-        tab.focus({ preventScroll: true });
+        if (focusTab) {
+            tab.focus({ preventScroll: true });
+        }
         await this._adapter.tryScrollTabIntoView(tab);
         // Always deselect the currently selected tab after selecting a new tab to allow
         // for the tab indicator animation to run properly (the newly selected tab attempts
@@ -223,7 +223,7 @@ export class TabBarCore {
             this._activeTab = value ?? undefined;
             if (typeof this._activeTab === 'number') {
                 const newSelectedTab = this._tabs[this._activeTab];
-                this._selectTab(newSelectedTab, false);
+                this._selectTab({ tab: newSelectedTab, emitEvent: false, focusTab: false });
                 this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, String(this._activeTab));
             }
             else {

package/esm/tabs/tab-bar/tab-bar.d.ts

@@ -5,7 +5,9 @@
  */
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 import { ITabBarChangeEventData } from './tab-bar-constants';
-export interface ITabBarComponent extends IBaseComponent {
+import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+export interface ITabBarComponent extends IBaseComponent, IWithDefaultAria, IWithElementInternals {
     disabled: boolean;
     activeTab: number | null | undefined;
     vertical: boolean;
@@ -25,6 +27,7 @@ declare global {
         'forge-tab-bar-change': CustomEvent<ITabBarChangeEventData>;
     }
 }
+declare const TabBarComponent_base: import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
 /**
  * @tag forge-tab-bar
  *
@@ -57,7 +60,6 @@ declare global {
  * @attribute {boolean} [secondary=false] - Deprecated. Controls whether the tabs are styled as secondary tab navigation.
  * @attribute {boolean} [auto-activate=false] - Controls whether the tabs are automatically activated when receiving focus.
  * @attribute {boolean} [scroll-buttons=false] - Controls whether scroll buttons are displayed when the tabs overflow their container.
- * @attribute {string} [data-aria-label] - The ARIA label to forward to the internal tablist element.
  *
  * @event {CustomEvent<ITabBarChangeEventData>} forge-tab-bar-change - Dispatches when the active tab changes.
  *
@@ -69,7 +71,7 @@ declare global {
  * @csspart container - The container element.
  * @csspart scroll-container - The scroll container element.
  */
-export declare class TabBarComponent extends BaseComponent implements ITabBarComponent {
+export declare class TabBarComponent extends TabBarComponent_base implements ITabBarComponent {
     static get observedAttributes(): string[];
     private _core;
     constructor();
@@ -87,3 +89,4 @@ export declare class TabBarComponent extends BaseComponent implements ITabBarCom
     autoActivate: boolean;
     scrollButtons: boolean;
 }
+export {};

package/esm/tabs/tab-bar/tab-bar.js

@@ -13,7 +13,10 @@ import { TabBarAdapter } from './tab-bar-adapter';
 import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
 import { TabBarCore } from './tab-bar-core';
 import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
-const template = '<template><div class=\"forge-tab-bar\" part=\"container\"><div role=\"tablist\" class=\"scroll-container\" part=\"scroll-container\"><slot></slot></div></div></template>';
+import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+import { setDefaultAria } from '../../constants';
+const template = '<template><div class=\"forge-tab-bar\" part=\"container\"><div class=\"scroll-container\" part=\"scroll-container\"><slot></slot></div></div></template>';
 const styles = ':host{position:relative;display:block}:host([hidden]){display:none}.forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, space-between);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 1);--_tab-bar-divider-color:var(--forge-tab-bar-divider-color, var(--forge-theme-outline, #e0e0e0));--_tab-bar-divider-thickness:var(--forge-tab-bar-divider-thickness, 1px)}.forge-tab-bar{position:relative;display:grid;grid-template-columns:auto 1fr auto;max-width:100%;max-height:100%;align-items:center;border-bottom:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}.scroll-container{position:relative;display:flex;justify-content:var(--_tab-bar-justify);align-items:flex-end;box-sizing:border-box;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;grid-column:2}.scroll-container::-webkit-scrollbar{display:none}::slotted(*){flex:var(--_tab-bar-stretch);align-self:stretch}::slotted([selected]){z-index:1}forge-icon-button{--forge-icon-button-shape-squared:0px}:host([vertical]) .forge-tab-bar{grid-template-columns:none;grid-template-rows:auto 1fr auto;align-items:initial;border-bottom:none;border-right:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color);height:100%}:host([vertical]) .scroll-container{display:inline-flex;flex-direction:column;align-items:stretch;gap:0;grid-column:auto;grid-row:2}:host([vertical]) .scroll-button{justify-self:center}:host([inverted]:not([vertical])) .forge-tab-bar{border-bottom:none;border-top:variale(divider-thickness) solid var(--_tab-bar-divider-color)}:host([inverted][vertical]) .forge-tab-bar{border-bottom:none;border-top:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}:host([clustered]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 0)}:host([clustered=start]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start)}:host([clustered=center]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, center)}:host([clustered=end]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-end)}';
 /**
  * @tag forge-tab-bar
@@ -47,7 +50,6 @@ const styles = ':host{position:relative;display:block}:host([hidden]){display:no
  * @attribute {boolean} [secondary=false] - Deprecated. Controls whether the tabs are styled as secondary tab navigation.
  * @attribute {boolean} [auto-activate=false] - Controls whether the tabs are automatically activated when receiving focus.
  * @attribute {boolean} [scroll-buttons=false] - Controls whether scroll buttons are displayed when the tabs overflow their container.
- * @attribute {string} [data-aria-label] - The ARIA label to forward to the internal tablist element.
  *
  * @event {CustomEvent<ITabBarChangeEventData>} forge-tab-bar-change - Dispatches when the active tab changes.
  *
@@ -59,7 +61,7 @@ const styles = ':host{position:relative;display:block}:host([hidden]){display:no
  * @csspart container - The container element.
  * @csspart scroll-container - The scroll container element.
  */
-let TabBarComponent = class TabBarComponent extends BaseComponent {
+let TabBarComponent = class TabBarComponent extends WithDefaultAria(WithElementInternals(BaseComponent)) {
     static get observedAttributes() {
         return Object.values(TAB_BAR_CONSTANTS.observedAttributes);
     }
@@ -70,6 +72,7 @@ let TabBarComponent = class TabBarComponent extends BaseComponent {
         this._core = new TabBarCore(new TabBarAdapter(this));
     }
     connectedCallback() {
+        this[setDefaultAria]({ role: 'tablist' }, { setAttribute: true });
         this._core.initialize();
     }
     disconnectedCallback() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.5.1",
+  "version": "3.6.0-dev.0",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -21,4 +21,4 @@
     "tslib": "^2.8.1"
   },
   "customElements": "custom-elements.json"
-}
+}

package/sass/button-area/_core.scss

@@ -15,11 +15,14 @@
 @mixin base {
   position: relative;
   overflow: hidden;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 @mixin enabled {
   cursor: #{token(cursor)};
 }
+
 @mixin disabled {
   cursor: #{token(disabled-cursor)};
 }

package/sass/checkbox/_core.scss

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

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/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/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();
-            }
-        }
-    }
-}