Topic i18n split

projects/core/src/accordion/accordion.ts

@@ -8,7 +8,6 @@ import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js
 import type { ContainerElement, Container } from '@nvidia-elements/core/internal';
 import {
   stateExpanded,
-  I18nController,
   TypeExpandableController,
   useStyles,
   attachInternals,
@@ -18,12 +17,18 @@ import {
   audit,
   scopedRegistry
 } from '@nvidia-elements/core/internal';
+import { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';
 import { IconButton } from '@nvidia-elements/core/icon-button';
 import accordionStyleSheet from './accordion.css?inline';
 import accordionHeaderStyleSheet from './accordion-header.css?inline';
 import accordionContentStyleSheet from './accordion-content.css?inline';
 import accordionGroupStyleSheet from './accordion-group.css?inline';
 
+const i18nDefaults = {
+  close: 'close',
+  expand: 'expand'
+} satisfies I18nDefaults;
+
 /**
  * @element nve-accordion-header
  * @description Provides the clickable heading region of an accordion that toggles the visibility of associated content.
@@ -133,7 +138,7 @@ export class Accordion extends LitElement implements ContainerElement {
   /** @private */
   declare _internals: ElementInternals;
 
-  #i18nController: I18nController<this> = new I18nController<this>(this);
+  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);
   #typeExpandableController = new TypeExpandableController(this);
 
   /**

projects/core/src/alert/alert.ts

@@ -9,7 +9,6 @@ import { IconButton } from '@nvidia-elements/core/icon-button';
 import type { SupportStatus, TaskStatus } from '@nvidia-elements/core/internal';
 import {
   attachInternals,
-  I18nController,
   statusIcons,
   TypeClosableController,
   useStyles,
@@ -18,9 +17,18 @@ import {
   appendRootNodeStyle,
   scopedRegistry
 } from '@nvidia-elements/core/internal';
+import { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';
 import globalStyles from './alert.global.css?inline';
 import styles from './alert.css?inline';
 
+const i18nDefaults = {
+  close: 'close',
+  danger: 'danger',
+  information: 'information',
+  success: 'success',
+  warning: 'warning'
+} satisfies I18nDefaults;
+
 /**
  * @element nve-alert
  * @description Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
@@ -70,7 +78,7 @@ export class Alert extends LitElement {
 
   #typeClosableController = new TypeClosableController(this);
 
-  #i18nController: I18nController<this> = new I18nController<this>(this);
+  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);
 
   /** Enables updating internal string values for internationalization. */
   @property({ type: Object }) i18n = this.#i18nController.i18n;

projects/core/src/badge/badge.test.ts

@@ -158,16 +158,6 @@ describe(Badge.metadata.tag, () => {
     });
   });
 
