@tylertech/forge 3.11.0 → 3.12.0

package/esm/accordion/accordion.d.ts

@@ -15,7 +15,7 @@ declare global {
 /**
  * @tag forge-accordion
  *
- * @summary Accordions display a collection of panels that can be expanded or collapsed to show content.
+ * @summary Accordions wrap a collection of expansion panels to ensure that only one panel is expanded at a time.
  *
  * @dependency forge-expansion-panel
  *

package/esm/accordion/accordion.js

@@ -13,7 +13,7 @@ import { AccordionCore } from './accordion-core';
 /**
  * @tag forge-accordion
  *
- * @summary Accordions display a collection of panels that can be expanded or collapsed to show content.
+ * @summary Accordions wrap a collection of expansion panels to ensure that only one panel is expanded at a time.
  *
  * @dependency forge-expansion-panel
  *

package/esm/app-bar/app-bar/app-bar.d.ts

@@ -24,7 +24,7 @@ declare global {
 /**
  * @tag forge-app-bar
  *
- * @summary App bars are a collection of components placed as a horizontal bar at the top of the screen. They typically contain a logo, title, and optional application-wide actions.
+ * @summary App bars are headers used to display branding, navigation, and actions at the top of an application. They typically contain a logo, title, and various action items.
  *
  * @property {string} titleText - The text to display in the title.
  * @property {AppBarElevation} [elevation="raised"] - The elevation of the app bar.

package/esm/app-bar/app-bar/app-bar.js

@@ -14,7 +14,7 @@ const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(
 /**
  * @tag forge-app-bar
  *
- * @summary App bars are a collection of components placed as a horizontal bar at the top of the screen. They typically contain a logo, title, and optional application-wide actions.
+ * @summary App bars are headers used to display branding, navigation, and actions at the top of an application. They typically contain a logo, title, and various action items.
  *
  * @property {string} titleText - The text to display in the title.
  * @property {AppBarElevation} [elevation="raised"] - The elevation of the app bar.

package/esm/autocomplete/autocomplete-core.js

@@ -138,6 +138,7 @@ export class AutocompleteCore extends ListDropdownAwareCore {
         }
     }
     _onClear(evt) {
+        evt.preventDefault();
         this._filterText = '';
         this._clearValue();
         this._adapter.setSelectedText(this._getSelectedText());
@@ -352,14 +353,26 @@ export class AutocompleteCore extends ListDropdownAwareCore {
             asyncStyle: ListDropdownAsyncStyle.Skeleton,
             headerBuilder: this._popupHeaderBuilder,
             footerBuilder: this._popupFooterBuilder,
-            transform: label => {
-                if (this._filterText) {
-                    // Highlight the filter text within the label
+            transform: (label, option, isSelected) => {
+                const inputValue = this._adapter.getInputValue();
+                const isUserTyping = this._filterText &&
+                    inputValue?.length &&
+                    inputValue !== label && // User hasn't just selected this exact option
+                    this._adapter.hasFocus();
+                if (isUserTyping) {
+                    // When filtering: highlight only the matching search text
                     const highlightElement = highlightTextHTML(label, this._filterText);
                     if (highlightElement) {
                         return highlightElement;
                     }
                 }
+                else if (isSelected) {
+                    // When not filtering: bold the entire text of selected options
+                    const boldElement = document.createElement('span');
+                    boldElement.style.fontWeight = 'bold';
+                    boldElement.textContent = label;
+                    return boldElement;
+                }
                 return label;
             },
             allowBusy: true,

package/esm/autocomplete/autocomplete.d.ts

@@ -41,7 +41,7 @@ declare global {
 /**
  * @tag forge-autocomplete
  *
- * @summary Autocomplete components provide real-time suggestions as users type in a text field.
+ * @summary Autocomplete components provide real-time typeahead suggestions as users type in a text field. Use autocompletes to help users quickly find and select from a list of options, improving form usability and data accuracy.
  *
  * @event {CustomEvent<any>} forge-autocomplete-change - Fired when the value changes.
  * @event {CustomEvent<IAutocompleteSelectEventData>} forge-autocomplete-select -  Fired when an option is selected. Only applies when in "stateless" `mode`.

package/esm/autocomplete/autocomplete.js

@@ -22,7 +22,7 @@ const styles = ':host{display:block}:host([hidden]){display:none}';
 /**
  * @tag forge-autocomplete
  *
- * @summary Autocomplete components provide real-time suggestions as users type in a text field.
+ * @summary Autocomplete components provide real-time typeahead suggestions as users type in a text field. Use autocompletes to help users quickly find and select from a list of options, improving form usability and data accuracy.
  *
  * @event {CustomEvent<any>} forge-autocomplete-change - Fired when the value changes.
  * @event {CustomEvent<IAutocompleteSelectEventData>} forge-autocomplete-select -  Fired when an option is selected. Only applies when in "stateless" `mode`.

package/esm/avatar/avatar.d.ts

@@ -20,7 +20,7 @@ export declare const AVATAR_TAG_NAME: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-avatar
  *
- * @summary Avatars represent an entity via text or image.
+ * @summary Avatars represent an entity via text or image. Use avatars to visually represent users, objects, or identifiers in your application.
  *
  * @cssproperty {string} --forge-avatar-background - The background color of the avatar.
  * @cssproperty {number} --forge-avatar-shape - The border radius of the avatar, defaults to 50%.

package/esm/avatar/avatar.js

@@ -28,7 +28,7 @@ export const AVATAR_TAG_NAME = 'forge-avatar';
 /**
  * @tag forge-avatar
  *
- * @summary Avatars represent an entity via text or image.
+ * @summary Avatars represent an entity via text or image. Use avatars to visually represent users, objects, or identifiers in your application.
  *
  * @cssproperty {string} --forge-avatar-background - The background color of the avatar.
  * @cssproperty {number} --forge-avatar-shape - The border radius of the avatar, defaults to 50%.

package/esm/backdrop/backdrop.d.ts

@@ -20,7 +20,7 @@ declare global {
 /**
  * @tag forge-backdrop
  *
- * @summary Backdrops provide a semi-transparent overlay behind modal content like dialogs and drawers.
+ * @summary Backdrops provide a semi-transparent overlay behind modal content like dialogs and drawers. These are building blocks for creating modal experiences, not intended to be used directly.
  *
  * @property {boolean} [visible=false] - Whether the backdrop is visible.
  * @property {boolean} [fixed=false] - Whether the backdrop uses "fixed" or "relative" positioning.

package/esm/backdrop/backdrop.js

@@ -12,7 +12,7 @@ const styles = '@keyframes enter{from{opacity:0}to{opacity:var(--_backdrop-opaci
 /**
  * @tag forge-backdrop
  *
- * @summary Backdrops provide a semi-transparent overlay behind modal content like dialogs and drawers.
+ * @summary Backdrops provide a semi-transparent overlay behind modal content like dialogs and drawers. These are building blocks for creating modal experiences, not intended to be used directly.
  *
  * @property {boolean} [visible=false] - Whether the backdrop is visible.
  * @property {boolean} [fixed=false] - Whether the backdrop uses "fixed" or "relative" positioning.

package/esm/badge/badge.d.ts

@@ -22,7 +22,7 @@ export declare const BADGE_TAG_NAME: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-badge
  *
- * @summary Badges display small amounts of information like counts, status indicators, or notifications.
+ * @summary Badges display small amounts of non-interactive information like counts, status indicators, or notifications.
  *
  * @cssproperty --forge-badge-background - The background color.
  * @cssproperty --forge-badge-color - The text color.

package/esm/badge/badge.js

@@ -15,7 +15,7 @@ export const BADGE_TAG_NAME = 'forge-badge';
 /**
  * @tag forge-badge
  *
- * @summary Badges display small amounts of information like counts, status indicators, or notifications.
+ * @summary Badges display small amounts of non-interactive information like counts, status indicators, or notifications.
  *
  * @cssproperty --forge-badge-background - The background color.
  * @cssproperty --forge-badge-color - The text color.

package/esm/banner/banner.d.ts

@@ -25,7 +25,7 @@ declare global {
 /**
  * @tag forge-banner
  *
- * @summary Banners are used to inform users of important information, such as errors, warnings, or success messages.
+ * @summary Banners are used to inform users of important information, such as errors, warnings, or success messages. Use banners for non-critical messages that require user attention but do not interrupt workflow.
  *
  * @property {boolean} [dismissed=false] - Controls the visibility of the banner.
  * @property {boolean} [persistent=false] - Controls the visibility of the built-in dismiss button.

package/esm/banner/banner.js

@@ -18,7 +18,7 @@ const styles = ':host{display:block;container-type:inline-size}:host([hidden]){d
 /**
  * @tag forge-banner
  *
- * @summary Banners are used to inform users of important information, such as errors, warnings, or success messages.
+ * @summary Banners are used to inform users of important information, such as errors, warnings, or success messages. Use banners for non-critical messages that require user attention but do not interrupt workflow.
  *
  * @property {boolean} [dismissed=false] - Controls the visibility of the banner.
  * @property {boolean} [persistent=false] - Controls the visibility of the built-in dismiss button.

package/esm/button/button.d.ts

@@ -20,12 +20,7 @@ declare global {
 /**
  * @tag forge-button
  *
- * @summary Buttons represent actions that a user can take.
- *
- * @description
- * Buttons are used when a user needs to take an action, such as submitting a form or opening a dialog.
- * Buttons can be used to trigger an action or to navigate to a new location. Buttons can be styled with
- * a variety of themes and variants.
+ * @summary Buttons are used when a user needs to take an action. They can be used to trigger an action, navigate to a new location, and can be styled with a variety of themes and variants.
  *
  * @dependency forge-icon
  * @dependency forge-focus-indicator

package/esm/button/button.js

@@ -18,12 +18,7 @@ const styles = ':host{--_button-display:var(--forge-button-display, inline-grid)
 /**
  * @tag forge-button
  *
- * @summary Buttons represent actions that a user can take.
- *
- * @description
- * Buttons are used when a user needs to take an action, such as submitting a form or opening a dialog.
- * Buttons can be used to trigger an action or to navigate to a new location. Buttons can be styled with
- * a variety of themes and variants.
+ * @summary Buttons are used when a user needs to take an action. They can be used to trigger an action, navigate to a new location, and can be styled with a variety of themes and variants.
  *
  * @dependency forge-icon
  * @dependency forge-focus-indicator

package/esm/button-area/button-area.d.ts

@@ -15,10 +15,7 @@ declare global {
 /**
  * @tag forge-button-area
  *
- * @summary Button areas are used to create a clickable area that group related information and actions about a single subject.
- *
- * @description
- * The button area component wraps any arbitrary content with a `<button>` element to enable accessible clickable interfaces including nested controls and other complex content.
+ * @summary Button areas are used to create clickable areas that group related information and actions about a single subject. The button area component wraps any arbitrary content with a `<button>` element to enable accessible, clickable interfaces including nested controls and other complex content.
  *
  * @property {boolean} [disabled=false] - Sets whether the button area and slotted button are disabled. Setting this on one will also set it on the other.
  *

package/esm/button-area/button-area.js

@@ -16,10 +16,7 @@ const styles = ':host{display:block;position:relative}:host .forge-button-area{c
 /**
  * @tag forge-button-area
  *
- * @summary Button areas are used to create a clickable area that group related information and actions about a single subject.
- *
- * @description
- * The button area component wraps any arbitrary content with a `<button>` element to enable accessible clickable interfaces including nested controls and other complex content.
+ * @summary Button areas are used to create clickable areas that group related information and actions about a single subject. The button area component wraps any arbitrary content with a `<button>` element to enable accessible, clickable interfaces including nested controls and other complex content.
  *
  * @property {boolean} [disabled=false] - Sets whether the button area and slotted button are disabled. Setting this on one will also set it on the other.
  *

package/esm/button-toggle/button-toggle/button-toggle.d.ts

@@ -27,7 +27,7 @@ declare const ButtonToggleComponent_base: import("../../constants").AbstractCons
 /**
  * @tag forge-button-toggle
  *
- * @summary Toggle buttons allow users to select from a group of choices with single or multiple selection.
+ * @summary Button toggles allow users to select from a group of choices with single or multiple selection.
  *
  * @property {unknown} value - The value of the button toggle.
  * @property {boolean} [selected=false] - Whether or not the button is selected.

package/esm/button-toggle/button-toggle/button-toggle.js

@@ -19,7 +19,7 @@ const styles = ':host{--_button-toggle-display:var(--forge-button-toggle-display
 /**
  * @tag forge-button-toggle
  *
- * @summary Toggle buttons allow users to select from a group of choices with single or multiple selection.
+ * @summary Button toggles allow users to select from a group of choices with single or multiple selection.
  *
  * @property {unknown} value - The value of the button toggle.
  * @property {boolean} [selected=false] - Whether or not the button is selected.

package/esm/button-toggle/button-toggle-group/button-toggle-group.d.ts

@@ -36,7 +36,7 @@ declare const ButtonToggleGroupComponent_base: import("../../constants").Abstrac
 /**
  * @tag forge-button-toggle-group
  *
- * @summary Button toggle groups allow users to select one or more options from a set of related options.
+ * @summary Button toggle groups allow users to select one or more options from a set of button toggles.
  *
  * @property {any} value - The value of the selected button toggle(s).
  * @property {boolean} [outlined=true] - Whether or not the group should be outlined.

package/esm/button-toggle/button-toggle-group/button-toggle-group.js

@@ -21,7 +21,7 @@ const styles = ':host{--_button-toggle-group-display:var(--forge-button-toggle-g
 /**
  * @tag forge-button-toggle-group
  *
- * @summary Button toggle groups allow users to select one or more options from a set of related options.
+ * @summary Button toggle groups allow users to select one or more options from a set of button toggles.
  *
  * @property {any} value - The value of the selected button toggle(s).
  * @property {boolean} [outlined=true] - Whether or not the group should be outlined.

package/esm/chip-field/chip-field.d.ts

@@ -19,7 +19,7 @@ declare global {
     }
 }
 /**
- * @summary A specialized input field component that allows users to create and manage a collection of chips representing text values or selections.
+ * @summary A specialized input field component that allows users to create and manage a collection of chips representing text values or selections. Use a chip field when you want to allow users to input multiple discrete items, such as tags, categories, or selections from a predefined list. Prefer alternatives such as a select or autocomplete when dealing with a large number of options or when single selection is sufficient.
  *
  * @tag forge-chip-field
  *

package/esm/chip-field/chip-field.js

@@ -14,7 +14,7 @@ import { BASE_FIELD_CONSTANTS, FieldComponent } from '../field';
 const template = '<template><forge-field id=\"field\" multiline><slot slot=\"label\" name=\"label\"></slot><slot slot=\"start\" name=\"start\"></slot><div class=\"container\" data-forge-field-input><slot name=\"member\"></slot><slot></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
 const styles = '@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}:host{display:block}:host([hidden]){display:none}forge-field{--_chip-field-member-spacing:var(--forge-chip-field-member-spacing, var(--forge-spacing-xsmall, 8px));--_chip-field-content-spacing:var(--forge-chip-field-content-spacing, var(--forge-spacing-xxsmall, 4px))}.container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-field-member-spacing);block-size:auto}.container.has-members{margin-block:var(--_chip-field-content-spacing)}.container.has-members ::slotted(input){block-size:auto;inline-size:auto}::slotted(input){flex-grow:1;cursor:inherit;box-sizing:border-box;margin:0;outline:0;border:none;background-color:transparent;padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis;padding-block-start:0;padding-block-end:0;transition:padding-block var(--_field-floating-animation-duration) var(--_field-floating-animation-timing)}forge-field{display:contents;--forge-field-multiline-resize:none}forge-field::part(label)::after{content:none}:host([theme=primary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-primary, #3f51b5);--forge-chip-field-color:var(--forge-theme-on-primary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-primary, #3f51b5)}:host([theme=secondary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-secondary, #ffc107);--forge-chip-field-color:var(--forge-theme-on-secondary, #000000);--forge-chip-focus-indicator-color:var(--forge-theme-secondary, #ffc107)}:host([theme=tertiary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-tertiary, #3d5afe);--forge-chip-field-color:var(--forge-theme-on-tertiary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-tertiary, #3d5afe)}:host([theme=success]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-success, #2e7d32);--forge-chip-field-color:var(--forge-theme-on-success, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-success, #2e7d32)}:host([theme=warning]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-warning, #d14900);--forge-chip-field-color:var(--forge-theme-on-warning, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-warning, #d14900)}:host([theme=error]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-error, #b00020);--forge-chip-field-color:var(--forge-theme-on-error, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-error, #b00020)}:host([theme=info]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-info, #1565c0);--forge-chip-field-color:var(--forge-theme-on-info, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-info, #1565c0)}';
 /**
- * @summary A specialized input field component that allows users to create and manage a collection of chips representing text values or selections.
+ * @summary A specialized input field component that allows users to create and manage a collection of chips representing text values or selections. Use a chip field when you want to allow users to input multiple discrete items, such as tags, categories, or selections from a predefined list. Prefer alternatives such as a select or autocomplete when dealing with a large number of options or when single selection is sufficient.
  *
  * @tag forge-chip-field
  *

package/esm/chips/chip/chip-adapter.d.ts

@@ -22,6 +22,7 @@ export interface IChipAdapter extends IBaseAdapter {
     getChipSetState(): IChipState | null;
     setDisabled(value: boolean): void;
     setSelected(value: boolean): void;
+    setRemoveButtonLabel(value: string): void;
     focusTrigger(options?: FocusOptions): void;
     tryFocusRemoveButton(): void;
     clickRemoveButton(): void;
@@ -47,6 +48,7 @@ export declare class ChipAdapter extends BaseAdapter<IChipComponent> implements
     setCheckmarkVisibility(value: boolean): void;
     setDisabled(value: boolean): void;
     setSelected(value: boolean): void;
+    setRemoveButtonLabel(value: string): void;
     toggleFieldVariant(value: boolean): void;
     setDeleteButtonVisibility(value: boolean): void;
     setStartSlotVisibility(value: boolean): void;
@@ -55,6 +57,7 @@ export declare class ChipAdapter extends BaseAdapter<IChipComponent> implements
     tryFocusRemoveButton(): void;
     clickRemoveButton(): void;
     animateStateLayer(): void;
+    private _getDefaultRemoveButtonLabel;
     private _createRemoveButton;
     private _createAnchorElement;
     private _createButtonElement;

package/esm/chips/chip/chip-adapter.js

@@ -104,6 +104,12 @@ export class ChipAdapter extends BaseAdapter {
         }
         toggleAttribute(this._triggerElement, value, 'aria-pressed', String(value));
     }
+    setRemoveButtonLabel(value) {
+        if (this._removeButtonElement) {
+            const label = value?.trim() || this._getDefaultRemoveButtonLabel();
+            this._removeButtonElement.setAttribute('aria-label', label);
+        }
+    }
     toggleFieldVariant(value) {
         if (value) {
             if (!this._stateLayerElement.isConnected) {
@@ -160,17 +166,21 @@ export class ChipAdapter extends BaseAdapter {
     animateStateLayer() {
         this._stateLayerElement.playAnimation();
     }
+    _getDefaultRemoveButtonLabel() {
+        return `Remove ${this._component.innerText}`;
+    }
     _createRemoveButton() {
         const buttonEl = document.createElement('forge-icon-button');
         buttonEl.density = 'small';
         buttonEl.id = 'remove-button';
         buttonEl.classList.add('remove');
-        buttonEl.tabIndex = -1;
-        buttonEl.setAttribute('aria-label', `Remove ${this._component.innerText}`);
         buttonEl.setAttribute('part', 'remove-button');
         const iconEl = document.createElement('forge-icon');
         iconEl.name = 'close';
         buttonEl.appendChild(iconEl);
+        // Set initial aria-label, this will be updated by setRemoveButtonLabel if a custom label is provided
+        const label = this._component.removeButtonLabel?.trim() || this._getDefaultRemoveButtonLabel();
+        buttonEl.setAttribute('aria-label', label);
         return buttonEl;
     }
     _createAnchorElement() {

package/esm/chips/chip/chip-constants.d.ts

@@ -18,6 +18,7 @@ export declare const CHIP_CONSTANTS: {
         TARGET: string;
         DOWNLOAD: string;
         REL: string;
+        REMOVE_BUTTON_LABEL: string;
     };
     attributes: {
         TYPE: string;
@@ -31,6 +32,7 @@ export declare const CHIP_CONSTANTS: {
         TARGET: string;
         DOWNLOAD: string;
         REL: string;
+        REMOVE_BUTTON_LABEL: string;
     };
     selectors: {
         ROOT: string;

package/esm/chips/chip/chip-constants.js

@@ -16,7 +16,8 @@ const observedAttributes = {
     HREF: 'href',
     TARGET: 'target',
     DOWNLOAD: 'download',
-    REL: 'rel'
+    REL: 'rel',
+    REMOVE_BUTTON_LABEL: 'remove-button-label'
 };
 const attributes = {
     ...observedAttributes

package/esm/chips/chip/chip-core.d.ts

@@ -17,6 +17,7 @@ export interface IChipCore {
     target: string;
     download: string;
     rel: string;
+    removeButtonLabel: string;
     focus(options?: FocusOptions): void;
     focusRemoveButton(): void;
     click(): void;
@@ -34,6 +35,7 @@ export declare class ChipCore implements IChipCore {
     private _target;
     private _download;
     private _rel;
+    private _removeButtonLabel;
     private _clickListener;
     private _keydownListener;
     constructor(_adapter: IChipAdapter);
@@ -75,4 +77,6 @@ export declare class ChipCore implements IChipCore {
     set download(value: string);
     get rel(): string;
     set rel(value: string);
+    get removeButtonLabel(): string;
+    set removeButtonLabel(value: string);
 }

package/esm/chips/chip/chip-core.js

@@ -287,4 +287,13 @@ export class ChipCore {
             this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.REL, !!this._rel?.trim(), this._rel);
         }
     }
+    get removeButtonLabel() {
+        return this._removeButtonLabel;
+    }
+    set removeButtonLabel(value) {
+        if (this._removeButtonLabel !== value) {
+            this._removeButtonLabel = value;
+            this._adapter.setRemoveButtonLabel(this._removeButtonLabel);
+        }
+    }
 }

package/esm/chips/chip/chip.d.ts

@@ -18,6 +18,7 @@ export interface IChipComponent extends IBaseComponent {
     target: string;
     download: string;
     rel: string;
+    removeButtonLabel: string;
     focusRemoveButton(): void;
 }
 declare global {
@@ -45,6 +46,7 @@ declare global {
  * @property {string} target - The target of the chip.
  * @property {string} download - The download of the chip.
  * @property {string} rel - The rel of the chip.
+ * @property {string} removeButtonLabel - The custom aria-label for the remove button.
  *
  * @attribute {ChipType} type - The type of chip.
  * @attribute {unknown} value - The value of the chip.
@@ -57,6 +59,7 @@ declare global {
  * @attribute {string} target - The target of the chip.
  * @attribute {string} download - The download of the chip.
  * @attribute {string} rel - The rel of the chip.
+ * @attribute {string} remove-button-label - The custom aria-label for the remove button.
  *
  * @fires {CustomEvent<IChipDeleteEventData>} forge-chip-delete - Event fired when the chip is deleted.
  * @fires {CustomEvent<IChipSelectEventData>} forge-chip-select - Event fired when the chip is selected.
@@ -145,4 +148,5 @@ export declare class ChipComponent extends BaseComponent implements IChipCompone
     target: string;
     download: string;
     rel: string;
+    removeButtonLabel: string;
 }

package/esm/chips/chip/chip.js

@@ -32,6 +32,7 @@ const styles = ':host{display:inline-flex}:host([hidden]){display:none}.forge-ch
  * @property {string} target - The target of the chip.
  * @property {string} download - The download of the chip.
  * @property {string} rel - The rel of the chip.
+ * @property {string} removeButtonLabel - The custom aria-label for the remove button.
  *
  * @attribute {ChipType} type - The type of chip.
  * @attribute {unknown} value - The value of the chip.
@@ -44,6 +45,7 @@ const styles = ':host{display:inline-flex}:host([hidden]){display:none}.forge-ch
  * @attribute {string} target - The target of the chip.
  * @attribute {string} download - The download of the chip.
  * @attribute {string} rel - The rel of the chip.
+ * @attribute {string} remove-button-label - The custom aria-label for the remove button.
  *
  * @fires {CustomEvent<IChipDeleteEventData>} forge-chip-delete - Event fired when the chip is deleted.
  * @fires {CustomEvent<IChipSelectEventData>} forge-chip-select - Event fired when the chip is selected.
@@ -160,6 +162,9 @@ let ChipComponent = class ChipComponent extends BaseComponent {
             case CHIP_CONSTANTS.attributes.REL:
                 this.rel = newValue;
                 break;
+            case CHIP_CONSTANTS.attributes.REMOVE_BUTTON_LABEL:
+                this.removeButtonLabel = newValue;
+                break;
         }
     }
     focus(options) {
@@ -205,6 +210,9 @@ __decorate([
 __decorate([
     coreProperty()
 ], ChipComponent.prototype, "rel", void 0);
+__decorate([
+    coreProperty()
+], ChipComponent.prototype, "removeButtonLabel", void 0);
 ChipComponent = __decorate([
     customElement({
         name: CHIP_CONSTANTS.elementName,

package/esm/chips/chip-set/chip-set.d.ts

@@ -21,7 +21,7 @@ declare global {
 /**
  * @tag forge-chip-set
  *
- * @summary Chips sets are used to group multiple chips together and orchestrate their behavior.
+ * @summary Chip sets are used to group multiple chips together and orchestrate their behavior.
  *
  * @property {boolean} [vertical=false] - Whether the chip set is vertical.
  * @property {ChipType} [type='action'] - The type of chip.

package/esm/chips/chip-set/chip-set.js

@@ -14,7 +14,7 @@ const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-c
 /**
  * @tag forge-chip-set
  *
- * @summary Chips sets are used to group multiple chips together and orchestrate their behavior.
+ * @summary Chip sets are used to group multiple chips together and orchestrate their behavior.
  *
  * @property {boolean} [vertical=false] - Whether the chip set is vertical.
  * @property {ChipType} [type='action'] - The type of chip.

package/esm/circular-progress/circular-progress.d.ts

@@ -22,8 +22,7 @@ declare const CircularProgressComponent_base: import("..").AbstractConstructor<i
 /**
  * @tag forge-circular-progress
  *
- * @summary
- * Circular progress indicators display progress by animating along a circular track in a clockwise direction.
+ * @summary Circular progress indicators display progress by animating along a circular track in a clockwise direction. They can be used to represent both determinate and indeterminate progress.
  *
  * @description
  * Progress indicators inform users about the status of ongoing processes.

package/esm/circular-progress/circular-progress.js

@@ -16,8 +16,7 @@ const styles = ':host{--_circular-progress-size:var(--forge-circular-progress-si
 /**
  * @tag forge-circular-progress
  *
- * @summary
- * Circular progress indicators display progress by animating along a circular track in a clockwise direction.
+ * @summary Circular progress indicators display progress by animating along a circular track in a clockwise direction. They can be used to represent both determinate and indeterminate progress.
  *
  * @description
  * Progress indicators inform users about the status of ongoing processes.

package/esm/color-picker/color-picker.d.ts

@@ -22,7 +22,7 @@ declare global {
     }
 }
 /**
- * @summary An interactive color selection component with support for multiple color formats (hex, RGB, HSV) and optional opacity control.
+ * @summary An interactive color selection component with support for multiple color formats (hex, RGB, HSV) and optional opacity control. Intended to be used either inline, or within a popover or dialog for selecting colors.
  *
  * @tag forge-color-picker
  *

package/esm/color-picker/color-picker.js

@@ -16,7 +16,7 @@ import { ColorPickerCore } from './color-picker-core';
 const template = '<template><div class=\"forge-color-picker\" part=\"root\"><input type=\"color\" tabindex=\"-1\" class=\"forge-color-picker__input\" spellcheck=\"false\" autocomplete=\"off\" aria-label=\"Color picker value\" part=\"input\"><div class=\"forge-color-picker__container\" part=\"container\"><div class=\"forge-color-picker__gradient\" tabindex=\"0\" part=\"gradient\"><div class=\"forge-color-picker__gradient-color\" part=\"gradient-color\"></div><div class=\"forge-color-picker__gradient-thumb\" part=\"gradient-thumb\"></div></div><div class=\"forge-color-picker__control-preview\" part=\"controls-preview-container\"><div class=\"forge-color-picker__controls\" part=\"controls-container\"><div class=\"forge-color-picker__slider-control\" part=\"hue-control-container\"><div class=\"forge-color-picker__slider forge-color-picker__hue-slider\" part=\"hue-control-slider\"><div class=\"forge-color-picker__slider-thumb\" id=\"forge-color-picker-hue-thumb\" part=\"hue-control-slider-thumb\" tabindex=\"0\" role=\"slider\" aria-label=\"Change hue\" aria-valuemin=\"0\" aria-valuemax=\"360\" aria-valuenow=\"0\" aria-orientation=\"horizontal\" aria-valuetext=\"0\"></div></div></div><div class=\"forge-color-picker__slider-control\" part=\"opacity-control-container\"><div class=\"forge-color-picker__canvas\" part=\"opacity-control-canvas\"><div class=\"forge-color-picker__slider forge-color-picker__opacity-slider\" part=\"opacity-control-slider\"><div class=\"forge-color-picker__slider-thumb\" id=\"forge-color-picker-opacity-thumb\" part=\"opacity-control-slider-thumb\" tabindex=\"0\" role=\"slider\" aria-label=\"Change opacity\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\" aria-orientation=\"horizontal\" aria-valuetext=\"0\"></div></div></div></div></div><div class=\"forge-color-picker__color-preview-container forge-color-picker__canvas\" part=\"color-preview-container\"><div class=\"forge-color-picker__color-preview\" part=\"color-preview\"></div></div></div><div class=\"forge-color-picker__value\" part=\"value-container\"><div class=\"forge-color-picker__color-types\" part=\"types-container\"><div class=\"forge-color-picker__color-hex\" part=\"hex-type-container\"><div part=\"hex-type-label-wrapper\"><label for=\"forge-color-picker-hex-input\" part=\"hex-label\">HEX</label></div><input type=\"text\" id=\"forge-color-picker-hex-input\" part=\"hex-input\" style=\"width: 88px\" maxlength=\"9\" spellcheck=\"false\" autocomplete=\"off\" aria-label=\"HEX value\"></div><div class=\"forge-color-picker__color-rgba\" part=\"rgba-type-container\"><div part=\"rgba-type-wrapper-r\"><label for=\"forge-color-picker-rgba-r-input\" part=\"rgba-type-label-r\">R</label> <input type=\"number\" id=\"forge-color-picker-rgba-r-input\" part=\"rgba-type-input-r\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Red\"></div><div part=\"rgba-type-wrapper-g\"><label for=\"forge-color-picker-rgba-g-input\" part=\"rgba-type-label-g\">G</label> <input type=\"number\" id=\"forge-color-picker-rgba-g-input\" part=\"rgba-type-input-g\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Green\"></div><div part=\"rgba-type-wrapper-b\"><label for=\"forge-color-picker-rgba-b-input\" part=\"rgba-type-label-b\">B</label> <input type=\"number\" id=\"forge-color-picker-rgba-b-input\" part=\"rgba-type-input-b\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Blue\"></div><div part=\"rgba-type-wrapper-a\"><label for=\"forge-color-picker-rgba-a-input\" part=\"rgba-type-label-a\">A</label> <input type=\"number\" id=\"forge-color-picker-rgba-a-input\" part=\"rgba-type-input-a\" min=\"0\" max=\"1\" step=\"0.1\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Alpha\"></div></div><div class=\"forge-color-picker__color-hsva\" part=\"hsva-type-container\"><div part=\"hsva-type-wrapper-h\"><label for=\"forge-color-picker-hsva-h-input\" part=\"hsva-type-label-h\">H</label> <input type=\"number\" id=\"forge-color-picker-hsva-h-input\" part=\"hsva-type-input-h\" min=\"0\" max=\"360\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Hue\"></div><div part=\"hsva-type-wrapper-s\"><label for=\"forge-color-picker-hsva-s-input\" part=\"hsva-type-label-s\">S</label> <input type=\"number\" id=\"forge-color-picker-hsva-s-input\" part=\"hsva-type-input-s\" min=\"0\" max=\"100\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Saturation\"></div><div part=\"hsva-type-wrapper-v\"><label for=\"forge-color-picker-hsva-v-input\" part=\"hsva-type-label-v\">V</label> <input type=\"number\" id=\"forge-color-picker-hsva-v-input\" part=\"hsva-type-input-v\" min=\"0\" max=\"100\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Value\"></div><div part=\"hsva-type-wrapper-a\"><label for=\"forge-color-picker-hsva-a-input\" part=\"hsva-type-label-a\">A</label> <input type=\"number\" id=\"forge-color-picker-hsva-a-input\" part=\"hsva-type-input-a\" min=\"0\" max=\"1\" step=\"0.1\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Alpha\"></div></div></div><div class=\"forge-color-picker__type-button\" part=\"type-container\"><forge-icon-button part=\"type-button\" id=\"forge-color-picker-type-button\" aria-labelledby=\"type-button-tooltip\" part=\"type-button-element\"><forge-icon name=\"unfold_more\" part=\"type-button-icon\"></forge-icon></forge-icon-button><forge-tooltip placement=\"bottom\" id=\"type-button-tooltip\">Change color format</forge-tooltip></div></div></div></div></template>';
 const styles = '*{box-sizing:border-box}.forge-color-picker{width:var(--forge-color-picker-width,272px);position:relative;display:inline-block;overflow:hidden}.forge-color-picker__input{height:1px;opacity:0;position:absolute;width:1px}.forge-color-picker__gradient{position:relative;outline:0}.forge-color-picker__gradient-color{background:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);height:152px}.forge-color-picker__gradient-thumb{border:1px solid #fff;border-radius:50%;cursor:pointer;display:inline-block;height:10px;width:10px;margin-left:-5px;margin-top:-5px;position:absolute;touch-action:none;user-select:none;transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s}.forge-color-picker__control-preview{display:flex;align-items:center;width:100%;padding:16px}.forge-color-picker__controls{flex:1;margin-right:16px}.forge-color-picker__slider{position:relative}.forge-color-picker__slider-thumb{outline:0;height:16px;width:16px;background-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);position:absolute;border-radius:50%;top:calc(50% - 8px);margin-left:-8px;transition:left .4s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__slider-thumb--active{transition:none}.forge-color-picker__slider-thumb:hover{cursor:pointer}.forge-color-picker__color-preview-container{border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);overflow:hidden}.forge-color-picker__color-preview{height:32px;width:32px;transition:background-color .2s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__value{display:flex;width:100%;align-items:center;padding:0 8px 16px 16px;font-size:12px}.forge-color-picker__color-types{flex:1}.forge-color-picker__color-types label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);color:var(--forge-theme-text-medium,rgba(0,0,0,.6))}.forge-color-picker__color-types input{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit)}.forge-color-picker__color-types input[type=number],.forge-color-picker__color-types input[type=text]{border-color:var(--forge-theme-outline,#e0e0e0);color:var(--forge-theme-on-surface,#000);background-color:transparent;padding:4px 8px;border-width:1px;border-style:solid;border-radius:4px;box-sizing:border-box;outline:0;transition-property:box-shadow,border-colo;transition-duration:var(--forge-animation-duration-short4, 200ms);transition-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}.forge-color-picker__color-types input[type=number]:hover,.forge-color-picker__color-types input[type=text]:hover{border-color:var(--forge-theme-text-high,rgba(0,0,0,.87))}.forge-color-picker__color-types input[type=number]:focus,.forge-color-picker__color-types input[type=text]:focus{border-color:var(--forge-theme-primary,#3f51b5);box-shadow:0 0 0 1px inset var(--forge-theme-primary,#3f51b5)}.forge-color-picker__color-types input[type=number]{text-align:center}.forge-color-picker__color-types input[type=number]::-webkit-inner-spin-button,.forge-color-picker__color-types input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.forge-color-picker__color-types input[type=number]{-moz-appearance:textfield}.forge-color-picker__color-hex{display:flex;flex-direction:column;justify-content:center;align-items:space-between}.forge-color-picker__canvas{background-image:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+\")}.forge-color-picker__hue-slider{height:8px;background:linear-gradient(to right,red 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%)}.forge-color-picker__opacity-slider{height:8px;margin-top:16px;background:linear-gradient(to right,rgba(255,0,0,0) 0,red 100%)}.forge-color-picker__color-hsva,.forge-color-picker__color-rgba{display:flex}.forge-color-picker__color-hsva div,.forge-color-picker__color-rgba div{margin-right:4px}.forge-color-picker__color-hsva label,.forge-color-picker__color-rgba label{display:block;text-align:center}.forge-color-picker__color-hsva input,.forge-color-picker__color-rgba input{width:44px}:host{display:inline-block}:host([hidden]){display:none}';
 /**
- * @summary An interactive color selection component with support for multiple color formats (hex, RGB, HSV) and optional opacity control.
+ * @summary An interactive color selection component with support for multiple color formats (hex, RGB, HSV) and optional opacity control. Intended to be used either inline, or within a popover or dialog for selecting colors.
  *
  * @tag forge-color-picker
  *

package/esm/date-picker/date-picker.d.ts

@@ -19,7 +19,7 @@ declare global {
     }
 }
 /**
- * @summary A date input component with an integrated calendar popup for selecting single dates with keyboard and mouse interaction support.
+ * @summary A date input component with an integrated calendar popup for selecting single dates.
  *
  * @tag forge-date-picker
  *

package/esm/date-picker/date-picker.js

@@ -18,7 +18,7 @@ import { DatePickerCore } from './date-picker-core';
 const template = '<template><slot></slot></template>';
 const styles = ':host{display:block}:host([hidden]){display:none}';
 /**
- * @summary A date input component with an integrated calendar popup for selecting single dates with keyboard and mouse interaction support.
+ * @summary A date input component with an integrated calendar popup for selecting single dates.
  *
  * @tag forge-date-picker
  *