@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

package/esm/icon/icon.js

@@ -10,22 +10,42 @@ import { IconFoundation } from './icon-foundation';
 import { ICON_CONSTANTS } from './icon-constants';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template></template>';
-const styles = ':host{font-size:24px;font-size:var(--forge-icon-font-size, 24px);display:inline-block;contain:content;-webkit-box-sizing:content-box!important;box-sizing:content-box!important}:host>svg{fill:currentColor;fill:var(--forge-icon-theme-color,currentColor);stroke:currentColor;stroke:var(--forge-icon-theme-color,currentColor);display:block;width:1em;height:1em;stroke-width:0}:host([hidden]){display:none}:host([theme=primary]){color:var(\"primary\")}:host([theme=secondary]){color:var(\"secondary\")}:host([theme=warning]){color:#d14900;color:var(\"warning\", #d14900)}:host([theme=danger]){color:#b00020;color:var(\"danger\", #b00020)}:host([theme=success]){color:#2e7d32;color:var(\"success\", #2e7d32)}:host([theme=info]){color:#424242;color:var(\"info\", #424242)}:host([theme=tertiary]){color:#3d5afe;color:var(\"tertiary\", #3d5afe)}';
+const styles = ':host{--_icon-color:var(--forge-icon-color, currentColor);--_icon-size:var(--forge-icon-size, 1em);--_icon-width:var(--forge-icon-width, var(--_icon-size));--_icon-height:var(--forge-icon-height, var(--_icon-size));--_icon-font-size:var(--forge-icon-font-size, calc(var(--forge-typography-font-size, 1rem) * 1.5))}:host{display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content;font-size:var(--_icon-font-size)}:host([hidden]){display:none}svg{display:block;width:var(--_icon-width);height:var(--_icon-height);fill:var(--_icon-color);stroke:var(--_icon-color);stroke-width:0}:host([theme=primary]){--_icon-color:var(--forge-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=secondary]){--_icon-color:var(--forge-icon-color, var(--forge-theme-secondary, #ffc107))}:host([theme=tertiary]){--_icon-color:var(--forge-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=success]){--_icon-color:var(--forge-icon-color, var(--forge-theme-success, #2e7d32))}:host([theme=error]){--_icon-color:var(--forge-icon-color, var(--forge-theme-error, #b00020))}:host([theme=warning]){--_icon-color:var(--forge-icon-color, var(--forge-theme-warning, #d14900))}:host([theme=text-medium]){--_icon-color:var(--forge-icon-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host([theme=text-low]){--_icon-color:var(--forge-icon-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)))}';
 /**
- * The web component class behind the `<forge-icon>` custom element.
- *
  * @tag forge-icon
+ *
+ * @summary Icons are used to represent information visually
+ *
+ * @property {string} name - The name of the icon to render.
+ * @property {string} src - Provides the ability to set the SVG string content directly.
+ * @property {boolean} lazy - Controls whether the icon will be loaded dynamically when it comes into view. False by default.
+ * @property {boolean} external - Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't already defined in the registry.
+ * @property {IconExternalType} externalType - The type of icon to load externally. Possible values: "standard" (default), "extended", "custom".
+ * @property {IconUrlBuilder} externalUrlBuilder - A callback that can be provided to generate a URL that will be used to fetch an SVG icon.
+ * @property {string} viewbox - A custom value to apply to the `viewBox` attribute on the internal `<svg>` element.
+ * @property {IconTheme} theme - The theme to apply to the icon.
+ *
+ * @attribute {string} name - The name of the icon to render.
+ * @attribute {string} src - Provides the ability to set the SVG string content directly.
+ * @attribute {boolean} lazy - Controls whether the icon will be loaded dynamically when it comes into view. False by default.
+ * @attribute {boolean} external - Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't already defined in the registry.
+ * @attribute {IconExternalType} externalType - The type of icon to load externally. Possible values: "standard" (default), "extended", "custom".
+ * @attribute {string} viewbox - A custom value to apply to the `viewBox` attribute on the internal `<svg>` element.
+ * @attribute {IconTheme} theme - The theme to apply to the icon.
+ *
+ * @method layout - Forces a reload of the icon content.
+ *
+ * @cssproperty --forge-icon-color - The color of the icon.
+ * @cssproperty --forge-icon-size - The size of the icon. Defaults to the font-size of the context it is placed in.
+ * @cssproperty --forge-icon-width - The width of the icon.
+ * @cssproperty --forge-icon-height - The height of the icon.
+ * @cssproperty --forge-icon-font-size - The font size of the icon.
+ *
+ * @csspart svg - The internal SVG element.
  */
 let IconComponent = class IconComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            ICON_CONSTANTS.attributes.NAME,