-  describe('i18n property', () => {
-    it('should have default i18n values', () => {
-      expect(element.i18n).toBeDefined();
-      expect(typeof element.i18n.trend).toBe('string');
-      expect(typeof element.i18n.up).toBe('string');
-      expect(typeof element.i18n.down).toBe('string');
-      expect(typeof element.i18n.neutral).toBe('string');
-    });
-  });
-
   describe('status property', () => {
     it('should set a default aria role of status', async () => {
       await elementIsStable(element);

projects/core/src/badge/badge.ts

@@ -13,7 +13,6 @@ import {
   supportStateStyles,
   colorStateStyles,
   attachInternals,
-  I18nController,
   typeSSR,
   scopedRegistry
 } from '@nvidia-elements/core/internal';
@@ -81,13 +80,6 @@ export class Badge extends LitElement {
   /** @private */
   declare _internals: ElementInternals;
 
-  #i18nController: I18nController<this> = new I18nController<this>(this);
-
-  /**
-   * Enables updating internal string values for internationalization.
-   */
-  @property({ type: Object }) i18n = this.#i18nController.i18n;
-
   render() {
     return html`
       <div internal-host>

projects/core/src/color/color.ts

@@ -9,8 +9,13 @@ import { Control } from '@nvidia-elements/core/forms';
 import { IconButton } from '@nvidia-elements/core/icon-button';
 import { inputStyles } from '@nvidia-elements/core/input';
 import globalStyles from './color.global.css?inline';
+import type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';
 import styles from './color.css?inline';
 
+const i18nDefaults = {
+  expand: 'expand'
+} satisfies I18nDefaults;
+
 /**
  * @element nve-color
  * @description A color picker is a control that enables users to choose a color value.
@@ -23,6 +28,10 @@ import styles from './color.css?inline';
  */
 @scopedRegistry()
 export class Color extends Control implements ContainerElement {
+  protected override get i18nDefaults(): I18nDefaults {
+    return i18nDefaults;
+  }
+
   /**
    * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
    * Use when embedding within another container such as a toolbar.

projects/core/src/combobox/combobox.test.lighthouse.ts

@@ -25,7 +25,7 @@ describe('combobox lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(37.1);
+    expect(report.payload.javascript.kb).toBeLessThan(36.49);
   });
 
   test('combobox multi select with large dataset should meet lighthouse benchmarks', async () => {
@@ -42,6 +42,6 @@ describe('combobox lighthouse report', () => {
 
     expect(report.scores.performance).toBeGreaterThanOrEqual(96);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(36.5);
+    expect(report.payload.javascript.kb).toBeLessThan(35.89);
   });
 });

projects/core/src/combobox/combobox.ts

@@ -6,6 +6,7 @@ import { html, isServer, nothing } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import type { ContainerElement } from '@nvidia-elements/core/internal';
+import type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';
 import {
   createLightDismiss,
   focusElementTimeout,
@@ -24,6 +25,13 @@ import { Icon } from '@nvidia-elements/core/icon';
 import { Checkbox } from '@nvidia-elements/core/checkbox';
 import styles from './combobox.css?inline';
 
+const comboboxI18nDefaults = {
+  select: 'select',
+  selected: 'selected',
+  noResults: 'no results',
+  create: 'create'
+} satisfies I18nDefaults;
+
 /**
  * @element nve-combobox
  * @description An editable combobox with autocomplete behavior and selection support.
@@ -60,6 +68,10 @@ import styles from './combobox.css?inline';
  */
 @scopedRegistry()
 export class Combobox extends Control implements ContainerElement {
+  protected override get i18nDefaults(): I18nDefaults {
+    return comboboxI18nDefaults;
+  }
+
   /**
    * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
    * Use when embedding within another container such as a toolbar.

projects/core/src/copy-button/copy-button.test.lighthouse.ts

@@ -19,6 +19,6 @@ describe('copy-button lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(26.76);
+    expect(report.payload.javascript.kb).toBeLessThan(26.5);
   });
 });

projects/core/src/copy-button/copy-button.ts

@@ -4,13 +4,19 @@
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { state } from 'lit/decorators/state.js';
-import { useStyles, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';
+import { useStyles, scopedRegistry } from '@nvidia-elements/core/internal';
+import { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';
 import { Button } from '@nvidia-elements/core/button';
 import { Icon } from '@nvidia-elements/core/icon';
 import { Toast } from '@nvidia-elements/core/toast';
 import { Tooltip } from '@nvidia-elements/core/tooltip';
 import styles from './copy-button.css?inline';
 
+const i18nDefaults = {
+  copy: 'copy',
+  copied: 'copied'
+} satisfies I18nDefaults;
+
 /**
  * @element nve-copy-button
  * @description A copy button is a button that easily enables the copy to clipboard pattern.
@@ -41,7 +47,7 @@ export class CopyButton extends Button {
 
   @state() private showTooltip = false;
 
-  #i18nController: I18nController<this> = new I18nController<this>(this);
+  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);
 
   /**
    * Enables internal string values to update for internationalization.

projects/core/src/date/date.ts

@@ -8,8 +8,13 @@ import { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';
 import { Control } from '@nvidia-elements/core/forms';
 import { inputStyles } from '@nvidia-elements/core/input';
 import { IconButton } from '@nvidia-elements/core/icon-button';
+import type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';
 import styles from './date.css?inline';
 
+const i18nDefaults = {
+  expand: 'expand'
+} satisfies I18nDefaults;
+
 /**
  * @element nve-date
  * @description A date picker is a control that enables users to choose a date value.
@@ -34,6 +39,10 @@ import styles from './date.css?inline';
  */
 @scopedRegistry()
 export class Date extends Control implements ContainerElement {
+  protected override get i18nDefaults(): I18nDefaults {
+    return i18nDefaults;
+  }
+
   /**
    * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
    * Use when embedding within another container such as a toolbar.

projects/core/src/datetime/datetime.ts

@@ -8,8 +8,13 @@ import { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';
 import { Control } from '@nvidia-elements/core/forms';
 import { inputStyles } from '@nvidia-elements/core/input';
 import { IconButton } from '@nvidia-elements/core/icon-button';
+import type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';
 import styles from './datetime.css?inline';
 
+const i18nDefaults = {
+  expand: 'expand'
+} satisfies I18nDefaults;
+
 /**
  * @element nve-datetime
  * @description A datetime picker is a control that enables users to choose a datetime value.
@@ -34,6 +39,10 @@ import styles from './datetime.css?inline';
  */
 @scopedRegistry()
 export class Datetime extends Control implements ContainerElement {
+  protected override get i18nDefaults(): I18nDefaults {
+    return i18nDefaults;
+  }
+
   /**
    * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
    * Use when embedding within another container such as a toolbar.

projects/core/src/dialog/dialog.ts

@@ -7,18 +7,22 @@ import type { PopoverAlign, PopoverPosition, PopoverType, Size } from '@nvidia-e
 import {
   audit,
   excessiveInstanceLimit,
-  I18nController,
   popoverStyles,
   TypeNativePopoverController,
   useStyles,
   attachInternals,
   appendRootNodeStyle,
   scopedRegistry
 } from '@nvidia-elements/core/internal';
+import { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';
 import { IconButton } from '@nvidia-elements/core/icon-button';
 import globalStyles from './dialog.global.css?inline';
 import styles from './dialog.css?inline';
 
+const i18nDefaults = {
+  close: 'close'
+} satisfies I18nDefaults;
+
 /**
  * @element nve-dialog
  * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.
@@ -95,7 +99,7 @@ export class Dialog extends LitElement {
    */
   @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;
 
-  #i18nController: I18nController<this> = new I18nController<this>(this);
+  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);
 
   /**
    * Enables internal string values to update for internationalization.

projects/core/src/drawer/drawer.ts

@@ -6,16 +6,20 @@ import { property } from 'lit/decorators/property.js';
 import type { PopoverType, Size } from '@nvidia-elements/core/internal';
 import {
   createGhostElement,
-  I18nController,
   popoverStyles,
   scopedRegistry,
   TypeNativePopoverController,
   typeSSR,
   useStyles
 } from '@nvidia-elements/core/internal';
+import { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';
 import { IconButton } from '@nvidia-elements/core/icon-button';
 import styles from './drawer.css?inline';
 
+const i18nDefaults = {
+  close: 'close'
+} satisfies I18nDefaults;
+
 /**
  * @element nve-drawer
  * @description A drawer displays content separate from the rest of the page, such as notifications, navigation, and settings.
@@ -90,7 +94,7 @@ export class Drawer extends LitElement {
    */
   @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;
 
-  #i18nController: I18nController<this> = new I18nController<this>(this);
+  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);
 
   /**
    * Enables internal string values to update for internationalization.

projects/core/src/dropdown/dropdown.ts

@@ -9,14 +9,18 @@ import type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-element
 import {
   audit,
   excessiveInstanceLimit,
-  I18nController,
   popoverStyles,
   scopedRegistry,
   TypeNativePopoverController,
   useStyles
 } from '@nvidia-elements/core/internal';
+import { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';
 import styles from './dropdown.css?inline';
 
+const i18nDefaults = {
+  close: 'close'
+} satisfies I18nDefaults;
+
 /**
  * @element nve-dropdown
  * @description Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls.
@@ -106,7 +110,7 @@ export class Dropdown extends LitElement {
   /** @private */
   @query('.arrow') popoverArrow: HTMLElement;
 
-  #i18nController: I18nController<this> = new I18nController<this>(this);
+  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);
 
   protected typeNativePopoverController = new TypeNativePopoverController<Dropdown>(this);
 

projects/core/src/dropzone/dropzone.test.lighthouse.ts

@@ -19,6 +19,6 @@ describe('dropzone lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(19.48);
+    expect(report.payload.javascript.kb).toBeLessThan(19.25);
   });
 });