@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/esm/file-picker/file-picker.js

@@ -10,12 +10,56 @@ import { BaseComponent } from '../core/base/base-component';
 import { FilePickerAdapter } from './file-picker-adapter';
 import { FILE_PICKER_CONSTANTS } from './file-picker-constants';
 import { FilePickerFoundation } from './file-picker-foundation';
-const template = '<template><form class=\"forge-file-picker\" id=\"container\" part=\"form\"><div class=\"forge-file-picker__primary\" id=\"primary\" part=\"primary\"><slot name=\"primary\"></slot></div><slot id=\"button-slot\"></slot><div class=\"forge-file-picker__secondary\" id=\"secondary\" part=\"secondary\"><slot name=\"secondary\"></slot></div><input type=\"file\" class=\"forge-file-picker__input\" id=\"input\" part=\"input\"></form><div class=\"forge-file-picker__helper-text\" part=\"helper-text-container\"><slot name=\"helper-text\"></slot></div></template>';
-const styles = '.forge-file-picker{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;background-color:rgba(189,189,189,.12);border:1px dashed #e0e0e0;display:grid;-webkit-box-pack:center;justify-content:center;align-content:center;gap:16px;padding:16px;text-align:center;cursor:pointer}.forge-file-picker__primary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size, 1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));max-width:auto;max-width:var(--forge-file-picker-max-content-width,auto)}.forge-file-picker__secondary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;font-size:var(--forge-typography-subtitle2-secondary-font-size, .875rem);line-height:1.375rem;line-height:var(--forge-typography-subtitle2-secondary-line-height, 1.375rem);font-weight:400;font-weight:var(--forge-typography-subtitle2-secondary-font-weight,400);letter-spacing:.0087500001em;letter-spacing:var(--forge-typography-subtitle2-secondary-letter-spacing, .0087500001em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-subtitle2-secondary-text-decoration,inherit);text-decoration:var(--forge-typography-subtitle2-secondary-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-subtitle2-secondary-text-transform,inherit);color:var(--mdc-theme-text-secondary-on-background);color:var(--forge-typography-subtitle2-secondary-color,var(--mdc-theme-text-secondary-on-background));color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));max-width:auto;max-width:var(--forge-file-picker-max-content-width,auto)}.forge-file-picker__input{display:none}.forge-file-picker__helper-text ::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:12px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);text-align:start}.forge-file-picker[disabled]{background-color:#fff;background-color:var(--mdc-theme-background,#fff);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);opacity:.38;cursor:unset}.forge-file-picker.compact{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background-color:transparent;border:none;padding:0}.forge-file-picker.compact .forge-file-picker__primary,.forge-file-picker.compact .forge-file-picker__secondary{display:none}.forge-file-picker.compact .forge-file-picker__button{width:auto;width:var(--forge-file-picker-width,auto);background-color:transparent}.forge-file-picker:not(.compact).highlight{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);background-color:rgba(98,0,238,.12);border-width:1px;border-style:solid}.forge-file-picker.borderless{--forge-file-picker-width:100%;border:none}.forge-file-picker.borderless:not(.compact).highlight{border:none}.forge-file-picker.borderless+.forge-file-picker__helper-text{display:none}:host{width:auto;width:var(--forge-file-picker-width,auto);height:auto;height:var(--forge-file-picker-height,auto);display:inline-block}:host([hidden]){display:none}';
+const template = '<template><form class=\"forge-file-picker\" id=\"container\" part=\"form\"><div class=\"primary\" id=\"primary\" part=\"primary\"><slot name=\"primary\"></slot></div><slot id=\"button-slot\"></slot><div class=\"secondary\" id=\"secondary\" part=\"secondary\"><slot name=\"secondary\"></slot></div><input type=\"file\" class=\"input\" id=\"input\" part=\"input\"></form><div class=\"helper-text\" part=\"helper-text-container\"><slot name=\"helper-text\"></slot></div></template>';
+const styles = ':host{--_file-picker-background:var(--forge-file-picker-background, var(--forge-theme-surface-dim, #fafafa));--_file-picker-width:var(--forge-file-picker-width, auto);--_file-picker-height:var(--forge-file-picker-height, auto);--_file-picker-max-width:var(--forge-file-picker-max-width, auto);--_file-picker-border-width:var(--forge-file-picker-border-width, var(--forge-border-thin, 1px));--_file-picker-border-style:var(--forge-file-picker-border-style, dashed);--_file-picker-border-color:var(--forge-file-picker-border-color, var(--forge-theme-outline-low, #9e9e9e));--_file-picker-gap:var(--forge-file-picker-gap, var(--forge-spacing-medium, 16px));--_file-picker-padding:var(--forge-file-picker-padding, var(--forge-spacing-medium, 16px));--_file-picker-padding-block:var(--forge-file-picker-padding-block, 0);--_file-picker-padding-inline:var(--forge-file-picker-padding-inline, var(--_file-picker-padding));--_file-picker-disabled-opacity:var(--forge-file-picker-disabled-opacity, 0.38);--_file-picker-highlight-background:var(--forge-file-picker-highlight-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_file-picker-highlight-border-color:var(--forge-file-picker-highlight-border-color, var(--forge-theme-primary, #3f51b5))}:host{display:block;height:100%;width:100%}:host([hidden]){display:none}:host([compact]){display:inline-block}.forge-file-picker{--_file-picker-background:var(--forge-file-picker-background, var(--forge-theme-surface-dim, #fafafa));--_file-picker-width:var(--forge-file-picker-width, auto);--_file-picker-height:var(--forge-file-picker-height, auto);--_file-picker-max-width:var(--forge-file-picker-max-width, auto);--_file-picker-border-width:var(--forge-file-picker-border-width, var(--forge-border-thin, 1px));--_file-picker-border-style:var(--forge-file-picker-border-style, dashed);--_file-picker-border-color:var(--forge-file-picker-border-color, var(--forge-theme-outline-low, #9e9e9e));--_file-picker-gap:var(--forge-file-picker-gap, var(--forge-spacing-medium, 16px));--_file-picker-padding:var(--forge-file-picker-padding, var(--forge-spacing-medium, 16px));--_file-picker-padding-block:var(--forge-file-picker-padding-block, 0);--_file-picker-padding-inline:var(--forge-file-picker-padding-inline, var(--_file-picker-padding));--_file-picker-disabled-opacity:var(--forge-file-picker-disabled-opacity, 0.38);--_file-picker-highlight-background:var(--forge-file-picker-highlight-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_file-picker-highlight-border-color:var(--forge-file-picker-highlight-border-color, var(--forge-theme-primary, #3f51b5))}.forge-file-picker{display:grid;-webkit-box-pack:center;justify-content:center;align-content:center;gap:var(--_file-picker-gap);-webkit-box-sizing:border-box;box-sizing:border-box;padding:var(--_file-picker-padding);height:var(--_file-picker-height);width:var(--_file-picker-width);max-width:var(--_file-picker-max-width);text-align:center;background:var(--_file-picker-background);cursor:pointer;border-width:var(--_file-picker-border-width);border-style:var(--_file-picker-border-style);border-color:var(--_file-picker-border-color)}.forge-file-picker[disabled]{opacity:var(--_file-picker-disabled-opacity);cursor:unset}.forge-file-picker:not(.compact).highlight{--_file-picker-border-color:var(--_file-picker-highlight-border-color);--_file-picker-background:var(--_file-picker-highlight-background)}.primary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);color:var(--forge-theme-text-high,rgba(0,0,0,.87));max-width:var(--_file-picker-max-width)}.secondary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);color:var(--forge-theme-text-high,rgba(0,0,0,.87));max-width:var(--_file-picker-max-width)}.input{display:none}.helper-text ::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-align:start}.borderless{--_file-picker-width:var(--forge-file-picker-width, 100%);border:none}.borderless:not(.compact).highlight{border:none}.borderless+.helper-text{display:none}.compact{--_file-picker-height:var(--forge-file-picker-height, fit-content);--_file-picker-width:var(--forge-file-picker-width, fit-content);--_file-picker-background-color:var(--forge-file-picker-background-color, transparent);--_file-picker-padding:var(--forge-file-picker-padding, 0);border:none}.compact .primary,.compact .secondary{display:none}.compact .button{--_file-picker-width:var(--forge-file-picker-width, auto);background-color:transparent}';
 /**
- * The web component class behind the `<forge-file-picker>` custom element.
- *
  * @tag forge-file-picker
+ *
+ * @summary
+ * The file-picker component allows for a user to upload files of their own to the system. The component provides a slot for a
+ * button, as well as drag-and-drop functionality to launch the system file chooser dialog. There are visual queues to let the
+ * user know when files they are dragging can be dropped, as well as events that are relayed to the developer to handle files
+ * that are legal and/or illegal based on the parameters set on the component.
+ *
+ * The expectation of this component is that it will be used as a familiar element on the page that will let users upload files,
+ * while providing that visual and functional consistency.
+ *
+ * @property {string | null} accept - Gets/sets the allowed file types.
+ * @property {string | null} maxSize - Gets/sets the maximum allowed file size.
+ * @property {string | null} capture - Gets/sets the camera to use when capturing video or images.
+ * @property {boolean} multiple - Gets/sets whether multiple files are allowed.
+ * @property {boolean} disabled - Gets/sets whether the file picker is disabled.
+ * @property {boolean} compact - Gets/sets whether the file picker uses the compact variant.
+ * @property {boolean} borderless - Gets and sets whether the file picker is borderless.
+ *
+ * @attribute {string | null} accept - Gets/sets the allowed file types.
+ * @attribute {string | null} maxSize - Gets/sets the maximum allowed file size.
+ * @attribute {string | null} capture - Gets/sets the camera to use when capturing video or images.
+ * @attribute {boolean} multiple - Gets/sets whether multiple files are allowed.
+ * @attribute {boolean} disabled - Gets/sets whether the file picker is disabled.
+ * @attribute {boolean} compact - Gets/sets whether the file picker uses the compact variant.
+ * @attribute {boolean} borderless - Gets and sets whether the file picker is borderless.
+ *
+ * @cssproperty --forge-file-picker-background - Controls the background color.
+ * @cssproperty --forge-file-picker-width - Controls the width.
+ * @cssproperty --forge-file-picker-height - Controls the height.
+ * @cssproperty --forge-file-picker-max-width - Controls the maximum width.
+ * @cssproperty --forge-file-picker-border-width - Controls the border width.
+ * @cssproperty --forge-file-picker-border-style - Controls the border style.
+ * @cssproperty --forge-file-picker-border-color - Controls the border color.
+ * @cssproperty --forge-file-picker-gap - Controls gap between each element.
+ * @cssproperty --forge-file-picker-padding - Controls the padding.
+ * @cssproperty --forge-file-picker-padding-block - Controls the top and bottom padding.
+ * @cssproperty --forge-file-picker-padding-inline - Controls the left and right padding.
+ * @cssproperty --forge-file-picker-disabled-opacity - Controls the opacity value of the file picker when it's disabled.
+ * @cssproperty --forge-file-picker-highlight-background - Controls the background color of the file picker when dragging files into the form.
+ * @cssproperty --forge-file-picker-highlight-border-color - Controls the border color of the file picker when dragging files into the form.
+ *
+ * @csspart form - The <form> element at the root.
+ * @csspart primary - The container element around the primary slot.
+ * @csspart secondary - The container element around the secondary slot.
+ * @csspart input - The <input type="file"> element.
+ * @csspart helper-text-container - The container around the helper-text slot.
  */
 let FilePickerComponent = class FilePickerComponent extends BaseComponent {
     static get observedAttributes() {

package/esm/index.d.ts

@@ -30,6 +30,7 @@ export * from './dialog';
 export * from './divider';
 export * from './drawer';
 export * from './expansion-panel';
+export * from './field-next';
 export * from './file-picker';
 export * from './floating-action-button';
 export * from './floating-label';
@@ -49,7 +50,6 @@ export * from './page-state';
 export * from './paginator';
 export * from './popover';
 export * from './popup';
-export * from './product-icon';
 export * from './quantity-field';
 export * from './radio';
 export * from './ripple';

package/esm/index.js

@@ -35,6 +35,7 @@ import { DialogComponent } from './dialog';
 import { DividerComponent } from './divider';
 import { DrawerComponent, MiniDrawerComponent, ModalDrawerComponent } from './drawer';
 import { ExpansionPanelComponent } from './expansion-panel';
+import { FieldComponent } from './field-next';
 import { FilePickerComponent } from './file-picker';
 import { FloatingActionButtonComponent } from './floating-action-button';
 import { FocusIndicatorComponent } from './focus-indicator';
@@ -54,7 +55,6 @@ import { PageStateComponent } from './page-state';
 import { PaginatorComponent } from './paginator';
 import { PopoverComponent } from './popover';
 import { PopupComponent } from './popup';
-import { ProductIconComponent } from './product-icon';
 import { QuantityFieldComponent } from './quantity-field';
 import { RadioComponent, RadioGroupComponent } from './radio';
 import { RippleComponent } from './ripple';
@@ -107,6 +107,7 @@ export * from './dialog';
 export * from './divider';
 export * from './drawer';
 export * from './expansion-panel';
+export * from './field-next';
 export * from './file-picker';
 export * from './floating-action-button';
 export * from './floating-label';
@@ -126,7 +127,6 @@ export * from './page-state';
 export * from './paginator';
 export * from './popover';
 export * from './popup';
-export * from './product-icon';
 export * from './quantity-field';
 export * from './radio';
 export * from './ripple';
@@ -187,6 +187,7 @@ const CUSTOM_ELEMENTS = [
     DividerComponent,
     DrawerComponent,
     ExpansionPanelComponent,
+    FieldComponent,
     FilePickerComponent,
     FloatingActionButtonComponent,
     FocusIndicatorComponent,
@@ -210,7 +211,6 @@ const CUSTOM_ELEMENTS = [
     PaginatorComponent,
     PopoverComponent,
     PopupComponent,
-    ProductIconComponent,
     ProfileCardComponent,
     QuantityFieldComponent,
     RadioComponent,

package/esm/label/label-constants.d.ts

@@ -5,15 +5,21 @@
  */
 export declare const LABEL_CONSTANTS: {
     elementName: "forge-label";
-    selectors: {
-        SLOT: string;
+    observedAttributes: {
+        FOR: string;
+        DYNAMIC: string;
+        NON_INTERACTIVE: string;
+        LEGEND: string;
     };
     attributes: {
         FOR: string;
         DYNAMIC: string;
-        STATIC: string;
+        NON_INTERACTIVE: string;
         LEGEND: string;
     };
+    selectors: {
+        SLOT: string;
+    };
     events: {
         CONNECTED: string;
     };

package/esm/label/label-constants.js

@@ -11,12 +11,13 @@ import { ICON_BUTTON_CONSTANTS } from '../icon-button';
 import { RADIO_CONSTANTS } from '../radio';
 import { SWITCH_CONSTANTS } from '../switch';
 const elementName = `${COMPONENT_NAME_PREFIX}label`;
-const attributes = {
+const observedAttributes = {
     FOR: 'for',
     DYNAMIC: 'dynamic',
-    STATIC: 'static',
+    NON_INTERACTIVE: 'non-interactive',
     LEGEND: 'legend'
 };
+const attributes = Object.assign({}, observedAttributes);
 const selectors = {
     SLOT: 'slot'
 };
@@ -33,8 +34,9 @@ const labelableChildSelectors = [
 ];
 export const LABEL_CONSTANTS = {
     elementName,
-    selectors,
+    observedAttributes,
     attributes,
+    selectors,
     events,
     labelableChildSelectors
 };

package/esm/label/label-foundation.d.ts

@@ -9,7 +9,7 @@ export interface ILabelFoundation extends ICustomElementFoundation {
     for: string | null | undefined;
     forElement: HTMLElement | null | undefined;
     dynamic: boolean;
-    static: boolean;
+    nonInteractive: boolean;
     legend: boolean;
     disconnect(): void;
     update(): void;
@@ -18,8 +18,9 @@ export declare class LabelFoundation implements ILabelFoundation {
     private _adapter;
     private _for;
     private _forElement;
+    private _clickTarget;
     private _dynamic;
-    private _static;
+    private _nonInteractive;
     private _legend;
     private _isConnected;
     private readonly _clickListener;
@@ -47,10 +48,12 @@ export declare class LabelFoundation implements ILabelFoundation {
     set for(value: string | null | undefined);
     get forElement(): HTMLElement | null | undefined;
     set forElement(value: HTMLElement | null | undefined);
+    get clickTarget(): HTMLElement | null | undefined;
+    set clickTarget(value: HTMLElement | null | undefined);
     get dynamic(): boolean;
     set dynamic(value: boolean);
-    get static(): boolean;
-    set static(value: boolean);
+    get nonInteractive(): boolean;
+    set nonInteractive(value: boolean);
     get legend(): boolean;
     set legend(value: boolean);
 }

package/esm/label/label-foundation.js

@@ -9,7 +9,7 @@ export class LabelFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._dynamic = false;
-        this._static = false;
+        this._nonInteractive = false;
         this._legend = false;
         this._isConnected = false;
         this._clickListener = (evt) => this._handleClick(evt);
@@ -36,6 +36,7 @@ export class LabelFoundation {
      */
     async _initializeAsLegend() {
         // Give ancestor elements a chance to connect to the DOM
+        // TODO: see if this works in Angular
         await task();
         this._adapter.emitHostEvent(LABEL_CONSTANTS.events.CONNECTED);
     }
@@ -51,9 +52,10 @@ export class LabelFoundation {
         }
     }
     _handleClick(evt) {
+        var _a;
         // Prevent duplicate clicks from a nested target element or if the event originates
         // from within the target element
-        const targetEl = this._adapter.getTargetElement();
+        const targetEl = (_a = this._clickTarget) !== null && _a !== void 0 ? _a : this._adapter.getTargetElement();
         if (evt.target === targetEl || (targetEl === null || targetEl === void 0 ? void 0 : targetEl.contains(evt.target))) {
             return;
         }
@@ -69,7 +71,7 @@ export class LabelFoundation {
         this._adapter.updateTargetLabel();
     }
     _connect() {
-        if (!this._static) {
+        if (!this._nonInteractive) {
             this._adapter.addHostListener('click', this._clickListener);
         }
         this._adapter.updateTargetLabel();
@@ -114,6 +116,14 @@ export class LabelFoundation {
             this._tryConnect();
         }
     }
+    get clickTarget() {
+        return this._clickTarget;
+    }
+    set clickTarget(value) {
+        if (this._clickTarget !== value) {
+            this._clickTarget = value;
+        }
+    }
     get dynamic() {
         return this._dynamic;
     }
@@ -129,18 +139,18 @@ export class LabelFoundation {
             }
         }
     }
-    get static() {
-        return this._static;
+    get nonInteractive() {
+        return this._nonInteractive;
     }
-    set static(value) {
-        if (this._static !== value) {
-            this._static = value;
-            this._adapter.toggleHostAttribute(LABEL_CONSTANTS.attributes.STATIC, this._static);
+    set nonInteractive(value) {
+        if (this._nonInteractive !== value) {
+            this._nonInteractive = value;
+            this._adapter.toggleHostAttribute(LABEL_CONSTANTS.attributes.NON_INTERACTIVE, this._nonInteractive);
             // The click listener is only added if the label is connected
             if (!this._isConnected) {
                 return;
             }
-            if (this._static) {
+            if (this._nonInteractive) {
                 this._adapter.removeHostListener('click', this._clickListener);
             }
             else {

package/esm/label/label.d.ts

@@ -8,7 +8,7 @@ export interface ILabelComponent extends IBaseComponent {
     for: string | null | undefined;
     forElement: HTMLElement | null | undefined;
     dynamic: boolean;
-    static: boolean;
+    nonInteractive: boolean;
     legend: boolean;
     update(): void;
 }
@@ -25,13 +25,14 @@ declare global {
  *
  * @property {string | null | undefined} for - The id of the associated element.
  * @property {HTMLElement | null | undefined} forElement - The associated element.
+ * @property {HTMLElement | null | undefined} clickTarget - The element that a click should be simulated on. If not defined clicks act on the associated element.
  * @property {boolean} dynamic - Propagates changes in the label's text content to the associated element.
- * @property {boolean} static - Removes click handling from the label.
+ * @property {boolean} nonInteractive - Removes click handling from the label.
  * @property {boolean} legend - Whether or not the label should be associated with an ancestor element.
  *
  * @attribute {string} for - The id of the associated form component.
  * @attribute {boolean} dynamic - Propagates changes in the label's text content to the associated element.
- * @attribute {boolean} static - Removes click handling from the label.
+ * @attribute {boolean} non-interactive - Removes click handling from the label.
  * @attribute {boolean} legend - Whether or not the label should be associated with an ancestor element.
  *
  * @method update - Updates the targetted element with the label's current text content.
@@ -47,8 +48,9 @@ export declare class LabelComponent extends BaseComponent implements ILabelCompo
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     for: string | null | undefined;
     forElement: HTMLElement | null | undefined;
+    clickTarget: HTMLElement | null | undefined;
     dynamic: boolean;
-    static: boolean;
+    nonInteractive: boolean;
     legend: boolean;
     /**
      * Updates the targetted element with the label's current text content.

package/esm/label/label.js

@@ -10,7 +10,7 @@ import { LabelAdapter } from './label-adapter';
 import { LABEL_CONSTANTS } from './label-constants';
 import { LabelFoundation } from './label-foundation';
 const template = '<template><slot></slot></template>';
-const style = ':host{-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);display:inline-block;cursor:default}:host([hidden]){display:none}';
+const style = ':host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);display:inline-block;cursor:default}:host([hidden]){display:none}';
 /**
  * @tag forge-label
  *
@@ -19,13 +19,14 @@ const style = ':host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:an
  *
  * @property {string | null | undefined} for - The id of the associated element.
  * @property {HTMLElement | null | undefined} forElement - The associated element.
+ * @property {HTMLElement | null | undefined} clickTarget - The element that a click should be simulated on. If not defined clicks act on the associated element.
  * @property {boolean} dynamic - Propagates changes in the label's text content to the associated element.
- * @property {boolean} static - Removes click handling from the label.
+ * @property {boolean} nonInteractive - Removes click handling from the label.
  * @property {boolean} legend - Whether or not the label should be associated with an ancestor element.
  *
  * @attribute {string} for - The id of the associated form component.
  * @attribute {boolean} dynamic - Propagates changes in the label's text content to the associated element.
- * @attribute {boolean} static - Removes click handling from the label.
+ * @attribute {boolean} non-interactive - Removes click handling from the label.
  * @attribute {boolean} legend - Whether or not the label should be associated with an ancestor element.
  *
  * @method update - Updates the targetted element with the label's current text content.
@@ -34,12 +35,7 @@ const style = ':host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:an
  */
 let LabelComponent = class LabelComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            LABEL_CONSTANTS.attributes.FOR,
-            LABEL_CONSTANTS.attributes.DYNAMIC,
-            LABEL_CONSTANTS.attributes.STATIC,
-            LABEL_CONSTANTS.attributes.LEGEND
-        ];
+        return Object.values(LABEL_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
@@ -60,8 +56,8 @@ let LabelComponent = class LabelComponent extends BaseComponent {
             case LABEL_CONSTANTS.attributes.DYNAMIC:
                 this.dynamic = coerceBoolean(newValue);
                 break;
-            case LABEL_CONSTANTS.attributes.STATIC:
-                this.static = coerceBoolean(newValue);
+            case LABEL_CONSTANTS.attributes.NON_INTERACTIVE:
+                this.nonInteractive = coerceBoolean(newValue);
                 break;
             case LABEL_CONSTANTS.attributes.LEGEND:
                 this.legend = coerceBoolean(newValue);
@@ -81,12 +77,15 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], LabelComponent.prototype, "forElement", void 0);
+__decorate([
+    FoundationProperty()
+], LabelComponent.prototype, "clickTarget", void 0);
 __decorate([
     FoundationProperty()
 ], LabelComponent.prototype, "dynamic", void 0);
 __decorate([
     FoundationProperty()
-], LabelComponent.prototype, "static", void 0);
+], LabelComponent.prototype, "nonInteractive", void 0);
 __decorate([
     FoundationProperty()
 ], LabelComponent.prototype, "legend", void 0);

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

@@ -32,6 +32,6 @@ export declare class ListAdapter extends BaseAdapter<IListComponent> implements
     /** Calls the provided callback on all list items to apply an updated property to each list item. */
     updateListItems(cb: (li: IListItemComponent) => void): void;
     updateListItemRole(): void;
-    private _getListItems;
+    private _getOwnListItems;
     private _getFocusableListItems;
 }

package/esm/list/list/list-adapter.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { isDeepEqual } from '@tylertech/forge-core';
+import { deepQuerySelectorAll, isDeepEqual } from '@tylertech/forge-core';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { LIST_ITEM_CONSTANTS } from '../list-item/list-item-constants';
 import { ListComponentItemRole, LIST_CONSTANTS } from './list-constants';
@@ -20,7 +20,7 @@ export class ListAdapter extends BaseAdapter {
     focusNextListItem() {
         const listItems = this._getFocusableListItems();
         if (listItems.length) {
-            const focusedListItemIndex = listItems.findIndex(item => item.matches(':focus'));
+            const focusedListItemIndex = listItems.findIndex(item => item.matches(':focus-within'));
             const nextIndex = focusedListItemIndex < listItems.length - 1 ? focusedListItemIndex + 1 : 0;
             if (nextIndex <= listItems.length - 1) {
                 listItems[nextIndex].focus({ preventScroll: true });
@@ -31,7 +31,7 @@ export class ListAdapter extends BaseAdapter {
     focusPreviousListItem() {
         const listItems = this._getFocusableListItems();
         if (listItems.length) {
-            const focusedListItemIndex = listItems.findIndex(item => item.matches(':focus'));
+            const focusedListItemIndex = listItems.findIndex(item => item.matches(':focus-within'));
             const nextIndex = focusedListItemIndex > 0 ? focusedListItemIndex - 1 : listItems.length - 1;
             if (nextIndex >= 0) {
                 listItems[nextIndex].focus({ preventScroll: true });
@@ -54,7 +54,7 @@ export class ListAdapter extends BaseAdapter {
     }
     /** Select all list items that match values in the provided array of values. */
     setSelectedListItems(value) {
-        const listItems = this._getListItems();
+        const listItems = this._getOwnListItems();
         if (listItems.length) {
             const values = Array.isArray(value) ? value : [value];
             for (const item of listItems) {
@@ -64,18 +64,31 @@ export class ListAdapter extends BaseAdapter {
     }
     /** Calls the provided callback on all list items to apply an updated property to each list item. */
     updateListItems(cb) {
-        this._getListItems().forEach(cb);
+        this._getOwnListItems().forEach(cb);
     }
     updateListItemRole() {
         var _a;
         const role = (_a = ListComponentItemRole[this._component.getAttribute('role')]) !== null && _a !== void 0 ? _a : 'listitem';
         this.updateListItems(li => li.role = role);
     }
-    _getListItems() {
-        const listItems = Array.from(this._component.querySelectorAll(LIST_ITEM_CONSTANTS.elementName));
-        return listItems.filter(item => item.closest(LIST_CONSTANTS.elementName) === this._component);
+    _getOwnListItems() {
+        // Find all deeply nested list items
+        const allChildListItems = deepQuerySelectorAll(this._component, LIST_ITEM_CONSTANTS.elementName);
+        // Get all list items that are scoped to this component only (not within sub-lists).
+        const scopedListItems = [];
+        const listener = evt => {
+            const composedPath = evt.composedPath();
+            const composedBeforeUs = composedPath.slice(0, composedPath.indexOf(this._component));
+            if (!composedBeforeUs.some((el) => el.localName === LIST_CONSTANTS.elementName.toLowerCase())) {
+                scopedListItems.push(evt.target);
+            }
+        };
+        this._component.addEventListener(LIST_CONSTANTS.events.SCOPE_TEST, listener);
+        allChildListItems.forEach(li => li.dispatchEvent(new CustomEvent(LIST_CONSTANTS.events.SCOPE_TEST, { bubbles: true, composed: true })));
+        this._component.removeEventListener(LIST_CONSTANTS.events.SCOPE_TEST, listener);
+        return scopedListItems;
     }
     _getFocusableListItems() {
-        return this._getListItems().filter(li => !li.disabled && !li.nonInteractive && !li.hidden);
+        return this._getOwnListItems().filter(li => !li.disabled && !li.nonInteractive && !li.hidden);
     }
 }

package/esm/list/list/list-constants.d.ts

@@ -18,6 +18,9 @@ export declare const LIST_CONSTANTS: {
         THREE_LINE: string;
         WRAP: string;
     };
+    events: {
+        readonly SCOPE_TEST: `${string}-item-scope-test`;
+    };
 };
 export declare const ListComponentItemRole: {
     list: string;

package/esm/list/list/list-constants.js

@@ -19,9 +19,13 @@ const observedAttributes = {
     WRAP: 'wrap'
 };
 const attributes = Object.assign({}, observedAttributes);
+const events = {
+    SCOPE_TEST: `${elementName}-item-scope-test`
+};
 export const LIST_CONSTANTS = {
     elementName,
-    attributes
+    attributes,
+    events
 };
 export const ListComponentItemRole = {
     list: 'listitem',

package/esm/list/list/list-foundation.js

@@ -27,6 +27,12 @@ export class ListFoundation {
         }
     }
     _onKeydown(evt) {
+        const path = evt.composedPath();
+        const composedBeforeUs = path.slice(0, path.indexOf(this._adapter.hostElement));
+        const fromListDescendant = composedBeforeUs.some((el) => el.localName === LIST_CONSTANTS.elementName.toLowerCase());
+        if (fromListDescendant) {
+            return; // We ignore keydown events coming from sub-lists because they are already handling it themselves
+        }
         const { key, altKey, ctrlKey, shiftKey, metaKey } = evt;
         if (altKey || ctrlKey || shiftKey || metaKey) {
             return;

package/esm/list/list-item/list-item-constants.js

@@ -29,7 +29,7 @@ const classes = {
 };
 const selectors = {
     ROOT: `.${classes.ROOT}`,
-    CHECKBOX_RADIO_SELECTOR: ':is(input[type=checkbox], input[type=radio], forge-checkbox):not(:disabled):not([forge-ignore])',
+    CHECKBOX_RADIO_SELECTOR: ':is(input[type=checkbox],input[type=radio],forge-checkbox,forge-radio):not(:disabled):not([forge-ignore])',
     SWITCH_SELECTOR: 'forge-switch:not([disabled]):not([forge-ignore])',
     IGNORE: '[forge-ignore],[data-forge-ignore]'
 };