-            ICON_CONSTANTS.attributes.SRC,
-            ICON_CONSTANTS.attributes.LAZY,
-            ICON_CONSTANTS.attributes.EXTERNAL,
-            ICON_CONSTANTS.attributes.EXTERNAL_TYPE,
-            ICON_CONSTANTS.attributes.VIEWBOX
-        ];
+        return Object.values(ICON_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
@@ -36,28 +56,31 @@ let IconComponent = class IconComponent extends BaseComponent {
         this._foundation.initialize();
     }
     disconnectedCallback() {
-        this._foundation.disconnect();
+        this._foundation.destroy();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case ICON_CONSTANTS.attributes.NAME:
+            case ICON_CONSTANTS.observedAttributes.NAME:
                 this.name = newValue;
                 break;
-            case ICON_CONSTANTS.attributes.SRC:
+            case ICON_CONSTANTS.observedAttributes.SRC:
                 this.src = newValue;
                 break;
-            case ICON_CONSTANTS.attributes.LAZY:
+            case ICON_CONSTANTS.observedAttributes.LAZY:
                 this.lazy = coerceBoolean(newValue);
                 break;
-            case ICON_CONSTANTS.attributes.EXTERNAL:
+            case ICON_CONSTANTS.observedAttributes.EXTERNAL:
                 this.external = coerceBoolean(newValue);
                 break;
-            case ICON_CONSTANTS.attributes.EXTERNAL_TYPE:
+            case ICON_CONSTANTS.observedAttributes.EXTERNAL_TYPE:
                 this.externalType = newValue;
                 break;
-            case ICON_CONSTANTS.attributes.VIEWBOX:
+            case ICON_CONSTANTS.observedAttributes.VIEWBOX:
                 this.viewbox = newValue;
                 break;
+            case ICON_CONSTANTS.observedAttributes.THEME:
+                this.theme = newValue;
+                break;
         }
     }
     /** Forces a reload of the icon. */
@@ -86,6 +109,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], IconComponent.prototype, "viewbox", void 0);
+__decorate([
+    FoundationProperty()
+], IconComponent.prototype, "theme", void 0);
 IconComponent = __decorate([
     CustomElement({
         name: ICON_CONSTANTS.elementName

package/esm/icon/index.js

@@ -5,8 +5,6 @@
  */
 import { defineCustomElement } from '@tylertech/forge-core';
 import { IconComponent } from './icon';
-import { IconRegistry } from './icon-registry';
-import { ICON_REGISTRY_KEY } from './icon-constants';
 export * from './icon-adapter';
 export * from './icon-constants';
 export * from './icon-foundation';
@@ -17,7 +15,3 @@ export * from './icon-component-delegate';
 export function defineIconComponent() {
     defineCustomElement(IconComponent);
 }
-// Store a reference to the icon registry on `window`.
-if (window && !window[ICON_REGISTRY_KEY]) {
-    window[ICON_REGISTRY_KEY] = IconRegistry;
-}

package/esm/icon-button/icon-button-component-delegate.d.ts

@@ -6,7 +6,7 @@
 import { IconExternalType, IIconComponent } from '../icon';
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { IIconButtonComponent } from './icon-button';
-import { PopupPlacement } from '../popup';
+import { TooltipPlacement } from '../tooltip/tooltip-constants';
 export type IconButtonComponentDelegateProps = Partial<IIconButtonComponent>;
 export interface IIconButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
     iconName?: string;
@@ -15,7 +15,7 @@ export interface IIconButtonComponentDelegateOptions extends IBaseComponentDeleg
     iconType?: 'font' | 'component';
     iconClass?: string | string[];
     tooltip?: string;
-    tooltipPosition?: PopupPlacement;
+    tooltipPosition?: TooltipPlacement;
 }
 export interface IIconButtonComponentDelegateConfig extends IBaseComponentDelegateConfig<IIconButtonComponent, IIconButtonComponentDelegateOptions> {
 }

package/esm/index.d.ts

@@ -30,10 +30,9 @@ export * from './dialog';
 export * from './divider';
 export * from './drawer';
 export * from './expansion-panel';
-export * from './field-next';
+export * from './field';
 export * from './file-picker';
 export * from './floating-action-button';
-export * from './floating-label';
 export * from './focus-indicator';
 export * from './icon';
 export * from './icon-button';
@@ -49,10 +48,8 @@ export * from './overlay';
 export * from './page-state';
 export * from './paginator';
 export * from './popover';
-export * from './popup';
 export * from './quantity-field';
 export * from './radio';
-export * from './ripple';
 export * from './scaffold';
 export * from './select';
 export * from './skeleton';

package/esm/index.js

@@ -35,7 +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 { FieldComponent } from './field';
 import { FilePickerComponent } from './file-picker';
 import { FloatingActionButtonComponent } from './floating-action-button';
 import { FocusIndicatorComponent } from './focus-indicator';
@@ -54,10 +54,8 @@ import { OverlayComponent } from './overlay';
 import { PageStateComponent } from './page-state';
 import { PaginatorComponent } from './paginator';
 import { PopoverComponent } from './popover';
-import { PopupComponent } from './popup';
 import { QuantityFieldComponent } from './quantity-field';
 import { RadioComponent, RadioGroupComponent } from './radio';
-import { RippleComponent } from './ripple';
 import { ScaffoldComponent } from './scaffold';
 import { OptionComponent, OptionGroupComponent, SelectComponent } from './select';
 import { SelectDropdownComponent } from './select/select-dropdown';
@@ -107,10 +105,9 @@ export * from './dialog';
 export * from './divider';
 export * from './drawer';
 export * from './expansion-panel';
-export * from './field-next';
+export * from './field';
 export * from './file-picker';
 export * from './floating-action-button';
-export * from './floating-label';
 export * from './focus-indicator';
 export * from './icon';
 export * from './icon-button';
@@ -126,10 +123,8 @@ export * from './overlay';
 export * from './page-state';
 export * from './paginator';
 export * from './popover';
-export * from './popup';
 export * from './quantity-field';
 export * from './radio';
-export * from './ripple';
 export * from './scaffold';
 export * from './select';
 export * from './skeleton';
@@ -210,12 +205,10 @@ const CUSTOM_ELEMENTS = [
     PageStateComponent,
     PaginatorComponent,
     PopoverComponent,
-    PopupComponent,
     ProfileCardComponent,
     QuantityFieldComponent,
     RadioComponent,
     RadioGroupComponent,
-    RippleComponent,
     ScaffoldComponent,
     SelectComponent,
     SelectDropdownComponent,

package/esm/label-value/index.d.ts

@@ -3,9 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './label-value-adapter';
 export * from './label-value-constants';
-export * from './label-value-foundation';
 export * from './label-value';
 export * from './label-value-component-delegate';
 export declare function defineLabelValueComponent(): void;

package/esm/label-value/index.js

@@ -5,9 +5,7 @@
  */
 import { defineCustomElement } from '@tylertech/forge-core';
 import { LabelValueComponent } from './label-value';
-export * from './label-value-adapter';
 export * from './label-value-constants';
-export * from './label-value-foundation';
 export * from './label-value';
 export * from './label-value-component-delegate';
 export function defineLabelValueComponent() {

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

@@ -5,23 +5,18 @@
  */
 export declare const LABEL_VALUE_CONSTANTS: {
     elementName: "forge-label-value";
-    attributes: {
+    observedAttributes: {
         EMPTY: string;
         ELLIPSIS: string;
-        DENSITY: string;
-        ALIGN: string;
+        INLINE: string;
+        /** @deprecated Use `inset` instead. */
+        DENSE: string;
     };
-    classes: {
+    attributes: {
         EMPTY: string;
         ELLIPSIS: string;
+        INLINE: string;
+        /** @deprecated Use `inset` instead. */
         DENSE: string;
-        ROOMY: string;
-        ALIGN_CENTER: string;
-        ALIGN_RIGHT: string;
-    };
-    selectors: {
-        ROOT: string;
     };
 };
-export type LabelValueAlignment = 'left' | 'center' | 'right';
-export { type FieldDensityType as LabelValueDensityType } from '../field/field-constants';

package/esm/label-value/label-value-constants.js

@@ -5,26 +5,16 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}label-value`;
-const attributes = {
+const observedAttributes = {
     EMPTY: 'empty',
     ELLIPSIS: 'ellipsis',
-    DENSITY: 'density',
-    ALIGN: 'align'
-};
-const classes = {
-    EMPTY: 'forge-label-value--empty',
-    ELLIPSIS: 'forge-label-value--ellipsis',
-    DENSE: 'forge-label-value--dense',
-    ROOMY: 'forge-label-value--roomy',
-    ALIGN_CENTER: 'forge-label-value--align-center',
-    ALIGN_RIGHT: 'forge-label-value--align-right'
-};
-const selectors = {
-    ROOT: '.forge-label-value'
+    INLINE: 'inline',
+    /** @deprecated Use `inset` instead. */
+    DENSE: 'dense'
 };
+const attributes = Object.assign({}, observedAttributes);
 export const LABEL_VALUE_CONSTANTS = {
     elementName,
-    attributes,
-    classes,
-    selectors
+    observedAttributes,
+    attributes
 };

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

@@ -3,14 +3,13 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { LabelValueAlignment } from './label-value-constants';
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-import { FieldDensityType } from '../field/field-constants';
 export interface ILabelValueComponent extends IBaseComponent {
     empty: boolean;
     ellipsis: boolean;
-    density: FieldDensityType;
-    align: LabelValueAlignment;
+    inline: boolean;
+    /** @deprecated Use `inline` instead. */
+    dense: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -18,22 +17,51 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-label-value>` custom element.
- *
  * @tag forge-label-value
+ *
+ * @summary Label-value pairs are used to display a label and a value in a compact format.
+ *
+ * @property {boolean} [empty=false] - If true, the value will be displayed in an alternative emphasized style.
+ * @property {boolean} [ellipsis=false] - If true, the value will be truncated with an ellipsis if it overflows its container.
+ * @property {boolean} [inline=false] - If true, the label and value will be displayed on the same line.
+ *
+ * @attribute {boolean} empty - If present, the value will be displayed in an alternative emphasized style.
+ * @attribute {boolean} ellipsis - If present, the value will be truncated with an ellipsis if it overflows its container.
+ * @attribute {boolean} inline - If present, the label and value will be displayed on the same line.
+ *
+ * @cssproperty --forge-label-value-align - Aligns the label and value. Possible values: `start` (default), `center`, `end`.
+ * @cssproperty --forge-label-value-label-spacing - The spacing between the label and value.
+ * @cssproperty --forge-label-value-label-block-start-spacing - The block start spacing for the label.
+ * @cssproperty --forge-label-value-label-block-end-spacing - The block end spacing for the label.
+ * @cssproperty --forge-label-value-label-color - The color to apply to the label.
+ * @cssproperty --forge-label-value-icon-spacing - The spacing between the icon and the label.
+ * @cssproperty --forge-label-value-inline-label-spacing - The spacing between the label and value when displayed inline.
+ * @cssproperty --forge-label-value-empty-color - The color to apply to the value when empty.
+ * @cssproperty --forge-label-value-empty-style - The font-style to apply to the value when empty.
+ *
+ * @csspart root - The root layout container element.
+ * @csspart label - The label container element.
+ * @csspart value - The value container element.
+ * @csspart icon - The icon container element.
+ *
+ * @slot label - The label to display.
+ * @slot value - The value to display.
+ * @slot icon - An icon to display next to the label.
  */
 export declare class LabelValueComponent extends BaseComponent implements ILabelValueComponent {
     static get observedAttributes(): string[];
-    private _foundation;
+    private _empty;
+    private _ellipsis;
+    private _inline;
     constructor();
-    connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Gets/sets the empty state. */
-    empty: boolean;
-    /** Gets/sets the wrap-content attribute. */
-    ellipsis: boolean;
-    /** Controls the density type. */
-    density: FieldDensityType;
-    /** Gets/sets the alignment. */
-    align: LabelValueAlignment;
+    get empty(): boolean;
+    set empty(value: boolean);
+    get ellipsis(): boolean;
+    set ellipsis(value: boolean);
+    get inline(): boolean;
+    set inline(value: boolean);
+    /** @deprecated Use `inline` instead. */
+    get dense(): boolean;
+    set dense(value: boolean);
 }

package/esm/label-value/label-value.js

@@ -4,64 +4,106 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, attachShadowTemplate, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
-import { LabelValueAdapter } from './label-value-adapter';
-import { LabelValueFoundation } from './label-value-foundation';
+import { CustomElement, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
 import { LABEL_VALUE_CONSTANTS } from './label-value-constants';
 import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-label-value\" part=\"root\"><div class=\"forge-label-value__icon-container\" part=\"icon-container\"><slot name=\"icon\"></slot></div><div class=\"forge-label-value__container\" part=\"container\"><div class=\"forge-label-value__label\" part=\"label-container\"><slot name=\"label\"></slot></div><div class=\"forge-label-value__value\" part=\"value-container\"><slot name=\"value\"></slot></div></div></div></template>';
-const styles = ':host{display:block;min-width:0}:host([hidden]){display:none}.forge-label-value{display:-webkit-box;display:flex;min-height:3rem}.forge-label-value__container{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-flex:1;flex:1}.forge-label-value__icon-container{display:-webkit-box;display:flex;-webkit-box-align:start;align-items:flex-start}.forge-label-value__icon-container ::slotted([slot=icon]){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));font-size:1.25rem!important;margin-right:8px;margin-top:4px}.forge-label-value--align-center .forge-label-value__container{-webkit-box-align:center;align-items:center}.forge-label-value--align-right .forge-label-value__container{-webkit-box-align:end;align-items:flex-end}.forge-label-value__label{-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;-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);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.8125rem;height:.8125rem;line-height:.8125rem;margin-top:.5rem}.forge-label-value__value{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size, 1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);line-height:1rem;margin-top:.375rem}.forge-label-value--roomy{min-height:3.5rem}.forge-label-value--roomy .forge-label-value__label{margin-top:.625rem}.forge-label-value--roomy .forge-label-value__value{margin-top:.5rem}.forge-label-value--roomy ::slotted([slot=icon]){margin-top:6px}.forge-label-value--dense{min-height:1.5rem}.forge-label-value--dense .forge-label-value__container{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}.forge-label-value--dense .forge-label-value__container .forge-label-value__label{margin-top:0;margin-right:8px}.forge-label-value--dense .forge-label-value__container .forge-label-value__value{margin-top:0;font-size:.875rem}.forge-label-value--dense ::slotted([slot=icon]){margin-top:2px}.forge-label-value--empty .forge-label-value__value{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-style:italic}.forge-label-value--ellipsis .forge-label-value__container{overflow:hidden}.forge-label-value--ellipsis .forge-label-value__container .forge-label-value__label,.forge-label-value--ellipsis .forge-label-value__container .forge-label-value__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}';
+const template = '<template><div class=\"forge-label-value\" part=\"root\"><div class=\"icon\" part=\"icon\"><slot name=\"icon\"></slot></div><div class=\"label\" part=\"label\"><slot name=\"label\"></slot></div><div class=\"value\" part=\"value\"><slot name=\"value\"></slot></div></div></template>';
+const styles = ':host{display:inline-block;min-width:0}:host([hidden]){display:none}.forge-label-value{--_label-value-align:var(--forge-label-value-align, start);--_label-value-label-spacing:var(--forge-label-value-label-spacing, var(--forge-spacing-xxsmall, 4px));--_label-value-label-block-start-spacing:var(--forge-label-value-label-block-start-spacing, var(--_label-value-label-spacing));--_label-value-label-block-end-spacing:var(--forge-label-value-label-block-end-spacing, var(--_label-value-label-spacing));--_label-value-label-color:var(--forge-label-value-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_label-value-icon-spacing:var(--forge-label-value-icon-spacing, var(--forge-spacing-xxsmall, 4px));--_label-value-inline-label-spacing:var(--forge-label-value-inline-label-spacing, var(--forge-spacing-xsmall, 8px));--_label-value-empty-color:var(--forge-label-value-empty-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_label-value-empty-style:var(--forge-label-value-empty-style, italic)}.forge-label-value{display:grid;grid-template-columns:auto 1fr;grid-template-areas:\"icon label\" \"icon value\"}.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);-webkit-text-decoration:var(--forge-typography-label2-text-decoration,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);grid-area:label;justify-self:var(--_label-value-align);-webkit-margin-before:var(--_label-value-label-block-start-spacing);margin-block-start:var(--_label-value-label-block-start-spacing);-webkit-margin-after:var(--_label-value-label-block-end-spacing);margin-block-end:var(--_label-value-label-block-end-spacing);line-height:normal;text-align:var(--_label-value-align);color:var(--_label-value-label-color)}.value{-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);grid-area:value;display:grid;-webkit-box-align:center;align-items:center;justify-self:var(--_label-value-align);line-height:normal;text-align:var(--_label-value-align)}.icon{display:-webkit-inline-box;display:inline-flex;grid-area:icon}::slotted([slot=icon]){-webkit-margin-end:var(--_label-value-icon-spacing);margin-inline-end:var(--_label-value-icon-spacing)}:host(:is([inline],[dense])) .forge-label-value{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}:host(:is([inline],[dense])) .label{margin-block:0;-webkit-margin-end:var(--_label-value-inline-label-spacing);margin-inline-end:var(--_label-value-inline-label-spacing)}:host([ellipsis]) ::slotted([slot=value]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([empty]) .value{color:var(--_label-value-empty-color);font-style:var(--_label-value-empty-style)}';
 /**
- * The web component class behind the `<forge-label-value>` custom element.
- *
  * @tag forge-label-value
+ *
+ * @summary Label-value pairs are used to display a label and a value in a compact format.
+ *
+ * @property {boolean} [empty=false] - If true, the value will be displayed in an alternative emphasized style.
+ * @property {boolean} [ellipsis=false] - If true, the value will be truncated with an ellipsis if it overflows its container.
+ * @property {boolean} [inline=false] - If true, the label and value will be displayed on the same line.
+ *
+ * @attribute {boolean} empty - If present, the value will be displayed in an alternative emphasized style.
+ * @attribute {boolean} ellipsis - If present, the value will be truncated with an ellipsis if it overflows its container.
+ * @attribute {boolean} inline - If present, the label and value will be displayed on the same line.
+ *
+ * @cssproperty --forge-label-value-align - Aligns the label and value. Possible values: `start` (default), `center`, `end`.
+ * @cssproperty --forge-label-value-label-spacing - The spacing between the label and value.
+ * @cssproperty --forge-label-value-label-block-start-spacing - The block start spacing for the label.
+ * @cssproperty --forge-label-value-label-block-end-spacing - The block end spacing for the label.
+ * @cssproperty --forge-label-value-label-color - The color to apply to the label.
+ * @cssproperty --forge-label-value-icon-spacing - The spacing between the icon and the label.
+ * @cssproperty --forge-label-value-inline-label-spacing - The spacing between the label and value when displayed inline.
+ * @cssproperty --forge-label-value-empty-color - The color to apply to the value when empty.
+ * @cssproperty --forge-label-value-empty-style - The font-style to apply to the value when empty.
+ *
+ * @csspart root - The root layout container element.
+ * @csspart label - The label container element.
+ * @csspart value - The value container element.
+ * @csspart icon - The icon container element.
+ *
+ * @slot label - The label to display.
+ * @slot value - The value to display.
+ * @slot icon - An icon to display next to the label.
  */
 let LabelValueComponent = class LabelValueComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            LABEL_VALUE_CONSTANTS.attributes.EMPTY,
-            LABEL_VALUE_CONSTANTS.attributes.ELLIPSIS,
-            LABEL_VALUE_CONSTANTS.attributes.DENSITY,
-            LABEL_VALUE_CONSTANTS.attributes.ALIGN
-        ];
+        return Object.values(LABEL_VALUE_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
+        this._empty = false;
+        this._ellipsis = false;
+        this._inline = false;
         attachShadowTemplate(this, template, styles);
-        this._foundation = new LabelValueFoundation(new LabelValueAdapter(this));
-    }
-    connectedCallback() {
-        this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case LABEL_VALUE_CONSTANTS.attributes.EMPTY:
+            case LABEL_VALUE_CONSTANTS.observedAttributes.EMPTY:
                 this.empty = coerceBoolean(newValue);
                 break;
-            case LABEL_VALUE_CONSTANTS.attributes.ELLIPSIS:
+            case LABEL_VALUE_CONSTANTS.observedAttributes.ELLIPSIS:
                 this.ellipsis = coerceBoolean(newValue);
                 break;
-            case LABEL_VALUE_CONSTANTS.attributes.DENSITY:
-                this.density = newValue;
-                break;
-            case LABEL_VALUE_CONSTANTS.attributes.ALIGN:
-                this.align = newValue;
+            case LABEL_VALUE_CONSTANTS.observedAttributes.INLINE:
+            case LABEL_VALUE_CONSTANTS.observedAttributes.DENSE:
+                this.inline = coerceBoolean(newValue);
                 break;
         }
     }
+    get empty() {
+        return this._empty;
+    }
+    set empty(value) {
+        value = Boolean(value);
+        if (this._empty !== value) {
+            this._empty = value;
+            this.toggleAttribute(LABEL_VALUE_CONSTANTS.attributes.EMPTY, this._empty);
+        }
+    }
+    get ellipsis() {
+        return this._ellipsis;
+    }
+    set ellipsis(value) {
+        value = Boolean(value);
+        if (this._ellipsis !== value) {
+            this._ellipsis = value;
+            this.toggleAttribute(LABEL_VALUE_CONSTANTS.attributes.ELLIPSIS, this._ellipsis);
+        }
+    }
+    get inline() {
+        return this._inline;
+    }
+    set inline(value) {
+        value = Boolean(value);
+        if (this._inline !== value) {
+            this._inline = value;
+            this.setAttribute(LABEL_VALUE_CONSTANTS.attributes.INLINE, String(this._inline));
+        }
+    }
+    /** @deprecated Use `inline` instead. */
+    get dense() {
+        return this.inline;
+    }
+    set dense(value) {
+        this.inline = value;
+    }
 };
-__decorate([
-    FoundationProperty()
-], LabelValueComponent.prototype, "empty", void 0);
-__decorate([
-    FoundationProperty()
-], LabelValueComponent.prototype, "ellipsis", void 0);
-__decorate([
-    FoundationProperty()
-], LabelValueComponent.prototype, "density", void 0);
-__decorate([
-    FoundationProperty()
-], LabelValueComponent.prototype, "align", void 0);
 LabelValueComponent = __decorate([
     CustomElement({
         name: LABEL_VALUE_CONSTANTS.elementName

package/esm/list/list/list.d.ts

@@ -31,9 +31,8 @@ declare global {
  *
  * @slot - The default/unnamed slot for child list items.
  *
- * @cssproperty --forge-list-container-color - The background color of the list surface,
- * @cssproperty --forge-list-block-padding - The block padding of the list before and after the list items.
- * @cssproperty --forge-list-inline-padding - The inline padding of the list next to the list items.
+ * @cssproperty --forge-list-container-color - The background color of the list surface.
+ * @cssproperty --forge-list-spacing - The spacing between the list items.
  *
  * @property {string} role - The role of the list. Default is 'list'. Valid values are 'list', 'listbox', and 'menu'.
  * @property {boolean} static - Whether the list has all static items or not.

package/esm/list/list/list.js

@@ -9,8 +9,8 @@ import { BaseComponent } from '../../core/base/base-component';
 import { ListAdapter } from './list-adapter';
 import { ListFoundation } from './list-foundation';
 import { LIST_CONSTANTS } from './list-constants';
-const template = '<template><div class=\"forge-list\" part=\"root\"><slot></slot></div></template>';
-const styles = ':host{display:block}:host([hidden]){display:none}:host([navlist]){--forge-list-item-height:40px;--forge-list-item-margin:4px 8px;--forge-list-item-padding:0 8px;--forge-list-item-shape:4px;--forge-list-item-supporting-text-font-size:0.875rem;--forge-list-item-supporting-text-font-weight:500}.forge-list{--_list-container-color:var(--forge-list-container-color, transparent);--_list-block-padding:var(--forge-list-block-padding, 8px);--_list-inline-padding:var(--forge-list-inline-padding, 0)}.forge-list{display:block;outline:0;background-color:var(--_list-container-color);padding:var(--_list-block-padding) var(--_list-inline-padding);margin:0;border-radius:inherit;min-width:inherit}';
+const template = '<template><div class=\"forge-list\" part=\"root\"><div class=\"inner\"><slot></slot></div></div></template>';
+const styles = ':host{display:block}:host([hidden]){display:none}:host([navlist]){--forge-list-item-height:40px;--forge-list-item-margin:4px 8px;--forge-list-item-padding:0 8px;--forge-list-item-shape:4px;--forge-list-item-supporting-text-font-size:0.875rem;--forge-list-item-supporting-text-font-weight:500}.forge-list{--_list-spacing:var(--forge-list-spacing, 0);--_list-container-color:var(--forge-list-container-color, transparent)}.forge-list{display:grid;gap:var(--_list-spacing);outline:0;background-color:var(--_list-container-color);margin:0;border-radius:inherit;min-width:inherit}.inner{min-width:0}';
 import { ListItemComponent } from '../list-item';
 /**
  * @tag forge-list
@@ -21,9 +21,8 @@ import { ListItemComponent } from '../list-item';
  *
  * @slot - The default/unnamed slot for child list items.
  *
- * @cssproperty --forge-list-container-color - The background color of the list surface,
- * @cssproperty --forge-list-block-padding - The block padding of the list before and after the list items.
- * @cssproperty --forge-list-inline-padding - The inline padding of the list next to the list items.
+ * @cssproperty --forge-list-container-color - The background color of the list surface.
+ * @cssproperty --forge-list-spacing - The spacing between the list items.
  *
  * @property {string} role - The role of the list. Default is 'list'. Valid values are 'list', 'listbox', and 'menu'.
  * @property {boolean} static - Whether the list has all static items or not.

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

@@ -94,6 +94,7 @@ declare global {
  * @cssproperty --forge-list-item-background-color - The background color.
  * @cssproperty --forge-list-item-shape - The shape of the list item.
  * @cssproperty --forge-list-item-padding - The padding inside of the container element.
+ * @cssproperty --forge-list-item-wrap-padding - The padding inside of the container element when `wrap` is enabled.
  * @cssproperty --forge-list-item-margin - The margin around the host element.
  * @cssproperty --forge-list-item-height - The height of the container.
  * @cssproperty --forge-list-item-dense-height - The height when in the dense state.